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 <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