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)
2026-02-05 01:50:27 +08:00 · 2025-11-20 11:25:21 +00:00
parent 196951ff4f
commit 6fe31cc408
7 changed files with 49 additions and 31 deletions
--- 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"
--- 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 "<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"
+
+  # 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**
--- 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
--- 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

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

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