DESIGN.md 工具
搜集、生成、复用 DESIGN.md 和设计制品的工具合集，让 AI 编程工具理解你想做的产品长什么样。
DESIGN.md 是一份写给 AI 看的设计说明书，描述产品的颜色、字体、间距、组件风格等视觉规范。把它交给 Claude Code、Cursor 或 Codex，AI 生成的 UI 才会符合你的品牌语言，而不是随机发挥。
以下工具覆盖了"找参考→提取规范→生成文件→落到代码"的完整链路。
Open Design
推荐指数：⭐⭐⭐⭐⭐
开源、本地优先、BYOK 的 AI 设计工作台。它不只是生成一份 DESIGN.md，而是把需求澄清、设计系统选择、原型生成、局部评论修改、预览和导出串成一条完整链路。
为啥用： 如果你已经在用 Codex、Claude Code、Cursor Agent 这类 coding agent，Open Design 的价值在于能直接调用你本地已有的 agent 和额度，不被单一模型或封闭产品绑死。它适合先做高保真原型，再把 HTML、样式和设计规则迁移到真实项目里。
怎么用（一般流程）：
- 连接本地已安装的 coding agent CLI，比如 Codex、Claude Code 或 Cursor Agent
- 新建原型时选择设计系统、目标平台和保真度，再回答几个产品问题
- 用评论、框选和 Inspect 继续调整布局、文案、颜色和组件细节
- 导出 HTML 和资源后，让 AI 在真实项目里提取设计 token、封装可复用组件，并写清楚后续复用规则
注意： 不要把导出的 HTML 直接复制进项目就结束。更好的做法是让 agent 先分析其中的颜色、排版、间距、组件和布局规则，再迁移成项目里的可维护组件体系。否则页面一多，价格卡片、FAQ、按钮这类重复模块很容易被 AI 重写成多份。
在 Codex 中使用 Open Design（推荐）
你不需要自己去操作 Open Design 的界面。 很多人以为 Open Design 是 Codex 的一个插件——装进去、点图标、开始用。其实正好反过来：是在 Codex 里告诉它去部署和操作 Open Design。
你只需要让 Codex 从 GitHub 拉取 Open Design 并在本地启动，然后告诉 Codex 你想做什么设计。接下来所有事情都由 agent 替你完成：
- 在 Open Design 里选择合适的设计 workflow、填写 brief
- 操作 canvas 生成高保真原型
- 检查生成的文件结构、预览交互效果
- 测试页面交互、验证设计一致性
- 基于反馈迭代修改设计
- 把产出的 HTML 和样式迁移到真实项目
这套组合的实质是给 Codex 配了一块可视化设计画板。Codex 负责理解和执行——读需求、跑流程、改代码——Open Design 负责把设计过程变成可以看、可以点的界面。设计工具从等人来操作的应用，变成了 agent 可以直接调用的能力。
想试的话，打开 Codex 输入：把 Open Design 仓库 在本地部署并启动，然后用它来做设计。
视频参考：Open Design 工具实战讲解
styles.refero.design
推荐指数：⭐⭐⭐⭐⭐
2,000+ 个真实产品的 DESIGN.md 参考库，从 Linear、Apple 到 Duolingo 都有。每个条目都包含完整的颜色、排版、间距、组件定义。
为啥用： 自己从零写 DESIGN.md 很抽象，Refero 让你直接参考成熟产品的设计系统。支持导出 Tailwind v4、CSS Variables 和 Design Token 等多种格式，覆盖最全。还提供 MCP 集成，AI 编程工具可以直接搜索和学习参考库。
怎么用：
- 搜品牌名（Linear / Stripe / Notion）看对应设计规范
- 按 mood（极简 / 现代 / 温暖）、颜色、字体筛选
- 找到喜欢的风格后导出 DESIGN.md，或直接让 AI agent 通过 MCP 搜索参考
designmd.me
由 Crowdlinker 开发的 DESIGN.md 生成器，输入任意网站 URL 自动输出一份设计系统文档。
为啥用： 看到一个竞品或灵感网站，想参考它的配色和排版风格时，不用肉眼扒——贴 URL 就出来完整的设计 Token。支持 CLI，可集成到工作流中批量生成。
怎么用：
- 粘贴网站 URL（如 stripe.com / linear.app）
- 自动生成 DESIGN.md 文件，包含设计 Token、排版定义、组件模式
- 用 CLI 集成到本地工作流
github.com/bergside/design-md-chrome
Chrome 浏览器扩展，实时从当前页面提取样式并生成 DESIGN.md 或 SKILL.md。
为啥用： 即开即用，不需要输入 URL、不需要打开另一个网页。浏览到灵感网站时一键提取，适合日常冲动式收集设计规范。
怎么用：
- 安装扩展（Chrome Web Store ID:
ogpdnchdjiibhobphelbbkemnnemkfma） - 访问任意网站，点击扩展图标
- 点 Auto-extract 抓取样式 → Generate DESIGN.md 输出
- 下载文件，丢给 AI 编程工具使用
neuform.ai
AI Landing Page 构建器，可通过 AI 快速生成 HTML 落地页。
为啥用： 不是 DESIGN.md 工具，但和"给 AI 设计上下文"是一体两面——一个是对已有设计做规范提取，一个是从零生成设计。如果你还没有设计方向，可以用 Neuform 快速生成视觉原型，再反向导出规范。
怎么用：
- 用 AI 描述你的产品，生成 HTML 落地页
- 生成的页面可作为 DESIGN.md 的输入来源
一句话选型： 找设计参考用 Refero，扒竞品设计用 designmd.me，日常随手收集用 design-md-chrome，从零生成页面用 neuform.ai。