Claude-Code-Workflow/.claude/commands/workflow/ui-design/imitate-auto.md

name: imitate-auto description: UI design workflow with direct code/image input for design token extraction and prototype generation argument-hint: "[--images ""] [--prompt ""] [--session ]" allowed-tools: SlashCommand(), TodoWrite(), Read(), Write(), Bash(*)

UI Design Imitate-Auto Workflow Command

Overview & Execution Model

Fully autonomous design orchestrator: Efficiently create UI prototypes through sequential execution from design token extraction to system integration.

Direct Input Strategy: Accepts local code files and images:

• Code Files: Detect file paths in --prompt parameter
• Images: Reference images via --images glob pattern
• Hybrid: Combine both code and visual inputs

Autonomous Flow (⚠️ CONTINUOUS EXECUTION - DO NOT STOP):

1. User triggers: /workflow:ui-design:imitate-auto [--images "..."] [--prompt "..."]
2. Phase 0: Initialize and detect input sources
3. Phase 2: Style extraction (complete design systems) → Execute phase (blocks until finished) → Auto-continues
4. Phase 2.3: Animation extraction (CSS auto mode) → Execute phase (blocks until finished) → Auto-continues
5. Phase 2.5: Layout extraction (structure templates) → Execute phase (blocks until finished) → Auto-continues
6. Phase 3: Batch UI assembly → Execute phase (blocks until finished) → Auto-continues
7. Phase 4: Design system integration → Reports completion

Phase Transition Mechanism:

• SlashCommand is BLOCKING - execution pauses until the command finishes
• When each phase finishes executing: Automatically process output and execute next phase
• No user interaction required after initial parameter parsing

Auto-Continue Mechanism: TodoWrite tracks phase status. When each phase finishes executing, you MUST immediately construct and execute the next phase command. No user intervention required. The workflow is NOT complete until reaching Phase 4.

Core Rules

1. Start Immediately: TodoWrite initialization → Phase 2 execution
2. No Preliminary Validation: Sub-commands handle their own validation
3. Parse & Pass: Extract data from each output for next phase
4. Track Progress: Update TodoWrite after each phase
5. ⚠️ CRITICAL: DO NOT STOP - This is a continuous multi-phase workflow. Each SlashCommand execution blocks until finished, then you MUST immediately execute the next phase. Workflow is NOT complete until Phase 4.

Parameter Requirements

Optional Parameters (at least one of --images or --prompt required):

• --images "<glob>": Reference image paths (e.g., "design-refs/*", "screenshots/*.png")

  • Glob patterns supported
  • Multiple images can be matched

• --prompt "<desc>": Design description or file path

  • Can contain file paths (automatically detected)
  • Influences extract command analysis focus
  • Example: "Focus on dark mode", "Emphasize minimalist design"
  • Example with path: "Use design from ./src/components"

• --session <id> (Optional): Workflow session ID

  • Integrate into existing session (.workflow/WFS-{session}/)
  • Enable automatic design system integration (Phase 4)
  • If not provided: standalone mode (.workflow/.design/)

Input Rules:

• Must provide at least one: --images or --prompt
• Multiple parameters can be combined for guided analysis
• File paths in --prompt are automatically detected and imported

Execution Modes

Input Sources:

• Code Files: Automatically detected from --prompt file paths
  • Triggers /workflow:ui-design:import-from-code for token extraction
  • Analyzes existing CSS/JS/HTML files
• Visual Input: Images via --images glob pattern
  • Reference images for style extraction
  • Screenshots or design mockups
• Hybrid Mode: Combines code import with visual supplements
  • Code provides base tokens
  • Images supplement missing design elements

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
• Integrated: Design system automatically added to session artifacts
• Standalone: Output in .workflow/.design/{run_id}/

5-Phase Execution

Phase 0: Intelligent Path Detection & Initialization

# Step 1: Detect design source from inputs
code_files_detected = false
code_base_path = null
has_visual_input = false

IF --prompt:
    # Extract potential file paths from prompt
    potential_paths = extract_paths_from_text(--prompt)
    FOR path IN potential_paths:
        IF file_or_directory_exists(path):
            code_files_detected = true
            code_base_path = path
            BREAK

