website-rebuild-skill

中文 | English

给一个网址，让你的 AI agent 把那个网站逐行复刻出来，并且能证明复刻得对。

它不是"做一个看起来很像的页面"。它把源站的实现当作规格书：先把整站抓成只读证据，再从压缩过的代码里逐行还原逻辑，最后用一整套自动验收门证明"复刻侧和源站在做同一件事"——包括逐像素比对。

遵循 Agent Skills 开放规范，为任何支持 skills 的智能体设计。跨运行时不是口号而是实测：验证清单里既有 Claude Code 跑完的目标，也有 Codex 全程跑完的目标（Hashgraph VC，166/166 响应字节一致）——同一份 skill 目录，放进哪个 runtime 都能走完整条管线。

目录

• 特性
• 效果对比：源站 vs 复刻
• 快速开始
• 它怎么工作
• 适用范围
• 这和"扒站"有什么不一样
• 已验证过的网站
• 仓库结构
• 关于版权
• 路线图
• 更新记录
• 贡献
• 许可
• 友情链接

特性

• 判级先行——开工前先探测目标属于哪一类、能不能做；做不了会直接说明原因，不会硬跑产出垃圾
• 取证式镜像——整站抓成只读快照（逐文件 sha256 账本、引用闭包校验、真实性检查），断网也能跑
• 行号可溯源的逆向——复刻里的每一行都能指回源站 bundle 的哪一行；bug 与怪写法照抄不修
• 量化验收——控制台 / 网络 / DOM / 几何 / 逐像素五层自动比对，差异要么修掉、要么登记，不许糊过去
• 源码化交付——逐字移植的产物重写成人能读的工程（拆模块、按证据命名、补溯源头注），复制到任何地方断网可跑
• 零依赖工具链——59 个 Node 脚本（47 个工序脚本与验收门 + 7 个共用库 + 5 个源码化/反推重构器），源码化之前整条流水线不装任何 npm 包
• 死站也能救——Wayback 存档抢救：锚点+时间窗选一个连贯时刻、原始字节落成标准镜像、永久洞如实登记；五次死站抢救实测（四个复活、其一走完 L3；一个画面层确证全失,失败形态入册）
• 连 RSC 站也能重构——服务端组件源不下发（React Server Components / Next.js App Router），但它的完整输出（flight 流）内联在每页 HTML 里就是规格书：从中重构一个可构建的 Next 工程，用 flight 语义门收口。实测一个 Next 16/Turbopack 博客站 18/18 路由语义一致，一个 144 路由重站 PASS 144/144；盲逆向对公开源码判卷，结构 ≈95%、行为 ≈98%
• 法务决定权归用户——skill 只取证与呈交，产出默认私有 + noindex + 不部署

效果对比：源站 vs 复刻

每张图左半是源站的只读镜像，右半是复刻侧，均取自各项目验收时的对拍截图：同视口、同滚动位置、同动画时刻。除注明者外，所示帧均为逐像素一致（meanAbsDiff 0.00）。

lusion.co —— 1.25 MB 自研 WebGL 引擎 + 156 个 shader。3D 物理堆叠的姿态来自模拟本身，钉死模拟随机态后两侧逐像素一致。

apple.com/airpods-pro —— 565 个 webpack 模块逐字移植，9 个滚动检查点逐像素一致，此为首屏。

hubtown.co.in —— Theatre.js 驱动的全屏 WebGL 长镜头（Nuxt 3 + three.js）。实时渲染帧，像素差落在同侧噪声带内（meanAbsDiff 0.96）。

samsy.ninja —— 赛博朋克 WebGPU 实时场景，238 MB 重资产。两侧各自实时渲染同一时刻，胶片颗粒噪声为场景自带。

www.on.energy —— Nuxt 3 + WebGL GLB 场景 + Storyblok headless CMS。页顶视频两侧钉到同一帧后，逐像素一致。

raycast.com/keyboard —— 判级到源码化单次会话跑完。注意键盘上方那条未加载的懒加载占位条：两侧一模一样——bug 与怪状态照抄不修，这正是纪律第 4 条。

快速开始

前提

安装

把 skills/website-rebuild/ 整个目录放进你的 agent 的 skills 目录。以 Claude Code 为例：

# 用户级（或项目级 .claude/skills/）
cp -R skills/website-rebuild ~/.claude/skills/website-rebuild

其他支持 Agent Skills 规范的 runtime，按其各自的目录约定放置同一份目录即可。

使用

给你的 agent 一个网址，说"复刻这个站"或"1:1 rebuild 这个网站"。

