From b471e881a9fcb5c1ab7738b0ab02dc9de80cedde Mon Sep 17 00:00:00 2001 From: catlog22 Date: Sun, 9 Nov 2025 22:53:37 +0800 Subject: [PATCH] refactor(ui-design): clarify agent distribution and animation extraction logic MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - **generate.md**: Eliminate ambiguity in agent task allocation - Add explicit "one agent per style" principle with warnings - Fix distribution strategy: balanced split (12โ†’6+6) instead of fill-first (12โ†’10+2) - Add distribution formula and concrete examples table - Simplify redundant constraints and consolidate documentation - Remove verbose descriptions per minimal information principle - **explore-auto.md**: Optimize animation extraction conditional logic - Add user confirmation for animation reuse in code import scenarios - Implement should_extract_animation flag with comprehensive conditions - Add skip_animation_extraction for explicit user preference handling - Update autonomous flow description with conditional animation phase - Add animation extraction task to TodoWrite tracking ๐Ÿค– Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../workflow/ui-design/explore-auto.md | 61 +++++++++--- .../commands/workflow/ui-design/generate.md | 94 ++++++++++++------- 2 files changed, 111 insertions(+), 44 deletions(-) diff --git a/.claude/commands/workflow/ui-design/explore-auto.md b/.claude/commands/workflow/ui-design/explore-auto.md index cda61e7f..019d56d3 100644 --- a/.claude/commands/workflow/ui-design/explore-auto.md +++ b/.claude/commands/workflow/ui-design/explore-auto.md @@ -19,11 +19,13 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(* **Autonomous Flow** (โš ๏ธ CONTINUOUS EXECUTION - DO NOT STOP): 1. User triggers: `/workflow:ui-design:explore-auto [params]` 2. Phase 0c: Target confirmation โ†’ User confirms โ†’ **IMMEDIATELY triggers Phase 1** -3. Phase 1 (style-extract) โ†’ **Execute phase (blocks until finished)** โ†’ Auto-continues -4. Phase 2.3 (animation-extract, optional) โ†’ **Execute phase (blocks until finished)** โ†’ Auto-continues -5. Phase 2.5 (layout-extract) โ†’ **Execute phase (blocks until finished)** โ†’ Auto-continues -6. **Phase 3 (ui-assembly)** โ†’ **Execute phase (blocks until finished)** โ†’ Auto-continues -7. Phase 4 (design-update) โ†’ **Execute phase (blocks until finished)** โ†’ Auto-continues +3. Phase 1 (style-extract) โ†’ **Execute phase (blocks until finished)** โ†’ Auto-continues to Phase 2.3 +4. Phase 2.3 (animation-extract, conditional): + - **IF should_extract_animation**: Execute animation extraction โ†’ Auto-continues to Phase 2.5 + - **ELSE**: Skip (use code import) โ†’ Auto-continues to Phase 2.5 +5. Phase 2.5 (layout-extract) โ†’ **Execute phase (blocks until finished)** โ†’ Auto-continues to Phase 3 +6. **Phase 3 (ui-assembly)** โ†’ **Execute phase (blocks until finished)** โ†’ Auto-continues to Phase 4 +7. Phase 4 (design-update) โ†’ **Execute phase (blocks until finished)** โ†’ Auto-continues to Phase 5 (if --batch-plan) 8. Phase 5 (batch-plan, optional) โ†’ Reports completion **Phase Transition Mechanism**: @@ -225,6 +227,11 @@ Write({base_path}/.run-metadata.json): { "status": "in_progress", "performance_mode": "optimized" } + +# Initialize default flags for animation extraction logic +animation_complete = false # Default: always extract animations unless code import proves complete +needs_visual_supplement = false # Will be set to true in hybrid mode +skip_animation_extraction = false # User preference for code import scenario ``` ### Phase 0c: Unified Target Inference with Intelligent Type Detection @@ -396,7 +403,23 @@ IF design_source IN ["code_only", "hybrid"]: ELSE IF design_source == "hybrid": needs_visual_supplement = true - STORE: needs_visual_supplement, style_complete, animation_complete, layout_complete + # Animation reuse confirmation (code import with complete animations) + IF design_source == "code_only" AND animation_complete: + REPORT: "โœ… ๆฃ€ๆต‹ๅˆฐๅฎŒๆ•ด็š„ๅŠจ็”ป็ณป็ปŸ๏ผˆๆฅ่‡ชไปฃ็ ๅฏผๅ…ฅ๏ผ‰" + REPORT: " Duration scales: {duration_count} | Easing functions: {easing_count}" + REPORT: "" + REPORT: "Options:" + REPORT: " โ€ข 'reuse' (้ป˜่ฎค) - ๅค็”จๅทฒๆœ‰ๅŠจ็”ป็ณป็ปŸ" + REPORT: " โ€ข 'regenerate' - ้‡ๆ–ฐ็”ŸๆˆๅŠจ็”ป็ณป็ปŸ๏ผˆไบคไบ’ๅผ๏ผ‰" + REPORT: " โ€ข 'cancel' - ๅ–ๆถˆๅทฅไฝœๆต" + user_response = WAIT_FOR_USER_INPUT() + MATCH user_response: + "reuse" โ†’ skip_animation_extraction = true + "regenerate" โ†’ skip_animation_extraction = false + "cancel" โ†’ EXIT 0 + default โ†’ skip_animation_extraction = true # Default: reuse + + STORE: needs_visual_supplement, style_complete, animation_complete, layout_complete, skip_animation_extraction ``` ### Phase 1: Style Extraction @@ -414,9 +437,22 @@ ELSE: ### Phase 2.3: Animation Extraction ```bash -IF design_source == "visual_only" OR NOT animation_complete: +# Determine if animation extraction is needed +should_extract_animation = false + +IF (design_source == "visual_only" OR needs_visual_supplement): + # Pure visual input or hybrid mode requiring visual supplement + should_extract_animation = true +ELSE IF NOT animation_complete: + # Code import but animations are incomplete + should_extract_animation = true +ELSE IF design_source == "code_only" AND animation_complete AND NOT skip_animation_extraction: + # Code import with complete animations, but user chose to regenerate + should_extract_animation = true + +IF should_extract_animation: REPORT: "๐Ÿš€ Phase 2.3: Animation Extraction" - command = "/workflow:ui-design:animation-extract --design-id \"{design_id}\" --mode interactive" + command = "/workflow:ui-design:animation-extract --design-id \"{design_id}\" --interactive" SlashCommand(command) ELSE: REPORT: "โœ… Phase 2.3: Animation (Using Code Import)" @@ -486,10 +522,11 @@ IF --batch-plan: ```javascript // Initialize IMMEDIATELY after Phase 0c user confirmation to track multi-phase execution TodoWrite({todos: [ - {"content": "Execute style extraction", "status": "in_progress", "activeForm": "Executing..."}, - {"content": "Execute layout extraction", "status": "pending", "activeForm": "Executing..."}, - {"content": "Execute UI assembly", "status": "pending", "activeForm": "Executing..."}, - {"content": "Execute design integration", "status": "pending", "activeForm": "Executing..."} + {"content": "Execute style extraction", "status": "in_progress", "activeForm": "Executing style extraction"}, + {"content": "Execute animation extraction", "status": "pending", "activeForm": "Executing animation extraction"}, + {"content": "Execute layout extraction", "status": "pending", "activeForm": "Executing layout extraction"}, + {"content": "Execute UI assembly", "status": "pending", "activeForm": "Executing UI assembly"}, + {"content": "Execute design integration", "status": "pending", "activeForm": "Executing design integration"} ]}) // โš ๏ธ CRITICAL: When each SlashCommand execution finishes (Phase 1-5), you MUST: diff --git a/.claude/commands/workflow/ui-design/generate.md b/.claude/commands/workflow/ui-design/generate.md index f47d8f5f..c8cb5f7b 100644 --- a/.claude/commands/workflow/ui-design/generate.md +++ b/.claude/commands/workflow/ui-design/generate.md @@ -101,31 +101,70 @@ ELSE: **Executor**: `Task(ui-design-agent)` grouped by `target ร— style` (max 10 layouts per agent, max 6 concurrent agents) +**โš ๏ธ Core Principle**: **Each agent processes ONLY ONE style** (but can process multiple layouts for that style) + +### Agent Grouping Strategy + +**Grouping Rules**: +1. **Style Isolation**: Each agent processes ONLY ONE style (never mixed) +2. **Balanced Distribution**: Layouts evenly split (e.g., 12โ†’6+6, not 10+2) +3. **Target Separation**: Different targets use different agents + +**Distribution Formula**: +``` +agents_needed = ceil(layout_count / MAX_LAYOUTS_PER_AGENT) +base_count = floor(layout_count / agents_needed) +remainder = layout_count % agents_needed +# First 'remainder' agents get (base_count + 1), others get base_count +``` + +**Examples** (MAX=10): + +| Scenario | Result | Explanation | +|----------|--------|-------------| +| 3 styles ร— 3 layouts | 3 agents | Each style: 1 agent (3 layouts) | +| 3 styles ร— 12 layouts | 6 agents | Each style: 2 agents (6+6 layouts) | +| 2 styles ร— 5 layouts ร— 2 targets | 4 agents | Each (target, style): 1 agent (5 layouts) | + ### Step 1: Calculate Agent Grouping Plan ```bash bash(mkdir -p {base_path}/prototypes) -# Build agent groups: Group by target ร— style, max 10 layouts per agent MAX_LAYOUTS_PER_AGENT = 10 MAX_PARALLEL = 6 agent_groups = [] FOR each target in targets: FOR each style_id in [1..S]: - layouts_for_group = all L layouts - # Split into chunks of max 10 layouts - layout_chunks = split(layouts_for_group, MAX_LAYOUTS_PER_AGENT) + layouts_for_this_target_style = filter layouts by current target + layout_count = len(layouts_for_this_target_style) + + # Balanced distribution (e.g., 12 layouts โ†’ 6+6) + agents_needed = ceil(layout_count / MAX_LAYOUTS_PER_AGENT) + base_count = floor(layout_count / agents_needed) + remainder = layout_count % agents_needed + + layout_chunks = [] + start_idx = 0 + FOR i in range(agents_needed): + chunk_size = base_count + 1 if i < remainder else base_count + layout_chunks.append(layouts[start_idx : start_idx + chunk_size]) + start_idx += chunk_size + FOR each chunk in layout_chunks: - agent_groups.append({target, style_id, layout_ids: chunk}) + agent_groups.append({ + target: target, # Single target + style_id: style_id, # Single style + layout_ids: chunk # Balanced layouts (โ‰ค10) + }) total_agents = len(agent_groups) total_batches = ceil(total_agents / MAX_PARALLEL) -# Initialize batch tracking TodoWrite({todos: [ {content: "Setup and validation", status: "completed", activeForm: "Loading design systems"}, - {content: "Batch 1/{total_batches}: Assemble 6 agent groups", status: "in_progress", activeForm: "Assembling batch 1"}, - {content: "Batch 2/{total_batches}: Assemble 6 agent groups", status: "pending", activeForm: "Assembling batch 2"}, + {content: "Batch 1/{total_batches}: Assemble up to 6 agent groups", status: "in_progress", activeForm: "Assembling batch 1"}, + {content: "Batch 2/{total_batches}: Assemble up to 6 agent groups", status: "pending", activeForm: "Assembling batch 2"}, ... (continue for all batches) ]}) ``` @@ -137,10 +176,10 @@ For each agent group `{target, style_id, layout_ids[]}` in current batch: ```javascript Task(ui-design-agent): ` [LAYOUT_STYLE_ASSEMBLY] - ๐ŸŽฏ Assembly task: {target} ร— Style-{style_id} ร— Layouts-{layout_ids} - Combine: Pre-extracted layout structure + design tokens โ†’ Final HTML/CSS + ๐ŸŽฏ {target} ร— Style-{style_id} ร— Layouts-{layout_ids} + โš ๏ธ CONSTRAINT: Use ONLY style-{style_id}/design-tokens.json (never mix styles) - TARGET: {target} | STYLE: {style_id} | LAYOUTS: {layout_ids} (array, max 10) + TARGET: {target} | STYLE: {style_id} | LAYOUTS: {layout_ids} (max 10) BASE_PATH: {base_path} ## Inputs (READ ONLY - NO DESIGN DECISIONS) @@ -220,13 +259,10 @@ Task(ui-design-agent): ` 3. Write files IMMEDIATELY after each layout completes ## Assembly Rules - - โœ… Pure assembly: Combine existing structure + existing style - - โŒ NO layout design decisions (structure pre-defined) - - โŒ NO style design decisions (tokens pre-defined) - - โœ… Process layouts sequentially within this agent task - - โœ… Design tokens and animation tokens read ONCE, shared across all layouts - - โœ… Replace var() with actual values for each layout - - โœ… Add placeholder content only + - โœ… Pure assembly: Combine pre-extracted structure + tokens + - โŒ NO design decisions (layout/style pre-defined) + - โœ… Read tokens ONCE, apply to all layouts in this batch + - โœ… Replace var() with actual values - โœ… CSS filename MUST match HTML ## Output @@ -297,14 +333,13 @@ Configuration: Assembly Process: - Pure assembly: Combined pre-extracted layouts + design tokens -- No design decisions: All structure and style pre-defined -- Agent grouping: Grouped by target ร— style (max 10 layouts per agent) +- Agent grouping: target ร— style (max 10 layouts per agent) +- Balanced distribution: Layouts evenly split (e.g., 12 โ†’ 6+6, not 10+2) Batch Execution: -- Total agents: {total_agents} (each processes multiple layouts) -- Batches: {total_batches} (max 6 agents parallel per batch) -- Agent isolation: Different targets use different agents -- Efficiency: Shared token loading within agent (read once, use for all layouts) +- Total agents: {total_agents} (each processes ONE style only) +- Batches: {total_batches} (max 6 agents parallel) +- Token efficiency: Read once per agent, apply to all layouts Quality: - Structure: From layout-extract (DOM, CSS layout rules) @@ -423,14 +458,9 @@ ERROR: Script permission denied ## Key Features - **Pure Assembly**: No design decisions, only combination -- **Separation of Concerns**: Layout (structure) + Style (tokens) kept separate until final assembly -- **Token Resolution**: var() placeholders replaced with actual values -- **Pre-validated**: Inputs already validated by extract/consolidate -- **Efficient Grouping**: - - Grouped by target ร— style (max 10 layouts per agent) - - Shared token loading within agent (read once, apply to all layouts) - - Reduced agent overhead vs one-layout-per-agent approach -- **Agent Isolation**: Different targets always use different agents +- **Token Resolution**: var() โ†’ actual values +- **Efficient Grouping**: target ร— style (max 10 layouts/agent, balanced split) +- **Style Isolation**: Each agent processes ONE style only - **Production-Ready**: Semantic, accessible, token-driven ## Integration