release: version v3.5.0 - UI Design Workflow with Triple Vision Analysis

🎨 UI Design Workflow System
- Add /workflow:design:auto semi-autonomous orchestrator with interactive checkpoints
- Add /workflow:design:style-extract with triple vision analysis (Claude + Gemini + Codex)
- Add /workflow:design:style-consolidate for token validation and style guide generation
- Add /workflow:design:ui-generate for token-driven HTML/CSS prototype generation
- Add /workflow:design:design-update for design system integration

👁️ Triple Vision Analysis
- Claude Code: Quick initial visual analysis using native Read tool
- Gemini Vision: Deep semantic understanding of design intent
- Codex Vision: Structured pattern recognition with -i parameter
- Consensus synthesis with weighted combination strategy

⏸️ Interactive Checkpoints
- Checkpoint 1: User selects style variants after extraction
- Checkpoint 2: User confirms prototypes before design update
- Pause-and-continue pattern for critical design decisions

🎯 Zero Agent Overhead
- Remove Task(conceptual-planning-agent) wrappers from design commands
- Direct bash execution for gemini-wrapper and codex commands
- Improved performance while preserving all functionality

🎨 Design Features
- OKLCH color format for perceptually uniform design tokens
- W3C Design Tokens compatibility
- WCAG 2.1 AA compliance validation
- Style override support with --style-overrides parameter
- Batch task generation with --batch-plan flag

📚 Documentation Updates
- Update README.md with Phase 2 (UI Design Refinement) section
- Update README_CN.md with Chinese design workflow documentation
- Add comprehensive CHANGELOG entry for v3.5.0
- Add 5 new /workflow:design:* commands to command reference

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

.claude/agents/doc-generator.md

@@ -1,290 +1,137 @@
 ---
 name: doc-generator
 description: |
-  Specialized documentation generation agent with flow_control support. Generates comprehensive documentation for code, APIs, systems, or projects using hierarchical analysis with embedded CLI tools. Supports both direct documentation tasks and flow_control-driven complex documentation generation.
+  Intelligent agent for generating documentation based on a provided task JSON with flow_control. This agent autonomously executes pre-analysis steps, synthesizes context, applies templates, and generates comprehensive documentation.
 
   Examples:
   <example>
-  Context: User needs comprehensive system documentation with flow control
-  user: "Generate complete system documentation with architecture and API docs"
-  assistant: "I'll use the doc-generator agent with flow_control to systematically analyze and document the system"
+  Context: A task JSON with flow_control is provided to document a module.
+  user: "Execute documentation task DOC-001"
+  assistant: "I will execute the documentation task DOC-001. I'll start by running the pre-analysis steps defined in the flow_control to gather context, then generate the specified documentation files."
   <commentary>
-  Complex system documentation requires flow_control for structured analysis
-  </commentary>
-  </example>
-
-  <example>
-  Context: Simple module documentation needed
-  user: "Document the new auth module"
-  assistant: "I'll use the doc-generator agent to create documentation for the auth module"
-  <commentary>
-  Simple module documentation can be handled directly without flow_control
+  The agent is an intelligent, goal-oriented worker that follows instructions from the task JSON to autonomously generate documentation.
   </commentary>
   </example>
 
 color: green
 ---
 
-You are an expert technical documentation specialist with flow_control execution capabilities. You analyze code structures, understand system architectures, and produce comprehensive documentation using both direct analysis and structured CLI tool integration.
+You are an expert technical documentation specialist. Your responsibility is to autonomously **execute** documentation tasks based on a provided task JSON file. You follow `flow_control` instructions precisely, synthesize context, generate high-quality documentation, and report completion. You do not make planning decisions.
 
 ## Core Philosophy
 
-- **Context-driven Documentation** - Use provided context and flow_control structures for systematic analysis
-- **Hierarchical Generation** - Build documentation from module-level to system-level understanding
-- **Tool Integration** - Leverage CLI tools (gemini-wrapper, codex, bash) within agent execution
-- **Progress Tracking** - Use TodoWrite throughout documentation generation process
+- **Autonomous Execution**: You are not a script runner; you are a goal-oriented worker that understands and executes a plan.
+- **Context-Driven**: All necessary context is gathered autonomously by executing the `pre_analysis` steps in the `flow_control` block.
+- **Template-Based**: You apply specified templates to generate consistent and high-quality documentation.
+- **Quality-Focused**: You adhere to a strict quality assurance checklist before completing any task.
 
 ## Execution Process
 
-### 1. Context Assessment
+### 1. Task Ingestion
+- **Input**: A single task JSON file path.
+- **Action**: Load and parse the task JSON. Validate the presence of `id`, `title`, `status`, `meta`, `context`, and `flow_control`.
 
-**Context Evaluation Logic**:
-```
-IF task contains [FLOW_CONTROL] marker:
-    → Execute flow_control.pre_analysis steps sequentially for context gathering
-    → Use four flexible context acquisition methods:
-      * Document references (bash commands for file operations)
-      * Search commands (bash with rg/grep/find)
-      * CLI analysis (gemini-wrapper/codex commands)
-      * Direct exploration (Read/Grep/Search tools)
-    → Pass context between steps via [variable_name] references
-    → Generate documentation based on accumulated context
-ELIF context sufficient for direct documentation:
-    → Proceed with standard documentation generation
-ELSE:
-    → Use built-in tools to gather necessary context
-    → Proceed with documentation generation
-```
+### 2. Pre-Analysis Execution (Context Gathering)
+- **Action**: Autonomously execute the `pre_analysis` array from the `flow_control` block sequentially.
+- **Context Accumulation**: Store the output of each step in a variable specified by `output_to`.
+- **Variable Substitution**: Use `[variable_name]` syntax to inject outputs from previous steps into subsequent commands.
+- **Error Handling**: Follow the `on_error` strategy (`fail`, `skip_optional`, `retry_once`) for each step.
 
-### 2. Flow Control Template
+**Important**: All commands in the task JSON are already tool-specific and ready to execute. The planning phase (`docs.md`) has already selected the appropriate tool and built the correct command syntax.
 
+**Example `pre_analysis` step** (tool-specific, direct execution):
 ```json
 {
-  "flow_control": {
-    "pre_analysis": [
-      {
-        "step": "discover_structure",
-        "action": "Analyze project structure and modules",
-        "command": "bash(find src/ -type d -mindepth 1 | head -20)",
-        "output_to": "project_structure"
-      },
-      {
-        "step": "analyze_modules",
-        "action": "Deep analysis of each module",
-        "command": "gemini-wrapper -p 'ANALYZE: {project_structure}'",
-        "output_to": "module_analysis"
-      },
-      {
-        "step": "generate_docs",
-        "action": "Create comprehensive documentation",
-        "command": "codex --full-auto exec 'DOCUMENT: {module_analysis}'",
-        "output_to": "documentation"
-      }
-    ],
-    "implementation_approach": "hierarchical_documentation",
-    "target_files": [".workflow/docs/"]
-  }
+  "step": "analyze_module_structure",
+  "action": "Deep analysis of module structure and API",
+  "command": "bash(cd src/auth && ~/.claude/scripts/gemini-wrapper -p \"PURPOSE: Document module comprehensively\nTASK: Extract module purpose, architecture, public API, dependencies\nMODE: analysis\nCONTEXT: @{**/*}
+         System: [system_context]\nEXPECTED: Complete module analysis for documentation\nRULES: $(cat ~/.claude/workflows/cli-templates/prompts/documentation/module-documentation.txt)\")",
+  "output_to": "module_analysis",
+  "on_error": "fail"
 }
 ```
 
-## Documentation Standards
+**Command Execution**:
+- Directly execute the `command` string.
+- No conditional logic needed; follow the plan.
+- Template content is embedded via `$(cat template.txt)`.
+- Substitute `[variable_name]` with accumulated context from previous steps.
 
-### Content Types & Requirements
+### 3. Documentation Generation
+- **Action**: Use the accumulated context from the pre-analysis phase to synthesize and generate documentation.
+- **Instructions**: Follow the `implementation_approach` defined in the `flow_control` block.
+- **Templates**: Apply templates as specified in `meta.template` or `implementation_approach`.
+- **Output**: Write the generated content to the files specified in `target_files`.
 
-**README Files**: Project overview, prerequisites, installation, configuration, usage examples, API reference, contributing guidelines, license
+### 4. Progress Tracking with TodoWrite
+Use `TodoWrite` to provide real-time visibility into the execution process.
 
-**API Documentation**: Endpoint descriptions with HTTP methods, request/response formats, authentication, error codes, rate limiting, version info, interactive examples
+```javascript
+// At the start of execution
+TodoWrite({
+  todos: [
+    { "content": "Load and validate task JSON", "status": "in_progress" },
+    { "content": "Execute pre-analysis step: discover_structure", "status": "pending" },
+    { "content": "Execute pre-analysis step: analyze_modules", "status": "pending" },
+    { "content": "Generate documentation content", "status": "pending" },
+    { "content": "Write documentation to target files", "status": "pending" },
+    { "content": "Run quality assurance checks", "status": "pending" },
+    { "content": "Update task status and generate summary", "status": "pending" }
+  ]
+});
 
-**Architecture Documentation**: System overview with diagrams (text/mermaid), component interactions, data flow, technology stack, design decisions, scalability considerations, security architecture
-
-**Code Documentation**: Function/method descriptions with parameters/returns, class/module overviews, algorithm explanations, usage examples, edge cases, performance characteristics
-
-## Workflow Execution
-
-### Phase 1: Initialize Progress Tracking
-```json
-TodoWrite([
-  {
-    "content": "Initialize documentation generation process",
-    "activeForm": "Initializing documentation process",
-    "status": "in_progress"
-  },
-  {
-    "content": "Execute flow control pre-analysis steps",
-    "activeForm": "Executing pre-analysis",
-    "status": "pending"
-  },
-  {
-    "content": "Generate module-level documentation",
-    "activeForm": "Generating module documentation",
-    "status": "pending"
-  },
-  {
-    "content": "Create system-level documentation synthesis",
-    "activeForm": "Creating system documentation",
-    "status": "pending"
-  }
-])
+// After completing a step
+TodoWrite({
+  todos: [
+    { "content": "Load and validate task JSON", "status": "completed" },
+    { "content": "Execute pre-analysis step: discover_structure", "status": "in_progress" },
+    // ... rest of the tasks
+  ]
+});
 ```
 
-### Phase 2: Flow Control Execution
-1. **Parse Flow Control**: Extract pre_analysis steps from task context
-2. **Sequential Execution**: Execute each step and capture outputs
-3. **Context Accumulation**: Build understanding through variable passing
-4. **Progress Updates**: Mark completed steps in TodoWrite
+### 5. Quality Assurance
+Before completing the task, you must verify the following:
+- [ ] **Content Accuracy**: Technical information is verified against the analysis context.
+- [ ] **Completeness**: All sections of the specified template are populated.
+- [ ] **Examples Work**: All code examples and commands are tested and functional.
+- [ ] **Cross-References**: All internal links within the documentation are valid.
+- [ ] **Consistency**: Follows project standards and style guidelines.
+- [ ] **Target Files**: All files listed in `target_files` have been created or updated.
 
-### Phase 3: Hierarchical Documentation Generation
-1. **Module-Level**: Individual component analysis, API docs per module, usage examples
-2. **System-Level**: Architecture overview synthesis, cross-module integration, complete API specs
-3. **Progress Updates**: Update TodoWrite for each completed section
+### 6. Task Completion
+1.  **Update Task Status**: Modify the task's JSON file, setting `"status": "completed"`.
+2.  **Generate Summary**: Create a summary document in the `.summaries/` directory (e.g., `DOC-001-summary.md`).
+3.  **Update `TODO_LIST.md`**: Mark the corresponding task as completed `[x]`.
 
-### Phase 4: Quality Assurance & Task Completion
+#### Summary Template (`[TASK-ID]-summary.md`)
+```markdown
+# Task Summary: [Task ID] [Task Title]
 
