Claude Skill Web Clone

🪞 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 r