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

name, description, usage, argument-hint, examples, allowed-tools

name	description	usage	argument-hint	examples	allowed-tools
imitate-auto	Imitation-focused UI design workflow - Rapidly replicate a single design style from URL or images (skip exploration, direct to implementation)	/workflow:ui-design:imitate-auto [--url "<url>"] [--images "<glob>"] [--prompt "<desc>"] [--pages "<list>"] [--session <id>]	[--url "https://example.com"] [--images "refs/*.png"] [--prompt "Imitate dark mode style"] [--pages "dashboard,settings"]	/workflow:ui-design:imitate-auto --url "https://linear.app" --pages "home,features,pricing" /workflow:ui-design:imitate-auto --images "refs/design.png" --prompt "Imitate this minimalist design for dashboard and settings" /workflow:ui-design:imitate-auto --url "https://stripe.com" --session WFS-payment /workflow:ui-design:imitate-auto --images "refs/*.png" --pages "home"	SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*)

UI Design Imitate-Auto Workflow Command

Overview

Fast-track UI design workflow optimized for imitating a single design style from a reference source (URL or images). This command skips the exploration and consolidation phases, directly generating production-ready prototypes based on the provided reference.

Core Philosophy

• Imitation over Exploration: Focus on replicating a specific design, not generating variants
• Single Style: Always generates one design system (no style matrix)
• Single Layout: Generates one layout per page (no layout exploration)
• Speed Optimized: Skips consolidate step, uses direct token extraction
• Reference-Driven: Requires URL or images as primary input source

Execution Model - Streamlined Workflow

This workflow is optimized for speed and simplicity:

1. User triggers: /workflow:ui-design:imitate-auto --url "..." --pages "..."
2. Phase 0 executes (simplified initialization) → Auto-continues
3. Phase 0.5 executes (URL screenshot capture with auto-fallback) → Auto-continues
4. Phase 1 executes (single style extraction, forced --variants 1) → Auto-continues
5. Phase 2 executes (fast token adaptation, bypasses consolidate) → Auto-continues
6. Phase 3 executes (single prototype generation, forced 1×1 mode) → Auto-continues
7. Phase 4 executes (design integration) → Complete

Performance: ~2-3× faster than explore-auto for single-style scenarios Screenshot Automation: Supports Playwright and Chrome DevTools with manual upload fallback

Core Rules

1. Start Immediately: First action is TodoWrite initialization, second action is Phase 0 execution
2. No Multi-Variant: Always generates exactly 1 style × 1 layout × N pages
3. Reference Required: Must provide --url OR --images (at least one)
4. Auto-Continue: After each phase, automatically proceed to the next without pausing
5. Track Progress: Update TodoWrite after every phase completion

Parameter Requirements

Required Parameters (at least one):

• --url "<url>": Website URL to imitate (e.g., "https://linear.app")
• --images "<glob_pattern>": Local reference images (e.g., "refs/*.png")

Optional Parameters:

• --pages "<page_list>": Pages to generate (default: "home")
• --session <session_id>": Workflow session ID for integration (optional, standalone if omitted)
• --prompt "<description>": Additional design guidance (e.g., "Focus on dark mode", "Imitate card-based layout")

Removed Parameters (not supported):

• --style-variants: Always 1 (single style focus)
• --layout-variants: Always 1 (single layout focus)
• --batch-plan: Not supported in imitate mode

5-Phase Execution

Phase 0: Simplified Initialization

# Generate run ID with timestamp
run_id = "run-$(date +%Y%m%d-%H%M%S)"

# Determine base path
IF --session:
    session_id = {provided_session}
    base_path = ".workflow/WFS-{session_id}/runs/${run_id}"
ELSE:
    # Standalone mode: use scratchpad
    session_id = "imitate-session-$(date +%Y%m%d-%H%M%S)"
    base_path = ".workflow/.scratchpad/${session_id}/runs/${run_id}"

# Create run directory structure (simpler than explore-auto)
Bash(mkdir -p "${base_path}/.design/style-extraction")
Bash(mkdir -p "${base_path}/.design/style-consolidation/style-1")
Bash(mkdir -p "${base_path}/.design/prototypes")

