ui-design-system

# UI Design System Generate design tokens, create color palettes, calculate typography scales, build component systems, and prepare developer handoff documentation. --- ## Table of Contents - [Trigger Terms](#trigger-terms) - [Workflows](#workflows) - [Workflow 1: Generate Design Tokens](#workflow-1-generate-design-tokens) - [Workflow 2: Create Component System](#workflow-2-create-component-system) - [Workflow 3: Responsive Design](#workflow-3-responsive-design) - [Workflow 4: Developer Handoff](#workflow-4-developer-handoff) - [Tool Reference](#tool-reference) - [Quick Reference Tables](#quick-reference-tables) - [Knowledge Base](#knowledge-base) --- ## Trigger Terms Use this skill when you need to: - "generate design tokens" - "create color palette" - "build typography scale" - "calculate spacing system" - "create design system" - "generate CSS variables" - "export SCSS tokens" - "set up component architecture" - "document component library" - "calculate responsive breakpoints" - "prepare developer handoff" - "convert brand color to palette" - "check WCAG contrast" - "build 8pt grid system" --- ## Workflows ### Workflow 1: Generate Design Tokens **Situation:** You have a brand color and need a complete design token system. **Steps:** 1. **Identify brand color and style** - Brand primary color (hex format) - Style preference: `modern` | `classic` | `playful` 2. **Generate tokens using script** ```bash python scripts/design_token_generator.p...