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.
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.
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.
Since the mid-2026 update, you can type /design-sync inside a project to pull in a design system from a GitHub repo, design files, raw uploads, or your local codebase, without walking through the full setup screen. Claude reads your components and auto-corrects its output to match before you see it.
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.
Since September 2026 a system you extract and publish here is tagged Legacy, and a Legacy system does not appear in the design-system picker inside Slides or Design artifacts. It has to be migrated across before new work can use it. Lesson 8 covers how, and it takes a minute.
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.