Creating a Design System with AI: From Tokens to Components

Every project starts with the same question: what does it look like?

I used to spend two weeks picking colors, defining spacing scales, choosing typography, building a component library. Two weeks before writing a single feature.

Now I spend an afternoon. AI handles the tedious parts. I handle the taste.

What a Design System Actually Is

Strip away the jargon. A design system is three things:

1. Tokens: The raw values. Colors. Sizes. Spacing. Font weights.
2. Components: Buttons. Cards. Forms. Built from tokens.
3. Patterns: How components combine. A login page. A dashboard layout. A settings panel.

Most tutorials focus on components. But tokens are where consistency comes from. Get your tokens right and components almost build themselves.

Step 1: Generate Your Color System

This is where AI shines. Color theory is math. AI is good at math.

I give Claude my brand's primary color and ask for a complete system:

The output is a complete globals.css with color tokens. I review it visually, tweak two or three values, and move on.

Without AI, this takes a full day of manual contrast checking and color adjustment. With AI, twenty minutes.

Step 2: Define Your Spacing and Typography Scale

/* spacing.css - generated and reviewed */
:root {
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
}

I don't use AI for this. Spacing and type scales are mathematical progressions. I have a template I copy across projects.

The AI's value here is suggesting which sizes to use where. "Use space-4 for component padding, space-6 for section gaps, space-12 for page sections."

Step 3: Component Generation with shadcn/ui

I don't build components from scratch anymore. shadcn/ui gives you unstyled, accessible components that you own.

npx shadcn@latest init
npx shadcn@latest add button card input dialog

But shadcn components need customization to match your design system. This is where AI helps:

AI generates the Tailwind classes. I paste them into the component. Review visually. Adjust.

Step 4: Pattern Library

Patterns are combinations of components. A login form. A pricing card. A dashboard header.

I describe the pattern in plain English and let AI generate the first draft:

The AI generates a complete, usable component. I always need to adjust spacing, fix some alignment, maybe change the visual hierarchy. But I'm refining, not creating from scratch.

Step 5: Dark Mode (The Part Everyone Forgets Until Launch)

Design systems need dark mode from the start. Adding it later is painful.

/* Light mode tokens */
:root {
  --background: oklch(0.98 0.005 90);
  --foreground: oklch(0.15 0.01 90);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.15 0.01 90);
  --border: oklch(0.85 0.01 90);
  --muted: oklch(0.93 0.005 90);
  --muted-foreground: oklch(0.45 0.01 90);
}

/* Dark mode tokens */
.dark {
  --background: oklch(0.12 0.01 90);
  --foreground: oklch(0.93 0.005 90);
  --card: oklch(0.17 0.01 90);
  --card-foreground: oklch(0.93 0.005 90);
  --border: oklch(0.25 0.01 90);
  --muted: oklch(0.2 0.01 90);
  --muted-foreground: oklch(0.6 0.005 90);
}

Use semantic token names. Never reference specific colors in components. Always reference tokens.

// BAD: Hardcoded colors
<div className="bg-white text-gray-900 dark:bg-gray-900 dark:text-white">

// GOOD: Semantic tokens
<div className="bg-background text-foreground">

When you change your dark mode values, every component updates automatically. That's the power of tokens.

The AI-Assisted Workflow

Here's my actual workflow for a new project's design system:

1. Define brand color (I pick one color, AI generates the system) - 20 min
2. Copy spacing/type template (reuse across projects) - 5 min
3. Init shadcn/ui and customize variants - 30 min
4. Generate 5-6 key patterns with AI, refine each - 2 hours
5. Test dark mode across all patterns - 30 min
6. Visual review on three breakpoints - 30 min

Total: About 4 hours. Down from two weeks.

The AI doesn't replace taste. It replaces the mechanical work that comes after taste has made its decisions.

You decide the vibe. AI does the math.