Build me a production-style web app in Vietnamese called “AI MASTER – 100 Diamond Prompts”.
Generated Prompt
## APPLICATION OVERVIEW AI MASTER – 100 Diamond Prompts is an interactive web application designed to transform a static eBook of AI prompts into a dynamic learning experience. Users can explore and interact with prompts through a gamified dashboard, track their progress, and engage with the content at varying levels, fostering a sense of achievement as they advance through the material. ## CORE FEATURES 1. **Dashboard Page**: A high-level overview displaying user progress, featured prompts, and gamification statistics to motivate continued learning. 2. **Lesson Detail Page**: Focuses on a single prompt, providing detailed information including benefits, suggestions for application, and options to mark prompts as used or saved. 3. **Prompt Library Page**: A searchable and filterable repository of all prompts, allowing users to discover new content based on different criteria. 4. **Saved Prompts Page**: A dedicated area for users to revisit and manage their saved prompts, enabling easy access to previously liked or used prompts. 5. **Interactive Sidebar and Header**: Provides navigation through levels, progress tracking, and quick access to features like saved ideas and progress statistics. 6. **Gamification Elements**: Includes XP tracking, progress indicators, and badges for completing lessons, enhancing engagement and motivation. ## DESIGN SPECIFICATIONS - **Visual Style**: Dark premium futuristic UI with a gamified learning dashboard feel. - **Color Mode**: Dark navy, deep indigo, and midnight purple backgrounds with glowing purple accents and soft border cards. - **Layout**: - Left sidebar for navigation with levels and user info. - Top header displaying current level and progress. - Main content area dedicated to lesson details or prompt listings. - Optional right drawer/modal for quick previews or related prompts. - **Typography**: Clean and modern typography that enhances readability, with a focus on clarity and educational SaaS aesthetics. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS for responsive design and styling. - **UI Components**: Utilize shadcn/ui for reusable components. - **State Management**: Implement state management for user progress, saved prompts, current lesson, and search filters. ## IMPLEMENTATION STEPS 1. **Set up the project structure**: Initialize a new React application with TypeScript and Tailwind CSS. 2. **Develop the UI components**: Create reusable components like SidebarLevelItem, PromptCard, and ProgressBar using shadcn/ui. 3. **Build the Dashboard Page**: Implement the dashboard layout with progress tracking, XP badges, and featured prompts. 4. **Create the Lesson Detail Page**: Design the prompt detail layout, including benefit cards and navigation buttons. 5. **Establish the Prompt Library Page**: Implement search and filter functionalities, along with the grid/list view toggle. 6. **Develop the Saved Prompts Page**: Allow users to manage saved prompts with quick access functionalities. 7. **Integrate state management**: Use context API or a state management library to manage user progress, saved prompts, and interactions. 8. **Implement responsiveness**: Ensure that the layout adapts cleanly from desktop to tablet and mobile views, converting the sidebar to a drawer on smaller screens. 9. **Add gamification elements**: Integrate XP tracking, badges for achievements, and progress indicators to enhance user engagement. ## USER EXPERIENCE Users will interact with the application through a smooth and engaging interface. They will navigate between levels using the sidebar, explore prompts in the library, and access detailed lesson information with intuitive buttons. The gamification elements will encourage users to track their progress and feel rewarded for their learning efforts, enhancing retention and interaction with the content. This application aims to create an immersive educational experience that transforms static content into an engaging and interactive learning platform.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
