diff --git a/.claude/agents/ui-design-agent.md b/.claude/agents/ui-design-agent.md index 3dea303d..a85e802c 100644 --- a/.claude/agents/ui-design-agent.md +++ b/.claude/agents/ui-design-agent.md @@ -58,6 +58,39 @@ You are a specialized **UI Design Agent** that executes design generation tasks - `{target}-layout-{id}.html`: Style-agnostic HTML structure - `{target}-layout-{id}.css`: Token-driven structural CSS +**⚠ī¸ CRITICAL: CSS Placeholder Links** + +When generating HTML templates, you MUST include these EXACT placeholder links in the `` section: + +```html + + +``` + +**Placeholder Rules**: +1. Use EXACTLY `{{STRUCTURAL_CSS}}` and `{{TOKEN_CSS}}` with double curly braces +2. Place in `` AFTER `` tags, BEFORE `` closing tag +3. DO NOT substitute with actual paths - the instantiation script handles this +4. DO NOT add any other CSS `` tags +5. These enable runtime style switching for all variants + +**Example HTML Template Structure**: +```html + + + + + + {target} - Layout {id} + + + + + + + +``` + **Quality Gates**: đŸŽ¯ ADAPTIVE (multi-device), 🔄 STYLE-SWITCHABLE (runtime theme switching), 🏗ī¸ SEMANTIC (HTML5), â™ŋ ACCESSIBLE (WCAG AA), 📱 MOBILE-FIRST, 🎨 TOKEN-DRIVEN (zero hardcoded values) ### 4. Consistency Validation diff --git a/.claude/commands/workflow/ui-design/generate.md b/.claude/commands/workflow/ui-design/generate.md index 01df46fe..f41291d0 100644 --- a/.claude/commands/workflow/ui-design/generate.md +++ b/.claude/commands/workflow/ui-design/generate.md @@ -137,120 +137,43 @@ FOR target IN target_list: Task(ui-design-agent): " [TARGET_LAYOUT_PLANNING] - Generate a concrete, actionable layout plan for a specific target and WRITE it to the file system. - - ## Context - TARGET: {target} - TARGET_TYPE: {target_type} - LAYOUT_ID: {layout_id} + TARGET: {target} | TARGET_TYPE: {target_type} | LAYOUT_ID: {layout_id} BASE_PATH: {base_path} - {IF --session: PROJECT_REQUIREMENTS: Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md)} + {IF --session: PROJECT_REQUIREMENTS: .workflow/WFS-{session}/.brainstorming/synthesis-specification.md} ## Task - Research, design, and WRITE a modern, innovative layout plan specifically for '{target}'. + Research and generate layout plan JSON for '{target}' ({target_type}). - ## Research Phase (Use MCP Tools) - 1. Search for modern {target_type} layout patterns: - mcp__exa__get_code_context_exa( - query=\"modern {target} {target_type} layout design patterns 2024 2025\", - tokensNum=\"dynamic\" - ) - 2. Search for {target}-specific UI best practices + ## Research (MCP Required) + mcp__exa__get_code_context_exa( + query=\"modern {target} {target_type} layout patterns 2024 2025\", + tokensNum=\"dynamic\" + ) - ## Layout Planning Rules + ## Output File + Write(\"{base_path}/prototypes/_templates/{target}-layout-{layout_id}.json\", layout_plan_json) - **For PAGES (target_type='page')**: - - Define macro-layout: main regions (header, sidebar, main, footer) - - Specify grid/flexbox structure for content organization - - Define responsive breakpoints and behavior - - Include navigation and page-level components - - **For COMPONENTS (target_type='component')**: - - Define micro-layout: internal element arrangement - - Specify alignment, spacing, and element sizing - - Focus on component-specific structure (no header/footer) - - Optimize for reusability and composition - - ## File Write Instructions - Generate layout plan JSON and WRITE it using Write() tool: - - **Path**: {base_path}/prototypes/_templates/{target}-layout-{layout_id}.json - - **Content** - JSON with this EXACT structure: + ## JSON Structure (Required Fields) ```json { - \"id\": \"layout-{layout_id}\", - \"target\": \"{target}\", - \"target_type\": \"{target_type}\", - \"name\": \"Descriptive name (2-4 words)\", - \"description\": \"Detailed description (2-3 sentences explaining structure, use cases, and unique aspects)\", - \"structure\": { - // For pages, include: - \"type\": \"sidebar-main\" | \"centered\" | \"asymmetric\" | \"grid-dashboard\", - \"regions\": [\"header\", \"sidebar\", \"main\", \"footer\"], - \"grid\": { - \"columns\": 12, - \"rows\": \"auto\", - \"gap\": \"var(--spacing-6)\" - }, - \"sidebar\": { - \"position\": \"left\" | \"right\", - \"width\": \"250px\", - \"fixed\": true, - \"collapsible\": true - }, - \"responsive\": { - \"mobile\": {\"columns\": 1, \"sidebar\": \"hidden\"}, - \"tablet\": {\"columns\": 6, \"sidebar\": \"overlay\"}, - \"desktop\": {\"columns\": 12, \"sidebar\": \"fixed\"} - }, - - // For components, include: - \"arrangement\": \"flex-column\" | \"flex-row\" | \"grid\", - \"alignment\": \"center\" | \"start\" | \"end\" | \"stretch\", - \"spacing\": \"compact\" | \"normal\" | \"relaxed\", - \"element_order\": [\"icon\", \"title\", \"description\", \"action\"] + "id": "layout-{layout_id}", + "target": "{target}", + "target_type": "{target_type}", + "name": "Descriptive name (2-4 words)", + "description": "2-3 sentences", + "structure": { + // IF page: type, regions, grid, sidebar, responsive + // IF component: arrangement, alignment, spacing, element_order }, - \"semantic_hints\": [ - \"dashboard\", - \"data-visualization\", - \"navigation-sidebar\", - \"card-based\" - ], - \"accessibility_features\": [ - \"skip-navigation\", - \"landmark-regions\", - \"keyboard-navigation\", - \"screen-reader-optimized\" - ], - \"research_references\": [ - \"URL or description of research source 1\", - \"URL or description of research source 2\" - ] + "semantic_hints": [...], + "accessibility_features": [...], + "research_references": [...] } ``` - ## Write Operation Instructions - - Use Write() tool with the absolute path provided above - - Create directory if needed: Bash('mkdir -p {base_path}/prototypes/_templates') - - Verify write operation succeeds - - ## Example Write Operation - ```javascript - Write(\"{base_path}/prototypes/_templates/{target}-layout-{layout_id}.json\", JSON.stringify(layout_plan, null, 2)) - ``` - - ## Completion - Report successful file creation with path confirmation. - - ## Critical Requirements - - ✅ Layout plan is ONLY for '{target}' - tailor to this specific target's needs - - ✅ Consider {target_type} type (page vs component) when designing structure - - ✅ Research modern patterns using MCP tools before designing - - ✅ Provide concrete, implementable structure (not abstract descriptions) - - ✅ Different layout IDs should explore meaningfully different approaches - - ✅ Use semantic naming and clear documentation - - ✅ Write file directly using Write() tool - do NOT return contents as text + ## Requirements + - Research-informed, target-specific, meaningfully different from other layout IDs + - Write file directly (not text output) " # Wait for all agent tasks to complete @@ -343,188 +266,44 @@ FOR layout_id IN range(1, layout_variants + 1): Task(ui-design-agent): " [UI_LAYOUT_TEMPLATE_GENERATION] - 🚨 **CRITICAL: TARGET INDEPENDENCE REQUIREMENT** 🚨 - You are generating a template for EXACTLY ONE target: '{target}'. - - Do NOT include content from other targets in the workflow - - This template is for '{target}' ONLY - treat it as a standalone UI entity - - Even if '{target}' might coexist with other targets in a final application, - your task is to create an INDEPENDENT, REUSABLE template for '{target}' alone + 🚨 TARGET INDEPENDENCE: Generate template for EXACTLY ONE target: '{target}' (standalone, reusable) - Generate a **style-agnostic** layout template for a specific {target_type} and layout strategy. - - đŸŽ¯ **CRITICAL REQUIREMENTS**: - ✅ **ADAPTIVE**: Multi-device responsive design (mobile, tablet, desktop) - ✅ **STYLE-SWITCHABLE**: Support runtime theme/style switching via CSS variables - ✅ **TOKEN-DRIVEN**: 100% CSS variable usage, zero hardcoded values - ✅ **INDEPENDENT**: Template for '{target}' only, no other targets included - ✅ **RESEARCH-INFORMED**: Use MCP tools to research modern UI patterns as needed - - ## Context LAYOUT_ID: {layout_id} | TARGET: {target} | TARGET_TYPE: {target_type} BASE_PATH: {base_path} - {IF --session: Requirements: .workflow/WFS-{session}/.brainstorming/synthesis-specification.md} + {IF --session: REQUIREMENTS: .workflow/WFS-{session}/.brainstorming/synthesis-specification.md} - **Target Type Details**: - {IF target_type == "page": - - Type: Full-page layout | Wrapper: Complete HTML document (, , ) - - Navigation: Include header/navigation | Footer: Include page footer - - Content: Complete page content structure - } - {ELSE IF target_type == "component": - - Type: Isolated UI component | Wrapper: Minimal container for demonstration - - Navigation: Exclude header/footer | Container: Simple wrapper (e.g.,
) - - Content: Focus solely on component design - } + ## Layout Plan to Implement + **Path**: {layout_json_path} + **Plan**: {JSON.stringify(layout_plan, null, 2)} ## Task - Generate TWO files that work together as a reusable template. + Generate TWO template files implementing the layout plan above: + 1. HTML: {base_path}/prototypes/_templates/{target}-layout-{layout_id}.html + 2. CSS: {base_path}/prototypes/_templates/{target}-layout-{layout_id}.css - ### File 1: HTML Template (`{target}-layout-{layout_id}.html`) - - **Structure Requirements**: - - Semantic HTML5 elements with ARIA attributes - - Complete {target_type} wrapper (full document for pages, minimal for components) - - Zero hardcoded styles, colors, or spacing - - Responsive structure ready for mobile/tablet/desktop - - **⚠ī¸ CRITICAL: CSS Placeholder Links** - - You MUST include these EXACT placeholder links in the `` section: - - ```html - - - ``` - - **Placeholder Rules**: - 1. Use EXACTLY `{{STRUCTURAL_CSS}}` and `{{TOKEN_CSS}}` with double curly braces - 2. Place in `` AFTER `` tags, BEFORE `` closing tag - 3. DO NOT substitute with actual paths - the script handles this - 4. DO NOT add any other CSS `` tags - 5. These enable runtime style switching for all variants - - **Complete HTML Template Examples**: - - {IF target_type == \"page\": - ```html - - - - - - {target} - Layout {layout_id} + ## HTML Requirements + - Semantic HTML5 + ARIA attributes + - Wrapper: {IF page: Full document (header/nav/main/footer) | IF component: Minimal container} + - ⚠ī¸ CRITICAL: Include CSS placeholders in : - - -
-
- - - - ``` - } - {ELSE IF target_type == \"component\": - ```html - - - - - - {target} Component - Layout {layout_id} - - - - -
- -
- - - ``` - } + ## CSS Requirements + - Token-driven: ALL values use var() (zero hardcoded values) + - Mobile-first responsive design + - Available tokens ({len(all_token_vars)} variables): + * Colors: --color-brand-primary, --color-surface-background, --color-text-primary, ... + * Typography: --font-family-heading, --font-size-base, --font-weight-bold, ... + * Spacing: --spacing-0 through --spacing-24 + * Radius: --border-radius-none, --border-radius-sm, ..., --border-radius-full + * Shadows: --shadow-sm, --shadow-md, --shadow-lg, --shadow-xl + * Breakpoints: --breakpoint-sm, --breakpoint-md, --breakpoint-lg - ### File 2: CSS Template (`{target}-layout-{layout_id}.css`) - - 🎨 **TOKEN-DRIVEN STYLING**: ALL values use `var()` for dynamic theme switching - - 🔄 **RUNTIME SWITCHABLE**: `background-color: var(--color-surface-background);` - - đŸšĢ **ZERO LITERALS**: NO hardcoded values (#4F46E5, 16px, Arial) - - 📐 **SEMANTIC NAMING**: BEM or descriptive class naming - - 📱 **MOBILE-FIRST**: Responsive design using token-based breakpoints - - {IF target_type == "component": "Focus styles on component only, minimal global styles"} - - ## Layout Plan (Target-Specific) - Implement the following pre-defined layout plan for this target: - - **Layout JSON Path**: {layout_json_path} - **Layout Plan**: - ```json - {JSON.stringify(layout_plan, null, 2)} - ``` - - **Critical**: Your job is to IMPLEMENT this exact layout plan, not to redesign it. - - Follow the structure defined in the 'structure' field - - Use semantic hints for appropriate HTML elements - - Respect the target_type (page vs component) wrapper requirements - - Apply the specified responsive behavior - - ## Token Usage Requirements (STRICT - USE EXACT NAMES) - - **CRITICAL**: You MUST use ONLY the variable names listed below. - DO NOT invent variable names like --color-background-base, --radius-md, --transition-base, etc. - - **Available Variables** ({len(all_token_vars)} total): - - Color variables ({len(color_vars)}): --color-brand-primary, --color-surface-background, --color-text-primary, etc. - - Typography variables ({len(typography_vars)}): --font-family-heading, --font-size-base, --font-weight-bold, etc. - - Spacing variables ({len(spacing_vars)}): --spacing-0, --spacing-1, ..., --spacing-24 - - Border radius ({len(radius_vars)}): --border-radius-none, --border-radius-sm, ..., --border-radius-full - - Shadows ({len(shadow_vars)}): --shadow-sm, --shadow-md, --shadow-lg, --shadow-xl - - Breakpoints ({len(breakpoint_vars)}): --breakpoint-sm, --breakpoint-md, --breakpoint-lg, etc. - - **STRICT RULES**: - 1. Use ONLY the variables listed above - NO custom variable names - 2. If you need a value not in the list, use the closest semantic match - 3. For missing tokens (like transitions), use literal CSS values: `transition: all 0.2s ease;` - 4. NO hardcoded colors, fonts, or spacing (e.g., #4F46E5, 16px, Arial) - 5. All `var()` references must match exact variable names above - - ## File Write Instructions - Generate TWO template files and WRITE them using Write() tool: - - ### File 1: HTML Template - **Path**: {base_path}/prototypes/_templates/{target}-layout-{layout_id}.html - **Content**: Reusable HTML structure with CSS placeholders - - ### File 2: CSS Template - **Path**: {base_path}/prototypes/_templates/{target}-layout-{layout_id}.css - **Content**: Structural CSS using var() for all values - - ## Write Operation Instructions - - Use Write() tool for both files with absolute paths provided above - - Create directory if needed: Bash('mkdir -p {base_path}/prototypes/_templates') - - Verify each write operation succeeds - - ## Example Write Operations - ```javascript + ## Write Operations Write(\"{base_path}/prototypes/_templates/{target}-layout-{layout_id}.html\", html_content) Write(\"{base_path}/prototypes/_templates/{target}-layout-{layout_id}.css\", css_content) - ``` - ## Completion - Report successful file creation for both HTML and CSS templates with path confirmation. - - đŸŽ¯ **CRITICAL QUALITY GATES**: - ✅ **ADAPTIVE**: Works on mobile (375px), tablet (768px), desktop (1024px+) - ✅ **STYLE-SWITCHABLE**: Change {{TOKEN_CSS}} link → instant theme switching - ✅ **TOKEN-ONLY**: 100% var() usage, inspectable with \"Search for: #|px|rem\" → 0 matches in values - ✅ **REUSABLE**: Same HTML/CSS structure works for ALL style variants - ✅ **FILE-WRITTEN**: Files written directly to file system, not returned as text - - **Wrapper Strategy**: - {IF target_type == "page": Use complete HTML document structure with navigation and footer.} - {ELSE: Use minimal wrapper with component container only.} - - DO NOT return file contents as text - write them directly using Write() tool. + Report completion with file paths. Write files directly (not text output). " REPORT: "âŗ Phase 2a: Waiting for agents to complete template generation..." @@ -656,32 +435,22 @@ FOR style_id IN range(1, style_variants + 1): Task(@ui-design-agent): " [CROSS_PAGE_CONSISTENCY_VALIDATION] - Validate design consistency across multiple {target_type}s for Style-{style_id} Layout-{layout_id} - - đŸŽ¯ **VALIDATION FOCUS**: - ✅ **ADAPTIVE CONSISTENCY**: Same responsive behavior across all pages - ✅ **STYLE-SWITCHING**: Verify token references enable uniform theme switching - ✅ **CROSS-PAGE HARMONY**: Shared components use identical CSS variables - - ## Context STYLE_ID: {style_id} | LAYOUT_ID: {layout_id} | TARGETS: {target_list} | TARGET_TYPE: {target_type} BASE_PATH: {base_path} - ## Input Files - FOR each target: {base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html/css + ## Input + {base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html/css (all targets) - ## Validation Tasks - 1. **Shared Component Consistency**: Check header/nav/footer structure matches - 2. **Token Usage Consistency**: Verify same design-tokens file, no hardcoded values - 3. **Accessibility Consistency**: ARIA attributes, heading hierarchy, landmark roles - 4. **Layout Strategy Adherence**: Layout-{layout_id} strategy applied consistently + ## Validate + 1. Shared component structure (header/nav/footer) + 2. Token usage consistency (no hardcoded values) + 3. Accessibility compliance (ARIA, headings, landmarks) + 4. Layout strategy adherence ## Output - Generate consistency report markdown file at: - {base_path}/prototypes/consistency-report-s{style_id}-l{layout_id}.md + Write({base_path}/prototypes/consistency-report-s{style_id}-l{layout_id}.md, validation_report) - Include validation results, issues found, and recommendations. - Focus on truly shared elements. Page-specific content variations are acceptable. + Focus on shared elements. Page-specific variations are acceptable. " # Aggregate consistency reports diff --git a/.claude/commands/workflow/ui-design/imitate-auto.md b/.claude/commands/workflow/ui-design/imitate-auto.md index 0aba2224..acacc68a 100644 --- a/.claude/commands/workflow/ui-design/imitate-auto.md +++ b/.claude/commands/workflow/ui-design/imitate-auto.md @@ -31,6 +31,16 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(* **Ideal For**: MVP development, high-fidelity prototyping, design replication, studying successful patterns +## Key Features + +- **Fast-Track Imitation**: ~2-3× faster than explore-auto by bypassing consolidation phase +- **Reference-Driven**: Requires URL or images as primary design source for accurate replication +- **Auto-Screenshot Capability**: Intelligent fallback (Playwright → Chrome → Manual upload) for URL-based workflows +- **Single-Style Focus**: Always generates 1 style × 1 layout × N targets for streamlined execution +- **Consolidation Bypass**: Direct design token extraction saves 30-60s per workflow +- **Interactive Confirmation**: User validates inferred targets before execution to prevent mistakes +- **Flexible Target Types**: Supports both full-page layouts and isolated UI components + ## Core Rules 1. **Start Immediately**: TodoWrite initialization → Phase 0 execution @@ -41,13 +51,45 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(* ## Parameter Requirements -**Required** (at least one): `--url ""` OR `--images ""` +**Required Parameters** (at least one must be provided): +- `--url ""`: Reference website URL for style imitation (supports auto-screenshot) +- `--images ""`: Reference image paths (e.g., `refs/*.png`, `design-refs/*.jpg`) -**Optional**: `--targets ""`, `--target-type "page|component"`, `--session `, `--prompt ""` +**Optional Parameters** (all have smart defaults): +- `--targets ""`: Comma-separated targets (pages/components) to generate + - Examples: `"home,dashboard"`, `"navbar,hero,card"` + - If omitted: inferred from `--prompt` or defaults to `["home"]` +- `--target-type "page|component"`: Explicitly set target type + - `page`: Full-page layouts with complete structure + - `component`: Isolated UI elements with minimal wrapper + - Default: intelligent detection based on target names +- `--session `: Workflow session ID (e.g., `WFS-ecommerce`) + - If provided: integrates with session brainstorming artifacts + - If omitted: runs in standalone mode +- `--prompt ""`: Design guidance and target hints + - Used for target inference and style extraction refinement + - Examples: `"Imitate dark mode for dashboard"`, `"Focus on minimalist design"` -**Legacy**: `--pages ""` (alias for `--targets` with type=page) +**Legacy Parameters** (maintained for backward compatibility): +- `--pages ""`: Alias for `--targets` with `--target-type page` -**Not Supported**: `--style-variants`, `--layout-variants`, `--batch-plan` +**Not Supported** (use `/workflow:ui-design:explore-auto` instead): +- `--style-variants`, `--layout-variants`, `--batch-plan` + +**Input Rules**: +- Must provide at least one: `--url` OR `--images` +- Multiple parameters can be combined for guided imitation +- If `--targets` not provided, intelligently inferred from prompt or defaults to `["home"]` +- URL and images can be used together (screenshot + additional references) + +**Supported Target Types**: +- **Pages** (full layouts): home, dashboard, settings, profile, login, pricing, etc. +- **Components** (UI elements): + - Navigation: navbar, header, menu, sidebar, tabs + - Content: hero, card, list, table, gallery + - Input: form, search, filter, button + - Feedback: modal, alert, toast, badge + - Other: footer, dropdown, avatar, pagination ## 5-Phase Execution @@ -90,12 +132,45 @@ IF NOT validated_targets: validated_targets = ["home"]; target_type = "page" type_emoji = "📄" IF target_type == "page" ELSE "🧩" type_label = "pages" IF target_type == "page" ELSE "components" -REPORT: "📋 Imitate mode: {len(validated_targets)} {type_label} with single style" +# Interactive confirmation +DISPLAY_CONFIRMATION(target_type, target_source, validated_targets): + "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" + "⚡ IMITATE MODE CONFIRMATION" + "Type: {target_type} | Source: {target_source}" + "Targets ({count}): {', '.join(validated_targets)}" + "Reference: {url_value OR images_pattern}" + "Options: 'continue/yes' | 'targets: a,b' | 'skip: x' | 'add: y' | 'type: page|component'" + "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" + +user_input = WAIT_FOR_USER_INPUT() + +# Process user modifications +MATCH user_input: + "continue|yes|ok" → proceed + "targets: ..." → validated_targets = parse_new_list() + "skip: ..." → validated_targets = remove_items() + "add: ..." → validated_targets = add_items() + "type: ..." → target_type = extract_type() + default → proceed with current list + +REPORT: "✅ Confirmed: {len(validated_targets)} {type_label} with single style" REPORT: " {type_emoji} Targets: {', '.join(validated_targets)} | Type: {target_type} | Reference: {url_value OR images_pattern}" STORE: run_id, base_path, inferred_target_list = validated_targets, target_type ``` +**Helper Function: detect_target_type()** +```bash +detect_target_type(target_list): + page_keywords = ["home", "dashboard", "settings", "profile", "login", "signup", "auth", "pricing", "about", "contact", ...] + component_keywords = ["navbar", "header", "footer", "hero", "card", "button", "form", "modal", "alert", "dropdown", ...] + + page_matches = count_matches(target_list, page_keywords + ["page", "screen", "view"]) + component_matches = count_matches(target_list, component_keywords + ["component", "widget", "element"]) + + RETURN "component" IF component_matches > page_matches ELSE "page" +``` + ### Phase 0.5: URL Screenshot Capture (Auto-Fallback) **Condition**: Only if `--url` provided @@ -163,7 +238,7 @@ command = "/workflow:ui-design:extract --base-path \"{base_path}\" {url_flag} {i REPORT: "🚀 Phase 1: Style Extraction | Source: {source_desc} | Mode: Single style (imitation-optimized)" -SlashCommand(command) +SlashCommand(command) # → Phase 2 ``` ### Phase 2: Fast Token Adaptation (Bypass Consolidate) @@ -217,18 +292,19 @@ command = "/workflow:ui-design:generate --base-path \"{base_path}\" --targets \" REPORT: "🚀 Phase 3: Generating {len(inferred_target_list)} {type_label}" REPORT: " {type_emoji} Targets: {targets_string} | Mode: 1×1 (imitation-optimized)" -SlashCommand(command) +SlashCommand(command) # → Phase 4 -# Result: Prototypes: {target}-style-1-layout-1.html, Total: len(inferred_target_list), Type: {target_type} +# Output: Prototypes: {target}-style-1-layout-1.html, Total: len(inferred_target_list), Type: {target_type} ``` ### Phase 4: Design System Integration ```bash IF --session: - SlashCommand("/workflow:ui-design:update --session {session_id}") + SlashCommand("/workflow:ui-design:update --session {session_id}") # → Complete ELSE: REPORT: "ℹī¸ Standalone mode: Skipping integration | Prototypes at: {base_path}/prototypes/" + # → Complete (standalone) ``` ## TodoWrite Pattern @@ -301,7 +377,7 @@ TodoWrite({todos: [ # Continues: 1 → 2 → 3 → 4 ``` -## Final Completion Message +## Completion Output ``` ✅ UI Design Imitation Complete!