From 6fe31cc4081c1b7cbccec469e0c839430f7d678b Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 20 Nov 2025 11:25:21 +0000 Subject: [PATCH 1/2] docs: fix UI workflow documentation - remove outdated URL support The /workflow:ui-design:imitate-auto command no longer supports URL input. Updated all documentation to reflect that it now only accepts: - Local image files (glob patterns) - Local code files/directories - Text prompts Changes: - COMMAND_SPEC.md: Updated syntax and examples - WORKFLOW_DECISION_GUIDE.md/.._EN.md: Replaced URL examples with local file examples - EXAMPLES.md: Updated design system creation example - GETTING_STARTED.md/.._CN.md: Fixed command descriptions - ui-design-workflow-guide.md: Updated multiple sections and examples Note: layout-extract still supports --urls parameter (not changed) --- .../guides/ui-design-workflow-guide.md | 36 ++++++++++--------- COMMAND_SPEC.md | 13 +++++-- EXAMPLES.md | 7 ++-- GETTING_STARTED.md | 2 +- GETTING_STARTED_CN.md | 2 +- WORKFLOW_DECISION_GUIDE.md | 10 +++--- WORKFLOW_DECISION_GUIDE_EN.md | 10 +++--- 7 files changed, 49 insertions(+), 31 deletions(-) diff --git a/.claude/skills/command-guide/guides/ui-design-workflow-guide.md b/.claude/skills/command-guide/guides/ui-design-workflow-guide.md index cc86877d..773b9e57 100644 --- a/.claude/skills/command-guide/guides/ui-design-workflow-guide.md +++ b/.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" diff --git a/COMMAND_SPEC.md b/COMMAND_SPEC.md index 24e28a73..d4ac3273 100644 --- a/COMMAND_SPEC.md +++ b/COMMAND_SPEC.md @@ -405,12 +405,19 @@ 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 "" [--capture-mode ] ...` -- **Responsibilities**: High-speed, multi-page UI replication workflow that captures screenshots and orchestrates the full design pipeline. +- **Syntax**: `/workflow:ui-design:imitate-auto --input "" [--session ]` +- **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" + + # Code import + /workflow:ui-design:imitate-auto --input "./src/components" + + # Text prompt + /workflow:ui-design:imitate-auto --input "Modern minimalist design" ``` ### **/workflow:ui-design:capture** diff --git a/EXAMPLES.md b/EXAMPLES.md index bef481e4..7d0817e1 100644 --- a/EXAMPLES.md +++ b/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 diff --git a/GETTING_STARTED.md b/GETTING_STARTED.md index f0d1a830..f3bcc68f 100644 --- a/GETTING_STARTED.md +++ b/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 diff --git a/GETTING_STARTED_CN.md b/GETTING_STARTED_CN.md index 01dba8cc..d7670188 100644 --- a/GETTING_STARTED_CN.md +++ b/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 diff --git a/WORKFLOW_DECISION_GUIDE.md b/WORKFLOW_DECISION_GUIDE.md index a42224af..7e061ff7 100644 --- a/WORKFLOW_DECISION_GUIDE.md +++ b/WORKFLOW_DECISION_GUIDE.md @@ -26,7 +26,7 @@ flowchart TD Q3 -->|不需要| Q4{任务复杂度?} UIDesign --> Q3a{有参考设计吗?} - Q3a -->|有| UIImitate[/ /workflow:ui-design:imitate-auto
--input 参考URL /] + Q3a -->|有| UIImitate[/ /workflow:ui-design:imitate-auto
--input 本地文件/图片 /] Q3a -->|无| UIExplore[/ /workflow:ui-design:explore-auto
--prompt 设计描述 /] UIImitate --> UISync[/ /workflow:ui-design:design-sync
同步设计系统 /] @@ -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 diff --git a/WORKFLOW_DECISION_GUIDE_EN.md b/WORKFLOW_DECISION_GUIDE_EN.md index 91772f06..45a5054c 100644 --- a/WORKFLOW_DECISION_GUIDE_EN.md +++ b/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
--input reference URL /] + Q3a -->|Yes| UIImitate[/ /workflow:ui-design:imitate-auto
--input local files/images /] Q3a -->|No| UIExplore[/ /workflow:ui-design:explore-auto
--prompt design description /] UIImitate --> UISync[/ /workflow:ui-design:design-sync
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 From 229a9867e68d33a0ae1cc530179220f694d9f965 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 20 Nov 2025 11:35:00 +0000 Subject: [PATCH 2/2] 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. --- .../workflow/ui-design/layout-extract.md | 139 +----------------- .../workflow/ui-design/style-extract.md | 108 ++------------ COMMAND_SPEC.md | 26 +--- 3 files changed, 19 insertions(+), 254 deletions(-) diff --git a/.claude/commands/workflow/ui-design/layout-extract.md b/.claude/commands/workflow/ui-design/layout-extract.md index 4cc5eefa..143043ae 100644 --- 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 ] [--session ] [--images ""] [--urls ""] [--prompt ""] [--targets ""] [--variants ] [--device-type ] [--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 ] [--session ] [--images ""] [--prompt ""] [--targets ""] [--variants ] [--device-type ] [--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 diff --git a/.claude/commands/workflow/ui-design/style-extract.md b/.claude/commands/workflow/ui-design/style-extract.md index 73599282..6f4c0c6e 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 analysis with variant generation or refinement mode -argument-hint: "[--design-id ] [--session ] [--images ""] [--urls ""] [--prompt ""] [--variants ] [--interactive] [--refine]" -allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), AskUserQuestion(*), mcp__chrome-devtools__navigate_page(*), mcp__chrome-devtools__evaluate_script(*) +argument-hint: "[--design-id ] [--session ] [--images ""] [--prompt ""] [--variants ] [--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 diff --git a/COMMAND_SPEC.md b/COMMAND_SPEC.md index d4ac3273..50b81eab 100644 --- a/COMMAND_SPEC.md +++ b/COMMAND_SPEC.md @@ -420,26 +420,8 @@ Specialized workflow for UI/UX design, from style extraction to prototype genera /workflow:ui-design:imitate-auto --input "Modern minimalist design" ``` -### **/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" - ``` - -### **/workflow:ui-design:explore-layers** -- **Syntax**: `/workflow:ui-design:explore-layers --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 - ``` - ### **/workflow:ui-design:style-extract** -- **Syntax**: `/workflow:ui-design:style-extract [--images "..."] [--prompt "..."] ...` +- **Syntax**: `/workflow:ui-design:style-extract [--images ""] [--prompt ""] [--variants ] ...` - **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**: @@ -448,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 ""] [--prompt ""] [--targets ""] ...` +- **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**