夜雨聆风前天晚上我用 Claude Code 给自己的一个 Side Project 搭前端，花了大概两个小时，代码逻辑全写通了，功能也没问题，然后打开浏览器一看，我整个人就愣住了。
那个页面，怎么说呢，就像是一个从来没见过互联网的人，用 Word 2003 排出来的东西。标题巨大，正文极小，按钮歪歪扭扭挤在左上角，背景是刺眼的纯白，配色像是随机数生成器搞出来的。我跟你说，功能满分，视觉零分。
然后我就改，跟 Claude Code 说，把这个页面搞得好看一点，配色协调一点，布局舒服一点。它很听话，噼里啪啦改了一堆，我再一看，确实好看了那么一丢丢，但也就是从「Word 2003」进化到了「Word 2007」。感觉就像你跟一个外国人描述中国菜，说要多放酱油，加点盐，有点甜，再来点辣，对方听完做了一盘酱油拌糖。
问题出在哪呢，那天晚上我躺在床上想了一会儿，突然就明白了。AI 根本不知道你想要什么「风格」。你跟它说好看，它对好看的定义和你对好看的定义，差了十万八千里。你觉得好看是 Apple 官网那种克制的高级感，它觉得好看是淘宝店铺那种花花绿绿的信息密度。你们之间缺少一个东西，一个能让 AI 精确理解你视觉偏好的东西。你每次让它改，它就从自己训练数据里随机抽一个「好看」的定义给你套上，你再说不对，它又换一个，永远在猜，永远猜不准。
然后我第二天醒来刷 GitHub Trending 的时候，看到了一个仓库，叫 awesome-design-md，当时的反应就是，这不就是昨晚我缺的那个东西吗。
这个东西叫 DESIGN.md，我先给一个最直观的解释。你项目里应该有 AGENTS.md 吧，那个文件告诉 AI 怎么写代码，用什么框架，遵循什么规范。DESIGN.md 干的是另一件事，它告诉 AI 你的东西应该长什么样。一个管行为，一个管长相。AGENTS.md 是工程师手册，DESIGN.md 是视觉身份证。这个类比我觉得特别精准，就像人出门需要身份证让别人知道你是谁一样，AI 干活也需要一份视觉身份证，让它知道你要的界面到底该长什么样。
这个概念最早是 Google 搞出来的。Google 有一个实验室做了个产品叫 Stitch，专门用 AI 生成界面设计。在 2026 年 3 月的一次更新里，他们把 DESIGN.md 作为核心功能推了出来，然后直接把格式规范开源了，放在 github.com/google-labs-code/design.md 下面，现在 8500 多 Star。你敢信，一个文件格式规范，8500 Star。说明打中了一个真实的痛点。
做法特别简单，就是一个 Markdown 文件，放在项目根目录。里面分两层，上面是 YAML 格式的设计 token，定义颜色、字体、间距、圆角这些精确值，下面是 Markdown 正文，用自然语言解释为什么用这些值，什么场景用什么颜色，按钮长什么样，哪些事绝对不能干。AI 读到这个文件，就知道你要的不是随便的「好看」，而是「Apple 风格的克制高级感」或者「Stripe 那种优雅紫色渐变」。
我看到这个设计的时候，第一反应是比较骚的。
你知道为什么吗，因为 Markdown 这个格式选得太聪明了。过去我们做设计系统，要么用 Figma 导出一堆 JSON，要么用 design token 的各种工具链，搞什么编译构建，一套下来光搭环境就得半天。但 Markdown 是大语言模型读得最好的格式，没有之一。它们的训练语料里全是 Markdown，读这个就像我们读中文一样自然，不需要任何解析器，不需要任何配置。你就把文件往那一扔，Claude Code、Cursor、Windsurf、GitHub Copilot，任何能读项目文件的 AI agent 都能直接用。
我自己的感受是，这个设计决策背后藏着一个很深的洞察。给 AI 传设计意图，最好的方式不是给它一堆结构化的 JSON schema，而是给它一段它能自然理解的文本。机器可读的 token 告诉它精确值，人可读的 prose 告诉它语义和规则。两个东西放在同一个文件里，不需要构建管线，不需要导出步骤，简单到令人发指。官方的说法是，tokens 给 agent 精确值，prose 告诉它为什么这些值存在以及怎么使用它们。这个 two-in-one 的设计，说实话，比很多大公司的产品思路都清晰。
说到具体的玩法，那可就太有意思了。
awesome-design-md 这个仓库，做的事情就是把你从零开始写 DESIGN.md 这件事给省了。它直接收集了 71 个现成的设计文件，每一个都是从真实网站的设计系统里提取出来的。你可以理解成，有人帮你把 Apple、Stripe、Notion、Vercel、Nike、Spotify、Tesla 这些公司的视觉风格，翻译成了一份 AI 能读懂的 Markdown 文件。
先说 AI 和开发者工具那一批。Claude 的，暖色调陶土色作为强调色，干干净净的编辑式布局。Cursor 的，深色界面配上渐变色点缀，很有未来感。Vercel 的，黑白精准到像素，用的是自家出的 Geist 字体，整个就是前端工程师的审美天花板。Warp 的设计我特别喜欢，它把终端做成了类似 IDE 的样子，命令分块显示，深色主题做得非常克制。Raycast 的也很有味道，深色 Chrome 风格配上鲜艳的渐变，一看就是 Mac 用户会喜欢的东西。
再看看设计师用的那些工具。Figma 的不用说了，多色彩活泼又专业，毕竟是做设计工具的，自己的视觉系统当然得拿捏住。Framer 的很独特，大胆的黑蓝配色，强调动效优先，你一看就知道这家公司是搞交互设计出身的。Webflow 的就比较经典了，蓝色调，打磨过的营销网站风格，没有太多惊喜但绝对不出错。
然后是支付和金融那批。Stripe 的在设计师圈子里几乎是教科书级别的存在，标志性的紫色渐变，字重用的是极细的 300，整个页面的优雅感就像剪裁得体的西装。Revolut 的走深色路线，卡片用渐变色，金融科技感拉满。Coinbase 完全是另一个方向，干净的蓝色调，强调信任感，看起来就像是给机构客户用的东西。
但最让我惊艳的，绝对是汽车品牌的那几个。
Bugatti 的，纯黑画布，极简到骨子里，排版用的巨型展示字体，整个感觉就像在他们的展厅里看车。你打开 preview.html 的时候，那种压迫感真的会让人倒吸一口气。Ferrari 的更绝，明暗对比极其强烈的黑白编辑风格，配上 Ferrari Red 作为唯一的强调色，极度克制又极度有力量感。你可以想象一下，满屏的黑白灰中间突然跳出一个鲜红色按钮，那个视觉冲击力，绝了。Lamborghini 的走的是另一个路线，真正的纯黑底色，金色点缀，用了自家的 LamboType 定制字体，整体感觉就像是超级跑车的内饰被搬到了网页上。Tesla 的最朴素但也最有哲理，大量全视口摄影图片，几乎零装饰，字体用的是 Universal Sans，理念就是两个字，「激进减法」。
你看这些品牌的设计语言，每一个都精确地传递了品牌的性格。Bugatti 是极致奢华的孤独感，Ferrari 是速度与激情的克制表达，Lamborghini 是张扬的意大利式浪漫，Tesla 是科技极简的纯粹主义。当这些设计语言被编码成 DESIGN.md 之后，AI 就不再是在猜你想要什么风格了，它是在精确地执行一个定义好的视觉系统。
这个体验太爽了。以前你跟 AI 说「我想要一个有高级感的页面」，它给你整出个四不像。现在你给它一份 Ferrari 的 DESIGN.md，它出来的东西带着那种黑白光影的质感和恰到好处的红色点缀，虽然不至于和专业设计师的作品完全一样，但那个调性，是准的。
坦率的讲，我觉得这东西解决的不仅仅是一个技术问题。
你想想看，过去一个人想做一个好看的产品页面，要么自己学设计，要么花钱请设计师。自己学的话，光搞明白色彩理论就得几个月，字体搭配又是另一个深坑，间距节奏更是一种需要长期训练的直觉。请设计师的话，一套设计系统做下来，几万到几十万不等。所以大部分独立开发者做出来的东西，要么就是功能强大但丑得要命，要么就是套个 Tailwind 默认模板看起来千篇一律。
DESIGN.md 等于把专业设计师几十年积累的审美判断，压缩成了一份几百行的文本文件。你不需要理解为什么 Public Sans 配 3rem 的 h1 看起来高级，你只需要知道 Apple 这么做了，然后把这个规则告诉 AI，它就照着做。你不需要懂色彩心理学，不需要知道为什么 #B8422E 这个叫「Boston Clay」的颜色比纯红色更适合做强调色，你只需要拿 Stripe 的 DESIGN.md 往那一放，AI 就知道该怎么选色了。
这对于非技术背景的创业者、小团队、独立开发者来说，怎么讲，我觉得价值是被低估了的。
顺带聊聊技术细节，这块其实也蛮讲究的。
Google 官方出的那个规范里，DESIGN.md 的结构是固定的。YAML front matter 里定义 token，支持四种类型。颜色用十六进制，比如 #1A1C1E 这种。尺寸用 px、rem、em 这些单位。字体用对象格式，包含 fontFamily、fontSize、fontWeight、lineHeight 一堆属性。还有一种叫 token reference 的东西特别巧妙，用花括号语法互相引用，比如按钮的背景色可以写成 {colors.tertiary}，这样你改了调色板的主色，所有引用它的地方自动跟着变。这个设计是借鉴了 W3C Design Token 的规范，不是拍脑袋想出来的。
下面 Markdown 正文部分，官方定义了 8 个 section，按固定顺序排列。第一个是 Overview，描述整体风格氛围，比如「建筑极简主义遇上新闻庄重感」这种描述。第二个是 Colors，定义颜色和语义角色，这个很重要，因为如果没有语义名称，AI 可能会把错误提示的颜色拿来当强调色用。然后依次是 Typography、Layout、Elevation & Depth、Shapes、Components，最后是 Do's and Don'ts。
其中最有意思的是最后这个 Do's and Don'ts，因为它利用了大语言模型的一个特性，AI 对否定指令的响应特别好。你告诉它「绝对不要用渐变背景」比告诉它「使用纯色背景」有效得多。这个发现我觉得挺有意思的，它说明我们跟 AI 沟通的方式，可能需要一套完全不同于人与人沟通的策略。
Google 还做了一个 CLI 工具，叫 @google/design.md，可以用 npm 直接装。最常用的命令是 lint，帮你检查 DESIGN.md 有没有问题。它会跑 8 条规则，比如 token 引用找不到会报 error，颜色对比度不达标会报 warning，section 顺序错了也会提醒你。还有个 diff 命令可以对比两个版本的设计文件，看哪些 token 变了，有没有回归。甚至还能 export 成 Tailwind 主题配置或者 W3C DTCG 格式，和现有的设计工具链打通。
说真的，这种工程细节上的打磨，是我被打动的地方。不是随便搞个格式规范就扔出来了，而是配套了完整的验证、对比、导出工具链。看得出来 Google 是认真想把这个做成行业标准的。
说到标准这个词，我自己一直在想一个问题。
设计这个行业，从手工时代走到数字时代，经历了好几次范式转移。最早设计师画草图，然后是 Photoshop 统治了整个行业，然后是 Sketch 把 UI 设计从位图带到了矢量时代，然后是 Figma 让协作设计变得前所未有的容易。每一次工具的变化都带来了设计民主化的一波浪潮。Design Token 的概念让设计系统可以规模化复用，但所有这些工具都有一个共同的局限，它们是为人类设计师设计的。人类看 Figma 文件能理解设计意图，AI 看不懂。人类读 style guide 能感受到品牌调性，AI 读不进去。
所以当 AI coding agent 开始大规模生成 UI 的时候，出现了一个巨大的断层。AI 能写代码，但不知道该写成什么样。它知道 flexbox 怎么用，知道 CSS Grid 怎么排，知道响应式断点该怎么设，但它不知道你的产品应该传递什么感觉，不知道你的按钮应该圆还是方，不知道你的留白应该多还是少。它能把所有零件都装上去，但装出来的东西没有灵魂。
DESIGN.md 填的就是这个断层。
我觉得更有意思的是它背后反映出来的一个大趋势。AGENTS.md 定义了 AI 的行为规范，DESIGN.md 定义了 AI 的审美规范，未来可能还会有更多类似的东西出现。我们正在一步步地，把原本只存在于人类大脑里的隐性知识，外化成 AI 可以直接消费的显性文档。
这个趋势其实很像人类文明早期发明文字的过程。在有文字之前，所有知识都靠口口相传，每个人对同一件事的理解都不一样。有了文字之后，知识可以被精确地记录、传播、复用。DESIGN.md 做的事情就是把设计知识「文字化」，让它不再只存在于设计师的大脑和 Figma 文件里，而是变成一种可以被任何 AI agent 读取和执行的格式。
我有时候觉得，这可能是 AI 时代最被低估的一个变化。大家都在关注 AI 能做什么，很少有人关注我们该怎样把自己的意图精确地传递给 AI。生成式 AI 的天花板，可能不是模型的能力，而是人类表达意图的能力。DESIGN.md 就是在提高这个表达能力的上限。
我自己这两天的使用感受是，有了 DESIGN.md 之后，Claude Code 生成的界面质量确实上了一个台阶。之前它做出来的东西像是随机生成的，现在至少能做到风格统一、配色协调、布局合理。离专业设计师的手工活当然还有差距，但已经从「没法看」进步到了「能用」，对于我这种不打算花几万块请设计师的独立开发者来说，够了。
最后给个实操路径。如果你想试试，三个步骤就够了。去 awesome-design-md 仓库里挑一个你喜欢的风格，把对应的 DESIGN.md 复制到你项目根目录，然后正常用 Claude Code 或者 Cursor 让它写前端，你会发现生成的界面跟之前完全是两个世界。如果你不放心文件格式对不对，跑一下 npx @google/design.md lint DESIGN.md 就行，它会帮你检查所有该检查的东西。
就是这么简单。一个 Markdown 文件，改变了 AI 理解你审美的方式。
反正我觉得 DESIGN.md 这个东西会越来越重要。现在还是 Alpha 阶段，格式规范还在变，工具链也不够成熟，但方向是对的。当越来越多的 AI agent 开始帮我们生成界面的时候，谁能更精确地把设计意图传递给 AI，谁就能做出更好的产品。
这不只是一个文件格式的问题，这是人机协作的边界在重新划定。
以上，既然看到这里了，如果觉得不错，随手点个赞、在看、转发三连吧，如果想第一时间收到推送，也可以给我个星标⭐～
谢谢你看我的文章，我们，下次再见。
/ 作者：夏尔AI/ 邮箱：435452239@qq.com