过程中它会来问你：复刻范围（整站还是指定页面）、做到哪一级（L1 镜像存档 / L2 工程化复刻 / L3 源码化——梯子单调，选低不亏，以后随时续跑升级）、外部依赖怎么处置、以及所有涉及"能不能公开"的判断。这些是你的决定，agent 不会替你做。

大概要多久：工期随版本一路收敛——早期项目按周计，现在中小型站（几十条路由以内）一次会话内无人值守跑完判级到源码化全程，重 WebGL / 自研引擎的站约 1–3 天。agent 会在开工前给出难度评级与预估。

它怎么工作

你给一个网址，agent 会自己走完这条链路：

它盯着的是"对不对"，不是"像不像"。一个自研 WebGL 引擎站的复刻，三条路由做到了跨侧逐像素一致（meanAbsDiff 0.00），最终产出 389 个源码模块、中位数 18 行；一个 44.9 万行的 Nuxt/Vite 站，拆成 2,043 个语义命名部件、按域折进 scene/camera/wave 等目录后，逐字节重拼一致。

⭐ 最后一步是"源码化"，而它必须排在最后。 重构最怕改完不知道有没有坏；这里在动手之前已经有了一个逐像素精确的裁判，所以每一次拆分、每一次改名都能被证死。没有裁判的重构是盲改。

⭐ skill 的终点也在这里：到"人能读懂的真实"为止。 拿产出去做你自己的项目（脚手架、fork、二次创作）是你的工程，不是它的阶段——它不替你起名字、写故事、换内容，因为那些决定只有你自己能做。但它留了一样别处没有的东西：交付物自带的字节清单与重拼门，让你 fork 之后精确地知道自己每一步偏离了源站什么。交接指南见 beyond-the-rebuild.md。

全程遵守的六条纪律

它们不是风格偏好。这六条是从实践里挨个撞出来的，违反任何一条都会在后面的阶段以 bug 的形式偿还：

1. 镜像只读，永不修改——它是全项目唯一的证据基准
2. 以源码为唯一裁决，不凭肉眼调效果
3. 源站有的都要有，源站没有的不发明——宁可先不像，也不自创补丁
4. bug、死代码、怪写法照抄不修——压缩代码里的每个怪写法都可能是行为本身
5. 有意的差异必须登记，写清"源站怎么做 / 我们怎么做 / 为什么"——没登记的差异一律算 bug
6. 代码与文档同一次提交

⚠ 第 3 条在最后的源码化阶段有一条明确边界：在人写的那份源码里重命名、拆模块、补注释不算"发明"——那一份是显式登记的衍生物，不是对源站的断言。但两条硬线不动：不许顺手重构（合并重复、提取公共函数、改算法都会让"等价"变得无法判定），以及注释里的推测必须标注成推测。

适用范围

已跑通的场景（A / B 类）

有条件或做不了的场景

三类各自的实测样本见下文已验证过的网站。

这和"扒站"有什么不一样

用 wget、HTTrack、SingleFile 之类的工具把网站抓到本地，也能双击打开、也能离线跑。如果你只是想留个存档或本地看看，那些工具就够了，不必用这个。

区别在于：扒站回答"它长什么样"，复刻回答"它是怎么做到的"。

镜像是这套流程的起点，不是终点。 第一步照样把整站抓成只读快照——但那份快照在这里的用途是当裁判：后面每一次"复刻侧对不对"的判断，都是拿它当标尺量出来的。扒站到此为止，复刻从这里开始。

已验证过的网站

已完整复刻

方法论的来源与试炼场——更新记录里的每一条，都来自其中某一个项目。

边界样本与死站抢救

43 站探测里划出边界的代表——边界是测出来的，不是声明出来的；五次死站抢救实测：四个复活（三个止于 L1，first-launch 走完 L3 全程，见上表），一个引擎救回、画面确证全失——失败形态也入册。

仓库结构

skills/website-rebuild/    # 技能本体，目录结构遵循 agentskills.io 规范
├── SKILL.md               #   主流程 + 判级 + 纪律（激活时整体加载）
├── references/            #   20 份分场景指南（按需加载）
├── assets/templates/      #   文档模板
├── scripts/               #   零依赖 Node 工序脚本与验收门 + lib/ 共用模块
│                          #     判级与源码化之前的全部工序都住这里
└── tools/                 #   源码化阶段的重构器，允许 devDependencies
selftest/                  # 仓库冒烟自检（npm test；不随 skill 分发）
.github/workflows/         # CI：push/PR 自动跑 npm test
CHANGELOG.md               # 更新记录
README.md                  # 本文件
README.en.md               # 英文版 README

