How to clone a website design with AI, the legal way

You can clone a website's design with AI legally when what you take is the layout idea and the style principles (the section order, the type scale, the spacing rhythm, the kind of motion) and everything a visitor reads or sees is your own. Copying the site's text, photographs, logo or code is where it stops being legal, and having a model do the copying changes nothing about that.

Below are what the law protects, with the sources, and a workflow that turns a site you admire into a written specification you can build from. This is general information, not legal advice. For a commercial project that closely follows a competitor's site, a lawyer in your country is the right second opinion.

What you may take, and what you may not#

In the US, the Copyright Office's Compendium chapter on websites says copyright does not protect the overall look and feel of a website, only the specific expression on it on a given date. It adds that the layout or format of a page is not copyrightable in itself, however many elements it uses. Its own example of an unregistrable claim is a border width, the placement of a banner and placeholders for text and images. Circular 33 says the same about the general layout of a web page, and excludes ideas, methods and systems.

What stays protected is everything that fills the layout. Here is how the pieces divide:

Two cautions sit outside that table. In the EU, the Court of Justice held in case C-393/09 that a graphical user interface can be protected by copyright as a work if it is its author's own intellectual creation, so a highly original interface is not automatically free there. And many sites' terms of use restrict scraping or copying, separately from copyright.

If what you admire is an effect rather than one particular site, the effect is already written as a specification in designs like these:

Why a clone tool does not change the answer#

Tools that turn a URL into a brief, or straight into code, are easy to find, and CloneWeb and its alternatives shows how to test what one of them actually read. A model asked to "clone" a page may reproduce the original's headings, paragraphs and image addresses as faithfully as its layout, because that is what the word asks for. The model is not the party publishing the site. The person who ships it is.

The question to ask is what ends up in the published files, not which tool produced them. A page built from a measured specification with your own words and images contains nothing of the original but its ideas. A page generated from "make me this URL" may contain the original's copy, its photographs hotlinked from its server and its class names, and you will not know until you look.

Thanor has no cloning feature. Its designs are written as specifications you are licensed to build from, which is the shortcut at the end of this article; the workflow below works on any site you admire.

How close is too close#

Copyright is only half of the risk. Trade dress, as Cornell's Legal Information Institute summarizes it, is protected when an appearance serves the same source-identifying function as a trademark. The practical test is whether a customer of the original would think your page belongs to them. A layout idea borrowed for a different brand, in a different palette, with different words and pictures, does not do that. A near-copy in the same industry can.

Four decisions carry most of a site's identity, so change all four, even where the law might let you keep one:

1. The palette. Build your own from your brand, not a shifted version of theirs.
2. The typefaces. A different family, licensed by you, even if it sits in the same broad class.
3. The signature moment's subject. If their hero turns a sneaker in 3D, yours does not turn a sneaker.
4. The words. Every heading, label and line of microcopy, including the clever ones.

What you keep is the part that was never theirs to own: a section order that answers the visitor's questions in a sensible sequence, a spacing rhythm, a kind of motion. Those are the parts worth learning from anyway, because they are the decisions you could not see until you measured them.

Record and measure the reference#

The aim of the workflow is a document of values, written by you, that describes how the reference works without containing any of it. Kinemble's free prompts read as though they were written this way, backwards from a finished page, which is why they carry values rather than adjectives. It takes five steps, and roughly an afternoon for one page. The first two collect evidence.

1. Record the reference#

Take full-page screenshots at 375px, 768px and 1440px wide; in Chrome, the device toolbar sets the width and the Command Menu's "Capture full size screenshot" takes the whole page. Then record one slow scroll from top to bottom at a steady pace, followed by every hover and click state, at 60 frames per second. These are notes for you, never assets for the build.

2. Measure the values in developer tools#

The Computed tab in the Elements panel gives the real font family, size, line height, letter spacing, colors, container width and section padding for anything you select. The Animations panel captures animations as they run, with their durations and delays, and for CSS transitions and animations the Styles pane shows the timing function in use. Animations driven by a JavaScript library may not appear there, so time those from your recording. Write every value into a table with two columns, what you measured and what you will use instead:

Describe, specify and build#

The last three steps turn the evidence into a page that is yours.

3. Ask a model for structure, not for copy#

Models read the recording better as structure than as numbers. Claude accepts screenshots as images (Anthropic docs). Gemini accepts video and samples it at 1 frame per second by default (Google docs), so a 300ms hover can fall entirely between two frames. That is why motion values come from step 2 and the model handles the rest:

From these screenshots, list the sections in order. For each one give:
its job in one line, the layout as columns and proportions at 1440px and 375px,
and the interaction mechanism in one sentence (what moves, driven by what).
Do not transcribe any text. Describe logos and photographs only by size and position.

4. Write the specification in your own values#

Keep the section order, the rhythm and the mechanisms. Replace everything a visitor reads or sees: your palette, a typeface you hold a license for, your words, your photographs. A fragment of what that looks like:

Section 2, proof strip: one row of four figures, full bleed, 96px padding top
and bottom. Numerals in the display face at 4.5rem, labels at 0.875rem,
#6E6459 on #FAF7F2. Figures count up once on first entry, 900ms,
cubic-bezier(0.22, 1, 0.36, 1), staggered 80ms. Reduced motion: final values shown.

Writing those values as design tokens keeps every page of the build on them, and the difference between phrasing and specification explains why the fragment above works where "make it like this site" does not.

5. Build, then check that nothing came across#

Build from the specification, then run three checks before anything goes live:

1. Search the build for the reference's domain, for example grep -rn "reference-site.com" src/. Any hit is a hotlinked asset or a copied script.
2. Search for its text. Paste the reference's headings into a file and search the build for each one.
3. Compare at three widths for rhythm only. Section order and proportions may match; words, images and the logo must not.

Or start from a specification you are licensed to use#

Measuring a reference is honest work, and it is slow, because you are reverse-engineering decisions somebody else made and then replacing half of them. The alternative is to start from decisions that were written down for you to use.

Every design in the Thanor library is a full specification of that kind: the palette in hex, the type faces and scale, spacing, easing curves and durations, the section order, every interaction, and the hosted films, cut-outs and stills the built page uses. The license lets you build with it for yourself or for paying clients, and the one thing it rules out is reselling the prompts themselves (terms). Paste a prompt into Claude, ChatGPT, Gemini, Cursor, Lovable, v0 or Bolt, or let the Thanor MCP hand the art direction to Claude, ChatGPT or Cursor directly.

Two more effects, already specified:

Scroll-led product reveals like Verdier's are among the trends of 2026, and the same specification approach carries over to a 3D scene built with Claude. Specified pages also avoid the reasons generated sites look alike, because no value is left for the model to fill with its default.

Compare your specification with a finished one#

Open Vesperion and copy its prompt; it is free with a free account. Lay it next to the specification you wrote in step 4. Every line it has that yours lacks (a duration, a contrast pair, a fallback for touch screens) is a value you still need to measure on the site you admire, or a reason to start from a design that already has it. When you want the rest of the library for client work, the plans are here.