AI生成的界面太难看？试试这个开源项目Awesome DESIGN！

 

最近Vibe Coding真的太火了。

越来越多人开始直接用 AI 写页面、搭产品、做官网，动动嘴就能出 UI，效率看着确实很爽。

但问题也很真实。

你以为AI会给你整出那种大厂味、极简风、质感拉满的界面，结果它一出手，像是把十年前的建站模板重新缝了一遍。

不是 AI 故意演你，问题其实很简单：你嘴里的“高级感”，AI 根本脑补不出来。

你觉得“像 Apple 一点”“像 Stripe 一点”“做得更有质感一点”，但这些话对 AI 来说都太虚了。没有明确的设计规则，它最后大概率还是只能靠自由发挥。然后你懂的，翻车现场就来了。

最近我刷到一个挺顶的 GitHub 项目，刚好就是来解决这个问题的。

它叫 Awesome DESIGN.md。

项目地址：github.com/VoltAgent/awesome-design-md

规范详情：https://getdesign.md

01. Awesome DESIGN是什么？

简单说，它就是一份写给 AI 看的设计规范。不是给前端开发看的，也不是给设计师交付用的，而是专门用来告诉 AI：这个页面应该长什么样。

它的逻辑很简单，就是把页面该怎么配色、用什么字体、组件长什么样、版式怎么排，全部整理进一份 Markdown 文档里。

AI 读完之后，就不是再靠感觉乱猜，而是会按照你给定的风格规则去生成页面。

说白了，这东西就是 AI 时代的设计说明书。

而且重点是，它不是插件，不是 SaaS，也不是那种点进去就开始收费解锁的套路产品。

它是免费、开源、现成就能拿来用的。

下方为部分设计规范展示

02. 如何安装？

Claude Code、Cursor、Codex、Trae 这类 AI 编程工具都能直接读取 DESIGN.md。你只要把文件放进项目根目录，再告诉 AI 按这份设计规范生成页面，它就能照着这套风格往下写。

如果还要更简单的方式就是直接把命令发给对应AI编程工具叫他帮你安装

https://hao.uied.cn/website/1218

如果还不了解AI 编程工具的可以看看我之前写的AI知识库

https://facomqeet1v.feishu.cn/wiki/YK3QwtWDciTsj6kraJScEGjDniS

这里使用Trae来进行案例展示其他AI编程工具类似操作

打开https://getdesign.md

选择自己需要的设计规范，这里我以苹果的为例。其他同类型

复制命令给AI编程工具让它来安装

安装完会显示在你的文件根目录（显示有就是安装成功了）

如果你觉得让AI安装太慢可以直接自己复制到DESIGN.md

替换到这个DESIGN.md就行。

03. 如何使用

告诉 AI 助手使用它在你的 AI 编程助手中输入：

仅做测试，具体能力也要看大模型本身

请根据项目根目录的 DESIGN.md 文件，为我构建一个后台页面。

效果展示（大模型kimi）

04. 如何将生成的html或者web网页转为figma源文件

打开你需要转为figma的html文件

Web to Design 浏览器插件安装教程

https://facomqeet1v.feishu.cn/wiki/LJL6wBolJiZPBEkFLhEc9ka2nxc

安装好后点击打开工具条

执行复制页面

在figma画布中执行ctrl+v即可

写在最后

整体效果看起来比没用规范之前好看多了，但还差点意思，进步空间还是挺大的。

基本就是AI做的页面，至少告别了“廉价外包感”，直接看起来像是某个大厂的水平，简约有质感，但还是能感觉到跟真正大厂的精细度有差距。可能是细节和小调整的地方还没到位，所以整体风格不错，但还不能完全满分，想要完全做到完美，可能还得进一步优化。