@devo-bmad-custom/agent-orchestration 1.0.2 → 1.0.4

package/src/bmm/workflows/2-plan-workflows/create-ux-design/steps/step-09-design-directions.md

@@ -1,154 +1,154 @@
-# Step 9: Design Direction Mockups
-
-Generate comprehensive design direction mockups showing different visual approaches for the product.
-
-## DESIGN DIRECTIONS SEQUENCE
-
-### 1. Commit to a Bold Aesthetic Direction
-
-Before generating any mockups, explicitly ask the user:
-
-"Before I generate design directions, let's commit to a bold aesthetic point-of-view for {{project_name}}. A strong design direction avoids generic 'AI slop' patterns.
-
-**Choose an aesthetic direction (or describe your own):**
-
-- **Brutalist Clarity** — Raw, bold typography with stark contrast and minimal decoration
-- **Retro-Futuristic** — Neon accents, dark backgrounds, futuristic geometry with retro touches
-- **Elegant Minimalism** — Generous whitespace, refined typography scale, premium restraint
-- **Organic Warmth** — Fluid shapes, earthy tones, humanistic typography
-- **High-Energy Dynamic** — Motion-forward, vibrant color, high information density
-- **Something else?** — Describe your own direction
-
-Also confirm:
-
-- **Typography pair preference** — e.g., Clash Display + Inter, Syne + Manrope, etc.
-- **What should we AVOID aesthetically?** (I'll treat these as explicit anti-patterns)"
-
-### 2. Generate Design Direction Variations
-
-"I'll generate 6-8 different design direction variations exploring:
-
-- Different layout approaches and information hierarchy
-- Various interaction patterns and visual weights
-- Alternative color applications from our foundation
-- Different density and spacing approaches
-- Various navigation and component arrangements
-
-Each mockup will show a complete vision for {{project_name}} with all our design decisions applied, guided by our chosen bold aesthetic direction."
-
-### 3. Create HTML Design Direction Showcase
-
-Generate and save a comprehensive HTML design direction showcase at `{planning_artifacts}/ux-design-directions.html` showing:
-
-- 6-8 full-screen mockup variations
-- Interactive states and hover effects
-- Side-by-side comparison tools
-- Complete UI examples with real content
-- Responsive behavior demonstrations
-
-### 4. Present Design Exploration Framework
-
-"As you explore the design directions, look for:
-
-- **Layout Intuitiveness** - Which information hierarchy matches your priorities?
-- **Interaction Style** - Which interaction style fits your core experience?
-- **Visual Weight** - Which visual density feels right for your brand?
-- **Navigation Approach** - Which navigation pattern matches user expectations?
-- **Component Usage** - How well do the components support your user journeys?
-- **Brand Alignment** - Which direction best supports your emotional goals?
-
-Take your time exploring — this is a crucial decision that will guide all our design work!"
-
-### 5. Facilitate Design Direction Selection
-
-"After exploring all the design directions:
-
-**Which approach resonates most with you?**
-
-- Pick a favorite direction as-is
-- Combine elements from multiple directions
-- Request modifications to any direction
-- Use one direction as a base and iterate
-
-**Tell me:**
-
-- Which layout feels most intuitive for your users?
-- Which visual weight matches your brand personality?
-- Which interaction style supports your core experience?
-- Are there elements from different directions you'd like to combine?"
-
-### 6. Document Design Direction Decision
-
-"Based on your exploration, I'm understanding your design direction preference:
-
-**Chosen Direction:** [Direction number or combination]
-**Key Elements:** [Specific elements you liked]
-**Modifications Needed:** [Any changes requested]
-**Rationale:** [Why this direction works for your product]
-
-This will become our design foundation moving forward. Are we ready to lock this in, or do you want to explore variations?"
-
-### 7. Generate Design Direction Content
-
-When saving to document, append these sections:
-
-````markdown
-## Design Direction Decision
-
-### Design Thinking Summary
-
-> **Aesthetic Direction:** [Chosen bold name, e.g., "Retro-Futuristic", "Brutalist Clarity"]
->
-> **Purpose:** [What this design must accomplish emotionally and functionally]
->
-> **Tone:** [3 adjectives: e.g., Bold, Trustworthy, Energetic]
->
-> **Differentiation:** [What makes this unforgettable vs. generic AI-generated UI]
->
-> **Typography Pairing:** [Specific font names, e.g., "Clash Display for headings, Manrope for body"]
->
-> **Google Fonts Import:** The execution agent MUST add the following `<link>` tags to the project's root layout or `_document.tsx` to activate this font pairing. If fonts are self-hosted, install via `next/font/local`. Never leave the font as a system default (e.g., Arial, sans-serif).
->
-> ```html
-> <!-- Replace with actual font URLs resolved from the Typography Pairing above -->
-> <link rel="preconnect" href="https://fonts.googleapis.com" />
-> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-> <link
->   href="https://fonts.googleapis.com/css2?family=[HeadingFont]&family=[BodyFont]&display=swap"
->   rel="stylesheet"
-> />
-> ```
->
-> **Explicit Anti-Patterns to Avoid:**
->
-> - [e.g., Generic purple gradients on white backgrounds]
-> - [e.g., Generic Space Grotesk/Inter combo with no differentiation]
-> - [e.g., Predictable hero-section with centered H1 + CTA button]
-
-### Design Directions Explored
-
-[Summary of design directions explored based on conversation]
-
-### Chosen Direction
-
-[Chosen design direction based on conversation]
-
-### Design Rationale
-
-[Rationale for design direction choice based on conversation]
-
-### Implementation Approach
-
-[Implementation approach based on chosen direction]
-````
-
-### 8. Auto-Save and Advance
-
-Without presenting a menu or waiting for user input:
-
-- Append the final content to `{planning_artifacts}/ux-design-specification.md`
-- Update frontmatter: append step to end of stepsCompleted array
-- Announce: `"✅ Design Direction Decision saved. Advancing to user journeys..."`
-- Immediately load and execute: `{project-root}/_bmad/bmm/workflows/2-plan-workflows/create-ux-design/steps/step-10-user-journeys.md`
-
-> **HALT ONLY IF:** The user has not yet declared an aesthetic direction. In that case, present the direction choices from Step 1 as a one-question halt, wait for a response, then continue without any further gates.
+# Step 9: Design Direction Mockups
+
+Generate comprehensive design direction mockups showing different visual approaches for the product.
+
+## DESIGN DIRECTIONS SEQUENCE
+
+### 1. Commit to a Bold Aesthetic Direction
+
+Before generating any mockups, explicitly ask the user:
+
+"Before I generate design directions, let's commit to a bold aesthetic point-of-view for {{project_name}}. A strong design direction avoids generic 'AI slop' patterns.
+
+**Choose an aesthetic direction (or describe your own):**
+
+- **Brutalist Clarity** — Raw, bold typography with stark contrast and minimal decoration
+- **Retro-Futuristic** — Neon accents, dark backgrounds, futuristic geometry with retro touches
+- **Elegant Minimalism** — Generous whitespace, refined typography scale, premium restraint
+- **Organic Warmth** — Fluid shapes, earthy tones, humanistic typography
+- **High-Energy Dynamic** — Motion-forward, vibrant color, high information density
+- **Something else?** — Describe your own direction
+
+Also confirm:
+
+- **Typography pair preference** — e.g., Clash Display + Inter, Syne + Manrope, etc.
+- **What should we AVOID aesthetically?** (I'll treat these as explicit anti-patterns)"
+
+### 2. Generate Design Direction Variations
+
+"I'll generate 6-8 different design direction variations exploring:
+
+- Different layout approaches and information hierarchy
+- Various interaction patterns and visual weights
+- Alternative color applications from our foundation
+- Different density and spacing approaches
+- Various navigation and component arrangements
+
+Each mockup will show a complete vision for {{project_name}} with all our design decisions applied, guided by our chosen bold aesthetic direction."
+
+### 3. Create HTML Design Direction Showcase
+
+Generate and save a comprehensive HTML design direction showcase at `{planning_artifacts}/ux-design-directions.html` showing:
+
+- 6-8 full-screen mockup variations
+- Interactive states and hover effects
+- Side-by-side comparison tools
+- Complete UI examples with real content
+- Responsive behavior demonstrations
+
+### 4. Present Design Exploration Framework
+
+"As you explore the design directions, look for:
+
+- **Layout Intuitiveness** - Which information hierarchy matches your priorities?
+- **Interaction Style** - Which interaction style fits your core experience?
+- **Visual Weight** - Which visual density feels right for your brand?
+- **Navigation Approach** - Which navigation pattern matches user expectations?
+- **Component Usage** - How well do the components support your user journeys?
+- **Brand Alignment** - Which direction best supports your emotional goals?
+
+Take your time exploring — this is a crucial decision that will guide all our design work!"
+
+### 5. Facilitate Design Direction Selection
+
+"After exploring all the design directions:
+
+**Which approach resonates most with you?**
+
+- Pick a favorite direction as-is
+- Combine elements from multiple directions
+- Request modifications to any direction
+- Use one direction as a base and iterate
+
+**Tell me:**
+
+- Which layout feels most intuitive for your users?
+- Which visual weight matches your brand personality?
+- Which interaction style supports your core experience?
+- Are there elements from different directions you'd like to combine?"
+
+### 6. Document Design Direction Decision
+
+"Based on your exploration, I'm understanding your design direction preference:
+
+**Chosen Direction:** [Direction number or combination]
+**Key Elements:** [Specific elements you liked]
+**Modifications Needed:** [Any changes requested]
+**Rationale:** [Why this direction works for your product]
+
+This will become our design foundation moving forward. Are we ready to lock this in, or do you want to explore variations?"
+
+### 7. Generate Design Direction Content
+
+When saving to document, append these sections:
+
+````markdown
+## Design Direction Decision
+
+### Design Thinking Summary
+
+> **Aesthetic Direction:** [Chosen bold name, e.g., "Retro-Futuristic", "Brutalist Clarity"]
+>
+> **Purpose:** [What this design must accomplish emotionally and functionally]
+>
+> **Tone:** [3 adjectives: e.g., Bold, Trustworthy, Energetic]
+>
+> **Differentiation:** [What makes this unforgettable vs. generic AI-generated UI]
+>
+> **Typography Pairing:** [Specific font names, e.g., "Clash Display for headings, Manrope for body"]
+>
+> **Google Fonts Import:** The execution agent MUST add the following `<link>` tags to the project's root layout or `_document.tsx` to activate this font pairing. If fonts are self-hosted, install via `next/font/local`. Never leave the font as a system default (e.g., Arial, sans-serif).
+>
+> ```html
+> <!-- Replace with actual font URLs resolved from the Typography Pairing above -->
+> <link rel="preconnect" href="https://fonts.googleapis.com" />
+> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+> <link
+>   href="https://fonts.googleapis.com/css2?family=[HeadingFont]&family=[BodyFont]&display=swap"
+>   rel="stylesheet"
+> />
+> ```
+>
+> **Explicit Anti-Patterns to Avoid:**
+>
+> - [e.g., Generic purple gradients on white backgrounds]
+> - [e.g., Generic Space Grotesk/Inter combo with no differentiation]
+> - [e.g., Predictable hero-section with centered H1 + CTA button]
+
+### Design Directions Explored
+
+[Summary of design directions explored based on conversation]
+
+### Chosen Direction
+
+[Chosen design direction based on conversation]
+
+### Design Rationale
+
+[Rationale for design direction choice based on conversation]
+
+### Implementation Approach
+
+[Implementation approach based on chosen direction]
+````
+
+### 8. Auto-Save and Advance
+
+Without presenting a menu or waiting for user input:
+
+- Append the final content to `{planning_artifacts}/ux-design-specification.md`
+- Update frontmatter: append step to end of stepsCompleted array
+- Announce: `"✅ Design Direction Decision saved. Advancing to user journeys..."`
+- Immediately load and execute: `{project-root}/_bmad/bmm/workflows/2-plan-workflows/create-ux-design/steps/step-10-user-journeys.md`
+
+> **HALT ONLY IF:** The user has not yet declared an aesthetic direction. In that case, present the direction choices from Step 1 as a one-question halt, wait for a response, then continue without any further gates.

package/src/bmm/workflows/2-plan-workflows/create-ux-design/steps/step-10-user-journeys.md

@@ -1,136 +1,136 @@
-# Step 10: User Journey Flows
-
-Design detailed user journey flows for critical user interactions.
-
-## USER JOURNEY FLOWS SEQUENCE
-
-### 1. Load PRD User Journeys as Foundation
-
-"Great! Since we have the PRD available, let's build on the user journeys already documented there.
-
-**Existing User Journeys from PRD:**
-I've already loaded these user journeys from your PRD:
-[Journey narratives from PRD input documents]
-
-These journeys tell us **who** users are and **why** they take certain actions. Now we need to design **how** those journeys work in detail.
-
-**Critical Journeys to Design Flows For:**
-Looking at the PRD journeys, I need to design detailed interaction flows for:
-- [Critical journey 1 identified from PRD narratives]
-- [Critical journey 2 identified from PRD narratives]
-- [Critical journey 3 identified from PRD narratives]
-
-The PRD gave us the stories — now we design the mechanics!"
-
-### 2. Design Each Journey Flow
-
-For each critical journey:
-
-"Let's design the flow for users accomplishing [journey goal].
-
-**Flow Design Questions:**
-- How do users start this journey? (entry point)
-- What information do they need at each step?
-- What decisions do they need to make?
-- How do they know they're progressing successfully?
-- What does success look like for this journey?
-- Where might they get confused or stuck?
-- How do they recover from errors?"
-
-### 3. Create Flow Diagrams
-
-"I'll create detailed flow diagrams for each journey showing:
-
-**[Journey Name] Flow:**
-- Entry points and triggers
-- Decision points and branches
-- Success and failure paths
-- Error recovery mechanisms
-- Progressive disclosure of information
-
-Each diagram will map the complete user experience from start to finish."
-
-### 4. Optimize for Efficiency and Delight
-
-"**Flow Optimization:**
-For each journey, let's ensure we're:
-
-- Minimizing steps to value (getting users to success quickly)
-- Reducing cognitive load at each decision point
-- Providing clear feedback and progress indicators
-- Creating moments of delight or accomplishment
-- Handling edge cases and error recovery gracefully
-
-**Specific Optimizations:**
-- [Optimization 1 for journey efficiency]
-- [Optimization 2 for user delight]
-- [Optimization 3 for error handling]"
-
-### 5. Document Journey Patterns
-
-"**Journey Patterns:**
-Across these flows, I'm seeing some common patterns we can standardize:
-
-**Navigation Patterns:**
-- [Navigation pattern 1]
-- [Navigation pattern 2]
-
-**Decision Patterns:**
-- [Decision pattern 1]
-- [Decision pattern 2]
-
-**Feedback Patterns:**
-- [Feedback pattern 1]
-- [Feedback pattern 2]
-
-These patterns will ensure consistency across all user experiences."
-
-### 6. Generate User Journey Content
-
-When saving to document, append these sections:
-
-```markdown
-## User Journey Flows
-
-### [Journey 1 Name]
-
-[Journey 1 description and Mermaid diagram]
-
-### [Journey 2 Name]
-
-[Journey 2 description and Mermaid diagram]
-
-### Journey Patterns
-
-[Journey patterns identified based on conversation]
-
-### Flow Optimization Principles
-
-[Flow optimization principles based on conversation]
-```
-
-### 7. Present Content and Menu
-
-"I've designed detailed user journey flows for {{project_name}}. These flows will guide the detailed design of each user interaction.
-
-**Here's what I'll add to the document:**
-
-[Show the complete markdown content from step 6]
-
-**What would you like to do?**
-[A] Advanced Elicitation - Let's refine our user journey designs
-[P] Party Mode - Bring different perspectives on user flows
-[AR] Adversarial Review [C] Continue - Save this to the document and move to component strategy"
-
-### 8. Handle Menu Selection
-
-**If A:** Read fully and follow `{project-root}/_bmad/core/workflows/advanced-elicitation/workflow.xml` with the current content. Ask user to accept/reject improvements, then return to menu.
-
-**If P:** Read fully and follow `{project-root}/_bmad/core/workflows/party-mode/workflow.md` with the current content. Ask user to accept/reject changes, then return to menu.
-
-**If AR:** Execute `{project-root}/_bmad/core/tasks/review-adversarial-general.xml` — display findings with recommendations; then redisplay this menu.
-
-**If C:**
-- Append the final content to `{planning_artifacts}/ux-design-specification.md`
-- Update frontmatter: append step to end of stepsCompleted array
-- Load `{project-root}/_bmad/bmm/workflows/2-plan-workflows/create-ux-design/steps/step-11-component-strategy.md`
+# Step 10: User Journey Flows
+
+Design detailed user journey flows for critical user interactions.
+
+## USER JOURNEY FLOWS SEQUENCE
+
+### 1. Load PRD User Journeys as Foundation
+
+"Great! Since we have the PRD available, let's build on the user journeys already documented there.
+
+**Existing User Journeys from PRD:**
+I've already loaded these user journeys from your PRD:
+[Journey narratives from PRD input documents]
+
+These journeys tell us **who** users are and **why** they take certain actions. Now we need to design **how** those journeys work in detail.
+
+**Critical Journeys to Design Flows For:**
+Looking at the PRD journeys, I need to design detailed interaction flows for:
+- [Critical journey 1 identified from PRD narratives]
+- [Critical journey 2 identified from PRD narratives]
+- [Critical journey 3 identified from PRD narratives]
+
+The PRD gave us the stories — now we design the mechanics!"
+
+### 2. Design Each Journey Flow
+
+For each critical journey:
+
+"Let's design the flow for users accomplishing [journey goal].
+
+**Flow Design Questions:**
+- How do users start this journey? (entry point)
+- What information do they need at each step?
+- What decisions do they need to make?
+- How do they know they're progressing successfully?
+- What does success look like for this journey?
+- Where might they get confused or stuck?
+- How do they recover from errors?"
+
+### 3. Create Flow Diagrams
+
+"I'll create detailed flow diagrams for each journey showing:
+
+**[Journey Name] Flow:**
+- Entry points and triggers
+- Decision points and branches
+- Success and failure paths
+- Error recovery mechanisms
+- Progressive disclosure of information
+
+Each diagram will map the complete user experience from start to finish."
+
+### 4. Optimize for Efficiency and Delight
+
+"**Flow Optimization:**
+For each journey, let's ensure we're:
+
+- Minimizing steps to value (getting users to success quickly)
+- Reducing cognitive load at each decision point
+- Providing clear feedback and progress indicators
+- Creating moments of delight or accomplishment
+- Handling edge cases and error recovery gracefully
+
+**Specific Optimizations:**
+- [Optimization 1 for journey efficiency]
+- [Optimization 2 for user delight]
+- [Optimization 3 for error handling]"
+
+### 5. Document Journey Patterns
+
+"**Journey Patterns:**
+Across these flows, I'm seeing some common patterns we can standardize:
+
+**Navigation Patterns:**
+- [Navigation pattern 1]
+- [Navigation pattern 2]
+
+**Decision Patterns:**
+- [Decision pattern 1]
+- [Decision pattern 2]
+
+**Feedback Patterns:**
+- [Feedback pattern 1]
+- [Feedback pattern 2]
+
+These patterns will ensure consistency across all user experiences."
+
+### 6. Generate User Journey Content
+
+When saving to document, append these sections:
+
+```markdown
+## User Journey Flows
+
+### [Journey 1 Name]
+
+[Journey 1 description and Mermaid diagram]
+
+### [Journey 2 Name]
+
+[Journey 2 description and Mermaid diagram]
+
+### Journey Patterns
+
+[Journey patterns identified based on conversation]
+
+### Flow Optimization Principles
+
+[Flow optimization principles based on conversation]
+```
+
+### 7. Present Content and Menu
+
+"I've designed detailed user journey flows for {{project_name}}. These flows will guide the detailed design of each user interaction.
+
+**Here's what I'll add to the document:**
+
+[Show the complete markdown content from step 6]
+
+**What would you like to do?**
+[A] Advanced Elicitation - Let's refine our user journey designs
+[P] Party Mode - Bring different perspectives on user flows
+[AR] Adversarial Review [C] Continue - Save this to the document and move to component strategy"
+
+### 8. Handle Menu Selection
+
+**If A:** Read fully and follow `{project-root}/_bmad/core/workflows/advanced-elicitation/workflow.xml` with the current content. Ask user to accept/reject improvements, then return to menu.
+
+**If P:** Read fully and follow `{project-root}/_bmad/core/workflows/party-mode/workflow.md` with the current content. Ask user to accept/reject changes, then return to menu.
+
+**If AR:** Execute `{project-root}/_bmad/core/tasks/review-adversarial-general.xml` — display findings with recommendations; then redisplay this menu.
+
+**If C:**
+- Append the final content to `{planning_artifacts}/ux-design-specification.md`
+- Update frontmatter: append step to end of stepsCompleted array
+- Load `{project-root}/_bmad/bmm/workflows/2-plan-workflows/create-ux-design/steps/step-11-component-strategy.md`