Build a Landing Page With AI Tools in Under an Hour

At the 23-minute mark you will paste a Vercel URL into iMessage and it will work. That's the goal of this guide — not "you could build something," but a real, shareable URL for a real landing page, built from a blank browser tab in a single sitting.

This walkthrough uses two tools: v0 by Vercel for the UI, and Vercel to deploy it live. If you want to know more about what v0 is before diving in, the v0 review covers it in depth.

What You're Building (and What You're Not)

A landing page, not an app — why this is the right first project

A landing page is a single web page with one job: explain something and invite a click. There's no database, no login, no backend. It's just a page. That makes it the perfect first project — the scope is fixed, the success condition is obvious, and the whole thing fits in one AI session.

Most beginner tutorials either go too big (build a full app) or too small (generate a component with no context on what to do with it). A landing page is the right size.

What the finished page will have

By the end you'll have a page with a hero section (headline, subheadline, CTA button), a short section below the fold explaining what the thing is, and a footer. Nothing more. The point is shipping, not perfection.

What You Need Before You Start

A free v0 account

Go to v0.dev and sign up with GitHub or Google. No credit card needed.

The free plan gives you $5 in monthly credits, which resets each billing cycle — more on that in a moment.

A free Vercel account

Go to vercel.com and sign up, again with GitHub or Google. The Hobby plan is free.

The Hobby plan is free for personal projects and includes 100 GB of bandwidth per month — plenty for a landing page with normal traffic. No credit card required.

That's it — no installs, no terminal yet

You won't open a terminal in this guide. Everything runs in the browser. That's the whole point.

0:00 — Write Your Prompt for v0

Open v0.dev and click the big prompt box. This is where the session starts.

The exact prompt structure that gets a usable result first time

Don't just type "make me a landing page." v0 needs enough context to make real decisions, but not so much that it gets overwhelmed. Here's the structure that works:

Build a landing page for [product name].

[Product name] is [one sentence description].

The main CTA button should say "[your CTA text]".

Color vibe: [one adjective — clean, dark, bold, minimal, warm].

A real example:

Build a landing page for Draftly.

Draftly is a writing tool that helps freelancers send client proposals faster.

The main CTA button should say "Start Free Trial".

Color vibe: clean.

That's 4 lines. That's enough.

What to include: product name, one-line description, primary CTA, colour vibe

Each of these four inputs does specific work. The product name anchors the copy. The one-liner gives v0 something to write headlines from. The CTA tells it what the page is trying to do. The colour vibe controls the whole visual direction without you needing to name hex codes.

