开源 10 天就飙到 4 万星，这个项目收集了 58 个知名网站样式。
👉这是一个或许对你有用的社群
🐱 一对一交流/面试小册/简历优化/求职解惑，欢迎加入「芋道快速开发平台」知识星球。下面是星球提供的部分资料：
《项目实战（视频）》：从书中学，往事中“练”
《互联网高频面试题》：面朝简历学习，春暖花开
《架构 x 系统设计》：摧枯拉朽，掌控面试高频场景题
《精进 Java 学习指南》：系统学习，互联网主流技术栈
《必读 Java 源码专栏》：知其然，知其所以然
👉这是一个或许对你有用的开源项目
国产Star破10w的开源项目，前端包括管理后台、微信小程序，后端支持单体、微服务架构
RBAC权限、数据权限、SaaS多租户、商城、支付、工作流、大屏报表、ERP、CRM、AI大模型、IoT物联网等功能：
多模块：https://gitee.com/zhijiantianya/ruoyi-vue-pro
微服务：https://gitee.com/zhijiantianya/yudao-cloud
视频教程：https://doc.iocoder.cn
【国内首批】支持 JDK17/21+SpringBoot3、JDK8/11+Spring Boot2双版本
来源：
DESIGN.md 是什么：给 AI 看的设计规范
awesome-design-md：58 个品牌的设计系统合集
收录了哪些品牌
每个 DESIGN.md 里有什么
怎么用：丢进项目，告诉 AI 照着来
为什么这件事现在才火
这个开源项目解决了一个被忽视已久的问题：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 设计师的日常工作方式。
基于 Spring Boot + MyBatis Plus + Vue & Element 实现的后台管理系统 + 用户小程序，支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能
项目地址：https://github.com/YunaiV/ruoyi-vue-pro
视频教程：https://doc.iocoder.cn/video/
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 的那种运动感设计？同样有。
基于 Spring Cloud Alibaba + Gateway + Nacos + RocketMQ + Vue & Element 实现的后台管理系统 + 用户小程序，支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能
项目地址：https://github.com/YunaiV/yudao-cloud
视频教程：https://doc.iocoder.cn/video/
收录了哪些品牌
目前一共 58 个品牌，分了 8 大类：
覆盖面相当广——AI 工具（Claude、OpenAI、Gemini）、设计工具（Figma、Framer）、SaaS（Notion、Linear、Vercel）、消费品牌（Nike、Apple）、社交平台（Discord、Slack）……基本上你想模仿哪个风格都能找到。
每个 DESIGN.md 里有什么
每个品牌的设计文件都遵循 9 大标准化板块：
视觉主题与氛围— 品牌整体感觉的文字描述
调色板与色彩角色— 主色、辅色、语义色，每个色值都有使用场景说明
排版规范— 字体族、字号层级、行高、字重
组件样式— 按钮、卡片、输入框、导航栏的具体参数
布局原则— 栅格、间距系统、对齐规则
阴影与层级— elevation 定义、模糊半径、颜色
设计禁忌— 明确告诉 AI 什么不能做
响应式规则— 断点定义、移动端适配策略
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 丢进去，效果立竿见影。
欢迎加入我的知识星球，全面提升技术能力。
👉 加入方式，“长按”或“扫描”下方二维码噢：
星球的内容包括：项目实战、面试招聘、源码解析、学习路线。
文章有帮助的话，在看，转发吧。 谢谢支持哟 (*^__^*）