IF --images:
    # Check if images parameter points to existing files
    IF glob_matches_files(--images):
        has_visual_input = true

# Step 2: Determine design source strategy
design_source = "unknown"
IF code_files_detected AND has_visual_input:
    design_source = "hybrid"  # Both code and visual
ELSE IF code_files_detected:
    design_source = "code_only"  # Only code files
ELSE IF has_visual_input OR --prompt:
    design_source = "visual_only"  # Only visual/prompt
ELSE:
    ERROR: "No design source provided (code files, images, or prompt required)"
    EXIT 1

STORE: design_source, code_base_path, has_visual_input

# Step 3: Initialize directories
design_id = "design-run-$(date +%Y%m%d)-$RANDOM"

IF --session:
    session_id = {provided_session}
    relative_base_path = ".workflow/WFS-{session_id}/{design_id}"
    session_mode = "integrated"
ELSE:
    session_id = null
    relative_base_path = ".workflow/.design/{design_id}"
    session_mode = "standalone"

# Create base directory and convert to absolute path
Bash(mkdir -p "{relative_base_path}")
base_path=$(cd "{relative_base_path}" && pwd)

# Write metadata
metadata = {
    "workflow": "imitate-auto",
    "run_id": design_id,
    "session_id": session_id,
    "timestamp": current_timestamp(),
    "parameters": {
        "design_source": design_source,
        "code_base_path": code_base_path,
        "images": --images OR null,
        "prompt": --prompt OR null
    },
    "status": "in_progress"
}

Write("{base_path}/.run-metadata.json", JSON.stringify(metadata, null, 2))

# Initialize default flags
animation_complete = false
needs_visual_supplement = false
style_complete = false
layout_complete = false

# Initialize TodoWrite
TodoWrite({todos: [
  {content: "Initialize and detect design source", status: "completed", activeForm: "Initializing"},
  {content: "Extract style (complete design systems)", status: "pending", activeForm: "Extracting style"},
  {content: "Extract animation (CSS auto mode)", status: "pending", activeForm: "Extracting animation"},
  {content: "Extract layout (structure templates)", status: "pending", activeForm: "Extracting layout"},
  {content: "Assemble UI prototypes", status: "pending", activeForm: "Assembling UI"},
  {content: session_id ? "Integrate design system" : "Standalone completion", status: "pending", activeForm: "Completing"}
]})

Phase 0.5: Code Import & Completeness Assessment (Conditional)

# Only execute if code files detected
IF design_source == "hybrid":
    REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
    REPORT: "🔍 Phase 0.5: Code Import & Analysis"
    REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
    REPORT: "   → Source: {code_base_path}"
    REPORT: "   → Mode: Hybrid (Web + Code)"

    command = "/workflow:ui-design:import-from-code --design-id \"{design_id}\" " +
              "--source \"{code_base_path}\""

    TRY:
        SlashCommand(command)
    CATCH error:
        WARN: "Code import failed: {error}"
        WARN: "Falling back to web-only mode"
        design_source = "web"

    IF design_source == "hybrid":
        # Check file existence and assess completeness
        style_exists = exists("{base_path}/style-extraction/style-1/design-tokens.json")
        animation_exists = exists("{base_path}/animation-extraction/animation-tokens.json")
        layout_count = bash(ls {base_path}/layout-extraction/layout-*.json 2>/dev/null | wc -l)
        layout_exists = (layout_count > 0)

        style_complete = false
        animation_complete = false
        layout_complete = false
        missing_categories = []

        # Style completeness check
        IF style_exists:
            tokens = Read("{base_path}/style-extraction/style-1/design-tokens.json")
            style_complete = (
                tokens.colors?.brand && tokens.colors?.surface &&
                tokens.typography?.font_family && tokens.spacing &&
                Object.keys(tokens.colors.brand || {}).length >= 3 &&
                Object.keys(tokens.spacing || {}).length >= 8
            )
            IF NOT style_complete AND tokens._metadata?.completeness?.missing_categories:
                missing_categories.extend(tokens._metadata.completeness.missing_categories)
        ELSE:
            missing_categories.push("style tokens")

        # Animation completeness check
        IF animation_exists:
            anim = Read("{base_path}/animation-extraction/animation-tokens.json")
            animation_complete = (
                anim.duration && anim.easing &&
                Object.keys(anim.duration || {}).length >= 3 &&
                Object.keys(anim.easing || {}).length >= 3
            )
            IF NOT animation_complete AND anim._metadata?.completeness?.missing_items:
                missing_categories.extend(anim._metadata.completeness.missing_items)
        ELSE:
            missing_categories.push("animation tokens")

        # Layout completeness check
        IF layout_exists:
            # Read first layout file to verify structure
            first_layout = bash(ls {base_path}/layout-extraction/layout-*.json 2>/dev/null | head -1)
            layout_data = Read(first_layout)
            layout_complete = (
                layout_count >= 1 &&
                layout_data.template?.dom_structure &&
                layout_data.template?.css_layout_rules
            )
            IF NOT layout_complete:
                missing_categories.push("complete layout structure")
        ELSE:
            missing_categories.push("layout templates")

        # Report code analysis results
        IF len(missing_categories) > 0:
            REPORT: ""
            REPORT: "⚠️  Code Analysis Partial"
            REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
            REPORT: "Missing Design Elements:"
            FOR category IN missing_categories:
                REPORT: "  • {category}"
            REPORT: ""
            REPORT: "Web screenshots will supplement missing elements"
            REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
        ELSE:
            REPORT: ""
            REPORT: "✅ Code Analysis Complete"
            REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
            REPORT: "All design elements extracted from code"
            REPORT: "Web screenshots will verify and enhance findings"
            REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"

        STORE: style_complete, animation_complete, layout_complete

