Design prompts for hero sections

A hero section has one job: in the few seconds before someone bounces, say what the product does, who it is for, and what to do next. The ones that convert lead with a clear promise instead of a clever line, put one primary action ahead of a quiet secondary one, show a real product instead of a stock blob, and back it with a line of social proof. The prompts below are the most-copied hero designs in the Superdesign library, from Swiss big-type and editorial serif to dark cinematic and metric-led SaaS. Open any one to see the exact prompt behind it, then tweak the copy and generate your own editable version in seconds.

How to prompt a hero section that looks designed, not generated

An AI design agent has a strong default for every part of a hero, and most of those defaults read as generic: a dark purple gradient, the Inter typeface, a clever vague headline, one weak button, an abstract blob, and no proof. A good prompt is really a list of constraints that override those defaults. Here is each default you need to override, the words that do it, and a template that bakes them all in.

Design a hero section for [product], a [what it is] for [who it is for].
Headline: state the promise in plain language, [your promise in one line]. Pass the five second test, no clever wordplay.
Subhead: one sentence on how it works or who it is for, [the supporting line].
Primary CTA: [the main action, e.g. Start designing free], solid and dominant. Secondary CTA: [a lower-commitment action, e.g. Watch the demo], quiet and subordinate. Add a microcopy line like "no credit card needed".
Social proof above the fold: [a user count or rating], an avatar stack, and a [N]-logo customer strip.
Visual: show a real [product screenshot or UI mock], not an abstract gradient blob or stock photo.
Layout: [centered or split] with everything above the fold, hero height about 70 to 90 percent of the viewport.
Style: a neutral base with one [accent] color reserved for the primary action. Headline typeface [name], body [name], not the default Inter.

Headline clarity

Default: It writes a vague, clever headline like "Unlock Your Potential Today" that could sit on any site and says nothing about the product.

Constrain it: State the promise in plain language and make it pass the five second test. Name what it does and who it is for, no wordplay.

CTA hierarchy

Default: It drops one faint outline button, or two buttons with equal weight, so nothing pulls the eye toward the action you want.

Constrain it: Name a solid, dominant primary CTA and a quiet secondary one, and add a microcopy line like "no credit card needed".

Social proof

Default: It ships a headline and a button with nothing to address the skepticism a first-time visitor brings.

Constrain it: Ask for proof above the fold: a user count or star rating, an avatar stack, and a strip of recognizable customer logos.

Layout

Default: It centers a single block of text on a dark canvas with no real structure and the action floating in the middle.

Constrain it: Spell out the layout: centered or split, everything above the fold, a hero about 70 to 90 percent of the viewport, text on one side and the product on the other.

Color and type

Default: Left alone it defaults to Inter, a dark theme with a purple gradient, and rainbow accents used as decoration.

Constrain it: Name a headline and body typeface and one accent color on a neutral base, and reserve that color for the primary action.

Show the product

Default: It fills the visual slot with an abstract gradient blob or generic stock art that shows nothing about what you actually get.

Constrain it: Ask for a real product screenshot or a UI mock of the core feature, framed in a browser or device, not an abstract shape.

Frequently asked questions

What makes a good hero section?

A clear promise in the first read, one dominant call to action, a real product visual, and a line of social proof. A visitor decides in a few seconds whether to stay, so say what the product does and who it is for in plain language, then make the next step obvious.

What should go in a hero section?

A headline that states the value, a one-line subhead, a primary CTA with an optional quiet secondary one, a real product visual or UI mock, and a trust signal such as a customer count, a rating, or a logo strip. Keep it all above the fold.

Why does my AI-generated hero section look generic?

Because a vague prompt gets the model defaults: a dark purple gradient, the Inter typeface, a clever but empty headline, one faint button, and an abstract blob instead of a product. Name a plain-language promise, a dominant primary CTA, a real product visual, one accent color, and a non-default typeface, and it stops reaching for the average.

Should a hero section have one CTA or two?

Usually one dominant primary CTA, with an optional quiet secondary action like "Watch the demo" for visitors who are not ready yet. The point is hierarchy: the primary should be larger and higher contrast so there is no doubt which step matters. Two buttons of equal weight split attention.

How do you write a prompt to generate a hero section UI?

Describe the brief, not the vibe: the product and who it is for, the headline promise in plain words, the primary and secondary CTAs, the social proof, a real product visual, the layout, one accent color, and a named typeface. The template above walks through each part, and you can open any example here to see a full prompt that works.