Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is an interactive web app designed to simplify the process of creating generative art and animations. It aims to provide users with the tools to either learn how to create animations from scratch or quickly implement existing animations, making the world of generative art more accessible and enjoyable.

## CORE FEATURES
1. **Selection of Animation Types**: Users can choose from various animation categories such as animation icons, interactive backgrounds, and cursor animations.
2. **Inspiration Finder**: Offers options to browse through previous designs or search the web for inspiration, as well as an option to enter text-based ideas.
3. **Skill Learning Mode**: For those who wish to learn, the app provides tools and resources to explore open-source libraries (like React Bits) and offers voice-over explanations on how to edit and understand the code.
4. **Quick Animation Mode**: Users who prefer not to learn can follow guided steps in a code IDE to create their desired animation, using either base ideas or sourced animations.
5. **User-Friendly Interface**: A clean and intuitive interface that supports easy navigation through features and tools.
6. **Export Options**: Ability to export completed animations in various formats for use in different projects.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design will be clean and simple, utilizing plenty of white space to enhance readability and focus on user content.
- **Color Mode**: Light theme with dark text on a light background to ensure optimal readability and a modern aesthetic.
- **Layout**: A single-page layout with distinct sections for selection, inspiration, learning, and quick animation, ensuring a smooth user experience.
- **Typography**: Use sans-serif fonts like Inter or Montserrat for headings and body text, ensuring clarity and consistency throughout the app.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust type safety and modern development practices.
- **Styling**: Tailwind CSS for utility-first styling that allows for rapid and responsive design.
- **UI Components**: Utilize shadcn/ui for pre-built accessible components that enhance the user experience.
- **State Management**: Use React's Context API or Zustand for managing state across the application.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a React project using Create React App with TypeScript and install Tailwind CSS.
2. **Design the Layout**: Create the main layout structure with sections for animation types, inspiration, learning mode, and quick animation.
3. **Build Core Features**:
   - Develop the selection component for different animation types.
   - Implement the inspiration finder with search functionality.
   - Create the skill learning mode that integrates with open-source libraries.
   - Develop the guided quick animation mode with a code IDE interface.
4. **Focus on User Interface**: Apply Tailwind CSS for styling, ensuring responsiveness and adherence to the minimalist design.
5. **Implement Export Functionality**: Allow users to export their completed animations in various formats.

## USER EXPERIENCE
Users will start by selecting the type of animation they want to create. They can then find inspiration from existing designs or enter their ideas. Depending on their choice, they will either be guided through learning tools and code or directly through a simplified animation creation process. The UI will ensure that users can easily navigate between features, with clear instructions and visual cues to enhance their learning or creation experience. The overall goal is to create a seamless and enjoyable experience that supports both learning and creativity in generative art.