TodoWrite(mark_completed: "Initialize and detect design source",
          mark_in_progress: "Extract style (complete design systems)")

Phase 2: Style Extraction

# Determine if style extraction needed
skip_style = (design_source == "code_only" AND style_complete)

IF skip_style:
    REPORT: "✅ Phase 2: Style (Using Code Import)"
ELSE:
    REPORT: "🚀 Phase 2: Style Extraction"

    # Build command with available inputs
    command_parts = [f"/workflow:ui-design:style-extract --design-id \"{design_id}\""]

    IF --images:
        command_parts.append(f"--images \"{--images}\"")

    IF --prompt:
        extraction_prompt = --prompt
        IF design_source == "hybrid":
            extraction_prompt = f"{--prompt} (supplement code-imported tokens)"
        command_parts.append(f"--prompt \"{extraction_prompt}\"")

    command_parts.extend(["--variants 1", "--refine", "--interactive"])

    extract_command = " ".join(command_parts)
    SlashCommand(extract_command)

TodoWrite(mark_completed: "Extract style", mark_in_progress: "Extract animation")

Phase 2.3: Animation Extraction

skip_animation = (design_source == "code_only" AND animation_complete)

IF skip_animation:
    REPORT: "✅ Phase 2.3: Animation (Using Code Import)"
ELSE:
    REPORT: "🚀 Phase 2.3: Animation Extraction"

    # Build command with available inputs
    command_parts = [f"/workflow:ui-design:animation-extract --design-id \"{design_id}\""]

    IF --images:
        command_parts.append(f"--images \"{--images}\"")

    IF --prompt:
        command_parts.append(f"--prompt \"{--prompt}\"")

    command_parts.extend(["--refine", "--interactive"])

    animation_extract_command = " ".join(command_parts)
    SlashCommand(animation_extract_command)

TodoWrite(mark_completed: "Extract animation", mark_in_progress: "Extract layout")

Phase 2.5: Layout Extraction

skip_layout = (design_source == "code_only" AND layout_complete)

IF skip_layout:
    REPORT: "✅ Phase 2.5: Layout (Using Code Import)"
ELSE:
    REPORT: "🚀 Phase 2.5: Layout Extraction"

    # Build command with available inputs
    command_parts = [f"/workflow:ui-design:layout-extract --design-id \"{design_id}\""]

    IF --images:
        command_parts.append(f"--images \"{--images}\"")

    IF --prompt:
        command_parts.append(f"--prompt \"{--prompt}\"")

    # Default target if not specified
    command_parts.append("--targets \"home\"")
    command_parts.extend(["--variants 1", "--refine", "--interactive"])

    layout_extract_command = " ".join(command_parts)
    SlashCommand(layout_extract_command)

