DESIGN.md：Google 开源的可视化设计格式，让 AI 编码智能体读懂你的设计系统

引言 #

当你让 AI 编码智能体构建一个落地页时，它产出的东西能用——但很少好看。问题不在于模型的能力，而在于缺乏共享的设计语言。每次提示都从零开始，每次生成都偏离上一次，没有任何东西持续记住"我们的设计"到底长什么样。

DESIGN.md（Google Labs Code 出品）解决了这个问题。它是一个开源格式规范，让 AI 编码智能体对你的设计系统获得持久、结构化的理解——把 YAML 色彩令牌、字体排印规格、间距规则，与描述每个值背后意图的自然语言散文结合起来。凭借 20,800+ GitHub star（单日新增 2,319 星），它目前是 GitHub 上最热的设计工具。

什么是 DESIGN.md？ #

DESIGN.md 是一个 Markdown 文件，作为项目视觉身份的单一事实来源。它被设计成让 AI 编码智能体（Claude、ChatGPT、Codex、Cursor 等）读取，使它们生成与你的品牌一致的 UI——而你不需要每次都重新解释设计系统。

这个格式有两层互补结构：

┌──────────────────────────────────────────────────┐
│              DESIGN.md 结构                        │
├──────────────────────────────────────────────────┤
│  1. YAML 令牌层                                    │
│     - color: 色彩令牌（primary/accent/surface…）  │
│     - typography: 字体族、字号、字重、行高        │
│     - spacing: 间距刻度（4/8/12/16/24…）          │
│     - radius/shadow: 圆角与阴影规范               │
│                                                  │
│  2. 散文意图层                                     │
│     - 用自然语言描述"为什么"                       │
│     - 品牌调性、使用场景、禁忌与偏好              │
│     - 智能体无法从令牌值推断的上下文              │
└──────────────────────────────────────────────────┘

为什么它有效 #

传统的设计令牌（如 W3C Design Tokens 格式）解决了"值的一致性"，但没解决"意图的传达"。AI 智能体可以读到 --color-primary: #0A84FF，但它不知道：

• 这个蓝色应该用于主按钮还是链接？
• 品牌是"严谨企业"还是"活泼消费"风格？
• 什么情况下不应该使用这个颜色？

DESIGN.md 的散文层正是为这些问题的答案而设。它把"设计系统的语义"编码进 AI 能理解的形式，让每次代码生成都带上设计上下文。

快速上手 #

# DESIGN.md

## Color Tokens
```yaml
primary:
  value: "#0A84FF"
  usage: "主按钮、链接、焦点态"
accent:
  value: "#FF375F"
  usage: "徽标、促销、需要强调的操作"
surface:
  value: "#FFFFFF"
  usage: "页面背景、卡片"

## 结论

DESIGN.md 正在成为 AI 时代的"设计系统接口标准"。当设计意图能结构化地传递给编码智能体时，"AI 生成 UI 难看"的问题就从根上缓解了。如果你的团队在大量使用 AI 编码工具，在仓库里加一份 DESIGN.md 是当前性价比最高的设计投资。