imitate-auto

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 [--input "..."]
2. Phase 0: Initialize and detect input sources
3. Phase 2: Style extraction → Attach tasks → Execute → Collapse → Auto-continues
4. Phase 2.3: Animation extraction → Attach tasks → Execute → Collapse → Auto-continues
5. Phase 2.5: Layout extraction → Attach tasks → Execute → Collapse → Auto-continues
6. Phase 3: Batch UI assembly → Attach tasks → Execute → Collapse → Auto-continues
7. Phase 4: Design system integration → Execute orchestrator task → Reports completion

Phase Transition Mechanism:

• Task Attachment: Skill execute ATTACHES tasks to current workflow
• Task Execution: Orchestrator EXECUTES these attached tasks itself
• Task Collapse: After tasks complete, collapse them into phase summary
• Phase Transition: Automatically execute next phase after collapsing
• No user interaction required after initial parameter parsing

Auto-Continue Mechanism: TodoWrite tracks phase status with dynamic task attachment/collapse. After executing all attached tasks, you MUST immediately collapse them, restore phase summary, and execute the next phase. No user intervention required. The workflow is NOT complete until reaching Phase 4.

Task Attachment Model: Skill execute is NOT delegation - it's task expansion. The orchestrator executes these attached tasks itself, not waiting for external completion.

Execution Process

Input Parsing:
   ├─ Parse flags: --input, --session (legacy: --images, --prompt)
   └─ Decision (input detection):
      ├─ Contains * or glob matches → images_input (visual)
      ├─ File/directory exists → code import source
      └─ Pure text → design prompt

Phase 0: Parameter Parsing & Input Detection
   ├─ Step 1: Normalize parameters (legacy deprecation warning)
   ├─ Step 2: Detect design source (hybrid | code_only | visual_only)
   └─ Step 3: Initialize directories and metadata

Phase 0.5: Code Import (Conditional)
   └─ Decision (design_source):
      ├─ hybrid → Execute /workflow:ui-design:import-from-code
      └─ Other → Skip to Phase 2

Phase 2: Style Extraction
   └─ Decision (skip_style):
      ├─ code_only AND style_complete → Use code import
      └─ Otherwise → Execute /workflow:ui-design:style-extract

Phase 2.3: Animation Extraction
   └─ Decision (skip_animation):
      ├─ code_only AND animation_complete → Use code import
      └─ Otherwise → Execute /workflow:ui-design:animation-extract

Phase 2.5: Layout Extraction
   └─ Decision (skip_layout):
      ├─ code_only AND layout_complete → Use code import
      └─ Otherwise → Execute /workflow:ui-design:layout-extract

Phase 3: UI Assembly
   └─ Execute /workflow:ui-design:generate

Phase 4: Design System Integration
   └─ Decision (session_id):
      ├─ Provided → Execute /workflow:ui-design:update
      └─ Not provided → Standalone completion