catlog22/Claude-Code-Workflow
1
0
Fork 0
mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-02-05 01:50:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Enhance layout and style extraction commands with dual mode support for exploration and refinement.

Browse Source 
- Updated `layout-extract` command to include a refinement mode (`--refine`) for generating single refined layouts, alongside exploration mode for multiple contrasting variants.
- Added detailed reporting and validation for variants count based on the selected mode.
- Implemented logic to load existing layouts for refinement and generate specific refinement options categorized by density, responsiveness, grid specifics, and component arrangement.
- Updated `style-extract` command similarly to support refinement mode, allowing for detailed adjustments to existing design systems.
- Enhanced user interaction phases to accommodate selection of refinements or design directions based on the active mode.
This commit is contained in:
catlog22
2025-11-10 09:49:10 +08:00
parent b471e881a9
commit 6a50b714d0
4 changed files with 951 additions and 504 deletions
Download Patch File Download Diff File Expand all files Collapse all files

546
.claude/commands/workflow/ui-design/animation-extract.md
View File

@@ -1,7 +1,7 @@
---
name: animation-extract
description: Extract animation and transition patterns from URLs, CSS, or interactive questioning for design system documentation
argument-hint: "[--design-id <id>] [--session <id>] [--urls "<list>"] [--focus "<types>"] [--interactive]"
argument-hint: "[--design-id <id>] [--session <id>] [--urls "<list>"] [--focus "<types>"] [--interactive] [--refine]"
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), Bash(*), AskUserQuestion(*), Task(ui-design-agent), mcp__chrome-devtools__navigate_page(*), mcp__chrome-devtools__evaluate_script(*)
---
@@ -13,8 +13,10 @@ Extract animation and transition patterns from URLs or interactive questioning u
**Strategy**: AI-Driven Animation Specification with Visual Previews
- **Dual Modes**: Exploration mode (generate from scratch) or Refinement mode (fine-tune existing)
- **CSS Extraction**: Automatic CSS animation/transition extraction from URLs via Chrome DevTools
- **Question Generation**: Agent generates context-aware specification questions with visual previews
- **Refinement Options**: Fine-tune timing, easing, context variations, and interaction intensity
- **Visual Previews**: Timeline representations, easing curve ASCII art, and animation sequence diagrams
- **Flexible Input**: URLs for CSS extraction, or standalone question-based specification
- **Optional Interaction**: User answers questions only when `--interactive` flag present
@@ -54,6 +56,14 @@ ELSE:
# Check interactive mode flag
interactive_mode = --interactive OR false
# Check refinement mode flag
refine_mode = --refine OR false
IF refine_mode:
REPORT: "🔧 Refinement mode enabled: Will refine existing animation system"
ELSE:
REPORT: "✨ Exploration mode: Will generate animation system from scratch"
# Determine base path with priority: --design-id > --session > auto-detect
if [ -n "$DESIGN_ID" ]; then
# Exact match by design ID
@@ -164,7 +174,7 @@ IF exists: SKIP to completion
---
**Phase 0 Output**: `input_mode`, `base_path`, `has_urls`, `url_list[]`, `focus_types[]`, `has_design_context`, `interactive_mode`, `animations_extracted`
**Phase 0 Output**: `input_mode`, `base_path`, `has_urls`, `url_list[]`, `focus_types[]`, `has_design_context`, `interactive_mode`, `refine_mode`, `animations_extracted`
## Phase 1: Animation Specification Generation
@@ -184,14 +194,16 @@ IF animations_extracted:
**Executor**: `Task(ui-design-agent)`
Launch agent to generate animation specification options with previews:
**Conditional Logic**: Branch based on `refine_mode` flag
```javascript
Task(ui-design-agent): `
[ANIMATION_SPECIFICATION_GENERATION_TASK]
Generate context-aware animation specification questions
IF NOT refine_mode:
// EXPLORATION MODE (default)
Task(ui-design-agent): `
[ANIMATION_SPECIFICATION_GENERATION_TASK]
Generate context-aware animation specification questions
SESSION: {session_id} | MODE: explore | BASE_PATH: {base_path}
SESSION: {session_id} | MODE: explore | BASE_PATH: {base_path}
## Input Analysis
- Focus types: {focus_types.join(", ")}
@@ -277,27 +289,120 @@ Task(ui-design-agent): `
}
CRITICAL: Use Write() tool immediately after generating complete JSON
`
`
ELSE:
// REFINEMENT MODE
Task(ui-design-agent): `
[ANIMATION_REFINEMENT_OPTIONS_TASK]
Generate refinement options for existing animation system
SESSION: {session_id} | MODE: refine | BASE_PATH: {base_path}
## Load Existing Animation System
- Existing tokens: Read from {base_path}/animation-extraction/animation-tokens.json
- Focus types: {focus_types.join(", ")}
- Design context: {has_design_context ? "Available" : "None"}
${animations_extracted ? "- CSS Data: Read from .intermediates/animation-analysis/animations-*.json" : ""}
## Refinement Categories
Generate 8-12 refinement options across these categories:
1. **Timing Adjustments** (2-3 options):
- Duration scale: Faster timing across the board ↔ Slower, more deliberate timing
- Specific categories: Accelerate interactions only ↔ Extend page transitions
- Micro-timing: Adjust stagger delays ↔ Sequential animation gaps
2. **Easing Fine-Tuning** (2-3 options):
- Curve intensity: Sharper, snappier curves ↔ Softer, smoother curves
- Category-specific: Bouncier interactions ↔ Linear state changes
- Spring physics: Adjust bounce/damping parameters
3. **Context-Specific Variations** (2-3 options):
- Reduced motion: Adjust reduced-motion fallbacks
- Mobile optimization: Shorter durations for touch interactions
- Component-specific: Different hover styles for buttons vs cards
4. **Interaction Intensity** (1-2 options):
- Transform magnitude: Subtle movements (2-4px) ↔ Dramatic movements (8-12px)
- Scale adjustments: Minimal scale changes ↔ Bold scale emphasis
- Opacity ranges: Partial fades ↔ Full visibility transitions
## Generate Refinement Options
For each category, create option with:
1. **Option ID** (sequential number)
2. **Category** (timing_adjustments, easing_tuning, context_variations, interaction_intensity)
3. **Label** (brief Chinese description, e.g., "加快整体节奏")
4. **Description** (detailed explanation of changes)
5. **Impact Scope** (which tokens will be modified)
6. **Technical Changes** (specific value adjustments)
7. **Before/After Preview** (show current vs proposed values)
## Output
Write single JSON file: {base_path}/.intermediates/animation-analysis/refinement-options.json
Use schema:
{
"metadata": {
"generated_at": "<timestamp>",
"mode": "refinement",
"existing_tokens_loaded": true,
"total_refinements": <count>
},
"current_animation_system": {
// Copy from animation-tokens.json for reference
},
"refinement_options": [
{
"id": 1,
"category": "timing_adjustments",
"label": "加快整体动画节奏",
"description": "将所有 duration 值减少 30%，使界面响应更快速",
"impact_scope": "duration.fast, duration.normal, duration.slow",
"technical_changes": {
"duration.fast": {"from": "150ms", "to": "105ms"},
"duration.normal": {"from": "300ms", "to": "210ms"},
"duration.slow": {"from": "500ms", "to": "350ms"}
},
"preview": {
"before": "Normal button hover: 150ms",
"after": "Faster button hover: 105ms"
}
},
...
]
}
CRITICAL: Use Write() tool immediately after generating complete JSON
`
```
### Step 3: Verify Options File Created
```bash
bash(test -f {base_path}/.intermediates/animation-analysis/analysis-options.json && echo "created")
# Quick validation
bash(cat {base_path}/.intermediates/animation-analysis/analysis-options.json | grep -q "specification_options" && echo "valid")
IF NOT refine_mode:
# Exploration mode: Check for analysis-options.json
bash(test -f {base_path}/.intermediates/animation-analysis/analysis-options.json && echo "created")
bash(cat {base_path}/.intermediates/animation-analysis/analysis-options.json | grep -q "specification_options" && echo "valid")
ELSE:
# Refinement mode: Check for refinement-options.json
bash(test -f {base_path}/.intermediates/animation-analysis/refinement-options.json && echo "created")
bash(cat {base_path}/.intermediates/animation-analysis/refinement-options.json | grep -q "refinement_options" && echo "valid")
```
**Output**: `analysis-options.json` with animation specification questions
**Output**:
- Exploration mode: `analysis-options.json` with animation specification questions
- Refinement mode: `refinement-options.json` with refinement options
---
**Phase 1 Output**: `analysis-options.json` with generated specification questions
**Phase 1 Output**:
- Exploration mode: `analysis-options.json` with generated specification questions
- Refinement mode: `refinement-options.json` with refinement options
## Phase 1.5: User Confirmation (Optional - Triggered by --interactive)
**Purpose**: Allow user to answer animation specification questions before generating tokens
**Purpose**: Allow user to answer animation specification questions (exploration) or select refinement options (refinement) before generating tokens
**Trigger Condition**: Execute this phase ONLY if `--interactive` flag is present
@@ -315,135 +420,224 @@ REPORT: "🎯 Interactive mode enabled: User answers required"
### Step 2: Load and Present Options
```bash
# Read options file
options = Read({base_path}/.intermediates/animation-analysis/analysis-options.json)
# Parse specification questions
specification_options = options.specification_options
# Read options file based on mode
IF NOT refine_mode:
# Exploration mode
options = Read({base_path}/.intermediates/animation-analysis/analysis-options.json)
specification_options = options.specification_options
ELSE:
# Refinement mode
options = Read({base_path}/.intermediates/animation-analysis/refinement-options.json)
refinement_options = options.refinement_options
```
### Step 3: Present Options to User
**Conditional Display**: Branch based on `refine_mode` flag
```
📋 Animation Specification Questions
IF NOT refine_mode:
// EXPLORATION MODE
📋 Animation Specification Questions
We've generated {options.metadata.total_questions} questions to define your animation system.
Please answer each question to customize the animation behavior.
We've generated {options.metadata.total_questions} questions to define your animation system.
Please answer each question to customize the animation behavior.
{FOR each question in specification_options:
═══════════════════════════════════════════════════
Question {question.id}: {question.question}
Category: {question.category}
═══════════════════════════════════════════════════
{FOR each question in specification_options:
═══════════════════════════════════════════════════
Question {question.id}: {question.question}
Category: {question.category}
═══════════════════════════════════════════════════
{FOR each option in question.options:
{option.key}) {option.label}
{option.details}
{FOR each option in question.options:
{option.key}) {option.label}
{option.details}
${option.visual_preview ? "Preview:\n " + option.visual_preview.timeline || option.visual_preview.curve_art || option.visual_preview.animation_sequence : ""}
${option.visual_preview ? " " + option.visual_preview.description : ""}
${option.visual_preview ? "Preview:\n " + option.visual_preview.timeline || option.visual_preview.curve_art || option.visual_preview.animation_sequence : ""}
${option.visual_preview ? " " + option.visual_preview.description : ""}
${option.duration_values ? "Durations: " + JSON.stringify(option.duration_values) : ""}
${option.easing_curves ? "Easing: " + JSON.stringify(option.easing_curves) : ""}
${option.transform_value ? "Transform: " + option.transform_value : ""}
}
${option.duration_values ? "Durations: " + JSON.stringify(option.duration_values) : ""}
${option.easing_curves ? "Easing: " + JSON.stringify(option.easing_curves) : ""}
${option.transform_value ? "Transform: " + option.transform_value : ""}
}
═══════════════════════════════════════════════════
}
═══════════════════════════════════════════════════
}
ELSE:
// REFINEMENT MODE
🔧 Animation System Refinement Options
We've generated {options.metadata.total_refinements} refinement options to fine-tune your animation system.
Select which refinements to apply (can select multiple).
{FOR each refinement in refinement_options:
═══════════════════════════════════════════════════
Option {refinement.id}: {refinement.label}
Category: {refinement.category}
═══════════════════════════════════════════════════
Description: {refinement.description}
Impact Scope: {refinement.impact_scope}
Technical Changes:
{FOR each token, changes IN refinement.technical_changes:
• {token}:
Before: {changes.from}
After: {changes.to}
}
Preview:
{refinement.preview.before} → {refinement.preview.after}
═══════════════════════════════════════════════════
}
```
### Step 4: Capture User Selection
**Interaction Strategy**: If questions > 4 OR any question has > 3 options, use batch text format:
```
【问题[N] - [category]】[question_text]
[key]) [label]
[details]
[key]) [label]
[details]
...
请回答 (格式: 1a 2b 3c...)：
User input: "[N][key] [N][key] ..." → Parse answer pairs (single selection per question)
```
Otherwise, use `AskUserQuestion` below.
**Conditional Interaction**: Branch based on `refine_mode` flag
```javascript
// Use AskUserQuestion tool for each question (single selection)
user_answers = {}
IF NOT refine_mode:
// EXPLORATION MODE - Single selection per question
user_answers = {}
FOR each question IN specification_options:
AskUserQuestion({
questions: [{
question: question.question,
header: question.category,
multiSelect: false, // Single selection per question
options: [
{FOR each option IN question.options:
label: "{option.key}) {option.label}",
description: option.details
}
]
}]
})
FOR each question IN specification_options:
AskUserQuestion({
questions: [{
question: question.question,
header: question.category,
multiSelect: false, // Single selection per question
options: [
{FOR each option IN question.options:
label: "{option.key}) {option.label}",
description: option.details
}
]
}]
})
// Parse user response (single selection, e.g., "a) Fast & Snappy")
selected_option_text = user_answer
// Parse user response (single selection, e.g., "a) Fast & Snappy")
selected_option_text = user_answer
// Check for user cancellation
IF selected_option_text == null:
REPORT: "⚠️ User canceled selection. Using default animation preferences."
EXIT Phase 1.5
// Check for user cancellation
IF selected_option_text == null:
REPORT: "⚠️ User canceled selection. Using default animation preferences."
EXIT Phase 1.5
// Extract option key from selection text
match = selected_option_text.match(/^([a-e])\)/)
IF match:
selected_key = match[1]
user_answers[question.category] = selected_key
REPORT: "✅ {question.category}: Selected option {selected_key}"
ELSE:
ERROR: "Invalid selection format. Expected 'a) ...' format"
EXIT workflow
// Extract option key from selection text
match = selected_option_text.match(/^([a-e])\)/)
IF match:
selected_key = match[1]
user_answers[question.category] = selected_key
REPORT: "✅ {question.category}: Selected option {selected_key}"
ELSE:
ERROR: "Invalid selection format. Expected 'a) ...' format"
EXIT workflow
REPORT: "✅ Collected {Object.keys(user_answers).length} animation preferences"
REPORT: "✅ Collected {Object.keys(user_answers).length} animation preferences"
ELSE:
// REFINEMENT MODE - Multi-selection of refinements
AskUserQuestion({
questions: [{
question: "Which refinement(s) would you like to apply to your animation system?",
header: "Refinements",
multiSelect: true, // Can select multiple refinements
options: [
{FOR each refinement IN refinement_options:
label: "{refinement.id}. {refinement.label}",
description: "{refinement.description} (Affects: {refinement.impact_scope})"
}
]
}]
})
// Parse user response (multi-selection)
selected_refinements = user_answer
// Check for user cancellation
IF selected_refinements == null:
REPORT: "⚠️ User canceled selection. No refinements will be applied."
EXIT Phase 1.5
// Extract refinement IDs
selected_ids = []
FOR each selection IN selected_refinements:
match = selection.match(/^(\d+)\./)
IF match:
selected_ids.push(parseInt(match[1]))
REPORT: "✅ Selected {selected_ids.length} refinement(s) to apply"
```
### Step 5: Update Options File with User Selection
```bash
# Update analysis-options.json with user selection (embedded)
options.user_selection = {
"selected_at": "{current_timestamp}",
"session_id": "{session_id}",
"answers": user_answers // {category: selected_key}
}
IF NOT refine_mode:
# EXPLORATION MODE - Update analysis-options.json
options.user_selection = {
"selected_at": "{current_timestamp}",
"session_id": "{session_id}",
"answers": user_answers // {category: selected_key}
}
# Write updated file back
Write({base_path}/.intermediates/animation-analysis/analysis-options.json, JSON.stringify(options, indent=2))
# Write updated file back
Write({base_path}/.intermediates/animation-analysis/analysis-options.json, JSON.stringify(options, indent=2))
# Verify
bash(test -f {base_path}/.intermediates/animation-analysis/analysis-options.json && echo "saved")
# Verify
bash(test -f {base_path}/.intermediates/animation-analysis/analysis-options.json && echo "saved")
ELSE:
# REFINEMENT MODE - Update refinement-options.json
options.user_selection = {
"selected_at": "{current_timestamp}",
"session_id": "{session_id}",
"selected_refinements": selected_ids // Array of refinement IDs
}
# Write updated file back
Write({base_path}/.intermediates/animation-analysis/refinement-options.json, JSON.stringify(options, indent=2))
# Verify
bash(test -f {base_path}/.intermediates/animation-analysis/refinement-options.json && echo "saved")
```
### Step 6: Confirmation Message
```
✅ Animation preferences recorded!
IF NOT refine_mode:
// EXPLORATION MODE
✅ Animation preferences recorded!
You selected:
{FOR each category, selected_key IN user_answers:
question = find(specification_options, q => q.category == category)
option = find(question.options, o => o.key == selected_key)
• {category}: {option.label}
({option.details})
}
You selected:
{FOR each category, selected_key IN user_answers:
question = find(specification_options, q => q.category == category)
option = find(question.options, o => o.key == selected_key)
• {category}: {option.label}
({option.details})
}
Proceeding to generate animation system with your preferences...
Proceeding to generate animation system with your preferences...
ELSE:
// REFINEMENT MODE
✅ Refinement selections recorded!
You selected {selected_ids.length} refinement(s):
{FOR each id IN selected_ids:
refinement = find(refinement_options, r => r.id == id)
• {refinement.label} ({refinement.category})
Impact: {refinement.impact_scope}
}
Proceeding to apply refinements to animation system...
```
**Output**: Updated `analysis-options.json` with embedded `user_selection` field
**Output**:
- Exploration mode: Updated `analysis-options.json` with embedded `user_selection` field
- Refinement mode: Updated `refinement-options.json` with `user_selection.selected_refinements` array
## Phase 2: Animation System Generation (Agent Task 2)
@@ -452,21 +646,35 @@ Proceeding to generate animation system with your preferences...
### Step 1: Load User Selection or Use Defaults
```bash
# Read analysis-options.json which may contain user_selection
options = Read({base_path}/.intermediates/animation-analysis/analysis-options.json)
specification_options = options.specification_options
IF NOT refine_mode:
# EXPLORATION MODE - Read analysis-options.json
options = Read({base_path}/.intermediates/animation-analysis/analysis-options.json)
specification_options = options.specification_options
# Check if user_selection field exists (interactive mode)
IF options.user_selection AND options.user_selection.answers:
# Interactive mode: Use user-selected preferences
user_answers = options.user_selection.answers
# Check if user_selection field exists (interactive mode)
IF options.user_selection AND options.user_selection.answers:
# Interactive mode: Use user-selected preferences
user_answers = options.user_selection.answers
REPORT: "🎯 Interactive mode: Using user-selected animation preferences"
ELSE:
# Non-interactive mode: Use defaults (first option for each question)
user_answers = null
REPORT: "ℹ️ Non-interactive mode: Using default animation preferences"
REPORT: "🎯 Interactive mode: Using user-selected animation preferences"
ELSE:
# Non-interactive mode: Use defaults (first option for each question)
user_answers = null
# REFINEMENT MODE - Read refinement-options.json
options = Read({base_path}/.intermediates/animation-analysis/refinement-options.json)
refinement_options = options.refinement_options
REPORT: "ℹ️ Non-interactive mode: Using default animation preferences"
# Check if user_selection field exists (interactive mode)
IF options.user_selection AND options.user_selection.selected_refinements:
# Interactive mode: Use user-selected refinements
selected_refinements = options.user_selection.selected_refinements
REPORT: "🎯 Interactive mode: Applying {selected_refinements.length} selected refinement(s)"
ELSE:
# Non-interactive mode: Apply all refinements
selected_refinements = null
REPORT: "ℹ️ Non-interactive mode: Applying all refinements"
# Load extracted animations if available
extracted_animations = []
@@ -487,14 +695,16 @@ bash(mkdir -p {base_path}/animation-extraction)
### Step 3: Launch Animation Generation Task
Generate animation system based on user preferences (or defaults) + CSS extraction:
**Conditional Task**: Branch based on `refine_mode` flag
```javascript
Task(ui-design-agent): `
[ANIMATION_SYSTEM_GENERATION_TASK]
Generate production-ready animation system based on user preferences and CSS extraction
IF NOT refine_mode:
// EXPLORATION MODE
Task(ui-design-agent): `
[ANIMATION_SYSTEM_GENERATION_TASK]
Generate production-ready animation system based on user preferences and CSS extraction
SESSION: {session_id} | BASE_PATH: {base_path}
SESSION: {session_id} | MODE: explore | BASE_PATH: {base_path}
USER PREFERENCES:
${user_answers ? "- User Selection: " + JSON.stringify(user_answers) : "- Using Defaults: First option for each category"}
@@ -659,10 +869,98 @@ Task(ui-design-agent): `
- ${user_answers ? "✅ READ analysis-options.json for user_selection field" : "✅ Use first option from each question as default"}
- ❌ NO user questions or interaction in this phase
- ❌ NO external research or MCP calls
`
`
ELSE:
// REFINEMENT MODE
Task(ui-design-agent): `
[ANIMATION_SYSTEM_REFINEMENT_TASK]
Apply selected refinements to existing animation system
SESSION: {session_id} | MODE: refine | BASE_PATH: {base_path}
## Load Existing Animation System
- Current tokens: Read from {base_path}/animation-extraction/animation-tokens.json
- Refinement options: Read from .intermediates/animation-analysis/refinement-options.json
REFINEMENT SELECTION:
${selected_refinements ? `
- Interactive mode: Apply selected refinements
- Selected IDs: ${JSON.stringify(selected_refinements)}
- For each ID in selected_refinements:
* Find refinement in refinement_options by id
* Apply technical_changes to corresponding tokens
` : `
- Non-interactive mode: Apply ALL refinements
- For each refinement in refinement_options:
* Apply technical_changes to corresponding tokens
`}
## Input Analysis
- CSS extraction: {extracted_animations.length > 0 ? "Available" : "None"}
${extracted_animations.length > 0 ? "- CSS Data: " + JSON.stringify(extracted_animations) : ""}
- Design context: {has_design_context ? "Available" : "None"}
${has_design_context ? "- Design Tokens: Read from style-extraction/style-1/design-tokens.json" : ""}
## Refinement Application Rules
${selected_refinements ? `
- ONLY apply refinements with IDs in selected_refinements array
- Skip refinements not selected by user
` : `
- Apply ALL refinements from refinement_options
- Combine multiple refinements that affect same token
`}
- Load current animation-tokens.json
- For each applicable refinement:
* Parse technical_changes field
* Apply "to" values to replace "from" values in tokens
* Preserve structure and var() references
- If multiple refinements affect same token, apply in sequence
- Maintain WCAG compliance and semantic naming
- All tokens use CSS Custom Property format: var(--duration-fast)
## Conflict Resolution
- If multiple selected refinements modify same token:
* Apply refinements in ID order (lowest first)
* Later refinements override earlier ones
* Document conflicts in animation-guide.md
## Generate Updated Files
### 1. animation-tokens.json
Updated animation token structure with refinements applied:
- Load existing structure
- Apply technical_changes from selected/all refinements
- Maintain var() references and semantic naming
- Validate all cubic-bezier values
### 2. animation-guide.md
Updated usage guide with refinement documentation:
- Original sections (Animation Philosophy, Duration Scale, etc.)
- **NEW: Refinement History** section:
* Applied refinements list
* Before/after comparisons
* Rationale for changes
* Migration notes if needed
## Output File Paths
- animation-tokens.json: {base_path}/animation-extraction/animation-tokens.json (OVERWRITE)
- animation-guide.md: {base_path}/animation-extraction/animation-guide.md (UPDATE with refinement history)
## Critical Requirements
- ✅ Use Write() tool immediately for both files
- ✅ OVERWRITE existing animation-tokens.json with refined version
- ✅ UPDATE animation-guide.md (don't overwrite, add refinement history section)
- ✅ All tokens use CSS Custom Property format: var(--duration-fast)
- ✅ Include prefers-reduced-motion media query guidance
- ✅ Validate all cubic-bezier values are valid (4 numbers between 0-1)
- ${selected_refinements ? "✅ READ refinement-options.json for user_selection.selected_refinements" : "✅ Apply ALL refinements from refinement_options"}
- ❌ NO user questions or interaction in this phase
- ❌ NO external research or MCP calls
`
```
**Output**: Agent generates 2 files (animation-tokens.json, animation-guide.md)
**Output**: Agent generates/updates 2 files (animation-tokens.json, animation-guide.md)
## Phase 3: Verify Output

445
.claude/commands/workflow/ui-design/imitate-auto.md
View File

@@ -1,7 +1,7 @@
---
name: imitate-auto
description: High-speed multi-page UI replication with batch screenshot capture and design token extraction
argument-hint: --url-map "<map>" [--capture-mode <batch|deep>] [--depth <1-5>] [--session <id>] [--prompt "<desc>"]
description: UI design workflow with direct code/image input for design token extraction and prototype generation
argument-hint: "[--images "<glob>"] [--prompt "<desc>"] [--session <id>]"
allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Write(*), Bash(*)
---
@@ -9,79 +9,72 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Write(*), Bash(*)
## Overview & Execution Model
**Fully autonomous replication orchestrator**: Efficiently replicate multiple web pages through sequential execution from screenshot capture to design integration.
**Fully autonomous design orchestrator**: Efficiently create UI prototypes through sequential execution from design token extraction to system integration.
**Dual Capture Strategy**: Supports two capture modes for different use cases:
- **Batch Mode** (default): Fast multi-URL screenshot capture via `/workflow:ui-design:capture`
- **Deep Mode**: Interactive layer exploration for single URL via `/workflow:ui-design:explore-layers`
**Direct Input Strategy**: Accepts local code files and images:
- **Code Files**: Detect file paths in `--prompt` parameter
- **Images**: Reference images via `--images` glob pattern
- **Hybrid**: Combine both code and visual inputs
**Autonomous Flow** (⚠️ CONTINUOUS EXECUTION - DO NOT STOP):
1. User triggers: `/workflow:ui-design:imitate-auto --url-map "..."`
2. Phase 0: Initialize and parse parameters
3. Phase 1: Screenshot capture (batch or deep mode) → **Execute phase (blocks until finished)** → Auto-continues
4. Phase 2: Style extraction (complete design systems) → **Execute phase (blocks until finished)** → Auto-continues
5. Phase 2.3: Animation extraction (CSS auto mode) → **Execute phase (blocks until finished)** → Auto-continues
6. Phase 2.5: Layout extraction (structure templates) → **Execute phase (blocks until finished)** → Auto-continues
7. Phase 3: Batch UI assembly → **Execute phase (blocks until finished)** → Auto-continues
8. Phase 4: Design system integration → Reports completion
1. User triggers: `/workflow:ui-design:imitate-auto [--images "..."] [--prompt "..."]`
2. Phase 0: Initialize and detect input sources
3. Phase 2: Style extraction (complete design systems) → **Execute phase (blocks until finished)** → Auto-continues
4. Phase 2.3: Animation extraction (CSS auto mode) → **Execute phase (blocks until finished)** → Auto-continues
5. Phase 2.5: Layout extraction (structure templates) → **Execute phase (blocks until finished)** → Auto-continues
6. Phase 3: Batch UI assembly → **Execute phase (blocks until finished)** → Auto-continues
7. Phase 4: Design system integration → Reports completion
**Phase Transition Mechanism**:
- `SlashCommand` is BLOCKING - execution pauses until the command finishes
- When each phase finishes executing: Automatically process output and execute next phase
- No user interaction required after initial parameter parsing
**Auto-Continue Mechanism**: TodoWrite tracks phase status. When each phase finishes executing, you MUST immediately construct and execute the next phase command. No user intervention required. The workflow is NOT complete until reaching Phase 5.
**Auto-Continue Mechanism**: TodoWrite tracks phase status. When each phase finishes executing, you MUST immediately construct and execute the next phase command. No user intervention required. The workflow is NOT complete until reaching Phase 4.
## Core Rules
1. **Start Immediately**: TodoWrite initialization → Phase 1 execution
1. **Start Immediately**: TodoWrite initialization → Phase 2 execution
2. **No Preliminary Validation**: Sub-commands handle their own validation
3. **Parse & Pass**: Extract data from each output for next phase
4. **Track Progress**: Update TodoWrite after each phase
5. **⚠️ CRITICAL: DO NOT STOP** - This is a continuous multi-phase workflow. Each SlashCommand execution blocks until finished, then you MUST immediately execute the next phase. Workflow is NOT complete until Phase 5.
5. **⚠️ CRITICAL: DO NOT STOP** - This is a continuous multi-phase workflow. Each SlashCommand execution blocks until finished, then you MUST immediately execute the next phase. Workflow is NOT complete until Phase 4.
## Parameter Requirements
**Required Parameters**:
- `--url-map "<map>"`: Target page mapping
- Format: `"target1:url1, target2:url2, ..."`
- Example: `"home:https://linear.app, pricing:https://linear.app/pricing"`
- First target serves as primary style source
**Optional Parameters** (at least one of --images or --prompt required):
- `--images "<glob>"`: Reference image paths (e.g., `"design-refs/*"`, `"screenshots/*.png"`)
- Glob patterns supported
- Multiple images can be matched
**Optional Parameters**:
- `--capture-mode <batch|deep>` (Optional, default: batch): Screenshot capture strategy
- `batch` (default): Multi-URL fast batch capture via `/workflow:ui-design:capture`
- `deep`: Single-URL interactive depth exploration via `/workflow:ui-design:explore-layers`
- **Note**: `deep` mode only uses first URL from url-map
- `--depth <1-5>` (Optional, default: 3): Capture depth for deep mode
- `1`: Page level (full-page screenshot)
- `2`: Element level (+ key components)
- `3`: Interaction level (+ modals, dropdowns)
- `4`: Embedded level (+ iframes)
- `5`: Shadow DOM (+ web components)
- **Only applies when** `--capture-mode deep`
- `--prompt "<desc>"`: Design description or file path
- Can contain file paths (automatically detected)
- Influences extract command analysis focus
- Example: `"Focus on dark mode"`, `"Emphasize minimalist design"`
- Example with path: `"Use design from ./src/components"`
- `--session <id>` (Optional): Workflow session ID
- Integrate into existing session (`.workflow/WFS-{session}/`)
- Enable automatic design system integration (Phase 5)
- Enable automatic design system integration (Phase 4)
- If not provided: standalone mode (`.workflow/.design/`)
- `--prompt "<desc>"` (Optional): Style extraction guidance
- Influences extract command analysis focus
- Example: `"Focus on dark mode"`, `"Emphasize minimalist design"`
- **Note**: Design systems are now production-ready by default (no separate consolidate step)
**Input Rules**:
- Must provide at least one: `--images` or `--prompt`
- Multiple parameters can be combined for guided analysis
- File paths in `--prompt` are automatically detected and imported
## Execution Modes
**Capture Modes**:
- **Batch Mode** (default): Multi-URL screenshot capture for fast replication
- Uses `/workflow:ui-design:capture` for parallel screenshot capture
- Optimized for replicating multiple pages efficiently
- **Deep Mode**: Single-URL layer exploration for detailed analysis
- Uses `/workflow:ui-design:explore-layers` for interactive depth traversal
- Captures page layers at different depths (1-5)
- Only processes first URL from url-map
**Input Sources**:
- **Code Files**: Automatically detected from `--prompt` file paths
- Triggers `/workflow:ui-design:import-from-code` for token extraction
- Analyzes existing CSS/JS/HTML files
- **Visual Input**: Images via `--images` glob pattern
- Reference images for style extraction
- Screenshots or design mockups
- **Hybrid Mode**: Combines code import with visual supplements
- Code provides base tokens
- Images supplement missing design elements
**Token Processing**:
- **Direct Generation**: Complete design systems generated in style-extract phase
@@ -94,15 +87,47 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Write(*), Bash(*)
- Integrated: Design system automatically added to session artifacts
- Standalone: Output in `.workflow/.design/{run_id}/`
## 6-Phase Execution
## 5-Phase Execution
### Phase 0: Initialization and Target Parsing
### Phase 0: Intelligent Path Detection & Initialization
```bash
# Generate design ID (ID = directory name)
# Step 1: Detect design source from inputs
code_files_detected = false
code_base_path = null
has_visual_input = false
IF --prompt:
# Extract potential file paths from prompt
potential_paths = extract_paths_from_text(--prompt)
FOR path IN potential_paths:
IF file_or_directory_exists(path):
code_files_detected = true
code_base_path = path
BREAK
IF --images:
# Check if images parameter points to existing files
IF glob_matches_files(--images):
has_visual_input = true
# Step 2: Determine design source strategy
design_source = "unknown"
IF code_files_detected AND has_visual_input:
design_source = "hybrid" # Both code and visual
ELSE IF code_files_detected:
design_source = "code_only" # Only code files
ELSE IF has_visual_input OR --prompt:
design_source = "visual_only" # Only visual/prompt
ELSE:
ERROR: "No design source provided (code files, images, or prompt required)"
EXIT 1
STORE: design_source, code_base_path, has_visual_input
# Step 3: Initialize directories
design_id = "design-run-$(date +%Y%m%d)-$RANDOM"
# Determine base path and session mode
IF --session:
session_id = {provided_session}
relative_base_path = ".workflow/WFS-{session_id}/{design_id}"
@@ -116,100 +141,36 @@ ELSE:
Bash(mkdir -p "{relative_base_path}")
base_path=$(cd "{relative_base_path}" && pwd)
# Step 0.1: Intelligent Path Detection
code_files_detected = false
code_base_path = null
design_source = "web" # Default for imitate-auto
IF --prompt:
# Extract potential file paths from prompt
potential_paths = extract_paths_from_text(--prompt)
FOR path IN potential_paths:
IF file_or_directory_exists(path):
code_files_detected = true
code_base_path = path
design_source = "hybrid" # Web + Code
BREAK
STORE: design_source, code_base_path
# Parse url-map
url_map_string = {--url-map}
VALIDATE: url_map_string is not empty, "--url-map parameter is required"
# Parse target:url pairs
url_map = {} # {target_name: url}
target_names = []
FOR pair IN split(url_map_string, ","):
pair = pair.strip()
IF ":" NOT IN pair:
ERROR: "Invalid url-map format: '{pair}'"
ERROR: "Expected format: 'target:url'"
ERROR: "Example: 'home:https://example.com, pricing:https://example.com/pricing'"
EXIT 1
target, url = pair.split(":", 1)
target = target.strip().lower().replace(" ", "-")
url = url.strip()
url_map[target] = url
target_names.append(target)
VALIDATE: len(target_names) > 0, "url-map must contain at least one target:url pair"
primary_target = target_names[0] # First target as primary style source
# Parse capture mode
capture_mode = --capture-mode OR "batch"
depth = int(--depth OR 3)
# Validate capture mode
IF capture_mode NOT IN ["batch", "deep"]:
ERROR: "Invalid --capture-mode: {capture_mode}"
ERROR: "Valid options: batch, deep"
EXIT 1
# Validate depth (only for deep mode)
IF capture_mode == "deep":
IF depth NOT IN [1, 2, 3, 4, 5]:
ERROR: "Invalid --depth: {depth}"
ERROR: "Valid range: 1-5"
EXIT 1
# Warn if multiple URLs in deep mode
IF len(target_names) > 1:
WARN: "⚠️ Deep mode only uses first URL: '{primary_target}'"
WARN: " Other URLs will be ignored: {', '.join(target_names[1:])}"
WARN: " For multi-URL, use --capture-mode batch"
# Write metadata
metadata = {
"workflow": "imitate-auto",
"run_id": run_id,
"run_id": design_id,
"session_id": session_id,
"timestamp": current_timestamp(),
"parameters": {
"url_map": url_map,
"capture_mode": capture_mode,
"depth": depth IF capture_mode == "deep" ELSE null,
"design_source": design_source,
"code_base_path": code_base_path,
"images": --images OR null,
"prompt": --prompt OR null
},
"targets": target_names,
"status": "in_progress"
}
Write("{base_path}/.run-metadata.json", JSON.stringify(metadata, null, 2))
# Initialize default flags
animation_complete = false
needs_visual_supplement = false
style_complete = false
layout_complete = false
# Initialize TodoWrite
TodoWrite({todos: [
{content: "Initialize and parse url-map", status: "completed", activeForm: "Initializing"},
{content: capture_mode == "batch" ? f"Batch screenshot capture ({len(target_names)} targets)" : f"Deep exploration (depth {depth})", status: "pending", activeForm: "Capturing screenshots"},
{content: "Initialize and detect design source", status: "completed", activeForm: "Initializing"},
{content: "Extract style (complete design systems)", status: "pending", activeForm: "Extracting style"},
{content: "Extract animation (CSS auto mode)", status: "pending", activeForm: "Extracting animation"},
{content: "Extract layout (structure templates)", status: "pending", activeForm: "Extracting layout"},
{content: f"Assemble UI for {len(target_names)} targets", status: "pending", activeForm: "Assembling UI"},
{content: "Assemble UI prototypes", status: "pending", activeForm: "Assembling UI"},
{content: session_id ? "Integrate design system" : "Standalone completion", status: "pending", activeForm: "Completing"}
]})
```
@@ -310,105 +271,36 @@ IF design_source == "hybrid":
STORE: style_complete, animation_complete, layout_complete
TodoWrite(mark_completed: "Initialize and parse url-map",
mark_in_progress: capture_mode == "batch" ? f"Batch screenshot capture ({len(target_names)} targets)" : f"Deep exploration (depth {depth})")
```
### Phase 1: Screenshot Capture (Dual Mode)
```bash
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
REPORT: "🚀 Phase 1: Screenshot Capture"
IF design_source == "hybrid":
REPORT: " → Purpose: Verify and supplement code analysis"
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
IF capture_mode == "batch":
# Mode A: Batch Multi-URL Capture
url_map_command_string = ",".join([f"{name}:{url}" for name, url in url_map.items()])
capture_command = f"/workflow:ui-design:capture --design-id \"{design_id}\" --url-map \"{url_map_command_string}\""
TRY:
SlashCommand(capture_command)
CATCH error:
ERROR: "Batch capture failed: {error}"
ERROR: "Cannot proceed without screenshots"
EXIT 1
# Verify batch capture results
screenshot_metadata_path = "{base_path}/screenshots/capture-metadata.json"
IF NOT exists(screenshot_metadata_path):
ERROR: "capture command did not generate metadata file"
ERROR: "Expected: {screenshot_metadata_path}"
EXIT 1
screenshot_metadata = Read(screenshot_metadata_path)
captured_count = screenshot_metadata.total_captured
total_requested = screenshot_metadata.total_requested
missing_count = total_requested - captured_count
IF missing_count > 0:
missing_targets = [s.target for s in screenshot_metadata.screenshots if not s.captured]
WARN: "⚠️ Missing {missing_count} screenshots: {', '.join(missing_targets)}"
IF captured_count == 0:
ERROR: "No screenshots captured - cannot proceed"
EXIT 1
ELSE: # capture_mode == "deep"
# Mode B: Deep Interactive Layer Exploration
primary_url = url_map[primary_target]
explore_command = f"/workflow:ui-design:explore-layers --url \"{primary_url}\" --depth {depth} --design-id \"{design_id}\""
TRY:
SlashCommand(explore_command)
CATCH error:
ERROR: "Deep exploration failed: {error}"
ERROR: "Cannot proceed without screenshots"
EXIT 1
# Verify deep exploration results
layer_map_path = "{base_path}/screenshots/layer-map.json"
IF NOT exists(layer_map_path):
ERROR: "explore-layers did not generate layer-map.json"
ERROR: "Expected: {layer_map_path}"
EXIT 1
layer_map = Read(layer_map_path)
captured_count = layer_map.summary.total_captures
total_requested = captured_count # For consistency with batch mode
TodoWrite(mark_completed: f"Batch screenshot capture ({len(target_names)} targets)" IF capture_mode == "batch" ELSE f"Deep exploration (depth {depth})",
mark_in_progress: "Extract style (visual tokens)")
TodoWrite(mark_completed: "Initialize and detect design source",
mark_in_progress: "Extract style (complete design systems)")
```
### Phase 2: Style Extraction
```bash
# Determine if style extraction needed
skip_style = (design_source == "hybrid" AND style_complete)
skip_style = (design_source == "code_only" AND style_complete)
IF skip_style:
REPORT: "✅ Phase 2: Style (Using Code Import)"
ELSE:
REPORT: "🚀 Phase 2: Style Extraction"
IF capture_mode == "batch":
images_glob = f"{base_path}/screenshots/*.{{png,jpg,jpeg,webp}}"
ELSE:
images_glob = f"{base_path}/screenshots/**/*.{{png,jpg,jpeg,webp}}"
# Build command with available inputs
command_parts = [f"/workflow:ui-design:style-extract --design-id \"{design_id}\""]
IF --images:
command_parts.append(f"--images \"{--images}\"")
IF --prompt:
extraction_prompt = f"Extract visual style tokens from '{primary_target}'. {--prompt}"
ELSE:
extraction_prompt = --prompt
IF design_source == "hybrid":
extraction_prompt = f"Extract visual style tokens from '{primary_target}' to supplement code-imported design tokens."
ELSE:
extraction_prompt = f"Extract visual style tokens from '{primary_target}' with consistency across all pages."
extraction_prompt = f"{--prompt} (supplement code-imported tokens)"
command_parts.append(f"--prompt \"{extraction_prompt}\"")
url_map_for_extract = ",".join([f"{name}:{url}" for name, url in url_map.items()])
extract_command = f"/workflow:ui-design:style-extract --design-id \"{design_id}\" --images \"{images_glob}\" --urls \"{url_map_for_extract}\" --prompt \"{extraction_prompt}\" --variants 1 --interactive"
command_parts.extend(["--variants 1", "--interactive"])
extract_command = " ".join(command_parts)
SlashCommand(extract_command)
TodoWrite(mark_completed: "Extract style", mark_in_progress: "Extract animation")
@@ -417,29 +309,42 @@ TodoWrite(mark_completed: "Extract style", mark_in_progress: "Extract animation"
### Phase 2.3: Animation Extraction
```bash
skip_animation = (design_source == "hybrid" AND animation_complete)
skip_animation = (design_source == "code_only" AND animation_complete)
IF skip_animation:
REPORT: "✅ Phase 2.3: Animation (Using Code Import)"
ELSE:
REPORT: "🚀 Phase 2.3: Animation Extraction"
url_map_for_animation = ",".join([f"{target}:{url}" for target, url in url_map.items()])
animation_extract_command = f"/workflow:ui-design:animation-extract --design-id \"{design_id}\" --urls \"{url_map_for_animation}\" --mode auto"
animation_extract_command = f"/workflow:ui-design:animation-extract --design-id \"{design_id}\" --interactive"
SlashCommand(animation_extract_command)
TodoWrite(mark_completed: "Extract animation", mark_in_progress: "Extract layout")
```
### Phase 2.5: Layout Extraction
```bash
skip_layout = (design_source == "hybrid" AND layout_complete)
skip_layout = (design_source == "code_only" AND layout_complete)
IF skip_layout:
REPORT: "✅ Phase 2.5: Layout (Using Code Import)"
ELSE:
REPORT: "🚀 Phase 2.5: Layout Extraction"
url_map_for_layout = ",".join([f"{target}:{url}" for target, url in url_map.items()])
layout_extract_command = f"/workflow:ui-design:layout-extract --design-id \"{design_id}\" --images \"{images_glob}\" --urls \"{url_map_for_layout}\" --targets \"{','.join(target_names)}\" --variants 1 --interactive"
# Build command with available inputs
command_parts = [f"/workflow:ui-design:layout-extract --design-id \"{design_id}\""]
IF --images:
command_parts.append(f"--images \"{--images}\"")
IF --prompt:
command_parts.append(f"--prompt \"{--prompt}\"")
# Default target if not specified
command_parts.append("--targets \"home\"")
command_parts.extend(["--variants 1", "--interactive"])
layout_extract_command = " ".join(command_parts)
SlashCommand(layout_extract_command)
TodoWrite(mark_completed: "Extract layout", mark_in_progress: "Assemble UI")
@@ -490,7 +395,7 @@ TodoWrite({todos: [
]})
```
### Phase 6: Completion Report
### Phase 4: Completion Report
**Completion Message**:
```
@@ -500,26 +405,24 @@ TodoWrite({todos: [
━━━ 📊 Workflow Summary ━━━
Mode: {capture_mode == "batch" ? "Batch Multi-Page Replication" : f"Deep Interactive Exploration (depth {depth})"}
Mode: Direct Input ({design_source})
Session: {session_id or "standalone"}
Run ID: {run_id}
Phase 1 - Screenshot Capture: ✅ {IF capture_mode == "batch": f"{captured_count}/{total_requested} screenshots" ELSE: f"{captured_count} screenshots ({total_layers} layers)"}
{IF capture_mode == "batch" AND captured_count < total_requested: f"⚠️ {total_requested - captured_count} missing" ELSE: "All targets captured"}
Phase 0 - Input Detection: ✅ {design_source} mode
{IF design_source == "code_only": "Code files imported" ELSE IF design_source == "hybrid": "Code + visual inputs" ELSE: "Visual inputs"}
Phase 2 - Style Extraction: ✅ Production-ready design systems
Output: style-extraction/style-1/ (design-tokens.json + style-guide.md)
Quality: WCAG AA compliant, OKLCH colors
Phase 2.3 - Animation Extraction: ✅ CSS animations and transitions
Phase 2.3 - Animation Extraction: ✅ Animation tokens
Output: animation-extraction/ (animation-tokens.json + animation-guide.md)
Method: Auto-extracted from live URLs via Chrome DevTools
Phase 2.5 - Layout Extraction: ✅ Structure templates
Templates: {template_count} layout structures
Phase 3 - UI Assembly: ✅ {generated_count} pages assembled
Targets: {', '.join(target_names)}
Phase 3 - UI Assembly: ✅ {generated_count} prototypes assembled
Configuration: 1 style × 1 layout × {generated_count} pages
Phase 4 - Integration: {IF session_id: "✅ Integrated into session" ELSE: "⏭️ Standalone mode"}
@@ -527,20 +430,6 @@ Phase 4 - Integration: {IF session_id: "✅ Integrated into session" ELSE: "⏭
━━━ 📂 Output Structure ━━━
{base_path}/
├── screenshots/ # {captured_count} screenshots
{IF capture_mode == "batch":
│ ├── {target1}.png
│ ├── {target2}.png
│ └── capture-metadata.json
ELSE:
│ ├── depth-1/
│ │ └── full-page.png
│ ├── depth-2/
│ │ └── {elements}.png
│ ├── depth-{depth}/
│ │ └── {layers}.png
│ └── layer-map.json
}
├── style-extraction/ # Production-ready design systems
│ └── style-1/
│ ├── design-tokens.json
@@ -549,19 +438,18 @@ ELSE:
│ ├── animation-tokens.json
│ └── animation-guide.md
├── layout-extraction/ # Structure templates
│ └── layout-{target}-1.json # One file per target
│ └── layout-home-1.json # Layout templates
└── prototypes/ # {generated_count} HTML/CSS files
├── {target1}-style-1-layout-1.html + .css
├── {target2}-style-1-layout-1.html + .css
├── home-style-1-layout-1.html + .css
├── compare.html # Interactive preview
└── index.html # Quick navigation
━━━ ⚡ Performance ━━━
Total workflow time: ~{estimate_total_time()} minutes
Screenshot capture: ~{capture_time}
Style extraction: ~{extract_time}
Token processing: ~{token_processing_time}
Animation extraction: ~{animation_time}
Layout extraction: ~{layout_time}
UI generation: ~{generate_time}
━━━ 🌐 Next Steps ━━━
@@ -592,15 +480,15 @@ ELSE:
```javascript
// Initialize IMMEDIATELY at start of Phase 0 to track multi-phase execution
TodoWrite({todos: [
{content: "Initialize and parse url-map", status: "in_progress", activeForm: "Initializing"},
{content: "Batch screenshot capture", status: "pending", activeForm: "Capturing screenshots"},
{content: "Initialize and detect design source", status: "in_progress", activeForm: "Initializing"},
{content: "Extract style (complete design systems)", status: "pending", activeForm: "Extracting style"},
{content: "Extract animation (CSS auto mode)", status: "pending", activeForm: "Extracting animation"},
{content: "Extract layout (structure templates)", status: "pending", activeForm: "Extracting layout"},
{content: "Assemble UI for all targets", status: "pending", activeForm: "Assembling UI"},
{content: "Assemble UI prototypes", status: "pending", activeForm: "Assembling UI"},
{content: "Integrate design system", status: "pending", activeForm: "Integrating"}
]})
// ⚠️ CRITICAL: When each SlashCommand execution finishes (Phase 1-5), you MUST:
// ⚠️ CRITICAL: When each SlashCommand execution finishes (Phase 2-4), you MUST:
// 1. SlashCommand blocks and returns when phase finishes executing
// 2. Update current phase: status → "completed"
// 3. Update next phase: status → "in_progress"
@@ -611,46 +499,48 @@ TodoWrite({todos: [
## Error Handling
### Pre-execution Checks
- **url-map format validation**: Clear error message with format example
- **Empty url-map**: Error and exit
- **Invalid target names**: Regex validation with suggestions
- **Input validation**: Must provide at least one of --images or --prompt
- **Design source detection**: Error if no valid inputs found
- **Code import failure**: Fallback to visual-only mode in hybrid, error in code-only mode
### Phase-Specific Errors
- **Screenshot capture failure (Phase 1)**:
- If total_captured == 0: Terminate workflow
- If partial failure: Warn but continue with available screenshots
- **Code import failure (Phase 0.5)**:
- code_only mode: Terminate with clear error
- hybrid mode: Warn and fallback to visual-only mode
- **Style extraction failure (Phase 2)**:
- If extract fails: Terminate with clear error
- If style-cards.json missing: Terminate with debugging info
- If design-tokens.json missing: Terminate with debugging info
- **Token processing failure (Phase 3)**:
- Consolidate mode: Terminate if consolidate fails
- Fast mode: Validate proposed_tokens exist before copying
- **Animation extraction failure (Phase 2.3)**:
- Non-critical: Warn but continue
- Can proceed without animation tokens
- **UI generation failure (Phase 4)**:
- **Layout extraction failure (Phase 2.5)**:
- If extract fails: Terminate with error
- Need layout templates for assembly
- **UI generation failure (Phase 3)**:
- If generate fails: Terminate with error
- If generated_count < target_count: Warn but proceed
- If generated_count < expected: Warn but proceed
- **Integration failure (Phase 5)**:
- **Integration failure (Phase 4)**:
- Non-blocking: Warn but don't terminate
- Prototypes already available
### Recovery Strategies
- **Partial screenshot failure**: Continue with available screenshots, list missing in warning
- **Generate failure**: Report specific target failures, user can re-generate individually
- **Code import failure**: Automatic fallback to visual-only in hybrid mode
- **Generate failure**: Report specific failures, user can re-generate individually
- **Integration failure**: Prototypes still usable, can integrate manually
## Integration Points
- **Input**: `--url-map` (multiple target:url pairs) + optional `--capture-mode`, `--depth`, `--session`, `--prompt`
- **Output**: Complete design system in `{base_path}/` (screenshots, style-extraction, layout-extraction, prototypes)
- **Input**: `--images` (glob pattern) and/or `--prompt` (text/file paths) + optional `--session`
- **Output**: Complete design system in `{base_path}/` (style-extraction, layout-extraction, prototypes)
- **Sub-commands Called**:
1. Phase 1 (conditional):
- `--capture-mode batch`: `/workflow:ui-design:capture` (multi-URL batch)
- `--capture-mode deep`: `/workflow:ui-design:explore-layers` (single-URL depth exploration)
1. `/workflow:ui-design:import-from-code` (Phase 0.5, conditional - if code files detected)
2. `/workflow:ui-design:style-extract` (Phase 2 - complete design systems)
3. `/workflow:ui-design:animation-extract` (Phase 2.3 - CSS animations and transitions)
3. `/workflow:ui-design:animation-extract` (Phase 2.3 - animation tokens)
4. `/workflow:ui-design:layout-extract` (Phase 2.5 - structure templates)
5. `/workflow:ui-design:generate` (Phase 3 - pure assembly)
6. `/workflow:ui-design:update` (Phase 4, if --session)
@@ -660,30 +550,31 @@ TodoWrite({todos: [
```
✅ UI Design Imitate-Auto Workflow Complete!
Mode: {capture_mode} | Session: {session_id or "standalone"}
Mode: Direct Input ({design_source}) | Session: {session_id or "standalone"}
Run ID: {run_id}
Phase 1 - Screenshot Capture: ✅ {captured_count} screenshots
Phase 0 - Input Detection: ✅ {design_source} mode
Phase 2 - Style Extraction: ✅ Production-ready design systems
Phase 2.3 - Animation Extraction: ✅ Animation tokens
Phase 2.5 - Layout Extraction: ✅ Structure templates
Phase 3 - UI Assembly: ✅ {generated_count} pages assembled
Phase 3 - UI Assembly: ✅ {generated_count} prototypes assembled
Phase 4 - Integration: {IF session_id: "✅ Integrated" ELSE: "⏭️ Standalone"}
Design Quality:
✅ High-Fidelity Replication: Accurate style from primary target
✅ Token-Driven Styling: 100% var() usage
✅ Production-Ready: WCAG AA compliant, OKLCH colors
✅ Multi-Source: Code import + visual extraction
📂 {base_path}/
├── screenshots/ # {captured_count} screenshots
├── style-extraction/style-1/ # Production-ready design system
├── animation-extraction/ # Animation tokens
├── layout-extraction/ # Structure templates
└── prototypes/ # {generated_count} HTML/CSS files
🌐 Preview: {base_path}/prototypes/compare.html
- Interactive preview
- Side-by-side comparison
- {generated_count} replicated pages
- Design token driven
- {generated_count} assembled prototypes
Next: [/workflow:execute] OR [Open compare.html → /workflow:plan]
```

162
.claude/commands/workflow/ui-design/layout-extract.md
View File

@@ -1,7 +1,7 @@
---
name: layout-extract
description: Extract structural layout information from reference images, URLs, or text prompts using Claude analysis
argument-hint: [--design-id <id>] [--session <id>] [--images "<glob>"] [--urls "<list>"] [--prompt "<desc>"] [--targets "<list>"] [--variants <count>] [--device-type <desktop|mobile|tablet|responsive>] [--interactive]
description: Extract structural layout information from reference images, URLs, or text prompts using Claude analysis with variant generation or refinement mode
argument-hint: [--design-id <id>] [--session <id>] [--images "<glob>"] [--urls "<list>"] [--prompt "<desc>"] [--targets "<list>"] [--variants <count>] [--device-type <desktop|mobile|tablet|responsive>] [--interactive] [--refine]
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), Bash(*), AskUserQuestion(*), Task(ui-design-agent), mcp__exa__web_search_exa(*)
---
@@ -9,12 +9,16 @@ allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), Bash(*), AskUserQuestio
## Overview
Extract structural layout information from reference images, URLs, or text prompts using AI analysis. This command separates the "scaffolding" (HTML structure and CSS layout) from the "paint" (visual tokens handled by `style-extract`).
Extract structural layout information from reference images, URLs, or text prompts using AI analysis. Supports two modes:
1. **Exploration Mode** (default): Generate multiple contrasting layout variants
2. **Refinement Mode** (`--refine`): Refine a single existing layout through detailed adjustments
This command separates the "scaffolding" (HTML structure and CSS layout) from the "paint" (visual tokens handled by `style-extract`).
**Strategy**: AI-Driven Structural Analysis
- **Agent-Powered**: Uses `ui-design-agent` for deep structural analysis
- **Behavior**: Generate N layout concepts → User multi-select → Generate selected templates
- **Dual Mode**: Exploration (multiple contrasting variants) or Refinement (single layout fine-tuning)
- **Output**: `layout-templates.json` with DOM structure, component hierarchy, and CSS layout rules
- **Device-Aware**: Optimized for specific device types (desktop, mobile, tablet, responsive)
- **Token-Based**: CSS uses `var()` placeholders for spacing and breakpoints
@@ -43,10 +47,19 @@ ELSE:
has_urls = false
url_list = []
# Set variants count (default: 3, range: 1-5)
# Behavior: Generate N layout concepts per target → User multi-select → Generate selected templates
variants_count = --variants OR 3
VALIDATE: 1 <= variants_count <= 5
# Detect refinement mode
refine_mode = --refine OR false
# Set variants count
# Refinement mode: Force variants_count = 1 (ignore user-provided --variants)
# Exploration mode: Use --variants or default to 3 (range: 1-5)
IF refine_mode:
variants_count = 1
REPORT: "🔧 Refinement mode enabled: Will generate 1 refined layout per target"
ELSE:
variants_count = --variants OR 3
VALIDATE: 1 <= variants_count <= 5
REPORT: "🔍 Exploration mode: Will generate {variants_count} contrasting layout concepts per target"
# Resolve targets
# Priority: --targets → url_list targets → prompt analysis → default ["page"]
@@ -210,30 +223,46 @@ IF exists: SKIP to completion
**Phase 0 Output**: `input_mode`, `base_path`, `variants_count`, `targets[]`, `device_type`, loaded inputs
## Phase 1: Layout Concept Generation
## Phase 1: Layout Concept or Refinement Options Generation
### Step 1: Generate Layout Concept Options (Agent Task 1)
### Step 0.5: Load Existing Layout (Refinement Mode)
```bash
IF refine_mode:
# Load existing layout for refinement
existing_layouts = {}
FOR target IN targets:
layout_files = bash(find {base_path}/layout-extraction -name "layout-{target}-*.json" -print)
IF layout_files:
# Use first/latest layout file for this target
existing_layouts[target] = Read(first_layout_file)
```
### Step 1: Generate Options (Agent Task 1 - Mode-Specific)
**Executor**: `Task(ui-design-agent)`
Launch agent to generate `variants_count` layout concept options for each target:
**Exploration Mode** (default): Generate contrasting layout concepts
**Refinement Mode** (`--refine`): Generate refinement options for existing layouts
```javascript
Task(ui-design-agent): `
[LAYOUT_CONCEPT_GENERATION_TASK]
Generate {variants_count} structurally distinct layout concepts for each target
// Conditional agent task based on refine_mode
IF NOT refine_mode:
// EXPLORATION MODE
Task(ui-design-agent): `
[LAYOUT_CONCEPT_GENERATION_TASK]
Generate {variants_count} structurally distinct layout concepts for each target
SESSION: {session_id} | MODE: explore | BASE_PATH: {base_path}
TARGETS: {targets} | DEVICE_TYPE: {device_type}
SESSION: {session_id} | MODE: explore | BASE_PATH: {base_path}
TARGETS: {targets} | DEVICE_TYPE: {device_type}
## Input Analysis
- Targets: {targets.join(", ")}
- Device type: {device_type}
- Visual references: {loaded_images if available}
${dom_structure_available ? "- DOM Structure: Read from .intermediates/layout-analysis/dom-structure-*.json" : ""}
## Input Analysis
- Targets: {targets.join(", ")}
- Device type: {device_type}
- Visual references: {loaded_images if available}
${dom_structure_available ? "- DOM Structure: Read from .intermediates/layout-analysis/dom-structure-*.json" : ""}
## Analysis Rules
- For EACH target, generate {variants_count} structurally DIFFERENT layout concepts
- Concepts must differ in: grid structure, component arrangement, visual hierarchy
## Analysis Rules
- For EACH target, generate {variants_count} structurally DIFFERENT layout concepts
- Concepts must differ in: grid structure, component arrangement, visual hierarchy
- Each concept should have distinct navigation pattern, content flow, and responsive behavior
## Generate for EACH Target
@@ -261,7 +290,71 @@ Task(ui-design-agent): `
Use schema from INTERACTIVE-DATA-SPEC.md (Layout Extract: analysis-options.json)
CRITICAL: Use Write() tool immediately after generating complete JSON
`
`
ELSE:
// REFINEMENT MODE
Task(ui-design-agent): `
[LAYOUT_REFINEMENT_OPTIONS_TASK]
Generate refinement options for existing layout(s)
SESSION: {session_id} | MODE: refine | BASE_PATH: {base_path}
TARGETS: {targets} | DEVICE_TYPE: {device_type}
## Existing Layouts
${FOR target IN targets: "- {target}: {existing_layouts[target]}"}
## Input Guidance
- User prompt: {prompt_guidance if available}
- Visual references: {loaded_images if available}
## Refinement Categories
Generate 8-12 refinement options per target across these categories:
1. **Density Adjustments** (2-3 options per target):
- More compact: Tighter spacing, reduced whitespace
- More spacious: Increased margins, breathing room
- Balanced: Moderate adjustments
2. **Responsiveness Tuning** (2-3 options per target):
- Breakpoint behavior: Earlier/later column stacking
- Mobile layout: Different navigation/content priority
- Tablet optimization: Hybrid desktop/mobile approach
3. **Grid/Flex Specifics** (2-3 options per target):
- Column counts: 2-col ↔ 3-col ↔ 4-col
- Gap sizes: Tighter ↔ wider gutters
- Alignment: Different flex/grid justification
4. **Component Arrangement** (1-2 options per target):
- Navigation placement: Top ↔ side ↔ bottom
- Sidebar position: Left ↔ right ↔ none
- Content hierarchy: Different section ordering
## Output Format
Each option (per target):
- target: Which target this refinement applies to
- category: "density|responsiveness|grid|arrangement"
- option_id: unique identifier
- label: Short descriptive name (e.g., "More Compact Spacing")
- description: What changes (2-3 sentences)
- preview_changes: Key structural adjustments
- impact_scope: Which layout regions affected
## Output
Write single JSON file: {base_path}/.intermediates/layout-analysis/analysis-options.json
Use refinement schema:
{
"mode": "refinement",
"device_type": "{device_type}",
"refinement_options": {
"{target1}": [array of refinement options],
"{target2}": [array of refinement options]
}
}
CRITICAL: Use Write() tool immediately after generating complete JSON
`
```
### Step 2: Verify Options File Created
@@ -278,7 +371,9 @@ bash(cat {base_path}/.intermediates/layout-analysis/analysis-options.json | grep
## Phase 1.5: User Confirmation (Optional - Triggered by --interactive)
**Purpose**: Allow user to select preferred layout concept(s) for each target before generating detailed templates
**Purpose**:
- **Exploration Mode**: Allow user to select preferred layout concept(s) per target
- **Refinement Mode**: Allow user to select refinement options to apply per target
**Trigger Condition**: Execute this phase ONLY if `--interactive` flag is present
@@ -287,18 +382,27 @@ bash(cat {base_path}/.intermediates/layout-analysis/analysis-options.json | grep
# Skip this entire phase if --interactive flag is not present
IF NOT --interactive:
SKIP to Phase 2
IF refine_mode:
REPORT: "ℹ️ Non-interactive refinement mode: Will apply all suggested refinements"
ELSE:
REPORT: "ℹ️ Non-interactive mode: Will generate all {variants_count} variants per target"
# Interactive mode enabled
REPORT: "🎯 Interactive mode: User selection required for {targets.length} target(s)"
```
### Step 2: Load and Present Options
### Step 2: Load and Present Options (Mode-Specific)
```bash
# Read options file
options = Read({base_path}/.intermediates/layout-analysis/analysis-options.json)
# Parse layout concepts
layout_concepts = options.layout_concepts
# Branch based on mode
IF NOT refine_mode:
# EXPLORATION MODE
layout_concepts = options.layout_concepts
ELSE:
# REFINEMENT MODE
refinement_options = options.refinement_options
```
### Step 2: Present Options to User (Per Target)

302
.claude/commands/workflow/ui-design/style-extract.md
View File

@@ -1,20 +1,22 @@
---
name: style-extract
description: Extract design style from reference images or text prompts using Claude analysis with variant generation
argument-hint: "[--design-id <id>] [--session <id>] [--images "<glob>"] [--urls "<list>"] [--prompt "<desc>"] [--variants <count>] [--interactive]"
description: Extract design style from reference images or text prompts using Claude analysis with variant generation or refinement mode
argument-hint: "[--design-id <id>] [--session <id>] [--images "<glob>"] [--urls "<list>"] [--prompt "<desc>"] [--variants <count>] [--interactive] [--refine]"
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), AskUserQuestion(*), mcp__chrome-devtools__navigate_page(*), mcp__chrome-devtools__evaluate_script(*)
---
# Style Extraction Command
## Overview
Extract design style from reference images or text prompts using Claude's built-in analysis. Directly generates production-ready design systems with complete `design-tokens.json` and `style-guide.md` for each variant.
Extract design style from reference images or text prompts using Claude's built-in analysis. Supports two modes:
1. **Exploration Mode** (default): Generate multiple contrasting design variants
2. **Refinement Mode** (`--refine`): Refine a single existing design through detailed adjustments
**Strategy**: AI-Driven Design Space Exploration
- **Claude-Native**: 100% Claude analysis, no external tools
- **Direct Output**: Complete design systems (design-tokens.json + style-guide.md)
- **Flexible Input**: Images, text prompts, or both (hybrid mode)
- **Maximum Contrast**: AI generates maximally divergent design directions
- **Dual Mode**: Exploration (multiple contrasting variants) or Refinement (single design fine-tuning)
- **Production-Ready**: WCAG AA compliant, OKLCH colors, semantic naming
## Phase 0: Setup & Input Validation
@@ -40,10 +42,19 @@ IF --urls:
ELSE:
has_urls = false
# Set variants count (default: 3, range: 1-5)
# Behavior: Generate N design directions → User multi-select → Generate selected variants
variants_count = --variants OR 3
VALIDATE: 1 <= variants_count <= 5
# Detect refinement mode
refine_mode = --refine OR false
# Set variants count
# Refinement mode: Force variants_count = 1 (ignore user-provided --variants)
# Exploration mode: Use --variants or default to 3 (range: 1-5)
IF refine_mode:
variants_count = 1
REPORT: "🔧 Refinement mode enabled: Will generate 1 refined design system"
ELSE:
variants_count = --variants OR 3
VALIDATE: 1 <= variants_count <= 5
REPORT: "🔍 Exploration mode: Will generate {variants_count} contrasting design directions"
# Determine base path with priority: --design-id > --session > auto-detect
if [ -n "$DESIGN_ID" ]; then
@@ -152,60 +163,130 @@ IF exists: SKIP to completion
**Phase 0 Output**: `input_mode`, `base_path`, `extraction_mode`, `variants_count`, `loaded_images[]` or `prompt_guidance`, `has_urls`, `url_list[]`, `computed_styles_available`
## Phase 1: Design Direction Generation
## Phase 1: Design Direction or Refinement Options Generation
### Step 1: Load Project Context
```bash
# Load brainstorming context if available
bash(test -f {base_path}/.brainstorming/role analysis documents && cat it)
# Load existing design system if refinement mode
IF refine_mode:
existing_tokens = Read({base_path}/style-extraction/style-1/design-tokens.json)
existing_guide = Read({base_path}/style-extraction/style-1/style-guide.md)
```
### Step 2: Generate Design Direction Options (Agent Task 1)
### Step 2: Generate Options (Agent Task 1 - Mode-Specific)
**Executor**: `Task(ui-design-agent)`
Launch agent to generate `variants_count` design direction options with previews:
**Exploration Mode** (default): Generate contrasting design directions
**Refinement Mode** (`--refine`): Generate refinement options for existing design
```javascript
Task(ui-design-agent): `
[DESIGN_DIRECTION_GENERATION_TASK]
Generate {variants_count} maximally contrasting design directions with visual previews
// Conditional agent task based on refine_mode
IF NOT refine_mode:
// EXPLORATION MODE
Task(ui-design-agent): `
[DESIGN_DIRECTION_GENERATION_TASK]
Generate {variants_count} maximally contrasting design directions with visual previews
SESSION: {session_id} | MODE: explore | BASE_PATH: {base_path}
SESSION: {session_id} | MODE: explore | BASE_PATH: {base_path}
## Input Analysis
- User prompt: {prompt_guidance}
- Visual references: {loaded_images if available}
- Project context: {brainstorming_context if available}
## Input Analysis
- User prompt: {prompt_guidance}
- Visual references: {loaded_images if available}
- Project context: {brainstorming_context if available}
## Analysis Rules
- Analyze 6D attribute space: color saturation, visual weight, formality, organic/geometric, innovation, density
- Generate {variants_count} directions with MAXIMUM contrast
- Each direction must be distinctly different (min distance score: 0.7)
## Analysis Rules
- Analyze 6D attribute space: color saturation, visual weight, formality, organic/geometric, innovation, density
- Generate {variants_count} directions with MAXIMUM contrast
- Each direction must be distinctly different (min distance score: 0.7)
## Generate for EACH Direction
1. **Core Philosophy**:
- philosophy_name (2-3 words, e.g., "Minimalist & Airy")
- design_attributes (6D scores 0-1)
- search_keywords (3-5 keywords)
- anti_keywords (2-3 keywords to avoid)
- rationale (why this is distinct from others)
## Generate for EACH Direction
1. **Core Philosophy**:
- philosophy_name (2-3 words, e.g., "Minimalist & Airy")
- design_attributes (6D scores 0-1)
- search_keywords (3-5 keywords)
- anti_keywords (2-3 keywords to avoid)
- rationale (why this is distinct from others)
2. **Visual Preview Elements**:
- primary_color (OKLCH format)
- secondary_color (OKLCH format)
- accent_color (OKLCH format)
- font_family_heading (specific font name)
- font_family_body (specific font name)
- border_radius_base (e.g., "0.5rem")
- mood_description (1-2 sentences describing the feel)
2. **Visual Preview Elements**:
- primary_color (OKLCH format)
- secondary_color (OKLCH format)
- accent_color (OKLCH format)
- font_family_heading (specific font name)
- font_family_body (specific font name)
- border_radius_base (e.g., "0.5rem")
- mood_description (1-2 sentences describing the feel)
## Output
Write single JSON file: {base_path}/.intermediates/style-analysis/analysis-options.json
## Output
Write single JSON file: {base_path}/.intermediates/style-analysis/analysis-options.json
Use schema from INTERACTIVE-DATA-SPEC.md (Style Extract: analysis-options.json)
Use schema from INTERACTIVE-DATA-SPEC.md (Style Extract: analysis-options.json)
CRITICAL: Use Write() tool immediately after generating complete JSON
`
CRITICAL: Use Write() tool immediately after generating complete JSON
`
ELSE:
// REFINEMENT MODE
Task(ui-design-agent): `
[DESIGN_REFINEMENT_OPTIONS_TASK]
Generate refinement options for existing design system
SESSION: {session_id} | MODE: refine | BASE_PATH: {base_path}
## Existing Design System
- design-tokens.json: {existing_tokens}
- style-guide.md: {existing_guide}
## Input Guidance
- User prompt: {prompt_guidance}
- Visual references: {loaded_images if available}
## Refinement Categories
Generate 8-12 refinement options across these categories:
1. **Intensity/Degree Adjustments** (2-3 options):
- Color intensity: more vibrant ↔ more muted
- Visual weight: bolder ↔ lighter
- Density: more compact ↔ more spacious
2. **Specific Attribute Tuning** (3-4 options):
- Border radius: sharper corners ↔ rounder edges
- Shadow depth: subtler shadows ↔ deeper elevation
- Typography scale: tighter scale ↔ more contrast
- Spacing scale: tighter rhythm ↔ more breathing room
3. **Context-Specific Variations** (2-3 options):
- Dark mode optimization
- Mobile-specific adjustments
- High-contrast accessibility mode
4. **Component-Level Customization** (1-2 options):
- Button styling emphasis
- Card/container treatment
- Form input refinements
## Output Format
Each option:
- category: "intensity|attribute|context|component"
- option_id: unique identifier
- label: Short descriptive name (e.g., "More Vibrant Colors")
- description: What changes (2-3 sentences)
- preview_changes: Key token adjustments preview
- impact_scope: Which tokens affected
## Output
Write single JSON file: {base_path}/.intermediates/style-analysis/analysis-options.json
Use refinement schema:
{
"mode": "refinement",
"base_design": "style-1",
"refinement_options": [array of refinement options]
}
CRITICAL: Use Write() tool immediately after generating complete JSON
`
```
### Step 3: Verify Options File Created
@@ -222,7 +303,9 @@ bash(cat {base_path}/.intermediates/style-analysis/analysis-options.json | grep
## Phase 1.5: User Confirmation (Optional - Triggered by --interactive)
**Purpose**: Allow user to select preferred design direction(s) before generating full design systems
**Purpose**:
- **Exploration Mode**: Allow user to select preferred design direction(s)
- **Refinement Mode**: Allow user to select refinement options to apply
**Trigger Condition**: Execute this phase ONLY if `--interactive` flag is present
@@ -231,21 +314,31 @@ bash(cat {base_path}/.intermediates/style-analysis/analysis-options.json | grep
# Skip this entire phase if --interactive flag is not present
IF NOT --interactive:
SKIP to Phase 2
REPORT: "ℹ️ Non-interactive mode: Will generate all {variants_count} variants"
IF refine_mode:
REPORT: "ℹ️ Non-interactive refinement mode: Will apply all suggested refinements"
ELSE:
REPORT: "ℹ️ Non-interactive mode: Will generate all {variants_count} variants"
REPORT: "🎯 Interactive mode enabled: User selection required"
```
### Step 2: Load and Present Options
### Step 2: Load and Present Options (Mode-Specific)
```bash
# Read options file
options = Read({base_path}/.intermediates/style-analysis/analysis-options.json)
# Parse design directions
design_directions = options.design_directions
# Branch based on mode
IF NOT refine_mode:
# EXPLORATION MODE
design_directions = options.design_directions
ELSE:
# REFINEMENT MODE
refinement_options = options.refinement_options
```
### Step 2: Present Options to User
### Step 3: Present Options to User (Mode-Specific)
**Exploration Mode**:
```
📋 Design Direction Options
@@ -278,30 +371,39 @@ Please select the direction(s) you'd like to develop into complete design system
═══════════════════════════════════════════════════
```
### Step 3: Capture User Selection and Update Analysis JSON
**Interaction Strategy**: If variants > 4, use batch text format:
**Refinement Mode**:
```
【选项[N]】[philosophy_name]
[rationale]
...
请选择 (格式: 1 2 3 多选，或 1 单选)：
📋 Design Refinement Options
User input:
"[N1]" → Single selection
"[N1] [N2] [N3] ..." → Multi-selection
We've analyzed your existing design system and generated refinement options.
Please select the refinement(s) you'd like to apply.
Base Design: style-1
{FOR each option in refinement_options grouped by category:
━━━ {category_name} ━━━
{FOR each refinement in category_options:
[{refinement.option_id}] {refinement.label}
{refinement.description}
Preview: {refinement.preview_changes}
Affects: {refinement.impact_scope}
}
}
═══════════════════════════════════════════════════
```
Otherwise, use `AskUserQuestion` below.
### Step 4: Capture User Selection and Update Analysis JSON
**Exploration Mode Interaction**:
```javascript
// Use AskUserQuestion tool for multi-selection
AskUserQuestion({
questions: [{
question: "Which design direction(s) would you like to develop into complete design systems?",
header: "Style Choice",
multiSelect: true, // Multi-selection enabled (default behavior)
multiSelect: true, // Multi-selection enabled
options: [
{FOR each direction:
label: "Option {direction.index}: {direction.philosophy_name}",
@@ -311,7 +413,7 @@ AskUserQuestion({
}]
})
// Parse user response (array of selections, e.g., ["Option 1: ...", "Option 3: ..."])
// Parse user response (array of selections)
selected_options = user_answer
// Check for user cancellation
@@ -319,33 +421,73 @@ IF selected_options == null OR selected_options.length == 0:
REPORT: "⚠️ User canceled selection. Workflow terminated."
EXIT workflow
// Extract option indices from array
// Extract option indices
selected_indices = []
FOR each selected_option_text IN selected_options:
match = selected_option_text.match(/Option (\d+):/)
IF match:
selected_indices.push(parseInt(match[1]))
ELSE:
ERROR: "Invalid selection format. Expected 'Option N: ...' format"
EXIT workflow
REPORT: "✅ Selected {selected_indices.length} design direction(s)"
// Update analysis-options.json with user selection
// Update analysis-options.json
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 updated file back
Write({base_path}/.intermediates/style-analysis/analysis-options.json, JSON.stringify(options_file, indent=2))
REPORT: "✅ Updated analysis-options.json with user selection"
```
### Step 4: Confirmation Message
**Refinement Mode Interaction**:
```javascript
// Use AskUserQuestion tool for multi-selection of refinements
AskUserQuestion({
questions: [{
question: "Which refinement(s) would you like to apply to your design system?",
header: "Refinements",
multiSelect: true, // Multi-selection enabled
options: [
{FOR each refinement:
label: "{refinement.label}",
description: "{refinement.description} (Affects: {refinement.impact_scope})"
}
]
}]
})
// Parse user response
selected_refinements = user_answer
// Check for user cancellation
IF selected_refinements == null OR selected_refinements.length == 0:
REPORT: "⚠️ User canceled selection. Workflow terminated."
EXIT workflow
// Extract refinement option_ids
selected_option_ids = []
FOR each selected_text IN selected_refinements:
# Match against refinement labels to find option_ids
FOR each refinement IN refinement_options:
IF refinement.label IN selected_text:
selected_option_ids.push(refinement.option_id)
REPORT: "✅ Selected {selected_option_ids.length} refinement(s)"
// Update analysis-options.json
options_file = Read({base_path}/.intermediates/style-analysis/analysis-options.json)
options_file.user_selection = {
"selected_at": NOW(),
"selected_option_ids": selected_option_ids,
"selection_count": selected_option_ids.length
}
Write({base_path}/.intermediates/style-analysis/analysis-options.json, JSON.stringify(options_file, indent=2))
```
### Step 5: Confirmation Message (Mode-Specific)
**Exploration Mode**:
```
✅ Selection recorded!
@@ -357,7 +499,19 @@ You selected {selected_indices.length} design direction(s):
Proceeding to generate {selected_indices.length} complete design system(s)...
```
**Output**: Updated `analysis-options.json` with user's multi-selection embedded
**Refinement Mode**:
```
✅ Selection recorded!
You selected {selected_option_ids.length} refinement(s):
{FOR each id IN selected_option_ids:
• {refinement_by_id[id].label} ({refinement_by_id[id].category})
}
Proceeding to apply refinements and generate updated design system...
```
**Output**: Updated `analysis-options.json` with user's selection embedded
## Phase 2: Design System Generation (Agent Task 2)