Remove batch-generate command documentation and related references; update explore-auto and layout-extract commands to enable interactive mode by default and embed user selections in analysis-options.json; enhance style-extract command to capture user selections and update analysis JSON; revise command reference and specification documents accordingly.

2026-02-05 01:50:27 +08:00 · 2025-11-09 14:35:30 +08:00
parent d410ed20d6
commit 3be5663ab0
16 changed files with 440 additions and 1786 deletions
--- a/.claude/commands/workflow/ui-design/animation-extract.md
+++ b/.claude/commands/workflow/ui-design/animation-extract.md
@@ -151,7 +151,7 @@ ELSE:

 **Phase 1 Output**: `animations-{target}.json` (intermediate files)

-## Phase 2: Interactive Animation Specification (Interactive/Fallback Mode)
+## Phase 2: Animation Question Generation (Agent Task 1)

 ### Step 1: Check if Extraction Sufficient

@@ -164,7 +164,7 @@ IF animations_extracted:
    # If sufficient data found, skip interactive mode
    IF total_animations >= 3 OR total_transitions >= 5:
        REPORT: "✅ Sufficient animation data extracted from CSS"
-        SKIP to Phase 3
+        SKIP to Phase 4
    ELSE:
        REPORT: "⚠️ Limited animation data found - launching interactive mode"
        extraction_insufficient = true
@@ -172,168 +172,118 @@ ELSE:
    extraction_insufficient = true
 ```

-### Step 2: Generate Animation Questions (Main Flow)
+### Step 2: Generate Animation Questions Using Agent

-```bash
-# If extraction failed or insufficient, use interactive questioning
-IF extraction_insufficient OR extraction_mode == "interactive":
-    REPORT: "🤔 Interactive animation specification mode"
-    REPORT: "   Context: {has_design_context ? 'Aligning with design tokens' : 'Standalone animation system'}"
-    REPORT: "   Focus: {focus_types}"
+**Executor**: `Task(ui-design-agent)`

-    # Determine question categories based on focus_types
-    question_categories = []
-    IF "all" IN focus_types OR "transitions" IN focus_types:
-        question_categories.append("timing_scale")
-        question_categories.append("easing_philosophy")
+Launch agent to generate context-aware animation questions based on project needs:

-    IF "all" IN focus_types OR "interactions" IN focus_types OR "hover" IN focus_types:
-        question_categories.append("button_interactions")
-        question_categories.append("card_interactions")
-        question_categories.append("input_interactions")
+```javascript
+Task(ui-design-agent): `
+  [ANIMATION_QUESTION_GENERATION_TASK]
+  Generate contextual animation questions based on project context and focus types

-    IF "all" IN focus_types OR "page" IN focus_types:
-        question_categories.append("page_transitions")
+  SESSION: {session_id} | MODE: interactive | BASE_PATH: {base_path}

-    IF "all" IN focus_types OR "loading" IN focus_types:
-        question_categories.append("loading_states")
+  ## Context Analysis
+  - Focus types: {focus_types}
+  - Design context: {has_design_context}
+  - Extracted animations: {animations_extracted ? "Available" : "None"}

-    IF "all" IN focus_types OR "scroll" IN focus_types:
-        question_categories.append("scroll_animations")
+  ## Question Categories to Consider
+  Based on focus_types, include relevant categories:
+  - "all" or "transitions": timing_scale, easing_philosophy
+  - "all" or "interactions" or "hover": button_interactions, card_interactions, input_interactions
+  - "all" or "page": page_transitions
+  - "all" or "loading": loading_states
+  - "all" or "scroll": scroll_animations
+
+  ## Generate Question Structure
+  For each applicable category, create question with:
+  1. **Category ID** (e.g., "timing_scale", "button_interactions")
+  2. **Question text** (in Chinese, clear and concise)
+  3. **Options** (2-5 options per question):
+     - Option key (a, b, c, d, e)
+     - Option label (brief description)
+     - Option details (detailed explanation with technical specs)
+     - Recommended scenarios (when to use this option)
+
+  ## Output
+  Write single JSON file: {base_path}/.intermediates/animation-analysis/question-options.json
+
+  Use schema:
+  {
+    "metadata": {
+      "generated_at": "<timestamp>",
+      "focus_types": ["..."],
+      "total_questions": <count>
+    },
+    "questions": [
+      {
+        "id": 1,
+        "category": "timing_scale",
+        "question": "您的设计需要什么样的过渡速度？",
+        "options": [
+          {
+            "key": "a",
+            "label": "快速敏捷",
+            "details": "100-200ms 过渡，适合工具型应用和即时反馈场景",
+            "duration_range": "100-200ms"
+          },
+          ...
+        ]
+      },
+      ...
+    ]
+  }
+
+  CRITICAL: Use Write() tool immediately after generating complete JSON
+`
 ```

-### Step 3: Output Questions in Text Format (Main Flow)
+### Step 3: Verify Question File Created
+
+```bash
+bash(test -f {base_path}/.intermediates/animation-analysis/question-options.json && echo "created")
+
+# Quick validation
+bash(cat {base_path}/.intermediates/animation-analysis/question-options.json | grep -q "questions" && echo "valid")
+```
+
+**Output**: `question-options.json` with context-aware questions
+
+---
+
+## Phase 3: Interactive Animation Specification (User Interaction)
+
+### Step 1: Load Generated Questions
+
+```bash
+# Read generated questions from JSON file
+question_data = Read({base_path}/.intermediates/animation-analysis/question-options.json)
+
+REPORT: "🤔 Interactive animation specification mode"
+REPORT: "   Context: {has_design_context ? 'Aligning with design tokens' : 'Standalone animation system'}"
+REPORT: "   Questions: {question_data.metadata.total_questions} questions loaded"
+REPORT: "   Focus: {question_data.metadata.focus_types}"
+```
+
+### Step 2: Present Questions to User

 ```markdown
-# Generate and output structured questions
+# Display questions from loaded JSON
 REPORT: ""
 REPORT: "===== 动画规格交互式配置 ====="
 REPORT: ""

-question_number = 1
-questions_output = []
+FOR each question IN question_data.questions:
+    REPORT: "【问题{question.id} - {question.category}】{question.question}"

-# Q1: Timing Scale (if included)
-IF "timing_scale" IN question_categories:
-    REPORT: "【问题{question_number} - 时间尺度】您的设计需要什么样的过渡速度？"
-    REPORT: "a) 快速敏捷"
-    REPORT: "   说明：100-200ms 过渡，适合工具型应用和即时反馈场景"
-    REPORT: "b) 平衡适中"
-    REPORT: "   说明：200-400ms 过渡，通用选择，符合多数用户预期"
-    REPORT: "c) 流畅舒缓"
-    REPORT: "   说明：400-600ms 过渡，适合品牌展示和沉浸式体验"
-    REPORT: "d) 自定义"
-    REPORT: "   说明：需要指定具体数值和使用场景"
-    REPORT: ""
-    questions_output.append({id: question_number, category: "timing_scale", options: ["a", "b", "c", "d"]})
-    question_number += 1
+    FOR each option IN question.options:
+        REPORT: "{option.key}) {option.label}"
+        REPORT: "   说明：{option.details}"

-# Q2: Easing Philosophy (if included)
-IF "easing_philosophy" IN question_categories:
-    REPORT: "【问题{question_number} - 缓动风格】哪种缓动曲线符合您的品牌调性？"
-    REPORT: "a) 线性匀速"
-    REPORT: "   说明：恒定速度，技术感和精确性，适合数据可视化"
-    REPORT: "b) 快入慢出"
-    REPORT: "   说明：快速启动自然减速，最接近物理世界，通用推荐"
-    REPORT: "c) 慢入慢出"
-    REPORT: "   说明：平滑对称，精致优雅，适合高端品牌"
-    REPORT: "d) 弹性效果"
-    REPORT: "   说明：Spring/Bounce 回弹，活泼现代，适合互动性强的应用"
    REPORT: ""
-    questions_output.append({id: question_number, category: "easing_philosophy", options: ["a", "b", "c", "d"]})
-    question_number += 1
-
-# Q3-5: Interaction Animations (button, card, input - if included)
-IF "button_interactions" IN question_categories:
-    REPORT: "【问题{question_number} - 按钮交互】按钮悬停/点击时如何反馈？"
-    REPORT: "a) 微妙变化"
-    REPORT: "   说明：仅颜色/透明度变化，适合简约设计"
-    REPORT: "b) 抬升效果"
-    REPORT: "   说明：轻微缩放+阴影加深，增强物理感知"
-    REPORT: "c) 滑动移位"
-    REPORT: "   说明：Transform translateY，视觉引导明显"
-    REPORT: "d) 无动画"
-    REPORT: "   说明：静态交互，性能优先或特定品牌要求"
-    REPORT: ""
-    questions_output.append({id: question_number, category: "button_interactions", options: ["a", "b", "c", "d"]})
-    question_number += 1
-
-IF "card_interactions" IN question_categories:
-    REPORT: "【问题{question_number} - 卡片交互】卡片悬停时的动画效果？"
-    REPORT: "a) 阴影加深"
-    REPORT: "   说明：Box-shadow 变化，层次感增强"
-    REPORT: "b) 上浮效果"
-    REPORT: "   说明：Transform translateY(-4px)，明显的空间层次"
-    REPORT: "c) 缩放放大"
-    REPORT: "   说明：Scale(1.02)，突出焦点内容"
-    REPORT: "d) 无动画"
-    REPORT: "   说明：静态卡片，性能或设计考量"
-    REPORT: ""
-    questions_output.append({id: question_number, category: "card_interactions", options: ["a", "b", "c", "d"]})
-    question_number += 1
-
-IF "input_interactions" IN question_categories:
-    REPORT: "【问题{question_number} - 表单交互】输入框是否需要微交互反馈？"
-    REPORT: "a) 聚焦动画"
-    REPORT: "   说明：边框/阴影过渡，清晰的状态指示"
-    REPORT: "b) 错误抖动"
-    REPORT: "   说明：水平shake动画，错误提示更明显"
-    REPORT: "c) 成功勾选"
-    REPORT: "   说明：Checkmark 动画，完成反馈"
-    REPORT: "d) 全部包含"
-    REPORT: "   说明：聚焦+错误+成功的完整反馈体系"
-    REPORT: "e) 无微交互"
-    REPORT: "   说明：标准表单，无额外动画"
-    REPORT: ""
-    questions_output.append({id: question_number, category: "input_interactions", options: ["a", "b", "c", "d", "e"]})
-    question_number += 1
-
-# Q6: Page Transitions (if included)
-IF "page_transitions" IN question_categories:
-    REPORT: "【问题{question_number} - 页面过渡】页面/路由切换是否需要过渡动画？"
-    REPORT: "a) 淡入淡出"
-    REPORT: "   说明：Crossfade 效果，平滑过渡不突兀"
-    REPORT: "b) 滑动切换"
-    REPORT: "   说明：Swipe left/right，方向性导航"
-    REPORT: "c) 缩放过渡"
-    REPORT: "   说明：Scale in/out，空间层次感"
-    REPORT: "d) 无过渡"
-    REPORT: "   说明：即时切换，性能优先"
-    REPORT: ""
-    questions_output.append({id: question_number, category: "page_transitions", options: ["a", "b", "c", "d"]})
-    question_number += 1
-
-# Q7: Loading States (if included)
-IF "loading_states" IN question_categories:
-    REPORT: "【问题{question_number} - 加载状态】加载时使用何种动画风格？"
-    REPORT: "a) 旋转加载器"
-    REPORT: "   说明：Spinner 圆形旋转，通用加载指示"
-    REPORT: "b) 脉冲闪烁"
-    REPORT: "   说明：Opacity pulse，轻量级反馈"
-    REPORT: "c) 骨架屏"
-    REPORT: "   说明：Shimmer effect，内容占位预览"
-    REPORT: "d) 进度条"
-    REPORT: "   说明：Linear fill，进度量化展示"
-    REPORT: ""
-    questions_output.append({id: question_number, category: "loading_states", options: ["a", "b", "c", "d"]})
-    question_number += 1
-
-# Q8: Scroll Animations (if included)
-IF "scroll_animations" IN question_categories:
-    REPORT: "【问题{question_number} - 滚动动画】元素是否在滚动时触发动画？"
-    REPORT: "a) 淡入出现"
-    REPORT: "   说明：Opacity 0→1，渐进式内容呈现"
-    REPORT: "b) 上滑出现"
-    REPORT: "   说明：TranslateY + fade，方向性引导"
-    REPORT: "c) 缩放淡入"
-    REPORT: "   说明：Scale 0.9→1 + fade，聚焦效果"
-    REPORT: "d) 交错延迟"
-    REPORT: "   说明：Stagger 序列动画，列表渐次呈现"
-    REPORT: "e) 无滚动动画"
-    REPORT: "   说明：静态内容，性能或可访问性考量"
-    REPORT: ""
-    questions_output.append({id: question_number, category: "scroll_animations", options: ["a", "b", "c", "d", "e"]})
-    question_number += 1

 REPORT: "支持格式："
 REPORT: "- 空格分隔：1a 2b 3c"
@@ -343,7 +293,7 @@ REPORT: ""
 REPORT: "请输入您的选择："
 ```

-### Step 4: Wait for User Input (Main Flow)
+### Step 3: Wait for User Input (Main Flow)

 ```javascript
 # Wait for user input
@@ -353,7 +303,7 @@ user_raw_input = WAIT_FOR_USER_INPUT()
 REPORT: "收到输入: {user_raw_input}"
 ```

-### Step 5: Parse User Answers (Main Flow)
+### Step 4: Parse User Answers and Update JSON

 ```javascript
 # Intelligent input parsing (support multiple formats)
@@ -361,7 +311,7 @@ answers = {}

 # Parse input using intelligent matching
 # Support formats: "1a 2b 3c", "1a,2b,3c", "1a 2b,3c"
-parsed_responses = PARSE_USER_INPUT(user_raw_input, questions_output)
+parsed_responses = PARSE_USER_INPUT(user_raw_input, question_data.questions)

 # Validate parsing
 IF parsed_responses.is_valid:
@@ -371,7 +321,7 @@ IF parsed_responses.is_valid:
        selected_option = response.option

        # Find category for this question
-        FOR question IN questions_output:
+        FOR question IN question_data.questions:
            IF question.id == question_id:
                category = question.category
                answers[category] = selected_option
@@ -380,105 +330,26 @@ IF parsed_responses.is_valid:
 ELSE:
    REPORT: "❌ 输入格式无法识别，请参考格式示例重新输入："
    REPORT: "   示例：1a 2b 3c 4d"
-    # Return to Step 3 for re-input
-    GOTO Step 3
-```
+    # Return to Step 2 for re-input
+    GOTO Step 2

