Build a Landing Page with AI: High-Converting Design from Scratch

Before You Write a Single Line: Define Your Offer

This is where most people skip and then wonder why their landing page doesn't convert. Before prompting AI, answer these four questions on paper:

1. Who is this for? Be specific. "Developers" is wrong. "Non-technical founders building their first SaaS" is right.
2. What is the single thing you're offering? One thing. Not three.
3. What's the one action you want visitors to take? Sign up for waitlist? Book a call? Buy now?
4. What's the strongest specific benefit? Not "saves time" — "deploy in 10 minutes, not 10 hours."

AI can write brilliant code for a structurally perfect landing page. The copy — the words that make people sign up — has to come from you. Do this work first.

Landing Page vs. Website: Key Difference

A landing page has no navigation menu (or minimal navigation that doesn't let people escape). Every element exists to move visitors toward one action. Remove everything that distracts from that action.

Step 1: Set Up the Project

portfolio/           ← Or create a new folder: my-product-landing/
├── index.html
├── css/
│   └── styles.css
├── js/
│   └── main.js
└── images/
    └── hero-image.webp   ← Optional: your product screenshot

Open in Cursor, initialize git (git init), same setup as the portfolio tutorial.

Step 2: Build the HTML Structure

Key HTML Pattern: The Email Capture Form

<!-- Hero email capture — the most important element on the page -->
<form class="email-form" action="https://formspree.io/f/YOUR_FORM_ID" method="POST">
  <div class="email-input-group">
    <input
      type="email"
      name="email"
      placeholder="Enter your email address"
      required
      aria-label="Email address"
    >
    <button type="submit" class="btn-primary">
      Get Early Access →
    </button>
  </div>
  <p class="form-disclaimer">No spam. Unsubscribe anytime.</p>
</form>

Formspree setup: Go to formspree.io, create a free account, create a new form, and replace YOUR_FORM_ID with your actual form ID. Every submission lands in your email inbox — zero backend code required. Under the hood, this uses the Fetch API to send data to Formspree's servers.

Step 3: Style for Conversion

The Psychological Design Rules

These are the patterns that separate converting landing pages from ones that look good but don't work:

• One dominant CTA color: Use your accent color ONLY on CTA buttons. If you use it elsewhere, the buttons lose their pull.
• Headlines in the hero should be your largest text — larger than feels comfortable. Hierarchy is about contrast.
• Social proof near the CTA: People convert when they feel safe. Put testimonials or logos directly above or below the form, not buried below the fold.
• White space is conversion space: Cramped pages feel untrustworthy. Give elements room to breathe.

Step 4: Add Interactivity

// js/main.js — Core patterns

// Sticky nav background on scroll
const nav = document.querySelector('.nav')
window.addEventListener('scroll', () => {
  nav.classList.toggle('scrolled', window.scrollY > 80)
})

// Animate elements on scroll
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible')
    }
  })
}, { threshold: 0.1 })

document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el))

// Formspree success handling
document.querySelectorAll('.email-form').forEach(form => {
  form.addEventListener('submit', async (e) => {
    e.preventDefault()
    const data = new FormData(form)
    try {
      const res = await fetch(form.action, {
        method: 'POST',
        body: data,
        headers: { 'Accept': 'application/json' }
      })
      if (res.ok) {
        form.innerHTML = '<p class="success-msg">🎉 You\'re on the list! We\'ll be in touch.</p>'
      }
    } catch (err) {
      console.error('Form error:', err)
    }
  })
})

Step 5: Copy That Converts

AI can structure your landing page. The words are your job. Here's a framework for each section:

Hero Headline Formula

The best landing page headlines follow this pattern: [Specific Result] for [Specific Audience] without [The Pain They're Avoiding]

• "Ship your SaaS in a weekend, not a year — without hiring developers"
• "Replace your entire ops stack with one AI agent — no technical expertise required"
• "Build the app you've been imagining in 4 hours — using plain English"

Feature Descriptions: Benefits, Not Features

❌ Feature-focused (weak):
"Real-time database synchronization across all connected clients"

✅ Benefit-focused (converts):
"Everyone on your team sees the same data, instantly — no refresh, no conflicts,
no 'which version is current?' confusion"

Step 6: Test and Deploy

Mobile Check (Do This Before Deploying)

In Chrome: Right-click → Inspect → click the phone/tablet icon (responsive mode). Check at 375px (iPhone SE) and 768px (iPad). Common issues:

• Email input + button overflows on mobile → stack them vertically
• Hero headline too large → reduce font size in mobile breakpoint
• Feature cards too narrow → switch to 1-column on mobile

Deploy to Vercel

git add .
git commit -m "Landing page complete"
git push origin main
# Connect repo to Vercel → auto-deploys on every push

See the portfolio tutorial for the full Vercel setup walkthrough — it's identical for static HTML sites.

What to Add Next

• Custom domain: Point a real domain at your deployment — learn how in our DNS guide
• Analytics: Add Plausible or Simple Analytics to see where visitors come from and how far they scroll before leaving
• A/B test your headline: Tools like Google Optimize let you test two headlines simultaneously — data beats gut feeling
• Email sequence: Connect Formspree to ConvertKit or Mailchimp to send a welcome sequence to new signups
• Live chat: Add Crisp or Tawk.to (free) — being able to answer questions in real time dramatically increases conversions for unknown products

What to Learn Next

Frequently Asked Questions