design-wizard

# Design Wizard An interactive wizard that guides you through creating distinctive, production-ready frontend designs. ## Purpose This skill orchestrates the complete design process: 1. Discovery - Understanding what to build 2. Research - Analyzing trends and inspiration 3. Direction - Selecting aesthetic approach 4. Colors - Choosing color palette 5. Typography - Selecting fonts 6. Implementation - Generating code 7. Review - Validating quality ## Process Overview ``` ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ Discovery │ ──▶ │ Research │ ──▶ │ Moodboard │ └─────────────┘ └─────────────┘ └─────────────┘ │ ┌─────────────┐ ┌─────────────┐ ▼ │ Review │ ◀── │ Generate │ ◀── ┌─────────────┐ └─────────────┘ └─────────────┘ │ Colors/Type │ └─────────────┘ ``` ## Step 1: Discovery Questions Ask the user about their project: ### Question 1: What are you building? - Landing page - Dashboard - Blog/Content site - E-commerce - Portfolio - SaaS application - Mobile app UI - Other (describe) ### Question 2: Project context - Personal project - Startup/new product - Established brand - Client work - Redesign of existing ### Question 3: Target audience - Developers/technical - Business professionals - Creative/designers - General consumers - Young/Gen-Z - Luxury/premium market ### Question 4: Background style preference - Pure white (#...