如果你最近也在用 Claude、Codex、Cursor 之类的工具做页面，应该很容易遇到一个问题：

功能能做出来，但视觉总有点“像那么回事，又不太对”。

问题很多时候不在模型不够强，而在于你给它的设计约束太弱了。

我刚好挖到一个很适合解决这个问题的仓库：

https://github.com/VoltAgent/awesome-design-md

截至 2026-05-19，我看到这个仓库在 GitHub 上已经有 81.1k stars、9.8k forks。它不是普通的灵感站，也不是一堆散乱截图，而是一整套可以直接喂给 AI 的 DESIGN.md 文件。

它到底是什么？

一句话说清楚：

它把很多知名产品的网站设计风格，整理成了 AI 更容易理解的 DESIGN.md。

你可以把它理解成设计版的 AGENTS.md：

• AGENTS.md 告诉 AI 这个项目该怎么做
• DESIGN.md 告诉 AI 这个页面应该长什么样

仓库 README 里写得很直接：

把一个 DESIGN.md 丢进项目根目录，然后告诉 AI “按这个风格给我做页面”。

这类东西真正值钱的地方，不是“给你一点设计灵感”，而是把灵感变成了 AI 可执行的约束。

为什么这玩意对 AI 特别有用？

因为它不是一句很空的提示词，比如：

做一个像 Vercel 一样高级的 landing page

这种提示词最大的问题是，人知道你在说什么，模型不一定真的知道。

而 DESIGN.md 里写的是结构化的设计信息，比如：

• 颜色体系和语义角色
• 字体层级
• 按钮、卡片、输入框样式
• 间距和栅格规则
• 响应式行为
• 不该怎么做
• 可以直接给 agent 用的 prompt guide

也就是说，它给 AI 的不是“审美愿望”，而是“落地说明书”。

这也是我觉得它会火的原因：

它把“做得像”这件事，从玄学拉回到了可复用的工程资产。

这个仓库里到底收了什么风格？

我翻了一圈，里面不是只收 AI 产品，而是覆盖了非常多你做项目时常会参考的风格。

比如：

• AI / LLM：Claude、Mistral、Runway、xAI
• 开发工具：Cursor、Vercel、Warp、Raycast
• SaaS：Linear、Notion、Resend、Zapier
• 设计工具：Figma、Framer、Webflow
• 电商与品牌：Nike、Airbnb、Shopify、Starbucks
• 金融科技：Stripe、Coinbase、Wise、Revolut

重点不是数量本身，而是这些风格不是只做了“名字对应”，而是尽量把网站的视觉逻辑拆出来了。

下面给你看几个我觉得特别直观的例子。

1. Claude 风格：温暖、克制、带一点编辑感

Claude 这页是一个很典型的例子。

页面上不只是写“像 Claude”，而是把它拆成了更具体的语言：

• 暖米色画布
• 珊瑚色 CTA
• 深色产品卡片
• serif 标题 + humanist sans 正文

你会发现，这种描述一旦写进 DESIGN.md，AI 生成页面时就不容易再滑向那种默认的“蓝紫渐变 SaaS 风”。

2. Vercel 风格：黑白精度感 + 几乎零废话

Vercel 这类风格很多人都喜欢，但也最容易被 AI 做成“看起来像 Vercel 的低配版”。

这个仓库里给 Vercel 的拆法就很细：

• 黑白为主的极简基调
• 彩色 mesh gradient 只出现在少数关键位置
• 几何 sans + monospace 技术标签
• 超克制的按钮和边线系统

这类页面如果只靠一句“做得高级一点”，基本做不出来。
但如果你把颜色、字重、组件和留白规则一起交给 AI，成功率会高很多。

3. Nike 风格：不是黑白就叫运动品牌

Nike 这个我也挺喜欢。

很多人以为 Nike 风格就是黑底白字，其实远不止。

这个版本里强调的是：

• 摄影优先
• 超大号 uppercase 标题
• 单色 UI chrome
• 色彩只在价格、活动和摄影图里承担强表达

这对做品牌页特别有帮助。

