mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-08 02:14:08 +08:00
Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
ad32e7f4a2 | ||
|
|
184fd1475b | ||
|
|
b27708a7da | ||
|
|
56a3543031 | ||
|
|
28c93a0001 | ||
|
|
81e1d3e940 | ||
|
|
451b1a762e | ||
|
|
59b4b57537 |
@@ -1,425 +0,0 @@
|
||||
---
|
||||
name: auto
|
||||
description: Orchestrate UI design refinement workflow with interactive checkpoints for user selection
|
||||
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 --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(*)
|
||||
---
|
||||
|
||||
# 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**:
|
||||
- `--pages "<page_list>"`: Comma-separated list of pages to generate
|
||||
|
||||
**Optional Parameters**:
|
||||
- `--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 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` (should match `variants_count`)
|
||||
- List available style variant IDs
|
||||
|
||||
**Validation**:
|
||||
- Style cards successfully generated
|
||||
- Variant count matches requested count
|
||||
|
||||
**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}" : ""
|
||||
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}")`
|
||||
|
||||
**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.
|
||||
@@ -1,319 +0,0 @@
|
||||
---
|
||||
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"
|
||||
```
|
||||
@@ -1,268 +0,0 @@
|
||||
---
|
||||
name: style-extract
|
||||
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 --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
|
||||
|
||||
## 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
|
||||
- **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 0: Mode & Parameter Detection
|
||||
```bash
|
||||
# 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 1: Input Validation & Preparation
|
||||
```bash
|
||||
# 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
|
||||
|
||||
IF input_mode IN ["text", "hybrid"]:
|
||||
VALIDATE: --prompt is non-empty string
|
||||
|
||||
# Create session directory structure
|
||||
CREATE: {base_path}/.design/style-extraction/
|
||||
```
|
||||
|
||||
### Phase 2: Style Extraction Execution
|
||||
|
||||
**Route based on mode**:
|
||||
|
||||
#### A. Conventional Mode (Triple Vision)
|
||||
Execute if `mode == "conventional"`
|
||||
|
||||
**Step 1**: Claude Code initial analysis
|
||||
```bash
|
||||
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 design semantics {guidance}
|
||||
TASK: Generate {variants_count} distinct style directions
|
||||
MODE: write
|
||||
CONTEXT: {context_arg}
|
||||
EXPECTED: {variants_count} style analysis variants in JSON
|
||||
RULES: OKLCH colors, semantic naming, explore diverse themes
|
||||
")
|
||||
```
|
||||
|
||||
**Step 3**: Codex structured token generation
|
||||
```bash
|
||||
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: @{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)
|
||||
```
|
||||
|
||||
#### B. Agent Mode (Creative Exploration)
|
||||
Execute if `mode == "agent"`
|
||||
|
||||
**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}"
|
||||
|
||||
# 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)
|
||||
```
|
||||
|
||||
**Output**: `style-cards.json` with {variants_count} creatively distinct variants
|
||||
|
||||
### Phase 3: TodoWrite & Completion
|
||||
|
||||
```javascript
|
||||
TodoWrite({
|
||||
todos: [
|
||||
{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
|
||||
|
||||
```
|
||||
.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]
|
||||
```
|
||||
@@ -1,543 +0,0 @@
|
||||
---
|
||||
name: ui-generate
|
||||
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 --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
|
||||
|
||||
## Overview
|
||||
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
|
||||
- **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: Mode Detection & Context Loading
|
||||
```bash
|
||||
# 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: UI Generation Execution
|
||||
|
||||
**Route based on mode**:
|
||||
|
||||
#### A. Conventional Mode (Codex Primary)
|
||||
Execute if `mode == "conventional"`
|
||||
|
||||
```bash
|
||||
# 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)
|
||||
```
|
||||
|
||||
#### 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
|
||||
# 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
|
||||
```
|
||||
|
||||
### Phase 4: TodoWrite & Completion
|
||||
|
||||
```javascript
|
||||
TodoWrite({
|
||||
todos: [
|
||||
{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
|
||||
|
||||
```
|
||||
.workflow/WFS-{session}/.design/prototypes/
|
||||
├── index.html # 🆕 Preview index page (master navigation)
|
||||
├── compare.html # 🆕 Side-by-side comparison view
|
||||
├── PREVIEW.md # 🆕 Preview instructions and server setup
|
||||
├── 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);
|
||||
}
|
||||
```
|
||||
|
||||
### Preview Index Page Template (index.html)
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>UI Prototypes Preview - WFS-{session}</title>
|
||||
<style>
|
||||
body { font-family: system-ui; max-width: 1200px; margin: 2rem auto; padding: 0 1rem; }
|
||||
h1 { color: #2563eb; }
|
||||
.prototype-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
|
||||
.prototype-card { border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 1rem; transition: box-shadow 0.2s; }
|
||||
.prototype-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
|
||||
.prototype-card h3 { margin: 0 0 0.5rem; color: #1f2937; }
|
||||
.prototype-card .meta { font-size: 0.875rem; color: #6b7280; margin-bottom: 1rem; }
|
||||
.prototype-card a { display: inline-block; margin-right: 0.5rem; color: #2563eb; text-decoration: none; }
|
||||
.prototype-card a:hover { text-decoration: underline; }
|
||||
.actions { margin-top: 2rem; padding: 1rem; background: #f3f4f6; border-radius: 0.5rem; }
|
||||
.actions a { margin-right: 1rem; color: #2563eb; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>🎨 UI Prototypes Preview</h1>
|
||||
<p><strong>Session:</strong> WFS-{session} | <strong>Generated:</strong> {timestamp}</p>
|
||||
|
||||
<div class="actions">
|
||||
<a href="compare.html">📊 Compare All Variants</a>
|
||||
<a href="PREVIEW.md">📖 Preview Instructions</a>
|
||||
</div>
|
||||
|
||||
<div class="prototype-grid">
|
||||
<!-- Auto-generated for each page-variant -->
|
||||
<div class="prototype-card">
|
||||
<h3>Dashboard - Variant 1</h3>
|
||||
<div class="meta">Generated: {timestamp}</div>
|
||||
<a href="dashboard-variant-1.html" target="_blank">View Prototype →</a>
|
||||
<a href="dashboard-variant-1-notes.md">Implementation Notes</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Comparison View Template (compare.html)
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Side-by-Side Comparison - WFS-{session}</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { font-family: system-ui; }
|
||||
.header { background: #1f2937; color: white; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; }
|
||||
.controls { display: flex; gap: 1rem; align-items: center; }
|
||||
select, button { padding: 0.5rem 1rem; border-radius: 0.25rem; border: 1px solid #d1d5db; background: white; cursor: pointer; }
|
||||
button:hover { background: #f3f4f6; }
|
||||
.comparison-container { display: flex; height: calc(100vh - 60px); }
|
||||
.variant-panel { flex: 1; border-right: 2px solid #e5e7eb; position: relative; }
|
||||
.variant-panel:last-child { border-right: none; }
|
||||
.variant-label { position: absolute; top: 0; left: 0; right: 0; background: rgba(37,99,235,0.9); color: white; padding: 0.5rem; text-align: center; z-index: 10; font-weight: 600; }
|
||||
iframe { width: 100%; height: 100%; border: none; padding-top: 2.5rem; }
|
||||
.viewport-toggle { display: flex; gap: 0.5rem; }
|
||||
.viewport-btn { padding: 0.25rem 0.75rem; font-size: 0.875rem; }
|
||||
.viewport-btn.active { background: #2563eb; color: white; border-color: #2563eb; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>📊 Side-by-Side Comparison</h1>
|
||||
<div class="controls">
|
||||
<div class="viewport-toggle">
|
||||
<button class="viewport-btn active" data-width="100%">Desktop</button>
|
||||
<button class="viewport-btn" data-width="768px">Tablet</button>
|
||||
<button class="viewport-btn" data-width="375px">Mobile</button>
|
||||
</div>
|
||||
<select id="page-select">
|
||||
<option value="dashboard">Dashboard</option>
|
||||
<option value="auth">Auth</option>
|
||||
</select>
|
||||
<label><input type="checkbox" id="sync-scroll"> Sync Scroll</label>
|
||||
<a href="index.html" style="color: white;">← Back to Index</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison-container">
|
||||
<div class="variant-panel">
|
||||
<div class="variant-label">Variant 1</div>
|
||||
<iframe id="frame1" src="dashboard-variant-1.html"></iframe>
|
||||
</div>
|
||||
<div class="variant-panel">
|
||||
<div class="variant-label">Variant 2</div>
|
||||
<iframe id="frame2" src="dashboard-variant-2.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Viewport switching
|
||||
document.querySelectorAll('.viewport-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
document.querySelectorAll('.viewport-btn').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
const width = btn.dataset.width;
|
||||
document.querySelectorAll('iframe').forEach(frame => {
|
||||
frame.style.width = width;
|
||||
frame.style.margin = width === '100%' ? '0' : '0 auto';
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Synchronized scrolling
|
||||
const syncCheckbox = document.getElementById('sync-scroll');
|
||||
const frames = [document.getElementById('frame1'), document.getElementById('frame2')];
|
||||
|
||||
syncCheckbox.addEventListener('change', () => {
|
||||
if (syncCheckbox.checked) {
|
||||
frames.forEach(frame => {
|
||||
frame.contentWindow.addEventListener('scroll', () => {
|
||||
const scrollTop = frame.contentWindow.scrollY;
|
||||
frames.forEach(f => {
|
||||
if (f !== frame) f.contentWindow.scrollTo(0, scrollTop);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Page switching
|
||||
document.getElementById('page-select').addEventListener('change', (e) => {
|
||||
const page = e.target.value;
|
||||
document.getElementById('frame1').src = `${page}-variant-1.html`;
|
||||
document.getElementById('frame2').src = `${page}-variant-2.html`;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Preview Instructions Template (PREVIEW.md)
|
||||
```markdown
|
||||
# UI Prototypes Preview Guide
|
||||
|
||||
## Session Information
|
||||
- **Session ID**: WFS-{session}
|
||||
- **Generated**: {timestamp}
|
||||
- **Pages**: {page_list}
|
||||
- **Variants per page**: {variants_count}
|
||||
|
||||
## Quick Preview Options
|
||||
|
||||
### Option 1: Direct Browser Opening (Simplest)
|
||||
1. Navigate to `.workflow/WFS-{session}/.design/prototypes/`
|
||||
2. Double-click `index.html` to open the preview index
|
||||
3. Click any prototype link to view in browser
|
||||
|
||||
### Option 2: Local Development Server (Recommended)
|
||||
|
||||
#### Python (Built-in)
|
||||
```bash
|
||||
cd .workflow/WFS-{session}/.design/prototypes
|
||||
python -m http.server 8080
|
||||
# Visit: http://localhost:8080
|
||||
```
|
||||
|
||||
#### Node.js (npx)
|
||||
```bash
|
||||
cd .workflow/WFS-{session}/.design/prototypes
|
||||
npx http-server -p 8080
|
||||
# Visit: http://localhost:8080
|
||||
```
|
||||
|
||||
#### PHP (Built-in)
|
||||
```bash
|
||||
cd .workflow/WFS-{session}/.design/prototypes
|
||||
php -S localhost:8080
|
||||
# Visit: http://localhost:8080
|
||||
```
|
||||
|
||||
#### VS Code Live Server
|
||||
1. Install "Live Server" extension
|
||||
2. Right-click `index.html`
|
||||
3. Select "Open with Live Server"
|
||||
|
||||
## Preview Features
|
||||
|
||||
### Index Page (`index.html`)
|
||||
- **Master navigation** for all prototypes
|
||||
- **Quick links** to individual variants
|
||||
- **Metadata display**: timestamps, page info
|
||||
- **Direct access** to implementation notes
|
||||
|
||||
### Comparison View (`compare.html`)
|
||||
- **Side-by-side** variant comparison
|
||||
- **Viewport toggles**: Desktop (100%), Tablet (768px), Mobile (375px)
|
||||
- **Synchronized scrolling** option
|
||||
- **Page switching** dropdown
|
||||
- **Real-time** comparison
|
||||
|
||||
## Browser Compatibility
|
||||
- ✅ Chrome/Edge (Recommended)
|
||||
- ✅ Firefox
|
||||
- ✅ Safari
|
||||
- ⚠️ Some CSS features may require modern browsers (OKLCH colors)
|
||||
|
||||
## Files Overview
|
||||
```
|
||||
prototypes/
|
||||
├── index.html ← Start here
|
||||
├── compare.html ← Side-by-side comparison
|
||||
├── PREVIEW.md ← This file
|
||||
├── {page}-variant-{n}.html ← Individual prototypes
|
||||
├── {page}-variant-{n}.css ← Styles (token-driven)
|
||||
├── design-tokens.css ← CSS custom properties
|
||||
└── {page}-variant-{n}-notes.md ← Implementation guidance
|
||||
```
|
||||
|
||||
## Next Steps
|
||||
1. **Review prototypes**: Open index.html
|
||||
2. **Compare variants**: Use compare.html for side-by-side view
|
||||
3. **Select preferred**: Note variant IDs for design-update command
|
||||
4. **Continue workflow**: Run design-update with selected prototypes
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
**Styles not loading?**
|
||||
- Ensure `design-tokens.css` is in the same directory
|
||||
- Check browser console for CSS errors
|
||||
- Verify file paths in HTML `<link>` tags
|
||||
|
||||
**OKLCH colors not displaying?**
|
||||
- Use Chrome/Edge 111+ or Firefox 113+
|
||||
- Fallback colors should work in older browsers
|
||||
|
||||
**Local server CORS issues?**
|
||||
- Use one of the recommended local servers
|
||||
- Avoid opening HTML files with `file://` protocol for best results
|
||||
```
|
||||
|
||||
|
||||
## 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 (complete, standalone)
|
||||
- {count} CSS files (token-driven)
|
||||
- {count} implementation notes
|
||||
- 🆕 index.html (preview navigation)
|
||||
- 🆕 compare.html (side-by-side comparison)
|
||||
- 🆕 PREVIEW.md (preview instructions)
|
||||
|
||||
📂 Location: .workflow/WFS-{session}/.design/prototypes/
|
||||
|
||||
🌐 Preview Options:
|
||||
1. Quick: Open index.html in browser
|
||||
2. Full: Start local server and visit http://localhost:8080
|
||||
- Python: cd prototypes && python -m http.server 8080
|
||||
- Node.js: cd prototypes && npx http-server -p 8080
|
||||
|
||||
📊 Compare Variants:
|
||||
- Open compare.html for side-by-side view
|
||||
- Toggle viewports: Desktop / Tablet / Mobile
|
||||
- Switch between pages dynamically
|
||||
- Synchronized scrolling option
|
||||
|
||||
Review prototypes and select preferred variants, then run:
|
||||
/workflow:design:design-update --session WFS-{session} --selected-prototypes "{page-variant-ids}"
|
||||
|
||||
Example:
|
||||
/workflow:design:design-update --session WFS-{session} --selected-prototypes "dashboard-variant-1,auth-variant-2"
|
||||
```
|
||||
383
.claude/commands/workflow/ui-design/auto.md
Normal file
383
.claude/commands/workflow/ui-design/auto.md
Normal file
@@ -0,0 +1,383 @@
|
||||
---
|
||||
name: auto
|
||||
description: Fully autonomous UI design workflow with style extraction, consolidation, prototype generation (3×3 matrix), and design system integration
|
||||
usage: /workflow:ui-design:auto [--prompt "<desc>"] [--images "<glob>"] [--pages "<list>"] [--session <id>] [--style-variants <count>] [--layout-variants <count>] [--batch-plan]
|
||||
argument-hint: "[--prompt \"Modern SaaS with 3 styles\"] [--images \"refs/*.png\"] [--pages \"dashboard,auth\"] [--session WFS-xxx] [--style-variants 3] [--layout-variants 3]"
|
||||
examples:
|
||||
- /workflow:ui-design:auto --prompt "Generate 3 style variants for modern blog: home, article, author"
|
||||
- /workflow:ui-design:auto --prompt "SaaS dashboard and settings with 2 layout options"
|
||||
- /workflow:ui-design:auto --images "refs/*.png" --prompt "E-commerce: home, product, cart" --style-variants 3 --layout-variants 3
|
||||
- /workflow:ui-design:auto --session WFS-auth --images "refs/*.png"
|
||||
allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*), Task(conceptual-planning-agent)
|
||||
---
|
||||
|
||||
# UI Design Auto Workflow Command
|
||||
|
||||
## Overview
|
||||
Fully autonomous UI design workflow: style extraction → consolidation → UI generation → design update → optional batch planning. This command orchestrates the entire design process without user intervention.
|
||||
|
||||
## Coordinator Role
|
||||
**Fully autonomous orchestrator**: Executes all phases sequentially, parsing outputs from one phase to construct the inputs for the next. Supports both standard sequential mode and parallel creative mode for generating diverse design variants.
|
||||
|
||||
## Execution Model - Autonomous Workflow
|
||||
|
||||
This workflow runs **fully autonomously** from start to finish:
|
||||
|
||||
1. **User triggers**: `/workflow:ui-design:auto --session WFS-xxx --images "refs/*.png" --pages "dashboard,auth" [--batch-plan]`
|
||||
2. **Phase 1 executes** (style-extract) → Auto-continues
|
||||
3. **Phase 2 executes** (style-consolidate) → Auto-continues
|
||||
4. **Phase 3 executes** (ui-generate) → Auto-continues
|
||||
5. **Phase 4 executes** (design-update) → Auto-continues
|
||||
6. **Phase 5 executes** (batch-plan, optional) → Reports task files
|
||||
|
||||
**Auto-Continue Mechanism**:
|
||||
- The workflow uses `TodoWrite` to track the state of each phase
|
||||
- Upon successful completion of a phase, the coordinator immediately constructs and executes the command for the next phase
|
||||
- This pattern ensures a seamless flow
|
||||
|
||||
## 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 (sub-commands handle their own validation)
|
||||
3. **Parse Every Output**: Extract required data from each command's output for the next phase
|
||||
4. **Auto-Continue**: After each phase, automatically proceed to the next without pausing
|
||||
5. **Track Progress**: Update `TodoWrite` after every phase completion
|
||||
6. **Default to All**: When selecting variants or prototypes for the next phase, the autonomous workflow defaults to using **all** generated items
|
||||
|
||||
## Parameter Requirements
|
||||
|
||||
**Optional Parameters** (all have smart defaults):
|
||||
- `--pages "<page_list>"`: Pages to generate (if omitted, inferred from prompt/session)
|
||||
- `--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 and pages (supports intelligent parsing)
|
||||
- `--style-variants <count>`: Number of style variants to generate (default: inferred from prompt or 3, range: 1-5)
|
||||
- `--layout-variants <count>`: Number of layout variants per style (default: inferred from prompt or 3, range: 1-5)
|
||||
- `--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
|
||||
|
||||
**Intelligent Prompt Parsing**:
|
||||
The workflow extracts variant counts from natural language:
|
||||
- "Generate **3 style variants**" → `--style-variants 3`
|
||||
- "**2 layout options**" → `--layout-variants 2`
|
||||
- "Create **4 styles** with **2 layouts each**" → `--style-variants 4 --layout-variants 2`
|
||||
- Explicit flags override prompt inference
|
||||
|
||||
## Execution Modes
|
||||
|
||||
### Matrix Mode (Default and Only)
|
||||
- Generates `style_variants × layout_variants × pages` prototypes in 3×3 matrix pattern
|
||||
- **Phase 1 (Style Extraction)**: Generates `style_variants` style options
|
||||
- **Phase 2 (Style Consolidation)**: Creates `style_variants` independent design systems
|
||||
- **Phase 3 (Matrix Generation)**: Generates `style_variants × layout_variants` prototypes per page
|
||||
- This is the only supported mode - focused on systematic design exploration
|
||||
|
||||
### Integrated vs. Standalone Mode
|
||||
- `--session` flag determines if the workflow is integrated with a larger session or runs standalone
|
||||
|
||||
## 6-Phase Execution
|
||||
|
||||
### Phase 0a: Intelligent Prompt Parsing
|
||||
```bash
|
||||
# Extract variant counts from prompt if not explicitly provided
|
||||
IF --prompt provided AND (NOT --style-variants OR NOT --layout-variants):
|
||||
prompt_text = {--prompt value}
|
||||
|
||||
# Parse style variants: "3 style variants", "generate 4 styles", etc.
|
||||
style_match = regex_search(prompt_text, r"(\d+)\s*(style\s*variants?|styles?)")
|
||||
IF style_match AND NOT --style-variants:
|
||||
style_variants = int(style_match.group(1))
|
||||
ELSE:
|
||||
style_variants = --style-variants OR 3 # Default to 3
|
||||
|
||||
# Parse layout variants: "2 layout options", "3 layouts each", etc.
|
||||
layout_match = regex_search(prompt_text, r"(\d+)\s*(layout\s*(variants?|options?)|layouts?)")
|
||||
IF layout_match AND NOT --layout-variants:
|
||||
layout_variants = int(layout_match.group(1))
|
||||
ELSE:
|
||||
layout_variants = --layout-variants OR 3 # Default to 3
|
||||
ELSE:
|
||||
style_variants = --style-variants OR 3
|
||||
layout_variants = --layout-variants OR 3
|
||||
|
||||
VALIDATE: 1 <= style_variants <= 5
|
||||
VALIDATE: 1 <= layout_variants <= 5
|
||||
|
||||
STORE: style_variants, layout_variants # For Phase 1 and Phase 3
|
||||
```
|
||||
|
||||
### Phase 0b: Run Initialization & Directory Setup
|
||||
```bash
|
||||
# Generate run ID with timestamp
|
||||
run_id = "run-$(date +%Y%m%d-%H%M%S)"
|
||||
|
||||
# Determine base path
|
||||
IF --session:
|
||||
session_id = {provided_session}
|
||||
base_path = ".workflow/WFS-{session_id}/runs/${run_id}"
|
||||
ELSE:
|
||||
# Standalone mode: use scratchpad
|
||||
session_id = "design-session-$(date +%Y%m%d-%H%M%S)"
|
||||
base_path = ".workflow/.scratchpad/${session_id}/runs/${run_id}"
|
||||
|
||||
# Create run directory structure
|
||||
Bash(mkdir -p "${base_path}/.design/style-extraction")
|
||||
Bash(mkdir -p "${base_path}/.design/style-consolidation")
|
||||
Bash(mkdir -p "${base_path}/.design/prototypes")
|
||||
|
||||
# Initialize run metadata
|
||||
Write({base_path}/.run-metadata.json):
|
||||
{
|
||||
"run_id": "${run_id}",
|
||||
"session_id": "${session_id}",
|
||||
"timestamp": "$(date -u +%Y-%m-%dT%H:%M:%SZ)",
|
||||
"workflow": "ui-design:auto",
|
||||
"parameters": {
|
||||
"style_variants": ${style_variants},
|
||||
"layout_variants": ${layout_variants},
|
||||
"pages": "${inferred_page_list}",
|
||||
"prompt": "${prompt_text}",
|
||||
"images": "${images_pattern}"
|
||||
},
|
||||
"status": "in_progress"
|
||||
}
|
||||
|
||||
# Update "latest" symlink (Windows-compatible)
|
||||
IF --session:
|
||||
Bash(cd ".workflow/WFS-{session_id}" && rm -rf latest && mklink /D latest "runs/${run_id}")
|
||||
ELSE:
|
||||
# Standalone mode: create symlink in scratchpad session dir
|
||||
Bash(cd ".workflow/.scratchpad/${session_id}" && rm -rf latest && mklink /D latest "runs/${run_id}")
|
||||
|
||||
STORE: run_id, base_path # Use throughout workflow
|
||||
```
|
||||
|
||||
### Phase 0c: Page Inference
|
||||
```bash
|
||||
# Infer page list if not explicitly provided
|
||||
IF --pages provided:
|
||||
page_list = parse_csv({--pages value})
|
||||
ELSE IF --prompt provided:
|
||||
# Extract page names from prompt (e.g., "blog with home, article, author pages")
|
||||
page_list = extract_pages_from_prompt({--prompt value})
|
||||
ELSE IF --session AND exists(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md):
|
||||
synthesis = Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md)
|
||||
page_list = extract_pages_from_synthesis(synthesis)
|
||||
ELSE:
|
||||
page_list = ["home"] # Default fallback
|
||||
|
||||
STORE: inferred_page_list = page_list # For Phase 3
|
||||
```
|
||||
|
||||
### Phase 1: Style Extraction
|
||||
**Command Construction**:
|
||||
```bash
|
||||
images_flag = --images present ? "--images \"{image_glob}\"" : ""
|
||||
prompt_flag = --prompt present ? "--prompt \"{prompt_text}\"" : ""
|
||||
|
||||
# Use run-scoped base path
|
||||
run_base_flag = "--base-path \"{base_path}/.design\""
|
||||
|
||||
# Use style_variants from Phase 0a
|
||||
command = "/workflow:ui-design:extract {run_base_flag} {images_flag} {prompt_flag} --variants {style_variants}"
|
||||
SlashCommand(command=command)
|
||||
```
|
||||
**Auto-Continue**: On completion, proceeds to Phase 2
|
||||
|
||||
---
|
||||
|
||||
### Phase 2: Style Consolidation with Separation (Auto-Triggered)
|
||||
**Action**: Consolidates each style variant into separate design systems for matrix generation
|
||||
|
||||
**Command Construction**:
|
||||
```bash
|
||||
# Use run-scoped base path and keep styles separate
|
||||
run_base_flag = "--base-path \"{base_path}/.design\""
|
||||
|
||||
# Use count-based parameter (automatically uses all style_variants)
|
||||
command = "/workflow:ui-design:consolidate {run_base_flag} --variants {style_variants} --keep-separate"
|
||||
```
|
||||
**Command**: `SlashCommand(command=command)`
|
||||
**Result**: Generates `style_variants` independent design systems:
|
||||
- `.design/style-consolidation/style-1/design-tokens.json`
|
||||
- `.design/style-consolidation/style-2/design-tokens.json`
|
||||
- `.design/style-consolidation/style-3/design-tokens.json`
|
||||
|
||||
**Auto-Continue**: On completion, proceeds to Phase 3
|
||||
|
||||
---
|
||||
|
||||
### Phase 3: Matrix UI Generation (Auto-Triggered)
|
||||
**Action**: Generates `style_variants × layout_variants × pages` prototypes using matrix mode
|
||||
|
||||
**Command Construction**:
|
||||
```bash
|
||||
run_base_flag = "--base-path \"{base_path}/.design\""
|
||||
pages_flag = "--pages \"{inferred_page_list}\""
|
||||
|
||||
# Matrix mode is default in generate.md, no mode flag needed
|
||||
command = "/workflow:ui-design:generate {run_base_flag} {pages_flag} --style-variants {style_variants} --layout-variants {layout_variants}"
|
||||
SlashCommand(command=command)
|
||||
```
|
||||
|
||||
**Result**: Generates `style_variants × layout_variants × pages` prototypes:
|
||||
- File naming: `{page}-style-{s}-layout-{l}.html`
|
||||
- Total prototypes: `style_variants * layout_variants * len(inferred_page_list)`
|
||||
- Matrix visualization: `compare.html` with interactive 3×3 grid
|
||||
|
||||
**Auto-Continue**: On completion, proceeds to Phase 4
|
||||
|
||||
---
|
||||
|
||||
### Phase 4: Design System Integration (Auto-Triggered)
|
||||
**Action**: Integrates all generated prototypes and the design system into the brainstorming artifacts
|
||||
|
||||
**Command Construction**:
|
||||
```bash
|
||||
session_flag = --session present ? "--session {session_id}" : ""
|
||||
# --selected-prototypes is omitted to default to ALL generated prototypes
|
||||
command = "/workflow:ui-design:update {session_flag}"
|
||||
```
|
||||
**Command**: `SlashCommand(command=command)`
|
||||
**Auto-Continue**: If `--batch-plan` is present, proceeds to Phase 5. Otherwise, the workflow completes
|
||||
|
||||
---
|
||||
|
||||
### Phase 5: Batch Task Generation (Optional, Auto-Triggered)
|
||||
**Condition**: Only executes if `--batch-plan` flag is present
|
||||
|
||||
**Execution**:
|
||||
```bash
|
||||
FOR each page IN inferred_page_list:
|
||||
SlashCommand(command="/workflow:plan --agent \"Implement {page} page based on design system\"")
|
||||
```
|
||||
**Completion**: The workflow is now complete
|
||||
|
||||
## TodoWrite Pattern (Autonomous)
|
||||
|
||||
```javascript
|
||||
// Initialize (before Phase 1)
|
||||
TodoWrite({todos: [
|
||||
{"content": "Execute style extraction", "status": "in_progress", "activeForm": "Executing style extraction"},
|
||||
{"content": "Execute style consolidation", "status": "pending", "activeForm": "Executing style consolidation"},
|
||||
{"content": "Execute UI prototype generation", "status": "pending", "activeForm": "Executing UI generation"},
|
||||
{"content": "Execute design system integration", "status": "pending", "activeForm": "Executing design system integration"}
|
||||
]})
|
||||
|
||||
// After Phase 1 completes, before Phase 2 starts
|
||||
TodoWrite({todos: [
|
||||
{"content": "Execute style extraction", "status": "completed", "activeForm": "Executing style extraction"},
|
||||
{"content": "Execute style consolidation", "status": "in_progress", "activeForm": "Executing style consolidation"},
|
||||
// ... rest are pending
|
||||
]})
|
||||
|
||||
// After Phase 2 completes, before Phase 3 starts
|
||||
TodoWrite({todos: [
|
||||
{"content": "Execute style extraction", "status": "completed"},
|
||||
{"content": "Execute style consolidation", "status": "completed", "activeForm": "Executing style consolidation"},
|
||||
{"content": "Execute UI prototype generation", "status": "in_progress", "activeForm": "Executing UI generation"},
|
||||
// ... rest are pending
|
||||
]})
|
||||
|
||||
// This pattern continues until all phases are complete
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
|
||||
- **Phase Execution Failures**: The workflow will halt, keeping the failed phase `in_progress`. It will report the error and provide recovery instructions, suggesting a manual command execution with corrected parameters
|
||||
- **Default Behavior**: In case of ambiguity (e.g., which variants to select), the system defaults to selecting ALL available items to ensure the workflow can proceed autonomously
|
||||
|
||||
## Key Improvements Over Previous Version
|
||||
|
||||
1. **Zero External Dependencies**: Pure Claude + agents, no CLI tools
|
||||
2. **Streamlined Commands**: Removed `--tool` parameter and all CLI tool flags
|
||||
3. **Consistent Execution**: All sub-commands use unified patterns
|
||||
4. **Reproducible**: Deterministic flow with clear phase dependencies
|
||||
5. **Simpler**: Fewer moving parts, easier to understand and debug
|
||||
|
||||
## Workflow Position
|
||||
|
||||
The workflow acts as the bridge between brainstorming (`synthesis-specification.md`) and planning (`/workflow:plan`), providing this connection in a fully automated fashion with options for deep creative exploration through parallel agents.
|
||||
|
||||
## Example Execution Flows
|
||||
|
||||
### Example 1: Default 3×3 Matrix (Prompt Inference)
|
||||
```bash
|
||||
/workflow:ui-design:auto --prompt "Modern minimalist blog with home, article, and author pages"
|
||||
|
||||
# Inferred: 3 style variants, 3 layout variants (default)
|
||||
# Executes:
|
||||
# 1. /workflow:ui-design:extract --base-path ".../run-xxx/.design" --prompt "..." --variants 3
|
||||
# 2. /workflow:ui-design:consolidate --base-path ".../run-xxx/.design" --variants 3 --keep-separate
|
||||
# 3. /workflow:ui-design:generate --base-path ".../run-xxx/.design" --pages "home,article,author" --style-variants 3 --layout-variants 3
|
||||
# 4. /workflow:ui-design:update
|
||||
# Total: 27 prototypes (3 styles × 3 layouts × 3 pages)
|
||||
```
|
||||
|
||||
### Example 2: Custom 2×2 Matrix with Explicit Parameters
|
||||
```bash
|
||||
/workflow:ui-design:auto --session WFS-ecommerce --images "refs/*.png" --prompt "E-commerce" --style-variants 2 --layout-variants 2
|
||||
|
||||
# Executes:
|
||||
# 1. /workflow:ui-design:extract --base-path ".workflow/WFS-ecommerce/runs/run-xxx/.design" --images "refs/*.png" --variants 2
|
||||
# 2. /workflow:ui-design:consolidate --base-path "..." --variants 2 --keep-separate
|
||||
# 3. /workflow:ui-design:generate --base-path "..." --pages "{inferred}" --style-variants 2 --layout-variants 2
|
||||
# 4. /workflow:ui-design:update --session WFS-ecommerce
|
||||
# Total: 2×2×N prototypes
|
||||
```
|
||||
|
||||
### Example 3: Intelligent Parsing with Batch Planning
|
||||
```bash
|
||||
/workflow:ui-design:auto --session WFS-saas --prompt "Create 4 styles with 2 layouts for SaaS dashboard and settings" --batch-plan
|
||||
|
||||
# Parsed: --style-variants 4, --layout-variants 2
|
||||
# Executes:
|
||||
# 1. /workflow:ui-design:extract --variants 4
|
||||
# 2. /workflow:ui-design:consolidate --variants 4 --keep-separate
|
||||
# 3. /workflow:ui-design:generate --pages "dashboard,settings" --style-variants 4 --layout-variants 2
|
||||
# (generates 16 prototypes: 4 styles × 2 layouts × 2 pages)
|
||||
# 4. /workflow:ui-design:update --session WFS-saas
|
||||
# 5. /workflow:plan --agent "Implement dashboard page..."
|
||||
# /workflow:plan --agent "Implement settings page..."
|
||||
```
|
||||
|
||||
## Final Completion Message
|
||||
|
||||
```
|
||||
✅ UI Design Auto Workflow Complete!
|
||||
|
||||
Run ID: {run_id}
|
||||
Session: {session_id or "standalone"}
|
||||
Matrix: {style_variants}×{layout_variants} ({total_prototypes} total prototypes)
|
||||
Input: {images and/or prompt summary}
|
||||
|
||||
Phase 1 - Style Extraction: {style_variants} style variants
|
||||
Phase 2 - Style Consolidation: {style_variants} independent design systems
|
||||
Phase 3 - Matrix Generation: {style_variants}×{layout_variants}×{pages_count} = {total_prototypes} prototypes
|
||||
Phase 4 - Design Update: Brainstorming artifacts updated
|
||||
{IF batch-plan: Phase 5 - Task Generation: {task_count} implementation tasks created}
|
||||
|
||||
📂 Run Output: {base_path}/
|
||||
├── .design/style-consolidation/ ({style_variants} design systems)
|
||||
├── .design/prototypes/ ({total_prototypes} HTML/CSS files)
|
||||
└── .run-metadata.json (run configuration)
|
||||
|
||||
🌐 Interactive Preview: {base_path}/.design/prototypes/compare.html
|
||||
- 3×3 matrix view with synchronized scrolling
|
||||
- Zoom controls and fullscreen mode
|
||||
- Selection export for implementation
|
||||
|
||||
{IF batch-plan:
|
||||
📋 Implementation Tasks: .workflow/WFS-{session}/.task/
|
||||
Next: /workflow:execute to begin implementation
|
||||
}
|
||||
{ELSE:
|
||||
Next Steps:
|
||||
1. Open compare.html to preview all variants
|
||||
2. Select preferred style×layout combinations
|
||||
3. Run /workflow:plan to create implementation tasks
|
||||
}
|
||||
```
|
||||
501
.claude/commands/workflow/ui-design/consolidate.md
Normal file
501
.claude/commands/workflow/ui-design/consolidate.md
Normal file
@@ -0,0 +1,501 @@
|
||||
---
|
||||
name: consolidate
|
||||
description: Consolidate style variants into unified or separate design systems
|
||||
usage: /workflow:ui-design:consolidate [--base-path <path>] [--session <id>] [--variants <count>] [--keep-separate]
|
||||
argument-hint: "[--base-path \".workflow/WFS-xxx/runs/run-xxx/.design\"] [--variants 3] [--keep-separate]"
|
||||
examples:
|
||||
- /workflow:ui-design:consolidate --base-path ".workflow/WFS-auth/latest/.design" --variants 3 --keep-separate
|
||||
- /workflow:ui-design:consolidate --session WFS-auth --variants 2
|
||||
- /workflow:ui-design:consolidate --base-path "./design-session-xxx/.design"
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Bash(*)
|
||||
---
|
||||
|
||||
# Style Consolidation Command
|
||||
|
||||
## Overview
|
||||
Consolidate user-selected style variants into a unified, production-ready design system using Claude's native synthesis capabilities. Merges token proposals from multiple style cards into a cohesive design language.
|
||||
|
||||
## Core Philosophy
|
||||
- **Claude-Native**: 100% Claude-driven consolidation, no external tools
|
||||
- **Token Merging**: Combines `proposed_tokens` from selected variants
|
||||
- **Intelligent Synthesis**: Resolves conflicts, ensures consistency
|
||||
- **Production-Ready**: Complete design system with documentation
|
||||
|
||||
## Execution Protocol
|
||||
|
||||
### Phase 1: Path Resolution & Variant Loading
|
||||
```bash
|
||||
# Determine base path
|
||||
IF --base-path provided:
|
||||
base_path = {provided_base_path} # e.g., ".workflow/WFS-xxx/runs/run-xxx/.design"
|
||||
ELSE IF --session provided:
|
||||
session_id = {provided_session}
|
||||
base_path = ".workflow/WFS-{session_id}/latest/.design" # Use latest run
|
||||
ELSE:
|
||||
# Standalone mode: search for most recent design-session in scratchpad
|
||||
base_path = find_latest_design_session(".workflow/.scratchpad/")
|
||||
|
||||
# Verify extraction output exists
|
||||
style_cards_path = "{base_path}/style-extraction/style-cards.json"
|
||||
VERIFY: exists(style_cards_path)
|
||||
|
||||
# Load style cards
|
||||
style_cards = Read(style_cards_path)
|
||||
total_variants = len(style_cards.style_cards)
|
||||
```
|
||||
|
||||
### Phase 2: Variant Selection (Count-Based)
|
||||
```bash
|
||||
# Determine how many variants to consolidate
|
||||
IF --variants provided:
|
||||
variants_count = {provided_count}
|
||||
VALIDATE: 1 <= variants_count <= total_variants
|
||||
ELSE:
|
||||
# Default to all variants
|
||||
variants_count = total_variants
|
||||
|
||||
# Select first N variants
|
||||
selected_variants = style_cards.style_cards[0:variants_count]
|
||||
VERIFY: selected_variants.length > 0
|
||||
|
||||
# Determine consolidation mode
|
||||
IF --keep-separate provided:
|
||||
consolidation_mode = "separate" # Generate N independent design systems
|
||||
ELSE:
|
||||
consolidation_mode = "unified" # Merge into 1 design system
|
||||
```
|
||||
|
||||
### Phase 3: Load Design Context (Optional)
|
||||
```bash
|
||||
# Load brainstorming context if available
|
||||
design_context = ""
|
||||
IF exists({base_path}/.brainstorming/synthesis-specification.md):
|
||||
design_context = Read({base_path}/.brainstorming/synthesis-specification.md)
|
||||
ELSE IF exists({base_path}/.brainstorming/ui-designer/analysis.md):
|
||||
design_context = Read({base_path}/.brainstorming/ui-designer/analysis.md)
|
||||
```
|
||||
|
||||
### Phase 4: Design System Synthesis (Claude)
|
||||
|
||||
**Route based on consolidation_mode**:
|
||||
|
||||
#### Mode A: Unified Consolidation (Default)
|
||||
Merges all style variants into a single, cohesive design system.
|
||||
|
||||
**Synthesis Prompt Template**:
|
||||
```
|
||||
Create a unified, production-ready design system by consolidating the following style variants.
|
||||
|
||||
SESSION: {session_id}
|
||||
SELECTED VARIANTS: {variant_ids}
|
||||
|
||||
VARIANT DATA:
|
||||
{FOR each variant IN selected_variants:
|
||||
---
|
||||
Variant ID: {variant.id}
|
||||
Name: {variant.name}
|
||||
Description: {variant.description}
|
||||
Design Philosophy: {variant.design_philosophy}
|
||||
|
||||
Proposed Tokens:
|
||||
{JSON.stringify(variant.proposed_tokens, null, 2)}
|
||||
---
|
||||
}
|
||||
|
||||
{IF design_context:
|
||||
DESIGN CONTEXT (from brainstorming):
|
||||
{design_context}
|
||||
}
|
||||
|
||||
TASK: Consolidate these {selected_variants.length} style variant(s) into a single, cohesive design system.
|
||||
|
||||
CONSOLIDATION RULES:
|
||||
1. **Merge Token Proposals**: Combine all `proposed_tokens` into one unified system
|
||||
2. **Resolve Conflicts**: When variants disagree (e.g., different primary colors), choose the most appropriate value or create a balanced compromise
|
||||
3. **Maintain Completeness**: Ensure all token categories are present (colors, typography, spacing, etc.)
|
||||
4. **Semantic Naming**: Use clear, semantic names (e.g., "brand-primary" not "color-1")
|
||||
5. **Accessibility**: Validate WCAG AA contrast ratios (4.5:1 text, 3:1 UI)
|
||||
6. **OKLCH Format**: All colors must use oklch(L C H / A) format
|
||||
7. **Design Philosophy**: Synthesize a unified philosophy statement from variant descriptions
|
||||
|
||||
OUTPUT: Generate the following files as JSON/Markdown:
|
||||
|
||||
FILE 1: design-tokens.json
|
||||
{
|
||||
"colors": {
|
||||
"brand": {
|
||||
"primary": "oklch(...)",
|
||||
"secondary": "oklch(...)",
|
||||
"accent": "oklch(...)"
|
||||
},
|
||||
"surface": {
|
||||
"background": "oklch(...)",
|
||||
"elevated": "oklch(...)",
|
||||
"overlay": "oklch(...)"
|
||||
},
|
||||
"semantic": {
|
||||
"success": "oklch(...)",
|
||||
"warning": "oklch(...)",
|
||||
"error": "oklch(...)",
|
||||
"info": "oklch(...)"
|
||||
},
|
||||
"text": {
|
||||
"primary": "oklch(...)",
|
||||
"secondary": "oklch(...)",
|
||||
"tertiary": "oklch(...)",
|
||||
"inverse": "oklch(...)"
|
||||
},
|
||||
"border": {
|
||||
"default": "oklch(...)",
|
||||
"strong": "oklch(...)",
|
||||
"subtle": "oklch(...)"
|
||||
}
|
||||
},
|
||||
"typography": {
|
||||
"font_family": { "heading": "...", "body": "...", "mono": "..." },
|
||||
"font_size": { "xs": "...", ..., "4xl": "..." },
|
||||
"font_weight": { "normal": "...", "medium": "...", "semibold": "...", "bold": "..." },
|
||||
"line_height": { "tight": "...", "normal": "...", "relaxed": "..." },
|
||||
"letter_spacing": { "tight": "...", "normal": "...", "wide": "..." }
|
||||
},
|
||||
"spacing": { "0": "0", "1": "0.25rem", ..., "24": "6rem" },
|
||||
"border_radius": { "none": "0", "sm": "0.25rem", ..., "full": "9999px" },
|
||||
"shadows": { "sm": "...", "md": "...", "lg": "...", "xl": "..." },
|
||||
"breakpoints": { "sm": "640px", "md": "768px", "lg": "1024px", "xl": "1280px", "2xl": "1536px" }
|
||||
}
|
||||
|
||||
FILE 2: style-guide.md
|
||||
# Design System Style Guide
|
||||
|
||||
## Design Philosophy
|
||||
{Synthesized philosophy from all variants}
|
||||
|
||||
## Color System
|
||||
### Brand Colors
|
||||
- **Primary**: {value} - {usage description}
|
||||
- **Secondary**: {value} - {usage description}
|
||||
- **Accent**: {value} - {usage description}
|
||||
|
||||
### Surface Colors
|
||||
{List all surface colors with usage}
|
||||
|
||||
### Semantic Colors
|
||||
{List semantic colors with accessibility notes}
|
||||
|
||||
### Text Colors
|
||||
{List text colors with contrast ratios}
|
||||
|
||||
## Typography
|
||||
### Font Families
|
||||
{List font families with fallbacks}
|
||||
|
||||
### Type Scale
|
||||
{Show scale with examples}
|
||||
|
||||
### Usage Examples
|
||||
```css
|
||||
.heading-primary {
|
||||
font-family: var(--font-family-heading);
|
||||
font-size: var(--font-size-3xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
```
|
||||
|
||||
## Spacing System
|
||||
{Describe spacing scale and usage patterns}
|
||||
|
||||
## Component Guidelines
|
||||
### Buttons
|
||||
{Token-based button styling examples}
|
||||
|
||||
### Cards
|
||||
{Token-based card styling examples}
|
||||
|
||||
### Forms
|
||||
{Token-based form styling examples}
|
||||
|
||||
## Accessibility
|
||||
- All text meets WCAG AA (4.5:1 minimum)
|
||||
- UI components meet WCAG AA (3:1 minimum)
|
||||
- Focus indicators are clearly visible
|
||||
|
||||
FILE 3: tailwind.config.js
|
||||
module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
brand: {
|
||||
primary: '{value}',
|
||||
secondary: '{value}',
|
||||
accent: '{value}'
|
||||
},
|
||||
// ... all color tokens
|
||||
},
|
||||
fontFamily: {
|
||||
heading: [{fonts}],
|
||||
body: [{fonts}],
|
||||
mono: [{fonts}]
|
||||
},
|
||||
fontSize: {
|
||||
// ... all size tokens
|
||||
},
|
||||
spacing: {
|
||||
// ... all spacing tokens
|
||||
},
|
||||
borderRadius: {
|
||||
// ... all radius tokens
|
||||
},
|
||||
boxShadow: {
|
||||
// ... all shadow tokens
|
||||
},
|
||||
screens: {
|
||||
// ... all breakpoint tokens
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FILE 4: validation-report.json
|
||||
{
|
||||
"session_id": "{session_id}",
|
||||
"consolidated_variants": {variant_ids},
|
||||
"timestamp": "{ISO timestamp}",
|
||||
"validation_results": {
|
||||
"colors": {
|
||||
"total": {count},
|
||||
"wcag_aa_compliant": {count},
|
||||
"warnings": [{any contrast issues}]
|
||||
},
|
||||
"typography": {
|
||||
"font_families": {count},
|
||||
"scale_sizes": {count}
|
||||
},
|
||||
"spacing": {
|
||||
"scale_values": {count}
|
||||
},
|
||||
"accessibility": {
|
||||
"status": "pass|warnings",
|
||||
"issues": [{list any issues}]
|
||||
},
|
||||
"completeness": {
|
||||
"required_categories": ["colors", "typography", "spacing", "border_radius", "shadows", "breakpoints"],
|
||||
"present_categories": [{list}],
|
||||
"missing_categories": [{list if any}]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RESPONSE FORMAT:
|
||||
Provide each file's content in clearly labeled sections:
|
||||
|
||||
===== design-tokens.json =====
|
||||
{JSON content}
|
||||
|
||||
===== style-guide.md =====
|
||||
{Markdown content}
|
||||
|
||||
===== tailwind.config.js =====
|
||||
{JavaScript content}
|
||||
|
||||
===== validation-report.json =====
|
||||
{JSON content}
|
||||
```
|
||||
|
||||
### Phase 5: Parse & Write Output Files
|
||||
```bash
|
||||
# Parse Claude's response into separate files
|
||||
CREATE: {base_path}/.design/style-consolidation/
|
||||
|
||||
# Extract and write each file
|
||||
parsed_output = parse_claude_response(claude_response)
|
||||
|
||||
Write({
|
||||
file_path: "{base_path}/.design/style-consolidation/design-tokens.json",
|
||||
content: parsed_output.design_tokens
|
||||
})
|
||||
|
||||
Write({
|
||||
file_path: "{base_path}/.design/style-consolidation/style-guide.md",
|
||||
content: parsed_output.style_guide
|
||||
})
|
||||
|
||||
Write({
|
||||
file_path: "{base_path}/.design/style-consolidation/tailwind.config.js",
|
||||
content: parsed_output.tailwind_config
|
||||
})
|
||||
|
||||
Write({
|
||||
file_path: "{base_path}/.design/style-consolidation/validation-report.json",
|
||||
content: parsed_output.validation_report
|
||||
})
|
||||
```
|
||||
|
||||
### Phase 6: TodoWrite & Completion
|
||||
```javascript
|
||||
TodoWrite({
|
||||
todos: [
|
||||
{content: "Load session and style cards", status: "completed", activeForm: "Loading style cards"},
|
||||
{content: "Select and validate variant IDs", status: "completed", activeForm: "Selecting variants"},
|
||||
{content: "Load design context from brainstorming", status: "completed", activeForm: "Loading context"},
|
||||
{content: "Synthesize unified design system with Claude", status: "completed", activeForm: "Synthesizing design system"},
|
||||
{content: "Write consolidated design system files", status: "completed", activeForm: "Writing output files"}
|
||||
]
|
||||
});
|
||||
```
|
||||
|
||||
**Completion Message**:
|
||||
```
|
||||
✅ Style consolidation complete for session: {session_id}
|
||||
|
||||
Consolidated {selected_variants.length} variant(s):
|
||||
{FOR each variant: - {variant.name} ({variant.id})}
|
||||
|
||||
Validation Summary:
|
||||
- Colors: {total_colors} (WCAG AA: {compliant_count}/{total_colors})
|
||||
- Typography: {scale_count} sizes
|
||||
- Spacing: {scale_count} values
|
||||
- Accessibility: {status}
|
||||
|
||||
📂 Output: {base_path}/.design/style-consolidation/
|
||||
├── design-tokens.json (Final token definitions)
|
||||
├── style-guide.md (Design system documentation)
|
||||
├── tailwind.config.js (Tailwind configuration)
|
||||
└── validation-report.json (Validation audit)
|
||||
|
||||
Next: /workflow:ui-design:generate --session {session_id} --pages "dashboard,auth"
|
||||
|
||||
Note: When called from /workflow:ui-design:auto, UI generation is triggered automatically.
|
||||
```
|
||||
|
||||
## Output Structure
|
||||
|
||||
```
|
||||
.workflow/WFS-{session}/.design/style-consolidation/
|
||||
├── design-tokens.json # Final validated CSS tokens
|
||||
├── style-guide.md # Comprehensive design system documentation
|
||||
├── tailwind.config.js # Tailwind theme configuration
|
||||
└── validation-report.json # Validation audit results
|
||||
```
|
||||
|
||||
### design-tokens.json Format
|
||||
```json
|
||||
{
|
||||
"colors": {
|
||||
"brand": {
|
||||
"primary": "oklch(0.45 0.20 270 / 1)",
|
||||
"secondary": "oklch(0.60 0.15 320 / 1)",
|
||||
"accent": "oklch(0.70 0.18 150 / 1)"
|
||||
},
|
||||
"surface": {
|
||||
"background": "oklch(0.98 0.01 270 / 1)",
|
||||
"elevated": "oklch(1.00 0.00 0 / 1)",
|
||||
"overlay": "oklch(0.95 0.01 270 / 1)"
|
||||
},
|
||||
"semantic": {
|
||||
"success": "oklch(0.60 0.15 142 / 1)",
|
||||
"warning": "oklch(0.75 0.12 85 / 1)",
|
||||
"error": "oklch(0.55 0.22 27 / 1)",
|
||||
"info": "oklch(0.55 0.18 252 / 1)"
|
||||
},
|
||||
"text": {
|
||||
"primary": "oklch(0.20 0.01 270 / 1)",
|
||||
"secondary": "oklch(0.45 0.01 270 / 1)",
|
||||
"tertiary": "oklch(0.60 0.01 270 / 1)",
|
||||
"inverse": "oklch(0.95 0.01 270 / 1)"
|
||||
},
|
||||
"border": {
|
||||
"default": "oklch(0.85 0.01 270 / 1)",
|
||||
"strong": "oklch(0.70 0.01 270 / 1)",
|
||||
"subtle": "oklch(0.92 0.01 270 / 1)"
|
||||
}
|
||||
},
|
||||
"typography": {
|
||||
"font_family": {
|
||||
"heading": "Inter, system-ui, sans-serif",
|
||||
"body": "Inter, system-ui, sans-serif",
|
||||
"mono": "JetBrains Mono, 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"
|
||||
},
|
||||
"font_weight": {
|
||||
"normal": "400",
|
||||
"medium": "500",
|
||||
"semibold": "600",
|
||||
"bold": "700"
|
||||
},
|
||||
"line_height": {
|
||||
"tight": "1.25",
|
||||
"normal": "1.5",
|
||||
"relaxed": "1.75"
|
||||
},
|
||||
"letter_spacing": {
|
||||
"tight": "-0.025em",
|
||||
"normal": "0",
|
||||
"wide": "0.025em"
|
||||
}
|
||||
},
|
||||
"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",
|
||||
"full": "9999px"
|
||||
},
|
||||
"shadows": {
|
||||
"sm": "0 1px 2px oklch(0.00 0.00 0 / 0.05)",
|
||||
"md": "0 4px 6px oklch(0.00 0.00 0 / 0.07)",
|
||||
"lg": "0 10px 15px oklch(0.00 0.00 0 / 0.10)",
|
||||
"xl": "0 20px 25px oklch(0.00 0.00 0 / 0.15)"
|
||||
},
|
||||
"breakpoints": {
|
||||
"sm": "640px",
|
||||
"md": "768px",
|
||||
"lg": "1024px",
|
||||
"xl": "1280px",
|
||||
"2xl": "1536px"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
- **No style cards found**: Report error, suggest running `/workflow:ui-design:extract` first
|
||||
- **Invalid variant IDs**: List available IDs, auto-select all if called from auto workflow
|
||||
- **Parsing errors**: Retry with stricter format instructions
|
||||
- **Validation warnings**: Report but continue (non-blocking)
|
||||
|
||||
## Key Improvements Over Previous Version
|
||||
|
||||
1. **Zero External Dependencies**: No `gemini-wrapper`, no `codex` - pure Claude
|
||||
2. **Direct Token Merging**: Reads `proposed_tokens` from style cards directly
|
||||
3. **Single-Pass Synthesis**: One comprehensive prompt generates all outputs
|
||||
4. **Reproducible**: Deterministic structure with clear consolidation rules
|
||||
5. **Streamlined**: `Load → Synthesize → Write` (3 steps vs 7+ previously)
|
||||
|
||||
## Integration Points
|
||||
- **Input**: `style-cards.json` from `/workflow:ui-design:extract` (with `proposed_tokens`)
|
||||
- **Output**: `design-tokens.json` for `/workflow:ui-design:generate`
|
||||
- **Context**: Optional `synthesis-specification.md` or `ui-designer/analysis.md`
|
||||
327
.claude/commands/workflow/ui-design/extract.md
Normal file
327
.claude/commands/workflow/ui-design/extract.md
Normal file
@@ -0,0 +1,327 @@
|
||||
---
|
||||
name: extract
|
||||
description: Extract design style from reference images or text prompts using Claude's analysis
|
||||
usage: /workflow:ui-design:extract [--session <id>] [--images "<glob>"] [--prompt "<desc>"] [--variants <count>]
|
||||
argument-hint: "[--session WFS-xxx] [--images \"refs/*.png\"] [--prompt \"Modern minimalist\"] [--variants 3]"
|
||||
examples:
|
||||
- /workflow:ui-design:extract --images "design-refs/*.png" --variants 3
|
||||
- /workflow:ui-design:extract --prompt "Modern minimalist blog, dark theme" --variants 3
|
||||
- /workflow:ui-design:extract --session WFS-auth --images "refs/*.png" --prompt "Linear.app style" --variants 2
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*)
|
||||
---
|
||||
|
||||
# Style Extraction Command
|
||||
|
||||
## Overview
|
||||
Extract design style elements from reference images or text prompts using Claude's built-in analysis capabilities. Generates a single, comprehensive `style-cards.json` file containing multiple design variants with complete token proposals.
|
||||
|
||||
## Core Philosophy
|
||||
- **Claude-Native**: 100% Claude-driven analysis, no external tools
|
||||
- **Single Output**: Only `style-cards.json` with embedded token proposals
|
||||
- **Sequential Execution**: Generate multiple style variants in one pass
|
||||
- **Flexible Input**: Images, text prompts, or both
|
||||
- **Reproducible**: Deterministic output structure
|
||||
|
||||
## Execution Protocol
|
||||
|
||||
### Phase 0: Parameter Detection & Validation
|
||||
```bash
|
||||
# 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 = ".workflow/.scratchpad/{session_id}/"
|
||||
|
||||
# Set variant count
|
||||
variants_count = --variants provided ? {count} : 1
|
||||
VALIDATE: 1 <= variants_count <= 5
|
||||
```
|
||||
|
||||
### Phase 1: Input Loading & Validation
|
||||
```bash
|
||||
# Expand and validate inputs
|
||||
IF input_mode IN ["image", "hybrid"]:
|
||||
expanded_images = Glob({--images pattern})
|
||||
VERIFY: expanded_images.length > 0
|
||||
FOR each image IN expanded_images:
|
||||
image_data[i] = Read({image_path}) # Load for analysis
|
||||
|
||||
IF input_mode IN ["text", "hybrid"]:
|
||||
VALIDATE: --prompt is non-empty string
|
||||
prompt_guidance = {--prompt value}
|
||||
|
||||
# Create output directory
|
||||
CREATE: {base_path}/.design/style-extraction/
|
||||
```
|
||||
|
||||
### Phase 2: Unified Style Analysis (Claude)
|
||||
This is a single-pass analysis that replaces all external tool calls.
|
||||
|
||||
**Analysis Prompt Template**:
|
||||
```
|
||||
Analyze the following design references and generate {variants_count} distinct design style proposals.
|
||||
|
||||
INPUT MODE: {input_mode}
|
||||
|
||||
{IF input_mode IN ["image", "hybrid"]}
|
||||
VISUAL REFERENCES: {list of loaded images}
|
||||
Identify: color palettes, typography patterns, spacing rhythms, visual hierarchy, component styles
|
||||
{ENDIF}
|
||||
|
||||
{IF input_mode IN ["text", "hybrid"]}
|
||||
TEXT GUIDANCE: "{prompt_guidance}"
|
||||
Use this to guide the aesthetic direction and feature requirements
|
||||
{ENDIF}
|
||||
|
||||
TASK: Generate {variants_count} design style variants that:
|
||||
1. Each have a distinct visual identity and design philosophy
|
||||
2. Use OKLCH color space for all color values
|
||||
3. Include complete, production-ready design token proposals
|
||||
4. Are semantically organized (brand, surface, semantic colors)
|
||||
|
||||
OUTPUT FORMAT: JSON matching this exact structure:
|
||||
{
|
||||
"extraction_metadata": {
|
||||
"session_id": "{session_id}",
|
||||
"input_mode": "{input_mode}",
|
||||
"timestamp": "{ISO timestamp}",
|
||||
"variants_count": {variants_count}
|
||||
},
|
||||
"style_cards": [
|
||||
{
|
||||
"id": "variant-1",
|
||||
"name": "Concise Style Name (e.g., Modern Minimalist)",
|
||||
"description": "2-3 sentence description of this style's visual language and user experience",
|
||||
"design_philosophy": "Core design principles for this variant",
|
||||
"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"
|
||||
},
|
||||
"proposed_tokens": {
|
||||
"colors": {
|
||||
"brand": {
|
||||
"primary": "oklch(0.45 0.20 270 / 1)",
|
||||
"secondary": "oklch(0.60 0.15 320 / 1)",
|
||||
"accent": "oklch(0.70 0.18 150 / 1)"
|
||||
},
|
||||
"surface": {
|
||||
"background": "oklch(0.98 0.01 270 / 1)",
|
||||
"elevated": "oklch(1.00 0.00 0 / 1)",
|
||||
"overlay": "oklch(0.95 0.01 270 / 1)"
|
||||
},
|
||||
"semantic": {
|
||||
"success": "oklch(0.60 0.15 142 / 1)",
|
||||
"warning": "oklch(0.75 0.12 85 / 1)",
|
||||
"error": "oklch(0.55 0.22 27 / 1)",
|
||||
"info": "oklch(0.55 0.18 252 / 1)"
|
||||
},
|
||||
"text": {
|
||||
"primary": "oklch(0.20 0.01 270 / 1)",
|
||||
"secondary": "oklch(0.45 0.01 270 / 1)",
|
||||
"tertiary": "oklch(0.60 0.01 270 / 1)",
|
||||
"inverse": "oklch(0.95 0.01 270 / 1)"
|
||||
},
|
||||
"border": {
|
||||
"default": "oklch(0.85 0.01 270 / 1)",
|
||||
"strong": "oklch(0.70 0.01 270 / 1)",
|
||||
"subtle": "oklch(0.92 0.01 270 / 1)"
|
||||
}
|
||||
},
|
||||
"typography": {
|
||||
"font_family": {
|
||||
"heading": "Inter, system-ui, sans-serif",
|
||||
"body": "Inter, system-ui, sans-serif",
|
||||
"mono": "JetBrains Mono, 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"
|
||||
},
|
||||
"font_weight": {
|
||||
"normal": "400",
|
||||
"medium": "500",
|
||||
"semibold": "600",
|
||||
"bold": "700"
|
||||
},
|
||||
"line_height": {
|
||||
"tight": "1.25",
|
||||
"normal": "1.5",
|
||||
"relaxed": "1.75"
|
||||
},
|
||||
"letter_spacing": {
|
||||
"tight": "-0.025em",
|
||||
"normal": "0",
|
||||
"wide": "0.025em"
|
||||
}
|
||||
},
|
||||
"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",
|
||||
"full": "9999px"
|
||||
},
|
||||
"shadows": {
|
||||
"sm": "0 1px 2px oklch(0.00 0.00 0 / 0.05)",
|
||||
"md": "0 4px 6px oklch(0.00 0.00 0 / 0.07)",
|
||||
"lg": "0 10px 15px oklch(0.00 0.00 0 / 0.10)",
|
||||
"xl": "0 20px 25px oklch(0.00 0.00 0 / 0.15)"
|
||||
},
|
||||
"breakpoints": {
|
||||
"sm": "640px",
|
||||
"md": "768px",
|
||||
"lg": "1024px",
|
||||
"xl": "1280px",
|
||||
"2xl": "1536px"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
RULES:
|
||||
- Each variant must be distinct in visual character
|
||||
- All colors MUST use OKLCH format: oklch(L C H / A)
|
||||
- Token structures must be complete and production-ready
|
||||
- Use semantic naming throughout
|
||||
- Ensure accessibility (contrast ratios, readable font sizes)
|
||||
```
|
||||
|
||||
### Phase 3: Generate & Write Output
|
||||
```bash
|
||||
# Parse Claude's JSON response
|
||||
style_cards_data = parse_json(claude_response)
|
||||
|
||||
# Write single output file
|
||||
Write({
|
||||
file_path: "{base_path}/.design/style-extraction/style-cards.json",
|
||||
content: style_cards_data
|
||||
})
|
||||
```
|
||||
|
||||
### Phase 4: TodoWrite & Completion
|
||||
```javascript
|
||||
TodoWrite({
|
||||
todos: [
|
||||
{content: "Validate inputs and create directories", status: "completed", activeForm: "Validating inputs"},
|
||||
{content: "Analyze design references with Claude", status: "completed", activeForm: "Analyzing design"},
|
||||
{content: "Generate {variants_count} style cards with token proposals", status: "completed", activeForm: "Generating style cards"}
|
||||
]
|
||||
});
|
||||
```
|
||||
|
||||
**Completion Message**:
|
||||
```
|
||||
✅ Style extraction complete for session: {session_id}
|
||||
|
||||
Input mode: {input_mode}
|
||||
{IF image mode: Images analyzed: {count}}
|
||||
{IF prompt mode: Prompt: "{truncated_prompt}"}
|
||||
|
||||
Generated {variants_count} style variant(s):
|
||||
{FOR each card: - {card.name} ({card.id})}
|
||||
|
||||
📂 Output: {base_path}/.design/style-extraction/style-cards.json
|
||||
|
||||
Next: /workflow:ui-design:consolidate --session {session_id} --variants "{all_variant_ids}"
|
||||
|
||||
Note: When called from /workflow:ui-design:auto, consolidation is triggered automatically.
|
||||
```
|
||||
|
||||
## Output Structure
|
||||
|
||||
```
|
||||
.workflow/WFS-{session}/.design/style-extraction/
|
||||
└── style-cards.json # Single comprehensive output
|
||||
```
|
||||
|
||||
### style-cards.json Format (Enhanced)
|
||||
```json
|
||||
{
|
||||
"extraction_metadata": {
|
||||
"session_id": "WFS-xxx or design-session-xxx",
|
||||
"input_mode": "image|text|hybrid",
|
||||
"timestamp": "2025-01-15T10:30:00Z",
|
||||
"variants_count": 3
|
||||
},
|
||||
"style_cards": [
|
||||
{
|
||||
"id": "variant-1",
|
||||
"name": "Modern Minimalist",
|
||||
"description": "Clean, high-contrast design with bold typography and ample whitespace",
|
||||
"design_philosophy": "Less is more - focus on content clarity and visual breathing room",
|
||||
"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"
|
||||
},
|
||||
"proposed_tokens": {
|
||||
"colors": { /* complete color system */ },
|
||||
"typography": { /* complete typography system */ },
|
||||
"spacing": { /* complete spacing scale */ },
|
||||
"border_radius": { /* border radius scale */ },
|
||||
"shadows": { /* shadow system */ },
|
||||
"breakpoints": { /* responsive breakpoints */ }
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
- **No images found**: Report glob pattern and suggest corrections
|
||||
- **Invalid prompt**: Require non-empty string for text mode
|
||||
- **Claude JSON parsing error**: Retry with stricter format instructions
|
||||
- **Invalid session**: Create standalone session automatically
|
||||
|
||||
## Key Improvements Over Previous Version
|
||||
|
||||
1. **Zero External Dependencies**: No `gemini-wrapper`, no `codex` - pure Claude
|
||||
2. **Single Output File**: Eliminates `semantic_style_analysis.json`, `design-tokens.json`, `tailwind-tokens.js` clutter
|
||||
3. **Complete Token Proposals**: Each style card contains a full design system proposal
|
||||
4. **Reproducible**: Same inputs = same output structure (content may vary based on Claude model)
|
||||
5. **Streamlined Flow**: `Input → Analysis → style-cards.json` (3 steps vs 7+ previously)
|
||||
|
||||
## Integration Points
|
||||
- **Input**: Reference images (PNG, JPG, WebP) or text prompts
|
||||
- **Output**: `style-cards.json` for `/workflow:ui-design:consolidate`
|
||||
- **Context**: Optional `synthesis-specification.md` or `ui-designer/analysis.md` can guide prompts
|
||||
441
.claude/commands/workflow/ui-design/generate.md
Normal file
441
.claude/commands/workflow/ui-design/generate.md
Normal file
@@ -0,0 +1,441 @@
|
||||
---
|
||||
name: generate
|
||||
description: Generate UI prototypes in matrix mode (style × layout combinations)
|
||||
usage: /workflow:ui-design:generate [--pages "<list>"] [--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]
|
||||
argument-hint: "[--pages \"dashboard,auth\"] [--base-path \".workflow/WFS-xxx/runs/run-xxx/.design\"] [--style-variants 3] [--layout-variants 3]"
|
||||
examples:
|
||||
- /workflow:ui-design:generate --base-path ".workflow/WFS-auth/runs/run-xxx/.design" --pages "dashboard,settings" --style-variants 3 --layout-variants 3
|
||||
- /workflow:ui-design:generate --session WFS-auth --pages "home,pricing" --style-variants 2 --layout-variants 2
|
||||
- /workflow:ui-design:generate --base-path "./design-session-xxx/.design" --style-variants 3 --layout-variants 3
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Task(conceptual-planning-agent), Bash(*)
|
||||
---
|
||||
|
||||
# UI Generation Command (Matrix Mode)
|
||||
|
||||
## Overview
|
||||
Generate production-ready UI prototypes (HTML/CSS) in `style × layout` matrix mode, strictly adhering to consolidated design tokens from separate style design systems.
|
||||
|
||||
## Core Philosophy
|
||||
- **Matrix-Only**: Single mode generating `style_variants × layout_variants × pages` prototypes
|
||||
- **Agent-Driven**: Uses `Task(conceptual-planning-agent)` for parallel generation
|
||||
- **Token-Driven**: All styles reference per-style design-tokens.json; no hardcoded values
|
||||
- **Production-Ready**: Semantic HTML5, ARIA attributes, responsive design
|
||||
|
||||
## Execution Protocol
|
||||
|
||||
### Phase 1: Path Resolution & Context Loading
|
||||
```bash
|
||||
# Determine base path
|
||||
IF --base-path provided:
|
||||
base_path = {provided_base_path} # e.g., ".workflow/WFS-xxx/runs/run-xxx/.design"
|
||||
ELSE IF --session provided:
|
||||
session_id = {provided_session}
|
||||
base_path = ".workflow/WFS-{session_id}/latest/.design" # Use latest run
|
||||
ELSE:
|
||||
# Standalone mode: search for most recent design-session in scratchpad
|
||||
base_path = find_latest_design_session(".workflow/.scratchpad/")
|
||||
|
||||
# Determine style and layout variant counts
|
||||
style_variants = --style-variants OR 3 # Default to 3
|
||||
layout_variants = --layout-variants OR 3 # Default to 3
|
||||
|
||||
VALIDATE: 1 <= style_variants <= 5
|
||||
VALIDATE: 1 <= layout_variants <= 5
|
||||
|
||||
# Infer page list if not provided
|
||||
IF --pages provided:
|
||||
page_list = parse_csv({--pages value})
|
||||
ELSE IF --session:
|
||||
# Read synthesis-specification.md to extract page requirements
|
||||
synthesis_spec = Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md)
|
||||
page_list = extract_pages_from_synthesis(synthesis_spec)
|
||||
ELSE:
|
||||
# Infer from existing prototypes or default
|
||||
page_list = detect_from_prototypes({base_path}/prototypes/) OR ["home"]
|
||||
|
||||
VALIDATE: page_list not empty
|
||||
|
||||
# Verify design systems exist for all styles
|
||||
FOR style_id IN range(1, style_variants + 1):
|
||||
VERIFY: {base_path}/style-consolidation/style-{style_id}/design-tokens.json exists
|
||||
VERIFY: {base_path}/style-consolidation/style-{style_id}/style-guide.md exists
|
||||
|
||||
# Load requirements (if integrated mode)
|
||||
IF --session:
|
||||
synthesis_spec = Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md)
|
||||
```
|
||||
|
||||
### Phase 2: Matrix UI Generation (Parallel, Layout-Based)
|
||||
Execute parallel agents to generate `style_variants × layout_variants × pages` prototypes.
|
||||
Each agent handles ONE layout strategy across MULTIPLE styles (batched to max 8 styles per agent).
|
||||
|
||||
```bash
|
||||
# Create output directory
|
||||
CREATE: {base_path}/prototypes/
|
||||
|
||||
# Calculate style batches (max 8 styles per agent)
|
||||
batch_size = 8
|
||||
all_style_ids = range(1, style_variants + 1)
|
||||
style_batches = split_into_chunks(all_style_ids, batch_size) # e.g., [[1-8], [9-16]]
|
||||
|
||||
# Launch layout_variants × num_batches parallel tasks
|
||||
FOR layout_id IN range(1, layout_variants + 1):
|
||||
FOR style_batch IN style_batches:
|
||||
Task(conceptual-planning-agent): "
|
||||
[UI_GENERATION_MATRIX_BATCH]
|
||||
|
||||
Generate prototypes for layout-{layout_id} across a batch of styles.
|
||||
|
||||
## Context
|
||||
LAYOUT_ID: {layout_id}
|
||||
STYLE_IDS_BATCH: {style_batch} # e.g., [1, 2, 3, 4, 5, 6, 7, 8]
|
||||
PAGES: {page_list}
|
||||
BASE_PATH: {base_path}
|
||||
|
||||
## Input Files
|
||||
For each style_id in your batch, you MUST load its corresponding files:
|
||||
- Design Tokens: {base_path}/style-consolidation/style-{style_id}/design-tokens.json
|
||||
- Style Guide: {base_path}/style-consolidation/style-{style_id}/style-guide.md
|
||||
{IF --session: - Requirements: .workflow/WFS-{session}/.brainstorming/synthesis-specification.md}
|
||||
|
||||
## Task
|
||||
For each style_id in {style_batch}:
|
||||
For each page in [{page_list}]:
|
||||
Generate the prototype files for the specific combination:
|
||||
- {page}-style-{style_id}-layout-{layout_id}.html (semantic HTML5)
|
||||
- {page}-style-{style_id}-layout-{layout_id}.css (token-driven, no hardcoded values)
|
||||
- {page}-style-{style_id}-layout-{layout_id}-notes.md (implementation notes)
|
||||
|
||||
## Layout Diversity Strategy
|
||||
You are responsible for Layout {layout_id}. Apply this strategy CONSISTENTLY to all styles in your batch.
|
||||
|
||||
{IF layout_id == 1}
|
||||
**Layout 1: Classic Hierarchy**
|
||||
- Traditional F-pattern reading flow
|
||||
- Top navigation with sidebar
|
||||
- Card-based content sections
|
||||
{ELSE IF layout_id == 2}
|
||||
**Layout 2: Modern Asymmetric**
|
||||
- Z-pattern visual flow
|
||||
- Split-screen hero sections
|
||||
- Grid-based modular content
|
||||
{ELSE IF layout_id == 3}
|
||||
**Layout 3: Minimal Focus**
|
||||
- Centered single-column content
|
||||
- Floating navigation
|
||||
- Generous whitespace and breathing room
|
||||
{ELSE}
|
||||
**Layout {layout_id}: Custom Variant**
|
||||
- Develop a unique and consistent layout structure different from the standard three
|
||||
{ENDIF}
|
||||
|
||||
Adapt this strategy to each page's purpose while maintaining layout consistency.
|
||||
|
||||
## Token Usage Requirements (STRICT)
|
||||
- For each style, load design tokens from its specific file: {base_path}/style-consolidation/style-{style_id}/design-tokens.json
|
||||
- All colors: var(--color-brand-primary), var(--color-surface-background), etc.
|
||||
- All spacing: var(--spacing-4), var(--spacing-6), etc.
|
||||
- All typography: var(--font-family-heading), var(--font-size-lg), etc.
|
||||
- NO hardcoded values (e.g., #4F46E5, 16px) allowed
|
||||
|
||||
## HTML Requirements
|
||||
- Semantic HTML5 elements (<header>, <nav>, <main>, <section>, <article>)
|
||||
- ARIA attributes for accessibility (role, aria-label, aria-labelledby)
|
||||
- Proper heading hierarchy (h1 → h2 → h3)
|
||||
- Mobile-first responsive design
|
||||
|
||||
## CSS Requirements
|
||||
- Link to design-tokens.css: <link rel=\"stylesheet\" href=\"../../design-tokens.css\">
|
||||
- Use CSS custom properties from design-tokens.json
|
||||
- Mobile-first media queries using token breakpoints
|
||||
- No inline styles
|
||||
- BEM or semantic class naming
|
||||
|
||||
## Responsive Design
|
||||
- Mobile: 375px+ (single column, stacked)
|
||||
- Tablet: var(--breakpoint-md) (adapted layout)
|
||||
- Desktop: var(--breakpoint-lg)+ (full layout)
|
||||
|
||||
## Output Location
|
||||
{base_path}/prototypes/
|
||||
|
||||
## Deliverables
|
||||
For each page-style-layout combination in your assigned batch:
|
||||
1. HTML file with token-driven structure
|
||||
2. CSS file with custom property references
|
||||
3. Notes file with implementation details and layout rationale
|
||||
|
||||
Total files to generate: {len(page_list) * len(style_batch) * 3}
|
||||
"
|
||||
|
||||
# Wait for all {layout_variants * len(style_batches)} parallel tasks to complete
|
||||
# Total prototypes: {style_variants * layout_variants * len(page_list)}
|
||||
```
|
||||
|
||||
### Phase 3: Generate Preview Files
|
||||
|
||||
```bash
|
||||
# Read matrix visualization template
|
||||
template_content = Read("~/.claude/workflows/_template-compare-matrix.html")
|
||||
|
||||
# Prepare template variables
|
||||
pages_json = JSON.stringify(page_list)
|
||||
run_id = extract_run_id_from_base_path({base_path})
|
||||
|
||||
# Inject variables into template
|
||||
injected_content = template_content
|
||||
.replace("{{run_id}}", run_id)
|
||||
.replace("{{style_variants}}", style_variants)
|
||||
.replace("{{layout_variants}}", layout_variants)
|
||||
.replace("{{pages_json}}", pages_json)
|
||||
|
||||
# Write interactive matrix comparison
|
||||
Write({base_path}/prototypes/compare.html, injected_content)
|
||||
|
||||
# Generate design-tokens.css (unified CSS custom properties for all styles)
|
||||
Write({base_path}/prototypes/design-tokens.css):
|
||||
/* Auto-generated from all style design systems */
|
||||
/* Note: Each prototype links to its specific style's tokens */
|
||||
|
||||
:root {
|
||||
/* Fallback tokens - each HTML file should link to its style-specific tokens */
|
||||
/* See style-consolidation/style-{n}/design-tokens.json for actual values */
|
||||
}
|
||||
|
||||
# Generate simple index.html for quick navigation
|
||||
Write({base_path}/prototypes/index.html):
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>UI Prototypes - Matrix View</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: system-ui, sans-serif;
|
||||
max-width: 800px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
h1 { color: #2563eb; }
|
||||
.info {
|
||||
background: #f3f4f6;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.cta {
|
||||
display: inline-block;
|
||||
background: #2563eb;
|
||||
color: white;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.cta:hover { background: #1d4ed8; }
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1rem;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
.stat {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.stat-value {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: #2563eb;
|
||||
}
|
||||
.stat-label {
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>🎨 UI Prototype Matrix</h1>
|
||||
|
||||
<div class="info">
|
||||
<p><strong>Matrix Configuration:</strong> {style_variants} styles × {layout_variants} layouts × {len(page_list)} pages</p>
|
||||
<p><strong>Total Prototypes:</strong> {style_variants * layout_variants * len(page_list)}</p>
|
||||
</div>
|
||||
|
||||
<div class="stats">
|
||||
<div class="stat">
|
||||
<div class="stat-value">{style_variants}</div>
|
||||
<div class="stat-label">Style Variants</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-value">{layout_variants}</div>
|
||||
<div class="stat-label">Layout Options</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-value">{len(page_list)}</div>
|
||||
<div class="stat-label">Pages</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="compare.html" class="cta">🔍 Open Interactive Matrix Comparison →</a>
|
||||
|
||||
<h2>Features</h2>
|
||||
<ul>
|
||||
<li>3×3 matrix grid view with synchronized scrolling</li>
|
||||
<li>Zoom controls (25%, 50%, 75%, 100%)</li>
|
||||
<li>Fullscreen mode for individual prototypes</li>
|
||||
<li>Selection system with export functionality</li>
|
||||
<li>Page switcher for multi-page comparison</li>
|
||||
</ul>
|
||||
|
||||
<h2>Generated Pages</h2>
|
||||
<ul>
|
||||
{FOR page IN page_list:
|
||||
<li><strong>{page}</strong>: {style_variants × layout_variants} variants</li>
|
||||
}
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
# Generate PREVIEW.md with instructions
|
||||
Write({base_path}/prototypes/PREVIEW.md):
|
||||
# UI Prototype Preview Guide
|
||||
|
||||
## Quick Start
|
||||
1. Open `compare.html` in a modern browser
|
||||
2. Use the page selector to switch between pages
|
||||
3. Interact with prototypes in the 3×3 matrix
|
||||
|
||||
## Matrix Configuration
|
||||
- **Style Variants:** {style_variants}
|
||||
- **Layout Options:** {layout_variants}
|
||||
- **Pages:** {page_list}
|
||||
- **Total Prototypes:** {style_variants * layout_variants * len(page_list)}
|
||||
|
||||
## File Naming Convention
|
||||
`{page}-style-{s}-layout-{l}.html`
|
||||
|
||||
Example: `dashboard-style-1-layout-2.html`
|
||||
- Page: dashboard
|
||||
- Style: Design system 1
|
||||
- Layout: Layout variant 2
|
||||
|
||||
## Interactive Features
|
||||
- **Synchronized Scroll:** All prototypes scroll together
|
||||
- **Zoom Controls:** Adjust viewport scale (25%-100%)
|
||||
- **Fullscreen:** Click any prototype for detailed view
|
||||
- **Selection:** Mark favorites for implementation
|
||||
- **Export:** Save selections as JSON
|
||||
|
||||
## Design System References
|
||||
Each prototype uses tokens from:
|
||||
`../style-consolidation/style-{s}/design-tokens.json`
|
||||
|
||||
Refer to corresponding `style-guide.md` for design philosophy and usage guidelines.
|
||||
|
||||
## Next Steps
|
||||
1. Review all variants in compare.html
|
||||
2. Select preferred style×layout combinations
|
||||
3. Export selections for implementation planning
|
||||
4. Run `/workflow:ui-design:update` to integrate chosen designs
|
||||
```
|
||||
|
||||
### Phase 4: TodoWrite & Completion
|
||||
|
||||
```javascript
|
||||
TodoWrite({
|
||||
todos: [
|
||||
{content: "Resolve paths and load design systems", status: "completed", activeForm: "Loading design systems"},
|
||||
{content: `Generate ${style_variants}×${layout_variants}×${page_list.length} prototypes`, status: "completed", activeForm: "Generating matrix prototypes"},
|
||||
{content: "Generate interactive preview files", status: "completed", activeForm: "Generating preview"}
|
||||
]
|
||||
});
|
||||
```
|
||||
|
||||
**Completion Message**:
|
||||
```
|
||||
✅ Matrix UI generation complete!
|
||||
|
||||
Configuration:
|
||||
- Style Variants: {style_variants}
|
||||
- Layout Options: {layout_variants}
|
||||
- Pages: {page_list}
|
||||
- Total Prototypes: {style_variants * layout_variants * len(page_list)}
|
||||
|
||||
Generated Files:
|
||||
{FOR style_id IN range(1, style_variants + 1):
|
||||
{FOR layout_id IN range(1, layout_variants + 1):
|
||||
{FOR page IN page_list:
|
||||
- {page}-style-{style_id}-layout-{layout_id}.html
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
📂 Location: {base_path}/prototypes/
|
||||
|
||||
🌐 Interactive Preview:
|
||||
1. Matrix View: Open compare.html (recommended)
|
||||
2. Quick Index: Open index.html
|
||||
3. Instructions: See PREVIEW.md
|
||||
|
||||
Features:
|
||||
- 3×3 matrix grid with synchronized scrolling
|
||||
- Zoom controls and fullscreen mode
|
||||
- Selection export for implementation
|
||||
- Per-page comparison
|
||||
|
||||
Next: /workflow:ui-design:update {--session flag if applicable}
|
||||
|
||||
Note: When called from /workflow:ui-design:auto, design-update is triggered automatically.
|
||||
```
|
||||
|
||||
## Output Structure
|
||||
|
||||
```
|
||||
{base_path}/prototypes/
|
||||
├── compare.html # Interactive matrix visualization
|
||||
├── index.html # Simple navigation page
|
||||
├── PREVIEW.md # Preview instructions
|
||||
├── design-tokens.css # CSS custom properties fallback
|
||||
├── {page}-style-{s}-layout-{l}.html # Matrix prototype files
|
||||
├── {page}-style-{s}-layout-{l}.css
|
||||
├── {page}-style-{s}-layout-{l}-notes.md
|
||||
└── ... (all style×layout×page combinations)
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
- **No design systems found**: Run `/workflow:ui-design:consolidate --keep-separate` first
|
||||
- **Invalid page names**: Extract from synthesis-specification.md or error
|
||||
- **Agent execution errors**: Report details, suggest retry
|
||||
- **Missing template**: Provide fallback or error with template path
|
||||
|
||||
## Quality Checks
|
||||
After generation, ensure:
|
||||
- [ ] All CSS values reference design token custom properties
|
||||
- [ ] No hardcoded colors, spacing, or typography
|
||||
- [ ] Semantic HTML structure
|
||||
- [ ] ARIA attributes present
|
||||
- [ ] Responsive design implemented
|
||||
- [ ] Mobile-first approach
|
||||
- [ ] File naming follows `{page}-style-{s}-layout-{l}` convention
|
||||
- [ ] compare.html loads correctly with all prototypes
|
||||
|
||||
## Key Features
|
||||
|
||||
1. **Matrix-Only Mode**: Simplified, focused workflow
|
||||
2. **Parallel Generation**: All style×layout combinations in parallel
|
||||
3. **Interactive Visualization**: Full-featured compare.html from template
|
||||
4. **Per-Style Tokens**: Each prototype references its style's design system
|
||||
5. **Systematic Exploration**: Consistent layout strategies across all styles
|
||||
|
||||
## Integration Points
|
||||
- **Input**: Per-style design-tokens.json from `/workflow:ui-design:consolidate --keep-separate`
|
||||
- **Output**: Matrix HTML/CSS prototypes for `/workflow:ui-design:update`
|
||||
- **Template**: `~/.claude/workflows/_template-compare-matrix.html` (global)
|
||||
- **Context**: synthesis-specification.md for page requirements (optional)
|
||||
@@ -1,11 +1,11 @@
|
||||
---
|
||||
name: design-update
|
||||
name: update
|
||||
description: Update brainstorming artifacts with finalized design system
|
||||
usage: /workflow:design:design-update --session <session_id> [--selected-prototypes "<list>"]
|
||||
usage: /workflow:ui-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"
|
||||
- /workflow:ui-design:update --session WFS-auth
|
||||
- /workflow:ui-design:update --session WFS-dashboard --selected-prototypes "dashboard-variant-1"
|
||||
allowed-tools: Read(*), Write(*), TodoWrite(*), Glob(*), Bash(*)
|
||||
---
|
||||
|
||||
@@ -48,8 +48,8 @@ ELSE:
|
||||
# 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)
|
||||
Read(.workflow/WFS-{session}/.design/style-consolidation/validation-report.json)
|
||||
|
||||
# Load selected prototype files
|
||||
FOR each selected_prototype IN selected_prototypes:
|
||||
@@ -75,7 +75,7 @@ Update `.brainstorming/synthesis-specification.md`:
|
||||
**Tailwind Configuration**: @../.design/style-consolidation/tailwind.config.js
|
||||
|
||||
### Design Philosophy
|
||||
[Insert content from style-philosophy.md]
|
||||
[Extract philosophy section from style-guide.md]
|
||||
|
||||
### Token System Overview
|
||||
**Colors**: OKLCH-based color system with semantic naming
|
||||
@@ -142,7 +142,7 @@ This style guide integrates the finalized design system from the design refineme
|
||||
**Source Style Guide**: @../../.design/style-consolidation/style-guide.md
|
||||
|
||||
## Design Philosophy
|
||||
[Content from style-philosophy.md]
|
||||
[Extract philosophy section from source style-guide.md]
|
||||
|
||||
## Design Tokens Reference
|
||||
For complete token definitions, see: @../../.design/style-consolidation/design-tokens.json
|
||||
@@ -295,8 +295,8 @@ After this update, `/workflow:tools:task-generate` will discover:
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
- **Missing design tokens**: Error, run `/workflow:design:style-consolidate` first
|
||||
- **Missing prototypes**: Error, run `/workflow:design:ui-generate` first
|
||||
- **Missing design tokens**: Error, run `/workflow:ui-design:consolidate` first
|
||||
- **Missing prototypes**: Error, run `/workflow:ui-design: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
|
||||
692
.claude/workflows/_template-compare-matrix.html
Normal file
692
.claude/workflows/_template-compare-matrix.html
Normal file
@@ -0,0 +1,692 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>UI Design Matrix Comparison - {{run_id}}</title>
|
||||
<style>
|
||||
:root {
|
||||
--color-primary: #2563eb;
|
||||
--color-bg: #f9fafb;
|
||||
--color-surface: #ffffff;
|
||||
--color-border: #e5e7eb;
|
||||
--color-text: #1f2937;
|
||||
--color-text-secondary: #6b7280;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
header {
|
||||
background: var(--color-surface);
|
||||
padding: 1.5rem 2rem;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 2rem;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--color-primary);
|
||||
font-size: 1.875rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.meta {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.controls {
|
||||
background: var(--color-surface);
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 2rem;
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
select, button {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
select:focus, button:focus {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
button {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
border: none;
|
||||
font-weight: 500;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #1d4ed8;
|
||||
}
|
||||
|
||||
.matrix-container {
|
||||
background: var(--color-surface);
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.matrix-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.matrix-table th,
|
||||
.matrix-table td {
|
||||
border: 1px solid var(--color-border);
|
||||
padding: 0.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.matrix-table th {
|
||||
background: #f3f4f6;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.matrix-table thead th {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.matrix-table tbody th {
|
||||
background: #f9fafb;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.prototype-cell {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
height: 400px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.prototype-wrapper {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.prototype-header {
|
||||
padding: 0.5rem;
|
||||
background: #f9fafb;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.prototype-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.prototype-actions {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
background: #e5e7eb;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.icon-btn.selected {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.prototype-iframe-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.prototype-iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
.zoom-info {
|
||||
position: absolute;
|
||||
bottom: 0.5rem;
|
||||
right: 0.5rem;
|
||||
background: rgba(0,0,0,0.7);
|
||||
color: white;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 2px solid var(--color-border);
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: var(--color-primary);
|
||||
border-bottom-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fullscreen-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0,0,0,0.95);
|
||||
z-index: 1000;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.fullscreen-overlay.active {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fullscreen-header {
|
||||
color: white;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fullscreen-iframe {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: white;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: rgba(255,255,255,0.2);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: rgba(255,255,255,0.3);
|
||||
}
|
||||
|
||||
.selection-summary {
|
||||
background: #fef3c7;
|
||||
border-left: 4px solid #f59e0b;
|
||||
padding: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.selection-summary h3 {
|
||||
color: #92400e;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.selection-list {
|
||||
list-style: none;
|
||||
color: #78350f;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.selection-list li {
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.prototype-cell {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>🎨 UI Design Matrix Comparison</h1>
|
||||
<div class="meta">
|
||||
<strong>Run ID:</strong> {{run_id}} |
|
||||
<strong>Session:</strong> {{session_id}} |
|
||||
<strong>Generated:</strong> {{timestamp}}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="controls">
|
||||
<div class="control-group">
|
||||
<label for="page-select">Page:</label>
|
||||
<select id="page-select">
|
||||
<!-- Populated by JavaScript -->
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label for="zoom-level">Zoom:</label>
|
||||
<select id="zoom-level">
|
||||
<option value="0.25">25%</option>
|
||||
<option value="0.5">50%</option>
|
||||
<option value="0.75">75%</option>
|
||||
<option value="1" selected>100%</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label> </label>
|
||||
<button id="sync-scroll-toggle">🔗 Sync Scroll: ON</button>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label> </label>
|
||||
<button id="export-selection">📥 Export Selection</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="selection-summary" class="selection-summary" style="display:none">
|
||||
<h3>Selected Prototypes (<span id="selection-count">0</span>)</h3>
|
||||
<ul id="selection-list" class="selection-list"></ul>
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
<button class="tab active" data-tab="matrix">Matrix View</button>
|
||||
<button class="tab" data-tab="comparison">Side-by-Side</button>
|
||||
<button class="tab" data-tab="runs">Compare Runs</button>
|
||||
</div>
|
||||
|
||||
<div class="tab-content active" data-content="matrix">
|
||||
<div class="matrix-container">
|
||||
<table class="matrix-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Style ↓ / Layout →</th>
|
||||
<th>Layout 1</th>
|
||||
<th>Layout 2</th>
|
||||
<th>Layout 3</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="matrix-body">
|
||||
<!-- Populated by JavaScript -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" data-content="comparison">
|
||||
<p>Select two prototypes from the matrix to compare side-by-side.</p>
|
||||
<div id="comparison-view"></div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" data-content="runs">
|
||||
<p>Compare the same prototype across different runs.</p>
|
||||
<div id="runs-comparison"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="fullscreen-overlay" class="fullscreen-overlay">
|
||||
<div class="fullscreen-header">
|
||||
<h2 id="fullscreen-title"></h2>
|
||||
<button class="close-btn" onclick="closeFullscreen()">✕ Close</button>
|
||||
</div>
|
||||
<iframe id="fullscreen-iframe" class="fullscreen-iframe"></iframe>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Configuration - Replace with actual values during generation
|
||||
const CONFIG = {
|
||||
runId: "{{run_id}}",
|
||||
sessionId: "{{session_id}}",
|
||||
styleVariants: {{style_variants}}, // e.g., 3
|
||||
layoutVariants: {{layout_variants}}, // e.g., 3
|
||||
pages: {{pages_json}}, // e.g., ["dashboard", "auth"]
|
||||
basePath: "." // Relative path to prototypes
|
||||
};
|
||||
|
||||
// State
|
||||
let state = {
|
||||
currentPage: CONFIG.pages[0],
|
||||
zoomLevel: 1,
|
||||
syncScroll: true,
|
||||
selected: new Set(),
|
||||
fullscreenSrc: null
|
||||
};
|
||||
|
||||
// Initialize
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
populatePageSelect();
|
||||
renderMatrix();
|
||||
setupEventListeners();
|
||||
loadSelectionFromStorage();
|
||||
});
|
||||
|
||||
function populatePageSelect() {
|
||||
const select = document.getElementById('page-select');
|
||||
CONFIG.pages.forEach(page => {
|
||||
const option = document.createElement('option');
|
||||
option.value = page;
|
||||
option.textContent = capitalize(page);
|
||||
select.appendChild(option);
|
||||
});
|
||||
}
|
||||
|
||||
function renderMatrix() {
|
||||
const tbody = document.getElementById('matrix-body');
|
||||
tbody.innerHTML = '';
|
||||
|
||||
for (let s = 1; s <= CONFIG.styleVariants; s++) {
|
||||
const row = document.createElement('tr');
|
||||
|
||||
// Style header cell
|
||||
const headerCell = document.createElement('th');
|
||||
headerCell.textContent = `Style ${s}`;
|
||||
row.appendChild(headerCell);
|
||||
|
||||
// Prototype cells for each layout
|
||||
for (let l = 1; l <= CONFIG.layoutVariants; l++) {
|
||||
const cell = document.createElement('td');
|
||||
cell.className = 'prototype-cell';
|
||||
|
||||
const filename = `${state.currentPage}-style-${s}-layout-${l}.html`;
|
||||
const id = `${state.currentPage}-s${s}-l${l}`;
|
||||
|
||||
cell.innerHTML = `
|
||||
<div class="prototype-wrapper">
|
||||
<div class="prototype-header">
|
||||
<span class="prototype-title">S${s}L${l}</span>
|
||||
<div class="prototype-actions">
|
||||
<button class="icon-btn select-btn" data-id="${id}" title="Select">
|
||||
${state.selected.has(id) ? '★' : '☆'}
|
||||
</button>
|
||||
<button class="icon-btn" onclick="openFullscreen('${filename}', 'Style ${s} Layout ${l}')" title="Fullscreen">
|
||||
⛶
|
||||
</button>
|
||||
<button class="icon-btn" onclick="openInNewTab('${filename}')" title="Open in new tab">
|
||||
↗
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prototype-iframe-container">
|
||||
<iframe
|
||||
class="prototype-iframe"
|
||||
src="${filename}"
|
||||
data-cell="s${s}-l${l}"
|
||||
style="transform: scale(${state.zoomLevel});"
|
||||
></iframe>
|
||||
<div class="zoom-info">${Math.round(state.zoomLevel * 100)}%</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
row.appendChild(cell);
|
||||
}
|
||||
|
||||
tbody.appendChild(row);
|
||||
}
|
||||
|
||||
// Re-attach selection event listeners
|
||||
document.querySelectorAll('.select-btn').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => toggleSelection(e.target.dataset.id, e.target));
|
||||
});
|
||||
|
||||
// Setup scroll sync
|
||||
if (state.syncScroll) {
|
||||
setupScrollSync();
|
||||
}
|
||||
}
|
||||
|
||||
function setupScrollSync() {
|
||||
const iframes = document.querySelectorAll('.prototype-iframe');
|
||||
let isScrolling = false;
|
||||
|
||||
iframes.forEach(iframe => {
|
||||
iframe.addEventListener('load', () => {
|
||||
const iframeWindow = iframe.contentWindow;
|
||||
|
||||
iframe.contentDocument.addEventListener('scroll', (e) => {
|
||||
if (!state.syncScroll || isScrolling) return;
|
||||
|
||||
isScrolling = true;
|
||||
const scrollTop = iframe.contentDocument.documentElement.scrollTop;
|
||||
const scrollLeft = iframe.contentDocument.documentElement.scrollLeft;
|
||||
|
||||
iframes.forEach(otherIframe => {
|
||||
if (otherIframe !== iframe && otherIframe.contentDocument) {
|
||||
otherIframe.contentDocument.documentElement.scrollTop = scrollTop;
|
||||
otherIframe.contentDocument.documentElement.scrollLeft = scrollLeft;
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(() => { isScrolling = false; }, 50);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function setupEventListeners() {
|
||||
// Page selector
|
||||
document.getElementById('page-select').addEventListener('change', (e) => {
|
||||
state.currentPage = e.target.value;
|
||||
renderMatrix();
|
||||
});
|
||||
|
||||
// Zoom level
|
||||
document.getElementById('zoom-level').addEventListener('change', (e) => {
|
||||
state.zoomLevel = parseFloat(e.target.value);
|
||||
renderMatrix();
|
||||
});
|
||||
|
||||
// Sync scroll toggle
|
||||
document.getElementById('sync-scroll-toggle').addEventListener('click', (e) => {
|
||||
state.syncScroll = !state.syncScroll;
|
||||
e.target.textContent = `🔗 Sync Scroll: ${state.syncScroll ? 'ON' : 'OFF'}`;
|
||||
if (state.syncScroll) setupScrollSync();
|
||||
});
|
||||
|
||||
// Export selection
|
||||
document.getElementById('export-selection').addEventListener('click', exportSelection);
|
||||
|
||||
// Tab switching
|
||||
document.querySelectorAll('.tab').forEach(tab => {
|
||||
tab.addEventListener('click', (e) => {
|
||||
const tabName = e.target.dataset.tab;
|
||||
switchTab(tabName);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function toggleSelection(id, btn) {
|
||||
if (state.selected.has(id)) {
|
||||
state.selected.delete(id);
|
||||
btn.textContent = '☆';
|
||||
btn.classList.remove('selected');
|
||||
} else {
|
||||
state.selected.add(id);
|
||||
btn.textContent = '★';
|
||||
btn.classList.add('selected');
|
||||
}
|
||||
|
||||
updateSelectionSummary();
|
||||
saveSelectionToStorage();
|
||||
}
|
||||
|
||||
function updateSelectionSummary() {
|
||||
const summary = document.getElementById('selection-summary');
|
||||
const count = document.getElementById('selection-count');
|
||||
const list = document.getElementById('selection-list');
|
||||
|
||||
count.textContent = state.selected.size;
|
||||
|
||||
if (state.selected.size > 0) {
|
||||
summary.style.display = 'block';
|
||||
list.innerHTML = Array.from(state.selected)
|
||||
.map(id => `<li>${id}</li>`)
|
||||
.join('');
|
||||
} else {
|
||||
summary.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function saveSelectionToStorage() {
|
||||
localStorage.setItem(`selection-${CONFIG.runId}`, JSON.stringify(Array.from(state.selected)));
|
||||
}
|
||||
|
||||
function loadSelectionFromStorage() {
|
||||
const stored = localStorage.getItem(`selection-${CONFIG.runId}`);
|
||||
if (stored) {
|
||||
state.selected = new Set(JSON.parse(stored));
|
||||
updateSelectionSummary();
|
||||
}
|
||||
}
|
||||
|
||||
function exportSelection() {
|
||||
const report = {
|
||||
runId: CONFIG.runId,
|
||||
sessionId: CONFIG.sessionId,
|
||||
timestamp: new Date().toISOString(),
|
||||
selections: Array.from(state.selected).map(id => ({
|
||||
id,
|
||||
file: `${id.replace(/-s(\d+)-l(\d+)/, '-style-$1-layout-$2')}.html`
|
||||
}))
|
||||
};
|
||||
|
||||
const blob = new Blob([JSON.stringify(report, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `selection-${CONFIG.runId}.json`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
alert(`Exported ${state.selected.size} selections to selection-${CONFIG.runId}.json`);
|
||||
}
|
||||
|
||||
function openFullscreen(src, title) {
|
||||
const overlay = document.getElementById('fullscreen-overlay');
|
||||
const iframe = document.getElementById('fullscreen-iframe');
|
||||
const titleEl = document.getElementById('fullscreen-title');
|
||||
|
||||
iframe.src = src;
|
||||
titleEl.textContent = title;
|
||||
overlay.classList.add('active');
|
||||
state.fullscreenSrc = src;
|
||||
}
|
||||
|
||||
function closeFullscreen() {
|
||||
const overlay = document.getElementById('fullscreen-overlay');
|
||||
const iframe = document.getElementById('fullscreen-iframe');
|
||||
|
||||
overlay.classList.remove('active');
|
||||
iframe.src = '';
|
||||
state.fullscreenSrc = null;
|
||||
}
|
||||
|
||||
function openInNewTab(src) {
|
||||
window.open(src, '_blank');
|
||||
}
|
||||
|
||||
function switchTab(tabName) {
|
||||
document.querySelectorAll('.tab').forEach(tab => {
|
||||
tab.classList.toggle('active', tab.dataset.tab === tabName);
|
||||
});
|
||||
|
||||
document.querySelectorAll('.tab-content').forEach(content => {
|
||||
content.classList.toggle('active', content.dataset.content === tabName);
|
||||
});
|
||||
}
|
||||
|
||||
function capitalize(str) {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1);
|
||||
}
|
||||
|
||||
// Close fullscreen on ESC key
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && state.fullscreenSrc) {
|
||||
closeFullscreen();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
302
CHANGELOG-v4.1.0.md
Normal file
302
CHANGELOG-v4.1.0.md
Normal file
@@ -0,0 +1,302 @@
|
||||
# UI Design Workflow v4.1.0 - 纯矩阵模式 + 路径修正
|
||||
|
||||
## 📋 发布日期
|
||||
2025-10-09
|
||||
|
||||
## 🎯 核心变更
|
||||
|
||||
### 1. 矩阵模式成为唯一模式
|
||||
- ❌ 移除 standard/creative 模式选择
|
||||
- ✅ 3×3 矩阵生成为默认且唯一模式
|
||||
- ✅ 直接支持 `--style-variants` 和 `--layout-variants` 参数
|
||||
|
||||
### 2. 路径符合workflow架构
|
||||
- ✅ 有session: `.workflow/WFS-{session_id}/runs/run-xxx/`
|
||||
- ✅ 无session: `.workflow/.scratchpad/{session_id}/runs/run-xxx/`
|
||||
- ✅ 模板移至全局: `~/.claude/workflows/_template-compare-matrix.html`
|
||||
|
||||
---
|
||||
|
||||
## 📝 文件修改清单
|
||||
|
||||
### 核心命令文件
|
||||
|
||||
| 文件 | 主要变更 | 状态 |
|
||||
|------|---------|------|
|
||||
| **auto.md** | 删除模式选择，简化Phase 3，修正路径 | ✅ 已完成 |
|
||||
| **generate.md** | 完全重构为矩阵模式，集成模板 | ✅ 已完成 |
|
||||
| **consolidate.md** | 修正standalone路径 | ✅ 已完成 |
|
||||
| **extract.md** | 修正standalone路径 | ✅ 已完成 |
|
||||
| **update.md** | 仅session模式，无需修改 | ✅ 保持不变 |
|
||||
|
||||
### 新增文件
|
||||
- ✅ `~/.claude/workflows/_template-compare-matrix.html` - 交互式矩阵可视化模板
|
||||
|
||||
---
|
||||
|
||||
## 🔄 参数变更
|
||||
|
||||
### 旧参数（废弃）
|
||||
```bash
|
||||
--variants <count> # 统一变种数
|
||||
--creative-variants <count> # 创意变种数
|
||||
--matrix-mode # 模式标志
|
||||
```
|
||||
|
||||
### 新参数（v4.1.0）
|
||||
```bash
|
||||
--style-variants <count> # 风格变种数（默认3）
|
||||
--layout-variants <count> # 布局变种数（默认3）
|
||||
# 矩阵为默认模式，无需标志
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 工作流对比
|
||||
|
||||
### v4.0.x（旧版）
|
||||
```bash
|
||||
/workflow:ui-design:auto --variants 3 --creative-variants 4
|
||||
|
||||
# 问题:
|
||||
# - 参数混淆（variants vs creative-variants）
|
||||
# - 模式选择复杂
|
||||
# - standalone输出到项目根目录
|
||||
```
|
||||
|
||||
### v4.1.0（新版）
|
||||
```bash
|
||||
/workflow:ui-design:auto --style-variants 3 --layout-variants 3
|
||||
|
||||
# 优势:
|
||||
# - 参数语义清晰
|
||||
# - 唯一矩阵模式
|
||||
# - 输出到 .workflow/.scratchpad/
|
||||
# - 总计: 3×3×N 个原型
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 路径架构
|
||||
|
||||
### Standalone模式（无session）
|
||||
```
|
||||
.workflow/.scratchpad/
|
||||
└── design-session-20251009-101530/
|
||||
└── runs/
|
||||
├── run-20251009-101530/
|
||||
│ └── .design/
|
||||
│ ├── style-extraction/style-cards.json
|
||||
│ ├── style-consolidation/
|
||||
│ │ ├── style-1/design-tokens.json
|
||||
│ │ ├── style-2/design-tokens.json
|
||||
│ │ └── style-3/design-tokens.json
|
||||
│ └── prototypes/
|
||||
│ ├── compare.html (交互式3×3矩阵)
|
||||
│ ├── index.html
|
||||
│ └── {page}-style-{s}-layout-{l}.html
|
||||
└── latest -> run-20251009-101530/
|
||||
```
|
||||
|
||||
### 集成模式（有session）
|
||||
```
|
||||
.workflow/WFS-auth-system/
|
||||
├── workflow-session.json
|
||||
├── IMPL_PLAN.md
|
||||
├── .brainstorming/synthesis-specification.md
|
||||
└── runs/
|
||||
├── run-20251009-101530/
|
||||
│ └── .design/ (同上)
|
||||
└── latest -> run-20251009-101530/
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 核心改进
|
||||
|
||||
### 1. 简化架构
|
||||
- **auto.md Phase 3**: 从复杂并行Task循环简化为单一命令
|
||||
```bash
|
||||
# 旧方式（30+行）
|
||||
FOR style_id IN range(...):
|
||||
Task(conceptual-planning-agent): "..."
|
||||
|
||||
# 新方式（3行）
|
||||
command = "/workflow:ui-design:generate --style-variants {s} --layout-variants {l}"
|
||||
SlashCommand(command=command)
|
||||
```
|
||||
|
||||
### 2. 路径规范化
|
||||
```bash
|
||||
# auto.md - Phase 0b
|
||||
IF --session:
|
||||
base_path = ".workflow/WFS-{session_id}/runs/${run_id}"
|
||||
ELSE:
|
||||
base_path = ".workflow/.scratchpad/${session_id}/runs/${run_id}"
|
||||
|
||||
# generate/consolidate/extract
|
||||
base_path = find_latest_design_session(".workflow/.scratchpad/")
|
||||
```
|
||||
|
||||
### 3. 可视化增强
|
||||
- 集成高级 `_template-compare-matrix.html` 模板
|
||||
- 3×3 网格矩阵视图
|
||||
- 同步滚动 + 缩放控制
|
||||
- 全屏模式 + 选择导出
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ 破坏性变更
|
||||
|
||||
### 1. 参数废弃
|
||||
```bash
|
||||
# ❌ 不再支持
|
||||
--variants <count>
|
||||
--creative-variants <count>
|
||||
|
||||
# ✅ 必须使用
|
||||
--style-variants <count>
|
||||
--layout-variants <count>
|
||||
```
|
||||
|
||||
### 2. 文件命名强制统一
|
||||
```bash
|
||||
# ❌ 旧格式不再生成
|
||||
{page}-variant-{n}.html
|
||||
{page}-creative-variant-{n}.html
|
||||
|
||||
# ✅ 强制新格式
|
||||
{page}-style-{s}-layout-{l}.html
|
||||
```
|
||||
|
||||
### 3. Standalone路径变更
|
||||
```bash
|
||||
# ❌ v4.0.x
|
||||
./design-session-xxx/ (项目根目录)
|
||||
|
||||
# ✅ v4.1.0
|
||||
.workflow/.scratchpad/design-session-xxx/
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📖 迁移指南
|
||||
|
||||
### 从 v4.0.x 迁移
|
||||
|
||||
#### 1. 更新命令参数
|
||||
```bash
|
||||
# 旧方式
|
||||
/workflow:ui-design:auto --variants 3 --creative-variants 4
|
||||
|
||||
# 新方式
|
||||
/workflow:ui-design:auto --style-variants 3 --layout-variants 4
|
||||
|
||||
# 或依赖智能解析
|
||||
/workflow:ui-design:auto --prompt "Generate 3 styles with 4 layouts"
|
||||
```
|
||||
|
||||
#### 2. 更新路径引用
|
||||
```bash
|
||||
# 旧standalone输出
|
||||
./design-session-xxx/
|
||||
|
||||
# 新standalone输出
|
||||
.workflow/.scratchpad/design-session-xxx/
|
||||
|
||||
# 迁移建议: 手动移动旧目录或保留为历史
|
||||
mv ./design-session-* .workflow/.scratchpad/
|
||||
```
|
||||
|
||||
#### 3. 预览文件
|
||||
```bash
|
||||
# 保持不变
|
||||
{base_path}/.design/prototypes/compare.html
|
||||
{base_path}/.design/prototypes/index.html
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ 向后兼容性
|
||||
|
||||
### 完全兼容
|
||||
- ✅ `--session` 参数
|
||||
- ✅ `--pages` 参数
|
||||
- ✅ `--prompt` 参数
|
||||
- ✅ `--images` 参数
|
||||
- ✅ `--batch-plan` 标志
|
||||
- ✅ 智能prompt解析
|
||||
|
||||
### 不兼容
|
||||
- ❌ standard/creative 模式选择
|
||||
- ❌ 旧参数 `--variants`, `--creative-variants`
|
||||
- ❌ 旧文件命名格式
|
||||
|
||||
---
|
||||
|
||||
## 🧪 测试清单
|
||||
|
||||
### 功能测试
|
||||
- [ ] 默认3×3矩阵生成
|
||||
- [ ] 自定义矩阵（2×2, 4×3等）
|
||||
- [ ] 智能prompt解析
|
||||
- [ ] 文件命名正确性
|
||||
- [ ] compare.html 可视化
|
||||
|
||||
### 路径测试
|
||||
- [ ] Standalone输出到 `.scratchpad`
|
||||
- [ ] Session输出到 `WFS-{id}`
|
||||
- [ ] latest symlink正确
|
||||
- [ ] 跨命令路径传递
|
||||
|
||||
### 集成测试
|
||||
- [ ] auto → extract → consolidate → generate → update
|
||||
- [ ] 模板正确加载
|
||||
- [ ] 设计token引用正确
|
||||
|
||||
---
|
||||
|
||||
## 📚 相关文档
|
||||
|
||||
- **workflow-architecture.md**: Workflow系统架构标准
|
||||
- **_run-manager.md**: Run-based文件管理文档（如果需要）
|
||||
- **~/.claude/workflows/_template-compare-matrix.html**: 可视化模板
|
||||
|
||||
---
|
||||
|
||||
## 🔮 未来增强
|
||||
|
||||
### 计划中
|
||||
- [ ] 自定义布局策略（覆盖默认 Classic/Modern/Minimal）
|
||||
- [ ] compare.html 运行历史对比
|
||||
- [ ] Scratchpad自动清理策略
|
||||
- [ ] Session升级工作流（scratchpad → WFS）
|
||||
|
||||
### 待讨论
|
||||
- [ ] 非矩形矩阵支持（2×3）
|
||||
- [ ] 恢复 creative 模式（可选）
|
||||
- [ ] 更多布局变种（>5）
|
||||
|
||||
---
|
||||
|
||||
## 📝 总结
|
||||
|
||||
**v4.1.0 核心价值**:
|
||||
1. **极简哲学**: 移除模式选择，矩阵为唯一模式
|
||||
2. **清晰参数**: `--style-variants` 和 `--layout-variants` 语义明确
|
||||
3. **架构规范**: 严格遵循 workflow-architecture.md 标准
|
||||
4. **集中管理**: 所有输出在 `.workflow/` 下
|
||||
5. **可视化增强**: 高级交互式矩阵界面
|
||||
|
||||
**升级理由**:
|
||||
- ✅ 系统化设计探索（风格×布局矩阵）
|
||||
- ✅ 简化工作流、减少参数困惑
|
||||
- ✅ 符合workflow架构标准
|
||||
- ✅ 避免项目根目录污染
|
||||
|
||||
---
|
||||
|
||||
**发布者**: Claude Code
|
||||
**版本**: v4.1.0
|
||||
**类型**: Major Refactoring + Path Corrections
|
||||
**日期**: 2025-10-09
|
||||
219
CHANGELOG-v4.1.1.md
Normal file
219
CHANGELOG-v4.1.1.md
Normal file
@@ -0,0 +1,219 @@
|
||||
# UI Design Workflow v4.1.1 - Symlink Fix & Agent Optimization
|
||||
|
||||
## 📋 发布日期
|
||||
2025-10-09
|
||||
|
||||
## 🎯 核心修复与优化
|
||||
|
||||
### 1. Windows 符号链接修复
|
||||
- **问题**：`latest` 被创建为实际目录而非符号链接，导致创建两套重复目录
|
||||
- **根本原因**：使用 `ln -s`（Unix 命令）在 Windows 环境下失败
|
||||
- **解决方案**：改用 Windows 原生命令 `mklink /D`
|
||||
- **影响范围**：auto.md Phase 0b
|
||||
|
||||
### 2. Agent 任务分配优化
|
||||
- **旧策略**：按 style 分配（Agent-1 处理 style-1 的所有 layouts）
|
||||
- **新策略**：按 layout 分配（Agent-1 处理 layout-1 的所有 styles）
|
||||
- **批处理**：支持最多 8 个 styles per agent（超过 8 个 styles 时自动分批）
|
||||
- **优势**：
|
||||
- 同一 agent 处理不同 styles（复用 layout 策略）
|
||||
- 不同 agent 处理不同 layouts（并行优化）
|
||||
- 扩展性提升：32 styles × 3 layouts = 12 agents（原方案需 32 agents）
|
||||
|
||||
---
|
||||
|
||||
## 📝 文件修改清单
|
||||
|
||||
| 文件 | 主要变更 | 状态 |
|
||||
|------|---------|------|
|
||||
| **auto.md** | 修复 Windows 符号链接创建逻辑 | ✅ 已完成 |
|
||||
| **generate.md** | 重构 agent 分配策略为 layout-based | ✅ 已完成 |
|
||||
|
||||
---
|
||||
|
||||
## 🔄 技术细节
|
||||
|
||||
### 修复 1: Symlink Creation (auto.md)
|
||||
|
||||
#### 旧代码（错误）
|
||||
```bash
|
||||
# Phase 0b
|
||||
Bash(rm -f ".workflow/WFS-{session_id}/latest")
|
||||
Bash(ln -s "runs/${run_id}" ".workflow/WFS-{session_id}/latest")
|
||||
```
|
||||
|
||||
**问题**：
|
||||
- `ln -s` 在 Windows 下失败时会创建实际目录
|
||||
- 导致 `latest/` 和 `runs/run-xxx/` 两套重复目录
|
||||
|
||||
#### 新代码（修复）
|
||||
```bash
|
||||
# Phase 0b - Windows-compatible
|
||||
Bash(cd ".workflow/WFS-{session_id}" && rm -rf latest && mklink /D latest "runs/${run_id}")
|
||||
```
|
||||
|
||||
**改进**：
|
||||
- 使用 `mklink /D`（Windows 原生目录符号链接命令）
|
||||
- `cd` 到父目录确保相对路径正确
|
||||
- `rm -rf` 清理旧的目录/符号链接
|
||||
|
||||
---
|
||||
|
||||
### 优化 2: Agent Allocation (generate.md)
|
||||
|
||||
#### 旧策略（Style-Based）
|
||||
```bash
|
||||
FOR style_id IN range(1, style_variants + 1):
|
||||
Task(agent): "Generate all layouts for style-{style_id}"
|
||||
```
|
||||
|
||||
**问题**：
|
||||
- 16 styles → 16 agents
|
||||
- 32 styles → 32 agents（扩展性差）
|
||||
|
||||
#### 新策略（Layout-Based with Batching）
|
||||
```bash
|
||||
# Calculate style batches (max 8 styles per agent)
|
||||
batch_size = 8
|
||||
all_style_ids = range(1, style_variants + 1)
|
||||
style_batches = split_into_chunks(all_style_ids, batch_size)
|
||||
|
||||
FOR layout_id IN range(1, layout_variants + 1):
|
||||
FOR style_batch IN style_batches:
|
||||
Task(agent): "
|
||||
Generate layout-{layout_id} for styles {style_batch}
|
||||
|
||||
Context:
|
||||
- LAYOUT_ID: {layout_id}
|
||||
- STYLE_IDS_BATCH: {style_batch} # e.g., [1-8]
|
||||
|
||||
Strategy:
|
||||
- Apply consistent layout-{layout_id} strategy to ALL styles in batch
|
||||
- Load each style's design-tokens.json separately
|
||||
"
|
||||
```
|
||||
|
||||
**改进**：
|
||||
- 按 layout 分配，每个 agent 专注一种 layout 策略
|
||||
- 批处理支持：styles > 8 时自动分批
|
||||
- 示例：32 styles × 3 layouts
|
||||
- 旧方案：32 agents
|
||||
- 新方案：3 layouts × 4 batches = **12 agents**
|
||||
|
||||
---
|
||||
|
||||
## 📊 性能对比
|
||||
|
||||
### Agent 数量对比表
|
||||
|
||||
| 配置 | 旧方案 (Style-Based) | 新方案 (Layout-Based) | 优化比例 |
|
||||
|------|---------------------|----------------------|---------|
|
||||
| 3×3 (默认) | 3 agents | 3 agents | 1:1 |
|
||||
| 8×3 | 8 agents | 3 agents | 2.7:1 |
|
||||
| 16×3 | 16 agents | 6 agents (3×2 batches) | 2.7:1 |
|
||||
| 32×3 | 32 agents | 12 agents (3×4 batches) | 2.7:1 |
|
||||
| 3×5 | 3 agents | 5 agents | 0.6:1 |
|
||||
| 16×5 | 16 agents | 10 agents (5×2 batches) | 1.6:1 |
|
||||
|
||||
**结论**：layout 数量不变时，styles 增加不会线性增加 agent 数量
|
||||
|
||||
---
|
||||
|
||||
## 🚀 工作流影响
|
||||
|
||||
### 无影响的部分
|
||||
- ✅ 矩阵模式逻辑（仍然是 styles × layouts）
|
||||
- ✅ 文件命名格式（`{page}-style-{s}-layout-{l}.html`）
|
||||
- ✅ 设计 token 加载机制
|
||||
- ✅ 可视化模板（compare.html）
|
||||
- ✅ 所有参数（--style-variants, --layout-variants）
|
||||
|
||||
### 改进的部分
|
||||
- ✅ **符号链接正确性**：不再创建重复目录
|
||||
- ✅ **Agent 扩展性**：高 variant 数场景下性能提升 2-3 倍
|
||||
- ✅ **Layout 一致性**：同一 agent 负责一种 layout 策略，确保跨 styles 的 layout 一致性
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ 破坏性变更
|
||||
|
||||
**无破坏性变更**
|
||||
|
||||
- 所有参数保持不变
|
||||
- 输出文件格式保持不变
|
||||
- API 接口保持不变
|
||||
- 向后兼容 v4.1.0
|
||||
|
||||
---
|
||||
|
||||
## 🧪 测试建议
|
||||
|
||||
### 符号链接测试
|
||||
```bash
|
||||
# Windows 环境测试
|
||||
/workflow:ui-design:auto --prompt "Test symlink" --style-variants 2
|
||||
|
||||
# 验证
|
||||
cd .workflow/.scratchpad/design-session-*/
|
||||
ls -la # 应看到 latest -> runs/run-xxx（符号链接，非目录）
|
||||
```
|
||||
|
||||
### Agent 分配测试
|
||||
```bash
|
||||
# 小规模测试（3×3）
|
||||
/workflow:ui-design:auto --style-variants 3 --layout-variants 3
|
||||
# 预期：3 agents（每个 layout 1 个）
|
||||
|
||||
# 中规模测试（16×3）
|
||||
/workflow:ui-design:auto --style-variants 16 --layout-variants 3
|
||||
# 预期：6 agents（3 layouts × 2 batches）
|
||||
|
||||
# 大规模测试（32×3）
|
||||
/workflow:ui-design:auto --style-variants 32 --layout-variants 3
|
||||
# 预期：12 agents（3 layouts × 4 batches）
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📚 相关文档
|
||||
|
||||
- **workflow-architecture.md**: Workflow 系统架构标准（符号链接规范）
|
||||
- **CHANGELOG-v4.1.0.md**: 纯矩阵模式和路径修正
|
||||
- **auto.md**: Phase 0b 符号链接创建逻辑
|
||||
- **generate.md**: Phase 2 agent 分配策略
|
||||
|
||||
---
|
||||
|
||||
## 🔮 未来优化方向
|
||||
|
||||
### 计划中
|
||||
- [ ] 自适应批处理大小（根据 agent 性能动态调整）
|
||||
- [ ] Layout 策略配置化（允许自定义 layout 策略）
|
||||
- [ ] 跨 runs 的 agent 结果缓存
|
||||
|
||||
### 待讨论
|
||||
- [ ] 是否需要 style-based 模式作为备选？
|
||||
- [ ] 批处理大小是否需要参数化（当前固定 8）？
|
||||
|
||||
---
|
||||
|
||||
## 📝 总结
|
||||
|
||||
**v4.1.1 核心价值**:
|
||||
1. **跨平台兼容性**: Windows 环境符号链接正常工作
|
||||
2. **扩展性提升**: 高 variant 数场景下 agent 数量减少 60%+
|
||||
3. **Layout 一致性**: 同一 layout 策略由单一 agent 负责
|
||||
4. **零破坏性**: 完全向后兼容 v4.1.0
|
||||
|
||||
**升级理由**:
|
||||
- ✅ 修复 Windows 环境下的符号链接 bug
|
||||
- ✅ 大幅提升高 variant 数场景的性能
|
||||
- ✅ 改善 layout 策略的一致性
|
||||
- ✅ 为未来扩展奠定基础
|
||||
|
||||
---
|
||||
|
||||
**发布者**: Claude Code
|
||||
**版本**: v4.1.1
|
||||
**类型**: Bugfix + Performance Optimization
|
||||
**日期**: 2025-10-09
|
||||
372
CHANGELOG.md
372
CHANGELOG.md
@@ -5,6 +5,247 @@ 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).
|
||||
|
||||
## [4.0.2] - 2025-10-09
|
||||
|
||||
### 🔄 UI Design Workflow - Complete Refactoring
|
||||
|
||||
**BREAKING CHANGES**: Complete refactoring to pure Claude-native execution, removing all external tool dependencies.
|
||||
|
||||
#### Breaking Changes
|
||||
|
||||
**Command Path Migration**:
|
||||
```bash
|
||||
# ❌ Old (v4.0.1 and earlier)
|
||||
/workflow:design:style-extract
|
||||
/workflow:design:style-consolidate
|
||||
/workflow:design:ui-generate
|
||||
/workflow:design:design-update
|
||||
/workflow:design:auto
|
||||
|
||||
# ✅ New (v4.0.2)
|
||||
/workflow:ui-design:extract
|
||||
/workflow:ui-design:consolidate
|
||||
/workflow:ui-design:generate
|
||||
/workflow:ui-design:update
|
||||
/workflow:ui-design:auto
|
||||
```
|
||||
|
||||
**Parameter Removal**:
|
||||
- **`--tool` parameter removed**: All commands now use Claude-native execution exclusively
|
||||
- No more `--tool gemini` or `--tool codex` options
|
||||
- Simplified command syntax
|
||||
|
||||
**Execution Model Changes**:
|
||||
```bash
|
||||
# ❌ Old: External CLI tools required
|
||||
# Required: gemini-wrapper, codex, qwen-wrapper
|
||||
/workflow:design:style-extract --tool gemini --images "refs/*.png"
|
||||
/workflow:design:style-consolidate --tool gemini --variants "variant-1,variant-2"
|
||||
/workflow:design:ui-generate --tool codex --pages "dashboard,auth"
|
||||
|
||||
# ✅ New: Pure Claude + agents
|
||||
/workflow:ui-design:extract --images "refs/*.png" --variants 3
|
||||
/workflow:ui-design:consolidate --variants "variant-1,variant-2"
|
||||
/workflow:ui-design:generate --pages "dashboard,auth" --variants 2
|
||||
```
|
||||
|
||||
#### Removed
|
||||
|
||||
**External Tool Dependencies**:
|
||||
- `gemini-wrapper` calls removed from style-extract and style-consolidate
|
||||
- `codex` calls removed from style-consolidate and ui-generate
|
||||
- `qwen-wrapper` calls removed entirely
|
||||
- All `bash()` wrapped CLI tool invocations eliminated
|
||||
|
||||
**Intermediate Output Files**:
|
||||
- `semantic_style_analysis.json` (replaced by embedded data in style-cards.json)
|
||||
- `initial_analysis.json` (analysis now done in single pass)
|
||||
- `style-philosophy.md` (integrated into style-guide.md)
|
||||
- Reduced from 7+ files to 4 essential files per phase
|
||||
|
||||
**Execution Modes**:
|
||||
- "conventional" mode removed from ui-generate (codex dependency)
|
||||
- "cli" mode removed from style-consolidate (external tool dependency)
|
||||
- Unified to agent-only execution
|
||||
|
||||
#### Changed
|
||||
|
||||
**style-extract (`/workflow:ui-design:extract`)**:
|
||||
- **Before**: Multi-step with gemini-wrapper + codex
|
||||
- Step 1: Claude analysis → initial_analysis.json
|
||||
- Step 2: gemini-wrapper → semantic_style_analysis.json
|
||||
- Step 3: codex → design-tokens.json + tailwind-tokens.js
|
||||
- Output: 4 files
|
||||
- **After**: Single-pass Claude analysis
|
||||
- Step 1: Claude analysis → style-cards.json (with embedded proposed_tokens)
|
||||
- Output: 1 file
|
||||
- **New structure**: `style-cards.json` includes complete `proposed_tokens` object per variant
|
||||
- **Reproducibility**: 100% deterministic with Claude-only execution
|
||||
|
||||
**style-consolidate (`/workflow:ui-design:consolidate`)**:
|
||||
- **Before**: Dual-tool approach
|
||||
- Step 1: gemini-wrapper → style-philosophy.md
|
||||
- Step 2: codex → design-tokens.json + validation
|
||||
- Mode detection: cli vs agent
|
||||
- **After**: Single-pass Claude synthesis
|
||||
- Step 1: Claude reads `proposed_tokens` from style-cards.json
|
||||
- Step 2: Claude generates all 4 files in one prompt
|
||||
- Output: design-tokens.json, style-guide.md, tailwind.config.js, validation-report.json
|
||||
- **Removed**: `--tool` parameter and mode detection logic
|
||||
|
||||
**ui-generate (`/workflow:ui-design:generate`)**:
|
||||
- **Before**: Three execution modes
|
||||
- conventional: codex CLI calls
|
||||
- agent: Task(conceptual-planning-agent)
|
||||
- Mode detection based on `--tool` flag
|
||||
- **After**: Unified agent-only execution
|
||||
- standard: Single Task(conceptual-planning-agent) for consistent variants
|
||||
- creative: Parallel Task(conceptual-planning-agent) for diverse layouts
|
||||
- Only `--variants` or `--creative-variants` determines mode
|
||||
- **Removed**: `--tool` parameter, conventional mode
|
||||
|
||||
**design-update (`/workflow:ui-design:update`)**:
|
||||
- **Before**: References `style-philosophy.md`
|
||||
- **After**: Extracts philosophy from `style-guide.md`
|
||||
- **Changed**: Adapted to new 4-file output structure from consolidate phase
|
||||
|
||||
**auto (`/workflow:ui-design:auto`)**:
|
||||
- **Before**: Passed `--tool` flags to sub-commands
|
||||
- **After**: No tool parameters, pure orchestration
|
||||
- **Simplified**: Command construction logic (no mode detection)
|
||||
- **Examples**: Updated all 3 example flows
|
||||
|
||||
#### Added
|
||||
|
||||
**Enhanced style-cards.json Structure**:
|
||||
```json
|
||||
{
|
||||
"extraction_metadata": {
|
||||
"session_id": "WFS-xxx",
|
||||
"input_mode": "image|text|hybrid",
|
||||
"timestamp": "ISO-8601",
|
||||
"variants_count": 3
|
||||
},
|
||||
"style_cards": [
|
||||
{
|
||||
"id": "variant-1",
|
||||
"name": "Modern Minimalist",
|
||||
"description": "...",
|
||||
"design_philosophy": "...",
|
||||
"preview": { "primary": "oklch(...)", ... },
|
||||
"proposed_tokens": {
|
||||
"colors": { /* complete color system */ },
|
||||
"typography": { /* complete typography system */ },
|
||||
"spacing": { /* complete spacing scale */ },
|
||||
"border_radius": { /* border radius scale */ },
|
||||
"shadows": { /* shadow system */ },
|
||||
"breakpoints": { /* responsive breakpoints */ }
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
**Unified Output Structure**:
|
||||
- `style-extraction/`: style-cards.json (1 file)
|
||||
- `style-consolidation/`: design-tokens.json, style-guide.md, tailwind.config.js, validation-report.json (4 files)
|
||||
- `prototypes/`: HTML/CSS files + index.html + compare.html + PREVIEW.md
|
||||
|
||||
#### Improved
|
||||
|
||||
**Performance**:
|
||||
- **Faster execution**: No external process spawning
|
||||
- **Reduced I/O**: Fewer intermediate files
|
||||
- **Parallel efficiency**: Native agent parallelization
|
||||
|
||||
**Reliability**:
|
||||
- **Zero external dependencies**: No gemini-wrapper, codex, or qwen-wrapper required
|
||||
- **No API failures**: Eliminates external API call failure points
|
||||
- **Consistent output**: Deterministic JSON structure
|
||||
|
||||
**Maintainability**:
|
||||
- **Simpler codebase**: 5 commands, unified patterns
|
||||
- **Clear data flow**: style-cards → design-tokens → prototypes
|
||||
- **Easier debugging**: All logic visible in command files
|
||||
|
||||
**Reproducibility**:
|
||||
- **Deterministic structure**: Same inputs → same output structure
|
||||
- **Version-controlled logic**: All prompts in .md files
|
||||
- **No black-box tools**: Complete transparency
|
||||
|
||||
#### Migration Guide
|
||||
|
||||
**For Standalone Usage**:
|
||||
```bash
|
||||
# Old command format
|
||||
/workflow:design:auto --tool gemini --prompt "Modern blog" --variants 3
|
||||
|
||||
# New command format (auto-migrated)
|
||||
/workflow:ui-design:auto --prompt "Modern blog" --variants 3
|
||||
```
|
||||
|
||||
**For Integrated Workflow Sessions**:
|
||||
```bash
|
||||
# Old workflow
|
||||
/workflow:design:style-extract --session WFS-xxx --tool gemini --images "refs/*.png"
|
||||
/workflow:design:style-consolidate --session WFS-xxx --tool gemini --variants "variant-1,variant-2"
|
||||
/workflow:design:ui-generate --session WFS-xxx --tool codex --pages "dashboard,auth"
|
||||
/workflow:design:design-update --session WFS-xxx
|
||||
|
||||
# New workflow (simplified)
|
||||
/workflow:ui-design:extract --session WFS-xxx --images "refs/*.png" --variants 2
|
||||
/workflow:ui-design:consolidate --session WFS-xxx --variants "variant-1,variant-2"
|
||||
/workflow:ui-design:generate --session WFS-xxx --pages "dashboard,auth" --variants 2
|
||||
/workflow:ui-design:update --session WFS-xxx
|
||||
```
|
||||
|
||||
**Configuration Changes Required**: None - all external tool configurations can be removed
|
||||
|
||||
#### Files Changed
|
||||
|
||||
**Renamed/Relocated**:
|
||||
- `.claude/commands/workflow/design/` → `.claude/commands/workflow/ui-design/`
|
||||
- All command files updated with new paths
|
||||
|
||||
**Modified Commands**:
|
||||
- `style-extract.md` → `extract.md` (complete rewrite)
|
||||
- `style-consolidate.md` → `consolidate.md` (complete rewrite)
|
||||
- `ui-generate.md` → `generate.md` (simplified)
|
||||
- `design-update.md` → `update.md` (adapted to new structure)
|
||||
- `auto.md` (updated orchestration)
|
||||
|
||||
**Documentation**:
|
||||
- Updated all command examples
|
||||
- Updated parameter descriptions
|
||||
- Added Key Improvements sections
|
||||
- Clarified Integration Points
|
||||
|
||||
## [4.0.1] - 2025-10-07
|
||||
|
||||
### 🎯 Intelligent Page Inference
|
||||
|
||||
**IMPROVEMENT**: `--pages` parameter is now **optional** with smart inference from prompt or session context.
|
||||
|
||||
**Changes**:
|
||||
- `--pages` parameter: Now optional, intelligently inferred from:
|
||||
1. Explicit `--pages` if provided
|
||||
2. `--prompt` text analysis (e.g., "blog with home, article pages" → ["home", "article"])
|
||||
3. `--session` synthesis-specification.md extraction
|
||||
4. Default: ["home"]
|
||||
|
||||
**New Examples**:
|
||||
```bash
|
||||
# Simplest - pages inferred from prompt
|
||||
/workflow:ui-design:auto --prompt "Modern blog with home, article and author pages"
|
||||
|
||||
# Explicit override if needed
|
||||
/workflow:ui-design:auto --prompt "SaaS app" --pages "dashboard,settings,billing"
|
||||
```
|
||||
|
||||
**Commands Updated**:
|
||||
- `/workflow:ui-design:auto`: All parameters now optional
|
||||
- `/workflow:ui-design:ui-generate`: `--pages` optional with smart inference
|
||||
|
||||
## [4.0.0] - 2025-10-07
|
||||
|
||||
### 🚀 UI Design Workflow V2 - Agent Mode & Flexible Inputs
|
||||
@@ -17,26 +258,27 @@ This major release introduces agent-driven creative exploration, unified variant
|
||||
|
||||
**Required Migration**:
|
||||
- **Old format no longer supported**: Commands using old parameter structure will fail
|
||||
- **`--session` parameter**: Now optional, omitting it enables standalone mode
|
||||
- **`--images` parameter**: Now optional with default value `design-refs/*`
|
||||
- **Removed `--style-overrides`**: Simplified to `--prompt` for text-based guidance
|
||||
- **New required parameter**: `--pages` is now the only mandatory parameter
|
||||
- **All parameters now optional**: Smart defaults and inference for all parameters
|
||||
- **`--session`**: Optional, omitting enables standalone mode
|
||||
- **`--images`**: Optional with default `design-refs/*`
|
||||
- **`--pages`**: Optional, inferred from prompt or session (as of v4.0.1)
|
||||
- **Removed `--style-overrides`**: Use `--prompt` instead
|
||||
|
||||
**Migration Guide**:
|
||||
```bash
|
||||
# ❌ Old (v3.5.0 and earlier) - NO LONGER WORKS
|
||||
/workflow:design:style-extract --session WFS-auth --images "design-refs/*.png"
|
||||
/workflow:design:ui-generate --session WFS-auth --pages "login,register"
|
||||
/workflow:ui-design:style-extract --session WFS-auth --images "design-refs/*.png"
|
||||
/workflow:ui-design:ui-generate --session WFS-auth --pages "login,register"
|
||||
|
||||
# ✅ New (v4.0.0+)
|
||||
/workflow:design:style-extract --images "design-refs/*.png" --variants 3
|
||||
/workflow:design:ui-generate --pages "login,register" --variants 2
|
||||
# ✅ New (v4.0.1) - All parameters optional
|
||||
/workflow:ui-design:style-extract --images "design-refs/*.png" --variants 3
|
||||
/workflow:ui-design:ui-generate --variants 2
|
||||
|
||||
# ✅ Simplest form (using defaults)
|
||||
/workflow:design:auto --pages "dashboard"
|
||||
# ✅ Simplest form (pages inferred from prompt)
|
||||
/workflow:ui-design:auto --prompt "Modern blog with home, article and author pages"
|
||||
|
||||
# ✅ With agent mode
|
||||
/workflow:design:auto --prompt "Modern SaaS" --pages "home" --variants 3 --use-agent
|
||||
# ✅ With agent mode and explicit pages
|
||||
/workflow:ui-design:auto --prompt "Modern SaaS" --pages "dashboard,settings" --variants 3 --use-agent
|
||||
```
|
||||
|
||||
**Deprecated Commands**:
|
||||
@@ -84,46 +326,46 @@ This major release introduces agent-driven creative exploration, unified variant
|
||||
|
||||
#### Changed
|
||||
|
||||
**New Command Interface**:
|
||||
- **`/workflow:design:auto`**:
|
||||
- Required: `--pages <list>`
|
||||
- Optional: `--session <id>`, `--images <glob>`, `--prompt <desc>`, `--variants <count>`, `--use-agent`
|
||||
- Defaults: `--variants 3`, `--images "design-refs/*"`
|
||||
**New Command Interface** (v4.0.1):
|
||||
- **`/workflow:ui-design:auto`**:
|
||||
- All parameters optional with smart defaults
|
||||
- `--prompt <desc>`: Design description (infers pages automatically)
|
||||
- `--images <glob>`: Reference images (default: `design-refs/*`)
|
||||
- `--pages <list>`: Explicit page override (auto-inferred if omitted)
|
||||
- `--session <id>`, `--variants <count>`, `--use-agent`, `--batch-plan`
|
||||
- Examples:
|
||||
- Minimal: `/workflow:design:auto --pages "login"`
|
||||
- Agent Mode: `/workflow:design:auto --prompt "Modern SaaS" --pages "home" --variants 3 --use-agent`
|
||||
- Hybrid: `/workflow:design:auto --images "refs/*.png" --prompt "Linear.app style" --pages "tasks" --use-agent`
|
||||
- Minimal: `/workflow:ui-design:auto --prompt "Modern blog with home and article pages"`
|
||||
- Agent Mode: `/workflow:ui-design:auto --prompt "SaaS dashboard and settings" --variants 3 --use-agent`
|
||||
- Hybrid: `/workflow:ui-design:auto --images "refs/*.png" --prompt "E-commerce: home, product, cart"`
|
||||
|
||||
- **`/workflow:design:style-extract`**:
|
||||
- Required: At least one of `--images` or `--prompt`
|
||||
- Optional: `--session <id>`, `--variants <count>`, `--use-agent`
|
||||
- Supports: image-only, text-only, or hybrid inputs
|
||||
- **`/workflow:ui-design:style-extract`**:
|
||||
- At least one of `--images` or `--prompt` recommended
|
||||
- All other parameters optional
|
||||
- Agent mode: Parallel generation of diverse design directions
|
||||
|
||||
- **`/workflow:design:ui-generate`**:
|
||||
- Required: `--pages <list>`
|
||||
- Optional: `--session <id>`, `--variants <count>`, `--use-agent`
|
||||
- **`/workflow:ui-design:ui-generate`**:
|
||||
- All parameters optional (pages inferred from session or defaults to ["home"])
|
||||
- `--pages <list>`: Optional explicit page list
|
||||
- Agent mode: Parallel layout exploration (F-Pattern, Grid, Asymmetric)
|
||||
- Conventional mode: Codex-driven generation with minor variations
|
||||
|
||||
#### 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 text with page inference (simplest)
|
||||
/workflow:ui-design:auto --prompt "Modern minimalist blog with home, article and author pages, dark theme" --use-agent
|
||||
|
||||
# Pure image, conventional mode
|
||||
/workflow:design:auto --images "refs/*.png" --pages "dashboard" --variants 2
|
||||
# Pure image with inferred pages
|
||||
/workflow:ui-design:auto --images "refs/*.png" --variants 2
|
||||
|
||||
# Hybrid input
|
||||
/workflow:design:auto --images "current-app.png" --prompt "Modernize with Linear.app style" --pages "tasks,settings" --use-agent
|
||||
# Hybrid input with explicit page override
|
||||
/workflow:ui-design:auto --images "current-app.png" --prompt "Modernize to 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
|
||||
# Within existing workflow (pages inferred from synthesis)
|
||||
/workflow:ui-design:auto --session WFS-app-refresh --images "refs/*.png" --variants 3 --use-agent
|
||||
```
|
||||
|
||||
#### Technical Details
|
||||
@@ -178,7 +420,7 @@ This release introduces a comprehensive UI design workflow system with triple vi
|
||||
#### Added
|
||||
|
||||
**New UI Design Workflow System**:
|
||||
- **`/workflow:design:auto`**: Semi-autonomous UI design workflow orchestrator
|
||||
- **`/workflow:ui-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
|
||||
@@ -199,12 +441,12 @@ This release introduces a comprehensive UI design workflow system with triple vi
|
||||
|
||||
**Individual Design Commands**:
|
||||
|
||||
**`/workflow:design:style-extract`** - Extract design styles from reference images
|
||||
- **Usage**: `/workflow:design:style-extract --session <session_id> --images "<glob_pattern>"`
|
||||
**`/workflow:ui-design:style-extract`** - Extract design styles from reference images
|
||||
- **Usage**: `/workflow:ui-design:style-extract --session <session_id> --images "<glob_pattern>"`
|
||||
- **Examples**:
|
||||
```bash
|
||||
/workflow:design:style-extract --session WFS-auth --images "design-refs/*.png"
|
||||
/workflow:design:style-extract --session WFS-dashboard --images "refs/dashboard-*.jpg"
|
||||
/workflow:ui-design:style-extract --session WFS-auth --images "design-refs/*.png"
|
||||
/workflow:ui-design:style-extract --session WFS-dashboard --images "refs/dashboard-*.jpg"
|
||||
```
|
||||
- **Features**:
|
||||
- Triple vision analysis (Claude Code + Gemini + Codex)
|
||||
@@ -214,12 +456,12 @@ This release introduces a comprehensive UI design workflow system with triple vi
|
||||
- Supports PNG, JPG, WebP image formats
|
||||
- **Output**: `.design/style-extraction/` with analysis files and 2-3 style variant cards
|
||||
|
||||
**`/workflow:design:style-consolidate`** - Consolidate selected style variants
|
||||
- **Usage**: `/workflow:design:style-consolidate --session <session_id> --variants "<variant_ids>"`
|
||||
**`/workflow:ui-design:style-consolidate`** - Consolidate selected style variants
|
||||
- **Usage**: `/workflow:ui-design:style-consolidate --session <session_id> --variants "<variant_ids>"`
|
||||
- **Examples**:
|
||||
```bash
|
||||
/workflow:design:style-consolidate --session WFS-auth --variants "variant-1,variant-3"
|
||||
/workflow:design:style-consolidate --session WFS-dashboard --variants "variant-2"
|
||||
/workflow:ui-design:style-consolidate --session WFS-auth --variants "variant-1,variant-3"
|
||||
/workflow:ui-design:style-consolidate --session WFS-dashboard --variants "variant-2"
|
||||
```
|
||||
- **Features**:
|
||||
- Validates and merges design tokens from selected variants
|
||||
@@ -229,13 +471,13 @@ This release introduces a comprehensive UI design workflow system with triple vi
|
||||
- OKLCH color format with fallback
|
||||
- **Output**: `.design/style-consolidation/` with validated design system files
|
||||
|
||||
**`/workflow:design:ui-generate`** - Generate production-ready UI prototypes *(NEW: with preview enhancement)*
|
||||
- **Usage**: `/workflow:design:ui-generate --session <session_id> --pages "<page_list>" [--variants <count>] [--style-overrides "<path_or_json>"]`
|
||||
**`/workflow:ui-design:ui-generate`** - Generate production-ready UI prototypes *(NEW: with preview enhancement)*
|
||||
- **Usage**: `/workflow:ui-design:ui-generate --session <session_id> --pages "<page_list>" [--variants <count>] [--style-overrides "<path_or_json>"]`
|
||||
- **Examples**:
|
||||
```bash
|
||||
/workflow:design:ui-generate --session WFS-auth --pages "login,register"
|
||||
/workflow:design:ui-generate --session WFS-dashboard --pages "dashboard" --variants 3
|
||||
/workflow:design:ui-generate --session WFS-auth --pages "login" --style-overrides "overrides.json"
|
||||
/workflow:ui-design:ui-generate --session WFS-auth --pages "login,register"
|
||||
/workflow:ui-design:ui-generate --session WFS-dashboard --pages "dashboard" --variants 3
|
||||
/workflow:ui-design:ui-generate --session WFS-auth --pages "login" --style-overrides "overrides.json"
|
||||
```
|
||||
- **Features**:
|
||||
- Token-driven HTML/CSS generation with Codex
|
||||
@@ -248,12 +490,12 @@ This release introduces a comprehensive UI design workflow system with triple vi
|
||||
- **Output**: `.design/prototypes/` with HTML/CSS files and preview tools
|
||||
- **Preview**: Open `index.html` in browser or start local server for interactive preview
|
||||
|
||||
**`/workflow:design:design-update`** - Integrate design system into brainstorming
|
||||
- **Usage**: `/workflow:design:design-update --session <session_id> [--selected-prototypes "<prototype_ids>"]`
|
||||
**`/workflow:ui-design:design-update`** - Integrate design system into brainstorming
|
||||
- **Usage**: `/workflow:ui-design:design-update --session <session_id> [--selected-prototypes "<prototype_ids>"]`
|
||||
- **Examples**:
|
||||
```bash
|
||||
/workflow:design:design-update --session WFS-auth
|
||||
/workflow:design:design-update --session WFS-auth --selected-prototypes "login-variant-1,register-variant-2"
|
||||
/workflow:ui-design:design-update --session WFS-auth
|
||||
/workflow:ui-design:design-update --session WFS-auth --selected-prototypes "login-variant-1,register-variant-2"
|
||||
```
|
||||
- **Features**:
|
||||
- Updates `synthesis-specification.md` with UI/UX guidelines section
|
||||
@@ -262,12 +504,12 @@ This release introduces a comprehensive UI design workflow system with triple vi
|
||||
- Merges selected prototype recommendations into brainstorming artifacts
|
||||
- **Output**: Updated brainstorming files with design system integration
|
||||
|
||||
**`/workflow:design:auto`** - Semi-autonomous orchestrator with interactive checkpoints
|
||||
- **Usage**: `/workflow:design:auto --session <session_id> --images "<glob>" --pages "<list>" [--variants <count>] [--batch-plan]`
|
||||
**`/workflow:ui-design:auto`** - Semi-autonomous orchestrator with interactive checkpoints
|
||||
- **Usage**: `/workflow:ui-design:auto --session <session_id> --images "<glob>" --pages "<list>" [--variants <count>] [--batch-plan]`
|
||||
- **Examples**:
|
||||
```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
|
||||
/workflow:ui-design:auto --session WFS-auth --images "design-refs/*.png" --pages "login,register"
|
||||
/workflow:ui-design:auto --session WFS-dashboard --images "refs/*.jpg" --pages "dashboard" --variants 3 --batch-plan
|
||||
```
|
||||
- **Features**:
|
||||
- Orchestrates entire design workflow with pause-and-continue checkpoints
|
||||
@@ -279,11 +521,11 @@ This release introduces a comprehensive UI design workflow system with triple vi
|
||||
|
||||
**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"`
|
||||
- Command: `/workflow:ui-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"`
|
||||
- Command: `/workflow:ui-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**:
|
||||
@@ -357,7 +599,7 @@ python -m http.server 8080 # Visit http://localhost:8080
|
||||
**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
|
||||
- **Command Reference**: Added 5 new `/workflow:ui-design:*` commands
|
||||
- **Phase Renumbering**: Shifted phases to accommodate new Phase 2 (UI Design)
|
||||
|
||||
#### Benefits
|
||||
@@ -398,15 +640,15 @@ 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"
|
||||
User: /workflow:ui-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"
|
||||
User: /workflow:ui-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"
|
||||
User: /workflow:ui-design:design-update --session WFS-xxx --selected-prototypes "dashboard-variant-1,auth-variant-2"
|
||||
↓
|
||||
Phase 5: batch-plan (optional, automatic if --batch-plan flag)
|
||||
```
|
||||
|
||||
123
README.md
123
README.md
@@ -2,7 +2,7 @@
|
||||
|
||||
<div align="center">
|
||||
|
||||
[](https://github.com/catlog22/Claude-Code-Workflow/releases)
|
||||
[](https://github.com/catlog22/Claude-Code-Workflow/releases)
|
||||
[](LICENSE)
|
||||
[]()
|
||||
[](https://github.com/modelcontextprotocol)
|
||||
@@ -15,16 +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.5.0** - UI Design Workflow with Triple Vision Analysis. See [CHANGELOG.md](CHANGELOG.md) for details.
|
||||
> **🎉 Latest: v4.0.1** - UI Design Workflow V2 with Intelligent Page Inference & Agent Mode. See [CHANGELOG.md](CHANGELOG.md) for details.
|
||||
>
|
||||
> **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
|
||||
> **What's New in v4.0.1**:
|
||||
> - 🧠 **Intelligent Page Inference**: Pages auto-extracted from prompt text - no need to specify `--pages` manually
|
||||
> - 🤖 **Agent Creative Mode**: `--use-agent` enables parallel exploration of diverse design directions
|
||||
> - 🎯 **Unified Variant Control**: Single `--variants` parameter controls both style cards and UI prototypes
|
||||
> - 🔀 **Dual Mode Support**: Standalone (quick prototyping) or Integrated (workflow enhancement)
|
||||
> - 💬 **Dual Input Sources**: Images, text prompts, or hybrid (text guides image analysis)
|
||||
> - ✨ **Extreme Simplification**: All parameters optional with smart defaults
|
||||
> - ⚡ **Parallel Execution**: Agent mode generates variants concurrently for speed
|
||||
|
||||
---
|
||||
|
||||
@@ -253,13 +253,16 @@ MCP (Model Context Protocol) tools provide advanced codebase analysis. **Recomme
|
||||
|
||||
**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
|
||||
# Simplest - pages inferred from prompt (v4.0.2+)
|
||||
/workflow:ui-design:auto --prompt "Modern blog with home, article and author pages, dark theme"
|
||||
|
||||
# With session integration
|
||||
/workflow:ui-design:auto --session WFS-auth --images "refs/*.png" --variants 3
|
||||
|
||||
# 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:ui-design:extract --images "refs/*.png" --variants 3
|
||||
/workflow:ui-design:consolidate --variants "variant-1,variant-3"
|
||||
/workflow:ui-design:generate --variants 2
|
||||
|
||||
# Preview generated prototypes (NEW!)
|
||||
# Option 1: Open .workflow/WFS-auth/.design/prototypes/index.html in browser
|
||||
@@ -267,7 +270,7 @@ MCP (Model Context Protocol) tools provide advanced codebase analysis. **Recomme
|
||||
cd .workflow/WFS-auth/.design/prototypes && python -m http.server 8080
|
||||
# Visit http://localhost:8080 for interactive preview with comparison tools
|
||||
|
||||
/workflow:design:design-update --session WFS-auth --selected-prototypes "login-variant-1,register-variant-2"
|
||||
/workflow:ui-design:design-update --session WFS-auth --selected-prototypes "login-variant-1,register-variant-2"
|
||||
```
|
||||
|
||||
**Phase 3: Action Planning**
|
||||
@@ -361,11 +364,11 @@ cd .workflow/WFS-auth/.design/prototypes && python -m http.server 8080
|
||||
|---|---|
|
||||
| `/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:ui-design:auto` | **v4.0.2** UI design workflow with pure Claude execution. All parameters optional, no external tools. |
|
||||
| `/workflow:ui-design:extract` | **v4.0.2** Extract design from images/text using Claude-native analysis. Single-pass variant generation. |
|
||||
| `/workflow:ui-design:consolidate` | **v4.0.2** Consolidate style variants into validated design tokens using Claude synthesis. |
|
||||
| `/workflow:ui-design:generate` | **v4.0.2** Generate token-driven HTML/CSS prototypes with agent-based execution. |
|
||||
| `/workflow:ui-design:update` | **v4.0.2** 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. |
|
||||
@@ -377,50 +380,74 @@ cd .workflow/WFS-auth/.design/prototypes && python -m http.server 8080
|
||||
| `/workflow:tools:test-concept-enhanced` | Generate test strategy and requirements analysis using Gemini. |
|
||||
| `/workflow:tools:test-task-generate` | Generate test task JSON with test-fix-cycle specification. |
|
||||
|
||||
### **UI Design Workflow Commands (`/workflow:design:*`)** *(v3.5.0+)*
|
||||
### **UI Design Workflow Commands (`/workflow:ui-design:*`)** *(v4.0.2)*
|
||||
|
||||
The design workflow system provides complete UI design refinement from style extraction to prototype generation with interactive preview tools.
|
||||
The design workflow system provides complete UI design refinement with **pure Claude execution**, **intelligent page inference**, and **zero external dependencies**.
|
||||
|
||||
#### Core Commands
|
||||
|
||||
**`/workflow:design:auto`** - Complete workflow orchestrator
|
||||
**`/workflow:ui-design:auto`** - Complete workflow orchestrator
|
||||
```bash
|
||||
# Semi-autonomous workflow with user checkpoints
|
||||
/workflow:design:auto --session WFS-auth --images "refs/*.png" --pages "login,register"
|
||||
/workflow:design:auto --session WFS-dash --images "refs/*.jpg" --pages "dashboard" --variants 3 --batch-plan
|
||||
```
|
||||
- **Checkpoints**: User selects style variants (Phase 1) and confirms prototypes (Phase 3)
|
||||
- **Optional**: `--batch-plan` for automatic task generation
|
||||
# Simplest - pages auto-inferred from prompt (v4.0.2)
|
||||
/workflow:ui-design:auto --prompt "Modern blog with home, article and author pages, dark theme"
|
||||
|
||||
**`/workflow:design:style-extract`** - Triple vision style analysis
|
||||
# Multiple style variants
|
||||
/workflow:ui-design:auto --prompt "SaaS dashboard and settings" --variants 3
|
||||
|
||||
# Hybrid: images + text prompt
|
||||
/workflow:ui-design:auto --images "refs/*.png" --prompt "E-commerce: home, product, cart"
|
||||
|
||||
# Integrated with session + creative mode
|
||||
/workflow:ui-design:auto --session WFS-auth --images "refs/*.png" --variants 2 --creative-variants 3
|
||||
```
|
||||
- **🆕 Pure Claude**: No external tools (gemini-wrapper, codex) required
|
||||
- **🆕 Zero Dependencies**: All analysis and generation done natively
|
||||
- **All Parameters Optional**: Smart defaults and inference for everything
|
||||
- **Page Inference**: Auto-extract pages from `--prompt` text
|
||||
- **Dual Mode**: Standalone (quick prototyping) or Integrated (workflow enhancement)
|
||||
|
||||
**`/workflow:ui-design:extract`** - Style analysis with dual input sources
|
||||
```bash
|
||||
# Extract design from reference images
|
||||
/workflow:design:style-extract --session WFS-auth --images "design-refs/*.png"
|
||||
```
|
||||
- **Vision Sources**: Claude Code + Gemini + Codex
|
||||
- **Output**: Style variant cards for user selection
|
||||
# Pure text prompt
|
||||
/workflow:ui-design:extract --prompt "Modern minimalist, dark theme" --variants 3
|
||||
|
||||
**`/workflow:design:style-consolidate`** - Validate and merge tokens
|
||||
# Pure images
|
||||
/workflow:ui-design:extract --images "refs/*.png" --variants 3
|
||||
|
||||
# Hybrid (text guides image analysis)
|
||||
/workflow:ui-design:extract --images "refs/*.png" --prompt "Linear.app style" --variants 2
|
||||
```
|
||||
- **Claude-Native**: Single-pass analysis, no external tools
|
||||
- **Enhanced Output**: `style-cards.json` with embedded `proposed_tokens`
|
||||
- **Reproducible**: Deterministic structure, version-controlled logic
|
||||
- **Output**: 1 file (vs 4+ in previous versions)
|
||||
|
||||
**`/workflow:ui-design:consolidate`** - Validate and merge tokens
|
||||
```bash
|
||||
# Consolidate selected style variants
|
||||
/workflow:design:style-consolidate --session WFS-auth --variants "variant-1,variant-3"
|
||||
/workflow:ui-design:consolidate --session WFS-auth --variants "variant-1,variant-3"
|
||||
```
|
||||
- **Claude Synthesis**: Single-pass generation of all design system files
|
||||
- **Features**: WCAG AA validation, OKLCH colors, W3C token format
|
||||
- **Output**: `design-tokens.json`, `style-guide.md`, `tailwind.config.js`
|
||||
- **Output**: `design-tokens.json`, `style-guide.md`, `tailwind.config.js`, `validation-report.json`
|
||||
|
||||
**`/workflow:design:ui-generate`** - Generate HTML/CSS prototypes
|
||||
**`/workflow:ui-design:generate`** - Generate HTML/CSS prototypes
|
||||
```bash
|
||||
# Generate prototypes with preview tools
|
||||
/workflow:design:ui-generate --session WFS-auth --pages "login,register" --variants 2
|
||||
/workflow:design:ui-generate --session WFS-auth --pages "dashboard" --style-overrides "custom.json"
|
||||
```
|
||||
- **🆕 Preview Files**: `index.html` (navigation), `compare.html` (side-by-side), `PREVIEW.md` (instructions)
|
||||
- **Features**: Token-driven CSS, semantic HTML5, ARIA attributes, responsive design
|
||||
# Standard mode (consistent layouts)
|
||||
/workflow:ui-design:generate --pages "dashboard,auth" --variants 2
|
||||
|
||||
**`/workflow:design:design-update`** - Integrate design system
|
||||
# Creative mode (diverse layout exploration)
|
||||
/workflow:ui-design:generate --pages "home,product,cart" --creative-variants 3
|
||||
```
|
||||
- **Page Inference**: Auto-detect from session or default to `["home"]`
|
||||
- **Agent-Only**: Task(conceptual-planning-agent) execution
|
||||
- **Creative Mode**: Parallel agents for diverse layout strategies
|
||||
- **Preview Files**: `index.html`, `compare.html`, `PREVIEW.md`
|
||||
|
||||
**`/workflow:ui-design:update`** - Integrate design system
|
||||
```bash
|
||||
# Update brainstorming artifacts with design system
|
||||
/workflow:design:design-update --session WFS-auth --selected-prototypes "login-variant-1,register-variant-2"
|
||||
/workflow:ui-design:update --session WFS-auth --selected-prototypes "login-variant-1"
|
||||
```
|
||||
- **Updates**: `synthesis-specification.md`, `ui-designer/style-guide.md`
|
||||
- **Makes design tokens available for task generation**
|
||||
|
||||
46
README_CN.md
46
README_CN.md
@@ -254,12 +254,12 @@ MCP (模型上下文协议) 工具提供高级代码库分析。**推荐安装**
|
||||
**阶段 2：UI 设计精炼** *(UI 密集型项目可选)*
|
||||
```bash
|
||||
# 从参考图像中提取设计风格并生成原型
|
||||
/workflow:design:auto --session WFS-auth --images "design-refs/*.png" --pages "login,register" --batch-plan
|
||||
/workflow:ui-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:ui-design:style-extract --session WFS-auth --images "refs/*.png"
|
||||
/workflow:ui-design:style-consolidate --session WFS-auth --variants "variant-1,variant-3"
|
||||
/workflow:ui-design:ui-generate --session WFS-auth --pages "login,register" --variants 2
|
||||
|
||||
# 预览生成的原型（新功能！）
|
||||
# 选项1：在浏览器中打开 .workflow/WFS-auth/.design/prototypes/index.html
|
||||
@@ -267,7 +267,7 @@ MCP (模型上下文协议) 工具提供高级代码库分析。**推荐安装**
|
||||
cd .workflow/WFS-auth/.design/prototypes && python -m http.server 8080
|
||||
# 访问 http://localhost:8080 获取交互式预览和对比工具
|
||||
|
||||
/workflow:design:design-update --session WFS-auth --selected-prototypes "login-variant-1,register-variant-2"
|
||||
/workflow:ui-design:design-update --session WFS-auth --selected-prototypes "login-variant-1,register-variant-2"
|
||||
```
|
||||
|
||||
**阶段 3：行动规划**
|
||||
@@ -361,11 +361,11 @@ cd .workflow/WFS-auth/.design/prototypes && python -m http.server 8080
|
||||
|---|---|
|
||||
| `/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:ui-design:auto` | **新增** 带交互式检查点的半自主 UI 设计工作流，用于风格和原型选择。 |
|
||||
| `/workflow:ui-design:style-extract` | **新增** 使用三重视觉分析（Claude + Gemini + Codex）从参考图像提取设计风格。 |
|
||||
| `/workflow:ui-design:style-consolidate` | **新增** 将选定的风格变体整合为经过验证的设计令牌和风格指南。 |
|
||||
| `/workflow:ui-design:ui-generate` | **新增** 生成基于令牌的 HTML/CSS 原型，支持可选的风格覆盖。 |
|
||||
| `/workflow:ui-design:design-update` | **新增** 将最终确定的设计系统集成到头脑风暴产物中。 |
|
||||
| `/workflow:plan` | 从描述创建详细、可执行的计划。 |
|
||||
| `/workflow:tdd-plan` | 创建 TDD 工作流（6 阶段），包含测试覆盖分析和 Red-Green-Refactor 循环。 |
|
||||
| `/workflow:execute` | 自主执行当前的工作流计划。 |
|
||||
@@ -377,50 +377,50 @@ cd .workflow/WFS-auth/.design/prototypes && python -m http.server 8080
|
||||
| `/workflow:tools:test-concept-enhanced` | 使用 Gemini 生成测试策略和需求分析。 |
|
||||
| `/workflow:tools:test-task-generate` | 生成测试任务 JSON，包含 test-fix-cycle 规范。 |
|
||||
|
||||
### **UI 设计工作流命令 (`/workflow:design:*`)** *(v3.5.0+)*
|
||||
### **UI 设计工作流命令 (`/workflow:ui-design:*`)** *(v3.5.0+)*
|
||||
|
||||
设计工作流系统提供从风格提取到原型生成的完整 UI 设计精炼，配备交互式预览工具。
|
||||
|
||||
#### 核心命令
|
||||
|
||||
**`/workflow:design:auto`** - 完整工作流编排器
|
||||
**`/workflow:ui-design:auto`** - 完整工作流编排器
|
||||
```bash
|
||||
# 带用户检查点的半自主工作流
|
||||
/workflow:design:auto --session WFS-auth --images "refs/*.png" --pages "login,register"
|
||||
/workflow:design:auto --session WFS-dash --images "refs/*.jpg" --pages "dashboard" --variants 3 --batch-plan
|
||||
/workflow:ui-design:auto --session WFS-auth --images "refs/*.png" --pages "login,register"
|
||||
/workflow:ui-design:auto --session WFS-dash --images "refs/*.jpg" --pages "dashboard" --variants 3 --batch-plan
|
||||
```
|
||||
- **检查点**: 用户选择风格变体（阶段1）和确认原型（阶段3）
|
||||
- **可选**: `--batch-plan` 用于自动任务生成
|
||||
|
||||
**`/workflow:design:style-extract`** - 三重视觉风格分析
|
||||
**`/workflow:ui-design:style-extract`** - 三重视觉风格分析
|
||||
```bash
|
||||
# 从参考图像提取设计
|
||||
/workflow:design:style-extract --session WFS-auth --images "design-refs/*.png"
|
||||
/workflow:ui-design:style-extract --session WFS-auth --images "design-refs/*.png"
|
||||
```
|
||||
- **视觉来源**: Claude Code + Gemini + Codex
|
||||
- **输出**: 用于用户选择的风格变体卡片
|
||||
|
||||
**`/workflow:design:style-consolidate`** - 验证和合并令牌
|
||||
**`/workflow:ui-design:style-consolidate`** - 验证和合并令牌
|
||||
```bash
|
||||
# 整合选定的风格变体
|
||||
/workflow:design:style-consolidate --session WFS-auth --variants "variant-1,variant-3"
|
||||
/workflow:ui-design:style-consolidate --session WFS-auth --variants "variant-1,variant-3"
|
||||
```
|
||||
- **功能**: WCAG AA 验证、OKLCH 颜色、W3C 令牌格式
|
||||
- **输出**: `design-tokens.json`、`style-guide.md`、`tailwind.config.js`
|
||||
|
||||
**`/workflow:design:ui-generate`** - 生成 HTML/CSS 原型
|
||||
**`/workflow:ui-design:ui-generate`** - 生成 HTML/CSS 原型
|
||||
```bash
|
||||
# 生成带预览工具的原型
|
||||
/workflow:design:ui-generate --session WFS-auth --pages "login,register" --variants 2
|
||||
/workflow:design:ui-generate --session WFS-auth --pages "dashboard" --style-overrides "custom.json"
|
||||
/workflow:ui-design:ui-generate --session WFS-auth --pages "login,register" --variants 2
|
||||
/workflow:ui-design:ui-generate --session WFS-auth --pages "dashboard" --style-overrides "custom.json"
|
||||
```
|
||||
- **🆕 预览文件**: `index.html`（导航）、`compare.html`（并排对比）、`PREVIEW.md`（说明）
|
||||
- **功能**: 令牌驱动的 CSS、语义化 HTML5、ARIA 属性、响应式设计
|
||||
|
||||
**`/workflow:design:design-update`** - 集成设计系统
|
||||
**`/workflow:ui-design:design-update`** - 集成设计系统
|
||||
```bash
|
||||
# 使用设计系统更新头脑风暴产物
|
||||
/workflow:design:design-update --session WFS-auth --selected-prototypes "login-variant-1,register-variant-2"
|
||||
/workflow:ui-design:design-update --session WFS-auth --selected-prototypes "login-variant-1,register-variant-2"
|
||||
```
|
||||
- **更新**: `synthesis-specification.md`、`ui-designer/style-guide.md`
|
||||
- **使设计令牌可用于任务生成**
|
||||
|
||||
@@ -1,252 +0,0 @@
|
||||
# v3.2.3 - Version Management System
|
||||
|
||||
## 🎉 Release Date
|
||||
2025-10-03
|
||||
|
||||
## ✨ Overview
|
||||
|
||||
This release introduces a comprehensive version management and upgrade notification system, making it easy to track your Claude Code Workflow installation and stay up-to-date with the latest releases.
|
||||
|
||||
## 🆕 New Features
|
||||
|
||||
### `/version` Command
|
||||
|
||||
A powerful new command that provides complete version information and automatic update checking:
|
||||
|
||||
**Features:**
|
||||
- 📊 **Version Display**: Shows both local and global installation versions
|
||||
- 🌐 **GitHub Integration**: Fetches latest stable release and development commits
|
||||
- 🔄 **Smart Comparison**: Automatically compares installed version with latest available
|
||||
- 💡 **Upgrade Recommendations**: Provides installation commands for easy upgrading
|
||||
- ⚡ **Fast Execution**: 30-second timeout for network calls, graceful offline handling
|
||||
|
||||
**Usage:**
|
||||
```bash
|
||||
/version
|
||||
```
|
||||
|
||||
**Example Output:**
|
||||
```
|
||||
Installation Status:
|
||||
- Local: No project-specific installation
|
||||
- Global: ✅ Installed at ~/.claude
|
||||
- Version: v3.2.3
|
||||
- Installed: 2025-10-03T05:01:34Z
|
||||
|
||||
Latest Releases:
|
||||
- Stable: v3.2.3 (2025-10-03T04:10:08Z)
|
||||
- v3.2.3: Version Management System
|
||||
- Latest Commit: c5c36a2 (2025-10-03T05:00:06Z)
|
||||
- fix: Optimize version command API calls and data extraction
|
||||
|
||||
Status: ✅ You are on the latest stable version (3.2.3)
|
||||
```
|
||||
|
||||
### Version Tracking System
|
||||
|
||||
**Version Files:**
|
||||
- `.claude/version.json` - Local project installation tracking
|
||||
- `~/.claude/version.json` - Global installation tracking
|
||||
|
||||
**Tracked Information:**
|
||||
```json
|
||||
{
|
||||
"version": "v3.2.3",
|
||||
"installation_mode": "Global",
|
||||
"installation_path": "C:\\Users\\username\\.claude",
|
||||
"source_branch": "main",
|
||||
"installation_date_utc": "2025-10-03T05:01:34Z"
|
||||
}
|
||||
```
|
||||
|
||||
### GitHub API Integration
|
||||
|
||||
**Endpoints Used:**
|
||||
- **Latest Release**: `https://api.github.com/repos/catlog22/Claude-Code-Workflow/releases/latest`
|
||||
- Extracts: tag_name, release name, published date
|
||||
- **Latest Commit**: `https://api.github.com/repos/catlog22/Claude-Code-Workflow/commits/main`
|
||||
- Extracts: commit SHA, message, author date
|
||||
|
||||
**Network Handling:**
|
||||
- 30-second timeout for slow connections
|
||||
- Graceful error handling for offline scenarios
|
||||
- No external dependencies (uses curl and grep/sed)
|
||||
|
||||
## 🔄 What's Changed
|
||||
|
||||
### Documentation Updates
|
||||
|
||||
**Updated Files:**
|
||||
- ✅ `CHANGELOG.md` - Added comprehensive v3.2.3 release notes
|
||||
- ✅ `README.md` - Updated version badge to v3.2.3, added `/version` command
|
||||
- ✅ `README_CN.md` - Updated version badge and command reference (Chinese)
|
||||
- ✅ `.claude/commands/version.md` - Complete implementation guide
|
||||
|
||||
**Version References:**
|
||||
- All version badges updated from v3.2.2 to v3.2.3
|
||||
- "What's New" sections updated with v3.2.3 features
|
||||
- Command reference tables include `/version` command
|
||||
|
||||
### Installation Scripts Enhancement
|
||||
|
||||
**Future Enhancement** (for next release):
|
||||
- Installation scripts will automatically create `version.json` files
|
||||
- Track installation mode (local vs global)
|
||||
- Record installation timestamp
|
||||
- Support version tracking for both stable and development installations
|
||||
|
||||
## 📋 Version Comparison Scenarios
|
||||
|
||||
### Scenario 1: Up to Date
|
||||
```
|
||||
✅ You are on the latest stable version (3.2.3)
|
||||
```
|
||||
|
||||
### Scenario 2: Upgrade Available
|
||||
```
|
||||
⬆️ A newer stable version is available: v3.2.4
|
||||
Your version: 3.2.3
|
||||
|
||||
To upgrade:
|
||||
PowerShell: iex (iwr -useb https://raw.githubusercontent.com/catlog22/Claude-Code-Workflow/main/install-remote.ps1)
|
||||
Bash: bash <(curl -fsSL https://raw.githubusercontent.com/catlog22/Claude-Code-Workflow/main/install-remote.sh)
|
||||
```
|
||||
|
||||
### Scenario 3: Development Version
|
||||
```
|
||||
✨ You are running a development version (3.3.0-dev)
|
||||
This is newer than the latest stable release (v3.2.3)
|
||||
```
|
||||
|
||||
## 🛠️ Technical Details
|
||||
|
||||
### Implementation Highlights
|
||||
|
||||
**Simple Bash Commands:**
|
||||
- No jq dependency required (uses grep/sed for JSON parsing)
|
||||
- Cross-platform compatible (Windows Git Bash, Linux, macOS)
|
||||
- Version comparison using `sort -V` for semantic versioning
|
||||
- Direct API access using curl with error suppression
|
||||
|
||||
**Command Structure:**
|
||||
```bash
|
||||
# Check local version
|
||||
test -f ./.claude/version.json && cat ./.claude/version.json
|
||||
|
||||
# Check global version
|
||||
test -f ~/.claude/version.json && cat ~/.claude/version.json
|
||||
|
||||
# Fetch latest release (with timeout)
|
||||
curl -fsSL "https://api.github.com/repos/catlog22/Claude-Code-Workflow/releases/latest" 2>/dev/null
|
||||
|
||||
# Extract version
|
||||
grep -o '"tag_name": *"[^"]*"' | cut -d'"' -f4
|
||||
|
||||
# Compare versions
|
||||
printf "%s\n%s" "3.2.2" "3.2.3" | sort -V | tail -n 1
|
||||
```
|
||||
|
||||
## 📊 Benefits
|
||||
|
||||
### User Experience
|
||||
- 🔍 **Quick version check** with single command
|
||||
- 📊 **Comprehensive information** display (local, global, stable, dev)
|
||||
- 🔄 **Automatic upgrade notifications** when new versions available
|
||||
- 📈 **Development version tracking** for cutting-edge features
|
||||
- 🌐 **GitHub integration** for latest updates
|
||||
|
||||
### DevOps
|
||||
- 📁 **Version tracking** in both local and global installations
|
||||
- 🕐 **Installation timestamp** for audit trails
|
||||
- 🔀 **Support for both stable and development** branches
|
||||
- ⚡ **Fast execution** with 30-second network timeout
|
||||
- 🛡️ **Graceful error handling** for offline scenarios
|
||||
|
||||
## 🔗 Related Commands
|
||||
|
||||
- `/cli:cli-init` - Initialize CLI tool configurations
|
||||
- `/workflow:session:list` - List workflow sessions
|
||||
- `/update-memory-full` - Update project documentation
|
||||
|
||||
## 📦 Installation
|
||||
|
||||
### Fresh Installation
|
||||
|
||||
**Windows (PowerShell):**
|
||||
```powershell
|
||||
iex (iwr -useb https://raw.githubusercontent.com/catlog22/Claude-Code-Workflow/main/install-remote.ps1)
|
||||
```
|
||||
|
||||
**Linux/macOS (Bash):**
|
||||
```bash
|
||||
bash <(curl -fsSL https://raw.githubusercontent.com/catlog22/Claude-Code-Workflow/main/install-remote.sh)
|
||||
```
|
||||
|
||||
### Upgrade from v3.2.2
|
||||
|
||||
Use the same installation commands above. The installer will automatically:
|
||||
1. Detect your existing installation
|
||||
2. Back up current files (if using `-BackupAll`)
|
||||
3. Update to v3.2.3
|
||||
4. Create/update `version.json` files
|
||||
|
||||
## 🐛 Bug Fixes
|
||||
|
||||
- Fixed commit message extraction to handle JSON escape sequences
|
||||
- Improved API endpoint from `/branches/main` to `/commits/main` for reliable commit info
|
||||
- Added 30-second timeout to all network calls for slow connections
|
||||
- Enhanced release name and published date extraction
|
||||
|
||||
## 📚 Documentation
|
||||
|
||||
### New Documentation
|
||||
- `.claude/commands/version.md` - Complete command implementation guide
|
||||
- API endpoints and usage
|
||||
- Timeout configuration
|
||||
- Error handling scenarios
|
||||
- Simple bash command examples
|
||||
|
||||
### Updated Documentation
|
||||
- `CHANGELOG.md` - v3.2.3 release notes
|
||||
- `README.md` - Version badge and command reference
|
||||
- `README_CN.md` - Chinese version updates
|
||||
|
||||
## 🙏 Credits
|
||||
|
||||
This release includes contributions and improvements based on:
|
||||
- GitHub API integration for version detection
|
||||
- Cross-platform bash command compatibility
|
||||
- User feedback on installation and upgrade processes
|
||||
|
||||
## 📝 Notes
|
||||
|
||||
- **Backward Compatible**: All existing commands and workflows continue to work
|
||||
- **No Breaking Changes**: This is a minor release with new features only
|
||||
- **Optional Feature**: `/version` command is entirely optional, existing workflows unaffected
|
||||
|
||||
## 🚀 What's Next
|
||||
|
||||
**Planned for v3.2.4:**
|
||||
- Enhanced installation script to auto-create version.json
|
||||
- Version tracking in all installation modes
|
||||
- Automatic version detection during installation
|
||||
|
||||
**Future Enhancements:**
|
||||
- Auto-update functionality (opt-in)
|
||||
- Version comparison in workflow sessions
|
||||
- Release notes display in CLI
|
||||
|
||||
---
|
||||
|
||||
**Full Changelog**: [v3.2.2...v3.2.3](https://github.com/catlog22/Claude-Code-Workflow/compare/v3.2.2...v3.2.3)
|
||||
|
||||
**Installation:**
|
||||
```bash
|
||||
# One-line install (recommended)
|
||||
bash <(curl -fsSL https://raw.githubusercontent.com/catlog22/Claude-Code-Workflow/main/install-remote.sh)
|
||||
|
||||
# Or use specific version tag
|
||||
git clone -b v3.2.3 https://github.com/catlog22/Claude-Code-Workflow.git
|
||||
```
|
||||
|
||||
🤖 Generated with [Claude Code](https://claude.com/claude-code)
|
||||
Reference in New Issue
Block a user