Claude-Code-Workflow/.claude/commands/workflow/ui-design/consolidate.md

name, description, usage, examples, allowed-tools

name	description	usage	examples	allowed-tools
consolidate	Consolidate style variants into independent design systems and plan layout strategies	/workflow:ui-design:consolidate [--base-path <path>] [--session <id>] [--variants <count>] [--layout-variants <count>]	/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" /workflow:ui-design:consolidate --session WFS-auth	TodoWrite(*), Read(*), Write(*), Bash(*), Task(*)

Design System Consolidation Command

Overview

Consolidate style variants into independent production-ready design systems. Refines raw token proposals from style-extract into finalized design tokens and style guides.

Strategy: Philosophy-Driven Refinement

• Agent-Driven: Uses ui-design-agent for N variant generation
• Token Refinement: Transforms proposed_tokens into complete systems
• Production-Ready: design-tokens.json + style-guide.md per variant
• Matrix-Ready: Provides style variants for generate phase

Phase 1: Setup & Validation

Step 1: Resolve Base Path & Load Style Cards

# Determine base path
bash(find .workflow -type d -name "design-*" | head -1)  # Auto-detect
# OR use --base-path / --session parameters

# Load style cards
bash(cat {base_path}/style-extraction/style-cards.json)

Step 2: Memory Check (Skip if Already Done)

# Check if already consolidated
bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "exists")

If exists: Skip to completion message

Step 3: Select Variants

# Determine variant count (default: all from style-cards.json)
bash(cat style-cards.json | grep -c "\"id\": \"variant-")

# Validate variant count
# Priority: --variants parameter → total_variants from style-cards.json

Output: variants_count, selected_variants[]

Step 4: Load Design Context (Optional)

# Load brainstorming context
bash(test -f {base_path}/.brainstorming/synthesis-specification.md && cat it)

# Load design space analysis
bash(test -f {base_path}/style-extraction/design-space-analysis.json && cat it)

Output: design_context, design_space_analysis

Phase 2: Design System Synthesis (Agent)

Executor: Task(ui-design-agent) for all variants

Step 1: Create Output Directories

bash(mkdir -p {base_path}/style-consolidation/style-{{1..{variants_count}}})

Step 2: Launch Agent Task

For all variants (1 to {variants_count}):

Task(ui-design-agent): `
  [DESIGN_TOKEN_GENERATION_TASK]
  Generate {variants_count} independent design systems using philosophy-driven refinement

  SESSION: {session_id} | MODE: Philosophy-driven refinement | BASE_PATH: {base_path}

  CRITICAL PATH: Use loop index (N) for directories: style-1/, style-2/, ..., style-N/

  VARIANT DATA:
  {FOR each variant with index N:
    VARIANT INDEX: {N} | ID: {variant.id} | NAME: {variant.name}
    Design Philosophy: {variant.design_philosophy}
    Proposed Tokens: {variant.proposed_tokens}
    {IF design_space_analysis: Design Attributes: {attributes}, Anti-keywords: {anti_keywords}}
  }

  ## 参考
  - Style cards: Each variant's proposed_tokens and design_philosophy
  - Design space analysis: design_attributes (saturation, weight, formality, organic/geometric, innovation, density)
  - Anti-keywords: Explicit constraints to avoid
  - WCAG AA: 4.5:1 text, 3:1 UI (use built-in AI knowledge)

  ## 生成
  For EACH variant (use loop index N for paths):
  1. {base_path}/style-consolidation/style-{N}/design-tokens.json
     - Complete token structure: colors, typography, spacing, border_radius, shadows, breakpoints
     - All colors in OKLCH format
     - Apply design_attributes to token values (saturation→chroma, density→spacing, etc.)

  2. {base_path}/style-consolidation/style-{N}/style-guide.md
     - Expanded design philosophy
     - Complete color system with accessibility notes
     - Typography documentation
     - Usage guidelines

  ## 注意
  - ✅ Use Write() tool immediately for each file
  - ✅ Use loop index N for directory names: style-1/, style-2/, etc.
  - ❌ DO NOT use variant.id in paths (metadata only)
  - ❌ NO external research or MCP calls (pure AI refinement)
  - Apply philosophy-driven refinement: design_attributes guide token values
  - Maintain divergence: Use anti_keywords to prevent variant convergence
  - Complete each variant's files before moving to next variant
`

