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

refactor: v4.0.2 - Complete UI design workflow refactoring

Browse Source 
BREAKING CHANGES:
- Command paths: /workflow:design:* → /workflow:ui-design:*
- Removed --tool parameter from all commands
- Pure Claude execution, zero external tool dependencies

Major Changes:
- style-extract: Single-pass Claude analysis (1 file vs 4+)
- style-consolidate: Claude synthesis (no gemini-wrapper/codex)
- ui-generate: Unified agent-only execution
- File renames: style-extract.md → extract.md, etc.

Improvements:
- Zero external dependencies (no CLI tools)
- Faster execution, reduced I/O
- Enhanced reproducibility
- Streamlined data flow

Updated:
- CHANGELOG.md: Detailed v4.0.2 release notes
- README.md: Updated all UI design examples
- Command files: Complete rewrite for Claude-native execution

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
catlog22
2025-10-09 09:36:30 +08:00
parent 81e1d3e940
commit 28c93a0001
13 changed files with 1845 additions and 1719 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,451 +0,0 @@
---
name: auto
description: Orchestrate UI design refinement workflow with interactive checkpoints for user selection
usage: /workflow:design:auto [--prompt "<desc>"] [--images "<glob>"] [--pages "<list>"] [--session <id>] [--variants <count>] [--use-agent] [--batch-plan]
argument-hint: "[--prompt \"Modern SaaS\"] [--images \"refs/*.png\"] [--pages \"dashboard,auth\"] [--session WFS-xxx] [--variants 3] [--use-agent]"
examples:
- /workflow:design:auto --prompt "Modern blog with home, article and author pages, dark theme"
- /workflow:design:auto --prompt "SaaS dashboard and settings" --variants 3 --use-agent
- /workflow:design:auto --images "refs/*.png" --prompt "E-commerce site: home, product, cart"
- /workflow:design:auto --session WFS-auth --images "refs/*.png" --variants 2
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
**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
- `--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
**Page Inference Logic**:
1. If `--pages` provided: Use explicit list
2. Else if `--prompt` provided: Extract page names from prompt text
- Example: "dashboard and login page" → ["dashboard", "login"]
- Example: "Modern SaaS app" → ["home", "dashboard", "settings"]
3. Else if `--session` provided (integrated mode): Infer from synthesis-specification.md
4. Else: Default to ["home"]
## 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 0: Page Inference (if needed)
**Infer page list if not explicitly provided**:
```bash
IF --pages provided:
page_list = {explicit_pages}
ELSE IF --prompt provided:
# Extract page names from prompt using Claude analysis
page_list = extract_page_names_from_prompt({prompt_text})
# Examples:
# "dashboard and login page" → ["dashboard", "login"]
# "blog with home, article, author pages" → ["home", "article", "author"]
# "Modern SaaS app" → ["home", "dashboard", "settings"]
ELSE IF --session provided:
# Read synthesis-specification.md and extract page requirements
page_list = extract_pages_from_synthesis({session_id})
ELSE:
page_list = ["home"] # Default fallback
VALIDATE: page_list not empty
```
### 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

319
.claude/commands/workflow/design/style-consolidate.md
View File

@@ -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"
```

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

@@ -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]
```

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

@@ -1,554 +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 --variants 2
- /workflow:design:ui-generate --session WFS-auth --variants 3 --use-agent
- /workflow:design:ui-generate --pages "home,pricing,contact" --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}/"
# Infer page list if not provided
IF --pages provided:
page_list = {explicit_pages}
ELSE IF session_mode == "integrated":
# Read synthesis-specification.md to extract page requirements
page_list = extract_pages_from_synthesis({base_path}/.brainstorming/synthesis-specification.md)
ELSE:
# Infer from generated prototypes or default
page_list = detect_from_prototypes({base_path}/.design/prototypes/) OR ["home"]
VALIDATE: page_list not empty
# Set parameters
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"
```

289
.claude/commands/workflow/ui-design/auto.md Normal file
View File

