读懂网站的设计语言 · 02.3 / 04

基于研究的网站复刻

使用 Yah Web Clone 让整站或关键效果在本地重新运行，并用响应式、路由与状态对照检验前面的理解。

GoodVibe 编写
Yah Web Clone
full mirror effect collection

现在才开始复刻。因为你已经有了设计语言初稿和网页审查记录，Yah Web Clone 不会只凭一个 URL 生成相似页面，它会把前面的研究变成一个可以运行、可以比较、可以继续修改的对象。

复刻的目标不是把所有代码都变成自己的，也不是用一个漂亮的替代品掩盖无法还原的部分。目标是忠实地说明范围、保留证据、运行结果，并对差异负责。

你知道自己复刻了什么，知道没有复刻什么，也能说明每个差异是证据不足、资源缺失还是主动选择。

复刻的完成标准

先选模式

不要每次都从整站开始

模式	适合的问题	默认留下
full	我要研究一个完整网站及其实现	site、lab、docs 和证据
mirror	我只需要一个能离线打开的缓存	site 和最小镜像清单
effect	我只想研究一个局部效果	lab、参数、Preset 和分析
collection	我想横向比较多个相似网站	cases、比较和综合

开始项目

启动 Yah Web Clone

Yah Web Clone 默认使用 full，它会把可运行网站、独立学习实验、中文分析和关键证据放在同一个项目里。只有明确只要离线缓存时使用 mirror，只研究一个效果时使用 effect，需要比较一组同类网站时使用 collection。

初始化只是建立交付契约，不代表已经完成复刻。项目创建后仍然要先侦察来源、确认授权与范围，再决定哪些内容进入 site、lab 和 docs。

创建一次完整网站研究

terminalBash

YAH="$HOME/.codex/skills/yah-web-clone/scripts/yah.mjs"
node "$YAH" init example-site --url https://example.com --mode full
# 只有在你拥有网站或已获得明确授权时，再追加 --authorized# 只研究局部效果时，将 full 改成 effect，并增加 --effect "效果名称"

从研究开始

先写清楚复刻范围

01
确认来源
记录原始 URL、作者、页面范围和 License。未知授权时只做本地学习，不公开重新部署。
留下 source-provenance.md
02
选择对象
明确要复刻的路由、关键状态、素材和响应式尺寸，把不处理的部分写出来。
留下 clone-brief.md
03
沿用证据
把上一节的字体、布局、资源、动画和渲染记录交给 Agent，禁止从截图臆造架构。
留下 inspect-report.md
04
先保留 baseline
先让原始捕获或最小复刻运行，再做路径修复、依赖清理和可读实验，不要一开始就重新设计。
留下 site / lab

给 Yah 的第一轮说明

项目目标：研究并复刻一个真实网站。原始 URL：source-url 复刻模式：full / mirror / effect / collection 授权状态：own / authorized / study-only / unknown 请先读取 Design DNA 和 Inspect 记录，列出页面、路由、字体、媒体、Canvas 和关键交互，标记 SOURCE、PARTIAL、GUESS，并输出 clone-plan.md，等范围确认后再实现。无法 1:1 时，请报告具体缺口，不要用相似设计掩盖证据不足。

基于证据的网站复刻

我会先完成来源侦察和范围清单，当前不会进入实现。 clone-plan.md 将列出目标路由、关键状态、媒体与渲染材料，并把每项判断标为 SOURCE、PARTIAL 或 GUESS。授权不清楚的资产会进入 study-only 边界；需要你确认的范围和缺口会单独列出。

确认 clone-plan.md 以后再进入实现，能避免 Agent 用替代设计提前填满证据缺口。

实现顺序

先活起来再变得可读

第一轮先恢复页面结构和真实内容，第二轮恢复关键状态和主要运动，第三轮再处理可读性、参数化和学习实验。这样你能区分原始行为、离线适配和自己的重建，不会把补偿性调参误认为理解。

01
运行原始对象
确认根路径、深层路由、主要资源和启动命令，保留最后一次成功的画面。
留下 runtime-check.md
02
恢复页面骨架
按真实内容和结构完成 Section、导航、媒体和容器，不先追求像素细节。
留下 site/
03
恢复关键状态
按状态矩阵实现 Hover、Scroll、Click、Drag、Loading 和 Error，记录不能还原的状态。
留下 interaction-check.md
04
建立学习实验
需要解释的效果移到 lab，保留原版 baseline，再提供不依赖整站的可读实现。
留下 lab/

对照验收

不要用一张首屏证明成功

桌面首屏很像

再检查 1440、768、390 三档 viewport、深层路由和关键状态。

页面没有 Console Error

继续检查资源、交互、动态画面、性能和内容替换，零报错不等于 1:1。

缺少原始视频或字体

记录缺口，选择合法替代或静态 fallback，不要无证据编造原始资产。

为了像而不断增加魔数

回到结构、坐标系和时间线，先修正错误模型，再调整参数。

响应式对照图占位

同一路由、同一状态、三档视口

Visual pending

用六张截图组成原站与本地版本的对照矩阵，并在真正影响体验的差异处加编号。至少包含一处已修复差异和一处明确接受的缺口。

01原站与本地版本使用相同路由和状态
02桌面、平板和手机分别一组
03记录字体、布局、状态或渲染差异
04标明 fixed、accepted 或 blocked

正式素材加入后直接替换此占位块/course/chapter-02/clone-viewport-matrix.webp

把复刻结果变成证据

Yah 项目完成后，下一节会回头比较初稿、审查记录和最终结果。

本节练习

完成一轮可以复查的验收

打开原站和本地版本，依次检查桌面、平板、手机和一个关键互动状态。每发现一处差异，先判断它属于结构、资产、状态、时间、渲染还是主动取舍，再决定修复或记录。最后保留少量能支撑结论的截图，把临时抓取和重复媒体留在过程目录。

复刻验收记录

clone-review.md

# Clone Review
## Coverage- routes_checked:- viewports: 1440 / 768 / 390- states_checked:- media_checked:- console_and_page_errors:
## Differences### Difference 01- category: structure / asset / state / time / rendering / decision- source_evidence:- local_result:- impact:- action: fixed / accepted / blocked- reason:
## Fidelity Boundary- faithfully_rebuilt:- simplified:- missing:- intentionally_changed:- study_only_assets:
## Evidence Kept- desktop:- mobile:- key_state:- machine_summary:
## Handoff- confirmed_design_rules:- rules_to_revise:- questions_for_retain_review:

预览清理范围并完成交付检查

terminalBash

YAH="$HOME/.codex/skills/yah-web-clone/scripts/yah.mjs"YAH_PROJECT="/absolute/path/to/example-site-clone"
# 先预览将被清理和提升的内容node "$YAH" clean --project "$YAH_PROJECT"node "$YAH" size --project "$YAH_PROJECT"node "$YAH" validate --project "$YAH_PROJECT" --strict --writenode "$YAH" finalize --project "$YAH_PROJECT"
# 确认预览无误后，再执行清理和最终提升node "$YAH" clean --project "$YAH_PROJECT" --applynode "$YAH" finalize --project "$YAH_PROJECT" --apply

学习进度

正在读取你的学习记录…

确认来源

选择对象

沿用证据

先保留 baseline

运行原始对象

恢复页面骨架

恢复关键状态

建立学习实验