converted ux design to sharded step workflow
This commit is contained in:
Brian Madison
parent
5ea02d7091
commit
5a11519dc1
|
|
@ -24,7 +24,7 @@ agent:
|
||||||
|
|
||||||
menu:
|
menu:
|
||||||
- trigger: create-ux-design
|
- trigger: create-ux-design
|
||||||
workflow: "{project-root}/{bmad_folder}/bmm/workflows/2-plan-workflows/create-ux-design/workflow.yaml"
|
exec: "{project-root}/{bmad_folder}/bmm/workflows/2-plan-workflows/create-ux-design/workflow.md"
|
||||||
description: Generate a UX Design and UI Plan from a PRD (Recommended before creating Architecture)
|
description: Generate a UX Design and UI Plan from a PRD (Recommended before creating Architecture)
|
||||||
|
|
||||||
- trigger: validate-design
|
- trigger: validate-design
|
||||||
|
|
|
||||||
|
|
@ -1,310 +0,0 @@
|
||||||
# Create UX Design Workflow Validation Checklist
|
|
||||||
|
|
||||||
**Purpose**: Validate UX Design Specification is complete, collaborative, and implementation-ready.
|
|
||||||
|
|
||||||
**Paradigm**: Visual collaboration-driven, not template generation
|
|
||||||
|
|
||||||
**Expected Outputs**:
|
|
||||||
|
|
||||||
- ux-design-specification.md
|
|
||||||
- ux-color-themes.html (color theme visualizer)
|
|
||||||
- ux-design-directions.html (design mockups)
|
|
||||||
- Optional: ux-prototype.html, ux-component-showcase.html, ai-frontend-prompt.md
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 1. Output Files Exist
|
|
||||||
|
|
||||||
- [ ] **ux-design-specification.md** created in output folder
|
|
||||||
- [ ] **ux-color-themes.html** generated (interactive color exploration)
|
|
||||||
- [ ] **ux-design-directions.html** generated (6-8 design mockups)
|
|
||||||
- [ ] No unfilled {{template_variables}} in specification
|
|
||||||
- [ ] All sections have content (not placeholder text)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 2. Collaborative Process Validation
|
|
||||||
|
|
||||||
**The workflow should facilitate decisions WITH the user, not FOR them**
|
|
||||||
|
|
||||||
- [ ] **Design system chosen by user** (not auto-selected)
|
|
||||||
- [ ] **Color theme selected from options** (user saw visualizations and chose)
|
|
||||||
- [ ] **Design direction chosen from mockups** (user explored 6-8 options)
|
|
||||||
- [ ] **User journey flows designed collaboratively** (options presented, user decided)
|
|
||||||
- [ ] **UX patterns decided with user input** (not just generated)
|
|
||||||
- [ ] **Decisions documented WITH rationale** (why each choice was made)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 3. Visual Collaboration Artifacts
|
|
||||||
|
|
||||||
### Color Theme Visualizer
|
|
||||||
|
|
||||||
- [ ] **HTML file exists and is valid** (ux-color-themes.html)
|
|
||||||
- [ ] **Shows 3-4 theme options** (or documented existing brand)
|
|
||||||
- [ ] **Each theme has complete palette** (primary, secondary, semantic colors)
|
|
||||||
- [ ] **Live UI component examples** in each theme (buttons, forms, cards)
|
|
||||||
- [ ] **Side-by-side comparison** enabled
|
|
||||||
- [ ] **User's selection documented** in specification
|
|
||||||
|
|
||||||
### Design Direction Mockups
|
|
||||||
|
|
||||||
- [ ] **HTML file exists and is valid** (ux-design-directions.html)
|
|
||||||
- [ ] **6-8 different design approaches** shown
|
|
||||||
- [ ] **Full-screen mockups** of key screens
|
|
||||||
- [ ] **Design philosophy labeled** for each direction (e.g., "Dense Dashboard", "Spacious Explorer")
|
|
||||||
- [ ] **Interactive navigation** between directions
|
|
||||||
- [ ] **Responsive preview** toggle available
|
|
||||||
- [ ] **User's choice documented WITH reasoning** (what they liked, why it fits)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 4. Design System Foundation
|
|
||||||
|
|
||||||
- [ ] **Design system chosen** (or custom design decision documented)
|
|
||||||
- [ ] **Current version identified** (if using established system)
|
|
||||||
- [ ] **Components provided by system documented**
|
|
||||||
- [ ] **Custom components needed identified**
|
|
||||||
- [ ] **Decision rationale clear** (why this system for this project)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 5. Core Experience Definition
|
|
||||||
|
|
||||||
- [ ] **Defining experience articulated** (the ONE thing that makes this app unique)
|
|
||||||
- [ ] **Novel UX patterns identified** (if applicable)
|
|
||||||
- [ ] **Novel patterns fully designed** (interaction model, states, feedback)
|
|
||||||
- [ ] **Core experience principles defined** (speed, guidance, flexibility, feedback)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 6. Visual Foundation
|
|
||||||
|
|
||||||
### Color System
|
|
||||||
|
|
||||||
- [ ] **Complete color palette** (primary, secondary, accent, semantic, neutrals)
|
|
||||||
- [ ] **Semantic color usage defined** (success, warning, error, info)
|
|
||||||
- [ ] **Color accessibility considered** (contrast ratios for text)
|
|
||||||
- [ ] **Brand alignment** (follows existing brand or establishes new identity)
|
|
||||||
|
|
||||||
### Typography
|
|
||||||
|
|
||||||
- [ ] **Font families selected** (heading, body, monospace if needed)
|
|
||||||
- [ ] **Type scale defined** (h1-h6, body, small, etc.)
|
|
||||||
- [ ] **Font weights documented** (when to use each)
|
|
||||||
- [ ] **Line heights specified** for readability
|
|
||||||
|
|
||||||
### Spacing & Layout
|
|
||||||
|
|
||||||
- [ ] **Spacing system defined** (base unit, scale)
|
|
||||||
- [ ] **Layout grid approach** (columns, gutters)
|
|
||||||
- [ ] **Container widths** for different breakpoints
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 7. Design Direction
|
|
||||||
|
|
||||||
- [ ] **Specific direction chosen** from mockups (not generic)
|
|
||||||
- [ ] **Layout pattern documented** (navigation, content structure)
|
|
||||||
- [ ] **Visual hierarchy defined** (density, emphasis, focus)
|
|
||||||
- [ ] **Interaction patterns specified** (modal vs inline, disclosure approach)
|
|
||||||
- [ ] **Visual style documented** (minimal, balanced, rich, maximalist)
|
|
||||||
- [ ] **User's reasoning captured** (why this direction fits their vision)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 8. User Journey Flows
|
|
||||||
|
|
||||||
- [ ] **All critical journeys from PRD designed** (no missing flows)
|
|
||||||
- [ ] **Each flow has clear goal** (what user accomplishes)
|
|
||||||
- [ ] **Flow approach chosen collaboratively** (user picked from options)
|
|
||||||
- [ ] **Step-by-step documentation** (screens, actions, feedback)
|
|
||||||
- [ ] **Decision points and branching** defined
|
|
||||||
- [ ] **Error states and recovery** addressed
|
|
||||||
- [ ] **Success states specified** (completion feedback)
|
|
||||||
- [ ] **Mermaid diagrams or clear flow descriptions** included
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 9. Component Library Strategy
|
|
||||||
|
|
||||||
- [ ] **All required components identified** (from design system + custom)
|
|
||||||
- [ ] **Custom components fully specified**:
|
|
||||||
- Purpose and user-facing value
|
|
||||||
- Content/data displayed
|
|
||||||
- User actions available
|
|
||||||
- All states (default, hover, active, loading, error, disabled)
|
|
||||||
- Variants (sizes, styles, layouts)
|
|
||||||
- Behavior on interaction
|
|
||||||
- Accessibility considerations
|
|
||||||
- [ ] **Design system components customization needs** documented
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 10. UX Pattern Consistency Rules
|
|
||||||
|
|
||||||
**These patterns ensure consistent UX across the entire app**
|
|
||||||
|
|
||||||
- [ ] **Button hierarchy defined** (primary, secondary, tertiary, destructive)
|
|
||||||
- [ ] **Feedback patterns established** (success, error, warning, info, loading)
|
|
||||||
- [ ] **Form patterns specified** (labels, validation, errors, help text)
|
|
||||||
- [ ] **Modal patterns defined** (sizes, dismiss behavior, focus, stacking)
|
|
||||||
- [ ] **Navigation patterns documented** (active state, breadcrumbs, back button)
|
|
||||||
- [ ] **Empty state patterns** (first use, no results, cleared content)
|
|
||||||
- [ ] **Confirmation patterns** (when to confirm destructive actions)
|
|
||||||
- [ ] **Notification patterns** (placement, duration, stacking, priority)
|
|
||||||
- [ ] **Search patterns** (trigger, results, filters, no results)
|
|
||||||
- [ ] **Date/time patterns** (format, timezone, pickers)
|
|
||||||
|
|
||||||
**Each pattern should have:**
|
|
||||||
|
|
||||||
- [ ] Clear specification (how it works)
|
|
||||||
- [ ] Usage guidance (when to use)
|
|
||||||
- [ ] Examples (concrete implementations)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 11. Responsive Design
|
|
||||||
|
|
||||||
- [ ] **Breakpoints defined** for target devices (mobile, tablet, desktop)
|
|
||||||
- [ ] **Adaptation patterns documented** (how layouts change)
|
|
||||||
- [ ] **Navigation adaptation** (how nav changes on small screens)
|
|
||||||
- [ ] **Content organization changes** (multi-column to single, grid to list)
|
|
||||||
- [ ] **Touch targets adequate** on mobile (minimum size specified)
|
|
||||||
- [ ] **Responsive strategy aligned** with chosen design direction
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 12. Accessibility
|
|
||||||
|
|
||||||
- [ ] **WCAG compliance level specified** (A, AA, or AAA)
|
|
||||||
- [ ] **Color contrast requirements** documented (ratios for text)
|
|
||||||
- [ ] **Keyboard navigation** addressed (all interactive elements accessible)
|
|
||||||
- [ ] **Focus indicators** specified (visible focus states)
|
|
||||||
- [ ] **ARIA requirements** noted (roles, labels, announcements)
|
|
||||||
- [ ] **Screen reader considerations** (meaningful labels, structure)
|
|
||||||
- [ ] **Alt text strategy** for images
|
|
||||||
- [ ] **Form accessibility** (label associations, error identification)
|
|
||||||
- [ ] **Testing strategy** defined (automated tools, manual testing)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 13. Coherence and Integration
|
|
||||||
|
|
||||||
- [ ] **Design system and custom components visually consistent**
|
|
||||||
- [ ] **All screens follow chosen design direction**
|
|
||||||
- [ ] **Color usage consistent with semantic meanings**
|
|
||||||
- [ ] **Typography hierarchy clear and consistent**
|
|
||||||
- [ ] **Similar actions handled the same way** (pattern consistency)
|
|
||||||
- [ ] **All PRD user journeys have UX design**
|
|
||||||
- [ ] **All entry points designed**
|
|
||||||
- [ ] **Error and edge cases handled**
|
|
||||||
- [ ] **Every interactive element meets accessibility requirements**
|
|
||||||
- [ ] **All flows keyboard-navigable**
|
|
||||||
- [ ] **Colors meet contrast requirements**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 14. Cross-Workflow Alignment (Epics File Update)
|
|
||||||
|
|
||||||
**As UX design progresses, you discover implementation details that affect the story breakdown**
|
|
||||||
|
|
||||||
### Stories Discovered During UX Design
|
|
||||||
|
|
||||||
- [ ] **Review epics.md file** for alignment with UX design
|
|
||||||
- [ ] **New stories identified** during UX design that weren't in epics.md:
|
|
||||||
- [ ] Custom component build stories (if significant)
|
|
||||||
- [ ] UX pattern implementation stories
|
|
||||||
- [ ] Animation/transition stories
|
|
||||||
- [ ] Responsive adaptation stories
|
|
||||||
- [ ] Accessibility implementation stories
|
|
||||||
- [ ] Edge case handling stories discovered during journey design
|
|
||||||
- [ ] Onboarding/empty state stories
|
|
||||||
- [ ] Error state handling stories
|
|
||||||
|
|
||||||
### Story Complexity Adjustments
|
|
||||||
|
|
||||||
- [ ] **Existing stories complexity reassessed** based on UX design:
|
|
||||||
- [ ] Stories that are now more complex (UX revealed additional requirements)
|
|
||||||
- [ ] Stories that are simpler (design system handles more than expected)
|
|
||||||
- [ ] Stories that should be split (UX design shows multiple components/flows)
|
|
||||||
- [ ] Stories that can be combined (UX design shows they're tightly coupled)
|
|
||||||
|
|
||||||
### Epic Alignment
|
|
||||||
|
|
||||||
- [ ] **Epic scope still accurate** after UX design
|
|
||||||
- [ ] **New epic needed** for discovered work (if significant)
|
|
||||||
- [ ] **Epic ordering might change** based on UX dependencies
|
|
||||||
|
|
||||||
### Action Items for Epics File Update
|
|
||||||
|
|
||||||
- [ ] **List of new stories to add** to epics.md documented
|
|
||||||
- [ ] **Complexity adjustments noted** for existing stories
|
|
||||||
- [ ] **Update epics.md** OR flag for architecture review first
|
|
||||||
- [ ] **Rationale documented** for why new stories/changes are needed
|
|
||||||
|
|
||||||
**Note:** If significant story changes are identified, consider running architecture workflow BEFORE updating epics.md, since architecture decisions might reveal additional adjustments needed.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 15. Decision Rationale
|
|
||||||
|
|
||||||
**Unlike template-driven workflows, this workflow should document WHY**
|
|
||||||
|
|
||||||
- [ ] **Design system choice has rationale** (why this fits the project)
|
|
||||||
- [ ] **Color theme selection has reasoning** (why this emotional impact)
|
|
||||||
- [ ] **Design direction choice explained** (what user liked, how it fits vision)
|
|
||||||
- [ ] **User journey approaches justified** (why this flow pattern)
|
|
||||||
- [ ] **UX pattern decisions have context** (why these patterns for this app)
|
|
||||||
- [ ] **Responsive strategy aligned with user priorities**
|
|
||||||
- [ ] **Accessibility level appropriate for deployment intent**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 16. Implementation Readiness
|
|
||||||
|
|
||||||
- [ ] **Designers can create high-fidelity mockups** from this spec
|
|
||||||
- [ ] **Developers can implement** with clear UX guidance
|
|
||||||
- [ ] **Sufficient detail** for frontend development
|
|
||||||
- [ ] **Component specifications actionable** (states, variants, behaviors)
|
|
||||||
- [ ] **Flows implementable** (clear steps, decision logic, error handling)
|
|
||||||
- [ ] **Visual foundation complete** (colors, typography, spacing all defined)
|
|
||||||
- [ ] **Pattern consistency enforceable** (clear rules for implementation)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 17. Critical Failures (Auto-Fail)
|
|
||||||
|
|
||||||
- [ ] ❌ **No visual collaboration** (color themes or design mockups not generated)
|
|
||||||
- [ ] ❌ **User not involved in decisions** (auto-generated without collaboration)
|
|
||||||
- [ ] ❌ **No design direction chosen** (missing key visual decisions)
|
|
||||||
- [ ] ❌ **No user journey designs** (critical flows not documented)
|
|
||||||
- [ ] ❌ **No UX pattern consistency rules** (implementation will be inconsistent)
|
|
||||||
- [ ] ❌ **Missing core experience definition** (no clarity on what makes app unique)
|
|
||||||
- [ ] ❌ **No component specifications** (components not actionable)
|
|
||||||
- [ ] ❌ **Responsive strategy missing** (for multi-platform projects)
|
|
||||||
- [ ] ❌ **Accessibility ignored** (no compliance target or requirements)
|
|
||||||
- [ ] ❌ **Generic/templated content** (not specific to this project)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Validation Notes
|
|
||||||
|
|
||||||
**Document findings:**
|
|
||||||
|
|
||||||
- UX Design Quality: [Exceptional / Strong / Adequate / Needs Work / Incomplete]
|
|
||||||
- Collaboration Level: [Highly Collaborative / Collaborative / Somewhat Collaborative / Generated]
|
|
||||||
- Visual Artifacts: [Complete & Interactive / Partial / Missing]
|
|
||||||
- Implementation Readiness: [Ready / Needs Design Phase / Not Ready]
|
|
||||||
|
|
||||||
## **Strengths:**
|
|
||||||
|
|
||||||
## **Areas for Improvement:**
|
|
||||||
|
|
||||||
## **Recommended Actions:**
|
|
||||||
|
|
||||||
**Ready for next phase?** [Yes - Proceed to Design / Yes - Proceed to Development / Needs Refinement]
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
_This checklist validates collaborative UX design facilitation, not template generation. A successful UX workflow creates design decisions WITH the user through visual exploration and informed choices._
|
|
||||||
|
|
@ -1,289 +0,0 @@
|
||||||
# Create UX Design Workflow Instructions
|
|
||||||
|
|
||||||
<workflow name="create-ux-design">
|
|
||||||
|
|
||||||
<critical>The workflow execution engine is governed by: {project-root}/{bmad_folder}/core/tasks/workflow.xml</critical>
|
|
||||||
<critical>You MUST have already loaded and processed: {installed_path}/workflow.yaml</critical>
|
|
||||||
<critical>This workflow uses ADAPTIVE FACILITATION - adjust your communication style based on {user_skill_level}</critical>
|
|
||||||
<critical>Communicate all responses in {communication_language} and tailor to {user_skill_level}</critical>
|
|
||||||
<critical>Generate all documents in {document_output_language}</critical>
|
|
||||||
<critical>SAVE PROGRESS after each major step - use <template-output> tags throughout</critical>
|
|
||||||
<critical>⚠️ ABSOLUTELY NO TIME ESTIMATES - NEVER mention hours, days, weeks, months, or ANY time-based predictions</critical>
|
|
||||||
<critical>⚠️ CHECKPOINT PROTOCOL: After EVERY <template-output> tag, follow workflow.xml substep 2c: SAVE → SHOW checkpoint separator → DISPLAY content → PRESENT options → WAIT for user response</critical>
|
|
||||||
|
|
||||||
<step n="0" goal="Validate workflow readiness" tag="workflow-status">
|
|
||||||
<action>Check if {output_folder}/bmm-workflow-status.yaml exists</action>
|
|
||||||
|
|
||||||
<check if="status file not found">
|
|
||||||
<output>No workflow status file found. Create UX Design can run standalone or as part of BMM planning workflow.</output>
|
|
||||||
<action>Set standalone_mode = true</action>
|
|
||||||
</check>
|
|
||||||
|
|
||||||
<check if="status file found">
|
|
||||||
<action>Load and validate workflow status, check if create-ux-design is completed or out of sequence</action>
|
|
||||||
<ask>UX Design already completed or out of sequence. Continue anyway? (y/n)</ask>
|
|
||||||
<check if="n">
|
|
||||||
<action>Exit workflow</action>
|
|
||||||
</check>
|
|
||||||
<action>Set standalone_mode = false</action>
|
|
||||||
</check>
|
|
||||||
</step>
|
|
||||||
|
|
||||||
<step n="1" goal="Discover and load input documents">
|
|
||||||
<invoke-protocol name="discover_inputs" />
|
|
||||||
</step>
|
|
||||||
|
|
||||||
<step n="2" goal="Understand project and users">
|
|
||||||
<action>Review loaded context from Step 1</action>
|
|
||||||
|
|
||||||
<check if="documents_found">
|
|
||||||
<output>I've loaded your project documentation. Let me confirm what I'm seeing:
|
|
||||||
|
|
||||||
**Project:** {{project_summary_from_docs}}
|
|
||||||
**Target Users:** {{user_summary_from_docs}}</output>
|
|
||||||
<ask>Does this match your understanding? Any corrections or additions?</ask>
|
|
||||||
</check>
|
|
||||||
|
|
||||||
<check if="no_documents_found">
|
|
||||||
<ask>Let's start by understanding what you're building.
|
|
||||||
|
|
||||||
**What are you building?** (1-2 sentences)
|
|
||||||
**Who is this for?** (Describe your ideal user)</ask>
|
|
||||||
</check>
|
|
||||||
|
|
||||||
<template-output>project_and_users_confirmed</template-output>
|
|
||||||
</step>
|
|
||||||
|
|
||||||
<step n="3" goal="Define core experience and platform">
|
|
||||||
<ask>Now let's dig into the experience itself.
|
|
||||||
|
|
||||||
**What's the core experience?** (What's the ONE thing users will do most?)
|
|
||||||
**What should be absolutely effortless?**
|
|
||||||
**Which user action is most critical to get right?**
|
|
||||||
**Platform:** Web, mobile app, desktop, multiple?</ask>
|
|
||||||
|
|
||||||
<template-output>core_experience_and_platform</template-output>
|
|
||||||
</step>
|
|
||||||
|
|
||||||
<step n="4" goal="Define desired emotional response">
|
|
||||||
<ask>What should users FEEL when using this?
|
|
||||||
|
|
||||||
Empowered and in control? Delighted and surprised? Efficient and productive? Creative and inspired? Calm and focused? Connected and engaged? Something else?
|
|
||||||
|
|
||||||
What feeling would make them tell a friend about this?</ask>
|
|
||||||
|
|
||||||
<template-output>desired_emotional_response</template-output>
|
|
||||||
</step>
|
|
||||||
|
|
||||||
<step n="5" goal="Gather inspiration and analyze patterns">
|
|
||||||
<ask>Name 2-3 apps your users already love and USE regularly.
|
|
||||||
|
|
||||||
For each one, what do they do well from a UX perspective? What makes the experience compelling?</ask>
|
|
||||||
|
|
||||||
<action>Research mentioned apps to analyze current UX patterns and principles</action>
|
|
||||||
<template-output>inspiration_analysis</template-output>
|
|
||||||
</step>
|
|
||||||
|
|
||||||
<step n="6" goal="Set facilitation approach and synthesize understanding">
|
|
||||||
<action>Analyze project complexity and set facilitation mode based on {user_skill_level}</action>
|
|
||||||
|
|
||||||
<output>Here's what I'm understanding about {{project_name}}:
|
|
||||||
|
|
||||||
**Vision:** {{project_vision_summary}}
|
|
||||||
**Users:** {{user_summary}}
|
|
||||||
**Core Experience:** {{core_action_summary}}
|
|
||||||
**Desired Feeling:** {{emotional_goal}}
|
|
||||||
**Platform:** {{platform_summary}}
|
|
||||||
**Inspiration:** {{inspiration_summary_with_ux_patterns}}
|
|
||||||
|
|
||||||
This helps me understand both what we're building and the experience we're aiming for. Let's start designing!</output>
|
|
||||||
|
|
||||||
<action>Load UX design template and initialize output document</action>
|
|
||||||
<template-output>project_vision</template-output>
|
|
||||||
</step>
|
|
||||||
|
|
||||||
<step n="7" goal="Choose design system">
|
|
||||||
<action>Identify appropriate design system options based on platform and requirements</action>
|
|
||||||
|
|
||||||
<ask>Which design system approach resonates with you?
|
|
||||||
|
|
||||||
I'll present options for your platform - think of design systems like foundations that provide proven UI components and patterns, speeding development and ensuring consistency.
|
|
||||||
|
|
||||||
- Want complete visual uniqueness? (→ custom)
|
|
||||||
- Want fast development with great defaults? (→ established system)
|
|
||||||
- Have brand guidelines to follow? (→ themeable system)</ask>
|
|
||||||
|
|
||||||
<template-output>design_system_decision</template-output>
|
|
||||||
</step>
|
|
||||||
|
|
||||||
<step n="8" goal="Identify defining experience">
|
|
||||||
<ask>What's your app's defining experience - the core interaction that, if we nail it, everything else follows?
|
|
||||||
|
|
||||||
When someone describes your app to a friend, what would they say?
|
|
||||||
|
|
||||||
Examples: "Swipe to match with people" (Tinder), "Share photos that disappear" (Snapchat), "Have conversations with AI" (ChatGPT)</ask>
|
|
||||||
|
|
||||||
<action>Analyze if this core experience has established UX patterns or requires novel pattern design</action>
|
|
||||||
<template-output>defining_experience</template-output>
|
|
||||||
</step>
|
|
||||||
|
|
||||||
<step n="9" goal="Design novel patterns (if needed)">
|
|
||||||
<check if="novel_pattern_detected">
|
|
||||||
<ask>The {{pattern_name}} interaction is novel! Let's design this interaction systematically.
|
|
||||||
|
|
||||||
What's the user's goal? How should they initiate this action? What feedback should they see? How do they know it succeeded? What if something goes wrong?</ask>
|
|
||||||
<template-output>novel_pattern_mechanics</template-output>
|
|
||||||
</check>
|
|
||||||
</step>
|
|
||||||
|
|
||||||
<step n="10" goal="Define core experience principles">
|
|
||||||
<output>Based on our understanding, here are the guiding principles for the entire experience:
|
|
||||||
|
|
||||||
**Speed:** {{speed_principle}}
|
|
||||||
**Guidance:** {{guidance_principle}}
|
|
||||||
**Flexibility:** {{flexibility_principle}}
|
|
||||||
**Feedback:** {{feedback_principle}}
|
|
||||||
|
|
||||||
These principles will guide every UX decision from here forward.</output>
|
|
||||||
<template-output>core_experience_principles</template-output>
|
|
||||||
</step>
|
|
||||||
|
|
||||||
<step n="11" goal="Choose color theme and visual foundation">
|
|
||||||
<ask>Do you have existing brand guidelines or specific color palette? (y/n)
|
|
||||||
|
|
||||||
If no, I'll generate theme options based on your project's personality and goals.</ask>
|
|
||||||
|
|
||||||
<check if="existing_brand == true">
|
|
||||||
<action>Extract and document brand colors, generate semantic color mappings</action>
|
|
||||||
</check>
|
|
||||||
|
|
||||||
<check if="existing_brand == false">
|
|
||||||
<action>Generate comprehensive HTML color theme visualizer with multiple options</action>
|
|
||||||
<output>🎨 I've created a color theme visualizer! Open {color_themes_html} to explore theme options with complete UI examples.</output>
|
|
||||||
<ask>Which color theme direction resonates most? You can choose, combine, or request variations.</ask>
|
|
||||||
</check>
|
|
||||||
|
|
||||||
<action>Define typography system, spacing, and layout foundation</action>
|
|
||||||
<template-output>visual_foundation</template-output>
|
|
||||||
</step>
|
|
||||||
|
|
||||||
<step n="12" goal="Generate design direction mockups">
|
|
||||||
<action>Create 6-8 different design direction variations exploring layout, hierarchy, density, interaction patterns, and visual weight</action>
|
|
||||||
|
|
||||||
<action>Generate comprehensive HTML design direction showcase with full-screen mockups, interactive states, and comparison tools</action>
|
|
||||||
<output>🎨 Design Direction Mockups Generated! Open: {design_directions_html}
|
|
||||||
|
|
||||||
Each mockup shows a complete vision for your app's look and feel. As you explore, look for:
|
|
||||||
✓ Which layout feels most intuitive?
|
|
||||||
✓ Which information hierarchy matches your priorities?
|
|
||||||
✓ Which interaction style fits your core experience?
|
|
||||||
✓ Which visual weight feels right for your brand?</output>
|
|
||||||
|
|
||||||
<ask>Which design direction(s) resonate most? Pick a favorite, combine elements, or request modifications.</ask>
|
|
||||||
<template-output>design_direction_decision</template-output>
|
|
||||||
</step>
|
|
||||||
|
|
||||||
<step n="13" goal="Design user journeys">
|
|
||||||
<action>Extract critical user journeys from PRD</action>
|
|
||||||
|
|
||||||
<for-each journey="critical_user_journeys">
|
|
||||||
<ask>Let's design the flow for {{journey_name}}. Walk me through how a user should accomplish this task - entry, input, feedback, success. Consider the minimum steps to value, decision points, error recovery, and progressive disclosure.</ask>
|
|
||||||
|
|
||||||
<action>Present 2-3 flow approach options based on journey complexity, then create detailed flow documentation with Mermaid diagram</action>
|
|
||||||
</for-each>
|
|
||||||
|
|
||||||
<template-output>user_journey_flows</template-output>
|
|
||||||
</step>
|
|
||||||
|
|
||||||
<step n="14" goal="Define component strategy">
|
|
||||||
<action>Identify required components from design system vs custom needs</action>
|
|
||||||
|
|
||||||
<ask>For components not covered by {{design_system}}, let's define them together.
|
|
||||||
|
|
||||||
For each custom component: What's its purpose? What content/data does it display? What actions can users take? What states does it have?</ask>
|
|
||||||
|
|
||||||
<action>Document each custom component with anatomy, states, variants, behavior, and accessibility requirements</action>
|
|
||||||
<template-output>component_library_strategy</template-output>
|
|
||||||
</step>
|
|
||||||
|
|
||||||
<step n="15" goal="Define UX pattern decisions">
|
|
||||||
<output>Let's establish consistency patterns for how your app behaves in common situations - button hierarchy, feedback patterns, form patterns, modals, navigation, empty states, confirmations, notifications, search, and date/time patterns.</output>
|
|
||||||
|
|
||||||
<ask>Do you want to go through each pattern category thoroughly, focus only on the most critical for your app, or let me recommend smart defaults and you override where needed?</ask>
|
|
||||||
|
|
||||||
<action>Facilitate pattern decisions with appropriate depth, documenting chosen approaches and rationale for consistency</action>
|
|
||||||
<template-output>ux_pattern_decisions</template-output>
|
|
||||||
</step>
|
|
||||||
|
|
||||||
<step n="16" goal="Define responsive and accessibility strategy">
|
|
||||||
<ask>Let's define how your app adapts across devices.
|
|
||||||
|
|
||||||
**Desktop:** How should we use extra space? Multi-column? Side navigation?
|
|
||||||
**Tablet:** Simplified layout? Touch-optimized?
|
|
||||||
**Mobile:** Bottom navigation or hamburger menu? How do layouts collapse?</ask>
|
|
||||||
|
|
||||||
<action>Define breakpoint strategy and adaptation patterns</action>
|
|
||||||
|
|
||||||
<ask>Accessibility strategy: WCAG Level A (basic), AA (recommended standard), or AAA (highest)?
|
|
||||||
|
|
||||||
Based on your deployment intent: {{recommendation}}</ask>
|
|
||||||
|
|
||||||
<action>Define accessibility requirements and testing strategy</action>
|
|
||||||
<template-output>responsive_accessibility_strategy</template-output>
|
|
||||||
</step>
|
|
||||||
|
|
||||||
<step n="17" goal="Generate optional visualizations">
|
|
||||||
<ask>🎨 One more thing! Want to see your design come to life?
|
|
||||||
|
|
||||||
1. **Key Screens Showcase** - 6-8 panels showing your app's main screens with all your design choices applied
|
|
||||||
2. **User Journey Visualization** - Step-by-step HTML mockup of one critical user journey
|
|
||||||
3. **Something else** - Tell me what you want to see!
|
|
||||||
4. **Skip for now** - I'll just finalize the documentation</ask>
|
|
||||||
|
|
||||||
<check if="user_wants_visualizations">
|
|
||||||
<action>Generate requested HTML visualizations applying all design decisions</action>
|
|
||||||
</check>
|
|
||||||
|
|
||||||
<template-output>completion_summary</template-output>
|
|
||||||
</step>
|
|
||||||
|
|
||||||
<step n="18" goal="Finalize UX design specification">
|
|
||||||
<action>Ensure document is complete with all template-output sections filled</action>
|
|
||||||
|
|
||||||
<output>✅ **UX Design Specification Complete!**
|
|
||||||
|
|
||||||
**Core Deliverables:**
|
|
||||||
|
|
||||||
- ✅ UX Design Specification: {default_output_file}
|
|
||||||
- ✅ Color Theme Visualizer: {color_themes_html}
|
|
||||||
- ✅ Design Direction Mockups: {design_directions_html}
|
|
||||||
|
|
||||||
**Recommended Next Steps:**
|
|
||||||
|
|
||||||
<check if="tracking_mode == true">
|
|
||||||
- **Next required:** {{next_workflow}} ({{next_agent}} agent)
|
|
||||||
- **Optional:** Run validation with \*validate-design, or generate additional UX artifacts
|
|
||||||
Check status anytime with: `workflow-status`
|
|
||||||
</check>
|
|
||||||
|
|
||||||
<check if="tracking_mode != true">
|
|
||||||
- Run validation checklist with \*validate-design (recommended)
|
|
||||||
- **Solution Architecture workflow** (with UX context) - *Recommended next step after completing PRD and UX Design*
|
|
||||||
- Or run `workflow-init` to create a workflow path and get guided next steps
|
|
||||||
</check>
|
|
||||||
|
|
||||||
**Optional Follow-Up Workflows:**
|
|
||||||
|
|
||||||
- Wireframe Generation / Figma Design / Interactive Prototype workflows
|
|
||||||
- Component Showcase / AI Frontend Prompt workflows
|
|
||||||
</output>
|
|
||||||
|
|
||||||
<action>Save final document</action>
|
|
||||||
|
|
||||||
<check if="standalone_mode != true">
|
|
||||||
<action>Update workflow status with file path and determine next workflow</action>
|
|
||||||
</check>
|
|
||||||
|
|
||||||
</step>
|
|
||||||
|
|
||||||
</workflow>
|
|
||||||
|
|
@ -0,0 +1,142 @@
|
||||||
|
# Step 1: UX Design Workflow Initialization
|
||||||
|
|
||||||
|
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||||
|
|
||||||
|
- 🛑 NEVER generate content without user input
|
||||||
|
- ✅ ALWAYS treat this as collaborative discovery between UX facilitator and stakeholder
|
||||||
|
- 📋 YOU ARE A UX FACILITATOR, not a content generator
|
||||||
|
- 💬 FOCUS on initialization and setup only - don't look ahead to future steps
|
||||||
|
- 🚪 DETECT existing workflow state and handle continuation properly
|
||||||
|
|
||||||
|
## EXECUTION PROTOCOLS:
|
||||||
|
|
||||||
|
- 🎯 Show your analysis before taking any action
|
||||||
|
- 💾 Initialize document and update frontmatter
|
||||||
|
- 📖 Set up frontmatter `stepsCompleted: [1]` before loading next step
|
||||||
|
- 🚫 FORBIDDEN to load next step until setup is complete
|
||||||
|
|
||||||
|
## CONTEXT BOUNDARIES:
|
||||||
|
|
||||||
|
- Variables from workflow.md are available in memory
|
||||||
|
- Previous context = what's in output document + frontmatter
|
||||||
|
- Don't assume knowledge from other steps
|
||||||
|
- Input document discovery happens in this step
|
||||||
|
|
||||||
|
## YOUR TASK:
|
||||||
|
|
||||||
|
Initialize the UX design workflow by detecting continuation state and setting up the design specification document.
|
||||||
|
|
||||||
|
## INITIALIZATION SEQUENCE:
|
||||||
|
|
||||||
|
### 1. Check for Existing Workflow
|
||||||
|
|
||||||
|
First, check if the output document already exists:
|
||||||
|
|
||||||
|
- Look for file at `{output_folder}/ux-design-specification.md`
|
||||||
|
- If exists, read the complete file including frontmatter
|
||||||
|
- If not exists, this is a fresh workflow
|
||||||
|
|
||||||
|
### 2. Handle Continuation (If Document Exists)
|
||||||
|
|
||||||
|
If the document exists and has frontmatter with `stepsCompleted`:
|
||||||
|
|
||||||
|
- **STOP here** and load `./step-01b-continue.md` immediately
|
||||||
|
- Do not proceed with any initialization tasks
|
||||||
|
- Let step-01b handle the continuation logic
|
||||||
|
|
||||||
|
### 3. Fresh Workflow Setup (If No Document)
|
||||||
|
|
||||||
|
If no document exists or no `stepsCompleted` in frontmatter:
|
||||||
|
|
||||||
|
#### A. Input Document Discovery
|
||||||
|
|
||||||
|
Discover and load context documents using smart discovery:
|
||||||
|
|
||||||
|
**PRD (Priority: Sharded → Whole):**
|
||||||
|
|
||||||
|
1. Check for sharded PRD folder: `{output_folder}/*prd*/**/*.md`
|
||||||
|
2. If folder exists: Load EVERY file in that folder completely for UX context
|
||||||
|
3. If no folder exists: Try whole file: `{output_folder}/*prd*.md`
|
||||||
|
4. Add discovered files to `inputDocuments` frontmatter
|
||||||
|
|
||||||
|
**Product Brief (Priority: Sharded → Whole):**
|
||||||
|
|
||||||
|
1. Check for sharded brief folder: `{output_folder}/*brief*/**/*.md`
|
||||||
|
2. If folder exists: Load EVERY file in that folder completely
|
||||||
|
3. If no folder exists: Try whole file: `{output_folder}/*brief*.md`
|
||||||
|
4. Add discovered files to `inputDocuments` frontmatter
|
||||||
|
|
||||||
|
**Other Context (Priority: Sharded → Whole):**
|
||||||
|
|
||||||
|
- Epics: `{output_folder}/*epic*/**/*.md` or `{output_folder}/*epic*.md`
|
||||||
|
- Brainstorming: `{output_folder}/*brainstorm*/**/*.md` or `{output_folder}/*brainstorm*.md`
|
||||||
|
|
||||||
|
**Loading Rules:**
|
||||||
|
|
||||||
|
- Load ALL discovered files completely (no offset/limit)
|
||||||
|
- For sharded folders, load ALL files to get complete picture
|
||||||
|
- Track all successfully loaded files in frontmatter `inputDocuments` array
|
||||||
|
|
||||||
|
#### B. Create Initial Document
|
||||||
|
|
||||||
|
Copy the template from `{installed_path}/ux-design-template.md` to `{output_folder}/ux-design-specification.md`
|
||||||
|
Initialize frontmatter with:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
stepsCompleted: []
|
||||||
|
inputDocuments: []
|
||||||
|
workflowType: 'ux-design'
|
||||||
|
lastStep: 0
|
||||||
|
project_name: '{{project_name}}'
|
||||||
|
user_name: '{{user_name}}'
|
||||||
|
date: '{{date}}'
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
#### C. Complete Initialization and Report
|
||||||
|
|
||||||
|
Complete setup and report to user:
|
||||||
|
|
||||||
|
**Document Setup:**
|
||||||
|
|
||||||
|
- Created: `{output_folder}/ux-design-specification.md` from template
|
||||||
|
- Initialized frontmatter with workflow state
|
||||||
|
|
||||||
|
**Input Documents Discovered:**
|
||||||
|
Report what was found:
|
||||||
|
"Welcome {{user_name}}! I've set up your UX design workspace for {{project_name}}.
|
||||||
|
|
||||||
|
**Documents Found:**
|
||||||
|
|
||||||
|
- PRD: {number of PRD files loaded or "None found"}
|
||||||
|
- Product brief: {number of brief files loaded or "None found"}
|
||||||
|
- Other context: {number of other files loaded or "None found"}
|
||||||
|
|
||||||
|
**Files loaded:** {list of specific file names or "No additional documents found"}
|
||||||
|
|
||||||
|
Do you have any other documents you'd like me to include, or shall we continue to the next step?
|
||||||
|
|
||||||
|
[C] Continue to UX discovery"
|
||||||
|
|
||||||
|
## SUCCESS METRICS:
|
||||||
|
|
||||||
|
✅ Existing workflow detected and handed off to step-01b correctly
|
||||||
|
✅ Fresh workflow initialized with template and frontmatter
|
||||||
|
✅ Input documents discovered and loaded using sharded-first logic
|
||||||
|
✅ All discovered files tracked in frontmatter `inputDocuments`
|
||||||
|
✅ User confirmed document setup and can proceed
|
||||||
|
|
||||||
|
## FAILURE MODES:
|
||||||
|
|
||||||
|
❌ Proceeding with fresh initialization when existing workflow exists
|
||||||
|
❌ Not updating frontmatter with discovered input documents
|
||||||
|
❌ Creating document without proper template
|
||||||
|
❌ Not checking sharded folders first before whole files
|
||||||
|
❌ Not reporting what documents were found to user
|
||||||
|
|
||||||
|
## NEXT STEP:
|
||||||
|
|
||||||
|
After user selects [C] to continue, load `./step-02-discovery.md` to begin the UX discovery phase.
|
||||||
|
|
||||||
|
Remember: Do NOT proceed to step-02 until user explicitly selects [C] to continue!
|
||||||
|
|
@ -0,0 +1,119 @@
|
||||||
|
# Step 1B: UX Design Workflow Continuation
|
||||||
|
|
||||||
|
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||||
|
|
||||||
|
- 🛑 NEVER generate content without user input
|
||||||
|
- ✅ ALWAYS treat this as collaborative discovery between UX facilitator and stakeholder
|
||||||
|
- 📋 YOU ARE A UX FACILITATOR, not a content generator
|
||||||
|
- 💬 FOCUS on understanding where we left off and continuing appropriately
|
||||||
|
- 🚪 RESUME workflow from exact point where it was interrupted
|
||||||
|
|
||||||
|
## EXECUTION PROTOCOLS:
|
||||||
|
|
||||||
|
- 🎯 Show your analysis of current state before taking action
|
||||||
|
- 💾 Keep existing frontmatter `stepsCompleted` values
|
||||||
|
- 📖 Only load documents that were already tracked in `inputDocuments`
|
||||||
|
- 🚫 FORBIDDEN to modify content completed in previous steps
|
||||||
|
|
||||||
|
## CONTEXT BOUNDARIES:
|
||||||
|
|
||||||
|
- Current document and frontmatter are already loaded
|
||||||
|
- Previous context = complete document + existing frontmatter
|
||||||
|
- Input documents listed in frontmatter were already processed
|
||||||
|
- Last completed step = `lastStep` value from frontmatter
|
||||||
|
|
||||||
|
## YOUR TASK:
|
||||||
|
|
||||||
|
Resume the UX design workflow from where it was left off, ensuring smooth continuation.
|
||||||
|
|
||||||
|
## CONTINUATION SEQUENCE:
|
||||||
|
|
||||||
|
### 1. Analyze Current State
|
||||||
|
|
||||||
|
Review the frontmatter to understand:
|
||||||
|
|
||||||
|
- `stepsCompleted`: Which steps are already done
|
||||||
|
- `lastStep`: The most recently completed step number
|
||||||
|
- `inputDocuments`: What context was already loaded
|
||||||
|
- All other frontmatter variables
|
||||||
|
|
||||||
|
### 2. Load All Input Documents
|
||||||
|
|
||||||
|
Reload the context documents listed in `inputDocuments`:
|
||||||
|
|
||||||
|
- For each document in `inputDocuments`, load the complete file
|
||||||
|
- This ensures you have full context for continuation
|
||||||
|
- Don't discover new documents - only reload what was previously processed
|
||||||
|
|
||||||
|
### 3. Summarize Current Progress
|
||||||
|
|
||||||
|
Welcome the user back and provide context:
|
||||||
|
"Welcome back {{user_name}}! I'm resuming our UX design collaboration for {{project_name}}.
|
||||||
|
|
||||||
|
**Current Progress:**
|
||||||
|
|
||||||
|
- Steps completed: {stepsCompleted}
|
||||||
|
- Last worked on: Step {lastStep}
|
||||||
|
- Context documents available: {len(inputDocuments)} files
|
||||||
|
- Current UX design specification is ready with all completed sections
|
||||||
|
|
||||||
|
**Document Status:**
|
||||||
|
|
||||||
|
- Current UX design document is ready with all completed sections
|
||||||
|
- Ready to continue from where we left off
|
||||||
|
|
||||||
|
Does this look right, or do you want to make any adjustments before we proceed?"
|
||||||
|
|
||||||
|
### 4. Determine Next Step
|
||||||
|
|
||||||
|
Based on `lastStep` value, determine which step to load next:
|
||||||
|
|
||||||
|
- If `lastStep = 1` → Load `./step-02-discovery.md`
|
||||||
|
- If `lastStep = 2` → Load `./step-03-core-experience.md`
|
||||||
|
- If `lastStep = 3` → Load `./step-04-emotional-response.md`
|
||||||
|
- Continue this pattern for all steps
|
||||||
|
- If `lastStep` indicates final step → Workflow already complete
|
||||||
|
|
||||||
|
### 5. Present Continuation Options
|
||||||
|
|
||||||
|
After presenting current progress, ask:
|
||||||
|
"Ready to continue with Step {nextStepNumber}: {nextStepTitle}?
|
||||||
|
|
||||||
|
[C] Continue to Step {nextStepNumber}"
|
||||||
|
|
||||||
|
## SUCCESS METRICS:
|
||||||
|
|
||||||
|
✅ All previous input documents successfully reloaded
|
||||||
|
✅ Current workflow state accurately analyzed and presented
|
||||||
|
✅ User confirms understanding of progress
|
||||||
|
✅ Correct next step identified and prepared for loading
|
||||||
|
|
||||||
|
## FAILURE MODES:
|
||||||
|
|
||||||
|
❌ Discovering new input documents instead of reloading existing ones
|
||||||
|
❌ Modifying content from already completed steps
|
||||||
|
❌ Loading wrong next step based on `lastStep` value
|
||||||
|
❌ Proceeding without user confirmation of current state
|
||||||
|
|
||||||
|
## WORKFLOW ALREADY COMPLETE?
|
||||||
|
|
||||||
|
If `lastStep` indicates the final step is completed:
|
||||||
|
"Great news! It looks like we've already completed the UX design workflow for {{project_name}}.
|
||||||
|
|
||||||
|
The final UX design specification is ready at {output_folder}/ux-design-specification.md with all sections completed through step {finalStepNumber}.
|
||||||
|
|
||||||
|
The complete UX design includes visual foundations, user flows, and design specifications ready for implementation.
|
||||||
|
|
||||||
|
Would you like me to:
|
||||||
|
|
||||||
|
- Review the completed UX design specification with you
|
||||||
|
- Suggest next workflow steps (like wireframe generation or architecture)
|
||||||
|
- Start a new UX design revision
|
||||||
|
|
||||||
|
What would be most helpful?"
|
||||||
|
|
||||||
|
## NEXT STEP:
|
||||||
|
|
||||||
|
After user confirms they're ready to continue, load the appropriate next step file based on the `lastStep` value from frontmatter.
|
||||||
|
|
||||||
|
Remember: Do NOT load the next step until user explicitly selects [C] to continue!
|
||||||
|
|
@ -0,0 +1,202 @@
|
||||||
|
# Step 2: Project Understanding
|
||||||
|
|
||||||
|
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||||
|
|
||||||
|
- 🛑 NEVER generate content without user input
|
||||||
|
- ✅ ALWAYS treat this as collaborative discovery between UX facilitator and stakeholder
|
||||||
|
- 📋 YOU ARE A UX FACILITATOR, not a content generator
|
||||||
|
- 💬 FOCUS on understanding project context and user needs
|
||||||
|
- 🎯 COLLABORATIVE discovery, not assumption-based design
|
||||||
|
|
||||||
|
## EXECUTION PROTOCOLS:
|
||||||
|
|
||||||
|
- 🎯 Show your analysis before taking any action
|
||||||
|
- ⚠️ Present A/P/C menu after generating project understanding content
|
||||||
|
- 💾 ONLY save when user chooses C (Continue)
|
||||||
|
- 📖 Update frontmatter `stepsCompleted: [1, 2]` before loading next step
|
||||||
|
- 🚫 FORBIDDEN to load next step until C is selected
|
||||||
|
|
||||||
|
## COLLABORATION MENUS (A/P/C):
|
||||||
|
|
||||||
|
This step will generate content and present choices:
|
||||||
|
|
||||||
|
- **A (Advanced Elicitation)**: Use discovery protocols to develop deeper project insights
|
||||||
|
- **P (Party Mode)**: Bring multiple perspectives to understand project context
|
||||||
|
- **C (Continue)**: Save the content to the document and proceed to next step
|
||||||
|
|
||||||
|
## PROTOCOL INTEGRATION:
|
||||||
|
|
||||||
|
- When 'A' selected: Execute {project-root}/{bmad_folder}/core/tasks/advanced-elicitation.xml
|
||||||
|
- When 'P' selected: Execute {project-root}/{bmad_folder}/core/workflows/party-mode
|
||||||
|
- PROTOCOLS always return to this step's A/P/C menu
|
||||||
|
- User accepts/rejects protocol changes before proceeding
|
||||||
|
|
||||||
|
## CONTEXT BOUNDARIES:
|
||||||
|
|
||||||
|
- Current document and frontmatter from step 1 are available
|
||||||
|
- Input documents (PRD, briefs, epics) already loaded are in memory
|
||||||
|
- No additional data files needed for this step
|
||||||
|
- Focus on project and user understanding
|
||||||
|
|
||||||
|
## YOUR TASK:
|
||||||
|
|
||||||
|
Understand the project context, target users, and what makes this product special from a UX perspective.
|
||||||
|
|
||||||
|
## PROJECT DISCOVERY SEQUENCE:
|
||||||
|
|
||||||
|
### 1. Review Loaded Context
|
||||||
|
|
||||||
|
Start by analyzing what we know from the loaded documents:
|
||||||
|
"Based on the project documentation we have loaded, let me confirm what I'm understanding about {{project_name}}.
|
||||||
|
|
||||||
|
**From the documents:**
|
||||||
|
{summary of key insights from loaded PRD, briefs, and other context documents}
|
||||||
|
|
||||||
|
**Target Users:**
|
||||||
|
{summary of user information from loaded documents}
|
||||||
|
|
||||||
|
**Key Features/Goals:**
|
||||||
|
{summary of main features and goals from loaded documents}
|
||||||
|
|
||||||
|
Does this match your understanding? Are there any corrections or additions you'd like to make?"
|
||||||
|
|
||||||
|
### 2. Fill Context Gaps (If no documents or gaps exist)
|
||||||
|
|
||||||
|
If no documents were loaded or key information is missing:
|
||||||
|
"Since we don't have complete documentation, let's start with the essentials:
|
||||||
|
|
||||||
|
**What are you building?** (Describe your product in 1-2 sentences)
|
||||||
|
|
||||||
|
**Who is this for?** (Describe your ideal user or target audience)
|
||||||
|
|
||||||
|
**What makes this special or different?** (What's the unique value proposition?)
|
||||||
|
|
||||||
|
**What's the main thing users will do with this?** (Core user action or goal)"
|
||||||
|
|
||||||
|
### 3. Explore User Context Deeper
|
||||||
|
|
||||||
|
Dive into user understanding:
|
||||||
|
"Let me understand your users better to inform the UX design:
|
||||||
|
|
||||||
|
**User Context Questions:**
|
||||||
|
|
||||||
|
- What problem are users trying to solve?
|
||||||
|
- What frustrates them with current solutions?
|
||||||
|
- What would make them say 'this is exactly what I needed'?
|
||||||
|
- How tech-savvy are your target users?
|
||||||
|
- What devices will they use most?
|
||||||
|
- When/where will they use this product?"
|
||||||
|
|
||||||
|
### 4. Identify UX Design Challenges
|
||||||
|
|
||||||
|
Surface the key UX challenges to address:
|
||||||
|
"From what we've discussed, I'm seeing some key UX design considerations:
|
||||||
|
|
||||||
|
**Design Challenges:**
|
||||||
|
|
||||||
|
- [Identify 2-3 key UX challenges based on project type and user needs]
|
||||||
|
- [Note any platform-specific considerations]
|
||||||
|
- [Highlight any complex user flows or interactions]
|
||||||
|
|
||||||
|
**Design Opportunities:**
|
||||||
|
|
||||||
|
- [Identify 2-3 areas where great UX could create competitive advantage]
|
||||||
|
- [Note any opportunities for innovative UX patterns]
|
||||||
|
|
||||||
|
Does this capture the key UX considerations we need to address?"
|
||||||
|
|
||||||
|
### 5. Generate Project Understanding Content
|
||||||
|
|
||||||
|
Prepare the content to append to the document:
|
||||||
|
|
||||||
|
#### Content Structure:
|
||||||
|
|
||||||
|
When saving to document, append these Level 2 and Level 3 sections:
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
## Executive Summary
|
||||||
|
|
||||||
|
### Project Vision
|
||||||
|
|
||||||
|
[Project vision summary based on conversation]
|
||||||
|
|
||||||
|
### Target Users
|
||||||
|
|
||||||
|
[Target user descriptions based on conversation]
|
||||||
|
|
||||||
|
### Key Design Challenges
|
||||||
|
|
||||||
|
[Key UX challenges identified based on conversation]
|
||||||
|
|
||||||
|
### Design Opportunities
|
||||||
|
|
||||||
|
[Design opportunities identified based on conversation]
|
||||||
|
```
|
||||||
|
|
||||||
|
### 6. Present Content and Menu
|
||||||
|
|
||||||
|
Show the generated project understanding content and present choices:
|
||||||
|
"I've documented our understanding of {{project_name}} from a UX perspective. This will guide all our design decisions moving forward.
|
||||||
|
|
||||||
|
**Here's what I'll add to the document:**
|
||||||
|
|
||||||
|
[Show the complete markdown content from step 5]
|
||||||
|
|
||||||
|
**What would you like to do?**
|
||||||
|
[A] Advanced Elicitation - Let's dive deeper into project understanding
|
||||||
|
[P] Party Mode - Bring different perspectives on user needs and challenges
|
||||||
|
[C] Continue - Save this to the document and move to core experience definition"
|
||||||
|
|
||||||
|
### 7. Handle Menu Selection
|
||||||
|
|
||||||
|
#### If 'A' (Advanced Elicitation):
|
||||||
|
|
||||||
|
- Execute advanced-elicitation.xml with the current project understanding content
|
||||||
|
- Process the enhanced project insights that come back
|
||||||
|
- Ask user: "Accept these improvements to the project understanding? (y/n)"
|
||||||
|
- If yes: Update content with improvements, then return to A/P/C menu
|
||||||
|
- If no: Keep original content, then return to A/P/C menu
|
||||||
|
|
||||||
|
#### If 'P' (Party Mode):
|
||||||
|
|
||||||
|
- Execute party-mode workflow with the current project understanding
|
||||||
|
- Process the collaborative insights and different perspectives that come back
|
||||||
|
- Ask user: "Accept these changes to the project understanding? (y/n)"
|
||||||
|
- If yes: Update content with improvements, then return to A/P/C menu
|
||||||
|
- If no: Keep original content, then return to A/P/C menu
|
||||||
|
|
||||||
|
#### If 'C' (Continue):
|
||||||
|
|
||||||
|
- Append the final content to `{output_folder}/ux-design-specification.md`
|
||||||
|
- Update frontmatter: `stepsCompleted: [1, 2]`
|
||||||
|
- Load `./step-03-core-experience.md`
|
||||||
|
|
||||||
|
## APPEND TO DOCUMENT:
|
||||||
|
|
||||||
|
When user selects 'C', append the content directly to the document using the structure from step 5.
|
||||||
|
|
||||||
|
## SUCCESS METRICS:
|
||||||
|
|
||||||
|
✅ All available context documents reviewed and synthesized
|
||||||
|
✅ Project vision clearly articulated
|
||||||
|
✅ Target users well understood
|
||||||
|
✅ Key UX challenges identified
|
||||||
|
✅ Design opportunities surfaced
|
||||||
|
✅ A/P/C menu presented and handled correctly
|
||||||
|
✅ Content properly appended to document when C selected
|
||||||
|
|
||||||
|
## FAILURE MODES:
|
||||||
|
|
||||||
|
❌ Not reviewing loaded context documents thoroughly
|
||||||
|
❌ Making assumptions about users without asking
|
||||||
|
❌ Missing key UX challenges that will impact design
|
||||||
|
❌ Not identifying design opportunities
|
||||||
|
❌ Generating generic content without real project insight
|
||||||
|
❌ Not presenting A/P/C menu after content generation
|
||||||
|
❌ Appending content without user selecting 'C'
|
||||||
|
|
||||||
|
## NEXT STEP:
|
||||||
|
|
||||||
|
After user selects 'C' and content is saved to document, load `./step-03-core-experience.md` to define the core user experience.
|
||||||
|
|
||||||
|
Remember: Do NOT proceed to step-03 until user explicitly selects 'C' from the A/P/C menu and content is saved!
|
||||||
|
|
@ -0,0 +1,208 @@
|
||||||
|
# Step 3: Core Experience Definition
|
||||||
|
|
||||||
|
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||||
|
|
||||||
|
- 🛑 NEVER generate content without user input
|
||||||
|
- ✅ ALWAYS treat this as collaborative discovery between UX facilitator and stakeholder
|
||||||
|
- 📋 YOU ARE A UX FACILITATOR, not a content generator
|
||||||
|
- 💬 FOCUS on defining the core user experience and platform
|
||||||
|
- 🎯 COLLABORATIVE discovery, not assumption-based design
|
||||||
|
|
||||||
|
## EXECUTION PROTOCOLS:
|
||||||
|
|
||||||
|
- 🎯 Show your analysis before taking any action
|
||||||
|
- ⚠️ Present A/P/C menu after generating core experience content
|
||||||
|
- 💾 ONLY save when user chooses C (Continue)
|
||||||
|
- 📖 Update frontmatter `stepsCompleted: [1, 2, 3]` before loading next step
|
||||||
|
- 🚫 FORBIDDEN to load next step until C is selected
|
||||||
|
|
||||||
|
## COLLABORATION MENUS (A/P/C):
|
||||||
|
|
||||||
|
This step will generate content and present choices:
|
||||||
|
|
||||||
|
- **A (Advanced Elicitation)**: Use discovery protocols to develop deeper experience insights
|
||||||
|
- **P (Party Mode)**: Bring multiple perspectives to define optimal user experience
|
||||||
|
- **C (Continue)**: Save the content to the document and proceed to next step
|
||||||
|
|
||||||
|
## PROTOCOL INTEGRATION:
|
||||||
|
|
||||||
|
- When 'A' selected: Execute {project-root}/{bmad_folder}/core/tasks/advanced-elicitation.xml
|
||||||
|
- When 'P' selected: Execute {project-root}/{bmad_folder}/core/workflows/party-mode
|
||||||
|
- PROTOCOLS always return to this step's A/P/C menu
|
||||||
|
- User accepts/rejects protocol changes before proceeding
|
||||||
|
|
||||||
|
## CONTEXT BOUNDARIES:
|
||||||
|
|
||||||
|
- Current document and frontmatter from previous steps are available
|
||||||
|
- Project understanding from step 2 informs this step
|
||||||
|
- No additional data files needed for this step
|
||||||
|
- Focus on core experience and platform decisions
|
||||||
|
|
||||||
|
## YOUR TASK:
|
||||||
|
|
||||||
|
Define the core user experience, platform requirements, and what makes the interaction effortless.
|
||||||
|
|
||||||
|
## CORE EXPERIENCE DISCOVERY SEQUENCE:
|
||||||
|
|
||||||
|
### 1. Define Core User Action
|
||||||
|
|
||||||
|
Start by identifying the most important user interaction:
|
||||||
|
"Now let's dig into the heart of the user experience for {{project_name}}.
|
||||||
|
|
||||||
|
**Core Experience Questions:**
|
||||||
|
|
||||||
|
- What's the ONE thing users will do most frequently?
|
||||||
|
- What user action is absolutely critical to get right?
|
||||||
|
- What should be completely effortless for users?
|
||||||
|
- If we nail one interaction, everything else follows - what is it?
|
||||||
|
|
||||||
|
Think about the core loop or primary action that defines your product's value."
|
||||||
|
|
||||||
|
### 2. Explore Platform Requirements
|
||||||
|
|
||||||
|
Determine where and how users will interact:
|
||||||
|
"Let's define the platform context for {{project_name}}:
|
||||||
|
|
||||||
|
**Platform Questions:**
|
||||||
|
|
||||||
|
- Web, mobile app, desktop, or multiple platforms?
|
||||||
|
- Will this be primarily touch-based or mouse/keyboard?
|
||||||
|
- Any specific platform requirements or constraints?
|
||||||
|
- Do we need to consider offline functionality?
|
||||||
|
- Any device-specific capabilities we should leverage?"
|
||||||
|
|
||||||
|
### 3. Identify Effortless Interactions
|
||||||
|
|
||||||
|
Surface what should feel magical or completely seamless:
|
||||||
|
"**Effortless Experience Design:**
|
||||||
|
|
||||||
|
- What user actions should feel completely natural and require zero thought?
|
||||||
|
- Where do users currently struggle with similar products?
|
||||||
|
- What interaction, if made effortless, would create delight?
|
||||||
|
- What should happen automatically without user intervention?
|
||||||
|
- Where can we eliminate steps that competitors require?"
|
||||||
|
|
||||||
|
### 4. Define Critical Success Moments
|
||||||
|
|
||||||
|
Identify the moments that determine success or failure:
|
||||||
|
"**Critical Success Moments:**
|
||||||
|
|
||||||
|
- What's the moment where users realize 'this is better'?
|
||||||
|
- When does the user feel successful or accomplished?
|
||||||
|
- What interaction, if failed, would ruin the experience?
|
||||||
|
- What are the make-or-break user flows?
|
||||||
|
- Where does first-time user success happen?"
|
||||||
|
|
||||||
|
### 5. Synthesize Experience Principles
|
||||||
|
|
||||||
|
Extract guiding principles from the conversation:
|
||||||
|
"Based on our discussion, I'm hearing these core experience principles for {{project_name}}:
|
||||||
|
|
||||||
|
**Experience Principles:**
|
||||||
|
|
||||||
|
- [Principle 1 based on core action focus]
|
||||||
|
- [Principle 2 based on effortless interactions]
|
||||||
|
- [Principle 3 based on platform considerations]
|
||||||
|
- [Principle 4 based on critical success moments]
|
||||||
|
|
||||||
|
These principles will guide all our UX decisions. Do these capture what's most important?"
|
||||||
|
|
||||||
|
### 6. Generate Core Experience Content
|
||||||
|
|
||||||
|
Prepare the content to append to the document:
|
||||||
|
|
||||||
|
#### Content Structure:
|
||||||
|
|
||||||
|
When saving to document, append these Level 2 and Level 3 sections:
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
## Core User Experience
|
||||||
|
|
||||||
|
### Defining Experience
|
||||||
|
|
||||||
|
[Core experience definition based on conversation]
|
||||||
|
|
||||||
|
### Platform Strategy
|
||||||
|
|
||||||
|
[Platform requirements and decisions based on conversation]
|
||||||
|
|
||||||
|
### Effortless Interactions
|
||||||
|
|
||||||
|
[Effortless interaction areas identified based on conversation]
|
||||||
|
|
||||||
|
### Critical Success Moments
|
||||||
|
|
||||||
|
[Critical success moments defined based on conversation]
|
||||||
|
|
||||||
|
### Experience Principles
|
||||||
|
|
||||||
|
[Guiding principles for UX decisions based on conversation]
|
||||||
|
```
|
||||||
|
|
||||||
|
### 7. Present Content and Menu
|
||||||
|
|
||||||
|
Show the generated core experience content and present choices:
|
||||||
|
"I've defined the core user experience for {{project_name}} based on our conversation. This establishes the foundation for all our UX design decisions.
|
||||||
|
|
||||||
|
**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 the core experience definition
|
||||||
|
[P] Party Mode - Bring different perspectives on the user experience
|
||||||
|
[C] Continue - Save this to the document and move to emotional response definition"
|
||||||
|
|
||||||
|
### 8. Handle Menu Selection
|
||||||
|
|
||||||
|
#### If 'A' (Advanced Elicitation):
|
||||||
|
|
||||||
|
- Execute advanced-elicitation.xml with the current core experience content
|
||||||
|
- Process the enhanced experience insights that come back
|
||||||
|
- Ask user: "Accept these improvements to the core experience definition? (y/n)"
|
||||||
|
- If yes: Update content with improvements, then return to A/P/C menu
|
||||||
|
- If no: Keep original content, then return to A/P/C menu
|
||||||
|
|
||||||
|
#### If 'P' (Party Mode):
|
||||||
|
|
||||||
|
- Execute party-mode workflow with the current core experience definition
|
||||||
|
- Process the collaborative experience improvements that come back
|
||||||
|
- Ask user: "Accept these changes to the core experience definition? (y/n)"
|
||||||
|
- If yes: Update content with improvements, then return to A/P/C menu
|
||||||
|
- If no: Keep original content, then return to A/P/C menu
|
||||||
|
|
||||||
|
#### If 'C' (Continue):
|
||||||
|
|
||||||
|
- Append the final content to `{output_folder}/ux-design-specification.md`
|
||||||
|
- Update frontmatter: `stepsCompleted: [1, 2, 3]`
|
||||||
|
- Load `./step-04-emotional-response.md`
|
||||||
|
|
||||||
|
## APPEND TO DOCUMENT:
|
||||||
|
|
||||||
|
When user selects 'C', append the content directly to the document using the structure from step 6.
|
||||||
|
|
||||||
|
## SUCCESS METRICS:
|
||||||
|
|
||||||
|
✅ Core user action clearly identified and defined
|
||||||
|
✅ Platform requirements thoroughly explored
|
||||||
|
✅ Effortless interaction areas identified
|
||||||
|
✅ Critical success moments mapped out
|
||||||
|
✅ Experience principles established as guiding framework
|
||||||
|
✅ A/P/C menu presented and handled correctly
|
||||||
|
✅ Content properly appended to document when C selected
|
||||||
|
|
||||||
|
## FAILURE MODES:
|
||||||
|
|
||||||
|
❌ Missing the core user action that defines the product
|
||||||
|
❌ Not properly considering platform requirements
|
||||||
|
❌ Overlooking what should be effortless for users
|
||||||
|
❌ Not identifying critical make-or-break interactions
|
||||||
|
❌ Experience principles too generic or not actionable
|
||||||
|
❌ Not presenting A/P/C menu after content generation
|
||||||
|
❌ Appending content without user selecting 'C'
|
||||||
|
|
||||||
|
## NEXT STEP:
|
||||||
|
|
||||||
|
After user selects 'C' and content is saved to document, load `./step-04-emotional-response.md` to define desired emotional responses.
|
||||||
|
|
||||||
|
Remember: Do NOT proceed to step-04 until user explicitly selects 'C' from the A/P/C menu and content is saved!
|
||||||
|
|
@ -0,0 +1,211 @@
|
||||||
|
# Step 4: Desired Emotional Response
|
||||||
|
|
||||||
|
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||||
|
|
||||||
|
- 🛑 NEVER generate content without user input
|
||||||
|
- ✅ ALWAYS treat this as collaborative discovery between UX facilitator and stakeholder
|
||||||
|
- 📋 YOU ARE A UX FACILITATOR, not a content generator
|
||||||
|
- 💬 FOCUS on defining desired emotional responses and user feelings
|
||||||
|
- 🎯 COLLABORATIVE discovery, not assumption-based design
|
||||||
|
|
||||||
|
## EXECUTION PROTOCOLS:
|
||||||
|
|
||||||
|
- 🎯 Show your analysis before taking any action
|
||||||
|
- ⚠️ Present A/P/C menu after generating emotional response content
|
||||||
|
- 💾 ONLY save when user chooses C (Continue)
|
||||||
|
- 📖 Update frontmatter `stepsCompleted: [1, 2, 3, 4]` before loading next step
|
||||||
|
- 🚫 FORBIDDEN to load next step until C is selected
|
||||||
|
|
||||||
|
## COLLABORATION MENUS (A/P/C):
|
||||||
|
|
||||||
|
This step will generate content and present choices:
|
||||||
|
|
||||||
|
- **A (Advanced Elicitation)**: Use discovery protocols to develop deeper emotional insights
|
||||||
|
- **P (Party Mode)**: Bring multiple perspectives to define optimal emotional responses
|
||||||
|
- **C (Continue)**: Save the content to the document and proceed to next step
|
||||||
|
|
||||||
|
## PROTOCOL INTEGRATION:
|
||||||
|
|
||||||
|
- When 'A' selected: Execute {project-root}/{bmad_folder}/core/tasks/advanced-elicitation.xml
|
||||||
|
- When 'P' selected: Execute {project-root}/{bmad_folder}/core/workflows/party-mode
|
||||||
|
- PROTOCOLS always return to this step's A/P/C menu
|
||||||
|
- User accepts/rejects protocol changes before proceeding
|
||||||
|
|
||||||
|
## CONTEXT BOUNDARIES:
|
||||||
|
|
||||||
|
- Current document and frontmatter from previous steps are available
|
||||||
|
- Core experience definition from step 3 informs emotional response
|
||||||
|
- No additional data files needed for this step
|
||||||
|
- Focus on user feelings and emotional design goals
|
||||||
|
|
||||||
|
## YOUR TASK:
|
||||||
|
|
||||||
|
Define the desired emotional responses users should feel when using the product.
|
||||||
|
|
||||||
|
## EMOTIONAL RESPONSE DISCOVERY SEQUENCE:
|
||||||
|
|
||||||
|
### 1. Explore Core Emotional Goals
|
||||||
|
|
||||||
|
Start by understanding the emotional objectives:
|
||||||
|
"Now let's think about how {{project_name}} should make users feel.
|
||||||
|
|
||||||
|
**Emotional Response Questions:**
|
||||||
|
|
||||||
|
- What should users FEEL when using this product?
|
||||||
|
- What emotion would make them tell a friend about this?
|
||||||
|
- How should users feel after accomplishing their primary goal?
|
||||||
|
- What feeling differentiates this from competitors?
|
||||||
|
|
||||||
|
Common emotional goals: Empowered and in control? Delighted and surprised? Efficient and productive? Creative and inspired? Calm and focused? Connected and engaged?"
|
||||||
|
|
||||||
|
### 2. Identify Emotional Journey Mapping
|
||||||
|
|
||||||
|
Explore feelings at different stages:
|
||||||
|
"**Emotional Journey Considerations:**
|
||||||
|
|
||||||
|
- How should users feel when they first discover the product?
|
||||||
|
- What emotion during the core experience/action?
|
||||||
|
- How should they feel after completing their task?
|
||||||
|
- What if something goes wrong - what emotional response do we want?
|
||||||
|
- How should they feel when returning to use it again?"
|
||||||
|
|
||||||
|
### 3. Define Micro-Emotions
|
||||||
|
|
||||||
|
Surface subtle but important emotional states:
|
||||||
|
"**Micro-Emotions to Consider:**
|
||||||
|
|
||||||
|
- Confidence vs. Confusion
|
||||||
|
- Trust vs. Skepticism
|
||||||
|
- Excitement vs. Anxiety
|
||||||
|
- Accomplishment vs. Frustration
|
||||||
|
- Delight vs. Satisfaction
|
||||||
|
- Belonging vs. Isolation
|
||||||
|
|
||||||
|
Which of these emotional states are most critical for your product's success?"
|
||||||
|
|
||||||
|
### 4. Connect Emotions to UX Decisions
|
||||||
|
|
||||||
|
Link feelings to design implications:
|
||||||
|
"**Design Implications:**
|
||||||
|
|
||||||
|
- If we want users to feel [emotional state], what UX choices support this?
|
||||||
|
- What interactions might create negative emotions we want to avoid?
|
||||||
|
- Where can we add moments of delight or surprise?
|
||||||
|
- How do we build trust and confidence through design?
|
||||||
|
|
||||||
|
**Emotion-Design Connections:**
|
||||||
|
|
||||||
|
- [Emotion 1] → [UX design approach]
|
||||||
|
- [Emotion 2] → [UX design approach]
|
||||||
|
- [Emotion 3] → [UX design approach]"
|
||||||
|
|
||||||
|
### 5. Validate Emotional Goals
|
||||||
|
|
||||||
|
Check if emotional goals align with product vision:
|
||||||
|
"Let me make sure I understand the emotional vision for {{project_name}}:
|
||||||
|
|
||||||
|
**Primary Emotional Goal:** [Summarize main emotional response]
|
||||||
|
**Secondary Feelings:** [List supporting emotional states]
|
||||||
|
**Emotions to Avoid:** [List negative emotions to prevent]
|
||||||
|
|
||||||
|
Does this capture the emotional experience you want to create? Any adjustments needed?"
|
||||||
|
|
||||||
|
### 6. Generate Emotional Response Content
|
||||||
|
|
||||||
|
Prepare the content to append to the document:
|
||||||
|
|
||||||
|
#### Content Structure:
|
||||||
|
|
||||||
|
When saving to document, append these Level 2 and Level 3 sections:
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
## Desired Emotional Response
|
||||||
|
|
||||||
|
### Primary Emotional Goals
|
||||||
|
|
||||||
|
[Primary emotional goals based on conversation]
|
||||||
|
|
||||||
|
### Emotional Journey Mapping
|
||||||
|
|
||||||
|
[Emotional journey mapping based on conversation]
|
||||||
|
|
||||||
|
### Micro-Emotions
|
||||||
|
|
||||||
|
[Micro-emotions identified based on conversation]
|
||||||
|
|
||||||
|
### Design Implications
|
||||||
|
|
||||||
|
[UX design implications for emotional responses based on conversation]
|
||||||
|
|
||||||
|
### Emotional Design Principles
|
||||||
|
|
||||||
|
[Guiding principles for emotional design based on conversation]
|
||||||
|
```
|
||||||
|
|
||||||
|
### 7. Present Content and Menu
|
||||||
|
|
||||||
|
Show the generated emotional response content and present choices:
|
||||||
|
"I've defined the desired emotional responses for {{project_name}}. These emotional goals will guide our design decisions to create the right user experience.
|
||||||
|
|
||||||
|
**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 the emotional response definition
|
||||||
|
[P] Party Mode - Bring different perspectives on user emotional needs
|
||||||
|
[C] Continue - Save this to the document and move to inspiration analysis"
|
||||||
|
|
||||||
|
### 8. Handle Menu Selection
|
||||||
|
|
||||||
|
#### If 'A' (Advanced Elicitation):
|
||||||
|
|
||||||
|
- Execute advanced-elicitation.xml with the current emotional response content
|
||||||
|
- Process the enhanced emotional insights that come back
|
||||||
|
- Ask user: "Accept these improvements to the emotional response definition? (y/n)"
|
||||||
|
- If yes: Update content with improvements, then return to A/P/C menu
|
||||||
|
- If no: Keep original content, then return to A/P/C menu
|
||||||
|
|
||||||
|
#### If 'P' (Party Mode):
|
||||||
|
|
||||||
|
- Execute party-mode workflow with the current emotional response definition
|
||||||
|
- Process the collaborative emotional insights that come back
|
||||||
|
- Ask user: "Accept these changes to the emotional response definition? (y/n)"
|
||||||
|
- If yes: Update content with improvements, then return to A/P/C menu
|
||||||
|
- If no: Keep original content, then return to A/P/C menu
|
||||||
|
|
||||||
|
#### If 'C' (Continue):
|
||||||
|
|
||||||
|
- Append the final content to `{output_folder}/ux-design-specification.md`
|
||||||
|
- Update frontmatter: `stepsCompleted: [1, 2, 3, 4]`
|
||||||
|
- Load `./step-05-inspiration.md`
|
||||||
|
|
||||||
|
## APPEND TO DOCUMENT:
|
||||||
|
|
||||||
|
When user selects 'C', append the content directly to the document using the structure from step 6.
|
||||||
|
|
||||||
|
## SUCCESS METRICS:
|
||||||
|
|
||||||
|
✅ Primary emotional goals clearly defined
|
||||||
|
✅ Emotional journey mapped across user experience
|
||||||
|
✅ Micro-emotions identified and addressed
|
||||||
|
✅ Design implications connected to emotional responses
|
||||||
|
✅ Emotional design principles established
|
||||||
|
✅ A/P/C menu presented and handled correctly
|
||||||
|
✅ Content properly appended to document when C selected
|
||||||
|
|
||||||
|
## FAILURE MODES:
|
||||||
|
|
||||||
|
❌ Missing core emotional goals or being too generic
|
||||||
|
❌ Not considering emotional journey across different stages
|
||||||
|
❌ Overlooking micro-emotions that impact user satisfaction
|
||||||
|
❌ Not connecting emotional goals to specific UX design choices
|
||||||
|
❌ Emotional principles too vague or not actionable
|
||||||
|
❌ Not presenting A/P/C menu after content generation
|
||||||
|
❌ Appending content without user selecting 'C'
|
||||||
|
|
||||||
|
## NEXT STEP:
|
||||||
|
|
||||||
|
After user selects 'C' and content is saved to document, load `./step-05-inspiration.md` to analyze UX patterns from inspiring products.
|
||||||
|
|
||||||
|
Remember: Do NOT proceed to step-05 until user explicitly selects 'C' from the A/P/C menu and content is saved!
|
||||||
|
|
@ -0,0 +1,226 @@
|
||||||
|
# Step 5: UX Pattern Analysis & Inspiration
|
||||||
|
|
||||||
|
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||||
|
|
||||||
|
- 🛑 NEVER generate content without user input
|
||||||
|
- ✅ ALWAYS treat this as collaborative discovery between UX facilitator and stakeholder
|
||||||
|
- 📋 YOU ARE A UX FACILITATOR, not a content generator
|
||||||
|
- 💬 FOCUS on analyzing existing UX patterns and extracting inspiration
|
||||||
|
- 🎯 COLLABORATIVE discovery, not assumption-based design
|
||||||
|
|
||||||
|
## EXECUTION PROTOCOLS:
|
||||||
|
|
||||||
|
- 🎯 Show your analysis before taking any action
|
||||||
|
- ⚠️ Present A/P/C menu after generating inspiration analysis content
|
||||||
|
- 💾 ONLY save when user chooses C (Continue)
|
||||||
|
- 📖 Update frontmatter `stepsCompleted: [1, 2, 3, 4, 5]` before loading next step
|
||||||
|
- 🚫 FORBIDDEN to load next step until C is selected
|
||||||
|
|
||||||
|
## COLLABORATION MENUS (A/P/C):
|
||||||
|
|
||||||
|
This step will generate content and present choices:
|
||||||
|
|
||||||
|
- **A (Advanced Elicitation)**: Use discovery protocols to develop deeper pattern insights
|
||||||
|
- **P ( Party Mode)**: Bring multiple perspectives to analyze UX patterns
|
||||||
|
- **C (Continue)**: Save the content to the document and proceed to next step
|
||||||
|
|
||||||
|
## PROTOCOL INTEGRATION:
|
||||||
|
|
||||||
|
- When 'A' selected: Execute {project-root}/{bmad_folder}/core/tasks/advanced-elicitation.xml
|
||||||
|
- When 'P' selected: Execute {project-root}/{bmad_folder}/core/workflows/party-mode
|
||||||
|
- PROTOCOLS always return to this step's A/P/C menu
|
||||||
|
- User accepts/rejects protocol changes before proceeding
|
||||||
|
|
||||||
|
## CONTEXT BOUNDARIES:
|
||||||
|
|
||||||
|
- Current document and frontmatter from previous steps are available
|
||||||
|
- Emotional response goals from step 4 inform pattern analysis
|
||||||
|
- No additional data files needed for this step
|
||||||
|
- Focus on analyzing existing UX patterns and extracting lessons
|
||||||
|
|
||||||
|
## YOUR TASK:
|
||||||
|
|
||||||
|
Analyze inspiring products and UX patterns to inform design decisions for the current project.
|
||||||
|
|
||||||
|
## INSPIRATION ANALYSIS SEQUENCE:
|
||||||
|
|
||||||
|
### 1. Identify User's Favorite Apps
|
||||||
|
|
||||||
|
Start by gathering inspiration sources:
|
||||||
|
"Let's learn from products your users already love and use regularly.
|
||||||
|
|
||||||
|
**Inspiration Questions:**
|
||||||
|
|
||||||
|
- Name 2-3 apps your target users already love and USE frequently
|
||||||
|
- For each one, what do they do well from a UX perspective?
|
||||||
|
- What makes the experience compelling or delightful?
|
||||||
|
- What keeps users coming back to these apps?
|
||||||
|
|
||||||
|
Think about apps in your category or even unrelated products that have great UX."
|
||||||
|
|
||||||
|
### 2. Analyze UX Patterns and Principles
|
||||||
|
|
||||||
|
Break down what makes these apps successful:
|
||||||
|
"For each inspiring app, let's analyze their UX success:
|
||||||
|
|
||||||
|
**For [App Name]:**
|
||||||
|
|
||||||
|
- What core problem does it solve elegantly?
|
||||||
|
- What makes the onboarding experience effective?
|
||||||
|
- How do they handle navigation and information hierarchy?
|
||||||
|
- What are their most innovative or delightful interactions?
|
||||||
|
- What visual design choices support the user experience?
|
||||||
|
- How do they handle errors or edge cases?"
|
||||||
|
|
||||||
|
### 3. Extract Transferable Patterns
|
||||||
|
|
||||||
|
Identify patterns that could apply to your project:
|
||||||
|
"**Transferable UX Patterns:**
|
||||||
|
Looking across these inspiring apps, I see patterns we could adapt:
|
||||||
|
|
||||||
|
**Navigation Patterns:**
|
||||||
|
|
||||||
|
- [Pattern 1] - could work for your [specific use case]
|
||||||
|
- [Pattern 2] - might solve your [specific challenge]
|
||||||
|
|
||||||
|
**Interaction Patterns:**
|
||||||
|
|
||||||
|
- [Pattern 1] - excellent for [your user goal]
|
||||||
|
- [Pattern 2] - addresses [your user pain point]
|
||||||
|
|
||||||
|
**Visual Patterns:**
|
||||||
|
|
||||||
|
- [Pattern 1] - supports your [emotional goal]
|
||||||
|
- [Pattern 2] - aligns with your [platform requirements]
|
||||||
|
|
||||||
|
Which of these patterns resonate most for your product?"
|
||||||
|
|
||||||
|
### 4. Identify Anti-Patterns to Avoid
|
||||||
|
|
||||||
|
Surface what not to do based on analysis:
|
||||||
|
"**UX Anti-Patterns to Avoid:**
|
||||||
|
From analyzing both successes and failures in your space, here are patterns to avoid:
|
||||||
|
|
||||||
|
- [Anti-pattern 1] - users find this confusing/frustrating
|
||||||
|
- [Anti-pattern 2] - this creates unnecessary friction
|
||||||
|
- [Anti-pattern 3] - doesn't align with your [emotional goals]
|
||||||
|
|
||||||
|
Learning from others' mistakes is as important as learning from their successes."
|
||||||
|
|
||||||
|
### 5. Define Design Inspiration Strategy
|
||||||
|
|
||||||
|
Create a clear strategy for using this inspiration:
|
||||||
|
"**Design Inspiration Strategy:**
|
||||||
|
|
||||||
|
**What to Adopt:**
|
||||||
|
|
||||||
|
- [Specific pattern] - because it supports [your core experience]
|
||||||
|
- [Specific pattern] - because it aligns with [user needs]
|
||||||
|
|
||||||
|
**What to Adapt:**
|
||||||
|
|
||||||
|
- [Specific pattern] - modify for [your unique requirements]
|
||||||
|
- [Specific pattern] - simplify for [your user skill level]
|
||||||
|
|
||||||
|
**What to Avoid:**
|
||||||
|
|
||||||
|
- [Specific anti-pattern] - conflicts with [your goals]
|
||||||
|
- [Specific anti-pattern] - doesn't fit [your platform]
|
||||||
|
|
||||||
|
This strategy will guide our design decisions while keeping {{project_name}} unique."
|
||||||
|
|
||||||
|
### 6. Generate Inspiration Analysis Content
|
||||||
|
|
||||||
|
Prepare the content to append to the document:
|
||||||
|
|
||||||
|
#### Content Structure:
|
||||||
|
|
||||||
|
When saving to document, append these Level 2 and Level 3 sections:
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
## UX Pattern Analysis & Inspiration
|
||||||
|
|
||||||
|
### Inspiring Products Analysis
|
||||||
|
|
||||||
|
[Analysis of inspiring products based on conversation]
|
||||||
|
|
||||||
|
### Transferable UX Patterns
|
||||||
|
|
||||||
|
[Transferable patterns identified based on conversation]
|
||||||
|
|
||||||
|
### Anti-Patterns to Avoid
|
||||||
|
|
||||||
|
[Anti-patterns to avoid based on conversation]
|
||||||
|
|
||||||
|
### Design Inspiration Strategy
|
||||||
|
|
||||||
|
[Strategy for using inspiration based on conversation]
|
||||||
|
```
|
||||||
|
|
||||||
|
### 7. Present Content and Menu
|
||||||
|
|
||||||
|
Show the generated inspiration analysis content and present choices:
|
||||||
|
"I've analyzed inspiring UX patterns and products to inform our design strategy for {{project_name}}. This gives us a solid foundation of proven patterns to build upon.
|
||||||
|
|
||||||
|
**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 deepen our UX pattern analysis
|
||||||
|
[P] Party Mode - Bring different perspectives on inspiration sources
|
||||||
|
[C] Continue - Save this to the document and move to design system choice"
|
||||||
|
|
||||||
|
### 8. Handle Menu Selection
|
||||||
|
|
||||||
|
#### If 'A' (Advanced Elicitation):
|
||||||
|
|
||||||
|
- Execute advanced-elicitation.xml with the current inspiration analysis content
|
||||||
|
- Process the enhanced pattern insights that come back
|
||||||
|
- Ask user: "Accept these improvements to the inspiration analysis? (y/n)"
|
||||||
|
- If yes: Update content with improvements, then return to A/P/C menu
|
||||||
|
- If no: Keep original content, then return to A/P/C menu
|
||||||
|
|
||||||
|
#### If 'P' (Party Mode):
|
||||||
|
|
||||||
|
- Execute party-mode workflow with the current inspiration analysis
|
||||||
|
- Process the collaborative pattern insights that come back
|
||||||
|
- Ask user: "Accept these changes to the inspiration analysis? (y/n)"
|
||||||
|
- If yes: Update content with improvements, then return to A/P/C menu
|
||||||
|
- If no: Keep original content, then return to A/P/C menu
|
||||||
|
|
||||||
|
#### If 'C' (Continue):
|
||||||
|
|
||||||
|
- Append the final content to `{output_folder}/ux-design-specification.md`
|
||||||
|
- Update frontmatter: `stepsCompleted: [1, 2, 3, 4, 5]`
|
||||||
|
- Load `./step-06-design-system.md`
|
||||||
|
|
||||||
|
## APPEND TO DOCUMENT:
|
||||||
|
|
||||||
|
When user selects 'C', append the content directly to the document using the structure from step 6.
|
||||||
|
|
||||||
|
## SUCCESS METRICS:
|
||||||
|
|
||||||
|
✅ Inspiring products identified and analyzed thoroughly
|
||||||
|
✅ UX patterns extracted and categorized effectively
|
||||||
|
✅ Transferable patterns identified for current project
|
||||||
|
✅ Anti-patterns identified to avoid common mistakes
|
||||||
|
✅ Clear design inspiration strategy established
|
||||||
|
✅ A/P/C menu presented and handled correctly
|
||||||
|
✅ Content properly appended to document when C selected
|
||||||
|
|
||||||
|
## FAILURE MODES:
|
||||||
|
|
||||||
|
❌ Not getting specific examples of inspiring products
|
||||||
|
❌ Surface-level analysis without deep pattern extraction
|
||||||
|
❌ Missing opportunities for pattern adaptation
|
||||||
|
❌ Not identifying relevant anti-patterns to avoid
|
||||||
|
❌ Strategy too generic or not actionable
|
||||||
|
❌ Not presenting A/P/C menu after content generation
|
||||||
|
❌ Appending content without user selecting 'C'
|
||||||
|
|
||||||
|
## NEXT STEP:
|
||||||
|
|
||||||
|
After user selects 'C' and content is saved to document, load `./step-06-design-system.md` to choose the appropriate design system approach.
|
||||||
|
|
||||||
|
Remember: Do NOT proceed to step-06 until user explicitly selects 'C' from the A/P/C menu and content is saved!
|
||||||
|
|
@ -0,0 +1,244 @@
|
||||||
|
# Step 6: Design System Choice
|
||||||
|
|
||||||
|
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||||
|
|
||||||
|
- 🛑 NEVER generate content without user input
|
||||||
|
- ✅ ALWAYS treat this as collaborative discovery between UX facilitator and stakeholder
|
||||||
|
- 📋 YOU ARE A UX FACILITATOR, not a content generator
|
||||||
|
- 💬 FOCUS on choosing appropriate design system approach
|
||||||
|
- 🎯 COLLABORATIVE decision-making, not recommendation-only
|
||||||
|
|
||||||
|
## EXECUTION PROTOCOLS:
|
||||||
|
|
||||||
|
- 🎯 Show your analysis before taking any action
|
||||||
|
- ⚠️ Present A/P/C menu after generating design system decision content
|
||||||
|
- 💾 ONLY save when user chooses C (Continue)
|
||||||
|
- 📖 Update frontmatter `stepsCompleted: [1, 2, 3, 4, 5, 6]` before loading next step
|
||||||
|
- 🚫 FORBIDDEN to load next step until C is selected
|
||||||
|
|
||||||
|
## COLLABORATION MENUS (A/P/C):
|
||||||
|
|
||||||
|
This step will generate content and present choices:
|
||||||
|
|
||||||
|
- **A (Advanced Elicitation)**: Use discovery protocols to develop deeper design system insights
|
||||||
|
- **P (Party Mode)**: Bring multiple perspectives to evaluate design system options
|
||||||
|
- **C (Continue)**: Save the content to the document and proceed to next step
|
||||||
|
|
||||||
|
## PROTOCOL INTEGRATION:
|
||||||
|
|
||||||
|
- When 'A' selected: Execute {project-root}/{bmad_folder}/core/tasks/advanced-elicitation.xml
|
||||||
|
- When 'P' selected: Execute {project-root}/{bmad_folder}/core/workflows/party-mode
|
||||||
|
- PROTOCOLS always return to this step's A/P/C menu
|
||||||
|
- User accepts/rejects protocol changes before proceeding
|
||||||
|
|
||||||
|
## CONTEXT BOUNDARIES:
|
||||||
|
|
||||||
|
- Current document and frontmatter from previous steps are available
|
||||||
|
- Platform requirements from step 3 inform design system choice
|
||||||
|
- Inspiration patterns from step 5 guide design system selection
|
||||||
|
- Focus on choosing foundation for consistent design
|
||||||
|
|
||||||
|
## YOUR TASK:
|
||||||
|
|
||||||
|
Choose appropriate design system approach based on project requirements and constraints.
|
||||||
|
|
||||||
|
## DESIGN SYSTEM CHOICE SEQUENCE:
|
||||||
|
|
||||||
|
### 1. Present Design System Options
|
||||||
|
|
||||||
|
Educate about design system approaches:
|
||||||
|
"For {{project_name}}, we need to choose a design system foundation. Think of design systems like LEGO blocks for UI - they provide proven components and patterns, ensuring consistency and speeding development.
|
||||||
|
|
||||||
|
**Design System Approaches:**
|
||||||
|
|
||||||
|
**1. Custom Design System**
|
||||||
|
|
||||||
|
- Complete visual uniqueness
|
||||||
|
- Full control over every component
|
||||||
|
- Higher initial investment
|
||||||
|
- Perfect for established brands with unique needs
|
||||||
|
|
||||||
|
**2. Established System (Material Design, Ant Design, etc.)**
|
||||||
|
|
||||||
|
- Fast development with proven patterns
|
||||||
|
- Great defaults and accessibility built-in
|
||||||
|
- Less visual differentiation
|
||||||
|
- Ideal for startups or internal tools
|
||||||
|
|
||||||
|
**3. Themeable System (MUI, Chakra UI, Tailwind UI)**
|
||||||
|
|
||||||
|
- Customizable with strong foundation
|
||||||
|
- Brand flexibility with proven components
|
||||||
|
- Moderate learning curve
|
||||||
|
- Good balance of speed and uniqueness
|
||||||
|
|
||||||
|
Which direction feels right for your project?"
|
||||||
|
|
||||||
|
### 2. Analyze Project Requirements
|
||||||
|
|
||||||
|
Guide decision based on project context:
|
||||||
|
"**Let's consider your specific needs:**
|
||||||
|
|
||||||
|
**Based on our previous conversations:**
|
||||||
|
|
||||||
|
- Platform: [platform from step 3]
|
||||||
|
- Timeline: [inferred from user conversation]
|
||||||
|
- Team Size: [inferred from user conversation]
|
||||||
|
- Brand Requirements: [inferred from user conversation]
|
||||||
|
- Technical Constraints: [inferred from user conversation]
|
||||||
|
|
||||||
|
**Decision Factors:**
|
||||||
|
|
||||||
|
- Need for speed vs. need for uniqueness
|
||||||
|
- Brand guidelines or existing visual identity
|
||||||
|
- Team's design expertise
|
||||||
|
- Long-term maintenance considerations
|
||||||
|
- Integration requirements with existing systems"
|
||||||
|
|
||||||
|
### 3. Explore Specific Design System Options
|
||||||
|
|
||||||
|
Dive deeper into relevant options:
|
||||||
|
"**Recommended Options Based on Your Needs:**
|
||||||
|
|
||||||
|
**For [Your Platform Type]:**
|
||||||
|
|
||||||
|
- [Option 1] - [Key benefit] - [Best for scenario]
|
||||||
|
- [Option 2] - [Key benefit] - [Best for scenario]
|
||||||
|
- [Option 3] - [Key benefit] - [Best for scenario]
|
||||||
|
|
||||||
|
**Considerations:**
|
||||||
|
|
||||||
|
- Component library size and quality
|
||||||
|
- Documentation and community support
|
||||||
|
- Customization capabilities
|
||||||
|
- Accessibility compliance
|
||||||
|
- Performance characteristics
|
||||||
|
- Learning curve for your team"
|
||||||
|
|
||||||
|
### 4. Facilitate Decision Process
|
||||||
|
|
||||||
|
Help user make informed choice:
|
||||||
|
"**Decision Framework:**
|
||||||
|
|
||||||
|
1. What's most important: Speed, uniqueness, or balance?
|
||||||
|
2. How much design expertise does your team have?
|
||||||
|
3. Are there existing brand guidelines to follow?
|
||||||
|
4. What's your timeline and budget?
|
||||||
|
5. Long-term maintenance needs?
|
||||||
|
|
||||||
|
Let's evaluate options based on your answers to these questions."
|
||||||
|
|
||||||
|
### 5. Finalize Design System Choice
|
||||||
|
|
||||||
|
Confirm and document the decision:
|
||||||
|
"Based on our analysis, I recommend [Design System Choice] for {{project_name}}.
|
||||||
|
|
||||||
|
**Rationale:**
|
||||||
|
|
||||||
|
- [Reason 1 based on project needs]
|
||||||
|
- [Reason 2 based on constraints]
|
||||||
|
- [Reason 3 based on team considerations]
|
||||||
|
|
||||||
|
**Next Steps:**
|
||||||
|
|
||||||
|
- We'll customize this system to match your brand and needs
|
||||||
|
- Define component strategy for custom components needed
|
||||||
|
- Establish design tokens and patterns
|
||||||
|
|
||||||
|
Does this design system choice feel right to you?"
|
||||||
|
|
||||||
|
### 6. Generate Design System Content
|
||||||
|
|
||||||
|
Prepare the content to append to the document:
|
||||||
|
|
||||||
|
#### Content Structure:
|
||||||
|
|
||||||
|
When saving to document, append these Level 2 and Level 3 sections:
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
## Design System Foundation
|
||||||
|
|
||||||
|
### 1.1 Design System Choice
|
||||||
|
|
||||||
|
[Design system choice based on conversation]
|
||||||
|
|
||||||
|
### Rationale for Selection
|
||||||
|
|
||||||
|
[Rationale for design system selection based on conversation]
|
||||||
|
|
||||||
|
### Implementation Approach
|
||||||
|
|
||||||
|
[Implementation approach based on chosen system]
|
||||||
|
|
||||||
|
### Customization Strategy
|
||||||
|
|
||||||
|
[Customization strategy based on project needs]
|
||||||
|
```
|
||||||
|
|
||||||
|
### 7. Present Content and Menu
|
||||||
|
|
||||||
|
Show the generated design system content and present choices:
|
||||||
|
"I've documented our design system choice for {{project_name}}. This foundation will ensure consistency and speed up development.
|
||||||
|
|
||||||
|
**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 design system decision
|
||||||
|
[P] Party Mode - Bring technical perspectives on design systems
|
||||||
|
[C] Continue - Save this to the document and move to defining experience
|
||||||
|
|
||||||
|
### 8. Handle Menu Selection
|
||||||
|
|
||||||
|
#### If 'A' (Advanced Elicitation):
|
||||||
|
|
||||||
|
- Execute advanced-elicitation.xml with the current design system content
|
||||||
|
- Process the enhanced design system insights that come back
|
||||||
|
- Ask user: "Accept these improvements to the design system decision? (y/n)"
|
||||||
|
- If yes: Update content with improvements, then return to A/P/C menu
|
||||||
|
- If no: Keep original content, then return to A/P/C menu
|
||||||
|
|
||||||
|
#### If 'P' (Party Mode):
|
||||||
|
|
||||||
|
- Execute party-mode workflow with the current design system choice
|
||||||
|
- Process the collaborative design system insights that come back
|
||||||
|
- Ask user: "Accept these changes to the design system decision? (y/n)"
|
||||||
|
- If yes: Update content with improvements, then return to A/P/C menu
|
||||||
|
- If no: Keep original content, then return to A/P/C menu
|
||||||
|
|
||||||
|
#### If 'C' (Continue):
|
||||||
|
|
||||||
|
- Append the final content to `{output_folder}/ux-design-specification.md`
|
||||||
|
- Update frontmatter: `stepsCompleted: [1, 2, 3, 4, 5, 6]`
|
||||||
|
- Load `./step-07-defining-experience.md`
|
||||||
|
|
||||||
|
## APPEND TO DOCUMENT:
|
||||||
|
|
||||||
|
When user selects 'C', append the content directly to the document using the structure from step 6.
|
||||||
|
|
||||||
|
## SUCCESS METRICS:
|
||||||
|
|
||||||
|
✅ Design system options clearly presented and explained
|
||||||
|
✅ Decision framework applied to project requirements
|
||||||
|
✅ Specific design system chosen with clear rationale
|
||||||
|
✅ Implementation approach planned
|
||||||
|
✅ Customization strategy defined
|
||||||
|
✅ A/P/C menu presented and handled correctly
|
||||||
|
✅ Content properly appended to document when C selected
|
||||||
|
|
||||||
|
## FAILURE MODES:
|
||||||
|
|
||||||
|
❌ Not explaining design system concepts clearly
|
||||||
|
❌ Rushing to recommendation without understanding requirements
|
||||||
|
❌ Not considering technical constraints or team capabilities
|
||||||
|
❌ Choosing design system without clear rationale
|
||||||
|
❌ Not planning implementation approach
|
||||||
|
❌ Not presenting A/P/C menu after content generation
|
||||||
|
❌ Appending content without user selecting 'C'
|
||||||
|
|
||||||
|
## NEXT STEP:
|
||||||
|
|
||||||
|
After user selects 'C' and content is saved to document, load `./step-07-defining-experience.md` to define the core user interaction.
|
||||||
|
|
||||||
|
Remember: Do NOT proceed to step-07 until user explicitly selects 'C' from the A/P/C menu and content is saved!
|
||||||
|
|
@ -0,0 +1,246 @@
|
||||||
|
# Step 7: Defining Core Experience
|
||||||
|
|
||||||
|
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||||
|
|
||||||
|
- 🛑 NEVER generate content without user input
|
||||||
|
- ✅ ALWAYS treat this as collaborative discovery between UX facilitator and stakeholder
|
||||||
|
- 📋 YOU ARE A UX FACILITATOR, not a content generator
|
||||||
|
- 💬 FOCUS on defining the core interaction that defines the product
|
||||||
|
- 🎯 COLLABORATIVE discovery, not assumption-based design
|
||||||
|
|
||||||
|
## EXECUTION PROTOCOLS:
|
||||||
|
|
||||||
|
- 🎯 Show your analysis before taking any action
|
||||||
|
- ⚠️ Present A/P/C menu after generating defining experience content
|
||||||
|
- 💾 ONLY save when user chooses C (Continue)
|
||||||
|
- 📖 Update frontmatter `stepsCompleted: [1, 2, 3, 4, 5, 6, 7]` before loading next step
|
||||||
|
- 🚫 FORBIDDEN to load next step until C is selected
|
||||||
|
|
||||||
|
## COLLABORATION MENUS (A/P/C):
|
||||||
|
|
||||||
|
This step will generate content and present choices:
|
||||||
|
|
||||||
|
- **A (Advanced Elicitation)**: Use discovery protocols to develop deeper experience insights
|
||||||
|
- **P (Party Mode)**: Bring multiple perspectives to define optimal core experience
|
||||||
|
- **C (Continue)**: Save the content to the document and proceed to next step
|
||||||
|
|
||||||
|
## PROTOCOL INTEGRATION:
|
||||||
|
|
||||||
|
- When 'A' selected: Execute {project-root}/{bmad_folder}/core/tasks/advanced-elicitation.xml
|
||||||
|
- When 'P' selected: Execute {project-root}/{bmad_folder}/core/workflows/party-mode
|
||||||
|
- PROTOCOLS always return to this step's A/P/C menu
|
||||||
|
- User accepts/rejects protocol changes before proceeding
|
||||||
|
|
||||||
|
## CONTEXT BOUNDARIES:
|
||||||
|
|
||||||
|
- Current document and frontmatter from previous steps are available
|
||||||
|
- Core experience from step 3 provides foundation
|
||||||
|
- Design system choice from step 6 informs implementation
|
||||||
|
- Focus on the defining interaction that makes the product special
|
||||||
|
|
||||||
|
## YOUR TASK:
|
||||||
|
|
||||||
|
Define the core interaction that, if nailed, makes everything else follow in the user experience.
|
||||||
|
|
||||||
|
## DEFINING EXPERIENCE SEQUENCE:
|
||||||
|
|
||||||
|
### 1. Identify the Defining Experience
|
||||||
|
|
||||||
|
Focus on the core interaction:
|
||||||
|
"Every successful product has a defining experience - the core interaction that, if we nail it, everything else follows.
|
||||||
|
|
||||||
|
**Think about these famous examples:**
|
||||||
|
|
||||||
|
- Tinder: "Swipe to match with people"
|
||||||
|
- Snapchat: "Share photos that disappear"
|
||||||
|
- Instagram: "Share perfect moments with filters"
|
||||||
|
- Spotify: "Discover and play any song instantly"
|
||||||
|
|
||||||
|
**For {{project_name}}:**
|
||||||
|
What's the core action that users will describe to their friends?
|
||||||
|
What's the interaction that makes users feel successful?
|
||||||
|
If we get ONE thing perfectly right, what should it be?"
|
||||||
|
|
||||||
|
### 2. Explore the User's Mental Model
|
||||||
|
|
||||||
|
Understand how users think about the core task:
|
||||||
|
"**User Mental Model Questions:**
|
||||||
|
|
||||||
|
- How do users currently solve this problem?
|
||||||
|
- What mental model do they bring to this task?
|
||||||
|
- What's their expectation for how this should work?
|
||||||
|
- Where are they likely to get confused or frustrated?
|
||||||
|
|
||||||
|
**Current Solutions:**
|
||||||
|
|
||||||
|
- What do users love/hate about existing approaches?
|
||||||
|
- What shortcuts or workarounds do they use?
|
||||||
|
- What makes existing solutions feel magical or terrible?"
|
||||||
|
|
||||||
|
### 3. Define Success Criteria for Core Experience
|
||||||
|
|
||||||
|
Establish what makes the core interaction successful:
|
||||||
|
"**Core Experience Success Criteria:**
|
||||||
|
|
||||||
|
- What makes users say 'this just works'?
|
||||||
|
- When do they feel smart or accomplished?
|
||||||
|
- What feedback tells them they're doing it right?
|
||||||
|
- How fast should it feel?
|
||||||
|
- What should happen automatically?
|
||||||
|
|
||||||
|
**Success Indicators:**
|
||||||
|
|
||||||
|
- [Success indicator 1]
|
||||||
|
- [Success indicator 2]
|
||||||
|
- [Success indicator 3]"
|
||||||
|
|
||||||
|
### 4. Identify Novel vs. Established Patterns
|
||||||
|
|
||||||
|
Determine if we need to innovate or can use proven patterns:
|
||||||
|
"**Pattern Analysis:**
|
||||||
|
Looking at your core experience, does this:
|
||||||
|
|
||||||
|
- Use established UX patterns that users already understand?
|
||||||
|
- Require novel interaction design that needs user education?
|
||||||
|
- Combine familiar patterns in innovative ways?
|
||||||
|
|
||||||
|
**If Novel:**
|
||||||
|
|
||||||
|
- What makes this different from existing approaches?
|
||||||
|
- How will we teach users this new pattern?
|
||||||
|
- What familiar metaphors can we use?
|
||||||
|
|
||||||
|
**If Established:**
|
||||||
|
|
||||||
|
- Which proven patterns should we adopt?
|
||||||
|
- How can we innovate within familiar patterns?
|
||||||
|
- What's our unique twist on established interactions?"
|
||||||
|
|
||||||
|
### 5. Define Experience Mechanics
|
||||||
|
|
||||||
|
Break down the core interaction into details:
|
||||||
|
"**Core Experience Mechanics:**
|
||||||
|
Let's design the step-by-step flow for [defining experience]:
|
||||||
|
|
||||||
|
**1. Initiation:**
|
||||||
|
|
||||||
|
- How does the user start this action?
|
||||||
|
- What triggers or invites them to begin?
|
||||||
|
|
||||||
|
**2. Interaction:**
|
||||||
|
|
||||||
|
- What does the user actually do?
|
||||||
|
- What controls or inputs do they use?
|
||||||
|
- How does the system respond?
|
||||||
|
|
||||||
|
**3. Feedback:**
|
||||||
|
|
||||||
|
- What tells users they're succeeding?
|
||||||
|
- How do they know when it's working?
|
||||||
|
- What happens if they make a mistake?
|
||||||
|
|
||||||
|
**4. Completion:**
|
||||||
|
|
||||||
|
- How do users know they're done?
|
||||||
|
- What's the successful outcome?
|
||||||
|
- What's next?"
|
||||||
|
|
||||||
|
### 6. Generate Defining Experience Content
|
||||||
|
|
||||||
|
Prepare the content to append to the document:
|
||||||
|
|
||||||
|
#### Content Structure:
|
||||||
|
|
||||||
|
When saving to document, append these Level 2 and Level 3 sections:
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
## 2. Core User Experience
|
||||||
|
|
||||||
|
### 2.1 Defining Experience
|
||||||
|
|
||||||
|
[Defining experience description based on conversation]
|
||||||
|
|
||||||
|
### 2.2 User Mental Model
|
||||||
|
|
||||||
|
[User mental model analysis based on conversation]
|
||||||
|
|
||||||
|
### 2.3 Success Criteria
|
||||||
|
|
||||||
|
[Success criteria for core experience based on conversation]
|
||||||
|
|
||||||
|
### 2.4 Novel UX Patterns
|
||||||
|
|
||||||
|
[Novel UX patterns analysis based on conversation]
|
||||||
|
|
||||||
|
### 2.5 Experience Mechanics
|
||||||
|
|
||||||
|
[Detailed mechanics for core experience based on conversation]
|
||||||
|
```
|
||||||
|
|
||||||
|
### 7. Present Content and Menu
|
||||||
|
|
||||||
|
Show the generated defining experience content and present choices:
|
||||||
|
"I've defined the core experience for {{project_name}} - the interaction that will make users love this product.
|
||||||
|
|
||||||
|
**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 the core experience definition
|
||||||
|
[P] Party Mode - Bring different perspectives on the defining interaction
|
||||||
|
[C] Continue - Save this to the document and move to visual foundation
|
||||||
|
|
||||||
|
### 8. Handle Menu Selection
|
||||||
|
|
||||||
|
#### If 'A' (Advanced Elicitation):
|
||||||
|
|
||||||
|
- Execute advanced-elicitation.xml with the current defining experience content
|
||||||
|
- Process the enhanced experience insights that come back
|
||||||
|
- Ask user: "Accept these improvements to the defining experience? (y/n)"
|
||||||
|
- If yes: Update content with improvements, then return to A/P/C menu
|
||||||
|
- If no: Keep original content, then return to A/P/C menu
|
||||||
|
|
||||||
|
#### If 'P' (Party Mode):
|
||||||
|
|
||||||
|
- Execute party-mode workflow with the current defining experience
|
||||||
|
- Process the collaborative experience insights that come back
|
||||||
|
- Ask user: "Accept these changes to the defining experience? (y/n)"
|
||||||
|
- If yes: Update content with improvements, then return to A/P/C menu
|
||||||
|
- If no: Keep original content, then return to A/P/C menu
|
||||||
|
|
||||||
|
#### If 'C' (Continue):
|
||||||
|
|
||||||
|
- Append the final content to `{output_folder}/ux-design-specification.md`
|
||||||
|
- Update frontmatter: `stepsCompleted: [1, 2, 3, 4, 5, 6, 7]`
|
||||||
|
- Load `./step-08-visual-foundation.md`
|
||||||
|
|
||||||
|
## APPEND TO DOCUMENT:
|
||||||
|
|
||||||
|
When user selects 'C', append the content directly to the document using the structure from step 6.
|
||||||
|
|
||||||
|
## SUCCESS METRICS:
|
||||||
|
|
||||||
|
✅ Defining experience clearly articulated
|
||||||
|
✅ User mental model thoroughly analyzed
|
||||||
|
✅ Success criteria established for core interaction
|
||||||
|
✅ Novel vs. established patterns properly evaluated
|
||||||
|
✅ Experience mechanics designed in detail
|
||||||
|
✅ A/P/C menu presented and handled correctly
|
||||||
|
✅ Content properly appended to document when C selected
|
||||||
|
|
||||||
|
## FAILURE MODES:
|
||||||
|
|
||||||
|
❌ Not identifying the true core interaction
|
||||||
|
❌ Missing user's mental model and expectations
|
||||||
|
❌ Not establishing clear success criteria
|
||||||
|
❌ Not properly evaluating novel vs. established patterns
|
||||||
|
❌ Experience mechanics too vague or incomplete
|
||||||
|
❌ Not presenting A/P/C menu after content generation
|
||||||
|
❌ Appending content without user selecting 'C'
|
||||||
|
|
||||||
|
## NEXT STEP:
|
||||||
|
|
||||||
|
After user selects 'C' and content is saved to document, load `./step-08-visual-foundation.md` to establish visual design foundation.
|
||||||
|
|
||||||
|
Remember: Do NOT proceed to step-08 until user explicitly selects 'C' from the A/P/C menu and content is saved!
|
||||||
|
|
@ -0,0 +1,216 @@
|
||||||
|
# Step 8: Visual Foundation
|
||||||
|
|
||||||
|
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||||
|
|
||||||
|
- 🛑 NEVER generate content without user input
|
||||||
|
- ✅ ALWAYS treat this as collaborative discovery between UX facilitator and stakeholder
|
||||||
|
- 📋 YOU ARE A UX FACILITATOR, not a content generator
|
||||||
|
- 💬 FOCUS on establishing visual design foundation (colors, typography, spacing)
|
||||||
|
- 🎯 COLLABORATIVE discovery, not assumption-based design
|
||||||
|
|
||||||
|
## EXECUTION PROTOCOLS:
|
||||||
|
|
||||||
|
- 🎯 Show your analysis before taking any action
|
||||||
|
- ⚠️ Present A/P/C menu after generating visual foundation content
|
||||||
|
- 💾 ONLY save when user chooses C (Continue)
|
||||||
|
- 📖 Update frontmatter `stepsCompleted: [1, 2, 3, 4, 5, 6, 7, 8]` before loading next step
|
||||||
|
- 🚫 FORBIDDEN to load next step until C is selected
|
||||||
|
|
||||||
|
## COLLABORATION MENUS (A/P/C):
|
||||||
|
|
||||||
|
This step will generate content and present choices:
|
||||||
|
|
||||||
|
- **A (Advanced Elicitation)**: Use discovery protocols to develop deeper visual insights
|
||||||
|
- **P (Party Mode)**: Bring multiple perspectives to define visual foundation
|
||||||
|
- **C (Continue)**: Save the content to the document and proceed to next step
|
||||||
|
|
||||||
|
## PROTOCOL INTEGRATION:
|
||||||
|
|
||||||
|
- When 'A' selected: Execute {project-root}/{bmad_folder}/core/tasks/advanced-elicitation.xml
|
||||||
|
- When 'P' selected: Execute {project-root}/{bmad_folder}/core/workflows/party-mode
|
||||||
|
- PROTOCOLS always return to this step's A/P/C menu
|
||||||
|
- User accepts/rejects protocol changes before proceeding
|
||||||
|
|
||||||
|
## CONTEXT BOUNDARIES:
|
||||||
|
|
||||||
|
- Current document and frontmatter from previous steps are available
|
||||||
|
- Design system choice from step 6 provides component foundation
|
||||||
|
- Emotional response goals from step 4 inform visual decisions
|
||||||
|
- Focus on colors, typography, spacing, and layout foundation
|
||||||
|
|
||||||
|
## YOUR TASK:
|
||||||
|
|
||||||
|
Establish the visual design foundation including color themes, typography, and spacing systems.
|
||||||
|
|
||||||
|
## VISUAL FOUNDATION SEQUENCE:
|
||||||
|
|
||||||
|
### 1. Brand Guidelines Assessment
|
||||||
|
|
||||||
|
Check for existing brand requirements:
|
||||||
|
"Do you have existing brand guidelines or a specific color palette I should follow? (y/n)
|
||||||
|
|
||||||
|
If yes, I'll extract and document your brand colors and create semantic color mappings.
|
||||||
|
If no, I'll generate theme options based on your project's personality and emotional goals from our earlier discussion."
|
||||||
|
|
||||||
|
### 2. Generate Color Theme Options (If no brand guidelines)
|
||||||
|
|
||||||
|
Create visual exploration opportunities:
|
||||||
|
"If no existing brand guidelines, I'll create a color theme visualizer to help you explore options.
|
||||||
|
|
||||||
|
🎨 I can generate comprehensive HTML color theme visualizers with multiple theme options, complete UI examples, and the ability to see how colors work in real interface contexts.
|
||||||
|
|
||||||
|
This will help you make an informed decision about the visual direction for {{project_name}}."
|
||||||
|
|
||||||
|
### 3. Define Typography System
|
||||||
|
|
||||||
|
Establish the typographic foundation:
|
||||||
|
"**Typography Questions:**
|
||||||
|
|
||||||
|
- What should the overall tone feel like? (Professional, friendly, modern, classic?)
|
||||||
|
- How much text content will users read? (Headings only? Long-form content?)
|
||||||
|
- Any accessibility requirements for font sizes or contrast?
|
||||||
|
- Any brand fonts we must use?
|
||||||
|
|
||||||
|
**Typography Strategy:**
|
||||||
|
|
||||||
|
- Choose primary and secondary typefaces
|
||||||
|
- Establish type scale (h1, h2, h3, body, etc.)
|
||||||
|
- Define line heights and spacing relationships
|
||||||
|
- Consider readability and accessibility"
|
||||||
|
|
||||||
|
### 4. Establish Spacing and Layout Foundation
|
||||||
|
|
||||||
|
Define the structural foundation:
|
||||||
|
"**Spacing and Layout Foundation:**
|
||||||
|
|
||||||
|
- How should the overall layout feel? (Dense and efficient? Airy and spacious?)
|
||||||
|
- What spacing unit should we use? (4px, 8px, 12px base?)
|
||||||
|
- How much white space should be between elements?
|
||||||
|
- Should we use a grid system? If so, what column structure?
|
||||||
|
|
||||||
|
**Layout Principles:**
|
||||||
|
|
||||||
|
- [Layout principle 1 based on product type]
|
||||||
|
- [Layout principle 2 based on user needs]
|
||||||
|
- [Layout principle 3 based on platform requirements]"
|
||||||
|
|
||||||
|
### 5. Create Visual Foundation Strategy
|
||||||
|
|
||||||
|
Synthesize all visual decisions:
|
||||||
|
"**Visual Foundation Strategy:**
|
||||||
|
|
||||||
|
**Color System:**
|
||||||
|
|
||||||
|
- [Color strategy based on brand guidelines or generated themes]
|
||||||
|
- Semantic color mapping (primary, secondary, success, warning, error, etc.)
|
||||||
|
- Accessibility compliance (contrast ratios)
|
||||||
|
|
||||||
|
**Typography System:**
|
||||||
|
|
||||||
|
- [Typography strategy based on content needs and tone]
|
||||||
|
- Type scale and hierarchy
|
||||||
|
- Font pairing rationale
|
||||||
|
|
||||||
|
**Spacing & Layout:**
|
||||||
|
|
||||||
|
- [Spacing strategy based on content density and platform]
|
||||||
|
- Grid system approach
|
||||||
|
- Component spacing relationships
|
||||||
|
|
||||||
|
This foundation will ensure consistency across all our design decisions."
|
||||||
|
|
||||||
|
### 6. Generate Visual Foundation Content
|
||||||
|
|
||||||
|
Prepare the content to append to the document:
|
||||||
|
|
||||||
|
#### Content Structure:
|
||||||
|
|
||||||
|
When saving to document, append these Level 2 and Level 3 sections:
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
## Visual Design Foundation
|
||||||
|
|
||||||
|
### Color System
|
||||||
|
|
||||||
|
[Color system strategy based on conversation]
|
||||||
|
|
||||||
|
### Typography System
|
||||||
|
|
||||||
|
[Typography system strategy based on conversation]
|
||||||
|
|
||||||
|
### Spacing & Layout Foundation
|
||||||
|
|
||||||
|
[Spacing and layout foundation based on conversation]
|
||||||
|
|
||||||
|
### Accessibility Considerations
|
||||||
|
|
||||||
|
[Accessibility considerations based on conversation]
|
||||||
|
```
|
||||||
|
|
||||||
|
### 7. Present Content and Menu
|
||||||
|
|
||||||
|
Show the generated visual foundation content and present choices:
|
||||||
|
"I've established the visual design foundation for {{project_name}}. This provides the building blocks for consistent, beautiful design.
|
||||||
|
|
||||||
|
**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 visual foundation
|
||||||
|
[P] Party Mode - Bring design perspectives on visual choices
|
||||||
|
[C] Continue - Save this to the document and move to design directions
|
||||||
|
|
||||||
|
### 8. Handle Menu Selection
|
||||||
|
|
||||||
|
#### If 'A' (Advanced Elicitation):
|
||||||
|
|
||||||
|
- Execute advanced-elicitation.xml with the current visual foundation content
|
||||||
|
- Process the enhanced visual insights that come back
|
||||||
|
- Ask user: "Accept these improvements to the visual foundation? (y/n)"
|
||||||
|
- If yes: Update content with improvements, then return to A/P/C menu
|
||||||
|
- If no: Keep original content, then return to A/P/C menu
|
||||||
|
|
||||||
|
#### If 'P' (Party Mode):
|
||||||
|
|
||||||
|
- Execute party-mode workflow with the current visual foundation
|
||||||
|
- Process the collaborative visual insights that come back
|
||||||
|
- Ask user: "Accept these changes to the visual foundation? (y/n)"
|
||||||
|
- If yes: Update content with improvements, then return to A/P/C menu
|
||||||
|
- If no: Keep original content, then return to A/P/C menu
|
||||||
|
|
||||||
|
#### If 'C' (Continue):
|
||||||
|
|
||||||
|
- Append the final content to `{output_folder}/ux-design-specification.md`
|
||||||
|
- Update frontmatter: `stepsCompleted: [1, 2, 3, 4, 5, 6, 7, 8]`
|
||||||
|
- Load `./step-09-design-directions.md`
|
||||||
|
|
||||||
|
## APPEND TO DOCUMENT:
|
||||||
|
|
||||||
|
When user selects 'C', append the content directly to the document using the structure from step 6.
|
||||||
|
|
||||||
|
## SUCCESS METRICS:
|
||||||
|
|
||||||
|
✅ Brand guidelines assessed and incorporated if available
|
||||||
|
✅ Color system established with accessibility consideration
|
||||||
|
✅ Typography system defined with appropriate hierarchy
|
||||||
|
✅ Spacing and layout foundation created
|
||||||
|
✅ Visual foundation strategy documented
|
||||||
|
✅ A/P/C menu presented and handled correctly
|
||||||
|
✅ Content properly appended to document when C selected
|
||||||
|
|
||||||
|
## FAILURE MODES:
|
||||||
|
|
||||||
|
❌ Not checking for existing brand guidelines first
|
||||||
|
❌ Color palette not aligned with emotional goals
|
||||||
|
❌ Typography not suitable for content type or readability needs
|
||||||
|
❌ Spacing system not appropriate for content density
|
||||||
|
❌ Missing accessibility considerations
|
||||||
|
❌ Not presenting A/P/C menu after content generation
|
||||||
|
❌ Appending content without user selecting 'C'
|
||||||
|
|
||||||
|
## NEXT STEP:
|
||||||
|
|
||||||
|
After user selects 'C' and content is saved to document, load `./step-09-design-directions.md` to generate design direction mockups.
|
||||||
|
|
||||||
|
Remember: Do NOT proceed to step-09 until user explicitly selects 'C' from the A/P/C menu and content is saved!
|
||||||
|
|
@ -0,0 +1,216 @@
|
||||||
|
# Step 9: Design Direction Mockups
|
||||||
|
|
||||||
|
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||||
|
|
||||||
|
- 🛑 NEVER generate content without user input
|
||||||
|
- ✅ ALWAYS treat this as collaborative discovery between UX facilitator and stakeholder
|
||||||
|
- 📋 YOU ARE A UX FACILITATOR, not a content generator
|
||||||
|
- 💬 FOCUS on generating and evaluating design direction variations
|
||||||
|
- 🎯 COLLABORATIVE exploration, not assumption-based design
|
||||||
|
|
||||||
|
## EXECUTION PROTOCOLS:
|
||||||
|
|
||||||
|
- 🎯 Show your analysis before taking any action
|
||||||
|
- ⚠️ Present A/P/C menu after generating design direction content
|
||||||
|
- 💾 Generate HTML visualizer for design directions
|
||||||
|
- 📖 Update frontmatter `stepsCompleted: [1, 2, 3, 4, 5, 6, 7, 8, 9]` before loading next step
|
||||||
|
- 🚫 FORBIDDEN to load next step until C is selected
|
||||||
|
|
||||||
|
## COLLABORATION MENUS (A/P/C):
|
||||||
|
|
||||||
|
This step will generate content and present choices:
|
||||||
|
|
||||||
|
- **A (Advanced Elicitation)**: Use discovery protocols to develop deeper design insights
|
||||||
|
- **P (Party Mode)**: Bring multiple perspectives to evaluate design directions
|
||||||
|
- **C (Continue)**: Save the content to the document and proceed to next step
|
||||||
|
|
||||||
|
## PROTOCOL INTEGRATION:
|
||||||
|
|
||||||
|
- When 'A' selected: Execute {project-root}/{bmad_folder}/core/tasks/advanced-elicitation.xml
|
||||||
|
- When 'P' selected: Execute {project-root}/{bmad_folder}/core/workflows/party-mode
|
||||||
|
- PROTOCOLS always return to this step's A/P/C menu
|
||||||
|
- User accepts/rejects protocol changes before proceeding
|
||||||
|
|
||||||
|
## CONTEXT BOUNDARIES:
|
||||||
|
|
||||||
|
- Current document and frontmatter from previous steps are available
|
||||||
|
- Visual foundation from step 8 provides design tokens
|
||||||
|
- Core experience from step 7 informs layout and interaction design
|
||||||
|
- Focus on exploring different visual design directions
|
||||||
|
|
||||||
|
## YOUR TASK:
|
||||||
|
|
||||||
|
Generate comprehensive design direction mockups showing different visual approaches for the product.
|
||||||
|
|
||||||
|
## DESIGN DIRECTIONS SEQUENCE:
|
||||||
|
|
||||||
|
### 1. Generate Design Direction Variations
|
||||||
|
|
||||||
|
Create diverse visual explorations:
|
||||||
|
"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."
|
||||||
|
|
||||||
|
### 2. Create HTML Design Direction Showcase
|
||||||
|
|
||||||
|
Generate interactive visual exploration:
|
||||||
|
"🎨 Design Direction Mockups Generated!
|
||||||
|
|
||||||
|
I'm creating a comprehensive HTML design direction showcase at `{output_folder}/ux-design-directions.html`
|
||||||
|
|
||||||
|
**What you'll see:**
|
||||||
|
|
||||||
|
- 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
|
||||||
|
|
||||||
|
Each mockup represents a complete visual direction for your app's look and feel."
|
||||||
|
|
||||||
|
### 3. Present Design Exploration Framework
|
||||||
|
|
||||||
|
Guide evaluation criteria:
|
||||||
|
"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!"
|
||||||
|
|
||||||
|
### 4. Facilitate Design Direction Selection
|
||||||
|
|
||||||
|
Help user choose or combine elements:
|
||||||
|
"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?"
|
||||||
|
|
||||||
|
### 5. Document Design Direction Decision
|
||||||
|
|
||||||
|
Capture the chosen approach:
|
||||||
|
"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?"
|
||||||
|
|
||||||
|
### 6. Generate Design Direction Content
|
||||||
|
|
||||||
|
Prepare the content to append to the document:
|
||||||
|
|
||||||
|
#### Content Structure:
|
||||||
|
|
||||||
|
When saving to document, append these Level 2 and Level 3 sections:
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
## Design Direction Decision
|
||||||
|
|
||||||
|
### 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]
|
||||||
|
```
|
||||||
|
|
||||||
|
### 7. Present Content and Menu
|
||||||
|
|
||||||
|
Show the generated design direction content and present choices:
|
||||||
|
"I've documented our design direction decision for {{project_name}}. This visual approach will guide all our detailed design work.
|
||||||
|
|
||||||
|
**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 design direction
|
||||||
|
[P] Party Mode - Bring different perspectives on visual choices
|
||||||
|
[C] Continue - Save this to the document and move to user journey flows
|
||||||
|
|
||||||
|
### 8. Handle Menu Selection
|
||||||
|
|
||||||
|
#### If 'A' (Advanced Elicitation):
|
||||||
|
|
||||||
|
- Execute advanced-elicitation.xml with the current design direction content
|
||||||
|
- Process the enhanced design insights that come back
|
||||||
|
- Ask user: "Accept these improvements to the design direction? (y/n)"
|
||||||
|
- If yes: Update content with improvements, then return to A/P/C menu
|
||||||
|
- If no: Keep original content, then return to A/P/C menu
|
||||||
|
|
||||||
|
#### If 'P' (Party Mode):
|
||||||
|
|
||||||
|
- Execute party-mode workflow with the current design direction
|
||||||
|
- Process the collaborative design insights that come back
|
||||||
|
- Ask user: "Accept these changes to the design direction? (y/n)"
|
||||||
|
- If yes: Update content with improvements, then return to A/P/C menu
|
||||||
|
- If no: Keep original content, then return to A/P/C menu
|
||||||
|
|
||||||
|
#### If 'C' (Continue):
|
||||||
|
|
||||||
|
- Append the final content to `{output_folder}/ux-design-specification.md`
|
||||||
|
- Update frontmatter: `stepsCompleted: [1, 2, 3, 4, 5, 6, 7, 8, 9]`
|
||||||
|
- Load `./step-10-user-journeys.md`
|
||||||
|
|
||||||
|
## APPEND TO DOCUMENT:
|
||||||
|
|
||||||
|
When user selects 'C', append the content directly to the document using the structure from step 6.
|
||||||
|
|
||||||
|
## SUCCESS METRICS:
|
||||||
|
|
||||||
|
✅ Multiple design direction variations generated
|
||||||
|
✅ HTML showcase created with interactive elements
|
||||||
|
✅ Design evaluation criteria clearly established
|
||||||
|
✅ User able to explore and compare directions effectively
|
||||||
|
✅ Design direction decision made with clear rationale
|
||||||
|
✅ A/P/C menu presented and handled correctly
|
||||||
|
✅ Content properly appended to document when C selected
|
||||||
|
|
||||||
|
## FAILURE MODES:
|
||||||
|
|
||||||
|
❌ Not creating enough variation in design directions
|
||||||
|
❌ Design directions not aligned with established foundation
|
||||||
|
❌ Missing interactive elements in HTML showcase
|
||||||
|
❌ Not providing clear evaluation criteria
|
||||||
|
❌ Rushing decision without thorough exploration
|
||||||
|
❌ Not presenting A/P/C menu after content generation
|
||||||
|
❌ Appending content without user selecting 'C'
|
||||||
|
|
||||||
|
## NEXT STEP:
|
||||||
|
|
||||||
|
After user selects 'C' and content is saved to document, load `./step-10-user-journeys.md` to design user journey flows.
|
||||||
|
|
||||||
|
Remember: Do NOT proceed to step-10 until user explicitly selects 'C' from the A/P/C menu and content is saved!
|
||||||
|
|
@ -0,0 +1,233 @@
|
||||||
|
# Step 10: User Journey Flows
|
||||||
|
|
||||||
|
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||||
|
|
||||||
|
- 🛑 NEVER generate content without user input
|
||||||
|
- ✅ ALWAYS treat this as collaborative discovery between UX facilitator and stakeholder
|
||||||
|
- 📋 YOU ARE A UX FACILITATOR, not a content generator
|
||||||
|
- 💬 FOCUS on designing user flows and journey interactions
|
||||||
|
- 🎯 COLLABORATIVE flow design, not assumption-based layouts
|
||||||
|
|
||||||
|
## EXECUTION PROTOCOLS:
|
||||||
|
|
||||||
|
- 🎯 Show your analysis before taking any action
|
||||||
|
- ⚠️ Present A/P/C menu after generating user journey content
|
||||||
|
- 💾 ONLY save when user chooses C (Continue)
|
||||||
|
- 📖 Update frontmatter `stepsCompleted: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]` before loading next step
|
||||||
|
- 🚫 FORBIDDEN to load next step until C is selected
|
||||||
|
|
||||||
|
## COLLABORATION MENUS (A/P/C):
|
||||||
|
|
||||||
|
This step will generate content and present choices:
|
||||||
|
|
||||||
|
- **A (Advanced Elicitation)**: Use discovery protocols to develop deeper journey insights
|
||||||
|
- **P (Party Mode)**: Bring multiple perspectives to design user flows
|
||||||
|
- **C (Continue)**: Save the content to the document and proceed to next step
|
||||||
|
|
||||||
|
## PROTOCOL INTEGRATION:
|
||||||
|
|
||||||
|
- When 'A' selected: Execute {project-root}/{bmad_folder}/core/tasks/advanced-elicitation.xml
|
||||||
|
- When 'P' selected: Execute {project-root}/{bmad_folder}/core/workflows/party-mode
|
||||||
|
- PROTOCOLS always return to this step's A/P/C menu
|
||||||
|
- User accepts/rejects protocol changes before proceeding
|
||||||
|
|
||||||
|
## CONTEXT BOUNDARIES:
|
||||||
|
|
||||||
|
- Current document and frontmatter from previous steps are available
|
||||||
|
- Design direction from step 9 informs flow layout and visual design
|
||||||
|
- Core experience from step 7 defines key journey interactions
|
||||||
|
- Focus on designing detailed user flows with Mermaid diagrams
|
||||||
|
|
||||||
|
## YOUR TASK:
|
||||||
|
|
||||||
|
Design detailed user journey flows for critical user interactions.
|
||||||
|
|
||||||
|
## USER JOURNEY FLOWS SEQUENCE:
|
||||||
|
|
||||||
|
### 1. Load PRD User Journeys as Foundation
|
||||||
|
|
||||||
|
Start with user journeys already defined in the PRD:
|
||||||
|
"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, design detailed flow:
|
||||||
|
|
||||||
|
**For [Journey Name]:**
|
||||||
|
"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
|
||||||
|
|
||||||
|
Visualize each journey with Mermaid 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
|
||||||
|
|
||||||
|
Refine flows for optimal user experience:
|
||||||
|
"**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
|
||||||
|
|
||||||
|
Extract reusable patterns across journeys:
|
||||||
|
"**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
|
||||||
|
|
||||||
|
Prepare the content to append to the document:
|
||||||
|
|
||||||
|
#### Content Structure:
|
||||||
|
|
||||||
|
When saving to document, append these Level 2 and Level 3 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
|
||||||
|
|
||||||
|
Show the generated user journey content and present choices:
|
||||||
|
"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
|
||||||
|
[C] Continue - Save this to the document and move to component strategy
|
||||||
|
|
||||||
|
### 8. Handle Menu Selection
|
||||||
|
|
||||||
|
#### If 'A' (Advanced Elicitation):
|
||||||
|
|
||||||
|
- Execute advanced-elicitation.xml with the current user journey content
|
||||||
|
- Process the enhanced journey insights that come back
|
||||||
|
- Ask user: "Accept these improvements to the user journeys? (y/n)"
|
||||||
|
- If yes: Update content with improvements, then return to A/P/C menu
|
||||||
|
- If no: Keep original content, then return to A/P/C menu
|
||||||
|
|
||||||
|
#### If 'P' (Party Mode):
|
||||||
|
|
||||||
|
- Execute party-mode workflow with the current user journeys
|
||||||
|
- Process the collaborative journey insights that come back
|
||||||
|
- Ask user: "Accept these changes to the user journeys? (y/n)"
|
||||||
|
- If yes: Update content with improvements, then return to A/P/C menu
|
||||||
|
- If no: Keep original content, then return to A/P/C menu
|
||||||
|
|
||||||
|
#### If 'C' (Continue):
|
||||||
|
|
||||||
|
- Append the final content to `{output_folder}/ux-design-specification.md`
|
||||||
|
- Update frontmatter: `stepsCompleted: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]`
|
||||||
|
- Load `./step-11-component-strategy.md`
|
||||||
|
|
||||||
|
## APPEND TO DOCUMENT:
|
||||||
|
|
||||||
|
When user selects 'C', append the content directly to the document using the structure from step 6.
|
||||||
|
|
||||||
|
## SUCCESS METRICS:
|
||||||
|
|
||||||
|
✅ Critical user journeys identified and designed
|
||||||
|
✅ Detailed flow diagrams created for each journey
|
||||||
|
✅ Flows optimized for efficiency and user delight
|
||||||
|
✅ Common journey patterns extracted and documented
|
||||||
|
✅ A/P/C menu presented and handled correctly
|
||||||
|
✅ Content properly appended to document when C selected
|
||||||
|
|
||||||
|
## FAILURE MODES:
|
||||||
|
|
||||||
|
❌ Not identifying all critical user journeys
|
||||||
|
❌ Flows too complex or not optimized for user success
|
||||||
|
❌ Missing error recovery paths
|
||||||
|
❌ Not extracting reusable patterns across journeys
|
||||||
|
❌ Flow diagrams unclear or incomplete
|
||||||
|
❌ Not presenting A/P/C menu after content generation
|
||||||
|
❌ Appending content without user selecting 'C'
|
||||||
|
|
||||||
|
## NEXT STEP:
|
||||||
|
|
||||||
|
After user selects 'C' and content is saved to document, load `./step-11-component-strategy.md` to define component library strategy.
|
||||||
|
|
||||||
|
Remember: Do NOT proceed to step-11 until user explicitly selects 'C' from the A/P/C menu and content is saved!
|
||||||
|
|
@ -0,0 +1,240 @@
|
||||||
|
# Step 11: Component Strategy
|
||||||
|
|
||||||
|
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||||
|
|
||||||
|
- 🛑 NEVER generate content without user input
|
||||||
|
- ✅ ALWAYS treat this as collaborative discovery between UX facilitator and stakeholder
|
||||||
|
- 📋 YOU ARE A UX FACILITATOR, not a content generator
|
||||||
|
- 💬 FOCUS on defining component library strategy and custom components
|
||||||
|
- 🎯 COLLABORATIVE component planning, not assumption-based design
|
||||||
|
|
||||||
|
## EXECUTION PROTOCOLS:
|
||||||
|
|
||||||
|
- 🎯 Show your analysis before taking any action
|
||||||
|
- ⚠️ Present A/P/C menu after generating component strategy content
|
||||||
|
- 💾 ONLY save when user chooses C (Continue)
|
||||||
|
- 📖 Update frontmatter `stepsCompleted: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]` before loading next step
|
||||||
|
- 🚫 FORBIDDEN to load next step until C is selected
|
||||||
|
|
||||||
|
## COLLABORATION MENUS (A/P/C):
|
||||||
|
|
||||||
|
This step will generate content and present choices:
|
||||||
|
|
||||||
|
- **A (Advanced Elicitation)**: Use discovery protocols to develop deeper component insights
|
||||||
|
- **P (Party Mode)**: Bring multiple perspectives to define component strategy
|
||||||
|
- **C (Continue)**: Save the content to the document and proceed to next step
|
||||||
|
|
||||||
|
## PROTOCOL INTEGRATION:
|
||||||
|
|
||||||
|
- When 'A' selected: Execute {project-root}/{bmad_folder}/core/tasks/advanced-elicitation.xml
|
||||||
|
- When 'P' selected: Execute {project-root}/{bmad_folder}/core/workflows/party-mode
|
||||||
|
- PROTOCOLS always return to this step's A/P/C menu
|
||||||
|
- User accepts/rejects protocol changes before proceeding
|
||||||
|
|
||||||
|
## CONTEXT BOUNDARIES:
|
||||||
|
|
||||||
|
- Current document and frontmatter from previous steps are available
|
||||||
|
- Design system choice from step 6 determines available components
|
||||||
|
- User journeys from step 10 identify component needs
|
||||||
|
- Focus on defining custom components and implementation strategy
|
||||||
|
|
||||||
|
## YOUR TASK:
|
||||||
|
|
||||||
|
Define component library strategy and design custom components not covered by the design system.
|
||||||
|
|
||||||
|
## COMPONENT STRATEGY SEQUENCE:
|
||||||
|
|
||||||
|
### 1. Analyze Design System Coverage
|
||||||
|
|
||||||
|
Review what components are available vs. needed:
|
||||||
|
"Based on our chosen design system [design system from step 6], let's identify what components are already available and what we need to create custom.
|
||||||
|
|
||||||
|
**Available from Design System:**
|
||||||
|
[List of components available in chosen design system]
|
||||||
|
|
||||||
|
**Components Needed for {{project_name}}:**
|
||||||
|
Looking at our user journeys and design direction, we need:
|
||||||
|
|
||||||
|
- [Component need 1 from journey analysis]
|
||||||
|
- [Component need 2 from design requirements]
|
||||||
|
- [Component need 3 from core experience]
|
||||||
|
|
||||||
|
**Gap Analysis:**
|
||||||
|
|
||||||
|
- [Gap 1 - needed but not available]
|
||||||
|
- [Gap 2 - needed but not available]"
|
||||||
|
|
||||||
|
### 2. Design Custom Components
|
||||||
|
|
||||||
|
For each custom component needed, design thoroughly:
|
||||||
|
|
||||||
|
**For each custom component:**
|
||||||
|
"**[Component Name] Design:**
|
||||||
|
|
||||||
|
**Purpose:** What does this component do for users?
|
||||||
|
**Content:** What information or data does it display?
|
||||||
|
**Actions:** What can users do with this component?
|
||||||
|
**States:** What different states does it have? (default, hover, active, disabled, error, etc.)
|
||||||
|
**Variants:** Are there different sizes or styles needed?
|
||||||
|
**Accessibility:** What ARIA labels and keyboard support needed?
|
||||||
|
|
||||||
|
Let's walk through each custom component systematically."
|
||||||
|
|
||||||
|
### 3. Document Component Specifications
|
||||||
|
|
||||||
|
Create detailed specifications for each component:
|
||||||
|
|
||||||
|
**Component Specification Template:**
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
### [Component Name]
|
||||||
|
|
||||||
|
**Purpose:** [Clear purpose statement]
|
||||||
|
**Usage:** [When and how to use]
|
||||||
|
**Anatomy:** [Visual breakdown of parts]
|
||||||
|
**States:** [All possible states with descriptions]
|
||||||
|
**Variants:** [Different sizes/styles if applicable]
|
||||||
|
**Accessibility:** [ARIA labels, keyboard navigation]
|
||||||
|
**Content Guidelines:** [What content works best]
|
||||||
|
**Interaction Behavior:** [How users interact]
|
||||||
|
```
|
||||||
|
|
||||||
|
### 4. Define Component Strategy
|
||||||
|
|
||||||
|
Establish overall component library approach:
|
||||||
|
"**Component Strategy:**
|
||||||
|
|
||||||
|
**Foundation Components:** (from design system)
|
||||||
|
|
||||||
|
- [Foundation component 1]
|
||||||
|
- [Foundation component 2]
|
||||||
|
|
||||||
|
**Custom Components:** (designed in this step)
|
||||||
|
|
||||||
|
- [Custom component 1 with rationale]
|
||||||
|
- [Custom component 2 with rationale]
|
||||||
|
|
||||||
|
**Implementation Approach:**
|
||||||
|
|
||||||
|
- Build custom components using design system tokens
|
||||||
|
- Ensure consistency with established patterns
|
||||||
|
- Follow accessibility best practices
|
||||||
|
- Create reusable patterns for common use cases"
|
||||||
|
|
||||||
|
### 5. Plan Implementation Roadmap
|
||||||
|
|
||||||
|
Define how and when to build components:
|
||||||
|
"**Implementation Roadmap:**
|
||||||
|
|
||||||
|
**Phase 1 - Core Components:**
|
||||||
|
|
||||||
|
- [Component 1] - needed for [critical flow]
|
||||||
|
- [Component 2] - needed for [critical flow]
|
||||||
|
|
||||||
|
**Phase 2 - Supporting Components:**
|
||||||
|
|
||||||
|
- [Component 3] - enhances [user experience]
|
||||||
|
- [Component 4] - supports [design pattern]
|
||||||
|
|
||||||
|
**Phase 3 - Enhancement Components:**
|
||||||
|
|
||||||
|
- [Component 5] - optimizes [user journey]
|
||||||
|
- [Component 6] - adds [special feature]
|
||||||
|
|
||||||
|
This roadmap helps prioritize development based on user journey criticality."
|
||||||
|
|
||||||
|
### 6. Generate Component Strategy Content
|
||||||
|
|
||||||
|
Prepare the content to append to the document:
|
||||||
|
|
||||||
|
#### Content Structure:
|
||||||
|
|
||||||
|
When saving to document, append these Level 2 and Level 3 sections:
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
## Component Strategy
|
||||||
|
|
||||||
|
### Design System Components
|
||||||
|
|
||||||
|
[Analysis of available design system components based on conversation]
|
||||||
|
|
||||||
|
### Custom Components
|
||||||
|
|
||||||
|
[Custom component specifications based on conversation]
|
||||||
|
|
||||||
|
### Component Implementation Strategy
|
||||||
|
|
||||||
|
[Component implementation strategy based on conversation]
|
||||||
|
|
||||||
|
### Implementation Roadmap
|
||||||
|
|
||||||
|
[Implementation roadmap based on conversation]
|
||||||
|
```
|
||||||
|
|
||||||
|
### 7. Present Content and Menu
|
||||||
|
|
||||||
|
Show the generated component strategy content and present choices:
|
||||||
|
"I've defined the component strategy for {{project_name}}. This balances using proven design system components with custom components for your unique needs.
|
||||||
|
|
||||||
|
**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 component strategy
|
||||||
|
[P] Party Mode - Bring technical perspectives on component design
|
||||||
|
[C] Continue - Save this to the document and move to UX patterns
|
||||||
|
|
||||||
|
### 8. Handle Menu Selection
|
||||||
|
|
||||||
|
#### If 'A' (Advanced Elicitation):
|
||||||
|
|
||||||
|
- Execute advanced-elicitation.xml with the current component strategy content
|
||||||
|
- Process the enhanced component insights that come back
|
||||||
|
- Ask user: "Accept these improvements to the component strategy? (y/n)"
|
||||||
|
- If yes: Update content with improvements, then return to A/P/C menu
|
||||||
|
- If no: Keep original content, then return to A/P/C menu
|
||||||
|
|
||||||
|
#### If 'P' (Party Mode):
|
||||||
|
|
||||||
|
- Execute party-mode workflow with the current component strategy
|
||||||
|
- Process the collaborative component insights that come back
|
||||||
|
- Ask user: "Accept these changes to the component strategy? (y/n)"
|
||||||
|
- If yes: Update content with improvements, then return to A/P/C menu
|
||||||
|
- If no: Keep original content, then return to A/P/C menu
|
||||||
|
|
||||||
|
#### If 'C' (Continue):
|
||||||
|
|
||||||
|
- Append the final content to `{output_folder}/ux-design-specification.md`
|
||||||
|
- Update frontmatter: `stepsCompleted: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]`
|
||||||
|
- Load `./step-12-ux-patterns.md`
|
||||||
|
|
||||||
|
## APPEND TO DOCUMENT:
|
||||||
|
|
||||||
|
When user selects 'C', append the content directly to the document using the structure from step 6.
|
||||||
|
|
||||||
|
## SUCCESS METRICS:
|
||||||
|
|
||||||
|
✅ Design system coverage properly analyzed
|
||||||
|
✅ All custom components thoroughly specified
|
||||||
|
✅ Component strategy clearly defined
|
||||||
|
✅ Implementation roadmap prioritized by user need
|
||||||
|
✅ Accessibility considered for all components
|
||||||
|
✅ A/P/C menu presented and handled correctly
|
||||||
|
✅ Content properly appended to document when C selected
|
||||||
|
|
||||||
|
## FAILURE MODES:
|
||||||
|
|
||||||
|
❌ Not analyzing design system coverage properly
|
||||||
|
❌ Custom components not thoroughly specified
|
||||||
|
❌ Missing accessibility considerations
|
||||||
|
❌ Component strategy not aligned with user journeys
|
||||||
|
❌ Implementation roadmap not prioritized effectively
|
||||||
|
❌ Not presenting A/P/C menu after content generation
|
||||||
|
❌ Appending content without user selecting 'C'
|
||||||
|
|
||||||
|
## NEXT STEP:
|
||||||
|
|
||||||
|
After user selects 'C' and content is saved to document, load `./step-12-ux-patterns.md` to define UX consistency patterns.
|
||||||
|
|
||||||
|
Remember: Do NOT proceed to step-12 until user explicitly selects 'C' from the A/P/C menu and content is saved!
|
||||||
|
|
@ -0,0 +1,229 @@
|
||||||
|
# Step 12: UX Consistency Patterns
|
||||||
|
|
||||||
|
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||||
|
|
||||||
|
- 🛑 NEVER generate content without user input
|
||||||
|
- ✅ ALWAYS treat this as collaborative discovery between UX facilitator and stakeholder
|
||||||
|
- 📋 YOU ARE A UX FACILITATOR, not a content generator
|
||||||
|
- 💬 FOCUS on establishing consistency patterns for common UX situations
|
||||||
|
- 🎯 COLLABORATIVE pattern definition, not assumption-based design
|
||||||
|
|
||||||
|
## EXECUTION PROTOCOLS:
|
||||||
|
|
||||||
|
- 🎯 Show your analysis before taking any action
|
||||||
|
- ⚠️ Present A/P/C menu after generating UX patterns content
|
||||||
|
- 💾 ONLY save when user chooses C (Continue)
|
||||||
|
- 📖 Update frontmatter `stepsCompleted: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]` before loading next step
|
||||||
|
- 🚫 FORBIDDEN to load next step until C is selected
|
||||||
|
|
||||||
|
## COLLABORATION MENUS (A/P/C):
|
||||||
|
|
||||||
|
This step will generate content and present choices:
|
||||||
|
|
||||||
|
- **A (Advanced Elicitation)**: Use discovery protocols to develop deeper pattern insights
|
||||||
|
- **P (Party Mode)**: Bring multiple perspectives to define UX patterns
|
||||||
|
- **C (Continue)**: Save the content to the document and proceed to next step
|
||||||
|
|
||||||
|
## PROTOCOL INTEGRATION:
|
||||||
|
|
||||||
|
- When 'A' selected: Execute {project-root}/{bmad_folder}/core/tasks/advanced-elicitation.xml
|
||||||
|
- When 'P' selected: Execute {project-root}/{bmad_folder}/core/workflows/party-mode
|
||||||
|
- PROTOCOLS always return to this step's A/P/C menu
|
||||||
|
- User accepts/rejects protocol changes before proceeding
|
||||||
|
|
||||||
|
## CONTEXT BOUNDARIES:
|
||||||
|
|
||||||
|
- Current document and frontmatter from previous steps are available
|
||||||
|
- Component strategy from step 11 informs pattern decisions
|
||||||
|
- User journeys from step 10 identify common pattern needs
|
||||||
|
- Focus on consistency patterns for common UX situations
|
||||||
|
|
||||||
|
## YOUR TASK:
|
||||||
|
|
||||||
|
Establish UX consistency patterns for common situations like buttons, forms, navigation, and feedback.
|
||||||
|
|
||||||
|
## UX PATTERNS SEQUENCE:
|
||||||
|
|
||||||
|
### 1. Identify Pattern Categories
|
||||||
|
|
||||||
|
Determine which patterns need definition for your product:
|
||||||
|
"Let's establish consistency patterns for how {{project_name}} behaves in common situations.
|
||||||
|
|
||||||
|
**Pattern Categories to Define:**
|
||||||
|
|
||||||
|
- Button hierarchy and actions
|
||||||
|
- Feedback patterns (success, error, warning, info)
|
||||||
|
- Form patterns and validation
|
||||||
|
- Navigation patterns
|
||||||
|
- Modal and overlay patterns
|
||||||
|
- Empty states and loading states
|
||||||
|
- Search and filtering patterns
|
||||||
|
|
||||||
|
Which categories are most critical for your product? We can go through each thoroughly or focus on the most important ones."
|
||||||
|
|
||||||
|
### 2. Define Critical Patterns First
|
||||||
|
|
||||||
|
Focus on patterns most relevant to your product:
|
||||||
|
|
||||||
|
**For [Critical Pattern Category]:**
|
||||||
|
"**[Pattern Type] Patterns:**
|
||||||
|
What should users see/do when they need to [pattern action]?
|
||||||
|
|
||||||
|
**Considerations:**
|
||||||
|
|
||||||
|
- Visual hierarchy (primary vs. secondary actions)
|
||||||
|
- Feedback mechanisms
|
||||||
|
- Error recovery
|
||||||
|
- Accessibility requirements
|
||||||
|
- Mobile vs. desktop considerations
|
||||||
|
|
||||||
|
**Examples:**
|
||||||
|
|
||||||
|
- [Example 1 for this pattern type]
|
||||||
|
- [Example 2 for this pattern type]
|
||||||
|
|
||||||
|
How should {{project_name}} handle [pattern type] interactions?"
|
||||||
|
|
||||||
|
### 3. Establish Pattern Guidelines
|
||||||
|
|
||||||
|
Document specific design decisions:
|
||||||
|
|
||||||
|
**Pattern Guidelines Template:**
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
### [Pattern Type]
|
||||||
|
|
||||||
|
**When to Use:** [Clear usage guidelines]
|
||||||
|
**Visual Design:** [How it should look]
|
||||||
|
**Behavior:** [How it should interact]
|
||||||
|
**Accessibility:** [A11y requirements]
|
||||||
|
**Mobile Considerations:** [Mobile-specific needs]
|
||||||
|
**Variants:** [Different states or styles if applicable]
|
||||||
|
```
|
||||||
|
|
||||||
|
### 4. Design System Integration
|
||||||
|
|
||||||
|
Ensure patterns work with chosen design system:
|
||||||
|
"**Integration with [Design System]:**
|
||||||
|
|
||||||
|
- How do these patterns complement our design system components?
|
||||||
|
- What customizations are needed?
|
||||||
|
- How do we maintain consistency while meeting unique needs?
|
||||||
|
|
||||||
|
**Custom Pattern Rules:**
|
||||||
|
|
||||||
|
- [Custom rule 1]
|
||||||
|
- [Custom rule 2]
|
||||||
|
- [Custom rule 3]"
|
||||||
|
|
||||||
|
### 5. Create Pattern Documentation
|
||||||
|
|
||||||
|
Generate comprehensive pattern library:
|
||||||
|
|
||||||
|
**Pattern Library Structure:**
|
||||||
|
|
||||||
|
- Clear usage guidelines for each pattern
|
||||||
|
- Visual examples and specifications
|
||||||
|
- Implementation notes for developers
|
||||||
|
- Accessibility checklists
|
||||||
|
- Mobile-first considerations
|
||||||
|
|
||||||
|
### 6. Generate UX Patterns Content
|
||||||
|
|
||||||
|
Prepare the content to append to the document:
|
||||||
|
|
||||||
|
#### Content Structure:
|
||||||
|
|
||||||
|
When saving to document, append these Level 2 and Level 3 sections:
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
## UX Consistency Patterns
|
||||||
|
|
||||||
|
### Button Hierarchy
|
||||||
|
|
||||||
|
[Button hierarchy patterns based on conversation]
|
||||||
|
|
||||||
|
### Feedback Patterns
|
||||||
|
|
||||||
|
[Feedback patterns based on conversation]
|
||||||
|
|
||||||
|
### Form Patterns
|
||||||
|
|
||||||
|
[Form patterns based on conversation]
|
||||||
|
|
||||||
|
### Navigation Patterns
|
||||||
|
|
||||||
|
[Navigation patterns based on conversation]
|
||||||
|
|
||||||
|
### Additional Patterns
|
||||||
|
|
||||||
|
[Additional patterns based on conversation]
|
||||||
|
```
|
||||||
|
|
||||||
|
### 7. Present Content and Menu
|
||||||
|
|
||||||
|
Show the generated UX patterns content and present choices:
|
||||||
|
"I've established UX consistency patterns for {{project_name}}. These patterns ensure users have a consistent, predictable experience across all interactions.
|
||||||
|
|
||||||
|
**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 UX patterns
|
||||||
|
[P] Party Mode - Bring different perspectives on consistency patterns
|
||||||
|
[C] Continue - Save this to the document and move to responsive design
|
||||||
|
|
||||||
|
### 8. Handle Menu Selection
|
||||||
|
|
||||||
|
#### If 'A' (Advanced Elicitation):
|
||||||
|
|
||||||
|
- Execute advanced-elicitation.xml with the current UX patterns content
|
||||||
|
- Process the enhanced pattern insights that come back
|
||||||
|
- Ask user: "Accept these improvements to the UX patterns? (y/n)"
|
||||||
|
- If yes: Update content with improvements, then return to A/P/C menu
|
||||||
|
- If no: Keep original content, then return to A/P/C menu
|
||||||
|
|
||||||
|
#### If 'P' (Party Mode):
|
||||||
|
|
||||||
|
- Execute party-mode workflow with the current UX patterns
|
||||||
|
- Process the collaborative pattern insights that come back
|
||||||
|
- Ask user: "Accept these changes to the UX patterns? (y/n)"
|
||||||
|
- If yes: Update content with improvements, then return to A/P/C menu
|
||||||
|
- If no: Keep original content, then return to A/P/C menu
|
||||||
|
|
||||||
|
#### If 'C' (Continue):
|
||||||
|
|
||||||
|
- Append the final content to `{output_folder}/ux-design-specification.md`
|
||||||
|
- Update frontmatter: `stepsCompleted: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]`
|
||||||
|
- Load `./step-13-responsive-accessibility.md`
|
||||||
|
|
||||||
|
## APPEND TO DOCUMENT:
|
||||||
|
|
||||||
|
When user selects 'C', append the content directly to the document using the structure from step 6.
|
||||||
|
|
||||||
|
## SUCCESS METRICS:
|
||||||
|
|
||||||
|
✅ Critical pattern categories identified and prioritized
|
||||||
|
✅ Consistency patterns clearly defined and documented
|
||||||
|
✅ Patterns integrated with chosen design system
|
||||||
|
✅ Accessibility considerations included for all patterns
|
||||||
|
✅ Mobile-first approach incorporated
|
||||||
|
✅ A/P/C menu presented and handled correctly
|
||||||
|
✅ Content properly appended to document when C selected
|
||||||
|
|
||||||
|
## FAILURE MODES:
|
||||||
|
|
||||||
|
❌ Not identifying the most critical pattern categories
|
||||||
|
❌ Patterns too generic or not actionable
|
||||||
|
❌ Missing accessibility considerations
|
||||||
|
❌ Patterns not aligned with design system
|
||||||
|
❌ Not considering mobile differences
|
||||||
|
❌ Not presenting A/P/C menu after content generation
|
||||||
|
❌ Appending content without user selecting 'C'
|
||||||
|
|
||||||
|
## NEXT STEP:
|
||||||
|
|
||||||
|
After user selects 'C' and content is saved to document, load `./step-13-responsive-accessibility.md` to define responsive design and accessibility strategy.
|
||||||
|
|
||||||
|
Remember: Do NOT proceed to step-13 until user explicitly selects 'C' from the A/P/C menu and content is saved!
|
||||||
|
|
@ -0,0 +1,256 @@
|
||||||
|
# Step 13: Responsive Design & Accessibility
|
||||||
|
|
||||||
|
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||||
|
|
||||||
|
- 🛑 NEVER generate content without user input
|
||||||
|
- ✅ ALWAYS treat this as collaborative discovery between UX facilitator and stakeholder
|
||||||
|
- 📋 YOU ARE A UX FACILITATOR, not a content generator
|
||||||
|
- 💬 FOCUS on responsive design strategy and accessibility compliance
|
||||||
|
- 🎯 COLLABORATIVE strategy definition, not assumption-based design
|
||||||
|
|
||||||
|
## EXECUTION PROTOCOLS:
|
||||||
|
|
||||||
|
- 🎯 Show your analysis before taking any action
|
||||||
|
- ⚠️ Present A/P/C menu after generating responsive/accessibility content
|
||||||
|
- 💾 ONLY save when user chooses C (Continue)
|
||||||
|
- 📖 Update frontmatter `stepsCompleted: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]` before loading next step
|
||||||
|
- 🚫 FORBIDDEN to load next step until C is selected
|
||||||
|
|
||||||
|
## COLLABORATION MENUS (A/P/C):
|
||||||
|
|
||||||
|
This step will generate content and present choices:
|
||||||
|
|
||||||
|
- **A (Advanced Elicitation)**: Use discovery protocols to develop deeper responsive/accessibility insights
|
||||||
|
- **P (Party Mode)**: Bring multiple perspectives to define responsive/accessibility strategy
|
||||||
|
- **C (Continue)**: Save the content to the document and proceed to final step
|
||||||
|
|
||||||
|
## PROTOCOL INTEGRATION:
|
||||||
|
|
||||||
|
- When 'A' selected: Execute {project-root}/{bmad_folder}/core/tasks/advanced-elicitation.xml
|
||||||
|
- When 'P' selected: Execute {project-root}/{bmad_folder}/core/workflows/party-mode
|
||||||
|
- PROTOCOLS always return to this step's A/P/C menu
|
||||||
|
- User accepts/rejects protocol changes before proceeding
|
||||||
|
|
||||||
|
## CONTEXT BOUNDARIES:
|
||||||
|
|
||||||
|
- Current document and frontmatter from previous steps are available
|
||||||
|
- Platform requirements from step 3 inform responsive design
|
||||||
|
- Design direction from step 9 influences responsive layout choices
|
||||||
|
- Focus on cross-device adaptation and accessibility compliance
|
||||||
|
|
||||||
|
## YOUR TASK:
|
||||||
|
|
||||||
|
Define responsive design strategy and accessibility requirements for the product.
|
||||||
|
|
||||||
|
## RESPONSIVE & ACCESSIBILITY SEQUENCE:
|
||||||
|
|
||||||
|
### 1. Define Responsive Strategy
|
||||||
|
|
||||||
|
Establish how the design adapts across devices:
|
||||||
|
"Let's define how {{project_name}} adapts across different screen sizes and devices.
|
||||||
|
|
||||||
|
**Responsive Design Questions:**
|
||||||
|
|
||||||
|
**Desktop Strategy:**
|
||||||
|
|
||||||
|
- How should we use extra screen real estate?
|
||||||
|
- Multi-column layouts, side navigation, or content density?
|
||||||
|
- What desktop-specific features can we include?
|
||||||
|
|
||||||
|
**Tablet Strategy:**
|
||||||
|
|
||||||
|
- Should we use simplified layouts or touch-optimized interfaces?
|
||||||
|
- How do gestures and touch interactions work on tablets?
|
||||||
|
- What's the optimal information density for tablet screens?
|
||||||
|
|
||||||
|
**Mobile Strategy:**
|
||||||
|
|
||||||
|
- Bottom navigation or hamburger menu?
|
||||||
|
- How do layouts collapse on small screens?
|
||||||
|
- What's the most critical information to show mobile-first?"
|
||||||
|
|
||||||
|
### 2. Establish Breakpoint Strategy
|
||||||
|
|
||||||
|
Define when and how layouts change:
|
||||||
|
"**Breakpoint Strategy:**
|
||||||
|
We need to define screen size breakpoints where layouts adapt.
|
||||||
|
|
||||||
|
**Common Breakpoints:**
|
||||||
|
|
||||||
|
- Mobile: 320px - 767px
|
||||||
|
- Tablet: 768px - 1023px
|
||||||
|
- Desktop: 1024px+
|
||||||
|
|
||||||
|
**For {{project_name}}, should we:**
|
||||||
|
|
||||||
|
- Use standard breakpoints or custom ones?
|
||||||
|
- Focus on mobile-first or desktop-first design?
|
||||||
|
- Have specific breakpoints for your key use cases?"
|
||||||
|
|
||||||
|
### 3. Design Accessibility Strategy
|
||||||
|
|
||||||
|
Define accessibility requirements and compliance level:
|
||||||
|
"**Accessibility Strategy:**
|
||||||
|
What level of WCAG compliance does {{project_name}} need?
|
||||||
|
|
||||||
|
**WCAG Levels:**
|
||||||
|
|
||||||
|
- **Level A (Basic)** - Essential accessibility for legal compliance
|
||||||
|
- **Level AA (Recommended)** - Industry standard for good UX
|
||||||
|
- **Level AAA (Highest)** - Exceptional accessibility (rarely needed)
|
||||||
|
|
||||||
|
**Based on your product:**
|
||||||
|
|
||||||
|
- [Recommendation based on user base, legal requirements, etc.]
|
||||||
|
|
||||||
|
**Key Accessibility Considerations:**
|
||||||
|
|
||||||
|
- Color contrast ratios (4.5:1 for normal text)
|
||||||
|
- Keyboard navigation support
|
||||||
|
- Screen reader compatibility
|
||||||
|
- Touch target sizes (minimum 44x44px)
|
||||||
|
- Focus indicators and skip links"
|
||||||
|
|
||||||
|
### 4. Define Testing Strategy
|
||||||
|
|
||||||
|
Plan how to ensure responsive design and accessibility:
|
||||||
|
"**Testing Strategy:**
|
||||||
|
|
||||||
|
**Responsive Testing:**
|
||||||
|
|
||||||
|
- Device testing on actual phones/tablets
|
||||||
|
- Browser testing across Chrome, Firefox, Safari, Edge
|
||||||
|
- Real device network performance testing
|
||||||
|
|
||||||
|
**Accessibility Testing:**
|
||||||
|
|
||||||
|
- Automated accessibility testing tools
|
||||||
|
- Screen reader testing (VoiceOver, NVDA, JAWS)
|
||||||
|
- Keyboard-only navigation testing
|
||||||
|
- Color blindness simulation testing
|
||||||
|
|
||||||
|
**User Testing:**
|
||||||
|
|
||||||
|
- Include users with disabilities in testing
|
||||||
|
- Test with diverse assistive technologies
|
||||||
|
- Validate with actual target devices"
|
||||||
|
|
||||||
|
### 5. Document Implementation Guidelines
|
||||||
|
|
||||||
|
Create specific guidelines for developers:
|
||||||
|
"**Implementation Guidelines:**
|
||||||
|
|
||||||
|
**Responsive Development:**
|
||||||
|
|
||||||
|
- Use relative units (rem, %, vw, vh) over fixed pixels
|
||||||
|
- Implement mobile-first media queries
|
||||||
|
- Test touch targets and gesture areas
|
||||||
|
- Optimize images and assets for different devices
|
||||||
|
|
||||||
|
**Accessibility Development:**
|
||||||
|
|
||||||
|
- Semantic HTML structure
|
||||||
|
- ARIA labels and roles
|
||||||
|
- Keyboard navigation implementation
|
||||||
|
- Focus management and skip links
|
||||||
|
- High contrast mode support"
|
||||||
|
|
||||||
|
### 6. Generate Responsive & Accessibility Content
|
||||||
|
|
||||||
|
Prepare the content to append to the document:
|
||||||
|
|
||||||
|
#### Content Structure:
|
||||||
|
|
||||||
|
When saving to document, append these Level 2 and Level 3 sections:
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
## Responsive Design & Accessibility
|
||||||
|
|
||||||
|
### Responsive Strategy
|
||||||
|
|
||||||
|
[Responsive strategy based on conversation]
|
||||||
|
|
||||||
|
### Breakpoint Strategy
|
||||||
|
|
||||||
|
[Breakpoint strategy based on conversation]
|
||||||
|
|
||||||
|
### Accessibility Strategy
|
||||||
|
|
||||||
|
[Accessibility strategy based on conversation]
|
||||||
|
|
||||||
|
### Testing Strategy
|
||||||
|
|
||||||
|
[Testing strategy based on conversation]
|
||||||
|
|
||||||
|
### Implementation Guidelines
|
||||||
|
|
||||||
|
[Implementation guidelines based on conversation]
|
||||||
|
```
|
||||||
|
|
||||||
|
### 7. Present Content and Menu
|
||||||
|
|
||||||
|
Show the generated responsive and accessibility content and present choices:
|
||||||
|
"I've defined the responsive design and accessibility strategy for {{project_name}}. This ensures your product works beautifully across all devices and is accessible to all users.
|
||||||
|
|
||||||
|
**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 responsive/accessibility strategy
|
||||||
|
[P] Party Mode - Bring different perspectives on inclusive design
|
||||||
|
[C] Continue - Save this to the document and complete the workflow
|
||||||
|
|
||||||
|
### 8. Handle Menu Selection
|
||||||
|
|
||||||
|
#### If 'A' (Advanced Elicitation):
|
||||||
|
|
||||||
|
- Execute advanced-elicitation.xml with the current responsive/accessibility content
|
||||||
|
- Process the enhanced insights that come back
|
||||||
|
- Ask user: "Accept these improvements to the responsive/accessibility strategy? (y/n)"
|
||||||
|
- If yes: Update content with improvements, then return to A/P/C menu
|
||||||
|
- If no: Keep original content, then return to A/P/C menu
|
||||||
|
|
||||||
|
#### If 'P' (Party Mode):
|
||||||
|
|
||||||
|
- Execute party-mode workflow with the current responsive/accessibility strategy
|
||||||
|
- Process the collaborative insights that come back
|
||||||
|
- Ask user: "Accept these changes to the responsive/accessibility strategy? (y/n)"
|
||||||
|
- If yes: Update content with improvements, then return to A/P/C menu
|
||||||
|
- If no: Keep original content, then return to A/P/C menu
|
||||||
|
|
||||||
|
#### If 'C' (Continue):
|
||||||
|
|
||||||
|
- Append the final content to `{output_folder}/ux-design-specification.md`
|
||||||
|
- Update frontmatter: `stepsCompleted: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]`
|
||||||
|
- Load `./step-14-complete.md`
|
||||||
|
|
||||||
|
## APPEND TO DOCUMENT:
|
||||||
|
|
||||||
|
When user selects 'C', append the content directly to the document using the structure from step 6.
|
||||||
|
|
||||||
|
## SUCCESS METRICS:
|
||||||
|
|
||||||
|
✅ Responsive strategy clearly defined for all device types
|
||||||
|
✅ Appropriate breakpoint strategy established
|
||||||
|
✅ Accessibility requirements determined and documented
|
||||||
|
✅ Comprehensive testing strategy planned
|
||||||
|
✅ Implementation guidelines provided for development team
|
||||||
|
✅ A/P/C menu presented and handled correctly
|
||||||
|
✅ Content properly appended to document when C selected
|
||||||
|
|
||||||
|
## FAILURE MODES:
|
||||||
|
|
||||||
|
❌ Not considering all device types and screen sizes
|
||||||
|
❌ Accessibility requirements not properly researched
|
||||||
|
❌ Testing strategy not comprehensive enough
|
||||||
|
❌ Implementation guidelines too generic or unclear
|
||||||
|
❌ Not addressing specific accessibility challenges for your product
|
||||||
|
❌ Not presenting A/P/C menu after content generation
|
||||||
|
❌ Appending content without user selecting 'C'
|
||||||
|
|
||||||
|
## NEXT STEP:
|
||||||
|
|
||||||
|
After user selects 'C' and content is saved to document, load `./step-14-complete.md` to finalize the UX design workflow.
|
||||||
|
|
||||||
|
Remember: Do NOT proceed to step-14 until user explicitly selects 'C' from the A/P/C menu and content is saved!
|
||||||
|
|
@ -0,0 +1,219 @@
|
||||||
|
# Step 14: Workflow Completion
|
||||||
|
|
||||||
|
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||||
|
|
||||||
|
- ✅ THIS IS A FINAL STEP - Workflow completion required
|
||||||
|
- 🛑 NO content generation - this is a wrap-up step
|
||||||
|
- 📋 FINALIZE document and update workflow status
|
||||||
|
- 💬 FOCUS on completion, validation, and next steps
|
||||||
|
- 🎯 UPDATE workflow status files with completion information
|
||||||
|
|
||||||
|
## EXECUTION PROTOCOLS:
|
||||||
|
|
||||||
|
- 🎯 Show your analysis before taking any action
|
||||||
|
- 💾 Update the main workflow status file with completion information
|
||||||
|
- 📖 Suggest potential next workflow steps for the user
|
||||||
|
- 🚫 DO NOT load additional steps after this one
|
||||||
|
|
||||||
|
## TERMINATION STEP PROTOCOLS:
|
||||||
|
|
||||||
|
- This is a FINAL step - workflow completion required
|
||||||
|
- Output completion summary and next step guidance
|
||||||
|
- Update the main workflow status file with finalized document
|
||||||
|
- Suggest potential next workflow steps for the user
|
||||||
|
- Mark workflow as complete in status tracking
|
||||||
|
|
||||||
|
## CONTEXT BOUNDARIES:
|
||||||
|
|
||||||
|
- Complete UX design specification is available from all previous steps
|
||||||
|
- Workflow frontmatter shows all completed steps
|
||||||
|
- All collaborative content has been generated and saved
|
||||||
|
- Focus on completion, validation, and next steps
|
||||||
|
|
||||||
|
## YOUR TASK:
|
||||||
|
|
||||||
|
Complete the UX design workflow, update status files, and suggest next steps for the project.
|
||||||
|
|
||||||
|
## WORKFLOW COMPLETION SEQUENCE:
|
||||||
|
|
||||||
|
### 1. Announce Workflow Completion
|
||||||
|
|
||||||
|
Inform user that the UX design is complete:
|
||||||
|
"🎉 **UX Design Complete, {{user_name}}!**
|
||||||
|
|
||||||
|
I've successfully collaborated with you to create a comprehensive UX design specification for {{project_name}}.
|
||||||
|
|
||||||
|
**What we've accomplished:**
|
||||||
|
|
||||||
|
- ✅ Project understanding and user insights
|
||||||
|
- ✅ Core experience and emotional response definition
|
||||||
|
- ✅ UX pattern analysis and inspiration
|
||||||
|
- ✅ Design system choice and implementation strategy
|
||||||
|
- ✅ Core interaction definition and experience mechanics
|
||||||
|
- ✅ Visual design foundation (colors, typography, spacing)
|
||||||
|
- ✅ Design direction mockups and visual explorations
|
||||||
|
- ✅ User journey flows and interaction design
|
||||||
|
- ✅ Component strategy and custom component specifications
|
||||||
|
- ✅ UX consistency patterns for common interactions
|
||||||
|
- ✅ Responsive design and accessibility strategy
|
||||||
|
|
||||||
|
**The complete UX design specification is now available at:** `{output_folder}/ux-design-specification.md`
|
||||||
|
|
||||||
|
**Supporting Visual Assets:**
|
||||||
|
|
||||||
|
- Color themes visualizer: `{output_folder}/ux-color-themes.html`
|
||||||
|
- Design directions mockups: `{output_folder}/ux-design-directions.html`
|
||||||
|
|
||||||
|
This specification is now ready to guide visual design, implementation, and development."
|
||||||
|
|
||||||
|
### 2. Workflow Status Update
|
||||||
|
|
||||||
|
Update the main workflow status file:
|
||||||
|
|
||||||
|
- Load `{status_file}` from workflow configuration (if exists)
|
||||||
|
- Update workflow_status["create-ux-design"] = "{default_output_file}"
|
||||||
|
- Save file, preserving all comments and structure
|
||||||
|
- Mark current timestamp as completion time
|
||||||
|
|
||||||
|
### 3. Suggest Next Steps
|
||||||
|
|
||||||
|
Provide guidance on logical next workflows:
|
||||||
|
|
||||||
|
**Typical Next Workflows:**
|
||||||
|
|
||||||
|
**Immediate Next Steps:**
|
||||||
|
|
||||||
|
1. **Wireframe Generation** - Create detailed wireframes based on UX specification
|
||||||
|
2. **Interactive Prototype** - Build clickable prototypes for user testing
|
||||||
|
3. **Solution Architecture** - Technical architecture design with UX context
|
||||||
|
4. **Figma Design** - High-fidelity visual design implementation
|
||||||
|
|
||||||
|
**Visual Design Workflows:**
|
||||||
|
|
||||||
|
- Wireframe Generation → Interactive Prototype → Figma Design
|
||||||
|
- Component Showcase → AI Frontend Prompt → Design System Implementation
|
||||||
|
|
||||||
|
**Development Workflows:**
|
||||||
|
|
||||||
|
- Solution Architecture → Epic Creation → Development Sprints
|
||||||
|
|
||||||
|
**What would be most valuable to tackle next?**
|
||||||
|
|
||||||
|
### 4. Document Quality Check
|
||||||
|
|
||||||
|
Perform final validation of the UX design:
|
||||||
|
|
||||||
|
**Completeness Check:**
|
||||||
|
|
||||||
|
- Does the specification clearly communicate the design vision?
|
||||||
|
- Are user journeys thoroughly documented?
|
||||||
|
- Are all critical components specified?
|
||||||
|
- Are responsive and accessibility requirements comprehensive?
|
||||||
|
- Is there clear guidance for implementation?
|
||||||
|
|
||||||
|
**Consistency Check:**
|
||||||
|
|
||||||
|
- Do all sections align with the emotional goals?
|
||||||
|
- Is design system integration clearly defined?
|
||||||
|
- Are patterns consistent across all user flows?
|
||||||
|
- Does visual direction match established foundation?
|
||||||
|
|
||||||
|
### 5. Final Completion Confirmation
|
||||||
|
|
||||||
|
Confirm completion with user:
|
||||||
|
"**Your UX Design Specification for {{project_name}} is now complete and ready for implementation!**
|
||||||
|
|
||||||
|
**The specification contains everything needed to:**
|
||||||
|
|
||||||
|
- Guide visual designers in creating the final interfaces
|
||||||
|
- Inform developers of all UX requirements and patterns
|
||||||
|
- Ensure consistency across all user interactions
|
||||||
|
- Maintain accessibility and responsive design standards
|
||||||
|
- Provide a foundation for user testing and iteration
|
||||||
|
|
||||||
|
**Ready to continue with:**
|
||||||
|
|
||||||
|
- Wireframe generation for detailed layouts?
|
||||||
|
- Interactive prototype for user testing?
|
||||||
|
- Solution architecture for technical planning?
|
||||||
|
- Visual design implementation?
|
||||||
|
|
||||||
|
**Or would you like to review the complete specification first?**
|
||||||
|
|
||||||
|
[UX Design Workflow Complete]"
|
||||||
|
|
||||||
|
## SUCCESS METRICS:
|
||||||
|
|
||||||
|
✅ UX design specification contains all required sections
|
||||||
|
✅ All collaborative content properly saved to document
|
||||||
|
✅ Workflow status file updated with completion information
|
||||||
|
✅ Clear next step guidance provided to user
|
||||||
|
✅ Document quality validation completed
|
||||||
|
✅ User acknowledges completion and understands next options
|
||||||
|
|
||||||
|
## FAILURE MODES:
|
||||||
|
|
||||||
|
❌ Not updating workflow status file with completion information
|
||||||
|
❌ Missing clear next step guidance for user
|
||||||
|
❌ Not confirming document completeness with user
|
||||||
|
❌ Workflow not properly marked as complete in status tracking
|
||||||
|
❌ User unclear about what happens next
|
||||||
|
|
||||||
|
## WORKFLOW COMPLETION CHECKLIST:
|
||||||
|
|
||||||
|
### Design Specification Complete:
|
||||||
|
|
||||||
|
- [ ] Executive summary and project understanding
|
||||||
|
- [ ] Core experience and emotional response definition
|
||||||
|
- [ ] UX pattern analysis and inspiration
|
||||||
|
- [ ] Design system choice and strategy
|
||||||
|
- [ ] Core interaction mechanics definition
|
||||||
|
- [ ] Visual design foundation (colors, typography, spacing)
|
||||||
|
- [ ] Design direction decisions and mockups
|
||||||
|
- [ ] User journey flows and interaction design
|
||||||
|
- [ ] Component strategy and specifications
|
||||||
|
- [ ] UX consistency patterns documentation
|
||||||
|
- [ ] Responsive design and accessibility strategy
|
||||||
|
|
||||||
|
### Process Complete:
|
||||||
|
|
||||||
|
- [ ] All steps completed with user confirmation
|
||||||
|
- [ ] All content saved to specification document
|
||||||
|
- [ ] Frontmatter properly updated with all steps
|
||||||
|
- [ ] Workflow status file updated with completion
|
||||||
|
- [ ] Next steps clearly communicated
|
||||||
|
|
||||||
|
## NEXT STEPS GUIDANCE:
|
||||||
|
|
||||||
|
**Immediate Options:**
|
||||||
|
|
||||||
|
1. **Wireframe Generation** - Create low-fidelity layouts based on UX spec
|
||||||
|
2. **Interactive Prototype** - Build clickable prototypes for testing
|
||||||
|
3. **Solution Architecture** - Technical design with UX context
|
||||||
|
4. **Figma Visual Design** - High-fidelity UI implementation
|
||||||
|
5. **Epic Creation** - Break down UX requirements for development
|
||||||
|
|
||||||
|
**Recommended Sequence:**
|
||||||
|
For design-focused teams: Wireframes → Prototypes → Figma Design → Development
|
||||||
|
For technical teams: Architecture → Epic Creation → Development
|
||||||
|
|
||||||
|
Consider team capacity, timeline, and whether user validation is needed before implementation.
|
||||||
|
|
||||||
|
## WORKFLOW FINALIZATION:
|
||||||
|
|
||||||
|
- Set `lastStep = 14` in document frontmatter
|
||||||
|
- Update workflow status file with completion timestamp
|
||||||
|
- Provide completion summary to user
|
||||||
|
- Do NOT load any additional steps
|
||||||
|
|
||||||
|
## FINAL REMINDER:
|
||||||
|
|
||||||
|
This UX design workflow is now complete. The specification serves as the foundation for all visual and development work. All design decisions, patterns, and requirements are documented to ensure consistent, accessible, and user-centered implementation.
|
||||||
|
|
||||||
|
**Congratulations on completing the UX Design Specification for {{project_name}}!** 🎉
|
||||||
|
|
||||||
|
**Core Deliverables:**
|
||||||
|
|
||||||
|
- ✅ UX Design Specification: `{output_folder}/ux-design-specification.md`
|
||||||
|
- ✅ Color Themes Visualizer: `{output_folder}/ux-color-themes.html`
|
||||||
|
- ✅ Design Directions: `{output_folder}/ux-design-directions.html`
|
||||||
|
|
@ -1,145 +1,13 @@
|
||||||
# {{project_name}} UX Design Specification
|
---
|
||||||
|
stepsCompleted: []
|
||||||
|
inputDocuments: []
|
||||||
|
---
|
||||||
|
|
||||||
_Created on {{date}} by {{user_name}}_
|
# UX Design Specification {{project_name}}
|
||||||
_Generated using BMad Method - Create UX Design Workflow v1.0_
|
|
||||||
|
**Author:** {{user_name}}
|
||||||
|
**Date:** {{date}}
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Executive Summary
|
<!-- UX design content will be appended sequentially through collaborative workflow steps -->
|
||||||
|
|
||||||
{{project_vision}}
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 1. Design System Foundation
|
|
||||||
|
|
||||||
### 1.1 Design System Choice
|
|
||||||
|
|
||||||
{{design_system_decision}}
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 2. Core User Experience
|
|
||||||
|
|
||||||
### 2.1 Defining Experience
|
|
||||||
|
|
||||||
{{core_experience}}
|
|
||||||
|
|
||||||
### 2.2 Novel UX Patterns
|
|
||||||
|
|
||||||
{{novel_ux_patterns}}
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 3. Visual Foundation
|
|
||||||
|
|
||||||
### 3.1 Color System
|
|
||||||
|
|
||||||
{{visual_foundation}}
|
|
||||||
|
|
||||||
**Interactive Visualizations:**
|
|
||||||
|
|
||||||
- Color Theme Explorer: [ux-color-themes.html](./ux-color-themes.html)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 4. Design Direction
|
|
||||||
|
|
||||||
### 4.1 Chosen Design Approach
|
|
||||||
|
|
||||||
{{design_direction_decision}}
|
|
||||||
|
|
||||||
**Interactive Mockups:**
|
|
||||||
|
|
||||||
- Design Direction Showcase: [ux-design-directions.html](./ux-design-directions.html)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 5. User Journey Flows
|
|
||||||
|
|
||||||
### 5.1 Critical User Paths
|
|
||||||
|
|
||||||
{{user_journey_flows}}
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 6. Component Library
|
|
||||||
|
|
||||||
### 6.1 Component Strategy
|
|
||||||
|
|
||||||
{{component_library_strategy}}
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 7. UX Pattern Decisions
|
|
||||||
|
|
||||||
### 7.1 Consistency Rules
|
|
||||||
|
|
||||||
{{ux_pattern_decisions}}
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 8. Responsive Design & Accessibility
|
|
||||||
|
|
||||||
### 8.1 Responsive Strategy
|
|
||||||
|
|
||||||
{{responsive_accessibility_strategy}}
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 9. Implementation Guidance
|
|
||||||
|
|
||||||
### 9.1 Completion Summary
|
|
||||||
|
|
||||||
{{completion_summary}}
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Appendix
|
|
||||||
|
|
||||||
### Related Documents
|
|
||||||
|
|
||||||
- Product Requirements: `{{prd_file}}`
|
|
||||||
- Product Brief: `{{brief_file}}`
|
|
||||||
- Brainstorming: `{{brainstorm_file}}`
|
|
||||||
|
|
||||||
### Core Interactive Deliverables
|
|
||||||
|
|
||||||
This UX Design Specification was created through visual collaboration:
|
|
||||||
|
|
||||||
- **Color Theme Visualizer**: {{color_themes_html}}
|
|
||||||
- Interactive HTML showing all color theme options explored
|
|
||||||
- Live UI component examples in each theme
|
|
||||||
- Side-by-side comparison and semantic color usage
|
|
||||||
|
|
||||||
- **Design Direction Mockups**: {{design_directions_html}}
|
|
||||||
- Interactive HTML with 6-8 complete design approaches
|
|
||||||
- Full-screen mockups of key screens
|
|
||||||
- Design philosophy and rationale for each direction
|
|
||||||
|
|
||||||
### Optional Enhancement Deliverables
|
|
||||||
|
|
||||||
_This section will be populated if additional UX artifacts are generated through follow-up workflows._
|
|
||||||
|
|
||||||
<!-- Additional deliverables added here by other workflows -->
|
|
||||||
|
|
||||||
### Next Steps & Follow-Up Workflows
|
|
||||||
|
|
||||||
This UX Design Specification can serve as input to:
|
|
||||||
|
|
||||||
- **Wireframe Generation Workflow** - Create detailed wireframes from user flows
|
|
||||||
- **Figma Design Workflow** - Generate Figma files via MCP integration
|
|
||||||
- **Interactive Prototype Workflow** - Build clickable HTML prototypes
|
|
||||||
- **Component Showcase Workflow** - Create interactive component library
|
|
||||||
- **AI Frontend Prompt Workflow** - Generate prompts for v0, Lovable, Bolt, etc.
|
|
||||||
- **Solution Architecture Workflow** - Define technical architecture with UX context
|
|
||||||
|
|
||||||
### Version History
|
|
||||||
|
|
||||||
| Date | Version | Changes | Author |
|
|
||||||
| -------- | ------- | ------------------------------- | ------------- |
|
|
||||||
| {{date}} | 1.0 | Initial UX Design Specification | {{user_name}} |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
_This UX Design Specification was created through collaborative design facilitation, not template generation. All decisions were made with user input and are documented with rationale._
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
# Create UX Design Workflow
|
||||||
|
|
||||||
|
**Goal:** Create comprehensive UX design specifications through collaborative visual exploration and informed decision-making where you act as a UX facilitator working with a product stakeholder.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## WORKFLOW ARCHITECTURE
|
||||||
|
|
||||||
|
This uses **micro-file architecture** for disciplined execution:
|
||||||
|
|
||||||
|
- Each step is a self-contained file with embedded rules
|
||||||
|
- Sequential progression with user control at each step
|
||||||
|
- Document state tracked in frontmatter
|
||||||
|
- Append-only document building through conversation
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## INITIALIZATION
|
||||||
|
|
||||||
|
### Configuration Loading
|
||||||
|
|
||||||
|
Load config from `{project-root}/{bmad_folder}/bmm/config.yaml` and resolve:
|
||||||
|
|
||||||
|
- `project_name`, `output_folder`, `user_name`
|
||||||
|
- `communication_language`, `document_output_language`, `user_skill_level`
|
||||||
|
- `date` as system-generated current datetime
|
||||||
|
|
||||||
|
### Paths
|
||||||
|
|
||||||
|
- `installed_path` = `{project-root}/{bmad_folder}/bmm/workflows/2-plan-workflows/create-ux-design`
|
||||||
|
- `template_path` = `{installed_path}/ux-design-template.md`
|
||||||
|
- `default_output_file` = `{output_folder}/ux-design-specification.md`
|
||||||
|
|
||||||
|
### Output Files
|
||||||
|
|
||||||
|
- Color themes: `{output_folder}/ux-color-themes.html`
|
||||||
|
- Design directions: `{output_folder}/ux-design-directions.html`
|
||||||
|
|
||||||
|
### Input Document Discovery
|
||||||
|
|
||||||
|
Discover context documents for UX context:
|
||||||
|
|
||||||
|
- PRD: `{output_folder}/*prd*/**/*.md` or `{output_folder}/*prd*.md`
|
||||||
|
- Product brief: `{output_folder}/*brief*/**/*.md` or `{output_folder}/*brief*.md`
|
||||||
|
- Epics: `{output_folder}/*epic*/**/*.md` or `{output_folder}/*epic*.md`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## EXECUTION
|
||||||
|
|
||||||
|
Load and execute `steps/step-01-init.md` to begin the UX design workflow.
|
||||||
|
|
@ -1,93 +0,0 @@
|
||||||
# Create UX Design Workflow Configuration
|
|
||||||
name: create-ux-design
|
|
||||||
description: "Collaborative UX design facilitation workflow that creates exceptional user experiences through visual exploration and informed decision-making. Unlike template-driven approaches, this workflow facilitates discovery, generates visual options, and collaboratively designs the UX with the user at every step."
|
|
||||||
author: "BMad"
|
|
||||||
|
|
||||||
# Critical variables from config
|
|
||||||
config_source: "{project-root}/{bmad_folder}/bmm/config.yaml"
|
|
||||||
output_folder: "{config_source}:output_folder"
|
|
||||||
user_name: "{config_source}:user_name"
|
|
||||||
communication_language: "{config_source}:communication_language"
|
|
||||||
document_output_language: "{config_source}:document_output_language"
|
|
||||||
user_skill_level: "{config_source}:user_skill_level"
|
|
||||||
date: system-generated
|
|
||||||
|
|
||||||
# Smart input file references - handles both whole docs and sharded docs
|
|
||||||
# Priority: Whole document first, then sharded version
|
|
||||||
# Strategy: How to load sharded documents (FULL_LOAD, SELECTIVE_LOAD, INDEX_GUIDED)
|
|
||||||
input_file_patterns:
|
|
||||||
prd:
|
|
||||||
description: "Features and user journeys (optional)"
|
|
||||||
whole: "{output_folder}/*prd*.md"
|
|
||||||
sharded: "{output_folder}/*prd*/index.md"
|
|
||||||
load_strategy: "FULL_LOAD"
|
|
||||||
|
|
||||||
product_brief:
|
|
||||||
description: "Product vision and target users (optional)"
|
|
||||||
whole: "{output_folder}/*brief*.md"
|
|
||||||
sharded: "{output_folder}/*brief*/index.md"
|
|
||||||
load_strategy: "FULL_LOAD"
|
|
||||||
|
|
||||||
epics:
|
|
||||||
description: "Epic and story breakdown (optional)"
|
|
||||||
whole: "{output_folder}/*epic*.md"
|
|
||||||
sharded: "{output_folder}/*epic*/index.md"
|
|
||||||
load_strategy: "FULL_LOAD"
|
|
||||||
|
|
||||||
brainstorming:
|
|
||||||
description: "Brainstorming ideas and concepts (optional)"
|
|
||||||
whole: "{output_folder}/*brainstorm*.md"
|
|
||||||
sharded: "{output_folder}/*brainstorm*/index.md"
|
|
||||||
load_strategy: "FULL_LOAD"
|
|
||||||
|
|
||||||
document_project:
|
|
||||||
description: "Brownfield project documentation (optional)"
|
|
||||||
sharded: "{output_folder}/index.md"
|
|
||||||
load_strategy: "INDEX_GUIDED"
|
|
||||||
|
|
||||||
# Module path and component files
|
|
||||||
installed_path: "{project-root}/{bmad_folder}/bmm/workflows/2-plan-workflows/create-ux-design"
|
|
||||||
instructions: "{installed_path}/instructions.md"
|
|
||||||
validation: "{installed_path}/checklist.md"
|
|
||||||
template: "{installed_path}/ux-design-template.md"
|
|
||||||
|
|
||||||
# Output configuration - Progressive saves throughout workflow
|
|
||||||
default_output_file: "{output_folder}/ux-design-specification.md"
|
|
||||||
color_themes_html: "{output_folder}/ux-color-themes.html"
|
|
||||||
design_directions_html: "{output_folder}/ux-design-directions.html"
|
|
||||||
|
|
||||||
standalone: true
|
|
||||||
|
|
||||||
# Web bundle configuration for standalone deployment
|
|
||||||
web_bundle:
|
|
||||||
name: "create-ux-design"
|
|
||||||
description: "Collaborative UX design facilitation workflow that creates exceptional user experiences through visual exploration and informed decision-making. Unlike template-driven approaches, this workflow facilitates discovery, generates visual options, and collaboratively designs the UX with the user at every step."
|
|
||||||
author: "BMad"
|
|
||||||
|
|
||||||
# Core workflow files ({bmad_folder}/-relative paths)
|
|
||||||
instructions: "{bmad_folder}/bmm/workflows/2-plan-workflows/create-ux-design/instructions.md"
|
|
||||||
validation: "{bmad_folder}/bmm/workflows/2-plan-workflows/create-ux-design/checklist.md"
|
|
||||||
template: "{bmad_folder}/bmm/workflows/2-plan-workflows/create-ux-design/ux-design-template.md"
|
|
||||||
|
|
||||||
# Default configuration values (can be overridden during bundle setup)
|
|
||||||
defaults:
|
|
||||||
user_name: "User"
|
|
||||||
communication_language: "English"
|
|
||||||
document_output_language: "English"
|
|
||||||
user_skill_level: "intermediate"
|
|
||||||
output_folder: "./output"
|
|
||||||
|
|
||||||
# Input/output configuration for web deployment
|
|
||||||
default_output_file: "{output_folder}/ux-design-specification.md"
|
|
||||||
color_themes_html: "{output_folder}/ux-color-themes.html"
|
|
||||||
design_directions_html: "{output_folder}/ux-design-directions.html"
|
|
||||||
|
|
||||||
# Complete file list - ALL files this workflow depends on
|
|
||||||
web_bundle_files:
|
|
||||||
# Core workflow files
|
|
||||||
- "{bmad_folder}/bmm/workflows/2-plan-workflows/create-ux-design/instructions.md"
|
|
||||||
- "{bmad_folder}/bmm/workflows/2-plan-workflows/create-ux-design/checklist.md"
|
|
||||||
- "{bmad_folder}/bmm/workflows/2-plan-workflows/create-ux-design/ux-design-template.md"
|
|
||||||
|
|
||||||
# Task dependencies (referenced in instructions.md)
|
|
||||||
- "{bmad_folder}/core/tasks/workflow.xml"
|
|
||||||
Loading…
Reference in New Issue