feat: /office-hours visual design exploration integration

Add {{DESIGN_MOCKUP}} to office-hours template before the existing
{{DESIGN_SKETCH}}. When the design binary is available, /office-hours
generates 3 visual mockup variants, opens a comparison board in Chrome,
and polls for user feedback. Falls back to HTML wireframes if the
design binary isn't built.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

office-hours/SKILL.md

@@ -744,6 +744,104 @@ Present via AskUserQuestion. Do NOT proceed without user approval of the approac
 
 ---
 
+## Visual Design Exploration
+
+```bash
+_ROOT=$(git rev-parse --show-toplevel 2>/dev/null)
+D=""
+[ -n "$_ROOT" ] && [ -x "$_ROOT/.claude/skills/gstack/design/dist/design" ] && D="$_ROOT/.claude/skills/gstack/design/dist/design"
+[ -z "$D" ] && D=~/.claude/skills/gstack/design/dist/design
+[ -x "$D" ] && echo "DESIGN_READY" || echo "DESIGN_NOT_AVAILABLE"
+```
+
+**If `DESIGN_NOT_AVAILABLE`:** Fall back to the HTML wireframe approach below
+(the existing DESIGN_SKETCH section). Visual mockups require the design binary.
+
+**If `DESIGN_READY`:** Generate visual mockup explorations for the user.
+
+Generating visual mockups of the proposed design... (say "skip" if you don't need visuals)
+
+**Step 1: Construct the design brief**
+
+Read DESIGN.md if it exists — use it to constrain the visual style. If no DESIGN.md,
+explore wide across diverse directions.
+
+Assemble a structured brief as a JSON file:
+```bash
+cat > /tmp/gstack-design-brief.json << 'BRIEF_EOF'
+{
+  "goal": "<what this screen/page does>",
+  "audience": "<who uses it>",
+  "style": "<visual style from DESIGN.md or from the user's description>",
+  "elements": ["<list>", "<of>", "<key UI elements>"],
+  "constraints": "<any size/layout constraints>",
+  "screenType": "<desktop-dashboard|mobile-app|landing-page|settings|etc>"
+}
+BRIEF_EOF
+```
+
+**Step 2: Generate 3 variants**
+
+```bash
+$D variants --brief-file /tmp/gstack-design-brief.json --count 3 --output-dir /tmp/gstack-mockups/
+```
+
+This generates 3 style variations of the same brief (~40 seconds total).
+
+**Step 3: Show the comparison board**
+
+```bash
+$D compare --images "/tmp/gstack-mockups/variant-A.png,/tmp/gstack-mockups/variant-B.png,/tmp/gstack-mockups/variant-C.png" --output /tmp/gstack-design-board.html
+```
+
+Open the comparison board in headed Chrome for user review:
+
+```bash
+$B goto file:///tmp/gstack-design-board.html
+```
+
+Tell the user: "I've generated 3 design directions and opened them in Chrome.
+Pick your favorite, rate the others, and click Submit when you're done."
+
+**Step 4: Poll for user feedback**
+
+Poll the page for the user's submission:
+
+```bash
+$B eval document.getElementById('status').textContent
+```
+
+- If empty: user hasn't submitted yet. Wait 10 seconds and poll again.
+- If "submitted": read the feedback.
+- If "regenerate": user wants new variants. Read the regeneration request,
+  generate new variants with the updated brief, and refresh the comparison board.
+
+When status is "submitted", read the structured feedback:
+
+```bash
+$B eval document.getElementById('feedback-result').textContent
+```
+
+This returns JSON with the user's preferred variant, star ratings, comments,
+and overall direction.
+
+**Step 5: Save approved mockup**
+
+Copy the user's preferred variant to `docs/designs/` (create if needed):
+
+```bash
+mkdir -p docs/designs
+cp /tmp/gstack-mockups/variant-<PREFERRED>.png docs/designs/<skill>-<description>-$(date +%Y%m%d).png
+```
+
+Reference the saved mockup in the design doc or plan.
+
+**Step 6: Generate HTML wireframe**
+
+After the mockup is approved, generate an HTML wireframe matching the approved
+direction using the existing DESIGN_SKETCH approach. The wireframe is what the
+agent implements from — the mockup is what the human approved.
+
 ## Visual Sketch (UI ideas only)
 
 If the chosen approach involves user-facing UI (screens, pages, forms, dashboards,

office-hours/SKILL.md.tmpl

@@ -388,6 +388,8 @@ Present via AskUserQuestion. Do NOT proceed without user approval of the approac
 
 ---
 
+{{DESIGN_MOCKUP}}
+
 {{DESIGN_SKETCH}}
 
 ---