Guides CSS
How to clone a website with AI, and where the line is
Install Verbatim, the free Chrome extension, open the page, press Alt+Shift+P and choose Design prompt. It reads the live page and writes one document with the real palette, fonts, component CSS, section order and motion. Paste that into v0, Claude, ChatGPT or Cursor with a line about what your page is for. The model builds from measured values rather than guessing from pixels, so the first attempt lands close.
What you need first
Verbatim is a free Chrome extension that reads a live page and writes what it found as a document an AI can build from: the palette as custom properties, the type scale, the CSS of the components that repeat, every section in order, the assets and the motion. That is the difference between a model guessing from a picture and a model working from numbers.
Free forever, no account, nothing uploaded. Chrome, Edge, Brave, Arc and Opera. Install it and the steps below work on any page, including one behind a login that no AI can fetch for itself.
Add to Chrome, free See all thirteen tools
Already installed it? Getting started has the shortcut and every key on one page.
Why "clone this screenshot" produces something that is almost right
Every model will build a page from a screenshot, and the result is usually close enough to feel like success and wrong enough to cost you an afternoon. The reason is simple: a picture contains no values, so every number in the output was invented.
| What you give it | What it can do | Where it fails |
|---|---|---|
| A screenshot | Copy the layout roughly, and the mood. | Every value is guessed. It cannot tell #2E6FF2 from #2F6DF6, 13px from 14px, or 600 weight from 650. Hover states and breakpoints are not in a picture at all. |
| The URL | Fetch it, if the model has browsing. | What it fetches is HTML without the resolved cascade, and anything behind a login or a cookie wall is out of reach. |
| A description | Get the general direction. | "A bit more padding, slightly rounder, that blue" is guesswork on both sides, and the third revision is still wrong. |
| The whole stylesheet | Nothing useful. | Five thousand rules and nothing to say which of them touched anything. It floods the context and buries the answer. |
| A design prompt | Build from real hex values, real spacing, a real type scale and the real section order. | It describes a design, not your content. You still write your own copy and review the result. |
This is the whole trick, and it is not a prompting technique. It is whether the model is reading numbers or reading pixels. Turning a website into a prompt covers what goes into that document in detail.
How to clone a website with AI, step by step
Six steps, one of which is the part most people skip and then regret.
- Add Verbatim to Chrome. It is a free extension, there is no account and no sign in, and it works in Chrome, Edge, Brave, Arc and Opera.
- Open the page whose design you want to work from. Any page, including one behind a login, because the extension runs in your own browser session.
- Press Alt+Shift+P and choose Design prompt. It surveys the whole page: the stylesheets, the sections, the components that repeat, the fonts and the assets.
- Press Copy prompt. The document is markdown, so it pastes anywhere.
- Paste it into your builder, and add one line of your own: what the page is for, and which sections you want. Keep that line short and let the document carry the design.
- Review what comes back against the original. The values should match, because they were given rather than inferred.
- Replace the copy and the imagery with your own. This is not optional, and the section below explains why.
If the result drifts, it is almost always because the instruction line was too long. The document is the brief. Your line should say what the page is for, not re-describe the design it is already carrying.
Can you clone a website with AI for free?
Yes, and this is the cheapest part of the stack. The extraction is free: the Verbatim extension has no account, no plan and no trial, and the design prompt is generated from the page rather than by a model, so there is no key to add and nothing to spend.
The cost, if any, is at the other end. v0, Claude, ChatGPT and Cursor all have free tiers that will build a page from a pasted document, and all of them have paid tiers that do it faster and for longer. A one-page rebuild is well inside a free tier.
What you should not pay for is the extraction. Several tools in this category charge between 69 and 345 US dollars for copying design off a page, which is worth knowing before you buy one: the comparisons are here, with prices quoted from their own sites.
Cloning a page an AI cannot reach
This is the case that separates a browser extension from everything else, and it is more common than it sounds.
An AI drives a browser with no session and no hands. It cannot log in to your dashboard. It cannot see a dropdown that exists only while you hold it open, a modal that appears after a form submits, or the second step of a checkout. Point any AI at those URLs and it gets a login screen.
An extension runs in your own browser, in your own session, on the page you are already looking at. If you can see it, it can read it. Pick the state you want while it is on screen and the extraction is the same as for any public page.
For agents specifically there is a shorter path: press G and the selection goes straight to your coding agent over MCP, with nothing pasted.
A whole page, or one piece of it
"Clone a website" usually turns out to mean one of two different jobs, and using the wrong tool for yours is why results disappoint.
- The whole look. You want something that feels like this site: the palette, the type scale, the spacing rhythm, the section order. That is the design prompt, and it is what this guide is about.
- One component, exactly. You want that pricing card, with its hover state and its breakpoint, in your codebase. That is a different tool and a much smaller paste: copying the CSS of one element, or taking it into React.
They compose well. Give the model the design prompt for the system, then hand it individual picks for the pieces that have to be exact.
Is it legal to clone a website?
This is the part most guides on this query skip, and it is the part that actually matters, so here it is plainly. It is not legal advice and a lawyer is cheaper than a dispute.
Reading a page is not the question. Your browser downloaded the CSS in order to render it, and inspecting it is what developer tools are for. Nothing in this guide accesses anything your browser did not already have.
What you do next is the question, and it is copyright and trademark rather than anything technical. Three lines are worth holding:
- Mechanics are ordinary practice. A spacing rhythm, a type scale, an easing curve, a shadow, a grid. Design has always worked this way and nobody is coming for you.
- Identity is not. The logo, the brand name, the photography, the wording, the exact palette of a competitor. Trade dress and trademark cover the look of a brand in a way a stylesheet does not, and "an AI did it" is not a defence anyone has won with.
- Content is never yours by default. The headings in an extraction are structural evidence showing the shape of a section, not text to lift. Asset URLs belong to the original site. Write your own copy and bring your own imagery.
Verbatim's own design prompt instructs the model to do exactly that, in the document, every time. That is deliberate. A tool in this category that stays quiet about it is not doing you a favour.
The clean version of this job, and the one most people are actually doing: rebuilding your own site on a new stack, migrating off a platform where the design only exists in the live CSS, prototyping against a reference, or learning how something was built. All four are fine.
What this will not do
- Behaviour. Whatever JavaScript made the original interactive is not in its CSS or its markup. A carousel arrives as a static row.
- A backend. This is a design extraction. Forms, auth and data are yours.
- Pixel-identical output. The values are exact; what the model does with them is still a model's work, and it needs reviewing like any generated code.
- Content inside a cross-origin frame. The browser seals those to every extension, so an embedded widget reads as a gap.
Questions
How do I clone a website with AI?
Open the page, use a browser extension that reads the cascade to produce a design document with the real palette, fonts, component CSS and section order, then paste that into v0, Claude, ChatGPT or Cursor with one line about what your page is for. The model builds from measured values rather than guessing from a screenshot.
Can I clone a website with AI for free?
Yes. The extraction is free with no account and no key, because the design document is generated from the page rather than by a model. The builder at the other end can be any free tier, and a one-page rebuild fits comfortably inside one.
Why does AI get the colours and spacing wrong from a screenshot?
Because a picture contains no values. A model reading pixels cannot distinguish #2E6FF2 from #2F6DF6 or 13px from 14px, and it will not tell you which numbers it invented. Hover states and breakpoints are not in an image at all.
Can AI clone a page behind a login?
Not on its own. An AI drives a browser with no session, so it gets the login screen. A browser extension runs in your own session on the page you are already looking at, which is the only route that reaches a dashboard, a checkout or a menu that exists only while it is open.
Is it legal to clone a website?
Reading the CSS your browser already downloaded is ordinary practice. Reproducing a brand is not. The workable line is mechanics rather than identity: a spacing rhythm, a type scale and an easing curve are fine, while the logo, the photography, the wording and a competitor’s exact palette are not. This is not legal advice.
Will the clone include the JavaScript and the backend?
No. This extracts design: structure and appearance. Whatever made the original interactive, and everything behind it, is yours to build.
What is the best AI website cloner?
There is no single tool, and anything claiming to be one is doing half the job badly. The reliable shape is two parts: an extractor that reads the real values off the live page, and a builder that turns them into code. Getting the first part right is what decides whether the second part has anything true to work from.