178 lines
6.6 KiB
Markdown
178 lines
6.6 KiB
Markdown
# Training Guide: Using the v0 UX/UI Architect
|
|
|
|
This guide will help you effectively use the v0 UX/UI Architect persona in your projects, whether in web-based AI environments or directly in your IDE.
|
|
|
|
## Introduction
|
|
|
|
The v0 UX/UI Architect is a specialized persona within the BMAD Method that excels at:
|
|
|
|
1. Transforming requirements into visual designs and frontend implementations
|
|
2. Creating consistent, accessible, and responsive components
|
|
3. Building and maintaining design systems
|
|
4. Generating production-ready code
|
|
|
|
This persona comes in two variants:
|
|
- **Web-based v0 UX/UI Architect (Veronica)**: For planning, specification, and initial design generation
|
|
- **IDE-based v0 UX/UI Architect (Victor)**: For direct implementation in development environments
|
|
|
|
## When to Use the v0 UX/UI Architect
|
|
|
|
The v0 UX/UI Architect is most valuable in these scenarios:
|
|
|
|
- **Early Project Phase**: When defining the visual language and component architecture
|
|
- **Design System Creation**: When establishing design tokens, patterns, and components
|
|
- **Rapid Prototyping**: When you need to quickly visualize concepts
|
|
- **Component Implementation**: When building out the frontend codebase
|
|
- **Design Refinement**: When iterating on existing designs
|
|
|
|
## How to Activate the v0 UX/UI Architect
|
|
|
|
### Web-based Environment (ChatGPT, Gemini, etc.)
|
|
|
|
1. Start a new conversation
|
|
2. Use the command: `/load-v0 UX/UI Architect`
|
|
3. The persona will introduce itself as Veronica
|
|
4. Choose a task:
|
|
- `Rapid Prototype From Brief`
|
|
- `Create Design System Components`
|
|
|
|
### IDE Environment (Cursor, Cline, etc.)
|
|
|
|
1. Open your project in your preferred IDE
|
|
2. Access the AI assistant feature
|
|
3. Use the prompt: "I want to work with the v0 UX/UI IDE Architect from the BMAD Method"
|
|
4. The persona will introduce itself as Victor
|
|
5. Choose a task:
|
|
- `Implement Components in IDE`
|
|
- `Create Design System Components`
|
|
|
|
## Crafting Effective Prompts
|
|
|
|
The quality of your output depends significantly on your prompts. Here are guidelines for crafting effective prompts:
|
|
|
|
### Basic Structure
|
|
|
|
\`\`\`
|
|
I need [component/design/system] for [project type] with [specific requirements].
|
|
The brand values are [values]. The target audience is [audience].
|
|
[Additional context or constraints]
|
|
\`\`\`
|
|
|
|
### Example Prompts
|
|
|
|
#### For Design System Creation:
|
|
|
|
\`\`\`
|
|
I need a design system for a healthcare application focused on elderly users.
|
|
The brand values are trustworthy, accessible, and compassionate.
|
|
The application needs to be extremely accessible, with large touch targets
|
|
and high contrast. Please create the color system, typography, spacing,
|
|
and core components that would form this design system.
|
|
\`\`\`
|
|
|
|
#### For Component Creation:
|
|
|
|
\`\`\`
|
|
I need a patient information card component for our healthcare app.
|
|
It should display the patient's name, photo, key health metrics,
|
|
upcoming appointments, and medication schedule. It needs to be
|
|
scannable by busy healthcare providers and should include
|
|
appropriate actions like "View Details" and "Contact Patient."
|
|
Please create this component following our existing design system.
|
|
\`\`\`
|
|
|
|
#### For IDE Implementation:
|
|
|
|
\`\`\`
|
|
I need to implement a responsive navigation system for our React application.
|
|
It should include a desktop horizontal menu that collapses to a hamburger
|
|
menu on mobile. The navigation should include dropdown support for nested
|
|
items, highlight the current page, and be fully keyboard accessible.
|
|
Please implement this using our existing Tailwind setup.
|
|
\`\`\`
|
|
|
|
## Working with the v0 UX/UI Architect
|
|
|
|
### Best Practices
|
|
|
|
1. **Start with clear requirements**: The more specific you are, the better the results
|
|
2. **Provide visual references**: Link to examples or describe existing designs you like
|
|
3. **Specify technical constraints**: Mention frameworks, libraries, or limitations
|
|
4. **Iterate incrementally**: Start with core components, then build more complex ones
|
|
5. **Use the quality checklist**: Ensure all components meet the quality standards
|
|
|
|
### Common Workflows
|
|
|
|
#### Design System Creation Workflow
|
|
|
|
1. Define brand values and target audience
|
|
2. Request design tokens (colors, typography, spacing, etc.)
|
|
3. Request core component designs (buttons, inputs, cards, etc.)
|
|
4. Request component documentation
|
|
5. Implement components in code
|
|
|
|
#### Component Implementation Workflow
|
|
|
|
1. Define component requirements and behavior
|
|
2. Request component design and variations
|
|
3. Review and provide feedback
|
|
4. Request implementation code
|
|
5. Test and refine the component
|
|
|
|
## Integration with Other BMAD Personas
|
|
|
|
The v0 UX/UI Architect works best when integrated with other BMAD personas:
|
|
|
|
- **After Analyst (Mary)**: Takes the project brief to create initial visual concepts
|
|
- **With PM (John)**: Collaborates on feature prioritization and user stories
|
|
- **With Architect (Fred)**: Ensures technical feasibility of designs
|
|
- **Before PO (Sarah)**: Provides component specifications for story creation
|
|
- **With Frontend Dev (Ellyn)**: Collaborates on implementation details
|
|
|
|
## Troubleshooting
|
|
|
|
### Common Issues and Solutions
|
|
|
|
1. **Designs don't match brand guidelines**
|
|
- Solution: Provide more specific brand values and examples
|
|
|
|
2. **Components aren't accessible**
|
|
- Solution: Explicitly request accessibility features and testing
|
|
|
|
3. **Code doesn't match your tech stack**
|
|
- Solution: Specify your frameworks and libraries upfront
|
|
|
|
4. **Designs aren't innovative enough**
|
|
- Solution: Ask for multiple design directions or reference cutting-edge examples
|
|
|
|
5. **Implementation is too complex**
|
|
- Solution: Request simpler alternatives or component breakdown
|
|
|
|
## Advanced Techniques
|
|
|
|
### Design System Evolution
|
|
|
|
Use the v0 UX/UI Architect to evolve your design system over time:
|
|
|
|
1. Start with core components and tokens
|
|
2. Add more complex components as needed
|
|
3. Document usage patterns and guidelines
|
|
4. Create component variants for different contexts
|
|
5. Establish a versioning strategy
|
|
|
|
### Multi-Platform Design
|
|
|
|
For projects targeting multiple platforms:
|
|
|
|
1. Define shared design principles
|
|
2. Create platform-specific component variations
|
|
3. Maintain consistency while respecting platform conventions
|
|
4. Use responsive design techniques for web platforms
|
|
5. Document platform-specific guidelines
|
|
|
|
## Conclusion
|
|
|
|
The v0 UX/UI Architect is a powerful tool for creating high-quality frontend implementations. By following this guide, you'll be able to effectively leverage this persona in your projects, whether you're working in a web-based AI environment or directly in your IDE.
|
|
|
|
Remember that the best results come from clear communication, iterative feedback, and a good understanding of your project's requirements and constraints.
|