Design Systems × AI

From Brand Identity to
Automated Generation

A practical guide for design architects

February 2026 · Prepared by Bob for Ako

The Vision

This isn't science fiction. It's achievable today —
if you structure your design system for AI consumption.

What Is a Design System?

It's NOT just a component library.

Think: operating system for your product's visual language

The Design System Layer Cake

Each layer builds on the one below · Change a token → everything updates

Design Tokens: The Atoms

Every visual decision → a named, structured value

W3C Design Tokens standard · Platform-agnostic · Single source of truth

Two-Tier Token Architecture

{
  "blue-500": "#3B82F6",
  "blue-700": "#1D4ED8",
  "neutral-900": "#171717",
  "red-500": "#EF4444"
}
      

{
  "brand-primary": {
    "value": "{blue-500}",
    "description": "CTAs,
      links, active states"
  },
  "feedback-error": {
    "value": "{red-500}",
    "description": "Error
      states only"
  }
}
      

Defining Your Visual Identity

Part 2

From Figma to Code

Design tokens → Style Dictionary → Components → Storybook

The Token → Code Pipeline

Tools: Style Dictionary (Amazon) · Tokens Studio (Figma) · Specify

Design Tokens in Practice

{
  "color": {
    "brand-primary": {
      "$value": "#3B82F6",
      "$type": "color",
      "$description": "Primary brand color — CTAs, links, active states"
    }
  },
  "spacing": {
    "md": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Default component spacing — most common value"
    }
  },
  "radius": {
    "default": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Standard border radius for cards, buttons, inputs"
    }
  },
  "shadow": {
    "sm": {
      "$value": "0 1px 3px rgba(0,0,0,0.08)",
      "$type": "shadow",
      "$description": "Subtle lift — cards at rest"
    }
  }
}
  

W3C Design Tokens format · $description is what makes it AI-readable

Generated CSS Custom Properties

:root {
  /* Colors */
  --color-brand-primary: #3B82F6;
  --color-brand-primary-hover: #2563EB;
  --color-text-primary: #1F2937;
  --color-text-secondary: #6B7280;
  --color-background: #FFFFFF;
  --color-surface: #F9FAFB;
  --color-border: #E5E7EB;
  --color-error: #EF4444;
  --color-success: #22C55E;

  /* Spacing (base-4) */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;  /* Most common */
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Typography · Radius · Shadows */
  --font-sans: 'Inter', system-ui, sans-serif;
  --radius-default: 8px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
  --transition-fast: 150ms ease;
}
  

Components consume variables · Change token → everything updates

Atomic Design Hierarchy

Brad Frost's methodology for component composition

AI needs to know: which atoms exist → don't reinvent, compose

Example: Button Component

// Button.tsx — Uses ONLY design tokens
type ButtonVariant = 'primary' | 'secondary'
                   | 'destructive' | 'ghost';

interface ButtonProps {
  variant?: ButtonVariant;
  size?: 'sm' | 'md' | 'lg';
  loading?: boolean;
  children: React.ReactNode;
}

export const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'md',
  loading,
  children,
  ...props
}) => (
  <button
    className={`btn btn-${variant} btn-${size}`}
    disabled={loading}
    {...props}
  >
    {loading && <Spinner />}
    {children}
  </button>
);
  

The Complete Pipeline

One brand decision → flows through tokens → Figma → code → docs → product

Part 3

Making It AI-Ready

The key insight: design systems are AI guardrails

The Key Insight

"A design system is already a set of constraints.
Constraints are exactly what AI needs
to produce consistent output."

SKILL.md: Teaching AI Your Rules

# My Design System — AI Guide

## Color Tokens (NEVER use raw hex)
- `--color-primary`: #3B82F6 — CTAs, links
- `--color-text`: #1F2937 — Body text
- `--color-error`: #EF4444 — Errors ONLY

## Component Rules
- **Button**: Max 1 primary per section
- **Card**: 16px padding, never nest cards
- **Form**: Label above input, always

## ❌ NEVER DO
- Use raw hex values
- Create custom spacing values
- Skip hover/focus states
- Make text smaller than 12px

## ✅ ALWAYS DO
- Use semantic HTML
- Include aria-label on icon buttons
- Use CSS custom properties only
- Include loading + error states
  

This single file = 90% of the value · 10% of the effort

Component Specs as Prompts

# Component: Button

## Variants
- `primary`: Main actions (1 per section)
- `secondary`: Supporting actions
- `destructive`: Delete, irreversible

## Token Usage
| Property     | Token                       |
|------------- |-----------------------------|
| Background   | `--color-brand-primary`     |
| Text         | `--color-text-on-primary`   |
| Padding      | `--spacing-sm` `--spacing-md`|
| Radius       | `--radius-default`          |
| Min height   | 40px (touch target)         |

## Rules
- NEVER use raw hex values
- Maximum 1 primary button per section
- Destructive buttons require confirmation
  

Each component becomes a contract that AI follows

AI Design Sub-Agent Architecture

Part 4

Tutorial: Build Your Own

5 steps · Copy-paste ready · Test with Claude or GPT

Step 1: Define 5 Core Tokens

{
  "color-primary":   { "value": "#3B82F6",
    "description": "CTAs, links, active states" },
  "font-family":     { "value": "Inter, system-ui, sans-serif",
    "description": "All text in the product" },
  "spacing-md":      { "value": "16px",
    "description": "Default padding & gaps" },
  "radius-default":  { "value": "8px",
    "description": "Cards, buttons, inputs" },
  "shadow-sm":       { "value": "0 1px 3px rgba(0,0,0,0.08)",
    "description": "Subtle lift for cards" }
}
  

That's it. Five decisions define 80% of your visual language.

Step 2: Create Your Design System CSS

:root {
  --color-primary: #3B82F6;
  --color-primary-hover: #2563EB;
  --color-text: #1F2937;
  --color-text-secondary: #6B7280;
  --color-bg: #FFFFFF;
  --color-surface: #F9FAFB;
  --color-border: #E5E7EB;

  --font-sans: 'Inter', system-ui, sans-serif;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;

  --radius-default: 8px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
  --transition-fast: 150ms ease;
}
  

Tokens → CSS custom properties · Components will consume these

Step 3: Write Your SKILL.md

# Design System AI Guide

## Rules
- Use ONLY CSS variables (--color-*, --spacing-*)
- NEVER use raw hex colors or pixel values
- All interactive elements need hover + focus states
- Semantic HTML always (<button>, <nav>, <main>)

## Token Reference
- Primary: var(--color-primary) — CTAs, links
- Text: var(--color-text) — body copy
- Spacing: var(--spacing-md) — default gaps
- Radius: var(--radius-default) — all components
- Shadow: var(--shadow-sm) — card resting state

## ❌ Don't
- Raw hex colors
- Nest cards inside cards
- Custom spacing values
- Skip error/loading states
  

Feed this to Claude or GPT as system context → try it now!

Step 4: Test — Generate a Card

Using my design system
(SKILL.md above):

Create a "Feature Card" with:
- An emoji icon
- A title
- A 2-line description
- A "Learn More" link

Follow my rules exactly.
      

Step 5: Iterate & Refine

Common failures → SKILL.md fixes

Every failure → new anti-pattern → system gets stronger 💪

AI-Readiness Maturity

% = AI output accepted without changes

Today's tutorial gets you to L3 — that's already 70% accuracy

5-Week Production Roadmap

🔄 Phase 5 (ongoing): Generate → Review → Fix gaps → Repeat

Learn from the Best

Key Takeaways

Start Today

90% of the value · 10% of the effort

Thank you! 🙏

Research & presentation by Bob · February 2026