Landing Page Design Prompts

AI prompts for creating high-converting landing pages with hero sections, feature grids, testimonials, and CTAs.

landing page prompthero section promptlanding page design AIwebsite landing page promptSaaS landing page promptproduct landing page design

About This Topic

Landing pages are single-purpose pages designed to convert visitors into users or customers. Effective landing pages follow a proven structure: a compelling hero section with a clear value proposition, social proof, feature highlights, and a strong call-to-action. The visual design should guide the eye downward through the page while maintaining a consistent brand feel.

Prompt Examples

AI Prompt Examples

Copy these prompts to generate Landing Page Design Prompts designs with your favorite AI tool.

SaaS Product Landing

General

Design a SaaS product landing page with these sections in order: 1) Hero with headline, subheadline, CTA button, and product screenshot. 2) Logo bar of trusted companies. 3) Three-column feature grid with icons. 4) Large product demo section with screenshot and feature callouts. 5) Pricing table with 3 tiers. 6) Testimonial carousel with photos and quotes. 7) FAQ accordion. 8) Final CTA section. Use a modern, clean design with generous whitespace.

Startup Landing for v0

Create a modern startup landing page with shadcn/ui. Hero section with large heading, gradient text accent, subtext, two CTA buttons (primary + secondary), and a browser mockup image. Below: animated stats counter bar, 3-column feature cards with Lucide icons, a testimonial section with avatar + quote cards, and a dark footer with newsletter signup. Use Inter font, smooth scroll, and a purple-to-blue gradient accent.

Landing Page for Cursor

Cursor

Build a Next.js landing page with Tailwind CSS and Framer Motion. Structure: sticky navbar with logo and CTA, full-viewport hero with animated gradient background and floating UI mockup, trust bar with grayscale logos, alternating left-right feature sections with images, pricing cards with popular plan highlighted, FAQ with accordion, and footer. Implement smooth scroll-triggered animations using Framer Motion's useInView.

Landing Page for Claude

Claude

Generate a complete landing page as a React component. Include: responsive hero with headline (48px desktop, 32px mobile), description paragraph, and primary CTA button. Feature section with 2x3 grid of cards, each with an icon, title, and description. Social proof section with company logos and a stat bar (e.g., '10K+ users'). Testimonial cards with star ratings. Final CTA with contrasting background color. All sections should have consistent max-w-6xl centering and py-24 spacing. Use Tailwind CSS.

Mobile App Waitlist Page

General

Design a waitlist landing page for a mobile app. Single viewport-height hero: headline at 56px/1.1 in a variable-weight sans (Inter or Geist), subheadline at 18px #52525b, and an email capture form (input + button in one pill, 56px tall) as the only CTA. Right side shows a phone mockup at a slight -6 degree rotation with a soft #a78bfa glow. Palette: background #fafafa, text #18181b, accent violet #7c3aed. Below the fold: a 3-step 'How it works' row and a live counter of signups. Form needs a visible label, autocomplete=email, and a 2px focus ring at 3:1 contrast against the background.

Developer Tool Landing for v0

Create a landing page for a CLI developer tool with shadcn/ui. Dark hero: background #0a0a0a, headline 60px in Geist with a #22d3ee gradient accent on one word, and an install command block (JetBrains Mono 14px, background #171717, copy button with a 'Copied' toast). Below: a tabbed code demo (npm/pnpm/yarn), a 3-column feature grid with 20px Lucide icons, a terminal-style testimonial section, and GitHub star count badge. Section spacing py-24, max-w-5xl. Keep body text #a1a1aa at minimum 4.5:1 contrast and give the copy button an aria-label.

Ebook Lead Magnet Page for Cursor

Cursor

