Merge branch 'main' of https://github.com/catlog22/Claude-Code-Workflow

Remove unsupported URL input from UI workflow docs

.claude/commands/memory/docs.md

@@ -44,7 +44,11 @@ Lightweight planner that analyzes project structure, decomposes documentation wo
 /memory:docs [path] [--tool <gemini|qwen|codex>] [--mode <full|partial>] [--cli-execute]
 ```
 
-- **path**: Target directory (default: current directory)
+- **path**: Source directory to analyze (default: current directory)
+  - Specifies the source code directory to be documented
+  - Documentation is generated in a separate `.workflow/docs/{project_name}/` directory at the workspace root, **not** within the source `path` itself
+  - The source path's structure is mirrored within the project-specific documentation folder
+  - Example: analyzing `src/modules` produces documentation at `.workflow/docs/{project_name}/src/modules/`
 - **--mode**: Documentation generation mode (default: full)
   - `full`: Complete documentation (modules + README + ARCHITECTURE + EXAMPLES + HTTP API)
   - `partial`: Module documentation only (API.md + README.md)

.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
 

.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
 

.claude/skills/command-guide/guides/ui-design-workflow-guide.md

@@ -11,7 +11,7 @@ The UI Design Workflow System is a comprehensive suite of 11 autonomous commands
 These commands automate end-to-end processes by chaining specialized sub-commands.
 
 - **`/workflow:ui-design:explore-auto`**: For creating *new* designs. Generates multiple style and layout variants from a prompt to explore design directions.
-- **`/workflow:ui-design:imitate-auto`**: For *replicating* existing designs. High-fidelity cloning of target URLs into a reusable design system.
+- **`/workflow:ui-design:imitate-auto`**: For *replicating* existing designs. Creates design systems from local reference files (images, code) or text prompts.
 
 ### 2. Core Extractors (Specialized Analysis)
 
@@ -98,31 +98,35 @@ Tools for combining components and integrating results.
 
 ### Workflow B: Design Replication (Imitation)
 
-**Goal:** Create a design system and prototypes based on existing reference sites.
+**Goal:** Create a design system and prototypes based on existing local references.
 
 **Primary Command:** `imitate-auto`
 
 **Steps:**
 
-1. **Initiate**: User runs `/workflow:ui-design:imitate-auto --url-map "home:https://example.com, pricing:https://example.com/pricing"`
-2. **Capture**: System screenshots all provided URLs.
-3. **Extraction**: System extracts a unified design system (style, layout, animation) from the primary URL.
-4. **Assembly**: System recreates all target pages using the extracted system.
+1. **Initiate**: User runs `/workflow:ui-design:imitate-auto --input "design-refs/*.png"` with local reference files
+2. **Input Detection**: System detects input type (images, code files, or text)
+3. **Extraction**: System extracts a unified design system (style, layout, animation) from the references.
+4. **Assembly**: System creates prototypes using the extracted system.
 
 **Example:**
 
 ```bash
+# Using reference images
 /workflow:ui-design:imitate-auto \
-  --url-map "landing:https://stripe.com, pricing:https://stripe.com/pricing, docs:https://stripe.com/docs" \
-  --capture-mode batch \
+  --input "design-refs/*.png" \
+  --session WFS-002
+
+# Or importing from existing code
+/workflow:ui-design:imitate-auto \
+  --input "./src/components" \
   --session WFS-002
 ```
 
 **Output:**
-- Screenshots of all URLs
 - `design-tokens.json` (unified style system)
 - `layout-templates.json` (page structures)
-- 3 HTML prototypes matching the captured pages
+- HTML prototypes based on the input references
 
 ---
 
@@ -204,10 +208,10 @@ For high-volume generation:
 - Specify the *targets* (e.g., "dashboard, settings page")
 - Include functional requirements (e.g., "responsive, mobile-first")
 
-**For URL Mapping:**
-- First URL is treated as primary source of truth
-- Use descriptive keys in `--url-map`
-- Ensure URLs are accessible (no authentication walls)
+**For Local References:**
+- Use high-quality reference images (PNG, JPG)
+- Organize files in accessible directories
+- For code imports, ensure files are properly structured (CSS, JS, HTML)
 
 ---
 
@@ -233,8 +237,8 @@ You can run UI design workflows within an existing workflow session:
 **Example: Imitation + Custom Extraction**
 
 ```bash
