Before you start
Creating a design system lets Claude Design produce work that fits your brand instead of generic defaults. It extracts reusable components, colors, typography, and patterns from the assets you provide - codebases, decks, brand references - and uses them as the foundation for every project in your account. This guide walks the setup end to end; the conceptual side of why it works is in design systems for AI design tools.
There are two ways a design system reaches Claude Design. This guide covers the first, but the difference matters before you start:
Set up once, used by everyone
The designer or brand owner sets it up and publishes it to the whole team. Every project in the organization then inherits the same brand automatically - you only do this once.
Supplied for one piece of work
Bring a system to a single project - attach a file, copy from a source, or ask Claude to derive one from your site or repo. Fast, and scoped to that project only.
The source material you prepare is the same for both - so everything below applies either way, and a better document makes a better system.
In Claude Design a design system is almost always a full project of its own - not a single file. That project holds the tokens, global CSS, components, and specimen cards that define the brand, and any reusable piece (a template, a deck) is built as a real component that draws on the system, so it stays on-brand by construction. Those templates surface as a Templates group for every project that consumes the system.
Only rarely is a system just a single file plus a stylesheet attached per project - handy for a quick one-off, but it does not carry the components or templates a full system project does. When in doubt, reach for the project.
The practical upshot: you never maintain a pile of exported files. You edit the system in place - see Updating your design system - and every consuming project picks up the change.
Keep one test in mind throughout: could a stranger produce on-brand work from what you provide alone, with no one to ask? Claude is exactly that stranger.
Prerequisites
Before you begin, line up two things:
- Permissions. Your organization admin must grant access for design-system setup. (Claude Design is in beta on Pro, Max, Team, and Enterprise plans, and is default-off for Enterprise.)
- At least one source of truth. Any one of: a codebase or component library, a deck or document that reflects your visual identity, or brand-guideline assets (logos, color palettes, type specs). One is enough to start; more gives Claude more to work with.
Write values, not vibes in whatever you provide. "Generous whitespace" is advice; "section padding is 80px, step space.10" is an instruction - and instructions are what a tool can follow.
Create or switch to your organization
The design system lives at the organization level, so start there:
- Open Claude Design.
- In the lower-left corner of the project picker, click the current organization name.
- Select your organization, or create a new one.
- Follow the onboarding flow that opens - it leads straight into uploading your assets.
Clicking Set up your design system opens a short chooser - two ways to start:
Create here is the path most teams take - connect Figma or GitHub, or upload assets, all in the browser. Create using Claude Code gives the highest fidelity when your system already lives as React components, reading them straight from the source.
Upload your brand and product assets
During onboarding (or later from organization settings), upload the material that defines your brand. Claude analyzes it and extracts a reusable design system. What works well:
- Codebases - if your system lives in code (say a React component library), link or upload the repo and Claude reads the components and styles directly. This is the strongest input: the CSS is ground truth.
- Prototypes - screenshots, web flows, existing design files.
- Decks or documents - even a well-made slide deck or PDF carries colors, layout patterns, and type choices Claude can extract. A single canonical design-system document is ideal here.
- Individual assets - logos, color-palette files, typography specimens.
Two things sharpen the result. First, include a hard-rules section in your document - the never-do-this list (colors never used, the one true accent, the default theme, house quirks nobody has written down). It converts your taste into guardrails, the highest-leverage thing you can give a generative tool. Second, provide finished examples, not just specs - a real landing page tells Claude more about your brand's feel than a palette alone.
With the form filled in, click Generate. Building the system takes about five minutes - you can leave the tab open in the background and step away.
Review the generated system
Claude turns your uploads into a design system - a browsable UI kit for the organization, organized into Brand, Colors, Components, Shapes, Spacing, and Type. It typically covers:
- Color palette - primary, secondary, and accent colors pulled from your assets.
- Typography - font families, sizes, and weights.
- Components - buttons, cards, navigation, and other reusable patterns.
- Layout patterns - spacing, grid, and page structures.
Validate it before you rely on it: spin up a test project and check the output against your brand. Prompts like "create a landing page for [your product]", "design a dashboard showing [your metrics]", or "make a presentation about [a topic your team presents]" surface quickly whether the extraction captured you. This is where the "values, not vibes" work pays off - vague source produces a vague kit.
Publish it to your team
Once the system holds up, switch the Published toggle on. After publishing, any project created from the Claude Design homescreen while in your organization uses your system instead of the default - no per-prompt pasting, no drift between teammates. That is the whole payoff of the org-level setup: the brand is read before any design work happens, on every project, automatically.
Tips for best results
- Real examples beat specs. A finished marketing page or app screen conveys your brand's feel better than a color list on its own.
- Iterate. If the first extraction misses, upload additional or different assets and regenerate.
- Fix the system, not the screen. When output is wrong in a repeating way, add the missing rule or token to the source and regenerate - the fix compounds across every future project, not just today's. Only hand-correct true one-offs.
- Keep the document and the code in lockstep. When your system exists as both a doc and a stylesheet, change them together - the moment they disagree, generations inherit the drift. Treat it like code: versioned, reviewed, updated in the same change - the same discipline as a clean handoff.
Updating your design system
Brands evolve, and the system should move with them. This is the edit path: from your Claude Design organization settings, click Open next to the design system you want to change the same way you built it. Every revision deserves the same review as the first publish.
The checklist
- Admin permissions granted, and at least one source: codebase, deck/doc, or brand assets.
- Source written as exact values, not vibes - with a hard-rules "never do this" section.
- Organization selected in Claude Design, assets uploaded, onboarding complete.
- Generated system reviewed against a test project before you trust it.
- Published toggle on, so every org project inherits the system.
- Fixes go into the system first; doc and code move in the same change; revisions made in place via Open, then republished.
Examples
Need source material to upload, or want to see what a finished system document looks like? The gallery has downloadable, ready-to-adapt example files - a fictional editorial brand, a real bakery-cafe brand read from its live stylesheet, and a real fintech system as one markdown file: Design system examples.