# Initialize run metadata
Write({base_path}/.run-metadata.json):
{
  "run_id": "${run_id}",
  "session_id": "${session_id}",
  "timestamp": "$(date -u +%Y-%m-%dT%H:%M:%SZ)",
  "workflow": "ui-design:imitate-auto",
  "mode": "single_style_imitation",
  "parameters": {
    "url": "${url_value}",
    "images": "${images_pattern}",
    "pages": "${inferred_page_list}",
    "prompt": "${prompt_text}"
  },
  "status": "in_progress"
}

# Page inference (simplified, no interactive confirmation)
IF --pages provided:
    page_list = split_and_clean({--pages value}, delimiters=[",", ";", "、"])
    page_list = [p.strip().lower().replace(" ", "-") for p in page_list if p.strip()]
    page_source = "explicit"
ELSE IF --prompt provided:
    # Simple extraction from prompt
    # Look for patterns like "for dashboard and settings" or "pages: home, about"
    page_list = extract_pages_from_prompt(prompt_text)
    page_source = "prompt_inferred"
    IF NOT page_list:
        page_list = ["home"]
        page_source = "default"
ELSE:
    page_list = ["home"]
    page_source = "default"

# Validate page names
validated_pages = []
FOR page IN page_list:
    cleaned_page = page.strip().lower().replace(" ", "-")
    IF regex_match(cleaned_page, r"^[a-z0-9][a-z0-9_-]*$"):
        validated_pages.append(cleaned_page)

IF NOT validated_pages:
    validated_pages = ["home"]

REPORT: "📋 Imitate mode: Generating {len(validated_pages)} pages with single style"
REPORT: "   Pages: {', '.join(validated_pages)}"
REPORT: "   Reference: {url_value OR images_pattern}"

STORE: run_id, base_path, inferred_page_list = validated_pages

---

Phase 0.5: URL Screenshot Capture (Auto-Fallback)

Condition: Only executes if --url is provided

Purpose: Automatically capture screenshots from the URL to ensure visual reference is available for style extraction. If automated capture fails, prompts user to provide manual screenshots.

Execution:

IF --url provided:
    REPORT: "📸 Phase 0.5: Capturing screenshots from URL..."

    # Create screenshots directory
    screenshot_dir = "{base_path}/.design/screenshots"
    Bash(mkdir -p "{screenshot_dir}")

    # Try automated screenshot methods
    screenshot_success = false
    screenshot_files = []

    # Method 1: Playwright CLI (preferred, if available)
    TRY:
        REPORT: "   Attempting Playwright screenshot..."
        Bash(
          npx playwright screenshot "{url_value}" "{screenshot_dir}/full-page.png" --full-page --timeout 30000
        )
        screenshot_files.append("{screenshot_dir}/full-page.png")
        screenshot_success = true
        REPORT: "   ✅ Playwright screenshot captured"
    CATCH:
        REPORT: "   ⚠️ Playwright not available or failed"

    # Method 2: Chrome DevTools Protocol (fallback)
    IF NOT screenshot_success:
        TRY:
            REPORT: "   Attempting Chrome headless screenshot..."
            Bash(
              google-chrome --headless --disable-gpu --screenshot="{screenshot_dir}/full-page.png" --window-size=1920,1080 "{url_value}"
            )
            screenshot_files.append("{screenshot_dir}/full-page.png")
            screenshot_success = true
            REPORT: "   ✅ Chrome headless screenshot captured"
        CATCH:
            REPORT: "   ⚠️ Chrome headless not available or failed"

    # If both automated methods fail, prompt user for manual screenshot
    IF NOT screenshot_success:
        REPORT: ""
        REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
        REPORT: "⚠️  AUTOMATED SCREENSHOT FAILED"
        REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
        REPORT: "Unable to automatically capture screenshot from: {url_value}"
        REPORT: ""
        REPORT: "Please provide a manual screenshot:"
        REPORT: "  1. Visit the URL in your browser: {url_value}"
        REPORT: "  2. Take a full-page screenshot"
        REPORT: "  3. Save it to: {screenshot_dir}/"
        REPORT: ""
        REPORT: "Options:"
        REPORT: "  • Type 'ready' when screenshot is saved"
        REPORT: "  • Type 'skip' to use URL analysis only (lower quality)"
        REPORT: "  • Type 'abort' to cancel the workflow"
        REPORT: ""
        REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"

        # Wait for user input
        user_response = WAIT_FOR_USER_INPUT()

        IF user_response MATCHES r"^(ready|done|ok)$":
            # Check if user provided screenshot
            screenshot_files = Glob("{screenshot_dir}/*.{png,jpg,jpeg}")
            IF screenshot_files:
                screenshot_success = true
                REPORT: "✅ Manual screenshot detected: {', '.join(screenshot_files)}"
            ELSE:
                REPORT: "❌ No screenshot found in {screenshot_dir}/"
                REPORT: "   Workflow will use URL analysis only (may result in lower quality)"
        ELSE IF user_response MATCHES r"^skip$":
            REPORT: "⏭️  Skipping screenshot, using URL analysis only"
            screenshot_success = false
        ELSE IF user_response MATCHES r"^abort$":
            ERROR: "Workflow aborted by user"
            EXIT
        ELSE:
            REPORT: "⚠️ Invalid input, proceeding with URL analysis only"
            screenshot_success = false

    # Store screenshot info for Phase 1
    IF screenshot_success:
        STORE: screenshot_mode = "with_screenshots"
        STORE: screenshot_paths = screenshot_files
        REPORT: "✅ Screenshot capture complete: {len(screenshot_files)} image(s)"
    ELSE:
        STORE: screenshot_mode = "url_only"
        STORE: screenshot_paths = []
        REPORT: "ℹ️  Proceeding with URL analysis only (no screenshots)"