因为你会意识到，AI 真正需要的不是“给我做潮一点”，而是“哪些地方该克制，哪些地方该放大”。

4. Stripe 风格：高级感不是紫色，而是层级控制

Stripe 也是经常被模仿、经常被模仿歪的一个。

它的难点从来不是“有紫色渐变”，而是：

• 字重非常轻，但不虚
• 层级密度高，但不乱
• CTA 强，但不吵
• 金融产品感和营销页气质要同时成立

如果你看这个页面里的预览区，会发现它甚至把颜色、按钮、卡片、价格区块、表单这些都拆开演示了。

这就很适合拿来做一类工作：

不是“我想抄 Stripe”，而是“我想借用 Stripe 这套秩序感”。

它怎么用？

这个仓库比较友好的一点，是使用路径不绕。

以 Stripe 这个页面为例，上方本身就给了可直接复制的安装命令；而往下滚到 Preview 区域，你能立刻看到这套风格已经被跑成了可视化页面：

也就是：

npx getdesign@latest add stripe

然后你就可以在项目里告诉 AI：

Use DESIGN.md for UI work.
Build a landing page for my product.
Keep the typography, spacing, button hierarchy, and overall visual tone consistent with DESIGN.md.

如果你平时就用 Cursor、Codex、Claude Code 这类工具，这种工作流会很顺：

1. 先选一个你想要的品牌风格
2. 把对应 DESIGN.md 放进项目
3. 让 AI 基于它生成页面
4. 再继续微调业务内容，而不是从视觉语言开始反复拉扯

我为什么觉得它值得收藏？

因为它解决的是一个非常实际的问题：

很多人现在已经会用 AI 写代码了，但还不会稳定地“给 AI 定设计”。

结果就是：

• 功能做得很快
• 页面改了很多轮
• 每一轮都像在和模型重新解释“什么叫好看”

而 awesome-design-md 这类仓库，本质上是在补这块基础设施。

它把“设计方向”从模糊感受，变成了：

• 可复制
• 可复用
• 可迭代
• 可直接喂给 agent

这就是它对 AI 时代最有价值的地方。

如果你卡的不是设计，而是模型接入

如果你已经有稳定的 OpenAI / Anthropic 接入，这一段你可以直接跳过。

但如果你人在国内，真正卡住你的不是设计，而是：

• Codex / Claude Code 不稳定
• API Key 接入折腾
• 想先把工作流跑通再说

那我自己的建议一直都是：

先把模型接入层搞稳定，再去测试这些 DESIGN.md。

像 靠谱AI 这种现成入口，就比较适合“先把 Claude / Codex 这类能力接上，快速验证工作流”这件事。
尤其是你只是想先跑一遍设计风格生成，而不是一上来就自己折腾整套配置的时候，这种方式会更省时间。

这里我更建议把它当成一个辅助入口，而不是文章主角。
主角还是这个仓库本身，因为真正能拉开页面质感差距的，还是 DESIGN.md 这种设计约束。

最后一句

我觉得 awesome-design-md 最值得看的地方，不是“它又整理了多少个品牌”，而是它证明了一件事：

AI 做前端，缺的往往不是生成能力，而是高质量的设计输入。

如果你最近正好在做：

• landing page
• 产品官网
• SaaS 控制台
• 品牌活动页
• AI 产品首页

那这个仓库很值得你先收藏，再挑一个风格实测一遍。

仓库地址：

https://github.com/VoltAgent/awesome-design-md

如果你只做一个动作，我建议就是：

先选一个你最熟悉的品牌，把它的 DESIGN.md 丢进项目根目录，然后让 AI 重做一次首页。
你会比读十篇“AI 设计提示词教程”更快看到差别。

参考信息

• GitHub Repo: https://github.com/VoltAgent/awesome-design-md
• GitHub API 读取时间：2026-05-19
• 当时看到的仓库数据：81,057+ stars、9,785 forks
• GitHub API updated_at: 2026-05-19T07:38:48Z
• GitHub API pushed_at: 2026-05-18T14:31:59Z