Copycats.design

Turn any website into
your design system

Paste a URL. Get a production-ready, multi-file design system in 30 seconds, ready for your codebase or AI tools.

Or explore popular sites →
Try these design references:
stripe.comlinear.appvercel.comnotion.soraycast.com

For your own projects, client work, and design research. Respect the sites you analyse.

Most analysed this week
1,196 design systems analysed·891 unique sites·15 this week
🥇stripe.com47🥈apple.com27🥉google.com174vercel.com155linear.app12
See full leaderboard →
How it works

From a single URL, you get:

Everything you need to rebuild and extend a design system without starting from scratch.

Tailwind config

tailwind.config.js

Drop into your project. Colours, spacing, shadows and radii all tokenised.

Figma variables

figma-variables.json

Import straight into Figma Libraries with dark-mode variants mapped.

shadcn/ui theme

shadcn-theme.css

Paste into globals.css. Every shadcn component picks the tokens up.

React theme

theme.js

Works with Chakra, Stitches, Vanilla Extract and any theme consumer.

W3C design tokens

design-tokens.json

Standards-compliant JSON for Style Dictionary and tokens tooling.

CSS variables

variables.css

Custom properties you can reference from anywhere in your stylesheets.

HTML preview report

preview.html

Visual swatch sheet with type scale, shadows, breakpoints and a11y score.

Beyond the paint

Also captures how the site actually works

Not just colours and type. The patterns, states, and structure behind the visible design. This is the stuff that makes the output feel native instead of applied.

Layout systems

Grid, flex, and spacing patterns, including container widths and justify/align choices.

Responsive behaviour

Crawls 4 viewports and maps exactly what changes across breakpoints.

Interaction states

Hover, focus, and active styles recorded with the actual transitions applied.

Accessibility signals

WCAG contrast ratios on every colour pair, plus a weighted readability score.

What you get

Free

Visual HTML preview + CSS variables. No signup.

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

Pro: all 7 files

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

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

Feed the export to your coding agent.
Ship interfaces that feel like they belong.

Drop the Pro export into Claude Code, Cursor, Codex, or any agent that reads files. The Tailwind config, CSS variables, and W3C design tokens are structured exactly the way LLMs expect.

Combine them 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-tailwind.config.js and stripe-com-variables.css. Apply these tokens to our landing page.