@@ -0,0 +1,289 @@
---
name: auto
description: Fully autonomous UI design workflow with style extraction, consolidation, prototype generation, and design system integration
usage: /workflow:ui-design:auto [--prompt "<desc>"] [--images "<glob>"] [--pages "<list>"] [--session <id>] [--variants <count>] [--creative-variants <count>] [--batch-plan]
argument-hint: "[--prompt \"Modern SaaS\"] [--images \"refs/*.png\"] [--pages \"dashboard,auth\"] [--session WFS-xxx] [--variants 3] [--creative-variants 3]"
examples:
- /workflow:ui-design:auto --prompt "Modern blog with home, article and author pages, dark theme"
- /workflow:ui-design:auto --prompt "SaaS dashboard and settings" --variants 3 --creative-variants 3
- /workflow:ui-design:auto --images "refs/*.png" --prompt "E-commerce site: home, product, cart"
- /workflow:ui-design:auto --session WFS-auth --images "refs/*.png" --variants 2
allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), 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
- `--variants <count>`: Number of style variants (Phase 1) or UI variants (Phase 3, standard mode) to generate (default: 1, range: 1-5)
- `--creative-variants <count>`: Number of **parallel agents** to launch for creative UI generation (Phase 3 only). This enables Creative Mode for layout exploration
- `--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
### Standard Mode (Default)
- Executes all phases sequentially
- **Phase 1 (Style Extraction)**: Generates multiple style options using the `--variants` parameter in a single execution
- **Phase 3 (UI Generation)**: Generates multiple UI prototypes using the `--variants` parameter in a single execution
### Creative Mode (with `--creative-variants`)
- Triggered by the `--creative-variants` parameter for **Phase 3 (UI Generation) only**
- Launches multiple, parallel `Task(conceptual-planning-agent)` instances to explore diverse UI layouts
- Each agent generates a single prototype for a single page, resulting in `N pages * M creative-variants` total prototypes
- This mode is ideal for initial UI exploration where a wide range of layout ideas is desired
### Integrated vs. Standalone Mode
- `--session` flag determines if the workflow is integrated with a larger session or runs standalone
## 5-Phase Execution
### Phase 0: 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}\"" : ""
session_flag = --session present ? "--session {session_id}" : ""
# Phase 1 always runs sequentially, using --variants to generate multiple style options
# --creative-variants does not apply to this phase
variants_flag = --variants present ? "--variants {variants_count}" : "--variants 1"
command = "/workflow:ui-design:extract {session_flag} {images_flag} {prompt_flag} {variants_flag}"
SlashCommand(command=command)
```
**Auto-Continue**: On completion, proceeds to Phase 2
---
### Phase 2: Style Consolidation (Auto-Triggered)
**Action**: Consolidates all style variants generated in Phase 1
**Command Construction**:
```bash
session_flag = --session present ? "--session {session_id}" : ""
# The --variants flag will list ALL variants from Phase 1 (auto-select all)
variants_list = get_all_variant_ids_from_phase_1_output()
command = "/workflow:ui-design:consolidate {session_flag} --variants \"{variants_list}\""
```
**Command**: `SlashCommand(command=command)`
**Note**: In auto mode, ALL style variants are consolidated automatically without user selection
**Auto-Continue**: On completion, proceeds to Phase 3
---
### Phase 3: UI Generation (Auto-Triggered)
**Action**: Generates UI prototypes based on the consolidated design system
**Command Construction**:
```bash
session_flag = --session present ? "--session {session_id}" : ""
pages_flag = "--pages \"{inferred_page_list}\" "
IF --creative-variants provided:
# Creative Mode: Launch N agents × M pages in parallel for diverse layouts
command = "/workflow:ui-design:generate {session_flag} {pages_flag}--creative-variants {creative_variants_count}"
ELSE:
# Standard Mode: Single execution generating N variants for all pages
variants_flag = --variants present ? "--variants {variants_count}" : "--variants 1"
command = "/workflow:ui-design:generate {session_flag} {pages_flag}{variants_flag}"
```
**Command**: `SlashCommand(command=command)`
**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: Text Prompt Only (Standalone)
```bash
/workflow:ui-design:auto --prompt "Modern minimalist blog with home, article, and author pages"
# Executes:
# 1. /workflow:ui-design:extract --prompt "..." --variants 1
# 2. /workflow:ui-design:consolidate --variants "variant-1"
# 3. /workflow:ui-design:generate --pages "home,article,author" --variants 1
# 4. /workflow:ui-design:update
```
### Example 2: Images + Prompt + Session (Integrated)
```bash
/workflow:ui-design:auto --session WFS-ecommerce --images "refs/*.png" --prompt "E-commerce with minimalist aesthetic" --variants 3
# Executes:
# 1. /workflow:ui-design:extract --session WFS-ecommerce --images "refs/*.png" --prompt "..." --variants 3
# 2. /workflow:ui-design:consolidate --session WFS-ecommerce --variants "variant-1,variant-2,variant-3"
# 3. /workflow:ui-design:generate --session WFS-ecommerce --pages "{inferred_from_synthesis}" --variants 1
# 4. /workflow:ui-design:update --session WFS-ecommerce
```
### Example 3: Creative Mode with Batch Planning
```bash
/workflow:ui-design:auto --session WFS-saas --prompt "SaaS dashboard and settings" --variants 2 --creative-variants 4 --batch-plan
# Executes:
# 1. /workflow:ui-design:extract --session WFS-saas --prompt "..." --variants 2
# 2. /workflow:ui-design:consolidate --session WFS-saas --variants "variant-1,variant-2"
# 3. /workflow:ui-design:generate --session WFS-saas --pages "dashboard,settings" --creative-variants 4
# (launches 8 parallel agents: 2 pages × 4 creative variants)
# 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!
Session: {session_id or "standalone"}
Mode: {standard|creative}
Input: {images and/or prompt summary}
Phase 1 - Style Extraction: {variants_count} style variants
Phase 2 - Style Consolidation: Unified design system
Phase 3 - UI Generation: {total_prototypes} prototypes ({mode} mode)
Phase 4 - Design Update: Brainstorming artifacts updated
{IF batch-plan: Phase 5 - Task Generation: {task_count} implementation tasks created}
📂 Design System: {base_path}/.design/
📂 Prototypes: {base_path}/.design/prototypes/
🌐 Preview: Open {base_path}/.design/prototypes/index.html
{IF batch-plan:
📋 Implementation Tasks: .workflow/WFS-{session}/.task/
Next: /workflow:execute to begin implementation
}
{ELSE:
Next Steps:
1. Preview prototypes in browser
2. Select preferred designs
3. Run /workflow:plan to create implementation tasks
}
```

