AI 写的 UI 总是很廉价感?把这个文件扔进项目就够了
用 AI 写代码,最头疼的不是逻辑,是 UI。
你让 Claude 或 Cursor 写个界面,大概率出来一个说不上哪里不对、但就是很廉价感的页面。颜色拿捏不准,间距随意,字体大小凭感觉——总结一句话:AI 没品位。
但这不是 AI 的锅。你没告诉它该长什么样,它当然只能靠训练数据里的平均水平随便猜。
最近发现一个项目,专门解决这个问题 👇

它叫 getdesign.md
一句话:一个 DESIGN.md 文件合集,让 AI 能读懂设计系统。
项目叫 awesome-design-md,由 VoltAgent 团队维护,目前收录了 68 份来自知名品牌的 DESIGN.md 文件。
Vercel、Stripe、Figma、Notion、Linear、Airbnb、Spotify、Apple、Uber……
这些公司的设计水准不用多说。现在你可以把它们的设计风格直接"喂"给 AI 编程工具,让 AI 照着写 UI。

DESIGN.md 长什么样
不是什么复杂的东西。就是一个普通的 Markdown 文件,按标准结构描述了品牌的设计系统,一共 9 个部分:
视觉主题 → 色彩体系 → 字体规则 → 组件样式 → 布局原则 → 层级阴影 → 用法禁忌 → 响应式行为 → Agent Prompt 指南
最后一节是关键所在。
普通设计文档是给人看的,DESIGN.md 的最后一节是专门写给 AI 的使用说明——告诉它应该怎么应用这套设计系统,用什么语气,强调什么,避免什么。

三步用上它
第一步:去 getdesign.md 选一个你喜欢的设计风格
第二步:把对应的 DESIGN.md 文件复制到你的项目根目录
第三步:告诉 AI Agent 按照 DESIGN.md 的风格来写 UI
就这样。
想让页面有 Stripe 那种高级感,用 Stripe 的。想要 Linear 那种极简暗色风,用 Linear 的。用 Cursor、Claude Code、Copilot 都行——只要是能读到项目文件的 AI 工具。
为什么 Markdown 比 Figma 更适合 AI
很多团队试过把 Figma 导出的 JSON 或设计 Token 给 AI,效果都很一般。
原因很简单:AI 处理 Markdown 是最顺手的。那是它日常训练的主要格式,理解起来远比结构化 JSON 自然。
DESIGN.md 本质上是在填"设计上下文"这个空白——用 AI 最熟悉的格式,描述人类最难量化的东西(品位和美感),然后注入到编程工作流里。
顺带说一句,如果你用过 Claude Code 的 AGENTS.md 来约束 AI 的工程行为,DESIGN.md 的原理完全一样——一个管"怎么构建",一个管"长什么样",是天然的搭档。
68 个品牌,按行业覆盖
| 分类 | 代表品牌 |
|---|---|
| AI 与大模型平台 | OpenAI、Anthropic、Perplexity、Mistral |
| 开发者工具 | Vercel、GitHub、Linear、Supabase |
| 生产力 SaaS | Notion、Figma、Loom、Miro |
| 金融科技 | Stripe、Wise、Brex |
| 媒体消费 | Spotify、Netflix、YouTube |
| 科技大厂 | Apple、Google、Microsoft、Uber |
基本覆盖了当前设计水准最高的那批公司。

项目地址
网站:getdesign.md GitHub:github.com/voltagent/awesome-design-md
完全开源,也支持提交新的设计系统。
下次让 AI 写 UI 之前,先把 DESIGN.md 扔进项目根目录,结果会不一样。