-**Quality Verification**:
-- [ ] **Content Accuracy**: Technical information verified against actual code
-- [ ] **Completeness**: All required sections included
-- [ ] **Examples Work**: All code examples, commands tested and functional
-- [ ] **Cross-References**: All internal links valid and working
-- [ ] **Consistency**: Follows project standards and style guidelines
-- [ ] **Accessibility**: Clear and accessible to intended audience
-- [ ] **Version Information**: API versions, compatibility, changelog included
-- [ ] **Visual Elements**: Diagrams, flowcharts described appropriately
+## Documentation Generated
+- **[Document Name]** (`[file-path]`): [Brief description of the document's purpose and content].
+- **[Section Name]** (`[file:section]`): [Details about a specific section generated].
 
-**Task Completion Process**:
+## Key Information Captured
+- **Architecture**: [Summary of architectural points documented].
+- **API Reference**: [Overview of API endpoints documented].
+- **Usage Examples**: [Description of examples provided].
 
-1. **Update TODO List** (using session context paths):
-   - Update TODO_LIST.md in workflow directory provided in session context
-   - Mark completed tasks with [x] and add summary links
-   - **CRITICAL**: Use session context paths provided by context
-
-   **Project Structure**:
-   ```
-   .workflow/WFS-[session-id]/     # (Path provided in session context)
-   ├── workflow-session.json     # Session metadata and state (REQUIRED)
-   ├── IMPL_PLAN.md              # Planning document (REQUIRED)
-   ├── TODO_LIST.md              # Progress tracking document (REQUIRED)
-   ├── .task/                    # Task definitions (REQUIRED)
-   │   ├── IMPL-*.json           # Main task definitions
-   │   └── IMPL-*.*.json         # Subtask definitions (created dynamically)
-   └── .summaries/               # Task completion summaries (created when tasks complete)
-       ├── IMPL-*-summary.md     # Main task summaries
-       └── IMPL-*.*-summary.md   # Subtask summaries
-   ```
-
-2. **Generate Documentation Summary** (naming: `IMPL-[task-id]-summary.md`):
-   ```markdown
-   # Task: [Task-ID] [Documentation Name]
-
-   ## Documentation Summary
-
-   ### Files Created/Modified
-   - `[file-path]`: [brief description of documentation]
-
-   ### Documentation Generated
-   - **[DocumentName]** (`[file-path]`): [purpose/content overview]
-   - **[SectionName]** (`[file:section]`): [coverage/details]
-   - **[APIEndpoint]** (`[file:line]`): [documentation/examples]
-
-   ## Documentation Outputs
-
-   ### Available Documentation
-   - [DocumentName]: [file-path] - [brief description]
-   - [APIReference]: [file-path] - [coverage details]
-
-   ### Integration Points
-   - **[Documentation]**: Reference `[file-path]` for `[information-type]`
-   - **[API Docs]**: Use `[endpoint-path]` documentation for `[integration]`
-
-   ### Cross-References
-   - [MainDoc] links to [SubDoc] via [reference]
-   - [APIDoc] cross-references [CodeExample] in [location]
-
-   ## Status: ✅ Complete
-   ```
-
-## CLI Tool Integration
-
-### Bash Commands
-```bash
-# Project structure discovery
-bash(find src/ -type d -mindepth 1 | grep -v node_modules | head -20)
-
-# File pattern searching
-bash(rg 'export.*function' src/ --type ts)
-
-# Directory analysis
-bash(ls -la src/ && find src/ -name '*.md' | head -10)
+## Status: ✅ Complete
 ```
 
-### Gemini-Wrapper
-```bash
-gemini-wrapper -p "
-PURPOSE: Analyze project architecture for documentation
-TASK: Extract architectural patterns and module relationships
-CONTEXT: @{src/**/*,CLAUDE.md,package.json}
-EXPECTED: Architecture analysis with module breakdown
-"
-```
+## Key Reminders
 
-### Codex Integration
-```bash
-codex --full-auto exec "
-PURPOSE: Generate comprehensive module documentation
-TASK: Create detailed documentation based on analysis
-CONTEXT: Analysis results from previous steps
-EXPECTED: Complete documentation in .workflow/docs/
-" -s danger-full-access
-```
+**ALWAYS**:
+- **Follow `flow_control`**: Execute the `pre_analysis` steps exactly as defined in the task JSON.
+- **Execute Commands Directly**: All commands are tool-specific and ready to run.
+- **Accumulate Context**: Pass outputs from one `pre_analysis` step to the next via variable substitution.
+- **Verify Output**: Ensure all `target_files` are created and meet quality standards.
+- **Update Progress**: Use `TodoWrite` to track each step of the execution.
+- **Generate a Summary**: Create a detailed summary upon task completion.
 
-## Best Practices & Guidelines
-
-**Content Excellence**:
-- Write for your audience (developers, users, stakeholders)
-- Use examples liberally (code, curl commands, configurations)
-- Structure for scanning (clear headings, bullets, tables)
-- Include visuals (text/mermaid diagrams)
-- Version everything (API versions, compatibility, changelog)
-- Test your docs (ensure commands and examples work)
-- Link intelligently (cross-references, external resources)
-
-**Quality Standards**:
-- Verify technical accuracy against actual code implementation
-- Test all examples, commands, and code snippets
-- Follow existing documentation patterns and project conventions
-- Generate detailed summary documents with complete component listings
-- Maintain consistency in style, format, and technical depth
-
-**Output Format**:
-- Use Markdown format for compatibility
-- Include table of contents for longer documents
-- Have consistent formatting and style
-- Include metadata (last updated, version, authors) when appropriate
-- Be ready for immediate use in the project
-
-**Key Reminders**:
-
-**NEVER:**
-- Create documentation without verifying technical accuracy against actual code
-- Generate incomplete or superficial documentation
-- Include broken examples or invalid code snippets
-- Make assumptions about functionality - verify with existing implementation
-- Create documentation that doesn't follow project standards
-
-**ALWAYS:**
-- Verify all technical details against actual code implementation
-- Test all examples, commands, and code snippets before including them
-- Create comprehensive documentation that serves its intended purpose
-- Follow existing documentation patterns and project conventions
-- Generate detailed summary documents with complete documentation component listings
-- Document all new sections, APIs, and examples for dependent task reference
-- Maintain consistency in style, format, and technical depth
-
-## Special Considerations
-
-- If updating existing documentation, preserve valuable content while improving clarity and completeness
-- When documenting APIs, consider generating OpenAPI/Swagger specifications if applicable
-- For complex systems, create multiple documentation files organized by concern rather than one monolithic document
-- Always verify technical accuracy by referencing the actual code implementation
-- Consider internationalization needs if the project has a global audience
-
-Remember: Good documentation is a force multiplier for development teams. Your work enables faster onboarding, reduces support burden, and improves code maintainability. Strive to create documentation that developers will actually want to read and reference.
+**NEVER**:
+- **Make Planning Decisions**: Do not deviate from the instructions in the task JSON.
+- **Assume Context**: Do not guess information; gather it autonomously through the `pre_analysis` steps.
+- **Generate Code**: Your role is to document, not to implement.
+- **Skip Quality Checks**: Always perform the full QA checklist before completing a task.

.claude/agents/memory-bridge.md

@@ -1,5 +1,5 @@
 ---
-name: memory-gemini-bridge
+name: memory-bridge
 description: Execute complex project documentation updates using script coordination
 color: purple
 ---

.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.

.claude/commands/cli/analyze.md

@@ -14,10 +14,18 @@ allowed-tools: SlashCommand(*), Bash(*), TodoWrite(*), Read(*), Glob(*)
 
 ## Purpose
 
-Quick codebase analysis using CLI tools. Automatically detects analysis type and selects appropriate template.
+Quick codebase analysis using CLI tools. **Analysis only - does NOT modify code**.
 
+**Intent**: Understand code patterns, architecture, and provide insights/recommendations
 **Supported Tools**: codex, gemini (default), qwen
 
+## Core Behavior
+
+1. **Read-Only Analysis**: This command ONLY analyzes code and provides insights
+2. **No Code Modification**: Results are recommendations and analysis reports
+3. **Template-Based**: Automatically selects appropriate analysis template
+4. **Smart Pattern Detection**: Infers relevant files based on analysis target
+
 ## Parameters
 
 - `--tool <codex|gemini|qwen>` - Tool selection (default: gemini)
@@ -29,8 +37,9 @@ Quick codebase analysis using CLI tools. Automatically detects analysis type and
 1. Parse tool selection (default: gemini)
 2. If `--enhance`: Execute `/enhance-prompt` first to expand user intent
 3. Auto-detect analysis type from keywords → select template
-4. Build command with auto-detected file patterns
-5. Execute and return results
+4. Build command with auto-detected file patterns and `MODE: analysis`
+5. Execute analysis (read-only, no code changes)
+6. Return analysis report with insights and recommendations
 
 ## File Pattern Auto-Detection
 
@@ -44,17 +53,64 @@ Keywords trigger specific file patterns:
 
 For complex patterns, use `rg` or MCP tools to discover files first, then execute CLI with precise file references.
 
-## Examples
+## Command Template
 
 ```bash
-/cli:analyze "authentication patterns"              # Auto: gemini + auth patterns
-/cli:analyze --tool qwen "component architecture"   # Qwen architecture analysis
-/cli:analyze --tool codex "performance bottlenecks" # Codex deep analysis
-/cli:analyze --enhance "fix auth issues"            # Enhanced prompt → analysis
+cd . && ~/.claude/scripts/gemini-wrapper -p "
+PURPOSE: [analysis goal from target]
+TASK: [auto-detected analysis type]
+MODE: analysis
+CONTEXT: @{CLAUDE.md} [auto-detected file patterns]
+EXPECTED: Insights, patterns, recommendations (NO code modification)
+RULES: [auto-selected template] | Focus on [analysis aspect]
+"
 ```
 
+## Examples
+
+**Basic Analysis**:
+```bash
+/cli:analyze "authentication patterns"
+# Executes: Gemini analysis with auth file patterns
+# Returns: Pattern analysis, architecture insights, recommendations
+```
+
+**Architecture Analysis**:
+```bash
+/cli:analyze --tool qwen "component architecture"
+# Executes: Qwen with component file patterns
+# Returns: Architecture review, design patterns, improvement suggestions
+```
+
+**Performance Analysis**:
+```bash
+/cli:analyze --tool codex "performance bottlenecks"
+# Executes: Codex deep analysis with performance focus
+# Returns: Bottleneck identification, optimization recommendations
+```
+
+**Enhanced Analysis**:
+```bash
+/cli:analyze --enhance "fix auth issues"
+# Step 1: Enhance prompt to expand context
+# Step 2: Analysis with expanded context
+# Returns: Root cause analysis, fix recommendations (NO automatic fixes)
+```
+
+## Output Routing
+
+**Output Destination Logic**:
+- **Active session exists AND analysis is session-relevant**:
+  - Save to `.workflow/WFS-[id]/.chat/analyze-[timestamp].md`
+- **No active session OR one-off analysis**:
+  - Save to `.workflow/.scratchpad/analyze-[description]-[timestamp].md`
+
+**Examples**:
+- During active session `WFS-auth-system`, analyzing auth patterns → `.chat/analyze-20250105-143022.md`
+- No session, quick security check → `.scratchpad/analyze-security-20250105-143045.md`
+
 ## Notes
 
 - Command templates, file patterns, and best practices: see intelligent-tools-strategy.md (loaded in memory)
-- Active workflow session: results saved to `.workflow/WFS-[id]/.chat/`
-- No session: results returned directly
+- Scratchpad directory details: see workflow-architecture.md
+- Scratchpad files can be promoted to workflow sessions if analysis proves valuable

.claude/commands/cli/chat.md

@@ -14,10 +14,18 @@ allowed-tools: SlashCommand(*), Bash(*)
 
 ## Purpose
 
-Direct Q&A interaction with CLI tools for codebase analysis.
+Direct Q&A interaction with CLI tools for codebase analysis. **Analysis only - does NOT modify code**.
 
+**Intent**: Ask questions, get explanations, understand codebase structure
 **Supported Tools**: codex, gemini (default), qwen
 
+## Core Behavior
+
+1. **Conversational Analysis**: Direct question-answer interaction about codebase
+2. **Read-Only**: This command ONLY provides information and analysis
+3. **No Code Modification**: Results are explanations and insights
+4. **Flexible Context**: Choose specific files or entire codebase
+
 ## Parameters
 
 - `<inquiry>` (Required) - Question or analysis request
@@ -31,8 +39,9 @@ Direct Q&A interaction with CLI tools for codebase analysis.
 1. Parse tool selection (default: gemini)
 2. If `--enhance`: Execute `/enhance-prompt` to expand user intent
 3. Assemble context: `@{CLAUDE.md}` + user-specified files or `--all-files`
-4. Execute CLI tool with assembled context
-5. Optionally save to workflow session
+4. Execute CLI tool with assembled context (read-only, analysis mode)
+5. Return explanations and insights (NO code changes)
+6. Optionally save to workflow session
 
 ## Context Assembly
 
@@ -44,18 +53,69 @@ Direct Q&A interaction with CLI tools for codebase analysis.
 
 For targeted analysis, use `rg` or MCP tools to discover relevant files first, then build precise CONTEXT field.
 
-## Examples
+## Command Template
 
 ```bash
-/cli:chat "analyze the authentication flow"              # Gemini (default)
-/cli:chat --tool qwen "optimize React component"         # Qwen
-/cli:chat --tool codex "review security vulnerabilities" # Codex
-/cli:chat --enhance "fix the login"                      # Enhanced prompt first
-/cli:chat --all-files "find all API endpoints"           # Full codebase context
+cd . && ~/.claude/scripts/gemini-wrapper -p "
+INQUIRY: [user question]
+CONTEXT: @{CLAUDE.md,**/*CLAUDE.md} [inferred or --all-files]
+MODE: analysis
+RESPONSE: Direct answer, explanation, insights (NO code modification)
+"
 ```
 
+## Examples
+
+**Basic Question**:
+```bash
+/cli:chat "analyze the authentication flow"
+# Executes: Gemini analysis
+# Returns: Explanation of auth flow, components involved, data flow
+```
+
+**Architecture Question**:
+```bash
+/cli:chat --tool qwen "how does React component optimization work here"
+# Executes: Qwen architecture analysis
+# Returns: Component structure explanation, optimization patterns used
+```
+
+**Security Analysis**:
+```bash
+/cli:chat --tool codex "review security vulnerabilities"
+# Executes: Codex security analysis
+# Returns: Vulnerability assessment, security recommendations (NO automatic fixes)
+```
+
+**Enhanced Inquiry**:
+```bash
+/cli:chat --enhance "explain the login issue"
+# Step 1: Enhance to expand login context
+# Step 2: Analysis with expanded understanding
+# Returns: Detailed explanation of login flow and potential issues
+```
+
+**Broad Context**:
+```bash
+/cli:chat --all-files "find all API endpoints"
+# Executes: Analysis across entire codebase
+# Returns: List and explanation of API endpoints (NO code generation)
+```
+
+## Output Routing
+
+**Output Destination Logic**:
+- **Active session exists AND query is session-relevant**:
+  - Save to `.workflow/WFS-[id]/.chat/chat-[timestamp].md`
+- **No active session OR unrelated query**:
+  - Save to `.workflow/.scratchpad/chat-[description]-[timestamp].md`
+
+**Examples**:
+- During active session `WFS-api-refactor`, asking about API structure → `.chat/chat-20250105-143022.md`
+- No session, asking about build process → `.scratchpad/chat-build-process-20250105-143045.md`
+
 ## Notes
 
 - Command templates and file patterns: see intelligent-tools-strategy.md (loaded in memory)
-- Active workflow session: results saved to `.workflow/WFS-[id]/.chat/`
-- No session: results returned directly
+- Scratchpad directory details: see workflow-architecture.md
+- Scratchpad conversations preserved for future reference

.claude/commands/cli/codex-execute.md

@@ -457,10 +457,45 @@ codex exec "CONTINUE TO NEXT SUBTASK: ..." resume --last --skip-git-repo-check -
 }
 ```
 
+## Output Routing
+
+**Execution Log Destination**:
+- **IF** active workflow session exists:
+  - Execution log: `.workflow/WFS-[id]/.chat/codex-execute-[timestamp].md`
+  - Task summaries: `.workflow/WFS-[id]/.summaries/[TASK-ID]-summary.md` (if task ID)
+  - Task updates: `.workflow/WFS-[id]/.task/[TASK-ID].json` status updates
+  - TodoWrite tracking: Embedded in execution log
+- **ELSE** (no active session):
+  - **Recommended**: Create workflow session first (`/workflow:session:start`)
+  - **Alternative**: Save to `.workflow/.scratchpad/codex-execute-[description]-[timestamp].md`
+
+**Output Files** (during execution):
+```
+.workflow/WFS-[session-id]/
+├── .chat/
+│   └── codex-execute-20250105-143022.md    # Full execution log with task flow
+├── .summaries/
+│   ├── IMPL-001.1-summary.md               # Subtask summaries
+│   ├── IMPL-001.2-summary.md
+│   └── IMPL-001-summary.md                 # Final task summary
+└── .task/
+    ├── IMPL-001.json                       # Updated task status
+    └── [subtask JSONs if decomposed]
+```
+
+**Examples**:
+- During session `WFS-auth-system`, executing multi-stage auth implementation:
+  - Log: `.workflow/WFS-auth-system/.chat/codex-execute-20250105-143022.md`
+  - Summaries: `.workflow/WFS-auth-system/.summaries/IMPL-001.{1,2,3}-summary.md`
+  - Task status: `.workflow/WFS-auth-system/.task/IMPL-001.json` (status: completed)
+- No session, ad-hoc multi-stage task:
+  - Log: `.workflow/.scratchpad/codex-execute-auth-refactor-20250105-143045.md`
+
 **Save Results**:
-- Execution log: `.chat/codex-execute-[timestamp].md` (if workflow active)
-- Summary: `.summaries/[TASK-ID]-summary.md` (if task ID provided)
-- TodoWrite tracking embedded in session
+- Execution log with task flow diagram and TodoWrite tracking
+- Individual summaries for each completed subtask
+- Final consolidated summary when all subtasks complete
+- Modified code files throughout project
 
 ## Notes
 
@@ -471,3 +506,8 @@ codex exec "CONTINUE TO NEXT SUBTASK: ..." resume --last --skip-git-repo-check -
 **Input Flexibility**: Accepts both freeform descriptions and task IDs (auto-detects and loads JSON)
 
 **Context Window**: `codex exec "..." resume --last` maintains conversation history, ensuring consistency across subtasks without redundant context injection.
+
+**Output Details**:
+- Output routing and scratchpad details: see workflow-architecture.md
+- Session management: see intelligent-tools-strategy.md
+- **⚠️ Code Modification**: This command performs multi-stage code modifications - execution log tracks all changes

.claude/commands/cli/execute.md

@@ -15,15 +15,25 @@ allowed-tools: SlashCommand(*), Bash(*)
 
 ## Purpose
 
-Execute implementation tasks with **YOLO permissions** (auto-approves all confirmations).
+Execute implementation tasks with **YOLO permissions** (auto-approves all confirmations). **MODIFIES CODE**.
 
+**Intent**: Autonomous code implementation, modification, and generation
 **Supported Tools**: codex, gemini (default), qwen
 **Key Feature**: Automatic context inference and file pattern detection
 
+## Core Behavior
+
+1. **Code Modification**: This command MODIFIES, CREATES, and DELETES code files
+2. **Auto-Approval**: YOLO mode bypasses confirmation prompts for all operations
+3. **Implementation Focus**: Executes actual code changes, not just recommendations
+4. **Requires Explicit Intent**: Use only when implementation is intended
+
 ## Core Concepts
 
 ### YOLO Permissions
-Auto-approves: file pattern inference, execution, file modifications, summary generation
+Auto-approves: file pattern inference, execution, **file modifications**, summary generation
+
+**⚠️ WARNING**: This command will make actual code changes without manual confirmation
 
 ### Execution Modes
 
@@ -70,30 +80,106 @@ Use `resume --last` when current task extends/relates to previous execution. See
 
 **Session Management**: Auto-detects `.workflow/.active-*` marker
 - Active session: Save to `.workflow/WFS-[id]/.chat/execute-[timestamp].md`
-- No session: Create new session
+- No session: Create new session or save to scratchpad
 
 **Task Integration**: Load from `.task/[TASK-ID].json`, update status, generate summary
 
-## Examples
+## Output Routing
+
+**Execution Log Destination**:
+- **IF** active workflow session exists:
+  - Save to `.workflow/WFS-[id]/.chat/execute-[timestamp].md`
+  - Update task status in `.task/[TASK-ID].json` (if task ID provided)
+  - Generate summary in `.workflow/WFS-[id]/.summaries/[TASK-ID]-summary.md`
+- **ELSE** (no active session):
+  - **Option 1**: Create new workflow session for task
+  - **Option 2**: Save to `.workflow/.scratchpad/execute-[description]-[timestamp].md`
+
+**Output Files** (when active session exists):
+- Execution log: `.workflow/WFS-[id]/.chat/execute-[timestamp].md`
+- Task summary: `.workflow/WFS-[id]/.summaries/[TASK-ID]-summary.md` (if task ID)
+- Modified code: Project files per implementation
+
+**Examples**:
+- During session `WFS-auth-system`, executing `IMPL-001`:
+  - Log: `.workflow/WFS-auth-system/.chat/execute-20250105-143022.md`
+  - Summary: `.workflow/WFS-auth-system/.summaries/IMPL-001-summary.md`
+- No session, ad-hoc implementation:
+  - Log: `.workflow/.scratchpad/execute-jwt-auth-20250105-143045.md`
+
+## Command Template
 
 ```bash
-# Description mode with auto-detection
-/cli:execute "implement JWT authentication with middleware"
+# Gemini/Qwen: MODE=write with --approval-mode yolo
+cd . && ~/.claude/scripts/gemini-wrapper --approval-mode yolo -p "
+PURPOSE: [implementation goal]
+TASK: [specific implementation]
+MODE: write
+CONTEXT: @{CLAUDE.md} [auto-detected files]
+EXPECTED: Working implementation with code changes
+RULES: [constraints] | Auto-approve all changes
+"
 
-# Enhanced prompt
-/cli:execute --enhance "implement JWT authentication"
-
-# Task ID mode
-/cli:execute IMPL-001
-
-# Codex execution
-/cli:execute --tool codex "optimize database queries"
-
-# Qwen with enhancement
-/cli:execute --tool qwen --enhance "refactor auth module"
+# Codex: MODE=auto with danger-full-access
+codex -C . --full-auto exec "
+PURPOSE: [implementation goal]
+TASK: [specific implementation]
+MODE: auto
+CONTEXT: [auto-detected files]
+EXPECTED: Complete implementation with tests
+" --skip-git-repo-check -s danger-full-access
 ```
 
+## Examples
+
+**Basic Implementation** (⚠️ modifies code):
+```bash
+/cli:execute "implement JWT authentication with middleware"
+# Executes: Creates auth middleware, updates routes, modifies config
+# Result: NEW/MODIFIED code files with JWT implementation
+```
+
+**Enhanced Implementation** (⚠️ modifies code):
+```bash
+/cli:execute --enhance "implement JWT authentication"
+# Step 1: Enhance to expand requirements
+# Step 2: Execute implementation with auto-approval
+# Result: Complete auth system with MODIFIED code files
+```
+
+**Task Execution** (⚠️ modifies code):
+```bash
+/cli:execute IMPL-001
+# Reads: .task/IMPL-001.json for requirements
+# Executes: Implementation based on task spec
+# Result: Code changes per task definition
+```
+
+**Codex Implementation** (⚠️ modifies code):
+```bash
+/cli:execute --tool codex "optimize database queries"
+# Executes: Codex with full file access
+# Result: MODIFIED query code, new indexes, updated tests
+```
+
+**Qwen Code Generation** (⚠️ modifies code):
+```bash
+/cli:execute --tool qwen --enhance "refactor auth module"
+# Step 1: Enhanced refactoring plan
+# Step 2: Execute with MODE=write
+# Result: REFACTORED auth code with structural changes
+```
+
+## Comparison with Analysis Commands
+
+| Command | Intent | Code Changes | Auto-Approve |
+|---------|--------|--------------|--------------|
+| `/cli:analyze` | Understand code | ❌ NO | N/A |
+| `/cli:chat` | Ask questions | ❌ NO | N/A |
+| `/cli:execute` | **Implement** | ✅ **YES** | ✅ **YES** |
+
 ## Notes
 
 - Command templates, YOLO mode details, and session management: see intelligent-tools-strategy.md (loaded in memory)
-- Auto-generated outputs: `.summaries/[TASK-ID]-summary.md`, `.chat/execute-[timestamp].md`
+- Output routing and scratchpad details: see workflow-architecture.md
+- **⚠️ Code Modification**: This command modifies code - execution logs document changes made

.claude/commands/cli/mode/bug-index.md

@@ -28,33 +28,66 @@ Systematic bug analysis with diagnostic template (`~/.claude/prompt-templates/bu
 
 ## Execution Flow
 
-1. Parse tool and directory options
-2. If `--enhance`: Execute `/enhance-prompt` to expand bug context
-3. Use bug-fix template: `~/.claude/prompt-templates/bug-fix.md`
-4. Execute with `--all-files` in target directory
-5. Save to `.workflow/WFS-[id]/.chat/bug-index-[timestamp].md`
+1. **Parse tool selection**: Extract `--tool` flag (default: gemini)
+2. **If `--enhance` flag present**: Execute `/enhance-prompt "[bug-description]"` first
+3. Parse bug description (original or enhanced)
+4. Detect target directory (from `--cd` or auto-infer)
+5. Build command for selected tool with bug-fix template
+6. Execute analysis (read-only, provides fix recommendations)
+7. Save to `.workflow/WFS-[id]/.chat/bug-index-[timestamp].md`
+
+## Core Rules
+
+1. **Analysis Only**: This command analyzes bugs and suggests fixes - it does NOT modify code
+2. **Enhance First (if flagged)**: Execute `/enhance-prompt` before analysis
+3. **Directory Context**: Use `cd` when `--cd` provided or auto-detected
+4. **Template Required**: Always use bug-fix template
+5. **Session Output**: Save analysis results and fix recommendations to session chat
 
 ## Analysis Focus (via Template)
 
