How to Build a Full Design System in Claude Design in 3 Minutes

TL;DR: Claude Design builds a complete design system (colors, type, spacing, components, and a live app recreation) from three uploaded files in under 3 minutes. Drop in a foundations Figma file, a components Figma file, and a font file. Tell it to build. Export the tokens and plug them into every future Claude Code project as a DESIGN.md. Your AI-built apps stop looking like AI built them.

Your AI Apps Look Like AI Built Them

Every vibe-coded app ships with the same tell. Generic buttons. Default fonts. Colors that almost match but do not. Spacing that feels off. A layout that says “AI guessed at this.”

The cause is not Claude. The cause is that you never gave Claude a design system to pull from. Every prompt starts from zero. Claude guesses at the buttons. Guesses at the type. Guesses at the colors. Without a system, every output is a guess.

With a system, every prompt pulls from the same foundations. Buttons match across pages. Type scales the same way. Colors are always the same hex values. Spacing follows one rule.

Claude Design just made building that system a 3-minute job.

What Claude Design Does

Claude Design is Anthropic’s design product. It launched alongside the Claude Design announcement that crashed Figma stock 7% last week. The headline feature is that you can chat a UI into existence, but the real power is what it does with uploaded files.

Drop in your foundations. Drop in your components. Drop in your font. Tell it to build. Opus 4.7 reads all three, extracts the patterns, and generates a complete design system including:

Color palette with semantic roles (primary, secondary, surface, destructive, etc.)
Type scale from H1 down to caption, with line heights and weights
Spacing tokens (4, 8, 12, 16, 24, 32, 48)
Component library rebuilt in your system (buttons, inputs, cards, modals, nav)
Live app recreation that shows the system applied to a real product UI

All of that in under 3 minutes. No designer. No component library vendor. No paid subscription beyond your Claude Pro or Team plan.

The 3 Files You Need

You need three files to start. Grab free starters if you do not have your own.

1. Foundations File

A Figma file with your brand colors, spacing scale, radius tokens, and shadow styles. Keep it simple. A single frame with swatches labeled by role is enough.

If you do not have one, grab the free starter at ai-basic-series.vercel.app/design-systems-claude and change the colors to match your brand.

2. Components File

A Figma file with your core UI primitives: buttons, inputs, cards, modals, nav bars. It does not need to be pretty. Claude will rebuild them in your system anyway. What matters is that every component you want in the system exists somewhere in the file.

The starter file has 20 components to get you going.

3. Font File

A .ttf or .otf file. Inter is the safe default. If you have a custom brand font, use that. Claude Design reads the actual file, not just the font name, so it renders your exact font in the output.

Step-by-Step Build

Here is the exact flow that works.

Step 1: Go to claude.ai/design. You need a Claude Pro or Team plan to access Design. Free plans do not have it yet.

Step 2: Drop in all three files at once. Drag the foundations file, components file, and font file into the upload zone in one motion. Claude reads them together. Uploading one at a time sometimes produces a weaker system because Claude does not know the files are related.

Step 3: Run the prompt that works.

Build a complete design system from these files in 3 minutes. Include color palette, type scale, spacing tokens, a component library, and recreate the UI of Linear using this system to show it in action.

Swap Linear for any app whose UI you want Claude to recreate. Stripe, Wyze, Superhuman, Notion, Figma itself. The recreation is the proof that the system works.

Step 4: Wait 2-3 minutes. Opus 4.7 does the heavy lifting. Stay on the tab. You will see the system building in real time.

Step 5: Export the tokens. Click Export. Grab the tokens as CSS variables, a Tailwind config, or JSON. This is what you use downstream.

The DESIGN.md Pattern

Here is where this gets powerful for Claude Code users.

Open your Claude Code project. Create a file at the root called DESIGN.md. Paste the exported tokens in. Commit it.

Every future prompt you give Claude Code pulls from DESIGN.md. Ask for a dashboard. Claude reads DESIGN.md first, then builds the dashboard using your exact colors, type, and spacing. Ask for an email template. Same thing. Ask for a landing page. Same thing.

Your entire app stops looking like AI slop. Every component on every page uses the same system. Buttons match. Type matches. Colors match.

This is the unlock. Claude Design is the generator. DESIGN.md is the enforcer.

10 Downstream Prompts

Once you have the system, these prompts apply it everywhere.

Full design system build. Build a complete design system from these files in 3 minutes. Include color palette, type scale, spacing tokens, a component library, and recreate the UI of [Linear].
System from a URL. Pull the design system from [your-site.com]. Extract colors, type, and spacing. Rebuild as a Claude Design system.
Dark mode variant. Generate a dark mode variant of this system. Keep the accents. Swap backgrounds and text for a high-contrast dark palette.
Mobile-first. Generate a mobile-first component set. Prioritize thumb-reach touch targets (min 44x44). Include a bottom nav pattern.
Dashboard layout. Design a dashboard with sidebar nav, top bar, 4 metric cards, a chart area, and a recent-activity list.
Landing page hero. Design a hero for [product name]. Bold headline, supporting line, CTA button, product screenshot placeholder.
Email template. Design a transactional email with header, body, CTA, footer. Match brand colors and type.
Pricing page. Design a 3-tier pricing page with monthly/annual toggle and “Most Popular” badge on the middle tier.
Onboarding flow. Design a 3-step onboarding with progress indicator, input forms, and success screen.
Tailwind config export. Export this system as a Tailwind config file with colors, spacing, font sizes, border radius, and shadows.

Who This Is For

Vibe coders shipping AI-built apps that look generic. Founders building personal software with no designer on staff. Anyone who wants Claude Code projects to look like a real company built them, not like AI did.

FAQ

Does this work without Figma files? Claude Design can generate from a URL or a prompt too. The output is weaker than when you feed it actual files. For real work, use files.

Can I use this with Tailwind? Yes. Export as Tailwind config. Paste into your project. Done.

How much does it cost? Claude Design is included in Claude Pro and Team plans. The build itself uses Opus 4.7, which burns a meaningful chunk of session tokens. Budget for it.

Can I use a custom font? Yes. Upload the .ttf or .otf file directly. Claude renders using the actual font file.

What about dark mode? Generate a dark mode variant with the prompt above. Claude will produce a matching dark palette automatically.

The Bottom Line

AI-built apps look like AI built them because they have no design system. Claude Design fixes that in 3 minutes. Build the system once. Export the tokens. Drop them into DESIGN.md in every future project. Your apps stop shipping as slop.

Want the foundations file plus my best Claude Design prompts? Comment “SYSTEM” on the video or grab the free guide at ai-basic-series.vercel.app/design-systems-claude.