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

refactor(ui-design): relocate MCP research from extract to consolidate agent

Browse Source 
**Extract Changes:**
- Remove Phase 1.5 MCP trend research (Exa queries)
- Save design-space-analysis.json with search keywords for consolidate
- Update to pure Claude-native analysis (aligns with philosophy)
- Simplify completion todos and output documentation

**Consolidate Changes:**
- Load design-space-analysis.json from extraction phase
- Add Step 1: Variant-Specific Trend Research (MCP) to agent prompt
- Agent performs 4 MCP queries per variant + shared accessibility research
- Refine tokens using trend insights while maintaining variant identity
- Update completion reporting and key features

**Generate Changes:**
- Enhance HTML placeholder documentation with critical warnings
- Add complete HTML template examples (page/component modes)
- Clarify {{STRUCTURAL_CSS}} and {{TOKEN_CSS}} placeholder rules
- Simplify agent completion requirements (remove detailed report format)
- Allow agent to self-report completion status

**Benefits:**
- Extract becomes truly Claude-native (no external tools)
- Consolidate agent handles all MCP research in one place
- Better separation of concerns between phases
- Clearer template generation instructions for agents
- More flexible agent reporting

🤖 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 09:41:49 +08:00
parent 29dfd49c90
commit f6292a6288
3 changed files with 769 additions and 1264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

494
.claude/commands/workflow/ui-design/consolidate.md
View File

