feat: add interactive user selection to UI design workflows

Enhanced layout-extract and style-extract workflows with two-phase generation
process, allowing users to preview and select preferred options before full
generation.

Key changes:
- Split generation into two agent tasks:
  * Task 1: Generate concept options with previews
  * Task 2: Develop selected option into complete output
- Add Phase 1.5 interactive user selection:
  * Present concept options with visual previews
  * Capture user selection via AskUserQuestion tool
  * Save selection to user-selection.json
- Layout workflow improvements:
  * Generate layout concept options with ASCII wireframes
  * User selects preferred structural approach
  * Generate detailed templates only for selected concepts
- Style workflow improvements:
  * Generate design direction options with color/typography previews
  * User selects preferred design philosophy
  * Generate complete design system only for selected direction
- Better user experience:
  * Avoid generating unwanted variants
  * Allow informed decisions before full generation
  * Reduce wasted computation on unused variants

This change improves workflow efficiency and user control over design output.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

.claude/commands/workflow/ui-design/layout-extract.md

@@ -196,7 +196,7 @@ 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)
+## Phase 1: Layout Concept Generation (Explore Mode Only)
 
 ### Step 1: Check Extraction Mode
 ```bash
@@ -217,93 +217,311 @@ bash(mkdir -p {base_path}/.intermediates/layout-analysis/inspirations)
 Write({base_path}/.intermediates/layout-analysis/inspirations/{target}-layout-ideas.txt, inspiration_content)
 ```
 
-**Output**: Inspiration text files for each target (explore mode only)
+### Step 3: Generate Layout Concept Options (Agent Task 1)
-
-## Phase 2: Layout Analysis & Synthesis (Agent)
-
 **Executor**: `Task(ui-design-agent)`
 
-### Step 1: Launch Agent Task
+Launch agent to generate `variants_count` layout concept options for each target:
+
 ```javascript
 Task(ui-design-agent): `
