如今Google正式出手：他们推出了一份DESIGN.md规范，核心目标就是让AI在设计UI时不再“凭感觉敷衍”，而是能严格遵循一个严肃的设计系统清单来执行。项目地址在这里：https://github.com/google-labs-code/design.md。
或许有人会问：这和之前爆火的Awesome Design.md有何区别？
此前我们推荐过一个开源项目叫Awesome Design.md，它将Claude、Notion、Apple等知名网站的视觉风格逆向编译为DESIGN.md文件，目前已积累70多个真实品牌样本，可以直接拿来使用。地址：https://github.com/voltagent/awesome-design-md。
而Google这次做的事情是定义标准格式——YAML front matter存放机器可读的设计token，Markdown正文存放人可读的设计理念。简单来说：Google制定规则，VoltAgent遵循规则填写内容。前者告诉你文件应该怎么写，后者帮你把各大网站的设计方案提取出来。
核心设计
DESIGN.md文件分为两层结构：
第一层是YAML front matter，用于存放机器可读的设计token——包括颜色十六进制值、字号、间距、圆角等精确数值。
第二层是Markdown正文，用于存放人可读的设计理念：为什么选择这个主色、为什么按钮要设计成圆角。
这是它最巧妙的地方：AI既能拿到精确数值以便执行，又能理解设计意图以便判断。下面这段官方的Heritage示例很能说明问题：
---
name: Heritage
colors:
primary: "#1A1C1E"
secondary: "#6C7278"
tertiary: "#B8422E"
neutral: "#F7F5F2"
typography:
h1:
fontFamily: Public Sans
fontSize: 3rem
rounded:
sm: 4px
md: 8px
spacing:
sm: 8px
md: 16px
---
## 概览
建筑极简主义遇上报刊庄重感。UI呈现高级哑光质感——像高端大报或当代画廊。
## 配色
色彩系统建立在高对比中性色加单一强调色之上。
- **主色(#1A1C1E)**: 深墨色，用于标题和正文核心文字。
- **次色(#6C7278)**: 沉稳石板灰，用于边框、说明文字、元数据。
- **强调色(#B8422E)**: "波士顿黏土"——唯一的交互驱动色。
- **中性色(#F7F5F2)**: 暖石灰底色，比纯白更柔和。
AI读取这份文件后，输出的页面就会是Public Sans字体、深色标题、温暖米色背景、Boston Clay红色CTA按钮。每个数值都有出处，每段意图都有解释。这才是真正的设计规范。
配套CLI：四条命令足以应对
CLI工具名为@google/design.md，零配置，可直接通过npx运行：
npx @google/design.md lint DESIGN.md校验结果输出JSON格式，AI agent可直接使用：
```json
{
"findings": [
{
"severity": "warning",
"path": "components.button-primary",
"message": "textColor (#ffffff) on backgroundColor (#1A1C1E) has contrast ratio 15.42:1 — passes WCAG AA."
}
],
"summary": {
"errors": 0,
"warnings": 1,
"info": 1
}
}
```四条命令各司其职：
lint：校验文件，自动运行8条规则，例如broken引用、缺失主色、WCAG对比度、孤立token、章节顺序等diff：对比两个版本的DESIGN.md，发现token级别的回归export：导出Tailwind主题配置 / W3C DTCG标准token，与主流设计工具无缝衔接spec：输出规范文档，可以放入AI的system prompt中让它完整理解格式
无需安装包，无需配置文件，开箱即用。
最爽的玩法是配合Stitch
如何快速上手
三步即可完成：
# 第一步：在项目根目录创建DESIGN.md文件
touch DESIGN.md
# 第二步：将上面的Heritage示例复制进去并修改
# 第三步：运行lint校验
npx @google/design.md lint DESIGN.md如果你的项目已经使用了Tailwind，一键导出主题配置：
npx @google/design.md export --format tailwind DESIGN.md > tailwind.theme.json配合Claude Code的frontend-design skill使用效果更佳。在CLAUDE.md中添加一行让它读取项目根目录的DESIGN.md，它就会把其中的token作为生成UI的依据。
写在最后
使用AI Agent无法回避一个核心问题：如何将自己脑海中的好设计标准，稳定地传递给AI。代码层面，AGENTS.md和CLAUDE.md已经给出了答案；设计层面，DESIGN.md现在填补了这一空白。当AI写代码成为常态时，如何告诉AI什么是好设计，将变成一项新的硬技能。门槛低到只需一份Markdown文件，但效果立竿见影。