refactor(bmad-ux): replace bmad-create-ux-design with lean spine-based bmad-ux
This commit is contained in:
Brian Madison
parent
1da6bf80df
commit
1040f5d3cd
|
|
@ -1,75 +0,0 @@
|
|||
---
|
||||
name: bmad-create-ux-design
|
||||
description: 'Plan UX patterns and design specifications. Use when the user says "lets create UX design" or "create UX specifications" or "help me plan the UX"'
|
||||
---
|
||||
|
||||
# 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.
|
||||
|
||||
## Conventions
|
||||
|
||||
- Bare paths (e.g. `steps/step-01-init.md`) resolve from the skill root.
|
||||
- `{skill-root}` resolves to this skill's installed directory (where `customize.toml` lives).
|
||||
- `{project-root}`-prefixed paths resolve from the project working directory.
|
||||
- `{skill-name}` resolves to the skill directory's basename.
|
||||
|
||||
## 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
|
||||
|
||||
## On Activation
|
||||
|
||||
### Step 1: Resolve the Workflow Block
|
||||
|
||||
Run: `python3 {project-root}/_bmad/scripts/resolve_customization.py --skill {skill-root} --key workflow`
|
||||
|
||||
**If the script fails**, resolve the `workflow` block yourself by reading these three files in base → team → user order and applying the same structural merge rules as the resolver:
|
||||
|
||||
1. `{skill-root}/customize.toml` — defaults
|
||||
2. `{project-root}/_bmad/custom/{skill-name}.toml` — team overrides
|
||||
3. `{project-root}/_bmad/custom/{skill-name}.user.toml` — personal overrides
|
||||
|
||||
Any missing file is skipped. Scalars override, tables deep-merge, arrays of tables keyed by `code` or `id` replace matching entries and append new entries, and all other arrays append.
|
||||
|
||||
### Step 2: Execute Prepend Steps
|
||||
|
||||
Execute each entry in `{workflow.activation_steps_prepend}` in order before proceeding.
|
||||
|
||||
### Step 3: Load Persistent Facts
|
||||
|
||||
Treat every entry in `{workflow.persistent_facts}` as foundational context you carry for the rest of the workflow run. Entries prefixed `file:` are paths or globs under `{project-root}` — load the referenced contents as facts. All other entries are facts verbatim.
|
||||
|
||||
### Step 4: Load Config
|
||||
|
||||
Load config from `{project-root}/_bmad/bmm/config.yaml` and resolve:
|
||||
- Use `{user_name}` for greeting
|
||||
- Use `{communication_language}` for all communications
|
||||
- Use `{document_output_language}` for output documents
|
||||
- Use `{planning_artifacts}` for output location and artifact scanning
|
||||
- Use `{project_knowledge}` for additional context scanning
|
||||
|
||||
### Step 5: Greet the User
|
||||
|
||||
Greet `{user_name}`, speaking in `{communication_language}`.
|
||||
|
||||
### Step 6: Execute Append Steps
|
||||
|
||||
Execute each entry in `{workflow.activation_steps_append}` in order.
|
||||
|
||||
Activation is complete. Begin the workflow below.
|
||||
|
||||
## Paths
|
||||
|
||||
- `default_output_file` = `{planning_artifacts}/ux-design-specification.md`
|
||||
|
||||
## EXECUTION
|
||||
|
||||
- ✅ YOU MUST ALWAYS SPEAK OUTPUT In your Agent communication style with the config `{communication_language}`
|
||||
- ✅ YOU MUST ALWAYS WRITE all artifact and document content in `{document_output_language}`
|
||||
- Read fully and follow: `./steps/step-01-init.md` to begin the UX design workflow.
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
# DO NOT EDIT -- overwritten on every update.
|
||||
#
|
||||
# Workflow customization surface for bmad-create-ux-design. Mirrors the
|
||||
# agent customization shape under the [workflow] namespace.
|
||||
|
||||
[workflow]
|
||||
|
||||
# --- Configurable below. Overrides merge per BMad structural rules: ---
|
||||
# scalars: override wins • arrays (persistent_facts, activation_steps_*): append
|
||||
# arrays-of-tables with `code`/`id`: replace matching items, append new ones.
|
||||
|
||||
# Steps to run before the standard activation (config load, greet).
|
||||
# Overrides append. Use for pre-flight loads, compliance checks, etc.
|
||||
|
||||
activation_steps_prepend = []
|
||||
|
||||
# Steps to run after greet but before the workflow begins.
|
||||
# Overrides append. Use for context-heavy setup that should happen
|
||||
# once the user has been acknowledged.
|
||||
|
||||
activation_steps_append = []
|
||||
|
||||
# Persistent facts the workflow keeps in mind for the whole run
|
||||
# (standards, compliance constraints, stylistic guardrails).
|
||||
# Distinct from the runtime memory sidecar — these are static context
|
||||
# loaded on activation. Overrides append.
|
||||
#
|
||||
# Each entry is either:
|
||||
# - a literal sentence, e.g. "All designs must meet WCAG 2.1 AA accessibility standards."
|
||||
# - a file reference prefixed with `file:`, e.g. "file:{project-root}/docs/standards.md"
|
||||
# (glob patterns are supported; the file's contents are loaded and treated as facts).
|
||||
|
||||
persistent_facts = [
|
||||
"file:{project-root}/**/project-context.md",
|
||||
]
|
||||
|
||||
# Scalar: executed when the workflow reaches Step 14 (Workflow Completion),
|
||||
# after the UX design specification is finalized and status is updated. Override wins.
|
||||
# Leave empty for no custom post-completion behavior.
|
||||
|
||||
on_complete = ""
|
||||
|
|
@ -1,135 +0,0 @@
|
|||
# Step 1: UX Design Workflow Initialization
|
||||
|
||||
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||
|
||||
- 🛑 NEVER generate content without user input
|
||||
|
||||
- 📖 CRITICAL: ALWAYS read the complete step file before taking any action - partial understanding leads to incomplete decisions
|
||||
- 🔄 CRITICAL: When loading next step with 'C', ensure the entire file is read and understood before proceeding
|
||||
- ✅ 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
|
||||
- ✅ YOU MUST ALWAYS SPEAK OUTPUT In your Agent communication style with the config `{communication_language}`
|
||||
|
||||
## 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 `{planning_artifacts}/*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. Documents can be in the following locations:
|
||||
- {planning_artifacts}/**
|
||||
- {output_folder}/**
|
||||
- {product_knowledge}/**
|
||||
- {project-root}/docs/**
|
||||
|
||||
Also - when searching - documents can be a single markdown file, or a folder with an index and multiple files. For Example, if searching for `*foo*.md` and not found, also search for a folder called *foo*/index.md (which indicates sharded content)
|
||||
|
||||
Try to discover the following:
|
||||
- Product Brief (`*brief*.md`)
|
||||
- Research Documents (`*prd*.md`)
|
||||
- Project Documentation (generally multiple documents might be found for this in the `{product_knowledge}` or `docs` folder.)
|
||||
- Project Context (`**/project-context.md`)
|
||||
|
||||
<critical>Confirm what you have found with the user, along with asking if the user wants to provide anything else. Only after this confirmation will you proceed to follow the loading rules</critical>
|
||||
|
||||
**Loading Rules:**
|
||||
|
||||
- Load ALL discovered files completely that the user confirmed or provided (no offset/limit)
|
||||
- If there is a project context, whatever is relevant should try to be biased in the remainder of this whole workflow process
|
||||
- For sharded folders, load ALL files to get complete picture, using the index first to potentially know the potential of each document
|
||||
- index.md is a guide to what's relevant whenever available
|
||||
- Track all successfully loaded files in frontmatter `inputDocuments` array
|
||||
|
||||
#### B. Create Initial Document
|
||||
|
||||
Copy the template from `../ux-design-template.md` to `{planning_artifacts}/ux-design-specification.md`
|
||||
Initialize frontmatter in the template.
|
||||
|
||||
#### C. Complete Initialization and Report
|
||||
|
||||
Complete setup and report to user:
|
||||
|
||||
**Document Setup:**
|
||||
|
||||
- Created: `{planning_artifacts}/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"
|
||||
|
||||
## NEXT STEP:
|
||||
|
||||
After user selects [C] to continue, ensure the file `{planning_artifacts}/ux-design-specification.md` has been created and saved, and then load `./step-02-discovery.md` to begin the UX discovery phase.
|
||||
|
||||
Remember: Do NOT proceed to step-02 until output file has been updated and user explicitly selects [C] to continue!
|
||||
|
||||
## 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
|
||||
|
||||
❌ **CRITICAL**: Reading only partial step file - leads to incomplete understanding and poor decisions
|
||||
❌ **CRITICAL**: Proceeding with 'C' without fully reading and understanding the next step file
|
||||
❌ **CRITICAL**: Making decisions without complete understanding of step requirements and protocols
|
||||
|
|
@ -1,127 +0,0 @@
|
|||
# Step 1B: UX Design Workflow Continuation
|
||||
|
||||
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||
|
||||
- 🛑 NEVER generate content without user input
|
||||
|
||||
- 📖 CRITICAL: ALWAYS read the complete step file before taking any action - partial understanding leads to incomplete decisions
|
||||
- 🔄 CRITICAL: When loading next step with 'C', ensure the entire file is read and understood before proceeding
|
||||
- ✅ 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
|
||||
- ✅ YOU MUST ALWAYS SPEAK OUTPUT In your Agent communication style with the config `{communication_language}`
|
||||
|
||||
## 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
|
||||
|
||||
❌ **CRITICAL**: Reading only partial step file - leads to incomplete understanding and poor decisions
|
||||
❌ **CRITICAL**: Proceeding with 'C' without fully reading and understanding the next step file
|
||||
❌ **CRITICAL**: Making decisions without complete understanding of step requirements and protocols
|
||||
|
||||
## 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 {planning_artifacts}/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!
|
||||
|
|
@ -1,190 +0,0 @@
|
|||
# Step 2: Project Understanding
|
||||
|
||||
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||
|
||||
- 🛑 NEVER generate content without user input
|
||||
|
||||
- 📖 CRITICAL: ALWAYS read the complete step file before taking any action - partial understanding leads to incomplete decisions
|
||||
- 🔄 CRITICAL: When loading next step with 'C', ensure the entire file is read and understood before proceeding
|
||||
- ✅ 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
|
||||
- ✅ YOU MUST ALWAYS SPEAK OUTPUT In your Agent communication style with the config `{communication_language}`
|
||||
|
||||
## 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 output file frontmatter, adding this step to the end of the list of stepsCompleted.
|
||||
- 🚫 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: Invoke the `bmad-advanced-elicitation` skill
|
||||
- When 'P' selected: Invoke the `bmad-party-mode` skill
|
||||
- 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?**
|
||||
[C] Continue - Save this to the document and move to core experience definition"
|
||||
|
||||
### 7. Handle Menu Selection
|
||||
|
||||
#### If 'C' (Continue):
|
||||
|
||||
- Append the final content to `{planning_artifacts}/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. Only after the content is saved to document, read fully and follow: `./step-03-core-experience.md`.
|
||||
|
||||
## 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'
|
||||
|
||||
❌ **CRITICAL**: Reading only partial step file - leads to incomplete understanding and poor decisions
|
||||
❌ **CRITICAL**: Proceeding with 'C' without fully reading and understanding the next step file
|
||||
❌ **CRITICAL**: Making decisions without complete understanding of step requirements and protocols
|
||||
|
||||
## NEXT STEP:
|
||||
|
||||
Remember: Do NOT proceed to step-03 until user explicitly selects 'C' from the menu and content is saved!
|
||||
|
|
@ -1,217 +0,0 @@
|
|||
# Step 3: Core Experience Definition
|
||||
|
||||
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||
|
||||
- 🛑 NEVER generate content without user input
|
||||
|
||||
- 📖 CRITICAL: ALWAYS read the complete step file before taking any action - partial understanding leads to incomplete decisions
|
||||
- 🔄 CRITICAL: When loading next step with 'C', ensure the entire file is read and understood before proceeding
|
||||
- ✅ 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
|
||||
- ✅ YOU MUST ALWAYS SPEAK OUTPUT In your Agent communication style with the config `{communication_language}`
|
||||
- ✅ YOU MUST ALWAYS WRITE all artifact and document content in `{document_output_language}`
|
||||
|
||||
## 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 output file frontmatter, adding this step to the end of the list of stepsCompleted.
|
||||
- 🚫 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: Invoke the `bmad-advanced-elicitation` skill
|
||||
- When 'P' selected: Invoke the `bmad-party-mode` skill
|
||||
- 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):
|
||||
|
||||
- Invoke the `bmad-advanced-elicitation` skill 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):
|
||||
|
||||
- Invoke the `bmad-party-mode` skill 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 `{planning_artifacts}/ux-design-specification.md`
|
||||
- Update frontmatter: append step to end of stepsCompleted array
|
||||
- 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'
|
||||
|
||||
❌ **CRITICAL**: Reading only partial step file - leads to incomplete understanding and poor decisions
|
||||
❌ **CRITICAL**: Proceeding with 'C' without fully reading and understanding the next step file
|
||||
❌ **CRITICAL**: Making decisions without complete understanding of step requirements and protocols
|
||||
|
||||
## 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!
|
||||
|
|
@ -1,220 +0,0 @@
|
|||
# Step 4: Desired Emotional Response
|
||||
|
||||
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||
|
||||
- 🛑 NEVER generate content without user input
|
||||
|
||||
- 📖 CRITICAL: ALWAYS read the complete step file before taking any action - partial understanding leads to incomplete decisions
|
||||
- 🔄 CRITICAL: When loading next step with 'C', ensure the entire file is read and understood before proceeding
|
||||
- ✅ 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
|
||||
- ✅ YOU MUST ALWAYS SPEAK OUTPUT In your Agent communication style with the config `{communication_language}`
|
||||
- ✅ YOU MUST ALWAYS WRITE all artifact and document content in `{document_output_language}`
|
||||
|
||||
## 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 output file frontmatter, adding this step to the end of the list of stepsCompleted.
|
||||
- 🚫 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: Invoke the `bmad-advanced-elicitation` skill
|
||||
- When 'P' selected: Invoke the `bmad-party-mode` skill
|
||||
- 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):
|
||||
|
||||
- Invoke the `bmad-advanced-elicitation` skill 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):
|
||||
|
||||
- Invoke the `bmad-party-mode` skill 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 `{planning_artifacts}/ux-design-specification.md`
|
||||
- Update frontmatter: append step to end of stepsCompleted array
|
||||
- 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'
|
||||
|
||||
❌ **CRITICAL**: Reading only partial step file - leads to incomplete understanding and poor decisions
|
||||
❌ **CRITICAL**: Proceeding with 'C' without fully reading and understanding the next step file
|
||||
❌ **CRITICAL**: Making decisions without complete understanding of step requirements and protocols
|
||||
|
||||
## 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!
|
||||
|
|
@ -1,235 +0,0 @@
|
|||
# Step 5: UX Pattern Analysis & Inspiration
|
||||
|
||||
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||
|
||||
- 🛑 NEVER generate content without user input
|
||||
|
||||
- 📖 CRITICAL: ALWAYS read the complete step file before taking any action - partial understanding leads to incomplete decisions
|
||||
- 🔄 CRITICAL: When loading next step with 'C', ensure the entire file is read and understood before proceeding
|
||||
- ✅ 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
|
||||
- ✅ YOU MUST ALWAYS SPEAK OUTPUT In your Agent communication style with the config `{communication_language}`
|
||||
- ✅ YOU MUST ALWAYS WRITE all artifact and document content in `{document_output_language}`
|
||||
|
||||
## 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 output file frontmatter, adding this step to the end of the list of stepsCompleted.
|
||||
- 🚫 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: Invoke the `bmad-advanced-elicitation` skill
|
||||
- When 'P' selected: Invoke the `bmad-party-mode` skill
|
||||
- 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):
|
||||
|
||||
- Invoke the `bmad-advanced-elicitation` skill 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):
|
||||
|
||||
- Invoke the `bmad-party-mode` skill 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 `{planning_artifacts}/ux-design-specification.md`
|
||||
- Update frontmatter: append step to end of stepsCompleted array
|
||||
- Read fully and follow: `./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'
|
||||
|
||||
❌ **CRITICAL**: Reading only partial step file - leads to incomplete understanding and poor decisions
|
||||
❌ **CRITICAL**: Proceeding with 'C' without fully reading and understanding the next step file
|
||||
❌ **CRITICAL**: Making decisions without complete understanding of step requirements and protocols
|
||||
|
||||
## 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!
|
||||
|
|
@ -1,253 +0,0 @@
|
|||
# Step 6: Design System Choice
|
||||
|
||||
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||
|
||||
- 🛑 NEVER generate content without user input
|
||||
|
||||
- 📖 CRITICAL: ALWAYS read the complete step file before taking any action - partial understanding leads to incomplete decisions
|
||||
- 🔄 CRITICAL: When loading next step with 'C', ensure the entire file is read and understood before proceeding
|
||||
- ✅ 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
|
||||
- ✅ YOU MUST ALWAYS SPEAK OUTPUT In your Agent communication style with the config `{communication_language}`
|
||||
- ✅ YOU MUST ALWAYS WRITE all artifact and document content in `{document_output_language}`
|
||||
|
||||
## 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 output file frontmatter, adding this step to the end of the list of stepsCompleted.
|
||||
- 🚫 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: Invoke the `bmad-advanced-elicitation` skill
|
||||
- When 'P' selected: Invoke the `bmad-party-mode` skill
|
||||
- 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):
|
||||
|
||||
- Invoke the `bmad-advanced-elicitation` skill 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):
|
||||
|
||||
- Invoke the `bmad-party-mode` skill 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 `{planning_artifacts}/ux-design-specification.md`
|
||||
- Update frontmatter: append step to end of stepsCompleted array
|
||||
- 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'
|
||||
|
||||
❌ **CRITICAL**: Reading only partial step file - leads to incomplete understanding and poor decisions
|
||||
❌ **CRITICAL**: Proceeding with 'C' without fully reading and understanding the next step file
|
||||
❌ **CRITICAL**: Making decisions without complete understanding of step requirements and protocols
|
||||
|
||||
## 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!
|
||||
|
|
@ -1,255 +0,0 @@
|
|||
# Step 7: Defining Core Experience
|
||||
|
||||
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||
|
||||
- 🛑 NEVER generate content without user input
|
||||
|
||||
- 📖 CRITICAL: ALWAYS read the complete step file before taking any action - partial understanding leads to incomplete decisions
|
||||
- 🔄 CRITICAL: When loading next step with 'C', ensure the entire file is read and understood before proceeding
|
||||
- ✅ 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
|
||||
- ✅ YOU MUST ALWAYS SPEAK OUTPUT In your Agent communication style with the config `{communication_language}`
|
||||
- ✅ YOU MUST ALWAYS WRITE all artifact and document content in `{document_output_language}`
|
||||
|
||||
## 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 output file frontmatter, adding this step to the end of the list of stepsCompleted.
|
||||
- 🚫 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: Invoke the `bmad-advanced-elicitation` skill
|
||||
- When 'P' selected: Invoke the `bmad-party-mode` skill
|
||||
- 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):
|
||||
|
||||
- Invoke the `bmad-advanced-elicitation` skill 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):
|
||||
|
||||
- Invoke the `bmad-party-mode` skill 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 `{planning_artifacts}/ux-design-specification.md`
|
||||
- Update frontmatter: append step to end of stepsCompleted array
|
||||
- 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'
|
||||
|
||||
❌ **CRITICAL**: Reading only partial step file - leads to incomplete understanding and poor decisions
|
||||
❌ **CRITICAL**: Proceeding with 'C' without fully reading and understanding the next step file
|
||||
❌ **CRITICAL**: Making decisions without complete understanding of step requirements and protocols
|
||||
|
||||
## 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!
|
||||
|
|
@ -1,225 +0,0 @@
|
|||
# Step 8: Visual Foundation
|
||||
|
||||
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||
|
||||
- 🛑 NEVER generate content without user input
|
||||
|
||||
- 📖 CRITICAL: ALWAYS read the complete step file before taking any action - partial understanding leads to incomplete decisions
|
||||
- 🔄 CRITICAL: When loading next step with 'C', ensure the entire file is read and understood before proceeding
|
||||
- ✅ 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
|
||||
- ✅ YOU MUST ALWAYS SPEAK OUTPUT In your Agent communication style with the config `{communication_language}`
|
||||
- ✅ YOU MUST ALWAYS WRITE all artifact and document content in `{document_output_language}`
|
||||
|
||||
## 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 output file frontmatter, adding this step to the end of the list of stepsCompleted.
|
||||
- 🚫 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: Invoke the `bmad-advanced-elicitation` skill
|
||||
- When 'P' selected: Invoke the `bmad-party-mode` skill
|
||||
- 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):
|
||||
|
||||
- Invoke the `bmad-advanced-elicitation` skill 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):
|
||||
|
||||
- Invoke the `bmad-party-mode` skill 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 `{planning_artifacts}/ux-design-specification.md`
|
||||
- Update frontmatter: append step to end of stepsCompleted array
|
||||
- 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'
|
||||
|
||||
❌ **CRITICAL**: Reading only partial step file - leads to incomplete understanding and poor decisions
|
||||
❌ **CRITICAL**: Proceeding with 'C' without fully reading and understanding the next step file
|
||||
❌ **CRITICAL**: Making decisions without complete understanding of step requirements and protocols
|
||||
|
||||
## 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!
|
||||
|
|
@ -1,225 +0,0 @@
|
|||
# Step 9: Design Direction Mockups
|
||||
|
||||
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||
|
||||
- 🛑 NEVER generate content without user input
|
||||
|
||||
- 📖 CRITICAL: ALWAYS read the complete step file before taking any action - partial understanding leads to incomplete decisions
|
||||
- 🔄 CRITICAL: When loading next step with 'C', ensure the entire file is read and understood before proceeding
|
||||
- ✅ 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
|
||||
- ✅ YOU MUST ALWAYS SPEAK OUTPUT In your Agent communication style with the config `{communication_language}`
|
||||
- ✅ YOU MUST ALWAYS WRITE all artifact and document content in `{document_output_language}`
|
||||
|
||||
## 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 output file frontmatter, adding this step to the end of the list of stepsCompleted.
|
||||
- 🚫 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: Invoke the `bmad-advanced-elicitation` skill
|
||||
- When 'P' selected: Invoke the `bmad-party-mode` skill
|
||||
- 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 `{planning_artifacts}/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):
|
||||
|
||||
- Invoke the `bmad-advanced-elicitation` skill 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):
|
||||
|
||||
- Invoke the `bmad-party-mode` skill 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 `{planning_artifacts}/ux-design-specification.md`
|
||||
- Update frontmatter: append step to end of stepsCompleted array
|
||||
- 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'
|
||||
|
||||
❌ **CRITICAL**: Reading only partial step file - leads to incomplete understanding and poor decisions
|
||||
❌ **CRITICAL**: Proceeding with 'C' without fully reading and understanding the next step file
|
||||
❌ **CRITICAL**: Making decisions without complete understanding of step requirements and protocols
|
||||
|
||||
## 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!
|
||||
|
|
@ -1,242 +0,0 @@
|
|||
# Step 10: User Journey Flows
|
||||
|
||||
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||
|
||||
- 🛑 NEVER generate content without user input
|
||||
|
||||
- 📖 CRITICAL: ALWAYS read the complete step file before taking any action - partial understanding leads to incomplete decisions
|
||||
- 🔄 CRITICAL: When loading next step with 'C', ensure the entire file is read and understood before proceeding
|
||||
- ✅ 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
|
||||
- ✅ YOU MUST ALWAYS SPEAK OUTPUT In your Agent communication style with the config `{communication_language}`
|
||||
- ✅ YOU MUST ALWAYS WRITE all artifact and document content in `{document_output_language}`
|
||||
|
||||
## 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 output file frontmatter, adding this step to the end of the list of stepsCompleted.
|
||||
- 🚫 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: Invoke the `bmad-advanced-elicitation` skill
|
||||
- When 'P' selected: Invoke the `bmad-party-mode` skill
|
||||
- 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):
|
||||
|
||||
- Invoke the `bmad-advanced-elicitation` skill 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):
|
||||
|
||||
- Invoke the `bmad-party-mode` skill 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 `{planning_artifacts}/ux-design-specification.md`
|
||||
- Update frontmatter: append step to end of stepsCompleted array
|
||||
- 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'
|
||||
|
||||
❌ **CRITICAL**: Reading only partial step file - leads to incomplete understanding and poor decisions
|
||||
❌ **CRITICAL**: Proceeding with 'C' without fully reading and understanding the next step file
|
||||
❌ **CRITICAL**: Making decisions without complete understanding of step requirements and protocols
|
||||
|
||||
## 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!
|
||||
|
|
@ -1,249 +0,0 @@
|
|||
# Step 11: Component Strategy
|
||||
|
||||
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||
|
||||
- 🛑 NEVER generate content without user input
|
||||
|
||||
- 📖 CRITICAL: ALWAYS read the complete step file before taking any action - partial understanding leads to incomplete decisions
|
||||
- 🔄 CRITICAL: When loading next step with 'C', ensure the entire file is read and understood before proceeding
|
||||
- ✅ 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
|
||||
- ✅ YOU MUST ALWAYS SPEAK OUTPUT In your Agent communication style with the config `{communication_language}`
|
||||
- ✅ YOU MUST ALWAYS WRITE all artifact and document content in `{document_output_language}`
|
||||
|
||||
## 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 output file frontmatter, adding this step to the end of the list of stepsCompleted.
|
||||
- 🚫 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: Invoke the `bmad-advanced-elicitation` skill
|
||||
- When 'P' selected: Invoke the `bmad-party-mode` skill
|
||||
- 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):
|
||||
|
||||
- Invoke the `bmad-advanced-elicitation` skill 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):
|
||||
|
||||
- Invoke the `bmad-party-mode` skill 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 `{planning_artifacts}/ux-design-specification.md`
|
||||
- Update frontmatter: append step to end of stepsCompleted array
|
||||
- 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'
|
||||
|
||||
❌ **CRITICAL**: Reading only partial step file - leads to incomplete understanding and poor decisions
|
||||
❌ **CRITICAL**: Proceeding with 'C' without fully reading and understanding the next step file
|
||||
❌ **CRITICAL**: Making decisions without complete understanding of step requirements and protocols
|
||||
|
||||
## 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!
|
||||
|
|
@ -1,238 +0,0 @@
|
|||
# Step 12: UX Consistency Patterns
|
||||
|
||||
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||
|
||||
- 🛑 NEVER generate content without user input
|
||||
|
||||
- 📖 CRITICAL: ALWAYS read the complete step file before taking any action - partial understanding leads to incomplete decisions
|
||||
- 🔄 CRITICAL: When loading next step with 'C', ensure the entire file is read and understood before proceeding
|
||||
- ✅ 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
|
||||
- ✅ YOU MUST ALWAYS SPEAK OUTPUT In your Agent communication style with the config `{communication_language}`
|
||||
- ✅ YOU MUST ALWAYS WRITE all artifact and document content in `{document_output_language}`
|
||||
|
||||
## 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 output file frontmatter, adding this step to the end of the list of stepsCompleted.
|
||||
- 🚫 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: Invoke the `bmad-advanced-elicitation` skill
|
||||
- When 'P' selected: Invoke the `bmad-party-mode` skill
|
||||
- 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):
|
||||
|
||||
- Invoke the `bmad-advanced-elicitation` skill 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):
|
||||
|
||||
- Invoke the `bmad-party-mode` skill 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 `{planning_artifacts}/ux-design-specification.md`
|
||||
- Update frontmatter: append step to end of stepsCompleted array
|
||||
- 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'
|
||||
|
||||
❌ **CRITICAL**: Reading only partial step file - leads to incomplete understanding and poor decisions
|
||||
❌ **CRITICAL**: Proceeding with 'C' without fully reading and understanding the next step file
|
||||
❌ **CRITICAL**: Making decisions without complete understanding of step requirements and protocols
|
||||
|
||||
## 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!
|
||||
|
|
@ -1,265 +0,0 @@
|
|||
# Step 13: Responsive Design & Accessibility
|
||||
|
||||
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||
|
||||
- 🛑 NEVER generate content without user input
|
||||
|
||||
- 📖 CRITICAL: ALWAYS read the complete step file before taking any action - partial understanding leads to incomplete decisions
|
||||
- 🔄 CRITICAL: When loading next step with 'C', ensure the entire file is read and understood before proceeding
|
||||
- ✅ 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
|
||||
- ✅ YOU MUST ALWAYS SPEAK OUTPUT In your Agent communication style with the config `{communication_language}`
|
||||
- ✅ YOU MUST ALWAYS WRITE all artifact and document content in `{document_output_language}`
|
||||
|
||||
## 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 output file frontmatter, adding this step to the end of the list of stepsCompleted.
|
||||
- 🚫 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: Invoke the `bmad-advanced-elicitation` skill
|
||||
- When 'P' selected: Invoke the `bmad-party-mode` skill
|
||||
- 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):
|
||||
|
||||
- Invoke the `bmad-advanced-elicitation` skill 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):
|
||||
|
||||
- Invoke the `bmad-party-mode` skill 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 `{planning_artifacts}/ux-design-specification.md`
|
||||
- Update frontmatter: append step to end of stepsCompleted array
|
||||
- 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 Developer agent
|
||||
✅ 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'
|
||||
|
||||
❌ **CRITICAL**: Reading only partial step file - leads to incomplete understanding and poor decisions
|
||||
❌ **CRITICAL**: Proceeding with 'C' without fully reading and understanding the next step file
|
||||
❌ **CRITICAL**: Making decisions without complete understanding of step requirements and protocols
|
||||
|
||||
## 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!
|
||||
|
|
@ -1,177 +0,0 @@
|
|||
# Step 14: Workflow Completion
|
||||
|
||||
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||
|
||||
- ✅ THIS IS A FINAL STEP - Workflow completion required
|
||||
|
||||
- 📖 CRITICAL: ALWAYS read the complete step file before taking any action - partial understanding leads to incomplete decisions
|
||||
- 🔄 CRITICAL: When loading next step with 'C', ensure the entire file is read and understood before proceeding
|
||||
- 🛑 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
|
||||
- ✅ YOU MUST ALWAYS SPEAK OUTPUT In your Agent communication style with the config `{communication_language}`
|
||||
|
||||
## 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
|
||||
- 📖 Update output file frontmatter, adding this step to the end of the list of stepsCompleted to indicate all is finished..
|
||||
- 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:** `{planning_artifacts}/ux-design-specification.md`
|
||||
|
||||
**Supporting Visual Assets:**
|
||||
|
||||
- Color themes visualizer: `{planning_artifacts}/ux-color-themes.html`
|
||||
- Design directions mockups: `{planning_artifacts}/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 the project's workflow status file (if one exists)
|
||||
- Update workflow_status["create-ux-design"] = `{planning_artifacts}/ux-design-specification.md`
|
||||
- Save file, preserving all comments and structure
|
||||
- Mark current timestamp as completion time
|
||||
|
||||
### 3. Suggest Next Steps
|
||||
|
||||
UX Design complete. Invoke the `bmad-help` skill.
|
||||
|
||||
### 5. Final Completion Confirmation
|
||||
|
||||
Congratulate the user on the completion you both completed together of the UX.
|
||||
|
||||
|
||||
|
||||
## 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
|
||||
|
||||
❌ **CRITICAL**: Reading only partial step file - leads to incomplete understanding and poor decisions
|
||||
❌ **CRITICAL**: Proceeding with 'C' without fully reading and understanding the next step file
|
||||
❌ **CRITICAL**: Making decisions without complete understanding of step requirements and protocols
|
||||
|
||||
## 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: `{planning_artifacts}/ux-design-specification.md`
|
||||
- ✅ Color Themes Visualizer: `{planning_artifacts}/ux-color-themes.html`
|
||||
- ✅ Design Directions: `{planning_artifacts}/ux-design-directions.html`
|
||||
|
||||
## On Complete
|
||||
|
||||
Run: `python3 {project-root}/_bmad/scripts/resolve_customization.py --skill {skill-root} --key workflow.on_complete`
|
||||
|
||||
If the resolved `workflow.on_complete` is non-empty, follow it as the final terminal instruction before exiting.
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
---
|
||||
stepsCompleted: []
|
||||
inputDocuments: []
|
||||
---
|
||||
|
||||
# UX Design Specification {{project_name}}
|
||||
|
||||
**Author:** {{user_name}}
|
||||
**Date:** {{date}}
|
||||
|
||||
---
|
||||
|
||||
<!-- UX design content will be appended sequentially through collaborative workflow steps -->
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
---
|
||||
name: bmad-ux
|
||||
description: Plan UX patterns and design specifications. Use when the user says "lets create UX design" or "create UX specifications" or "help me plan the UX"
|
||||
---
|
||||
# BMad UX
|
||||
|
||||
You are a master UX facilitator. **Elicit and capture** the user's vision — never impose yours. Probe like a senior practitioner; never volunteer colors, patterns, or directions. Render options via creative tools when seeing helps; the picks are the user's.
|
||||
|
||||
Produce `design.md` — a **lean design spine**: the contract architecture, story-dev, and AI implementers build against. Every line a committed decision. Bloat compounds as drift downstream. Spine wins on conflict with any mock, wireframe, or import.
|
||||
|
||||
## The spine
|
||||
|
||||
Always: **Information Architecture** · **Voice and Tone** · **Design Tokens** (values for user picks — color hex with light/dark pairs, custom type ramp, custom radii; platform conventions stay semantic; *spine is the spec, code mirrors it*) · **Component Patterns** · **State Patterns** · **Interaction Primitives** · **Accessibility Floor** · **Key Flows** (numbered steps + a climax beat).
|
||||
|
||||
When triggered: **Inspiration & Anti-patterns** (Discovery surfaced reference products / rejects) · **Responsive & Platform** (multi-surface or breakpoints).
|
||||
|
||||
Invent sections for product-specific concerns. Drop defaults only when truly inapplicable. Shape: read every entry in `{workflow.spine_examples}`.
|
||||
|
||||
## Sources
|
||||
|
||||
Inputs vary — PRD, brief, design-thinking output, requirements list, brainstorm notes, prior UX, brand deck. UX may lead, follow, or stand alone. Frontmatter `sources: [...]` lists what the spine inherits from. Inherit by reference; never restate scope, personas, or FRs.
|
||||
|
||||
## Activation
|
||||
|
||||
Resolve customization: `python3 {project-root}/_bmad/scripts/resolve_customization.py --skill {skill-root} --key workflow` (fallback: read `customize.toml`). Run `{workflow.activation_steps_prepend}`. Load `{workflow.persistent_facts}` and `{project-root}/_bmad/bmm/config.yaml` (+ `config.user.yaml`).
|
||||
|
||||
Headless → `references/headless.md`. Otherwise greet `{user_name}` in `{communication_language}`. `bmad-party-mode` and `bmad-advanced-elicitation` are always available. Misroute: PRD → `bmad-prd`; architecture → `bmad-create-architecture`; game UX → BMad GDS; agent/skill → `bmad-workflow-builder`; brief → `bmad-product-brief`.
|
||||
|
||||
Detect intent — **Create**, **Update**, **Validate**. Create scans `{workflow.ux_output_path}` for unfinished runs to offer resume. Run `{workflow.activation_steps_append}`.
|
||||
|
||||
## Modes
|
||||
|
||||
**Create.** Bind `{doc_workspace}` to `{workflow.ux_output_path}/{workflow.run_folder_pattern}/`. Create `.working/`, `imports/`, `.decision-log.md`, and `design.md` (frontmatter only). Run Discovery → Finalize.
|
||||
|
||||
**Update.** Read spine + log + sources. Create the log if missing — this update is entry one. Surface conflicts with prior decisions. Run Finalize.
|
||||
|
||||
**Validate.** See `references/validate.md`.
|
||||
|
||||
## Discovery
|
||||
|
||||
**Capture; do not author.** The spine is distilled at Finalize. Decisions → `.decision-log.md` (canonical). Creative-tool artifacts → `.working/`. User-supplied visuals (Figma, sketches, brand decks, image folders) → `imports/`, one log line per item. Spine wins on conflict.
|
||||
|
||||
Brain dump first — even when the user opens with paragraphs (that's intake). Subagent-extract big docs. One "anything else?" probe. Stakes: hobby / internal / consumer / regulated.
|
||||
|
||||
Working mode: **Fast** (batch gaps, draft with `[ASSUMPTION]` tags, skip creative tools) or **Coaching** (walk decisions; creative tools woven in).
|
||||
|
||||
Creative tools — scan `{workflow.creative_tools}`, invoke when seeing helps. Defaults: HTML color themes, design directions, Excalidraw wireframes; key-screen HTML mocks at Finalize. See `references/creative-tools.md`. Research subagents on demand; consult `{workflow.external_sources}` when entries match.
|
||||
|
||||
Concern scan — name what the UX carries: accessibility, platforms, brand, regulated language, motion, i18n, dark mode, offline, content density, input modalities, notifications. Open list; drives invented sections.
|
||||
|
||||
Journeys: user narrates a real session; structure into numbered steps with a climax beat. Mirror source-spec names verbatim when defined.
|
||||
|
||||
## Reviewer Gate
|
||||
|
||||
Used by Validate and Finalize. Menu: rubric walker (`references/validate.md`) + `{workflow.finalize_reviewers}` + ad-hoc (accessibility for consumer / regulated). Stakes-calibrated. Parallel subagents → each writes `review-{slug}.md`, returns compact summary. Validate then runs the synthesis pipeline in `references/validate.md`.
|
||||
|
||||
## Finalize
|
||||
|
||||
Outcomes, in order:
|
||||
|
||||
- **Spine distilled.** Subagent reads `.decision-log.md`, `.working/`, `imports/`, sources; produces `design.md` against `## The spine` and `{workflow.spine_examples}`. Runs the rubric walker's Pass 1 coverage checks proactively (see `references/validate.md`) — flow / token / component / state / visual-reference / conditional-sections. Surface gaps; never invent.
|
||||
- **Inputs reconciled.** Subagent per user-supplied input → `reconcile-{slug}.md`. Surface dropped qualitative ideas.
|
||||
- **Reviewer Gate passed.** Resolve before polish.
|
||||
- **Open items triaged.** Open Questions, `[ASSUMPTION]`, `[NOTE FOR UX]`. Phase-blockers one at a time; non-blockers → log.
|
||||
- **Key-screen mocks rendered.** Key-screens tool → `.working/` for surfaces where layout drives behavior or anchors visual language.
|
||||
- **Mock coverage confirmed.** Walk every IA surface; classify *mocked* vs *spine-only*. Ask: *"These will be built from spine tables alone — any need a visual reference?"* Render more if named; log spine-only choices.
|
||||
- **Layout extracted, artifacts promoted.** Distill subagent re-reads each `.working/` and `imports/` artifact; lifts layout / component / state decisions into spine tables. Promote `.working/` keepers to `mockups/` (HTML) or `wireframes/` (Excalidraw); imports stay. Inline relative links at relevant spine sections; state spine-wins-on-conflict once.
|
||||
- **Polished, handed off, closed.** Apply `{workflow.doc_standards}` in order. Execute `{workflow.external_handoffs}`; surface URLs. Set `status: final`, `updated: {date}`. Log finalization. Share paths. Common next: `bmad-create-architecture`, `bmad-create-epics-and-stories`, `bmad-dev-story`. Run `{workflow.on_complete}`.
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
# Color Themes Renderer
|
||||
|
||||
Subagent prompt. Produce one self-contained HTML page at the supplied `.working/color-themes-{n}.html` path showing 4-6 distinct theme variations side by side so the user can pick.
|
||||
|
||||
Each variation: header (name + one-line emotional register), token chips for every semantic role decided so far, and one realistic UI snippet using the palette (content drawn from the conversation, not lorem). Include light and dark side-by-side when both modes are in scope. Avoid near-identical pastels — variations must differ in register, not just hue.
|
||||
|
||||
Inline CSS only, system font stack, no JS, no network. Document concrete hex values in `<style>` comments per variation so the user can lift them if they pick that theme. The spine itself stays semantic.
|
||||
|
||||
Return to the parent: file path, one-line per variation, mode coverage. Do not dump HTML into the parent context. If interactive, open the file with `python3 -c "import webbrowser, pathlib; webbrowser.open(pathlib.Path('PATH').resolve().as_uri())"`.
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
# Design Directions Renderer
|
||||
|
||||
Subagent prompt. Produce 3-6 distinct visual directions for the product's hero screen, each a separate self-contained HTML file at `.working/direction-{slug}.html` (or one combined `directions-{n}.html` if the parent's intent says side-by-side).
|
||||
|
||||
Each direction is a *complete visual personality* applied to the same key screen — not a palette swap. Differ on density, type weight, motion implication, brand register. Each file: 2-3 sentence rationale, near-1:1 hero screen mockup in a phone or browser frame, ideally a secondary screen, at least one state variant visible (aging row, empty state, etc).
|
||||
|
||||
Use real product content from the conversation. Voice/tone from `.decision-log.md` applied to every visible string — no lorem. Inline CSS, system fonts, no JS or network. Document hex values in `<style>` comments per direction.
|
||||
|
||||
Return to the parent: file paths, one-line personality summary per direction, what hero screen was depicted. Do not dump HTML into parent context. If interactive, open each file in the browser.
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
# Excalidraw Wireframe Renderer
|
||||
|
||||
Subagent prompt. Produce one `.excalidraw` file at `.working/ia-{date}.excalidraw` (IA diagram) or `.working/flow-{name}-{date}.excalidraw` (flow wireframe).
|
||||
|
||||
## CRITICAL: two-character `index` fields only
|
||||
|
||||
Every element's `index` field must be **exactly two characters** (`a0`, `aZ`, `b3`, ...). Three-character indices cause a silent *"Error: invalid file"* with no diagnostic output. Assign sequentially across all elements; advance the leading letter when the trailing alphanumeric exhausts (`a0..a9, aA..aZ`, then `b0..`). Verify before writing.
|
||||
|
||||
## Shape
|
||||
|
||||
Valid Excalidraw file: `{type: "excalidraw", version: 2, source: "https://excalidraw.com", elements: [...], appState: {gridSize: null, viewBackgroundColor: "#ffffff"}, files: {}}`. Each element needs the standard Excalidraw element fields (`id, type, x, y, width, height, angle, strokeColor, backgroundColor, fillStyle, strokeWidth, strokeStyle, roughness, opacity, groupIds, frameId, roundness, seed, version, versionNonce, isDeleted, boundElements, updated, link, locked, index`). Text elements add `text, fontSize, fontFamily, textAlign, verticalAlign, baseline, containerId, originalText, lineHeight`.
|
||||
|
||||
## Content
|
||||
|
||||
**IA diagram:** boxes-and-arrows of auth stack, main app surfaces, modal routes, settings stack, cross-cutting affordances. Color sparingly to distinguish category. Layout for human legibility, not graph correctness.
|
||||
|
||||
**Flow wireframe:** screen-by-screen rectangles left-to-right, simple shapes inside (nav bar, CTA, content blocks) at low fidelity. Arrows labeled with the user action that causes transition. Annotations alongside for climax and edge-case beats.
|
||||
|
||||
Return to the parent: file path, kind, one-line subject, element count, confirmation that all indices are two-character. Do not dump JSON into parent context. Tell the user to open in Excalidraw desktop or excalidraw.com.
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
# Headless Mode JSON Schemas
|
||||
|
||||
Every headless run ends with one of these payloads. Omit keys for artifacts not produced.
|
||||
|
||||
## Common fields
|
||||
|
||||
- `status` — `"complete"`, `"blocked"`, or `"partial"`
|
||||
- `intent` — `"create"`, `"update"`, or `"validate"` (matches the detected intent)
|
||||
- `reason` — required when `status` is `"blocked"`; one-sentence explanation
|
||||
- `assumptions` — array of inferred values that were not directly confirmed by inputs
|
||||
- `open_questions` — array of items that need a human decision before the artifact can be considered final
|
||||
|
||||
## Create
|
||||
|
||||
```json
|
||||
{
|
||||
"status": "complete",
|
||||
"intent": "create",
|
||||
"design": "{doc_workspace}/design.md",
|
||||
"decision_log": "{doc_workspace}/.decision-log.md",
|
||||
"working_artifacts": ["{doc_workspace}/.working/color-themes-1.html"],
|
||||
"promoted_artifacts": {
|
||||
"mockups": ["{doc_workspace}/mockups/direction-calm-sage.html"],
|
||||
"wireframes": ["{doc_workspace}/wireframes/ia-2026-05-19.excalidraw"]
|
||||
},
|
||||
"open_questions": [],
|
||||
"assumptions": [],
|
||||
"external_handoffs": [
|
||||
{"directive": "Confluence upload", "tool": "corp:confluence_upload", "url": "https://confluence.corp/DESIGN/123", "status": "ok"}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
The `working_artifacts` and `promoted_artifacts` keys are optional and omitted entirely when empty. Headless Create runs default to not enabling creative tools — both keys are typically absent in headless output unless the caller enabled them.
|
||||
|
||||
## Update
|
||||
|
||||
```json
|
||||
{
|
||||
"status": "complete",
|
||||
"intent": "update",
|
||||
"design": "{doc_workspace}/design.md",
|
||||
"decision_log": "{doc_workspace}/.decision-log.md",
|
||||
"changes_summary": "1-3 sentences describing what changed and why",
|
||||
"conflicts_with_prior_decisions": [],
|
||||
"open_questions": [],
|
||||
"external_handoffs": [
|
||||
{"directive": "Confluence upload", "tool": "corp:confluence_upload", "url": "https://confluence.corp/DESIGN/123", "status": "ok"}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Validate
|
||||
|
||||
```json
|
||||
{
|
||||
"status": "complete",
|
||||
"intent": "validate",
|
||||
"validation_report": "{doc_workspace}/validation-report.md",
|
||||
"findings_summary": {
|
||||
"critical": 0,
|
||||
"high": 0,
|
||||
"medium": 0,
|
||||
"low": 0
|
||||
},
|
||||
"offer_to_update": true
|
||||
}
|
||||
```
|
||||
|
||||
`validation_report` is always written for Validate intent — the path here is required, not optional.
|
||||
|
||||
## Blocked
|
||||
|
||||
```json
|
||||
{
|
||||
"status": "blocked",
|
||||
"intent": "update",
|
||||
"reason": "Change signal ambiguous — could be a brand refresh or an accessibility audit response; no inferred direction"
|
||||
}
|
||||
```
|
||||
|
||||
Always include the intent (best-guess if not certain) and a one-sentence `reason`.
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
# Key Screens Renderer
|
||||
|
||||
Subagent prompt. Fired at Finalize (or during late Discovery once layout decisions firm up). Produces 1:1 HTML mocks of the load-bearing surfaces so the spine can link to them as visual reference. Spine remains the contract; mocks illustrate.
|
||||
|
||||
## Inputs
|
||||
|
||||
`.decision-log.md`, the current draft `design.md`, `.working/` (especially the chosen color-theme and direction mocks), source PRD. The user names which surfaces to render — typically 2-4: the canonical entry surface, the most complex flow's hero screen, any load-bearing overlay/modal, and (when present) the Week / list / dashboard view.
|
||||
|
||||
## What to render
|
||||
|
||||
One HTML file per screen, at `.working/key-{slug}.html`. Each file: realistic device frame (phone or browser), real product content from the conversation (no lorem), every visible string voice-checked against `.decision-log.md`, all decided tokens applied. Show one canonical state per screen; if a surface has a load-bearing alternate state (focus, error, crisis-card-present), render it as a second column or section in the same file.
|
||||
|
||||
Inline CSS, system fonts, no JS, no network. The mock must render fully offline. Comment block at the top of the `<style>` notes which spine sections govern this screen so a future reader knows what to check.
|
||||
|
||||
## What to return
|
||||
|
||||
A compact summary to the parent:
|
||||
- file path per screen
|
||||
- one-line caption per screen ("Today picker at rest; accent on Thought record")
|
||||
- which spine sections each mock illustrates (Component Patterns rows, State Patterns rows, Flow steps)
|
||||
|
||||
The parent, at Finalize "Promote working artifacts," uses this summary to insert inline `mockups/...` links into the relevant spine sections.
|
||||
|
||||
## Anti-patterns
|
||||
|
||||
- Do not invent layout — every composition decision must trace to a `.working/` artifact or a confirmation in `.decision-log.md`. If a layout question is open, the mock is premature.
|
||||
- Do not show every screen of every flow — 2-4 load-bearing surfaces, not 14.
|
||||
- Do not stage marketing copy. Strings come from `.decision-log.md` and voice rules.
|
||||
- Do not introduce a new pattern not in the spine's Component Patterns table. If you need one, log it and ask before rendering.
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
---
|
||||
name: Quill
|
||||
status: final
|
||||
sources:
|
||||
- ../prds/quill-2025-08-15/prd.md
|
||||
updated: 2025-09-02
|
||||
---
|
||||
|
||||
# Quill — Design Spine
|
||||
|
||||
> Illustrative example. Single-surface mobile (iOS + Android parity). Consumer posture, calm by default. Demonstrates: Voice and Tone as gating discipline, Inspiration & Anti-patterns earning its place, Responsive & Platform omitted (single-surface).
|
||||
|
||||
## Foundation
|
||||
|
||||
Native UIKit + Swift on iOS; Jetpack Compose on Android. Both follow platform conventions for navigation, system gestures, dynamic type. Brand layer (typography pairing, color palette) sits on top of native components. Dark mode is the default surface; light is a setting.
|
||||
|
||||
## Information Architecture
|
||||
|
||||
| Surface | Reached from | Purpose |
|
||||
|---|---|---|
|
||||
| Today | App open (cold) | Today's prompt + entry composer |
|
||||
| Library | Tab bar | Past entries, searchable |
|
||||
| Entry detail | Library row tap | Read / edit one entry |
|
||||
| Settings | Today header gear | Account, export, theme |
|
||||
|
||||
Bottom tab bar (Today / Library / Settings). No drawer. Modal stacks one level deep, never two.
|
||||
|
||||
→ Composition reference: `mockups/today-cold.html`, `mockups/composer.html`. Spine wins on conflict.
|
||||
|
||||
## Voice and Tone
|
||||
|
||||
| Do | Don't |
|
||||
|---|---|
|
||||
| "Today's prompt." | "Time to write!" |
|
||||
| "Saved." | "✓ Auto-saved successfully" |
|
||||
| "We couldn't reach the cloud — your work is on this device." | "Network error" |
|
||||
| Short, complete sentences. | Streak counters, encouragement, exclamation marks. |
|
||||
|
||||
## Design Tokens
|
||||
|
||||
This table is the spec. Dev mirrors values into platform theme modules; the spine wins on any conflict.
|
||||
|
||||
| Token | Role | Value (light / dark) |
|
||||
|---|---|---|
|
||||
| `surface/base` | Default background | `#FAF9F7` / `#1A1B1F` |
|
||||
| `surface/raised` | Card / composer background | `#FFFFFF` / `#23252B` |
|
||||
| `ink/primary` | Body text | `#1A1B1F` / `#F0EDE8` |
|
||||
| `ink/secondary` | Metadata, timestamps | `#6B655A` / `#A39E94` |
|
||||
| `ink/disabled` | Inactive controls | `#B5AFA5` / `#5E5A53` |
|
||||
| `accent` | Save, send, primary action | `#A87434` / `#D4A574` |
|
||||
| `border/hairline` | List separators | `#E8E4DD` / `#2E3036` |
|
||||
| `space/1..6` | Spacing scale (pixels) | 4 / 8 / 12 / 16 / 24 / 32 |
|
||||
| `radius/sm`, `radius/md` | Corners (pixels) | 6, 12 |
|
||||
| `type/title` | Prompt / section heading | iOS Title 1 · Android Headline Small *(platform convention)* |
|
||||
| `type/body` | Body text | iOS Body · Android Body Large *(platform convention)* |
|
||||
| `type/meta` | Timestamps, captions | iOS Footnote · Android Body Small *(platform convention)* |
|
||||
|
||||
Contrast: `ink/primary` on `surface/base` ≥ 7:1 in both modes. `accent` on `surface/base` ≥ 4.5:1. Focus indicators ≥ 3:1 against adjacent.
|
||||
|
||||
## Component Patterns
|
||||
|
||||
| Component | Use | Rules |
|
||||
|---|---|---|
|
||||
| Prompt card | Today | One per day. `surface/raised`. Prompt text in `type/title`. Composer entry point below. |
|
||||
| Composer | Today + entry detail | Full-screen text view. No formatting toolbar in v1. Autosave on pause ≥ 600ms. |
|
||||
| Entry row | Library list | Date in `type/meta`, first line of body in `type/body` (1 line, truncated). Tap → entry detail. |
|
||||
| Save indicator | Composer header | Cycles `Editing…` → `Saved.` (≥ 800ms visible). Text only — no icons. |
|
||||
| Settings row | Settings list | Label left, value or chevron right. Tap → detail or toggle. |
|
||||
|
||||
## State Patterns
|
||||
|
||||
| State | Surface | Treatment |
|
||||
|---|---|---|
|
||||
| Cold open | Today | Show today's prompt (cached). If no cache, `Today's prompt is loading.` with skeleton. |
|
||||
| Empty library | Library | `No entries yet — Today's prompt is your first.` Link to Today. |
|
||||
| Search empty | Library search | `No matches.` No suggestions. |
|
||||
| Offline write | Composer | Save locally. No banner. Sync on next foreground. |
|
||||
| Sync error | Settings → Account | Surfaced here only. Never block writing. |
|
||||
| Focus | Composer | Native cursor + keyboard. No custom focus chrome. |
|
||||
|
||||
## Interaction Primitives
|
||||
|
||||
- Tap to act. Long-press reserved for system text selection.
|
||||
- Swipe-to-delete on entry rows (native pattern, confirm sheet).
|
||||
- Pull-to-refresh on Library only.
|
||||
- **Banned:** carousels, hero animations on open, badge counts, streaks, push-notification re-engagement.
|
||||
|
||||
## Accessibility Floor
|
||||
|
||||
- VoiceOver / TalkBack: every interactive element labeled with role + state. Save indicator announces `Saved` on transition.
|
||||
- Dynamic type honored through `type/*` tokens. UI must remain legible at largest setting — no truncated controls.
|
||||
- Reduce Motion: skip the save-indicator fade; show `Saved.` immediately.
|
||||
- Tap targets ≥ 44pt (iOS) / 48dp (Android).
|
||||
- Focus traversal follows reading order on every surface.
|
||||
|
||||
## Inspiration & Anti-patterns
|
||||
|
||||
- **Lifted from Day One:** the single daily entry framing — one prompt, one composer, no inbox.
|
||||
- **Lifted from iA Writer:** the no-toolbar composer; formatting is a settings-level decision, not a per-entry one.
|
||||
- **Rejected — Streaks (Duolingo, most habit apps):** streaks weaponize the user's calendar. Quill's value is showing up *today*, not punishing missed days.
|
||||
- **Rejected — AI prompt suggestions inside the composer:** the composer is for writing, not negotiating with a model. AI lives only in the daily prompt generation.
|
||||
|
||||
## Key Flows
|
||||
|
||||
### Flow 1 — Daily write
|
||||
|
||||
1. User opens app.
|
||||
2. Today surface shows today's prompt (cached if offline).
|
||||
3. User taps composer entry point.
|
||||
4. Composer opens, keyboard active.
|
||||
5. User writes; autosave fires on pause.
|
||||
6. User taps Back.
|
||||
7. **Climax:** Today surface shows `Saved.` and the entry's first line below the prompt — proof the day is captured.
|
||||
|
||||
Failure: cold prompt fetch fails → composer still opens with cached generic prompt; banner on Today only after user returns.
|
||||
|
||||
### Flow 2 — Recall past entry
|
||||
|
||||
1. User taps Library.
|
||||
2. Scrolls or searches.
|
||||
3. Taps entry row.
|
||||
4. Entry detail opens in read mode.
|
||||
5. User taps anywhere to enter edit mode (cursor at tap point).
|
||||
6. Edits autosave.
|
||||
7. **Climax:** `Saved.` visible in entry header.
|
||||
|
||||
Empty state: no entries → message routes back to Today.
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
---
|
||||
name: Pulse
|
||||
status: final
|
||||
sources:
|
||||
- ../prds/pulse-2025-10-04/prd.md
|
||||
- ../research/pulse-customer-interviews-2025-09.md
|
||||
updated: 2025-10-21
|
||||
---
|
||||
|
||||
# Pulse — Design Spine
|
||||
|
||||
> Illustrative example. Multi-surface (responsive web admin + native mobile employee app). B2B utility posture. Demonstrates: Responsive & Platform as a required-when-applicable section, keyboard-first Interaction Primitives, anonymity rules as Component Pattern invariants.
|
||||
|
||||
## Foundation
|
||||
|
||||
Web: React + Tailwind. Mobile: React Native. Tokens defined in this spine; dev mirrors them into a shared theme module both surfaces import. Single-tenant; users belong to one team, SSO via the customer's IdP, no self-serve signup.
|
||||
|
||||
## Information Architecture
|
||||
|
||||
### Web admin
|
||||
| Surface | Reached from | Purpose |
|
||||
|---|---|---|
|
||||
| Dashboard | Login | Today's response summary, last-7-day trends |
|
||||
| Question library | Sidebar | Manage rotation of daily prompts |
|
||||
| Team | Sidebar | Members, roles, removal |
|
||||
| Settings | User menu | Tenant config, billing, SSO |
|
||||
|
||||
### Mobile employee
|
||||
| Surface | Reached from | Purpose |
|
||||
|---|---|---|
|
||||
| Today | App open / push notification | Daily prompt + 1-tap answer |
|
||||
| History | Tab bar | Own past answers |
|
||||
| Settings | History header | Account, notifications, sign out |
|
||||
|
||||
→ Composition reference: `mockups/dashboard.html`, `mockups/mobile-today.html`. Spine wins on conflict.
|
||||
|
||||
## Voice and Tone
|
||||
|
||||
| Do | Don't |
|
||||
|---|---|
|
||||
| "How's today going?" (employee) | "Time for your daily check-in!" |
|
||||
| "Thanks — see you tomorrow." | "Submission received." |
|
||||
| Manager-facing: data words. "23 of 28 responded." | "Great engagement today!" |
|
||||
| Employee-facing: human words. | Corporate-speak, gamification. |
|
||||
|
||||
## Design Tokens
|
||||
|
||||
This table is the spec. Dev mirrors values into the shared theme module; the spine wins on any conflict.
|
||||
|
||||
| Token | Role | Value (light / dark) |
|
||||
|---|---|---|
|
||||
| `surface/base` | Page background | `#FFFFFF` / `#0F1115` |
|
||||
| `surface/raised` | Cards, panels | `#F7F8FA` / `#191C22` |
|
||||
| `surface/sunken` | Insets, wells | `#EDEFF3` / `#0A0C10` |
|
||||
| `ink/primary` | Body text | `#0F1115` / `#F2F4F7` |
|
||||
| `ink/secondary` | Metadata, helper text | `#5B616B` / `#A0A6B0` |
|
||||
| `ink/inverse` | Text on accent fills | `#FFFFFF` / `#0F1115` |
|
||||
| `accent` | Submit / save / primary CTA | `#2D5BFF` / `#7B9AFF` |
|
||||
| `state/positive` | Sentiment chip — positive | `#0E8556` / `#3DBC8E` |
|
||||
| `state/caution` | Sentiment chip — caution | `#A86E00` / `#E5A547` |
|
||||
| `state/negative` | Sentiment chip — negative | `#C03028` / `#F77268` |
|
||||
| `border/hairline` | Dividers | `#E1E4EA` / `#262A33` |
|
||||
| `border/strong` | Focused inputs | `#9DA3AE` / `#4A5160` |
|
||||
| `space/1..8` | Spacing scale (pixels) | 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 |
|
||||
| `radius/sm`, `radius/md`, `radius/lg` | Corners (pixels) | 4, 8, 12 |
|
||||
| `type/display` | Hero / page title | Web: 32px / 1.2 / 600 weight |
|
||||
| `type/title` | Section heading | Web: 20px / 1.3 / 600 weight |
|
||||
| `type/body` | Body text | Web: 16px / 1.5 / 400 weight · Mobile: native Body *(platform convention)* |
|
||||
| `type/meta` | Captions, timestamps | Web: 13px / 1.4 / 400 weight · Mobile: native Caption *(platform convention)* |
|
||||
|
||||
Contrast: all text ≥ 4.5:1 in both modes. Sentiment chips ≥ 3:1 against `surface/raised`. Focus rings ≥ 3:1 against adjacent.
|
||||
|
||||
## Component Patterns
|
||||
|
||||
| Component | Use | Rules |
|
||||
|---|---|---|
|
||||
| Sentiment chip | Dashboard, history | Color from `state/*`. Always paired with the word ("Positive 18") — never icon-only. |
|
||||
| Question card | Question library | Editable inline. Save on blur. Schedule chip next to title. |
|
||||
| Response cell | Dashboard grid | Anonymous unless team < 5 (then named — hard rule, never a setting). Truncate at 2 lines, expand on tap. |
|
||||
| 1-tap answer button | Mobile Today | Three stacked, full-width. Each ≥ 56dp tall. Selected state uses `accent` fill. |
|
||||
| Empty state | Anywhere | One sentence, one action. No illustrations in v1. |
|
||||
|
||||
## State Patterns
|
||||
|
||||
| State | Surface | Treatment |
|
||||
|---|---|---|
|
||||
| Cold dashboard load | Web | Skeleton rows (3 weeks). |
|
||||
| No responses yet today | Dashboard | `0 of N responded. Window closes 6pm.` |
|
||||
| Team < 5 members | Dashboard | Anonymity banner: `Names shown — team too small to anonymize.` |
|
||||
| Offline answer | Mobile Today | Save locally. Submit on next online. Header pill: `Will send when online.` |
|
||||
| SSO error | Web login | Surface vendor message verbatim + `Contact your admin.` |
|
||||
| Permission denied | Question library | Hide the surface from non-admins; don't show a blocked screen. |
|
||||
| Notification disabled | Mobile Today | Header banner once: `Daily reminder is off — turn on.` |
|
||||
|
||||
## Interaction Primitives
|
||||
|
||||
**Web:** click + full keyboard. `Tab` traverses in reading order; `Enter` submits; `Esc` cancels editors; `/` focuses dashboard search; `?` opens shortcuts.
|
||||
|
||||
**Mobile:** tap. System swipe gestures only. No long-press except text selection.
|
||||
|
||||
**Banned everywhere:** drag-to-reorder in v1, hover-only affordances, modal stacks > 1 level deep.
|
||||
|
||||
## Accessibility Floor
|
||||
|
||||
- WCAG 2.2 AA across both surfaces.
|
||||
- Web focus rings ≥ 2px, contrast ≥ 3:1 against adjacent.
|
||||
- Screen reader announces dashboard summary on load: "23 of 28 responded today, 4 outstanding."
|
||||
- Mobile VoiceOver labels for each answer button include the question text.
|
||||
- No information conveyed by color alone — sentiment chips carry the word.
|
||||
- Submission-window time is announced on entry to Today, not as a live countdown.
|
||||
|
||||
## Responsive & Platform
|
||||
|
||||
| Breakpoint / Platform | Behavior |
|
||||
|---|---|
|
||||
| Web ≥ 1280px | Sidebar nav visible; dashboard grid 4 columns. |
|
||||
| Web 768–1279px | Sidebar collapses to icons; grid 2 columns. |
|
||||
| Web < 768px | Hamburger nav; grid stacks to 1 column. *Web admin is not designed for phone use; warn on first sub-768 visit.* |
|
||||
| Mobile native (iOS / Android) | Full feature parity with each other. Token names identical, mapped to platform-native dynamic sizing. |
|
||||
| Cross-platform parity | Employee surfaces never appear on web. Admin surfaces never appear in the mobile app. |
|
||||
|
||||
## Inspiration & Anti-patterns
|
||||
|
||||
- **Lifted from Linear:** keyboard-first web admin posture. `/` focuses search, `?` opens shortcuts, no drag for primary nav.
|
||||
- **Lifted from Officevibe:** the anonymity threshold (< 5 = named) as a hard rule, not a setting. Anonymity claims have to be defensible.
|
||||
- **Rejected — Slackbot-style threaded questions:** the daily check-in is *one tap*; it isn't a conversation. Long-form follow-ups belong in 1:1s.
|
||||
- **Rejected — Manager "please respond" nudges:** managers cannot ping non-respondents. Response rate is a culture problem, not a UI problem.
|
||||
|
||||
## Key Flows
|
||||
|
||||
### Flow 1 — Manager checks today (web)
|
||||
|
||||
1. Manager opens dashboard.
|
||||
2. Skeleton resolves; top row shows today's response count + sentiment mix.
|
||||
3. Manager scans cells; clicks a low-sentiment one to expand.
|
||||
4. Expanded view shows verbatim response (or "Anonymous" if team ≥ 5).
|
||||
5. **Climax:** Manager sees a verbatim line of text from someone on the team — actual signal, no drill, no filter, no query composition.
|
||||
|
||||
Failure: data fetch fails → top row stays as skeleton + `Couldn't load today. Retry.` Other surfaces unaffected.
|
||||
|
||||
### Flow 2 — Employee answers (mobile)
|
||||
|
||||
1. Push notification at 9am: "How's today going?"
|
||||
2. Tap opens app directly on Today.
|
||||
3. Three answer buttons visible.
|
||||
4. Tap one.
|
||||
5. **Climax:** Button fills with `accent`; screen swaps to `Thanks — see you tomorrow.` in < 200ms. No second screen, no follow-up question, no extra fields.
|
||||
|
||||
Failure: offline → answer saves locally, header pill `Will send when online.` Re-confirm thanks message on submit success.
|
||||
|
|
@ -0,0 +1,327 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
UX Design Validation Report — skeleton template.
|
||||
|
||||
This file is a starter the synthesis pass fills in directly. There is no
|
||||
substitution engine. The LLM:
|
||||
1. Reads {doc_workspace}/review-rubric.md and every review-{slug}.md from
|
||||
additional reviewers.
|
||||
2. Copies this skeleton.
|
||||
3. Replaces the placeholder content (everything between TEMPLATE markers)
|
||||
with the consolidated review, preserving the structure and CSS.
|
||||
4. Writes the result to {doc_workspace}/validation-report.html.
|
||||
5. Writes a markdown twin to {doc_workspace}/validation-report.md.
|
||||
|
||||
Visual rules the LLM must preserve:
|
||||
- The container width, the color tokens, the typography.
|
||||
- One dimension = one collapsible <section class="dimension">.
|
||||
- Verdict pill uses the verdict-* class matching its judgment.
|
||||
- Severity badge uses the sev-* class matching its level.
|
||||
- Each extra reviewer (accessibility, adversarial, etc.) gets its own
|
||||
collapsible section below the rubric dimensions.
|
||||
- The footer always shows the artifact paths and timestamp.
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>UX Design Validation: TEMPLATE_UX_SPEC_NAME</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #fafaf9;
|
||||
--surface: #ffffff;
|
||||
--border: #e7e5e4;
|
||||
--text: #1c1917;
|
||||
--muted: #78716c;
|
||||
|
||||
--verdict-strong: #16a34a;
|
||||
--verdict-adequate: #65a30d;
|
||||
--verdict-thin: #d97706;
|
||||
--verdict-broken: #dc2626;
|
||||
|
||||
--sev-low: #64748b;
|
||||
--sev-medium: #ca8a04;
|
||||
--sev-high: #ea580c;
|
||||
--sev-critical: #dc2626;
|
||||
|
||||
--grade-exc: #16a34a;
|
||||
--grade-good: #65a30d;
|
||||
--grade-fair: #d97706;
|
||||
--grade-poor: #dc2626;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
font-size: 15px;
|
||||
}
|
||||
.container { max-width: 960px; margin: 0 auto; padding: 32px 24px 64px; }
|
||||
|
||||
header.report-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.title h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
|
||||
.title .subtitle { color: var(--muted); font-size: 13px; margin-top: 4px; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
|
||||
.grade {
|
||||
padding: 10px 18px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.grade-excellent { background: var(--grade-exc); }
|
||||
.grade-good { background: var(--grade-good); }
|
||||
.grade-fair { background: var(--grade-fair); }
|
||||
.grade-poor { background: var(--grade-poor); }
|
||||
|
||||
.synthesis {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-left: 3px solid var(--muted);
|
||||
border-radius: 8px;
|
||||
padding: 18px 22px;
|
||||
margin-bottom: 24px;
|
||||
font-size: 15.5px;
|
||||
}
|
||||
.synthesis p { margin: 0 0 10px; }
|
||||
.synthesis p:last-child { margin-bottom: 0; }
|
||||
|
||||
.dimension-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 10px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.dim-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
.dim-card .dim-name { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
|
||||
.dim-card .dim-verdict { font-size: 14px; font-weight: 600; }
|
||||
|
||||
section.dimension, section.reviewer-section { margin-bottom: 14px; }
|
||||
section.dimension details, section.reviewer-section details {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
section summary {
|
||||
padding: 14px 20px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
section summary::-webkit-details-marker { display: none; }
|
||||
section summary::before {
|
||||
content: "▸";
|
||||
display: inline-block;
|
||||
color: var(--muted);
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
section details[open] summary::before { transform: rotate(90deg); }
|
||||
section summary h2 {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.005em;
|
||||
flex: 1;
|
||||
}
|
||||
.verdict-pill {
|
||||
font-size: 11px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: white;
|
||||
}
|
||||
.verdict-strong { background: var(--verdict-strong); }
|
||||
.verdict-adequate { background: var(--verdict-adequate); }
|
||||
.verdict-thin { background: var(--verdict-thin); }
|
||||
.verdict-broken { background: var(--verdict-broken); }
|
||||
|
||||
.dim-body { padding: 4px 20px 18px; }
|
||||
.dim-judgment { color: var(--text); font-size: 14.5px; }
|
||||
.dim-judgment p { margin: 0 0 10px; }
|
||||
|
||||
.findings-list { padding: 0 20px 4px; }
|
||||
article.finding {
|
||||
padding: 14px 0;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
article.finding:first-child { border-top: none; }
|
||||
article.finding header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.badge {
|
||||
font-size: 10.5px;
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.badge-sev-low { background: rgba(100, 116, 139, 0.12); color: var(--sev-low); }
|
||||
.badge-sev-medium { background: rgba(202, 138, 4, 0.14); color: var(--sev-medium); }
|
||||
.badge-sev-high { background: rgba(234, 88, 12, 0.14); color: var(--sev-high); }
|
||||
.badge-sev-critical { background: rgba(220, 38, 38, 0.14); color: var(--sev-critical); }
|
||||
.finding-title { margin: 0; font-size: 15px; font-weight: 500; flex: 1; min-width: 200px; }
|
||||
.finding-location { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; color: var(--muted); }
|
||||
.finding-note, .finding-fix { margin-top: 6px; font-size: 14px; }
|
||||
.finding-fix strong { color: var(--muted); font-weight: 500; }
|
||||
|
||||
.reviewer-source {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
}
|
||||
|
||||
.mechanical {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 16px 20px;
|
||||
margin-top: 24px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.mechanical h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
|
||||
.mechanical ul { margin: 0; padding-left: 20px; }
|
||||
.mechanical li { margin-bottom: 4px; color: var(--text); }
|
||||
|
||||
footer.report-footer {
|
||||
margin-top: 40px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--border);
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
}
|
||||
footer .meta { display: flex; gap: 24px; flex-wrap: wrap; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
<!-- TEMPLATE: header. Fill ux spec name, ux spec path, grade text & class. -->
|
||||
<header class="report-header">
|
||||
<div class="title">
|
||||
<h1>TEMPLATE_UX_SPEC_NAME — UX Design Validation Report</h1>
|
||||
<div class="subtitle">TEMPLATE_UX_SPEC_PATH</div>
|
||||
</div>
|
||||
<div class="grade TEMPLATE_GRADE_CLASS">TEMPLATE_GRADE</div>
|
||||
</header>
|
||||
|
||||
<!-- TEMPLATE: overall synthesis paragraphs. Lift directly from
|
||||
review-rubric.md "Overall verdict" section; expand if extra reviewers
|
||||
(accessibility, adversarial, etc.) materially shift the picture.
|
||||
Wrap each paragraph in <p>. -->
|
||||
<div class="synthesis">
|
||||
<p>TEMPLATE_SYNTHESIS_PARAGRAPH</p>
|
||||
</div>
|
||||
|
||||
<!-- TEMPLATE: dimension summary cards. One per rubric dimension. The
|
||||
dim-verdict text uses one of: strong | adequate | thin | broken. -->
|
||||
<div class="dimension-summary">
|
||||
<div class="dim-card">
|
||||
<div class="dim-name">Decision-readiness</div>
|
||||
<div class="dim-verdict" style="color: var(--verdict-TEMPLATE_VERDICT)">TEMPLATE_VERDICT_TEXT</div>
|
||||
</div>
|
||||
<!-- repeat for each of the seven dimensions -->
|
||||
</div>
|
||||
|
||||
<!-- TEMPLATE: one section per rubric dimension. Skip a dimension entirely
|
||||
if the rubric review marked it n/a for this UX spec (e.g. downstream
|
||||
usability for a single-screen standalone utility). Open the section
|
||||
by default if verdict is thin or broken. -->
|
||||
<section class="dimension">
|
||||
<details open>
|
||||
<summary>
|
||||
<h2>Decision-readiness</h2>
|
||||
<span class="verdict-pill verdict-TEMPLATE_VERDICT">TEMPLATE_VERDICT_TEXT</span>
|
||||
</summary>
|
||||
<div class="dim-body">
|
||||
<div class="dim-judgment">
|
||||
<p>TEMPLATE_DIMENSION_JUDGMENT</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="findings-list">
|
||||
<!-- TEMPLATE: zero or more findings -->
|
||||
<article class="finding">
|
||||
<header>
|
||||
<span class="badge badge-sev-TEMPLATE_SEVERITY">TEMPLATE_SEVERITY</span>
|
||||
<h3 class="finding-title">TEMPLATE_FINDING_TITLE</h3>
|
||||
<span class="finding-location">TEMPLATE_LOCATION</span>
|
||||
</header>
|
||||
<div class="finding-note">TEMPLATE_FINDING_NOTE</div>
|
||||
<div class="finding-fix"><strong>Fix:</strong> TEMPLATE_SUGGESTED_FIX</div>
|
||||
</article>
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<!-- TEMPLATE: one section per extra reviewer that ran (accessibility,
|
||||
adversarial, brand-conformance, etc.). Skip this block entirely if
|
||||
only the rubric walker ran. -->
|
||||
<section class="reviewer-section">
|
||||
<details>
|
||||
<summary>
|
||||
<h2>Accessibility review</h2>
|
||||
<span class="reviewer-source">TEMPLATE_REVIEWER_SOURCE_FILE</span>
|
||||
</summary>
|
||||
<div class="dim-body">
|
||||
<div class="dim-judgment">
|
||||
<p>TEMPLATE_REVIEWER_PREAMBLE</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="findings-list">
|
||||
<article class="finding">
|
||||
<header>
|
||||
<span class="badge badge-sev-TEMPLATE_SEVERITY">TEMPLATE_SEVERITY</span>
|
||||
<h3 class="finding-title">TEMPLATE_FINDING_TITLE</h3>
|
||||
<span class="finding-location">TEMPLATE_LOCATION</span>
|
||||
</header>
|
||||
<div class="finding-note">TEMPLATE_FINDING_NOTE</div>
|
||||
<div class="finding-fix"><strong>Fix:</strong> TEMPLATE_SUGGESTED_FIX</div>
|
||||
</article>
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<!-- TEMPLATE: mechanical notes — short, bulleted. Skip if there are none. -->
|
||||
<div class="mechanical">
|
||||
<h3>Mechanical notes</h3>
|
||||
<ul>
|
||||
<li>TEMPLATE_MECHANICAL_NOTE</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<footer class="report-footer">
|
||||
<div class="meta">
|
||||
<span>Rubric: TEMPLATE_RUBRIC_PATH</span>
|
||||
<span>Generated: TEMPLATE_TIMESTAMP</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
# DO NOT EDIT -- overwritten on every update.
|
||||
#
|
||||
# Workflow customization surface for bmad-ux.
|
||||
# Overrides:
|
||||
# {project-root}/_bmad/custom/bmad-ux.toml (team)
|
||||
# {project-root}/_bmad/custom/bmad-ux.user.toml (personal)
|
||||
# Merge rules: scalars override, arrays append.
|
||||
|
||||
[workflow]
|
||||
|
||||
# Steps to run before/after standard activation. Append-only.
|
||||
activation_steps_prepend = []
|
||||
activation_steps_append = []
|
||||
|
||||
# Persistent facts loaded at activation and kept in mind for the run.
|
||||
# Entries: literal sentence, `skill:NAME`, or `file:PATH` (glob ok).
|
||||
persistent_facts = [
|
||||
"file:{project-root}/**/project-context.md",
|
||||
]
|
||||
|
||||
# Runs at workflow completion. String or array of instructions.
|
||||
on_complete = ""
|
||||
|
||||
# Reference spines the distillation subagent reads to anchor shape and lean
|
||||
# discipline. Multiple examples show the spine adapting to product type
|
||||
# (single-surface mobile vs. multi-surface web, consumer vs. internal).
|
||||
# Append entries via override TOML to seed an org-specific canonical shape.
|
||||
# Each entry: `file:PATH` (or bare relative path, resolved skill-relative).
|
||||
spine_examples = [
|
||||
"assets/spine-example-mobile.md",
|
||||
"assets/spine-example-web.md",
|
||||
]
|
||||
|
||||
# HTML skeleton filled in by the validation synthesis pass.
|
||||
validation_report_template = "assets/validation-report-template.html"
|
||||
|
||||
# Run folder. design.md, .decision-log.md, .working/ (creative-tool artifacts),
|
||||
# imports/ (user-supplied screens / brand decks / Figma exports / sketches),
|
||||
# optional mockups/ and wireframes/ (promoted artifacts), optional
|
||||
# validation-report.* all land inside {ux_output_path}/{run_folder_pattern}/.
|
||||
ux_output_path = "{planning_artifacts}/ux-designs"
|
||||
run_folder_pattern = "ux-{project_name}-{date}"
|
||||
|
||||
# Creative tools registry. Collaborative renderers invoked on demand during
|
||||
# Discovery and at Finalize. Entry forms: `file:PATH`, `skill:NAME`,
|
||||
# `tool:MCP_TOOL: <directive>`, or plain text. Defaults ship for HTML color
|
||||
# themes, HTML design directions, Excalidraw wireframes (Discovery), and
|
||||
# 1:1 HTML key-screen mockups (Finalize). Working artifacts land in
|
||||
# {doc_workspace}/.working/; finalize promotes those with lasting reference
|
||||
# value to mockups/ or wireframes/. See references/creative-tools.md.
|
||||
creative_tools = [
|
||||
"file:assets/color-themes.md",
|
||||
"file:assets/design-directions.md",
|
||||
"file:assets/excalidraw-wireframe.md",
|
||||
"file:assets/key-screens.md",
|
||||
]
|
||||
|
||||
# Polish passes applied to design.md at finalize.
|
||||
# Entries: `skill:NAME`, `file:PATH`, or plain text directive.
|
||||
# Suggested order: structural → content/voice → prose mechanics.
|
||||
doc_standards = [
|
||||
"skill:bmad-editorial-review-structure",
|
||||
"skill:bmad-editorial-review-prose",
|
||||
]
|
||||
|
||||
# Information retrieval registry. Consulted on demand when the conversation
|
||||
# surfaces a matching need. Distinct from creative_tools (artifact production).
|
||||
# Example: "When researching component patterns, consult corp:design_system_search."
|
||||
external_sources = []
|
||||
|
||||
# Routes outputs beyond local files at Finalize. Returned URLs/IDs surfaced
|
||||
# to the user. Unavailable tools skipped and flagged.
|
||||
# Example: "Upload design.md to Confluence via corp:confluence_upload (space_key='DESIGN')."
|
||||
external_handoffs = []
|
||||
|
||||
# Reviewers spawned at Finalize step 4 and at Validate intent, alongside
|
||||
# the rubric walker. Entries: `skill:NAME`, `file:PATH`, or plain text.
|
||||
# Common ad-hoc add (judged by the skill): accessibility-focused reviewer
|
||||
# for consumer / regulated work.
|
||||
finalize_reviewers = []
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
# Creative Tools
|
||||
|
||||
`{workflow.creative_tools}` is a registry of collaborative renderers invoked on demand when seeing options helps the user decide. Entries follow the standard prefix convention: `skill:NAME`, `file:PATH`, `tool:MCP_TOOL_NAME: <directive>`, or plain-text directive.
|
||||
|
||||
Defaults ship for HTML color themes, HTML design directions, Excalidraw wireframes (Discovery), and 1:1 HTML key-screen mocks (Finalize). Teams append more via override TOML — Figma MCP, custom skills, prompt-based mood boards.
|
||||
|
||||
## When to invoke
|
||||
|
||||
Decision moments where a visual beats more conversation: picking color tokens, picking a visual personality among directions, sketching IA, mocking a tricky flow. Fast-path users typically skip; coaching-path users typically lean in. Read the room.
|
||||
|
||||
## Artifact handling
|
||||
|
||||
Every renderer writes to `{doc_workspace}/.working/` with a descriptive filename. `.working/` is the audit trail and survives the run. At Finalize, the facilitator walks `.working/` with the user and promotes artifacts with lasting reference value to `{doc_workspace}/mockups/` (HTML anchoring a brand or layout decision) or `{doc_workspace}/wireframes/` (Excalidraw a dev would glance at). Bar for promotion: *would a future reader of `design.md` open this?* Default is leave-in-`.working/`.
|
||||
|
||||
## Renderer contract
|
||||
|
||||
The parent passes the subagent: current `.decision-log.md`, relevant prior `.working/` captures, the user's stated intent for this pass, the output path. The subagent writes its artifact under `.working/` and returns ONLY a compact summary (file path, one line per variant, mode coverage). Parent never holds the full payload.
|
||||
|
||||
For HTML, open in browser when interactive: `python3 -c "import webbrowser, pathlib; webbrowser.open(pathlib.Path('PATH').resolve().as_uri())"`. Skip in headless.
|
||||
|
||||
## Custom entries
|
||||
|
||||
Append in `{project-root}/_bmad/custom/bmad-ux.toml` (team) or `bmad-ux.user.toml` (personal). Arrays append per BMad merge rules.
|
||||
|
||||
```toml
|
||||
[workflow]
|
||||
creative_tools = [
|
||||
"skill:acme-co:brand-mockup-renderer",
|
||||
"tool:figma__create_frame: When picking a hero direction, create a Figma frame named '{project_name} hero v{n}' and link the URL back.",
|
||||
"When picking notification copy patterns, render the candidates as phone-shaped HTML mocks under .working/notif-mock-{n}.html.",
|
||||
]
|
||||
```
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
# Headless Mode
|
||||
|
||||
Load this file when invoked headless. Follow it for the whole run.
|
||||
|
||||
## Detection
|
||||
|
||||
Headless when any of: caller sets `headless: true` (or harness equivalent); invocation is from another skill or non-interactive runner; `{workflow.activation_steps_prepend}` declares it; first message is an automation context pre-supplying inputs. Ambiguous → default interactive.
|
||||
|
||||
## Inputs
|
||||
|
||||
Free-form structured payload in the first message:
|
||||
|
||||
- `intent` — `"create"`, `"update"`, or `"validate"`. If absent, infer from the artifact set.
|
||||
- **Create**: any source spec (PRD, brief, requirements list, design-thinking output, prior UX — text, path, or URL) plus brand / platform / accessibility notes; `doc_workspace` if a specific run folder is required.
|
||||
- **Update**: existing `design.md` path (or workspace containing one) + change signal.
|
||||
- **Validate**: existing `design.md` path (or workspace). Workspace defaults to the spine's containing directory.
|
||||
|
||||
Inferences → `assumptions[]`. Gaps needing a human decision → `open_questions[]`. Do not invent persona, brand, accessibility, or scope detail.
|
||||
|
||||
Creative tools default off in headless. Caller can override; artifacts land in `.working/` and are not promoted unless the caller signals.
|
||||
|
||||
## Behavior
|
||||
|
||||
Do not ask. Do not greet. Complete the intent from what's provided, what exists in `{doc_workspace}`, or what you can discover. If intent stays ambiguous after inference, halt with `status: "blocked"` and a one-sentence `reason`.
|
||||
|
||||
`status`:
|
||||
- `"complete"` — stands on its own.
|
||||
- `"partial"` — artifact produced but `open_questions[]` non-empty or critical inputs inferred.
|
||||
- `"blocked"` — no artifact produced.
|
||||
|
||||
End with JSON matching `assets/headless-schemas.md`. `intent` reflects detected intent. Omit keys for artifacts not produced.
|
||||
|
||||
## Mode-specific overrides
|
||||
|
||||
**Update.** Apply the change. Log to `.decision-log.md` with rationale. Surface conflicts in `conflicts_with_prior_decisions[]`.
|
||||
|
||||
**Validate.** Always write both `validation-report.html` and `validation-report.md` regardless of finding count. Always include `"offer_to_update": true`. Skip the browser-open step.
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
# Validate
|
||||
|
||||
Critique an existing design spine without changing it. The synthesis pipeline below is also used at the Reviewer Gate during Create / Update Finalize.
|
||||
|
||||
## Orient
|
||||
|
||||
Subagent-extract from `.decision-log.md`, sources in frontmatter, `imports/`, `mockups/`, `wireframes/`, `design.md`. Parent assembles from extracts.
|
||||
|
||||
## Reviewer Gate
|
||||
|
||||
Rubric walker prompt:
|
||||
|
||||
> Validate `design.md` as the contract for downstream consumers (architecture, story-dev — human or AI). Can a consumer source-extract cleanly, with every reference resolving and every load-bearing decision committed? Read `{workflow.spine_examples}` first.
|
||||
>
|
||||
> **Pass 1 — mechanical coverage.** Per category: extract, then list misses with location citations. No misses = **strong**.
|
||||
>
|
||||
> 1. **Flow coverage.** Sources frontmatter → extract every UJ / requirement name. Verify each has a Key Flow with numbered steps, a named climax beat, and a failure path where applicable.
|
||||
>
|
||||
> 2. **Token completeness.** Extract every token reference in `design.md`. Verify each defined. **Color tokens missing hex (or light/dark pairs where applicable) are critical** — downstream code mirrors the spine. Platform conventions (native dynamic type, 8pt grid) may stay semantic. Contrast targets stated for load-bearing combinations.
|
||||
>
|
||||
> 3. **Component coverage.** Extract every component name used anywhere. Verify each has a Component Patterns row with real rules (anatomy, state cues, sizing — not one-word descriptions).
|
||||
>
|
||||
> 4. **State coverage.** Walk every IA surface. List states it should have (empty, cold-load, focus, error, offline, permission-denied — whichever apply). Verify each covered.
|
||||
>
|
||||
> 5. **Visual reference coverage.** List every file in `mockups/`, `wireframes/`, `imports/`. Spine links to each inline at the relevant section and names what it illustrates; spine-wins-on-conflict stated once. List orphans and unspecific references.
|
||||
>
|
||||
> **Pass 2 — judgment.** Verdict per category (*strong / adequate / thin / broken*); findings only where they add information.
|
||||
>
|
||||
> 6. **Bloat & overspecification.** Pixel specs where tokens cover it; source restatement (personas, FRs, scope); prose where a table works; sections no downstream consumer would read; decorative narrative untied to a decision.
|
||||
>
|
||||
> 7. **Inheritance discipline.** `sources` frontmatter resolves. UJ / requirement names verbatim from sources. Glossary identical across spine and sources. Component names identical across all sections within the spine.
|
||||
>
|
||||
> 8. **Shape fit.** Required default tables present (IA, Voice and Tone, Design Tokens, Component Patterns, State Patterns, Interaction Primitives, Accessibility Floor, Key Flows). Dropped defaults defensible. Required-when-applicable present where triggered (Inspiration when sources / log show reference products or rejects; Responsive when multi-surface or breakpoints). Invented sections earn their place.
|
||||
>
|
||||
> Severity = downstream impact, not fix difficulty.
|
||||
>
|
||||
> Write to `{doc_workspace}/review-rubric.md`:
|
||||
>
|
||||
> ```markdown
|
||||
> # Design Spine Review — {spine_name}
|
||||
>
|
||||
> ## Overall verdict
|
||||
> [2–3 sentences]
|
||||
>
|
||||
> ## 1. Flow coverage — [verdict]
|
||||
> [What was checked.]
|
||||
> ### Findings
|
||||
> - **[critical|high|medium|low]** [finding] (location). *Fix:* [suggestion].
|
||||
>
|
||||
> (repeat 2–8)
|
||||
>
|
||||
> ## Mechanical notes
|
||||
> [Name inconsistencies, broken cross-refs, frontmatter completeness, Mermaid syntax.]
|
||||
> ```
|
||||
>
|
||||
> Return ONLY a compact summary: overall verdict, per-section verdicts, finding counts by severity, file path.
|
||||
|
||||
The gate may dispatch `{workflow.finalize_reviewers}` and ad-hoc reviewers (accessibility for consumer / regulated). Each writes `review-{slug}.md` and returns a compact summary. Parallel.
|
||||
|
||||
## Synthesis pipeline
|
||||
|
||||
Under Validate intent, after every reviewer returns, render one consolidated report. Don't skip.
|
||||
|
||||
1. Read every `{doc_workspace}/review-*.md`.
|
||||
2. Fill `{workflow.validation_report_template}`. Grade: *Excellent* = all strong / adequate, no high / critical · *Good* = ≤1 thin, no critical · *Fair* = multiple thin or any high · *Poor* = any broken or critical. Set matching `grade-*` class. Synthesis paragraph lifts the rubric's overall verdict; add a second if extra reviewers shift the picture. One section per rubric category (open if thin / broken), one per extra reviewer (closed, adversarial voice preserved).
|
||||
3. Write `{doc_workspace}/validation-report.html`.
|
||||
4. Write the markdown twin `{doc_workspace}/validation-report.md` — same content grouped by severity.
|
||||
5. Open HTML: `python3 -c "import webbrowser, pathlib; webbrowser.open(pathlib.Path('{doc_workspace}/validation-report.html').resolve().as_uri())"`. Skip headless.
|
||||
|
||||
Re-running overwrites the consolidated report; individual `review-*.md` files persist.
|
||||
|
||||
## Markdown twin shape
|
||||
|
||||
```markdown
|
||||
# Validation Report — {spine_name}
|
||||
|
||||
- **Spine:** `{spine_path}`
|
||||
- **Run at:** {ISO timestamp}
|
||||
- **Grade:** {Excellent | Good | Fair | Poor}
|
||||
|
||||
## Overall verdict
|
||||
{synthesis paragraphs}
|
||||
|
||||
## Category verdicts
|
||||
- Flow coverage — {verdict}
|
||||
- Token completeness — {verdict}
|
||||
- Component coverage — {verdict}
|
||||
- State coverage — {verdict}
|
||||
- Visual reference coverage — {verdict}
|
||||
- Bloat & overspecification — {verdict}
|
||||
- Inheritance discipline — {verdict}
|
||||
- Shape fit — {verdict}
|
||||
|
||||
## Findings by severity
|
||||
|
||||
### Critical (n)
|
||||
**[Category or Reviewer]** — Title (§ location)
|
||||
{Note}
|
||||
Fix: {suggested fix}
|
||||
|
||||
### High (n) / Medium (n) / Low (n)
|
||||
...
|
||||
|
||||
## Reviewer files
|
||||
- `review-rubric.md`
|
||||
- ...
|
||||
```
|
||||
|
||||
## Close
|
||||
|
||||
Surface artifact paths. Always offer to roll findings into an Update.
|
||||
Loading…
Reference in New Issue