diff --git a/.claude/commands/workflow/ui-design/CHANGELOG-v4.1.0.md b/.claude/commands/workflow/ui-design/CHANGELOG-v4.1.0.md new file mode 100644 index 00000000..ccc3b0a0 --- /dev/null +++ b/.claude/commands/workflow/ui-design/CHANGELOG-v4.1.0.md @@ -0,0 +1,302 @@ +# UI Design Workflow v4.1.0 - 纯矩阵模式 + 路径修正 + +## 📋 发布日期 +2025-10-09 + +## 🎯 核心变更 + +### 1. 矩阵模式成为唯一模式 +- ❌ 移除 standard/creative 模式选择 +- ✅ 3×3 矩阵生成为默认且唯一模式 +- ✅ 直接支持 `--style-variants` 和 `--layout-variants` 参数 + +### 2. 路径符合workflow架构 +- ✅ 有session: `.workflow/WFS-{session_id}/runs/run-xxx/` +- ✅ 无session: `.workflow/.scratchpad/{session_id}/runs/run-xxx/` +- ✅ 模板移至全局: `~/.claude/workflows/_template-compare-matrix.html` + +--- + +## 📝 文件修改清单 + +### 核心命令文件 + +| 文件 | 主要变更 | 状态 | +|------|---------|------| +| **auto.md** | 删除模式选择，简化Phase 3，修正路径 | ✅ 已完成 | +| **generate.md** | 完全重构为矩阵模式，集成模板 | ✅ 已完成 | +| **consolidate.md** | 修正standalone路径 | ✅ 已完成 | +| **extract.md** | 修正standalone路径 | ✅ 已完成 | +| **update.md** | 仅session模式，无需修改 | ✅ 保持不变 | + +### 新增文件 +- ✅ `~/.claude/workflows/_template-compare-matrix.html` - 交互式矩阵可视化模板 + +--- + +## 🔄 参数变更 + +### 旧参数（废弃） +```bash +--variants # 统一变种数 +--creative-variants # 创意变种数 +--matrix-mode # 模式标志 +``` + +### 新参数（v4.1.0） +```bash +--style-variants # 风格变种数（默认3） +--layout-variants # 布局变种数（默认3） +# 矩阵为默认模式，无需标志 +``` + +--- + +## 🚀 工作流对比 + +### v4.0.x（旧版） +```bash +/workflow:ui-design:auto --variants 3 --creative-variants 4 + +# 问题: +# - 参数混淆（variants vs creative-variants） +# - 模式选择复杂 +# - standalone输出到项目根目录 +``` + +### v4.1.0（新版） +```bash +/workflow:ui-design:auto --style-variants 3 --layout-variants 3 + +# 优势: +# - 参数语义清晰 +# - 唯一矩阵模式 +# - 输出到 .workflow/.scratchpad/ +# - 总计: 3×3×N 个原型 +``` + +--- + +## 📊 路径架构 + +### Standalone模式（无session） +``` +.workflow/.scratchpad/ +└── design-session-20251009-101530/ + └── runs/ + ├── run-20251009-101530/ + │ └── .design/ + │ ├── style-extraction/style-cards.json + │ ├── style-consolidation/ + │ │ ├── style-1/design-tokens.json + │ │ ├── style-2/design-tokens.json + │ │ └── style-3/design-tokens.json + │ └── prototypes/ + │ ├── compare.html (交互式3×3矩阵) + │ ├── index.html + │ └── {page}-style-{s}-layout-{l}.html + └── latest -> run-20251009-101530/ +``` + +### 集成模式（有session） +``` +.workflow/WFS-auth-system/ +├── workflow-session.json +├── IMPL_PLAN.md +├── .brainstorming/synthesis-specification.md +└── runs/ + ├── run-20251009-101530/ + │ └── .design/ (同上) + └── latest -> run-20251009-101530/ +``` + +--- + +## 🔧 核心改进 + +### 1. 简化架构 +- **auto.md Phase 3**: 从复杂并行Task循环简化为单一命令 +```bash +# 旧方式（30+行） +FOR style_id IN range(...): + Task(conceptual-planning-agent): "..." + +# 新方式（3行） +command = "/workflow:ui-design:generate --style-variants {s} --layout-variants {l}" +SlashCommand(command=command) +``` + +### 2. 路径规范化 +```bash +# auto.md - Phase 0b +IF --session: + base_path = ".workflow/WFS-{session_id}/runs/${run_id}" +ELSE: + base_path = ".workflow/.scratchpad/${session_id}/runs/${run_id}" + +# generate/consolidate/extract +base_path = find_latest_design_session(".workflow/.scratchpad/") +``` + +### 3. 可视化增强 +- 集成高级 `_template-compare-matrix.html` 模板 +- 3×3 网格矩阵视图 +- 同步滚动 + 缩放控制 +- 全屏模式 + 选择导出 + +--- + +## ⚠️ 破坏性变更 + +### 1. 参数废弃 +```bash +# ❌ 不再支持 +--variants +--creative-variants + +# ✅ 必须使用 +--style-variants +--layout-variants +``` + +### 2. 文件命名强制统一 +```bash +# ❌ 旧格式不再生成 +{page}-variant-{n}.html +{page}-creative-variant-{n}.html + +# ✅ 强制新格式 +{page}-style-{s}-layout-{l}.html +``` + +### 3. Standalone路径变更 +```bash +# ❌ v4.0.x +./design-session-xxx/ (项目根目录) + +# ✅ v4.1.0 +.workflow/.scratchpad/design-session-xxx/ +``` + +--- + +## 📖 迁移指南 + +### 从 v4.0.x 迁移 + +#### 1. 更新命令参数 +```bash +# 旧方式 +/workflow:ui-design:auto --variants 3 --creative-variants 4 + +# 新方式 +/workflow:ui-design:auto --style-variants 3 --layout-variants 4 + +# 或依赖智能解析 +/workflow:ui-design:auto --prompt "Generate 3 styles with 4 layouts" +``` + +#### 2. 更新路径引用 +```bash +# 旧standalone输出 +./design-session-xxx/ + +# 新standalone输出 +.workflow/.scratchpad/design-session-xxx/ + +# 迁移建议: 手动移动旧目录或保留为历史 +mv ./design-session-* .workflow/.scratchpad/ +``` + +#### 3. 预览文件 +```bash +# 保持不变 +{base_path}/.design/prototypes/compare.html +{base_path}/.design/prototypes/index.html +``` + +--- + +## ✅ 向后兼容性 + +### 完全兼容 +- ✅ `--session` 参数 +- ✅ `--pages` 参数 +- ✅ `--prompt` 参数 +- ✅ `--images` 参数 +- ✅ `--batch-plan` 标志 +- ✅ 智能prompt解析 + +### 不兼容 +- ❌ standard/creative 模式选择 +- ❌ 旧参数 `--variants`, `--creative-variants` +- ❌ 旧文件命名格式 + +--- + +## 🧪 测试清单 + +### 功能测试 +- [ ] 默认3×3矩阵生成 +- [ ] 自定义矩阵（2×2, 4×3等） +- [ ] 智能prompt解析 +- [ ] 文件命名正确性 +- [ ] compare.html 可视化 + +### 路径测试 +- [ ] Standalone输出到 `.scratchpad` +- [ ] Session输出到 `WFS-{id}` +- [ ] latest symlink正确 +- [ ] 跨命令路径传递 + +### 集成测试 +- [ ] auto → extract → consolidate → generate → update +- [ ] 模板正确加载 +- [ ] 设计token引用正确 + +--- + +## 📚 相关文档 + +- **workflow-architecture.md**: Workflow系统架构标准 +- **_run-manager.md**: Run-based文件管理文档（如果需要） +- **~/.claude/workflows/_template-compare-matrix.html**: 可视化模板 + +--- + +## 🔮 未来增强 + +### 计划中 +- [ ] 自定义布局策略（覆盖默认 Classic/Modern/Minimal） +- [ ] compare.html 运行历史对比 +- [ ] Scratchpad自动清理策略 +- [ ] Session升级工作流（scratchpad → WFS） + +### 待讨论 +- [ ] 非矩形矩阵支持（2×3） +- [ ] 恢复 creative 模式（可选） +- [ ] 更多布局变种（>5） + +--- + +## 📝 总结 + +**v4.1.0 核心价值**: +1. **极简哲学**: 移除模式选择，矩阵为唯一模式 +2. **清晰参数**: `--style-variants` 和 `--layout-variants` 语义明确 +3. **架构规范**: 严格遵循 workflow-architecture.md 标准 +4. **集中管理**: 所有输出在 `.workflow/` 下 +5. **可视化增强**: 高级交互式矩阵界面 + +**升级理由**: +- ✅ 系统化设计探索（风格×布局矩阵） +- ✅ 简化工作流、减少参数困惑 +- ✅ 符合workflow架构标准 +- ✅ 避免项目根目录污染 + +--- + +**发布者**: Claude Code +**版本**: v4.1.0 +**类型**: Major Refactoring + Path Corrections +**日期**: 2025-10-09 diff --git a/.claude/commands/workflow/ui-design/auto.md b/.claude/commands/workflow/ui-design/auto.md index 3ba3b828..167d98bd 100644 --- a/.claude/commands/workflow/ui-design/auto.md +++ b/.claude/commands/workflow/ui-design/auto.md @@ -1,14 +1,14 @@ --- name: auto -description: Fully autonomous UI design workflow with style extraction, consolidation, prototype generation, and design system integration -usage: /workflow:ui-design:auto [--prompt ""] [--images ""] [--pages ""] [--session ] [--variants ] [--creative-variants ] [--batch-plan] -argument-hint: "[--prompt \"Modern SaaS\"] [--images \"refs/*.png\"] [--pages \"dashboard,auth\"] [--session WFS-xxx] [--variants 3] [--creative-variants 3]" +description: Fully autonomous UI design workflow with style extraction, consolidation, prototype generation (3×3 matrix), and design system integration +usage: /workflow:ui-design:auto [--prompt ""] [--images ""] [--pages ""] [--session ] [--style-variants ] [--layout-variants ] [--batch-plan] +argument-hint: "[--prompt \"Modern SaaS with 3 styles\"] [--images \"refs/*.png\"] [--pages \"dashboard,auth\"] [--session WFS-xxx] [--style-variants 3] [--layout-variants 3]" examples: - - /workflow:ui-design:auto --prompt "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) + - /workflow:ui-design:auto --prompt "Generate 3 style variants for modern blog: home, article, author" + - /workflow:ui-design:auto --prompt "SaaS dashboard and settings with 2 layout options" + - /workflow:ui-design:auto --images "refs/*.png" --prompt "E-commerce: home, product, cart" --style-variants 3 --layout-variants 3 + - /workflow:ui-design:auto --session WFS-auth --images "refs/*.png" +allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*), Task(conceptual-planning-agent) --- # UI Design Auto Workflow Command @@ -50,34 +50,114 @@ This workflow runs **fully autonomously** from start to finish: - `--pages ""`: Pages to generate (if omitted, inferred from prompt/session) - `--session `: Workflow session ID (if omitted, runs in standalone mode) - `--images ""`: Reference image paths (default: `design-refs/*`) -- `--prompt ""`: Text description of design style and pages -- `--variants `: Number of style variants (Phase 1) or UI variants (Phase 3, standard mode) to generate (default: 1, range: 1-5) -- `--creative-variants `: Number of **parallel agents** to launch for creative UI generation (Phase 3 only). This enables Creative Mode for layout exploration +- `--prompt ""`: Text description of design style and pages (supports intelligent parsing) +- `--style-variants `: Number of style variants to generate (default: inferred from prompt or 3, range: 1-5) +- `--layout-variants `: Number of layout variants per style (default: inferred from prompt or 3, range: 1-5) - `--batch-plan`: Auto-generate implementation tasks after design-update (integrated mode only) **Input Source Rules**: - Must provide at least one of: `--images` or `--prompt` - Both can be combined for guided style analysis +**Intelligent Prompt Parsing**: +The workflow extracts variant counts from natural language: +- "Generate **3 style variants**" → `--style-variants 3` +- "**2 layout options**" → `--layout-variants 2` +- "Create **4 styles** with **2 layouts each**" → `--style-variants 4 --layout-variants 2` +- Explicit flags override prompt inference + ## Execution Modes -### 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 +### Matrix Mode (Default and Only) +- Generates `style_variants × layout_variants × pages` prototypes in 3×3 matrix pattern +- **Phase 1 (Style Extraction)**: Generates `style_variants` style options +- **Phase 2 (Style Consolidation)**: Creates `style_variants` independent design systems +- **Phase 3 (Matrix Generation)**: Generates `style_variants × layout_variants` prototypes per page +- This is the only supported mode - focused on systematic design exploration ### Integrated vs. Standalone Mode - `--session` flag determines if the workflow is integrated with a larger session or runs standalone -## 5-Phase Execution +## 6-Phase Execution -### Phase 0: Page Inference +### Phase 0a: Intelligent Prompt Parsing +```bash +# Extract variant counts from prompt if not explicitly provided +IF --prompt provided AND (NOT --style-variants OR NOT --layout-variants): + prompt_text = {--prompt value} + + # Parse style variants: "3 style variants", "generate 4 styles", etc. + style_match = regex_search(prompt_text, r"(\d+)\s*(style\s*variants?|styles?)") + IF style_match AND NOT --style-variants: + style_variants = int(style_match.group(1)) + ELSE: + style_variants = --style-variants OR 3 # Default to 3 + + # Parse layout variants: "2 layout options", "3 layouts each", etc. + layout_match = regex_search(prompt_text, r"(\d+)\s*(layout\s*(variants?|options?)|layouts?)") + IF layout_match AND NOT --layout-variants: + layout_variants = int(layout_match.group(1)) + ELSE: + layout_variants = --layout-variants OR 3 # Default to 3 +ELSE: + style_variants = --style-variants OR 3 + layout_variants = --layout-variants OR 3 + +VALIDATE: 1 <= style_variants <= 5 +VALIDATE: 1 <= layout_variants <= 5 + +STORE: style_variants, layout_variants # For Phase 1 and Phase 3 +``` + +### Phase 0b: Run Initialization & Directory Setup +```bash +# Generate run ID with timestamp +run_id = "run-$(date +%Y%m%d-%H%M%S)" + +# Determine base path +IF --session: + session_id = {provided_session} + base_path = ".workflow/WFS-{session_id}/runs/${run_id}" +ELSE: + # Standalone mode: use scratchpad + session_id = "design-session-$(date +%Y%m%d-%H%M%S)" + base_path = ".workflow/.scratchpad/${session_id}/runs/${run_id}" + +# Create run directory structure +Bash(mkdir -p "${base_path}/.design/style-extraction") +Bash(mkdir -p "${base_path}/.design/style-consolidation") +Bash(mkdir -p "${base_path}/.design/prototypes") + +# Initialize run metadata +Write({base_path}/.run-metadata.json): +{ + "run_id": "${run_id}", + "session_id": "${session_id}", + "timestamp": "$(date -u +%Y-%m-%dT%H:%M:%SZ)", + "workflow": "ui-design:auto", + "parameters": { + "style_variants": ${style_variants}, + "layout_variants": ${layout_variants}, + "pages": "${inferred_page_list}", + "prompt": "${prompt_text}", + "images": "${images_pattern}" + }, + "status": "in_progress" +} + +# Update "latest" symlink +IF --session: + Bash(rm -f ".workflow/WFS-{session_id}/latest") + Bash(ln -s "runs/${run_id}" ".workflow/WFS-{session_id}/latest") +ELSE: + # Standalone mode: create symlink in scratchpad session dir + Bash(rm -f ".workflow/.scratchpad/${session_id}/latest") + Bash(ln -s "runs/${run_id}" ".workflow/.scratchpad/${session_id}/latest") + +STORE: run_id, base_path # Use throughout workflow +``` + +### Phase 0c: Page Inference ```bash # Infer page list if not explicitly provided IF --pages provided: @@ -99,52 +179,57 @@ STORE: inferred_page_list = page_list # For Phase 3 ```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}" +# Use run-scoped base path +run_base_flag = "--base-path \"{base_path}/.design\"" + +# Use style_variants from Phase 0a +command = "/workflow:ui-design:extract {run_base_flag} {images_flag} {prompt_flag} --variants {style_variants}" SlashCommand(command=command) ``` **Auto-Continue**: On completion, proceeds to Phase 2 --- -### Phase 2: Style Consolidation (Auto-Triggered) -**Action**: Consolidates all style variants generated in Phase 1 +### Phase 2: Style Consolidation with Separation (Auto-Triggered) +**Action**: Consolidates each style variant into separate design systems for matrix generation **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() +# Use run-scoped base path and keep styles separate +run_base_flag = "--base-path \"{base_path}/.design\"" -command = "/workflow:ui-design:consolidate {session_flag} --variants \"{variants_list}\"" +# Use count-based parameter (automatically uses all style_variants) +command = "/workflow:ui-design:consolidate {run_base_flag} --variants {style_variants} --keep-separate" ``` **Command**: `SlashCommand(command=command)` -**Note**: In auto mode, ALL style variants are consolidated automatically without user selection +**Result**: Generates `style_variants` independent design systems: +- `.design/style-consolidation/style-1/design-tokens.json` +- `.design/style-consolidation/style-2/design-tokens.json` +- `.design/style-consolidation/style-3/design-tokens.json` + **Auto-Continue**: On completion, proceeds to Phase 3 --- -### Phase 3: UI Generation (Auto-Triggered) -**Action**: Generates UI prototypes based on the consolidated design system +### Phase 3: Matrix UI Generation (Auto-Triggered) +**Action**: Generates `style_variants × layout_variants × pages` prototypes using matrix mode **Command Construction**: ```bash -session_flag = --session present ? "--session {session_id}" : "" -pages_flag = "--pages \"{inferred_page_list}\" " +run_base_flag = "--base-path \"{base_path}/.design\"" +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}" +# Matrix mode is default in generate.md, no mode flag needed +command = "/workflow:ui-design:generate {run_base_flag} {pages_flag} --style-variants {style_variants} --layout-variants {layout_variants}" +SlashCommand(command=command) ``` -**Command**: `SlashCommand(command=command)` + +**Result**: Generates `style_variants × layout_variants × pages` prototypes: +- File naming: `{page}-style-{s}-layout-{l}.html` +- Total prototypes: `style_variants * layout_variants * len(inferred_page_list)` +- Matrix visualization: `compare.html` with interactive 3×3 grid + **Auto-Continue**: On completion, proceeds to Phase 4 --- @@ -221,37 +306,41 @@ The workflow acts as the bridge between brainstorming (`synthesis-specification. ## Example Execution Flows -### Example 1: Text Prompt Only (Standalone) +### Example 1: Default 3×3 Matrix (Prompt Inference) ```bash /workflow:ui-design:auto --prompt "Modern minimalist blog with home, article, and author pages" +# Inferred: 3 style variants, 3 layout variants (default) # Executes: -# 1. /workflow:ui-design:extract --prompt "..." --variants 1 -# 2. /workflow:ui-design:consolidate --variants "variant-1" -# 3. /workflow:ui-design:generate --pages "home,article,author" --variants 1 +# 1. /workflow:ui-design:extract --base-path ".../run-xxx/.design" --prompt "..." --variants 3 +# 2. /workflow:ui-design:consolidate --base-path ".../run-xxx/.design" --variants 3 --keep-separate +# 3. /workflow:ui-design:generate --base-path ".../run-xxx/.design" --pages "home,article,author" --style-variants 3 --layout-variants 3 # 4. /workflow:ui-design:update +# Total: 27 prototypes (3 styles × 3 layouts × 3 pages) ``` -### Example 2: Images + Prompt + Session (Integrated) +### Example 2: Custom 2×2 Matrix with Explicit Parameters ```bash -/workflow:ui-design:auto --session WFS-ecommerce --images "refs/*.png" --prompt "E-commerce with minimalist aesthetic" --variants 3 +/workflow:ui-design:auto --session WFS-ecommerce --images "refs/*.png" --prompt "E-commerce" --style-variants 2 --layout-variants 2 # Executes: -# 1. /workflow:ui-design:extract --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 +# 1. /workflow:ui-design:extract --base-path ".workflow/WFS-ecommerce/runs/run-xxx/.design" --images "refs/*.png" --variants 2 +# 2. /workflow:ui-design:consolidate --base-path "..." --variants 2 --keep-separate +# 3. /workflow:ui-design:generate --base-path "..." --pages "{inferred}" --style-variants 2 --layout-variants 2 # 4. /workflow:ui-design:update --session WFS-ecommerce +# Total: 2×2×N prototypes ``` -### Example 3: Creative Mode with Batch Planning +### Example 3: Intelligent Parsing with Batch Planning ```bash -/workflow:ui-design:auto --session WFS-saas --prompt "SaaS dashboard and settings" --variants 2 --creative-variants 4 --batch-plan +/workflow:ui-design:auto --session WFS-saas --prompt "Create 4 styles with 2 layouts for SaaS dashboard and settings" --batch-plan +# Parsed: --style-variants 4, --layout-variants 2 # Executes: -# 1. /workflow:ui-design:extract --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) +# 1. /workflow:ui-design:extract --variants 4 +# 2. /workflow:ui-design:consolidate --variants 4 --keep-separate +# 3. /workflow:ui-design:generate --pages "dashboard,settings" --style-variants 4 --layout-variants 2 +# (generates 16 prototypes: 4 styles × 2 layouts × 2 pages) # 4. /workflow:ui-design:update --session WFS-saas # 5. /workflow:plan --agent "Implement dashboard page..." # /workflow:plan --agent "Implement settings page..." @@ -262,19 +351,26 @@ The workflow acts as the bridge between brainstorming (`synthesis-specification. ``` ✅ UI Design Auto Workflow Complete! +Run ID: {run_id} Session: {session_id or "standalone"} -Mode: {standard|creative} +Matrix: {style_variants}×{layout_variants} ({total_prototypes} total prototypes) 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 1 - Style Extraction: {style_variants} style variants +Phase 2 - Style Consolidation: {style_variants} independent design systems +Phase 3 - Matrix Generation: {style_variants}×{layout_variants}×{pages_count} = {total_prototypes} prototypes Phase 4 - Design Update: Brainstorming artifacts updated {IF batch-plan: Phase 5 - Task Generation: {task_count} implementation tasks created} -📂 Design System: {base_path}/.design/ -📂 Prototypes: {base_path}/.design/prototypes/ -🌐 Preview: Open {base_path}/.design/prototypes/index.html +📂 Run Output: {base_path}/ + ├── .design/style-consolidation/ ({style_variants} design systems) + ├── .design/prototypes/ ({total_prototypes} HTML/CSS files) + └── .run-metadata.json (run configuration) + +🌐 Interactive Preview: {base_path}/.design/prototypes/compare.html + - 3×3 matrix view with synchronized scrolling + - Zoom controls and fullscreen mode + - Selection export for implementation {IF batch-plan: 📋 Implementation Tasks: .workflow/WFS-{session}/.task/ @@ -282,8 +378,8 @@ Next: /workflow:execute to begin implementation } {ELSE: Next Steps: -1. Preview prototypes in browser -2. Select preferred designs +1. Open compare.html to preview all variants +2. Select preferred style×layout combinations 3. Run /workflow:plan to create implementation tasks } ``` diff --git a/.claude/commands/workflow/ui-design/consolidate.md b/.claude/commands/workflow/ui-design/consolidate.md index 0a5809cb..85dce886 100644 --- a/.claude/commands/workflow/ui-design/consolidate.md +++ b/.claude/commands/workflow/ui-design/consolidate.md @@ -1,12 +1,13 @@ --- name: consolidate -description: Consolidate style variants into unified design system using Claude's synthesis -usage: /workflow:ui-design:consolidate --session [--variants ""] -argument-hint: "--session WFS-session-id [--variants \"variant-1,variant-3\"]" +description: Consolidate style variants into unified or separate design systems +usage: /workflow:ui-design:consolidate [--base-path ] [--session ] [--variants ] [--keep-separate] +argument-hint: "[--base-path \".workflow/WFS-xxx/runs/run-xxx/.design\"] [--variants 3] [--keep-separate]" 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(*) + - /workflow:ui-design:consolidate --base-path ".workflow/WFS-auth/latest/.design" --variants 3 --keep-separate + - /workflow:ui-design:consolidate --session WFS-auth --variants 2 + - /workflow:ui-design:consolidate --base-path "./design-session-xxx/.design" +allowed-tools: TodoWrite(*), Read(*), Write(*), Bash(*) --- # Style Consolidation Command @@ -22,39 +23,46 @@ Consolidate user-selected style variants into a unified, production-ready design ## Execution Protocol -### Phase 1: Session & Variant Loading +### Phase 1: Path Resolution & Variant Loading ```bash -# Validate session and load style cards -IF --session: +# Determine base path +IF --base-path provided: + base_path = {provided_base_path} # e.g., ".workflow/WFS-xxx/runs/run-xxx/.design" +ELSE IF --session provided: session_id = {provided_session} - base_path = ".workflow/WFS-{session_id}/" + base_path = ".workflow/WFS-{session_id}/latest/.design" # Use latest run ELSE: - ERROR: "Must provide --session parameter" + # Standalone mode: search for most recent design-session in scratchpad + base_path = find_latest_design_session(".workflow/.scratchpad/") # Verify extraction output exists -VERIFY: {base_path}/.design/style-extraction/style-cards.json exists +style_cards_path = "{base_path}/style-extraction/style-cards.json" +VERIFY: exists(style_cards_path) # Load style cards -style_cards = Read({base_path}/.design/style-extraction/style-cards.json) +style_cards = Read(style_cards_path) +total_variants = len(style_cards.style_cards) ``` -### Phase 2: Variant Selection +### Phase 2: Variant Selection (Count-Based) ```bash -# Parse variant selection +# Determine how many variants to consolidate IF --variants provided: - variant_ids = parse_csv({--variants value}) - VALIDATE: All variant_ids exist in style_cards.style_cards[] + variants_count = {provided_count} + VALIDATE: 1 <= variants_count <= total_variants 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) + # Default to all variants + variants_count = total_variants +# Select first N variants +selected_variants = style_cards.style_cards[0:variants_count] VERIFY: selected_variants.length > 0 + +# Determine consolidation mode +IF --keep-separate provided: + consolidation_mode = "separate" # Generate N independent design systems +ELSE: + consolidation_mode = "unified" # Merge into 1 design system ``` ### Phase 3: Load Design Context (Optional) @@ -67,8 +75,12 @@ 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. +### Phase 4: Design System Synthesis (Claude) + +**Route based on consolidation_mode**: + +#### Mode A: Unified Consolidation (Default) +Merges all style variants into a single, cohesive design system. **Synthesis Prompt Template**: ``` diff --git a/.claude/commands/workflow/ui-design/extract.md b/.claude/commands/workflow/ui-design/extract.md index 8377cc81..92a2e104 100644 --- a/.claude/commands/workflow/ui-design/extract.md +++ b/.claude/commands/workflow/ui-design/extract.md @@ -44,7 +44,7 @@ IF --session: ELSE: session_mode = "standalone" session_id = "design-session-" + timestamp() - base_path = "./{session_id}/" + base_path = ".workflow/.scratchpad/{session_id}/" # Set variant count variants_count = --variants provided ? {count} : 1 diff --git a/.claude/commands/workflow/ui-design/generate.md b/.claude/commands/workflow/ui-design/generate.md index 62501d37..e29d1c61 100644 --- a/.claude/commands/workflow/ui-design/generate.md +++ b/.claude/commands/workflow/ui-design/generate.md @@ -1,287 +1,334 @@ --- name: generate -description: Generate UI prototypes using consolidated design tokens -usage: /workflow:ui-design:generate [--pages ""] [--session ] [--variants ] [--creative-variants ] -argument-hint: "[--pages \"dashboard,auth\"] [--session WFS-xxx] [--variants 3] [--creative-variants 3]" +description: Generate UI prototypes in matrix mode (style × layout combinations) +usage: /workflow:ui-design:generate [--pages ""] [--base-path ] [--session ] [--style-variants ] [--layout-variants ] +argument-hint: "[--pages \"dashboard,auth\"] [--base-path \".workflow/WFS-xxx/runs/run-xxx/.design\"] [--style-variants 3] [--layout-variants 3]" examples: - - /workflow:ui-design:generate --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) + - /workflow:ui-design:generate --base-path ".workflow/WFS-auth/runs/run-xxx/.design" --pages "dashboard,settings" --style-variants 3 --layout-variants 3 + - /workflow:ui-design:generate --session WFS-auth --pages "home,pricing" --style-variants 2 --layout-variants 2 + - /workflow:ui-design:generate --base-path "./design-session-xxx/.design" --style-variants 3 --layout-variants 3 +allowed-tools: TodoWrite(*), Read(*), Write(*), Task(conceptual-planning-agent), Bash(*) --- -# UI Generation Command +# UI Generation Command (Matrix Mode) ## Overview -Generate production-ready UI prototypes (HTML/CSS) strictly adhering to consolidated design tokens and synthesis specification requirements. +Generate production-ready UI prototypes (HTML/CSS) in `style × layout` matrix mode, strictly adhering to consolidated design tokens from separate style design systems. ## Core Philosophy -- **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 +- **Matrix-Only**: Single mode generating `style_variants × layout_variants × pages` prototypes +- **Agent-Driven**: Uses `Task(conceptual-planning-agent)` for parallel generation +- **Token-Driven**: All styles reference per-style design-tokens.json; no hardcoded values - **Production-Ready**: Semantic HTML5, ARIA attributes, responsive design ## Execution Protocol -### Phase 1: Mode Detection & Context Loading +### Phase 1: Path Resolution & 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" +# Determine base path +IF --base-path provided: + base_path = {provided_base_path} # e.g., ".workflow/WFS-xxx/runs/run-xxx/.design" +ELSE IF --session provided: session_id = {provided_session} - base_path = ".workflow/WFS-{session_id}/" + base_path = ".workflow/WFS-{session_id}/latest/.design" # Use latest run ELSE: - session_mode = "standalone" - # Infer session_id from existing design-session-* directory - base_path = "./{detected_design_session}/" + # Standalone mode: search for most recent design-session in scratchpad + base_path = find_latest_design_session(".workflow/.scratchpad/") + +# Determine style and layout variant counts +style_variants = --style-variants OR 3 # Default to 3 +layout_variants = --layout-variants OR 3 # Default to 3 + +VALIDATE: 1 <= style_variants <= 5 +VALIDATE: 1 <= layout_variants <= 5 # Infer page list if not provided IF --pages provided: - page_list = {explicit_pages} -ELSE IF session_mode == "integrated": + page_list = parse_csv({--pages value}) +ELSE IF --session: # Read synthesis-specification.md to extract page requirements - synthesis_spec = Read({base_path}/.brainstorming/synthesis-specification.md) + synthesis_spec = Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md) page_list = extract_pages_from_synthesis(synthesis_spec) ELSE: # Infer from existing prototypes or default - page_list = detect_from_prototypes({base_path}/.design/prototypes/) OR ["home"] + page_list = detect_from_prototypes({base_path}/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) +# Verify design systems exist for all styles +FOR style_id IN range(1, style_variants + 1): + VERIFY: {base_path}/style-consolidation/style-{style_id}/design-tokens.json exists + VERIFY: {base_path}/style-consolidation/style-{style_id}/style-guide.md exists # Load requirements (if integrated mode) -IF session_mode == "integrated": - synthesis_spec = Read({base_path}/.brainstorming/synthesis-specification.md) +IF --session: + synthesis_spec = Read(.workflow/WFS-{session}/.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. +### Phase 2: Matrix UI Generation (Parallel) +Execute parallel agents to generate `style_variants × layout_variants × pages` prototypes. ```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 (
,