BMAD-METHOD/docs/v0-ux-ui-architect-user-guide.md

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.