How to Write AI Prompts for Website Builders (With Examples)

You open v0 or Lovable or Bolt, type "build me a SaaS landing page," and get back something generic that needs six rounds of edits before it feels right. Then you wonder if AI website builders are actually useful.

They are. You are just prompting them wrong.

After building client demos, prototypes, and real landing pages with these tools, the pattern is clear: the quality of what you get out is entirely determined by the quality of the prompt you put in. A bad prompt produces a Bootstrap-template-looking page. A good prompt produces something that would pass for design work.

This post is the structure I use every time. Plus the tool I built to help you write better prompts faster.

The mistake everyone makes

The mistake is treating AI website builders like ChatGPT. You type what you want in one line, press enter, and hope.

AI website builders are different. They are making dozens of decisions on your behalf: layout, color, typography, spacing, copy, imagery. If you do not tell them what you want for each, they pick for you. And their defaults are bland because they are optimized to not break for anyone.

The fix is being specific. Not verbose. Specific.

The 5-part prompt structure

Every AI website prompt I write has five parts. Missing any of them and the output quality drops.

1. What you are building

Not "a website." What kind, for who.

Bad: "Build a landing page."

Better: "Build a landing page for a Shopify app that helps merchants recover abandoned carts with AI-generated SMS."

The specificity tells the AI what imagery to pick, what language to use, what sections make sense.

2. The audience

Who is this page for. One sentence about the reader.

"The reader is a DTC founder with 10 to 200 orders per day, technical-adjacent but not a developer."

This shapes tone, vocabulary, and what proof points land. A page for a developer looks different than a page for a CMO.

3. The vibe

Design direction in plain English. Pick 3 adjectives.

"Minimal, Swiss-inspired, confident. Heavy on typography. Not cute. Not corporate."

AI website tools understand adjectives better than most designers realize. They have been trained on thousands of sites labeled with these descriptors. Use them.

4. The sections

List the sections you want. In order.

1. Hero with big headline and single CTA
2. Social proof (logo row)
3. Three-column feature grid
4. Testimonial with author photo
5. Pricing (3 tiers)
6. FAQ (5 questions)
7. Footer with email signup

This is the single biggest quality lever. Without a section list, the AI guesses. With one, it executes.

5. The copy

You can either write the copy yourself or ask the AI to. If you ask the AI to, give it the positioning.

"Headline should emphasize speed over features. The product recovers 12% more carts in under 60 seconds. Lead with that stat."

The full template

Here is what my prompts look like in practice. Paste this into v0 or Lovable, fill in the blanks, send.

Build a [page type] for [product/company].

Audience: [one sentence about the reader]

Vibe: [3 adjectives]

Sections in order:
1. [section]
2. [section]
3. [section]
...

Copy direction:
- Headline: [what it should emphasize]
- Sub: [what it should promise]
- CTA: [exact button text]

Technical: [any stack constraints, e.g. "use Tailwind v4 and shadcn/ui", "responsive down to 375px", "include dark mode"]

That template + 3 minutes of thinking = a 30x better first output than "build me a landing page."

Real example: a prompt I used yesterday

This is an anonymized version of a prompt for a client demo. Took me 4 minutes to write, got a solid first draft in v0 that needed 20 minutes of polish.

Build a landing page for an AI-powered invoice automation tool for small businesses (20-100 employees).

Audience: Office manager or controller, not technical, drowning in invoice processing. They approve software purchases under $200/month.

Vibe: Calm, competent, not shouty. Think Linear.app or Height.app. Lots of whitespace.

Sections:
1. Hero: big headline, single CTA "Book a 15-min demo", small line "No credit card, no sales pitch"
2. Three-column "before/after" showing (a) pile of paper invoices (b) arrow/transformation (c) clean dashboard
3. "How it works" - 4 numbered steps with small illustrations
4. Testimonial - one big quote from a controller, attributed
5. Pricing - single tier "$99/month, first 100 invoices free"
6. FAQ - 5 questions, common objections
7. Footer - minimal, just email + linkedin

Copy direction:
- Headline: emphasize time saved, not accuracy. "Reclaim 15 hours a month from invoice hell"
- Every CTA goes to the same demo booking
- Use concrete numbers anywhere you can

Technical:
- Tailwind v4
- Must look good on 375px mobile
- Dark mode toggle in nav

The output needed: nav refinements, the hero image fixed, pricing tier copy tightened. Everything else was close to ship-ready.

The tool I built for this

Writing these prompts from scratch every time is tedious. I built website-selector.vercel.app which is basically this template as an interactive form. Pick your tool, fill in the fields, get a ready-to-paste prompt.

Free, no login. Takes 2 minutes to generate a prompt that would take 5 minutes to write by hand.

When AI website builders work best

Four use cases where they earn their keep.

Prototyping for a client call. Need to show what a dashboard could look like before they commit? 15 minutes in v0 beats 2 hours in Figma.

Marketing landing pages for a launch. Speed matters, the page dies in 3 months anyway. AI builders are ideal for this.

Internal tool UIs. Nobody cares if the ops tool is gorgeous. They care that it exists. AI builders ship in an afternoon what would take a week.

Component scaffolding inside a larger app. Need a pricing table component? Generate it, clean it up, drop it in.

When they fall apart

Four places I stop using AI builders and go back to writing code by hand.

Anything with real data flows. If the page needs to fetch from your backend, handle auth, or respect user state, the AI tools produce UI that looks right but plumbs wrong. Build those by hand in a real code editor like Cursor or Claude Code.

Pages with accessibility requirements. WCAG compliance is not default in most AI builder output. I have had to fix focus states, color contrast, ARIA labels, and keyboard nav in every AI-built page I have shipped to production.

Brand systems. If you have a design system with specific tokens, typography rules, and motion guidelines, AI builders will not respect them. Faster to build by hand or hire a designer.

Anything performance-critical. AI-generated pages are rarely optimized. If Core Web Vitals matter (they do, for SEO), budget time to strip things out.

The real workflow I use

1. Write the prompt using the template above.
2. Generate in v0 or Lovable.
3. Copy the code into my local project (not relying on the hosted preview).
4. Strip the stuff I do not need. Usually 30% of the output.
5. Tighten the copy by hand. AI copy is always 20% too wordy.
6. Check accessibility, responsive behavior, performance.
7. Ship.

Total: 60 to 90 minutes for what used to be a 6-hour landing page.

The shortcut inside the shortcut

If you use these tools weekly, build yourself a prompt library. I keep 10 to 15 templates by page type: SaaS landing, DTC product page, consulting services, blog homepage, pricing page, etc. Each is a filled-out version of the template above, ready to adapt with minor edits.

That is what turns AI builders from "a thing I occasionally use" into "the default way I ship a one-pager."

Next steps

• Grab the prompt builder tool and generate one now.
• Read my broader post on AI tools for developers if you want the full stack these fit into.

If you have a specific page you need built and want to know whether to AI-it or hire it out, book a call. I will give you a straight answer and a cost estimate for each path.