web-design-wizard

# Web Design Wizard

Generate multiple distinct design styles for a web page, let the user refine selections, then implement chosen designs in parallel worktrees.

## When to Use

- User wants to explore different design styles for a web page
- User asks for design options, visual direction, or style comparison
- User wants multiple implementations to choose from

**Do NOT use when:**
- User has a specific design already defined → use `saurun:react-tailwind-v4-components` or `frontend-design` directly
- User wants to modify an existing design, not create new ones

## Workflow

```dot
digraph design_wizard {
    "User request" [shape=doublecircle];
    "Discovery" [shape=box];
    "Style Generation" [shape=box];
    "User satisfied?" [shape=diamond];
    "Refinement" [shape=box];
    "Project Setup" [shape=box];
    "Parallel Implementation" [shape=box];
    "Parallel Verification" [shape=box];
    "Complete" [shape=doublecircle];

    "User request" -> "Discovery";
    "Discovery" -> "Style Generation";
    "Style Generation" -> "User satisfied?";
    "User satisfied?" -> "Refinement" [label="no"];
    "Refinement" -> "User satisfied?";
    "User satisfied?" -> "Project Setup" [label="yes"];
    "Project Setup" -> "Parallel Implementation";
    "Parallel Implementation" -> "Parallel Verification";
    "Parallel Verification" -> "Complete";
}
```

## Phase 1: Discovery

Use AskUserQuestion to gather context. **Batch questions** — use up to 4 questions per call. **Infer obvious answers** from context (e.g., a coffee shop is consumer-facing, probably warm mood).

Gather:
1. **Project name** — detect from package.json or git repo name, confirm with user
2. **Page type** — Landing, Portfolio, Blog, E-commerce, SaaS, Documentation
3. **Target audience** — Professionals, Consumers, Developers, Creative industry
4. **Mood/feeling** — Professional, Playful, Luxury, Minimal, Bold, Warm, Futuristic
5. **Content language** — English, Danish, etc.
6. **Style preferences/anti-pre