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