Copycats.design

Steal any website's
design system.

Paste a URL. 30 seconds later you've got a full design system zip — ready for your codebase or your coding agent.

Free · No signup · 3 extractions/day
Try these popular sites:
Most copied this week
🥇hubspot.com2🥈stripe.com1🥉linear.app14vercel.com15notion.so1
See full leaderboard →
How it works

Copycats spins up a headless browser, reads every computed style from the live DOM, and packages it into a drop-in design system — Tailwind config, Figma variables, shadcn theme, React theme, W3C tokens, CSS vars, a visual HTML report, and an AI-optimised design brief.

Unlike most extractors, it also captures layout patterns (grids, flexbox, container widths), responsive behaviour across 4 breakpoints, interaction states(hover, focus, active), and scores WCAG accessibility — so what you export matches what the live site actually does.

What you get

Free

Visual HTML preview + CSS variables. No signup.

  • HTML design report
  • CSS custom properties
  • Tailwind config
  • Figma variables

Pro — all 8 files

Tailwind, Figma, shadcn, React theme, tokens and more.

  • Tailwind config
  • Figma variables (dark mode)
  • shadcn/ui theme
  • W3C design tokens
  • AI-optimised design brief
Hand it to Claude

Feed the zip to your coding agent.
Ship a pixel-perfect clone.

Drop the Pro download into Claude Code, Cursor, Codex, or any agent that reads files. The AI-optimised design-language.md is written specifically for LLMs — it describes the entire design system in 19 sections of plain-English context, linked to the raw tokens.

Combine it with a one-line prompt like “rebuild this landing page with our brand tokens”and you'll get pages that actually look like they belong to the site you were inspired by — spacing, shadows, radius, hover states and all.

Example promptRead stripe-com-design-language.md and stripe-com-tailwind.config.js. Rebuild this page using only these tokens.
How to use the files
Tailwind

tailwind.config.js

Drop into your project root and restart the dev server. Colours, spacing, radii, shadows and breakpoints are all named and ready.

Figma

figma-variables.json

Figma → Libraries → Import Variables. Dark-mode variants come mapped to a second mode automatically.

shadcn/ui

shadcn-theme.css

Paste the CSS custom properties block into your globals.css under :root. Every shadcn component picks them up.

Any CSS

variables.css

Import at the top of your stylesheet. Reference tokens with var(--color-primary) anywhere.

React

theme.js

Works with Chakra, Stitches, Vanilla Extract, or any theme-object consumer. Import and spread into your ThemeProvider.

Tokens

design-tokens.json

W3C Design Tokens format. Plug into Style Dictionary, Amazon's token tools, or generate platform-specific code.

Preview

preview.html

Open in a browser — complete visual report with swatches, type scale, shadows, breakpoints and a WCAG a11y score.

AI brief

design-language.md

19 sections of plain-English design system context. Feed to any LLM to generate pages that match the brand instantly.