DESIGN.md
定义
DESIGN.md 是一种面向 AI 页面生成与开发协作的设计说明书格式。它不以“做得更高级”“像某品牌一样精致”这类主观形容驱动生成，而是将视觉决策写成可直接引用的规范，让 AI 有明确的颜色、字体与组件依据。
本文档中的语境
本文所述的 DESIGN.md 来自对现有网站的观察、打开与实际测试：工具识别页面中的颜色、字号或字阶、圆角、间距和组件，并将结果蒸馏为一份 AI 可读取的 Markdown 文档。生成页面时，可将该文档提供给 AI，作为视觉和组件层面的上下文。 这种做法针对的是“功能正确、观感却不对”的生成问题。颜色、对比度、字体和留白等因素往往难以用自然语言精确表达；如果只要求“高级一点”，AI 需要猜测，容易导致反复修改仍偏离目标。
关键组成
- 颜色：记录色板及其在界面中的使用方式，为配色与对比度提供明确参考。
- 字号与字阶：定义不同层级文本的视觉层次，避免标题、正文与辅助信息的尺度关系由模型随意决定。
- 圆角：规定卡片、按钮、输入框等界面元素的形状语言。
- 间距：描述页面留白、元素间距与布局节奏，使页面不只功能完整，也具备一致的密度和秩序。
- 组件：整理可复用的 UI 组件及其样式特征，供 AI 生成页面时遵循。
在原文介绍的配套产物中，DESIGN.md 负责记录设计规范；
preview.html用于可视化查看整套色板和组件；demo.html则使用该规范搭建仿真落地页。后两者是辅助理解与验证规范的材料，而 DESIGN.md 本身是可供 AI 引用的规范载体。
使用方式
可按四步使用：先选择气质接近目标的设计系统；再结合预览理解其色板和组件为何协调；随后把颜色、字体等品牌数值逐项替换为自身项目的数值；最后保留原有规范结构，将 DESIGN.md 放入项目上下文，让 AI 据此生成页面。 其中的关键约束是“只改值，不动结构”：复用成熟设计系统的层级、间距和组件组织方式，同时换成自己的品牌颜色、字体等具体数值，以适配项目而非直接复制品牌外观。
细节与边界
原文提到，ake77-code/distill-design 提供“网站 → DESIGN.md”的蒸馏工具，并整理了 Stripe、Linear、Apple、Figma、Spotify、Notion、Nike 等 74 个品牌的现成规范。这些规范可作为选择设计气质和建立视觉基线的参考。
DESIGN.md 的作用是提供视觉与组件规范，不能替代产品需求、信息架构、交互逻辑、数据状态处理、可访问性要求或完整的前端实现。即使规范足够详细，AI 仍需要明确页面目标与功能约束，才能产出可用的页面。
原文将该格式的概念归因于 Google Stitch，并说明其关联 GitHub 开源项目 awesome-design-md；这些来源信息用于说明格式背景，不等同于 DESIGN.md 能自动保证设计质量或实现正确性。