读懂网站的设计语言 · 02.1 / 04
如何提取 Design DNA
从网站中找出反复出现的设计选择，比较不同提取方法的输出，并生成一份可以继续验证的设计语言初稿。
- GoodVibe 编写
- Brandbook Skill 与方法比较
- 产出 DESIGN.md v0
Design DNA 不是一张配色表，也不是把一个网站压缩成几个漂亮的形容词。它是一份对设计语言的初步判断：哪些比例、关系、内容选择和互动习惯反复出现，并且可能在另一个项目里继续成立。
这一节先不急着证明所有技术细节。你会从网站、截图或本地代码中提出一份可以被审查的模型，再在下一节逐项打开网页，确认哪些判断来自证据，哪些只是推测。
一份好的 Design DNA 会让别人知道你观察到了什么，为什么这样判断，以及哪里仍然未知。它不需要把网站概括得面面俱到。
先划清边界
设计语言不是完整设计系统
完整的 Design System 通常还包括长期维护的组件、状态、无障碍规则、工程约束和版本治理。一个网站的研究通常只能提取其中一部分，我们更准确的目标是读出它的设计语言，再把可迁移的部分写进项目上下文。
如果一个页面的身份主要来自 WebGL 场景、全屏视频或艺术摄影，系统化的比例就会更小。你可以记录字体、空间、颜色、节奏和资产使用方式，但不能假装一份 Token 文件能替代原始视觉资产。
Design System
可以被多人长期维护和复用的设计与实现系统。
Design Language
一个作品中反复出现、可以被观察到的设计选择。
Design DNA
从作品中提炼出来、值得继续验证的核心规律。
比较工具
不同提取方法在提取什么
Brandbook Skill、hue、Design MD 类 Skill 和 Screenshot to Code 工具都可以帮助 AI 处理参考，但它们的输出并不相同。比较它们时，不要只看生成页面像不像，而要看它们是否保留了来源、判断和限制。
| 方法 | 主要输出 | 适合回答 | 需要继续检查 |
|---|---|---|---|
| Brandbook Skill | 设计模型、Brandbook、品牌应用证明 | 这个品牌有哪些可观察规则 | 提取范围和视觉资产比例 |
| hue | 面向 AI 编码的设计语言和组件方向 | 下一次 UI 生成应该遵守什么 | 品牌层和非 UI 网站的适配 |
| Design MD | 人和 Agent 可以读取的项目规则 | 这个项目应该如何继续制作 | 规则是否有真实证据 |
| Screenshot to Code | 一个看起来接近的页面 | 快速获得可编辑的起点 | 行为、来源、可迁移原则 |
先看三个原始方法
它们的输出目标不同，适合放在同一张比较表里观察。
提取顺序
先做 Fit Check
- 01
判断身份来源
确认页面的辨识度主要来自 UI 组件、内容排版，还是一块独立的视觉资产。
留下 fit-check.md - 02
记录观察事实
先记录字体、颜色、间距、形状、内容结构和反复出现的互动，不急着写成风格形容词。
留下 observed-notes.md - 03
提出派生规则
把可以迁移的判断写成具体句子，并说明它是根据哪些观察推导出来的。
留下 design-model.yaml - 04
留下未知项
把还没有证据的技术结论标记出来，带入下一节选择合适的方式继续检查。
留下 DESIGN.md v0
调用 Brandbook Skill，先得到一份可以被推翻的初稿
对话展示的是理想回应结构。真正结果仍要回到原网站，选择合适的证据来源逐项核对。
一张首屏里的事实、推导与资产
同一张网站截图上标出可直接观察的事实、由多条事实推导出的规则，以及无法被 Token 替代的摄影、视频或实时视觉资产。编号需要与旁边的 DESIGN.md v0 摘录对应。
- 01保留原始 URL、作者或工作室和捕获日期
- 02至少标出 4 条 OBSERVED 与 2 条 DERIVED
- 03单独圈出 decisive asset
- 04提供桌面图，并说明移动端是否仍待验证
/course/chapter-02/design-dna-annotated.webp本节练习
写出一份可以被推翻的 DNA 初稿
选一个你已经保存过的网站，先限定一个页面和一个关键状态。用下面的模板记录事实、推导和未知项。每条 Derived Rule 至少引用一条 Observed Fact；暂时找不到证据的判断留在 Unknown，不要为了让文档显得完整而补答案。
第一版 Design DNA
# Design DNA v0
## Source and Scope- source_url:- page_or_route:- captured_at:- focus_state: initial / hover / menu-open / scroll / mobile
## Fit Check- identity_mix: ui-rich / content-rich / spectacle-led / mixed- decisive_assets:- what_tokens_cannot_replace:
## Observed Facts- [OBSERVED] 事实：- evidence: 截图、录屏、DOM、资源或公开源码- [OBSERVED] 事实：- evidence:
## Derived Rules- [DERIVED] 规则：- derived_from: 引用上面的 Observed Fact- applies_when:- breaks_when:
## Rejections- 不采用的默认做法：- reason:
## Unknown- [GUESS] 仍需确认的判断：- inspect_next:
## Next Check- 下一节要打开开发者工具确认的 5 个问题：检查初稿
不要让漂亮的词代替证据
把高级感写成设计规则
改写成可以被截图、参数或状态验证的句子，例如空间比例、对比度或进入时序。
看到 Canvas 就认定网站的全部身份来自 Shader
先做 Fit Check，分别记录 UI、内容、动态图像和实时场景的贡献。
把生成工具的默认输出当成原站事实
保留 observed 和 derived 的来源标记，下一节用 Inspect 逐项复核。
提取了品牌表达却准备直接发布第三方复刻
区分设计事实和受保护表达，学习项目保留来源和内部使用边界。
学习进度
正在读取你的学习记录…