SheepNav
MiroMiro v2

MiroMiro v2

producthunt.com

像Figma一样实时编辑网页设计并导出代码

11天前制作者:Soraia

关于 MiroMiro v2

MiroMiro v2 是一款强大的浏览器设计工具,让你能够像在 Figma 中一样,直接对任意网站的设计进行 实时检查、编辑和导出。只需悬停即可查看样式,点击即可修改颜色、字体、间距和阴影,所有修改即时生效。

核心功能

设计编辑:通过直观的界面,你可以像操作设计软件一样,直接调整网页上的元素样式。修改 颜色字体间距阴影 等属性,所见即所得。

代码导出:将你修改后的设计片段导出为 TailwindHTML/CSS 代码,轻松将灵感转化为可用的前端代码。

设计系统捕获:一键捕获整个网站的设计系统,包括 颜色字体间距圆角阴影,甚至技术栈信息。

资源提取:提取页面中的 SVGLottie 动画图片,方便复用。

设计令牌导出:将设计令牌导出为 TailwindCSS 变量JSON 格式,便于集成到项目中。

主要特性

  • 实时编辑:悬停查看样式,点击直接修改,效果即时呈现。
  • 一键复制:任何属性值均可一键复制,提升效率。
  • 无障碍检测:检查任意文本的 WCAG 对比度,确保可访问性。
  • 多格式导出:支持 Tailwind、HTML/CSS、JSON 等多种输出格式。
  • 全设计系统捕获:从颜色到阴影,全面提取设计规范。

适用场景

  • 前端开发者:快速从优秀网站获取设计灵感并导出可用代码。
  • UI/UX 设计师:在浏览器中直接修改和验证设计细节。
  • 产品经理:快速调整原型样式,无需等待开发。

MiroMiro v2 是从 灵感工作代码 的最快路径,让设计检查和代码生成变得前所未有的简单。

相关工具