October 14, 2026
Type “clone stripe.com” into Claude Code and you will get something back within a minute. It will have a hero, a gradient and three feature cards. It will not look like Stripe. The colours will be close but not right, the type will be a generic sans, the spacing a little loose, and nothing will move the way the original moves.
That is not because Claude Code is bad at front-end work. It is very good at front-end work. It is because it never actually saw the page. This guide explains what Claude can and cannot see when you ask it to clone a site, and walks through the workflow that gets a rebuild you could put side by side with the original.
Why “clone this site” returns a lookalike
A modern website is not its HTML file. The HTML that comes back from a plain request is a starting point. JavaScript then builds most of the page, CSS from a dozen files decides how it looks, webfonts load late, and animation libraries move things around after that. What you see in the browser is the end of that process. What a simple fetch returns is the beginning.
When Claude Code has no way to see the end state, it fills the gaps from its training data. That is where the generic hero comes from. It is Claude’s average guess at a website, wearing the target’s logo.
The four ways people try it, compared
Most cloning guides use one of four approaches. They are not equally good at the parts of a site that make it feel like itself. Tap a column to see which method gets that part right.
The pattern is simple. Each step up the list gives Claude more of the rendered page and less to invent. The last two rows both use a real browser. The difference is whether Claude gets pictures of the result or measurements of it.
The workflow, step by step
This is the order we use for every rebuild. Click through the steps. Each one has the prompt or command to run.
The prompts that work
The biggest single improvement is telling Claude Code to use the captured values and nothing else. Without that instruction it mixes real numbers with its own defaults, and the defaults are what make AI sites look like AI sites. (We go deeper on that in why Claude Code websites look AI-generated.)
You are rebuilding the page at https://example.com as a learning exercise.
1. Get a rebuild brief for the URL.
2. Write tokens.css from the brief. Only captured values.
3. Build the hero section in plain HTML/CSS. No animation yet.
4. Tell me which captured values you used and anything you had to guess.Then, once the static layout matches:
Add the hero's entrance animation using the timings and easing from the
brief. Match the stagger and duration exactly. If the brief shows GSAP,
use GSAP; if it shows CSS keyframes, use CSS.Asking it to name what it guessed matters. A rebuild usually fails in the gaps between measurements. Making those gaps visible is how you find them.
Clone a section, not a site
Most people who search for how to clone a website want one thing from it: a pricing table they like, a hero animation, a smooth scroll story. Cloning the whole site to get that one thing wastes most of the effort, and it makes the part you wanted harder to lift out cleanly.
Ask for the piece directly instead. “Capture the pricing section on this page and rebuild it as a standalone component” gives Claude a smaller target with fewer chances to drift, and gives you something you can drop into your own project. If the piece is a shader or a WebGL background, follow how to recreate a WebGL shader effect, which covers the extra steps 3D needs.
Where clones go wrong, and the fix
| Symptom | Usual cause | Fix |
|---|---|---|
| Right layout, wrong “feel” | Fallback font instead of the real one | Load the actual webfont files from the capture. See finding the real font. |
| Colours slightly off | Values sampled from a screenshot | Use computed colours from the stylesheet, not pixels |
| Animation feels cheap | Default ease and a guessed duration | Copy the captured easing curve and timing exactly |
| Scroll feels different | The original uses smooth scrolling | Check for Lenis and match its settings (how to tell) |
| Black canvas where the 3D was | Shader or model not captured | Capture the WebGL layer separately |
| Works online, breaks locally | Opening index.html as a file | Serve it over localhost (why) |
Alternatives, and when to use them
You do not need a capture tool for every job. If the page is a simple static marketing site, a browser MCP such as Playwright plus one of the community cloning skills is a good free option. Claude drives a real browser, takes screenshots and rebuilds from them, and for flat layouts that is often enough.
Reach for a runtime capture when the page has the things screenshots cannot carry: real motion, scroll-driven sequences, custom fonts, WebGL, or a design system you want to reuse exactly. Those are also the sites people most want to learn from.
FAQ
Can Claude Code clone a website on its own?
Partly. It can fetch HTML and, with a browser MCP, take screenshots. But neither shows computed styles, loaded fonts, animation timings or WebGL. The layout comes out roughly right and the details come out guessed. Giving it a runtime capture closes most of that gap.
What is the best Claude Code skill for cloning websites?
Community skills such as website-cloner templates drive a browser, screenshot the page and rebuild from the images. They work well for static marketing pages. For sites with real motion or 3D, pair a skill with a tool that reports measured values, so Claude is not reading numbers off a picture.
How long does it take to clone a website with Claude Code?
A single landing-page section takes minutes once Claude has the measurements. A full multi-section page with scroll animation is usually an afternoon of section-by-section passes plus comparison fixes.
Is it legal to clone a website with AI?
Rebuilding a page privately to learn from it, or rebuilding your own site, is the normal case. Publishing someone else’s copy, images, logo or code is not. See is it legal to copy a website design for where the line usually sits.
Can Claude Code clone a website from a URL for free?
Claude Code needs a paid Claude plan or API credits. Enrichr has a free plan that covers small captures, which is enough to try the workflow on one page.