From 9993d599f8a0cfb3764f4eedbe28bae242e630f2 Mon Sep 17 00:00:00 2001
From: catlog22 <catlog22@github.com>
Date: Sat, 11 Oct 2025 15:29:33 +0800
Subject: [PATCH] Add interactive layer exploration workflow for UI design

- Implemented the `/workflow:ui-design:explore-layers` command for depth-controlled UI capture.
- Defined depth levels from full-page screenshots to Shadow DOM exploration.
- Included setup, validation, and navigation phases with error handling.
- Captured screenshots at various depths and generated a comprehensive layer map.
- Added examples and usage instructions for ease of use.
---
 .../workflow/ui-design/batch-generate.md      | 1304 +++++------------
 .../commands/workflow/ui-design/capture.md    |  683 +++------
 .../workflow/ui-design/explore-auto-v2.md     |  390 -----
 .../workflow/ui-design/explore-auto.md        |  263 +++-
 .../workflow/ui-design/explore-layers.md      |  594 ++++++++
 .../commands/workflow/ui-design/extract.md    |   51 +-
 .../workflow/ui-design/generate-v2.md         |  321 ----
 .../commands/workflow/ui-design/generate.md   |  377 +++--
 .../workflow/ui-design/imitate-auto-v3.md     |  621 --------
 .../workflow/ui-design/imitate-auto.md        | 1082 ++++++++------
 10 files changed, 2191 insertions(+), 3495 deletions(-)
 delete mode 100644 .claude/commands/workflow/ui-design/explore-auto-v2.md
 create mode 100644 .claude/commands/workflow/ui-design/explore-layers.md
 delete mode 100644 .claude/commands/workflow/ui-design/generate-v2.md
 delete mode 100644 .claude/commands/workflow/ui-design/imitate-auto-v3.md

diff --git a/.claude/commands/workflow/ui-design/batch-generate.md b/.claude/commands/workflow/ui-design/batch-generate.md
index 3dd312dc..0c63ec63 100644
--- a/.claude/commands/workflow/ui-design/batch-generate.md
+++ b/.claude/commands/workflow/ui-design/batch-generate.md
@@ -1,1073 +1,469 @@
 ---
 name: batch-generate
-description: Batch generate UI prototypes based on prompt and style/layout information from other commands
-usage: /workflow:ui-design:batch-generate --prompt "<description>" [--base-path <path>] [--session <id>] [--targets "<list>"] [--target-type "page|component"] [--style-variants <count>] [--layout-variants <count>]
+description: Prompt-driven batch UI generation using target-style-centric parallel execution
+usage: /workflow:ui-design:batch-generate --prompt "<description>" [--targets "<list>"] [--target-type "page|component"] [--device-type "desktop|mobile|tablet|responsive"] [--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]
 examples:
-  - /workflow:ui-design:batch-generate --prompt "Create modern dashboard with cards and charts" --style-variants 3 --layout-variants 2
-  - /workflow:ui-design:batch-generate --prompt "E-commerce product listing page" --base-path ".workflow/.design/run-20250110-120000"
-  - /workflow:ui-design:batch-generate --prompt "Generate auth pages: login, signup, reset password" --session WFS-auth
-  - /workflow:ui-design:batch-generate --prompt "Create navbar, hero, and footer components" --target-type "component" --targets "navbar,hero,footer"
-allowed-tools: TodoWrite(*), Read(*), Write(*), Task(ui-design-agent), Bash(*), Glob(*), mcp__exa__web_search_exa(*)
+  - /workflow:ui-design:batch-generate --prompt "Dashboard with metrics cards" --style-variants 3
+  - /workflow:ui-design:batch-generate --prompt "Auth pages: login, signup" --session WFS-auth
+  - /workflow:ui-design:batch-generate --prompt "Navbar, hero, footer components" --target-type component
+  - /workflow:ui-design:batch-generate --prompt "Mobile e-commerce app" --device-type mobile
+allowed-tools: TodoWrite(*), Read(*), Write(*), Task(ui-design-agent), Bash(*), mcp__exa__web_search_exa(*)
 ---
 
-# Batch Generate UI Prototypes Command
-
-**Executor**: Main orchestrator → @ui-design-agent (T×S parallel tasks)
+# Batch Generate UI Prototypes (/workflow:ui-design:batch-generate)
 
 ## Overview
+Prompt-driven UI generation with intelligent target extraction and **target-style-centric batch execution**. Each agent handles all layouts for one target × style combination.
 
-Batch generate production-ready UI prototypes (HTML/CSS) based on user prompt and existing style/layout information. This command intelligently discovers available design tokens and generates prototypes using **Target-Style-Centric** architecture for optimal component isolation.
+**Strategy**: Prompt → Targets → Batched Generation
+- **Prompt-driven**: Describe what to build, command extracts targets
+- **Agent scope**: Each of `T × S` agents generates `L` layouts
+- **Parallel batching**: Max 6 concurrent agents for optimal throughput
+- **Component isolation**: Complete task independence
+- **Style-aware**: HTML adapts to design_attributes
+- **Self-contained CSS**: Direct token values (no var() refs)
 
-## Core Philosophy
+**Supports**: Pages (full layouts) and components (isolated elements)
 
-- **Prompt-Driven Generation**: User describes what to build, command infers targets and requirements
-- **Smart Token Discovery**: Auto-detects consolidated or proposed tokens from previous commands
-- **Target-Style-Centric**: Each of T×S agents generates L layouts for one target × one style
-- **Parallel Batch Execution**: Automatic task batching with max 6 concurrent agents for optimal throughput
-- **Progress Tracking**: TodoWrite shows batch-by-batch progress with clear visibility
-- **Component Isolation**: Tasks completely independent, preventing cross-component interference
-- **Style-Aware Structure**: HTML DOM adapts based on design_attributes (if available)
-- **Flexible Integration**: Works with consolidate, extract, or other workflow outputs
-- **Production-Ready**: Semantic HTML5, ARIA attributes, responsive design
-- **Scalable**: Handles 1-30+ tasks efficiently with automatic batching
+## Phase 1: Setup & Validation
 
-## Input Parameters
-
-### Required Parameters
-
-**--prompt** `"<description>"`
-- User's description of what to generate
-- Used to infer targets, understand requirements, and guide generation
-- Examples:
-  - `"Create dashboard with metrics cards and charts"`
-  - `"Generate authentication pages: login and signup"`
-  - `"Build navbar, hero section, and footer components"`
-
-### Optional Parameters
-
-**--base-path** `<path>`
-- Path to design run directory containing style information
-- If omitted: Auto-detects latest design run from `.workflow/.design/*` or session directory
-- Example: `.workflow/WFS-auth/design-run-20250110-120000`
-
-**--session** `<id>`
-- Workflow session ID (e.g., `WFS-auth`)
-- If provided: Searches for design runs in `.workflow/WFS-{session}/design-*`
-- Enables integration with session brainstorming artifacts
-
-**--targets** `"<list>"`
-- Comma-separated list of targets to generate
-- If omitted: Extracted from prompt using intelligent parsing
-- Examples: `"home,dashboard,settings"` or `"navbar,hero,card"`
-
-**--target-type** `"page|component"`
-- Type of targets to generate
-- `page`: Full-page layouts with complete structure
-- `component`: Isolated UI elements with minimal wrapper
-- If omitted: Auto-detected from target names
-
-**--style-variants** `<count>`
-- Number of style variants to generate (1-5)
-- If omitted: Auto-detected from available style directories
-- Default: All available styles in consolidation or extraction directory
-
-**--layout-variants** `<count>`
-- Number of layout variants per target × style (1-5)
-- If omitted: Default = 3
-- Each layout should be structurally different
-
-## Execution Protocol
-
-### Phase 0: Initialization
-
-```javascript
-TodoWrite({todos: [
-  {content: "Initialize and parse user prompt", status: "in_progress", activeForm: "Initializing"},
-  {content: "Load style information and validate token sources", status: "pending", activeForm: "Loading styles"},
-  {content: "Gather layout inspiration via MCP search", status: "pending", activeForm: "Gathering inspiration"},
-  {content: "Launch T×S target-style agents for batch generation", status: "pending", activeForm: "Generating prototypes"},
-  {content: "Verify all generated files", status: "pending", activeForm: "Verifying files"},
-  {content: "Generate comparison files (compare.html, index.html)", status: "pending", activeForm: "Generating previews"}
-]});
-```
-
-**Base Path Resolution**:
+### Step 1: Parse Prompt & Resolve Configuration
 ```bash
-# Priority 1: Explicit --base-path
-IF --base-path:
-    base_path = {provided_base_path}
-    VERIFY: exists(base_path), "Base path does not exist"
-
-# Priority 2: Session-based discovery
-ELSE IF --session:
-    candidate_paths = Glob(".workflow/WFS-{session}/design-*")
-    candidate_paths.sort_by_modification_time(descending)
-    base_path = candidate_paths[0]
-    VERIFY: base_path, "No design runs found for session {session}"
-    REPORT: "📁 Auto-detected session design run: {base_path}"
-
-# Priority 3: Latest design run
-ELSE:
-    candidate_paths = Glob(".workflow/.design/run-*")
-    candidate_paths.sort_by_modification_time(descending)
-    base_path = candidate_paths[0]
-    VERIFY: base_path, "No design runs found. Run extract or consolidate first."
-    REPORT: "📁 Auto-detected latest design run: {base_path}"
-
-STORE: base_path
-```
-
-**Target Extraction from Prompt**:
-```bash
-# Use intelligent parsing to extract targets from prompt
+# Parse required parameters
 prompt_text = --prompt
+device_type = --device-type OR "responsive"
 
-# Example patterns:
-# "Create dashboard with cards" → ["dashboard"]
-# "Generate login, signup, and reset password pages" → ["login", "signup", "reset-password"]
-# "Build navbar, hero, footer components" → ["navbar", "hero", "footer"]
-
-# If --targets explicitly provided, use those instead
+# Extract targets from prompt
 IF --targets:
-    target_list = split_and_clean(--targets, delimiters=[",", ";", "、"])
-    REPORT: "🎯 Using explicit targets: {', '.join(target_list)}"
+    target_list = split_and_clean(--targets)
 ELSE:
-    # Parse targets from prompt using pattern matching
-    target_list = extract_targets_from_prompt(prompt_text)
-    REPORT: "🎯 Extracted targets from prompt: {', '.join(target_list)}"
+    target_list = extract_targets_from_prompt(prompt_text)  # See helpers
+    IF NOT target_list: target_list = ["home"]  # Fallback
 
-    # Fallback if extraction fails
-    IF NOT target_list:
-        target_list = ["home"]
-        REPORT: "⚠️ Could not extract targets, defaulting to: ['home']"
+# Detect target type
+target_type = --target-type OR detect_target_type(target_list)
 
-# Validate target names
-validated_targets = [t for t in target_list if regex_match(t, r"^[a-z0-9][a-z0-9_-]*$")]
-invalid_targets = [t for t in target_list if t not in validated_targets]
-
-IF invalid_targets:
-    REPORT: "⚠️ Skipped invalid target names: {', '.join(invalid_targets)}"
-
-VALIDATE: validated_targets not empty, "No valid targets found"
-target_list = validated_targets
-
-# Auto-detect target type if not provided
-IF --target-type:
-    target_type = --target-type
+# Resolve base path
+IF --base-path:
+    base_path = --base-path
+ELSE IF --session:
+    bash(find .workflow/WFS-{session} -type d -name "design-*" -printf "%T@ %p\n" | sort -nr | head -1 | cut -d' ' -f2)
 ELSE:
-    target_type = detect_target_type(target_list)
-    REPORT: "🔍 Auto-detected target type: {target_type}"
+    bash(find .workflow -type d -name "design-*" -printf "%T@ %p\n" | sort -nr | head -1 | cut -d' ' -f2)
 
-STORE: target_list, target_type
-```
-
-### Phase 1: Token Source Discovery & Context Loading
-
-```bash
-REPORT: "📊 Phase 1: Discovering token sources..."
-
-# Determine style variant count
-style_variants = --style-variants OR auto_detect_from_directories()
+# Get variant counts
+style_variants = --style-variants OR bash(ls {base_path}/style-consolidation/style-* -d | wc -l)
 layout_variants = --layout-variants OR 3
-
-VALIDATE: 1 <= style_variants <= 5, "Style variants must be between 1-5"
-VALIDATE: 1 <= layout_variants <= 5, "Layout variants must be between 1-5"
-
-# Smart token source detection (same logic as generate-v2.md Phase 1.2)
-token_sources = {}
-consolidated_count = 0
-proposed_count = 0
-
-FOR style_id IN range(1, style_variants + 1):
-    # Priority 1: Consolidated tokens
-    consolidated_path = "{base_path}/style-consolidation/style-{style_id}/design-tokens.json"
-
-    IF exists(consolidated_path):
-        token_sources[style_id] = {
-            "path": consolidated_path,
-            "quality": "consolidated",
-            "source": "consolidate command"
-        }
-        consolidated_count += 1
-        REPORT: "  ✓ Style-{style_id}: Using consolidated tokens (production-ready)"
-        CONTINUE
-
-    # Priority 2: Proposed tokens from style-cards.json
-    style_cards_path = "{base_path}/style-extraction/style-cards.json"
-
-    IF exists(style_cards_path):
-        style_cards_data = Read(style_cards_path)
-
-        IF style_id <= len(style_cards_data.style_cards):
-            variant_index = style_id - 1
-            variant = style_cards_data.style_cards[variant_index]
-            proposed_tokens = variant.proposed_tokens
-
-            # Create temp consolidation directory
-            temp_consolidation_dir = "{base_path}/style-consolidation/style-{style_id}"
-            Bash(mkdir -p "{temp_consolidation_dir}")
-
-            # Write proposed tokens (Fast Token Adaptation)
-            temp_tokens_path = "{temp_consolidation_dir}/design-tokens.json"
-            Write(temp_tokens_path, JSON.stringify(proposed_tokens, null, 2))
-
-            # Create simplified style guide
-            simple_guide_content = f"""# Design System: {variant.name}
-
-## Design Philosophy
-{variant.design_philosophy}
-
-## Description
-{variant.description}
-
-## Design Tokens
-Complete token specification in `design-tokens.json`.
-
-**Note**: Using proposed tokens from extraction phase (fast-track mode).
-For production-ready refinement, run `/workflow:ui-design:consolidate` first.
-"""
-
-            Write("{temp_consolidation_dir}/style-guide.md", simple_guide_content)
-
-            token_sources[style_id] = {
-                "path": temp_tokens_path,
-                "quality": "proposed",
-                "source": "extract command (fast adaptation)"
-            }
-            proposed_count += 1
-
-            REPORT: "  ✓ Style-{style_id}: Using proposed tokens (fast-track)"
-            REPORT: "     Source: {variant.name} from style-cards.json"
-            WARN: "     ⚠️ Tokens not refined - for production quality, run consolidate first"
-            CONTINUE
-        ELSE:
-            ERROR: "style-cards.json exists but does not contain variant {style_id}"
-            SUGGEST: "Reduce --style-variants to {len(style_cards_data.style_cards)} or run extract with more variants"
-            EXIT 1
-
-    # Priority 3: Error - no token source found
-    ERROR: "No token source found for style-{style_id}"
-    ERROR: "  Expected either:"
-    ERROR: "    1. {consolidated_path} (from /workflow:ui-design:consolidate)"
-    ERROR: "    2. {style_cards_path} (from /workflow:ui-design:extract)"
-    SUGGEST: "Run one of the following commands first:"
-    SUGGEST: "  - /workflow:ui-design:extract --base-path \"{base_path}\" --images \"refs/*.png\" --variants {style_variants}"
-    SUGGEST: "  - /workflow:ui-design:consolidate --base-path \"{base_path}\" --variants {style_variants}"
-    EXIT 1
-
-# Summary report
-REPORT: ""
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-REPORT: "📊 Token Source Summary:"
-REPORT: "  Total style variants: {style_variants}"
-REPORT: "  Consolidated (production-ready): {consolidated_count}/{style_variants}"
-REPORT: "  Proposed (fast-track): {proposed_count}/{style_variants}"
-
-IF proposed_count > 0:
-    REPORT: ""
-    REPORT: "💡 Production Quality Tip:"
-    REPORT: "   Fast-track mode is active for {proposed_count} style(s)."
-    REPORT: "   For production-ready quality with philosophy-driven refinement:"
-    REPORT: "   /workflow:ui-design:consolidate --base-path \"{base_path}\" --variants {style_variants}"
-
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-
-# Load design space analysis (if available)
-design_space_path = "{base_path}/style-extraction/design-space-analysis.json"
-IF exists(design_space_path):
-    design_space_analysis = Read(design_space_path)
-    REPORT: "📊 Loaded design space analysis with style attributes"
-ELSE:
-    design_space_analysis = null
-    REPORT: "ℹ️ No design space analysis found - will use basic style generation"
-
-STORE: token_sources, design_space_analysis, style_variants, layout_variants
-
-TodoWrite: Mark "Load style information" as completed, "Gather layout inspiration" as in_progress
 ```
 
-### Phase 2: Layout Inspiration Gathering
+**Output**: `base_path`, `target_list[]`, `target_type`, `device_type`, `style_variants`, `layout_variants`
 
+### Step 2: Detect Token Sources
 ```bash
-REPORT: "💡 Phase 2: Gathering layout inspiration for {len(target_list)} targets..."
+# Check consolidated (priority 1) or proposed (priority 2)
+bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "consolidated")
+# OR
+bash(test -f {base_path}/style-extraction/style-cards.json && echo "proposed")
 
-CREATE: {base_path}/prototypes/_inspirations/
+# If proposed: Create temp consolidation dirs + write tokens
+FOR style_id IN 1..style_variants:
+    bash(mkdir -p {base_path}/style-consolidation/style-{style_id})
+    Write({base_path}/style-consolidation/style-{style_id}/design-tokens.json, proposed_tokens)
 
-# For each target, gather layout inspiration via MCP search
+# Load design space analysis (optional)
+IF exists({base_path}/style-extraction/design-space-analysis.json):
+    design_space_analysis = Read({base_path}/style-extraction/design-space-analysis.json)
+```
+
+**Output**: `token_sources{}`, `consolidated_count`, `proposed_count`, `design_space_analysis`
+
+### Step 3: Gather Layout Inspiration
+```bash
+bash(mkdir -p {base_path}/prototypes/_inspirations)
+
+# For each target: Research via MCP
 FOR target IN target_list:
-    REPORT: "  Researching '{target}' ({target_type}) layout patterns..."
+    search_query = "{target} {target_type} layout patterns variations"
+    mcp__exa__web_search_exa(query=search_query, numResults=5)
 
-    # Construct search query based on prompt and target
-    search_query = f"common {target} {target_type} layout patterns variations best practices"
+    # Extract context from prompt for this target
+    target_requirements = extract_relevant_context_from_prompt(prompt_text, target)
 
-    # Use MCP web search for layout inspiration
-    search_results = mcp__exa__web_search_exa(
-        query=search_query,
-        numResults=5
-    )
-
-    # Generate inspiration content
-    inspiration_content = f"""Layout Inspiration for '{target}' ({target_type})
-Generated: {current_timestamp()}
-Search Query: {search_query}
-
-## User Requirements
-{extract_relevant_context_from_prompt(prompt_text, target)}
-
-## Layout Patterns Identified
-
-From web research, {layout_variants} distinct layout approaches:
-
-Layout 1: [First structural pattern identified from search]
-- Key characteristics: ...
-- Structure approach: ...
-
-Layout 2: [Second structural pattern]
-- Key characteristics: ...
-- Structure approach: ...
-
-Layout 3: [Third structural pattern]
-- Key characteristics: ...
-- Structure approach: ...
-
-## Reference Links
-{format_search_results_urls(search_results)}
-
-## Implementation Notes
-- Each layout should be STRUCTURALLY DIFFERENT (not just CSS variations)
-- Consider {target_type}-specific patterns (navigation, content areas, interactions)
-- Adapt structure based on design_attributes in Phase 3
-- Follow user requirements from prompt: {extract_relevant_requirements(prompt_text, target)}
-"""
-
-    # Write inspiration file
-    inspiration_file = f"{base_path}/prototypes/_inspirations/{target}-layout-ideas.txt"
-    Write(inspiration_file, inspiration_content)
-
-    REPORT: f"   ✓ Created: {target}-layout-ideas.txt"
-
-REPORT: f"✅ Phase 2 complete: Gathered inspiration for {len(target_list)} targets"
-
-TodoWrite: Mark "Gather layout inspiration" as completed, "Launch agents" as in_progress
+    # Write simple inspiration file
+    Write({base_path}/prototypes/_inspirations/{target}-layout-ideas.txt, inspiration_content)
 ```
 
-### Phase 3: Target-Style-Centric Batch Generation with Parallel Control
+**Output**: `T` inspiration text files
 
+## Phase 2: Target-Style-Centric Batch Generation (Agent)
+
+**Executor**: `Task(ui-design-agent)` × `T × S` tasks in **batched parallel** (max 6 concurrent)
+
+### Step 1: Calculate Batch Execution Plan
 ```bash
-REPORT: "🎨 Phase 3: Launching {len(target_list)}×{style_variants}={len(target_list) * style_variants} target-style agents..."
-REPORT: "   Each agent generates {layout_variants} layouts for one target × one style"
+bash(mkdir -p {base_path}/prototypes)
 
-CREATE: {base_path}/prototypes/
+# Build task list: T × S combinations
+MAX_PARALLEL = 6
+total_tasks = T × S
+total_batches = ceil(total_tasks / MAX_PARALLEL)
 
-# ===== PARALLEL EXECUTION CONTROL =====
-# Maximum concurrent agents: 6
-MAX_PARALLEL_AGENTS = 6
-
-# Build complete task list (T×S combinations)
-all_tasks = []
-FOR target IN target_list:
-    FOR style_id IN range(1, style_variants + 1):
-        all_tasks.append({
-            "target": target,
-            "style_id": style_id,
-            "task_id": f"{target}-style-{style_id}"
-        })
-
-total_tasks = len(all_tasks)
-total_batches = ceil(total_tasks / MAX_PARALLEL_AGENTS)
-
-REPORT: ""
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-REPORT: "📊 Batch Execution Plan:"
-REPORT: "  Total tasks: {total_tasks} (T={len(target_list)} × S={style_variants})"
-REPORT: "  Max parallel: {MAX_PARALLEL_AGENTS} agents"
-REPORT: "  Total batches: {total_batches}"
-REPORT: "  Tasks per batch: ~{min(MAX_PARALLEL_AGENTS, total_tasks)}"
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-REPORT: ""
-
-# Initialize TodoWrite with batch tracking
-batch_todos = []
-FOR batch_num IN range(1, total_batches + 1):
-    start_idx = (batch_num - 1) * MAX_PARALLEL_AGENTS
-    end_idx = min(batch_num * MAX_PARALLEL_AGENTS, total_tasks)
-    batch_size = end_idx - start_idx
-    batch_tasks = all_tasks[start_idx:end_idx]
-    task_ids = [task["task_id"] for task in batch_tasks]
-
-    batch_todos.append({
-        "content": f"Batch {batch_num}/{total_batches}: Generate {batch_size} target-style combinations ({', '.join(task_ids[:3])}{'...' if batch_size > 3 else ''})",
-        "status": "pending" if batch_num > 1 else "in_progress",
-        "activeForm": f"Generating batch {batch_num}/{total_batches} ({batch_size} tasks)"
-    })
-
-TodoWrite({todos: batch_todos})
-
-# ===== BATCH EXECUTION LOOP =====
-FOR batch_num IN range(1, total_batches + 1):
-    start_idx = (batch_num - 1) * MAX_PARALLEL_AGENTS
-    end_idx = min(batch_num * MAX_PARALLEL_AGENTS, total_tasks)
-    batch_tasks = all_tasks[start_idx:end_idx]
-    batch_size = len(batch_tasks)
-
-    REPORT: ""
-    REPORT: f"━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-    REPORT: f"🚀 Starting Batch {batch_num}/{total_batches}"
-    REPORT: f"   Tasks: {start_idx + 1}-{end_idx} of {total_tasks}"
-    REPORT: f"   Parallel agents: {batch_size}"
-    REPORT: f"━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-
-    # Launch all tasks in this batch in parallel (single message with multiple Task calls)
-    FOR task_info IN batch_tasks:
-        target = task_info["target"]
-        style_id = task_info["style_id"]
-
-        # Load layout inspiration for this target
-        inspiration_path = f"{base_path}/prototypes/_inspirations/{target}-layout-ideas.txt"
-
-        # Load style-specific context
-        style_tokens_path = token_sources[style_id]["path"]
-        style_guide_path = f"{base_path}/style-consolidation/style-{style_id}/style-guide.md"
-
-        # Extract design attributes for this style (if available)
-        IF design_space_analysis AND style_id <= len(design_space_analysis.divergent_directions):
-            design_attributes = design_space_analysis.divergent_directions[style_id - 1]
-            philosophy_name = design_attributes.philosophy_name
-            attributes_summary = JSON.stringify({
-                density: design_attributes.design_attributes.density,
-                visual_weight: design_attributes.design_attributes.visual_weight,
-                formality: design_attributes.design_attributes.formality,
-                organic_vs_geometric: design_attributes.design_attributes.organic_vs_geometric,
-                innovation: design_attributes.design_attributes.innovation
-            })
-        ELSE:
-            design_attributes = null
-            philosophy_name = f"Style {style_id}"
-            attributes_summary = "No design attributes available"
-
-        # Extract relevant requirements from prompt for this target
-        target_requirements = extract_relevant_context_from_prompt(prompt_text, target)
-
-        REPORT: f"   → Launching: {target} × Style-{style_id} ({philosophy_name})"
-
-        Task(ui-design-agent): """
-          [TARGET_STYLE_UI_GENERATION_FROM_PROMPT]
-
-          ## 🎯 Mission
-          Generate {layout_variants} layout variants for: {target} × Style-{style_id} ({philosophy_name})
-          Output: {layout_variants × 2} files ({layout_variants} HTML + {layout_variants} CSS)
-
-          ## 📝 User Requirements (from prompt)
-          {target_requirements}
-
-          **Original Prompt**: {prompt_text}
-
-          ## 🎨 Style Context
-          PHILOSOPHY: {philosophy_name}
-          {IF design_attributes:
-          DESIGN_ATTRIBUTES: {attributes_summary}
-          Key impacts:
-          - density → DOM nesting depth, whitespace scale
-          - visual_weight → wrapper layers, border/shadow strength
-          - formality → semantic structure choices
-          - organic_vs_geometric → alignment, edge treatment
-          - innovation → layout adventurousness
-          }
-
-          ## 📂 Input Resources
-          **Design System**:
-          - Design Tokens (JSON): {style_tokens_path}
-          - Style Guide: {style_guide_path}
-
-          **Layout Inspiration**: {inspiration_path}
-          Contains {layout_variants} distinct structural patterns
-
-          **Target**: {target} ({target_type})
-
-          ## 🔄 Generation Steps (for each layout 1..{layout_variants})
-
-          **1. Understand User Requirements**
-          - Review original prompt: {prompt_text}
-          - Focus on requirements for: {target}
-          - Understand functional and visual expectations
-
-          **2. Read Inspiration**
-          - Load: {inspiration_path}
-          - Apply layout N pattern
-          - Adapt based on user requirements
-
-          **3. Read Design Tokens**
-          - Load: {style_tokens_path}
-          - Parse JSON structure and extract all design token values
-          - Understand token categories: colors, typography, spacing, shadows, borders, etc.
-
-          **4. Generate HTML Structure**
-          - Complete HTML5 document (<!DOCTYPE>, <html>, <head>, <body>)
-          - Semantic elements: <header>, <nav>, <main>, <section>, <article>, <footer>
-          - ARIA attributes: aria-label, role, aria-labelledby
-          - Responsive meta: <meta name="viewport" content="width=device-width, initial-scale=1">
-          - Include CSS reference: <link rel="stylesheet" href="{target}-style-{style_id}-layout-N.css">
-
-          {IF design_attributes:
-          **⚠️ Adapt DOM based on design_attributes:**
-          - density='spacious' → Flatter hierarchy
-          - density='compact' → Deeper nesting
-          - visual_weight='heavy' → Extra wrapper divs for layered effects
-          - visual_weight='minimal' → Direct structure, minimal wrappers
-          }
-
-          **5. Generate Self-Contained CSS**
-          ⚠️ Use design token values DIRECTLY - create complete, independent CSS
-
-          **Required Token Usage** (from design-tokens.json):
-          - Colors: Use color values for backgrounds, text, borders
-          - Typography: Use font-family, font-size, font-weight, line-height values
-          - Spacing: Use spacing scale for margins, padding, gaps
-          - Borders: Use border-radius, border-width values
-          - Shadows: Use box-shadow values
-          - Breakpoints: Use breakpoint values for @media queries
-
-          {IF design_attributes:
-          **Apply design_attributes to token selection:**
-          - density='spacious' → Select larger spacing tokens
-          - density='compact' → Select smaller spacing tokens
-          - visual_weight='heavy' → Use stronger shadows, add borders
-          - visual_weight='minimal' → Use subtle/no shadows
-          }
-
-          **CSS Structure**:
-          - Complete styling: colors, typography, layout, spacing, effects
-          - Responsive design: Mobile-first with breakpoint-based @media
-          - Self-contained: No external dependencies or var() references
-
-          **6. Write Files IMMEDIATELY**
-          - Output paths:
-            - HTML: {base_path}/prototypes/{target}-style-{style_id}-layout-N.html
-            - CSS: {base_path}/prototypes/{target}-style-{style_id}-layout-N.css
-          - Write after generating each layout (do NOT accumulate)
-          - Do NOT return content as text
-
-          ## ✅ Success Criteria
-          - [ ] Generated exactly {layout_variants × 2} files
-          - [ ] All HTML includes correct CSS file reference
-          - [ ] All CSS uses design token values directly (self-contained)
-          - [ ] HTML structure follows user requirements from prompt
-          - [ ] {IF design_attributes: 'HTML structure adapts to design_attributes' ELSE: 'HTML follows layout inspiration'}
-          - [ ] Layouts are structurally distinct (different grids/regions)
-          - [ ] Files written to filesystem (not returned as text)
-
-          ## 📋 Completion
-          Report: "✅ {target} × Style-{style_id} ({philosophy_name}): {layout_variants × 2} files created"
-        """
-
-    # Wait for batch completion
-    REPORT: ""
-    REPORT: f"⏳ Batch {batch_num}/{total_batches}: Waiting for {batch_size} agents to complete..."
-
-    # Update TodoWrite: Mark current batch as completed, next batch as in_progress
-    updated_todos = []
-    FOR i IN range(1, total_batches + 1):
-        IF i < batch_num:
-            updated_todos.append({**batch_todos[i-1], "status": "completed"})
-        ELSE IF i == batch_num:
-            updated_todos.append({**batch_todos[i-1], "status": "completed"})
-        ELSE IF i == batch_num + 1:
-            updated_todos.append({**batch_todos[i-1], "status": "in_progress"})
-        ELSE:
-            updated_todos.append({**batch_todos[i-1], "status": "pending"})
-
-    TodoWrite({todos: updated_todos})
-
-    REPORT: f"✅ Batch {batch_num}/{total_batches} complete"
-
-REPORT: ""
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-REPORT: "✅ All Batches Complete!"
-REPORT: f"   Total agents executed: {total_tasks}"
-REPORT: f"   Expected total files: {style_variants × layout_variants × len(target_list) × 2}"
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+# Initialize batch tracking
+TodoWrite({todos: [
+  {content: "Batch 1/{batches}: Generate 6 tasks", status: "in_progress"},
+  {content: "Batch 2/{batches}: Generate 6 tasks", status: "pending"},
+  ...
+]})
 ```
 
-### Phase 4: File Verification
+### Step 2: Launch Batched Agent Tasks
+For each batch (up to 6 parallel tasks):
+```javascript
+Task(ui-design-agent): `
+  [TARGET_STYLE_UI_GENERATION_FROM_PROMPT]
+  🎯 ONE component: {target} × Style-{style_id} ({philosophy_name})
+  Generate: {layout_variants} × 2 files (HTML + CSS per layout)
 
+  PROMPT CONTEXT: {target_requirements}  # Extracted from original prompt
+  TARGET: {target} | TYPE: {target_type} | STYLE: {style_id}/{style_variants}
+  BASE_PATH: {base_path}
+  DEVICE: {device_type}
+  ${design_attributes ? "DESIGN_ATTRIBUTES: " + JSON.stringify(design_attributes) : ""}
+
+  ## Reference
+  - Layout inspiration: Read("{base_path}/prototypes/_inspirations/{target}-layout-ideas.txt")
+  - Design tokens: Read("{base_path}/style-consolidation/style-{style_id}/design-tokens.json")
+    Parse ALL token values (colors, typography, spacing, borders, shadows, breakpoints)
+  ${design_attributes ? "- Adapt DOM to: density, visual_weight, formality, organic_vs_geometric" : ""}
+
+  ## Generation
+  For EACH layout (1 to {layout_variants}):
+
+  1. HTML: {base_path}/prototypes/{target}-style-{style_id}-layout-N.html
+     - Complete HTML5: <!DOCTYPE>, <head>, <body>
+     - CSS ref: <link href="{target}-style-{style_id}-layout-N.css">
+     - Semantic: <header>, <nav>, <main>, <footer>
+     - A11y: ARIA labels, landmarks, responsive meta
+     - Viewport: <meta name="viewport" content="width=device-width, initial-scale=1.0">
+     - Follow user requirements from prompt
+     ${design_attributes ? `
+     - DOM adaptation:
+       * density='spacious' → flatter hierarchy
+       * density='compact' → deeper nesting
+       * visual_weight='heavy' → extra wrappers
+       * visual_weight='minimal' → direct structure` : ""}
+     - Device-specific: Optimize for {device_type}
+
+  2. CSS: {base_path}/prototypes/{target}-style-{style_id}-layout-N.css
+     - Self-contained: Direct token VALUES (no var())
+     - Use tokens: colors, fonts, spacing, borders, shadows
+     - Device-optimized: {device_type} styles
+     ${device_type === 'responsive' ? '- Responsive: Mobile-first @media' : '- Fixed: ' + device_type}
+     ${design_attributes ? `
+     - Token selection: density → spacing, visual_weight → shadows` : ""}
+
+  ## Notes
+  - ✅ Token VALUES directly from design-tokens.json
+  - ✅ Follow prompt requirements for {target}
+  - ✅ Optimize for {device_type}
+  - ❌ NO var() refs, NO external deps
+  - Layouts structurally DISTINCT
+  - Write files IMMEDIATELY (per layout)
+  - CSS filename MUST match HTML <link href>
+`
+
+# After each batch completes
+TodoWrite: Mark batch completed, next batch in_progress
+```
+
+## Phase 3: Verify & Generate Previews
+
+### Step 1: Verify Generated Files
 ```bash
-REPORT: "📝 Phase 4: Verifying target-style generation..."
+# Count expected vs found
+bash(ls {base_path}/prototypes/{target}-style-*-layout-*.html | wc -l)
+# Expected: S × L × T × 2
 
-total_expected = style_variants × layout_variants × len(target_list) × 2
-total_found = 0
-
-FOR target IN target_list:
-    FOR style_id IN range(1, style_variants + 1):
-        agent_files_found = 0
-
-        FOR layout_id IN range(1, layout_variants + 1):
-            html_file = f"{target}-style-{style_id}-layout-{layout_id}.html"
-            css_file = f"{target}-style-{style_id}-layout-{layout_id}.css"
-
-            html_path = f"{base_path}/prototypes/{html_file}"
-            css_path = f"{base_path}/prototypes/{css_file}"
-
-            # Verify files exist
-            IF exists(html_path) AND exists(css_path):
-                # Validate content
-                html_content = Read(html_path)
-                css_content = Read(css_path)
-
-                # Basic validation
-                VALIDATE: "<!DOCTYPE html>" in html_content, f"Invalid HTML: {html_file}"
-                VALIDATE: f'href="{css_file}"' in html_content, f"Missing CSS reference in: {html_file}"
-                VALIDATE: len(css_content) > 100, f"CSS file too small: {css_file}"
-
-                agent_files_found += 2
-                total_found += 2
-
-                REPORT: f"   ✓ {html_file} + {css_file}"
-            ELSE:
-                ERROR: f"   ✗ Missing files: {target}-style-{style_id}-layout-{layout_id}.*"
-
-        REPORT: f"  {target} × style-{style_id}: {agent_files_found}/{layout_variants * 2} files verified"
-
-IF total_found == total_expected:
-    REPORT: f"✅ Phase 4 complete: Verified all {total_expected} files"
-ELSE:
-    ERROR: f"⚠️ Only {total_found}/{total_expected} files found - some agents may have failed"
-    ERROR: "Review agent output logs for errors"
-
-TodoWrite: Mark "Verify files" as completed, "Generate previews" as in_progress
+# Validate samples
+Read({base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html)
+# Check: <!DOCTYPE html>, correct CSS href, sufficient CSS length
 ```
 
