Design.md 到底是什么?拆解硅谷大厂的Casestudy 带你搞清楚

不知道你们有没有这种感觉,AI 用来做设计,还是缺了点感觉
排版挑不出毛病,颜色也对得上,组件该圆的地方圆了,该方的也方了
可你就是知道——这不是 Vercel 的页面,也不是 Stripe 的页面
它像一个训练有素的模仿犯,形似,神不似,这偷一点,那里拿点
你是不是也有这种感觉
AI 写代码越来越猛,但 AI 做设计总差一口气
差在哪?差在“为什么” 颜色为什么是黑色?间距为什么是 8 的倍数?这个按钮为什么放右边?
这些答案不在代码里,在设计师的脑子里
直到我读到 Vercel 那篇博客,整个人有点懵 他们居然把整个设计语言的“为什么”,写成了一份公开的 markdown 文件
原文:
设计语言可以是一个文件
Vercel 的答案叫 design.md,一个任何 coding agent 都能加载的公开文件
且最好指定一个公开可以访问的位置:比如 Vercel 就把它放在了这里:
它不是设计规范 PDF,也不是 Figma 组件库
它就是一份纯文本,告诉 agent:什么是 Vercel 的排版、颜色、构图逻辑
我一开始觉得离谱——这么个文件能有多大用
然后我看到了他们的做法,是真的服气
每一条规则都是用评估循环跑出来的
Vercel 团队做了 7 个固定场景的 eval prompt,全部来自真实用例 续费提案、规划页、性能报告……每个场景配好假数据和一些其他细节
场景是固定的,只有 design.md 在变,输出有任何差异,都落在文件头上
全流程跑下来,200 多轮 每轮都有真人评审,还有模型评审员写批判
每一条写进 design.md 的规则,都必须在某个场景里证明过它是有用的
避免了拍脑袋写规范,因为这是拿实验数据一条条筛出来的
这个方法论,比文件本身更值钱
有数据,57% 的失败率下降
他们做了一组对照实验:同样的场景、同样的模型,有 design.md 和没有 design.md 已知视觉错误(比如表格不撑满可用宽度)的出现次数
有文件的 39 次,没文件的 91 次
降低 57% 的失败概率
他们还诚实地说:样本太小,不能说明整体质量 但能说明一件事——你教给 Design.md的错误,它不会再犯
Google 直接把规范开源了
就在 Vercel 折腾 design.md 的时候,Google 干了件更大的事
2026 年 4 月,Google Labs 把 Stitch 的 DESIGN.md 草案规范开源,Apache 2.0
一个 markdown 文件,上半部分是机器可读的语义 token,下半部分是人和 agent 都能读的设计理由
agent 不用再猜颜色是干嘛的,还能直接对照 WCAG 无障碍规则自检
GitHub 上 star 涨到一万四千多,PHILOSOPHY.md 里写得很清楚:
capturing the intent, rather than the full details 记录意图,而不是系统的全部细节
这是要做行业标准的姿态
design.md 之于设计,就像 README.md 之于开源软件
Atlassian 做了一次诚实的实测
最打动我的其实是 Atlassian 那篇,因为他们把翻车数据也摆出来了
他们在 Team ‘26 大会 keynote 上用 Figma Make 生成自定义 dashboard
同样的 prompt,有 DESIGN.md 的和没有的,效果差了一个次元
没文件的:通用 AI slop 有文件的:一眼 Atlassian 设计师水准
但换到生产环境,画风突变
做一个登录页,只用 DESIGN.md 作为设计上下文:
消耗 7.21M tokens,比 MCP server 多约 92%;
耗时 6 分 46 秒,更长;
token 方差高 2.7 倍,更不稳定;
对话 45.3 轮,更多
结论很克制:DESIGN.md 适合一次性原型、客户定制、跨平台场景 生产环境里,按需加载的 MCP 和 skills 更省更准
这一篇的价值在于——它告诉你这玩意儿不是银弹,用对场景才是,还是要和 MCP 结合使用
Anthropic 走了完全相反的路
Claude Design 的思路跟 design.md 是反着来的
Vercel 和 Google 是“把设计系统写成文件喂给 agent” Claude Design 是“让 Claude 读你的代码库和设计文件,自动提取出设计系统”
做登录页的时候,Claude 把你的颜色、字体、组件、间距全抽出来 之后每个项目自动沿用,官方原话:
Your brand, built in
6 月 17 日还更新了 /design-sync,把设计系统直接同步进 Claude Code 一周时间,超过一百万人用过
这让我想到一个判断:AI 时代设计系统的瓶颈,已经从“怎么画”变成“怎么被 AI 理解”
社区已经把 60+ 大厂的 design.md 反向工程出来了
最疯的是社区速度
VoltAgent 的 awesome-design-md,把 Stripe、Vercel、Linear、Notion、Apple、Airbnb 的视觉风格全部提取成 DESIGN.md GitHub 71k star,上线 4 天就 20k+ MIT 协议,drop 进项目根目录,告诉 agent“按这个来”,完事
Stripe 的紫色渐变、Linear 的极简、Tesla 的克制 这些背后是几十人团队打磨数年的成果
现在一个 markdown 文件就装下了
品牌花十年建起来的视觉护城河,宽度也许只是一个文件
审美曾经是一种能力,现在越来越像一个“可选项”
深度思考:设计系统正在被 AI 重写
把这几家放一起看,你会发现一个共同点 大家都在做同一件事——把设计判断从人脑里搬出来,变成 agent 能读的上下文
区别只是方式: Vercel 用评估循环筛规则 Google 用开源规范定标准 Atlassian 用实测划边界 Anthropic 用模型自动提取
对普通设计师团队来说,这意味着什么?
第一,你的品牌规范如果还是 PDF,AI 时代等于没有 agent 读不了 PDF,但能读 markdown,这是最朴素的差距,你的品牌规范还是给人看的话,就需要更新到 design.md了,也不麻烦
第二,别一上来就搞大而全 Vercel 的建议很实在:挑一个反复出现的产物(提案、报表、落地页),写下短 rubric,先跑一组有/无对照 一次对比就能暴露最大的问题,反复迭代,把不要的和需要的在 design.md里写清楚
第三,把修正写成规则,别手工调页面 “让证据表格用满可用宽度”是可检查的规则 “让表格别那么挤”是废话
第四,可复用的机制交给 CSS 和确定性检查,判断留在 prose 里 能自动化的别写进提示词,写进提示词的必须是判断
第五,保持设计师人工审核 不管自动化到什么程度,最后一步永远是人
Atlassian 的翻车案例就是最好的提醒
最后
现在我知道答案了——那页 AI 生成的界面缺的是那一句“为什么”
而“为什么”正在被人类一点一点写进 markdown 文件
design.md 不会是终点,但它可能是 AI 时代设计系统的第一个事实标准 对内容创作者、对产品团队、对每一个想让 AI 干活像自己的人
这可能是 2026 年最值得花两个小时做的事
如果你已经有了自己的品牌指导,知道要去向何处的话,可以试试
写一份自己的 design.md,哪怕只有一页,然后迭代个 5 次
然后让你的 agent 跑跑,对比一下有和没有的差别 你会回来感谢我的
既然看到这里了,点赞在看转发三连
让我们,继续思考
资料来源
我们的代理如何基于品牌优势构建页面内容,与 design.md 合作
vercel.com/blog/how-our-a…
