@@ -8,10 +8,6 @@ parameters:
type: number type: number
default: all available variants from style-cards.json default: all available variants from style-cards.json
description: "Number of style variants to consolidate (1-N). Processes first N variants from style-cards.json. Creates style-N directories." description: "Number of style variants to consolidate (1-N). Processes first N variants from style-cards.json. Creates style-N directories."
- name: --layout-variants
type: number
default: 3
description: "Number of layout strategies to generate (1-5). Creates dynamic layout plans based on project context and modern trends."
- name: --session - name: --session
type: string type: string
description: "Workflow session ID (e.g., WFS-auth). Finds latest design run in session directory." description: "Workflow session ID (e.g., WFS-auth). Finds latest design run in session directory."
@@ -19,27 +15,26 @@ parameters:
type: string type: string
description: "Custom base path for input/output. Overrides --session if provided." description: "Custom base path for input/output. Overrides --session if provided."
examples: examples:
- /workflow:ui-design:consolidate --base-path ".workflow/WFS-auth/design-run-20250109-143022" --variants 3 --layout-variants 3 - /workflow:ui-design:consolidate --base-path ".workflow/WFS-auth/design-run-20250109-143022" --variants 3
- /workflow:ui-design:consolidate --session WFS-auth --variants 2 --layout-variants 2 - /workflow:ui-design:consolidate --session WFS-auth --variants 2
- /workflow:ui-design:consolidate --base-path "./.workflow/.design/run-20250109-150533" # Uses all variants, default 3 layouts - /workflow:ui-design:consolidate --base-path "./.workflow/.design/run-20250109-150533" # Uses all variants
- /workflow:ui-design:consolidate --session WFS-auth --layout-variants 2 # Process all variants from extraction - /workflow:ui-design:consolidate --session WFS-auth # Process all variants from extraction
allowed-tools: TodoWrite(*), Read(*), Write(*), Bash(*), Task(*) allowed-tools: TodoWrite(*), Read(*), Write(*), Bash(*), Task(*)
--- ---
# Design System Consolidation & Layout Planning Command # Design System Consolidation Command
## Overview ## Overview
Consolidate user-selected style variants into **independent production-ready design systems** AND plan layout strategies for UI generation. This command serves as the **Design Planning Phase**, producing all strategic decisions needed for the subsequent generation phase. Consolidate user-selected style variants into **independent production-ready design systems**. This command serves as the **Style Planning Phase**, focusing exclusively on design tokens and style guides for the subsequent generation phase.
## Core Philosophy ## Core Philosophy
- **Design Planning Hub**: Centralizes both style consolidation and layout strategy planning - **Style System Focus**: Exclusively handles design system consolidation
- **Agent-Driven**: Uses ui-design-agent for multi-file generation efficiency - **Agent-Driven**: Uses ui-design-agent for multi-file generation efficiency
- **Separate Design Systems**: Generates N independent design systems (one per variant) - **Separate Design Systems**: Generates N independent design systems (one per variant)
- **Token Refinement**: Refines `proposed_tokens` from each variant into complete systems - **Token Refinement**: Refines `proposed_tokens` from each variant into complete systems
- **Layout Strategy Definition**: Plans and documents layout variants for generation
- **Intelligent Synthesis**: Ensures completeness and consistency - **Intelligent Synthesis**: Ensures completeness and consistency
- **Production-Ready**: Complete design system(s) with documentation - **Production-Ready**: Complete design system(s) with documentation
- **Matrix-Ready**: Supports style × layout matrix exploration in generate phase - **Matrix-Ready**: Provides style variants for style × layout matrix exploration in generate phase
## Execution Protocol ## Execution Protocol
@@ -47,13 +42,9 @@ Consolidate user-selected style variants into **independent production-ready des
```bash ```bash
# Determine base path # Determine base path
IF --base-path provided: IF --base-path: base_path = {provided_base_path}
base_path = {provided_base_path} ELSE IF --session: base_path = find_latest_path_matching(".workflow/WFS-{session}/design-*")
ELSE IF --session provided: ELSE: base_path = find_latest_path_matching(".workflow/.design/*")
# Find latest design run in session
base_path = find_latest_path_matching(".workflow/WFS-{session}/design-*")
ELSE:
base_path = find_latest_path_matching(".workflow/.design/*")
# Verify extraction output exists # Verify extraction output exists
style_cards_path = "{base_path}/style-extraction/style-cards.json" style_cards_path = "{base_path}/style-extraction/style-cards.json"
@@ -68,7 +59,7 @@ total_variants = len(style_cards.style_cards)
```bash ```bash
# Determine how many variants to consolidate # Determine how many variants to consolidate
IF --variants provided: IF --variants:
variants_count = {provided_count} variants_count = {provided_count}
VALIDATE: 1 <= variants_count <= total_variants VALIDATE: 1 <= variants_count <= total_variants
ELSE: ELSE:
@@ -81,113 +72,24 @@ VERIFY: selected_variants.length > 0
REPORT: "📦 Generating {variants_count} independent design systems" REPORT: "📦 Generating {variants_count} independent design systems"
``` ```
### Phase 2.5: Layout Strategy Planning (Dynamic Generation)
```bash
# Determine layout variants count
IF --layout-variants provided:
layout_variants = {provided_count}
VALIDATE: 1 <= layout_variants <= 5
ELSE:
layout_variants = 3 # Default to 3 layout strategies
REPORT: "📐 Planning {layout_variants} layout strategies (dynamic generation)"
# Step 1: Gather project context for layout planning
project_context = ""
IF exists({base_path}/.brainstorming/synthesis-specification.md):
project_context = Read({base_path}/.brainstorming/synthesis-specification.md)
ELSE IF exists({base_path}/.brainstorming/ui-designer/analysis.md):
project_context = Read({base_path}/.brainstorming/ui-designer/analysis.md)
# Extract project type and requirements from context
project_hints = extract_project_type(project_context) # e.g., "dashboard", "marketing site", "SaaS platform"
# Step 2: Search for current UI/UX layout trends using Exa MCP
REPORT: "🔍 Searching for modern UI layout patterns..."
exa_query = "modern web UI layout patterns design systems {project_hints} 2024 2025"
layout_trends = mcp__exa__get_code_context_exa(
query=exa_query,
tokensNum="dynamic"
)
# Step 3: Generate layout strategies dynamically with Claude
REPORT: "🎨 Generating {layout_variants} custom layout strategies..."
layout_synthesis_prompt = """
Generate EXACTLY {layout_variants} distinct, modern UI layout strategies for this project.
PROJECT CONTEXT:
{project_context}
CURRENT LAYOUT TRENDS (from web research):
{layout_trends}
REQUIREMENTS:
1. Generate EXACTLY {layout_variants} unique layout strategies (not more, not less)
2. Each layout must be unique and serve different use cases
3. Consider modern design trends from 2024-2025
4. Align with project type: {project_hints}
5. Balance innovation with usability
6. Cover diverse layout paradigms (grid-based, asymmetric, minimal, single-column, sidebar-based, etc.)
OUTPUT FORMAT (JSON):
You MUST generate {layout_variants} strategy objects in the "strategies" array.
Example for layout_variants=3:
{
"layout_variants_count": 3,
"strategies": [
{
"id": "layout-1",
"name": "Grid Dashboard",
"description": "Traditional grid-based layout with sidebar navigation. Clear visual hierarchy with card-based content areas. Ideal for data-heavy dashboards."
},
{
"id": "layout-2",
"name": "Asymmetric Flow",
"description": "Dynamic asymmetric layout with floating content blocks. Natural reading flow with varied content widths. Perfect for content-focused applications."
},
{
"id": "layout-3",
"name": "Minimal Centered",
"description": "Clean centered layout with generous whitespace. Single-column focus with subtle hierarchy. Best for documentation or blog-style interfaces."
}
]
}
IMPORTANT:
- The "strategies" array MUST contain EXACTLY {layout_variants} objects
- Each strategy must have sequential IDs: "layout-1", "layout-2", ..., "layout-{layout_variants}"
- Each strategy name must be concise (max 3 words)
- Each description must be detailed (2-3 sentences covering structure, hierarchy, use cases)
RESPONSE FORMAT:
Provide ONLY the JSON object, no additional text before or after.
===== layout-strategies.json =====
{JSON content}
"""
# Execute synthesis
claude_response = synthesize_with_claude(layout_synthesis_prompt)
layout_strategies = parse_json_response(claude_response)
# Step 4: Write layout strategies to file
Write({base_path}/style-consolidation/layout-strategies.json, JSON.stringify(layout_strategies, null, 2))
REPORT: "✅ Layout strategies defined: {[s.name for s in layout_strategies.strategies]}"
```
### Phase 3: Load Design Context (Optional) ### Phase 3: Load Design Context (Optional)
```bash ```bash
# Load brainstorming context if available # Load brainstorming context if available
design_context = "" design_context = ""
IF exists({base_path}/.brainstorming/synthesis-specification.md): IF exists({base_path}/.brainstorming/synthesis-specification.md):
design_context = Read({base_path}/.brainstorming/synthesis-specification.md) design_context = Read(synthesis-specification.md)
ELSE IF exists({base_path}/.brainstorming/ui-designer/analysis.md): ELSE IF exists({base_path}/.brainstorming/ui-designer/analysis.md):
design_context = Read({base_path}/.brainstorming/ui-designer/analysis.md) design_context = Read(ui-designer/analysis.md)
# Load design space analysis from extraction phase
design_space_analysis = {}
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 {len(design_space_analysis.divergent_directions)} variant directions"
ELSE:
REPORT: "⚠️ No design space analysis found - trend research will be skipped"
``` ```
### Phase 4: Design System Synthesis (Agent Execution) ### Phase 4: Design System Synthesis (Agent Execution)
@@ -195,63 +97,128 @@ ELSE IF exists({base_path}/.brainstorming/ui-designer/analysis.md):
```bash ```bash
REPORT: "🤖 Using agent for separate design system generation..." REPORT: "🤖 Using agent for separate design system generation..."
# Create output directories
Bash(mkdir -p "{base_path}/style-consolidation/style-{{1..{variants_count}}}")
# Prepare agent task prompt # Prepare agent task prompt
agent_task_prompt = """ agent_task_prompt = """
Generate {variants_count} independent production-ready design systems, one for each style variant. Generate {variants_count} independent production-ready design systems with external trend research and WRITE them to the file system.
## Context
SESSION: {session_id} SESSION: {session_id}
MODE: Separate design system generation MODE: Separate design system generation with MCP trend research
BASE_PATH: {base_path}
VARIANTS TO PROCESS: {variants_count} VARIANTS TO PROCESS: {variants_count}
VARIANT DATA: ## Variant Data
{FOR each variant IN selected_variants: {FOR each variant IN selected_variants:
--- ---
Variant ID: {variant.id} Variant ID: {variant.id} | Name: {variant.name}
Name: {variant.name}
Description: {variant.description} Description: {variant.description}
Design Philosophy: {variant.design_philosophy} Design Philosophy: {variant.design_philosophy}
Proposed Tokens: {JSON.stringify(variant.proposed_tokens, null, 2)}
Proposed Tokens:
{JSON.stringify(variant.proposed_tokens, null, 2)}
--- ---
} }
{IF design_context: {IF design_context: DESIGN CONTEXT (from brainstorming): {design_context}}
DESIGN CONTEXT (from brainstorming):
{design_context} {IF design_space_analysis:
## Design Space Analysis (for MCP Research)
{JSON.stringify(design_space_analysis, null, 2)}
Note: Each variant has search_keywords and anti_keywords for trend research.
} }
TASK: For EACH variant, generate a complete, production-ready design system. ## Task
For EACH variant (1 to {variants_count}):
1. **Perform Variant-Specific Trend Research** (if design space analysis available)
2. **Refine design tokens** using research insights
3. **Generate and WRITE 2 files** to the file system
REFINEMENT RULES (apply to each variant): ## Step 1: Variant-Specific Trend Research (MCP)
1. **Complete Token Coverage**: Ensure all categories are present (colors, typography, spacing, etc.)
2. **Fill Gaps**: If any tokens are missing, generate appropriate values based on the variant's philosophy
3. **Maintain Style Identity**: Preserve the unique characteristics of this variant
4. **Semantic Naming**: Use clear, semantic names (e.g., "brand-primary" not "color-1")
5. **Accessibility**: Validate WCAG AA contrast ratios (4.5:1 text, 3:1 UI)
6. **OKLCH Format**: All colors must use oklch(L C H / A) format
7. **Design Philosophy**: Expand and articulate the variant's design philosophy
OUTPUT STRUCTURE: For each variant {variant_id} (1 to {variants_count}), generate 2 files: IF design_space_analysis is provided, FOR EACH variant:
FILE 1: style-{variant_id}/design-tokens.json 1. **Extract Research Parameters** from design space analysis:
- philosophy_name: The variant's design philosophy
- search_keywords: Keywords for trend research
- anti_keywords: Patterns to avoid
2. **Build Variant-Specific Queries**:
```javascript
queries = [
`{philosophy_name} UI design color palettes {search_keywords[:3]} 2024 2025`,
`{philosophy_name} typography trends {search_keywords[:3]} web design 2024`,
`{philosophy_name} layout patterns {search_keywords[:3]} design systems 2024`,
`design systems {philosophy_name} NOT {anti_keywords[:2]}`
]
```
3. **Execute MCP Searches**:
```javascript
trend_research = {
colors: mcp__exa__get_code_context_exa(query=queries[0], tokensNum=2000),
typography: mcp__exa__get_code_context_exa(query=queries[1], tokensNum=2000),
layout: mcp__exa__get_code_context_exa(query=queries[2], tokensNum=2000),
contrast: mcp__exa__get_code_context_exa(query=queries[3], tokensNum=2000)
}
```
4. **Shared Accessibility Research** (execute once, apply to all variants):
```javascript
accessibility_guidelines = mcp__exa__get_code_context_exa(
query="WCAG 2.2 accessibility color contrast ARIA best practices 2024",
tokensNum=1500
)
```
5. **Use Research Results** to inform token refinement:
- Color token refinement guided by `trend_research.colors`
- Typography refinement guided by `trend_research.typography`
- Layout spacing informed by `trend_research.layout`
- Contrast validation using `trend_research.contrast` and `accessibility_guidelines`
IF design_space_analysis is NOT provided:
- Skip trend research
- Refine tokens based solely on variant's existing philosophy and proposed tokens
## Step 2: Refinement Rules (apply to each variant)
1. **Complete Token Coverage**: Ensure all categories present (colors, typography, spacing, etc.)
2. **Fill Gaps**: Generate missing tokens based on variant's philosophy and trend research
3. **Maintain Style Identity**: Preserve unique characteristics from proposed tokens
4. **Semantic Naming**: Use clear names (e.g., "brand-primary" not "color-1")
5. **Accessibility**: Validate WCAG AA contrast using accessibility guidelines (4.5:1 text, 3:1 UI)
6. **OKLCH Format**: All colors use oklch(L C H / A) format
7. **Design Philosophy**: Expand variant's design philosophy using trend insights
8. **Trend Integration**: Incorporate modern trends from MCP research while maintaining variant identity
## Step 3: File Write Instructions
For EACH variant {variant_id} (1 to {variants_count}), WRITE these 2 files:
### File 1: Design Tokens
**Path**: {base_path}/style-consolidation/style-{variant_id}/design-tokens.json
**Content**: Complete design token JSON with structure:
```json
{ {
"colors": { "colors": {
"brand": { "primary": "oklch(...)", "secondary": "oklch(...)", "accent": "oklch(...)" }, "brand": {"primary": "oklch(...)", "secondary": "oklch(...)", "accent": "oklch(...)"},
"surface": { "background": "oklch(...)", "elevated": "oklch(...)", "overlay": "oklch(...)" }, "surface": {"background": "oklch(...)", "elevated": "oklch(...)", "overlay": "oklch(...)"},
"semantic": { "success": "oklch(...)", "warning": "oklch(...)", "error": "oklch(...)", "info": "oklch(...)" }, "semantic": {"success": "oklch(...)", "warning": "oklch(...)", "error": "oklch(...)", "info": "oklch(...)"},
"text": { "primary": "oklch(...)", "secondary": "oklch(...)", "tertiary": "oklch(...)", "inverse": "oklch(...)" }, "text": {"primary": "oklch(...)", "secondary": "oklch(...)", "tertiary": "oklch(...)", "inverse": "oklch(...)"},
"border": { "default": "oklch(...)", "strong": "oklch(...)", "subtle": "oklch(...)" } "border": {"default": "oklch(...)", "strong": "oklch(...)", "subtle": "oklch(...)"}
}, },
"typography": { "font_family": {...}, "font_size": {...}, "font_weight": {...}, "line_height": {...}, "letter_spacing": {...} }, "typography": {"font_family": {...}, "font_size": {...}, "font_weight": {...}, "line_height": {...}, "letter_spacing": {...}},
"spacing": { "0": "0", "1": "0.25rem", ..., "24": "6rem" }, "spacing": {"0": "0", "1": "0.25rem", ..., "24": "6rem"},
"border_radius": { "none": "0", "sm": "0.25rem", ..., "full": "9999px" }, "border_radius": {"none": "0", "sm": "0.25rem", ..., "full": "9999px"},
"shadows": { "sm": "...", "md": "...", "lg": "...", "xl": "..." }, "shadows": {"sm": "...", "md": "...", "lg": "...", "xl": "..."},
"breakpoints": { "sm": "640px", ..., "2xl": "1536px" } "breakpoints": {"sm": "640px", ..., "2xl": "1536px"}
} }
```
FILE 2: style-{variant_id}/style-guide.md ### File 2: Style Guide
**Path**: {base_path}/style-consolidation/style-{variant_id}/style-guide.md
**Content**: Markdown documentation with structure:
```markdown
# Design System Style Guide - {variant.name} # Design System Style Guide - {variant.name}
## Design Philosophy ## Design Philosophy
@@ -272,112 +239,124 @@ FILE 2: style-{variant_id}/style-guide.md
- All text meets WCAG AA (4.5:1 minimum) - All text meets WCAG AA (4.5:1 minimum)
- UI components meet WCAG AA (3:1 minimum) - UI components meet WCAG AA (3:1 minimum)
- Focus indicators are clearly visible - Focus indicators are clearly visible
```
RESPONSE FORMAT: ## Write Operation Instructions
For each variant, provide clearly labeled sections: - Use Write() tool for each file with the absolute paths provided above
- Verify each write operation succeeds
- Report completion with file paths and sizes
- DO NOT return file contents as text
===== style-1/design-tokens.json ===== ## Example Write Operations
{JSON content} ```javascript
// For variant 1
Write("{base_path}/style-consolidation/style-1/design-tokens.json", JSON.stringify(tokens, null, 2))
Write("{base_path}/style-consolidation/style-1/style-guide.md", guide_content)
===== style-1/style-guide.md ===== // For variant 2
{Markdown content} Write("{base_path}/style-consolidation/style-2/design-tokens.json", JSON.stringify(tokens, null, 2))
Write("{base_path}/style-consolidation/style-2/style-guide.md", guide_content)
```
===== style-2/design-tokens.json ===== ## Expected Final Report
{JSON content} Report which files were written and their sizes:
```
✅ Written: {base_path}/style-consolidation/style-1/design-tokens.json (12.5 KB)
✅ Written: {base_path}/style-consolidation/style-1/style-guide.md (8.3 KB)
✅ Written: {base_path}/style-consolidation/style-2/design-tokens.json (11.8 KB)
✅ Written: {base_path}/style-consolidation/style-2/style-guide.md (7.9 KB)
... (for all {variants_count} variants)
```
===== style-2/style-guide.md ===== ## Critical Requirements
{Markdown content}
... (repeat for all {variants_count} variants)
IMPORTANT:
- Generate files for ALL {variants_count} variants - Generate files for ALL {variants_count} variants
- Use sequential IDs: style-1, style-2, ..., style-{variants_count} - Use sequential IDs: style-1, style-2, ..., style-{variants_count}
- Each variant must be complete and independent - Each variant must be complete and independent
- Maintain consistent structure across all variants - Maintain consistent structure across all variants
- Write files directly using Write() tool - do NOT return contents as text
""" """
# Execute agent task # Execute agent task
Task( Task(subagent_type="ui-design-agent", description="Generate {variants_count} separate design systems", prompt=agent_task_prompt)
subagent_type="ui-design-agent",
description="Generate {variants_count} separate design systems",
prompt=agent_task_prompt
)
REPORT: "✅ Agent task dispatched for {variants_count} design systems" REPORT: "✅ Agent task dispatched for {variants_count} design systems"
``` ```
### Phase 5: Process Agent Results and Generate Report ### Phase 5: Verify Agent File Creation
```bash ```bash
REPORT: "📝 Processing agent output for {variants_count} design systems..." REPORT: "📝 Verifying agent file creation for {variants_count} design systems..."
# Parse agent's response - agent returns all files in labeled sections # Verify each variant's files were created by agent
agent_output = get_agent_response()
# Extract and write files for each variant
FOR variant_id IN range(1, variants_count + 1): FOR variant_id IN range(1, variants_count + 1):
CREATE: {base_path}/style-consolidation/style-{variant_id}/ tokens_path = "{base_path}/style-consolidation/style-{variant_id}/design-tokens.json"
guide_path = "{base_path}/style-consolidation/style-{variant_id}/style-guide.md"
# Extract design tokens # Verify files exist
design_tokens_section = extract_section(agent_output, f"===== style-{variant_id}/design-tokens.json =====") VERIFY: exists(tokens_path), "Design tokens not created by agent for style-{variant_id}"
design_tokens = parse_json(design_tokens_section) VERIFY: exists(guide_path), "Style guide not created by agent for style-{variant_id}"
Write({base_path}/style-consolidation/style-{variant_id}/design-tokens.json, JSON.stringify(design_tokens, null, 2))
# Extract style guide # Optional: Validate JSON structure
style_guide_section = extract_section(agent_output, f"===== style-{variant_id}/style-guide.md =====") TRY:
Write({base_path}/style-consolidation/style-{variant_id}/style-guide.md, style_guide_section) tokens = Read(tokens_path)
tokens_json = parse_json(tokens)
VALIDATE: tokens_json.colors exists, "Missing colors in design-tokens.json"
VALIDATE: tokens_json.typography exists, "Missing typography in design-tokens.json"
VALIDATE: tokens_json.spacing exists, "Missing spacing in design-tokens.json"
REPORT: " ✅ style-{variant_id}/ written" tokens_size = get_file_size(tokens_path)
guide_size = get_file_size(guide_path)
REPORT: " ✅ style-{variant_id}/ verified ({tokens_size} KB tokens, {guide_size} KB guide)"
CATCH error:
ERROR: "Validation failed for style-{variant_id}: {error}"
REPORT: " ⚠️ Files exist but validation failed - review agent output"
REPORT: "✅ All {variants_count} design systems verified"
``` ```
**Output Structure**: **Output Structure**:
``` ```
{base_path}/style-consolidation/ {base_path}/style-consolidation/
├── style-1/ ├── style-1/ (design-tokens.json, style-guide.md)
│ ├── design-tokens.json # Style 1 tokens ├── style-2/ (same structure)
│ └── style-guide.md # Style 1 docs └── style-N/ (same structure)
├── style-2/
│ └── ... (same structure)
├── style-N/
│ └── ... (same structure)
└── layout-strategies.json # Layout variant definitions
``` ```
### Phase 6: Completion & Reporting ### Phase 6: Completion & Reporting
```javascript ```javascript
TodoWrite({ TodoWrite({todos: [
todos: [ {content: "Load session and style cards", status: "completed", activeForm: "Loading style cards"},
{content: "Load session and style cards", status: "completed", activeForm: "Loading style cards"}, {content: "Select variants for consolidation", status: "completed", activeForm: "Selecting variants"},
{content: "Select variants for consolidation", status: "completed", activeForm: "Selecting variants"}, {content: "Load design context and space analysis", status: "completed", activeForm: "Loading context"},
{content: "Plan layout strategies", status: "completed", activeForm: "Planning layout strategies"}, {content: "Perform variant-specific trend research", status: "completed", activeForm: "Researching design trends"},
{content: "Load design context from brainstorming", status: "completed", activeForm: "Loading context"}, {content: "Generate design systems via agent", status: "completed", activeForm: "Generating design systems"},
{content: "Generate design systems via agent", status: "completed", activeForm: "Generating design systems"}, {content: "Process agent results and write files", status: "completed", activeForm: "Writing output files"}
{content: "Process agent results and write files", status: "completed", activeForm: "Writing output files"} ]});
]
});
``` ```
**Completion Message**: **Completion Message**:
``` ```
✅ Design consolidation & layout planning complete for session: {session_id} ✅ Design system consolidation complete for session: {session_id}
{IF design_space_analysis:
🔍 Trend Research Performed:
- {variants_count} × 4 variant-specific MCP queries ({variants_count * 4} total)
- 1 shared accessibility research query
- Each variant refined with independent trend guidance
}
Generated {variants_count} independent design systems: Generated {variants_count} independent design systems:
{FOR each variant: - {variant.name} ({variant.id})} {FOR each variant: - {variant.name} ({variant.id})}
Layout Strategies Planned: {layout_variants}
{FOR each strategy: - Layout {strategy.id}: {strategy.name}}
📂 Output: {base_path}/style-consolidation/ 📂 Output: {base_path}/style-consolidation/
├── style-1/ (design-tokens.json, style-guide.md) ├── style-1/ (design-tokens.json, style-guide.md)
├── style-2/ (same structure) ├── style-2/ (same structure)
├── style-{variants_count}/ (same structure) └── style-{variants_count}/ (same structure)
└── layout-strategies.json
Next: /workflow:ui-design:generate --session {session_id} --style-variants {variants_count} --layout-variants {layout_variants} --pages "dashboard,auth" Next: /workflow:ui-design:generate --session {session_id} --style-variants {variants_count} --targets "dashboard,auth" --layout-variants N
Note: When called from /workflow:ui-design:auto, UI generation is triggered automatically. Note: When called from /workflow:ui-design:explore-auto, UI generation is triggered automatically.
The generate command will read layout strategies from layout-strategies.json. Layout planning is now handled in the generate phase for each specific target.
``` ```
## design-tokens.json Format ## design-tokens.json Format
@@ -387,23 +366,23 @@ The generate command will read layout strategies from layout-strategies.json.
```json ```json
{ {
"colors": { "colors": {
"brand": { "primary": "oklch(...)", "secondary": "oklch(...)", "accent": "oklch(...)" }, "brand": {"primary": "oklch(...)", "secondary": "oklch(...)", "accent": "oklch(...)"},
"surface": { "background": "oklch(...)", "elevated": "oklch(...)", "overlay": "oklch(...)" }, "surface": {"background": "oklch(...)", "elevated": "oklch(...)", "overlay": "oklch(...)"},
"semantic": { "success": "oklch(...)", "warning": "oklch(...)", "error": "oklch(...)", "info": "oklch(...)" }, "semantic": {"success": "oklch(...)", "warning": "oklch(...)", "error": "oklch(...)", "info": "oklch(...)"},
"text": { "primary": "oklch(...)", "secondary": "oklch(...)", "tertiary": "oklch(...)", "inverse": "oklch(...)" }, "text": {"primary": "oklch(...)", "secondary": "oklch(...)", "tertiary": "oklch(...)", "inverse": "oklch(...)"},
"border": { "default": "oklch(...)", "strong": "oklch(...)", "subtle": "oklch(...)" } "border": {"default": "oklch(...)", "strong": "oklch(...)", "subtle": "oklch(...)"}
}, },
"typography": { "typography": {
"font_family": { "heading": "...", "body": "...", "mono": "..." }, "font_family": {"heading": "...", "body": "...", "mono": "..."},
"font_size": { "xs": "...", "sm": "...", "base": "...", "lg": "...", "xl": "...", "2xl": "...", "3xl": "...", "4xl": "..." }, "font_size": {"xs": "...", "sm": "...", "base": "...", "lg": "...", "xl": "...", "2xl": "...", "3xl": "...", "4xl": "..."},
"font_weight": { "normal": "400", "medium": "500", "semibold": "600", "bold": "700" }, "font_weight": {"normal": "400", "medium": "500", "semibold": "600", "bold": "700"},
"line_height": { "tight": "1.25", "normal": "1.5", "relaxed": "1.75" }, "line_height": {"tight": "1.25", "normal": "1.5", "relaxed": "1.75"},
"letter_spacing": { "tight": "-0.025em", "normal": "0", "wide": "0.025em" } "letter_spacing": {"tight": "-0.025em", "normal": "0", "wide": "0.025em"}
}, },
"spacing": { "0": "0", "1": "0.25rem", ..., "24": "6rem" }, "spacing": {"0": "0", "1": "0.25rem", ..., "24": "6rem"},
"border_radius": { "none": "0", "sm": "0.25rem", ..., "full": "9999px" }, "border_radius": {"none": "0", "sm": "0.25rem", ..., "full": "9999px"},
"shadows": { "sm": "...", "md": "...", "lg": "...", "xl": "..." }, "shadows": {"sm": "...", "md": "...", "lg": "...", "xl": "..."},
"breakpoints": { "sm": "640px", "md": "768px", "lg": "1024px", "xl": "1280px", "2xl": "1536px" } "breakpoints": {"sm": "640px", "md": "768px", "lg": "1024px", "xl": "1280px", "2xl": "1536px"}
} }
``` ```
@@ -419,53 +398,22 @@ The generate command will read layout strategies from layout-strategies.json.
## Key Features ## Key Features
1. **Agent-Driven Architecture** 1. **Variant-Specific Trend Research** 🆕 - Agent performs independent MCP queries for each variant (4 queries per variant); Uses design space analysis keywords from extraction phase; Each variant researches its specific design philosophy; Shared accessibility research applied to all variants; Eliminates convergence by maintaining variant-specific research
- Uses ui-design-agent for multi-file generation efficiency 2. **Agent-Driven Architecture** - Uses ui-design-agent for multi-file generation and MCP research; Parallel generation of N independent design systems with external trend integration; Structured output parsing with labeled sections; Agent handles both research and synthesis
- Parallel generation of N independent design systems 3. **Separate Design Systems (Matrix-Ready)** - Generates N independent design systems (one per variant); Each variant maintains unique style identity enhanced by trend research; Provides style foundation for style × layout matrix exploration in generate phase
- Structured output parsing with labeled sections 4. **Token Refinement with Trend Integration** 🆕 - Reads `proposed_tokens` from style cards; Loads design space analysis for research parameters; Agent performs MCP trend research per variant; Refines tokens using research insights while maintaining style identity
5. **Complete Design System Output** - design-tokens.json (CSS tokens per variant); style-guide.md (documentation per variant with trend insights)
2. **Separate Design Systems (Matrix-Ready)** 6. **Production-Ready Quality** - WCAG AA accessibility validation with MCP research; OKLCH color format for perceptual uniformity; Semantic token naming; Complete token coverage; Modern trends integration
- Generates N independent design systems (one per variant) 7. **Streamlined Workflow** - Sequential phases with clear responsibilities; Agent handles MCP research, token refinement, and file generation; Reproducible with deterministic structure; Context-aware (integrates brainstorming and design space analysis)
- Each variant maintains unique style identity 8. **Clear Separation of Concerns** - Consolidation focuses on style systems with trend research; Extraction focuses on Claude-native analysis; Layout planning delegated to generate phase for target-specific optimization
- Enables style × layout matrix exploration in generate phase
3. **Dynamic Layout Strategy Generation** 🆕
- Uses Exa MCP to research current UI/UX layout trends (2024-2025)
- Generates layout strategies based on project context and modern patterns
- Adapts to project type (dashboard, marketing, SaaS, etc.)
- Balances innovation with usability
4. **Token Refinement**
- Reads `proposed_tokens` from style cards directly
- Agent refines each variant into complete design system
- Fills gaps while maintaining style identity
5. **Complete Design System Output**
- design-tokens.json (CSS tokens per variant)
- style-guide.md (documentation per variant)
- layout-strategies.json (dynamic layout plans)
6. **Production-Ready Quality**
- WCAG AA accessibility validation
- OKLCH color format for perceptual uniformity
- Semantic token naming
- Complete token coverage
7. **Streamlined Workflow**
- Sequential phases with clear responsibilities
- Agent handles complex multi-file generation
- Reproducible with deterministic structure
- Context-aware (integrates brainstorming artifacts)
## Integration Points ## Integration Points
- **Input**: - **Input**:
- `style-cards.json` from `/workflow:ui-design:extract` (with `proposed_tokens`) - `style-cards.json` from `/workflow:ui-design:extract` (with `proposed_tokens`)
- `design-space-analysis.json` from extraction phase (with search keywords for MCP research)
- `--variants` parameter (default: all variants) - `--variants` parameter (default: all variants)
- `--layout-variants` parameter (default: 3) - **Output**: Style Systems: `style-consolidation/style-{n}/design-tokens.json` and `style-guide.md` for each variant (enhanced with trend research)
- **Output**:
- Style Systems: `style-consolidation/style-{n}/design-tokens.json` for matrix mode generation
- Layout Planning: `layout-strategies.json` consumed by `/workflow:ui-design:generate`
- **Context**: Optional `synthesis-specification.md` or `ui-designer/analysis.md` - **Context**: Optional `synthesis-specification.md` or `ui-designer/analysis.md`
- **Auto Integration**: Automatically triggered by `/workflow:ui-design:auto` workflow - **Auto Integration**: Automatically triggered by `/workflow:ui-design:explore-auto` workflow
- **Next Command**: `/workflow:ui-design:generate --style-variants N --layout-variants M` reads design tokens and layout strategies - **Next Command**: `/workflow:ui-design:generate --style-variants N --targets "..." --layout-variants M` performs target-specific layout planning

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

