Creating Landing Pages with AI Agents

Overview

This cookbook walks through building high-converting landing pages from concept to deployed site using AI coding agents. The same process that used to take a team of designers and developers 2–4 weeks can now be completed solo in 2–6 hours. Target audience: Founders, marketers, and developers Expected outcome: A live, responsive landing page in 2–6 hours

---

What You'll Need

Tool	Cost	Best For
v0.dev	$20–30/mo	React/Next.js components
Lovable	$25/mo	Full design + code from description
Bolt.new	$20–30/mo	Full-stack, any framework
Claude Artifacts	Included in Claude	Quick prototypes + single-file pages
Cursor	$20/mo	IDE with AI for custom builds
GitHub Copilot	$10–19/mo	IDE assistant

---

6-Phase Workflow: Concept to Deploy

Phase 1: Ideation & Requirements (15–30 min)

Start with a voice or text brainstorm. Talk to Claude or ChatGPT as if you're pitching a friend — no structure needed yet. Then generate a lightweight PRD:

I'm building a landing page for: [PRODUCT]
Target audience: [DESCRIBE]
Core value prop: [ONE SENTENCE]
Main CTA: [WHAT SHOULD VISITORS DO]
Tone: [professional / playful / bold / minimalist]

Generate a landing page brief that includes:
1. Hero headline + subheadline options (3 each)
2. 3-5 key sections to include
3. Social proof format (testimonials, logos, stats)
4. CTA copy options
5. Overall tone and personality

Phase 2: Design System Setup (30–60 min)

This phase is the most important and most skipped. Without a locked design system, you get "AI slop" — generic, inconsistent pages that look like every other AI-generated site. Inspiration sources:

• Landbook — curated landing page gallery
• saaslandingpage.com — SaaS-specific examples
• 21st.dev — React component inspiration Generate a 300+ line design guidelines doc with Claude:

Based on this inspiration: [PASTE SCREENSHOTS OR DESCRIBE]

Generate a complete design system doc that includes:
- Color palette (primary, secondary, accent, neutral, semantic)
- Typography scale (font families, sizes, weights, line heights)
- Spacing system (4px base grid)
- Border radius tokens
- Shadow tokens
- Component style (buttons, cards, inputs, badges)
- Animation philosophy (subtle vs bold)
- Do's and don'ts

Save this doc as design-system.md — it becomes your persistent context anchor for all subsequent prompts.

Phase 3: Structure Planning (15–30 min)

Standard high-converting section flow:

1. Hero — Headline, subheadline, primary CTA, hero visual
2. Problem — Agitate the pain point
3. Solution — How your product solves it
4. Features — 3–6 key capabilities
5. Social Proof — Testimonials, logos, stats
6. Pricing — 2–3 tiers (always have a middle option)
7. FAQ — Overcome objections
8. CTA — Final call to action For each section, generate 3–4 copy variations, choose your favorite, and finalize before touching code.

Phase 4: Code Generation (2–6 hours)

Choose your platform based on your needs:

If you want...	Use
No-code with full design control	Lovable
React/Next.js components	v0.dev
Full-stack with any framework	Bolt.new
Custom IDE build with full control	Cursor
Always build section by section, never the full page at once. Each section is one prompt.
Create a project-instructions.md file with your design system + product context and paste it at the start of every session.

Phase 5: Polishing (1–3 hours)

Micro-interactions to add:

• Hover states on all interactive elements
• Scroll-triggered fade-in animations (use Framer Motion or CSS @keyframes)
• SVG path animations for illustrations
• Button press states Responsive breakpoint checklist:
• 320px (iPhone SE)
• 768px (iPad)
• 1280px+ (Desktop) Performance audit: Run Lighthouse in Chrome DevTools. Target: Performance 90+, Accessibility 95+. Accessibility pass: Install axe DevTools browser extension. Fix all critical issues before launch.

Phase 6: Deployment (5–30 min)

Platform	Deploy Method	URL Format
v0.dev	One-click to Vercel	yoursite.vercel.app
Lovable	Built-in publish	yourapp.lovable.app
Bolt.new	Export to Netlify or .bolt.host	yourapp.bolt.host
Cursor	Push to GitHub → Vercel/Netlify	yoursite.vercel.app

---

Tool-Specific Workflows

v0.dev

1. Upload your mockup or describe the page in detail
2. v0 generates React/Next.js component code
3. Iterate with follow-up prompts: "Make the hero section taller and change the button to match the gradient from my design system"
4. Click Deploy to push to Vercel instantly v0.dev docs →

Lovable

