AI 创意工程师 · 第 02 章 · 免费
读懂网站的设计语言
先提取一个网站的设计语言，再把网页拆开审查，基于研究完成复刻，最后把代码、证据和判断整理成下一次还能找回的资产。
- GoodVibe 编写
- 四节图文内容
- 从观察到可回溯的参考
一个让你停下来的网站，通常不只是因为它用了某个漂亮的颜色，或者加了一段复杂的动效。你真正被吸引的，可能是一种比例、一种观看方式、一种内容和视觉之间的关系，也可能是某个只有在滚动、点击和等待之后才出现的细节。
这一章要做的，是把这种模糊的喜欢变成可以观察、可以验证、可以复用的设计判断。我们不会先猜一套架构，也不会把一张截图当成整个网站。我们会先提出一份设计语言的初稿，再把网页拆开检查，最后用复刻结果回头修正它。
你不再只说我喜欢这个网站，而是能说清楚它为什么成立，哪些部分可以带走，哪些部分只能留在原来的作品里。
为什么放在一起
从喜欢到可以再次使用
Design DNA、网页 Inspect、网站复刻和资料归档看起来像四件事，其实都在处理同一个对象：一个你想理解、验证并继续参考的网站。
第一节先提出判断，第二节把网页分层并找到证据，第三节基于这些研究建立一个可以运行的复刻，第四节回看哪些判断被验证，把代码、截图、来源和方法一起留下。
一条研究路径
先读出判断再打开网页
- 01
提出初稿
用 Brandbook Skill 或自己的观察写出设计语言初稿，并把观察到的事实和暂时的推测分开。
留下 design-model.yaml / DESIGN.md v0 - 02
拆分证据
结合截图、录屏、浏览器工具、插件、公开源码与运行记录，检查字体、布局、资源、动画、状态和渲染方式。
留下 inspect-map.md / evidence-pack - 03
建立复刻
根据研究结果选择 Yah Web Clone 的模式和范围，让原站或关键体验在本地重新运行。
留下 clone project / comparison record - 04
回看并留下
比较初稿、证据和复刻结果，修正设计语言，把来源、代码、截图和方法一起归档。
留下 DESIGN.md v1 / Reference Card
第二章研究闭环
展示 DESIGN.md v0、Inspect 证据、可运行复刻和 DESIGN.md v1 之间的关系。画面需要让学员一眼看出：后面的证据会回头修改最初判断。
- 01标出四个阶段及其主要文件
- 02用回路线连接 DNA v1 和最初假设
- 03区分观察、证据、运行结果和长期资产
- 04手机端按纵向顺序保持可读
/course/chapter-02/research-loop.svg本章结束时
你会拥有一组可以回到手里的参考
图片和视频可以让你记住一个网页的样子，但可运行的参考还应该告诉你它如何加载、如何触发、哪些参数有效，以及当时为什么值得保存。
这一章结束时，你会留下一个被研究过的网站对象、一份经过验证的设计语言、一组证据和一张能被下一次项目重新调用的 Reference Card。Chapter 03 会从这份设计语言开始建立 UI Kit，而不是重新从一张空白画布猜起。
开始第一节