DESIGN.md 是什么？给 Coding Agent 的设计系统文件

让 Cursor 或 Claude Code 写界面，出来的常常是同一套无衬线、同一套蓝紫、同一排三列卡片。模型不是没有审美，是没有一份会跟着走的视觉合同，于是只能猜。

一句话定义

DESIGN.md 是一份给 coding agent 遵守的设计系统文件。前半是 YAML：颜色、字体、间距、圆角、组件 tokens，机器能解析。后半是 Markdown：为什么这样取舍、什么能做、什么不要做。Agent 先读文件再写 UI，才有机会不像默认皮肤。

这份格式从哪来

格式与 Google Labs 的 Stitch 产品相关。公开草案在 GitHub 上。design.allworkin.ai 按这份规格导出文件，并不拥有格式本身。 google-labs-code/design.md

文件长什么样

完整文件还有圆角、间距、组件，以及八节正文。下面只截 YAML 里的 colors 和 typography。

从 Paper 导出里截出的 colors 与 typography，不是完整规格。

name: Paper
colors:
  primary: "#8C4A32"
  background: "#F6F1E8"
  onBackground: "#18181B"
  surface: "#FFFBF4"
typography:
  h1:
    fontFamily: Fraunces
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.12
    letterSpacing: -0.03em
  body:
    fontFamily: Newsreader
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0em

Agent 怎么用它

把 DESIGN.md 放到仓库根目录。在 Cursor 规则、CLAUDE.md 或 AGENTS.md 里写清楚：写界面之前先读这份文件，tokens 是准绳。具体接线（规则文件、skill、导入 Stitch）另开一篇。本篇只讲合同是什么。

手写还是可视化

你可以对照公开草案自己写 YAML。也可以在本站选一套风格、看预览、复制已经校验过的 DESIGN.md。手写适合你已经有品牌色和字体清单。可视化适合先把气质定下来，再交给 agent。

下一步

去风格库挑一套，复制 DESIGN.md，丢进你的 agent 项目。需要边看边改，用编辑器。

常见问题

DESIGN.md 是什么？

一份给 coding agent 的设计系统文件：YAML tokens 给机器，Markdown 理由给人类。

和 Stitch 是什么关系？

Stitch 是 Google Labs 的产品，公开草案在 google-labs-code/design.md。本站按该规格导出，不是格式所有者。

怎么接到 Cursor？

根目录放 DESIGN.md，并在规则里要求先读再写界面。逐步接线另文说明。