v0-lander

name	v0-lander
description	Step-by-step guide to building GTM landing pages with v0 by Vercel — the AI generative UI platform. Covers prompt engineering for v0, iterating on generated UI, exporting to Next.js, deploying on Vercel, and connecting forms/analytics. Use when building a landing page, pricing page, waitlist page, event page, or marketing microsite with v0. Triggers on: "v0", "v0 by Vercel", "v0 landing page", "build landing page with AI", "v0 pricing page", "v0 tutorial".
license	MIT
compatibility	Claude Code, Jesse, Codex, Hermes, Windsurf, OpenCode, Gemini CLI, Copilot, Zed, VS Code, Goose
metadata	{"version":"1.0.0","author":"LeadMagic","category":"creative","tags":["v0","vercel","landing-page","ai-ui","generative-ui","react","nextjs","tailwind"],"related_skills":["vibe-coding","vibe-marketing","landing-pages","design-system-gtm","popular-web-designs","claude-design","ui-ux-gtm"],"frameworks":["v0 by Vercel — Generative UI platform (Guillermo Rauch)","shadcn/ui — Component library powering v0","Tailwind CSS — Utility-first CSS framework","Next.js — React framework for production"]}

v0 Landing Page Builder

Overview

v0 by Vercel is the fastest way to build a production-quality landing page. You describe the page in natural language. v0 generates React/Next.js/Tailwind code. You iterate conversationally. You export and deploy. What used to take a designer + developer 1-2 weeks now takes a founder or marketer 2-4 hours. This skill is a step-by-step playbook for building every type of GTM landing page with v0.

Authoritative Foundations

• v0 by Vercel — Generative UI platform (Guillermo Rauch) — Generative UI platform (Guillermo Rauch)
• shadcn/ui — Component library powering v0 — Component library powering v0
• Tailwind CSS — Utility-first CSS framework — Utility-first CSS framework
• Next.js — React framework for production — React framework for production

When to Use

Trigger phrases: "build a landing page with v0", "v0 tutorial", "v0 landing page prompt", "v0 by Vercel for marketing", "AI landing page builder", "generate landing page with v0", "v0 pricing page", "v0 waitlist"

v0 Basics

What it is: v0.dev — Vercel's generative UI platform. You type. It generates React components using shadcn/ui + Tailwind CSS. You can:

• Generate full pages from a single prompt
• Iterate on specific sections ("change the hero headline")
• Generate individual components ("a testimonial card with avatar")
• Export code to your Next.js project
• Deploy directly to Vercel

Pricing: Free tier (200 generations/month). Pro ($20/mo) for unlimited.

Step-by-Step Process

Phase 1: Preparation (Before You Open v0)

Define 5 things before your first prompt:

1. The page type: Landing page, pricing page, waitlist page, event page, feature announcement, or microsite?
2. The audience: Who are they? What matters to them?
3. The action: What ONE thing do you want them to do? (Start trial, book demo, join waitlist, buy now)
4. The brand: Colors (primary/secondary/neutrals), font (Inter is safe), tone (professional, playful, technical, premium)
5. The reference: What existing site should this feel like? "Clean like Stripe" or "Technical like Vercel" or "Bold like Linear"

Brand context document (paste into your first v0 prompt):

BRAND CONTEXT:
- Company: [name]
- Product: [one-liner]
- Primary color: #0066FF
- Secondary: #FF6600
- Font: Inter
- Tone: Direct, data-backed, confident
- Reference: Stripe (clean, minimal) + Linear (dark, technical)
- NO: gradients, emojis, stock photos, generic SaaS tropes

Phase 2: Generate the Page (Prompt Engineering)

The master prompt template:

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

Audience: [ICP]. They care about [top 3 concerns].

