Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to function as an AI editor that mimics the capabilities of an elite designer. The application will leverage AI to assist users in creating visually appealing web designs efficiently, focusing on simplicity and ease of use.

## CORE FEATURES
1. **AI Design Assistant**: Offers real-time suggestions and edits based on user input to enhance design quality.
2. **Drag-and-Drop Interface**: Allows users to easily arrange and customize design elements without coding.
3. **Template Library**: Provides a collection of minimalist templates that users can choose from and customize to fit their needs.
4. **Live Preview**: Enables users to see changes in real-time as they modify their designs.
5. **Export Options**: Users can export their designs in various formats suitable for web deployment.
6. **User Accounts**: Allows users to create profiles to save and manage their projects.

## 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 will consist of a header with navigation, a main content area featuring the design canvas and tool palette, and a footer for additional links and information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand for managing design states

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript using Create React App or Vite.
2. **Install Dependencies**: Install Tailwind CSS, shadcn/ui, and any additional libraries needed for state management.
3. **Create File Structure**: Organize components, pages, and assets for easy navigation within the project.
4. **Implement Core Features**:
   - Build the AI Design Assistant component that integrates with an AI model for suggestions.
   - Create the drag-and-drop interface using a library like React DnD or react-beautiful-dnd.
   - Develop the template library and integrate it into the main interface.
   - Set up the live preview feature, ensuring it updates in real-time during design modifications.
   - Add export functionality allowing users to download their designs.
   - Implement user authentication and profile management.
5. **Design the UI**: Apply Tailwind CSS classes to adhere to the minimalist visual style and specified design specifications.
6. **Testing**: Conduct thorough testing of features and user flows to ensure functionality and responsiveness.
7. **Deployment**: Deploy the application using a service like Vercel or Netlify for public access.

## USER EXPERIENCE
The user experience will be centered around intuitive interactions, allowing users to easily navigate the interface. Users will start by selecting a template or a blank canvas. They can then utilize the drag-and-drop feature to add and arrange design elements. The AI assistant will provide contextual suggestions, and users will be able to preview changes instantly. Finally, they can save their work and export it as needed, ensuring a smooth and efficient design process.