快速摘要
如果你正在用 AI 编程助手（Cursor、Claude Code、Lovable 等）生成前端 UI，却总觉得出来的界面"千篇一律"或"差点意思"，这篇文章值得你认真看完。 核心结论是：一个叫DESIGN.md的纯 Markdown 文件，正在成为 AI 编码代理理解"设计系统"的通用接口。开源项目 awesome-design-md 提供了 55+ 份从真实网站反向工程提取的设计系统文件，覆盖 Stripe、Vercel、Linear、Notion、Figma 等全球知名产品。你只需要把其中一份复制到项目根目录，AI 就能按照对应品牌的配色、字体、间距、组件风格来生成 UI——零安装、零配置、零学习成本。往下看，莫潇羽@源码七号站 会带你从底层原理到具体操作，一步步拆解这个项目。
一、问题的起点：AI 写代码很快，但 UI 总是"不对味"
如果你有过让 AI 帮你写前端页面的经历，大概率会遇到这样的困境——
你跟 AI 说"帮我做一个好看的落地页"，它给你生成了一个功能完整、逻辑清晰的页面，但视觉上总有一种说不清的廉价感。按钮的圆角大了一点，配色灰蒙蒙的，字体层级不够分明，间距也没有节奏感。你想让它"更像 Stripe 官网那种感觉"，但 AI 并不真正理解"Stripe 感"到底意味着什么——是那种标志性的紫色渐变？是 font-weight 300 的纤细优雅？还是超大的留白和精心控制的信息密度？
这个问题的根源在于：AI 编码代理在生成 UI 时缺少持久化的设计上下文。 每次你发出一个新的提示（prompt），AI 都是从零开始推断界面应该长什么样。它没有一个统一的"设计系统"可以参照，自然就会在不同组件之间产生风格不一致的问题。你让它做一个按钮，用的是蓝色；再让它做一个卡片，可能就变成了灰色底加阴影——两个组件放在一起，怎么看怎么别扭。
传统的解决方案是手写一份设计规范文档，或者在 Figma 里搭建一套完整的设计系统，然后在每次 prompt 中反复提醒 AI 去参照。但这实在太麻烦了，而且 AI 的上下文窗口有限，长篇大论的规范文档很容易被"遗忘"。
有没有一种更轻量、更直接的方式，让 AI 在生成每一行 CSS 之前，就已经"内化"了一套完整的视觉语言？
莫潇羽@源码七号站 在实际开发中对这个问题深有体会。很多时候我让 AI 帮忙写一个表单页面，结果按钮的颜色跟前一个页面完全不同，字体大小也变了，间距更是随机的。手动修一个按钮的 CSS，下一次生成又回到了"AI 自由发挥"的状态。如果你也有过类似经历，那接下来要介绍的方案一定会让你眼前一亮。
更深层的问题还在于：大多数 AI 编码代理在生成前端代码时，默认采用的是训练数据中最常见的视觉模式——也就是那些你经常在各种教程和模板中看到的"万金油"样式。蓝色主色调、白色背景、6px 圆角、Material Design 风格的阴影……这些元素组合在一起，确实能做出一个"看起来还行"的页面，但放在任何品牌语境下都显得毫无个性。更致命的是，不同提示词生成的组件之间缺乏统一的视觉逻辑，放在同一个产品里就像是从不同模板拼凑出来的"缝合怪"。
还有一个开发者经常踩的坑：你在第一轮对话中告诉 AI "我要 Stripe 风格的紫色主色调"，AI 记住了。但到了第三轮对话让它做一个新的组件时，这个上下文可能已经超出了 AI 的记忆窗口，于是它又开始"自由发挥"了。这就是为什么仅靠 prompt 描述设计风格是不够的——你需要一种能被 AI 持久化读取的机制来承载设计系统。
答案就是 DESIGN.md。
二、DESIGN.md 是什么？——一个写给 AI 看的设计系统
2.1 概念的由来
DESIGN.md 这个概念最初由 Google 的 Stitch 团队提出。Stitch 是 Google Labs 推出的一款 AI 驱动的 UI 设计工具，底层基于 Gemini 模型，用户可以通过自然语言描述来生成高保真的 UI 界面。2026 年 3 月，Stitch 进行了一次重大更新，从一个简单的 UI 生成器进化为一个 AI 原生的软件设计画布（AI-native software design canvas），引入了无限画布、语音交互、设计代理等功能，而其中最具深远影响的更新之一就是 DESIGN.md 的引入。
在 Stitch 的工作流程中，有一个关键机制：每次用户发出设计请求时，Stitch 不仅会读取用户的提示词，还会同时读取项目中的 DESIGN.md 文件。这个文件里记录了项目的配色方案、字体规则、间距体系、组件样式等所有视觉规范。Gemini 模型会将这些规范作为约束条件，确保生成的每一个界面都符合同一套设计语言。
这意味着什么呢？意味着你在 Stitch 中生成第一个页面和第十个页面时，它们之间的视觉一致性是有保障的——因为 AI 每次生成之前都会"复习"一遍你的设计系统。
更重要的是，DESIGN.md 是一个可移植的文件。它不被锁定在 Stitch 平台内部，而是可以"随身携带"到任何支持 Markdown 上下文的 AI 编码工具中。你可以在 Stitch 中导出它，然后在 Cursor、Claude Code、GitHub Copilot Workspace 甚至任何自定义 AI 代理中使用它。这种跨平台的可移植性，是 DESIGN.md 概念真正的杀手锏。
Stitch 还支持从任何现有网站的 URL 自动提取设计规则，生成对应的 DESIGN.md 文件。这个功能直接启发了 awesome-design-md 项目的诞生——既然 AI 可以从网站中提取设计系统，为什么不把全球知名品牌的设计系统都提取出来，做成一个开源的"设计系统大礼包"呢？
莫潇羽@源码七号站 觉得用一句话概括最合适：DESIGN.md 就是写给 AI 看的设计系统文档。
如果你熟悉前端开发中的 README.md（告诉人类这个项目是什么）和 AGENTS.md（告诉 AI 代理怎么构建这个项目），那么 DESIGN.md 的定位就很清楚了——它告诉 AI 代理"这个项目应该长什么样、给人什么感觉"。
2.2 为什么是 Markdown 格式？
你可能会好奇：设计系统不是通常用 JSON（Design Tokens）或者 Figma 文件来承载的吗？为什么要用 Markdown？
这里有几个很实际的考虑。首先，Markdown 是大语言模型（LLM）最擅长理解的文本格式。标题表示层级，列表表示枚举，加粗表示重点——这些语义信号对 LLM 来说非常直观，不需要额外的解析器。其次，Markdown 是纯文本，任何编辑器都能打开，不依赖任何特定工具链。你可以用 VS Code 编辑它，可以用 Git 进行版本管理，可以在 Code Review 中讨论每一个设计决策的变更。再者，Markdown 文件足够紧凑，可以轻松放进 AI 的上下文窗口而不会占用太多 token 额度。
相比之下，JSON 格式的 Design Token 虽然机器可读，但人类阅读起来并不友好。而 Figma 文件则完全无法被 AI 编码代理直接读取——你需要通过 MCP（Model Context Protocol）之类的中间层来桥接，这增加了工程复杂度。
DESIGN.md 的精妙之处在于：它同时对人类和 AI 可读，而且不需要任何额外的工具或配置。
2.3 一份 DESIGN.md 里到底有什么？
根据 Google Stitch 的官方规范以及 awesome-design-md 项目的实践，一份标准的 DESIGN.md 通常包含以下几个核心部分：
第一部分：视觉主题与氛围（Visual Theme & Atmosphere）
这部分用描述性的语言勾勒出整个产品的视觉调性。比如"深色背景、霓虹色点缀、电影级质感"或者"温暖的米白色底、大面积留白、编辑风排版"。这些描述帮助 AI 在整体层面理解界面应该给人的感受，而不仅仅是机械地套用色值。
第二部分：色彩体系与角色（Color Palette & Roles）
这是最核心的部分之一。它不仅列出颜色的十六进制色值，还会标注每种颜色的功能角色和使用场景。比如：
## Color Palette
- Primary Action — #635BFF (Stripe Purple) — 用于主按钮、关键交互元素、链接
- Surface Background — #F6F9FC — 页面背景和卡片底色
- Text Primary — #0A2540 — 正文和标题文字
- Status Error — #DF1B41 — 仅用于错误状态和破坏性操作
- Accent Gradient — linear-gradient(135deg, #635BFF, #0073E6) — 英雄区和重要 CTA注意这里的关键：每个颜色都带有语义化命名和使用说明。这样 AI 就不会把品牌紫用在装饰性的背景上，也不会在非错误场景中使用红色。
第三部分：排版规则（Typography Rules）
指定字体族、各级标题的字号和字重、正文的行高和字间距等。比如：
## Typography
- Font Family: Inter, -apple-system, sans-serif
- H1: 48px / font-weight: 600 / letter-spacing: -0.02em
- H2: 36px / font-weight: 600 / letter-spacing: -0.01em
- Body: 16px / font-weight: 400 / line-height: 1.6
- Caption: 13px / font-weight: 400 / color: Text Secondary第四部分：间距与布局原则（Spacing & Layout）
定义基础栅格、间距级别、容器宽度、对齐方式等。比如使用 8px 为基础单元的间距体系：4、8、12、16、24、32、48px。
第五部分：组件样式（Component Styles）
描述按钮、卡片、输入框、导航栏、弹窗等常见组件的具体视觉规格。包括圆角大小、阴影深度、边框样式、悬停状态等。比如：
## Components
### Buttons
- Primary: 背景 #635BFF，文字 #FFFFFF，圆角 6px，padding 12px 24px
- Secondary: 边框 1px solid #E0E0E0，文字 #0A2540，圆角 6px
- Hover: 亮度提升 5%，transition 150ms ease
### Cards
- 背景 #FFFFFF，圆角 12px，阴影 0 2px 8px rgba(0,0,0,0.08)
- 内边距 24px，悬停阴影加深第六部分（可选）：正反面约束（Do's and Don'ts）
一些高质量的 DESIGN.md 还会包含明确的"不要"规则。比如"卡片不要使用阴影，用 1px 边框代替""按钮标签使用 sentence case，不要用 title case""同一屏幕最多使用两种字体"。这些负向约束对防止 AI "自由发挥"特别有效。
三、awesome-design-md 项目深度解析
3.1 项目定位与背景
理解了 DESIGN.md 的概念之后，我们来看 awesome-design-md 这个开源项目到底做了什么。
项目地址：https://github.com/VoltAgent/awesome-design-md
这个项目的核心工作可以用一句话概括：从 55+ 个真实的知名网站上，反向工程提取出它们的视觉设计体系，然后用标准的 DESIGN.md 格式记录下来，供所有 AI 编码代理使用。
也就是说，你不需要自己去分析 Stripe 官网用了什么颜色、什么字体、什么间距——这个项目已经帮你做好了。你只需要把对应的 DESIGN.md 文件复制到你的项目里，AI 就能"理解"并"复现"那个品牌的视觉语言。
3.2 项目的技术原理
这里莫潇羽@源码七号站 重点拆解一下它的技术实现思路——
反向工程的过程大致是这样的：
首先，针对目标网站，通过浏览器开发者工具（DevTools）提取页面上公开可见的 CSS 属性值，包括颜色值（十六进制、RGB、HSL）、字体族和字重、间距和尺寸、圆角和阴影、渐变和动画参数等。这个过程并不是简单地复制 CSS 代码，而是要理解每个视觉元素在设计系统中的角色——比如某个蓝色到底是品牌主色、链接颜色还是信息提示色？某个 24px 的间距是组件内边距还是模块之间的分隔？
然后，将这些原始的技术数据翻译成语义化的描述。比如 #635BFF 不仅仅是一个颜色代码，而是"Stripe 标志性的紫色，用于主要交互元素"。font-weight: 300 不仅仅是一个 CSS 属性，而是"品牌标志性的纤细字重，传达技术优雅感"。这个翻译过程需要对目标品牌的设计语言有深入理解，不是简单的数据搬运——它需要有人能"读懂"一个品牌的视觉叙事。
接着，按照 Stitch DESIGN.md 的标准格式进行结构化整理，确保覆盖视觉主题、色彩体系、排版规则、间距原则、组件样式等核心部分。每一份 DESIGN.md 都经过了反复打磨，力求在保持可读性的同时，包含足够的技术细节让 AI 能够精确执行。
最后，每个设计系统还配套提供了 preview.html（浅色主题预览）和 preview-dark.html（深色主题预览），方便你在使用之前直观地看到效果。这些预览页面是用 DESIGN.md 中定义的设计规范实际生成的，相当于一个活的"视觉样本"，让你在决定采用某个设计风格之前就能看到它应用在真实组件上的效果。
为什么"语义化翻译"这一步如此重要？
莫潇羽@源码七号站 需要在这里特别强调一点：awesome-design-md 项目的真正价值不在于"提取了 CSS 数据"——任何人用 DevTools 都能做到这一点。它的价值在于将原始的技术数据翻译成了 AI 可理解、可执行的语义化指令。
举个例子，如果你直接把 background-color: #0A2540 扔给 AI，AI 知道这是一个深蓝色，但不知道它应该用在哪里、什么时候用、跟其他颜色怎么搭配。但如果你告诉 AI "Deep Navy (#0A2540) — 用于主标题和深色文字，传达权威和专业感，与 Light Surface (#F6F9FC) 形成对比"，AI 就有了完整的使用上下文，在生成代码时自然会把正确的颜色用在正确的地方。
这种"从技术参数到设计意图"的翻译，正是 DESIGN.md 区别于传统 CSS 变量文件或 JSON Token 文件的关键所在。
需要特别说明的是： 这些 DESIGN.md 文件提取的是目标网站公开可见的视觉特征（CSS 变量和属性值），并不是官方的设计系统文档。项目仓库也明确声明"不声称拥有任何网站的视觉标识的所有权"。它更像是一种"视觉参考"或"风格灵感"，而非精确到像素的官方规范。
3.3 覆盖的品牌列表
目前项目已经覆盖了 55+ 个品牌，横跨多个行业领域。莫潇羽@源码七号站 按领域梳理了一些代表性的品牌，方便你根据自己的项目需求快速定位：
AI 与开发工具领域
这是覆盖最密集的领域。包括 Cursor（深色渐变、AI 代码编辑器风格）、Linear（超精准极简、紫色点缀）、Vercel（黑白精准、Geist 字体）、Supabase（深色祖母绿、开源 Firebase 风格）、Raycast（深色铬合金、生产力工具风格）、PostHog（俏皮的刺猬品牌、开发者友好深色 UI）、Mintlify（绿色点缀、阅读优化）等。如果你正在开发面向开发者的 SaaS 产品或工具类网站，这些是最直接可用的参考。其中 Linear 的设计系统被很多开发者社区奉为"极简设计的教科书"——它的紫色不是那种跳跃的紫，而是一种沉稳的、带有工程精密感的紫色，搭配极度克制的排版和超精准的像素对齐，传达出一种"这个产品背后的团队对细节有极致追求"的信号。
还有 Lovable（活力渐变、友好的开发者美学）、Expo（深色主题、紧凑字间距、代码优先）、Warp（现代终端风格、块级命令 UI）等，这些品牌虽然知名度不如 Vercel 和 Stripe，但它们的设计系统各有特色，如果你的产品定位与它们相近，反而能获得更精准的视觉参考。
设计与协作工具
Figma（多彩专业）、Notion（温暖极简、衬线标题）、Miro（亮黄无限画布）、Framer（黑蓝、动效优先）、Webflow（蓝色抛光营销风）等。这些适合内容型产品和创意工具类项目。Notion 的设计风格特别值得研究——它大量使用衬线体作为标题字体（这在科技产品中并不常见），搭配柔和的米色背景和圆润的界面元素，营造出一种"纸质笔记本"的温暖感。这种设计策略背后的思考是：作为一个笔记和知识管理工具，Notion 希望让用户感觉自己在使用一个"有人情味的"产品，而不是一个冰冷的效率工具。这类设计思路，光看官网可能感受不深，但通过阅读其 DESIGN.md 文件中的视觉主题描述和字体选择理由，你会有更深刻的理解。
基础设施与云服务
Stripe（标志性紫色渐变、font-weight 300 优雅感）、MongoDB（绿叶品牌）、HashiCorp（企业级黑白）、ClickHouse（黄色点缀、技术文档风格）等。如果你的产品面向企业客户或开发者，这些风格非常值得参考。Stripe 的设计系统在行业内几乎是"支付类产品视觉设计"的标杆，它通过精致的渐变、纤细的字重和克制的配色，成功地将一个本质上是"收钱工具"的产品包装成了一个"技术美学"的代名词。
消费品牌
Apple（极致留白、SF Pro 字体）、Airbnb（温暖珊瑚色、摄影驱动）、Spotify（深色背景、霓虹绿、专辑艺术驱动）、Uber（黑白、紧凑排版）、Pinterest（红色点缀、瀑布流布局）等。这些设计系统背后蕴含着消费品牌对用户心理的精准把握。以 Spotify 为例，它的设计系统以近乎纯黑的背景为基底，搭配高饱和度的霓虹绿和大胆的排版，这种视觉策略是为了最大程度地突出专辑封面艺术——毕竟对于一个音乐平台来说，内容（音乐）才是主角，界面本身应该"退到幕后"。如果你的产品也是内容驱动型的，Spotify 的这种设计思路非常值得借鉴。
金融科技
Coinbase（清爽蓝色、信任导向）、Revolut（深色渐变、金融科技精密感）、Wise（亮绿色、友好清晰）、Kraken（紫色深色 UI、数据密集型仪表盘）等。金融科技产品的设计有一个共性需求——传达"信任感"和"安全感"。你会发现这些品牌的配色普遍偏向冷色调（蓝色、紫色），界面元素的线条更加硬朗精准，信息呈现更加结构化，很少使用过于活泼或随意的视觉元素。这些设计选择都不是随意的，而是服务于"让用户放心把钱交给这个产品"这一核心目标。
汽车品牌
BMW（深色德系精密）、Ferrari（明暗对比法拉利红）、Lamborghini（纯黑底金色点缀）、Tesla（激进减法、全视口摄影）、Renault（极光渐变、NouvelR 字体）等。
其他值得关注的
SpaceX（黑白未来感）、NVIDIA（绿黑能量感）、Zapier（温暖橙色、插画驱动）、Superhuman（高端深色 UI、键盘优先）、Intercom（友好蓝色、对话式 UI）等。
3.4 DESIGN.md 的文件结构示例
为了让你更直观地理解一份 DESIGN.md 长什么样，这里给出一个简化的结构示例（以 Stripe 风格为参考）：
# Design System: Stripe-Inspired
## 1. Visual Theme & Atmosphere
宇宙级深色与明亮白色的对比，搭配标志性的紫色渐变。整体氛围精致、
专业、略带未来感。信息密度适中，大量使用留白来引导视觉焦点。
字体纤细（weight-300），传达技术优雅感。
## 2. Color Palette & Roles
- Brand Purple (#635BFF) — 主操作按钮、链接、关键交互
- Deep Navy (#0A2540) — 主标题、深色文字
- Light Surface (#F6F9FC) — 页面背景、卡片底色
- White (#FFFFFF) — 卡片背景、输入框背景
- Muted Gray (#6B7C93) — 次要文字、辅助说明
- Success Green (#0CBF4C) — 成功状态
- Error Red (#DF1B41) — 错误状态、危险操作
## 3. Typography Rules
- Font Family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
- Hero Title: 54px / weight-600 / letter-spacing: -0.03em
- Section Title: 36px / weight-600 / letter-spacing: -0.02em
- Body: 17px / weight-400 / line-height: 1.7
- Small Text: 14px / weight-400
## 4. Spacing & Layout
- Base Unit: 8px
- Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96px
- Max Content Width: 1080px
- Section Padding: 96px vertical, 24px horizontal
## 5. Component Styles
### Buttons
- Primary: bg #635BFF, text #FFF, border-radius 6px, padding 10px 18px
- Secondary: border 1px solid #E3E8EE, text #0A2540, border-radius 6px
- Hover: brightness +8%, box-shadow 0 4px 12px rgba(99,91,255,0.25)
### Cards
- bg #FFFFFF, border-radius 12px
- box-shadow: 0 2px 8px rgba(0,0,0,0.08)
- padding: 32px, hover shadow 加深
### Inputs
- border: 1px solid #E3E8EE, border-radius 6px
- padding: 10px 14px, focus: border-color #635BFF
## 6. Do's and Don'ts
- ✅ 使用渐变作为英雄区的视觉焦点
- ✅ 保持字体纤细（weight 300-400 为主）
- ✅ 大面积留白，让内容"呼吸"
- ❌ 不要在同一屏使用超过两种颜色作为背景
- ❌ 不要在非交互元素上使用品牌紫
- ❌ 不要使用投影过重的阴影，保持轻盈感这只是一个简化演示。实际项目中的 DESIGN.md 文件通常更加详尽，会覆盖更多的组件类型、状态变体和响应式规则。
四、实操指南：从零开始使用 awesome-design-md
好了，原理讲完了，接下来莫潇羽@源码七号站 带你进入实操环节。整个流程非常简单，几乎没有学习成本。
4.1 第一步：选择一个设计风格
首先，访问项目仓库 https://github.com/VoltAgent/awesome-design-md ，浏览 design-md 目录下的品牌列表。每个品牌对应一个子目录，里面包含：
DESIGN.md— 核心的设计系统文件preview.html— 浅色主题效果预览preview-dark.html— 深色主题效果预览（如有）
你可以先打开 preview.html 看看效果，确认这个品牌的视觉风格是否符合你的项目需求。
4.2 第二步：将 DESIGN.md 放入项目
选好之后，有两种方式获取文件。
方式一：直接下载单个文件
如果你只需要某一个品牌的设计系统，最简单的方式是直接从 GitHub 上复制文件内容。以 Vercel 风格为例：
# 直接访问原始文件地址并下载到项目根目录
curl -o DESIGN.md https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/vercel/DESIGN.md或者你也可以直接在 GitHub 页面上点击 DESIGN.md 文件，点击 "Raw" 按钮查看原始内容，然后复制粘贴到你的项目根目录下新建的 DESIGN.md 文件中。
方式二：克隆整个仓库
如果你想浏览和比较多个品牌的设计系统，可以克隆整个仓库：
git clone https://github.com/VoltAgent/awesome-design-md.git
cd awesome-design-md
# 然后从中挑选你需要的文件复制到项目中
cp design-md/stripe/DESIGN.md /path/to/your/project/DESIGN.md文件放好之后，你的项目目录结构大致如下：
your-project/
├── DESIGN.md ← 设计系统文件
├── src/
├── package.json
├── README.md
└── ...4.3 第三步：让 AI 编码代理读取并使用
这一步是关键——你需要让你的 AI 编码工具知道 DESIGN.md 的存在，并在生成 UI 时参照它。不同工具的配置方式略有不同。
搭配 Cursor 使用
Cursor 有一套规则系统（Rules），可以让 AI 在每次生成代码时自动加载特定的上下文。具体做法是在项目根目录下创建 .cursor/rules 文件夹，然后在里面添加一个规则文件：
# 在项目根目录下
mkdir -p .cursor/rules然后创建一个规则文件（比如 design-system.mdc），内容如下：
---
description: "UI 开发时自动引用设计系统"
globs: ["**/*.tsx", "**/*.jsx", "**/*.css", "**/*.html", "**/*.vue"]
---
在生成或修改任何 UI 相关代码时，必须严格遵循项目根目录下的 DESIGN.md 文件中定义的设计规范。
包括但不限于：配色方案、字体规则、间距体系、组件样式、视觉氛围。
不要使用 DESIGN.md 中未定义的颜色或字体。这样，当你在 Cursor 中编辑 .tsx、.jsx、.css 等前端文件时，AI 会自动将 DESIGN.md 的内容纳入上下文，据此生成一致的 UI 代码。
搭配 Claude Code 使用
Claude Code 使用 CLAUDE.md 文件作为项目级的持久化指令文件。你只需要在项目根目录的 CLAUDE.md 中添加对 DESIGN.md 的引用：
# CLAUDE.md
## 设计系统
本项目的所有 UI 开发必须严格遵循 `DESIGN.md` 中定义的设计规范。
在生成任何前端组件、页面或样式时，请先阅读 `DESIGN.md` 并确保：
- 所有颜色值来自文件中定义的色彩体系
- 字体、字号、字重严格按照排版规则
- 间距使用文件中定义的 spacing scale
- 组件样式（按钮、卡片、输入框等）遵循指定的圆角、阴影、边框规范配置完成后，每次你在终端中运行 claude 命令并提出 UI 相关的需求，Claude Code 都会先读取 CLAUDE.md，进而引用 DESIGN.md，确保生成的代码风格一致。
搭配 Google Stitch 使用
Stitch 原生支持 DESIGN.md。如果你在 Stitch 项目中放入了 DESIGN.md 文件，Stitch 会在生成每一个界面时自动读取该文件。你不需要做任何额外配置——这本来就是 DESIGN.md 概念诞生的地方。
搭配 Lovable / Bolt / 其他 AI 编码工具
对于其他 AI 编码工具，通用的做法是在你的提示词（prompt）中明确指向 DESIGN.md：
请按照项目根目录下 DESIGN.md 中定义的设计系统，帮我创建一个定价页面。
使用文件中指定的配色、字体和组件样式，不要自行发挥。部分工具（如 Kiro、Windsurf 等）也支持类似的项目级指令文件，你可以在对应的配置文件中引用 DESIGN.md。
4.4 第四步：验证效果并迭代
生成代码之后，建议通过以下方式验证 AI 是否真的遵循了设计系统：
打开浏览器的开发者工具（F12 或右键"检查"），选中关键元素，在 Styles 面板中检查颜色值是否与 DESIGN.md 中定义的一致。查看 Computed 面板中的字体族、字号、字重是否正确。使用盒模型视图测量 padding 和 margin 是否符合定义的 spacing scale。
这里有一个实用的验证技巧：你可以在浏览器控制台中快速检查所有使用到的颜色值是否在你的设计系统范围内。当然最直觉的方式还是"目视对比"——把 AI 生成的页面和目标品牌的官网放在一起看，差距一目了然。
如果发现偏差，可以直接在 prompt 中纠正，比如"按钮的背景色应该是 #635BFF，不是 #5B4FFF，请按照 DESIGN.md 修正"。更高效的做法是在纠正的同时加一句强化指令："之后所有的 UI 生成都请严格参照 DESIGN.md，不要使用文件中未定义的颜色值。"
经过几轮迭代之后，你会发现 AI 对 DESIGN.md 的"记忆"越来越稳定，生成的界面一致性也会越来越高。莫潇羽@源码七号站 的经验是，通常 2-3 轮纠正之后，AI 就能比较稳定地遵循设计系统了。
4.5 小贴士：如何让 AI 更好地遵循 DESIGN.md
在实际使用中，有一些小技巧可以提升 AI 对 DESIGN.md 的遵从度：
第一个技巧是"显式引用"。在每次涉及 UI 的 prompt 中，都明确提到 DESIGN.md。比如不要只说"帮我做一个按钮组件"，而是说"按照 DESIGN.md 中 Components > Buttons 部分定义的样式，帮我做一个 Primary 按钮组件"。这种显式引用能让 AI 把注意力集中在设计规范上，而不是靠自己的"创造力"来猜测。
第二个技巧是"先描述后生成"。在让 AI 生成复杂页面之前，可以先让它"复述"一下 DESIGN.md 中的关键规范。比如"请先阅读 DESIGN.md，然后告诉我这个项目的主色调是什么、标题字体是什么、按钮的默认圆角是多少。确认之后再开始生成页面代码。"这个步骤看起来多此一举，但能有效减少 AI "跳过"设计规范直接动手的概率。
第三个技巧是"组件级生成"。不要一次性让 AI 生成整个页面的所有代码，而是拆分成一个个独立的组件——先做 Button，再做 Card，再做 NavBar，最后再组装成页面。每个组件独立生成时，AI 的注意力更集中，遵循 DESIGN.md 的准确度也更高。
第四个技巧是利用 Tailwind CSS 的自定义配置。如果你的项目使用了 Tailwind CSS，可以先根据 DESIGN.md 中的色彩和间距定义生成一份 tailwind.config.js，把设计 token 写成 Tailwind 的自定义变量。这样 AI 在生成 Tailwind 类名时，天然就被限制在你的设计系统范围内。提示词可以这样写：
请根据 DESIGN.md 中定义的色彩体系和间距规则，帮我生成一份 tailwind.config.js，
将所有品牌颜色映射为 Tailwind 的 extend.colors，间距映射为 extend.spacing。五、进阶用法：自己制作 DESIGN.md
5.1 从现有网站提取
如果你想为一个不在 awesome-design-md 列表中的网站创建 DESIGN.md，有几种途径可以选择。
通过 Google Stitch 提取： 如果你有 Stitch 的使用权限，可以直接输入目标网站的 URL，Stitch 会自动分析页面的配色、字体、间距等视觉特征，并生成对应的 DESIGN.md 文件。
通过 AI 辅助手动提取： 你可以先用浏览器开发者工具收集目标网站的关键 CSS 属性（颜色变量、字体规则、间距值等），然后将这些数据交给 AI，让它按照标准格式整理成 DESIGN.md。参考 prompt 如下：
我从某个网站提取了以下 CSS 变量和属性值：
[粘贴你提取的数据]
请按照 Google Stitch DESIGN.md 的标准格式，将这些数据整理成一份完整的
DESIGN.md 文件，包含以下部分：
1. Visual Theme & Atmosphere
2. Color Palette & Roles
3. Typography Rules
4. Spacing & Layout
5. Component Styles
6. Do's and Don'ts
每个颜色需要标注语义化名称和使用场景。通过社区请求： awesome-design-md 项目支持通过 GitHub Issue 提交新网站的设计系统提取请求。你只需要按照模板提交一个 Issue，附上目标网站的 URL，维护团队会根据情况进行处理。
5.2 从零编写自己的设计系统
如果你的项目有独特的品牌视觉，你也可以从零编写自己的 DESIGN.md。莫潇羽@源码七号站 的建议是按照以下优先级逐步完善：
第一步，先定义色彩和排版。这两个视觉系统对一致性的影响最大。把你的主色、辅助色、中性色、功能色（成功/警告/错误/信息）全部列出来，并为每个颜色标注语义角色和使用场景。排版方面，确定字体族、各级标题和正文的字号/字重/行高。
第二步，添加间距和布局规则。定义你的基础间距单元（推荐 8px），列出常用的间距级别和容器宽度。
第三步，描述核心组件的样式。从最常用的组件开始：按钮、卡片、输入框、导航栏。每个组件描述清楚默认状态、悬停状态和聚焦状态的视觉表现。
第四步，在实际使用中补充"不要"规则。跑几轮 AI 生成之后，你会发现 AI 在某些地方总是"犯同样的错"。把这些问题记录下来，写成明确的负向约束加入 DESIGN.md。
这里给出一个从零编写 DESIGN.md 的起步模板，你可以在此基础上根据自己的品牌需求进行修改：
# Design System: [你的项目名称]
## 1. Visual Theme & Atmosphere
[用 2-3 句描述性语言概括整体视觉调性。
比如"现代科技感、深色背景为主、蓝色系点缀、
信息密度适中、大量留白引导视觉焦点"。]
## 2. Color Palette & Roles
- Primary (#你的主色) — 主操作按钮、链接、关键交互
- Secondary (#辅助色) — 次要按钮、标签、辅助元素
- Background (#背景色) — 页面主背景
- Surface (#表面色) — 卡片、面板背景
- Text Primary (#主文字色) — 标题和正文
- Text Secondary (#辅助文字色) — 说明文字、次要信息
- Success (#成功色) — 成功状态提示
- Warning (#警告色) — 警告状态
- Error (#错误色) — 错误和危险操作
## 3. Typography Rules
- Font Family: [你的字体族，如 Inter, "PingFang SC", sans-serif]
- H1: [字号]px / weight-[字重] / letter-spacing: [字间距]
- H2: [字号]px / weight-[字重]
- Body: [字号]px / weight-[字重] / line-height: [行高]
- Caption: [字号]px / weight-[字重]
## 4. Spacing & Layout
- Base Unit: 8px
- Scale: 4, 8, 12, 16, 24, 32, 48, 64px
- Max Content Width: [最大内容宽度]px
- Section Padding: [区块间距]px
## 5. Component Styles
### Buttons
- Primary: [背景色，文字色，圆角，内边距]
