68.4k Star 的 DESIGN.md 仓库：AI 写前端，终于不靠“感觉”了

现在用 AI 写前端，最大的问题往往不是“不会写代码”，而是写出来不像一个真正的产品。

你告诉它：“做一个像 Vercel、Linear、Claude 官网那样高级的页面。”

结果它可能会给你一个结构能跑、组件齐全，但视觉总是差点意思的页面。

颜色不统一、间距不稳定、圆角随意、字体层级混乱、组件状态不完整。

这就是很多人用 AI 写 UI 时 最常见的痛点：AI 会写页面，但不一定懂设计系统。

最近看到一个很有意思的开源项目：awesome-design-md。

它目前在 GitHub 上已经有 68.4k Stars、8.4k Forks，项目定位是收集一批受真实品牌设计系统启发的 DESIGN.md 文件，让 AI coding agent 可以读取这些设计规则，生成更一致的 UI。

DESIGN.md 到底是什么？

简单说，DESIGN.md 是一份给 AI Agent 看的“设计系统说明书”。

它不是 Figma 文件，也不是复杂的 JSON Schema，而是一个普通 Markdown 文件。

项目 README 里写得很直接：把 DESIGN.md 放进项目根目录，AI coding agent 或 Google Stitch 就能理解你的 UI 应该长什么样。

如果说：

AGENTS.md 告诉 AI：这个项目应该怎么做。DESIGN.md 告诉 AI：这个项目应该长什么样。

那 awesome-design-md 做的事情，就是把大量真实网站的设计语言，整理成 AI 能读懂、能执行、能复用的 Markdown 规则。

它解决了 AI 写 UI 的一个关键问题

过去我们让 AI 写页面，经常靠模糊描述：

“做得高级一点。”

“像 SaaS 官网。”

“参考 Linear 风格。”

“要有 Apple 那种质感。”

问题是，这些描述对人有感觉，但对 AI 来说太模糊。

DESIGN.md 则把这些感觉拆成更具体的规则：

视觉氛围、颜色体系、字体层级、组件样式、布局原则、阴影系统、响应式行为，以及给 Agent 使用的提示指南。仓库说明里也列出，每个文件会包含 Visual Theme、Color Palette、Typography、Component Stylings、Layout Principles、Do’s and Don’ts、Responsive Behavior、Agent Prompt Guide 等内容。

这意味着，AI 不再只是“凭感觉生成 UI”，而是开始按照一套明确的设计约束工作。

它收集了哪些设计风格？

这个项目最吸引人的地方，是它不是空讲方法论，而是已经收集了一批真实产品风格。

比如在 AI 和 LLM 平台里，它包括 Claude、Cohere、ElevenLabs、Minimax、Mistral AI、Ollama、OpenCode AI、Replicate、RunwayML、Together AI、VoltAgent、xAI。

开发者工具和 IDE 方向，包括 Cursor、Expo、Lovable、Raycast、Superhuman、Vercel、Warp。

后端、数据库和 DevOps 方向，包括 ClickHouse、Composio、HashiCorp、MongoDB、PostHog、Sanity、Sentry、Supabase。

SaaS 和效率工具方向，包括 Cal.com、Intercom、Linear、Mintlify、Notion、Resend、Zapier。设计与创意工具方向，则包括 Airtable、Clay、Figma、Framer、Miro、Webflow。

它甚至还覆盖了金融科技、消费品牌、媒体科技和汽车品牌，比如 Binance、Coinbase、Kraken、Mastercard、Revolut、Stripe、Wise、Airbnb、Meta、Nike、Shopify、Starbucks、Apple、IBM、NVIDIA、Pinterest、PlayStation、SpaceX、Spotify、The Verge、Uber、Vodafone、WIRED、BMW、Bugatti、Ferrari、Lamborghini、Renault、Tesla。

也就是说，它不是一个简单的 UI 模板库，而更像是一个 品牌设计语言样本库。

怎么用？

使用方式很简单：

第一步，选择一个你喜欢的品牌或产品风格。

第二步，把对应的 DESIGN.md 复制到你的项目根目录。

第三步，告诉 Claude Code、Cursor 或其他 AI coding agent：按照这个 DESIGN.md 生成页面。

项目 README 里给出的使用方式也很直接：复制某个网站的 DESIGN.md 到项目根目录，然后告诉 AI agent 使用它。

这样做的好处是，你不需要每次都重新解释“什么叫高级感”。

设计规则已经写在文件里了，AI 可以基于这些规则持续生成、修改和迭代页面。

为什么值得关注？

我觉得这个项目背后真正有价值的，不只是“收集了很多设计风格”。

更重要的是，它代表了 AI 前端开发的一个趋势：

AI 写页面，不再只是拼组件，而是开始遵守设计系统。

以前我们更多讨论的是 Vibe Coding：

用自然语言让 AI 帮我们写代码、改功能、生成应用。

但接下来，很可能会进入 Vibe Design 阶段：

不是只告诉 AI 做什么，而是告诉 AI 应该呈现什么样的视觉语言。

对前端工程师来说，这能减少大量“反复调样式”的时间。

对独立开发者来说，它可以快速提升产品页面的专业感。

对团队来说，一份 DESIGN.md 也能成为 AI 协作中的设计边界，让不同人、不同 Agent 生成的页面保持一致。

最后

AI 写前端的下一步，可能不是“生成更多代码”，而是“生成更像产品的界面”。

awesome-design-md 的价值就在这里：

它把设计风格从模糊感觉，变成了 AI 能读取、能执行的 Markdown 规则。

如果你经常用 Claude Code、Cursor 做前端页面，这个项目值得收藏。

来源：https://mp.weixin.qq.com/s/GL3srkhMjTogn5GjarjPQg