# 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