489
.claude/commands/workflow/ui-design/consolidate.md Normal file
View File

@@ -0,0 +1,489 @@
---
name: consolidate
description: Consolidate style variants into unified design system using Claude's synthesis
usage: /workflow:ui-design:consolidate --session <session_id> [--variants "<ids>"]
argument-hint: "--session WFS-session-id [--variants \"variant-1,variant-3\"]"
examples:
- /workflow:ui-design:consolidate --session WFS-auth --variants "variant-1,variant-2,variant-3"
- /workflow:ui-design:consolidate --session WFS-dashboard --variants "variant-1,variant-3"
allowed-tools: TodoWrite(*), Read(*), Write(*)
---
# 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: Session & Variant Loading
```bash
# Validate session and load style cards
IF --session:
session_id = {provided_session}
base_path = ".workflow/WFS-{session_id}/"
ELSE:
ERROR: "Must provide --session parameter"
# Verify extraction output exists
VERIFY: {base_path}/.design/style-extraction/style-cards.json exists
# Load style cards
style_cards = Read({base_path}/.design/style-extraction/style-cards.json)
```
### Phase 2: Variant Selection
```bash
# Parse variant selection
IF --variants provided:
variant_ids = parse_csv({--variants value})
VALIDATE: All variant_ids exist in style_cards.style_cards[]
ELSE:
# Auto-select all variants when called from /workflow:ui-design:auto
variant_ids = extract_all_ids(style_cards.style_cards)
# Extract selected variants
selected_variants = []
FOR each id IN variant_ids:
variant = find_variant_by_id(style_cards, id)
selected_variants.push(variant)
VERIFY: selected_variants.length > 0
```
### 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: Unified Design System Synthesis (Claude)
This is a single-pass synthesis that replaces all external tool calls.
**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
View 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 = "./{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