TodoWrite(mark_completed: "Extract layout", mark_in_progress: "Assemble UI")

Phase 3: UI Assembly

REPORT: "🚀 Phase 3: UI Assembly"
generate_command = f"/workflow:ui-design:generate --design-id \"{design_id}\" --style-variants 1 --layout-variants 1"
SlashCommand(generate_command)

TodoWrite(mark_completed: "Assemble UI", mark_in_progress: session_id ? "Integrate design system" : "Completion")

Phase 4: Design System Integration

IF session_id:
    REPORT: "🚀 Phase 4: Design System Integration"
    update_command = f"/workflow:ui-design:update --session {session_id}"
    SlashCommand(update_command)

# Update metadata
metadata = Read("{base_path}/.run-metadata.json")
metadata.status = "completed"
metadata.completion_time = current_timestamp()
metadata.outputs = {
    "screenshots": f"{base_path}/screenshots/",
    "style_system": f"{base_path}/style-extraction/style-1/",
    "prototypes": f"{base_path}/prototypes/",
    "captured_count": captured_count,
    "generated_count": generated_count
}
Write("{base_path}/.run-metadata.json", JSON.stringify(metadata, null, 2))

TodoWrite(mark_completed: session_id ? "Integrate design system" : "Standalone completion")

# Mark all phases complete
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 style (complete design systems)", status: "completed", activeForm: "Extracting"},
  {content: "Extract animation (CSS auto mode)", status: "completed", activeForm: "Extracting animation"},
  {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"}
]})

Phase 4: Completion Report

Completion Message:

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✅ UI Design Imitate-Auto Complete!
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

━━━ 📊 Workflow Summary ━━━

Mode: Direct Input ({design_source})
Session: {session_id or "standalone"}
Run ID: {run_id}

Phase 0 - Input Detection: ✅ {design_source} mode
  {IF design_source == "code_only": "Code files imported" ELSE IF design_source == "hybrid": "Code + visual inputs" ELSE: "Visual inputs"}

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 2.3 - Animation Extraction: ✅ Animation tokens
  Output: animation-extraction/ (animation-tokens.json + animation-guide.md)

Phase 2.5 - Layout Extraction: ✅ Structure templates
  Templates: {template_count} layout structures

Phase 3 - UI Assembly: ✅ {generated_count} prototypes assembled
  Configuration: 1 style × 1 layout × {generated_count} pages

Phase 4 - Integration: {IF session_id: "✅ Integrated into session" ELSE: "⏭️ Standalone mode"}

━━━ 📂 Output Structure ━━━

{base_path}/
├── style-extraction/               # Production-ready design systems
│   └── style-1/
│       ├── design-tokens.json
│       └── style-guide.md
├── animation-extraction/           # CSS animations and transitions
│   ├── animation-tokens.json
│   └── animation-guide.md
├── layout-extraction/              # Structure templates
│   └── layout-home-1.json          # Layout templates
└── prototypes/                     # {generated_count} HTML/CSS files
    ├── home-style-1-layout-1.html + .css
    ├── compare.html                # Interactive preview
    └── index.html                  # Quick navigation

━━━ ⚡ Performance ━━━

Total workflow time: ~{estimate_total_time()} minutes
  Style extraction: ~{extract_time}
  Animation extraction: ~{animation_time}
  Layout extraction: ~{layout_time}
  UI generation: ~{generate_time}

━━━ 🌐 Next Steps ━━━

1. Preview prototypes:
   • Interactive matrix: Open {base_path}/prototypes/compare.html
   • Quick navigation: Open {base_path}/prototypes/index.html

{IF session_id:
2. Create implementation tasks:
   /workflow:plan --session {session_id}

3. Generate tests (if needed):
   /workflow:test-gen {session_id}
ELSE:
2. To integrate into a workflow session:
   • Create session: /workflow:session:start
   • Copy design-tokens.json to session artifacts

3. Explore prototypes in {base_path}/prototypes/ directory
}

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

TodoWrite Pattern

