FINDING YOUR DIRECTION

0%
← Scrollhaus Journal

AI Website Prompts · Published · 9 min read

Landing Page Prompts: 20 AI Prompts to Copy, Plus a Template

Twenty landing page prompts you can paste into any AI builder, a template for writing your own, and the reason long build specs give better pages.

Published by Amanjot Singh, founder of Scrollhaus. AI-assisted editorial work; product context, sources and corrections are documented in our editorial methodology.

PIXO, a playful consumer-tech landing page in the Scrollhaus library
Scrollhaus Journal · AI Website Prompts

Quick answer: a good landing page prompt names the audience, the offer, the one action you want, the sections in order, the visual style and the motion. Below are 15 landing page prompts you can copy into Claude, ChatGPT, Lovable, Bolt, v0 or Cursor, a template for writing your own, and the reason long build specs beat one-line prompts.

What makes a landing page prompt work?

AI tools fill every gap you leave with the most common answer. That is why vague prompts give you the same purple gradient, three feature cards and a generic call to action. A strong prompt removes the gaps. It gives the model six things:

  1. Audience and offer: who the page is for and what they get.
  2. Goal: the single conversion action, such as "book a demo" or "join the waitlist".
  3. Structure: the sections in order, from hero to footer.
  4. Real copy: the actual headline, subheadline and button text, not placeholder text.
  5. Visual system: colours as hex codes, named fonts, spacing and corner radius.
  6. Motion and constraints: what animates, the tech stack, mobile behaviour and what to avoid.

A landing page prompt template

Copy this template and fill in the brackets. It works in ChatGPT and Claude for planning, and in Lovable, Bolt, v0, Cursor and Claude Code for building.

Build a responsive landing page for [product], for [target audience].
Goal: get visitors to [one action]. Primary button: "[CTA text]".

Stack: React + TypeScript + Vite + Tailwind CSS. No UI kit.
Style: [three adjectives]. Background [hex], text [hex], accent [hex].
Fonts: [heading font] for headings, [body font] for body.

Sections, in this order:
1. Hero: headline "[headline]", subheadline "[subheadline]", CTA, [visual].
2. Social proof: [logos / one testimonial / a number].
3. Problem and solution: [two short paragraphs].
4. Features: [3 benefits, each with a title and one line].
5. How it works: [3 steps].
6. Pricing or offer: [details].
7. FAQ: [4 questions].
8. Final CTA and footer.

Motion: [e.g. headline lines rise in with a 120ms stagger; cards lift on hover].
Mobile: single column below 768px, no sideways scroll, tap targets 44px.
Do not use: stock gradients, lorem ipsum, emoji icons.

15 landing page prompts to copy

SaaS and software

1. SaaS product launch. "Build a landing page for a time-tracking app for freelance designers. Goal: start a free trial. Dark navy background, white text, lime accent, Inter font. Hero with headline 'Bill every minute you work', a product screenshot in a tilted browser frame and one button. Then three benefit cards, a pricing table with two plans, four FAQs and a footer. Cards lift on hover."

2. Waitlist page. "Create a one-screen waitlist page for an AI travel planner. Centre a large serif headline, one sentence of supporting copy, an email field with a 'Join the waitlist' button and a counter that reads '2,481 people ahead of you'. Soft sand background, charcoal text. The headline fades up word by word."

3. Developer tool. "Design a landing page for an API monitoring tool. Developer-focused and minimal: black background, mono font for code, green accent. Hero with a live-looking terminal that types a command and prints a response. Sections: three features with code snippets, a comparison table, an open-source badge and a 'Read the docs' call to action."

Lead generation and services

4. Agency lead capture. "Build a lead generation landing page for a web design agency that serves dental clinics. Goal: book a 20-minute call. Hero with a headline about new patient bookings, a short form (name, email, clinic website) and three trust points. Add two case study cards with before and after numbers, a process section with four steps and a calendar call to action."

5. Local service. "Create a landing page for a mobile car detailing business. Bright, friendly and trustworthy. Hero with a photo placeholder, a 'Get a quote' button and a phone number. Add a price list of three packages, a service-area list, six customer reviews in a carousel and a sticky call button on phones."

6. Webinar registration. "Design a webinar registration page. Above the fold: title, date, time with time zone, two speaker portraits and a sign-up form. Below: three things attendees will learn, speaker bios, and a countdown timer to the start."

Ecommerce and products

7. Single product page. "Build a product landing page for a ceramic pour-over coffee set. Warm cream background, terracotta accent, editorial serif headings. Hero with a large product image and 'Add to cart'. Then a three-step brew guide, materials and care, a gallery, reviews with star ratings and a second buy button."

8. App download. "Create an app landing page for a habit tracker. Show a phone mockup in the hero with App Store and Google Play buttons. Add three feature rows that alternate image and text, a streak counter that counts up when it enters the screen and a testimonial slider."

9. Course sales page. "Design a sales page for an online course on Figma for developers. Long-form layout: bold promise, who it is for, a curriculum accordion with six modules, instructor story, three student results, a price box with a guarantee, and an FAQ."

Animated and premium pages

