catlog22/Claude-Code-Workflow
1
0
Fork 0
mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-02-05 01:50:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: streamline UI design workflow and add extraction scripts

Browse Source 
- Simplified UI design command workflows (batch-generate, explore-auto, generate, update)
- Enhanced style-extract and layout-extract with improved documentation
- Refactored imitate-auto for better usability
- Removed obsolete consolidate workflow
- Added extract-computed-styles.js and extract-layout-structure.js utilities
- Updated UI generation and instantiation scripts

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
catlog22
2025-10-16 13:47:58 +08:00
parent d2c66135fb
commit e95be40c2b
12 changed files with 794 additions and 669 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
.claude/commands/workflow/ui-design/batch-generate.md
View File

@@ -47,48 +47,49 @@ ELSE:
bash(find .workflow -type d -name "design-*" -printf "%T@ %p\n" | sort -nr | head -1 | cut -d' ' -f2)
# Get variant counts
style_variants = --style-variants OR bash(ls {base_path}/style-consolidation/style-* -d | wc -l)
style_variants = --style-variants OR bash(ls {base_path}/style-extraction/style-* -d | wc -l)
layout_variants = --layout-variants OR 3
```
**Output**: `base_path`, `target_list[]`, `target_type`, `device_type`, `style_variants`, `layout_variants`
### Step 2: Detect Token Sources
### Step 2: Validate Design Tokens
```bash
# Check consolidated (priority 1) or proposed (priority 2)
bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "consolidated")
# OR
bash(test -f {base_path}/style-extraction/style-cards.json && echo "proposed")
# Check design tokens exist
bash(test -f {base_path}/style-extraction/style-1/design-tokens.json && echo "valid")
# If proposed: Create temp consolidation dirs + write tokens
FOR style_id IN 1..style_variants:
bash(mkdir -p {base_path}/style-consolidation/style-{style_id})
Write({base_path}/style-consolidation/style-{style_id}/design-tokens.json, proposed_tokens)
# Load design space analysis (optional)
IF exists({base_path}/style-extraction/design-space-analysis.json):
design_space_analysis = Read({base_path}/style-extraction/design-space-analysis.json)
# Load design space analysis (optional, from intermediates)
IF exists({base_path}/.intermediates/style-analysis/design-space-analysis.json):
design_space_analysis = Read({base_path}/.intermediates/style-analysis/design-space-analysis.json)
```
**Output**: `token_sources{}`, `consolidated_count`, `proposed_count`, `design_space_analysis`
**Output**: `design_tokens_valid`, `design_space_analysis`
### Step 3: Gather Layout Inspiration
### Step 3: Gather Layout Inspiration (Reuse or Create)
```bash
bash(mkdir -p {base_path}/prototypes/_inspirations)
# Check if layout inspirations already exist from layout-extract phase
inspiration_source = "{base_path}/.intermediates/layout-analysis/inspirations"
# For each target: Research via MCP
FOR target IN target_list:
search_query = "{target} {target_type} layout patterns variations"
mcp__exa__web_search_exa(query=search_query, numResults=5)
# Priority 1: Reuse existing inspiration from layout-extract
IF exists({inspiration_source}/{target}-layout-ideas.txt):
# Reuse existing inspiration (no action needed)
REPORT: "Using existing layout inspiration for {target}"
ELSE:
# Priority 2: Generate new inspiration via MCP
bash(mkdir -p {inspiration_source})
search_query = "{target} {target_type} layout patterns variations"
mcp__exa__web_search_exa(query=search_query, numResults=5)
# Extract context from prompt for this target
target_requirements = extract_relevant_context_from_prompt(prompt_text, target)
# Extract context from prompt for this target
target_requirements = extract_relevant_context_from_prompt(prompt_text, target)
# Write simple inspiration file
Write({base_path}/prototypes/_inspirations/{target}-layout-ideas.txt, inspiration_content)
# Write inspiration file to centralized location
Write({inspiration_source}/{target}-layout-ideas.txt, inspiration_content)
REPORT: "Created new layout inspiration for {target}"
```
**Output**: `T` inspiration text files
**Output**: `T` inspiration text files (reused or created in `.intermediates/layout-analysis/inspirations/`)
## Phase 2: Target-Style-Centric Batch Generation (Agent)
@@ -126,8 +127,8 @@ Task(ui-design-agent): `
${design_attributes ? "DESIGN_ATTRIBUTES: " + JSON.stringify(design_attributes) : ""}
## Reference
- Layout inspiration: Read("{base_path}/prototypes/_inspirations/{target}-layout-ideas.txt")
- Design tokens: Read("{base_path}/style-consolidation/style-{style_id}/design-tokens.json")
- Layout inspiration: Read("{base_path}/.intermediates/layout-analysis/inspirations/{target}-layout-ideas.txt")
- Design tokens: Read("{base_path}/style-extraction/style-{style_id}/design-tokens.json")
Parse ALL token values (colors, typography, spacing, borders, shadows, breakpoints)
${design_attributes ? "- Adapt DOM to: density, visual_weight, formality, organic_vs_geometric" : ""}
@@ -242,18 +243,19 @@ Quality:
- Style-aware: {design_space_analysis ? 'HTML adapts to design_attributes' : 'Standard structure'}
- CSS: Self-contained (direct token values, no var())
- Device-optimized: {device_type} layouts
- Tokens: {consolidated_count} consolidated, {proposed_count} proposed
{IF proposed_count > 0: ' 💡 For production: /workflow:ui-design:consolidate'}
- Tokens: Production-ready (WCAG AA compliant)
Generated Files:
{base_path}/prototypes/
├── _inspirations/ ({T} text files)
├── {target}-style-{s}-layout-{l}.html ({S×L×T} prototypes)
├── {target}-style-{s}-layout-{l}.css
├── compare.html (interactive matrix)
├── index.html (navigation)
└── PREVIEW.md (instructions)
Layout Inspirations:
{base_path}/.intermediates/layout-analysis/inspirations/ ({T} text files, reused or created)
Preview:
1. Open compare.html (recommended)
2. Open index.html
@@ -270,11 +272,10 @@ Next: /workflow:ui-design:update
bash(find .workflow -type d -name "design-*" -printf "%T@ %p\n" | sort -nr | head -1 | cut -d' ' -f2)
# Count style variants
bash(ls {base_path}/style-consolidation/style-* -d | wc -l)
bash(ls {base_path}/style-extraction/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")
# Check design tokens exist
bash(test -f {base_path}/style-extraction/style-1/design-tokens.json && echo "valid")
```
### Validation Commands
@@ -288,8 +289,11 @@ bash(test -f {base_path}/prototypes/compare.html && echo "exists")
### File Operations
```bash
# Create directories
bash(mkdir -p {base_path}/prototypes/_inspirations)
# Create prototypes directory
bash(mkdir -p {base_path}/prototypes)
# Create inspirations directory (if needed)
bash(mkdir -p {base_path}/.intermediates/layout-analysis/inspirations)
# Run preview script
bash(~/.claude/scripts/ui-generate-preview.sh "{base_path}/prototypes")
@@ -299,15 +303,17 @@ bash(~/.claude/scripts/ui-generate-preview.sh "{base_path}/prototypes")
```
{base_path}/
├── .intermediates/
│ └── layout-analysis/
│ └── inspirations/
│ └── {target}-layout-ideas.txt # Layout inspiration (reused or created)
├── prototypes/
│ ├── _inspirations/
│ │ └── {target}-layout-ideas.txt # Layout inspiration
│ ├── {target}-style-{s}-layout-{l}.html # Final prototypes
│ ├── {target}-style-{s}-layout-{l}.css
│ ├── compare.html
│ ├── index.html
│ └── PREVIEW.md
└── style-consolidation/
└── style-extraction/
└── style-{s}/
├── design-tokens.json
└── style-guide.md
@@ -317,8 +323,8 @@ bash(~/.claude/scripts/ui-generate-preview.sh "{base_path}/prototypes")
### Common Errors
```
ERROR: No token sources found
→ Run /workflow:ui-design:extract or /workflow:ui-design:consolidate
ERROR: No design tokens found
→ Run /workflow:ui-design:style-extract first
ERROR: No targets extracted from prompt
→ Use --targets explicitly or rephrase prompt
@@ -364,9 +370,14 @@ ERROR: Script permission denied
## Integration
**Input**: Prompt, design-tokens.json, design-space-analysis.json (optional)
**Input**:
- Required: Prompt, design-tokens.json
- Optional: design-space-analysis.json (from `.intermediates/style-analysis/`)
- Reuses: Layout inspirations from `.intermediates/layout-analysis/inspirations/` (if available from layout-extract)
**Output**: S×L×T prototypes for `/workflow:ui-design:update`
**Compatible**: extract, consolidate, explore-auto, imitate-auto outputs
**Compatible**: style-extract, explore-auto, imitate-auto outputs
**Optimization**: Reuses layout inspirations from layout-extract phase, avoiding duplicate MCP searches
## Usage Examples

267
.claude/commands/workflow/ui-design/consolidate.md
View File

@@ -1,267 +0,0 @@
---
name: consolidate
description: Consolidate style variants into independent design systems and plan layout strategies
argument-hint: /workflow:ui-design:consolidate [--base-path <path>] [--session <id>] [--variants <count>] [--layout-variants <count>]
allowed-tools: TodoWrite(*), Read(*), Write(*), Bash(*), Task(*)
---
# Design System Consolidation Command
## Overview
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
- **Agent-Driven**: Uses ui-design-agent for N variant generation
- **Token Refinement**: Transforms proposed_tokens into complete systems
- **Production-Ready**: design-tokens.json + style-guide.md per variant
- **Matrix-Ready**: Provides style variants for generate phase
## Phase 1: Setup & Validation
### Step 1: Resolve Base Path & Load Style Cards
```bash
# Determine base path
bash(find .workflow -type d -name "design-*" | head -1) # Auto-detect
# OR use --base-path / --session parameters
# Load style cards
bash(cat {base_path}/style-extraction/style-cards.json)
```
### Step 2: Memory Check (Skip if Already Done)
```bash
# Check if already consolidated
bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "exists")
```
**If exists**: Skip to completion message
### Step 3: Select Variants
```bash
# Determine variant count (default: all from style-cards.json)
bash(cat style-cards.json | grep -c "\"id\": \"variant-")
# Validate variant count
# Priority: --variants parameter → total_variants from style-cards.json
```
**Output**: `variants_count`, `selected_variants[]`
### Step 4: Load Design Context (Optional)
```bash
# Load brainstorming context
bash(test -f {base_path}/.brainstorming/synthesis-specification.md && cat it)
# Load design space analysis
bash(test -f {base_path}/style-extraction/design-space-analysis.json && cat it)
```
**Output**: `design_context`, `design_space_analysis`
## Phase 2: Design System Synthesis (Agent)
**Executor**: `Task(ui-design-agent)` for all variants
### Step 1: Create Output Directories
```bash
bash(mkdir -p {base_path}/style-consolidation/style-{{1..{variants_count}}})
```
### Step 2: Launch Agent Task
For all variants (1 to {variants_count}):
```javascript
Task(ui-design-agent): `
[DESIGN_TOKEN_GENERATION_TASK]
Generate {variants_count} independent design systems using philosophy-driven refinement
SESSION: {session_id} | MODE: Philosophy-driven refinement | BASE_PATH: {base_path}
CRITICAL PATH: Use loop index (N) for directories: style-1/, style-2/, ..., style-N/
VARIANT DATA:
{FOR each variant with index N:
VARIANT INDEX: {N} | ID: {variant.id} | NAME: {variant.name}
Design Philosophy: {variant.design_philosophy}
Proposed Tokens: {variant.proposed_tokens}
{IF design_space_analysis: Design Attributes: {attributes}, Anti-keywords: {anti_keywords}}
}
## 参考
- Style cards: Each variant's proposed_tokens and design_philosophy
- Design space analysis: design_attributes (saturation, weight, formality, organic/geometric, innovation, density)
- Anti-keywords: Explicit constraints to avoid
- WCAG AA: 4.5:1 text, 3:1 UI (use built-in AI knowledge)
## 生成
For EACH variant (use loop index N for paths):
1. {base_path}/style-consolidation/style-{N}/design-tokens.json
- Complete token structure: colors, typography, spacing, border_radius, shadows, breakpoints
- All colors in OKLCH format
- Apply design_attributes to token values (saturation→chroma, density→spacing, etc.)
2. {base_path}/style-consolidation/style-{N}/style-guide.md
- Expanded design philosophy
- Complete color system with accessibility notes
- Typography documentation
- Usage guidelines
## 注意
- ✅ Use Write() tool immediately for each file
- ✅ Use loop index N for directory names: style-1/, style-2/, etc.
- ❌ DO NOT use variant.id in paths (metadata only)
- ❌ NO external research or MCP calls (pure AI refinement)
- Apply philosophy-driven refinement: design_attributes guide token values
- Maintain divergence: Use anti_keywords to prevent variant convergence
- Complete each variant's files before moving to next variant
`
```
**Output**: Agent generates `variants_count × 2` files
## Phase 3: Verify Output
### Step 1: Check Files Created
```bash
# Verify all design systems created
bash(ls {base_path}/style-consolidation/style-*/design-tokens.json | wc -l)
# Validate structure
bash(cat {base_path}/style-consolidation/style-1/design-tokens.json | grep -q "colors" && echo "valid")
```
### Step 2: Verify File Sizes
```bash
bash(ls -lh {base_path}/style-consolidation/style-1/)
```
**Output**: `variants_count × 2` files verified
## Completion
### Todo Update
```javascript
TodoWrite({todos: [
{content: "Setup and load style cards", status: "completed", activeForm: "Loading style cards"},
{content: "Select variants and load context", status: "completed", activeForm: "Loading context"},
{content: "Generate design systems (agent)", status: "completed", activeForm: "Generating systems"},
{content: "Verify output files", status: "completed", activeForm: "Verifying files"}
]});
```
### Output Message
```
✅ Design system consolidation complete!
Configuration:
- Session: {session_id}
- Variants: {variants_count}
- Philosophy-driven refinement (zero MCP calls)
Generated Files:
{base_path}/style-consolidation/
├── style-1/ (design-tokens.json, style-guide.md)
├── style-2/ (same structure)
└── style-{variants_count}/ (same structure)
Next: /workflow:ui-design:generate --session {session_id} --style-variants {variants_count} --targets "dashboard,auth"
```
## Simple Bash Commands
### Path Operations
```bash
# Find design directory
bash(find .workflow -type d -name "design-*" | head -1)
# Load style cards
bash(cat {base_path}/style-extraction/style-cards.json)
# Count variants
bash(cat style-cards.json | grep -c "\"id\": \"variant-")
```
### Validation Commands
```bash
# Check if already consolidated
bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "exists")
# Verify output
bash(ls {base_path}/style-consolidation/style-*/design-tokens.json | wc -l)
# Validate structure
bash(cat design-tokens.json | grep -q "colors" && echo "valid")
```
### File Operations
```bash
# Create directories
bash(mkdir -p {base_path}/style-consolidation/style-{{1..3}})
# Check file sizes
bash(ls -lh {base_path}/style-consolidation/style-1/)
```
## Output Structure
```
{base_path}/
└── style-consolidation/
├── style-1/
│ ├── design-tokens.json
│ └── style-guide.md
├── style-2/
│ ├── design-tokens.json
│ └── style-guide.md
└── style-N/ (same structure)
```
## design-tokens.json Format
```json
{
"colors": {
"brand": {"primary": "oklch(...)", "secondary": "oklch(...)", "accent": "oklch(...)"},
"surface": {"background": "oklch(...)", "elevated": "oklch(...)", "overlay": "oklch(...)"},
"semantic": {"success": "oklch(...)", "warning": "oklch(...)", "error": "oklch(...)", "info": "oklch(...)"},
"text": {"primary": "oklch(...)", "secondary": "oklch(...)", "tertiary": "oklch(...)", "inverse": "oklch(...)"},
"border": {"default": "oklch(...)", "strong": "oklch(...)", "subtle": "oklch(...)"}
},
"typography": {"font_family": {...}, "font_size": {...}, "font_weight": {...}, "line_height": {...}, "letter_spacing": {...}},
"spacing": {"0": "0", "1": "0.25rem", ..., "24": "6rem"},
"border_radius": {"none": "0", "sm": "0.25rem", ..., "full": "9999px"},
"shadows": {"sm": "...", "md": "...", "lg": "...", "xl": "..."},
"breakpoints": {"sm": "640px", ..., "2xl": "1536px"}
}
```
**Requirements**: OKLCH colors, complete coverage, semantic naming
## Error Handling
### Common Errors
```
ERROR: No style cards found
→ Run /workflow:ui-design:style-extract first
ERROR: Invalid variant count
→ List available count, auto-select all
ERROR: Agent file creation failed
→ Check agent output, verify Write() operations
```
## Key Features
- **Philosophy-Driven Refinement** - Pure AI token refinement using design_attributes
- **Agent-Driven** - Uses ui-design-agent for multi-file generation
- **Separate Design Systems** - N independent systems (one per variant)
- **Production-Ready** - WCAG AA compliant, OKLCH colors, semantic naming
- **Zero MCP Calls** - Faster execution, better divergence preservation
## Integration
**Input**: `style-cards.json` from `/workflow:ui-design:style-extract`
**Output**: `style-consolidation/style-{N}/` for each variant
**Next**: `/workflow:ui-design:generate --style-variants N`
**Note**: After consolidate, use `/workflow:ui-design:layout-extract` to generate layout templates before running generate.

44
.claude/commands/workflow/ui-design/explore-auto.md
View File

@@ -20,11 +20,10 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
1. User triggers: `/workflow:ui-design:explore-auto [params]`
2. Phase 0c: Target confirmation → User confirms → **IMMEDIATELY triggers Phase 1**
3. Phase 1 (style-extract) → **WAIT for completion** → Auto-continues
4. Phase 2 (style-consolidate) → **WAIT for completion** → Auto-continues
5. Phase 2.5 (layout-extract) → **WAIT for completion** → Auto-continues
6. **Phase 3 (ui-assembly)** → **WAIT for completion** → Auto-continues
7. Phase 4 (design-update) → **WAIT for completion** → Auto-continues
8. Phase 5 (batch-plan, optional) → Reports completion
4. Phase 2 (layout-extract) → **WAIT for completion** → Auto-continues
5. **Phase 3 (ui-assembly)** → **WAIT for completion** → Auto-continues
6. Phase 4 (design-update) → **WAIT for completion** → Auto-continues
7. Phase 5 (batch-plan, optional) → Reports completion
**Phase Transition Mechanism**:
- **Phase 0c (User Interaction)**: User confirms targets → IMMEDIATELY triggers Phase 1
@@ -91,8 +90,8 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
**Matrix Mode** (style-centric):
- Generates `style_variants × layout_variants × targets` prototypes
- **Phase 1**: `style_variants` style options with design_attributes (extract)
- **Phase 2**: `style_variants` independent design systems (consolidate)
- **Phase 1**: `style_variants` complete design systems (extract)
- **Phase 2**: Layout templates extraction (layout-extract)
- **Phase 3**: Style-centric batch generation (generate)
- Sub-phase 1: `targets × layout_variants` target-specific layout plans
- **Sub-phase 2**: `S` style-centric agents (each handles `L×T` combinations)
@@ -280,18 +279,7 @@ SlashCommand(command)
# Upon completion, IMMEDIATELY execute Phase 2 (auto-continue)
```
### Phase 2: Style Consolidation
```bash
command = "/workflow:ui-design:consolidate --base-path \"{base_path}\" " +
"--variants {style_variants}"
SlashCommand(command)
# Output: {style_variants} independent design systems with tokens.css
# SlashCommand blocks until phase complete
# Upon completion, IMMEDIATELY execute Phase 2.5 (auto-continue)
```
### Phase 2.5: Layout Extraction
### Phase 2: Layout Extraction
```bash
targets_string = ",".join(inferred_target_list)
command = "/workflow:ui-design:layout-extract --base-path \"{base_path}\" " +
@@ -360,7 +348,6 @@ IF --batch-plan:
// Initialize IMMEDIATELY after Phase 0c user confirmation to track multi-phase execution
TodoWrite({todos: [
{"content": "Execute style extraction", "status": "in_progress", "activeForm": "Executing..."},
{"content": "Execute style consolidation", "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..."}
@@ -442,9 +429,8 @@ Architecture: Style-Centric Batch Generation
Run ID: {run_id} | Session: {session_id or "standalone"}
Type: {icon} {target_type} | Device: {device_type} | Matrix: {s}×{l}×{n} = {total} prototypes
Phase 1: {s} style variants with design_attributes (style-extract)
Phase 2: {s} design systems with tokens.css (consolidate)
Phase 2.5: {n×l} layout templates (layout-extract explore mode)
Phase 1: {s} complete design systems (style-extract)
Phase 2: {n×l} layout templates (layout-extract explore mode)
- Device: {device_type} layouts
- {n} targets × {l} layout variants = {n×l} structural templates
Phase 3: UI Assembly (generate)
@@ -466,11 +452,13 @@ Design Quality:
✅ Device-Optimized: Layouts designed for {device_type}
📂 {base_path}/
├── style-extraction/ ({s} style cards + design-space-analysis.json)
├── style-consolidation/ ({s} design systems with tokens.css)
├── layout-extraction/ ({n×l} layout templates + layout-space-analysis.json)
├── prototypes/ ({total} assembled prototypes)
└── .run-metadata.json (includes device type)
├── .intermediates/ (Intermediate analysis files)
│ ├── style-analysis/ (computed-styles.json, design-space-analysis.json)
│ └── layout-analysis/ (dom-structure-*.json, inspirations/*.txt)
├── style-extraction/ ({s} complete design systems)
├── layout-extraction/ ({n×l} layout templates + layout-space-analysis.json)
├── prototypes/ ({total} assembled prototypes)
└── .run-metadata.json (includes device type)
🌐 Preview: {base_path}/prototypes/compare.html
- Interactive {s}×{l} matrix view

26
.claude/commands/workflow/ui-design/generate.md
View File

@@ -18,8 +18,7 @@ Pure assembler that combines pre-extracted layout templates with design tokens t
- **Automatic Image Reference**: If source images exist in layout templates, they're automatically used for visual context
**Prerequisite Commands**:
- `/workflow:ui-design:style-extract` → Style tokens
- `/workflow:ui-design:consolidate` → Final design tokens
- `/workflow:ui-design:style-extract` → Complete design systems (design-tokens.json + style-guide.md)
- `/workflow:ui-design:layout-extract` → Layout structure
## Phase 1: Setup & Validation
@@ -30,7 +29,7 @@ Pure assembler that combines pre-extracted layout templates with design tokens t
bash(find .workflow -type d -name "design-*" | head -1) # Auto-detect
# Get style count
bash(ls {base_path}/style-consolidation/style-* -d | wc -l)
bash(ls {base_path}/style-extraction/style-* -d | wc -l)
# Image reference auto-detected from layout template source_image_path
```
@@ -50,10 +49,10 @@ Read({base_path}/layout-extraction/layout-templates.json)
### 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-extraction/style-1/design-tokens.json && echo "valid")
# For each style variant: Load design tokens
Read({base_path}/style-consolidation/style-{id}/design-tokens.json)
Read({base_path}/style-extraction/style-{id}/design-tokens.json)
```
**Output**: `design_tokens[]` for all style variants
@@ -84,7 +83,7 @@ Task(ui-design-agent): `
Extract: dom_structure, css_layout_rules, device_type, source_image_path
2. Design Tokens:
Read("{base_path}/style-consolidation/style-{style_id}/design-tokens.json")
Read("{base_path}/style-extraction/style-{style_id}/design-tokens.json")
Extract: ALL token values (colors, typography, spacing, borders, shadows, breakpoints)
3. Reference Image (AUTO-DETECTED):
@@ -192,7 +191,7 @@ Assembly Process:
Quality:
- Structure: From layout-extract (DOM, CSS layout rules)
- Style: From consolidate (design tokens)
- Style: From style-extract (design tokens)
- CSS: Token values directly applied (var() replaced)
- Device-optimized: Layouts match device_type from templates
@@ -222,7 +221,7 @@ Next: /workflow:ui-design:update
bash(find .workflow -type d -name "design-*" | head -1)
# Count style variants
bash(ls {base_path}/style-consolidation/style-* -d | wc -l)
bash(ls {base_path}/style-extraction/style-* -d | wc -l)
```
### Validation Commands
@@ -231,7 +230,7 @@ bash(ls {base_path}/style-consolidation/style-* -d | wc -l)
bash(test -f {base_path}/layout-extraction/layout-templates.json && echo "exists")
# Check design tokens exist
bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "valid")
bash(test -f {base_path}/style-extraction/style-1/design-tokens.json && echo "valid")
# Count generated files
bash(ls {base_path}/prototypes/{target}-style-*-layout-*.html | wc -l)
@@ -255,9 +254,9 @@ bash(~/.claude/scripts/ui-generate-preview.sh "{base_path}/prototypes")
{base_path}/
├── layout-extraction/
│ └── layout-templates.json # Input (from layout-extract)
├── style-consolidation/
├── style-extraction/
│ └── style-{s}/
│ ├── design-tokens.json # Input (from consolidate)
│ ├── design-tokens.json # Input (from style-extract)
│ └── style-guide.md
└── prototypes/
├── {target}-style-{s}-layout-{l}.html # Assembled prototypes
@@ -275,7 +274,7 @@ ERROR: Layout templates not found
→ Run /workflow:ui-design:layout-extract first
ERROR: Design tokens not found
→ Run /workflow:ui-design:consolidate first
→ Run /workflow:ui-design:style-extract first
ERROR: Agent assembly failed
→ Check inputs exist, validate JSON structure
@@ -311,8 +310,7 @@ ERROR: Script permission denied
## Integration
**Prerequisites**:
- `/workflow:ui-design:style-extract` → `style-cards.json`
- `/workflow:ui-design:consolidate` → `design-tokens.json`
- `/workflow:ui-design:style-extract` → `design-tokens.json` + `style-guide.md`
- `/workflow:ui-design:layout-extract` → `layout-templates.json`
**Input**: `layout-templates.json` + `design-tokens.json`

264
.claude/commands/workflow/ui-design/imitate-auto.md
View File

@@ -1,7 +1,7 @@
---
name: imitate-auto
description: High-speed multi-page UI replication with batch screenshot and optional token refinement
argument-hint: --url-map "<map>" [--capture-mode <batch|deep>] [--depth <1-5>] [--session <id>] [--refine-tokens] [--prompt "<desc>"]
description: High-speed multi-page UI replication with batch screenshot capture
argument-hint: --url-map "<map>" [--capture-mode <batch|deep>] [--depth <1-5>] [--session <id>] [--prompt "<desc>"]
allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Write(*), Bash(*)
---
@@ -19,11 +19,10 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Write(*), Bash(*)
1. User triggers: `/workflow:ui-design:imitate-auto --url-map "..."`
2. Phase 0: Initialize and parse parameters
3. Phase 1: Screenshot capture (batch or deep mode) → **WAIT for completion** → Auto-continues
4. Phase 2: Style extraction (visual tokens) → **WAIT for completion** → Auto-continues
4. Phase 2: Style extraction (complete design systems) → **WAIT for completion** → Auto-continues
5. Phase 2.5: Layout extraction (structure templates) → **WAIT for completion** → Auto-continues
6. Phase 3: Token processing (conditional consolidate) → **WAIT for completion** → Auto-continues
7. Phase 4: Batch UI assembly → **WAIT for completion** → Auto-continues
8. Phase 5: Design system integration → Reports completion
6. Phase 3: Batch UI assembly → **WAIT for completion** → Auto-continues
7. Phase 4: Design system integration → Reports completion
**Phase Transition Mechanism**:
- `SlashCommand` is BLOCKING - execution pauses until completion
@@ -67,13 +66,10 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Write(*), Bash(*)
- Enable automatic design system integration (Phase 5)
- If not provided: standalone mode (`.workflow/.design/`)
- `--refine-tokens` (Optional, default: false): Enable full token refinement
- `false` (default): Fast path, skip consolidate (~30-60s faster)
- `true`: Production quality, execute full consolidate (philosophy-driven refinement)
- `--prompt "<desc>"` (Optional): Style extraction guidance
- Influences extract command analysis focus
- Example: `"Focus on dark mode"`, `"Emphasize minimalist design"`
- **Note**: Design systems are now production-ready by default (no separate consolidate step)
## Execution Modes
@@ -86,14 +82,11 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Write(*), Bash(*)
- Captures page layers at different depths (1-5)
- Only processes first URL from url-map
**Token Processing Modes**:
- **Fast-Track** (default): Skip consolidate, use proposed tokens directly (~2s)
- Best for rapid prototyping and testing
- Tokens may lack philosophy-driven refinement
- **Production** (--refine-tokens): Full consolidate with WCAG validation (~60s)
- Philosophy-driven token refinement
- Complete accessibility validation
- Production-ready design system
**Token Processing**:
- **Direct Generation**: Complete design systems generated in style-extract phase
- Production-ready design-tokens.json with WCAG compliance
- Complete style-guide.md documentation
- No separate consolidation step required (~30-60s faster)
**Session Integration**:
- `--session` flag determines session integration or standalone execution
@@ -163,7 +156,6 @@ FOR pair IN split(url_map_string, ","):
VALIDATE: len(target_names) > 0, "url-map must contain at least one target:url pair"
primary_target = target_names[0] # First target as primary style source
refine_tokens_mode = --refine-tokens OR false
# Parse capture mode
capture_mode = --capture-mode OR "batch"
@@ -198,7 +190,6 @@ metadata = {
"url_map": url_map,
"capture_mode": capture_mode,
"depth": depth IF capture_mode == "deep" ELSE null,
"refine_tokens": refine_tokens_mode,
"prompt": --prompt OR null
},
"targets": target_names,
@@ -217,7 +208,6 @@ ELSE:
REPORT: " Targets: {len(target_names)} pages"
REPORT: " Primary source: '{primary_target}' ({url_map[primary_target]})"
REPORT: " All targets: {', '.join(target_names)}"
REPORT: " Token refinement: {refine_tokens_mode ? 'Enabled (production quality)' : 'Disabled (fast-track)'}"
IF --prompt:
REPORT: " Prompt guidance: \"{--prompt}\""
REPORT: ""
@@ -226,9 +216,8 @@ REPORT: ""
TodoWrite({todos: [
{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: "Extract style (visual tokens)", status: "pending", activeForm: "Extracting style"},
{content: "Extract style (complete design systems)", 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: 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"}
]})
@@ -370,31 +359,31 @@ CATCH error:
ERROR: "Cannot proceed without visual tokens"
EXIT 1
# style-extract outputs to: {base_path}/style-extraction/style-cards.json
# style-extract outputs to: {base_path}/style-extraction/style-1/design-tokens.json
# Verify extraction results
style_cards_path = "{base_path}/style-extraction/style-cards.json"
design_tokens_path = "{base_path}/style-extraction/style-1/design-tokens.json"
style_guide_path = "{base_path}/style-extraction/style-1/style-guide.md"
IF NOT exists(style_cards_path):
ERROR: "style-extract command did not generate style-cards.json"
ERROR: "Expected: {style_cards_path}"
IF NOT exists(design_tokens_path):
ERROR: "style-extract command did not generate design-tokens.json"
ERROR: "Expected: {design_tokens_path}"
EXIT 1
style_cards = Read(style_cards_path)
IF len(style_cards.style_cards) != 1:
ERROR: "Expected single variant in imitate mode, got {len(style_cards.style_cards)}"
IF NOT exists(style_guide_path):
ERROR: "style-extract command did not generate style-guide.md"
ERROR: "Expected: {style_guide_path}"
EXIT 1
extracted_style = style_cards.style_cards[0]
design_tokens = Read(design_tokens_path)
REPORT: ""
REPORT: "✅ Phase 2 complete:"
REPORT: " Style: '{extracted_style.name}'"
REPORT: " Philosophy: {extracted_style.design_philosophy}"
REPORT: " Tokens: {count_tokens(extracted_style.proposed_tokens)} visual tokens"
REPORT: " Output: style-extraction/style-1/"
REPORT: " Files: design-tokens.json, style-guide.md"
REPORT: " Quality: Production-ready (WCAG AA)"
TodoWrite(mark_completed: "Extract style (visual tokens)",
TodoWrite(mark_completed: "Extract style (complete design systems)",
mark_in_progress: "Extract layout (structure templates)")
```
@@ -444,125 +433,20 @@ 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")
```
### Phase 3: Token Processing (Conditional Consolidate)
```bash
REPORT: ""
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
REPORT: "🚀 Phase 3: Token Processing"
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
IF refine_tokens_mode:
# Path A: Full consolidate (production quality)
REPORT: "🔧 Using full consolidate for production-ready tokens"
REPORT: " Benefits:"
REPORT: " • Philosophy-driven token refinement"
REPORT: " • WCAG AA accessibility validation"
REPORT: " • Complete design system documentation"
REPORT: " • Token gap filling and consistency checks"
REPORT: ""
consolidate_command = f"/workflow:ui-design:consolidate --base-path \"{base_path}\" --variants 1"
REPORT: f"Calling consolidate command..."
TRY:
SlashCommand(consolidate_command)
CATCH error:
ERROR: "Token consolidation failed: {error}"
ERROR: "Cannot proceed without refined tokens"
EXIT 1
# consolidate outputs to: {base_path}/style-consolidation/style-1/design-tokens.json
tokens_path = "{base_path}/style-consolidation/style-1/design-tokens.json"
IF NOT exists(tokens_path):
ERROR: "consolidate command did not generate design-tokens.json"
ERROR: "Expected: {tokens_path}"
EXIT 1
REPORT: ""
REPORT: "✅ Full consolidate complete"
REPORT: " Output: style-consolidation/style-1/"
REPORT: " Quality: Production-ready"
token_quality = "production-ready (consolidated)"
time_spent_estimate = "~60s"
ELSE:
# Path B: Fast Token Adaptation
REPORT: "⚡ Fast token adaptation (skipping consolidate for speed)"
REPORT: " Note: Using proposed tokens from extraction phase"
REPORT: " For production quality, re-run with --refine-tokens flag"
REPORT: ""
# Directly copy proposed_tokens to consolidation directory
style_cards = Read("{base_path}/style-extraction/style-cards.json")
proposed_tokens = style_cards.style_cards[0].proposed_tokens
# Create directory and write tokens
consolidation_dir = "{base_path}/style-consolidation/style-1"
Bash(mkdir -p "{consolidation_dir}")
tokens_path = f"{consolidation_dir}/design-tokens.json"
Write(tokens_path, JSON.stringify(proposed_tokens, null, 2))
# Create simplified style guide
variant = style_cards.style_cards[0]
simple_guide = f"""# Design System: {variant.name}
## Design Philosophy
{variant.design_philosophy}
## Description
{variant.description}
## Design Tokens
All tokens in `design-tokens.json` follow OKLCH color space.
**Note**: Generated in fast-track imitate mode using proposed tokens from extraction.
For production-ready quality with philosophy-driven refinement, re-run with `--refine-tokens` flag.
## Color Preview
- Primary: {variant.preview.primary if variant.preview else "N/A"}
- Background: {variant.preview.background if variant.preview else "N/A"}
## Typography Preview
- Heading Font: {variant.preview.font_heading if variant.preview else "N/A"}
## Token Categories
{list_token_categories(proposed_tokens)}
"""
Write(f"{consolidation_dir}/style-guide.md", simple_guide)
REPORT: "✅ Fast adaptation complete (~2s vs ~60s with consolidate)"
REPORT: " Output: style-consolidation/style-1/"
REPORT: " Quality: Proposed (not refined)"
REPORT: " Time saved: ~30-60s"
token_quality = "proposed (fast-track)"
time_spent_estimate = "~2s"
REPORT: ""
REPORT: "Token processing summary:"
REPORT: " Path: {refine_tokens_mode ? 'Full consolidate' : 'Fast adaptation'}"
REPORT: " Quality: {token_quality}"
REPORT: " Time: {time_spent_estimate}"
TodoWrite(mark_completed: refine_tokens_mode ? "Refine design tokens via consolidate" : "Fast token adaptation",
mark_in_progress: f"Assemble UI for {len(target_names)} targets")
```
### Phase 4: Batch UI Assembly
### Phase 3: Batch UI Assembly
```bash
REPORT: ""
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
REPORT: "🚀 Phase 4: Batch UI Assembly"
REPORT: "🚀 Phase 3: Batch UI Assembly"
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
# Note: design-tokens.json already generated in Phase 2 (style-extract)
# Located at: {base_path}/style-extraction/style-1/design-tokens.json
# Build targets string
targets_string = ",".join(target_names)
@@ -602,12 +486,12 @@ TodoWrite(mark_completed: f"Assemble UI for {len(target_names)} targets",
mark_in_progress: session_id ? "Integrate design system" : "Standalone completion")
```
### Phase 5: Design System Integration
### Phase 4: Design System Integration
```bash
REPORT: ""
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
REPORT: "🚀 Phase 5: Design System Integration"
REPORT: "🚀 Phase 4: Design System Integration"
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
IF session_id:
@@ -636,9 +520,8 @@ metadata.status = "completed"
metadata.completion_time = current_timestamp()
metadata.outputs = {
"screenshots": f"{base_path}/screenshots/",
"style_system": f"{base_path}/style-consolidation/style-1/",
"style_system": f"{base_path}/style-extraction/style-1/",
"prototypes": f"{base_path}/prototypes/",
"token_quality": token_quality,
"captured_count": captured_count,
"generated_count": generated_count
}
@@ -650,9 +533,9 @@ TodoWrite(mark_completed: session_id ? "Integrate design system" : "Standalone c
TodoWrite({todos: [
{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: "completed", activeForm: "Capturing"},
{content: "Extract unified design system", status: "completed", activeForm: "Extracting"},
{content: refine_tokens_mode ? "Refine design tokens via consolidate" : "Fast token adaptation", status: "completed", activeForm: "Processing"},
{content: f"Generate UI for {len(target_names)} targets", status: "completed", activeForm: "Generating"},
{content: "Extract style (complete design systems)", status: "completed", activeForm: "Extracting"},
{content: "Extract layout (structure templates)", status: "completed", activeForm: "Extracting layout"},
{content: f"Assemble UI for {len(target_names)} targets", status: "completed", activeForm: "Assembling"},
{content: session_id ? "Integrate design system" : "Standalone completion", status: "completed", activeForm: "Completing"}
]})
```
@@ -674,24 +557,18 @@ Run ID: {run_id}
Phase 1 - Screenshot Capture: ✅ {IF capture_mode == "batch": f"{captured_count}/{total_requested} screenshots" ELSE: f"{captured_count} screenshots ({total_layers} layers)"}
{IF capture_mode == "batch" AND captured_count < total_requested: f"⚠️ {total_requested - captured_count} missing" ELSE: "All targets captured"}
Phase 2 - Style Extraction: ✅ Single unified design system
Style: {extracted_style.name}
Philosophy: {extracted_style.design_philosophy[:80]}...
Phase 2 - Style Extraction: ✅ Production-ready design systems
Output: style-extraction/style-1/ (design-tokens.json + style-guide.md)
Quality: WCAG AA compliant, OKLCH colors
Phase 3 - Token Processing: ✅ {token_quality}
{IF refine_tokens_mode:
"Full consolidate (~60s)"
"Quality: Production-ready with philosophy-driven refinement"
ELSE:
"Fast adaptation (~2s, saved ~30-60s)"
"Quality: Proposed tokens (for production, use --refine-tokens)"
}
Phase 2.5 - Layout Extraction: ✅ Structure templates
Templates: {template_count} layout structures
Phase 4 - UI Generation: ✅ {generated_count} pages generated
Phase 3 - UI Assembly: ✅ {generated_count} pages assembled
Targets: {', '.join(target_names)}
Configuration: 1 style × 1 layout × {generated_count} pages
Phase 5 - Integration: {IF session_id: "✅ Integrated into session" ELSE: "⏭️ Standalone mode"}
Phase 4 - Integration: {IF session_id: "✅ Integrated into session" ELSE: "⏭️ Standalone mode"}
━━━ 📂 Output Structure ━━━
@@ -710,12 +587,12 @@ ELSE:
│ │ └── {layers}.png
│ └── layer-map.json
}
├── style-extraction/ # Design analysis
│ └── style-cards.json
├── style-consolidation/ # {token_quality}
├── style-extraction/ # Production-ready design systems
│ └── style-1/
│ ├── design-tokens.json
│ └── style-guide.md
├── layout-extraction/ # Structure templates
│ └── layout-templates.json
└── prototypes/ # {generated_count} HTML/CSS files
├── {target1}-style-1-layout-1.html + .css
├── {target2}-style-1-layout-1.html + .css
@@ -750,13 +627,6 @@ ELSE:
3. Explore prototypes in {base_path}/prototypes/ directory
}
{IF NOT refine_tokens_mode:
💡 Production Quality Tip:
Fast-track mode used proposed tokens for speed.
For production-ready quality with full token refinement:
/workflow:ui-design:imitate-auto --url-map "{url_map_command_string}" --refine-tokens {f"--session {session_id}" if session_id else ""}
}
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
```
@@ -767,9 +637,9 @@ ELSE:
TodoWrite({todos: [
{content: "Initialize and parse url-map", status: "in_progress", activeForm: "Initializing"},
{content: "Batch screenshot capture", status: "pending", activeForm: "Capturing screenshots"},
{content: "Extract unified design system", status: "pending", activeForm: "Extracting style"},
{content: refine_tokens ? "Refine tokens via consolidate" : "Fast token adaptation", status: "pending", activeForm: "Processing tokens"},
{content: "Generate UI for all targets", status: "pending", activeForm: "Generating UI"},
{content: "Extract style (complete design systems)", status: "pending", activeForm: "Extracting style"},
{content: "Extract layout (structure templates)", status: "pending", activeForm: "Extracting layout"},
{content: "Assemble UI for all targets", status: "pending", activeForm: "Assembling UI"},
{content: "Integrate design system", status: "pending", activeForm: "Integrating"}
]})
@@ -818,7 +688,7 @@ TodoWrite({todos: [
## Key Features
- **🚀 Dual Capture**: Batch mode for speed, deep mode for detail
- **⚡ Fast-Track Option**: Skip consolidate for 30-60s time savings
- **⚡ Production-Ready**: Complete design systems generated directly (~30-60s faster)
- **🎨 High-Fidelity**: Single unified design system from primary target
- **📦 Autonomous**: No user intervention required between phases
- **🔄 Reproducible**: Deterministic flow with isolated run directories
@@ -832,10 +702,10 @@ TodoWrite({todos: [
# Result: 2 prototypes with fast-track tokens
```
### 2. Production-Ready with Session
### 2. Session Integration
```bash
/workflow:ui-design:imitate-auto --session WFS-payment --url-map "pricing:https://stripe.com/pricing" --refine-tokens
# Result: 1 prototype with production tokens, integrated into session
/workflow:ui-design:imitate-auto --session WFS-payment --url-map "pricing:https://stripe.com/pricing"
# Result: 1 prototype with production-ready design system, integrated into session
```
### 3. Deep Exploration Mode
@@ -852,16 +722,16 @@ TodoWrite({todos: [
## Integration Points
- **Input**: `--url-map` (multiple target:url pairs) + optional `--capture-mode`, `--depth`, `--session`, `--refine-tokens`, `--prompt`
- **Output**: Complete design system in `{base_path}/` (screenshots, style-extraction, style-consolidation, prototypes)
- **Input**: `--url-map` (multiple target:url pairs) + optional `--capture-mode`, `--depth`, `--session`, `--prompt`
- **Output**: Complete design system in `{base_path}/` (screenshots, style-extraction, layout-extraction, prototypes)
- **Sub-commands Called**:
1. Phase 1 (conditional):
- `--capture-mode batch`: `/workflow:ui-design:capture` (multi-URL batch)
- `--capture-mode deep`: `/workflow:ui-design:explore-layers` (single-URL depth exploration)
2. `/workflow:ui-design:extract` (Phase 2)
3. `/workflow:ui-design:consolidate` (Phase 3, conditional)
4. `/workflow:ui-design:generate` (Phase 4)
5. `/workflow:ui-design:update` (Phase 5, if --session)
2. `/workflow:ui-design:style-extract` (Phase 2 - complete design systems)
3. `/workflow:ui-design:layout-extract` (Phase 2.5 - structure templates)
4. `/workflow:ui-design:generate` (Phase 3 - pure assembly)
5. `/workflow:ui-design:update` (Phase 4, if --session)
## Completion Output
@@ -872,20 +742,20 @@ Mode: {capture_mode} | Session: {session_id or "standalone"}
Run ID: {run_id}
Phase 1 - Screenshot Capture: ✅ {captured_count} screenshots
Phase 2 - Style Extraction: ✅ Single unified design system
Phase 3 - Token Processing: ✅ {token_quality}
Phase 4 - UI Generation: ✅ {generated_count} pages generated
Phase 5 - Integration: {IF session_id: "✅ Integrated" ELSE: "⏭️ Standalone"}
Phase 2 - Style Extraction: ✅ Production-ready design systems
Phase 2.5 - Layout Extraction: ✅ Structure templates
Phase 3 - UI Assembly: ✅ {generated_count} pages assembled
Phase 4 - Integration: {IF session_id: "✅ Integrated" ELSE: "⏭️ Standalone"}
Design Quality:
✅ High-Fidelity Replication: Accurate style from primary target
✅ Token-Driven Styling: 100% var() usage
✅ {IF refine_tokens: "Production-Ready: WCAG validated" ELSE: "Fast-Track: Proposed tokens"}
✅ Production-Ready: WCAG AA compliant, OKLCH colors
📂 {base_path}/
├── screenshots/ # {captured_count} screenshots
├── style-extraction/ # Design analysis
├── style-consolidation/ # {token_quality}
├── style-extraction/style-1/ # Production-ready design system
├── layout-extraction/ # Structure templates
└── prototypes/ # {generated_count} HTML/CSS files
🌐 Preview: {base_path}/prototypes/compare.html

112
.claude/commands/workflow/ui-design/layout-extract.md
View File

@@ -68,15 +68,59 @@ Read({image_path}) # Load each image
bash(mkdir -p {base_path}/layout-extraction)
```
### Step 3: Memory Check (Skip if Already Done)
### Step 2.5: Extract DOM Structure (URL Mode - Enhancement)
```bash
# Check if layouts already extracted
bash(test -f {base_path}/layout-extraction/layout-templates.json && echo "exists")
# If URLs are available, extract real DOM structure
# This provides accurate layout data to supplement visual analysis
# For each URL in url_list:
IF url_available AND mcp_chrome_devtools_available:
# Read extraction script
Read(~/.claude/scripts/extract-layout-structure.js)
# Open page in Chrome DevTools
mcp__chrome-devtools__navigate_page(url="{target_url}")
# Execute layout extraction script
result = mcp__chrome-devtools__evaluate_script(function="[SCRIPT_CONTENT]")
# Save DOM structure for this target (intermediate file)
bash(mkdir -p {base_path}/.intermediates/layout-analysis)
Write({base_path}/.intermediates/layout-analysis/dom-structure-{target}.json, result)
dom_structure_available = true
ELSE:
dom_structure_available = false
```
**If exists**: Skip to completion message
**Extraction Script Reference**: `~/.claude/scripts/extract-layout-structure.js`
**Output**: `input_mode`, `base_path`, `extraction_mode`, `variants_count`, `targets[]`, `device_type`, loaded inputs
**Usage**: Read the script file and use content directly in `mcp__chrome-devtools__evaluate_script()`
**Script returns**:
- `metadata`: Extraction timestamp, URL, method
- `patterns`: Layout pattern statistics (flexColumn, flexRow, grid counts)
- `structure`: Hierarchical DOM tree with layout properties
**Benefits**:
- ✅ Real flex/grid configuration (justifyContent, alignItems, gap, etc.)
- ✅ Accurate element bounds (x, y, width, height)
- ✅ Structural hierarchy with depth control
- ✅ Layout pattern identification (flex-row, flex-column, grid-NCol)
### Step 3: Memory Check
```bash
# 1. Check if inputs cached in session memory
IF session_has_inputs: SKIP Step 2 file reading
# 2. Check if output already exists
bash(test -f {base_path}/layout-extraction/layout-templates.json && echo "exists")
IF exists: SKIP to completion
```
---
**Phase 0 Output**: `input_mode`, `base_path`, `extraction_mode`, `variants_count`, `targets[]`, `device_type`, loaded inputs
## Phase 1: Layout Research (Explore Mode Only)
@@ -90,13 +134,13 @@ bash(test -f {base_path}/layout-extraction/layout-templates.json && echo "exists
### Step 2: Gather Layout Inspiration (Explore Mode)
```bash
bash(mkdir -p {base_path}/layout-extraction/_inspirations)
bash(mkdir -p {base_path}/.intermediates/layout-analysis/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)
Write({base_path}/.intermediates/layout-analysis/inspirations/{target}-layout-ideas.txt, inspiration_content)
```
**Output**: Inspiration text files for each target (explore mode only)
@@ -118,14 +162,28 @@ Task(ui-design-agent): `
- 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')" : ""}
${exploration_mode ? "- Layout Inspiration: Read('" + base_path + "/.intermediates/layout-analysis/inspirations/{target}-layout-ideas.txt')" : ""}
${dom_structure_available ? "- DOM Structure Data: Read('" + base_path + "/.intermediates/layout-analysis/dom-structure-{target}.json') - USE THIS for accurate layout properties" : ""}
## Analysis & Generation
${dom_structure_available ? "IMPORTANT: You have access to real DOM structure data with accurate flex/grid properties, bounds, and hierarchy. Use this data as ground truth for layout analysis." : ""}
For EACH target in {targets}:
For EACH variant (1 to {variants_count}):
1. **Analyze Structure**: Deconstruct reference to understand layout, hierarchy, responsiveness
1. **Analyze Structure**:
${dom_structure_available ?
"- Use DOM structure data as primary source for layout properties" +
"- Extract real flex/grid configurations (display, flexDirection, justifyContent, alignItems, gap)" +
"- Use actual element bounds for responsive breakpoint decisions" +
"- Preserve identified patterns (flex-row, flex-column, grid-NCol)" +
"- Reference screenshots for visual context only" :
"- Deconstruct reference images/URLs 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
3. **Generate DOM Structure**:
${dom_structure_available ?
"- Base structure on extracted DOM tree from .intermediates" +
"- Preserve semantic tags and hierarchy from dom-structure-{target}.json" +
"- Maintain layout patterns identified in patterns field" :
"- JSON object representing semantic HTML5 structure"}
- Semantic tags: <header>, <nav>, <main>, <aside>, <section>, <footer>
- ARIA roles and accessibility attributes
- Device-specific structure:
@@ -137,7 +195,12 @@ Task(ui-design-agent): `
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.)
${dom_structure_available ?
"- Use real layout properties from DOM structure data" +
"- Convert extracted flex/grid values to CSS rules" +
"- Preserve actual gap, justifyContent, alignItems values" +
"- Use element bounds to inform responsive breakpoints" :
"- 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
@@ -228,7 +291,7 @@ 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
bash(mkdir -p {base_path}/.intermediates/layout-analysis/inspirations) # explore mode only
```
### Validation Commands
@@ -250,7 +313,7 @@ bash(ls {images_pattern})
Read({image_path})
# Write inspiration files (explore mode)
Write({base_path}/layout-extraction/_inspirations/{target}-layout-ideas.txt, content)
Write({base_path}/.intermediates/layout-analysis/inspirations/{target}-layout-ideas.txt, content)
# Write layout templates
bash(echo '{json}' > {base_path}/layout-extraction/layout-templates.json)
@@ -260,11 +323,14 @@ bash(echo '{json}' > {base_path}/layout-extraction/layout-templates.json)
```
{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
├── .intermediates/ # Intermediate analysis files
│ └── layout-analysis/
│ ├── dom-structure-{target}.json # Extracted DOM structure (URL mode only)
│ └── inspirations/ # Explore mode only
│ └── {target}-layout-ideas.txt # Layout inspiration research
└── layout-extraction/ # Final layout templates
├── layout-templates.json # Structural layout templates
└── layout-space-analysis.json # Layout directions (explore mode only)
```
## layout-templates.json Format
@@ -346,10 +412,13 @@ ERROR: MCP search failed (explore mode)
## Key Features
- **Hybrid Extraction Strategy** - Combines real DOM structure data with AI visual analysis
- **Accurate Layout Properties** - Chrome DevTools extracts real flex/grid configurations, bounds, and hierarchy
- **Separation of Concerns** - Decouples layout (structure) from style (visuals)
- **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
- **Graceful Fallback** - Works with images/text when URL unavailable
- **Foundation for Assembly** - Provides structural blueprint for refactored `generate` command
- **Agent-Powered** - Deep structural analysis with AI
@@ -358,10 +427,9 @@ ERROR: MCP search failed (explore mode)
**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):
1. `/workflow:ui-design:style-extract` → `design-tokens.json` + `style-guide.md` (Complete design systems)
2. `/workflow:ui-design:layout-extract` → `layout-templates.json` (Structural templates)
3. `/workflow:ui-design:generate` (Pure assembler):
- **Reads**: `design-tokens.json` + `layout-templates.json`
- **Action**: For each style × layout combination:
1. Build HTML from `dom_structure`

272
.claude/commands/workflow/ui-design/style-extract.md
View File

@@ -8,13 +8,14 @@ allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*)
# Style Extraction Command
## Overview
Extract design style from reference images or text prompts using Claude's built-in analysis. Generates `style-cards.json` with multiple design variants containing token proposals for consolidation.
Extract design style from reference images or text prompts using Claude's built-in analysis. Directly generates production-ready design systems with complete `design-tokens.json` and `style-guide.md` for each variant.
**Strategy**: AI-Driven Design Space Exploration
- **Claude-Native**: 100% Claude analysis, no external tools
- **Single Output**: `style-cards.json` with embedded token proposals
- **Direct Output**: Complete design systems (design-tokens.json + style-guide.md)
- **Flexible Input**: Images, text prompts, or both (hybrid mode)
- **Maximum Contrast**: AI generates maximally divergent design directions
- **Production-Ready**: WCAG AA compliant, OKLCH colors, semantic naming
## Phase 0: Setup & Input Validation
@@ -39,7 +40,48 @@ bash(find .workflow -type d -name "design-*" | head -1) # Auto-detect
# OR use --base-path / --session parameters
```
### Step 2: Load Inputs
### Step 2: Extract Computed Styles (URL Mode - Optional Enhancement)
```bash
# If URL is available from capture metadata, extract real CSS values
# This provides accurate design tokens to supplement visual analysis
# Check for URL metadata from capture phase
Read({base_path}/.metadata/capture-urls.json) # If exists
# For each URL in capture metadata:
IF url_available AND mcp_chrome_devtools_available:
# Read extraction script
Read(~/.claude/scripts/extract-computed-styles.js)
# Open page in Chrome DevTools
mcp__chrome-devtools__navigate_page(url="{target_url}")
# Execute extraction script directly
result = mcp__chrome-devtools__evaluate_script(function="[SCRIPT_CONTENT]")
# Save computed styles to intermediates directory
bash(mkdir -p {base_path}/.intermediates/style-analysis)
Write({base_path}/.intermediates/style-analysis/computed-styles.json, result)
computed_styles_available = true
ELSE:
computed_styles_available = false
```
**Extraction Script Reference**: `~/.claude/scripts/extract-computed-styles.js`
**Usage**: Read the script file and use content directly in `mcp__chrome-devtools__evaluate_script()`
**Script returns**:
- `metadata`: Extraction timestamp, URL, method
- `tokens`: Organized design tokens (colors, borderRadii, shadows, fontSizes, fontWeights, spacing)
**Benefits**:
- ✅ Pixel-perfect accuracy for border-radius, box-shadow, padding, etc.
- ✅ Eliminates guessing from visual analysis
- ✅ Provides ground truth for design tokens
### Step 3: Load Inputs
```bash
# For image mode
bash(ls {images_pattern}) # Expand glob pattern
@@ -52,15 +94,19 @@ Read({image_path}) # Load each image
bash(mkdir -p {base_path}/style-extraction/)
```
### Step 3: Memory Check (Skip if Already Done)
### Step 3: Memory Check
```bash
# Check if already extracted
bash(test -f {base_path}/style-extraction/style-cards.json && echo "exists")
# 1. Check if inputs cached in session memory
IF session_has_inputs: SKIP Step 2 file reading
# 2. Check if output already exists
bash(test -f {base_path}/style-extraction/style-1/design-tokens.json && echo "exists")
IF exists: SKIP to completion
```
**If exists**: Skip to completion message
---
**Output**: `input_mode`, `base_path`, `extraction_mode`, `variants_count`, `loaded_images[]` or `prompt_guidance`
**Phase 0 Output**: `input_mode`, `base_path`, `extraction_mode`, `variants_count`, `loaded_images[]` or `prompt_guidance`
## Phase 1: Design Space Analysis (Explore Mode Only)
@@ -93,42 +139,101 @@ AI analyzes requirements and generates `variants_count` maximally contrasting de
### Step 4: Write Design Space Analysis
```bash
bash(echo '{design_space_analysis}' > {base_path}/style-extraction/design-space-analysis.json)
bash(mkdir -p {base_path}/.intermediates/style-analysis)
bash(echo '{design_space_analysis}' > {base_path}/.intermediates/style-analysis/design-space-analysis.json)
# Verify output
bash(test -f design-space-analysis.json && echo "saved")
bash(test -f {base_path}/.intermediates/style-analysis/design-space-analysis.json && echo "saved")
```
**Output**: `design-space-analysis.json` for consolidation phase
**Output**: `design-space-analysis.json` (intermediate analysis file)
## Phase 2: Style Synthesis & File Write
## Phase 2: Design System Generation (Agent)
### Step 1: Claude Native Analysis
AI generates `variants_count` design style proposals:
**Executor**: `Task(ui-design-agent)` for all variants
**Input**:
- Input mode (image/text/hybrid)
- Visual references or text guidance
- Design space analysis (explore mode only)
- Variant-specific directions (explore mode only)
**Analysis Rules**:
- **Explore mode**: Each variant follows pre-defined philosophy and attributes, maintains maximum contrast
- **Imitate mode**: High-fidelity replication of reference design
- OKLCH color format
- Complete token proposals (colors, typography, spacing, border_radius, shadows, breakpoints)
- WCAG AA accessibility (4.5:1 text, 3:1 UI)
**Output Format**: `style-cards.json` with:
- extraction_metadata (session_id, input_mode, extraction_mode, timestamp, variants_count)
- style_cards[] (id, name, description, design_philosophy, preview, proposed_tokens)
### Step 2: Write Style Cards
### Step 1: Create Output Directories
```bash
bash(echo '{style_cards_json}' > {base_path}/style-extraction/style-cards.json)
bash(mkdir -p {base_path}/style-extraction/style-{{1..{variants_count}}})
```
**Output**: `style-cards.json` with `variants_count` complete variants
### Step 2: Launch Agent Task
For all variants (1 to {variants_count}):
```javascript
Task(ui-design-agent): `
[DESIGN_SYSTEM_GENERATION_TASK]
Generate {variants_count} independent production-ready design systems
SESSION: {session_id} | MODE: {extraction_mode} | BASE_PATH: {base_path}
CRITICAL PATH: Use loop index (N) for directories: style-1/, style-2/, ..., style-N/
VARIANT DATA:
{FOR each variant with index N:
VARIANT INDEX: {N}
{IF extraction_mode == "explore":
Design Philosophy: {divergent_direction[N].philosophy_name}
Design Attributes: {divergent_direction[N].design_attributes}
Search Keywords: {divergent_direction[N].search_keywords}
Anti-keywords: {divergent_direction[N].anti_keywords}
}
}
## Input Analysis
- Input mode: {input_mode} (image/text/hybrid)
- Visual references: {loaded_images OR prompt_guidance}
- Computed styles: {computed_styles if available}
- Design space analysis: {design_space_analysis if explore mode}
## Analysis Rules
- **Explore mode**: Each variant follows pre-defined philosophy and attributes
- **Imitate mode**: High-fidelity replication of reference design
- If computed_styles available: Use as ground truth for border-radius, shadows, spacing, typography, colors
- Otherwise: Visual inference
- OKLCH color format (convert RGB from computed styles)
- WCAG AA compliance: 4.5:1 text, 3:1 UI
## Generate (For EACH variant, use loop index N for paths)
1. {base_path}/style-extraction/style-{N}/design-tokens.json
- Complete token structure: colors, typography, spacing, border_radius, shadows, breakpoints
- All colors in OKLCH format
- {IF explore mode: Apply design_attributes to token values (saturation→chroma, density→spacing, etc.)}
2. {base_path}/style-extraction/style-{N}/style-guide.md
- Expanded design philosophy
- Complete color system with accessibility notes
- Typography documentation
- Usage guidelines
## Critical Requirements
- ✅ Use Write() tool immediately for each file
- ✅ Use loop index N for directory names: style-1/, style-2/, etc.
- ❌ NO external research or MCP calls (pure AI generation)
- {IF explore mode: Apply philosophy-driven refinement using design_attributes}
- {IF explore mode: Maintain divergence using anti_keywords}
- Complete each variant's files before moving to next variant
`
```
**Output**: Agent generates `variants_count × 2` files
## Phase 3: Verify Output
### Step 1: Check Files Created
```bash
# Verify all design systems created
bash(ls {base_path}/style-extraction/style-*/design-tokens.json | wc -l)
# Validate structure
bash(cat {base_path}/style-extraction/style-1/design-tokens.json | grep -q "colors" && echo "valid")
```
### Step 2: Verify File Sizes
```bash
bash(ls -lh {base_path}/style-extraction/style-1/)
```
**Output**: `variants_count × 2` files verified
## Completion
@@ -137,7 +242,8 @@ bash(echo '{style_cards_json}' > {base_path}/style-extraction/style-cards.json)
TodoWrite({todos: [
{content: "Setup and input validation", status: "completed", activeForm: "Validating inputs"},
{content: "Design space analysis (explore mode)", status: "completed", activeForm: "Analyzing design space"},
{content: "Style synthesis and file write", status: "completed", activeForm: "Generating style cards"}
{content: "Design system generation (agent)", status: "completed", activeForm: "Generating design systems"},
{content: "Verify output files", status: "completed", activeForm: "Verifying files"}
]});
```
@@ -150,6 +256,7 @@ Configuration:
- Extraction Mode: {extraction_mode} (imitate/explore)
- Input Mode: {input_mode} (image/text/hybrid)
- Variants: {variants_count}
- Production-Ready: Complete design systems generated
{IF extraction_mode == "explore":
Design Space Analysis:
@@ -157,14 +264,19 @@ Design Space Analysis:
- Min contrast distance: {design_space_analysis.contrast_verification.min_pairwise_distance}
}
Generated Variants:
{FOR each card: - {card.name} - {card.design_philosophy}}
Generated Files:
{base_path}/style-extraction/
├── style-1/ (design-tokens.json, style-guide.md)
├── style-2/ (same structure)
└── style-{variants_count}/ (same structure)
Output Files:
- {base_path}/style-extraction/style-cards.json
{IF extraction_mode == "explore": - {base_path}/style-extraction/design-space-analysis.json}
{IF extraction_mode == "explore":
Intermediate Analysis:
{base_path}/.intermediates/style-analysis/design-space-analysis.json
}
Next: /workflow:ui-design:consolidate --session {session_id} --variants {variants_count}
Next: /workflow:ui-design:layout-extract --session {session_id} --targets "..."
OR: /workflow:ui-design:generate --session {session_id}
```
## Simple Bash Commands
@@ -184,13 +296,13 @@ bash(mkdir -p {base_path}/style-extraction/)
### Validation Commands
```bash
# Check if already extracted
bash(test -f {base_path}/style-extraction/style-cards.json && echo "exists")
bash(test -f {base_path}/style-extraction/style-1/design-tokens.json && echo "exists")
# Count variants
bash(cat style-cards.json | grep -c "\"id\": \"variant-")
bash(ls {base_path}/style-extraction/style-* -d | wc -l)
# Validate JSON
bash(cat style-cards.json | grep -q "extraction_metadata" && echo "valid")
# Validate JSON structure
bash(cat {base_path}/style-extraction/style-1/design-tokens.json | grep -q "colors" && echo "valid")
```
### File Operations
@@ -198,46 +310,50 @@ bash(cat style-cards.json | grep -q "extraction_metadata" && echo "valid")
# Load brainstorming context
bash(test -f .brainstorming/synthesis-specification.md && cat it)
# Write output
bash(echo '{json}' > {base_path}/style-extraction/style-cards.json)
# Create directories
bash(mkdir -p {base_path}/style-extraction/style-{{1..3}})
# Verify output
bash(test -f design-space-analysis.json && echo "saved")
bash(ls {base_path}/style-extraction/style-1/)
bash(test -f {base_path}/.intermediates/style-analysis/design-space-analysis.json && echo "saved")
```
## Output Structure
```
{base_path}/style-extraction/
├── style-cards.json # Complete style variants with token proposals
└── design-space-analysis.json # Design directions (explore mode only)
{base_path}/
├── .intermediates/ # Intermediate analysis files
│ └── style-analysis/
│ ├── computed-styles.json # Extracted CSS values from DOM (if URL available)
│ └── design-space-analysis.json # Design directions (explore mode only)
└── style-extraction/ # Final design systems
├── style-1/
│ ├── design-tokens.json # Production-ready design tokens
│ └── style-guide.md # Design philosophy and usage guide
├── style-2/ (same structure)
└── style-N/ (same structure)
```
## style-cards.json Format
## design-tokens.json Format
```json
{
"extraction_metadata": {"session_id": "...", "input_mode": "image|text|hybrid", "extraction_mode": "imitate|explore", "timestamp": "...", "variants_count": N},
"style_cards": [
{
"id": "variant-1", "name": "Style Name", "description": "...",
"design_philosophy": "Core principles",
"preview": {"primary": "oklch(...)", "background": "oklch(...)", "font_heading": "...", "border_radius": "..."},
"proposed_tokens": {
"colors": {"brand": {...}, "surface": {...}, "semantic": {...}, "text": {...}, "border": {...}},
"typography": {"font_family": {...}, "font_size": {...}, "font_weight": {...}, "line_height": {...}, "letter_spacing": {...}},
"spacing": {"0": "0", ..., "24": "6rem"},
"border_radius": {"none": "0", ..., "full": "9999px"},
"shadows": {"sm": "...", ..., "xl": "..."},
"breakpoints": {"sm": "640px", ..., "2xl": "1536px"}
}
}
// Repeat for all variants
]
"colors": {
"brand": {"primary": "oklch(...)", "secondary": "oklch(...)", "accent": "oklch(...)"},
"surface": {"background": "oklch(...)", "elevated": "oklch(...)", "overlay": "oklch(...)"},
"semantic": {"success": "oklch(...)", "warning": "oklch(...)", "error": "oklch(...)", "info": "oklch(...)"},
"text": {"primary": "oklch(...)", "secondary": "oklch(...)", "tertiary": "oklch(...)", "inverse": "oklch(...)"},
"border": {"default": "oklch(...)", "strong": "oklch(...)", "subtle": "oklch(...)"}
},
"typography": {"font_family": {...}, "font_size": {...}, "font_weight": {...}, "line_height": {...}, "letter_spacing": {...}},
"spacing": {"0": "0", "1": "0.25rem", ..., "24": "6rem"},
"border_radius": {"none": "0", "sm": "0.25rem", ..., "full": "9999px"},
"shadows": {"sm": "...", "md": "...", "lg": "...", "xl": "..."},
"breakpoints": {"sm": "640px", ..., "2xl": "1536px"}
}
```
**Requirements**: All colors in OKLCH format, complete token proposals, semantic naming
**Requirements**: OKLCH colors, complete coverage, semantic naming, WCAG AA compliance
## Error Handling
@@ -255,17 +371,21 @@ ERROR: Claude JSON parsing error
## Key Features
- **Direct Design System Generation** - Complete design-tokens.json + style-guide.md in one step
- **Hybrid Extraction Strategy** - Combines computed CSS values (ground truth) with AI visual analysis
- **Pixel-Perfect Accuracy** - Chrome DevTools extracts exact border-radius, shadows, spacing values
- **AI-Driven Design Space Exploration** - 6D attribute space analysis for maximum contrast
- **Variant-Specific Directions** - Each variant has unique philosophy, keywords, anti-patterns
- **Maximum Contrast Guarantee** - Variants maximally distant in attribute space
- **Claude-Native** - No external tools, fast deterministic synthesis
- **Flexible Input** - Images, text, or hybrid mode
- **Production-Ready** - OKLCH colors, WCAG AA, semantic naming
- **Flexible Input** - Images, text, URLs, or hybrid mode
- **Graceful Fallback** - Falls back to pure visual inference if URL unavailable
- **Production-Ready** - OKLCH colors, WCAG AA compliance, semantic naming
- **Agent-Driven** - Autonomous multi-file generation with ui-design-agent
## Integration
**Input**: Reference images or text prompts
**Output**: `style-cards.json` for consolidation
**Next**: `/workflow:ui-design:consolidate --session {session_id} --variants {count}`
**Output**: `style-extraction/style-{N}/` with design-tokens.json + style-guide.md
**Next**: `/workflow:ui-design:layout-extract --session {session_id}` OR `/workflow:ui-design:generate --session {session_id}`
**Note**: This command only extracts visual style (colors, typography, spacing). For layout structure extraction, use `/workflow:ui-design:layout-extract`.
**Note**: This command extracts visual style (colors, typography, spacing) and generates production-ready design systems. For layout structure extraction, use `/workflow:ui-design:layout-extract`.

26
.claude/commands/workflow/ui-design/update.md
View File

@@ -30,13 +30,11 @@ CHECK: .workflow/.active-* marker files; VALIDATE: session_id matches active ses
# Verify design artifacts in latest design run
latest_design = find_latest_path_matching(".workflow/WFS-{session}/design-*")
# Detect design system structure (unified vs separate)
IF exists({latest_design}/style-consolidation/design-tokens.json):
design_system_mode = "unified"; design_tokens_path = "style-consolidation/design-tokens.json"; style_guide_path = "style-consolidation/style-guide.md"
ELSE IF exists({latest_design}/style-consolidation/style-1/design-tokens.json):
design_system_mode = "separate"; design_tokens_path = "style-consolidation/style-1/design-tokens.json"; style_guide_path = "style-consolidation/style-1/style-guide.md"
# Detect design system structure
IF exists({latest_design}/style-extraction/style-1/design-tokens.json):
design_system_mode = "separate"; design_tokens_path = "style-extraction/style-1/design-tokens.json"; style_guide_path = "style-extraction/style-1/style-guide.md"
ELSE:
ERROR: "No design tokens found. Run /workflow:ui-design:consolidate first"
ERROR: "No design tokens found. Run /workflow:ui-design:style-extract first"
VERIFY: {latest_design}/{design_tokens_path}, {latest_design}/{style_guide_path}, {latest_design}/prototypes/*.html
@@ -202,15 +200,15 @@ Next: /workflow:plan [--agent] "<task description>"
**@ Reference Format** (synthesis-specification.md):
```
@../design-{run_id}/style-consolidation/design-tokens.json
@../design-{run_id}/style-consolidation/style-guide.md
@../design-{run_id}/style-extraction/style-1/design-tokens.json
@../design-{run_id}/style-extraction/style-1/style-guide.md
@../design-{run_id}/prototypes/{prototype}.html
```
**@ Reference Format** (ui-designer/style-guide.md):
```
@../../design-{run_id}/style-consolidation/design-tokens.json
@../../design-{run_id}/style-consolidation/style-guide.md
@../../design-{run_id}/style-extraction/style-1/design-tokens.json
@../../design-{run_id}/style-extraction/style-1/style-guide.md
@../../design-{run_id}/prototypes/{prototype}.html
```
@@ -230,8 +228,8 @@ After this update, `/workflow:plan` will discover design assets through:
"task_id": "IMPL-001",
"context": {
"design_system": {
"tokens": "design-{run_id}/style-consolidation/design-tokens.json",
"style_guide": "design-{run_id}/style-consolidation/style-guide.md",
"tokens": "design-{run_id}/style-extraction/style-1/design-tokens.json",
"style_guide": "design-{run_id}/style-extraction/style-1/style-guide.md",
"prototypes": ["design-{run_id}/prototypes/dashboard-variant-1.html"]
}
}
@@ -240,7 +238,7 @@ After this update, `/workflow:plan` will discover design assets through:
## Error Handling
- **Missing design artifacts**: Error with message "Run /workflow:ui-design:consolidate and /workflow:ui-design:generate first"
- **Missing design artifacts**: Error with message "Run /workflow:ui-design:style-extract and /workflow:ui-design:generate first"
- **synthesis-specification.md not found**: Warning, create minimal version with just UI/UX Guidelines
- **ui-designer/ directory missing**: Create directory and file
- **Edit conflicts**: Preserve existing content, append or replace only UI/UX Guidelines section
@@ -265,7 +263,7 @@ After update, verify:
## Integration Points
- **Input**: Design system artifacts from `/workflow:ui-design:consolidate` and `/workflow:ui-design:generate`
- **Input**: Design system artifacts from `/workflow:ui-design:style-extract` and `/workflow:ui-design:generate`
- **Output**: Updated synthesis-specification.md, ui-designer/style-guide.md with @ references
- **Next Phase**: `/workflow:plan` discovers and utilizes design system through @ references
- **Auto Integration**: Automatically triggered by `/workflow:ui-design:auto` workflow

118
.claude/scripts/extract-computed-styles.js Normal file
View File

@@ -0,0 +1,118 @@
/**
* Extract Computed Styles from DOM
*
* This script extracts real CSS computed styles from a webpage's DOM
* to provide accurate design tokens for UI replication.
*
* Usage: Execute this function via Chrome DevTools evaluate_script
*/
(() => {
/**
* Extract unique values from a set and sort them
*/
const uniqueSorted = (set) => {
return Array.from(set)
.filter(v => v && v !== 'none' && v !== '0px' && v !== 'rgba(0, 0, 0, 0)')
.sort();
};
/**
* Parse rgb/rgba to OKLCH format (placeholder - returns original for now)
*/
const toOKLCH = (color) => {
// TODO: Implement actual RGB to OKLCH conversion
// For now, return the original color with a note
return `${color} /* TODO: Convert to OKLCH */`;
};
/**
* Extract only key styles from an element
*/
const extractKeyStyles = (element) => {
const s = window.getComputedStyle(element);
return {
color: s.color,
bg: s.backgroundColor,
borderRadius: s.borderRadius,
boxShadow: s.boxShadow,
fontSize: s.fontSize,
fontWeight: s.fontWeight,
padding: s.padding,
margin: s.margin
};
};
/**
* Main extraction function - extract all critical design tokens
*/
const extractDesignTokens = () => {
// Include all key UI elements
const selectors = [
'button', '.btn', '[role="button"]',
'input', 'textarea', 'select',
'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
'.card', 'article', 'section',
'a', 'p', 'nav', 'header', 'footer'
];
// Collect all design tokens
const tokens = {
colors: new Set(),
borderRadii: new Set(),
shadows: new Set(),
fontSizes: new Set(),
fontWeights: new Set(),
spacing: new Set()
};
// Extract from all elements
selectors.forEach(selector => {
try {
const elements = document.querySelectorAll(selector);
elements.forEach(element => {
const s = extractKeyStyles(element);
// Collect all tokens (no limits)
if (s.color && s.color !== 'rgba(0, 0, 0, 0)') tokens.colors.add(s.color);
if (s.bg && s.bg !== 'rgba(0, 0, 0, 0)') tokens.colors.add(s.bg);
if (s.borderRadius && s.borderRadius !== '0px') tokens.borderRadii.add(s.borderRadius);
if (s.boxShadow && s.boxShadow !== 'none') tokens.shadows.add(s.boxShadow);
if (s.fontSize) tokens.fontSizes.add(s.fontSize);
if (s.fontWeight) tokens.fontWeights.add(s.fontWeight);
// Extract all spacing values
[s.padding, s.margin].forEach(val => {
if (val && val !== '0px') {
val.split(' ').forEach(v => {
if (v && v !== '0px') tokens.spacing.add(v);
});
}
});
});
} catch (e) {
console.warn(`Error: ${selector}`, e);
}
});
// Return all tokens (no element details to save context)
return {
metadata: {
extractedAt: new Date().toISOString(),
url: window.location.href,
method: 'computed-styles'
},
tokens: {
colors: uniqueSorted(tokens.colors),
borderRadii: uniqueSorted(tokens.borderRadii), // ALL radius values
shadows: uniqueSorted(tokens.shadows), // ALL shadows
fontSizes: uniqueSorted(tokens.fontSizes),
fontWeights: uniqueSorted(tokens.fontWeights),
spacing: uniqueSorted(tokens.spacing)
}
};
};
// Execute and return results
return extractDesignTokens();
})();

221
.claude/scripts/extract-layout-structure.js Normal file
View File

@@ -0,0 +1,221 @@
/**
* Extract Layout Structure from DOM
*
* Extracts real layout information from DOM to provide accurate
* structural data for UI replication.
*
* Usage: Execute via Chrome DevTools evaluate_script
*/
(() => {
/**
* Get element's bounding box relative to viewport
*/
const getBounds = (element) => {
const rect = element.getBoundingClientRect();
return {
x: Math.round(rect.x),
y: Math.round(rect.y),
width: Math.round(rect.width),
height: Math.round(rect.height)
};
};
/**
* Extract layout properties from an element
*/
const extractLayoutProps = (element) => {
const s = window.getComputedStyle(element);
return {
// Core layout
display: s.display,
position: s.position,
// Flexbox
flexDirection: s.flexDirection,
justifyContent: s.justifyContent,
alignItems: s.alignItems,
flexWrap: s.flexWrap,
gap: s.gap,
// Grid
gridTemplateColumns: s.gridTemplateColumns,
gridTemplateRows: s.gridTemplateRows,
gridAutoFlow: s.gridAutoFlow,
// Dimensions
width: s.width,
height: s.height,
maxWidth: s.maxWidth,
minWidth: s.minWidth,
// Spacing
padding: s.padding,
margin: s.margin
};
};
/**
* Identify layout pattern for an element
*/
const identifyPattern = (props) => {
const { display, flexDirection, gridTemplateColumns } = props;
if (display === 'flex') {
if (flexDirection === 'column') return 'flex-column';
if (flexDirection === 'row') return 'flex-row';
return 'flex';
}
if (display === 'grid') {
const cols = gridTemplateColumns;
if (cols && cols !== 'none') {
const colCount = cols.split(' ').length;
return `grid-${colCount}col`;
}
return 'grid';
}
if (display === 'inline-flex') return 'inline-flex';
if (display === 'block') return 'block';
return display;
};
/**
* Build layout tree recursively
*/
const buildLayoutTree = (element, depth = 0, maxDepth = 3) => {
if (depth > maxDepth) return null;
const props = extractLayoutProps(element);
const bounds = getBounds(element);
const pattern = identifyPattern(props);
// Get semantic role
const tagName = element.tagName.toLowerCase();
const classes = Array.from(element.classList).slice(0, 3); // Max 3 classes
const role = element.getAttribute('role');
// Build node
const node = {
tag: tagName,
classes: classes,
role: role,
pattern: pattern,
bounds: bounds,
layout: {
display: props.display,
position: props.position
}
};
// Add flex/grid specific properties
if (props.display === 'flex' || props.display === 'inline-flex') {
node.layout.flexDirection = props.flexDirection;
node.layout.justifyContent = props.justifyContent;
node.layout.alignItems = props.alignItems;
node.layout.gap = props.gap;
}
if (props.display === 'grid') {
node.layout.gridTemplateColumns = props.gridTemplateColumns;
node.layout.gridTemplateRows = props.gridTemplateRows;
node.layout.gap = props.gap;
}
// Process children for container elements
if (props.display === 'flex' || props.display === 'grid' || props.display === 'block') {
const children = Array.from(element.children);
if (children.length > 0 && children.length < 50) { // Limit to 50 children
node.children = children
.map(child => buildLayoutTree(child, depth + 1, maxDepth))
.filter(child => child !== null);
}
}
return node;
};
/**
* Find main layout containers
*/
const findMainContainers = () => {
const selectors = [
'body > header',
'body > nav',
'body > main',
'body > footer',
'[role="banner"]',
'[role="navigation"]',
'[role="main"]',
'[role="contentinfo"]'
];
const containers = [];
selectors.forEach(selector => {
const element = document.querySelector(selector);
if (element) {
const tree = buildLayoutTree(element, 0, 3);
if (tree) {
containers.push(tree);
}
}
});
return containers;
};
/**
* Analyze layout patterns
*/
const analyzePatterns = (containers) => {
const patterns = {
flexColumn: 0,
flexRow: 0,
grid: 0,
sticky: 0,
fixed: 0
};
const analyze = (node) => {
if (!node) return;
if (node.pattern === 'flex-column') patterns.flexColumn++;
if (node.pattern === 'flex-row') patterns.flexRow++;
if (node.pattern && node.pattern.startsWith('grid')) patterns.grid++;
if (node.layout.position === 'sticky') patterns.sticky++;
if (node.layout.position === 'fixed') patterns.fixed++;
if (node.children) {
node.children.forEach(analyze);
}
};
containers.forEach(analyze);
return patterns;
};
/**
* Main extraction function
*/
const extractLayout = () => {
const containers = findMainContainers();
const patterns = analyzePatterns(containers);
return {
metadata: {
extractedAt: new Date().toISOString(),
url: window.location.href,
method: 'layout-structure'
},
patterns: patterns,
structure: containers
};
};
// Execute and return results
return extractLayout();
})();

2
.claude/scripts/ui-generate-preview.sh
View File

@@ -329,7 +329,7 @@ for style in $styles; do
### Style ${style}
EOF3
style_guide="../style-consolidation/style-${style}/style-guide.md"
style_guide="../style-extraction/style-${style}/style-guide.md"
if [[ -f "$style_guide" ]]; then
head -n 10 "$style_guide" | tail -n +2 >> PREVIEW.md 2>/dev/null || echo "Design philosophy and tokens" >> PREVIEW.md
else

14
.claude/scripts/ui-instantiate-prototypes.sh
View File

@@ -52,7 +52,7 @@ auto_detect_pages() {
# Auto-detect style variants count
auto_detect_style_variants() {
local base_path="$1"
local style_dir="$base_path/../style-consolidation"
local style_dir="$base_path/../style-extraction"
if [ ! -d "$style_dir" ]; then
log_warning "Style consolidation directory not found: $style_dir"
@@ -260,7 +260,7 @@ fi
# Validate STYLE_VARIANTS against actual style directories
if [ "$STYLE_VARIANTS" -gt 0 ]; then
style_dir="$BASE_PATH/../style-consolidation"
style_dir="$BASE_PATH/../style-extraction"
if [ ! -d "$style_dir" ]; then
log_error "Style consolidation directory not found: $style_dir"
@@ -337,7 +337,7 @@ for page in "${PAGE_ARRAY[@]}"; do
# Define file paths
TEMPLATE_HTML="_templates/${page}-layout-${l}.html"
STRUCTURAL_CSS="_templates/${page}-layout-${l}.css"
TOKEN_CSS="../style-consolidation/style-${s}/tokens.css"
TOKEN_CSS="../style-extraction/style-${s}/tokens.css"
OUTPUT_HTML="${page}-style-${s}-layout-${l}.html"
# Copy template and replace placeholders
@@ -376,7 +376,7 @@ across all style variants. The HTML structure is identical for all ${page}-layou
prototypes, with only the design tokens (colors, fonts, spacing) varying.
## Design System Reference
Refer to \`../style-consolidation/style-${s}/style-guide.md\` for:
Refer to \`../style-extraction/style-${s}/style-guide.md\` for:
- Design philosophy
- Token usage guidelines
- Component patterns
@@ -742,9 +742,9 @@ for s in $(seq 1 "$STYLE_VARIANTS"); do
cat >> PREVIEW.md <<STYLEEOF
### Style ${s}
- **Tokens:** \`../style-consolidation/style-${s}/design-tokens.json\`
- **CSS Variables:** \`../style-consolidation/style-${s}/tokens.css\`
- **Style Guide:** \`../style-consolidation/style-${s}/style-guide.md\`
- **Tokens:** \`../style-extraction/style-${s}/design-tokens.json\`
- **CSS Variables:** \`../style-extraction/style-${s}/tokens.css\`
- **Style Guide:** \`../style-extraction/style-${s}/style-guide.md\`
STYLEEOF
done