-# 1. Replicate existing design
-/workflow:ui-design:imitate-auto --url-map "ref:https://example.com"
+# 1. Import design from local references
+/workflow:ui-design:imitate-auto --input "design-refs/*.png"
 
 # 2. Extract additional layouts and generate prototypes
 /workflow:ui-design:layout-extract --targets "new-page-1,new-page-2"

COMMAND_SPEC.md

@@ -405,34 +405,23 @@ Specialized workflow for UI/UX design, from style extraction to prototype genera
   ```
 
 ### **/workflow:ui-design:imitate-auto**
-- **Syntax**: `/workflow:ui-design:imitate-auto --url-map "<map>" [--capture-mode <batch|deep>] ...`
-- **Responsibilities**: High-speed, multi-page UI replication workflow that captures screenshots and orchestrates the full design pipeline.
+- **Syntax**: `/workflow:ui-design:imitate-auto --input "<value>" [--session <id>]`
+- **Responsibilities**: UI design workflow with direct code/image input for design token extraction and prototype generation. Accepts local code files, images (glob patterns), or text descriptions.
 - **Agent Calls**: `@ui-design-agent`.
 - **Example**:
   ```bash
-  /workflow:ui-design:imitate-auto --url-map "home:https://linear.app, features:https://linear.app/features"
-  ```
+  # Image reference
+  /workflow:ui-design:imitate-auto --input "design-refs/*.png"
 
-### **/workflow:ui-design:capture**
-- **Syntax**: `/workflow:ui-design:capture --url-map "target:url,..." ...`
-- **Responsibilities**: Batch screenshot capture tool using MCP Chrome DevTools with multi-tier fallback strategy (MCP → Playwright → Chrome → Manual).
-- **Agent Calls**: None directly, uses MCP Chrome DevTools or browser automation as fallback.
-- **Example**:
-  ```bash
-  /workflow:ui-design:capture --url-map "home:https://linear.app"
-  ```
+  # Code import
+  /workflow:ui-design:imitate-auto --input "./src/components"
 
-### **/workflow:ui-design:explore-layers**
-- **Syntax**: `/workflow:ui-design:explore-layers --url <url> --depth <1-5> ...`
-- **Responsibilities**: Performs a deep, interactive UI capture of a single URL, exploring layers from the full page down to the Shadow DOM.
-- **Agent Calls**: None directly, uses MCP Chrome DevTools for layer exploration.
-- **Example**:
-  ```bash
-  /workflow:ui-design:explore-layers --url https://linear.app --depth 3
+  # Text prompt
+  /workflow:ui-design:imitate-auto --input "Modern minimalist design"
   ```
 
 ### **/workflow:ui-design:style-extract**
-- **Syntax**: `/workflow:ui-design:style-extract [--images "..."] [--prompt "..."] ...`
+- **Syntax**: `/workflow:ui-design:style-extract [--images "<glob>"] [--prompt "<desc>"] [--variants <count>] ...`
 - **Responsibilities**: Extracts design styles from images or text prompts and generates production-ready design systems (`design-tokens.json`, `style-guide.md`).
 - **Agent Calls**: `@ui-design-agent`.
 - **Example**:
@@ -441,12 +430,12 @@ Specialized workflow for UI/UX design, from style extraction to prototype genera
   ```
 
 ### **/workflow:ui-design:layout-extract**
