AI 写网页总是丑？试试 DESIGN.md

AI 写网页，代码通常不是最难的部分。

难的是结果看起来总有一股“默认模板味”：白底、紫色按钮、几张圆角卡片，功能都在，气质没有。你说“做得高级一点”，它也能照做，只是每次的“高级”都差不多。

DESIGN.md 解决的是这个问题。它是一份放在项目里的纯文本设计说明，写清楚颜色、字体、间距、按钮、卡片、响应式布局，以及哪些做法不要用。 AI 编程工具先读这份说明，再写页面，就不必从一张白纸开始猜。

这个仓库有什么

VoltAgent/awesome-design-md 是一个清单仓库，不是网页生成器，也不是一个需要安装的前端框架。

仓库里按网站整理了多份 DESIGN.md。当前 README 标注了 73 份，覆盖的类型很杂：

每份文件不是一句“做成 Stripe 风格”，而是把设计拆成了可以交给模型阅读的规则。以 Stripe 这一份为例，里面能看到主色、深色背景、字体层级、圆角、按钮和卡片等定义，还给出了布局、间距、阴影、响应式行为和适合交给 AI 的提示词。

这就像给装修工一张材料单和施工图。你仍然要告诉他房子要做什么，但至少不会让他临场猜墙面颜色和门把手尺寸。

普通提示词描述的是愿望：

做一个像某某品牌一样简洁的后台页面。

DESIGN.md 描述的是约束：

规则越具体，模型越容易保持一致。首页、定价页、设置页即使分几次生成，也更有机会像同一个产品，而不是三套模板拼在一起。

Google Stitch 的 DESIGN.md 文档把它定义为一种纯文本设计系统文件。它不需要专门的 JSON 格式，也不需要先导出 Figma 文件。 Markdown 的好处是，常见的 AI 编程工具本来就能读项目里的 Markdown 。

先打开仓库，挑一份与你想做的页面气质接近的文件。不要因为品牌名字听起来大，就直接照搬。做管理后台，可以先看 Linear 、 Vercel 、 Sentry；做内容产品，可以参考 Notion 、 The Verge；做金融产品，可以从 Stripe 、 Wise 的规则开始看。

把对应目录里的 DESIGN.md 复制到自己的项目根目录。然后在对话里说清楚三件事：

接下来让 AI 先做一个页面，不要一上来生成整套后台。先看导航、首屏、按钮、表格这几个地方是否像样，再继续补页面。这样更容易发现问题，也不会在一大堆代码里返工。

一个可以直接改的提示词：

先阅读项目根目录的 DESIGN.md。
请做一个客户跟进页面，保留搜索、状态筛选、客户列表和新增客户按钮。
严格使用 DESIGN.md 里的颜色、字体、间距、圆角和按钮规则。
先实现桌面端页面，再补充手机端布局。
不要额外引入一套新的视觉风格，也不要用渐变装饰没有内容的区域。

它最适合管三件事。

第一，减少页面之间的风格漂移。首页定了紫色，设置页不会突然换成亮橙色；按钮圆角定了 8px，表单里的按钮也不会各做各的。

第二，把“审美”变成模型能执行的文字。设计师脑子里的“紧凑一点”“留白多一点”，对模型来说太模糊。颜色角色、字号、间距和状态写出来，模型才有具体依据。

第三，降低反复沟通的成本。你可以把设计规则当成项目的一部分，换一个 AI 工具时仍然能复用，不用每次重新解释产品长什么样。

它不会自动把网页变成某个品牌的官网，也不能保证生成的页面就适合你的业务。

仓库里的文件属于设计分析和风格参考。它们不是相关公司的官方设计系统，也不是授权的品牌组件库。照着颜色和布局做内部工具，和直接复制品牌标识、图片、文案，是两回事。对外发布的产品，还要自己处理商标、字体、图片和素材授权。

它也不能替代产品设计。DESIGN.md 可以告诉 AI 按钮怎么画，却不能替你决定用户为什么要点这个按钮。信息层级、流程、权限、错误提示和无障碍，仍然需要人检查。

还有一个容易忽略的点：仓库本身是清单，里面每个网站的设计文件质量和适用场景可能不同。 README 里的 73 只是当前整理数量，不是质量排名。项目最新提交停在 2026 年 7 月 31 日，使用前最好看一眼具体文件和目标网站当前界面。

仓库根目录的许可证是 MIT 。你可以复制、修改和使用这些文件，但每个品牌的商标、字体、图片和页面素材仍然要单独确认授权。

如果你用 AI 做个人网站、内部工具、产品原型，或者经常觉得“功能做出来了，但页面不耐看”，它值得试试。

如果你已经有成熟的设计系统，或者项目需要严格还原现有组件库，应该把自己的规则写进 DESIGN.md，不要直接拿一份品牌分析顶上去。

对零基础的人来说，它还有一个好处：你不需要先学会一整套设计术语。先挑一份接近目标的文件，照着里面的颜色、字体和布局规则让 AI 做一个小页面，再逐项修改，通常比一句“做得漂亮点”更容易得到可控结果。

我不会把它当成“复制品牌，一键出片”的按钮。更实际的用法是，先挑一个喜欢的方向，再删掉不适合自己项目的部分，最后补上自己的业务规则。

比如做一个记账工具，可以借用 Stripe 的颜色角色和数字排版，但不能照搬它的营销页面；做一个知识库，可以参考 Notion 的留白和层级，但要重新设计搜索、标签和权限。

AI 负责把规则变成代码，人负责判断这些规则是否适合自己的用户。这个分工，比让 AI 自己猜“高级感”靠谱得多。