v0-lander

Files (4)

• SKILL.md
• framework-notes.md · references/
• check-output.py · scripts/
• output-template.md · templates/

SKILL.md (first lines)

# 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)
- **shadcn/ui** — Component library powering v0
- **Tailwind CSS** — Utility-first CSS framework
- **Next.js** — 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

From LeadMagic/gtm-skills, MIT.

More from LeadMagic/gtm-skills