From 3be5663ab0fd136d8d8459759851fb14f3b0df3c Mon Sep 17 00:00:00 2001 From: catlog22 Date: Sun, 9 Nov 2025 14:35:30 +0800 Subject: [PATCH] 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. --- .../workflow/ui-design/animation-extract.md | 460 ++++++----------- .../workflow/ui-design/batch-generate.md | 476 ------------------ .../workflow/ui-design/explore-auto.md | 17 +- .../commands/workflow/ui-design/generate.md | 44 +- .../workflow/ui-design/layout-extract.md | 67 +-- .../guides/ui-design-workflow-guide.md | 43 +- .../command-guide/index/all-commands.json | 11 - .../command-guide/index/by-category.json | 11 - .../command-guide/index/by-use-case.json | 11 - .../workflow/ui-design/animation-extract.md | 460 ++++++----------- .../workflow/ui-design/batch-generate.md | 476 ------------------ .../workflow/ui-design/explore-auto.md | 17 +- .../workflow/ui-design/layout-extract.md | 67 +-- .../workflow/ui-design/style-extract.md | 56 +-- COMMAND_REFERENCE.md | 1 - COMMAND_SPEC.md | 9 - 16 files changed, 440 insertions(+), 1786 deletions(-) delete mode 100644 .claude/commands/workflow/ui-design/batch-generate.md delete mode 100644 .claude/skills/command-guide/reference/commands/workflow/ui-design/batch-generate.md diff --git a/.claude/commands/workflow/ui-design/animation-extract.md b/.claude/commands/workflow/ui-design/animation-extract.md index 0206207e..a6d08801 100644 --- 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": "", + "focus_types": ["..."], + "total_questions": + }, + "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 diff --git a/.claude/commands/workflow/ui-design/batch-generate.md b/.claude/commands/workflow/ui-design/batch-generate.md deleted file mode 100644 index 2122493a..00000000 --- a/.claude/commands/workflow/ui-design/batch-generate.md +++ /dev/null @@ -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 ""] [--target-type "page|component"] [--device-type "desktop|mobile|tablet|responsive"] [--base-path ] [--session ] [--style-variants ] [--layout-variants ] -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: , , - - CSS ref: - - Semantic:
,