diff --git a/.claude/commands/workflow/ui-design/batch-generate.md b/.claude/commands/workflow/ui-design/batch-generate.md index bc31fd5c..0dbadd5c 100644 --- a/.claude/commands/workflow/ui-design/batch-generate.md +++ b/.claude/commands/workflow/ui-design/batch-generate.md @@ -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 diff --git a/.claude/commands/workflow/ui-design/consolidate.md b/.claude/commands/workflow/ui-design/consolidate.md deleted file mode 100644 index 2a138397..00000000 --- a/.claude/commands/workflow/ui-design/consolidate.md +++ /dev/null @@ -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 ] [--session ] [--variants ] [--layout-variants ] -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. diff --git a/.claude/commands/workflow/ui-design/explore-auto.md b/.claude/commands/workflow/ui-design/explore-auto.md index 11b1d3ab..06a5ef34 100644 --- a/.claude/commands/workflow/ui-design/explore-auto.md +++ b/.claude/commands/workflow/ui-design/explore-auto.md @@ -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 diff --git a/.claude/commands/workflow/ui-design/generate.md b/.claude/commands/workflow/ui-design/generate.md index a830f263..d7e6cfb4 100644 --- a/.claude/commands/workflow/ui-design/generate.md +++ b/.claude/commands/workflow/ui-design/generate.md @@ -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` diff --git a/.claude/commands/workflow/ui-design/imitate-auto.md b/.claude/commands/workflow/ui-design/imitate-auto.md index dbb34372..45fcd5db 100644 --- a/.claude/commands/workflow/ui-design/imitate-auto.md +++ b/.claude/commands/workflow/ui-design/imitate-auto.md @@ -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 "" [--capture-mode ] [--depth <1-5>] [--session ] [--refine-tokens] [--prompt ""] +description: High-speed multi-page UI replication with batch screenshot capture +argument-hint: --url-map "" [--capture-mode ] [--depth <1-5>] [--session ] [--prompt ""] 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 ""` (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 diff --git a/.claude/commands/workflow/ui-design/layout-extract.md b/.claude/commands/workflow/ui-design/layout-extract.md index 9eaaa0ad..c4a943d6 100644 --- a/.claude/commands/workflow/ui-design/layout-extract.md +++ b/.claude/commands/workflow/ui-design/layout-extract.md @@ -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:
,