ldy26098
/
BMAD-METHOD
mirror of https://github.com/bmad-code-org/BMAD-METHOD.git
1
0
Fork 0
Code Packages Projects Releases Wiki Activity
BMAD-METHOD/docs/v0-ux-ui-architect-integrat...

6.1 KiB
Raw Blame History

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
  2. IDE Environment Integration
  3. Design System Integration
  4. BMAD Method Workflow Integration
  5. Third-Party Tool Integration
  6. 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

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.