Claude/ChatGPT Prompt to Build a Veterinary Booking & Telemedicine UI

What this prompt does

This prompt generates a full veterinary platform UI spec built around a deliberate emotional design philosophy: warm earth tones, rounded typography, and pet-avatar-anchored navigation — not the sterile white of a human medical portal. The template enforces this distinction explicitly, listing cold clinical aesthetics as an anti-pattern to avoid, which is what makes the output useful rather than a generic healthcare clone.

The structure follows a specific clinical flow the template calls out directly — pet profiles as the navigation anchor, then appointment booking, then telemedicine — which mirrors how anxious pet owners actually think: "who is my pet and what's their status" before "what appointment do I need." The prompt also mandates an always-visible emergency banner, a non-negotiable UX requirement for any platform where someone might be dealing with a critically ill animal at 2am.

You get six distinct UI sections — pet profiles, appointment booking, telemedicine, vaccination tracker, prescription management, and emergency banner — plus framework-specific component code for the two most reused pieces: the pet profile card and vaccination tracker. The code output is tied to the [framework] variable, so it matches your actual stack.

What separates this from a generic "design a vet app" prompt is the specificity of the variables. Swapping [practice_type] from "solo exotic animal clinic" to "multi-location pet hospital chain" produces structurally different output — different vet selection logic, different record complexity, different telemedicine triage flows. The template does not have a fixed answer for any of these; it defers entirely to what you put in.

When to use it

• You are building a client-facing portal for an independent veterinary practice and need a complete UI specification before writing a line of code.
• You are a freelance designer pitching a rebrand to a vet clinic and want a concrete visual direction document — color mood, typography rules, component hierarchy — to present at the first meeting.
• You need working React or Vue components for a pet profile card or vaccination tracker to drop into an existing booking system.
• You are prototyping a telemedicine feature for a pet insurance company's app and need a pre-call symptom questionnaire flow with photo upload.
• You are a product manager scoping a custom build and need a full feature surface document to share with engineering before sprint planning.

Example output

For practice_type: "small animal general practice", features: "booking, telemedicine, vaccination reminders", pet_types: "dogs, cats", framework: "React":

// VaccinationTracker.jsx — returned by the AI
const VaccinationTracker = ({ pet }) => {
  const vaccines = pet.vaccinations.map(v => ({
    ...v,
    status: daysUntil(v.dueDate) < 0 ? "overdue"
           : daysUntil(v.dueDate) < 30 ? "due-soon"
           : "current"
  }));

  return (
    <div className="rounded-2xl bg-amber-50 p-6">
      <h3 className="font-sans text-stone-800">🐾 {pet.name}'s Vaccines</h3>
      {vaccines.map(v => (
        <VaccineRow key={v.name} vaccine={v} />
      ))}
      <CountdownTimer nextDue={vaccines.find(v => v.status !== "current")} />
    </div>
  );
};

font-sans here is a placeholder — pair it with your Tailwind config's custom font-family plugin if you want the rounded typeface the template specifies. daysUntil is a utility function the AI defines alongside the component in the same response.

The AI also returns the pet profile card with editable avatar upload, breed selector, and a medical history accordion — all in the same response.

Pro tips

• Set [practice_type] as specifically as possible — "feline-only referral practice" yields a fundamentally different vet selection UI than "24-hour emergency animal hospital." The second has no routine appointment slots at all, which collapses the booking section into a walk-in triage interface instead.
• For [pet_types], including exotics (rabbits, reptiles, birds) forces the AI to handle species-specific vaccination schedules that dog/cat defaults skip entirely. Rabbits have no standard rabies vaccination protocol; reptiles have no DAPP equivalent. This is where the vaccination tracker genuinely diverges from a simple date-countdown widget into something clinically specific.
• Pair the generated framework code with your actual design token file. Provide your existing color variable names after the prompt — the AI will substitute them into the component output rather than inventing new hex values you then have to map back.
• The telemedicine section generates a pre-call symptom questionnaire at a high level on the first pass. Run the prompt once with features including telemedicine, then send a follow-up asking the AI to expand only that questionnaire into a multi-step form with conditional logic (e.g., "if symptom is vomiting, show frequency and blood-present fields") — the layered approach gets you to production-grade detail faster than trying to pack it all into one prompt.
• The emergency banner is always generated, but its content is placeholder text. Before handing off to a developer, confirm the actual emergency hotline number and the nearest 24-hour clinic — the AI cannot know your local contacts and will invent plausible-looking but fictional ones.