363
.claude/commands/workflow/ui-design/generate.md Normal file
View File

@@ -0,0 +1,363 @@
---
name: generate
description: Generate UI prototypes using consolidated design tokens
usage: /workflow:ui-design:generate [--pages "<list>"] [--session <id>] [--variants <count>] [--creative-variants <count>]
argument-hint: "[--pages \"dashboard,auth\"] [--session WFS-xxx] [--variants 3] [--creative-variants 3]"
examples:
- /workflow:ui-design:generate --pages "home,pricing" --variants 2
- /workflow:ui-design:generate --session WFS-auth --pages "dashboard" --creative-variants 4
- /workflow:ui-design:generate --session WFS-auth --variants 3
allowed-tools: TodoWrite(*), Read(*), Write(*), 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 Execution**: Standard (consistent) or Creative (exploratory)
- **Agent-Driven**: Uses `Task(conceptual-planning-agent)` exclusively
- **Token-Driven**: All styles reference design-tokens.json; no hardcoded values
- **Production-Ready**: Semantic HTML5, ARIA attributes, responsive design
## Execution Protocol
### Phase 1: Mode Detection & Context Loading
```bash
# Detect execution mode
IF --creative-variants provided:
mode = "creative" # Parallel agents for diverse layouts
creative_count = {--creative-variants value}
VALIDATE: 1 <= creative_count <= 10
ELSE:
mode = "standard" # Single agent, multiple variants
variants_count = --variants provided ? {count} : 1
VALIDATE: 1 <= variants_count <= 5
# 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}/"
# Infer page list if not provided
IF --pages provided:
page_list = {explicit_pages}
ELSE IF session_mode == "integrated":
# Read synthesis-specification.md to extract page requirements
synthesis_spec = Read({base_path}/.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}/.design/prototypes/) OR ["home"]
VALIDATE: page_list not empty
# Load design system
VERIFY: {base_path}/.design/style-consolidation/design-tokens.json exists
design_tokens = Read({base_path}/.design/style-consolidation/design-tokens.json)
style_guide = Read({base_path}/.design/style-consolidation/style-guide.md)
# Load requirements (if integrated mode)
IF session_mode == "integrated":
synthesis_spec = Read({base_path}/.brainstorming/synthesis-specification.md)
```
### Phase 2: UI Generation Execution
**Route based on mode**:
#### A. Standard Mode (Default)
Execute if `mode == "standard"`. Single agent generates multiple variants with consistent layout strategy.
```bash
# Create output directory
CREATE: {base_path}/.design/prototypes/
# Single agent call generates N variants for all pages
Task(conceptual-planning-agent): "
[UI_GENERATION]
Generate UI prototypes adhering to design tokens
## Context
SESSION: {session_id}
MODE: standard
PAGES: {page_list}
VARIANTS_PER_PAGE: {variants_count}
OUTPUT: {base_path}/.design/prototypes/
## Input Files
- Design Tokens: {base_path}/.design/style-consolidation/design-tokens.json
- Style Guide: {base_path}/.design/style-consolidation/style-guide.md
{IF integrated: - Requirements: {base_path}/.brainstorming/synthesis-specification.md}
## Task
For each page in [{page_list}], 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)
## Layout Strategy
Use a consistent, modern layout approach across all variants. Variants should differ in:
- Component arrangement (e.g., sidebar left vs. right)
- Content density (spacious vs. compact)
- Navigation style (top-nav vs. side-nav)
## Token Usage Requirements
- STRICT adherence to 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
- 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)
## Deliverables
For each page-variant combination:
1. HTML file with token-driven structure
2. CSS file with custom property references
3. Notes file with implementation details
Total files: {len(page_list) * variants_count * 3}
"
```
#### B. Creative Mode
Execute if `mode == "creative"`. Parallel agents explore diverse layout strategies.
```bash
# Define diverse layout strategies
layout_strategies = [
"F-Pattern: Traditional reading flow with strong visual hierarchy",
"Asymmetric Grid: Dynamic, modern layout with intentional imbalance",
"Card-Based Modular: Flexible card grid for content-heavy pages",
"Z-Pattern: Zigzag visual flow for conversion-focused layouts",
"Split-Screen: Dramatic 50/50 division for dual-focus content",
"Bento Box: Japanese-inspired grid with varied cell sizes",
"Full-Bleed Hero: Large hero section with scrolling content",
"Sidebar-First: Prominent sidebar navigation with content area"
]
# Launch N agents × M pages in parallel
CREATE: {base_path}/.design/prototypes/
FOR page IN page_list:
FOR i IN range(creative_count):
layout = layout_strategies[i % len(layout_strategies)]
Task(conceptual-planning-agent): "
[UI_GENERATION_CREATIVE]
Generate creative UI prototype: {page} (Variant {i+1})
## Context
PAGE: {page}
LAYOUT_STRATEGY: {layout}
VARIANT_NUMBER: {i+1}
OUTPUT: {base_path}/.design/prototypes/
## Input Files
- Design Tokens: {base_path}/.design/style-consolidation/design-tokens.json
- Style Guide: {base_path}/.design/style-consolidation/style-guide.md
{IF integrated: - Requirements: {base_path}/.brainstorming/synthesis-specification.md}
## Task
Generate a single prototype for {page} using '{layout}' layout:
- {page}-creative-variant-{i+1}.html
- {page}-creative-variant-{i+1}.css
- {page}-creative-variant-{i+1}-notes.md
## Layout Focus
This variant MUST follow '{layout}' layout strategy.
Be bold and exploratory - this is for design exploration.
## Token Usage Requirements (STRICT)
- All colors: var(--color-*) from design-tokens.json
- All spacing: var(--spacing-*) from design-tokens.json
- All typography: var(--font-*) from design-tokens.json
- NO hardcoded values allowed
## HTML/CSS/Accessibility Requirements
- Semantic HTML5 with ARIA attributes
- Mobile-first responsive design
- Token-driven styling only
- Unique layout interpretation of '{layout}' strategy
## Deliverables
1. HTML file embodying '{layout}' layout
2. CSS file with strict token usage
3. Notes explaining layout decisions
"
# Wait for all {len(page_list) * creative_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
Write({base_path}/.design/prototypes/design-tokens.css) # CSS custom properties
```
**index.html Template**:
```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 - {session_id}</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; }
</style>
</head>
<body>
<h1>🎨 UI Prototypes Preview</h1>
<p><strong>Session:</strong> {session_id} | <strong>Mode:</strong> {mode}</p>
<p><a href="compare.html">📊 Compare Variants</a> | <a href="PREVIEW.md">📖 Instructions</a></p>
<div class="prototype-grid">
{FOR each generated file:
<div class="prototype-card">
<h3>{page} - Variant {n}</h3>
<div class="meta">{mode} mode</div>
<a href="{filename}.html" target="_blank">View →</a>
<a href="{filename}-notes.md">Notes</a>
</div>
}
</div>
</body>
</html>
```
**design-tokens.css Template**:
```css
/* Auto-generated from design-tokens.json */
:root {
/* Colors - Brand */
--color-brand-primary: {value};
--color-brand-secondary: {value};
--color-brand-accent: {value};
/* Colors - Surface */
--color-surface-background: {value};
--color-surface-elevated: {value};
--color-surface-overlay: {value};
/* Typography */
--font-family-heading: {value};
--font-family-body: {value};
--font-size-base: {value};
/* ... all tokens as CSS custom properties ... */
}
```
### Phase 4: TodoWrite & Completion
```javascript
TodoWrite({
todos: [
{content: "Detect mode and load design system", status: "completed", activeForm: "Loading design system"},
{content: "Generate {total_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}
{IF standard: Variants per page: {variants_count}}
{IF creative: Creative variants per page: {creative_count}}
Generated {total_count} prototypes:
{FOR each file: - {filename}}
📂 Location: {base_path}/.design/prototypes/
🌐 Preview:
1. Quick: Open index.html in browser
2. Server: cd prototypes && python -m http.server 8080
3. Compare: Open compare.html for side-by-side view
Next: /workflow:ui-design:update --session {session_id}
Note: When called from /workflow:ui-design:auto, design-update is triggered automatically.
```
## Output Structure
```
.workflow/WFS-{session}/.design/prototypes/
├── index.html # Preview index (master navigation)
├── compare.html # Side-by-side comparison
├── PREVIEW.md # Preview instructions
├── design-tokens.css # CSS custom properties
├── {page}-variant-{n}.html
├── {page}-variant-{n}.css
├── {page}-variant-{n}-notes.md
└── ... (all generated prototypes)
```
## Error Handling
- **No design tokens found**: Run `/workflow:ui-design:consolidate` first
- **Invalid page names**: Extract from synthesis-specification.md or error
- **Agent execution errors**: Report details, suggest retry
- **Missing requirements**: Continue with design tokens only
## 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
## Key Improvements Over Previous Version
1. **Unified Execution Model**: Only `Task(conceptual-planning-agent)` - no CLI tools
2. **Dual-Mode Simplicity**: Standard (consistent) or Creative (exploratory)
3. **Explicit Layout Strategies**: Creative mode uses predefined layout patterns
4. **Preview Enhancements**: index.html, compare.html, and design-tokens.css
5. **Streamlined**: Clear, consistent agent invocation patterns
## Integration Points
- **Input**: design-tokens.json, style-guide.md from `/workflow:ui-design:consolidate`
- **Output**: HTML/CSS prototypes for `/workflow:ui-design:update`
- **Context**: synthesis-specification.md for page requirements and content guidance

