Act as a world-class senior frontend engineer, senior product designer, healthcare UX specialist, AI interaction designer, accessibility expert, and experienced global hackathon winner.
You are building the frontend for:
MEDET — AI-Powered Rural Healthcare Assistant
MEDET is NOT a generic chatbot. It is a compassionate AI healthcare companion designed for rural and underserved communities.
The platform must feel:
- human-centered
- trustworthy
- emotionally warm
- accessible
- simple
- modern
- lightweight
- multilingual-friendly
- mobile-first
- low-bandwidth optimized
━━━━━━━━━━━━━━━━━━ CORE PRODUCT MISSION ━━━━━━━━━━━━━━━━━━
MEDET exists to:
- provide healthcare guidance
- ask symptom follow-up questions
- explain conditions simply
- detect emergencies
- recommend professional medical care
- avoid direct diagnosis
- support rural healthcare accessibility
This product should feel like: “an intelligent healthcare companion” NOT: “a cold AI dashboard”
━━━━━━━━━━━━━━━━━━ IMPORTANT ENGINEERING CONTEXT ━━━━━━━━━━━━━━━━━━
The backend infrastructure already exists.
MEDET will connect to:
- Omnix AI backend
- streaming AI APIs
- Tavily web search
- Supabase auth/session APIs
- AI orchestration APIs
DO NOT rebuild backend systems unnecessarily.
Your task is: build a BEAUTIFUL, production-quality healthcare frontend experience.
━━━━━━━━━━━━━━━━━━ PRIMARY DESIGN GOAL ━━━━━━━━━━━━━━━━━━
The UI should emotionally communicate:
- safety
- trust
- care
- simplicity
- clarity
- accessibility
- reliability
The interface must feel approachable for:
- rural users
- elderly users
- low-technical-literacy users
- multilingual users
━━━━━━━━━━━━━━━━━━ DESIGN LANGUAGE ━━━━━━━━━━━━━━━━━━
Visual inspiration:
- modern healthcare apps
- Calm
- Headspace
- Apple Health
- WHO-style clean interfaces
- AI-native modern SaaS
Style requirements:
- soft gradients
- calm color palette
- accessible typography
- rounded corners
- subtle shadows
- smooth animations
- clean spacing
- warm UI tone
- modern but simple
Avoid:
- cyberpunk AI look
- overly technical dashboards
- clutter
- dark hacker aesthetics
- aggressive neon visuals
━━━━━━━━━━━━━━━━━━ CORE FRONTEND PAGES ━━━━━━━━━━━━━━━━━━
Build and organize:
- Landing Page
- Login / Signup
- AI Healthcare Chat Interface
- Emergency Assistance Panel
- Nearby Healthcare Help Section
- Medicine Reminder UI
- Language Selection Flow
- Voice Interaction UI
- Profile / Family Health Profile
- Mobile-first Navigation
━━━━━━━━━━━━━━━━━━ LANDING PAGE REQUIREMENTS ━━━━━━━━━━━━━━━━━━
The landing page should immediately communicate:
“Accessible AI healthcare guidance for rural communities.”
Must include:
- emotional hero section
- AI healthcare illustration/mockup
- multilingual healthcare messaging
- mobile-first healthcare visuals
- feature highlights
- emergency support section
- trust-building design
- clean CTA buttons
Core CTAs:
- Start Consultation
- Continue with Google
- Talk to AI
- Emergency Help
Hero copy should feel compassionate and trustworthy.
━━━━━━━━━━━━━━━━━━ CHAT INTERFACE REQUIREMENTS ━━━━━━━━━━━━━━━━━━
The AI chat interface is the HEART of MEDET.
Requirements:
- extremely clean layout
- mobile-first chat experience
- smooth streaming responses
- calming assistant message design
- large readable typography
- easy-to-tap interaction buttons
- voice input support
- multilingual support UI
- low-bandwidth optimized rendering
Assistant messages should:
- feel compassionate
- avoid robotic tone
- use simple language
- visually separate emergency warnings
- explain conditions simply
━━━━━━━━━━━━━━━━━━ AI RESPONSE UX ━━━━━━━━━━━━━━━━━━
Responses must support:
- symptom follow-up questions
- emergency detection
- healthcare guidance
- nearby clinic suggestions
- medication reminders
- multilingual rendering
Emergency responses should trigger:
- warning cards
- emergency styling
- urgent healthcare recommendation banners
Example: If chest pain or breathing difficulty is detected: show emergency escalation UI immediately.
━━━━━━━━━━━━━━━━━━ VOICE-FIRST EXPERIENCE ━━━━━━━━━━━━━━━━━━
Voice interaction is a MAJOR differentiator.
Implement:
- microphone button
- speech-to-text flow
- listening animation
- speaking indicator
- multilingual voice support UI
The experience should feel: simple enough for non-technical rural users.
━━━━━━━━━━━━━━━━━━ MULTILINGUAL SUPPORT ━━━━━━━━━━━━━━━━━━
Design multilingual-ready architecture.
Support:
- Hindi
- English
- Bengali
- Nepali
- Tamil
- Kannada
- Marathi
Language switching must feel:
- instant
- intuitive
- visually accessible
Do NOT hardcode English-only assumptions.
━━━━━━━━━━━━━━━━━━ EMERGENCY UX ━━━━━━━━━━━━━━━━━━
MEDET must visually handle emergencies differently.
If emergency symptoms are detected:
- show emergency alert card
- highlight urgency visually
- recommend immediate medical care
- display nearest clinic section
- provide emergency contact suggestions
Emergency UI must:
- stand out clearly
- avoid panic-inducing visuals
- feel supportive and actionable
━━━━━━━━━━━━━━━━━━ MEDICINE REMINDER UI ━━━━━━━━━━━━━━━━━━
Build a simple medicine reminder experience.
Features:
- reminder cards
- medicine schedule display
- dosage timing
- reminder status
- mobile-friendly interactions
Keep it:
- extremely simple
- elderly-friendly
- readable
━━━━━━━━━━━━━━━━━━ NEARBY HEALTHCARE SECTION ━━━━━━━━━━━━━━━━━━
Design UI for:
- nearest clinics
- nearby hospitals
- healthcare centers
- emergency contacts
Include:
- map preview cards
- distance display
- clinic contact actions
- clean card-based layout
━━━━━━━━━━━━━━━━━━ PROFILE SYSTEM ━━━━━━━━━━━━━━━━━━
Simple family healthcare profiles:
- name
- age
- allergies
- blood group
- medical conditions
- medicines
- emergency contacts
Design for:
- quick access
- readability
- low-complexity interaction
━━━━━━━━━━━━━━━━━━ MOBILE-FIRST REQUIREMENTS ━━━━━━━━━━━━━━━━━━
MEDET MUST feel amazing on mobile.
This is NOT desktop-first software.
Prioritize:
- thumb-friendly interactions
- large tap targets
- responsive layouts
- readable typography
- low-bandwidth optimization
- fast loading
━━━━━━━━━━━━━━━━━━ ACCESSIBILITY REQUIREMENTS ━━━━━━━━━━━━━━━━━━
Optimize for:
- elderly users
- low literacy users
- accessibility
Requirements:
- strong contrast
- readable font sizes
- clear interaction states
- voice guidance support
- minimal cognitive overload
- simple navigation
━━━━━━━━━━━━━━━━━━ ANIMATION REQUIREMENTS ━━━━━━━━━━━━━━━━━━
Use smooth and meaningful animations:
- streaming AI responses
- voice listening pulse
- emergency card transitions
- loading skeletons
- chat animations
- hover states
- page transitions
Avoid:
- flashy effects
- distracting motion
- heavy GPU animations
━━━━━━━━━━━━━━━━━━ TECHNICAL REQUIREMENTS ━━━━━━━━━━━━━━━━━━
Use:
- Next.js
- TailwindCSS
- Framer Motion
- shadcn/ui
- responsive architecture
- modular components
Maintain:
- clean architecture
- reusable components
- scalable frontend structure
- clean API integration layer
━━━━━━━━━━━━━━━━━━ PERFORMANCE REQUIREMENTS ━━━━━━━━━━━━━━━━━━
Optimize for:
- rural internet conditions
- low-end Android devices
- slow bandwidth
- fast interaction response
Requirements:
- lazy loading
- optimized assets
- lightweight animations
- efficient rendering
- minimal unnecessary rerenders
━━━━━━━━━━━━━━━━━━ UX PHILOSOPHY ━━━━━━━━━━━━━━━━━━
MEDET should feel: like a caring healthcare assistant.
NOT: like an AI experiment.
The UI should emotionally communicate: “We are here to help you.”
━━━━━━━━━━━━━━━━━━ HACKATHON WINNING STRATEGY ━━━━━━━━━━━━━━━━━━
The frontend must optimize for:
- emotional impact
- demo quality
- storytelling
- simplicity
- real-world usefulness
Judges should immediately understand:
- the problem
- the impact
- the accessibility value
- the AI value
- the healthcare value
━━━━━━━━━━━━━━━━━━ IMPLEMENTATION APPROACH ━━━━━━━━━━━━━━━━━━
Before coding:
- Analyze frontend structure
- Create scalable design system
- Define component architecture
- Create mobile-first layout system
- Build reusable healthcare UI primitives
- Then implement screens progressively
Do NOT create random disconnected pages.
━━━━━━━━━━━━━━━━━━ FINAL GOAL ━━━━━━━━━━━━━━━━━━
The final product should feel like:
- a real healthcare platform
- a deployable rural healthcare solution
- a compassionate AI assistant
- a polished startup product
- a hackathon-winning application
The frontend should emotionally impress judges within the first 30 seconds.