mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-12 02:37:45 +08:00
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>
This commit is contained in:
@@ -108,7 +108,7 @@ layout_trends = mcp__exa__get_code_context_exa(
|
|||||||
REPORT: "🎨 Generating {layout_variants} custom layout strategies..."
|
REPORT: "🎨 Generating {layout_variants} custom layout strategies..."
|
||||||
|
|
||||||
layout_synthesis_prompt = """
|
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:
|
||||||
{project_context}
|
{project_context}
|
||||||
@@ -117,27 +117,46 @@ CURRENT LAYOUT TRENDS (from web research):
|
|||||||
{layout_trends}
|
{layout_trends}
|
||||||
|
|
||||||
REQUIREMENTS:
|
REQUIREMENTS:
|
||||||
1. Each layout must be unique and serve different use cases
|
1. Generate EXACTLY {layout_variants} unique layout strategies (not more, not less)
|
||||||
2. Consider modern design trends from 2024-2025
|
2. Each layout must be unique and serve different use cases
|
||||||
3. Align with project type: {project_hints}
|
3. Consider modern design trends from 2024-2025
|
||||||
4. Balance innovation with usability
|
4. Align with project type: {project_hints}
|
||||||
5. Cover diverse layout paradigms (grid-based, asymmetric, minimal, etc.)
|
5. Balance innovation with usability
|
||||||
|
6. Cover diverse layout paradigms (grid-based, asymmetric, minimal, single-column, sidebar-based, etc.)
|
||||||
|
|
||||||
OUTPUT FORMAT (JSON):
|
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": [
|
"strategies": [
|
||||||
{
|
{
|
||||||
"id": "layout-1",
|
"id": "layout-1",
|
||||||
"name": "{Concise name, max 3 words}",
|
"name": "Grid Dashboard",
|
||||||
"description": "{Detailed description: layout structure, visual hierarchy, reading patterns, use cases. 2-3 sentences.}"
|
"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:
|
RESPONSE FORMAT:
|
||||||
Provide ONLY the JSON object, no additional text.
|
Provide ONLY the JSON object, no additional text before or after.
|
||||||
|
|
||||||
===== layout-strategies.json =====
|
===== layout-strategies.json =====
|
||||||
{JSON content}
|
{JSON content}
|
||||||
|
|||||||
@@ -415,7 +415,8 @@ SlashCommand(command)
|
|||||||
run_base_flag = "--base-path \"{base_path}\""
|
run_base_flag = "--base-path \"{base_path}\""
|
||||||
|
|
||||||
# Use count-based parameter with --keep-separate for matrix mode
|
# 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)
|
SlashCommand(command)
|
||||||
```
|
```
|
||||||
**Result**: Generates `style_variants` independent design systems:
|
**Result**: Generates `style_variants` independent design systems:
|
||||||
|
|||||||
@@ -250,7 +250,7 @@ Generated {variants_count} style variant(s):
|
|||||||
|
|
||||||
📂 Output: {base_path}/style-extraction/style-cards.json
|
📂 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.
|
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`
|
- **Output**: `style-cards.json` for `/workflow:ui-design:consolidate`
|
||||||
- **Context**: Optional brainstorming artifacts (`synthesis-specification.md`, `ui-designer/analysis.md`)
|
- **Context**: Optional brainstorming artifacts (`synthesis-specification.md`, `ui-designer/analysis.md`)
|
||||||
- **Auto Integration**: Automatically triggered by `/workflow:ui-design:auto` workflow
|
- **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)
|
||||||
|
|||||||
Reference in New Issue
Block a user