AI写的界面总是丑爆?这个6万星标的项目,专治AI的＂审美残疾＂

今天聊一个 GitHub 上爆火的项目——awesome-design-md，6.2 万 Star、7.7k Fork。它的功能简单到离谱：给你一个 markdown 文件，复制粘贴到项目里，然后告诉 AI “帮我做一个这样的界面”，出来的效果直接对标大牌网站。

一句话解释：这到底是个啥？

你有没有遇到过这种情况：

用 ChatGPT、Claude 或者 Cursor 写前端页面，生成的界面总是丑得千篇一律——白色背景、蓝色按钮、默认字体，看着像个 2008 年的老网站。

你想要的是Stripe 那种高级感，或者Notion 那种温暖极简，或者Linear 那种精密冷酷的工程师审美……但 AI 根本 get 不到。

awesome-design-md 解决的就是这个问题。

它本质上是一个设计系统模板库，收集了 69 多个世界知名品牌和产品的 DESIGN.md 文件。你把其中一个文件扔进项目，AI 就能照葫芦画瓢，生成风格一致的精美界面。

不需要你会设计，不需要写 CSS，甚至不需要会画图。

DESIGN.md 是什么？为什么是它？

这个概念其实来自 Google 的 Stitch 项目。

简单来说，DESIGN.md 就是一个 纯文本的 markdown 文件，里面用文字描述了一个产品的完整设计规范：用什么颜色、什么字体、按钮长什么样、卡片怎么圆角、间距多大……

你可能要问了：为啥是 markdown？JSON 不行吗？Figma 不行吗？

答案是：markdown 是 LLM（大语言模型）最容易读、最理解的格式。

收录了哪些大牌？覆盖面有点夸张

这个项目一共收录了 69 多个知名品牌的设计系统，分了 9 大类，基本覆盖了你见过的所有主流产品风格：

AI & LLM 平台（11 个）

• Claude——暖色调赤陶色点缀，干净利落的编辑式排版
• xAI——马斯克极简风，黑白分明，未来感
• ElevenLabs——深色电影感界面，音波美学
• RunwayML——暗色 UI，媒体驱动的视觉风格
• VoltAgent——纯黑画布配翠绿点缀，终端原生风格

开发者工具 & IDE（7 个）

• Cursor——深色界面，渐变点缀，AI 感拉满
• Vercel——黑白精准，Geist 字体，工程师审美
• Warp——终端新物种，IDE 风格，块状命令 UI
• Raycast——生产力启动器，深色镀铬质感

后端、数据库 & DevOps（8 个）

• Supabase——深翠绿主题，代码优先
• MongoDB——绿色叶子品牌，开发者文档风
• PostHog——小刺猬品牌，友好暗色 UI
• Sentry——深色仪表板，粉紫点缀

生产力 & SaaS（8 个）

• Notion——温暖极简，衬线标题，柔和表面
• Linear——极致简约，精准克制，紫色点缀
• Figma——多彩活泼，专业中透着趣味

设计 & 创意工具（6 个）

• Framer——黑蓝撞色，动态优先，设计前卫
• Webflow——蓝色点缀，精致营销网站风

金融科技 & 加密货币（7 个）

• Stripe——标志性紫色渐变，300 字重优雅感
• Coinbase——干净蓝色，信任感、机构感
• Revolut——渐变卡片，金融科技精密感

电商 & 零售（5 个）

• Airbnb——暖珊瑚色点缀，摄影驱动，圆润 UI
• Nike——单色 UI，超大 Futura 字体，全出血摄影
• Shopify——暗色电影感，霓虹绿点缀

媒体 & 消费电子（9 个）

• Apple——大量留白，SF Pro 字体，电影感图像
• Spotify——暗底亮绿，大胆字体，专辑封面驱动
• NVIDIA——绿黑能量，技术力量美学

汽车（6 个）

• Tesla——激进减法，全视口摄影，极简
• BMW——深色高端表面，德国工程精准
• Ferrari——黑白编辑风格，法拉利红点缀

你看，不管你是做什么产品的，这里基本都能找到对标风格。

