diff --git a/.claude/commands/workflow/ui-design/imitate-auto.md b/.claude/commands/workflow/ui-design/imitate-auto.md index 45fcd5db..2ce9e40f 100644 --- a/.claude/commands/workflow/ui-design/imitate-auto.md +++ b/.claude/commands/workflow/ui-design/imitate-auto.md @@ -98,19 +98,6 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Write(*), Bash(*) ### Phase 0: Initialization and Target Parsing ```bash -REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" -REPORT: "🚀 UI Design Imitate-Auto" -REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" - -# Constants -DEPTH_NAMES = { - 1: "Page level", - 2: "Element level", - 3: "Interaction level", - 4: "Embedded level", - 5: "Shadow DOM" -} - # Generate run ID run_id = "run-$(date +%Y%m%d-%H%M%S)" @@ -119,12 +106,10 @@ IF --session: session_id = {provided_session} base_path = ".workflow/WFS-{session_id}/design-{run_id}" session_mode = "integrated" - REPORT: "Mode: Integrated (Session: {session_id})" ELSE: session_id = null base_path = ".workflow/.design/{run_id}" session_mode = "standalone" - REPORT: "Mode: Standalone" # Create base directory Bash(mkdir -p "{base_path}") @@ -198,20 +183,6 @@ metadata = { Write("{base_path}/.run-metadata.json", JSON.stringify(metadata, null, 2)) -REPORT: "" -REPORT: "Configuration:" -REPORT: " Capture mode: {capture_mode}" -IF capture_mode == "deep": - REPORT: " Depth level: {depth} ({DEPTH_NAMES[depth]})" - REPORT: " Target: '{primary_target}' ({url_map[primary_target]})" -ELSE: - REPORT: " Targets: {len(target_names)} pages" - REPORT: " Primary source: '{primary_target}' ({url_map[primary_target]})" - REPORT: " All targets: {', '.join(target_names)}" -IF --prompt: - REPORT: " Prompt guidance: \"{--prompt}\"" -REPORT: "" - # Initialize TodoWrite TodoWrite({todos: [ {content: "Initialize and parse url-map", status: "completed", activeForm: "Initializing"}, @@ -227,22 +198,14 @@ TodoWrite({todos: [ ```bash REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" -REPORT: f"🚀 Phase 1: Screenshot Capture ({capture_mode} mode)" +REPORT: "🚀 Phase 1: Screenshot Capture" REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" IF capture_mode == "batch": # Mode A: Batch Multi-URL Capture - REPORT: "Using batch capture for multiple URLs..." - - # Build url-map string for capture command url_map_command_string = ",".join([f"{name}:{url}" for name, url in url_map.items()]) - - # Call capture command capture_command = f"/workflow:ui-design:capture --base-path \"{base_path}\" --url-map \"{url_map_command_string}\"" - REPORT: f" Command: {capture_command}" - REPORT: f" Targets: {len(target_names)}" - TRY: SlashCommand(capture_command) CATCH error: @@ -263,34 +226,19 @@ IF capture_mode == "batch": total_requested = screenshot_metadata.total_requested missing_count = total_requested - captured_count - REPORT: "" - REPORT: "✅ Batch capture complete:" - REPORT: " Captured: {captured_count}/{total_requested} screenshots ({(captured_count/total_requested*100):.1f}%)" - 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)}" - WARN: " Proceeding with available screenshots for extract phase" + WARN: "⚠️ Missing {missing_count} screenshots: {', '.join(missing_targets)}" - # If all screenshots failed, terminate IF captured_count == 0: ERROR: "No screenshots captured - cannot proceed" - ERROR: "Please check URLs and tool availability" EXIT 1 ELSE: # capture_mode == "deep" # Mode B: Deep Interactive Layer Exploration - REPORT: "Using deep exploration for single URL..." - primary_url = url_map[primary_target] - - # Call explore-layers command explore_command = f"/workflow:ui-design:explore-layers --url \"{primary_url}\" --depth {depth} --base-path \"{base_path}\"" - REPORT: f" Command: {explore_command}" - REPORT: f" URL: {primary_url}" - REPORT: f" Depth: {depth} ({DEPTH_NAMES[depth]})" - TRY: SlashCommand(explore_command) CATCH error: @@ -307,16 +255,7 @@ ELSE: # capture_mode == "deep" EXIT 1 layer_map = Read(layer_map_path) - total_layers = len(layer_map.layers) captured_count = layer_map.summary.total_captures - - REPORT: "" - REPORT: "✅ Deep exploration complete:" - REPORT: " Layers: {total_layers} (depth 1-{depth})" - REPORT: " Captures: {captured_count} screenshots" - REPORT: " Total size: {layer_map.summary.total_size_kb:.1f} KB" - - # Count actual images for extract phase 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})", @@ -326,31 +265,29 @@ TodoWrite(mark_completed: f"Batch screenshot capture ({len(target_names)} target ### Phase 2: Style Extraction (Visual Tokens) ```bash -REPORT: "" REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" -REPORT: "🚀 Phase 2: Extract Style (Visual Tokens)" +REPORT: "🚀 Phase 2: Style Extraction" REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" # Use all screenshots as input to extract single design system IF capture_mode == "batch": images_glob = f"{base_path}/screenshots/*.{{png,jpg,jpeg,webp}}" ELSE: # deep mode - images_glob = f"{base_path}/screenshots/**/*.{{png,jpg,jpeg,webp}}" # Include all depth directories + images_glob = f"{base_path}/screenshots/**/*.{{png,jpg,jpeg,webp}}" # Build extraction prompt IF --prompt: user_guidance = {--prompt} - extraction_prompt = f"Extract visual style tokens (colors, typography, spacing) from the '{primary_target}' page. Use other screenshots for consistency. User guidance: {user_guidance}" + extraction_prompt = f"Extract visual style tokens from '{primary_target}'. User guidance: {user_guidance}" ELSE: - extraction_prompt = f"Extract visual style tokens (colors, typography, spacing) from the '{primary_target}' page. Use other screenshots for consistency across all pages." + extraction_prompt = f"Extract visual style tokens from '{primary_target}' with consistency across all pages." + +# Build url-map string for style-extract (enables computed styles extraction) +url_map_for_extract = ",".join([f"{name}:{url}" for name, url in url_map.items()]) # Call style-extract command (imitate mode, automatically uses single variant) -extract_command = f"/workflow:ui-design:style-extract --base-path \"{base_path}\" --images \"{images_glob}\" --prompt \"{extraction_prompt}\" --mode imitate" - -REPORT: "Calling style-extract command..." -REPORT: f" Mode: imitate (high-fidelity single style, auto variants=1)" -REPORT: f" Primary source: '{primary_target}'" -REPORT: f" Images: {images_glob}" +# Pass --urls to enable auto-trigger of computed styles extraction +extract_command = f"/workflow:ui-design:style-extract --base-path \"{base_path}\" --images \"{images_glob}\" --urls \"{url_map_for_extract}\" --prompt \"{extraction_prompt}\" --mode imitate" TRY: SlashCommand(extract_command) @@ -359,30 +296,14 @@ CATCH error: ERROR: "Cannot proceed without visual tokens" EXIT 1 -# style-extract outputs to: {base_path}/style-extraction/style-1/design-tokens.json - # Verify extraction results design_tokens_path = "{base_path}/style-extraction/style-1/design-tokens.json" style_guide_path = "{base_path}/style-extraction/style-1/style-guide.md" -IF NOT exists(design_tokens_path): - ERROR: "style-extract command did not generate design-tokens.json" - ERROR: "Expected: {design_tokens_path}" +IF NOT exists(design_tokens_path) OR NOT exists(style_guide_path): + ERROR: "style-extract did not generate required files" EXIT 1 -IF NOT exists(style_guide_path): - ERROR: "style-extract command did not generate style-guide.md" - ERROR: "Expected: {style_guide_path}" - EXIT 1 - -design_tokens = Read(design_tokens_path) - -REPORT: "" -REPORT: "✅ Phase 2 complete:" -REPORT: " Output: style-extraction/style-1/" -REPORT: " Files: design-tokens.json, style-guide.md" -REPORT: " Quality: Production-ready (WCAG AA)" - TodoWrite(mark_completed: "Extract style (complete design systems)", mark_in_progress: "Extract layout (structure templates)") ``` @@ -390,22 +311,16 @@ TodoWrite(mark_completed: "Extract style (complete design systems)", ### Phase 2.5: Layout Extraction (Structure Templates) ```bash -REPORT: "" REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" -REPORT: "🚀 Phase 2.5: Extract Layout (Structure Templates)" +REPORT: "🚀 Phase 2.5: Layout Extraction" REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" -# Reuse same screenshots for layout extraction -# Build URL map for layout-extract (uses first URL from each target) +# Build URL map for layout-extract url_map_for_layout = ",".join([f"{target}:{url}" for target, url in url_map.items()]) # Call layout-extract command (imitate mode for structure replication) -layout_extract_command = f"/workflow:ui-design:layout-extract --base-path \"{base_path}\" --images \"{images_glob}\" --targets \"{','.join(target_names)}\" --mode imitate" - -REPORT: "Calling layout-extract command..." -REPORT: f" Mode: imitate (high-fidelity structure replication)" -REPORT: f" Targets: {', '.join(target_names)}" -REPORT: f" Images: {images_glob}" +# Pass --urls to enable auto-trigger of DOM structure extraction +layout_extract_command = f"/workflow:ui-design:layout-extract --base-path \"{base_path}\" --images \"{images_glob}\" --urls \"{url_map_for_layout}\" --targets \"{','.join(target_names)}\" --mode imitate" TRY: SlashCommand(layout_extract_command) @@ -414,24 +329,13 @@ CATCH error: ERROR: "Cannot proceed without layout templates" EXIT 1 -# layout-extract outputs to: {base_path}/layout-extraction/layout-templates.json - # Verify layout extraction results layout_templates_path = "{base_path}/layout-extraction/layout-templates.json" IF NOT exists(layout_templates_path): - ERROR: "layout-extract command did not generate layout-templates.json" - ERROR: "Expected: {layout_templates_path}" + ERROR: "layout-extract did not generate layout-templates.json" EXIT 1 -layout_templates = Read(layout_templates_path) -template_count = len(layout_templates.layout_templates) - -REPORT: "" -REPORT: "✅ Phase 2.5 complete:" -REPORT: " Templates: {template_count} layout structures" -REPORT: " Targets: {', '.join(target_names)}" - TodoWrite(mark_completed: "Extract layout (structure templates)", mark_in_progress: f"Assemble UI for {len(target_names)} targets") ``` @@ -439,25 +343,13 @@ TodoWrite(mark_completed: "Extract layout (structure templates)", ### Phase 3: Batch UI Assembly ```bash -REPORT: "" REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" -REPORT: "🚀 Phase 3: Batch UI Assembly" +REPORT: "🚀 Phase 3: UI Assembly" REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" -# Note: design-tokens.json already generated in Phase 2 (style-extract) -# Located at: {base_path}/style-extraction/style-1/design-tokens.json - -# Build targets string -targets_string = ",".join(target_names) - -# Call generate command (now pure assembler - combines layout templates + design tokens) +# Call generate command (pure assembler - combines layout templates + design tokens) generate_command = f"/workflow:ui-design:generate --base-path \"{base_path}\" --style-variants 1 --layout-variants 1" -REPORT: "Calling generate command (pure assembler)..." -REPORT: f" Targets: {targets_string} (from layout templates)" -REPORT: f" Configuration: 1 style × 1 layout × {len(target_names)} pages" -REPORT: f" Inputs: layout-templates.json + design-tokens.json" - TRY: SlashCommand(generate_command) CATCH error: @@ -465,22 +357,13 @@ CATCH error: ERROR: "Layout templates or design tokens may be invalid" EXIT 1 -# generate outputs to: {base_path}/prototypes/{target}-style-1-layout-1.html - # Verify assembly results prototypes_dir = "{base_path}/prototypes" generated_html_files = Glob(f"{prototypes_dir}/*-style-1-layout-1.html") generated_count = len(generated_html_files) -REPORT: "" -REPORT: "✅ Phase 4 complete:" -REPORT: " Assembled: {generated_count} HTML prototypes" -REPORT: " Targets: {', '.join(target_names)}" -REPORT: " Output: {prototypes_dir}/" - IF generated_count < len(target_names): - WARN: " ⚠️ Expected {len(target_names)} prototypes, assembled {generated_count}" - WARN: " Some targets may have failed - check generate output" + WARN: "⚠️ Expected {len(target_names)} prototypes, assembled {generated_count}" TodoWrite(mark_completed: f"Assemble UI for {len(target_names)} targets", mark_in_progress: session_id ? "Integrate design system" : "Standalone completion") @@ -489,30 +372,18 @@ TodoWrite(mark_completed: f"Assemble UI for {len(target_names)} targets", ### Phase 4: Design System Integration ```bash -REPORT: "" REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" REPORT: "🚀 Phase 4: Design System Integration" REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" IF session_id: - REPORT: "Integrating design system into session {session_id}..." - update_command = f"/workflow:ui-design:update --session {session_id}" TRY: SlashCommand(update_command) CATCH error: - WARN: "Design system integration failed: {error}" - WARN: "Prototypes are still available at {base_path}/prototypes/" - # Don't terminate, prototypes already generated - - REPORT: "✅ Design system integrated into session {session_id}" -ELSE: - REPORT: "ℹ️ Standalone mode: Skipping integration" - REPORT: " Prototypes available at: {base_path}/prototypes/" - REPORT: " To integrate later:" - REPORT: " 1. Create a workflow session" - REPORT: " 2. Copy design-tokens.json to session artifacts" + WARN: "⚠️ Design system integration failed: {error}" + WARN: "Prototypes available at {base_path}/prototypes/" # Update metadata metadata = Read("{base_path}/.run-metadata.json") diff --git a/.claude/commands/workflow/ui-design/layout-extract.md b/.claude/commands/workflow/ui-design/layout-extract.md index c4a943d6..4a154ee3 100644 --- a/.claude/commands/workflow/ui-design/layout-extract.md +++ b/.claude/commands/workflow/ui-design/layout-extract.md @@ -29,6 +29,22 @@ Extract structural layout information from reference images, URLs, or text promp # 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 = [] + # Determine extraction mode extraction_mode = --mode OR "imitate" # "imitate" or "explore" @@ -40,8 +56,15 @@ ELSE IF extraction_mode == "explore": VALIDATE: 1 <= variants_count <= 5 # Resolve targets -# Priority: --targets → prompt analysis → default ["page"] -targets = --targets OR extract_from_prompt(--prompt) OR ["page"] +# Priority: --targets → url_list 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: + targets = extract_from_prompt(--prompt) +ELSE: + targets = ["page"] # Resolve device type device_type = --device-type OR "responsive" # desktop|mobile|tablet|responsive @@ -68,27 +91,43 @@ Read({image_path}) # Load each image bash(mkdir -p {base_path}/layout-extraction) ``` -### Step 2.5: Extract DOM Structure (URL Mode - Enhancement) +### Step 2.5: Extract DOM Structure (URL Mode - Auto-Trigger) ```bash -# If URLs are available, extract real DOM structure +# AUTO-TRIGGER: If URLs are available (from --urls parameter), automatically extract real DOM structure # This provides accurate layout data to supplement visual analysis -# For each URL in url_list: -IF url_available AND mcp_chrome_devtools_available: - # Read extraction script - Read(~/.claude/scripts/extract-layout-structure.js) +# Check if URLs provided via --urls parameter +IF --urls AND url_list: + REPORT: "🔍 Auto-triggering URL mode: Extracting DOM structure" - # Open page in Chrome DevTools - mcp__chrome-devtools__navigate_page(url="{target_url}") - - # Execute layout extraction script - result = mcp__chrome-devtools__evaluate_script(function="[SCRIPT_CONTENT]") - - # Save DOM structure for this target (intermediate file) bash(mkdir -p {base_path}/.intermediates/layout-analysis) - Write({base_path}/.intermediates/layout-analysis/dom-structure-{target}.json, result) - dom_structure_available = true + # 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 ``` @@ -266,6 +305,13 @@ Configuration: - Targets: {targets} - Variants per Target: {variants_count} - Total Templates: {targets.length × variants_count} +{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 +} {IF extraction_mode == "explore": Layout Research: @@ -278,6 +324,9 @@ Generated Templates: Output File: - {base_path}/layout-extraction/layout-templates.json +{IF dom_structure_available: +- {base_path}/.intermediates/layout-analysis/dom-structure-*.json ({len(url_list)} files) +} Next: /workflow:ui-design:generate will combine these structural templates with style systems to produce final prototypes. ``` @@ -412,13 +461,14 @@ ERROR: MCP search failed (explore mode) ## 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) - **Structural Exploration** - Explore mode enables A/B testing of different layouts - **Token-Based Layout** - CSS uses `var()` placeholders for instant design system adaptation - **Device-Specific** - Tailored structures for different screen sizes -- **Graceful Fallback** - Works with images/text when URL unavailable +- **Graceful Fallback** - Falls back to visual analysis if Chrome DevTools unavailable - **Foundation for Assembly** - Provides structural blueprint for refactored `generate` command - **Agent-Powered** - Deep structural analysis with AI diff --git a/.claude/commands/workflow/ui-design/style-extract.md b/.claude/commands/workflow/ui-design/style-extract.md index 5c13fa64..ee14a691 100644 --- a/.claude/commands/workflow/ui-design/style-extract.md +++ b/.claude/commands/workflow/ui-design/style-extract.md @@ -1,8 +1,8 @@ --- name: style-extract description: Extract design style from reference images or text prompts using Claude's analysis -argument-hint: "[--base-path ] [--session ] [--images ""] [--prompt ""] [--mode ] [--variants ]" -allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*) +argument-hint: "[--base-path ] [--session ] [--images ""] [--urls ""] [--prompt ""] [--mode ] [--variants ]" +allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), mcp__chrome-devtools__navigate_page(*), mcp__chrome-devtools__evaluate_script(*) --- # Style Extraction Command @@ -22,7 +22,23 @@ 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: --images + --prompt → hybrid | --images → image | --prompt → text +# 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 # Determine extraction mode # Priority: --mode parameter → default "imitate" @@ -40,32 +56,48 @@ bash(find .workflow -type d -name "design-*" | head -1) # Auto-detect # OR use --base-path / --session parameters ``` -### Step 2: Extract Computed Styles (URL Mode - Optional Enhancement) +### Step 2: Extract Computed Styles (URL Mode - Auto-Trigger) ```bash -# If URL is available from capture metadata, extract real CSS values +# 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 -# Check for URL metadata from capture phase -Read({base_path}/.metadata/capture-urls.json) # If exists +# 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}" -# For each URL in capture metadata: -IF url_available AND mcp_chrome_devtools_available: # Read extraction script - Read(~/.claude/scripts/extract-computed-styles.js) + script_content = Read(~/.claude/scripts/extract-computed-styles.js) # Open page in Chrome DevTools - mcp__chrome-devtools__navigate_page(url="{target_url}") + mcp__chrome-devtools__navigate_page(url=url_to_extract) # Execute extraction script directly - result = mcp__chrome-devtools__evaluate_script(function="[SCRIPT_CONTENT]") + 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` @@ -106,7 +138,7 @@ IF exists: SKIP to completion --- -**Phase 0 Output**: `input_mode`, `base_path`, `extraction_mode`, `variants_count`, `loaded_images[]` or `prompt_guidance` +**Phase 0 Output**: `input_mode`, `base_path`, `extraction_mode`, `variants_count`, `loaded_images[]` or `prompt_guidance`, `has_urls`, `url_list[]`, `computed_styles_available` ## Phase 1: Design Space Analysis (Explore Mode Only) @@ -254,9 +286,16 @@ TodoWrite({todos: [ Configuration: - Session: {session_id} - Extraction Mode: {extraction_mode} (imitate/explore) -- Input Mode: {input_mode} (image/text/hybrid) +- Input Mode: {input_mode} (image/text/hybrid{"/url" if has_urls else ""}) - 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 Space Analysis: @@ -270,8 +309,11 @@ Generated Files: ├── style-2/ (same structure) └── style-{variants_count}/ (same structure) -{IF extraction_mode == "explore": +{IF computed_styles_available: Intermediate Analysis: +{base_path}/.intermediates/style-analysis/computed-styles.json (extracted from {primary_url}) +} +{IF extraction_mode == "explore": {base_path}/.intermediates/style-analysis/design-space-analysis.json } @@ -371,6 +413,7 @@ 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 @@ -378,7 +421,7 @@ ERROR: Claude JSON parsing error - **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 URL unavailable +- **Graceful Fallback** - Falls back to pure visual inference if Chrome DevTools unavailable - **Production-Ready** - OKLCH colors, WCAG AA compliance, semantic naming - **Agent-Driven** - Autonomous multi-file generation with ui-design-agent