-  [LAYOUT_EXTRACTION_TASK]
+  [LAYOUT_CONCEPT_GENERATION_TASK]
-  Analyze references and extract structural layout templates.
+  Generate {variants_count} structurally distinct layout concepts for each target
+
+  SESSION: {session_id} | MODE: explore | BASE_PATH: {base_path}
+  TARGETS: {targets} | DEVICE_TYPE: {device_type}
+
+  ## Input Analysis
+  - Targets: {targets.join(", ")}
+  - Device type: {device_type}
+  - Layout inspiration: Read inspirations from {base_path}/.intermediates/layout-analysis/inspirations/
+  - Visual references: {loaded_images if available}
+  ${dom_structure_available ? "- DOM Structure: Read from .intermediates/layout-analysis/dom-structure-*.json" : ""}
+
+  ## Analysis Rules
+  - For EACH target, generate {variants_count} structurally DIFFERENT layout concepts
+  - Concepts must differ in: grid structure, component arrangement, visual hierarchy
+  - Each concept should have distinct navigation pattern, content flow, and responsive behavior
+
+  ## Generate for EACH Target
+  For target in {targets}:
+    For concept_index in 1..{variants_count}:
+      1. **Concept Definition**:
+         - concept_name (descriptive, e.g., "Classic Three-Column Holy Grail")
+         - design_philosophy (1-2 sentences explaining the structural approach)
+         - layout_pattern (e.g., "grid-3col", "flex-row", "single-column", "asymmetric-grid")
+         - key_components (array of main layout regions)
+         - structural_features (list of distinguishing characteristics)
+
+      2. **Wireframe Preview** (simple text representation):
+         - ascii_art (simple ASCII box diagram showing layout structure)
+         - Example:
+           ┌─────────────────┐
+           │     HEADER      │
+           ├──┬─────────┬────┤
+           │ L│  MAIN   │ R  │
+           └──┴─────────┴────┘
+
+  ## Output
+  Write single JSON file: {base_path}/.intermediates/layout-analysis/analysis-options.json
+
+  Use schema from INTERACTIVE-DATA-SPEC.md (Layout Extract: analysis-options.json)
+
+  CRITICAL: Use Write() tool immediately after generating complete JSON
+`
+```
+
+### Step 4: Verify Options File Created
+```bash
+bash(test -f {base_path}/.intermediates/layout-analysis/analysis-options.json && echo "created")
+
+# Quick validation
+bash(cat {base_path}/.intermediates/layout-analysis/analysis-options.json | grep -q "layout_concepts" && echo "valid")
+```
+
+**Output**: `analysis-options.json` with layout concept options for all targets
+
+---
+
+## Phase 1.5: User Confirmation (Explore Mode Only - INTERACTIVE)
+
+**Purpose**: Allow user to select preferred layout concept(s) for each target before generating detailed templates
+
+### Step 1: Load and Present Options
+```bash
+# Read options file
+options = Read({base_path}/.intermediates/layout-analysis/analysis-options.json)
+
+# Parse layout concepts
+layout_concepts = options.layout_concepts
+```
+
+### Step 2: Present Options to User (Per Target)
+For each target, present layout concept options and capture selection:
+
+```
+📋 Layout Concept Options for Target: {target}
+
+We've generated {variants_count} structurally different layout concepts for review.
+Please select your preferred concept for this target.
+
+{FOR each concept in layout_concepts[target]:
+  ═══════════════════════════════════════════════════
+  Concept {concept.index}: {concept.concept_name}
+  ═══════════════════════════════════════════════════
+
+  Philosophy: {concept.design_philosophy}
+  Pattern: {concept.layout_pattern}
+
+  Components:
+  {FOR each component in concept.key_components:
+    • {component}
+  }
+
+  Features:
+  {FOR each feature in concept.structural_features:
+    • {feature}
+  }
+
+  Wireframe:
+  {concept.wireframe_preview.ascii_art}
+
+  ═══════════════════════════════════════════════════
+}
+```
+
+### Step 3: Capture User Selection (Per Target)
+```javascript
+// Use AskUserQuestion tool for each target
+FOR each target:
+  AskUserQuestion({
+    questions: [{
+      question: "Which layout concept do you prefer for '{target}'?",
+      header: "Layout for " + target,
+      multiSelect: false,
+      options: [
+        {FOR each concept in layout_concepts[target]:
+          label: "Concept {concept.index}: {concept.concept_name}",
+          description: "{concept.design_philosophy}"
+        }
+      ]
+    }]
+  })
+
+  // Parse user response
+  selected_option_text = user_answer
+
+  // Check for user cancellation
+  IF selected_option_text == null OR selected_option_text == "":
+      REPORT: "⚠️ User canceled selection. Workflow terminated."
+      EXIT workflow
+
+  // Extract concept index from response format "Concept N: Name"
+  match = selected_option_text.match(/Concept (\d+):/)
+  IF match:
+      selected_index = parseInt(match[1])
+  ELSE:
+      ERROR: "Invalid selection format. Expected 'Concept N: ...' format"
+      EXIT workflow
+
+  // Store selection for this target
+  selections[target] = {
+    selected_index: selected_index,
+    concept_name: layout_concepts[target][selected_index-1].concept_name
+  }
+```
+
+### Step 4: Write User Selection File
+```bash
+# Create user selection JSON
+selection_data = {
+  "metadata": {
+    "selected_at": "{current_timestamp}",
+    "selection_type": "per_target",
+    "session_id": "{session_id}"
+  },
+  "selections": selections  // {target: {selected_index, concept_name}}
+}
+
+# Write to file
+bash(echo '{selection_data}' > {base_path}/.intermediates/layout-analysis/user-selection.json)
+
+# Verify
+bash(test -f {base_path}/.intermediates/layout-analysis/user-selection.json && echo "saved")
+```
+
+### Step 5: Confirmation Message
+```
+✅ Selections recorded!
+
+{FOR each target, selection in selections:
+  • {target}: Concept {selection.selected_index} - {selection.concept_name}
+}
+
+Proceeding to generate detailed layout templates based on your selections...
+```
+
+**Output**: `user-selection.json` with user's choices for all targets
+
+## Phase 2: Layout Template Generation (Agent Task 2)
+
+**Executor**: `Task(ui-design-agent)` for selected concept(s)
+
+### Step 1: Load User Selection (Explore Mode)
+```bash
+# For explore mode, read user selection
+IF extraction_mode == "explore":
+    selection = Read({base_path}/.intermediates/layout-analysis/user-selection.json)
+    selections_per_target = selection.selections
+
+    # Also read the selected concept details from options
+    options = Read({base_path}/.intermediates/layout-analysis/analysis-options.json)
+    layout_concepts = options.layout_concepts
+
+    # Build selected concepts map
+    selected_concepts = {}
+    FOR each target in targets:
+        selected_index = selections_per_target[target].selected_index
+        selected_concepts[target] = layout_concepts[target][selected_index-1]  # 0-indexed
+ELSE:
+    # Imitate mode - no selection needed
+    selected_concepts = null
+```
+
+### Step 2: Launch Agent Task
+Generate layout templates for selected concepts:
+```javascript
+Task(ui-design-agent): `
+  [LAYOUT_TEMPLATE_GENERATION_TASK]
+  Generate detailed layout templates based on user-selected concepts.
   Focus ONLY on structure and layout. DO NOT concern with visual style (colors, fonts, etc.).
 
