Landing page prompts

Say what the page is for

A landing page has one job: sign up, join the waitlist, book a demo, download. Name it in the first line of the prompt and say where the button appears: in the header, in the hero and again at the foot. Everything else on the page is there to earn that click, and the model arranges it better when it knows what the click is.

Give the sections in order

List them: hero, proof, how it works, features, pricing, questions, final call. Then say what each one contains. "Features" tells the model nothing; "three features, each a short headline, one sentence and a looping product clip" tells it what to build.

If the product has a dashboard or an app screen, say how it appears. A screenshot in a browser frame is the default everyone gets. A product that assembles itself as you scroll is a decision, and decisions are what make a page look designed.

Fix the look in numbers

Name the typeface, the headline size, the background and one accent colour in hex. Say how much space sits between sections. These five lines do more than any adjective: "modern and clean" describes every landing page ever generated.

What a landing page prompt should contain

• The action: what the visitor does, and the exact words on the button.
• The sections, in order, with what each one holds.
• Real copy: the headline, the subline and at least the feature names.
• Type and colour: typeface, headline size, background, text and one accent in hex.
• The hero's idea: what the visitor sees first and what it does.
• Phone behaviour: what stacks, what hides, what stays pinned.

A prompt to start from

Build a landing page for [product], a [what it is] for [who it's for]. The one action is "[button label]"; put it in the header, the hero and the final section.

Stack: Vite + React + TypeScript, plain CSS with custom properties. No UI library.

Look: background #0b0b0f, text #f4f4f5, one accent [#hex]. Headlines in [typeface] at 72px desktop / 40px phone, tight tracking; body 17px. Sections sit 160px apart. Corners 16px. No gradients on text, no emoji, no stock icons.

Sections, in this order:
1. Hero: headline "[your headline]", subline "[one sentence]", the button, and [the hero's idea: what is shown and how it moves].
2. Proof: [number] and [who uses it], one line.
3. How it works: three steps, each a short headline and one sentence.
4. Features: [feature 1], [feature 2], [feature 3], each with a looping product clip placeholder at 16:10.
5. Pricing: [plans].
6. Questions: [5 real questions].
7. Final call: one line and the button.

Motion: sections fade up 24px over 0.6s as they enter; nothing else moves unless I asked for it. Respect prefers-reduced-motion.

On phones everything is one column and the header button stays visible. When you're done, run it and check the page at 390px and 1440px wide.

Written for this page as a starting point; swap the parts in [brackets] for your own. The full prompt of each uberdesigner template is longer and specific to one finished design, and it is tested by rebuilding the template from the prompt alone.

Keep reading

• The anatomy of a website promptThe seven parts of a website prompt that builds a site worth shipping, with an annotated example.
• How to make a template's prompt yoursKeep a template's design and replace its subject: what to change in the prompt, what to leave alone, and the order to do it in.

• Portfolios
• Product pages
• Hero sections
• Shops
• Small business