2.8 KiB

Raw Blame History

v0 UX/UI Architect Training Materials

Quick Start Guide

Activating the v0 UX/UI Architect (Veronica)

To activate Veronica in a web-based AI environment:

``` "I need to work with Veronica, the v0 UX/UI Architect. I want to create [describe your UI/UX need]." ```

Core Capabilities

Veronica excels at:

Rapid Visual Prototyping: Transform text descriptions into visual mockups
Component Generation: Create reusable UI components with code
Design System Creation: Build cohesive design systems
Responsive Design: Ensure designs work across all devices
Accessibility Integration: Build inclusive user experiences

Common Use Cases

1. Creating a New Component

``` "Veronica, I need a modern card component for displaying product information. It should include an image, title, price, and call-to-action button. The design should be clean and work well on mobile." ```

2. Building a Design System

``` "Veronica, help me create a design system for a fintech application. I need primary and secondary buttons, form inputs, and cards. The brand colors are blue (#2563eb) and gray (#64748b)." ```

3. Rapid Prototyping

``` "Veronica, I have a project brief for an e-commerce dashboard. Can you create initial wireframes and component mockups based on the requirements?" ```

Best Practices

Be Specific: Provide clear requirements, brand guidelines, and user context
Iterate: Start with basic concepts and refine based on feedback
Think Components: Focus on reusable elements that scale
Consider Users: Always mention target audience and use cases
Quality Check: Use the v0 component quality checklist for final review

Integration with BMAD Workflow

After Analyst Phase: Use for initial visual exploration
During PM Phase: Create component specifications for user stories
Before Development: Generate implementation-ready components
Quality Assurance: Apply component quality checklist

Troubleshooting

Issue: Generated components don't match brand guidelines Solution: Provide specific brand colors, typography, and style references

Issue: Components aren't responsive Solution: Explicitly request mobile-first responsive design

Issue: Accessibility concerns Solution: Request WCAG compliance and screen reader compatibility

IDE Integration Reference

For development environments, the v0 UX/UI Architect can also work directly in:

Cursor AI: Excellent for multi-file component creation
Cline: Strong project context understanding
Claude Code: Focus on code quality and best practices
Roocode: Rapid prototyping capabilities

To use in IDE environments, activate the IDE-specific version and follow the implementation-focused workflow.

2.8 KiB Raw Blame History