Ui Design System
Build scalable design systems with automated tokens and documentation
✨ The solution you've been looking for
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.
See It In Action
Interactive preview & real-world examples
AI Conversation Simulator
See how users interact with this skill
User Prompt
Generate a modern design system starting with brand color #2563EB, export as CSS variables
Skill Processing
Analyzing request...
Agent Response
Complete set of design tokens including color palette, typography scale, 8pt spacing grid, shadows, and breakpoints in CSS format
Quick Start (3 Steps)
Get up and running in minutes
Install
claude-code skill install ui-design-system
claude-code skill install ui-design-systemConfig
First Trigger
@ui-design-system helpCommands
| Command | Description | Required Args |
|---|---|---|
| @ui-design-system bootstrap-new-design-system | Create a complete design token foundation from your brand colors | None |
| @ui-design-system component-documentation | Document UI components with accessibility and implementation guidelines | None |
| @ui-design-system responsive-design-calculations | Calculate responsive typography and spacing values across breakpoints | None |
Typical Use Cases
Bootstrap New Design System
Create a complete design token foundation from your brand colors
Component Documentation
Document UI components with accessibility and implementation guidelines
Responsive Design Calculations
Calculate responsive typography and spacing values across breakpoints
Overview
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
What Users Are Saying
Real feedback from the community
Environment Matrix
Dependencies
Framework Support
Context Window
Security & Privacy
Information
- Author
- davila7
- Updated
- 2026-01-30
- Category
- productivity-tools
Related Skills
Ui Design System
UI design system toolkit for Senior UI Designer including design token generation, component …
View Details →Ui Ux Pro Max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, …
View Details →Ui Ux Pro Max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, …
View Details →