UI Design System
Professional toolkit for creating and maintaining scalable design systems.
When to Use
- UI design system toolkit for Senior UI Designer including design token
- User explicitly invokes
/ui-design-system
When NOT to Use
- When the task doesn't match this skill's scope -- check related skills
- When a more specialized skill exists for the specific task
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
Version History
| Version | Date | Description |
|---|---|---|
| 1.0 | 2026-02-25 | Initial implementation |
Converted and distributed by TomeVault — claim your Tome and manage your conversions.