18
.claude/commands/workflow/design/design-update.md → .claude/commands/workflow/ui-design/update.md
View File

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

311
CHANGELOG.md
View File

@@ -5,6 +5,221 @@ 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
@@ -21,15 +236,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
**New Examples**:
```bash
# Simplest - pages inferred from prompt
/workflow:design:auto --prompt "Modern blog with home, article and author pages"
/workflow:ui-design:auto --prompt "Modern blog with home, article and author pages"
# Explicit override if needed
/workflow:design:auto --prompt "SaaS app" --pages "dashboard,settings,billing"
/workflow:ui-design:auto --prompt "SaaS app" --pages "dashboard,settings,billing"
```
**Commands Updated**:
- `/workflow:design:auto`: All parameters now optional
- `/workflow:design:ui-generate`: `--pages` optional with smart inference
- `/workflow:ui-design:auto`: All parameters now optional
- `/workflow:ui-design:ui-generate`: `--pages` optional with smart inference
## [4.0.0] - 2025-10-07
@@ -52,18 +267,18 @@ This major release introduces agent-driven creative exploration, unified variant
**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.1) - All parameters optional
/workflow:design:style-extract --images "design-refs/*.png" --variants 3
/workflow:design:ui-generate --variants 2
/workflow:ui-design:style-extract --images "design-refs/*.png" --variants 3
/workflow:ui-design:ui-generate --variants 2
# ✅ Simplest form (pages inferred from prompt)
/workflow:design:auto --prompt "Modern blog with home, article and author pages"
/workflow:ui-design:auto --prompt "Modern blog with home, article and author pages"
# ✅ With agent mode and explicit pages
/workflow:design:auto --prompt "Modern SaaS" --pages "dashboard,settings" --variants 3 --use-agent
/workflow:ui-design:auto --prompt "Modern SaaS" --pages "dashboard,settings" --variants 3 --use-agent
```
**Deprecated Commands**:
@@ -112,23 +327,23 @@ This major release introduces agent-driven creative exploration, unified variant
#### Changed
**New Command Interface** (v4.0.1):
- **`/workflow:design:auto`**:
- **`/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 --prompt "Modern blog with home and article pages"`
- Agent Mode: `/workflow:design:auto --prompt "SaaS dashboard and settings" --variants 3 --use-agent`
- Hybrid: `/workflow:design:auto --images "refs/*.png" --prompt "E-commerce: home, product, cart"`
- 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`**:
- **`/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`**:
- **`/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)
@@ -138,19 +353,19 @@ This major release introduces agent-driven creative exploration, unified variant
**Standalone Quick Prototyping**:
```bash
# Pure text with page inference (simplest)
/workflow:design:auto --prompt "Modern minimalist blog with home, article and author pages, dark theme" --use-agent
/workflow:ui-design:auto --prompt "Modern minimalist blog with home, article and author pages, dark theme" --use-agent
# Pure image with inferred pages
/workflow:design:auto --images "refs/*.png" --variants 2
/workflow:ui-design:auto --images "refs/*.png" --variants 2
# Hybrid input with explicit page override
/workflow:design:auto --images "current-app.png" --prompt "Modernize to Linear.app style" --pages "tasks,settings" --use-agent
/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 (pages inferred from synthesis)
/workflow:design:auto --session WFS-app-refresh --images "refs/*.png" --variants 3 --use-agent
/workflow:ui-design:auto --session WFS-app-refresh --images "refs/*.png" --variants 3 --use-agent
```
#### Technical Details
@@ -205,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
@@ -226,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)
@@ -241,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
@@ -256,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
@@ -275,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
@@ -289,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
@@ -306,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**:
@@ -384,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
@@ -425,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)
```

