Creative Skills: Building AI-Powered Design Systems

Design systems transform chaotic UI development into systematic consistency. But building and maintaining a design system is demanding work. Token management, component variations, documentation, accessibility compliance, cross-platform consistency; the overhead can feel endless.

Claude Code skills for design systems automate the mechanical parts of this work, freeing designers and developers to focus on decisions that actually require human judgment. In this deep dive, we'll explore how these skills work, what they can do, and how to integrate them into your design workflow.

The Design System Challenge

Modern design systems are complex:

Tokens: Colors, spacing, typography, shadows, radii; dozens of decisions that must be consistent across platforms.

Components: Buttons, inputs, cards, modals; each with states (hover, focus, disabled) and variants (primary, secondary, ghost).

Documentation: Every component needs usage guidelines, code examples, and accessibility notes.

Cross-Platform: Web, iOS, Android, and design tools all need synchronized tokens.

Evolution: Systems change over time. Maintaining consistency during evolution is hard.

Design system skills address each challenge, often in combination.

Skill Category 1: Token Management

Design tokens are the foundation. Get them right, and everything built on them inherits consistency.

token-generator

Creates token sets from design decisions:

# Token Generator

Generate design tokens from specifications.

## Input Format

Describe your design values in natural language:

"Our brand uses a blue primary color (#2563EB), with lighter and darker
variants. We want 8-point grid spacing from 4px to 64px. Typography uses
Inter with sizes from 12px to 48px."

## Process

1. Parse design description
2. Generate color scales (50-950 for each color)
3. Create spacing scale following ratio
4. Build typography scale
5. Define semantic tokens (surface, text, primary, etc.)
6. Output in multiple formats

## Output Formats

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-primary-500: #2563EB;
  --color-primary-600: #1D4ED8;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;

  /* Typography */
  --text-sm: 0.875rem;
  --text-base: 1rem;
}

Tailwind Config

module.exports = {
  theme: {
    colors: {
      primary: {
        500: '#2563EB',
        600: '#1D4ED8',
      }
    }
  }
}

Figma Variables

JSON format for Figma import.

iOS Swift

extension Color {
  static let primary500 = Color(hex: "2563EB")
}

Android Compose

val Primary500 = Color(0xFF2563EB)

### What Makes It Useful

Token generation is tedious. Calculating color scales, ensuring contrast ratios, and maintaining consistency across formats takes time. This skill handles the mechanical work:

User: "I have a purple brand color #7C3AED. Generate a full color system with semantic tokens for light and dark modes."

Token Generator:

Generated Tokens

Purple Scale

• 50: #FAF5FF
• 100: #F3E8FF
• 200: #E9D5FF
• 300: #D8B4FE
• 400: #C084FC
• 500: #A855F7
• 600: #9333EA
• 700: #7C3AED (your brand color)
• 800: #6B21A8
• 900: #581C87
• 950: #3B0764

Semantic Tokens (Light Mode)

• primary: purple-700
• primary-hover: purple-800
• primary-foreground: white
• surface: white
• surface-elevated: gray-50
• text: gray-900
• text-muted: gray-600

Semantic Tokens (Dark Mode)

• primary: purple-500
• primary-hover: purple-400
• primary-foreground: gray-900
• surface: gray-900
• surface-elevated: gray-800
• text: gray-100
• text-muted: gray-400

Contrast Verification

All primary/foreground combinations exceed WCAG AA requirements.

### token-sync

Keeps tokens synchronized across platforms:

```markdown
# Token Sync

Synchronize design tokens across codebases and design tools.

## Source of Truth

Tokens live in a single source file (tokens.json). All other formats
are generated from this source.

## Sync Targets

- CSS/SCSS variables
- JavaScript/TypeScript constants
- Tailwind theme configuration
- Figma variables (via plugin API)
- iOS asset catalogs
- Android resources

## Process

1. Read source tokens.json
2. Validate token structure
3. Generate each target format
4. Write to specified locations
5. Report changes

## Configuration

```json
{
  "source": "./tokens/tokens.json",
  "targets": [
    {
      "type": "css",
      "output": "./src/styles/tokens.css"
    },
    {
      "type": "tailwind",
      "output": "./tailwind.config.js"
    },
    {
      "type": "typescript",
      "output": "./src/tokens.ts"
    }
  ]
}

Change Detection

Highlights what changed since last sync:

• New tokens added
• Tokens modified
• Tokens removed

Warns about breaking changes.

## Skill Category 2: Component Generation

Components are where tokens become UI. Generation skills scaffold components following patterns.

