About ui-design-system
ui-design-system is a toolkit for creating and maintaining scalable design systems. It generates tokens from brand colors and provides component architecture, responsive design, accessibility, and handoff documentation guidance.
Key features
- 01Generate design tokens from brand colors
- 02Export tokens as JSON, CSS, or SCSS
- 03Create modular typography and color scales
- 04Use an 8pt spacing grid and responsive breakpoints
- 05Define shadow and animation tokens
Use cases
- 01Generate a token set from a brand color
- 02Export design tokens for implementation
- 03Standardize spacing and typography across components
- 04Prepare design-system details for developer handoff
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/ui-design-systemin Claude Code to confirm it loaded.
Bundled filesscripts/design_token_generator.py
Details
From the project READMEUI 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
Comments
Markdown supported