ELSE:
    # No URL provided, must use --images
    STORE: screenshot_mode = "manual_images"
    STORE: screenshot_paths = []
    REPORT: "ℹ️  Using provided images (--images parameter)"

Auto-Continue: On completion, proceeds to Phase 1

---

Phase 1: Single Style Extraction

Command Construction:

# Determine input flags based on screenshot capture results
IF screenshot_mode == "with_screenshots":
    # Use captured screenshots instead of URL
    screenshot_glob = "{base_path}/.design/screenshots/*.{png,jpg,jpeg}"
    images_flag = "--images \"{screenshot_glob}\""
    url_flag = ""
    source_desc = "captured screenshots from {url_value}"
ELSE IF screenshot_mode == "url_only":
    # Use URL directly (Claude can analyze URLs)
    url_flag = "--url \"{url_value}\""
    images_flag = ""
    source_desc = "URL analysis of {url_value}"
ELSE IF screenshot_mode == "manual_images":
    # Use user-provided images
    images_flag = --images present ? "--images \"{image_glob}\"" : ""
    url_flag = ""
    source_desc = "user-provided images"
ELSE:
    # Fallback
    url_flag = --url present ? "--url \"{url_value}\"" : ""
    images_flag = --images present ? "--images \"{image_glob}\"" : ""
    source_desc = "provided references"

# Add user prompt if provided
prompt_flag = --prompt present ? "--prompt \"{prompt_text}\"" : ""

# Use run-scoped base path and FORCE --variants 1
run_base_flag = "--base-path \"{base_path}/.design\""

# Construct optimized extraction prompt for imitation
enhanced_prompt = "Extract a single, high-fidelity design system that accurately imitates the visual style from {source_desc}. {prompt_text}"

# Force single variant extraction
command = "/workflow:ui-design:extract {run_base_flag} {url_flag} {images_flag} --prompt \"{enhanced_prompt}\" --variants 1"

REPORT: "🚀 Executing Phase 1: Style Extraction"
REPORT: "   Source: {source_desc}"
REPORT: "   Mode: Single style (imitation-optimized)"

SlashCommand(command=command)

Auto-Continue: On completion, proceeds to Phase 2

---

Phase 2: Fast Token Adaptation (Bypass Consolidate)

Action: Direct extraction of design tokens from the single style card, bypassing the heavy consolidate step

Execution:

REPORT: "🚀 Phase 2: Fast token adaptation (bypassing consolidate for speed)"

# Read the single style card from extraction output
style_cards = Read({base_path}/.design/style-extraction/style-cards.json)
style_card = style_cards.style_cards[0]  # Only one card in imitate mode

# Extract components
design_tokens = style_card.proposed_tokens
philosophy = style_card.design_philosophy
style_name = style_card.name

# Create minimal design system structure (generate needs this)
# Write design-tokens.json directly from proposed_tokens
Write({base_path}/.design/style-consolidation/style-1/design-tokens.json, JSON.stringify(design_tokens, null, 2))

# Create minimal style-guide.md (simpler than consolidate output)
Write({base_path}/.design/style-consolidation/style-1/style-guide.md):
# Design System: {style_name}

## Design Philosophy
{philosophy}

## Description
{style_card.description}

