catlog22/Claude-Code-Workflow
1
0
Fork 0
mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-02-12 02:37:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(ui-design): remove placeholder mechanism and simplify CSS generation workflow

Browse Source 
- Agent now directly generates HTML with final CSS references (no placeholders)
- Remove tokens.css dependency - agents create self-contained CSS from design-tokens.json
- Simplify ui-generate-preview-v2.sh (no placeholder replacement logic)
- Update Phase 2.5 validation to check actual href attributes
- Remove Phase 1.6 (token conversion step)
- Improve agent instructions with direct CSS value usage from design tokens

Benefits:
- Simpler workflow with fewer intermediate steps
- More flexible CSS generation - agents can adapt token values based on design_attributes
- Better style differentiation across variants
- Reduced dependencies and potential error points

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
catlog22
2025-10-10 19:29:38 +08:00
parent 043a3f05ba
commit 6e37881588
5 changed files with 457 additions and 803 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
.claude/commands/workflow/ui-design/explore-auto-v2.md
View File

@@ -24,11 +24,18 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
**Autonomous Flow** (⚠️ CONTINUOUS EXECUTION - DO NOT STOP): **Autonomous Flow** (⚠️ CONTINUOUS EXECUTION - DO NOT STOP):
1. User triggers: `/workflow:ui-design:explore-auto-v2 [params]` 1. User triggers: `/workflow:ui-design:explore-auto-v2 [params]`
2. Phase 1 (style-extract) → **WAIT for completion** → Auto-continues 2. Phase 0c: Target confirmation → User confirms → **IMMEDIATELY triggers Phase 1**
3. Phase 2 (style-consolidate) → **WAIT for completion** → Auto-continues 3. Phase 1 (style-extract) → **WAIT for completion** → Auto-continues
4. **Phase 3 (ui-generate-v2)** → **WAIT for completion** → Auto-continues 4. Phase 2 (style-consolidate) → **WAIT for completion** → Auto-continues
5. Phase 4 (design-update) → **WAIT for completion** → Auto-continues 5. **Phase 3 (ui-generate-v2)** → **WAIT for completion** → Auto-continues
6. Phase 5 (batch-plan, optional) → Reports completion 6. Phase 4 (design-update) → **WAIT for completion** → Auto-continues
7. Phase 5 (batch-plan, optional) → Reports completion
**Phase Transition Mechanism**:
- **Phase 0c (User Interaction)**: User confirms targets → IMMEDIATELY triggers Phase 1
- **Phase 1-5 (Autonomous)**: `SlashCommand` is BLOCKING - execution pauses until completion
- Upon each phase completion: Automatically process output and execute next phase
- No additional user interaction after Phase 0c confirmation
**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). **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).
@@ -186,6 +193,10 @@ MATCH user_input:
default → proceed with current list default → proceed with current list
STORE: inferred_target_list, target_type, target_inference_source STORE: inferred_target_list, target_type, target_inference_source
# ⚠️ CRITICAL: User confirmation complete, IMMEDIATELY initialize TodoWrite and execute Phase 1
# This is the only user interaction point in the workflow
# After this point, all subsequent phases execute automatically without user intervention
``` ```
**Helper Function: detect_target_type()** **Helper Function: detect_target_type()**
@@ -209,8 +220,8 @@ command = "/workflow:ui-design:extract --base-path \"{base_path}\" " +
SlashCommand(command) SlashCommand(command)
# Output: {style_variants} style cards with design_attributes # Output: {style_variants} style cards with design_attributes
# WAIT for extract command to complete, then IMMEDIATELY continue to Phase 2 # SlashCommand blocks until phase complete
# DO NOT STOP - Phase 2 must execute automatically # Upon completion, IMMEDIATELY execute Phase 2 (auto-continue)
``` ```
### Phase 2: Style Consolidation ### Phase 2: Style Consolidation
@@ -220,8 +231,8 @@ command = "/workflow:ui-design:consolidate --base-path \"{base_path}\" " +
SlashCommand(command) SlashCommand(command)
# Output: {style_variants} independent design systems with tokens.css # Output: {style_variants} independent design systems with tokens.css
# WAIT for consolidate command to complete, then IMMEDIATELY continue to Phase 3 # SlashCommand blocks until phase complete
# DO NOT STOP - Phase 3 must execute automatically # Upon completion, IMMEDIATELY execute Phase 3 (auto-continue)
``` ```
### Phase 3: Style-Centric Matrix UI Generation ### Phase 3: Style-Centric Matrix UI Generation
@@ -241,8 +252,8 @@ REPORT: " → Style-centric generation: Each of {style_variants} agents handle
SlashCommand(command) SlashCommand(command)
# WAIT for generate-v2 command to complete, then IMMEDIATELY continue to Phase 4 # SlashCommand blocks until phase complete
# DO NOT STOP - Phase 4 must execute automatically # Upon completion, IMMEDIATELY execute Phase 4 (auto-continue)
# Output: # Output:
# - {target}-layout-{l}.json (target-specific layout plans) # - {target}-layout-{l}.json (target-specific layout plans)
# - {target}-style-{s}-layout-{l}.html (final prototypes with style-aware structure) # - {target}-style-{s}-layout-{l}.html (final prototypes with style-aware structure)
@@ -255,9 +266,10 @@ SlashCommand(command)
command = "/workflow:ui-design:update" + (--session ? " --session {session_id}" : "") command = "/workflow:ui-design:update" + (--session ? " --session {session_id}" : "")
SlashCommand(command) SlashCommand(command)
# WAIT for update command to complete # SlashCommand blocks until phase complete
# If --batch-plan flag present: IMMEDIATELY continue to Phase 5 # Upon completion:
# If no --batch-plan: Workflow complete, display final report # - If --batch-plan flag present: IMMEDIATELY execute Phase 5 (auto-continue)
# - If no --batch-plan: Workflow complete, display final report
``` ```
### Phase 5: Batch Task Generation (Optional) ### Phase 5: Batch Task Generation (Optional)
@@ -270,7 +282,7 @@ IF --batch-plan:
## TodoWrite Pattern ## TodoWrite Pattern
```javascript ```javascript
// Initialize at workflow start to track multi-phase execution // Initialize IMMEDIATELY after Phase 0c user confirmation to track multi-phase execution
TodoWrite({todos: [ TodoWrite({todos: [
{"content": "Execute style extraction", "status": "in_progress", "activeForm": "Executing..."}, {"content": "Execute style extraction", "status": "in_progress", "activeForm": "Executing..."},
{"content": "Execute style consolidation", "status": "pending", "activeForm": "Executing..."}, {"content": "Execute style consolidation", "status": "pending", "activeForm": "Executing..."},
@@ -278,10 +290,11 @@ TodoWrite({todos: [
{"content": "Execute design integration", "status": "pending", "activeForm": "Executing..."} {"content": "Execute design integration", "status": "pending", "activeForm": "Executing..."}
]}) ]})
// ⚠️ CRITICAL: After EACH phase completion, you MUST: // ⚠️ CRITICAL: After EACH SlashCommand completion (Phase 1-5), you MUST:
// 1. Update current phase: status → "completed" // 1. SlashCommand blocks and returns when phase is complete
// 2. Update next phase: status → "in_progress" // 2. Update current phase: status → "completed"
// 3. Continue to execute next phase immediately // 3. Update next phase: status → "in_progress"
// 4. IMMEDIATELY execute next phase SlashCommand (auto-continue)
// This ensures continuous workflow tracking and prevents premature stopping // This ensures continuous workflow tracking and prevents premature stopping
``` ```

28
.claude/commands/workflow/ui-design/extract.md
View File

@@ -73,7 +73,7 @@ IF extraction_mode == "auto":
extraction_mode = (variants_count == 1) ? "imitate" : "explore" extraction_mode = (variants_count == 1) ? "imitate" : "explore"
REPORT: "🔍 Auto-detected mode: {extraction_mode} (variants_count={variants_count})" REPORT: "🔍 Auto-detected mode: {extraction_mode} (variants_count={variants_count})"
# Skip divergence analysis for imitate mode # Branch: Skip or Execute divergence analysis
IF extraction_mode == "imitate": IF extraction_mode == "imitate":
REPORT: "🎯 IMITATE MODE: High-fidelity single style extraction" REPORT: "🎯 IMITATE MODE: High-fidelity single style extraction"
REPORT: " → Skipping design space divergence analysis" REPORT: " → Skipping design space divergence analysis"
@@ -82,6 +82,8 @@ IF extraction_mode == "imitate":
# Skip to Phase 2 # Skip to Phase 2
GOTO Phase 2 GOTO Phase 2
# ELSE: REQUIRED execution path for explore mode
# ⚠️ CRITICAL: The following steps (Step 1-3) MUST be executed when extraction_mode == "explore"
# Step 1: Load project context (explore mode only) # Step 1: Load project context (explore mode only)
project_context = "" project_context = ""
IF exists({base_path}/.brainstorming/synthesis-specification.md): IF exists({base_path}/.brainstorming/synthesis-specification.md):
@@ -89,9 +91,12 @@ IF exists({base_path}/.brainstorming/synthesis-specification.md):
ELSE IF exists({base_path}/.brainstorming/ui-designer/analysis.md): ELSE IF exists({base_path}/.brainstorming/ui-designer/analysis.md):
project_context = Read(ui-designer/analysis.md) project_context = Read(ui-designer/analysis.md)
REPORT: "🎨 EXPLORE MODE: Analyzing design space to generate maximally contrasting directions..." REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
REPORT: "🎨 EXPLORE MODE: Analyzing design space (REQUIRED)"
REPORT: " → Generating {variants_count} maximally contrasting directions"
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
# Step 2: AI-driven divergent direction generation # Step 2: AI-driven divergent direction generation (REQUIRED)
divergence_prompt = """ divergence_prompt = """
Analyze user requirements and generate {variants_count} MAXIMALLY CONTRASTING design directions. Analyze user requirements and generate {variants_count} MAXIMALLY CONTRASTING design directions.
@@ -132,7 +137,7 @@ RULES: Output ONLY valid JSON, maximize inter-variant distance, ensure each vari
occupies distinct aesthetic region, avoid overlapping attributes occupies distinct aesthetic region, avoid overlapping attributes
""" """
# Execute AI analysis # Execute AI analysis (REQUIRED in explore mode)
divergent_directions = parse_json(Claude_Native_Analysis(divergence_prompt)) divergent_directions = parse_json(Claude_Native_Analysis(divergence_prompt))
REPORT: "✅ Generated {variants_count} contrasting design directions:" REPORT: "✅ Generated {variants_count} contrasting design directions:"
@@ -141,10 +146,17 @@ FOR direction IN divergent_directions.divergent_directions:
design_space_analysis = divergent_directions design_space_analysis = divergent_directions
# Step 3: Save design space analysis for consolidation phase # Step 3: Save design space analysis for consolidation phase (REQUIRED)
Write({file_path: "{base_path}/style-extraction/design-space-analysis.json", # ⚠️ CRITICAL: This file MUST be generated in explore mode for downstream consolidation
output_file_path = "{base_path}/style-extraction/design-space-analysis.json"
Write({file_path: output_file_path,
content: JSON.stringify(design_space_analysis, null, 2)}) content: JSON.stringify(design_space_analysis, null, 2)})
REPORT: "💾 Saved design space analysis to design-space-analysis.json" REPORT: "💾 Saved design space analysis to design-space-analysis.json"
# Verification step (REQUIRED)
VERIFY: file_exists(output_file_path) == true
REPORT: "✅ Verified: design-space-analysis.json exists ({file_size(output_file_path)} bytes)"
``` ```
### Phase 2: Variant-Specific Style Synthesis & Direct File Write ### Phase 2: Variant-Specific Style Synthesis & Direct File Write
@@ -232,8 +244,8 @@ REPORT: "💾 Saved {variants_count} style variants to style-cards.json"
TodoWrite({todos: [ TodoWrite({todos: [
{content: "Validate inputs and create directories", status: "completed", activeForm: "Validating inputs"}, {content: "Validate inputs and create directories", status: "completed", activeForm: "Validating inputs"},
{content: extraction_mode == "explore" ? "Analyze design space for maximum contrast" : "Skip design space analysis (imitate mode)", status: "completed", activeForm: extraction_mode == "explore" ? "Analyzing design space" : "Skipping analysis"}, {content: extraction_mode == "explore" ? "Analyze design space for maximum contrast" : "Skip design space analysis (imitate mode)", status: "completed", activeForm: extraction_mode == "explore" ? "Analyzing design space" : "Skipping analysis"},
{content: extraction_mode == "explore" ? `Generate ${variants_count} divergent design directions` : "Prepare for high-fidelity extraction", status: "completed", activeForm: extraction_mode == "explore" ? "Generating directions" : "Preparing extraction"}, {content: extraction_mode == "explore" ? `Generate ${variants_count} divergent design directions (REQUIRED)` : "Prepare for high-fidelity extraction", status: "completed", activeForm: extraction_mode == "explore" ? "Generating directions" : "Preparing extraction"},
{content: extraction_mode == "explore" ? "Save design space analysis for consolidation" : "Skip design space output", status: "completed", activeForm: extraction_mode == "explore" ? "Saving design space analysis" : "Skipping output"}, {content: extraction_mode == "explore" ? `Write and verify design-space-analysis.json (REQUIRED)` : "Skip design space output", status: "completed", activeForm: extraction_mode == "explore" ? "Writing and verifying file" : "Skipping output"},
{content: `Generate and write ${variants_count} ${extraction_mode == "explore" ? "contrasting" : "high-fidelity"} style variant${variants_count > 1 ? "s" : ""} to file`, status: "completed", activeForm: "Generating and writing variants"} {content: `Generate and write ${variants_count} ${extraction_mode == "explore" ? "contrasting" : "high-fidelity"} style variant${variants_count > 1 ? "s" : ""} to file`, status: "completed", activeForm: "Generating and writing variants"}
]}); ]});
``` ```

628
.claude/commands/workflow/ui-design/generate-v2.md
View File

@@ -1,6 +1,6 @@
--- ---
name: generate-v2 name: generate-v2
description: Generate UI prototypes using style-centric batch generation description: Generate UI prototypes using target-style-centric batch generation
usage: /workflow:ui-design:generate-v2 [--targets "<list>"] [--target-type "page|component"] [--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>] usage: /workflow:ui-design:generate-v2 [--targets "<list>"] [--target-type "page|component"] [--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]
examples: examples:
- /workflow:ui-design:generate-v2 --session WFS-auth --targets "dashboard,settings" --style-variants 3 --layout-variants 3 - /workflow:ui-design:generate-v2 --session WFS-auth --targets "dashboard,settings" --style-variants 3 --layout-variants 3
@@ -9,20 +9,21 @@ examples:
allowed-tools: TodoWrite(*), Read(*), Write(*), Task(ui-design-agent), Bash(*) allowed-tools: TodoWrite(*), Read(*), Write(*), Task(ui-design-agent), Bash(*)
--- ---
# UI Generation Command (Style-Centric Architecture) # UI Generation Command (Target-Style-Centric Architecture)
**Executor**: → @ui-design-agent **Executor**: → @ui-design-agent
**Parallel Generation**: Phase 2 → @ui-design-agent (S tasks, each handling L×T combinations) **Parallel Generation**: Phase 2 → @ui-design-agent (T×S tasks, each handling L layouts)
## Overview ## 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. Generate production-ready UI prototypes (HTML/CSS) using **target-style-centric batch generation**. Each agent handles all layout variants for one target × one style combination, ensuring component isolation and focused generation.
## Core Philosophy ## Core Philosophy
- **Style-Centric Batching**: Each of S agents generates ALL L×T prototypes for one style - **Target-Style-Centric**: Each of T×S agents generates L layouts for one target × one style
- **Component Isolation**: Tasks completely independent, preventing cross-component interference
- **Style-Aware Structure**: HTML DOM adapts based on design_attributes (density, visual_weight, etc.) - **Style-Aware Structure**: HTML DOM adapts based on design_attributes (density, visual_weight, etc.)
- **Performance Optimized**: S agent calls for efficient generation - **Performance Optimized**: T×S agent calls with highly focused scope per agent
- **Perfect Style Consistency**: All layouts for a style generated by single agent with full context - **Layout Inspiration**: Simple text-based research replaces complex JSON planning
- **Token-Driven Styling**: All styles reference design-tokens.json via tokens.css - **Self-Contained CSS**: Agent reads design-tokens.json and creates independent CSS (no token.css reference)
- **Production-Ready**: Semantic HTML5, ARIA attributes, responsive design - **Production-Ready**: Semantic HTML5, ARIA attributes, responsive design
## Execution Protocol ## Execution Protocol
@@ -96,7 +97,6 @@ STORE: target_list, target_type
# 5. Verify design systems exist # 5. Verify design systems exist
FOR style_id IN range(1, style_variants + 1): 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}/design-tokens.json)
VERIFY: exists({base_path}/style-consolidation/style-{style_id}/tokens.css)
# 6. Load design space analysis (for style-aware generation) # 6. Load design space analysis (for style-aware generation)
design_space_path = "{base_path}/style-extraction/design-space-analysis.json" design_space_path = "{base_path}/style-extraction/design-space-analysis.json"
@@ -114,400 +114,222 @@ ELSE:
synthesis_spec = null synthesis_spec = null
``` ```
### Phase 1.5: Target-Specific Layout Planning ### Phase 1.5: Target Layout Inspiration
```bash ```bash
REPORT: "📐 Planning {layout_variants} layout strategies for each target..." REPORT: "💡 Gathering layout inspiration for {len(target_list)} targets..."
CREATE: {base_path}/prototypes/_templates/ CREATE: {base_path}/prototypes/_inspirations/
# For each target, plan its specific layouts # For each target, gather layout inspiration via MCP search
FOR target IN target_list: FOR target IN target_list:
REPORT: " Planning layouts for '{target}' ({target_type})..." REPORT: " Researching '{target}' ({target_type}) layout patterns..."
FOR layout_id IN range(1, layout_variants + 1): # MCP search for layout patterns
Task(ui-design-agent): " search_query = f"common {target} {target_type} layout patterns variations best practices"
[TARGET_LAYOUT_PLANNING] search_results = mcp__exa__web_search_exa(
query=search_query,
numResults=5
)
TARGET: {target} | TARGET_TYPE: {target_type} | LAYOUT_ID: {layout_id}/{layout_variants} # Extract key layout patterns from search results
BASE_PATH: {base_path} inspiration_content = f"""Layout Inspiration for '{target}' ({target_type})
{IF synthesis_spec: PROJECT_REQUIREMENTS: {synthesis_spec}} Generated: {current_timestamp()}
Search Query: {search_query}
## Task ## Layout Patterns Identified
Research common {target} {target_type} layout variations and select the #{layout_id} approach.
Generate layout plan JSON that is STRUCTURALLY DIFFERENT from other layout IDs.
## Research (MCP Required) From web research, {layout_variants} distinct layout approaches:
mcp__exa__web_search_exa(
query=\"common {target} {target_type} layout patterns variations best practices 2024\",
numResults=5
)
## Selection Strategy Layout 1: [First structural pattern identified from search]
From search results, identify multiple layout variations and select approach #{layout_id}. - Key characteristics: ...
Ensure each layout_id uses a DIFFERENT structural pattern (not just styling differences). - Structure approach: ...
## Output File Layout 2: [Second structural pattern]
Write(\"{base_path}/prototypes/_templates/{target}-layout-{layout_id}.json\", layout_plan_json) - Key characteristics: ...
- Structure approach: ...
## JSON Structure (Required Fields) Layout 3: [Third structural pattern]
```json - Key characteristics: ...
{{ - Structure approach: ...
\"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 ## Reference Links
- Research-informed, target-specific, meaningfully different from other layout IDs {format_search_results_urls(search_results)}
- Write file directly (not text output)
"
# Wait for all agent tasks to complete ## Implementation Notes
REPORT: "⏳ Waiting for layout planning agents to complete..." - Each layout should be STRUCTURALLY DIFFERENT (not just CSS variations)
- Consider {target_type}-specific patterns (navigation, content areas, interactions)
- Adapt structure based on design_attributes in Phase 2
"""
# Verify agent created layout JSON files # Write simple inspiration file
REPORT: "📝 Verifying agent file creation..." inspiration_file = f"{base_path}/prototypes/_inspirations/{target}-layout-ideas.txt"
Write(inspiration_file, inspiration_content)
FOR target IN target_list: REPORT: f" ✓ Created: {target}-layout-ideas.txt"
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 REPORT: f"✅ Phase 1.5 complete: Gathered inspiration for {len(target_list)} targets"
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 ### Phase 2: Target-Style-Centric Batch Generation
```bash
REPORT: "🎨 Converting design tokens to CSS variables..."
# Check for jq dependency **Strategy**: T×S target-style-centric agents, each generating L layouts for one target × one style.
IF NOT command_exists("jq"): **Performance**: T×S agent calls with component isolation
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 ```bash
REPORT: "🎨 Phase 2: Launching {style_variants} style-centric agents..." REPORT: "🎨 Phase 2: Launching {len(target_list)}×{style_variants}={len(target_list) * style_variants} target-style agents..."
REPORT: " Each agent generates {layout_variants}×{len(target_list)}={layout_variants * len(target_list)} prototypes" REPORT: " Each agent generates {layout_variants} layouts for one component"
CREATE: {base_path}/prototypes/ CREATE: {base_path}/prototypes/
# Launch ONE agent task PER STYLE (parallel execution) # Launch ONE agent task PER TARGET × STYLE combination (parallel execution)
FOR style_id IN range(1, style_variants + 1): FOR target IN target_list:
# Load style-specific context # Load layout inspiration for this target
style_tokens_path = "{base_path}/style-consolidation/style-{style_id}/design-tokens.json" inspiration_path = f"{base_path}/prototypes/_inspirations/{target}-layout-ideas.txt"
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) FOR style_id IN range(1, style_variants + 1):
IF design_space_analysis AND style_id <= len(design_space_analysis.divergent_directions): # Load style-specific context
design_attributes = design_space_analysis.divergent_directions[style_id - 1] style_tokens_path = f"{base_path}/style-consolidation/style-{style_id}/design-tokens.json"
philosophy_name = design_attributes.philosophy_name style_guide_path = f"{base_path}/style-consolidation/style-{style_id}/style-guide.md"
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): """ # Extract design attributes for this style (if available)
[STYLE_CENTRIC_UI_BATCH_GENERATION] 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"
## 🎯 Mission Task(ui-design-agent): """
Generate COMPLETE set of UI prototypes for Style-{style_id} across ALL targets and layouts. [TARGET_STYLE_UI_GENERATION]
Total files to create: {layout_variants × len(target_list) × 2} (HTML + CSS pairs)
## 🎨 Style Context (Your Design Identity) ## 🎯 Mission
STYLE_ID: {style_id} Generate {layout_variants} layout variants for: {target} × Style-{style_id} ({philosophy_name})
PHILOSOPHY: {philosophy_name} Output: {layout_variants × 2} files ({layout_variants} HTML + {layout_variants} CSS)
{IF design_attributes: ## 🎨 Style Context
DESIGN_ATTRIBUTES: {attributes_summary} PHILOSOPHY: {philosophy_name}
- density: {design_attributes.design_attributes.density} → Affects spacing, container usage {IF design_attributes:
- visual_weight: {design_attributes.design_attributes.visual_weight} → Affects borders, shadows, nesting DESIGN_ATTRIBUTES: {attributes_summary}
- formality: {design_attributes.design_attributes.formality} → Affects font choices, structure formality Key impacts:
- organic_vs_geometric: {design_attributes.design_attributes.organic_vs_geometric} → Affects border-radius, alignment - density → DOM nesting depth, whitespace scale
- innovation: {design_attributes.design_attributes.innovation} → Affects layout adventurousness - visual_weight → wrapper layers, border/shadow strength
} - formality → semantic structure choices
- organic_vs_geometric → alignment, edge treatment
- innovation → layout adventurousness
}
STYLE_FILES: ## 📂 Input Resources
- Design Tokens: {style_tokens_path} **Design System**:
- CSS Variables: {style_css_path} - Design Tokens (JSON): {style_tokens_path}
- Style Guide: {style_guide_path} - Style Guide: {style_guide_path}
## 📋 Batch Generation Matrix **Layout Inspiration**: {inspiration_path}
TARGETS: {target_list} # Example: [dashboard, settings] Contains {layout_variants} distinct structural patterns
LAYOUTS: 1 to {layout_variants} # Example: [1, 2, 3]
TOTAL_COMBINATIONS: {layout_variants × len(target_list)}
TARGET_TYPE: {target_type}
## 🔄 Required Execution Loop **Target**: {target} ({target_type})
You MUST implement this nested loop to generate all combinations: ## 🔄 Generation Steps (for each layout 1..{layout_variants})
```pseudocode **1. Read Inspiration**
FOR target IN {target_list}: - Load: {inspiration_path}
FOR layout_id IN [1..{layout_variants}]: - Apply layout N pattern
# 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) **2. Read Design Tokens**
tokens_css = Read("{style_css_path}") - Load: {style_tokens_path}
available_vars = extract_all_css_variables(tokens_css) # Pattern: --variable-name: - Parse JSON structure and extract all design token values
- Understand token categories: colors, typography, spacing, shadows, borders, etc.
# Step 3: Generate STYLE-AWARE HTML structure **3. Generate HTML Structure**
# ⚠️ CRITICAL: Structure must adapt based on design_attributes! - Complete HTML5 document (<!DOCTYPE>, <html>, <head>, <body>)
- Semantic elements: <header>, <nav>, <main>, <section>, <article>, <footer>
- ARIA attributes: aria-label, role, aria-labelledby
- Responsive meta: <meta name="viewport" content="width=device-width, initial-scale=1">
- Include CSS reference: <link rel="stylesheet" href="{target}-style-{style_id}-layout-N.css">
- Example: For dashboard-style-1-layout-2.html, use <link rel="stylesheet" href="dashboard-style-1-layout-2.css">
html_structure = generate_html_with_style_awareness( {IF design_attributes:
target=target, **⚠️ Adapt DOM based on design_attributes:**
layout_plan=layout_plan, - density='spacious' → Flatter hierarchy
target_type="{target_type}", Example: <main><section class="card"></section></main>
design_attributes={design_attributes if design_attributes else "null"} - density='compact' → Deeper nesting
) Example: <main><div class="grid"><div class="card-wrapper"><section></section></div></div></main>
- visual_weight='heavy' → Extra wrapper divs for layered effects
Example: <div class="border-container"><div class="content-wrapper">...</div></div>
- visual_weight='minimal' → Direct structure, minimal wrappers
Example: <section class="card">...</section>
- organic_vs_geometric → Affects alignment patterns and edge structure
}
## Style-Aware Structure Rules: **4. Generate Self-Contained CSS**
{IF design_attributes: ⚠️ Use design token values DIRECTLY from step 2 - create complete, independent CSS
# Apply design_attributes to HTML structure:
IF density == 'spacious':
→ Use FEWER containers, flatter DOM hierarchy
→ Example: <main><section class="card"></section></main>
IF density == 'compact':
→ Use MORE containers, allow nesting
→ Example: <main><div class="grid"><div class="card-wrapper"><section></section></div></div></main>
IF visual_weight == 'heavy': **Required Token Usage** (from design-tokens.json):
→ Add extra wrapper divs for border effects - Colors: Use color values for backgrounds, text, borders
→ Example: <div class="border-container"><div class="content-wrapper">...</div></div> - Typography: Use font-family, font-size, font-weight, line-height values
IF visual_weight == 'minimal' or 'light': - Spacing: Use spacing scale for margins, padding, gaps
→ Minimal wrappers, direct structure - Borders: Use border-radius, border-width values
→ Example: <section class="card">...</section> - Shadows: Use box-shadow values
- Breakpoints: Use breakpoint values for @media queries
IF organic_vs_geometric == 'brutalist': {IF design_attributes:
→ Hard edges, overlapping allowed, structural honesty **Apply design_attributes to token selection:**
IF organic_vs_geometric == 'organic': - density='spacious' → Select larger spacing tokens
→ Flowing, natural hierarchy - density='compact' → Select smaller spacing tokens
} - visual_weight='heavy' → Use stronger shadows, add borders
- visual_weight='minimal' → Use subtle/no shadows
- formality → Affects typography choices and structure
- organic_vs_geometric → Affects border-radius and alignment
}
# Step 4: Generate structural CSS using ONLY extracted variables **CSS Structure**:
# ⚠️ CRITICAL: Use var() for ALL styling, NO hardcoded values - Complete styling: colors, typography, layout, spacing, effects
- Responsive design: Mobile-first with breakpoint-based @media
- Self-contained: No external dependencies or var() references
css_content = generate_structural_css( **5. Write Files IMMEDIATELY**
layout_plan=layout_plan, - Output paths:
available_vars=available_vars, # ⚠️ Only use these! - HTML: {base_path}/prototypes/{target}-style-{style_id}-layout-N.html
design_attributes={design_attributes if design_attributes else "null"} - CSS: {base_path}/prototypes/{target}-style-{style_id}-layout-N.css
) - Write after generating each layout (do NOT accumulate)
- Do NOT return content as text
## CSS Requirements: ## ✅ Success Criteria
- ALL colors use: var(--color-*) - [ ] Generated exactly {layout_variants × 2} files
- ALL fonts use: var(--font-*) - [ ] All HTML includes correct CSS file reference (matching filename pattern)
- ALL spacing use: var(--spacing-*) - [ ] All CSS uses design token values directly (self-contained, no var() references)
- ALL radius use: var(--border-radius-*) - [ ] CSS fully embodies the style's design tokens (colors, typography, spacing, effects)
- ALL shadows use: var(--shadow-*) - [ ] {IF design_attributes: 'HTML structure adapts to design_attributes' ELSE: 'HTML follows layout inspiration'}
- Responsive: Use var(--breakpoint-*) for media queries - [ ] Layouts are structurally distinct (different grids/regions, not just CSS tweaks)
- [ ] Files written to filesystem (not returned as text)
{IF design_attributes: ## 📋 Completion
# Apply design_attributes to CSS properties: Report: "✅ {target} × Style-{style_id} ({philosophy_name}): {layout_variants × 2} files created"
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': REPORT: "⏳ Phase 2: Waiting for {len(target_list) * style_variants} target-style agents to complete..."
→ 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("</head>", \"\"\"
<link rel="stylesheet" href="{{STRUCTURAL_CSS}}">
<link rel="stylesheet" href="{{TOKEN_CSS}}">
</head>
\"\"\")
# 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**: <!DOCTYPE html>, <html>, <head>, <body>
- **Semantic elements**: Use <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>
- **ARIA attributes**: aria-label, role, aria-labelledby for accessibility
- **Responsive meta**: <meta name="viewport" content="width=device-width, initial-scale=1">
- **CSS placeholders**: MUST include {{STRUCTURAL_CSS}} and {{TOKEN_CSS}} placeholders
### 2. Style-Aware Structure Adaptation
{IF design_attributes:
**You have design_attributes - USE THEM to vary DOM structure:**
- Same target+layout with different styles = DIFFERENT HTML structures
- Example: Minimalist dashboard (density=spacious) has fewer divs than Brutalist dashboard (visual_weight=heavy)
- This is NOT just CSS differences - the HTML tree itself must adapt!
}
{ELSE:
**No design_attributes available - generate clean, semantic structure**
- Focus on layout_plan requirements
- Use best practices for {target_type} structure
}
### 3. CSS Generation Rules
- **Token-driven**: 100% var() usage, ZERO hardcoded values
- **Structural only**: Layout, positioning, spacing, structure
- **NO styling**: No colors, fonts in structural CSS (handled by tokens.css)
- **Responsive**: Mobile-first, use var(--breakpoint-*) for media queries
### 4. Layout Differentiation
- layout-1 vs layout-2 vs layout-3 must be STRUCTURALLY DIFFERENT
- Not just CSS tweaks - different grid systems, different regions
- Refer to layout_plan.structure for each layout's unique requirements
### 5. Write Operations (MANDATORY)
- Write() IMMEDIATELY after generating each prototype
- Do NOT accumulate all content and write at end
- Do NOT return file contents as text output
- Each Write() creates one HTML or CSS file
## ✅ Completion Report
After generating ALL {layout_variants × len(target_list)} combinations, report:
```
✅ Style-{style_id} ({philosophy_name}) Batch Generation Complete
Files Created: {layout_variants × len(target_list) × 2} ({layout_variants × len(target_list)} HTML + {layout_variants × len(target_list)} CSS)
{FOR target IN target_list:
{target.capitalize()}:
{FOR layout_id IN range(1, layout_variants + 1):
- {target}-style-{style_id}-layout-{layout_id}.html/css ({file_size_kb} KB each)
}
}
Summary: All prototypes generated with {IF design_attributes: 'style-aware structure' ELSE: 'semantic structure'}
```
## 🔑 Key Success Criteria
- [ ] Generated exactly {layout_variants × len(target_list) × 2} files
- [ ] All HTML files include CSS placeholders
- [ ] All CSS files use var() exclusively (no hardcoded values)
- [ ] {IF design_attributes: '[ ] HTML structure varies based on design_attributes' ELSE: '[ ] HTML structure follows layout_plan'}
- [ ] Layout-1, Layout-2, Layout-3 are structurally distinct
- [ ] All files written directly to filesystem (not returned as text)
"""
REPORT: "⏳ Phase 2: Waiting for {style_variants} style-centric agents to complete..."
REPORT: " Expected total files: {style_variants × layout_variants × len(target_list) × 2}" REPORT: " Expected total files: {style_variants × layout_variants × len(target_list) × 2}"
``` ```
### Phase 2.5: Verify Agent File Creation ### Phase 2.5: Verify Agent File Creation
```bash ```bash
REPORT: "📝 Phase 2.5: Verifying style-centric generation..." REPORT: "📝 Phase 2.5: Verifying target-style generation..."
total_expected = style_variants × layout_variants × len(target_list) × 2 total_expected = style_variants × layout_variants × len(target_list) × 2
total_found = 0 total_found = 0
FOR style_id IN range(1, style_variants + 1): FOR target IN target_list:
style_files_found = 0 FOR style_id IN range(1, style_variants + 1):
agent_files_found = 0
FOR layout_id IN range(1, layout_variants + 1): FOR layout_id IN range(1, layout_variants + 1):
FOR target IN target_list:
html_file = f"{target}-style-{style_id}-layout-{layout_id}.html" html_file = f"{target}-style-{style_id}-layout-{layout_id}.html"
css_file = f"{target}-style-{style_id}-layout-{layout_id}.css" css_file = f"{target}-style-{style_id}-layout-{layout_id}.css"
@@ -522,20 +344,20 @@ FOR style_id IN range(1, style_variants + 1):
# Basic validation # Basic validation
VALIDATE: "<!DOCTYPE html>" in html_content, f"Invalid HTML: {html_file}" VALIDATE: "<!DOCTYPE html>" in html_content, f"Invalid HTML: {html_file}"
VALIDATE: "{{STRUCTURAL_CSS}}" in html_content, f"Missing CSS placeholder: {html_file}" VALIDATE: f'href="{css_file}"' in html_content, f"Missing or incorrect CSS reference in: {html_file}"
VALIDATE: "var(--" in css_content, f"Missing CSS variables: {css_file}" VALIDATE: len(css_content) > 100, f"CSS file too small (likely incomplete): {css_file}"
html_size = get_file_size(html_path) html_size = get_file_size(html_path)
css_size = get_file_size(css_path) css_size = get_file_size(css_path)
style_files_found += 2 agent_files_found += 2
total_found += 2 total_found += 2
REPORT: f" ✓ {html_file} ({html_size} KB) + {css_file} ({css_size} KB)" REPORT: f" ✓ {html_file} ({html_size} KB) + {css_file} ({css_size} KB)"
ELSE: ELSE:
ERROR: f" ✗ Missing files: {target}-style-{style_id}-layout-{layout_id}.*" ERROR: f" ✗ Missing files: {target}-style-{style_id}-layout-{layout_id}.*"
REPORT: f" Style-{style_id}: {style_files_found}/{layout_variants * len(target_list) * 2} files verified" REPORT: f" {target} × style-{style_id}: {agent_files_found}/{layout_variants * 2} files verified"
IF total_found == total_expected: IF total_found == total_expected:
REPORT: f"✅ Phase 2.5 complete: Verified all {total_expected} files" REPORT: f"✅ Phase 2.5 complete: Verified all {total_expected} files"
@@ -548,36 +370,14 @@ ELSE:
```bash ```bash
REPORT: "🌐 Phase 3: Generating preview files..." REPORT: "🌐 Phase 3: Generating preview files..."
# Phase 3a: Replace CSS placeholders in HTML files
FOR style_id IN range(1, style_variants + 1):
tokens_css_rel_path = f"../style-consolidation/style-{style_id}/tokens.css"
FOR layout_id IN range(1, layout_variants + 1):
FOR target IN target_list:
html_path = f"{base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html"
css_path = f"{target}-style-{style_id}-layout-{layout_id}.css" # Relative path
IF exists(html_path):
html_content = Read(html_path)
# Replace placeholders
html_content = html_content.replace("{{STRUCTURAL_CSS}}", css_path)
html_content = html_content.replace("{{TOKEN_CSS}}", tokens_css_rel_path)
# Write updated HTML
Write(html_path, html_content)
REPORT: " ✓ Updated CSS links in all HTML files"
# Phase 3b: Generate compare.html and index.html using simplified preview script
prototypes_dir = f"{base_path}/prototypes" prototypes_dir = f"{base_path}/prototypes"
# Simple preview generation (no template substitution) # Template-based preview generation script
# - Uses: ~/.claude/workflows/_template-compare-matrix.html
# - Auto-detects: S, L, T from file patterns
# - Generates: compare.html, index.html, PREVIEW.md
Bash(~/.claude/scripts/ui-generate-preview-v2.sh "{prototypes_dir}") Bash(~/.claude/scripts/ui-generate-preview-v2.sh "{prototypes_dir}")
# The script auto-detects: S, L, T from file patterns
# The script generates: compare.html, index.html, PREVIEW.md
# Verify preview files generated # Verify preview files generated
preview_files = [ preview_files = [
f"{base_path}/prototypes/compare.html", f"{base_path}/prototypes/compare.html",
@@ -604,10 +404,8 @@ ELSE:
```javascript ```javascript
TodoWrite({todos: [ TodoWrite({todos: [
{content: "Resolve paths and load design systems", status: "completed", activeForm: "Loading design systems"}, {content: "Resolve paths and load design systems", status: "completed", activeForm: "Loading design systems"},
{content: `Plan ${target_list.length}×${layout_variants} target-specific layouts`, status: "completed", activeForm: "Planning layouts"}, {content: `Gather layout inspiration for ${target_list.length} targets`, status: "completed", activeForm: "Gathering inspiration"},
{content: `Convert ${style_variants} design token files to CSS`, status: "completed", activeForm: "Converting tokens to CSS"}, {content: `Launch ${target_list.length}×${style_variants}=${target_list.length * style_variants} target-style agents (each handling ${layout_variants} layouts)`, status: "completed", activeForm: "Running target-style generation"},
{content: "Extract CSS variable names from tokens.css", status: "completed", activeForm: "Extracting variable names"},
{content: `Launch ${style_variants} style-centric agents (each handling ${layout_variants}×${target_list.length} combinations)`, status: "completed", activeForm: "Running style-centric generation"},
{content: `Verify ${style_variants * layout_variants * target_list.length * 2} generated files`, status: "completed", activeForm: "Verifying files"}, {content: `Verify ${style_variants * layout_variants * target_list.length * 2} generated files`, status: "completed", activeForm: "Verifying files"},
{content: "Generate preview files (compare.html, index.html)", status: "completed", activeForm: "Generating previews"} {content: "Generate preview files (compare.html, index.html)", status: "completed", activeForm: "Generating previews"}
]}); ]});
@@ -615,36 +413,37 @@ TodoWrite({todos: [
**Completion Message**: **Completion Message**:
``` ```
✅ Style-Centric UI Generation Complete! ✅ Target-Style-Centric UI Generation Complete!
Architecture: Style-Centric Batch Generation Architecture: Target-Style-Centric Batch Generation
Configuration: Configuration:
- Style Variants: {style_variants} - Style Variants: {style_variants}
- Layout Variants: {layout_variants} (target-specific planning) - Layout Variants: {layout_variants} (inspiration-based)
- Target Type: {target_type_icon} {target_type} - Target Type: {target_type_icon} {target_type}
- Targets: {target_list} - Targets: {target_list}
- Total Prototypes: {style_variants * layout_variants * len(target_list)} - Total Prototypes: {style_variants * layout_variants * len(target_list)}
Agent Execution: Agent Execution:
✅ Style-centric agents: S = {style_variants} agents ✅ Target-style agents: T×S = {len(target_list)}×{style_variants} = {len(target_list) * style_variants} agents
✅ Each agent handles: L×T = {layout_variants}×{len(target_list)} combinations ✅ Each agent handles: L = {layout_variants} layouts for one component
✅ Component isolation: Tasks completely independent
Design Quality: Design Quality:
✅ Style-Aware Structure: {IF design_space_analysis: 'YES - HTML adapts to design_attributes' ELSE: 'Standard semantic structure'} ✅ Style-Aware Structure: {IF design_space_analysis: 'YES - HTML adapts to design_attributes' ELSE: 'Standard semantic structure'}
✅ Style Consistency: PERFECT (each style by single agent) ✅ Focused generation: Each agent handles single target × single style
✅ Token-Driven Styling: 100% var() usage ✅ Self-Contained CSS: Direct design token usage (no var() dependencies)
Output Files: Output Files:
- Layout Plans: {len(target_list) × layout_variants} JSON files - Layout Inspirations: {len(target_list)} simple text files
- HTML Prototypes: {style_variants * layout_variants * len(target_list)} files - HTML Prototypes: {style_variants * layout_variants * len(target_list)} files
- CSS Files: {style_variants * layout_variants * len(target_list)} files - CSS Files: {style_variants * layout_variants * len(target_list)} files
- Preview Files: compare.html, index.html, PREVIEW.md - Preview Files: compare.html, index.html, PREVIEW.md
Generated Structure: Generated Structure:
📂 {base_path}/prototypes/ 📂 {base_path}/prototypes/
├── _templates/ ├── _inspirations/
│ └── {target}-layout-{l}.json ({len(target_list) × layout_variants} layout plans) │ └── {target}-layout-ideas.txt ({len(target_list)} inspiration files)
├── {target}-style-{s}-layout-{l}.html ({style_variants * layout_variants * len(target_list)} prototypes) ├── {target}-style-{s}-layout-{l}.html ({style_variants * layout_variants * len(target_list)} prototypes)
├── {target}-style-{s}-layout-{l}.css ├── {target}-style-{s}-layout-{l}.css
├── compare.html (interactive S×L×T matrix) ├── compare.html (interactive S×L×T matrix)
@@ -675,8 +474,8 @@ Note: When called from /workflow:ui-design:explore-auto, design-update is trigge
``` ```
{base_path}/prototypes/ {base_path}/prototypes/
├── _templates/ # Layout planning only ├── _inspirations/ # Layout inspiration only
│ └── {target}-layout-1.json # Layout plan JSON │ └── {target}-layout-ideas.txt # Simple inspiration text
├── {target}-style-{s}-layout-{l}.html # Final prototypes (S×L×T) ├── {target}-style-{s}-layout-{l}.html # Final prototypes (S×L×T)
├── {target}-style-{s}-layout-{l}.css ├── {target}-style-{s}-layout-{l}.css
├── compare.html # Interactive matrix ├── compare.html # Interactive matrix
@@ -684,7 +483,7 @@ Note: When called from /workflow:ui-design:explore-auto, design-update is trigge
└── PREVIEW.md # Instructions └── PREVIEW.md # Instructions
{base_path}/style-consolidation/ {base_path}/style-consolidation/
├── style-1/ (design-tokens.json, tokens.css, style-guide.md) ├── style-1/ (design-tokens.json, style-guide.md)
├── style-2/ (same structure) ├── style-2/ (same structure)
└── style-{S}/ (same structure) └── style-{S}/ (same structure)
``` ```
@@ -698,39 +497,40 @@ Note: When called from /workflow:ui-design:explore-auto, design-update is trigge
- **Unsupported target type**: Error if target_type not in ["page", "component"] - **Unsupported target type**: Error if target_type not in ["page", "component"]
### Phase-Specific Errors ### Phase-Specific Errors
- **Agent execution errors (Phase 2)**: Report details, identify which style agent failed - **Agent execution errors (Phase 2)**: Report details, identify which target × style agent failed
- **Token conversion errors (Phase 1.6)**: Check design-tokens.json format - **Invalid design-tokens.json**: Check JSON format and structure
- **Missing files (Phase 2.5)**: Indicates agent failed to write - review agent output logs - **Missing files (Phase 2.5)**: Indicates agent failed to write - review agent output logs
- **MCP search errors (Phase 1.5)**: Check network connectivity, retry search
- **Preview generation errors (Phase 3)**: Check script exists, permissions - **Preview generation errors (Phase 3)**: Check script exists, permissions
### Recovery Strategies ### Recovery Strategies
- **Partial generation**: If some style agents succeed, you still have those prototypes - **Partial generation**: If some target-style agents succeed, you still have those prototypes
- **Retry single style**: Can re-run targeting failed style directory - **Retry single combination**: Can re-run targeting failed target × style combination
- **Missing design_attributes**: Generation works without them - just less style-aware - **Missing design_attributes**: Generation works without them - just less style-aware
- **Permission errors**: Run `chmod +x ~/.claude/scripts/ui-generate-preview-v2.sh` - **Permission errors**: Run `chmod +x ~/.claude/scripts/ui-generate-preview-v2.sh`
## Key Features ## Key Features
1. **🚀 Style-Centric Batch Generation** 1. **🚀 Target-Style-Centric Batch Generation**
Each agent handles ALL L×T combinations for one style with efficient parallel execution Each agent handles L layouts for one target × one style with component isolation
2. **🎨 Style-Aware Structure Adaptation** 2. **🎯 Component Isolation**
Tasks completely independent, preventing cross-component interference
3. **🎨 Style-Aware Structure Adaptation**
HTML DOM adapts based on design_attributes (density, visual_weight, organic_vs_geometric) HTML DOM adapts based on design_attributes (density, visual_weight, organic_vs_geometric)
3. **📦 Intelligent Context Batching**
Each agent receives full style context + all layout plans + all targets
4. **⚡ Performance Optimized** 4. **⚡ Performance Optimized**
Parallel execution of S agents for efficient generation Parallel execution of T×S agents with highly focused scope per agent
5. **🔒 Guaranteed Style Consistency** 5. **💡 Simplified Layout Inspiration**
All layouts for a style by single agent; Maintains philosophy throughout Simple text-based research replaces complex JSON planning
6. **📐 Target-Specific Layout Planning** 6. **🔧 Focused Agent Scope**
Each target gets custom-designed layouts via MCP research Each agent generates only L layouts, reducing complexity and improving quality
7. **🎯 Token-Driven Styling** 7. **🎯 Self-Contained CSS Generation**
100% var() usage; Each style has own tokens.css Agents read design-tokens.json and create independent CSS with direct token values (no var() references)
8. **🌐 Interactive Visualization** 8. **🌐 Interactive Visualization**
Full-featured compare.html with matrix grid Full-featured compare.html with matrix grid
@@ -740,7 +540,7 @@ Note: When called from /workflow:ui-design:explore-auto, design-update is trigge
## Integration Points ## Integration Points
- **Input**: Per-style design-tokens.json + tokens.css; design-space-analysis.json (optional); targets + layout-variants - **Input**: Per-style design-tokens.json; design-space-analysis.json (optional); targets + layout-variants
- **Output**: S×L×T HTML/CSS prototypes for `/workflow:ui-design:update` - **Output**: S×L×T HTML/CSS prototypes with self-contained styling for `/workflow:ui-design:update`
- **Auto Integration**: Triggered by `/workflow:ui-design:explore-auto` - **Auto Integration**: Triggered by `/workflow:ui-design:explore-auto`
- **Backward Compatibility**: Works without design-space-analysis.json - **Backward Compatibility**: Works without design-space-analysis.json

82
.claude/commands/workflow/ui-design/generate.md
View File

@@ -124,23 +124,19 @@ FOR target IN target_list:
{IF --session: PROJECT_REQUIREMENTS: .workflow/WFS-{session}/.brainstorming/synthesis-specification.md} {IF --session: PROJECT_REQUIREMENTS: .workflow/WFS-{session}/.brainstorming/synthesis-specification.md}
## Task ## Task
Research common {target} {target_type} layout variations and select the #{layout_id} approach. Research {target} {target_type} layout variations → Select approach #{layout_id} → Generate layout plan JSON
Generate layout plan JSON that is STRUCTURALLY DIFFERENT from other layout IDs.
## Research (MCP Required) ## Research
mcp__exa__web_search_exa( mcp__exa__web_search_exa(
query=\"common {target} {target_type} layout patterns variations best practices 2024\", query=\"common {target} {target_type} layout patterns variations best practices 2024\",
numResults=5 numResults=5
) )
Identify multiple structural patterns → Select DISTINCT approach #{layout_id}
## Selection Strategy ## Output
From search results, identify multiple layout variations and select approach #{layout_id}.
Ensure each layout_id uses a DIFFERENT structural pattern (not just styling differences).
## Output File
Write(\"{base_path}/prototypes/_templates/{target}-layout-{layout_id}.json\", layout_plan_json) Write(\"{base_path}/prototypes/_templates/{target}-layout-{layout_id}.json\", layout_plan_json)
## JSON Structure (Required Fields) ## JSON Structure
```json ```json
{ {
"id": "layout-{layout_id}", "id": "layout-{layout_id}",
@@ -159,7 +155,7 @@ FOR target IN target_list:
``` ```
## Requirements ## Requirements
- Research-informed, target-specific, meaningfully different from other layout IDs - Research-informed, structurally DIFFERENT from other layout IDs
- Write file directly (not text output) - Write file directly (not text output)
" "
@@ -294,53 +290,45 @@ FOR layout_id IN range(1, layout_variants + 1):
**Plan**: {JSON.stringify(layout_plan, null, 2)} **Plan**: {JSON.stringify(layout_plan, null, 2)}
## Task ## Task
Generate TWO template files implementing the layout plan above: Generate TWO template files implementing the layout plan:
1. HTML: {base_path}/prototypes/_templates/{target}-layout-{layout_id}.html - HTML: {base_path}/prototypes/_templates/{target}-layout-{layout_id}.html
2. CSS: {base_path}/prototypes/_templates/{target}-layout-{layout_id}.css - CSS: {base_path}/prototypes/_templates/{target}-layout-{layout_id}.css
## HTML Requirements ## HTML Requirements
- Semantic HTML5 + ARIA attributes - Complete HTML5 document (<!DOCTYPE>, <html>, <head>, <body>)
- Wrapper: Always generate a complete HTML5 document (<!DOCTYPE html>, <html>, <head>, <body>) - Semantic elements + ARIA attributes
* IF page: <body> contains full page structure (header, nav, main, footer) - Body content:
* IF component: <body> contains only the component in a simple presentation wrapper * IF page → Full structure (header, nav, main, footer)
- ⚠️ CRITICAL: Include CSS placeholders in <head>: * IF component → Isolated element in presentation wrapper
- ⚠️ CRITICAL CSS placeholders in <head>:
<link rel=\"stylesheet\" href=\"{{STRUCTURAL_CSS}}\"> <link rel=\"stylesheet\" href=\"{{STRUCTURAL_CSS}}\">
<link rel=\"stylesheet\" href=\"{{TOKEN_CSS}}\"> <link rel=\"stylesheet\" href=\"{{TOKEN_CSS}}\">
## CSS Requirements - TOKEN REFERENCE (CRITICAL) ## CSS Requirements - Token Reference
**STEP 1: Read the actual tokens.css file FIRST** **1. Read tokens.css**
Read(\"{base_path}/style-consolidation/style-1/tokens.css\") Read(\"{base_path}/style-consolidation/style-1/tokens.css\")
Extract all CSS variable names (pattern: lines with \" --\" in \":root {}\")
**STEP 2: Extract ALL CSS variable names** **2. Available Tokens**
- Pattern: Lines starting with \" --\" inside \":root {}\"
- Example: \" --color-brand-primary: oklch(...)\" → use \"--color-brand-primary\"
**STEP 3: Use ONLY variables that exist in tokens.css**
- ✅ DO: Copy exact variable names from tokens.css
- ✅ DO: Use var(--exact-name-from-file)
- ❌ DON'T: Invent or guess variable names
- ❌ DON'T: Use hardcoded values (colors, fonts, spacing)
**Available Token Categories** (extracted from actual file):
- Colors: {', '.join(color_vars[:5])}... ({len(color_vars)} total) - Colors: {', '.join(color_vars[:5])}... ({len(color_vars)} total)
- Typography: {', '.join(typography_vars[:5])}... ({len(typography_vars)} total) - Typography: {', '.join(typography_vars[:5])}... ({len(typography_vars)} total)
- Spacing: {', '.join(spacing_vars[:5])}... ({len(spacing_vars)} total) - Spacing: {', '.join(spacing_vars[:5])}... ({len(spacing_vars)} total)
- Radius: {', '.join(radius_vars[:3])}... ({len(radius_vars)} total) - Radius: {', '.join(radius_vars[:3])}... ({len(radius_vars)} total)
- Shadows: {', '.join(shadow_vars)} - Shadows: {', '.join(shadow_vars)}
**OPTIONAL: Layout-Specific Token Extension** **3. Variable Usage Rules**
If core tokens are insufficient, create `{target}-layout-{layout_id}-tokens.css` with `--layout-*` prefix. - ✅ Use ONLY variables from tokens.css (exact names)
Example: `--layout-spacing-navbar-height`, `--layout-size-sidebar-width` - ✅ Format: var(--exact-name-from-file)
- ❌ NO invented/guessed variable names
- ❌ NO hardcoded values (colors, fonts, spacing)
**Example Workflow**: **4. Optional Extension**
1. Read tokens.css → find \"--color-brand-primary: oklch(0.55 0.12 45);\" If core tokens insufficient → Create `{target}-layout-{layout_id}-tokens.css` with `--layout-*` prefix
2. Use in CSS → \"background: var(--color-brand-primary);\" Examples: `--layout-spacing-navbar-height`, `--layout-size-sidebar-width`
**CSS Rules**: **CSS Scope**: Structural layout only (Flexbox, Grid, positioning)
- Token-driven: ALL stylistic values use var() (zero hardcoded values) **Responsive**: Mobile-first approach
- Mobile-first responsive design
- Structural layout only (Flexbox, Grid, positioning)
## Write Operations ## Write Operations
Write(\"{base_path}/prototypes/_templates/{target}-layout-{layout_id}.html\", html_content) Write(\"{base_path}/prototypes/_templates/{target}-layout-{layout_id}.html\", html_content)
@@ -459,22 +447,22 @@ FOR style_id IN range(1, style_variants + 1):
Task(@ui-design-agent): " Task(@ui-design-agent): "
[CROSS_PAGE_CONSISTENCY_VALIDATION] [CROSS_PAGE_CONSISTENCY_VALIDATION]
STYLE_ID: {style_id} | LAYOUT_ID: {layout_id} | TARGETS: {target_list} | TARGET_TYPE: {target_type} STYLE: {style_id} | LAYOUT: {layout_id} | TARGETS: {target_list} | TYPE: {target_type}
BASE_PATH: {base_path} BASE_PATH: {base_path}
## Input ## Input
{base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html/css (all targets) {base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html/css (all targets)
## Validate ## Validate
1. Shared component structure (header/nav/footer) 1. Shared components (header/nav/footer)
2. Token usage consistency (no hardcoded values) 2. Token usage (no hardcoded values)
3. Accessibility compliance (ARIA, headings, landmarks) 3. Accessibility (ARIA, headings, landmarks)
4. Layout strategy adherence 4. Layout strategy consistency
## Output ## Output
Write({base_path}/prototypes/consistency-report-s{style_id}-l{layout_id}.md, validation_report) Write({base_path}/prototypes/consistency-report-s{style_id}-l{layout_id}.md, validation_report)
Focus on shared elements. Page-specific variations are acceptable. Focus on shared elements. Page-specific variations acceptable.
" "
# Aggregate consistency reports # Aggregate consistency reports

471
.claude/scripts/ui-generate-preview-v2.sh
View File

@@ -1,10 +1,10 @@
#!/bin/bash #!/bin/bash
# #
# UI Generate Preview v2.0 - Simplified Preview Generation # UI Generate Preview v2.0 - Template-Based Preview Generation
# Purpose: Generate compare.html and index.html for style-centric prototypes # Purpose: Generate compare.html and index.html using template substitution
# No template substitution - just preview generation # Template: ~/.claude/workflows/_template-compare-matrix.html
# #
# Usage: ui-generate-preview-v2.sh <prototypes_dir> # Usage: ui-generate-preview-v2.sh <prototypes_dir> [--template <path>]
# #
set -e set -e
@@ -15,7 +15,25 @@ GREEN='\033[0;32m'
YELLOW='\033[1;33m' YELLOW='\033[1;33m'
NC='\033[0m' # No Color NC='\033[0m' # No Color
# Default template path
TEMPLATE_PATH="$HOME/.claude/workflows/_template-compare-matrix.html"
# Parse arguments
prototypes_dir="${1:-.}" prototypes_dir="${1:-.}"
shift || true
while [[ $# -gt 0 ]]; do
case $1 in
--template)
TEMPLATE_PATH="$2"
shift 2
;;
*)
echo -e "${RED}Unknown option: $1${NC}"
exit 1
;;
esac
done
if [[ ! -d "$prototypes_dir" ]]; then if [[ ! -d "$prototypes_dir" ]]; then
echo -e "${RED}Error: Directory not found: $prototypes_dir${NC}" echo -e "${RED}Error: Directory not found: $prototypes_dir${NC}"
@@ -42,264 +60,58 @@ T=$(echo "$targets" | wc -l)
echo -e " Detected: ${GREEN}${S}${NC} styles × ${GREEN}${L}${NC} layouts × ${GREEN}${T}${NC} targets" echo -e " Detected: ${GREEN}${S}${NC} styles × ${GREEN}${L}${NC} layouts × ${GREEN}${T}${NC} targets"
if [[ $S -eq 0 ]] || [[ $L -eq 0 ]] || [[ $T -eq 0 ]]; then if [[ $S -eq 0 ]] || [[ $L -eq 0 ]] || [[ $T -eq 0 ]]; then
echo -e "${RED}Error: No prototype files found matching pattern{target}-style-{s}-layout-{l}.html${NC}" echo -e "${RED}Error: No prototype files found matching pattern {target}-style-{s}-layout-{l}.html${NC}"
exit 1 exit 1
fi fi
# Generate compare.html # ============================================================================
echo -e "${YELLOW}🎨 Generating compare.html...${NC}" # Generate compare.html from template
# ============================================================================
cat > compare.html << 'EOF' echo -e "${YELLOW}🎨 Generating compare.html from template...${NC}"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI Design Matrix - Style × Layout Comparison</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #f5f5f5;
padding: 20px;
}
.header {
background: white;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.header h1 { margin-bottom: 10px; color: #333; }
.header .stats { color: #666; font-size: 14px; }
.controls {
background: white;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.controls label { margin-right: 10px; font-weight: 500; }
.controls select {
padding: 5px 10px;
border: 1px solid #ddd;
border-radius: 4px;
margin-right: 20px;
}
.matrix-container { margin-bottom: 40px; }
.matrix-title {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 15px 20px;
border-radius: 8px 8px 0 0;
font-size: 18px;
font-weight: 600;
}
.matrix {
display: grid;
gap: 20px;
padding: 20px;
background: white;
border-radius: 0 0 8px 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.cell {
border: 2px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
background: #fafafa;
transition: all 0.3s ease;
}
.cell:hover {
border-color: #667eea;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
transform: translateY(-2px);
}
.cell-header {
padding: 12px 15px;
background: #f8f9fa;
border-bottom: 1px solid #e0e0e0;
font-weight: 600;
color: #495057;
display: flex;
justify-content: space-between;
align-items: center;
}
.cell-header .badge {
background: #667eea;
color: white;
padding: 2px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 500;
}
.iframe-wrapper {
position: relative;
width: 100%;
padding-top: 75%; /* 4:3 aspect ratio */
background: white;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.cell-footer {
padding: 10px 15px;
background: #f8f9fa;
border-top: 1px solid #e0e0e0;
font-size: 12px;
color: #6c757d;
text-align: center;
}
.cell-footer a {
color: #667eea;
text-decoration: none;
margin: 0 5px;
}
.cell-footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="header">
<h1>🎨 UI Design Matrix Comparison</h1>
<div class="stats">
<span id="matrix-stats"></span>
</div>
</div>
<div class="controls"> if [[ ! -f "$TEMPLATE_PATH" ]]; then
<label for="target-selector">Target:</label> echo -e "${RED}Error: Template not found: $TEMPLATE_PATH${NC}"
<select id="target-selector"></select> exit 1
fi
<label for="layout-cols">Columns:</label> # Build pages/targets JSON array
<select id="layout-cols"> PAGES_JSON="["
<option value="1">1</option> first=true
<option value="2">2</option> for target in $targets; do
<option value="3" selected>3</option> if [[ "$first" == true ]]; then
<option value="4">4</option> first=false
</select> else
</div> PAGES_JSON+=", "
fi
PAGES_JSON+="\"$target\""
done
PAGES_JSON+="]"
<div id="matrices-container"></div> # Generate metadata
RUN_ID="run-$(date +%Y%m%d-%H%M%S)"
SESSION_ID="standalone"
TIMESTAMP=$(date -u +%Y-%m-%dT%H:%M:%SZ 2>/dev/null || date -u +"%Y-%m-%d")
<script> # Replace placeholders in template
// Data from script cat "$TEMPLATE_PATH" | \
const styles = STYLES_PLACEHOLDER; sed "s|{{run_id}}|${RUN_ID}|g" | \
const layouts = LAYOUTS_PLACEHOLDER; sed "s|{{session_id}}|${SESSION_ID}|g" | \
const targets = TARGETS_PLACEHOLDER; sed "s|{{timestamp}}|${TIMESTAMP}|g" | \
sed "s|{{style_variants}}|${S}|g" | \
sed "s|{{layout_variants}}|${L}|g" | \
sed "s|{{pages_json}}|${PAGES_JSON}|g" \
> compare.html
// Update stats echo -e "${GREEN} ✓ Generated compare.html from template${NC}"
document.getElementById('matrix-stats').textContent =
`${styles.length} styles × ${layouts.length} layouts × ${targets.length} targets = ${styles.length * layouts.length * targets.length} prototypes`;
// Populate target selector
const targetSelector = document.getElementById('target-selector');
targets.forEach((target, index) => {
const option = document.createElement('option');
option.value = target;
option.textContent = target.charAt(0).toUpperCase() + target.slice(1);
if (index === 0) option.selected = true;
targetSelector.appendChild(option);
});
// Generate matrices
function renderMatrices(target) {
const container = document.getElementById('matrices-container');
container.innerHTML = '';
styles.forEach(styleId => {
const matrixContainer = document.createElement('div');
matrixContainer.className = 'matrix-container';
const title = document.createElement('div');
title.className = 'matrix-title';
title.textContent = `Style ${styleId} - ${target.charAt(0).toUpperCase() + target.slice(1)}`;
const matrix = document.createElement('div');
matrix.className = 'matrix';
matrix.id = `matrix-style-${styleId}`;
layouts.forEach(layoutId => {
const cell = document.createElement('div');
cell.className = 'cell';
const header = document.createElement('div');
header.className = 'cell-header';
header.innerHTML = `
<span>Layout ${layoutId}</span>
<span class="badge">S${styleId}L${layoutId}</span>
`;
const iframeWrapper = document.createElement('div');
iframeWrapper.className = 'iframe-wrapper';
const iframe = document.createElement('iframe');
iframe.src = `./${target}-style-${styleId}-layout-${layoutId}.html`;
iframe.loading = 'lazy';
const footer = document.createElement('div');
footer.className = 'cell-footer';
footer.innerHTML = `
<a href="./${target}-style-${styleId}-layout-${layoutId}.html" target="_blank">Open ↗</a>
<a href="./${target}-style-${styleId}-layout-${layoutId}.css" target="_blank">CSS</a>
`;
iframeWrapper.appendChild(iframe);
cell.appendChild(header);
cell.appendChild(iframeWrapper);
cell.appendChild(footer);
matrix.appendChild(cell);
});
matrixContainer.appendChild(title);
matrixContainer.appendChild(matrix);
container.appendChild(matrixContainer);
});
updateGridColumns();
}
function updateGridColumns() {
const cols = document.getElementById('layout-cols').value;
styles.forEach(styleId => {
const matrix = document.getElementById(`matrix-style-${styleId}`);
if (matrix) {
matrix.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
}
});
}
// Event listeners
targetSelector.addEventListener('change', (e) => {
renderMatrices(e.target.value);
});
document.getElementById('layout-cols').addEventListener('change', updateGridColumns);
// Initial render
renderMatrices(targets[0]);
</script>
</body>
</html>
EOF
# Replace placeholders with actual data
sed -i "s/STYLES_PLACEHOLDER/[$(echo "$styles" | tr '\n' ',' | sed 's/,$//' | sed 's/\([0-9]\+\)/"\1"/g')]/" compare.html
sed -i "s/LAYOUTS_PLACEHOLDER/[$(echo "$layouts" | tr '\n' ',' | sed 's/,$//' | sed 's/\([0-9]\+\)/"\1"/g')]/" compare.html
sed -i "s/TARGETS_PLACEHOLDER/[$(echo "$targets" | tr '\n' ',' | sed 's/,$//' | sed 's/\(.*\)/"\1"/g')]/" compare.html
echo -e "${GREEN} ✓ Generated compare.html${NC}"
# ============================================================================
# Generate index.html # Generate index.html
# ============================================================================
echo -e "${YELLOW}📋 Generating index.html...${NC}" echo -e "${YELLOW}📋 Generating index.html...${NC}"
cat > index.html << EOF cat > index.html << 'EOF'
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
@@ -386,7 +198,7 @@ cat > index.html << EOF
</head> </head>
<body> <body>
<h1>🎨 UI Prototypes Index</h1> <h1>🎨 UI Prototypes Index</h1>
<p class="subtitle">Generated ${S}×${L}×${T} = $((S*L*T)) prototypes</p> <p class="subtitle">Generated __S__×__L__×__T__ = __TOTAL__ prototypes</p>
<div class="cta"> <div class="cta">
<h2>📊 Interactive Comparison</h2> <h2>📊 Interactive Comparison</h2>
@@ -395,43 +207,60 @@ cat > index.html << EOF
</div> </div>
<h2>📂 All Prototypes</h2> <h2>📂 All Prototypes</h2>
EOF __CONTENT__
# Generate index content
for style in $styles; do
echo "<div class='style-section'>" >> index.html
echo "<h2>Style ${style}</h2>" >> index.html
for target in $targets; do
target_capitalized="$(echo ${target:0:1} | tr '[:lower:]' '[:upper:]')${target:1}"
echo "<div class='target-group'>" >> index.html
echo "<h3>${target_capitalized}</h3>" >> index.html
echo "<div class='link-grid'>" >> index.html
for layout in $layouts; do
html_file="${target}-style-${style}-layout-${layout}.html"
if [[ -f "$html_file" ]]; then
echo "<a href='${html_file}' class='prototype-link' target='_blank'>" >> index.html
echo "<span class='label'>Layout ${layout}</span>" >> index.html
echo "<span class='icon'>↗</span>" >> index.html
echo "</a>" >> index.html
fi
done
echo "</div></div>" >> index.html
done
echo "</div>" >> index.html
done
cat >> index.html << EOF
</body> </body>
</html> </html>
EOF EOF
# Build content HTML
CONTENT=""
for style in $styles; do
CONTENT+="<div class='style-section'>"$'\n'
CONTENT+="<h2>Style ${style}</h2>"$'\n'
for target in $targets; do
target_capitalized="$(echo ${target:0:1} | tr '[:lower:]' '[:upper:]')${target:1}"
CONTENT+="<div class='target-group'>"$'\n'
CONTENT+="<h3>${target_capitalized}</h3>"$'\n'
CONTENT+="<div class='link-grid'>"$'\n'
for layout in $layouts; do
html_file="${target}-style-${style}-layout-${layout}.html"
if [[ -f "$html_file" ]]; then
CONTENT+="<a href='${html_file}' class='prototype-link' target='_blank'>"$'\n'
CONTENT+="<span class='label'>Layout ${layout}</span>"$'\n'
CONTENT+="<span class='icon'>↗</span>"$'\n'
CONTENT+="</a>"$'\n'
fi
done
CONTENT+="</div></div>"$'\n'
done
CONTENT+="</div>"$'\n'
done
# Calculate total
TOTAL_PROTOTYPES=$((S * L * T))
# Replace placeholders (using a temp file for complex replacement)
{
echo "$CONTENT" > /tmp/content_tmp.txt
sed "s|__S__|${S}|g" index.html | \
sed "s|__L__|${L}|g" | \
sed "s|__T__|${T}|g" | \
sed "s|__TOTAL__|${TOTAL_PROTOTYPES}|g" | \
sed -e "/__CONTENT__/r /tmp/content_tmp.txt" -e "/__CONTENT__/d" > /tmp/index_tmp.html
mv /tmp/index_tmp.html index.html
rm -f /tmp/content_tmp.txt
}
echo -e "${GREEN} ✓ Generated index.html${NC}" echo -e "${GREEN} ✓ Generated index.html${NC}"
# ============================================================================
# Generate PREVIEW.md # Generate PREVIEW.md
# ============================================================================
echo -e "${YELLOW}📝 Generating PREVIEW.md...${NC}" echo -e "${YELLOW}📝 Generating PREVIEW.md...${NC}"
cat > PREVIEW.md << EOF cat > PREVIEW.md << EOF
@@ -457,6 +286,8 @@ Open \`compare.html\` in your browser to see all prototypes in an interactive ma
- Switch between targets using the dropdown - Switch between targets using the dropdown
- Adjust grid columns for better viewing - Adjust grid columns for better viewing
- Direct links to full-page views - Direct links to full-page views
- Selection system with export to JSON
- Fullscreen mode for detailed inspection
### Option 2: Simple Index ### Option 2: Simple Index
@@ -475,76 +306,86 @@ prototypes/
├── compare.html # Interactive matrix view ├── compare.html # Interactive matrix view
├── index.html # Simple navigation index ├── index.html # Simple navigation index
├── PREVIEW.md # This file ├── PREVIEW.md # This file
$(for style in $styles; do EOF
for style in $styles; do
for target in $targets; do for target in $targets; do
for layout in $layouts; do for layout in $layouts; do
echo "├── ${target}-style-${style}-layout-${layout}.html" echo "├── ${target}-style-${style}-layout-${layout}.html" >> PREVIEW.md
echo "├── ${target}-style-${style}-layout-${layout}.css" echo "├── ${target}-style-${style}-layout-${layout}.css" >> PREVIEW.md
done done
done done
done) done
\`\`\`
cat >> PREVIEW.md << 'EOF2'
```
## 🎨 Style Variants ## 🎨 Style Variants
$(for style in $styles; do EOF2
echo "### Style ${style}"
echo "" for style in $styles; do
cat >> PREVIEW.md << EOF3
### Style ${style}
EOF3
style_guide="../style-consolidation/style-${style}/style-guide.md" style_guide="../style-consolidation/style-${style}/style-guide.md"
if [[ -f "$style_guide" ]]; then if [[ -f "$style_guide" ]]; then
head -n 10 "$style_guide" | tail -n +2 || echo "Design philosophy and tokens" head -n 10 "$style_guide" | tail -n +2 >> PREVIEW.md 2>/dev/null || echo "Design philosophy and tokens" >> PREVIEW.md
else else
echo "Design system ${style}" echo "Design system ${style}" >> PREVIEW.md
fi fi
echo "" echo "" >> PREVIEW.md
done) done
## 📐 Layout Variants cat >> PREVIEW.md << 'EOF4'
$(for layout in $layouts; do
echo "### Layout ${layout}"
echo ""
for target in $targets; do
layout_plan="_templates/${target}-layout-${layout}.json"
if [[ -f "$layout_plan" ]]; then
name=$(grep -o '"name":[[:space:]]*"[^"]*"' "$layout_plan" | head -1 | cut -d'"' -f4 || echo "Layout ${layout}")
echo "- **${target}**: ${name}"
fi
done
echo ""
done)
## 🎯 Targets ## 🎯 Targets
$(for target in $targets; do EOF4
for target in $targets; do
target_capitalized="$(echo ${target:0:1} | tr '[:lower:]' '[:upper:]')${target:1}" target_capitalized="$(echo ${target:0:1} | tr '[:lower:]' '[:upper:]')${target:1}"
echo "- **${target_capitalized}**: ${L} layouts × ${S} styles = $((L*S)) variations" echo "- **${target_capitalized}**: ${L} layouts × ${S} styles = $((L*S)) variations" >> PREVIEW.md
done) done
cat >> PREVIEW.md << 'EOF5'
## 💡 Tips ## 💡 Tips
1. **Comparison**: Use compare.html to see how different styles affect the same layout 1. **Comparison**: Use compare.html to see how different styles affect the same layout
2. **Navigation**: Use index.html for quick access to specific prototypes 2. **Navigation**: Use index.html for quick access to specific prototypes
3. **Inspection**: Open browser DevTools to inspect HTML structure and CSS 3. **Selection**: Mark favorites in compare.html using star icons
4. **Sharing**: All files are standalone - can be shared or deployed directly 4. **Export**: Download selection JSON for implementation planning
5. **Inspection**: Open browser DevTools to inspect HTML structure and CSS
6. **Sharing**: All files are standalone - can be shared or deployed directly
## 📝 Next Steps ## 📝 Next Steps
1. Review prototypes in compare.html 1. Review prototypes in compare.html
2. Select preferred style × layout combinations 2. Select preferred style × layout combinations
3. Provide feedback for refinement 3. Export selections as JSON
4. Use selected designs for implementation 4. Provide feedback for refinement
5. Use selected designs for implementation
--- ---
Generated by /workflow:ui-design:generate-v2 (Style-Centric Architecture) Generated by /workflow:ui-design:generate-v2 (Style-Centric Architecture)
EOF EOF5
echo -e "${GREEN} ✓ Generated PREVIEW.md${NC}" echo -e "${GREEN} ✓ Generated PREVIEW.md${NC}"
# ============================================================================
# Completion Summary
# ============================================================================
echo "" echo ""
echo -e "${GREEN}✅ Preview generation complete!${NC}" echo -e "${GREEN}✅ Preview generation complete!${NC}"
echo -e " Files created: compare.html, index.html, PREVIEW.md" echo -e " Files created: compare.html, index.html, PREVIEW.md"
echo -e " Matrix: ${S} styles × ${L} layouts × ${T} targets = $((S*L*T)) prototypes" echo -e " Matrix: ${S} styles × ${L} layouts × ${T} targets = $((S*L*T)) prototypes"
echo "" echo ""
echo -e "${YELLOW}🌐 Open compare.html to view interactive matrix${NC}" echo -e "${YELLOW}🌐 Next Steps:${NC}"
echo -e " 1. Open compare.html for interactive matrix view"
echo -e " 2. Open index.html for simple navigation"
echo -e " 3. Read PREVIEW.md for detailed usage guide"
echo ""