-### Phase 5: Comparison File Generation
+**Output**: `S × L × T × 2` files verified
 
+### Step 2: Run Preview Generation Script
 ```bash
-REPORT: "🌐 Phase 5: Generating comparison files..."
-
-prototypes_dir = f"{base_path}/prototypes"
-
-# Use script to generate preview files (same as generate-v2.md)
-# - Auto-detects: S, L, T from file patterns
-# - Generates: compare.html, index.html, PREVIEW.md
-Bash(~/.claude/scripts/ui-generate-preview-v2.sh "{prototypes_dir}")
-
-# Verify preview files generated
-preview_files = [
-    f"{base_path}/prototypes/compare.html",
-    f"{base_path}/prototypes/index.html",
-    f"{base_path}/prototypes/PREVIEW.md"
-]
-
-all_present = True
-FOR file_path IN preview_files:
-    IF exists(file_path):
-        REPORT: f"   ✓ Generated: {basename(file_path)}"
-    ELSE:
-        WARN: f"   ✗ Missing: {basename(file_path)}"
-        all_present = False
-
-IF all_present:
-    REPORT: "✅ Phase 5 complete: All preview files generated"
-ELSE:
-    WARN: "⚠️ Some preview files missing - script may need attention"
-
-TodoWrite: Mark all todos as completed
+bash(~/.claude/scripts/ui-generate-preview.sh "{base_path}/prototypes")
 ```
 
-### Phase 6: Completion
+**Script generates**:
+- `compare.html` (interactive matrix)
+- `index.html` (navigation)
+- `PREVIEW.md` (instructions)
 
+### Step 3: Verify Preview Files
+```bash
+bash(ls {base_path}/prototypes/compare.html {base_path}/prototypes/index.html {base_path}/prototypes/PREVIEW.md)
+```
+
+**Output**: 3 preview files
+
+## Completion
+
+### Todo Update
 ```javascript
 TodoWrite({todos: [
-  {content: "Initialize and parse user prompt", status: "completed", activeForm: "Initializing"},
-  {content: "Load style information and validate token sources", status: "completed", activeForm: "Loading styles"},
-  {content: "Gather layout inspiration via MCP search", status: "completed", activeForm: "Gathering inspiration"},
-  {content: `Launch ${target_list.length}×${style_variants}=${target_list.length * style_variants} target-style agents`, status: "completed", activeForm: "Generating prototypes"},
-  {content: `Verify ${style_variants * layout_variants * target_list.length * 2} generated files`, status: "completed", activeForm: "Verifying files"},
-  {content: "Generate comparison files (compare.html, index.html)", status: "completed", activeForm: "Generating previews"}
+  {content: "Setup and parse prompt", status: "completed", activeForm: "Parsing prompt"},
+  {content: "Detect token sources", status: "completed", activeForm: "Loading design systems"},
+  {content: "Gather layout inspiration", status: "completed", activeForm: "Researching layouts"},
+  {content: "Batch 1/{batches}: Generate 6 tasks", status: "completed", activeForm: "Generating batch 1"},
+  ... (all batches completed)
+  {content: "Verify files & generate previews", status: "completed", activeForm: "Creating previews"}
 ]});
 ```
 
-**Completion Message**:
+### Output Message
 ```
-✅ Batch UI Generation Complete!
+✅ Prompt-driven batch UI generation complete!
 
-User Prompt: {prompt_text}
+Prompt: {prompt_text}
 
 Configuration:
 - Style Variants: {style_variants}
 - Layout Variants: {layout_variants}
-- Target Type: {target_type_icon} {target_type}
-- Targets: {', '.join(target_list)}
-- Total Prototypes: {style_variants * layout_variants * len(target_list)}
+- Target Type: {target_type}
+- Device Type: {device_type}
+- Targets: {target_list} ({T} targets)
+- Total Prototypes: {S × L × T}
 
-Agent Execution:
-✅ Target-style agents: T×S = {len(target_list)}×{style_variants} = {len(target_list) * style_variants} agents
-✅ Each agent handles: L = {layout_variants} layouts for one target
-✅ Component isolation: Tasks completely independent
+Batch Execution:
+- Total tasks: {T × S} (targets × styles)
+- Batches: {batches} (max 6 parallel per batch)
+- Agent scope: {L} layouts per target×style
+- Component isolation: Complete task independence
+- Device-specific: All layouts optimized for {device_type}
 
-Token Quality:
-✅ Token Quality: {consolidated_count} consolidated, {proposed_count} proposed
-{IF proposed_count > 0:
-   ℹ️ Fast-track mode active: {proposed_count} style(s) using proposed tokens
-   💡 For production quality: /workflow:ui-design:consolidate --base-path "{base_path}" --variants {style_variants}
-}
+Quality:
+- Style-aware: {design_space_analysis ? 'HTML adapts to design_attributes' : 'Standard structure'}
+- CSS: Self-contained (direct token values, no var())
+- Device-optimized: {device_type} layouts
+- Tokens: {consolidated_count} consolidated, {proposed_count} proposed
+{IF proposed_count > 0: '  💡 For production: /workflow:ui-design:consolidate'}
 
-Output Files:
-- Layout Inspirations: {len(target_list)} text files
-- HTML Prototypes: {style_variants * layout_variants * len(target_list)} files
-- CSS Files: {style_variants * layout_variants * len(target_list)} files
-- Preview Files: compare.html, index.html, PREVIEW.md
-
-Generated Structure:
-📂 {base_path}/prototypes/
-├── _inspirations/
-│   └── {target}-layout-ideas.txt ({len(target_list)} files)
-├── {target}-style-{s}-layout-{l}.html ({style_variants * layout_variants * len(target_list)} prototypes)
+Generated Files:
+{base_path}/prototypes/
+├── _inspirations/ ({T} text files)
+├── {target}-style-{s}-layout-{l}.html ({S×L×T} prototypes)
 ├── {target}-style-{s}-layout-{l}.css
-├── compare.html (interactive S×L×T matrix)
-├── index.html (quick navigation)
-└── PREVIEW.md (usage instructions)
+├── compare.html (interactive matrix)
+├── index.html (navigation)
+└── PREVIEW.md (instructions)
 
-🌐 Interactive Preview:
-1. Matrix View: Open {base_path}/prototypes/compare.html (recommended)
-2. Quick Index: Open {base_path}/prototypes/index.html
-3. Instructions: See {base_path}/prototypes/PREVIEW.md
+Preview:
+1. Open compare.html (recommended)
+2. Open index.html
+3. Read PREVIEW.md
 
-{IF design_space_analysis:
-🎨 Style-Aware Generation Active:
-Each style's prototypes use structure adapted to design_attributes
-}
+Next: /workflow:ui-design:update
+```
 
-Next Steps:
-- Review prototypes in compare.html
-- Select best combinations
-- Integrate with /workflow:ui-design:update (if using session)
+## Simple Bash Commands
 
-**Dynamic Values**: target_type_icon: "📄" for page, "🧩" for component
+### Path Operations
+```bash
+# Find design directory
+bash(find .workflow -type d -name "design-*" -printf "%T@ %p\n" | sort -nr | head -1 | cut -d' ' -f2)
+
+# Count style variants
+bash(ls {base_path}/style-consolidation/style-* -d | wc -l)
+
+# Check token sources
+bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "consolidated")
+bash(test -f {base_path}/style-extraction/style-cards.json && echo "proposed")
+```
+
+### Validation Commands
+```bash
+# Count generated files
+bash(ls {base_path}/prototypes/{target}-style-*-layout-*.html | wc -l)
+
+# Verify preview
+bash(test -f {base_path}/prototypes/compare.html && echo "exists")
+```
+
+### File Operations
+```bash
+# Create directories
+bash(mkdir -p {base_path}/prototypes/_inspirations)
+
+# Run preview script
+bash(~/.claude/scripts/ui-generate-preview.sh "{base_path}/prototypes")
 ```
 
 ## Output Structure
 
 ```
-{base_path}/prototypes/
-├── _inspirations/                                 # Layout inspiration
-│   └── {target}-layout-ideas.txt                 # Simple inspiration text
-├── {target}-style-{s}-layout-{l}.html            # Final prototypes (S×L×T)
-├── {target}-style-{s}-layout-{l}.css
-├── compare.html                                   # Interactive matrix
-├── index.html                                     # Navigation page
-└── PREVIEW.md                                     # Instructions
-
-{base_path}/style-consolidation/
-├── style-1/ (design-tokens.json, style-guide.md)
-├── style-2/ (same structure)
-└── style-{S}/ (same structure)
+{base_path}/
+├── prototypes/
+│   ├── _inspirations/
+│   │   └── {target}-layout-ideas.txt  # Layout inspiration
+│   ├── {target}-style-{s}-layout-{l}.html  # Final prototypes
+│   ├── {target}-style-{s}-layout-{l}.css
+│   ├── compare.html
+│   ├── index.html
+│   └── PREVIEW.md
+└── style-consolidation/
+    └── style-{s}/
+        ├── design-tokens.json
+        └── style-guide.md
 ```
 
 ## Error Handling
 
-### Pre-execution Checks
-- **No design systems found**: Error - Run extract or consolidate first
-- **Invalid target names**: Warn and filter invalid targets
-- **Missing prompt**: Error - Prompt is required for this command
-- **No valid targets extracted**: Error with suggestion to use --targets explicitly
+### Common Errors
+```
+ERROR: No token sources found
+→ Run /workflow:ui-design:extract or /workflow:ui-design:consolidate
 
-### Phase-Specific Errors
-- **Token source not found**: Error with suggestions to run extract or consolidate
-- **MCP search failure**: Retry with fallback query, continue with basic inspiration
-- **Agent execution errors**: Report which target × style agent failed
-- **File verification failure**: List missing files and suggest re-run
+ERROR: No targets extracted from prompt
+→ Use --targets explicitly or rephrase prompt
+
+ERROR: MCP search failed
+→ Check network, retry
+
+ERROR: Batch {N} agent tasks failed
+→ Check agent output, retry specific target×style combinations
+
+ERROR: Script permission denied
+→ chmod +x ~/.claude/scripts/ui-generate-preview.sh
+```
 
 ### Recovery Strategies
-- **Partial generation**: If some agents succeed, you still have those prototypes
-- **Re-run specific combination**: Can target failed combinations specifically
-- **Missing design_attributes**: Generation works without them - just less style-aware
+- **Partial success**: Keep successful target×style combinations
+- **Missing design_attributes**: Works without (less style-aware)
+- **Invalid tokens**: Validate design-tokens.json structure
+- **Failed batch**: Re-run command, only failed combinations will retry
+
+## Quality Checklist
+
+- [ ] Prompt clearly describes targets
+- [ ] CSS uses direct token values (no var())
+- [ ] HTML adapts to design_attributes (if available)
+- [ ] Semantic HTML5 structure
+- [ ] ARIA attributes present
+- [ ] Device-optimized layouts
+- [ ] Layouts structurally distinct
+- [ ] compare.html works
 
 ## Key Features
 
-1. **🎯 Prompt-Driven**: User describes what to build, command handles the rest
-2. **🔍 Smart Discovery**: Auto-detects available styles and tokens
-3. **🚀 Target-Style-Centric**: Each agent handles L layouts for one target × one style
-4. **🎨 Style-Aware**: HTML adapts based on design_attributes (if available)
-5. **💡 Layout Inspiration**: MCP-powered research for each target
-6. **⚡ Component Isolation**: Tasks completely independent
-7. **🌐 Interactive Preview**: Full-featured compare.html matrix view
-8. **✅ Production-Ready**: Semantic HTML5, ARIA, responsive design
+- **Prompt-Driven**: Describe what to build, command extracts targets
+- **Target-Style-Centric**: `T×S` agents, each handles `L` layouts
+- **Parallel Batching**: Max 6 concurrent agents with progress tracking
+- **Component Isolation**: Complete task independence
+- **Style-Aware**: HTML adapts to design_attributes
+- **Self-Contained CSS**: Direct token values (no var())
+- **Device-Specific**: Optimized for desktop/mobile/tablet/responsive
+- **Inspiration-Based**: MCP-powered layout research
+- **Production-Ready**: Semantic, accessible, responsive
 
-## Integration Points
+## Integration
 
-- **Input**: Prompt + existing style information (consolidated or proposed)
-- **Output**: S×L×T HTML/CSS prototypes with comparison UI
-- **Compatible With**: extract, consolidate, explore-auto, imitate-auto outputs
-- **Session Integration**: Works with workflow session brainstorming
+**Input**: Prompt, design-tokens.json, design-space-analysis.json (optional)
+**Output**: S×L×T prototypes for `/workflow:ui-design:update`
+**Compatible**: extract, consolidate, explore-auto, imitate-auto outputs
 
-## Example Usage
+## Usage Examples
 
-### Example 1: From Prompt with Auto-Detection
-```bash
-/workflow:ui-design:batch-generate --prompt "Create modern dashboard with metric cards and charts"
-
-# Auto-detects:
-# - Latest design run
-# - Available styles (3 consolidated styles found)
-# - Targets from prompt: ["dashboard"]
-# - Target type: page
-
-# Execution:
-# - Total tasks: 3 (T=1 × S=3)
-# - Batch plan: 1 batch with 3 parallel agents
-# - Output: 3 styles × 3 layouts × 1 target = 9 prototypes
-```
-
-### Example 2: Explicit Targets (Single Batch)
+### Basic: Auto-detection
 ```bash
 /workflow:ui-design:batch-generate \
-  --prompt "Build authentication flow" \
-  --targets "login,signup,reset-password" \
+  --prompt "Dashboard with metric cards and charts"
+
+# Auto: latest design run, extracts "dashboard" target
+# Output: S × L × 1 prototypes
+```
+
+### With Session
+```bash
+/workflow:ui-design:batch-generate \
+  --prompt "Auth pages: login, signup, password reset" \
   --session WFS-auth
 
-# Uses session's latest design run
-# Execution:
-# - Total tasks: 9 (T=3 × S=3)
-# - Batch plan: 2 batches
-#   - Batch 1: 6 parallel agents (login-style-1..3, signup-style-1..2)
-#   - Batch 2: 3 parallel agents (signup-style-3, reset-password-style-1..2)
-# - Output: 3 styles × 3 layouts × 3 targets = 27 prototypes
+# Uses WFS-auth's design run
+# Extracts: ["login", "signup", "password-reset"]
+# Batches: 2 (if S=3: 9 tasks = 6+3)
+# Output: S × L × 3 prototypes
 ```
 
-### Example 3: Component Generation (Multiple Batches)
+### Components with Device Type
 ```bash
 /workflow:ui-design:batch-generate \
-  --prompt "Create reusable UI components" \
-  --targets "navbar,hero,footer,card" \
-  --target-type "component" \
-  --layout-variants 2
+  --prompt "Mobile UI components: navbar, card, footer" \
+  --target-type component \
+  --device-type mobile
 
-# Execution:
-# - Total tasks: 12 (T=4 × S=3)
-# - Batch plan: 2 batches
-#   - Batch 1: 6 parallel agents (navbar, hero, footer × style-1..2)
-#   - Batch 2: 6 parallel agents (card × style-1..3, navbar × style-3...)
-# - Output: 3 styles × 2 layouts × 4 components = 24 prototypes
+# Mobile-optimized component generation
+# Output: S × L × 3 prototypes
 ```
 
-### Example 4: Large Scale Generation (Multiple Batches)
+### Large Scale (Multi-batch)
 ```bash
 /workflow:ui-design:batch-generate \
-  --prompt "Build complete e-commerce site" \
-  --targets "home,shop,product,cart,checkout,account,orders" \
-  --base-path ".workflow/.design/run-20250110-120000" \
+  --prompt "E-commerce site" \
+  --targets "home,shop,product,cart,checkout" \
   --style-variants 4 \
   --layout-variants 2
 
-# Uses specific design run with 4 styles
-# Execution:
-# - Total tasks: 28 (T=7 × S=4)
-# - Batch plan: 5 batches (max 6 parallel per batch)
-#   - Batch 1/5: 6 parallel agents (home-style-1..4, shop-style-1..2)
-#   - Batch 2/5: 6 parallel agents (shop-style-3..4, product-style-1..4)
-#   - Batch 3/5: 6 parallel agents (cart-style-1..4, checkout-style-1..2)
-#   - Batch 4/5: 6 parallel agents (checkout-style-3..4, account-style-1..4)
-#   - Batch 5/5: 4 parallel agents (orders-style-1..4)
-# - Output: 4 styles × 2 layouts × 7 pages = 56 prototypes
-#
-# TodoWrite tracking shows:
-# ✓ Batch 1/5: Generate 6 target-style combinations (home-style-1, home-style-2, home-style-3...)
-# ✓ Batch 2/5: Generate 6 target-style combinations (shop-style-3, shop-style-4, product-style-1...)
-# → Batch 3/5: Generate 6 target-style combinations (cart-style-1, cart-style-2, cart-style-3...)
-# ⏳ Batch 4/5: Generate 6 target-style combinations (checkout-style-3, checkout-style-4...)
-# ⏳ Batch 5/5: Generate 4 target-style combinations (orders-style-1, orders-style-2...)
+# Tasks: 5 × 4 = 20 (4 batches: 6+6+6+2)
+# Output: 4 × 2 × 5 = 40 prototypes
 ```
 
-### Example 5: Small Task (No Batching)
-```bash
-/workflow:ui-design:batch-generate \
-  --prompt "E-commerce product listing page" \
-  --base-path ".workflow/.design/run-20250110-120000" \
-  --style-variants 2 \
-  --layout-variants 3
+## Helper Functions Reference
 
-# Uses specific design run
-# Execution:
-# - Total tasks: 2 (T=1 × S=2)
-# - Batch plan: 1 batch with 2 parallel agents
-# - Output: 2 styles × 3 layouts × 1 target = 6 prototypes
-```
-
-## Helper Functions
-
-### extract_targets_from_prompt(prompt_text)
+### Target Extraction
 ```python
-def extract_targets_from_prompt(prompt_text):
-    """Extract target names from user prompt using pattern matching."""
+# extract_targets_from_prompt(prompt_text)
+# Patterns: "Create X and Y", "Generate X, Y, Z pages", "Build X"
+# Returns: ["x", "y", "z"] (normalized lowercase with hyphens)
 
-    # Common patterns:
-    # "Create X and Y" → [X, Y]
-    # "Generate X, Y, and Z pages" → [X, Y, Z]
-    # "Build X for users" → [X]
+# detect_target_type(target_list)
+# Keywords: page (home, dashboard, login) vs component (navbar, card, button)
+# Returns: "page" or "component"
 
-    patterns = [
-        r"(?:create|generate|build|design)\s+([a-z0-9_-]+(?:\s*,\s*[a-z0-9_-]+)*)",
-        r"([a-z0-9_-]+(?:\s*and\s*[a-z0-9_-]+)+)",
-        r"([a-z0-9_-]+)\s+(?:page|component|screen|view)"
-    ]
-
-    for pattern in patterns:
-        matches = regex.findall(pattern, prompt_text.lower())
-        if matches:
-            # Clean and split
-            targets = []
-            for match in matches:
-                targets.extend([t.strip() for t in re.split(r'[,;、and]', match)])
-            return [normalize_target_name(t) for t in targets if t]
-
-    return []
-
-def normalize_target_name(name):
-    """Normalize target name to valid format."""
-    return name.strip().lower().replace(' ', '-').replace('_', '-')
-
-def detect_target_type(target_list):
-    """Auto-detect whether targets are pages or components."""
-    page_keywords = ["home", "dashboard", "settings", "profile", "login",
-                     "signup", "auth", "pricing", "about", "contact", "landing"]
-    component_keywords = ["navbar", "header", "footer", "hero", "card",
-                         "button", "form", "modal", "alert", "dropdown", "menu"]
-
-    page_matches = sum(1 for t in target_list if any(k in t for k in page_keywords))
-    component_matches = sum(1 for t in target_list if any(k in t for k in component_keywords))
-
-    return "component" if component_matches > page_matches else "page"
-
-def extract_relevant_context_from_prompt(prompt_text, target):
-    """Extract requirements relevant to specific target from prompt."""
-    # Simple sentence extraction based on target mention
-    sentences = prompt_text.split('.')
-    relevant = [s.strip() for s in sentences if target.lower() in s.lower()]
-
-    if relevant:
-        return '\n'.join(relevant)
-    else:
-        # Return full prompt if no specific mention
-        return prompt_text
+# extract_relevant_context_from_prompt(prompt_text, target)
+# Extracts sentences mentioning specific target
+# Returns: Relevant context string
 ```
 
 ## Batch Execution Details
 
 ### Parallel Control
+- **Max concurrent**: 6 agents per batch
+- **Task distribution**: T × S tasks = ceil(T×S/6) batches
+- **Progress tracking**: TodoWrite per-batch status
+- **Examples**:
+  - 3 tasks → 1 batch
+  - 9 tasks → 2 batches (6+3)
+  - 20 tasks → 4 batches (6+6+6+2)
 
-**Maximum Concurrent Agents**: 6 (hardcoded `MAX_PARALLEL_AGENTS`)
-
-**Why 6?**
-- Balances throughput with resource constraints
-- Prevents overwhelming the system with too many parallel tasks
-- Allows for reliable progress tracking with TodoWrite
-- Optimal for most hardware configurations
-
-**Task Distribution**:
-```
-Total Tasks (N) = Targets (T) × Style Variants (S)
-Total Batches (B) = ceil(N / 6)
-
-Examples:
-- N=3  → B=1 (single batch: 3 parallel agents)
-- N=9  → B=2 (batch 1: 6 agents, batch 2: 3 agents)
-- N=18 → B=3 (batch 1: 6, batch 2: 6, batch 3: 6)
-- N=28 → B=5 (batches of 6, 6, 6, 6, 4)
-```
-
-### TodoWrite Progress Tracking
-
-Each batch is tracked as a separate todo item:
-
-**Initial State** (for 28 tasks across 5 batches):
-```javascript
-[
-  {content: "Batch 1/5: Generate 6 target-style combinations", status: "in_progress"},
-  {content: "Batch 2/5: Generate 6 target-style combinations", status: "pending"},
-  {content: "Batch 3/5: Generate 6 target-style combinations", status: "pending"},
-  {content: "Batch 4/5: Generate 6 target-style combinations", status: "pending"},
-  {content: "Batch 5/5: Generate 4 target-style combinations", status: "pending"}
-]
-```
-
-**After Batch 1 completes**:
-```javascript
-[
-  {content: "Batch 1/5: Generate 6 target-style combinations", status: "completed"},
-  {content: "Batch 2/5: Generate 6 target-style combinations", status: "in_progress"},
-  {content: "Batch 3/5: Generate 6 target-style combinations", status: "pending"},
-  // ...
-]
-```
-
-**Benefits**:
-- Clear visibility of overall progress
-- Easy to understand current execution state
-- Helps estimate remaining time
-- Allows for graceful interruption and resumption
-
-### Performance Characteristics
-
-**Execution Time Estimates** (approximate):
-
-| Tasks | Batches | Est. Time | Parallel Efficiency |
-|-------|---------|-----------|---------------------|
-| 1-6   | 1       | 3-5 min   | 100% (no batching)  |
-| 7-12  | 2       | 6-10 min  | ~85% (1 batch wait) |
-| 13-18 | 3       | 9-15 min  | ~80% (2 batch waits)|
-| 19-30 | 4-5     | 12-25 min | ~75% (3-4 waits)    |
-
-**Factors affecting speed**:
-- Layout variants per task (L): More layouts = longer per-task time
-- Token quality: Consolidated tokens → better but slightly slower generation
-- MCP search: Network latency for layout inspiration gathering
-- Design attributes: Style-aware generation adds complexity
+### Performance
+| Tasks | Batches | Est. Time | Efficiency |
+|-------|---------|-----------|------------|
+| 1-6   | 1       | 3-5 min   | 100%       |
+| 7-12  | 2       | 6-10 min  | ~85%       |
+| 13-18 | 3       | 9-15 min  | ~80%       |
+| 19-30 | 4-5     | 12-25 min | ~75%       |
 
 ### Optimization Tips
-
-**1. Reduce Total Tasks**:
-```bash
-# Instead of: 5 targets × 4 styles = 20 tasks (4 batches)
---targets "home,shop,product,cart,checkout" --style-variants 4
-
-# Consider: 3 targets × 3 styles = 9 tasks (2 batches)
---targets "home,shop,product" --style-variants 3
-```
-
-**2. Adjust Layout Variants**:
-```bash
-# High exploration (slower): L=3 layouts per task
---layout-variants 3
-
-# Faster iteration: L=2 layouts per task
---layout-variants 2
-
-# Rapid prototyping: L=1 layout per task
---layout-variants 1
-```
-
-**3. Staged Generation**:
-```bash
-# Stage 1: Core pages first
-/workflow:ui-design:batch-generate \
-  --prompt "E-commerce core" \
-  --targets "home,shop,product" \
-  --style-variants 3
-
-# Stage 2: Additional pages later
-/workflow:ui-design:batch-generate \
-  --prompt "E-commerce secondary" \
-  --targets "cart,checkout,account" \
-  --style-variants 3 \
-  --base-path ".workflow/.design/run-20250110-120000"  # Same design run
-```
+1. **Reduce tasks**: Fewer targets or styles
+2. **Adjust layouts**: L=2 instead of L=3 for faster iteration
+3. **Stage generation**: Core pages first, secondary pages later
 
 ## Notes
 
-- **Prompt Quality**: Better prompts lead to better target extraction and generation
-- **Token Sources**: Works with both consolidated (production) and proposed (fast-track) tokens
-- **Layout Variants**: More variants = more diversity but longer generation time
-- **Style Variants**: Limited by available styles in base path
-- **Parallel Execution**: Automatic batching with max 6 concurrent agents
-- **Progress Tracking**: TodoWrite shows batch-by-batch progress
-- **Scalability**: Tested up to 30+ tasks (5+ batches) with reliable execution
-- **MCP Dependency**: Requires MCP web search for layout inspiration gathering
-- **Script Dependency**: Requires `~/.claude/scripts/ui-generate-preview-v2.sh` for preview generation
+- **Prompt quality**: Clear descriptions improve target extraction
+- **Token sources**: Consolidated (production) or proposed (fast-track)
+- **Batch parallelism**: Max 6 concurrent for stability
+- **Scalability**: Tested up to 30+ tasks (5+ batches)
+- **Dependencies**: MCP web search, ui-generate-preview.sh script
diff --git a/.claude/commands/workflow/ui-design/capture.md b/.claude/commands/workflow/ui-design/capture.md
index 5e1e3562..e3f9b8c3 100644
--- a/.claude/commands/workflow/ui-design/capture.md
+++ b/.claude/commands/workflow/ui-design/capture.md
@@ -2,532 +2,323 @@
 name: capture
 description: Batch screenshot capture for UI design workflows using MCP or local fallback
 usage: /workflow:ui-design:capture --url-map "<map>" [--base-path <path>] [--session <id>]
+argument-hint: --url-map "target:url,..." [--base-path path] [--session id]
 examples:
   - /workflow:ui-design:capture --url-map "home:https://linear.app, pricing:https://linear.app/pricing"
   - /workflow:ui-design:capture --session WFS-auth --url-map "dashboard:https://app.com/dash"
   - /workflow:ui-design:capture --base-path ".workflow/.design/run-20250110" --url-map "hero:https://example.com#hero"
-allowed-tools: TodoWrite(*), Read(*), Write(*), Bash(*), Glob(*), mcp__browser__screenshot(*)
+allowed-tools: TodoWrite(*), Read(*), Write(*), Bash(*), Glob(*), ListMcpResourcesTool(*), mcp__chrome-devtools__*, mcp__playwright__*
 ---
 
-# Batch Screenshot Capture Command
+# Batch Screenshot Capture (/workflow:ui-design:capture)
 
 ## Overview
-独立的批量截图命令，支持MCP优先策略和多级降级机制。可被其他工作流复用。
+Batch screenshot tool with MCP-first strategy and multi-tier fallback. Processes multiple URLs in parallel.
 
-## Core Philosophy
-- **MCP优先**：优先使用mcp__browser__screenshot（如果可用）
-- **智能降级**：MCP失败 → Playwright → Chrome → 手动上传
-- **批量处理**：一次处理多个URL，并行截图
-- **结构化输出**：按target_name组织截图文件
-- **错误容忍**：部分失败不阻塞整体流程
+**Strategy**: MCP → Playwright → Chrome → Manual
+**Output**: Flat structure `screenshots/{target}.png`
 
-## Execution Protocol
-
-### Phase 0: 初始化和路径解析
+## Phase 1: Initialize & Parse
 
+### Step 1: Determine Base Path
 ```bash
-# 确定base path
-IF --base-path:
-    base_path = {provided_base_path}
-ELSE IF --session:
-    # 查找session最新design run
-    session_design_dirs = Glob(".workflow/WFS-{session}/design-*")
-    IF session_design_dirs:
-        base_path = most_recent(session_design_dirs)
-    ELSE:
-        # 创建新的design run
-        run_id = "run-$(date +%Y%m%d-%H%M%S)"
-        base_path = ".workflow/WFS-{session}/design-{run_id}"
-ELSE:
-    # Standalone模式
-    run_id = "run-$(date +%Y%m%d-%H%M%S)"
-    base_path = ".workflow/.design/{run_id}"
+# Priority: --base-path > session > standalone
+bash(if [ -n "$BASE_PATH" ]; then
+  echo "$BASE_PATH"
+elif [ -n "$SESSION_ID" ]; then
+  find .workflow/WFS-$SESSION_ID/design-* -type d | head -1 || \
+  echo ".workflow/WFS-$SESSION_ID/design-run-$(date +%Y%m%d-%H%M%S)"
+else
+  echo ".workflow/.design/run-$(date +%Y%m%d-%H%M%S)"
+fi)
 
-# 创建截图目录
-screenshot_dir = "{base_path}/screenshots"
-Bash(mkdir -p "{screenshot_dir}")
+bash(mkdir -p $BASE_PATH/screenshots)
+```
 
-REPORT: "📸 Batch Screenshot Capture"
-REPORT: "   Output: {screenshot_dir}/"
-
-# 解析url-map
-url_map_string = {--url-map}  # "home:https://a.com, pricing:https://a.com/pricing"
-
-# 解析逻辑
+### Step 2: Parse URL Map
+```javascript
+// Input: "home:https://linear.app, pricing:https://linear.app/pricing"
 url_entries = []
-FOR pair IN split(url_map_string, ","):
-    pair = pair.strip()
-    IF ":" NOT IN pair:
-        ERROR: "Invalid url-map format: '{pair}'"
-        ERROR: "Expected format: 'target:url'"
-        ERROR: "Example: 'home:https://example.com, pricing:https://example.com/pricing'"
-        EXIT 1
 
-    target, url = pair.split(":", 1)
-    target = target.strip().lower().replace(" ", "-")
-    url = url.strip()
+FOR pair IN split(params["--url-map"], ","):
+  parts = pair.split(":", 1)
 
-    # 验证target名称
-    IF NOT regex_match(target, r"^[a-z0-9][a-z0-9_-]*$"):
-        ERROR: "Invalid target name: '{target}'"
-        ERROR: "Target names must start with alphanumeric and contain only [a-z0-9_-]"
-        EXIT 1
+  IF len(parts) != 2:
+    ERROR: "Invalid format: {pair}. Expected: 'target:url'"
+    EXIT 1
 
-    # 验证URL格式
-    IF NOT (url.startswith("http://") OR url.startswith("https://")):
-        WARN: "URL '{url}' does not start with http:// or https://"
-        WARN: "Prepending https:// automatically"
-        url = f"https://{url}"
+  target = parts[0].strip().lower().replace(" ", "-")
+  url = parts[1].strip()
 
-    url_entries.append({"target": target, "url": url})
+  // Validate target name
+  IF NOT regex_match(target, r"^[a-z0-9][a-z0-9_-]*$"):
+    ERROR: "Invalid target: {target}"
+    EXIT 1
 
-VALIDATE: len(url_entries) > 0, "url-map must contain at least one target:url pair"
+  // Add https:// if missing
+  IF NOT url.startswith("http"):
+    url = f"https://{url}"
 
-total_targets = len(url_entries)
-REPORT: "   Targets: {total_targets}"
-FOR entry IN url_entries:
-    REPORT: "     • {entry.target}: {entry.url}"
+  url_entries.append({target, url})
+```
 