## Design Tokens
All design tokens are defined in `design-tokens.json` and follow the OKLCH color space standard.

**Key Colors**:
- Primary: {design_tokens.colors.brand.primary}
- Background: {design_tokens.colors.surface.background}
- Text: {design_tokens.colors.text.primary}

**Typography**:
- Heading Font: {design_tokens.typography.font_family.heading}
- Body Font: {design_tokens.typography.font_family.body}

**Spacing Scale**: {design_tokens.spacing.keys().length} values

**Note**: This design system was generated in imitate mode, optimized for fast replication of the reference source.

# Create minimal tailwind.config.js (optional, for convenience)
Write({base_path}/.design/style-consolidation/style-1/tailwind.config.js):
module.exports = {
  theme: {
    extend: {
      colors: ${JSON.stringify(design_tokens.colors, null, 6)},
      fontFamily: ${JSON.stringify(design_tokens.typography.font_family, null, 6)},
      spacing: ${JSON.stringify(design_tokens.spacing, null, 6)},
      borderRadius: ${JSON.stringify(design_tokens.border_radius, null, 6)},
    }
  }
}

REPORT: "✅ Design tokens extracted and formatted"
REPORT: "   Style: {style_name}"
REPORT: "   Bypassed consolidate step for {performance_gain}× speed improvement"

Auto-Continue: On completion, proceeds to Phase 3

---

Phase 3: Single Prototype Generation

Command Construction:

run_base_flag = "--base-path \"{base_path}/.design\""
pages_string = ",".join(inferred_page_list)
pages_flag = "--pages \"{pages_string}\""

# Force single style and single layout
command = "/workflow:ui-design:generate {run_base_flag} {pages_flag} --style-variants 1 --layout-variants 1"

REPORT: "🚀 Executing Phase 3: Generating {len(inferred_page_list)} prototype(s)"
REPORT: "   Mode: Single style × Single layout (optimized for imitation)"

SlashCommand(command=command)

Result: Generates 1 × 1 × N prototypes (where N = number of pages)

• File naming: {page}-style-1-layout-1.html
• Total prototypes: len(inferred_page_list)

Auto-Continue: On completion, proceeds to Phase 4

---

Phase 4: Design System Integration

Command Construction:

IF --session:
    session_flag = "--session {session_id}"
    command = "/workflow:ui-design:update {session_flag}"
    SlashCommand(command=command)
ELSE:
    REPORT: "ℹ️ Standalone mode: Skipping design system integration (no session provided)"
    REPORT: "   Prototypes available at: {base_path}/.design/prototypes/"

Completion: Workflow is now complete

TodoWrite Pattern

// Initialize (before Phase 0)
TodoWrite({todos: [
  {"content": "Initialize run directory and infer pages", "status": "in_progress", "activeForm": "Initializing"},
  {"content": "Capture screenshots from URL (if provided)", "status": "pending", "activeForm": "Capturing screenshots"},
  {"content": "Extract single design style from reference", "status": "pending", "activeForm": "Extracting style"},
  {"content": "Adapt tokens (bypass consolidate)", "status": "pending", "activeForm": "Adapting tokens"},
  {"content": "Generate single-style prototypes", "status": "pending", "activeForm": "Generating prototypes"},
  {"content": "Integrate design system", "status": "pending", "activeForm": "Integrating design"}
]})

// Update after each phase...

Error Handling

• No reference source: Error if neither --url nor --images provided
• Screenshot capture failure:
  • Tries 2 automated methods in sequence: Playwright → Chrome DevTools
  • Falls back to manual screenshot upload if both fail
  • User can choose: upload manual screenshot, skip screenshots, or abort
• Invalid URL: Report URL fetch failure, suggest using --images instead
• Missing images: Report glob pattern error, suggest checking file paths
• Token extraction failure: Fallback to a minimal default design system
• Playwright/Chrome not installed: Gracefully prompts user to upload manual screenshot

Key Differences from explore-auto

Aspect	explore-auto	imitate-auto
Purpose	Explore multiple design options	Replicate specific design
Input	Optional URL/images	Required URL or images
Variants	1-5 styles × 1-5 layouts	Always 1 × 1 (single)
Consolidate	Full consolidation with validation	Bypassed (direct token extraction)
Speed	Baseline	~2-3× faster
Output	Design matrix (S×L×P prototypes)	Direct prototypes (1×1×P)
Use Case	Design exploration, need options	Fast prototyping, have reference

