mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-13 02:41:50 +08:00
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>
This commit is contained in:
catlog22
@@ -1,45 +1,47 @@
|
||||
---
|
||||
name: auto
|
||||
description: Orchestrate complete UI design refinement workflow from style extraction to brainstorming integration
|
||||
usage: /workflow:design:auto --session <session_id> --images "<glob>" --pages "<list>" [--interactive] [--variants <count>]
|
||||
argument-hint: "--session WFS-session-id --images \"refs/*.png\" --pages \"dashboard,auth\" [--interactive] [--variants 2]"
|
||||
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" --interactive
|
||||
- /workflow:design:auto --session WFS-dashboard --images "refs/*.jpg" --pages "dashboard" --variants 3
|
||||
allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*)
|
||||
- /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
|
||||
Complete autonomous orchestration of UI design refinement workflow: style extraction → consolidation → UI generation → brainstorming integration.
|
||||
Semi-autonomous UI design workflow with interactive checkpoints: style extraction → **user selection** → consolidation → UI generation → **user confirmation** → design update → optional batch planning.
|
||||
|
||||
## Coordinator Role
|
||||
**Pure orchestrator following /workflow:plan pattern**: Execute 4 design commands in sequence with TodoWrite-driven auto-continuation, no user intervention required.
|
||||
**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 - Auto-Continue Workflow
|
||||
## Execution Model - Checkpoint Workflow
|
||||
|
||||
This workflow runs **fully autonomously** once triggered:
|
||||
This workflow runs **semi-autonomously** with user checkpoints:
|
||||
|
||||
1. **User triggers**: `/workflow:design:auto --session WFS-xxx --images "refs/*.png" --pages "dashboard,auth"`
|
||||
2. **Phase 1 executes** (style-extract) → Reports output → Auto-continues
|
||||
3. **Phase 2 executes** (style-consolidate) → Reports output → Auto-continues
|
||||
4. **Phase 3 executes** (ui-generate) → Reports output → Auto-continues
|
||||
5. **Phase 4 executes** (design-update) → Reports final summary
|
||||
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
|
||||
|
||||
**Auto-Continue Mechanism**:
|
||||
- TodoWrite tracks current phase status
|
||||
- After each phase completion, automatically executes next pending phase
|
||||
- **No user action required** - workflow runs end-to-end autonomously
|
||||
- Progress updates shown at each phase for visibility
|
||||
**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. **Auto-Continue via TodoWrite**: Check TodoWrite status to execute next pending phase automatically
|
||||
5. **Track Progress**: Update TodoWrite after every phase completion
|
||||
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
|
||||
|
||||
@@ -49,10 +51,10 @@ This workflow runs **fully autonomously** once triggered:
|
||||
- `--pages "<page_list>"`: Comma-separated list of pages to generate
|
||||
|
||||
**Optional Parameters**:
|
||||
- `--interactive`: Enable interactive style variant selection (default: auto-select first variant)
|
||||
- `--variants <count>`: Number of UI variants per page (default: 1)
|
||||
- `--batch-plan`: Auto-generate implementation tasks for selected prototypes after design-update
|
||||
|
||||
## 4-Phase Execution
|
||||
## 5-Phase Execution
|
||||
|
||||
### Phase 1: Style Extraction
|
||||
**Command**: `SlashCommand(command="/workflow:design:style-extract --session {session_id} --images \"{image_glob}\"")`
|
||||
@@ -60,50 +62,43 @@ This workflow runs **fully autonomously** once triggered:
|
||||
**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, phase 2 in_progress
|
||||
**TodoWrite**: Mark phase 1 completed, mark checkpoint "awaiting_user_confirmation"
|
||||
|
||||
**After Phase 1**: Report to user, auto-continue to Phase 2
|
||||
**⏸️ 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/
|
||||
|
||||
Continuing to Phase 2: Style Consolidation...
|
||||
⏸️ 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
|
||||
**Command Construction**:
|
||||
### Phase 2: Style Consolidation (User-Triggered)
|
||||
**User Command**: `/workflow:design:style-consolidate --session {session_id} --variants "{selected_variants}"`
|
||||
|
||||
```bash
|
||||
IF --interactive flag present:
|
||||
command = "/workflow:design:style-consolidate --session {session_id} --interactive"
|
||||
ELSE:
|
||||
# Auto-select first variant
|
||||
command = "/workflow:design:style-consolidate --session {session_id} --variants \"variant-1\""
|
||||
```
|
||||
|
||||
**Command**: `SlashCommand(command="{constructed_command}")`
|
||||
|
||||
**Parse Output**:
|
||||
- Verify: `.design/style-consolidation/design-tokens.json` created
|
||||
- Extract: `token_count`, `validation_status` from output message
|
||||
|
||||
**Validation**:
|
||||
- Design tokens finalized
|
||||
- Validation report shows no critical errors
|
||||
**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
|
||||
|
||||
**After Phase 2**: Report to user, auto-continue to Phase 3
|
||||
|
||||
**Output**:
|
||||
```
|
||||
Phase 2 Complete: Style Consolidation
|
||||
Design tokens: {count}
|
||||
@@ -115,7 +110,7 @@ Continuing to Phase 3: UI Generation...
|
||||
|
||||
---
|
||||
|
||||
### Phase 3: UI Generation
|
||||
### Phase 3: UI Generation (Auto-Triggered after Phase 2)
|
||||
**Command Construction**:
|
||||
|
||||
```bash
|
||||
@@ -127,41 +122,50 @@ command = "/workflow:design:ui-generate --session {session_id} --pages \"{page_l
|
||||
|
||||
**Parse Output**:
|
||||
- Verify: `.design/prototypes/*.html` files created
|
||||
- Extract: `prototype_count`, `page_list` from output message
|
||||
- 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, phase 4 in_progress
|
||||
**TodoWrite**: Mark phase 3 completed, mark checkpoint "awaiting_user_confirmation"
|
||||
|
||||
**After Phase 3**: Report to user, auto-continue to Phase 4
|
||||
**⏸️ CHECKPOINT 2: Pause for User Prototype Confirmation**
|
||||
|
||||
```
|
||||
Phase 3 Complete: UI Generation
|
||||
Prototypes generated: {count}
|
||||
Pages: {page_list}
|
||||
Prototypes generated: {count} ({page_list})
|
||||
Generated files: {file_list}
|
||||
Location: .workflow/WFS-{session}/.design/prototypes/
|
||||
|
||||
Continuing to Phase 4: Design System Integration...
|
||||
⏸️ 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
|
||||
**Command**: `SlashCommand(command="/workflow:design:design-update --session {session_id}")`
|
||||
### 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
|
||||
|
||||
**Validation**:
|
||||
- Brainstorming artifacts successfully updated
|
||||
- Design system references integrated
|
||||
|
||||
**TodoWrite**: Mark phase 4 completed
|
||||
|
||||
**Return to User**:
|
||||
**Output** (if --batch-plan NOT present):
|
||||
```
|
||||
UI Design Refinement Complete for session: WFS-{session}
|
||||
|
||||
@@ -183,6 +187,45 @@ Next Steps:
|
||||
(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
|
||||
|
||||
@@ -1,22 +1,23 @@
|
||||
---
|
||||
name: style-extract
|
||||
description: Extract design style from reference images using Gemini Vision and Codex
|
||||
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: Task(conceptual-planning-agent), TodoWrite(*), Read(*), Write(*), Bash(*), Glob(*)
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Bash(*), Glob(*)
|
||||
---
|
||||
|
||||
# Style Extraction Command
|
||||
|
||||
## Overview
|
||||
Extract design style elements from reference images using a hybrid approach: Gemini Vision for semantic understanding and Codex for structured CSS token generation.
|
||||
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
|
||||
- **Visual Semantic Understanding**: Gemini Vision analyzes design style, typography, and composition
|
||||
- **Structured Token Generation**: Codex converts semantic analysis to OKLCH + CSS variables + Tailwind config
|
||||
- **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
|
||||
|
||||
@@ -31,73 +32,102 @@ EXPAND: glob pattern to concrete image paths
|
||||
VERIFY: at least one image file exists
|
||||
```
|
||||
|
||||
### Phase 2: Gemini Vision Analysis
|
||||
**Agent Invocation**: Task(conceptual-planning-agent) with Gemini Vision capability
|
||||
### Phase 2: Claude Code Vision Analysis (Quick Initial Pass)
|
||||
**Direct Execution**: Use Read tool with image paths
|
||||
|
||||
```bash
|
||||
Task(conceptual-planning-agent): "
|
||||
[FLOW_CONTROL]
|
||||
# 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
|
||||
|
||||
Extract visual design semantics from reference images
|
||||
|
||||
## Context Loading
|
||||
ASSIGNED_TASK: style-extraction
|
||||
OUTPUT_LOCATION: .workflow/WFS-{session}/.design/style-extraction/
|
||||
IMAGE_INPUTS: {expanded_image_paths}
|
||||
|
||||
## Flow Control Steps
|
||||
1. **load_images_gemini**
|
||||
- Action: Analyze reference images using Gemini Vision
|
||||
- Command: bash(cd .workflow/WFS-{session} && ~/.claude/scripts/gemini-wrapper --approval-mode yolo -p \"
|
||||
PURPOSE: Extract design style semantics from reference images
|
||||
TASK: Analyze color palettes, typography, spacing, layout principles, component styles
|
||||
MODE: write
|
||||
CONTEXT: @{../../{image_paths}}
|
||||
EXPECTED: JSON with semantic style description (colors with names, font characteristics, spacing scale, design philosophy)
|
||||
RULES: Focus on extracting semantic meaning, not exact pixel values
|
||||
\")
|
||||
- Output: semantic_style_analysis.json
|
||||
|
||||
2. **load_session_context**
|
||||
- Action: Load brainstorming context for style alignment
|
||||
- Command: Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md) || Read(.workflow/WFS-{session}/.brainstorming/ui-designer/analysis.md)
|
||||
- Output: design_context
|
||||
- Optional: true
|
||||
|
||||
## Analysis Requirements
|
||||
**Semantic Extraction**: Identify design philosophy (minimalist, brutalist, neumorphic, etc.)
|
||||
**Color System**: Extract primary, secondary, accent colors with semantic names
|
||||
**Typography**: Font families, weights, scale (headings, body, small)
|
||||
**Spacing**: Identify spacing scale patterns
|
||||
**Components**: Border radius, shadows, button styles, card styles
|
||||
|
||||
## Expected Deliverables
|
||||
1. **semantic_style_analysis.json**: Gemini Vision analysis results
|
||||
"
|
||||
# Write preliminary analysis
|
||||
Write(.workflow/WFS-{session}/.design/style-extraction/claude_vision_analysis.json)
|
||||
```
|
||||
|
||||
### Phase 3: Codex Structured Token Generation
|
||||
**Agent Invocation**: Task(conceptual-planning-agent) with Codex capabilities
|
||||
**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
|
||||
Task(conceptual-planning-agent): "
|
||||
[FLOW_CONTROL]
|
||||
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.
|
||||
")
|
||||
|
||||
Convert semantic style analysis to structured CSS tokens
|
||||
# Output: gemini_vision_analysis.json
|
||||
```
|
||||
|
||||
## Context Loading
|
||||
INPUT_ANALYSIS: .workflow/WFS-{session}/.design/style-extraction/semantic_style_analysis.json
|
||||
OUTPUT_LOCATION: .workflow/WFS-{session}/.design/style-extraction/
|
||||
TECH_STACK_CONTEXT: CLAUDE.md, .claude/workflows/cli-templates/tech-stacks/*.md
|
||||
**Output**: `gemini_vision_analysis.json` with Gemini's deep semantic analysis
|
||||
|
||||
## Flow Control Steps
|
||||
1. **load_semantic_analysis**
|
||||
- Action: Read Gemini Vision analysis
|
||||
- Command: Read(.workflow/WFS-{session}/.design/style-extraction/semantic_style_analysis.json)
|
||||
- Output: semantic_analysis
|
||||
### Phase 4: Codex Vision Analysis (Structured Pattern Recognition)
|
||||
**Direct Bash Execution**: Codex with -i parameter
|
||||
|
||||
2. **generate_css_tokens_codex**
|
||||
- Action: Convert semantic analysis to structured CSS tokens
|
||||
```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
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
---
|
||||
name: ui-generate
|
||||
description: Generate UI prototypes using consolidated design tokens and synthesis specification
|
||||
usage: /workflow:design:ui-generate --session <session_id> --pages "<page_list>" [--variants <count>]
|
||||
argument-hint: "--session WFS-session-id --pages \"dashboard,auth,settings\" [--variants 2]"
|
||||
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
|
||||
allowed-tools: Task(conceptual-planning-agent), TodoWrite(*), Read(*), Write(*), Bash(*)
|
||||
- /workflow:design:ui-generate --session WFS-dashboard --pages "dashboard" --variants 3 --style-overrides "overrides.json"
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Bash(*)
|
||||
---
|
||||
|
||||
# UI Generation Command
|
||||
|
||||
Reference in New Issue
Block a user