### component-scaffolder

Generates component structure from specifications:

```markdown
# Component Scaffolder

Create component files following design system patterns.

## Input

Describe the component:
"Create a Button component with primary, secondary, and ghost variants.
Support small, medium, and large sizes. Include loading and disabled states.
Use React with TypeScript and Tailwind."

## Generated Files

### Button.tsx
```tsx
import { forwardRef } from 'react'
import { cn } from '@/lib/utils'
import { Loader2 } from 'lucide-react'

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'ghost'
  size?: 'sm' | 'md' | 'lg'
  loading?: boolean
}

const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant = 'primary', size = 'md', loading, children, disabled, ...props }, ref) => {
    return (
      <button
        ref={ref}
        disabled={disabled || loading}
        className={cn(
          'inline-flex items-center justify-center rounded-md font-medium transition-colors',
          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
          'disabled:pointer-events-none disabled:opacity-50',
          {
            primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
            ghost: 'hover:bg-accent hover:text-accent-foreground',
          }[variant],
          {
            sm: 'h-8 px-3 text-sm',
            md: 'h-10 px-4',
            lg: 'h-12 px-6 text-lg',
          }[size],
          className
        )}
        {...props}
      >
        {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
        {children}
      </button>
    )
  }
)

Button.displayName = 'Button'

export { Button, type ButtonProps }

Button.test.tsx

[Jest/Testing Library tests for each variant and state]

Button.stories.tsx

[Storybook stories showing all variants]

Button.mdx

[Documentation with usage guidelines]

### Patterns It Follows

The skill encodes component patterns:

```markdown
## Component Patterns

### Composition

Components accept children and className:
```tsx
<Button className="custom-class">
  <Icon /> Custom Content
</Button>

Forwarding Refs

Components forward refs for DOM access:

const ref = useRef<HTMLButtonElement>(null)
<Button ref={ref}>Click me</Button>

Accessibility

Components include:

• Appropriate ARIA attributes
• Keyboard support
• Focus management
• Screen reader announcements

Variants via Props

Style variants are props, not separate components:

<Button variant="primary" size="lg" />

State Handling

Loading, disabled, and error states are explicit props that affect both appearance and behavior.

### variant-generator

Expands components with new variants:

```markdown
# Variant Generator

Add new variants to existing components.

## Process

1. Analyze existing component structure
2. Identify variant patterns in use
3. Generate new variant following patterns
4. Update TypeScript types
5. Add tests and stories

## Example

Add "destructive" variant to Button:

Input: "Add a destructive variant for delete actions, red with white text"

Changes:

### Type Update
```tsx
variant?: 'primary' | 'secondary' | 'ghost' | 'destructive'

Style Addition

destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',

Story Addition

export const Destructive: Story = {
  args: {
    variant: 'destructive',
    children: 'Delete Account',
  },
}

Test Addition

it('renders destructive variant', () => {
  render(<Button variant="destructive">Delete</Button>)
  expect(screen.getByRole('button')).toHaveClass('bg-destructive')
})

## Skill Category 3: Accessibility Auditing

Accessibility isn't optional. These skills help catch and fix issues.

### a11y-audit

Analyzes components for accessibility issues:

```markdown
# Accessibility Audit

Audit components for WCAG compliance.

## Audit Dimensions

### Color Contrast (WCAG 2.1 AA)
- Normal text: 4.5:1 minimum
- Large text: 3:1 minimum
- UI components: 3:1 minimum

### Keyboard Accessibility
- All interactive elements focusable
- Logical tab order
- Keyboard equivalents for mouse actions
- Focus indicators visible

### Screen Reader Support
- Meaningful labels (not "click here")
- Announced state changes
- Proper heading hierarchy
- Landmark regions

### Motion and Animation
- Respects prefers-reduced-motion
- No autoplaying media
- Animations can be paused

### Forms
- Labels associated with inputs
- Error messages announced
- Required fields indicated

## Output Format

### Summary
- Total issues: X
- Critical: X
- Major: X
- Minor: X

### Issues

#### [Issue Title]
- **Severity**: Critical/Major/Minor
- **WCAG Criterion**: X.X.X
- **Location**: [file:line]
- **Issue**: [description]
- **Remediation**: [how to fix]
- **Code Example**: [before/after]

### Compliance Status
- WCAG 2.1 Level A: Pass/Fail
- WCAG 2.1 Level AA: Pass/Fail

Example Audit

## Audit Results: Button Component

### Summary
- Total issues: 2
- Critical: 0
- Major: 1
- Minor: 1

### Issues

#### Missing Focus Indicator in Ghost Variant
- **Severity**: Major
- **WCAG Criterion**: 2.4.7 Focus Visible
- **Location**: Button.tsx:35
- **Issue**: Ghost variant doesn't have visible focus ring
- **Remediation**: Add focus-visible styles to ghost variant

**Before:**
```tsx
ghost: 'hover:bg-accent hover:text-accent-foreground',

