name: web-clone description: > 网站复刻 / 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树，覆盖静态站 / React-Vue-Next 内容站 / WebGL-Canvas 重前端站三大分支，并强制核对任何 AI 二手分析里的可执行代码。 metadata: author: jane (xiaoer) version: "1.6.0" use_case: 个人本地复刻/学习网站，沉淀自 website-clones 克隆中枢

Web Clone · 网站复刻方法论

把"复刻一个网站"做成可重复的流程。配套工程区：~/projects/website-clones/（每个复刻是一个子目录）。

头号铁律：真源码至上，绝不信 AI 推测的代码

任何 AI 生成的"复刻分析/施工图"，正文的概念骨架可以参考，但里面的可执行代码块默认全是臆造的，必须逐行用真源码核对，否则照抄必崩。

实证（marbles 案例）：一份 AI 分析文档把原站"解析法求光线-球体交点 + 把光学结果编码成位移图、交给 SVG feDisplacementMap 去扭曲真实 DOM"的真架构，臆造成了"ray-marching + SDF + 把 DOM 当纹理采样"——两套完全不同的实现，照抄做不出原效果且慢 N 倍。详见 references/marbles-case.md。

所以第一动作永远是：拿到真源码。

决策树（按顺序走，不许跳）

Step 0 · 先建标准工程骨架

node /Users/jane/.shared-skills/web-clone/scripts/init-clone.mjs <站名> --url <原站URL>

该脚本会创建 ~/projects/website-clones/<站名>-clone/、NOTES.md、RECON/screenshots/，避免每次手工漏掉产物。

Step 1 · 先去 GitHub 搜源码，别急着抓站

unset SSL_CERT_FILE   # macOS 怪癖，bash 前先解
# 按站名/产品名搜
SSL_CERT_FILE=/etc/ssl/cert.pem gh api "search/repositories?q=<关键词>" \
  | jq -r '.items[] | "\(.full_name) ⭐\(.stargazers_count) \(.description)"' | head -10
# vercel.app/netlify.app/github.io 的 URL slug 常常就是 仓库名 / 部署者用户名

• 单文件站（github.io / 纯 HTML）→ 直接抓 raw：curl -sL https://raw.githubusercontent.com/<user>/<repo>/main/index.html
• 找到源码且许可允许 → 跳 Step 4 直接 clone。 教训：先搜 GitHub 能省 30 分钟弯路。

Step 2 · 没找到源码 → 浏览器侦察（探针）

加载 Browser skill 或 playwright MCP，跑探针抽信号（框架 / window.THREE / canvas 数 / 平滑滚动库 / 字体 / scrollHeight）。截图 1440/768/390 三档 + 侦察 JSON 存 <站>/RECON/。

优先用内置脚本跑标准侦察：

node /Users/jane/.shared-skills/web-clone/scripts/recon-site.mjs \
  --url <原站URL> \
  --out ~/projects/website-clones/<站名>-clone/RECON \
  --label original

node /Users/jane/.shared-skills/web-clone/scripts/asset-harvest.mjs \
  --recon ~/projects/website-clones/<站名>-clone/RECON/original-recon.json \
  --out ~/projects/website-clones/<站名>-clone/assets/original \
  --manifest ~/projects/website-clones/<站名>-clone/RECON/asset-manifest.json

node /Users/jane/.shared-skills/web-clone/scripts/network-capture.mjs \
  --url <原站URL> \
  --out ~/projects/website-clones/<站名>-clone/RECON/network \
  --label original

node /Users/jane/.shared-skills/web-clone/scripts/route-crawl.mjs \
  --url <原站URL> \
  --out ~/projects/website-clones/<站名>-clone/RECON/routes \
  --label original \
  --max-pages 25 \
  --max-depth 2

node /Users/jane/.shared-skills/web-clone/scripts/interaction-probe.mjs \
  --url <原站URL> \
  --out ~/projects/website-clones/<站名>-clone/RECON/interactions \
  --label original

