Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web-based prompt generator that allows users to create, customize, and save various prompts for different uses, such as writing, brainstorming, or creative projects. The app offers a user-friendly interface focusing on simplicity and ease of navigation, enabling users to generate prompts effortlessly.

## CORE FEATURES
1. **Prompt Generation**: Users can generate prompts based on selected categories (e.g., writing, art, business) with a single click.
2. **Customization Options**: Users can modify the generated prompts by adjusting parameters like tone, style, and length.
3. **Saved Prompts Library**: A feature that allows users to save their favorite prompts for easy access and future use.
4. **Sharing Functionality**: Users can share prompts via social media or email directly from the app.
5. **Search and Filter**: Users can search through saved prompts and filter them based on categories or keywords.
6. **User Accounts**: Optional user registration and login for personalized experiences and cloud storage of prompts.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design featuring clean lines, ample white space, and a limited color palette to ensure focus on content. The aesthetic should evoke a sense of calm and clarity.
- **Color Mode**: A light theme with dark text on light backgrounds to enhance readability and reduce eye strain.
- **Layout**: A single-column layout with a fixed header for navigation and a footer for additional links or information. Prompts will be displayed prominently in the central area with ample spacing.
- **Typography**: Use a sans-serif font (e.g., Inter or Roboto) for headings and body text, with a clear hierarchy (e.g., larger bold headings and regular-weight body text) to guide users through the content seamlessly.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript to enhance type safety and maintainability.
- **Styling**: Tailwind CSS for utility-first styling approach, allowing rapid design iterations and responsiveness.
- **UI Components**: Utilize shadcn/ui for high-quality, accessible UI components.
- **State Management**: Consider using React Context API or Zustand for managing global state if needed.

## IMPLEMENTATION STEPS
1. **Setup Project**: Create a new React project with TypeScript using Create React App. Install Tailwind CSS and configure it according to the documentation.
2. **Design Components**: Start by designing the main components such as Header, PromptGenerator, PromptList, and Footer using shadcn/ui components.
3. **Implement Core Features**: 
   - Develop the Prompt Generation logic using a simple algorithm or API for creating prompts.
   - Create the customization options interface.
   - Implement the Saved Prompts Library, including local storage or a backend service for saving user data.
4. **Add User Accounts**: Set up user authentication using a service like Firebase or Auth0 for managing user accounts.
5. **Build Sharing Functionality**: Use the Web Share API or create shareable links for prompts.
6. **Testing and Debugging**: Conduct user testing to identify usability issues, and debug the application to ensure smooth performance.
7. **Deployment**: Deploy the application using a hosting service like Vercel or Netlify.

## USER EXPERIENCE
Users will start on a clean landing page where they can quickly see the prompt generation feature. Upon selecting a category, they will generate a prompt that appears in the main content area. Users can customize the prompt with intuitive controls, save it to their library, or share it instantly. The interface will adapt to different screen sizes, ensuring a responsive design that maintains usability on both desktop and mobile devices, with clear navigation and smooth interactions.