AI 做页面老是土？这个开源项目，把 58 个大厂设计风格整理成了可直接投喂的文件

很多人现在用 AI 写前端，最大的痛点不是功能跑不起来，而是——页面真的丑。

逻辑、交互、接口，AI 往往都能写个七七八八。可一到视觉层，问题就来了：配色发闷、间距发乱、按钮像拼起来的、整体气质完全不统一。最后代码能跑，页面却拿不出手。

最近我看到一个挺有意思的开源项目，专门解决这个问题。它上线才 10 天左右，GitHub Star 就冲到了 4 万多。

它做的事不复杂，但非常实用：把一批知名网站的设计规范整理成 AI 更容易理解的 Markdown 文件，让你在生成页面时，直接把“风格说明书”一起喂给模型。

它不是模板库，而是一套“可读给 AI 听”的设计规范

这个项目叫 awesome-design-md，来自 VoltAgent 团队。

它收集的不是现成网页模板，也不是组件截图，而是把网站背后的设计规则拆出来，整理成统一结构的 DESIGN.md 文件。你可以把它理解成一份写给 AI 的视觉说明书。

这些文件里不是空泛描述，而是很具体的设计信息，比如：

换句话说，它不是告诉 AI “做得高级一点”，而是直接告诉它：这个品牌的界面为什么看起来高级。

DESIGN.md 这个思路，可能会越来越常见

如果你平时会接触 AGENTS.md 这一类文件，这个概念很好理解。

AGENTS.md 更像是在告诉 AI：代码怎么写、任务怎么拆、规则怎么守。 而 DESIGN.md 解决的是另一件事：界面该长成什么样。

一个管功能实现，一个管视觉表达。

这类文件最大的价值，不只是方便人看，而是特别适合机器读取。因为 Markdown 本身就足够轻，结构也清楚，AI 处理起来比看一堆零散截图、Figma 说明，效率高得多。

所以这件事背后真正有意思的点，不只是某个仓库火了，而是它代表了一种方向：设计规范正在从“给设计师看的资料”，变成“也能直接给 AI 用的输入文件”。

这个仓库里，已经整理了 58 个品牌风格

目前项目里已经收录了 58 个知名品牌的设计规范，分成了多个类别。

像大家比较熟悉的风格，里面都能看到，比如：

这意味着什么？

意味着你如果本来就喜欢某种网站气质，比如极简、科技感、留白感、工具感、品牌感，现在不用再自己一点点总结。你可以直接去找对应品牌的 DESIGN.md，把那套规则拿来给 AI 参考。

对于很多不擅长设计的人来说，这个价值其实挺大。

以前你让 AI“参考某某风格”，它很可能只能模仿个皮毛。 现在如果你直接给它一份拆解好的设计规则，效果就会稳定很多。

这不是“差不多像”，而是细到参数级别

这个仓库里比较打动人的地方，是它不是在做表面整理，而是在尽量把设计细节落到参数层。

比如有些品牌文件里，会记录它标志性的边框阴影写法；有些会把字体在不同字号下的 letter-spacing 写出来；有些会把特定字重、透明度层级、组件边界关系都整理清楚。

也就是说，这些内容不是“这个网站偏极简”“这个页面挺有科技感”这种废话，而是可以真正影响生成结果的细节。

这也是为什么 AI 在吃到这类文件后，生成出来的页面观感会明显不一样。 因为它不再是凭语义猜，而是有了具体约束。

对开发者来说，使用门槛非常低

这类东西最舒服的一点是：基本没什么上手成本。

你大概只要做三步：

就这么简单。

不需要额外装一堆依赖，也不需要先学什么新框架。它本质上就是一个文本文件，但这个文本文件提供的，是 AI 最缺的那部分“审美约束”。

很多时候，AI 做 UI 不好看，不是因为它不会写，而是因为你给它的要求太模糊。 你说“做得高级一点”“做得像产品级一点”，这类话太虚。 但如果你把一套完整设计语言丢给它，它就知道该往哪边收。

这件事对设计师和开发者，其实都是提醒

从开发者角度看，awesome-design-md 解决的是一个非常现实的问题：不会设计，也能借助成熟设计语言，把 AI 生成的页面质量往上提。

从设计师角度看，它传递的信号也很明确： 设计规范这件事，以后可能不只是服务于人，还会越来越多地服务于 AI。

以前设计系统主要是给团队内部统一风格、提高协作效率。 但在 AI 参与生产之后，设计系统还会多一层作用：成为机器生成界面的输入标准。

谁能把设计规则整理得更清楚、更结构化，谁就更容易把自己的风格稳定地复制出来。

最后说一句

我觉得这个项目火，不只是因为它收录了 58 个品牌样式。

更关键的是，它把一件以前比较“靠感觉”的事，变成了一种可以复制、可以投喂、可以规模化使用的方法。

以后做页面这件事，很可能会慢慢变成这样：

如果真往这个方向发展，那 awesome-design-md 现在做的，可能只是一个开始。

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