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.
- Apps you've connected to Claude
- Start a design system from a normal chat and point Claude at connected apps, uploaded files, Figma files, decks, and fonts in one go.
Once a design system is applied, Claude compares what it generates with the system and fixes mismatches before you see the result. You still review, but off-brand colours and stray fonts get caught earlier.
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.
Where to start
At claude.ai/design, open the Design system picker under the prompt and click +. Claude asks how you want to start: Create here (connect Figma or GitHub, or upload slides and assets) or Create using Claude Code, marked best fidelity, for systems that already exist as React components. The picker's Multi toggle lets one project use more than one system.
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.
From your codebase: /design-sync
If your design system already exists as React components in code, you can bring it in from the code itself instead of the set-up screen. The command is /design-sync, and you run it in Claude Code inside the code project, not in Claude Design. Claude Code turns your components into a design system and uploads it to Claude Design, with a live preview of each one.
- Use it when
- Your components live in a React codebase and you want Claude Design to use the real ones, not lookalikes.
- Skip it when
- Your system lives in Figma, a deck or brand files. Use the set-up screen above instead.
- You need
- A paid Claude plan, Claude Code, and the code project on your computer. On Enterprise, an owner has to turn it on.
Open Claude Code in the project
In Terminal, go to the folder of the code project and start Claude Code. If a developer owns the repo, this is a good thing to do together.
Run /design-sync
Type /design-sync followed by a name, for example /design-sync Studio Demo. If it asks you to authorise Claude Design, run /design-login and sign in.
Let it prepare the components
It works in its own copy of the project, so your files are untouched. It gathers the components, writes setup notes and usage guidance, and builds a preview of each one. On a small project this takes minutes; a first sync of a large library can take a few hours.
Open the link
When it finishes, it gives you a link to the new design system in Claude Design.
In Claude Design, a synced system says where it came from. Each component gets live previews of its variants and "Usage notes for Claude", which tell the design agent how to use it.
A synced system is a copy taken at the moment you ran the command. When the components change in code, run /design-sync again in the same project. It remembers the design system it created and updates that one instead of making a new one. Make changes in the code, not in Claude Design: the system page says so itself.
A new synced system is not published, so it may not show up in your design-system list or in new projects yet. Tick Published on the system page. Then click Check next to "Check whether this design system can migrate to claude.ai" to see whether anything blocks it from the newer Design and Slides artifacts (see the note below and Lesson 8).
Claude Design's own instructions are clear: type /design-sync at the Claude Code prompt yourself. Asking Claude to run it for you won't work. It also isn't available if you use Claude through Bedrock, Vertex or Foundry. When it finishes and you tick Published, the system appears under Design systems for everyone in your organization.
To get a coded screen onto the Claude Design canvas, use /design in Claude Code. To send a finished design back to code, use Share > More formats and apps > Claude Code > Send in the standalone app, or ask for a handoff in the chat (Lesson 12).
Systems published the old way were tagged Legacy and don't show up in the design-system picker inside Slides or Design artifacts until they are migrated. Lesson 8 shows the one-click migration.
Claude has your design system
- Picked a source (code, Figma, or brand assets)
- Know when to sync from code with /design-sync in Claude Code
- Published it for your organization
- Reviewed the extracted palette, type, and components
Next: publishing the system so new projects inherit it automatically.