-- **Syntax**: `/workflow:ui-design:layout-extract [--images "..."] [--urls "..."] ...`
-- **Responsibilities**: Extracts structural layout information (HTML structure, CSS layout rules) separately from visual style.
+- **Syntax**: `/workflow:ui-design:layout-extract [--images "<glob>"] [--prompt "<desc>"] [--targets "<list>"] ...`
+- **Responsibilities**: Extracts structural layout information (HTML structure, CSS layout rules) from images or text prompts.
 - **Agent Calls**: `@ui-design-agent`.
 - **Example**:
   ```bash
-  /workflow:ui-design:layout-extract --urls "home:https://linear.app" --mode imitate
+  /workflow:ui-design:layout-extract --images "design-refs/*.png" --targets "home,dashboard"
   ```
 
 ### **/workflow:ui-design:generate**

EXAMPLES.md

@@ -434,8 +434,11 @@ services/
 **Objective**: Create a complete design system for a SaaS application
 
 ```bash
-# Extract design from reference
-/workflow:ui-design:imitate-auto --input "https://example-saas.com"
+# Extract design from local reference images
+/workflow:ui-design:imitate-auto --input "design-refs/*.png"
+
+# Or import from existing code
+/workflow:ui-design:imitate-auto --input "./src/components"
 
 # Or create from scratch
 /workflow:ui-design:explore-auto --prompt "Modern SaaS design system with primary components: buttons, inputs, cards, modals, navigation" --targets "button,input,card,modal,navbar" --style-variants 3

GETTING_STARTED.md

@@ -408,7 +408,7 @@ CCW includes a powerful, multi-phase workflow for UI design and prototyping, cap
 ### Key Commands
 
 -   `/workflow:ui-design:explore-auto`: An exploratory workflow that generates multiple, distinct design variations based on a prompt.
--   `/workflow:ui-design:imitate-auto`: A replication workflow that creates high-fidelity prototypes from reference URLs.
+-   `/workflow:ui-design:imitate-auto`: A design workflow that creates prototypes from local reference files (images, code) or text prompts.
 
 ### Example: Generating a UI from a Prompt
 

GETTING_STARTED_CN.md

@@ -408,7 +408,7 @@ CCW 包含强大的多阶段 UI 设计和原型制作工作流,能够从简单
 ### 核心命令
 
 -   `/workflow:ui-design:explore-auto`: 探索性工作流,基于提示词生成多种不同的设计变体。
--   `/workflow:ui-design:imitate-auto`: 复制工作流,从参考 URL 创建高保真原型。
+-   `/workflow:ui-design:imitate-auto`: 设计工作流,从本地参考文件(图片、代码)或文本提示创建原型。
 
 ### 示例：从提示词生成 UI
 

WORKFLOW_DECISION_GUIDE.md

@@ -26,7 +26,7 @@ flowchart TD
     Q3 -->|不需要| Q4{任务复杂度?}
 
     UIDesign --> Q3a{有参考设计吗?}
-    Q3a -->|有| UIImitate[/ /workflow:ui-design:imitate-auto<br>--input 参考URL /]
+    Q3a -->|有| UIImitate[/ /workflow:ui-design:imitate-auto<br>--input 本地文件/图片 /]
     Q3a -->|无| UIExplore[/ /workflow:ui-design:explore-auto<br>--prompt 设计描述 /]
 
     UIImitate --> UISync[/ /workflow:ui-design:design-sync<br>同步设计系统 /]
@@ -158,14 +158,16 @@ flowchart TD
 
 | 情况 | 命令 | 说明 |
 |------|------|------|
-| 🎨 有参考设计 | `/workflow:ui-design:imitate-auto --input "URL"` | 基于现有设计复制 |
+| 🎨 有参考设计 | `/workflow:ui-design:imitate-auto --input "本地文件/图片"` | 基于本地参考文件/图片复制设计 |
 | 🎨 从零设计 | `/workflow:ui-design:explore-auto --prompt "描述"` | 生成多个设计变体 |
 | ⏭️ 后端/无UI | 跳过 | 纯后端API、CLI工具等 |
 
 **示例**：
 ```bash
