--- name: gdd-sketch description: "Multi-variant HTML design exploration that creates .design/sketches// with N standalone variants (default 3), browser-openable directly via file:// without a build step. Use when answering 'what could this look like?' before committing to a direction." argument-hint: "[topic] [--variants N] [--quick]" tools: Read, Write, AskUserQuestion, Bash --- # Get Design Done - Sketch **Role:** Multi-variant HTML exploration. Answers "what could this look like?" by generating N standalone HTML variants from a topic prompt. Variants are browser-openable directly - no build step - and can be screenshot by Phase 8 Preview/Playwright tooling later. Unlike `{{command_prefix}}spike` (which tests feasibility), `{{command_prefix}}sketch` explores visual/directional variants. ## Flag parsing Parse `$ARGUMENTS`: - `[topic]` → kebab-case slug (e.g., "hero-redesign") - `--variants N` → number of variants (default: 3) - `--quick` → skip intake, use DESIGN-CONTEXT.md tokens + sensible defaults ## Step 1 - Intake (unless `--quick`) AskUserQuestion, one at a time: 1. "What are you sketching? (component, layout, page)" 2. "What directions should the variants explore? (minimal/maximal, dense/spacious, flat/layered, playful/restrained, etc.)" 3. "Which design tokens apply? (pick from DESIGN-CONTEXT.md, or use defaults)" If `--quick`: derive directions from topic + pull tokens from `.design/DESIGN-CONTEXT.md` if present, else defaults. ## Step 2 - Create sketch directory - Derive `` from the topic (kebab-case). - `mkdir -p .design/sketches//` via Bash. ## Step 3 - Write INTAKE.md Write `.design/sketches//INTAKE.md` with: - Topic - Directions (one bullet per variant) - Token references (link to DESIGN-CONTEXT.md or inline list) - Timestamp ## Step 4 - Generate N standalone HTML variants For each of N variants (default 3), write `variant-.html` as a **complete standalone HTML file**: - `` + `` + `` + `` - `