DESIGN.md让AI写出好看的网站，awesome-design-md使用教程

AI写页面，最大的问题不是写不出来

前两天我在刷X，看到有人推awesome-design-md这个GitHub项目，32K+ Star，有点吓人。

awesome-design-md GitHub项目 32.8K Star

让AI搭一个页面早就不难了。结构出得来，组件出得来，按钮卡片也都能堆出来。但每次看到生成结果，我都知道——又是那股熟悉的AI味。渐变紫、发光卡片、emoji，看一眼还行，看三眼就腻了。

问题出在哪？不是模型不会写页面，是它缺一套明确的审美约束。你给了需求，给了上下文，甚至给了AGENTS.md，但就是没告诉它页面该长什么样。于是它用训练数据里出现最多的样式，给你一个平均值。设计这件事，一旦落到平均值，基本就废了。

DESIGN.md是什么东西

awesome-design-md做的事情不复杂。它把很多知名产品的视觉语言，整理成了AI能直接读的DESIGN.md文件。不是组件库，不是灵感合集，更像一份写给AI的设计说明书。你把它扔进项目根目录，Claude Code、Codex、Cursor这些工具再去生成页面时，就知道颜色该往哪收，留白该多大，圆角阴影字体分别该守什么边界。

我拿它测了一把

我拿Claude风格写了一套DESIGN.md，又用Vercel风格写了一套，让Claude Code生成同一个SaaS首页。两个风格差得很明显——Claude那套更温和，页面松一点，有点内容产品的陪伴感。

Vercel就完全是另一边。更冷，更克制，黑白灰用得更狠，留白更大，秩序感也更强。

把DESIGN.md放进项目根目录

两版都是直接一把出，没再手修。我自己更喜欢Vercel这套，干净利落，商业感更强。

怎么用

去仓库里挑一个你想对标的网站风格，把对应的DESIGN.md下载下来，放进项目根目录。然后在提示词里指明”请参考项目根目录的DESIGN.md”，让agent直接跑就行。Claude Code、Codex、Cursor都认这个。

不过我得泼盆冷水。这东西特别适合新项目，尤其是Landing Page、产品官网、Side Project。但硬塞进已有成熟样式体系的老项目，页面会直接开使打架。字重一套，圆角一套，阴影一套，agent一旦认真执行新的DESIGN.md，原来的样式逻辑就很容易被带偏。要在老项目里用，先开个git分支，局部试，别一把梭。