How to clone the design of any website for your side project

August 3, 2026 8 min read

A legal, ethical workflow for capturing design inspiration from websites you admire and using it in your own project with an AI coding agent.

You have a side project. You want it to look good — not template-good, but Linear-good or Stripe-good. So you open a tab, study the site you admire, and wonder: can I actually do this? Is it legal? Where do I even start?

Yes, you can do it. The legal question has a cleaner answer than most people think. And the workflow, with the right tooling, takes about ten minutes. This post walks through the whole thing.

The legal question: inspiration versus infringement

Copyright protects expression, not ideas. A design system — the specific combination of a typeface, a spacing scale, a border-radius value, a color palette — is not a copyrightable work in most jurisdictions. What is protected: the actual logo artwork, the specific marketing copy, the proprietary illustrations, and the photographs.

What you are doing when you capture a design system is recording computed CSS values and structural patterns. You are not copying pixels. You are not downloading images. You are observing that a company chose font-size: 14px for body text and border-radius: 8px for cards, and noting that down as inspiration — exactly the same act as a designer taking notes in a sketchbook.

Three things you should never copy: trademarked logos, commercial font files (you need your own license), and copyrighted images or illustrations. A design system tells you which font family a site uses; acquiring a license to use that font is your own step.

The practical rule: capture the system, not the assets. You want the spacing scale, the color tokens, the typographic hierarchy, and the layout patterns. Those are ideas. Ideas are fair game.

Step 1 — Choose your inspiration site

Be deliberate here. Picking the right source site determines the quality of what you end up with. A few things to look for:

  • Consistency: A site with a strong design system uses the same spacing tokens, type scale, and color palette everywhere. Inconsistent sites produce noisy output.
  • Proximity to your use case: If you're building a SaaS dashboard, capture a SaaS dashboard — not a portfolio site. The structural patterns matter as much as the visual tokens.
  • Actual CSS, not images: Some sites render everything as SVG or canvas (game engines, certain data-viz apps). Those won't give you useful computed styles. Standard React/Vue/Svelte marketing and product sites work best.

For this walkthrough we will use Linear — specifically linear.app — because its design system is unusually coherent: tight spacing, a restricted type scale, consistent use of neutral grays, and excellent dark-mode execution.

Step 2 — Install Design Catcher

Design Catcher is a free Chrome extension. Install it from the Chrome Web Store:

chromewebstore.google.com — Design Catcher

No API key required. No account. Once installed, a small icon appears in your Chrome toolbar.

Step 3 — Navigate and capture

Go to linear.app. Open a page that represents the design well — the marketing homepage captures the brand palette and typography; the app interface (if you have an account) captures the dense UI patterns. For a side project building a SaaS dashboard, you want both.

  1. Navigate to linear.app in Chrome.
  2. Click the Design Catcher extension icon in the toolbar.
  3. Click Capture this page. The extension reads computed CSS properties, CSS custom properties (variables), font stacks, and the DOM structure. It takes a few seconds.
  4. The extension sends this data to Gemini 2.5 Flash, which synthesizes three markdown files: DESIGN.md, STRUCTURE.md, and UI-KIT.md.
  5. A download prompt appears. Save the bundle — a zip containing the three files — to your local machine.

If someone else already captured Linear recently, the community cache serves the result instantly. First captures run the full LLM synthesis; repeat captures for the same URL load in under a second.

Step 4 — Review the bundle

Unzip and open each file. Here is what you will find for Linear:

DESIGN.md

The design token layer. Expect something like: 

# Linear Design System

## Color
- Background: #0f0f0f (dark canvas)
- Surface: #1a1a1a (elevated card)
- Border: rgba(255,255,255,0.08) (hairline)
- Accent: #5E6AD2 (Linear purple)
- Text primary: #F2F2F2
- Text secondary: rgba(242,242,242,0.56)

## Typography
- Font: Inter (UI), system-ui (fallback)
- Scale: 11px caption · 13px body · 15px body-lg · 20px headline · 28px display
- Weight: 400 regular · 500 medium · 600 semibold

