Prompt Engineering for Builders

The AI builds what
you actually say
not what you mean

AI website builders (Lovable, v0, Bolt and friends) can generate a working site from one message. But "make me a nice website" and a well-structured build prompt produce wildly different results. The difference is five ingredients. Learn them, then compose and score your own prompt below.

The 5-part anatomy

Every strong build prompt answers five questions. Miss one, and the AI fills the gap with its favorite generic default.

Role & goal

Who is this site for and what must it achieve? One sentence of business context anchors every downstream decision.
"...for a mobile dog-grooming service whose #1 goal is booked appointments."

Pages & sections

Name each page and the sections on it, in order. This is the site map — the AI's floor plan.
"Home: hero, 3 services, pricing table, reviews, FAQ, booking CTA."

Data model

What things does the app store? Entities, fields, relationships. Even simple sites have data: services, bookings, testimonials.
"Booking: name, phone, dog size (S/M/L), service, date, status."

Style direction

Colors, typography mood, density, reference sites. "Modern and clean" means nothing; hex codes and adjectives with contrast mean everything.
"Warm cream background, forest green + mustard accents, rounded, friendly."

Constraints

What NOT to do, plus hard requirements: tech, responsiveness, accessibility, what to leave out of v1.
"Mobile-first. No login in v1. No stock-photo placeholders. Form validates phone."

Prompt composer & completeness score

For each ingredient, choose how much you'd tell the AI. Watch the score, the assembled prompt, and the 3D "build preview" react: vague inputs produce a gray, boxy site; specific inputs produce structure, color and detail.

Drag to rotate. Build state: Empty lot — nothing specified yet

Prompt completeness

0/100

Nothing specified — the AI will invent everything.

Vague vs specific: a real comparison

Same idea — a dog-grooming site — two prompts. Here's what each typically yields on a first generation:

The vague prompt (score ~15)

"Make me a website for my dog grooming business. Make it look nice and professional."
Typical first output:
  • Generic hero: "Welcome to Our Dog Grooming Business"
  • Default blue/gray template styling
  • Invented services and fake prices you must hunt down and fix
  • Contact form with no fields you actually need
  • 5–10 follow-up prompts to fix what one good prompt prevents

The specific prompt (score ~95)

"Landing site for 'Suds & Tails', a mobile dog-grooming service in Austin. Goal: booked appointments.
Pages — Home (hero with headline 'We come to your driveway', 3 service cards: Bath $45 / Full Groom $85 / Deshed $60, 6 reviews, FAQ, sticky Book Now), Booking (form), About.
Data — Booking: name, phone, dog size S/M/L, service, preferred date, notes.
Style — cream #FAF6EF background, forest #1F4D3A + mustard #E3A72F, big friendly rounded type.
Constraints — mobile-first, validate phone, no login, no stock photos, confirmation screen after submit."
Typical first output:
  • Correct copy, real prices, right sections in the right order
  • On-brand palette on the first try
  • A booking form that actually captures your fields
  • 1–2 refinement prompts instead of a fix-it marathon

One feature per follow-up

After the first build, iterate with single, scoped requests ("Add a FAQ accordion above the footer") rather than paragraph-long wish lists. Smaller diffs = fewer regressions.

Name things literally

Give the AI exact headlines, button labels and prices. Copy is the cheapest thing to specify and the most annoying to fix later.

State the negative space

"No login, no dark mode, no carousel" saves more time than most positive instructions. Defaults you don't veto will appear.

Enjoy this tool? Build your own with Super