A cloning methodology built to catch its own AI hallucinations
Methodology for faithfully cloning any website (static / React / WebGL) — without copying AI-hallucinated code. Real source first.
At a glance
- What is it?
- This Claude Code skill routes website cloning through a decision tree by site type, grading uncertain WebGL reconstructions as SOURCE, PARTIAL or GUESS rather than presenting guesses with false confidence, after a flagship case where an AI clone analysis got a demo's core rendering technique completely backwards.
- Who is it for?
- This skill fits a developer using Claude Code to learn from, remix, or run offline a website they admire, and its central discipline, treating any AI-generated clone analysis as an unverified hint rather than trustworthy code, is the correct response to a failure mode the README demonstrates concretely with a real WebGL demo an AI analysis got fundamentally wrong.
- Can I use it commercially?
- Yes. MIT is a permissive licence: you can use, modify and sell software built on it, as long as you keep its copyright and licence notices.
- Is it still maintained?
- Yes. The repository last received commits 82 days ago.
- What is it written in?
- Mainly JavaScript, according to GitHub's language statistics.
Answers come from the project's GitHub data, last synced on September 17, 2026, and from our analysis. They are not legal advice.
DEEP OPEN-SOURCE ANALYSIS
A methodology for cloning sites, built against a specific failure mode
This is a Claude Code skill that teaches an agent how to faithfully reproduce a website, ranging from a single static HTML page to a WebGL-heavy interactive demo, and its entire reason for existing is one specific, named failure mode: an AI asked to analyse and clone a website will confidently produce plausible-looking code that is, in the README's own word, hallucinated, code that reads as a reasonable implementation and breaks the moment you actually run it.
The skill's iron rule states the countermeasure directly: treat any AI-written clone analysis as a hint at best, and assume every executable code block in it is invented until verified line by line against the real source. That is a strong claim to make about the agent's own output, and the README backs it with a flagship case rather than leaving it abstract. A real WebGL demo used precise ray-sphere intersection geometry combined with an SVG filter to refract the live page content behind it; an AI analysis of the same demo confidently described a completely different technique, ray marching against a signed distance field sampling the page as a texture. The two approaches produce visibly different results and run at very different speeds, and copying the AI's confident but wrong description would have reproduced neither the look nor the performance of the original.
Three branches for three fundamentally different kinds of website
The methodology is not one procedure applied uniformly; it is a decision tree that routes a site into one of several branches depending on what kind of website it actually is, because a static HTML page, a framework-rendered content site, and a WebGL-heavy interactive demo fail in different ways if you try to clone them with the wrong technique.
A static HTML and CSS site is handled by mirroring it directly. A React, Vue or Next content site is handled by rebuilding a template and pouring the real content into it, since faithfully reproducing a client-rendered framework application byte for byte is rarely the actual goal for that category. A WebGL, Canvas or Three.js frontend gets the most demanding path: reverse-engineering the real source line by line when it can be found, and when it genuinely cannot, falling back to capturing runtime frames and replaying them against a graded evidence standard rather than guessing. Routing each site type to the technique suited to it, instead of applying one generic clone procedure everywhere, is what keeps the methodology practical rather than merely aspirational.
Grading your own confidence instead of pretending certainty
For the hardest case, a WebGL or Canvas frontend with no findable source, the skill introduces something unusual for a cloning methodology: an explicit evidence grading system labelling each recovered piece of behaviour as SOURCE, PARTIAL or GUESS, combined with what the README calls a baseline-first replay gate.
That is a genuinely disciplined idea applied to a task that invites false confidence. Reverse-engineering a visual effect from watching it run is inherently uncertain, and the natural failure mode is presenting an inferred guess with the same confidence as something actually read from real code. Forcing every recovered claim to carry an explicit grade, so a reader or a future agent session can immediately see which parts of a reconstruction are verified against real evidence and which are inferred from observed behaviour, is the correct response to that uncertainty. A baseline-first gate, checking the replay against the original before treating it as done, is the mechanism that keeps a GUESS-graded piece from silently being promoted to something trusted without ever actually being confirmed.
Recognising when the deployed bundle already is the source
The most recent addition to the methodology, and its first tagged release, handles a case the earlier branches do not: a statically built site from a tool like Astro, a static-site-generating build of Vite, or Hugo, where the entire client runtime, including WebGL-heavy code, ships straight to the browser.
The insight the README states plainly is that for this category of site, getting the real source and mirroring the whole deployed bundle are the same task, because there is no server-rendered logic hidden away; everything the browser needs is already sitting in the deployed assets. A dedicated script drives a real browser, captures the page through a full scroll to trigger lazy-loaded content, and mirrors every same-origin asset actually requested, explicitly including runtime-fetched binary formats a naive mirror tool would miss entirely. Recognising that a deployment target can, for certain site architectures, be the authoritative source rather than a compiled artefact hiding one is the kind of distinction that only becomes obvious after you have tried the naive approach and watched it silently miss half of what the page actually loads.
A visual-only mode for people who want the style, not the code
Not every use case wants a byte-for-byte functional clone, and the methodology has a separate mode for that: distilling a site's visual identity into a structured, versionable file the README calls design-dna.json, capturing design tokens, style choices and visual effects as data rather than as implementation, so a user can keep the extracted design language while swapping in entirely different content.
Separating what a site looks like from how it is built is a sound distinction to formalise, because those are genuinely different things to want. Someone rebranding a template wants the palette, typography and interaction feel preserved while the actual content changes completely; someone studying an interactive demo's mechanism wants the opposite, the underlying logic preserved regardless of what it looks like. Offering both paths explicitly, rather than forcing every request through the same full reverse-engineering process, matches the tool to what the user is actually trying to accomplish.
Installing it, and what to weigh before pointing it at someone else's site
Installation is a single clone into the Claude Code skills directory:
git clone https://github.com/Jane-xiaoer/claude-skill-web-clone.git ~/.claude/skills/web-cloneOnce installed, the skill triggers from a plain-language request naming a target site, and Claude loads the methodology document and walks the decision tree from there. The repository ships eight supporting scripts covering reconnaissance screenshots, full-site mirroring, route crawling, interaction-state probing, network capture, asset harvesting, a design-DNA scaffold builder, and pixel-level visual comparison between the original and the clone, which together are the executable probes the README's own description promises rather than the methodology being only a document.
The project is MIT licensed, permissive and allowing commercial use, and reports 1,013 stars, 121 forks and a single open issue, with the first tagged release and last push both on 2026-06-30. The obvious limit worth naming is the one the methodology itself does not resolve: faithfully reproducing a website's code says nothing about who owns the rights to that site's design, branding or content, and the legality of cloning any specific site for any specific purpose depends on what you actually do with the result. This is not legal advice, and the README's own stated use cases, learning how something works, remixing into something clearly your own, or running a copy offline for yourself, are a reasonable line to keep in mind before pointing this at someone else's commercial site and republishing what comes out.
Editorial conclusion
This skill fits a developer using Claude Code to learn from, remix, or run offline a website they admire, and its central discipline, treating any AI-generated clone analysis as an unverified hint rather than trustworthy code, is the correct response to a failure mode the README demonstrates concretely with a real WebGL demo an AI analysis got fundamentally wrong. Its decision tree routes static sites, framework content sites and WebGL-heavy frontends to different techniques rather than one generic procedure, and its evidence grading for reverse-engineered effects, SOURCE, PARTIAL or GUESS behind a baseline-first replay gate, keeps inferred guesses from being silently presented as verified fact. Install it as a Claude Code skill and let it walk the decision tree for your target site, and keep in mind that faithfully reproducing a site's code says nothing about the rights to its design or content, so match your use to the README's own stated cases of learning, personal remixing or offline use.
Frequently asked questions
Can Claude replicate a website?
With this skill installed, Claude Code follows a structured methodology to clone a site rather than guessing at its implementation. It routes the target through a decision tree based on site type, static, framework-rendered, or WebGL-heavy, and insists on verifying against real source rather than trusting its own generated analysis.
How to clone website Claude skill?
Clone the repository into the Claude Code skills directory, then ask in plain language to clone or reverse-engineer a target site. Claude loads the SKILL.md methodology and walks the six-step decision tree, which starts by searching for the site's real public source before falling back to browser probing.
Why does the skill insist on verifying real source instead of trusting AI analysis?
Because an AI-generated clone analysis can be confidently wrong. The README's flagship case shows an AI describing a WebGL demo's rendering technique as ray marching against a distance field, when the real implementation used ray-sphere intersection and an SVG filter, a completely different and much faster approach.
How does it handle WebGL or Canvas effects with no findable source?
It captures runtime frames and grades each recovered piece of behavior as SOURCE, PARTIAL or GUESS, combined with a baseline-first replay gate that checks the reconstruction against the original before treating it as verified, rather than presenting an inferred guess with unearned confidence.
Can it extract just a site's visual style without the underlying code?
Yes, through a separate visual or rebrand mode that distills design tokens, style and effects into a structured design-dna.json file, letting a user keep the extracted visual identity while swapping in entirely different content, rather than reverse-engineering the site's full functional logic.
Community notes