55个顶级网站的设计系统,被塞进了一个.md文件
3月31日,一个叫 awesome-design-md 的 GitHub 项目上线。几天时间,4000多颗 Star。
它做的事很简单——把55个知名网站的 UI 设计系统,翻译成一个 Markdown 文件。
Apple 的、Spotify 的、Airbnb 的、Vercel 的、Stripe 的……全都被拆成了颜色、字体、间距、阴影,塞进 .md 文件里。
你丢一个到项目根目录,跟 AI 说”照这个风格来”,它就能生成一模一样的 UI。
听起来像个玩具?不是。这背后是 Google 刚刚推出的一个新标准,和一整个正在发生的技术趋势。
先说 DESIGN.md 是什么
3月18日,Google 发布了 Stitch 的大版本更新。
Stitch 是 Google Labs 做的 AI 设计工具——你用自然语言描述想要的界面,它给你生成高保真 UI。
这次更新里带了个新东西,叫 DESIGN.md。
官方说法:一个 agent-friendly 的 Markdown 文件,用来描述设计系统。
说人话:就是把设计师平时放在 Figma 里的那些东西——颜色值、字体层级、间距规范、组件样式——用纯文本写进一个 .md 文件。
MARKDOWN## Colors- Primary: #1A73E8- Background: #FFFFFF- Surface: #F8F9FA- Error: #EA4335## Typography- Font Family: Inter, sans-serif- Heading 1: 32px, 700 weight- Body: 16px, 400 weight## Spacing- Base unit: 8px
就这么简单。不用 JSON Schema,不用 Figma 导出。
Markdown 就是 Markdown,AI 读着最舒服。
为什么偏偏是 Markdown?
这是个好问题。
DESIGN.md 的格式不是随便选的。背后有一个很朴素的逻辑:Markdown 是 LLM 读起来最顺畅的格式。
不是 JSON,不是 YAML。就是 Markdown。
原因不复杂:
-
Markdown 的结构对 LLM 来说几乎不需要解析成本。标题就是 #,列表就是-,代码块就是反引号。 -
LLM 的训练数据里,Markdown 的比例极高。README、文档、博客、论坛帖子……大量高质量文本都是 Markdown 格式。 -
相比之下,JSON/YAML 有严格的语法要求,一个逗号错了就废了。Markdown 容错性高得多。
Fireship 在一期视频里(177万播放)直接说:DESIGN.md 是 Stitch 最好的新功能。
你可以把设计系统导出为一个 Markdown 文件,丢给 Claude、Codex、任何一个 AI 编码工具用。第一次,设计系统变成了可移植的。
注意这个关键词:可移植。
以前你的设计系统锁死在 Figma 里,AI 编码工具读不到。现在用一个 .md 文件,设计系统和编码工具之间就有了”通用语言”。
.md 文件大爆炸
DESIGN.md 不是第一个给 AI 用的 .md 文件。
如果你最近关注 AI 编码工具,你会发现一个趋势:各种 .md 配置文件像雨后春笋一样冒出来了。
|
|
|
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
看出规律了吗?
每个文件解决 AI 的一个”认知盲区”:
-
CLAUDE.md 解决”这个项目怎么构建” -
AGENTS.md 解决”这个仓库的规范是什么” -
DESIGN.md 解决”这个产品应该长什么样”
如果用一句人话总结:
CLAUDE.md 是给 AI 的”工程手册”,AGENTS.md 是给 AI 的”项目说明书”,DESIGN.md 是给 AI 的”设计规范”。
这事儿让我想起一个类比。
早年间,软件项目只有 README。后来有了 CONTRIBUTING.md、.gitignore、.editorconfig、package.json……每多一个配置文件,就说明工程师们在那件事上踩过足够的坑。
现在同样的事在 AI 领域重演。每个 .md 文件的诞生,都意味着我们发现了一个 AI “搞不定”的场景,需要用结构化的方式告诉它。
自动生成的陷阱
到这里,你可能想:那我让 AI 自动生成这些 .md 文件不就完了?
千万别。
ETH Zurich 和 DAIR.AI 在2026年2月发了一篇论文,专门研究 AGENTS.md 到底有没有用。结论很扎心:
- 人工写的
.md 文件,比没有上下文好 4% - AI 自动生成的
,反而比没有上下文 差 0.5% 到 2% -
每多一个自动生成的配置文件,AI 的推理 token 消耗增加 14-22%
说白了,AI 自动生成的配置文件,大部分内容是废话。它把你 README 里已经写了的东西换个方式再说一遍。
AI 读到这些重复信息,不但没帮上忙,反而被干扰了。
论文给了一个很实用的建议:“Write for the gap, not the overview.”
写那些仓库里其他地方没有的信息。不要写概览,写盲区。
这个结论放到 DESIGN.md 上一样成立。你要写的不是”我们的产品用蓝色”,而是”蓝色用在主按钮上,hover 时加深 10%,禁用时降低透明度到 40%”这种 AI 猜不到的细节。
设计师社区的炸锅
DESIGN.md 出来之后,设计师社区的反应很有意思。
Reddit 的 r/UXDesign 板块直接吵起来了。
一派觉得这是革命性的:
“第一次,设计系统可以从设计工具里搬出来,变成代码的一部分。”
另一派觉得这是在简化设计:
“一个 Markdown 文件怎么可能描述清楚交互状态、动画曲线、响应式断点?这不是设计系统,这是设计系统的尸体。”
还有一派更直接:
“Design.md 暴露出设计师对 AI 有多脱节。”
说实话,两边都有道理。
DESIGN.md 确实不是完整的设计系统。它只能描述”静态的视觉规则”——颜色、字体、间距。交互逻辑、信息架构、用户流程,这些它管不了。
但它的价值也不在于替代设计系统。它解决的是一个更窄、更实际的问题:让 AI 编码工具不再生成丑到爆的 UI。
如果你用过 Claude Code 或 Cursor 生成前端页面,你一定有这个体验——默认出来的东西,怎么说呢,功能上没问题,视觉上像 2015 年的 Bootstrap 模板。
DESIGN.md 就是给 AI 加了一层约束。约束之下的 AI,比没有约束的 AI 好得多。
UX Collective 上有篇文章,标题叫”Google 说 Vibe Design 来了,但没过我的 Vibe Check”。标题已经说明态度了。
Fast Company 的标题更狠:”Figma takes a hit as Google doubles down on vibe design”——Google 加码 vibe design,Figma 被冲击。
VoltAgent 和他们的开源野心
说回到那个 4000 Star 的项目。
VoltAgent 是一个做 AI Agent 工程平台的创业公司,主打 TypeScript 框架。awesome-design-md 是他们的社区项目之一。
项目的核心贡献者 Necati Ozmen 做了一件很聪明的事:他没有自己造格式,而是直接用了 Google Stitch 的 DESIGN.md 规范。
每个网站的设计系统包含三个文件:
DESIGN.md
——设计规范(AI 读的) preview.html
——亮色模式预览 preview-dark.html
——暗色模式预览
55个网站分成6大类:AI & 机器学习、开发者工具、基础设施、设计工具、金融科技、企业消费。
从 Claude 到 Stripe,从 Apple 到 SpaceX,每个都被拆成了9个维度的 Markdown 文档。
用法也很直白:
-
复制一个 DESIGN.md 到项目根目录 -
跟 AI agent 说”按照这个设计系统来做” -
AI 读取文件,按照规范生成 UI
但有个重要声明:这些 DESIGN.md 文件不是官方设计系统。它们是从公开的 CSS 里提取出来的近似值。
换句话说,它能让你做出”看起来像 Apple 的 UI”,但不会和 Apple 官网一模一样。对于绝大多数 AI 辅助开发的场景,这已经足够了。
怎么用好这波趋势
说了这么多,给几个实操建议。
独立开发者,直接用 awesome-design-md。挑一个你喜欢的设计系统(推荐 Linear、Vercel 或 Stripe 的),丢到项目里。你的 AI 编码工具产出的 UI 质量会有肉眼可见的提升。
团队技术负责人,认真对待 DESIGN.md。花时间写一份人工的、高质量的 DESIGN.md,比让 AI 自动生成强得多。
设计师,别急着焦虑。DESIGN.md 替代不了你对用户需求的理解、对信息架构的判断、对交互细节的把控。但它确实在改变一件事——设计系统的交付方式。以前你做好设计系统,前端工程师手动实现。以后 AI 直接读你的规范生成代码。你写的规范得更精确、更结构化。
如果你只是用 AI 工具写代码,注意一个更大的趋势。CLAUDE.md、AGENTS.md、DESIGN.md……这些文件正在形成一套分层的 AI 上下文体系。每个文件解决一个问题,合在一起就是 AI 对你项目的完整认知。
这不是终点。我赌后面还会有更多的 .md 文件出现。
因为每发现一个 AI “搞不定”的领域,就会有人写一个 .md 来填这个坑。
这就是 AI 时代的配置文件爆炸。和软件工程的历史一样,先是混乱,然后是约定,最后变成标准。
我们正处在”约定”这个阶段。挺有意思的。
夜雨聆风