refactor: streamline UI design workflow and add extraction scripts

- Simplified UI design command workflows (batch-generate, explore-auto, generate, update) - Enhanced style-extract and layout-extract with improved documentation - Refactored imitate-auto for better usability - Removed obsolete consolidate workflow - Added extract-computed-styles.js and extract-layout-structure.js utilities - Updated UI generation and instantiation scripts 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2026-02-11 02:33:51 +08:00 · 2025-10-16 13:47:58 +08:00
parent d2c66135fb
commit e95be40c2b
12 changed files with 794 additions and 669 deletions
--- a/.claude/commands/workflow/ui-design/batch-generate.md
+++ b/.claude/commands/workflow/ui-design/batch-generate.md
@@ -47,48 +47,49 @@ ELSE:
    bash(find .workflow -type d -name "design-*" -printf "%T@ %p\n" | sort -nr | head -1 | cut -d' ' -f2)
 # Get variant counts
-style_variants = --style-variants OR bash(ls {base_path}/style-consolidation/style-* -d | wc -l)
+style_variants = --style-variants OR bash(ls {base_path}/style-extraction/style-* -d | wc -l)
 layout_variants = --layout-variants OR 3
 ```
 **Output**: `base_path`, `target_list[]`, `target_type`, `device_type`, `style_variants`, `layout_variants`
-### Step 2: Detect Token Sources
+### Step 2: Validate Design Tokens
 ```bash
-# Check consolidated (priority 1) or proposed (priority 2)
+# Check design tokens exist
-bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "consolidated")
+bash(test -f {base_path}/style-extraction/style-1/design-tokens.json && echo "valid")
 # OR
 bash(test -f {base_path}/style-extraction/style-cards.json && echo "proposed")
-# If proposed: Create temp consolidation dirs + write tokens
+# Load design space analysis (optional, from intermediates)
-FOR style_id IN 1..style_variants:
+IF exists({base_path}/.intermediates/style-analysis/design-space-analysis.json):
-    bash(mkdir -p {base_path}/style-consolidation/style-{style_id})
+    design_space_analysis = Read({base_path}/.intermediates/style-analysis/design-space-analysis.json)
    Write({base_path}/style-consolidation/style-{style_id}/design-tokens.json, proposed_tokens)
 # 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`
+**Output**: `design_tokens_valid`, `design_space_analysis`
-### Step 3: Gather Layout Inspiration
+### Step 3: Gather Layout Inspiration (Reuse or Create)
 ```bash
-bash(mkdir -p {base_path}/prototypes/_inspirations)
+# Check if layout inspirations already exist from layout-extract phase
 inspiration_source = "{base_path}/.intermediates/layout-analysis/inspirations"
 # For each target: Research via MCP
 FOR target IN target_list:
-    search_query = "{target} {target_type} layout patterns variations"
+    # Priority 1: Reuse existing inspiration from layout-extract
-    mcp__exa__web_search_exa(query=search_query, numResults=5)
+    IF exists({inspiration_source}/{target}-layout-ideas.txt):
        # Reuse existing inspiration (no action needed)
        REPORT: "Using existing layout inspiration for {target}"
    ELSE:
        # Priority 2: Generate new inspiration via MCP
        bash(mkdir -p {inspiration_source})
        search_query = "{target} {target_type} layout patterns variations"
        mcp__exa__web_search_exa(query=search_query, numResults=5)
-    # Extract context from prompt for this target
+        # Extract context from prompt for this target
-    target_requirements = extract_relevant_context_from_prompt(prompt_text, target)
+        target_requirements = extract_relevant_context_from_prompt(prompt_text, target)
-    # Write simple inspiration file
+        # Write inspiration file to centralized location
-    Write({base_path}/prototypes/_inspirations/{target}-layout-ideas.txt, inspiration_content)
+        Write({inspiration_source}/{target}-layout-ideas.txt, inspiration_content)
        REPORT: "Created new layout inspiration for {target}"
 ```
-**Output**: `T` inspiration text files
+**Output**: `T` inspiration text files (reused or created in `.intermediates/layout-analysis/inspirations/`)
 ## Phase 2: Target-Style-Centric Batch Generation (Agent)
@@ -126,8 +127,8 @@ Task(ui-design-agent): `
  ${design_attributes ? "DESIGN_ATTRIBUTES: " + JSON.stringify(design_attributes) : ""}
  ## Reference
-  - Layout inspiration: Read("{base_path}/prototypes/_inspirations/{target}-layout-ideas.txt")
+  - Layout inspiration: Read("{base_path}/.intermediates/layout-analysis/inspirations/{target}-layout-ideas.txt")
-  - Design tokens: Read("{base_path}/style-consolidation/style-{style_id}/design-tokens.json")
+  - Design tokens: Read("{base_path}/style-extraction/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" : ""}
@@ -242,18 +243,19 @@ 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
+- Tokens: Production-ready (WCAG AA compliant)
 {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)
 Layout Inspirations:
 {base_path}/.intermediates/layout-analysis/inspirations/ ({T} text files, reused or created)
 Preview:
 1. Open compare.html (recommended)
 2. Open index.html
@@ -270,11 +272,10 @@ Next: /workflow:ui-design:update
 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)
+bash(ls {base_path}/style-extraction/style-* -d | wc -l)
-# Check token sources
+# Check design tokens exist
-bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "consolidated")
+bash(test -f {base_path}/style-extraction/style-1/design-tokens.json && echo "valid")
 bash(test -f {base_path}/style-extraction/style-cards.json && echo "proposed")
 ```
 ### Validation Commands
@@ -288,8 +289,11 @@ bash(test -f {base_path}/prototypes/compare.html && echo "exists")
 ### File Operations
 ```bash
-# Create directories
+# Create prototypes directory
-bash(mkdir -p {base_path}/prototypes/_inspirations)
+bash(mkdir -p {base_path}/prototypes)
 # Create inspirations directory (if needed)
 bash(mkdir -p {base_path}/.intermediates/layout-analysis/inspirations)
 # Run preview script
 bash(~/.claude/scripts/ui-generate-preview.sh "{base_path}/prototypes")
@@ -299,15 +303,17 @@ bash(~/.claude/scripts/ui-generate-preview.sh "{base_path}/prototypes")
 ```
 {base_path}/
 ├── .intermediates/
 │   └── layout-analysis/
 │       └── inspirations/
 │           └── {target}-layout-ideas.txt  # Layout inspiration (reused or created)
 ├── 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-extraction/
    └── style-{s}/
        ├── design-tokens.json
        └── style-guide.md
