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/integration-guide/v0-ux-ui-architect-integrat...

5.6 KiB
Raw Blame History

v0-UX/UI Architect Integration Guide

This guide explains how the v0-UX/UI Architect persona integrates with the BMAD Method workflow and other personas.

Overview

The v0-UX/UI Architect persona is designed to bridge the gap between design concepts and implementation, providing rapid visual design and frontend code generation capabilities. This persona works alongside other BMAD Method roles to ensure a smooth transition from requirements to visual design to implementation.

Workflow Integration Points

1. After Analyst Phase

Input: Project Brief from Analyst Activities:

  • Generate initial visual concepts based on requirements
  • Create rapid prototypes of key screens and flows
  • Establish visual direction and component patterns
  • Provide visual feedback to refine requirements

Output: Visual concepts and initial prototype Next: Hand off to Product Manager

2. After PM Phase

Input: PRD from Product Manager Activities:

  • Create detailed UI mockups based on feature specifications
  • Design component system aligned with requirements
  • Generate interactive prototypes for user testing
  • Refine visual language and interaction patterns

Output: Detailed UI designs and interactive prototype Next: Collaborate with Architect

3. Parallel to Architecture Phase

Input: Architecture documentation Activities:

  • Align component design with technical architecture
  • Ensure technical feasibility of designs
  • Refine component specifications based on technical constraints
  • Create implementation-ready component specifications

Output: Implementation-ready design system and components Next: Hand off to Product Owner

4. Before Development

Input: User stories from Product Owner Activities:

  • Generate component code for implementation
  • Create detailed component documentation
  • Provide implementation guidance for developers
  • Establish design system documentation

Output: Production-ready component code and documentation Next: Support Development team

Integration with Existing Personas

Analyst

  • Receives project brief and initial requirements
  • Provides visual exploration to validate concepts
  • Helps refine requirements through visual prototyping

Product Manager

  • Receives visual concepts to enhance PRD
  • Collaborates on feature prioritization based on design complexity
  • Uses visual prototypes for stakeholder communication

Architect

  • Ensures technical feasibility of designs
  • Aligns component architecture with technical architecture
  • Collaborates on performance and scalability considerations

Product Owner

  • Receives detailed component specifications for story creation
  • Uses visual designs to enhance story acceptance criteria
  • Leverages design system for consistent story implementation

Developer

  • Receives implementation-ready component code
  • Uses design system documentation for consistent implementation
  • Collaborates on technical refinements during implementation

Task Integration

The v0-UX/UI Architect persona can perform the following tasks:

  1. Rapid Prototype from Brief

    • Transform project brief into visual prototype
    • Generate initial component designs
    • Establish visual direction

  2. Create Design System Components

    • Design and implement cohesive component library
    • Create design tokens and guidelines
    • Ensure consistency across components

  3. Implement Components in IDE

    • Generate production-ready component code
    • Create component documentation
    • Implement responsive and accessible components

Checklist Integration

The v0-UX/UI Architect uses the following checklists:

  1. v0 Component Quality Checklist

    • Ensures components meet quality standards
    • Validates accessibility, responsiveness, and code quality
    • Confirms design system consistency

  2. Frontend Architecture Checklist

    • Ensures components align with frontend architecture
    • Validates technical feasibility and performance
    • Confirms integration with existing systems

Template Integration

The v0-UX/UI Architect uses the following templates:

  1. v0 Component Specification Template

    • Standardizes component documentation
    • Ensures comprehensive specification of props, states, and behaviors
    • Provides clear implementation guidance

  2. IDE Component Structure Template

    • Standardizes component file structure
    • Ensures consistent implementation patterns
    • Facilitates easy integration with existing codebase

Getting Started

To start using the v0-UX/UI Architect persona in your BMAD Method workflow:

  1. Web-based Usage:

    • Use the web orchestrator to activate the v0-UX/UI Architect persona
    • Provide project context and requirements
    • Request visual designs or component implementations

  2. IDE-based Usage:

    • Follow the setup guides for your preferred IDE
    • Use the v0-UX/UI Architect.ide.md persona file
    • Integrate directly with your development workflow

Best Practices

  1. Provide Clear Context

    • Share existing design system documentation if available
    • Clearly communicate technical constraints
    • Provide examples of desired visual style

  2. Iterative Approach

    • Start with key components and flows
    • Gather feedback early and often
    • Refine designs based on feedback

  3. Maintain Design System

    • Document all components in the design system
    • Ensure consistency across implementations
    • Regularly review and update design system

  4. Cross-Persona Collaboration

    • Involve the v0-UX/UI Architect early in the process
    • Facilitate collaboration with other personas
    • Use visual designs to enhance communication