-- Root cause investigation
-- Code path tracing
-- Targeted minimal fixes
-- Impact assessment
+- Root cause investigation and diagnosis
+- Code path tracing to locate issues
+- Targeted minimal fix recommendations
+- Impact assessment of proposed changes
+
+## Command Template
+
+```bash
+cd [directory] && ~/.claude/scripts/gemini-wrapper --all-files -p "
+PURPOSE: [bug analysis goal]
+TASK: Systematic bug analysis and fix recommendations
+MODE: analysis
+CONTEXT: @{CLAUDE.md,**/*CLAUDE.md} [entire codebase in directory]
+EXPECTED: Root cause analysis, code path tracing, targeted fix suggestions
+RULES: $(cat ~/.claude/prompt-templates/bug-fix.md) | Bug: [description]
+"
+```
 
 ## Examples
 
+**Basic Bug Analysis**:
 ```bash
-# Basic bug analysis
-/cli:mode:bug-index "null pointer in authentication"
+cd . && ~/.claude/scripts/gemini-wrapper --all-files -p "
+PURPOSE: Debug authentication null pointer error
+TASK: Identify root cause and provide fix recommendations
+MODE: analysis
+CONTEXT: @{CLAUDE.md,**/*CLAUDE.md}
+EXPECTED: Root cause, code path, minimal fix suggestion, impact assessment
+RULES: $(cat ~/.claude/prompt-templates/bug-fix.md) | Bug: null pointer in login flow
+"
+```
 
-# Directory-specific
-/cli:mode:bug-index --cd "src/auth" "token validation fails"
-
-# Enhanced description
-/cli:mode:bug-index --enhance "login broken"
-
-# Qwen for architecture-related bugs
-/cli:mode:bug-index --tool qwen "circular dependency in modules"
+**Directory-Specific**:
+```bash
+cd src/auth && ~/.claude/scripts/gemini-wrapper --all-files -p "
+PURPOSE: Fix token validation failure
+TASK: Analyze token validation bug in auth module
+MODE: analysis
+CONTEXT: @{CLAUDE.md,**/*CLAUDE.md}
+EXPECTED: Validation logic analysis, fix recommendation with minimal changes
+RULES: $(cat ~/.claude/prompt-templates/bug-fix.md) | Bug: token validation fails intermittently
+"
 ```
 
 ## Bug Investigation Workflow
@@ -62,13 +95,27 @@ Systematic bug analysis with diagnostic template (`~/.claude/prompt-templates/bu
 ```bash
 # 1. Find bug-related files
 rg "error_keyword" --files-with-matches
+mcp__code-index__search_code_advanced(pattern="error|exception", file_pattern="*.ts")
 
-# 2. Execute bug analysis with focused context
+# 2. Execute bug analysis with focused context (analysis only, no code changes)
 /cli:mode:bug-index --cd "src/module" "specific error description"
 ```
 
+## Output Routing
+
+**Output Destination Logic**:
+- **Active session exists AND bug is session-relevant**:
+  - Save to `.workflow/WFS-[id]/.chat/bug-index-[timestamp].md`
+- **No active session OR quick debugging**:
+  - Save to `.workflow/.scratchpad/bug-index-[description]-[timestamp].md`
+
+**Examples**:
+- During active session `WFS-payment-fix`, analyzing payment bug → `.chat/bug-index-20250105-143022.md`
+- No session, quick null pointer investigation → `.scratchpad/bug-index-null-pointer-20250105-143045.md`
+
 ## Notes
 
 - Command templates and file patterns: see intelligent-tools-strategy.md (loaded in memory)
+- Scratchpad directory details: see workflow-architecture.md
 - Template path: `~/.claude/prompt-templates/bug-fix.md`
 - Always uses `--all-files` for comprehensive codebase context

.claude/commands/cli/mode/code-analysis.md

@@ -28,48 +28,100 @@ Systematic code analysis with execution path tracing template (`~/.claude/prompt
 
 ## Execution Flow
 
-1. Parse tool and directory options
-2. If `--enhance`: Execute `/enhance-prompt` to expand analysis intent
-3. Use code-analysis template: `~/.claude/prompt-templates/code-analysis.md`
-4. Execute with `--all-files` in target directory
-5. Save to `.workflow/WFS-[id]/.chat/code-analysis-[timestamp].md`
+1. **Parse tool selection**: Extract `--tool` flag (default: gemini)
+2. **If `--enhance` flag present**: Execute `/enhance-prompt "[analysis-target]"` first
+3. Parse analysis target (original or enhanced)
+4. Detect target directory (from `--cd` or auto-infer)
+5. Build command for selected tool with code-analysis template
+6. Execute deep analysis (read-only, no code modification)
+7. Save to `.workflow/WFS-[id]/.chat/code-analysis-[timestamp].md`
+
+## Core Rules
+
+1. **Analysis Only**: This command analyzes code and provides insights - it does NOT modify code
+2. **Tool Selection**: Use `--tool` value or default to gemini
+3. **Enhance First (if flagged)**: Execute `/enhance-prompt` before analysis
+4. **Directory Context**: Use `cd` when `--cd` provided or auto-detected
+5. **Template Required**: Always use code-analysis template
+6. **Session Output**: Save analysis results to session chat
 
 ## Analysis Capabilities (via Template)
 
-- Execution path tracing with variable states
-- Call flow visualization and diagrams
-- Control & data flow analysis
-- Logical reasoning ("why" behind code behavior)
-- Debugging insights and inefficiency detection
+- **Systematic Code Analysis**: Break down complex code into manageable parts
+- **Execution Path Tracing**: Track variable states and call stacks
+- **Control & Data Flow**: Understand code logic and data transformations
+- **Call Flow Visualization**: Diagram function calling sequences
+- **Logical Reasoning**: Explain "why" behind code behavior
+- **Debugging Insights**: Identify potential bugs or inefficiencies
+
+## Command Template
+
+```bash
+cd [directory] && ~/.claude/scripts/gemini-wrapper --all-files -p "
+PURPOSE: [analysis goal]
+TASK: Systematic code analysis and execution path tracing
+MODE: analysis
+CONTEXT: @{CLAUDE.md,**/*CLAUDE.md} [entire codebase in directory]
+EXPECTED: Execution trace, call flow diagram, debugging insights
+RULES: $(cat ~/.claude/prompt-templates/code-analysis.md) | Focus on [aspect]
+"
+```
 
 ## Examples
 
+**Basic Code Analysis**:
 ```bash
-# Basic code analysis
-/cli:mode:code-analysis "trace authentication flow"
+cd . && ~/.claude/scripts/gemini-wrapper --all-files -p "
+PURPOSE: Trace authentication execution flow
+TASK: Analyze complete auth flow from request to response
+MODE: analysis
+CONTEXT: @{CLAUDE.md,**/*CLAUDE.md}
+EXPECTED: Step-by-step execution trace with call diagram, variable states
+RULES: $(cat ~/.claude/prompt-templates/code-analysis.md) | Focus on control flow
+"
+```
 
-# Directory-specific with enhancement
-/cli:mode:code-analysis --cd "src/auth" --enhance "how does JWT work"
-
-# Qwen for architecture analysis
-/cli:mode:code-analysis --tool qwen "explain microservices communication"
-
-# Codex for deep tracing
-/cli:mode:code-analysis --tool codex --cd "src/api" "trace request lifecycle"
+**Directory-Specific Analysis**:
+```bash
+cd src/auth && ~/.claude/scripts/gemini-wrapper --all-files -p "
+PURPOSE: Understand JWT token validation logic
+TASK: Trace JWT validation from middleware to service layer
+MODE: analysis
+CONTEXT: @{CLAUDE.md,**/*CLAUDE.md}
+EXPECTED: Validation flow diagram, token lifecycle analysis
+RULES: $(cat ~/.claude/prompt-templates/code-analysis.md) | Focus on security
+"
 ```
 
 ## Code Tracing Workflow
 
 ```bash
-# 1. Find entry points
-rg "function.*main|export.*handler" --files-with-matches
+# 1. Find entry points and related files
+rg "function.*authenticate|class.*AuthService" --files-with-matches
+mcp__code-index__search_code_advanced(pattern="authenticate|login", file_pattern="*.ts")
 
-# 2. Execute deep analysis
+# 2. Build call graph understanding
+# entry → middleware → service → repository
+
+# 3. Execute deep analysis (analysis only, no code changes)
 /cli:mode:code-analysis --cd "src" "trace execution from entry point"
 ```
 
+## Output Routing
+
+**Output Destination Logic**:
+- **Active session exists AND analysis is session-relevant**:
+  - Save to `.workflow/WFS-[id]/.chat/code-analysis-[timestamp].md`
+- **No active session OR standalone analysis**:
+  - Save to `.workflow/.scratchpad/code-analysis-[description]-[timestamp].md`
+
+**Examples**:
+- During active session `WFS-auth-refactor`, analyzing auth flow → `.chat/code-analysis-20250105-143022.md`
+- No session, tracing request lifecycle → `.scratchpad/code-analysis-request-flow-20250105-143045.md`
+
 ## Notes
 
 - Command templates and file patterns: see intelligent-tools-strategy.md (loaded in memory)
+- Scratchpad directory details: see workflow-architecture.md
 - Template path: `~/.claude/prompt-templates/code-analysis.md`
 - Always uses `--all-files` for comprehensive code context

.claude/commands/cli/mode/plan.md

@@ -28,48 +28,98 @@ Comprehensive planning and architecture analysis with strategic planning templat
 
 ## Execution Flow
 
-1. Parse tool and directory options
-2. If `--enhance`: Execute `/enhance-prompt` to expand planning context
-3. Use planning template: `~/.claude/prompt-templates/plan.md`
-4. Execute with `--all-files` in target directory
-5. Save to `.workflow/WFS-[id]/.chat/plan-[timestamp].md`
+1. **Parse tool selection**: Extract `--tool` flag (default: gemini)
+2. **If `--enhance` flag present**: Execute `/enhance-prompt "[topic]"` first
+3. Parse topic (original or enhanced)
+4. Detect target directory (from `--cd` or auto-infer)
+5. Build command for selected tool with planning template
+6. Execute analysis (read-only, no code modification)
+7. Save to `.workflow/WFS-[id]/.chat/plan-[timestamp].md`
+
+## Core Rules
+
+1. **Analysis Only**: This command provides planning recommendations and insights - it does NOT modify code
+2. **Enhance First (if flagged)**: Execute `/enhance-prompt` before planning
+3. **Directory Context**: Use `cd` when `--cd` provided or auto-detected
+4. **Template Required**: Always use planning template
+5. **Session Output**: Save analysis results to session chat
 
 ## Planning Capabilities (via Template)
 
-- Strategic architecture insights
-- Implementation roadmaps
-- Key technical decisions
+- Strategic architecture insights and recommendations
+- Implementation roadmaps and suggestions
+- Key technical decisions analysis
 - Risk assessment
 - Resource planning
 
-## Examples
+## Command Template
 
 ```bash
-# Basic planning
-/cli:mode:plan "design user dashboard"
+cd [directory] && ~/.claude/scripts/gemini-wrapper --all-files -p "
+PURPOSE: [planning goal from topic]
+TASK: Comprehensive planning and architecture analysis
+MODE: analysis
+CONTEXT: @{CLAUDE.md,**/*CLAUDE.md} [entire codebase in directory]
+EXPECTED: Strategic insights, implementation recommendations, key decisions
+RULES: $(cat ~/.claude/prompt-templates/plan.md) | Focus on [topic area]
+"
+```
 
-# Enhanced with directory scope
-/cli:mode:plan --cd "src/api" --enhance "plan API refactoring"
+## Examples
 
-# Qwen for architecture planning
-/cli:mode:plan --tool qwen "plan microservices migration"
+**Basic Planning Analysis**:
+```bash
+cd . && ~/.claude/scripts/gemini-wrapper --all-files -p "
+PURPOSE: Design user dashboard architecture
+TASK: Plan dashboard component structure and data flow
+MODE: analysis
+CONTEXT: @{CLAUDE.md,**/*CLAUDE.md}
+EXPECTED: Architecture recommendations, component design, data flow diagram
+RULES: $(cat ~/.claude/prompt-templates/plan.md) | Focus on scalability
+"
+```
 
-# Codex for technical planning
-/cli:mode:plan --tool codex "plan testing strategy"
+**Directory-Specific Planning**:
+```bash
+cd src/api && ~/.claude/scripts/gemini-wrapper --all-files -p "
+PURPOSE: Plan API refactoring strategy
+TASK: Analyze current API structure and recommend improvements
+MODE: analysis
+CONTEXT: @{CLAUDE.md,**/*CLAUDE.md}
+EXPECTED: Refactoring roadmap, breaking change analysis, migration plan
+RULES: $(cat ~/.claude/prompt-templates/plan.md) | Maintain backward compatibility
+"
 ```
 
 ## Planning Workflow
 
 ```bash
-# 1. Gather existing architecture info
+# 1. Discover project structure
+~/.claude/scripts/get_modules_by_depth.sh
+mcp__code-index__find_files(pattern="*.ts")
+
+# 2. Gather existing architecture info
 rg "architecture|design" --files-with-matches
 
-# 2. Execute planning analysis
+# 3. Execute planning analysis (analysis only, no code changes)
 /cli:mode:plan "topic for strategic planning"
 ```
 
+## Output Routing
+
+**Output Destination Logic**:
+- **Active session exists AND planning is session-relevant**:
+  - Save to `.workflow/WFS-[id]/.chat/plan-[timestamp].md`
+- **No active session OR exploratory planning**:
+  - Save to `.workflow/.scratchpad/plan-[description]-[timestamp].md`
+
+**Examples**:
+- During active session `WFS-dashboard`, planning dashboard architecture → `.chat/plan-20250105-143022.md`
+- No session, exploring new feature idea → `.scratchpad/plan-feature-idea-20250105-143045.md`
+
 ## Notes
 
 - Command templates and file patterns: see intelligent-tools-strategy.md (loaded in memory)
+- Scratchpad directory details: see workflow-architecture.md
 - Template path: `~/.claude/prompt-templates/plan.md`
 - Always uses `--all-files` for comprehensive project context

.claude/commands/update-memory-full.md

@@ -45,7 +45,7 @@ count=$(echo "$modules" | wc -l)
 
 # Pseudocode flow:
 # IF (module_count > 20 OR complex_project_detected):
-#     → Task "Complex project full update" subagent_type: "memory-gemini-bridge"
+#     → Task "Complex project full update" subagent_type: "memory-bridge"
 # ELSE:
 #     → Present plan and WAIT FOR USER APPROVAL before execution
 #
@@ -60,7 +60,7 @@ After the bash script completes the initial analysis, the model takes control to
 2. **Parse CLAUDE.md Status**: Extract which modules have/need CLAUDE.md files
 3. **Choose Strategy**:
    - Simple projects: Present execution plan with CLAUDE.md paths to user
-   - Complex projects: Delegate to memory-gemini-bridge agent
+   - Complex projects: Delegate to memory-bridge agent
 4. **Present Detailed Plan**: Show user exactly which CLAUDE.md files will be created/updated
 5. **⚠️ CRITICAL: WAIT FOR USER APPROVAL**: No execution without explicit user consent
 
@@ -120,11 +120,11 @@ Bash(git status --short)
 
 **For Complex Projects (>20 modules):**
 
-The model will delegate to the memory-gemini-bridge agent with structured context:
+The model will delegate to the memory-bridge agent with structured context:
 
 ```javascript
 Task "Complex project full update"
-subagent_type: "memory-gemini-bridge"
+subagent_type: "memory-bridge"
 prompt: `
 CONTEXT:
 - Total modules: ${module_count}

.claude/commands/update-memory-related.md

@@ -51,7 +51,7 @@ count=$(echo "$changed" | wc -l)
 
 # Pseudocode flow:
 # IF (change_count > 15 OR complex_changes_detected):
-#     → Task "Complex project related update" subagent_type: "memory-gemini-bridge"
+#     → Task "Complex project related update" subagent_type: "memory-bridge"
 # ELSE:
 #     → Present plan and WAIT FOR USER APPROVAL before execution
 #
@@ -66,7 +66,7 @@ After the bash script completes change detection, the model takes control to:
 2. **Parse CLAUDE.md Status**: Extract which changed modules have/need CLAUDE.md files
 3. **Choose Strategy**: 
    - Simple changes: Present execution plan with CLAUDE.md paths to user
-   - Complex changes: Delegate to memory-gemini-bridge agent
+   - Complex changes: Delegate to memory-bridge agent
 4. **Present Detailed Plan**: Show user exactly which CLAUDE.md files will be created/updated for changed modules
 5. **⚠️ CRITICAL: WAIT FOR USER APPROVAL**: No execution without explicit user consent
 
@@ -127,11 +127,11 @@ Bash(git diff --stat)
 
 **For Complex Changes (>15 modules):**
 
-The model will delegate to the memory-gemini-bridge agent with structured context:
+The model will delegate to the memory-bridge agent with structured context:
 
 ```javascript
 Task "Complex project related update"
-subagent_type: "memory-gemini-bridge"
+subagent_type: "memory-bridge"
 prompt: `
 CONTEXT:
 - Total modules: ${change_count}

.claude/commands/workflow/design/auto.md

@@ -0,0 +1,380 @@
+---
+name: auto
+description: Orchestrate UI design refinement workflow with interactive checkpoints for user selection
+usage: /workflow:design:auto --session <session_id> --images "<glob>" --pages "<list>" [--variants <count>] [--batch-plan]
+argument-hint: "--session WFS-session-id --images \"refs/*.png\" --pages \"dashboard,auth\" [--variants 2] [--batch-plan]"
+examples:
+  - /workflow:design:auto --session WFS-auth --images "design-refs/*.png" --pages "login,register"
+  - /workflow:design:auto --session WFS-dashboard --images "refs/*.jpg" --pages "dashboard" --variants 3 --batch-plan
+allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*)
+---
+
+# UI Design Auto Workflow Command
+
+## Overview
+Semi-autonomous UI design workflow with interactive checkpoints: style extraction → **user selection** → consolidation → UI generation → **user confirmation** → design update → optional batch planning.
+
+## Coordinator Role
+**Checkpoint-based orchestrator**: Execute Phase 1 automatically, pause for user style selection, execute Phase 3, pause for user prototype confirmation, complete with optional batch task generation.
+
+## Execution Model - Checkpoint Workflow
+
+This workflow runs **semi-autonomously** with user checkpoints:
+
+1. **User triggers**: `/workflow:design:auto --session WFS-xxx --images "refs/*.png" --pages "dashboard,auth" [--batch-plan]`
+2. **Phase 1 executes** (style-extract) → Reports style cards → **⏸️ PAUSE FOR USER SELECTION**
+3. **User selects variants** → Runs `style-consolidate --variants "..."` → Auto-continues
+4. **Phase 3 executes** (ui-generate) → Reports prototypes → **⏸️ PAUSE FOR USER CONFIRMATION**
+5. **User confirms prototypes** → Runs `design-update --selected-prototypes "..."` → Auto-continues
+6. **Phase 5 executes** (batch-plan, optional) → Reports task files
+
+**Checkpoint Mechanism**:
+- TodoWrite tracks current phase with "awaiting_user_confirmation" status
+- System reports output location and exact command for next step
+- User runs provided command to continue workflow
+- Workflow resumes automatically after user input
+
+## 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. **Pause at Checkpoints**: After Phase 1 and Phase 3, pause and prompt user with exact command to continue
+5. **User-Driven Continuation**: Workflow resumes when user runs style-consolidate or design-update commands
+6. **Track Progress**: Update TodoWrite after every phase completion and checkpoint
+
+## 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**:
+- `--variants <count>`: Number of UI variants per page (default: 1)
+- `--batch-plan`: Auto-generate implementation tasks for selected prototypes after design-update
+
+## 5-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
+- List available style variant IDs
+
+**Validation**:
+- Style cards successfully generated
+- At least one style variant available
+
+**TodoWrite**: Mark phase 1 completed, mark checkpoint "awaiting_user_confirmation"
+
+**⏸️ CHECKPOINT 1: Pause for User Style Selection**
+
+```
+Phase 1 Complete: Style Extraction
+Style cards generated: {count}
+Available variants: {variant_ids}
+Location: .workflow/WFS-{session}/.design/style-extraction/
+
+⏸️  USER SELECTION REQUIRED
+Review style cards and select your preferred variants.
+Then run:
+
+/workflow:design:style-consolidate --session WFS-{session} --variants "{variant_ids}"
+
+Example: /workflow:design:style-consolidate --session WFS-{session} --variants "variant-1,variant-3"
+```
+
+---
+
+### Phase 2: Style Consolidation (User-Triggered)
+**User Command**: `/workflow:design:style-consolidate --session {session_id} --variants "{selected_variants}"`
+
+**After user runs command**:
+- Workflow automatically continues to Phase 3
+- Parse output: token_count, validation_status
+
+**TodoWrite**: Mark phase 2 completed, phase 3 in_progress
+
+**Output**:
+```
+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 (Auto-Triggered after Phase 2)
+**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`, `generated_files` list
+
+**Validation**:
+- All requested pages generated
+- HTML and CSS files present for each variant
+
+**TodoWrite**: Mark phase 3 completed, mark checkpoint "awaiting_user_confirmation"
+
+**⏸️ CHECKPOINT 2: Pause for User Prototype Confirmation**
+
+```
+Phase 3 Complete: UI Generation
+Prototypes generated: {count} ({page_list})
+Generated files: {file_list}
+Location: .workflow/WFS-{session}/.design/prototypes/
+
+⏸️  USER CONFIRMATION REQUIRED
+Review the generated prototypes and select your preferred variants.
+Then run:
+
+/workflow:design:design-update --session WFS-{session} --selected-prototypes "{prototype_ids}"
+
+Example: /workflow:design:design-update --session WFS-{session} --selected-prototypes "dashboard-variant-1,auth-variant-2"
+
+Or to use all generated prototypes:
+/workflow:design:design-update --session WFS-{session}
+```
+
+---
+
+### Phase 4: Design System Integration (User-Triggered)
+**User Command**: `/workflow:design:design-update --session {session_id} [--selected-prototypes "{selected_prototypes}"]`
+
+**After user runs command**:
+- Workflow updates brainstorming artifacts
+- If --batch-plan flag present, automatically continues to Phase 5
+
+**Parse Output**:
+- Verify: `synthesis-specification.md` updated
+- Verify: `ui-designer/style-guide.md` created/updated
+
+**TodoWrite**: Mark phase 4 completed
+
+**Output** (if --batch-plan NOT present):
+```
+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)
+```
+
+**Output** (if --batch-plan present):
+```
+Phase 4 Complete: Design System Integration
+Updated Artifacts:
+✓ synthesis-specification.md
+✓ ui-designer/style-guide.md
+
+Continuing to Phase 5: Batch Task Generation...
+```
+
+---
+
+### Phase 5: Batch Task Generation (Optional, Auto-Triggered if --batch-plan)
+**Condition**: Only executes if `--batch-plan` flag present
+
+**Execution**:
+```bash
+FOR each page IN selected_prototypes_pages:
+  SlashCommand(command="/workflow:plan --agent \"Implement {page} page based on design system\"")
+
+  # Parse output task file location
+  task_files.add(output_location)
+```
+
+**TodoWrite**: Mark phase 5 completed
+
+**Return to User**:
+```
+Phase 5 Complete: Batch Task Generation
+Tasks generated for: {page_count} pages
+
+Generated task files:
+{task_file_list}
+
+Design workflow complete for session: WFS-{session}
+
+Next: /workflow:execute
+```
+
+## 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.

