design-systemLesson 7 of 12

Extracting Your Design System

3 min readClaude Design for DesignersUpdated Apr 21, 2026

If your organization has a real design system, tokens, components, typography, brand colors, you can teach Claude Design to respect it. After setup, every new project automatically uses your colors, typography, and components. No more prompts about brand.

What Claude extracts

Color palettes (primary, secondary, accent, semantic)
Typography (font families, sizes, weights, line heights)
Reusable components (buttons, cards, navigation, forms)
Layout patterns (spacing, grids, common page structures)

What you can feed it

Code repository: A React component library, Tailwind config, or design-system codebase. Most accurate source.
Figma file: Your design-system file with components and tokens published. Good alternative when code isn't available.
Visual references: Screenshots of your live product, existing flows. Claude infers a system from them.
Brand documents: Brand guidelines PDFs, slide decks showing your visual language.
Individual assets: Logos, color palette files, typography specimens, lowest fidelity but a starting point.

One source works; more is better

You only need one source to get started, but providing multiple gives Claude more to work with. A codebase + a brand deck + 2-3 product screenshots produces the most accurate extraction.

Start closest to production

Anthropic's recommendation: pick the source that's closest to shipped code. Code > Figma > screenshots > brand guidelines. The closer to production, the less Claude has to guess.

Claude Design's 'Set up your design system' onboarding screen. Fields include: company name and blurb, link code on GitHub, link code from your computer (drag-folder), upload a .fig file (parsed locally, never uploaded), add fonts / logos / assets, and an 'Any other notes?' free-form field. Back button top-left, Continue to generation top-right. — The starting point. One screen collects everything Claude needs. All upload slots are optional, pair whichever sources you have.

After you hit Continue, Claude takes over. The clip below shows the full flow on the aiuxdesign.guide design system: filling in the form, answering Claude's follow-up questions in chat, watching it register assets, building the UI kit, cleaning up irrelevant artifacts, and landing on the finished system with every checklist item ticked.

The clip is condensed. A real run takes several minutes and scales with the size of your sources (a repo with hundreds of components will take longer than a handful of brand assets).

Claude has your design system

Picked a source (code, Figma, or brand assets)
Uploaded it to the organization design system
Reviewed the extracted palette, type, and components

Next: publishing the system so new projects inherit it automatically.

← Back to Claude Design Guide for Designers overview

design-systemLesson 7 of 12

Extracting Your Design System

3 min readClaude Design for DesignersUpdated Apr 21, 2026

What Claude extracts

Color palettes (primary, secondary, accent, semantic)
Typography (font families, sizes, weights, line heights)
Reusable components (buttons, cards, navigation, forms)
Layout patterns (spacing, grids, common page structures)

What you can feed it

Code repository: A React component library, Tailwind config, or design-system codebase. Most accurate source.
Figma file: Your design-system file with components and tokens published. Good alternative when code isn't available.
Visual references: Screenshots of your live product, existing flows. Claude infers a system from them.
Brand documents: Brand guidelines PDFs, slide decks showing your visual language.
Individual assets: Logos, color palette files, typography specimens, lowest fidelity but a starting point.

One source works; more is better

You only need one source to get started, but providing multiple gives Claude more to work with. A codebase + a brand deck + 2-3 product screenshots produces the most accurate extraction.

Start closest to production

Anthropic's recommendation: pick the source that's closest to shipped code. Code > Figma > screenshots > brand guidelines. The closer to production, the less Claude has to guess.

The clip is condensed. A real run takes several minutes and scales with the size of your sources (a repo with hundreds of components will take longer than a handful of brand assets).

Claude has your design system

Picked a source (code, Figma, or brand assets)
Uploaded it to the organization design system
Reviewed the extracted palette, type, and components

Next: publishing the system so new projects inherit it automatically.

← Back to Claude Design Guide for Designers overview