Performance Benefits

1. Skipped consolidate: Saves ~30-60s per run (most expensive phase)
2. Single variant: Reduces extraction complexity
3. Direct token mapping: Simple file operations vs AI synthesis
4. Streamlined decisions: No variant selection or confirmation needed

Workflow Position

This workflow is ideal for:

• MVP Development: Quickly create UI based on a competitor or design reference
• High-Fidelity Prototyping: Convert designs to code rapidly
• Design Replication: Imitate specific visual styles from existing sites
• Learning: Study and recreate successful design patterns

NOT ideal for:

• Generating multiple design alternatives
• Design exploration without clear reference
• Creating completely novel designs

Example Execution Flows

Example 1: Imitate from URL (with Auto-Screenshot)

/workflow:ui-design:imitate-auto --url "https://linear.app" --pages "home,features,pricing"

# Execution:
# 0. Initialize: 3 pages identified
# 0.5. Screenshot: Playwright captures full-page screenshot of linear.app
# 1. Extract: Single style from captured screenshot
# 2. Adapt: Direct token extraction (~2s vs consolidate's ~45s)
# 3. Generate: 3 prototypes (home, features, pricing)
# 4. Complete

# Total time: ~2-3 minutes (vs 5-7 minutes with explore-auto)
# Screenshot: Automatically saved to .design/screenshots/

Example 2: Imitate from Images with Guidance

/workflow:ui-design:imitate-auto --images "refs/dark-theme.png" --prompt "Focus on dark mode color palette" --pages "dashboard"

# Execution:
# 0. Initialize: 1 page (dashboard)
# 0.5. Screenshot: Skipped (using provided images)
# 1. Extract: Single style from image, dark mode emphasis
# 2. Adapt: Direct token extraction
# 3. Generate: 1 prototype (dashboard-style-1-layout-1.html)
# 4. Complete (standalone mode, no integration)

Example 3: URL with Manual Screenshot Upload

/workflow:ui-design:imitate-auto --url "https://stripe.com/pricing" --pages "pricing"

# Execution:
# 0. Initialize: 1 page (pricing)
# 0.5. Screenshot:
#      ⚠️ Playwright not available
#      ⚠️ Chrome headless not available
#      📸 Prompting user to upload manual screenshot...
#
#      ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
#      ⚠️  AUTOMATED SCREENSHOT FAILED
#      ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
#      Please provide a manual screenshot:
#        1. Visit: https://stripe.com/pricing
#        2. Take a full-page screenshot
#        3. Save to: .design/screenshots/
#
#      Options:
#        • Type 'ready' when screenshot is saved
#        • Type 'skip' to use URL analysis only
#        • Type 'abort' to cancel
#
#      User saves screenshot and types 'ready' → ✅ Workflow continues
#      OR
#      User types 'skip' → ⚠️ Uses URL analysis only
# 1. Extract: Single style from screenshot or URL
# 2. Adapt: Direct token extraction
# 3. Generate: 1 prototype
# 4. Complete

Final Completion Message

✅ UI Design Imitation Complete!

Mode: Single Style Replication
Run ID: {run_id}
Session: {session_id or "standalone"}
Reference: {url OR images}

Phase 0 - Initialization: {page_count} pages prepared
Phase 0.5 - Screenshot Capture: {screenshot_status}
  {IF screenshot_success: ✅ Screenshot captured via {method} (Playwright/Chrome/Manual)}
  {ELSE: ⚠️ Using URL analysis only}
Phase 1 - Style Extraction: Single design style extracted
Phase 2 - Token Adaptation: Bypassed consolidate (⚡ {time_saved}s saved)
Phase 3 - Prototype Generation: {page_count} prototypes created
Phase 4 - Design Integration: {integrated OR "Standalone mode - No integration"}

📂 Output: {base_path}/.design/
  ├── style-extraction/style-cards.json (1 style card)
  ├── style-consolidation/style-1/ (design tokens)
  └── prototypes/ ({page_count} HTML/CSS files)

🌐 Preview: Open {base_path}/.design/prototypes/index.html

Performance:
- Design system creation: ~{time}s (vs ~{consolidate_time}s with consolidate)
- Total workflow time: ~{total_time}s
- Speed improvement: ~{improvement}× faster than explore-auto

{IF session mode:
Next: /workflow:plan to create implementation tasks
}
{ELSE:
Prototypes ready for direct use at: {base_path}/.design/prototypes/
}