每个 DESIGN.md 里都有什么？

不要小看这一个 markdown 文件，里面的信息量非常大。每个文件都包含 9 大模块：

1. Visual Theme & Atmosphere（视觉主题与氛围）

整体气质描述。比如 Nike 的是：”单色 UI + 超大写 Futura + 全出血摄影，运动力量感”。AI 一看就知道这是什么 vibe。

2. Color Palette & Roles（配色方案与角色）

每个颜色的语义名字 + 十六进制色值 + 功能角色。比如主色是 #635BFF（Stripe 紫），用于 CTA 按钮和关键元素。

3. Typography Rules（字体规则）

用什么字体家族，标题多大、正文多大、行高多少、字重多少，全部有表格。

4. Component Stylings（组件样式）

按钮怎么圆角、卡片阴影多大、输入框边框什么样、导航栏怎么排，连 hover 状态和 disabled 状态都写清楚了。

5. Layout Principles（布局原则）

间距比例、网格系统、留白哲学。比如 Apple 风格就是大量留白，信息密度极低。

6. Depth & Elevation（深度与层级）

阴影系统、表面层级。比如 Material Design 那套 elevation 概念。

7. Do’s and Don’ts（设计红线）

什么能做、什么不能做。比如 “不要在这个风格里用渐变色”、”不要用圆角超过 8px 的按钮”。

8. Responsive Behavior（响应式行为）

断点怎么设、触屏目标多大、小屏幕怎么收缩。

9. Agent Prompt Guide（AI 提示词指南）

这是最贴心的部分——直接给你写好了一段提示词，复制粘贴就能用。还有快速颜色参考卡片。

每个品牌文件夹里还附带 preview.html 和 preview-dark.html，打开就能直观看到颜色、字体、按钮、卡片的效果。

怎么用？简单到离谱

操作步骤就两步：

Step 1：找到你喜欢的风格，把 DESIGN.md 复制到你的项目根目录。

Step 2：告诉你的 AI 编码助手：

“请按照 DESIGN.md 里的设计规范来生成界面。”

然后就完事了。

AI 会自动读取这个文件，按照里面的配色、字体、组件规范来生成代码。出来的效果跟你要对标的大牌网站风格一致。

支持的 AI 工具包括但不限于：

• Cursor（AI 代码编辑器）
• Claude Code（Anthropic 的编码助手）
• Google Stitch（DESIGN.md 概念的发源地）
• v0.dev（Vercel 的 AI 生成 UI 工具）
• ChatGPT / Claude（配合 Artifacts 功能）
• 任何支持文件上下文的 AI 编码工具

为什么这个项目这么火？

解决了一个真实的痛点

AI 写代码越来越快，但生成的界面总是丑。这个项目让 AI 有了”审美标准”，不再随心所欲。

像我这样审美本来就丑的，做出来的页面丑到家了，特别是配色！

这适合谁用？

1. 不会设计但想做出好看界面的开发者

这是最大的用户群。你写代码没问题，但配色、字体、间距总搞不定？扔一个 DESIGN.md 进去，AI 帮你搞定。

2. 做 MVP 和原型的独立开发者

快速出一个像模像样的 landing page 或产品界面，不用请设计师，不用花时间在 CSS 微调上。

3. 用 AI 编程工具的人

如果你在用 Cursor、Claude Code、Stitch 这些工具，配合 DESIGN.md 效果翻倍。

4. 设计团队

可以作为快速启动设计系统的参考模板，或者作为 AI 辅助设计的规范输入。

写在最后

awesome-design-md 代表了一种新的工作方式：人定方向，AI 执行细节。

你不需要会设计，但你得知道”我想要什么风格”。剩下的交给 AI 和 DESIGN.md。

在 vibe coding 越来越流行的今天，这类工具会越来越重要。未来的开发流程可能是这样的：

1. 选一个 DESIGN.md（定风格）
2. 写一段需求描述（定功能）
3. AI 自动生成代码（执行）
4. 你 review 一下，改改细节（微调）

设计不再是门槛，想法才是。

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

设计文件查看：https://getdesign.md