SOURCE
Google Stitch提出的DESIGN.md确实好用! 摘要
文档概览
- 原文讨论 AI 生成网页时“功能全对、视觉却不对”的问题，并将差异归因于颜色、对比度、字体和间距等难以用自然语言准确表达的设计信息。
- 文中提出以 DESIGN.md 作为可供 AI 直接读取的设计说明书：工具会打开并分析真实网站，将其视觉与组件规则蒸馏为文档。
- 作者称已将 getdesign.md 上的 74 个顶级品牌蒸馏为现成规范，并以开源项目
ake77-code/distill-design提供“网站 → DESIGN.md”蒸馏工具及品牌规范集合。
关键事实
- 原文的核心场景是：用户希望 AI 生成具备 Stripe 式高级渐变、Linear 式暗色精致感或 Apple 式克制留白的页面，但用户难以准确描述，AI 也难以自行猜准，反复修改仍可能无法达到预期。
- DESIGN.md 被描述为对网站设计系统的蒸馏结果，覆盖每一个颜色、字号、圆角、间距与组件等信息。
- 原文认为，与其向 AI 模糊地要求“高级一点”，不如把明确的设计规范直接提供给 AI，让其按规范生成页面。
- 文中列举的品牌包括 Stripe、Linear、Apple、Figma、Spotify、Notion 与 Nike；原文总数为 74 个品牌。
三件套文件
- 每个品牌规范均配套三类文件。
DESIGN.md：设计规范文件，包含颜色、字阶与组件等设计信息。preview.html：设计系统的可视化预览，用于快速查看整套色板和组件。demo.html：使用该套规范搭建的仿真落地页，用于展示规范在页面中的应用效果。
使用流程
- 挑：选择一个气质最接近目标效果的品牌规范。
- 读：结合
preview.html阅读规范，理解其视觉效果为何成立。 - 换：将颜色、字体等数值逐项替换为自己的数值；原文强调“只改值，不动结构”。
- 用：将 DESIGN.md 放入项目上下文，让 AI 按该规范生成页面。
重要细节与边界
- 原文将这套方法定位为降低 AI 配色与视觉风格生成的不确定性：不再仅凭模糊审美描述，而是借用成熟设计系统的明确规则。
- “替换”步骤的约束是保持设计规范的结构不变，仅调整颜色、字体等具体数值；原文未进一步说明哪些字段可替换、替换后的验证标准或适配机制。
- 原文声称工具会真实打开网站并测得设计信息，但未展开具体抓取流程、识别算法、输出 schema、版权处理或对动态页面的适用边界。
- 原文称 74 套规范“开源免费、拿来即用”，但未在正文中逐一列出全部品牌或每套规范的覆盖深度。
项目与概念声明
- 原文声明，DESIGN.md 这一格式来自 GitHub 上获 9 万以上 Star 的开源项目
awesome-design-md。 - 原文同时声明，该概念最早由 Google Stitch 提出。
ake77-code/distill-design被描述为基于上述格式实现的“网站 → DESIGN.md”蒸馏工具，并附带 74 个品牌的现成规范。- 以上为来源中的项目与概念归属声明；原文未展开
awesome-design-md、Google Stitch 或ake77-code/distill-design的完整规范、实现细节与项目历史。