awesome-design-md 71k Star：给 AI 一份设计规范，生成匹配产品的界面

原文链接：https://mp.weixin.qq.com/s/vU4iFyHcC8qD1HhJ-jw2Eg 发布时间：2026-05-05 来源：开源项目探索

摘要

awesome-design-md 收集了 65+ 份从真实网站提取的 DESIGN.md 设计规范文件，让 AI 编程助手能按产品风格生成 UI。71k Star，核心理念来自 Google Stitch——把设计系统写成 Markdown，AI 直接读取理解，不依赖任何特定工具。

核心问题

AI 画 UI 很快，但生成结果总是差点意思——ChatGPT 画的界面是 ChatGPT 风格，Claude 画的界面是 Claude 风格，都不是产品该有的风格。不是 AI 不够强，是 AI 根本不知道产品的设计规范是什么。

核心理念来自 Google Stitch

Google Stitch 提出的思路：把设计系统写成 Markdown 文件。不是 Figma 导出，不是 JSON Schema，就是普通的 .md 文件。

文件职责分工：

• AGENTS.md — 告诉 AI 怎么构建项目
• DESIGN.md — 告诉 AI 产品应该长什么样

DESIGN.md 包含：颜色语义、字体层级、组件状态、间距系统、阴影层级、响应式断点、Do's and Don'ts 设计禁忌。

65+ 真实网站设计规范

从真实网站提取，可直接复制使用：

科技公司：

• Vercel — 黑白精准，Geist 字体，极简
• Stripe — 签名紫渐变，weight-300 优雅感
• Linear — 工程师级项目管理，紫色点缀
• Figma — 多彩活力，设计工具专业感
• Supabase — 暗色祖母绿主题，代码优先
• Notion — 暖色极简，衬线标题，柔和界面
• Apple — 大量留白，SF Pro，影像驱动
• Tesla — 极端减法，影院级全屏摄影

奢侈品牌：

• Bugatti 电影级黑色
• Ferrari 红黑明暗对比
• Lamborghini 金色点缀
• BMW M 赛道对比色

每份文件 9 个核心章节

1. 视觉主题与氛围 — 情绪、密度、设计哲学
2. 色彩系统 — 语义化命名、Hex 值、功能定义
3. 字体规范 — 字体族、完整层级对照表
4. 组件样式 — 按钮、卡片、输入框、导航的各状态
5. 布局原则 — 间距系统、网格、留白哲学
6. 深度与层级 — 阴影系统、表面层级
7. 设计禁忌 — Do's and Don'ts
8. 响应式行为 — 断点、触控目标、折叠策略
9. AI 提示指南 — 快捷颜色参考、可复用提示词

每份文件附带 preview.html，可直观查看颜色面板、字体比例、按钮组件真实效果。

使用方式

选一个想要的风格 → 把 DESIGN.md 复制到项目根目录 → 告诉 AI：「按照这个文件的设计规范来构建界面」。不需要插件、配置、特殊工具链。

关键信息

• 项目地址： https://github.com/VoltAgent/awesome-design-md
• Star 数： 71k