---
description: Interactive design wizard that guides through a complete frontend design process with discovery, aesthetic selection, and code generation. Use for creating distinctive, production-ready UI.
allowed-tools:
- Read
- Write
- AskUserQuestion
- Skill
---
# 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 (#ffffff)
- Off-white/warm (#faf8f5)
- Light tinted (use lightest palette color)
- Dark/moody (use darkest palette color)
- Let me decide based on aesthetic
### Question 5: Any specific inspiration?
- URLs to analyze
- Aesthetic keywords
- Specific requirements
- Skip (use trend research)
## Step 2: Research Phase
Based on answers, optionally invoke:
- `trend-researcher` - For current design trends
- `inspiration-analyzer` - For specific URLs provided
## Step 3: Moodboard Phase
Invoke `moodboard-creator` to:
- Synthesize research into direction
- Present options to user
- Iterate until approved
## Step 4: Aesthetic Selection
Based on discovery and moodboard, suggest aesthetics from catalog:
**For Modern/Premium:**
- Dark & Premium - Sophisticated, high-contrast
- Glassmorphism - Layered, translucent
- Bento Grid - Structured, modular
**For Bold/Distinctive:**
- Neobrutalism - Raw, impactful
- Statement Hero - Typography-focused
- Editorial - Magazine-inspired
**For Minimal/Clean:**
- Scandinavian - Warm minimal
- Swiss Typography - Grid-based clarity
- Single-Page Focus - Concentrated impact
**For Playful/Creative:**
- Y2K/Cyber - Retro-futuristic
- Memphis - Colorful geometric
- Kawaii - Cute, rounded
See `references/aesthetics-catalog.md` for full catalog.
## Step 5: Color & Typography
Invoke specialized skills:
- `color-curator` - Browse Coolors or select from fallbacks
- `typography-selector` - Browse Google Fonts or use pairings
Map selections to Tailwind config.
## Step 6: Code Generation
Generate single HTML file with:
### Structure
```html
[Project Title]
```
### Requirements
- Mobile-responsive (Tailwind breakpoints)
- Semantic HTML (header, main, nav, footer, section)
- Accessible (ARIA labels, focus states, contrast)
- No Lorem ipsum (realistic placeholder content)
- Animations respect prefers-reduced-motion
- Keyboard navigable
## Step 7: Self-Review
Check against `references/anti-patterns.md`:
- [ ] No hero badges/pills
- [ ] No generic fonts (Inter, Roboto, Arial)
- [ ] No purple/blue gradients on white
- [ ] No generic blob shapes
- [ ] No excessive rounded corners
- [ ] No predictable templates
Check `references/design-principles.md`:
- [ ] Clear visual hierarchy
- [ ] Proper alignment
- [ ] Sufficient contrast
- [ ] Appropriate white space
- [ ] Consistent spacing
Check `references/accessibility-guidelines.md`:
- [ ] 4.5:1 contrast ratio for text
- [ ] Visible focus states
- [ ] Semantic HTML
- [ ] Alt text for images
- [ ] Form labels
## Output Format
Deliver:
1. Final HTML file
2. Brief explanation of design choices
3. List of fonts used (for reference)
4. Color palette summary
## Iteration
If user requests changes:
1. Note specific feedback
2. Make targeted adjustments
3. Re-run self-review
4. Present updated version
Maximum 3 major iterations, then consolidate feedback.
## References
- `references/design-principles.md` - Core design principles with code
- `references/aesthetics-catalog.md` - Full aesthetic catalog
- `references/anti-patterns.md` - What NOT to do
- `references/accessibility-guidelines.md` - WCAG compliance