UI Discovery

Hero Section Prompts for Website Introductions

The hero should establish what the product is, who it helps and what happens next. A prompt that starts with these three facts gives you something more useful to review than a generic request for a premium look.

UI Discovery editorial · Updated

How to use this guide

Give the headline a concrete job

Ask for a short statement that describes the outcome in the customer's language. Keep the supporting sentence specific enough to explain the mechanism. Avoid claims such as best or fastest unless you supply evidence and the comparison being made.

Choose one visual role

A product screenshot can explain a workflow; an illustration can set a tone. Decide which role the hero image plays and reserve its dimensions. If the image is only decorative, the written message must still be complete without it.

Check the first screen on a phone

Review the heading wrap, the action label and the space consumed by navigation. Avoid fixed-height hero sections that hide the CTA when text scales up. Focus order should follow the reading order, and motion should not be necessary to understand the offer.

Original prompt to adapt

An editorial starting brief, not a benchmarked model output. Replace fictional content and review the result before publishing.

Create only the hero section for a fictional team bookmark manager called Shelf. Audience: designers sharing reference material. Headline: 'Keep the references your team will actually use.' Supporting copy should explain shared collections and short annotations in one sentence. Primary CTA: 'Open sample collection'. Secondary action: a text link to how it works. Show a clearly labelled sample collection preview with original fixture content; do not invent customers or trust badges. Reuse existing site tokens and navigation. Reserve image dimensions, allow natural height at 200% text size and keep the CTA visible in the reading flow at 390px. Use meaningful alt text for the preview and no essential animation.

A focused follow-up

Keep the approved headline. Test the hero at 390px and with enlarged text. Fix only clipping, excessive heading wraps and competing action emphasis.

Review checklist

  • The offer is understandable without the image.
  • The CTA says what the next screen will do.
  • Text enlargement does not clip the heading or actions.

Continue with real references

Common questions

Can I use this prompt unchanged?

Use it as a starting brief. Replace fictional content, inspect the reference links and adapt constraints to your project. These are original editorial prompts, not benchmarked model outputs.

What should I check before publishing?

The offer is understandable without the image. The CTA says what the next screen will do. Text enlargement does not clip the heading or actions.