node /Users/jane/.shared-skills/web-clone/scripts/sourcemap-hunt.mjs \
  --recon ~/projects/website-clones/<站名>-clone/RECON/original-recon.json \
  --out ~/projects/website-clones/<站名>-clone/RECON/sourcemaps

登录态私域站才用 bb-browser；localhost / 无登录公开站用 Browser skill 或 playwright（别动 bb-browser，会抢 Brave）。

Step 2.5 · 先给复杂度定级，别盲目承诺

根据侦察结果先写一版"复刻前预判"：复杂度 L1-L6、推荐模式（忠实复刻 / 视觉复刻 / 内容爆改）、预计可还原范围、明确不克隆的部分。分级和评分规则见 references/assessment.md。

若模式是「视觉复刻」或「内容爆改」 → 顺手产出结构化设计身份 design-dna.json，把"那个站的感觉"变成可版本化、可对照的 token 规范，让 Step 6 替换时"DNA 留着、内容换掉"有据可依：

node /Users/jane/.shared-skills/web-clone/scripts/dna-scaffold.mjs \
  --recon ~/projects/website-clones/<站名>-clone/RECON/original-recon.json \
  --out   ~/projects/website-clones/<站名>-clone/RECON/design-dna.json \
  --name  "<站名>"

脚本会把侦察到的字体/色候选/框架特效信号 best-effort 预填，其余字段人工 Analyze 补全。三维结构（design_system / design_style / visual_effects）、完整 schema、适用边界见 references/design-dna.md。

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

Step 3 · 按侦察结果选路径

L4-L6 复杂站按 references/complex-playbooks.md 走，不要只用普通官网流程。

Step 4 · 在克隆中枢里搭工程

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

Step 5 · 删追踪 + 写元信息 + 验证

• 删追踪：Google Analytics（gtag / googletagmanager）、像素、热图——逐行精确切除（GA 块常在 <head> 顶部）。
• 写 NOTES.md（必须）：包含复杂度、复刻模式、原站 vs 克隆站对比、保真度评分、已知缺口。模板见 references/deliverables.md。
• 复杂站写 TEARDOWN.md（技术拆解）。所有结论标真源码行号。
• 复刻后评分：按 references/assessment.md 给结构 / 视觉 / 交互 / 响应式 / 内容替换 / 功能完整度打分。分数要能被截图、源码、运行结果支撑。
• 浏览器真验证（硬要求，不许只看代码就说"应该能跑"）：起本地服务器 → 浏览器打开 → 抓 console（不能有 JS/WebGL 编译错误）→ 截图对照原站。诚实记录验证不了的部分（如合成 PointerEvent isTrusted=false 触发不了拖拽，要如实写，别伪造"拖动成功"）。

复刻完成后再跑一次克隆站侦察，并生成自动对比报告：

node /Users/jane/.shared-skills/web-clone/scripts/recon-site.mjs \
  --url http://127.0.0.1:<端口>/ \
  --out ~/projects/website-clones/<站名>-clone/RECON \
  --label clone

node /Users/jane/.shared-skills/web-clone/scripts/route-crawl.mjs \
  --url http://127.0.0.1:<端口>/ \
  --out ~/projects/website-clones/<站名>-clone/RECON/routes-clone \
  --label clone \
  --max-pages 25 \
  --max-depth 2

node /Users/jane/.shared-skills/web-clone/scripts/interaction-probe.mjs \
  --url http://127.0.0.1:<端口>/ \
  --out ~/projects/website-clones/<站名>-clone/RECON/interactions-clone \
  --label clone

node /Users/jane/.shared-skills/web-clone/scripts/compare-recon.mjs \
  --original ~/projects/website-clones/<站名>-clone/RECON/original-recon.json \
  --clone ~/projects/website-clones/<站名>-clone/RECON/clone-recon.json \
  --visual-diff ~/projects/website-clones/<站名>-clone/RECON/visual-diff-1440.json \
  --original-routes ~/projects/website-clones/<站名>-clone/RECON/routes/original-route-map.json \
  --clone-routes ~/projects/website-clones/<站名>-clone/RECON/routes-clone/clone-route-map.json \
  --original-interactions ~/projects/website-clones/<站名>-clone/RECON/interactions/original-interactions.json \
  --clone-interactions ~/projects/website-clones/<站名>-clone/RECON/interactions-clone/clone-interactions.json \
  --out ~/projects/website-clones/<站名>-clone/CLONE_REPORT.md

