Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
PaletteAI is a web application designed to generate beautiful brand color palettes using AI. Users can input a simple prompt describing their brand, and the AI generates a complete brand identity within seconds. The application focuses on providing a seamless user experience with features like live previews, export options, and accessibility checks.

## CORE FEATURES
1. **AI Color Generation**: Users can describe their brand, and the AI returns a tailored color palette, including HEX, RGB, and HSL values for each color.
2. **Live Brand Preview**: As users select colors, the brand preview updates in real-time, allowing for immediate visual feedback.
3. **Export Options**: Users can export their color palettes in various formats, including CSS variables, JSON, and PDF brand sheets.
4. **Accessibility Checker**: Ensures that generated colors meet accessibility standards, providing suggestions for improvement.
5. **Gradient Generator**: Users can create gradients based on their selected colors, offering options for linear, radial, and mesh gradients.
6. **Saved Palettes**: Users can save their favorite palettes and generate shareable links or QR codes for easy access.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: The layout consists of a top navigation bar, a hero section with a prompt input, and a main area displaying the generated palette and live brand preview. The sidebar includes navigation links to different sections of the app, while the footer contains additional information and links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux or Context API (if needed for state management)

## IMPLEMENTATION STEPS
1. **Set up the project**: Initialize a new React project with TypeScript and install necessary dependencies including Tailwind CSS and shadcn/ui.
2. **Create the layout structure**: Design the top navigation bar, sidebar, hero section, and main area components using React functional components.
3. **Implement the AI color generation logic**: Integrate the OpenAI API to process user prompts and return color palettes.
4. **Build the live brand preview**: Create a component that updates dynamically based on selected colors from the generated palette.
5. **Develop the export functionality**: Implement features that allow users to export their palettes in various formats (CSS, JSON, PDF).
6. **Add the accessibility checker**: Include logic that evaluates color contrast and provides suggestions for improvements.
7. **Style components using Tailwind CSS**: Apply the minimalist design principles, ensuring proper spacing, typography, and responsiveness.
8. **Test the application**: Conduct thorough testing for usability, responsiveness, and accessibility compliance.

## USER EXPERIENCE
Users will start by entering a description of their brand in the prompt input area. Once they click the "✨ Generate Palette" button, the AI processes their input and presents a visually appealing color palette. Users can see a live preview of how the colors will look in a brand context, make adjustments, and export their choices in various formats. The interface will be intuitive, ensuring users can navigate through the sidebar to access different features like gradients and saved palettes seamlessly. The overall experience will be enhanced with smooth animations and transitions, providing a modern feel to the application.