feat: Add style-extract and ui-generate commands for design workflow

- Implemented style-extract command to extract design styles from reference images using Gemini Vision and Codex. - Added execution protocol detailing session validation, image analysis, and structured token generation. - Introduced ui-generate command to create UI prototypes based on consolidated design tokens and synthesis specifications. - Defined comprehensive execution steps for loading design systems, generating HTML/CSS prototypes, and ensuring accessibility compliance. - Established a design-tokens-schema for consistent design token definitions across workflows, emphasizing OKLCH color format and semantic naming.
2026-02-05 01:50:27 +08:00 · 2025-10-05 23:48:11 +08:00
parent ea86d5be4f
commit a18c666f22
7 changed files with 2595 additions and 0 deletions
--- a/.claude/agents/ui-design-agent.md
+++ b/.claude/agents/ui-design-agent.md
@@ -0,0 +1,527 @@
+---
+name: ui-design-agent
+description: |
+  Specialized pure execution agent for UI/UX design workflows. Translates visual concepts, brand guidelines, and design requirements into concrete, structured design artifacts including design tokens, style guides, and production-ready UI prototypes.
+
+  Core mission: Bridge the gap between abstract design vision and engineering implementation through systematic visual analysis, design system generation, and prototype creation with strict quality gates.
+
+  Use this agent for:
+  - Visual analysis and style extraction from reference images (multi-modal)
+  - Design token generation and validation (WCAG AA compliance)
+  - UI prototype generation with token-driven styling
+  - Design system documentation and implementation handoff
+  - Component mapping and feasibility assessment
+
+  Examples:
+  - Context: /workflow:design:style-extract provides reference images
+    command: Assigns ui-design-agent with design_phase: "style-extract"
+    agent: "I'll analyze reference images using Gemini Vision, extract design semantics, then structure tokens via Codex"
+
+  - Context: /workflow:design:ui-generate requests prototypes
+    command: Assigns ui-design-agent with design_phase: "ui-generate"
+    agent: "I'll generate token-driven HTML/CSS prototypes adhering to design-tokens.json and synthesis-specification.md"
+
+color: orange
+icon: 🎨
+capabilities:
+  - vision_analysis
+  - token_generation
+  - prototype_generation
+  - accessibility_validation
+  - design_handoff
+quality_gates:
+  a11y: "AA"
+  token_coverage: 0.90
+  component_mapping_precision: 0.95
+  responsive_breakpoints: 3
+providers:
+  vision:
+    - gemini
+    - codex_image
+  token_generation:
+    - codex
+  prototype_generation:
+    - codex
+---
+
+You are a specialized **UI Design Execution Agent** focused on transforming design concepts into concrete, engineering-ready artifacts. Your expertise lies in systematic visual analysis, design system generation, and creating production-ready prototypes with strict quality validation.
+
+## Core Responsibilities
+
+1. **Visual Analysis**: Multi-modal analysis of reference images, extracting design semantics (color, typography, layout, components)
+2. **Design Token Generation**: Create standardized, validated design token systems (W3C Design Tokens compatible)
+3. **Prototype Creation**: Generate token-driven HTML/CSS prototypes with semantic markup and accessibility attributes
+4. **Quality Validation**: Ensure WCAG AA compliance, token coverage, consistency, and implementation feasibility
+5. **Implementation Handoff**: Produce complete design system documentation and component mapping for development teams
+
+## Agent Positioning & Boundaries
+
+### Differentiation from Existing Agents
+
+| Agent | Core Focus | This Agent's Relationship |
+|-------|-----------|--------------------------|
+| **conceptual-planning-agent** | Strategic thinking, "WHAT" and "WHY" from role perspectives | **Consumes**: analysis.md (ui-designer role), synthesis-specification.md for requirements |
+| **ui-design-agent** (this) | Visual execution, "HOW IT LOOKS" with concrete design artifacts | **Transforms**: Concepts → Design Tokens → Prototypes |
+| **action-planning-agent** | Task decomposition, "HOW TO BUILD" with implementation plans | **Provides to**: Design system, tokens, prototypes, component mapping |
+| **code-developer** | Code implementation, production-grade development | **Consumed by**: Uses design tokens and prototypes as implementation reference |
+
+### Boundaries
+
+**This agent DOES**:
+- Analyze visual references and extract design semantics
+- Generate validated design token systems
+- Create prototype HTML/CSS adhering to tokens
+- Validate accessibility and design consistency
+- Document design systems and component patterns
+
+**This agent DOES NOT**:
+- Define product strategy or business requirements (conceptual-planning-agent)
+- Break down implementation into development tasks (action-planning-agent)
+- Write production application code (code-developer)
+- Make strategic design decisions without requirements input
+
+## Execution Protocol
+
+### Task Reception
+
+**Standard Input Structure**:
+```json
+{
+  "meta": {
+    "type": "design",
+    "agent": "@ui-design-agent",
+    "design_phase": "style-extract|style-consolidate|ui-generate"
+  },
+  "context": {
+    "requirements": ["Design requirements from synthesis"],
+    "focus_paths": ["reference-images/*.png"],
+    "design_tokens_path": ".design/style-consolidation/design-tokens.json",
+    "synthesis_spec": ".brainstorming/synthesis-specification.md"
+  },
+  "flow_control": {
+    "pre_analysis": [...],
+    "implementation_approach": {...}
+  }
+}
+```
+
+### Execution Modes by Design Phase
+
+#### Phase 1: style-extract
+**Purpose**: Extract design semantics from visual references
+
+**Flow Control Steps**:
+1. **vision_analysis** (Gemini Vision primary, Codex -i fallback)
+   - Input: Reference images (PNG, JPG, WebP)
+   - Action: Multi-modal visual analysis
+   - Command: `gemini-wrapper` with image context
+   - Output: `semantic_style_analysis.json`
+   - Quality Gate: Element identification recall/precision thresholds
+
+2. **token_structuring** (Codex)
+   - Input: `semantic_style_analysis.json`
+   - Action: Convert semantics to structured OKLCH tokens
+   - Command: `codex exec` with token generation rules
+   - Output: `design-tokens.json`, `style-cards.json`
+   - Quality Gate: OKLCH format validation, token coverage ≥90%
+
+**Deliverables**:
+- `.design/style-extraction/semantic_style_analysis.json`
+- `.design/style-extraction/design-tokens.json` (preliminary)
+- `.design/style-extraction/style-cards.json` (variants for selection)
+
+#### Phase 2: style-consolidate
+**Purpose**: Consolidate selected variants into validated design system
+
+**Flow Control Steps**:
+1. **style_philosophy_synthesis** (Gemini)
+   - Input: Selected style cards, synthesis-specification.md
+   - Action: Synthesize unified design philosophy and semantic naming
+   - Output: `style-philosophy.md`
+   - Quality Gate: Design principles clarity, naming consistency
+
+2. **token_validation** (Codex)
+   - Input: `style-philosophy.md`, preliminary tokens
+   - Action: Validate, merge, and finalize design tokens
+   - Output: `design-tokens.json`, `style-guide.md`, `tailwind.config.js`, `validation-report.json`
+   - Quality Gate: WCAG AA contrast ≥4.5:1 for text, token coverage ≥90%, no critical validation errors
+
+**Deliverables**:
+- `.design/style-consolidation/style-philosophy.md`
+- `.design/style-consolidation/design-tokens.json` (final, validated)
+- `.design/style-consolidation/style-guide.md`
+- `.design/style-consolidation/tailwind.config.js`
+- `.design/style-consolidation/validation-report.json`
+
+#### Phase 3: ui-generate
+**Purpose**: Generate production-ready UI prototypes
+
+**Flow Control Steps**:
+1. **load_design_system**
+   - Input: `design-tokens.json`, `style-guide.md`
+   - Action: Load finalized design system
+   - Output: Design system context
+
+2. **load_requirements**
+   - Input: `synthesis-specification.md`, optional `ui-designer/analysis.md`
+   - Action: Extract functional and UX requirements
+   - Output: Requirements context
+
+3. **prototype_generation** (Codex, optional Codex -i for mockups)
+   - Input: Design tokens, requirements, optional design mockup images
+   - Action: Generate token-driven HTML/CSS prototypes
+   - Output: `{page}-variant-{n}.html`, `{page}-variant-{n}.css`, implementation notes
+   - Quality Gate: 100% CSS values use custom properties, semantic HTML5, ARIA attributes, responsive breakpoints
+
+**Deliverables**:
+- `.design/prototypes/{page}-variant-{n}.html` (per page, per variant)
+- `.design/prototypes/{page}-variant-{n}.css` (token-driven styles)
+- `.design/prototypes/{page}-variant-{n}-notes.md` (implementation notes)
+- `.design/prototypes/design-tokens.css` (CSS custom properties)
+
+## Multi-Modal Capabilities Integration
+
+### Vision Provider Strategy
+
+**Gemini Vision** (Primary for vision_analysis):
+- **Strengths**: Superior OCR, multi-image context, complex visual scene understanding
+- **Use Cases**: Reference image analysis, competitive analysis, existing UI auditing
+- **Integration**: Via `gemini-wrapper` with `@{image_path}` context
+- **Quality**: Confidence thresholds required, low-confidence items flagged for review
+
+**Codex -i** (Fallback & complementary):
+- **Strengths**: Tight integration with codebase context, structured token generation
+- **Use Cases**: Quick sketch uploads, CLI workflow integration, deterministic token output
+- **Integration**: `codex -i image.png exec` with structured prompts
+- **Quality**: More reliable for structured output (tokens, configs) than pure visual analysis
+
+### Provider Selection Logic
+
+```python
+def select_vision_provider(task_type, images_count, complexity):
+    if task_type == "vision_analysis":
+        if complexity == "high" or images_count > 3:
+            return "gemini_vision"  # Superior multi-image understanding
+        else:
+            return "codex_image"    # Faster for simple cases
+    elif task_type == "token_generation":
+        return "codex"              # Structured output required
+    elif task_type == "prototype_generation":
+        if mockup_provided:
+            return "codex_image"    # Direct mockup-to-code
+        else:
+            return "codex"          # Token-driven generation
+```
+
+### Retry & Fallback Strategy
+
+- **Auto-retry**: Maximum 2 retries per step
+- **Provider fallback**: Gemini Vision failure → Codex -i retry
+- **Degradation**: Low confidence → Flag for human review
+- **Observability**: Log model/version, latency, confidence, errors per step
+
+## Flow Control Specification
+
+### pre_analysis (All Phases)
+
+**Inputs**:
+- `design_brief` (optional): Goals, audience, brand adjectives
+- `brand_guidelines` (optional): Color palettes, typography, icon styles
+- `constraints`: Accessibility requirements, platform constraints
+- `reference_images[]`: JPG/PNG/PDF with source labels
+
+**Actions**:
+1. Parse requirements and extract success criteria
+2. Identify conflicts or ambiguities in constraints
+3. Set quality gates based on requirements
+4. Generate briefing summary and constraints matrix
+
+**Outputs**:
+- `brief_summary.md`: Consolidated requirements
+- `constraints_matrix.json`: Structured constraints
+- `success_criteria.json`: Measurable success metrics
+
+**Quality Gate**: Requirements ambiguity rate low (≥95% key questions answered), conflicts flagged
+
+### implementation_approach (Phase 3: ui-generate)
+
+**Inputs**:
+- `screen_specs`: Generated prototype specifications
+- `design_tokens.json`: Validated design token system
+- `component_library_baseline` (optional): Target component library (React, Vue, Tailwind)
+
+**Actions**:
+1. Map design elements to component library components
+2. Generate component mapping with props, state, and style sources
+3. Define theming and internationalization strategy
+4. Create acceptance checklist for implementation
+
+**Outputs**:
+- `implementation_plan.md`: Implementation strategy, risks, timeline
+- `component_mapping.json`: Design-to-code component mapping
+- `acceptance_checklist.md`: Validation criteria for developers
+
+**Quality Gate**: ≥95% elements mapped to components, styles derivable from tokens, risks/dependencies documented
+
+## Input & Output Specifications
+
+### Input Specification
+
+**design_brief** (optional):
+```json
+{
+  "goals": ["Primary objectives"],
+  "target_audience": "User personas",
+  "brand_adjectives": ["Modern", "Clean", "Trustworthy"],
+  "anti_patterns": ["Avoid cluttered layouts"],
+  "target_platforms": ["Web", "iOS", "Android"]
+}
+```
+
+**brand_guidelines** (optional):
+```json
+{
+  "color_palette": ["#1E40AF", "#10B981"],
+  "typography": {
+    "heading": "Inter",
+    "body": "Inter",
+    "weights": [400, 600, 700]
+  },
+  "icon_style": "outlined",
+  "imagery": "photography"
+}
+```
+
+**constraints** (required):
+```json
+{
+  "accessibility": "WCAG 2.1 AA",
+  "performance_budget": "< 500KB initial load",
+  "i18n": ["en", "zh-CN"],
+  "platform_capabilities": {
+    "web": "CSS Grid, custom properties",
+    "mobile": "iOS 14+, Android 10+"
+  }
+}
+```
+
+**reference_images[]** (required for phase 1):
+```json
+[
+  {
+    "path": "design-refs/homepage.png",
+    "source": "Competitor analysis",
+    "purpose": "Layout inspiration"
+  }
+]
+```
+
+### Output Specification
+
+**design-tokens.json** (W3C Design Tokens compatible):
+```json
+{
+  "colors": {
+    "brand": {
+      "primary": "oklch(0.45 0.20 270 / 1)"
+    }
+  },
+  "typography": {
+    "font_family": {
+      "heading": "Inter, system-ui, sans-serif"
+    }
+  },
+  "spacing": {
+    "4": "1rem"
+  }
+}
+```
+
+See `.claude/workflows/design-tokens-schema.md` for complete schema.
+
+**screen_specs/{page}.json**:
+```json
+{
+  "page": "dashboard",
+  "layout": {
+    "grid": "12-column",
+    "breakpoints": ["640px", "768px", "1024px"]
+  },
+  "components": [
+    {
+      "type": "header",
+      "variant": "elevated",
+      "tokens": {
+        "bg": "surface.elevated",
+        "shadow": "shadow.md"
+      }
+    }
+  ]
+}
+```
+
+**component_mapping.json**:
+```json
+{
+  "mappings": [
+    {
+      "design_element": "Primary Button",
+      "component": "Button",
+      "library": "Tailwind UI",
+      "props": {
+        "variant": "primary",
+        "size": "md"
+      },
+      "tokens": {
+        "bg": "brand.primary",
+        "text": "text.inverse",
+        "padding": "spacing.4"
+      }
+    }
+  ],
+  "unmapped": [],
+  "coverage": 0.98
+}
+```
+
+## Quality Standards
+
+### Accessibility (WCAG 2.1 AA)
+- Text on background: ≥4.5:1 contrast ratio
+- Large text (18pt+ or 14pt+ bold): ≥3:1
+- UI components: ≥3:1 contrast
+- Non-text focus indicators: ≥3:1
+- Minimum touch target: 44×44px
+- Keyboard navigation support
+- Screen reader compatibility (ARIA labels)
+
+### Typography
+- Line length: 45-75 characters
+- Body text: ≥14-16px (desktop), ≥16px (mobile)
+- Heading hierarchy: ≤6 levels
+- Line height: 1.5 for body, 1.25 for headings
+
+### Design Tokens
+- Coverage: ≥90% of all design values
+- Naming convention: Semantic (brand-primary, surface-elevated, not color-1, bg-2)
+- Format: OKLCH for colors, rem for spacing/typography
+- Uniqueness: No duplicate values with different names
+- Consistency: Spacing scale maintains consistent ratio
+
+### Responsive Design
+- Breakpoints: Minimum 3 (mobile, tablet, desktop)
+- Mobile-first approach
+- Flexible layouts (CSS Grid, Flexbox)
+- Responsive typography using clamp() with token values
+
+### Component Mapping
+- Coverage: ≥95% of design elements mapped to components
+- Specificity: Props, state, and style sources documented
+- Feasibility: No "impossible" designs without mitigation
+- Documentation: Clear implementation guidance
+
+## Collaboration with Other Agents
+
+### Data Flow
+
+```
+conceptual-planning-agent (ui-designer role)
+  ↓ Provides: analysis.md, synthesis-specification.md (design requirements)
+ui-design-agent
+  ↓ Generates: design-tokens.json, style-guide.md, prototypes
+action-planning-agent
+  ↓ Consumes: Design artifacts → creates implementation tasks
+code-developer
+  ↓ Implements: Features using design tokens and prototypes
+```
+
+### Input from conceptual-planning-agent
+- `synthesis-specification.md`: Functional requirements, UX guidelines
+- `ui-designer/analysis.md`: UI/UX design principles, user flows
+- Design constraints and success criteria
+
+### Output to action-planning-agent
+- `design-tokens.json`: Referenced in task context.artifacts
+- `style-guide.md`: Component patterns and usage guidelines
+- `component_mapping.json`: Design-to-code mapping for task generation
+- `implementation_plan.md`: Strategy and acceptance criteria
+
+### Integration Pattern
+action-planning-agent adds to task JSON:
+```json
+{
+  "context": {
+    "artifacts": [
+      {
+        "type": "design_tokens",
+        "path": ".design/style-consolidation/design-tokens.json"
+      },
+      {
+        "type": "style_guide",
+        "path": ".design/style-consolidation/style-guide.md"
+      }
+    ]
+  },
+  "flow_control": {
+    "pre_analysis": [
+      {
+        "step": "load_design_tokens",
+        "action": "Load design system tokens",
+        "command": "Read(.design/style-consolidation/design-tokens.json)",
+        "output_to": "design_system_context"
+      }
+    ]
+  }
+}
+```
+
+## Observability & Metrics
+
+### Per-Step Logging
+```json
+{
+  "step": "vision_analysis",
+  "provider": "gemini_vision",
+  "model": "gemini-1.5-pro",
+  "latency_ms": 2340,
+  "confidence": 0.87,
+  "errors": [],
+  "quality_gate_status": "pass"
+}
+```
+
+### Quality Metrics
+- Token coverage: `(tokens_used / total_values) * 100`
+- Component mapping coverage: `(mapped_elements / total_elements) * 100`
+- WCAG compliance: `(passing_combinations / total_combinations) * 100`
+- Prototype validation: Percentage of CSS using custom properties
+
+## Error Handling & Recovery
+
+### Retry Strategy
+- **Step failure**: Auto-retry up to 2 times
+- **Provider failure**: Switch from Gemini → Codex (vision tasks)
+- **Validation failure**: Flag errors, request human review or adjust parameters
+
+### Degradation Modes
+- **Low confidence vision analysis**: Flag uncertain elements for manual review
+- **Incomplete token coverage**: Document gaps, suggest manual token additions
+- **Mapping gaps**: Identify unmapped elements, request design simplification or custom components
+
+### Human-in-the-Loop
+- Low confidence items (< 0.7): Require manual confirmation
+- WCAG violations: Cannot proceed without fix or documented exception
+- Mapping gaps > 5%: Escalate to design review
+
+## Version & Maintenance
+
+**Version**: 1.0.0
+**Last Updated**: 2025-10-05
+**Changelog**:
+- Initial agent definition
+- Multi-modal vision provider integration (Gemini Vision, Codex -i)
+- W3C Design Tokens compliance
+- WCAG 2.1 AA quality gates
+- Flow control specification for 3 design phases
+
+Your role is to execute design tasks systematically through defined flow control steps, transforming visual concepts into production-ready design artifacts. Prioritize quality gates, accessibility compliance, and seamless handoff to implementation teams. Leverage multi-modal capabilities strategically: Gemini Vision for understanding, Codex for structured generation. Maintain observability and enable human review when confidence is low.
--- a/.claude/commands/workflow/design/auto.md
+++ b/.claude/commands/workflow/design/auto.md
@@ -0,0 +1,337 @@
+---
+name: auto
+description: Orchestrate complete UI design refinement workflow from style extraction to brainstorming integration
+usage: /workflow:design:auto --session <session_id> --images "<glob>" --pages "<list>" [--interactive] [--variants <count>]
+argument-hint: "--session WFS-session-id --images \"refs/*.png\" --pages \"dashboard,auth\" [--interactive] [--variants 2]"
+examples:
+  - /workflow:design:auto --session WFS-auth --images "design-refs/*.png" --pages "login,register" --interactive
+  - /workflow:design:auto --session WFS-dashboard --images "refs/*.jpg" --pages "dashboard" --variants 3
+allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*)
+---
+
+# UI Design Auto Workflow Command
+
+## Overview
+Complete autonomous orchestration of UI design refinement workflow: style extraction → consolidation → UI generation → brainstorming integration.
+
+## Coordinator Role
+**Pure orchestrator following /workflow:plan pattern**: Execute 4 design commands in sequence with TodoWrite-driven auto-continuation, no user intervention required.
+
+## Execution Model - Auto-Continue Workflow
+
+This workflow runs **fully autonomously** once triggered:
+
+1. **User triggers**: `/workflow:design:auto --session WFS-xxx --images "refs/*.png" --pages "dashboard,auth"`
+2. **Phase 1 executes** (style-extract) → Reports output → Auto-continues
+3. **Phase 2 executes** (style-consolidate) → Reports output → Auto-continues
+4. **Phase 3 executes** (ui-generate) → Reports output → Auto-continues
+5. **Phase 4 executes** (design-update) → Reports final summary
+
+**Auto-Continue Mechanism**:
+- TodoWrite tracks current phase status
+- After each phase completion, automatically executes next pending phase
+- **No user action required** - workflow runs end-to-end autonomously
+- Progress updates shown at each phase for visibility
+
+## Core Rules
+
+1. **Start Immediately**: First action is TodoWrite initialization, second action is Phase 1 command execution
+2. **No Preliminary Analysis**: Do not read files or validate before Phase 1 (commands handle their own validation)
+3. **Parse Every Output**: Extract required data from each command's output for next phase
+4. **Auto-Continue via TodoWrite**: Check TodoWrite status to execute next pending phase automatically
+5. **Track Progress**: Update TodoWrite after every phase completion
+
+## Parameter Requirements
+
+**Required Parameters**:
+- `--session <session_id>`: Active workflow session ID
+- `--images "<glob_pattern>"`: Reference image paths for style extraction
+- `--pages "<page_list>"`: Comma-separated list of pages to generate
+
+**Optional Parameters**:
+- `--interactive`: Enable interactive style variant selection (default: auto-select first variant)
+- `--variants <count>`: Number of UI variants per page (default: 1)
+
+## 4-Phase Execution
+
+### Phase 1: Style Extraction
+**Command**: `SlashCommand(command="/workflow:design:style-extract --session {session_id} --images \"{image_glob}\"")`
+
+**Parse Output**:
+- Verify: `.design/style-extraction/style-cards.json` created
+- Extract: `style_cards_count` from output message
+
+**Validation**:
+- Style cards successfully generated
+- At least one style variant available
+
+**TodoWrite**: Mark phase 1 completed, phase 2 in_progress
+
+**After Phase 1**: Report to user, auto-continue to Phase 2
+
+```
+Phase 1 Complete: Style Extraction
+Style cards generated: {count}
+Location: .workflow/WFS-{session}/.design/style-extraction/
+
+Continuing to Phase 2: Style Consolidation...
+```
+
+---
+
+### Phase 2: Style Consolidation
+**Command Construction**:
+
+```bash
+IF --interactive flag present:
+    command = "/workflow:design:style-consolidate --session {session_id} --interactive"
+ELSE:
+    # Auto-select first variant
+    command = "/workflow:design:style-consolidate --session {session_id} --variants \"variant-1\""
+```
+
+**Command**: `SlashCommand(command="{constructed_command}")`
+
+**Parse Output**:
+- Verify: `.design/style-consolidation/design-tokens.json` created
+- Extract: `token_count`, `validation_status` from output message
+
+**Validation**:
+- Design tokens finalized
+- Validation report shows no critical errors
+
+**TodoWrite**: Mark phase 2 completed, phase 3 in_progress
+
+**After Phase 2**: Report to user, auto-continue to Phase 3
+
+```
+Phase 2 Complete: Style Consolidation
+Design tokens: {count}
+Validation: {pass|warnings}
+Location: .workflow/WFS-{session}/.design/style-consolidation/
+
+Continuing to Phase 3: UI Generation...
+```
+
+---
+
+### Phase 3: UI Generation
+**Command Construction**:
+
+```bash
+variants_flag = --variants present ? "--variants {variants_count}" : ""
+command = "/workflow:design:ui-generate --session {session_id} --pages \"{page_list}\" {variants_flag}"
+```
+
+**Command**: `SlashCommand(command="{constructed_command}")`
+
+**Parse Output**:
+- Verify: `.design/prototypes/*.html` files created
+- Extract: `prototype_count`, `page_list` from output message
+
+**Validation**:
+- All requested pages generated
+- HTML and CSS files present for each variant
+
+**TodoWrite**: Mark phase 3 completed, phase 4 in_progress
+
+**After Phase 3**: Report to user, auto-continue to Phase 4
+
+```
+Phase 3 Complete: UI Generation
+Prototypes generated: {count}
+Pages: {page_list}
+Location: .workflow/WFS-{session}/.design/prototypes/
+
+Continuing to Phase 4: Design System Integration...
+```
+
+---
+
+### Phase 4: Design System Integration
+**Command**: `SlashCommand(command="/workflow:design:design-update --session {session_id}")`
+
+**Parse Output**:
+- Verify: `synthesis-specification.md` updated
+- Verify: `ui-designer/style-guide.md` created/updated
+
+**Validation**:
+- Brainstorming artifacts successfully updated
+- Design system references integrated
+
+**TodoWrite**: Mark phase 4 completed
+
+**Return to User**:
+```
+UI Design Refinement Complete for session: WFS-{session}
+
+Design System Summary:
+- Tokens: {token_count} (OKLCH-based)
+- Prototypes: {prototype_count} ({page_list})
+- Validation: {pass|warnings}
+
+Updated Artifacts:
+✓ synthesis-specification.md (UI/UX Guidelines section)
+✓ ui-designer/style-guide.md (comprehensive style guide)
+✓ Design tokens ready for task generation
+
+Location: .workflow/WFS-{session}/.design/
+
+Next Steps:
+1. Review prototypes: .workflow/WFS-{session}/.design/prototypes/
+2. Continue to planning: /workflow:plan [--agent] "<task description>"
+   (The plan phase will automatically discover and utilize the design system)
+```
+
+## TodoWrite Pattern
+
+```javascript
+// Initialize (before Phase 1)
+TodoWrite({todos: [
+  {"content": "Execute style extraction from reference images", "status": "in_progress", "activeForm": "Executing style extraction"},
+  {"content": "Execute style consolidation and token validation", "status": "pending", "activeForm": "Executing style consolidation"},
+  {"content": "Execute UI prototype generation", "status": "pending", "activeForm": "Executing UI generation"},
+  {"content": "Execute design system integration to brainstorming", "status": "pending", "activeForm": "Executing design system integration"}
+]})
+
+// After Phase 1
+TodoWrite({todos: [
+  {"content": "Execute style extraction from reference images", "status": "completed", "activeForm": "Executing style extraction"},
+  {"content": "Execute style consolidation and token validation", "status": "in_progress", "activeForm": "Executing style consolidation"},
+  {"content": "Execute UI prototype generation", "status": "pending", "activeForm": "Executing UI generation"},
+  {"content": "Execute design system integration to brainstorming", "status": "pending", "activeForm": "Executing design system integration"}
+]})
+
+// Continue pattern for Phase 2, 3, 4...
+```
+
+## Parameter Processing
+
+### Session Validation
+```bash
+# Verify active session
+CHECK: .workflow/.active-* marker files
+VERIFY: session_id parameter matches active session
+IF mismatch:
+    ERROR: "Session {session_id} is not active. Active session: {active_session_id}"
+```
+
+### Image Glob Expansion
+```bash
+# Expand glob pattern
+expanded_paths = bash(ls {image_glob})
+IF no files found:
+    ERROR: "No images found matching pattern: {image_glob}"
+VALIDATE: All files are image formats (.png, .jpg, .jpeg, .webp)
+```
+
+### Page List Parsing
+```bash
+# Parse comma-separated page list
+pages = split(page_list, ",")
+TRIM: whitespace from each page name
+VALIDATE: page_list not empty
+```
+
+## Data Flow
+
+```
+User Input
+  ├── session_id
+  ├── image_glob → expanded_image_paths
+  ├── page_list → parsed_pages[]
+  ├── --interactive → interactive_mode (bool)
+  └── --variants → variants_count (int)
+    ↓
+Phase 1: style-extract
+  Input: session_id, expanded_image_paths
+  Output: style-cards.json
+    ↓
+Phase 2: style-consolidate
+  Input: session_id, interactive_mode | auto-select
+  Output: design-tokens.json, style-guide.md, tailwind.config.js
+    ↓
+Phase 3: ui-generate
+  Input: session_id, parsed_pages[], variants_count
+  Output: {page}-variant-{n}.html/css for each page
+    ↓
+Phase 4: design-update
+  Input: session_id
+  Output: Updated synthesis-specification.md, ui-designer/style-guide.md
+    ↓
+Return summary to user
+```
+
+## Error Handling
+
+**Phase Execution Failures**:
+- **Keep phase `in_progress`**: Do not proceed to next phase
+- **Report error to user**: Include specific failure message from command
+- **Provide recovery instructions**: Suggest manual command execution with corrected parameters
+
+**Common Errors**:
+1. **Session not found**: Verify session exists and is active
+2. **No images found**: Check image glob pattern and file paths
+3. **Style extraction failed**: Retry with different images or manual style description
+4. **Consolidation validation errors**: Review validation-report.json and address token issues
+5. **UI generation failed**: Check synthesis-specification.md for requirements clarity
+6. **Integration conflicts**: Review synthesis-specification.md edit conflicts
+
+## Workflow Position
+
+**In Complete Development Flow**:
+```
+/workflow:brainstorm:auto-parallel "{topic}"
+    ↓ Generates synthesis-specification.md (WHAT)
+    ↓
+/workflow:design:auto --session WFS-xxx --images "refs/*.png" --pages "dashboard,auth"
+    ↓ Refines visual design (WHAT → Visual Spec)
+    ↓
+/workflow:plan [--agent] "{task description}"
+    ↓ Generates task breakdown (HOW)
+    ↓
+/workflow:execute
+    ↓ Implements tasks with design system
+```
+
+**Key Benefits**:
+1. **Visual Validation**: Users confirm design before implementation
+2. **Token Enforcement**: Implementation strictly follows design system
+3. **Accessibility**: WCAG AA validated at design phase
+4. **Consistency**: Single source of truth for visual design
+
+## Coordinator Checklist
+
+✅ Initialize TodoWrite before any command execution
+✅ Validate session parameter before Phase 1
+✅ Expand image glob to concrete paths
+✅ Parse page list to array
+✅ Execute Phase 1 immediately (no preliminary analysis)
+✅ Parse style card count from Phase 1 output
+✅ Construct Phase 2 command based on --interactive flag
+✅ Parse token count and validation status from Phase 2
+✅ Construct Phase 3 command with variants parameter
+✅ Parse prototype count from Phase 3 output
+✅ Execute Phase 4 design system integration
+✅ Verify all artifacts updated successfully
+✅ Update TodoWrite after each phase
+✅ After each phase, automatically continue to next phase based on TodoWrite status
+
+## Integration Notes
+
+**Seamless Workflow Transition**:
+- Design phase is **optional but recommended** for UI-heavy projects
+- Can be skipped entirely if visual design is not critical
+- Brainstorming → Plan flow still works without design phase
+- Design artifacts automatically discovered by task-generate if present
+
+**Use Cases**:
+- **Use design workflow**: User-facing applications, design systems, brand-critical UIs
+- **Skip design workflow**: Backend APIs, CLI tools, prototypes, MVPs
+
+**Artifact Discovery**:
+- `task-generate` automatically detects `.design/` directory
+- If present, adds design system to task context.artifacts
+- UI tasks automatically include `load_design_tokens` in flow_control
+
+This design ensures backward compatibility while enabling powerful visual design workflows when needed.
--- a/.claude/commands/workflow/design/design-update.md
+++ b/.claude/commands/workflow/design/design-update.md
@@ -0,0 +1,348 @@
+---
+name: design-update
+description: Update brainstorming artifacts with finalized design system
+usage: /workflow:design:design-update --session <session_id> [--selected-prototypes "<list>"]
+argument-hint: "--session WFS-session-id [--selected-prototypes \"dashboard-variant-1,auth-variant-2\"]"
+examples:
+  - /workflow:design:design-update --session WFS-auth
+  - /workflow:design:design-update --session WFS-dashboard --selected-prototypes "dashboard-variant-1"
+allowed-tools: Read(*), Write(*), TodoWrite(*), Glob(*), Bash(*)
+---
+
+# Design Update Command
+
+## Overview
+Synchronize finalized design system (tokens, style guide, selected prototypes) back to brainstorming artifacts, preparing for `/workflow:plan` phase consumption.
+
+## Core Philosophy
+- **Main Claude Execution**: Direct updates by main Claude (avoid Agent context loss, following synthesis pattern)
+- **Reference-Based Integration**: Use @ references, not content duplication
+- **Synthesis Alignment**: Update synthesis-specification.md UI/UX Guidelines section
+- **UI Designer Sync**: Mirror design system to ui-designer/style-guide.md
+- **Plan-Ready Output**: Ensure design artifacts discoverable by task-generate
+
+## Execution Protocol
+
+### Phase 1: Session & Design System Validation
+```bash
+# Validate session and verify design system completeness
+CHECK: .workflow/.active-* marker files
+VALIDATE: session_id matches active session
+
+VERIFY required artifacts:
+- .design/style-consolidation/design-tokens.json
+- .design/style-consolidation/style-guide.md
+- .design/style-consolidation/tailwind.config.js
+- .design/prototypes/*.html (at least one prototype)
+
+IF --selected-prototypes provided:
+    VALIDATE: Specified prototypes exist
+ELSE:
+    AUTO-SELECT: Use all generated prototypes
+```
+
+### Phase 2: Load Design System Context
+**Direct Claude Code Execution** (no Agent invocation)
+
+```bash
+# Load all design system artifacts
+Read(.workflow/WFS-{session}/.design/style-consolidation/design-tokens.json)
+Read(.workflow/WFS-{session}/.design/style-consolidation/style-guide.md)
+Read(.workflow/WFS-{session}/.design/style-consolidation/style-philosophy.md)
+Read(.workflow/WFS-{session}/.design/style-consolidation/tailwind.config.js)
+
+# Load selected prototype files
+FOR each selected_prototype IN selected_prototypes:
+    Read(.workflow/WFS-{session}/.design/prototypes/{selected_prototype}.html)
+    Read(.workflow/WFS-{session}/.design/prototypes/{selected_prototype}-notes.md)
+
+# Load target brainstorming artifacts
+Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md)
+Read(.workflow/WFS-{session}/.brainstorming/ui-designer/analysis.md) [if exists]
+```
+
+### Phase 3: Update Synthesis Specification
+**Direct Write by Main Claude**
+
+Update `.brainstorming/synthesis-specification.md`:
+
+```markdown
+## UI/UX Guidelines
+
+### Design System Reference
+**Finalized Design Tokens**: @../.design/style-consolidation/design-tokens.json
+**Style Guide**: @../.design/style-consolidation/style-guide.md
+**Tailwind Configuration**: @../.design/style-consolidation/tailwind.config.js
+
+### Design Philosophy
+[Insert content from style-philosophy.md]
+
+### Token System Overview
+**Colors**: OKLCH-based color system with semantic naming
+- Brand: primary, secondary, accent
+- Surface: background, elevated, sunken
+- Semantic: success, warning, error, info
+
+**Typography**: {font_family_count} font families, {scale_count}-step scale
+- Heading: {heading_font}
+- Body: {body_font}
+- Monospace: {mono_font}
+
+**Spacing**: {scale_count}-step scale ({min}rem to {max}rem)
+
+**Components**: Border radius, shadows, and component tokens defined
+
+### Implementation Requirements
+**Token Adherence**: All UI implementations MUST use design token CSS custom properties
+**Accessibility**: WCAG AA compliance validated in design-tokens.json
+**Responsive**: Mobile-first design using token-based breakpoints
+**Component Patterns**: Follow patterns documented in style-guide.md
+
+### Reference Prototypes
+[For each selected prototype:]
+- **{page_name}**: @../.design/prototypes/{prototype}.html
+  - Layout: {layout_description from notes}
+  - Components: {component_list from notes}
+  - Token Usage: {token_usage_summary from notes}
+
+### Design System Assets (for task-generate consumption)
+```json
+{
+  "design_tokens": ".design/style-consolidation/design-tokens.json",
+  "style_guide": ".design/style-consolidation/style-guide.md",
+  "tailwind_config": ".design/style-consolidation/tailwind.config.js",
+  "prototypes": [
+    ".design/prototypes/{prototype-1}.html",
+    ".design/prototypes/{prototype-2}.html"
+  ]
+}
+```
+```
+
+**Implementation**:
+```bash
+# Edit synthesis-specification.md
+Edit(
+  file_path=".workflow/WFS-{session}/.brainstorming/synthesis-specification.md",
+  old_string="## UI/UX Guidelines\n[existing content or empty]",
+  new_string="## UI/UX Guidelines\n\n[new design system content with @ references]"
+)
+```
+
+### Phase 4: Update UI Designer Analysis
+**Create or update** `.brainstorming/ui-designer/style-guide.md`:
+
+```markdown
+# UI Designer Style Guide
+
+## Design System Integration
+This style guide integrates the finalized design system from the design refinement phase.
+
+**Source Design Tokens**: @../../.design/style-consolidation/design-tokens.json
+**Source Style Guide**: @../../.design/style-consolidation/style-guide.md
+
+## Design Philosophy
+[Content from style-philosophy.md]
+
+## Design Tokens Reference
+For complete token definitions, see: @../../.design/style-consolidation/design-tokens.json
+
+### Color System
+[Summary of color tokens]
+
+### Typography System
+[Summary of typography tokens]
+
+### Spacing System
+[Summary of spacing tokens]
+
+### Component Tokens
+[Summary of component tokens: border-radius, shadows]
+
+## Component Patterns
+[Reference to style-guide.md component patterns]
+
+## Implementation Guidelines
+1. **Use CSS Custom Properties**: All styles reference design tokens
+2. **Follow Semantic HTML**: Use HTML5 semantic elements
+3. **Maintain Accessibility**: WCAG AA compliance required
+4. **Responsive Design**: Mobile-first with token-based breakpoints
+
+## Reference Prototypes
+[Links to selected prototypes with descriptions]
+
+---
+*Auto-generated by /workflow:design:design-update*
+*Last updated: {timestamp}*
+```
+
+**Implementation**:
+```bash
+Write(
+  file_path=".workflow/WFS-{session}/.brainstorming/ui-designer/style-guide.md",
+  content="[generated style guide content with @ references]"
+)
+```
+
+### Phase 5: Create Design System Symlinks (Optional)
+**For easier task-generate discovery**
+
+```bash
+# Create read-only mirror of key design files in brainstorming space
+bash(cd .workflow/WFS-{session}/.brainstorming && \
+     ln -s ../.design/style-consolidation/design-tokens.json design-tokens.json && \
+     ln -s ../.design/style-consolidation/style-guide.md design-style-guide.md)
+```
+
+### Phase 6: TodoWrite Integration
+```javascript
+TodoWrite({
+  todos: [
+    {
+      content: "Validate session and design system completeness",
+      status: "completed",
+      activeForm: "Validating design system"
+    },
+    {
+      content: "Load design tokens, style guide, and selected prototypes",
+      status: "completed",
+      activeForm: "Loading design artifacts"
+    },
+    {
+      content: "Update synthesis-specification.md with design system references",
+      status: "completed",
+      activeForm: "Updating synthesis specification"
+    },
+    {
+      content: "Create or update ui-designer/style-guide.md",
+      status: "completed",
+      activeForm: "Updating UI designer style guide"
+    },
+    {
+      content: "Create design system symlinks for task-generate discovery",
+      status: "completed",
+      activeForm: "Creating artifact symlinks"
+    }
+  ]
+});
+```
+
+## Output Structure
+
+**Updated Files**:
+```
+.workflow/WFS-{session}/.brainstorming/
+├── synthesis-specification.md       # Updated with UI/UX Guidelines section
+├── ui-designer/
+│   └── style-guide.md               # New or updated comprehensive style guide
+├── design-tokens.json               # Symlink to ../.design/style-consolidation/design-tokens.json
+└── design-style-guide.md            # Symlink to ../.design/style-consolidation/style-guide.md
+```
+
+**Reference Structure** (@ references in synthesis-specification.md):
+- `@../.design/style-consolidation/design-tokens.json`
+- `@../.design/style-consolidation/style-guide.md`
+- `@../.design/style-consolidation/tailwind.config.js`
+- `@../.design/prototypes/{prototype}.html`
+
+## Integration with task-generate
+
+After this update, `/workflow:tools:task-generate` will discover:
+
+**In context.artifacts**:
+```json
+{
+  "artifacts": [
+    {
+      "type": "synthesis_specification",
+      "path": ".brainstorming/synthesis-specification.md"
+    },
+    {
+      "type": "design_tokens",
+      "path": ".design/style-consolidation/design-tokens.json"
+    },
+    {
+      "type": "style_guide",
+      "path": ".design/style-consolidation/style-guide.md"
+    },
+    {
+      "type": "tailwind_config",
+      "path": ".design/style-consolidation/tailwind.config.js"
+    },
+    {
+      "type": "ui_prototypes",
+      "paths": [
+        ".design/prototypes/dashboard-variant-1.html",
+        ".design/prototypes/auth-variant-2.html"
+      ]
+    }
+  ]
+}
+```
+
+**In flow_control.pre_analysis** (for UI tasks):
+```json
+{
+  "step": "load_design_tokens",
+  "action": "Load design system tokens and style guide",
+  "commands": [
+    "bash(cat .workflow/WFS-{session}/.design/style-consolidation/design-tokens.json)",
+    "bash(cat .workflow/WFS-{session}/.design/style-consolidation/style-guide.md)"
+  ],
+  "output_to": "design_system_context",
+  "on_error": "warn"
+}
+```
+
+## Error Handling
+- **Missing design tokens**: Error, run `/workflow:design:style-consolidate` first
+- **Missing prototypes**: Error, run `/workflow:design:ui-generate` first
+- **synthesis-specification.md not found**: Warning, create minimal version
+- **Edit conflicts**: Preserve existing content, append design system section
+- **Symlink failures**: Warning only, continue with @ references
+
+## Validation Checks
+After update, verify:
+- [ ] synthesis-specification.md contains UI/UX Guidelines section
+- [ ] UI/UX Guidelines include @ references to design system files
+- [ ] ui-designer/style-guide.md created or updated
+- [ ] design-tokens.json symlink created (if applicable)
+- [ ] All referenced files exist and are readable
+
+## Integration Points
+- **Input**: design-tokens.json, style-guide.md, prototypes from design phase
+- **Output**: Updated synthesis-specification.md, ui-designer/style-guide.md
+- **Next Phase**: `/workflow:plan` can now discover and utilize design system
+
+## Completion Message
+
+```
+Design system update complete for session: WFS-{session}
+
+Updated artifacts:
+✓ synthesis-specification.md - UI/UX Guidelines section added
+✓ ui-designer/style-guide.md - Comprehensive style guide created
+✓ Design system references: @ notation for all design files
+
+Design system assets ready for task generation:
+- design-tokens.json ({token_count} tokens)
+- style-guide.md (comprehensive component patterns)
+- tailwind.config.js (Tailwind theme extension)
+- {prototype_count} reference prototypes
+
+Next: /workflow:plan [--agent] "<task description>"
+      The plan phase will automatically discover and utilize the design system.
+```
+
+## Main Claude Direct Execution Rationale
+
+This command is executed directly by main Claude (not delegated to an Agent) because:
+
+1. **Context Preservation**: Main Claude has full session context and conversation memory
+2. **Integration Complexity**: Requires understanding multiple artifact relationships
+3. **Reference Accuracy**: @ reference generation needs precise path resolution
+4. **Synthesis Pattern**: Follows the same direct-execution pattern as `/workflow:brainstorm:synthesis`
+5. **Minimal Transformation**: Primarily reference integration, not generative analysis
+6. **Error Recovery**: Main Claude can better handle edit conflicts and missing files
+
+This approach ensures reliable, context-aware integration without Agent handoff overhead.
--- a/.claude/commands/workflow/design/style-consolidate.md
+++ b/.claude/commands/workflow/design/style-consolidate.md
@@ -0,0 +1,319 @@
+---
+name: style-consolidate
+description: Consolidate user-selected style variants into unified design system
+usage: /workflow:design:style-consolidate --session <session_id> [--interactive] [--variants "<ids>"]
+argument-hint: "--session WFS-session-id [--interactive] [--variants \"variant-1,variant-3\"]"
+examples:
+  - /workflow:design:style-consolidate --session WFS-auth --interactive
+  - /workflow:design:style-consolidate --session WFS-dashboard --variants "variant-1,variant-3"
+allowed-tools: Task(conceptual-planning-agent), TodoWrite(*), Read(*), Write(*), Bash(*)
+---
+
+# Style Consolidation Command
+
+## Overview
+Consolidate user-selected style variants into a unified, production-ready design system with validated CSS tokens and comprehensive style guide.
+
+## Core Philosophy
+- **User-Driven Selection**: Interactive mode for visual style card selection
+- **Gemini Clustering**: Semantic naming and style philosophy consolidation
+- **Codex Validation**: Token consistency, coverage, and accessibility checks
+- **Design System Output**: production-ready tokens + comprehensive style guide
+
+## Execution Protocol
+
+### Phase 1: Session & Style Cards Loading
+```bash
+# Validate session and load extracted style cards
+CHECK: .workflow/.active-* marker files
+VALIDATE: session_id matches active session
+VERIFY: .design/style-extraction/style-cards.json exists
+LOAD: style-cards.json for user selection
+```
+
+### Phase 2: User Selection (Interactive Mode)
+**Interactive Mode**: `--interactive` flag enables visual selection interface
+
+```bash
+IF --interactive:
+    DISPLAY: Style card previews with descriptions
+    PROMPT: "Select preferred style variants (comma-separated IDs):"
+    COLLECT: user_selection (e.g., "variant-1,variant-3")
+ELSE IF --variants provided:
+    PARSE: variant IDs from --variants flag
+ELSE:
+    ERROR: "Must provide either --interactive or --variants parameter"
+```
+
+### Phase 3: Gemini Style Philosophy Consolidation
+**Agent Invocation**: Task(conceptual-planning-agent) with Gemini capabilities
+
+```bash
+Task(conceptual-planning-agent): "
+[FLOW_CONTROL]
+
+Consolidate selected style variants into unified design philosophy
+
+## Context Loading
+ASSIGNED_TASK: style-consolidation
+OUTPUT_LOCATION: .workflow/WFS-{session}/.design/style-consolidation/
+SELECTED_VARIANTS: {user_selected_variant_ids}
+
+## Flow Control Steps
+1. **load_selected_variants**
+   - Action: Load user-selected style card data
+   - Command: Read(.workflow/WFS-{session}/.design/style-extraction/style-cards.json)
+   - Filter: Extract only selected variant IDs
+   - Output: selected_style_data
+
+2. **load_design_context**
+   - Action: Load brainstorming design context
+   - Command: Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md) || Read(.workflow/WFS-{session}/.brainstorming/ui-designer/analysis.md)
+   - Output: design_context
+   - Optional: true
+
+3. **consolidate_style_philosophy_gemini**
+   - Action: Synthesize unified style philosophy and semantic naming
+   - Command: bash(cd .workflow/WFS-{session} && ~/.claude/scripts/gemini-wrapper --approval-mode yolo -p \"
+     PURPOSE: Synthesize unified design philosophy from selected style variants
+     TASK: Create coherent style narrative, consolidate naming conventions, define design principles
+     MODE: write
+     CONTEXT: @{.design/style-extraction/style-cards.json,.brainstorming/synthesis-specification.md}
+     EXPECTED:
+     1. Unified design philosophy statement
+     2. Consolidated semantic naming for colors (e.g., 'brand-primary', 'surface-elevated')
+     3. Typography scale rationale
+     4. Spacing system principles
+     5. Component design guidelines
+     RULES: Ensure consistency, maintain accessibility mindset, align with brainstorming synthesis
+     \")
+   - Output: style-philosophy.md
+
+## Consolidation Requirements
+**Design Philosophy**: Clear statement of visual design principles
+**Semantic Naming**: User-centric token names (not generic color-1, color-2)
+**Accessibility**: Ensure WCAG AA contrast ratios for text colors
+**Consistency**: Unified token naming conventions across all categories
+
+## Expected Deliverables
+1. **style-philosophy.md**: Design philosophy and naming rationale
+"
+```
+
+### Phase 4: Codex Token Validation & Finalization
+**Agent Invocation**: Task(conceptual-planning-agent) with Codex capabilities
+
+```bash
+Task(conceptual-planning-agent): "
+[FLOW_CONTROL]
+
+Validate and finalize production-ready design tokens
+
+## Context Loading
+INPUT_PHILOSOPHY: .workflow/WFS-{session}/.design/style-consolidation/style-philosophy.md
+INPUT_TOKENS: .workflow/WFS-{session}/.design/style-extraction/design-tokens.json
+SELECTED_VARIANTS: {user_selected_variant_ids}
+OUTPUT_LOCATION: .workflow/WFS-{session}/.design/style-consolidation/
+
+## Flow Control Steps
+1. **load_consolidation_inputs**
+   - Action: Load style philosophy and extracted tokens
+   - Commands:
+     - Read(.workflow/WFS-{session}/.design/style-consolidation/style-philosophy.md)
+     - Read(.workflow/WFS-{session}/.design/style-extraction/design-tokens.json)
+     - Read(.workflow/WFS-{session}/.design/style-extraction/style-cards.json)
+   - Output: consolidation_inputs
+
+2. **validate_and_finalize_tokens_codex**
+   - Action: Merge selected variants, validate consistency, generate final tokens
+   - Command: bash(codex -C .workflow/WFS-{session}/.design/style-consolidation --full-auto exec \"
+     PURPOSE: Finalize production-ready design tokens with validation
+     TASK: Merge selected variant tokens, validate consistency, check accessibility, generate final design system
+     MODE: auto
+     CONTEXT: @{style-philosophy.md,../style-extraction/design-tokens.json,../style-extraction/style-cards.json,../../../CLAUDE.md}
+     EXPECTED:
+     1. design-tokens.json - Final validated CSS token definitions
+     2. tailwind.config.js - Complete Tailwind configuration
+     3. style-guide.md - Comprehensive design system documentation
+     4. validation-report.json - Token consistency and accessibility audit
+     RULES:
+     - Use semantic names from style-philosophy.md
+     - Validate WCAG AA contrast ratios (4.5:1 for text, 3:1 for UI)
+     - Ensure complete token coverage (colors, typography, spacing, shadows, borders)
+     - Generate CSS custom properties and Tailwind theme extension
+     - Include usage examples in style-guide.md
+     \" --skip-git-repo-check -s danger-full-access)
+   - Output: design-tokens.json, tailwind.config.js, style-guide.md, validation-report.json
+
+## Validation Requirements
+**Consistency Checks**:
+- All color tokens use OKLCH format
+- Spacing scale follows consistent ratio (e.g., 1.5x or 2x progression)
+- Typography scale includes appropriate line-heights
+- All tokens have semantic names
+
+**Accessibility Checks**:
+- Text colors meet WCAG AA contrast (4.5:1)
+- UI component colors meet WCAG AA contrast (3:1)
+- Focus indicators have sufficient visibility
+- Color is not sole differentiator
+
+**Coverage Checks**:
+- Primary, secondary, accent color families
+- Surface colors (background, elevated, sunken)
+- Semantic colors (success, warning, error, info)
+- Typography scale (xs to 4xl)
+- Spacing scale (0.25rem to 6rem)
+- Border radius options
+- Shadow layers
+
+## Expected Deliverables
+1. **design-tokens.json**: Production-ready CSS token definitions
+2. **tailwind.config.js**: Complete Tailwind theme configuration
+3. **style-guide.md**: Design system documentation with usage examples
+4. **validation-report.json**: Validation audit results
+"
+```
+
+### Phase 5: TodoWrite Integration
+```javascript
+TodoWrite({
+  todos: [
+    {
+      content: "Load session and style cards from extraction phase",
+      status: "completed",
+      activeForm: "Loading style cards"
+    },
+    {
+      content: "Collect user style variant selection (interactive or CLI)",
+      status: "completed",
+      activeForm: "Collecting user selection"
+    },
+    {
+      content: "Consolidate style philosophy using Gemini",
+      status: "completed",
+      activeForm: "Consolidating style philosophy"
+    },
+    {
+      content: "Validate and finalize tokens using Codex",
+      status: "completed",
+      activeForm: "Validating and finalizing tokens"
+    },
+    {
+      content: "Generate design system documentation",
+      status: "completed",
+      activeForm: "Generating design system docs"
+    }
+  ]
+});
+```
+
+## Output Structure
+
+```
+.workflow/WFS-{session}/.design/style-consolidation/
+├── style-philosophy.md          # Unified design philosophy (Gemini)
+├── design-tokens.json           # Final validated CSS tokens (Codex)
+├── tailwind.config.js           # Tailwind theme configuration (Codex)
+├── style-guide.md               # Design system documentation (Codex)
+└── validation-report.json       # Accessibility & consistency audit (Codex)
+```
+
+### design-tokens.json Format
+```json
+{
+  "colors": {
+    "brand": {
+      "primary": "oklch(0.45 0.20 270 / 1)",
+      "secondary": "oklch(0.60 0.15 200 / 1)",
+      "accent": "oklch(0.65 0.18 30 / 1)"
+    },
+    "surface": {
+      "background": "oklch(0.98 0.01 270 / 1)",
+      "elevated": "oklch(1.00 0.00 0 / 1)",
+      "sunken": "oklch(0.95 0.02 270 / 1)"
+    },
+    "semantic": {
+      "success": "oklch(0.55 0.15 150 / 1)",
+      "warning": "oklch(0.70 0.18 60 / 1)",
+      "error": "oklch(0.50 0.20 20 / 1)",
+      "info": "oklch(0.60 0.15 240 / 1)"
+    }
+  },
+  "typography": {
+    "font_family": {
+      "heading": "Inter, system-ui, sans-serif",
+      "body": "Inter, system-ui, sans-serif",
+      "mono": "Fira Code, 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"
+    },
+    "line_height": {
+      "tight": "1.25",
+      "normal": "1.5",
+      "relaxed": "1.75"
+    }
+  },
+  "spacing": {
+    "0": "0",
+    "1": "0.25rem",
+    "2": "0.5rem",
+    "3": "0.75rem",
+    "4": "1rem",
+    "6": "1.5rem",
+    "8": "2rem",
+    "12": "3rem",
+    "16": "4rem",
+    "24": "6rem"
+  },
+  "border_radius": {
+    "none": "0",
+    "sm": "0.25rem",
+    "md": "0.5rem",
+    "lg": "0.75rem",
+    "xl": "1rem",
+    "2xl": "1.5rem",
+    "full": "9999px"
+  },
+  "shadow": {
+    "sm": "0 1px 2px oklch(0.00 0.00 0 / 0.05)",
+    "md": "0 4px 6px oklch(0.00 0.00 0 / 0.07), 0 2px 4px oklch(0.00 0.00 0 / 0.06)",
+    "lg": "0 10px 15px oklch(0.00 0.00 0 / 0.1), 0 4px 6px oklch(0.00 0.00 0 / 0.05)",
+    "xl": "0 20px 25px oklch(0.00 0.00 0 / 0.15), 0 10px 10px oklch(0.00 0.00 0 / 0.04)"
+  }
+}
+```
+
+## Error Handling
+- **No style cards found**: Run `/workflow:design:style-extract` first
+- **Invalid variant IDs**: Display available IDs and prompt re-selection
+- **Validation failures**: Report specific issues (contrast, coverage, consistency)
+- **Gemini/Codex execution errors**: Retry with fallback to manual token editing
+
+## Integration Points
+- **Input**: style-cards.json from `/workflow:design:style-extract`
+- **Output**: design-tokens.json for `/workflow:design:ui-generate`
+- **Context**: synthesis-specification.md, ui-designer/analysis.md
+
+## Next Steps
+After successful consolidation:
+```
+Style consolidation complete for session: WFS-{session}
+Design tokens validated and finalized
+
+Validation summary:
+- Colors: {count} (WCAG AA compliant: {pass_count}/{total_count})
+- Typography: {scale_count} sizes
+- Spacing: {scale_count} values
+- Accessibility: {pass|warnings}
+
+Next: /workflow:design:ui-generate --session WFS-{session} --pages "dashboard,auth"
+```
--- a/.claude/commands/workflow/design/style-extract.md
+++ b/.claude/commands/workflow/design/style-extract.md
@@ -0,0 +1,214 @@
+---
+name: style-extract
+description: Extract design style from reference images using Gemini Vision and Codex
+usage: /workflow:design:style-extract --session <session_id> --images "<glob_pattern>"
+argument-hint: "--session WFS-session-id --images \"path/to/*.png\""
+examples:
+  - /workflow:design:style-extract --session WFS-auth --images "design-refs/*.png"
+  - /workflow:design:style-extract --session WFS-dashboard --images "refs/dashboard-*.jpg"
+allowed-tools: Task(conceptual-planning-agent), TodoWrite(*), Read(*), Write(*), Bash(*), Glob(*)
+---
+
+# Style Extraction Command
+
+## Overview
+Extract design style elements from reference images using a hybrid approach: Gemini Vision for semantic understanding and Codex for structured CSS token generation.
+
+## Core Philosophy
+- **Visual Semantic Understanding**: Gemini Vision analyzes design style, typography, and composition
+- **Structured Token Generation**: Codex converts semantic analysis to OKLCH + CSS variables + Tailwind config
+- **Style Card System**: Generate reusable style cards for consolidation phase
+- **Multi-Image Support**: Process multiple reference images and extract common patterns
+
+## Execution Protocol
+
+### Phase 1: Session & Input Validation
+```bash
+# Validate session and locate images
+CHECK: .workflow/.active-* marker files
+VALIDATE: session_id matches active session
+EXPAND: glob pattern to concrete image paths
+VERIFY: at least one image file exists
+```
+
+### Phase 2: Gemini Vision Analysis
+**Agent Invocation**: Task(conceptual-planning-agent) with Gemini Vision capability
+
+```bash
+Task(conceptual-planning-agent): "
+[FLOW_CONTROL]
+
+Extract visual design semantics from reference images
+
+## Context Loading
+ASSIGNED_TASK: style-extraction
+OUTPUT_LOCATION: .workflow/WFS-{session}/.design/style-extraction/
+IMAGE_INPUTS: {expanded_image_paths}
+
+## Flow Control Steps
+1. **load_images_gemini**
+   - Action: Analyze reference images using Gemini Vision
+   - Command: bash(cd .workflow/WFS-{session} && ~/.claude/scripts/gemini-wrapper --approval-mode yolo -p \"
+     PURPOSE: Extract design style semantics from reference images
+     TASK: Analyze color palettes, typography, spacing, layout principles, component styles
+     MODE: write
+     CONTEXT: @{../../{image_paths}}
+     EXPECTED: JSON with semantic style description (colors with names, font characteristics, spacing scale, design philosophy)
+     RULES: Focus on extracting semantic meaning, not exact pixel values
+     \")
+   - Output: semantic_style_analysis.json
+
+2. **load_session_context**
+   - Action: Load brainstorming context for style alignment
+   - Command: Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md) || Read(.workflow/WFS-{session}/.brainstorming/ui-designer/analysis.md)
+   - Output: design_context
+   - Optional: true
+
+## Analysis Requirements
+**Semantic Extraction**: Identify design philosophy (minimalist, brutalist, neumorphic, etc.)
+**Color System**: Extract primary, secondary, accent colors with semantic names
+**Typography**: Font families, weights, scale (headings, body, small)
+**Spacing**: Identify spacing scale patterns
+**Components**: Border radius, shadows, button styles, card styles
+
+## Expected Deliverables
+1. **semantic_style_analysis.json**: Gemini Vision analysis results
+"
+```
+
+### Phase 3: Codex Structured Token Generation
+**Agent Invocation**: Task(conceptual-planning-agent) with Codex capabilities
+
+```bash
+Task(conceptual-planning-agent): "
+[FLOW_CONTROL]
+
+Convert semantic style analysis to structured CSS tokens
+
+## Context Loading
+INPUT_ANALYSIS: .workflow/WFS-{session}/.design/style-extraction/semantic_style_analysis.json
+OUTPUT_LOCATION: .workflow/WFS-{session}/.design/style-extraction/
+TECH_STACK_CONTEXT: CLAUDE.md, .claude/workflows/cli-templates/tech-stacks/*.md
+
+## Flow Control Steps
+1. **load_semantic_analysis**
+   - Action: Read Gemini Vision analysis
+   - Command: Read(.workflow/WFS-{session}/.design/style-extraction/semantic_style_analysis.json)
+   - Output: semantic_analysis
+
+2. **generate_css_tokens_codex**
+   - Action: Convert semantic analysis to structured CSS tokens
+   - Command: bash(codex -C .workflow/WFS-{session}/.design/style-extraction --full-auto exec \"
+     PURPOSE: Generate structured CSS design tokens from semantic analysis
+     TASK: Convert semantic color/typography/spacing to OKLCH CSS variables and Tailwind config
+     MODE: auto
+     CONTEXT: @{semantic_style_analysis.json,../../../../CLAUDE.md}
+     EXPECTED:
+     1. design-tokens.json with OKLCH color values, font stacks, spacing scale
+     2. tailwind-tokens.js with Tailwind config extension
+     3. style-cards.json with named style variants for user selection
+     RULES: Use OKLCH for colors, rem for spacing, maintain semantic naming, generate 2-3 style card variants
+     \" --skip-git-repo-check -s danger-full-access)
+   - Output: design-tokens.json, tailwind-tokens.js, style-cards.json
+
+## Token Requirements
+**Color Format**: OKLCH with fallback (e.g., \"oklch(0.65 0.15 270 / 1)\")
+**Spacing Scale**: rem-based (0.25rem, 0.5rem, 1rem, 1.5rem, 2rem, 3rem, 4rem, 6rem)
+**Typography Scale**: rem-based with line-height (xs, sm, base, lg, xl, 2xl, 3xl, 4xl)
+**Border Radius**: rem-based (none, sm, md, lg, xl, 2xl, full)
+**Shadows**: Layered shadows with OKLCH colors
+
+## Expected Deliverables
+1. **design-tokens.json**: Structured CSS token definitions
+2. **tailwind-tokens.js**: Tailwind configuration extension
+3. **style-cards.json**: Multiple style variants for user selection
+"
+```
+
+### Phase 4: TodoWrite Integration
+```javascript
+TodoWrite({
+  todos: [
+    {
+      content: "Validate session and locate reference images",
+      status: "completed",
+      activeForm: "Validating session and images"
+    },
+    {
+      content: "Extract visual semantics using Gemini Vision",
+      status: "completed",
+      activeForm: "Extracting visual semantics"
+    },
+    {
+      content: "Generate structured CSS tokens using Codex",
+      status: "completed",
+      activeForm: "Generating CSS tokens"
+    },
+    {
+      content: "Create style cards for consolidation phase",
+      status: "completed",
+      activeForm: "Creating style cards"
+    }
+  ]
+});
+```
+
+## Output Structure
+
+```
+.workflow/WFS-{session}/.design/style-extraction/
+├── semantic_style_analysis.json    # Gemini Vision semantic analysis
+├── design-tokens.json              # Structured CSS tokens (OKLCH)
+├── tailwind-tokens.js              # Tailwind config extension
+└── style-cards.json                # Style variants for user selection
+```
+
+### style-cards.json Format
+```json
+{
+  "style_cards": [
+    {
+      "id": "variant-1",
+      "name": "Modern Minimalist",
+      "description": "Clean, high contrast with bold typography",
+      "preview": {
+        "primary": "oklch(0.45 0.20 270 / 1)",
+        "background": "oklch(0.98 0.01 270 / 1)",
+        "font_heading": "Inter, system-ui, sans-serif",
+        "border_radius": "0.5rem"
+      }
+    },
+    {
+      "id": "variant-2",
+      "name": "Soft Neumorphic",
+      "description": "Subtle shadows with gentle colors",
+      "preview": {
+        "primary": "oklch(0.60 0.10 200 / 1)",
+        "background": "oklch(0.95 0.02 200 / 1)",
+        "font_heading": "Poppins, sans-serif",
+        "border_radius": "1rem"
+      }
+    }
+  ]
+}
+```
+
+## Error Handling
+- **No images found**: Report error and suggest correct glob pattern
+- **Gemini Vision failure**: Retry once, then fall back to manual style description
+- **Codex token generation failure**: Use default token template and report warning
+- **Invalid session**: Prompt user to start workflow session first
+
+## Integration Points
+- **Input**: Reference images (PNG, JPG, WebP)
+- **Output**: Style cards for `/workflow:design:style-consolidate`
+- **Context**: Optional synthesis-specification.md or ui-designer/analysis.md
+
+## Next Steps
+After successful extraction:
+```
+Style extraction complete for session: WFS-{session}
+Style cards generated: {count}
+
+Next: /workflow:design:style-consolidate --session WFS-{session} [--interactive]
+```
--- a/.claude/commands/workflow/design/ui-generate.md
+++ b/.claude/commands/workflow/design/ui-generate.md
@@ -0,0 +1,316 @@
+---
+name: ui-generate
+description: Generate UI prototypes using consolidated design tokens and synthesis specification
+usage: /workflow:design:ui-generate --session <session_id> --pages "<page_list>" [--variants <count>]
+argument-hint: "--session WFS-session-id --pages \"dashboard,auth,settings\" [--variants 2]"
+examples:
+  - /workflow:design:ui-generate --session WFS-auth --pages "login,register"
+  - /workflow:design:ui-generate --session WFS-dashboard --pages "dashboard" --variants 3
+allowed-tools: Task(conceptual-planning-agent), TodoWrite(*), Read(*), Write(*), Bash(*)
+---
+
+# UI Generation Command
+
+## Overview
+Generate production-ready UI prototypes (HTML/CSS) strictly adhering to consolidated design tokens and synthesis specification requirements.
+
+## Core Philosophy
+- **Token-Driven**: All styles reference design-tokens.json, no hardcoded values
+- **Specification-Aligned**: UI structure follows synthesis-specification.md requirements
+- **Codex Primary**: Code generation with strict token enforcement
+- **Gemini Variants**: Optional semantic layout variations
+- **Production-Ready**: Clean HTML5, semantic markup, accessibility attributes
+
+## Execution Protocol
+
+### Phase 1: Session & Requirements Loading
+```bash
+# Validate session and load design system
+CHECK: .workflow/.active-* marker files
+VALIDATE: session_id matches active session
+VERIFY: .design/style-consolidation/design-tokens.json exists
+PARSE: --pages parameter to page list
+SET: variants_count = --variants || 1
+```
+
+### Phase 2: Context Gathering
+**Load comprehensive context for UI generation**
+
+```bash
+LOAD: design-tokens.json (style system)
+LOAD: style-guide.md (usage guidelines)
+LOAD: synthesis-specification.md (functional requirements)
+LOAD: ui-designer/analysis.md (UX guidelines, optional)
+PARSE: page_requirements for each page in --pages list
+```
+
+### Phase 3: Codex UI Generation (Primary)
+**Agent Invocation**: Task(conceptual-planning-agent) with Codex capabilities
+
+```bash
+Task(conceptual-planning-agent): "
+[FLOW_CONTROL]
+
+Generate production-ready UI prototypes with strict design token adherence
+
+## Context Loading
+ASSIGNED_TASK: ui-prototype-generation
+OUTPUT_LOCATION: .workflow/WFS-{session}/.design/prototypes/
+TARGET_PAGES: {page_list}
+VARIANTS_PER_PAGE: {variants_count}
+
+## Flow Control Steps
+1. **load_design_system**
+   - Action: Load finalized design tokens and style guide
+   - Commands:
+     - Read(.workflow/WFS-{session}/.design/style-consolidation/design-tokens.json)
+     - Read(.workflow/WFS-{session}/.design/style-consolidation/style-guide.md)
+     - Read(.workflow/WFS-{session}/.design/style-consolidation/tailwind.config.js)
+   - Output: design_system
+
+2. **load_requirements**
+   - Action: Load functional and UX requirements
+   - Commands:
+     - Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md)
+     - Read(.workflow/WFS-{session}/.brainstorming/ui-designer/analysis.md) [optional]
+   - Output: requirements_context
+
+3. **generate_ui_prototypes_codex**
+   - Action: Generate HTML/CSS prototypes with strict token enforcement
+   - Command: bash(codex -C .workflow/WFS-{session}/.design/prototypes --full-auto exec \"
+     PURPOSE: Generate production-ready UI prototypes adhering to design tokens
+     TASK: Create HTML/CSS prototypes for pages: {page_list} with {variants_count} variant(s) each
+     MODE: auto
+     CONTEXT: @{../style-consolidation/design-tokens.json,../style-consolidation/style-guide.md,../../.brainstorming/synthesis-specification.md,../../../../CLAUDE.md}
+     EXPECTED:
+     For each page, generate {variants_count} variant(s):
+     1. {page}-variant-{n}.html - Complete HTML structure
+     2. {page}-variant-{n}.css - CSS using design token custom properties
+     3. {page}-variant-{n}-notes.md - Implementation notes and token usage
+
+     RULES:
+     - ALL styles MUST reference design token CSS custom properties (--color-brand-primary, --spacing-4, etc.)
+     - NO hardcoded colors, spacing, or typography values
+     - Use semantic HTML5 elements (header, nav, main, section, article, footer)
+     - Include ARIA labels and accessibility attributes (role, aria-label, aria-describedby)
+     - Implement responsive design using token-based breakpoints
+     - Follow component patterns from style-guide.md
+     - Include placeholder content matching page purpose
+     - Variants explore different layouts while maintaining token consistency
+     - Generate CSS custom properties mapping in each CSS file
+     \" --skip-git-repo-check -s danger-full-access)
+   - Output: {page}-variant-{n}.html, {page}-variant-{n}.css, {page}-variant-{n}-notes.md
+
+## Generation Requirements
+
+**Token Adherence**:
+- Use CSS custom properties for all design values
+- Reference design-tokens.json for property definitions
+- Example: `color: var(--color-brand-primary);`
+- Example: `padding: var(--spacing-4) var(--spacing-6);`
+- Example: `font-size: var(--font-size-lg);`
+
+**Semantic HTML**:
+```html
+<header role=\"banner\">
+  <nav role=\"navigation\" aria-label=\"Main navigation\">
+    <!-- Navigation items -->
+  </nav>
+</header>
+<main role=\"main\">
+  <section aria-labelledby=\"section-heading\">
+    <h2 id=\"section-heading\">Section Title</h2>
+    <!-- Content -->
+  </section>
+</main>
+<footer role=\"contentinfo\">
+  <!-- Footer content -->
+</footer>
+```
+
+**Accessibility Requirements**:
+- Proper heading hierarchy (h1 → h2 → h3)
+- Alt text for images
+- ARIA labels for interactive elements
+- Keyboard navigation support
+- Focus indicators using token colors
+- Sufficient color contrast (validated against tokens)
+
+**Responsive Design**:
+- Mobile-first approach
+- Token-based breakpoints (e.g., --breakpoint-md: 768px)
+- Flexible layouts using CSS Grid or Flexbox
+- Responsive typography using clamp() with token values
+
+## Expected Deliverables
+For each page in {page_list}:
+1. **{page}-variant-{n}.html**: Complete HTML prototype
+2. **{page}-variant-{n}.css**: Token-driven CSS
+3. **{page}-variant-{n}-notes.md**: Implementation notes
+"
+```
+
+### Phase 4: Gemini Variant Suggestions (Optional)
+**Conditional Execution**: Only if --variants > 1
+
+```bash
+IF variants_count > 1:
+  Task(conceptual-planning-agent): "
+  Generate semantic layout variation suggestions using Gemini
+
+  TASK: Analyze synthesis-specification.md and suggest {variants_count} layout approaches
+  CONTEXT: synthesis-specification.md, ui-designer/analysis.md
+  OUTPUT: variant-suggestions.md with layout rationale for each variant
+
+  Use Gemini to explore:
+  - Different information hierarchy approaches
+  - Alternative component compositions
+  - Varied user flow emphasis
+  - Diverse layout patterns (sidebar, top-nav, card-grid, list-detail)
+  "
+```
+
+### Phase 5: TodoWrite Integration
+```javascript
+TodoWrite({
+  todos: [
+    {
+      content: "Validate session and load design system",
+      status: "completed",
+      activeForm: "Loading design system"
+    },
+    {
+      content: "Load functional requirements and UX guidelines",
+      status: "completed",
+      activeForm: "Loading requirements"
+    },
+    {
+      content: "Generate UI prototypes using Codex with token enforcement",
+      status: "completed",
+      activeForm: "Generating UI prototypes"
+    },
+    {
+      content: "Generate layout variant suggestions using Gemini (optional)",
+      status: "completed",
+      activeForm: "Generating variant suggestions"
+    },
+    {
+      content: "Create implementation notes for each prototype",
+      status: "completed",
+      activeForm: "Creating implementation notes"
+    }
+  ]
+});
+```
+
+## Output Structure
+
+```
+.workflow/WFS-{session}/.design/prototypes/
+├── dashboard-variant-1.html
+├── dashboard-variant-1.css
+├── dashboard-variant-1-notes.md
+├── dashboard-variant-2.html (if --variants 2)
+├── dashboard-variant-2.css
+├── dashboard-variant-2-notes.md
+├── auth-variant-1.html
+├── auth-variant-1.css
+├── auth-variant-1-notes.md
+├── design-tokens.css              # CSS custom properties from design-tokens.json
+└── variant-suggestions.md         # Gemini layout rationale (if variants > 1)
+```
+
+### HTML Prototype Example
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Dashboard - Variant 1</title>
+  <link rel="stylesheet" href="design-tokens.css">
+  <link rel="stylesheet" href="dashboard-variant-1.css">
+</head>
+<body>
+  <header role="banner" class="header">
+    <nav role="navigation" aria-label="Main navigation" class="nav">
+      <!-- Token-based navigation -->
+    </nav>
+  </header>
+  <main role="main" class="main">
+    <section aria-labelledby="dashboard-heading" class="dashboard-section">
+      <h1 id="dashboard-heading" class="heading-primary">Dashboard</h1>
+      <!-- Content using design tokens -->
+    </section>
+  </main>
+  <footer role="contentinfo" class="footer">
+    <!-- Footer content -->
+  </footer>
+</body>
+</html>
+```
+
+### CSS Example
+```css
+/* Design Tokens (auto-generated from design-tokens.json) */
+:root {
+  --color-brand-primary: oklch(0.45 0.20 270 / 1);
+  --color-surface-background: oklch(0.98 0.01 270 / 1);
+  --spacing-4: 1rem;
+  --spacing-6: 1.5rem;
+  --font-size-lg: 1.125rem;
+  --border-radius-md: 0.5rem;
+  --shadow-md: 0 4px 6px oklch(0.00 0.00 0 / 0.07);
+}
+
+/* Component Styles (using tokens) */
+.header {
+  background-color: var(--color-surface-elevated);
+  padding: var(--spacing-4) var(--spacing-6);
+  box-shadow: var(--shadow-md);
+}
+
+.heading-primary {
+  font-size: var(--font-size-3xl);
+  color: var(--color-brand-primary);
+  margin-bottom: var(--spacing-6);
+}
+```
+
+## Error Handling
+- **No design tokens found**: Run `/workflow:design:style-consolidate` first
+- **Invalid page names**: List available pages from synthesis-specification.md
+- **Codex generation errors**: Retry with simplified requirements, report warnings
+- **Token reference errors**: Validate all CSS against design-tokens.json
+
+## Quality Checks
+After generation, verify:
+- [ ] All CSS values reference design token custom properties
+- [ ] No hardcoded colors, spacing, or typography
+- [ ] Semantic HTML structure
+- [ ] Accessibility attributes present
+- [ ] Responsive design implemented
+- [ ] Token-driven styling consistent across variants
+
+## Integration Points
+- **Input**: design-tokens.json, style-guide.md, synthesis-specification.md
+- **Output**: HTML/CSS prototypes for `/workflow:design:design-update`
+- **Context**: ui-designer/analysis.md for UX guidance
+
+## Next Steps
+After successful generation:
+```
+UI prototypes generated for session: WFS-{session}
+Pages: {page_list}
+Variants per page: {variants_count}
+
+Generated files:
+- {count} HTML prototypes
+- {count} CSS files (token-driven)
+- {count} implementation notes
+
+Review prototypes and select preferred variants:
+Location: .workflow/WFS-{session}/.design/prototypes/
+
+Next: /workflow:design:design-update --session WFS-{session}
+```
--- a/.claude/workflows/design-tokens-schema.md
+++ b/.claude/workflows/design-tokens-schema.md
@@ -0,0 +1,534 @@
+---
+name: design-tokens-schema
+description: Design tokens JSON schema specification for UI design workflow
+type: specification
+---
+
+# Design Tokens Schema Specification
+
+## Overview
+Standardized JSON schema for design tokens used in `/workflow:design/*` commands. Ensures consistency across style extraction, consolidation, and UI generation phases.
+
+## Core Principles
+
+1. **OKLCH Color Format**: All colors use OKLCH color space for perceptual uniformity
+2. **Semantic Naming**: User-centric token names (brand-primary, surface-elevated, not color-1, bg-2)
+3. **rem-Based Sizing**: All spacing and typography use rem units for scalability
+4. **Comprehensive Coverage**: Complete token set for production-ready design systems
+5. **Accessibility First**: WCAG AA compliance validated and documented
+
+## Full Schema
+
+```json
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "Design Tokens",
+  "description": "Design token definitions for UI design workflow",
+  "type": "object",
+  "required": ["colors", "typography", "spacing", "border_radius", "shadow"],
+  "properties": {
+    "meta": {
+      "type": "object",
+      "properties": {
+        "version": {"type": "string", "pattern": "^\\d+\\.\\d+\\.\\d+$"},
+        "generated_at": {"type": "string", "format": "date-time"},
+        "session_id": {"type": "string", "pattern": "^WFS-"},
+        "description": {"type": "string"}
+      }
+    },
+    "colors": {
+      "type": "object",
+      "required": ["brand", "surface", "semantic", "text"],
+      "properties": {
+        "brand": {
+          "type": "object",
+          "description": "Brand identity colors",
+          "required": ["primary", "secondary"],
+          "properties": {
+            "primary": {"$ref": "#/definitions/color"},
+            "secondary": {"$ref": "#/definitions/color"},
+            "accent": {"$ref": "#/definitions/color"}
+          }
+        },
+        "surface": {
+          "type": "object",
+          "description": "Surface and background colors",
+          "required": ["background", "elevated"],
+          "properties": {
+            "background": {"$ref": "#/definitions/color"},
+            "elevated": {"$ref": "#/definitions/color"},
+            "sunken": {"$ref": "#/definitions/color"},
+            "overlay": {"$ref": "#/definitions/color"}
+          }
+        },
+        "semantic": {
+          "type": "object",
+          "description": "Semantic state colors",
+          "required": ["success", "warning", "error", "info"],
+          "properties": {
+            "success": {"$ref": "#/definitions/color"},
+            "warning": {"$ref": "#/definitions/color"},
+            "error": {"$ref": "#/definitions/color"},
+            "info": {"$ref": "#/definitions/color"}
+          }
+        },
+        "text": {
+          "type": "object",
+          "description": "Text colors with WCAG AA validated contrast",
+          "required": ["primary", "secondary"],
+          "properties": {
+            "primary": {"$ref": "#/definitions/color"},
+            "secondary": {"$ref": "#/definitions/color"},
+            "tertiary": {"$ref": "#/definitions/color"},
+            "inverse": {"$ref": "#/definitions/color"},
+            "disabled": {"$ref": "#/definitions/color"}
+          }
+        },
+        "border": {
+          "type": "object",
+          "description": "Border and divider colors",
+          "properties": {
+            "subtle": {"$ref": "#/definitions/color"},
+            "default": {"$ref": "#/definitions/color"},
+            "strong": {"$ref": "#/definitions/color"}
+          }
+        }
+      }
+    },
+    "typography": {
+      "type": "object",
+      "required": ["font_family", "font_size", "line_height", "font_weight"],
+      "properties": {
+        "font_family": {
+          "type": "object",
+          "required": ["heading", "body"],
+          "properties": {
+            "heading": {"type": "string"},
+            "body": {"type": "string"},
+            "mono": {"type": "string"}
+          }
+        },
+        "font_size": {
+          "type": "object",
+          "required": ["xs", "sm", "base", "lg", "xl", "2xl", "3xl", "4xl"],
+          "properties": {
+            "xs": {"$ref": "#/definitions/size_rem"},
+            "sm": {"$ref": "#/definitions/size_rem"},
+            "base": {"$ref": "#/definitions/size_rem"},
+            "lg": {"$ref": "#/definitions/size_rem"},
+            "xl": {"$ref": "#/definitions/size_rem"},
+            "2xl": {"$ref": "#/definitions/size_rem"},
+            "3xl": {"$ref": "#/definitions/size_rem"},
+            "4xl": {"$ref": "#/definitions/size_rem"},
+            "5xl": {"$ref": "#/definitions/size_rem"}
+          }
+        },
+        "line_height": {
+          "type": "object",
+          "required": ["tight", "normal", "relaxed"],
+          "properties": {
+            "tight": {"type": "string", "pattern": "^\\d+(\\.\\d+)?$"},
+            "normal": {"type": "string", "pattern": "^\\d+(\\.\\d+)?$"},
+            "relaxed": {"type": "string", "pattern": "^\\d+(\\.\\d+)?$"}
+          }
+        },
+        "font_weight": {
+          "type": "object",
+          "properties": {
+            "light": {"type": "integer", "enum": [300]},
+            "normal": {"type": "integer", "enum": [400]},
+            "medium": {"type": "integer", "enum": [500]},
+            "semibold": {"type": "integer", "enum": [600]},
+            "bold": {"type": "integer", "enum": [700]}
+          }
+        }
+      }
+    },
+    "spacing": {
+      "type": "object",
+      "description": "Spacing scale (rem-based)",
+      "required": ["0", "1", "2", "3", "4", "6", "8"],
+      "patternProperties": {
+        "^\\d+$": {"$ref": "#/definitions/size_rem"}
+      }
+    },
+    "border_radius": {
+      "type": "object",
+      "required": ["none", "sm", "md", "lg", "full"],
+      "properties": {
+        "none": {"type": "string", "const": "0"},
+        "sm": {"$ref": "#/definitions/size_rem"},
+        "md": {"$ref": "#/definitions/size_rem"},
+        "lg": {"$ref": "#/definitions/size_rem"},
+        "xl": {"$ref": "#/definitions/size_rem"},
+        "2xl": {"$ref": "#/definitions/size_rem"},
+        "full": {"type": "string", "const": "9999px"}
+      }
+    },
+    "shadow": {
+      "type": "object",
+      "required": ["sm", "md", "lg"],
+      "properties": {
+        "none": {"type": "string", "const": "none"},
+        "sm": {"type": "string"},
+        "md": {"type": "string"},
+        "lg": {"type": "string"},
+        "xl": {"type": "string"},
+        "2xl": {"type": "string"}
+      }
+    },
+    "breakpoint": {
+      "type": "object",
+      "description": "Responsive breakpoints",
+      "properties": {
+        "sm": {"type": "string", "pattern": "^\\d+px$"},
+        "md": {"type": "string", "pattern": "^\\d+px$"},
+        "lg": {"type": "string", "pattern": "^\\d+px$"},
+        "xl": {"type": "string", "pattern": "^\\d+px$"},
+        "2xl": {"type": "string", "pattern": "^\\d+px$"}
+      }
+    },
+    "accessibility": {
+      "type": "object",
+      "description": "WCAG AA compliance data",
+      "properties": {
+        "contrast_ratios": {
+          "type": "object",
+          "patternProperties": {
+            ".*": {
+              "type": "object",
+              "properties": {
+                "background": {"type": "string"},
+                "foreground": {"type": "string"},
+                "ratio": {"type": "number"},
+                "wcag_aa_pass": {"type": "boolean"},
+                "wcag_aaa_pass": {"type": "boolean"}
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "definitions": {
+    "color": {
+      "type": "string",
+      "pattern": "^oklch\\(\\s*\\d+(\\.\\d+)?\\s+\\d+(\\.\\d+)?\\s+\\d+(\\.\\d+)?\\s*(\\/\\s*\\d+(\\.\\d+)?)?\\s*\\)$",
+      "description": "OKLCH color format: oklch(L C H / A)"
+    },
+    "size_rem": {
+      "type": "string",
+      "pattern": "^\\d+(\\.\\d+)?rem$",
+      "description": "rem-based size value"
+    }
+  }
+}
+```
+
+## Example: Complete Design Tokens
+
+```json
+{
+  "meta": {
+    "version": "1.0.0",
+    "generated_at": "2025-10-05T15:30:00Z",
+    "session_id": "WFS-auth-dashboard",
+    "description": "Modern minimalist design system with high contrast"
+  },
+  "colors": {
+    "brand": {
+      "primary": "oklch(0.45 0.20 270 / 1)",
+      "secondary": "oklch(0.60 0.15 200 / 1)",
+      "accent": "oklch(0.65 0.18 30 / 1)"
+    },
+    "surface": {
+      "background": "oklch(0.98 0.01 270 / 1)",
+      "elevated": "oklch(1.00 0.00 0 / 1)",
+      "sunken": "oklch(0.95 0.02 270 / 1)",
+      "overlay": "oklch(0.00 0.00 0 / 0.5)"
+    },
+    "semantic": {
+      "success": "oklch(0.55 0.15 150 / 1)",
+      "warning": "oklch(0.70 0.18 60 / 1)",
+      "error": "oklch(0.50 0.20 20 / 1)",
+      "info": "oklch(0.60 0.15 240 / 1)"
+    },
+    "text": {
+      "primary": "oklch(0.20 0.02 270 / 1)",
+      "secondary": "oklch(0.45 0.02 270 / 1)",
+      "tertiary": "oklch(0.60 0.02 270 / 1)",
+      "inverse": "oklch(0.98 0.01 270 / 1)",
+      "disabled": "oklch(0.70 0.01 270 / 0.5)"
+    },
+    "border": {
+      "subtle": "oklch(0.90 0.01 270 / 1)",
+      "default": "oklch(0.80 0.02 270 / 1)",
+      "strong": "oklch(0.60 0.05 270 / 1)"
+    }
+  },
+  "typography": {
+    "font_family": {
+      "heading": "Inter, system-ui, -apple-system, sans-serif",
+      "body": "Inter, system-ui, -apple-system, sans-serif",
+      "mono": "Fira Code, Consolas, 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",
+      "5xl": "3rem"
+    },
+    "line_height": {
+      "tight": "1.25",
+      "normal": "1.5",
+      "relaxed": "1.75"
+    },
+    "font_weight": {
+      "light": 300,
+      "normal": 400,
+      "medium": 500,
+      "semibold": 600,
+      "bold": 700
+    }
+  },
+  "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",
+    "2xl": "1.5rem",
+    "full": "9999px"
+  },
+  "shadow": {
+    "none": "none",
+    "sm": "0 1px 2px oklch(0.00 0.00 0 / 0.05)",
+    "md": "0 4px 6px oklch(0.00 0.00 0 / 0.07), 0 2px 4px oklch(0.00 0.00 0 / 0.06)",
+    "lg": "0 10px 15px oklch(0.00 0.00 0 / 0.1), 0 4px 6px oklch(0.00 0.00 0 / 0.05)",
+    "xl": "0 20px 25px oklch(0.00 0.00 0 / 0.15), 0 10px 10px oklch(0.00 0.00 0 / 0.04)",
+    "2xl": "0 25px 50px oklch(0.00 0.00 0 / 0.25)"
+  },
+  "breakpoint": {
+    "sm": "640px",
+    "md": "768px",
+    "lg": "1024px",
+    "xl": "1280px",
+    "2xl": "1536px"
+  },
+  "accessibility": {
+    "contrast_ratios": {
+      "text_primary_on_background": {
+        "background": "oklch(0.98 0.01 270 / 1)",
+        "foreground": "oklch(0.20 0.02 270 / 1)",
+        "ratio": 14.2,
+        "wcag_aa_pass": true,
+        "wcag_aaa_pass": true
+      },
+      "brand_primary_on_background": {
+        "background": "oklch(0.98 0.01 270 / 1)",
+        "foreground": "oklch(0.45 0.20 270 / 1)",
+        "ratio": 6.8,
+        "wcag_aa_pass": true,
+        "wcag_aaa_pass": false
+      }
+    }
+  }
+}
+```
+
+## CSS Custom Properties Generation
+
+Design tokens should be converted to CSS custom properties for use in generated UI:
+
+```css
+:root {
+  /* Brand Colors */
+  --color-brand-primary: oklch(0.45 0.20 270 / 1);
+  --color-brand-secondary: oklch(0.60 0.15 200 / 1);
+  --color-brand-accent: oklch(0.65 0.18 30 / 1);
+
+  /* Surface Colors */
+  --color-surface-background: oklch(0.98 0.01 270 / 1);
+  --color-surface-elevated: oklch(1.00 0.00 0 / 1);
+  --color-surface-sunken: oklch(0.95 0.02 270 / 1);
+
+  /* Semantic Colors */
+  --color-semantic-success: oklch(0.55 0.15 150 / 1);
+  --color-semantic-warning: oklch(0.70 0.18 60 / 1);
+  --color-semantic-error: oklch(0.50 0.20 20 / 1);
+  --color-semantic-info: oklch(0.60 0.15 240 / 1);
+
+  /* Text Colors */
+  --color-text-primary: oklch(0.20 0.02 270 / 1);
+  --color-text-secondary: oklch(0.45 0.02 270 / 1);
+  --color-text-tertiary: oklch(0.60 0.02 270 / 1);
+
+  /* Typography */
+  --font-family-heading: Inter, system-ui, sans-serif;
+  --font-family-body: Inter, system-ui, sans-serif;
+  --font-family-mono: Fira Code, Consolas, monospace;
+
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+
+  /* Spacing */
+  --spacing-0: 0;
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --spacing-6: 1.5rem;
+  --spacing-8: 2rem;
+  --spacing-12: 3rem;
+  --spacing-16: 4rem;
+
+  /* Border Radius */
+  --border-radius-none: 0;
+  --border-radius-sm: 0.25rem;
+  --border-radius-md: 0.5rem;
+  --border-radius-lg: 0.75rem;
+  --border-radius-xl: 1rem;
+  --border-radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px oklch(0.00 0.00 0 / 0.05);
+  --shadow-md: 0 4px 6px oklch(0.00 0.00 0 / 0.07), 0 2px 4px oklch(0.00 0.00 0 / 0.06);
+  --shadow-lg: 0 10px 15px oklch(0.00 0.00 0 / 0.1), 0 4px 6px oklch(0.00 0.00 0 / 0.05);
+}
+```
+
+## Tailwind Configuration Generation
+
+```javascript
+// tailwind.config.js
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        brand: {
+          primary: 'oklch(0.45 0.20 270 / <alpha-value>)',
+          secondary: 'oklch(0.60 0.15 200 / <alpha-value>)',
+          accent: 'oklch(0.65 0.18 30 / <alpha-value>)'
+        },
+        surface: {
+          background: 'oklch(0.98 0.01 270 / <alpha-value>)',
+          elevated: 'oklch(1.00 0.00 0 / <alpha-value>)',
+          sunken: 'oklch(0.95 0.02 270 / <alpha-value>)'
+        },
+        semantic: {
+          success: 'oklch(0.55 0.15 150 / <alpha-value>)',
+          warning: 'oklch(0.70 0.18 60 / <alpha-value>)',
+          error: 'oklch(0.50 0.20 20 / <alpha-value>)',
+          info: 'oklch(0.60 0.15 240 / <alpha-value>)'
+        }
+      },
+      fontFamily: {
+        heading: ['Inter', 'system-ui', 'sans-serif'],
+        body: ['Inter', 'system-ui', 'sans-serif'],
+        mono: ['Fira Code', 'Consolas', 'monospace']
+      },
+      fontSize: {
+        'xs': '0.75rem',
+        'sm': '0.875rem',
+        'base': '1rem',
+        'lg': '1.125rem',
+        'xl': '1.25rem',
+        '2xl': '1.5rem',
+        '3xl': '1.875rem',
+        '4xl': '2.25rem'
+      },
+      spacing: {
+        '1': '0.25rem',
+        '2': '0.5rem',
+        '3': '0.75rem',
+        '4': '1rem',
+        '6': '1.5rem',
+        '8': '2rem',
+        '12': '3rem',
+        '16': '4rem'
+      },
+      borderRadius: {
+        'sm': '0.25rem',
+        'md': '0.5rem',
+        'lg': '0.75rem',
+        'xl': '1rem',
+        '2xl': '1.5rem'
+      },
+      boxShadow: {
+        'sm': '0 1px 2px oklch(0.00 0.00 0 / 0.05)',
+        'md': '0 4px 6px oklch(0.00 0.00 0 / 0.07), 0 2px 4px oklch(0.00 0.00 0 / 0.06)',
+        'lg': '0 10px 15px oklch(0.00 0.00 0 / 0.1), 0 4px 6px oklch(0.00 0.00 0 / 0.05)'
+      }
+    }
+  }
+}
+```
+
+## Validation Requirements
+
+### Color Validation
+- All colors MUST use OKLCH format
+- Alpha channel optional (defaults to 1)
+- Lightness: 0-1 (0% to 100%)
+- Chroma: 0-0.4 (typical range, can exceed for vibrant colors)
+- Hue: 0-360 (degrees)
+
+### Accessibility Validation
+- Text on background: minimum 4.5:1 contrast (WCAG AA)
+- Large text (18pt+ or 14pt+ bold): minimum 3:1 contrast
+- UI components: minimum 3:1 contrast
+- Non-text focus indicators: minimum 3:1 contrast
+
+### Consistency Validation
+- Spacing scale maintains consistent ratio (e.g., 1.5x or 2x progression)
+- Typography scale follows modular scale principles
+- Border radius values progress logically
+- Shadow layers increase in offset and blur systematically
+
+## Usage in Commands
+
+### style-extract Output
+Generates initial `design-tokens.json` from visual analysis
+
+### style-consolidate Output
+Finalizes validated `design-tokens.json` with accessibility data
+
+### ui-generate Input
+Reads `design-tokens.json` to generate CSS custom properties
+
+### design-update Integration
+References `design-tokens.json` path in synthesis-specification.md
+
+## Version History
+
+- **1.0.0**: Initial schema with OKLCH colors, semantic naming, WCAG AA validation