Skip to content

Design System Skill

The design system skill gives Claude deep knowledge of design system architecture — CSS tokens, color scales, typography, spacing, and component variants.

Activated automatically when creating design tokens, theming, color scales, typography systems, or component variant patterns.

  • Token architecture with semantic naming (primary, secondary, accent)
  • Color scales using oklch color space
  • Typography, spacing, radius, and shadow tokens
  • Dark mode token remapping
  • Component variant patterns (size + emphasis)