96
README.md
View File

@@ -253,16 +253,16 @@ MCP (Model Context Protocol) tools provide advanced codebase analysis. **Recomme
**Phase 2: UI Design Refinement** *(Optional for UI-heavy projects)*
```bash
# Simplest - pages inferred from prompt (v4.0.1+)
/workflow:design:auto --prompt "Modern blog with home, article and author pages, dark theme" --use-agent
# 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:design:auto --session WFS-auth --images "refs/*.png" --variants 3 --use-agent
/workflow:ui-design:auto --session WFS-auth --images "refs/*.png" --variants 3
# Or run individual design phases
/workflow:design:style-extract --images "refs/*.png" --variants 3 --use-agent
/workflow:design:style-consolidate --variants "variant-1,variant-3"
/workflow:design:ui-generate --variants 2 --use-agent
/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
@@ -270,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**
@@ -364,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` | **v4.0** UI design workflow with intelligent page inference and agent creative mode. All parameters optional. |
| `/workflow:design:style-extract` | **v4.0** Extract design from images/text using triple vision or agent mode. Parallel variant generation. |
| `/workflow:design:style-consolidate` | **v4.0** Consolidate selected style variants into validated design tokens and style guide. |
| `/workflow:design:ui-generate` | **v4.0** Generate token-driven HTML/CSS prototypes with agent mode for diverse layouts. |
| `/workflow:design:design-update` | **v4.0** 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. |
@@ -380,72 +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:*`)** *(v4.0.1)*
### **UI Design Workflow Commands (`/workflow:ui-design:*`)** *(v4.0.2)*
The design workflow system provides complete UI design refinement with **intelligent page inference**, **agent creative mode**, and **flexible input sources**.
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
# Simplest - pages auto-inferred from prompt (v4.0.1+)
/workflow:design:auto --prompt "Modern blog with home, article and author pages, dark theme"
# Simplest - pages auto-inferred from prompt (v4.0.2)
/workflow:ui-design:auto --prompt "Modern blog with home, article and author pages, dark theme"
# Agent mode for creative exploration
/workflow:design:auto --prompt "SaaS dashboard and settings" --variants 3 --use-agent
# Multiple style variants
/workflow:ui-design:auto --prompt "SaaS dashboard and settings" --variants 3
# Hybrid: images + text prompt
/workflow:design:auto --images "refs/*.png" --prompt "E-commerce: home, product, cart" --use-agent
/workflow:ui-design:auto --images "refs/*.png" --prompt "E-commerce: home, product, cart"
# Integrated with session
/workflow:design:auto --session WFS-auth --images "refs/*.png" --variants 3 --use-agent
# Integrated with session + creative mode
/workflow:ui-design:auto --session WFS-auth --images "refs/*.png" --variants 2 --creative-variants 3
```
- **🆕 All Parameters Optional**: Smart defaults and inference for everything
- **🆕 Page Inference**: Auto-extract pages from `--prompt` text
- **🆕 Agent Mode**: `--use-agent` enables parallel creative exploration
- **🆕 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:design:style-extract`** - Style analysis with dual input sources
**`/workflow:ui-design:extract`** - Style analysis with dual input sources
```bash
# Pure text prompt (NEW)
/workflow:design:style-extract --prompt "Modern minimalist, dark theme" --variants 3 --use-agent
# Pure text prompt
/workflow:ui-design:extract --prompt "Modern minimalist, dark theme" --variants 3
# Pure images
/workflow:design:style-extract --images "refs/*.png" --variants 3
/workflow:ui-design:extract --images "refs/*.png" --variants 3
# Hybrid (text guides image analysis)
/workflow:design:style-extract --images "refs/*.png" --prompt "Linear.app style" --variants 2 --use-agent
/workflow:ui-design:extract --images "refs/*.png" --prompt "Linear.app style" --variants 2
```
- **🆕 Text Prompts**: Design without reference images
- **🆕 Agent Mode**: Parallel generation of diverse design directions
- **Vision Sources**: Claude Code + Gemini + Codex (conventional) or Agent-driven (creative)
- **Output**: N style variant cards (default: 3, range: 1-5)
- **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:design:style-consolidate`** - Validate and merge tokens
**`/workflow:ui-design:consolidate`** - Validate and merge tokens
```bash
# Consolidate selected style variants
/workflow:design:style-consolidate --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
# Simplest - pages inferred (NEW)
/workflow:design:ui-generate --variants 2 --use-agent
# Standard mode (consistent layouts)
/workflow:ui-design:generate --pages "dashboard,auth" --variants 2
# Explicit pages
/workflow:design:ui-generate --pages "home,product,cart" --variants 3 --use-agent
# 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 Mode**: Diverse layout strategies (F-Pattern, Grid, Asymmetric)
- **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`
- **Features**: Token-driven CSS, semantic HTML5, ARIA attributes
**`/workflow:design:design-update`** - Integrate design system
**`/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"
/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
View File

@@ -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`
- **使设计令牌可用于任务生成**

33
tailwind-tokens.js Normal file
View File

@@ -0,0 +1,33 @@
const tokens = require("./design-tokens.json");
function toFontArray(fontList) {
return String(fontList)
.split(",")
.map((s) => s.trim())
.filter(Boolean);
}
function buildTailwindTheme(variantId = "variant-1") {
const v = tokens.variants[variantId];
if (!v) throw new Error(`Unknown variant: ${variantId}`);
const colors = { ...v.colors };
const spacing = { ...v.spacing };
const borderRadius = { ...v.radii };
const fontFamily = {
heading: toFontArray(v.typography.fonts.heading),
sans: toFontArray(v.typography.fonts.body),
mono: toFontArray(v.typography.fonts.mono)
};
const boxShadow = {
soft: v.effects.shadow_soft,
raised: v.effects.shadow_raised
};
return {
theme: {
extend: { colors, spacing, borderRadius, fontFamily, boxShadow }
}
};
}
module.exports = { buildTailwindTheme, tokens };