mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-14 02:42:04 +08:00
Add documentation for new CLI commands: docs-related-cli and lite-fix
- Implemented the `docs-related-cli` command for context-aware documentation generation and update for changed modules using CLI execution with tool fallback. - Introduced the `lite-fix` command for lightweight bug diagnosis and fix workflow, featuring intelligent severity assessment and optional hotfix mode for production incidents.
This commit is contained in:
catlog22
@@ -120,11 +120,7 @@ ELSE:
|
||||
- Infers animation patterns from UI element positioning and design style
|
||||
- Generates context-aware animation specifications based on visual analysis
|
||||
|
||||
**Benefits**:
|
||||
- ✅ Flexible input - works with screenshots, mockups, or design files
|
||||
- ✅ AI-driven inference from visual cues
|
||||
- ✅ No external dependencies on MCP tools
|
||||
- ✅ Combines visual analysis with industry best practices
|
||||
|
||||
|
||||
### Step 3: Load Design Tokens Context
|
||||
|
||||
|
||||
@@ -480,11 +480,7 @@ TodoWrite({todos: [
|
||||
// - Orchestrator's own task (no SlashCommand attachment)
|
||||
// - Mark Phase 3 as completed
|
||||
// - Final state: All 4 orchestrator tasks completed
|
||||
//
|
||||
// Benefits:
|
||||
// ✓ Real-time visibility into attached tasks during execution
|
||||
// ✓ Clean orchestrator-level summary after tasks complete
|
||||
// ✓ Clear mental model: SlashCommand = attach tasks, not delegate work
|
||||
|
||||
// ✓ Dynamic attachment/collapse maintains clarity
|
||||
```
|
||||
|
||||
@@ -623,17 +619,7 @@ File discovery is fully automatic - no glob patterns needed.
|
||||
|
||||
---
|
||||
|
||||
## Benefits
|
||||
|
||||
- **Simplified Interface**: Single path parameter with intelligent defaults
|
||||
- **Auto-Generation**: Package names auto-generated from directory names
|
||||
- **Automatic Discovery**: No need to specify file patterns - finds all style files automatically
|
||||
- **Pure Orchestrator**: No direct agent execution, delegates to specialized commands
|
||||
- **Auto-Continue**: Autonomous 4-phase execution without user interaction
|
||||
- **Safety First**: Overwrite protection, validation checks, error handling
|
||||
- **Code Reuse**: Leverages existing `import-from-code` and `reference-page-generator` commands
|
||||
- **Clean Separation**: Each command has single responsibility
|
||||
- **Easy Maintenance**: Changes to sub-commands automatically apply
|
||||
|
||||
## Architecture
|
||||
|
||||
|
||||
@@ -227,7 +227,68 @@ Write(file_path=".workflow/active/WFS-{session}/.brainstorming/ui-designer/desig
|
||||
content="[generated content with @ references]")
|
||||
```
|
||||
|
||||
### Phase 5: Completion
|
||||
### Phase 5: Update Context Package
|
||||
|
||||
**Purpose**: Sync design system references to context-package.json
|
||||
|
||||
**Operations**:
|
||||
```bash
|
||||
context_pkg_path = ".workflow/active/WFS-{session}/.process/context-package.json"
|
||||
|
||||
# 1. Read existing package
|
||||
context_pkg = Read(context_pkg_path)
|
||||
|
||||
# 2. Update brainstorm_artifacts (role analyses now contain @ design references)
|
||||
brainstorm_dir = ".workflow/active/WFS-{session}/.brainstorming"
|
||||
role_analysis_files = Glob({brainstorm_dir}/*/analysis*.md)
|
||||
|
||||
context_pkg.brainstorm_artifacts.role_analyses = []
|
||||
FOR file IN role_analysis_files:
|
||||
role_name = extract_role_from_path(file)
|
||||
relative_path = file.replace({brainstorm_dir}/, "")
|
||||
|
||||
context_pkg.brainstorm_artifacts.role_analyses.push({
|
||||
"role": role_name,
|
||||
"files": [{
|
||||
"path": relative_path,
|
||||
"type": "primary",
|
||||
"content": Read(file), # Contains @ design system references
|
||||
"updated_at": NOW()
|
||||
}]
|
||||
})
|
||||
|
||||
# 3. Add design_system_references field
|
||||
context_pkg.design_system_references = {
|
||||
"design_run_id": design_id,
|
||||
"tokens": `${design_id}/${design_tokens_path}`,
|
||||
"style_guide": `${design_id}/${style_guide_path}`,
|
||||
"prototypes": selected_list.map(p => `${design_id}/prototypes/${p}.html`),
|
||||
"updated_at": NOW()
|
||||
}
|
||||
|
||||
# 4. Optional: Add animations and layouts if they exist
|
||||
IF exists({latest_design}/animation-extraction/animation-tokens.json):
|
||||
context_pkg.design_system_references.animations = `${design_id}/animation-extraction/animation-tokens.json`
|
||||
|
||||
IF exists({latest_design}/layout-extraction/layout-templates.json):
|
||||
context_pkg.design_system_references.layouts = `${design_id}/layout-extraction/layout-templates.json`
|
||||
|
||||
# 5. Update metadata
|
||||
context_pkg.metadata.updated_at = NOW()
|
||||
context_pkg.metadata.design_sync_timestamp = NOW()
|
||||
|
||||
# 6. Write back
|
||||
Write(context_pkg_path, JSON.stringify(context_pkg, indent=2))
|
||||
|
||||
REPORT: "✅ Updated context-package.json with design system references"
|
||||
```
|
||||
|
||||
**TodoWrite Update**:
|
||||
```json
|
||||
{"content": "Update context package with design references", "status": "completed", "activeForm": "Updating context package"}
|
||||
```
|
||||
|
||||
### Phase 6: Completion
|
||||
|
||||
```javascript
|
||||
TodoWrite({todos: [
|
||||
|
||||
@@ -24,8 +24,7 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
|
||||
- **IF should_extract_animation**: **Attach tasks → Execute → Collapse** → Auto-continues to Phase 9
|
||||
- **ELSE**: Skip (use code import) → Auto-continues to Phase 9
|
||||
5. Phase 9 (layout-extract) → **Attach tasks → Execute → Collapse** → Auto-continues to Phase 10
|
||||
6. **Phase 10 (ui-assembly)** → **Attach tasks → Execute → Collapse** → Auto-continues to Phase 11
|
||||
7. **Phase 11 (preview-generation)** → **Execute script → Generate preview files** → Reports completion
|
||||
6. **Phase 10 (ui-assembly)** → **Attach tasks → Execute → Collapse** → Workflow complete
|
||||
|
||||
**Phase Transition Mechanism**:
|
||||
- **Phase 5 (User Interaction)**: User confirms targets → IMMEDIATELY triggers Phase 7
|
||||
@@ -33,10 +32,9 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
|
||||
- **Task Execution**: Orchestrator **EXECUTES** these attached tasks itself
|
||||
- **Task Collapse**: After tasks complete, collapse them into phase summary
|
||||
- **Phase Transition**: Automatically execute next phase after collapsing
|
||||
- **Phase 11 (Script Execution)**: Execute preview generation script
|
||||
- No additional user interaction after Phase 5 confirmation
|
||||
|
||||
**Auto-Continue Mechanism**: TodoWrite tracks phase status with dynamic task attachment/collapse. After executing all attached tasks, you MUST immediately collapse them, restore phase summary, and execute the next phase. No user intervention required. The workflow is NOT complete until reaching Phase 11 (preview generation).
|
||||
**Auto-Continue Mechanism**: TodoWrite tracks phase status with dynamic task attachment/collapse. After executing all attached tasks, you MUST immediately collapse them, restore phase summary, and execute the next phase. No user intervention required. The workflow is NOT complete until Phase 10 (UI assembly) finishes.
|
||||
|
||||
**Task Attachment Model**: SlashCommand invocation is NOT delegation - it's task expansion. The orchestrator executes these attached tasks itself, not waiting for external completion.
|
||||
|
||||
@@ -50,7 +48,7 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
|
||||
4. **Default to All**: When selecting variants/prototypes, use ALL generated items
|
||||
5. **Track Progress**: Update TodoWrite dynamically with task attachment/collapse pattern
|
||||
6. **⚠️ CRITICAL: Task Attachment Model** - SlashCommand invocation **ATTACHES** tasks to current workflow. Orchestrator **EXECUTES** these attached tasks itself, not waiting for external completion. This is NOT delegation - it's task expansion.
|
||||
7. **⚠️ CRITICAL: DO NOT STOP** - This is a continuous multi-phase workflow. After executing all attached tasks, you MUST immediately collapse them and execute the next phase. Workflow is NOT complete until Phase 11 (preview generation).
|
||||
7. **⚠️ CRITICAL: DO NOT STOP** - This is a continuous multi-phase workflow. After executing all attached tasks, you MUST immediately collapse them and execute the next phase. Workflow is NOT complete until Phase 10 (UI assembly) finishes.
|
||||
|
||||
## Parameter Requirements
|
||||
|
||||
@@ -127,140 +125,78 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
|
||||
**Integrated vs. Standalone**:
|
||||
- `--session` flag determines session integration or standalone execution
|
||||
|
||||
## 11-Phase Execution
|
||||
## 10-Phase Execution
|
||||
|
||||
### Phase 1: Parameter Parsing & Input Detection
|
||||
|
||||
**Unified Principle**: Detect → Classify → Store (avoid string concatenation and escaping)
|
||||
|
||||
**Step 1: Parameter Normalization**
|
||||
```bash
|
||||
# Step 0: Parse and normalize parameters
|
||||
images_input = null
|
||||
prompt_text = null
|
||||
|
||||
# Handle legacy parameters with deprecation warning
|
||||
# Legacy parameters (deprecated)
|
||||
IF --images OR --prompt:
|
||||
WARN: "⚠️ DEPRECATION: --images and --prompt are deprecated. Use --input instead."
|
||||
WARN: " Example: --input \"design-refs/*\" or --input \"modern dashboard\""
|
||||
images_input = --images
|
||||
prompt_text = --prompt
|
||||
WARN: "⚠️ --images/--prompt deprecated. Use --input"
|
||||
images_input = --images; prompt_text = --prompt
|
||||
|
||||
# Parse unified --input parameter
|
||||
IF --input:
|
||||
# Split by | separator for multiple inputs
|
||||
input_parts = split(--input, "|")
|
||||
|
||||
FOR part IN input_parts:
|
||||
part = trim(part)
|
||||
|
||||
# Detection logic
|
||||
IF contains(part, "*") OR glob_matches_files(part):
|
||||
# Glob pattern detected → images
|
||||
images_input = part
|
||||
ELSE IF file_or_directory_exists(part):
|
||||
# File/directory path → will be handled in code detection
|
||||
IF NOT prompt_text:
|
||||
prompt_text = part
|
||||
ELSE:
|
||||
prompt_text = prompt_text + " " + part
|
||||
ELSE:
|
||||
# Pure text → prompt
|
||||
IF NOT prompt_text:
|
||||
prompt_text = part
|
||||
ELSE:
|
||||
prompt_text = prompt_text + " " + part
|
||||
|
||||
# Step 1: Detect design source from parsed inputs
|
||||
code_files_detected = false
|
||||
code_base_path = null
|
||||
has_visual_input = false
|
||||
|
||||
IF prompt_text:
|
||||
# Extract potential file paths from prompt
|
||||
potential_paths = extract_paths_from_text(prompt_text)
|
||||
FOR path IN potential_paths:
|
||||
IF file_or_directory_exists(path):
|
||||
code_files_detected = true
|
||||
code_base_path = path
|
||||
BREAK
|
||||
|
||||
IF images_input:
|
||||
# Check if images parameter points to existing files
|
||||
IF glob_matches_files(images_input):
|
||||
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
|
||||
# Unified --input (split by "|")
|
||||
ELSE IF --input:
|
||||
FOR part IN split(--input, "|"):
|
||||
IF "*" IN part OR glob_exists(part): images_input = part
|
||||
ELSE IF path_exists(part): prompt_text += part
|
||||
ELSE: prompt_text += part
|
||||
```
|
||||
|
||||
**Step 2: Design Source Detection**
|
||||
```bash
|
||||
code_base_path = extract_first_valid_path(prompt_text)
|
||||
has_visual_input = (images_input AND glob_exists(images_input))
|
||||
|
||||
design_source = classify_source(code_base_path, has_visual_input):
|
||||
• code + visual → "hybrid"
|
||||
• code only → "code_only"
|
||||
• visual/prompt → "visual_only"
|
||||
• none → ERROR
|
||||
```
|
||||
|
||||
**Stored Variables**: `design_source`, `code_base_path`, `has_visual_input`, `images_input`, `prompt_text`
|
||||
|
||||
---
|
||||
|
||||
### Phase 2: Intelligent Prompt Parsing
|
||||
|
||||
**Unified Principle**: explicit > inferred > default
|
||||
|
||||
```bash
|
||||
# Parse variant counts from prompt or use explicit/default values
|
||||
IF prompt_text AND (NOT --style-variants OR NOT --layout-variants):
|
||||
style_variants = regex_extract(prompt_text, r"(\d+)\s*style") OR --style-variants OR 3
|
||||
layout_variants = regex_extract(prompt_text, r"(\d+)\s*layout") OR --layout-variants OR 3
|
||||
ELSE:
|
||||
style_variants = --style-variants OR 3
|
||||
layout_variants = --layout-variants OR 3
|
||||
# Variant counts (priority chain)
|
||||
style_variants = --style-variants OR extract_number(prompt_text, "style") OR 3
|
||||
layout_variants = --layout-variants OR extract_number(prompt_text, "layout") OR 3
|
||||
|
||||
VALIDATE: 1 <= style_variants <= 5, 1 <= layout_variants <= 5
|
||||
|
||||
# Interactive mode (always enabled)
|
||||
interactive_mode = true # Always use interactive mode
|
||||
VALIDATE: 1 ≤ variants ≤ 5
|
||||
```
|
||||
|
||||
**Stored Variables**: `style_variants`, `layout_variants`
|
||||
|
||||
---
|
||||
|
||||
### Phase 3: Device Type Inference
|
||||
|
||||
**Unified Principle**: explicit > prompt keywords > target_type > default
|
||||
|
||||
```bash
|
||||
# Device type inference
|
||||
device_type = "auto"
|
||||
# Device type (priority chain)
|
||||
device_type = --device-type (if != "auto")
|
||||
OR detect_keywords(prompt_text, ["mobile", "desktop", "tablet", "responsive"])
|
||||
OR infer_from_target(target_type) # component→desktop, page→responsive
|
||||
OR "responsive"
|
||||
|
||||
# Step 1: Explicit parameter (highest priority)
|
||||
IF --device-type AND --device-type != "auto":
|
||||
device_type = --device-type
|
||||
device_source = "explicit"
|
||||
ELSE:
|
||||
# Step 2: Prompt analysis
|
||||
IF prompt_text:
|
||||
device_keywords = {
|
||||
"desktop": ["desktop", "web", "laptop", "widescreen", "large screen"],
|
||||
"mobile": ["mobile", "phone", "smartphone", "ios", "android"],
|
||||
"tablet": ["tablet", "ipad", "medium screen"],
|
||||
"responsive": ["responsive", "adaptive", "multi-device", "cross-platform"]
|
||||
}
|
||||
detected_device = detect_device_from_prompt(prompt_text, device_keywords)
|
||||
IF detected_device:
|
||||
device_type = detected_device
|
||||
device_source = "prompt_inference"
|
||||
|
||||
# Step 3: Target type inference
|
||||
IF device_type == "auto":
|
||||
# Components are typically desktop-first, pages can vary
|
||||
device_type = target_type == "component" ? "desktop" : "responsive"
|
||||
device_source = "target_type_inference"
|
||||
|
||||
STORE: device_type, device_source
|
||||
device_source = track_detection_source()
|
||||
```
|
||||
|
||||
**Device Type Presets**:
|
||||
- **Desktop**: 1920×1080px - Mouse-driven, spacious layouts
|
||||
- **Mobile**: 375×812px - Touch-friendly, compact layouts
|
||||
- **Tablet**: 768×1024px - Hybrid touch/mouse layouts
|
||||
- **Responsive**: 1920×1080px base with mobile-first breakpoints
|
||||
**Detection Keywords**: mobile, phone, smartphone → mobile | desktop, web, laptop → desktop | tablet, ipad → tablet | responsive, adaptive → responsive
|
||||
|
||||
**Detection Keywords**:
|
||||
- Prompt contains "mobile", "phone", "smartphone" → mobile
|
||||
- Prompt contains "tablet", "ipad" → tablet
|
||||
- Prompt contains "desktop", "web", "laptop" → desktop
|
||||
- Prompt contains "responsive", "adaptive" → responsive
|
||||
- Otherwise: Inferred from target type (components→desktop, pages→responsive)
|
||||
**Device Presets**: Desktop (1920×1080) | Mobile (375×812) | Tablet (768×1024) | Responsive (1920×1080 + breakpoints)
|
||||
|
||||
**Stored Variables**: `device_type`, `device_source`
|
||||
|
||||
### Phase 4: Run Initialization & Directory Setup
|
||||
```bash
|
||||
@@ -466,13 +402,13 @@ IF design_source IN ["code_only", "hybrid"]:
|
||||
|
||||
# Animation reuse confirmation (code import with complete animations)
|
||||
IF design_source == "code_only" AND animation_complete:
|
||||
REPORT: "✅ 检测到完整的动画系统（来自代码导入）"
|
||||
REPORT: "✅ Complete animation system detected (from code import)"
|
||||
REPORT: " Duration scales: {duration_count} | Easing functions: {easing_count}"
|
||||
REPORT: ""
|
||||
REPORT: "Options:"
|
||||
REPORT: " • 'reuse' (默认) - 复用已有动画系统"
|
||||
REPORT: " • 'regenerate' - 重新生成动画系统（交互式）"
|
||||
REPORT: " • 'cancel' - 取消工作流"
|
||||
REPORT: " • 'reuse' (default) - Reuse existing animation system"
|
||||
REPORT: " • 'regenerate' - Regenerate animation system (interactive)"
|
||||
REPORT: " • 'cancel' - Cancel workflow"
|
||||
user_response = WAIT_FOR_USER_INPUT()
|
||||
MATCH user_response:
|
||||
"reuse" → skip_animation_extraction = true
|
||||
@@ -580,63 +516,22 @@ REPORT: " → Assembly tasks: {total} combinations"
|
||||
SlashCommand(command)
|
||||
|
||||
# After executing all attached tasks, collapse them into phase summary
|
||||
# When phase finishes, IMMEDIATELY execute Phase 11 (auto-continue)
|
||||
# Output:
|
||||
# Workflow complete - generate command handles preview file generation (compare.html, PREVIEW.md)
|
||||
# Output (generated by generate command):
|
||||
# - {target}-style-{s}-layout-{l}.html (assembled prototypes)
|
||||
# - {target}-style-{s}-layout-{l}.css
|
||||
# Note: compare.html and PREVIEW.md will be generated in Phase 11
|
||||
```
|
||||
|
||||
### Phase 11: Generate Preview Files
|
||||
```bash
|
||||
REPORT: "🚀 Phase 11: Generate Preview Files"
|
||||
|
||||
# Update TodoWrite to reflect preview generation phase
|
||||
TodoWrite({todos: [
|
||||
{"content": "Execute style extraction", "status": "completed", "activeForm": "Executing style extraction"},
|
||||
{"content": "Execute animation extraction", "status": "completed", "activeForm": "Executing animation extraction"},
|
||||
{"content": "Execute layout extraction", "status": "completed", "activeForm": "Executing layout extraction"},
|
||||
{"content": "Execute UI assembly", "status": "completed", "activeForm": "Executing UI assembly"},
|
||||
{"content": "Generate preview files", "status": "in_progress", "activeForm": "Generating preview files"}
|
||||
]})
|
||||
|
||||
# Execute preview generation script
|
||||
Bash(~/.claude/scripts/ui-generate-preview.sh "${base_path}/prototypes")
|
||||
|
||||
# Verify output files
|
||||
IF NOT exists("${base_path}/prototypes/compare.html"):
|
||||
ERROR: "Preview generation failed: compare.html not found"
|
||||
EXIT 1
|
||||
|
||||
IF NOT exists("${base_path}/prototypes/PREVIEW.md"):
|
||||
ERROR: "Preview generation failed: PREVIEW.md not found"
|
||||
EXIT 1
|
||||
|
||||
# Mark preview generation as complete
|
||||
TodoWrite({todos: [
|
||||
{"content": "Execute style extraction", "status": "completed", "activeForm": "Executing style extraction"},
|
||||
{"content": "Execute animation extraction", "status": "completed", "activeForm": "Executing animation extraction"},
|
||||
{"content": "Execute layout extraction", "status": "completed", "activeForm": "Executing layout extraction"},
|
||||
{"content": "Execute UI assembly", "status": "completed", "activeForm": "Executing UI assembly"},
|
||||
{"content": "Generate preview files", "status": "completed", "activeForm": "Generating preview files"}
|
||||
]})
|
||||
|
||||
REPORT: "✅ Preview files generated successfully"
|
||||
REPORT: " → compare.html (interactive matrix view)"
|
||||
REPORT: " → PREVIEW.md (usage instructions)"
|
||||
|
||||
# Workflow complete, display final report
|
||||
# - compare.html (interactive matrix view)
|
||||
# - PREVIEW.md (usage instructions)
|
||||
```
|
||||
|
||||
## TodoWrite Pattern
|
||||
```javascript
|
||||
// Initialize IMMEDIATELY after Phase 5 user confirmation to track multi-phase execution (5 orchestrator-level tasks)
|
||||
// Initialize IMMEDIATELY after Phase 5 user confirmation to track multi-phase execution (4 orchestrator-level tasks)
|
||||
TodoWrite({todos: [
|
||||
{"content": "Execute style extraction", "status": "in_progress", "activeForm": "Executing style extraction"},
|
||||
{"content": "Execute animation extraction", "status": "pending", "activeForm": "Executing animation extraction"},
|
||||
{"content": "Execute layout extraction", "status": "pending", "activeForm": "Executing layout extraction"},
|
||||
{"content": "Execute UI assembly", "status": "pending", "activeForm": "Executing UI assembly"},
|
||||
{"content": "Generate preview files", "status": "pending", "activeForm": "Generating preview files"}
|
||||
{"content": "Execute UI assembly", "status": "pending", "activeForm": "Executing UI assembly"}
|
||||
]})
|
||||
|
||||
// ⚠️ CRITICAL: Dynamic TodoWrite task attachment strategy:
|
||||
@@ -651,19 +546,8 @@ TodoWrite({todos: [
|
||||
// 4. After all attached tasks complete, COLLAPSE them into phase summary
|
||||
// 5. Update next phase to in_progress
|
||||
// 6. IMMEDIATELY execute next phase (auto-continue)
|
||||
// 7. After Phase 10 completes, workflow finishes (generate command handles preview files)
|
||||
//
|
||||
// Phase 11 Script Execution Pattern:
|
||||
// 1. Mark "Generate preview files" as in_progress
|
||||
// 2. Execute preview generation script via Bash tool
|
||||
// 3. Verify output files (compare.html, PREVIEW.md)
|
||||
// 4. Mark "Generate preview files" as completed
|
||||
//
|
||||
// Benefits:
|
||||
// ✓ Real-time visibility into sub-command task progress
|
||||
// ✓ Clean orchestrator-level summary after each phase
|
||||
// ✓ Clear mental model: SlashCommand = attach tasks, not delegate work
|
||||
// ✓ Script execution for preview generation (no delegation)
|
||||
// ✓ Dynamic attachment/collapse maintains clarity
|
||||
```
|
||||
|
||||
## Completion Output
|
||||
@@ -682,7 +566,7 @@ Phase 9: {n×l} layout templates (layout-extract with multi-select)
|
||||
Phase 10: UI Assembly (generate)
|
||||
- Pure assembly: layout templates + design tokens
|
||||
- {s}×{l}×{n} = {total} final prototypes
|
||||
Phase 11: Preview files generated (compare.html, PREVIEW.md)
|
||||
- Preview files: compare.html, PREVIEW.md (auto-generated by generate command)
|
||||
|
||||
Assembly Process:
|
||||
✅ Separation of Concerns: Layout (structure) + Style (tokens) kept separate
|
||||
|
||||
@@ -591,11 +591,6 @@ TodoWrite({todos: [
|
||||
// 5. Update next phase to in_progress
|
||||
// 6. IMMEDIATELY execute next phase SlashCommand (auto-continue)
|
||||
//
|
||||
// Benefits:
|
||||
// ✓ Real-time visibility into sub-command task progress
|
||||
// ✓ Clean orchestrator-level summary after each phase
|
||||
// ✓ Clear mental model: SlashCommand = attach tasks, not delegate work
|
||||
// ✓ Dynamic attachment/collapse maintains clarity
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
name: layout-extract
|
||||
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]
|
||||
description: Extract structural layout information from reference images or text prompts using Claude analysis with variant generation or refinement mode
|
||||
argument-hint: [--design-id <id>] [--session <id>] [--images "<glob>"] [--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,7 +9,7 @@ allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), Bash(*), AskUserQuestio
|
||||
|
||||
## Overview
|
||||
|
||||
Extract structural layout information from reference images, URLs, or text prompts using AI analysis. Supports two modes:
|
||||
Extract structural layout information from reference images 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
|
||||
|
||||
@@ -29,23 +29,7 @@ This command separates the "scaffolding" (HTML structure and CSS layout) from th
|
||||
|
||||
```bash
|
||||
# Detect input source
|
||||
# Priority: --urls + --images → hybrid | --urls → url | --images → image | --prompt → text
|
||||
|
||||
# Parse URLs if provided (format: "target:url,target:url,...")
|
||||
IF --urls:
|
||||
url_list = []
|
||||
FOR pair IN split(--urls, ","):
|
||||
IF ":" IN pair:
|
||||
target, url = pair.split(":", 1)
|
||||
url_list.append({target: target.strip(), url: url.strip()})
|
||||
ELSE:
|
||||
# Single URL without target
|
||||
url_list.append({target: "page", url: pair.strip()})
|
||||
|
||||
has_urls = true
|
||||
ELSE:
|
||||
has_urls = false
|
||||
url_list = []
|
||||
# Priority: --images → image | --prompt → text
|
||||
|
||||
# Detect refinement mode
|
||||
refine_mode = --refine OR false
|
||||
@@ -62,11 +46,9 @@ ELSE:
|
||||
REPORT: "🔍 Exploration mode: Will generate {variants_count} contrasting layout concepts per target"
|
||||
|
||||
# Resolve targets
|
||||
# Priority: --targets → url_list targets → prompt analysis → default ["page"]
|
||||
# Priority: --targets → prompt analysis → default ["page"]
|
||||
IF --targets:
|
||||
targets = split(--targets, ",")
|
||||
ELSE IF has_urls:
|
||||
targets = [url_info.target for url_info in url_list]
|
||||
ELSE IF --prompt:
|
||||
# Extract targets from prompt using pattern matching
|
||||
# Looks for keywords: "page names", target descriptors (login, dashboard, etc.)
|
||||
@@ -107,10 +89,6 @@ bash(echo "✓ Base path: $base_path")
|
||||
bash(ls {images_pattern}) # Expand glob pattern
|
||||
Read({image_path}) # Load each image
|
||||
|
||||
# For URL mode
|
||||
# Parse URL list format: "target:url,target:url"
|
||||
# Validate URLs are accessible
|
||||
|
||||
# For text mode
|
||||
# Validate --prompt is non-empty
|
||||
|
||||
@@ -118,97 +96,6 @@ Read({image_path}) # Load each image
|
||||
bash(mkdir -p {base_path}/layout-extraction)
|
||||
```
|
||||
|
||||
### Step 2.5: Extract DOM Structure (URL Mode - Auto-Trigger)
|
||||
```bash
|
||||
# AUTO-TRIGGER: If URLs are available (from --urls parameter), automatically extract real DOM structure
|
||||
# This provides accurate layout data to supplement visual analysis
|
||||
|
||||
# Check if URLs provided via --urls parameter
|
||||
IF --urls AND url_list:
|
||||
REPORT: "🔍 Auto-triggering URL mode: Extracting DOM structure"
|
||||
|
||||
bash(mkdir -p {base_path}/.intermediates/layout-analysis)
|
||||
|
||||
# For each URL in url_list:
|
||||
FOR url_info IN url_list:
|
||||
target = url_info.target
|
||||
url = url_info.url
|
||||
|
||||
IF mcp_chrome_devtools_available:
|
||||
REPORT: " Processing: {target} ({url})"
|
||||
|
||||
# Read extraction script
|
||||
script_content = Read(~/.claude/scripts/extract-layout-structure.js)
|
||||
|
||||
# Open page in Chrome DevTools
|
||||
mcp__chrome-devtools__navigate_page(url=url)
|
||||
|
||||
# Execute layout extraction script
|
||||
result = mcp__chrome-devtools__evaluate_script(function=script_content)
|
||||
|
||||
# Save DOM structure for this target (intermediate file)
|
||||
Write({base_path}/.intermediates/layout-analysis/dom-structure-{target}.json, result)
|
||||
|
||||
REPORT: " ✅ DOM structure extracted for '{target}'"
|
||||
ELSE:
|
||||
REPORT: " ⚠️ Chrome DevTools MCP not available, falling back to visual analysis"
|
||||
BREAK
|
||||
|
||||
dom_structure_available = mcp_chrome_devtools_available
|
||||
ELSE:
|
||||
dom_structure_available = false
|
||||
```
|
||||
|
||||
**Extraction Script Reference**: `~/.claude/scripts/extract-layout-structure.js`
|
||||
|
||||
**Usage**: Read the script file and use content directly in `mcp__chrome-devtools__evaluate_script()`
|
||||
|
||||
**Script returns**:
|
||||
- `metadata`: Extraction timestamp, URL, method, version
|
||||
- `patterns`: Layout pattern statistics (flexColumn, flexRow, grid counts)
|
||||
- `structure`: Hierarchical DOM tree with layout properties
|
||||
- `exploration`: (Optional) Progressive exploration results when standard selectors fail
|
||||
|
||||
**Benefits**:
|
||||
- ✅ Real flex/grid configuration (justifyContent, alignItems, gap, etc.)
|
||||
- ✅ Accurate element bounds (x, y, width, height)
|
||||
- ✅ Structural hierarchy with depth control
|
||||
- ✅ Layout pattern identification (flex-row, flex-column, grid-NCol)
|
||||
- ✅ Progressive exploration: Auto-discovers missing selectors
|
||||
|
||||
**Progressive Exploration Strategy** (v2.2.0+):
|
||||
|
||||
When script finds <3 main containers, it automatically:
|
||||
1. **Scans** all large visible containers (≥500×300px)
|
||||
2. **Extracts** class patterns matching: `main|content|wrapper|container|page|layout|app`
|
||||
3. **Suggests** new selectors to add to script
|
||||
4. **Returns** exploration data in `result.exploration`:
|
||||
```json
|
||||
{
|
||||
"triggered": true,
|
||||
"discoveredCandidates": [{classes, bounds, display}],
|
||||
"suggestedSelectors": [".wrapper", ".page-index"],
|
||||
"recommendation": ".wrapper, .page-index, .app-container"
|
||||
}
|
||||
```
|
||||
|
||||
**Using Exploration Results**:
|
||||
```javascript
|
||||
// After extraction, check for suggestions
|
||||
IF result.exploration?.triggered:
|
||||
REPORT: result.exploration.warning
|
||||
REPORT: "Suggested selectors: " + result.exploration.recommendation
|
||||
|
||||
// Update script by adding to commonClassSelectors array
|
||||
// Then re-run extraction for better coverage
|
||||
```
|
||||
|
||||
**Selector Update Workflow**:
|
||||
1. Run extraction on unfamiliar site
|
||||
2. Check `result.exploration.suggestedSelectors`
|
||||
3. Add relevant selectors to script's `commonClassSelectors`
|
||||
4. Re-run extraction → improved container detection
|
||||
|
||||
### Step 3: Memory Check
|
||||
```bash
|
||||
# 1. Check if inputs cached in session memory
|
||||
@@ -711,13 +598,6 @@ Configuration:
|
||||
- Device Type: {device_type}
|
||||
- Targets: {targets.join(", ")}
|
||||
- Total Templates: {total_tasks} ({targets.length} targets with multi-selection)
|
||||
{IF has_urls AND dom_structure_available:
|
||||
- 🔍 URL Mode: DOM structure extracted from {len(url_list)} URL(s)
|
||||
- Accuracy: Real flex/grid properties from live pages
|
||||
}
|
||||
{IF has_urls AND NOT dom_structure_available:
|
||||
- ⚠️ URL Mode: Chrome DevTools unavailable, used visual analysis fallback
|
||||
}
|
||||
|
||||
User Selections:
|
||||
{FOR each target in targets:
|
||||
@@ -734,10 +614,7 @@ Generated Templates:
|
||||
|
||||
Intermediate Files:
|
||||
- {base_path}/.intermediates/layout-analysis/
|
||||
├── analysis-options.json (concept proposals + user selections embedded)
|
||||
{IF dom_structure_available:
|
||||
├── dom-structure-*.json ({len(url_list)} DOM extracts)
|
||||
}
|
||||
└── analysis-options.json (concept proposals + user selections embedded)
|
||||
|
||||
Next: /workflow:ui-design:generate will combine these structural templates with design systems to produce final prototypes.
|
||||
```
|
||||
@@ -867,15 +744,11 @@ ERROR: MCP search failed
|
||||
|
||||
## Key Features
|
||||
|
||||
- **Auto-Trigger URL Mode** - Automatically extracts DOM structure when --urls provided (no manual flag needed)
|
||||
- **Hybrid Extraction Strategy** - Combines real DOM structure data with AI visual analysis
|
||||
- **Accurate Layout Properties** - Chrome DevTools extracts real flex/grid configurations, bounds, and hierarchy
|
||||
- **Separation of Concerns** - Decouples layout (structure) from style (visuals)
|
||||
- **Multi-Selection Workflow** - Generate N concepts → User selects multiple → Parallel template generation
|
||||
- **Structural Exploration** - Enables A/B testing of different layouts through multi-selection
|
||||
- **Token-Based Layout** - CSS uses `var()` placeholders for instant design system adaptation
|
||||
- **Device-Specific** - Tailored structures for different screen sizes
|
||||
- **Graceful Fallback** - Falls back to visual analysis if Chrome DevTools unavailable
|
||||
- **Foundation for Assembly** - Provides structural blueprint for prototype generation
|
||||
- **Agent-Powered** - Deep structural analysis with AI
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
name: style-extract
|
||||
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(*)
|
||||
argument-hint: "[--design-id <id>] [--session <id>] [--images "<glob>"] [--prompt "<desc>"] [--variants <count>] [--interactive] [--refine]"
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), AskUserQuestion(*)
|
||||
---
|
||||
|
||||
# Style Extraction Command
|
||||
@@ -24,23 +24,7 @@ Extract design style from reference images or text prompts using Claude's built-
|
||||
### Step 1: Detect Input Mode, Extraction Mode & Base Path
|
||||
```bash
|
||||
# Detect input source
|
||||
# Priority: --urls + --images + --prompt → hybrid-url | --urls + --images → url-image | --urls → url | --images + --prompt → hybrid | --images → image | --prompt → text
|
||||
|
||||
# Parse URLs if provided (format: "target:url,target:url,...")
|
||||
IF --urls:
|
||||
url_list = []
|
||||
FOR pair IN split(--urls, ","):
|
||||
IF ":" IN pair:
|
||||
target, url = pair.split(":", 1)
|
||||
url_list.append({target: target.strip(), url: url.strip()})
|
||||
ELSE:
|
||||
# Single URL without target
|
||||
url_list.append({target: "page", url: pair.strip()})
|
||||
|
||||
has_urls = true
|
||||
primary_url = url_list[0].url # First URL as primary source
|
||||
ELSE:
|
||||
has_urls = false
|
||||
# Priority: --images + --prompt → hybrid | --images → image | --prompt → text
|
||||
|
||||
# Detect refinement mode
|
||||
refine_mode = --refine OR false
|
||||
@@ -79,64 +63,7 @@ base_path=$(cd "$relative_path" && pwd)
|
||||
bash(echo "✓ Base path: $base_path")
|
||||
```
|
||||
|
||||
### Step 2: Extract Computed Styles (URL Mode - Auto-Trigger)
|
||||
```bash
|
||||
# AUTO-TRIGGER: If URLs are available (from --urls parameter or capture metadata), automatically extract real CSS values
|
||||
# This provides accurate design tokens to supplement visual analysis
|
||||
|
||||
# Priority 1: Check for --urls parameter
|
||||
IF has_urls:
|
||||
url_to_extract = primary_url
|
||||
url_source = "--urls parameter"
|
||||
|
||||
# Priority 2: Check for URL metadata from capture phase
|
||||
ELSE IF exists({base_path}/.metadata/capture-urls.json):
|
||||
capture_urls = Read({base_path}/.metadata/capture-urls.json)
|
||||
url_to_extract = capture_urls[0] # Use first URL
|
||||
url_source = "capture metadata"
|
||||
ELSE:
|
||||
url_to_extract = null
|
||||
|
||||
# Execute extraction if URL available
|
||||
IF url_to_extract AND mcp_chrome_devtools_available:
|
||||
REPORT: "🔍 Auto-triggering URL mode: Extracting computed styles from {url_source}"
|
||||
REPORT: " URL: {url_to_extract}"
|
||||
|
||||
# Read extraction script
|
||||
script_content = Read(~/.claude/scripts/extract-computed-styles.js)
|
||||
|
||||
# Open page in Chrome DevTools
|
||||
mcp__chrome-devtools__navigate_page(url=url_to_extract)
|
||||
|
||||
# Execute extraction script directly
|
||||
result = mcp__chrome-devtools__evaluate_script(function=script_content)
|
||||
|
||||
# Save computed styles to intermediates directory
|
||||
bash(mkdir -p {base_path}/.intermediates/style-analysis)
|
||||
Write({base_path}/.intermediates/style-analysis/computed-styles.json, result)
|
||||
|
||||
computed_styles_available = true
|
||||
REPORT: " ✅ Computed styles extracted and saved"
|
||||
ELSE:
|
||||
computed_styles_available = false
|
||||
IF url_to_extract:
|
||||
REPORT: "⚠️ Chrome DevTools MCP not available, falling back to visual analysis"
|
||||
```
|
||||
|
||||
**Extraction Script Reference**: `~/.claude/scripts/extract-computed-styles.js`
|
||||
|
||||
**Usage**: Read the script file and use content directly in `mcp__chrome-devtools__evaluate_script()`
|
||||
|
||||
**Script returns**:
|
||||
- `metadata`: Extraction timestamp, URL, method
|
||||
- `tokens`: Organized design tokens (colors, borderRadii, shadows, fontSizes, fontWeights, spacing)
|
||||
|
||||
**Benefits**:
|
||||
- ✅ Pixel-perfect accuracy for border-radius, box-shadow, padding, etc.
|
||||
- ✅ Eliminates guessing from visual analysis
|
||||
- ✅ Provides ground truth for design tokens
|
||||
|
||||
### Step 3: Load Inputs
|
||||
### Step 2: Load Inputs
|
||||
```bash
|
||||
# For image mode
|
||||
bash(ls {images_pattern}) # Expand glob pattern
|
||||
@@ -161,7 +88,7 @@ IF exists: SKIP to completion
|
||||
|
||||
---
|
||||
|
||||
**Phase 0 Output**: `input_mode`, `base_path`, `extraction_mode`, `variants_count`, `loaded_images[]` or `prompt_guidance`, `has_urls`, `url_list[]`, `computed_styles_available`
|
||||
**Phase 0 Output**: `input_mode`, `base_path`, `extraction_mode`, `variants_count`, `loaded_images[]` or `prompt_guidance`
|
||||
|
||||
## Phase 1: Design Direction or Refinement Options Generation
|
||||
|
||||
@@ -571,9 +498,8 @@ FOR variant_index IN 1..actual_variants_count:
|
||||
- Preview Border Radius: ${selected_direction.preview.border_radius_base}
|
||||
|
||||
## Input Analysis
|
||||
- Input mode: {input_mode} (image/text/hybrid${has_urls ? "/url" : ""})
|
||||
- Input mode: {input_mode} (image/text/hybrid)
|
||||
- Visual references: {loaded_images OR prompt_guidance}
|
||||
${computed_styles_available ? "- Computed styles: Use as ground truth (Read from .intermediates/style-analysis/computed-styles.json)" : ""}
|
||||
|
||||
## Generation Rules
|
||||
- Develop the selected design direction into a complete design system
|
||||
@@ -587,7 +513,7 @@ FOR variant_index IN 1..actual_variants_count:
|
||||
* innovation → token naming, experimental values
|
||||
- Honor search_keywords for design inspiration
|
||||
- Avoid anti_keywords patterns
|
||||
- All colors in OKLCH format ${computed_styles_available ? "(convert from computed RGB)" : ""}
|
||||
- All colors in OKLCH format
|
||||
- WCAG AA compliance: 4.5:1 text contrast, 3:1 UI contrast
|
||||
|
||||
## Generate
|
||||
@@ -656,16 +582,9 @@ TodoWrite({todos: [
|
||||
Configuration:
|
||||
- Session: {session_id}
|
||||
- Extraction Mode: {extraction_mode} (imitate/explore)
|
||||
- Input Mode: {input_mode} (image/text/hybrid{"/url" if has_urls else ""})
|
||||
- Input Mode: {input_mode} (image/text/hybrid)
|
||||
- Variants: {variants_count}
|
||||
- Production-Ready: Complete design systems generated
|
||||
{IF has_urls AND computed_styles_available:
|
||||
- 🔍 URL Mode: Computed styles extracted from {len(url_list)} URL(s)
|
||||
- Accuracy: Pixel-perfect design tokens from DOM
|
||||
}
|
||||
{IF has_urls AND NOT computed_styles_available:
|
||||
- ⚠️ URL Mode: Chrome DevTools unavailable, used visual analysis fallback
|
||||
}
|
||||
|
||||
{IF extraction_mode == "explore":
|
||||
Design Direction Selection:
|
||||
@@ -676,11 +595,6 @@ Design Direction Selection:
|
||||
Generated Files:
|
||||
{base_path}/style-extraction/
|
||||
└── style-1/design-tokens.json
|
||||
|
||||
{IF computed_styles_available:
|
||||
Intermediate Analysis:
|
||||
{base_path}/.intermediates/style-analysis/computed-styles.json (extracted from {primary_url})
|
||||
}
|
||||
{IF extraction_mode == "explore":
|
||||
{base_path}/.intermediates/style-analysis/analysis-options.json (design direction options + user selection)
|
||||
}
|
||||
@@ -811,15 +725,11 @@ ERROR: Claude JSON parsing error
|
||||
|
||||
## Key Features
|
||||
|
||||
- **Auto-Trigger URL Mode** - Automatically extracts computed styles when --urls provided (no manual flag needed)
|
||||
- **Direct Design System Generation** - Complete design-tokens.json + style-guide.md in one step
|
||||
- **Hybrid Extraction Strategy** - Combines computed CSS values (ground truth) with AI visual analysis
|
||||
- **Pixel-Perfect Accuracy** - Chrome DevTools extracts exact border-radius, shadows, spacing values
|
||||
- **AI-Driven Design Space Exploration** - 6D attribute space analysis for maximum contrast
|
||||
- **Variant-Specific Directions** - Each variant has unique philosophy, keywords, anti-patterns
|
||||
- **Maximum Contrast Guarantee** - Variants maximally distant in attribute space
|
||||
- **Flexible Input** - Images, text, URLs, or hybrid mode
|
||||
- **Graceful Fallback** - Falls back to pure visual inference if Chrome DevTools unavailable
|
||||
- **Flexible Input** - Images, text, or hybrid mode
|
||||
- **Production-Ready** - OKLCH colors, WCAG AA compliance, semantic naming
|
||||
- **Agent-Driven** - Autonomous multi-file generation with ui-design-agent
|
||||
|
||||
|
||||
Reference in New Issue
Block a user