一键通过 Web 进行编码:Tailwind、React、Vue、Elementor 和 Bricks。适用于 CSS、颜色、SVG 和 Lottie 的 Web 检查器和字体查找器。
MiroMiro 是一款集网页元素检查器、字体查找器、颜色选择器、响应式设计测试器和网页到代码工具于一体的工具。检查任何网站,提取其颜色、字体、组件、图像、视频和音频,像 Figma 一样实时编辑样式,并导出干净的代码,所有这些都无需打开 DevTools。
你可以做什么:
• 实时检查和编辑。将鼠标悬停在任意元素上即可查看其 CSS。单击可打开编辑器面板并实时更改颜色、字体、间距、边框、不透明度和阴影。页面会随着您的输入而更新。
• 单击以复制任何值。 “信息”选项卡将所选元素的每个属性显示为可复制的芯片。获取十六进制颜色、字体系列、阴影、边框半径。在剪贴板上单击一下。
• 导出到代码。选择任何部分,或捕获整个页面,并将其导出为 Tailwind、HTML + CSS、React (JSX) 或 Vue,其中包括网站的字体和样式。将任何网站转换为可以粘贴到项目中的代码。
• 导出到Elementor。将任何部分或整页转换为 Elementor 模板。将其导入 WordPress 并像任何其他设计一样进行编辑,全角且适合移动设备。
• 捕获设计系统。概述为您提供了网站的完整调色板、字体堆栈、间距比例、半径样式、阴影层和检测到的技术堆栈。
• 下载图像、SVG、视频和音频。直接从任何网站保存图像、SVG 图标、字体、Lottie 动画、背景视频和声音效果或 MP3。下载声音之前,使用播放按钮预览声音。不再需要右键单击另存为。
• 辅助功能检查器。您选择的任何文本元素上都有内置 WCAG 对比度检查器。
• 设计代币。提取 Tailwind、CSS 变量或 JSON 的标记。
• 在任何设备上预览。在真实设备框架(iPhone、Pixel、iPad、MacBook 等)中以真实视口尺寸打开任何网站,因此其响应断点的行为与在设备上的行为完全相同。无需调整浏览器窗口的大小。
• 浮动窗口、侧面板和深色模式。 MiroMiro 作为浮动窗口打开,您可以将其拖动到页面上的任意位置,或者根据您的喜好停靠在侧面板中。浅色或深色模式。
谁使用 MiroMiro:
- 网页设计师收集调色板、字体组合和视觉参考
- 前端开发人员获取 CSS 值、检查布局并提取资源
- WordPress 构建者将实时设计转变为 Elementor 模板
- 用户体验设计师检查页面的可访问性和颜色对比度
- 分析竞争对手网站并收集客户品牌资产的机构
- 视频和内容创作者为其项目收集声音效果、图标和视觉效果
工作原理:
单击任意网站上的 MiroMiro 图标。自动提取颜色、字体、图像、视频、音频和其他资源。单击任何元素即可查看其完整的 CSS 分解。在编辑器选项卡中,更改任何值并实时观看页面更新。一键复制或下载任何内容。
适用于 Chrome、Edge、Brave 和 Arc。
无需开发工具。只需将鼠标悬停、单击并复制即可。
永久免费:检查任何元素,查看任何网站的颜色、字体和堆栈,以及下载图像、SVG、视频和音频。每个新帐户都将从为期 3 天的试用开始。升级到 Pro 以获得代码和 Elementor 导出、对比扫描、设计令牌、Lottie 动画和同步库。
新功能:将 MiroMiro 与您的 AI 编码代理结合使用
MiroMiro 还可以在 Claude、Cursor 和其他 AI 工具(MCP 服务器)中运行。要求您的代理提取网站的颜色、字体、设计标记或部分代码,它会直接提取它们,无需在选项卡之间进行复制粘贴。只需一分钟即可在 miromiro.app/api 上进行设置
访问 miromiro.app 了解更多信息
MiroMiro 是一款集 Web 元素检查器、字体查找器、CSS 查看器和 Web 代码工具于一体的工具。使用它作为字体查找器来识别任何字体,作为颜色选择器和吸管来抓取任何颜色,作为 Web 元素检查器来读取任何元素的 CSS,以及作为 Web 到代码导出器来将任何设计转换为 Tailwind、HTML、React 或 Elementor。从任何网站下载 Lottie 动画、SVG、图像、视频和音频。





