OpenDesign

#Playwright #VisionLLM #前端开发 #UI还原 #网页复刻 #开源项目
opendesign 是一款用于自动提取网站视觉设计规范的开源工具。它基于 Playwright 和 Vision LLM，可以直接分析目标网页，把颜色、字体、字号、间距、圆角、阴影等视觉信息整理成标准化的 Design Tokens。
以前复刻网页时，开发者通常需要打开浏览器控制台，逐个查看元素样式，再手动记录 CSS 参数。opendesign 将这部分工作自动化，能够从真实浏览器渲染结果中提取样式，再通过多模态模型进行归纳和校验，最终输出适合前端开发和 AI 编程工具使用的设计规范。

软件功能

- 真实浏览器渲染：底层使用 Playwright 打开并运行目标网页，获取页面实际渲染后的结果。
- 提取 Computed Styles：自动读取元素最终生效的颜色、字体、间距、边框、圆角、阴影等 CSS 属性。
- 动态状态分析：可结合页面交互分析悬停、聚焦、激活等状态下的样式变化。
- 伪类样式提取：识别部分伪类和伪元素相关样式，减少手动检查工作。
- Vision LLM 视觉校验：通过多模态模型分析页面布局、视觉层级和色彩关系，对提取结果进行归一化整理。
- 清理冗余样式：过滤重复、临时或无关的 CSS 数据，保留更适合构建设计系统的核心参数。
- 生成 Design Tokens：将零散样式整理成统一的颜色、字体、间距、圆角和阴影规范。
- 多种格式导出：支持输出标准化 JSON、CSS Variables 以及 Markdown 设计规范文件。
- 适配 AI 编程工具：导出的 Markdown 或 Token 文件可以直接提供给 Claude Code、Cursor 等工具，用于约束后续 UI 生成。
- 适合网页还原：可用于参考优秀网站的视觉体系，辅助搭建自己的组件库和设计系统。
- 适用人群：适合前端开发者、独立开发者、产品经理，以及从事 AI 原生界面和 UI 自动生成的用户。
- 注意版权与商标风险：提取结果更适合作为样式研究和设计系统参考。用于商业项目时，应避免直接复制品牌标识、插画、图标和其他受保护资产。