@@ -317,8 +323,8 @@ bash(~/.claude/scripts/ui-generate-preview.sh "{base_path}/prototypes")
 ### Common Errors
 ```
-ERROR: No token sources found
+ERROR: No design tokens found
-→ Run /workflow:ui-design:extract or /workflow:ui-design:consolidate
+→ Run /workflow:ui-design:style-extract first
 ERROR: No targets extracted from prompt
 → Use --targets explicitly or rephrase prompt
@@ -364,9 +370,14 @@ ERROR: Script permission denied
 ## Integration
-**Input**: Prompt, design-tokens.json, design-space-analysis.json (optional)
+**Input**:
 - Required: Prompt, design-tokens.json
 - Optional: design-space-analysis.json (from `.intermediates/style-analysis/`)
 - Reuses: Layout inspirations from `.intermediates/layout-analysis/inspirations/` (if available from layout-extract)
 **Output**: S×L×T prototypes for `/workflow:ui-design:update`
-**Compatible**: extract, consolidate, explore-auto, imitate-auto outputs
+**Compatible**: style-extract, explore-auto, imitate-auto outputs
 **Optimization**: Reuses layout inspirations from layout-extract phase, avoiding duplicate MCP searches
 ## Usage Examples
--- a/.claude/commands/workflow/ui-design/consolidate.md
+++ b/.claude/commands/workflow/ui-design/consolidate.md
@@ -1,267 +0,0 @@
 ---
 name: consolidate
 description: Consolidate style variants into independent design systems and plan layout strategies
 argument-hint: /workflow:ui-design:consolidate [--base-path <path>] [--session <id>] [--variants <count>] [--layout-variants <count>]
 allowed-tools: TodoWrite(*), Read(*), Write(*), Bash(*), Task(*)
 ---
 # Design System Consolidation Command
 ## Overview
 Consolidate style variants into independent production-ready design systems. Refines raw token proposals from `style-extract` into finalized design tokens and style guides.
 **Strategy**: Philosophy-Driven Refinement
 - **Agent-Driven**: Uses ui-design-agent for N variant generation
 - **Token Refinement**: Transforms proposed_tokens into complete systems
 - **Production-Ready**: design-tokens.json + style-guide.md per variant
 - **Matrix-Ready**: Provides style variants for generate phase
 ## Phase 1: Setup & Validation
 ### Step 1: Resolve Base Path & Load Style Cards
 ```bash
 # Determine base path
 bash(find .workflow -type d -name "design-*" | head -1)  # Auto-detect
 # OR use --base-path / --session parameters
 # Load style cards
 bash(cat {base_path}/style-extraction/style-cards.json)
 ```
 ### Step 2: Memory Check (Skip if Already Done)
 ```bash
 # Check if already consolidated
 bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "exists")
 ```
 **If exists**: Skip to completion message
 ### Step 3: Select Variants
 ```bash
 # Determine variant count (default: all from style-cards.json)
 bash(cat style-cards.json | grep -c "\"id\": \"variant-")
 # Validate variant count
 # Priority: --variants parameter → total_variants from style-cards.json
 ```
 **Output**: `variants_count`, `selected_variants[]`
 ### Step 4: Load Design Context (Optional)
 ```bash
 # Load brainstorming context
 bash(test -f {base_path}/.brainstorming/synthesis-specification.md && cat it)
 # Load design space analysis
 bash(test -f {base_path}/style-extraction/design-space-analysis.json && cat it)
 ```
 **Output**: `design_context`, `design_space_analysis`
 ## Phase 2: Design System Synthesis (Agent)
 **Executor**: `Task(ui-design-agent)` for all variants
 ### Step 1: Create Output Directories
 ```bash
 bash(mkdir -p {base_path}/style-consolidation/style-{{1..{variants_count}}})
 ```
 ### Step 2: Launch Agent Task
 For all variants (1 to {variants_count}):
 ```javascript
 Task(ui-design-agent): `
  [DESIGN_TOKEN_GENERATION_TASK]
  Generate {variants_count} independent design systems using philosophy-driven refinement
  SESSION: {session_id} | MODE: Philosophy-driven refinement | BASE_PATH: {base_path}
  CRITICAL PATH: Use loop index (N) for directories: style-1/, style-2/, ..., style-N/
  VARIANT DATA:
  {FOR each variant with index N:
    VARIANT INDEX: {N} | ID: {variant.id} | NAME: {variant.name}
    Design Philosophy: {variant.design_philosophy}
    Proposed Tokens: {variant.proposed_tokens}
    {IF design_space_analysis: Design Attributes: {attributes}, Anti-keywords: {anti_keywords}}
  }
  ## 参考
  - Style cards: Each variant's proposed_tokens and design_philosophy
  - Design space analysis: design_attributes (saturation, weight, formality, organic/geometric, innovation, density)
  - Anti-keywords: Explicit constraints to avoid
  - WCAG AA: 4.5:1 text, 3:1 UI (use built-in AI knowledge)
  ## 生成
  For EACH variant (use loop index N for paths):
  1. {base_path}/style-consolidation/style-{N}/design-tokens.json
     - Complete token structure: colors, typography, spacing, border_radius, shadows, breakpoints
     - All colors in OKLCH format
     - Apply design_attributes to token values (saturation→chroma, density→spacing, etc.)
  2. {base_path}/style-consolidation/style-{N}/style-guide.md
     - Expanded design philosophy
     - Complete color system with accessibility notes
     - Typography documentation
     - Usage guidelines
  ## 注意
  - ✅ Use Write() tool immediately for each file
  - ✅ Use loop index N for directory names: style-1/, style-2/, etc.
  - ❌ DO NOT use variant.id in paths (metadata only)
  - ❌ NO external research or MCP calls (pure AI refinement)
  - Apply philosophy-driven refinement: design_attributes guide token values
  - Maintain divergence: Use anti_keywords to prevent variant convergence
  - Complete each variant's files before moving to next variant
 `
 ```
 **Output**: Agent generates `variants_count × 2` files
 ## Phase 3: Verify Output
 ### Step 1: Check Files Created
 ```bash
 # Verify all design systems created
 bash(ls {base_path}/style-consolidation/style-*/design-tokens.json | wc -l)
 # Validate structure
 bash(cat {base_path}/style-consolidation/style-1/design-tokens.json | grep -q "colors" && echo "valid")
 ```
 ### Step 2: Verify File Sizes
 ```bash
 bash(ls -lh {base_path}/style-consolidation/style-1/)
 ```
 **Output**: `variants_count × 2` files verified
 ## Completion
 ### Todo Update
 ```javascript
 TodoWrite({todos: [
  {content: "Setup and load style cards", status: "completed", activeForm: "Loading style cards"},
  {content: "Select variants and load context", status: "completed", activeForm: "Loading context"},
  {content: "Generate design systems (agent)", status: "completed", activeForm: "Generating systems"},
  {content: "Verify output files", status: "completed", activeForm: "Verifying files"}
 ]});
 ```
 ### Output Message
 ```
 ✅ Design system consolidation complete!
 Configuration:
 - Session: {session_id}
 - Variants: {variants_count}
 - Philosophy-driven refinement (zero MCP calls)
 Generated Files:
 {base_path}/style-consolidation/
 ├── style-1/ (design-tokens.json, style-guide.md)
 ├── style-2/ (same structure)
 └── style-{variants_count}/ (same structure)
 Next: /workflow:ui-design:generate --session {session_id} --style-variants {variants_count} --targets "dashboard,auth"
 ```
 ## Simple Bash Commands
 ### Path Operations
 ```bash
 # Find design directory
 bash(find .workflow -type d -name "design-*" | head -1)
 # Load style cards
 bash(cat {base_path}/style-extraction/style-cards.json)
 # Count variants
 bash(cat style-cards.json | grep -c "\"id\": \"variant-")
 ```
 ### Validation Commands
 ```bash
 # Check if already consolidated
 bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "exists")
 # Verify output
 bash(ls {base_path}/style-consolidation/style-*/design-tokens.json | wc -l)
 # Validate structure
 bash(cat design-tokens.json | grep -q "colors" && echo "valid")
 ```
 ### File Operations
 ```bash
 # Create directories
 bash(mkdir -p {base_path}/style-consolidation/style-{{1..3}})
 # Check file sizes
 bash(ls -lh {base_path}/style-consolidation/style-1/)
 ```
 ## Output Structure
 ```
 {base_path}/
 └── style-consolidation/
    ├── style-1/
    │   ├── design-tokens.json
    │   └── style-guide.md
    ├── style-2/
    │   ├── design-tokens.json
    │   └── style-guide.md
    └── style-N/ (same structure)
 ```
 ## design-tokens.json Format
 ```json
 {
  "colors": {
    "brand": {"primary": "oklch(...)", "secondary": "oklch(...)", "accent": "oklch(...)"},
    "surface": {"background": "oklch(...)", "elevated": "oklch(...)", "overlay": "oklch(...)"},
    "semantic": {"success": "oklch(...)", "warning": "oklch(...)", "error": "oklch(...)", "info": "oklch(...)"},
    "text": {"primary": "oklch(...)", "secondary": "oklch(...)", "tertiary": "oklch(...)", "inverse": "oklch(...)"},
    "border": {"default": "oklch(...)", "strong": "oklch(...)", "subtle": "oklch(...)"}
  },
  "typography": {"font_family": {...}, "font_size": {...}, "font_weight": {...}, "line_height": {...}, "letter_spacing": {...}},
  "spacing": {"0": "0", "1": "0.25rem", ..., "24": "6rem"},
  "border_radius": {"none": "0", "sm": "0.25rem", ..., "full": "9999px"},
  "shadows": {"sm": "...", "md": "...", "lg": "...", "xl": "..."},
  "breakpoints": {"sm": "640px", ..., "2xl": "1536px"}
 }
 ```
 **Requirements**: OKLCH colors, complete coverage, semantic naming
 ## Error Handling
 ### Common Errors
 ```
 ERROR: No style cards found
 → Run /workflow:ui-design:style-extract first
 ERROR: Invalid variant count
 → List available count, auto-select all
 ERROR: Agent file creation failed
 → Check agent output, verify Write() operations
 ```
 ## Key Features
 - **Philosophy-Driven Refinement** - Pure AI token refinement using design_attributes
 - **Agent-Driven** - Uses ui-design-agent for multi-file generation
 - **Separate Design Systems** - N independent systems (one per variant)
 - **Production-Ready** - WCAG AA compliant, OKLCH colors, semantic naming
 - **Zero MCP Calls** - Faster execution, better divergence preservation
 ## Integration
 **Input**: `style-cards.json` from `/workflow:ui-design:style-extract`
 **Output**: `style-consolidation/style-{N}/` for each variant
 **Next**: `/workflow:ui-design:generate --style-variants N`
 **Note**: After consolidate, use `/workflow:ui-design:layout-extract` to generate layout templates before running generate.
--- a/.claude/commands/workflow/ui-design/explore-auto.md
+++ b/.claude/commands/workflow/ui-design/explore-auto.md
@@ -20,11 +20,10 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
 1. User triggers: `/workflow:ui-design:explore-auto [params]`
 2. Phase 0c: Target confirmation → User confirms → **IMMEDIATELY triggers Phase 1**
 3. Phase 1 (style-extract) → **WAIT for completion** → Auto-continues
-4. Phase 2 (style-consolidate) → **WAIT for completion** → Auto-continues
+4. Phase 2 (layout-extract) → **WAIT for completion** → Auto-continues
-5. Phase 2.5 (layout-extract) → **WAIT for completion** → Auto-continues
+5. **Phase 3 (ui-assembly)** → **WAIT for completion** → Auto-continues
-6. **Phase 3 (ui-assembly)** → **WAIT for completion** → Auto-continues
+6. Phase 4 (design-update) → **WAIT for completion** → Auto-continues
-7. Phase 4 (design-update) → **WAIT for completion** → Auto-continues
+7. Phase 5 (batch-plan, optional) → Reports completion
 8. Phase 5 (batch-plan, optional) → Reports completion
 **Phase Transition Mechanism**:
 - **Phase 0c (User Interaction)**: User confirms targets → IMMEDIATELY triggers Phase 1
@@ -91,8 +90,8 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
 **Matrix Mode** (style-centric):
 - Generates `style_variants × layout_variants × targets` prototypes
- **Phase 1**: `style_variants` style options with design_attributes (extract)
+- **Phase 1**: `style_variants` complete design systems (extract)
- **Phase 2**: `style_variants` independent design systems (consolidate)
+- **Phase 2**: Layout templates extraction (layout-extract)
 - **Phase 3**: Style-centric batch generation (generate)
  - Sub-phase 1: `targets × layout_variants` target-specific layout plans
  - **Sub-phase 2**: `S` style-centric agents (each handles `L×T` combinations)
@@ -280,18 +279,7 @@ SlashCommand(command)
 # Upon completion, IMMEDIATELY execute Phase 2 (auto-continue)
 ```
-### Phase 2: Style Consolidation
+### Phase 2: Layout Extraction
 ```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 2.5 (auto-continue)
 ```
 ### Phase 2.5: Layout Extraction
 ```bash
 targets_string = ",".join(inferred_target_list)
 command = "/workflow:ui-design:layout-extract --base-path \"{base_path}\" " +
@@ -360,7 +348,6 @@ IF --batch-plan:
 // 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 layout extraction", "status": "pending", "activeForm": "Executing..."},
  {"content": "Execute UI assembly", "status": "pending", "activeForm": "Executing..."},
  {"content": "Execute design integration", "status": "pending", "activeForm": "Executing..."}
@@ -442,9 +429,8 @@ Architecture: Style-Centric Batch Generation
 Run ID: {run_id} | Session: {session_id or "standalone"}
 Type: {icon} {target_type} | Device: {device_type} | Matrix: {s}×{l}×{n} = {total} prototypes
-Phase 1: {s} style variants with design_attributes (style-extract)
+Phase 1: {s} complete design systems (style-extract)
-Phase 2: {s} design systems with tokens.css (consolidate)
+Phase 2: {n×l} layout templates (layout-extract explore mode)
 Phase 2.5: {n×l} layout templates (layout-extract explore mode)
  - Device: {device_type} layouts
  - {n} targets × {l} layout variants = {n×l} structural templates
 Phase 3: UI Assembly (generate)
@@ -466,11 +452,13 @@ Design Quality:
 ✅ Device-Optimized: Layouts designed for {device_type}
 📂 {base_path}/
-  ├── style-extraction/       ({s} style cards + design-space-analysis.json)
+  ├── .intermediates/          (Intermediate analysis files)
-  ├── style-consolidation/    ({s} design systems with tokens.css)
+  │   ├── style-analysis/      (computed-styles.json, design-space-analysis.json)
-  ├── layout-extraction/      ({n×l} layout templates + layout-space-analysis.json)
+  │   └── layout-analysis/     (dom-structure-*.json, inspirations/*.txt)
-  ├── prototypes/             ({total} assembled prototypes)
+  ├── style-extraction/        ({s} complete design systems)
-  └── .run-metadata.json      (includes device type)
+  ├── layout-extraction/       ({n×l} layout templates + layout-space-analysis.json)
  ├── prototypes/              ({total} assembled prototypes)
  └── .run-metadata.json       (includes device type)
 🌐 Preview: {base_path}/prototypes/compare.html
  - Interactive {s}×{l} matrix view
--- a/.claude/commands/workflow/ui-design/generate.md
+++ b/.claude/commands/workflow/ui-design/generate.md
@@ -18,8 +18,7 @@ Pure assembler that combines pre-extracted layout templates with design tokens t
 - **Automatic Image Reference**: If source images exist in layout templates, they're automatically used for visual context
 **Prerequisite Commands**:
- `/workflow:ui-design:style-extract` → Style tokens
+- `/workflow:ui-design:style-extract` → Complete design systems (design-tokens.json + style-guide.md)
 - `/workflow:ui-design:consolidate` → Final design tokens
 - `/workflow:ui-design:layout-extract` → Layout structure
 ## Phase 1: Setup & Validation
@@ -30,7 +29,7 @@ Pure assembler that combines pre-extracted layout templates with design tokens t
 bash(find .workflow -type d -name "design-*" | head -1)  # Auto-detect
 # Get style count
-bash(ls {base_path}/style-consolidation/style-* -d | wc -l)
+bash(ls {base_path}/style-extraction/style-* -d | wc -l)
 # Image reference auto-detected from layout template source_image_path
 ```
