UI Design Prompting Instructions for Careplan Feature
Master Prompt for AI Design Tools (Figma Make, AuraChat, etc.)
Project Overview Prompt
Design a modern, clinical-grade patient encounter management system called "Careplan" with AI scribe integration and ePrescription capabilities. The system should feel professional, efficient, and reduce cognitive load for healthcare providers. Target users are doctors and medical assistants using desktop (primary) and tablet devices.
Design Language: Clean, medical-grade interface with plenty of white space, subtle shadows, and calming blue accent color (#4F89FF). Prioritize information hierarchy and quick actions. Think "Apple Health meets Epic EMR" but more streamlined.
Color Palette:
- Primary: #4F89FF (medical blue)
- Success: #10B981 (green for completed actions)
- Warning: #F59E0B (amber for alerts)
- Error: #EF4444 (red for critical alerts)
- Gray scale: #F9FAFB, #F3F4F6, #E5E7EB, #9CA3AF, #374151, #1F2937
- Background: #FFFFFF and #F9FAFB
Screen-by-Screen Design Prompts
1. Main Careplan Dashboard
Create a patient encounter dashboard with the following layout:
HEADER SECTION:
- Patient header card showing: Profile photo placeholder, "Lakshay Sharma, Male, 31 years old", and "Add Notes" button
- Tabs below: Vitals (active), Observations, Investigation, Medication, Advice, Next Visit
MAIN CONTENT AREA:
- Left side (70% width): Current tab content in clean card format
- Right side (30% width): Collapsible AI Scribe sidebar (initially collapsed)
VITALS TAB DESIGN:
- Grid layout with 3 input cards: "Systolic BP (mmHg)", "Diastolic BP (mmHg)", "Weight (Kg)"
- Each card has large, clear input field with placeholder "Enter"
- Bottom right: Blue "Next" button
RESPONSIVE BEHAVIOR:
- Tablet: Stack sections vertically, sidebar becomes full-width overlay
- Maintain touch targets minimum 44px
Include hover states, focus states, and loading states for all interactive elements.
2. AI Scribe Sidebar Component
Design a collapsible AI Scribe sidebar with the following sections:
COLLAPSED STATE (60px width):
- Vertical "AI Scribe" text
- Microphone icon with subtle pulsing animation when active
- Expand arrow button
EXPANDED STATE (400px width):
- Header: "AI Scribe" title with collapse button and audio mode toggle (Live/Dictation)
- Audio controls section with:
- Large record/stop button (red when recording)
- Audio quality indicator (green/yellow/red bars)
- Input device selector dropdown
TRANSCRIPTION SECTION:
- Real-time transcript display with scrolling text
- Confidence indicators (highlighted text for low confidence)
- "Clear" and "Pause" buttons
SUGGESTIONS SECTION:
- Expandable cards for each suggestion type:
- Medications (with dosage, frequency)
- Tests (with urgency indicators)
- Diagnoses (with ICD codes)
- Clinical notes snippets
- Each suggestion has: Accept (green check), Reject (red X), Modify (blue edit) buttons
- Confidence scores shown as small progress bars
STATES TO DESIGN:
- Idle (microphone ready)
- Recording (active animation)
- Processing (loading spinner)
- Poor audio quality (warning message)
- Disconnected (error state)
3. Enhanced Medication Management Screen
Design a comprehensive medication management interface:
HEADER SECTION:
- "Medications" title with prescription count badge
- Quick action buttons: "Add Medication", "Send All Prescriptions", "Check Interactions"
- Search/filter bar for existing medications
MEDICATION LIST:
- Card-based layout for each medication showing:
- Drug name (large, bold)
- Dosage, frequency, duration (secondary text)
- Special indicators: "Controlled Substance" badge, "AI Suggested" tag
- Action buttons: Edit, Remove, Send to Pharmacy
- Interaction warnings (amber alert icon with count)
ADD/EDIT MEDICATION MODAL:
- Drug name autocomplete field
- Dosage input with unit dropdown
- Frequency selector (dropdown with common options + custom)
- Duration field with unit selector
- Instructions text area
- Special sections for controlled substances (DEA requirements)
INTERACTION ALERTS:
- Warning cards showing:
- Interacting medications
- Severity level (color-coded)
- Clinical recommendation
- Override option with reason field
PRESCRIPTION SENDING:
- Pharmacy selection dropdown
- Batch send confirmation dialog
- Status indicators for sent prescriptions
- Success/error notifications
Include states for: Loading, sending, success, errors, and empty states.
4. Patient Information Panel
Design a comprehensive patient context panel that appears on the right side:
PATIENT SUMMARY CARD:
- Profile photo, name, age, gender
- Key vitals display (latest readings)
- Alert indicators for allergies, chronic conditions
VISIT CONTEXT:
- Visit type, date, time
- Chief complaint (large, prominent)
- Previous visit summary (collapsible)
ACTIVE MEDICATIONS:
- Scrollable list of current prescriptions
- Quick interaction check button
ALLERGIES & ALERTS:
- Red-highlighted allergy list
- Medical alerts and warnings
- Emergency contact info
HISTORY QUICK ACCESS:
- Recent lab results
- Previous diagnoses
- Hospitalization history
Design with collapsible sections and clean visual hierarchy.
5. Multi-Tab Content Areas
Design content layouts for each tab in the main interface:
OBSERVATIONS TAB:
- Chief complaint text area (large, prominent)
- Present illness section
- Review of systems checklist with expandable categories
- Physical examination findings grid
- Clinical assessment area
INVESTIGATION TAB:
- Ordered tests section with status indicators
- Results display area (tables, charts)
- Lab values with normal range indicators
- Imaging results viewer
- "Order New Test" quick actions
ADVICE TAB:
- Patient instructions text editor
- Lifestyle recommendations checkboxes
- Follow-up care plans
- Educational resources links
- Discharge planning checklist
NEXT VISIT TAB:
- Calendar integration for scheduling
- Follow-up type selection
- Reminder preferences
- Special instructions for next visit
Each tab should maintain consistent spacing, typography, and interaction patterns.
6. Layout Preset Options
Design three layout presets that users can switch between:
COMPACT LAYOUT:
- Minimal padding, smaller text
- Condensed cards, single-column forms
- Hidden labels, more icons
- Suitable for smaller screens
STANDARD LAYOUT (DEFAULT):
- Balanced spacing and text sizes
- Two-column forms where appropriate
- Clear labels and descriptions
- Good for most use cases
EXPANDED LAYOUT:
- Generous padding, larger text
- Single-column forms with lots of space
- Detailed labels and help text
- Suitable for accessibility needs
Include a layout switcher in the top navigation with preview thumbnails.
7. Responsive Design Considerations
Design responsive breakpoints and adaptations:
DESKTOP (1200px+):
- Full sidebar layout
- Multi-column forms
- Hover interactions
TABLET (768px - 1199px):
- Collapsible sidebar becomes overlay
- Single-column layout
- Larger touch targets
- Swipe gestures for tabs
MOBILE (< 768px):
- Full-screen modal overlays
- Bottom sheet interactions
- Simplified navigation
- Voice-first interactions prominent
Include touch-friendly interactions and gestures for tablet/mobile use.
8. Notification and Alert System
Design a comprehensive notification system:
TOAST NOTIFICATIONS:
- Success: Green with checkmark (prescription sent)
- Warning: Amber with exclamation (drug interaction)
- Error: Red with X (connection failed)
- Info: Blue with i icon (AI suggestion available)
IN-LINE ALERTS:
- Drug interaction warnings in medication cards
- Allergy alerts when prescribing
- Audio quality warnings in AI scribe
- Form validation errors
MODAL ALERTS:
- Critical drug interactions (blocking)
- Prescription sending confirmations
- Audio permission requests
- Connection loss warnings
STATUS INDICATORS:
- AI scribe connection status
- Prescription sending progress
- Audio recording status
- Patient data sync status
Each should have appropriate animations, auto-dismiss timers, and accessibility considerations.
9. Loading and Empty States
Design engaging loading and empty states:
LOADING STATES:
- AI processing: Animated brain/thinking icon
- Prescription sending: Progress bar with pharmacy icon
- Audio transcription: Sound wave animation
- Data fetching: Subtle skeleton loaders
EMPTY STATES:
- No medications: Illustration with "Add first medication" CTA
- No suggestions: "AI listening..." with microphone graphic
- No interactions: "No conflicts found" with green checkmark
- No patient history: "First visit" with welcome message
ERROR STATES:
- Connection lost: Friendly illustration with retry button
- Permission denied: Clear explanation with settings link
- Service unavailable: Maintenance message with estimated time
Include helpful micro-interactions and clear recovery paths.
10. Accessibility Features
Design with accessibility in mind:
VISUAL ACCESSIBILITY:
- High contrast mode toggle
- Font size controls
- Color blind friendly indicators
- Focus indicators for keyboard navigation
AUDIO ACCESSIBILITY:
- Visual indicators for all audio cues
- Transcription display for voice commands
- Haptic feedback options (mobile/tablet)
MOTOR ACCESSIBILITY:
- Large touch targets (minimum 44px)
- Voice-controlled actions
- Reduced motion options
- Sticky scrolling for long forms
COGNITIVE ACCESSIBILITY:
- Clear, simple language
- Consistent navigation patterns
- Progress indicators for multi-step processes
- Confirmation dialogs for destructive actions
Component Library Specifications
11. Design System Components
Create a comprehensive component library:
BUTTONS:
- Primary: Blue background, white text
- Secondary: White background, blue border
- Danger: Red background, white text
- Ghost: Transparent background, colored text
- Icon buttons: Square, circular variants
FORM ELEMENTS:
- Text inputs with floating labels
- Dropdowns with search functionality
- Toggle switches for boolean options
- Radio buttons and checkboxes
- Date/time pickers
CARDS:
- Basic content cards with shadows
- Interactive cards with hover states
- Alert cards with colored borders
- Collapsible cards with expand/collapse
DATA DISPLAY:
- Tables with sorting and filtering
- Progress bars and indicators
- Charts and graphs (simple)
- Status badges and tags
NAVIGATION:
- Tab components (horizontal, vertical)
- Breadcrumbs
- Pagination
- Side navigation menus
Each component should include hover, focus, active, and disabled states.
Final Assembly
Combine all the above components into a cohesive design system for a medical careplan application. Ensure:
- Consistent spacing (8px grid system)
- Typography scale (14px base, 1.5 line height)
- Color usage follows medical UI best practices
- Animations are subtle and purposeful
- Information hierarchy is clear
- Critical actions are prominent
- Error prevention is built into the flow
- The design feels trustworthy and professional
Create high-fidelity mockups showing the complete user journey from patient selection through prescription sending, including all interaction states and responsive breakpoints.
Export assets optimized for development handoff with proper naming conventions and specifications.