夜雨聆风
如果你也经历过让 AI 写页面，功能全对但丑到崩溃的深夜，这篇文章就是为你写的。
最近一直在折腾 AI 写代码，有个事快把我整崩溃了。
功能写得贼溜，逻辑也跑得通，但每次页面一跑起来——那个丑啊，丑得我想把显示器砸了。
不是颜色不对，就是字体乱飘，间距时大时小。同一个项目里，登录页看着像苹果官网，仪表盘又像十年前的企业后台，到了移动端直接换了个人种。整个项目看下来，就像十个设计师互相没商量过，各干各的。
我试过各种提示词技巧。
“请用现代化设计风格。”
“参考一下目前主流 SaaS 产品的视觉语言。”
“能不能做得更有高级感一点？”
没用。AI 每次都在自由发挥，每次理解的"高级感"都不一样。你花两个小时调教出来的风格，下次加个新页面，它全忘了，重新给你发明一遍。
直到前两天，一个朋友给我发了条微信。
他说：“别骂 AI 了，你缺的不是提示词技巧，你缺的是这个。”
我点开一看，一个 GitHub 仓库，叫 Awesome DESIGN.md。
这东西到底是啥？
DESIGN.md，说人话就是：一份给 AI 看的设计说明书。
你们都知道 README.md 吧？告诉开发者"这个项目怎么跑、接口怎么调"。
DESIGN.md 干的是同样的事，只不过对象换成了 AI，内容是"这个项目颜色用哪个、字体用多大、按钮长啥样"。
就这么简单。
以前我跟 AI 说"做得像 Stripe 那种感觉"，它靠猜。今天猜对三分，明天猜错五分，后天直接摆烂。
现在我把一份 DESIGN.md 扔进项目根目录，AI 写代码之前先读一遍，所有 UI 都照着这个来。昨天和今天生成的页面，风格一模一样，再也不用担心跑偏了。
这个格式是 Google Stitch 团队联合 VoltAgent 社区一起推的，算是一个开放标准。本质上是在 Figma 设计稿和 AI 之间搭了一座桥——把设计师眼睛里的"好看"翻译成 AI 能执行的精确指令。
一份 DESIGN.md 里面到底写了啥？
我给你们拆一份真实的 DESIGN.md，看看有多细。
颜色系统
主色 #2563EB，背景 #F8FAFC，成功绿 #22C55E，错误红 #EF4444。精确到十六进制，一个色值都不含糊。不是写"蓝色系"，而是把具体用哪个蓝写得明明白白。
字体排版
字体家族用 Inter，标题从 24px 到 48px 分五档，正文 16px 行高 1.6，辅助文字 14px 行高 1.4。每行字多大、多高，写得清清楚楚。
间距系统
所有间距基于 4px 的倍数——4、8、12、16、24、32。不允许出现 13px、17px 这种逼死强迫症的数字。整个页面的呼吸感是一致的。
组件规范
按钮圆角 8px，高度 40px，主色填充，次色用描边。输入框边框 #E2E8F0，聚焦时变主色加光晕。卡片用三组预设阴影，分轻中重三档，每个场景用哪一档都写好了。
设计护栏
这一条最狠。直接告诉 AI 什么不能做——“不要用渐变背景”“不要用超过 12px 的圆角”“移动端不要用悬停效果”“暗色模式不要用纯黑”。相当于给 AI 画了个安全区，防止它自作聪明搞出奇怪的东西。以前我是在用嘴指挥 AI 画画，“往左一点”“再往左一点”“不对还是往右吧”。现在我把所有规则写在一张纸上，AI 每次先看纸再动手，画完自己核对一遍。我再也不用当那个人肉调参员了。
这个项目牛在哪？
你可能想问：我自己写一份 DESIGN.md 不行吗？为什么非要这个项目？
可以。但你写得有 Stripe 的设计师好吗？写得有 Linear 的设计师好吗？写得有 Apple 的设计师好吗？
写不了吧。
所以有人帮你把全世界最好的设计都整理好了。
这个 Awesome DESIGN.md 项目，把市面上六十多个主流品牌的设计规范全部扒了下来，整理成 DESIGN.md 格式，免费开源。
我给你们数数都有谁。
AI 这块有 Claude、Cursor、OpenAI、DeepSeek、Perplexity。
开发工具有 Vercel、Linear、GitHub、Railway。
设计工具有 Figma、Framer、Notion。
大厂有 Apple、Google、Microsoft。
SaaS 有 Stripe、Supabase。
消费品牌有 Spotify、Airbnb、Uber、Tesla。
六十多个，全是各自品类的视觉天花板。
你想走 Vercel 那种极简黑白工业风？有。
想走 Notion 那种干净温暖的文档风？有。
想走 Linear 那种冷峻锐利的技术风？有。
想走 Stripe 那种沉稳可靠的商业风？有。
每个风格都配了亮色暗色预览，你不用一个个点开文件看，直接浏览对比着挑就行。
这个项目是 VoltAgent 团队发起的，截至 2026 年 4 月，GitHub 上已经攒了 3.8 万颗星。增长快得离谱，说明被 AI 写 UI 折磨的人，比我想象的还多。
一个真实案例，看完你就懂了
我们来看一个直观的测试：
让 AI 写一个读书笔记 APP 的首页。不加 DESIGN.md——颜色乱飘，排版稀碎，卡片大小不一，按钮有的圆有的方，整个页面散发着一种大学生课设赶工的美感。
然后把 Claude 风格的那份 DESIGN.md 扔进项目，重新生成了一遍。同样的 APP，同样的 AI，字体变成了 Inter，背景变成了那种暖洋洋的纸张色，所有按钮圆角统一，卡片间距排得整整齐齐。
左边像毕设答辩前一晚赶出来的，右边像已经上线了两年的成熟产品。
然后我又用 Stripe 的 DESIGN.md 配合 Cursor 做了一个前端，生成出来的页面跟 Stripe 官方文档的视觉风格相似度九成以上。这在以前根本不敢想，让 AI 抄一个成熟产品的风格，能抄到六分就算烧高香了。
安装？就一句话的事
网上有些人把这个写得很复杂，什么去 GitHub 找仓库啊，手动下载啊，三步走五步走。
别听他们的，全是花架子。
你就打开 Claude Code，让它直接帮我们安装，如下图。
回车。等几秒。装完。
装完之后，你的 node_modules/awesome-design-md/ 目录里，六十多个品牌的 DESIGN.md 全在那躺着，想要哪个用哪个。
挑一个你最顺眼的，复制到项目根目录，文件名必须是 DESIGN.md，D 大写。
然后跟你的 AI 说一句：“请严格遵循项目根目录的 DESIGN.md 设计规范。”
完了。就这么简单。两分钟都用不了。
和 shadcn/ui、Tailwind 是什么关系？
有人肯定要问，我用 shadcn/ui 用得好好的，还要这个干嘛？
我说说我的理解。
Tailwind CSS 是工具类，解决"写样式更快"的问题。bg-blue-500 p-4 rounded-lg，比写一长串 CSS 快多了。但它只管怎么写，不管你写什么。
shadcn/ui 是组件库，按钮输入框弹窗都给你做好了，拿来直接用。但风格是固定的，你想改成自己的品牌色得自己覆盖样式。
DESIGN.md 是设计规范文档，定义"设计应该长什么样"。AI 读了它再去生成代码。
这三样是上下游关系。先用 DESIGN.md 定标准，再让 AI 用 Tailwind 或 shadcn/ui 去落地。
我现在的习惯是：项目里同时放着 DESIGN.md 和 shadcn/ui，提示词里写"参照 DESIGN.md 的规范，用 shadcn/ui 组件实现"。既有风格约束，又有现成组件，效率确实高。
几个坑，我替你踩过了
这些东西是我自己用下来踩过的坑，你们可以少走点弯路。
第一，DESIGN.md 不会自动生效。你得明确告诉 AI"去读这个文件"，别指望它自己发现。它不是那种放在那儿就起作用的魔法文件。
第二，提示词要具体。别只说"按 DESIGN.md 做一个页面"，要说清楚做哪个页面、什么功能、什么布局。DESIGN.md 只管风格，不管页面结构和业务逻辑。
第三，别人的品牌资产别照搬。颜色字体间距随便用，但 Logo 和商标换成自己的。这个应该不用我多说。
第四，设计改了记得更新文件。DESIGN.md 是设计系统的源头，改完品牌色顺手更新一下，以后 AI 生成的所有页面都自动对齐。
说真的，这东西太方便了！
以前从设计稿到代码，是一条特别长的路。
设计师在 Figma 里画，开发在编辑器里写，两边永远在对齐永远在扯皮。一个按钮的圆角从 8 改成 12，来来回回确认半天。设计师改一版，开发改一版，循环往复，耗费大量时间。
现在不一样了。设计决策写成了一份 AI 能直接读懂的 Markdown 文档。设计师改完更新文件，AI 下一轮生成就自动对齐了。不用来回对，不用反复改，一个文件解决所有问题。
它让"好设计"从一个需要天赋和多年训练才能拥有的能力，变成了一份可以复制粘贴的文件。你不需要请全职设计师，不需要花几千块找外包。装一个 npm 包，挑一份喜欢的风格，让 AI 照着做。
好设计，现在只差一个文件的距离。
项目地址：github.com/VoltAgent/awesome-design-md
配套预览站：getdesign.md（所有风格在线预览，一键获取文件）