+**Output**: `base_path`, `url_entries[]`
+
+### Step 3: Initialize Todos
+```javascript
 TodoWrite({todos: [
-  {content: "Initialize and parse url-map", status: "completed", activeForm: "Initializing"},
-  {content: "MCP batch screenshot capture", status: "pending", activeForm: "Capturing via MCP"},
-  {content: "Local tool fallback (if needed)", status: "pending", activeForm: "Local fallback"},
-  {content: "Verify and summarize results", status: "pending", activeForm: "Verifying"}
+  {content: "Parse url-map", status: "completed", activeForm: "Parsing"},
+  {content: "Detect MCP tools", status: "in_progress", activeForm: "Detecting"},
+  {content: "Capture screenshots", status: "pending", activeForm: "Capturing"},
+  {content: "Verify results", status: "pending", activeForm: "Verifying"}
 ]})
 ```
 
-### Phase 1: MCP批量截图（优先策略）
+## Phase 2: Detect Screenshot Tools
 
-```bash
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-REPORT: "🚀 Phase 1: MCP Batch Screenshot"
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+### Step 1: Check MCP Availability
+```javascript
+// List available MCP servers
+all_resources = ListMcpResourcesTool()
+available_servers = unique([r.server for r in all_resources])
 
-# 检测MCP工具可用性
-mcp_available = check_tool_availability("mcp__browser__screenshot")
+// Check Chrome DevTools MCP
+chrome_devtools = "chrome-devtools" IN available_servers
+chrome_screenshot = check_tool_exists("mcp__chrome-devtools__take_screenshot")
 
-success_captures = []
-failed_captures = []
-
-IF mcp_available:
-    REPORT: "✓ MCP browser screenshot tool detected"
-
-    # 构建MCP调用参数
-    urls = [entry.url for entry in url_entries]
-    file_prefixes = [entry.target for entry in url_entries]
-
-    TRY:
-        # MCP批量截图调用
-        REPORT: "   Calling MCP for {len(urls)} URLs..."
-
-        result = mcp__browser__screenshot({
-            urls: urls,
-            output_dir: screenshot_dir,
-            file_prefix: file_prefixes,
-            full_page: true,
-            viewport: "1920,1080",
-            timeout: 30000
-        })
-
-        # 处理MCP返回结果
-        success_count = len(result.success)
-        failed_count = len(result.failed)
-
-        REPORT: "   MCP capture complete: {success_count} succeeded, {failed_count} failed"
-
-        FOR item IN result.success:
-            success_captures.append(item.target)
-            REPORT: "     ✓ {item.target}.png"
-
-        FOR item IN result.failed:
-            failed_captures.append({"target": item.target, "url": item.url, "error": item.error})
-            REPORT: "     ✗ {item.target}: {item.error}"
-
-        # 如果有部分失败，标记需要fallback
-        IF failed_count > 0:
-            failed_targets = [item.target for item in result.failed]
-            REPORT: "   → {failed_count} failed, proceeding to local fallback..."
-            TodoWrite(mark_completed: "MCP batch screenshot capture", mark_in_progress: "Local tool fallback")
-            GOTO Phase 2 (fallback_targets = failed_targets)
-        ELSE:
-            REPORT: "✅ All screenshots captured via MCP"
-            TodoWrite(mark_completed: "MCP batch screenshot capture", mark_completed: "Local tool fallback", mark_in_progress: "Verify results")
-            GOTO Phase 3 (verification)
-
-    CATCH error:
-        REPORT: "⚠️ MCP call failed: {error}"
-        REPORT: "   Falling back to local tools for all targets"
-        failed_targets = [entry.target for entry in url_entries]
-        TodoWrite(mark_completed: "MCP batch screenshot capture", mark_in_progress: "Local tool fallback")
-        GOTO Phase 2 (fallback_targets = failed_targets)
+// Check Playwright MCP
+playwright_mcp = "playwright" IN available_servers
+playwright_screenshot = check_tool_exists("mcp__playwright__screenshot")
 
+// Determine primary tool
+IF chrome_devtools AND chrome_screenshot:
+  tool = "chrome-devtools"
+ELSE IF playwright_mcp AND playwright_screenshot:
+  tool = "playwright"
 ELSE:
-    REPORT: "ℹ️ MCP browser screenshot tool not available"
-    REPORT: "   Using local tool fallback strategy"
-    failed_targets = [entry.target for entry in url_entries]
-    TodoWrite(mark_completed: "MCP batch screenshot capture", mark_in_progress: "Local tool fallback")
-    GOTO Phase 2 (fallback_targets = failed_targets)
+  tool = null
 ```
 
-### Phase 2: Local工具降级（Playwright → Chrome）
+**Output**: `tool` (chrome-devtools | playwright | null)
 
+### Step 2: Check Local Fallback
 ```bash
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-REPORT: "🔧 Phase 2: Local Tool Fallback"
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-
-# 仅处理Phase 1失败的targets
-targets_to_capture = [entry for entry in url_entries if entry.target IN fallback_targets]
-
-REPORT: "Processing {len(targets_to_capture)} target(s) with local tools..."
-
-# 检测本地工具（检查可执行文件，不触发安装）
-playwright_path = Bash(which playwright 2>/dev/null || echo "")
-chrome_path = Bash(which google-chrome 2>/dev/null || which chrome 2>/dev/null || which chromium 2>/dev/null || echo "")
-
-playwright_available = playwright_path != ""
-chrome_available = chrome_path != ""
-
-REPORT: "   Tool availability:"
-REPORT: "     Playwright: {playwright_available ? '✓ Available' : '✗ Not found'}"
-REPORT: "     Chrome: {chrome_available ? '✓ Available' : '✗ Not found'}"
-
-local_success = []
-local_failed = []
-
-FOR entry IN targets_to_capture:
-    target = entry.target
-    url = entry.url
-    output_file = "{screenshot_dir}/{target}.png"
-    captured = false
-    method_used = null
-
-    # 尝试Playwright
-    IF playwright_available AND NOT captured:
-        TRY:
-            REPORT: "   Trying Playwright for '{target}'..."
-            Bash({playwright_path} screenshot "{url}" "{output_file}" --full-page --timeout 30000)
-
-            IF exists(output_file) AND file_size(output_file) > 1000:  # >1KB验证有效
-                captured = true
-                method_used = "Playwright"
-                local_success.append(target)
-                success_captures.append(target)
-                REPORT: "     ✓ {target}.png (Playwright, {file_size(output_file)/1024:.1f} KB)"
-        CATCH error:
-            REPORT: "     ⚠️ Playwright failed: {error}"
-
-    # 尝试Chrome
-    IF chrome_available AND NOT captured:
-        TRY:
-            REPORT: "   Trying Chrome for '{target}'..."
-            Bash({chrome_path} --headless --disable-gpu --screenshot="{output_file}" --window-size=1920,1080 "{url}")
-
-            IF exists(output_file) AND file_size(output_file) > 1000:
-                captured = true
-                method_used = "Chrome"
-                local_success.append(target)
-                success_captures.append(target)
-                REPORT: "     ✓ {target}.png (Chrome, {file_size(output_file)/1024:.1f} KB)"
-        CATCH error:
-            REPORT: "     ⚠️ Chrome failed: {error}"
-
-    # 标记彻底失败
-    IF NOT captured:
-        local_failed.append(entry)
-        failed_captures.append({"target": target, "url": url, "error": "All local tools failed"})
-        REPORT: "     ✗ {target}: All tools failed"
-
-REPORT: ""
-REPORT: "Local fallback summary:"
-REPORT: "   Succeeded: {len(local_success)}/{len(targets_to_capture)}"
-REPORT: "   Failed: {len(local_failed)}/{len(targets_to_capture)}"
-
-# 如果仍有失败，进入手动模式
-IF len(local_failed) > 0:
-    TodoWrite(mark_completed: "Local tool fallback", mark_in_progress: "Manual upload mode")
-    GOTO Phase 2.5 (manual_upload)
-ELSE:
-    TodoWrite(mark_completed: "Local tool fallback", mark_in_progress: "Verify results")
-    GOTO Phase 3 (verification)
+# Only if MCP unavailable
+bash(which playwright 2>/dev/null || echo "")
+bash(which google-chrome || which chrome || which chromium 2>/dev/null || echo "")
 ```
 
-### Phase 2.5: 手动上传降级
+**Output**: `local_tools[]`
 
-```bash
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-REPORT: "⚠️ Phase 2.5: Manual Screenshot Required"
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+## Phase 3: Capture Screenshots
 
-REPORT: "Failed to auto-capture {len(local_failed)} target(s):"
-REPORT: ""
+### Step 1: MCP Capture (If Available)
+```javascript
+IF tool == "chrome-devtools":
+  // Get or create page
+  pages = mcp__chrome-devtools__list_pages()
 
-FOR entry IN local_failed:
-    REPORT: "  {entry.target}:"
-    REPORT: "    URL: {entry.url}"
-    REPORT: "    Save to: {screenshot_dir}/{entry.target}.png"
-    REPORT: ""
+  IF pages.length == 0:
+    mcp__chrome-devtools__new_page({url: url_entries[0].url})
+    page_idx = 0
+  ELSE:
+    page_idx = 0
 
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-REPORT: "📋 Manual Steps:"
-REPORT: "  1. Visit each URL above in your browser"
-REPORT: "  2. Take full-page screenshot (Browser DevTools or extensions)"
-REPORT: "  3. Save screenshot to specified path"
-REPORT: "  4. Return here and choose an option"
-REPORT: ""
-REPORT: "Options:"
-REPORT: "  • Type 'ready' : I've uploaded screenshot(s), continue workflow"
-REPORT: "  • Type 'skip'  : Skip failed screenshots, continue with available"
-REPORT: "  • Type 'abort' : Cancel entire capture workflow"
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+  mcp__chrome-devtools__select_page({pageIdx: page_idx})
 
-user_response = WAIT_FOR_USER_INPUT()
+  // Capture each URL
+  FOR entry IN url_entries:
+    mcp__chrome-devtools__navigate_page({url: entry.url, timeout: 30000})
+    bash(sleep 2)
 
-MATCH user_response.lower():
-    "ready" | "done" | "ok" | "continue":
-        # 验证手动上传的文件
-        manual_uploaded = []
-        REPORT: "🔍 Checking for manual screenshots..."
+    mcp__chrome-devtools__take_screenshot({
+      fullPage: true,
+      format: "png",
+      quality: 90,
+      filePath: f"{base_path}/screenshots/{entry.target}.png"
+    })
 
-        FOR entry IN local_failed:
-            expected_path = f"{screenshot_dir}/{entry.target}.png"
-
-            IF exists(expected_path) AND file_size(expected_path) > 1000:
-                manual_uploaded.append(entry.target)
-                success_captures.append(entry.target)
-                REPORT: "  ✓ {entry.target}.png (manual, {file_size(expected_path)/1024:.1f} KB)"
-            ELSE:
-                REPORT: "  ✗ {entry.target}.png not found or invalid"
-
-        IF len(manual_uploaded) > 0:
-            REPORT: "✅ Detected {len(manual_uploaded)} manual screenshot(s)"
-
-            # 移除已上传的targets from failed list
-            failed_captures = [f for f in failed_captures if f.target NOT IN manual_uploaded]
-        ELSE:
-            REPORT: "⚠️ No valid manual screenshots detected"
-            REPORT: "   Proceeding with available screenshots only"
-
-        TodoWrite(mark_completed: "Manual upload mode", mark_in_progress: "Verify results")
-        GOTO Phase 3
-
-    "skip" | "s":
-        REPORT: "⏭️ Skipping {len(local_failed)} failed screenshot(s)"
-        REPORT: "   Proceeding with {len(success_captures)} available screenshot(s)"
-        TodoWrite(mark_completed: "Manual upload mode", mark_in_progress: "Verify results")
-        GOTO Phase 3
-
-    "abort" | "cancel" | "exit":
-        ERROR: "Workflow aborted by user"
-        TodoWrite(mark_failed: "Manual upload mode")
-        EXIT 1
-
-    _:
-        REPORT: "⚠️ Invalid input '{user_response}', interpreting as 'skip'"
-        REPORT: "   Proceeding with available screenshots"
-        TodoWrite(mark_completed: "Manual upload mode", mark_in_progress: "Verify results")
-        GOTO Phase 3
+ELSE IF tool == "playwright":
+  FOR entry IN url_entries:
+    mcp__playwright__screenshot({
+      url: entry.url,
+      output_path: f"{base_path}/screenshots/{entry.target}.png",
+      full_page: true,
+      timeout: 30000
+    })
 ```
 
-### Phase 3: 验证和总结
-
+### Step 2: Local Fallback (If MCP Failed)
 ```bash
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-REPORT: "✅ Phase 3: Verification & Summary"
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+# Try Playwright CLI
+bash(playwright screenshot "$url" "$output_file" --full-page --timeout 30000)
 
-# 扫描实际截图文件
-captured_files = Glob("{screenshot_dir}/*.{png,jpg,jpeg,webp}")
-captured_targets_actual = [extract_basename_without_ext(f) for f in captured_files]
+# Try Chrome headless
+bash($chrome --headless --screenshot="$output_file" --window-size=1920,1080 "$url")
+```
 
-# 与请求对比
-total_requested = len(url_entries)
-total_captured = len(captured_targets_actual)
-missing_targets = [entry.target for entry in url_entries if entry.target NOT IN captured_targets_actual]
+### Step 3: Manual Mode (If All Failed)
+```
+⚠️ Manual Screenshot Required
 
-REPORT: "📊 Capture Summary:"
-REPORT: "   Total requested: {total_requested}"
-REPORT: "   Successfully captured: {total_captured}"
-REPORT: "   Success rate: {(total_captured / total_requested * 100):.1f}%"
+Failed URLs:
+  home: https://linear.app
+  Save to: .workflow/.design/run-20250110/screenshots/home.png
 
-IF missing_targets:
-    REPORT: ""
-    REPORT: "⚠️ Missing screenshots ({len(missing_targets)}):"
-    FOR target IN missing_targets:
-        REPORT: "     • {target}"
-ELSE:
-    REPORT: ""
-    REPORT: "✅ All requested screenshots captured!"
+Steps:
+  1. Visit URL in browser
+  2. Take full-page screenshot
+  3. Save to path above
+  4. Type 'ready' to continue
+
+Options: ready | skip | abort
+```
+
+## Phase 4: Verification
+
+### Step 1: Scan Captured Files
+```bash
+bash(ls -1 $base_path/screenshots/*.{png,jpg,jpeg,webp} 2>/dev/null)
+bash(du -h $base_path/screenshots/*.png 2>/dev/null)
+```
+
+### Step 2: Generate Metadata
+```javascript
+captured_files = Glob(f"{base_path}/screenshots/*.{{png,jpg,jpeg,webp}}")
+captured_targets = [basename_no_ext(f) for f in captured_files]
 
-# 生成capture元数据
 metadata = {
-    "timestamp": current_timestamp(),
-    "total_requested": total_requested,
-    "total_captured": total_captured,
-    "success_rate": round(total_captured / total_requested * 100, 2),
-    "screenshots": []
+  "timestamp": current_timestamp(),
+  "total_requested": len(url_entries),
+  "total_captured": len(captured_targets),
+  "screenshots": []
 }
 
 FOR entry IN url_entries:
-    target = entry.target
-    url = entry.url
-    is_captured = target IN captured_targets_actual
+  is_captured = entry.target IN captured_targets
 
-    screenshot_info = {
-        "target": target,
-        "url": url,
-        "captured": is_captured
-    }
+  metadata.screenshots.append({
+    "target": entry.target,
+    "url": entry.url,
+    "captured": is_captured,
+    "path": f"{base_path}/screenshots/{entry.target}.png" IF is_captured ELSE null,
+    "size_kb": file_size_kb IF is_captured ELSE null
+  })
 
-    IF is_captured:
-        file_path = f"{screenshot_dir}/{target}.png"
-        screenshot_info["path"] = file_path
-        screenshot_info["size_kb"] = round(file_size(file_path) / 1024, 2)
-
-        # 查找捕获方法
-        IF target IN [s.target for s in result.success if mcp_available]:
-            screenshot_info["method"] = "MCP"
-        ELSE IF target IN local_success:
-            screenshot_info["method"] = "Local (Playwright/Chrome)"
-        ELSE:
-            screenshot_info["method"] = "Manual"
-    ELSE:
-        screenshot_info["path"] = null
-        screenshot_info["error"] = next((f.error for f in failed_captures if f.target == target), "Unknown error")
-
-    metadata.screenshots.append(screenshot_info)
-
-# 写入元数据文件
-metadata_path = "{screenshot_dir}/capture-metadata.json"
-Write(metadata_path, JSON.stringify(metadata, null, 2))
-
-REPORT: ""
-REPORT: "📁 Output:"
-REPORT: "   Directory: {screenshot_dir}/"
-REPORT: "   Metadata: capture-metadata.json"
-
-TodoWrite(mark_completed: "Verify and summarize results")
+Write(f"{base_path}/screenshots/capture-metadata.json", JSON.stringify(metadata))
 ```
 
-### Phase 4: 完成
+**Output**: `capture-metadata.json`
 
+## Completion
+
+### Todo Update
 ```javascript
 TodoWrite({todos: [
-  {content: "Initialize and parse url-map", status: "completed", activeForm: "Initializing"},
-  {content: "MCP batch screenshot capture", status: "completed", activeForm: "MCP capture"},
-  {content: "Local tool fallback (if needed)", status: "completed", activeForm: "Local fallback"},
-  {content: "Verify and summarize results", status: "completed", activeForm: "Verifying"}
-]});
+  {content: "Parse url-map", status: "completed", activeForm: "Parsing"},
+  {content: "Detect MCP tools", status: "completed", activeForm: "Detecting"},
+  {content: "Capture screenshots", status: "completed", activeForm: "Capturing"},
+  {content: "Verify results", status: "completed", activeForm: "Verifying"}
+]})
 ```
 
-**Completion Message**:
+### Output Message
 ```
-✅ Batch Screenshot Capture Complete!
+✅ Batch screenshot capture complete!
 
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-📊 Capture Summary
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+Summary:
+- Requested: {total_requested}
+- Captured: {total_captured}
+- Success rate: {success_rate}%
+- Method: {tool || "Local fallback"}
 
-Requested: {total_requested} screenshots
-Captured: {total_captured} screenshots
-Success Rate: {success_rate}%
-
-Capture Methods:
-{IF mcp_available AND mcp_success_count > 0:
-  • MCP: {mcp_success_count} screenshot(s)
-}
-{IF local_success_count > 0:
-  • Local tools: {local_success_count} screenshot(s)
-}
-{IF manual_count > 0:
-  • Manual upload: {manual_count} screenshot(s)
-}
-
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-📂 Output Structure
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-{screenshot_dir}/
-├── {target1}.png ({size1} KB)
-├── {target2}.png ({size2} KB)
-{FOR each captured screenshot}
+Output:
+{base_path}/screenshots/
+├── home.png (245.3 KB)
+├── pricing.png (198.7 KB)
 └── capture-metadata.json
 
-{IF missing_targets:
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-⚠️ Missing Screenshots ({len(missing_targets)})
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-{FOR target IN missing_targets:
-  • {target} - {get_error_for_target(target)}
-}
-
-💡 Tip: Re-run capture command for failed targets:
-   /workflow:ui-design:capture --base-path "{base_path}" --url-map "{build_failed_url_map()}"
-}
-
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-🚀 Next Steps
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-1. Extract design style from captured screenshots:
-   /workflow:ui-design:extract --base-path "{base_path}" --images "{screenshot_dir}/*.png" --mode imitate --variants 1
-
-2. Or continue with full imitate workflow:
-   (capture is automatically called by /workflow:ui-design:imitate-auto-v3)
+Next: /workflow:ui-design:extract --images "screenshots/*.png"
 ```
 
-## MCP API设计（假设实现）
+## Simple Bash Commands
 
