W
AI-Wiki
CONCEPT

网站设计系统蒸馏

定义

网站设计系统蒸馏是将一个成熟网站的可观察视觉规则转化为结构化、可复用设计资产的过程。蒸馏结果不仅描述颜色和字体，也覆盖字阶、圆角、间距及常见组件，使 AI 或开发者能据此生成风格一致的页面。

在本文档中的语境

本文所述实践以“网站 → DESIGN.md”为核心：工具打开并分析目标网站，实测其颜色、字号、圆角、间距和组件，再将这些信息整理成 AI 可直接读取的设计说明书。它解决的不是功能实现问题，而是页面功能正确却缺少特定品牌气质的问题。

当需求仅以“像 Stripe 的高级渐变”“像 Linear 的暗色精致”或“像 Apple 的克制留白”等主观描述表达时，AI 难以稳定推断具体规则；蒸馏后的规范将这类模糊审美诉求转换为可检查、可替换的设计值。

关键组成与输出

一次完整蒸馏应关注以下对象：

  • 色板：页面使用的颜色及其在界面中的分工。

  • 字体与字阶：字体选择、字号层级及相关排版特征。

  • 形状与节奏：圆角、间距等影响界面密度和秩序的规则。

  • 组件：构成页面的界面组件及其视觉特征。

来源将每个品牌的产物概括为“三件套”：

  • DESIGN.md：可读的设计规范，包含颜色、字阶和组件等信息，供 AI 或开发者作为生成与实现依据。

  • preview.html：设计系统的可视化预览，用于直观看到整套色板和组件。

  • demo.html：使用该规范搭建的仿真落地页，用于验证规范在实际页面中的呈现效果。

使用流程

来源给出的使用流程分为四个环节：

  1. 挑：从已有品牌中选择气质最接近目标产品的参考品牌。

  2. 读：结合 preview.html 理解该设计系统的色板、组件与整体视觉效果。

  3. 换：将颜色、字体等替换为自己的品牌值；强调只改值、不动原有规范结构。

  4. 用：将 DESIGN.md 放入项目上下文，让 AI 按规范生成页面或由开发者据此实现。

该流程的关键在于先借用成熟系统的组织方式，再进行品牌值替换，而不是让 AI 在每次生成时重新猜测审美偏好。

细节与边界

来源宣称项目已蒸馏 getdesign.md 上的 74 个顶级品牌，并举例提及 Stripe、Linear、Apple、Figma、Spotify、Notion 与 Nike。该数字和品牌覆盖范围为来源陈述；原文未提供完整的 74 个品牌清单，也未展示每个品牌 DESIGN.md 的具体规范内容，因此不能据此判断各份规范的完整度、准确性或是否持续更新。

来源还称 DESIGN.md 格式来自 GitHub 开源项目 awesome-design-md，其概念最早由 Google Stitch 提出；所述项目 distill-design 则被描述为基于该格式实现的网站蒸馏工具与现成品牌规范集合。此处应区分格式或概念的来源，与具体蒸馏项目所提供的品牌资产。

设计系统蒸馏可减少主观沟通和重复试错，但不意味着可以不经验证地复制目标品牌：替换品牌值后仍需检查可读性、对比度、业务组件需求和页面实现效果。

相关条目