Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to provide users with the editing parameters for the Instagram AI filter "Flash film styles". It aims to simplify the process of understanding and applying this filter’s features, making it accessible for both casual users and those interested in photography and content creation.

## CORE FEATURES
1. **Filter Parameter Display**: Showcase detailed editing parameters and settings for the "Flash film styles" filter.
2. **Interactive Slider**: Allow users to adjust parameters in real-time and see the changes in a preview image.
3. **Save and Share Settings**: Users can save their custom settings and share them with others via social media or direct links.
4. **User Guide and Tips**: Provide suggestions and tips on how to effectively use the filter for different styles and themes.
5. **Responsive Design**: Ensure the application is fully responsive, providing an optimal experience on both desktop and mobile devices.

## 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 should feature a header with the application title, a section for the filter parameter display, an interactive area for the slider, a tips section, and a footer with social sharing options.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API (for managing filter parameters across components)

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create the Layout**: Develop the main layout structure using Tailwind CSS, ensuring a responsive design that adapts to different screen sizes.
3. **Build Core Components**:
   - **Filter Parameter Display**: Create a component to display the current filter settings.
   - **Interactive Slider**: Implement a slider component that updates the filter parameters and shows a preview.
   - **User Guide Section**: Develop a text area for tips and usage instructions.
4. **Implement State Management**: Use React Context API to store and manage filter parameters, allowing components to update dynamically.
5. **Add Save and Share Functionality**: Implement features that allow users to save their settings as JSON and share links via social media.
6. **Test and Optimize**: Conduct thorough testing across various devices and browsers to ensure a consistent user experience.

## USER EXPERIENCE
Users will begin by landing on a clean and simple interface showcasing the filter's title and description. They can interact with sliders to modify parameters, instantly seeing the changes reflected in the preview area. Helpful tips will guide them on how to achieve the best results, and once satisfied, they can save and share their settings easily. The overall experience should feel intuitive and straightforward, with a focus on usability and accessibility.