Most tutorials about building landing pages with AI describe the tools. This one describes the actual process -- the specific sequence, the repeated prompts, the things that work, the things that consistently fail, and the human edits that the AI cannot do.
If you have a validated idea and need a landing page live this week, here is what the build process actually looks like.
The Tool Stack
The current AI-powered landing page build usually involves two to three tools:
v0 (vercel.com/v0): Generates complete, styled React component code from a text description. Best for generating the initial page structure and specific sections. Produces real code (not a mock) that you can deploy immediately or paste into your project.
Cursor: AI-powered code editor. Best for iterating on the generated code -- adjusting specific elements, fixing layout issues, adding interactivity. You paste the v0 output, describe what you want changed, and it edits in place.
Claude or ChatGPT: Best for the copy layer -- generating and refining the text content before or after the structure exists. Not ideal for generating page structure directly; better as a copywriting partner for the text that goes into the structure.
If you don't have React/code experience and aren't using Cursor: Framer's AI mode (generate a page from a text description in Framer's no-code environment) or Webflow's AI features are the alternatives, though the output control is lower.
This walkthrough follows the v0 + Cursor path, which produces a deployable result fastest for founders with basic code reading ability. If you're fully non-technical, the Framer AI path is approximately parallel in logic, different in specific tool steps.
Step 1: Copy First, Structure Second (90 minutes)
Before touching any AI code tool, write the copy. Building the structure without the copy locks you into a page that fits placeholder text rather than your real message.
Before you open v0:
-
Complete your headline and sub-headline (ideally from the customer interview language process described in the ChatGPT copy post). You want a primary headline and a backup.
-
Write the problem section: two to three sentences describing the problem in customer language. This becomes the copy for the "who this is for" or "the problem we solve" section.
-
Write the solution description: what the product does in plain terms.
-
Write the primary CTA: the text on the button and the short text above it. The sub-CTA text above the form ("Join X founders already signed up" or equivalent) matters and should be real if you have any signups, invented if you don't yet.
-
List any social proof: names of people who've been interviewed or who've expressed interest. If you have zero social proof, note that -- you'll need to decide how to handle the social proof section.
-
Write 3-4 FAQ answers: use the actual questions that came up in customer interviews.
Total time: 60-90 minutes if your research is complete. If this step takes longer than two hours, your research isn't complete enough to build a page yet.
Step 2: Generate the Initial Structure in v0 (30-45 minutes)
Open v0 with a detailed description prompt. The more specific the prompt, the better the initial output.
Effective v0 prompt structure:
Build a conversion-focused waitlist landing page for a product called [name].
Target customer: [specific customer type]
Problem it solves: [one sentence]
Primary CTA: Email capture with button text "[your CTA text]"
Page sections in order:
1. Navigation: logo on left, no menu items, just the product name
2. Hero: headline "[your headline]", sub-headline "[your sub-headline]", email form with submit button "[CTA text]", a line of social proof text below the form
3. Problem section: a clean 3-column or row section showing 3 specific problems (I'll provide the copy)
4. Solution section: brief description of how the product works
5. Social proof: placeholder for 2-3 testimonial cards
6. Second CTA: repeat the email capture
7. Footer: minimal, just copyright and links to privacy/terms
Design requirements:
- Clean, minimal design with plenty of white space
- Primary color: [hex or color description]
- Sans-serif body font
- No stock photos
- Mobile-responsive
- The email form should be prominent above the fold on both desktop and mobile
What v0 produces: a complete React page with Tailwind CSS styling, a working form structure (not yet connected to any backend), all sections laid out. The first output is usually 80-90% of the visual structure with placeholder copy.
What v0 consistently gets wrong on the first pass:
- Hero section is often too tall, pushing the email form below the fold on mobile
- Social proof section usually generates fake testimonials you need to replace entirely
- The color palette often picks slightly wrong shades of your specified color
- Navigation sometimes includes elements you didn't ask for
Step 3: Paste Your Real Copy Into the Generated Structure (20-30 minutes)
Take the v0 output code and do a copy-paste replacement of all placeholder text with your real copy. Do this in a text editor before importing into Cursor -- it's faster than using AI for straightforward substitution.
Replace:
- Every headline placeholder with your actual headline
- Every placeholder testimonial with either real testimonials (if you have them) or a different social proof format (see below)
- Every description paragraph with your actual copy
- Every CTA button text with your actual CTA
For the social proof section specifically: the fake testimonials that AI generates are immediately recognizable and should never appear on a real page. Your options if you have no testimonials yet:
- Replace with a problem-validation stat: "73% of independent consultants report [problem] at least monthly" -- if you have real data from your interviews
- Replace with the number of interviews conducted: "Based on 40+ conversations with [customer type]"
- Replace with a waiting-list count if you have one: "Join 127 people already waiting"
- Remove the section entirely and add a founder note instead
The founder note is the most credible pre-launch social proof available. A short paragraph from you, with your name and photo, about why you're building this resonates more with early adopters than fake testimonials.
Step 4: Iterate the Design in Cursor (30-60 minutes)
Paste the code from v0 into Cursor. The Cursor chat interface accepts natural language descriptions of changes.
Effective iteration prompts:
- "The hero section is too tall. Reduce the vertical padding so the email form is visible above the fold on a 768px mobile viewport."
- "The testimonial section is currently three cards in a row. Change it to a single highlighted quote with a large quotation mark and the author's name below."
- "Add a subtle gradient background to the problem section to separate it visually from the hero."
- "The nav bar is too sticky -- make it fixed but reduce its height by 20%."
- "The body font size in the problem cards is 14px. Increase to 16px and add a small icon above each card's text."
Each prompt makes a specific, targeted change. Asking Cursor to "redesign the hero section" produces less reliable output than asking it to make specific, bounded adjustments.
What Cursor handles well: spacing adjustments, typography changes, color modifications, responsive layout fixes, adding and removing elements within an established structure.
What Cursor handles poorly: fundamentally restructuring the layout, changing the overall design system, or making the page look like a different design reference. For structural redesigns, regenerate in v0 with a more specific prompt.
Step 5: Connect the Form (20-30 minutes)
A landing page with a non-functional email form is not a landing page. Before any form submission is tested, connect it to your email tool.
The two most common connections:
Beehiiv / MailerLite / ConvertKit: These tools offer API endpoints that accept a POST request with an email address. In Cursor, ask: "Update the form's submit handler to POST the email to this API endpoint: [paste your API endpoint and documentation]." Cursor will write the connection code. Test with a real submission before sharing the page.
Dedicated form tools: Typeform, Tally, or a simple Airtable form embedded or used as a backend. Less technically elegant but requires no code -- replace the custom form with an embed.
Test the form submission from end to end -- type an email, submit, check your email list -- before any traffic reaches the page.
Step 6: Deploy (15-20 minutes)
If the code is in a GitHub repository: connect to Vercel (vercel.com), import the repository, deploy in one click. A custom domain can be added immediately.
If the code isn't in a repository yet: create a new repository on GitHub, add the files, push, then connect to Vercel.
Total deployment time with a new Vercel account: 20-30 minutes including domain configuration.
The Total Time
| Step | Time |
|---|---|
| Copy preparation | 60-90 minutes |
| v0 initial generation | 30-45 minutes |
| Real copy replacement | 20-30 minutes |
| Cursor iteration | 30-60 minutes |
| Form connection and testing | 20-30 minutes |
| Deployment | 15-20 minutes |
| Total | 3-5 hours |
A landing page that would have taken a developer two days and a designer's input can be live in a single working session. That's a real compression.
The Edits AI Cannot Do
Some elements require human input regardless of how detailed your prompts are.
Your founder photo: Add one. A real photo of the person building the product, in the founder note section, changes how early adopters receive the page. AI cannot generate or place a real photo of you.
Real social proof numbers: If you have 47 people on a waiting list, that's more compelling than "Join our early access list." Update this number manually as it grows. AI doesn't know your current count.
The specific customer language in body copy: AI generates serviceable copy but it's never as specific as the exact words a real customer used in an interview. Review every paragraph and ask: does any sentence use the exact language that appeared in my customer conversations? Replace generic phrasing with verbatim customer language where possible.
The FAQ answers: The FAQ section AI generates answers questions no one actually asked. Replace each answer with a response to a question that came up in a real customer interview. The specificity of real questions makes your FAQ section credible rather than perfunctory.
When to Stop and Launch
The page is ready when:
- The email form works and you can verify submissions are reaching your email tool
- The page is readable on a mobile phone (test on your actual phone)
- The headline passes this test: if you showed it to one of your target customers with no other context, would they understand what problem this product solves?
- There are no obviously broken layouts at any screen size
The page is not ready to launch when:
- The social proof section contains obviously fabricated testimonials
- The form doesn't work
- Any section still contains "Lorem ipsum" or v0's placeholder text
- The headline describes the product's features rather than the customer's outcome
Everything else can be improved after launch. The form working and the headline being right are the two non-negotiable conditions. Everything else is iteration.
Launch when those two things are true.
Ready to validate your idea?
Start using WarmLaunch today to grow your waitlist.