## Spacing
- Base unit: 4px
- Scale: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64px

## Border radius
- Small: 4px (inputs, tags)
- Medium: 8px (cards, modals)
- Large: 12px (containers)

STRUCTURE.md

The layout and component pattern layer. Documents how Linear structures a page: fixed sidebar, scrollable main, top-bar with breadcrumb, inline command palette. This is the architectural intelligence that is hardest to reproduce by eye.

UI-KIT.md

Component-level patterns: button variants, badge styles, form field treatment, list item anatomy. Written as descriptive prose plus CSS pseudo-code — enough for an agent to reproduce any component from the system.

Step 5 — Drop the bundle into your repo

Create a design/ directory in your project root and drop the three files in: 

my-saas-app/
├── design/
│   ├── DESIGN.md
│   ├── STRUCTURE.md
│   └── UI-KIT.md
├── src/
└── ...

That is the entire integration step. No build tool changes. No config. The files are plain markdown and every AI coding agent can read them.

Step 6 — Prompt your agent

Now you have a machine-readable design spec. Here is a real prompt for Claude Code to build a sidebar using the Linear design system: 

Using the design tokens and layout patterns in @design/DESIGN.md and
@design/STRUCTURE.md, build a collapsible sidebar component for a SaaS
dashboard. Requirements:

- Fixed left position, 240px wide when expanded, 56px when collapsed
- Supports navigation sections with icon + label items
- Active item uses the accent color (#5E6AD2) with a left indicator
- Uses the border token (rgba(255,255,255,0.08)) for the right edge separator
- Collapses to icon-only on toggle, with a smooth 150ms transition
- All spacing from the 4px base scale in DESIGN.md

Stack: React + CSS modules. No external UI library.

The agent reads the token values directly from your context files and applies them. No ambiguity about which shade of gray to use. No back-and-forth asking for hex codes. The result will look Linear-ish without copying a single asset.

Common gotchas

Fonts: you need your own license

DESIGN.md will tell you Linear uses Inter. Inter is open source (SIL Open Font License) — you can use it freely. But if you capture a site using a commercial typeface like Suisse Int'l or Söhne, you need to license that font independently. Design Catcher captures font names, not font files. Always verify the license before deploying.

When in doubt, substitute with a close open-source equivalent. Inter covers most neutral sans-serif needs. DM Sans, Plus Jakarta Sans, and Geist are strong alternatives with similar metrics to popular commercial fonts.

Images: don't copy them

Design Catcher does not download images. It extracts background colors, overlay treatments, and structural patterns. But you will see the source site's images in your browser while reviewing. Do not screenshot and reuse them. Commission or generate your own, or use stock photography with an appropriate license.

Brand colors: inspiration, not duplication

Linear's purple is #5E6AD2. You can note this as an accent inspiration and choose your own adjacent hue — say, #6875E0 — with similar lightness and saturation. Trade dress protection is narrow and typically requires substantial market recognition. Still, choosing your own unique accent color is both better practice and better for your brand identity.

JavaScript-heavy SPAs

Some pages render significant UI after the initial HTML loads. If your capture seems sparse, interact with the page first — open a modal, expand a dropdown, navigate to a sub-page — then re-capture. Design Catcher reads computed styles from the current DOM state, so what is on screen at capture time is what gets extracted.

Dark mode vs light mode

If the target site has both modes, capture both. Run two captures — one with your system in light mode, one in dark — and you will get separate token sets. Drop them in as DESIGN-light.md and DESIGN-dark.md and reference both in your prompt.

What you end up with

A three-file portable design spec that encodes everything an AI agent needs to produce consistent, on-brand UI: token values, layout conventions, and component anatomy. No Figma file required. No design background required. The entire workflow from "I like how Linear looks" to "here is a working sidebar that matches its system" is under fifteen minutes.

The inspiration is yours to use. The assets are not. That distinction is where the line is, and it is a clear one.