现在位置: 首页 / 免费干货 / 正文

2万Star！Google开源Design.md，专治AI写网页审美差

AI写网页这事儿，有个挺烦人的毛病：审美太统一了。满屏都是Tailwind默认的靛蓝色，配上那个Inter字体，看着就让人头大。那种浓浓的“模板味”，真的没眼看。

你试着跟AI说“要高级点”、“炫酷点”。它根本听不懂。模糊的指令，最后只能换来平庸的结果。

直到Google Labs开源了这个叫 design.md 的东西。GitHub上短短时间就飙到了2万Star。说实话，这才是真正解决AI设计审美问题的利器。

01 它是啥？

打个比方，如果说CLAUDE.md是教AI怎么写代码，那DESIGN.md就是教AI怎么画界面。

这玩意儿最早是Google内部AI设计工具Stitch用的，现在开源了。核心就一件事：给AI一套标准化的设计语言规范。

别把它和Awesome Design.md搞混了。后者是扒下来的网站风格样本，前者是定义规范的格式标准。区别挺大的。

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

02 核心逻辑：机器读数据，人读意图

DESIGN.md文件分两层，设计得还挺聪明：

  • YAML Front Matter：给机器看的。颜色十六进制、字号、间距，全是精确值。这部分的条目比较长，因为要包含详细的色彩参数和排版设置。
  • Markdown正文：给人看的。解释为什么用这个色，为什么选这个圆角。

这样AI既能拿到数据执行，又能理解设计意图。下面这段是官方示例：


---
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字体、深色标题、暖米色背景的页面。每个值都有出处，每段意图都有解释。感觉这才是AI该有的样子。

03 配套CLI：四条命令搞定

不用装包，零配置。直接用npx跑：

npx @google/design.md lint DESIGN.md

它会输出JSON校验结果，AI Agent直接就能消费。四条命令各司其职：

  • lint：校验文件，自动跑8条规则（对比度、缺失token等）。
  • diff：对比版本差异，防止Token回归。
  • export：导出Tailwind配置或W3C DTCG标准Token。
  • spec：输出规范文档，塞进System Prompt。

04 最佳实践：配合Stitch和Claude Code

最爽的玩法是什么？设计师在Google Stitch里调好样式，自动生成DESIGN.md。

把这个文件扔进项目根目录，Claude Code读取它来生成前端。颜色、字体、间距，绝对不跑偏。这真的有用吗？试了就知道。

这就是Google想要的：设计师、开发者、AI Agent，三方共用一套标准语言。话说回来，这种协作方式确实效率高了不少。

05 怎么用起来？

很简单，三步走：

# 1. 创建文件
touch DESIGN.md
# 2. 粘贴示例内容并修改
# 3. 运行校验
npx @google/design.md lint DESIGN.md

如果你用Tailwind，还能一键导出配置：

npx @google/design.md export --format tailwind DESIGN.md > tailwind.theme.json

记得在CLAUDE.md里加一行，让Agent去读根目录的DESIGN.md。效果立竿见影。你看，就是这么简单。

06 写在最后

用AI写代码容易，写好设计难。DESIGN.md把门槛降到了最低——一份Markdown文件。老实讲，之前总担心AI做出来的东西没灵魂，现在这工具算是补上了这块短板。

当AI成为常态，如何定义“好设计”，将成为开发者的新硬技能。你觉得呢？

FAQ

DESIGN.md和CLAUDE.md有什么区别？

CLAUDE.md主要规范代码逻辑、框架和命名风格；DESIGN.md专门规范UI视觉、色彩系统和组件样式。一个是管代码，一个是管颜值。

DESIGN.md支持哪些前端框架？

它通过CLI工具支持导出Tailwind CSS配置和W3C DTCG标准Token，兼容主流前端框架。这点挺友好的。

哪里可以找到现成的DESIGN.md模板？

除了Google官方仓库，还可以访问voltagent/awesome-design-md获取知名网站的逆向翻译样本。多参考参考总没错。