The best vibe coding prompts read like a spec sheet, not a wish. They name every section in order, set the copy voice, fix the breakpoints, and list the cliches the AI is banned from producing. A website prompt that actually ships is 1,500 to 2,500 words of constraints, not a clever one-liner. Here are 25 that clear that bar, and every one of them is free.
Cards on the table first: picks 1 through 15 come from our own library of 40 website prompts, 20 for static HTML and 20 for WordPress, each around 12,000 characters, each tested on ChatGPT, Claude, and Gemini. We wrote the prompts and we wrote this list, so no, this is not a neutral roundup. It’s also not a toll booth. All 40 are free with no email gate, and the 10 patterns in the back half work in any prompt you build yourself.
What makes vibe coding prompts actually work
Constraints, mostly. Anthropic’s prompting best practices say to treat the model like “a brilliant but new employee who lacks context” and to be specific about the output you want. OpenAI’s GPT-4.1 prompting guide notes its models follow instructions “more closely and more literally” than their predecessors. Same lesson from both shops: the model builds what you specify and guesses at everything you leave out. The guessing is where generic templates come from.
A vague prompt is a design meeting you never had. Here’s how that plays out:
| What you paste | What comes back | What it costs you |
|---|---|---|
| “Make me a restaurant website” (one line) | A template with a hero that says “Welcome to Our Restaurant” | A weekend of prompting in circles |
| A paragraph with your business name and “make it modern” | Better bones, but sections, copy, and colors picked by lottery | Hours of “no, not like that” |
| A 12,000-character spec: sections, voice, breakpoints, bans | A site you can deploy after swapping in photos and facts | Ten minutes of filling in placeholders |
We laid out the full argument, with receipts, in why our prompts run 12,000 characters. Short version: detail is cheaper than revision. Now the picks, business-type specs first, because a dentist and a plumber should not get the same website.
1. The Italian restaurant one-pager
This one outputs a single self-contained HTML file: glass-effect fixed nav, a three-slide hero carousel on a six-second rotation, a menu grid with category filter chips, an “EST [YEAR]” badge in the story section, and booking by phone or email, because that’s how neighborhood spots actually take tables. Restaurants get judged on menu, hours, and how fast the phone number appears, in that order, before anyone tastes anything. The spec makes all three unmissable and keeps the menu in real HTML where Google can read it, not a scanned PDF.
2. The family dental clinic
Dentists get chosen on two questions: do you take my insurance, and how soon can I come in. So the prompt requires a typeset list of six to eight insurance providers (names only, no logos), a same-week-appointments line, and booking as a form plus click-to-call for the phone-first crowd. It also carries one of the meanest anti-pattern lists in the library, quoted at pattern 16 below.
3. The personal injury law firm
Design direction, verbatim: “conservative-editorial, conveys gravitas without being stuffy,” which is the whole personal injury genre in one line. The spec locks deep navy and ivory with one gold accent, serif display type, the attorney’s bar number and admitted states, a 24/7 phone line, and a free case review form. Injury clients are stressed, on their phones, and comparison shopping three firms at once, so the prompt hardcodes the credibility markers that close.
4. The gym with class booking (WordPress)
A full WordPress architecture, not a single file: class schedules, trainer profiles, memberships, and a stated funnel goal of “drive trial signups, convert to memberships.” Gyms rarely lose members on the website; they lose trials. So every template in the spec routes back to the trial CTA, and the prompt handles multi-location setups for the day you open studio number two.
5. The B2B SaaS startup (WordPress)
SaaS homepages fail in the first sentence, so the prompt forces a one-liner formula, “[PRODUCT] is [WHAT IT DOES] for [WHO IT’S FOR],” plus a hero outcome with a number in it, like “cut close-rate analysis from 3 days to 3 hours.” Past the copy, it specs a data model, theme.json, a plugin stack, three pricing tiers, and a launch checklist. Demo requests and trial signups are the only conversions it cares about, which is correct.
6. The plumber and handyman service
Our favorite line in the whole library lives here: “The user is a homeowner panicking on their phone, they need to CALL fast. Phone number is visually the largest element on every screen.” That’s the entire strategy. Mobile-first, function over form, bold sans type, zero decoration for decoration’s sake. Nobody browses a plumber’s website for fun, and this spec respects that.
7. The wedding photographer portfolio
“Editorial magazine portfolio. Image-led, type-restrained.” The spec keeps frames thin, whitespace deep, and grids asymmetric, then gets out of the way, because couples hire the photos, not the paragraphs. Copy’s job here is small: enough personality to feel human, enough process to feel safe, and nothing competing with the work.
8. The therapist and counselor practice
Therapy clients need doubts answered before they’ll reach out, so the prompt requires what most practice sites hide: license number and state, per-session fees with a sliding-scale note, which insurers are in-network, superbill support for everyone else, telehealth availability, and a free 15-minute consult as the entry CTA. Weekday-evening and Saturday hours get their own placeholder, because that’s when working clients actually look.
9. The hotel and B&B with booking (WordPress)
Rooms are products, and this spec treats them that way: a data model for rooms, a full room detail template, email flows for the follow-up nobody sends, and a local-experiences page that catches the “things to do near [TOWN]” searches that fill midweek vacancies. Independent hotels pour money into booking widgets while the pages around the widget stay empty. This prompt flips that priority.
10. The nonprofit and its donate page
Inside the spec, the donate page is flagged “most critical UX,” and everything else exists to support it: a programs-and-impact section, a volunteer page, and a transparency-and-trust block, because donors quietly check where the money goes before giving any. The plugin stack even arrives as WP-CLI commands, so setup is paste, not hunt-and-click.
11. The real estate agent
Listing photography is an agent’s inventory, and most agent sites crush it into thumbnails under a Times Square of badges. This spec goes “magazine-editorial, luxury, restrained”: full-bleed photography, high-contrast serif headings, generous whitespace. The agent’s proof, markets served, and contact path stay one scroll away, and nothing blinks.
12. The specialty coffee shop
Three vetoes carry this one: “NOT corporate-chain. NOT cutesy,” and no script fonts anywhere. The spec goes hand-crafted editorial with monospace type for prices, which sounds like a detail until you see a menu set in it. Hours and location stay a thumb-tap away for the entire scroll, because that’s most of why anyone opens a coffee shop’s website.
13. The marketing agency (WordPress)
Agencies sell trust to strangers, so this prompt builds the whole site around a free audit as the primary lead generator, backed by a resources section for lead magnets, a blog strategy, an analytics plan, and a dedicated service page template instead of one foggy “what we do” page. It’s a lead engine with a portfolio attached, not the other way around.
14. The online course platform (WordPress LMS)
Course businesses are two sites wearing one domain: a sales page for strangers and a dashboard for students. The prompt specs both, with an LMS stack, a course data model, a course detail template built to convert, and a student dashboard built to retain. It closes with a performance-and-reliability section, because a checkout that times out is a refund in progress.
15. The fashion boutique (WooCommerce)
Small boutiques don’t need an enterprise stack; they need a catalog that loads fast and a checkout that doesn’t leak. This spec covers the product model, theme.json, the product detail page, a cart-and-checkout section aimed squarely at friction, plus schema and SEO blocks so products surface in shopping results. For a modest catalog, this beats paying a platform tax every month.
Ten patterns worth stealing for your own vibe coding prompts
The back half is for writing your own. These ten blocks do the heavy lifting in all 40 of our vibe coding website prompts, trimmed here to snippets you can paste into any prompt, for any model, for any business. Steal freely.
16. The anti-pattern list
Telling the model what not to build is half the job, because it has seen every bad website ever made and considers them all valid options. Our dental prompt bans, verbatim, “fake stock photos of overly white-toothed models,” real insurance logos (“use typeset names”), and “passion for smiles” filler. Write yours in the same shape:
Anti-patterns to avoid: no emojis anywhere in the UI, no script fonts, no [YOUR INDUSTRY] stock-photo cliches, no filler copy like “[PHRASES YOUR INDUSTRY OVERUSES],” no fake logos of real companies.
Every industry has its cartoon tooth. Name yours.
17. The section-spec skeleton
Sections, in this exact order: 1) fixed nav with one CTA, 2) hero stating [MAIN PROMISE], 3) social proof strip, 4) services grid with six cards, 5) about with a three-stat row, 6) FAQ with five questions, 7) contact with hours, map, and phone, 8) footer with full name, address, and phone.
Order the sections yourself or the model orders them for you, and it orders them like the average of every template it has ever seen.
18. The copy-voice block
The fastest tell of an AI-built site is the copy, not the layout. Voice constraints fix more than design constraints do:
Write final copy, not lorem ipsum. Voice: plainspoken, warm, zero corporate jargon. Headlines under eight words. Sentences under twenty. Banned words: solutions, passionate, journey, excellence, [ADD YOUR OWN].
19. The responsive floor
Breakpoints at 1100px, 900px, and 640px. Below 900px: nav collapses to a hamburger, multi-column grids stack, hero images hide, CTAs go full width. No horizontal scroll at 360px.
Most AI-generated pages look great at the exact width of the model’s imagination and nowhere else. A floor makes “responsive” a checkable claim instead of a mood.
20. The accessibility floor
All text meets WCAG AA contrast; if a brand color fails, darken it for text use only. Visible focus states on every interactive element. Alt text on every image. A label on every form field. One h1 per page.
That “darken it for text use only” move comes straight from our law firm prompt. Accessibility specs are also the cheapest SEO you will ever buy.
21. The single-file rule
Output one self-contained HTML file with inline CSS and JS. No build step, no external dependencies except Google Fonts. It must work from a double-click.
For one-pagers, this deletes the entire “where do these fourteen files go” class of problems, and the finished file deploys to Netlify or Vercel for free.
22. The placeholder discipline
Use [BRACKETED PLACEHOLDERS] for every real-world fact: name, address, phone, hours, prices, license numbers. Never invent facts. If information is missing, leave the placeholder visible.
An AI will cheerfully invent a phone number and a Tuesday closing time. Nothing on a website is worse than confident fiction, so make truthfulness a rule, not a hope.
23. The icon system spec
Unspecified, icons arrive as a ransom note: two emoji, one icon font, one SVG somebody half-styled. Our restaurant prompt defines its set down to the linecaps. Yours can be shorter:
No emoji as icons. Build one consistent inline SVG line-icon set: 24px grid, stroke uses the current text color, stroke-width 1.7, defined once and reused everywhere.
24. The performance budget
Two font families max, two weights each. Lazy-load every image below the fold. No jQuery, no CSS frameworks, no slider libraries. Target: first paint under a second on a mid-range phone.
Budgets turn “make it fast” from a wish into a pass-fail test the model can actually aim at.
25. The definition of done
Asking the model to check its own work catches the dumb stuff before you do:
Before you output, verify: every nav link points to a real section, the form validates, no console errors, no lorem ipsum anywhere, nothing scrolls sideways at 360px. List what you checked.
Last pattern, biggest return per character.
How to run these vibe coding prompts (the 20-minute version)
Twenty minutes is the honest setup cost. Pick the prompt nearest your business from the library, spend ten of those minutes replacing the bracketed placeholders with your real name, hours, prices, and phone, then paste the entire thing into ChatGPT, Claude, or Gemini. Half the internet searches for “ChatGPT website prompts,” but the same spec runs in all three without edits; the accent shifts a little between models, nothing more. When the draft lands, do one revision pass and name exact targets, “tighten the hero headline, swap testimonial two,” never “make it better.”
If you’d rather watch one run end to end before committing a Saturday, we vibe coded a complete site with Claude and wrote down every step, including the parts where we argued with it.
When to stop prompting and hire it out
Some people read this list and start blocking out a weekend. Others hit pattern 19 and quietly close three tabs. Both reactions are reasonable. If you’re in the second camp, this is literally our day job: we build with these same specs, a static site runs $2,800 flat in 3 to 5 days, a WordPress build is $5,800 flat in 7 to 10 days, the code lands in your GitHub, a 2-minute video shows up every night with progress, and fixes are free for 30 days after launch. No discovery-call obstacle course. The prompts stay free either way.
Questions we keep getting about website prompts
What is the best prompt to build a website?
The best prompt to build a website is a spec written for one specific business type: sections in a fixed order, a copy voice, responsive and accessibility floors, and a list of banned cliches. Generic AI prompts to build a website return generic websites, because the model averages everything it has ever seen. For most small businesses, a business-specific spec like the 40 in our free library beats anything one-size-fits-all, and patterns 16 through 25 above are the skeleton if you’d rather write your own.
How long should a website prompt be?
Around 12,000 characters, roughly 2,000 words, is where ours landed after testing across ChatGPT, Claude, and Gemini, and it’s the range where output stops feeling like a template. A few hundred characters gets you the model’s memory of an average website. Push far past 15,000 and models start dropping requirements silently. Structure beats raw length every time: 2,000 organized words under clear section headers outperform 5,000 rambling ones.
Do these prompts work with ChatGPT, Claude, and Gemini?
Yes. Every prompt in the library gets tested on all three before it ships. Each model has its own design accent, so two runs never match pixel for pixel, but a detailed spec keeps all of them inside the same zip code. The bigger variable is you: how completely you fill in the placeholders matters more than which model you pick.
Can one prompt really produce a finished website?
It produces about 90 percent of one. You still swap placeholder images for real photos, replace the bracketed facts, and run one revision pass on whatever came out sideways. Budget an afternoon end to end. What a strong prompt removes is the endless “no, not like that” loop, and that loop, not the code, is where most DIY website projects go to die.