Claude/ChatGPT Prompt to Build a Medical Clinic Patient Portal UI

What this prompt does

This prompt generates a complete patient portal UI specification built around healthcare-specific design constraints — not aesthetic preferences, but the psychological reality that patients using these interfaces are often anxious, elderly, or managing a chronic condition. The template enforces a calming color palette (soft blues, teals, white space, green for confirmations), explicitly bans harsh reds and aggressive pop-ups, and mandates 16px+ body type with high contrast. Those aren't stylistic choices; they are WCAG AAA and plain-language requirements baked directly into the prompt structure.

The anti-pattern list is where this template earns its value. It tells the AI what NOT to do — no clinical hospital imagery, no public symptom exposure, no tech-savvy gatekeeping for basic tasks like viewing a lab result. This negative constraint set is often more useful than the positive one, because it prevents the AI from defaulting to generic SaaS dashboard patterns that feel cold and alienating in a medical context.

The seven output sections map directly to the core patient journey: dashboard arrival, appointment booking, records review, provider communication, and prescription management — plus an accessibility section targeting WCAG AAA, and framework-specific code for the most interaction-heavy component, the appointment calendar.

When to use it

• Building a white-label patient portal for a multi-specialty clinic that needs to serve patients aged 18–80 with varying digital literacy
• Designing an MVP for a telehealth startup that needs HIPAA-aware messaging UI and refill request flows mocked out before dev sprint planning (note: the template generates interface specs, not compliant implementations — pair with a separate technical compliance prompt for backend safeguards)
• Presenting a portal redesign proposal to a healthcare client where stakeholders need to see all major screens in one coherent output
• Generating a React or Vue appointment booking calendar with slot selection logic as a starting scaffold for a frontend developer
• Conducting a UX audit of an existing portal by comparing AI-generated best-practice output against the current implementation
• Prototyping a rural clinic portal where accessibility and low-bandwidth assumptions need to be explicit from day one

Example output

For clinic_type: family practice, features: appointment booking, prescription refills, lab results, demographics: adults 35–75, mixed digital literacy, framework: React:

Dashboard card — "Your next appointment: Dr. Patel, Tuesday June 24, 10:30 AM"
[Countdown: 5 days] [Add to Calendar] [Message Dr. Patel]

Appointment Booking (React):
<SlotPicker
  availableSlots={slots}
  onSelect={handleSlotSelect}
  visitTypes={["In-Person", "Video", "Phone"]}
  insuranceVerified={patient.insuranceStatus}
/>
Slots render as large touch targets, unavailable slots greyed out — not hidden,
preserving spatial context for rescheduling.

Prescription refill card shows medication name, last filled date, days remaining,
and a single "Request Refill" CTA — no login wall to reach it from the dashboard.

Pro tips

• Set clinic_type as specifically as possible (pediatric urgent care vs clinic) — the prompt's design rules stay constant but the feature priority shifts. A pediatric clinic context pushes the AI toward age-appropriate design patterns for child patients and their caregivers; you may need to add explicit features like caregiver account access to your features variable since the template doesn't assume it.
• If you need output that touches HIPAA technical controls, add include: HIPAA technical safeguards notes per section to the features field — the template's design focus won't cover audit logging or encryption specs unless you ask explicitly.
• The anti-pattern list in the template is your quality gate: if the AI output includes red error states for appointment conflicts, or requires users to navigate three screens to send a message, the output has drifted from the template's intent. Regenerate with those specific anti-patterns called out again in your variables.
• Pair the secure messaging section output with a separate backend prompt covering HIPAA-compliant message threading — no PHI in email subject lines, audit trail, retention per your state's medical records law. The UI prompt intentionally stops at the interface layer.
• For the framework variable, specifying React + shadcn/ui or Vue + Headless UI gets you component-library-aware code rather than raw HTML — the slot selection and large-target requirements map cleanly to these component primitives and cuts integration time significantly.