BMAD-METHOD/bmad-agent/tasks/rapid-prototype-from-brief.md

Task: Rapid Prototype from Brief

Objective

Transform a project brief or requirements document into a visual prototype and implementation-ready frontend components in a rapid timeframe, focusing on key user flows and core functionality.

Prerequisites

• Project brief or requirements document
• Technical constraints and platform information
• Brand guidelines or design direction (if available)
• User personas or target audience information

Process Steps

1. Brief Analysis

• Extract key requirements and user needs
• Identify core functionality and primary user flows
• Determine technical constraints and platform requirements
• Note any specific design direction or brand guidelines

2. Information Architecture

• Define key screens and components
• Map user flows and navigation
• Identify reusable patterns and components
• Create simple site/app map

3. Rapid Visual Exploration

• Generate multiple visual directions based on requirements
• Create low-fidelity wireframes for key screens
• Explore component patterns and design system elements
• Establish visual hierarchy and layout principles

4. Core Component Design

• Design key UI components needed for core functionality
• Define component variants and states
• Ensure responsive behavior across device sizes
• Apply accessibility best practices

5. Prototype Implementation

• Implement core screens and components in code
• Focus on functional prototype over comprehensive implementation
• Ensure responsive behavior works across target devices
• Implement key interactions and state transitions

6. Validation & Iteration

• Review prototype against requirements
• Identify gaps and areas for improvement
• Gather feedback on usability and visual design
• Iterate on design and implementation as needed

7. Documentation & Handoff

• Document component specifications
• Create implementation notes for developers
• Provide design system documentation
• Outline next steps for full implementation

Deliverables

• Visual design concepts
• Interactive prototype
• Core component implementations
• Design system foundation
• Implementation documentation

Success Criteria

• Prototype addresses core requirements from brief
• Design is visually cohesive and on-brand
• Components are reusable and well-structured
• Implementation is responsive and accessible
• Prototype demonstrates key user flows
• Documentation provides clear path to full implementation