Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The proposed application is a web app designed to provide an intuitive and streamlined user experience. It enables users to create and design interactive prototypes effortlessly, similar to the functionality of Uizard.io. The main purpose is to facilitate rapid design iterations while maintaining a clean and user-friendly interface.

## CORE FEATURES
1. **Interactive Prototyping**: Users can create clickable prototypes using a drag-and-drop interface, enabling quick feedback and iterations.
2. **Component Library**: A comprehensive library of pre-designed components allows users to easily incorporate UI elements into their prototypes.
3. **Collaboration Tools**: Real-time collaboration features enable multiple users to work on the same prototype simultaneously, with options for commenting and version control.
4. **Export Options**: Users can export their designs in various formats, including PNG, PDF, or shareable links, to facilitate sharing with stakeholders.
5. **User Testing Integration**: Built-in user testing features allow users to gather feedback directly from their target audience within the app.
6. **Templates and Inspirations**: A selection of templates and design inspirations helps users kickstart their projects and enhances creativity.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Emphasizing a clean, simple design with plenty of white space to ensure focus on content and usability.
- **Color Mode**: Light theme featuring dark text on light backgrounds to enhance readability and user comfort.
- **Layout**: A grid-based layout structure that organizes elements into clear, distinct sections. Use ample spacing between components to reduce visual clutter while maintaining accessibility.
- **Typography**: Utilize sans-serif fonts like 'Inter' or 'Roboto' for legibility, with a hierarchy that distinguishes headings (bold, larger size) from body text (regular weight, standard size).

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust and type-safe code development.
- **Styling**: Tailwind CSS for utility-first styling, enabling rapid design adjustments and responsive layouts.
- **UI Components**: Incorporate shadcn/ui for pre-styled components that align with the minimalist aesthetic.
- **State Management**: Consider using Zustand for lightweight state management, ensuring efficient data flow across the application.

## IMPLEMENTATION STEPS
1. **Set Up the Development Environment**: Initialize a new React project with TypeScript and Tailwind CSS. Install necessary dependencies including Zustand and shadcn/ui.
2. **Create the Core Layout**: Develop the main layout structure using a grid system. Implement the header, sidebar (if applicable), and footer components to establish a consistent frame.
3. **Build Component Library**: Create reusable components such as buttons, input fields, and modal dialogs using shadcn/ui. Style them with Tailwind CSS to ensure a cohesive look.
4. **Implement Interactive Prototyping**: Develop the drag-and-drop functionality using libraries like React DnD or similar to allow users to position components dynamically on the canvas.
5. **Add Collaboration Features**: Integrate real-time collaboration tools using Firebase or WebSockets to enable multi-user editing capabilities.
6. **Export Functionality**: Implement functionality to export designs in various formats, including generating image files and shareable links.
7. **User Testing Integration**: Build user testing features that allow users to create feedback sessions and gather insights directly through the app.
8. **Testing and Optimization**: Conduct thorough testing across different devices and browsers to ensure responsiveness and user experience are optimized.

## USER EXPERIENCE
Key user interactions include a seamless onboarding process that guides new users through the app's features. Users can easily navigate the interface to create prototypes, access the component library, and collaborate with others in real-time. The layout prioritizes intuitive design, allowing users to focus on their creative process without distractions. Feedback mechanisms during user testing sessions enhance the overall experience by incorporating direct input from users, leading to improved prototypes and designs.