175 lines
7.3 KiB
Markdown
175 lines
7.3 KiB
Markdown
# v0 UX/UI Architect User Guide
|
|
|
|
## Overview
|
|
|
|
The v0 UX/UI Architect is a specialized persona in the BMAD Method designed to bring rapid visual design generation and component implementation capabilities to your development workflow. This persona embodies the power of modern AI-driven design tools like v0, enabling you to transform simple prompts into stunning, functional frontend implementations.
|
|
|
|
## Available Personas
|
|
|
|
### Veronica (Web-based)
|
|
- **Environment**: Web-based AI platforms (ChatGPT, Gemini, Claude)
|
|
- **Strengths**: Design planning, specification creation, visual concept generation
|
|
- **Best for**: Initial design exploration, creating comprehensive specifications, generating design documentation
|
|
|
|
### Victor (IDE-based)
|
|
- **Environment**: IDE environments (Cursor AI, Cline, Claude Code, Roocode)
|
|
- **Strengths**: Direct code implementation, real-time development, file system integration
|
|
- **Best for**: Component implementation, rapid prototyping, iterative development
|
|
|
|
## When to Use the v0 UX/UI Architect
|
|
|
|
### Perfect Use Cases:
|
|
- **Rapid Prototyping**: Need to quickly visualize a concept or feature
|
|
- **Component Creation**: Building reusable UI components for your design system
|
|
- **Design System Development**: Creating consistent, scalable component libraries
|
|
- **Frontend Implementation**: Converting designs into production-ready code
|
|
- **Visual Exploration**: Exploring different design directions for a feature
|
|
|
|
### Integration Points in BMAD Workflow:
|
|
1. **After Analyst Phase**: Transform project briefs into visual concepts
|
|
2. **During PM Phase**: Create UI mockups to support PRD development
|
|
3. **Parallel to Architecture**: Ensure design feasibility with technical constraints
|
|
4. **Before Development**: Provide ready-to-implement component specifications
|
|
|
|
## Web Environment Usage (Veronica)
|
|
|
|
### Activation Commands:
|
|
- "I need Veronica to help with UI design"
|
|
- "Activate the v0 UX/UI Architect"
|
|
- "I want to create some frontend components"
|
|
|
|
### Sample Prompts:
|
|
```
|
|
"Veronica, I need you to create a modern dashboard component for a SaaS application.
|
|
It should include a sidebar navigation, main content area, and header with user profile."
|
|
|
|
"Can you help me design a product card component for an e-commerce site?
|
|
It needs to show product image, title, price, and add to cart button."
|
|
|
|
"I need a complete design system for a fintech application.
|
|
Can you create the core components with consistent styling?"
|
|
```
|
|
|
|
### Expected Outputs:
|
|
- Detailed component specifications
|
|
- Visual design descriptions
|
|
- Implementation guidelines
|
|
- Accessibility considerations
|
|
- Integration instructions
|
|
|
|
## IDE Environment Usage (Victor)
|
|
|
|
### Setup Requirements:
|
|
1. Copy the `bmad-agent` folder to your project root
|
|
2. Ensure your IDE can access the persona file: `bmad-agent/personas/v0-ux-ui-architect.ide.md`
|
|
3. Have your preferred frontend framework and styling system ready
|
|
|
|
### Activation in IDEs:
|
|
|
|
#### Cursor AI:
|
|
1. Open the persona file in Cursor
|
|
2. Use Cursor's chat feature: "Activate Victor, the v0 UX/UI Architect"
|
|
3. Provide your component requirements
|
|
|
|
#### Cline (Claude Dev):
|
|
1. Reference the persona file in your chat
|
|
2. Ask Cline to embody the v0 UX/UI Architect persona
|
|
3. Specify your implementation needs
|
|
|
|
#### Claude Code:
|
|
1. Load the persona file as context
|
|
2. Request the v0 UX/UI Architect capabilities
|
|
3. Provide detailed component specifications
|
|
|
|
#### Roocode:
|
|
1. Import the persona configuration
|
|
2. Activate the v0 UX/UI Architect mode
|
|
3. Begin rapid prototyping workflow
|
|
|
|
### Sample IDE Prompts:
|
|
```
|
|
"Victor, I need you to implement a responsive navigation component using React and Tailwind CSS.
|
|
It should work on mobile and desktop with a hamburger menu for mobile."
|
|
|
|
"Can you create a data table component with sorting, filtering, and pagination?
|
|
Use TypeScript and make it reusable across the application."
|
|
|
|
"I need a complete login form with validation, error handling, and accessibility features.
|
|
Implement it using our existing design system tokens."
|
|
```
|
|
|
|
### Expected Outputs:
|
|
- Complete component files (JSX/TSX, CSS, tests)
|
|
- Updated imports and exports
|
|
- Integration with existing codebase
|
|
- Documentation and usage examples
|
|
|
|
## Best Practices
|
|
|
|
### Effective Prompting:
|
|
1. **Be Specific**: Include details about functionality, styling, and technical requirements
|
|
2. **Provide Context**: Mention your tech stack, design system, and any constraints
|
|
3. **Include Examples**: Reference existing designs or components you like
|
|
4. **Specify Scope**: Clarify if you want just the design, just the code, or both
|
|
|
|
### Quality Assurance:
|
|
- Always run the v0 Component Quality Checklist after component creation
|
|
- Test components in multiple browsers and devices
|
|
- Validate accessibility with screen readers and keyboard navigation
|
|
- Ensure components integrate properly with your existing design system
|
|
|
|
### Workflow Integration:
|
|
1. **Start with Requirements**: Use output from Analyst or PM phases
|
|
2. **Create Specifications**: Generate detailed component specs with Veronica
|
|
3. **Implement Components**: Use Victor for direct code implementation
|
|
4. **Quality Check**: Run through the component quality checklist
|
|
5. **Document**: Create usage examples and integration guides
|
|
|
|
## Troubleshooting
|
|
|
|
### Common Issues:
|
|
|
|
**"The persona doesn't understand my tech stack"**
|
|
- Solution: Provide more specific technical context in your prompts
|
|
- Include package.json dependencies or framework versions
|
|
|
|
**"Generated components don't match our design system"**
|
|
- Solution: Provide design system documentation or existing component examples
|
|
- Reference your design tokens, color palette, and typography scale
|
|
|
|
**"Code doesn't work in my environment"**
|
|
- Solution: Specify your exact setup (React version, CSS framework, build tools)
|
|
- Ask for environment-specific implementation
|
|
|
|
**"Components aren't accessible"**
|
|
- Solution: Explicitly request accessibility features in your prompts
|
|
- Run the accessibility checklist and ask for improvements
|
|
|
|
### Getting Help:
|
|
- Reference the component quality checklist for systematic troubleshooting
|
|
- Use the BMAD Method's other personas (Architect, PM) for additional context
|
|
- Check the example projects for reference implementations
|
|
|
|
## Advanced Usage
|
|
|
|
### Design System Creation:
|
|
1. Start with core tokens (colors, typography, spacing)
|
|
2. Create atomic components (buttons, inputs, labels)
|
|
3. Build molecular components (forms, cards, navigation)
|
|
4. Develop organism-level components (headers, sidebars, layouts)
|
|
5. Document everything with usage examples
|
|
|
|
### Cross-Environment Workflow:
|
|
1. **Planning Phase**: Use Veronica in web environment for initial design exploration
|
|
2. **Specification Phase**: Create detailed component specs and documentation
|
|
3. **Implementation Phase**: Switch to Victor in IDE for direct code implementation
|
|
4. **Iteration Phase**: Use IDE environment for rapid refinement and testing
|
|
|
|
### Integration with Other BMAD Personas:
|
|
- **With Analyst**: Transform project briefs into visual concepts
|
|
- **With PM**: Create UI mockups to support feature requirements
|
|
- **With Architect**: Ensure technical feasibility of design decisions
|
|
- **With PO**: Validate component specifications against user stories
|
|
|
|
This comprehensive approach ensures that the v0 UX/UI Architect becomes a powerful tool in your development workflow, capable of handling everything from initial design exploration to final implementation across multiple environments.
|