Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The application is a web-based demo game that mimics a fictional Robux transfer system, designed in a Roblox-inspired style. It allows users to enter their Roblox username, view fictional avatars, and transfer a demo balance of Robux to other users, all while providing a modern and polished user interface.

## CORE FEATURES
1. **Username Entry Screen**: Users enter their Roblox username to generate a fictional avatar card displaying their profile picture and display name.
2. **Main Dashboard**: Displays the user's fictional in-game Robux balance and provides a SEND button for initiating transfers.
3. **Send Robux Screen**: Users can input a recipient's Roblox username and the amount of Robux to send, along with a visual representation of the recipient's avatar.
4. **Transfer Animation**: A smooth animation shows the transfer process, ensuring that the balance is updated in real-time without going negative.
5. **Settings Panel**: Users can set and save a demo balance of Robux for testing purposes, clearly labeled as not real Robux.
6. **Mobile-Friendly Design**: All screens are optimized for mobile use, with a clean layout and responsive elements.

## 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 consists of a centered input form for the username, a main dashboard displaying the balance and SEND button, and modal screens for sending Robux and settings, all arranged in a user-friendly manner.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Context API or Zustand (for managing user balance and settings)

## IMPLEMENTATION STEPS
1. **Set Up Environment**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Components**: Build the components for the Username Entry Screen, Main Dashboard, Send Robux Screen, and Settings Panel.
3. **State Management**: Implement a context or Zustand store to manage the fictional Robux balance and settings.
4. **User Input Handling**: Add input handling for usernames and Robux amounts, ensuring proper validation and feedback.
5. **Animation Implementation**: Use CSS transitions and animations for the transfer process to enhance user experience.
6. **Responsive Design**: Ensure all layouts and components are responsive and optimized for mobile devices.
7. **Testing and Debugging**: Conduct thorough testing to ensure the application works as intended without any errors.

## USER EXPERIENCE
The user experience is designed to be intuitive and engaging. Users will start on the Username Entry Screen, inputting their details to generate a personalized avatar. After navigating to the Main Dashboard, they can easily send fictional Robux to others, with visual feedback during the transfer process. The Settings Panel allows for customization of the demo balance, ensuring users have control over their gameplay experience. The polished animations and mobile-friendly design further enhance the overall interaction, making it enjoyable and straightforward.