diff --git a/.claude/commands/workflow/ui-design/consolidate.md b/.claude/commands/workflow/ui-design/consolidate.md index 9ca31b1e..89c1fb21 100644 --- a/.claude/commands/workflow/ui-design/consolidate.md +++ b/.claude/commands/workflow/ui-design/consolidate.md @@ -2,18 +2,6 @@ name: consolidate description: Consolidate style variants into independent design systems and plan layout strategies usage: /workflow:ui-design:consolidate [--base-path ] [--session ] [--variants ] [--layout-variants ] -argument-hint: "[--base-path \".workflow/WFS-xxx/design-run-xxx\"] [--variants 3] [--layout-variants 3]" -parameters: - - name: --variants - type: number - default: all available variants from style-cards.json - description: "Number of style variants to consolidate (1-N). Processes first N variants from style-cards.json. Creates style-N directories." - - name: --session - type: string - description: "Workflow session ID (e.g., WFS-auth). Finds latest design run in session directory." - - name: --base-path - type: string - description: "Custom base path for input/output. Overrides --session if provided." examples: - /workflow:ui-design:consolidate --base-path ".workflow/WFS-auth/design-run-20250109-143022" --variants 3 - /workflow:ui-design:consolidate --session WFS-auth --variants 2 diff --git a/.claude/commands/workflow/ui-design/explore-auto.md b/.claude/commands/workflow/ui-design/explore-auto.md index 686847f7..bef09271 100644 --- a/.claude/commands/workflow/ui-design/explore-auto.md +++ b/.claude/commands/workflow/ui-design/explore-auto.md @@ -2,7 +2,6 @@ name: explore-auto description: Exploratory UI design workflow - Generate and compare multiple style × layout combinations (3×3 matrix exploration) usage: /workflow:ui-design:explore-auto [--prompt ""] [--images ""] [--targets ""] [--target-type "page|component"] [--session ] [--style-variants ] [--layout-variants ] [--batch-plan] -argument-hint: "[--prompt \"Modern SaaS with 3 styles\"] [--images \"refs/*.png\"] [--targets \"dashboard,auth,navbar,hero\"] [--target-type \"auto\"] [--session WFS-xxx] [--style-variants 3] [--layout-variants 3]" examples: - /workflow:ui-design:explore-auto --prompt "Generate 3 style variants for modern blog: home, article, author" - /workflow:ui-design:explore-auto --prompt "SaaS dashboard and settings with 2 layout options" @@ -25,15 +24,15 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(* - **Components** (isolated UI elements): navbar, card, hero, form, etc. - **Mixed**: Can combine both in a single workflow -**Autonomous Flow**: +**Autonomous Flow** (⚠️ CONTINUOUS EXECUTION - DO NOT STOP): 1. User triggers: `/workflow:ui-design:explore-auto [params]` -2. Phase 1 (style-extract) → Auto-continues -3. Phase 2 (style-consolidate) → Auto-continues -4. Phase 3 (ui-generate) → Auto-continues with unified target list -5. Phase 4 (design-update) → Auto-continues +2. Phase 1 (style-extract) → **WAIT for completion** → Auto-continues +3. Phase 2 (style-consolidate) → **WAIT for completion** → Auto-continues +4. Phase 3 (ui-generate) → **WAIT for completion** → Auto-continues with unified target list +5. Phase 4 (design-update) → **WAIT for completion** → Auto-continues 6. Phase 5 (batch-plan, optional) → Reports completion -**Auto-Continue Mechanism**: TodoWrite tracks phase status. Upon completion, coordinator constructs next command and executes immediately. No user intervention required. +**Auto-Continue Mechanism**: TodoWrite tracks phase status. Upon each phase completion, you MUST immediately construct and execute the next phase command. No user intervention required. The workflow is NOT complete until reaching Phase 4 (or Phase 5 if --batch-plan). **Target Type Detection**: Automatically inferred from prompt/targets, or explicitly set via `--target-type`. @@ -44,6 +43,7 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(* 3. **Parse & Pass**: Extract data from each output for next phase 4. **Default to All**: When selecting variants/prototypes, use ALL generated items 5. **Track Progress**: Update TodoWrite after each phase +6. **⚠️ CRITICAL: DO NOT STOP** - This is a continuous multi-phase workflow. After each SlashCommand completes, you MUST wait for completion, then immediately execute the next phase. Workflow is NOT complete until Phase 4 (or Phase 5 if --batch-plan). ## Parameter Requirements @@ -56,6 +56,7 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(* - `--style-variants `: Style variants (default: inferred from prompt or 3, range: 1-5) - `--layout-variants `: Layout variants per style (default: inferred or 3, range: 1-5) - `--batch-plan`: Auto-generate implementation tasks after design-update +- `--continue-run `: (Internal) Continue from previous phase completion **Legacy Parameters** (maintained for backward compatibility): - `--pages ""`: Alias for `--targets` with `--target-type page` @@ -203,14 +204,20 @@ command = "/workflow:ui-design:extract --base-path \"{base_path}\" " + (--images ? "--images \"{images}\" " : "") + (--prompt ? "--prompt \"{prompt}\" " : "") + "--variants {style_variants} --mode explore" -SlashCommand(command) # → Phase 2 +SlashCommand(command) + +# WAIT for extract command to complete, then IMMEDIATELY continue to Phase 2 +# DO NOT STOP - Phase 2 must execute automatically ``` ### Phase 2: Style Consolidation ```bash command = "/workflow:ui-design:consolidate --base-path \"{base_path}\" " + "--variants {style_variants}" -SlashCommand(command) # → Phase 3 +SlashCommand(command) + +# WAIT for consolidate command to complete, then IMMEDIATELY continue to Phase 3 +# DO NOT STOP - Phase 3 must execute automatically # Output: style_variants independent design systems (design tokens and style guides) ``` @@ -225,7 +232,10 @@ total = style_variants × layout_variants × len(inferred_target_list) REPORT: "🚀 Phase 3: {type_icon} {targets_string} | Matrix: {s}×{l}×{n} = {total} prototypes" REPORT: " → Layout planning: {len(inferred_target_list)}×{layout_variants} target-specific layouts" -SlashCommand(command) # → Phase 4 +SlashCommand(command) + +# WAIT for generate command to complete, then IMMEDIATELY continue to Phase 4 +# DO NOT STOP - Phase 4 must execute automatically # Output: # - {target}-layout-{l}.json (target-specific layout plans) # - {target}-style-{s}-layout-{l}.html (final prototypes) @@ -235,7 +245,11 @@ SlashCommand(command) # → Phase 4 ### Phase 4: Design System Integration ```bash command = "/workflow:ui-design:update" + (--session ? " --session {session_id}" : "") -SlashCommand(command) # → Phase 5 if --batch-plan, else complete +SlashCommand(command) + +# WAIT for update command to complete +# If --batch-plan flag present: IMMEDIATELY continue to Phase 5 +# If no --batch-plan: Workflow complete, display final report ``` ### Phase 5: Batch Task Generation (Optional) @@ -248,13 +262,19 @@ IF --batch-plan: ## TodoWrite Pattern ```javascript +// Initialize at workflow start to track multi-phase execution TodoWrite({todos: [ {"content": "Execute style extraction", "status": "in_progress", "activeForm": "Executing..."}, {"content": "Execute style consolidation", "status": "pending", "activeForm": "Executing..."}, {"content": "Execute UI generation", "status": "pending", "activeForm": "Executing..."}, {"content": "Execute design integration", "status": "pending", "activeForm": "Executing..."} ]}) -// Update after each phase: current → completed, next → in_progress + +// ⚠️ CRITICAL: After EACH phase completion, you MUST: +// 1. Update current phase: status → "completed" +// 2. Update next phase: status → "in_progress" +// 3. Continue to execute next phase immediately +// This ensures continuous workflow tracking and prevents premature stopping ``` ## Key Features diff --git a/.claude/commands/workflow/ui-design/extract.md b/.claude/commands/workflow/ui-design/extract.md index 60c81425..729f7ba3 100644 --- a/.claude/commands/workflow/ui-design/extract.md +++ b/.claude/commands/workflow/ui-design/extract.md @@ -2,29 +2,6 @@ name: extract description: Extract design style from reference images or text prompts using Claude's analysis usage: /workflow:ui-design:extract [--base-path ] [--session ] [--images ""] [--prompt ""] [--variants ] -argument-hint: "[--base-path \".workflow/WFS-xxx/design-run-xxx\"] [--session WFS-xxx] [--images \"refs/*.png\"] [--prompt \"Modern minimalist\"] [--variants 3]" -parameters: - - name: --mode - type: string - enum: [imitate, explore, auto] - default: auto - description: "Extraction mode: 'imitate' (high-fidelity single style, skip divergence), 'explore' (multi-variant with contrast analysis), 'auto' (detect from --variants: 1=imitate, 2+=explore)" - - name: --variants - type: number - default: 1 - description: "Number of design variants to extract (1-5). Each variant will be maximally contrasting. Generates style-cards.json with variant-N IDs." - - name: --images - type: string - description: "Glob pattern for reference images (e.g., 'refs/*.png'). Supports PNG, JPG, WebP." - - name: --prompt - type: string - description: "Text description of desired style (e.g., 'Modern minimalist blog'). Can be combined with --images." - - name: --session - type: string - description: "Workflow session ID (e.g., WFS-auth). Creates design run in session directory." - - name: --base-path - type: string - description: "Custom base path for output. Overrides --session if provided." examples: - /workflow:ui-design:extract --images "design-refs/*.png" --variants 3 - /workflow:ui-design:extract --prompt "Modern minimalist blog, dark theme" --variants 3 diff --git a/.claude/commands/workflow/ui-design/generate.md b/.claude/commands/workflow/ui-design/generate.md index b480f6da..6cbece70 100644 --- a/.claude/commands/workflow/ui-design/generate.md +++ b/.claude/commands/workflow/ui-design/generate.md @@ -2,30 +2,12 @@ name: generate description: Generate UI prototypes in matrix mode (style × layout combinations) for pages or components usage: /workflow:ui-design:generate [--targets ""] [--target-type "page|component"] [--base-path ] [--session ] [--style-variants ] [--layout-variants ] -argument-hint: "[--targets \"dashboard,auth,navbar,hero\"] [--target-type \"page\"] [--base-path \".workflow/WFS-xxx/design-run-xxx\"] [--style-variants 3] [--layout-variants 3]" -parameters: - - name: --style-variants - type: number - default: 3 - description: "Number of style variants to generate prototypes for (1-5). Auto-validates against actual style-* directories. ⚠️ Recommend omitting to use auto-detection." - - name: --layout-variants - type: number - default: auto-detected from layout-strategies.json - description: "Number of layout variants. Default: loaded from consolidation output. Can override for manual testing." - - name: --targets - type: string - description: "Comma-separated list of targets (pages or components) to generate" - - name: --target-type - type: string - default: page - description: "Type of targets: 'page' (full layout) or 'component' (isolated element)" examples: - /workflow:ui-design:generate --base-path ".workflow/WFS-auth/design-run-20250109-143022" --targets "dashboard,settings" --target-type "page" --style-variants 3 --layout-variants 3 - /workflow:ui-design:generate --session WFS-auth --targets "home,pricing" --target-type "page" --style-variants 2 --layout-variants 2 - /workflow:ui-design:generate --base-path "./.workflow/.design/run-20250109-150533" # ✅ Recommended: auto-detect variants - /workflow:ui-design:generate --targets "navbar,hero,card" --target-type "component" --style-variants 3 --layout-variants 2 - /workflow:ui-design:generate --pages "home,dashboard" --style-variants 2 --layout-variants 2 # Legacy syntax -executor: → @ui-design-agent allowed-tools: TodoWrite(*), Read(*), Write(*), Task(ui-design-agent), Bash(*) --- diff --git a/.claude/commands/workflow/ui-design/imitate-auto.md b/.claude/commands/workflow/ui-design/imitate-auto.md index 4d92e9b2..b1e26f58 100644 --- a/.claude/commands/workflow/ui-design/imitate-auto.md +++ b/.claude/commands/workflow/ui-design/imitate-auto.md @@ -2,7 +2,6 @@ name: imitate-auto description: Imitation-focused UI design workflow - Rapidly replicate a single design style from URL or images (skip exploration, direct to implementation) usage: /workflow:ui-design:imitate-auto [--url ""] [--images ""] [--prompt ""] [--targets ""] [--target-type "page|component"] [--session ] -argument-hint: "[--url \"https://example.com\"] [--images \"refs/*.png\"] [--prompt \"Imitate dark mode style\"] [--targets \"dashboard,settings\"] [--target-type \"page\"]" examples: - /workflow:ui-design:imitate-auto --url "https://linear.app" --targets "home,features,pricing" - /workflow:ui-design:imitate-auto --images "refs/design.png" --prompt "Imitate this minimalist design for dashboard and settings" diff --git a/.claude/commands/workflow/ui-design/update.md b/.claude/commands/workflow/ui-design/update.md index 52344cb6..c56b4f6d 100644 --- a/.claude/commands/workflow/ui-design/update.md +++ b/.claude/commands/workflow/ui-design/update.md @@ -2,7 +2,6 @@ name: update description: Update brainstorming artifacts with finalized design system references usage: /workflow:ui-design:update --session [--selected-prototypes ""] -argument-hint: "--session WFS-session-id [--selected-prototypes \"dashboard-variant-1,auth-variant-2\"]" examples: - /workflow:ui-design:update --session WFS-auth - /workflow:ui-design:update --session WFS-dashboard --selected-prototypes "dashboard-variant-1"