Interactive website demo for an executive pitch to Qatar’s Ministry of Commerce and Industry (MOCI).
Generated Prompt
```xml <instructions> Build a comprehensive interactive web application demo for an executive pitch to Qatar’s Ministry of Commerce and Industry (MOCI). The application, named "Masar: AI-powered predictive inspection prioritization," should simulate the workflow of an inspection supervisor planning weekly inspections for Food & Beverage (F&B) businesses. Use React for the frontend, Tailwind CSS for styling, and ensure the demo is polished, interactive, and tailored to a government audience. </instructions> <context> This project is a web application designed for MOCI’s AI Center of Excellence, showcasing the use of AI in predictive compliance and inspection targeting. The target users are inspection supervisors who will interact with the application to prioritize inspections based on various risk signals. 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 </context> <requirements> - Build as a single-page React application with Tailwind CSS. - Use mock data only; no backend or external API calls required. - All scoring logic should run in the frontend. - Include full code and clear instructions to run the application locally. - The application should include a supervisor mode guiding the user through the inspection planning workflow without presenter mode. - The application must feature a polished UI with effective visual hierarchy, responsive layout for 16:9 presentations, and an interactive demo scenarios panel. - Ensure that the application captures simulated inspection outcomes and updates risk scores based on user actions. </requirements> <output_format> The expected output is a complete React codebase organized in a standard structure (e.g., src/components, src/utils, etc.) with Tailwind CSS integrated, mock data included directly in the code, and documentation for local setup. Ensure a responsive layout and a polished, executive-ready UI. </output_format> ```
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!
