总阅读量:次

⭐⭐⭐ Spring Boot 项目实战 ⭐⭐⭐ Spring Cloud 项目实战
《Dubbo 实现原理与源码解析 —— 精品合集》 《Netty 实现原理与源码解析 —— 精品合集》
《Spring 实现原理与源码解析 —— 精品合集》 《MyBatis 实现原理与源码解析 —— 精品合集》
《Spring MVC 实现原理与源码解析 —— 精品合集》 《数据库实体设计合集》
《Spring Boot 实现原理与源码解析 —— 精品合集》 《Java 面试题 + Java 学习指南》

摘要: 原创出处 http://www.iocoder.cn/Fight/kaiyuan-10-tianjiubiaodao-4-wanxingzheigexiangmushoujile-58-gezhimingwangzhanyangshi/ 「芋道源码」欢迎转载，保留摘要，谢谢！

🙂🙂🙂关注微信公众号：【芋道源码】有福利：

  1. RocketMQ / MyCAT / Sharding-JDBC 所有源码分析文章列表
  2. RocketMQ / MyCAT / Sharding-JDBC 中文注释源码 GitHub 地址
  3. 您对于源码的疑问每条留言都将得到认真回复。甚至不知道如何读源码也可以请教噢。
  4. 新的源码解析文章实时收到通知。每周更新一篇左右。
  5. 认真的源码交流微信群。

这个开源项目解决了一个被忽视已久的问题：AI 写代码越来越像样了，但 AI 生成的界面，依然丑得让人不忍直视。

最近刷 X 看到它，10 天不到拿了 4 万 Star，火得一塌糊涂。

它做的事情精准到让人拍大腿：把 Nike、Claude、Notion、Figma 这些大牌网站的设计系统全部提取出来，做成 AI 能直接读懂的 Markdown 文件。

你丢一个到项目里，告诉 AI”照着这个风格来”，出来的界面就跟原版一样精致。比如基于 Claude 设计规范 DESIGN.md 生成的网页：

DESIGN.md 是什么：给 AI 看的设计规范

DESIGN.md 是 Google Stitch 最近提出的概念——用纯 Markdown 描述一个网站的视觉语言，包括颜色、字体、间距、阴影、组件样式。格式天然适合 AI 阅读。

跟 AGENTS.md 类比就明白了：

文件 告诉 AI 什么 管什么
AGENTS.md 怎么写代码 功能和规范
DESIGN.md 界面长什么样 颜值和体验

一个管功能，一个管颜值。 两者配合，AI 出的东西才能既跑得起来又拿得出手。

以前设计师出设计稿，需要从组件库里找组件，根据业务需求拼起来。这个流程完全可以标准化——把所有设计规范沉淀成一个 DESIGN.md，后面想出图口喷一下就好了。短期内这个理念一定会重塑 UI/UX 设计师的日常工作方式。

awesome-design-md：58 个品牌的设计系统合集

项目叫 awesome-design-md，VoltAgent 团队做的。目前 4 万+ Star。

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

一句话定位：把 58 个知名品牌的完整设计规范，全部转成 AI 可读的 DESIGN.md 格式。

你想让 AI 生成一个 Notion 风格的界面？找到 Notion 的 DESIGN.md，丢进项目上下文，搞定。想要 Nike 的那种运动感设计？同样有。

收录了哪些品牌

目前一共 58 个品牌，分了 8 大类：

覆盖面相当广——AI 工具（Claude、OpenAI、Gemini）、设计工具（Figma、Framer）、SaaS（Notion、Linear、Vercel）、消费品牌（Nike、Apple）、社交平台（Discord、Slack）……基本上你想模仿哪个风格都能找到。

每个 DESIGN.md 里有什么

每个品牌的设计文件都遵循 9 大标准化板块：

  1. 视觉主题与氛围 — 品牌整体感觉的文字描述
  2. 调色板与色彩角色 — 主色、辅色、语义色，每个色值都有使用场景说明
  3. 排版规范 — 字体族、字号层级、行高、字重
  4. 组件样式 — 按钮、卡片、输入框、导航栏的具体参数
  5. 布局原则 — 栅格、间距系统、对齐规则
  6. 阴影与层级 — elevation 定义、模糊半径、颜色
  7. 设计禁忌 — 明确告诉 AI 什么不能做
  8. 响应式规则 — 断点定义、移动端适配策略
  9. AI Agent 提示词指南 — 专门给 AI 的额外指令

不是那种泛泛的描述，是非常精确的设计 Token。比如 Vercel 的文件里记录了标志性的阴影描边 box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.08)，Linear 记录了 Inter 字体 Weight 510 这个标志性字重。这些参数都从真实网站 CSS 里提取，不是凭感觉写的。

另外每个品牌文件夹里还自带 preview.html 和 preview-dark.html，浏览器直接打开就能看到色板、字体、按钮、卡片的实际效果，明暗两套主题都有。

怎么用：丢进项目，告诉 AI 照着来

三步搞定，不需要装任何依赖，不需要跑任何构建命令：

Step 1：从仓库里找到你想要的品牌 DESIGN.md 文件

Step 2：复制到你的项目根目录

Step 3：告诉 AI 照着这个规范来生成 UI

不同 AI 工具配合方式略有不同：

AI 工具 用法
Cursor 放到项目根目录，在 Composer 里提及
Claude Code 作为上下文文件引用
v0 / Bolt.new 直接粘贴 DESIGN.md 内容到 prompt
Google Stitch 原生支持 DESIGN.md 格式

关键是不需要你懂设计——选一个你喜欢的品牌风格，AI 帮你搞定剩下的事。想要的品牌还没收录？去 GitHub 开 Issue 提需求即可。

为什么这件事现在才火

两个原因。

第一，AI 代码生成能力到位了。 一年前 AI 生成的前端代码还是一坨 div 套 div，现在的 Claude/GPT-4 已经能生成结构合理、语义化的 UI 代码。能力到位了，才有”按设计规范生成”的可能。

第二，AGENTS.md 先行铺路。 程序员已经接受了”给 AI 写一份项目规则文件”的习惯，DESIGN.md 只是把同样的思路延伸到了设计领域。心智模型已经建立好了，新工具自然容易推广。

底线结论：如果你在用 AI 写前端，但每次出来的界面都像十年前的 Bootstrap 模板，试试这个项目。选一个你喜欢的品牌 DESIGN.md 丢进去，效果立竿见影。

文章目录
  1. 1. DESIGN.md 是什么：给 AI 看的设计规范
  2. 2. awesome-design-md：58 个品牌的设计系统合集
  3. 3. 收录了哪些品牌
  4. 4. 每个 DESIGN.md 里有什么
  5. 5. 怎么用：丢进项目，告诉 AI 照着来
  6. 6. 为什么这件事现在才火