After:

ghost: 'hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-accent',

Loading State Not Announced

• Severity: Minor
• WCAG Criterion: 4.1.3 Status Messages
• Location: Button.tsx:45
• Issue: Screen readers don't announce when button enters loading state
• Remediation: Add aria-live region or aria-busy

After:

<button
  aria-busy={loading}
  aria-label={loading ? `${children} loading` : undefined}
>

Compliance Status

• WCAG 2.1 Level A: Pass
• WCAG 2.1 Level AA: Fail (focus indicator issue)

### contrast-checker

Specialized tool for color contrast verification:

```markdown
# Contrast Checker

Verify color contrast ratios across the design system.

## Checks

### Text on Backgrounds
For each text color, check contrast against all backgrounds:
- text-primary on surface
- text-secondary on surface
- text-primary on surface-elevated
- etc.

### UI Elements
- Button text on button background
- Icon colors on backgrounds
- Border colors for visibility

### State Variations
- Hover states maintain contrast
- Focus states maintain contrast
- Disabled states are distinguishable

## Output

### Passing Combinations
[List of color pairs that pass WCAG AA]

### Failing Combinations
[List of color pairs that fail, with current ratio and suggested fixes]

### Recommendations
[Specific color adjustments to achieve compliance]

Skill Category 4: Documentation

Design system documentation is often neglected. These skills automate the tedious parts.

component-documenter

Generates documentation from components:

# Component Documenter

Generate documentation from component code.

## Extracts

### API Documentation
- Props with types and descriptions
- Default values
- Required vs optional

### Usage Examples
- Basic usage
- All variants
- Common combinations
- Edge cases

### Do's and Don'ts
- Correct usage patterns
- Anti-patterns to avoid

### Accessibility Notes
- Keyboard interactions
- Screen reader behavior
- ARIA attributes

## Output Format

### MDX Documentation

```mdx
---
title: Button
description: Primary interaction element for user actions.
---

import { Button } from '@/components'

# Button

Buttons trigger actions. Use them for primary calls to action,
form submissions, and interactive operations.

## Usage

<CodeBlock>
import { Button } from '@/components'

<Button variant="primary">Click me</Button>
</CodeBlock>

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| variant | 'primary' \| 'secondary' \| 'ghost' | 'primary' | Visual style |
| size | 'sm' \| 'md' \| 'lg' | 'md' | Button size |
| loading | boolean | false | Show loading spinner |
| disabled | boolean | false | Disable interaction |

## Variants

<ComponentPreview>
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
</ComponentPreview>

## Accessibility

- Use clear, descriptive labels (not "Click here")
- Loading state is announced to screen readers
- Focus indicator visible on keyboard navigation
- Disabled buttons remain in tab order (but not activatable)

## Do's and Don'ts

### Do
- Use primary variant for main actions
- Keep labels concise (1-3 words)
- Indicate loading state for async actions

### Don't
- Use multiple primary buttons in one section
- Use disabled buttons without explaining why
- Use buttons for navigation (use links)

### changelog-generator

Tracks and documents design system changes:

```markdown
# Changelog Generator

Generate changelog entries from design system changes.

## Change Detection

Monitors:
- New components added
- Components modified
- Tokens changed
- Breaking changes

## Categorization

### Added
New features and components

### Changed
Modifications to existing features

### Deprecated
Features scheduled for removal

### Removed
Features removed

### Fixed
Bug fixes

### Security
Security improvements

## Output

```markdown
# Changelog

## [2.1.0] - 2025-01-19

### Added
- New `Tooltip` component with hover and focus activation
- `destructive` variant for Button component
- Dark mode tokens for all semantic colors

### Changed
- Button focus ring now uses primary color (was gray)
- Input height standardized to 40px for medium size
- Updated color-primary-500 for better contrast

### Deprecated
- `Card.Header` - use `CardHeader` instead (removal in 3.0)

### Fixed
- Button ghost variant now has visible focus indicator
- Select dropdown z-index conflict with Modal

### Migration Guide

#### Button Focus Ring
The focus ring color changed from gray to primary.
If you customized focus styles, review for visual consistency.