-### Step 6: Write Animation Specification (Main Flow)
-
-```javascript
-# Map user choices to specification structure
-specification = {
-    "metadata": {
-        "source": "interactive",
-        "timestamp": NOW(),
-        "focus_types": focus_types,
-        "has_design_context": has_design_context
-    },
-    "timing_scale": MAP_TIMING_SCALE(answers.timing_scale),
-    "easing_philosophy": MAP_EASING_PHILOSOPHY(answers.easing_philosophy),
-    "interactions": {
-        "button": MAP_BUTTON_INTERACTION(answers.button_interactions),
-        "card": MAP_CARD_INTERACTION(answers.card_interactions),
-        "input": MAP_INPUT_INTERACTION(answers.input_interactions)
-    },
-    "page_transitions": MAP_PAGE_TRANSITIONS(answers.page_transitions),
-    "loading_animations": MAP_LOADING_STATES(answers.loading_states),
-    "scroll_animations": MAP_SCROLL_ANIMATIONS(answers.scroll_animations)
+// Update question-options.json with user selection
+question_data.user_selection = {
+  "selected_at": NOW(),
+  "answers": answers
 }

-# Mapping functions (inline logic)
-FUNCTION MAP_TIMING_SCALE(option):
-    SWITCH option:
-        CASE "a": RETURN {scale: "fast", base_duration: "150ms", range: "100-200ms"}
-        CASE "b": RETURN {scale: "balanced", base_duration: "300ms", range: "200-400ms"}
-        CASE "c": RETURN {scale: "smooth", base_duration: "500ms", range: "400-600ms"}
-        CASE "d": RETURN {scale: "custom", base_duration: "300ms", note: "User to provide values"}
+// Write updated file back
+Write({base_path}/.intermediates/animation-analysis/question-options.json, JSON.stringify(question_data, indent=2))

-FUNCTION MAP_EASING_PHILOSOPHY(option):
-    SWITCH option:
-        CASE "a": RETURN {style: "linear", curve: "linear"}
-        CASE "b": RETURN {style: "ease-out", curve: "cubic-bezier(0, 0, 0.2, 1)"}
-        CASE "c": RETURN {style: "ease-in-out", curve: "cubic-bezier(0.4, 0, 0.2, 1)"}
-        CASE "d": RETURN {style: "spring", curve: "cubic-bezier(0.34, 1.56, 0.64, 1)"}
-
-FUNCTION MAP_BUTTON_INTERACTION(option):
-    SWITCH option:
-        CASE "a": RETURN {type: "subtle", properties: ["color", "background-color", "opacity"]}
-        CASE "b": RETURN {type: "lift", properties: ["transform", "box-shadow"], transform: "scale(1.02)"}
-        CASE "c": RETURN {type: "slide", properties: ["transform"], transform: "translateY(-2px)"}
-        CASE "d": RETURN {type: "none", properties: []}
-
-FUNCTION MAP_CARD_INTERACTION(option):
-    SWITCH option:
-        CASE "a": RETURN {type: "shadow", properties: ["box-shadow"]}
-        CASE "b": RETURN {type: "float", properties: ["transform", "box-shadow"], transform: "translateY(-4px)"}
-        CASE "c": RETURN {type: "scale", properties: ["transform"], transform: "scale(1.02)"}
-        CASE "d": RETURN {type: "none", properties: []}
-
-FUNCTION MAP_INPUT_INTERACTION(option):
-    SWITCH option:
-        CASE "a": RETURN {enabled: ["focus"], focus: {properties: ["border-color", "box-shadow"]}}
-        CASE "b": RETURN {enabled: ["error"], error: {animation: "shake", keyframes: "translateX"}}
-        CASE "c": RETURN {enabled: ["success"], success: {animation: "checkmark", keyframes: "draw"}}
-        CASE "d": RETURN {enabled: ["focus", "error", "success"]}
-        CASE "e": RETURN {enabled: []}
-
-FUNCTION MAP_PAGE_TRANSITIONS(option):
-    SWITCH option:
-        CASE "a": RETURN {enabled: true, style: "fade", animation: "fadeIn/fadeOut"}
-        CASE "b": RETURN {enabled: true, style: "slide", animation: "slideLeft/slideRight"}
-        CASE "c": RETURN {enabled: true, style: "zoom", animation: "zoomIn/zoomOut"}
-        CASE "d": RETURN {enabled: false}
-
-FUNCTION MAP_LOADING_STATES(option):
-    SWITCH option:
-        CASE "a": RETURN {style: "spinner", animation: "rotate", keyframes: "360deg"}
-        CASE "b": RETURN {style: "pulse", animation: "pulse", keyframes: "opacity"}
-        CASE "c": RETURN {style: "skeleton", animation: "shimmer", keyframes: "gradient-shift"}
-        CASE "d": RETURN {style: "progress", animation: "fill", keyframes: "width"}
-
-FUNCTION MAP_SCROLL_ANIMATIONS(option):
-    SWITCH option:
-        CASE "a": RETURN {enabled: true, style: "fade", animation: "fadeIn"}
-        CASE "b": RETURN {enabled: true, style: "slideUp", animation: "slideUp", transform: "translateY(20px)"}
-        CASE "c": RETURN {enabled: true, style: "scaleIn", animation: "scaleIn", transform: "scale(0.9)"}
-        CASE "d": RETURN {enabled: true, style: "stagger", animation: "fadeIn", stagger_delay: "100ms"}
-        CASE "e": RETURN {enabled: false}
-
-# Write specification file
-output_path = "{base_path}/.intermediates/animation-analysis/animation-specification.json"
-Write(output_path, JSON.stringify(specification, indent=2))
-
-REPORT: "✅ Animation specification saved to {output_path}"
-REPORT: "   Proceeding to token synthesis..."
+REPORT: "✅ Updated question-options.json with user selection"
 ```

 ---

-**Phase 2 Output**: `animation-specification.json` (user preferences)
+**Phase 3 Output**: Updated `question-options.json` with user answers embedded

-## Phase 3: Animation Token Synthesis (Agent - No User Interaction)
+## Phase 4: Animation Token Synthesis (Agent - No User Interaction)

 **Executor**: `Task(ui-design-agent)` for token generation

@@ -494,12 +365,17 @@ IF animations_extracted:
        IF exists({base_path}/.intermediates/animation-analysis/animations-{target}.json):
            extracted_animations.append(Read(file))

-user_specification = null
-IF exists({base_path}/.intermediates/animation-analysis/animation-specification.json):
-    user_specification = Read(file)
-    REPORT: "✅ Loaded user specification from Phase 2"
+# Read user answers from question-options.json
+question_data = null
+IF exists({base_path}/.intermediates/animation-analysis/question-options.json):
+    question_data = Read({base_path}/.intermediates/animation-analysis/question-options.json)
+    IF question_data.user_selection:
+        REPORT: "✅ Loaded user answers from question-options.json"
+    ELSE:
+        REPORT: "⚠️ No user selection found in question-options.json"
+        question_data = null
 ELSE:
-    REPORT: "⚠️ No user specification found - using extracted CSS only"
+    REPORT: "⚠️ No question-options.json found - using extracted CSS only"

 design_tokens = null
 IF has_design_context:
@@ -524,9 +400,9 @@ Task(ui-design-agent): `
  1. **Extracted CSS Animations** (if available):
     ${extracted_animations.length > 0 ? JSON.stringify(extracted_animations) : "None - skip CSS data"}

-  2. **User Specification** (REQUIRED if Phase 2 ran):
-     File: {base_path}/.intermediates/animation-analysis/animation-specification.json
-     ${user_specification ? "Status: ✅ Found - READ this file for user choices" : "Status: ⚠️ Not found - use CSS extraction only"}
+  2. **User Answers** (REQUIRED if Phase 2-3 ran):
+     File: {base_path}/.intermediates/animation-analysis/question-options.json
+     ${question_data ? "Status: ✅ Found - READ this file for user choices in user_selection field" : "Status: ⚠️ Not found - use CSS extraction only"}

  3. **Design Tokens Context** (for alignment):
     ${design_tokens ? JSON.stringify(design_tokens) : "None - standalone animation system"}
@@ -534,13 +410,13 @@ Task(ui-design-agent): `
  ## Synthesis Rules

  ### Priority System
-  1. User specification from animation-specification.json (highest priority)
+  1. User answers from question-options.json user_selection field (highest priority)
  2. Extracted CSS values from animations-*.json (medium priority)
  3. Industry best practices (fallback)

  ### Duration Normalization
-  - IF user_specification.timing_scale EXISTS:
-      Use user's chosen scale (fast/balanced/smooth/custom)
+  - IF question_data.user_selection.answers.timing_scale EXISTS:
+      Map user's answer to duration scale using question_data.questions definitions
  - ELSE IF extracted CSS durations available:
      Cluster extracted durations into 3-5 semantic scales
  - ELSE:
@@ -548,8 +424,8 @@ Task(ui-design-agent): `
  - Align with design token spacing scale if available

  ### Easing Standardization
-  - IF user_specification.easing_philosophy EXISTS:
-      Use user's chosen philosophy (linear/ease-out/ease-in-out/spring)
+  - IF question_data.user_selection.answers.easing_philosophy EXISTS:
+      Map user's answer to easing curve using question_data.questions definitions
  - ELSE IF extracted CSS easings available:
      Identify common easing functions from CSS
  - ELSE:
@@ -566,17 +442,17 @@ Task(ui-design-agent): `
  - **page_transitions**: Route/view change animations (if user enabled)
  - **scroll_animations**: Scroll-triggered animations (if user enabled)

-  ### User Specification Integration
-  IF user_specification EXISTS:
-    - Map user choices to token values:
-      * timing_scale → duration values
-      * easing_philosophy → easing curves
-      * interactions.button → interactions.button-hover token
-      * interactions.card → interactions.card-hover token
-      * interactions.input → micro-interaction tokens
-      * page_transitions → page_transitions tokens
-      * loading_animations → loading state tokens
-      * scroll_animations → scroll_animations tokens
+  ### User Answers Integration
+  IF question_data.user_selection EXISTS:
+    - Map user answers to token values using question definitions:
+      * answers.timing_scale → duration values (use question options for specs)
+      * answers.easing_philosophy → easing curves (use question options for specs)
+      * answers.button_interactions → interactions.button-hover token
+      * answers.card_interactions → interactions.card-hover token
+      * answers.input_interactions → micro-interaction tokens
+      * answers.page_transitions → page_transitions tokens
+      * answers.loading_states → loading state tokens
+      * answers.scroll_animations → scroll_animations tokens

  ## Generate Files

@@ -678,7 +554,7 @@ Task(ui-design-agent): `
  - animation-guide.md: {base_path}/animation-extraction/animation-guide.md

  ## Critical Requirements
-  - ✅ READ animation-specification.json if it exists (from Phase 2)
+  - ✅ READ question-options.json if it exists (from Phase 2-3)
  - ✅ Use Write() tool immediately for both files
  - ✅ All tokens use CSS Custom Property format: var(--duration-fast)
  - ✅ Include prefers-reduced-motion media query guidance
@@ -690,35 +566,9 @@ Task(ui-design-agent): `

 ---

-**Phase 3 Output**: `animation-tokens.json` + `animation-guide.md`
+**Phase 4 Output**: `animation-tokens.json` + `animation-guide.md`

-### Step 3: Store User Selection Metadata (If Interactive Mode Used)
-
-```bash
-# If interactive mode was used, save selection metadata for orchestrator
-IF extraction_mode == "interactive" AND exists({base_path}/.intermediates/animation-analysis/animation-specification.json):
-    # Create user-selections directory
-    bash(mkdir -p {base_path}/.intermediates/user-selections)
-
-    # Read specification to extract metadata
-    specification = Read({base_path}/.intermediates/animation-analysis/animation-specification.json)
-
-    # Create selection metadata (for orchestrator compatibility)
-    selection_metadata = {
-        "metadata": {
-            "selected_at": NOW(),
-            "selection_type": "interactive_questionnaire",
-            "mode": "interactive"
-        },
-        "selected_variants": [1],  // Always 1 for interactive mode (single result)
-        "specification": specification.metadata
-    }
-
-    # Write to standardized selection file
-    Write({base_path}/.intermediates/user-selections/animation-extract-selection.json, JSON.stringify(selection_metadata, indent=2))
-```
-
-## Phase 4: Verify Output
+## Phase 5: Verify Output

 ### Step 1: Check Files Created

@@ -748,7 +598,8 @@ bash(ls -lh {base_path}/animation-extraction/)
 TodoWrite({todos: [
  {content: "Setup and input validation", status: "completed", activeForm: "Validating inputs"},
  {content: "CSS animation extraction (auto mode)", status: "completed", activeForm: "Extracting from CSS"},
-  {content: "Interactive specification (main flow)", status: "completed", activeForm: "Collecting user input in main flow"},
+  {content: "Question generation (agent)", status: "completed", activeForm: "Generating questions"},
+  {content: "Interactive specification (user input)", status: "completed", activeForm: "Collecting user answers"},
  {content: "Animation token synthesis (agent - no interaction)", status: "completed", activeForm: "Generating tokens via agent"},
  {content: "Verify output files", status: "completed", activeForm: "Verifying files"}
 ]});
@@ -766,8 +617,8 @@ Configuration:
  {IF animations_extracted:
  - ✅ CSS extracted from {len(url_list)} URL(s)
  }
