Install any skill in seconds. Free to start, no credit card required.
Get Started Free →网站复刻 / 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树,覆盖静态站 / React-Vue-Next 内容站 / WebGL-Canvas 重前端站三大分支,并强制核对任何 AI 二手分析里的可执行代码。
.claude/skills/jane-xiaoer-web-clone/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-03 | ✗→✓ | ▲ Improved | 264% | 0% |
| case-04 | ✗→✓ | ▲ Improved | 271% | 0% |
| case-05 | ✗→✓ | ▲ Improved | 225% | 0% |
| case-06 | ✗→✓ | ▲ Improved | 224% | 0% |
| case-07 | ✗→✓ | ▲ Improved | 135% | 0% |
把"复刻一个网站"做成可重复的流程。配套工程区:~/projects/website-clones/(每个复刻是一个子目录)。
> 任何 AI 生成的"复刻分析/施工图",正文的概念骨架可以参考,但里面的可执行代码块默认全是臆造的,必须逐行用真源码核对,否则照抄必崩。
实证(marbles 案例):一份 AI 分析文档把原站"解析法求光线-球体交点 + 把光学结果编码成位移图、交给 SVG feDisplacementMap 去扭曲真实 DOM"的真架构,臆造成了"ray-marching + SDF + 把 DOM 当纹理采样"——两套完全不同的实现,照抄做不出原效果且慢 N 倍。详见 references/marbles-case.md。
所以第一动作永远是:拿到真源码。
bashnode /Users/jane/.shared-skills/web-clone/scripts/init-clone.mjs <站名> --url <原站URL>
该脚本会创建 ~/projects/website-clones/<站名>-clone/、NOTES.md、RECON/screenshots/,避免每次手工漏掉产物。
bashunset 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 常常就是 仓库名 / 部署者用户名
curl -sL https://raw.githubusercontent.com/<user>/<repo>/main/index.html加载 Browser skill 或 playwright MCP,跑探针抽信号(框架 / window.THREE / canvas 数 / 平滑滚动库 / 字体 / scrollHeight)。截图 1440/768/390 三档 + 侦察 JSON 存 <站>/RECON/。
优先用内置脚本跑标准侦察:
bashnode /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)。
根据侦察结果先写一版"复刻前预判":复杂度 L1-L6、推荐模式(忠实复刻 / 视觉复刻 / 内容爆改)、预计可还原范围、明确不克隆的部分。分级和评分规则见 references/assessment.md。
若模式是「视觉复刻」或「内容爆改」 → 顺手产出结构化设计身份 design-dna.json,把"那个站的感觉"变成可版本化、可对照的 token 规范,让 Step 6 替换时"DNA 留着、内容换掉"有据可依:
bashnode /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 稀释逐字节铁律。
| 侦察结果 | 走哪条路 | |---|---| | 静态 HTML/CSS,无框架 | wget --mirror 抓镜像 → 删追踪脚本 → 改文案 | | React / Vue / Next(内容为主) | 重建模板(如 ai-website-cloner-template,Node 24+),灌内容 | | SPA / SaaS / 数据驱动页面 | 先跑 network-capture.mjs 保存 API fixtures → 本地 JSON/mock server 替身 | | 多页面官网 / 产品站 | 先跑 route-crawl.mjs 做路由地图 → 每类页面抽模板 → 统一替换内容 | | 复杂交互站 | 先跑 interaction-probe.mjs 记录 hover/click/scroll/canvas drag 状态 → 按状态补交互,不许只截首屏 | | WebGL / Canvas / Three.js 重前端 | 深度逆向真源码(见下)→ 忠实复刻 或 找同类开源 3D 模板换内容。单文件原生站常常逐字节保留=最忠实复刻。找不到真源码时走运行时帧捕获 + baseline 闸门,纪律见 references/effect-extraction.md(可委托 web-shader-extractor) | | 静态构建站(Astro/Vite SSG/Hugo),含重 WebGL | mirror-site.mjs 全量镜像部署资产 → 自托管字体 + 删追踪 → 本地 web 根服务 = 真源码 1:1 忠实复刻。对静态站,"拿到真源码"="镜像部署资产整套"。配方见 references/static-mirror.md。范例:oryzo.ai(Lusion,L6,高斯泼溅,hero 像素 diff 5/5) | | 用现成开源主题的站(Astro/Hugo 主题) | 去对应主题市场找源主题(仅限套用现成主题的站;定制站走上一行的全量镜像,别来这行) |
L4-L6 复杂站按 references/complex-playbooks.md 走,不要只用普通官网流程。
bashmkdir ~/projects/website-clones/<站名>-clone && cd $_ # git 源码:clone 进来;单文件:放进来。原始源码留一份只读基准 index-original.html # 检查 Node 版本(package.json engines),nvm use 对应版本,钉 .nvmrc
gtag / googletagmanager)、像素、热图——逐行精确切除(GA 块常在 <head> 顶部)。references/deliverables.md。references/assessment.md 给结构 / 视觉 / 交互 / 响应式 / 内容替换 / 功能完整度打分。分数要能被截图、源码、运行结果支撑。isTrusted=false 触发不了拖拽,要如实写,别伪造"拖动成功")。复刻完成后再跑一次克隆站侦察,并生成自动对比报告:
bashnode /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
目标永远是"做她自己的站",不是搬一个一模一样的。替换三件套:文字(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/着色器算法)、合成(SVG filter / 多 canvas / 后期)、物理、交互、音频。然后才去核对任何二手分析。
逆向特效时三件套纪律(治"边抠边美化、最后既不像也说不清"):
SOURCE(真源码/source-map/运行时 dump/帧捕获)、PARTIAL(名字/切片,待证)、GUESS(视觉拟合/魔数)。未标=GUESS,照抄前必须升级到 SOURCE。详见 references/effect-extraction.md(含运行时捕获兜底 + 何时委托 web-shader-extractor)。
可迁移的高级范式(值得攒着):
<filter><feDisplacementMap scale=N> 拿它去扭曲真实的、活的、可交互的 HTML——折射的是真 DOM,WebGL 全程不碰 DOM 像素。这是 marbles 的灵魂,也是 Three.js MeshPhysicalMaterial(transmission) 做不到的事(它只能做"玻璃球外观",做不出"折射整个网页")。详细方法 + marbles 真架构逐项拆解 → references/reverse-engineering.md、references/marbles-case.md。
bashSSL_CERT_FILE=/etc/ssl/cert.pem gh api repos/<u>/<r> | jq '.license' # + 找 LICENSE 文件 + 看 README
| 许可 | 能做什么 | |---|---| | MIT / Apache / BSD / Unlicense | 可改、可上线,保留致谢即可 | | NONE(无 LICENSE 文件 / 未声明) | 默认保留所有权利。仅本地学习/复刻,须署名原作者,未经许可不得公开重新部署。别因为代码公开就当成可自由用 | | 专有 / 明确禁止 | 只读学习,不复制不部署 |
⚠️ 别把"GitHub 上是公开的"或"gh api 一时查不到"等同于 MIT——核实到底。
NOTES.md(源信息/技术栈/license/替换地图/跑起来命令)TEARDOWN.md(技术拆解,标行号)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。~/projects/website-clones/marbles-clone/ — 原生 WebGL + SVG Filter + 自研物理的玻璃弹珠站,逐字节忠实复刻 + 完整 TEARDOWN,是"WebGL 重前端分支"的范例。
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→fail | 11,060 | 9,499 | -14% | 1 | 1 | 0% | 2,109 | 5,826 | +176% | 0 | 0 | — |
case-02 | fail→fail | 18,986 | 8,944 | -53% | 1 | 1 | 0% | 3,949 | 6,540 | +66% | 0 | 0 | — |
case-03 | fail→pass | 15,942 | 28,662 | +80% | 1 | 1 | 0% | 1,857 | 6,755 | +264% | 0 | 0 | — |
case-04 | fail→pass | 9,242 | 7,707 | -17% | 1 | 1 | 0% | 1,705 | 6,328 | +271% | 0 | 0 | — |
case-05 | fail→pass | 8,837 | 3,295 | -63% | 1 | 1 | 0% | 1,698 | 5,514 | +225% | 0 | 0 | — |
case-06 | fail→pass | 11,380 | 6,517 | -43% | 1 | 1 | 0% | 1,872 | 6,067 | +224% | 0 | 0 | — |
case-07 | fail→pass | 17,751 | 15,176 | -15% | 1 | 1 | 0% | 3,346 | 7,871 | +135% | 0 | 0 | — |
case-13 | fail→pass | 15,504 | 4,535 | -71% | 1 | 1 | 0% | 2,673 | 5,660 | +112% | 0 | 0 | — |
case-08 | pass→pass | 14,643 | 7,355 | -50% | 1 | 1 | 0% | 2,315 | 6,010 | +160% | 0 | 0 | — |
case-09 | fail→pass | 10,703 | 9,983 | -7% | 1 | 1 | 0% | 1,794 | 6,451 | +260% | 0 | 0 | — |
case-10 | fail→pass | 21,760 | 13,793 | -37% | 1 | 1 | 0% | 3,930 | 7,440 | +89% | 0 | 0 | — |
case-11 | pass→pass | 9,525 | 7,098 | -25% | 1 | 1 | 0% | 1,533 | 5,997 | +291% | 0 | 0 | — |
case-12 | fail→pass | 9,523 | 2,969 | -69% | 1 | 1 | 0% | 1,665 | 5,352 | +221% | 0 | 0 | — |
case-14 | fail→pass | 15,357 | 12,809 | -17% | 1 | 1 | 0% | 2,430 | 7,087 | +192% | 0 | 0 | — |
case-15 | fail→pass | 18,651 | 12,697 | -32% | 1 | 1 | 0% | 3,236 | 7,054 | +118% | 0 | 0 | — |
case-16 | fail→pass | 15,627 | 4,820 | -69% | 1 | 1 | 0% | 3,032 | 5,795 | +91% | 0 | 0 | — |
case-17 | fail→pass | 4,179 | 2,915 | -30% | 1 | 1 | 0% | 678 | 5,324 | +685% | 0 | 0 | — |
case-18 | pass→pass | 13,687 | 14,893 | +9% | 1 | 1 | 0% | 2,480 | 7,416 | +199% | 0 | 0 | — |
case-19 | pass→pass | 9,772 | 8,414 | -14% | 1 | 1 | 0% | 1,582 | 6,321 | +300% | 0 | 0 | — |
case-20 | fail→pass | 12,116 | 14,610 | +21% | 1 | 1 | 0% | 2,191 | 5,431 | +148% | 0 | 0 | — |
case-21 | fail→fail | 17,124 | 20,195 | +18% | 1 | 1 | 0% | 3,307 | 8,827 | +167% | 0 | 0 | — |
case-22 | fail→fail | 18,150 | 16,877 | -7% | 1 | 1 | 0% | 3,679 | 8,162 | +122% | 0 | 0 | — |
case-23 | fail→fail | 19,458 | 24,516 | +26% | 1 | 1 | 0% | 3,870 | 9,884 | +155% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 23 cases were attempted. The headline lift of +61 percentage points is the difference between those two pass rates over the 23 comparable cases.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.