feat(create-ux-design): integrate UI/UX Pro Max KB for design recommendations
- Add KB search integration to step-08 (color, typography domains) - Add KB search integration to step-12 (ux domain with severity sorting) - Add Component Resources section to ux-design-template - Include fallback handling for graceful degradation Closes #1137
This commit is contained in:
azuma520
parent
e59c7b79ed
commit
8835b0ef6d
|
|
@ -29,8 +29,8 @@ This step will generate content and present choices:
|
|||
|
||||
## PROTOCOL INTEGRATION:
|
||||
|
||||
- When 'A' selected: Execute {project-root}/\_bmad/core/tasks/advanced-elicitation.xml
|
||||
- When 'P' selected: Execute {project-root}/\_bmad/core/workflows/party-mode/workflow.md
|
||||
- When 'A' selected: Execute {project-root}/.bmad/core/tasks/advanced-elicitation.xml
|
||||
- When 'P' selected: Execute {project-root}/.bmad/core/workflows/party-mode/workflow.md
|
||||
- PROTOCOLS always return to this step's A/P/C menu
|
||||
- User accepts/rejects protocol changes before proceeding
|
||||
|
||||
|
|
@ -55,6 +55,103 @@ Check for existing brand requirements:
|
|||
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."
|
||||
|
||||
### 1.5 Knowledge Base Integration (Auto)
|
||||
|
||||
Before generating design options, automatically query the UI/UX Pro Max knowledge base for professional recommendations.
|
||||
|
||||
#### Prerequisite: Extract Variables from Frontmatter
|
||||
|
||||
Before executing searches, extract the following from the current document's frontmatter or previous step context:
|
||||
|
||||
- `{industry}` - From frontmatter field `industry` or `productType` (e.g., "SaaS", "E-commerce")
|
||||
- `{style_keywords}` - From frontmatter field `style`, `visualStyle`, or `emotionalGoals` (e.g., "modern minimal")
|
||||
|
||||
**If variables are not available:**
|
||||
- Use project name or product description as fallback search terms
|
||||
- Or ask user: "What industry/style keywords should I use for design recommendations?"
|
||||
|
||||
#### Color Palette Search
|
||||
|
||||
Execute the following command using extracted context:
|
||||
|
||||
```bash
|
||||
python {project-root}/../.shared/ui-ux-pro-max/scripts/search.py "{industry} {style_keywords}" --domain color --json
|
||||
```
|
||||
|
||||
> **Note:** Path assumes standard BMAD BMM structure. If `.shared` is elsewhere, please update path in search command.
|
||||
|
||||
**Parse JSON Output Fields:**
|
||||
- `Primary (Hex)` - Primary brand color
|
||||
- `Secondary (Hex)` - Secondary accent color
|
||||
- `CTA (Hex)` - Call-to-action button color
|
||||
- `Background (Hex)` - Background color recommendation
|
||||
- `Text (Hex)` - Text color for readability
|
||||
- `Border (Hex)` - Border/divider color
|
||||
|
||||
**Present to User:**
|
||||
"🎨 **Knowledge Base Color Recommendations:**
|
||||
|
||||
Based on your project's industry ({industry}) and style ({style_keywords}), here are professional color palette suggestions:
|
||||
|
||||
| Role | Hex Code | Preview |
|
||||
|------|----------|---------|
|
||||
| Primary | {Primary (Hex)} | ██████ |
|
||||
| Secondary | {Secondary (Hex)} | ██████ |
|
||||
| CTA | {CTA (Hex)} | ██████ |
|
||||
| Background | {Background (Hex)} | ██████ |
|
||||
| Text | {Text (Hex)} | ██████ |
|
||||
| Border | {Border (Hex)} | ██████ |
|
||||
|
||||
**What would you like to do with these recommendations?**
|
||||
[1] Accept - Use these as the starting point
|
||||
[2] Modify - Adjust these colors to your preference
|
||||
[3] Skip - Generate fresh options without these suggestions"
|
||||
|
||||
#### Typography Search
|
||||
|
||||
After color recommendations, execute typography search:
|
||||
|
||||
```bash
|
||||
python {project-root}/../.shared/ui-ux-pro-max/scripts/search.py "{style_keywords}" --domain typography --json
|
||||
```
|
||||
|
||||
**Parse JSON Output Fields:**
|
||||
- `Font Pairing Name` - Name of the font pairing (e.g., "Geometric Modern")
|
||||
- `Google Fonts URL` - Ready-to-use Google Fonts import link
|
||||
- `CSS Import` - CSS @import statement
|
||||
- `Tailwind Config` - Tailwind CSS configuration snippet
|
||||
- `Notes` - Additional usage notes
|
||||
|
||||
**Present to User:**
|
||||
"📝 **Knowledge Base Typography Recommendations:**
|
||||
|
||||
**{Font Pairing Name}**
|
||||
|
||||
| Property | Value |
|
||||
|----------|-------|
|
||||
| Google Fonts | {Google Fonts URL} |
|
||||
| CSS Import | `{CSS Import}` |
|
||||
| Tailwind Config | ```{Tailwind Config}``` |
|
||||
|
||||
*{Notes}*
|
||||
|
||||
**What would you like to do with these recommendations?**
|
||||
[1] Accept - Use these font recommendations
|
||||
[2] Modify - Adjust font choices
|
||||
[3] Skip - Define typography from scratch"
|
||||
|
||||
#### Fallback Handling
|
||||
|
||||
If the search command fails, returns no results, or variables are unavailable:
|
||||
|
||||
"ℹ️ **Note:** Knowledge base search returned no specific recommendations for your criteria. Proceeding with standard design exploration.
|
||||
|
||||
This is normal for unique combinations - we'll create custom options tailored to your needs."
|
||||
|
||||
**Then proceed to Generate Color Theme Options normally.**
|
||||
|
||||
---
|
||||
|
||||
### 2. Generate Color Theme Options (If no brand guidelines)
|
||||
|
||||
Create visual exploration opportunities:
|
||||
|
|
@ -168,7 +265,7 @@ Show the generated visual foundation content and present choices:
|
|||
|
||||
#### If 'A' (Advanced Elicitation):
|
||||
|
||||
- Execute {project-root}/\_bmad/core/tasks/advanced-elicitation.xml with the current visual foundation content
|
||||
- Execute {project-root}/.bmad/core/tasks/advanced-elicitation.xml with the current visual foundation content
|
||||
- Process the enhanced visual insights that come back
|
||||
- Ask user: "Accept these improvements to the visual foundation? (y/n)"
|
||||
- If yes: Update content with improvements, then return to A/P/C menu
|
||||
|
|
@ -176,7 +273,7 @@ Show the generated visual foundation content and present choices:
|
|||
|
||||
#### If 'P' (Party Mode):
|
||||
|
||||
- Execute {project-root}/\_bmad/core/workflows/party-mode/workflow.md with the current visual foundation
|
||||
- Execute {project-root}/.bmad/core/workflows/party-mode/workflow.md 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
|
||||
|
|
@ -195,6 +292,8 @@ When user selects 'C', append the content directly to the document using the str
|
|||
## SUCCESS METRICS:
|
||||
|
||||
✅ Brand guidelines assessed and incorporated if available
|
||||
✅ Knowledge base integration executed before color generation
|
||||
✅ User presented with Accept/Modify/Skip choices for KB recommendations
|
||||
✅ Color system established with accessibility consideration
|
||||
✅ Typography system defined with appropriate hierarchy
|
||||
✅ Spacing and layout foundation created
|
||||
|
|
|
|||
|
|
@ -29,8 +29,8 @@ This step will generate content and present choices:
|
|||
|
||||
## PROTOCOL INTEGRATION:
|
||||
|
||||
- When 'A' selected: Execute {project-root}/\_bmad/core/tasks/advanced-elicitation.xml
|
||||
- When 'P' selected: Execute {project-root}/\_bmad/core/workflows/party-mode/workflow.md
|
||||
- When 'A' selected: Execute {project-root}/.bmad/core/tasks/advanced-elicitation.xml
|
||||
- When 'P' selected: Execute {project-root}/.bmad/core/workflows/party-mode/workflow.md
|
||||
- PROTOCOLS always return to this step's A/P/C menu
|
||||
- User accepts/rejects protocol changes before proceeding
|
||||
|
||||
|
|
@ -47,6 +47,137 @@ Establish UX consistency patterns for common situations like buttons, forms, nav
|
|||
|
||||
## UX PATTERNS SEQUENCE:
|
||||
|
||||
### 0.5 Knowledge Base Integration (Auto)
|
||||
|
||||
Before defining patterns, automatically query the UI/UX Pro Max knowledge base for UX best practices and accessibility guidelines.
|
||||
|
||||
#### Prerequisite: Extract Variables from Context
|
||||
|
||||
Extract the following from frontmatter or previous step context:
|
||||
|
||||
- `{product_type}` - From frontmatter field `productCategory` OR `projectType` OR `industry` (e.g., "Dashboard", "E-commerce", "Mobile App")
|
||||
- `{pattern_focus}` - From user journey analysis in step 10 (e.g., "forms", "navigation", "checkout")
|
||||
|
||||
**Variable Extraction Priority:**
|
||||
1. Check frontmatter for `productCategory` → use if exists
|
||||
2. Check frontmatter for `projectType` → use if exists
|
||||
3. Check frontmatter for `industry` → use if exists
|
||||
4. If none found → ask user: "What type of product is this? (e.g., Dashboard, E-commerce, SaaS)"
|
||||
|
||||
#### General UX Best Practices Search
|
||||
|
||||
Execute the following command for universal UX guidelines:
|
||||
|
||||
```bash
|
||||
python {project-root}/../.shared/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux --json
|
||||
```
|
||||
|
||||
> **Note:** Path assumes standard BMAD BMM structure. If `.shared` is elsewhere, please update path in search command.
|
||||
|
||||
**Parse JSON Output Fields:**
|
||||
- `Category` - Pattern category (e.g., "Animation", "Forms", "Navigation")
|
||||
- `Issue` - Specific issue being addressed
|
||||
- `Platform` - Target platform (Web, iOS, Android, All)
|
||||
- `Description` - Detailed explanation of the issue
|
||||
- `Do` - Recommended practice
|
||||
- `Don't` - Anti-pattern to avoid
|
||||
- `Severity` - Priority level (High, Medium, Low)
|
||||
- `Code Example Good` - Example of correct implementation
|
||||
- `Code Example Bad` - Example of incorrect implementation
|
||||
|
||||
**Sorting Algorithm (MUST follow exactly):**
|
||||
1. Parse all items from JSON `results` array
|
||||
2. Assign numeric priority: High=1, Medium=2, Low=3
|
||||
3. Sort by numeric priority (ascending = High first)
|
||||
4. Within same severity, maintain original JSON order
|
||||
5. Present sorted results in table
|
||||
|
||||
**Present to User:**
|
||||
"📋 **Knowledge Base UX Best Practices:**
|
||||
|
||||
Based on universal UX and accessibility guidelines, here are recommendations to consider:
|
||||
|
||||
| Severity | Platform | Category | Issue | Description | ✅ Do | ❌ Don't |
|
||||
|----------|----------|----------|-------|-------------|-------|---------|
|
||||
| 🔴 High | {Platform} | {Category} | {Issue} | {Description} | {Do} | {Don't} |
|
||||
| 🟡 Medium | {Platform} | {Category} | {Issue} | {Description} | {Do} | {Don't} |
|
||||
| 🟢 Low | {Platform} | {Category} | {Issue} | {Description} | {Do} | {Don't} |
|
||||
|
||||
**Code Examples:**
|
||||
```
|
||||
✅ Good: {Code Example Good}
|
||||
❌ Bad: {Code Example Bad}
|
||||
```
|
||||
|
||||
**What would you like to do with these recommendations?**
|
||||
[1] Accept all - Include these in our pattern definitions
|
||||
[2] Select specific - Choose which recommendations to include
|
||||
[3] Skip - Define patterns without these suggestions"
|
||||
|
||||
**Handle User Selection:**
|
||||
|
||||
- **If user selects [1] Accept all:**
|
||||
- Store ALL Do/Don't pairs as reference for pattern definition
|
||||
- Prefix each subsequent pattern with: "(KB: {Issue})" to show origin
|
||||
- Proceed to Product-Specific Search
|
||||
|
||||
- **If user selects [2] Select specific:**
|
||||
- Ask: "Enter recommendation numbers to include (e.g., 1,3,5):"
|
||||
- Store only selected recommendations
|
||||
- Proceed to Product-Specific Search
|
||||
|
||||
- **If user selects [3] Skip:**
|
||||
- Do not store KB recommendations
|
||||
- Proceed to Product-Specific Search
|
||||
|
||||
#### Product-Specific UX Search
|
||||
|
||||
After general guidelines, search for product-specific patterns:
|
||||
|
||||
```bash
|
||||
python {project-root}/../.shared/ui-ux-pro-max/scripts/search.py "{product_type}" --domain ux --json
|
||||
```
|
||||
|
||||
**Present to User:**
|
||||
"🎯 **Product-Specific UX Recommendations ({product_type}):**
|
||||
|
||||
| Severity | Platform | Issue | Description | ✅ Do | ❌ Don't |
|
||||
|----------|----------|-------|-------------|-------|---------|
|
||||
| {Severity} | {Platform} | {Issue} | {Description} | {Do} | {Don't} |
|
||||
|
||||
These recommendations are tailored for {product_type} applications.
|
||||
|
||||
**Include these in our pattern definitions?**
|
||||
[1] Yes, include all
|
||||
[2] Select specific ones
|
||||
[3] Skip"
|
||||
|
||||
**Handle User Selection:**
|
||||
|
||||
- **If user selects [1] Yes, include all:**
|
||||
- Merge with previously accepted recommendations
|
||||
- Proceed to Identify Pattern Categories
|
||||
|
||||
- **If user selects [2] Select specific ones:**
|
||||
- Ask: "Enter recommendation numbers to include (e.g., 1,2):"
|
||||
- Merge selected with previously accepted recommendations
|
||||
- Proceed to Identify Pattern Categories
|
||||
|
||||
- **If user selects [3] Skip:**
|
||||
- Proceed to Identify Pattern Categories with only general recommendations (if any)
|
||||
|
||||
#### Fallback Handling
|
||||
|
||||
If the search command fails or returns no results:
|
||||
|
||||
"ℹ️ **Note:** Knowledge base search returned no specific recommendations for your criteria. Proceeding with collaborative pattern definition.
|
||||
|
||||
We'll define patterns based on your product's unique needs."
|
||||
|
||||
**Then proceed to Identify Pattern Categories normally.**
|
||||
|
||||
---
|
||||
|
||||
### 1. Identify Pattern Categories
|
||||
|
||||
Determine which patterns need definition for your product:
|
||||
|
|
@ -181,7 +312,7 @@ Show the generated UX patterns content and present choices:
|
|||
|
||||
#### If 'A' (Advanced Elicitation):
|
||||
|
||||
- Execute {project-root}/\_bmad/core/tasks/advanced-elicitation.xml with the current UX patterns content
|
||||
- Execute {project-root}/.bmad/core/tasks/advanced-elicitation.xml with the current UX patterns content
|
||||
- Process the enhanced pattern insights that come back
|
||||
- Ask user: "Accept these improvements to the UX patterns? (y/n)"
|
||||
- If yes: Update content with improvements, then return to A/P/C menu
|
||||
|
|
@ -189,7 +320,7 @@ Show the generated UX patterns content and present choices:
|
|||
|
||||
#### If 'P' (Party Mode):
|
||||
|
||||
- Execute {project-root}/\_bmad/core/workflows/party-mode/workflow.md with the current UX patterns
|
||||
- Execute {project-root}/.bmad/core/workflows/party-mode/workflow.md 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
|
||||
|
|
@ -207,6 +338,9 @@ When user selects 'C', append the content directly to the document using the str
|
|||
|
||||
## SUCCESS METRICS:
|
||||
|
||||
✅ Knowledge base queried for general UX and accessibility guidelines
|
||||
✅ Product-specific UX recommendations presented (sorted by severity)
|
||||
✅ User given choice to accept/select/skip KB recommendations
|
||||
✅ Critical pattern categories identified and prioritized
|
||||
✅ Consistency patterns clearly defined and documented
|
||||
✅ Patterns integrated with chosen design system
|
||||
|
|
@ -225,6 +359,11 @@ When user selects 'C', append the content directly to the document using the str
|
|||
❌ Not presenting A/P/C menu after content generation
|
||||
❌ Appending content without user selecting 'C'
|
||||
|
||||
❌ **KB INTEGRATION**: Not querying knowledge base before pattern definition
|
||||
❌ **KB INTEGRATION**: Ignoring user's Accept/Select/Skip choice
|
||||
❌ **KB INTEGRATION**: Not sorting results by severity (High → Medium → Low)
|
||||
❌ **KB INTEGRATION**: Missing Platform or Description fields in output table
|
||||
|
||||
❌ **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,6 +1,9 @@
|
|||
---
|
||||
stepsCompleted: []
|
||||
inputDocuments: []
|
||||
inputDocuments: null
|
||||
componentLibrary: ""
|
||||
effectsLibrary: ""
|
||||
referenceSites: null
|
||||
---
|
||||
|
||||
# UX Design Specification {{project_name}}
|
||||
|
|
@ -10,4 +13,15 @@ inputDocuments: []
|
|||
|
||||
---
|
||||
|
||||
## Component Resources
|
||||
|
||||
| Category | Library / Resource | Notes |
|
||||
|----------|-------------------|-------|
|
||||
| **Base UI Library** | *(e.g., shadcn/ui, Radix, Chakra)* | |
|
||||
| **Effects Library** | *(e.g., Framer Motion, GSAP)* | |
|
||||
| **Icon Set** | *(e.g., Lucide, Heroicons)* | |
|
||||
| **Reference Sites** | *(e.g., dribbble.com/xyz)* | |
|
||||
|
||||
---
|
||||
|
||||
<!-- UX design content will be appended sequentially through collaborative workflow steps -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue