catlog22/Claude-Code-Workflow
1
0
Fork 0
mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-02-14 02:42:04 +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
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."
- 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
type: string
description: "Workflow session ID (e.g., WFS-auth). Finds latest design run in session directory."
@@ -19,27 +15,26 @@ parameters:
type: string
description: "Custom base path for input/output. Overrides --session if provided."
examples:
- /workflow:ui-design:consolidate --base-path ".workflow/WFS-auth/design-run-20250109-143022" --variants 3 --layout-variants 3
- /workflow:ui-design:consolidate --session WFS-auth --variants 2 --layout-variants 2
- /workflow:ui-design:consolidate --base-path "./.workflow/.design/run-20250109-150533" # Uses all variants, default 3 layouts
- /workflow:ui-design:consolidate --session WFS-auth --layout-variants 2 # Process all variants from extraction
- /workflow:ui-design:consolidate --base-path ".workflow/WFS-auth/design-run-20250109-143022" --variants 3
- /workflow:ui-design:consolidate --session WFS-auth --variants 2
- /workflow:ui-design:consolidate --base-path "./.workflow/.design/run-20250109-150533" # Uses all variants
- /workflow:ui-design:consolidate --session WFS-auth # Process all variants from extraction
allowed-tools: TodoWrite(*), Read(*), Write(*), Bash(*), Task(*)
---
# Design System Consolidation & Layout Planning Command
# Design System Consolidation Command
## 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
- **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
- **Separate Design Systems**: Generates N independent design systems (one per variant)
- **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
- **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
@@ -47,13 +42,9 @@ Consolidate user-selected style variants into **independent production-ready des
```bash
# Determine base path
IF --base-path provided:
base_path = {provided_base_path}
ELSE IF --session provided:
# 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/*")
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/*")
# Verify extraction output exists
style_cards_path = "{base_path}/style-extraction/style-cards.json"
@@ -68,7 +59,7 @@ total_variants = len(style_cards.style_cards)
```bash
# Determine how many variants to consolidate
IF --variants provided:
IF --variants:
variants_count = {provided_count}
VALIDATE: 1 <= variants_count <= total_variants
ELSE:
@@ -81,113 +72,24 @@ VERIFY: selected_variants.length > 0
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)
```bash
# Load brainstorming context if available
design_context = ""
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):
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)
@@ -195,63 +97,128 @@ ELSE IF exists({base_path}/.brainstorming/ui-designer/analysis.md):
```bash
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
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}
MODE: Separate design system generation
MODE: Separate design system generation with MCP trend research
BASE_PATH: {base_path}
VARIANTS TO PROCESS: {variants_count}
VARIANT DATA:
## Variant Data
{FOR each variant IN selected_variants:
---
Variant ID: {variant.id}
Name: {variant.name}
Variant ID: {variant.id} | Name: {variant.name}
Description: {variant.description}
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:
DESIGN CONTEXT (from brainstorming):
{design_context}
{IF 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):
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
## Step 1: Variant-Specific Trend Research (MCP)
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": {
"brand": { "primary": "oklch(...)", "secondary": "oklch(...)", "accent": "oklch(...)" },
"surface": { "background": "oklch(...)", "elevated": "oklch(...)", "overlay": "oklch(...)" },
"semantic": { "success": "oklch(...)", "warning": "oklch(...)", "error": "oklch(...)", "info": "oklch(...)" },
"text": { "primary": "oklch(...)", "secondary": "oklch(...)", "tertiary": "oklch(...)", "inverse": "oklch(...)" },
"border": { "default": "oklch(...)", "strong": "oklch(...)", "subtle": "oklch(...)" }
"brand": {"primary": "oklch(...)", "secondary": "oklch(...)", "accent": "oklch(...)"},
"surface": {"background": "oklch(...)", "elevated": "oklch(...)", "overlay": "oklch(...)"},
"semantic": {"success": "oklch(...)", "warning": "oklch(...)", "error": "oklch(...)", "info": "oklch(...)"},
"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", "1": "0.25rem", ..., "24": "6rem" },
"border_radius": { "none": "0", "sm": "0.25rem", ..., "full": "9999px" },
"shadows": { "sm": "...", "md": "...", "lg": "...", "xl": "..." },
"breakpoints": { "sm": "640px", ..., "2xl": "1536px" }
"typography": {"font_family": {...}, "font_size": {...}, "font_weight": {...}, "line_height": {...}, "letter_spacing": {...}},
"spacing": {"0": "0", "1": "0.25rem", ..., "24": "6rem"},
"border_radius": {"none": "0", "sm": "0.25rem", ..., "full": "9999px"},
"shadows": {"sm": "...", "md": "...", "lg": "...", "xl": "..."},
"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 Philosophy
@@ -272,112 +239,124 @@ FILE 2: style-{variant_id}/style-guide.md
- All text meets WCAG AA (4.5:1 minimum)
- UI components meet WCAG AA (3:1 minimum)
- Focus indicators are clearly visible
```
RESPONSE FORMAT:
For each variant, provide clearly labeled sections:
## Write Operation Instructions
- 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 =====
{JSON content}
## Example Write Operations
```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 =====
{Markdown content}
// For variant 2
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 =====
{JSON content}
## Expected Final Report
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 =====
{Markdown content}
... (repeat for all {variants_count} variants)
IMPORTANT:
## Critical Requirements
- Generate files for ALL {variants_count} variants
- Use sequential IDs: style-1, style-2, ..., style-{variants_count}
- Each variant must be complete and independent
- Maintain consistent structure across all variants
- Write files directly using Write() tool - do NOT return contents as text
"""
# Execute agent task
Task(
subagent_type="ui-design-agent",
description="Generate {variants_count} separate design systems",
prompt=agent_task_prompt
)
Task(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"
```
### Phase 5: Process Agent Results and Generate Report
### Phase 5: Verify Agent File Creation
```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
agent_output = get_agent_response()
# Extract and write files for each variant
# Verify each variant's files were created by agent
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
design_tokens_section = extract_section(agent_output, f"===== style-{variant_id}/design-tokens.json =====")
design_tokens = parse_json(design_tokens_section)
Write({base_path}/style-consolidation/style-{variant_id}/design-tokens.json, JSON.stringify(design_tokens, null, 2))
# Verify files exist
VERIFY: exists(tokens_path), "Design tokens not created by agent for style-{variant_id}"
VERIFY: exists(guide_path), "Style guide not created by agent for style-{variant_id}"
# Extract style guide
style_guide_section = extract_section(agent_output, f"===== style-{variant_id}/style-guide.md =====")
Write({base_path}/style-consolidation/style-{variant_id}/style-guide.md, style_guide_section)
# Optional: Validate JSON structure
TRY:
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**:
```
{base_path}/style-consolidation/
├── style-1/
│ ├── design-tokens.json # Style 1 tokens
│ └── style-guide.md # Style 1 docs
├── style-2/
│ └── ... (same structure)
├── style-N/
│ └── ... (same structure)
└── layout-strategies.json # Layout variant definitions
├── style-1/ (design-tokens.json, style-guide.md)
├── style-2/ (same structure)
└── style-N/ (same structure)
```
### Phase 6: Completion & Reporting
```javascript
TodoWrite({
todos: [
{content: "Load session and style cards", status: "completed", activeForm: "Loading style cards"},
{content: "Select variants for consolidation", status: "completed", activeForm: "Selecting variants"},
{content: "Plan layout strategies", status: "completed", activeForm: "Planning layout strategies"},
{content: "Load design context from brainstorming", status: "completed", activeForm: "Loading context"},
{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"}
]
});
TodoWrite({todos: [
{content: "Load session and style cards", status: "completed", activeForm: "Loading style cards"},
{content: "Select variants for consolidation", status: "completed", activeForm: "Selecting variants"},
{content: "Load design context and space analysis", status: "completed", activeForm: "Loading context"},
{content: "Perform variant-specific trend research", status: "completed", activeForm: "Researching design trends"},
{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"}
]});
```
**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:
{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/
├── style-1/ (design-tokens.json, style-guide.md)
├── style-2/ (same structure)
├── style-{variants_count}/ (same structure)
└── layout-strategies.json
└── style-{variants_count}/ (same structure)
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.
The generate command will read layout strategies from layout-strategies.json.
Note: When called from /workflow:ui-design:explore-auto, UI generation is triggered automatically.
Layout planning is now handled in the generate phase for each specific target.
```
## design-tokens.json Format
@@ -387,23 +366,23 @@ The generate command will read layout strategies from layout-strategies.json.
```json
{
"colors": {
"brand": { "primary": "oklch(...)", "secondary": "oklch(...)", "accent": "oklch(...)" },
"surface": { "background": "oklch(...)", "elevated": "oklch(...)", "overlay": "oklch(...)" },
"semantic": { "success": "oklch(...)", "warning": "oklch(...)", "error": "oklch(...)", "info": "oklch(...)" },
"text": { "primary": "oklch(...)", "secondary": "oklch(...)", "tertiary": "oklch(...)", "inverse": "oklch(...)" },
"border": { "default": "oklch(...)", "strong": "oklch(...)", "subtle": "oklch(...)" }
"brand": {"primary": "oklch(...)", "secondary": "oklch(...)", "accent": "oklch(...)"},
"surface": {"background": "oklch(...)", "elevated": "oklch(...)", "overlay": "oklch(...)"},
"semantic": {"success": "oklch(...)", "warning": "oklch(...)", "error": "oklch(...)", "info": "oklch(...)"},
"text": {"primary": "oklch(...)", "secondary": "oklch(...)", "tertiary": "oklch(...)", "inverse": "oklch(...)"},
"border": {"default": "oklch(...)", "strong": "oklch(...)", "subtle": "oklch(...)"}
},
"typography": {
"font_family": { "heading": "...", "body": "...", "mono": "..." },
"font_size": { "xs": "...", "sm": "...", "base": "...", "lg": "...", "xl": "...", "2xl": "...", "3xl": "...", "4xl": "..." },
"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" }
"font_family": {"heading": "...", "body": "...", "mono": "..."},
"font_size": {"xs": "...", "sm": "...", "base": "...", "lg": "...", "xl": "...", "2xl": "...", "3xl": "...", "4xl": "..."},
"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", ..., "24": "6rem" },
"border_radius": { "none": "0", "sm": "0.25rem", ..., "full": "9999px" },
"shadows": { "sm": "...", "md": "...", "lg": "...", "xl": "..." },
"breakpoints": { "sm": "640px", "md": "768px", "lg": "1024px", "xl": "1280px", "2xl": "1536px" }
"spacing": {"0": "0", "1": "0.25rem", ..., "24": "6rem"},
"border_radius": {"none": "0", "sm": "0.25rem", ..., "full": "9999px"},
"shadows": {"sm": "...", "md": "...", "lg": "...", "xl": "..."},
"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
1. **Agent-Driven Architecture**
- Uses ui-design-agent for multi-file generation efficiency
- Parallel generation of N independent design systems
- Structured output parsing with labeled sections
2. **Separate Design Systems (Matrix-Ready)**
- Generates N independent design systems (one per variant)
- Each variant maintains unique style identity
- 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)
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
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
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
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)
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
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)
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
## Integration Points
- **Input**:
- `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)
- `--layout-variants` parameter (default: 3)
- **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`
- **Output**: Style Systems: `style-consolidation/style-{n}/design-tokens.json` and `style-guide.md` for each variant (enhanced with trend research)
- **Context**: Optional `synthesis-specification.md` or `ui-designer/analysis.md`
- **Auto Integration**: Automatically triggered by `/workflow:ui-design:auto` workflow
- **Next Command**: `/workflow:ui-design:generate --style-variants N --layout-variants M` reads design tokens and layout strategies
- **Auto Integration**: Automatically triggered by `/workflow:ui-design:explore-auto` workflow
- **Next Command**: `/workflow:ui-design:generate --style-variants N --targets "..." --layout-variants M` performs target-specific layout planning