#### Input Height
Medium inputs are now 40px (was 38px).
This may affect layout if you were relying on the exact height.

## Skill Category 5: Pattern Libraries

Higher-level skills that generate complete UI patterns.

### page-layout-generator

Creates consistent page layouts:

```markdown
# Page Layout Generator

Generate page layouts following design system patterns.

## Layout Types

### Dashboard
- Header with navigation
- Sidebar with menu
- Main content area
- Optional right panel

### Marketing
- Hero section
- Feature sections
- Testimonials
- Call to action
- Footer

### Form
- Page header
- Form sections
- Action buttons
- Progress indicator (multi-step)

### Detail View
- Header with actions
- Content sections
- Related items
- Back navigation

## Configuration

Describe your needs:
"Create a settings page with a sidebar navigation of settings categories,
main content area showing the active category's settings, and a save
button fixed at the bottom."

## Output

Complete page component using design system components:
- Proper spacing tokens
- Responsive breakpoints
- Keyboard navigation
- Loading states

form-pattern-generator

Creates form patterns with validation:

# Form Pattern Generator

Generate form patterns following UX best practices.

## Patterns

### Inline Validation
- Validate on blur
- Clear errors on focus
- Success states after correction

### Progressive Disclosure
- Start with required fields
- Show optional fields progressively
- Conditional fields based on answers

### Multi-Step Forms
- Progress indicator
- Step validation before proceeding
- Summary/review before submission
- Ability to go back

### Autosave
- Save on change with debounce
- Visual feedback (saving/saved)
- Conflict handling

## Generated Output

Form component with:
- Field components from design system
- Validation logic
- Error messaging
- Loading states
- Submit handling
- Accessibility (labels, errors, required)

Practical Integration

With Figma

Token and component skills can integrate with Figma:

## Figma Integration

### Export from Figma
1. Export Variables as JSON from Figma
2. Run /token-import to process
3. Generate code from imported tokens

### Sync to Figma
1. Run /token-sync with Figma target
2. Uses Figma Plugin API to update Variables
3. Designers and developers stay aligned

With Storybook

Component skills generate Storybook-compatible output:

## Storybook Integration

Generated components include:
- Story file with all variants
- Args table with prop controls
- Decorator for theme wrapping
- Docs page with MDX

Run `npm run storybook` to see generated components.

With CI/CD

Quality skills can run in CI:

## CI Integration

### Pre-commit
- Token validation (no breaking changes)
- Component lint (patterns followed)

### Pull Request
- Accessibility audit
- Visual regression (Chromatic/Percy)
- Bundle size check

### Deployment
- Changelog generation
- Version bumping
- Package publishing

Building Your Own Design System Skills

Customize skills for your system:

Encode Your Patterns

# Our Button Pattern

We use specific patterns for buttons:

### Sizing
- Touch targets minimum 44x44px
- Desktop minimum 32px height
- Mobile minimum 48px height

### States
- Default, hover, active, focus, disabled, loading
- All states must be visually distinct
- Never rely on color alone

### Text
- Sentence case, not Title Case
- Maximum 25 characters
- No periods at end

Reference Your Tokens

# Token Usage Guidelines

When generating components:

### Colors
Use semantic tokens, not raw colors:
- ✅ `var(--color-text-primary)`
- ❌ `#1a1a1a`

### Spacing
Use spacing scale:
- ✅ `var(--space-4)` (16px)
- ❌ `16px`

### Typography
Use type scale:
- ✅ `var(--text-body-md)`
- ❌ `font-size: 16px`

Conclusion

Design system skills transform how teams build and maintain visual consistency. Token generators eliminate tedious calculations. Component scaffolders ensure patterns are followed. Accessibility audits catch issues before they reach users. Documentation generators keep docs current with code.

The key insight is that much of design system work is mechanical. Decisions about brand colors, component behaviors, and accessibility requirements need human judgment. But once those decisions are made, applying them consistently is largely automation.

Start with the skills that address your biggest pain points:

• Token inconsistency? Start with token-generator and token-sync.
• Component sprawl? Use component-scaffolder with your patterns encoded.
• Accessibility gaps? Add a11y-audit to your workflow.
• Documentation debt? Deploy component-documenter.

Over time, these skills compound. Each automated task frees time for the creative decisions that actually require human attention. The result is a more consistent, accessible, and well-documented design system.

---

Want to explore more creative development tools? Check out Documentation Skills Roundup for generating technical documentation, or explore Code Review Skills Roundup for maintaining UI code quality.