generate

Generate UI Prototypes (/workflow:ui-design:generate)

Overview

Pure assembler that combines pre-extracted layout templates with design tokens to generate UI prototypes (style × layout × targets). No layout design logic - purely combines existing components.

Strategy: Pure Assembly

• Input: layout-*.json files + design-tokens.json (+ reference images if available)
• Process: Combine structure (DOM) with style (tokens)
• Output: Complete HTML/CSS prototypes
• No Design Logic: All layout and style decisions already made
• Automatic Image Reference: If source images exist in layout templates, they're automatically used for visual context

Prerequisite Commands:

• /workflow:ui-design:style-extract → Complete design systems (design-tokens.json + style-guide.md)
• /workflow:ui-design:layout-extract → Layout structure

Execution Process

Input Parsing:
   ├─ Parse flags: --design-id, --session
   └─ Decision (base path resolution):
      ├─ --design-id provided → Exact match by design ID
      ├─ --session provided → Latest in session
      └─ No flags → Latest globally

Phase 1: Setup & Validation
   ├─ Step 1: Resolve base path & parse configuration
   ├─ Step 2: Load layout templates
   ├─ Step 3: Validate design tokens
   └─ Step 4: Load animation tokens (optional)

Phase 2: Assembly (Agent)
   ├─ Step 1: Calculate agent grouping plan
   │  └─ Grouping rules:
   │     ├─ Style isolation: Each agent processes ONE style
   │     ├─ Balanced distribution: Layouts evenly split
   │     └─ Max 10 layouts per agent, max 6 concurrent agents
   ├─ Step 2: Launch batched assembly tasks (parallel)
   └─ Step 3: Verify generated files

Phase 3: Generate Preview Files
   ├─ Step 1: Run preview generation script
   └─ Step 2: Verify preview files

Phase 1: Setup & Validation

Step 1: Resolve Base Path & Parse Configuration

# Determine base path with priority: --design-id > --session > auto-detect
if [ -n "$DESIGN_ID" ]; then
  # Exact match by design ID
  relative_path=$(find .workflow -name "${DESIGN_ID}" -type d -print -quit)
elif [ -n "$SESSION_ID" ]; then
  # Latest in session
  relative_path=$(find .workflow/active/WFS-$SESSION_ID -name "design-run-*" -type d -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2)
else
  # Latest globally
  relative_path=$(find .workflow -name "design-run-*" -type d -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2)
fi

# Validate and convert to absolute path
if [ -z "$relative_path" ] || [ ! -d "$relative_path" ]; then
  echo "❌ ERROR: Design run not found"
  echo "💡 HINT: Run '/workflow:ui-design:list' to see available design runs"
  exit 1
fi

base_path=$(cd "$relative_path" && pwd)
bash(echo "✓ Base path: $base_path")

# Get style count
bash(ls "$base_path"/style-extraction/style-* -d | wc -l)

# Image reference auto-detected from layout template source_image_path