Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to create a fun and interactive experience for users who want to showcase their Roblox avatars without needing Robux. Users can input their Roblox username to fetch and display their avatar's image, providing a playful engagement with the Roblox community.

## CORE FEATURES
1. **User Input Field**: A clean input field where users can enter their Roblox username.
2. **Avatar Display**: Dynamically fetch and display the corresponding Roblox avatar image based on the username input.
3. **Error Handling**: Inform users if the username is invalid or if the avatar cannot be found.
4. **Responsive Design**: Ensure the application is fully responsive, providing a seamless experience across devices.
5. **Minimalist UI**: A simple, uncluttered interface focusing on user interaction and avatar display.

## 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 should feature a centered input field at the top, followed by a prominent display area for the avatar image, and a footer with contact information or links for further engagement.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API (if needed for managing global states)

## IMPLEMENTATION STEPS
1. **Set up the project**: Initialize a new React project with TypeScript and integrate Tailwind CSS for styling.
2. **Create the input component**: Build a reusable input component for users to enter their Roblox usernames, ensuring it has appropriate styling.
3. **Implement avatar fetching logic**: Use the Roblox API to fetch the avatar image based on the given username.
4. **Display the avatar**: Create a dedicated component that dynamically shows the avatar image or an error message if the username is invalid.
5. **Responsive design**: Use Tailwind CSS utilities to ensure the layout adapts smoothly across different screen sizes.
6. **Testing**: Test the application for various usernames, checking for both valid and invalid inputs to ensure robust error handling.

## USER EXPERIENCE
Users will first see a clean input field inviting them to enter their Roblox username. After submission, the application will fetch and display their avatar image prominently. If the username is invalid, a friendly error message will inform them. The minimalist design ensures that users focus on the avatar display, making the interaction enjoyable and straightforward. The application will work seamlessly on both mobile and desktop devices, enhancing accessibility and user satisfaction.