告别AI生成的靛蓝色模板：谷歌开源design.md，2万星标打造统一设计语言

因为训练的偏好，AI 在写网页时总会表现出一种「偷懒」的特质：它生成的界面一上来就是 Tailwind 默认配色、Inter 字体。但真正让这些页面长成一个模样的，是五年前 Tailwind 创始人把 TailwindUI 中每一个按钮都设成了 bg-indigo-500。这一决定就像写进了 AI 的肌肉记忆，使得如今地球上任何一个 AI 生成的 UI 几乎都披着一层靛蓝色的外壳。

一眼看过去，那就是一股浓重的 AI 模板味。

Image

如果你尝试让它换风格，它多半只是把紫色调成橙色，其他一切照旧。而我们很难给出精确、专业的设计指引，最多只能说「高级一些」「炫酷一些」。这种模糊、抽象的表达，让 AI 几乎不可能生成真正符合预期的视觉效果。

最近几个月，GitHub 上涌现了一批聚焦于设计开放的开源项目，目标只有一个：让 AI 生成的网页不再千篇一律，而是真正好看、有个性。改天做个合集，我们细细聊。

今天则要谈 Google Labs 推出的一个开源项目—— design.md。它就是针对这个问题，提供了一套完整的规范和工具。去 GitHub 上一看，Star 数已经逼近两万。

它到底是什么

DESIGN.md 是一份写给 AI Agent 看的设计系统规范文件。打一个更容易理解的比方：过去一年大家都在写 CLAUDE.md、AGENTS.md，那是在教 AI 怎么写代码——用什么框架、什么样的命名风格、测试规范怎样。而 DESIGN.md 是在教 AI 怎么写「长得对」的代码。

这套规范最早是 Google 自家 AI 设计工具 Stitch 内部使用的，设计师在 Stitch 里把视觉风格调好，AI 就能够稳定输出符合那种风格的 UI。2026 年 4 月，Google 将这套规范抽取出来，以 design.md 这个项目正式开源。

Image

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

那它和 Awesome Design.md 是什么关系呢？我之前推荐过一个叫做 Awesome Design.md 的开源仓库，它把 Claude、Notion、Apple 这些知名网站的视觉风格逆向翻译成了 DESIGN.md 文件，目前已经收录了 70 多个真实品牌的样本，可以直接拿过来用。

Image

开源地址：https://github.com/voltagent/awesome-design-md

简单来说，谷歌的 design.md 是定义 DESIGN.md 文件的标准格式：YAML front matter 用于承载机器可读的设计 token，Markdown 正文则用来描述给人看的设计理念。可以理解为 Google 在立规矩，VoltAgent 顺着规矩填内容——谷歌告诉你这份文件该怎么写，VoltAgent 那个仓库则把各大网站的样式扒下来整理好。

核心设计思路

DESIGN.md 文件清晰分作两层。

第一层是 YAML front matter，里面装着机器可读的设计 token：颜色的十六进制值、字号、间距、圆角等精确数据。

第二层是 Markdown 正文，记录给人（也给人喂给 AI）的设计理念：为什么主色是这个，为什么这个按钮要做成圆角，情感的基调是什么。

这是它最聪明的地方。AI 既拿到了可以精确执行的数值，又具备了理解设计意图的判断力。下面这段是官方给出的 Heritage 风格示例：

---name: Heritagecolors:  primary: "#1A1C1E"  secondary: "#6C7278"  tertiary: "#B8422E"  neutral: "#F7F5F2"typography:  h1:    fontFamily: Public Sans    fontSize: 3remrounded:  sm: 4px  md: 8pxspacing:  sm: 8px  md: 16px---  
## 概览建筑极简主义遇上报刊庄重感。UI 呈现高级哑光质感——像高端大报或当代画廊。  
## 配色色彩系统建立在高对比中性色加单一强调色之上。- **主色(#1A1C1E)**:深墨色,用于标题和正文核心文字。- **次色(#6C7278)**:沉稳石板灰,用于边框、说明文字、元数据。- **强调色(#B8422E)**:"波士顿黏土"——唯一的交互驱动色。- **中性色(#F7F5F2)**:暖石灰底色,比纯白更柔和。

AI 读过这份文件之后，就会生成一个使用 Public Sans 字体的深色标题、温暖米色背景，以及 Boston Clay 红色 CTA 按钮的页面。每一个值都有来历，每一段描述都在传达意图。

配套 CLI：四条命令就足够了

官方提供了一个叫 @google/design.md 的 CLI 工具，零配置，直接用 npx 就能跑：

npx @google/design.md lint DESIGN.md

校验结果会以 JSON 格式输出，AI agent 可以直接消费：

{
  "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

Image

设计师在 Stitch 里调好一套设计后，工具会自动从画布生成对应的 DESIGN.md 文件。把这份文件丢进项目仓库的根目录，Claude Code 一读，就能按照它来生成 UI，颜色、字体、间距都不会再跑偏。

这其实就是 Google 想为 AI 提供一套共享的设计语言，让设计师、开发者、AI agent 三者之间有了一套标准化的描述方式。

周边生态也在迅速成型。除了官方的 design.md 和 VoltAgent 的范例库，已经有 designkit.sh、getdesign.md 这样的第三方聚合站，专门收集和浏览 DESIGN.md 文件。

Image

Image

怎么用起来

三步就能上手：

# 第一步：在项目根目录建个 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 的时候，绕不开一个核心问题：怎么把自己脑子里那个好设计的标准，稳定地传给它。

代码层面，AGENTS.md 和 CLAUDE.md 已经给出了答案。设计层面，DESIGN.md 如今补上了这块拼图。当 AI 写代码变成常态，怎么告诉 AI 什么是好设计，会成为一项新的硬技能。

它的门槛低到仅仅是一份 Markdown 文件，但效果可以立竿见影。

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