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

feat: enhance UI design workflow with agent mode and flexible inputs (v3.5.1)

Browse Source 
Features:
- Unified variant control: --variants parameter controls both style cards and UI prototypes
- Agent creative exploration: --use-agent enables parallel generation of diverse designs
- Dual mode support: standalone (no --session) and integrated (with --session)
- Dual input sources: --images, --prompt, or hybrid (both)
- Command simplification: most parameters now optional with smart defaults

Changes:
- auto.md: Added --variants, --use-agent, --prompt; dual mode detection
- style-extract.md: Agent mode, text input, parallel variant generation
- ui-generate.md: Agent mode, layout diversity, simplified execution
- CHANGELOG.md: Complete v3.5.1 release notes

Backward compatible: All existing commands continue to work

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
catlog22
2025-10-07 21:46:45 +08:00
parent bd9278bb02
commit 7e75cf8425
4 changed files with 477 additions and 357 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
.claude/commands/workflow/design/auto.md
View File

@@ -1,11 +1,12 @@
---
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]"
usage: /workflow:design:auto --pages "<list>" [--session <id>] [--images "<glob>"] [--prompt "<desc>"] [--variants <count>] [--use-agent] [--batch-plan]
argument-hint: "--pages \"dashboard,auth\" [--session WFS-xxx] [--images \"refs/*.png\"] [--prompt \"Modern SaaS\"] [--variants 3] [--use-agent] [--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
- /workflow:design:auto --pages "login,register" --images "design-refs/*.png"
- /workflow:design:auto --pages "dashboard" --prompt "Modern minimalist, dark theme" --variants 3 --use-agent
- /workflow:design:auto --session WFS-auth --images "refs/*.png" --pages "login" --variants 2 --batch-plan
allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*)
---
@@ -46,27 +47,69 @@ This workflow runs **semi-autonomously** with user checkpoints:
## 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
- `--session <session_id>`: Workflow session ID (if omitted, runs in standalone mode)
- `--images "<glob_pattern>"`: Reference image paths (default: `design-refs/*`)
- `--prompt "<description>"`: Text description of design style
- `--variants <count>`: Number of style/UI variants to generate (default: 3, range: 1-5)
- `--use-agent`: Enable agent-driven creative exploration mode
- `--batch-plan`: Auto-generate implementation tasks after design-update (integrated mode only)
**Input Source Rules**:
- Must provide at least one of: `--images` or `--prompt`
- Both can be combined for guided style analysis
## Execution Modes
### Integrated Mode (with `--session`)
- Works within existing workflow session: `.workflow/WFS-{session}/`
- Reads from `.brainstorming/` artifacts
- Phase 4 (design-update) updates synthesis-specification.md
- Enables `--batch-plan` for task generation
### Standalone Mode (without `--session`)
- Creates new session: `design-session-YYYYMMDD-HHMMSS/`
- Independent of brainstorming phase
- Phase 4 (design-update) is **skipped**
- Outputs final summary instead of artifact updates
### Mode Detection
```bash
IF --session provided:
mode = "integrated"
base_path = ".workflow/WFS-{session}/"
ELSE:
mode = "standalone"
session_id = "design-session-" + timestamp()
base_path = "./{session_id}/"
```
## 5-Phase Execution
### Phase 1: Style Extraction
**Command**: `SlashCommand(command="/workflow:design:style-extract --session {session_id} --images \"{image_glob}\"")`
**Command Construction**:
```bash
variants_flag = --variants present ? "--variants {variants_count}" : ""
agent_flag = --use-agent present ? "--use-agent" : ""
images_flag = --images present ? "--images \"{image_glob}\"" : ""
prompt_flag = --prompt present ? "--prompt \"{prompt_text}\"" : ""
session_flag = --session present ? "--session {session_id}" : ""
command = "/workflow:design:style-extract {session_flag} {images_flag} {prompt_flag} {variants_flag} {agent_flag}"
```
**Command**: `SlashCommand(command="{constructed_command}")`
**Parse Output**:
- Verify: `.design/style-extraction/style-cards.json` created
- Extract: `style_cards_count` from output message
- Extract: `style_cards_count` (should match `variants_count`)
- List available style variant IDs
**Validation**:
- Style cards successfully generated
- At least one style variant available
- Variant count matches requested count
**TodoWrite**: Mark phase 1 completed, mark checkpoint "awaiting_user_confirmation"
@@ -115,7 +158,9 @@ Continuing to Phase 3: UI Generation...
```bash
variants_flag = --variants present ? "--variants {variants_count}" : ""
command = "/workflow:design:ui-generate --session {session_id} --pages \"{page_list}\" {variants_flag}"
agent_flag = --use-agent present ? "--use-agent" : ""
session_flag = --session present ? "--session {session_id}" : ""
command = "/workflow:design:ui-generate {session_flag} --pages \"{page_list}\" {variants_flag} {agent_flag}"
```
**Command**: `SlashCommand(command="{constructed_command}")`