// Initialize IMMEDIATELY at start of Phase 0 to track multi-phase execution
TodoWrite({todos: [
  {content: "Initialize and detect design source", status: "in_progress", activeForm: "Initializing"},
  {content: "Extract style (complete design systems)", status: "pending", activeForm: "Extracting style"},
  {content: "Extract animation (CSS auto mode)", status: "pending", activeForm: "Extracting animation"},
  {content: "Extract layout (structure templates)", status: "pending", activeForm: "Extracting layout"},
  {content: "Assemble UI prototypes", status: "pending", activeForm: "Assembling UI"},
  {content: "Integrate design system", status: "pending", activeForm: "Integrating"}
]})

// ⚠️ CRITICAL: When each SlashCommand execution finishes (Phase 2-4), you MUST:
// 1. SlashCommand blocks and returns when phase finishes executing
// 2. Update current phase: status → "completed"
// 3. Update next phase: status → "in_progress"
// 4. IMMEDIATELY execute next phase SlashCommand (auto-continue)
// This ensures continuous workflow tracking and prevents premature stopping

Error Handling

Pre-execution Checks

• Input validation: Must provide at least one of --images or --prompt
• Design source detection: Error if no valid inputs found
• Code import failure: Fallback to visual-only mode in hybrid, error in code-only mode

Phase-Specific Errors

• Code import failure (Phase 0.5):

  • code_only mode: Terminate with clear error
  • hybrid mode: Warn and fallback to visual-only mode

• Style extraction failure (Phase 2):

  • If extract fails: Terminate with clear error
  • If design-tokens.json missing: Terminate with debugging info

• Animation extraction failure (Phase 2.3):

  • Non-critical: Warn but continue
  • Can proceed without animation tokens

• Layout extraction failure (Phase 2.5):

  • If extract fails: Terminate with error
  • Need layout templates for assembly

• UI generation failure (Phase 3):

  • If generate fails: Terminate with error
  • If generated_count < expected: Warn but proceed

• Integration failure (Phase 4):

  • Non-blocking: Warn but don't terminate
  • Prototypes already available

Recovery Strategies

• Code import failure: Automatic fallback to visual-only in hybrid mode
• Generate failure: Report specific failures, user can re-generate individually
• Integration failure: Prototypes still usable, can integrate manually

Integration Points

• Input: --images (glob pattern) and/or --prompt (text/file paths) + optional --session
• Output: Complete design system in {base_path}/ (style-extraction, layout-extraction, prototypes)
• Sub-commands Called:
  1. /workflow:ui-design:import-from-code (Phase 0.5, conditional - if code files detected)
  2. /workflow:ui-design:style-extract (Phase 2 - complete design systems)
  3. /workflow:ui-design:animation-extract (Phase 2.3 - animation tokens)
  4. /workflow:ui-design:layout-extract (Phase 2.5 - structure templates)
  5. /workflow:ui-design:generate (Phase 3 - pure assembly)
  6. /workflow:ui-design:update (Phase 4, if --session)

Completion Output

✅ UI Design Imitate-Auto Workflow Complete!

Mode: Direct Input ({design_source}) | Session: {session_id or "standalone"}
Run ID: {run_id}

Phase 0 - Input Detection: ✅ {design_source} mode
Phase 2 - Style Extraction: ✅ Production-ready design systems
Phase 2.3 - Animation Extraction: ✅ Animation tokens
Phase 2.5 - Layout Extraction: ✅ Structure templates
Phase 3 - UI Assembly: ✅ {generated_count} prototypes assembled
Phase 4 - Integration: {IF session_id: "✅ Integrated" ELSE: "⏭️ Standalone"}

Design Quality:
✅ Token-Driven Styling: 100% var() usage
✅ Production-Ready: WCAG AA compliant, OKLCH colors
✅ Multi-Source: Code import + visual extraction

📂 {base_path}/
  ├── style-extraction/style-1/     # Production-ready design system
  ├── animation-extraction/         # Animation tokens
  ├── layout-extraction/            # Structure templates
  └── prototypes/                   # {generated_count} HTML/CSS files

🌐 Preview: {base_path}/prototypes/compare.html
  - Interactive preview
  - Design token driven
  - {generated_count} assembled prototypes

Next: [/workflow:execute] OR [Open compare.html → /workflow:plan]