An AI website-cloning workflow that mechanically catches what it misses.
A hardened fork of ai-website-cloner-template that adds a deep-extraction audit, a parity completeness gate, and 25 field-tested lessons — so an AI agent reaches a true 1:1 clone instead of "looks right in a screenshot."
Cloning a modern site by eye (or by "save the HTML") fails the same way every time:
the motion layer is invisible to a screenshot. Cursor trails, smooth scroll,
scroll-driven path animations, idle loops, mask reveals, preloaders — they live in
fixed / pointer-events:none overlays and only animate on input. A coding agent
declares "done" against whatever a human happened to point at, and ships a clone that
looks right but feels dead.
This edition fixes that with mechanical, adversarial verification: enumerate everything that moves, read the original's source to rebuild it correctly, then diff the clone against the original and refuse to call it done until the diff is green.
One call inventories what eyes and screenshots miss: every fixed/sticky overlay,
every clip-path reveal, every time-animated node (sampled twice to catch
requestAnimationFrame loops), every scroll-linked transform, section geometry,
wave dividers, SVG paths, fonts, CSS vars. Run it on the target before building —
its output is your build backlog.
A normalized signature() you run on the original and the clone; diff the two.
The clone is done only when every structural signal matches (or each delta is logged
with a reason). The diff does the noticing, so a human never has to find missing
effects one at a time.
Distilled from real clones. The methodology, in order:
audit (enumerate what moves)
→ classify each motion: idle-loop vs scroll-linked vs both
→ READ THE SOURCE before reimplementing (don't reverse-engineer physics from samples)
→ build clean components in your own stack
→ parity-diff vs the original
→ burn every closable delta to GREEN → ship
Selected lessons:
- §16 A screenshot can't capture motion — the interaction sweep is mandatory.
- §19 A single DOM snapshot can't reveal animation — sample across time.
- §22 Read the target's JS bundle and port the real algorithm (e.g. a GSAP timeline) instead of guessing from sampled transforms.
- §23–25 Gate on a parity diff, run it proactively, and close every delta to green rather than handing over a punch-list.
This workflow was validated end-to-end against a production Next.js marketing site —
extracting and re-porting its cursor trail, Lenis smooth scroll, animated liquid
wave dividers, a scroll-driven SVG plane flight, a Fruit-Ninja-style GSAP footer toss,
peelable clip-path stickers, and a multi-layer burger-build preloader — until the
parity gate reported green (matching overlay count, wave count, clip-path reveals,
section colors, preloader).
The cloned site itself is not included or open-sourced — it contains a third party's brand assets. This repo ships only the reusable method and tooling.
npm install
# point your AI agent at a target URL; it runs:
# clone-audit.js → builds against the backlog → parity-check.js → green
npm run devThe agent workflow lives in .claude/skills/clone-website/ (and synced equivalents
for Codex / Gemini / Cursor / etc.). Read LESSONS.md first.
MIT. Built on JCodesMore/ai-website-cloner-template.