I have a file for the project i am using and i need to generate a prompt for the lovableai so create a prompt in need to design an ui and the flow...
Generated Prompt
```markdown # Lovable AI Prompt for Class 10 Math and Science Guide Web Application ## APPLICATION OVERVIEW This application is an **AI-assisted educational web app** designed for Class 10 Math and Science. It serves as an offline-first study companion, allowing students to access structured chapter content, quizzes, and AI tutoring in an engaging and user-friendly interface. ## CORE FEATURES 1. **Chapter Catalog**: A well-organized listing of chapters grouped by subject, allowing users to easily navigate through Math and Science topics. 2. **Structured Lesson Pages**: Each chapter includes detailed lessons with explanations, formulas, examples, and multimedia integrations for enhanced learning. 3. **AI Tutoring Chat**: An integrated AI chat feature that assists students with chapter-specific questions and provides instant feedback on queries. 4. **Quizzes and Progress Tracking**: Interactive quizzes that provide immediate scoring and feedback, along with progress tracking to monitor learning advancement. 5. **Bookmarks and Offline Reading**: Users can bookmark important sections and access previously viewed lessons even without an internet connection. 6. **Admin Interface**: A backend tool for content administrators to manage and update lessons, PDFs, and quizzes efficiently. ## 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 main layout structure includes a top navigation bar for easy access to subjects, a hero section for app introduction, a chapter catalog grid, and a footer with contact information. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript. - **Styling**: Tailwind CSS. - **UI Components**: shadcn/ui for a consistent look and feel. - **State Management**: Redux or Context API as needed for managing application state. ## IMPLEMENTATION STEPS 1. **Set Up Project**: Create 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. **Design Layout**: Implement the main layout structure with a navigation bar, hero section, and chapter catalog. 4. **Create Core Features**: Develop components for the chapter catalog, structured lesson pages, AI tutoring chat, quizzes, and progress tracking. 5. **Implement State Management**: Set up Redux or Context API to manage user progress and quiz results. 6. **Add Offline Support**: Utilize service workers to enable offline reading capabilities and caching of content. 7. **Testing and Iteration**: Conduct thorough testing for functionality and responsiveness, iterating based on user feedback. 8. **Deployment**: Prepare the app for deployment on a cloud platform (e.g., Vercel or Netlify) and ensure proper configurations for production. ## USER EXPERIENCE Key user interactions will include navigating through the chapter catalog to select subjects, engaging with structured lesson content that incorporates multimedia, using the AI chat for assistance, taking quizzes to evaluate understanding, and utilizing bookmarks to save important sections for later review. The app will offer an intuitive and clean interface that promotes a smooth learning experience. ```
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!