-# 有参考：模仿Google Docs的协作界面
-/workflow:ui-design:imitate-auto --input "https://docs.google.com"
+# 有参考：使用本地截图或代码文件
+/workflow:ui-design:imitate-auto --input "design-refs/*.png"
+# 或从现有代码导入
+/workflow:ui-design:imitate-auto --input "./src/components"
 
 # 无参考：从零设计
 /workflow:ui-design:explore-auto --prompt "现代简洁的文档协作编辑界面" --style-variants 3

WORKFLOW_DECISION_GUIDE_EN.md

@@ -26,7 +26,7 @@ flowchart TD
     Q3 -->|No| Q4{Task complexity?}
 
     UIDesign --> Q3a{Have reference design?}
-    Q3a -->|Yes| UIImitate[/ /workflow:ui-design:imitate-auto<br>--input reference URL /]
+    Q3a -->|Yes| UIImitate[/ /workflow:ui-design:imitate-auto<br>--input local files/images /]
     Q3a -->|No| UIExplore[/ /workflow:ui-design:explore-auto<br>--prompt design description /]
 
     UIImitate --> UISync[/ /workflow:ui-design:design-sync<br>Sync design system /]
@@ -158,14 +158,16 @@ flowchart TD
 
 | Situation | Command | Description |
 |-----------|---------|-------------|
