website-rebuild-skill
boyang-hu · boyang-hu/website-rebuild-skill
Cho phép agent của bạn sao chép bất kỳ trang web nào bằng cách mirror mã nguồn và thực hiện xác minh tự động chính xác đến từng pixel.
复刻网站的 Agent Skill：抓只读镜像、从压缩代码逐行还原、自动比对验收。An agent skill that mirrors a website, rebuilds it from the minified code, and verifies the result with automated diffs.
Xem trước
Bạn có thể làm gì với nó
- Sao chép thiết kế landing page bằng cách xây dựng lại từ mã nguồn đã nén.
- Xác minh giao diện được dựng lại khớp với bản gốc từng pixel bằng công cụ so sánh tự động.
- Khôi phục một dự án hoạt động được từ kho lưu trữ web như Wayback Machine.
Kiểm tra an toàn
Không thấy dấu hiệu rủi ro trong các file đã quét.
Quét tự động các file trong repo. Luôn xem lại code trước khi chạy.
Trích từ README
website-rebuild-skill
中文 | English
给一个网址，让你的 AI agent 把那个网站逐行复刻出来，并且能证明复刻得对。
它不是"做一个看起来很像的页面"。它把源站的实现当作规格书：先把整站抓成只读证据，再从压缩过的代码里逐行还原逻辑，最后用一整套自动验收门证明"复刻侧和源站在做同一件事"——包括逐像素比对。
遵循 Agent Skills 开放规范，为任何支持 skills 的智能体设计。跨运行时不是口号而是实测：验证清单里既有 Claude Code 跑完的目标，也有 Codex 全程跑完的目标（Hashgraph VC，166/166 响应字节一致）——同一份 skill 目录，放进哪个 runtime 都能走完整条管线。
目录
特性
- 判级先行——开工前先探测目标属于哪一类、能不能做；做不了会直接说明原因，不会硬跑产出垃圾
- 取证式镜像——整站抓成只读快照（逐文件 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 条。
快速开始
前提
| 依赖 | 版本 / 说明 |
|---|---|
| Node.js | ≥ 22（内置 fetch / WebSocket 直连 CDP） |
| Chrome / Chromium | 本机安装，无头对比用 |
npx | 个别工序 spawn 钉死版本的外部工具（从不 import） |
安装
两种方式都行，装的是同一份目录。
方式一：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 会自己走完这条链路：
| 阶段 | 它做什么 | 你会看到 |
|---|---|---|
| 判级 | 先探测这个站属于哪一类，能不能做 | 判级结论与依据；不能做会直接说明原因，不会硬跑产出垃圾；已消失但有存档的站转入 Wayback 抢救 |
| 镜像取证 | 把整站抓成只读快照，断网也能跑起来 | 一份逐文件带校验和的镜像与账本 |
| 逆向 | 把压缩过的代码展开，让复刻里的每一行都能指回源站的哪一行 | 一份逆向笔记，说明这个站是怎么实现的 |
| 移植 | 逐行还原到你自己的工程里，每处改动都标注源码出处 | 可运行的复刻工程 + 逐条登记的差异表 |
| 验收 | 自动比对两侧：控制台、网络、DOM、几何、像素 | 量化报告；差异要么被修掉，要么被登记，不许糊过去 |
| 收口 | 逐模块清点有无遗漏，并整理版权事实 | 审计记录 + 一份待你裁定的部署评估 |
| 源码化 | 把逐字移植的产物变成人能读的工程：拆模块、给变量命名、补注释、复制资产（无模块容器的产物走拼接式分解——切成语义命名的部件，按序拼回逐字节等于原件） | 一个可以复制到任何地方独立运行的源码工程，且每次启动前自动做逐文件字节自证 |
它盯着的是"对不对"，不是"像不像"。一个自研 WebGL 引擎站的复刻，三条路由做到了跨侧逐像素一致（meanAbsDiff 0.00），最终产出 389 个源码模块、中位数 18 行；一个 44.9 万行的 Nuxt/Vite 站，拆成 2,043 个语义命名部件、按域折进 scene/camera/wave 等目录后，逐字节重拼一致。
⭐ 最后一步是"源码化"，而它必须排在最后。 重构最怕改完不知道有没有坏；这里在动手之前已经有了一个逐像素精确的裁判，所以每一次拆分、每一次改名都能被证死。没有裁判的重构是盲改。
⭐ skill 的终点也在这里：到"人能读懂的真实"为止。 拿产出去做你自己的项目（脚手架、fork、二次创作）是你的工程，不是它的阶段——它不替你起名字、写故事、换内容，因为那些决定只有你自己能做。但它留了一样别处没有的东西：交付物自带的字节清单与重拼门，让你 fork 之后精确地知道自己每一步偏离了源站什么。交接指南见 beyond-the-rebuild.md。
全程遵守的六条纪律
它们不是风格偏好。这六条是从实践里挨个撞出来的，违反任何一条都会在后面的阶段以 bug 的形式偿还：
- 镜像只读，永不修改——它是全项目唯一的证据基准
- 以源码为唯一裁决，不凭肉眼调效果
- 源站有的都要有，源站没有的不发明——宁可先不像，也不自创补丁
- bug、死代码、怪写法照抄不修——压缩代码里的每个怪写法都可能是行为本身
- 有意的差异必须登记，写清"源站怎么做 / 我们怎么做 / 为什么"——没登记的差异一律算 bug
- 代码与文档同一次提交
⚠ 第 3 条在最后的源码化阶段有一条明确边界：在人写的那份源码里重命名、拆模块、补注释不算"发明"——那一份是显式登记的衍生物，不是对源站的断言。但两条硬线不动：不许顺手重构（合并重复、提取公共函数、改算法都会让"等价"变得无法判定），以及注释里的推测必须标注成推测。
适用范围
已跑通的场景（A / B 类）
| 场景 | 覆盖情况 | 实测规模 |
|---|---|---|
| 命令式 WebGL / Canvas 场景 | three.js、自研引擎、GLSL/TSL 逐字提取 | 1.25 MB 单 bundle + 156 个 shader；另一站 47,224 行 three 引擎 |
| GSAP 时间轴 / 滚动叙事 | 时间轴、ScrollTrigger、自研输入状态机 | 多个获奖作品集站 |
| 烘焙动画与私有二进制格式 | GLB / .buf / .riv / KTX2，反解成可校验的数值 | 53 个几何文件、170,289 顶点，格式从代码里逆出 |
| 静态构建器产物 | Astro / Nuxt SSG / Webflow 导出壳 / Vite / webpack | 单页站、SSG 站、导出壳站各若干 |
| 各种代码形态 | 压缩、混淆、未混淆都可以 | 全混淆 47k 行；未混淆 974 行；还有完全没有 bundle、逻辑写在模板内联块里的站 |
| 多语言 / RTL 站 | 双语路由成对对账、dir=rtl 布局、PJAX 转场 | 一个 en/ar 122 路由站（首个 RTL 样本） |
| 音频行为站 | 声音作为验收面：音频引擎池普查（全量 loaded、零音频 404、零外联）、运行时拼 URL 的音频族"池子即账本"采集 | 一个 98 音效池的游戏音频工作室站（主题音乐 + 逐控件交互音效，双编码） |
| B 类：平台层剥离 | Shopify（平台 / 应用 / 上游主题 / 站点自研四层分离） | 两个 Shopify 店铺，其一是主题 fork 的定制店 |
| B 类：第三方资产桶 / headless CMS | Storyblok（/m/ 变换接口）、Strapi 上传桶全量镜像 | 一个 ~1,800 图的 CMS 桶 + 一个 864 MB 的 Strapi 桶 |
| B 类：序列化数据块展开 | Nuxt 等 SSG 把数据编码进页面的形态 | 一个 63.5 KB 的数据块（占文档 54%），展开为 566 KB 结构化数据并逐项比对 |