product-design

# Product Design Skill Automate design handoff from Figma to code with design system intelligence. Extract tokens, map components, detect drift, generate implementation plans. ## When to Invoke Auto-invoke when user says: - "Review this design" - "Analyze Figma mockup" - "Design handoff for [feature]" - "Check design system impact" - "Plan implementation for design" - "Extract tokens from Figma" - "What changed in the design?" ## What This Does **5-Step Workflow**: 1. **Design Analysis**: Extract patterns, components, tokens from Figma 2. **Codebase Audit**: Compare design vs implementation, find drift 3. **Implementation Planning**: Generate phased task breakdown 4. **Task Assignment**: Create Navigator task document 5. **Handoff**: Ask user to review or start implementation **Time Savings**: 6-10 hours → 15-20 minutes (95% reduction) ## Prerequisites ### Required 1. **Python Dependencies** ```bash cd skills/product-design ./setup.sh # Automated installation # OR manually: pip install -r requirements.txt ``` 2. **Figma Desktop** (for automated workflow) - Download: https://www.figma.com/downloads/ - Enable MCP: Figma → Preferences → Enable local MCP Server - Must be running during design reviews 3. **Project Structure** - `.agent/design-system/` directory (created on first run) - Project with components (React/Vue/Svelte) ### Optional (Enhanced Features) - **Figma Enterprise**: Code Connect for automatic component mapping - **Tailwi...