Vibe Code a Personal Injury Law Firm Website
Free vibe coding prompt to build a personal injury law firm website. Case results, free consultation form, attorney bios, and LocalBusiness schema. One HTML file, ready to deploy.
Build a one-page personal injury law firm 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
═══════════════════════════════════════════════════════════════
- Firm name: [FIRM NAME]
- Lead attorney: [FULL NAME, J.D.], bar number [#], admitted in [STATES]
- Practice areas: car accidents, truck accidents, slip-and-fall, medical
malpractice, wrongful death, workplace injury (or override list)
- Address: [FULL ADDRESS]
- Phone: [PHONE], also a 24/7 line
- Email: [EMAIL]
- Booking: free case review form + click-to-call
- Years in practice: [N]+
- Tagline: "You don't pay unless we win" (or override)
═══════════════════════════════════════════════════════════════
BRAND
═══════════════════════════════════════════════════════════════
- Brand colors: deep navy (#0e2240), warm ivory background (#faf7f1), single
gold accent (#b88a3a) for case-win numbers and CTA highlights. Override if
the user provides different hex values; in that case derive deeper/lighter
variants for accessibility.
- All body text must hit WCAG AA contrast on the ivory background. If a brand
color fails, darken for text use only.
═══════════════════════════════════════════════════════════════
DESIGN DIRECTION
═══════════════════════════════════════════════════════════════
- Conservative-editorial. Conveys gravitas without being stuffy.
- Type pairing: serif display for headings (Source Serif Pro, Merriweather, or
Playfair) + clean sans for body (Inter, Outfit). NO script fonts.
- Eyebrow labels: uppercase, tracked .18em, prefixed by a thin 32px CSS
::before line in gold.
- Headlines: short and declarative. ONE italic accent phrase per major
headline ("You only pay if we win *your case*").
- Generous gutters. Asymmetric two-column rhythms. Heavy reliance on type
hierarchy, not decoration.
- Icon system: 24x24 line icons, fill="none", stroke="currentColor",
stroke-width 1.6, rounded caps. Inline <symbol> block.
Cover at minimum: scale, gavel, handshake, shield, phone, mail, pin, clock,
document, dollar, star, check.
- Icon containers: 44x44 rounded squares with navy-tinted bg; flip to navy
solid with ivory icon on hover.
- Motion: extremely restrained, only fade-ins on scroll and 6-8px hover
lifts. No bouncing, no parallax, no Ken Burns.
═══════════════════════════════════════════════════════════════
SECTIONS (in this exact order)
═══════════════════════════════════════════════════════════════
1. URGENT BAR (sticky above nav on mobile)
- Single-line: "Free consultation. 24/7." with click-to-call phone button
- Pulsing gold dot before the text
2. FIXED NAV (glass effect, ivory translucent bg + backdrop-filter blur)
- Wordmark left | anchor links center | "Free Case Review" gold pill CTA right
- Mobile: hamburger to full-width sliding menu
3. HERO
- Two-column: text left, photo right (real Unsplash courthouse/skyline,
rounded 24px, deep shadow, subtle navy gradient overlay on bottom-right)
- Left: eyebrow with line marker, two-tone headline with italic accent,
2-line subhead, two CTAs (gold "Free Case Review", outlined "Call [number]")
- Trust strip below CTAs: 4 mini-stats inline (Years in practice •
Cases won • Total recovered • Available 24/7)
4. PRACTICE AREAS
- Eyebrow + headline + subhead
- Auto-fit grid (minmax 280px) of 6 cards
- Each card: 44x44 navy-tinted icon badge + title (serif) + 2-line
description in prose + "Learn more →" link in gold
- One card visually emphasized (brand gradient bg, ivory text) for the
firm's signature practice area
5. CASE RESULTS
- Dark navy section, ivory text, subtle radial gold accents
- Eyebrow + headline ("Results that *make headlines*")
- 4-column row of big result numbers (display serif, gold color, 56-72px)
- Each: result amount + 1-sentence case description in muted ivory below
- Disclaimer line at bottom in 12px muted ivory: "Past results do not
guarantee future outcomes."
6. PROCESS
- 4 numbered steps in a horizontal row (vertical stack on mobile)
- Each: large outlined numeral (01-04) in gold + step title + 1-sentence
description
- Steps: Free consultation → Investigation → Negotiation → Settlement / trial
- Thin gold connector line between steps on desktop
7. ATTORNEY BIOS
- Eyebrow + headline
- 2-3 attorney cards in a grid
- Each: portrait photo (rounded 16px), name (serif), title, bar/credentials
row, 2-sentence bio, "Read more" link
- Use real Unsplash professional portraits, NOT fake stock people in suits
posed unnaturally
8. TESTIMONIALS
- 3-column grid
- Each card: large opening quotation mark in muted navy, quote body, 5 gold
SVG stars, separator, author with gradient-circle initials avatar (NOT
a photo of a fake person) and case type ("Truck accident, Atlanta, GA")
- First name + last initial only ("Maria S.")
- Vary quote lengths to feel real
9. CREDENTIALS STRIP
- Thin ivory section, borders top/bottom
- "MEMBER OF / RECOGNIZED BY" label left + 5 typographic names right
(e.g., American Association for Justice, Super Lawyers, Million Dollar
Advocates Forum), NO actual logos to avoid trademark issues
10. FAQ
- Two-column: intro left, accordion right
- Left: eyebrow, headline with italic accent, supporting copy, "Call now"
CTA in navy
- Right: 8 collapsible <details> elements with serif questions, plus icon
that rotates 45° to × on open
- Cover: contingency-fee meaning, what happens after free consultation,
statute of limitations, what if I was partly at fault, can I switch
lawyers, do I have to go to court, how long does a case take, what's
my case worth
11. FREE CASE REVIEW FORM
- Two-column: pitch left, form card right
- Left: eyebrow, headline ("Take the *first step*, it's free"), 3-bullet
reassurance list with check icons
- Right: brand-gradient navy card with gold accents
• Form fields: full name, phone, email, accident type (select), accident
date (date), brief description (textarea), consent checkbox
• Submit button gold, full-width
• Inline JS success message on submit (preventDefault, no real backend)
- Below form in muted text: "By submitting you agree to our Privacy Policy.
This form does not create an attorney-client relationship."
12. CONTACT + MAP
- Full-width Google Maps embed (no API key needed):
<iframe src="https://www.google.com/maps?q=[ENCODED+ADDRESS]&z=15&output=embed">
- Floating overlay card top-left: firm name, address, phone, "Get
directions →" link
13. FOOTER (dark navy)
- Two-column desktop: logo + tagline + social left; quick links + hours
+ contact right
- Disclaimer block at bottom: "Attorney advertising. Prior results do not
guarantee a similar outcome." + bar admission lines + copyright
- NO social icons unless user provides accounts
═══════════════════════════════════════════════════════════════
TECHNICAL REQUIREMENTS
═══════════════════════════════════════════════════════════════
- Single index.html, no build step, no JS frameworks
- JSON-LD `LegalService` schema in <head> with: name, telephone, address,
areaServed, openingHours, priceRange "$$"
- CSS custom properties for palette/gradients at top of <style>
- Smooth scroll with scroll-padding-top to clear fixed nav + urgent bar
- Real Unsplash images via images.unsplash.com with ?w=900&q=80&auto=format
&fit=crop params
- First hero image loading="eager", everything else loading="lazy"
- tel: links on every phone occurrence; mailto: with prefilled subject for
emails
- Responsive breakpoints at 900px and 500px; no horizontal scroll
- Semantic HTML5; aria-label on icon-only links
- Sticky bottom CTA bar on mobile with "Call" + "Free Case Review" buttons
- Favicon: inline SVG data URI (gavel mark)
═══════════════════════════════════════════════════════════════
COPY VOICE
═══════════════════════════════════════════════════════════════
Authoritative, calm, plain-language. Avoid legalese where possible. Frame the
client as a survivor, never a victim. Headlines short and active. No exclamation
marks. Specific over generic: "We've recovered over $[N]M for injured workers
in [STATE] since [YEAR]", not "We fight for you." Testimonials must read like
real Google reviews: specific injury, specific outcome, varied length.
═══════════════════════════════════════════════════════════════
ANTI-PATTERNS TO AVOID
═══════════════════════════════════════════════════════════════
- No emojis anywhere
- No fake "professional" stock photos of attorneys posing with files
- No real bar association or "Super Lawyers" logos as images
- No flames, scales-of-justice clipart, or gavel illustrations as section
dividers
- No script/handwritten fonts
- No "fight for justice", "we care about you", "let us be your voice" filler
- No animated case-result numbers that look gimmicky, use clean static type
- No client photos in testimonials (initials avatars only)
- No exclamation marks in any UI copy
═══════════════════════════════════════════════════════════════
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: "LegalService" 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 (~70-80KB), production-ready, that I can open in a
browser and immediately deploy. Include JSON-LD schema. Show the file as a
single code block and briefly summarize the design decisions made.
This prompt generates a conversion-focused one-page website for a personal injury law firm — a hero with case results, a practice-areas grid, attorney bios, client testimonials, and a free-consultation intake form — as a single HTML file. It is written for solo attorneys and small firms that need to look established and capture leads around the clock, before a competitor’s ad does.
What does the personal injury law firm website prompt build?
The spec covers the sections a contingency-fee practice needs to turn a search into a signed client. A hero with a headline promise and a “Free case review” button. A practice-areas grid for auto accidents, motorcycle wrecks, slip-and-fall, medical malpractice, and wrongful death. A case-results section with settlement and verdict figures beside a plain-English disclaimer. Attorney bios with room for bar admissions. Testimonials, an FAQ that answers the fears people actually have, and an intake form that captures the injury type and date. If you would rather not build it yourself, we build static sites for a flat fee.
Who is this personal injury attorney prompt for?
It fits solo practitioners hanging a shingle, small contingency-fee firms, of-counsel attorneys building a personal brand, and paralegals standing up a partner’s first site. It is not aimed at large firms with a marketing department and a CMS budget. If you expect a blog and dozens of pages down the road, read static site vs WordPress before you commit to one file.
What’s inside the personal injury prompt?
- A practice-areas grid you rename to match what you actually take — auto, premises, product liability, workers’ comp
- A case-results block for settlement and verdict amounts, with a “past results do not guarantee a future outcome” disclaimer already worded
- A free-consultation intake form capturing name, phone, injury type, and date of incident, routed to your email
- LegalService (Attorney) JSON-LD with your address, hours, area served, and phone for local and AI search
- Attorney bios with space for bar admissions, education, and a headshot, each image alt-tagged
- A trust strip for “no fee unless we win,” years in practice, and case volume, plus an anti-pattern list so the AI skips gavel-and-scales clichés
Browse the rest of our free AI website prompts if a different practice fits better.
Frequently asked questions
Does the site include a free-consultation intake form that actually reaches me?
Yes. The intake form captures the injury type and date of incident along with name and phone, and submits to your email. You can also wire it to your CRM or intake calendar. It is a lead form, not a client portal, so no privileged case detail is stored on the page.
Can I show past settlements without running afoul of attorney advertising rules?
The results section ships with a pre-written disclaimer, but attorney advertising rules vary by state bar and some restrict specific dollar figures or required disclosures. Edit the amounts and disclaimer to match your jurisdiction, and run the final copy past your bar’s advertising guidance.
Will the LegalService schema help me rank for “personal injury lawyer” in my city?
The prompt outputs Attorney/LegalService JSON-LD with your area served, address, and phone, which is the structured data Google and AI assistants read for local legal queries. It supports local visibility alongside your Google Business Profile; it is not a standalone ranking guarantee.
Is there a click-to-call button for someone searching right after an accident?
Yes. The phone number is tap-to-call in the header and stays reachable on mobile, because the moment matters in this business — someone sitting in an ER parking lot can reach you in one tap instead of hunting for a number.
Can I add or remove practice areas as my caseload changes?
The practice-areas grid is plain HTML cards, so you duplicate a card to add an area or delete one to drop it, then rename the heading. No plugin and no rebuild — edit the text and re-upload the file.
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 Job Board Website
Free vibe coding prompt to build a WordPress job board. Employer accounts, paid listings, applicant tracking, email alerts, and JobPosting schema. Full two-sided marketplace.
Vibe Code a Bakery Website
Free vibe coding prompt to build a neighborhood bakery website. Menu with daily specials, custom cake orders, bakery story, and local SEO markup. One…
Vibe Code a Therapist Website
Free vibe coding prompt to build a therapist website. Specialties, fees, insurance info, crisis resources, intake form, and MedicalBusiness schema. One calm 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.