Jane-xiaoer/claude-skill-web-clone · 上手攻略

  • 仓库：Jane-xiaoer/claude-skill-web-clone
  • 链接：https://github.com/Jane-xiaoer/claude-skill-web-clone
  • 分类：AI coding tools · Web development · Reverse engineering
  • 作者：Jay
  • 更新：2026-08-10

这是什么

一个 Claude Code Skill（方法论 + 配套脚本集），专注于"忠实复刻任意网站"——从单文件静态页到 WebGL 重前端，不靠 AI 臆测代码，全部走真源码逆向。

核心理念：AI 分析文档里的代码块，默认全是臆造的，必须用真源码逐行核对。作者用一个具体案例说明：一份 AI 分析把"光线-球体解析交点 + SVG feDisplacementMap 扭曲真实 DOM"的真架构，臆造成了 ray-marching + SDF + DOM 当纹理采样，照抄做出不来且慢 N 倍。

解决什么问题

想把某个网站的视觉/交互学过来做自己的版本时，AI 工具（GPT、Claude 等）爱产出一本正经的"复刻分析"，里面代码块看起来专业但全属虚构，照着写根本跑不通。claude-skill-web-clone 把"先拿真源码、再判路径、最后动手"固化成可重复的 6 步决策树，避免在臆造代码里越陷越深。

适用场景： - 想离线运行/本地保存某个喜欢的网站 - 想学习某站的技术实现（React 架构？Three.js 特效？） - 想把某站视觉风格迁移到自己的项目 - 逆向某 WebGL demo 的实现细节

快速安装

作为 Claude Code Skill 安装（推荐）：

git clone https://github.com/Jane-xiaoer/claude-skill-web-clone.git ~/.claude/skills/web-clone

安装后直接对 Claude 说： - 「复刻这个网站: https://example.com」 - 「Clone this site for me」 - 「逆向拆解这个 WebGL demo」 - 「把这个站抄下来改成我的」

Claude Code 会自动加载 SKILL.md，进入 6 步决策树。

直接用脚本（无需 Claude Code）：

# 脚本在仓库 scripts/ 目录下，可独立运行
node scripts/recon-site.mjs --url <URL> --out ./RECON --label original

⚠️ 脚本本地路径依赖 ~/.shared-skills/web-clone/scripts/（作者本机路径），直接 git clone 后需调整脚本内的路径引用。

核心用法：6 步决策树

Step 0 · 建工程骨架

node <脚本路径>/init-clone.mjs <站名> --url <原站URL>
# 创建 ~/projects/website-clones/<站名>-clone/
# 含 NOTES.md、RECON/screenshots/ 等标准产物

Step 1 · 先搜 GitHub（最高优先级）

# 用 gh api 搜同名仓库（vercel.app/netlify.app/github.io URL slug 常就是仓库名）
gh api "search/repositories?q=<关键词>" \
  | jq -r '.items[] | "\(.full_name) ⭐\(.stargazers_count) \(.description)"' | head -10

# 找到单文件 github.io 站？直接抓 raw
curl -sL https://raw.githubusercontent.com/<user>/<repo>/main/index.html

找到源码且许可允许 → 直接 clone，跳 Step 4。 教训：先搜 GitHub 能省 30 分钟弯路。

Step 2 · 无源码 → 浏览器侦察

# 标准探针：截图1440/768/390 三档 + 框架/THREE/Canvas 信号 JSON
node scripts/recon-site.mjs --url <URL> --out ./RECON --label original

# 资产收割
node scripts/asset-harvest.mjs --recon ./RECON/original-recon.json --out ./assets/original

# 网络请求捕获（XHR/fetch）
node scripts/network-capture.mjs --url <URL> --out ./RECON/network --label original

# 路由地图（最多 25 页 / 深度 2）
node scripts/route-crawl.mjs --url <URL> --out ./RECON/routes --label original --max-pages 25 --max-depth 2

# 交互探针（hover/click/scroll/canvas drag）
node scripts/interaction-probe.mjs --url <URL> --out ./RECON/interactions --label original

# sourcemap 搜索
node scripts/sourcemap-hunt.mjs --recon ./RECON/original-recon.json --out ./RECON/sourcemaps

Step 2.5 · 复杂度定级 + 选模式

根据侦察结果判断：

