别再依赖截图重建界面。
将真实代码粘贴到 Cursor
MiroMiro 是一款浏览器扩展，可检查任意网站，并将其真实的 HTML、Tailwind 和素材导出为干净、可直接粘贴的代码。
检查、提取、交付所需的一切。
复制代码、提取素材、抓取 Lottie、获取设计令牌与配色、检查对比度 — 然后将干净的上下文粘贴到 Cursor、Claude、v0 或 Lovable。
在真实网站上检查、编辑、复制。
悬停任意元素查看 CSS。直接修改颜色、字体或内边距，页面会实时更新。设计满意后，将编辑后的值复制为 CSS 或 Tailwind。无需 DevTools 树，重载也不会丢失更改。
了解更多设计令牌 → Tailwind
从任何网站提取颜色、字体、间距和圆角。导出为可直接粘贴的 tailwind.config.js。
提取设计令牌品牌色彩。真实调色板。
从任何网站取一个像素，或提取完整品牌调色板。HEX、RGB、HSL、OKLCH 直接导出到 Tailwind、Figma 或你的设计系统。
提取品牌调色板复制和下载 SVG
即时将 SVG 代码复制到剪贴板或下载文件。支持内联 SVG、图标系统和 Logo。
从任何网站提取 SVGWCAG 对比度，就在页面上。
无需离开网站即可检测每对文字与 UI 是否符合 WCAG AA 与 AAA 标准。在上线前修复无障碍问题。
检测 WCAG 对比度保存到资源库
将颜色、字体、图片和 SVG 保存到您的个人资源库，以便日后使用。
了解更多100% 隐私保护
完全在您的浏览器中运行。不会向任何服务器发送数据。
了解更多What people actually say.
来自 Product Hunt 和 Chrome 应用商店的未经编辑的评论。
“This product is super cool, nifty, and thoughtfully designed. It’s visually tasteful while also being seamless in its absorption into my workflow. I particularly love how, in addition to inspecting a page to extract its design elements, you can also save any particular element — a typeface, a gradient — and have your own library of design tokens. That design granularity really sets this apart from other inspectors that are more dev-focused.”
Lake Cam
Product Hunt review“Really impressed by MiroMiro. The product feels thoughtfully designed, polished, and focused on solving a real problem instead of adding unnecessary complexity. You can tell there’s strong attention to UX details — the experience feels lightweight, intuitive, and fast, which is increasingly rare.”
Miguel Parente
ArtMathCode“Really impressed with MiroMiro. It saves a ton of time when inspecting websites. No more digging through devtools to find colors, fonts, spacing, assets, etc. Everything is just there instantly. Super useful for designers and frontend devs who want to move fast. Definitely recommend.”
Naivaidya Yadav
Frontend Developer“As someone focused on the backend, spending time on UI checks and complex CSS debugging is the quickest way for me to get frustrated. Luckily, this tool is incredibly well-designed, fluid, and fast, with a refreshingly simple interface. It streamlines my workflow perfectly.”
Soufian Loukili
Backend Developer“The live editor basically turns the whole web into a playground. I love the idea of tweaking a live site’s shadows and borders directly in the browser to see how it actually looks before jumping back into the codebase. Congrats on the v2 ship!”
Vikram
Product Hunt review在下一个项目中试试。
安装 MiroMiro，打开任意你喜欢的网站，一分钟内导出真实的页面区块。下次你的 AI 需要参考时，它就有了。
在 Chrome 应用商店和 Product Hunt 获得 5.0 评分 · 开始无需信用卡
Pay once. Use it forever.
选择终身版，从此无需再付费；或选月付方案，简单省心。无论哪种，都包含全部工具。
免费
永久免费检查任意网站。另有 3 天完整 Pro 试用，可下载和导出。
- 检查 CSS、字体和颜色 — 无限制
- 在任意页面实时编辑样式
- 3 天试用：完整下载与导出
- 开始无需信用卡
终身专业版
最超值无订阅，不涨价。每一次更新，永久免费。
下一档 €89 →
- 永久享有专业版全部功能
- 无需月付或年付
- 无限资源提取
- 无限设计系统导出
- VIP 优先支持
- 5 GB 库存储
60 天退款保障，之后永久归你所有。
Final price in your local currency at checkout.
Browser support
Works where you work
Available in Chrome, Edge, Brave, Opera, and Firefox today.
常见问题
关于 MiroMiro 您需要知道的一切。找不到您想要的答案？
免费试用 3 天 — 所有 Pro 功能全部解锁，无需信用卡。3 天试用结束后，需要选择一个方案继续使用。Lifetime Pro 是一次性付款，没有月费或年费续订。
MiroMiro 适用于几乎所有公开网站 — 包括使用 React、Next.js、Vue、WordPress、Webflow 和 Framer 构建的网站。某些具有严格安全策略的网站可能会限制部分提取功能。
安装 MiroMiro，打开使用 Lottie 动画的网站，然后点击 Lottie 图标 — 页面加载的每个动画都会被自动检测。逐个预览，然后下载为标准 Lottie JSON 或 dotLottie。兼容 lottie-web、lottie-react、lottie-ios 以及 LottieFiles 播放器。无需 DevTools，无需在 Network 标签页里翻找。
可以。点击任意区块 — 英雄区、导航栏、价格卡片 — MiroMiro 都会以干净的 HTML 加 Tailwind 类输出。所有数值来自渲染后的真实 DOM，而不是截图猜测，因此颜色、间距、字体、阴影完全像素级准确。直接粘贴到 Cursor、Claude 或 v0，跳过手动改写。
提取 CSS、颜色和布局模式用于学习、灵感或参考是标准做法。MiroMiro 是一个研究网站构建方式的工具 — 就像查看源代码一样。商业使用资源时请尊重版权。
DevTools 显示原始代码。MiroMiro 提供干净、即用的输出 — 将整个区块复制为生产级代码、批量下载所有资源、将完整设计系统导出为 Tailwind 配置。无需在 DOM 中翻找。
需要选择一个方案才能继续使用 MiroMiro — 3 天试用结束后即为付费。不会丢失任何数据，您保存的资源库和提取的资源都会保持完整。可一键升级到 Lifetime Pro（一次性付款）或 Starter/Pro 订阅方案。
MiroMiro 完全在您的浏览器中运行。提取的资源和资源库数据保留在您的设备上。我们只存储匿名使用次数以管理方案限制 — 仅此而已。
随时可以在个人资料中取消 — 您将在当前计费周期结束前保留访问权限。不满意？14 天内联系我们全额退款，无需理由。
是的 — 这正是它的设计目的。MiroMiro 将组件导出为干净、语义化的 Tailwind HTML，你可以直接粘贴到 Cursor、Claude、Lovable、Bolt、v0 或 ChatGPT 中。你的 AI 工具读取的是带有真实类名和真实值的真实代码，因此它会重构、适配和组合，而不是从截图中猜测。
不必只听我们说
不确定 MiroMiro 是否适合你？
让你最喜欢的 AI 来帮你判断。点一下按钮，看看它对从任意网站提取代码、设计令牌和资源的评价。