304
.claude/commands/workflow/design/style-extract.md
View File

@@ -1,12 +1,13 @@
---
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\""
description: Extract design style from reference images or text prompts using triple vision analysis or agent mode
usage: /workflow:design:style-extract [--session <id>] [--images "<glob>"] [--prompt "<desc>"] [--variants <count>] [--use-agent]
argument-hint: "[--session WFS-xxx] [--images \"refs/*.png\"] [--prompt \"Modern minimalist\"] [--variants 3] [--use-agent]"
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(*)
- /workflow:design:style-extract --images "design-refs/*.png" --variants 3
- /workflow:design:style-extract --prompt "Modern minimalist blog, dark theme" --variants 3 --use-agent
- /workflow:design:style-extract --session WFS-auth --images "refs/*.png" --prompt "Linear.app style" --variants 2
allowed-tools: TodoWrite(*), Read(*), Write(*), Bash(*), Glob(*), Task(conceptual-planning-agent)
---
# Style Extraction Command
@@ -15,174 +16,197 @@ allowed-tools: TodoWrite(*), Read(*), Write(*), Bash(*), Glob(*)
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
- **Dual Mode Support**: Conventional triple vision OR agent-driven creative exploration
- **Flexible Input**: Images, text prompts, or both combined
- **Variant Control**: Generate N style cards based on `--variants` parameter (default: 3)
- **Consensus Synthesis**: Multi-source analysis for quality assurance
- **Style Card Output**: Reusable design direction cards for consolidation phase
## Execution Protocol
### Phase 1: Session & Input Validation
### Phase 0: Mode & Parameter Detection
```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
# Detect execution mode
IF --use-agent:
mode = "agent" # Agent-driven creative exploration
ELSE:
mode = "conventional" # Triple vision analysis
# Detect input source
IF --images AND --prompt:
input_mode = "hybrid" # Text guides image analysis
ELSE IF --images:
input_mode = "image"
ELSE IF --prompt:
input_mode = "text"
ELSE:
ERROR: "Must provide --images or --prompt"
# Detect session mode
IF --session:
session_mode = "integrated"
session_id = {provided_session}
base_path = ".workflow/WFS-{session_id}/"
ELSE:
session_mode = "standalone"
session_id = "design-session-" + timestamp()
base_path = "./{session_id}/"
# Set variant count
variants_count = --variants provided ? {count} : 3
VALIDATE: 1 <= variants_count <= 5
```
### Phase 2: Claude Code Vision Analysis (Quick Initial Pass)
**Direct Execution**: Use Read tool with image paths
### Phase 1: Input Validation & Preparation
```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
# Validate and prepare inputs based on input_mode
IF input_mode IN ["image", "hybrid"]:
EXPAND: --images glob pattern to concrete paths
VERIFY: at least one image file exists
# Write preliminary analysis
Write(.workflow/WFS-{session}/.design/style-extraction/claude_vision_analysis.json)
IF input_mode IN ["text", "hybrid"]:
VALIDATE: --prompt is non-empty string
# Create session directory structure
CREATE: {base_path}/.design/style-extraction/
```
**Output**: `claude_vision_analysis.json` with Claude Code's initial observations
### Phase 2: Style Extraction Execution
### Phase 3: Gemini Vision Analysis (Deep Semantic Understanding)
**Direct Bash Execution**: No agent wrapper
**Route based on mode**:
#### A. Conventional Mode (Triple Vision)
Execute if `mode == "conventional"`
**Step 1**: Claude Code initial analysis
```bash
bash(cd .workflow/WFS-{session}/.design/style-extraction && \
IF input_mode IN ["image", "hybrid"]:
FOR each image IN expanded_image_paths:
Read({image_path}) # Claude analyzes visuals
ELSE IF input_mode == "text":
# Analyze text prompt for design keywords
keywords = extract_design_keywords({prompt_text})
Write({base_path}/.design/style-extraction/claude_analysis.json)
```
**Step 2**: Gemini deep semantic analysis
```bash
context_arg = ""
IF input_mode IN ["image", "hybrid"]:
context_arg += "@{image_paths}"
IF input_mode IN ["text", "hybrid"]:
guidance = "GUIDED BY PROMPT: '{prompt_text}'"
bash(cd {base_path}/.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
PURPOSE: Extract design semantics {guidance}
TASK: Generate {variants_count} distinct style directions
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.
CONTEXT: {context_arg}
EXPECTED: {variants_count} style analysis variants in JSON
RULES: OKLCH colors, semantic naming, explore diverse themes
")
# 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
**Step 3**: Codex structured token generation
```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
bash(codex -C {base_path}/.design/style-extraction --full-auto exec "
PURPOSE: Convert semantic analysis to structured tokens
TASK: Generate design-tokens.json and {variants_count} style-cards
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
CONTEXT: @{claude_analysis.json,gemini output}
EXPECTED: design-tokens.json, style-cards.json with {variants_count} variants
RULES: OKLCH format, rem spacing, semantic names
" --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
#### B. Agent Mode (Creative Exploration)
Execute if `mode == "agent"`
## 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
**Agent-Driven Parallel Generation**:
```bash
# Prepare base context
context_files = ""
IF input_mode IN ["image", "hybrid"]:
context_files += "@{image_paths}"
IF session_mode == "integrated":
context_files += "@{../../.brainstorming/synthesis-specification.md}"
## 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
"
# Define creative themes for diversity
themes = generate_creative_themes(variants_count)
# Example: ["Modern Minimalist", "Brutalist Tech", "Organic Warmth"]
# Launch parallel agent tasks
FOR i IN range(variants_count):
Task(conceptual-planning-agent): "
[FLOW_CONTROL]
Generate unique design style variant: '{themes[i]}'
## Context
INPUT_SOURCE: {input_mode}
PROMPT_GUIDANCE: {prompt_text if present else 'derive from images'}
THEME_FOCUS: {themes[i]}
OUTPUT_LOCATION: {base_path}/.design/style-extraction/
## Flow Steps
1. **analyze_input**
IF input_mode IN ['image', 'hybrid']:
Use Gemini Vision to analyze images with theme focus
IF input_mode IN ['text', 'hybrid']:
Use Gemini to expand prompt into detailed design philosophy
2. **generate_tokens**
Use Codex to create design-tokens subset for this variant
Output: variant-{i}-tokens.json
3. **create_style_card**
Synthesize into style card with:
- id: 'variant-{i}'
- name: '{themes[i]}'
- preview: key design token values
Output: variant-{i}-card.json
## Rules
- Focus on '{themes[i]}' aesthetic
- OKLCH colors, rem spacing, semantic naming
- Must be distinct from other variants
"
# Consolidate parallel results
Wait for all {variants_count} tasks to complete
Consolidate variant-*-card.json → style-cards.json
Merge variant-*-tokens.json → design-tokens.json (include all variants)
```
### Phase 4: TodoWrite Integration
**Output**: `style-cards.json` with {variants_count} creatively distinct variants
### Phase 3: TodoWrite & Completion
```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"
}
{content: "Detect mode and validate inputs", status: "completed", activeForm: "Detecting mode"},
{content: "Execute style extraction (conventional/agent mode)", status: "completed", activeForm: "Extracting styles"},
{content: "Generate {variants_count} style cards", status: "completed", activeForm: "Generating style cards"}
]
});
```
**Completion Message**:
```
Style extraction complete for session: {session_id}
Mode: {mode} | Input: {input_mode} | Variants: {variants_count}
Generated {variants_count} style cards:
{list_variant_names}
Location: {base_path}/.design/style-extraction/
Next: /workflow:design:style-consolidate --session {session_id} --variants "{selected_ids}"
```
## Output Structure
```

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

@@ -1,12 +1,13 @@
---
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\"]"
description: Generate UI prototypes using consolidated design tokens with conventional or agent mode
usage: /workflow:design:ui-generate --pages "<list>" [--session <id>] [--variants <count>] [--use-agent]
argument-hint: "--pages \"dashboard,auth\" [--session WFS-xxx] [--variants 3] [--use-agent]"
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(*)
- /workflow:design:ui-generate --pages "login,register" --variants 2
- /workflow:design:ui-generate --session WFS-auth --pages "dashboard" --variants 3 --use-agent
- /workflow:design:ui-generate --pages "home,pricing" --variants 2
allowed-tools: TodoWrite(*), Read(*), Write(*), Bash(*), Task(conceptual-planning-agent)
---
# UI Generation Command
@@ -15,228 +16,158 @@ allowed-tools: TodoWrite(*), Read(*), Write(*), Bash(*)
Generate production-ready UI prototypes (HTML/CSS) strictly adhering to consolidated design tokens and synthesis specification requirements.
## Core Philosophy
- **Dual Mode**: Conventional (Codex primary) OR agent-driven (creative layouts)
- **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
- **Variant Control**: Generate N prototypes per page based on `--variants` (default: 1)
- **Layout Diversity**: Agent mode explores structural variations (F-pattern, grid, asymmetric)
- **Production-Ready**: Semantic HTML5, ARIA attributes, responsive design
## Execution Protocol
### Phase 1: Session & Requirements Loading
### Phase 1: Mode Detection & Context 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
# Detect execution mode
IF --use-agent:
mode = "agent" # Agent-driven creative layouts
ELSE:
mode = "conventional" # Codex primary generation
# Detect session mode
IF --session:
session_mode = "integrated"
session_id = {provided_session}
base_path = ".workflow/WFS-{session_id}/"
ELSE:
session_mode = "standalone"
# Infer session_id from existing design-session-* directory
base_path = "./{detected_design_session}/"
# Set parameters
PARSE: --pages to page_list[]
variants_count = --variants provided ? {count} : 1
VALIDATE: 1 <= variants_count <= 5
# Load design system
VERIFY: {base_path}/.design/style-consolidation/design-tokens.json exists
LOAD: design-tokens.json, style-guide.md, tailwind.config.js
# Load requirements (if integrated mode)
IF session_mode == "integrated":
LOAD: {base_path}/.brainstorming/synthesis-specification.md
```
### Phase 2: Context Gathering
**Load comprehensive context for UI generation**
### Phase 2: UI Generation Execution
**Route based on mode**:
#### A. Conventional Mode (Codex Primary)
Execute if `mode == "conventional"`
```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
# Single Codex call generates all variants for all pages
bash(codex -C {base_path}/.design/prototypes --full-auto exec "
PURPOSE: Generate UI prototypes adhering to design tokens
TASK: Create HTML/CSS for pages: {page_list} with {variants_count} variant(s) each
MODE: auto
CONTEXT: @{../style-consolidation/design-tokens.json,../style-consolidation/style-guide.md}
EXPECTED:
For each page, generate {variants_count} variant(s):
- {page}-variant-{n}.html (semantic HTML5)
- {page}-variant-{n}.css (token-driven, no hardcoded values)
- {page}-variant-{n}-notes.md (implementation notes)
RULES:
- STRICT token adherence: var(--color-brand-primary), var(--spacing-4)
- Semantic HTML5 + ARIA attributes
- Responsive: mobile-first, token-based breakpoints
- Variants differ in minor layout details
" --skip-git-repo-check -s danger-full-access)
```
### Phase 3: Codex UI Generation (Primary)
**Agent Invocation**: Task(conceptual-planning-agent) with Codex capabilities
#### B. Agent Mode (Creative Layouts)
Execute if `mode == "agent"`
**Agent-Driven Parallel Generation**:
```bash
# Define layout strategies for diversity
layouts = generate_layout_strategies(variants_count)
# Example: ["F-Pattern", "Asymmetric Grid", "Card-Based Modular"]
# Launch parallel agent tasks for each page-variant combination
FOR page IN page_list:
FOR i IN range(variants_count):
Task(conceptual-planning-agent): "
[FLOW_CONTROL]
Generate UI prototype: {page} using '{layouts[i]}' layout
## Context
PAGE: {page}
LAYOUT_STRATEGY: {layouts[i]}
OUTPUT: {base_path}/.design/prototypes/
## Flow Steps
1. **load_design_system**
Read design-tokens.json and style-guide.md
2. **load_requirements**
IF session_mode == 'integrated':
Read synthesis-specification.md for {page} requirements
3. **generate_prototype_codex**
Use Codex to generate HTML/CSS with layout focus:
Layout: {layouts[i]}
Token adherence: STRICT (all values from design-tokens)
Output: {page}-variant-{i}.html/css/notes.md
## Rules
- Layout must follow '{layouts[i]}' strategy
- Examples:
* F-Pattern: Content flows top→left→middle→bottom
* Asymmetric Grid: Strong visual hierarchy, off-center
* Card-Based: Modular components, flexible grid
- STRICT token usage, semantic HTML, ARIA attributes
"
Wait for all {len(page_list) * variants_count} tasks to complete
```
### Phase 3: Generate Preview Files
```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>
# Generate preview utilities
Write({base_path}/.design/prototypes/index.html) # Master navigation
Write({base_path}/.design/prototypes/compare.html) # Side-by-side comparison
Write({base_path}/.design/prototypes/PREVIEW.md) # Setup instructions
```
**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)
### Phase 4: TodoWrite & Completion
**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: Generate Preview Enhancement Files
**Direct Execution**: Create preview index and comparison view
```bash
# Generate preview index page
Write(.workflow/WFS-{session}/.design/prototypes/index.html):
- List all generated prototypes with thumbnails
- Quick navigation to individual variants
- Metadata: page name, variant count, generation timestamp
- Direct links to HTML files
# Generate side-by-side comparison view
Write(.workflow/WFS-{session}/.design/prototypes/compare.html):
- Iframe-based comparison for all variants of same page
- Responsive viewport toggles (mobile, tablet, desktop)
- Synchronized scrolling option
- Variant labels and quick switching
# Generate preview server instructions
Write(.workflow/WFS-{session}/.design/prototypes/PREVIEW.md):
- How to open files directly in browser
- Local server setup commands (Python, Node.js, PHP)
- Port and access instructions
- Browser compatibility notes
```
**Output**:
- `index.html`: Master index page for all prototypes
- `compare.html`: Side-by-side comparison view
- `PREVIEW.md`: Preview instructions and server setup guide
### Phase 5: Gemini Variant Suggestions (Optional)
**Conditional Execution**: Only if --variants > 1
```bash
IF variants_count > 1:
bash(cd .workflow/WFS-{session}/.design/prototypes && \
~/.claude/scripts/gemini-wrapper -p "
PURPOSE: Generate semantic layout variation rationale
TASK: Analyze synthesis-specification.md and explain {variants_count} layout approaches
MODE: analysis
CONTEXT: @{../../.brainstorming/synthesis-specification.md,../../.brainstorming/ui-designer/analysis.md}
EXPECTED: variant-suggestions.md with layout rationale for each variant
RULES: Focus on information hierarchy, component composition, user flow emphasis, layout patterns
")
```
**Output**: `variant-suggestions.md` with Gemini's layout rationale
### Phase 6: 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 preview enhancement files (index, compare, instructions)",
status: "completed",
activeForm: "Generating preview files"
},
{
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"
}
{content: "Detect mode and load design system", status: "completed", activeForm: "Loading design system"},
{content: "Generate {len(page_list) * variants_count} UI prototypes", status: "completed", activeForm: "Generating prototypes"},
{content: "Generate preview files", status: "completed", activeForm: "Generating preview"}
]
});
```
**Completion Message**:
```
UI generation complete for session: {session_id}
Mode: {mode} | Pages: {page_list} | Variants: {variants_count}
Generated {len(page_list) * variants_count} prototypes:
{list_generated_files}
Location: {base_path}/.design/prototypes/
Preview: Open index.html or run: python -m http.server 8080
Next: /workflow:design:design-update --session {session_id} --selected-prototypes "{selected_ids}"
```
## Output Structure
```

