Landing pages are one of the highest-volume prompting targets for AI UI tools. They're fast to generate, easy to evaluate, and the success criteria are clear: does it convert? Here's a roundup of the prompt patterns that consistently produce the best output across v0, Bolt, and ChatGPT.
Pattern 1: The Section-by-Section Breakdown
The most reliable pattern is to list every section of the landing page in order, with a one-line description of each. Don't describe the page holistically — describe each section as a discrete component with a job to do.
Build a SaaS landing page with the following sections, in order:
1. Nav — Logo on left, links (Features, Pricing, Docs, Blog), CTA button "Start free" on right
2. Hero — H1 headline, subheadline (2 sentences), two CTAs: "Start free" (primary) and "See demo" (ghost)
3. Social proof — Logos of 5 recognisable companies in a single row
4. Feature highlights — 3-column grid, each with icon, title, 2-sentence description
5. How it works — Numbered 3-step process with illustration placeholder each
6. Pricing — 3-tier card layout (Starter / Pro / Enterprise), monthly/annual toggle
7. Testimonials — 3 quote cards with name, role, company, avatar placeholder
8. FAQ — Accordion, 6 questions
9. Final CTA — Full-width section, H2, subtext, single primary button
10. Footer — 4-column links, logo, copyright
Use Next.js with Tailwind CSS and shadcn/ui.
This pattern works because it gives the model a content contract. Every section has a defined job, and the model doesn't have to decide what to include or exclude.
Pattern 2: The Persona + Pain Prompt
For hero sections specifically, leading with the target persona and their core pain produces significantly better copy than asking for copy directly.
Target persona: B2B SaaS founder, 10-50 person company, struggles with customer churn visibility.
Generate a hero section with:
- H1 that names the pain, not the product
- Subheadline that bridges the pain to the solution in one sentence
- Primary CTA: "Start free — no card required"
- Secondary CTA: "Watch 2-min demo"
- Hero image placeholder: dashboard screenshot with annotation overlays
Copy generated this way tends to be less generic. The model has enough context to write something a real persona would respond to, rather than defaulting to "The all-in-one platform for your team."
Pattern 3: The Constraint Prompt
When you have a specific design constraint — a particular style reference, a colour palette, a component library — front-load it before the layout description. Models will override implicit constraints with explicit ones if they conflict, so make yours explicit.
Style: Clean, minimal SaaS. White background, slate-900 text, violet-600 accent.
Component library: shadcn/ui only. No custom components.
Responsive: Mobile-first. Stack all multi-column sections to single-column below 768px.
No animations. No gradients. No drop shadows except on cards (shadow-sm).
Layout: [section list here]
Constraint prompts are especially effective for teams enforcing a design system. They prevent the model from importing random libraries or inventing styles that don't fit.
Pattern 4: The Mockdown-First Prompt
Before asking for code, paste a mockdown of the full page. This pre-structures the model's output and dramatically reduces the likelihood of sections being dropped or reordered.
Here is the layout mockdown for a SaaS product landing page:
[Nav: Logo | Features | Pricing | Docs | "Start free" CTA]
[Hero: H1 | Subheadline | Primary CTA + Ghost CTA | Product screenshot]
[Social proof: Company logos strip]
[Features: 3-column icon + title + description]
[How it works: 3-step numbered process]
[Pricing: 3-tier cards | Monthly/Annual toggle]
[Testimonials: 3 quote cards]
[FAQ: Accordion 6 items]
[CTA Banner: H2 + subtext + button]
[Footer: 4-column links | Logo | Copyright]
Generate the full page code in Next.js + Tailwind CSS based on this mockdown.
The mockdown acts as a persistent reference that the model checks against as it generates each section. Compare this to our SaaS Product Landing Page entry to see a complete worked example.
Pattern 5: The Component Isolation Pattern
For pricing sections specifically — which are notoriously hard to get right on the first try — isolate the component and prompt for it independently before integrating it into the full page.
Generate a pricing section component for a SaaS product. Requirements:
- 3 tiers: Starter ($29/mo), Pro ($79/mo), Enterprise (Custom)
- Monthly / Annual toggle (annual saves 20%)
- Pro tier visually highlighted as "Most popular"
- Each tier: name, price, 5-6 feature bullets, CTA button
- Feature bullets: use checkmarks for included, greyed-out for excluded
- Responsive: stack to single column on mobile
Return as a standalone React component with Tailwind CSS.
Once you have a pricing component you're happy with, reference it by name when building the full page: "Use the PricingSection component I just approved." This prevents regression.
You can find a complete pricing-section mockdown and prompt in our Three-Tier Pricing Page entry.
Which Tool Performs Best?
All four patterns work across ChatGPT, v0, and Bolt — but each tool has strengths:
- v0 produces the cleanest initial output for full-page layouts. The section-by-section breakdown pattern is especially effective here.
- Bolt is best for rapid iteration from a working prototype. Use the constraint prompt to lock in your design system early, then iterate in Bolt's editor.
- ChatGPT with the persona + pain pattern consistently produces better hero copy than the other tools — use it for copy generation even if you build elsewhere.
Summary
The single most impactful change you can make to your landing page prompts is to stop describing the page and start specifying the contract. List sections explicitly. Name components precisely. Provide your design constraints upfront. The model doesn't need inspiration — it needs structure.
If you want ready-to-use prompts for each of these patterns, the SaaS Product Landing Page and Three-Tier Pricing Page entries on LayoutPrompts include full prompts and mockdowns you can copy directly into any AI tool.