SECTIONS (in order):
1. Nav: [company logo left, links center, CTA right — "Start free trial"]
2. Hero: Headline [benefit-focused, under 10 words]. Subhead [one sentence
   expanding]. Primary CTA ["Start free trial"]. Secondary CTA ["See how
   it works"]. Hero image/video placeholder.
3. Social proof: 6 customer logos in a row. "Trusted by 2,000+ teams"
4. Value props: 3 columns. Each: icon, headline, one sentence. Focus on
   OUTCOMES, not features.
5. How it works: 3 steps. Each: step number, headline, one sentence.
   Visual: screenshot/GIF placeholder.
6. Features: 2-column grid. 6 features. Each: feature name + one sentence.
7. Testimonials: 3 quote cards. Each: quote (1-2 sentences), name, title,
   company, headshot placeholder.
8. Pricing (if pricing page): 3 tiers. Monthly/annual toggle. Recommended
   tier highlighted. Each tier: price, description, 5 features, CTA.
9. FAQ: 6 questions with expandable answers. Cover pricing, setup, security,
   support, cancellation, comparison.
10. Final CTA: Same as hero CTA. "Start free trial." No credit card required.
11. Footer: Logo, links, copyright, social icons.

STYLE:
- Dark theme (or light — pick one)
- Color palette: primary #0066FF, secondary #FF6600, background #0A0A0A,
  text #FFFFFF, muted #9CA3AF
- Typography: Inter, headings bold, body regular
- Spacing: generous. 80-120px between sections
- Cards: subtle borders, 8px radius, hover lift effect
- Buttons: primary (filled, white text), secondary (outlined, primary color)
- Max width: 1200px, centered

TECHNICAL:
- Mobile-responsive: stack sections vertically on mobile
- Touch targets: 44px+ on mobile
- Animations: subtle fade-in on scroll (Intersection Observer)
- No heavy animations. Respect prefers-reduced-motion.

Why this prompt works:

• It specifies every section in order (v0 builds top-to-bottom)
• It includes visual styling (colors, typography, spacing)
• It includes technical requirements (responsive, accessible)
• It gives concrete examples ("Start free trial" not "CTA here")

Phase 3: Iterate Section by Section

Don't fix everything in one prompt. Iterate section by section:

ITERATION SEQUENCE (15-30 minutes):

1. "The hero headline is too generic. Make it specific: '[Company] helps
   [ICP] do [thing] in [timeframe]'"
2. "The value props are feature-focused. Rewrite them as outcomes:
   'Ship campaigns in 2 hours, not 2 weeks' instead of 'AI-powered
   campaign builder'"
3. "The testimonials are too long. Each quote should be 1-2 sentences max"
4. "Add a comparison table above the FAQ. 5 rows: [feature], Us, Competitor
   A, Competitor B. Checkmarks for us. Where competitors lack, use '—'"
5. "The pricing cards need hover states. Add a subtle scale(1.02) + shadow
   on hover for the recommended tier"
6. "Replace the hero image placeholder with a screenshot component.
   Dark background, rounded corners, subtle border"
7. "The CTA buttons feel small. Increase to 16px padding, 16px font"
8. "On mobile, the nav should collapse into a hamburger menu. Show me
   the mobile version"
9. "Add a sticky CTA bar that appears after scrolling past the hero.
   'Start free trial' button, white background, subtle shadow"
10. "Make the entire page responsive. Test at 375px, 768px, 1024px, 1440px"

Phase 4: Generate Individual Components

When the full page is good but one section needs more work:

"Generate just the testimonial section. 3 cards in a row. Each card:
- Background: slightly lighter than page background
- Border: 1px, subtle
- Padding: 32px
- Quote at top: large, italic
- Author below: avatar (circle, 48px) + name + title + company logo
- Hover: subtle border accent, no lift"

v0 will regenerate just that component. Replace the existing section with the improved version.

Phase 5: Polish for Production

Before deploying, iterate on:

1. Copy: Replace all lorem ipsum with real copy. "v0 will generate placeholder text — you MUST replace it." Write real headlines, real value props, real testimonials.

2. Images: Replace placeholders with real images:

   • Hero: product screenshot (Cmd+Shift+4, upload to v0)
   • Customer logos: actual customer logos (upload)
   • Testimonial headshots: actual customer photos

3. Links: Connect all buttons and links:

   • "Start free trial" → signup URL
   • "Book demo" → Calendly link
   • "See pricing" → pricing section anchor
   • Footer links → actual pages

4. Forms: If your page has a form (waitlist, contact, demo request):

   • Connect to form backend (ConvertKit, HubSpot, Google Forms, or API)
   • Add validation (email format, required fields)
   • Add success message ("Thanks! We'll be in touch.")
   • Add error handling

5. Analytics: Add before deploying:

   <!-- Add to head -->
   <script defer data-domain="yourdomain.com"
    src="https://plausible.io/js/script.js"></script>
   

   Or Google Analytics, PostHog, etc.

Phase 6: Export and Deploy

Option A: Deploy directly from v0 (fastest)

1. Click "Deploy" in v0
2. Connect your Vercel account
3. Add custom domain in Vercel settings
4. Done — live in under 5 minutes

Option B: Export to Next.js project (more control)

1. npx shadcn@latest add [component-url] — adds v0 component to your existing Next.js project
2. Or: Copy the code manually from v0 → paste into your project
3. git push → Vercel auto-deploys on push

Option C: Export as static HTML (simplest)

1. Copy the generated HTML/CSS
2. Paste into a new file
3. Deploy to any static host (Netlify, Cloudflare Pages, GitHub Pages)

Phase 7: Post-Launch Iteration

After launch, iterate based on data:

ANALYTICS-DRIVEN PROMPTS:

1. "The hero CTA has a 2.1% click rate. Generate 3 hero variants with
   different headlines and CTAs to A/B test"
2. "Mobile bounce rate is 68%. Audit the mobile version and fix any
   layout issues. Stack all sections vertically. Ensure touch targets 44px+"
3. "The pricing page has a 1.2% conversion rate. Generate 3 pricing page
   variants: one with annual default, one with monthly default, one with
   a 'Most Popular' badge on the middle tier"
4. "Page load time is 4.2 seconds. Optimize: lazy load below-fold images,
   remove unused CSS, defer non-critical scripts"

v0 Prompts for Specific Page Types

SaaS Landing Page

"Build a SaaS landing page for [product]. Dark theme. Sections: hero,
social proof (logos), 3 value props (outcomes), how it works (3 steps),
testimonials (3), pricing (3 tiers, annual default, Growth recommended),
FAQ (6), final CTA, footer. Style: clean like Stripe, dark like Linear.
Primary: #0066FF. Font: Inter."

Pricing Page

"Build a pricing page for [product]. 3 tiers: Starter $49/mo, Growth
$199/mo (RECOMMENDED), Enterprise (Contact us). Monthly/annual toggle,
annual default. Feature comparison table below tiers. FAQ section with
8 questions. Enterprise includes a 'Book a call' CTA instead of price."

Waitlist Page

"Build a waitlist page for [product] launching in [month]. Hero: product
name, one-line value prop, email input + 'Join waitlist' button. Below:
3 things you'll get (early access, founding pricing, priority support).
Social proof: '2,000+ on the waitlist.' Counter showing signup count."

Event/Webinar Page

"Build a registration page for [event name] on [date]. Hero: event name,
date/time, one-line description. Below: 3 reasons to attend. Speaker
section with headshots, names, titles, talk titles. Agenda/timeline.
Registration form: name, email, company. 'Save my spot' CTA."

Output Format

v0 LANDING PAGE BUILD — [Page Name]

v0 Project URL: [v0.dev link]
Deployed URL: [production URL]

Prompt Used:
[Master prompt text]

Iteration Log:
1. Generated v1 — [what worked, what needed change]
2. ["Change hero"] — [result]
3. ["Add testimonial section"] — [result]
...

Export Method: [Direct deploy / shadcn add / manual copy]

Post-Launch:
- Analytics: [Plausible / GA / PostHog connected]
- Conversion rate: X% (target: Y%)
- Next iteration: [date / trigger]

Implementation Checklist

• Real copy — no lorem ipsum, no AI-generated placeholder text
• Real images — product screenshots, customer logos, actual headshots
• All CTAs linked to actual URLs (not "#")
• Forms connected to backend (ConvertKit, HubSpot, API)
• Mobile-responsive (tested on iPhone SE + iPhone Pro Max + iPad)
• Page load under 3 seconds (Lighthouse score 90+)
• Analytics installed and verified (check real-time dashboard)
• SEO: title tag, meta description, H1, alt text on all images
• Legal: Privacy policy link, terms link in footer
• No AI "slop" — no generic SVG illustrations, no lorem ipsum

Quality Check

Before delivering, verify:

• Output matches the user's stated request
• Named frameworks or sources are reflected in the recommendation
• The deliverable is specific enough for an agent to execute
• Any assumptions, risks, or dependencies are explicit
• No unsupported claims, invented facts, or private/internal references are included

Common Pitfalls

1. One-shot prompting. "Build a SaaS website" in one prompt = generic, unbranded, middle-of-the-road output. Fix: Build section by section. Hero first. Iterate. Then pricing. Iterate.

2. Generic output without brand context. Without brand colors, fonts, and references, v0 generates generic Tailwind. Fix: Paste your brand context into the first prompt. Reference a known site for style.

3. Placeholder content shipped to production. v0 generates "Lorem ipsum" and placeholder images. Shipping this live = amateur. Fix: Replace ALL placeholder content before deploying.

4. Not iterating on mobile. v0 generates desktop-first by default. Mobile layout often breaks. Fix: "Show me the mobile version" as a dedicated iteration step.

5. No form connection. A "Start free trial" button that links to "#" is a broken promise. Fix: Connect forms and CTAs before deploying.

6. Too many sections. v0 will happily generate 15 sections if you ask. More sections = more cognitive load = lower conversion. Fix: 6-8 sections max. Cut anything that doesn't directly support the conversion goal.

Expert References

• Guillermo Rauch (@rauchg) — v0 creator, Vercel CEO. Follow for v0 updates, prompt techniques, and generative UI philosophy.
• v0 documentation: v0.dev/docs — prompt guide, component library, export/deploy instructions
• shadcn/ui: ui.shadcn.com — the component library v0 generates. Learn it to understand what v0 is building.

Execution Artifacts

• references/framework-notes.md — Named frameworks and reference tables
• templates/output-template.md — Deliverable shell for agent output
• scripts/check-output.py — Lightweight deliverable validator

Related Skills

• vibe-coding — Full AI dev tools comparison (v0, Lovable, Bolt, Jesse)
• vibe-marketing — AI-powered marketing content at scale
• landing-pages — CRO audits, conversion optimization patterns
• design-system-gtm — Brand tokens, CSS variables for consistent AI output
• popular-web-designs — 54 brand design systems as visual reference
• ui-ux-gtm — Landing page UX, form design, accessibility