how to clone a website's design system the legal, transformative way

You found a site whose design you admire, and you want to build something in the same spirit. The honest question underneath "how do I clone this" is a legal and ethical one, and most of the internet answers it badly. Half the guides say "just copy it, everyone does," and half say "you'll get sued." Both are wrong. There is a clear line between studying a design system and stealing a design, and once you can see that line, you can build confidently on the right side of it. This is not legal advice, it is a working mental model, and it happens to be the exact model uiscanner is built on.

the line: copying bytes vs learning a system

The single most useful distinction is between the bytes on a page and the system behind it.

The bytes are the concrete, fixed expressions: the exact source code, the specific images and photos, the copywriting, the logo files, the illustration SVGs. These are protected. As FindLaw and others lay out plainly, HTML and CSS source, original images, and body text are covered by copyright, and a logo is a trademark on top of that. Renaming a few CSS classes does not launder copied code. Re-hosting someone's hero image on your own server is copying, full stop.

The system is different. It is the set of decisions that produced the page: a color built on a particular blue, a type scale that steps in a rhythm, an 8px spacing grid, a card radius, a shadow recipe, a hero that is centered rather than split. Individually, these facts are not protectable. US copyright law does not protect a typeface's visual design, only the font file that renders it, per the long-standing rule on typefaces. A single hex value is a fact. A spacing scale is a mathematical idea. You cannot copyright #635bff or the number 16px.

So the transformative move is: learn the system, discard the bytes, and rebuild original components in your own stack. That is the difference between plagiarism and influence, and it is a difference courts and design culture both recognize.

what is fair, and what is not

Here is the practical split.

Two of those rows deserve a note.

The last "not fair" row is trade dress. Beyond copyright, a distinctive overall look, the specific combination of layout, color, and elements that identifies a brand, can be protected when copying it would confuse consumers about who they are dealing with. Turley Law's summary walks through how courts have extended trade dress from physical spaces (the famous restaurant-decor case) to digital products. The takeaway is not "layout is illegal." It is that a near-pixel clone of a well-known brand, especially in the same market, is where risk actually lives. Learning the mechanics of a good hero is fine. Rebuilding a competitor's homepage so faithfully that a visitor thinks it is them is not.

The "recreate decorative imagery as your own originals" row is the one people miss most. A background illustration is an asset with its own copyright. You do not copy it. You describe what it does (a soft gradient mesh, a wireframe globe, a grain overlay) and generate or commission your own. Same visual role, original bytes.

how uiscanner stays on the transformative side

This model is not a disclaimer bolted onto uiscanner. It is the architecture.

Paste any public URL and uiscanner returns a design teardown: the tokens (colors, fonts, type scale, radii, spacing, shadows, motion), a section-by-section structure, and a build prompt tailored for Claude to recreate the look in your stack. What it deliberately does not do is copy or re-host the original site's asset bytes. It describes and tokenizes. You rebuild from the description. That is transformative by design.

It reaches this by reading the rendered page plus the DOM in one pass, so it catches what a naive scraper misses: the real primary button (not the one a redesign quietly demoted), whether the hero is centered or split, and which imagery is decorative, with prompts to recreate that imagery as originals rather than instructions to download it. If you want to see the shape of the output before you build, the explore gallery and any teardown page (for example Stripe's) show tokens and structure, never a copied asset. That is the point: the output is a description of a system, the category the law leaves open, not a bag of protected files.

A few product facts that keep it honest:

• Every scan returns an id and a shareable uiscanner.com/t/<id> link, so what you extracted is auditable, not a black box.
• ui_probe(url) is a cheap preflight that spends no scan, useful for checking a page loads before you commit.
• Quota is unified per plan on a rolling 30-day window: Free 5, Indie ($12/mo) 100, Studio ($39/mo) 400. It is a metered tool, not an all-you-can-scrape firehose.

a clean workflow you can defend

If you want to build in the spirit of a site you admire without crossing the line, do it in this order.

1. Study, do not siphon. Scan the page for its tokens and structure. You are collecting facts and decisions, not files.

2. Rebuild every component from scratch in your own framework. The teardown's build prompt is written for this: it hands Claude Code, Cursor, or Codex the real values so your original components match the system without you copy-pasting anyone's code.

Install the MCP server once:

claude mcp add uiscanner -- npx -y uiscanner-mcp@latest

Or run a one-off from the CLI:

npx -y uiscanner-mcp@latest scan stripe.com --target landing

3. Replace all content with originals. Your copy, your photos, your illustrations, your logo. This is the step that guides across the internet agree on, from Thomas Digital to Codecademy's clone-without-infringing guide: recode the features, swap in your own assets, use your own brand.

4. Diverge where it counts. Take the type scale and spacing rhythm, then make the identity yours: your color, your voice, your layout choices. The goal is a page that shares good engineering DNA with what inspired you and is unmistakably a different product.

The full setup for every client (Claude Code, Cursor, Codex, plus the CLI and the Chrome extension) lives at /mcp, and the five tools (ui_teardown, ui_probe, get_teardown, retarget_teardown, whoami) are documented there.

the one-sentence version

Copying is taking the bytes. Learning is taking the system. uiscanner is built to give you the system and never the bytes, which is exactly the side of the line you want to build on. Rebuild original components from real tokens, bring your own content and brand, and stay clear of near-clones in a competitor's own market. That is how you clone a design system the legal, transformative way, and it also happens to produce better work than pasting someone else's stylesheet ever could.