-  {IF user_specification:
-  - ✅ User specification via interactive mode (main flow)
+  {IF question_data AND question_data.user_selection:
+  - ✅ User answers via interactive mode (agent-generated questions)
  }
  {IF has_design_context:
  - ✅ Aligned with existing design tokens
@@ -778,13 +629,15 @@ Generated Files:
 ├── animation-tokens.json      # Production-ready animation tokens
 └── animation-guide.md          # Usage guidelines and examples

-{IF animations_extracted:
+{IF animations_extracted OR question_data:
 Intermediate Analysis:
 {base_path}/.intermediates/animation-analysis/
+{IF animations_extracted:
 ├── animations-*.json           # Extracted CSS data ({len(url_list)} files)
 }
-{IF user_specification:
-└── animation-specification.json # User preferences
+{IF question_data:
+└── question-options.json       # Generated questions + user answers
+}
 }

 Extracted Data Summary:
@@ -842,7 +695,7 @@ bash(ls {base_path}/animation-extraction/)
 ├── .intermediates/                  # Intermediate analysis files
 │   └── animation-analysis/
 │       ├── animations-{target}.json      # Extracted CSS (auto mode)
-│       └── animation-specification.json  # User input (interactive mode)
+│       └── question-options.json         # Generated questions + user answers (interactive mode)
 └── animation-extraction/            # Final animation tokens
    ├── animation-tokens.json        # Production-ready animation tokens
    └── animation-guide.md            # Usage guide and examples
@@ -913,12 +766,13 @@ ERROR: Invalid cubic-bezier values

 - **Auto-Trigger CSS Extraction** - Automatically extracts animations when --urls provided
 - **Hybrid Strategy** - Combines CSS extraction with interactive specification
- **Main Flow Interaction** - User questions in main flow, agent only for token synthesis
+- **Agent-Generated Questions** - Context-aware questions generated by agent (Phase 2)
+- **User Interaction** - User answers questions in main flow (Phase 3)
 - **Intelligent Fallback** - Gracefully handles extraction failures
 - **Context-Aware** - Aligns with existing design tokens
 - **Production-Ready** - CSS var() format, accessibility support
 - **Comprehensive Coverage** - Transitions, keyframes, interactions, scroll animations
- **Separated Concerns** - User decisions (Phase 2 main flow) → Token generation (Phase 3 agent)
+- **Separated Concerns** - Question generation (Phase 2 agent) → User answers (Phase 3) → Token generation (Phase 4 agent)

 ## Integration

--- a/.claude/commands/workflow/ui-design/batch-generate.md
+++ b/.claude/commands/workflow/ui-design/batch-generate.md
@@ -1,476 +0,0 @@
---
-name: batch-generate
-description: Prompt-driven batch UI generation using target-style-centric parallel execution with design token application
-argument-hint: [--targets "<list>"] [--target-type "page|component"] [--device-type "desktop|mobile|tablet|responsive"] [--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]
-allowed-tools: TodoWrite(*), Read(*), Write(*), Task(ui-design-agent), Bash(*), mcp__exa__web_search_exa(*)
---
-
-# Batch Generate UI Prototypes (/workflow:ui-design:batch-generate)
-
-## Overview
-Prompt-driven UI generation with intelligent target extraction and **target-style-centric batch execution**. Each agent handles all layouts for one target × style combination.
-
-**Strategy**: Prompt → Targets → Batched Generation
- **Prompt-driven**: Describe what to build, command extracts targets
- **Agent scope**: Each of `T × S` agents generates `L` layouts
- **Parallel batching**: Max 6 concurrent agents for optimal throughput
- **Component isolation**: Complete task independence
- **Style-aware**: HTML adapts to design_attributes
- **Self-contained CSS**: Direct token values (no var() refs)
-
-**Supports**: Pages (full layouts) and components (isolated elements)
-
-## Phase 1: Setup & Validation
-
-### Step 1: Parse Prompt & Resolve Configuration
-```bash
-# Parse required parameters
-prompt_text = --prompt
-device_type = --device-type OR "responsive"
-
-# Extract targets from prompt
-IF --targets:
-    target_list = split_and_clean(--targets)
-ELSE:
-    target_list = extract_targets_from_prompt(prompt_text)  # See helpers
-    IF NOT target_list: target_list = ["home"]  # Fallback
-
-# Detect target type
-target_type = --target-type OR detect_target_type(target_list)
-
-# Resolve base path
-IF --base-path:
-    base_path = --base-path
-ELSE IF --session:
-    relative_path=$(find .workflow/WFS-{session} -type d -name "design-run-*" -printf "%T@ %p\n" | sort -nr | head -1 | cut -d' ' -f2)
-    base_path=$(cd "$relative_path" && pwd)
-ELSE:
-    relative_path=$(find .workflow -type d -name "design-run-*" -printf "%T@ %p\n" | sort -nr | head -1 | cut -d' ' -f2)
-    base_path=$(cd "$relative_path" && pwd)
-
-# Verify absolute path
-bash(test -d "$base_path" && echo "✓ Base path: $base_path" || echo "✗ Path not found")
-
-# Get variant counts
-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: Validate Design Tokens
-```bash
-# Check design tokens exist
-bash(test -f {base_path}/style-extraction/style-1/design-tokens.json && echo "valid")
-
-# Load design space analysis (optional, from intermediates)
-IF exists({base_path}/.intermediates/style-analysis/design-space-analysis.json):
-    design_space_analysis = Read({base_path}/.intermediates/style-analysis/design-space-analysis.json)
-```
-
-**Output**: `design_tokens_valid`, `design_space_analysis`
-
-### Step 3: Gather Layout Inspiration (Direct MCP Search)
-```bash
-# Gather layout inspiration via MCP for each target
-layout_inspiration_map = {}
-
-FOR target IN target_list:
-    search_query = "{target} {target_type} layout patterns variations"
-    search_results = mcp__exa__web_search_exa(query=search_query, numResults=5)
-
-    # Extract context from prompt for this target
-    target_requirements = extract_relevant_context_from_prompt(prompt_text, target)
-
-    # Store inspiration in memory (no file write needed)
-    layout_inspiration_map[target] = format_inspiration_from_search(search_results, target_requirements)
-    REPORT: "Gathered layout inspiration for {target}"
-```
-
-**Output**: `layout_inspiration_map` (in-memory, passed to agents)
-
-## Phase 2: Target-Style-Centric Batch Generation (Agent)
-
-**Executor**: `Task(ui-design-agent)` × `T × S` tasks in **batched parallel** (max 6 concurrent)
-
-### Step 1: Calculate Batch Execution Plan
-```bash
-bash(mkdir -p {base_path}/prototypes)
-
-# Build task list: T × S combinations
-MAX_PARALLEL = 6
-total_tasks = T × S
-total_batches = ceil(total_tasks / MAX_PARALLEL)
-
-# Initialize batch tracking
-TodoWrite({todos: [
-  {content: "Batch 1/{batches}: Generate 6 tasks", status: "in_progress"},
-  {content: "Batch 2/{batches}: Generate 6 tasks", status: "pending"},
-  ...
-]})
-```
-
-### Step 2: Launch Batched Agent Tasks
-For each batch (up to 6 parallel tasks):
-```javascript
-Task(ui-design-agent): `
-  [TARGET_STYLE_UI_GENERATION_FROM_PROMPT]
-  🎯 ONE component: {target} × Style-{style_id} ({philosophy_name})
-  Generate: {layout_variants} × 2 files (HTML + CSS per layout)
-
-  PROMPT CONTEXT: {target_requirements}  # Extracted from original prompt
-  TARGET: {target} | TYPE: {target_type} | STYLE: {style_id}/{style_variants}
-  BASE_PATH: {base_path}
-  DEVICE: {device_type}
-  ${design_attributes ? "DESIGN_ATTRIBUTES: " + JSON.stringify(design_attributes) : ""}
-
-  ## Reference
-  - Layout inspiration: {layout_inspiration_map[target]}
-  - Design tokens: Read("{base_path}/style-extraction/style-{style_id}/design-tokens.json")
-    Parse ALL token values including:
-    * colors, typography (with combinations), spacing, opacity
-    * border_radius, shadows, breakpoints
-    * component_styles (button, card, input variants)
-  ${design_attributes ? "- Adapt DOM to: density, visual_weight, formality, organic_vs_geometric" : ""}
-
-  ## Generation
-  For EACH layout (1 to {layout_variants}):
-
-  1. HTML: {base_path}/prototypes/{target}-style-{style_id}-layout-N.html
-     - Complete HTML5: <!DOCTYPE>, <head>, <body>
-     - CSS ref: <link href="{target}-style-{style_id}-layout-N.css">
-     - Semantic: <header>, <nav>, <main>, <footer>
-     - A11y: ARIA labels, landmarks, responsive meta
-     - Viewport: <meta name="viewport" content="width=device-width, initial-scale=1.0">
-     - Follow user requirements from prompt
-     ${design_attributes ? `
-     - DOM adaptation:
-       * density='spacious' → flatter hierarchy
-       * density='compact' → deeper nesting
-       * visual_weight='heavy' → extra wrappers
-       * visual_weight='minimal' → direct structure` : ""}
-     - Device-specific: Optimize for {device_type}
-
-  2. CSS: {base_path}/prototypes/{target}-style-{style_id}-layout-N.css
-     - Self-contained: Direct token VALUES (no var())
-     - Use tokens: colors, fonts, spacing, opacity, borders, shadows
-     - IF tokens.component_styles exists: Use component presets for buttons, cards, inputs
-     - IF tokens.typography.combinations exists: Use typography presets for headings and body text
-     - Device-optimized: {device_type} styles
-     ${device_type === 'responsive' ? '- Responsive: Mobile-first @media' : '- Fixed: ' + device_type}
-     ${design_attributes ? `
-     - Token selection: density → spacing, visual_weight → shadows` : ""}
-
-  ## Notes
-  - ✅ Token VALUES directly from design-tokens.json (with typography.combinations, opacity, component_styles support)
-  - ✅ Follow prompt requirements for {target}
-  - ✅ Optimize for {device_type}
-  - ❌ NO var() refs, NO external deps
-  - Layouts structurally DISTINCT
-  - Write files IMMEDIATELY (per layout)
-  - CSS filename MUST match HTML <link href>
-`
-
-# After each batch completes
-TodoWrite: Mark batch completed, next batch in_progress
-```
-
-## Phase 3: Verify & Generate Previews
-
-### Step 1: Verify Generated Files
-```bash
-# Count expected vs found
-bash(ls {base_path}/prototypes/{target}-style-*-layout-*.html | wc -l)
-# Expected: S × L × T × 2
-
-# Validate samples
-Read({base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html)
-# Check: <!DOCTYPE html>, correct CSS href, sufficient CSS length
-```
-
-**Output**: `S × L × T × 2` files verified
-
-### Step 2: Run Preview Generation Script
-```bash
-bash(~/.claude/scripts/ui-generate-preview.sh "{base_path}/prototypes")
-```
-
-**Script generates**:
- `compare.html` (interactive matrix)
- `index.html` (navigation)
- `PREVIEW.md` (instructions)
-
-### Step 3: Verify Preview Files
-```bash
-bash(ls {base_path}/prototypes/compare.html {base_path}/prototypes/index.html {base_path}/prototypes/PREVIEW.md)
-```
-
-**Output**: 3 preview files
-
-## Completion
-
-### Todo Update
-```javascript
-TodoWrite({todos: [
-  {content: "Setup and parse prompt", status: "completed", activeForm: "Parsing prompt"},
-  {content: "Detect token sources", status: "completed", activeForm: "Loading design systems"},
-  {content: "Gather layout inspiration", status: "completed", activeForm: "Researching layouts"},
-  {content: "Batch 1/{batches}: Generate 6 tasks", status: "completed", activeForm: "Generating batch 1"},
-  ... (all batches completed)
-  {content: "Verify files & generate previews", status: "completed", activeForm: "Creating previews"}
-]});
-```
-
-### Output Message
-```
-✅ Prompt-driven batch UI generation complete!
-
-Prompt: {prompt_text}
-
-Configuration:
- Style Variants: {style_variants}
- Layout Variants: {layout_variants}
- Target Type: {target_type}
- Device Type: {device_type}
- Targets: {target_list} ({T} targets)
- Total Prototypes: {S × L × T}
-
-Batch Execution:
- Total tasks: {T × S} (targets × styles)
- Batches: {batches} (max 6 parallel per batch)
- Agent scope: {L} layouts per target×style
- Component isolation: Complete task independence
- Device-specific: All layouts optimized for {device_type}
-
-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: Production-ready (WCAG AA compliant)
-
-Generated Files:
-{base_path}/prototypes/
-├── {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
-3. Read PREVIEW.md
-
-Next: /workflow:ui-design:update
-```
-
-## Simple Bash Commands
-
-### Path Operations
-```bash
-# Find design directory
-bash(find .workflow -type d -name "design-run-*" -printf "%T@ %p\n" | sort -nr | head -1 | cut -d' ' -f2)
-
-# Count style variants
-bash(ls {base_path}/style-extraction/style-* -d | wc -l)
-
-# Check design tokens exist
-bash(test -f {base_path}/style-extraction/style-1/design-tokens.json && echo "valid")
-```
-
-### Validation Commands
-```bash
-# Count generated files
-bash(ls {base_path}/prototypes/{target}-style-*-layout-*.html | wc -l)
-
-# Verify preview
-bash(test -f {base_path}/prototypes/compare.html && echo "exists")
-```
-
-### File Operations
-```bash
-# Create prototypes directory
-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")
-```
-
-## Output Structure
-
-```
-{base_path}/
-├── .intermediates/
-│   └── layout-analysis/
-├── prototypes/
-│   ├── {target}-style-{s}-layout-{l}.html  # Final prototypes
-│   ├── {target}-style-{s}-layout-{l}.css
-│   ├── compare.html
-│   ├── index.html
-│   └── PREVIEW.md
-└── style-extraction/
-    └── style-{s}/
-        ├── design-tokens.json
-        └── style-guide.md
-```
-
-## Error Handling
-
-### Common Errors
-```
-ERROR: No design tokens found
-→ Run /workflow:ui-design:style-extract first
-
-ERROR: No targets extracted from prompt
-→ Use --targets explicitly or rephrase prompt
-
-ERROR: MCP search failed
-→ Check network, retry
-
-ERROR: Batch {N} agent tasks failed
-→ Check agent output, retry specific target×style combinations
-
-ERROR: Script permission denied
-→ chmod +x ~/.claude/scripts/ui-generate-preview.sh
-```
-
-### Recovery Strategies
- **Partial success**: Keep successful target×style combinations
- **Missing design_attributes**: Works without (less style-aware)
- **Invalid tokens**: Validate design-tokens.json structure
- **Failed batch**: Re-run command, only failed combinations will retry
-
-## Quality Checklist
-
- [ ] Prompt clearly describes targets
- [ ] CSS uses direct token values (no var())
- [ ] HTML adapts to design_attributes (if available)
- [ ] Semantic HTML5 structure
- [ ] ARIA attributes present
- [ ] Device-optimized layouts
- [ ] Layouts structurally distinct
- [ ] compare.html works
-
-## Key Features
-
- **Prompt-Driven**: Describe what to build, command extracts targets
- **Target-Style-Centric**: `T×S` agents, each handles `L` layouts
- **Parallel Batching**: Max 6 concurrent agents with progress tracking
- **Component Isolation**: Complete task independence
- **Style-Aware**: HTML adapts to design_attributes
- **Self-Contained CSS**: Direct token values (no var())
- **Device-Specific**: Optimized for desktop/mobile/tablet/responsive
- **Inspiration-Based**: MCP-powered layout research
- **Production-Ready**: Semantic, accessible, responsive
-
-## Integration
-
-**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**: style-extract, explore-auto, imitate-auto outputs
-**Optimization**: Reuses layout inspirations from layout-extract phase, avoiding duplicate MCP searches
-
-## Usage Examples
-
-### Basic: Auto-detection
-```bash
-/workflow:ui-design:batch-generate \
-  --prompt "Dashboard with metric cards and charts"
-
-# Auto: latest design run, extracts "dashboard" target
-# Output: S × L × 1 prototypes
-```
-
-### With Session
-```bash
-/workflow:ui-design:batch-generate \
-  --prompt "Auth pages: login, signup, password reset" \
-  --session WFS-auth
-
-# Uses WFS-auth's design run
-# Extracts: ["login", "signup", "password-reset"]
-# Batches: 2 (if S=3: 9 tasks = 6+3)
-# Output: S × L × 3 prototypes
-```
-
-### Components with Device Type
-```bash
-/workflow:ui-design:batch-generate \
-  --prompt "Mobile UI components: navbar, card, footer" \
-  --target-type component \
-  --device-type mobile
-
-# Mobile-optimized component generation
-# Output: S × L × 3 prototypes
-```
-
-### Large Scale (Multi-batch)
-```bash
-/workflow:ui-design:batch-generate \
-  --prompt "E-commerce site" \
-  --targets "home,shop,product,cart,checkout" \
-  --style-variants 4 \
-  --layout-variants 2
-
-# Tasks: 5 × 4 = 20 (4 batches: 6+6+6+2)
-# Output: 4 × 2 × 5 = 40 prototypes
-```
-
-## Helper Functions Reference
-
-### Target Extraction
-```python
-# extract_targets_from_prompt(prompt_text)
-# Patterns: "Create X and Y", "Generate X, Y, Z pages", "Build X"
-# Returns: ["x", "y", "z"] (normalized lowercase with hyphens)
-
-# detect_target_type(target_list)
-# Keywords: page (home, dashboard, login) vs component (navbar, card, button)
-# Returns: "page" or "component"
-
-# extract_relevant_context_from_prompt(prompt_text, target)
-# Extracts sentences mentioning specific target
-# Returns: Relevant context string
-```
-
-## Batch Execution Details
-
-### Parallel Control
- **Max concurrent**: 6 agents per batch
- **Task distribution**: T × S tasks = ceil(T×S/6) batches
- **Progress tracking**: TodoWrite per-batch status
- **Examples**:
-  - 3 tasks → 1 batch
-  - 9 tasks → 2 batches (6+3)
-  - 20 tasks → 4 batches (6+6+6+2)
-
-### Performance
-| Tasks | Batches | Est. Time | Efficiency |
-|-------|---------|-----------|------------|
-| 1-6   | 1       | 3-5 min   | 100%       |
-| 7-12  | 2       | 6-10 min  | ~85%       |
-| 13-18 | 3       | 9-15 min  | ~80%       |
-| 19-30 | 4-5     | 12-25 min | ~75%       |
-
-### Optimization Tips
-1. **Reduce tasks**: Fewer targets or styles
-2. **Adjust layouts**: L=2 instead of L=3 for faster iteration
-3. **Stage generation**: Core pages first, secondary pages later
-
-## Notes
-
- **Prompt quality**: Clear descriptions improve target extraction
- **Token sources**: Consolidated (production) or proposed (fast-track)
- **Batch parallelism**: Max 6 concurrent for stability
- **Scalability**: Tested up to 30+ tasks (5+ batches)
- **Dependencies**: MCP web search, ui-generate-preview.sh script
--- a/.claude/commands/workflow/ui-design/explore-auto.md
+++ b/.claude/commands/workflow/ui-design/explore-auto.md
@@ -1,7 +1,7 @@
 ---
 name: explore-auto
-description: Exploratory UI design workflow with style-centric batch generation, creates design variants from prompts/images with parallel execution
-argument-hint: "[--prompt "<desc>"] [--images "<glob>"] [--targets "<list>"] [--target-type "page|component"] [--session <id>] [--style-variants <count>] [--layout-variants <count>] [--interactive] [--batch-plan]""
+description: Interactive exploratory UI design workflow with style-centric batch generation, creates design variants from prompts/images with parallel execution and user selection
+argument-hint: "[--prompt "<desc>"] [--images "<glob>"] [--targets "<list>"] [--target-type "page|component"] [--session <id>] [--style-variants <count>] [--layout-variants <count>] [--batch-plan]""
 allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*), Task(conceptual-planning-agent)
 ---

@@ -60,7 +60,6 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
 - `--prompt "<description>"`: Design style and target description
 - `--style-variants <count>`: Style variants (default: inferred from prompt or 3, range: 1-5)
 - `--layout-variants <count>`: Layout variants per style (default: inferred or 3, range: 1-5)
- `--interactive`: Enable interactive multi-selection mode for variants (default: false - non-interactive batch generation)
 - `--batch-plan`: Auto-generate implementation tasks after design-update

 **Legacy Parameters** (maintained for backward compatibility):
@@ -156,10 +155,8 @@ ELSE:

 VALIDATE: 1 <= style_variants <= 5, 1 <= layout_variants <= 5

-# Interactive mode (default: disabled - non-interactive batch generation)
-interactive_mode = --interactive !== undefined ? --interactive : false  # Default to false
-
-REPORT: "🎯 Interactive mode: {interactive_mode ? 'enabled' : 'disabled'}"
+# Interactive mode (always enabled)
+interactive_mode = true  # Always use interactive mode
 ```

 ### Phase 0a-2: Device Type Inference
@@ -396,8 +393,7 @@ IF design_source == "visual_only" OR needs_visual_supplement:
    command = "/workflow:ui-design:style-extract --base-path \"{base_path}\" " +
              (--images ? "--images \"{images}\" " : "") +
              (--prompt ? "--prompt \"{prompt}\" " : "") +
-              "--variants {style_variants}" +
-              (interactive_mode ? " --interactive" : "")
+              "--variants {style_variants} --interactive"
    SlashCommand(command)
 ELSE:
    REPORT: "✅ Phase 1: Style (Using Code Import)"
@@ -426,8 +422,7 @@ IF (design_source == "visual_only" OR needs_visual_supplement) OR (NOT layout_co
    command = "/workflow:ui-design:layout-extract --base-path \"{base_path}\" " +
              (--images ? "--images \"{images}\" " : "") +
              (--prompt ? "--prompt \"{prompt}\" " : "") +
-              "--targets \"{targets_string}\" --variants {layout_variants} --device-type \"{device_type}\"" +
-              (interactive_mode ? " --interactive" : "")
+              "--targets \"{targets_string}\" --variants {layout_variants} --device-type \"{device_type}\" --interactive"
    SlashCommand(command)
 ELSE:
    REPORT: "✅ Phase 2.5: Layout (Using Code Import)"
--- a/.claude/commands/workflow/ui-design/generate.md
+++ b/.claude/commands/workflow/ui-design/generate.md
@@ -1,6 +1,6 @@
 ---
 name: generate
-description: Assemble UI prototypes by combining layout templates with design tokens, pure assembler without new content generation
+description: Assemble UI prototypes by combining layout templates with design tokens (default animation support), pure assembler without new content generation
 argument-hint: [--base-path <path>] [--session <id>]
 allowed-tools: TodoWrite(*), Read(*), Write(*), Task(ui-design-agent), Bash(*)
 ---
@@ -86,14 +86,30 @@ ELSE:

 ## Phase 2: Assembly (Agent)

-**Executor**: `Task(ui-design-agent)` × `T × S × L` tasks (can be batched)
+**Executor**: `Task(ui-design-agent)` × `T × S × L` tasks in **batched parallel** (max 6 concurrent)

-### Step 1: Launch Assembly Tasks
+### Step 1: Calculate Batch Execution Plan
 ```bash
 bash(mkdir -p {base_path}/prototypes)
+
+# Build task list: T × S × L combinations
+MAX_PARALLEL = 6
+total_tasks = T × S × L
+total_batches = ceil(total_tasks / MAX_PARALLEL)
+
+# Initialize batch tracking
+TodoWrite({todos: [
+  {content: "Setup and validation", status: "completed", activeForm: "Loading design systems"},
+  {content: "Batch 1/{total_batches}: Assemble 6 tasks", status: "in_progress", activeForm: "Assembling batch 1"},
+  {content: "Batch 2/{total_batches}: Assemble 6 tasks", status: "pending", activeForm: "Assembling batch 2"},
+  ... (continue for all batches)
+]})
 ```

-For each `target × style_id × layout_id`:
+### Step 2: Launch Batched Assembly Tasks
+
+For each batch (up to 6 parallel tasks per batch):
+For each `target × style_id × layout_id` in current batch:
 ```javascript
 Task(ui-design-agent): `
  [LAYOUT_STYLE_ASSEMBLY]
@@ -183,9 +199,12 @@ Task(ui-design-agent): `
  - Write files IMMEDIATELY
  - CSS filename MUST match HTML <link href="...">
 `
+
+# After each batch completes
+TodoWrite: Mark current batch completed, next batch in_progress
 ```

-### Step 2: Verify Generated Files
+### Step 3: Verify Generated Files
 ```bash
 # Count expected vs found
 bash(ls {base_path}/prototypes/{target}-style-*-layout-*.html | wc -l)
@@ -222,10 +241,10 @@ bash(ls {base_path}/prototypes/compare.html {base_path}/prototypes/index.html {b
 ```javascript
 TodoWrite({todos: [
  {content: "Setup and validation", status: "completed", activeForm: "Loading design systems"},
-  {content: "Load layout templates", status: "completed", activeForm: "Reading layout templates"},
-  {content: "Assembly (agent)", status: "completed", activeForm: "Assembling prototypes"},
-  {content: "Verify files", status: "completed", activeForm: "Validating output"},
-  {content: "Generate previews", status: "completed", activeForm: "Creating preview files"}
+  {content: "Batch 1/{total_batches}: Assemble 6 tasks", status: "completed", activeForm: "Assembling batch 1"},
+  {content: "Batch 2/{total_batches}: Assemble 6 tasks", status: "completed", activeForm: "Assembling batch 2"},
+  ... (all batches completed)
+  {content: "Verify files & generate previews", status: "completed", activeForm: "Creating previews"}
 ]});
 ```

@@ -240,17 +259,24 @@ Configuration:
 - Targets: {targets}
 - Total Prototypes: {S × L × T}
 - Image Reference: Auto-detected (uses source images when available in layout templates)
+- Animation Support: {has_animations ? 'Enabled (animation-tokens.json loaded)' : 'Not available'}

 Assembly Process:
 - Pure assembly: Combined pre-extracted layouts + design tokens
 - No design decisions: All structure and style pre-defined
 - Assembly tasks: T×S×L = {T}×{S}×{L} = {T×S×L} combinations

+Batch Execution:
+- Total tasks: {T × S × L} assembly combinations
+- Batches: {total_batches} (max 6 parallel per batch)
+- Component isolation: Complete task independence
+
 Quality:
 - Structure: From layout-extract (DOM, CSS layout rules)
 - Style: From style-extract (design tokens)
 - CSS: Token values directly applied (var() replaced)
 - Device-optimized: Layouts match device_type from templates
+- Animations: {has_animations ? 'CSS custom properties and @keyframes injected' : 'Static styles only'}

 Generated Files:
 {base_path}/prototypes/
--- a/.claude/commands/workflow/ui-design/layout-extract.md
+++ b/.claude/commands/workflow/ui-design/layout-extract.md
@@ -319,7 +319,7 @@ Please select your preferred concept for this target.
 }
 ```

-### Step 3: Capture User Selection (Per Target)
+### Step 3: Capture User Selection and Update Options File (Per Target)
 ```javascript
 // Use AskUserQuestion tool for each target (multi-select enabled)
 FOR each target:
@@ -362,35 +362,25 @@ FOR each target:
  }

  REPORT: "✅ Selected {selected_indices.length} layout(s) for {target}"
-```

-### Step 4: Write User Selection File
-```bash
-# Create user-selections directory
-bash(mkdir -p {base_path}/.intermediates/user-selections)
-
-# Calculate total selections across all targets
+// Calculate total selections across all targets
 total_selections = sum([len(selections[t].selected_indices) for t in targets])

-# Create user selection JSON
-selection_data = {
-  "metadata": {
-    "selected_at": "{current_timestamp}",
-    "selection_type": "per_target_multi",
-    "session_id": "{session_id}",
-    "total_selections": total_selections
-  },
+// Update analysis-options.json with user selection (embedded in same file)
+options_file = Read({base_path}/.intermediates/layout-analysis/analysis-options.json)
+options_file.user_selection = {
+  "selected_at": "{current_timestamp}",
+  "selection_type": "per_target_multi",
+  "session_id": "{session_id}",
+  "total_selections": total_selections,
  "selected_variants": selections  // {target: {selected_indices: [...], concept_names: [...]}}
 }

-# Write to standardized selection file
-bash(echo '{selection_data}' > {base_path}/.intermediates/user-selections/layout-extract-selection.json)
-
-# Verify
-bash(test -f {base_path}/.intermediates/user-selections/layout-extract-selection.json && echo "saved")
+// Write updated file back
+Write({base_path}/.intermediates/layout-analysis/analysis-options.json, JSON.stringify(options_file, indent=2))
 ```

-### Step 5: Confirmation Message
+### Step 4: Confirmation Message
 ```
 ✅ Selections recorded! Total: {total_selections} layout(s)

@@ -404,7 +394,7 @@ bash(test -f {base_path}/.intermediates/user-selections/layout-extract-selection
 Proceeding to generate {total_selections} detailed layout template(s)...
 ```

-**Output**: `user-selection.json` with user's multi-selections for all targets
+**Output**: `analysis-options.json` updated with embedded `user_selection` field

 ## Phase 2: Layout Template Generation (Agent Task 2)

@@ -412,14 +402,15 @@ Proceeding to generate {total_selections} detailed layout template(s)...

 ### Step 1: Load User Selections or Default to All
 ```bash
-# Check if user selection file exists (interactive mode)
-IF exists({base_path}/.intermediates/user-selections/layout-extract-selection.json):
-    # Interactive mode: Use user-selected variants
-    selection = Read({base_path}/.intermediates/user-selections/layout-extract-selection.json)
-    selections_per_target = selection.selected_variants
+# Read analysis-options.json which may contain user_selection
+options = Read({base_path}/.intermediates/layout-analysis/analysis-options.json)
+layout_concepts = options.layout_concepts

-    # Calculate total selections
-    total_selections = selection.metadata.total_selections
+# Check if user_selection field exists (interactive mode)
+IF options.user_selection AND options.user_selection.selected_variants:
+    # Interactive mode: Use user-selected variants
+    selections_per_target = options.user_selection.selected_variants
+    total_selections = options.user_selection.total_selections
 ELSE:
    # Non-interactive mode: Generate ALL variants for ALL targets (default behavior)
    selections_per_target = {}
@@ -432,10 +423,6 @@ ELSE:
        }
        total_selections += variants_count

-# Read concept details
-options = Read({base_path}/.intermediates/layout-analysis/analysis-options.json)
-layout_concepts = options.layout_concepts
-
 # Build task list for all selected concepts across all targets
 task_list = []
 FOR each target in targets:
@@ -603,13 +590,12 @@ Generated Templates:

 Intermediate Files:
 - {base_path}/.intermediates/layout-analysis/
-  ├── analysis-options.json (concept proposals)
-  ├── user-selection.json (multi-selections per target)
+  ├── analysis-options.json (concept proposals + user selections embedded)
  {IF dom_structure_available:
  ├── dom-structure-*.json ({len(url_list)} DOM extracts)
  }

-Next: /workflow:ui-design:generate or /workflow:ui-design:batch-generate will combine these structural templates with design systems to produce final prototypes.
+Next: /workflow:ui-design:generate will combine these structural templates with design systems to produce final prototypes.
 ```

 ## Simple Bash Commands
@@ -651,8 +637,7 @@ bash(echo '{json}' > {base_path}/layout-extraction/layout-templates.json)
 {base_path}/
 ├── .intermediates/                    # Intermediate analysis files
 │   └── layout-analysis/
-│       ├── analysis-options.json      # Generated layout concepts
-│       ├── user-selection.json        # User's multi-selections per target
+│       ├── analysis-options.json      # Generated layout concepts + user selections (embedded)
 │       └── dom-structure-{target}.json   # Extracted DOM structure (URL mode only)
 └── layout-extraction/                 # Final layout templates
    └── layout-{target}-{variant}.json # Structural layout templates (one per selected concept)
@@ -757,7 +742,7 @@ ERROR: MCP search failed
 **New Workflow**:
 1. `/workflow:ui-design:style-extract` → Multiple `style-N/design-tokens.json` files (Complete design systems)
 2. `/workflow:ui-design:layout-extract` → Multiple `layout-{target}-{variant}.json` files (Structural templates)
-3. `/workflow:ui-design:generate` or `/workflow:ui-design:batch-generate` (Assembler):
+3. `/workflow:ui-design:generate` (Assembler):
   - **Reads**: All `design-tokens.json` files + all `layout-{target}-{variant}.json` files
   - **Action**: For each style × layout combination:
     1. Build HTML from `dom_structure`
@@ -768,4 +753,4 @@ ERROR: MCP search failed

 **Input**: Reference images, URLs, or text prompts
 **Output**: `layout-{target}-{variant}.json` files for downstream generation commands
-**Next**: `/workflow:ui-design:generate` or `/workflow:ui-design:batch-generate`
+**Next**: `/workflow:ui-design:generate`
--- a/.claude/skills/command-guide/guides/ui-design-workflow-guide.md
+++ b/.claude/skills/command-guide/guides/ui-design-workflow-guide.md
@@ -12,7 +12,6 @@ These commands automate end-to-end processes by chaining specialized sub-command

 - **`/workflow:ui-design:explore-auto`**: For creating *new* designs. Generates multiple style and layout variants from a prompt to explore design directions.
 - **`/workflow:ui-design:imitate-auto`**: For *replicating* existing designs. High-fidelity cloning of target URLs into a reusable design system.
- **`/workflow:ui-design:batch-generate`**: For rapid, high-volume prototype generation based on established design tokens.

 ### 2. Core Extractors (Specialized Analysis)

@@ -156,36 +155,6 @@ Tools for combining components and integrating results.

 ---

-### Workflow D: Batch Generation (High Volume)
-
-**Goal:** Generate multiple UI prototypes based on established design tokens.
-
-**Primary Command:** `batch-generate`
-
-**Steps:**
-
-1. **Prerequisites**: Have `design-tokens.json` ready (from previous extraction or manual creation)
-2. **Initiate**: User runs `/workflow:ui-design:batch-generate --targets "dashboard,settings,profile" --style-variants 2`
-3. **Parallel Generation**: System generates all targets in parallel, applying style variants
-4. **Review**: User reviews generated prototypes
-
-**Example:**
-
-```bash
-/workflow:ui-design:batch-generate \
-  --targets "login-page,dashboard,settings,profile,notifications" \
-  --target-type page \
-  --style-variants 2 \
-  --device-type responsive \
-  --session WFS-004
-```
-
-**Output:**
- 10 HTML prototypes (5 targets × 2 styles)
- All using the same design system for consistency
-
---
-
 ## Architecture & Best Practices

 ### Separation of Concerns
@@ -225,7 +194,7 @@ Generated CSS should primarily use CSS custom properties:

 For high-volume generation:
 - Group tasks by style to minimize context switching
- Use `batch-generate` with multiple targets
+- Use parallel generation with multiple targets
 - Reuse existing layout inspirations

 ### Input Quality Guidelines
@@ -261,14 +230,15 @@ You can run UI design workflows within an existing workflow session:

 ### Combining Workflows

-**Example: Imitation + Custom Variants**
+**Example: Imitation + Custom Extraction**

 ```bash
 # 1. Replicate existing design
 /workflow:ui-design:imitate-auto --url-map "ref:https://example.com"

-# 2. Generate additional variants with batch-generate
-/workflow:ui-design:batch-generate --targets "new-page-1,new-page-2" --style-variants 1
+# 2. Extract additional layouts and generate prototypes
+/workflow:ui-design:layout-extract --targets "new-page-1,new-page-2"
+/workflow:ui-design:generate
 ```

 ### Deep Interactive Capture
@@ -303,7 +273,6 @@ For complex UIs with overlays, modals, or dynamic content:
 ### Orchestrators
 - `/workflow:ui-design:explore-auto` - Create new designs from prompts
 - `/workflow:ui-design:imitate-auto` - Replicate existing designs
- `/workflow:ui-design:batch-generate` - High-volume prototype generation

 ### Extractors
 - `/workflow:ui-design:style-extract` - Extract visual design tokens
@@ -330,7 +299,7 @@ The system is designed to run extraction phases in parallel:

 ### Reuse Intermediates

- `batch-generate` reuses existing layout inspirations
+- Generation commands reuse existing layout inspirations
 - Cached screenshots avoid redundant captures
 - Token files can be versioned and reused

--- a/.claude/skills/command-guide/index/all-commands.json
+++ b/.claude/skills/command-guide/index/all-commands.json
@@ -659,17 +659,6 @@
    "difficulty": "Intermediate",
    "file_path": "workflow/ui-design/animation-extract.md"
  },
-  {
-    "name": "batch-generate",
-    "command": "/workflow:ui-design:batch-generate",
-    "description": "Prompt-driven batch UI generation using target-style-centric parallel execution with design token application",
-    "arguments": "[--targets \"<list>\"] [--target-type \"page|component\"] [--device-type \"desktop|mobile|tablet|responsive\"] [--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]",
-    "category": "workflow",
-    "subcategory": "ui-design",
-    "usage_scenario": "implementation",
-    "difficulty": "Intermediate",
-    "file_path": "workflow/ui-design/batch-generate.md"
-  },
  {
    "name": "capture",
    "command": "/workflow:ui-design:capture",
--- a/.claude/skills/command-guide/index/by-category.json
+++ b/.claude/skills/command-guide/index/by-category.json
@@ -687,17 +687,6 @@
        "difficulty": "Intermediate",
        "file_path": "workflow/ui-design/animation-extract.md"
      },
-      {
-        "name": "batch-generate",
-        "command": "/workflow:ui-design:batch-generate",
-        "description": "Prompt-driven batch UI generation using target-style-centric parallel execution with design token application",
-        "arguments": "[--targets \"<list>\"] [--target-type \"page|component\"] [--device-type \"desktop|mobile|tablet|responsive\"] [--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]",
-        "category": "workflow",
-        "subcategory": "ui-design",
-        "usage_scenario": "implementation",
-        "difficulty": "Intermediate",
-        "file_path": "workflow/ui-design/batch-generate.md"
-      },
      {
        "name": "capture",
        "command": "/workflow:ui-design:capture",
--- a/.claude/skills/command-guide/index/by-use-case.json
+++ b/.claude/skills/command-guide/index/by-use-case.json
@@ -488,17 +488,6 @@
      "difficulty": "Intermediate",
      "file_path": "workflow/tools/test-task-generate.md"
    },
-    {
-      "name": "batch-generate",
-      "command": "/workflow:ui-design:batch-generate",
-      "description": "Prompt-driven batch UI generation using target-style-centric parallel execution with design token application",
-      "arguments": "[--targets \"<list>\"] [--target-type \"page|component\"] [--device-type \"desktop|mobile|tablet|responsive\"] [--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]",
-      "category": "workflow",
-      "subcategory": "ui-design",
-      "usage_scenario": "implementation",
-      "difficulty": "Intermediate",
-      "file_path": "workflow/ui-design/batch-generate.md"
-    },
    {
      "name": "generate",
      "command": "/workflow:ui-design:generate",
--- a/.claude/skills/command-guide/reference/commands/workflow/ui-design/animation-extract.md
+++ b/.claude/skills/command-guide/reference/commands/workflow/ui-design/animation-extract.md
@@ -151,7 +151,7 @@ ELSE:

 **Phase 1 Output**: `animations-{target}.json` (intermediate files)

-## Phase 2: Interactive Animation Specification (Interactive/Fallback Mode)
+## Phase 2: Animation Question Generation (Agent Task 1)

 ### Step 1: Check if Extraction Sufficient

@@ -164,7 +164,7 @@ IF animations_extracted:
    # If sufficient data found, skip interactive mode
    IF total_animations >= 3 OR total_transitions >= 5:
        REPORT: "✅ Sufficient animation data extracted from CSS"
-        SKIP to Phase 3
+        SKIP to Phase 4
    ELSE:
        REPORT: "⚠️ Limited animation data found - launching interactive mode"
        extraction_insufficient = true
@@ -172,168 +172,118 @@ ELSE:
    extraction_insufficient = true
 ```

-### Step 2: Generate Animation Questions (Main Flow)
+### Step 2: Generate Animation Questions Using Agent

-```bash
-# If extraction failed or insufficient, use interactive questioning
-IF extraction_insufficient OR extraction_mode == "interactive":
-    REPORT: "🤔 Interactive animation specification mode"
-    REPORT: "   Context: {has_design_context ? 'Aligning with design tokens' : 'Standalone animation system'}"
-    REPORT: "   Focus: {focus_types}"
+**Executor**: `Task(ui-design-agent)`

-    # Determine question categories based on focus_types
-    question_categories = []
-    IF "all" IN focus_types OR "transitions" IN focus_types:
-        question_categories.append("timing_scale")
-        question_categories.append("easing_philosophy")
+Launch agent to generate context-aware animation questions based on project needs:

-    IF "all" IN focus_types OR "interactions" IN focus_types OR "hover" IN focus_types:
-        question_categories.append("button_interactions")
-        question_categories.append("card_interactions")
-        question_categories.append("input_interactions")
+```javascript
+Task(ui-design-agent): `
+  [ANIMATION_QUESTION_GENERATION_TASK]
+  Generate contextual animation questions based on project context and focus types

-    IF "all" IN focus_types OR "page" IN focus_types:
-        question_categories.append("page_transitions")
+  SESSION: {session_id} | MODE: interactive | BASE_PATH: {base_path}

-    IF "all" IN focus_types OR "loading" IN focus_types:
-        question_categories.append("loading_states")
+  ## Context Analysis
+  - Focus types: {focus_types}
+  - Design context: {has_design_context}
+  - Extracted animations: {animations_extracted ? "Available" : "None"}

-    IF "all" IN focus_types OR "scroll" IN focus_types:
-        question_categories.append("scroll_animations")
+  ## Question Categories to Consider
+  Based on focus_types, include relevant categories:
+  - "all" or "transitions": timing_scale, easing_philosophy
+  - "all" or "interactions" or "hover": button_interactions, card_interactions, input_interactions
+  - "all" or "page": page_transitions
+  - "all" or "loading": loading_states
+  - "all" or "scroll": scroll_animations
+
+  ## Generate Question Structure
+  For each applicable category, create question with:
+  1. **Category ID** (e.g., "timing_scale", "button_interactions")
+  2. **Question text** (in Chinese, clear and concise)
+  3. **Options** (2-5 options per question):
+     - Option key (a, b, c, d, e)
+     - Option label (brief description)
+     - Option details (detailed explanation with technical specs)
+     - Recommended scenarios (when to use this option)
+
+  ## Output
+  Write single JSON file: {base_path}/.intermediates/animation-analysis/question-options.json
+
+  Use schema:
+  {
+    "metadata": {
+      "generated_at": "<timestamp>",
+      "focus_types": ["..."],
+      "total_questions": <count>
+    },
+    "questions": [
+      {
+        "id": 1,
+        "category": "timing_scale",
+        "question": "您的设计需要什么样的过渡速度？",
+        "options": [
+          {
+            "key": "a",
+            "label": "快速敏捷",
+            "details": "100-200ms 过渡，适合工具型应用和即时反馈场景",
+            "duration_range": "100-200ms"
+          },
+          ...
+        ]
+      },
+      ...
+    ]
+  }
+
+  CRITICAL: Use Write() tool immediately after generating complete JSON
+`
 ```

-### Step 3: Output Questions in Text Format (Main Flow)
+### Step 3: Verify Question File Created
+
+```bash
+bash(test -f {base_path}/.intermediates/animation-analysis/question-options.json && echo "created")
+
+# Quick validation
+bash(cat {base_path}/.intermediates/animation-analysis/question-options.json | grep -q "questions" && echo "valid")
+```
+
+**Output**: `question-options.json` with context-aware questions
+
+---
+
+## Phase 3: Interactive Animation Specification (User Interaction)
+
+### Step 1: Load Generated Questions
+
+```bash
+# Read generated questions from JSON file
+question_data = Read({base_path}/.intermediates/animation-analysis/question-options.json)
+
+REPORT: "🤔 Interactive animation specification mode"
+REPORT: "   Context: {has_design_context ? 'Aligning with design tokens' : 'Standalone animation system'}"
+REPORT: "   Questions: {question_data.metadata.total_questions} questions loaded"
+REPORT: "   Focus: {question_data.metadata.focus_types}"
+```
+
+### Step 2: Present Questions to User

 ```markdown
-# Generate and output structured questions
+# Display questions from loaded JSON
 REPORT: ""
 REPORT: "===== 动画规格交互式配置 ====="
 REPORT: ""

-question_number = 1
-questions_output = []
+FOR each question IN question_data.questions:
+    REPORT: "【问题{question.id} - {question.category}】{question.question}"

-# Q1: Timing Scale (if included)
-IF "timing_scale" IN question_categories:
-    REPORT: "【问题{question_number} - 时间尺度】您的设计需要什么样的过渡速度？"
-    REPORT: "a) 快速敏捷"
-    REPORT: "   说明：100-200ms 过渡，适合工具型应用和即时反馈场景"
-    REPORT: "b) 平衡适中"
-    REPORT: "   说明：200-400ms 过渡，通用选择，符合多数用户预期"
-    REPORT: "c) 流畅舒缓"
-    REPORT: "   说明：400-600ms 过渡，适合品牌展示和沉浸式体验"
-    REPORT: "d) 自定义"
-    REPORT: "   说明：需要指定具体数值和使用场景"
-    REPORT: ""
-    questions_output.append({id: question_number, category: "timing_scale", options: ["a", "b", "c", "d"]})
-    question_number += 1
+    FOR each option IN question.options:
+        REPORT: "{option.key}) {option.label}"
+        REPORT: "   说明：{option.details}"

-# Q2: Easing Philosophy (if included)
-IF "easing_philosophy" IN question_categories:
-    REPORT: "【问题{question_number} - 缓动风格】哪种缓动曲线符合您的品牌调性？"
-    REPORT: "a) 线性匀速"
-    REPORT: "   说明：恒定速度，技术感和精确性，适合数据可视化"
-    REPORT: "b) 快入慢出"
-    REPORT: "   说明：快速启动自然减速，最接近物理世界，通用推荐"
-    REPORT: "c) 慢入慢出"
-    REPORT: "   说明：平滑对称，精致优雅，适合高端品牌"
-    REPORT: "d) 弹性效果"
-    REPORT: "   说明：Spring/Bounce 回弹，活泼现代，适合互动性强的应用"
    REPORT: ""
-    questions_output.append({id: question_number, category: "easing_philosophy", options: ["a", "b", "c", "d"]})
-    question_number += 1
-
-# Q3-5: Interaction Animations (button, card, input - if included)
-IF "button_interactions" IN question_categories:
-    REPORT: "【问题{question_number} - 按钮交互】按钮悬停/点击时如何反馈？"
-    REPORT: "a) 微妙变化"
-    REPORT: "   说明：仅颜色/透明度变化，适合简约设计"
-    REPORT: "b) 抬升效果"
-    REPORT: "   说明：轻微缩放+阴影加深，增强物理感知"
-    REPORT: "c) 滑动移位"
-    REPORT: "   说明：Transform translateY，视觉引导明显"
-    REPORT: "d) 无动画"
-    REPORT: "   说明：静态交互，性能优先或特定品牌要求"
-    REPORT: ""
-    questions_output.append({id: question_number, category: "button_interactions", options: ["a", "b", "c", "d"]})
-    question_number += 1
-
-IF "card_interactions" IN question_categories:
-    REPORT: "【问题{question_number} - 卡片交互】卡片悬停时的动画效果？"
-    REPORT: "a) 阴影加深"
-    REPORT: "   说明：Box-shadow 变化，层次感增强"
-    REPORT: "b) 上浮效果"
-    REPORT: "   说明：Transform translateY(-4px)，明显的空间层次"
-    REPORT: "c) 缩放放大"
-    REPORT: "   说明：Scale(1.02)，突出焦点内容"
-    REPORT: "d) 无动画"
-    REPORT: "   说明：静态卡片，性能或设计考量"
-    REPORT: ""
-    questions_output.append({id: question_number, category: "card_interactions", options: ["a", "b", "c", "d"]})
-    question_number += 1
-
-IF "input_interactions" IN question_categories:
-    REPORT: "【问题{question_number} - 表单交互】输入框是否需要微交互反馈？"
-    REPORT: "a) 聚焦动画"
-    REPORT: "   说明：边框/阴影过渡，清晰的状态指示"
-    REPORT: "b) 错误抖动"
-    REPORT: "   说明：水平shake动画，错误提示更明显"
-    REPORT: "c) 成功勾选"
-    REPORT: "   说明：Checkmark 动画，完成反馈"
-    REPORT: "d) 全部包含"
-    REPORT: "   说明：聚焦+错误+成功的完整反馈体系"
-    REPORT: "e) 无微交互"
-    REPORT: "   说明：标准表单，无额外动画"
-    REPORT: ""
-    questions_output.append({id: question_number, category: "input_interactions", options: ["a", "b", "c", "d", "e"]})
-    question_number += 1
-
-# Q6: Page Transitions (if included)
-IF "page_transitions" IN question_categories:
-    REPORT: "【问题{question_number} - 页面过渡】页面/路由切换是否需要过渡动画？"
-    REPORT: "a) 淡入淡出"
-    REPORT: "   说明：Crossfade 效果，平滑过渡不突兀"
-    REPORT: "b) 滑动切换"
-    REPORT: "   说明：Swipe left/right，方向性导航"
-    REPORT: "c) 缩放过渡"
-    REPORT: "   说明：Scale in/out，空间层次感"
-    REPORT: "d) 无过渡"
-    REPORT: "   说明：即时切换，性能优先"
-    REPORT: ""
-    questions_output.append({id: question_number, category: "page_transitions", options: ["a", "b", "c", "d"]})
-    question_number += 1
-
-# Q7: Loading States (if included)
-IF "loading_states" IN question_categories:
-    REPORT: "【问题{question_number} - 加载状态】加载时使用何种动画风格？"
-    REPORT: "a) 旋转加载器"
-    REPORT: "   说明：Spinner 圆形旋转，通用加载指示"
-    REPORT: "b) 脉冲闪烁"
-    REPORT: "   说明：Opacity pulse，轻量级反馈"
-    REPORT: "c) 骨架屏"
-    REPORT: "   说明：Shimmer effect，内容占位预览"
-    REPORT: "d) 进度条"
-    REPORT: "   说明：Linear fill，进度量化展示"
-    REPORT: ""
-    questions_output.append({id: question_number, category: "loading_states", options: ["a", "b", "c", "d"]})
-    question_number += 1
-
-# Q8: Scroll Animations (if included)
-IF "scroll_animations" IN question_categories:
-    REPORT: "【问题{question_number} - 滚动动画】元素是否在滚动时触发动画？"
-    REPORT: "a) 淡入出现"
-    REPORT: "   说明：Opacity 0→1，渐进式内容呈现"
-    REPORT: "b) 上滑出现"
-    REPORT: "   说明：TranslateY + fade，方向性引导"
-    REPORT: "c) 缩放淡入"
-    REPORT: "   说明：Scale 0.9→1 + fade，聚焦效果"
-    REPORT: "d) 交错延迟"
-    REPORT: "   说明：Stagger 序列动画，列表渐次呈现"
-    REPORT: "e) 无滚动动画"
-    REPORT: "   说明：静态内容，性能或可访问性考量"
-    REPORT: ""
-    questions_output.append({id: question_number, category: "scroll_animations", options: ["a", "b", "c", "d", "e"]})
-    question_number += 1

 REPORT: "支持格式："
 REPORT: "- 空格分隔：1a 2b 3c"
@@ -343,7 +293,7 @@ REPORT: ""
 REPORT: "请输入您的选择："
 ```

-### Step 4: Wait for User Input (Main Flow)
+### Step 3: Wait for User Input (Main Flow)

 ```javascript
 # Wait for user input
@@ -353,7 +303,7 @@ user_raw_input = WAIT_FOR_USER_INPUT()
 REPORT: "收到输入: {user_raw_input}"
 ```

-### Step 5: Parse User Answers (Main Flow)
+### Step 4: Parse User Answers and Update JSON

 ```javascript
 # Intelligent input parsing (support multiple formats)
@@ -361,7 +311,7 @@ answers = {}

 # Parse input using intelligent matching
 # Support formats: "1a 2b 3c", "1a,2b,3c", "1a 2b,3c"
-parsed_responses = PARSE_USER_INPUT(user_raw_input, questions_output)
+parsed_responses = PARSE_USER_INPUT(user_raw_input, question_data.questions)

 # Validate parsing
 IF parsed_responses.is_valid:
@@ -371,7 +321,7 @@ IF parsed_responses.is_valid:
        selected_option = response.option

        # Find category for this question
-        FOR question IN questions_output:
+        FOR question IN question_data.questions:
            IF question.id == question_id:
                category = question.category
                answers[category] = selected_option
@@ -380,105 +330,26 @@ IF parsed_responses.is_valid:
 ELSE:
    REPORT: "❌ 输入格式无法识别，请参考格式示例重新输入："
    REPORT: "   示例：1a 2b 3c 4d"
-    # Return to Step 3 for re-input
-    GOTO Step 3
-```
+    # Return to Step 2 for re-input
+    GOTO Step 2

-### Step 6: Write Animation Specification (Main Flow)
-
-```javascript
-# Map user choices to specification structure
-specification = {
-    "metadata": {
-        "source": "interactive",
-        "timestamp": NOW(),
-        "focus_types": focus_types,
-        "has_design_context": has_design_context
-    },
-    "timing_scale": MAP_TIMING_SCALE(answers.timing_scale),
-    "easing_philosophy": MAP_EASING_PHILOSOPHY(answers.easing_philosophy),
-    "interactions": {
-        "button": MAP_BUTTON_INTERACTION(answers.button_interactions),
-        "card": MAP_CARD_INTERACTION(answers.card_interactions),
-        "input": MAP_INPUT_INTERACTION(answers.input_interactions)
-    },
-    "page_transitions": MAP_PAGE_TRANSITIONS(answers.page_transitions),
-    "loading_animations": MAP_LOADING_STATES(answers.loading_states),
-    "scroll_animations": MAP_SCROLL_ANIMATIONS(answers.scroll_animations)
+// Update question-options.json with user selection
+question_data.user_selection = {
+  "selected_at": NOW(),
+  "answers": answers
 }

-# Mapping functions (inline logic)
-FUNCTION MAP_TIMING_SCALE(option):
-    SWITCH option:
-        CASE "a": RETURN {scale: "fast", base_duration: "150ms", range: "100-200ms"}
-        CASE "b": RETURN {scale: "balanced", base_duration: "300ms", range: "200-400ms"}
-        CASE "c": RETURN {scale: "smooth", base_duration: "500ms", range: "400-600ms"}
-        CASE "d": RETURN {scale: "custom", base_duration: "300ms", note: "User to provide values"}
+// Write updated file back
+Write({base_path}/.intermediates/animation-analysis/question-options.json, JSON.stringify(question_data, indent=2))

-FUNCTION MAP_EASING_PHILOSOPHY(option):
-    SWITCH option:
-        CASE "a": RETURN {style: "linear", curve: "linear"}
-        CASE "b": RETURN {style: "ease-out", curve: "cubic-bezier(0, 0, 0.2, 1)"}
-        CASE "c": RETURN {style: "ease-in-out", curve: "cubic-bezier(0.4, 0, 0.2, 1)"}
-        CASE "d": RETURN {style: "spring", curve: "cubic-bezier(0.34, 1.56, 0.64, 1)"}
-
-FUNCTION MAP_BUTTON_INTERACTION(option):
-    SWITCH option:
-        CASE "a": RETURN {type: "subtle", properties: ["color", "background-color", "opacity"]}
-        CASE "b": RETURN {type: "lift", properties: ["transform", "box-shadow"], transform: "scale(1.02)"}
-        CASE "c": RETURN {type: "slide", properties: ["transform"], transform: "translateY(-2px)"}
-        CASE "d": RETURN {type: "none", properties: []}
-
-FUNCTION MAP_CARD_INTERACTION(option):
-    SWITCH option:
-        CASE "a": RETURN {type: "shadow", properties: ["box-shadow"]}
-        CASE "b": RETURN {type: "float", properties: ["transform", "box-shadow"], transform: "translateY(-4px)"}
-        CASE "c": RETURN {type: "scale", properties: ["transform"], transform: "scale(1.02)"}
-        CASE "d": RETURN {type: "none", properties: []}
-
-FUNCTION MAP_INPUT_INTERACTION(option):
-    SWITCH option:
-        CASE "a": RETURN {enabled: ["focus"], focus: {properties: ["border-color", "box-shadow"]}}
-        CASE "b": RETURN {enabled: ["error"], error: {animation: "shake", keyframes: "translateX"}}
-        CASE "c": RETURN {enabled: ["success"], success: {animation: "checkmark", keyframes: "draw"}}
-        CASE "d": RETURN {enabled: ["focus", "error", "success"]}
-        CASE "e": RETURN {enabled: []}
-
-FUNCTION MAP_PAGE_TRANSITIONS(option):
-    SWITCH option:
-        CASE "a": RETURN {enabled: true, style: "fade", animation: "fadeIn/fadeOut"}
-        CASE "b": RETURN {enabled: true, style: "slide", animation: "slideLeft/slideRight"}
-        CASE "c": RETURN {enabled: true, style: "zoom", animation: "zoomIn/zoomOut"}
-        CASE "d": RETURN {enabled: false}
-
-FUNCTION MAP_LOADING_STATES(option):
-    SWITCH option:
-        CASE "a": RETURN {style: "spinner", animation: "rotate", keyframes: "360deg"}
-        CASE "b": RETURN {style: "pulse", animation: "pulse", keyframes: "opacity"}
-        CASE "c": RETURN {style: "skeleton", animation: "shimmer", keyframes: "gradient-shift"}
-        CASE "d": RETURN {style: "progress", animation: "fill", keyframes: "width"}
-
-FUNCTION MAP_SCROLL_ANIMATIONS(option):
-    SWITCH option:
-        CASE "a": RETURN {enabled: true, style: "fade", animation: "fadeIn"}
-        CASE "b": RETURN {enabled: true, style: "slideUp", animation: "slideUp", transform: "translateY(20px)"}
-        CASE "c": RETURN {enabled: true, style: "scaleIn", animation: "scaleIn", transform: "scale(0.9)"}
-        CASE "d": RETURN {enabled: true, style: "stagger", animation: "fadeIn", stagger_delay: "100ms"}
-        CASE "e": RETURN {enabled: false}
-
-# Write specification file
-output_path = "{base_path}/.intermediates/animation-analysis/animation-specification.json"
-Write(output_path, JSON.stringify(specification, indent=2))
-
-REPORT: "✅ Animation specification saved to {output_path}"
-REPORT: "   Proceeding to token synthesis..."
+REPORT: "✅ Updated question-options.json with user selection"
 ```

 ---

-**Phase 2 Output**: `animation-specification.json` (user preferences)
+**Phase 3 Output**: Updated `question-options.json` with user answers embedded

-## Phase 3: Animation Token Synthesis (Agent - No User Interaction)
+## Phase 4: Animation Token Synthesis (Agent - No User Interaction)

 **Executor**: `Task(ui-design-agent)` for token generation

@@ -494,12 +365,17 @@ IF animations_extracted:
        IF exists({base_path}/.intermediates/animation-analysis/animations-{target}.json):
            extracted_animations.append(Read(file))

-user_specification = null
-IF exists({base_path}/.intermediates/animation-analysis/animation-specification.json):
-    user_specification = Read(file)
-    REPORT: "✅ Loaded user specification from Phase 2"
+# Read user answers from question-options.json
+question_data = null
+IF exists({base_path}/.intermediates/animation-analysis/question-options.json):
+    question_data = Read({base_path}/.intermediates/animation-analysis/question-options.json)
+    IF question_data.user_selection:
+        REPORT: "✅ Loaded user answers from question-options.json"
+    ELSE:
+        REPORT: "⚠️ No user selection found in question-options.json"
+        question_data = null
 ELSE:
-    REPORT: "⚠️ No user specification found - using extracted CSS only"
+    REPORT: "⚠️ No question-options.json found - using extracted CSS only"

 design_tokens = null
 IF has_design_context:
@@ -524,9 +400,9 @@ Task(ui-design-agent): `
  1. **Extracted CSS Animations** (if available):
     ${extracted_animations.length > 0 ? JSON.stringify(extracted_animations) : "None - skip CSS data"}

-  2. **User Specification** (REQUIRED if Phase 2 ran):
-     File: {base_path}/.intermediates/animation-analysis/animation-specification.json
-     ${user_specification ? "Status: ✅ Found - READ this file for user choices" : "Status: ⚠️ Not found - use CSS extraction only"}
+  2. **User Answers** (REQUIRED if Phase 2-3 ran):
+     File: {base_path}/.intermediates/animation-analysis/question-options.json
+     ${question_data ? "Status: ✅ Found - READ this file for user choices in user_selection field" : "Status: ⚠️ Not found - use CSS extraction only"}

  3. **Design Tokens Context** (for alignment):
     ${design_tokens ? JSON.stringify(design_tokens) : "None - standalone animation system"}
@@ -534,13 +410,13 @@ Task(ui-design-agent): `
  ## Synthesis Rules

  ### Priority System
-  1. User specification from animation-specification.json (highest priority)
+  1. User answers from question-options.json user_selection field (highest priority)
  2. Extracted CSS values from animations-*.json (medium priority)
  3. Industry best practices (fallback)

  ### Duration Normalization
-  - IF user_specification.timing_scale EXISTS:
-      Use user's chosen scale (fast/balanced/smooth/custom)
+  - IF question_data.user_selection.answers.timing_scale EXISTS:
+      Map user's answer to duration scale using question_data.questions definitions
  - ELSE IF extracted CSS durations available:
      Cluster extracted durations into 3-5 semantic scales
  - ELSE:
@@ -548,8 +424,8 @@ Task(ui-design-agent): `
  - Align with design token spacing scale if available

  ### Easing Standardization
-  - IF user_specification.easing_philosophy EXISTS:
-      Use user's chosen philosophy (linear/ease-out/ease-in-out/spring)
+  - IF question_data.user_selection.answers.easing_philosophy EXISTS:
+      Map user's answer to easing curve using question_data.questions definitions
  - ELSE IF extracted CSS easings available:
      Identify common easing functions from CSS
  - ELSE:
@@ -566,17 +442,17 @@ Task(ui-design-agent): `
  - **page_transitions**: Route/view change animations (if user enabled)
  - **scroll_animations**: Scroll-triggered animations (if user enabled)

-  ### User Specification Integration
-  IF user_specification EXISTS:
-    - Map user choices to token values:
-      * timing_scale → duration values
-      * easing_philosophy → easing curves
-      * interactions.button → interactions.button-hover token
-      * interactions.card → interactions.card-hover token
-      * interactions.input → micro-interaction tokens
-      * page_transitions → page_transitions tokens
-      * loading_animations → loading state tokens
-      * scroll_animations → scroll_animations tokens
+  ### User Answers Integration
+  IF question_data.user_selection EXISTS:
+    - Map user answers to token values using question definitions:
+      * answers.timing_scale → duration values (use question options for specs)
+      * answers.easing_philosophy → easing curves (use question options for specs)
+      * answers.button_interactions → interactions.button-hover token
+      * answers.card_interactions → interactions.card-hover token
+      * answers.input_interactions → micro-interaction tokens
+      * answers.page_transitions → page_transitions tokens
+      * answers.loading_states → loading state tokens
+      * answers.scroll_animations → scroll_animations tokens

  ## Generate Files

@@ -678,7 +554,7 @@ Task(ui-design-agent): `
  - animation-guide.md: {base_path}/animation-extraction/animation-guide.md

  ## Critical Requirements
-  - ✅ READ animation-specification.json if it exists (from Phase 2)
+  - ✅ READ question-options.json if it exists (from Phase 2-3)
  - ✅ Use Write() tool immediately for both files
  - ✅ All tokens use CSS Custom Property format: var(--duration-fast)
  - ✅ Include prefers-reduced-motion media query guidance
@@ -690,35 +566,9 @@ Task(ui-design-agent): `

 ---

-**Phase 3 Output**: `animation-tokens.json` + `animation-guide.md`
+**Phase 4 Output**: `animation-tokens.json` + `animation-guide.md`

-### Step 3: Store User Selection Metadata (If Interactive Mode Used)
-
-```bash
-# If interactive mode was used, save selection metadata for orchestrator
-IF extraction_mode == "interactive" AND exists({base_path}/.intermediates/animation-analysis/animation-specification.json):
-    # Create user-selections directory
-    bash(mkdir -p {base_path}/.intermediates/user-selections)
-
-    # Read specification to extract metadata
-    specification = Read({base_path}/.intermediates/animation-analysis/animation-specification.json)
-
-    # Create selection metadata (for orchestrator compatibility)
-    selection_metadata = {
-        "metadata": {
-            "selected_at": NOW(),
-            "selection_type": "interactive_questionnaire",
-            "mode": "interactive"
-        },
-        "selected_variants": [1],  // Always 1 for interactive mode (single result)
-        "specification": specification.metadata
-    }
-
-    # Write to standardized selection file
-    Write({base_path}/.intermediates/user-selections/animation-extract-selection.json, JSON.stringify(selection_metadata, indent=2))
-```
-
-## Phase 4: Verify Output
+## Phase 5: Verify Output

 ### Step 1: Check Files Created

@@ -748,7 +598,8 @@ bash(ls -lh {base_path}/animation-extraction/)
 TodoWrite({todos: [
  {content: "Setup and input validation", status: "completed", activeForm: "Validating inputs"},
  {content: "CSS animation extraction (auto mode)", status: "completed", activeForm: "Extracting from CSS"},
-  {content: "Interactive specification (main flow)", status: "completed", activeForm: "Collecting user input in main flow"},
+  {content: "Question generation (agent)", status: "completed", activeForm: "Generating questions"},
+  {content: "Interactive specification (user input)", status: "completed", activeForm: "Collecting user answers"},
  {content: "Animation token synthesis (agent - no interaction)", status: "completed", activeForm: "Generating tokens via agent"},
  {content: "Verify output files", status: "completed", activeForm: "Verifying files"}
 ]});
@@ -766,8 +617,8 @@ Configuration:
  {IF animations_extracted:
  - ✅ CSS extracted from {len(url_list)} URL(s)
  }
-  {IF user_specification:
-  - ✅ User specification via interactive mode (main flow)
+  {IF question_data AND question_data.user_selection:
+  - ✅ User answers via interactive mode (agent-generated questions)
  }
  {IF has_design_context:
  - ✅ Aligned with existing design tokens
@@ -778,13 +629,15 @@ Generated Files:
 ├── animation-tokens.json      # Production-ready animation tokens
 └── animation-guide.md          # Usage guidelines and examples

-{IF animations_extracted:
+{IF animations_extracted OR question_data:
 Intermediate Analysis:
 {base_path}/.intermediates/animation-analysis/
+{IF animations_extracted:
 ├── animations-*.json           # Extracted CSS data ({len(url_list)} files)
 }
-{IF user_specification:
-└── animation-specification.json # User preferences
+{IF question_data:
+└── question-options.json       # Generated questions + user answers
+}
 }

 Extracted Data Summary:
@@ -842,7 +695,7 @@ bash(ls {base_path}/animation-extraction/)
 ├── .intermediates/                  # Intermediate analysis files
 │   └── animation-analysis/
 │       ├── animations-{target}.json      # Extracted CSS (auto mode)
-│       └── animation-specification.json  # User input (interactive mode)
+│       └── question-options.json         # Generated questions + user answers (interactive mode)
 └── animation-extraction/            # Final animation tokens
    ├── animation-tokens.json        # Production-ready animation tokens
    └── animation-guide.md            # Usage guide and examples
@@ -913,12 +766,13 @@ ERROR: Invalid cubic-bezier values

 - **Auto-Trigger CSS Extraction** - Automatically extracts animations when --urls provided
 - **Hybrid Strategy** - Combines CSS extraction with interactive specification
- **Main Flow Interaction** - User questions in main flow, agent only for token synthesis
+- **Agent-Generated Questions** - Context-aware questions generated by agent (Phase 2)
+- **User Interaction** - User answers questions in main flow (Phase 3)
 - **Intelligent Fallback** - Gracefully handles extraction failures
 - **Context-Aware** - Aligns with existing design tokens
 - **Production-Ready** - CSS var() format, accessibility support
 - **Comprehensive Coverage** - Transitions, keyframes, interactions, scroll animations
- **Separated Concerns** - User decisions (Phase 2 main flow) → Token generation (Phase 3 agent)
+- **Separated Concerns** - Question generation (Phase 2 agent) → User answers (Phase 3) → Token generation (Phase 4 agent)

 ## Integration

--- a/.claude/skills/command-guide/reference/commands/workflow/ui-design/batch-generate.md
+++ b/.claude/skills/command-guide/reference/commands/workflow/ui-design/batch-generate.md
@@ -1,476 +0,0 @@
---
-name: batch-generate
-description: Prompt-driven batch UI generation using target-style-centric parallel execution with design token application
-argument-hint: [--targets "<list>"] [--target-type "page|component"] [--device-type "desktop|mobile|tablet|responsive"] [--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]
-allowed-tools: TodoWrite(*), Read(*), Write(*), Task(ui-design-agent), Bash(*), mcp__exa__web_search_exa(*)
---
-
-# Batch Generate UI Prototypes (/workflow:ui-design:batch-generate)
-
-## Overview
-Prompt-driven UI generation with intelligent target extraction and **target-style-centric batch execution**. Each agent handles all layouts for one target × style combination.
-
-**Strategy**: Prompt → Targets → Batched Generation
- **Prompt-driven**: Describe what to build, command extracts targets
- **Agent scope**: Each of `T × S` agents generates `L` layouts
- **Parallel batching**: Max 6 concurrent agents for optimal throughput
- **Component isolation**: Complete task independence
- **Style-aware**: HTML adapts to design_attributes
- **Self-contained CSS**: Direct token values (no var() refs)
-
-**Supports**: Pages (full layouts) and components (isolated elements)
-
-## Phase 1: Setup & Validation
-
-### Step 1: Parse Prompt & Resolve Configuration
-```bash
-# Parse required parameters
-prompt_text = --prompt
-device_type = --device-type OR "responsive"
-
-# Extract targets from prompt
-IF --targets:
-    target_list = split_and_clean(--targets)
-ELSE:
-    target_list = extract_targets_from_prompt(prompt_text)  # See helpers
-    IF NOT target_list: target_list = ["home"]  # Fallback
-
-# Detect target type
-target_type = --target-type OR detect_target_type(target_list)
-
-# Resolve base path
-IF --base-path:
-    base_path = --base-path
-ELSE IF --session:
-    relative_path=$(find .workflow/WFS-{session} -type d -name "design-run-*" -printf "%T@ %p\n" | sort -nr | head -1 | cut -d' ' -f2)
-    base_path=$(cd "$relative_path" && pwd)
-ELSE:
-    relative_path=$(find .workflow -type d -name "design-run-*" -printf "%T@ %p\n" | sort -nr | head -1 | cut -d' ' -f2)
-    base_path=$(cd "$relative_path" && pwd)
-
-# Verify absolute path
-bash(test -d "$base_path" && echo "✓ Base path: $base_path" || echo "✗ Path not found")
-
-# Get variant counts
-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: Validate Design Tokens
-```bash
-# Check design tokens exist
-bash(test -f {base_path}/style-extraction/style-1/design-tokens.json && echo "valid")
-
-# Load design space analysis (optional, from intermediates)
-IF exists({base_path}/.intermediates/style-analysis/design-space-analysis.json):
-    design_space_analysis = Read({base_path}/.intermediates/style-analysis/design-space-analysis.json)
-```
-
-**Output**: `design_tokens_valid`, `design_space_analysis`
-
-### Step 3: Gather Layout Inspiration (Direct MCP Search)
-```bash
-# Gather layout inspiration via MCP for each target
-layout_inspiration_map = {}
-
-FOR target IN target_list:
-    search_query = "{target} {target_type} layout patterns variations"
-    search_results = mcp__exa__web_search_exa(query=search_query, numResults=5)
-
-    # Extract context from prompt for this target
-    target_requirements = extract_relevant_context_from_prompt(prompt_text, target)
-
-    # Store inspiration in memory (no file write needed)
-    layout_inspiration_map[target] = format_inspiration_from_search(search_results, target_requirements)
-    REPORT: "Gathered layout inspiration for {target}"
-```
-
-**Output**: `layout_inspiration_map` (in-memory, passed to agents)
-
-## Phase 2: Target-Style-Centric Batch Generation (Agent)
-
-**Executor**: `Task(ui-design-agent)` × `T × S` tasks in **batched parallel** (max 6 concurrent)
-
-### Step 1: Calculate Batch Execution Plan
-```bash
-bash(mkdir -p {base_path}/prototypes)
-
-# Build task list: T × S combinations
-MAX_PARALLEL = 6
-total_tasks = T × S
-total_batches = ceil(total_tasks / MAX_PARALLEL)
-
-# Initialize batch tracking
-TodoWrite({todos: [
-  {content: "Batch 1/{batches}: Generate 6 tasks", status: "in_progress"},
-  {content: "Batch 2/{batches}: Generate 6 tasks", status: "pending"},
-  ...
-]})
-```
-
-### Step 2: Launch Batched Agent Tasks
-For each batch (up to 6 parallel tasks):
-```javascript
-Task(ui-design-agent): `
-  [TARGET_STYLE_UI_GENERATION_FROM_PROMPT]
-  🎯 ONE component: {target} × Style-{style_id} ({philosophy_name})
-  Generate: {layout_variants} × 2 files (HTML + CSS per layout)
-
-  PROMPT CONTEXT: {target_requirements}  # Extracted from original prompt
-  TARGET: {target} | TYPE: {target_type} | STYLE: {style_id}/{style_variants}
-  BASE_PATH: {base_path}
-  DEVICE: {device_type}
-  ${design_attributes ? "DESIGN_ATTRIBUTES: " + JSON.stringify(design_attributes) : ""}
-
-  ## Reference
-  - Layout inspiration: {layout_inspiration_map[target]}
-  - Design tokens: Read("{base_path}/style-extraction/style-{style_id}/design-tokens.json")
-    Parse ALL token values including:
-    * colors, typography (with combinations), spacing, opacity
-    * border_radius, shadows, breakpoints
-    * component_styles (button, card, input variants)
-  ${design_attributes ? "- Adapt DOM to: density, visual_weight, formality, organic_vs_geometric" : ""}
-
-  ## Generation
-  For EACH layout (1 to {layout_variants}):
-
-  1. HTML: {base_path}/prototypes/{target}-style-{style_id}-layout-N.html
-     - Complete HTML5: <!DOCTYPE>, <head>, <body>
-     - CSS ref: <link href="{target}-style-{style_id}-layout-N.css">
-     - Semantic: <header>, <nav>, <main>, <footer>
-     - A11y: ARIA labels, landmarks, responsive meta
-     - Viewport: <meta name="viewport" content="width=device-width, initial-scale=1.0">
-     - Follow user requirements from prompt
-     ${design_attributes ? `
-     - DOM adaptation:
-       * density='spacious' → flatter hierarchy
-       * density='compact' → deeper nesting
-       * visual_weight='heavy' → extra wrappers
-       * visual_weight='minimal' → direct structure` : ""}
-     - Device-specific: Optimize for {device_type}
-
-  2. CSS: {base_path}/prototypes/{target}-style-{style_id}-layout-N.css
-     - Self-contained: Direct token VALUES (no var())
-     - Use tokens: colors, fonts, spacing, opacity, borders, shadows
-     - IF tokens.component_styles exists: Use component presets for buttons, cards, inputs
-     - IF tokens.typography.combinations exists: Use typography presets for headings and body text
-     - Device-optimized: {device_type} styles
-     ${device_type === 'responsive' ? '- Responsive: Mobile-first @media' : '- Fixed: ' + device_type}
-     ${design_attributes ? `
-     - Token selection: density → spacing, visual_weight → shadows` : ""}
-
-  ## Notes
-  - ✅ Token VALUES directly from design-tokens.json (with typography.combinations, opacity, component_styles support)
-  - ✅ Follow prompt requirements for {target}
-  - ✅ Optimize for {device_type}
-  - ❌ NO var() refs, NO external deps
-  - Layouts structurally DISTINCT
-  - Write files IMMEDIATELY (per layout)
-  - CSS filename MUST match HTML <link href>
-`
-
-# After each batch completes
-TodoWrite: Mark batch completed, next batch in_progress
-```
-
-## Phase 3: Verify & Generate Previews
-
-### Step 1: Verify Generated Files
-```bash
-# Count expected vs found
-bash(ls {base_path}/prototypes/{target}-style-*-layout-*.html | wc -l)
-# Expected: S × L × T × 2
-
-# Validate samples
-Read({base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html)
-# Check: <!DOCTYPE html>, correct CSS href, sufficient CSS length
-```
-
-**Output**: `S × L × T × 2` files verified
-
-### Step 2: Run Preview Generation Script
-```bash
-bash(~/.claude/scripts/ui-generate-preview.sh "{base_path}/prototypes")
-```
-
-**Script generates**:
- `compare.html` (interactive matrix)
- `index.html` (navigation)
- `PREVIEW.md` (instructions)
-
-### Step 3: Verify Preview Files
-```bash
-bash(ls {base_path}/prototypes/compare.html {base_path}/prototypes/index.html {base_path}/prototypes/PREVIEW.md)
-```
-
-**Output**: 3 preview files
-
-## Completion
-
-### Todo Update
-```javascript
-TodoWrite({todos: [
-  {content: "Setup and parse prompt", status: "completed", activeForm: "Parsing prompt"},
-  {content: "Detect token sources", status: "completed", activeForm: "Loading design systems"},
-  {content: "Gather layout inspiration", status: "completed", activeForm: "Researching layouts"},
-  {content: "Batch 1/{batches}: Generate 6 tasks", status: "completed", activeForm: "Generating batch 1"},
-  ... (all batches completed)
-  {content: "Verify files & generate previews", status: "completed", activeForm: "Creating previews"}
-]});
-```
-
-### Output Message
-```
-✅ Prompt-driven batch UI generation complete!
-
-Prompt: {prompt_text}
-
-Configuration:
- Style Variants: {style_variants}
- Layout Variants: {layout_variants}
- Target Type: {target_type}
- Device Type: {device_type}
- Targets: {target_list} ({T} targets)
- Total Prototypes: {S × L × T}
-
-Batch Execution:
- Total tasks: {T × S} (targets × styles)
- Batches: {batches} (max 6 parallel per batch)
- Agent scope: {L} layouts per target×style
- Component isolation: Complete task independence
- Device-specific: All layouts optimized for {device_type}
-
-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: Production-ready (WCAG AA compliant)
-
-Generated Files:
-{base_path}/prototypes/
-├── {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
-3. Read PREVIEW.md
-
-Next: /workflow:ui-design:update
-```
-
-## Simple Bash Commands
-
-### Path Operations
-```bash
-# Find design directory
-bash(find .workflow -type d -name "design-run-*" -printf "%T@ %p\n" | sort -nr | head -1 | cut -d' ' -f2)
-
-# Count style variants
-bash(ls {base_path}/style-extraction/style-* -d | wc -l)
-
-# Check design tokens exist
-bash(test -f {base_path}/style-extraction/style-1/design-tokens.json && echo "valid")
-```
-
-### Validation Commands
-```bash
-# Count generated files
-bash(ls {base_path}/prototypes/{target}-style-*-layout-*.html | wc -l)
-
-# Verify preview
-bash(test -f {base_path}/prototypes/compare.html && echo "exists")
-```
-
-### File Operations
-```bash
-# Create prototypes directory
-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")
-```
-
-## Output Structure
-
-```
-{base_path}/
-├── .intermediates/
-│   └── layout-analysis/
-├── prototypes/
-│   ├── {target}-style-{s}-layout-{l}.html  # Final prototypes
-│   ├── {target}-style-{s}-layout-{l}.css
-│   ├── compare.html
-│   ├── index.html
-│   └── PREVIEW.md
-└── style-extraction/
-    └── style-{s}/
-        ├── design-tokens.json
-        └── style-guide.md
-```
-
-## Error Handling
-
-### Common Errors
-```
-ERROR: No design tokens found
-→ Run /workflow:ui-design:style-extract first
-
-ERROR: No targets extracted from prompt
-→ Use --targets explicitly or rephrase prompt
-
-ERROR: MCP search failed
-→ Check network, retry
-
-ERROR: Batch {N} agent tasks failed
-→ Check agent output, retry specific target×style combinations
-
-ERROR: Script permission denied
-→ chmod +x ~/.claude/scripts/ui-generate-preview.sh
-```
-
-### Recovery Strategies
- **Partial success**: Keep successful target×style combinations
- **Missing design_attributes**: Works without (less style-aware)
- **Invalid tokens**: Validate design-tokens.json structure
- **Failed batch**: Re-run command, only failed combinations will retry
-
-## Quality Checklist
-
- [ ] Prompt clearly describes targets
- [ ] CSS uses direct token values (no var())
- [ ] HTML adapts to design_attributes (if available)
- [ ] Semantic HTML5 structure
- [ ] ARIA attributes present
- [ ] Device-optimized layouts
- [ ] Layouts structurally distinct
- [ ] compare.html works
-
-## Key Features
-
- **Prompt-Driven**: Describe what to build, command extracts targets
- **Target-Style-Centric**: `T×S` agents, each handles `L` layouts
- **Parallel Batching**: Max 6 concurrent agents with progress tracking
- **Component Isolation**: Complete task independence
- **Style-Aware**: HTML adapts to design_attributes
- **Self-Contained CSS**: Direct token values (no var())
- **Device-Specific**: Optimized for desktop/mobile/tablet/responsive
- **Inspiration-Based**: MCP-powered layout research
- **Production-Ready**: Semantic, accessible, responsive
-
-## Integration
-
-**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**: style-extract, explore-auto, imitate-auto outputs
-**Optimization**: Reuses layout inspirations from layout-extract phase, avoiding duplicate MCP searches
-
-## Usage Examples
-
-### Basic: Auto-detection
-```bash
-/workflow:ui-design:batch-generate \
-  --prompt "Dashboard with metric cards and charts"
-
-# Auto: latest design run, extracts "dashboard" target
-# Output: S × L × 1 prototypes
-```
-
-### With Session
-```bash
-/workflow:ui-design:batch-generate \
-  --prompt "Auth pages: login, signup, password reset" \
-  --session WFS-auth
-
-# Uses WFS-auth's design run
-# Extracts: ["login", "signup", "password-reset"]
-# Batches: 2 (if S=3: 9 tasks = 6+3)
-# Output: S × L × 3 prototypes
-```
-
-### Components with Device Type
-```bash
-/workflow:ui-design:batch-generate \
-  --prompt "Mobile UI components: navbar, card, footer" \
-  --target-type component \
-  --device-type mobile
-
-# Mobile-optimized component generation
-# Output: S × L × 3 prototypes
-```
-
-### Large Scale (Multi-batch)
-```bash
-/workflow:ui-design:batch-generate \
-  --prompt "E-commerce site" \
-  --targets "home,shop,product,cart,checkout" \
-  --style-variants 4 \
-  --layout-variants 2
-
-# Tasks: 5 × 4 = 20 (4 batches: 6+6+6+2)
-# Output: 4 × 2 × 5 = 40 prototypes
-```
-
-## Helper Functions Reference
-
-### Target Extraction
-```python
-# extract_targets_from_prompt(prompt_text)
-# Patterns: "Create X and Y", "Generate X, Y, Z pages", "Build X"
-# Returns: ["x", "y", "z"] (normalized lowercase with hyphens)
-
-# detect_target_type(target_list)
-# Keywords: page (home, dashboard, login) vs component (navbar, card, button)
-# Returns: "page" or "component"
-
-# extract_relevant_context_from_prompt(prompt_text, target)
-# Extracts sentences mentioning specific target
-# Returns: Relevant context string
-```
-
-## Batch Execution Details
-
-### Parallel Control
- **Max concurrent**: 6 agents per batch
- **Task distribution**: T × S tasks = ceil(T×S/6) batches
- **Progress tracking**: TodoWrite per-batch status
- **Examples**:
-  - 3 tasks → 1 batch
-  - 9 tasks → 2 batches (6+3)
-  - 20 tasks → 4 batches (6+6+6+2)
-
-### Performance
-| Tasks | Batches | Est. Time | Efficiency |
-|-------|---------|-----------|------------|
-| 1-6   | 1       | 3-5 min   | 100%       |
-| 7-12  | 2       | 6-10 min  | ~85%       |
-| 13-18 | 3       | 9-15 min  | ~80%       |
-| 19-30 | 4-5     | 12-25 min | ~75%       |
-
-### Optimization Tips
-1. **Reduce tasks**: Fewer targets or styles
-2. **Adjust layouts**: L=2 instead of L=3 for faster iteration
-3. **Stage generation**: Core pages first, secondary pages later
-
-## Notes
-
- **Prompt quality**: Clear descriptions improve target extraction
- **Token sources**: Consolidated (production) or proposed (fast-track)
- **Batch parallelism**: Max 6 concurrent for stability
- **Scalability**: Tested up to 30+ tasks (5+ batches)
- **Dependencies**: MCP web search, ui-generate-preview.sh script
--- a/.claude/skills/command-guide/reference/commands/workflow/ui-design/explore-auto.md
+++ b/.claude/skills/command-guide/reference/commands/workflow/ui-design/explore-auto.md
@@ -1,7 +1,7 @@
 ---
 name: explore-auto
-description: Exploratory UI design workflow with style-centric batch generation, creates design variants from prompts/images with parallel execution
-argument-hint: "[--prompt "<desc>"] [--images "<glob>"] [--targets "<list>"] [--target-type "page|component"] [--session <id>] [--style-variants <count>] [--layout-variants <count>] [--interactive] [--batch-plan]""
+description: Interactive exploratory UI design workflow with style-centric batch generation, creates design variants from prompts/images with parallel execution and user selection
+argument-hint: "[--prompt "<desc>"] [--images "<glob>"] [--targets "<list>"] [--target-type "page|component"] [--session <id>] [--style-variants <count>] [--layout-variants <count>] [--batch-plan]""
 allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*), Task(conceptual-planning-agent)
 ---

@@ -60,7 +60,6 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
 - `--prompt "<description>"`: Design style and target description
 - `--style-variants <count>`: Style variants (default: inferred from prompt or 3, range: 1-5)
 - `--layout-variants <count>`: Layout variants per style (default: inferred or 3, range: 1-5)
- `--interactive`: Enable interactive multi-selection mode for variants (default: false - non-interactive batch generation)
 - `--batch-plan`: Auto-generate implementation tasks after design-update

 **Legacy Parameters** (maintained for backward compatibility):
@@ -156,10 +155,8 @@ ELSE:

 VALIDATE: 1 <= style_variants <= 5, 1 <= layout_variants <= 5

-# Interactive mode (default: disabled - non-interactive batch generation)
-interactive_mode = --interactive !== undefined ? --interactive : false  # Default to false
-
-REPORT: "🎯 Interactive mode: {interactive_mode ? 'enabled' : 'disabled'}"
+# Interactive mode (always enabled)
+interactive_mode = true  # Always use interactive mode
 ```

 ### Phase 0a-2: Device Type Inference
@@ -396,8 +393,7 @@ IF design_source == "visual_only" OR needs_visual_supplement:
    command = "/workflow:ui-design:style-extract --base-path \"{base_path}\" " +
              (--images ? "--images \"{images}\" " : "") +
              (--prompt ? "--prompt \"{prompt}\" " : "") +
-              "--variants {style_variants}" +
-              (interactive_mode ? " --interactive" : "")
+              "--variants {style_variants} --interactive"
    SlashCommand(command)
 ELSE:
    REPORT: "✅ Phase 1: Style (Using Code Import)"
@@ -426,8 +422,7 @@ IF (design_source == "visual_only" OR needs_visual_supplement) OR (NOT layout_co
    command = "/workflow:ui-design:layout-extract --base-path \"{base_path}\" " +
              (--images ? "--images \"{images}\" " : "") +
              (--prompt ? "--prompt \"{prompt}\" " : "") +
-              "--targets \"{targets_string}\" --variants {layout_variants} --device-type \"{device_type}\"" +
-              (interactive_mode ? " --interactive" : "")
+              "--targets \"{targets_string}\" --variants {layout_variants} --device-type \"{device_type}\" --interactive"
    SlashCommand(command)
 ELSE:
    REPORT: "✅ Phase 2.5: Layout (Using Code Import)"
--- a/.claude/skills/command-guide/reference/commands/workflow/ui-design/layout-extract.md
+++ b/.claude/skills/command-guide/reference/commands/workflow/ui-design/layout-extract.md
@@ -319,7 +319,7 @@ Please select your preferred concept for this target.
 }
 ```

-### Step 3: Capture User Selection (Per Target)
+### Step 3: Capture User Selection and Update Options File (Per Target)
 ```javascript
 // Use AskUserQuestion tool for each target (multi-select enabled)
 FOR each target:
@@ -362,35 +362,25 @@ FOR each target:
  }

  REPORT: "✅ Selected {selected_indices.length} layout(s) for {target}"
-```

-### Step 4: Write User Selection File
-```bash
-# Create user-selections directory
-bash(mkdir -p {base_path}/.intermediates/user-selections)
-
-# Calculate total selections across all targets
+// Calculate total selections across all targets
 total_selections = sum([len(selections[t].selected_indices) for t in targets])

-# Create user selection JSON
-selection_data = {
-  "metadata": {
-    "selected_at": "{current_timestamp}",
-    "selection_type": "per_target_multi",
-    "session_id": "{session_id}",
-    "total_selections": total_selections
-  },
+// Update analysis-options.json with user selection (embedded in same file)
+options_file = Read({base_path}/.intermediates/layout-analysis/analysis-options.json)
+options_file.user_selection = {
+  "selected_at": "{current_timestamp}",
+  "selection_type": "per_target_multi",
+  "session_id": "{session_id}",
+  "total_selections": total_selections,
  "selected_variants": selections  // {target: {selected_indices: [...], concept_names: [...]}}
 }

-# Write to standardized selection file
-bash(echo '{selection_data}' > {base_path}/.intermediates/user-selections/layout-extract-selection.json)
-
-# Verify
-bash(test -f {base_path}/.intermediates/user-selections/layout-extract-selection.json && echo "saved")
+// Write updated file back
+Write({base_path}/.intermediates/layout-analysis/analysis-options.json, JSON.stringify(options_file, indent=2))
 ```

-### Step 5: Confirmation Message
+### Step 4: Confirmation Message
 ```
 ✅ Selections recorded! Total: {total_selections} layout(s)

@@ -404,7 +394,7 @@ bash(test -f {base_path}/.intermediates/user-selections/layout-extract-selection
 Proceeding to generate {total_selections} detailed layout template(s)...
 ```

-**Output**: `user-selection.json` with user's multi-selections for all targets
+**Output**: `analysis-options.json` updated with embedded `user_selection` field

 ## Phase 2: Layout Template Generation (Agent Task 2)

@@ -412,14 +402,15 @@ Proceeding to generate {total_selections} detailed layout template(s)...

 ### Step 1: Load User Selections or Default to All
 ```bash
-# Check if user selection file exists (interactive mode)
-IF exists({base_path}/.intermediates/user-selections/layout-extract-selection.json):
-    # Interactive mode: Use user-selected variants
-    selection = Read({base_path}/.intermediates/user-selections/layout-extract-selection.json)
-    selections_per_target = selection.selected_variants
+# Read analysis-options.json which may contain user_selection
+options = Read({base_path}/.intermediates/layout-analysis/analysis-options.json)
+layout_concepts = options.layout_concepts

-    # Calculate total selections
-    total_selections = selection.metadata.total_selections
+# Check if user_selection field exists (interactive mode)
+IF options.user_selection AND options.user_selection.selected_variants:
+    # Interactive mode: Use user-selected variants
+    selections_per_target = options.user_selection.selected_variants
+    total_selections = options.user_selection.total_selections
 ELSE:
    # Non-interactive mode: Generate ALL variants for ALL targets (default behavior)
    selections_per_target = {}
@@ -432,10 +423,6 @@ ELSE:
        }
        total_selections += variants_count

-# Read concept details
-options = Read({base_path}/.intermediates/layout-analysis/analysis-options.json)
-layout_concepts = options.layout_concepts
-
 # Build task list for all selected concepts across all targets
 task_list = []
 FOR each target in targets:
@@ -603,13 +590,12 @@ Generated Templates:

 Intermediate Files:
 - {base_path}/.intermediates/layout-analysis/
-  ├── analysis-options.json (concept proposals)
-  ├── user-selection.json (multi-selections per target)
+  ├── analysis-options.json (concept proposals + user selections embedded)
  {IF dom_structure_available:
  ├── dom-structure-*.json ({len(url_list)} DOM extracts)
  }

-Next: /workflow:ui-design:generate or /workflow:ui-design:batch-generate will combine these structural templates with design systems to produce final prototypes.
+Next: /workflow:ui-design:generate will combine these structural templates with design systems to produce final prototypes.
 ```

 ## Simple Bash Commands
@@ -651,8 +637,7 @@ bash(echo '{json}' > {base_path}/layout-extraction/layout-templates.json)
 {base_path}/
 ├── .intermediates/                    # Intermediate analysis files
 │   └── layout-analysis/
-│       ├── analysis-options.json      # Generated layout concepts
-│       ├── user-selection.json        # User's multi-selections per target
+│       ├── analysis-options.json      # Generated layout concepts + user selections (embedded)
 │       └── dom-structure-{target}.json   # Extracted DOM structure (URL mode only)
 └── layout-extraction/                 # Final layout templates
    └── layout-{target}-{variant}.json # Structural layout templates (one per selected concept)
@@ -757,7 +742,7 @@ ERROR: MCP search failed
 **New Workflow**:
 1. `/workflow:ui-design:style-extract` → Multiple `style-N/design-tokens.json` files (Complete design systems)
 2. `/workflow:ui-design:layout-extract` → Multiple `layout-{target}-{variant}.json` files (Structural templates)
-3. `/workflow:ui-design:generate` or `/workflow:ui-design:batch-generate` (Assembler):
+3. `/workflow:ui-design:generate` (Assembler):
   - **Reads**: All `design-tokens.json` files + all `layout-{target}-{variant}.json` files
   - **Action**: For each style × layout combination:
     1. Build HTML from `dom_structure`
@@ -768,4 +753,4 @@ ERROR: MCP search failed

 **Input**: Reference images, URLs, or text prompts
 **Output**: `layout-{target}-{variant}.json` files for downstream generation commands
-**Next**: `/workflow:ui-design:generate` or `/workflow:ui-design:batch-generate`
+**Next**: `/workflow:ui-design:generate`
--- a/.claude/skills/command-guide/reference/commands/workflow/ui-design/style-extract.md
+++ b/.claude/skills/command-guide/reference/commands/workflow/ui-design/style-extract.md
@@ -262,7 +262,7 @@ Please select the direction(s) you'd like to develop into complete design system
 ═══════════════════════════════════════════════════
 ```

-### Step 3: Capture User Selection
+### Step 3: Capture User Selection and Update Analysis JSON
 ```javascript
 // Use AskUserQuestion tool for multi-selection
 AskUserQuestion({
@@ -298,35 +298,22 @@ FOR each selected_option_text IN selected_options:
        EXIT workflow

 REPORT: "✅ Selected {selected_indices.length} design direction(s)"
-```

-### Step 4: Write User Selection File
-```bash
-# Create user-selections directory
-bash(mkdir -p {base_path}/.intermediates/user-selections)
-
-# Create user selection JSON
-selection_data = {
-  "metadata": {
-    "selected_at": "{current_timestamp}",
-    "selection_type": "multi",
-    "session_id": "{session_id}",
-    "selection_count": selected_indices.length
-  },
-  "selected_variants": selected_indices,  // Array of selected indices (e.g., [1, 3])
-  "refinements": {
-    "enabled": false
-  }
+// Update analysis-options.json with user selection
+options_file = Read({base_path}/.intermediates/style-analysis/analysis-options.json)
+options_file.user_selection = {
+  "selected_at": NOW(),
+  "selected_indices": selected_indices,
+  "selection_count": selected_indices.length
 }

-# Write to standardized selection file
-bash(echo '{selection_data}' > {base_path}/.intermediates/user-selections/style-extract-selection.json)
+// Write updated file back
+Write({base_path}/.intermediates/style-analysis/analysis-options.json, JSON.stringify(options_file, indent=2))

-# Verify
-bash(test -f {base_path}/.intermediates/user-selections/style-extract-selection.json && echo "saved")
+REPORT: "✅ Updated analysis-options.json with user selection"
 ```

-### Step 5: Confirmation Message
+### Step 4: Confirmation Message
 ```
 ✅ Selection recorded!

@@ -338,7 +325,7 @@ You selected {selected_indices.length} design direction(s):
 Proceeding to generate {selected_indices.length} complete design system(s)...
 ```

-**Output**: `user-selection.json` with user's multi-selection
+**Output**: Updated `analysis-options.json` with user's multi-selection embedded

 ## Phase 2: Design System Generation (Agent Task 2)

@@ -346,11 +333,13 @@ Proceeding to generate {selected_indices.length} complete design system(s)...

 ### Step 1: Load User Selection or Default to All
 ```bash
-# Check if user selection file exists (interactive mode)
-IF exists({base_path}/.intermediates/user-selections/style-extract-selection.json):
+# Read analysis-options.json which may contain user_selection
+options = Read({base_path}/.intermediates/style-analysis/analysis-options.json)
+
+# Check if user_selection field exists (interactive mode)
+IF options.user_selection AND options.user_selection.selected_indices:
    # Interactive mode: Use user-selected variants
-    selection = Read({base_path}/.intermediates/user-selections/style-extract-selection.json)
-    selected_indices = selection.selected_variants  # Array of selected indices (e.g., [1, 3])
+    selected_indices = options.user_selection.selected_indices  # Array of selected indices (e.g., [1, 3])

    REPORT: "🎯 Interactive mode: Using {selected_indices.length} user-selected variant(s)"
 ELSE:
@@ -359,8 +348,7 @@ ELSE:

    REPORT: "ℹ️ Non-interactive mode: Generating all {variants_count} variant(s)"

-# Read the selected direction details from options
-options = Read({base_path}/.intermediates/style-analysis/analysis-options.json)
+# Extract the selected direction details from options
 selected_directions = [options.design_directions[i-1] for i in selected_indices]  # 0-indexed array

 actual_variants_count = selected_indices.length
@@ -523,8 +511,7 @@ Intermediate Analysis:
 {base_path}/.intermediates/style-analysis/computed-styles.json (extracted from {primary_url})
 }
 {IF extraction_mode == "explore":
-{base_path}/.intermediates/style-analysis/analysis-options.json (design direction options)
-{base_path}/.intermediates/style-analysis/user-selection.json (your selection)
+{base_path}/.intermediates/style-analysis/analysis-options.json (design direction options + user selection)
 }

 Next: /workflow:ui-design:layout-extract --session {session_id} --targets "..."
@@ -579,8 +566,7 @@ bash(test -f {base_path}/.intermediates/style-analysis/analysis-options.json &&
 ├── .intermediates/                  # Intermediate analysis files
 │   └── style-analysis/
 │       ├── computed-styles.json     # Extracted CSS values from DOM (if URL available)
-│       ├── analysis-options.json    # Design direction options (explore mode only)
-│       └── user-selection.json      # User's selected direction (explore mode only)
+│       └── analysis-options.json    # Design direction options + user selection (explore mode only)
 └── style-extraction/                # Final design system
    └── style-1/
        ├── design-tokens.json       # Production-ready design tokens
--- a/COMMAND_REFERENCE.md
+++ b/COMMAND_REFERENCE.md
@@ -87,7 +87,6 @@ These commands orchestrate complex, multi-phase development processes, from plan
 |---|---|
 | `/workflow:ui-design:explore-auto` | Exploratory UI design workflow with style-centric batch generation. |
 | `/workflow:ui-design:imitate-auto` | High-speed multi-page UI replication with batch screenshot capture. |
-| `/workflow:ui-design:batch-generate` | Prompt-driven batch UI generation using target-style-centric parallel execution. |
 | `/workflow:ui-design:capture` | Batch screenshot capture for UI design workflows using MCP or local fallback. |
 | `/workflow:ui-design:explore-layers` | Interactive deep UI capture with depth-controlled layer exploration. |
 | `/workflow:ui-design:style-extract` | Extract design style from reference images or text prompts using Claude's analysis. |
--- a/COMMAND_SPEC.md
+++ b/COMMAND_SPEC.md
@@ -375,15 +375,6 @@ Specialized workflow for UI/UX design, from style extraction to prototype genera
  /workflow:ui-design:imitate-auto --url-map "home:https://linear.app, features:https://linear.app/features"
  ```

-### **/workflow:ui-design:batch-generate**
- **Syntax**: `/workflow:ui-design:batch-generate [--prompt "..."] [--targets "..."] ...`
- **Responsibilities**: Prompt-driven batch UI generation with parallel execution for multiple targets and styles.
- **Agent Calls**: `@ui-design-agent`.
- **Example**:
-  ```bash
-  /workflow:ui-design:batch-generate --prompt "Dashboard with metric cards and charts"
-  ```
-
 ### **/workflow:ui-design:capture**
 - **Syntax**: `/workflow:ui-design:capture --url-map "target:url,..." ...`
 - **Responsibilities**: Batch screenshot capture tool using MCP Chrome DevTools with multi-tier fallback strategy (MCP → Playwright → Chrome → Manual).