1:1 rebuild of award-winning creative websites (WebGL / scroll-animation / portfolio sites). Evidence-driven pipeline - mirror-first forensics, line-number-traceable reverse engineering of minified bundles, verbatim porting, quantitative verification gates. Use when user asks to "复刻网站", "重建网站", "1:1 rebuild", "clone this site", or provides a URL of a creative/award site to reproduce.
Scanned 9/2/2026
Install to Claude Code
npx -y skills add boyang-hu/website-rebuild-skill --skill website-rebuild --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of Website Rebuild?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/boyang-hu-website-rebuild)More formats (shields.io, HTML) on the badges page.
---
name: website-rebuild
description: 1:1 rebuild of award-winning creative websites (WebGL / scroll-animation / portfolio sites). Evidence-driven pipeline - mirror-first forensics, line-number-traceable reverse engineering of minified bundles, verbatim porting, quantitative verification gates. Use when user asks to "复刻网站", "重建网站", "1:1 rebuild", "clone this site", or provides a URL of a creative/award site to reproduce.
compatibility: Requires Node 22+ (bundled scripts use built-in WebSocket to talk to CDP), npx, and a local Chrome/Chromium for headless comparison. POSIX shell optional - the Step 0 probe protocol has a zero-dependency Node equivalent (scripts/fingerprint.mjs) for shells without curl/cmp/tr/perl (e.g. Windows PowerShell); everything after Step 0 (headless Chrome process groups, npx spawns, ps) is POSIX-only (macOS / Linux / WSL). Agent-agnostic - works in any Agent Skills-compatible runtime.
metadata:
version: "0.3.19"
---
# Website Rebuild(获奖创意站 1:1 复刻)
把一个获奖创意网站(WebGL / 滚动叙事 / 作品集站)以**取证式方法**复刻为可独立运行、可验证还原度的工程。不是"看着像"的仿制——是以源站 bundle 为唯一规格书、以量化验收门收口的逐行为移植。
本方法论提炼自六个连续实践项目(工期从 6.5 周收敛到 1 天),后经 **22 个完整复刻 + 5 个死站存档抢救**持续回填、43 站边界探测实测校准适用范围(清单见仓库 README「已验证过的网站」)。
## 使用前提与授权 ⛔ 必读
本 skill 面向**学习与研究目的**的保真复刻,用于研究获奖创意站的实现手法。适用对象是你**自有的、已获授权的,或公开可访问且允许学习临摹**的网站。它不是用于未授权地采集受保护内容、规避访问控制、或商业性盗用他人作品的工具。
执行时遵守下列边界:
- **尊重目标站规则**:遵守其 `robots.txt`、服务条款与版权;抓取保持低频、单会话,不对目标站施加异常负载。⛔ **`robots.txt` 是逐路径的许可声明,不是全站开关**——逐 URL 判定(选组 → 最长匹配 → 无匹配即允许),**不得因为存在任何 `Disallow` 行就判"整站禁止"**(几乎每个商业站都有 `/cart`、`/checkout`、`/admin` 的 `Disallow`);禁令要按行为类别归类,**只有针对"抓取"的禁令才影响镜像范围**,针对交易的禁令只意味着"别去点结账"。⭐ **"读不懂 / 拿不准"不等于"禁止"**:走呈交,不走停工,更不自行缩小抓取范围。读法见 [references/legal-and-deploy.md](references/legal-and-deploy.md) §0.3。
- **不触碰受保护边界**:不采集需要登录态、付费墙或授权才能访问的内容;本 skill 只处理匿名可公开访问的资源。若目标站明确禁止此类复制,停止并告知用户——**何为"明确禁止"见 `legal-and-deploy.md` §0.3.6 写死的四条门槛,其余一切不确定性走呈交不走停工**。
- **产出默认私有**:默认 noindex、不公开部署。任何公开前必须完成逐资产版权取证,并显著标注"非官方复刻"与原作者归属(见 [references/legal-and-deploy.md](references/legal-and-deploy.md))。
⛔ **法务判断归用户,skill 只取证与呈现**(三条,全程有效):
1. **决定权在用户**:skill 收集事实(逐资产归属、许可状态、第三方权利人、源站是否仍在营业、产物内第三方标识符)、列出选项与各自的风险边界、给出建议与理由;凡涉及"能不能公开 / 部署 / 再分发 / 对外展示",**必须用下文「User Input Tools」显式交回用户**,不许 agent 自行下法律结论后继续往下走。
2. **未获用户明确决定前按安全默认执行**:私有仓库 + `noindex` + 不公开部署 + 不再分发。写给用户时说明这是**默认动作**("在你决定之前我不会把它发出去"),**不是** agent 已作出的法务结论——两者责任归属完全不同。agent 只能往保守侧执行默认,往公开侧走必须有用户的明确决定。
3. ⛔ **法务考量不得削减镜像完整性或门的覆盖面**:镜像是证据基座,**完整性是技术不变量**(四遍法、闭包门、GAP=0 全建立在它之上)。不抓只能有**技术性理由**(不是文件 / 服务端不提供 / 需授权或登录态 / 源站明令禁止),一律登记;**不得**以"反正不公开""不该多存一份"这类法务理由留洞【objectarchive】(实证:`references/case-studies/skill.md`「使用前提与授权」)。法务决定作用于**产出怎么被使用**,不是证据基座是否完整。
## 适用范围 ⛔ 必读
**主场(A 类)**:内容静态托管、签名行为(动画/交互)全部存放在客户端静态资产里的站——命令式 WebGL/Canvas 场景、GSAP 时间轴、烘焙数据文件(GLB/.buf/.riv)、minified 或未混淆的 bundle。绝大多数 Awwwards 风格创意站属于此类。
**有条件支持(B 类)**:管线成立但需要额外场景处理(Shopify 平台层剥离、第三方存储桶资产、运行时 API 快照、SSG payload 展开)。当前版本的指南覆盖大部分 B 类场景,遇到未覆盖的要向用户明示风险。
**明确拒绝(C/D 类)**:
- **C1(v0.3 起可做:重构式逆向)**:服务端组件源确实不下发,但**它的完整输出(flight 流)内联在每页 HTML 里,是可对拍的规格书**。路线:flight-decode 建坐标系 → 重构一个可构建的 Next 工程(客户端一方组件按 C2 逐字译,服务端组件从 flight 树反推为显式登记的推断物)→ verify-flight 语义门收口(模块 id 全局双射;实证:`references/case-studies/skill.md`「适用范围」)。⚠ C1 的 L2/L3 合并——第一份产物就是「人写的源码 + 门证明的等价」。全流程见 [references/rsc-reconstruction.md](references/rsc-reconstruction.md)。
- **C2(可做,按 A 类跑)**:⭐ 写法是声明式但**源码下发**(R3F / Theatre / Vue SFC 编译产物)。**切片器不关心范式——它切的是字节。** 渲染器当平台层从镜像伺服(实证:`references/case-studies/skill.md`「适用范围」)。⛔ 判别器不是库名,是「客户端是否持有行为源」(`scope-and-fingerprint.md` §4.0.1)。
- **D**:行为主体在服务端(CMS 内容站、电商 cart/库存、A/B 实验分桶、个性化注水)——客户端没有可移植的目标物,且确定性验收无基准。
**X 类(可抢救)**:原站已消失(域名易主 / 平台回收 / 路径移除 / 原地被替换),但 Internet Archive 往往有捕获——`scripts/wayback-mirror.mjs` 从 CDX 索引按**锚点 + 时间窗**选一个连贯时刻、以 `id_` 原始字节抓成**标准镜像**(下游门原样工作),洞按既成事实登记进 `wayback-holes.txt`(读法与流程见 [references/archival-rescue.md](references/archival-rescue.md))。⭐ 抢救产出是**标准镜像**——X 类可走完 L3 全程(实证:`references/case-studies/skill.md`「适用范围」)。⛔ **"CDX 无覆盖才是真不可做"按资产层读,不按站读**:IA 爬虫不执行 JS,清单/拼接驱动的站可以代码层覆盖 100% 而画面层为零(实证:`references/case-studies/skill.md`「适用范围」)——Step 0 先做分层覆盖侦察(推导 + CDX 前缀查询)预判抢救深度,见 `archival-rescue.md` §1.9。历年获奖站实测消失率约 29%——这也是"第一时间镜像"是本 skill 第一纪律的原因。
判级由 Step 0 指纹侦察决定,完整判定树见 [references/scope-and-fingerprint.md](references/scope-and-fingerprint.md)。**拒绝时要解释原因并说明该站属于哪一类**,不要硬跑。
## User Input Tools
需要向用户提问时(确认范围、**法务决定**、外部依赖决策):优先使用当前运行时的内置提问工具(如 `AskUserQuestion`);没有则输出编号问题清单让用户回复编号。支持多问合并时一次问完。法务类提问按 `legal-and-deploy.md` §0.1 的五段式写:事实 / 查不清的 / 选项 / 每个选项的风险边界 / 建议与当前默认动作。
## 宪法(六条纪律,全程有效)
以下六条在六个源项目中被称为"宪法级",违反任何一条都会在后续阶段以 bug 形式偿还:
1. **镜像神圣不可污染**:`mirror/` 磁盘文件永不修改;一切本地化适配(CDN 改写、外链 stub)在服务层响应时动态完成。
2. **源站代码是唯一裁决,不凭观感修**:每个改动先在 bundle/CSS/镜像 HTML 里找到归属行号再落地。Do not tune visuals, motion, or interaction by eye.
3. **源站有的都要有,源站没有的不做**:不自创补偿性 CSS/JS。宁可先不像,也不要发明规则——自创补丁会在机制对齐后反转成 bug。
4. **bug / 死代码 / 怪写法照抄不修**:压缩代码里的每个怪写法都可能是行为本身。"好心修正" no-op bug 曾导致转场崩溃(实证见 porting-discipline.md)。
5. **有意偏差必须登记**:写清"源站怎么做 / 我们怎么做 / 为什么 / 什么条件下重新考虑"。**没登记的差异一律视为 bug**。
6. **代码与文档同一次提交**:每个里程碑成对提交(`Port xxx` + `Update rebuild plan: xxx`),日志固定含产出 / 验收 / 教训 / 下一步断点(带行号)。
⭐ **纪律 3 在 M(n+1) 的边界**:`src/` 是显式登记的衍生物,不是对源站的断言,所以**在 `src/` 里重命名、拆模块、写注释不算"发明"**——纪律 3 约束的是"为了让它看起来像而自创行为",不是"让已证明等价的代码变得可读"。但两条硬边界不动:**① 结构性重写默认禁止**(合并重复、提取公共函数、改算法——它们让等价不可判定);**② 注释里的推测必须标注为推测**,不许把逆向笔记里的猜测写成陈述句。`port/` 与 `mirror/` 仍然一个字节都不许动。详见 [references/readable-source.md](references/readable-source.md) §3.4 与 §5。
## Workflow
### Progress Checklist
```
[ ] Step 0 指纹侦察与范围门 ⛔(判级 A/B/C/D/X;C/D/X 拒绝或引导,不进入下一步)
[ ] Step 1 开工评级(架构证否、分项难度打星、工期预估、与用户确认范围 + 终点 L1/L2/L3)
[ ] M0 镜像取证 ⛔(BFS 爬虫 + CDP 补录 + manifest 账本;GAP=0)
[ ] M0.5 镜像断网跑通 ⛔(零 404 / 零控制台错误 / 零外联;serve.mjs 伺服)← L1 镜像存档 终点
[ ] M1 逆向建坐标系 ⛔(_pretty 钉版本展开;engine-notes 先于任何代码;技术栈钉死;REBUILD_PLAN 建立)
[ ] M2+ 严格溯源移植(依赖序里程碑推进;先竖切一条端到端链路;每里程碑冷启动实测 + CLEAN 门)
[ ] M(n-1) 对拍验收(按 verification-gates.md 决策树选门型;根因修复,不调参糊平)
[ ] M(n) 收口 ⛔(冷头评审 / 模块清单对账;版权取证 + 呈交用户决定——公开部署前必须完成)← L2 工程化复刻 终点
[ ] M(n+1) 源码化(port/ → src/:拆模块、去混淆重命名、补注释、自包含)← L3 源码化 终点
```
⛔ = 阻塞门:验收标准未达成不得进入下一阶段。
标记约定(全部文档通用):⛔ 硬规则,违反即 bug · ⛔⛔ 已在实战里付过高代价的硬规则 · ⭐ 经验证的做法 · ⭐⭐ 反直觉但已被数据证实的做法 · ⚠ 陷阱 / 边界 · 【代号】= 实证来源项目(对应 README「已验证过的网站」)。
### Flow
**Step 0 — 指纹侦察与范围门**。加载 [references/scope-and-fingerprint.md](references/scope-and-fingerprint.md),对用户给的 URL 执行探测协议(GET 到路径粒度、最终 URL 同一性、双抓 diff、物种/年代校验、bundle 初检),输出判级与依据。A/B 类继续;C/D/X 类向用户解释后停止或引导。
**Step 1 — 开工评级**。加载 [references/recon-and-rating.md](references/recon-and-rating.md)。架构假设先证否(依赖表会撒谎),分项难度打星(素材/3D/滚动编排/私有格式/平台层),向用户确认复刻范围(整站或指定页面)与预期。
⭐ **同一次提问里让用户选终点**(三级梯子,带着判级结论与分级成本估计问,不要干巴巴列选项):
| 终点 | 回答的问题 | 止于 | 典型用途 |
|---|---|---|---|
| **L1 镜像存档** | 它长什么样 | M0.5 | 存档、离线欣赏(获奖站年消失率约 29%) |
| **L2 工程化复刻** | 它在做什么 | M(n) | 可部署、可验证的 1:1(含版权取证与部署评估) |
| **L3 源码化** | 它怎么做的 | M(n+1) | 研究与学习实现手法 |
**梯子单调,选低不亏**:每一级都是下一级的前缀,镜像纪律保证时间敏感的部分永远最先完成——今天选 L1,以后想升级随时续跑(向用户说明这一点)。**"拿它做自己的项目"(脚手架化)不是本 skill 的阶段**——用户问起时指向 [references/beyond-the-rebuild.md](references/beyond-the-rebuild.md) 交接,那是他的工程,skill 到"人能读懂的真实"为止。
**M0 / M0.5 — 镜像取证**。加载 [references/mirroring.md](references/mirroring.md)。用 `scripts/mirror-site.mjs` BFS 爬取 + `scripts/netcapture.mjs` 真实浏览器补录,manifest 逐文件登记 sha256,`redirect: manual` 纪律,外部依赖逐项决策。`scripts/verify-mirror.mjs` 是**镜像自己的门**(五项断言,跑在断网门之前——下游所有门问的都是"渲染得出来吗",错的镜像能让它们全绿;**一个 HTTP 200 也不是"你拿到了那个资源"的证据**)。`scripts/serve.mjs` 伺服镜像,断网验收。**这一步永远最先做**——原站随时可能消失或改版,镜像是全项目唯一证据基准,也是后续一切对拍的参照服。
**M1 — 逆向建坐标系**。加载 [references/reverse-engineering.md](references/reverse-engineering.md)。⛔ **第一个动作是判 bundle 形态**(扁平拼接 / 模块化打包 / 多 chunk),再选工具——分层表扫顶层声明,而 webpack 打包产物的顶层声明数是 **0**,边界与依赖边由打包器给定(用 `scripts/module-map.mjs`;实证:`references/case-studies/skill.md`「Workflow / Flow — M1」)。认不出容器时 FATAL,**禁止回退到分层表**(§0.5)。`scripts/beautify-bundle.mjs`(js-beautify 钉 1.15.1)展开 bundle 到 `_pretty/`,此后行号是全项目唯一溯源坐标系。先写 `docs/engine-notes.md`(模板:[assets/templates/engine-notes.md](assets/templates/engine-notes.md))再写任何代码。技术栈从 bundle 取证钉死精确版本。数据驱动动画先 dump 数值账本。建立 `REBUILD_PLAN.md`(模板:[assets/templates/rebuild-plan.md](assets/templates/rebuild-plan.md))。
**M2+ — 严格溯源移植**。加载 [references/porting-discipline.md](references/porting-discipline.md),并按分支路由表加载对应场景指南。每个移植文件头部注明源行号区间;GLSL/魔数/数据逐字提取;数据资产脚本抽取入库不手抄。
**M(n-1) — 对拍验收**。加载 [references/verification-gates.md](references/verification-gates.md) 与 [references/determinism.md](references/determinism.md);门红了或残差需要归类时再加载 [references/gate-failure-modes.md](references/gate-failure-modes.md),不要开局读。全站渲染**广度**用 `scripts/sweep-routes.mjs`(全路由一个浏览器,逐路由 0 错误/0 失败/0 外联 + 交互钩子与逐路由采集),单路由**深度**才用 `probe.mjs`——⛔ 不要手搓逐路由起 Chrome 的循环,成本按浏览器启动次数计,且并发探针会互相收割孤儿。⚠ **归因残差之前先建自比带宽**(`pixelcompare --self`,逐侧 ≥4 次、交错跑)——没有带宽的残差一律 UNCLASSIFIED,而 UNCLASSIFIED 是失败不是通过。门型选择:有 SSR/静态 HTML 产物先建字节门 → DOM 静态场景冻结熵源走 byte-equal → 活场景(WebGL/视频/随机相位)降级量化指标 + 噪声归类 → 数据驱动动画补数值探针门 → CLEAN 门全程兜底。判定时序 bug 前先校准探针([references/environment-traps.md](references/environment-traps.md))。
**M(n) — 收口**。冷头评审:对 bundle 顶层类/模块清单逐一核对落点(功能测试测不出整块遗漏,只有清单式核对能)。加载 [references/legal-and-deploy.md](references/legal-and-deploy.md) 完成版权**取证**并把决定**呈交用户**——在用户决定之前按安全默认执行(**私有 + noindex + 不部署**),公开前必须逐资产取证、显著标注非官方复刻。
**M(n+1) — 源码化**。加载 [references/readable-source.md](references/readable-source.md)。到 M(n) 为止产物**已证明正确但人读不了**(实证:`references/case-studies/skill.md`「Workflow / Flow — M(n+1)」)。本阶段把 `port/` 重写成 `src/`:拆模块 → 作用域安全地去混淆重命名 → 补分档注释 → 复制资产做到自包含。⛔ **拆分粒度不是自由选择**——扁平脚本的声明顺序即求值顺序,粒度由三条硬约束决定(互相引用 / 求值顺序 / import 绑定不可赋值),**先出划分方案让人过目,再切**;遇到巨型模块时**先测「延迟绑定少数末尾单例」的收益曲线再决定**(换模块系统要赔上整条工具链才换来同样粒度;实证:`references/case-studies/skill.md`「Workflow / Flow — M(n+1)」)。⭐ **"这件事做不到"这个判断极不可靠**(实证:`references/case-studies/skill.md`「Workflow / Flow — M(n+1)」)——先怀疑测量它的工具,再怀疑对象(`readable-source.md` §3.1–3.1.3)。⛔ **前置条件不可协商:必须先有全绿的门。** 没有裁判的重构是盲改;有了 `meanAbsDiff 0.00` 的裁判,每一步都能被证死——**这是重构能有的最好条件,也是它必须排在最后的原因**。现有门全部原样复用(目标换成 `src/` 构建产物,**容差不许放宽**),另加符号映射门与自包含门。⛔ 结构性重写(合并重复、提取公共函数、改算法)**默认禁止**——它会让门从"证明等价"退化为"没测出不等价"。⭐ **纪律 4 在本阶段依然有效**:你现在读得懂了,"这明显是个 bug"的冲动会比任何阶段都强,而它依然可能是行为本身。
⭐ **无容器 scope-hoisted 产物(Vite/esbuild,逐字分层交付的站)走另一条路:不重写,切**——拼接式分解(`scripts/census-bundles.mjs` 出 chunk 图与坐标 → `scripts/slice-esm.mjs` 按声明切成语义命名的部件,按序拼接逐字节等于原件 → `scripts/verify-reassembly.mjs` 一门定案,字节等价成立时全部运行时门的裁决免费转移)。执行侧不变,浏览器继续跑原 chunk。详见 `readable-source.md` §3.0.6。
### 分支路由表
Step 1 侦察结果决定加载哪些场景指南(按需,不要全量加载):
| 侦察发现 | 加载 |
|---|---|
| Next.js App Router / RSC(`self.__next_f` flight 流)——C1 重构式逆向 | [references/rsc-reconstruction.md](references/rsc-reconstruction.md) |
| WebGL / Canvas 场景(three.js、自研引擎、GLSL) | [references/webgl-scenes.md](references/webgl-scenes.md) |
| GSAP / 烘焙动画数据 / CSS 变量动画 / 自研输入状态机 | [references/animation-recovery.md](references/animation-recovery.md) |
| 私有二进制格式(.buf / .sog / VAT / GLB 时间线 / .riv) | [references/binary-formats.md](references/binary-formats.md) |
| Shopify 店铺(指纹见 `cdn/shop`、`Shopify.theme`、`cdn.shopify.com`) | [references/shopify-platform.md](references/shopify-platform.md) |
| Sanity CMS(指纹见 `cdn.sanity.io/images/<projectId>/`、`*.api.sanity.io`、载荷里成片 `_key`/`_type`/`_ref`)——⛔ 判级看内容烘焙时点不看库名,且 `auto=format` 资产按 Accept 协商返回不同字节 | [references/sanity-platform.md](references/sanity-platform.md) |
| 门红了、或像素 / 数值残差需要归类(真差异 vs 方法学噪声) | [references/gate-failure-modes.md](references/gate-failure-modes.md) |
| 数值门 / 跨侧门 / 采集基线的用例设计;M(n) 清单式核对 | [references/gate-case-design.md](references/gate-case-design.md) |
| 内联序列化载荷(flight / `__NUXT__` / devalue 数据岛)或策略 A 外壳构建 | [references/payload-gates.md](references/payload-gates.md) |
| DOM 层策略选型(所有站必经;Webflow 导出 / 静态单页 / 框架 SSR 分支不同,另有"DOM 被 3D 引擎当坐标源读"的正交约束) | [references/dom-shell-strategies.md](references/dom-shell-strategies.md) |
| 大体量资产(百 MB 级媒体 / 授权字体) | [references/asset-management.md](references/asset-management.md) |
| 无头探测行为异常 / 疑似环境问题 | [references/environment-traps.md](references/environment-traps.md) |
### Step Summary
| 阶段 | 关键动作 | 阻塞门验收 | 产出物 |
|---|---|---|---|
| Step 0 | 指纹探测判级 | 判级明确且已告知用户 | 判级结论与依据 |
| Step 1 | 证否 + 评级 + 确认范围 | 用户确认 | 难度评级表、范围共识 |
| M0/M0.5 | 镜像 + 账本 + 断网跑通 | **`verify-mirror` 五项全绿**;GAP=0;零 404/零错误/零外联 | `mirror/`(只读)、manifest、`serve.mjs` 参照服 |
| M1 | 展开 bundle、逆向笔记、钉栈 | engine-notes 完成;版本钉死表完成 | `_pretty/`、`docs/engine-notes.md`、`REBUILD_PLAN.md` |
| M2+ | 溯源移植、里程碑成对提交 | 每里程碑冷启动实测 + CLEAN 门绿 | 带行号注释的源码、三张登记表滚动更新 |
| M(n-1) | 对拍验收 | 所选门型全绿或差异全部登记 | 验证脚本 + 对拍产物入库(`docs/compare/`) |
| M(n) | 冷头评审 + 版权取证 + 呈交用户 | 清单对账零缺口;用户已作出部署决定(未决则维持安全默认) | 审计记录、DEPLOY.md |
| M(n+1) | 拆模块 + 去混淆 + 注释 + 自包含 | 现有门全绿且**容差未放宽**;符号门双向单射零孤儿;自包含门(复制出去、断网、构建)过 | `src/`(可读工程)、`docs/rename-map.json`、`src/README.md` |
## Script Directory
Node 22+,路径相对本 skill 目录。每个脚本都认 `--help`(打印头注用法 + 旗标清单)与 `--version`(skill 版本),**未知旗标一律 FATAL**(`lib/cli.mjs`)。本表只列一句话用途;每个脚本的完整说明、旗标、实证与成熟度见 [scripts/README.md](scripts/README.md) 与 [tools/README.md](tools/README.md)(含自本表迁出的速查表)。
⭐⭐ **依赖纪律是按阶段划的,不是按目录划的:源码化之前,整条流水线零依赖。**
Step 0 → M(n) 全程不装任何东西;**复刻项目要到 M(n+1) 才获得 devDependencies**(作用域安全的重命名需要真正的 parser)。`scripts/`(零依赖)与 `tools/`(允许 devDeps)只是这条阶段线在目录上的投影——**判据住 `scripts/`,源码化阶段的重构器住 `tools/`**。
⛔ **任何门不许 import 任何工具**(`verification-gates.md` §2.1.2)——检查者不能是生产者。
⭐ **前面的阶段需要真正的 parser 怎么办?外挂,不要 import。** `beautify-bundle.mjs`(js-beautify)与 `module-map.mjs`(acorn)都是 `spawn` 一个**钉死版本的 npx**,脚本自身仍然零依赖、仍然可独立审查。⛔ **不要改成手写词法器**(实证:`references/case-studies/skill.md`「Script Directory」)。**token 流上的括号匹配是精确的,文本上的括号匹配是对字符串/正则/注释的猜测。**
⚠ 这条线是**被违反之后才被发现的**(实证:`references/case-studies/skill.md`「Script Directory」)。**一条只写在文档里、没有任何东西去查的规矩,会安静地失效。**
| 脚本 | 用途 | 使用阶段 |
|---|---|---|
| `scripts/fingerprint.mjs` | Step 0 探测协议的零依赖等价实现:存活 / 重定向终点 / 双抓 diff / 技术指纹 / bundle 初检 + Sanity 证据采集(只采证据,不出判级) | Step 0 |
| `scripts/mirror-site.mjs` | BFS 爬虫镜像:资产白名单、`redirect:manual`、三本账(含 sha256)跨运行累积、off-host 普查;`--scope` 只限页面不限资产 | M0 第一遍 |
| `scripts/netcapture.mjs` | 真实浏览器 CDP 抓包,对账补录运行时资源(CDN 站必须传 `--hosts`) | M0 第二遍 |
| `scripts/verify-mirror.mjs` | 镜像自己的门:映射单射 / 账本 sha256 / 真实性(魔数 + 挑战页)/ 闭包 / 抽样回源,跑在断网门之前 | M0 关账前 |
| `scripts/gapfill-video.mjs` | HLS/DASH 流媒体阶梯补录(master → rendition → 分片) | M0(有流媒体时) |
| `scripts/reconcile-gaps.mjs` | 运行时缺口对账:netcapture 的 GAP 行 + 字节推导全集逐条补进镜像;请求头梯子 + 浏览器同款图片 Accept | M0(运行时资源多的站) |
| `scripts/wayback-mirror.mjs` | X 类抢救:从 CDX 按锚点 + 时间窗选一个连贯时刻,以 `id_` 原始字节抓成标准镜像,洞登记 `wayback-holes.txt` | M0(X 类) |
| `scripts/serve.mjs` | 零依赖静态服务器兼参照服:MIME / Range / 服务层改写 / 重定向回放;`--fallback-root` 回落链、`--stub-ext-hosts` 桩、`--rewrite` 登记式替换;未知旗标响亮失败 | M0.5 起全程 |
| `scripts/probe.mjs` | CDP 无头探针:console / 异常 / 网络 CLEAN 判定进 CI,`--no-external` 零外联,`--walk` 全滚动走查 | M0.5 起每 commit |
| `scripts/sweep-routes.mjs` | 渲染广度门:全路由一个浏览器,逐路由 0 错误 / 0 失败 / 0 外联 + 交互钩子;不要手搓逐路由起 Chrome | M0.5 起(多路由站) |
| `scripts/verify-offline.mjs` | 零外联门的静态一半:枚举产出里每个外部绝对 URL 并逐条裁决 | M0.5 起每 commit |
| `scripts/verify-payload.mjs` | SSG payload 门:内联序列化数据块(Nuxt / flight)求值展开后按结构对拍 | M0.5 起(有 SSG payload 时) |
| `scripts/verify-nextdata.mjs` | pages router 载荷门:`__NEXT_DATA__` 与 `/_next/data/*.json` 单侧自洽 + 双侧深比较 | M0.5 起(pages router 站) |
| `scripts/verify-lenprefix.mjs` | 自带长度的载荷门:flight 流逐行按 `T<hex>` 字节数前进,改写后落点仍须是行首 | M0.5 起(有 flight 载荷时) |
| `scripts/flight-decode.mjs` | C1 坐标系:把每页 flight 流解成模块引用表 / 预载 / 元素树 / JSX outline | M1(C1) |
| `scripts/beautify-bundle.mjs` | js-beautify@1.15.1 钉死展开 bundle 到 `_pretty/`,排版后 token 流自查,撞名断言 | M1 |
| `scripts/module-map.mjs` | 模块化 bundle 的分层表(spawn 钉死 acorn):认 webpack 容器与 Turbopack 扁平列表,认不出即 FATAL,覆盖率守卫 | M1(模块化打包产物) |
| `scripts/census-bundles.mjs` | 无容器产物的 chunk 级坐标账本(sha256 / 行数 / ESM 边),拼接式分解的第一步 | M1(scope-hoisted 产物) |
| `scripts/dump-timelines.mjs` | GLB 动画曲线 dump 成 JSON 数值账本 | M1(数据驱动动画时) |
| `scripts/closure.mjs` | 从种子模块算传递依赖闭包,竖切边界的唯一依据;未知种子 FATAL + did-you-mean | M2+(模块化打包产物) |
| `scripts/slice-modules.mjs` | 按模块 id 逐字切片,容器外字节(前奏 / 尾注)逐字带走,`--check` 重切须字节一致 | M2+(模块化打包产物) |
| `scripts/extract-source.mjs` | 字节切片器:按钉死行号区间切 `_pretty/` 拼成生成文件,sha256 守卫 + `--check` | M2+(逐字移植期) |
| `scripts/emit-webpack-chunk.mjs` | 多 chunk webpack 站的逐字再发射:按 module-map 边界切成部件再按源站容器形态拼回,`--check` 逐字节 | M2+(webpack 多 chunk 站) |
| `scripts/slice-esm.mjs` | 拼接式分解切片器:按声明把 ESM chunk 切成语义命名部件,按序拼接逐字节等于原件 | M2+ / M(n+1)(scope-hoisted 产物) |
| `scripts/verify-reassembly.mjs` | 重拼门:逐部件 sha + 按序拼接 sha + `--against` 对活原件三重比对 | M2+ / M(n+1)(scope-hoisted 产物) |
| `scripts/build-site.mjs` | 策略 A 构建层:按 `shell-config.mjs` 变换表从镜像生成 `site/`,逐条命中下限 + `--check` | M2+(策略 A) |
| `scripts/verify-shell.mjs` | 外壳字节门:逐文档 patience diff,每个差异块须能被变换表重放解释(不 import 构建器) | M2+(策略 A) |
| `scripts/verify-tokens.mjs` | token 流等价门:排版 / 再发射件 ≟ 源站原件逐 token 相等;凡以 `_pretty` 字节交付必跑 | M2+(排版字节交付时每 commit) |
| `scripts/verify-refs-served.mjs` | 引用可达门:产出字节里每条资源引用逐条问服务器(不再实现一遍解析) | M2+ 起每 commit |
| `scripts/verify-routes.mjs` | 路由 / 重定向 / 状态码契约门 | M2+ |
| `scripts/verify-ssr.mjs` | SSR / DOM 逐字节门 | M2+(有 SSR 产物时最先建) |
| `scripts/verify-tween.mjs` | 竖切的数值门:同一关键帧规格喂两侧,逐点比补间值与缓动曲线 | M2+(有补间 / 时间轴引擎时) |
| `scripts/harvest-cases.mjs` | 从源站活引擎采用例(`harvest.config.mjs`),只产出 A 侧 | M2+(源站引擎可达时) |
| `scripts/verify-harvest.mjs` | 采集基线的 B 侧:每条身份在移植侧恰好匹配一个,按行为把名字找回来 | M2+(有采集基线时) |
| `scripts/verify-crossside.mjs` | 跨侧门:同一份输入串行喂镜像与移植逐条比(`crossside.config.mjs`),URL 相同直接 FATAL | M2+(源站有可直接调用的接缝时) |
| `scripts/pixelcompare.mjs` | 量化像素对拍:自比带宽 `--self`、状态对齐 `--ready / --after-ready / --chunk`、到达等待 `--hold*`、`--freeze-css`;非空帧前置条件;大视口用 jpeg | M(n-1) |
| `scripts/pixel-walk.mjs` | 检查点巡航:N 个滚动位置各跑一次像素门,滚两次、重复帧逐格报出,先 `--self` 测带宽 | M(n-1) |
| `scripts/side-by-side.mjs` | 双侧截图并排合成图(对拍产物留证) | M(n-1) |
| `scripts/frame-census.mjs` | 截图普查:颜色数与主色占比,证明帧里有东西 | M(n-1) |
| `scripts/probe-shim.js` | 确定性驱动 shim:接管 rAF / timer / 时钟 / `Math.random` / IntersectionObserver,手动泵到任意 t,双侧同位注入 | M(n-1) |
| `scripts/verify-flight.mjs` | C1 语义门:构建产物 flight 树 ≟ 镜像 flight 树,模块 id 全局双射,自带解析器 | M(n-1)(C1) |
| `scripts/cold-audit-modules.mjs` | M(n) 冷头清点(模块化产物):逐模块对账 + 计算型 require 扫描,必须报 `n/N examined` | M(n)(模块化打包产物) |
| `scripts/cold-audit-decls.mjs` | M(n) 冷头点名(扁平产物):深度 0 声明逐条判 cited / override / named / UNKNOWN | M(n)(扁平产物) |
| `scripts/verify-module-map.mjs` | M(n+1) 等价门(模块化产物):一模块一文件且与打包器字节 token 级一致 | M(n+1)(模块化打包产物) |
| `scripts/verify-symbols.mjs` | 符号映射门:`port/` 每个顶层声明在 `src/` 有且仅有一个对应(读 `rename-map.json`) | M(n+1)(扁平产物) |
| `scripts/verify-fresh.mjs` | 新鲜度门:`src/` → `dist/` → `site/` 是否同步;时间戳不是判据 | M(n+1)(有构建步骤时每次) |
| `scripts/verify-standalone.mjs` | 自包含门:`src/` 复制到临时目录 → 断网 → 安装 → 构建 → CLEAN 与零外联 | M(n+1) |
| `scripts/verify-zerodep.mjs` | 依赖分界门:`scripts/` 只许 node: / 相对 import,且没有门 import `tools/` | 每次新增脚本 |
| `scripts/lib/urlpath.mjs` | 唯一的 url → 本地路径映射(查询感知),爬虫 / 抓包 / 服务 / 门四方共用 | lib |
| `scripts/lib/extract-refs.mjs` | 唯一的资产引用提取器(五种写法 × 原文 / 解码两遍),爬虫与闭包门共用 | lib |
| `scripts/lib/negotiate.mjs` | 内容协商 Accept 策略(浏览器同款图片 Accept)+ Sanity 证据提取 | lib |
| `scripts/lib/ports.mjs` | 端口分配与实例身份(`21000 + slot×1000 + lane×10 + side`),占用即响亮失败 | lib |
| `scripts/lib/chrome.mjs` | 无头浏览器生命周期:进程组收割 + 孤儿自检 + CDP 载荷硬顶常量 | lib |
| `scripts/lib/png.mjs` | 零依赖 PNG 编解码 | lib |
| `scripts/lib/tokens.mjs` | token 流读法(acorn 钉死 spawn)+ 首分歧定位 | lib |
| `scripts/lib/cli.mjs` | 唯一的 argv 合同:`--help` / `--version` / 未知旗标 FATAL,`EXIT` 退出码表 | lib |
| `scripts/lib/hash.mjs` | 唯一的 sha256 拼写(字符串 / Buffer / 流式文件) | lib |
| `scripts/lib/ledger.mjs` | 镜像三本账(manifest / inventory / redirects)的唯一读写实现 + `LEDGER_FILES` | lib |
| `scripts/lib/cdp.mjs` | 唯一的 CDP 客户端:逐调用超时、断连响亮失败、事件订阅 | lib |
| `tools/name-modules.mjs` | 模块提名:按 0–4 级证据给内容哈希 id 起名并记依据,无证据保留 id | M(n+1)(模块化打包产物) |
| `tools/accept-names.mjs` | 命名的接受步:默认只接受 tier-1(打包器声明的导出名),其余保留 id | M(n+1) |
| `tools/modules-to-src.mjs` | 按接受后的命名逐模块生成 `src/modules/`(作用域安全的重命名器) | M(n+1)(模块化打包产物) |
| `tools/sourcify-chunk.mjs` | 多 chunk 站的 M(n+1) 驱动:逐 chunk 跑 name-modules → accept-names → modules-to-src → verify-module-map | M(n+1)(多 chunk 站) |
| `tools/group-parts.mjs` | 把 slice-esm 部件按域折进目录(只按 classy 证据分组) | M(n+1)(scope-hoisted 产物) |
| `tools/make-standalone.mjs` | 交付物生成:按账本复制资产、生成 package.json / verify-bytes;`--mirror a,b` 回落链 | M(n+1) |
| `tools/flight-to-mdx.mjs` | 从 flight 树反推 MDX / 页面骨架 | M2+(C1 重构工程) |
| `tools/assemble-static.mjs` | 把 `next build` 产物摊成静态树供 serve.mjs 伺服(像素门两侧同经 serve) | M(n-1)(C1 重构工程) |
| `tools/harvest-optimized-images.mjs` | next/image 优化器产物补齐(镜像字节优先,本机优化器兜底) | M(n-1)(C1 重构工程) |
| `tools/verify-fresh-next.mjs` | verify-fresh 的 Next 形态:src → `next build` → assemble-static 链重建比字节(前提 `generateBuildId` 钉死) | M(n+1)(C1 重构工程) |
## 复刻工程目录结构
三个阶段性产物,**单向依赖,读作「证据 → 移植 → 源码」**:
```
<site>-rebuild/
├── mirror/ # ① 只读证据:源站 URL 空间的字节级还原。永不修改
│ └── _pretty/ # beautify 展开产物 + 再生成说明 README
├── port/ # ② 逐字移植:机器读,extract-source --check 守着字节一致。永不手改
│ └── _gen/ # 切片器产物(行号头指回 mirror/_pretty/)
├── src/ # ③ 人写的工程:可读、可改、自包含(复制到任何地方都能跑)
│ ├── package.json # ⛔ 自己的 package.json——自包含门要把它复制出去单独跑
│ ├── assets/ # 资产在这里(③ 阶段必须复制,见 readable-source.md §2)
│ └── README.md # 怎么跑 / 坐标系怎么读 / 哪些注释是我们写的
├── docs/
│ ├── engine-notes.md # 逆向笔记(事实/怪癖/复刻结论三段式)
│ ├── rename-map.json # ③ 阶段符号映射(port 位置 → 旧名 → 新名 → 依据档位)
│ └── compare/ # 对拍产物留证
├── REBUILD_PLAN.md # §0 纪律 / 阶段计划 / §6 偏差表 / §Q 怪癖表 / §7 里程碑日志
├── mirror-manifest.json # 镜像账本(sha256 逐文件)
├── scripts/ # 判据与前置工序:零依赖,从本 skill 拷入
└── tools/ # 重构器:③ 阶段专用,允许 devDependencies(见下)
```
⛔ **`src/` 里发现行为不对,答案在 `port/` 或 `mirror/`,不在 `src/`。** 就地"改到对"会把移植 bug 变成无法追溯的本地补丁,**而且门会变绿**——这是纪律 2 在三段坐标系下的形式。`port/` 在 `src/` 建成后不删除,它是等价性的另一端。
⭐ **依赖分界按阶段**:**源码化之前零依赖**——项目到 M(n+1) 才有 devDependencies。`scripts/`(判据与前置工序)零依赖,必要时 spawn 钉死版本的 npx;`tools/`(源码化重构器)允许 devDependencies。任何门不许 import 任何重构器。由 `scripts/verify-zerodep.mjs` 守。
## References
按需加载(Step 0/1 与分支路由表决定),不要开局全量读入:
- [scope-and-fingerprint.md](references/scope-and-fingerprint.md) — 第 0 步判级与路由(必经)
- [recon-and-rating.md](references/recon-and-rating.md) — 开工侦察与难度评级(必经)
- [mirroring.md](references/mirroring.md) — 镜像取证全流程(必经)
- [reverse-engineering.md](references/reverse-engineering.md) — 行号坐标系与逆向笔记(必经)
- [porting-discipline.md](references/porting-discipline.md) — 溯源移植纪律(必经)
- [verification-gates.md](references/verification-gates.md) — 门型定义、决策树、运行纪律、分层体系(必经)
- [gate-failure-modes.md](references/gate-failure-modes.md) — 门的失效模式、根因修复与残差归类(门红了再读)
- [gate-case-design.md](references/gate-case-design.md) — 用例设计与清单式核对(数值门 / 跨侧门 / M(n) 清点前读)
- [payload-gates.md](references/payload-gates.md) — 载荷与外壳变换的门(有内联载荷或策略 A 时)
- [determinism.md](references/determinism.md) — 确定性冻结协议与 probe-shim
- [dom-shell-strategies.md](references/dom-shell-strategies.md) — DOM 层策略选型(A/B/C + 正交约束 D)(所有站必经)
- [webgl-scenes.md](references/webgl-scenes.md) — WebGL/GLSL 场景逆向
- [animation-recovery.md](references/animation-recovery.md) — 动画/输入逆向路径
- [binary-formats.md](references/binary-formats.md) — 私有二进制格式
- [shopify-platform.md](references/shopify-platform.md) — Shopify 平台层剥离(B 类)
- [sanity-platform.md](references/sanity-platform.md) — Sanity CMS 场景(判级三形态、`auto=format` 协商陷阱、变体阶梯两层展开、运行时拼接 API base)
- [asset-management.md](references/asset-management.md) — 资产不复制策略与字体决策
- [environment-traps.md](references/environment-traps.md) — 环境陷阱手册
- [legal-and-deploy.md](references/legal-and-deploy.md) — 版权取证与部署决断(取证归 skill,决定归用户)
- [readable-source.md](references/readable-source.md) — M(n+1) 源码化:port/ → src/ 的可读工程(拆模块、去混淆、注释纪律、自包含契约)
- [rsc-reconstruction.md](references/rsc-reconstruction.md) — C1(RSC)重构式逆向:flight 坐标系、MDX 反推、语义门、平台层工件
- [archival-rescue.md](references/archival-rescue.md) — X 类死站抢救:CDX 分层覆盖侦察、锚点 + 时间窗、洞登记
- [beyond-the-rebuild.md](references/beyond-the-rebuild.md) — 交接:拿产出做自己的项目(脚手架化不是本 skill 的阶段)
- [assets/templates/rebuild-plan.md](assets/templates/rebuild-plan.md)、[assets/templates/engine-notes.md](assets/templates/engine-notes.md) — 文档模板
- [case-studies/skill.md](references/case-studies/skill.md) 与 `references/case-studies/<doc>.md` — 各文档的实证记录(战史),不在必经集合里;只在需要证据时读
## Notes
- **版权红线**:本 skill 用于学习目的的复刻。产出默认私有 + noindex(安全默认,不是法务结论);公开部署前必须完成逐资产版权取证、把决定交回用户、并显著标注非官方复刻与原作者归属。最大风险是法务不是技术——但**法务判断由用户作出,且永不用于削减镜像完整性或门的覆盖面**。
- **工期预期**:方法论成熟形态下,单页创意站 1-3 天(数十个 commit);多场景 WebGL 作品集站按周计。向用户给预估时参考 Step 1 的难度评级。
- **对拍失败先怀疑环境**:后台节流、HMR 幽灵模块、探针时钟、headless 字体缺失都会伪装成代码 bug。判定源码问题前先过 environment-traps.md 的校准清单。
- 遇到本 skill 未覆盖的场景(B 类缺口),明确告诉用户"这一段没有既成指南,按通用纪律推进",并把新经验记入项目文档——它们是 skill 下一版的输入。
Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!