-| 🎨 Have reference design | `/workflow:ui-design:imitate-auto --input "URL"` | Copy from existing design |
+| 🎨 Have reference design | `/workflow:ui-design:imitate-auto --input "local files/images"` | Copy design from local reference files/images |
 | 🎨 Design from scratch | `/workflow:ui-design:explore-auto --prompt "description"` | Generate multiple design variants |
 | ⏭️ Backend/No UI | Skip | Pure backend API, CLI tools, etc. |
 
 **Examples**:
 ```bash
-# Have reference: Imitate Google Docs collaboration interface
-/workflow:ui-design:imitate-auto --input "https://docs.google.com"
+# Have reference: Use local screenshots or code files
+/workflow:ui-design:imitate-auto --input "design-refs/*.png"
+# Or import from existing code
+/workflow:ui-design:imitate-auto --input "./src/components"
 
 # No reference: Design from scratch
 /workflow:ui-design:explore-auto --prompt "Modern minimalist document collaboration editing interface" --style-variants 3

orchestrator-param-check-report.md

@@ -1,277 +0,0 @@
-# 编排器命令参数透传检查报告
-
-生成时间: 2025-11-20
-
-## 检查范围
-
-检查所有通过 SlashCommand 工具调用其他 slash commands 的编排器命令，验证参数是否正确透传。
-
-## 检查结果总结
-
-✅ **所有编排器命令参数透传正确**
-
-已检查 11 个编排器命令，未发现参数透传错误。
-
----
-
-## 详细检查清单
-
-### 1. `/memory:skill-memory` (4-Phase Orchestrator)
-
-**文件**: `.claude/commands/memory/skill-memory.md`
-
-**调用的命令**:
-- Phase 2: `/memory:docs [targetPath] --tool [tool] --mode [mode] [--cli-execute]`
-- Phase 3: `/workflow:execute`
-
-**参数透传验证**:
-- ✅ `[targetPath]` - Phase 1 获取 → Phase 2 透传
-- ✅ `--tool` - 用户参数 → Phase 2 透传
-- ✅ `--mode` - 用户参数 → Phase 2 透传
-- ✅ `--cli-execute` - 用户参数 → Phase 2 透传
-
-**状态**: ✅ 正确
-
----
-
-### 2. `/workflow:plan` (5-Phase Orchestrator)
-
-**文件**: `.claude/commands/workflow/plan.md`
-
-**调用的命令**:
-- Phase 1: `/workflow:session:start --auto "[structured-task-description]"`
-- Phase 2: `/workflow:tools:context-gather --session [sessionId] "[structured-task-description]"`
-- Phase 3: `/workflow:tools:conflict-resolution --session [sessionId] --context [contextPath]` (conditional)
-- Phase 4: `/workflow:tools:task-generate-agent --session [sessionId] [--cli-execute]`
-
-**参数透传验证**:
-- ✅ `[structured-task-description]` - 用户输入 → Phase 1, 2
-- ✅ `[sessionId]` - Phase 1 输出 → Phase 2, 3, 4
-- ✅ `[contextPath]` - Phase 2 输出 → Phase 3
-- ✅ `--cli-execute` - 用户参数 → Phase 4
-
-**状态**: ✅ 正确
-
----
-
-### 3. `/workflow:test-gen` (5-Phase Orchestrator)
-
-**文件**: `.claude/commands/workflow/test-gen.md`
-
-**调用的命令**:
-- Phase 1: `/workflow:session:start --new "Test validation for [sourceSessionId]"`
-- Phase 2: `/workflow:tools:test-context-gather --session [testSessionId]`
-- Phase 3: `/workflow:tools:test-concept-enhanced --session [testSessionId] --context [testContextPath]`
-- Phase 4: `/workflow:tools:test-task-generate [--use-codex] [--cli-execute] --session [testSessionId]`
-
-**参数透传验证**:
-- ✅ `[sourceSessionId]` - 用户输入 → Phase 1
-- ✅ `[testSessionId]` - Phase 1 输出 → Phase 2, 3, 4
-- ✅ `[testContextPath]` - Phase 2 输出 → Phase 3
-- ✅ `--use-codex` - 用户参数 → Phase 4
-- ✅ `--cli-execute` - 用户参数 → Phase 4
-
-**状态**: ✅ 正确
-
----
-
-### 4. `/workflow:test-fix-gen` (5-Phase Orchestrator)
-
-**文件**: `.claude/commands/workflow/test-fix-gen.md`
-
-**调用的命令**:
-- Phase 1: `/workflow:session:start --new "..."`
-- Phase 2 (Session Mode): `/workflow:tools:test-context-gather --session [testSessionId]`
-- Phase 2 (Prompt Mode): `/workflow:tools:context-gather --session [testSessionId] "[task_description]"`
-- Phase 3: `/workflow:tools:test-concept-enhanced --session [testSessionId] --context [contextPath]`
-- Phase 4: `/workflow:tools:test-task-generate [--use-codex] [--cli-execute] --session [testSessionId]`
-
-**参数透传验证**:
-- ✅ `[testSessionId]` - Phase 1 输出 → Phase 2, 3, 4
-- ✅ `[task_description]` - 用户输入 → Phase 2 (Prompt Mode)
-- ✅ `[contextPath]` - Phase 2 输出 → Phase 3
-- ✅ `--use-codex` - 用户参数 → Phase 4
-- ✅ `--cli-execute` - 用户参数 → Phase 4
-
-**状态**: ✅ 正确
-
----
-
-### 5. `/workflow:ui-design:codify-style` (4-Phase Orchestrator)
-
-**文件**: `.claude/commands/workflow/ui-design/codify-style.md`
-
-**调用的命令**:
-- Phase 1: `/workflow:ui-design:import-from-code --design-id [temp_id] --source [source]`
-- Phase 2: `/workflow:ui-design:reference-page-generator --design-run [design_run_path] --package-name [package_name] --output-dir [output_dir]`
-
-**参数透传验证**:
-- ✅ `[temp_id]` - Phase 0 生成 → Phase 1
-- ✅ `[source]` - 用户参数 → Phase 1
-- ✅ `[design_run_path]` - Phase 1 输出 → Phase 2
-- ✅ `[package_name]` - 用户参数 → Phase 2
-- ✅ `[output_dir]` - 用户参数 → Phase 2
-
-**状态**: ✅ 正确
-
----
-
-### 6. `/workflow:ui-design:explore-auto` (10-Phase Orchestrator)
-
-**文件**: `.claude/commands/workflow/ui-design/explore-auto.md`
-
-**调用的命令**:
-- Phase 6: `/workflow:ui-design:import-from-code --design-id [design_id] --source [code_base_path]` (conditional)
-- Phase 7: `/workflow:ui-design:style-extract --design-id [design_id] [--images "..."] [--prompt "..."] --variants [style_variants] --interactive`
-- Phase 8: `/workflow:ui-design:animation-extract --design-id [design_id] [--images "..."] [--prompt "..."] --interactive` (conditional)
-- Phase 9: `/workflow:ui-design:layout-extract --design-id [design_id] [--images "..."] [--prompt "..."] --targets [targets_string] --variants [layout_variants] --device-type [device_type] --interactive`
-- Phase 10: `/workflow:ui-design:generate --design-id [design_id] [--session ...]`
-
-**参数透传验证**:
-- ✅ `[design_id]` - Phase 4 生成 → Phase 6, 7, 8, 9, 10
-- ✅ `[code_base_path]` - Phase 1 检测 → Phase 6
-- ✅ `[images_input]` - 用户参数 → Phase 7, 8, 9
-- ✅ `[prompt_text]` - 用户参数 → Phase 7, 8, 9
-- ✅ `[style_variants]` - Phase 2 解析 → Phase 7
-- ✅ `[layout_variants]` - Phase 2 解析 → Phase 9
-- ✅ `[targets_string]` - Phase 5 确认 → Phase 9
-- ✅ `[device_type]` - Phase 3 推断 → Phase 9
-- ✅ `[session_id]` - 用户参数 → Phase 10 (optional)
-
-**状态**: ✅ 正确
-
----
-
-### 7. `/workflow:ui-design:imitate-auto` (5-Phase Orchestrator)
-
-**文件**: `.claude/commands/workflow/ui-design/imitate-auto.md`
-
-**调用的命令**:
-- Phase 0.5: `/workflow:ui-design:import-from-code --design-id [design_id] --source [code_base_path]` (conditional)
-- Phase 2: `/workflow:ui-design:style-extract --design-id [design_id] [--images "..."] [--prompt "..."] --variants 1 --refine --interactive`
-- Phase 2.3: `/workflow:ui-design:animation-extract --design-id [design_id] [--images "..."] [--prompt "..."] --refine --interactive`
-- Phase 2.5: `/workflow:ui-design:layout-extract --design-id [design_id] [--images "..."] [--prompt "..."] --targets "home" --variants 1 --refine --interactive`
-- Phase 3: `/workflow:ui-design:generate --design-id [design_id]`
-- Phase 4: `/workflow:ui-design:update --session [session_id]` (conditional)
-
-**参数透传验证**:
-- ✅ `[design_id]` - Phase 0 生成 → 所有阶段
-- ✅ `[code_base_path]` - Phase 0 检测 → Phase 0.5
-- ✅ `[images_input]` - 用户参数 → Phase 2, 2.3, 2.5
-- ✅ `[prompt_text]` - 用户参数 → Phase 2, 2.3, 2.5
-- ✅ `[session_id]` - 用户参数 → Phase 4 (optional)
-
-**状态**: ✅ 正确
-
----
-
-### 8. `/workflow:tdd-plan` (6-Phase Orchestrator)
-
-**文件**: `.claude/commands/workflow/tdd-plan.md`
-
-**调用的命令**:
-- Phase 1: `/workflow:session:start --auto "TDD: [structured-description]"`
-- Phase 2: `/workflow:tools:context-gather --session [sessionId] "TDD: [structured-description]"`
-- Phase 3: `/workflow:tools:test-context-gather --session [sessionId]`
-- Phase 4: `/workflow:tools:conflict-resolution --session [sessionId] --context [contextPath]` (conditional)
-- Phase 5 (Agent Mode): `/workflow:tools:task-generate-tdd --session [sessionId]`
-- Phase 5 (CLI Mode): `/workflow:tools:task-generate-tdd --session [sessionId] --cli-execute`
-
-**参数透传验证**:
-- ✅ `[structured-description]` - 用户输入处理 → Phase 1, 2
-- ✅ `[sessionId]` - Phase 1 输出 → Phase 2, 3, 4, 5
-- ✅ `[contextPath]` - Phase 2 输出 → Phase 4
-- ✅ `--cli-execute` - 用户参数 → Phase 5
-
-**状态**: ✅ 正确
-
----
-
-### 9. `/memory:workflow-skill-memory` (Agent-Based Orchestrator)
-
-**文件**: `.claude/commands/memory/workflow-skill-memory.md`
-
-**调用的命令**:
-- 主要使用 Task 工具调用 universal-executor agents
-- Integration 部分: 被 `/workflow:session:complete` 调用
-  - `SlashCommand(command="/memory:workflow-skill-memory session {session_id}")`
-
-**参数透传验证**:
-- ✅ `{session_id}` - 正确透传给 workflow-skill-memory
-
-**状态**: ✅ 正确
-
----
-
-### 10. `/workflow:lite-plan` (5-Phase Orchestrator)
-
-**文件**: `.claude/commands/workflow/lite-plan.md`
-
-**调用的命令**:
-- Phase 5: `/workflow:lite-execute --in-memory`
-
-**参数透传验证**:
-- ✅ `--in-memory` - 固定参数，通过 executionContext 内存变量传递完整上下文
-
-**状态**: ✅ 正确
-
----
-
-### 11. `/workflow:session:start` (Initialization Orchestrator)
-
-**文件**: `.claude/commands/workflow/session/start.md`
-
-**调用的命令**:
-- Step 0 (首次初始化): `/workflow:init`
-
-**参数透传验证**:
-- ✅ `/workflow:init` 无需参数，用于项目级别初始化
-
-**状态**: ✅ 正确
-
----
-
-## 检查方法
-
-1. **搜索范围**: 搜索所有包含 `SlashCommand` 调用的命令文件
-2. **验证标准**:
-   - 用户输入参数是否正确传递给子命令
-   - 阶段间输出是否正确传递给下一阶段
-   - 可选参数是否按条件正确透传
-   - 参数格式是否匹配子命令要求
-3. **关注要点**:
-   - 参数变量名是否一致
-   - 可选参数 (如 `--cli-execute`) 是否正确传递
-   - 条件参数 (如 `--session`) 是否按逻辑透传
-   - 阶段输出路径是否正确传递
-
----
-
-## 结论
-
-✅ **所有编排器命令参数透传正确**
-
-检查了 11 个编排器命令，涵盖:
-- Workflow planning orchestrators (plan, tdd-plan, lite-plan)
-- Test generation orchestrators (test-gen, test-fix-gen)
-- UI design orchestrators (explore-auto, imitate-auto, codify-style)
-- Memory management orchestrators (skill-memory, workflow-skill-memory)
-- Session management orchestrators (session:start)
-
-所有命令的参数透传逻辑符合设计规范，未发现错误或遗漏。
-
----
-
-## 建议
-
-虽然当前所有编排器参数透传正确，但为了保持代码质量，建议:
-
-1. **添加参数验证**: 在每个 phase 开始前验证必需参数是否存在
-2. **统一错误处理**: 规范参数缺失或格式错误时的错误信息
-3. **文档完善**: 为每个编排器添加参数流图，清晰展示参数在各 phase 间的传递
-4. **自动化测试**: 考虑为关键编排器添加参数透传的单元测试
-
----
-
-**检查人员**: Claude (Sonnet 4.5)
-**检查完成时间**: 2025-11-20