MiroMiro

MiroMiro 是什么？

MiroMiro 是一款免费的 Chrome 扩展，可让您检查任意在线网页上的元素，并复制底层设计和代码资源。它提取 CSS 并转换为 Tailwind，还可导出 SVG 和 Lottie 动画等资源。

目标是减少 UI 的手动“逆向工程”——让您直接从页面拉取颜色、字体、间距/圆角/阴影和代码输出到编辑器中。

主要功能

• 一键复制元素（实时网站）： 点击元素，即可获取精确的 CSS 派生值及当前页面的相关设计信息。
• CSS 转 Tailwind 导出： 将提取的样式转换为生产就绪的 Tailwind 输出，并附带 HTML 以便在项目流程中复用。
• 设计令牌提取（调色板 + 令牌）： 提取品牌颜色/调色板，并导出令牌（包括 Tailwind 配置和 CSS 变量等格式），如主色/强调色/表面色及其他 UI 值。
• 图像和矢量资源提取： 以原始质量导出图像为 PNG、JPG 或 WebP，并将内联 SVG/图标/插图提取为可编辑矢量资源。
• Lottie 提取： 检测页面上播放的 Lottie 动画，并下载 JSON 以便在项目中复用。
• 页面内无障碍对比检查： 在实时网站上检查文本/UI 颜色搭配是否符合 WCAG AA 和 AAA 对比标准。
• 本地运行： 提取过程在本地运行，扩展声明不会查看您复制的内容。
• 资源库/书签： 将组件、颜色和资源等保存到不断增长的个人参考库中。

如何使用 MiroMiro

1. 安装 Chrome 扩展 并打开您要参考的网站。
2. 悬停检查 查看元素样式（CSS）及相关值，并可选调整内联值以实时查看变化。
3. 点击导出 选定元素为 代码（Tailwind + HTML） 或提取 设计令牌 如颜色。
4. 导出资源（图像为 PNG/JPG/WebP、内联 SVG 为矢量、Lottie 动画为 JSON）使用资源提取器。

使用场景

• 更快重建着陆页： 在实时页面点击 UI 组件，即获取 Tailwind + HTML 输出，而非手动匹配截图。
• 生成品牌调色板和令牌： 从实时网站提取完整调色板，并导出 hex/RGB/HSL/OKLCH 值，适配您的设计系统流程。
• 提取矢量图标/SVG 插图： 从页面提取内联 SVG 并粘贴为可编辑矢量资源，而非依赖截图。
• 将现有动画添加到应用： 在页面找到 Lottie 动画并下载其 JSON 以集成到您自己的 Lottie UI 中。
• 预检查无障碍颜色对比： 使用页面内 WCAG 对比检查（AA/AAA）在生产前验证文本/UI 搭配。

常见问题

MiroMiro 是网页应用还是浏览器扩展？
MiroMiro 是 Chrome 扩展。

MiroMiro 可从任意实时网站提取代码吗？
扩展设计用于从 任意实时网站 的元素复制 CSS 并转换为 Tailwind。

它能导出哪些输出？
根据页面，输出包括 Tailwind + HTML、设计令牌（颜色/调色板）、CSS 变量/配置导出、图像（PNG/JPG/WebP）、SVG 和 Lottie JSON。

MiroMiro 会将复制内容发送到服务器吗？
页面声明提取在本地运行，且不会查看您复制的内容。

Pro 功能有免费试用吗？
有。页面提到 3 天 Pro 试用无需信用卡，之后 Pro 为 €6/月（并提及有限早鸟终身选项“一次性付费”）。

替代方案

• 浏览器 DevTools（手动检查）： 可直接检查 CSS 和 DOM，但通常需手动提取并转换为 Tailwind 等格式。
• UI 转代码/设计转代码工具（聚焦布局流程）： 这些工具常从截图或设计文件生成代码，但流程可能不同于从实时页面拉取精确值。
• 设计令牌提取工具（聚焦颜色/主题）： 专用于提取调色板/令牌的工具可帮助颜色系统，但可能不涵盖 Tailwind/HTML 导出、Lottie 下载及内联 SVG 提取。
• Lottie 专用提取器： 专用于 Lottie 资源的工具可检索动画，但可能不提供 MiroMiro 所述的更广泛 CSS/Tailwind 和设计令牌提取。