/design-system

Configure the visual foundation of your project: colors, typography, spacing, and component conventions. Everything you build with /design and /wireframe uses these tokens.

When to use this

• You're starting a new project and want to set your brand colors
• You want to change the font or adjust the spacing scale
• You want to audit your codebase for design inconsistencies

Four modes

Setup

Run the full design system configuration:

/design-system

Claude walks you through choosing colors, typography, spacing, and radius. It generates all the CSS variables in globals.css for both light and dark mode, using the oklch color space with WCAG AA contrast ratios.

Update

Modify a specific part of the system:

/design-system colors

/design-system typography

Changes only the aspect you specify without re-running the full setup.

Audit

Scan your codebase for violations:

/design-system audit

Claude checks for hardcoded colors, inconsistent spacing, typography outside the scale, and components not using cn(). It reports what it finds and offers to fix each issue.

Export

Generate a summary of your current design system:

/design-system export

Creates docs/design-system.md documenting all tokens, colors, type scale, and spacing values.

What to do next

With your design system set, run /wireframe to prototype or /design to build polished components.