docs: remove URL support from UI workflow commands

Removed all URL-related parameters and functionality from UI design commands as they are no longer supported. All commands now only accept local files. Changes: - style-extract.md: Removed --urls parameter and all URL mode logic - layout-extract.md: Removed --urls parameter and DOM extraction via URLs - COMMAND_SPEC.md: Deleted capture and explore-layers commands, updated syntax Affected commands: - /workflow:ui-design:style-extract: Only accepts --images and --prompt - /workflow:ui-design:layout-extract: Only accepts --images and --prompt - Removed: /workflow:ui-design:capture (command deleted) - Removed: /workflow:ui-design:explore-layers (command deleted) All UI workflow commands now require manual input of local resources (images, code files, HTML, CSS, JS) instead of fetching from URLs.
2026-02-11 02:33:51 +08:00 · 2025-11-20 11:35:00 +00:00
parent 6fe31cc408
commit 229a9867e6
3 changed files with 19 additions and 254 deletions
--- a/.claude/commands/workflow/ui-design/layout-extract.md
+++ b/.claude/commands/workflow/ui-design/layout-extract.md
@@ -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

--- 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 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