193 lines
6.1 KiB
Markdown
193 lines
6.1 KiB
Markdown
# v0 UX/UI Architect Integration Guide
|
|
|
|
## Overview
|
|
|
|
This guide explains how to integrate the v0 UX/UI Architect persona into your development workflow, including setup instructions, configuration options, and best practices for different environments.
|
|
|
|
## Table of Contents
|
|
|
|
1. [Web Environment Integration](#web-environment-integration)
|
|
2. [IDE Environment Integration](#ide-environment-integration)
|
|
3. [Design System Integration](#design-system-integration)
|
|
4. [BMAD Method Workflow Integration](#bmad-method-workflow-integration)
|
|
5. [Third-Party Tool Integration](#third-party-tool-integration)
|
|
6. [Configuration Options](#configuration-options)
|
|
|
|
## Web Environment Integration
|
|
|
|
### Setup Instructions
|
|
|
|
1. **Access the Web Orchestrator**
|
|
- Navigate to your preferred AI platform (ChatGPT, Claude, etc.)
|
|
- Create a new conversation
|
|
|
|
2. **Load the v0 UX/UI Architect Persona**
|
|
- Copy the contents of `bmad-agent/personas/v0-ux-ui-architect.md`
|
|
- Paste as your first message to the AI
|
|
|
|
3. **Activate the Persona**
|
|
- Use an activation phrase: "I need Veronica to help with UI design"
|
|
- Provide initial context about your project
|
|
|
|
### Usage in Web Environment
|
|
|
|
```
|
|
"Veronica, I need a modern dashboard design for a SaaS application with the following components:
|
|
- Navigation sidebar
|
|
- Summary statistics
|
|
- Activity feed
|
|
- User profile section
|
|
|
|
Our brand colors are blue (#1a73e8) and gray (#f1f3f4), and we follow Material Design principles."
|
|
```
|
|
|
|
### Output Handling
|
|
|
|
- **Design Specifications**: Copy and save to your design documentation
|
|
- **Component Code**: Copy and integrate into your codebase
|
|
- **Visual Descriptions**: Use as reference for design implementation
|
|
|
|
## IDE Environment Integration
|
|
|
|
### Methodology Loading Process
|
|
1. **Load Persona Documentation**
|
|
- Copy `bmad-agent/personas/v0-ux-ui-architect.ide.md` content
|
|
- Reference UX/UI task library and templates
|
|
- Load quality checklists for validation
|
|
|
|
2. **Context Configuration**
|
|
```
|
|
Load Victor (IDE-based v0 UX/UI Architect) persona
|
|
Reference component creation tasks and templates
|
|
Apply design system quality standards
|
|
```
|
|
|
|
### Usage in IDE Environment
|
|
|
|
```
|
|
"Victor, I need you to implement a responsive navigation component using React and Tailwind CSS.
|
|
It should collapse to a hamburger menu on mobile and show full navigation on desktop.
|
|
Please include accessibility features and proper keyboard navigation."
|
|
```
|
|
|
|
## Design System Integration
|
|
|
|
### Integrating with Existing Design Systems
|
|
|
|
1. **Documentation Preparation**
|
|
- Gather design system documentation
|
|
- Identify component patterns and styles
|
|
- Document design tokens (colors, typography, spacing)
|
|
|
|
2. **Persona Configuration**
|
|
- Provide design system documentation to the persona
|
|
- Specify design token usage requirements
|
|
- Define component naming conventions
|
|
|
|
3. **Component Creation Process**
|
|
- Request components that follow design system patterns
|
|
- Validate generated components against design system
|
|
- Document any extensions or modifications
|
|
|
|
### Creating a New Design System
|
|
|
|
1. **Foundation Definition**
|
|
- Define color palette, typography, and spacing
|
|
- Establish naming conventions
|
|
- Create design tokens
|
|
|
|
2. **Core Component Creation**
|
|
- Use v0 UX/UI Architect to generate base components
|
|
- Document component variants and states
|
|
- Establish component hierarchy
|
|
|
|
3. **System Documentation**
|
|
- Create usage guidelines
|
|
- Document component specifications
|
|
- Establish contribution guidelines
|
|
|
|
## BMAD Method Workflow Integration
|
|
|
|
### Integration Points
|
|
|
|
1. **After Analyst Phase**
|
|
- Transform project brief into visual concepts
|
|
- Create rapid prototypes for validation
|
|
- Refine requirements through visual exploration
|
|
|
|
2. **During PM Phase**
|
|
- Enhance PRD with visual designs
|
|
- Create UI mockups for feature specifications
|
|
- Develop interactive prototypes for stakeholder communication
|
|
|
|
3. **Parallel to Architecture Phase**
|
|
- Ensure technical feasibility of designs
|
|
- Align component design with system architecture
|
|
- Refine based on technical constraints
|
|
|
|
4. **Before Development**
|
|
- Generate implementation-ready component code
|
|
- Create detailed component documentation
|
|
- Provide integration guidance
|
|
|
|
### Workflow Diagram
|
|
|
|
```
|
|
Analyst (Project Brief) PM (PRD) v0 UX/UI Architect (Visual Design)
|
|
Architect (Technical Validation) PO (User Stories) Developer (Implementation)
|
|
```
|
|
|
|
## Third-Party Tool Integration
|
|
|
|
### Design Tools
|
|
|
|
- **Figma**: Export designs as Figma-compatible formats
|
|
- **Sketch**: Generate designs that can be imported into Sketch
|
|
- **Adobe XD**: Create designs compatible with XD workflows
|
|
|
|
### Development Frameworks
|
|
|
|
- **React**: Generate React components with proper hooks and patterns
|
|
- **Vue**: Create Vue components following best practices
|
|
- **Angular**: Develop Angular components with proper structure
|
|
- **Svelte**: Build efficient Svelte components
|
|
|
|
### CSS Frameworks
|
|
|
|
- **Tailwind CSS**: Generate components using Tailwind utility classes
|
|
- **Bootstrap**: Create components following Bootstrap patterns
|
|
- **Material UI**: Develop components using Material Design principles
|
|
- **Styled Components**: Build components with CSS-in-JS approach
|
|
|
|
## Configuration Options
|
|
|
|
### Persona Configuration
|
|
|
|
| Option | Description | Default | Example |
|
|
|--------|-------------|---------|---------|
|
|
| `designSystem` | Preferred design system | None | "Material Design" |
|
|
| `colorPalette` | Brand color palette | None | "#1a73e8, #f1f3f4" |
|
|
| `framework` | Frontend framework | React | "Vue" |
|
|
| `cssApproach` | CSS methodology | Tailwind | "Styled Components" |
|
|
| `accessibilityLevel` | WCAG compliance level | AA | "AAA" |
|
|
|
|
### Example Configuration
|
|
|
|
```yaml
|
|
v0_ux_ui_architect:
|
|
designSystem: "Material Design"
|
|
colorPalette:
|
|
primary: "#1a73e8"
|
|
secondary: "#f1f3f4"
|
|
accent: "#fbbc04"
|
|
framework: "React"
|
|
cssApproach: "Tailwind"
|
|
accessibilityLevel: "AA"
|
|
responsive: true
|
|
darkMode: true
|
|
```
|
|
|
|
---
|
|
|
|
This integration guide provides comprehensive instructions for incorporating the v0 UX/UI Architect persona into your development workflow across different environments and with various tools and frameworks.
|