Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web-based Paint-by-Numbers application designed to provide users with a simple and enjoyable way to create art. The application allows users to generate paint-by-numbers images, manage their credits for image generation, and maintain a personal library of creations, all while ensuring a cozy and art-studio atmosphere.

## CORE FEATURES
1. **Paint-by-Numbers Image Correction**: Generates images with numeric labels inside each paintable region, ensuring numbers are centered, readable at print sizes, and aligned with a color legend.

2. **Credit-Based Monetization System**: Implements a credit system where users purchase credits to generate images. First-time users receive 2 free credits, and various credit packs are available for purchase. Unused credits do not expire.

3. **Authentication & User Identity**: Users can log in using Google OAuth. User data, including ID, email, display name, and avatar, is stored and displayed within the app.

4. **Image Generation History (User Library)**: Allows users to view and re-download their previous creations alongside associated color legends, without consuming credits for re-downloads.

5. **UX & Product Safeguards**: Ensures a user-friendly experience with confirmation dialogs for credit usage, loading indicators during image generation, and limits on upload sizes.

6. **Growth Hooks (Optional)**: Include features like gifting credit packs, downloading sample kits, and sharing creations.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, focusing on a calming art-studio feel.
- **Color Mode**: Light theme with dark text on light backgrounds to enhance readability.
- **Layout**: 
  - Header: Includes user avatar, name, and remaining credits.
  - Main Area: Central canvas for image generation with a sidebar for controls and color legend.
  - Footer: Contains links to user library and support.
- **Typography**: 
  - Primary Font: Sans-serif (e.g., Inter or Roboto) for clean readability.
  - Hierarchy: Use varying font weights to denote headings, subheadings, and body text, ensuring clarity in user interactions.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for a robust, type-safe application.
- **Styling**: Tailwind CSS for utility-first design and rapid styling.
- **UI Components**: Utilize shadcn/ui for pre-styled components to maintain design consistency.
- **State Management**: Consider using React Context or Redux if complex state management is needed for user sessions and credits.

## IMPLEMENTATION STEPS
1. **Set up the React application** with TypeScript and install Tailwind CSS.
2. **Implement Google OAuth** for authentication, ensuring user data is appropriately stored in the application state.
3. **Develop the paint-by-numbers image generation logic** to incorporate the specified requirements, including number placement and merging of small regions.
4. **Create the credit-based monetization system**, including UI components for purchasing credits and displaying remaining credits.
5. **Build the My Creations / History section** to allow users to access their previous images and color legends.
6. **Design and apply the minimalist UI** using Tailwind CSS, ensuring responsive design for various devices.
7. **Integrate user experience safeguards**, such as confirmation dialogs and loading states.

## USER EXPERIENCE
Users will start by logging in with Google, where they will see their avatar, name, and credit balance in the header. They can generate paint-by-numbers images by selecting an image, which will display the numeric labels and color legend. Users can access their history to download previous creations without consuming credits. The interface will utilize friendly language and maintain a cozy aesthetic, making the experience enjoyable and user-friendly while ensuring clear communication regarding credits and limitations.