⭐ 两个目录的分界是阶段，不是角色：源码化之前整条流水线零依赖——复刻项目要到最后一步才装东西。前面的工序需要真正的 parser 时，spawn 一个钉死版本的 npx（js-beautify / acorn），脚本自身仍然零依赖、仍然可被独立审查。这条线由 scripts/verify-zerodep.mjs 看着，因为它曾经只写在文档里、被违反了八个版本没人发现。

关于版权：能不能做，和该不该公开，是两回事

本 skill 面向学习与研究用途。产出默认私有 + noindex + 不部署——这是一个保守的默认动作，不是 agent 替你下的法律结论。

公开之前必须完成逐资产的版权取证，而决定权始终在你：skill 只负责收集事实、列出选项与各自的风险边界、给出建议，凡涉及"能不能公开 / 部署 / 再分发"，一律显式交回给你。

⛔ 有一条硬规矩写死在 skill 里：法务考量永远不能削减镜像的完整性。曾经有一轮以"反正不公开"为由少抓了约 60% 的资产，而所有验收门全程显示通过——从那以后，"不抓"只允许有技术性理由。

路线图

• v0.3 已落地：C1（RSC）重构式逆向——flight 坐标系（flight-decode）、语义门（verify-flight，模块 id 全局双射）、正文反推器（flight-to-mdx）、运行时缺口对账器（reconcile-gaps）、指南 rsc-reconstruction.md；实测 rauchg.com 18/18 路由语义一致，盲逆向对答案判卷。v0.3.2–0.3.7 系列在 basement 等战役中继续演进：语义门重站淬炼（144 路由、双射审计换脊柱）、turbopack 三暗形态入图、X 类首个 L3 全程与"镜像可完整而站不可复活"失败形态入册、Sanity 场景入册、第四交付形态「逐字图 + 转写微运行时」。
• v0.2 已全部落地：拼接式分解（v0.2.0）及其目录分组与 chunk 图谱（v0.2.8）、三级终点与交接边界（v0.2.1）、声音验收面（v0.2.2）、渲染广度门（v0.2.3）、存档抢救（v0.2.4–0.2.6）、冒烟自检 CI（v0.2.7）。
• 源码化的两块空白：命名的还原率取决于代码本身留下多少线索——实测一个扁平站有 63% 的局部变量没有任何可依据的证据，一个模块化站有 27/46 个模块只能保留哈希 id。这不是欠账，错名比哈希更糟，因为哈希会让人去看。另一块是模块头目前只写事实与溯源，"这个模块是干什么的"仍然需要人来写——工具写不出，而写错比留白更糟。
• 远期：C1 的更难形态——服务端逻辑（不只是渲染结果）的推断深度、隐藏路由空间的枚举、动态图片/OG 生成器的重建；以及 D 类（个性化注水、无确定性验收基准）是否存在可对拍的子集。

更新记录

版本随真实复刻项目递进：每个版本发布的功能与修复，都先在至少一个完整项目上验证过。

完整记录见 CHANGELOG.md。最新版本 v0.3.8：门看不见的债——CSS 对账与 worker 供片链（basement 用户实测四连修回哺）。语义门只看 flight 树、看不见 CSS：逐字图交付下 DOM 外壳的类名活在 verbatim 编译串里，tailwind 漏扫 = 类全不生成，塌法极具迷惑性（白 logo 黑底黑字"消失"、幕布盖死全页）；token 台账是相对扫描面的，扫描面扩大即作废。配套 carry-css 方法论（镜像编译 CSS 机器搬运、需求面必须覆盖备用模式路由家族）、worker runtime 烤死前缀的静默死签名（全注册、零监听、零报错）、Worker 空字段 error 事件先查脚本 URL、npm 生命周期钩子不跟 npx 直调走——分别入 rsc-reconstruction.md §3.2、porting-discipline.md §2.5.1、environment-traps.md §9.5。

贡献

欢迎 issue 与 PR。两条与一般项目不同的约定：

• 每条功能与修复都要有实测出处——本仓的版本历史全部来自真实复刻项目里撞出来的问题，PR 请说明它在哪个目标上被验证过；
• scripts/ 保持零依赖（node: 之外不许 import，门不许 import 生产者）——scripts/verify-zerodep.mjs 会在评审时执行这条纪律；
• 提交前跑 npm test（秒级冒烟：语法 / 零依赖 / 共享库实测教训 fixture / 微型镜像端到端）——CI 会在 PR 上自动执行同一套。

许可

本项目基于 MIT License 发布。

许可管的是这个 skill 本身，不管你拿它去复刻什么。 复刻他人网站涉及的版权与合规判断由使用者自行承担——skill 内的授权前提（SKILL.md「使用前提与授权」）与本文的版权一节，才是关于用途的约束。

友情链接

• linux.do
• v2ex
• NodeSeek

Star History