From 6b6367a66931ddcac3a764db812fd3ba08e9ea65 Mon Sep 17 00:00:00 2001 From: catlog22 Date: Fri, 10 Oct 2025 16:53:53 +0800 Subject: [PATCH] feat: Add ui-generate-preview-v2.sh script for style-centric prototype preview generation - Implemented a new script to generate compare.html and index.html for UI prototypes. - Auto-detects styles, layouts, and targets from HTML file patterns. - Generates an interactive comparison matrix and a simple index of prototypes. - Includes a detailed PREVIEW.md guide with usage instructions and file structure. --- .../workflow/ui-design/explore-auto-v2.md | 377 +++++++++ .../workflow/ui-design/generate-v2.md | 741 ++++++++++++++++++ .claude/scripts/ui-generate-preview-v2.sh | 550 +++++++++++++ 3 files changed, 1668 insertions(+) create mode 100644 .claude/commands/workflow/ui-design/explore-auto-v2.md create mode 100644 .claude/commands/workflow/ui-design/generate-v2.md create mode 100644 .claude/scripts/ui-generate-preview-v2.sh diff --git a/.claude/commands/workflow/ui-design/explore-auto-v2.md b/.claude/commands/workflow/ui-design/explore-auto-v2.md new file mode 100644 index 00000000..3cc3c0ab --- /dev/null +++ b/.claude/commands/workflow/ui-design/explore-auto-v2.md @@ -0,0 +1,377 @@ +--- +name: explore-auto-v2 +description: Exploratory UI design workflow with style-centric batch generation +usage: /workflow:ui-design:explore-auto-v2 [--prompt ""] [--images ""] [--targets ""] [--target-type "page|component"] [--session ] [--style-variants ] [--layout-variants ] [--batch-plan] +examples: + - /workflow:ui-design:explore-auto-v2 --prompt "Generate 3 style variants for modern blog: home, article, author" + - /workflow:ui-design:explore-auto-v2 --prompt "SaaS dashboard and settings with 2 layout options" + - /workflow:ui-design:explore-auto-v2 --images "refs/*.png" --prompt "E-commerce: home, product, cart" --style-variants 3 --layout-variants 3 + - /workflow:ui-design:explore-auto-v2 --session WFS-auth --images "refs/*.png" + - /workflow:ui-design:explore-auto-v2 --targets "navbar,hero" --target-type "component" --style-variants 3 --layout-variants 2 +allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*), Task(conceptual-planning-agent) +--- + +# UI Design Auto Workflow Command + +## Overview & Execution Model + +**Fully autonomous orchestrator**: Executes all design phases sequentially from style extraction to design integration, with optional batch planning. + +**Unified Target System**: Generates `style_variants × layout_variants × targets` prototypes, where targets can be: +- **Pages** (full-page layouts): home, dashboard, settings, etc. +- **Components** (isolated UI elements): navbar, card, hero, form, etc. +- **Mixed**: Can combine both in a single workflow + +**Autonomous Flow** (⚠️ CONTINUOUS EXECUTION - DO NOT STOP): +1. User triggers: `/workflow:ui-design:explore-auto-v2 [params]` +2. Phase 1 (style-extract) → **WAIT for completion** → Auto-continues +3. Phase 2 (style-consolidate) → **WAIT for completion** → Auto-continues +4. **Phase 3 (ui-generate-v2)** → **WAIT for completion** → Auto-continues +5. Phase 4 (design-update) → **WAIT for completion** → Auto-continues +6. Phase 5 (batch-plan, optional) → Reports completion + +**Auto-Continue Mechanism**: TodoWrite tracks phase status. Upon each phase completion, you MUST immediately construct and execute the next phase command. No user intervention required. The workflow is NOT complete until reaching Phase 4 (or Phase 5 if --batch-plan). + +**Target Type Detection**: Automatically inferred from prompt/targets, or explicitly set via `--target-type`. + +## Core Rules + +1. **Start Immediately**: TodoWrite initialization → Phase 1 execution +2. **No Preliminary Validation**: Sub-commands handle their own validation +3. **Parse & Pass**: Extract data from each output for next phase +4. **Default to All**: When selecting variants/prototypes, use ALL generated items +5. **Track Progress**: Update TodoWrite after each phase +6. **⚠️ CRITICAL: DO NOT STOP** - This is a continuous multi-phase workflow. After each SlashCommand completes, you MUST wait for completion, then immediately execute the next phase. Workflow is NOT complete until Phase 4 (or Phase 5 if --batch-plan). + +## Parameter Requirements + +**Optional Parameters** (all have smart defaults): +- `--targets ""`: Comma-separated targets (pages/components) to generate (inferred from prompt/session if omitted) +- `--target-type "page|component|auto"`: Explicitly set target type (default: `auto` - intelligent detection) +- `--session `: Workflow session ID (standalone mode if omitted) +- `--images ""`: Reference image paths (default: `design-refs/*`) +- `--prompt ""`: Design style and target description +- `--style-variants `: Style variants (default: inferred from prompt or 3, range: 1-5) +- `--layout-variants `: Layout variants per style (default: inferred or 3, range: 1-5) +- `--batch-plan`: Auto-generate implementation tasks after design-update + +**Legacy Parameters** (maintained for backward compatibility): +- `--pages ""`: Alias for `--targets` with `--target-type page` +- `--components ""`: Alias for `--targets` with `--target-type component` + +**Input Rules**: +- Must provide at least one: `--images` or `--prompt` or `--targets` +- Multiple parameters can be combined for guided analysis +- If `--targets` not provided, intelligently inferred from prompt/session + +**Supported Target Types**: +- **Pages** (full layouts): home, dashboard, settings, profile, login, etc. +- **Components** (UI elements): + - Navigation: navbar, header, menu, breadcrumb, tabs, sidebar + - Content: hero, card, list, table, grid, timeline + - Input: form, search, filter, input-group + - Feedback: modal, alert, toast, badge, progress + - Media: gallery, carousel, video-player, image-card + - Other: footer, pagination, dropdown, tooltip, avatar + +**Intelligent Prompt Parsing**: Extracts variant counts from natural language: +- "Generate **3 style variants**" → `--style-variants 3` +- "**2 layout options**" → `--layout-variants 2` +- "Create **4 styles** with **2 layouts each**" → `--style-variants 4 --layout-variants 2` +- Explicit flags override prompt inference + +## Execution Modes + +**Matrix Mode** (style-centric): +- Generates `style_variants × layout_variants × targets` prototypes +- **Phase 1**: `style_variants` style options with design_attributes (extract) +- **Phase 2**: `style_variants` independent design systems (consolidate) +- **Phase 3**: Style-centric batch generation (generate-v2) + - Sub-phase 1: `targets × layout_variants` target-specific layout plans + - **Sub-phase 2**: `S` style-centric agents (each handles `L×T` combinations) + - Sub-phase 3: `style_variants × layout_variants × targets` final prototypes + - Performance: Efficient parallel execution with S agents + - Quality: HTML structure adapts to design_attributes + - Pages: Full-page layouts with complete structure + - Components: Isolated elements with minimal wrapper + +**Integrated vs. Standalone**: +- `--session` flag determines session integration or standalone execution + +## 6-Phase Execution + +### Phase 0a: Intelligent Prompt Parsing +```bash +# Parse variant counts from prompt or use explicit/default values +IF --prompt AND (NOT --style-variants OR NOT --layout-variants): + style_variants = regex_extract(prompt, r"(\d+)\s*style") OR --style-variants OR 3 + layout_variants = regex_extract(prompt, r"(\d+)\s*layout") OR --layout-variants OR 3 +ELSE: + style_variants = --style-variants OR 3 + layout_variants = --layout-variants OR 3 + +VALIDATE: 1 <= style_variants <= 5, 1 <= layout_variants <= 5 +``` + +### Phase 0b: Run Initialization & Directory Setup +```bash +run_id = "run-$(date +%Y%m%d-%H%M%S)" +base_path = --session ? ".workflow/WFS-{session}/design-${run_id}" : ".workflow/.design/${run_id}" + +Bash(mkdir -p "${base_path}/{style-extraction,style-consolidation,prototypes}") + +Write({base_path}/.run-metadata.json): { + "run_id": "${run_id}", "session_id": "${session_id}", "timestamp": "...", + "workflow": "ui-design:auto-v2", + "version": "2.0", + "architecture": "style-centric-batch-generation", + "parameters": { "style_variants": ${style_variants}, "layout_variants": ${layout_variants}, + "targets": "${inferred_target_list}", "target_type": "${target_type}", + "prompt": "${prompt_text}", "images": "${images_pattern}" }, + "status": "in_progress", + "performance_mode": "optimized" +} +``` + +### Phase 0c: Unified Target Inference with Intelligent Type Detection +```bash +# Priority: --pages/--components (legacy) → --targets → --prompt analysis → synthesis → default +target_list = []; target_type = "auto"; target_source = "none" + +# Step 1-2: Explicit parameters (legacy or unified) +IF --pages: target_list = split(--pages); target_type = "page"; target_source = "explicit_legacy" +ELSE IF --components: target_list = split(--components); target_type = "component"; target_source = "explicit_legacy" +ELSE IF --targets: + target_list = split(--targets); target_source = "explicit" + target_type = --target-type != "auto" ? --target-type : detect_target_type(target_list) + +# Step 3: Prompt analysis (Claude internal analysis) +ELSE IF --prompt: + analysis_result = analyze_prompt("{prompt_text}") # Extract targets, types, purpose + target_list = analysis_result.targets + target_type = analysis_result.primary_type OR detect_target_type(target_list) + target_source = "prompt_analysis" + +# Step 4: Session synthesis +ELSE IF --session AND exists(synthesis-specification.md): + target_list = extract_targets_from_synthesis(); target_type = "page"; target_source = "synthesis" + +# Step 5: Fallback +IF NOT target_list: target_list = ["home"]; target_type = "page"; target_source = "default" + +# Validate and clean +validated_targets = [normalize(t) for t in target_list if is_valid(t)] +IF NOT validated_targets: validated_targets = ["home"]; target_type = "page" +IF --target-type != "auto": target_type = --target-type + +# Interactive confirmation +DISPLAY_CONFIRMATION(target_type, target_source, validated_targets): + "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" + "{emoji} {LABEL} CONFIRMATION (v2.0 Style-Centric)" + "Type: {target_type} | Source: {target_source}" + "Targets ({count}): {', '.join(validated_targets)}" + "Performance: {style_variants} agent calls (vs {layout_variants * len(validated_targets)} in v1.0)" + "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 + +STORE: inferred_target_list, target_type, target_inference_source +``` + +**Helper Function: detect_target_type()** +```bash +detect_target_type(target_list): + page_keywords = ["home", "dashboard", "settings", "profile", "login", "signup", "auth", ...] + component_keywords = ["navbar", "header", "footer", "hero", "card", "button", "form", ...] + + page_matches = count_matches(target_list, page_keywords + ["page", "screen", "view"]) + component_matches = count_matches(target_list, component_keywords + ["component", "widget"]) + + RETURN "component" IF component_matches > page_matches ELSE "page" +``` + +### Phase 1: Style Extraction +```bash +command = "/workflow:ui-design:extract --base-path \"{base_path}\" " + + (--images ? "--images \"{images}\" " : "") + + (--prompt ? "--prompt \"{prompt}\" " : "") + + "--variants {style_variants} --mode explore" +SlashCommand(command) + +# Output: {style_variants} style cards with design_attributes +# WAIT for extract command to complete, then IMMEDIATELY continue to Phase 2 +# DO NOT STOP - Phase 2 must execute automatically +``` + +### Phase 2: Style Consolidation +```bash +command = "/workflow:ui-design:consolidate --base-path \"{base_path}\" " + + "--variants {style_variants}" +SlashCommand(command) + +# Output: {style_variants} independent design systems with tokens.css +# WAIT for consolidate command to complete, then IMMEDIATELY continue to Phase 3 +# DO NOT STOP - Phase 3 must execute automatically +``` + +### Phase 3: Style-Centric Matrix UI Generation +```bash +targets_string = ",".join(inferred_target_list) +command = "/workflow:ui-design:generate-v2 --base-path \"{base_path}\" " + + "--targets \"{targets_string}\" --target-type \"{target_type}\" " + + "--style-variants {style_variants} --layout-variants {layout_variants}" + +total = style_variants × layout_variants × len(inferred_target_list) +agent_calls = style_variants + +REPORT: "🚀 Phase 3: {type_icon} {targets_string} | Matrix: {s}×{l}×{n} = {total} prototypes" +REPORT: " → Agent calls: {agent_calls} style-centric agents" +REPORT: " → Layout planning: {len(inferred_target_list)}×{layout_variants} target-specific layouts" +REPORT: " → Style-centric generation: Each of {style_variants} agents handles {layout_variants}×{len(inferred_target_list)} combinations" + +SlashCommand(command) + +# WAIT for generate-v2 command to complete, then IMMEDIATELY continue to Phase 4 +# DO NOT STOP - Phase 4 must execute automatically +# Output: +# - {target}-layout-{l}.json (target-specific layout plans) +# - {target}-style-{s}-layout-{l}.html (final prototypes with style-aware structure) +# - compare.html (interactive matrix view) +# - PREVIEW.md (usage instructions) +``` + +### Phase 4: Design System Integration +```bash +command = "/workflow:ui-design:update" + (--session ? " --session {session_id}" : "") +SlashCommand(command) + +# WAIT for update command to complete +# If --batch-plan flag present: IMMEDIATELY continue to Phase 5 +# If no --batch-plan: Workflow complete, display final report +``` + +### Phase 5: Batch Task Generation (Optional) +```bash +IF --batch-plan: + FOR target IN inferred_target_list: + task_desc = "Implement {target} {target_type} based on design system" + SlashCommand("/workflow:plan --agent \"{task_desc}\"") +``` + +## TodoWrite Pattern +```javascript +// Initialize at workflow start to track multi-phase execution +TodoWrite({todos: [ + {"content": "Execute style extraction", "status": "in_progress", "activeForm": "Executing..."}, + {"content": "Execute style consolidation", "status": "pending", "activeForm": "Executing..."}, + {"content": "Execute style-centric UI generation", "status": "pending", "activeForm": "Executing..."}, + {"content": "Execute design integration", "status": "pending", "activeForm": "Executing..."} +]}) + +// ⚠️ CRITICAL: After EACH phase completion, you MUST: +// 1. Update current phase: status → "completed" +// 2. Update next phase: status → "in_progress" +// 3. Continue to execute next phase immediately +// This ensures continuous workflow tracking and prevents premature stopping +``` + +## Key Features + +- **🚀 Performance**: Style-centric batch generation with S agent calls +- **🎨 Style-Aware**: HTML structure adapts to design_attributes +- **✅ Perfect Consistency**: Each style by single agent +- **📦 Autonomous**: No user intervention required between phases +- **🧠 Intelligent**: Parses natural language, infers targets/types +- **🔄 Reproducible**: Deterministic flow with isolated run directories +- **🎯 Flexible**: Supports pages, components, or mixed targets + +## Examples + +### 1. Page Mode (Prompt Inference) +```bash +/workflow:ui-design:explore-auto-v2 --prompt "Modern blog: home, article, author" +# Result: 27 prototypes (3×3×3) +``` + +### 2. Custom Matrix with Session +```bash +/workflow:ui-design:explore-auto-v2 --session WFS-ecommerce --images "refs/*.png" --style-variants 2 --layout-variants 2 +# Result: 2×2×N prototypes +``` + +### 3. Component Mode +```bash +/workflow:ui-design:explore-auto-v2 --targets "navbar,hero" --target-type "component" --style-variants 3 --layout-variants 2 +# Result: 12 prototypes (3×2×2) - components with minimal wrapper +``` + +### 4. Intelligent Parsing + Batch Planning +```bash +/workflow:ui-design:explore-auto-v2 --prompt "Create 4 styles with 2 layouts for dashboard and settings" --batch-plan +# Result: 16 prototypes (4×2×2) + auto-generated tasks +``` + +### 5. Large Scale +```bash +/workflow:ui-design:explore-auto-v2 --targets "home,dashboard,settings,profile" --style-variants 3 --layout-variants 3 +# Result: 36 prototypes (3×3×4) +``` + +## Completion Output +``` +✅ UI Design Explore-Auto Workflow Complete! + +Architecture: Style-Centric Batch Generation +Run ID: {run_id} | Session: {session_id or "standalone"} +Type: {icon} {target_type} | Matrix: {s}×{l}×{n} = {total} prototypes + +Phase 1: {s} style variants with design_attributes (extract) +Phase 2: {s} design systems with tokens.css (consolidate) +Phase 3: Style-centric batch generation (generate-v2) + - {n}×{l} target-specific layout plans + - {s} style-centric agents (each handled {l}×{n} combinations) + - {s}×{l}×{n} = {total} final prototypes with style-aware structure +Phase 4: Brainstorming artifacts updated +[Phase 5: {n} implementation tasks created] # if --batch-plan + +Agent Execution: +✅ Style-centric agents: {s} agents total +✅ Each agent handles: {l}×{n} combinations + +Design Quality: +✅ Style-Aware Structure: HTML adapts to design_attributes +✅ Style Consistency: PERFECT (each style by single agent) +✅ Token-Driven Styling: 100% var() usage + +📂 {base_path}/ + ├── style-extraction/ ({s} style cards + design-space-analysis.json) + ├── style-consolidation/ ({s} design systems with tokens.css) + ├── prototypes/ + │ ├── _templates/ ({n}×{l} layout JSON files) + │ └── ... ({total} final prototypes) + └── .run-metadata.json + +🌐 Preview: {base_path}/prototypes/compare.html + - Interactive {s}×{l} matrix view + - Side-by-side comparison + - Target-specific layouts with style-aware structure + - Toggle between {n} targets + +{icon} Targets: {', '.join(targets)} (type: {target_type}) + - Each target has {l} custom-designed layouts + - Each style × target × layout has unique HTML structure (not just CSS!) + - Layout plans stored as structured JSON + +Next: [/workflow:execute] OR [Open compare.html → Select → /workflow:plan] +``` + diff --git a/.claude/commands/workflow/ui-design/generate-v2.md b/.claude/commands/workflow/ui-design/generate-v2.md new file mode 100644 index 00000000..dad6f9ae --- /dev/null +++ b/.claude/commands/workflow/ui-design/generate-v2.md @@ -0,0 +1,741 @@ +--- +name: generate-v2 +description: Generate UI prototypes using style-centric batch generation +usage: /workflow:ui-design:generate-v2 [--targets ""] [--target-type "page|component"] [--base-path ] [--session ] [--style-variants ] [--layout-variants ] +examples: + - /workflow:ui-design:generate-v2 --session WFS-auth --targets "dashboard,settings" --style-variants 3 --layout-variants 3 + - /workflow:ui-design:generate-v2 --base-path ".workflow/WFS-auth/design-run-20250109-143022" --targets "home,pricing" + - /workflow:ui-design:generate-v2 --targets "navbar,hero,card" --target-type "component" --style-variants 2 --layout-variants 2 +allowed-tools: TodoWrite(*), Read(*), Write(*), Task(ui-design-agent), Bash(*) +--- + +# UI Generation Command (Style-Centric Architecture) + +**Executor**: → @ui-design-agent +**Parallel Generation**: Phase 2 → @ui-design-agent (S tasks, each handling L×T combinations) + +## Overview +Generate production-ready UI prototypes (HTML/CSS) using **style-centric batch generation**. Each agent handles all layout × target combinations for one style, ensuring maximum style consistency and optimal performance. + +## Core Philosophy +- **Style-Centric Batching**: Each of S agents generates ALL L×T prototypes for one style +- **Style-Aware Structure**: HTML DOM adapts based on design_attributes (density, visual_weight, etc.) +- **Performance Optimized**: S agent calls for efficient generation +- **Perfect Style Consistency**: All layouts for a style generated by single agent with full context +- **Token-Driven Styling**: All styles reference design-tokens.json via tokens.css +- **Production-Ready**: Semantic HTML5, ARIA attributes, responsive design + +## Execution Protocol + +### Phase 1: Path Resolution & Context Loading +```bash +# 1. Determine base path +IF --base-path: base_path = {provided_base_path} +ELSE IF --session: base_path = find_latest_path_matching(".workflow/WFS-{session}/design-*") +ELSE: base_path = find_latest_path_matching(".workflow/.design/*") + +# 2. Determine style variant count and layout variant count +style_variants = --style-variants OR auto_detect_from_consolidation() +layout_variants = --layout-variants OR 3 +VALIDATE: 1 <= style_variants <= 5 +VALIDATE: 1 <= layout_variants <= 5 + +# Validate against actual style directories +actual_style_count = count_directories({base_path}/style-consolidation/style-*) + +IF actual_style_count == 0: + ERROR: "No style directories found"; SUGGEST: "Run /workflow:ui-design:consolidate first"; EXIT 1 + +IF style_variants > actual_style_count: + WARN: "⚠️ Requested {style_variants}, but only {actual_style_count} exist" + REPORT: " Available styles: {list_directories}"; style_variants = actual_style_count + +REPORT: "✅ Validated style variants: {style_variants}" + +# 3. Enhanced target list parsing with type detection +target_list = []; target_type = "page" # Default + +# Priority 1: Unified --targets parameter +IF --targets: + raw_targets = {--targets value} + target_list = split_and_clean(raw_targets, delimiters=[",", ";", "、"]) + target_list = [t.strip().lower().replace(" ", "-") for t in target_list if t.strip()] + + target_type = --target-type provided ? {--target-type} : detect_target_type(target_list) + REPORT: "🎯 Using provided targets ({target_type}): {', '.join(target_list)}" + +# Priority 2: Legacy --pages parameter +ELSE IF --pages: + raw_targets = {--pages value} + target_list = split_and_clean(raw_targets, delimiters=[",", ";", "、"]) + target_list = [t.strip().lower().replace(" ", "-") for t in target_list if t.strip()] + target_type = "page" + REPORT: "📋 Using provided pages (legacy): {', '.join(target_list)}" + +# Priority 3: Extract from synthesis-specification.md +ELSE IF --session: + synthesis_spec = Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md) + target_list = extract_targets_from_synthesis(synthesis_spec); target_type = "page" + REPORT: "📋 Extracted from synthesis: {', '.join(target_list)}" + +# Priority 4: Detect from existing prototypes or default +ELSE: + target_list = detect_from_prototypes({base_path}/prototypes/) OR ["home"]; target_type = "page" + REPORT: "📋 Detected/default targets: {', '.join(target_list)}" + +# 4. Validate target names +validated_targets = [t for t in target_list if regex_match(t, r"^[a-z0-9][a-z0-9_-]*$")] +invalid_targets = [t for t in target_list if t not in validated_targets] + +IF invalid_targets: REPORT: "⚠️ Skipped invalid target names: {', '.join(invalid_targets)}" +VALIDATE: validated_targets not empty, "No valid targets found" +target_list = validated_targets + +STORE: target_list, target_type + +# 5. Verify design systems exist +FOR style_id IN range(1, style_variants + 1): + VERIFY: exists({base_path}/style-consolidation/style-{style_id}/design-tokens.json) + VERIFY: exists({base_path}/style-consolidation/style-{style_id}/tokens.css) + +# 6. Load design space analysis (for style-aware generation) +design_space_path = "{base_path}/style-extraction/design-space-analysis.json" +IF exists(design_space_path): + design_space_analysis = Read(design_space_path) + REPORT: "📊 Loaded design space analysis with style attributes" +ELSE: + WARN: "⚠️ No design space analysis found - will use basic style generation" + design_space_analysis = null + +# 7. Load requirements (if integrated mode) +IF --session: + synthesis_spec = Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md) +ELSE: + synthesis_spec = null +``` + +### Phase 1.5: Target-Specific Layout Planning +```bash +REPORT: "📐 Planning {layout_variants} layout strategies for each target..." + +CREATE: {base_path}/prototypes/_templates/ + +# For each target, plan its specific layouts +FOR target IN target_list: + REPORT: " Planning layouts for '{target}' ({target_type})..." + + FOR layout_id IN range(1, layout_variants + 1): + Task(ui-design-agent): " + [TARGET_LAYOUT_PLANNING] + + TARGET: {target} | TARGET_TYPE: {target_type} | LAYOUT_ID: {layout_id} + BASE_PATH: {base_path} + {IF synthesis_spec: PROJECT_REQUIREMENTS: {synthesis_spec}} + + ## Task + Research and generate layout plan JSON for '{target}' ({target_type}). + + ## Research (MCP Required) + mcp__exa__get_code_context_exa( + query=\"modern {target} {target_type} layout patterns 2024 2025\", + tokensNum=\"dynamic\" + ) + + ## Output File + Write(\"{base_path}/prototypes/_templates/{target}-layout-{layout_id}.json\", layout_plan_json) + + ## JSON Structure (Required Fields) + ```json + {{ + \"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\": [...], + \"accessibility_features\": [...], + \"research_references\": [...] + }} + ``` + + ## Requirements + - Research-informed, target-specific, meaningfully different from other layout IDs + - Write file directly (not text output) + " + +# Wait for all agent tasks to complete +REPORT: "⏳ Waiting for layout planning agents to complete..." + +# Verify agent created layout JSON files +REPORT: "📝 Verifying agent file creation..." + +FOR target IN target_list: + FOR layout_id IN range(1, layout_variants + 1): + layout_json_label = f"{target}-layout-{layout_id}.json" + json_path = f"{base_path}/prototypes/_templates/{layout_json_label}" + + # Verify file exists + VERIFY: exists(json_path), f"Layout JSON not created by agent: {layout_json_label}" + + # Validate JSON structure + TRY: + layout_json_content = Read(json_path) + layout_plan = JSON.parse(layout_json_content) + + # Validate required fields + VALIDATE: layout_plan.id == f"layout-{layout_id}", f"Invalid layout ID in {layout_json_label}" + VALIDATE: layout_plan.target == target, f"Invalid target in {layout_json_label}" + VALIDATE: layout_plan.target_type == target_type, f"Invalid target_type in {layout_json_label}" + VALIDATE: layout_plan.name exists, f"Missing 'name' field in {layout_json_label}" + VALIDATE: layout_plan.structure exists, f"Missing 'structure' field in {layout_json_label}" + + file_size = get_file_size(json_path) + REPORT: f" ✓ Verified: {layout_json_label} - {layout_plan.name} ({file_size} KB)" + CATCH error: + ERROR: f"Validation failed for {layout_json_label}: {error}" + REPORT: f" ⚠️ File exists but validation failed - review agent output" + +REPORT: f"✅ Phase 1.5 complete: Verified {len(target_list) × layout_variants} target-specific layout files" +``` + +### Phase 1.6: Convert Design Tokens to CSS +```bash +REPORT: "🎨 Converting design tokens to CSS variables..." + +# Check for jq dependency +IF NOT command_exists("jq"): + ERROR: "jq is not installed or not in PATH. The conversion script requires jq." + REPORT: "Please install jq: macOS: brew install jq | Linux: apt-get install jq | Windows: https://stedolan.github.io/jq/download/" + EXIT 1 + +# Convert design tokens to CSS for each style variant +FOR style_id IN range(1, style_variants + 1): + tokens_json_path = "{base_path}/style-consolidation/style-${style_id}/design-tokens.json" + tokens_css_path = "{base_path}/style-consolidation/style-${style_id}/tokens.css" + script_path = "~/.claude/scripts/convert_tokens_to_css.sh" + + # Verify input file exists + VERIFY: exists(tokens_json_path), f"Design tokens not found for style-{style_id}" + + # Execute conversion: cat input.json | script.sh > output.css + Bash(cat "${tokens_json_path}" | "${script_path}" > "${tokens_css_path}") + + # Verify output was generated + IF exit_code == 0 AND exists(tokens_css_path): + file_size = get_file_size(tokens_css_path) + REPORT: f" ✓ Generated tokens.css for style-{style_id} ({file_size} KB)" + ELSE: + ERROR: f"Failed to generate tokens.css for style-{style_id}" + EXIT 1 + +REPORT: f"✅ Phase 1.6 complete: Converted {style_variants} design token files to CSS" +``` + +### Phase 1.7: Extract Token Variable Names from CSS +```bash +REPORT: "📋 Extracting actual CSS variable names from tokens.css..." +tokens_css_path = "{base_path}/style-consolidation/style-1/tokens.css" +VERIFY: exists(tokens_css_path), "tokens.css not found. Phase 1.6 may have failed." + +tokens_css_content = Read(tokens_css_path) + +# Extract all CSS variable names from the generated file +# Pattern: --variable-name: value; +all_token_vars = extract_css_variables(tokens_css_content) # Regex: r'--([a-z0-9-_]+):' + +# Categorize variables for better Agent understanding +color_vars = [v for v in all_token_vars if v.startswith('--color-')] +typography_vars = [v for v in all_token_vars if v.startswith(('--font-', '--line-height-', '--letter-spacing-'))] +spacing_vars = [v for v in all_token_vars if v.startswith('--spacing-')] +radius_vars = [v for v in all_token_vars if v.startswith('--border-radius-')] +shadow_vars = [v for v in all_token_vars if v.startswith('--shadow-')] +breakpoint_vars = [v for v in all_token_vars if v.startswith('--breakpoint-')] + +REPORT: f"✅ Extracted {len(all_token_vars)} actual CSS variables from tokens.css" +REPORT: f" Colors: {len(color_vars)} | Typography: {len(typography_vars)} | Spacing: {len(spacing_vars)}" +``` + +### Phase 2: Style-Centric Batch Generation + +**Strategy**: S style-centric agents, each generating L×T prototypes for one style. +**Performance**: S agent calls for parallel execution + +```bash +REPORT: "🎨 Phase 2: Launching {style_variants} style-centric agents..." +REPORT: " Each agent generates {layout_variants}×{len(target_list)}={layout_variants * len(target_list)} prototypes" + +CREATE: {base_path}/prototypes/ + +# Launch ONE agent task PER STYLE (parallel execution) +FOR style_id IN range(1, style_variants + 1): + # Load style-specific context + style_tokens_path = "{base_path}/style-consolidation/style-{style_id}/design-tokens.json" + style_css_path = "{base_path}/style-consolidation/style-{style_id}/tokens.css" + style_guide_path = "{base_path}/style-consolidation/style-{style_id}/style-guide.md" + + # Extract design attributes for this style (if available) + IF design_space_analysis AND style_id <= len(design_space_analysis.divergent_directions): + design_attributes = design_space_analysis.divergent_directions[style_id - 1] + philosophy_name = design_attributes.philosophy_name + attributes_summary = JSON.stringify({ + density: design_attributes.design_attributes.density, + visual_weight: design_attributes.design_attributes.visual_weight, + formality: design_attributes.design_attributes.formality, + organic_vs_geometric: design_attributes.design_attributes.organic_vs_geometric, + innovation: design_attributes.design_attributes.innovation + }) + ELSE: + design_attributes = null + philosophy_name = f"Style {style_id}" + attributes_summary = "No design attributes available" + + Task(ui-design-agent): """ + [STYLE_CENTRIC_UI_BATCH_GENERATION] + + ## 🎯 Mission + Generate COMPLETE set of UI prototypes for Style-{style_id} across ALL targets and layouts. + Total files to create: {layout_variants × len(target_list) × 2} (HTML + CSS pairs) + + ## 🎨 Style Context (Your Design Identity) + STYLE_ID: {style_id} + PHILOSOPHY: {philosophy_name} + + {IF design_attributes: + DESIGN_ATTRIBUTES: {attributes_summary} + - density: {design_attributes.design_attributes.density} → Affects spacing, container usage + - visual_weight: {design_attributes.design_attributes.visual_weight} → Affects borders, shadows, nesting + - formality: {design_attributes.design_attributes.formality} → Affects font choices, structure formality + - organic_vs_geometric: {design_attributes.design_attributes.organic_vs_geometric} → Affects border-radius, alignment + - innovation: {design_attributes.design_attributes.innovation} → Affects layout adventurousness + } + + STYLE_FILES: + - Design Tokens: {style_tokens_path} + - CSS Variables: {style_css_path} + - Style Guide: {style_guide_path} + + ## 📋 Batch Generation Matrix + TARGETS: {target_list} # Example: [dashboard, settings] + LAYOUTS: 1 to {layout_variants} # Example: [1, 2, 3] + TOTAL_COMBINATIONS: {layout_variants × len(target_list)} + TARGET_TYPE: {target_type} + + ## 🔄 Required Execution Loop + + You MUST implement this nested loop to generate all combinations: + + ```pseudocode + FOR target IN {target_list}: + FOR layout_id IN [1..{layout_variants}]: + # Step 1: Load layout plan + layout_plan_path = "{base_path}/prototypes/_templates/{target}-layout-{layout_id}.json" + layout_plan = Read(layout_plan_path) + + # Step 2: Load CSS variables (to know what tokens exist) + tokens_css = Read("{style_css_path}") + available_vars = extract_all_css_variables(tokens_css) # Pattern: --variable-name: + + # Step 3: Generate STYLE-AWARE HTML structure + # ⚠️ CRITICAL: Structure must adapt based on design_attributes! + + html_structure = generate_html_with_style_awareness( + target=target, + layout_plan=layout_plan, + target_type="{target_type}", + design_attributes={design_attributes if design_attributes else "null"} + ) + + ## Style-Aware Structure Rules: + {IF design_attributes: + # Apply design_attributes to HTML structure: + IF density == 'spacious': + → Use FEWER containers, flatter DOM hierarchy + → Example:
+ IF density == 'compact': + → Use MORE containers, allow nesting + → Example:
+ + IF visual_weight == 'heavy': + → Add extra wrapper divs for border effects + → Example:
...
+ IF visual_weight == 'minimal' or 'light': + → Minimal wrappers, direct structure + → Example:
...
+ + IF organic_vs_geometric == 'brutalist': + → Hard edges, overlapping allowed, structural honesty + IF organic_vs_geometric == 'organic': + → Flowing, natural hierarchy + } + + # Step 4: Generate structural CSS using ONLY extracted variables + # ⚠️ CRITICAL: Use var() for ALL styling, NO hardcoded values + + css_content = generate_structural_css( + layout_plan=layout_plan, + available_vars=available_vars, # ⚠️ Only use these! + design_attributes={design_attributes if design_attributes else "null"} + ) + + ## CSS Requirements: + - ALL colors use: var(--color-*) + - ALL fonts use: var(--font-*) + - ALL spacing use: var(--spacing-*) + - ALL radius use: var(--border-radius-*) + - ALL shadows use: var(--shadow-*) + - Responsive: Use var(--breakpoint-*) for media queries + + {IF design_attributes: + # Apply design_attributes to CSS properties: + IF density == 'spacious': + → Use larger spacing values: var(--spacing-8) instead of var(--spacing-4) + IF density == 'compact': + → Use smaller spacing values: var(--spacing-2) instead of var(--spacing-4) + + IF visual_weight == 'heavy': + → Use stronger shadows: var(--shadow-lg) instead of var(--shadow-md) + → Add border declarations + IF visual_weight == 'minimal': + → Use subtle shadows: var(--shadow-sm) or none + → Minimal borders + } + + # Step 5: HTML must include CSS placeholders + html_content = html_structure.replace("", \"\"\" + + + + \"\"\") + + # Step 6: Write files IMMEDIATELY (don't accumulate) + output_html = "{base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html" + output_css = "{base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.css" + + Write(output_html, html_content) + Write(output_css, css_content) + + REPORT: f" ✓ Generated: {target}-style-{style_id}-layout-{layout_id}" + ``` + + ## ⚠️ Critical Requirements + + ### 1. HTML Generation Rules + - **Complete HTML5 document**: , , , + - **Semantic elements**: Use
,