What to leave out (don't over-specify or v0 gets confused)

Don't list every section you want, don't describe exact fonts, don't paste a full brand brief. If you over-specify, v0 tries to satisfy every constraint simultaneously and the result looks like a committee designed it. Start simple. You can add constraints in follow-up prompts once you've seen the first output.

5:00 — Review and Iterate the Design

v0 generates a live preview on the right side of the screen. You don't need to read the code on the left — just look at the preview.

How to read what v0 generated without knowing React

Look at it the way you'd look at a design mockup: Does the headline match what you want to say? Is the button visible and obviously clickable? Is there a section below the hero that explains the product? If yes to all three, the structure is good. Ignore the code entirely at this stage.

The two or three follow-up prompts worth making (colour, copy, layout)

After the first generation, you get one or two free refinements before the real value of the output is clear.

Worth doing:

• "Make the background darker and the CTA button green."
• "Rewrite the headline to emphasise speed instead of quality."
• "Add a three-column features section below the hero."

Not worth doing:

• Pixel-level positioning tweaks
• Matching your exact brand font (you can fix that later in code)
• Adding animations or interactions

Each message you send in v0 costs credits. On the free plan, you get $5 in monthly credits — enough for a handful of generations. Use follow-up prompts intentionally — two or three focused changes, not ten small ones. If you're working on a real project and burning through free credits fast, the paid plan starts at $20/month and unlocks significantly more.

When to stop iterating and move on

The rule: stop when you would not be embarrassed to share the preview link. It doesn't need to be perfect. The page will have real copy and a real URL in about 10 minutes. Move on.

20:00 — Deploy to Vercel

This is the part most guides skip or wave at vaguely. Here's exactly what happens.

One-click deploy straight from v0 — what it does under the hood

In the v0 interface, look for the Deploy button — it's in the top-right area of the screen. Clicking it triggers a flow that packages your generated code and sends it directly to Vercel. You do not need to download any files or touch a terminal.

Under the hood, v0 creates a GitHub repository in your account containing the generated code, then passes that repository to Vercel to deploy. The whole handoff takes about 30 seconds.

If you haven't connected your Vercel account to v0 yet, you'll be prompted to authorize via OAuth — click through, grant access, and the deploy picks back up automatically. It's one extra screen, not a separate process.

Connecting your Vercel account if prompted

If you see a "Connect to Vercel" screen, click Connect and log in with the same account you created earlier. Vercel will ask to access your repositories — approve it. You'll be redirected back to v0 and the deploy will resume.

If you see a "Connect to GitHub" screen first, do the same. v0 needs GitHub to create the repository that holds your code. You're not writing any code — this is just the plumbing.

What the Vercel dashboard shows and which bits to ignore for now

Once deployed, Vercel opens a dashboard for your project. You'll see:

• A Domains section — this has your live URL
• A Deployments tab — a log of every deploy (yours will show one entry)
• Analytics, Logs, Settings — ignore all of these for now

The only thing you need is the URL under Domains.

30:00 — Your Live URL

What the free Vercel URL looks like

Your URL will look like your-project-name.vercel.app. It's a real URL on a real CDN — not a preview link, not a localhost URL. Anyone can open it.

Copy it. Open a new browser tab. Paste it. Your page loads. That's it — you shipped something.

How to share it, screenshot it, call it done

Send it to someone. Put it in your portfolio. Post it. Take a screenshot of the browser with your URL visible. The fact that it took 30 minutes doesn't make it less real.

If you want to share it on social, the mobile version matters — test it by resizing your browser window before you screenshot. v0 generates responsive layouts by default, so it should look fine on mobile, but check anyway.

Optional: add a custom domain (2-minute Vercel DNS walkthrough)

If you already own a domain, go to your Vercel project dashboard and click Domains → Add. Type your domain and Vercel will show you two DNS records to add at your registrar (usually a CNAME and an A record). Go to wherever you bought the domain, find DNS settings, and paste those records in. It propagates in a few minutes, sometimes up to an hour.

Custom domains are supported on the free Hobby plan. No upgrade needed.

If you don't own a domain yet, the .vercel.app URL works for sharing. You can add a domain any time later.

What Comes Next (Without Overwhelming You)

You have a live landing page. Here's what makes sense as the next move — in order of effort.

Adding a contact form or email capture

The simplest option is a form service like Tally or Typeform — embed a form link into your page via a button. No code needed. If you want an email capture that stores subscribers, look at tools like Mailchimp or ConvertKit, both of which give you an embed snippet you paste into your HTML.

If you need proper user accounts eventually, Clerk is the cleanest option for adding auth to a vibe-coded project.

Swapping placeholder copy for real copy with Claude or ChatGPT

v0's generated copy is placeholder-grade — it communicates structure, not substance. Open Claude or ChatGPT, paste your one-line product description, and ask it to write a headline, subheadline, and three feature bullets. Paste those back into your v0 prompt as a follow-up: "Replace the headline with: [your new headline]".

When this page outgrows v0 and what to move to

v0 is a UI generator, not a full development environment. When you need a contact form that actually sends emails, a database, or any backend logic, you've outgrown a v0-only workflow. At that point, the Claude Code + Vercel guide shows how to take a project further without leaving the AI-assisted workflow.

For a broader sense of what the full journey looks like — from first page to real app — the AI coding roadmap for beginners lays it out without overwhelming you.

And if you're wondering why this guide uses Vercel instead of something else, the Netlify vs Vercel comparison breaks down the tradeoffs for free hosting — the short answer is that the v0 → Vercel deploy path is native and genuinely one click.

---

The hardest part of any first project is not the building — it's having something real to point at. You have that now.