How to Build a Tailwind CSS Design System Using AI Prompt Architect

Every project starts with good intentions: "we'll keep our styles consistent." Three months later, you have 47 shades of blue, inconsistent spacing, and components that look different on every page. A Master Prompt prevents this by encoding your entire design system into every AI interaction.

Why AI Creates Inconsistent UIs

Without a Master Prompt, AI coding assistants generate working but visually inconsistent components:

// ❌ Without Master Prompt — inconsistent patterns
// Component A uses p-4, Component B uses p-6
// Component A uses text-gray-600, Component B uses text-slate-500
// Component A uses rounded-lg, Component B uses rounded-xl

Each component "works" in isolation but the overall UI looks like it was built by five different developers — because it was (five different AI conversations).

Step 1: Define Design Tokens

Configure your design system in the AI Prompt Architect wizard:

// tailwind.config.js — Generated from Master Prompt
export default {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f4ff',
          100: '#dbe4ff',
          200: '#bac8ff',
          300: '#91a7ff',
          400: '#748ffc',
          500: '#5c7cfa',  // Primary
          600: '#4c6ef5',
          700: '#4263eb',
          800: '#3b5bdb',
          900: '#364fc7',
        },
        surface: {
          primary: 'var(--surface-primary)',
          secondary: 'var(--surface-secondary)',
          elevated: 'var(--surface-elevated)',
        },
      },
      spacing: {
        'section': '6rem',
        'card': '1.5rem',
      },
      borderRadius: {
        'card': '1rem',
        'button': '0.625rem',
        'input': '0.5rem',
      },
      fontSize: {
        'display': ['3rem', { lineHeight: '1.1', letterSpacing: '-0.02em' }],
        'heading': ['1.5rem', { lineHeight: '1.3', letterSpacing: '-0.01em' }],
        'body': ['1rem', { lineHeight: '1.6' }],
        'caption': ['0.75rem', { lineHeight: '1.5' }],
      },
    },
  },
};

Step 2: Component Patterns

The Master Prompt defines reusable component patterns that every AI conversation follows:

// Button component — follows Master Prompt patterns
interface ButtonProps {
  variant: 'primary' | 'secondary' | 'ghost' | 'danger';
  size: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
}

const VARIANTS = {
  primary: 'bg-brand-500 hover:bg-brand-600 text-white shadow-sm',
  secondary: 'bg-surface-secondary hover:bg-surface-elevated text-white border border-white/10',
  ghost: 'hover:bg-white/5 text-slate-300',
  danger: 'bg-red-500/10 hover:bg-red-500/20 text-red-400 border border-red-500/20',
} as const;

const SIZES = {
  sm: 'px-3 py-1.5 text-caption rounded-button',
  md: 'px-4 py-2.5 text-body rounded-button',
  lg: 'px-6 py-3 text-body font-semibold rounded-button',
} as const;

export const Button = ({ variant, size, children }: ButtonProps) => (
  <button className={`${VARIANTS[variant]} ${SIZES[size]}
    inline-flex items-center justify-center gap-2
    transition-all duration-200 font-medium
    focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/50
    disabled:opacity-50 disabled:cursor-not-allowed`}
  >
    {children}
  </button>
);

Step 3: Dark Mode Convention

The Master Prompt enforces a consistent dark mode strategy:

/* CSS variables for theming — set in Master Prompt */
:root {
  --surface-primary: #ffffff;
  --surface-secondary: #f8f9fa;
  --surface-elevated: #ffffff;
}

.dark {
  --surface-primary: #0f172a;
  --surface-secondary: #1e293b;
  --surface-elevated: #334155;
}

Step 4: Accessibility Standards

The Master Prompt bakes in WCAG 2.2 AA compliance:

• Colour contrast — all text meets 4.5:1 ratio against its background
• Focus indicators — every interactive element has a visible focus-visible ring
• Touch targets — minimum 44×44px for mobile interactions
• Semantic HTML — buttons are <button>, links are <a>, no clickable divs
• ARIA labels — icon-only buttons include aria-label

Key Takeaways

1. Tokens over ad-hoc values — use design tokens for colours, spacing, radii, and typography
2. Variant maps — define component variants as objects, not inline conditionals
3. Dark mode via CSS variables — theme at the token level, not per-component
4. Accessibility by default — encode WCAG standards into the Master Prompt so every component is compliant
5. Consistent across conversations — the Master Prompt ensures your 50th AI session follows the same patterns as your 1st