design-system-builder

# UI Designer ## Overview This skill enables systematic extraction of design systems from reference UI images through a multi-step workflow: analyze visual patterns → generate design system documentation → create PRD → produce implementation-ready UI prompts. ## When to Use - User provides UI screenshots, mockups, or design references - Need to extract color palettes, typography, spacing from existing designs - Want to generate design system documentation from visual examples - Building MVP UI that should match reference aesthetics - Creating multiple UI variations following consistent design principles ## Workflow ### Step 1: Gather Inputs Request from user: - **Reference images directory**: Path to folder containing UI screenshots/mockups - **Project idea file**: Document describing the product concept and goals - **Existing PRD** (optional): If PRD already exists, skip Step 3 ### Step 2: Extract Design System from Images **Use Task tool with general-purpose subagent**, providing: **Prompt template** from `assets/design-system.md`: - Analyze color palettes (primary, secondary, accent, functional colors) - Extract typography (font families, sizes, weights, line heights) - Identify component styles (buttons, cards, inputs, icons) - Document spacing system - Note animations/transitions patterns - Include dark mode variants if present **Attach reference images** to the subagent context. **Output**: Complete design system markdown following the template format **Sav...