Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a minimalist web application focused on designing systems with 20 different models. The application will serve as a platform for users to explore, customize, and implement various design systems, emphasizing a clean and simple user experience.

## CORE FEATURES
1. **Model Gallery**: A showcase of 20 design system models with visual previews and descriptions.
2. **Customization Options**: Users can customize selected models based on their preferences, allowing for adjustments in color, typography, and layout.
3. **Download Feature**: An option for users to download the customized design systems in various formats.
4. **Documentation Hub**: Comprehensive documentation for each model, including usage guidelines, best practices, and implementation details.
5. **User Feedback**: A section for users to submit feedback and rate the models, fostering community interaction.
6. **Contact Form**: A straightforward form for users to reach out for support or inquiries regarding the models.

## 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 main layout will consist of a hero section at the top, followed by grid-based sections for the model gallery and customization options, with a footer containing the contact form.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: [Specify if needed, e.g., Zustand or Redux]

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install dependencies (React, TypeScript, Tailwind CSS, shadcn/ui).
2. **Create Layout Structure**: Implement the main layout with a header, hero section, model gallery, customization options, documentation hub, and footer.
3. **Develop Core Features**: Build out the model gallery component, customization options, and download functionality.
4. **Implement Styling**: Use Tailwind CSS to apply the minimalist design specifications including the defined color scheme and typography.
5. **Add Documentation Hub**: Create a content management system for the documentation of each design model.
6. **User Feedback Integration**: Implement a feedback submission form and display ratings for each model.
7. **Test Responsiveness**: Ensure the application is responsive across different devices and screen sizes.
8. **Deploy Application**: Choose a hosting platform, prepare the app for production, and deploy.

## USER EXPERIENCE
Users will land on a clean and inviting hero section where they can quickly access the model gallery. Each model will be visually appealing, with easy navigation to customization options. The download feature will be straightforward, and users will appreciate having a documentation hub for guidance. The feedback section will encourage engagement and allow for continuous improvement of the models. Overall, the user journey will focus on simplicity and efficiency, ensuring that users can effortlessly explore and customize design systems.