mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-12 02:37:45 +08:00
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)
This commit is contained in:
@@ -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.
|
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: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)
|
### 2. Core Extractors (Specialized Analysis)
|
||||||
|
|
||||||
@@ -98,31 +98,35 @@ Tools for combining components and integrating results.
|
|||||||
|
|
||||||
### Workflow B: Design Replication (Imitation)
|
### 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`
|
**Primary Command:** `imitate-auto`
|
||||||
|
|
||||||
**Steps:**
|
**Steps:**
|
||||||
|
|
||||||
1. **Initiate**: User runs `/workflow:ui-design:imitate-auto --url-map "home:https://example.com, pricing:https://example.com/pricing"`
|
1. **Initiate**: User runs `/workflow:ui-design:imitate-auto --input "design-refs/*.png"` with local reference files
|
||||||
2. **Capture**: System screenshots all provided URLs.
|
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 primary URL.
|
3. **Extraction**: System extracts a unified design system (style, layout, animation) from the references.
|
||||||
4. **Assembly**: System recreates all target pages using the extracted system.
|
4. **Assembly**: System creates prototypes using the extracted system.
|
||||||
|
|
||||||
**Example:**
|
**Example:**
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
|
# Using reference images
|
||||||
/workflow:ui-design:imitate-auto \
|
/workflow:ui-design:imitate-auto \
|
||||||
--url-map "landing:https://stripe.com, pricing:https://stripe.com/pricing, docs:https://stripe.com/docs" \
|
--input "design-refs/*.png" \
|
||||||
--capture-mode batch \
|
--session WFS-002
|
||||||
|
|
||||||
|
# Or importing from existing code
|
||||||
|
/workflow:ui-design:imitate-auto \
|
||||||
|
--input "./src/components" \
|
||||||
--session WFS-002
|
--session WFS-002
|
||||||
```
|
```
|
||||||
|
|
||||||
**Output:**
|
**Output:**
|
||||||
- Screenshots of all URLs
|
|
||||||
- `design-tokens.json` (unified style system)
|
- `design-tokens.json` (unified style system)
|
||||||
- `layout-templates.json` (page structures)
|
- `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")
|
- Specify the *targets* (e.g., "dashboard, settings page")
|
||||||
- Include functional requirements (e.g., "responsive, mobile-first")
|
- Include functional requirements (e.g., "responsive, mobile-first")
|
||||||
|
|
||||||
**For URL Mapping:**
|
**For Local References:**
|
||||||
- First URL is treated as primary source of truth
|
- Use high-quality reference images (PNG, JPG)
|
||||||
- Use descriptive keys in `--url-map`
|
- Organize files in accessible directories
|
||||||
- Ensure URLs are accessible (no authentication walls)
|
- 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**
|
**Example: Imitation + Custom Extraction**
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# 1. Replicate existing design
|
# 1. Import design from local references
|
||||||
/workflow:ui-design:imitate-auto --url-map "ref:https://example.com"
|
/workflow:ui-design:imitate-auto --input "design-refs/*.png"
|
||||||
|
|
||||||
# 2. Extract additional layouts and generate prototypes
|
# 2. Extract additional layouts and generate prototypes
|
||||||
/workflow:ui-design:layout-extract --targets "new-page-1,new-page-2"
|
/workflow:ui-design:layout-extract --targets "new-page-1,new-page-2"
|
||||||
|
|||||||
@@ -405,12 +405,19 @@ Specialized workflow for UI/UX design, from style extraction to prototype genera
|
|||||||
```
|
```
|
||||||
|
|
||||||
### **/workflow:ui-design:imitate-auto**
|
### **/workflow:ui-design:imitate-auto**
|
||||||
- **Syntax**: `/workflow:ui-design:imitate-auto --url-map "<map>" [--capture-mode <batch|deep>] ...`
|
- **Syntax**: `/workflow:ui-design:imitate-auto --input "<value>" [--session <id>]`
|
||||||
- **Responsibilities**: High-speed, multi-page UI replication workflow that captures screenshots and orchestrates the full design pipeline.
|
- **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`.
|
- **Agent Calls**: `@ui-design-agent`.
|
||||||
- **Example**:
|
- **Example**:
|
||||||
```bash
|
```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**
|
### **/workflow:ui-design:capture**
|
||||||
|
|||||||
@@ -434,8 +434,11 @@ services/
|
|||||||
**Objective**: Create a complete design system for a SaaS application
|
**Objective**: Create a complete design system for a SaaS application
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# Extract design from reference
|
# Extract design from local reference images
|
||||||
/workflow:ui-design:imitate-auto --input "https://example-saas.com"
|
/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
|
# 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
|
/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
|
||||||
|
|||||||
@@ -408,7 +408,7 @@ CCW includes a powerful, multi-phase workflow for UI design and prototyping, cap
|
|||||||
### Key Commands
|
### Key Commands
|
||||||
|
|
||||||
- `/workflow:ui-design:explore-auto`: An exploratory workflow that generates multiple, distinct design variations based on a prompt.
|
- `/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
|
### Example: Generating a UI from a Prompt
|
||||||
|
|
||||||
|
|||||||
@@ -408,7 +408,7 @@ CCW 包含强大的多阶段 UI 设计和原型制作工作流,能够从简单
|
|||||||
### 核心命令
|
### 核心命令
|
||||||
|
|
||||||
- `/workflow:ui-design:explore-auto`: 探索性工作流,基于提示词生成多种不同的设计变体。
|
- `/workflow:ui-design:explore-auto`: 探索性工作流,基于提示词生成多种不同的设计变体。
|
||||||
- `/workflow:ui-design:imitate-auto`: 复制工作流,从参考 URL 创建高保真原型。
|
- `/workflow:ui-design:imitate-auto`: 设计工作流,从本地参考文件(图片、代码)或文本提示创建原型。
|
||||||
|
|
||||||
### 示例:从提示词生成 UI
|
### 示例:从提示词生成 UI
|
||||||
|
|
||||||
|
|||||||
@@ -26,7 +26,7 @@ flowchart TD
|
|||||||
Q3 -->|不需要| Q4{任务复杂度?}
|
Q3 -->|不需要| Q4{任务复杂度?}
|
||||||
|
|
||||||
UIDesign --> Q3a{有参考设计吗?}
|
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 设计描述 /]
|
Q3a -->|无| UIExplore[/ /workflow:ui-design:explore-auto<br>--prompt 设计描述 /]
|
||||||
|
|
||||||
UIImitate --> UISync[/ /workflow:ui-design:design-sync<br>同步设计系统 /]
|
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 "描述"` | 生成多个设计变体 |
|
| 🎨 从零设计 | `/workflow:ui-design:explore-auto --prompt "描述"` | 生成多个设计变体 |
|
||||||
| ⏭️ 后端/无UI | 跳过 | 纯后端API、CLI工具等 |
|
| ⏭️ 后端/无UI | 跳过 | 纯后端API、CLI工具等 |
|
||||||
|
|
||||||
**示例**:
|
**示例**:
|
||||||
```bash
|
```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:ui-design:explore-auto --prompt "现代简洁的文档协作编辑界面" --style-variants 3
|
||||||
|
|||||||
@@ -26,7 +26,7 @@ flowchart TD
|
|||||||
Q3 -->|No| Q4{Task complexity?}
|
Q3 -->|No| Q4{Task complexity?}
|
||||||
|
|
||||||
UIDesign --> Q3a{Have reference design?}
|
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 /]
|
Q3a -->|No| UIExplore[/ /workflow:ui-design:explore-auto<br>--prompt design description /]
|
||||||
|
|
||||||
UIImitate --> UISync[/ /workflow:ui-design:design-sync<br>Sync design system /]
|
UIImitate --> UISync[/ /workflow:ui-design:design-sync<br>Sync design system /]
|
||||||
@@ -158,14 +158,16 @@ flowchart TD
|
|||||||
|
|
||||||
| Situation | Command | Description |
|
| 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 |
|
| 🎨 Design from scratch | `/workflow:ui-design:explore-auto --prompt "description"` | Generate multiple design variants |
|
||||||
| ⏭️ Backend/No UI | Skip | Pure backend API, CLI tools, etc. |
|
| ⏭️ Backend/No UI | Skip | Pure backend API, CLI tools, etc. |
|
||||||
|
|
||||||
**Examples**:
|
**Examples**:
|
||||||
```bash
|
```bash
|
||||||
# Have reference: Imitate Google Docs collaboration interface
|
# Have reference: Use local screenshots or code files
|
||||||
/workflow:ui-design:imitate-auto --input "https://docs.google.com"
|
/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
|
# No reference: Design from scratch
|
||||||
/workflow:ui-design:explore-auto --prompt "Modern minimalist document collaboration editing interface" --style-variants 3
|
/workflow:ui-design:explore-auto --prompt "Modern minimalist document collaboration editing interface" --style-variants 3
|
||||||
|
|||||||
Reference in New Issue
Block a user