How to give Claude Code a design system from a live website

October 18, 2026

4 min readWorked example included

Left to its defaults, Claude Code builds the average of every website it has seen: one safe sans-serif, a purple-blue gradient, rounded cards. Giving it a real design system fixes that, and the system can come from a site you already have or one you admire. The short version: measure the site’s tokens in a real browser, write them into a DESIGN.md, and import that file from CLAUDE.md. This guide shows each step, with a real capture as the example.

Step 1: Measure the site

Pick a tool that reads the rendered page, so colors set by JavaScript and the CSS cascade are already resolved. Three reasonable options, with different strengths:

With Enrichr connected to Claude Code, the request is one sentence: “Extract the design system from https://example.com and write it to DESIGN.md.” The extract_design_system tool costs 1 credit, and the free plan includes 30 a month. For setup, see the connect guide.

Step 2: Keep the tokens that matter

A raw capture is long. The one we ran on enrichr.dev’s own homepage returned 41 CSS custom properties, a ranked palette, a type scale, spacing, shadows, easings and 13 breakpoints, in a file of more than 3,000 lines. Claude does not need all of it. Keep the decisions a designer would write down:

# Design system (measured from enrichr.dev, 2026-10-18)

## Color
- brand: #005236      (primary green, buttons and links)
- brand-dark / ink: #0c1e18   (text and dark sections)
- accent: #e6ff55     (highlight on dark backgrounds only)
- background: #fbf8f1 (page), surface: #ffffff (cards)

## Type
- Display: Parkinsans   - Body: Instrument Sans
- Headline accent: Bebas Neue   - Mono: Fira Code

## Shape and motion
- radius: 1.2rem (cards), 0.6rem (small), pill for tags and buttons
- default easing: cubic-bezier(0.32, 0.72, 0, 1)

## Rules (examples; you write these)
- Use the accent only on dark backgrounds.
- Use the brand green for primary actions and ink for body text.

Those values are copied from the capture, not invented: the custom properties --brand, --brand-dark, --accent, --bg, --surface, the three font stacks, --radius and --ease-out. The Rules section is the part you add yourself, because measurements say what is used, not what it is for.

Step 3: Wire it into Claude Code

Per Anthropic’s documentation, Claude Code loads CLAUDE.md files at the start of every session and treats them as context. A CLAUDE.md can import other files with an @path line, and imported files load alongside it at launch. So add one line to your project’s CLAUDE.md:

## Design
Follow the design system in @DESIGN.md for all UI work.

Two details from the same documentation are worth knowing:

• Keep it short. The recommendation is under 200 lines per file. Longer files use more context and reduce how reliably the instructions are followed, and imports do not reduce that cost, since they load at launch too.
• Scope it if you can. A rule file in .claude/rules/ with a paths frontmatter field only loads when Claude works with matching files:

---
paths:
  - "src/**/*.{ts,tsx,css}"
---
Use the colors, type and radii in DESIGN.md. No new hex values.

Step 4: Check the result

Ask Claude to build one real component, then compare it to the reference at the same viewport. The usual failures are fonts that did not load (the fallback shows instead), colors used in the wrong role, and spacing that drifts. When something is wrong, fix the rule in DESIGN.md rather than the one component, so the correction applies from the next session on.

When a free extractor is enough, and when it is not

For a conventional marketing site, colors, type, spacing and radii are most of the design, and a free local extractor covers that. Reach for something that also records motion and 3D when the site’s character comes from how it moves: scroll-driven GSAP animation, a WebGL hero, a Three.js scene. Those do not appear in a token file at all. For that case see how to recreate a GSAP animation from a website and how to recreate a WebGL shader effect.

What you can reuse

Design tokens are measurements, so they are generally free to use. Logos, photography, long copy and a look so close to another brand that people could confuse them are a different matter. If you are matching a competitor rather than learning from a reference, read is it legal to copy a website design? first.

FAQ