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.
Install with the open skills CLI (global, non-interactive — available in every Claude Code session):
npx skills add davila7/claude-code-templates --skill "ui-design-system" -g -a claude-code -yOr manually — clone and copy the skill directory (SKILL.md + companion files):
git clone --depth 1 https://github.com/davila7/claude-code-templates /tmp/claude-code-templates && cp -r /tmp/claude-code-templates/cli-tool/components/skills/creative-design/ui-design-system ~/.claude/skills/ui-design-system-davila7This skill is a directory: SKILL.md is the entry point; the files below ship with it.
---
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
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
Use when you have a spec or requirements for a multi-step task, before touching code
Use when creating new skills, editing existing skills, or verifying skills work before deployment