ui-design-system
Originally fromsamhvw8/dot-claude
Installation
Summary
Design system toolkit for generating tokens, documenting components, and enabling design-dev handoff.
- Generates complete design tokens (colors, typography, spacing, shadows, animations) from a single brand color in multiple formats (JSON, CSS, SCSS)
- Includes three style presets (modern, classic, playful) and an 8pt spacing grid system with responsive breakpoints
- Covers component architecture, accessibility compliance, and developer handoff documentation for maintaining visual consistency across projects
SKILL.md
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
Weekly Installs
1.0K
Repository
davila7/claude-…emplatesGitHub Stars
26.4K
First Seen
Today
Security Audits