node /Users/jane/.shared-skills/web-clone/scripts/visual-diff.mjs \
  --original ~/projects/website-clones/<站名>-clone/RECON/screenshots/original-1440.png \
  --clone ~/projects/website-clones/<站名>-clone/RECON/screenshots/clone-1440.png \
  --out ~/projects/website-clones/<站名>-clone/RECON/visual-diff-1440.json \
  --diff ~/projects/website-clones/<站名>-clone/RECON/screenshots/visual-diff-1440.png

node /Users/jane/.shared-skills/web-clone/scripts/audit-clone.mjs \
  --project ~/projects/website-clones/<站名>-clone \
  --brand "<原站品牌名>" \
  --out ~/projects/website-clones/<站名>-clone/CLONE_AUDIT.md

Step 6 · 替换成 Jane 自己的东西

目标永远是"做她自己的站"，不是搬一个一模一样的。替换三件套：文字（index.html/data/*.json/content/*.md）、媒体（public/assets）、品牌色（CSS 变量 / Tailwind theme）。结构非平凡就写 REPLACE_GUIDE.md。

做过 design-dna.json（视觉/爆改模式）的：这一步就是它的兑现——DNA 留着、内容换掉。把 design_system 落成 CSS 自定义属性、按 design_style 做主观取舍、按 visual_effects.effect_intensity 选实现层级（lightweight CSS / medium Canvas+GSAP / heavy Three.js）；素材优先用 asset-harvest.mjs 取原站真图，别 AI 重绘近似。生成流程见 references/design-dna.md。

逆向拆解 WebGL/Canvas 重前端（核心手艺）

把交互站拆成技术支柱，逐柱定位真实实现 + 标行号：渲染（WebGL/着色器算法）、合成（SVG filter / 多 canvas / 后期）、物理、交互、音频。然后才去核对任何二手分析。

逆向特效时三件套纪律（治"边抠边美化、最后既不像也说不清"）：

1. 证据分级：每条结论标 SOURCE（真源码/source-map/运行时 dump/帧捕获）、PARTIAL（名字/切片，待证）、GUESS（视觉拟合/魔数）。未标=GUESS，照抄前必须升级到 SOURCE。
2. no-compensation：严禁靠调亮度/速度/位置/噪声去掩盖时序/坐标/状态错误；拟合值仍标 GUESS，写明要拿到什么证据才能升级。
3. baseline-first 闸门：先用真实 draw call/shader/uniform 做"最小原样可复现 RAW REPLAY"→ 逐帧比对通过 → 才允许重构工程化。 详见 references/effect-extraction.md（含运行时捕获兜底 + 何时委托 web-shader-extractor）。

可迁移的高级范式（值得攒着）：

• 位移图折射 DOM：离屏 WebGL 算出 RG=位移/B=菲涅尔的"位移图"，再用 SVG <filter><feDisplacementMap scale=N> 拿它去扭曲真实的、活的、可交互的 HTML——折射的是真 DOM，WebGL 全程不碰 DOM 像素。这是 marbles 的灵魂，也是 Three.js MeshPhysicalMaterial(transmission) 做不到的事（它只能做"玻璃球外观"，做不出"折射整个网页"）。

详细方法 + marbles 真架构逐项拆解 → references/reverse-engineering.md、references/marbles-case.md。

许可与署名（clone 前必查）

SSL_CERT_FILE=/etc/ssl/cert.pem gh api repos/<u>/<r> | jq '.license'  # + 找 LICENSE 文件 + 看 README

⚠️ 别把"GitHub 上是公开的"或"gh api 一时查不到"等同于 MIT——核实到底。

产物规范

• 每个子项目根目录：NOTES.md（源信息/技术栈/license/替换地图/跑起来命令）
• 复杂交互站追加：TEARDOWN.md（技术拆解，标行号）
• 需要对外汇报或评估 skill 效果时追加：CLONE_REPORT.md（原站 vs 克隆站完整对比）
• 上线前追加：CLONE_AUDIT.md（追踪脚本、原站品牌/语言残留、TODO、外链风险）
• RECON/screenshots/：原站 vs 克隆对照图
• 复刻完更新中枢 README.md 索引行

内置脚本

• scripts/init-clone.mjs：初始化克隆项目骨架和 NOTES.md。
• scripts/recon-site.mjs：用 Playwright 打开页面，采集框架/资源/DOM 结构/console 错误，并保存三档截图。
• scripts/asset-harvest.mjs：从侦察 JSON 下载原站图片、脚本、样式并生成素材清单。
• scripts/network-capture.mjs：捕获 XHR/fetch 请求并保存 JSON/text 响应，给 SPA/SaaS 做本地 fixtures。
• scripts/mirror-site.mjs：真浏览器全程滚动捕获每一个真实请求 → 按路径镜像同源资产（含 JS 运行时 fetch 的 .sog/.buf/.wasm/.riv/字体），给静态构建站（Astro/Vite SSG/Hugo）做 1:1 忠实复刻。详见 references/static-mirror.md。
• scripts/route-crawl.mjs：爬同站内部链接，按路由保存截图、标题、H1、结构信号，解决多页面站只复刻首页的问题。
• scripts/interaction-probe.mjs：自动执行 scroll、hover、安全 click、canvas drag，保存交互前后状态、截图、网络和 console 证据。
• scripts/sourcemap-hunt.mjs：从 JS chunk 里找 source map，能拿到就保存源码映射。
• scripts/compare-recon.mjs：读取原站与克隆站的侦察 JSON、路由图、交互证据，生成 CLONE_REPORT.md。
• scripts/visual-diff.mjs：用浏览器 canvas 做截图像素差异，输出 visual score 和差异图。
• scripts/audit-clone.mjs：扫描追踪脚本、原站品牌残留、日文残留、TODO、外部 URL 风险。
• scripts/dna-scaffold.mjs：从侦察 JSON 生成 design-dna.json 设计身份骨架（字体/色候选/框架特效信号 best-effort 预填），给「视觉复刻 / 内容爆改」模式用。详见 references/design-dna.md。

能力边界（默认口径）

• 能高保真做：静态营销页、企业官网、内容型 React/Vue/Next 前端、可直接拿到源码的动画站。
• 能视觉还原但会简化：CMS 后台数据、复杂滚动叙事、多端断点、WebGL/Canvas 特效、第三方嵌入。
• 默认不承诺完整克隆：登录、支付、下单、搜索推荐、权限系统、服务端业务逻辑、专有 API、受版权限制的素材。需要时只做可演示前端替身。
• 内容爆改时：优先保留原站的信息架构、节奏、动效和视觉语法，把文案、图片、品牌色、业务主张换成 Jane 自己的内容。

旗舰案例

~/projects/website-clones/marbles-clone/ — 原生 WebGL + SVG Filter + 自研物理的玻璃弹珠站，逐字节忠实复刻 + 完整 TEARDOWN，是"WebGL 重前端分支"的范例。

🪞 Web Clone · 网站复刻方法论

Reproduce any website — from a single-file static page to a WebGL-heavy interactive demo — without faking it from AI hallucinations. 把任何一个网站(从单文件静态页到 WebGL 重前端 demo)忠实复刻出来 —— 不靠 AI 臆测代码硬抄。

English · 中文

What this skill does

You see a website you love. You want to clone it — to learn how it works, to remix it into your own thing, or to run it offline. AI tools love to produce plausible-looking "clone analysis" documents full of code blocks that are entirely fabricated and break the moment you run them.

This skill is a methodology plus executable probes that put real source first, with a 6-step decision tree covering:

• Static HTML/CSS sites → wget --mirror
• React / Vue / Next content sites → rebuild on a template
• Multi-page sites → crawl internal routes before designing templates
• Interactive sites → record hover / click / scroll / canvas-drag states before cloning
• WebGL / Canvas / Three.js heavy frontends → reverse-engineer real source, line by line; when there's no findable source, runtime frame-capture + a baseline-first replay gate with SOURCE / PARTIAL / GUESS evidence grading
• Static-built sites (Astro / Vite SSG / Hugo), even WebGL-heavy → mirror-site.mjs full-scroll-captures and mirrors every deployed asset (incl. runtime-fetched .sog/.buf/.wasm) for a true 1:1 clone — for a static site, "get the real source" = "mirror the whole deployed bundle"
• Verify in a real browser, document the truth, replace content with yours
• Visual / rebrand modes → distill a versionable design-dna.json (design tokens + style + effects), then "keep the DNA, swap the content"

Iron rule: real source first, never copy AI-guessed code

Any AI-written "clone analysis" — treat the conceptual skeleton as a hint, but assume every executable code block is hallucinated until you've verified it against real source code line by line.

Case in point (see references/marbles-case.md): A real WebGL marbles demo uses analytic ray-sphere intersection + an SVG feDisplacementMap to refract the live DOM. An AI analysis confidently described it as ray-marching + SDF + sampling the DOM as a texture — two entirely different implementations. Copying the AI version produces nothing like the original and runs many times slower.

So step 1 is always: get the real source.

What's in here

claude-skill-web-clone/
├── SKILL.md                       ← The methodology (loaded by Claude Code / Codex / Cursor)
├── README.md
├── LICENSE                         ← MIT
├── follow-wechat-qrcode.jpg
└── references/
    ├── reverse-engineering.md     ← How to dissect a WebGL/Canvas frontend, line by line
    ├── effect-extraction.md       ← Evidence grading + baseline-first gate for extracting effects
    ├── static-mirror.md           ← 1:1 clone of static-built sites (Astro/Vite SSG/Hugo) via full asset mirror
    ├── design-dna.md              ← Structured design-identity layer (visual / rebrand modes)
    ├── marbles-case.md            ← Flagship case: real architecture vs AI hallucination
    └── deliverables.md            ← NOTES.md / TEARDOWN.md / RECON/ templates
└── scripts/
    ├── recon-site.mjs             ← Browser screenshots + DOM/framework/resource signals
    ├── mirror-site.mjs            ← Full-scroll capture + mirror every same-origin asset (static-site 1:1 clone)
    ├── route-crawl.mjs            ← Same-site route map + screenshot per route
    ├── interaction-probe.mjs      ← Scroll/hover/click/canvas-drag state evidence
    ├── network-capture.mjs        ← XHR/fetch capture for SPA fixtures
    ├── asset-harvest.mjs          ← Download discovered source assets
    ├── dna-scaffold.mjs           ← Build a design-dna.json skeleton, prefilled from recon
    └── visual-diff.mjs            ← Pixel comparison for original vs clone screenshots

Install

This is a Claude Code skill. Drop it into your skills directory:

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

Then use it by saying things like:

• "复刻这个网站: https://..."
• "Clone this site for me"
• "Reverse-engineer this WebGL demo"
• "把这个站抄下来改成我的"

Claude / Codex will load SKILL.md and walk the decision tree.

The decision tree (one-screen summary)

License & attribution discipline

Before deploying anything publicly, check the source repo's license:

⚠️ "Code is on GitHub" ≠ "code is MIT". Many viral demos have no LICENSE file and default to All Rights Reserved.

Flagship case

marbles-case.md documents the full reverse-engineering of chiuhans111/marbles — a 1067-line single-file WebGL + SVG-filter glass marbles interactive demo — and contrasts the real architecture with an AI-generated clone analysis that got the core mechanism completely backwards. This is the canonical example of why you must verify against real source.

中文

这个 skill 是干什么的

你看到一个喜欢的网站,想复刻 —— 学它怎么做、改成你自己的版本、或者离线跑起来。AI 工具最爱产出看起来煞有其事的"复刻分析文档",里面的代码块几乎全是臆造的,照抄必崩。

这个 skill 把"真源码至上"做成可重复的流程,6 步决策树覆盖三大分支:

• 静态 HTML/CSS 站 → wget --mirror
• React / Vue / Next 内容站 → 重建模板灌内容
• WebGL / Canvas / Three.js 重前端 → 逆向真源码,逐行核对;找不到源码时用运行时帧捕获 + baseline-first 复现闸门 + SOURCE/PARTIAL/GUESS 证据分级
• 静态构建站(Astro/Vite SSG/Hugo),哪怕重 WebGL → mirror-site.mjs 全程滚动捕获 + 镜像每一个部署资产(含运行时 fetch 的 .sog/.buf/.wasm),做真 1:1 忠实复刻——对静态站,"拿到真源码"="镜像部署资产整套"(范例:Lusion oryzo.ai,高斯泼溅,hero 像素 diff 5/5)
• 视觉复刻 / 内容爆改模式 → 把"那个站的感觉"蒸馏成可版本化的 design-dna.json(设计 token + 风格 + 特效),然后"DNA 留着、内容换掉"
• 浏览器真验证,如实记录,最后替换成你自己的内容

头号铁律:真源码至上,绝不抄 AI 臆造代码

任何 AI 写的"复刻分析",概念骨架可以参考,但里面的可执行代码块默认全是臆造的,必须用真源码核对,否则照抄必崩。

实证案例:一份 AI 分析文档把原站"解析法求光线-球体交点 + 把光学结果编码成位移图 + 交给 SVG feDisplacementMap 扭曲真实 DOM"的真架构,臆造成了"ray-marching + SDF + 把 DOM 当纹理采样"—— 两套完全不同的实现,照抄做不出原效果且慢 N 倍。详见 references/marbles-case.md。

安装

这是一个 Claude Code skill。clone 到你的 skills 目录:

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

然后跟 Claude / Codex / Cursor 说:

• 「复刻这个网站: https://...」
• 「把这个站抄下来改成我的」
• 「逆向拆解这个 WebGL demo」

AI 会自动加载 SKILL.md 走决策树。

旗舰范例

references/marbles-case.md 拆解了 chiuhans111/marbles —— 1067 行单文件 WebGL + SVG filter 玻璃弹珠站,真架构对比 AI 分析文档的错误,是"为什么必须真源码核对"的标准教材。

致谢 / Credits

• 方法论沉淀来源 / Origin:Jane 的克隆中枢 ~/projects/website-clones/ 工作流(2026-05-27 marbles 案例跑通后抽出 skill)
• 旗舰范例原作 / Flagship case author:chiuhans111/marbles by Hans Chiu — 没有这份单文件 1067 行的玻璃弹珠源码就没有这个 skill 的"真源码至上"铁律
• 设计身份层 schema / Design-DNA schema:references/design-dna.md 的三维 DNA JSON 改编自 zanwei/design-dna（MIT），用于"视觉复刻 / 内容爆改"模式
• 特效提取纪律 / Effect-extraction discipline:references/effect-extraction.md 的证据分级 + baseline-first 闸门受 lixiaolin94/skills · web-shader-extractor 启发（该仓库无 LICENSE，本 skill 只借方法概念、用自己的话重写，未复制其代码或原文）
• 迭代打磨 / Iteration:Jane(@xiaoerzhan) + Claude Code(多轮 reverse-engineering)

License

MIT. Use it freely, remix it, ship it. Attribution welcome but not required.

如果这个 skill 让你免于在 AI 臆造代码上浪费一个下午,欢迎 ⭐ 这个仓库。 If this skill saves you a frustrating afternoon of debugging fake AI code, ⭐ the repo.

📱 关注作者 / Follow Me

如果这个仓库对你有帮助,欢迎关注我。后面我会持续更新更多 AI Skill、设计方法、网站美学和创意工作流。

If this repo helped you, follow me for more AI skills, design systems, web aesthetics, and creative workflows.

• X (Twitter): @xiaoerzhan
• 微信公众号 / WeChat Official Account: 扫码关注 / Scan to follow