@@ -47,39 +47,25 @@ Extract design style elements from reference images or text prompts using Claude
```bash ```bash
# Detect input source # Detect input source
IF --images AND --prompt: IF --images AND --prompt: input_mode = "hybrid" # Text guides image analysis
input_mode = "hybrid" # Text guides image analysis ELSE IF --images: input_mode = "image"
ELSE IF --images: ELSE IF --prompt: input_mode = "text"
input_mode = "image" ELSE: ERROR: "Must provide --images or --prompt"
ELSE IF --prompt:
input_mode = "text"
ELSE:
ERROR: "Must provide --images or --prompt"
# Determine base path (PRIORITY: --base-path > --session > standalone) # Determine base path (PRIORITY: --base-path > --session > standalone)
IF --base-path provided: IF --base-path:
base_path = {provided_base_path} base_path = {provided_base_path}; session_mode = "integrated"
session_mode = "integrated" # Assume integrated if path is passed session_id = base_path matches ".workflow/WFS-*/design-*" ? extract_session_id(base_path) : "standalone"
# Extract session_id if possible from path pattern
IF base_path matches ".workflow/WFS-*/design-*":
session_id = extract_from_path(base_path, pattern="WFS-([^/]+)")
ELSE:
session_id = "standalone"
ELSE: ELSE:
# Generate a new run_id and base_path only if not provided
run_id = "run-" + timestamp() run_id = "run-" + timestamp()
IF --session: IF --session:
session_mode = "integrated" session_mode = "integrated"; session_id = {provided_session}
session_id = {provided_session}
base_path = ".workflow/WFS-{session_id}/design-{run_id}/" base_path = ".workflow/WFS-{session_id}/design-{run_id}/"
ELSE: ELSE:
session_mode = "standalone" session_mode = "standalone"; base_path = ".workflow/.design/{run_id}/"
base_path = ".workflow/.design/{run_id}/"
# Set variant count # Set variant count
variants_count = --variants provided ? {count} : 1 variants_count = --variants OR 1; VALIDATE: 1 <= variants_count <= 5
VALIDATE: 1 <= variants_count <= 5
``` ```
### Phase 1: Input Loading & Validation ### Phase 1: Input Loading & Validation
@@ -87,50 +73,37 @@ VALIDATE: 1 <= variants_count <= 5
```bash ```bash
# Expand and validate inputs # Expand and validate inputs
IF input_mode IN ["image", "hybrid"]: IF input_mode IN ["image", "hybrid"]:
expanded_images = Glob({--images pattern}) expanded_images = Glob({--images pattern}); VERIFY: expanded_images.length > 0
VERIFY: expanded_images.length > 0 FOR each image: image_data[i] = Read({image_path})
FOR each image IN expanded_images:
image_data[i] = Read({image_path}) # Load for analysis
IF input_mode IN ["text", "hybrid"]: IF input_mode IN ["text", "hybrid"]:
VALIDATE: --prompt is non-empty string VALIDATE: --prompt is non-empty; prompt_guidance = {--prompt value}
prompt_guidance = {--prompt value}
# Create output directory
CREATE: {base_path}/style-extraction/ CREATE: {base_path}/style-extraction/
``` ```
### Phase 0.5: AI-Driven Design Space Divergence ### Phase 0.5: AI-Driven Design Space Divergence
```bash ```bash
# Step 1: Load project context to inform design space analysis # Step 1: Load project context
project_context = "" project_context = ""
IF exists({base_path}/.brainstorming/synthesis-specification.md): IF exists({base_path}/.brainstorming/synthesis-specification.md):
project_context = Read({base_path}/.brainstorming/synthesis-specification.md) project_context = Read(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({base_path}/.brainstorming/ui-designer/analysis.md) project_context = Read(ui-designer/analysis.md)
REPORT: "🎨 Analyzing design space to generate maximally contrasting directions..." REPORT: "🎨 Analyzing design space to generate maximally contrasting directions..."
# Step 2: AI-driven divergent direction generation # Step 2: AI-driven divergent direction generation
divergence_prompt = """ divergence_prompt = """
Analyze the user's design requirements and generate {variants_count} MAXIMALLY CONTRASTING design directions. Analyze user requirements and generate {variants_count} MAXIMALLY CONTRASTING design directions.
USER INPUT: USER INPUT:
{IF prompt_guidance} {IF prompt_guidance: Prompt: "{prompt_guidance}"}
Prompt: "{prompt_guidance}" {IF project_context: Project Context Summary: {extract_key_points(project_context, max_lines=10)}}
{ENDIF} {IF images: Reference Images: {image_count} images will be analyzed in next phase}
{IF project_context} DESIGN ATTRIBUTE SPACE (maximize contrast):
Project Context Summary:
{extract_key_points(project_context, max_lines=10)}
{ENDIF}
{IF images}
Reference Images: {image_count} images will be analyzed in next phase
{ENDIF}
DESIGN ATTRIBUTE SPACE (use to maximize contrast):
- Color Saturation: [monochrome, muted, moderate, vibrant, hypersaturated] - Color Saturation: [monochrome, muted, moderate, vibrant, hypersaturated]
- Visual Weight: [minimal, light, balanced, bold, heavy] - Visual Weight: [minimal, light, balanced, bold, heavy]
- Formality: [playful, casual, professional, formal, luxury] - Formality: [playful, casual, professional, formal, luxury]
@@ -139,279 +112,119 @@ DESIGN ATTRIBUTE SPACE (use to maximize contrast):
- Density: [spacious, airy, balanced, compact, dense] - Density: [spacious, airy, balanced, compact, dense]
TASK: TASK:
1. Identify the design space center point from user requirements 1. Identify design space center point from user requirements
2. Generate {variants_count} design directions that: 2. Generate {variants_count} directions that:
- Are MAXIMALLY DISTANT from each other in attribute space - Are MAXIMALLY DISTANT from each other in attribute space
- Each occupies a distinct region/quadrant of the design spectrum - Each occupies a distinct region/quadrant of the design spectrum
- Together provide diverse aesthetic options for the user - Together provide diverse aesthetic options
- Are contextually appropriate for the project type - Are contextually appropriate for project type
- Have clear, memorable philosophical differences - Have clear, memorable philosophical differences
3. For each direction, generate: 3. For each direction, generate:
- Specific search keywords for MCP research (3-5 keywords) - Specific search keywords for MCP research (3-5 keywords)
- Anti-keywords to avoid (2-3 keywords that would reduce contrast) - Anti-keywords to avoid (2-3 keywords)
- Clear rationale explaining why this contrasts with other variants - Clear rationale explaining contrast with other variants
OUTPUT FORMAT: Valid JSON only, no markdown: OUTPUT FORMAT: Valid JSON only, no markdown:
{ {"design_space_center": {attributes}, "divergent_directions": [
"design_space_center": { {"id": "variant-1", "philosophy_name": "Brief name 2-3 words",
"color_saturation": "moderate", "design_attributes": {attribute_scores}, "search_keywords": [...],
"visual_weight": "balanced", "anti_keywords": [...], "rationale": "..."}
"formality": "professional", ], "contrast_verification": {"min_pairwise_distance": "0.75", "strategy": "..."}}
"organic_geometric": "balanced",
"innovation": "contemporary",
"density": "balanced"
},
"divergent_directions": [
{
"id": "variant-1",
"philosophy_name": "Brief name 2-3 words (e.g., 'Minimal Brutalist')",
"design_attributes": {
"color_saturation": "monochrome",
"visual_weight": "minimal",
"formality": "professional",
"organic_geometric": "brutalist",
"innovation": "timeless",
"density": "spacious"
},
"search_keywords": ["minimal", "brutalist", "monochrome", "geometric", "Swiss design"],
"anti_keywords": ["decorative", "colorful", "organic"],
"rationale": "Extreme minimalism with geometric rigor, contrasts with any ornamental or colorful approaches"
}
// ... {variants_count} total directions
],
"contrast_verification": {
"min_pairwise_distance": "0.75",
"strategy": "Brief explanation of how maximum contrast was achieved"
}
}
RULES: RULES: Output ONLY valid JSON, maximize inter-variant distance, ensure each variant
- Output ONLY valid JSON, no markdown code blocks or explanations occupies distinct aesthetic region, avoid overlapping attributes
- Maximize inter-variant distance in attribute space
- Ensure each variant occupies a distinct aesthetic region
- Avoid overlapping attribute combinations
- All directions must be contextually appropriate for: {project_context or "general web UI"}
- Philosophy names should be memorable and evocative
- Search keywords should be specific and actionable for web research
""" """
# Execute AI analysis # Execute AI analysis
divergence_response = Claude_Native_Analysis(divergence_prompt) divergent_directions = parse_json(Claude_Native_Analysis(divergence_prompt))
divergent_directions = parse_json(divergence_response)
REPORT: "✅ Generated {variants_count} contrasting design directions:" REPORT: "✅ Generated {variants_count} contrasting design directions:"
FOR direction IN divergent_directions.divergent_directions: FOR direction IN divergent_directions.divergent_directions:
REPORT: " - {direction.philosophy_name}: {direction.rationale}" REPORT: " - {direction.philosophy_name}: {direction.rationale}"
# Store divergent directions for next phase
design_space_analysis = divergent_directions design_space_analysis = divergent_directions
# Step 3: Save design space analysis for consolidation phase
Write({file_path: "{base_path}/style-extraction/design-space-analysis.json",
content: JSON.stringify(design_space_analysis, null, 2)})
REPORT: "💾 Saved design space analysis to design-space-analysis.json"
``` ```
### Phase 1.5: Variant-Specific Design Trend Research (Exa MCP) ### Phase 2: Variant-Specific Style Synthesis (Claude Native Analysis)
```bash
# Step 1: Execute independent MCP research for each variant
REPORT: "🔍 Researching design trends for each variant independently..."
design_trends = {}
FOR direction IN design_space_analysis.divergent_directions:
variant_id = direction.id
philosophy = direction.philosophy_name
keywords = direction.search_keywords
anti_keywords = direction.anti_keywords
REPORT: " → Researching {philosophy} ({variant_id})..."
# Build variant-specific search queries
variant_queries = [
# Colors: philosophy-specific palette trends
f"{philosophy} UI design color palettes {' '.join(keywords[:3])} 2024 2025",
# Typography: philosophy-specific font trends
f"{philosophy} typography trends {' '.join(keywords[:3])} web design 2024",
# Layout: philosophy-specific patterns
f"{philosophy} layout patterns {' '.join(keywords[:3])} design systems 2024",
# Contrast query: emphasize differentiation
f"design systems {philosophy} NOT {' NOT '.join(anti_keywords[:2])}"
]
# Execute MCP searches for this variant
design_trends[variant_id] = {
"philosophy": philosophy,
"attributes": direction.design_attributes,
"keywords": keywords,
"anti_keywords": anti_keywords,
"research": {}
}
FOR query IN variant_queries:
category = identify_category(query) # "colors", "typography", "layout", "contrast"
design_trends[variant_id].research[category] = mcp__exa__get_code_context_exa(
query=query,
tokensNum=2000 # Increased for more detailed guidance
)
REPORT: " ✅ {philosophy} research complete"
# Step 2: Gather shared accessibility guidelines (all variants)
REPORT: " → Researching universal accessibility guidelines..."
shared_accessibility = mcp__exa__get_code_context_exa(
query="WCAG 2.2 accessibility color contrast ARIA best practices 2024",
tokensNum=1500
)
REPORT: "✅ All variant-specific design research complete"
```
### Phase 2: Variant-Specific Style Synthesis (Claude with Divergent Research)
This is a single-pass analysis that generates each variant based on its specific design direction and research.
**Analysis Prompt Template**: **Analysis Prompt Template**:
``` ```
Generate {variants_count} design style proposals, each guided by its pre-analyzed design direction and independent trend research. Generate {variants_count} design style proposals, each guided by its pre-analyzed design direction.
INPUT MODE: {input_mode} INPUT MODE: {input_mode}
{IF input_mode IN ["image", "hybrid"]: VISUAL REFERENCES: {list of loaded images}}
{IF input_mode IN ["text", "hybrid"]: TEXT GUIDANCE: "{prompt_guidance}"}
{IF input_mode IN ["image", "hybrid"]} DESIGN SPACE ANALYSIS: {design_space_analysis summary}
VISUAL REFERENCES: {list of loaded images}
Analyze these images through the lens of each variant's design philosophy
{ENDIF}
{IF input_mode IN ["text", "hybrid"]} VARIANT-SPECIFIC DESIGN DIRECTIONS:
TEXT GUIDANCE: "{prompt_guidance}" {FOR each direction IN design_space_analysis.divergent_directions:
Apply this guidance while maintaining each variant's distinct aesthetic direction
{ENDIF}
DESIGN SPACE ANALYSIS:
{design_space_analysis summary}
VARIANT-SPECIFIC DESIGN DIRECTIONS AND RESEARCH:
{FOR each variant_id IN design_trends.keys()}
--- ---
VARIANT: {variant_id} VARIANT: {direction.id} | PHILOSOPHY: {direction.philosophy_name}
PHILOSOPHY: {design_trends[variant_id].philosophy} DESIGN ATTRIBUTES: {direction.design_attributes}
DESIGN ATTRIBUTES: SEARCH KEYWORDS: {direction.search_keywords}
- Color Saturation: {design_trends[variant_id].attributes.color_saturation} ANTI-PATTERNS (avoid): {direction.anti_keywords}
- Visual Weight: {design_trends[variant_id].attributes.visual_weight} RATIONALE: {direction.rationale}
- Formality: {design_trends[variant_id].attributes.formality} ---}
- Organic/Geometric: {design_trends[variant_id].attributes.organic_geometric}
- Innovation: {design_trends[variant_id].attributes.innovation}
- Density: {design_trends[variant_id].attributes.density}
SEARCH KEYWORDS: {', '.join(design_trends[variant_id].keywords)}
ANTI-PATTERNS (avoid): {', '.join(design_trends[variant_id].anti_keywords)}
TREND RESEARCH FOR THIS VARIANT:
Color Trends ({variant_id}):
{design_trends[variant_id].research.colors}
Typography Trends ({variant_id}):
{design_trends[variant_id].research.typography}
Layout Patterns ({variant_id}):
{design_trends[variant_id].research.layout}
Contrast Emphasis ({variant_id}):
{design_trends[variant_id].research.contrast}
---
{ENDFOR}
SHARED ACCESSIBILITY GUIDELINES (apply to all variants):
{shared_accessibility}
TASK: Generate {variants_count} design style variants where EACH variant: TASK: Generate {variants_count} design style variants where EACH variant:
1. Strictly follows its pre-defined design philosophy and attributes 1. Strictly follows its pre-defined design philosophy and attributes
2. Uses ONLY its variant-specific trend research for aesthetic decisions 2. Maintains maximum contrast with other variants' attributes
3. Maintains maximum contrast with other variants' attributes 3. Incorporates its design direction and avoids its anti-patterns
4. Incorporates its search keywords and avoids its anti-patterns 4. Uses OKLCH color space for all color values
5. Uses OKLCH color space for all color values 5. Includes complete, production-ready design token proposals
6. Includes complete, production-ready design token proposals 6. Applies WCAG AA accessibility guidelines (4.5:1 text, 3:1 UI)
7. Applies WCAG accessibility guidelines from shared research
CRITICAL RULES FOR CONTRAST: CRITICAL RULES FOR CONTRAST:
- Variant-1 should feel completely different from Variant-2 and Variant-3 - Variant-1 should feel completely different from Variant-2/3
- Use each variant's specific attribute scores (e.g., "monochrome" vs "vibrant") - Use each variant's specific attribute scores (e.g., "monochrome" vs "vibrant")
- Reference variant-specific research, NOT shared trends - Each variant should embody its unique design direction
- If Variant-1 is "minimal/geometric", Variant-2 must be "bold/organic" or similar contrast - If Variant-1 is "minimal/geometric", Variant-2 must be "bold/organic" or similar contrast
- Each variant should be immediately distinguishable by visual inspection
OUTPUT FORMAT: JSON matching this structure (see full schema at end of prompt): OUTPUT FORMAT: JSON matching this structure:
{ {"extraction_metadata": {"session_id": "...", "input_mode": "...", "timestamp": "...", "variants_count": N},
"extraction_metadata": { "session_id": "...", "input_mode": "...", "timestamp": "...", "variants_count": N }, "style_cards": [
"style_cards": [ {"id": "variant-1", "name": "Concise Style Name (2-3 words)", "description": "2-3 sentences",
{ "design_philosophy": "Core design principles",
"id": "variant-1", "preview": {"primary": "oklch(...)", "background": "oklch(...)", "font_heading": "...", "border_radius": "..."},
"name": "Concise Style Name (2-3 words)", "proposed_tokens": {
"description": "2-3 sentence description", "colors": {"brand": {...}, "surface": {...}, "semantic": {...}, "text": {...}, "border": {...}},
"design_philosophy": "Core design principles", "typography": {"font_family": {...}, "font_size": {...}, "font_weight": {...}, "line_height": {...}, "letter_spacing": {...}},
"preview": { "primary": "oklch(...)", "background": "oklch(...)", "font_heading": "...", "border_radius": "..." }, "spacing": {"0": "0", ..., "24": "6rem"},
"proposed_tokens": { "border_radius": {"none": "0", ..., "full": "9999px"},
"colors": { "shadows": {"sm": "...", ..., "xl": "..."},
"brand": { "primary": "oklch(...)", "secondary": "oklch(...)", "accent": "oklch(...)" }, "breakpoints": {"sm": "640px", ..., "2xl": "1536px"}
"surface": { "background": "oklch(...)", "elevated": "oklch(...)", "overlay": "oklch(...)" }, }}
"semantic": { "success": "oklch(...)", "warning": "oklch(...)", "error": "oklch(...)", "info": "oklch(...)" }, // Repeat for ALL {variants_count} variants
"text": { "primary": "oklch(...)", "secondary": "oklch(...)", "tertiary": "oklch(...)", "inverse": "oklch(...)" }, ]}
"border": { "default": "oklch(...)", "strong": "oklch(...)", "subtle": "oklch(...)" }
},
"typography": { "font_family": {...}, "font_size": {...}, "font_weight": {...}, "line_height": {...}, "letter_spacing": {...} },
"spacing": { "0": "0", ..., "24": "6rem" },
"border_radius": { "none": "0", ..., "full": "9999px" },
"shadows": { "sm": "...", ..., "xl": "..." },
"breakpoints": { "sm": "640px", ..., "2xl": "1536px" }
}
}
// Repeat structure for ALL {variants_count} variants
]
}
RULES: RULES: Each variant must strictly adhere to pre-defined attributes; maximize visual contrast;
- Each variant must strictly adhere to its pre-defined design attributes all colors in OKLCH format; complete token structures; semantic naming;
- Use ONLY variant-specific trend research (do NOT cross-pollinate research between variants) WCAG AA accessibility (4.5:1 text, 3:1 UI)
- Maximize visual contrast between variants using their attribute differences
- All colors MUST use OKLCH format: oklch(L C H / A)
- Token structures must be complete and production-ready
- Use semantic naming throughout (e.g., "brand-primary" not "color-1")
- Ensure accessibility (WCAG AA contrast ratios: 4.5:1 text, 3:1 UI) using shared guidelines
- Apply typography trends from each variant's specific research
- Incorporate search keywords and actively avoid anti-patterns for each variant
- Each variant's philosophy_name should match the pre-analyzed name from design space analysis
- Reference specific trends from variant-specific research, not from other variants
``` ```
### Phase 3: Parse & Write Output ### Phase 3: Parse & Write Output
```bash ```bash
# Parse Claude's JSON response
style_cards_data = parse_json(claude_response) style_cards_data = parse_json(claude_response)
Write({file_path: "{base_path}/style-extraction/style-cards.json", content: style_cards_data})
# Write single output file
Write({
file_path: "{base_path}/style-extraction/style-cards.json",
content: style_cards_data
})
``` ```
### Phase 4: Completion ### Phase 4: Completion
```javascript ```javascript
TodoWrite({ TodoWrite({todos: [
todos: [ {content: "Validate inputs and create directories", status: "completed", activeForm: "Validating inputs"},
{content: "Validate inputs and create directories", status: "completed", activeForm: "Validating inputs"}, {content: "Analyze design space for maximum contrast", status: "completed", activeForm: "Analyzing design space"},
{content: "Analyze design space for maximum contrast", status: "completed", activeForm: "Analyzing design space"}, {content: `Generate ${variants_count} divergent design directions`, status: "completed", activeForm: "Generating directions"},
{content: `Generate ${variants_count} divergent design directions`, status: "completed", activeForm: "Generating design directions"}, {content: "Save design space analysis for consolidation", status: "completed", activeForm: "Saving design space analysis"},
{content: "Research variant-specific design trends with Exa MCP", status: "completed", activeForm: "Researching variant trends"}, {content: `Generate ${variants_count} contrasting style variants`, status: "completed", activeForm: "Generating variants"}
{content: "Synthesize style cards with independent research", status: "completed", activeForm: "Synthesizing style cards"}, ]});
{content: `Generate ${variants_count} contrasting style variants`, status: "completed", activeForm: "Generating style variants"}
]
});
``` ```
**Completion Message**: **Completion Message**:
@@ -430,12 +243,9 @@ Input mode: {input_mode}
Generated {variants_count} style variant(s): Generated {variants_count} style variant(s):
{FOR each card: - {card.name} ({card.id}) - {card.design_philosophy}} {FOR each card: - {card.name} ({card.id}) - {card.design_philosophy}}
🔍 Research performed: 📂 Outputs:
- {variants_count} × 4 variant-specific MCP queries ({variants_count * 4} total) - {base_path}/style-extraction/style-cards.json
- 1 shared accessibility research query - {base_path}/style-extraction/design-space-analysis.json
- Each variant has independent trend guidance
📂 Output: {base_path}/style-extraction/style-cards.json
Next: /workflow:ui-design:consolidate --session {session_id} --variants {variants_count} [--layout-variants <count>] Next: /workflow:ui-design:consolidate --session {session_id} --variants {variants_count} [--layout-variants <count>]
@@ -446,12 +256,14 @@ Note: When called from /workflow:ui-design:auto, consolidation is triggered auto
``` ```
.workflow/WFS-{session}/design-{run_id}/style-extraction/ .workflow/WFS-{session}/design-{run_id}/style-extraction/
└── style-cards.json # Single comprehensive output ├── style-cards.json # Complete style variants with token proposals
└── design-space-analysis.json # Design directions for consolidation phase
OR (standalone mode): OR (standalone mode):
.workflow/.design/{run_id}/style-extraction/ .workflow/.design/{run_id}/style-extraction/
└── style-cards.json # Single comprehensive output ├── style-cards.json
└── design-space-analysis.json
``` ```
### style-cards.json Format ### style-cards.json Format
@@ -460,43 +272,40 @@ OR (standalone mode):
```json ```json
{ {
"extraction_metadata": { "extraction_metadata": {"session_id": "string", "input_mode": "image|text|hybrid",
"session_id": "string", "timestamp": "ISO 8601", "variants_count": "number"},
"input_mode": "image|text|hybrid",
"timestamp": "ISO 8601 string",
"variants_count": "number"
},
"style_cards": [ "style_cards": [
{ {
"id": "variant-{n}", "id": "variant-{n}", "name": "Concise Style Name (2-3 words)",
"name": "Concise Style Name (2-3 words)",
"description": "2-3 sentence description of visual language and UX", "description": "2-3 sentence description of visual language and UX",
"design_philosophy": "Core design principles for this variant", "design_philosophy": "Core design principles for this variant",
"preview": { "preview": {"primary": "oklch(...)", "background": "oklch(...)",
"primary": "oklch(...)", "font_heading": "Font family, fallbacks", "border_radius": "value"},
"background": "oklch(...)",
"font_heading": "Font family, fallbacks",
"border_radius": "value"
},
"proposed_tokens": { "proposed_tokens": {
"colors": { "colors": {
"brand": { "primary": "oklch(...)", "secondary": "oklch(...)", "accent": "oklch(...)" }, "brand": {"primary": "oklch(...)", "secondary": "oklch(...)", "accent": "oklch(...)"},
"surface": { "background": "oklch(...)", "elevated": "oklch(...)", "overlay": "oklch(...)" }, "surface": {"background": "oklch(...)", "elevated": "oklch(...)", "overlay": "oklch(...)"},
"semantic": { "success": "oklch(...)", "warning": "oklch(...)", "error": "oklch(...)", "info": "oklch(...)" }, "semantic": {"success": "oklch(...)", "warning": "oklch(...)", "error": "oklch(...)", "info": "oklch(...)"},
"text": { "primary": "oklch(...)", "secondary": "oklch(...)", "tertiary": "oklch(...)", "inverse": "oklch(...)" }, "text": {"primary": "oklch(...)", "secondary": "oklch(...)", "tertiary": "oklch(...)", "inverse": "oklch(...)"},
"border": { "default": "oklch(...)", "strong": "oklch(...)", "subtle": "oklch(...)" } "border": {"default": "oklch(...)", "strong": "oklch(...)", "subtle": "oklch(...)"}
}, },
"typography": { "typography": {
"font_family": { "heading": "...", "body": "...", "mono": "..." }, "font_family": {"heading": "...", "body": "...", "mono": "..."},
"font_size": { "xs": "...", "sm": "...", "base": "...", "lg": "...", "xl": "...", "2xl": "...", "3xl": "...", "4xl": "..." }, "font_size": {"xs": "...", "sm": "...", "base": "...", "lg": "...", "xl": "...", "2xl": "...", "3xl": "...", "4xl": "..."},
"font_weight": { "normal": "400", "medium": "500", "semibold": "600", "bold": "700" }, "font_weight": {"normal": "400", "medium": "500", "semibold": "600", "bold": "700"},
"line_height": { "tight": "1.25", "normal": "1.5", "relaxed": "1.75" }, "line_height": {"tight": "1.25", "normal": "1.5", "relaxed": "1.75"},
"letter_spacing": { "tight": "-0.025em", "normal": "0", "wide": "0.025em" } "letter_spacing": {"tight": "-0.025em", "normal": "0", "wide": "0.025em"}
}, },
"spacing": { "0": "0", "1": "0.25rem", "2": "0.5rem", ..., "24": "6rem" }, "spacing": {"0": "0", "1": "0.25rem", "2": "0.5rem", "3": "0.75rem", "4": "1rem",
"border_radius": { "none": "0", "sm": "0.25rem", "md": "0.5rem", "lg": "0.75rem", "xl": "1rem", "full": "9999px" }, "5": "1.25rem", "6": "1.5rem", "8": "2rem", "10": "2.5rem", "12": "3rem",
"shadows": { "sm": "...", "md": "...", "lg": "...", "xl": "..." }, "16": "4rem", "20": "5rem", "24": "6rem"},
"breakpoints": { "sm": "640px", "md": "768px", "lg": "1024px", "xl": "1280px", "2xl": "1536px" } "border_radius": {"none": "0", "sm": "0.25rem", "md": "0.5rem", "lg": "0.75rem",
"xl": "1rem", "full": "9999px"},
"shadows": {"sm": "0 1px 2px oklch(0.00 0.00 0 / 0.05)",
"md": "0 4px 6px oklch(0.00 0.00 0 / 0.07)",
"lg": "0 10px 15px oklch(0.00 0.00 0 / 0.10)",
"xl": "0 20px 25px oklch(0.00 0.00 0 / 0.15)"},
"breakpoints": {"sm": "640px", "md": "768px", "lg": "1024px", "xl": "1280px", "2xl": "1536px"}
} }
} }
// Repeat structure for variants_count total (variant-1, variant-2, ..., variant-n) // Repeat structure for variants_count total (variant-1, variant-2, ..., variant-n)
@@ -504,111 +313,6 @@ OR (standalone mode):
} }
``` ```
**Concrete Example (variant-1 only, others follow same structure)**:
```json
{
"extraction_metadata": {
"session_id": "WFS-auth",
"input_mode": "hybrid",
"timestamp": "2025-01-15T10:30:00Z",
"variants_count": 3
},
"style_cards": [
{
"id": "variant-1",
"name": "Minimal Brutalist",
"description": "Stark geometric design with monochrome palette and sharp edges. Prioritizes function over decoration with extreme clarity.",
"design_philosophy": "Form follows function - eliminate all non-essential visual elements",
"preview": {
"primary": "oklch(0.20 0.01 270 / 1)",
"background": "oklch(0.98 0.00 0 / 1)",
"font_heading": "Inter, system-ui, sans-serif",
"border_radius": "0"
},
"proposed_tokens": {
"colors": {
"brand": {
"primary": "oklch(0.20 0.01 270 / 1)",
"secondary": "oklch(0.40 0.01 270 / 1)",
"accent": "oklch(0.60 0.01 270 / 1)"
},
"surface": {
"background": "oklch(0.98 0.00 0 / 1)",
"elevated": "oklch(0.95 0.00 0 / 1)",
"overlay": "oklch(0.90 0.00 0 / 1)"
},
"semantic": {
"success": "oklch(0.30 0.01 270 / 1)",
"warning": "oklch(0.30 0.01 270 / 1)",
"error": "oklch(0.30 0.01 270 / 1)",
"info": "oklch(0.30 0.01 270 / 1)"
},
"text": {
"primary": "oklch(0.10 0.00 0 / 1)",
"secondary": "oklch(0.40 0.00 0 / 1)",
"tertiary": "oklch(0.60 0.00 0 / 1)",
"inverse": "oklch(0.98 0.00 0 / 1)"
},
"border": {
"default": "oklch(0.20 0.00 0 / 1)",
"strong": "oklch(0.10 0.00 0 / 1)",
"subtle": "oklch(0.85 0.00 0 / 1)"
}
},
"typography": {
"font_family": {
"heading": "Inter, system-ui, sans-serif",
"body": "Inter, system-ui, sans-serif",
"mono": "JetBrains Mono, monospace"
},
"font_size": {
"xs": "0.75rem", "sm": "0.875rem", "base": "1rem", "lg": "1.125rem",
"xl": "1.25rem", "2xl": "1.5rem", "3xl": "1.875rem", "4xl": "2.25rem"
},
"font_weight": { "normal": "400", "medium": "500", "semibold": "600", "bold": "700" },
"line_height": { "tight": "1.25", "normal": "1.5", "relaxed": "1.75" },
"letter_spacing": { "tight": "-0.025em", "normal": "0", "wide": "0.025em" }
},
"spacing": {
"0": "0", "1": "0.25rem", "2": "0.5rem", "3": "0.75rem", "4": "1rem",
"5": "1.25rem", "6": "1.5rem", "8": "2rem", "10": "2.5rem", "12": "3rem",
"16": "4rem", "20": "5rem", "24": "6rem"
},
"border_radius": {
"none": "0", "sm": "0.25rem", "md": "0.5rem", "lg": "0.75rem", "xl": "1rem", "full": "9999px"
},
"shadows": {
"sm": "0 1px 2px oklch(0.00 0.00 0 / 0.05)",
"md": "0 4px 6px oklch(0.00 0.00 0 / 0.07)",
"lg": "0 10px 15px oklch(0.00 0.00 0 / 0.10)",
"xl": "0 20px 25px oklch(0.00 0.00 0 / 0.15)"
},
"breakpoints": {
"sm": "640px", "md": "768px", "lg": "1024px", "xl": "1280px", "2xl": "1536px"
}
}
},
{
"id": "variant-2",
"name": "Bold Vibrant",
"description": "High-energy design with saturated colors, dynamic typography, and strong contrast. (Full token structure same as variant-1)",
"design_philosophy": "Make a statement - use color and energy to create memorable experiences",
"preview": { "primary": "oklch(0.50 0.25 330 / 1)", "background": "oklch(0.15 0.02 270 / 1)", "..." },
"proposed_tokens": { "...same structure as variant-1 with different values..." }
},
{
"id": "variant-3",
"name": "Organic Natural",
"description": "Soft, rounded design with warm earth tones and fluid layouts. (Full token structure same as variant-1)",
"design_philosophy": "Nature-inspired - embrace curves, warmth, and organic flow",
"preview": { "primary": "oklch(0.55 0.15 60 / 1)", "background": "oklch(0.96 0.03 80 / 1)", "..." },
"proposed_tokens": { "...same structure as variant-1 with different values..." }
}
]
}
```
**Key Structural Requirements**: **Key Structural Requirements**:
- Each variant MUST have complete, independent token proposals (all categories present) - Each variant MUST have complete, independent token proposals (all categories present)
- All colors MUST use OKLCH format: `oklch(L C H / A)` - All colors MUST use OKLCH format: `oklch(L C H / A)`
@@ -618,27 +322,27 @@ OR (standalone mode):
## Error Handling ## Error Handling
- **No images found**: Report glob pattern and suggest corrections (e.g., "Pattern '*.png' matched 0 files in current directory") - **No images found**: Report glob pattern and suggest corrections
- **Invalid prompt**: Require non-empty string for text mode - **Invalid prompt**: Require non-empty string for text mode
- **Claude JSON parsing error**: Retry with stricter format instructions and explicit structure requirements - **Claude JSON parsing error**: Retry with stricter format instructions
- **Invalid session**: Create standalone session automatically in `.workflow/.scratchpad/` - **Invalid session**: Create standalone session automatically in `.workflow/.scratchpad/`
- **Invalid variant count**: Clamp to 1-5 range and warn user - **Invalid variant count**: Clamp to 1-5 range and warn user
## Key Features ## Key Features
1. **🚀 AI-Driven Design Space Exploration (Strategy A)** 🆕 1. **🚀 AI-Driven Design Space Exploration** 🆕
- **Phase 0.5**: AI analyzes requirements and generates MAXIMALLY CONTRASTING design directions - Phase 0.5: AI analyzes requirements and generates MAXIMALLY CONTRASTING design directions
- Uses 6-dimensional design attribute space (color saturation, visual weight, formality, organic/geometric, innovation, density) - Uses 6-dimensional design attribute space (color saturation, visual weight, formality, organic/geometric, innovation, density)
- Ensures each variant occupies a distinct region of the design spectrum - Ensures each variant occupies a distinct region of the design spectrum
- Generates search keywords and anti-patterns for each variant - Generates search keywords and anti-patterns for each variant
- Provides contrast verification with minimum pairwise distance metrics - Provides contrast verification with minimum pairwise distance metrics
2. **🎯 Variant-Specific Trend Research** 🆕 2. **🎯 Variant-Specific Design Directions** 🆕
- **Independent MCP queries** for each variant (4 queries per variant) - AI generates search keywords and anti-patterns for each variant
- Each variant researches its specific design philosophy (e.g., "minimal brutalist" vs "bold vibrant") - Each variant has distinct design philosophy (e.g., "minimal brutalist" vs "bold vibrant")
- Uses philosophy-specific keywords and avoids cross-contamination - Philosophy-specific keywords guide synthesis
- Eliminates趋同性 (convergence) by preventing shared trend influence - Design space analysis saved for consolidation phase
- Shared accessibility research applied to all variants - Trend research deferred to consolidation for better integration
3. **🔒 Maximum Contrast Guarantee** 3. **🔒 Maximum Contrast Guarantee**
- AI-driven divergence ensures variants are maximally distant in attribute space - AI-driven divergence ensures variants are maximally distant in attribute space
@@ -646,10 +350,10 @@ OR (standalone mode):
- Explicit anti-patterns prevent variants from borrowing each other's characteristics - Explicit anti-patterns prevent variants from borrowing each other's characteristics
- Contrast verification built into design space analysis - Contrast verification built into design space analysis
4. **Zero External Dependencies for Core Analysis** 4. **100% Claude-Native Analysis**
- No `gemini-wrapper`, no `codex` for style synthesis - pure Claude - No external tools (gemini-wrapper, codex, or MCP) - pure Claude
- Single-pass comprehensive analysis with variant-specific trend integration - Single-pass comprehensive analysis guided by design space analysis
- Only uses Exa MCP for external trend research (not for synthesis) - Fast, deterministic style synthesis without external dependencies
5. **Streamlined Output** 5. **Streamlined Output**
- Single file (`style-cards.json`) vs. multiple scattered files - Single file (`style-cards.json`) vs. multiple scattered files
@@ -660,7 +364,7 @@ OR (standalone mode):
- Image-only: Analyze visual references through each variant's philosophical lens - Image-only: Analyze visual references through each variant's philosophical lens
- Text-only: Generate from descriptions with maximum divergence - Text-only: Generate from descriptions with maximum divergence
- Hybrid: Text guides image analysis while maintaining variant independence - Hybrid: Text guides image analysis while maintaining variant independence
- All modes enhanced with variant-specific web research - All modes enhanced with AI-driven design space analysis
7. **Context-Aware & Dynamic** 7. **Context-Aware & Dynamic**
- Extracts design keywords from user prompts (e.g., "minimalist", "Linear.app") - Extracts design keywords from user prompts (e.g., "minimalist", "Linear.app")
@@ -668,12 +372,12 @@ OR (standalone mode):
- Dynamically generates design directions based on project context - Dynamically generates design directions based on project context
- No hardcoded design philosophies - fully adaptive - No hardcoded design philosophies - fully adaptive
8. **Production-Ready Tokens** 8. **Production-Ready Token Proposals**
- Complete design system proposals per variant - Complete design system proposals per variant
- OKLCH color format for perceptual uniformity and accessibility - OKLCH color format for perceptual uniformity and accessibility
- Semantic naming conventions - Semantic naming conventions
- WCAG AA accessibility considerations from shared research - WCAG AA accessibility considerations built-in
- Variant-specific typography trends (not generic) - Variant-specific token sets (not generic)
9. **Workflow Integration** 9. **Workflow Integration**
- Integrated mode: Works within existing workflow sessions - Integrated mode: Works within existing workflow sessions

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

File diff suppressed because it is too large Load Diff