资源推荐
getdesign-md
getdesign-md

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
生产力 SaaSNotion、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 扔进项目根目录,结果会不一样。