@@ -50,10 +49,10 @@ Read({base_path}/layout-extraction/layout-templates.json)
 ### Step 3: Validate Design Tokens
 ```bash
 # Check design tokens exist for all styles
-bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "valid")
+bash(test -f {base_path}/style-extraction/style-1/design-tokens.json && echo "valid")
 # For each style variant: Load design tokens
-Read({base_path}/style-consolidation/style-{id}/design-tokens.json)
+Read({base_path}/style-extraction/style-{id}/design-tokens.json)
 ```
 **Output**: `design_tokens[]` for all style variants
@@ -84,7 +83,7 @@ Task(ui-design-agent): `
     Extract: dom_structure, css_layout_rules, device_type, source_image_path
  2. Design Tokens:
-     Read("{base_path}/style-consolidation/style-{style_id}/design-tokens.json")
+     Read("{base_path}/style-extraction/style-{style_id}/design-tokens.json")
     Extract: ALL token values (colors, typography, spacing, borders, shadows, breakpoints)
  3. Reference Image (AUTO-DETECTED):
@@ -192,7 +191,7 @@ Assembly Process:
 Quality:
 - Structure: From layout-extract (DOM, CSS layout rules)
- Style: From consolidate (design tokens)
+- Style: From style-extract (design tokens)
 - CSS: Token values directly applied (var() replaced)
 - Device-optimized: Layouts match device_type from templates
@@ -222,7 +221,7 @@ Next: /workflow:ui-design:update
 bash(find .workflow -type d -name "design-*" | head -1)
 # Count style variants
-bash(ls {base_path}/style-consolidation/style-* -d | wc -l)
+bash(ls {base_path}/style-extraction/style-* -d | wc -l)
 ```
 ### Validation Commands
@@ -231,7 +230,7 @@ bash(ls {base_path}/style-consolidation/style-* -d | wc -l)
 bash(test -f {base_path}/layout-extraction/layout-templates.json && echo "exists")
 # Check design tokens exist
-bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "valid")
+bash(test -f {base_path}/style-extraction/style-1/design-tokens.json && echo "valid")
 # Count generated files
 bash(ls {base_path}/prototypes/{target}-style-*-layout-*.html | wc -l)
@@ -255,9 +254,9 @@ bash(~/.claude/scripts/ui-generate-preview.sh "{base_path}/prototypes")
 {base_path}/
 ├── layout-extraction/
 │   └── layout-templates.json      # Input (from layout-extract)
-├── style-consolidation/
+├── style-extraction/
 │   └── style-{s}/
-│       ├── design-tokens.json     # Input (from consolidate)
+│       ├── design-tokens.json     # Input (from style-extract)
 │       └── style-guide.md
 └── prototypes/
    ├── {target}-style-{s}-layout-{l}.html  # Assembled prototypes
@@ -275,7 +274,7 @@ ERROR: Layout templates not found
 → Run /workflow:ui-design:layout-extract first
 ERROR: Design tokens not found
-→ Run /workflow:ui-design:consolidate first
+→ Run /workflow:ui-design:style-extract first
 ERROR: Agent assembly failed
 → Check inputs exist, validate JSON structure
@@ -311,8 +310,7 @@ ERROR: Script permission denied
 ## Integration
 **Prerequisites**:
- `/workflow:ui-design:style-extract` → `style-cards.json`
+- `/workflow:ui-design:style-extract` → `design-tokens.json` + `style-guide.md`
 - `/workflow:ui-design:consolidate` → `design-tokens.json`
 - `/workflow:ui-design:layout-extract` → `layout-templates.json`
 **Input**: `layout-templates.json` + `design-tokens.json`
--- a/.claude/commands/workflow/ui-design/imitate-auto.md
+++ b/.claude/commands/workflow/ui-design/imitate-auto.md
@@ -1,7 +1,7 @@
 ---
 name: imitate-auto
-description: High-speed multi-page UI replication with batch screenshot and optional token refinement
+description: High-speed multi-page UI replication with batch screenshot capture
-argument-hint: --url-map "<map>" [--capture-mode <batch|deep>] [--depth <1-5>] [--session <id>] [--refine-tokens] [--prompt "<desc>"]
+argument-hint: --url-map "<map>" [--capture-mode <batch|deep>] [--depth <1-5>] [--session <id>] [--prompt "<desc>"]
 allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Write(*), Bash(*)
 ---
@@ -19,11 +19,10 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Write(*), Bash(*)
 1. User triggers: `/workflow:ui-design:imitate-auto --url-map "..."`
 2. Phase 0: Initialize and parse parameters
 3. Phase 1: Screenshot capture (batch or deep mode) → **WAIT for completion** → Auto-continues
-4. Phase 2: Style extraction (visual tokens) → **WAIT for completion** → Auto-continues
+4. Phase 2: Style extraction (complete design systems) → **WAIT for completion** → Auto-continues
 5. Phase 2.5: Layout extraction (structure templates) → **WAIT for completion** → Auto-continues
-6. Phase 3: Token processing (conditional consolidate) → **WAIT for completion** → Auto-continues
+6. Phase 3: Batch UI assembly → **WAIT for completion** → Auto-continues
-7. Phase 4: Batch UI assembly → **WAIT for completion** → Auto-continues
+7. Phase 4: Design system integration → Reports completion
 8. Phase 5: Design system integration → Reports completion
 **Phase Transition Mechanism**:
 - `SlashCommand` is BLOCKING - execution pauses until completion
@@ -67,13 +66,10 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Write(*), Bash(*)
  - Enable automatic design system integration (Phase 5)
  - If not provided: standalone mode (`.workflow/.design/`)
 - `--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)
 - `--prompt "<desc>"` (Optional): Style extraction guidance
  - Influences extract command analysis focus
  - Example: `"Focus on dark mode"`, `"Emphasize minimalist design"`
  - **Note**: Design systems are now production-ready by default (no separate consolidate step)
 ## Execution Modes
@@ -86,14 +82,11 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Write(*), Bash(*)
  - Captures page layers at different depths (1-5)
  - Only processes first URL from url-map
-**Token Processing Modes**:
+**Token Processing**:
- **Fast-Track** (default): Skip consolidate, use proposed tokens directly (~2s)
+- **Direct Generation**: Complete design systems generated in style-extract phase
-  - Best for rapid prototyping and testing
+  - Production-ready design-tokens.json with WCAG compliance
-  - Tokens may lack philosophy-driven refinement
+  - Complete style-guide.md documentation
- **Production** (--refine-tokens): Full consolidate with WCAG validation (~60s)
+  - No separate consolidation step required (~30-60s faster)
  - Philosophy-driven token refinement
  - Complete accessibility validation
  - Production-ready design system
 **Session Integration**:
 - `--session` flag determines session integration or standalone execution
@@ -163,7 +156,6 @@ FOR pair IN split(url_map_string, ","):
 VALIDATE: len(target_names) > 0, "url-map must contain at least one target:url pair"
 primary_target = target_names[0]  # First target as primary style source
 refine_tokens_mode = --refine-tokens OR false
 # Parse capture mode
 capture_mode = --capture-mode OR "batch"
@@ -198,7 +190,6 @@ metadata = {
        "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,
@@ -217,7 +208,6 @@ ELSE:
    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: ""
@@ -226,9 +216,8 @@ REPORT: ""
 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 style (visual tokens)", status: "pending", activeForm: "Extracting style"},
+  {content: "Extract style (complete design systems)", status: "pending", activeForm: "Extracting style"},
  {content: "Extract layout (structure templates)", status: "pending", activeForm: "Extracting layout"},
  {content: refine_tokens_mode ? "Refine design tokens via consolidate" : "Fast token adaptation (skip consolidate)", status: "pending", activeForm: "Processing tokens"},
  {content: f"Assemble UI for {len(target_names)} targets", status: "pending", activeForm: "Assembling UI"},
  {content: session_id ? "Integrate design system" : "Standalone completion", status: "pending", activeForm: "Completing"}
 ]})
@@ -370,31 +359,31 @@ CATCH error:
    ERROR: "Cannot proceed without visual tokens"
    EXIT 1
-# style-extract outputs to: {base_path}/style-extraction/style-cards.json
+# style-extract outputs to: {base_path}/style-extraction/style-1/design-tokens.json
 # Verify extraction results
-style_cards_path = "{base_path}/style-extraction/style-cards.json"
+design_tokens_path = "{base_path}/style-extraction/style-1/design-tokens.json"
 style_guide_path = "{base_path}/style-extraction/style-1/style-guide.md"
-IF NOT exists(style_cards_path):
+IF NOT exists(design_tokens_path):
-    ERROR: "style-extract command did not generate style-cards.json"
+    ERROR: "style-extract command did not generate design-tokens.json"
-    ERROR: "Expected: {style_cards_path}"
+    ERROR: "Expected: {design_tokens_path}"
    EXIT 1
-style_cards = Read(style_cards_path)
+IF NOT exists(style_guide_path):
-
+    ERROR: "style-extract command did not generate style-guide.md"
-IF len(style_cards.style_cards) != 1:
+    ERROR: "Expected: {style_guide_path}"
    ERROR: "Expected single variant in imitate mode, got {len(style_cards.style_cards)}"
    EXIT 1
-extracted_style = style_cards.style_cards[0]
+design_tokens = Read(design_tokens_path)
 REPORT: ""
 REPORT: "✅ Phase 2 complete:"
-REPORT: "   Style: '{extracted_style.name}'"
+REPORT: "   Output: style-extraction/style-1/"
-REPORT: "   Philosophy: {extracted_style.design_philosophy}"
+REPORT: "   Files: design-tokens.json, style-guide.md"
-REPORT: "   Tokens: {count_tokens(extracted_style.proposed_tokens)} visual tokens"
+REPORT: "   Quality: Production-ready (WCAG AA)"
-TodoWrite(mark_completed: "Extract style (visual tokens)",
+TodoWrite(mark_completed: "Extract style (complete design systems)",
          mark_in_progress: "Extract layout (structure templates)")
 ```
