"想让AI理解设计系统?得先从Figma导出token,转换成JSON,装插件,再做一轮交付……"——这是去年的画面。现在,一份Markdown就够了。2026年4月21日,Google正式将DESIGN.md规范开源。 这本是他们做Stitch时内部使用的格式,如今谁都可以把它放进自己的项目根目录,Claude、Cursor、Stitch这类AI智能体就能据此生成风格一致的UI。VoltAgent推出的awesome-design-md合集在4月发布后短短一个月就在GitHub上拿下68.7K星,Linear、Apple、Stripe、Claude、Notion、Vercel等70个品牌的DESIGN.md被完整公开。
这是什么?
DESIGN.md是把整个设计系统装进一份Markdown的文件。可以把它看作AGENTS.md(告诉智能体怎么写代码的文件)在设计层面的对应物。VoltAgent整理的对照很直观。
| 文件 | 读取方 | 定义内容 |
|---|---|---|
| AGENTS.md | 编码智能体(Cursor、Claude Code、Codex等) | 项目应该怎么构建 |
| DESIGN.md | 设计智能体(Stitch、Claude Design等) | 项目应该呈现成什么样 |
"Markdown是LLM最擅长读取的格式,无需解析、无需配置。直接放进项目根目录就完事。"——VoltAgent README。
Google其实在Stitch(自家vibe design工具)内部用了一年DESIGN.md。后来外部开发者开始做自己的版本,各家公司也陆续分享自己的Markdown。4月21日,Google正式把标准规范开源出来。 从那一刻起,"各自随便写的Markdown"就升格为"Google背书的标准"。
- 双层结构
上半部分是YAML token(hex色值、字体大小、间距等——给机器读)。下半部分是Markdown散文(为什么这样定——给人和智能体做判断)。把"是什么"和"为什么"分开。 - 9个标准章节
Visual Theme & Atmosphere、Color Palette、Typography Rules、Component Stylings、Layout Principles、Depth & Elevation、Do's/Don'ts、Responsive Behavior、Agent Prompt Guide。 - 两种预览
每份DESIGN.md都附带preview.html(亮色)和preview-dark.html(暗色)两个视觉目录,色彩、排版、按钮、卡片一目了然。
实际上awesome-design-md里的70个品牌阵容相当夸张。AI/LLM类有Claude、Cohere、ElevenLabs、Mistral、Ollama、Replicate、xAI。开发者工具有Cursor、Vercel、Warp、Raycast。后端类有PostHog、Supabase、Sentry、MongoDB。设计工具有Figma、Framer、Webflow。金融科技有Stripe、Coinbase、Revolut。连汽车品牌Ferrari、Lamborghini、Tesla都有。 与其含糊地说"做成Stripe那种风格",不如直接把stripe/DESIGN.md扔过去。
和Figma工作流有什么不同?
过去一年,把设计系统交给AI的方式变了好几轮。把现场感受到的差异列一下,大概是这样。
| 环节 | Figma + MCP/插件 | DESIGN.md |
|---|---|---|
| 安装 | Figma账号 + 插件/MCP服务 + 鉴权 | 把1个文件复制到项目根目录 |
| 传输成本 | 导出token、转换JSON,把上下文窗口吃光 | 几百行Markdown——上下文效率压倒性占优 |
| 工具绑定 | 锁死在Figma。其他智能体读不了 | 纯文本。Claude、Cursor、Stitch都能读 |
| 更新 | Figma改了→重新导出→重新部署 | 一行git diff,通过PR评审改动 |
| "为什么"的保留 | 只剩组件名和色值——意图丢失 | "用Golden Retriever orange传达欢快活力"这种散文得以保留 |
设计系统变成了"文件树里的文本",所以code review、PR、git blame、branch这些机制全都直接适用。
特别有意义的是"为什么"的保留。只导出token的话,hex code是过去了,但选这个色的理由——"乐观、可信赖、有活力的品牌调性"这种语境——就消失了。一旦出现新组件、例外情况、意料之外的布局约束,智能体就没了判断依据。DESIGN.md里那一半Markdown正是为了承载这些。 像"绝不要把元素堆得太密"这种指引没法token化,但对决策至关重要。
① 交互和动画目前还不在标准里(可以用散文写,但缺乏定式)。② 多语言字体系统(中日韩fallback)这种复杂规则用Markdown难以表达。③ 没法完全替代Figma中实际像素核对的工作流——DESIGN.md是"应该长什么样"的指南,像素级对齐还需要单独环节。④ 70个品牌的合集是"从公开CSS提取的",和原品牌不可能100%一致。 应该把它当灵感来源、起点来用。
另外,Stitch在4月还放出了MCP集成。AI编码智能体(比如Anti-Gravity)可以读取Stitch的设计,直接发起布局修改请求,或自动生成设计变体。这是双向反馈循环。 DESIGN.md把"格式标准化"做完了,MCP把"工具间双向通信"打通了——设计与代码之间的交付环节实际上正在消失。
上手指南
引入成本几乎为零。用30分钟就能起步,流程整理如下。
- 下载参考DESIGN.md
到getdesign.md 或github.com/voltagent/awesome-design-md上,挑一个和自家产品调性接近的品牌DESIGN.md下载。Linear(极简精准)、Stripe(紫色渐变优雅)、Notion(温暖极简)、Vercel(黑白精确)等是热门选项。 - 放进项目根目录
直接把DESIGN.md放在项目根目录(README.md旁边)。完事。不用额外索引、不用插件。 - 告诉智能体
说一句"按照DESIGN.md实现[功能]",Claude Code、Cursor、Stitch就会自动套用hex、字体和间距。在AGENTS.md里加一行说明会更稳。 - 定制成自家品牌
以参考DESIGN.md为底,改色彩、字体、调性。Stitch DESIGN.md format文档(stitch.withgoogle.com/docs)整理了标准的9个章节。 - 提交到git让团队共享
这一步才真正释放价值。设计系统可以通过PR评审、用branch做实验、用blame追溯。设计师和工程师开始用同一种语言对话。
再补一点——如果只把它当作Figma export的替代品看待,格局就小了。更大的图景是:当设计系统本身变成文本,AI智能体就能参与到设计决策中。Department of Product文章里引用Gokul(前Google、Meta产品负责人)那句"设计是AI的首批受害者"虽然引发争议,但其核心观点是:"一旦中央设计系统被整理成可被AI消化的形态,设计师的招聘补位就会减少。" 不论你是否认同,设计系统正在向Markdown定型这一趋势看起来很难停下来。
深入了解
VoltAgent — awesome-design-md(68.7K Stars) Linear、Apple、Stripe、Claude等70个品牌的DESIGN.md完整合集,附带preview.html和暗色版本 github.com
getdesign.md — 下载目录 awesome-design-md的网页版界面,可按分类浏览,也能申请特定网站的DESIGN.md getdesign.md
Google Stitch 官方 — Vibe Design工具 DESIGN.md规范的起点。自然语言生成UI、Figma导出、MCP集成实现编码智能体的双向反馈 stitch.withgoogle.com
Department of Product — DESIGN.md Explained 双层结构解构、"设计是AI首批受害者"争论梳理、AGENTS.md vs DESIGN.md对照 departmentofproduct.substack.com
