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: python3 ~/.{TOOL}/skills/ui-design-system/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