fix: ensure correct layout variant count generation in UI workflow

Fix layout strategy generation issues across UI design commands:
- consolidate.md: Enhance layout synthesis prompt with explicit examples and requirements
  * Add concrete 3-layout example to clarify expected output structure
  * Emphasize requirement to generate EXACTLY N strategies (not more, not less)
  * Add sequential ID validation (layout-1, layout-2, ..., layout-N)
- explore-auto.md: Add missing --layout-variants parameter to consolidate command call
  * Phase 2 now passes layout_variants count to ensure correct strategy generation
  * Prevents mismatch between requested layouts and generated strategies
- extract.md: Update next step suggestions to include --layout-variants parameter
  * Users now see optional [--layout-variants <count>] in command examples
  * Improves discoverability of layout customization option

Before: consolidate would only generate default 3 layouts even when user specified different count
After: consolidate receives and respects user-specified layout variant count

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

.claude/commands/workflow/ui-design/consolidate.md

@@ -108,7 +108,7 @@ layout_trends = mcp__exa__get_code_context_exa(
 REPORT: "🎨 Generating {layout_variants} custom layout strategies..."
 
 layout_synthesis_prompt = """
-Generate {layout_variants} distinct, modern UI layout strategies for this project.
+Generate EXACTLY {layout_variants} distinct, modern UI layout strategies for this project.
 
 PROJECT CONTEXT:
 {project_context}
@@ -117,27 +117,46 @@ CURRENT LAYOUT TRENDS (from web research):
 {layout_trends}
 
 REQUIREMENTS:
-1. Each layout must be unique and serve different use cases
-2. Consider modern design trends from 2024-2025
-3. Align with project type: {project_hints}
-4. Balance innovation with usability
-5. Cover diverse layout paradigms (grid-based, asymmetric, minimal, etc.)
+1. Generate EXACTLY {layout_variants} unique layout strategies (not more, not less)
+2. Each layout must be unique and serve different use cases
+3. Consider modern design trends from 2024-2025
+4. Align with project type: {project_hints}
+5. Balance innovation with usability
+6. Cover diverse layout paradigms (grid-based, asymmetric, minimal, single-column, sidebar-based, etc.)
 
 OUTPUT FORMAT (JSON):
+You MUST generate {layout_variants} strategy objects in the "strategies" array.
+
+Example for layout_variants=3:
 {
-  "layout_variants_count": {layout_variants},
+  "layout_variants_count": 3,
   "strategies": [
     {
       "id": "layout-1",
-      "name": "{Concise name, max 3 words}",
-      "description": "{Detailed description: layout structure, visual hierarchy, reading patterns, use cases. 2-3 sentences.}"
+      "name": "Grid Dashboard",
+      "description": "Traditional grid-based layout with sidebar navigation. Clear visual hierarchy with card-based content areas. Ideal for data-heavy dashboards."
     },
-    ...
+    {
+      "id": "layout-2",
+      "name": "Asymmetric Flow",
+      "description": "Dynamic asymmetric layout with floating content blocks. Natural reading flow with varied content widths. Perfect for content-focused applications."
+    },
+    {
+      "id": "layout-3",
+      "name": "Minimal Centered",
+      "description": "Clean centered layout with generous whitespace. Single-column focus with subtle hierarchy. Best for documentation or blog-style interfaces."
+    }
   ]
 }
 
+IMPORTANT:
+- The "strategies" array MUST contain EXACTLY {layout_variants} objects
+- Each strategy must have sequential IDs: "layout-1", "layout-2", ..., "layout-{layout_variants}"
+- Each strategy name must be concise (max 3 words)
+- Each description must be detailed (2-3 sentences covering structure, hierarchy, use cases)
+
 RESPONSE FORMAT:
-Provide ONLY the JSON object, no additional text.
+Provide ONLY the JSON object, no additional text before or after.
 
 ===== layout-strategies.json =====
 {JSON content}

.claude/commands/workflow/ui-design/explore-auto.md

@@ -415,7 +415,8 @@ SlashCommand(command)
 run_base_flag = "--base-path \"{base_path}\""
 
 # Use count-based parameter with --keep-separate for matrix mode
-command = "/workflow:ui-design:consolidate {run_base_flag} --variants {style_variants} --keep-separate"
+# IMPORTANT: Pass --layout-variants to ensure correct number of layout strategies are generated
+command = "/workflow:ui-design:consolidate {run_base_flag} --variants {style_variants} --layout-variants {layout_variants} --keep-separate"
 SlashCommand(command)
 ```
 **Result**: Generates `style_variants` independent design systems:

.claude/commands/workflow/ui-design/extract.md

@@ -250,7 +250,7 @@ Generated {variants_count} style variant(s):
 
 📂 Output: {base_path}/style-extraction/style-cards.json
 
-Next: /workflow:ui-design:consolidate --session {session_id} --variants {variants_count}
+Next: /workflow:ui-design:consolidate --session {session_id} --variants {variants_count} [--layout-variants <count>]
 
 Note: When called from /workflow:ui-design:auto, consolidation is triggered automatically.
 ```
@@ -685,4 +685,4 @@ Complete structure with example values:
 - **Output**: `style-cards.json` for `/workflow:ui-design:consolidate`
 - **Context**: Optional brainstorming artifacts (`synthesis-specification.md`, `ui-designer/analysis.md`)
 - **Auto Integration**: Automatically triggered by `/workflow:ui-design:auto` workflow
-- **Next Step**: `/workflow:ui-design:consolidate --session {session_id} --variants {count}` (or `--keep-separate` for matrix mode)
+- **Next Step**: `/workflow:ui-design:consolidate --session {session_id} --variants {count} [--layout-variants <count>]` (add `--keep-separate` for matrix mode)