Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The application is a web-based prompt builder designed for Hailo Digital, aimed at helping users create comprehensive prompts for app development on the Lovable platform. By guiding users through a series of simple questions, the tool streamlines the prompt creation process while ensuring an intuitive and efficient user experience.

## CORE FEATURES
1. **User Onboarding**: A guided introduction that explains the tool's purpose and how to use it effectively.
2. **Prompt Questionnaire**: A clean interface that presents users with a series of basic questions necessary for building a comprehensive prompt.
3. **Real-time Preview**: Users can see a live preview of the prompt they are building, allowing for immediate feedback and adjustments.
4. **Save and Export Options**: Users can save their prompts for later use or export them to Lovable directly for app development.
5. **User Account Management**: Secure user authentication and profile management to store and retrieve past prompts.
6. **Help and Resources Section**: A dedicated area with FAQs and guides to assist users in using the tool effectively.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design focusing on a clean, simple aesthetic that utilizes ample white space to enhance readability and user focus.
- **Color Mode**: A light theme with dark text on light backgrounds to promote clarity and ease of use.
- **Layout**: A responsive grid layout that adapts seamlessly to various screen sizes, featuring a sidebar for navigation and a main content area for the questionnaire and preview.
- **Typography**: Use of modern sans-serif fonts such as "Inter" for body text and headings, with a clear hierarchy established through font sizes and weights to guide user attention.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building a robust and type-safe application.
- **Styling**: Tailwind CSS for efficient styling and responsive design components.
- **UI Components**: Utilize shadcn/ui for pre-designed, accessible UI components to enhance development speed and maintain consistency.
- **State Management**: Use React Context API or Zustand for managing application state effectively.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create User Authentication**: Integrate Supabase for user account management, implementing sign-up, login, and profile functionalities.
3. **Design the Layout**: Develop the responsive grid layout using Tailwind CSS, ensuring optimal spacing and alignment.
4. **Build the Prompt Questionnaire**: Create a series of forms that dynamically render questions based on user input, utilizing controlled components for better state management.
5. **Implement Real-time Preview**: Design a section that displays the constructed prompt in real-time as users answer questions, updating automatically.
6. **Add Save and Export Functionality**: Implement functionality to save prompts to user profiles and create an export option that formats the prompt for Lovable.
7. **Incorporate Help and Resources**: Develop a static help section with FAQs and guides, utilizing Tailwind CSS for styling.

## USER EXPERIENCE
The user experience focuses on simplicity and efficiency. Users will start with an onboarding screen that provides an overview of the tool. They will then proceed to the prompt questionnaire, where they can answer questions one at a time or navigate back and forth as needed. The real-time preview will enhance engagement by allowing users to see their input reflected immediately. Upon completion, users can save their prompts for future reference or export them directly to Lovable, ensuring a seamless transition from prompt creation to app development.