> 📌 **项目地址**：[VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md) | ⭐ 99,391 颗星 | 📜 未标注
用AI工具（Cursor、Copilot、Windsurf）生成UI，功能通常没问题，问题是风格不一致。你给AI写了详细的色值、间距规则、字体要求，它生成了界面，颜色用的是色号，间距是随意调的，跟你的设计规范对不上。
原因不在AI能力，在输入格式。你给AI的JSON design tokens，它得先解析。你把色号写到prompt里，AI在几千字的上下文里翻找，容易遗漏或遗忘。LLM最习惯读的格式是Markdown——它在海量的README、技术文档、GitHub Wiki上训练出来的。
Google Stitch提出了DESIGN.md的概念，直接解决了这个问题。
## DESIGN.md做了什么
一个纯文本的Markdown文件，放在项目根目录。AI代码代理读了它，就知道UI的长相和风格。没有Figam导出，没有JSON schema，不需要安装任何工具。
项目的README给了类比：
| 文件 | 谁读 | 定义什么 |
|——|——|———-|
| AGENTS.md | 编码代理 | 如何构建项目 |
| DESIGN.md | 设计代理 | 项目的外观和感觉 |
关键区别：AGENTS.md告诉AI怎么搭建代码结构，DESIGN.md告诉AI界面应该长什么样。两者配合，从功能到视觉一步到位。
Google Stitch是DESIGN.md概念的发起者，我理解它的逻辑是：LLM对Markdown的理解是原生级别的，不需要额外的解析器或转换器。你写 `#primary: #FF6B35`，AI直接认作主色定义。你写 `## Typography { font-family: ‘Inter’, sans-serif }`，AI直接用到生成的组件上。
## awesome-design-md是什么
项目地址：https://github.com/VoltAgent/awesome-design-md ，截至发文99391个star，GitHub全球排名第150。
项目本身是一个精心整理的DESIGN.md文件集合，关键点：所有文件都是从真实网站的设计语言中提取的。不是AI臆造的风格，是Claude、ElevenLabs、Mistral AI等网站真实使用的设计规则。
项目描述说得很直白：把DESIGN.md复制到项目根目录，告诉你的AI代理“build me a page that looks like this”，就能生成视觉高度一致的UI。
目前收集的品牌集中在AI与LLM领域：
– **Claude**：暖陶土色强调色，清洁编辑型布局
– **Cohere**：企业AI平台风格，渐变色，数据仪表盘美学
– **ElevenLabs**：暗色电影风格UI，音频波形视觉元素
– **Minimax**：暗色界面，霓虹强调色
– **Mistral AI**：法式极简，紫色调为主
– **Ollama**：终端优先, 单色极简
– **OpenCode AI**：深色开发者主题
– **Replicate**：纯白界面，代码优先
– **Runway**：电影节日氛围，暗色主视觉，纸质阅读区域，专属字体
每个品牌都有独立的DESIGN.md页面，可以在线查看或直接下载文件。
你也可以提交请求，让项目生成某个网站的DESIGN.md，包括私有请求（专门给你一个人）。链接在getdesign.md/request。
## 怎么用
三步：
1. 从合集里挑选品牌风格。你喜欢Claude的温暖调，点Claude链接下载DESIGN.md
2. 把DESIGN.md放到项目根目录
3. 对你的AI编码工具说：“build me a page that looks like this”
就这些。README原文明确说的就是这个流程：“Copy a DESIGN.md into your project, tell your AI agent ‘build me a page that looks like this,’ and generate high-quality UI that stays visually consistent with the design language.”
没有其他命令，没有JSON schema，没有插件安装。
我实际试了下。在Cursor里，把Mistral AI的DESIGN.md放到项目根目录，然后在对话中输入“build me a landing page that looks like this”，它确实读取了文件，生成了基于紫色调的布局。当然，不同AI工具对“looks like this”的解析有差异。Claude Code似乎对文件路径更敏感，Windsurf需要明确告诉它“参考根目录的DESIGN.md”。建议你在第一次使用时，手动告诉AI：“Read DESIGN.md from project root for UI design rules.”
## 实际判断：值得用吗
用Markdown写设计语言，比JSON tokens或Figma变量更直接，这一点我认同。LLM对Markdown的理解天生比结构化格式强。举个例子，你给AI JSON格式的design token：
“`json
{
“colors”: {
“primary”: “#FF6B35”
}
}
“`
AI有时间把它当成字符串处理。但如果写成Markdown：
“`markdown
#primary: #FF6B35
“`
AI直接理解为主色定义。这就是格式差异。
但有几个现实问题你得知道：
**这些DESIGN.md不是官方文件。** 它们是第三方分析提取的，不是品牌方发布的。对于苹果、Adobe这种严格管控品牌视觉的公司，准确性需要你自己核对。目前合集只覆盖AI网站，其他领域几乎没有。
**你的AI工具不一定原生支持。** Google Stitch明确支持DESIGN.md。Cursor、Copilot、Windsurf等工具需要你测试。我建议在系统prompt或配置文件中加一句：“Always read DESIGN.md from project root for UI design rules.”
**性价比很高。** 复制一个文件，改一句提示词，就能切换整套UI风格。对快速原型和多项目维护来说，这是目前最省事的方案。如果你需要SaaS后台、电商页面等风格，要么等合集扩充，要么自己写一份——格式就是Markdown，写起来不难。
项目在GitHub上排名第150，近10万star，说明大量开发者认可这个思路。我觉得核心价值在于：让AI理解设计意图，不需要复杂的系统和协议，回到它最熟悉、最擅长的文本格式就够了。