website-rebuild-skill

中文 | English

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

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

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

目录

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

特性

• 判级先行——开工前先探测目标属于哪一类、能不能做；做不了会直接说明原因，不会硬跑产出垃圾
• 取证式镜像——整站抓成只读快照（逐文件 sha256 账本、引用闭包校验、真实性检查），断网也能跑
• 行号可溯源的逆向——复刻里的每一行都能指回源站 bundle 的哪一行；bug 与怪写法照抄不修
• 量化验收——控制台 / 网络 / DOM / 几何 / 逐像素五层自动比对，差异要么修掉、要么登记，不许糊过去
• 源码化交付——逐字移植的产物重写成人能读的工程（拆模块、按证据命名、补溯源头注），复制到任何地方断网可跑
• 零依赖工具链——75 个 Node 脚本（51 个工序脚本与验收门 + 14 个共用库 + 10 个源码化/反推重构器），源码化之前整条流水线不装任何 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 条。

快速开始

前提

安装

两种方式都行，装的是同一份目录。

方式一：npx（一条命令，不用克隆仓库）

npx website-rebuild-skill                    # → ~/.claude/skills/website-rebuild
npx website-rebuild-skill --project          # → ./.claude/skills/website-rebuild
npx website-rebuild-skill --dir <skills 目录>  # 其他 runtime，目录名 website-rebuild 会自动追加

安装器只拷文件——不跑 skill、不开浏览器、不联网，本身零依赖。拷完按 sha256 逐文件双向校验，全部匹配才算成功；目标已存在会打印在装的版本并拒绝，要 --force 才替换。--dry-run 可以先看它打算写什么。

方式二：手动拷贝（已经克隆了仓库）

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

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

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

已验证过的网站

已完整复刻

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