Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to provide a realistic user interface for Roblox, focusing on a minimalist and clean aesthetic. The application will showcase various UI components and layouts that mimic the Roblox experience while maintaining a modern and user-friendly approach.

## CORE FEATURES
1. **Interactive UI Components**: A library of realistic UI elements that users can interact with, including buttons, panels, and menus.
2. **Customizable Themes**: Users can select from different themes while maintaining the minimalist aesthetic, allowing for personalization without clutter.
3. **Live Preview**: A feature that enables users to see changes in real-time as they customize their UI components.
4. **Documentation and Tutorials**: Comprehensive guides and tutorials on how to use the UI components effectively and creatively within Roblox.
5. **User Feedback System**: A section for users to submit feedback or suggestions, ensuring continuous improvement of the application.

## 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 top navigation bar, a hero section for showcasing features, a grid layout for displaying UI components, and a footer for additional information and links.

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

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript using Create React App.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and component library.
3. **Create Layout Components**: Build the main layout including the navigation bar, hero section, and footer.
4. **Develop UI Components**: Create interactive UI components that follow the design specifications. Use Tailwind CSS for styling.
5. **Implement Live Preview Feature**: Integrate functionality to allow users to see real-time changes when customizing components.
6. **Add Documentation**: Create pages for documentation and tutorials, ensuring they are clear and accessible.
7. **Implement User Feedback System**: Set up a form for users to submit feedback, linking it to a backend if necessary for storage.

## USER EXPERIENCE
The application will prioritize user interactions with a straightforward navigation experience. Users can easily explore UI components, see live previews of their customizations, and access tutorials from the main dashboard. Feedback submission will be intuitive, encouraging users to engage with the development of the application. The minimalist design and clear layouts will enhance usability, making the application accessible to both new and experienced Roblox developers.