mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-13 02:41:50 +08:00
Release v4.4.0: UI Design Workflow V3 - Layout/Style Separation Architecture
## Breaking Changes - **Command Renamed**: `extract` → `style-extract` - **New Required Phase**: `layout-extract` now mandatory before `generate` - **Workflow Changed**: Old flow (extract → consolidate → generate) → New flow (style-extract → consolidate → layout-extract → generate) ## Added **New Command: layout-extract** - Extract structural layout separate from visual style - Agent-powered with ui-design-agent - Dual-mode: imitate (high-fidelity) / explore (multiple variants) - Device-aware: desktop, mobile, tablet, responsive - MCP-integrated layout pattern research (explore mode) - Output: layout-templates.json with DOM structure + CSS layout rules **Enhanced Architecture** - Layout/Style Separation: Clear responsibility boundaries - Pure Assembler: generate command combines pre-extracted components - Device-Aware Layouts: Optimized structures for different devices - Token-Based CSS: var() placeholders for spacing/breakpoints ## Changed **style-extract (Renamed from extract)** - File renamed: extract.md → style-extract.md - Scope clarified: Visual style only (colors, typography, spacing) - No functionality change, all features preserved **generate (Refactored to Pure Assembler)** - Before: Agent designed layout + applied style - After: Pure assembly - combines layout-templates.json + design-tokens.json - No design logic: All decisions made in previous phases - Simplified agent instructions: Focus on assembly only **Workflow Commands Updated** - imitate-auto: Added Phase 2.5 (layout extraction) - explore-auto: Added Phase 2.5 (layout extraction) - Both workflows now include layout-extract step ## Removed - ❌ V2 Commands: generate-v2, explore-auto-v2 (merged into main commands) - ❌ Old extract command (renamed to style-extract) - ❌ ui-generate-preview-v2.sh (merged into ui-generate-preview.sh) ## Files Changed - Renamed: extract.md → style-extract.md - Added: layout-extract.md (370+ lines) - Modified: generate.md, imitate-auto.md, explore-auto.md, consolidate.md - Removed: 2 deprecated v2 command files - Updated: CHANGELOG.md, README.md ## Benefits - ✅ Single Responsibility: Each phase has one clear job - ✅ Better Layout Variety: Explore mode generates structurally distinct layouts - ✅ Reusability: Layout templates work with any style - ✅ Clarity: All structural decisions visible in layout-templates.json - ✅ Testability: Layout structure and visual style tested independently 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
catlog22
@@ -13,7 +13,7 @@ allowed-tools: TodoWrite(*), Read(*), Write(*), Bash(*), Task(*)
|
|||||||
# Design System Consolidation Command
|
# Design System Consolidation Command
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
Consolidate style variants into independent production-ready design systems. Refines raw token proposals from `extract` into finalized design tokens and style guides.
|
Consolidate style variants into independent production-ready design systems. Refines raw token proposals from `style-extract` into finalized design tokens and style guides.
|
||||||
|
|
||||||
**Strategy**: Philosophy-Driven Refinement
|
**Strategy**: Philosophy-Driven Refinement
|
||||||
- **Agent-Driven**: Uses ui-design-agent for N variant generation
|
- **Agent-Driven**: Uses ui-design-agent for N variant generation
|
||||||
@@ -246,7 +246,7 @@ bash(ls -lh {base_path}/style-consolidation/style-1/)
|
|||||||
### Common Errors
|
### Common Errors
|
||||||
```
|
```
|
||||||
ERROR: No style cards found
|
ERROR: No style cards found
|
||||||
→ Run /workflow:ui-design:extract first
|
→ Run /workflow:ui-design:style-extract first
|
||||||
|
|
||||||
ERROR: Invalid variant count
|
ERROR: Invalid variant count
|
||||||
→ List available count, auto-select all
|
→ List available count, auto-select all
|
||||||
@@ -265,6 +265,8 @@ ERROR: Agent file creation failed
|
|||||||
|
|
||||||
## Integration
|
## Integration
|
||||||
|
|
||||||
**Input**: `style-cards.json` from `/workflow:ui-design:extract`
|
**Input**: `style-cards.json` from `/workflow:ui-design:style-extract`
|
||||||
**Output**: `style-consolidation/style-{N}/` for each variant
|
**Output**: `style-consolidation/style-{N}/` for each variant
|
||||||
**Next**: `/workflow:ui-design:generate --style-variants N --targets "..."`
|
**Next**: `/workflow:ui-design:generate --style-variants N`
|
||||||
|
|
||||||
|
**Note**: After consolidate, use `/workflow:ui-design:layout-extract` to generate layout templates before running generate.
|
||||||
|
|||||||
@@ -27,9 +27,10 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
|
|||||||
2. Phase 0c: Target confirmation → User confirms → **IMMEDIATELY triggers Phase 1**
|
2. Phase 0c: Target confirmation → User confirms → **IMMEDIATELY triggers Phase 1**
|
||||||
3. Phase 1 (style-extract) → **WAIT for completion** → Auto-continues
|
3. Phase 1 (style-extract) → **WAIT for completion** → Auto-continues
|
||||||
4. Phase 2 (style-consolidate) → **WAIT for completion** → Auto-continues
|
4. Phase 2 (style-consolidate) → **WAIT for completion** → Auto-continues
|
||||||
5. **Phase 3 (ui-generate)** → **WAIT for completion** → Auto-continues
|
5. Phase 2.5 (layout-extract) → **WAIT for completion** → Auto-continues
|
||||||
6. Phase 4 (design-update) → **WAIT for completion** → Auto-continues
|
6. **Phase 3 (ui-assembly)** → **WAIT for completion** → Auto-continues
|
||||||
7. Phase 5 (batch-plan, optional) → Reports completion
|
7. Phase 4 (design-update) → **WAIT for completion** → Auto-continues
|
||||||
|
8. Phase 5 (batch-plan, optional) → Reports completion
|
||||||
|
|
||||||
**Phase Transition Mechanism**:
|
**Phase Transition Mechanism**:
|
||||||
- **Phase 0c (User Interaction)**: User confirms targets → IMMEDIATELY triggers Phase 1
|
- **Phase 0c (User Interaction)**: User confirms targets → IMMEDIATELY triggers Phase 1
|
||||||
@@ -274,7 +275,7 @@ detect_target_type(target_list):
|
|||||||
|
|
||||||
### Phase 1: Style Extraction
|
### Phase 1: Style Extraction
|
||||||
```bash
|
```bash
|
||||||
command = "/workflow:ui-design:extract --base-path \"{base_path}\" " +
|
command = "/workflow:ui-design:style-extract --base-path \"{base_path}\" " +
|
||||||
(--images ? "--images \"{images}\" " : "") +
|
(--images ? "--images \"{images}\" " : "") +
|
||||||
(--prompt ? "--prompt \"{prompt}\" " : "") +
|
(--prompt ? "--prompt \"{prompt}\" " : "") +
|
||||||
"--mode explore --variants {style_variants}"
|
"--mode explore --variants {style_variants}"
|
||||||
@@ -293,33 +294,50 @@ SlashCommand(command)
|
|||||||
|
|
||||||
# Output: {style_variants} independent design systems with tokens.css
|
# Output: {style_variants} independent design systems with tokens.css
|
||||||
# SlashCommand blocks until phase complete
|
# SlashCommand blocks until phase complete
|
||||||
|
# Upon completion, IMMEDIATELY execute Phase 2.5 (auto-continue)
|
||||||
|
```
|
||||||
|
|
||||||
|
### Phase 2.5: Layout Extraction
|
||||||
|
```bash
|
||||||
|
targets_string = ",".join(inferred_target_list)
|
||||||
|
command = "/workflow:ui-design:layout-extract --base-path \"{base_path}\" " +
|
||||||
|
(--images ? "--images \"{images}\" " : "") +
|
||||||
|
(--prompt ? "--prompt \"{prompt}\" " : "") +
|
||||||
|
"--targets \"{targets_string}\" " +
|
||||||
|
"--mode explore --variants {layout_variants} " +
|
||||||
|
"--device-type \"{device_type}\""
|
||||||
|
|
||||||
|
REPORT: "🚀 Phase 2.5: Layout Extraction (explore mode)"
|
||||||
|
REPORT: " → Targets: {targets_string}"
|
||||||
|
REPORT: " → Layout variants: {layout_variants}"
|
||||||
|
REPORT: " → Device: {device_type}"
|
||||||
|
|
||||||
|
SlashCommand(command)
|
||||||
|
|
||||||
|
# Output: layout-templates.json with {targets × layout_variants} layout structures
|
||||||
|
# SlashCommand blocks until phase complete
|
||||||
# Upon completion, IMMEDIATELY execute Phase 3 (auto-continue)
|
# Upon completion, IMMEDIATELY execute Phase 3 (auto-continue)
|
||||||
```
|
```
|
||||||
|
|
||||||
### Phase 3: Style-Centric Matrix UI Generation
|
### Phase 3: UI Assembly
|
||||||
```bash
|
```bash
|
||||||
targets_string = ",".join(inferred_target_list)
|
|
||||||
command = "/workflow:ui-design:generate --base-path \"{base_path}\" " +
|
command = "/workflow:ui-design:generate --base-path \"{base_path}\" " +
|
||||||
"--targets \"{targets_string}\" --target-type \"{target_type}\" " +
|
"--style-variants {style_variants} --layout-variants {layout_variants}"
|
||||||
"--style-variants {style_variants} --layout-variants {layout_variants} " +
|
|
||||||
"--device-type \"{device_type}\""
|
|
||||||
|
|
||||||
total = style_variants × layout_variants × len(inferred_target_list)
|
total = style_variants × layout_variants × len(inferred_target_list)
|
||||||
agent_calls = style_variants
|
|
||||||
|
|
||||||
REPORT: "🚀 Phase 3: {type_icon} {targets_string} | Matrix: {s}×{l}×{n} = {total} prototypes"
|
REPORT: "🚀 Phase 3: UI Assembly | Matrix: {s}×{l}×{n} = {total} prototypes"
|
||||||
REPORT: " → Device: {device_type}"
|
REPORT: " → Pure assembly: Combining layout templates + design tokens"
|
||||||
REPORT: " → Agent calls: {agent_calls} style-centric agents"
|
REPORT: " → Device: {device_type} (from layout templates)"
|
||||||
REPORT: " → Layout planning: {len(inferred_target_list)}×{layout_variants} target-specific layouts"
|
REPORT: " → Assembly tasks: {total} combinations"
|
||||||
REPORT: " → Style-centric generation: Each of {style_variants} agents handles {layout_variants}×{len(inferred_target_list)} combinations"
|
|
||||||
|
|
||||||
SlashCommand(command)
|
SlashCommand(command)
|
||||||
|
|
||||||
# SlashCommand blocks until phase complete
|
# SlashCommand blocks until phase complete
|
||||||
# Upon completion, IMMEDIATELY execute Phase 4 (auto-continue)
|
# Upon completion, IMMEDIATELY execute Phase 4 (auto-continue)
|
||||||
# Output:
|
# Output:
|
||||||
# - {target}-layout-{l}.json (target-specific layout plans)
|
# - {target}-style-{s}-layout-{l}.html (assembled prototypes)
|
||||||
# - {target}-style-{s}-layout-{l}.html (final prototypes with style-aware structure)
|
# - {target}-style-{s}-layout-{l}.css
|
||||||
# - compare.html (interactive matrix view)
|
# - compare.html (interactive matrix view)
|
||||||
# - PREVIEW.md (usage instructions)
|
# - PREVIEW.md (usage instructions)
|
||||||
```
|
```
|
||||||
@@ -349,7 +367,8 @@ IF --batch-plan:
|
|||||||
TodoWrite({todos: [
|
TodoWrite({todos: [
|
||||||
{"content": "Execute style extraction", "status": "in_progress", "activeForm": "Executing..."},
|
{"content": "Execute style extraction", "status": "in_progress", "activeForm": "Executing..."},
|
||||||
{"content": "Execute style consolidation", "status": "pending", "activeForm": "Executing..."},
|
{"content": "Execute style consolidation", "status": "pending", "activeForm": "Executing..."},
|
||||||
{"content": "Execute style-centric UI generation", "status": "pending", "activeForm": "Executing..."},
|
{"content": "Execute layout extraction", "status": "pending", "activeForm": "Executing..."},
|
||||||
|
{"content": "Execute UI assembly", "status": "pending", "activeForm": "Executing..."},
|
||||||
{"content": "Execute design integration", "status": "pending", "activeForm": "Executing..."}
|
{"content": "Execute design integration", "status": "pending", "activeForm": "Executing..."}
|
||||||
]})
|
]})
|
||||||
|
|
||||||
@@ -429,33 +448,34 @@ Architecture: Style-Centric Batch Generation
|
|||||||
Run ID: {run_id} | Session: {session_id or "standalone"}
|
Run ID: {run_id} | Session: {session_id or "standalone"}
|
||||||
Type: {icon} {target_type} | Device: {device_type} | Matrix: {s}×{l}×{n} = {total} prototypes
|
Type: {icon} {target_type} | Device: {device_type} | Matrix: {s}×{l}×{n} = {total} prototypes
|
||||||
|
|
||||||
Phase 1: {s} style variants with design_attributes (extract)
|
Phase 1: {s} style variants with design_attributes (style-extract)
|
||||||
Phase 2: {s} design systems with tokens.css (consolidate)
|
Phase 2: {s} design systems with tokens.css (consolidate)
|
||||||
Phase 3: Style-centric batch generation (generate)
|
Phase 2.5: {n×l} layout templates (layout-extract explore mode)
|
||||||
- Device: {device_type} layouts
|
- Device: {device_type} layouts
|
||||||
- {n}×{l} target-specific layout plans
|
- {n} targets × {l} layout variants = {n×l} structural templates
|
||||||
- {s} style-centric agents (each handled {l}×{n} combinations)
|
Phase 3: UI Assembly (generate)
|
||||||
- {s}×{l}×{n} = {total} final prototypes with style-aware structure
|
- Pure assembly: layout templates + design tokens
|
||||||
|
- {s}×{l}×{n} = {total} final prototypes
|
||||||
Phase 4: Brainstorming artifacts updated
|
Phase 4: Brainstorming artifacts updated
|
||||||
[Phase 5: {n} implementation tasks created] # if --batch-plan
|
[Phase 5: {n} implementation tasks created] # if --batch-plan
|
||||||
|
|
||||||
Agent Execution:
|
Assembly Process:
|
||||||
✅ Style-centric agents: {s} agents total
|
✅ Separation of Concerns: Layout (structure) + Style (tokens) kept separate
|
||||||
✅ Each agent handles: {l}×{n} combinations
|
✅ Layout Extraction: {n×l} reusable structural templates
|
||||||
✅ Device-optimized: {device_type} layouts
|
✅ Pure Assembly: No design decisions in generate phase
|
||||||
|
✅ Device-Optimized: Layouts designed for {device_type}
|
||||||
|
|
||||||
Design Quality:
|
Design Quality:
|
||||||
✅ Style-Aware Structure: HTML adapts to design_attributes
|
|
||||||
✅ Style Consistency: PERFECT (each style by single agent)
|
|
||||||
✅ Token-Driven Styling: 100% var() usage
|
✅ Token-Driven Styling: 100% var() usage
|
||||||
|
✅ Structural Variety: {l} distinct layouts per target
|
||||||
|
✅ Style Variety: {s} independent design systems
|
||||||
✅ Device-Optimized: Layouts designed for {device_type}
|
✅ Device-Optimized: Layouts designed for {device_type}
|
||||||
|
|
||||||
📂 {base_path}/
|
📂 {base_path}/
|
||||||
├── style-extraction/ ({s} style cards + design-space-analysis.json)
|
├── style-extraction/ ({s} style cards + design-space-analysis.json)
|
||||||
├── style-consolidation/ ({s} design systems with tokens.css)
|
├── style-consolidation/ ({s} design systems with tokens.css)
|
||||||
├── prototypes/
|
├── layout-extraction/ ({n×l} layout templates + layout-space-analysis.json)
|
||||||
│ ├── _templates/ ({n}×{l} layout JSON files)
|
├── prototypes/ ({total} assembled prototypes)
|
||||||
│ └── ... ({total} final prototypes)
|
|
||||||
└── .run-metadata.json (includes device type)
|
└── .run-metadata.json (includes device type)
|
||||||
|
|
||||||
🌐 Preview: {base_path}/prototypes/compare.html
|
🌐 Preview: {base_path}/prototypes/compare.html
|
||||||
|
|||||||
@@ -1,27 +1,29 @@
|
|||||||
---
|
---
|
||||||
name: generate
|
name: generate
|
||||||
description: Generate UI prototypes using target-style-centric batch generation
|
description: Assemble UI prototypes by combining layout templates with design tokens (pure assembler)
|
||||||
usage: /workflow:ui-design:generate [--targets "<list>"] [--target-type "page|component"] [--device-type "desktop|mobile|tablet|responsive"] [--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]
|
usage: /workflow:ui-design:generate [--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]
|
||||||
examples:
|
examples:
|
||||||
- /workflow:ui-design:generate --session WFS-auth --targets "dashboard,settings"
|
- /workflow:ui-design:generate --session WFS-auth
|
||||||
- /workflow:ui-design:generate --targets "home,pricing" --style-variants 2 --layout-variants 2
|
- /workflow:ui-design:generate --style-variants 2 --layout-variants 2
|
||||||
- /workflow:ui-design:generate --targets "app" --device-type mobile
|
- /workflow:ui-design:generate --base-path ".workflow/WFS-auth/design-run-20250109-143022"
|
||||||
- /workflow:ui-design:generate --targets "dashboard" --device-type desktop
|
|
||||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Task(ui-design-agent), Bash(*)
|
allowed-tools: TodoWrite(*), Read(*), Write(*), Task(ui-design-agent), Bash(*)
|
||||||
---
|
---
|
||||||
|
|
||||||
# Generate UI Prototypes (/workflow:ui-design:generate)
|
# Generate UI Prototypes (/workflow:ui-design:generate)
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
Generate matrix of UI prototypes (`style × layout × targets`) using **target-style-centric batch generation**. Each agent handles all layouts for one target × style combination.
|
Pure assembler that combines pre-extracted layout templates with design tokens to generate UI prototypes (`style × layout × targets`). No layout design logic - purely combines existing components.
|
||||||
|
|
||||||
**Strategy**: Target-Style-Centric
|
**Strategy**: Pure Assembly
|
||||||
- **Agent scope**: Each of `T × S` agents generates `L` layouts
|
- **Input**: `layout-templates.json` + `design-tokens.json`
|
||||||
- **Component isolation**: Complete task independence
|
- **Process**: Combine structure (DOM) with style (tokens)
|
||||||
- **Style-aware**: HTML adapts to design_attributes
|
- **Output**: Complete HTML/CSS prototypes
|
||||||
- **Self-contained CSS**: Direct token values (no var() refs)
|
- **No Design Logic**: All layout and style decisions already made
|
||||||
|
|
||||||
**Supports**: Pages (full layouts) and components (isolated elements)
|
**Prerequisite Commands**:
|
||||||
|
- `/workflow:ui-design:style-extract` → Style tokens
|
||||||
|
- `/workflow:ui-design:consolidate` → Final design tokens
|
||||||
|
- `/workflow:ui-design:layout-extract` → Layout structure
|
||||||
|
|
||||||
## Phase 1: Setup & Validation
|
## Phase 1: Setup & Validation
|
||||||
|
|
||||||
@@ -30,135 +32,90 @@ Generate matrix of UI prototypes (`style × layout × targets`) using **target-s
|
|||||||
# Determine working directory
|
# Determine working directory
|
||||||
bash(find .workflow -type d -name "design-*" | head -1) # Auto-detect
|
bash(find .workflow -type d -name "design-*" | head -1) # Auto-detect
|
||||||
|
|
||||||
# Get counts (defaults: style=auto, layout=3)
|
# Get style count
|
||||||
bash(ls {base_path}/style-consolidation/style-* -d | wc -l)
|
bash(ls {base_path}/style-consolidation/style-* -d | wc -l)
|
||||||
|
|
||||||
# Parse targets (Priority: --targets → --pages → synthesis-specification.md → default ["home"])
|
|
||||||
# Target type: "page" (default) or "component"
|
|
||||||
|
|
||||||
# Parse device type
|
|
||||||
device_type = --device-type OR "responsive" # Default: responsive
|
|
||||||
|
|
||||||
# Try to load from .run-metadata.json if exists
|
|
||||||
IF exists({base_path}/.run-metadata.json):
|
|
||||||
metadata = Read({base_path}/.run-metadata.json)
|
|
||||||
IF metadata.parameters.device_type:
|
|
||||||
device_type = metadata.parameters.device_type
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Step 2: Validate Inputs
|
### Step 2: Load Layout Templates
|
||||||
```bash
|
```bash
|
||||||
# Check design systems exist
|
# Check layout templates exist
|
||||||
|
bash(test -f {base_path}/layout-extraction/layout-templates.json && echo "exists")
|
||||||
|
|
||||||
|
# Load layout templates
|
||||||
|
Read({base_path}/layout-extraction/layout-templates.json)
|
||||||
|
# Extract: targets, layout_variants count, device_type, template structures
|
||||||
|
```
|
||||||
|
|
||||||
|
**Output**: `base_path`, `style_variants`, `layout_templates[]`, `targets[]`, `device_type`
|
||||||
|
|
||||||
|
### Step 3: Validate Design Tokens
|
||||||
|
```bash
|
||||||
|
# Check design tokens exist for all styles
|
||||||
bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "valid")
|
bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "valid")
|
||||||
|
|
||||||
# Validate target names (lowercase, alphanumeric, hyphens only)
|
# For each style variant: Load design tokens
|
||||||
# Load design-space-analysis.json (optional, for style-aware generation)
|
Read({base_path}/style-consolidation/style-{id}/design-tokens.json)
|
||||||
```
|
```
|
||||||
|
|
||||||
**Output**: `base_path`, `style_variants`, `layout_variants`, `target_list[]`, `target_type`, `design_space_analysis` (optional), `device_type`
|
**Output**: `design_tokens[]` for all style variants
|
||||||
|
|
||||||
### Step 3: Detect Token Sources
|
## Phase 2: Assembly (Agent)
|
||||||
```bash
|
|
||||||
# Priority 1: consolidated tokens (production-ready from /workflow:ui-design:consolidate)
|
|
||||||
# Priority 2: proposed tokens from style-cards.json (fast-track from /workflow:ui-design:extract)
|
|
||||||
|
|
||||||
bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "consolidated")
|
**Executor**: `Task(ui-design-agent)` × `T × S × L` tasks (can be batched)
|
||||||
# OR
|
|
||||||
bash(test -f {base_path}/style-extraction/style-cards.json && echo "proposed")
|
|
||||||
|
|
||||||
# If proposed: Create temp consolidation dir + write proposed tokens
|
### Step 1: Launch Assembly Tasks
|
||||||
bash(mkdir -p {base_path}/style-consolidation/style-{id})
|
|
||||||
Write({base_path}/style-consolidation/style-{id}/design-tokens.json, proposed_tokens)
|
|
||||||
```
|
|
||||||
|
|
||||||
**Output**: `token_sources{}`, `consolidated_count`, `proposed_count`
|
|
||||||
|
|
||||||
### Step 4: Gather Layout Inspiration
|
|
||||||
```bash
|
|
||||||
bash(mkdir -p {base_path}/prototypes/_inspirations)
|
|
||||||
|
|
||||||
# For each target: Research via MCP
|
|
||||||
# mcp__exa__web_search_exa(query="{target} {target_type} layout patterns", numResults=5)
|
|
||||||
|
|
||||||
# Write simple inspiration file
|
|
||||||
Write({base_path}/prototypes/_inspirations/{target}-layout-ideas.txt, inspiration_content)
|
|
||||||
```
|
|
||||||
|
|
||||||
**Output**: `L` inspiration text files
|
|
||||||
|
|
||||||
## Phase 2: Target-Style-Centric Generation (Agent)
|
|
||||||
|
|
||||||
**Executor**: `Task(ui-design-agent)` × `T × S` tasks in parallel
|
|
||||||
|
|
||||||
### Step 1: Launch Agent Tasks
|
|
||||||
```bash
|
```bash
|
||||||
bash(mkdir -p {base_path}/prototypes)
|
bash(mkdir -p {base_path}/prototypes)
|
||||||
```
|
```
|
||||||
|
|
||||||
For each `target × style_id`:
|
For each `target × style_id × layout_id`:
|
||||||
```javascript
|
```javascript
|
||||||
Task(ui-design-agent): `
|
Task(ui-design-agent): `
|
||||||
[TARGET_STYLE_UI_GENERATION]
|
[LAYOUT_STYLE_ASSEMBLY]
|
||||||
🎯 ONE component: {target} × Style-{style_id} ({philosophy_name})
|
🎯 Assembly task: {target} × Style-{style_id} × Layout-{layout_id}
|
||||||
Generate: {layout_variants} × 2 files (HTML + CSS per layout)
|
Combine: Pre-extracted layout structure + design tokens → Final HTML/CSS
|
||||||
|
|
||||||
TARGET: {target} | TYPE: {target_type} | STYLE: {style_id}/{style_variants}
|
TARGET: {target} | STYLE: {style_id} | LAYOUT: {layout_id}
|
||||||
BASE_PATH: {base_path}
|
BASE_PATH: {base_path}
|
||||||
DEVICE: {device_type}
|
|
||||||
${design_attributes ? "DESIGN_ATTRIBUTES: " + JSON.stringify(design_attributes) : ""}
|
|
||||||
|
|
||||||
## Reference
|
## Inputs (READ ONLY - NO DESIGN DECISIONS)
|
||||||
- Layout inspiration: Read("{base_path}/prototypes/_inspirations/{target}-layout-ideas.txt")
|
1. Layout Template:
|
||||||
- Design tokens: Read("{base_path}/style-consolidation/style-{style_id}/design-tokens.json")
|
Read("{base_path}/layout-extraction/layout-templates.json")
|
||||||
Parse ALL token values (colors, typography, spacing, borders, shadows, breakpoints)
|
Find template where: target={target} AND variant_id="layout-{layout_id}"
|
||||||
${design_attributes ? "- Adapt DOM structure to: density, visual_weight, formality, organic_vs_geometric" : ""}
|
Extract: dom_structure, css_layout_rules, device_type
|
||||||
|
|
||||||
## Generation
|
2. Design Tokens:
|
||||||
For EACH layout (1 to {layout_variants}):
|
Read("{base_path}/style-consolidation/style-{style_id}/design-tokens.json")
|
||||||
|
Extract: ALL token values (colors, typography, spacing, borders, shadows, breakpoints)
|
||||||
|
|
||||||
1. HTML: {base_path}/prototypes/{target}-style-{style_id}-layout-N.html
|
## Assembly Process
|
||||||
- Complete HTML5: <!DOCTYPE>, <head>, <body>
|
1. Build HTML: {base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html
|
||||||
- CSS ref: <link href="{target}-style-{style_id}-layout-N.css">
|
- Recursively build from template.dom_structure
|
||||||
- Semantic: <header>, <nav>, <main>, <footer>
|
- Add: <!DOCTYPE html>, <head>, <meta viewport>
|
||||||
- A11y: ARIA labels, landmarks, responsive meta
|
- CSS link: <link href="{target}-style-{style_id}-layout-{layout_id}.css">
|
||||||
- Viewport meta: <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
- Inject placeholder content (Lorem ipsum, sample data)
|
||||||
${design_attributes ? `
|
- Preserve all attributes from dom_structure
|
||||||
- DOM adaptation:
|
|
||||||
* density='spacious' → flatter hierarchy
|
|
||||||
* density='compact' → deeper nesting
|
|
||||||
* visual_weight='heavy' → extra wrappers
|
|
||||||
* visual_weight='minimal' → direct structure` : ""}
|
|
||||||
- Device-specific structure:
|
|
||||||
* mobile (375×812px): Single column, stacked sections, touch targets ≥44px
|
|
||||||
* desktop (1920×1080px): Multi-column grids, hover states, larger hit areas
|
|
||||||
* tablet (768×1024px): Hybrid layouts, flexible columns
|
|
||||||
* responsive: Breakpoint-driven adaptive layouts (mobile-first)
|
|
||||||
|
|
||||||
2. CSS: {base_path}/prototypes/{target}-style-{style_id}-layout-N.css
|
2. Build CSS: {base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.css
|
||||||
- Self-contained: Direct token VALUES (no var())
|
- Start with template.css_layout_rules
|
||||||
- Use tokens: colors, fonts, spacing, borders, shadows
|
- Replace ALL var(--*) with actual token values from design-tokens.json
|
||||||
- Device-optimized styles for {device_type}
|
Example: var(--spacing-4) → 1rem (from tokens.spacing.4)
|
||||||
${device_type === 'responsive' ? '- Responsive: Mobile-first @media(breakpoints)' : '- Fixed device: Optimize for ' + device_type}
|
Example: var(--breakpoint-md) → 768px (from tokens.breakpoints.md)
|
||||||
${design_attributes ? `
|
- Add visual styling using design tokens:
|
||||||
- Token selection:
|
* Colors: tokens.colors.*
|
||||||
* density → spacing scale
|
* Typography: tokens.typography.*
|
||||||
* visual_weight → shadow strength
|
* Shadows: tokens.shadows.*
|
||||||
* organic_vs_geometric → border-radius` : ""}
|
* Border radius: tokens.border_radius.*
|
||||||
- Device-specific CSS:
|
- Device-optimized for template.device_type
|
||||||
* mobile: Compact spacing, touch-friendly
|
|
||||||
* desktop: Generous whitespace, hover effects
|
|
||||||
* tablet: Medium spacing, flexible grids
|
|
||||||
* responsive: Fluid typography, breakpoints
|
|
||||||
|
|
||||||
## Notes
|
## Assembly Rules
|
||||||
- ✅ Use token VALUES directly from design-tokens.json
|
- ✅ Pure assembly: Combine existing structure + existing style
|
||||||
- ✅ Optimize for {device_type} device
|
- ❌ NO layout design decisions (structure pre-defined)
|
||||||
- ❌ NO var() references, NO external dependencies
|
- ❌ NO style design decisions (tokens pre-defined)
|
||||||
- Layouts structurally DISTINCT (different grids/regions)
|
- ✅ Replace var() with actual values
|
||||||
- Write files IMMEDIATELY (per layout, no accumulation)
|
- ✅ Add placeholder content only
|
||||||
|
- Write files IMMEDIATELY
|
||||||
- CSS filename MUST match HTML <link href="...">
|
- CSS filename MUST match HTML <link href="...">
|
||||||
- No text output, write to filesystem only
|
|
||||||
- Device-first approach: Design specifically for {device_type} user experience
|
|
||||||
`
|
`
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -199,8 +156,8 @@ bash(ls {base_path}/prototypes/compare.html {base_path}/prototypes/index.html {b
|
|||||||
```javascript
|
```javascript
|
||||||
TodoWrite({todos: [
|
TodoWrite({todos: [
|
||||||
{content: "Setup and validation", status: "completed", activeForm: "Loading design systems"},
|
{content: "Setup and validation", status: "completed", activeForm: "Loading design systems"},
|
||||||
{content: "Gather layout inspiration", status: "completed", activeForm: "Researching layouts"},
|
{content: "Load layout templates", status: "completed", activeForm: "Reading layout templates"},
|
||||||
{content: "Target-style generation (agent)", status: "completed", activeForm: "Generating prototypes"},
|
{content: "Assembly (agent)", status: "completed", activeForm: "Assembling prototypes"},
|
||||||
{content: "Verify files", status: "completed", activeForm: "Validating output"},
|
{content: "Verify files", status: "completed", activeForm: "Validating output"},
|
||||||
{content: "Generate previews", status: "completed", activeForm: "Creating preview files"}
|
{content: "Generate previews", status: "completed", activeForm: "Creating preview files"}
|
||||||
]});
|
]});
|
||||||
@@ -208,32 +165,30 @@ TodoWrite({todos: [
|
|||||||
|
|
||||||
### Output Message
|
### Output Message
|
||||||
```
|
```
|
||||||
✅ Target-Style-Centric UI generation complete!
|
✅ UI prototype assembly complete!
|
||||||
|
|
||||||
Configuration:
|
Configuration:
|
||||||
- Style Variants: {style_variants}
|
- Style Variants: {style_variants}
|
||||||
- Layout Variants: {layout_variants} (inspiration-based)
|
- Layout Variants: {layout_variants} (from layout-templates.json)
|
||||||
- Target Type: {target_type}
|
|
||||||
- Device Type: {device_type}
|
- Device Type: {device_type}
|
||||||
- Targets: {target_list}
|
- Targets: {targets}
|
||||||
- Total Prototypes: {S × L × T}
|
- Total Prototypes: {S × L × T}
|
||||||
|
|
||||||
Agent Execution:
|
Assembly Process:
|
||||||
- Target-style agents: T×S = {T}×{S} = {T×S} agents
|
- Pure assembly: Combined pre-extracted layouts + design tokens
|
||||||
- Each agent scope: {L} layouts for one component
|
- No design decisions: All structure and style pre-defined
|
||||||
- Component isolation: Complete task independence
|
- Assembly tasks: T×S×L = {T}×{S}×{L} = {T×S×L} combinations
|
||||||
- Device-specific: All layouts optimized for {device_type}
|
|
||||||
|
|
||||||
Quality:
|
Quality:
|
||||||
- Style-aware: {design_space_analysis ? 'HTML adapts to design_attributes' : 'Standard structure'}
|
- Structure: From layout-extract (DOM, CSS layout rules)
|
||||||
- CSS: Self-contained (direct token values, no var())
|
- Style: From consolidate (design tokens)
|
||||||
- Device-optimized: {device_type} layouts
|
- CSS: Token values directly applied (var() replaced)
|
||||||
- Tokens: {consolidated_count} consolidated, {proposed_count} proposed
|
- Device-optimized: Layouts match device_type from templates
|
||||||
{IF proposed_count > 0: ' 💡 For production: /workflow:ui-design:consolidate'}
|
|
||||||
|
|
||||||
Generated Files:
|
Generated Files:
|
||||||
{base_path}/prototypes/
|
{base_path}/prototypes/
|
||||||
├── _inspirations/ ({T} text files)
|
├── _templates/
|
||||||
|
│ └── layout-templates.json (input, pre-extracted)
|
||||||
├── {target}-style-{s}-layout-{l}.html ({S×L×T} prototypes)
|
├── {target}-style-{s}-layout-{l}.html ({S×L×T} prototypes)
|
||||||
├── {target}-style-{s}-layout-{l}.css
|
├── {target}-style-{s}-layout-{l}.css
|
||||||
├── compare.html (interactive matrix)
|
├── compare.html (interactive matrix)
|
||||||
@@ -257,14 +212,13 @@ bash(find .workflow -type d -name "design-*" | head -1)
|
|||||||
|
|
||||||
# Count style variants
|
# Count style variants
|
||||||
bash(ls {base_path}/style-consolidation/style-* -d | wc -l)
|
bash(ls {base_path}/style-consolidation/style-* -d | wc -l)
|
||||||
|
|
||||||
# Check token sources
|
|
||||||
bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "consolidated")
|
|
||||||
bash(test -f {base_path}/style-extraction/style-cards.json && echo "proposed")
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Validation Commands
|
### Validation Commands
|
||||||
```bash
|
```bash
|
||||||
|
# Check layout templates exist
|
||||||
|
bash(test -f {base_path}/layout-extraction/layout-templates.json && echo "exists")
|
||||||
|
|
||||||
# Check design tokens exist
|
# Check design tokens exist
|
||||||
bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "valid")
|
bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "valid")
|
||||||
|
|
||||||
@@ -278,7 +232,7 @@ bash(test -f {base_path}/prototypes/compare.html && echo "exists")
|
|||||||
### File Operations
|
### File Operations
|
||||||
```bash
|
```bash
|
||||||
# Create directories
|
# Create directories
|
||||||
bash(mkdir -p {base_path}/prototypes/_inspirations)
|
bash(mkdir -p {base_path}/prototypes)
|
||||||
|
|
||||||
# Run preview script
|
# Run preview script
|
||||||
bash(~/.claude/scripts/ui-generate-preview.sh "{base_path}/prototypes")
|
bash(~/.claude/scripts/ui-generate-preview.sh "{base_path}/prototypes")
|
||||||
@@ -288,63 +242,68 @@ bash(~/.claude/scripts/ui-generate-preview.sh "{base_path}/prototypes")
|
|||||||
|
|
||||||
```
|
```
|
||||||
{base_path}/
|
{base_path}/
|
||||||
├── prototypes/
|
├── layout-extraction/
|
||||||
│ ├── _inspirations/
|
│ └── layout-templates.json # Input (from layout-extract)
|
||||||
│ │ └── {target}-layout-ideas.txt # Layout inspiration
|
├── style-consolidation/
|
||||||
│ ├── {target}-style-{s}-layout-{l}.html # Final prototypes
|
│ └── style-{s}/
|
||||||
│ ├── {target}-style-{s}-layout-{l}.css
|
│ ├── design-tokens.json # Input (from consolidate)
|
||||||
│ ├── compare.html
|
│ └── style-guide.md
|
||||||
│ ├── index.html
|
└── prototypes/
|
||||||
│ └── PREVIEW.md
|
├── {target}-style-{s}-layout-{l}.html # Assembled prototypes
|
||||||
└── style-consolidation/
|
├── {target}-style-{s}-layout-{l}.css
|
||||||
└── style-{s}/
|
├── compare.html
|
||||||
├── design-tokens.json
|
├── index.html
|
||||||
└── style-guide.md
|
└── PREVIEW.md
|
||||||
```
|
```
|
||||||
|
|
||||||
## Error Handling
|
## Error Handling
|
||||||
|
|
||||||
### Common Errors
|
### Common Errors
|
||||||
```
|
```
|
||||||
ERROR: No token sources found
|
ERROR: Layout templates not found
|
||||||
→ Run /workflow:ui-design:extract or /workflow:ui-design:consolidate
|
→ Run /workflow:ui-design:layout-extract first
|
||||||
|
|
||||||
ERROR: MCP search failed
|
ERROR: Design tokens not found
|
||||||
→ Check network, retry
|
→ Run /workflow:ui-design:consolidate first
|
||||||
|
|
||||||
ERROR: Agent task failed
|
ERROR: Agent assembly failed
|
||||||
→ Check agent output, retry specific target×style
|
→ Check inputs exist, validate JSON structure
|
||||||
|
|
||||||
ERROR: Script permission denied
|
ERROR: Script permission denied
|
||||||
→ chmod +x ~/.claude/scripts/ui-generate-preview.sh
|
→ chmod +x ~/.claude/scripts/ui-generate-preview.sh
|
||||||
```
|
```
|
||||||
|
|
||||||
### Recovery Strategies
|
### Recovery Strategies
|
||||||
- **Partial success**: Keep successful target×style combinations
|
- **Partial success**: Keep successful assembly combinations
|
||||||
- **Missing design_attributes**: Works without (less style-aware)
|
- **Invalid template structure**: Validate layout-templates.json
|
||||||
- **Invalid tokens**: Validate design-tokens.json structure
|
- **Invalid tokens**: Validate design-tokens.json structure
|
||||||
|
|
||||||
## Quality Checklist
|
## Quality Checklist
|
||||||
|
|
||||||
- [ ] CSS uses direct token values (no var())
|
- [ ] CSS uses direct token values (var() replaced)
|
||||||
- [ ] HTML structure adapts to design_attributes (if available)
|
- [ ] HTML structure matches layout template exactly
|
||||||
- [ ] Semantic HTML5 structure
|
- [ ] Semantic HTML5 structure preserved
|
||||||
- [ ] ARIA attributes present
|
- [ ] ARIA attributes from template present
|
||||||
- [ ] Mobile-first responsive
|
- [ ] Device-specific optimizations applied
|
||||||
- [ ] Layouts structurally distinct
|
- [ ] All token references resolved
|
||||||
- [ ] compare.html works
|
- [ ] compare.html works
|
||||||
|
|
||||||
## Key Features
|
## Key Features
|
||||||
|
|
||||||
- **Target-Style-Centric**: `T×S` agents, each handles `L` layouts
|
- **Pure Assembly**: No design decisions, only combination
|
||||||
- **Component Isolation**: Complete task independence
|
- **Separation of Concerns**: Layout (structure) + Style (tokens) kept separate until final assembly
|
||||||
- **Style-Aware**: HTML adapts to design_attributes
|
- **Token Resolution**: var() placeholders replaced with actual values
|
||||||
- **Self-Contained CSS**: Direct token values (no var())
|
- **Pre-validated**: Inputs already validated by extract/consolidate
|
||||||
- **Inspiration-Based**: Simple text research vs complex JSON
|
- **Efficient**: Simple assembly vs complex generation
|
||||||
- **Production-Ready**: Semantic, accessible, responsive
|
- **Production-Ready**: Semantic, accessible, token-driven
|
||||||
|
|
||||||
## Integration
|
## Integration
|
||||||
|
|
||||||
**Input**: design-tokens.json, design-space-analysis.json (optional), targets
|
**Prerequisites**:
|
||||||
|
- `/workflow:ui-design:style-extract` → `style-cards.json`
|
||||||
|
- `/workflow:ui-design:consolidate` → `design-tokens.json`
|
||||||
|
- `/workflow:ui-design:layout-extract` → `layout-templates.json`
|
||||||
|
|
||||||
|
**Input**: `layout-templates.json` + `design-tokens.json`
|
||||||
**Output**: S×L×T prototypes for `/workflow:ui-design:update`
|
**Output**: S×L×T prototypes for `/workflow:ui-design:update`
|
||||||
**Called by**: `/workflow:ui-design:explore-auto`, `/workflow:ui-design:imitate-auto`
|
**Called by**: `/workflow:ui-design:explore-auto`, `/workflow:ui-design:imitate-auto`
|
||||||
|
|||||||
@@ -25,10 +25,11 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Write(*), Bash(*)
|
|||||||
1. User triggers: `/workflow:ui-design:imitate-auto --url-map "..."`
|
1. User triggers: `/workflow:ui-design:imitate-auto --url-map "..."`
|
||||||
2. Phase 0: Initialize and parse parameters
|
2. Phase 0: Initialize and parse parameters
|
||||||
3. Phase 1: Screenshot capture (batch or deep mode) → **WAIT for completion** → Auto-continues
|
3. Phase 1: Screenshot capture (batch or deep mode) → **WAIT for completion** → Auto-continues
|
||||||
4. Phase 2: Unified design system extraction → **WAIT for completion** → Auto-continues
|
4. Phase 2: Style extraction (visual tokens) → **WAIT for completion** → Auto-continues
|
||||||
5. Phase 3: Token processing (conditional consolidate) → **WAIT for completion** → Auto-continues
|
5. Phase 2.5: Layout extraction (structure templates) → **WAIT for completion** → Auto-continues
|
||||||
6. Phase 4: Batch UI generation → **WAIT for completion** → Auto-continues
|
6. Phase 3: Token processing (conditional consolidate) → **WAIT for completion** → Auto-continues
|
||||||
7. Phase 5: Design system integration → Reports completion
|
7. Phase 4: Batch UI assembly → **WAIT for completion** → Auto-continues
|
||||||
|
8. Phase 5: Design system integration → Reports completion
|
||||||
|
|
||||||
**Phase Transition Mechanism**:
|
**Phase Transition Mechanism**:
|
||||||
- `SlashCommand` is BLOCKING - execution pauses until completion
|
- `SlashCommand` is BLOCKING - execution pauses until completion
|
||||||
@@ -231,9 +232,10 @@ REPORT: ""
|
|||||||
TodoWrite({todos: [
|
TodoWrite({todos: [
|
||||||
{content: "Initialize and parse url-map", status: "completed", activeForm: "Initializing"},
|
{content: "Initialize and parse url-map", status: "completed", activeForm: "Initializing"},
|
||||||
{content: capture_mode == "batch" ? f"Batch screenshot capture ({len(target_names)} targets)" : f"Deep exploration (depth {depth})", status: "pending", activeForm: "Capturing screenshots"},
|
{content: capture_mode == "batch" ? f"Batch screenshot capture ({len(target_names)} targets)" : f"Deep exploration (depth {depth})", status: "pending", activeForm: "Capturing screenshots"},
|
||||||
{content: "Extract unified design system", status: "pending", activeForm: "Extracting style"},
|
{content: "Extract style (visual tokens)", status: "pending", activeForm: "Extracting style"},
|
||||||
|
{content: "Extract layout (structure templates)", status: "pending", activeForm: "Extracting layout"},
|
||||||
{content: refine_tokens_mode ? "Refine design tokens via consolidate" : "Fast token adaptation (skip consolidate)", status: "pending", activeForm: "Processing tokens"},
|
{content: refine_tokens_mode ? "Refine design tokens via consolidate" : "Fast token adaptation (skip consolidate)", status: "pending", activeForm: "Processing tokens"},
|
||||||
{content: f"Generate UI for {len(target_names)} targets", status: "pending", activeForm: "Generating UI"},
|
{content: f"Assemble UI for {len(target_names)} targets", status: "pending", activeForm: "Assembling UI"},
|
||||||
{content: session_id ? "Integrate design system" : "Standalone completion", status: "pending", activeForm: "Completing"}
|
{content: session_id ? "Integrate design system" : "Standalone completion", status: "pending", activeForm: "Completing"}
|
||||||
]})
|
]})
|
||||||
```
|
```
|
||||||
@@ -335,15 +337,15 @@ ELSE: # capture_mode == "deep"
|
|||||||
total_requested = captured_count # For consistency with batch mode
|
total_requested = captured_count # For consistency with batch mode
|
||||||
|
|
||||||
TodoWrite(mark_completed: f"Batch screenshot capture ({len(target_names)} targets)" IF capture_mode == "batch" ELSE f"Deep exploration (depth {depth})",
|
TodoWrite(mark_completed: f"Batch screenshot capture ({len(target_names)} targets)" IF capture_mode == "batch" ELSE f"Deep exploration (depth {depth})",
|
||||||
mark_in_progress: "Extract unified design system")
|
mark_in_progress: "Extract style (visual tokens)")
|
||||||
```
|
```
|
||||||
|
|
||||||
### Phase 2: Unified Design System Extraction
|
### Phase 2: Style Extraction (Visual Tokens)
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
REPORT: ""
|
REPORT: ""
|
||||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||||
REPORT: "🚀 Phase 2: Extract Unified Design System"
|
REPORT: "🚀 Phase 2: Extract Style (Visual Tokens)"
|
||||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||||
|
|
||||||
# Use all screenshots as input to extract single design system
|
# Use all screenshots as input to extract single design system
|
||||||
@@ -355,14 +357,14 @@ ELSE: # deep mode
|
|||||||
# Build extraction prompt
|
# Build extraction prompt
|
||||||
IF --prompt:
|
IF --prompt:
|
||||||
user_guidance = {--prompt}
|
user_guidance = {--prompt}
|
||||||
extraction_prompt = f"Extract a single, high-fidelity design system that accurately imitates the visual style from the '{primary_target}' page. Use other screenshots for component consistency. User guidance: {user_guidance}"
|
extraction_prompt = f"Extract visual style tokens (colors, typography, spacing) from the '{primary_target}' page. Use other screenshots for consistency. User guidance: {user_guidance}"
|
||||||
ELSE:
|
ELSE:
|
||||||
extraction_prompt = f"Extract a single, high-fidelity design system that accurately imitates the visual style from the '{primary_target}' page. Use other screenshots to ensure component and pattern consistency across all pages."
|
extraction_prompt = f"Extract visual style tokens (colors, typography, spacing) from the '{primary_target}' page. Use other screenshots for consistency across all pages."
|
||||||
|
|
||||||
# Call extract command (imitate mode, automatically uses single variant)
|
# Call style-extract command (imitate mode, automatically uses single variant)
|
||||||
extract_command = f"/workflow:ui-design:extract --base-path \"{base_path}\" --images \"{images_glob}\" --prompt \"{extraction_prompt}\" --mode imitate"
|
extract_command = f"/workflow:ui-design:style-extract --base-path \"{base_path}\" --images \"{images_glob}\" --prompt \"{extraction_prompt}\" --mode imitate"
|
||||||
|
|
||||||
REPORT: "Calling extract command..."
|
REPORT: "Calling style-extract command..."
|
||||||
REPORT: f" Mode: imitate (high-fidelity single style, auto variants=1)"
|
REPORT: f" Mode: imitate (high-fidelity single style, auto variants=1)"
|
||||||
REPORT: f" Primary source: '{primary_target}'"
|
REPORT: f" Primary source: '{primary_target}'"
|
||||||
REPORT: f" Images: {images_glob}"
|
REPORT: f" Images: {images_glob}"
|
||||||
@@ -371,16 +373,16 @@ TRY:
|
|||||||
SlashCommand(extract_command)
|
SlashCommand(extract_command)
|
||||||
CATCH error:
|
CATCH error:
|
||||||
ERROR: "Style extraction failed: {error}"
|
ERROR: "Style extraction failed: {error}"
|
||||||
ERROR: "Cannot proceed without design system"
|
ERROR: "Cannot proceed without visual tokens"
|
||||||
EXIT 1
|
EXIT 1
|
||||||
|
|
||||||
# extract outputs to: {base_path}/style-extraction/style-cards.json
|
# style-extract outputs to: {base_path}/style-extraction/style-cards.json
|
||||||
|
|
||||||
# Verify extraction results
|
# Verify extraction results
|
||||||
style_cards_path = "{base_path}/style-extraction/style-cards.json"
|
style_cards_path = "{base_path}/style-extraction/style-cards.json"
|
||||||
|
|
||||||
IF NOT exists(style_cards_path):
|
IF NOT exists(style_cards_path):
|
||||||
ERROR: "extract command did not generate style-cards.json"
|
ERROR: "style-extract command did not generate style-cards.json"
|
||||||
ERROR: "Expected: {style_cards_path}"
|
ERROR: "Expected: {style_cards_path}"
|
||||||
EXIT 1
|
EXIT 1
|
||||||
|
|
||||||
@@ -396,9 +398,58 @@ REPORT: ""
|
|||||||
REPORT: "✅ Phase 2 complete:"
|
REPORT: "✅ Phase 2 complete:"
|
||||||
REPORT: " Style: '{extracted_style.name}'"
|
REPORT: " Style: '{extracted_style.name}'"
|
||||||
REPORT: " Philosophy: {extracted_style.design_philosophy}"
|
REPORT: " Philosophy: {extracted_style.design_philosophy}"
|
||||||
REPORT: " Tokens: {count_tokens(extracted_style.proposed_tokens)} proposed tokens"
|
REPORT: " Tokens: {count_tokens(extracted_style.proposed_tokens)} visual tokens"
|
||||||
|
|
||||||
TodoWrite(mark_completed: "Extract unified design system",
|
TodoWrite(mark_completed: "Extract style (visual tokens)",
|
||||||
|
mark_in_progress: "Extract layout (structure templates)")
|
||||||
|
```
|
||||||
|
|
||||||
|
### Phase 2.5: Layout Extraction (Structure Templates)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
REPORT: ""
|
||||||
|
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||||
|
REPORT: "🚀 Phase 2.5: Extract Layout (Structure Templates)"
|
||||||
|
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||||
|
|
||||||
|
# Reuse same screenshots for layout extraction
|
||||||
|
# Build URL map for layout-extract (uses first URL from each target)
|
||||||
|
url_map_for_layout = ",".join([f"{target}:{url}" for target, url in url_map.items()])
|
||||||
|
|
||||||
|
# Call layout-extract command (imitate mode for structure replication)
|
||||||
|
layout_extract_command = f"/workflow:ui-design:layout-extract --base-path \"{base_path}\" --images \"{images_glob}\" --targets \"{','.join(target_names)}\" --mode imitate"
|
||||||
|
|
||||||
|
REPORT: "Calling layout-extract command..."
|
||||||
|
REPORT: f" Mode: imitate (high-fidelity structure replication)"
|
||||||
|
REPORT: f" Targets: {', '.join(target_names)}"
|
||||||
|
REPORT: f" Images: {images_glob}"
|
||||||
|
|
||||||
|
TRY:
|
||||||
|
SlashCommand(layout_extract_command)
|
||||||
|
CATCH error:
|
||||||
|
ERROR: "Layout extraction failed: {error}"
|
||||||
|
ERROR: "Cannot proceed without layout templates"
|
||||||
|
EXIT 1
|
||||||
|
|
||||||
|
# layout-extract outputs to: {base_path}/layout-extraction/layout-templates.json
|
||||||
|
|
||||||
|
# Verify layout extraction results
|
||||||
|
layout_templates_path = "{base_path}/layout-extraction/layout-templates.json"
|
||||||
|
|
||||||
|
IF NOT exists(layout_templates_path):
|
||||||
|
ERROR: "layout-extract command did not generate layout-templates.json"
|
||||||
|
ERROR: "Expected: {layout_templates_path}"
|
||||||
|
EXIT 1
|
||||||
|
|
||||||
|
layout_templates = Read(layout_templates_path)
|
||||||
|
template_count = len(layout_templates.layout_templates)
|
||||||
|
|
||||||
|
REPORT: ""
|
||||||
|
REPORT: "✅ Phase 2.5 complete:"
|
||||||
|
REPORT: " Templates: {template_count} layout structures"
|
||||||
|
REPORT: " Targets: {', '.join(target_names)}"
|
||||||
|
|
||||||
|
TodoWrite(mark_completed: "Extract layout (structure templates)",
|
||||||
mark_in_progress: refine_tokens_mode ? "Refine design tokens via consolidate" : "Fast token adaptation")
|
mark_in_progress: refine_tokens_mode ? "Refine design tokens via consolidate" : "Fast token adaptation")
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -507,53 +558,53 @@ REPORT: " Quality: {token_quality}"
|
|||||||
REPORT: " Time: {time_spent_estimate}"
|
REPORT: " Time: {time_spent_estimate}"
|
||||||
|
|
||||||
TodoWrite(mark_completed: refine_tokens_mode ? "Refine design tokens via consolidate" : "Fast token adaptation",
|
TodoWrite(mark_completed: refine_tokens_mode ? "Refine design tokens via consolidate" : "Fast token adaptation",
|
||||||
mark_in_progress: f"Generate UI for {len(target_names)} targets")
|
mark_in_progress: f"Assemble UI for {len(target_names)} targets")
|
||||||
```
|
```
|
||||||
|
|
||||||
### Phase 4: Batch UI Generation
|
### Phase 4: Batch UI Assembly
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
REPORT: ""
|
REPORT: ""
|
||||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||||
REPORT: "🚀 Phase 4: Batch UI Generation"
|
REPORT: "🚀 Phase 4: Batch UI Assembly"
|
||||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||||
|
|
||||||
# Build targets string
|
# Build targets string
|
||||||
targets_string = ",".join(target_names)
|
targets_string = ",".join(target_names)
|
||||||
|
|
||||||
# Call generate command (smart token source detection will auto-select tokens)
|
# Call generate command (now pure assembler - combines layout templates + design tokens)
|
||||||
generate_command = f"/workflow:ui-design:generate --base-path \"{base_path}\" --targets \"{targets_string}\" --target-type page --style-variants 1 --layout-variants 1"
|
generate_command = f"/workflow:ui-design:generate --base-path \"{base_path}\" --style-variants 1 --layout-variants 1"
|
||||||
|
|
||||||
REPORT: "Calling generate command..."
|
REPORT: "Calling generate command (pure assembler)..."
|
||||||
REPORT: f" Targets: {targets_string}"
|
REPORT: f" Targets: {targets_string} (from layout templates)"
|
||||||
REPORT: f" Configuration: 1 style × 1 layout × {len(target_names)} pages"
|
REPORT: f" Configuration: 1 style × 1 layout × {len(target_names)} pages"
|
||||||
REPORT: f" Token source: generate will auto-detect ({token_quality})"
|
REPORT: f" Inputs: layout-templates.json + design-tokens.json"
|
||||||
|
|
||||||
TRY:
|
TRY:
|
||||||
SlashCommand(generate_command)
|
SlashCommand(generate_command)
|
||||||
CATCH error:
|
CATCH error:
|
||||||
ERROR: "UI generation failed: {error}"
|
ERROR: "UI assembly failed: {error}"
|
||||||
ERROR: "Design tokens may be invalid"
|
ERROR: "Layout templates or design tokens may be invalid"
|
||||||
EXIT 1
|
EXIT 1
|
||||||
|
|
||||||
# generate outputs to: {base_path}/prototypes/{target}-style-1-layout-1.html
|
# generate outputs to: {base_path}/prototypes/{target}-style-1-layout-1.html
|
||||||
|
|
||||||
# Verify generation results
|
# Verify assembly results
|
||||||
prototypes_dir = "{base_path}/prototypes"
|
prototypes_dir = "{base_path}/prototypes"
|
||||||
generated_html_files = Glob(f"{prototypes_dir}/*-style-1-layout-1.html")
|
generated_html_files = Glob(f"{prototypes_dir}/*-style-1-layout-1.html")
|
||||||
generated_count = len(generated_html_files)
|
generated_count = len(generated_html_files)
|
||||||
|
|
||||||
REPORT: ""
|
REPORT: ""
|
||||||
REPORT: "✅ Phase 4 complete:"
|
REPORT: "✅ Phase 4 complete:"
|
||||||
REPORT: " Generated: {generated_count} HTML prototypes"
|
REPORT: " Assembled: {generated_count} HTML prototypes"
|
||||||
REPORT: " Targets: {', '.join(target_names)}"
|
REPORT: " Targets: {', '.join(target_names)}"
|
||||||
REPORT: " Output: {prototypes_dir}/"
|
REPORT: " Output: {prototypes_dir}/"
|
||||||
|
|
||||||
IF generated_count < len(target_names):
|
IF generated_count < len(target_names):
|
||||||
WARN: " ⚠️ Expected {len(target_names)} prototypes, generated {generated_count}"
|
WARN: " ⚠️ Expected {len(target_names)} prototypes, assembled {generated_count}"
|
||||||
WARN: " Some targets may have failed - check generate output"
|
WARN: " Some targets may have failed - check generate output"
|
||||||
|
|
||||||
TodoWrite(mark_completed: f"Generate UI for {len(target_names)} targets",
|
TodoWrite(mark_completed: f"Assemble UI for {len(target_names)} targets",
|
||||||
mark_in_progress: session_id ? "Integrate design system" : "Standalone completion")
|
mark_in_progress: session_id ? "Integrate design system" : "Standalone completion")
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
371
.claude/commands/workflow/ui-design/layout-extract.md
Normal file
371
.claude/commands/workflow/ui-design/layout-extract.md
Normal file
@@ -0,0 +1,371 @@
|
|||||||
|
---
|
||||||
|
name: layout-extract
|
||||||
|
description: Extract structural layout information from reference images, URLs, or text prompts
|
||||||
|
usage: /workflow:ui-design:layout-extract [--base-path <path>] [--session <id>] [--images "<glob>"] [--urls "<list>"] [--prompt "<desc>"] [--targets "<list>"] [--mode <imitate|explore>] [--variants <count>] [--device-type <desktop|mobile|tablet|responsive>]
|
||||||
|
examples:
|
||||||
|
- /workflow:ui-design:layout-extract --urls "home:https://linear.app" --mode imitate --targets "home"
|
||||||
|
- /workflow:ui-design:layout-extract --images "refs/*.png" --mode explore --variants 3 --targets "dashboard"
|
||||||
|
- /workflow:ui-design:layout-extract --prompt "Two-column blog with sticky sidebar" --mode explore --variants 2 --targets "blog-post"
|
||||||
|
- /workflow:ui-design:layout-extract --session WFS-auth --urls "login:https://clerk.dev" --device-type mobile --targets "login"
|
||||||
|
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), Bash(*), Task(ui-design-agent), mcp__exa__web_search_exa(*)
|
||||||
|
---
|
||||||
|
|
||||||
|
# Layout Extraction Command
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
Extract structural layout information from reference images, URLs, or text prompts using AI analysis. This command separates the "scaffolding" (HTML structure and CSS layout) from the "paint" (visual tokens handled by `style-extract`).
|
||||||
|
|
||||||
|
**Strategy**: AI-Driven Structural Analysis
|
||||||
|
- **Agent-Powered**: Uses `ui-design-agent` for deep structural analysis
|
||||||
|
- **Dual-Mode**:
|
||||||
|
- `imitate`: High-fidelity replication of single layout structure
|
||||||
|
- `explore`: Multiple structurally distinct layout variations
|
||||||
|
- **Single Output**: `layout-templates.json` with DOM structure, component hierarchy, and CSS layout rules
|
||||||
|
- **Device-Aware**: Optimized for specific device types (desktop, mobile, tablet, responsive)
|
||||||
|
- **Token-Based**: CSS uses `var()` placeholders for spacing and breakpoints
|
||||||
|
|
||||||
|
## Phase 0: Setup & Input Validation
|
||||||
|
|
||||||
|
### Step 1: Detect Input, Mode & Targets
|
||||||
|
```bash
|
||||||
|
# Detect input source
|
||||||
|
# Priority: --urls + --images → hybrid | --urls → url | --images → image | --prompt → text
|
||||||
|
|
||||||
|
# Determine extraction mode
|
||||||
|
extraction_mode = --mode OR "imitate" # "imitate" or "explore"
|
||||||
|
|
||||||
|
# Set variants count based on mode
|
||||||
|
IF extraction_mode == "imitate":
|
||||||
|
variants_count = 1 # Force single variant (ignore --variants)
|
||||||
|
ELSE IF extraction_mode == "explore":
|
||||||
|
variants_count = --variants OR 3 # Default to 3
|
||||||
|
VALIDATE: 1 <= variants_count <= 5
|
||||||
|
|
||||||
|
# Resolve targets
|
||||||
|
# Priority: --targets → prompt analysis → default ["page"]
|
||||||
|
targets = --targets OR extract_from_prompt(--prompt) OR ["page"]
|
||||||
|
|
||||||
|
# Resolve device type
|
||||||
|
device_type = --device-type OR "responsive" # desktop|mobile|tablet|responsive
|
||||||
|
|
||||||
|
# Determine base path
|
||||||
|
bash(find .workflow -type d -name "design-*" | head -1) # Auto-detect
|
||||||
|
# OR use --base-path / --session parameters
|
||||||
|
```
|
||||||
|
|
||||||
|
### Step 2: Load Inputs & Create Directories
|
||||||
|
```bash
|
||||||
|
# For image mode
|
||||||
|
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
|
||||||
|
|
||||||
|
# Create output directory
|
||||||
|
bash(mkdir -p {base_path}/layout-extraction)
|
||||||
|
```
|
||||||
|
|
||||||
|
### Step 3: Memory Check (Skip if Already Done)
|
||||||
|
```bash
|
||||||
|
# Check if layouts already extracted
|
||||||
|
bash(test -f {base_path}/layout-extraction/layout-templates.json && echo "exists")
|
||||||
|
```
|
||||||
|
|
||||||
|
**If exists**: Skip to completion message
|
||||||
|
|
||||||
|
**Output**: `input_mode`, `base_path`, `extraction_mode`, `variants_count`, `targets[]`, `device_type`, loaded inputs
|
||||||
|
|
||||||
|
## Phase 1: Layout Research (Explore Mode Only)
|
||||||
|
|
||||||
|
### Step 1: Check Extraction Mode
|
||||||
|
```bash
|
||||||
|
# extraction_mode == "imitate" → skip this phase
|
||||||
|
# extraction_mode == "explore" → execute this phase
|
||||||
|
```
|
||||||
|
|
||||||
|
**If imitate mode**: Skip to Phase 2
|
||||||
|
|
||||||
|
### Step 2: Gather Layout Inspiration (Explore Mode)
|
||||||
|
```bash
|
||||||
|
bash(mkdir -p {base_path}/layout-extraction/_inspirations)
|
||||||
|
|
||||||
|
# For each target: Research via MCP
|
||||||
|
# mcp__exa__web_search_exa(query="{target} layout patterns {device_type}", numResults=5)
|
||||||
|
|
||||||
|
# Write inspiration file
|
||||||
|
Write({base_path}/layout-extraction/_inspirations/{target}-layout-ideas.txt, inspiration_content)
|
||||||
|
```
|
||||||
|
|
||||||
|
**Output**: Inspiration text files for each target (explore mode only)
|
||||||
|
|
||||||
|
## Phase 2: Layout Analysis & Synthesis (Agent)
|
||||||
|
|
||||||
|
**Executor**: `Task(ui-design-agent)`
|
||||||
|
|
||||||
|
### Step 1: Launch Agent Task
|
||||||
|
```javascript
|
||||||
|
Task(ui-design-agent): `
|
||||||
|
[LAYOUT_EXTRACTION_TASK]
|
||||||
|
Analyze references and extract structural layout templates.
|
||||||
|
Focus ONLY on structure and layout. DO NOT concern with visual style (colors, fonts, etc.).
|
||||||
|
|
||||||
|
REFERENCES:
|
||||||
|
- Input: {reference_material} // Images, URLs, or prompt
|
||||||
|
- Mode: {extraction_mode} // 'imitate' or 'explore'
|
||||||
|
- Targets: {targets} // List of page/component names
|
||||||
|
- Variants per Target: {variants_count}
|
||||||
|
- Device Type: {device_type}
|
||||||
|
${exploration_mode ? "- Layout Inspiration: Read('" + base_path + "/layout-extraction/_inspirations/{target}-layout-ideas.txt')" : ""}
|
||||||
|
|
||||||
|
## Analysis & Generation
|
||||||
|
For EACH target in {targets}:
|
||||||
|
For EACH variant (1 to {variants_count}):
|
||||||
|
1. **Analyze Structure**: Deconstruct reference to understand layout, hierarchy, responsiveness
|
||||||
|
2. **Define Philosophy**: Short description (e.g., "Asymmetrical grid with overlapping content areas")
|
||||||
|
3. **Generate DOM Structure**: JSON object representing semantic HTML5 structure
|
||||||
|
- Semantic tags: <header>, <nav>, <main>, <aside>, <section>, <footer>
|
||||||
|
- ARIA roles and accessibility attributes
|
||||||
|
- Device-specific structure:
|
||||||
|
* mobile: Single column, stacked sections, touch targets ≥44px
|
||||||
|
* desktop: Multi-column grids, hover states, larger hit areas
|
||||||
|
* tablet: Hybrid layouts, flexible columns
|
||||||
|
* responsive: Breakpoint-driven adaptive layouts (mobile-first)
|
||||||
|
- In 'explore' mode: Each variant structurally DISTINCT
|
||||||
|
4. **Define Component Hierarchy**: High-level array of main layout regions
|
||||||
|
Example: ["header", "main-content", "sidebar", "footer"]
|
||||||
|
5. **Generate CSS Layout Rules**:
|
||||||
|
- Focus ONLY on layout (Grid, Flexbox, position, alignment, gap, etc.)
|
||||||
|
- Use CSS Custom Properties for spacing/breakpoints: var(--spacing-4), var(--breakpoint-md)
|
||||||
|
- Device-specific styles (mobile-first @media for responsive)
|
||||||
|
- NO colors, NO fonts, NO shadows - layout structure only
|
||||||
|
|
||||||
|
## Output Format
|
||||||
|
Return JSON object with layout_templates array.
|
||||||
|
Each template must include:
|
||||||
|
- target (string)
|
||||||
|
- variant_id (string, e.g., "layout-1")
|
||||||
|
- device_type (string)
|
||||||
|
- design_philosophy (string)
|
||||||
|
- dom_structure (JSON object)
|
||||||
|
- component_hierarchy (array of strings)
|
||||||
|
- css_layout_rules (string)
|
||||||
|
|
||||||
|
## Notes
|
||||||
|
- Structure only, no visual styling
|
||||||
|
- Use var() for all spacing/sizing
|
||||||
|
- Layouts must be structurally distinct in explore mode
|
||||||
|
- Write complete layout-templates.json
|
||||||
|
`
|
||||||
|
```
|
||||||
|
|
||||||
|
**Output**: Agent returns JSON with `layout_templates` array
|
||||||
|
|
||||||
|
### Step 2: Write Output File
|
||||||
|
```bash
|
||||||
|
# Take JSON output from agent
|
||||||
|
bash(echo '{agent_json_output}' > {base_path}/layout-extraction/layout-templates.json)
|
||||||
|
|
||||||
|
# Verify output
|
||||||
|
bash(test -f {base_path}/layout-extraction/layout-templates.json && echo "exists")
|
||||||
|
bash(cat {base_path}/layout-extraction/layout-templates.json | grep -q "layout_templates" && echo "valid")
|
||||||
|
```
|
||||||
|
|
||||||
|
**Output**: `layout-templates.json` created and verified
|
||||||
|
|
||||||
|
## Completion
|
||||||
|
|
||||||
|
### Todo Update
|
||||||
|
```javascript
|
||||||
|
TodoWrite({todos: [
|
||||||
|
{content: "Setup and input validation", status: "completed", activeForm: "Validating inputs"},
|
||||||
|
{content: "Layout research (explore mode)", status: "completed", activeForm: "Researching layout patterns"},
|
||||||
|
{content: "Layout analysis and synthesis (agent)", status: "completed", activeForm: "Generating layout templates"},
|
||||||
|
{content: "Write layout-templates.json", status: "completed", activeForm: "Saving templates"}
|
||||||
|
]});
|
||||||
|
```
|
||||||
|
|
||||||
|
### Output Message
|
||||||
|
```
|
||||||
|
✅ Layout extraction complete!
|
||||||
|
|
||||||
|
Configuration:
|
||||||
|
- Session: {session_id}
|
||||||
|
- Extraction Mode: {extraction_mode} (imitate/explore)
|
||||||
|
- Device Type: {device_type}
|
||||||
|
- Targets: {targets}
|
||||||
|
- Variants per Target: {variants_count}
|
||||||
|
- Total Templates: {targets.length × variants_count}
|
||||||
|
|
||||||
|
{IF extraction_mode == "explore":
|
||||||
|
Layout Research:
|
||||||
|
- {targets.length} inspiration files generated
|
||||||
|
- Pattern search focused on {device_type} layouts
|
||||||
|
}
|
||||||
|
|
||||||
|
Generated Templates:
|
||||||
|
{FOR each template: - Target: {template.target} | Variant: {template.variant_id} | Philosophy: {template.design_philosophy}}
|
||||||
|
|
||||||
|
Output File:
|
||||||
|
- {base_path}/layout-extraction/layout-templates.json
|
||||||
|
|
||||||
|
Next: /workflow:ui-design:generate will combine these structural templates with style systems to produce final prototypes.
|
||||||
|
```
|
||||||
|
|
||||||
|
## Simple Bash Commands
|
||||||
|
|
||||||
|
### Path Operations
|
||||||
|
```bash
|
||||||
|
# Find design directory
|
||||||
|
bash(find .workflow -type d -name "design-*" | head -1)
|
||||||
|
|
||||||
|
# Create output directories
|
||||||
|
bash(mkdir -p {base_path}/layout-extraction)
|
||||||
|
bash(mkdir -p {base_path}/layout-extraction/_inspirations) # explore mode only
|
||||||
|
```
|
||||||
|
|
||||||
|
### Validation Commands
|
||||||
|
```bash
|
||||||
|
# Check if already extracted
|
||||||
|
bash(test -f {base_path}/layout-extraction/layout-templates.json && echo "exists")
|
||||||
|
|
||||||
|
# Validate JSON structure
|
||||||
|
bash(cat layout-templates.json | grep -q "layout_templates" && echo "valid")
|
||||||
|
|
||||||
|
# Count templates
|
||||||
|
bash(cat layout-templates.json | grep -c "\"target\":")
|
||||||
|
```
|
||||||
|
|
||||||
|
### File Operations
|
||||||
|
```bash
|
||||||
|
# Load image references
|
||||||
|
bash(ls {images_pattern})
|
||||||
|
Read({image_path})
|
||||||
|
|
||||||
|
# Write inspiration files (explore mode)
|
||||||
|
Write({base_path}/layout-extraction/_inspirations/{target}-layout-ideas.txt, content)
|
||||||
|
|
||||||
|
# Write layout templates
|
||||||
|
bash(echo '{json}' > {base_path}/layout-extraction/layout-templates.json)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Output Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
{base_path}/
|
||||||
|
└── layout-extraction/
|
||||||
|
├── layout-templates.json # Structural layout templates
|
||||||
|
├── layout-space-analysis.json # Layout directions (explore mode only)
|
||||||
|
└── _inspirations/ # Explore mode only
|
||||||
|
└── {target}-layout-ideas.txt # Layout inspiration research
|
||||||
|
```
|
||||||
|
|
||||||
|
## layout-templates.json Format
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"extraction_metadata": {
|
||||||
|
"session_id": "...",
|
||||||
|
"input_mode": "image|url|prompt|hybrid",
|
||||||
|
"extraction_mode": "imitate|explore",
|
||||||
|
"device_type": "desktop|mobile|tablet|responsive",
|
||||||
|
"timestamp": "...",
|
||||||
|
"variants_count": 3,
|
||||||
|
"targets": ["home", "dashboard"]
|
||||||
|
},
|
||||||
|
"layout_templates": [
|
||||||
|
{
|
||||||
|
"target": "home",
|
||||||
|
"variant_id": "layout-1",
|
||||||
|
"device_type": "responsive",
|
||||||
|
"design_philosophy": "Responsive 3-column holy grail layout with fixed header and footer",
|
||||||
|
"dom_structure": {
|
||||||
|
"tag": "body",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"tag": "header",
|
||||||
|
"attributes": {"class": "layout-header"},
|
||||||
|
"children": [{"tag": "nav"}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tag": "div",
|
||||||
|
"attributes": {"class": "layout-main-wrapper"},
|
||||||
|
"children": [
|
||||||
|
{"tag": "main", "attributes": {"class": "layout-main-content"}},
|
||||||
|
{"tag": "aside", "attributes": {"class": "layout-sidebar-left"}},
|
||||||
|
{"tag": "aside", "attributes": {"class": "layout-sidebar-right"}}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{"tag": "footer", "attributes": {"class": "layout-footer"}}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"component_hierarchy": [
|
||||||
|
"header",
|
||||||
|
"main-content",
|
||||||
|
"sidebar-left",
|
||||||
|
"sidebar-right",
|
||||||
|
"footer"
|
||||||
|
],
|
||||||
|
"css_layout_rules": ".layout-main-wrapper { display: grid; grid-template-columns: 1fr 3fr 1fr; gap: var(--spacing-6); } @media (max-width: var(--breakpoint-md)) { .layout-main-wrapper { grid-template-columns: 1fr; } }"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Requirements**: Token-based CSS (var()), semantic HTML5, device-specific structure, accessibility attributes
|
||||||
|
|
||||||
|
## Error Handling
|
||||||
|
|
||||||
|
### Common Errors
|
||||||
|
```
|
||||||
|
ERROR: No inputs provided
|
||||||
|
→ Provide --images, --urls, or --prompt
|
||||||
|
|
||||||
|
ERROR: Invalid target name
|
||||||
|
→ Use lowercase, alphanumeric, hyphens only
|
||||||
|
|
||||||
|
ERROR: Agent task failed
|
||||||
|
→ Check agent output, retry with simplified prompt
|
||||||
|
|
||||||
|
ERROR: MCP search failed (explore mode)
|
||||||
|
→ Check network, retry
|
||||||
|
```
|
||||||
|
|
||||||
|
### Recovery Strategies
|
||||||
|
- **Partial success**: Keep successfully extracted templates
|
||||||
|
- **Invalid JSON**: Retry with stricter format requirements
|
||||||
|
- **Missing inspiration**: Works without (less informed exploration)
|
||||||
|
|
||||||
|
## Key Features
|
||||||
|
|
||||||
|
- **Separation of Concerns** - Decouples layout (structure) from style (visuals)
|
||||||
|
- **Structural Exploration** - Explore mode enables A/B testing of different layouts
|
||||||
|
- **Token-Based Layout** - CSS uses `var()` placeholders for instant design system adaptation
|
||||||
|
- **Device-Specific** - Tailored structures for different screen sizes
|
||||||
|
- **Foundation for Assembly** - Provides structural blueprint for refactored `generate` command
|
||||||
|
- **Agent-Powered** - Deep structural analysis with AI
|
||||||
|
|
||||||
|
## Integration
|
||||||
|
|
||||||
|
**Workflow Position**: Between style extraction and prototype generation
|
||||||
|
|
||||||
|
**New Workflow**:
|
||||||
|
1. `/workflow:ui-design:style-extract` → `style-cards.json` (Visual tokens)
|
||||||
|
2. `/workflow:ui-design:consolidate` → `design-tokens.json` (Final visual system)
|
||||||
|
3. `/workflow:ui-design:layout-extract` → `layout-templates.json` (Structural templates)
|
||||||
|
4. `/workflow:ui-design:generate` (Refactored as assembler):
|
||||||
|
- **Reads**: `design-tokens.json` + `layout-templates.json`
|
||||||
|
- **Action**: For each style × layout combination:
|
||||||
|
1. Build HTML from `dom_structure`
|
||||||
|
2. Create layout CSS from `css_layout_rules`
|
||||||
|
3. Link design tokens CSS
|
||||||
|
4. Inject placeholder content
|
||||||
|
- **Output**: Complete token-driven HTML/CSS prototypes
|
||||||
|
|
||||||
|
**Input**: Reference images, URLs, or text prompts
|
||||||
|
**Output**: `layout-templates.json` for `/workflow:ui-design:generate`
|
||||||
|
**Next**: `/workflow:ui-design:generate --session {session_id}`
|
||||||
@@ -1,13 +1,13 @@
|
|||||||
---
|
---
|
||||||
name: extract
|
name: style-extract
|
||||||
description: Extract design style from reference images or text prompts using Claude's analysis
|
description: Extract design style from reference images or text prompts using Claude's analysis
|
||||||
usage: /workflow:ui-design:extract [--base-path <path>] [--session <id>] [--images "<glob>"] [--prompt "<desc>"] [--mode <imitate|explore>] [--variants <count>]
|
usage: /workflow:ui-design:style-extract [--base-path <path>] [--session <id>] [--images "<glob>"] [--prompt "<desc>"] [--mode <imitate|explore>] [--variants <count>]
|
||||||
examples:
|
examples:
|
||||||
- /workflow:ui-design:extract --images "design-refs/*.png" --mode explore --variants 3
|
- /workflow:ui-design:style-extract --images "design-refs/*.png" --mode explore --variants 3
|
||||||
- /workflow:ui-design:extract --prompt "Modern minimalist blog, dark theme" --mode explore --variants 3
|
- /workflow:ui-design:style-extract --prompt "Modern minimalist blog, dark theme" --mode explore --variants 3
|
||||||
- /workflow:ui-design:extract --session WFS-auth --images "refs/*.png" --prompt "Linear.app style" --mode imitate
|
- /workflow:ui-design:style-extract --session WFS-auth --images "refs/*.png" --prompt "Linear.app style" --mode imitate
|
||||||
- /workflow:ui-design:extract --base-path ".workflow/WFS-auth/design-run-20250109-143022" --images "refs/*.png" --mode explore --variants 3
|
- /workflow:ui-design:style-extract --base-path ".workflow/WFS-auth/design-run-20250109-143022" --images "refs/*.png" --mode explore --variants 3
|
||||||
- /workflow:ui-design:extract --prompt "Bold vibrant" --mode imitate # High-fidelity single style
|
- /workflow:ui-design:style-extract --prompt "Bold vibrant" --mode imitate # High-fidelity single style
|
||||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*)
|
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*)
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -271,5 +271,7 @@ ERROR: Claude JSON parsing error
|
|||||||
## Integration
|
## Integration
|
||||||
|
|
||||||
**Input**: Reference images or text prompts
|
**Input**: Reference images or text prompts
|
||||||
**Output**: `style-cards.json` for `/workflow:ui-design:consolidate`
|
**Output**: `style-cards.json` for consolidation
|
||||||
**Next**: `/workflow:ui-design:consolidate --session {session_id} --variants {count}`
|
**Next**: `/workflow:ui-design:consolidate --session {session_id} --variants {count}`
|
||||||
|
|
||||||
|
**Note**: This command only extracts visual style (colors, typography, spacing). For layout structure extraction, use `/workflow:ui-design:layout-extract`.
|
||||||
@@ -4,7 +4,7 @@
|
|||||||
# Purpose: Generate compare.html and index.html using template substitution
|
# Purpose: Generate compare.html and index.html using template substitution
|
||||||
# Template: ~/.claude/workflows/_template-compare-matrix.html
|
# Template: ~/.claude/workflows/_template-compare-matrix.html
|
||||||
#
|
#
|
||||||
# Usage: ui-generate-preview-v2.sh <prototypes_dir> [--template <path>]
|
# Usage: ui-generate-preview.sh <prototypes_dir> [--template <path>]
|
||||||
#
|
#
|
||||||
|
|
||||||
set -e
|
set -e
|
||||||
360
CHANGELOG.md
360
CHANGELOG.md
@@ -5,6 +5,366 @@ All notable changes to Claude Code Workflow (CCW) will be documented in this fil
|
|||||||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||||
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||||
|
|
||||||
|
## [4.4.0] - 2025-10-11
|
||||||
|
|
||||||
|
### 🏗️ UI Design Workflow V3 - Layout/Style Separation Architecture
|
||||||
|
|
||||||
|
This release introduces a fundamental architectural refactoring that separates layout structure extraction from style token extraction, enabling the `generate` command to become a pure assembler.
|
||||||
|
|
||||||
|
#### Breaking Changes
|
||||||
|
|
||||||
|
**Command Renaming**:
|
||||||
|
```bash
|
||||||
|
# ❌ Old (v4.3.0 and earlier)
|
||||||
|
/workflow:ui-design:extract
|
||||||
|
|
||||||
|
# ✅ New (v4.4.0)
|
||||||
|
/workflow:ui-design:style-extract
|
||||||
|
```
|
||||||
|
|
||||||
|
**New Required Command**:
|
||||||
|
- **`/workflow:ui-design:layout-extract`**: Now mandatory for workflows using `generate`
|
||||||
|
- Layout templates must be generated before prototype assembly
|
||||||
|
- Both `imitate-auto` and `explore-auto` now include Phase 2.5 (layout extraction)
|
||||||
|
|
||||||
|
**Workflow Changes**:
|
||||||
|
```bash
|
||||||
|
# ❌ Old Flow (v4.3.0)
|
||||||
|
style-extract → consolidate → generate → update
|
||||||
|
|
||||||
|
# ✅ New Flow (v4.4.0)
|
||||||
|
style-extract → consolidate → layout-extract → generate (assembler) → update
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Added
|
||||||
|
|
||||||
|
**New Command: `/workflow:ui-design:layout-extract`**:
|
||||||
|
- **Purpose**: Extract structural layout information separate from visual style
|
||||||
|
- **Features**:
|
||||||
|
- Agent-powered structural analysis using `ui-design-agent`
|
||||||
|
- Dual-mode operation: `imitate` (high-fidelity replication) / `explore` (multiple variants)
|
||||||
|
- Device-aware layouts: desktop, mobile, tablet, responsive
|
||||||
|
- Generates `layout-templates.json` with DOM structure and CSS layout rules
|
||||||
|
- MCP-integrated layout pattern research (explore mode only)
|
||||||
|
- Token-based CSS using `var()` placeholders for spacing and breakpoints
|
||||||
|
- **Output**: `layout-extraction/layout-templates.json` with:
|
||||||
|
- DOM structure (semantic HTML5 with ARIA)
|
||||||
|
- Component hierarchy (high-level layout regions)
|
||||||
|
- CSS layout rules (Grid/Flexbox, no visual styling)
|
||||||
|
- Device-specific structures and responsive breakpoints
|
||||||
|
|
||||||
|
**Enhanced Layout Extraction Architecture**:
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"layout_templates": [
|
||||||
|
{
|
||||||
|
"target": "home",
|
||||||
|
"variant_id": "layout-1",
|
||||||
|
"device_type": "responsive",
|
||||||
|
"design_philosophy": "3-column holy grail with fixed header",
|
||||||
|
"dom_structure": { /* JSON object */ },
|
||||||
|
"component_hierarchy": ["header", "main", "sidebar", "footer"],
|
||||||
|
"css_layout_rules": "/* Grid/Flexbox only, uses var() */"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Device-Aware Layout Generation**:
|
||||||
|
- **Desktop**: 1920×1080px - Multi-column grids, spacious layouts
|
||||||
|
- **Mobile**: 375×812px - Single column, stacked sections, touch targets ≥44px
|
||||||
|
- **Tablet**: 768×1024px - Hybrid layouts, flexible columns
|
||||||
|
- **Responsive**: Mobile-first breakpoint-driven adaptive layouts
|
||||||
|
|
||||||
|
**MCP Integration (Explore Mode)**:
|
||||||
|
- `mcp__exa__web_search_exa` for layout pattern inspiration
|
||||||
|
- Pattern research: `{target} layout patterns {device_type}`
|
||||||
|
- Inspiration files: `layout-extraction/_inspirations/{target}-layout-ideas.txt`
|
||||||
|
|
||||||
|
#### Changed
|
||||||
|
|
||||||
|
**`/workflow:ui-design:style-extract` (Renamed from `extract`)**:
|
||||||
|
- **File Renamed**: `extract.md` → `style-extract.md`
|
||||||
|
- **Scope Clarified**: Focus exclusively on visual style (colors, typography, spacing)
|
||||||
|
- **Documentation Updated**: Added note about layout extraction separation
|
||||||
|
- **No Functionality Change**: All style extraction features preserved
|
||||||
|
- **Output**: Still generates `style-cards.json` with `proposed_tokens`
|
||||||
|
|
||||||
|
**`/workflow:ui-design:generate` (Refactored to Pure Assembler)**:
|
||||||
|
- **Before (v4.3.0)**: Layout design + style application agent
|
||||||
|
- Agent made layout decisions during generation
|
||||||
|
- Mixed structural and visual responsibilities
|
||||||
|
- CSS contained both layout and style rules
|
||||||
|
|
||||||
|
- **After (v4.4.0)**: Pure assembly only
|
||||||
|
- **Reads**: `layout-templates.json` + `design-tokens.json`
|
||||||
|
- **Action**: Combines pre-extracted components:
|
||||||
|
1. Build HTML from `dom_structure`
|
||||||
|
2. Apply `css_layout_rules` (structure)
|
||||||
|
3. Link design tokens CSS (visual style)
|
||||||
|
4. Inject placeholder content
|
||||||
|
- **No Design Logic**: All layout and style decisions pre-made
|
||||||
|
- **Agent Prompt Updated**: Removed layout design instructions
|
||||||
|
|
||||||
|
**Agent Instructions Simplification** (`generate.md`):
|
||||||
|
```javascript
|
||||||
|
// ❌ Old (v4.3.0): Agent designs layout + applies style
|
||||||
|
Agent: "Design page layout based on requirements, then apply design tokens"
|
||||||
|
|
||||||
|
// ✅ New (v4.4.0): Agent only assembles
|
||||||
|
Agent: "
|
||||||
|
[LAYOUT_STYLE_ASSEMBLY]
|
||||||
|
Read layout-templates.json → Extract dom_structure, css_layout_rules
|
||||||
|
Read design-tokens.json → Extract ALL token values
|
||||||
|
Build HTML from dom_structure
|
||||||
|
Build CSS from css_layout_rules + token values
|
||||||
|
Write files IMMEDIATELY
|
||||||
|
"
|
||||||
|
```
|
||||||
|
|
||||||
|
**Workflow Commands Updated**:
|
||||||
|
- **`/workflow:ui-design:imitate-auto`**:
|
||||||
|
- Added Phase 2.5: Layout Extraction (imitate mode, single variant)
|
||||||
|
- Generates `layout-templates.json` before Phase 4 (UI Assembly)
|
||||||
|
- Uses `--mode imitate` for high-fidelity layout replication
|
||||||
|
|
||||||
|
- **`/workflow:ui-design:explore-auto`**:
|
||||||
|
- Added Phase 2.5: Layout Extraction (explore mode, multiple variants)
|
||||||
|
- Generates `{targets × layout_variants}` layout templates
|
||||||
|
- Uses `--mode explore` for structural variety
|
||||||
|
- MCP-powered layout pattern research
|
||||||
|
|
||||||
|
**Output Structure Changes**:
|
||||||
|
```
|
||||||
|
{base_path}/
|
||||||
|
├── style-extraction/ # Visual tokens (unchanged)
|
||||||
|
│ └── style-cards.json
|
||||||
|
├── layout-extraction/ # NEW: Structural templates
|
||||||
|
│ ├── layout-templates.json
|
||||||
|
│ ├── layout-space-analysis.json (explore mode)
|
||||||
|
│ └── _inspirations/ (explore mode)
|
||||||
|
├── style-consolidation/ # Final design tokens (unchanged)
|
||||||
|
│ └── style-1/
|
||||||
|
│ └── design-tokens.json
|
||||||
|
└── prototypes/ # Assembled output (unchanged)
|
||||||
|
└── {target}-style-{s}-layout-{l}.html
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Improved
|
||||||
|
|
||||||
|
**Separation of Concerns**:
|
||||||
|
- 🎨 **Style (style-extract)**: Colors, typography, spacing → design-tokens.json
|
||||||
|
- 🏗️ **Layout (layout-extract)**: DOM structure, CSS layout → layout-templates.json
|
||||||
|
- 📦 **Assembly (generate)**: Combine structure + style → final prototypes
|
||||||
|
- ✅ **Result**: Each phase has single, clear responsibility
|
||||||
|
|
||||||
|
**Quality Improvements**:
|
||||||
|
- 🎯 **Better Layout Variety**: Explore mode generates structurally distinct layouts
|
||||||
|
- 🔄 **Reusability**: Layout templates can be combined with different styles
|
||||||
|
- 📊 **Clarity**: All structural decisions in layout-templates.json
|
||||||
|
- 🧪 **Testability**: Layout structure and visual style tested independently
|
||||||
|
|
||||||
|
**Performance Benefits**:
|
||||||
|
- ⚡ **Faster Generation**: Assembly is simpler than design + application
|
||||||
|
- 🔄 **Better Caching**: Layout templates reused across style variants
|
||||||
|
- 📉 **Reduced Complexity**: Generate agent has single responsibility
|
||||||
|
|
||||||
|
#### Technical Details
|
||||||
|
|
||||||
|
**Phase Flow Comparison**:
|
||||||
|
|
||||||
|
**Old Flow (v4.3.0)**:
|
||||||
|
```
|
||||||
|
Phase 1: style-extract → style-cards.json
|
||||||
|
Phase 2: consolidate → design-tokens.json
|
||||||
|
Phase 3: generate (design+apply) → prototypes
|
||||||
|
Phase 4: update
|
||||||
|
```
|
||||||
|
|
||||||
|
**New Flow (v4.4.0)**:
|
||||||
|
```
|
||||||
|
Phase 1: style-extract → style-cards.json
|
||||||
|
Phase 2: consolidate → design-tokens.json
|
||||||
|
Phase 2.5: layout-extract → layout-templates.json [NEW]
|
||||||
|
Phase 3: generate (pure assembly) → prototypes
|
||||||
|
Phase 4: update
|
||||||
|
```
|
||||||
|
|
||||||
|
**Agent Task Changes**:
|
||||||
|
|
||||||
|
**Before (Mixed Responsibility)**:
|
||||||
|
```javascript
|
||||||
|
Agent Task: "
|
||||||
|
Design page layout for {target}
|
||||||
|
Apply design tokens from design-tokens.json
|
||||||
|
Generate HTML + CSS
|
||||||
|
"
|
||||||
|
// Problems:
|
||||||
|
// - Layout decisions made during generation
|
||||||
|
// - Style application mixed with structure
|
||||||
|
// - Agent has dual responsibility
|
||||||
|
```
|
||||||
|
|
||||||
|
**After (Pure Assembly)**:
|
||||||
|
```javascript
|
||||||
|
Agent Task: "
|
||||||
|
[LAYOUT_STYLE_ASSEMBLY]
|
||||||
|
INPUT 1: layout-templates.json → dom_structure, css_layout_rules
|
||||||
|
INPUT 2: design-tokens.json → token values
|
||||||
|
|
||||||
|
ASSEMBLY:
|
||||||
|
1. Build HTML from dom_structure
|
||||||
|
2. Build CSS from css_layout_rules (replace var())
|
||||||
|
3. Add visual styling using token values
|
||||||
|
4. Write files IMMEDIATELY
|
||||||
|
|
||||||
|
RULES:
|
||||||
|
✅ Pure assembly only
|
||||||
|
❌ NO layout design decisions
|
||||||
|
❌ NO style design decisions
|
||||||
|
"
|
||||||
|
```
|
||||||
|
|
||||||
|
**Layout Template Structure**:
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"target": "home",
|
||||||
|
"variant_id": "layout-1",
|
||||||
|
"device_type": "responsive",
|
||||||
|
"design_philosophy": "F-pattern with sticky nav",
|
||||||
|
"dom_structure": {
|
||||||
|
"tag": "body",
|
||||||
|
"children": [
|
||||||
|
{"tag": "header", "attributes": {"class": "layout-header"}},
|
||||||
|
{"tag": "main", "attributes": {"class": "layout-main"}},
|
||||||
|
{"tag": "footer", "attributes": {"class": "layout-footer"}}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"component_hierarchy": ["header", "main", "footer"],
|
||||||
|
"css_layout_rules": ".layout-main { display: grid; grid-template-columns: 1fr 3fr; gap: var(--spacing-6); }"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Token-Based CSS Pattern**:
|
||||||
|
```css
|
||||||
|
/* Layout rules use var() for spacing/breakpoints */
|
||||||
|
.layout-wrapper {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--spacing-4);
|
||||||
|
padding: var(--spacing-8);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: var(--breakpoint-md)) {
|
||||||
|
.layout-wrapper {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Migration Guide
|
||||||
|
|
||||||
|
**For Existing Workflows**:
|
||||||
|
1. **Update Command Names**:
|
||||||
|
```bash
|
||||||
|
# Old: /workflow:ui-design:extract
|
||||||
|
# New: /workflow:ui-design:style-extract
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Add Layout Extraction Step**:
|
||||||
|
```bash
|
||||||
|
# After consolidate, before generate:
|
||||||
|
/workflow:ui-design:layout-extract --session WFS-xxx --targets "dashboard,settings" --mode explore --variants 3
|
||||||
|
```
|
||||||
|
|
||||||
|
3. **Update Orchestrator Workflows**:
|
||||||
|
- `imitate-auto`: Automatically includes Phase 2.5
|
||||||
|
- `explore-auto`: Automatically includes Phase 2.5
|
||||||
|
- Manual workflows: Add `layout-extract` call
|
||||||
|
|
||||||
|
**Backward Compatibility**:
|
||||||
|
- ✅ Old `extract` command files archived (not deleted)
|
||||||
|
- ✅ New `style-extract` command name explicit and clear
|
||||||
|
- ✅ All output structures backward compatible
|
||||||
|
- ⚠️ **Breaking**: `generate` now requires `layout-templates.json` input
|
||||||
|
|
||||||
|
**For New Projects**:
|
||||||
|
- Use new workflow: `style-extract → consolidate → layout-extract → generate → update`
|
||||||
|
- Leverage layout variants: `--layout-variants` in explore-auto
|
||||||
|
- Device-specific layouts: `--device-type` parameter
|
||||||
|
|
||||||
|
#### Files Changed
|
||||||
|
|
||||||
|
**Renamed**:
|
||||||
|
- `.claude/commands/workflow/ui-design/extract.md` → `style-extract.md`
|
||||||
|
|
||||||
|
**Added**:
|
||||||
|
- `.claude/commands/workflow/ui-design/layout-extract.md` (new command, 370+ lines)
|
||||||
|
|
||||||
|
**Modified**:
|
||||||
|
- `.claude/commands/workflow/ui-design/generate.md`:
|
||||||
|
- Refactored to pure assembler (agent instructions simplified)
|
||||||
|
- Added Phase 2: Load Layout Templates
|
||||||
|
- Updated agent prompt to focus on assembly only
|
||||||
|
- Documentation updates for separation of concerns
|
||||||
|
|
||||||
|
- `.claude/commands/workflow/ui-design/imitate-auto.md`:
|
||||||
|
- Added Phase 2.5: Layout Extraction (imitate mode)
|
||||||
|
- Updated workflow orchestration
|
||||||
|
- Phase numbering shifted (old Phase 3 → Phase 4)
|
||||||
|
|
||||||
|
- `.claude/commands/workflow/ui-design/explore-auto.md`:
|
||||||
|
- Added Phase 2.5: Layout Extraction (explore mode)
|
||||||
|
- Updated workflow orchestration
|
||||||
|
- Matrix calculation updated: `style_variants × layout_variants × targets`
|
||||||
|
- Phase numbering shifted (old Phase 3 → Phase 4)
|
||||||
|
|
||||||
|
- `.claude/commands/workflow/ui-design/consolidate.md`:
|
||||||
|
- Documentation updates
|
||||||
|
- Note added about layout-extract requirement
|
||||||
|
|
||||||
|
**Removed**:
|
||||||
|
- ❌ **V2 Commands Deprecated**: All `-v2` command variants removed
|
||||||
|
- `generate-v2.md` removed (merged into main `generate.md`)
|
||||||
|
- `explore-auto-v2.md` removed (merged into main `explore-auto.md`)
|
||||||
|
- Self-contained CSS architecture now standard in all commands
|
||||||
|
- No more v1/v2 split - unified workflow
|
||||||
|
|
||||||
|
**Total Impact**:
|
||||||
|
- 5 files changed
|
||||||
|
- 1 file renamed
|
||||||
|
- 1 new command (layout-extract, 370+ lines)
|
||||||
|
- 2 deprecated commands removed (generate-v2, explore-auto-v2)
|
||||||
|
- ~200 lines modified in existing commands
|
||||||
|
- Net: +400 lines (improved separation of concerns)
|
||||||
|
|
||||||
|
#### Benefits
|
||||||
|
|
||||||
|
**Architectural Clarity**:
|
||||||
|
- ✅ **Single Responsibility**: Each command has one job
|
||||||
|
- ✅ **Clear Contracts**: Explicit input/output for each phase
|
||||||
|
- ✅ **Better Testing**: Components testable independently
|
||||||
|
- ✅ **Maintainability**: Changes localized to relevant phase
|
||||||
|
|
||||||
|
**Developer Experience**:
|
||||||
|
- 🎯 **Predictable**: Layout structure visible before assembly
|
||||||
|
- 🔍 **Debuggable**: Easier to identify issues (layout vs style)
|
||||||
|
- 🔄 **Flexible**: Reuse layouts with different styles
|
||||||
|
- 📚 **Understandable**: Each phase has clear documentation
|
||||||
|
|
||||||
|
**Design Quality**:
|
||||||
|
- 🎨 **Style Independence**: Visual tokens separate from structure
|
||||||
|
- 🏗️ **Layout Variety**: Explore mode generates structurally different layouts
|
||||||
|
- 📐 **Device Optimization**: Layout templates device-specific
|
||||||
|
- ♿ **Accessibility**: Semantic HTML5 structure with ARIA
|
||||||
|
|
||||||
|
**Implementation Quality**:
|
||||||
|
- 🧩 **Modular**: Components can be developed independently
|
||||||
|
- 🔄 **Reusable**: Layout templates work with any style
|
||||||
|
- 🧪 **Testable**: Structure and style tested separately
|
||||||
|
- 📦 **Production-Ready**: Token-driven, semantic, accessible
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## [4.3.0] - 2025-10-10
|
## [4.3.0] - 2025-10-10
|
||||||
|
|
||||||
### 🎨 UI Design Workflow V2 - Self-Contained CSS Architecture
|
### 🎨 UI Design Workflow V2 - Self-Contained CSS Architecture
|
||||||
|
|||||||
90
README.md
90
README.md
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
<div align="center">
|
<div align="center">
|
||||||
|
|
||||||
[](https://github.com/catlog22/Claude-Code-Workflow/releases)
|
[](https://github.com/catlog22/Claude-Code-Workflow/releases)
|
||||||
[](LICENSE)
|
[](LICENSE)
|
||||||
[]()
|
[]()
|
||||||
[](https://github.com/modelcontextprotocol)
|
[](https://github.com/modelcontextprotocol)
|
||||||
@@ -15,13 +15,13 @@
|
|||||||
|
|
||||||
**Claude Code Workflow (CCW)** is a next-generation multi-agent automation framework that orchestrates complex software development tasks through intelligent workflow management and autonomous execution.
|
**Claude Code Workflow (CCW)** is a next-generation multi-agent automation framework that orchestrates complex software development tasks through intelligent workflow management and autonomous execution.
|
||||||
|
|
||||||
> **🎉 Latest: v4.3.0** - UI Design Workflow V2 with Self-Contained CSS Architecture. See [CHANGELOG.md](CHANGELOG.md) for details.
|
> **🎉 Latest: v4.4.0** - UI Design Workflow V3 with Layout/Style Separation Architecture. See [CHANGELOG.md](CHANGELOG.md) for details.
|
||||||
>
|
>
|
||||||
> **What's New in v4.3.0**:
|
> **What's New in v4.4.0**:
|
||||||
> - 🎨 **Self-Contained CSS**: Agents generate independent CSS directly from design-tokens.json
|
> - 🏗️ **Layout/Style Separation**: New `layout-extract` command separates structure from visual tokens
|
||||||
> - ⚡ **Simplified Workflow**: Removed placeholder mechanism and token conversion steps
|
> - 📦 **Pure Assembler**: `generate` command now purely combines pre-extracted layouts + styles
|
||||||
> - 💪 **Better Style Diversity**: CSS uses direct token values for stronger visual differentiation
|
> - 🎯 **Better Variety**: Layout exploration generates structurally distinct designs
|
||||||
> - 📉 **31% Code Reduction**: 346 lines removed with clearer responsibilities
|
> - ✅ **Single Responsibility**: Each phase (style, layout, assembly) has clear purpose
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -259,10 +259,11 @@ MCP (Model Context Protocol) tools provide advanced codebase analysis. **Recomme
|
|||||||
# With session integration
|
# With session integration
|
||||||
/workflow:ui-design:explore-auto --session WFS-auth --images "refs/*.png" --style-variants 2 --layout-variants 3
|
/workflow:ui-design:explore-auto --session WFS-auth --images "refs/*.png" --style-variants 2 --layout-variants 3
|
||||||
|
|
||||||
# Or run individual design phases
|
# Or run individual design phases (v4.4.0+)
|
||||||
/workflow:ui-design:extract --images "refs/*.png" --variants 3
|
/workflow:ui-design:style-extract --images "refs/*.png" --mode explore --variants 3
|
||||||
/workflow:ui-design:consolidate --variants "variant-1,variant-3"
|
/workflow:ui-design:consolidate --variants "variant-1,variant-3"
|
||||||
/workflow:ui-design:generate --pages "dashboard,auth" --style-variants 2 --layout-variants 2
|
/workflow:ui-design:layout-extract --targets "dashboard,auth" --mode explore --variants 2 --device-type responsive
|
||||||
|
/workflow:ui-design:generate --style-variants 1 --layout-variants 2
|
||||||
|
|
||||||
# Preview generated prototypes
|
# Preview generated prototypes
|
||||||
# Option 1: Open .workflow/WFS-auth/.design/prototypes/compare.html in browser
|
# Option 1: Open .workflow/WFS-auth/.design/prototypes/compare.html in browser
|
||||||
@@ -364,12 +365,13 @@ cd .workflow/WFS-auth/.design/prototypes && python -m http.server 8080
|
|||||||
|---|---|
|
|---|---|
|
||||||
| `/workflow:session:*` | Manage development sessions (`start`, `pause`, `resume`, `list`, `switch`, `complete`). |
|
| `/workflow:session:*` | Manage development sessions (`start`, `pause`, `resume`, `list`, `switch`, `complete`). |
|
||||||
| `/workflow:brainstorm:*` | Use role-based agents for multi-perspective planning. |
|
| `/workflow:brainstorm:*` | Use role-based agents for multi-perspective planning. |
|
||||||
| `/workflow:ui-design:explore-auto` | **v4.2.1** Matrix exploration mode - Generate multiple style × layout variants for comprehensive design exploration. |
|
| `/workflow:ui-design:explore-auto` | **v4.4.0** Matrix exploration mode - Generate multiple style × layout variants with layout/style separation. |
|
||||||
| `/workflow:ui-design:imitate-auto` | **v4.2.1** Fast imitation mode - Rapid single-design replication with auto-screenshot and direct token extraction. |
|
| `/workflow:ui-design:imitate-auto` | **v4.4.0** Fast imitation mode - Rapid UI replication with auto-screenshot, layout extraction, and assembly. |
|
||||||
| `/workflow:ui-design:extract` | **v4.2.1** Extract design from images/text using Claude-native analysis. Single-pass variant generation. |
|
| `/workflow:ui-design:style-extract` | **v4.4.0** Extract visual style (colors, typography, spacing) from images/text using Claude-native analysis. |
|
||||||
| `/workflow:ui-design:consolidate` | **v4.2.1** Consolidate style variants into validated design tokens using Claude synthesis. |
|
| `/workflow:ui-design:layout-extract` | **v4.4.0** Extract structural layout (DOM, CSS layout rules) with device-aware templates. |
|
||||||
| `/workflow:ui-design:generate` | **v4.2.1** Generate token-driven HTML/CSS prototypes in matrix mode (style × layout combinations). |
|
| `/workflow:ui-design:consolidate` | **v4.4.0** Consolidate style variants into validated design tokens using Claude synthesis. |
|
||||||
| `/workflow:ui-design:update` | **v4.2.1** Integrate finalized design system into brainstorming artifacts. |
|
| `/workflow:ui-design:generate` | **v4.4.0** Pure assembler - Combine layout templates + design tokens → HTML/CSS prototypes. |
|
||||||
|
| `/workflow:ui-design:update` | **v4.4.0** Integrate finalized design system into brainstorming artifacts. |
|
||||||
| `/workflow:plan` | Create a detailed, executable plan from a description. |
|
| `/workflow:plan` | Create a detailed, executable plan from a description. |
|
||||||
| `/workflow:tdd-plan` | Create TDD workflow (6 phases) with test coverage analysis and Red-Green-Refactor cycles. |
|
| `/workflow:tdd-plan` | Create TDD workflow (6 phases) with test coverage analysis and Red-Green-Refactor cycles. |
|
||||||
| `/workflow:execute` | Execute the current workflow plan autonomously. |
|
| `/workflow:execute` | Execute the current workflow plan autonomously. |
|
||||||
@@ -381,9 +383,9 @@ cd .workflow/WFS-auth/.design/prototypes && python -m http.server 8080
|
|||||||
| `/workflow:tools:test-concept-enhanced` | Generate test strategy and requirements analysis using Gemini. |
|
| `/workflow:tools:test-concept-enhanced` | Generate test strategy and requirements analysis using Gemini. |
|
||||||
| `/workflow:tools:test-task-generate` | Generate test task JSON with test-fix-cycle specification. |
|
| `/workflow:tools:test-task-generate` | Generate test task JSON with test-fix-cycle specification. |
|
||||||
|
|
||||||
### **UI Design Workflow Commands (`/workflow:ui-design:*`)** *(v4.2.1)*
|
### **UI Design Workflow Commands (`/workflow:ui-design:*`)** *(v4.4.0)*
|
||||||
|
|
||||||
The design workflow system provides complete UI design refinement with **pure Claude execution**, **intelligent page inference**, and **zero external dependencies**.
|
The design workflow system provides complete UI design refinement with **layout/style separation architecture**, **pure Claude execution**, **intelligent target inference**, and **zero external dependencies**.
|
||||||
|
|
||||||
#### Core Commands
|
#### Core Commands
|
||||||
|
|
||||||
@@ -420,21 +422,41 @@ The design workflow system provides complete UI design refinement with **pure Cl
|
|||||||
- **🎯 Direct Extraction**: Skip variant selection, go straight to implementation
|
- **🎯 Direct Extraction**: Skip variant selection, go straight to implementation
|
||||||
- **🔧 Single Design Focus**: Best for copying existing designs quickly
|
- **🔧 Single Design Focus**: Best for copying existing designs quickly
|
||||||
|
|
||||||
**`/workflow:ui-design:extract`** - Style analysis with dual input sources
|
**`/workflow:ui-design:style-extract`** - Visual style extraction (v4.4.0)
|
||||||
```bash
|
```bash
|
||||||
# Pure text prompt
|
# Pure text prompt
|
||||||
/workflow:ui-design:extract --prompt "Modern minimalist, dark theme" --variants 3
|
/workflow:ui-design:style-extract --prompt "Modern minimalist, dark theme" --mode explore --variants 3
|
||||||
|
|
||||||
# Pure images
|
# Pure images
|
||||||
/workflow:ui-design:extract --images "refs/*.png" --variants 3
|
/workflow:ui-design:style-extract --images "refs/*.png" --mode explore --variants 3
|
||||||
|
|
||||||
# Hybrid (text guides image analysis)
|
# Hybrid (text guides image analysis)
|
||||||
/workflow:ui-design:extract --images "refs/*.png" --prompt "Linear.app style" --variants 2
|
/workflow:ui-design:style-extract --images "refs/*.png" --prompt "Linear.app style" --mode imitate
|
||||||
|
|
||||||
|
# High-fidelity single style
|
||||||
|
/workflow:ui-design:style-extract --images "design.png" --mode imitate
|
||||||
```
|
```
|
||||||
|
- **🎨 Visual Tokens Only**: Colors, typography, spacing (no layout structure)
|
||||||
|
- **🔄 Dual Mode**: Imitate (single variant) / Explore (multiple variants)
|
||||||
- **Claude-Native**: Single-pass analysis, no external tools
|
- **Claude-Native**: Single-pass analysis, no external tools
|
||||||
- **Enhanced Output**: `style-cards.json` with embedded `proposed_tokens`
|
- **Output**: `style-cards.json` with embedded `proposed_tokens`
|
||||||
- **Reproducible**: Deterministic structure, version-controlled logic
|
|
||||||
- **Output**: 1 file (vs 4+ in previous versions)
|
**`/workflow:ui-design:layout-extract`** - Structural layout extraction (v4.4.0)
|
||||||
|
```bash
|
||||||
|
# Explore mode - multiple layout variants
|
||||||
|
/workflow:ui-design:layout-extract --targets "home,dashboard" --mode explore --variants 3 --device-type responsive
|
||||||
|
|
||||||
|
# Imitate mode - single layout replication
|
||||||
|
/workflow:ui-design:layout-extract --images "refs/*.png" --targets "dashboard" --mode imitate --device-type desktop
|
||||||
|
|
||||||
|
# With MCP research (explore mode)
|
||||||
|
/workflow:ui-design:layout-extract --prompt "E-commerce checkout" --targets "cart,checkout" --mode explore --variants 2
|
||||||
|
```
|
||||||
|
- **🏗️ Structure Only**: DOM hierarchy, CSS layout rules (no visual style)
|
||||||
|
- **📱 Device-Aware**: Desktop, mobile, tablet, responsive optimizations
|
||||||
|
- **🧠 Agent-Powered**: Uses ui-design-agent for structural analysis
|
||||||
|
- **🔍 MCP Research**: Layout pattern inspiration (explore mode)
|
||||||
|
- **Output**: `layout-templates.json` with token-based CSS
|
||||||
|
|
||||||
**`/workflow:ui-design:consolidate`** - Validate and merge tokens
|
**`/workflow:ui-design:consolidate`** - Validate and merge tokens
|
||||||
```bash
|
```bash
|
||||||
@@ -445,19 +467,19 @@ The design workflow system provides complete UI design refinement with **pure Cl
|
|||||||
- **Features**: WCAG AA validation, OKLCH colors, W3C token format
|
- **Features**: WCAG AA validation, OKLCH colors, W3C token format
|
||||||
- **Output**: `design-tokens.json`, `style-guide.md`, `tailwind.config.js`, `validation-report.json`
|
- **Output**: `design-tokens.json`, `style-guide.md`, `tailwind.config.js`, `validation-report.json`
|
||||||
|
|
||||||
**`/workflow:ui-design:generate`** - Generate HTML/CSS prototypes
|
**`/workflow:ui-design:generate`** - Pure assembler (v4.4.0)
|
||||||
```bash
|
```bash
|
||||||
# Matrix mode - style × layout combinations
|
# Combine layout templates + design tokens
|
||||||
/workflow:ui-design:generate --pages "dashboard,auth" --style-variants 2 --layout-variants 3
|
/workflow:ui-design:generate --style-variants 1 --layout-variants 2
|
||||||
|
|
||||||
# Single page with multiple variants
|
# Multiple styles with multiple layouts
|
||||||
/workflow:ui-design:generate --pages "home" --style-variants 3 --layout-variants 2
|
/workflow:ui-design:generate --style-variants 2 --layout-variants 3
|
||||||
```
|
```
|
||||||
- **🎯 Matrix Generation**: Creates all style × layout combinations
|
- **📦 Pure Assembly**: Combines pre-extracted layout-templates.json + design-tokens.json
|
||||||
- **📊 Multi-page Support**: Consistent design system across pages
|
- **❌ No Design Logic**: All layout/style decisions made in previous phases
|
||||||
- **✅ Consistency Validation**: Automatic cross-page consistency reports (v4.2.0+)
|
- **✅ Token Resolution**: Replaces var() placeholders with actual token values
|
||||||
|
- **🎯 Matrix Output**: Generates style × layout × targets prototypes
|
||||||
- **🔍 Interactive Preview**: `compare.html` with side-by-side comparison
|
- **🔍 Interactive Preview**: `compare.html` with side-by-side comparison
|
||||||
- **📋 Batch Selection**: Quick selection by style or layout filters
|
|
||||||
|
|
||||||
**`/workflow:ui-design:update`** - Integrate design system
|
**`/workflow:ui-design:update`** - Integrate design system
|
||||||
```bash
|
```bash
|
||||||
|
|||||||
Reference in New Issue
Block a user