Landing pages for AI-built products that convert

What the page has to do in the first few seconds

A landing page has a very short window. Jakob Nielsen's analysis of Microsoft Research data on page visit times found that users often leave web pages within 10 to 20 seconds, and that pages which hold attention past the first 30 seconds tend to keep it for much longer. His conclusion was that you need to communicate your value proposition within about 10 seconds.

In practice, that means a visitor who reads only the headline, the line under it and the first image should be able to answer three questions:

1. What is this?
2. Is it for someone like me?
3. What do I do next?

Everything below the first screen is there to answer the questions that come after: how does it work, can I trust it, what does it cost, what if it does not fit.

AI builders are good at the structure of a landing page. Ask for one and you get a hero, features, testimonials, pricing and a footer, in a sensible order. What they cannot give you is the content, because the content depends on knowing your customer. So you get the structure with generic words and abstract visuals in it.

Where generated landing pages go wrong

Here is what a typical generated page contains, and what to put there instead. None of the "instead" column needs a designer. It needs you to make decisions the prompt did not.

Section	What AI builders tend to generate	What to put there instead
Headline	"Transform the way your team works"	What the product does, for whom, in plain words
Sub-headline	A second abstract promise	How it does it, or the outcome in one concrete sentence
Hero visual	Gradient blobs, a 3D shape or a stock illustration	A real screenshot of the product doing its main job
Calls to action	"Get started" and "Learn more" side by side, equal weight	One primary action that says what happens, one quiet secondary link
Features	Six cards with an icon in a tinted circle and a two-word title	Three to five outcomes, each with a real screen or detail
Social proof	Invented testimonials and placeholder logos	Real quotes, real logos, or nothing until you have them
Pricing	Three tiers with a "Most popular" badge	The plans you actually sell, with what changes between them
Footer	Dozens of links to pages that do not exist	The pages that exist

Placeholder testimonials deserve a special warning. A generated page often ships with made-up names and quotes. They are easy to miss in review and they damage trust badly if anyone notices. Delete them before launch.

The sections that earn their place

Headline and sub-headline

The headline names the job. "Invoicing for UK freelancers that chases late payments for you" is longer than "Get paid faster" and much more useful, because it says what, who and why in one line. The sub-headline adds how: "Send an invoice in two minutes. If it is late, polite reminders go out on their own."

If you cannot write the headline in one plain sentence, the product positioning is not settled yet, and no layout will fix that.

The product, shown

The most persuasive visual on a SaaS landing page is usually the product itself. A clear screenshot of the main screen, with realistic data, tells the visitor more than any illustration. If the product is not ready to show, show the one screen that is. Crop it so the important part is readable at the size it will appear.

One primary action

Decide what you want a visitor to do: start a trial, join a waiting list, book a demo. Make that the only filled button on the page, repeated at the top and bottom. The label should say what happens: "Start free trial", "Book a 20-minute demo". A second option, if any, should be a text link.

How it works

Three steps, each one sentence, ideally with a small visual. This answers "what will I actually have to do" before the visitor has to ask.

Objections

Every buyer has the same handful of worries: price, setup time, data safety, switching cost, what happens if they leave. Answer them in plain words, in a short FAQ or in the sections themselves. For a UK product, say where data is stored and that it is GDPR compliant only if both are true and you can back them up.

Proof

Real proof only: a quote from a real user with their name and role, a number you can stand behind, a logo you have permission to use. Early on you may have none, and that is fine. A clear product and an honest founder note do more than fake social proof.

Speed is part of conversion

A landing page that takes four seconds to show its headline loses people before the copy gets a chance. Google's Core Web Vitals give you concrete targets, measured at the 75th percentile of page loads on mobile and desktop:

• Largest Contentful Paint of 2.5 seconds or less: the headline or hero image appears quickly.
• Interaction to Next Paint of 200 milliseconds or less: buttons respond straight away.
• Cumulative Layout Shift of 0.1 or less: nothing jumps as fonts and images load.

Generated landing pages tend to fail these in predictable ways: large unoptimised hero images, several web fonts loaded from a third party, animation libraries running on scroll, and background videos. In Next.js, next/font self-hosts fonts with no layout shift and no request to Google from the browser. Serve the hero image at the size it is displayed, and use one or two font families, not four.

Accessibility on the landing page

Some of the most common generated landing page styles are also accessibility failures. White text over a purple-to-blue gradient often drops below the 4.5:1 contrast ratio that WCAG 2.2 success criterion 1.4.3 asks for on body text, especially on the lighter end of the gradient. Grey sub-headlines on off-white backgrounds do the same. Check the actual colour pairs, and test the page with only a keyboard: the primary button should be reachable, with a visible focus ring, in a few presses. Making an AI-built app accessible has the full checklist.

How to measure it

Pick one conversion event, the primary action above, and measure the share of visitors who complete it, split by traffic source. Then change one thing at a time: the headline first, then the hero visual, then the call to action. With small traffic, expect to judge by direction and by watching real sessions, not by statistical tests. Analytics for your MVP covers the setup.

The landing page and the first run of the app are one journey. Whatever the page promises, the first screen after sign-up has to deliver. Onboarding flows that convert for new apps covers the other half.

When to get help

If the product is clear in your head and the page is not, the bottleneck is usually the positioning and copy, and then the visuals that show the product honestly. That is design work as much as writing, and it is part of what I do on every build. I design and code the page in the same Next.js project as the app, so it shares the product's type, colour and components rather than looking like a separate template.

You can see the approach on FindPopups, read why every AI-built app looks the same for what to strip out first, or start at the design guide for AI-built apps. If you are still working out what the product is, scoping your MVP is the better first step.