Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project entails the development of a web application that serves as a review and feedback platform for prototypes, specifically targeting developers and product teams. The main purpose is to enable users to synthesize concepts and suggest deployment improvements based on user feedback from AgentAI and workers. The application will emphasize usability and facilitate constructive feedback through a clean and simple design.

## CORE FEATURES
1. **Prototype Review Dashboard**: A central hub where users can upload prototypes, view feedback, and track revisions.
2. **Feedback Submission**: Users can submit their feedback on specific design elements and usability through structured forms that allow for detailed comments.
3. **Concept Synthesis Tool**: An interactive tool that aggregates feedback and highlights common themes and suggestions for improvements.
4. **User Authentication**: Secure login for users to access personalized dashboards and save their feedback submissions.
5. **Real-time Collaboration**: Enable multiple users to collaborate on a single prototype review, allowing for live comments and discussions.
6. **Reporting and Analytics**: Visualize feedback trends and suggestions through charts and reports to aid in decision-making.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: A simple grid layout where the dashboard contains sections for prototype reviews, feedback forms, and analytics, ensuring easy navigation and accessibility to all features.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React Query for data fetching and state management.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Design Layout**: Create the main layout structure using a grid system, ensuring responsive design for various screen sizes.
3. **Develop Core Features**:
   - Implement the Prototype Review Dashboard with sections for uploads, feedback, and analytics.
   - Create the Feedback Submission component with form validation.
   - Develop the Concept Synthesis Tool to aggregate and visualize feedback.
4. **Set Up Authentication**: Implement user authentication using a library like Firebase or Auth0.
5. **Real-time Collaboration**: Integrate WebSocket or similar technology to enable live interactions among users.
6. **Implement Reporting and Analytics**: Use chart libraries to visualize feedback trends.
7. **Testing**: Conduct thorough testing for usability and functionality across different devices and browsers.

## USER EXPERIENCE
Users will have a seamless experience navigating through the application, starting from logging in to accessing the prototype review dashboard. They can easily submit feedback, view aggregated suggestions, and collaborate with others in real time. The minimalist design will ensure that users can focus on the content without distractions, enhancing overall usability and effectiveness.