How to Vibe Code a Website: A Landing Page in 10 Prompts

To vibe code a website, you describe the page to an AI tool in plain English, look at what it builds, and steer it with short follow-up prompts until it is right, without writing code yourself. What separates a generic result from a page that wins customers is the order of the prompts. Below is a 10-prompt sequence for a one-page business landing page, with what to check after each one.

If the idea of vibe coding is new to you, read what vibe coding is first. This guide is the hands-on session.

What you need for the session

Throughout this guide I use a made-up example: a mobile car detailing service that wants more bookings from local car owners. Swap in your own business at every step.

Create an empty folder such as detailing-landing, put your logo and photos in an images folder inside it, and open the folder in the Code tab (the desktop quickstart shows where everything is). The prompts are written for Claude Code but work in Lovable, Bolt or v0 with small wording changes.

The 10 prompts, in order

Prompt 1: make it interview you

I want a one-page landing page for my business. Before planning
anything, interview me. Ask up to 8 questions, one at a time, about
my customers, my offer, what makes us different, the objections
people raise, and the one action I want visitors to take.

A good interview sounds like this:

What to check: the questions should be about your customers, not about technology. Answer in detail, because your answers become the raw material for every section.

Prompt 2: agree the structure

Based on my answers, propose the page structure from top to bottom.
For each section, give its job, a draft headline and the proof that
goes there. One goal only: getting a booking. No code yet.

What to check: a sensible order for a service business is a headline with a booking button, what you get, proof, how it works, a starting price, FAQs that answer objections, and a final call to action. The booking button should appear more than once, and any section that doesn't serve the single goal should go.

Prompt 3: build version one

Approve the plan, then switch to Manual or Accept edits mode, because Plan mode doesn't edit files.

Build the approved plan as index.html with a separate styles.css,
mobile first. Use the photos in the images folder. Wherever real
content is missing, write TODO plus a short note instead of making
something up. Then open the page in the Browser pane so I can see it.

What to check: look at it at phone width first. Every gap should be an obvious TODO, never invented text.

Prompt 4: write the real copy

Rewrite all the copy for a busy [TYPE OF CUSTOMER] reading on a phone.
Headline: what they get, in under 10 words. Use my interview answers,
not generic phrases. Short sentences. If a claim needs a number or a
review I haven't given you, keep a TODO and list it for me.

What to check: read it aloud. Delete anything a competitor could paste onto their own site unchanged.

Prompt 5: make it look like your brand

Apply our brand: main color [HEX CODE], accent [HEX CODE], logo at
images/logo.png. The feel should be [CALM AND PREMIUM, OR BRIGHT].
Large readable text, generous spacing, at most two fonts. Create two
versions of the top section as separate files so I can compare them.

What to check: pick one and say why. "The second, because the photo shows the van and the button stands out" teaches the AI far more than "the second".

Prompt 6: connect bookings and leads

Point every booking button to my booking page: [BOOKING PAGE URL].
Add the signup form below, from my [EMAIL OR FORM TOOL], to the contact
section. Don't build your own form backend or store any data yourself.
[PASTE THE EMBED CODE HERE]

Prompt 7: phone and accessibility pass

Check the page for phone and accessibility problems and fix them:
low text contrast, small tap targets, missing alt text, headings out
of order, form fields without labels, and anything that can't be used
with a keyboard. List what you changed.

What to check: body text should reach a contrast ratio of at least 4.5 to 1 against its background, the WCAG AA level for normal text. Then try booking on your own phone with one thumb.

Prompt 8: speed and search basics

Make the page fast and findable: resize and compress every image,
lazy-load images below the first screen, and add a title, a meta
description, Open Graph tags, a favicon and LocalBusiness structured
data. Use only facts I have given you.

Lazy loading means images load only when the visitor scrolls near them, and Open Graph tags control how your link looks when someone shares it in a chat app. The full search setup, including Google Search Console, is in build a website with AI.

Prompt 9: make it review its own work

Review this page twice: first as a skeptical [TYPE OF CUSTOMER], then
as a strict web reviewer. List every problem: unclear copy, missing
information, broken links, leftover TODOs, claims without proof and
layout issues at 360px wide. Rank them by impact. Don't fix anything yet.

What to check: fix the top items one per message. Reviewing from a different angle than it built from surfaces problems the build pass missed.

Prompt 10: prepare for launch

Prepare for launch: delete unused files, check every link, add a short
privacy page that explains what the form collects and where it goes,
and write a README explaining how to change prices, hours and the phone
number. Commit everything to Git with a clear message.

AI can draft the privacy page, but it can't take legal responsibility for it. Have the text checked against the rules where your customers live.

The pre-launch review checklist

Publish the page

• Built with Claude Code: drag the folder onto Vercel Drop, or ask Claude Code to deploy it with the Vercel CLI (how Vercel Drop works). Vercel's Hobby plan is for personal, non-commercial use, so a business landing page belongs on Pro at $20 a month per developer seat (Vercel pricing).
• Built in Lovable: click Publish in the top-right corner, then Publish again, and the page goes live at a lovable.app address. Later edits only go live when you click Publish changes (Lovable publishing docs), and a custom domain needs a paid plan, starting with Pro at $25 a month (Lovable plans).
• Built in Bolt or v0: both have their own publish flow. Bolt hosts the site itself, and v0 deploys to Vercel.

Connecting your own domain and telling Google about the page are covered step by step in the website guide linked above. Once it's live, share the link with a few people who match your customer and watch them use it without helping.

When the session goes sideways

For more ready-made prompts, see Claude Code prompts and templates. Permissions, modes and undo are explained in more depth in how to use Claude Code.

What to do next

Run prompts 1 and 2 today. They need nothing but the Code tab and your knowledge of your customers, and they show quickly whether your offer is clear.

Build and publish a preview before you buy a domain or spend anything on ads, and read is vibe coding bad before you add logins or store customer data. The Builders course covers the customer psychology behind landing pages and connecting lead capture and payments in more depth.