10. Scroll-driven hero. "Build a hero that is pinned for two viewport heights. As the user scrolls, a product image scales from 60% to 100% and the headline splits into two lines that move apart. Use one requestAnimationFrame loop and CSS transforms only. Respect prefers-reduced-motion."

11. Video background hero. "Create a full-screen hero with a muted, looping background video, a dark gradient overlay for contrast, a transparent navbar and a headline whose lines rise from behind a mask with a 120ms stagger."

12. Bento grid features. "Design a features section as a bento grid: one large card, two medium and three small. Each card has a small looping animation that plays on hover. Rounded 24px corners and a thin border."

13. 3D product hero. "Build a hero with a three.js canvas behind the text. Load a GLB model, light it with a warm key light and a soft environment, rotate it slowly and tilt it towards the pointer. Fall back to a static image if WebGL is unavailable."

Improving an existing page

14. Conversion review. "Here is my landing page copy. Act as a conversion copywriter. List the five biggest reasons a visitor would leave without acting, then rewrite the headline, subheadline and call to action to fix them. Keep my tone."

15. Redesign from a screenshot. "This screenshot is my current landing page. Keep the content and section order. Redesign it to feel premium: more whitespace, a clear type scale, one accent colour, and subtle reveal animation. Explain each change in one line."

Copy, wireframe and optimisation prompts

16. Value proposition and headlines. "Act as a prompt engineer and conversion copywriter. For [product] and [audience], write five headline and subheadline pairs that state the value proposition with clarity. Then write three CTAs for the primary call-to-action button."

17. Wireframe first. "Create a low-fidelity wireframe for a SaaS landing page as a structured layout: header with navigation, hero image area, benefits, testimonials, pricing, FAQ and a footer with contact information and a privacy policy link. Use grey boxes only. I will approve the structure before any visual design."

18. Colour and typography system. "Suggest a color palette and typography for a wellness brand identity: one color scheme with hex codes, a heading and body font pairing, and rules for white space. Explain how each choice supports a seamless user experience."

19. A/B test variations. "Analyze this landing page. Propose three A/B test variations for the hero, each changing one thing: headline, imagery or call to action. State the hypothesis so the test is data-driven."

20. Mobile, SEO and paid campaigns. "Optimize this page for marketing campaigns: tailor the headline to the ad keyword, simplify the form, highlight one offer, and check that the layout works on desktop and on phones. Add a meta title and description."

How to use this prompt list in your workflow

Treat the list as a workflow. Start with one AI prompt for structure, customize it with your brand, then iterate. An AI-driven platform can streamline design and development and lift productivity, but effective landing pages still depend on your judgement. For landing page design inspiration, save screenshots of high-converting pages from creators you admire, or from a portfolio you like, and describe what works visually: the UX, the high-quality imagery, the spacing. Paste that description under any prompt above with the line "use this prompt as the base and match the reference". A dev can then turn the result into production code.

Landing page prompts for Claude, ChatGPT and Lovable

ToolHow to prompt it
Claude and Claude CodeGive the full spec in one message. Ask it to plan first, then build, then review its own output on mobile.
ChatGPTGood for copy, structure and turning a rough idea into a detailed build prompt for another tool.
LovableSet the style first, then build one section at a time. Say what must not change.
Bolt and v0Name the stack and component library. Ask for one page before adding more.
Cursor and CodexPut the spec in a file in the repository and point the agent at it.

For tool-specific advice, see AI website prompts for Lovable, Bolt and Claude and AI website design prompts.

Why a build spec beats a short prompt

The prompts above are starting points of 50 to 80 words. A page that looks designed usually needs 600 to 1,500 words of instructions: exact colours, the easing curve, what happens at 375px, how each section enters. Writing that from nothing takes hours. It is faster to start from a spec that was written for a page that already exists and already looks good.

That is what Scrollhaus provides. Each of its 276 websites has a live preview and a written build spec that names the components, tokens, media and motion. You scroll the real page, copy the spec, paste it into your AI builder and swap in your brand. 26 are free after a free sign-in. Open LOOPLINE, a product landing page, or ZAPLINE, a fintech page, and compare the result with what a short prompt gives you.

Common mistakes with landing page prompts

Good landing page prompts are specific, ordered and honest about the goal. Start with the template, borrow a prompt above, and move to a full build spec when the page needs to impress. Browse website designs with build specs.

Frequently asked questions

What is a good prompt for a landing page?

One that names the audience, the offer, the single action you want, the sections in order, the real copy, the colours and fonts, and how the page should move and behave on phones.

Can ChatGPT or Claude build a landing page?

Yes. Both can write the copy and the code. Claude Code, Lovable, Bolt and v0 can also run and preview the page. Results improve sharply with a detailed prompt.

How long should a landing page prompt be?

Short prompts of 50 to 80 words are fine for a first draft. Pages that look professionally designed usually need a build spec of 600 to 1,500 words.

Where can I find ready-made landing page prompts?

Use the 20 prompts in this guide, the prompt libraries of your AI builder, or a library such as Scrollhaus where each live website comes with a full written build spec.

Browse Scrollhaus website designs and build resources →

Need help with a template, account, or project? Email admin@scrollhaus.ai.