Back to Skills

Ui Design System

Skills creative-design 8,491
Install Command
npx claude-code-templates@latest --skill creative-design/ui-design-system
View on GitHub

Content

UI Design System

Professional toolkit for creating and maintaining scalable design systems.

Core Capabilities

  • Design token generation (colors, typography, spacing)
  • Component system architecture
  • Responsive design calculations
  • Accessibility compliance
  • Developer handoff documentation

Key Scripts

design_token_generator.py

Generates complete design system tokens from brand colors.

Usage: python scripts/design_token_generator.py [brand_color] [style] [format]

  • Styles: modern, classic, playful
  • Formats: json, css, scss

Features:

  • Complete color palette generation
  • Modular typography scale
  • 8pt spacing grid system
  • Shadow and animation tokens
  • Responsive breakpoints
  • Multiple export formats

Stack Builder

0 components

Your stack is empty

Browse components and click the + button to add them to your stack for easy installation.