You've got an existing website or app. You want to build a new project that matches its visual style. Your AI tool should generate pages that look like they belong to the same brand family.
The fastest path: extract design tokens from your existing site and feed them into your AI tool's design system. Three methods, from manual to fully automated.
Method 1: Manual DevTools Extraction (30-45 Minutes)
This is the no-tools approach. You open your browser's DevTools and write down design values.
Open your website in a browser. Press F12 (or Cmd+Option+I on Mac) to open DevTools.
Navigate to your website's homepage. Right-click a button and select "Inspect." You're now looking at the HTML and CSS for that element.
In the Styles panel, look for color values. They'll look like color: #2563eb or background: rgb(37, 99, 235).
Write down the colors you see:
- Primary color (buttons, links, highlights)
- Secondary color (accents, secondary buttons)
- Background colors (page, card, input)
- Text colors (body, muted, light)
- Border colors (dividers, input borders)
Move to an input field. Inspect it and write down:
- Border-radius (e.g., 4px, 8px, 12px)
- Border color and thickness
- Padding and font size
Check a card or container. Write down:
- Padding (p-4, p-6, 24px)
- Margin between elements
- Box-shadow (if any)
Inspect a heading. Write down:
- Font size (16px, 20px, 24px)
- Font weight (400, 500, 600, 700)
- Line height
Inspect spacing between sections. Use the DevTools ruler or the margin/padding values in the Styles panel.
After 30-45 minutes of this, you'll have a document that looks like:
Primary: #2563eb
Secondary: #64748b
Background: #ffffff
Border: #e2e8f0
Text: #0f172a
Text-muted: #64748b
Border-radius:
- sm: 4px
- md: 6px
- lg: 8px
Spacing:
- xs: 4px
- sm: 8px
- md: 16px
- lg: 24px
- xl: 32px
Typography:
- h1: 32px, weight 700
- h2: 24px, weight 700
- h3: 20px, weight 600
- body: 16px, weight 400
- small: 14px, weight 400
Shadows:
- sm: 0 1px 2px rgba(0, 0, 0, 0.05)
- md: 0 4px 6px rgba(0, 0, 0, 0.1)
Now create a globals.css file in your new project with these tokens:
:root {
--color-primary: #2563eb;
--color-secondary: #64748b;
--color-bg: #ffffff;
--color-border: #e2e8f0;
--color-text: #0f172a;
--color-text-muted: #64748b;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
}
Tell your AI tool about these tokens in your design system rules file. Now when your AI tool generates UI, it'll use these colors and spacing, matching your existing site's style.
Pros: No tools required. Direct control. You understand every value.
Cons: Time-consuming. Error-prone if you miss values. Requires discipline to extract every token.
Method 2: CLI Tools (5 Minutes)
Tools like Dembrandt, Pollen, and others automate the extraction process.
Install Dembrandt:
npm install -g dembrandt
Run it on your website:
dembrandt https://mycompany.com
Dembrandt loads your website in a headless browser, scans computed styles, and generates a design tokens file. It outputs JSON or CSS variables.
The output looks like:
{
"colors": {
"primary": "#2563eb",
"secondary": "#64748b",
"background": "#ffffff",
"border": "#e2e8f0"
},
"spacing": {
"xs": "4px",
"sm": "8px",
"md": "16px"
},
"typography": {
"h1": {
"fontSize": "32px",
"fontWeight": 700
}
}
}
Copy this into your project's design tokens file. Done.
Pros: Automated. Fast. Covers most styles. Works at scale.
Cons: Accuracy varies. Colors and spacing are usually correct, typography less so. Requires review and adjustment.
Method 3: Matchkit URL Extraction (Under 2 Minutes)
Matchkit does automated extraction but goes further. It doesn't just extract raw tokens; it maps them to design system axes.
Go to https://matchkit.io/configure (Pro tier required).
Paste your website URL in the "Extract from URL" field.
Click "Extract."
Matchkit runs a headless browser, analyzes your site's design, and maps the values to its 11 design axes (radius, button-style, spacing-density, shadow-style, color-temp, etc.).
In under 2 minutes, Matchkit generates a full design system that matches your existing website:
- Pre-styled React components (Button, Card, Input, etc.)
- Design tokens in globals.css
- SKILL.md (for Claude Code) or .cursor/rules/design.mdc (for Cursor)
- Tailwind configuration
You can download the ZIP or sync via CLI.
The advantage: Matchkit doesn't just extract values; it generates components that already match your brand. You don't need to create Button, Card, and Input components manually. They're generated.
Pros: Fast. Comprehensive. Generates components, not just tokens. Works bidirectionally (can also generate for new projects).
Cons: Requires Pro tier (€9/mo). Depends on Matchkit's extraction accuracy.
From Extracted Tokens to AI-Ready Design System
Regardless of which method you use, you now have design tokens. The next step is making your AI tool use them.
Create a design system rules file (SKILL.md for Claude Code, .cursor/rules/design.mdc for Cursor):
# Design System
Use this design system to match [Company Name]'s visual style.
## Colors
Reference these tokens:
- Primary: var(--color-primary) (#2563eb)
- Secondary: var(--color-secondary) (#64748b)
- Background: var(--color-bg) (#ffffff)
- Border: var(--color-border) (#e2e8f0)
- Text: var(--color-text) (#0f172a)
Never hardcode colors. Always reference tokens.
## Typography
- h1: 32px, weight 700
- h2: 24px, weight 700
- h3: 20px, weight 600
- body: 16px, weight 400
## Spacing
Use the spacing scale:
- xs: 4px
- sm: 8px
- md: 16px
- lg: 24px
- xl: 32px
## Border Radius
- sm: 4px
- md: 6px
- lg: 8px
## Shadows
- sm: 0 1px 2px rgba(0, 0, 0, 0.05)
- md: 0 4px 6px rgba(0, 0, 0, 0.1)
Place this in .claude/SKILL.md (Claude Code) or .cursor/rules/design.mdc (Cursor).
Now ask your AI tool to build something:
Build a landing page with:
- Hero section
- Features section with 3 feature cards
- CTA section
- Footer
Use the extracted design system to match [Company Name]'s style.
Your AI tool will generate a page that matches your existing website's visual identity.
Legal Considerations for Design Extraction
Extracting CSS values (hex codes, border-radius, font names) is extracting functional data, not copyrightable expression. Using these values as a starting point for your own design system is standard practice in web development. You're not copying the site's HTML or visual design; you're taking inspiration from the technical implementation.
However, there's a line. If your existing website has a highly distinctive visual identity (like a unique layout pattern, proprietary iconography, or signature color combinations), reproducing that identity in a new project could raise trade dress issues.
Safe approach: Extract tokens, adjust them to fit your brand personality, and create something that's inspired by, not identical to, the source. Add your own components, unique layouts, and distinctive elements. The goal is consistency within your brand, not duplication of someone else's.
If you're extracting from a competitor's site for market research, that's fine. If you're trying to clone their entire design system to sell as your own, that's not fine.
Frequently Asked Questions
Can I copy another website's design style legally?
Extracting CSS values (hex codes, border-radius, font names, spacing) is extracting functional data, not copyrightable expression. Using these values as a starting point for your own design system is standard practice. However, reproducing a highly distinctive visual identity could raise trade dress issues. Extract tokens, adjust them to fit your brand, and create something that's inspired by, not identical to, the source. The goal is consistency with your brand, not duplication of someone else's.
What's the fastest way to match my existing website's style in a new AI-coded project?
Matchkit URL extraction (Pro tier, €9/mo). Paste your website URL into the Matchkit configurator. It extracts design tokens, maps them to design system axes, generates components, and creates SKILL.md or .cursor/rules/design.mdc in under 2 minutes. Your AI tool then generates new pages that match your existing site's visual style automatically. If you want a free option, use a CLI tool like Dembrandt (takes about 5 minutes) or extract manually (takes 30-45 minutes).
How accurate is automated design token extraction?
Headless browser extraction (Matchkit, Dembrandt) captures computed styles with high accuracy for colors, border-radius, font families, and shadow values. Typography sizing is moderately accurate (font-size captures well, line-height less so). Spacing accuracy varies depending on how consistently the source site uses values (if spacing is inconsistent, extraction is inconsistent). Most tools provide confidence scores per token. Always review and adjust the extracted values before committing to them.
Can I extract tokens from a website I don't own?
Yes, but with caveats. Extracting technical data (colors, spacing) for inspiration is standard practice. Building a new site that references the extracted tokens is fine. Selling the extracted tokens or claiming them as your own work is not. If you're extracting from a competitor's site for market research or inspiration, extract and adapt. If you're extracting from a public design system (like shadcn/ui or Material Design), that's explicitly allowed.
What if my website doesn't extract well?
Most websites extract reasonably well because CSS is standardized. If extraction fails, check (a) whether the site uses CSS-in-JS that computes styles dynamically, which is harder to extract, (b) whether the site heavily uses images or iframes, which can't be extracted, or (c) whether the site is behind authentication. If the extraction is incomplete, supplement with manual extraction from DevTools.
Can I extract tokens from mobile vs. desktop views?
Yes. Extract from both and compare. If your website is responsive, you might have different breakpoints and spacing values. Extract from the viewport size that matters most to you, or extract from both and create separate token sets. Matchkit extraction uses the desktop viewport by default, but you can customize it.
Do I need to extract every token on my website?
No. Extract the major decisions: primary and secondary colors, text colors, background colors, border color, 2-3 border-radius values, 5-7 spacing values, and heading sizes. These cover 90% of design consistency. You don't need to extract every color shade or spacing variant if they're not heavily used.
What if I extracted tokens but my AI tool isn't using them?
Check: (a) Is the design system rules file in the correct location and properly formatted? (b) Does the rules file explicitly reference the extracted tokens? (c) Are you asking your AI tool to use the design system in your prompts? Sometimes you need to reinforce the instruction: "Use the extracted design system tokens from globals.css."
Can Matchkit work with existing codebases?
Yes. Matchkit now works bidirectionally: (a) Generate a design system for a new project (what we've covered), and (b) Extract tokens from an existing codebase and retroactively structure it. If you have an existing project with colors spread across multiple files, Matchkit can scan it, extract tokens, create globals.css, and generate SKILL.md. This is called "retroactive structuring" and it's useful if you're retrofitting an existing app with a formal design system.
Should I extract tokens or build a design system from scratch?
If you have an existing website or brand, extract tokens and adapt. It's faster and ensures consistency with what users already know. If you're starting from zero, use a preset (Matchkit, shadcn/ui, Tailwind defaults) and customize it. Extracting from existing work is always faster than starting from scratch.