-```typescript
-// 假设的MCP工具签名
-mcp__browser__screenshot({
-  urls: string[],              // 要截图的URL列表
-  output_dir: string,          // 输出目录
-  file_prefix: string[],       // 文件名前缀列表（对应urls）
-  full_page?: boolean,         // 全页截图（默认true）
-  viewport?: string,           // 视口大小（默认"1920,1080"）
-  timeout?: number             // 每个URL的超时（默认30000ms）
-}): {
-  success: Array<{
-    target: string,            // file_prefix对应的target名称
-    url: string,              // 成功截图的URL
-    path: string              // 生成的截图文件路径
-  }>,
-  failed: Array<{
-    target: string,            // file_prefix对应的target名称
-    url: string,              // 失败的URL
-    error: string             // 错误信息
-  }>
-}
+### Path Operations
+```bash
+# Find design directory
+bash(find .workflow -type d -name "design-*" | head -1)
+
+# Create screenshot directory
+bash(mkdir -p $BASE_PATH/screenshots)
 ```
 
-**注意事项**：
-- 如果`mcp__browser__screenshot`工具不存在，命令会自动降级到本地工具
-- MCP工具应该支持并行截图以提高性能
-- 返回结果应该区分成功和失败，允许部分失败
+### Tool Detection
+```bash
+# Check MCP
+all_resources = ListMcpResourcesTool()
+
+# Check local tools
+bash(which playwright 2>/dev/null)
+bash(which google-chrome 2>/dev/null)
+```
+
+### Verification
+```bash
+# List captures
+bash(ls -1 $base_path/screenshots/*.png 2>/dev/null)
+
+# File sizes
+bash(du -h $base_path/screenshots/*.png)
+```
+
+## Output Structure
+
+```
+{base_path}/
+└── screenshots/
+    ├── home.png
+    ├── pricing.png
+    ├── about.png
+    └── capture-metadata.json
+```
 
 ## Error Handling
 
-- **无效url-map格式**：清晰的错误信息+格式示例
-- **MCP不可用**：静默降级到本地工具（Playwright/Chrome）
-- **所有自动工具失败**：进入交互式手动上传模式
-- **部分失败**：记录成功项，继续流程（非阻塞），提供重试建议
+### Common Errors
+```
+ERROR: Invalid url-map format
+→ Use: "target:url, target2:url2"
+
+ERROR: MCP unavailable
+→ Using local fallback
+
+ERROR: All tools failed
+→ Manual mode activated
+```
+
+### Recovery
+- **Partial success**: Keep successful captures
+- **Retry**: Re-run with failed targets only
+- **Manual**: Follow interactive guidance
+
+## Quality Checklist
+
+- [ ] All requested URLs processed
+- [ ] File sizes > 1KB (valid images)
+- [ ] Metadata JSON generated
+- [ ] No missing targets (or documented)
 
 ## Key Features
 
-1. **MCP优先策略** - 使用托管工具提高可靠性和一致性
-2. **多级降级机制** - MCP → Playwright → Chrome → 手动上传
-3. **批量并行处理** - 一次处理多个URL（MCP支持并行）
-4. **错误容忍设计** - 部分失败不阻塞整体流程
-5. **高度可复用** - 可被imitate-auto-v3、explore-auto等工作流调用
-6. **结构化输出** - capture-metadata.json记录完整捕获信息
-7. **交互式降级** - 手动模式提供清晰的用户指导
-8. **智能路径管理** - 支持session集成和standalone模式
+- **MCP-first**: Prioritize managed tools
+- **Multi-tier fallback**: 4 layers (MCP → Local → Manual)
+- **Batch processing**: Parallel capture
+- **Error tolerance**: Partial failures handled
+- **Structured output**: Flat, predictable
 
-## Integration Points
+## Integration
 
-- **Input**: `--url-map` (target:url pairs) + `--base-path` or `--session`
-- **Output**: `{base_path}/screenshots/*.png` + `capture-metadata.json`
-- **Callers**: `/workflow:ui-design:imitate-auto-v3`, potentially `/workflow:ui-design:explore-auto-v2`
-- **Next Command**: `/workflow:ui-design:extract --images "{screenshot_dir}/*.png"`
+**Input**: `--url-map` (multiple target:url pairs)
+**Output**: `screenshots/*.png` + `capture-metadata.json`
+**Called by**: `/workflow:ui-design:imitate-auto`, `/workflow:ui-design:explore-auto`
+**Next**: `/workflow:ui-design:extract` or `/workflow:ui-design:explore-layers`
diff --git a/.claude/commands/workflow/ui-design/explore-auto-v2.md b/.claude/commands/workflow/ui-design/explore-auto-v2.md
deleted file mode 100644
index b6c5703a..00000000
--- a/.claude/commands/workflow/ui-design/explore-auto-v2.md
+++ /dev/null
@@ -1,390 +0,0 @@
----
-name: explore-auto-v2
-description: Exploratory UI design workflow with style-centric batch generation
-usage: /workflow:ui-design:explore-auto-v2 [--prompt "<desc>"] [--images "<glob>"] [--targets "<list>"] [--target-type "page|component"] [--session <id>] [--style-variants <count>] [--layout-variants <count>] [--batch-plan]
-examples:
-  - /workflow:ui-design:explore-auto-v2 --prompt "Generate 3 style variants for modern blog: home, article, author"
-  - /workflow:ui-design:explore-auto-v2 --prompt "SaaS dashboard and settings with 2 layout options"
-  - /workflow:ui-design:explore-auto-v2 --images "refs/*.png" --prompt "E-commerce: home, product, cart" --style-variants 3 --layout-variants 3
-  - /workflow:ui-design:explore-auto-v2 --session WFS-auth --images "refs/*.png"
-  - /workflow:ui-design:explore-auto-v2 --targets "navbar,hero" --target-type "component" --style-variants 3 --layout-variants 2
-allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*), Task(conceptual-planning-agent)
----
-
-# UI Design Auto Workflow Command
-
-## Overview & Execution Model
-
-**Fully autonomous orchestrator**: Executes all design phases sequentially from style extraction to design integration, with optional batch planning.
-
-**Unified Target System**: Generates `style_variants × layout_variants × targets` prototypes, where targets can be:
-- **Pages** (full-page layouts): home, dashboard, settings, etc.
-- **Components** (isolated UI elements): navbar, card, hero, form, etc.
-- **Mixed**: Can combine both in a single workflow
-
-**Autonomous Flow** (⚠️ CONTINUOUS EXECUTION - DO NOT STOP):
-1. User triggers: `/workflow:ui-design:explore-auto-v2 [params]`
-2. Phase 0c: Target confirmation → User confirms → **IMMEDIATELY triggers Phase 1**
-3. Phase 1 (style-extract) → **WAIT for completion** → Auto-continues
-4. Phase 2 (style-consolidate) → **WAIT for completion** → Auto-continues
-5. **Phase 3 (ui-generate-v2)** → **WAIT for completion** → Auto-continues
-6. Phase 4 (design-update) → **WAIT for completion** → Auto-continues
-7. Phase 5 (batch-plan, optional) → Reports completion
-
-**Phase Transition Mechanism**:
-- **Phase 0c (User Interaction)**: User confirms targets → IMMEDIATELY triggers Phase 1
-- **Phase 1-5 (Autonomous)**: `SlashCommand` is BLOCKING - execution pauses until completion
-- Upon each phase completion: Automatically process output and execute next phase
-- No additional user interaction after Phase 0c confirmation
-
-**Auto-Continue Mechanism**: TodoWrite tracks phase status. Upon each phase completion, you MUST immediately construct and execute the next phase command. No user intervention required. The workflow is NOT complete until reaching Phase 4 (or Phase 5 if --batch-plan).
-
-**Target Type Detection**: Automatically inferred from prompt/targets, or explicitly set via `--target-type`.
-
-## Core Rules
-
-1. **Start Immediately**: TodoWrite initialization → Phase 1 execution
-2. **No Preliminary Validation**: Sub-commands handle their own validation
-3. **Parse & Pass**: Extract data from each output for next phase
-4. **Default to All**: When selecting variants/prototypes, use ALL generated items
-5. **Track Progress**: Update TodoWrite after each phase
-6. **⚠️ CRITICAL: DO NOT STOP** - This is a continuous multi-phase workflow. After each SlashCommand completes, you MUST wait for completion, then immediately execute the next phase. Workflow is NOT complete until Phase 4 (or Phase 5 if --batch-plan).
-
-## Parameter Requirements
-
-**Optional Parameters** (all have smart defaults):
-- `--targets "<list>"`: Comma-separated targets (pages/components) to generate (inferred from prompt/session if omitted)
-- `--target-type "page|component|auto"`: Explicitly set target type (default: `auto` - intelligent detection)
-- `--session <id>`: Workflow session ID (standalone mode if omitted)
-- `--images "<glob>"`: Reference image paths (default: `design-refs/*`)
-- `--prompt "<description>"`: Design style and target description
-- `--style-variants <count>`: Style variants (default: inferred from prompt or 3, range: 1-5)
-- `--layout-variants <count>`: Layout variants per style (default: inferred or 3, range: 1-5)
-- `--batch-plan`: Auto-generate implementation tasks after design-update
-
-**Legacy Parameters** (maintained for backward compatibility):
-- `--pages "<list>"`: Alias for `--targets` with `--target-type page`
-- `--components "<list>"`: Alias for `--targets` with `--target-type component`
-
-**Input Rules**:
-- Must provide at least one: `--images` or `--prompt` or `--targets`
-- Multiple parameters can be combined for guided analysis
-- If `--targets` not provided, intelligently inferred from prompt/session
-
-**Supported Target Types**:
-- **Pages** (full layouts): home, dashboard, settings, profile, login, etc.
-- **Components** (UI elements):
-  - Navigation: navbar, header, menu, breadcrumb, tabs, sidebar
-  - Content: hero, card, list, table, grid, timeline
-  - Input: form, search, filter, input-group
-  - Feedback: modal, alert, toast, badge, progress
-  - Media: gallery, carousel, video-player, image-card
-  - Other: footer, pagination, dropdown, tooltip, avatar
-
-**Intelligent Prompt Parsing**: Extracts variant counts from natural language:
-- "Generate **3 style variants**" → `--style-variants 3`
-- "**2 layout options**" → `--layout-variants 2`
-- "Create **4 styles** with **2 layouts each**" → `--style-variants 4 --layout-variants 2`
-- Explicit flags override prompt inference
-
-## Execution Modes
-
-**Matrix Mode** (style-centric):
-- Generates `style_variants × layout_variants × targets` prototypes
-- **Phase 1**: `style_variants` style options with design_attributes (extract)
-- **Phase 2**: `style_variants` independent design systems (consolidate)
-- **Phase 3**: Style-centric batch generation (generate-v2)
-  - Sub-phase 1: `targets × layout_variants` target-specific layout plans
-  - **Sub-phase 2**: `S` style-centric agents (each handles `L×T` combinations)
-  - Sub-phase 3: `style_variants × layout_variants × targets` final prototypes
-  - Performance: Efficient parallel execution with S agents
-  - Quality: HTML structure adapts to design_attributes
-  - Pages: Full-page layouts with complete structure
-  - Components: Isolated elements with minimal wrapper
-
-**Integrated vs. Standalone**:
-- `--session` flag determines session integration or standalone execution
-
-## 6-Phase Execution
-
-### Phase 0a: Intelligent Prompt Parsing
-```bash
-# Parse variant counts from prompt or use explicit/default values
-IF --prompt AND (NOT --style-variants OR NOT --layout-variants):
-    style_variants = regex_extract(prompt, r"(\d+)\s*style") OR --style-variants OR 3
-    layout_variants = regex_extract(prompt, r"(\d+)\s*layout") OR --layout-variants OR 3
-ELSE:
-    style_variants = --style-variants OR 3
-    layout_variants = --layout-variants OR 3
-
-VALIDATE: 1 <= style_variants <= 5, 1 <= layout_variants <= 5
-```
-
-### Phase 0b: Run Initialization & Directory Setup
-```bash
-run_id = "run-$(date +%Y%m%d-%H%M%S)"
-base_path = --session ? ".workflow/WFS-{session}/design-${run_id}" : ".workflow/.design/${run_id}"
-
-Bash(mkdir -p "${base_path}/{style-extraction,style-consolidation,prototypes}")
-
-Write({base_path}/.run-metadata.json): {
-  "run_id": "${run_id}", "session_id": "${session_id}", "timestamp": "...",
-  "workflow": "ui-design:auto-v2",
-  "version": "2.0",
-  "architecture": "style-centric-batch-generation",
-  "parameters": { "style_variants": ${style_variants}, "layout_variants": ${layout_variants},
-                  "targets": "${inferred_target_list}", "target_type": "${target_type}",
-                  "prompt": "${prompt_text}", "images": "${images_pattern}" },
-  "status": "in_progress",
-  "performance_mode": "optimized"
-}
-```
-
-### Phase 0c: Unified Target Inference with Intelligent Type Detection
-```bash
-# Priority: --pages/--components (legacy) → --targets → --prompt analysis → synthesis → default
-target_list = []; target_type = "auto"; target_source = "none"
-
-# Step 1-2: Explicit parameters (legacy or unified)
-IF --pages: target_list = split(--pages); target_type = "page"; target_source = "explicit_legacy"
-ELSE IF --components: target_list = split(--components); target_type = "component"; target_source = "explicit_legacy"
-ELSE IF --targets:
-    target_list = split(--targets); target_source = "explicit"
-    target_type = --target-type != "auto" ? --target-type : detect_target_type(target_list)
-
-# Step 3: Prompt analysis (Claude internal analysis)
-ELSE IF --prompt:
-    analysis_result = analyze_prompt("{prompt_text}")  # Extract targets, types, purpose
-    target_list = analysis_result.targets
-    target_type = analysis_result.primary_type OR detect_target_type(target_list)
-    target_source = "prompt_analysis"
-
-# Step 4: Session synthesis
-ELSE IF --session AND exists(synthesis-specification.md):
-    target_list = extract_targets_from_synthesis(); target_type = "page"; target_source = "synthesis"
-
-# Step 5: Fallback
-IF NOT target_list: target_list = ["home"]; target_type = "page"; target_source = "default"
-
-# Validate and clean
-validated_targets = [normalize(t) for t in target_list if is_valid(t)]
-IF NOT validated_targets: validated_targets = ["home"]; target_type = "page"
-IF --target-type != "auto": target_type = --target-type
-
-# Interactive confirmation
-DISPLAY_CONFIRMATION(target_type, target_source, validated_targets):
-  "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-  "{emoji} {LABEL} CONFIRMATION (v2.0 Style-Centric)"
-  "Type: {target_type} | Source: {target_source}"
-  "Targets ({count}): {', '.join(validated_targets)}"
-  "Performance: {style_variants} agent calls (vs {layout_variants * len(validated_targets)} in v1.0)"
-  "Options: 'continue/yes' | 'targets: a,b' | 'skip: x' | 'add: y' | 'type: page|component'"
-  "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-
-user_input = WAIT_FOR_USER_INPUT()
-
-# Process user modifications
-MATCH user_input:
-  "continue|yes|ok" → proceed
-  "targets: ..." → validated_targets = parse_new_list()
-  "skip: ..." → validated_targets = remove_items()
-  "add: ..." → validated_targets = add_items()
-  "type: ..." → target_type = extract_type()
-  default → proceed with current list
-
-STORE: inferred_target_list, target_type, target_inference_source
-
-# ⚠️ CRITICAL: User confirmation complete, IMMEDIATELY initialize TodoWrite and execute Phase 1
-# This is the only user interaction point in the workflow
-# After this point, all subsequent phases execute automatically without user intervention
-```
-
-**Helper Function: detect_target_type()**
-```bash
-detect_target_type(target_list):
-    page_keywords = ["home", "dashboard", "settings", "profile", "login", "signup", "auth", ...]
-    component_keywords = ["navbar", "header", "footer", "hero", "card", "button", "form", ...]
-
-    page_matches = count_matches(target_list, page_keywords + ["page", "screen", "view"])
-    component_matches = count_matches(target_list, component_keywords + ["component", "widget"])
-
-    RETURN "component" IF component_matches > page_matches ELSE "page"
-```
-
-### Phase 1: Style Extraction
-```bash
-command = "/workflow:ui-design:extract --base-path \"{base_path}\" " +
-          (--images ? "--images \"{images}\" " : "") +
-          (--prompt ? "--prompt \"{prompt}\" " : "") +
-          "--variants {style_variants} --mode explore"
-SlashCommand(command)
-
-# Output: {style_variants} style cards with design_attributes
-# SlashCommand blocks until phase complete
-# Upon completion, IMMEDIATELY execute Phase 2 (auto-continue)
-```
-
-### Phase 2: Style Consolidation
-```bash
-command = "/workflow:ui-design:consolidate --base-path \"{base_path}\" " +
-          "--variants {style_variants}"
-SlashCommand(command)
-
-# Output: {style_variants} independent design systems with tokens.css
-# SlashCommand blocks until phase complete
-# Upon completion, IMMEDIATELY execute Phase 3 (auto-continue)
-```
-
-### Phase 3: Style-Centric Matrix UI Generation
-```bash
-targets_string = ",".join(inferred_target_list)
-command = "/workflow:ui-design:generate-v2 --base-path \"{base_path}\" " +
-          "--targets \"{targets_string}\" --target-type \"{target_type}\" " +
-          "--style-variants {style_variants} --layout-variants {layout_variants}"
-
-total = style_variants × layout_variants × len(inferred_target_list)
-agent_calls = style_variants
-
-REPORT: "🚀 Phase 3: {type_icon} {targets_string} | Matrix: {s}×{l}×{n} = {total} prototypes"
-REPORT: "   → Agent calls: {agent_calls} style-centric agents"
-REPORT: "   → Layout planning: {len(inferred_target_list)}×{layout_variants} target-specific layouts"
-REPORT: "   → Style-centric generation: Each of {style_variants} agents handles {layout_variants}×{len(inferred_target_list)} combinations"
-
-SlashCommand(command)
-
-# SlashCommand blocks until phase complete
-# Upon completion, IMMEDIATELY execute Phase 4 (auto-continue)
-# Output:
-# - {target}-layout-{l}.json (target-specific layout plans)
-# - {target}-style-{s}-layout-{l}.html (final prototypes with style-aware structure)
-# - compare.html (interactive matrix view)
-# - PREVIEW.md (usage instructions)
-```
-
-### Phase 4: Design System Integration
-```bash
-command = "/workflow:ui-design:update" + (--session ? " --session {session_id}" : "")
-SlashCommand(command)
-
-# SlashCommand blocks until phase complete
-# Upon completion:
-#   - If --batch-plan flag present: IMMEDIATELY execute Phase 5 (auto-continue)
-#   - If no --batch-plan: Workflow complete, display final report
-```
-
-### Phase 5: Batch Task Generation (Optional)
-```bash
-IF --batch-plan:
-    FOR target IN inferred_target_list:
-        task_desc = "Implement {target} {target_type} based on design system"
-        SlashCommand("/workflow:plan --agent \"{task_desc}\"")
-```
-
-## TodoWrite Pattern
-```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 style consolidation", "status": "pending", "activeForm": "Executing..."},
-  {"content": "Execute style-centric UI generation", "status": "pending", "activeForm": "Executing..."},
-  {"content": "Execute design integration", "status": "pending", "activeForm": "Executing..."}
-]})
-
-// ⚠️ CRITICAL: After EACH SlashCommand completion (Phase 1-5), you MUST:
-// 1. SlashCommand blocks and returns when phase is complete
-// 2. Update current phase: status → "completed"
-// 3. Update next phase: status → "in_progress"
-// 4. IMMEDIATELY execute next phase SlashCommand (auto-continue)
-// This ensures continuous workflow tracking and prevents premature stopping
-```
-
-## Key Features
-
-- **🚀 Performance**: Style-centric batch generation with S agent calls
-- **🎨 Style-Aware**: HTML structure adapts to design_attributes
-- **✅ Perfect Consistency**: Each style by single agent
-- **📦 Autonomous**: No user intervention required between phases
-- **🧠 Intelligent**: Parses natural language, infers targets/types
-- **🔄 Reproducible**: Deterministic flow with isolated run directories
-- **🎯 Flexible**: Supports pages, components, or mixed targets
-
-## Examples
-
-### 1. Page Mode (Prompt Inference)
-```bash
-/workflow:ui-design:explore-auto-v2 --prompt "Modern blog: home, article, author"
-# Result: 27 prototypes (3×3×3)
-```
-
-### 2. Custom Matrix with Session
-```bash
-/workflow:ui-design:explore-auto-v2 --session WFS-ecommerce --images "refs/*.png" --style-variants 2 --layout-variants 2
-# Result: 2×2×N prototypes
-```
-
-### 3. Component Mode
-```bash
-/workflow:ui-design:explore-auto-v2 --targets "navbar,hero" --target-type "component" --style-variants 3 --layout-variants 2
-# Result: 12 prototypes (3×2×2) - components with minimal wrapper
-```
-
-### 4. Intelligent Parsing + Batch Planning
-```bash
-/workflow:ui-design:explore-auto-v2 --prompt "Create 4 styles with 2 layouts for dashboard and settings" --batch-plan
-# Result: 16 prototypes (4×2×2) + auto-generated tasks
-```
-
-### 5. Large Scale
-```bash
-/workflow:ui-design:explore-auto-v2 --targets "home,dashboard,settings,profile" --style-variants 3 --layout-variants 3
-# Result: 36 prototypes (3×3×4)
-```
-
-## Completion Output
-```
-✅ UI Design Explore-Auto Workflow Complete!
-
-Architecture: Style-Centric Batch Generation
-Run ID: {run_id} | Session: {session_id or "standalone"}
-Type: {icon} {target_type} | Matrix: {s}×{l}×{n} = {total} prototypes
-
-Phase 1: {s} style variants with design_attributes (extract)
-Phase 2: {s} design systems with tokens.css (consolidate)
-Phase 3: Style-centric batch generation (generate-v2)
-  - {n}×{l} target-specific layout plans
-  - {s} style-centric agents (each handled {l}×{n} combinations)
-  - {s}×{l}×{n} = {total} final prototypes with style-aware structure
-Phase 4: Brainstorming artifacts updated
-[Phase 5: {n} implementation tasks created]  # if --batch-plan
-
-Agent Execution:
-✅ Style-centric agents: {s} agents total
-✅ Each agent handles: {l}×{n} combinations
-
-Design Quality:
-✅ Style-Aware Structure: HTML adapts to design_attributes
-✅ Style Consistency: PERFECT (each style by single agent)
-✅ Token-Driven Styling: 100% var() usage
-
-📂 {base_path}/
-  ├── style-extraction/       ({s} style cards + design-space-analysis.json)
-  ├── style-consolidation/    ({s} design systems with tokens.css)
-  ├── prototypes/
-  │   ├── _templates/         ({n}×{l} layout JSON files)
-  │   └── ...                 ({total} final prototypes)
-  └── .run-metadata.json
-
-🌐 Preview: {base_path}/prototypes/compare.html
-  - Interactive {s}×{l} matrix view
-  - Side-by-side comparison
-  - Target-specific layouts with style-aware structure
-  - Toggle between {n} targets
-
-{icon} Targets: {', '.join(targets)} (type: {target_type})
-  - Each target has {l} custom-designed layouts
-  - Each style × target × layout has unique HTML structure (not just CSS!)
-  - Layout plans stored as structured JSON
-
-Next: [/workflow:execute] OR [Open compare.html → Select → /workflow:plan]
-```
-
diff --git a/.claude/commands/workflow/ui-design/explore-auto.md b/.claude/commands/workflow/ui-design/explore-auto.md
index b08ed696..d145a239 100644
--- a/.claude/commands/workflow/ui-design/explore-auto.md
+++ b/.claude/commands/workflow/ui-design/explore-auto.md
@@ -1,15 +1,13 @@
 ---
 name: explore-auto
-description: Exploratory UI design workflow - Generate and compare multiple style × layout combinations (3×3 matrix exploration)
+description: Exploratory UI design workflow with style-centric batch generation
 usage: /workflow:ui-design:explore-auto [--prompt "<desc>"] [--images "<glob>"] [--targets "<list>"] [--target-type "page|component"] [--session <id>] [--style-variants <count>] [--layout-variants <count>] [--batch-plan]
 examples:
   - /workflow:ui-design:explore-auto --prompt "Generate 3 style variants for modern blog: home, article, author"
   - /workflow:ui-design:explore-auto --prompt "SaaS dashboard and settings with 2 layout options"
   - /workflow:ui-design:explore-auto --images "refs/*.png" --prompt "E-commerce: home, product, cart" --style-variants 3 --layout-variants 3
   - /workflow:ui-design:explore-auto --session WFS-auth --images "refs/*.png"
-  - /workflow:ui-design:explore-auto --targets "navbar,hero" --target-type "component" --prompt "Compare 3 navigation bar designs" --style-variants 3 --layout-variants 2
-  - /workflow:ui-design:explore-auto --targets "card,form,button" --images "refs/*.png" --style-variants 2 --layout-variants 3
-  - /workflow:ui-design:explore-auto --targets "home,dashboard" --target-type "page"
+  - /workflow:ui-design:explore-auto --targets "navbar,hero" --target-type "component" --style-variants 3 --layout-variants 2
 allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*), Task(conceptual-planning-agent)
 ---
 
@@ -26,11 +24,18 @@ 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 1 (style-extract) → **WAIT for completion** → Auto-continues
-3. Phase 2 (style-consolidate) → **WAIT for completion** → Auto-continues
-4. Phase 3 (ui-generate) → **WAIT for completion** → Auto-continues with unified target list
-5. Phase 4 (design-update) → **WAIT for completion** → Auto-continues
-6. Phase 5 (batch-plan, optional) → Reports completion
+2. Phase 0c: Target confirmation → User confirms → **IMMEDIATELY triggers Phase 1**
+3. Phase 1 (style-extract) → **WAIT for completion** → Auto-continues
+4. Phase 2 (style-consolidate) → **WAIT for completion** → Auto-continues
+5. **Phase 3 (ui-generate)** → **WAIT for completion** → Auto-continues
+6. Phase 4 (design-update) → **WAIT for completion** → Auto-continues
+7. Phase 5 (batch-plan, optional) → Reports completion
+
+**Phase Transition Mechanism**:
+- **Phase 0c (User Interaction)**: User confirms targets → IMMEDIATELY triggers Phase 1
+- **Phase 1-5 (Autonomous)**: `SlashCommand` is BLOCKING - execution pauses until completion
+- Upon each phase completion: Automatically process output and execute next phase
+- No additional user interaction after Phase 0c confirmation
 
 **Auto-Continue Mechanism**: TodoWrite tracks phase status. Upon each phase completion, you MUST immediately construct and execute the next phase command. No user intervention required. The workflow is NOT complete until reaching Phase 4 (or Phase 5 if --batch-plan).
 
@@ -50,6 +55,11 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
 **Optional Parameters** (all have smart defaults):
 - `--targets "<list>"`: Comma-separated targets (pages/components) to generate (inferred from prompt/session if omitted)
 - `--target-type "page|component|auto"`: Explicitly set target type (default: `auto` - intelligent detection)
+- `--device-type "desktop|mobile|tablet|responsive|auto"`: Device type for layout optimization (default: `auto` - intelligent detection)
+  - **Desktop**: 1920×1080px - Mouse-driven, spacious layouts
+  - **Mobile**: 375×812px - Touch-friendly, compact layouts
+  - **Tablet**: 768×1024px - Hybrid touch/mouse layouts
+  - **Responsive**: 1920×1080px base with mobile-first breakpoints
 - `--session <id>`: Workflow session ID (standalone mode if omitted)
 - `--images "<glob>"`: Reference image paths (default: `design-refs/*`)
 - `--prompt "<description>"`: Design style and target description
@@ -84,17 +94,18 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
 
 ## Execution Modes
 
-**Matrix Mode** (unified):
+**Matrix Mode** (style-centric):
 - Generates `style_variants × layout_variants × targets` prototypes
-- **Phase 1**: `style_variants` style options (extract)
+- **Phase 1**: `style_variants` style options with design_attributes (extract)
 - **Phase 2**: `style_variants` independent design systems (consolidate)
-- **Phase 3**: Layout planning + UI generation (generate)
+- **Phase 3**: Style-centric batch generation (generate)
   - Sub-phase 1: `targets × layout_variants` target-specific layout plans
-  - Sub-phase 2: `layout_variants × targets` HTML/CSS templates
+  - **Sub-phase 2**: `S` style-centric agents (each handles `L×T` combinations)
   - Sub-phase 3: `style_variants × layout_variants × targets` final prototypes
+  - Performance: Efficient parallel execution with S agents
+  - Quality: HTML structure adapts to design_attributes
   - Pages: Full-page layouts with complete structure
   - Components: Isolated elements with minimal wrapper
-  - Mixed: Combination based on intelligent detection
 
 **Integrated vs. Standalone**:
 - `--session` flag determines session integration or standalone execution
@@ -114,6 +125,51 @@ ELSE:
 VALIDATE: 1 <= style_variants <= 5, 1 <= layout_variants <= 5
 ```
 
+### Phase 0a-2: Device Type Inference
+```bash
+# Device type inference
+device_type = "auto"
+
+# Step 1: Explicit parameter (highest priority)
+IF --device-type AND --device-type != "auto":
+    device_type = --device-type
+    device_source = "explicit"
+ELSE:
+    # Step 2: Prompt analysis
+    IF --prompt:
+        device_keywords = {
+            "desktop": ["desktop", "web", "laptop", "widescreen", "large screen"],
+            "mobile": ["mobile", "phone", "smartphone", "ios", "android"],
+            "tablet": ["tablet", "ipad", "medium screen"],
+            "responsive": ["responsive", "adaptive", "multi-device", "cross-platform"]
+        }
+        detected_device = detect_device_from_prompt(--prompt, device_keywords)
+        IF detected_device:
+            device_type = detected_device
+            device_source = "prompt_inference"
+
+    # Step 3: Target type inference
+    IF device_type == "auto":
+        # Components are typically desktop-first, pages can vary
+        device_type = target_type == "component" ? "desktop" : "responsive"
+        device_source = "target_type_inference"
+
+STORE: device_type, device_source
+```
+
+**Device Type Presets**:
+- **Desktop**: 1920×1080px - Mouse-driven, spacious layouts
+- **Mobile**: 375×812px - Touch-friendly, compact layouts
+- **Tablet**: 768×1024px - Hybrid touch/mouse layouts
+- **Responsive**: 1920×1080px base with mobile-first breakpoints
+
+**Detection Keywords**:
+- Prompt contains "mobile", "phone", "smartphone" → mobile
+- Prompt contains "tablet", "ipad" → tablet
+- Prompt contains "desktop", "web", "laptop" → desktop
+- Prompt contains "responsive", "adaptive" → responsive
+- Otherwise: Inferred from target type (components→desktop, pages→responsive)
+
 ### Phase 0b: Run Initialization & Directory Setup
 ```bash
 run_id = "run-$(date +%Y%m%d-%H%M%S)"
@@ -124,10 +180,13 @@ Bash(mkdir -p "${base_path}/{style-extraction,style-consolidation,prototypes}")
 Write({base_path}/.run-metadata.json): {
   "run_id": "${run_id}", "session_id": "${session_id}", "timestamp": "...",
   "workflow": "ui-design:auto",
+  "architecture": "style-centric-batch-generation",
   "parameters": { "style_variants": ${style_variants}, "layout_variants": ${layout_variants},
                   "targets": "${inferred_target_list}", "target_type": "${target_type}",
-                  "prompt": "${prompt_text}", "images": "${images_pattern}" },
-  "status": "in_progress"
+                  "prompt": "${prompt_text}", "images": "${images_pattern}",
+                  "device_type": "${device_type}", "device_source": "${device_source}" },
+  "status": "in_progress",
+  "performance_mode": "optimized"
 }
 ```
 
@@ -163,13 +222,24 @@ IF NOT validated_targets: validated_targets = ["home"]; target_type = "page"
 IF --target-type != "auto": target_type = --target-type
 
 # Interactive confirmation
-DISPLAY_CONFIRMATION(target_type, target_source, validated_targets):
-  "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-  "{emoji} {LABEL} CONFIRMATION"
+DISPLAY_CONFIRMATION(target_type, target_source, validated_targets, device_type, device_source):
+  "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+  "{emoji} {LABEL} CONFIRMATION (Style-Centric)"
+  "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
   "Type: {target_type} | Source: {target_source}"
   "Targets ({count}): {', '.join(validated_targets)}"
-  "Options: 'continue/yes' | 'targets: a,b' | 'skip: x' | 'add: y' | 'type: page|component'"
-  "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+  "Device: {device_type} | Source: {device_source}"
+  "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+  "Performance: {style_variants} agent calls"
+  "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+  "Modification Options:"
+  "  • 'continue/yes/ok' - Proceed with current configuration"
+  "  • 'targets: a,b,c' - Replace target list"
+  "  • 'skip: x,y' - Remove specific targets"
+  "  • 'add: z' - Add new targets"
+  "  • 'type: page|component' - Change target type"
+  "  • 'device: desktop|mobile|tablet|responsive' - Change device type"
+  "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
 
 user_input = WAIT_FOR_USER_INPUT()
 
@@ -180,9 +250,14 @@ MATCH user_input:
   "skip: ..." → validated_targets = remove_items()
   "add: ..." → validated_targets = add_items()
   "type: ..." → target_type = extract_type()
+  "device: ..." → device_type = extract_device()
   default → proceed with current list
 
 STORE: inferred_target_list, target_type, target_inference_source
+
+# ⚠️ CRITICAL: User confirmation complete, IMMEDIATELY initialize TodoWrite and execute Phase 1
+# This is the only user interaction point in the workflow
+# After this point, all subsequent phases execute automatically without user intervention
 ```
 
 **Helper Function: detect_target_type()**
@@ -202,11 +277,12 @@ detect_target_type(target_list):
 command = "/workflow:ui-design:extract --base-path \"{base_path}\" " +
           (--images ? "--images \"{images}\" " : "") +
           (--prompt ? "--prompt \"{prompt}\" " : "") +
-          "--variants {style_variants} --mode explore"
+          "--mode explore --variants {style_variants}"
 SlashCommand(command)
 
-# WAIT for extract command to complete, then IMMEDIATELY continue to Phase 2
-# DO NOT STOP - Phase 2 must execute automatically
+# Output: {style_variants} style cards with design_attributes
+# SlashCommand blocks until phase complete
+# Upon completion, IMMEDIATELY execute Phase 2 (auto-continue)
 ```
 
 ### Phase 2: Style Consolidation
@@ -215,30 +291,37 @@ command = "/workflow:ui-design:consolidate --base-path \"{base_path}\" " +
           "--variants {style_variants}"
 SlashCommand(command)
 
-# WAIT for consolidate command to complete, then IMMEDIATELY continue to Phase 3
-# DO NOT STOP - Phase 3 must execute automatically
-# Output: style_variants independent design systems (design tokens and style guides)
+# Output: {style_variants} independent design systems with tokens.css
+# SlashCommand blocks until phase complete
+# Upon completion, IMMEDIATELY execute Phase 3 (auto-continue)
 ```
 
-### Phase 3: Matrix UI Generation (with Layout Planning)
+### Phase 3: Style-Centric Matrix UI Generation
 ```bash
 targets_string = ",".join(inferred_target_list)
 command = "/workflow:ui-design:generate --base-path \"{base_path}\" " +
           "--targets \"{targets_string}\" --target-type \"{target_type}\" " +
-          "--style-variants {style_variants} --layout-variants {layout_variants}"
+          "--style-variants {style_variants} --layout-variants {layout_variants} " +
+          "--device-type \"{device_type}\""
 
 total = style_variants × layout_variants × len(inferred_target_list)
+agent_calls = style_variants
+
 REPORT: "🚀 Phase 3: {type_icon} {targets_string} | Matrix: {s}×{l}×{n} = {total} prototypes"
+REPORT: "   → Device: {device_type}"
+REPORT: "   → Agent calls: {agent_calls} style-centric agents"
 REPORT: "   → Layout planning: {len(inferred_target_list)}×{layout_variants} target-specific layouts"
+REPORT: "   → Style-centric generation: Each of {style_variants} agents handles {layout_variants}×{len(inferred_target_list)} combinations"
 
 SlashCommand(command)
 
-# WAIT for generate command to complete, then IMMEDIATELY continue to Phase 4
-# DO NOT STOP - Phase 4 must execute automatically
+# SlashCommand blocks until phase complete
+# Upon completion, IMMEDIATELY execute Phase 4 (auto-continue)
 # Output:
 # - {target}-layout-{l}.json (target-specific layout plans)
-# - {target}-style-{s}-layout-{l}.html (final prototypes)
-# - compare.html (matrix view)
+# - {target}-style-{s}-layout-{l}.html (final prototypes with style-aware structure)
+# - compare.html (interactive matrix view)
+# - PREVIEW.md (usage instructions)
 ```
 
 ### Phase 4: Design System Integration
@@ -246,9 +329,10 @@ SlashCommand(command)
 command = "/workflow:ui-design:update" + (--session ? " --session {session_id}" : "")
 SlashCommand(command)
 
-# WAIT for update command to complete
-# If --batch-plan flag present: IMMEDIATELY continue to Phase 5
-# If no --batch-plan: Workflow complete, display final report
+# SlashCommand blocks until phase complete
+# Upon completion:
+#   - If --batch-plan flag present: IMMEDIATELY execute Phase 5 (auto-continue)
+#   - If no --batch-plan: Workflow complete, display final report
 ```
 
 ### Phase 5: Batch Task Generation (Optional)
@@ -261,90 +345,131 @@ IF --batch-plan:
 
 ## TodoWrite Pattern
 ```javascript
-// Initialize at workflow start to track multi-phase execution
+// 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 style consolidation", "status": "pending", "activeForm": "Executing..."},
-  {"content": "Execute UI generation", "status": "pending", "activeForm": "Executing..."},
+  {"content": "Execute style-centric UI generation", "status": "pending", "activeForm": "Executing..."},
   {"content": "Execute design integration", "status": "pending", "activeForm": "Executing..."}
 ]})
 
-// ⚠️ CRITICAL: After EACH phase completion, you MUST:
-// 1. Update current phase: status → "completed"
-// 2. Update next phase: status → "in_progress"
-// 3. Continue to execute next phase immediately
+// ⚠️ CRITICAL: After EACH SlashCommand completion (Phase 1-5), you MUST:
+// 1. SlashCommand blocks and returns when phase is complete
+// 2. Update current phase: status → "completed"
+// 3. Update next phase: status → "in_progress"
+// 4. IMMEDIATELY execute next phase SlashCommand (auto-continue)
 // This ensures continuous workflow tracking and prevents premature stopping
 ```
 
 ## Key Features
-- **Autonomous**: No user intervention required between phases
-- **Intelligent**: Parses natural language, infers targets/types
-- **Reproducible**: Deterministic flow with isolated run directories
-- **Flexible**: Supports pages, components, or mixed targets
+
+- **🚀 Performance**: Style-centric batch generation with S agent calls
+- **🎨 Style-Aware**: HTML structure adapts to design_attributes
+- **✅ Perfect Consistency**: Each style by single agent
+- **📦 Autonomous**: No user intervention required between phases
+- **🧠 Intelligent**: Parses natural language, infers targets/types
+- **🔄 Reproducible**: Deterministic flow with isolated run directories
+- **🎯 Flexible**: Supports pages, components, or mixed targets
 
 ## Examples
 
 ### 1. Page Mode (Prompt Inference)
 ```bash
 /workflow:ui-design:explore-auto --prompt "Modern blog: home, article, author"
-# Result: 27 prototypes (3×3×3 - inferred defaults)
+# Result: 27 prototypes (3×3×3) - responsive layouts (default)
 ```
 
-### 2. Custom Matrix with Session
+### 2. Mobile-First Design
+```bash
+/workflow:ui-design:explore-auto --prompt "Mobile shopping app: home, product, cart" --device-type mobile
+# Result: 27 prototypes (3×3×3) - mobile layouts (375×812px)
+```
+
+### 3. Desktop Application
+```bash
+/workflow:ui-design:explore-auto --targets "dashboard,analytics,settings" --device-type desktop --style-variants 2 --layout-variants 2
+# Result: 12 prototypes (2×2×3) - desktop layouts (1920×1080px)
+```
+
+### 4. Tablet Interface
+```bash
+/workflow:ui-design:explore-auto --prompt "Educational app for tablets" --device-type tablet --targets "courses,lessons,profile"
+# Result: 27 prototypes (3×3×3) - tablet layouts (768×1024px)
+```
+
+### 5. Custom Matrix with Session
 ```bash
 /workflow:ui-design:explore-auto --session WFS-ecommerce --images "refs/*.png" --style-variants 2 --layout-variants 2
-# Result: 2×2×N prototypes (targets from synthesis)
+# Result: 2×2×N prototypes - device type inferred from session
 ```
 
-### 3. Component Mode
+### 6. Component Mode (Desktop)
 ```bash
-/workflow:ui-design:explore-auto --targets "navbar,hero" --target-type "component" --style-variants 3 --layout-variants 2
-# Result: 12 prototypes (3×2×2 components with minimal wrapper)
+/workflow:ui-design:explore-auto --targets "navbar,hero" --target-type "component" --device-type desktop --style-variants 3 --layout-variants 2
+# Result: 12 prototypes (3×2×2) - desktop components
 ```
 
-### 4. Intelligent Parsing + Batch Planning
+### 7. Intelligent Parsing + Batch Planning
 ```bash
-/workflow:ui-design:explore-auto --prompt "Create 4 styles with 2 layouts for dashboard and settings" --batch-plan
-# Result: 16 prototypes (4×2×2) + auto-generated implementation tasks
+/workflow:ui-design:explore-auto --prompt "Create 4 styles with 2 layouts for mobile dashboard and settings" --batch-plan
+# Result: 16 prototypes (4×2×2) + auto-generated tasks - mobile-optimized (inferred from prompt)
 ```
 
-### 5. Legacy Support
+### 8. Large Scale Responsive
 ```bash
-/workflow:ui-design:explore-auto --pages "home,dashboard,settings"
-# Equivalent to: --targets "home,dashboard,settings" --target-type "page"
+/workflow:ui-design:explore-auto --targets "home,dashboard,settings,profile" --device-type responsive --style-variants 3 --layout-variants 3
+# Result: 36 prototypes (3×3×4) - responsive layouts
 ```
 
 ## Completion Output
 ```
 ✅ UI Design Explore-Auto Workflow Complete!
 
+Architecture: Style-Centric Batch Generation
 Run ID: {run_id} | Session: {session_id or "standalone"}
-Type: {icon} {target_type} | Matrix: {s}×{l}×{n} = {total} prototypes
+Type: {icon} {target_type} | Device: {device_type} | Matrix: {s}×{l}×{n} = {total} prototypes
 
-Phase 1: {s} style variants (extract)
-Phase 2: {s} design systems (consolidate)
-Phase 3: Layout planning + generation (generate)
+Phase 1: {s} style variants with design_attributes (extract)
+Phase 2: {s} design systems with tokens.css (consolidate)
+Phase 3: Style-centric batch generation (generate)
+  - Device: {device_type} layouts
   - {n}×{l} target-specific layout plans
-  - {l}×{n} HTML/CSS templates
-  - {s}×{l}×{n} = {total} final prototypes
+  - {s} style-centric agents (each handled {l}×{n} combinations)
+  - {s}×{l}×{n} = {total} final prototypes with style-aware structure
 Phase 4: Brainstorming artifacts updated
 [Phase 5: {n} implementation tasks created]  # if --batch-plan
 
+Agent Execution:
+✅ Style-centric agents: {s} agents total
+✅ Each agent handles: {l}×{n} combinations
+✅ Device-optimized: {device_type} layouts
+
+Design Quality:
+✅ Style-Aware Structure: HTML adapts to design_attributes
+✅ Style Consistency: PERFECT (each style by single agent)
+✅ Token-Driven Styling: 100% var() usage
+✅ Device-Optimized: Layouts designed for {device_type}
+
 📂 {base_path}/
-  ├── style-consolidation/  ({s} design systems)
+  ├── style-extraction/       ({s} style cards + design-space-analysis.json)
+  ├── style-consolidation/    ({s} design systems with tokens.css)
   ├── prototypes/
-  │   ├── _templates/       ({n}×{l} layout JSON + {l}×{n} HTML/CSS)
-  │   └── ...               ({total} final prototypes)
-  └── .run-metadata.json
+  │   ├── _templates/         ({n}×{l} layout JSON files)
+  │   └── ...                 ({total} final prototypes)
+  └── .run-metadata.json      (includes device type)
 
 🌐 Preview: {base_path}/prototypes/compare.html
   - Interactive {s}×{l} matrix view
   - Side-by-side comparison
-  - Target-specific layouts per prototype
+  - Target-specific layouts with style-aware structure
+  - Toggle between {n} targets
 
 {icon} Targets: {', '.join(targets)} (type: {target_type})
   - Each target has {l} custom-designed layouts
+  - Each style × target × layout has unique HTML structure (not just CSS!)
   - Layout plans stored as structured JSON
+  - Optimized for {device_type} viewing
 
 Next: [/workflow:execute] OR [Open compare.html → Select → /workflow:plan]
 ```
+
diff --git a/.claude/commands/workflow/ui-design/explore-layers.md b/.claude/commands/workflow/ui-design/explore-layers.md
new file mode 100644
index 00000000..f96d612c
--- /dev/null
+++ b/.claude/commands/workflow/ui-design/explore-layers.md
@@ -0,0 +1,594 @@
+---
+name: explore-layers
+description: Interactive deep UI capture with depth-controlled layer exploration
+usage: /workflow:ui-design:explore-layers --url <url> --depth <1-5> [--session <id>] [--base-path <path>]
+argument-hint: --url <url> --depth <1-5> [--session id] [--base-path path]
+examples:
+  - /workflow:ui-design:explore-layers --url "https://app.linear.app" --depth 3
+  - /workflow:ui-design:explore-layers --url "https://notion.so" --depth 2 --session WFS-notion-ui
+  - /workflow:ui-design:explore-layers --url "https://app.com/dashboard" --depth 4
+allowed-tools: TodoWrite(*), Read(*), Write(*), Bash(*), Glob(*), mcp__chrome-devtools__*
+---
+
+# Interactive Layer Exploration (/workflow:ui-design:explore-layers)
+
+## Overview
+Single-URL depth-controlled interactive capture. Progressively explores UI layers from pages to Shadow DOM.
+
+**Depth Levels**:
+- `1` = Page (full-page screenshot)
+- `2` = Elements (key components)
+- `3` = Interactions (modals, dropdowns)
+- `4` = Embedded (iframes, widgets)
+- `5` = Shadow DOM (web components)
+
+**Requirements**: Chrome DevTools MCP
+
+## Phase 1: Setup & Validation
+
+### Step 1: Parse Parameters
+```javascript
+url = params["--url"]
+depth = int(params["--depth"])
+
+// Validate URL
+IF NOT url.startswith("http"):
+  url = f"https://{url}"
+
+// Validate depth
+IF depth NOT IN [1, 2, 3, 4, 5]:
+  ERROR: "Invalid depth: {depth}. Use 1-5"
+  EXIT 1
+```
+
+### Step 2: Determine Base Path
+```bash
+bash(if [ -n "$BASE_PATH" ]; then
+  echo "$BASE_PATH"
+elif [ -n "$SESSION_ID" ]; then
+  find .workflow/WFS-$SESSION_ID/design-* -type d | head -1 || \
+  echo ".workflow/WFS-$SESSION_ID/design-layers-$(date +%Y%m%d-%H%M%S)"
+else
+  echo ".workflow/.design/layers-$(date +%Y%m%d-%H%M%S)"
+fi)
+
+# Create depth directories
+bash(for i in $(seq 1 $depth); do mkdir -p $BASE_PATH/screenshots/depth-$i; done)
+```
+
+**Output**: `url`, `depth`, `base_path`
+
+### Step 3: Validate MCP Availability
+```javascript
+all_resources = ListMcpResourcesTool()
+chrome_devtools = "chrome-devtools" IN [r.server for r in all_resources]
+
+IF NOT chrome_devtools:
+  ERROR: "explore-layers requires Chrome DevTools MCP"
+  ERROR: "Install: npm i -g @modelcontextprotocol/server-chrome-devtools"
+  EXIT 1
+```
+
+### Step 4: Initialize Todos
+```javascript
+todos = [
+  {content: "Setup and validation", status: "completed", activeForm: "Setting up"}
+]
+
+FOR level IN range(1, depth + 1):
+  todos.append({
+    content: f"Depth {level}: {DEPTH_NAMES[level]}",
+    status: "pending",
+    activeForm: f"Capturing depth {level}"
+  })
+
+todos.append({content: "Generate layer map", status: "pending", activeForm: "Mapping"})
+
+TodoWrite({todos})
+```
+
+## Phase 2: Navigate & Load Page
+
+### Step 1: Get or Create Browser Page
+```javascript
+pages = mcp__chrome-devtools__list_pages()
+
+IF pages.length == 0:
+  mcp__chrome-devtools__new_page({url: url, timeout: 30000})
+  page_idx = 0
+ELSE:
+  page_idx = 0
+  mcp__chrome-devtools__select_page({pageIdx: page_idx})
+  mcp__chrome-devtools__navigate_page({url: url, timeout: 30000})
+
+bash(sleep 3)  // Wait for page load
+```
+
+**Output**: `page_idx`
+
+## Phase 3: Depth 1 - Page Level
+
+### Step 1: Capture Full Page
+```javascript
+TodoWrite(mark_in_progress: "Depth 1: Page")
+
+output_file = f"{base_path}/screenshots/depth-1/full-page.png"
+
+mcp__chrome-devtools__take_screenshot({
+  fullPage: true,
+  format: "png",
+  quality: 90,
+  filePath: output_file
+})
+
+layer_map = {
+  "url": url,
+  "depth": depth,
+  "layers": {
+    "depth-1": {
+      "type": "page",
+      "captures": [{
+        "name": "full-page",
+        "path": output_file,
+        "size_kb": file_size_kb(output_file)
+      }]
+    }
+  }
+}
+
+TodoWrite(mark_completed: "Depth 1: Page")
+```
+
+**Output**: `depth-1/full-page.png`
+
+## Phase 4: Depth 2 - Element Level (If depth >= 2)
+
+### Step 1: Analyze Page Structure
+```javascript
+IF depth < 2: SKIP
+
+TodoWrite(mark_in_progress: "Depth 2: Elements")
+
+snapshot = mcp__chrome-devtools__take_snapshot()
+
+// Filter key elements
+key_types = ["nav", "header", "footer", "aside", "button", "form", "article"]
+key_elements = [
+  el for el in snapshot.interactiveElements
+  if el.type IN key_types OR el.role IN ["navigation", "banner", "main"]
+][:10]  // Limit to top 10
+```
+
+### Step 2: Capture Element Screenshots
+```javascript
+depth_2_captures = []
+
+FOR idx, element IN enumerate(key_elements):
+  element_name = sanitize(element.text[:20] or element.type) or f"element-{idx}"
+  output_file = f"{base_path}/screenshots/depth-2/{element_name}.png"
+
+  TRY:
+    mcp__chrome-devtools__take_screenshot({
+      uid: element.uid,
+      format: "png",
+      quality: 85,
+      filePath: output_file
+    })
+
+    depth_2_captures.append({
+      "name": element_name,
+      "type": element.type,
+      "path": output_file,
+      "size_kb": file_size_kb(output_file)
+    })
+  CATCH error:
+    REPORT: f"Skip {element_name}: {error}"
+
+layer_map.layers["depth-2"] = {
+  "type": "elements",
+  "captures": depth_2_captures
+}
+
+TodoWrite(mark_completed: "Depth 2: Elements")
+```
+
+**Output**: `depth-2/{element}.png` × N
+
+## Phase 5: Depth 3 - Interaction Level (If depth >= 3)
+
+### Step 1: Analyze Interactive Triggers
+```javascript
+IF depth < 3: SKIP
+
+TodoWrite(mark_in_progress: "Depth 3: Interactions")
+
+// Detect structure
+structure = mcp__chrome-devtools__evaluate_script({
+  function: `() => ({
+    modals: document.querySelectorAll('[role="dialog"], .modal').length,
+    dropdowns: document.querySelectorAll('[role="menu"], .dropdown').length,
+    tooltips: document.querySelectorAll('[role="tooltip"], [title]').length
+  })`
+})
+
+// Identify triggers
+triggers = []
+FOR element IN snapshot.interactiveElements:
+  IF element.attributes CONTAINS ("data-toggle", "aria-haspopup"):
+    triggers.append({
+      uid: element.uid,
+      type: "modal" IF "modal" IN element.classes ELSE "dropdown",
+      trigger: "click",
+      text: element.text
+    })
+  ELSE IF element.attributes CONTAINS ("title", "data-tooltip"):
+    triggers.append({
+      uid: element.uid,
+      type: "tooltip",
+      trigger: "hover",
+      text: element.text
+    })
+
+triggers = triggers[:10]  // Limit
+```
+
+### Step 2: Trigger Interactions & Capture
+```javascript
+depth_3_captures = []
+
+FOR idx, trigger IN enumerate(triggers):
+  layer_name = f"{trigger.type}-{sanitize(trigger.text[:15]) or idx}"
+  output_file = f"{base_path}/screenshots/depth-3/{layer_name}.png"
+
+  TRY:
+    // Trigger interaction
+    IF trigger.trigger == "click":
+      mcp__chrome-devtools__click({uid: trigger.uid})
+    ELSE:
+      mcp__chrome-devtools__hover({uid: trigger.uid})
+
+    bash(sleep 1)
+
+    // Capture
+    mcp__chrome-devtools__take_screenshot({
+      fullPage: false,  // Viewport only
+      format: "png",
+      quality: 90,
+      filePath: output_file
+    })
+
+    depth_3_captures.append({
+      "name": layer_name,
+      "type": trigger.type,
+      "trigger_method": trigger.trigger,
+      "path": output_file,
+      "size_kb": file_size_kb(output_file)
+    })
+
+    // Dismiss (ESC key)
+    mcp__chrome-devtools__evaluate_script({
+      function: `() => {
+        document.dispatchEvent(new KeyboardEvent('keydown', {key: 'Escape'}));
+      }`
+    })
+    bash(sleep 0.5)
+
+  CATCH error:
+    REPORT: f"Skip {layer_name}: {error}"
+
+layer_map.layers["depth-3"] = {
+  "type": "interactions",
+  "triggers": structure,
+  "captures": depth_3_captures
+}
+
+TodoWrite(mark_completed: "Depth 3: Interactions")
+```
+
+**Output**: `depth-3/{interaction}.png` × N
+
+## Phase 6: Depth 4 - Embedded Level (If depth >= 4)
+
+### Step 1: Detect Iframes
+```javascript
+IF depth < 4: SKIP
+
+TodoWrite(mark_in_progress: "Depth 4: Embedded")
+
+iframes = mcp__chrome-devtools__evaluate_script({
+  function: `() => {
+    return Array.from(document.querySelectorAll('iframe')).map(iframe => ({
+      src: iframe.src,
+      id: iframe.id || 'iframe',
+      title: iframe.title || 'untitled'
+    })).filter(i => i.src && i.src.startsWith('http'));
+  }`
+})
+```
+
+### Step 2: Capture Iframe Content
+```javascript
+depth_4_captures = []
+
+FOR idx, iframe IN enumerate(iframes):
+  iframe_name = f"iframe-{sanitize(iframe.title or iframe.id)}-{idx}"
+  output_file = f"{base_path}/screenshots/depth-4/{iframe_name}.png"
+
+  TRY:
+    // Navigate to iframe URL in new tab
+    mcp__chrome-devtools__new_page({url: iframe.src, timeout: 30000})
+    bash(sleep 2)
+
+    mcp__chrome-devtools__take_screenshot({
+      fullPage: true,
+      format: "png",
+      quality: 90,
+      filePath: output_file
+    })
+
+    depth_4_captures.append({
+      "name": iframe_name,
+      "url": iframe.src,
+      "path": output_file,
+      "size_kb": file_size_kb(output_file)
+    })
+
+    // Close iframe tab
+    current_pages = mcp__chrome-devtools__list_pages()
+    mcp__chrome-devtools__close_page({pageIdx: current_pages.length - 1})
+
+  CATCH error:
+    REPORT: f"Skip {iframe_name}: {error}"
+
+layer_map.layers["depth-4"] = {
+  "type": "embedded",
+  "captures": depth_4_captures
+}
+
+TodoWrite(mark_completed: "Depth 4: Embedded")
+```
+
+**Output**: `depth-4/iframe-*.png` × N
+
+## Phase 7: Depth 5 - Shadow DOM (If depth = 5)
+
+### Step 1: Detect Shadow Roots
+```javascript
+IF depth < 5: SKIP
+
+TodoWrite(mark_in_progress: "Depth 5: Shadow DOM")
+
+shadow_elements = mcp__chrome-devtools__evaluate_script({
+  function: `() => {
+    const elements = Array.from(document.querySelectorAll('*'));
+    return elements
+      .filter(el => el.shadowRoot)
+      .map((el, idx) => ({
+        tag: el.tagName.toLowerCase(),
+        id: el.id || \`shadow-\${idx}\`,
+        innerHTML: el.shadowRoot.innerHTML.substring(0, 100)
+      }));
+  }`
+})
+```
+
+### Step 2: Capture Shadow DOM Components
+```javascript
+depth_5_captures = []
+
+FOR idx, shadow IN enumerate(shadow_elements):
+  shadow_name = f"shadow-{sanitize(shadow.id)}"
+  output_file = f"{base_path}/screenshots/depth-5/{shadow_name}.png"
+
+  TRY:
+    // Inject highlight script
+    mcp__chrome-devtools__evaluate_script({
+      function: `() => {
+        const el = document.querySelector('${shadow.tag}${shadow.id ? "#" + shadow.id : ""}');
+        if (el) {
+          el.scrollIntoView({behavior: 'smooth', block: 'center'});
+          el.style.outline = '3px solid red';
+        }
+      }`
+    })
+
+    bash(sleep 0.5)
+
+    // Full-page screenshot (component highlighted)
+    mcp__chrome-devtools__take_screenshot({
+      fullPage: false,
+      format: "png",
+      quality: 90,
+      filePath: output_file
+    })
+
+    depth_5_captures.append({
+      "name": shadow_name,
+      "tag": shadow.tag,
+      "path": output_file,
+      "size_kb": file_size_kb(output_file)
+    })
+
+  CATCH error:
+    REPORT: f"Skip {shadow_name}: {error}"
+
+layer_map.layers["depth-5"] = {
+  "type": "shadow-dom",
+  "captures": depth_5_captures
+}
+
+TodoWrite(mark_completed: "Depth 5: Shadow DOM")
+```
+
+**Output**: `depth-5/shadow-*.png` × N
+
+## Phase 8: Generate Layer Map
+
+### Step 1: Compile Metadata
+```javascript
+TodoWrite(mark_in_progress: "Generate layer map")
+
+// Calculate totals
+total_captures = sum(len(layer.captures) for layer in layer_map.layers.values())
+total_size_kb = sum(
+  sum(c.size_kb for c in layer.captures)
+  for layer in layer_map.layers.values()
+)
+
+layer_map["summary"] = {
+  "timestamp": current_timestamp(),
+  "total_depth": depth,
+  "total_captures": total_captures,
+  "total_size_kb": total_size_kb
+}
+
+Write(f"{base_path}/screenshots/layer-map.json", JSON.stringify(layer_map, indent=2))
+
+TodoWrite(mark_completed: "Generate layer map")
+```
+
+**Output**: `layer-map.json`
+
+## Completion
+
+### Todo Update
+```javascript
+all_todos_completed = true
+TodoWrite({todos: all_completed_todos})
+```
+
+### Output Message
+```
+✅ Interactive layer exploration complete!
+
+Configuration:
+- URL: {url}
+- Max depth: {depth}
+- Layers explored: {len(layer_map.layers)}
+
+Capture Summary:
+  Depth 1 (Page):        {depth_1_count} screenshot(s)
+  Depth 2 (Elements):    {depth_2_count} screenshot(s)
+  Depth 3 (Interactions): {depth_3_count} screenshot(s)
+  Depth 4 (Embedded):    {depth_4_count} screenshot(s)
+  Depth 5 (Shadow DOM):  {depth_5_count} screenshot(s)
+
+Total: {total_captures} captures ({total_size_kb:.1f} KB)
+
+Output Structure:
+{base_path}/screenshots/
+├── depth-1/
+│   └── full-page.png
+├── depth-2/
+│   ├── navbar.png
+│   └── footer.png
+├── depth-3/
+│   ├── modal-login.png
+│   └── dropdown-menu.png
+├── depth-4/
+│   └── iframe-analytics.png
+├── depth-5/
+│   └── shadow-button.png
+└── layer-map.json
+
+Next: /workflow:ui-design:extract --images "screenshots/**/*.png"
+```
+
+## Simple Bash Commands
+
+### Directory Setup
+```bash
+# Create depth directories
+bash(for i in $(seq 1 $depth); do mkdir -p $BASE_PATH/screenshots/depth-$i; done)
+```
+
+### Validation
+```bash
+# Check MCP
+all_resources = ListMcpResourcesTool()
+
+# Count captures per depth
+bash(ls $base_path/screenshots/depth-{1..5}/*.png 2>/dev/null | wc -l)
+```
+
+### File Operations
+```bash
+# List all captures
+bash(find $base_path/screenshots -name "*.png" -type f)
+
+# Total size
+bash(du -sh $base_path/screenshots)
+```
+
+## Output Structure
+
+```
+{base_path}/screenshots/
+├── depth-1/
+│   └── full-page.png
+├── depth-2/
+│   ├── {element}.png
+│   └── ...
+├── depth-3/
+│   ├── {interaction}.png
+│   └── ...
+├── depth-4/
+│   ├── iframe-*.png
+│   └── ...
+├── depth-5/
+│   ├── shadow-*.png
+│   └── ...
+└── layer-map.json
+```
+
+## Depth Level Details
+
+| Depth | Name | Captures | Time | Use Case |
+|-------|------|----------|------|----------|
+| 1 | Page | Full page | 30s | Quick preview |
+| 2 | Elements | Key components | 1-2min | Component library |
+| 3 | Interactions | Modals, dropdowns | 2-4min | UI flows |
+| 4 | Embedded | Iframes | 3-6min | Complete context |
+| 5 | Shadow DOM | Web components | 4-8min | Full coverage |
+
+## Error Handling
+
+### Common Errors
+```
+ERROR: Chrome DevTools MCP required
+→ Install: npm i -g @modelcontextprotocol/server-chrome-devtools
+
+ERROR: Invalid depth
+→ Use: 1-5
+
+ERROR: Interaction trigger failed
+→ Some modals may be skipped, check layer-map.json
+```
+
+### Recovery
+- **Partial success**: Lower depth captures preserved
+- **Trigger failures**: Interaction layer may be incomplete
+- **Iframe restrictions**: Cross-origin iframes skipped
+
+## Quality Checklist
+
+- [ ] All depths up to specified level captured
+- [ ] layer-map.json generated with metadata
+- [ ] File sizes valid (> 500 bytes)
+- [ ] Interaction triggers executed
+- [ ] Shadow DOM elements highlighted
+
+## Key Features
+
+- **Depth-controlled**: Progressive capture 1-5 levels
+- **Interactive triggers**: Click/hover for hidden layers
+- **Iframe support**: Embedded content captured
+- **Shadow DOM**: Web component internals
+- **Structured output**: Organized by depth
+
+## Integration
+
+**Input**: Single URL + depth level (1-5)
+**Output**: Hierarchical screenshots + layer-map.json
+**Complements**: `/workflow:ui-design:capture` (multi-URL batch)
+**Next**: `/workflow:ui-design:extract` for design analysis
diff --git a/.claude/commands/workflow/ui-design/extract.md b/.claude/commands/workflow/ui-design/extract.md
index e4661451..8f4754e7 100644
--- a/.claude/commands/workflow/ui-design/extract.md
+++ b/.claude/commands/workflow/ui-design/extract.md
@@ -1,13 +1,13 @@
 ---
 name: extract
 description: Extract design style from reference images or text prompts using Claude's analysis
-usage: /workflow:ui-design:extract [--base-path <path>] [--session <id>] [--images "<glob>"] [--prompt "<desc>"] [--variants <count>]
+usage: /workflow:ui-design:extract [--base-path <path>] [--session <id>] [--images "<glob>"] [--prompt "<desc>"] [--mode <imitate|explore>] [--variants <count>]
 examples:
-  - /workflow:ui-design:extract --images "design-refs/*.png" --variants 3
-  - /workflow:ui-design:extract --prompt "Modern minimalist blog, dark theme" --variants 3
-  - /workflow:ui-design:extract --session WFS-auth --images "refs/*.png" --prompt "Linear.app style" --variants 2
-  - /workflow:ui-design:extract --base-path ".workflow/WFS-auth/design-run-20250109-143022" --images "refs/*.png" --variants 3
-  - /workflow:ui-design:extract --prompt "Bold vibrant" --variants 1  # Single variant (default)
+  - /workflow:ui-design:extract --images "design-refs/*.png" --mode explore --variants 3
+  - /workflow:ui-design:extract --prompt "Modern minimalist blog, dark theme" --mode explore --variants 3
+  - /workflow:ui-design:extract --session WFS-auth --images "refs/*.png" --prompt "Linear.app style" --mode imitate
+  - /workflow:ui-design:extract --base-path ".workflow/WFS-auth/design-run-20250109-143022" --images "refs/*.png" --mode explore --variants 3
+  - /workflow:ui-design:extract --prompt "Bold vibrant" --mode imitate  # High-fidelity single style
 allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*)
 ---
 
@@ -24,18 +24,25 @@ Extract design style from reference images or text prompts using Claude's built-
 
 ## Phase 0: Setup & Input Validation
 
-### Step 1: Detect Input Mode & Base Path
+### Step 1: Detect Input Mode, Extraction Mode & Base Path
 ```bash
 # Detect input source
 # Priority: --images + --prompt → hybrid | --images → image | --prompt → text
 
+# Determine extraction mode
+# Priority: --mode parameter → default "imitate"
+extraction_mode = --mode OR "imitate"  # "imitate" or "explore"
+
+# Set variants count based on mode
+IF extraction_mode == "imitate":
+    variants_count = 1  # Force single variant for imitate mode (ignore --variants)
+ELSE IF extraction_mode == "explore":
+    variants_count = --variants OR 3  # Default to 3 for explore mode
+    VALIDATE: 1 <= variants_count <= 5
+
 # Determine base path
 bash(find .workflow -type d -name "design-*" | head -1)  # Auto-detect
 # OR use --base-path / --session parameters
-
-# Set variant count (default: 1)
-# Priority: --variants parameter → default 1
-# Validate: 1 <= variants_count <= 5
 ```
 
 ### Step 2: Load Inputs
@@ -59,15 +66,15 @@ bash(test -f {base_path}/style-extraction/style-cards.json && echo "exists")
 
 **If exists**: Skip to completion message
 
-**Output**: `input_mode`, `base_path`, `variants_count`, `loaded_images[]` or `prompt_guidance`
+**Output**: `input_mode`, `base_path`, `extraction_mode`, `variants_count`, `loaded_images[]` or `prompt_guidance`
 
 ## Phase 1: Design Space Analysis (Explore Mode Only)
 
-### Step 1: Determine Extraction Mode
+### Step 1: Check Extraction Mode
 ```bash
-# Auto-detect mode
-# variants_count == 1 → imitate mode (skip this phase)
-# variants_count > 1 → explore mode (execute this phase)
+# Check extraction mode
+# extraction_mode == "imitate" → skip this phase
+# extraction_mode == "explore" → execute this phase
 ```
 
 **If imitate mode**: Skip to Phase 2
@@ -119,7 +126,7 @@ AI generates `variants_count` design style proposals:
 - WCAG AA accessibility (4.5:1 text, 3:1 UI)
 
 **Output Format**: `style-cards.json` with:
-- extraction_metadata (session_id, input_mode, timestamp, variants_count)
+- extraction_metadata (session_id, input_mode, extraction_mode, timestamp, variants_count)
 - style_cards[] (id, name, description, design_philosophy, preview, proposed_tokens)
 
 ### Step 2: Write Style Cards
@@ -146,11 +153,11 @@ TodoWrite({todos: [
 
 Configuration:
 - Session: {session_id}
-- Mode: {extraction_mode} (imitate/explore)
-- Input: {input_mode} (image/text/hybrid)
+- Extraction Mode: {extraction_mode} (imitate/explore)
+- Input Mode: {input_mode} (image/text/hybrid)
 - Variants: {variants_count}
 
-{IF explore mode:
+{IF extraction_mode == "explore":
 Design Space Analysis:
 - {variants_count} maximally contrasting design directions
 - Min contrast distance: {design_space_analysis.contrast_verification.min_pairwise_distance}
@@ -161,7 +168,7 @@ Generated Variants:
 
 Output Files:
 - {base_path}/style-extraction/style-cards.json
-{IF explore mode: - {base_path}/style-extraction/design-space-analysis.json}
+{IF extraction_mode == "explore": - {base_path}/style-extraction/design-space-analysis.json}
 
 Next: /workflow:ui-design:consolidate --session {session_id} --variants {variants_count}
 ```
@@ -216,7 +223,7 @@ bash(test -f design-space-analysis.json && echo "saved")
 
 ```json
 {
-  "extraction_metadata": {"session_id": "...", "input_mode": "image|text|hybrid", "timestamp": "...", "variants_count": N},
+  "extraction_metadata": {"session_id": "...", "input_mode": "image|text|hybrid", "extraction_mode": "imitate|explore", "timestamp": "...", "variants_count": N},
   "style_cards": [
     {
       "id": "variant-1", "name": "Style Name", "description": "...",
diff --git a/.claude/commands/workflow/ui-design/generate-v2.md b/.claude/commands/workflow/ui-design/generate-v2.md
deleted file mode 100644
index 289f8d00..00000000
--- a/.claude/commands/workflow/ui-design/generate-v2.md
+++ /dev/null
@@ -1,321 +0,0 @@
----
-name: generate-v2
-description: Generate UI prototypes using target-style-centric batch generation
-usage: /workflow:ui-design:generate-v2 [--targets "<list>"] [--target-type "page|component"] [--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]
-examples:
-  - /workflow:ui-design:generate-v2 --session WFS-auth --targets "dashboard,settings"
-  - /workflow:ui-design:generate-v2 --targets "home,pricing" --style-variants 2 --layout-variants 2
-allowed-tools: TodoWrite(*), Read(*), Write(*), Task(ui-design-agent), Bash(*)
----
-
-# Generate UI Prototypes V2 (/workflow:ui-design:generate-v2)
-
-## Overview
-Generate matrix of UI prototypes (`style × layout × targets`) using **target-style-centric batch generation**. Each agent handles all layouts for one target × style combination.
-
-**Strategy**: Target-Style-Centric
-- **Agent scope**: Each of `T × S` agents generates `L` layouts
-- **Component isolation**: Complete task independence
-- **Style-aware**: HTML adapts to design_attributes
-- **Self-contained CSS**: Direct token values (no var() refs)
-
-**Supports**: Pages (full layouts) and components (isolated elements)
-
-## Phase 1: Setup & Validation
-
-### Step 1: Resolve Base Path & Parse Configuration
-```bash
-# Determine working directory
-bash(find .workflow -type d -name "design-*" | head -1)  # Auto-detect
-
-# Get counts (defaults: style=auto, layout=3)
-bash(ls {base_path}/style-consolidation/style-* -d | wc -l)
-
-# Parse targets (Priority: --targets → --pages → synthesis-specification.md → default ["home"])
-# Target type: "page" (default) or "component"
-```
-
-### Step 2: Validate Inputs
-```bash
-# Check design systems exist
-bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "valid")
-
-# Validate target names (lowercase, alphanumeric, hyphens only)
-# Load design-space-analysis.json (optional, for style-aware generation)
-```
-
-**Output**: `base_path`, `style_variants`, `layout_variants`, `target_list[]`, `target_type`, `design_space_analysis` (optional)
-
-### Step 3: Detect Token Sources
-```bash
-# Priority 1: consolidated tokens (production-ready from /workflow:ui-design:consolidate)
-# Priority 2: proposed tokens from style-cards.json (fast-track from /workflow:ui-design:extract)
-
-bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "consolidated")
-# OR
-bash(test -f {base_path}/style-extraction/style-cards.json && echo "proposed")
-
-# If proposed: Create temp consolidation dir + write proposed tokens
-bash(mkdir -p {base_path}/style-consolidation/style-{id})
-Write({base_path}/style-consolidation/style-{id}/design-tokens.json, proposed_tokens)
-```
-
-**Output**: `token_sources{}`, `consolidated_count`, `proposed_count`
-
-### Step 4: Gather Layout Inspiration
-```bash
-bash(mkdir -p {base_path}/prototypes/_inspirations)
-
-# For each target: Research via MCP
-# mcp__exa__web_search_exa(query="{target} {target_type} layout patterns", numResults=5)
-
-# Write simple inspiration file
-Write({base_path}/prototypes/_inspirations/{target}-layout-ideas.txt, inspiration_content)
-```
-
-**Output**: `L` inspiration text files
-
-## Phase 2: Target-Style-Centric Generation (Agent)
-
-**Executor**: `Task(ui-design-agent)` × `T × S` tasks in parallel
-
-### Step 1: Launch Agent Tasks
-```bash
-bash(mkdir -p {base_path}/prototypes)
-```
-
-For each `target × style_id`:
-```javascript
-Task(ui-design-agent): `
-  [TARGET_STYLE_UI_GENERATION]
-  🎯 ONE component: {target} × Style-{style_id} ({philosophy_name})
-  Generate: {layout_variants} × 2 files (HTML + CSS per layout)
-
-  TARGET: {target} | TYPE: {target_type} | STYLE: {style_id}/{style_variants}
-  BASE_PATH: {base_path}
-  ${design_attributes ? "DESIGN_ATTRIBUTES: " + JSON.stringify(design_attributes) : ""}
-
-  ## 参考
-  - Layout inspiration: Read("{base_path}/prototypes/_inspirations/{target}-layout-ideas.txt")
-  - Design tokens: Read("{base_path}/style-consolidation/style-{style_id}/design-tokens.json")
-    Parse ALL token values (colors, typography, spacing, borders, shadows, breakpoints)
-  ${design_attributes ? "- Adapt DOM structure to: density, visual_weight, formality, organic_vs_geometric" : ""}
-
-  ## 生成
-  For EACH layout (1 to {layout_variants}):
-
-  1. HTML: {base_path}/prototypes/{target}-style-{style_id}-layout-N.html
-     - Complete HTML5: <!DOCTYPE>, <head>, <body>
-     - CSS ref: <link href="{target}-style-{style_id}-layout-N.css">
-     - Semantic: <header>, <nav>, <main>, <footer>
-     - A11y: ARIA labels, landmarks, responsive meta
-     ${design_attributes ? `
-     - DOM adaptation:
-       * density='spacious' → flatter hierarchy
-       * density='compact' → deeper nesting
-       * visual_weight='heavy' → extra wrappers
-       * visual_weight='minimal' → direct structure` : ""}
-
-  2. CSS: {base_path}/prototypes/{target}-style-{style_id}-layout-N.css
-     - Self-contained: Direct token VALUES (no var())
-     - Use tokens: colors, fonts, spacing, borders, shadows
-     - Responsive: Mobile-first @media(breakpoints)
-     ${design_attributes ? `
-     - Token selection:
-       * density → spacing scale
-       * visual_weight → shadow strength
-       * organic_vs_geometric → border-radius` : ""}
-
-  ## 注意
-  - ✅ Use token VALUES directly from design-tokens.json
-  - ❌ NO var() references, NO external dependencies
-  - Layouts structurally DISTINCT (different grids/regions)
-  - Write files IMMEDIATELY (per layout, no accumulation)
-  - CSS filename MUST match HTML <link href="...">
-  - No text output, write to filesystem only
-`
-```
-
-### Step 2: Verify Generated Files
-```bash
-# Count expected vs found
-bash(ls {base_path}/prototypes/{target}-style-*-layout-*.html | wc -l)
-
-# Validate samples
-Read({base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html)
-# Check: <!DOCTYPE html>, correct CSS href, sufficient CSS length
-```
-
-**Output**: `S × L × T × 2` files verified
-
-## Phase 3: Generate Preview Files
-
-### Step 1: Run Preview Generation Script
-```bash
-bash(~/.claude/scripts/ui-generate-preview-v2.sh "{base_path}/prototypes")
-```
-
-**Script generates**:
-- `compare.html` (interactive matrix)
-- `index.html` (navigation)
-- `PREVIEW.md` (instructions)
-
-### Step 2: Verify Preview Files
-```bash
-bash(ls {base_path}/prototypes/compare.html {base_path}/prototypes/index.html {base_path}/prototypes/PREVIEW.md)
-```
-
-**Output**: 3 preview files
-
-## Completion
-
-### Todo Update
-```javascript
-TodoWrite({todos: [
-  {content: "Setup and validation", status: "completed", activeForm: "Loading design systems"},
-  {content: "Gather layout inspiration", status: "completed", activeForm: "Researching layouts"},
-  {content: "Target-style generation (agent)", status: "completed", activeForm: "Generating prototypes"},
-  {content: "Verify files", status: "completed", activeForm: "Validating output"},
-  {content: "Generate previews", status: "completed", activeForm: "Creating preview files"}
-]});
-```
-
-### Output Message
-```
-✅ Target-Style-Centric UI generation complete!
-
-Configuration:
-- Style Variants: {style_variants}
-- Layout Variants: {layout_variants} (inspiration-based)
-- Target Type: {target_type}
-- Targets: {target_list}
-- Total Prototypes: {S × L × T}
-
-Agent Execution:
-- Target-style agents: T×S = {T}×{S} = {T×S} agents
-- Each agent scope: {L} layouts for one component
-- Component isolation: Complete task independence
-
-Quality:
-- Style-aware: {design_space_analysis ? 'HTML adapts to design_attributes' : 'Standard structure'}
-- CSS: Self-contained (direct token values, no var())
-- Tokens: {consolidated_count} consolidated, {proposed_count} proposed
-{IF proposed_count > 0: '  💡 For production: /workflow:ui-design:consolidate'}
-
-Generated Files:
-{base_path}/prototypes/
-├── _inspirations/ ({T} text files)
-├── {target}-style-{s}-layout-{l}.html ({S×L×T} prototypes)
-├── {target}-style-{s}-layout-{l}.css
-├── compare.html (interactive matrix)
-├── index.html (navigation)
-└── PREVIEW.md (instructions)
-
-Preview:
-1. Open compare.html (recommended)
-2. Open index.html
-3. Read PREVIEW.md
-
-Next: /workflow:ui-design:update
-```
-
-## Simple Bash Commands
-
-### Path Operations
-```bash
-# Find design directory
-bash(find .workflow -type d -name "design-*" | head -1)
-
-# Count style variants
-bash(ls {base_path}/style-consolidation/style-* -d | wc -l)
-
-# Check token sources
-bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "consolidated")
-bash(test -f {base_path}/style-extraction/style-cards.json && echo "proposed")
-```
-
-### Validation Commands
-```bash
-# Check design tokens exist
-bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "valid")
-
-# Count generated files
-bash(ls {base_path}/prototypes/{target}-style-*-layout-*.html | wc -l)
-
-# Verify preview
-bash(test -f {base_path}/prototypes/compare.html && echo "exists")
-```
-
-### File Operations
-```bash
-# Create directories
-bash(mkdir -p {base_path}/prototypes/_inspirations)
-
-# Run preview script
-bash(~/.claude/scripts/ui-generate-preview-v2.sh "{base_path}/prototypes")
-```
-
-## Output Structure
-
-```
-{base_path}/
-├── prototypes/
-│   ├── _inspirations/
-│   │   └── {target}-layout-ideas.txt  # Layout inspiration
-│   ├── {target}-style-{s}-layout-{l}.html  # Final prototypes
-│   ├── {target}-style-{s}-layout-{l}.css
-│   ├── compare.html
-│   ├── index.html
-│   └── PREVIEW.md
-└── style-consolidation/
-    └── style-{s}/
-        ├── design-tokens.json
-        └── style-guide.md
-```
-
-## Error Handling
-
-### Common Errors
-```
-ERROR: No token sources found
-→ Run /workflow:ui-design:extract or /workflow:ui-design:consolidate
-
-ERROR: MCP search failed
-→ Check network, retry
-
-ERROR: Agent task failed
-→ Check agent output, retry specific target×style
-
-ERROR: Script permission denied
-→ chmod +x ~/.claude/scripts/ui-generate-preview-v2.sh
-```
-
-### Recovery Strategies
-- **Partial success**: Keep successful target×style combinations
-- **Missing design_attributes**: Works without (less style-aware)
-- **Invalid tokens**: Validate design-tokens.json structure
-
-## Quality Checklist
-
-- [ ] CSS uses direct token values (no var())
-- [ ] HTML structure adapts to design_attributes (if available)
-- [ ] Semantic HTML5 structure
-- [ ] ARIA attributes present
-- [ ] Mobile-first responsive
-- [ ] Layouts structurally distinct
-- [ ] compare.html works
-
-## Key Features
-
-- **Target-Style-Centric**: `T×S` agents, each handles `L` layouts
-- **Component Isolation**: Complete task independence
-- **Style-Aware**: HTML adapts to design_attributes
-- **Self-Contained CSS**: Direct token values (no var())
-- **Inspiration-Based**: Simple text research vs complex JSON
-- **Production-Ready**: Semantic, accessible, responsive
-
-## Integration
-
-**Input**: design-tokens.json, design-space-analysis.json (optional), targets
-**Output**: S×L×T prototypes for `/workflow:ui-design:update`
-**Called by**: `/workflow:ui-design:explore-auto-v2`, `/workflow:ui-design:imitate-auto`
diff --git a/.claude/commands/workflow/ui-design/generate.md b/.claude/commands/workflow/ui-design/generate.md
index ddd5bcca..6941903a 100644
--- a/.claude/commands/workflow/ui-design/generate.md
+++ b/.claude/commands/workflow/ui-design/generate.md
@@ -1,225 +1,197 @@
 ---
 name: generate
-description: Generate UI prototypes in matrix mode (style × layout combinations) for pages or components
-usage: /workflow:ui-design:generate [--targets "<list>"] [--target-type "page|component"] [--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]
+description: Generate UI prototypes using target-style-centric batch generation
+usage: /workflow:ui-design:generate [--targets "<list>"] [--target-type "page|component"] [--device-type "desktop|mobile|tablet|responsive"] [--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]
 examples:
-  - /workflow:ui-design:generate --base-path ".workflow/WFS-auth/design-run-20250109-143022" --targets "dashboard,settings"
-  - /workflow:ui-design:generate --session WFS-auth --targets "home,pricing" --style-variants 2 --layout-variants 2
-  - /workflow:ui-design:generate --targets "navbar,hero,card" --target-type "component"
+  - /workflow:ui-design:generate --session WFS-auth --targets "dashboard,settings"
+  - /workflow:ui-design:generate --targets "home,pricing" --style-variants 2 --layout-variants 2
+  - /workflow:ui-design:generate --targets "app" --device-type mobile
+  - /workflow:ui-design:generate --targets "dashboard" --device-type desktop
 allowed-tools: TodoWrite(*), Read(*), Write(*), Task(ui-design-agent), Bash(*)
 ---
 
 # Generate UI Prototypes (/workflow:ui-design:generate)
 
 ## Overview
-Generate matrix of UI prototypes (`style × layout × targets`) with production-ready HTML/CSS. Optimized template-based architecture: **`S` times faster** than direct generation.
+Generate matrix of UI prototypes (`style × layout × targets`) using **target-style-centric batch generation**. Each agent handles all layouts for one target × style combination.
 
-**Strategy**: Two-layer generation
-- **Layer 1**: Generate `L × T` reusable templates (agent)
-- **Layer 2**: Instantiate `S × L × T` final prototypes (script)
+**Strategy**: Target-Style-Centric
+- **Agent scope**: Each of `T × S` agents generates `L` layouts
+- **Component isolation**: Complete task independence
+- **Style-aware**: HTML adapts to design_attributes
+- **Self-contained CSS**: Direct token values (no var() refs)
 
 **Supports**: Pages (full layouts) and components (isolated elements)
 
 ## Phase 1: Setup & Validation
 
-### Step 1: Resolve Base Path
+### Step 1: Resolve Base Path & Parse Configuration
 ```bash
 # Determine working directory
 bash(find .workflow -type d -name "design-*" | head -1)  # Auto-detect
-# OR use --base-path / --session parameters
-```
 
-### Step 2: Parse Configuration
-```bash
-# Get style variant count (default: 3)
+# Get counts (defaults: style=auto, layout=3)
 bash(ls {base_path}/style-consolidation/style-* -d | wc -l)
 
-# Get layout variant count (default: 3, configurable via --layout-variants)
+# Parse targets (Priority: --targets → --pages → synthesis-specification.md → default ["home"])
+# Target type: "page" (default) or "component"
 
-# Parse targets (pages/components)
-# Priority: --targets → --pages (legacy) → synthesis-specification.md → default ["home"]
+# Parse device type
+device_type = --device-type OR "responsive"  # Default: responsive
+
+# Try to load from .run-metadata.json if exists
+IF exists({base_path}/.run-metadata.json):
+    metadata = Read({base_path}/.run-metadata.json)
+    IF metadata.parameters.device_type:
+        device_type = metadata.parameters.device_type
 ```
 
-### Step 3: Validate Inputs
+### Step 2: Validate Inputs
 ```bash
 # Check design systems exist
 bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "valid")
 
 # Validate target names (lowercase, alphanumeric, hyphens only)
-# Target type: "page" (default) or "component"
+# Load design-space-analysis.json (optional, for style-aware generation)
 ```
 
-**Output**: `base_path`, `style_variants`, `layout_variants`, `target_list[]`, `target_type`
+**Output**: `base_path`, `style_variants`, `layout_variants`, `target_list[]`, `target_type`, `design_space_analysis` (optional), `device_type`
 
-### Step 4: Check Existing Output
+### Step 3: Detect Token Sources
 ```bash
-# Skip if already generated
-bash(test -f {base_path}/prototypes/compare.html && echo "exists")
+# Priority 1: consolidated tokens (production-ready from /workflow:ui-design:consolidate)
+# Priority 2: proposed tokens from style-cards.json (fast-track from /workflow:ui-design:extract)
+
+bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "consolidated")
+# OR
+bash(test -f {base_path}/style-extraction/style-cards.json && echo "proposed")
+
+# If proposed: Create temp consolidation dir + write proposed tokens
+bash(mkdir -p {base_path}/style-consolidation/style-{id})
+Write({base_path}/style-consolidation/style-{id}/design-tokens.json, proposed_tokens)
 ```
 
-**If exists**: Skip to completion message
+**Output**: `token_sources{}`, `consolidated_count`, `proposed_count`
 
-## Phase 2: Layout Planning
-
-### Step 1: Research Layout Patterns (Agent)
+### Step 4: Gather Layout Inspiration
 ```bash
-bash(mkdir -p {base_path}/prototypes/_templates)
+bash(mkdir -p {base_path}/prototypes/_inspirations)
+
+# For each target: Research via MCP
+# mcp__exa__web_search_exa(query="{target} {target_type} layout patterns", numResults=5)
+
+# Write simple inspiration file
+Write({base_path}/prototypes/_inspirations/{target}-layout-ideas.txt, inspiration_content)
 ```
 
-For each `target × layout_id`:
-```javascript
-Task(ui-design-agent): `
-  [TARGET_LAYOUT_PLANNING]
-  TARGET: {target} | TYPE: {target_type} | LAYOUT: {layout_id}/{layout_variants}
-  BASE_PATH: {base_path}
-  ${--session ? "REQUIREMENTS: .workflow/WFS-{session}/.brainstorming/synthesis-specification.md" : ""}
+**Output**: `L` inspiration text files
 
-  ## 参考
-  - Research via: mcp__exa__web_search_exa(query="{target} {target_type} layout patterns 2024", numResults=5)
-  - Layout differentiation: Layout 1=common, Layout 2=alternative, Layout 3=innovative
+## Phase 2: Target-Style-Centric Generation (Agent)
 
-  ## 生成
-  Write("{base_path}/prototypes/_templates/{target}-layout-{layout_id}.json")
-
-  JSON schema:
-  {
-    "id": "layout-{layout_id}",
-    "target": "{target}",
-    "target_type": "{target_type}",
-    "name": "2-4 words",
-    "description": "2-3 sentences",
-    "structure": {
-      // Page: type, regions, grid, sidebar, responsive{mobile/tablet/desktop}
-      // Component: arrangement, alignment, spacing, element_order, variants
-    },
-    "semantic_hints": ["<nav>", "<main role='main'>", ...],
-    "accessibility_features": ["skip-link", "landmarks", ...],
-    "research_references": ["source URLs/insights"]
-  }
-
-  ## 注意
-  - Layout #{layout_id} must be STRUCTURALLY DIFFERENT from other IDs
-  - Structure section must match target_type (page vs component)
-  - Write file directly, no text output
-`
-```
-
-### Step 2: Verify Layout Plans
-```bash
-# Verify files created
-bash(ls {base_path}/prototypes/_templates/*.json | wc -l)  # Should equal L×T
-
-# Validate JSON structure
-Read({base_path}/prototypes/_templates/{target}-layout-{layout_id}.json)
-```
-
-**Output**: `L × T` layout plan JSON files
-
-## Phase 3: Token Conversion
-
-### Step 1: Convert JSON to CSS Variables
-```bash
-# Check jq dependency
-bash(command -v jq >/dev/null 2>&1 || echo "ERROR: jq not found")
-
-# Convert each style's design-tokens.json to tokens.css
-bash(cat {base_path}/style-consolidation/style-1/design-tokens.json | ~/.claude/scripts/convert_tokens_to_css.sh > tokens.css)
-```
-
-### Step 2: Extract Variable Names
-```bash
-# Read generated tokens.css
-Read({base_path}/style-consolidation/style-1/tokens.css)
-
-# Extract CSS variable names (pattern: --variable-name:)
-# Categorize: colors, typography, spacing, radius, shadows
-```
-
-**Output**: `S × tokens.css` files + extracted variable list
-
-## Phase 4: Template Generation (Agent)
-
-**Executor**: `Task(ui-design-agent)` × `L × T` tasks in parallel
+**Executor**: `Task(ui-design-agent)` × `T × S` tasks in parallel
 
 ### Step 1: Launch Agent Tasks
-For each `layout_id × target`:
+```bash
+bash(mkdir -p {base_path}/prototypes)
+```
+
+For each `target × style_id`:
 ```javascript
 Task(ui-design-agent): `
-  [UI_LAYOUT_TEMPLATE_GENERATION]
-  🚨 ONE target only: '{target}' (standalone, reusable)
+  [TARGET_STYLE_UI_GENERATION]
+  🎯 ONE component: {target} × Style-{style_id} ({philosophy_name})
+  Generate: {layout_variants} × 2 files (HTML + CSS per layout)
 
-  LAYOUT: {layout_id} | TARGET: {target} | TYPE: {target_type}
+  TARGET: {target} | TYPE: {target_type} | STYLE: {style_id}/{style_variants}
   BASE_PATH: {base_path}
-  ${--session ? "REQUIREMENTS: .workflow/WFS-{session}/.brainstorming/synthesis-specification.md" : ""}
+  DEVICE: {device_type}
+  ${design_attributes ? "DESIGN_ATTRIBUTES: " + JSON.stringify(design_attributes) : ""}
 
-  ## 参考
-  - Layout plan: Read("{base_path}/prototypes/_templates/{target}-layout-{layout_id}.json")
-  - Design tokens: Read("{base_path}/style-consolidation/style-1/tokens.css")
-    Extract variables: --color-*, --font-*, --spacing-*, --border-radius-*, --shadow-*
+  ## Reference
+  - Layout inspiration: Read("{base_path}/prototypes/_inspirations/{target}-layout-ideas.txt")
+  - Design tokens: Read("{base_path}/style-consolidation/style-{style_id}/design-tokens.json")
+    Parse ALL token values (colors, typography, spacing, borders, shadows, breakpoints)
+  ${design_attributes ? "- Adapt DOM structure to: density, visual_weight, formality, organic_vs_geometric" : ""}
 
-  ## 生成
-  1. HTML: {base_path}/prototypes/_templates/{target}-layout-{layout_id}.html
-     - Complete HTML5 doc with <link href="{{STRUCTURAL_CSS}}"> and <link href="{{TOKEN_CSS}}">
-     - Body: Full structure (page) OR isolated element (component)
-     - Semantic: <header>, <nav>, <main>, <footer>, proper heading hierarchy
-     - A11y: ARIA landmarks, skip-link, alt/labels, focus styles
+  ## Generation
+  For EACH layout (1 to {layout_variants}):
 
-  2. CSS: {base_path}/prototypes/_templates/{target}-layout-{layout_id}.css
-     - Structure: Flexbox/Grid, positioning, dimensions, responsive
-     - Mobile-first: base → @media(768px) → @media(1024px)
-     - Optional: {target}-layout-{layout_id}-tokens.css for --layout-* vars
+  1. HTML: {base_path}/prototypes/{target}-style-{style_id}-layout-N.html
+     - Complete HTML5: <!DOCTYPE>, <head>, <body>
+     - CSS ref: <link href="{target}-style-{style_id}-layout-N.css">
+     - Semantic: <header>, <nav>, <main>, <footer>
+     - A11y: ARIA labels, landmarks, responsive meta
+     - Viewport meta: <meta name="viewport" content="width=device-width, initial-scale=1.0">
+     ${design_attributes ? `
+     - DOM adaptation:
+       * density='spacious' → flatter hierarchy
+       * density='compact' → deeper nesting
+       * visual_weight='heavy' → extra wrappers
+       * visual_weight='minimal' → direct structure` : ""}
+     - Device-specific structure:
+       * mobile (375×812px): Single column, stacked sections, touch targets ≥44px
+       * desktop (1920×1080px): Multi-column grids, hover states, larger hit areas
+       * tablet (768×1024px): Hybrid layouts, flexible columns
+       * responsive: Breakpoint-driven adaptive layouts (mobile-first)
 
-  ## 注意
-  - ✅ ONLY var(--token-name) from tokens.css
-  - ❌ NO hardcoded: colors (#333, rgb), spacing (16px), fonts ("Arial")
-  - ❌ NO invented variable names
-  - Body content matches target_type (page=full, component=isolated)
-  - Write files directly, no text output
+  2. CSS: {base_path}/prototypes/{target}-style-{style_id}-layout-N.css
+     - Self-contained: Direct token VALUES (no var())
+     - Use tokens: colors, fonts, spacing, borders, shadows
+     - Device-optimized styles for {device_type}
+     ${device_type === 'responsive' ? '- Responsive: Mobile-first @media(breakpoints)' : '- Fixed device: Optimize for ' + device_type}
+     ${design_attributes ? `
+     - Token selection:
+       * density → spacing scale
+       * visual_weight → shadow strength
+       * organic_vs_geometric → border-radius` : ""}
+     - Device-specific CSS:
+       * mobile: Compact spacing, touch-friendly
+       * desktop: Generous whitespace, hover effects
+       * tablet: Medium spacing, flexible grids
+       * responsive: Fluid typography, breakpoints
+
+  ## Notes
+  - ✅ Use token VALUES directly from design-tokens.json
+  - ✅ Optimize for {device_type} device
+  - ❌ NO var() references, NO external dependencies
+  - Layouts structurally DISTINCT (different grids/regions)
+  - Write files IMMEDIATELY (per layout, no accumulation)
+  - CSS filename MUST match HTML <link href="...">
+  - No text output, write to filesystem only
+  - Device-first approach: Design specifically for {device_type} user experience
 `
 ```
 
-### Step 2: Verify Templates Created
+### Step 2: Verify Generated Files
 ```bash
-# Check file count
-bash(ls {base_path}/prototypes/_templates/{target}-layout-*.html | wc -l)
+# Count expected vs found
+bash(ls {base_path}/prototypes/{target}-style-*-layout-*.html | wc -l)
 
-# Validate structure
-Read({base_path}/prototypes/_templates/{target}-layout-{layout_id}.html)
-# Check: <!DOCTYPE html>, var(--, placeholders
+# Validate samples
+Read({base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html)
+# Check: <!DOCTYPE html>, correct CSS href, sufficient CSS length
 ```
 
-**Output**: `L × T` template pairs (HTML + CSS)
+**Output**: `S × L × T × 2` files verified
 
-## Phase 5: Prototype Instantiation (Script)
+## Phase 3: Generate Preview Files
 
-### Step 1: Execute Instantiation Script
+### Step 1: Run Preview Generation Script
 ```bash
-# Verify tokens.css files exist
-bash(ls {base_path}/style-consolidation/style-*/tokens.css | wc -l)
-
-# Run instantiation script
-bash(~/.claude/scripts/ui-instantiate-prototypes.sh "{base_path}/prototypes" --session-id "{session_id}" --mode "{target_type}")
+bash(~/.claude/scripts/ui-generate-preview.sh "{base_path}/prototypes")
 ```
 
 **Script generates**:
-- `S × L × T` HTML prototypes with CSS links
-- Implementation notes for each prototype
 - `compare.html` (interactive matrix)
 - `index.html` (navigation)
-- `PREVIEW.md` (documentation)
+- `PREVIEW.md` (instructions)
 
-### Step 2: Verify Output Files
+### Step 2: Verify Preview Files
 ```bash
-# Check preview files
 bash(ls {base_path}/prototypes/compare.html {base_path}/prototypes/index.html {base_path}/prototypes/PREVIEW.md)
-
-# Count final prototypes
-bash(ls {base_path}/prototypes/{target}-style-*-layout-*.html | wc -l)
 ```
 
-**Output**: `S × L × T` final prototypes + preview files
-
-
+**Output**: 3 preview files
 
 ## Completion
 
@@ -227,38 +199,46 @@ bash(ls {base_path}/prototypes/{target}-style-*-layout-*.html | wc -l)
 ```javascript
 TodoWrite({todos: [
   {content: "Setup and validation", status: "completed", activeForm: "Loading design systems"},
-  {content: "Layout planning (agent)", status: "completed", activeForm: "Planning layouts"},
-  {content: "Token conversion", status: "completed", activeForm: "Converting tokens"},
-  {content: "Template generation (agent)", status: "completed", activeForm: "Generating templates"},
-  {content: "Prototype instantiation (script)", status: "completed", activeForm: "Running script"},
-  {content: "Verify output", status: "completed", activeForm: "Verifying files"}
+  {content: "Gather layout inspiration", status: "completed", activeForm: "Researching layouts"},
+  {content: "Target-style generation (agent)", status: "completed", activeForm: "Generating prototypes"},
+  {content: "Verify files", status: "completed", activeForm: "Validating output"},
+  {content: "Generate previews", status: "completed", activeForm: "Creating preview files"}
 ]});
 ```
 
 ### Output Message
 ```
-✅ Matrix UI generation complete!
+✅ Target-Style-Centric UI generation complete!
 
 Configuration:
 - Style Variants: {style_variants}
-- Layout Variants: {layout_variants}
+- Layout Variants: {layout_variants} (inspiration-based)
 - Target Type: {target_type}
+- Device Type: {device_type}
 - Targets: {target_list}
 - Total Prototypes: {S × L × T}
 
-Performance:
-- Templates: {L × T} (agent)
-- Prototypes: {S × L × T} (script)
-- Speed: {S}× faster
-- Script: ui-instantiate-prototypes.sh v3.0
+Agent Execution:
+- Target-style agents: T×S = {T}×{S} = {T×S} agents
+- Each agent scope: {L} layouts for one component
+- Component isolation: Complete task independence
+- Device-specific: All layouts optimized for {device_type}
+
+Quality:
+- Style-aware: {design_space_analysis ? 'HTML adapts to design_attributes' : 'Standard structure'}
+- CSS: Self-contained (direct token values, no var())
+- Device-optimized: {device_type} layouts
+- Tokens: {consolidated_count} consolidated, {proposed_count} proposed
+{IF proposed_count > 0: '  💡 For production: /workflow:ui-design:consolidate'}
 
 Generated Files:
 {base_path}/prototypes/
-├── _templates/ ({T×L} JSON + HTML + CSS)
+├── _inspirations/ ({T} text files)
 ├── {target}-style-{s}-layout-{l}.html ({S×L×T} prototypes)
+├── {target}-style-{s}-layout-{l}.css
 ├── compare.html (interactive matrix)
 ├── index.html (navigation)
-└── PREVIEW.md (documentation)
+└── PREVIEW.md (instructions)
 
 Preview:
 1. Open compare.html (recommended)
@@ -278,8 +258,9 @@ bash(find .workflow -type d -name "design-*" | head -1)
 # Count style variants
 bash(ls {base_path}/style-consolidation/style-* -d | wc -l)
 
-# List targets from templates
-bash(ls {base_path}/prototypes/_templates/*-layout-1.json | sed 's/-layout-1.json//')
+# Check token sources
+bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "consolidated")
+bash(test -f {base_path}/style-extraction/style-cards.json && echo "proposed")
 ```
 
 ### Validation Commands
@@ -287,23 +268,20 @@ bash(ls {base_path}/prototypes/_templates/*-layout-1.json | sed 's/-layout-1.jso
 # Check design tokens exist
 bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "valid")
 
-# Count template files
-bash(ls {base_path}/prototypes/_templates/*.html | wc -l)
+# Count generated files
+bash(ls {base_path}/prototypes/{target}-style-*-layout-*.html | wc -l)
 
-# Verify output complete
+# Verify preview
 bash(test -f {base_path}/prototypes/compare.html && echo "exists")
 ```
 
 ### File Operations
 ```bash
 # Create directories
-bash(mkdir -p {base_path}/prototypes/_templates)
+bash(mkdir -p {base_path}/prototypes/_inspirations)
 
-# Convert tokens to CSS
-bash(cat design-tokens.json | ~/.claude/scripts/convert_tokens_to_css.sh > tokens.css)
-
-# Run instantiation script
-bash(~/.claude/scripts/ui-instantiate-prototypes.sh "{base_path}/prototypes" --mode "page")
+# Run preview script
+bash(~/.claude/scripts/ui-generate-preview.sh "{base_path}/prototypes")
 ```
 
 ## Output Structure
@@ -311,19 +289,16 @@ bash(~/.claude/scripts/ui-instantiate-prototypes.sh "{base_path}/prototypes" --m
 ```
 {base_path}/
 ├── prototypes/
-│   ├── _templates/
-│   │   ├── {target}-layout-{l}.json  # Layout plans
-│   │   ├── {target}-layout-{l}.html  # HTML templates
-│   │   └── {target}-layout-{l}.css   # CSS templates
+│   ├── _inspirations/
+│   │   └── {target}-layout-ideas.txt  # Layout inspiration
 │   ├── {target}-style-{s}-layout-{l}.html  # Final prototypes
-│   ├── {target}-style-{s}-layout-{l}-notes.md
+│   ├── {target}-style-{s}-layout-{l}.css
 │   ├── compare.html
 │   ├── index.html
 │   └── PREVIEW.md
 └── style-consolidation/
     └── style-{s}/
         ├── design-tokens.json
-        ├── tokens.css
         └── style-guide.md
 ```
 
@@ -331,45 +306,45 @@ bash(~/.claude/scripts/ui-instantiate-prototypes.sh "{base_path}/prototypes" --m
 
 ### Common Errors
 ```
-ERROR: No design systems found
-→ Run /workflow:ui-design:consolidate first
+ERROR: No token sources found
+→ Run /workflow:ui-design:extract or /workflow:ui-design:consolidate
 
-ERROR: jq not found
-→ Install jq: brew install jq
+ERROR: MCP search failed
+→ Check network, retry
 
 ERROR: Agent task failed
-→ Check agent output, retry phase
+→ Check agent output, retry specific target×style
 
 ERROR: Script permission denied
-→ chmod +x ~/.claude/scripts/ui-instantiate-prototypes.sh
+→ chmod +x ~/.claude/scripts/ui-generate-preview.sh
 ```
 
 ### Recovery Strategies
-- **Partial failure**: Check script logs for counts
-- **Missing templates**: Regenerate Phase 4
-- **Invalid tokens**: Validate design-tokens.json
+- **Partial success**: Keep successful target×style combinations
+- **Missing design_attributes**: Works without (less style-aware)
+- **Invalid tokens**: Validate design-tokens.json structure
 
 ## Quality Checklist
 
-- [ ] CSS uses var(--token-name) only
-- [ ] No hardcoded colors/spacing
+- [ ] CSS uses direct token values (no var())
+- [ ] HTML structure adapts to design_attributes (if available)
 - [ ] Semantic HTML5 structure
 - [ ] ARIA attributes present
 - [ ] Mobile-first responsive
-- [ ] Naming: `{target}-style-{s}-layout-{l}`
+- [ ] Layouts structurally distinct
 - [ ] compare.html works
 
 ## Key Features
 
-- **Template-Based**: `S` times faster generation
-- **Target Types**: Pages and components
-- **Agent-Driven**: Parallel task execution
-- **Token-Driven**: No hardcoded values
+- **Target-Style-Centric**: `T×S` agents, each handles `L` layouts
+- **Component Isolation**: Complete task independence
+- **Style-Aware**: HTML adapts to design_attributes
+- **Self-Contained CSS**: Direct token values (no var())
+- **Inspiration-Based**: Simple text research vs complex JSON
 - **Production-Ready**: Semantic, accessible, responsive
-- **Interactive Preview**: Matrix comparison view
 
 ## Integration
 
-**Input**: design-tokens.json from `/workflow:ui-design:consolidate`
-**Output**: Prototypes for `/workflow:ui-design:update`
+**Input**: design-tokens.json, design-space-analysis.json (optional), targets
+**Output**: S×L×T prototypes for `/workflow:ui-design:update`
 **Called by**: `/workflow:ui-design:explore-auto`, `/workflow:ui-design:imitate-auto`
diff --git a/.claude/commands/workflow/ui-design/imitate-auto-v3.md b/.claude/commands/workflow/ui-design/imitate-auto-v3.md
deleted file mode 100644
index 6e4a31dc..00000000
--- a/.claude/commands/workflow/ui-design/imitate-auto-v3.md
+++ /dev/null
@@ -1,621 +0,0 @@
----
-name: imitate-auto-v3
-description: High-speed multi-page UI replication with batch screenshot and optional token refinement
-usage: /workflow:ui-design:imitate-auto-v3 --url-map "<map>" [--session <id>] [--refine-tokens] [--prompt "<desc>"]
-examples:
-  - /workflow:ui-design:imitate-auto-v3 --url-map "home:https://linear.app, features:https://linear.app/features"
-  - /workflow:ui-design:imitate-auto-v3 --session WFS-payment --url-map "pricing:https://stripe.com/pricing"
-  - /workflow:ui-design:imitate-auto-v3 --url-map "dashboard:https://app.com/dash" --refine-tokens
-  - /workflow:ui-design:imitate-auto-v3 --url-map "home:https://example.com, about:https://example.com/about" --prompt "Focus on minimalist design"
-allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Write(*), Bash(*)
----
-
-# UI Design Imitate-Auto Workflow (V3)
-
-## Overview & Philosophy
-
-**批量多页面快速复现工作流**：通过编排器模式组合capture、extract、generate-v2命令，实现高效的批量页面复制。
-
-## Parameter Requirements
-
-### Required Parameters
-- `--url-map "<map>"` (必需): 目标页面映射
-  - 格式：`"target1:url1, target2:url2, ..."`
-  - 示例：`"home:https://linear.app, pricing:https://linear.app/pricing"`
-  - 第一个target作为主要样式来源
-
-### Optional Parameters
-- `--session <id>` (可选): 工作流会话ID
-  - 集成到现有会话（`.workflow/WFS-{session}/`）
-  - 启用自动设计系统集成（Phase 5）
-  - 如不提供：standalone模式（`.workflow/.design/`）
-
-- `--refine-tokens` (可选, 默认: false): 启用完整token refinement
-  - `false` (默认): 快速路径，跳过consolidate（~30-60s faster）
-  - `true`: 生产质量，执行完整consolidate（philosophy-driven refinement）
-
-- `--prompt "<desc>"` (可选): 样式提取指导
-  - 影响extract命令的分析重点
-  - 示例：`"Focus on dark mode"`, `"Emphasize minimalist design"`
-
-## 5-Phase Execution Protocol
-
-### Phase 0: 初始化和目标解析
-
-```bash
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-REPORT: "🚀 UI Design Imitate-Auto V3"
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-
-# 生成run ID
-run_id = "run-$(date +%Y%m%d-%H%M%S)"
-
-# 确定base path和session mode
-IF --session:
-    session_id = {provided_session}
-    base_path = ".workflow/WFS-{session_id}/design-{run_id}"
-    session_mode = "integrated"
-    REPORT: "Mode: Integrated (Session: {session_id})"
-ELSE:
-    session_id = null
-    base_path = ".workflow/.design/{run_id}"
-    session_mode = "standalone"
-    REPORT: "Mode: Standalone"
-
-# 创建base目录
-Bash(mkdir -p "{base_path}")
-
-# 解析url-map
-url_map_string = {--url-map}
-VALIDATE: url_map_string is not empty, "--url-map parameter is required"
-
-# 解析target:url pairs
-url_map = {}  # {target_name: url}
-target_names = []
-
-FOR pair IN split(url_map_string, ","):
-    pair = pair.strip()
-
-    IF ":" NOT IN pair:
-        ERROR: "Invalid url-map format: '{pair}'"
-        ERROR: "Expected format: 'target:url'"
-        ERROR: "Example: 'home:https://example.com, pricing:https://example.com/pricing'"
-        EXIT 1
-
-    target, url = pair.split(":", 1)
-    target = target.strip().lower().replace(" ", "-")
-    url = url.strip()
-
-    url_map[target] = url
-    target_names.append(target)
-
-VALIDATE: len(target_names) > 0, "url-map must contain at least one target:url pair"
-
-primary_target = target_names[0]  # 第一个作为主要样式来源
-refine_tokens_mode = --refine-tokens OR false
-
-# 写入元数据
-metadata = {
-    "workflow": "imitate-auto-v3",
-    "run_id": run_id,
-    "session_id": session_id,
-    "timestamp": current_timestamp(),
-    "parameters": {
-        "url_map": url_map,
-        "refine_tokens": refine_tokens_mode,
-        "prompt": --prompt OR null
-    },
-    "targets": target_names,
-    "status": "in_progress"
-}
-
-Write("{base_path}/.run-metadata.json", JSON.stringify(metadata, null, 2))
-
-REPORT: ""
-REPORT: "Configuration:"
-REPORT: "  Targets: {len(target_names)} pages"
-REPORT: "  Primary source: '{primary_target}' ({url_map[primary_target]})"
-REPORT: "  All targets: {', '.join(target_names)}"
-REPORT: "  Token refinement: {refine_tokens_mode ? 'Enabled (production quality)' : 'Disabled (fast-track)'}"
-IF --prompt:
-    REPORT: "  Prompt guidance: \"{--prompt}\""
-REPORT: ""
-
-# 初始化TodoWrite
-TodoWrite({todos: [
-  {content: "Initialize and parse url-map", status: "completed", activeForm: "Initializing"},
-  {content: f"Batch screenshot capture ({len(target_names)} targets)", status: "pending", activeForm: "Capturing screenshots"},
-  {content: "Extract unified design system", status: "pending", activeForm: "Extracting style"},
-  {content: refine_tokens_mode ? "Refine design tokens via consolidate" : "Fast token adaptation (skip consolidate)", status: "pending", activeForm: "Processing tokens"},
-  {content: f"Generate UI for {len(target_names)} targets", status: "pending", activeForm: "Generating UI"},
-  {content: session_id ? "Integrate design system" : "Standalone completion", status: "pending", activeForm: "Completing"}
-]})
-```
-
-### Phase 1: 批量截图捕获
-
-```bash
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-REPORT: "🚀 Phase 1: Batch Screenshot Capture"
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-
-# 构建url-map字符串（传递给capture命令）
-url_map_command_string = ",".join([f"{name}:{url}" for name, url in url_map.items()])
-
-# 调用capture命令
-capture_command = f"/workflow:ui-design:capture --base-path \"{base_path}\" --url-map \"{url_map_command_string}\""
-
-REPORT: "Calling capture command..."
-REPORT: f"  Command: {capture_command}"
-
-TRY:
-    SlashCommand(capture_command)
-CATCH error:
-    ERROR: "Screenshot capture failed: {error}"
-    ERROR: "Cannot proceed without screenshots"
-    EXIT 1
-
-# capture命令输出到: {base_path}/screenshots/{target}.png + capture-metadata.json
-
-# 验证截图结果
-screenshot_metadata_path = "{base_path}/screenshots/capture-metadata.json"
-
-IF NOT exists(screenshot_metadata_path):
-    ERROR: "capture command did not generate metadata file"
-    ERROR: "Expected: {screenshot_metadata_path}"
-    EXIT 1
-
-screenshot_metadata = Read(screenshot_metadata_path)
-captured_count = screenshot_metadata.total_captured
-total_requested = screenshot_metadata.total_requested
-missing_count = total_requested - captured_count
-
-REPORT: ""
-REPORT: "✅ Phase 1 complete:"
-REPORT: "   Captured: {captured_count}/{total_requested} screenshots ({(captured_count/total_requested*100):.1f}%)"
-
-IF missing_count > 0:
-    missing_targets = [s.target for s in screenshot_metadata.screenshots if not s.captured]
-    WARN: "   ⚠️ Missing {missing_count} screenshots: {', '.join(missing_targets)}"
-    WARN: "   Proceeding with available screenshots for extract phase"
-
-# 如果所有截图都失败，终止
-IF captured_count == 0:
-    ERROR: "No screenshots captured - cannot proceed"
-    ERROR: "Please check URLs and tool availability"
-    EXIT 1
-
-TodoWrite(mark_completed: f"Batch screenshot capture ({len(target_names)} targets)",
-          mark_in_progress: "Extract unified design system")
-```
-
-### Phase 2: 统一设计系统提取
-
-```bash
-REPORT: ""
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-REPORT: "🚀 Phase 2: Extract Unified Design System"
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-
-# 使用所有截图作为输入，提取单一设计系统
-images_glob = f"{base_path}/screenshots/*.{{png,jpg,jpeg,webp}}"
-
-# 构建extraction prompt
-IF --prompt:
-    user_guidance = {--prompt}
-    extraction_prompt = f"Extract a single, high-fidelity design system that accurately imitates the visual style from the '{primary_target}' page. Use other screenshots for component consistency. User guidance: {user_guidance}"
-ELSE:
-    extraction_prompt = f"Extract a single, high-fidelity design system that accurately imitates the visual style from the '{primary_target}' page. Use other screenshots to ensure component and pattern consistency across all pages."
-
-# 调用extract命令（imitate模式，单变体）
-extract_command = f"/workflow:ui-design:extract --base-path \"{base_path}\" --images \"{images_glob}\" --prompt \"{extraction_prompt}\" --mode imitate --variants 1"
-
-REPORT: "Calling extract command..."
-REPORT: f"  Mode: imitate (high-fidelity single style)"
-REPORT: f"  Primary source: '{primary_target}'"
-REPORT: f"  Images: {images_glob}"
-
-TRY:
-    SlashCommand(extract_command)
-CATCH error:
-    ERROR: "Style extraction failed: {error}"
-    ERROR: "Cannot proceed without design system"
-    EXIT 1
-
-# extract输出到: {base_path}/style-extraction/style-cards.json
-
-# 验证提取结果
-style_cards_path = "{base_path}/style-extraction/style-cards.json"
-
-IF NOT exists(style_cards_path):
-    ERROR: "extract command did not generate style-cards.json"
-    ERROR: "Expected: {style_cards_path}"
-    EXIT 1
-
-style_cards = Read(style_cards_path)
-
-IF len(style_cards.style_cards) != 1:
-    ERROR: "Expected single variant in imitate mode, got {len(style_cards.style_cards)}"
-    EXIT 1
-
-extracted_style = style_cards.style_cards[0]
-
-REPORT: ""
-REPORT: "✅ Phase 2 complete:"
-REPORT: "   Style: '{extracted_style.name}'"
-REPORT: "   Philosophy: {extracted_style.design_philosophy}"
-REPORT: "   Tokens: {count_tokens(extracted_style.proposed_tokens)} proposed tokens"
-
-TodoWrite(mark_completed: "Extract unified design system",
-          mark_in_progress: refine_tokens_mode ? "Refine design tokens via consolidate" : "Fast token adaptation")
-```
-
-### Phase 3: Token处理（条件性Consolidate）
-
-```bash
-REPORT: ""
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-REPORT: "🚀 Phase 3: Token Processing"
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-
-IF refine_tokens_mode:
-    # 路径A：完整consolidate（生产级质量）
-    REPORT: "🔧 Using full consolidate for production-ready tokens"
-    REPORT: "   Benefits:"
-    REPORT: "   • Philosophy-driven token refinement"
-    REPORT: "   • WCAG AA accessibility validation"
-    REPORT: "   • Complete design system documentation"
-    REPORT: "   • Token gap filling and consistency checks"
-    REPORT: ""
-
-    consolidate_command = f"/workflow:ui-design:consolidate --base-path \"{base_path}\" --variants 1"
-
-    REPORT: f"Calling consolidate command..."
-
-    TRY:
-        SlashCommand(consolidate_command)
-    CATCH error:
-        ERROR: "Token consolidation failed: {error}"
-        ERROR: "Cannot proceed without refined tokens"
-        EXIT 1
-
-    # consolidate输出到: {base_path}/style-consolidation/style-1/design-tokens.json
-    tokens_path = "{base_path}/style-consolidation/style-1/design-tokens.json"
-
-    IF NOT exists(tokens_path):
-        ERROR: "consolidate command did not generate design-tokens.json"
-        ERROR: "Expected: {tokens_path}"
-        EXIT 1
-
-    REPORT: ""
-    REPORT: "✅ Full consolidate complete"
-    REPORT: "   Output: style-consolidation/style-1/"
-    REPORT: "   Quality: Production-ready"
-    token_quality = "production-ready (consolidated)"
-    time_spent_estimate = "~60s"
-
-ELSE:
-    # 路径B：Fast Token Adaptation（快速路径）
-    REPORT: "⚡ Fast token adaptation (skipping consolidate for speed)"
-    REPORT: "   Note: Using proposed tokens from extraction phase"
-    REPORT: "   For production quality, re-run with --refine-tokens flag"
-    REPORT: ""
-
-    # 直接复制proposed_tokens到consolidation目录
-    style_cards = Read("{base_path}/style-extraction/style-cards.json")
-    proposed_tokens = style_cards.style_cards[0].proposed_tokens
-
-    # 创建目录并写入tokens
-    consolidation_dir = "{base_path}/style-consolidation/style-1"
-    Bash(mkdir -p "{consolidation_dir}")
-
-    tokens_path = f"{consolidation_dir}/design-tokens.json"
-    Write(tokens_path, JSON.stringify(proposed_tokens, null, 2))
-
-    # 创建简化style guide
-    variant = style_cards.style_cards[0]
-    simple_guide = f"""# Design System: {variant.name}
-
-## Design Philosophy
-{variant.design_philosophy}
-
-## Description
-{variant.description}
-
-## Design Tokens
-All tokens in `design-tokens.json` follow OKLCH color space.
-
-**Note**: Generated in fast-track imitate mode using proposed tokens from extraction.
-For production-ready quality with philosophy-driven refinement, re-run with `--refine-tokens` flag.
-
-## Color Preview
-- Primary: {variant.preview.primary if variant.preview else "N/A"}
-- Background: {variant.preview.background if variant.preview else "N/A"}
-
-## Typography Preview
-- Heading Font: {variant.preview.font_heading if variant.preview else "N/A"}
-
-## Token Categories
-{list_token_categories(proposed_tokens)}
-"""
-
-    Write(f"{consolidation_dir}/style-guide.md", simple_guide)
-
-    REPORT: "✅ Fast adaptation complete (~2s vs ~60s with consolidate)"
-    REPORT: "   Output: style-consolidation/style-1/"
-    REPORT: "   Quality: Proposed (not refined)"
-    REPORT: "   Time saved: ~30-60s"
-    token_quality = "proposed (fast-track)"
-    time_spent_estimate = "~2s"
-
-REPORT: ""
-REPORT: "Token processing summary:"
-REPORT: "   Path: {refine_tokens_mode ? 'Full consolidate' : 'Fast adaptation'}"
-REPORT: "   Quality: {token_quality}"
-REPORT: "   Time: {time_spent_estimate}"
-
-TodoWrite(mark_completed: refine_tokens_mode ? "Refine design tokens via consolidate" : "Fast token adaptation",
-          mark_in_progress: f"Generate UI for {len(target_names)} targets")
-```
-
-### Phase 4: 批量UI生成
-
-```bash
-REPORT: ""
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-REPORT: "🚀 Phase 4: Batch UI Generation"
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-
-# 构建targets字符串
-targets_string = ",".join(target_names)
-
-# 调用generate-v2（智能token源检测会自动选择tokens）
-generate_command = f"/workflow:ui-design:generate-v2 --base-path \"{base_path}\" --targets \"{targets_string}\" --target-type page --style-variants 1 --layout-variants 1"
-
-REPORT: "Calling generate-v2 command..."
-REPORT: f"  Targets: {targets_string}"
-REPORT: f"  Configuration: 1 style × 1 layout × {len(target_names)} pages"
-REPORT: f"  Token source: generate-v2 will auto-detect ({token_quality})"
-
-TRY:
-    SlashCommand(generate_command)
-CATCH error:
-    ERROR: "UI generation failed: {error}"
-    ERROR: "Design tokens may be invalid"
-    EXIT 1
-
-# generate-v2输出到: {base_path}/prototypes/{target}-style-1-layout-1.html
-
-# 验证生成结果
-prototypes_dir = "{base_path}/prototypes"
-generated_html_files = Glob(f"{prototypes_dir}/*-style-1-layout-1.html")
-generated_count = len(generated_html_files)
-
-REPORT: ""
-REPORT: "✅ Phase 4 complete:"
-REPORT: "   Generated: {generated_count} HTML prototypes"
-REPORT: "   Targets: {', '.join(target_names)}"
-REPORT: "   Output: {prototypes_dir}/"
-
-IF generated_count < len(target_names):
-    WARN: "   ⚠️ Expected {len(target_names)} prototypes, generated {generated_count}"
-    WARN: "   Some targets may have failed - check generate-v2 output"
-
-TodoWrite(mark_completed: f"Generate UI for {len(target_names)} targets",
-          mark_in_progress: session_id ? "Integrate design system" : "Standalone completion")
-```
-
-### Phase 5: 设计系统集成
-
-```bash
-REPORT: ""
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-REPORT: "🚀 Phase 5: Design System Integration"
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-
-IF session_id:
-    REPORT: "Integrating design system into session {session_id}..."
-
-    update_command = f"/workflow:ui-design:update --session {session_id}"
-
-    TRY:
-        SlashCommand(update_command)
-    CATCH error:
-        WARN: "Design system integration failed: {error}"
-        WARN: "Prototypes are still available at {base_path}/prototypes/"
-        # 不终止，因为prototypes已经生成
-
-    REPORT: "✅ Design system integrated into session {session_id}"
-ELSE:
-    REPORT: "ℹ️ Standalone mode: Skipping integration"
-    REPORT: "   Prototypes available at: {base_path}/prototypes/"
-    REPORT: "   To integrate later:"
-    REPORT: "   1. Create a workflow session"
-    REPORT: "   2. Copy design-tokens.json to session artifacts"
-
-# 更新元数据
-metadata = Read("{base_path}/.run-metadata.json")
-metadata.status = "completed"
-metadata.completion_time = current_timestamp()
-metadata.outputs = {
-    "screenshots": f"{base_path}/screenshots/",
-    "style_system": f"{base_path}/style-consolidation/style-1/",
-    "prototypes": f"{base_path}/prototypes/",
-    "token_quality": token_quality,
-    "captured_count": captured_count,
-    "generated_count": generated_count
-}
-Write("{base_path}/.run-metadata.json", JSON.stringify(metadata, null, 2))
-
-TodoWrite(mark_completed: session_id ? "Integrate design system" : "Standalone completion")
-```
-
-### Phase 6: 完成报告
-
-```javascript
-TodoWrite({todos: [
-  {content: "Initialize and parse url-map", status: "completed", activeForm: "Initializing"},
-  {content: f"Batch screenshot capture ({len(target_names)} targets)", status: "completed", activeForm: "Capturing"},
-  {content: "Extract unified design system", status: "completed", activeForm: "Extracting"},
-  {content: refine_tokens_mode ? "Refine design tokens via consolidate" : "Fast token adaptation", status: "completed", activeForm: "Processing"},
-  {content: f"Generate UI for {len(target_names)} targets", status: "completed", activeForm: "Generating"},
-  {content: session_id ? "Integrate design system" : "Standalone completion", status: "completed", activeForm: "Completing"}
-]});
-```
-
-**Completion Message**:
-```
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-✅ UI Design Imitate-Auto V3 Complete!
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-━━━ 📊 Workflow Summary ━━━
-
-Mode: Batch Multi-Page Replication
-Session: {session_id or "standalone"}
-Run ID: {run_id}
-
-Phase 1 - Screenshot Capture: ✅ {captured_count}/{total_requested} screenshots
-  {IF captured_count < total_requested: f"⚠️ {total_requested - captured_count} missing" ELSE: "All targets captured"}
-
-Phase 2 - Style Extraction: ✅ Single unified design system
-  Style: {extracted_style.name}
-  Philosophy: {extracted_style.design_philosophy[:80]}...
-
-Phase 3 - Token Processing: ✅ {token_quality}
-  {IF refine_tokens_mode:
-    "Full consolidate (~60s)"
-    "Quality: Production-ready with philosophy-driven refinement"
-  ELSE:
-    "Fast adaptation (~2s, saved ~30-60s)"
-    "Quality: Proposed tokens (for production, use --refine-tokens)"
-  }
-
-Phase 4 - UI Generation: ✅ {generated_count} pages generated
-  Targets: {', '.join(target_names)}
-  Configuration: 1 style × 1 layout × {generated_count} pages
-
-Phase 5 - Integration: {IF session_id: "✅ Integrated into session" ELSE: "⏭️ Standalone mode"}
-
-━━━ 📂 Output Structure ━━━
-
-{base_path}/
-├── screenshots/                    # {captured_count} screenshots
-│   ├── {target1}.png
-│   ├── {target2}.png
-│   └── capture-metadata.json
-├── style-extraction/               # Design analysis
-│   └── style-cards.json
-├── style-consolidation/            # {token_quality}
-│   └── style-1/
-│       ├── design-tokens.json
-│       └── style-guide.md
-└── prototypes/                     # {generated_count} HTML/CSS files
-    ├── {target1}-style-1-layout-1.html + .css
-    ├── {target2}-style-1-layout-1.html + .css
-    ├── compare.html                # Interactive preview
-    └── index.html                  # Quick navigation
-
-━━━ ⚡ Performance ━━━
-
-Total workflow time: ~{estimate_total_time()} minutes
-  Screenshot capture: ~{capture_time}
-  Style extraction: ~{extract_time}
-  Token processing: ~{token_processing_time}
-  UI generation: ~{generate_time}
-
-vs imitate-auto v1: ✅ Batch support ({len(target_names)} pages vs 1 page limit)
-vs explore-auto: ✅ ~2-3× faster (single style focus{" + skipped consolidate" if not refine_tokens_mode else ""})
-
-━━━ 🌐 Next Steps ━━━
-
-1. Preview prototypes:
-   • Interactive matrix: Open {base_path}/prototypes/compare.html
-   • Quick navigation: Open {base_path}/prototypes/index.html
-
-{IF session_id:
-2. Create implementation tasks:
-   /workflow:plan --session {session_id}
-
-3. Generate tests (if needed):
-   /workflow:test-gen {session_id}
-ELSE:
-2. To integrate into a workflow session:
-   • Create session: /workflow:session:start
-   • Copy design-tokens.json to session artifacts
-
-3. Explore prototypes in {base_path}/prototypes/ directory
-}
-
-{IF NOT refine_tokens_mode:
-💡 Production Quality Tip:
-   Fast-track mode used proposed tokens for speed.
-   For production-ready quality with full token refinement:
-   /workflow:ui-design:imitate-auto-v3 --url-map "{url_map_command_string}" --refine-tokens {f"--session {session_id}" if session_id else ""}
-}
-
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-```
-
-## TodoWrite Pattern
-
-```javascript
-// Initialize (Phase 0)
-TodoWrite({todos: [
-  {content: "Initialize and parse url-map", status: "in_progress", activeForm: "Initializing"},
-  {content: "Batch screenshot capture", status: "pending", activeForm: "Capturing screenshots"},
-  {content: "Extract unified design system", status: "pending", activeForm: "Extracting style"},
-  {content: refine_tokens ? "Refine tokens via consolidate" : "Fast token adaptation", status: "pending", activeForm: "Processing tokens"},
-  {content: "Generate UI for all targets", status: "pending", activeForm: "Generating UI"},
-  {content: "Integrate design system", status: "pending", activeForm: "Integrating"}
-]})
-
-// Update after each phase: Mark current completed, next in_progress
-```
-
-## Error Handling
-
-### Pre-execution Checks
-- **url-map format validation**: Clear error message with format example
-- **Empty url-map**: Error and exit
-- **Invalid target names**: Regex validation with suggestions
-
-### Phase-Specific Errors
-- **Screenshot capture failure (Phase 1)**:
-  - If total_captured == 0: Terminate workflow
-  - If partial failure: Warn but continue with available screenshots
-
-- **Style extraction failure (Phase 2)**:
-  - If extract fails: Terminate with clear error
-  - If style-cards.json missing: Terminate with debugging info
-
-- **Token processing failure (Phase 3)**:
-  - Consolidate mode: Terminate if consolidate fails
-  - Fast mode: Validate proposed_tokens exist before copying
-
-- **UI generation failure (Phase 4)**:
-  - If generate-v2 fails: Terminate with error
-  - If generated_count < target_count: Warn but proceed
-
-- **Integration failure (Phase 5)**:
-  - Non-blocking: Warn but don't terminate
-  - Prototypes already available
-
-### Recovery Strategies
-- **Partial screenshot failure**: Continue with available screenshots, list missing in warning
-- **Generate failure**: Report specific target failures, user can re-generate individually
-- **Integration failure**: Prototypes still usable, can integrate manually
-
-
-## Integration Points
-
-- **Input**: `--url-map` (multiple target:url pairs) + optional `--session`, `--refine-tokens`, `--prompt`
-- **Output**: Complete design system in `{base_path}/` (screenshots, style-extraction, style-consolidation, prototypes)
-- **Sub-commands Called**:
-  1. `/workflow:ui-design:capture` (Phase 1)
-  2. `/workflow:ui-design:extract` (Phase 2)
-  3. `/workflow:ui-design:consolidate` (Phase 3, conditional)
-  4. `/workflow:ui-design:generate-v2` (Phase 4)
-  5. `/workflow:ui-design:update` (Phase 5, if --session)
-- **Deprecates**: `imitate-auto.md` (v1, single URL only)
-
diff --git a/.claude/commands/workflow/ui-design/imitate-auto.md b/.claude/commands/workflow/ui-design/imitate-auto.md
index 15f823b9..e1162e6a 100644
--- a/.claude/commands/workflow/ui-design/imitate-auto.md
+++ b/.claude/commands/workflow/ui-design/imitate-auto.md
@@ -1,497 +1,679 @@
 ---
 name: imitate-auto
-deprecated: true
-redirect_to: imitate-auto-v3
-description: "[DEPRECATED] Use /workflow:ui-design:imitate-auto-v3 for batch multi-page support. This command redirects to v3 with parameter conversion."
-usage: /workflow:ui-design:imitate-auto [--url "<url>"] [--images "<glob>"] [--prompt "<desc>"] [--targets "<list>"] [--target-type "page|component"] [--session <id>]
+description: High-speed multi-page UI replication with batch screenshot and optional token refinement
+usage: /workflow:ui-design:imitate-auto --url-map "<map>" [--capture-mode <batch|deep>] [--depth <1-5>] [--session <id>] [--refine-tokens] [--prompt "<desc>"]
 examples:
-  - /workflow:ui-design:imitate-auto --url "https://linear.app" --targets "home,features,pricing"
-  - /workflow:ui-design:imitate-auto --images "refs/design.png" --prompt "Imitate this minimalist design for dashboard and settings"
-  - /workflow:ui-design:imitate-auto --url "https://stripe.com" --session WFS-payment
-  - /workflow:ui-design:imitate-auto --images "refs/*.png" --targets "home"
-  - /workflow:ui-design:imitate-auto --url "https://example.com" --targets "navbar,hero" --target-type "component"
-allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*)
+  - /workflow:ui-design:imitate-auto --url-map "home:https://linear.app, features:https://linear.app/features"
+  - /workflow:ui-design:imitate-auto --session WFS-payment --url-map "pricing:https://stripe.com/pricing"
+  - /workflow:ui-design:imitate-auto --url-map "dashboard:https://app.com/dash" --refine-tokens
+  - /workflow:ui-design:imitate-auto --url-map "app:https://app.com" --capture-mode deep --depth 3
+  - /workflow:ui-design:imitate-auto --url-map "home:https://example.com, about:https://example.com/about" --prompt "Focus on minimalist design"
+allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Write(*), Bash(*)
 ---
 
-# UI Design Imitate-Auto Workflow Command
+# UI Design Imitate-Auto Workflow
 
 ## Overview & Philosophy
 
-**Fast-track UI imitation workflow**: Replicates a single design style from reference source (URL or images), bypassing exploration and consolidation phases for maximum speed (~2-3× faster than explore-auto).
-
-**Core Philosophy**:
-- **Imitation over Exploration**: Focus on replicating specific design, not generating variants
-- **Single Mode**: Always 1 style × 1 layout × N targets
-- **Speed Optimized**: Bypasses `consolidate` step via direct token extraction
-- **Reference-Driven**: Requires URL or images as primary input
-- **Auto-Screenshot**: Supports Playwright/Chrome with manual upload fallback
-
-**Streamlined Flow**: Phase 0 (init) → 0.5 (screenshot) → 0.75 (URL analysis if needed) → 1 (extraction) → 2 (token adapt) → 3 (generate) → 4 (integrate)
-
-**Performance**: ~2-3× faster than explore-auto for single-style scenarios
-
-**Ideal For**: MVP development, high-fidelity prototyping, design replication, studying successful patterns
-
-## Key Features
-
-- **Fast-Track Imitation**: ~2-3× faster than explore-auto by bypassing consolidation phase
-- **Reference-Driven**: Requires URL or images as primary design source for accurate replication
-- **Auto-Screenshot Capability**: Intelligent fallback (Playwright → Chrome → Manual upload) for URL-based workflows
-- **Single-Style Focus**: Always generates 1 style × 1 layout × N targets for streamlined execution
-- **Consolidation Bypass**: Direct design token extraction saves 30-60s per workflow
-- **Interactive Confirmation**: User validates inferred targets before execution to prevent mistakes
-- **Flexible Target Types**: Supports both full-page layouts and isolated UI components
-
-## Core Rules
-
-1. **Start Immediately**: TodoWrite initialization → Phase 0 execution
-2. **No Multi-Variant**: Always 1 style × 1 layout × N targets
-3. **Reference Required**: Must provide `--url` OR `--images`
-4. **Auto-Continue**: Automatic phase progression without pausing
-5. **Track Progress**: Update TodoWrite after each phase
+**Batch Multi-Page Fast Replication Workflow**: Efficiently replicate multiple pages through orchestrator pattern combining capture, extract, and generate commands.
 
 ## Parameter Requirements
 
-**Required Parameters** (at least one must be provided):
-- `--url "<url>"`: Reference website URL for style imitation (supports auto-screenshot)
-- `--images "<glob>"`: Reference image paths (e.g., `refs/*.png`, `design-refs/*.jpg`)
+### Required Parameters
+- `--url-map "<map>"` (Required): Target page mapping
+  - Format: `"target1:url1, target2:url2, ..."`
+  - Example: `"home:https://linear.app, pricing:https://linear.app/pricing"`
+  - First target serves as primary style source
 
-**Optional Parameters** (all have smart defaults):
-- `--targets "<list>"`: Comma-separated targets (pages/components) to generate
-  - Examples: `"home,dashboard"`, `"navbar,hero,card"`
-  - If omitted: inferred from `--prompt` or defaults to `["home"]`
-- `--target-type "page|component"`: Explicitly set target type
-  - `page`: Full-page layouts with complete structure
-  - `component`: Isolated UI elements with minimal wrapper
-  - Default: intelligent detection based on target names
-- `--session <id>`: Workflow session ID (e.g., `WFS-ecommerce`)
-  - If provided: integrates with session brainstorming artifacts
-  - If omitted: runs in standalone mode
-- `--prompt "<description>"`: Design guidance and target hints
-  - Used for target inference and style extraction refinement
-  - Examples: `"Imitate dark mode for dashboard"`, `"Focus on minimalist design"`
+### Optional Parameters
+- `--capture-mode <batch|deep>` (Optional, default: batch): Screenshot capture strategy
+  - `batch` (default): Multi-URL fast batch capture via `/workflow:ui-design:capture`
+  - `deep`: Single-URL interactive depth exploration via `/workflow:ui-design:explore-layers`
+  - **Note**: `deep` mode only uses first URL from url-map
 
-**Legacy Parameters** (maintained for backward compatibility):
-- `--pages "<list>"`: Alias for `--targets` with `--target-type page`
+- `--depth <1-5>` (Optional, default: 3): Capture depth for deep mode
+  - `1`: Page level (full-page screenshot)
+  - `2`: Element level (+ key components)
+  - `3`: Interaction level (+ modals, dropdowns)
+  - `4`: Embedded level (+ iframes)
+  - `5`: Shadow DOM (+ web components)
+  - **Only applies when** `--capture-mode deep`
 
-**Not Supported** (use `/workflow:ui-design:explore-auto` instead):
-- `--style-variants`, `--layout-variants`, `--batch-plan`
+- `--session <id>` (Optional): Workflow session ID
+  - Integrate into existing session (`.workflow/WFS-{session}/`)
+  - Enable automatic design system integration (Phase 5)
+  - If not provided: standalone mode (`.workflow/.design/`)
 
-**Input Rules**:
-- Must provide at least one: `--url` OR `--images`
-- Multiple parameters can be combined for guided imitation
-- If `--targets` not provided, intelligently inferred from prompt or defaults to `["home"]`
-- URL and images can be used together (screenshot + additional references)
+- `--refine-tokens` (Optional, default: false): Enable full token refinement
+  - `false` (default): Fast path, skip consolidate (~30-60s faster)
+  - `true`: Production quality, execute full consolidate (philosophy-driven refinement)
 
-**Supported Target Types**:
-- **Pages** (full layouts): home, dashboard, settings, profile, login, pricing, etc.
-- **Components** (UI elements):
-  - Navigation: navbar, header, menu, sidebar, tabs
-  - Content: hero, card, list, table, gallery
-  - Input: form, search, filter, button
-  - Feedback: modal, alert, toast, badge
-  - Other: footer, dropdown, avatar, pagination
+- `--prompt "<desc>"` (Optional): Style extraction guidance
+  - Influences extract command analysis focus
+  - Example: `"Focus on dark mode"`, `"Emphasize minimalist design"`
 
-## ⚠️ DEPRECATION NOTICE
+## 5-Phase Execution Protocol
 
-**This command is deprecated in favor of `/workflow:ui-design:imitate-auto-v3`.**
-
-**Reasons for upgrade:**
-- ✅ Batch multi-page support (v1 = single URL only)
-- ✅ MCP-driven screenshot capture (more reliable)
-- ✅ Optional token refinement control (--refine-tokens)
-- ✅ Better error handling and progress tracking
-
-**This command now acts as a compatibility wrapper:**
-- Automatically redirects to imitate-auto-v3
-- Converts legacy parameters to v3 format
-- Maintains backward compatibility during transition
-
-## Parameter Conversion & Redirect
-
-### Phase 0: Deprecation Warning and Parameter Conversion
+### Phase 0: Initialization and Target Parsing
 
 ```bash
 REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-REPORT: "⚠️ DEPRECATION WARNING"
+REPORT: "🚀 UI Design Imitate-Auto"
 REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-REPORT: ""
-REPORT: "/workflow:ui-design:imitate-auto is DEPRECATED"
-REPORT: ""
-REPORT: "This command redirects to /workflow:ui-design:imitate-auto-v3"
-REPORT: "with automatic parameter conversion for backward compatibility."
-REPORT: ""
-REPORT: "📋 Key Improvements in V3:"
-REPORT: "  • Batch multi-page support (v1 limited to single URL)"
-REPORT: "  • MCP-driven screenshot capture (more reliable)"
-REPORT: "  • Optional --refine-tokens flag for quality control"
-REPORT: "  • Better error handling and progress visibility"
-REPORT: ""
-REPORT: "💡 Migration Guide:"
-REPORT: "  OLD: /workflow:ui-design:imitate-auto --url 'https://example.com' --targets 'home,pricing'"
-REPORT: "  NEW: /workflow:ui-design:imitate-auto-v3 --url-map 'home:https://example.com, pricing:https://example.com/pricing'"
-REPORT: ""
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-REPORT: ""
-REPORT: "Converting parameters..."
 
-# Parameter conversion logic
-url_value = --url OR null
-images_value = --images OR null
-targets_value = --targets OR null
-prompt_value = --prompt OR null
-session_value = --session OR null
-
-# Validate: v1 requires either --url or --images
-IF NOT url_value AND NOT images_value:
-    ERROR: "Either --url or --images must be provided"
-    ERROR: "For v3 usage, see: /help imitate-auto-v3"
-    EXIT 1
-
-# Parameter conversion strategy
-converted_params = []
-
-# Handle url-map conversion
-IF url_value:
-    # Build url-map from --url and --targets
-    IF targets_value:
-        # Multi-target case: url + targets
-        target_list = split(targets_value, ",")
-        url_map_pairs = [f"{target.strip()}:{url_value}" for target in target_list]
-        url_map_string = ", ".join(url_map_pairs)
-    ELSE:
-        # Single target case: default to "home"
-        url_map_string = f"home:{url_value}"
-
-    converted_params.append(f'--url-map "{url_map_string}"')
-    REPORT: "  ✓ Converted --url + --targets to --url-map: \"{url_map_string}\""
-
-ELSE IF images_value:
-    # Images mode: v3 doesn't have direct --images support in imitate-auto-v3
-    # Need to use extract manually, then call imitate-auto-v3 without capture
-    WARN: "⚠️ --images parameter not directly supported in v3"
-    WARN: "   v3 focuses on URL-based batch capture"
-    WARN: ""
-    WARN: "   For image-based workflows, use this sequence:"
-    WARN: "   1. /workflow:ui-design:extract --images '{images_value}' --mode imitate"
-    WARN: "   2. /workflow:ui-design:generate-v2 (will auto-detect proposed tokens)"
-    WARN: ""
-    ERROR: "Cannot auto-convert --images parameter"
-    ERROR: "Please use manual workflow sequence above"
-    EXIT 1
-
-# Pass through other parameters
-IF prompt_value:
-    converted_params.append(f'--prompt "{prompt_value}"')
-    REPORT: "  ✓ Passed through --prompt"
-
-IF session_value:
-    converted_params.append(f'--session {session_value}')
-    REPORT: "  ✓ Passed through --session"
-
-# Note: v1's --target-type is not needed in v3 (always "page" for url-based workflows)
-
-# Build redirect command
-redirect_command = f"/workflow:ui-design:imitate-auto-v3 {' '.join(converted_params)}"
-
-REPORT: ""
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-REPORT: "🔀 Redirecting to v3..."
-REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-REPORT: ""
-REPORT: "Executing: {redirect_command}"
-REPORT: ""
-
-# Execute redirect
-SlashCommand(redirect_command)
-
-# If redirect succeeds, the v3 command will handle everything
-REPORT: ""
-REPORT: "✅ Workflow delegated to imitate-auto-v3"
-REPORT: ""
-REPORT: "Note: Future usage should call imitate-auto-v3 directly for full feature access."
-
-EXIT 0  # Redirect complete, v3 handles the rest
-```
-
----
-
-## Legacy Documentation (For Reference Only)
-
-**The following sections document the original v1 implementation.**
-**This logic is NO LONGER EXECUTED - all calls redirect to v3.**
-
----
-
-## 5-Phase Execution (LEGACY - NOT EXECUTED)
-
-### Phase 0: Simplified Initialization (LEGACY)
-
-```bash
-# THIS CODE IS NOT EXECUTED - KEPT FOR REFERENCE ONLY
-
-run_id = "run-$(date +%Y%m%d-%H%M%S)"
-base_path = --session ? ".workflow/WFS-{session}/design-${run_id}" : ".workflow/.design/${run_id}"
-
-Bash(mkdir -p "${base_path}/{style-extraction,style-consolidation/style-1,prototypes}")
-
-# Metadata
-Write({base_path}/.run-metadata.json): {
-  "run_id": "${run_id}", "session_id": "${session_id}", "timestamp": "$(date -u +%Y-%m-%dT%H:%M:%SZ)",
-  "workflow": "ui-design:imitate-auto", "mode": "single_style_imitation",
-  "parameters": {"url": "${url_value}", "images": "${images_pattern}", "targets": "${target_list}", "prompt": "${prompt_text}"},
-  "status": "in_progress"
+# Constants
+DEPTH_NAMES = {
+    1: "Page level",
+    2: "Element level",
+    3: "Interaction level",
+    4: "Embedded level",
+    5: "Shadow DOM"
 }
 
-# Unified target inference (no interactive confirmation)
-target_list = []; target_type = "page"; target_source = "none"
+# Generate run ID
+run_id = "run-$(date +%Y%m%d-%H%M%S)"
 
-# Priority: --pages (legacy) → --targets → --prompt → default
-IF --pages: target_list = split(--pages); target_type = "page"; target_source = "explicit_legacy"
-ELSE IF --targets:
-    target_list = split(--targets)
-    target_type = --target-type ? --target-type : detect_target_type(target_list)
-    target_source = "explicit"
-ELSE IF --prompt:
-    target_list = extract_targets_from_prompt(prompt_text) OR ["home"]
-    target_type = --target-type ? --target-type : detect_target_type(target_list)
-    target_source = "prompt_inferred"
+# Determine base path and session mode
+IF --session:
+    session_id = {provided_session}
+    base_path = ".workflow/WFS-{session_id}/design-{run_id}"
+    session_mode = "integrated"
+    REPORT: "Mode: Integrated (Session: {session_id})"
 ELSE:
-    target_list = ["home"]; target_type = "page"; target_source = "default"
+    session_id = null
+    base_path = ".workflow/.design/{run_id}"
+    session_mode = "standalone"
+    REPORT: "Mode: Standalone"
 
-# Validate and clean
-validated_targets = [t.strip().lower().replace(" ", "-") for t in target_list if regex_match(t, r"^[a-z0-9][a-z0-9_-]*$")]
-IF NOT validated_targets: validated_targets = ["home"]; target_type = "page"
+# Create base directory
+Bash(mkdir -p "{base_path}")
 
-type_emoji = "📄" IF target_type == "page" ELSE "🧩"
-type_label = "pages" IF target_type == "page" ELSE "components"
+# Parse url-map
+url_map_string = {--url-map}
+VALIDATE: url_map_string is not empty, "--url-map parameter is required"
 
-# Interactive confirmation
-DISPLAY_CONFIRMATION(target_type, target_source, validated_targets):
-  "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-  "⚡ IMITATE MODE CONFIRMATION"
-  "Type: {target_type} | Source: {target_source}"
-  "Targets ({count}): {', '.join(validated_targets)}"
-  "Reference: {url_value OR images_pattern}"
-  "Options: 'continue/yes' | 'targets: a,b' | 'skip: x' | 'add: y' | 'type: page|component'"
-  "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+# Parse target:url pairs
+url_map = {}  # {target_name: url}
+target_names = []
 
-user_input = WAIT_FOR_USER_INPUT()
+FOR pair IN split(url_map_string, ","):
+    pair = pair.strip()
 
-# Process user modifications
-MATCH user_input:
-  "continue|yes|ok" → proceed
-  "targets: ..." → validated_targets = parse_new_list()
-  "skip: ..." → validated_targets = remove_items()
-  "add: ..." → validated_targets = add_items()
-  "type: ..." → target_type = extract_type()
-  default → proceed with current list
+    IF ":" NOT IN pair:
+        ERROR: "Invalid url-map format: '{pair}'"
+        ERROR: "Expected format: 'target:url'"
+        ERROR: "Example: 'home:https://example.com, pricing:https://example.com/pricing'"
+        EXIT 1
 
-REPORT: "✅ Confirmed: {len(validated_targets)} {type_label} with single style"
-REPORT: "   {type_emoji} Targets: {', '.join(validated_targets)} | Type: {target_type} | Reference: {url_value OR images_pattern}"
+    target, url = pair.split(":", 1)
+    target = target.strip().lower().replace(" ", "-")
+    url = url.strip()
 
-STORE: run_id, base_path, inferred_target_list = validated_targets, target_type
-```
+    url_map[target] = url
+    target_names.append(target)
 
-**Helper Function: detect_target_type()**
-```bash
-detect_target_type(target_list):
-    page_keywords = ["home", "dashboard", "settings", "profile", "login", "signup", "auth", "pricing", "about", "contact", ...]
-    component_keywords = ["navbar", "header", "footer", "hero", "card", "button", "form", "modal", "alert", "dropdown", ...]
+VALIDATE: len(target_names) > 0, "url-map must contain at least one target:url pair"
 
-    page_matches = count_matches(target_list, page_keywords + ["page", "screen", "view"])
-    component_matches = count_matches(target_list, component_keywords + ["component", "widget", "element"])
+primary_target = target_names[0]  # First target as primary style source
+refine_tokens_mode = --refine-tokens OR false
 
-    RETURN "component" IF component_matches > page_matches ELSE "page"
-```
+# Parse capture mode
+capture_mode = --capture-mode OR "batch"
+depth = int(--depth OR 3)
 
-### Phase 0.5: URL Screenshot Capture (Auto-Fallback)
+# Validate capture mode
+IF capture_mode NOT IN ["batch", "deep"]:
+    ERROR: "Invalid --capture-mode: {capture_mode}"
+    ERROR: "Valid options: batch, deep"
+    EXIT 1
 
-**Condition**: Only if `--url` provided
+# Validate depth (only for deep mode)
+IF capture_mode == "deep":
+    IF depth NOT IN [1, 2, 3, 4, 5]:
+        ERROR: "Invalid --depth: {depth}"
+        ERROR: "Valid range: 1-5"
+        EXIT 1
 
-```bash
-IF --url:
-    screenshot_dir = "{base_path}/screenshots"; Bash(mkdir -p "{screenshot_dir}")
-    screenshot_success = false; screenshot_files = []
+    # Warn if multiple URLs in deep mode
+    IF len(target_names) > 1:
+        WARN: "⚠️ Deep mode only uses first URL: '{primary_target}'"
+        WARN: "   Other URLs will be ignored: {', '.join(target_names[1:])}"
+        WARN: "   For multi-URL, use --capture-mode batch"
 
-    # Check tool availability (DO NOT install if missing - check executables only)
-    # playwright-cli check: verify executable exists without triggering npx install
-    playwright_cli_path = Bash(which playwright-cli 2>/dev/null || echo "")
-    playwright_available = playwright_cli_path != "" ? "yes" : "no"
+# Write metadata
+metadata = {
+    "workflow": "imitate-auto",
+    "run_id": run_id,
+    "session_id": session_id,
+    "timestamp": current_timestamp(),
+    "parameters": {
+        "url_map": url_map,
+        "capture_mode": capture_mode,
+        "depth": depth IF capture_mode == "deep" ELSE null,
+        "refine_tokens": refine_tokens_mode,
+        "prompt": --prompt OR null
+    },
+    "targets": target_names,
+    "status": "in_progress"
+}
 
-    # Chrome check: verify browser executable exists
-    chrome_path = Bash(which google-chrome 2>/dev/null || which chrome 2>/dev/null || which chromium 2>/dev/null || echo "")
-    chrome_available = chrome_path != "" ? "yes" : "no"
+Write("{base_path}/.run-metadata.json", JSON.stringify(metadata, null, 2))
 
-    REPORT: "🔍 Tool availability: Playwright={playwright_available}, Chrome={chrome_available}"
-
-    # Try available tools in order: Playwright → Chrome → Manual fallback
-    IF playwright_available == "yes":
-        TRY: Bash({playwright_cli_path} screenshot "{url_value}" "{screenshot_dir}/full-page.png" --full-page --timeout 30000)
-             screenshot_files.append("{screenshot_dir}/full-page.png"); screenshot_success = true
-             REPORT: "   ✅ Playwright screenshot captured"
-        CATCH: REPORT: "   ⚠️ Playwright execution failed"
-    ELSE:
-        REPORT: "   ℹ️ Playwright CLI not installed, checking Chrome..."
-
-    IF NOT screenshot_success AND chrome_available == "yes":
-        TRY: Bash({chrome_path} --headless --disable-gpu --screenshot="{screenshot_dir}/full-page.png" --window-size=1920,1080 "{url_value}")
-             screenshot_files.append("{screenshot_dir}/full-page.png"); screenshot_success = true
-             REPORT: "   ✅ Chrome screenshot captured"
-        CATCH: REPORT: "   ⚠️ Chrome execution failed"
-    ELSE IF NOT screenshot_success:
-        REPORT: "   ℹ️ Chrome not installed, falling back to manual mode"
-
-    # Manual upload fallback
-    IF NOT screenshot_success:
-        REPORT: "━━━ ⚠️ AUTOMATED SCREENSHOT FAILED ━━━"
-        REPORT: "Unable to capture: {url_value}"
-        REPORT: "Manual screenshot required:"
-        REPORT: "  1. Visit: {url_value} | 2. Take full-page screenshot | 3. Save to: {screenshot_dir}/"
-        REPORT: "Options: 'ready' (screenshot saved) | 'skip' (URL only) | 'abort' (cancel)"
-        REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-
-        user_response = WAIT_FOR_USER_INPUT()
-        MATCH user_response:
-          "ready|done|ok" → screenshot_files = Glob("{screenshot_dir}/*.{png,jpg,jpeg}");
-                            IF screenshot_files: screenshot_success = true; REPORT: "✅ Manual screenshot detected"
-                            ELSE: REPORT: "❌ No screenshot found, using URL analysis only"
-          "skip" → REPORT: "⏭️ Skipping screenshot, using URL analysis"
-          "abort" → ERROR: "Workflow aborted by user"; EXIT
-          _ → REPORT: "⚠️ Invalid input, proceeding with URL analysis"
-
-    # Store results
-    STORE: screenshot_mode = screenshot_success ? "with_screenshots" : "url_only", screenshot_paths = screenshot_files
-    REPORT: screenshot_success ? "✅ Screenshot capture complete: {len(screenshot_files)} image(s)" : "ℹ️ Proceeding with URL analysis only"
+REPORT: ""
+REPORT: "Configuration:"
+REPORT: "  Capture mode: {capture_mode}"
+IF capture_mode == "deep":
+    REPORT: "    Depth level: {depth} ({DEPTH_NAMES[depth]})"
+    REPORT: "    Target: '{primary_target}' ({url_map[primary_target]})"
 ELSE:
-    STORE: screenshot_mode = "manual_images", screenshot_paths = []
-    REPORT: "ℹ️ Using provided images (--images parameter)"
+    REPORT: "    Targets: {len(target_names)} pages"
+    REPORT: "    Primary source: '{primary_target}' ({url_map[primary_target]})"
+    REPORT: "    All targets: {', '.join(target_names)}"
+REPORT: "  Token refinement: {refine_tokens_mode ? 'Enabled (production quality)' : 'Disabled (fast-track)'}"
+IF --prompt:
+    REPORT: "  Prompt guidance: \"{--prompt}\""
+REPORT: ""
+
+# Initialize TodoWrite
+TodoWrite({todos: [
+  {content: "Initialize and parse url-map", status: "completed", activeForm: "Initializing"},
+  {content: capture_mode == "batch" ? f"Batch screenshot capture ({len(target_names)} targets)" : f"Deep exploration (depth {depth})", status: "pending", activeForm: "Capturing screenshots"},
+  {content: "Extract unified design system", status: "pending", activeForm: "Extracting style"},
+  {content: refine_tokens_mode ? "Refine design tokens via consolidate" : "Fast token adaptation (skip consolidate)", status: "pending", activeForm: "Processing tokens"},
+  {content: f"Generate UI for {len(target_names)} targets", status: "pending", activeForm: "Generating UI"},
+  {content: session_id ? "Integrate design system" : "Standalone completion", status: "pending", activeForm: "Completing"}
+]})
 ```
 
-### Phase 0.75: URL Content Analysis (Fallback Mode)
-
-**Condition**: Only if `screenshot_mode == "url_only"`
+### Phase 1: Screenshot Capture (Dual Mode)
 
 ```bash
-url_analysis_content = ""
+REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+REPORT: f"🚀 Phase 1: Screenshot Capture ({capture_mode} mode)"
+REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
 
-IF screenshot_mode == "url_only":
-    REPORT: "🔍 Analyzing URL content (no screenshot available)"
+IF capture_mode == "batch":
+    # Mode A: Batch Multi-URL Capture
+    REPORT: "Using batch capture for multiple URLs..."
 
-    # Fetch URL design patterns using MCP web search
-    url_analysis_content = mcp__exa__web_search_exa(
-        query="site:{url_value} design style color scheme layout",
-        numResults=3
-    )
+    # Build url-map string for capture command
+    url_map_command_string = ",".join([f"{name}:{url}" for name, url in url_map.items()])
 
-    STORE: url_analysis_data = url_analysis_content
-    REPORT: "✅ URL content analysis complete"
+    # Call capture command
+    capture_command = f"/workflow:ui-design:capture --base-path \"{base_path}\" --url-map \"{url_map_command_string}\""
+
+    REPORT: f"  Command: {capture_command}"
+    REPORT: f"  Targets: {len(target_names)}"
+
+    TRY:
+        SlashCommand(capture_command)
+    CATCH error:
+        ERROR: "Batch capture failed: {error}"
+        ERROR: "Cannot proceed without screenshots"
+        EXIT 1
+
+    # Verify batch capture results
+    screenshot_metadata_path = "{base_path}/screenshots/capture-metadata.json"
+
+    IF NOT exists(screenshot_metadata_path):
+        ERROR: "capture command did not generate metadata file"
+        ERROR: "Expected: {screenshot_metadata_path}"
+        EXIT 1
+
+    screenshot_metadata = Read(screenshot_metadata_path)
+    captured_count = screenshot_metadata.total_captured
+    total_requested = screenshot_metadata.total_requested
+    missing_count = total_requested - captured_count
+
+    REPORT: ""
+    REPORT: "✅ Batch capture complete:"
+    REPORT: "   Captured: {captured_count}/{total_requested} screenshots ({(captured_count/total_requested*100):.1f}%)"
+
+    IF missing_count > 0:
+        missing_targets = [s.target for s in screenshot_metadata.screenshots if not s.captured]
+        WARN: "   ⚠️ Missing {missing_count} screenshots: {', '.join(missing_targets)}"
+        WARN: "   Proceeding with available screenshots for extract phase"
+
+    # If all screenshots failed, terminate
+    IF captured_count == 0:
+        ERROR: "No screenshots captured - cannot proceed"
+        ERROR: "Please check URLs and tool availability"
+        EXIT 1
+
+ELSE:  # capture_mode == "deep"
+    # Mode B: Deep Interactive Layer Exploration
+    REPORT: "Using deep exploration for single URL..."
+
+    primary_url = url_map[primary_target]
+
+    # Call explore-layers command
+    explore_command = f"/workflow:ui-design:explore-layers --url \"{primary_url}\" --depth {depth} --base-path \"{base_path}\""
+
+    REPORT: f"  Command: {explore_command}"
+    REPORT: f"  URL: {primary_url}"
+    REPORT: f"  Depth: {depth} ({DEPTH_NAMES[depth]})"
+
+    TRY:
+        SlashCommand(explore_command)
+    CATCH error:
+        ERROR: "Deep exploration failed: {error}"
+        ERROR: "Cannot proceed without screenshots"
+        EXIT 1
+
+    # Verify deep exploration results
+    layer_map_path = "{base_path}/screenshots/layer-map.json"
+
+    IF NOT exists(layer_map_path):
+        ERROR: "explore-layers did not generate layer-map.json"
+        ERROR: "Expected: {layer_map_path}"
+        EXIT 1
+
+    layer_map = Read(layer_map_path)
+    total_layers = len(layer_map.layers)
+    captured_count = layer_map.summary.total_captures
+
+    REPORT: ""
+    REPORT: "✅ Deep exploration complete:"
+    REPORT: "   Layers: {total_layers} (depth 1-{depth})"
+    REPORT: "   Captures: {captured_count} screenshots"
+    REPORT: "   Total size: {layer_map.summary.total_size_kb:.1f} KB"
+
+    # Count actual images for extract phase
+    total_requested = captured_count  # For consistency with batch mode
+
+TodoWrite(mark_completed: f"Batch screenshot capture ({len(target_names)} targets)" IF capture_mode == "batch" ELSE f"Deep exploration (depth {depth})",
+          mark_in_progress: "Extract unified design system")
 ```
 
-### Phase 1: Single Style Extraction
+### Phase 2: Unified Design System Extraction
 
 ```bash
-# Determine input based on screenshot capture
-source_desc = screenshot_mode == "with_screenshots" ? "captured screenshots from {url_value}" :
-              screenshot_mode == "url_only" ? "URL analysis of {url_value}" : "user-provided images"
+REPORT: ""
+REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+REPORT: "🚀 Phase 2: Extract Unified Design System"
+REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
 
-images_flag = screenshot_mode == "with_screenshots" ? "--images \"{base_path}/screenshots/*.{png,jpg,jpeg}\"" :
-              screenshot_mode == "manual_images" AND --images ? "--images \"{image_glob}\"" : ""
+# Use all screenshots as input to extract single design system
+IF capture_mode == "batch":
+    images_glob = f"{base_path}/screenshots/*.{{png,jpg,jpeg,webp}}"
+ELSE:  # deep mode
+    images_glob = f"{base_path}/screenshots/**/*.{{png,jpg,jpeg,webp}}"  # Include all depth directories
 
-url_flag = screenshot_mode == "url_only" ? "--url \"{url_value}\"" : ""
+# Build extraction prompt
+IF --prompt:
+    user_guidance = {--prompt}
+    extraction_prompt = f"Extract a single, high-fidelity design system that accurately imitates the visual style from the '{primary_target}' page. Use other screenshots for component consistency. User guidance: {user_guidance}"
+ELSE:
+    extraction_prompt = f"Extract a single, high-fidelity design system that accurately imitates the visual style from the '{primary_target}' page. Use other screenshots to ensure component and pattern consistency across all pages."
 
-# Construct optimized extraction prompt with URL analysis data
-url_context = screenshot_mode == "url_only" ? "URL analysis data: {url_analysis_data}" : ""
-enhanced_prompt = "Extract a single, high-fidelity design system that accurately imitates the visual style from {source_desc}. {url_context} {prompt_text}"
+# Call extract command (imitate mode, automatically uses single variant)
+extract_command = f"/workflow:ui-design:extract --base-path \"{base_path}\" --images \"{images_glob}\" --prompt \"{extraction_prompt}\" --mode imitate"
 
-# Force single variant with imitate mode
-command = "/workflow:ui-design:extract --base-path \"{base_path}\" {url_flag} {images_flag} --prompt \"{enhanced_prompt}\" --mode imitate"
+REPORT: "Calling extract command..."
+REPORT: f"  Mode: imitate (high-fidelity single style, auto variants=1)"
+REPORT: f"  Primary source: '{primary_target}'"
+REPORT: f"  Images: {images_glob}"
 
-REPORT: "🚀 Phase 1: Style Extraction | Source: {source_desc} | Mode: imitate (high-fidelity)"
+TRY:
+    SlashCommand(extract_command)
+CATCH error:
+    ERROR: "Style extraction failed: {error}"
+    ERROR: "Cannot proceed without design system"
+    EXIT 1
 
-SlashCommand(command)  # → Phase 2
+# extract outputs to: {base_path}/style-extraction/style-cards.json
+
+# Verify extraction results
+style_cards_path = "{base_path}/style-extraction/style-cards.json"
+
+IF NOT exists(style_cards_path):
+    ERROR: "extract command did not generate style-cards.json"
+    ERROR: "Expected: {style_cards_path}"
+    EXIT 1
+
+style_cards = Read(style_cards_path)
+
+IF len(style_cards.style_cards) != 1:
+    ERROR: "Expected single variant in imitate mode, got {len(style_cards.style_cards)}"
+    EXIT 1
+
+extracted_style = style_cards.style_cards[0]
+
+REPORT: ""
+REPORT: "✅ Phase 2 complete:"
+REPORT: "   Style: '{extracted_style.name}'"
+REPORT: "   Philosophy: {extracted_style.design_philosophy}"
+REPORT: "   Tokens: {count_tokens(extracted_style.proposed_tokens)} proposed tokens"
+
+TodoWrite(mark_completed: "Extract unified design system",
+          mark_in_progress: refine_tokens_mode ? "Refine design tokens via consolidate" : "Fast token adaptation")
 ```
 
-### Phase 2: Fast Token Adaptation (Bypass Consolidate)
+### Phase 3: Token Processing (Conditional Consolidate)
 
 ```bash
-REPORT: "🚀 Phase 2: Fast token adaptation (bypassing consolidate)"
+REPORT: ""
+REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+REPORT: "🚀 Phase 3: Token Processing"
+REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
 
-# Note: Orchestrator directly reads and transforms files here (not delegating to agent)
-# This is a performance optimization to bypass the full consolidate phase
-style_cards = Read({base_path}/style-extraction/style-cards.json)
-style_card = style_cards.style_cards[0]
+IF refine_tokens_mode:
+    # Path A: Full consolidate (production quality)
+    REPORT: "🔧 Using full consolidate for production-ready tokens"
+    REPORT: "   Benefits:"
+    REPORT: "   • Philosophy-driven token refinement"
+    REPORT: "   • WCAG AA accessibility validation"
+    REPORT: "   • Complete design system documentation"
+    REPORT: "   • Token gap filling and consistency checks"
+    REPORT: ""
 
-design_tokens = style_card.proposed_tokens
-philosophy = style_card.design_philosophy
-style_name = style_card.name
+    consolidate_command = f"/workflow:ui-design:consolidate --base-path \"{base_path}\" --variants 1"
 
-# Write design-tokens.json directly (orchestrator-level file transformation)
-Write({base_path}/style-consolidation/style-1/design-tokens.json, JSON.stringify(design_tokens, null, 2))
+    REPORT: f"Calling consolidate command..."
 
-# Create minimal style-guide.md
-Write({base_path}/style-consolidation/style-1/style-guide.md):
-# Design System: {style_name}
+    TRY:
+        SlashCommand(consolidate_command)
+    CATCH error:
+        ERROR: "Token consolidation failed: {error}"
+        ERROR: "Cannot proceed without refined tokens"
+        EXIT 1
+
+    # consolidate outputs to: {base_path}/style-consolidation/style-1/design-tokens.json
+    tokens_path = "{base_path}/style-consolidation/style-1/design-tokens.json"
+
+    IF NOT exists(tokens_path):
+        ERROR: "consolidate command did not generate design-tokens.json"
+        ERROR: "Expected: {tokens_path}"
+        EXIT 1
+
+    REPORT: ""
+    REPORT: "✅ Full consolidate complete"
+    REPORT: "   Output: style-consolidation/style-1/"
+    REPORT: "   Quality: Production-ready"
+    token_quality = "production-ready (consolidated)"
+    time_spent_estimate = "~60s"
+
+ELSE:
+    # Path B: Fast Token Adaptation
+    REPORT: "⚡ Fast token adaptation (skipping consolidate for speed)"
+    REPORT: "   Note: Using proposed tokens from extraction phase"
+    REPORT: "   For production quality, re-run with --refine-tokens flag"
+    REPORT: ""
+
+    # Directly copy proposed_tokens to consolidation directory
+    style_cards = Read("{base_path}/style-extraction/style-cards.json")
+    proposed_tokens = style_cards.style_cards[0].proposed_tokens
+
+    # Create directory and write tokens
+    consolidation_dir = "{base_path}/style-consolidation/style-1"
+    Bash(mkdir -p "{consolidation_dir}")
+
+    tokens_path = f"{consolidation_dir}/design-tokens.json"
+    Write(tokens_path, JSON.stringify(proposed_tokens, null, 2))
+
+    # Create simplified style guide
+    variant = style_cards.style_cards[0]
+    simple_guide = f"""# Design System: {variant.name}
 
 ## Design Philosophy
-{philosophy}
+{variant.design_philosophy}
 
 ## Description
-{style_card.description}
+{variant.description}
 
 ## Design Tokens
 All tokens in `design-tokens.json` follow OKLCH color space.
 
-**Key Colors**: Primary: {design_tokens.colors.brand.primary} | Background: {design_tokens.colors.surface.background} | Text: {design_tokens.colors.text.primary}
+**Note**: Generated in fast-track imitate mode using proposed tokens from extraction.
+For production-ready quality with philosophy-driven refinement, re-run with `--refine-tokens` flag.
 
-**Typography**: Heading: {design_tokens.typography.font_family.heading} | Body: {design_tokens.typography.font_family.body}
+## Color Preview
+- Primary: {variant.preview.primary if variant.preview else "N/A"}
+- Background: {variant.preview.background if variant.preview else "N/A"}
 
-**Spacing Scale**: {design_tokens.spacing.keys().length} values
+## Typography Preview
+- Heading Font: {variant.preview.font_heading if variant.preview else "N/A"}
 
-*Note: Generated in imitate mode for fast replication.*
+## Token Categories
+{list_token_categories(proposed_tokens)}
+"""
 
-REPORT: "✅ Tokens extracted and formatted | Style: {style_name} | Bypassed consolidate for {performance_gain}× speed"
+    Write(f"{consolidation_dir}/style-guide.md", simple_guide)
+
+    REPORT: "✅ Fast adaptation complete (~2s vs ~60s with consolidate)"
+    REPORT: "   Output: style-consolidation/style-1/"
+    REPORT: "   Quality: Proposed (not refined)"
+    REPORT: "   Time saved: ~30-60s"
+    token_quality = "proposed (fast-track)"
+    time_spent_estimate = "~2s"
+
+REPORT: ""
+REPORT: "Token processing summary:"
+REPORT: "   Path: {refine_tokens_mode ? 'Full consolidate' : 'Fast adaptation'}"
+REPORT: "   Quality: {token_quality}"
+REPORT: "   Time: {time_spent_estimate}"
+
+TodoWrite(mark_completed: refine_tokens_mode ? "Refine design tokens via consolidate" : "Fast token adaptation",
+          mark_in_progress: f"Generate UI for {len(target_names)} targets")
 ```
 
-### Phase 3: Single Prototype Generation
+### Phase 4: Batch UI Generation
 
 ```bash
-targets_string = ",".join(inferred_target_list)
-type_emoji = "📄" IF target_type == "page" ELSE "🧩"
-type_label = "page(s)" IF target_type == "page" ELSE "component(s)"
+REPORT: ""
+REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+REPORT: "🚀 Phase 4: Batch UI Generation"
+REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
 
-command = "/workflow:ui-design:generate --base-path \"{base_path}\" --targets \"{targets_string}\" --target-type \"{target_type}\" --style-variants 1 --layout-variants 1"
+# Build targets string
+targets_string = ",".join(target_names)
 
-REPORT: "🚀 Phase 3: Generating {len(inferred_target_list)} {type_label}"
-REPORT: "   {type_emoji} Targets: {targets_string} | Mode: 1×1 (imitation-optimized)"
+# Call generate command (smart token source detection will auto-select tokens)
+generate_command = f"/workflow:ui-design:generate --base-path \"{base_path}\" --targets \"{targets_string}\" --target-type page --style-variants 1 --layout-variants 1"
 
-SlashCommand(command)  # → Phase 4
+REPORT: "Calling generate command..."
+REPORT: f"  Targets: {targets_string}"
+REPORT: f"  Configuration: 1 style × 1 layout × {len(target_names)} pages"
+REPORT: f"  Token source: generate will auto-detect ({token_quality})"
 
-# Output: Prototypes: {target}-style-1-layout-1.html, Total: len(inferred_target_list), Type: {target_type}
+TRY:
+    SlashCommand(generate_command)
+CATCH error:
+    ERROR: "UI generation failed: {error}"
+    ERROR: "Design tokens may be invalid"
+    EXIT 1
+
+# generate outputs to: {base_path}/prototypes/{target}-style-1-layout-1.html
+
+# Verify generation results
+prototypes_dir = "{base_path}/prototypes"
+generated_html_files = Glob(f"{prototypes_dir}/*-style-1-layout-1.html")
+generated_count = len(generated_html_files)
+
+REPORT: ""
+REPORT: "✅ Phase 4 complete:"
+REPORT: "   Generated: {generated_count} HTML prototypes"
+REPORT: "   Targets: {', '.join(target_names)}"
+REPORT: "   Output: {prototypes_dir}/"
+
+IF generated_count < len(target_names):
+    WARN: "   ⚠️ Expected {len(target_names)} prototypes, generated {generated_count}"
+    WARN: "   Some targets may have failed - check generate output"
+
+TodoWrite(mark_completed: f"Generate UI for {len(target_names)} targets",
+          mark_in_progress: session_id ? "Integrate design system" : "Standalone completion")
 ```
 
-### Phase 4: Design System Integration
+### Phase 5: Design System Integration
 
 ```bash
-IF --session:
-    SlashCommand("/workflow:ui-design:update --session {session_id}")  # → Complete
+REPORT: ""
+REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+REPORT: "🚀 Phase 5: Design System Integration"
+REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+
+IF session_id:
+    REPORT: "Integrating design system into session {session_id}..."
+
+    update_command = f"/workflow:ui-design:update --session {session_id}"
+
+    TRY:
+        SlashCommand(update_command)
+    CATCH error:
+        WARN: "Design system integration failed: {error}"
+        WARN: "Prototypes are still available at {base_path}/prototypes/"
+        # Don't terminate, prototypes already generated
+
+    REPORT: "✅ Design system integrated into session {session_id}"
 ELSE:
-    REPORT: "ℹ️ Standalone mode: Skipping integration | Prototypes at: {base_path}/prototypes/"
-    # → Complete (standalone)
+    REPORT: "ℹ️ Standalone mode: Skipping integration"
+    REPORT: "   Prototypes available at: {base_path}/prototypes/"
+    REPORT: "   To integrate later:"
+    REPORT: "   1. Create a workflow session"
+    REPORT: "   2. Copy design-tokens.json to session artifacts"
+
+# Update metadata
+metadata = Read("{base_path}/.run-metadata.json")
+metadata.status = "completed"
+metadata.completion_time = current_timestamp()
+metadata.outputs = {
+    "screenshots": f"{base_path}/screenshots/",
+    "style_system": f"{base_path}/style-consolidation/style-1/",
+    "prototypes": f"{base_path}/prototypes/",
+    "token_quality": token_quality,
+    "captured_count": captured_count,
+    "generated_count": generated_count
+}
+Write("{base_path}/.run-metadata.json", JSON.stringify(metadata, null, 2))
+
+TodoWrite(mark_completed: session_id ? "Integrate design system" : "Standalone completion")
+```
+
+### Phase 6: Completion Report
+
+```javascript
+TodoWrite({todos: [
+  {content: "Initialize and parse url-map", status: "completed", activeForm: "Initializing"},
+  {content: capture_mode == "batch" ? f"Batch screenshot capture ({len(target_names)} targets)" : f"Deep exploration (depth {depth})", status: "completed", activeForm: "Capturing"},
+  {content: "Extract unified design system", status: "completed", activeForm: "Extracting"},
+  {content: refine_tokens_mode ? "Refine design tokens via consolidate" : "Fast token adaptation", status: "completed", activeForm: "Processing"},
+  {content: f"Generate UI for {len(target_names)} targets", status: "completed", activeForm: "Generating"},
+  {content: session_id ? "Integrate design system" : "Standalone completion", status: "completed", activeForm: "Completing"}
+]});
+```
+
+**Completion Message**:
+```
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+✅ UI Design Imitate-Auto Complete!
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+━━━ 📊 Workflow Summary ━━━
+
+Mode: {capture_mode == "batch" ? "Batch Multi-Page Replication" : f"Deep Interactive Exploration (depth {depth})"}
+Session: {session_id or "standalone"}
+Run ID: {run_id}
+
+Phase 1 - Screenshot Capture: ✅ {IF capture_mode == "batch": f"{captured_count}/{total_requested} screenshots" ELSE: f"{captured_count} screenshots ({total_layers} layers)"}
+  {IF capture_mode == "batch" AND captured_count < total_requested: f"⚠️ {total_requested - captured_count} missing" ELSE: "All targets captured"}
+
+Phase 2 - Style Extraction: ✅ Single unified design system
+  Style: {extracted_style.name}
+  Philosophy: {extracted_style.design_philosophy[:80]}...
+
+Phase 3 - Token Processing: ✅ {token_quality}
+  {IF refine_tokens_mode:
+    "Full consolidate (~60s)"
+    "Quality: Production-ready with philosophy-driven refinement"
+  ELSE:
+    "Fast adaptation (~2s, saved ~30-60s)"
+    "Quality: Proposed tokens (for production, use --refine-tokens)"
+  }
+
+Phase 4 - UI Generation: ✅ {generated_count} pages generated
+  Targets: {', '.join(target_names)}
+  Configuration: 1 style × 1 layout × {generated_count} pages
+
+Phase 5 - Integration: {IF session_id: "✅ Integrated into session" ELSE: "⏭️ Standalone mode"}
+
+━━━ 📂 Output Structure ━━━
+
+{base_path}/
+├── screenshots/                    # {captured_count} screenshots
+{IF capture_mode == "batch":
+│   ├── {target1}.png
+│   ├── {target2}.png
+│   └── capture-metadata.json
+ELSE:
+│   ├── depth-1/
+│   │   └── full-page.png
+│   ├── depth-2/
+│   │   └── {elements}.png
+│   ├── depth-{depth}/
+│   │   └── {layers}.png
+│   └── layer-map.json
+}
+├── style-extraction/               # Design analysis
+│   └── style-cards.json
+├── style-consolidation/            # {token_quality}
+│   └── style-1/
+│       ├── design-tokens.json
+│       └── style-guide.md
+└── prototypes/                     # {generated_count} HTML/CSS files
+    ├── {target1}-style-1-layout-1.html + .css
+    ├── {target2}-style-1-layout-1.html + .css
+    ├── compare.html                # Interactive preview
+    └── index.html                  # Quick navigation
+
+━━━ ⚡ Performance ━━━
+
+Total workflow time: ~{estimate_total_time()} minutes
+  Screenshot capture: ~{capture_time}
+  Style extraction: ~{extract_time}
+  Token processing: ~{token_processing_time}
+  UI generation: ~{generate_time}
+
+━━━ 🌐 Next Steps ━━━
+
+1. Preview prototypes:
+   • Interactive matrix: Open {base_path}/prototypes/compare.html
+   • Quick navigation: Open {base_path}/prototypes/index.html
+
+{IF session_id:
+2. Create implementation tasks:
+   /workflow:plan --session {session_id}
+
+3. Generate tests (if needed):
+   /workflow:test-gen {session_id}
+ELSE:
+2. To integrate into a workflow session:
+   • Create session: /workflow:session:start
+   • Copy design-tokens.json to session artifacts
+
+3. Explore prototypes in {base_path}/prototypes/ directory
+}
+
+{IF NOT refine_tokens_mode:
+💡 Production Quality Tip:
+   Fast-track mode used proposed tokens for speed.
+   For production-ready quality with full token refinement:
+   /workflow:ui-design:imitate-auto --url-map "{url_map_command_string}" --refine-tokens {f"--session {session_id}" if session_id else ""}
+}
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 ```
 
 ## TodoWrite Pattern
 
 ```javascript
-// Initialize
+// Initialize (Phase 0)
 TodoWrite({todos: [
-  {"content": "Initialize run directory and infer targets", "status": "in_progress", "activeForm": "Initializing"},
-  {"content": "Capture screenshots from URL (if provided)", "status": "pending", "activeForm": "Capturing screenshots"},
-  {"content": "Analyze URL content (fallback mode)", "status": "pending", "activeForm": "Analyzing URL content"},
-  {"content": "Extract single design style from reference", "status": "pending", "activeForm": "Extracting style"},
-  {"content": "Adapt tokens (bypass consolidate)", "status": "pending", "activeForm": "Adapting tokens"},
-  {"content": "Generate single-style prototypes", "status": "pending", "activeForm": "Generating prototypes"},
-  {"content": "Integrate design system", "status": "pending", "activeForm": "Integrating design"}
+  {content: "Initialize and parse url-map", status: "in_progress", activeForm: "Initializing"},
+  {content: "Batch screenshot capture", status: "pending", activeForm: "Capturing screenshots"},
+  {content: "Extract unified design system", status: "pending", activeForm: "Extracting style"},
+  {content: refine_tokens ? "Refine tokens via consolidate" : "Fast token adaptation", status: "pending", activeForm: "Processing tokens"},
+  {content: "Generate UI for all targets", status: "pending", activeForm: "Generating UI"},
+  {content: "Integrate design system", status: "pending", activeForm: "Integrating"}
 ]})
 
 // Update after each phase: Mark current completed, next in_progress
@@ -499,89 +681,47 @@ TodoWrite({todos: [
 
 ## Error Handling
 
-- **No reference source**: Error if neither `--url` nor `--images` provided
-- **Screenshot capture failure**: Tries Playwright → Chrome → Manual upload (user uploads, skips, or aborts); gracefully handles missing tools
-- **Invalid URL/images**: Report error, suggest alternative input
-- **Token extraction failure**: Fallback to minimal default design system
+### Pre-execution Checks
+- **url-map format validation**: Clear error message with format example
+- **Empty url-map**: Error and exit
+- **Invalid target names**: Regex validation with suggestions
 
-## Performance Comparison
+### Phase-Specific Errors
+- **Screenshot capture failure (Phase 1)**:
+  - If total_captured == 0: Terminate workflow
+  - If partial failure: Warn but continue with available screenshots
 
-| Aspect | explore-auto | imitate-auto |
-|--------|--------------|--------------|
-| **Purpose** | Design exploration | Design replication |
-| **Input** | Optional URL/images | **Required** URL or images |
-| **Variants** | 1-5 styles × 1-5 layouts | Always 1 × 1 |
-| **Consolidate** | Full consolidation | **Bypassed** (direct tokens) |
-| **Speed** | Baseline | **~2-3× faster** |
-| **Output** | Matrix (S×L×T) | Direct (1×1×T) |
+- **Style extraction failure (Phase 2)**:
+  - If extract fails: Terminate with clear error
+  - If style-cards.json missing: Terminate with debugging info
 
-**Performance Benefits**: Skipped consolidate (~30-60s saved), single variant, direct token mapping, streamlined decisions
+- **Token processing failure (Phase 3)**:
+  - Consolidate mode: Terminate if consolidate fails
+  - Fast mode: Validate proposed_tokens exist before copying
 
-## Example Execution Flows
+- **UI generation failure (Phase 4)**:
+  - If generate fails: Terminate with error
+  - If generated_count < target_count: Warn but proceed
 
-### Example 1: URL with Auto-Screenshot (Pages)
-```bash
-/workflow:ui-design:imitate-auto --url "https://linear.app" --targets "home,features,pricing"
+- **Integration failure (Phase 5)**:
+  - Non-blocking: Warn but don't terminate
+  - Prototypes already available
 
-# Flow: 0 (3 pages) → 0.5 (Playwright captures) → 1 (single style) → 2 (direct tokens ~2s vs ~45s) → 3 (3 prototypes) → 4
-# Time: ~2-3 min (vs 5-7 min with explore-auto)
-```
+### Recovery Strategies
+- **Partial screenshot failure**: Continue with available screenshots, list missing in warning
+- **Generate failure**: Report specific target failures, user can re-generate individually
+- **Integration failure**: Prototypes still usable, can integrate manually
 
-### Example 2: Images with Guidance (Page Mode)
-```bash
-/workflow:ui-design:imitate-auto --images "refs/dark-theme.png" --prompt "Focus on dark mode" --targets "dashboard"
 
-# Flow: 0 → 0.5 (skip) → 1 → 2 → 3 → 4
-# Output: dashboard-style-1-layout-1.html | Type: page (full-page layout)
-```
+## Integration Points
 
-### Example 3: Component Mode
-```bash
-/workflow:ui-design:imitate-auto --url "https://example.com" --targets "navbar,hero,card" --target-type "component"
-
-# Flow: 0 → 0.5 → 1 → 2 → 3 → 4
-# Output: navbar/hero/card-style-1-layout-1.html | Type: component (minimal wrapper)
-```
-
-### Example 4: URL with Manual Screenshot
-```bash
-/workflow:ui-design:imitate-auto --url "https://stripe.com/pricing" --targets "pricing"
-
-# 0.5: Playwright failed → Chrome failed → User prompted → types 'ready' → ✅ continues OR 'skip' → ⚠️ URL only
-# If skip: 0.75 (MCP URL analysis) → 1 → 2 → 3 → 4
-# If ready: 1 → 2 → 3 → 4
-```
-
-## Completion Output
-
-```
-✅ UI Design Imitation Complete!
-
-Mode: Single Style Replication | Run ID: {run_id} | Session: {session_id or "standalone"} | Reference: {url OR images} | Type: {type_emoji} {type_label}
-
-Phase 0 - Initialization: {target_count} {target_type}(s) prepared
-Phase 0.5 - Screenshot Capture: {screenshot_status}
-  {IF success: ✅ Captured via {method} | ELSE: ⚠️ URL analysis fallback activated}
-Phase 0.75 - URL Content Analysis: {IF url_only: ✅ Design patterns analyzed via MCP | ELSE: ⏭️ Skipped (screenshots available)}
-Phase 1 - Style Extraction: Single style extracted
-Phase 2 - Token Adaptation: Bypassed consolidate (⚡ {time_saved}s saved)
-Phase 3 - Prototype Generation: {target_count} {target_type} prototypes created
-Phase 4 - Design Integration: {integrated OR "Standalone mode"}
-
-📂 Output: {base_path}/
-  ├── style-extraction/style-cards.json (1 style card)
-  ├── style-consolidation/style-1/ (design tokens)
-  └── prototypes/ ({target_count} HTML/CSS files)
-
-🌐 Preview: {base_path}/prototypes/index.html
-
-{type_emoji} Targets: {', '.join(inferred_target_list)} | Type: {target_type}
-  Context: {IF target_type == "page": "Full-page layouts" ELSE: "Isolated components with minimal wrapper"}
-
-Performance:
-- Design system: ~{time}s (vs ~{consolidate_time}s with consolidate)
-- Total workflow: ~{total_time}s
-- Speed improvement: ~{improvement}× faster than explore-auto
-
-{IF session: Next: /workflow:plan to create implementation tasks | ELSE: Prototypes ready: {base_path}/prototypes/}
-```
+- **Input**: `--url-map` (multiple target:url pairs) + optional `--capture-mode`, `--depth`, `--session`, `--refine-tokens`, `--prompt`
+- **Output**: Complete design system in `{base_path}/` (screenshots, style-extraction, style-consolidation, prototypes)
+- **Sub-commands Called**:
+  1. Phase 1 (conditional):
+     - `--capture-mode batch`: `/workflow:ui-design:capture` (multi-URL batch)
+     - `--capture-mode deep`: `/workflow:ui-design:explore-layers` (single-URL depth exploration)
+  2. `/workflow:ui-design:extract` (Phase 2)
+  3. `/workflow:ui-design:consolidate` (Phase 3, conditional)
+  4. `/workflow:ui-design:generate` (Phase 4)
+  5. `/workflow:ui-design:update` (Phase 5, if --session)