.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.

.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"
+```

.claude/commands/workflow/design/style-extract.md

@@ -0,0 +1,244 @@
+---
+name: style-extract
+description: Extract design style from reference images using triple vision analysis (Claude Code + Gemini + 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: TodoWrite(*), Read(*), Write(*), Bash(*), Glob(*)
+---
+
+# Style Extraction Command
+
+## Overview
+Extract design style elements from reference images using triple vision analysis: Claude Code's native vision, Gemini Vision for semantic understanding, and Codex for structured token generation.
+
+## Core Philosophy
+- **Triple Vision Analysis**: Combine Claude Code, Gemini Vision, and Codex vision capabilities
+- **Comprehensive Coverage**: Claude Code for quick analysis, Gemini for deep semantic understanding, Codex for structured output
+- **Consensus-Based Extraction**: Synthesize results from all three sources
+- **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: Claude Code Vision Analysis (Quick Initial Pass)
+**Direct Execution**: Use Read tool with image paths
+
+```bash
+# Claude Code's native vision capability for quick initial analysis
+FOR each image IN expanded_image_paths:
+  Read({image_path})
+  # Claude Code analyzes image and extracts basic patterns
+
+# Write preliminary analysis
+Write(.workflow/WFS-{session}/.design/style-extraction/claude_vision_analysis.json)
+```
+
+**Output**: `claude_vision_analysis.json` with Claude Code's initial observations
+
+### Phase 3: Gemini Vision Analysis (Deep Semantic Understanding)
+**Direct Bash Execution**: No agent wrapper
+
+```bash
+bash(cd .workflow/WFS-{session}/.design/style-extraction && \
+  ~/.claude/scripts/gemini-wrapper --approval-mode yolo -p "
+    PURPOSE: Extract deep design semantics from reference images
+    TASK: Analyze color palettes, typography, spacing, layout principles, component styles, design philosophy
+    MODE: write
+    CONTEXT: @{../../{image_paths}}
+    EXPECTED: JSON with comprehensive semantic style description (colors with names, font characteristics, spacing scale, design philosophy, UI patterns)
+    RULES: Focus on extracting semantic meaning and design intent, not exact pixel values. Identify design system patterns.
+  ")
+
+# Output: gemini_vision_analysis.json
+```
+
+**Output**: `gemini_vision_analysis.json` with Gemini's deep semantic analysis
+
+### Phase 4: Codex Vision Analysis (Structured Pattern Recognition)
+**Direct Bash Execution**: Codex with -i parameter
+
+```bash
+bash(codex -C .workflow/WFS-{session}/.design/style-extraction --full-auto -i {image_paths} exec "
+  PURPOSE: Analyze reference images for structured design patterns
+  TASK: Extract color values, typography specs, spacing measurements, component patterns
+  MODE: auto
+  CONTEXT: Reference images provided via -i parameter
+  EXPECTED: Structured JSON with precise design specifications
+  RULES: Focus on measurable design attributes and component patterns
+" --skip-git-repo-check -s danger-full-access)
+
+# Output: codex_vision_analysis.json
+```
+
+**Output**: `codex_vision_analysis.json` with Codex's structured analysis
+
+### Phase 5: Synthesis of Triple Vision Analysis
+**Direct Execution**: Main Claude synthesizes all three analyses
+
+```bash
+# Read all three vision analysis results
+Read(.workflow/WFS-{session}/.design/style-extraction/claude_vision_analysis.json)
+Read(.workflow/WFS-{session}/.design/style-extraction/gemini_vision_analysis.json)
+Read(.workflow/WFS-{session}/.design/style-extraction/codex_vision_analysis.json)
+
+# Load optional session context
+Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md) [optional]
+
+# Synthesize consensus analysis
+# Main Claude identifies common patterns, resolves conflicts, creates unified semantic analysis
+Write(.workflow/WFS-{session}/.design/style-extraction/semantic_style_analysis.json)
+```
+
+**Synthesis Strategy**:
+- **Color system**: Consensus from all three sources, prefer Codex for precise values
+- **Typography**: Gemini for semantic understanding, Codex for measurements
+- **Spacing**: Cross-validate across all three,identify consistent patterns
+- **Design philosophy**: Weighted combination with Gemini having highest weight
+- **Conflict resolution**: Majority vote or use context from synthesis-specification.md
+
+**Output**: `semantic_style_analysis.json` - unified analysis synthesizing all three sources
+
+### Phase 6: Structured Token Generation
+**Direct Bash Execution**: Codex generates CSS tokens
+
+```bash
+bash(codex -C .workflow/WFS-{session}/.design/style-extraction --full-auto exec "
+  PURPOSE: Convert synthesized semantic analysis to structured CSS design tokens
+  TASK: Generate W3C-compliant design tokens, Tailwind config, and style card variants
+  MODE: auto
+  CONTEXT: @{semantic_style_analysis.json,../../../../CLAUDE.md}
+  EXPECTED: design-tokens.json (OKLCH format), tailwind-tokens.js, style-cards.json (3 variants)
+  RULES: $(cat ~/.claude/workflows/design-tokens-schema.md) | OKLCH colors, rem spacing, semantic naming
+" --skip-git-repo-check -s danger-full-access)
+```
+
+**Output**:
+- `design-tokens.json`: W3C-compliant tokens in OKLCH format
+- `tailwind-tokens.js`: Tailwind theme extension
+- `style-cards.json`: 3 style variant cards for user selection
+   - 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]
+```

.claude/commands/workflow/design/ui-generate.md

@@ -0,0 +1,316 @@
+---
+name: ui-generate
+description: Generate UI prototypes using consolidated design tokens with optional style overrides
+usage: /workflow:design:ui-generate --session <session_id> --pages "<page_list>" [--variants <count>] [--style-overrides "<path_or_json>"]
+argument-hint: "--session WFS-session-id --pages \"dashboard,auth\" [--variants 2] [--style-overrides \"overrides.json\"]"
+examples:
+  - /workflow:design:ui-generate --session WFS-auth --pages "login,register"
+  - /workflow:design:ui-generate --session WFS-dashboard --pages "dashboard" --variants 3 --style-overrides "overrides.json"
+allowed-tools: 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}
+```

.claude/commands/workflow/tools/docs.md

@@ -1,256 +1,590 @@
 ---
 name: docs
-description: Generate hierarchical architecture and API documentation using doc-generator agent with flow_control
-usage: /workflow:docs <type> [scope]
-argument-hint: "architecture"|"api"|"all"
+description: Documentation planning and orchestration - creates structured documentation tasks for execution
+usage: /workflow:docs <type> [options]
+argument-hint: "architecture"|"api"|"all" [--tool <gemini|qwen|codex>] [--scope <path>]
 examples:
-  - /workflow:docs all
-  - /workflow:docs architecture src/modules
-  - /workflow:docs api --scope api/
+  - /workflow:docs all                          # Complete documentation (gemini default)
+  - /workflow:docs all --tool qwen              # Use Qwen for architecture focus
+  - /workflow:docs architecture --scope src/modules
+  - /workflow:docs api --tool gemini --scope api/
 ---
 
 # Workflow Documentation Command
 
+## Purpose
+
+**`/workflow:docs` is a pure planner/orchestrator** - it analyzes project structure, decomposes documentation work into tasks, and generates execution plans. It does **NOT** generate any documentation content itself.
+
+**Key Principle**: Separation of Concerns
+- **docs.md** → Planning, session creation, task generation
+- **doc-generator.md** → Execution, content generation, quality assurance
+
 ## Usage
+
 ```bash
-/workflow:docs <type> [scope]
+/workflow:docs <type> [--tool <gemini|qwen|codex>] [--scope <path>]
 ```
 
-## Input Detection
-- **Document Types**: `architecture`, `api`, `all` → Creates appropriate documentation tasks
-- **Scope**: Optional module/directory filtering → Focuses documentation generation
-- **Default**: `all` → Complete documentation suite
+### Parameters
 
-## Core Workflow
+- **type**: `architecture` | `api` | `all` (required)
+  - `architecture`: System design, module interactions, patterns
+  - `api`: Endpoint documentation, API specifications
+  - `all`: Complete documentation suite
 
-### Planning & Task Creation Process
-The command performs structured planning and task creation:
+- **--tool**: `gemini` | `qwen` | `codex` (optional, default: gemini)
+  - `gemini`: Comprehensive documentation, pattern recognition
+  - `qwen`: Architecture analysis, system design focus
+  - `codex`: Implementation validation, code quality
 
-**0. Pre-Planning Architecture Analysis** ⚠️ MANDATORY FIRST STEP
-- **System Structure Analysis**: MUST run `bash(~/.claude/scripts/get_modules_by_depth.sh)` for dynamic task decomposition
-- **Module Boundary Identification**: Understand module organization and dependencies
-- **Architecture Pattern Recognition**: Identify architectural styles and design patterns
-- **Foundation for documentation**: Use structure analysis to guide task decomposition
+- **--scope**: Directory path filter (optional)
 
-**1. Documentation Planning**
-- **Type Analysis**: Determine documentation scope (architecture/api/all)
-- **Module Discovery**: Use architecture analysis results to identify components
-- **Dynamic Task Decomposition**: Analyze project structure to determine optimal task count and module grouping
-- **Session Management**: Create or use existing documentation session
+## Planning Workflow
 
-**2. Task Generation**
-- **Create session**: `.workflow/WFS-docs-[timestamp]/`
-- **Create active marker**: `.workflow/.active-WFS-docs-[timestamp]` (must match session folder name)
-- **Generate IMPL_PLAN.md**: Documentation requirements and task breakdown
-- **Create task.json files**: Individual documentation tasks with flow_control
-- **Setup TODO_LIST.md**: Progress tracking for documentation generation
+### Complete Execution Flow
 
-### Session Management ⚠️ CRITICAL
-- **Check for active sessions**: Look for `.workflow/.active-WFS-docs-*` markers
-- **Marker naming**: Active marker must exactly match session folder name
-- **Session creation**: `WFS-docs-[timestamp]` folder with matching `.active-WFS-docs-[timestamp]` marker
-- **Task execution**: Use `/workflow:execute` to run individual documentation tasks within active session
-- **Session isolation**: Each documentation session maintains independent context and state
+```
+/workflow:docs [type] [--tool] [--scope]
+    ↓
+Phase 1: Init Session → Create session dir & active marker
+    ↓
+Phase 2: Module Analysis → Run get_modules_by_depth.sh
+    ↓
+Phase 3: Quick Assess → Check existing docs
+    ↓
+Phase 4: Decompose → Create task list & TodoWrite
+    ↓
+Phase 5: Generate Tasks → Build IMPL-*.json & plans
+    ↓
+✅ Planning Complete → Show TodoWrite status
+```
 
-## Output Structure
+### Phase Details
+
+#### Phase 1: Session Initialization
+```bash
+# Parse arguments and create session structure
+doc_type="all"  # architecture|api|all
+tool="gemini"   # gemini|qwen|codex (default: gemini)
+scope=""        # optional path filter
+
+timestamp=$(date +%Y%m%d-%H%M%S)
+session_dir=".workflow/WFS-docs-${timestamp}"
+mkdir -p "${session_dir}"/{.task,.process,.summaries}
+touch ".workflow/.active-WFS-docs-${timestamp}"
+```
+
+#### Phase 2: Project Structure Analysis (MANDATORY)
+```bash
+# Run get_modules_by_depth.sh for module hierarchy
+module_data=$(~/.claude/scripts/get_modules_by_depth.sh)
+# Format: depth:N|path:<PATH>|files:N|size:N|has_claude:yes/no
+```
+
+#### Phase 3: Quick Documentation Assessment
+```bash
+# Lightweight check - no heavy analysis
+existing_docs=$(find . -maxdepth 2 -name "*.md" -not -path "./.workflow/*" | wc -l)
+
+if [[ $existing_docs -gt 5 ]]; then
+    find . -maxdepth 3 -name "*.md" > "${session_dir}/.process/existing-docs.txt"
+fi
+
+# Record strategy
+cat > "${session_dir}/.process/strategy.md" <<EOF
+**Type**: ${doc_type}
+**Tool**: ${tool}
+**Scope**: ${scope:-"Full project"}
+EOF
+```
+
+#### Phase 4: Task Decomposition & TodoWrite Setup
+
+**Decomposition Strategy**:
+1. **Always create**: System Overview task (IMPL-001)
+2. **If architecture/all**: Architecture Documentation task
+3. **If api/all**: Unified API Documentation task
+4. **For each module**: Module Documentation task (grouped)
+
+**Grouping Rules**:
+- Max 3 modules per task
+- Max 30 files per task
+- Group by dependency depth and functional similarity
+
+**TodoWrite Setup**:
+```
+✅ Session initialization (completed)
+⏳ IMPL-001: Project Overview (pending)
+⏳ IMPL-002: Module 'auth' (pending)
+⏳ IMPL-003: Module 'api' (pending)
+⏳ IMPL-004: Architecture Documentation (pending)
+⏳ IMPL-005: API Documentation (pending)
+```
+
+#### Phase 5: Task JSON Generation
+
+Each task follows the 5-field schema with detailed flow_control.
+
+**Command Generation Logic**:
+```bash
+# Build tool-specific command at planning time
+if [[ "$tool" == "codex" ]]; then
+    cmd="codex -C ${dir} --full-auto exec \"...\""
+else
+    cmd="bash(cd ${dir} && ~/.claude/scripts/${tool}-wrapper -p \"...\")"
+fi
+```
+
+## Task Templates
+
+### 1. System Overview (IMPL-001)
+**Purpose**: Project-level documentation
+**Output**: `.workflow/docs/README.md`
+
+**Complete JSON Structure**:
+```json
+{
+  "id": "IMPL-001",
+  "title": "Generate Project Overview Documentation",
+  "status": "pending",
+  "meta": {
+    "type": "docs",
+    "agent": "@doc-generator",
+    "tool": "gemini",
+    "template": "project-overview"
+  },
+  "context": {
+    "requirements": [
+      "Document project purpose, architecture, and getting started guide",
+      "Create navigation structure for all documentation",
+      "Use Project-Level Documentation Template"
+    ],
+    "focus_paths": ["."],
+    "acceptance": [
+      "Complete .workflow/docs/README.md following template",
+      "All template sections populated with accurate information",
+      "Navigation links to module and API documentation"
+    ],
+    "scope": "Project root and overall structure"
+  },
+  "flow_control": {
+    "pre_analysis": [
+      {
+        "step": "discover_project_structure",
+        "action": "Analyze project structure and modules",
+        "command": "bash(~/.claude/scripts/get_modules_by_depth.sh)",
+        "output_to": "system_structure"
+      },
+      {
+        "step": "discover_project_files",
+        "action": "Identify key project files",
+        "command": "bash(find . -maxdepth 2 -type f \\( -name '*.json' -o -name '*.md' -o -name '*.yml' -o -name '*.yaml' \\) | head -30)",
+        "output_to": "project_files"
+      },
+      {
+        "step": "analyze_tech_stack",
+        "action": "Analyze technology stack and dependencies",
+        "command": "bash(~/.claude/scripts/gemini-wrapper -p \"PURPOSE: Analyze project technology stack\\nTASK: Extract tech stack, architecture patterns, design principles\\nMODE: analysis\\nCONTEXT: System structure: [system_structure]\\n         Project files: [project_files]\\nEXPECTED: Technology analysis with architecture style\\nRULES: $(cat ~/.claude/workflows/cli-templates/prompts/documentation/project-overview.txt)\")",
+        "output_to": "tech_analysis",
+        "on_error": "fail",
+        "note": "Command is built at planning time based on $tool variable (gemini/qwen/codex)"
+      }
+    ],
+    "implementation_approach": {
+      "task_description": "Use tech_analysis to populate Project-Level Documentation Template",
+      "logic_flow": [
+        "Load template: ~/.claude/workflows/cli-templates/prompts/documentation/project-overview.txt",
+        "Parse tech_analysis for: purpose, architecture, tech stack, design principles",
+        "Fill template sections with extracted information",
+        "Generate navigation links to module/API docs",
+        "Format output as Markdown"
+      ]
+    },
+    "target_files": [".workflow/docs/README.md"]
+  }
+}
+```
+
+### 2. Module Documentation (IMPL-002+)
+**Purpose**: Module-level documentation
+**Output**: `.workflow/docs/modules/[name]/README.md`
+
+**Complete JSON Structure**:
+```json
+{
+  "id": "IMPL-002",
+  "title": "Document Module: 'auth'",
+  "status": "pending",
+  "meta": {
+    "type": "docs",
+    "agent": "@doc-generator",
+    "tool": "gemini",
+    "template": "module-documentation"
+  },
+  "context": {
+    "requirements": [
+      "Document module purpose, internal architecture, public API",
+      "Include dependencies and usage examples",
+      "Use Module-Level Documentation Template"
+    ],
+    "focus_paths": ["src/auth"],
+    "acceptance": [
+      "Complete .workflow/docs/modules/auth/README.md",
+      "All exported functions/classes documented",
+      "Working code examples included"
+    ],
+    "scope": "auth module only"
+  },
+  "flow_control": {
+    "pre_analysis": [
+      {
+        "step": "load_system_context",
+        "action": "Load system architecture from IMPL-001",
+        "command": "bash(cat .workflow/WFS-docs-*/IMPL-001-system_structure.output 2>/dev/null || ~/.claude/scripts/get_modules_by_depth.sh)",
+        "output_to": "system_context",
+        "on_error": "skip_optional"
+      },
+      {
+        "step": "analyze_module_structure",
+        "action": "Deep analysis of module structure and API",
+        "command": "bash(cd src/auth && ~/.claude/scripts/gemini-wrapper -p \"PURPOSE: Document module comprehensively\\nTASK: Extract module purpose, architecture, public API, dependencies\\nMODE: analysis\\nCONTEXT: @{**/*}\\n         System: [system_context]\\nEXPECTED: Complete module analysis for documentation\\nRULES: $(cat ~/.claude/workflows/cli-templates/prompts/documentation/module-documentation.txt)\")",
+        "output_to": "module_analysis",
+        "on_error": "fail",
+        "note": "For qwen: qwen-wrapper | For codex: codex -C src/auth --full-auto exec \"...\" --skip-git-repo-check"
+      }
+    ],
+    "implementation_approach": {
+      "task_description": "Use module_analysis to populate Module-Level Documentation Template",
+      "logic_flow": [
+        "Load template: ~/.claude/workflows/cli-templates/prompts/documentation/module-documentation.txt",
+        "Parse module_analysis for: purpose, components, API, dependencies",
+        "Fill template sections with extracted information",
+        "Generate code examples from actual usage",
+        "Format output as Markdown"
+      ]
+    },
+    "target_files": [".workflow/docs/modules/auth/README.md"]
+  }
+}
+```
+
+### 3. Architecture Documentation (if requested)
+**Purpose**: System design and patterns
+**Output**: `.workflow/docs/architecture/`
+
+**Complete JSON Structure**:
+```json
+{
+  "id": "IMPL-N-1",
+  "title": "Generate Architecture Documentation",
+  "status": "pending",
+  "meta": {
+    "type": "docs",
+    "agent": "@doc-generator",
+    "tool": "qwen",
+    "template": "architecture"
+  },
+  "context": {
+    "requirements": [
+      "Document system design patterns and architectural decisions",
+      "Create module interaction diagrams",
+      "Explain data flow and component relationships"
+    ],
+    "focus_paths": ["."],
+    "acceptance": [
+      "Complete architecture documentation in .workflow/docs/architecture/",
+      "Diagrams explaining system design",
+      "Clear explanation of architectural patterns"
+    ]
+  },
+  "flow_control": {
+    "pre_analysis": [
+      {
+        "step": "load_all_module_docs",
+        "action": "Aggregate all module documentation",
+        "command": "bash(find .workflow/docs/modules -name 'README.md' -exec cat {} \\;)",
+        "output_to": "module_docs",
+        "on_error": "fail"
+      },
+      {
+        "step": "analyze_architecture",
+        "action": "Synthesize system architecture from modules",
+        "command": "bash(~/.claude/scripts/gemini-wrapper -p \"PURPOSE: Synthesize system architecture\\nTASK: Create architecture documentation from module docs\\nMODE: analysis\\nCONTEXT: [module_docs]\\nEXPECTED: Architecture documentation with patterns\\nRULES: $(cat ~/.claude/workflows/cli-templates/prompts/documentation/project-overview.txt) | Focus on design patterns, data flow, component interactions\")",
+        "output_to": "architecture_analysis",
+        "on_error": "fail",
+        "note": "Command varies: gemini-wrapper (default) | qwen-wrapper | codex exec"
+      }
+    ],
+    "implementation_approach": {
+      "task_description": "Create architecture documentation from synthesis",
+      "logic_flow": [
+        "Parse architecture_analysis for patterns and design decisions",
+        "Create text-based diagrams (mermaid/ASCII) for module interactions",
+        "Document data flow between components",
+        "Explain architectural decisions and trade-offs",
+        "Format as structured documentation"
+      ]
+    },
+    "target_files": [
+      ".workflow/docs/architecture/system-design.md",
+      ".workflow/docs/architecture/module-map.md",
+      ".workflow/docs/architecture/data-flow.md"
+    ]
+  }
+}
+```
+
+### 4. API Documentation (if requested)
+**Purpose**: API reference and specifications
+**Output**: `.workflow/docs/api/README.md`
+
+**Complete JSON Structure**:
+```json
+{
+  "id": "IMPL-N",
+  "title": "Generate Unified API Documentation",
+  "status": "pending",
+  "meta": {
+    "type": "docs",
+    "agent": "@doc-generator",
+    "tool": "gemini",
+    "template": "api-reference"
+  },
+  "context": {
+    "requirements": [
+      "Document all API endpoints with request/response formats",
+      "Include authentication and error handling",
+      "Generate OpenAPI specification if applicable",
+      "Use API-Level Documentation Template"
+    ],
+    "focus_paths": ["src/api", "src/routes", "src/controllers"],
+    "acceptance": [
+      "Complete .workflow/docs/api/README.md following template",
+      "All endpoints documented with examples",
+      "OpenAPI spec generated if REST API detected"
+    ]
+  },
+  "flow_control": {
+    "pre_analysis": [
+      {
+        "step": "discover_api_endpoints",
+        "action": "Find all API routes and endpoints",
+        "command": "bash(rg -t ts -t js '(router\\.|app\\.|@(Get|Post|Put|Delete|Patch))' src/ --no-heading | head -100)",
+        "output_to": "endpoint_discovery",
+        "on_error": "skip_optional"
+      },
+      {
+        "step": "analyze_api_structure",
+        "action": "Analyze API structure and patterns",
+        "command": "bash(~/.claude/scripts/gemini-wrapper -p \"PURPOSE: Document API comprehensively\\nTASK: Extract endpoints, auth, request/response formats\\nMODE: analysis\\nCONTEXT: @{src/api/**/*,src/routes/**/*,src/controllers/**/*}\\n         Endpoints: [endpoint_discovery]\\nEXPECTED: Complete API documentation\\nRULES: $(cat ~/.claude/workflows/cli-templates/prompts/documentation/api-reference.txt)\")",
+        "output_to": "api_analysis",
+        "on_error": "fail",
+        "note": "Tool-specific: gemini-wrapper | qwen-wrapper | codex -C src/api exec"
+      }
+    ],
+    "implementation_approach": {
+      "task_description": "Use api_analysis to populate API-Level Documentation Template",
+      "logic_flow": [
+        "Load template: ~/.claude/workflows/cli-templates/prompts/documentation/api-reference.txt",
+        "Parse api_analysis for: endpoints, auth, request/response",
+        "Fill template sections with extracted information",
+        "Generate OpenAPI spec if REST API detected",
+        "Format output as Markdown"
+      ]
+    },
+    "target_files": [
+      ".workflow/docs/api/README.md",
+      ".workflow/docs/api/openapi.yaml"
+    ]
+  }
+}
+```
+
+## Planning Outputs
+
+### File Structure
+```
+.workflow/
+├── .active-WFS-docs-20240120-143022
+└── WFS-docs-20240120-143022/
+    ├── IMPL_PLAN.md              # Implementation plan
+    ├── TODO_LIST.md              # Progress tracker
+    ├── .process/
+    │   ├── strategy.md           # Doc strategy
+    │   └── existing-docs.txt     # Existing docs list
+    └── .task/
+        ├── IMPL-001.json         # System overview
+        ├── IMPL-002.json         # Module: auth
+        ├── IMPL-003.json         # Module: api
+        ├── IMPL-004.json         # Architecture
+        └── IMPL-005.json         # API docs
+```
+
+### IMPL_PLAN.md
+```markdown
+# Documentation Implementation Plan
+
+**Session**: WFS-docs-[timestamp]
+**Type**: [architecture|api|all]
+**Tool**: [gemini|qwen|codex]
+
+## Task Breakdown
+
+### IMPL-001: System Overview
+- **Output**: .workflow/docs/README.md
+- **Template**: project-overview.txt
+
+### IMPL-002+: Module Documentation
+- **Modules**: [list]
+- **Template**: module-documentation.txt
+
+### IMPL-N: Architecture/API (if requested)
+- **Template**: architecture.txt / api-reference.txt
+
+## Execution Order
+1. IMPL-001 (Foundation)
+2. IMPL-002 to IMPL-[M] (Modules - can parallelize)
+3. IMPL-[M+1] (Architecture - needs modules)
+4. IMPL-[N] (API - can run after IMPL-001)
+```
+
+### TODO_LIST.md
+```markdown
+# Documentation Progress Tracker
+
+- [ ] **IMPL-001**: Generate Project Overview
+- [ ] **IMPL-002**: Document Module: 'auth'
+- [ ] **IMPL-003**: Document Module: 'api'
+- [ ] **IMPL-004**: Generate Architecture Documentation
+- [ ] **IMPL-005**: Generate Unified API Documentation
+
+## Execution
+```bash
+/workflow:execute IMPL-001
+/workflow:execute IMPL-002
+# ...
+```
+```
+
+## Execution Phase
+
+### Via /workflow:execute
+
+```
+For Each Task (IMPL-001, IMPL-002, ...):
+
+/workflow:execute IMPL-NNN
+    ↓
+TodoWrite: pending → in_progress
+    ↓
+Execute flow_control (pre_analysis steps)
+    ↓
+Generate Documentation (apply template)
+    ↓
+TodoWrite: in_progress → completed
+    ↓
+✅ Task Complete
+```
+
+### TodoWrite Status Tracking
+
+**Planning Phase**:
+```
+✅ Session initialization (completed)
+⏳ IMPL-001: Project Overview (pending)
+⏳ IMPL-002: Module 'auth' (pending)
+```
+
+**Execution Phase**:
+```
+Executing IMPL-001:
+✅ Session initialization
+🔄 IMPL-001: Project Overview (in_progress)
+⏳ IMPL-002: Module 'auth'
+
+After IMPL-001:
+✅ Session initialization
+✅ IMPL-001: Project Overview (completed)
+🔄 IMPL-002: Module 'auth' (in_progress)
+```
+
+## Documentation Output
+
+### Final Structure
 ```
 .workflow/docs/
-├── README.md              # System navigation
-├── modules/               # Level 1: Module documentation
-│   ├── [module-1]/
-│   │   ├── overview.md
-│   │   ├── api.md
-│   │   ├── dependencies.md
-│   │   └── examples.md
-│   └── [module-n]/...
-├── architecture/          # Level 2: System architecture
+├── README.md                     # IMPL-001: Project overview
+├── modules/
+│   ├── auth/README.md           # IMPL-002: Auth module
+│   └── api/README.md            # IMPL-003: API module
+├── architecture/                # IMPL-004: Architecture
 │   ├── system-design.md
 │   ├── module-map.md
-│   ├── data-flow.md
-│   └── tech-stack.md
-└── api/                   # Level 2: Unified API docs
-    ├── unified-api.md
+│   └── data-flow.md
+└── api/                         # IMPL-005: API docs
+    ├── README.md
     └── openapi.yaml
 ```
 
-## Task Decomposition Standards
+## Next Steps
 
-### Dynamic Task Planning Rules
-**Module Grouping**: Max 3 modules per task, max 30 files per task
-**Task Count**: Calculate based on `total_modules ÷ 3 (rounded up) + base_tasks`
-**File Limits**: Split tasks when file count exceeds 30 in any module group
-**Base Tasks**: System overview (1) + Architecture (1) + API consolidation (1)
-**Module Tasks**: Group related modules by dependency depth and functional similarity
-
-### Documentation Task Types
-**IMPL-001**: System Overview Documentation
-- Project structure analysis
-- Technology stack documentation
-- Main navigation creation
-
-**IMPL-002**: Module Documentation (per module)
-- Individual module analysis
-- API surface documentation
-- Dependencies and relationships
-- Usage examples
-
-**IMPL-003**: Architecture Documentation
-- System design patterns
-- Module interaction mapping
-- Data flow documentation
-- Design principles
-
-**IMPL-004**: API Documentation
-- Endpoint discovery and analysis
-- OpenAPI specification generation
-- Authentication documentation
-- Integration examples
-
-### Task JSON Schema (5-Field Architecture)
-Each documentation task uses the workflow-architecture.md 5-field schema:
-- **id**: IMPL-N format
-- **title**: Documentation task name
-- **status**: pending|active|completed|blocked
-- **meta**: { type: "documentation", agent: "@doc-generator" }
-- **context**: { requirements, focus_paths, acceptance, scope }
-- **flow_control**: { pre_analysis[], implementation_approach, target_files[] }
-
-## Document Generation
-
-### Workflow Process
-**Input Analysis** → **Session Creation** → **IMPL_PLAN.md** → **.task/IMPL-NNN.json** → **TODO_LIST.md** → **Execute Tasks**
-
-**Always Created**:
-- **IMPL_PLAN.md**: Documentation requirements and task breakdown
-- **Session state**: Task references and documentation paths
-
-**Auto-Created (based on scope)**:
-- **TODO_LIST.md**: Progress tracking for documentation tasks
-- **.task/IMPL-*.json**: Individual documentation tasks with flow_control
-- **.process/ANALYSIS_RESULTS.md**: Documentation analysis artifacts
-
-**Document Structure**:
-```
-.workflow/
-├── .active-WFS-docs-20231201-143022  # Active session marker (matches folder name)
-└── WFS-docs-20231201-143022/         # Documentation session folder
-    ├── IMPL_PLAN.md                  # Main documentation plan
-    ├── TODO_LIST.md                  # Progress tracking
-    ├── .process/
-    │   └── ANALYSIS_RESULTS.md       # Documentation analysis
-    └── .task/
-        ├── IMPL-001.json             # System overview task
-        ├── IMPL-002.json             # Module documentation task
-        ├── IMPL-003.json             # Architecture documentation task
-        └── IMPL-004.json             # API documentation task
+### 1. Review Planning Output
+```bash
+cat .workflow/WFS-docs-*/IMPL_PLAN.md
+cat .workflow/WFS-docs-*/TODO_LIST.md
 ```
 
-### Task Flow Control Templates
+### 2. Execute Documentation Tasks
+```bash
+# Sequential (recommended)
+/workflow:execute IMPL-001  # System overview first
+/workflow:execute IMPL-002  # Module docs
+/workflow:execute IMPL-003
+/workflow:execute IMPL-004  # Architecture
+/workflow:execute IMPL-005  # API docs
 
-**System Overview Task (IMPL-001)**:
-```json
-"flow_control": {
-  "pre_analysis": [
-    {
-      "step": "system_architecture_analysis",
-      "action": "Discover system architecture and module hierarchy",
-      "command": "bash(~/.claude/scripts/get_modules_by_depth.sh)",
-      "output_to": "system_structure"
-    },
-    {
-      "step": "project_discovery",
-      "action": "Discover project structure and entry points",
-      "command": "bash(find . -type f -name '*.json' -o -name '*.md' -o -name 'package.json' | head -20)",
-      "output_to": "project_structure"
-    },
-    {
-      "step": "analyze_tech_stack",
-      "action": "Analyze technology stack and dependencies using structure analysis",
-      "command": "~/.claude/scripts/gemini-wrapper -p \"Analyze project technology stack and dependencies based on: [system_structure]\"",
-      "output_to": "tech_analysis"
-    }
-  ],
-  "target_files": [".workflow/docs/README.md"]
-}
+# Parallel (module docs only)
+/workflow:execute IMPL-002 &
+/workflow:execute IMPL-003 &
+wait
 ```
 
-**Module Documentation Task (IMPL-002)**:
-```json
-"flow_control": {
-  "pre_analysis": [
-    {
-      "step": "load_system_structure",
-      "action": "Load system architecture analysis from previous task",
-      "command": "bash(cat .workflow/WFS-docs-*/IMPL-001-system_structure.output 2>/dev/null || ~/.claude/scripts/get_modules_by_depth.sh)",
-      "output_to": "system_context"
-    },
-    {
-      "step": "module_analysis",
-      "action": "Analyze specific module structure and API within system context",
-      "command": "~/.claude/scripts/gemini-wrapper -p \"Analyze module [MODULE_NAME] structure and exported API within system: [system_context]\"",
-      "output_to": "module_context"
-    }
-  ],
-  "target_files": [".workflow/docs/modules/[MODULE_NAME]/overview.md"]
-}
+### 3. Review Generated Documentation
+```bash
+ls -lah .workflow/docs/
+cat .workflow/docs/README.md
 ```
 
-## Analysis Templates
-
-### Project Structure Analysis Rules
-- Identify main modules and purposes
-- Map directory organization patterns
-- Extract entry points and configuration files
-- Recognize architectural styles and design patterns
-- Analyze module relationships and dependencies
-- Document technology stack and requirements
-
-### Module Analysis Rules
-- Identify module boundaries and entry points
-- Extract exported functions, classes, interfaces
-- Document internal organization and structure
-- Analyze API surfaces with types and parameters
-- Map dependencies within and between modules
-- Extract usage patterns and examples
-
-### API Analysis Rules
-- Classify endpoint types (REST, GraphQL, WebSocket, RPC)
-- Extract request/response parameters and schemas
-- Document authentication and authorization requirements
-- Generate OpenAPI 3.0 specification structure
-- Create comprehensive endpoint documentation
-- Provide usage examples and integration guides
+### 4. TodoWrite Progress
+- Planning: All tasks `pending`
+- Execution: `pending` → `in_progress` → `completed`
+- Real-time status updates via TodoWrite
 
 ## Error Handling
-- **Invalid document type**: Clear error message with valid options
-- **Module not found**: Skip missing modules with warning
-- **Analysis failures**: Fall back to file-based analysis
-- **Permission issues**: Clear guidance on directory access
+
+- **No modules found**: Create only IMPL-001 (system overview)
+- **Scope path invalid**: Show error and exit
+- **Active session exists**: Prompt to complete or pause
+- **Tool unavailable**: Fall back to gemini
 
 ## Key Benefits
 
-### Structured Documentation Process
-- **Task-based approach**: Documentation broken into manageable, trackable tasks
-- **Flow control integration**: Systematic analysis ensures completeness
-- **Progress visibility**: TODO_LIST.md provides clear completion status
-- **Quality assurance**: Each task has defined acceptance criteria
+### Clear Separation of Concerns
+- **Planning**: Session creation, task decomposition (this command)
+- **Execution**: Content generation, quality assurance (doc-generator agent)
 
-### Workflow Integration
-- **Planning foundation**: Documentation provides context for implementation planning
-- **Execution consistency**: Same task execution model as implementation
-- **Context accumulation**: Documentation builds comprehensive project understanding
+### Scalable Task Management
+- Independent, self-contained tasks
+- Parallelizable module documentation
+- Clear dependencies (architecture needs modules)
 
-## Usage Examples
+### Template-Driven Consistency
+- All documentation follows standard templates
+- Reusable and maintainable
+- Easy to update standards
 
-### Complete Documentation Workflow
-```bash
-# Step 1: Create documentation plan and tasks
-/workflow:docs all
-
-# Step 2: Execute documentation tasks (after planning)
-/workflow:execute IMPL-001  # System overview
-/workflow:execute IMPL-002  # Module documentation
-/workflow:execute IMPL-003  # Architecture documentation
-/workflow:execute IMPL-004  # API documentation
-```
-The system creates structured documentation tasks with proper session management, task.json files, and integration with the broader workflow system for systematic and trackable documentation generation.
+### Full Context for Execution
+- Each task JSON contains complete instructions
+- flow_control defines exact analysis steps
+- Tool selection for flexibility

.claude/commands/workflow/tools/status.md

@@ -1,258 +0,0 @@
----
-name: workflow:status
-description: Generate on-demand views from JSON task data
-usage: /workflow:status [task-id] [--format=<format>] [--validate]
-argument-hint: [optional: task-id, format, validation]
-examples:
-  - /workflow:status
-  - /workflow:status impl-1
-  - /workflow:status --format=hierarchy
-  - /workflow:status --validate
----
-
-# Workflow Status Command (/workflow:status)
-
-## Overview
-Generates on-demand views from JSON task data. No synchronization needed - all views are calculated from the current state of JSON files.
-
-## Core Principles
-**Data Source:** @~/.claude/workflows/workflow-architecture.md
-
-## Key Features
-
-### Pure View Generation
-- **No Sync**: Views are generated, not synchronized
-- **Always Current**: Reads latest JSON data every time
-- **No Persistence**: Views are temporary, not saved
-- **Single Source**: All data comes from JSON files only
-
-### Multiple View Formats
-- **Overview** (default): Current tasks and status
-- **Hierarchy**: Task relationships and structure
-- **Details**: Specific task information
-
-## Usage
-
-### Default Overview
-```bash
-/workflow:status
-```
-
-Generates current workflow overview:
-```markdown
-# Workflow Overview
-**Session**: WFS-user-auth
-**Phase**: IMPLEMENT
-**Type**: medium
-
-## Active Tasks
-- [⚠️] impl-1: Build authentication module (code-developer)
-- [⚠️] impl-2: Setup user management (code-developer)
-
-## Completed Tasks
-- [✅] impl-0: Project setup
-
-## Stats
-- **Total**: 8 tasks
-- **Completed**: 3
-- **Active**: 2
-- **Remaining**: 3
-```
-
-### Specific Task View
-```bash
-/workflow:status impl-1
-```
-
-Shows detailed task information:
-```markdown
-# Task: impl-1
-
-**Title**: Build authentication module
-**Status**: active
-**Agent**: @code-developer
-**Type**: feature
-
-## Context
-- **Requirements**: JWT authentication, OAuth2 support
-- **Scope**: src/auth/*, tests/auth/*
-- **Acceptance**: Module handles JWT tokens, OAuth2 flow implemented
-- **Inherited From**: WFS-user-auth
-
-## Relations
-- **Parent**: none
-- **Subtasks**: impl-1.1, impl-1.2
-- **Dependencies**: impl-0
-
-## Execution
-- **Attempts**: 0
-- **Last Attempt**: never
-
-## Metadata
-- **Created**: 2025-09-05T10:30:00Z
-- **Updated**: 2025-09-05T10:35:00Z
-```
-
-### Hierarchy View
-```bash
-/workflow:status --format=hierarchy
-```
-
-Shows task relationships:
-```markdown
-# Task Hierarchy
-
-## Main Tasks
-- impl-0: Project setup ✅
-- impl-1: Build authentication module ⚠️
-  - impl-1.1: Design auth schema
-  - impl-1.2: Implement auth logic
-- impl-2: Setup user management ⚠️
-
-## Dependencies
-- impl-1 → depends on → impl-0
-- impl-2 → depends on → impl-1
-```
-
-## View Generation Process
-
-### Data Loading
-```pseudo
-function generate_workflow_status(task_id, format):
-  // Load all current data
-  session = load_workflow_session()
-  all_tasks = load_all_task_json_files()
-
-  // Filter if specific task requested
-  if task_id:
-    target_task = find_task(all_tasks, task_id)
-    return generate_task_detail_view(target_task)
-
-  // Generate requested format
-  switch format:
-    case 'hierarchy':
-      return generate_hierarchy_view(all_tasks)
-    default:
-      return generate_overview(session, all_tasks)
-```
-
-### Real-Time Calculation
-- **Task Counts**: Calculated from JSON file status fields
-- **Relationships**: Built from JSON relations fields
-- **Status**: Read directly from current JSON state
-
-## Validation Mode
-
-### Basic Validation
-```bash
-/workflow:status --validate
-```
-
-Performs integrity checks:
-```markdown
-# Validation Results
-
-## JSON File Validation
-✅ All task JSON files are valid
-✅ Session file is valid and readable
-
-## Relationship Validation
-✅ All parent-child relationships are valid
-✅ All dependencies reference existing tasks
-✅ No circular dependencies detected
-
-## Hierarchy Validation
-✅ Task hierarchy within depth limits (max 3 levels)
-✅ All subtask references are bidirectional
-
-## Issues Found
-⚠️ impl-3: No subtasks defined (expected for leaf task)
-
-**Status**: All systems operational
-```
-
-### Validation Checks
-- **JSON Schema**: All files parse correctly
-- **References**: All task IDs exist
-- **Hierarchy**: Parent-child relationships are valid
-- **Dependencies**: No circular dependencies
-- **Depth**: Task hierarchy within limits
-
-## Error Handling
-
-### Missing Files
-```bash
-❌ Session file not found
-→ Initialize new workflow session? (y/n)
-
-❌ Task impl-5 not found
-→ Available tasks: impl-1, impl-2, impl-3, impl-4
-```
-
-### Invalid Data
-```bash
-❌ Invalid JSON in impl-2.json
-→ Cannot generate view for impl-2
-→ Repair file manually or recreate task
-
-⚠️ Circular dependency detected: impl-1 → impl-2 → impl-1
-→ Task relationships may be incorrect
-```
-
-## Performance Benefits
-
-### Fast Generation
-- **No File Writes**: Only reads JSON files
-- **No Sync Logic**: No complex synchronization
-- **Instant Results**: Generate views on demand
-- **No Conflicts**: No state consistency issues
-
-### Scalability
-- **Large Task Sets**: Handles hundreds of tasks efficiently
-- **Complex Hierarchies**: No performance degradation
-- **Concurrent Access**: Multiple views can be generated simultaneously
-
-## Integration
-
-### Workflow Integration
-- Use after task creation to see current state
-- Use for debugging task relationships
-
-### Command Integration
-```bash
-# Common workflow
-/task:create "New feature"
-/workflow:status                    # Check current state
-/task:breakdown impl-1
-/workflow:status --format=hierarchy # View new structure
-/task:execute impl-1.1
-```
-
-## Output Formats
-
-### Supported Formats
-- `overview` (default): General workflow status
-- `hierarchy`: Task relationships
-- `tasks`: Simple task list
-- `details`: Comprehensive information
-
-### Custom Filtering
-```bash
-# Show only active tasks
-/workflow:status --format=tasks --filter=active
-
-# Show completed tasks only
-/workflow:status --format=tasks --filter=completed
-
-# Show tasks for specific agent
-/workflow:status --format=tasks --agent=@code-developer
-```
-
-## Related Commands
-
-- `/task:create` - Create tasks (generates JSON data)
-- `/task:execute` - Execute tasks (updates JSON data)
-- `/task:breakdown` - Create subtasks (generates more JSON data)
-- `/workflow:vibe` - Coordinate agents (uses workflow status for coordination)
-
-This workflow status system provides instant, accurate views of workflow state without any synchronization complexity or performance overhead.

.claude/workflows/cli-templates/prompts/documentation/api-reference.txt

@@ -0,0 +1,240 @@
+# API-Level Documentation Template
+
+Generate comprehensive API documentation following this structure:
+
+## Overview
+[Brief description of the API's purpose and capabilities]
+
+## Authentication
+### Authentication Method
+[e.g., JWT, OAuth2, API Keys]
+
+### Obtaining Credentials
+```bash
+# Example authentication flow
+```
+
+### Using Credentials
+```http
+GET /api/resource HTTP/1.1
+Authorization: Bearer <token>
+```
+
+---
+
+## Base URL
+```
+Production: https://api.example.com/v1
+Staging: https://staging.api.example.com/v1
+```
+
+## Common Response Codes
+| Code | Description |
+|------|-------------|
+| 200  | Success |
+| 201  | Created |
+| 400  | Bad Request |
+| 401  | Unauthorized |
+| 403  | Forbidden |
+| 404  | Not Found |
+| 500  | Internal Server Error |
+
+---
+
+## Endpoints
+
+### Resource: Users
+
+#### GET /users
+**Description**: Retrieves a paginated list of users.
+
+**Query Parameters**:
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| `limit` | number | No | Number of results (default: 20, max: 100) |
+| `offset` | number | No | Pagination offset (default: 0) |
+| `sort` | string | No | Sort field (e.g., `name`, `-created_at`) |
+
+**Example Request**:
+```http
+GET /users?limit=10&offset=0&sort=-created_at HTTP/1.1
+Authorization: Bearer <token>
+```
+
+**Response (200 OK)**:
+```json
+{
+  "data": [
+    {
+      "id": 1,
+      "name": "John Doe",
+      "email": "john@example.com",
+      "created_at": "2024-01-01T00:00:00Z"
+    }
+  ],
+  "pagination": {
+    "total": 100,
+    "limit": 10,
+    "offset": 0
+  }
+}
+```
+
+**Error Response (401 Unauthorized)**:
+```json
+{
+  "error": {
+    "code": "UNAUTHORIZED",
+    "message": "Invalid or expired token"
+  }
+}
+```
+
+---
+
+#### GET /users/:id
+**Description**: Retrieves a single user by ID.
+
+**Path Parameters**:
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `id` | number | User ID |
+
+**Example Request**:
+```http
+GET /users/123 HTTP/1.1
+Authorization: Bearer <token>
+```
+
+**Response (200 OK)**:
+```json
+{
+  "id": 123,
+  "name": "John Doe",
+  "email": "john@example.com",
+  "created_at": "2024-01-01T00:00:00Z",
+  "updated_at": "2024-01-15T10:30:00Z"
+}
+```
+
+---
+
+#### POST /users
+**Description**: Creates a new user.
+
+**Request Body**:
+```json
+{
+  "name": "Jane Smith",
+  "email": "jane@example.com",
+  "password": "securePassword123"
+}
+```
+
+**Validation Rules**:
+- `name`: Required, 2-100 characters
+- `email`: Required, valid email format, must be unique
+- `password`: Required, minimum 8 characters
+
+**Response (201 Created)**:
+```json
+{
+  "id": 124,
+  "name": "Jane Smith",
+  "email": "jane@example.com",
+  "created_at": "2024-01-20T12:00:00Z"
+}
+```
+
+**Error Response (400 Bad Request)**:
+```json
+{
+  "error": {
+    "code": "VALIDATION_ERROR",
+    "message": "Validation failed",
+    "details": [
+      {
+        "field": "email",
+        "message": "Email already exists"
+      }
+    ]
+  }
+}
+```
+
+---
+
+#### PUT /users/:id
+**Description**: Updates an existing user.
+
+**Path Parameters**:
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `id` | number | User ID |
+
+**Request Body** (all fields optional):
+```json
+{
+  "name": "Jane Doe",
+  "email": "jane.doe@example.com"
+}
+```
+
+**Response (200 OK)**:
+```json
+{
+  "id": 124,
+  "name": "Jane Doe",
+  "email": "jane.doe@example.com",
+  "updated_at": "2024-01-21T09:15:00Z"
+}
+```
+
+---
+
+#### DELETE /users/:id
+**Description**: Deletes a user.
+
+**Path Parameters**:
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `id` | number | User ID |
+
+**Response (204 No Content)**:
+[Empty response body]
+
+---
+
+## Rate Limiting
+- **Limit**: 1000 requests per hour per API key
+- **Headers**:
+  - `X-RateLimit-Limit`: Total requests allowed
+  - `X-RateLimit-Remaining`: Requests remaining
+  - `X-RateLimit-Reset`: Unix timestamp when limit resets
+
+---
+
+## SDKs and Client Libraries
+- [JavaScript/TypeScript SDK](./sdks/javascript.md)
+- [Python SDK](./sdks/python.md)
+
+---
+
+## Webhooks
+[Description of webhook system if applicable]
+
+---
+
+## Changelog
+### v1.1.0 (2024-01-20)
+- Added user sorting functionality
+- Improved error messages
+
+### v1.0.0 (2024-01-01)
+- Initial API release
+
+---
+
+**API Version**: 1.1.0
+**Last Updated**: [Auto-generated timestamp]
+**Support**: api-support@example.com

.claude/workflows/cli-templates/prompts/documentation/module-documentation.txt

@@ -0,0 +1,91 @@
+# Module-Level Documentation Template
+
+Generate detailed module documentation following this structure:
+
+## 1. Purpose and Responsibilities
+[What this module does, its boundaries, and its role in the larger system]
+
+## 2. Internal Architecture
+- **Key Components**:
+  - [Component 1]: [Description and responsibility]
+  - [Component 2]: [Description and responsibility]
+- **Data Flow**: [How data moves through the module, with diagrams if applicable]
+- **Core Logic**: [Explanation of the main business logic and algorithms]
+- **State Management**: [How state is managed within the module]
+
+## 3. Public API / Interface
+### Exported Functions
+```typescript
+/**
+ * Function description
+ * @param param1 - Parameter description
+ * @returns Return value description
+ */
+export function exampleFunction(param1: Type): ReturnType;
+```
+
+### Exported Classes
+```typescript
+/**
+ * Class description
+ */
+export class ExampleClass {
+  // Public methods and properties
+}
+```
+
+### Usage Examples
+```typescript
+import { exampleFunction } from './module';
+
+// Example 1: Basic usage
+const result = exampleFunction(input);
+
+// Example 2: Advanced usage
+// ...
+```
+
+## 4. Dependencies
+### Internal Dependencies
+- **[Module A]**: [Why this dependency exists, what it provides]
+- **[Module B]**: [Purpose of dependency]
+
+### External Dependencies
+- **[Library 1]** (`version`): [Purpose and usage]
+- **[Library 2]** (`version`): [Purpose and usage]
+
+## 5. Configuration
+### Environment Variables
+- `ENV_VAR_NAME`: [Description, default value]
+
+### Configuration Options
+```typescript
+interface ModuleConfig {
+  option1: Type; // Description
+  option2: Type; // Description
+}
+```
+
+## 6. Testing
+### Running Tests
+```bash
+npm test -- module-name
+```
+
+### Test Coverage
+- Unit tests: [Coverage percentage or key test files]
+- Integration tests: [Coverage or test scenarios]
+
+## 7. Common Use Cases
+1. **Use Case 1**: [Description and code example]
+2. **Use Case 2**: [Description and code example]
+
+## 8. Troubleshooting
+### Common Issues
+- **Issue 1**: [Description and solution]
+- **Issue 2**: [Description and solution]
+
+---
+**Module Path**: [File path]
+**Last Updated**: [Auto-generated timestamp]
+**Owner/Maintainer**: [Team or individual]

.claude/workflows/cli-templates/prompts/documentation/project-overview.txt

@@ -0,0 +1,58 @@
+# Project-Level Documentation Template
+
+Generate comprehensive project documentation following this structure:
+
+## 1. Overview
+- **Purpose**: [High-level mission and goals of the project]
+- **Target Audience**: [Primary users, developers, stakeholders]
+- **Key Features**: [List of major functionalities and capabilities]
+
+## 2. System Architecture
+- **Architectural Style**: [e.g., Monolith, Microservices, Layered, Event-Driven]
+- **Core Components**: [Diagram or list of major system parts and their interactions]
+- **Technology Stack**:
+  - Languages: [Programming languages used]
+  - Frameworks: [Key frameworks and libraries]
+  - Databases: [Data storage solutions]
+  - Infrastructure: [Deployment and hosting]
+- **Design Principles**: [Guiding principles like SOLID, DRY, separation of concerns]
+
+## 3. Getting Started
+- **Prerequisites**: [Required software, tools, versions]
+- **Installation**:
+  ```bash
+  # Installation commands
+  ```
+- **Configuration**: [Environment setup, config files]
+- **Running the Project**:
+  ```bash
+  # Startup commands
+  ```
+
+## 4. Development Workflow
+- **Branching Strategy**: [e.g., GitFlow, trunk-based]
+- **Coding Standards**: [Style guide, linting rules]
+- **Testing**:
+  ```bash
+  # Test commands
+  ```
+- **Build & Deployment**: [CI/CD pipeline overview]
+
+## 5. Project Structure
+```
+project-root/
+├── src/           # [Description]
+├── tests/         # [Description]
+├── docs/          # [Description]
+└── config/        # [Description]
+```
+
+## 6. Navigation
+- [Module Documentation](./modules/)
+- [API Reference](./api/)
+- [Architecture Details](./architecture/)
+- [Contributing Guidelines](./CONTRIBUTING.md)
+
+---
+**Last Updated**: [Auto-generated timestamp]
+**Documentation Version**: [Project version]

.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

.claude/workflows/workflow-architecture.md

@@ -266,28 +266,73 @@ All workflows use the same file structure definition regardless of complexity. *
 
 #### Complete Structure Reference
 ```
-.workflow/WFS-[topic-slug]/
-├── workflow-session.json        # Session metadata and state (REQUIRED)
-├── [.brainstorming/]           # Optional brainstorming phase (created when needed)
-├── [.chat/]                    # CLI interaction sessions (created when analysis is run)
-│   ├── chat-*.md              # Saved chat sessions
-│   └── analysis-*.md          # Analysis results
-├── [.process/]                 # Planning analysis results (created by /workflow:plan)
-│   └── ANALYSIS_RESULTS.md    # Analysis results and planning artifacts
-├── IMPL_PLAN.md                # Planning document (REQUIRED)
-├── TODO_LIST.md                # Progress tracking (REQUIRED)
-├── [.summaries/]               # Task completion summaries (created when tasks complete)
-│   ├── IMPL-*-summary.md      # Main task summaries
-│   └── IMPL-*.*-summary.md    # Subtask summaries
-└── .task/                      # Task definitions (REQUIRED)
-    ├── IMPL-*.json             # Main task definitions
-    └── IMPL-*.*.json           # Subtask definitions (created dynamically)
+.workflow/
+├── [.scratchpad/]              # Non-session-specific outputs (created when needed)
+│   ├── analyze-*-[timestamp].md        # One-off analysis results
+│   ├── chat-*-[timestamp].md           # Standalone chat sessions
+│   ├── plan-*-[timestamp].md           # Ad-hoc planning notes
+│   ├── bug-index-*-[timestamp].md      # Quick bug analyses
+│   ├── code-analysis-*-[timestamp].md  # Standalone code analysis
+│   ├── execute-*-[timestamp].md        # Ad-hoc implementation logs
+│   └── codex-execute-*-[timestamp].md  # Multi-stage execution logs
+│
+└── WFS-[topic-slug]/
+    ├── workflow-session.json        # Session metadata and state (REQUIRED)
+    ├── [.brainstorming/]           # Optional brainstorming phase (created when needed)
+    ├── [.chat/]                    # CLI interaction sessions (created when analysis is run)
+    │   ├── chat-*.md              # Saved chat sessions
+    │   └── analysis-*.md          # Analysis results
+    ├── [.process/]                 # Planning analysis results (created by /workflow:plan)
+    │   └── ANALYSIS_RESULTS.md    # Analysis results and planning artifacts
+    ├── IMPL_PLAN.md                # Planning document (REQUIRED)
+    ├── TODO_LIST.md                # Progress tracking (REQUIRED)
+    ├── [.summaries/]               # Task completion summaries (created when tasks complete)
+    │   ├── IMPL-*-summary.md      # Main task summaries
+    │   └── IMPL-*.*-summary.md    # Subtask summaries
+    └── .task/                      # Task definitions (REQUIRED)
+        ├── IMPL-*.json             # Main task definitions
+        └── IMPL-*.*.json           # Subtask definitions (created dynamically)
 ```
 
 #### Creation Strategy
 - **Initial Setup**: Create only `workflow-session.json`, `IMPL_PLAN.md`, `TODO_LIST.md`, and `.task/` directory
 - **On-Demand Creation**: Other directories created when first needed
 - **Dynamic Files**: Subtask JSON files created during task decomposition
+- **Scratchpad Usage**: `.scratchpad/` created when CLI commands run without active session
+
+#### Scratchpad Directory (.scratchpad/)
+**Purpose**: Centralized location for non-session-specific CLI outputs
+
+**When to Use**:
+1. **No Active Session**: CLI analysis/chat commands run without an active workflow session
+2. **Unrelated Analysis**: Quick analysis not related to current active session
+3. **Exploratory Work**: Ad-hoc investigation before creating formal workflow
+4. **One-Off Queries**: Standalone questions or debugging without workflow context
+
+**Output Routing Logic**:
+- **IF** active session exists AND command is session-relevant:
+  - Save to `.workflow/WFS-[id]/.chat/[command]-[timestamp].md`
+- **ELSE** (no session OR one-off analysis):
+  - Save to `.workflow/.scratchpad/[command]-[description]-[timestamp].md`
+
+**File Naming Pattern**: `[command-type]-[brief-description]-[timestamp].md`
+
+**Examples**:
+
+*Analysis Commands (read-only):*
+- `/cli:analyze "security"` (no session) → `.scratchpad/analyze-security-20250105-143022.md`
+- `/cli:chat "build process"` (unrelated to active session) → `.scratchpad/chat-build-process-20250105-143045.md`
+- `/cli:mode:plan "feature idea"` (exploratory) → `.scratchpad/plan-feature-idea-20250105-143110.md`
+- `/cli:mode:code-analysis "trace auth flow"` (no session) → `.scratchpad/code-analysis-auth-flow-20250105-143130.md`
+
+*Implementation Commands (⚠️ modifies code):*
+- `/cli:execute "implement JWT auth"` (no session) → `.scratchpad/execute-jwt-auth-20250105-143200.md`
+- `/cli:codex-execute "refactor API layer"` (no session) → `.scratchpad/codex-execute-api-refactor-20250105-143230.md`
+
+**Maintenance**:
+- Periodically review and clean up old scratchpad files
+- Promote useful analyses to formal workflow sessions if needed
+- No automatic cleanup - manual management recommended
 
 ### File Naming Conventions
 

CHANGELOG.md

@@ -5,6 +5,201 @@ All notable changes to Claude Code Workflow (CCW) will be documented in this fil
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.5.0] - 2025-10-06
+
+### 🎨 UI Design Workflow with Triple Vision Analysis
+
+This release introduces a comprehensive UI design workflow system with triple vision analysis capabilities, interactive user checkpoints, and zero agent overhead for improved performance.
+
+#### Added
+
+**New UI Design Workflow System**:
+- **`/workflow:design:auto`**: Semi-autonomous UI design workflow orchestrator
+  - Interactive checkpoints for user style selection and prototype confirmation
+  - Optional batch task generation with `--batch-plan` flag
+  - Pause-and-continue pattern at critical decision points
+  - Automatic progression between phases after user input
+  - Support for multiple UI variants per page (`--variants` parameter)
+
+**Triple Vision Analysis Architecture**:
+- **Phase 1: Claude Code Vision Analysis**: Quick initial visual analysis using native Read tool
+- **Phase 2: Gemini Vision Analysis**: Deep semantic understanding of design intent
+- **Phase 3: Codex Vision Analysis**: Structured pattern recognition with `-i` parameter
+- **Phase 4: Consensus Synthesis**: Weighted combination by main Claude agent
+- **Synthesis Strategy**:
+  - Color system: Consensus with Codex precision preference
+  - Typography: Gemini semantic + Codex measurements
+  - Spacing: Cross-validation across all three sources
+  - Design philosophy: Weighted with Gemini highest priority
+  - Conflict resolution: Majority vote or synthesis-specification.md context
+
+**Individual Design Commands**:
+- **`/workflow:design:style-extract`**: Extract design styles from reference images
+  - Triple vision analysis (Claude Code + Gemini + Codex)
+  - Generates `semantic_style_analysis.json`, `design-tokens.json`, `style-cards.json`
+  - Outputs multiple style variant cards for user selection
+  - Direct bash execution (no agent wrappers)
+
+- **`/workflow:design:style-consolidate`**: Consolidate selected style variants
+  - Validates and merges design tokens
+  - Generates finalized `design-tokens.json`, `style-guide.md`, `tailwind.config.js`
+  - WCAG AA compliance validation
+  - Token coverage ≥90% requirement
+
+- **`/workflow:design:ui-generate`**: Generate production-ready UI prototypes
+  - Token-driven HTML/CSS generation with Codex
+  - Support for `--style-overrides` parameter for runtime customization
+  - Generates `{page}-variant-{n}.html`, `{page}-variant-{n}.css` per page
+  - Semantic HTML5 with ARIA attributes
+  - Responsive design with token-based breakpoints
+
+- **`/workflow:design:design-update`**: Integrate design system into brainstorming
+  - Updates `synthesis-specification.md` with UI/UX guidelines section
+  - Creates/updates `ui-designer/style-guide.md`
+  - Makes design tokens available for task generation phase
+
+**Interactive Checkpoint System**:
+- **Checkpoint 1 (After style-extract)**: User selects preferred style variants
+  - Command: `/workflow:design:style-consolidate --session WFS-xxx --variants "variant-1,variant-3"`
+  - Workflow pauses until user runs consolidation command
+
+- **Checkpoint 2 (After ui-generate)**: User confirms selected prototypes
+  - Command: `/workflow:design:design-update --session WFS-xxx --selected-prototypes "page-variant-1,page-variant-2"`
+  - Workflow pauses until user runs design-update command
+
+**Design System Features**:
+- **OKLCH Color Format**: Perceptually uniform color space for design tokens
+- **W3C Design Tokens Compatibility**: Standard-compliant token format
+- **Style Override Mechanism**: Runtime token merging using jq
+- **Batch Task Generation**: Automatic `/workflow:plan` invocation for each page
+- **Accessibility Validation**: WCAG 2.1 AA compliance checks
+
+#### Changed
+
+**Agent Architecture Simplification**:
+- **Removed agent wrappers** from `style-extract` and `ui-generate` commands
+  - Previously used `Task(conceptual-planning-agent)` for simple bash execution
+  - Now executes `gemini-wrapper` and `codex` commands directly via Bash tool
+  - Reduced execution overhead and complexity
+  - Preserved all functionality while improving performance
+
+**Command Execution Pattern**:
+- **Direct Bash Execution**: All CLI tools now use direct bash commands
+  - Gemini Vision: `bash(gemini-wrapper --approval-mode yolo -p "...")`
+  - Codex Vision: `bash(codex -i {images} --full-auto exec "..." -s danger-full-access)`
+  - Codex Token Generation: `bash(codex --full-auto exec "..." -s danger-full-access)`
+  - No intermediate agent layers
+
+**Workflow Integration**:
+- Design phase now optional but recommended for UI-heavy projects
+- Seamless integration with existing brainstorming → planning → execution flow
+- Design artifacts automatically discovered by `task-generate` if present
+- UI tasks automatically include `load_design_tokens` in flow_control
+
+**Updated Documentation**:
+- **README.md**: Added UI Design Workflow section in Getting Started
+- **README_CN.md**: Chinese documentation updated with design workflow
+- **Command Reference**: Added 5 new `/workflow:design:*` commands
+- **Phase Renumbering**: Shifted phases to accommodate new Phase 2 (UI Design)
+
+#### Benefits
+
+**User Experience**:
+- 🎨 **Visual Validation**: Users confirm design before implementation starts
+- ⏸️ **Interactive Control**: Critical design decisions require explicit user approval
+- 👁️ **Comprehensive Analysis**: Three AI vision sources provide robust style extraction
+- 🎯 **Zero Waiting**: Direct bash execution eliminates agent overhead
+- 📦 **Automation Ready**: Optional batch task generation accelerates workflow
+
+**Code Quality**:
+- 🔒 **Token Enforcement**: 100% CSS values use custom properties (verified)
+- ♿ **Accessibility**: WCAG AA validated at design phase
+- 🎨 **Consistency**: Single source of truth for visual design (design-tokens.json)
+- 🧪 **Production Ready**: Semantic HTML5, responsive, accessible prototypes
+
+**Development Workflow**:
+- 🔄 **Seamless Integration**: Optional design phase fits between brainstorming and planning
+- 🚀 **Backward Compatible**: Existing workflows unaffected if design phase skipped
+- 📊 **Better Planning**: Design system context improves task generation quality
+- 🎯 **Focused Implementation**: Developers work from validated prototypes and tokens
+
+#### Technical Details
+
+**Triple Vision Analysis Flow**:
+```
+Reference Images
+  ↓
+Phase 2: Claude Code (Read tool) → claude_vision_analysis.json
+Phase 3: Gemini Vision (gemini-wrapper) → gemini_vision_analysis.json
+Phase 4: Codex Vision (codex -i) → codex_vision_analysis.json
+  ↓
+Phase 5: Main Claude Synthesis → semantic_style_analysis.json
+  ↓
+Phase 6: Codex Token Generation → design-tokens.json, style-cards.json
+```
+
+**Checkpoint Workflow Pattern**:
+```
+User: /workflow:design:auto --session WFS-xxx --images "refs/*.png" --pages "dashboard,auth"
+  ↓
+Phase 1: style-extract (automatic)
+  ↓ [CHECKPOINT 1: User selects style variants]
+User: /workflow:design:style-consolidate --session WFS-xxx --variants "variant-1,variant-3"
+  ↓
+Phase 3: ui-generate (automatic after Phase 2)
+  ↓ [CHECKPOINT 2: User confirms prototypes]
+User: /workflow:design:design-update --session WFS-xxx --selected-prototypes "dashboard-variant-1,auth-variant-2"
+  ↓
+Phase 5: batch-plan (optional, automatic if --batch-plan flag)
+```
+
+**Output Structure**:
+```
+.workflow/WFS-{session}/.design/
+├── style-extraction/
+│   ├── claude_vision_analysis.json
+│   ├── gemini_vision_analysis.json
+│   ├── codex_vision_analysis.json
+│   ├── semantic_style_analysis.json (synthesis)
+│   ├── design-tokens.json (preliminary)
+│   └── style-cards.json (variants for selection)
+├── style-consolidation/
+│   ├── style-philosophy.md
+│   ├── design-tokens.json (final, validated)
+│   ├── style-guide.md
+│   ├── tailwind.config.js
+│   └── validation-report.json
+└── prototypes/
+    ├── {page}-variant-{n}.html (per page, per variant)
+    ├── {page}-variant-{n}.css (token-driven styles)
+    ├── {page}-variant-{n}-notes.md (implementation notes)
+    └── design-tokens.css (CSS custom properties)
+```
+
+**New Agent Documentation**:
+- **`ui-design-agent.md`**: Specialized agent for UI/UX design workflows
+  - Vision analysis, token generation, prototype creation capabilities
+  - Multi-modal vision provider strategy (Gemini primary, Codex fallback)
+  - Quality gates: WCAG AA, token coverage ≥90%, component mapping ≥95%
+  - Flow control specification for 3 design phases
+
+#### Use Cases
+
+**When to Use Design Workflow**:
+- User-facing applications with visual design requirements
+- Design system creation and maintenance
+- Brand-critical user interfaces
+- Projects requiring accessibility compliance
+- Multi-page applications with consistent styling
+
+**When to Skip Design Workflow**:
+- Backend APIs without UI components
+- CLI tools and command-line applications
+- Quick prototypes and MVPs
+- Projects with existing design systems
+
+---
+
 ## [3.4.2] - 2025-10-05
 
 ### 📚 CLI Documentation Refactoring

Install-Claude.sh

@@ -24,6 +24,9 @@ FORCE=false
 NON_INTERACTIVE=false
 BACKUP_ALL=true  # Enabled by default
 NO_BACKUP=false
+SOURCE_VERSION=""  # Version from remote installer
+SOURCE_BRANCH=""   # Branch from remote installer
+SOURCE_COMMIT=""   # Commit SHA from remote installer
 
 # Functions
 function write_color() {
@@ -99,6 +102,7 @@ function test_prerequisites() {
     local claude_md="$script_dir/CLAUDE.md"
     local codex_dir="$script_dir/.codex"
     local gemini_dir="$script_dir/.gemini"
+    local qwen_dir="$script_dir/.qwen"
 
     if [ ! -d "$claude_dir" ]; then
         write_color "ERROR: .claude directory not found in $script_dir" "$COLOR_ERROR"
@@ -120,6 +124,11 @@ function test_prerequisites() {
         return 1
     fi
 
+    if [ ! -d "$qwen_dir" ]; then
+        write_color "ERROR: .qwen directory not found in $script_dir" "$COLOR_ERROR"
+        return 1
+    fi
+
     write_color "✓ Prerequisites check passed" "$COLOR_SUCCESS"
     return 0
 }
@@ -403,6 +412,7 @@ function install_global() {
     local global_claude_md="${global_claude_dir}/CLAUDE.md"
     local global_codex_dir="${user_home}/.codex"
     local global_gemini_dir="${user_home}/.gemini"
+    local global_qwen_dir="${user_home}/.qwen"
 
     write_color "Global installation path: $user_home" "$COLOR_INFO"
 
@@ -412,6 +422,7 @@ function install_global() {
     local source_claude_md="${script_dir}/CLAUDE.md"
     local source_codex_dir="${script_dir}/.codex"
     local source_gemini_dir="${script_dir}/.gemini"
+    local source_qwen_dir="${script_dir}/.qwen"
 
     # Create backup folder if needed
     local backup_folder=""
@@ -424,6 +435,8 @@ function install_global() {
             has_existing_files=true
         elif [ -d "$global_gemini_dir" ] && [ "$(ls -A "$global_gemini_dir" 2>/dev/null)" ]; then
             has_existing_files=true
+        elif [ -d "$global_qwen_dir" ] && [ "$(ls -A "$global_qwen_dir" 2>/dev/null)" ]; then
+            has_existing_files=true
         elif [ -f "$global_claude_md" ]; then
             has_existing_files=true
         fi
@@ -450,6 +463,10 @@ function install_global() {
     write_color "Merging .gemini directory contents..." "$COLOR_INFO"
     merge_directory_contents "$source_gemini_dir" "$global_gemini_dir" ".gemini directory contents" "$backup_folder"
 
+    # Merge .qwen directory contents
+    write_color "Merging .qwen directory contents..." "$COLOR_INFO"
+    merge_directory_contents "$source_qwen_dir" "$global_qwen_dir" ".qwen directory contents" "$backup_folder"
+
     # Remove empty backup folder
     if [ -n "$backup_folder" ] && [ -d "$backup_folder" ]; then
         if [ -z "$(ls -A "$backup_folder" 2>/dev/null)" ]; then
@@ -458,6 +475,10 @@ function install_global() {
         fi
     fi
 
+    # Create version.json in global .claude directory
+    write_color "Creating version.json..." "$COLOR_INFO"
+    create_version_json "$global_claude_dir" "Global"
+
     return 0
 }
 
@@ -477,16 +498,18 @@ function install_path() {
     local source_claude_md="${script_dir}/CLAUDE.md"
     local source_codex_dir="${script_dir}/.codex"
     local source_gemini_dir="${script_dir}/.gemini"
+    local source_qwen_dir="${script_dir}/.qwen"
 
     # Local paths
     local local_claude_dir="${target_dir}/.claude"
     local local_codex_dir="${target_dir}/.codex"
     local local_gemini_dir="${target_dir}/.gemini"
+    local local_qwen_dir="${target_dir}/.qwen"
 
     # Create backup folder if needed
     local backup_folder=""
     if [ "$NO_BACKUP" = false ]; then
-        if [ -d "$local_claude_dir" ] || [ -d "$local_codex_dir" ] || [ -d "$local_gemini_dir" ] || [ -d "$global_claude_dir" ]; then
+        if [ -d "$local_claude_dir" ] || [ -d "$local_codex_dir" ] || [ -d "$local_gemini_dir" ] || [ -d "$local_qwen_dir" ] || [ -d "$global_claude_dir" ]; then
             backup_folder=$(get_backup_directory "$target_dir")
             write_color "Backup folder created: $backup_folder" "$COLOR_INFO"
         fi
@@ -575,6 +598,10 @@ function install_path() {
     write_color "Merging .gemini directory contents to local location..." "$COLOR_INFO"
     merge_directory_contents "$source_gemini_dir" "$local_gemini_dir" ".gemini directory contents" "$backup_folder"
 
+    # Merge .qwen directory contents to local location
+    write_color "Merging .qwen directory contents to local location..." "$COLOR_INFO"
+    merge_directory_contents "$source_qwen_dir" "$local_qwen_dir" ".qwen directory contents" "$backup_folder"
+
     # Remove empty backup folder
     if [ -n "$backup_folder" ] && [ -d "$backup_folder" ]; then
         if [ -z "$(ls -A "$backup_folder" 2>/dev/null)" ]; then
@@ -583,12 +610,20 @@ function install_path() {
         fi
     fi
 
+    # Create version.json in local .claude directory
+    write_color "Creating version.json in local directory..." "$COLOR_INFO"
+    create_version_json "$local_claude_dir" "Path"
+
+    # Also create version.json in global .claude directory
+    write_color "Creating version.json in global directory..." "$COLOR_INFO"
+    create_version_json "$global_claude_dir" "Global"
+
     return 0
 }
 
 function get_installation_mode() {
     if [ -n "$INSTALL_MODE" ]; then
-        write_color "Installation mode: $INSTALL_MODE" "$COLOR_INFO"
+        write_color "Installation mode: $INSTALL_MODE" "$COLOR_INFO" >&2
         echo "$INSTALL_MODE"
         return
     fi
@@ -658,6 +693,42 @@ function get_installation_path() {
     done
 }
 
+function create_version_json() {
+    local target_claude_dir="$1"
+    local installation_mode="$2"
+
+    # Determine version from source parameter (passed from install-remote.sh)
+    local version_number="${SOURCE_VERSION:-unknown}"
+    local source_branch="${SOURCE_BRANCH:-unknown}"
+    local commit_sha="${SOURCE_COMMIT:-unknown}"
+
+    # Get current UTC timestamp
+    local installation_date_utc=$(date -u +"%Y-%m-%dT%H:%M:%SZ" 2>/dev/null || date -u +"%Y-%m-%dT%H:%M:%SZ")
+
+    # Create version.json content
+    local version_json_path="${target_claude_dir}/version.json"
+
+    cat > "$version_json_path" << EOF
+{
+  "version": "$version_number",
+  "commit_sha": "$commit_sha",
+  "installation_mode": "$installation_mode",
+  "installation_path": "$target_claude_dir",
+  "installation_date_utc": "$installation_date_utc",
+  "source_branch": "$source_branch",
+  "installer_version": "$VERSION"
+}
+EOF
+
+    if [ -f "$version_json_path" ]; then
+        write_color "Created version.json: $version_number ($commit_sha) - $installation_mode" "$COLOR_SUCCESS"
+        return 0
+    else
+        write_color "WARNING: Failed to create version.json" "$COLOR_WARNING"
+        return 1
+    fi
+}
+
 function show_summary() {
     local mode="$1"
     local path="$2"
@@ -676,11 +747,11 @@ function show_summary() {
     if [ "$mode" = "Path" ]; then
         echo "  Local Path: $path"
         echo "  Global Path: $HOME"
-        echo "  Local Components: agents, commands, output-styles, .codex, .gemini"
+        echo "  Local Components: agents, commands, output-styles, .codex, .gemini, .qwen"
         echo "  Global Components: workflows, scripts, python_script, etc."
     else
         echo "  Path: $path"
-        echo "  Global Components: .claude, .codex, .gemini"
+        echo "  Global Components: .claude, .codex, .gemini, .qwen"
     fi
 
     if [ "$NO_BACKUP" = true ]; then
@@ -696,10 +767,11 @@ function show_summary() {
     echo "1. Review CLAUDE.md - Customize guidelines for your project"
     echo "2. Review .codex/Agent.md - Codex agent execution protocol"
     echo "3. Review .gemini/CLAUDE.md - Gemini agent execution protocol"
-    echo "4. Configure settings - Edit .claude/settings.local.json as needed"
-    echo "5. Start using Claude Code with Agent workflow coordination!"
-    echo "6. Use /workflow commands for task execution"
-    echo "7. Use /update-memory commands for memory system management"
+    echo "4. Review .qwen/QWEN.md - Qwen agent execution protocol"
+    echo "5. Configure settings - Edit .claude/settings.local.json as needed"
+    echo "6. Start using Claude Code with Agent workflow coordination!"
+    echo "7. Use /workflow commands for task execution"
+    echo "8. Use /update-memory commands for memory system management"
 
     echo ""
     write_color "Documentation: https://github.com/catlog22/Claude-Code-Workflow" "$COLOR_INFO"
@@ -735,6 +807,18 @@ function parse_arguments() {
                 BACKUP_ALL=false
                 shift
                 ;;
+            -SourceVersion)
+                SOURCE_VERSION="$2"
+                shift 2
+                ;;
+            -SourceBranch)
+                SOURCE_BRANCH="$2"
+                shift 2
+                ;;
+            -SourceCommit)
+                SOURCE_COMMIT="$2"
+                shift 2
+                ;;
             --help|-h)
                 show_help
                 exit 0
@@ -761,6 +845,9 @@ Options:
     -NonInteractive       Run in non-interactive mode with default options
     -BackupAll            Automatically backup all existing files (default)
     -NoBackup             Disable automatic backup functionality
+    -SourceVersion <ver>  Source version (passed from install-remote.sh)
+    -SourceBranch <name>  Source branch (passed from install-remote.sh)
+    -SourceCommit <sha>   Source commit SHA (passed from install-remote.sh)
     --help, -h            Show this help message
 
 Examples:
@@ -776,6 +863,9 @@ Examples:
     # Installation without backup
     $0 -NoBackup
 
+    # With version info (typically called by install-remote.sh)
+    $0 -InstallMode Global -Force -SourceVersion "3.4.2" -SourceBranch "main" -SourceCommit "abc1234"
+
 EOF
 }
 

README.md

@@ -2,7 +2,7 @@
 
 <div align="center">
 
-[![Version](https://img.shields.io/badge/version-v3.4.2-blue.svg)](https://github.com/catlog22/Claude-Code-Workflow/releases)
+[![Version](https://img.shields.io/badge/version-v3.5.0-blue.svg)](https://github.com/catlog22/Claude-Code-Workflow/releases)
 [![License](https://img.shields.io/badge/license-MIT-green.svg)](LICENSE)
 [![Platform](https://img.shields.io/badge/platform-Windows%20%7C%20Linux%20%7C%20macOS-lightgrey.svg)]()
 [![MCP Tools](https://img.shields.io/badge/🔧_MCP_Tools-Experimental-orange.svg)](https://github.com/modelcontextprotocol)
@@ -15,15 +15,16 @@
 
 **Claude Code Workflow (CCW)** is a next-generation multi-agent automation framework that orchestrates complex software development tasks through intelligent workflow management and autonomous execution.
 
-> **🎉 Latest: v3.4.2** - CLI documentation refactoring & single source of truth. See [CHANGELOG.md](CHANGELOG.md) for details.
+> **🎉 Latest: v3.5.0** - UI Design Workflow with Triple Vision Analysis. See [CHANGELOG.md](CHANGELOG.md) for details.
 >
-> **What's New in v3.4.2**:
-> - 📚 **CLI Documentation Refactoring**: Eliminated 681 lines of duplicate content across 7 command files
-> - 🎯 **Single Source of Truth**: Established implicit reference pattern to `intelligent-tools-strategy.md`
-> - 🔍 **Documentation Consistency**: All CLI commands now reference centralized strategy guide
-> - 💡 **Maintenance Optimization**: Reduced maintenance overhead while preserving unique command features
-> - ✨ **Enhanced Clarity**: Streamlined documentation focuses on command-specific capabilities
-> - 📖 **Better Organization**: File patterns, templates, and MODE definitions centralized
+> **What's New in v3.5.0**:
+> - 🎨 **UI Design Workflow**: Complete design refinement workflow from style extraction to prototype generation
+> - 👁️ **Triple Vision Analysis**: Combines Claude Code + Gemini + Codex vision capabilities for comprehensive style extraction
+> - ⏸️ **Interactive Checkpoints**: User selection points for style variants and prototype confirmation
+> - 🎯 **Zero Agent Overhead**: Direct bash execution for CLI tools, removing unnecessary agent wrappers
+> - 🎨 **Style Customization**: Runtime override support with `--style-overrides` parameter
+> - 📦 **Batch Task Generation**: Optional automatic task creation for selected prototypes with `--batch-plan`
+> - 🔄 **Semi-Autonomous Workflow**: User-driven continuation at critical design decision points
 
 ---
 
@@ -250,7 +251,19 @@ MCP (Model Context Protocol) tools provide advanced codebase analysis. **Recomme
 /workflow:brainstorm:synthesis  # Generate consolidated specification
 ```
 
-**Phase 2: Action Planning**
+**Phase 2: UI Design Refinement** *(Optional for UI-heavy projects)*
+```bash
+# Extract design styles from reference images and generate prototypes
+/workflow:design:auto --session WFS-auth --images "design-refs/*.png" --pages "login,register" --batch-plan
+
+# Or run individual design phases
+/workflow:design:style-extract --session WFS-auth --images "refs/*.png"
+/workflow:design:style-consolidate --session WFS-auth --variants "variant-1,variant-3"
+/workflow:design:ui-generate --session WFS-auth --pages "login,register" --variants 2
+/workflow:design:design-update --session WFS-auth --selected-prototypes "login-variant-1,register-variant-2"
+```
+
+**Phase 3: Action Planning**
 ```bash
 # Create executable implementation plan
 /workflow:plan "Implement JWT-based authentication system"
@@ -259,7 +272,7 @@ MCP (Model Context Protocol) tools provide advanced codebase analysis. **Recomme
 /workflow:tdd-plan "Implement authentication with test-first development"
 ```
 
-**Phase 3: Execution**
+**Phase 4: Execution**
 ```bash
 # Execute tasks with AI agents
 /workflow:execute
@@ -268,7 +281,7 @@ MCP (Model Context Protocol) tools provide advanced codebase analysis. **Recomme
 /workflow:status
 ```
 
-**Phase 4: Testing & Quality Assurance**
+**Phase 5: Testing & Quality Assurance**
 ```bash
 # Generate independent test-fix workflow (v3.2.2+)
 /workflow:test-gen WFS-auth  # Creates WFS-test-auth session
@@ -341,6 +354,11 @@ MCP (Model Context Protocol) tools provide advanced codebase analysis. **Recomme
 |---|---|
 | `/workflow:session:*` | Manage development sessions (`start`, `pause`, `resume`, `list`, `switch`, `complete`). |
 | `/workflow:brainstorm:*` | Use role-based agents for multi-perspective planning. |
+| `/workflow:design:auto` | **NEW** Semi-autonomous UI design workflow with interactive checkpoints for style and prototype selection. |
+| `/workflow:design:style-extract` | **NEW** Extract design styles from reference images using triple vision analysis (Claude + Gemini + Codex). |
+| `/workflow:design:style-consolidate` | **NEW** Consolidate selected style variants into validated design tokens and style guide. |
+| `/workflow:design:ui-generate` | **NEW** Generate token-driven HTML/CSS prototypes with optional style overrides. |
+| `/workflow:design:design-update` | **NEW** Integrate finalized design system into brainstorming artifacts. |
 | `/workflow:plan` | Create a detailed, executable plan from a description. |
 | `/workflow:tdd-plan` | Create TDD workflow (6 phases) with test coverage analysis and Red-Green-Refactor cycles. |
 | `/workflow:execute` | Execute the current workflow plan autonomously. |

README_CN.md

@@ -2,7 +2,7 @@
 
 <div align="center">
 
-[![Version](https://img.shields.io/badge/version-v3.4.2-blue.svg)](https://github.com/catlog22/Claude-Code-Workflow/releases)
+[![Version](https://img.shields.io/badge/version-v3.5.0-blue.svg)](https://github.com/catlog22/Claude-Code-Workflow/releases)
 [![License](https://img.shields.io/badge/license-MIT-green.svg)](LICENSE)
 [![Platform](https://img.shields.io/badge/platform-Windows%20%7C%20Linux%20%7C%20macOS-lightgrey.svg)]()
 [![MCP工具](https://img.shields.io/badge/🔧_MCP工具-实验性-orange.svg)](https://github.com/modelcontextprotocol)
@@ -15,15 +15,16 @@
 
 **Claude Code Workflow (CCW)** 是一个新一代的多智能体自动化开发框架，通过智能工作流管理和自主执行来协调复杂的软件开发任务。
 
-> **🎉 最新版本: v3.4.2** - CLI 文档重构与单一信息源。详见 [CHANGELOG.md](CHANGELOG.md)。
+> **🎉 最新版本: v3.5.0** - UI 设计工作流与三重视觉分析。详见 [CHANGELOG.md](CHANGELOG.md)。
 >
-> **v3.4.2 版本新特性**:
-> - 📚 **CLI 文档重构**: 消除 7 个命令文件中的 681 行重复内容
-> - 🎯 **单一信息源**: 建立对 `intelligent-tools-strategy.md` 的隐式引用模式
-> - 🔍 **文档一致性**: 所有 CLI 命令现在引用集中的策略指南
-> - 💡 **维护优化**: 降低维护开销，同时保留独特的命令功能
-> - ✨ **增强清晰度**: 精简的文档专注于命令特定功能
-> - 📖 **更好的组织**: 文件模式、模板和 MODE 定义集中化
+> **v3.5.0 版本新特性**:
+> - 🎨 **UI 设计工作流**: 从风格提取到原型生成的完整设计精炼工作流
+> - 👁️ **三重视觉分析**: 融合 Claude Code + Gemini + Codex 视觉能力进行综合风格提取
+> - ⏸️ **交互式检查点**: 用户选择风格变体和原型确认的决策点
+> - 🎯 **零智能体开销**: CLI 工具直接 bash 执行，移除不必要的智能体包装
+> - 🎨 **风格自定义**: 通过 `--style-overrides` 参数支持运行时样式覆盖
+> - 📦 **批量任务生成**: 使用 `--batch-plan` 为选定原型自动创建实现任务
+> - 🔄 **半自主工作流**: 在关键设计决策点由用户驱动继续
 
 ---
 
@@ -250,7 +251,19 @@ MCP (模型上下文协议) 工具提供高级代码库分析。**推荐安装**
 /workflow:brainstorm:synthesis  # 生成综合规范
 ```
 
-**阶段 2：行动规划**
+**阶段 2：UI 设计精炼** *(UI 密集型项目可选)*
+```bash
+# 从参考图像中提取设计风格并生成原型
+/workflow:design:auto --session WFS-auth --images "design-refs/*.png" --pages "login,register" --batch-plan
+
+# 或者运行单独的设计阶段
+/workflow:design:style-extract --session WFS-auth --images "refs/*.png"
+/workflow:design:style-consolidate --session WFS-auth --variants "variant-1,variant-3"
+/workflow:design:ui-generate --session WFS-auth --pages "login,register" --variants 2
+/workflow:design:design-update --session WFS-auth --selected-prototypes "login-variant-1,register-variant-2"
+```
+
+**阶段 3：行动规划**
 ```bash
 # 创建可执行的实现计划
 /workflow:plan "实现基于 JWT 的认证系统"
@@ -259,7 +272,7 @@ MCP (模型上下文协议) 工具提供高级代码库分析。**推荐安装**
 /workflow:tdd-plan "使用测试优先开发实现认证"
 ```
 
-**阶段 3：执行**
+**阶段 4：执行**
 ```bash
 # 使用 AI 智能体执行任务
 /workflow:execute
@@ -268,7 +281,7 @@ MCP (模型上下文协议) 工具提供高级代码库分析。**推荐安装**
 /workflow:status
 ```
 
-**阶段 4：测试与质量保证**
+**阶段 5：测试与质量保证**
 ```bash
 # 生成独立测试修复工作流（v3.2.2+）
 /workflow:test-gen WFS-auth  # 创建 WFS-test-auth 会话
@@ -341,6 +354,11 @@ MCP (模型上下文协议) 工具提供高级代码库分析。**推荐安装**
 |---|---|
 | `/workflow:session:*` | 管理开发会话（`start`, `pause`, `resume`, `list`, `switch`, `complete`）。 |
 | `/workflow:brainstorm:*` | 使用基于角色的智能体进行多视角规划。 |
+| `/workflow:design:auto` | **新增** 带交互式检查点的半自主 UI 设计工作流，用于风格和原型选择。 |
+| `/workflow:design:style-extract` | **新增** 使用三重视觉分析（Claude + Gemini + Codex）从参考图像提取设计风格。 |
+| `/workflow:design:style-consolidate` | **新增** 将选定的风格变体整合为经过验证的设计令牌和风格指南。 |
+| `/workflow:design:ui-generate` | **新增** 生成基于令牌的 HTML/CSS 原型，支持可选的风格覆盖。 |
+| `/workflow:design:design-update` | **新增** 将最终确定的设计系统集成到头脑风暴产物中。 |
 | `/workflow:plan` | 从描述创建详细、可执行的计划。 |
 | `/workflow:tdd-plan` | 创建 TDD 工作流（6 阶段），包含测试覆盖分析和 Red-Green-Refactor 循环。 |
 | `/workflow:execute` | 自主执行当前的工作流计划。 |