TLDR: The hero section is the top band of your page, the part people see before they scroll, and it does most of the work of deciding whether they keep reading. A strong one has four parts pulling in the same direction: a headline a stranger understands on the first read, a subhead that adds the single most important detail, one clear call to action, and a supporting visual. AI tends to make the hero generic because a vague prompt lets it default. Brief the hero as four jobs, ask for headline options, and the top of your page stops blurring into every other template. There is a copy-paste prompt below.
You can spend a week on a page and lose the visitor in the first five seconds. That is how long people give the top of a page before they decide to read on or leave, and almost all of that decision happens inside the hero section. Get the hero right and the rest of the page gets a chance. Get it wrong and it does not matter how good the sections below are, because nobody scrolls to them.
When you build a page with AI, the hero is also the part that most reliably comes back generic. Ask for “a landing page for my app” and the model gives you a fuzzy headline, a subhead that just repeats the headline, and two same-sized buttons so you cannot tell which one matters. Not because the AI is bad, but because you did not tell it what the hero is for. This is the anatomy of a hero section that works, and how to prompt AI so yours does its job.
What is a hero section, and why does it decide everything?
The hero section is the first thing on the page, the band above the fold that a visitor sees without scrolling. Its entire purpose is to answer two questions fast: what is this, and what do I do next. Everything below the hero, the features, the proof, the pricing, exists to support a decision the hero has already started.
That is why it carries so much weight. A visitor who does not understand the headline never reads your feature list. A visitor who understands it but sees no clear next step drifts away. The hero is where attention is won or lost, so it deserves more care than any other section, and more direction when you hand the work to AI.
The four parts of a hero section
A strong hero is not one thing, it is four small things aimed at the same target. Miss one and the section wobbles.
The headline: say what it is, not what you wish it sounded like
The headline is the one line that has to land. Its job is to make a stranger understand what you offer and why it is worth a beat of their time. Clear beats clever almost every time. “Turn AI-generated HTML into a live link” tells a visitor exactly what they get. “Reimagine what sharing can be” tells them nothing and asks them to work for it.
Keep it to a glance, roughly three to nine words. State the core promise, an outcome or a plain description of the thing, and let the subhead carry the rest. If your headline needs a comma and two clauses to make sense, it is doing the subhead’s job too.
The subhead: add the one detail that changes the decision
The subhead sits under the headline and earns its place by adding something the headline could not. Not a restatement, a reason. If the headline is the promise, the subhead is the proof or the specifics: who it is for, how it works in a few words, or the thing that removes a visitor’s biggest doubt. Keep it to one line, under about fifteen words. “Paste your HTML or drop a ZIP, get a shareable URL in seconds, no build step” adds the how. “The best way to share your work” adds nothing.
One clear action: make the next step obvious
A hero should offer exactly one primary action. One button, sized and colored so a visitor cannot miss it, with a label that says what happens when they click, “Start free,” “See a demo,” “Publish your page.” You can keep one quiet secondary link beside it for people who are not ready, but give it far less weight. Two equal buttons force a choice, and a forced choice is friction. The easiest hero to act on has one obvious thing to do.
The supporting visual: show the thing, do not decorate around it
Most heroes want an image, and the best ones show the actual thing: a screenshot of the product, the real page, a clean illustration of what the visitor gets. A generic stock photo of people laughing at a laptop adds nothing and often subtracts, because it reads as filler. If you cannot show the thing yet, a simple, on-brand graphic or a bold typographic treatment beats a decorative photo. The visual should reinforce the headline’s message, not compete with it.
Why does AI make the hero generic, and how do you stop it?
The model defaults when you leave the decisions to it. “Make me a landing page hero” gives it no headline angle, no audience, no single action, so it produces the statistical middle of every hero it has seen: a soft benefit-y headline, a subhead that echoes it, two buttons, a gradient. It is playing it safe because you did not tell it what winning looks like.
The fix is the same one behind briefing AI like a designer: give it the job, not just the topic. Tell it who the page is for, the single outcome the visitor should walk away wanting, the one action you want them to take, and the tone. Then ask for choices, three headline options in different angles, so you are selecting instead of accepting whatever came first.
Weak hero vs strong hero
Same page, same product. The difference is entirely in the four parts.
| Part | Weak hero | Strong hero |
|---|---|---|
| Headline | Vague or clever: “Work, reimagined” | Clear promise a stranger gets: “Publish your AI page as a live link” |
| Subhead | Restates the headline | Adds the key detail: “Paste HTML or drop a ZIP, live URL in seconds” |
| Call to action | Two equal buttons, or none | One obvious primary action, one quiet secondary link |
| Visual | Generic stock photo as filler | Shows the actual thing, or clean on-brand graphic |
| Spacing | Cramped, everything the same size | Room to breathe, headline clearly largest |
| Result | Visitor is unsure what it is | Visitor knows what it is and what to do next |
A copy-paste prompt for a hero that lands
Paste this into Claude or ChatGPT and fill in the brackets. It briefs the hero as four jobs and asks for options so you are choosing, not settling.
Write and build the hero section for a landing page as a single self-contained HTML file.
Product: [what it is, in one plain sentence]. Audience: [who it is for, and how technical they are]. The one outcome a visitor should want: [the result they get]. The single action I want them to take: [sign up / book a demo / try it]. Tone: [confident and plain / warm and human / bold and energetic].
Give me:
- Three headline options in different angles (outcome, plain description, and a bolder one), each under nine words and understandable on the first read.
- One subhead under fifteen words that adds the most important detail, not a restatement of the headline.
- One primary button label that says what happens on click, plus one quiet secondary link.
- A layout with the headline clearly largest, generous whitespace, and a placeholder for a supporting visual that shows the product.
Then assemble a full hero using the first headline. Inline all CSS, no external libraries, mobile-friendly.
When the draft comes back, treat it like a first round. Swap in a different headline option, tighten the subhead, and use follow-up prompts to polish the page until the top reads the way you want.
Before and after: same content, a hero that works
On the left, the default: a fuzzy headline, a subhead that repeats it, two identical buttons, everything the same size. On the right, the four parts doing their jobs.
Test the hero on a real person, not in the editor
Here is the fastest quality check there is. Show the top of your page to someone who has never seen it, for five seconds, then take it away and ask two questions: what is this, and what would you do next. If they can answer both, the hero works. If they hesitate on either, you know exactly which part to fix, the headline or the action.
The catch is that this test only works on the real, live page, at the real size, on the device a visitor would actually use. Squinting at HTML in a chat window or a code editor tells you nothing about whether a stranger gets it in five seconds. You need it in front of a person as a page.
That is the natural last step, and it is where VisiblePage fits. Paste the HTML the AI gave you, or drop a ZIP if it split things into files, and you get a live URL in seconds, no build step, no hosting setup, no domain to wire up. Every button, hover state, and animation still works, because you are sharing the real page and not a screenshot. Send the link to a friend for the five-second test, and when you tighten the headline, re-publish to the same URL so the link you shared always shows the latest version. You can keep the page public, private, or password-protected while you iterate, then point a custom domain at it when it is ready.
Try it now: Publish your AI-generated HTML with VisiblePage and get a live link in seconds.
Frequently asked questions
What is a hero section? The hero section is the top band of a page, the part a visitor sees before scrolling. It carries a headline that says what the thing is or does, a short subhead that adds the one detail that matters, a single clear call to action, and usually a supporting visual. Its whole job is to make a person decide, in a few seconds, that the rest of the page is worth their attention.
What makes a hero section good? Clarity before cleverness. A good hero says what you get and why it is worth it in a headline a stranger understands on the first read, backs it with a one-line subhead, and offers exactly one primary action. It has room to breathe, a clear size difference between the headline and everything else, and a visual that supports the message. If a visitor can answer what is this and what do I do next in about five seconds, the hero works.
How do I get AI to write a good hero section? Give it the raw material and the job, not just the topic. Tell the AI who the page is for, the one outcome the visitor should get, the single action you want, and the tone. Ask for three headline options in different angles, a subhead under fifteen words, one primary button label, and a supporting visual. Then pick, tighten, and ask for one self-contained HTML file you can publish.
How many buttons should a hero section have? One primary action, and at most one quiet secondary link next to it. Two buttons of equal weight split the visitor’s attention and lower the odds they do either. Make the primary action obvious and give the secondary one much less visual weight so the choice stays easy.
How long should a hero headline be? Short enough to read in one glance, usually three to nine words. The headline states the core promise; the subhead carries the extra detail in one line under about fifteen words. If your headline needs two clauses to make sense, you are asking it to do the subhead’s job too.