类型 走哪条路
静态 HTML/CSS，无框架 wget --mirror 抓镜像 → 删追踪 → 改文案
React / Vue / Next（内容为主） 找模板重建，灌内容
SPA / SaaS network-capture.mjs 保存 API fixtures → 本地 JSON mock
多页面官网 route-crawl.mjs 做路由地图 → 抽模板统一替换
复杂交互站 interaction-probe.mjs 记录完整状态再补交互
WebGL / Canvas / Three.js 重前端 深度逆向真源码；找不到源码走"运行时帧捕获 + baseline 闸门"
静态构建站（Astro/Vite SSG/Hugo） mirror-site.mjs 全量镜像部署资产 = 真 1:1 忠实复刻

如选「视觉复刻 / 内容爆改」，产出 design-dna.json（设计 token + 风格 + 特效），后续"DNA 留着、内容换掉"：

node scripts/dna-scaffold.mjs --recon ./RECON/original-recon.json --out ./RECON/design-dna.json --name "<站名>"

⚠️ 忠实复刻分支不要用 DNA——真源码就是真相，别让"近似风格"稀释逐字节铁律。

Step 3 · 按路径执行（详见参考文档）

  • references/reverse-engineering.md — WebGL/Canvas 逆向细节
  • references/effect-extraction.md — 证据分级 + baseline-first 复现闸门
  • references/static-mirror.md — Astro/Vite SSG/Hugo 全量镜像配方
  • references/design-dna.md — 设计身份层 schema
  • references/complex-playbooks.md — L4-L6 复杂站 playbook

Step 4 · 搭工程

mkdir ~/projects/website-clones/<站名>-clone && cd $_
# clone 源码进来；原始源码保留只读基准 index-original.html
# 检查 Node 版本（package.json engines），nvm use 对应版本，钉 .nvmrc

Step 5 · 删追踪 + 验证 + 记录

  • 删追踪：Google Analytics（gtag/googletagmanager）、像素、热图——精确切除（GA 块常在 <head> 顶部）
  • 写 NOTES.md（必须）：复杂度、复刻模式、原站 vs 克隆站对比、保真度评分、已知缺口
  • 复杂站写 TEARDOWN.md：技术拆解，所有结论标真源码行号
  • 浏览器真验证 + 截图对照

Step 6 · 内容替换

  • 替换文本 / 媒体 / 品牌色
  • design-dna.json 版本化留存设计 DNA

典型适用场景

  1. 学习某个 WebGL 站的技术实现：用侦察脚本拿到真实资产，再用逆向方法论逐行拆解关键 shader/effect
  2. 静态博客/作品集 1:1 镜像：mirror-site.mjs 全量抓取，连运行时 fetch 的 .wasm/.sog 都完整保留
  3. 仿站但怕抄错：先走 Step 1 找源码，找到后直接 clone 正版，避免 AI 臆造一套错误实现
  4. 把某个网站的视觉风格迁移到自己的框架：dna-scaffold.mjs 提取 design-dna.json，再用自己的技术栈复现设计 token

坑与注意

⚠️ "代码在 GitHub" ≠ "代码是 MIT"：很多 viral demo 没有 LICENSE 文件，默认 All Rights Reserved，学习可以，公开再部署需确认许可。

⚠️ AI 写的复刻分析，代码块默认臆造：即便是知名 GPT/Claude 生成的"详细分析"，代码部分也要逐行对照真源码。本 skill 的 marbles 案例（references/marbles-case.md）是标准反面教材。

⚠️ 脚本路径依赖本机配置：作者脚本默认路径 ~/.shared-skills/web-clone/scripts/；直接 git clone 后运行需手动修正脚本内路径，或软链接到对应目录。

⚠️ WebGL 逆向没有银弹：找不到源码时，只能走"运行时帧捕获 + baseline-first 复现闸门"，高保真度逆向仍需大量手工调试。

⚠️ 登录态私域站：skill 推荐用 bb-browser（作者自建？），普通用户可换用 Playwright MCP 或 Browser skill 替代。

与同类对比

claude-skill-web-clone 传统仿站工具 AI 复刻分析
核心逻辑 真源码至上 + 决策树 截图 + 肉眼模仿 AI 生成代码为主
WebGL 支持 完整逆向方法论 + 证据分级 基本不支持 臆造代码高发区
静态站镜像 mirror-site.mjs 完整抓取 部分支持 不支持
依赖 AI 程度 极低（最后一步才用） 无 完全依赖（主要缺点）
学习成本 中（6 步需理解） 低 低

传统仿站工具（如 Telerik、Figma 转代码）侧重视觉抄录，不解决技术实现问题；本 skill 更像工程化逆向方法论，适合想真正学懂原理的开发者。

一句话推荐结论

想做高质量网站复刻/逆向？先跑 Step 1 搜 GitHub，再按决策树走侦察和路径选择——AI 代码分析永远留到最后一步，且永远要用真源码核对。