VitalsAI, - The Master Lovable Prompt Role: You are an expert Full-Stack Developer and UI/UX Designer. Project: Build a Modern Cyber-Wellness SPA...
Generated Prompt
```markdown ## APPLICATION OVERVIEW VitalsAI is a modern Single Page Application (SPA) focused on cyber-wellness, designed to help users track and analyze their health metrics. The application leverages React, Tailwind CSS, and Lucide icons to deliver an engaging user experience with a clean, minimalist design that highlights data visualization and user insights. ## CORE FEATURES 1. **Multi-Screen Onboarding**: A Digital Intake process guiding users through identity verification, BMI calculation, and lifestyle goal setting, with a demo login for instant access. 2. **User Profile & Health Radar**: A central hub for user health metrics, featuring a Spider Chart to compare sleep, activity, vitals, and nutrition. 3. **Daily Logs & Smart CSV Importer**: Users can log daily health metrics and import data via a Smart CSV Importer that maps uploaded columns to database fields. 4. **Core Dashboard Metrics**: Displays hero metrics with current values compared to a 7-day rolling average, alongside a dual-axis line graph for metrics like weight vs. calories. 5. **Insights Engine**: Provides trend regression displays, multi-variable correlation insights, and anomaly alerts for significant health changes. 6. **Daily Action Plan & Doctor-Ready Export**: Generates actionable checklists based on user data and offers a clean, printable summary for medical consultations. ## 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 layout features a persistent left-hand sidebar for navigation, a top-bar for profile and alerts, and a content area that adapts to the selected feature, ensuring a seamless user experience. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **State Management**: Redux Toolkit (optional, specify if needed) ## IMPLEMENTATION STEPS 1. **Set Up Project Environment**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui. 2. **Design System Implementation**: Define the color palette, typography, and border radius in Tailwind's configuration file to ensure consistency across the application. 3. **Build Onboarding Screens**: Create multi-screen onboarding using React Router for navigation and state management for each screen's data. 4. **Develop User Profile and Health Radar**: Implement the User Profile page with a spider chart using Recharts to visualize health metrics. 5. **Create Daily Logs & CSV Importer**: Set up a Floating Action Button for daily log entries and build the Smart CSV Importer UI for users to map their data. 6. **Core Dashboard Development**: Implement hero metrics and the dual-axis line graph for visualizing user data trends. 7. **Insights Engine Logic**: Integrate the logic for trend regression, multi-variable correlation, and anomaly detection, displaying insights in a dedicated section. 8. **Daily Action Plan & Export Feature**: Generate a checklist for daily actions based on user data and create functionality for exporting a doctor-ready summary. ## USER EXPERIENCE Users will begin with a guided onboarding process, entering their personal data and health goals. Once onboarded, they can easily navigate through their profile, view health metrics, log daily data, and receive actionable insights tailored to their health journey. The design prioritizes clarity and simplicity, ensuring users can focus on their wellness without distractions. ```
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!
