你有没有经历过这种时刻：让 AI 帮你写个页面，第一次出来还行，第二次完全变样，第三次又换了个配色。每次生成都像开盲盒。

根本原因不是 AI 能力不够，而是它不知道你的设计标准是什么。

没有 DESIGN.md 时，AI 每次生成的界面都不一样

上周 Google Stitch 团队提出了一个新概念：DESIGN.md —— 一个纯文本文件，专门写给 AI 编程代理看，告诉它”这个项目应该长什么样”。

GitHub 上几天就涌入了几千颗星，VoltAgent 做的 awesome-design-md 仓库收集了 73 个知名产品的 DESIGN.md 文件，从 Linear 到 Stripe，从 Notion 到 Vercel，每个都是拆解过的设计系统。

DESIGN.md 到底是什么？

打个比方：

文件 谁读它 定义什么
README.md 人类开发者 项目是干什么的
AGENTS.md 编程代理 项目怎么构建
DESIGN.md 设计代理 项目应该长什么样

它的核心思路特别简洁——Markdown 是 LLM 最擅长阅读的格式。不需要 Figma 导出，不需要 JSON schema，不需要任何特殊工具链。把 DESIGN.md 扔到项目根目录，任何 AI 编程代理（Claude Code、Cursor、Copilot）都能直接读懂并执行。

DESIGN.md 里有什么？

一个标准的 DESIGN.md 包含两大块：

YAML 设计 Token：机器可读的结构化数据，包括调色板、字体、间距系统、动效参数。

Markdown 设计理念：人类可读的文字描述，解释为什么这样设计、什么该做什么不该做。

以 VoltAgent 仓库里 Claude 的 DESIGN.md 为例：温暖的红陶色调（#cc785c）、干净的编辑式布局、克制的留白。你在 Claude Code 里跑一个前端任务，它会自动读取这个文件，生成符合这套美学的界面。

Claude 的 DESIGN.md 文件示例

这种”机器可读 + 人类可读”的组合，让 AI 既能精确执行（用 token 保证数值准确），又能理解设计意图（通过文字描述理解上下文）。

生态比我想象的成熟

围绕 DESIGN.md 已经长出了一套三层生态：

DESIGN.md 生态：Google Stitch + awesome-design-md + open-design

Google Stitch —— DESIGN.md 概念的提出者，提供官方规范和配套的 lint/diff 验证工具，能检查 AI 生成的 UI 是否符合规范。

awesome-design-md（VoltAgent）—— 73 个品牌的 DESIGN.md 模板库。想抄 Linear 的风格？想模仿 Stripe 的设计？直接复制对应文件就行。

open-design（nexu-io）—— 更激进，直接做了个桌面应用。内置 259+ 技能、142+ 设计系统，支持 Claude Code、Codex、Cursor 等 17+ CLI 工具。

实际怎么用？

最简单的用法：

  1. 去 awesome-design-md 找一个喜欢的品牌风格
  2. 复制它的 DESIGN.md 到项目根目录
  3. 在 Claude Code 里跑前端任务，AI 自动遵循设计规范

进阶玩法是写自己的 DESIGN.md。YAML 部分定义色值、字号、间距，Markdown 部分写清楚设计哲学和禁忌。

为什么这件事重要？

以前 AI 生成的 UI 之所以”不够好”，不是因为模型不够聪明，而是因为设计意图的传递有损耗。你用自然语言描述”我想要一个简洁优雅的界面”，AI 脑中的”简洁优雅”和你的可能差了十万八千里。

DESIGN.md 把模糊的审美偏好变成了可执行的技术规范。AI 不需要理解什么是”优雅”，它只需要知道：主色 #cc785c，圆角 8px，字体 Copernicus 64px，间距用 4 的倍数。

参考链接

  1. Google Stitch DESIGN.md 官方文档
    https://stitch.withgoogle.com/docs/design-md/overview/

  2. awesome-design-md（73 个品牌 DESIGN.md 模板）
    https://github.com/VoltAgent/awesome-design-md

  3. open-design（桌面应用）
    https://github.com/nexu-io/open-design