Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The UX Detective game is a web application designed for designers to enhance their user experience skills through an engaging and interactive game format. It focuses on a clean, minimal design that promotes accessibility and ease of use, allowing users to learn and apply UX principles in an enjoyable way.

## CORE FEATURES
1. **Game Mechanics**: Interactive tasks that challenge users to identify UX flaws and suggest improvements based on real-world scenarios.
2. **Progress Tracking**: Users can track their progress and achievements, providing a sense of accomplishment and motivation to continue learning.
3. **Feedback System**: Immediate feedback on user choices, helping players understand why certain designs work or fail.
4. **Resource Library**: A collection of articles and resources related to UX design for users to reference and learn from as they play.
5. **User Profiles**: Allow users to create profiles to save their progress, achievements, and preferences.

## 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**: A single-page layout with a hero section at the top, followed by an interactive game area, progress tracking, feedback sections, and a resource library.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Redux (or Context API as an alternative).

## IMPLEMENTATION STEPS
1. **Setup Development Environment**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Game Structure**: Develop the main components including the hero section, game area, progress tracker, and resource library.
4. **Implement Game Mechanics**: Build interactive tasks and integrate a feedback system to guide users through the game.
5. **Add User Profiles**: Create a user authentication system to allow users to create and manage their profiles.
6. **Style the Application**: Apply Tailwind CSS to ensure the application follows the specified minimalist design principles.
7. **Testing and Feedback**: Perform user testing to gather feedback and make iterative improvements before launch.

## USER EXPERIENCE
The user experience should be intuitive and engaging, with clear navigation and minimal distractions. Users will start at the hero section, where they can learn about the game. As they progress, they will interact with gamified tasks, receive immediate feedback, and access resources seamlessly. The tracking of progress will be visually represented, motivating users to continue their learning journey. The overall goal is to create a rewarding and educational experience that enhances users' UX design skills through fun and interaction.