让AI生成一个登录页，你跟它说"给我做一个现代简洁的界面"。

AI做出来了，颜色对了，字体对了，间距也对了。但就是看起来很平、很散、没有"设计过"的感觉。

其实，问题不在AI不够聪明，而在于我们给AI的信息太模糊了。"现代简洁"这四个字，对人类设计师来说是够的，因为人类设计师有自己的审美积累，知道这个词背后意味着什么。但AI不知道。AI只知道你说了什么，不知道你为什么这么说。

Google开源的一个项目叫DESIGN.md，就是想解决这个问题。

DESIGN.md是一个用Markdown文件来描述设计系统的格式规范。但它跟你见过的设计文档不太一样。大多数设计文档的思路是：把设计决策的结果写下来，颜色是什么、字体是多大、间距是多少。这些是"是什么"。DESIGN.md的思路是：不仅要写"是什么"，更要写"为什么"。

一份DESIGN.md文件由两部分组成。第一部分是YAML格式的机器可读令牌，就是把颜色、字体、间距这些设计参数用键值对写清楚，给AI提供精确值。但第二部分才是DESIGN.md真正想强调的：Markdown正文，用人类的语言写清楚这套设计想要传达什么、为什么要选这些值。

比如你不能只写"主色是深色，辅助色是灰色，强调色是红色"。你要写：

这套设计的灵感来自老牌大学的研究生讲座讲义。单色墨水，充足的留白，衬线字体，没有装饰。讲义的作用是传递内容，不是讨好眼球。

你看到"老牌大学的研究生讲座讲义"这个描述，脑子里是不是立刻就有画面了？

这就是DESIGN.md的核心哲学。原文是这样说的："The quality of a generated design is determined less by the precision of its values than by how clearly the intent is described."翻译过来就是：设计质量不取决于值的精确度，而取决于意图描述的清晰度。AI理解了"老牌大学讲座讲义"这个意象，它就知道不能用渐变、不能用太多装饰、字体要庄重。描述足够具体，约束就自动蕴含在里面了。

DESIGN.md的文档里还特别强调了一句话："A specific reference carries more than a list of adjectives"。就是说，"现代、简洁，专业"这种词扔给AI，AI做出来的东西大概率是平庸的，因为这些词太模糊了。但"老牌大学的研究生讲座讲义"这个描述是具体的，AI能懂。

说完核心思路，再来说说它配套的工具。

DESIGN.md有一个命令行工具，用npm安装的话是这样：

npm install @google/design.md

不过更方便的方式是不需要安装，直接用npx运行，工具会自动从npm下载：

npx @google/design.md lint DESIGN.md

这个工具主要有三个功能。

先说lint检查。它会检查你的设计文档有没有结构性问题。比如你引用了某个不存在的令牌、颜色对比度不够WCAG标准、有些令牌定义了但从来没被用到。它会返回一份JSON报告，告诉你哪里有问题、严重程度是什么。一共9条检查规则。broken-ref检查无效引用、contrast-ratio检查对比度、orphaned-tokens检查孤立令牌等等。

第二个是diff对比。当设计系统更新了一版，想看看跟之前有什么变化：

npx @google/design.md diff DESIGN.md DESIGN-v2.md

它会告诉你颜色、字体、间距这些令牌改了什么、新增了什么、删除了什么。如果检测到有回归，即新版本的错误或警告比旧版本多，会返回错误码。

第三个是导出。可以把DESIGN.md里的令牌导出成其他格式：

npx @google/design.md export --format json-tailwind DESIGN.md > tailwind.theme.jsonnpx @google/design.md export --format css-tailwind DESIGN.md > theme.cssnpx @google/design.md export --format dtcg DESIGN.md > tokens.json

支持导出成Tailwind v3的配置（json-tailwind格式）、Tailwind v4的CSS代码块（css-tailwind格式），还有W3C的标准Design Tokens格式（dtcg格式）。

接下来说说怎么用。

第一步，在你项目目录下可以用npm安装这个工具：

npm install @google/design.md

如果用的是Windows系统，并且终端特殊处理@字符，需要用引号把包名包起来：

npm install "@google/design.md"

另外也可以不安装，直接用npx运行，工具会自动从npm下载。Windows用户要注意，由于design.md的.md后缀会跟Windows的Markdown文件关联冲突，直接运行可能没有输出，或者会直接用Markdown编辑器打开文件。这时需要用designmd这个别名：

npx -p @google/design.md designmd lint DESIGN.md

如果安装时遇到ENOVERSIONS错误，可以用这个命令检查npm的registry设置：

npm config get registry

正常应该显示https://registry.npmjs.org/。

第二步，在项目根目录创建一个DESIGN.md文件。文件开头是YAML格式的令牌定义，用三根横线隔开：

---name:MyProjectcolors:primary:"#1A1C1E"secondary:"#6C7278"tertiary:"#B8422E"neutral:"#F7F5F2"typography:h1:    fontFamily:PublicSans    fontSize:3rem    fontWeight:600    lineHeight:1.1    letterSpacing:-0.02embody-md:    fontFamily:PublicSans    fontSize:1rem    fontWeight:400rounded:sm:4pxmd:8pxspacing:sm:8pxmd:16px---

三根横线下面，用Markdown正文写设计思路。先写一个Overview，描述这套设计的整体感觉：

## OverviewArchitectural Minimalism meets Journalistic Gravitas. The UI evokes a premium matte finish — a high-end broadsheet or contemporary gallery.

然后按顺序写Colors、Typography、Layout等章节。章节顺序是固定的，从Overview到Do's and Don'ts，可以省略某些章节但不能打乱顺序。

第三步，写完之后，用lint命令检查文档有没有问题：

npx -p @google/design.md designmd lint DESIGN.md

如果一切正常，会返回一个JSON报告，告诉你发现了多少错误、多少警告、多少提示信息。如果有错误，根据报告修改文档。

第四步，需要用到代码的时候，导出成你需要的格式：

# 导出成Tailwind v3配置npx -p @google/design.md designmd export --format json-tailwind DESIGN.md > tailwind.theme.json# 导出成Tailwind v4的CSS代码块npx -p @google/design.md designmd export --format css-tailwind DESIGN.md > theme.css# 导出成W3C标准格式npx -p @google/design.md designmd export --format dtcg DESIGN.md > tokens.json

第五步，以后设计系统有更新，用diff命令对比新旧版本的差别：

npx -p @google/design.md designmd diff DESIGN.md DESIGN-v2.md

这样可以清楚地看到改了哪些令牌，防止遗漏。

最后说两句。

DESIGN.md现在还是alpha阶段，这个格式规范本身可能还会有变化。但它背后的思路我觉得是值得思考的：AI时代，沟通的方式变得更重要了。你怎么描述你的需求，你怎么给AI足够的上下文，这可能比任何具体的工具技巧都关键。

DESIGN.md的本质是一套"跟AI沟通设计"的语言。它告诉设计师：别只给AI一堆颜色代码，那AI只会复制粘贴，不会理解你的意图。你要告诉AI"为什么"，AI才能真正学会"怎么做"。

项目地址是 github.com/google-labs-code/design.md，文档写得很详细，还有几个完整的设计系统示例可以参考。有需要的朋友可以仔细研究一下。