How to Give Claude Code a Design System From a Live Website

You do not need a Figma design system for Claude Code to build on-brand. You can lift a working one straight from a live website: its colors, fonts, type scale and spacing, then hand it to Claude Code as a rules file or over MCP so every file it writes stays consistent.

The short answer

A design system is a set of tokens, not a Figma file. Extract those tokens from a live site (colors by role, fonts, type scale, spacing, radii), write them into a CLAUDE.md rule at your project root, and Claude Code will build every component against them. When you want it to be automatic across projects, serve the same tokens over MCP instead of maintaining the file by hand.

Why a live site is a good source

A shipped website is a design system that already survived real decisions: the palette is settled, the type scale is in use, the spacing is consistent. That is often more honest than a Figma file that drifted from the code months ago. Reading tokens from what actually renders gives Claude Code the current truth, not a stale artifact.

Step by step

  1. Open the style extractor and paste the URL of the site whose system you want (your product, your marketing site, or a client site you are authorized to build against).
  2. Extract, then copy the tokens. You get colors ranked and labelled, the font stack, the type scale, radii and shadows.
  3. Paste them into a CLAUDE.md file at the repo root, wrapped in clear rules (below).
  4. Ask Claude Code to build. It reads CLAUDE.md on every request, so the whole project inherits the system.

A CLAUDE.md block you can paste

Swap in your extracted values. Keep it explicit and short:

## Design system (source of truth, do not deviate) Use these tokens for all UI. Do not invent colors, fonts, or radii. - Ground: #FFFFFF / raised: #F7F7F5 / text: #1A1A1A / muted: #6B6B6B - Accent: #2D6CE5 (buttons, links, focus only) - Font: "Inter", system-ui (weights 400/500/600) - Type scale (px): 13, 15, 18, 24, 40 - Radius: 8px on interactive elements, 12px on cards - Spacing: 4px base unit; use multiples of 4 When a design need is not covered by these tokens, stop and ask rather than guessing a new value.

Make it automatic with MCP

Maintaining CLAUDE.md by hand is fine for one repo. For a design system you reuse, the SlopScrub extension saves the extracted look (and specific captured sections) as a taste profile that Claude Code reads over MCP. It supplies the tokens on every request without a file to keep in sync, and one profile can back every project that shares the brand.

Where it breaks

Tokens describe the visual language, not the component API, so you still tell Claude Code which components exist and how they behave. Sites rendered mostly as images or canvas extract poorly. And a design system pulled from a live site is a starting point you should review, not gospel: if the source site has inconsistencies, they come along for the ride.

FAQ

Can Claude Code use a design system without a Figma file?

Yes. A design system is just a set of tokens: colors, fonts, type scale, spacing and radii. You can extract those from any live website with SlopScrub's free style extractor and give them to Claude Code as a CLAUDE.md rule or an MCP source. No Figma, no design file, no handoff needed.

What format should the design tokens be in for Claude Code?

Plain, explicit values in a file it reads on every request work best: a CLAUDE.md block or a tokens file with the hex colors labelled by role, the font stack, the type scale in px, and the spacing unit. Claude Code follows concrete constraints far more reliably than adjectives like 'clean' or 'modern'.

How is this different from pasting the colors into the chat once?

A single paste falls out of context as the session grows, so later files drift. A CLAUDE.md rule or an MCP server re-supplies the tokens every time, which is what keeps a large codebase consistent from the first component to the last.