Build a Next.js landing page for a free ebook download. Two-column hero: left has an eyebrow label (13px uppercase tracking-wide #b45309), a 48px serif headline (Fraunces or Playfair Display), 5 bullet points with check icons of what readers learn, and a form (name + email, stacked, 48px inputs); right shows a 3D book cover mockup with a #fbbf24 back-glow. Palette: cream background #fffbeb, ink text #292524, amber accent #d97706. Add a testimonial strip with 3 quotes and an author bio section with a 96px round photo. Validate email inline with error text in #b91c1c plus an icon, and keep labels visible (no placeholder-only fields).

Agency Services Landing for Claude

Claude

Generate a design agency landing page as a React component. Structure: oversized hero headline at clamp(48px, 8vw, 96px) in a grotesque font with -0.03em letter-spacing, a marquee strip of client names, a services list as full-width rows (72px tall, border-t #e4e4e7) that expand on hover to reveal a description, a case study grid with 4:3 image cards and hover zoom (scale 1.03, 400ms ease-out), and a footer CTA reading 'Start a project' at 40px. Palette: white #ffffff, near-black #111111, one accent chartreuse #bef264 for hover states and selection. Respect prefers-reduced-motion by disabling the marquee and hover zoom.

Related Styles

Explore these styles for ready-made tokens and components.

Fullscreen Hero

expressive / layout

Apple Style

minimal / visual

Stripe Style

modern / visual

Glassmorphism

modern / visual

Modern Gradient

expressive / visual

Minimalist Flat

minimal / visual

Use Cases

Best Use Cases

SaaS Product Launch

Introducing new software products with feature highlights and pricing.

App Download Page

Mobile app promotion with screenshots, reviews, and download links.

Event Registration

Conference or webinar landing pages with schedule, speakers, and signup form.

Portfolio Showcase

Personal or agency portfolio with project highlights and contact form.

FAQ

Frequently Asked Questions

What is the best structure for a landing page?

The proven structure follows: Hero (headline + CTA) > Social Proof (logos/stats) > Features (3-6 highlights) > How It Works (3 steps) > Testimonials > Pricing > FAQ > Final CTA. Each section should have one clear purpose and guide visitors toward conversion.

How to design a hero section for a landing page?

A high-converting hero needs: a clear, benefit-driven headline (6-12 words), a supporting subheadline explaining how, a prominent CTA button with contrasting color, and a visual element (screenshot, illustration, or video). Keep the hero above the fold and limit text to essential information only.

Which AI tools generate landing pages?

v0 by Vercel excels at generating full landing pages with shadcn/ui components. Cursor and Claude can generate complete page code with animations and responsive design. StyleKit provides style-consistent design tokens and prompts that work across all these tools, ensuring your generated pages look professional rather than generic.

How to make a landing page convert better?

Key conversion tactics: use a single, clear CTA per section; add social proof near CTAs; reduce form fields to the minimum; use directional cues (arrows, eye gaze in photos) pointing toward CTAs; ensure page loads under 3 seconds; and A/B test headlines and button copy. Mobile optimization is critical since most traffic is mobile.

How long should a landing page be?

Match length to commitment level. For a free signup or waitlist, a short page (hero + 3 features + CTA, roughly 1-2 screens) converts best because the ask is small. For paid products above roughly 50 USD/month, longer pages of 6-8 sections outperform because visitors need objections answered: add testimonials, a comparison table, security badges, and an FAQ. A practical rule: every extra section must answer a real objection, not repeat the pitch. Track scroll depth — if 80% of visitors never reach a section, cut it or move it up.

What font sizes should I use on a landing page?

A dependable scale: hero headline clamp(36px, 6vw, 64px) with 1.1 line-height and -0.02em letter-spacing; section headings 30-36px; card titles 18-20px; body text 16-18px with 1.6 line-height; captions and eyebrows 13-14px. Never let body text drop below 16px on mobile — it hurts readability and iOS zooms form inputs under 16px. Keep line length at 60-75 characters using max-w-prose or max-w-2xl. Use font weight (600-700 for headings, 400 for body) rather than more sizes to build hierarchy; two weights and five sizes cover an entire page.

Previews

Example previews and starter templates

Treat these templates as landing page structure references: hero, social proof, pricing, FAQ, and CTA rhythm usually produce better prompts than a generic landing page brief.