mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-05 01:50:27 +08:00
refactor(ui-design): clarify agent distribution and animation extraction logic
- **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 <noreply@anthropic.com>
This commit is contained in:
catlog22
@@ -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:
|
||||
|
||||
@@ -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 <link href="...">
|
||||
|
||||
## 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
|
||||
|
||||
Reference in New Issue
Block a user