我在项目根目录放了一个文件，AI再也没把UI做丑过！

原文链接：https://mp.weixin.qq.com/s/_OUbM2hNBvwMiTnIcMlZfw

开源项目awesome-design-md：把顶级品牌设计语言翻译成AI秒懂的格式

最近在Vibe Coding一个项目，发现即使通过详细的提示词或者一些ui类的Skill，AI生成的页面在同一个项目中风格往往也会出现偏差。

往往都是大方向还对的，但是很多页面的细节设计风格不统一，仍然需要去不断的合适调整，调样式的时间比自己写还长。费时间，费词元（Token）。

直到最近看到VoltAgent/awesome-design-md这个项目，才算找到个靠谱的方案。

这个项目的思路很直接：把71个知名品牌的设计系统，全部转成了Markdown格式的DESIGN.md文件，丢到项目根目录就行。

可能很多人还没听说过这个概念。

是Google Stitch最近推出的一种纯文本设计系统格式，专门为AI编码代理设计。

和传统的设计系统不同，它不需要任何Figma导出、JSON解析或者特殊工具。它就是一个普通的Markdown文件，而Markdown恰恰是大语言模型最擅长理解的格式。你只需要把一个DESIGN.md文件丢到项目根目录，任何AI编码代理都能瞬间理解你想要的视觉风格。

这才是真正的即插即用。不用再费劲去描述”我想要一个简洁现代的深色界面，按钮用紫色渐变”，也不用反复跟AI拉扯细节。直接告诉AI”按照这个DESIGN.md构建页面”，就能得到像素级一致的界面。

这个项目最厉害的地方在于它的覆盖范围。从Claude、Vercel、Stripe、Linear，到苹果、特斯拉、星巴克这种大众熟知的消费品牌，甚至连宝马、法拉利、布加迪这些顶级汽车品牌的官网设计都有收录。

这些设计规范不是简单的颜色值罗列，而是完全遵循Google Stitch的标准，每个都包含了完整的9个部分：视觉主题与氛围、颜色调色板与角色、排版规则、组件样式、布局原则、深度与层级、设计禁忌、响应式行为，甚至还有专门给AI用的提示词指南。

而且每个设计都提供了浅色和深色两种模式的预览文件，你可以在浏览器里直接打开查看完整的视觉效果，再决定要不要用。我自己翻了一遍，几乎能想到的所有应用场景，都能在这里找到对应的设计风格。

使用这个项目简单到离谱，真的只需要三步。

首先，访问getdesign.md网站浏览所有可用的设计规范。网站把71个设计按照AI平台、开发者工具、金融科技、电商零售、汽车等行业分类整理得清清楚楚，你可以快速找到自己喜欢的风格。当然，你也可以直接去GitHub仓库的design-md目录下挑选。

找到喜欢的设计后，把对应的DESIGN.md文件复制到你的项目根目录。或者直接通过npx进行下载，比如要使用claude的风格

1	`npx getdesign@latest add claude`

最后一步，打开你的AI编码工具，不管是Cursor、GitHub Copilot还是Claude Code，直接输入提示：”Build me a page that matches the design system in DESIGN.md”

就是这么简单。AI会自动读取DESIGN.md里的所有规则，生成完全符合该品牌设计语言的界面。我自己试了几个，效果真的惊艳，比我自己一点点调出来的还要标准。

AI辅助开发的下一个阶段，一定是标准化和规范化。当AI写的代码越来越多，如何保证代码质量和设计一致性，就成了最大的问题。awesome-design-md提供了一个非常好的思路：用AI能理解的格式，把人类的最佳实践沉淀下来。

目前这个项目还在快速更新，每周都会有新的设计规范加入。如果你也受够了AI生成的混乱界面，强烈推荐你去试试这个工具。它可能会彻底改变你用AI写前端的方式。

项目地址

“前哨君”精选AI开源项目网站

欢迎置顶（标星）关注本公众号「AI开源前哨」获取有趣AI技术/工具分享,这样就第一时间获取推送啦~

[

[

[

本文转载自微信公众号，如有侵权请联系删除。