什么是 MiroMiro？

MiroMiro 是一款 Chrome 扩展程序，无需打开 DevTools 即可检查、复制和导出任意网站的设计资源。将鼠标悬停在任意元素上，即可即时获取其 CSS、颜色、字体和间距。一键下载图片、SVG 和 Lottie 动画。提取完整的设计令牌，并将其导出为 Tailwind 配置或 CSS 变量。专为那些希望不再从零开始重建、更快交付的设计师和开发者打造。

适用人群

• 前端开发者：需要逆向工程 UI 组件，并将可直接用于生产的 Tailwind + HTML 代码直接复制到 Cursor、Claude 或 v0 中
• 设计师：希望从在线网站中提取品牌颜色、字体和设计令牌，而无需深入 DevTools
• 无代码构建者：需要快速获取资源、动画和设计系统，以加速工作流程

主要功能

实时检查器

将鼠标悬停在在线网站的任何元素上，即可查看其 CSS。内联更改颜色、字体或内边距，页面会实时更新。将编辑后的值以 CSS 或 Tailwind 格式复制出来，刷新后更改不会丢失。

导出为代码

点击任意元素，即可获得干净、语义化的 Tailwind + HTML 代码，可直接粘贴到 Cursor、Claude 或 v0 中。无需再猜测或向 AI 描述 UI——一键即可获得精确代码。

资源提取器

无需检查 DOM 即可获取任意图片的原始质量。导出为 PNG、JPG 或 WebP 格式。将内联 SVG、图标或插图提取为实际矢量——完全可编辑。将 Lottie 动画下载为 JSON 格式，用于 After Effects 或 LottieFiles。

设计令牌提取

从在线网站中提取所有颜色、字体、圆角和阴影，作为 Tailwind 配置或原始 CSS 变量。选取任意像素或提取完整的品牌调色板，并将 hex、RGB、HSL 或 OKLCH 格式直接导出到 Tailwind、Figma 或您的设计系统中。

突出特点

"无需再在开发者工具中翻找颜色、字体、间距、资源——一切即刻呈现。"

MiroMiro 消除了传统设计检查的繁琐。无需浏览复杂的 DevTools 树，只需悬停、点击和复制。该扩展程序完全在本地运行——没有任何内容离开您的浏览器。您可以收藏组件、颜色和资源，构建一个随着您访问每个网站而不断增长的个人素材库。它还内置了 WCAG 对比度检查功能，可针对文本和 UI 组合检查 AA 和 AAA 标准。

值得一试，如果……

您厌倦了向 AI 描述 UI，或者截图无法转化为实际代码。如果您经常逆向工程落地页、快速重建 UI，或者希望从在线网站中提取设计系统而无需手动检查，MiroMiro 尤其有用。免费开始使用，提供 3 天 Pro 试用，无需信用卡。