-  REFERENCES:
+  SESSION: {session_id} | MODE: {extraction_mode} | BASE_PATH: {base_path}
-  - Input: {reference_material}  // Images, URLs, or prompt
+  DEVICE_TYPE: {device_type}
-  - Mode: {extraction_mode}  // 'imitate' or 'explore'
-  - Targets: {targets}  // List of page/component names
-  - Variants per Target: {variants_count}
-  - Device Type: {device_type}
-  ${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
+  ${extraction_mode == "explore" ? `
-  ${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." : ""}
+  USER SELECTIONS:
-  For EACH target in {targets}:
+  ${targets.map(target => `
-    For EACH variant (1 to {variants_count}):
+  Target: ${target}
-      1. **Analyze Structure**:
+  - Selected Concept: ${selected_concepts[target].concept_name}
-         ${dom_structure_available ?
+  - Philosophy: ${selected_concepts[target].design_philosophy}
-           "- Use DOM structure data as primary source for layout properties" +
+  - Pattern: ${selected_concepts[target].layout_pattern}
-           "- Extract real flex/grid configurations (display, flexDirection, justifyContent, alignItems, gap)" +
+  - Key Components: ${selected_concepts[target].key_components.join(", ")}
-           "- Use actual element bounds for responsive breakpoint decisions" +
+  - Structural Features: ${selected_concepts[target].structural_features.join(", ")}
-           "- Preserve identified patterns (flex-row, flex-column, grid-NCol)" +
+  `).join("\n")}
-           "- Reference screenshots for visual context only" :
+  ` : `
-           "- Deconstruct reference images/URLs to understand layout, hierarchy, responsiveness"}
+  MODE: Imitate - High-fidelity replication of reference layout structure
-      2. **Define Philosophy**: Short description (e.g., "Asymmetrical grid with overlapping content areas")
+  TARGETS: ${targets.join(", ")}
-      3. **Generate DOM Structure**:
+  `}
-         ${dom_structure_available ?
+
-           "- Base structure on extracted DOM tree from .intermediates" +
+  ## Input Analysis
-           "- Preserve semantic tags and hierarchy from dom-structure-{target}.json" +
+  - Targets: {targets.join(", ")}
-           "- Maintain layout patterns identified in patterns field" :
+  - Device type: {device_type}
-           "- JSON object representing semantic HTML5 structure"}
+  - Visual references: {loaded_images if available}
-         - Semantic tags: <header>, <nav>, <main>, <aside>, <section>, <footer>
+  ${dom_structure_available ? "- DOM Structure Data: Read from .intermediates/layout-analysis/dom-structure-*.json - USE THIS for accurate layout properties" : ""}
-         - ARIA roles and accessibility attributes
+
-         - Device-specific structure:
+  ## Generation Rules
-           * mobile: Single column, stacked sections, touch targets ≥44px
+  ${extraction_mode == "explore" ? `
-           * desktop: Multi-column grids, hover states, larger hit areas
+  - **Explore Mode**: Develop each user-selected layout concept into a detailed template
-           * tablet: Hybrid layouts, flexible columns
+  - Use the selected concept's key_components as foundation
-           * responsive: Breakpoint-driven adaptive layouts (mobile-first)
+  - Apply the selected layout_pattern (grid-3col, flex-row, etc.)
-         - In 'explore' mode: Each variant structurally DISTINCT
+  - Honor the structural_features defined in the concept
-      4. **Define Component Hierarchy**: High-level array of main layout regions
+  - Expand the concept with complete DOM structure and CSS layout rules
-         Example: ["header", "main-content", "sidebar", "footer"]
+  ` : `
-      5. **Generate CSS Layout Rules**:
+  - **Imitate Mode**: High-fidelity replication of reference layout structure
-         ${dom_structure_available ?
+  ${dom_structure_available ? "- Use DOM structure data as ground truth" : "- Use visual inference"}
-           "- Use real layout properties from DOM structure data" +
+  `}
-           "- Convert extracted flex/grid values to CSS rules" +
+  ${dom_structure_available ? `
-           "- Preserve actual gap, justifyContent, alignItems values" +
+  - IMPORTANT: You have access to real DOM structure data with accurate flex/grid properties
-           "- Use element bounds to inform responsive breakpoints" :
+  - Use DOM data as primary source for layout properties
-           "- Focus ONLY on layout (Grid, Flexbox, position, alignment, gap, etc.)"}
+  - Extract real flex/grid configurations (display, flexDirection, justifyContent, alignItems, gap)
-         - Use CSS Custom Properties for spacing/breakpoints: var(--spacing-4), var(--breakpoint-md)
+  - Use actual element bounds for responsive breakpoint decisions
-         - Device-specific styles (mobile-first @media for responsive)
+  - Preserve identified patterns from DOM structure
-         - NO colors, NO fonts, NO shadows - layout structure only
+  ` : ""}
+
+  ## Generate for EACH Target
+  For target in {targets}:
+    ${extraction_mode == "explore" ? "Based on user-selected concept:" : "Based on reference:"}
+
+    1. **DOM Structure**:
+       - Semantic HTML5 tags: <header>, <nav>, <main>, <aside>, <section>, <footer>
+       - ARIA roles and accessibility attributes
+       ${extraction_mode == "explore" ? "- Use key_components from selected concept" : ""}
+       ${dom_structure_available ? "- Base on extracted DOM tree from .intermediates" : "- Infer from visual analysis"}
+       - Device-specific optimizations for {device_type}
+
+    2. **Component Hierarchy**:
+       - Array of main layout regions
+       ${extraction_mode == "explore" ? "- Derived from selected concept's key_components" : ""}
+
+    3. **CSS Layout Rules**:
+       ${extraction_mode == "explore" ? "- Implement selected layout_pattern" : ""}
+       ${dom_structure_available ? "- Use real layout properties from DOM structure data" : "- Focus on Grid, Flexbox, position, alignment"}
+       - Use CSS Custom Properties: var(--spacing-*), var(--breakpoint-*)
+       - Device-specific styles (mobile-first @media for responsive)
+       - NO colors, NO fonts, NO shadows - layout structure only
 
   ## Output Format
-  Return JSON object with layout_templates array.
+  Write complete layout-templates.json with layout_templates array.
   Each template must include:
   - target (string)
-  - variant_id (string, e.g., "layout-1")
+  - variant_id: "layout-1" (always 1 since only selected concept is generated)
-  - source_image_path (string, REQUIRED): Path to the primary reference image used for this layout analysis
+  - source_image_path (string): Reference image path
-    * For image input: Use the actual image file path from {images_pattern}
-    * For URL input: Use the screenshot path if available, or empty string
-    * For text/prompt input: Use empty string
-    * Example: "{base_path}/screenshots/home.png"
   - device_type (string)
-  - design_philosophy (string)
+  - design_philosophy (string ${extraction_mode == "explore" ? "- from selected concept" : ""})
   - dom_structure (JSON object)
   - component_hierarchy (array of strings)
   - css_layout_rules (string)
 
-  ## Notes
+  ## Critical Requirements
-  - Structure only, no visual styling
+  - ✅ Use Write() tool for layout-templates.json
-  - Use var() for all spacing/sizing
+  - ✅ One template per target (only selected concept)
-  - Layouts must be structurally distinct in explore mode
+  - ✅ Structure only, no visual styling
-  - Write complete layout-templates.json
+  - ✅ Token-based CSS (var())
+  ${extraction_mode == "explore" ? "- ✅ Maintain consistency with selected concepts" : ""}
 `
 ```
 
-**Output**: Agent returns JSON with `layout_templates` array
+**Output**: Agent generates `layout-templates.json` with one template per target
 
 ### Step 2: Write Output File
 ```bash

.claude/commands/workflow/ui-design/style-extract.md

@@ -140,7 +140,7 @@ IF exists: SKIP to completion
 
 **Phase 0 Output**: `input_mode`, `base_path`, `extraction_mode`, `variants_count`, `loaded_images[]` or `prompt_guidance`, `has_urls`, `url_list[]`, `computed_styles_available`
 
-## Phase 1: Design Space Analysis (Explore Mode Only)
+## Phase 1: Design Direction Generation (Explore Mode Only)
 
 ### Step 1: Check Extraction Mode
 ```bash
@@ -157,97 +157,289 @@ IF exists: SKIP to completion
 bash(test -f {base_path}/.brainstorming/synthesis-specification.md && cat it)
 ```
 
-### Step 3: Generate Divergent Directions (Claude Native)
+### Step 3: Generate Design Direction Options (Agent Task 1)
-AI analyzes requirements and generates `variants_count` maximally contrasting design directions:
+**Executor**: `Task(ui-design-agent)`
 
-**Input**: User prompt + project context + image count
+Launch agent to generate `variants_count` design direction options with previews:
-**Analysis**: 6D attribute space (color saturation, visual weight, formality, organic/geometric, innovation, density)
-**Output**: JSON with divergent_directions, each having:
-- philosophy_name (2-3 words)
-- design_attributes (specific scores)
-- search_keywords (3-5 keywords)
-- anti_keywords (2-3 keywords)
-- rationale (contrast explanation)
 
-### Step 4: Write Design Space Analysis
-```bash
-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 {base_path}/.intermediates/style-analysis/design-space-analysis.json && echo "saved")
-```
-
-**Output**: `design-space-analysis.json` (intermediate analysis file)
-
-## Phase 2: Design System Generation (Agent)
-
-**Executor**: `Task(ui-design-agent)` for all variants
-
-### Step 1: Create Output Directories
-```bash
-bash(mkdir -p {base_path}/style-extraction/style-{{1..{variants_count}}})
-```
-
-### Step 2: Launch Agent Task
-For all variants (1 to {variants_count}):
 ```javascript
 Task(ui-design-agent): `
-  [DESIGN_SYSTEM_GENERATION_TASK]
+  [DESIGN_DIRECTION_GENERATION_TASK]
-  Generate {variants_count} independent production-ready design systems
+  Generate {variants_count} maximally contrasting design directions with visual previews
 
-  SESSION: {session_id} | MODE: {extraction_mode} | BASE_PATH: {base_path}
+  SESSION: {session_id} | MODE: explore | 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)
+  - User prompt: {prompt_guidance}
-  - Visual references: {loaded_images OR prompt_guidance}
+  - Visual references: {loaded_images if available}
-  - Computed styles: {computed_styles if available}
+  - Project context: {brainstorming_context if available}
-  - Design space analysis: {design_space_analysis if explore mode}
 
   ## Analysis Rules
-  - **Explore mode**: Each variant follows pre-defined philosophy and attributes
+  - Analyze 6D attribute space: color saturation, visual weight, formality, organic/geometric, innovation, density
-  - **Imitate mode**: High-fidelity replication of reference design
+  - Generate {variants_count} directions with MAXIMUM contrast
-    - If computed_styles available: Use as ground truth for border-radius, shadows, spacing, typography, colors
+  - Each direction must be distinctly different (min distance score: 0.7)
-    - 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)
+  ## Generate for EACH Direction
-  1. {base_path}/style-extraction/style-{N}/design-tokens.json
+  1. **Core Philosophy**:
-     - Complete token structure: colors, typography, spacing, border_radius, shadows, breakpoints
+     - philosophy_name (2-3 words, e.g., "Minimalist & Airy")
-     - All colors in OKLCH format
+     - design_attributes (6D scores 0-1)
-     - {IF explore mode: Apply design_attributes to token values (saturation→chroma, density→spacing, etc.)}
+     - search_keywords (3-5 keywords)
+     - anti_keywords (2-3 keywords to avoid)
+     - rationale (why this is distinct from others)
 
-  2. {base_path}/style-extraction/style-{N}/style-guide.md
+  2. **Visual Preview Elements**:
-     - Expanded design philosophy
+     - primary_color (OKLCH format)
-     - Complete color system with accessibility notes
+     - secondary_color (OKLCH format)
-     - Typography documentation
+     - accent_color (OKLCH format)
-     - Usage guidelines
+     - font_family_heading (specific font name)
+     - font_family_body (specific font name)
+     - border_radius_base (e.g., "0.5rem")
+     - mood_description (1-2 sentences describing the feel)
 
-  ## Critical Requirements
+  ## Output
-  - ✅ Use Write() tool immediately for each file
+  Write single JSON file: {base_path}/.intermediates/style-analysis/analysis-options.json
-  - ✅ Use loop index N for directory names: style-1/, style-2/, etc.
+
-  - ❌ NO external research or MCP calls (pure AI generation)
+  Use schema from INTERACTIVE-DATA-SPEC.md (Style Extract: analysis-options.json)
-  - {IF explore mode: Apply philosophy-driven refinement using design_attributes}
+
-  - {IF explore mode: Maintain divergence using anti_keywords}
+  CRITICAL: Use Write() tool immediately after generating complete JSON
-  - Complete each variant's files before moving to next variant
 `
 ```
 
-**Output**: Agent generates `variants_count × 2` files
+### Step 4: Verify Options File Created
+```bash
+bash(test -f {base_path}/.intermediates/style-analysis/analysis-options.json && echo "created")
+
+# Quick validation
+bash(cat {base_path}/.intermediates/style-analysis/analysis-options.json | grep -q "design_directions" && echo "valid")
+```
+
+**Output**: `analysis-options.json` with design direction options
+
+---
+
+## Phase 1.5: User Confirmation (Explore Mode Only - INTERACTIVE)
+
+**Purpose**: Allow user to select preferred design direction(s) before generating full design systems
+
+### Step 1: Load and Present Options
+```bash
+# Read options file
+options = Read({base_path}/.intermediates/style-analysis/analysis-options.json)
+
+# Parse design directions
+design_directions = options.design_directions
+```
+
+### Step 2: Present Options to User
+```
+📋 Design Direction Options
+
+We've generated {variants_count} contrasting design directions for your review.
+Please select the direction(s) you'd like to develop into complete design systems.
+
+{FOR each direction in design_directions:
+  ═══════════════════════════════════════════════════
+  Option {direction.index}: {direction.philosophy_name}
+  ═══════════════════════════════════════════════════
+
+  Philosophy: {direction.rationale}
+
+  Visual Preview:
+  • Colors: {direction.preview.primary_color} (primary), {direction.preview.accent_color} (accent)
+  • Typography: {direction.preview.font_family_heading} (headings), {direction.preview.font_family_body} (body)
+  • Border Radius: {direction.preview.border_radius_base}
+  • Mood: {direction.preview.mood_description}
+
+  Design Attributes:
+  • Color Saturation: {direction.design_attributes.color_saturation * 100}%
+  • Visual Weight: {direction.design_attributes.visual_weight * 100}%
+  • Formality: {direction.design_attributes.formality * 100}%
+  • Innovation: {direction.design_attributes.innovation * 100}%
+
+  Keywords: {join(direction.search_keywords, ", ")}
+  Avoiding: {join(direction.anti_keywords, ", ")}
+}
+
+═══════════════════════════════════════════════════
+```
+
+### Step 3: Capture User Selection
+```javascript
+// Use AskUserQuestion tool for selection
+AskUserQuestion({
+  questions: [{
+    question: "Which design direction would you like to develop into a complete design system?",
+    header: "Style Choice",
+    multiSelect: false,  // Single selection for Phase 1
+    options: [
+      {FOR each direction:
+        label: "Option {direction.index}: {direction.philosophy_name}",
+        description: "{direction.mood_description}"
+      }
+    ]
+  }]
+})
+
+// Parse user response (e.g., "Option 1: Minimalist & Airy")
+selected_option_text = user_answer
+
+// Check for user cancellation
+IF selected_option_text == null OR selected_option_text == "":
+    REPORT: "⚠️ User canceled selection. Workflow terminated."
+    EXIT workflow
+
+// Extract option index from response format "Option N: Name"
+match = selected_option_text.match(/Option (\d+):/)
+IF match:
+    selected_index = parseInt(match[1])
+ELSE:
+    ERROR: "Invalid selection format. Expected 'Option N: ...' format"
+    EXIT workflow
+```
+
+### Step 4: Write User Selection File
+```bash
+# Create user selection JSON
+selection_data = {
+  "metadata": {
+    "selected_at": "{current_timestamp}",
+    "selection_type": "single",
+    "session_id": "{session_id}"
+  },
+  "selected_indices": [selected_index],
+  "refinements": {
+    "enabled": false
+  }
+}
+
+# Write to file
+bash(echo '{selection_data}' > {base_path}/.intermediates/style-analysis/user-selection.json)
+
+# Verify
+bash(test -f {base_path}/.intermediates/style-analysis/user-selection.json && echo "saved")
+```
+
+### Step 5: Confirmation Message
+```
+✅ Selection recorded!
+
+You selected: Option {selected_index} - {selected_direction.philosophy_name}
+
+Proceeding to generate complete design system based on your selection...
+```
+
+**Output**: `user-selection.json` with user's choice
+
+## Phase 2: Design System Generation (Agent Task 2)
+
+**Executor**: `Task(ui-design-agent)` for selected variant(s)
+
+### Step 1: Load User Selection (Explore Mode)
+```bash
+# For explore mode, read user selection
+IF extraction_mode == "explore":
+    selection = Read({base_path}/.intermediates/style-analysis/user-selection.json)
+    selected_indices = selection.selected_indices
+    refinements = selection.refinements
+
+    # Also read the selected direction details from options
+    options = Read({base_path}/.intermediates/style-analysis/analysis-options.json)
+    selected_directions = [options.design_directions[i-1] for i in selected_indices]  # 0-indexed
+
+    # For Phase 1, we only allow single selection
+    selected_direction = selected_directions[0]
+    actual_variants_count = 1
+ELSE:
+    # Imitate mode - generate single variant without selection
+    selected_direction = null
+    actual_variants_count = 1
+```
+
+### Step 2: Create Output Directory
+```bash
+# Create directory for selected variant only
+bash(mkdir -p {base_path}/style-extraction/style-1)
+```
+
+### Step 3: Launch Agent Task
+Generate design system for selected direction:
+```javascript
+Task(ui-design-agent): `
+  [DESIGN_SYSTEM_GENERATION_TASK]
+  Generate production-ready design system based on user-selected direction
+
+  SESSION: {session_id} | MODE: {extraction_mode} | BASE_PATH: {base_path}
+
+  ${extraction_mode == "explore" ? `
+  USER SELECTION:
+  - Selected Direction: ${selected_direction.philosophy_name}
+  - Design Attributes: ${JSON.stringify(selected_direction.design_attributes)}
+  - Search Keywords: ${selected_direction.search_keywords.join(", ")}
+  - Anti-keywords: ${selected_direction.anti_keywords.join(", ")}
+  - Rationale: ${selected_direction.rationale}
+  - Preview Colors: Primary=${selected_direction.preview.primary_color}, Accent=${selected_direction.preview.accent_color}
+  - Preview Typography: Heading=${selected_direction.preview.font_family_heading}, Body=${selected_direction.preview.font_family_body}
+  - Preview Border Radius: ${selected_direction.preview.border_radius_base}
+
+  ${refinements.enabled ? `
+  USER REFINEMENTS:
+  ${refinements.primary_color ? "- Primary Color Override: " + refinements.primary_color : ""}
+  ${refinements.font_family_heading ? "- Heading Font Override: " + refinements.font_family_heading : ""}
+  ${refinements.font_family_body ? "- Body Font Override: " + refinements.font_family_body : ""}
+  ` : ""}
+  ` : ""}
+
+  ## Input Analysis
+  - Input mode: {input_mode} (image/text/hybrid${has_urls ? "/url" : ""})
+  - Visual references: {loaded_images OR prompt_guidance}
+  ${computed_styles_available ? "- Computed styles: Use as ground truth (Read from .intermediates/style-analysis/computed-styles.json)" : ""}
+
+  ## Generation Rules
+  ${extraction_mode == "explore" ? `
+  - **Explore Mode**: Develop the selected design direction into a complete design system
+  - Use preview elements as foundation and expand with full token coverage
+  - Apply design_attributes to all token values:
+    * color_saturation → OKLCH chroma values
+    * visual_weight → font weights, shadow depths
+    * density → spacing scale compression/expansion
+    * formality → typography choices, border radius
+    * organic_geometric → border radius, shape patterns
+    * innovation → token naming, experimental values
+  - Honor search_keywords for design inspiration
+  - Avoid anti_keywords patterns
+  ` : `
+  - **Imitate Mode**: High-fidelity replication of reference design
+  ${computed_styles_available ? "- Use computed styles as ground truth for all measurements" : "- Use visual inference for measurements"}
+  `}
+  - All colors in OKLCH format ${computed_styles_available ? "(convert from computed RGB)" : ""}
+  - WCAG AA compliance: 4.5:1 text contrast, 3:1 UI contrast
+
+  ## Generate
+  Create complete design system in {base_path}/style-extraction/style-1/
+
+  1. **design-tokens.json**:
+     - Complete token structure: colors (brand, surface, semantic, text, border), typography (families, sizes, weights, line heights, letter spacing), spacing (0-24 scale), border_radius (none to full), shadows (sm to xl), breakpoints (sm to 2xl)
+     - All colors in OKLCH format
+     ${extraction_mode == "explore" ? "- Start from preview colors and expand to full palette" : ""}
+     ${extraction_mode == "explore" && refinements.enabled ? "- Apply user refinements where specified" : ""}
+
+  2. **style-guide.md**:
+     - Design philosophy (${extraction_mode == "explore" ? "expand on: " + selected_direction.philosophy_name : "describe the reference design"})
+     - Complete color system documentation with accessibility notes
+     - Typography scale and usage guidelines
+     - Spacing system explanation
+     - Component examples and usage patterns
+
+  ## Critical Requirements
+  - ✅ Use Write() tool immediately for each file
+  - ✅ Write to style-1/ directory (single output)
+  - ❌ NO external research or MCP calls (pure AI generation)
+  - ✅ Maintain consistency with user-selected direction
+  ${refinements.enabled ? "- ✅ Apply user refinements precisely" : ""}
+`
+```
+
+**Output**: Agent generates 2 files (design-tokens.json, style-guide.md) for selected direction
 
 ## Phase 3: Verify Output
 
@@ -298,23 +490,22 @@ Configuration:
 }
 
 {IF extraction_mode == "explore":
-Design Space Analysis:
+Design Direction Selection:
-- {variants_count} maximally contrasting design directions
+- You selected: Option {selected_index} - {selected_direction.philosophy_name}
-- Min contrast distance: {design_space_analysis.contrast_verification.min_pairwise_distance}
+- Generated from {variants_count} contrasting design direction options
 }
 
 Generated Files:
 {base_path}/style-extraction/
-├── style-1/ (design-tokens.json, style-guide.md)
+└── style-1/ (design-tokens.json, style-guide.md)
-├── style-2/ (same structure)
-└── style-{variants_count}/ (same structure)
 
 {IF computed_styles_available:
 Intermediate Analysis:
 {base_path}/.intermediates/style-analysis/computed-styles.json (extracted from {primary_url})
 }
 {IF extraction_mode == "explore":
-{base_path}/.intermediates/style-analysis/design-space-analysis.json
+{base_path}/.intermediates/style-analysis/analysis-options.json (design direction options)
+{base_path}/.intermediates/style-analysis/user-selection.json (your selection)
 }
 
 Next: /workflow:ui-design:layout-extract --session {session_id} --targets "..."
@@ -357,7 +548,7 @@ bash(mkdir -p {base_path}/style-extraction/style-{{1..3}})
 
 # Verify output
 bash(ls {base_path}/style-extraction/style-1/)
-bash(test -f {base_path}/.intermediates/style-analysis/design-space-analysis.json && echo "saved")
+bash(test -f {base_path}/.intermediates/style-analysis/analysis-options.json && echo "saved")
 ```
 
 ## Output Structure
@@ -367,13 +558,12 @@ bash(test -f {base_path}/.intermediates/style-analysis/design-space-analysis.jso
 ├── .intermediates/                  # Intermediate analysis files
 │   └── style-analysis/
 │       ├── computed-styles.json     # Extracted CSS values from DOM (if URL available)
-│       └── design-space-analysis.json  # Design directions (explore mode only)
+│       ├── analysis-options.json    # Design direction options (explore mode only)
-└── style-extraction/                # Final design systems
+│       └── user-selection.json      # User's selected direction (explore mode only)
-    ├── style-1/
+└── style-extraction/                # Final design system
-    │   ├── design-tokens.json       # Production-ready design tokens
+    └── style-1/
-    │   └── style-guide.md           # Design philosophy and usage guide
+        ├── design-tokens.json       # Production-ready design tokens
-    ├── style-2/ (same structure)
+        └── style-guide.md           # Design philosophy and usage guide
-    └── style-N/ (same structure)
 ```
 
 ## design-tokens.json Format