@@ -444,125 +433,20 @@ REPORT: "   Templates: {template_count} layout structures"
 REPORT: "   Targets: {', '.join(target_names)}"
 TodoWrite(mark_completed: "Extract layout (structure templates)",
          mark_in_progress: refine_tokens_mode ? "Refine design tokens via consolidate" : "Fast token adaptation")
 ```
 ### Phase 3: Token Processing (Conditional Consolidate)
 ```bash
 REPORT: ""
 REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
 REPORT: "🚀 Phase 3: Token Processing"
 REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
 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: ""
    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 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
 {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"Assemble UI for {len(target_names)} targets")
 ```
-### Phase 4: Batch UI Assembly
+### Phase 3: Batch UI Assembly
 ```bash
 REPORT: ""
 REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-REPORT: "🚀 Phase 4: Batch UI Assembly"
+REPORT: "🚀 Phase 3: Batch UI Assembly"
 REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
 # Note: design-tokens.json already generated in Phase 2 (style-extract)
 # Located at: {base_path}/style-extraction/style-1/design-tokens.json
 # Build targets string
 targets_string = ",".join(target_names)
@@ -602,12 +486,12 @@ TodoWrite(mark_completed: f"Assemble UI for {len(target_names)} targets",
          mark_in_progress: session_id ? "Integrate design system" : "Standalone completion")
 ```
-### Phase 5: Design System Integration
+### Phase 4: Design System Integration
 ```bash
 REPORT: ""
 REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-REPORT: "🚀 Phase 5: Design System Integration"
+REPORT: "🚀 Phase 4: Design System Integration"
 REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
 IF session_id:
@@ -636,9 +520,8 @@ metadata.status = "completed"
 metadata.completion_time = current_timestamp()
 metadata.outputs = {
    "screenshots": f"{base_path}/screenshots/",
-    "style_system": f"{base_path}/style-consolidation/style-1/",
+    "style_system": f"{base_path}/style-extraction/style-1/",
    "prototypes": f"{base_path}/prototypes/",
    "token_quality": token_quality,
    "captured_count": captured_count,
    "generated_count": generated_count
 }
@@ -650,9 +533,9 @@ TodoWrite(mark_completed: session_id ? "Integrate design system" : "Standalone c
 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: "Extract style (complete design systems)", status: "completed", activeForm: "Extracting"},
-  {content: refine_tokens_mode ? "Refine design tokens via consolidate" : "Fast token adaptation", status: "completed", activeForm: "Processing"},
+  {content: "Extract layout (structure templates)", status: "completed", activeForm: "Extracting layout"},
-  {content: f"Generate UI for {len(target_names)} targets", status: "completed", activeForm: "Generating"},
+  {content: f"Assemble UI for {len(target_names)} targets", status: "completed", activeForm: "Assembling"},
  {content: session_id ? "Integrate design system" : "Standalone completion", status: "completed", activeForm: "Completing"}
 ]})
 ```
@@ -674,24 +557,18 @@ 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
+Phase 2 - Style Extraction: ✅ Production-ready design systems
-  Style: {extracted_style.name}
+  Output: style-extraction/style-1/ (design-tokens.json + style-guide.md)
-  Philosophy: {extracted_style.design_philosophy[:80]}...
+  Quality: WCAG AA compliant, OKLCH colors
-Phase 3 - Token Processing: ✅ {token_quality}
+Phase 2.5 - Layout Extraction: ✅ Structure templates
-  {IF refine_tokens_mode:
+  Templates: {template_count} layout structures
    "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
+Phase 3 - UI Assembly: ✅ {generated_count} pages assembled
  Targets: {', '.join(target_names)}
  Configuration: 1 style × 1 layout × {generated_count} pages
-Phase 5 - Integration: {IF session_id: "✅ Integrated into session" ELSE: "⏭️ Standalone mode"}
+Phase 4 - Integration: {IF session_id: "✅ Integrated into session" ELSE: "⏭️ Standalone mode"}
 ━━━ 📂 Output Structure ━━━
@@ -710,12 +587,12 @@ ELSE:
 │   │   └── {layers}.png
 │   └── layer-map.json
 }
-├── style-extraction/               # Design analysis
+├── style-extraction/               # Production-ready design systems
 │   └── style-cards.json
 ├── style-consolidation/            # {token_quality}
 │   └── style-1/
 │       ├── design-tokens.json
 │       └── style-guide.md
 ├── layout-extraction/              # Structure templates
 │   └── layout-templates.json
 └── prototypes/                     # {generated_count} HTML/CSS files
    ├── {target1}-style-1-layout-1.html + .css
    ├── {target2}-style-1-layout-1.html + .css
@@ -750,13 +627,6 @@ ELSE:
 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 ""}
 }
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 ```
@@ -767,9 +637,9 @@ ELSE:
 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: "Extract style (complete design systems)", status: "pending", activeForm: "Extracting style"},
-  {content: refine_tokens ? "Refine tokens via consolidate" : "Fast token adaptation", status: "pending", activeForm: "Processing tokens"},
+  {content: "Extract layout (structure templates)", status: "pending", activeForm: "Extracting layout"},
-  {content: "Generate UI for all targets", status: "pending", activeForm: "Generating UI"},
+  {content: "Assemble UI for all targets", status: "pending", activeForm: "Assembling UI"},
  {content: "Integrate design system", status: "pending", activeForm: "Integrating"}
 ]})
