Vibe Code a Family Dental Clinic Website
Free vibe coding prompt to build a family dental clinic website. Services, online booking, insurance info, dentist bios, and SEO-optimized schema markup. One HTML file, production-ready.
Build a one-page family dental clinic website as a single self-contained
HTML file (inline CSS and JS, no external dependencies except Google Fonts
and Unsplash images via their CDN).
═══════════════════════════════════════════════════════════════
BUSINESS DETAILS
═══════════════════════════════════════════════════════════════
- Clinic name: [CLINIC NAME]
- Lead dentist(s): [NAME, DDS / DMD], plus optional associates
- Specialties: general, pediatric, cosmetic, orthodontics, implants, sedation
- Address: [FULL ADDRESS]
- Phone: [PHONE]
- Email: [EMAIL]
- Hours: [WEEKDAY / SAT / SUN]
- Insurance accepted: [LIST 6-8 PROVIDERS as plain text names]
- Booking: form + click-to-call; mention same-week appointments
═══════════════════════════════════════════════════════════════
BRAND
═══════════════════════════════════════════════════════════════
- Brand colors: soft sky blue (#3b8ee6), warm ivory (#f7f3ee), navy text
(#0f2235), single coral accent (#ff7a5b) for CTAs. Override if user provides.
- Derive deeper variants for AA contrast on body text.
═══════════════════════════════════════════════════════════════
DESIGN DIRECTION
═══════════════════════════════════════════════════════════════
- Bright, friendly, calm, not childish, not clinical-cold.
- Type pairing: rounded geometric sans (Poppins, Sora, or DM Sans) for
headings + Inter for body. NO script fonts. NO clip-art comic faces.
- Eyebrow labels: uppercase, tracked .16em, sky-blue, prefixed by a 24px
CSS ::before line.
- Headlines: warm and short with ONE italic accent ("Smiles that *feel
like home*"). Italic word uses a coral-to-blue gradient text fill.
- Soft rounded corners (16-28px), generous padding, plenty of whitespace.
- Icon system: 24x24 line icons, fill="none", stroke="currentColor",
stroke-width 1.7, round caps. Inline <symbol>. Cover at minimum: tooth,
shield, smile-curve, sparkle, child-figure, calendar, clock, pin, phone,
mail, star, check.
- Icon containers: 48x48 rounded squares with sky-tinted bg, flip to filled
sky-blue with ivory icon on hover.
- Motion: scroll fade-ins, soft 4-6px hover lifts, gentle pulse on the
primary CTA. No spin, no bounce.
═══════════════════════════════════════════════════════════════
SECTIONS (in this exact order)
═══════════════════════════════════════════════════════════════
1. ANNOUNCEMENT BAR (top)
- "New patients welcome • Most insurance accepted • Same-week appointments"
in compact ivory text on sky-blue gradient bar
2. FIXED NAV
- Glass effect ivory translucent bg + backdrop blur
- Wordmark left | anchor nav center | "Book appointment" coral pill right
3. HERO
- Two-column: text left, photo right (Unsplash search: "dental clinic
reception" or "smiling family") with rounded-28 corners, soft blue
gradient overlay bottom-right
- Left: eyebrow with line marker, headline ("Healthy smiles for the
*whole family*"), 2-line subhead, primary "Book appointment" CTA +
secondary "Call [number]"
- Floating pill on image: "Now accepting new patients" with pulsing
coral dot
4. SERVICES
- Eyebrow + headline + subhead
- Auto-fit grid (minmax 280px) of 6 service cards
- Each: 48x48 sky-tinted icon badge + title (sans display) + 2-line
description as prose + small uppercase tag chip ("General", "Cosmetic",
"Kids", etc.)
- One card highlighted (sky-blue gradient bg, ivory text) for the clinic's
featured service
5. MEET THE DENTISTS
- Eyebrow + headline
- 2-3 cards in grid
- Each: portrait photo (rounded 20px), name (sans display), credentials
row ("DMD, FAGD"), 2-sentence bio, small social/contact icons row
- Use real Unsplash professional portraits, no fake stock people
6. INSURANCE & PAYMENT
- Thin ivory section with subtle borders top/bottom
- "INSURANCE ACCEPTED" label left + horizontal row of plaintext provider
names right (NOT real logos, use elegant uppercase typeset names)
- Below row: 1-line copy about flexible payment plans + 0% financing
mentioned as text only
7. NEW PATIENT WELCOME
- Two-column: image left (clean exam room), text right
- Right: eyebrow, headline, 3-step checklist with check-circle icons
(book online → fill new-patient forms → arrive 10 min early), plus
"Download new-patient forms PDF" link (anchor to # placeholder)
8. TESTIMONIALS
- 3 quote cards in grid
- Each: oversized opening quotation mark in muted sky-blue, quote body
(vary lengths), 5 coral SVG stars, separator, gradient-circle initials
avatar + first name + last initial + service ("Annual cleaning",
"Invisalign", "Kids' first visit"), NOT photos of fake people
9. BOOKING FORM
- Two-column: reassurance left, form card right
- Left: eyebrow, headline ("Book in under *60 seconds*"), 3 bullets with
check icons ("Confirmation by email", "Easy rescheduling",
"Reminders by text")
- Right: ivory card with subtle blue border
• Fields: full name, email, phone, preferred date, preferred time
(morning/afternoon/evening), service (select), are you a new patient
(yes/no), special concerns (textarea)
• Submit coral button, full width
• Inline JS success message on submit (preventDefault)
10. HOURS + MAP
- Two-column: hours table left, embedded Google Map right (rounded 20px,
shadow)
- Map iframe via Google Maps embed URL (no API key)
- Above map: small "Get directions →" link opening Google Maps in new tab
- Mobile: stacks vertically, hours above map
11. FAQ
- Two-column: intro left, accordion right
- 6 collapsible <details> elements: "Do you accept my insurance?",
"Is teeth whitening safe?", "Do you treat kids?", "How often should I
come in?", "What if I have dental anxiety?", "Do you offer emergency
appointments?"
- "+" icon rotates 45° to "×" on open
12. FOOTER (deep navy)
- Newsletter card top: "Get monthly dental tips" + email input + coral
button + inline success
- Centered logo + italic serif tagline (NOT handwritten)
- Social row of glass-circle icons (only provided platforms)
- Bottom row: hours + address + phone + copyright
═══════════════════════════════════════════════════════════════
TECHNICAL REQUIREMENTS
═══════════════════════════════════════════════════════════════
- Single index.html, no build step
- JSON-LD `Dentist` schema in <head> with name, address, telephone, hours,
priceRange, medicalSpecialty
- CSS custom properties for palette + gradients at top
- Smooth scroll with scroll-padding-top
- Real Unsplash images via CDN with ?w=900&q=80&auto=format&fit=crop
- loading="eager" on hero, "lazy" elsewhere
- tel:/mailto: links; mailto with prefilled subject
- Responsive at 900px and 500px breakpoints
- Semantic HTML5; aria-labels on icon-only links
- Color contrast AA minimum on body text
- Favicon: inline SVG data URI (tooth mark)
═══════════════════════════════════════════════════════════════
COPY VOICE
═══════════════════════════════════════════════════════════════
Warm, plain-English, never patronizing. Speak to the parent and the patient.
Specific over generic ("Your child's first visit is a 15-minute tour, not
a procedure", not "We make kids feel safe"). Avoid medical jargon unless
immediately defined. Testimonials should feel like real Google reviews with
specific procedures, varying lengths.
═══════════════════════════════════════════════════════════════
ANTI-PATTERNS TO AVOID
═══════════════════════════════════════════════════════════════
- No emojis (including the smile emoji) anywhere
- No animated 3D tooth GIFs or cartoon characters
- No fake stock photos of overly white-toothed models
- No real insurance company logos (use typeset names)
- No script fonts, no Comic Sans
- No "passion for smiles" / "love of dentistry" filler
- No bright clinical-blue gradients reminiscent of hospital signage
- No photos of dental tools in close-up (intimidating)
═══════════════════════════════════════════════════════════════
SEO & DISCOVERABILITY
═══════════════════════════════════════════════════════════════
Implement all of the following so the page ships production-ready for search
engines and social sharing. This is not optional; treat it as part of the
build, not an afterthought.
DO NOT INVENT DATA: never fabricate business names, addresses, phone or email, license or certification numbers, coordinates, prices, reviews or ratings, team members, photos, press mentions, or results and stats. If a detail is not provided, leave a clearly labeled {{TODO: ...}} placeholder — never a plausible-looking fake. Any form must POST to a real endpoint (Formspree, Web3Forms, Basin, or similar) or fall back to a mailto:/tel: link — never show a fake "success" message with no backend. Wrap every motion effect in @media (prefers-reduced-motion: reduce), and make sure any accent color used for text, links, or prices meets WCAG 2.2 AA contrast against its background.
1. TITLE TAG & META DESCRIPTION
- <title> tag: "[Business Name] - [Primary Service] in [City]" (under 60 chars)
- <meta name="description"> 150-160 chars, include the city/area, primary
service, and a call to action (e.g., "Book online" / "Call now")
- <meta name="robots" content="index, follow">
2. OPEN GRAPH & TWITTER CARDS
- og:title, og:description, og:image (hero image), og:url, og:type=website
- twitter:card=summary_large_image, twitter:title, twitter:description,
twitter:image
- Place all OG/Twitter meta in <head>
3. STRUCTURED DATA (JSON-LD)
- Insert a <script type="application/ld+json"> block in <head> with
@type: "Dentist" schema
- Include: name, description, url, telephone, email, address
(streetAddress, addressLocality, addressRegion, postalCode,
addressCountry), image. Add geo, openingHoursSpecification, and priceRange ONLY when the user supplied real values — never invent them; and do NOT output aggregateRating or Review markup unless the user provides real, verifiable reviews (fabricated ratings violate Google's structured-data spam policy)
- Add BreadcrumbList schema: Home > [Category] > [Business Name]
- If the page has a FAQ section, add FAQPage schema with every Q&A pair
4. HEADING HIERARCHY FOR SEO
- Exactly ONE <h1> per page — use the real, human headline the design calls for; put keywords in the <title> and meta, not the visible H1
- Logical H2 > H3 nesting for every section; never skip a level
- Section headings should include secondary keywords naturally
(keep the section's real, human label; put keywords in the title and meta, not stuffed into headings)
5. IMAGE SEO
- Every <img> must have a descriptive alt attribute that includes
relevant keywords (NOT just "image1.jpg")
- Format: alt="[what the image shows] - [Business Name] in [City]"
- Use the client's own images, or neutral solid/gradient placeholders with a visible "replace with your photo" note — never hardcode Unsplash photo IDs (they often resolve to the wrong or trademarked image). Always set width + height (or aspect-ratio) to prevent layout shift
6. LOCAL SEO SIGNALS
- Include full NAP (Name, Address, Phone) in the footer, matching the
schema data exactly
- Add a link to Google Maps with the business address
- Use location-specific keywords in at least 3 section headings
- If the page has testimonials, include the reviewer's city/area
7. TECHNICAL SEO
- Canonical tag: <link rel="canonical" href="[PAGE URL]">
- Language: <html lang="en">
- Charset: <meta charset="UTF-8"> + viewport meta (already required)
- All internal anchor links use descriptive text (not "click here")
- Loading performance: critical CSS inline, fonts via display=swap,
hero image eager, everything else lazy
- Keep the CSS and JS readable and editable — do NOT minify (this file is meant to be customized by the owner)
8. CONTENT SEO SIGNALS
- Write real, useful body copy (not just headings and bullet points).
Each major section should have at least one paragraph of 2-3 sentences
that describes the offering in natural language a search engine can parse.
- Use the primary keyword once or twice where it reads naturally; keep the rest in the title tag and meta description, never stuffed into copy.
- Include a clear call-to-action with anchor text that includes the
service keyword (e.g., "Book your appointment" not "Click here").
═══════════════════════════════════════════════════════════════
DELIVERABLE
═══════════════════════════════════════════════════════════════
One polished HTML file (~65-75KB), production-ready, that I can open in a
browser and immediately deploy. Show me the file as a single code block
and briefly summarize the design decisions made.
This prompt generates a complete one-page website for a family dental practice — a services grid from cleanings to crowns, an appointment request, an insurance and payment panel, dentist bios, and patient reviews — as a single HTML file you can launch the same day. It is written for practice owners and office managers who want new patients to book without a round of phone tag.
What does the family dental clinic website prompt build?
The spec builds out the sections a general practice needs to fill the schedule. A hero with a “Request an appointment” button and your emergency line. A services grid for cleanings, fillings, crowns, whitening, kids’ dentistry, and emergencies. A meet-the-dentists section with credentials. An insurance-and-payment panel listing accepted plans and financing. Patient testimonials, a new-patient FAQ, and a booking request form. Prefer to build it in an AI chat yourself? The spec is tuned to build it with Claude in one paste. If you would rather it be handed to you finished, we build static sites for a flat fee.
Who is this dental practice prompt for?
It fits family dentists, solo general practitioners, combined general and pediatric offices, office managers refreshing a dated page, and orthodontists launching a satellite location. These are practices that run on recurring recall visits and want the website to cut down on the phone calls the front desk fields all day. If your office leans pediatric, the pediatric clinic prompt is a closer fit.
What’s inside the dental prompt?
- A services grid covering preventive, restorative, cosmetic, and emergency care, each editable in plain text
- An insurance-and-payment section for accepted plans, in-network notes, and financing options like CareCredit
- An appointment-request form capturing patient name, phone, preferred day, and whether they are new or returning
- Dentist JSON-LD with address, hours, and phone so the practice qualifies for local rich results
- Doctor bios with room for DDS or DMD credentials, specialties, and a headshot, each alt-tagged
- A new-patient FAQ and a first-visit callout, plus an anti-pattern list that keeps the design clean and calm instead of clinical-cold
Frequently asked questions
Does the site include an appointment request form, or do patients still have to call?
It includes an appointment-request form that captures name, phone, preferred day, and whether the patient is new or returning, then sends it to the front desk email. You can also link the button to your online scheduler if your practice-management software offers one, so requests land where staff already work.
Can I list the insurance plans we accept and financing options?
Yes. There is a dedicated insurance-and-payment panel where you list accepted plans, in-network status, and financing like CareCredit or in-house membership plans. Answering “do you take my insurance” on the page cuts down the calls that tie up your front desk.
Is the site set up for dental local SEO?
The prompt writes Dentist JSON-LD with your address, hours, and phone, keeps full name-address-phone in the footer, and embeds a map. That is the structured data Google and AI assistants read when someone searches “dentist near me” or “family dentist accepting new patients.”
Can I show a services menu with rough pricing for elective work like whitening?
Yes. The services grid supports an optional “starting at” price on each card, which is useful for elective and cosmetic treatments where patients want a ballpark. Leave prices off insurance-based care and list them only where transparency helps you.
How is this different from a full site with a patient portal?
This is a marketing front door, not a patient portal or records system. It stores no protected health information — requests go to email. Records, forms with PHI, and HIPAA-covered communication belong in your practice-management software, which this page can link to.
How to actually run this.
Copy the whole thing
All of it. Do not trim it down, every line is in there for a reason.
Swap in your details
Find the BUSINESS DETAILS part and drop in the real business. Name, what they do, all of it.
Paste and wait
Drop it into Claude for the first pass, or v0 if it is a landing page. Give it a minute.
Clean it up
Tweak the boring 10 percent. Spacing, mobile, that one cringe line. Ship it.
What’s next: from generated code to a website that works
The prompt did the hard 90 percent. What’s left is the boring 10 percent that turns a folder of code into a site people can actually find and trust. Here’s the whole checklist, in order.
1. Buy a domain
Grab your name at a registrar like Namecheap, Cloudflare, or Porkbun — about $10 to $15 a year for a .com. Skip the ten-year prepay and the upsells; you just need the domain and, ideally, the free WHOIS privacy most registrars now include.
2. Put it online
If the AI built you a static site (HTML, CSS, and JavaScript), you can host it for free: drag the folder into Netlify or Vercel, or connect a GitHub repo, then point your domain at it. If it built a WordPress theme, you need WordPress hosting — pick a managed host, install WordPress, upload the theme, and connect the domain. Either way, turn on HTTPS; it’s free and automatic on every modern host.
3. Wire up the parts AI skips
Generated sites almost always ship with a contact form that goes nowhere and a fake “success” message. Connect it to a real endpoint (Formspree, Web3Forms, or a plain mailto link) so leads actually reach you. While you’re in there: add a favicon, swap the placeholder images for your own compressed photos, and open the site on your phone to catch whatever breaks on a small screen.
4. Do the basic SEO and AI-search setup
This is what gets you found on Google and cited by ChatGPT, Perplexity, and AI Overviews. The essentials: a unique title tag and meta description on every page, one clear topic per page, an XML sitemap submitted to Google Search Console, basic structured data (Organization and FAQ schema), and an llms.txt file so AI crawlers can read you. If that reads like a foreign language, our SEO optimization service does it as a flat-fee pass, and our free SEO checklist walks the DIY route step by step.
5. Make it fast
AI builders love shipping four-megabyte images and render-blocking scripts. Compress your images, lazy-load anything below the fold, and run the page through PageSpeed Insights until Core Web Vitals turn green — speed lifts both rankings and conversions, so it’s the rare fix that pays twice. Our speed optimization service handles it if you’d rather not.
6. Get found locally, and measure it
Add analytics (GA4, or a lighter option like Plausible) so you can see what’s working instead of guessing. If you serve a local area, set up a Google Business Profile and use the exact same business name, address, and phone number everywhere — that consistency is what lands you in the map pack and in local AI answers.
7. Keep it alive
A website isn’t set-and-forget, especially on WordPress. Budget for backups, security, and updates so a routine plugin update doesn’t take the site down six months from now. Our care plans cover all of it from $290 a month, or you can do it yourself — you own all the code either way.
When it’s worth handing off
If any of these steps stall you — and hosting, DNS, and SEO stall a lot of people — that’s exactly what we’re for. We build the whole thing at a flat fee, ship it live, and hand you the code on GitHub, having read every line the AI wrote. Or take the free prompts and run with it yourself. Both outcomes are genuinely fine with us.
More from the stash.
Vibe Code a Portfolio Website
Free vibe coding prompt to build a WordPress designer portfolio. Case studies, services, blog, project inquiry form, and CreativeWork schema. Full professional architecture.
Vibe Code a Wedding Photographer Website
Free vibe coding prompt to build a wedding photographer portfolio. Full-screen gallery, real wedding stories, packages, inquiry form, and SEO schema. One HTML file,…
Vibe Code an Architect Portfolio Website
Free vibe coding prompt to build an architecture portfolio. Project gallery, design philosophy, awards, inquiry form, and SEO-optimized markup. One editorial HTML file.
No free weekend? We will build it for you.
This is the exact prompt we would use. Flat fee, real deadline, code is yours.