mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-14 02:42:04 +08:00
Refactor UI Generation Workflow: Optimize matrix generation process, enhance layout planning, and improve error handling. Consolidate steps for better performance and clarity, ensuring production-ready output with semantic HTML and responsive design. Update examples and documentation for clarity and usability.
This commit is contained in:
catlog22
@@ -3,674 +3,319 @@ name: generate-v2
|
||||
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>]
|
||||
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
|
||||
- /workflow:ui-design:generate-v2 --session WFS-auth --targets "dashboard,settings"
|
||||
- /workflow:ui-design:generate-v2 --targets "home,pricing" --style-variants 2 --layout-variants 2
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Task(ui-design-agent), Bash(*)
|
||||
---
|
||||
|
||||
# UI Generation Command (Target-Style-Centric Architecture)
|
||||
|
||||
**Executor**: → @ui-design-agent
|
||||
**Parallel Generation**: Phase 2 → @ui-design-agent (T×S tasks, each handling L layouts)
|
||||
# Generate UI Prototypes V2 (/workflow:ui-design:generate-v2)
|
||||
|
||||
## Overview
|
||||
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.
|
||||
Generate matrix of UI prototypes (`style × layout × targets`) using **target-style-centric batch generation**. Each agent handles all layouts for one target × style combination.
|
||||
|
||||
## Core Philosophy
|
||||
- **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.)
|
||||
- **Performance Optimized**: T×S agent calls with highly focused scope per agent
|
||||
- **Layout Inspiration**: Simple text-based research replaces complex JSON planning
|
||||
- **Self-Contained CSS**: Agent reads design-tokens.json and creates independent CSS (no token.css reference)
|
||||
- **Production-Ready**: Semantic HTML5, ARIA attributes, responsive design
|
||||
**Strategy**: Target-Style-Centric
|
||||
- **Agent scope**: Each of `T × S` agents generates `L` layouts
|
||||
- **Component isolation**: Complete task independence
|
||||
- **Style-aware**: HTML adapts to design_attributes
|
||||
- **Self-contained CSS**: Direct token values (no var() refs)
|
||||
|
||||
## Execution Protocol
|
||||
**Supports**: Pages (full layouts) and components (isolated elements)
|
||||
|
||||
### Phase 1: Path Resolution & Context Loading
|
||||
## Phase 1: Setup & Validation
|
||||
|
||||
### Step 1: Resolve Base Path & Parse Configuration
|
||||
```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/*")
|
||||
# Determine working directory
|
||||
bash(find .workflow -type d -name "design-*" | head -1) # Auto-detect
|
||||
|
||||
# 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
|
||||
# Get counts (defaults: style=auto, layout=3)
|
||||
bash(ls {base_path}/style-consolidation/style-* -d | wc -l)
|
||||
|
||||
# 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)
|
||||
|
||||
# 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
|
||||
# Parse targets (Priority: --targets → --pages → synthesis-specification.md → default ["home"])
|
||||
# Target type: "page" (default) or "component"
|
||||
```
|
||||
|
||||
### Phase 1.2: Token源智能检测
|
||||
|
||||
### Step 2: Validate Inputs
|
||||
```bash
|
||||
REPORT: "🔍 Phase 1.2: Detecting token sources for {style_variants} style(s)..."
|
||||
# Check design systems exist
|
||||
bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "valid")
|
||||
|
||||
token_sources = {} # {style_id: {path: str, quality: str, source: str}}
|
||||
consolidated_count = 0
|
||||
proposed_count = 0
|
||||
|
||||
FOR style_id IN range(1, style_variants + 1):
|
||||
# 优先级1：Consolidated tokens（完整refinement from consolidate command）
|
||||
consolidated_path = "{base_path}/style-consolidation/style-{style_id}/design-tokens.json"
|
||||
|
||||
IF exists(consolidated_path):
|
||||
token_sources[style_id] = {
|
||||
"path": consolidated_path,
|
||||
"quality": "consolidated",
|
||||
"source": "consolidate command"
|
||||
}
|
||||
consolidated_count += 1
|
||||
REPORT: " ✓ Style-{style_id}: Using consolidated tokens (production-ready)"
|
||||
CONTINUE
|
||||
|
||||
# 优先级2：Proposed tokens from style-cards.json（fast-track from extract command）
|
||||
style_cards_path = "{base_path}/style-extraction/style-cards.json"
|
||||
|
||||
IF exists(style_cards_path):
|
||||
# 读取style-cards.json
|
||||
style_cards_data = Read(style_cards_path)
|
||||
|
||||
# 验证variant index有效
|
||||
IF style_id <= len(style_cards_data.style_cards):
|
||||
variant_index = style_id - 1
|
||||
variant = style_cards_data.style_cards[variant_index]
|
||||
proposed_tokens = variant.proposed_tokens
|
||||
|
||||
# 创建临时consolidation目录（兼容现有逻辑）
|
||||
temp_consolidation_dir = "{base_path}/style-consolidation/style-{style_id}"
|
||||
Bash(mkdir -p "{temp_consolidation_dir}")
|
||||
|
||||
# 写入proposed tokens（Fast Token Adaptation）
|
||||
temp_tokens_path = "{temp_consolidation_dir}/design-tokens.json"
|
||||
Write(temp_tokens_path, JSON.stringify(proposed_tokens, null, 2))
|
||||
|
||||
# 创建简化style guide（可选but recommended）
|
||||
simple_guide_content = f"""# Design System: {variant.name}
|
||||
|
||||
## Design Philosophy
|
||||
{variant.design_philosophy}
|
||||
|
||||
## Description
|
||||
{variant.description}
|
||||
|
||||
## Design Tokens
|
||||
Complete token specification in `design-tokens.json`.
|
||||
|
||||
**Note**: Using proposed tokens from extraction phase (fast-track mode).
|
||||
For production-ready refinement with philosophy-driven token generation, run `/workflow:ui-design:consolidate` first.
|
||||
|
||||
## Color Preview
|
||||
- Primary: {variant.preview.primary if variant.preview else "N/A"}
|
||||
- Background: {variant.preview.background if variant.preview else "N/A"}
|
||||
|
||||
## Typography Preview
|
||||
- Heading Font: {variant.preview.font_heading if variant.preview else "N/A"}
|
||||
- Border Radius: {variant.preview.border_radius if variant.preview else "N/A"}
|
||||
"""
|
||||
|
||||
Write("{temp_consolidation_dir}/style-guide.md", simple_guide_content)
|
||||
|
||||
token_sources[style_id] = {
|
||||
"path": temp_tokens_path,
|
||||
"quality": "proposed",
|
||||
"source": "extract command (fast adaptation)"
|
||||
}
|
||||
proposed_count += 1
|
||||
|
||||
REPORT: " ✓ Style-{style_id}: Using proposed tokens (fast-track)"
|
||||
REPORT: " Source: {variant.name} from style-cards.json"
|
||||
WARN: " ⚠️ Tokens not refined - for production quality, run consolidate first"
|
||||
CONTINUE
|
||||
ELSE:
|
||||
ERROR: "style-cards.json exists but does not contain variant {style_id}"
|
||||
ERROR: " style-cards.json has {len(style_cards_data.style_cards)} variants, but requested style-{style_id}"
|
||||
SUGGEST: " Reduce --style-variants to {len(style_cards_data.style_cards)} or run extract with more variants"
|
||||
EXIT 1
|
||||
|
||||
# 优先级3：错误处理（无可用token源）
|
||||
ERROR: "No token source found for style-{style_id}"
|
||||
ERROR: " Expected either:"
|
||||
ERROR: " 1. {consolidated_path} (from /workflow:ui-design:consolidate)"
|
||||
ERROR: " 2. {style_cards_path} (from /workflow:ui-design:extract)"
|
||||
ERROR: ""
|
||||
SUGGEST: "Run one of the following commands first:"
|
||||
SUGGEST: " - /workflow:ui-design:extract --base-path \"{base_path}\" --images \"refs/*.png\" --variants {style_variants}"
|
||||
SUGGEST: " - /workflow:ui-design:consolidate --base-path \"{base_path}\" --variants {style_variants}"
|
||||
EXIT 1
|
||||
|
||||
# 汇总报告Token sources
|
||||
REPORT: ""
|
||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
REPORT: "📊 Token Source Summary:"
|
||||
REPORT: " Total style variants: {style_variants}"
|
||||
REPORT: " Consolidated (production-ready): {consolidated_count}/{style_variants}"
|
||||
REPORT: " Proposed (fast-track): {proposed_count}/{style_variants}"
|
||||
|
||||
IF proposed_count > 0:
|
||||
REPORT: ""
|
||||
REPORT: "💡 Production Quality Tip:"
|
||||
REPORT: " Fast-track mode is active for {proposed_count} style(s) using proposed tokens."
|
||||
REPORT: " For production-ready quality with philosophy-driven refinement:"
|
||||
REPORT: " /workflow:ui-design:consolidate --base-path \"{base_path}\" --variants {style_variants}"
|
||||
REPORT: ""
|
||||
REPORT: " Benefits of consolidate:"
|
||||
REPORT: " • Philosophy-driven token refinement"
|
||||
REPORT: " • WCAG AA accessibility validation"
|
||||
REPORT: " • Complete design system documentation"
|
||||
REPORT: " • Token gap filling and consistency checks"
|
||||
|
||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
|
||||
# Store token_sources for use in Phase 2
|
||||
STORE: token_sources, consolidated_count, proposed_count
|
||||
# Validate target names (lowercase, alphanumeric, hyphens only)
|
||||
# Load design-space-analysis.json (optional, for style-aware generation)
|
||||
```
|
||||
|
||||
### Phase 1.5: Target Layout Inspiration
|
||||
**Output**: `base_path`, `style_variants`, `layout_variants`, `target_list[]`, `target_type`, `design_space_analysis` (optional)
|
||||
|
||||
### Step 3: Detect Token Sources
|
||||
```bash
|
||||
REPORT: "💡 Gathering layout inspiration for {len(target_list)} targets..."
|
||||
# Priority 1: consolidated tokens (production-ready from /workflow:ui-design:consolidate)
|
||||
# Priority 2: proposed tokens from style-cards.json (fast-track from /workflow:ui-design:extract)
|
||||
|
||||
CREATE: {base_path}/prototypes/_inspirations/
|
||||
bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "consolidated")
|
||||
# OR
|
||||
bash(test -f {base_path}/style-extraction/style-cards.json && echo "proposed")
|
||||
|
||||
# For each target, gather layout inspiration via MCP search
|
||||
FOR target IN target_list:
|
||||
REPORT: " Researching '{target}' ({target_type}) layout patterns..."
|
||||
|
||||
# MCP search for layout patterns
|
||||
search_query = f"common {target} {target_type} layout patterns variations best practices"
|
||||
search_results = mcp__exa__web_search_exa(
|
||||
query=search_query,
|
||||
numResults=5
|
||||
)
|
||||
|
||||
# Extract key layout patterns from search results
|
||||
inspiration_content = f"""Layout Inspiration for '{target}' ({target_type})
|
||||
Generated: {current_timestamp()}
|
||||
Search Query: {search_query}
|
||||
|
||||
## Layout Patterns Identified
|
||||
|
||||
From web research, {layout_variants} distinct layout approaches:
|
||||
|
||||
Layout 1: [First structural pattern identified from search]
|
||||
- Key characteristics: ...
|
||||
- Structure approach: ...
|
||||
|
||||
Layout 2: [Second structural pattern]
|
||||
- Key characteristics: ...
|
||||
- Structure approach: ...
|
||||
|
||||
Layout 3: [Third structural pattern]
|
||||
- Key characteristics: ...
|
||||
- Structure approach: ...
|
||||
|
||||
## Reference Links
|
||||
{format_search_results_urls(search_results)}
|
||||
|
||||
## Implementation Notes
|
||||
- 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
|
||||
"""
|
||||
|
||||
# Write simple inspiration file
|
||||
inspiration_file = f"{base_path}/prototypes/_inspirations/{target}-layout-ideas.txt"
|
||||
Write(inspiration_file, inspiration_content)
|
||||
|
||||
REPORT: f" ✓ Created: {target}-layout-ideas.txt"
|
||||
|
||||
REPORT: f"✅ Phase 1.5 complete: Gathered inspiration for {len(target_list)} targets"
|
||||
# If proposed: Create temp consolidation dir + write proposed tokens
|
||||
bash(mkdir -p {base_path}/style-consolidation/style-{id})
|
||||
Write({base_path}/style-consolidation/style-{id}/design-tokens.json, proposed_tokens)
|
||||
```
|
||||
|
||||
### Phase 2: Target-Style-Centric Batch Generation
|
||||
|
||||
**Strategy**: T×S target-style-centric agents, each generating L layouts for one target × one style.
|
||||
**Performance**: T×S agent calls with component isolation
|
||||
**Output**: `token_sources{}`, `consolidated_count`, `proposed_count`
|
||||
|
||||
### Step 4: Gather Layout Inspiration
|
||||
```bash
|
||||
REPORT: "🎨 Phase 2: Launching {len(target_list)}×{style_variants}={len(target_list) * style_variants} target-style agents..."
|
||||
REPORT: " Each agent generates {layout_variants} layouts for one component"
|
||||
bash(mkdir -p {base_path}/prototypes/_inspirations)
|
||||
|
||||
CREATE: {base_path}/prototypes/
|
||||
# For each target: Research via MCP
|
||||
# mcp__exa__web_search_exa(query="{target} {target_type} layout patterns", numResults=5)
|
||||
|
||||
# Launch ONE agent task PER TARGET × STYLE combination (parallel execution)
|
||||
FOR target IN target_list:
|
||||
# Load layout inspiration for this target
|
||||
inspiration_path = f"{base_path}/prototypes/_inspirations/{target}-layout-ideas.txt"
|
||||
|
||||
FOR style_id IN range(1, style_variants + 1):
|
||||
# Load style-specific context
|
||||
style_tokens_path = f"{base_path}/style-consolidation/style-{style_id}/design-tokens.json"
|
||||
style_guide_path = f"{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): """
|
||||
[TARGET_STYLE_UI_GENERATION]
|
||||
|
||||
## 🎯 Mission
|
||||
Generate {layout_variants} layout variants for: {target} × Style-{style_id} ({philosophy_name})
|
||||
Output: {layout_variants × 2} files ({layout_variants} HTML + {layout_variants} CSS)
|
||||
|
||||
## 🎨 Style Context
|
||||
PHILOSOPHY: {philosophy_name}
|
||||
{IF design_attributes:
|
||||
DESIGN_ATTRIBUTES: {attributes_summary}
|
||||
Key impacts:
|
||||
- density → DOM nesting depth, whitespace scale
|
||||
- visual_weight → wrapper layers, border/shadow strength
|
||||
- formality → semantic structure choices
|
||||
- organic_vs_geometric → alignment, edge treatment
|
||||
- innovation → layout adventurousness
|
||||
}
|
||||
|
||||
## 📂 Input Resources
|
||||
**Design System**:
|
||||
- Design Tokens (JSON): {style_tokens_path}
|
||||
- Style Guide: {style_guide_path}
|
||||
|
||||
**Layout Inspiration**: {inspiration_path}
|
||||
Contains {layout_variants} distinct structural patterns
|
||||
|
||||
**Target**: {target} ({target_type})
|
||||
|
||||
## 🔄 Generation Steps (for each layout 1..{layout_variants})
|
||||
|
||||
**1. Read Inspiration**
|
||||
- Load: {inspiration_path}
|
||||
- Apply layout N pattern
|
||||
|
||||
**2. Read Design Tokens**
|
||||
- Load: {style_tokens_path}
|
||||
- Parse JSON structure and extract all design token values
|
||||
- Understand token categories: colors, typography, spacing, shadows, borders, etc.
|
||||
|
||||
**3. Generate HTML Structure**
|
||||
- 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">
|
||||
|
||||
{IF design_attributes:
|
||||
**⚠️ Adapt DOM based on design_attributes:**
|
||||
- density='spacious' → Flatter hierarchy
|
||||
Example: <main><section class="card"></section></main>
|
||||
- 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
|
||||
}
|
||||
|
||||
**4. Generate Self-Contained CSS**
|
||||
⚠️ Use design token values DIRECTLY from step 2 - create complete, independent CSS
|
||||
|
||||
**Required Token Usage** (from design-tokens.json):
|
||||
- Colors: Use color values for backgrounds, text, borders
|
||||
- Typography: Use font-family, font-size, font-weight, line-height values
|
||||
- Spacing: Use spacing scale for margins, padding, gaps
|
||||
- Borders: Use border-radius, border-width values
|
||||
- Shadows: Use box-shadow values
|
||||
- Breakpoints: Use breakpoint values for @media queries
|
||||
|
||||
{IF design_attributes:
|
||||
**Apply design_attributes to token selection:**
|
||||
- density='spacious' → Select larger spacing tokens
|
||||
- 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
|
||||
}
|
||||
|
||||
**CSS Structure**:
|
||||
- Complete styling: colors, typography, layout, spacing, effects
|
||||
- Responsive design: Mobile-first with breakpoint-based @media
|
||||
- Self-contained: No external dependencies or var() references
|
||||
|
||||
**5. Write Files IMMEDIATELY**
|
||||
- Output paths:
|
||||
- HTML: {base_path}/prototypes/{target}-style-{style_id}-layout-N.html
|
||||
- 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
|
||||
|
||||
## ✅ Success Criteria
|
||||
- [ ] Generated exactly {layout_variants × 2} files
|
||||
- [ ] All HTML includes correct CSS file reference (matching filename pattern)
|
||||
- [ ] All CSS uses design token values directly (self-contained, no var() references)
|
||||
- [ ] CSS fully embodies the style's design tokens (colors, typography, spacing, effects)
|
||||
- [ ] {IF design_attributes: 'HTML structure adapts to design_attributes' ELSE: 'HTML follows layout inspiration'}
|
||||
- [ ] Layouts are structurally distinct (different grids/regions, not just CSS tweaks)
|
||||
- [ ] Files written to filesystem (not returned as text)
|
||||
|
||||
## 📋 Completion
|
||||
Report: "✅ {target} × Style-{style_id} ({philosophy_name}): {layout_variants × 2} files created"
|
||||
"""
|
||||
|
||||
REPORT: "⏳ Phase 2: Waiting for {len(target_list) * style_variants} target-style agents to complete..."
|
||||
REPORT: " Expected total files: {style_variants × layout_variants × len(target_list) × 2}"
|
||||
# Write simple inspiration file
|
||||
Write({base_path}/prototypes/_inspirations/{target}-layout-ideas.txt, inspiration_content)
|
||||
```
|
||||
|
||||
### Phase 2.5: Verify Agent File Creation
|
||||
**Output**: `L` inspiration text files
|
||||
|
||||
## Phase 2: Target-Style-Centric Generation (Agent)
|
||||
|
||||
**Executor**: `Task(ui-design-agent)` × `T × S` tasks in parallel
|
||||
|
||||
### Step 1: Launch Agent Tasks
|
||||
```bash
|
||||
REPORT: "📝 Phase 2.5: Verifying target-style generation..."
|
||||
|
||||
total_expected = style_variants × layout_variants × len(target_list) × 2
|
||||
total_found = 0
|
||||
|
||||
FOR target IN target_list:
|
||||
FOR style_id IN range(1, style_variants + 1):
|
||||
agent_files_found = 0
|
||||
|
||||
FOR layout_id IN range(1, layout_variants + 1):
|
||||
html_file = f"{target}-style-{style_id}-layout-{layout_id}.html"
|
||||
css_file = f"{target}-style-{style_id}-layout-{layout_id}.css"
|
||||
|
||||
html_path = f"{base_path}/prototypes/{html_file}"
|
||||
css_path = f"{base_path}/prototypes/{css_file}"
|
||||
|
||||
# Verify files exist
|
||||
IF exists(html_path) AND exists(css_path):
|
||||
# Validate content
|
||||
html_content = Read(html_path)
|
||||
css_content = Read(css_path)
|
||||
|
||||
# Basic validation
|
||||
VALIDATE: "<!DOCTYPE html>" in html_content, f"Invalid HTML: {html_file}"
|
||||
VALIDATE: f'href="{css_file}"' in html_content, f"Missing or incorrect CSS reference in: {html_file}"
|
||||
VALIDATE: len(css_content) > 100, f"CSS file too small (likely incomplete): {css_file}"
|
||||
|
||||
html_size = get_file_size(html_path)
|
||||
css_size = get_file_size(css_path)
|
||||
|
||||
agent_files_found += 2
|
||||
total_found += 2
|
||||
|
||||
REPORT: f" ✓ {html_file} ({html_size} KB) + {css_file} ({css_size} KB)"
|
||||
ELSE:
|
||||
ERROR: f" ✗ Missing files: {target}-style-{style_id}-layout-{layout_id}.*"
|
||||
|
||||
REPORT: f" {target} × style-{style_id}: {agent_files_found}/{layout_variants * 2} files verified"
|
||||
|
||||
IF total_found == total_expected:
|
||||
REPORT: f"✅ Phase 2.5 complete: Verified all {total_expected} files"
|
||||
ELSE:
|
||||
ERROR: f"⚠️ Only {total_found}/{total_expected} files found - some agents may have failed"
|
||||
bash(mkdir -p {base_path}/prototypes)
|
||||
```
|
||||
|
||||
### Phase 3: Generate Preview Files
|
||||
For each `target × style_id`:
|
||||
```javascript
|
||||
Task(ui-design-agent): `
|
||||
[TARGET_STYLE_UI_GENERATION]
|
||||
🎯 ONE component: {target} × Style-{style_id} ({philosophy_name})
|
||||
Generate: {layout_variants} × 2 files (HTML + CSS per layout)
|
||||
|
||||
```bash
|
||||
REPORT: "🌐 Phase 3: Generating preview files..."
|
||||
TARGET: {target} | TYPE: {target_type} | STYLE: {style_id}/{style_variants}
|
||||
BASE_PATH: {base_path}
|
||||
${design_attributes ? "DESIGN_ATTRIBUTES: " + JSON.stringify(design_attributes) : ""}
|
||||
|
||||
prototypes_dir = f"{base_path}/prototypes"
|
||||
## 参考
|
||||
- Layout inspiration: Read("{base_path}/prototypes/_inspirations/{target}-layout-ideas.txt")
|
||||
- Design tokens: Read("{base_path}/style-consolidation/style-{style_id}/design-tokens.json")
|
||||
Parse ALL token values (colors, typography, spacing, borders, shadows, breakpoints)
|
||||
${design_attributes ? "- Adapt DOM structure to: density, visual_weight, formality, organic_vs_geometric" : ""}
|
||||
|
||||
# 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}")
|
||||
## 生成
|
||||
For EACH layout (1 to {layout_variants}):
|
||||
|
||||
# Verify preview files generated
|
||||
preview_files = [
|
||||
f"{base_path}/prototypes/compare.html",
|
||||
f"{base_path}/prototypes/index.html",
|
||||
f"{base_path}/prototypes/PREVIEW.md"
|
||||
]
|
||||
1. HTML: {base_path}/prototypes/{target}-style-{style_id}-layout-N.html
|
||||
- Complete HTML5: <!DOCTYPE>, <head>, <body>
|
||||
- CSS ref: <link href="{target}-style-{style_id}-layout-N.css">
|
||||
- Semantic: <header>, <nav>, <main>, <footer>
|
||||
- A11y: ARIA labels, landmarks, responsive meta
|
||||
${design_attributes ? `
|
||||
- DOM adaptation:
|
||||
* density='spacious' → flatter hierarchy
|
||||
* density='compact' → deeper nesting
|
||||
* visual_weight='heavy' → extra wrappers
|
||||
* visual_weight='minimal' → direct structure` : ""}
|
||||
|
||||
all_present = True
|
||||
FOR file_path IN preview_files:
|
||||
IF exists(file_path):
|
||||
REPORT: f" ✓ Generated: {basename(file_path)}"
|
||||
ELSE:
|
||||
WARN: f" ✗ Missing: {basename(file_path)}"
|
||||
all_present = False
|
||||
2. CSS: {base_path}/prototypes/{target}-style-{style_id}-layout-N.css
|
||||
- Self-contained: Direct token VALUES (no var())
|
||||
- Use tokens: colors, fonts, spacing, borders, shadows
|
||||
- Responsive: Mobile-first @media(breakpoints)
|
||||
${design_attributes ? `
|
||||
- Token selection:
|
||||
* density → spacing scale
|
||||
* visual_weight → shadow strength
|
||||
* organic_vs_geometric → border-radius` : ""}
|
||||
|
||||
IF all_present:
|
||||
REPORT: "✅ Phase 3 complete: All preview files generated"
|
||||
ELSE:
|
||||
WARN: "⚠️ Some preview files missing - script may need attention"
|
||||
## 注意
|
||||
- ✅ Use token VALUES directly from design-tokens.json
|
||||
- ❌ NO var() references, NO external dependencies
|
||||
- Layouts structurally DISTINCT (different grids/regions)
|
||||
- Write files IMMEDIATELY (per layout, no accumulation)
|
||||
- CSS filename MUST match HTML <link href="...">
|
||||
- No text output, write to filesystem only
|
||||
`
|
||||
```
|
||||
|
||||
### Phase 4: Completion
|
||||
### Step 2: Verify Generated Files
|
||||
```bash
|
||||
# Count expected vs found
|
||||
bash(ls {base_path}/prototypes/{target}-style-*-layout-*.html | wc -l)
|
||||
|
||||
# Validate samples
|
||||
Read({base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html)
|
||||
# Check: <!DOCTYPE html>, correct CSS href, sufficient CSS length
|
||||
```
|
||||
|
||||
**Output**: `S × L × T × 2` files verified
|
||||
|
||||
## Phase 3: Generate Preview Files
|
||||
|
||||
### Step 1: Run Preview Generation Script
|
||||
```bash
|
||||
bash(~/.claude/scripts/ui-generate-preview-v2.sh "{base_path}/prototypes")
|
||||
```
|
||||
|
||||
**Script generates**:
|
||||
- `compare.html` (interactive matrix)
|
||||
- `index.html` (navigation)
|
||||
- `PREVIEW.md` (instructions)
|
||||
|
||||
### Step 2: Verify Preview Files
|
||||
```bash
|
||||
bash(ls {base_path}/prototypes/compare.html {base_path}/prototypes/index.html {base_path}/prototypes/PREVIEW.md)
|
||||
```
|
||||
|
||||
**Output**: 3 preview files
|
||||
|
||||
## Completion
|
||||
|
||||
### Todo Update
|
||||
```javascript
|
||||
TodoWrite({todos: [
|
||||
{content: "Resolve paths and load design systems", status: "completed", activeForm: "Loading design systems"},
|
||||
{content: `Gather layout inspiration for ${target_list.length} targets`, status: "completed", activeForm: "Gathering inspiration"},
|
||||
{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: `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: "Setup and validation", status: "completed", activeForm: "Loading design systems"},
|
||||
{content: "Gather layout inspiration", status: "completed", activeForm: "Researching layouts"},
|
||||
{content: "Target-style generation (agent)", status: "completed", activeForm: "Generating prototypes"},
|
||||
{content: "Verify files", status: "completed", activeForm: "Validating output"},
|
||||
{content: "Generate previews", status: "completed", activeForm: "Creating preview files"}
|
||||
]});
|
||||
```
|
||||
|
||||
**Completion Message**:
|
||||
### Output Message
|
||||
```
|
||||
✅ Target-Style-Centric UI Generation Complete!
|
||||
|
||||
Architecture: Target-Style-Centric Batch Generation
|
||||
✅ Target-Style-Centric UI generation complete!
|
||||
|
||||
Configuration:
|
||||
- Style Variants: {style_variants}
|
||||
- Layout Variants: {layout_variants} (inspiration-based)
|
||||
- Target Type: {target_type_icon} {target_type}
|
||||
- Target Type: {target_type}
|
||||
- Targets: {target_list}
|
||||
- Total Prototypes: {style_variants * layout_variants * len(target_list)}
|
||||
- Total Prototypes: {S × L × T}
|
||||
|
||||
Agent Execution:
|
||||
✅ Target-style agents: T×S = {len(target_list)}×{style_variants} = {len(target_list) * style_variants} agents
|
||||
✅ Each agent handles: L = {layout_variants} layouts for one component
|
||||
✅ Component isolation: Tasks completely independent
|
||||
- Target-style agents: T×S = {T}×{S} = {T×S} agents
|
||||
- Each agent scope: {L} layouts for one component
|
||||
- Component isolation: Complete task independence
|
||||
|
||||
Design Quality:
|
||||
✅ Style-Aware Structure: {IF design_space_analysis: 'YES - HTML adapts to design_attributes' ELSE: 'Standard semantic structure'}
|
||||
✅ Focused generation: Each agent handles single target × single style
|
||||
✅ Self-Contained CSS: Direct design token usage (no var() dependencies)
|
||||
✅ Token Quality: {consolidated_count} consolidated, {proposed_count} proposed
|
||||
{IF proposed_count > 0:
|
||||
ℹ️ Fast-track mode active: {proposed_count} style(s) using proposed tokens
|
||||
💡 For production quality: /workflow:ui-design:consolidate --base-path "{base_path}" --variants {style_variants}
|
||||
}
|
||||
Quality:
|
||||
- Style-aware: {design_space_analysis ? 'HTML adapts to design_attributes' : 'Standard structure'}
|
||||
- CSS: Self-contained (direct token values, no var())
|
||||
- Tokens: {consolidated_count} consolidated, {proposed_count} proposed
|
||||
{IF proposed_count > 0: ' 💡 For production: /workflow:ui-design:consolidate'}
|
||||
|
||||
Output Files:
|
||||
- Layout Inspirations: {len(target_list)} simple text files
|
||||
- HTML Prototypes: {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
|
||||
|
||||
Generated Structure:
|
||||
📂 {base_path}/prototypes/
|
||||
├── _inspirations/
|
||||
│ └── {target}-layout-ideas.txt ({len(target_list)} inspiration files)
|
||||
├── {target}-style-{s}-layout-{l}.html ({style_variants * layout_variants * len(target_list)} prototypes)
|
||||
Generated Files:
|
||||
{base_path}/prototypes/
|
||||
├── _inspirations/ ({T} text files)
|
||||
├── {target}-style-{s}-layout-{l}.html ({S×L×T} prototypes)
|
||||
├── {target}-style-{s}-layout-{l}.css
|
||||
├── compare.html (interactive S×L×T matrix)
|
||||
├── index.html (quick navigation)
|
||||
└── PREVIEW.md (usage instructions)
|
||||
├── compare.html (interactive matrix)
|
||||
├── index.html (navigation)
|
||||
└── PREVIEW.md (instructions)
|
||||
|
||||
🌐 Interactive Preview:
|
||||
1. Matrix View: Open compare.html (recommended)
|
||||
2. Quick Index: Open index.html
|
||||
3. Instructions: See PREVIEW.md
|
||||
Preview:
|
||||
1. Open compare.html (recommended)
|
||||
2. Open index.html
|
||||
3. Read PREVIEW.md
|
||||
|
||||
{IF design_space_analysis:
|
||||
🎨 Style-Aware Generation Active:
|
||||
Each style's prototypes use structure adapted to design_attributes:
|
||||
- Density affects container nesting and whitespace
|
||||
- Visual weight affects wrapper layers and border structure
|
||||
- Same layout × same target × different style = DIFFERENT HTML trees!
|
||||
}
|
||||
Next: /workflow:ui-design:update
|
||||
```
|
||||
|
||||
Next: /workflow:ui-design:update {--session flag if applicable}
|
||||
## Simple Bash Commands
|
||||
|
||||
Note: When called from /workflow:ui-design:explore-auto, design-update is triggered automatically.
|
||||
### Path Operations
|
||||
```bash
|
||||
# Find design directory
|
||||
bash(find .workflow -type d -name "design-*" | head -1)
|
||||
|
||||
**Dynamic Values**: target_type_icon: "📄" for page, "🧩" for component
|
||||
# Count style variants
|
||||
bash(ls {base_path}/style-consolidation/style-* -d | wc -l)
|
||||
|
||||
# Check token sources
|
||||
bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "consolidated")
|
||||
bash(test -f {base_path}/style-extraction/style-cards.json && echo "proposed")
|
||||
```
|
||||
|
||||
### Validation Commands
|
||||
```bash
|
||||
# Check design tokens exist
|
||||
bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "valid")
|
||||
|
||||
# Count generated files
|
||||
bash(ls {base_path}/prototypes/{target}-style-*-layout-*.html | wc -l)
|
||||
|
||||
# Verify preview
|
||||
bash(test -f {base_path}/prototypes/compare.html && echo "exists")
|
||||
```
|
||||
|
||||
### File Operations
|
||||
```bash
|
||||
# Create directories
|
||||
bash(mkdir -p {base_path}/prototypes/_inspirations)
|
||||
|
||||
# Run preview script
|
||||
bash(~/.claude/scripts/ui-generate-preview-v2.sh "{base_path}/prototypes")
|
||||
```
|
||||
|
||||
## Output Structure
|
||||
|
||||
```
|
||||
{base_path}/prototypes/
|
||||
├── _inspirations/ # Layout inspiration only
|
||||
│ └── {target}-layout-ideas.txt # Simple inspiration text
|
||||
├── {target}-style-{s}-layout-{l}.html # Final prototypes (S×L×T)
|
||||
├── {target}-style-{s}-layout-{l}.css
|
||||
├── compare.html # Interactive matrix
|
||||
├── index.html # Navigation page
|
||||
└── PREVIEW.md # Instructions
|
||||
|
||||
{base_path}/style-consolidation/
|
||||
├── style-1/ (design-tokens.json, style-guide.md)
|
||||
├── style-2/ (same structure)
|
||||
└── style-{S}/ (same structure)
|
||||
{base_path}/
|
||||
├── prototypes/
|
||||
│ ├── _inspirations/
|
||||
│ │ └── {target}-layout-ideas.txt # Layout inspiration
|
||||
│ ├── {target}-style-{s}-layout-{l}.html # Final prototypes
|
||||
│ ├── {target}-style-{s}-layout-{l}.css
|
||||
│ ├── compare.html
|
||||
│ ├── index.html
|
||||
│ └── PREVIEW.md
|
||||
└── style-consolidation/
|
||||
└── style-{s}/
|
||||
├── design-tokens.json
|
||||
└── style-guide.md
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
|
||||
### Pre-execution Checks
|
||||
- **No design systems found**: Error - Run `/workflow:ui-design:consolidate` first
|
||||
- **Invalid target names**: Extract from synthesis-specification.md or error with validation message
|
||||
- **Missing design-space-analysis.json**: WARN only - generation continues with basic structure
|
||||
- **Unsupported target type**: Error if target_type not in ["page", "component"]
|
||||
### Common Errors
|
||||
```
|
||||
ERROR: No token sources found
|
||||
→ Run /workflow:ui-design:extract or /workflow:ui-design:consolidate
|
||||
|
||||
### Phase-Specific Errors
|
||||
- **Agent execution errors (Phase 2)**: Report details, identify which target × style agent failed
|
||||
- **Invalid design-tokens.json**: Check JSON format and structure
|
||||
- **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
|
||||
ERROR: MCP search failed
|
||||
→ Check network, retry
|
||||
|
||||
ERROR: Agent task failed
|
||||
→ Check agent output, retry specific target×style
|
||||
|
||||
ERROR: Script permission denied
|
||||
→ chmod +x ~/.claude/scripts/ui-generate-preview-v2.sh
|
||||
```
|
||||
|
||||
### Recovery Strategies
|
||||
- **Partial generation**: If some target-style agents succeed, you still have those prototypes
|
||||
- **Retry single combination**: Can re-run targeting failed target × style combination
|
||||
- **Missing design_attributes**: Generation works without them - just less style-aware
|
||||
- **Permission errors**: Run `chmod +x ~/.claude/scripts/ui-generate-preview-v2.sh`
|
||||
- **Partial success**: Keep successful target×style combinations
|
||||
- **Missing design_attributes**: Works without (less style-aware)
|
||||
- **Invalid tokens**: Validate design-tokens.json structure
|
||||
|
||||
## Quality Checklist
|
||||
|
||||
- [ ] CSS uses direct token values (no var())
|
||||
- [ ] HTML structure adapts to design_attributes (if available)
|
||||
- [ ] Semantic HTML5 structure
|
||||
- [ ] ARIA attributes present
|
||||
- [ ] Mobile-first responsive
|
||||
- [ ] Layouts structurally distinct
|
||||
- [ ] compare.html works
|
||||
|
||||
## Key Features
|
||||
|
||||
1. **🚀 Target-Style-Centric Batch Generation**
|
||||
Each agent handles L layouts for one target × one style with component isolation
|
||||
- **Target-Style-Centric**: `T×S` agents, each handles `L` layouts
|
||||
- **Component Isolation**: Complete task independence
|
||||
- **Style-Aware**: HTML adapts to design_attributes
|
||||
- **Self-Contained CSS**: Direct token values (no var())
|
||||
- **Inspiration-Based**: Simple text research vs complex JSON
|
||||
- **Production-Ready**: Semantic, accessible, responsive
|
||||
|
||||
2. **🎯 Component Isolation**
|
||||
Tasks completely independent, preventing cross-component interference
|
||||
## Integration
|
||||
|
||||
3. **🎨 Style-Aware Structure Adaptation**
|
||||
HTML DOM adapts based on design_attributes (density, visual_weight, organic_vs_geometric)
|
||||
|
||||
4. **⚡ Performance Optimized**
|
||||
Parallel execution of T×S agents with highly focused scope per agent
|
||||
|
||||
5. **💡 Simplified Layout Inspiration**
|
||||
Simple text-based research replaces complex JSON planning
|
||||
|
||||
6. **🔧 Focused Agent Scope**
|
||||
Each agent generates only L layouts, reducing complexity and improving quality
|
||||
|
||||
7. **🎯 Self-Contained CSS Generation**
|
||||
Agents read design-tokens.json and create independent CSS with direct token values (no var() references)
|
||||
|
||||
8. **🌐 Interactive Visualization**
|
||||
Full-featured compare.html with matrix grid
|
||||
|
||||
9. **✅ Production-Ready Output**
|
||||
Semantic HTML5, ARIA attributes, WCAG 2.2 compliant
|
||||
|
||||
## Integration Points
|
||||
|
||||
- **Input**: Per-style design-tokens.json; design-space-analysis.json (optional); targets + layout-variants
|
||||
- **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`
|
||||
- **Backward Compatibility**: Works without design-space-analysis.json
|
||||
**Input**: design-tokens.json, design-space-analysis.json (optional), targets
|
||||
**Output**: S×L×T prototypes for `/workflow:ui-design:update`
|
||||
**Called by**: `/workflow:ui-design:explore-auto-v2`, `/workflow:ui-design:imitate-auto`
|
||||
|
||||
Reference in New Issue
Block a user