Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web-based UI/UX learning platform designed to help users practice and enhance their design skills through a structured project-based approach. It features three levels of difficulty—Beginner, Intermediate, and Advanced—allowing users to progressively tackle projects that simulate real-world design tasks. Users will engage with an intuitive UI/UX editor to create and refine their designs, receive feedback, and improve their skills.

## CORE FEATURES
1. **Project Selection**: Users can choose from a variety of projects categorized by difficulty (Beginner, Intermediate, Advanced), allowing for personalized learning experiences.
2. **UI/UX Editor**: A fully functional editor equipped with essential design tools, including image uploads, gradient selections, font choices, and layout customization, enabling users to create compelling UI designs.
3. **Score and Feedback System**: After completing a project, users can submit their designs for evaluation, receiving a score out of 100 along with actionable feedback highlighting areas for improvement.
4. **Progress Tracking**: Users can monitor their development over time through a dashboard that displays completed projects, scores, and suggested next steps for continued learning.
5. **Resource Library**: Access to tutorials, design principles, and best practices to help users learn and apply UI/UX concepts effectively.
6. **Community Sharing**: An option to share completed projects with the community for peer review and inspiration.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The interface will feature a clean and simple design with ample white space to enhance readability and focus on content. 
- **Color Mode**: Light theme with dark text on light backgrounds for optimal contrast and readability.
- **Layout**: A grid layout for project selection, with a sidebar for navigation. The editor area will be centrally positioned with collapsible tool panels for design elements, ensuring an organized workspace.
- **Typography**: Use a modern sans-serif font like 'Roboto' for body text and a bolder variant for headings to establish a clear hierarchy. Maintain consistent font sizes and spacing for a harmonious look.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for a robust, type-safe codebase.
- **Styling**: Tailwind CSS for utility-first styling that supports rapid design iterations.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist design aesthetic.
- **State Management**: Implement Zustand or Redux as needed for managing application state effectively.

## IMPLEMENTATION STEPS
1. **Set Up Initial Project**: Create a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project. Configure Tailwind by creating a configuration file and adding necessary styles.
3. **Build Project Selection Interface**: Create components for displaying project categories and individual projects using a grid layout, incorporating cards for each project.
4. **Develop the UI/UX Editor**: Implement the editor component with a toolbar for design elements (images, gradients, fonts) and a canvas area for design creation.
5. **Integrate Scoring System**: Create a function that evaluates designs based on predefined criteria, scoring them out of 100 and providing detailed feedback.
6. **Create Progress Tracking Dashboard**: Develop a user dashboard that tracks completed projects, scores, and suggested next steps.
7. **Implement Resource Library**: Add a section for tutorials and resources to support users in their learning journey.
8. **Community Sharing Feature**: Enable users to share their projects with options for feedback from peers.

## USER EXPERIENCE
Users will first land on a welcoming homepage where they can easily navigate to select a project based on their skill level. Upon selecting a project, they will be taken to the UI/UX editor where they can begin designing. The editor will provide a seamless experience with easily accessible tools and a clean interface. After completing their design, users will submit it for scoring and receive instant feedback. The progress dashboard will encourage users to continue learning and refining their skills, while the community sharing feature fosters engagement and collaboration.