From 447837df39d3197404f02c560437214b0cae1ef0 Mon Sep 17 00:00:00 2001 From: catlog22 Date: Thu, 9 Oct 2025 18:17:39 +0800 Subject: [PATCH] fix: ensure correct layout variant count generation in UI workflow MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 ] 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 --- .../workflow/ui-design/consolidate.md | 41 ++++++++++++++----- .../workflow/ui-design/explore-auto.md | 3 +- .../commands/workflow/ui-design/extract.md | 4 +- 3 files changed, 34 insertions(+), 14 deletions(-) diff --git a/.claude/commands/workflow/ui-design/consolidate.md b/.claude/commands/workflow/ui-design/consolidate.md index 684089ce..c25b2c3a 100644 --- a/.claude/commands/workflow/ui-design/consolidate.md +++ b/.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} diff --git a/.claude/commands/workflow/ui-design/explore-auto.md b/.claude/commands/workflow/ui-design/explore-auto.md index 98e0d6f6..9f50d0bf 100644 --- a/.claude/commands/workflow/ui-design/explore-auto.md +++ b/.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: diff --git a/.claude/commands/workflow/ui-design/extract.md b/.claude/commands/workflow/ui-design/extract.md index f8427024..c0685a96 100644 --- a/.claude/commands/workflow/ui-design/extract.md +++ b/.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 ] 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 ]` (add `--keep-separate` for matrix mode)