Appearance
DESIGN.md：用纯文本定义设计系统，AI Agent输出风格一致UI
和AGENTS.md是兄弟文件——一个说怎么搭，一个说怎么看。
AGENTS.md这玩意儿现在大家都熟了——告诉AI怎么构建项目。但你让AI给你写个落地页/仪表盘/后台，它的视觉总是和你的产品风格对不上——按钮颜色不对、字体不对、间距不对、动效不对。
Google Stitch推了一个新概念叫DESIGN.md。
| 文件 | 谁读 | 定义什么 |
|---|---|---|
| AGENTS.md | 编码Agent | 怎么构建项目 |
| DESIGN.md | 设计Agent | 项目长什么样、什么感觉 |
一个纯文本设计系统文档，AI Agent读完就能产出风格一致的UI——不用Figma导出、不用JSON schema、不用任何特殊工具。
73个主流网站已开源
VoltAgent团队搞了个awesome集合：
github.com/VoltAgent/awesome-design-md
把市面上73个主流网站的DESIGN.md都扒下来了，可直接copy到自己项目里用。
按README的话：
Copy a DESIGN.md into your project, tell your AI agent "build me a page that looks like this" and get pixel-perfect UI that actually matches.
已收集的网站风格
AI & LLM平台
| 网站 | 风格特征 |
|---|---|
| Claude | 温暖赤陶色调，干净编辑式版面 |
| Cohere | 企业AI平台，活泼渐变 |
| ElevenLabs | 暗色电影感UI，音频波形美学 |
| Mistral AI | 法国式极简，紫色调 |
| Ollama | 终端优先，单色简洁 |
| Runway | AI创意工具，电影节式美学 |
| Replicate | 白色画布，代码优先 |
73个网站覆盖AI、工具、编辑器、设计、SaaS等大类，需要哪种感觉直接挑。
DESIGN.md里写什么
按Google Stitch官方定义，大致包括：
- 品牌定位/个性形容词
- 配色（主色、辅色、语义色）
- 字体（家族、字号、字重、行高）
- 间距系统
- 圆角/阴影/边框
- 组件示范（按钮、卡片、表单、导航）
- 动效原则
- 整体气质描述
所有内容都用人话写在一个markdown文件里，没有任何嵌套JSON或token结构。
怎么用
简单玩法
- 在getdesign.md找一个你心仪的网站风格
- 把DESIGN.md下载到自己项目根目录
- 告诉Claude Code/Cursor/Codex："基于DESIGN.md，做一个XX页面"
进阶玩法
- 混搭：把两个站的DESIGN.md元素提炼后合并成自己的
- 团队统一：给团队所有AI工具配同一份DESIGN.md，保证多人多Agent出的页面是一套
- 配AGENTS.md用：一个说怎么搭，一个说怎么看
小结
让AI写代码靠AGENTS.md对齐工程约束，让AI写界面靠DESIGN.md对齐视觉约束——一前一后，让AI做的事更可预测。
对个人开发者来说，最大的解放是：不用每次都把Figma链接、品牌指南、配色细节嚼烂喂给AI——一份DESIGN.md全搞定。
关键词：DESIGN.md, AGENTS.md, AI设计, Claude Code, 设计系统