Output: Agent generates variants_count × 2 files

Phase 3: Verify Output

Step 1: Check Files Created

# Verify all design systems created
bash(ls {base_path}/style-consolidation/style-*/design-tokens.json | wc -l)

# Validate structure
bash(cat {base_path}/style-consolidation/style-1/design-tokens.json | grep -q "colors" && echo "valid")

Step 2: Verify File Sizes

bash(ls -lh {base_path}/style-consolidation/style-1/)

Output: variants_count × 2 files verified

Completion

Todo Update

TodoWrite({todos: [
  {content: "Setup and load style cards", status: "completed", activeForm: "Loading style cards"},
  {content: "Select variants and load context", status: "completed", activeForm: "Loading context"},
  {content: "Generate design systems (agent)", status: "completed", activeForm: "Generating systems"},
  {content: "Verify output files", status: "completed", activeForm: "Verifying files"}
]});

Output Message

✅ Design system consolidation complete!

Configuration:
- Session: {session_id}
- Variants: {variants_count}
- Philosophy-driven refinement (zero MCP calls)

Generated Files:
{base_path}/style-consolidation/
├── style-1/ (design-tokens.json, style-guide.md)
├── style-2/ (same structure)
└── style-{variants_count}/ (same structure)

Next: /workflow:ui-design:generate --session {session_id} --style-variants {variants_count} --targets "dashboard,auth"

Simple Bash Commands

Path Operations

# Find design directory
bash(find .workflow -type d -name "design-*" | head -1)

# Load style cards
bash(cat {base_path}/style-extraction/style-cards.json)

# Count variants
bash(cat style-cards.json | grep -c "\"id\": \"variant-")

Validation Commands

# Check if already consolidated
bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "exists")

# Verify output
bash(ls {base_path}/style-consolidation/style-*/design-tokens.json | wc -l)

# Validate structure
bash(cat design-tokens.json | grep -q "colors" && echo "valid")

File Operations

# Create directories
bash(mkdir -p {base_path}/style-consolidation/style-{{1..3}})

# Check file sizes
bash(ls -lh {base_path}/style-consolidation/style-1/)

Output Structure

{base_path}/
└── style-consolidation/
    ├── style-1/
    │   ├── design-tokens.json
    │   └── style-guide.md
    ├── style-2/
    │   ├── design-tokens.json
    │   └── style-guide.md
    └── style-N/ (same structure)

design-tokens.json Format

{
  "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(...)"}
  },
  "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"}
}

Requirements: OKLCH colors, complete coverage, semantic naming

Error Handling

Common Errors

ERROR: No style cards found
→ Run /workflow:ui-design:style-extract first

ERROR: Invalid variant count
→ List available count, auto-select all

ERROR: Agent file creation failed
→ Check agent output, verify Write() operations

Key Features

• Philosophy-Driven Refinement - Pure AI token refinement using design_attributes
• Agent-Driven - Uses ui-design-agent for multi-file generation
• Separate Design Systems - N independent systems (one per variant)
• Production-Ready - WCAG AA compliant, OKLCH colors, semantic naming
• Zero MCP Calls - Faster execution, better divergence preservation

Integration

Input: style-cards.json from /workflow:ui-design:style-extract Output: style-consolidation/style-{N}/ for each variant Next: /workflow:ui-design:generate --style-variants N

Note: After consolidate, use /workflow:ui-design:layout-extract to generate layout templates before running generate.