因为训练的偏好，AI 写网页的时候喜欢偷懒，它生成的网页上来就是 Tailwind 默认颜色、Inter 字体。

但是，五年前Tailwind创始人将TailwindUI中的每个按钮都设为 bg-indigo-500，这导致地球上每个AI生成的UI也都是靛蓝色的。

这种配色一看就是 AI 写的模板味。

地址：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

谷歌的 design.md 是定义 DESIGN.md 文件的标准格式：YAML front matter 放机器可读的设计 token，Markdown 正文放人可读的设计理念。

可以理解为 Google 立规矩，VoltAgent 顺着规矩填内容。谷歌的这个告诉你文件该怎么写，VoltAgent 的那个是把各大网站的扒了下来。

02

核心设计

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 按钮的页面。

每个值都有出处，每段意图都有解释。

03

配套 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 里让它完整理解格式

不用装包，不用配置文件，开箱即用。

04

最爽的玩法是配合 Stitch

05

怎么用起来

三步就行了：

# 第一步：在项目根目录建个 DESIGN.md 文件
touchDESIGN.md
# 第二步：把上面的 Heritage 示例复制进去改改
# 第三步：跑 lint 校验
npx @google/design.md lint DESIGN.md

如果你的项目已经用了 Tailwind，可以一行命令导出主题配置：

npx@google/design.mdexport--format tailwindDESIGN.md> tailwind.theme.json

配合 Claude Code 的 frontend-design skill 食用更佳。

在 CLAUDE.md 里加一行让它去读项目根目录的 DESIGN.md，它就会把里面的 token 当作生成 UI 的依据。

06

写在最后

用 AI Agent 绕不开一个核心问题：怎么把自己脑子里那个好设计的标准，稳定地传给 AI。

代码层面，AGENTS.md 和 CLAUDE.md 已经给了答案。

设计层面，DESIGN.md 现在补上了这块。当 AI 写代码成为常态，怎么告诉 AI 什么是好设计会变成新的硬技能。

门槛低到一份 Markdown 文件，但效果立竿见影。

开源地址：https://github.com/google-labs-code/design.md

07

点击下方卡片，关注逛逛 GitHub

这个公众号历史发布过很多有趣的开源项目，如果你懒得翻文章一个个找，你直接关注微信公众号：逛逛 GitHub ，后台对话聊天就行了：