1. Describe your product, target audience, and desired style
2. Lovable generates the full design, layout, and copy
3. Select sections to keep or regenerate
4. Use the visual editor to tweak details
5. Click Publish Lovable docs →

Bolt.new

1. Choose your framework (Next.js, Astro, SvelteKit, plain HTML)
2. Paste a structured prompt (see Prompt Templates below)
3. Iterate section by section
4. Export to GitHub or deploy directly Bolt.new →

Claude + Cursor

1. Initialize Next.js: npx create-next-app@latest my-landing --typescript --tailwind
2. Paste the XML-structured Claude prompt (see below)
3. Copy the generated code into Cursor
4. Use Cursor Agent mode for iterations
5. Push to GitHub → connect Vercel for auto-deploy

---

Prompt Templates

Full XML-Structured Claude Prompt (SaaS Landing Pages)

<task>Build a high-converting SaaS landing page</task>


  Name: [PRODUCT NAME]
  Description: [ONE PARAGRAPH]
  Target audience: [DESCRIBE]
  Core value prop: [ONE SENTENCE]
  Primary CTA: [ACTION + URL]


<design_system>
  [PASTE YOUR design-system.md CONTENT HERE]
</design_system>

<sections>
  1. Hero: [HEADLINE] | [SUBHEADLINE] | CTA: [BUTTON TEXT]
  2. Problem: [DESCRIBE THE PAIN]
  3. Solution: [HOW YOU SOLVE IT]
  4. Features: [FEATURE 1] | [FEATURE 2] | [FEATURE 3]
  5. Social proof: [TESTIMONIAL OR STAT]
  6. Pricing: [TIER 1] | [TIER 2] | [TIER 3]
  7. FAQ: [Q1] | [Q2] | [Q3]
  8. Final CTA: [CLOSING STATEMENT + BUTTON]
</sections>

<tech_stack>Next.js 14, TypeScript, Tailwind CSS, Framer Motion</tech_stack>

<output>Single-file React component with all sections. Mobile-first. Accessible. No placeholder text.</output>

7-Section Bolt.new Prompt

Build a landing page with these exact sections:

1. HERO: [headline] + [subheadline] + [CTA button] + [hero image or abstract background]
2. LOGOS: "Trusted by teams at" + 5–6 company logo placeholders
3. FEATURES: 3-column grid, icon + title + 2-line description each
4. HOW IT WORKS: 3-step numbered process
5. TESTIMONIALS: 3 cards with avatar, quote, name, title
6. PRICING: 3 tiers — Free / Pro / Enterprise
7. FOOTER: Links + copyright

Design: [PASTE DESIGN SYSTEM TOKENS]
Framework: Astro + Tailwind
Mobile-first, dark mode support

Agentic Single-Prompt Method (Fastest)

You are a world-class UI engineer building a production-ready landing page.

Product: [NAME + ONE-LINE DESCRIPTION]
Audience: [WHO THEY ARE]
Goal: Get visitors to [PRIMARY CTA]

Generate the complete landing page as a single Next.js component.
Do not ask clarifying questions. Make strong design decisions.
Use Tailwind CSS. Include hover animations. Mobile-first.
The output should be immediately deployable — no TODOs, no placeholders.

---

Real Examples

Oleadthis.app

Built with Claude + Cursor in 2 hours. The founder used the XML prompt template and built each section as a separate component before composing them.

GradPro

Started in Lovable for rapid layout generation, refined in v0.dev for component-level polish. Total time: 4 hours.

MarsBased

MarsBased rebuilt their full agency site using v0.dev in 30 minutes of generation time, then spent 2 hours polishing copy and animations.

Raduan.xyz v2

Custom portfolio site with SVG scroll animations. Built over 2.5 weeks with Claude Code, pushing what's possible with AI-generated motion design. (See site →)

---

Deployment Cost Summary

Platform	Free Tier	Bandwidth	Custom Domain
Vercel	100GB/mo	Included	Yes (free)
Netlify	100GB/mo	Included	Yes (free)
Lovable	Included with plan	Included	Paid plan
GitHub Pages	Unlimited	100GB soft	Yes (free)

---

Common Mistakes

1. Skipping design system setup — This is the single biggest cause of "AI slop." Spend 30–60 minutes here before writing a line of code.
2. Building the entire page at once — Section by section always produces better results. AI loses coherence on large outputs.
3. Not adding micro-interactions — Static pages convert poorly. Even subtle hover effects make a page feel premium.
4. Ignoring responsive design — Test at 320px, 768px, and 1280px after every section.
5. Not specifying design tokens in prompts — Without your design system in the prompt, AI defaults to generic choices. Always paste design-system.md as context.