DESIGN md 是一份用设计语言(而非产品语言)写成的指导文档,是把设计系统翻译成 AI 能理解的语言。它和 PRD 的区别很简单:
PRD 管"做什么"——功能、流程、边界
DESIGN.md 管"做成什么样"——视觉风格、配色、排版、交互
你可以把它理解为:把 Figma 里的设计系统,翻译成 AI 能理解的语言。
一份完整的 DESIGN md 通常包含这些内容:
- 视觉风格定位:用一句话定义整体方向,例如「极简 / 复古 / 科技感」等风格基调,对应 Figma 的 Moodboard。
- 颜色规范:明确主色、辅色、中性色的使用规则,对应 Figma 的 Color Variables。
- 排版规范:建立字体、字号、行高、间距等排版体系。对应 Figma 的 Typography Scale。
- 组件规范:定义按钮、卡片、表单、弹窗等核心组件在不同状态下的样式和规范。对应 Figma 的 Component Library。
- 交互规范:明确 hover 效果、过渡动画、反馈方式等交互细节。对应 Figma 的 Prototype。
- 响应式策略:定义断点设置以及在不同设备下的布局调整规则。对应 Figma 的 Auto Layout。
- 可访问性要求:遵循 WCAG 标准,包含颜色对比度、焦点状态、键盘操作等要求。
- 约束边界:明确列出设计中严格允许和禁止的事项,为设计划定清晰范围(设计边界)。
怎么生成 DESIGN.md
当前比较多的是借助 Skills 或者在线工具生成,可以从我之前分享的网站工具中寻找合适的。
而我自己做了一个工具 rico-skills/get-design-md,可以输入任意网站自动生成完整的设计系统文档,也可以在不同设计令牌格式之间转换(DESIGN.md、tokens.json、variables.css、theme.css)。有需要的可以试试。
使用上很简单:把 DESIGN.md 放到项目根目录,然后对 AI 说:
> 使用 DESIGN md 优化设计
如果你有安装设计类 SKILLS,记得要禁止它调用,会造成干扰。
有了这份设计文档,AI 在修改 UI 时就不再是"凭感觉"调整,而是按照一套明确的规范来执行。比如我说"给设置面板加一个新的开关",AI 会自动沿用 DESIGN.md 中定义的组件样式和交互方式,不需要我每次重复描述。
为什么推荐在 Vibe Coding 中使用 DESIGN.md
三个原因:
第一,AI 对结构化设计指令的理解远优于模糊描述。 "按钮要有悬停效果"不如"按钮 hover 时背景色从
#2d6dc3 变为
#0066ff,过渡时间 150ms"。
第二,设计师写的 DESIGN.md = 把 Figma 的设计系统翻译成 AI 能理解的语言。 你在 Figma 里做组件化、定义 Variables、整理设计系统时积累的能力,在这里直接有用武之地。
第三,一次写好,每次迭代都能复用。 DESIGN.md 不需要每次都重写。项目初期花时间定义好设计规范,后续所有的 AI 修改都会自动遵守,保持风格一致性。
设计师在 Vibe Coding 中的独特优势就是:你比 AI 更懂什么是好的体验。DESIGN.md 是你把这个优势转化为实际效果的工具。 。
相比于设计类SKILLS 实际体验中会带出比较模板化的风格,而DESIGN.md 的好处是,它能把你自己的设计判断保留下来,也更容易贴合当前项目。
对设计师来说,保留自己的判断,比直接套用现成风格更重要。