@@ -818,7 +688,7 @@ TodoWrite({todos: [
 ## Key Features
 - **🚀 Dual Capture**: Batch mode for speed, deep mode for detail
- **⚡ Fast-Track Option**: Skip consolidate for 30-60s time savings
+- **⚡ Production-Ready**: Complete design systems generated directly (~30-60s faster)
 - **🎨 High-Fidelity**: Single unified design system from primary target
 - **📦 Autonomous**: No user intervention required between phases
 - **🔄 Reproducible**: Deterministic flow with isolated run directories
@@ -832,10 +702,10 @@ TodoWrite({todos: [
 # Result: 2 prototypes with fast-track tokens
 ```
-### 2. Production-Ready with Session
+### 2. Session Integration
 ```bash
-/workflow:ui-design:imitate-auto --session WFS-payment --url-map "pricing:https://stripe.com/pricing" --refine-tokens
+/workflow:ui-design:imitate-auto --session WFS-payment --url-map "pricing:https://stripe.com/pricing"
-# Result: 1 prototype with production tokens, integrated into session
+# Result: 1 prototype with production-ready design system, integrated into session
 ```
 ### 3. Deep Exploration Mode
@@ -852,16 +722,16 @@ TodoWrite({todos: [
 ## Integration Points
- **Input**: `--url-map` (multiple target:url pairs) + optional `--capture-mode`, `--depth`, `--session`, `--refine-tokens`, `--prompt`
+- **Input**: `--url-map` (multiple target:url pairs) + optional `--capture-mode`, `--depth`, `--session`, `--prompt`
- **Output**: Complete design system in `{base_path}/` (screenshots, style-extraction, style-consolidation, prototypes)
+- **Output**: Complete design system in `{base_path}/` (screenshots, style-extraction, layout-extraction, 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)
+  2. `/workflow:ui-design:style-extract` (Phase 2 - complete design systems)
-  3. `/workflow:ui-design:consolidate` (Phase 3, conditional)
+  3. `/workflow:ui-design:layout-extract` (Phase 2.5 - structure templates)
-  4. `/workflow:ui-design:generate` (Phase 4)
+  4. `/workflow:ui-design:generate` (Phase 3 - pure assembly)
-  5. `/workflow:ui-design:update` (Phase 5, if --session)
+  5. `/workflow:ui-design:update` (Phase 4, if --session)
 ## Completion Output
@@ -872,20 +742,20 @@ Mode: {capture_mode} | Session: {session_id or "standalone"}
 Run ID: {run_id}
 Phase 1 - Screenshot Capture: ✅ {captured_count} screenshots
-Phase 2 - Style Extraction: ✅ Single unified design system
+Phase 2 - Style Extraction: ✅ Production-ready design systems
-Phase 3 - Token Processing: ✅ {token_quality}
+Phase 2.5 - Layout Extraction: ✅ Structure templates
-Phase 4 - UI Generation: ✅ {generated_count} pages generated
+Phase 3 - UI Assembly: ✅ {generated_count} pages assembled
-Phase 5 - Integration: {IF session_id: "✅ Integrated" ELSE: "⏭️ Standalone"}
+Phase 4 - Integration: {IF session_id: "✅ Integrated" ELSE: "⏭️ Standalone"}
 Design Quality:
 ✅ High-Fidelity Replication: Accurate style from primary target
 ✅ Token-Driven Styling: 100% var() usage
-✅ {IF refine_tokens: "Production-Ready: WCAG validated" ELSE: "Fast-Track: Proposed tokens"}
+✅ Production-Ready: WCAG AA compliant, OKLCH colors
 📂 {base_path}/
  ├── screenshots/                  # {captured_count} screenshots
-  ├── style-extraction/             # Design analysis
+  ├── style-extraction/style-1/     # Production-ready design system
-  ├── style-consolidation/          # {token_quality}
+  ├── layout-extraction/            # Structure templates
  └── prototypes/                   # {generated_count} HTML/CSS files
 🌐 Preview: {base_path}/prototypes/compare.html
--- a/.claude/commands/workflow/ui-design/layout-extract.md
+++ b/.claude/commands/workflow/ui-design/layout-extract.md
@@ -68,15 +68,59 @@ Read({image_path})  # Load each image
 bash(mkdir -p {base_path}/layout-extraction)
 ```
-### Step 3: Memory Check (Skip if Already Done)
+### Step 2.5: Extract DOM Structure (URL Mode - Enhancement)
 ```bash
-# Check if layouts already extracted
+# If URLs are available, extract real DOM structure
-bash(test -f {base_path}/layout-extraction/layout-templates.json && echo "exists")
+# This provides accurate layout data to supplement visual analysis
 # For each URL in url_list:
 IF url_available AND mcp_chrome_devtools_available:
    # Read extraction script
    Read(~/.claude/scripts/extract-layout-structure.js)
    # Open page in Chrome DevTools
    mcp__chrome-devtools__navigate_page(url="{target_url}")
    # Execute layout extraction script
    result = mcp__chrome-devtools__evaluate_script(function="[SCRIPT_CONTENT]")
    # Save DOM structure for this target (intermediate file)
    bash(mkdir -p {base_path}/.intermediates/layout-analysis)
    Write({base_path}/.intermediates/layout-analysis/dom-structure-{target}.json, result)
    dom_structure_available = true
 ELSE:
    dom_structure_available = false
 ```
-**If exists**: Skip to completion message
+**Extraction Script Reference**: `~/.claude/scripts/extract-layout-structure.js`
-**Output**: `input_mode`, `base_path`, `extraction_mode`, `variants_count`, `targets[]`, `device_type`, loaded inputs
+**Usage**: Read the script file and use content directly in `mcp__chrome-devtools__evaluate_script()`
 **Script returns**:
 - `metadata`: Extraction timestamp, URL, method
 - `patterns`: Layout pattern statistics (flexColumn, flexRow, grid counts)
 - `structure`: Hierarchical DOM tree with layout properties
 **Benefits**:
 - ✅ Real flex/grid configuration (justifyContent, alignItems, gap, etc.)
 - ✅ Accurate element bounds (x, y, width, height)
 - ✅ Structural hierarchy with depth control
 - ✅ Layout pattern identification (flex-row, flex-column, grid-NCol)
 ### Step 3: Memory Check
 ```bash
 # 1. Check if inputs cached in session memory
 IF session_has_inputs: SKIP Step 2 file reading
 # 2. Check if output already exists
 bash(test -f {base_path}/layout-extraction/layout-templates.json && echo "exists")
 IF exists: SKIP to completion
 ```
 ---
 **Phase 0 Output**: `input_mode`, `base_path`, `extraction_mode`, `variants_count`, `targets[]`, `device_type`, loaded inputs
 ## Phase 1: Layout Research (Explore Mode Only)
@@ -90,13 +134,13 @@ bash(test -f {base_path}/layout-extraction/layout-templates.json && echo "exists
 ### Step 2: Gather Layout Inspiration (Explore Mode)
 ```bash
-bash(mkdir -p {base_path}/layout-extraction/_inspirations)
+bash(mkdir -p {base_path}/.intermediates/layout-analysis/inspirations)
 # For each target: Research via MCP
 # mcp__exa__web_search_exa(query="{target} layout patterns {device_type}", numResults=5)
 # Write inspiration file
-Write({base_path}/layout-extraction/_inspirations/{target}-layout-ideas.txt, inspiration_content)
+Write({base_path}/.intermediates/layout-analysis/inspirations/{target}-layout-ideas.txt, inspiration_content)
 ```
 **Output**: Inspiration text files for each target (explore mode only)
@@ -118,14 +162,28 @@ Task(ui-design-agent): `
  - Targets: {targets}  // List of page/component names
  - Variants per Target: {variants_count}
  - Device Type: {device_type}
-  ${exploration_mode ? "- Layout Inspiration: Read('" + base_path + "/layout-extraction/_inspirations/{target}-layout-ideas.txt')" : ""}
+  ${exploration_mode ? "- Layout Inspiration: Read('" + base_path + "/.intermediates/layout-analysis/inspirations/{target}-layout-ideas.txt')" : ""}
  ${dom_structure_available ? "- DOM Structure Data: Read('" + base_path + "/.intermediates/layout-analysis/dom-structure-{target}.json') - USE THIS for accurate layout properties" : ""}
  ## Analysis & Generation
  ${dom_structure_available ? "IMPORTANT: You have access to real DOM structure data with accurate flex/grid properties, bounds, and hierarchy. Use this data as ground truth for layout analysis." : ""}
  For EACH target in {targets}:
    For EACH variant (1 to {variants_count}):
-      1. **Analyze Structure**: Deconstruct reference to understand layout, hierarchy, responsiveness
+      1. **Analyze Structure**:
         ${dom_structure_available ?
           "- Use DOM structure data as primary source for layout properties" +
           "- Extract real flex/grid configurations (display, flexDirection, justifyContent, alignItems, gap)" +
           "- Use actual element bounds for responsive breakpoint decisions" +
           "- Preserve identified patterns (flex-row, flex-column, grid-NCol)" +
           "- Reference screenshots for visual context only" :
           "- Deconstruct reference images/URLs to understand layout, hierarchy, responsiveness"}
      2. **Define Philosophy**: Short description (e.g., "Asymmetrical grid with overlapping content areas")
-      3. **Generate DOM Structure**: JSON object representing semantic HTML5 structure
+      3. **Generate DOM Structure**:
         ${dom_structure_available ?
           "- Base structure on extracted DOM tree from .intermediates" +
           "- Preserve semantic tags and hierarchy from dom-structure-{target}.json" +
           "- Maintain layout patterns identified in patterns field" :
           "- JSON object representing semantic HTML5 structure"}
         - Semantic tags: <header>, <nav>, <main>, <aside>, <section>, <footer>
         - ARIA roles and accessibility attributes
         - Device-specific structure:
@@ -137,7 +195,12 @@ Task(ui-design-agent): `
      4. **Define Component Hierarchy**: High-level array of main layout regions
         Example: ["header", "main-content", "sidebar", "footer"]
      5. **Generate CSS Layout Rules**:
-         - Focus ONLY on layout (Grid, Flexbox, position, alignment, gap, etc.)
+         ${dom_structure_available ?
           "- Use real layout properties from DOM structure data" +
           "- Convert extracted flex/grid values to CSS rules" +
           "- Preserve actual gap, justifyContent, alignItems values" +
           "- Use element bounds to inform responsive breakpoints" :
           "- Focus ONLY on layout (Grid, Flexbox, position, alignment, gap, etc.)"}
         - Use CSS Custom Properties for spacing/breakpoints: var(--spacing-4), var(--breakpoint-md)
         - Device-specific styles (mobile-first @media for responsive)
         - NO colors, NO fonts, NO shadows - layout structure only
@@ -228,7 +291,7 @@ bash(find .workflow -type d -name "design-*" | head -1)
 # Create output directories
 bash(mkdir -p {base_path}/layout-extraction)
-bash(mkdir -p {base_path}/layout-extraction/_inspirations)  # explore mode only
+bash(mkdir -p {base_path}/.intermediates/layout-analysis/inspirations)  # explore mode only
 ```
 ### Validation Commands
@@ -250,7 +313,7 @@ bash(ls {images_pattern})
 Read({image_path})
 # Write inspiration files (explore mode)
-Write({base_path}/layout-extraction/_inspirations/{target}-layout-ideas.txt, content)
+Write({base_path}/.intermediates/layout-analysis/inspirations/{target}-layout-ideas.txt, content)
 # Write layout templates
 bash(echo '{json}' > {base_path}/layout-extraction/layout-templates.json)
@@ -260,11 +323,14 @@ bash(echo '{json}' > {base_path}/layout-extraction/layout-templates.json)
 ```
 {base_path}/
-└── layout-extraction/
+├── .intermediates/                    # Intermediate analysis files
-    ├── layout-templates.json         # Structural layout templates
+│   └── layout-analysis/
-    ├── layout-space-analysis.json    # Layout directions (explore mode only)
+│       ├── dom-structure-{target}.json   # Extracted DOM structure (URL mode only)
-    └── _inspirations/                 # Explore mode only
+│       └── inspirations/                 # Explore mode only
-        └── {target}-layout-ideas.txt  # Layout inspiration research
+│           └── {target}-layout-ideas.txt # Layout inspiration research
 └── layout-extraction/                 # Final layout templates
    ├── layout-templates.json          # Structural layout templates
    └── layout-space-analysis.json     # Layout directions (explore mode only)
 ```
 ## layout-templates.json Format
@@ -346,10 +412,13 @@ ERROR: MCP search failed (explore mode)
 ## Key Features
 - **Hybrid Extraction Strategy** - Combines real DOM structure data with AI visual analysis
 - **Accurate Layout Properties** - Chrome DevTools extracts real flex/grid configurations, bounds, and hierarchy
 - **Separation of Concerns** - Decouples layout (structure) from style (visuals)
 - **Structural Exploration** - Explore mode enables A/B testing of different layouts
 - **Token-Based Layout** - CSS uses `var()` placeholders for instant design system adaptation
 - **Device-Specific** - Tailored structures for different screen sizes
 - **Graceful Fallback** - Works with images/text when URL unavailable
 - **Foundation for Assembly** - Provides structural blueprint for refactored `generate` command
 - **Agent-Powered** - Deep structural analysis with AI
@@ -358,10 +427,9 @@ ERROR: MCP search failed (explore mode)
 **Workflow Position**: Between style extraction and prototype generation
 **New Workflow**:
-1. `/workflow:ui-design:style-extract` → `style-cards.json` (Visual tokens)
+1. `/workflow:ui-design:style-extract` → `design-tokens.json` + `style-guide.md` (Complete design systems)
-2. `/workflow:ui-design:consolidate` → `design-tokens.json` (Final visual system)
+2. `/workflow:ui-design:layout-extract` → `layout-templates.json` (Structural templates)
-3. `/workflow:ui-design:layout-extract` → `layout-templates.json` (Structural templates)
+3. `/workflow:ui-design:generate` (Pure assembler):
 4. `/workflow:ui-design:generate` (Refactored as assembler):
   - **Reads**: `design-tokens.json` + `layout-templates.json`
   - **Action**: For each style × layout combination:
     1. Build HTML from `dom_structure`
--- a/.claude/commands/workflow/ui-design/style-extract.md
+++ b/.claude/commands/workflow/ui-design/style-extract.md
@@ -8,13 +8,14 @@ allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*)
 # Style Extraction Command
 ## Overview
-Extract design style from reference images or text prompts using Claude's built-in analysis. Generates `style-cards.json` with multiple design variants containing token proposals for consolidation.
+Extract design style from reference images or text prompts using Claude's built-in analysis. Directly generates production-ready design systems with complete `design-tokens.json` and `style-guide.md` for each variant.
 **Strategy**: AI-Driven Design Space Exploration
 - **Claude-Native**: 100% Claude analysis, no external tools
- **Single Output**: `style-cards.json` with embedded token proposals
+- **Direct Output**: Complete design systems (design-tokens.json + style-guide.md)
 - **Flexible Input**: Images, text prompts, or both (hybrid mode)
 - **Maximum Contrast**: AI generates maximally divergent design directions
 - **Production-Ready**: WCAG AA compliant, OKLCH colors, semantic naming
 ## Phase 0: Setup & Input Validation
@@ -39,7 +40,48 @@ bash(find .workflow -type d -name "design-*" | head -1)  # Auto-detect
 # OR use --base-path / --session parameters
 ```
-### Step 2: Load Inputs
+### Step 2: Extract Computed Styles (URL Mode - Optional Enhancement)
 ```bash
 # If URL is available from capture metadata, extract real CSS values
 # This provides accurate design tokens to supplement visual analysis
 # Check for URL metadata from capture phase
 Read({base_path}/.metadata/capture-urls.json)  # If exists
 # For each URL in capture metadata:
 IF url_available AND mcp_chrome_devtools_available:
    # Read extraction script
    Read(~/.claude/scripts/extract-computed-styles.js)
    # Open page in Chrome DevTools
    mcp__chrome-devtools__navigate_page(url="{target_url}")
    # Execute extraction script directly
    result = mcp__chrome-devtools__evaluate_script(function="[SCRIPT_CONTENT]")
    # Save computed styles to intermediates directory
    bash(mkdir -p {base_path}/.intermediates/style-analysis)
    Write({base_path}/.intermediates/style-analysis/computed-styles.json, result)
    computed_styles_available = true
 ELSE:
    computed_styles_available = false
 ```
 **Extraction Script Reference**: `~/.claude/scripts/extract-computed-styles.js`
 **Usage**: Read the script file and use content directly in `mcp__chrome-devtools__evaluate_script()`
 **Script returns**:
 - `metadata`: Extraction timestamp, URL, method
 - `tokens`: Organized design tokens (colors, borderRadii, shadows, fontSizes, fontWeights, spacing)
 **Benefits**:
 - ✅ Pixel-perfect accuracy for border-radius, box-shadow, padding, etc.
 - ✅ Eliminates guessing from visual analysis
 - ✅ Provides ground truth for design tokens
 ### Step 3: Load Inputs
 ```bash
 # For image mode
 bash(ls {images_pattern})  # Expand glob pattern
@@ -52,15 +94,19 @@ Read({image_path})  # Load each image
 bash(mkdir -p {base_path}/style-extraction/)
 ```
-### Step 3: Memory Check (Skip if Already Done)
+### Step 3: Memory Check
 ```bash
-# Check if already extracted
+# 1. Check if inputs cached in session memory
-bash(test -f {base_path}/style-extraction/style-cards.json && echo "exists")
+IF session_has_inputs: SKIP Step 2 file reading
 # 2. Check if output already exists
 bash(test -f {base_path}/style-extraction/style-1/design-tokens.json && echo "exists")
 IF exists: SKIP to completion
 ```
-**If exists**: Skip to completion message
+---
-**Output**: `input_mode`, `base_path`, `extraction_mode`, `variants_count`, `loaded_images[]` or `prompt_guidance`
+**Phase 0 Output**: `input_mode`, `base_path`, `extraction_mode`, `variants_count`, `loaded_images[]` or `prompt_guidance`
 ## Phase 1: Design Space Analysis (Explore Mode Only)
@@ -93,42 +139,101 @@ AI analyzes requirements and generates `variants_count` maximally contrasting de
 ### Step 4: Write Design Space Analysis
 ```bash
-bash(echo '{design_space_analysis}' > {base_path}/style-extraction/design-space-analysis.json)
+bash(mkdir -p {base_path}/.intermediates/style-analysis)
 bash(echo '{design_space_analysis}' > {base_path}/.intermediates/style-analysis/design-space-analysis.json)
 # Verify output
-bash(test -f design-space-analysis.json && echo "saved")
+bash(test -f {base_path}/.intermediates/style-analysis/design-space-analysis.json && echo "saved")
 ```
-**Output**: `design-space-analysis.json` for consolidation phase
+**Output**: `design-space-analysis.json` (intermediate analysis file)
-## Phase 2: Style Synthesis & File Write
+## Phase 2: Design System Generation (Agent)
-### Step 1: Claude Native Analysis
+**Executor**: `Task(ui-design-agent)` for all variants
 AI generates `variants_count` design style proposals:
-**Input**:
+### Step 1: Create Output Directories
 - Input mode (image/text/hybrid)
 - Visual references or text guidance
 - Design space analysis (explore mode only)
 - Variant-specific directions (explore mode only)
 **Analysis Rules**:
 - **Explore mode**: Each variant follows pre-defined philosophy and attributes, maintains maximum contrast
 - **Imitate mode**: High-fidelity replication of reference design
 - OKLCH color format
 - Complete token proposals (colors, typography, spacing, border_radius, shadows, breakpoints)
 - WCAG AA accessibility (4.5:1 text, 3:1 UI)
 **Output Format**: `style-cards.json` with:
 - 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
 ```bash
-bash(echo '{style_cards_json}' > {base_path}/style-extraction/style-cards.json)
+bash(mkdir -p {base_path}/style-extraction/style-{{1..{variants_count}}})
 ```
-**Output**: `style-cards.json` with `variants_count` complete variants
+### Step 2: Launch Agent Task
 For all variants (1 to {variants_count}):
 ```javascript
 Task(ui-design-agent): `
  [DESIGN_SYSTEM_GENERATION_TASK]
  Generate {variants_count} independent production-ready design systems
  SESSION: {session_id} | MODE: {extraction_mode} | BASE_PATH: {base_path}
  CRITICAL PATH: Use loop index (N) for directories: style-1/, style-2/, ..., style-N/
  VARIANT DATA:
  {FOR each variant with index N:
    VARIANT INDEX: {N}
    {IF extraction_mode == "explore":
      Design Philosophy: {divergent_direction[N].philosophy_name}
      Design Attributes: {divergent_direction[N].design_attributes}
      Search Keywords: {divergent_direction[N].search_keywords}
      Anti-keywords: {divergent_direction[N].anti_keywords}
    }
  }
  ## Input Analysis
  - Input mode: {input_mode} (image/text/hybrid)
  - Visual references: {loaded_images OR prompt_guidance}
  - Computed styles: {computed_styles if available}
  - Design space analysis: {design_space_analysis if explore mode}
  ## Analysis Rules
  - **Explore mode**: Each variant follows pre-defined philosophy and attributes
  - **Imitate mode**: High-fidelity replication of reference design
    - If computed_styles available: Use as ground truth for border-radius, shadows, spacing, typography, colors
    - Otherwise: Visual inference
  - OKLCH color format (convert RGB from computed styles)
  - WCAG AA compliance: 4.5:1 text, 3:1 UI
  ## Generate (For EACH variant, use loop index N for paths)
  1. {base_path}/style-extraction/style-{N}/design-tokens.json
     - Complete token structure: colors, typography, spacing, border_radius, shadows, breakpoints
     - All colors in OKLCH format
     - {IF explore mode: Apply design_attributes to token values (saturation→chroma, density→spacing, etc.)}
  2. {base_path}/style-extraction/style-{N}/style-guide.md
     - Expanded design philosophy
     - Complete color system with accessibility notes
     - Typography documentation
     - Usage guidelines
  ## Critical Requirements
  - ✅ Use Write() tool immediately for each file
  - ✅ Use loop index N for directory names: style-1/, style-2/, etc.
  - ❌ NO external research or MCP calls (pure AI generation)
  - {IF explore mode: Apply philosophy-driven refinement using design_attributes}
  - {IF explore mode: Maintain divergence using anti_keywords}
  - Complete each variant's files before moving to next variant
 `
 ```
 **Output**: Agent generates `variants_count × 2` files
 ## Phase 3: Verify Output
 ### Step 1: Check Files Created
 ```bash
 # Verify all design systems created
 bash(ls {base_path}/style-extraction/style-*/design-tokens.json | wc -l)
 # Validate structure
 bash(cat {base_path}/style-extraction/style-1/design-tokens.json | grep -q "colors" && echo "valid")
 ```
 ### Step 2: Verify File Sizes
 ```bash
 bash(ls -lh {base_path}/style-extraction/style-1/)
 ```
 **Output**: `variants_count × 2` files verified
 ## Completion
@@ -137,7 +242,8 @@ bash(echo '{style_cards_json}' > {base_path}/style-extraction/style-cards.json)
 TodoWrite({todos: [
  {content: "Setup and input validation", status: "completed", activeForm: "Validating inputs"},
  {content: "Design space analysis (explore mode)", status: "completed", activeForm: "Analyzing design space"},
-  {content: "Style synthesis and file write", status: "completed", activeForm: "Generating style cards"}
+  {content: "Design system generation (agent)", status: "completed", activeForm: "Generating design systems"},
  {content: "Verify output files", status: "completed", activeForm: "Verifying files"}
 ]});
 ```
@@ -150,6 +256,7 @@ Configuration:
 - Extraction Mode: {extraction_mode} (imitate/explore)
 - Input Mode: {input_mode} (image/text/hybrid)
 - Variants: {variants_count}
 - Production-Ready: Complete design systems generated
 {IF extraction_mode == "explore":
 Design Space Analysis:
@@ -157,14 +264,19 @@ Design Space Analysis:
 - Min contrast distance: {design_space_analysis.contrast_verification.min_pairwise_distance}
 }
-Generated Variants:
+Generated Files:
-{FOR each card: - {card.name} - {card.design_philosophy}}
+{base_path}/style-extraction/
 ├── style-1/ (design-tokens.json, style-guide.md)
 ├── style-2/ (same structure)
 └── style-{variants_count}/ (same structure)
-Output Files:
+{IF extraction_mode == "explore":
- {base_path}/style-extraction/style-cards.json
+Intermediate Analysis:
-{IF extraction_mode == "explore": - {base_path}/style-extraction/design-space-analysis.json}
+{base_path}/.intermediates/style-analysis/design-space-analysis.json
 }
-Next: /workflow:ui-design:consolidate --session {session_id} --variants {variants_count}
+Next: /workflow:ui-design:layout-extract --session {session_id} --targets "..."
  OR: /workflow:ui-design:generate --session {session_id}
 ```
 ## Simple Bash Commands
@@ -184,13 +296,13 @@ bash(mkdir -p {base_path}/style-extraction/)
 ### Validation Commands
 ```bash
 # Check if already extracted
-bash(test -f {base_path}/style-extraction/style-cards.json && echo "exists")
+bash(test -f {base_path}/style-extraction/style-1/design-tokens.json && echo "exists")
 # Count variants
-bash(cat style-cards.json | grep -c "\"id\": \"variant-")
+bash(ls {base_path}/style-extraction/style-* -d | wc -l)
-# Validate JSON
+# Validate JSON structure
-bash(cat style-cards.json | grep -q "extraction_metadata" && echo "valid")
+bash(cat {base_path}/style-extraction/style-1/design-tokens.json | grep -q "colors" && echo "valid")
 ```
 ### File Operations
@@ -198,46 +310,50 @@ bash(cat style-cards.json | grep -q "extraction_metadata" && echo "valid")
 # Load brainstorming context
 bash(test -f .brainstorming/synthesis-specification.md && cat it)
-# Write output
+# Create directories
-bash(echo '{json}' > {base_path}/style-extraction/style-cards.json)
+bash(mkdir -p {base_path}/style-extraction/style-{{1..3}})
 # Verify output
-bash(test -f design-space-analysis.json && echo "saved")
+bash(ls {base_path}/style-extraction/style-1/)
 bash(test -f {base_path}/.intermediates/style-analysis/design-space-analysis.json && echo "saved")
 ```
 ## Output Structure
 ```
-{base_path}/style-extraction/
+{base_path}/
-├── style-cards.json              # Complete style variants with token proposals
+├── .intermediates/                  # Intermediate analysis files
-└── design-space-analysis.json    # Design directions (explore mode only)
+│   └── style-analysis/
 │       ├── computed-styles.json     # Extracted CSS values from DOM (if URL available)
 │       └── design-space-analysis.json  # Design directions (explore mode only)
 └── style-extraction/                # Final design systems
    ├── style-1/
    │   ├── design-tokens.json       # Production-ready design tokens
    │   └── style-guide.md           # Design philosophy and usage guide
    ├── style-2/ (same structure)
    └── style-N/ (same structure)
 ```
-## style-cards.json Format
+## design-tokens.json Format
 ```json
 {
-  "extraction_metadata": {"session_id": "...", "input_mode": "image|text|hybrid", "extraction_mode": "imitate|explore", "timestamp": "...", "variants_count": N},
+  "colors": {
-  "style_cards": [
+    "brand": {"primary": "oklch(...)", "secondary": "oklch(...)", "accent": "oklch(...)"},
-    {
+    "surface": {"background": "oklch(...)", "elevated": "oklch(...)", "overlay": "oklch(...)"},
-      "id": "variant-1", "name": "Style Name", "description": "...",
+    "semantic": {"success": "oklch(...)", "warning": "oklch(...)", "error": "oklch(...)", "info": "oklch(...)"},
-      "design_philosophy": "Core principles",
+    "text": {"primary": "oklch(...)", "secondary": "oklch(...)", "tertiary": "oklch(...)", "inverse": "oklch(...)"},
-      "preview": {"primary": "oklch(...)", "background": "oklch(...)", "font_heading": "...", "border_radius": "..."},
+    "border": {"default": "oklch(...)", "strong": "oklch(...)", "subtle": "oklch(...)"}
-      "proposed_tokens": {
+  },
-        "colors": {"brand": {...}, "surface": {...}, "semantic": {...}, "text": {...}, "border": {...}},
+  "typography": {"font_family": {...}, "font_size": {...}, "font_weight": {...}, "line_height": {...}, "letter_spacing": {...}},
-        "typography": {"font_family": {...}, "font_size": {...}, "font_weight": {...}, "line_height": {...}, "letter_spacing": {...}},
+  "spacing": {"0": "0", "1": "0.25rem", ..., "24": "6rem"},
-        "spacing": {"0": "0", ..., "24": "6rem"},
+  "border_radius": {"none": "0", "sm": "0.25rem", ..., "full": "9999px"},
-        "border_radius": {"none": "0", ..., "full": "9999px"},
+  "shadows": {"sm": "...", "md": "...", "lg": "...", "xl": "..."},
-        "shadows": {"sm": "...", ..., "xl": "..."},
+  "breakpoints": {"sm": "640px", ..., "2xl": "1536px"}
        "breakpoints": {"sm": "640px", ..., "2xl": "1536px"}
      }
    }
    // Repeat for all variants
  ]
 }
 ```
-**Requirements**: All colors in OKLCH format, complete token proposals, semantic naming
+**Requirements**: OKLCH colors, complete coverage, semantic naming, WCAG AA compliance
 ## Error Handling
@@ -255,17 +371,21 @@ ERROR: Claude JSON parsing error
 ## Key Features
 - **Direct Design System Generation** - Complete design-tokens.json + style-guide.md in one step
 - **Hybrid Extraction Strategy** - Combines computed CSS values (ground truth) with AI visual analysis
 - **Pixel-Perfect Accuracy** - Chrome DevTools extracts exact border-radius, shadows, spacing values
 - **AI-Driven Design Space Exploration** - 6D attribute space analysis for maximum contrast
 - **Variant-Specific Directions** - Each variant has unique philosophy, keywords, anti-patterns
 - **Maximum Contrast Guarantee** - Variants maximally distant in attribute space
- **Claude-Native** - No external tools, fast deterministic synthesis
+- **Flexible Input** - Images, text, URLs, or hybrid mode
- **Flexible Input** - Images, text, or hybrid mode
+- **Graceful Fallback** - Falls back to pure visual inference if URL unavailable
- **Production-Ready** - OKLCH colors, WCAG AA, semantic naming
+- **Production-Ready** - OKLCH colors, WCAG AA compliance, semantic naming
 - **Agent-Driven** - Autonomous multi-file generation with ui-design-agent
 ## Integration
 **Input**: Reference images or text prompts
-**Output**: `style-cards.json` for consolidation
+**Output**: `style-extraction/style-{N}/` with design-tokens.json + style-guide.md
-**Next**: `/workflow:ui-design:consolidate --session {session_id} --variants {count}`
+**Next**: `/workflow:ui-design:layout-extract --session {session_id}` OR `/workflow:ui-design:generate --session {session_id}`
-**Note**: This command only extracts visual style (colors, typography, spacing). For layout structure extraction, use `/workflow:ui-design:layout-extract`.
+**Note**: This command extracts visual style (colors, typography, spacing) and generates production-ready design systems. For layout structure extraction, use `/workflow:ui-design:layout-extract`.
--- a/.claude/commands/workflow/ui-design/update.md
+++ b/.claude/commands/workflow/ui-design/update.md
@@ -30,13 +30,11 @@ CHECK: .workflow/.active-* marker files; VALIDATE: session_id matches active ses
 # Verify design artifacts in latest design run
 latest_design = find_latest_path_matching(".workflow/WFS-{session}/design-*")
-# Detect design system structure (unified vs separate)
+# Detect design system structure
-IF exists({latest_design}/style-consolidation/design-tokens.json):
+IF exists({latest_design}/style-extraction/style-1/design-tokens.json):
-    design_system_mode = "unified"; design_tokens_path = "style-consolidation/design-tokens.json"; style_guide_path = "style-consolidation/style-guide.md"
+    design_system_mode = "separate"; design_tokens_path = "style-extraction/style-1/design-tokens.json"; style_guide_path = "style-extraction/style-1/style-guide.md"
 ELSE IF exists({latest_design}/style-consolidation/style-1/design-tokens.json):
    design_system_mode = "separate"; design_tokens_path = "style-consolidation/style-1/design-tokens.json"; style_guide_path = "style-consolidation/style-1/style-guide.md"
 ELSE:
-    ERROR: "No design tokens found. Run /workflow:ui-design:consolidate first"
+    ERROR: "No design tokens found. Run /workflow:ui-design:style-extract first"
 VERIFY: {latest_design}/{design_tokens_path}, {latest_design}/{style_guide_path}, {latest_design}/prototypes/*.html
@@ -202,15 +200,15 @@ Next: /workflow:plan [--agent] "<task description>"
 **@ Reference Format** (synthesis-specification.md):
 ```
-@../design-{run_id}/style-consolidation/design-tokens.json
+@../design-{run_id}/style-extraction/style-1/design-tokens.json
-@../design-{run_id}/style-consolidation/style-guide.md
+@../design-{run_id}/style-extraction/style-1/style-guide.md
@../design-{run_id}/prototypes/{prototype}.html
 ```
 **@ Reference Format** (ui-designer/style-guide.md):
 ```
-@../../design-{run_id}/style-consolidation/design-tokens.json
+@../../design-{run_id}/style-extraction/style-1/design-tokens.json
-@../../design-{run_id}/style-consolidation/style-guide.md
+@../../design-{run_id}/style-extraction/style-1/style-guide.md
@../../design-{run_id}/prototypes/{prototype}.html
 ```
@@ -230,8 +228,8 @@ After this update, `/workflow:plan` will discover design assets through:
  "task_id": "IMPL-001",
  "context": {
    "design_system": {
-      "tokens": "design-{run_id}/style-consolidation/design-tokens.json",
+      "tokens": "design-{run_id}/style-extraction/style-1/design-tokens.json",
-      "style_guide": "design-{run_id}/style-consolidation/style-guide.md",
+      "style_guide": "design-{run_id}/style-extraction/style-1/style-guide.md",
      "prototypes": ["design-{run_id}/prototypes/dashboard-variant-1.html"]
    }
  }
@@ -240,7 +238,7 @@ After this update, `/workflow:plan` will discover design assets through:
 ## Error Handling
- **Missing design artifacts**: Error with message "Run /workflow:ui-design:consolidate and /workflow:ui-design:generate first"
+- **Missing design artifacts**: Error with message "Run /workflow:ui-design:style-extract and /workflow:ui-design:generate first"
 - **synthesis-specification.md not found**: Warning, create minimal version with just UI/UX Guidelines
 - **ui-designer/ directory missing**: Create directory and file
 - **Edit conflicts**: Preserve existing content, append or replace only UI/UX Guidelines section
@@ -265,7 +263,7 @@ After update, verify:
 ## Integration Points
- **Input**: Design system artifacts from `/workflow:ui-design:consolidate` and `/workflow:ui-design:generate`
+- **Input**: Design system artifacts from `/workflow:ui-design:style-extract` and `/workflow:ui-design:generate`
 - **Output**: Updated synthesis-specification.md, ui-designer/style-guide.md with @ references
 - **Next Phase**: `/workflow:plan` discovers and utilizes design system through @ references
 - **Auto Integration**: Automatically triggered by `/workflow:ui-design:auto` workflow
--- a/.claude/scripts/extract-computed-styles.js
+++ b/.claude/scripts/extract-computed-styles.js
@@ -0,0 +1,118 @@
 /**
 * Extract Computed Styles from DOM
 *
 * This script extracts real CSS computed styles from a webpage's DOM
 * to provide accurate design tokens for UI replication.
 *
 * Usage: Execute this function via Chrome DevTools evaluate_script
 */
 (() => {
  /**
   * Extract unique values from a set and sort them
   */
  const uniqueSorted = (set) => {
    return Array.from(set)
      .filter(v => v && v !== 'none' && v !== '0px' && v !== 'rgba(0, 0, 0, 0)')
      .sort();
  };
  /**
   * Parse rgb/rgba to OKLCH format (placeholder - returns original for now)
   */
  const toOKLCH = (color) => {
    // TODO: Implement actual RGB to OKLCH conversion
    // For now, return the original color with a note
    return `${color} /* TODO: Convert to OKLCH */`;
  };
  /**
   * Extract only key styles from an element
   */
  const extractKeyStyles = (element) => {
    const s = window.getComputedStyle(element);
    return {
      color: s.color,
      bg: s.backgroundColor,
      borderRadius: s.borderRadius,
      boxShadow: s.boxShadow,
      fontSize: s.fontSize,
      fontWeight: s.fontWeight,
      padding: s.padding,
      margin: s.margin
    };
  };
  /**
   * Main extraction function - extract all critical design tokens
   */
  const extractDesignTokens = () => {
    // Include all key UI elements
    const selectors = [
      'button', '.btn', '[role="button"]',
      'input', 'textarea', 'select',
      'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
      '.card', 'article', 'section',
      'a', 'p', 'nav', 'header', 'footer'
    ];
    // Collect all design tokens
    const tokens = {
      colors: new Set(),
      borderRadii: new Set(),
      shadows: new Set(),
      fontSizes: new Set(),
      fontWeights: new Set(),
      spacing: new Set()
    };
    // Extract from all elements
    selectors.forEach(selector => {
      try {
        const elements = document.querySelectorAll(selector);
        elements.forEach(element => {
          const s = extractKeyStyles(element);
          // Collect all tokens (no limits)
          if (s.color && s.color !== 'rgba(0, 0, 0, 0)') tokens.colors.add(s.color);
          if (s.bg && s.bg !== 'rgba(0, 0, 0, 0)') tokens.colors.add(s.bg);
          if (s.borderRadius && s.borderRadius !== '0px') tokens.borderRadii.add(s.borderRadius);
          if (s.boxShadow && s.boxShadow !== 'none') tokens.shadows.add(s.boxShadow);
          if (s.fontSize) tokens.fontSizes.add(s.fontSize);
          if (s.fontWeight) tokens.fontWeights.add(s.fontWeight);
          // Extract all spacing values
          [s.padding, s.margin].forEach(val => {
            if (val && val !== '0px') {
              val.split(' ').forEach(v => {
                if (v && v !== '0px') tokens.spacing.add(v);
              });
            }
          });
        });
      } catch (e) {
        console.warn(`Error: ${selector}`, e);
      }
    });
    // Return all tokens (no element details to save context)
    return {
      metadata: {
        extractedAt: new Date().toISOString(),
        url: window.location.href,
        method: 'computed-styles'
      },
      tokens: {
        colors: uniqueSorted(tokens.colors),
        borderRadii: uniqueSorted(tokens.borderRadii),  // ALL radius values
        shadows: uniqueSorted(tokens.shadows),          // ALL shadows
        fontSizes: uniqueSorted(tokens.fontSizes),
        fontWeights: uniqueSorted(tokens.fontWeights),
        spacing: uniqueSorted(tokens.spacing)
      }
    };
  };
  // Execute and return results
  return extractDesignTokens();
 })();
--- a/.claude/scripts/extract-layout-structure.js
+++ b/.claude/scripts/extract-layout-structure.js
@@ -0,0 +1,221 @@
 /**
 * Extract Layout Structure from DOM
 *
 * Extracts real layout information from DOM to provide accurate
 * structural data for UI replication.
 *
 * Usage: Execute via Chrome DevTools evaluate_script
 */
 (() => {
  /**
   * Get element's bounding box relative to viewport
   */
  const getBounds = (element) => {
    const rect = element.getBoundingClientRect();
    return {
      x: Math.round(rect.x),
      y: Math.round(rect.y),
      width: Math.round(rect.width),
      height: Math.round(rect.height)
    };
  };
  /**
   * Extract layout properties from an element
   */
  const extractLayoutProps = (element) => {
    const s = window.getComputedStyle(element);
    return {
      // Core layout
      display: s.display,
      position: s.position,
      // Flexbox
      flexDirection: s.flexDirection,
      justifyContent: s.justifyContent,
      alignItems: s.alignItems,
      flexWrap: s.flexWrap,
      gap: s.gap,
      // Grid
      gridTemplateColumns: s.gridTemplateColumns,
      gridTemplateRows: s.gridTemplateRows,
      gridAutoFlow: s.gridAutoFlow,
      // Dimensions
      width: s.width,
      height: s.height,
      maxWidth: s.maxWidth,
      minWidth: s.minWidth,
      // Spacing
      padding: s.padding,
      margin: s.margin
    };
  };
  /**
   * Identify layout pattern for an element
   */
  const identifyPattern = (props) => {
    const { display, flexDirection, gridTemplateColumns } = props;
    if (display === 'flex') {
      if (flexDirection === 'column') return 'flex-column';
      if (flexDirection === 'row') return 'flex-row';
      return 'flex';
    }
    if (display === 'grid') {
      const cols = gridTemplateColumns;
      if (cols && cols !== 'none') {
        const colCount = cols.split(' ').length;
        return `grid-${colCount}col`;
      }
      return 'grid';
    }
    if (display === 'inline-flex') return 'inline-flex';
    if (display === 'block') return 'block';
    return display;
  };
  /**
   * Build layout tree recursively
   */
  const buildLayoutTree = (element, depth = 0, maxDepth = 3) => {
    if (depth > maxDepth) return null;
    const props = extractLayoutProps(element);
    const bounds = getBounds(element);
    const pattern = identifyPattern(props);
    // Get semantic role
    const tagName = element.tagName.toLowerCase();
    const classes = Array.from(element.classList).slice(0, 3); // Max 3 classes
    const role = element.getAttribute('role');
    // Build node
    const node = {
      tag: tagName,
      classes: classes,
      role: role,
      pattern: pattern,
      bounds: bounds,
      layout: {
        display: props.display,
        position: props.position
      }
    };
    // Add flex/grid specific properties
    if (props.display === 'flex' || props.display === 'inline-flex') {
      node.layout.flexDirection = props.flexDirection;
      node.layout.justifyContent = props.justifyContent;
      node.layout.alignItems = props.alignItems;
      node.layout.gap = props.gap;
    }
    if (props.display === 'grid') {
      node.layout.gridTemplateColumns = props.gridTemplateColumns;
      node.layout.gridTemplateRows = props.gridTemplateRows;
      node.layout.gap = props.gap;
    }
    // Process children for container elements
    if (props.display === 'flex' || props.display === 'grid' || props.display === 'block') {
      const children = Array.from(element.children);
      if (children.length > 0 && children.length < 50) { // Limit to 50 children
        node.children = children
          .map(child => buildLayoutTree(child, depth + 1, maxDepth))
          .filter(child => child !== null);
      }
    }
    return node;
  };
  /**
   * Find main layout containers
   */
  const findMainContainers = () => {
    const selectors = [
      'body > header',
      'body > nav',
      'body > main',
      'body > footer',
      '[role="banner"]',
      '[role="navigation"]',
      '[role="main"]',
      '[role="contentinfo"]'
    ];
    const containers = [];
    selectors.forEach(selector => {
      const element = document.querySelector(selector);
      if (element) {
        const tree = buildLayoutTree(element, 0, 3);
        if (tree) {
          containers.push(tree);
        }
      }
    });
    return containers;
  };
  /**
   * Analyze layout patterns
   */
  const analyzePatterns = (containers) => {
    const patterns = {
      flexColumn: 0,
      flexRow: 0,
      grid: 0,
      sticky: 0,
      fixed: 0
    };
    const analyze = (node) => {
      if (!node) return;
      if (node.pattern === 'flex-column') patterns.flexColumn++;
      if (node.pattern === 'flex-row') patterns.flexRow++;
      if (node.pattern && node.pattern.startsWith('grid')) patterns.grid++;
      if (node.layout.position === 'sticky') patterns.sticky++;
      if (node.layout.position === 'fixed') patterns.fixed++;
      if (node.children) {
        node.children.forEach(analyze);
      }
    };
    containers.forEach(analyze);
    return patterns;
  };
  /**
   * Main extraction function
   */
  const extractLayout = () => {
    const containers = findMainContainers();
    const patterns = analyzePatterns(containers);
    return {
      metadata: {
        extractedAt: new Date().toISOString(),
        url: window.location.href,
        method: 'layout-structure'
      },
      patterns: patterns,
      structure: containers
    };
  };
  // Execute and return results
  return extractLayout();
 })();
--- a/.claude/scripts/ui-generate-preview.sh
+++ b/.claude/scripts/ui-generate-preview.sh
@@ -329,7 +329,7 @@ for style in $styles; do
 ### Style ${style}
 EOF3
-    style_guide="../style-consolidation/style-${style}/style-guide.md"
+    style_guide="../style-extraction/style-${style}/style-guide.md"
    if [[ -f "$style_guide" ]]; then
        head -n 10 "$style_guide" | tail -n +2 >> PREVIEW.md 2>/dev/null || echo "Design philosophy and tokens" >> PREVIEW.md
    else
--- a/.claude/scripts/ui-instantiate-prototypes.sh
+++ b/.claude/scripts/ui-instantiate-prototypes.sh
@@ -52,7 +52,7 @@ auto_detect_pages() {
 # Auto-detect style variants count
 auto_detect_style_variants() {
    local base_path="$1"
-    local style_dir="$base_path/../style-consolidation"
+    local style_dir="$base_path/../style-extraction"
    if [ ! -d "$style_dir" ]; then
        log_warning "Style consolidation directory not found: $style_dir"
@@ -260,7 +260,7 @@ fi
 # Validate STYLE_VARIANTS against actual style directories
 if [ "$STYLE_VARIANTS" -gt 0 ]; then
-    style_dir="$BASE_PATH/../style-consolidation"
+    style_dir="$BASE_PATH/../style-extraction"
    if [ ! -d "$style_dir" ]; then
        log_error "Style consolidation directory not found: $style_dir"
@@ -337,7 +337,7 @@ for page in "${PAGE_ARRAY[@]}"; do
            # Define file paths
            TEMPLATE_HTML="_templates/${page}-layout-${l}.html"
            STRUCTURAL_CSS="_templates/${page}-layout-${l}.css"
-            TOKEN_CSS="../style-consolidation/style-${s}/tokens.css"
+            TOKEN_CSS="../style-extraction/style-${s}/tokens.css"
            OUTPUT_HTML="${page}-style-${s}-layout-${l}.html"
            # Copy template and replace placeholders
@@ -376,7 +376,7 @@ across all style variants. The HTML structure is identical for all ${page}-layou
 prototypes, with only the design tokens (colors, fonts, spacing) varying.
 ## Design System Reference
-Refer to \`../style-consolidation/style-${s}/style-guide.md\` for:
+Refer to \`../style-extraction/style-${s}/style-guide.md\` for:
 - Design philosophy
 - Token usage guidelines
 - Component patterns
@@ -742,9 +742,9 @@ for s in $(seq 1 "$STYLE_VARIANTS"); do
    cat >> PREVIEW.md <<STYLEEOF
 ### Style ${s}
- **Tokens:** \`../style-consolidation/style-${s}/design-tokens.json\`
+- **Tokens:** \`../style-extraction/style-${s}/design-tokens.json\`
- **CSS Variables:** \`../style-consolidation/style-${s}/tokens.css\`
+- **CSS Variables:** \`../style-extraction/style-${s}/tokens.css\`
- **Style Guide:** \`../style-consolidation/style-${s}/style-guide.md\`
+- **Style Guide:** \`../style-extraction/style-${s}/style-guide.md\`
 STYLEEOF
 done