ui-design-system
davila7/claude-code-templates
Professional design system toolkit for token generation, component documentation, and design-dev handoff.
What is ui-design-system?
A comprehensive UI design system toolkit for senior designers to create scalable design systems with automated token generation, component documentation, and responsive design calculations. Use it to maintain visual consistency across products and streamline collaboration between design and development teams.
- Generate design tokens (colors, typography, spacing) from brand colors in multiple formats (JSON, CSS, SCSS)
- Create modular typography scales and 8pt spacing grid systems
- Calculate responsive design breakpoints and values
- Generate shadow and animation tokens
- Produce developer handoff documentation for component systems
- Ensure accessibility compliance across design tokens
How to install ui-design-system
npx skills add https://github.com/davila7/claude-code-templates --skill ui-design-system- Python installed on your system
- Brand color values or existing color palette
How to use ui-design-system
- 1.Run the design token generator with your brand color: python scripts/design_token_generator.py [brand_color] [style] [format]
- 2.Choose a style (modern, classic, or playful) that matches your brand
- 3.Select output format (json, css, or scss) based on your tech stack
- 4.Review generated tokens for colors, typography, spacing, shadows, and animations
- 5.Export tokens to your design tool and development environment
- 6.Document component system architecture using the generated tokens
- 7.Share handoff documentation with development team
Use cases
- Building a new design system from scratch using brand colors
- Maintaining consistency across multiple product teams
- Exporting design tokens to CSS/SCSS for developer implementation
- Creating responsive design specifications for mobile, tablet, and desktop
- Documenting component architecture and usage guidelines for handoff to engineering
- Senior UI/UX designers
- Design system managers
- Product design leads
- Design-focused teams scaling across multiple products
ui-design-system FAQ
The toolkit exports tokens in JSON, CSS, and SCSS formats to accommodate different tech stacks and workflows.
Yes, the toolkit uses an 8pt spacing grid system that can be adjusted based on your design system requirements.
Yes, the toolkit includes accessibility compliance features built into the token generation process.
Three predefined styles are available: modern, classic, and playful. Each generates a different aesthetic while maintaining consistency.
Tokens can be exported in CSS or SCSS format for direct integration into your codebase, or as JSON for custom tooling.
Full instructions (SKILL.md)
Source of truth, from davila7/claude-code-templates.
name: ui-design-system description: 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.
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
Related skills
More from davila7/claude-code-templates and the wider catalog.
ui-ux-pro-max
Design intelligence with 50+ styles, 97 palettes, and 57 font pairings for web and mobile UIs.
ux-researcher-designer
Data-driven persona generation, journey mapping, and usability testing for UX research and design.
video-downloader
Downloads videos from YouTube and other platforms for offline viewing, editing, or archival. Handles various formats and quality options.
whisper
OpenAI's multilingual speech recognition model supporting 99 languages with six model sizes.
btca-cli
Operate the btca CLI for local resources and source-first answers. Use when setting up btca in a project, connecting a provider, adding or managing resources, and asking questions via btca commands. Invoke this skill when the user says "use btca" or needs to do more detailed research on a specific library or framework.
capture-screen
Programmatic screenshot capture on macOS. Find window IDs with Swift CGWindowListCopyWindowInfo, control application windows via AppleScript (zoom, scroll, select), and capture with screencapture. Use when automating screenshots, capturing application windows for documentation, or building multi-shot visual workflows.