120
CHANGELOG.md
View File

@@ -5,6 +5,126 @@ 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.1] - 2025-10-07
### 🚀 Enhanced UI Design Workflow with Agent Mode & Flexible Inputs
This release significantly enhances the UI design workflow with agent-driven creative exploration, unified variant control, dual-mode support (standalone/integrated), and flexible input sources (images + text prompts).
#### Added
**Unified Variant Control**:
- **`--variants <count>`**: Single parameter controls both style cards AND UI prototypes generation
- Default: 3 | Range: 1-5
- Data flow: `auto.md` → `style-extract` → `ui-generate`
- Example: `--variants 3` generates 3 style cards and 3 UI variants per page
**Agent Creative Exploration Mode** (`--use-agent`):
- **style-extract**: Parallel generation of distinctly different design directions
- Conventional mode: Subtle variations within same core style
- Agent mode: Dramatically different aesthetics (e.g., "Modern Minimalist" vs "Brutalist Tech" vs "Organic Warmth")
- Uses `conceptual-planning-agent` for creative exploration
- **ui-generate**: Diverse layout strategies exploration
- Conventional mode: Minor layout differences
- Agent mode: Structural variations (F-Pattern, Asymmetric Grid, Card-Based Modular)
- Parallel execution for efficiency
**Dual Mode Support**:
- **Integrated Mode** (with `--session`): Works within existing workflow session
- Location: `.workflow/WFS-{session}/`
- Reads from `.brainstorming/` artifacts
- Phase 4 (design-update) updates synthesis-specification.md
- **Standalone Mode** (without `--session`): Independent quick prototyping
- Auto-creates: `design-session-YYYYMMDD-HHMMSS/`
- No dependency on brainstorming phase
- Phase 4 (design-update) is skipped
- Outputs final summary instead
**Dual Input Source Support**:
- **`--images`**: Reference image paths (optional, default: `design-refs/*`)
- **`--prompt`**: Text description of design style (NEW)
- **Hybrid Mode**: Both combined - text guides image analysis
- Input modes:
- Pure image: Existing triple vision analysis
- Pure text: Claude keywords → Gemini philosophy → Codex tokens
- Hybrid: Text as context for visual analysis
#### Changed
**Command Interface Simplification**:
- **`/workflow:design:auto`**:
- `--session` now optional (enables standalone mode when omitted)
- `--images` now optional (defaults to `design-refs/*`)
- Added `--prompt` for text-based design input
- Added `--use-agent` for creative exploration
- **Before**: `/workflow:design:auto --session WFS-auth --images "refs/*.png" --pages "login"`
- **After**: `/workflow:design:auto --pages "login"` (all defaults)
- **Agent Mode**: `/workflow:design:auto --prompt "Modern SaaS" --pages "home" --variants 3 --use-agent`
- **`/workflow:design:style-extract`**:
- Added `--variants <count>` parameter
- Added `--use-agent` flag
- Added `--prompt <description>` parameter
- `--session` now optional
- Supports image-only, text-only, or hybrid inputs
- **`/workflow:design:ui-generate`**:
- Added `--use-agent` flag
- `--session` now optional
- Removed `--style-overrides` (simplified)
- Agent mode enables parallel layout exploration
#### Usage Examples
**Standalone Quick Prototyping**:
```bash
# Pure text, agent exploration
/workflow:design:auto --prompt "Modern minimalist blog, dark theme" --pages "home,article" --variants 3 --use-agent
# Pure image, conventional mode
/workflow:design:auto --images "refs/*.png" --pages "dashboard" --variants 2
# Hybrid input
/workflow:design:auto --images "current-app.png" --prompt "Modernize with Linear.app style" --pages "tasks,settings" --use-agent
```
**Integrated Workflow Enhancement**:
```bash
# Within existing workflow session
/workflow:design:auto --session WFS-app-refresh --images "refs/*.png" --pages "dashboard" --variants 3 --use-agent
```
#### Technical Details
**Agent Mode Architecture**:
- Uses `conceptual-planning-agent` for both style-extract and ui-generate phases
- Parallel task execution: N variants × M pages run concurrently
- Theme diversity strategies:
- style-extract: Creative theme generation (Minimalist, Brutalist, Organic)
- ui-generate: Layout strategy assignment (F-Pattern, Grid, Asymmetric)
- Quality assurance: All variants maintain strict token adherence and WCAG AA compliance
**Mode Detection Logic**:
```bash
# Session mode
IF --session provided: mode = "integrated"
ELSE: mode = "standalone", auto-create design-session-YYYYMMDD-HHMMSS/
# Execution mode
IF --use-agent: mode = "agent" (creative exploration)
ELSE: mode = "conventional" (triple vision)
# Input mode
IF --images AND --prompt: mode = "hybrid"
ELSE IF --images: mode = "image"
ELSE IF --prompt: mode = "text"
```
**Backward Compatibility**:
- All existing commands continue to work unchanged
- New parameters are optional with sensible defaults
- No breaking changes to command interfaces
## [3.5.0] - 2025-10-06
### 🎨 UI Design Workflow with Triple Vision Analysis & Interactive Preview