27 Prompts for Designing Hero Sections with ChatGPT and Claude

The hero section is the most iterated component in AI-assisted web design. It's also the most often botched.

The reason is that "write me a hero section" is not a prompt — it's a starting condition. It tells the model nothing about what kind of hero section, for what kind of product, for what kind of audience, with what aesthetic. The model fills in all of those blanks from its training data. The result is the default: dark background, bold Inter headline, two CTAs, a dashboard mockup.

The prompts below are starter frameworks organised by use case. They're not copy-paste ready — they're templates that you adapt by filling in the blanks with specifics from your product. Each includes notes on what the prompt is trying to achieve and the variables you need to replace.

Paste these into Claude, ChatGPT, v0, Cursor, Lovable, or Bolt. The more you fill in the specifics, the better the output.

SaaS hero sections

1. Dark SaaS with dashboard mockup

"Build a SaaS hero section for [PRODUCT NAME], a [CATEGORY] tool for [AUDIENCE]. Background: #09090B with a radial glow at rgba([ACCENT RGB], 0.2) centred at 50% 0%. Headline: '[YOUR HEADLINE]' in Inter 700, 72px, tracking -0.04em, white. Subheadline: '[YOUR SUBHEADLINE]' in Inter 400, 18px, white/60, max-width 560px. CTAs: primary '[CTA TEXT]' in bg-[ACCENT], ghost '[SECONDARY CTA]'. Dashboard mockup below: white-on-dark card showing [DESCRIBE THE SPECIFIC SCREEN]. Trust bar: 'Used by teams at [COMPANY 1], [COMPANY 2], [COMPANY 3]'."

*What this achieves:* Conversion-focused, authority-building, product-forward. Tells the model exactly what the dashboard should show — critical for avoiding the generic chart mockup.

2. Light SaaS with split layout

"Build a hero for [PRODUCT], a [CATEGORY] tool. Layout: 50/50 split, content left, product visual right, stacked mobile. Left: eyebrow '[CATEGORY]' in 12px uppercase [ACCENT COLOR], headline '[HEADLINE]' in Inter 700 56px tracking-tight, subheadline 16px slate-600 max-w-md, two CTA pills. Right: [DESCRIBE THE SPECIFIC PRODUCT VIEW — not a generic dashboard]. Background: white. No gradient blobs."

*What this achieves:* Signals product maturity and confidence. Works well for productivity and analytics tools where the interface itself is the selling point.

3. SaaS waitlist hero

"Hero section for a pre-launch product called [NAME]. Product does: [ONE SENTENCE]. Aesthetic: confident, not desperate — the design should feel like a company that knows it's building something good. Dark background [HEX]. Large editorial headline '[HEADLINE]' in [FONT] [SIZE]. Single CTA: email input + 'Join waitlist' button. Social proof: '[X] people already waiting' counter. No dashboard mockup — no product exists yet. Clean, minimal, everything in service of the email capture."

*What this achieves:* Pre-launch positioning without fake social proof. The instruction to avoid looking desperate is important — most AI-generated waitlist pages look anxious.

4. AI/ML product hero

"Hero for [AI PRODUCT NAME]. This is a tool that [DOES WHAT] for [WHO]. Avoid: generic neural network graphics, generic 'AI' imagery, the word 'revolutionary'. Background: deep [COLOR] with subtle [DESCRIBE THE VISUAL TREATMENT — NOT a gradient blob]. Headline should communicate the specific capability, not the general category. Subheadline explains the mechanism: how it works, not just what it does. CTA: '[SPECIFIC ACTION]' not 'Get started'. Three stats below: [STAT 1], [STAT 2], [STAT 3] — real metrics, not placeholder text."

*What this achieves:* Differentiates from the sea of identical "AI-powered" product pages.

5. Enterprise B2B hero

"Build an enterprise SaaS hero for [PRODUCT], targeting [BUYER PERSONA] at companies with [SIZE]. Visual register: authoritative, not playful. Background: [DARK HEX]. Headline in [FONT] 52px: '[HEADLINE]'. Trust signals are the priority: [LIST OF REAL COMPLIANCE BADGES/CERTS]. Customer logos: [LIST REAL LOGOS YOU HAVE]. One CTA: 'Request demo' — no self-serve. No emoji, no playful copy, no gradient blobs. The page should feel like a product that costs $50K/year."

*What this achieves:* Matches the visual register to the buying context. Enterprise buyers are put off by consumer-app aesthetics.

6. Developer tool hero

"Hero for [DEV TOOL]. Audience: senior engineers who are sceptical of marketing. Aesthetic: minimal, technical, almost brutalist — show the tool, not a vision of the tool. Feature a real code snippet [PASTE YOUR ACTUAL CODE SNIPPET] as the hero visual, not an abstract illustration. Headline is specific: '[WHAT IT DOES IN PLAIN TERMS]'. No superlatives, no vague claims. Install command prominently displayed: [YOUR INSTALL COMMAND]. Link to docs next to the primary CTA."

*What this achieves:* Engineers respond to authenticity and specificity. Showing real code and real commands builds more credibility than any headline.

Agency and studio hero sections

7. Independent design studio, editorial

"Hero for a design studio called [NAME]. Full-screen, cinematic. Background: a [DESCRIBE THE IMAGE] photograph. Headline in [SERIF FONT] at 14vw, italic, colour [HEX], with [DESCRIBE SIGNATURE INTERACTION]. Subheadline: '[ONE LINE ABOUT THE STUDIO'S POSITIONING]' in italic serif, smaller. Minimal navigation. Single CTA: 'Start a project'. The hero should feel like the opening frame of a short film, not a website."

*What this achieves:* The "opening film frame" reference is a useful design direction instruction — it shifts the register from "landing page" to something more atmospheric.

8. Creative agency, bold

"Hero for [AGENCY NAME], a creative agency for [CLIENT TYPE]. Full-bleed background in [STRONG COLOR — not dark/neutral]. Oversized headline '[HEADLINE OR SLOGAN]' — the typography should feel almost too large. [FONT] [WEIGHT]. One strong accent colour [HEX]. Minimal copy. The page should feel confident to the point of being aggressive."

*What this achieves:* High-impact first impression. Works for agencies targeting clients who want bold brand work.

9. Architecture and property studio

"Hero for [STUDIO NAME], an architecture practice. Aesthetic: brutalist, considered, restraint-led. White or near-white background [HEX]. Black type only. Monospaced or grotesque font: [FONT]. No imagery in the hero — or a single full-bleed black-and-white photograph if imagery is used. Headline in all-caps or small-caps: '[HEADLINE]'. The design should look expensive by virtue of restraint, not decoration."

*What this achieves:* Architecture studios need to communicate taste, not features. Restraint is the signal.

10. Motion design studio

"Hero for [STUDIO NAME], specialising in motion design and 3D animation. The hero itself should demonstrate motion capability — not describe it. Use: [CHOOSE ONE: canvas particle system | CSS animated gradient blobs | scroll-driven text animation | looping SVG path morphing]. Headline loads with a character-by-character reveal, 40ms stagger. Colour scheme: [COLORS]. This page needs to be a proof of capability, not a description of capability."

*What this achieves:* Motion studios need to show, not tell. The interaction is the portfolio.

Portfolio hero sections

11. Designer portfolio, minimal

"Portfolio hero for [YOUR NAME], [TITLE]. Aesthetic: high-confidence minimalism — the simplicity should feel like a choice, not a limitation. Off-white or warm white background [HEX]. Single large name in [FONT] at [SIZE]. Below: '[YOUR CURRENT ROLE/PROJECT]' in regular weight. One link: 'View work →'. Nothing else above the fold. Let the restraint do the work."

*What this achieves:* Designers who can resist the urge to decorate demonstrate better taste than those who can't.

12. Developer portfolio, technical

"Portfolio for [NAME], a [SPECIALTY] developer. Stack: React + Tailwind. Hero: terminal-style introduction animation — cursor blinking, then typing out '[YOUR NAME]' char by char, then subtext typing out '[YOUR TITLE]'. Monospaced font throughout the terminal element: [FONT]. Navigation: minimal, top-right. Below terminal: featured project cards [DESCRIBE 2-3 PROJECTS]. Dark background [HEX], green accent [HEX] for the cursor and typed text."

*What this achieves:* Signals technical identity immediately. The animation is functional (demonstrates frontend skill) rather than decorative.

13. Photographer or filmmaker portfolio

"Portfolio hero for [NAME], [SPECIALTY] photographer. Full-screen image gallery hero — [DESCRIBE 5-6 IMAGES BY SUBJECT, NOT AS PLACEHOLDERS]. Images cycle with a [CROSSFADE | SLIDE | WIPE] transition every [DURATION]. Minimal text overlay: name only, [FONT], bottom-left corner. Dark overlay gradient for legibility. The images are the content — get out of their way."

*What this achieves:* For visual work, the work itself is the hero. The prompt structure prioritises the images over the layout.

14. Personal brand / newsletter

"Hero for [NAME]'s personal site. [NAME] is a [ROLE] who [DOES WHAT] for [AUDIENCE]. This isn't a portfolio — it's a destination for ideas. Aesthetic: warm, human, readable. Light background [HEX]. Profile photo [DESCRIBE STYLE: casual/professional/illustrated]. Headline: '[YOUR VALUE PROPOSITION]' in [FONT]. Below: email subscribe with '[CTA COPY]'. Recent writing: 3 post titles linking to articles. The tone is like a really good personal homepage from 2003 — direct, warm, no corporate positioning."

*What this achieves:* The "2003 personal homepage" reference steers Claude away from the modern personal-brand aesthetic (which is very polished, very impersonal).

E-commerce hero sections

15. Luxury fashion hero

"Hero for [BRAND], a [CATEGORY] brand at [PRICE POINT]. Full-screen editorial photograph of [DESCRIBE THE SPECIFIC SHOT — not 'a product photo']. Text: minimal. '[SEASON / COLLECTION]' label in [FONT] [SIZE], [POSITION]. One CTA: 'Explore' — not 'Shop now'. The page should feel like the opening spread of a print magazine. No badges, no reviews, no urgency copy ('Limited time!', 'Free shipping!'). Restraint is the luxury signal."

*What this achieves:* Luxury e-commerce dies by over-communication. Less is more, but only if the "less" is specified precisely.

16. High-energy DTC product

"Hero for [PRODUCT], a [CATEGORY] for [AUDIENCE]. This product has [MAIN BENEFIT] and [SECONDARY BENEFIT]. Energy: high, irreverent, confident. Background: [BOLD COLOR]. Large display type, [FONT], [WEIGHT], with [DESCRIBE COLOUR TREATMENT: gradient | outlined | mixed]. Product featured prominently — not a lifestyle photo, the product itself. CTA: '[ACTION]-oriented copy' — energy should match the product. Social proof: [REAL NUMBER] reviews, [STAR RATING]."

*What this achieves:* Matches the product energy. High-energy products need high-energy pages.

17. Subscription / membership hero

"Hero for [PRODUCT/SERVICE], a [CATEGORY] subscription for [AUDIENCE]. Pricing is [PRICE POINT]. The hero's job is to close the friction between 'interesting' and 'subscribed'. Show: what's inside (not vague descriptions — list [3-4 SPECIFIC THINGS THEY GET]). Show: the value gap ([NORMAL PRICE] vs [YOUR PRICE] if applicable). CTA: '[SPECIFIC ACTION]' with '[RISK REVERSAL — free trial, refund policy, etc.]' visible near the button."

*What this achieves:* Subscription pages live or die on specificity about what you get. Vague descriptions kill conversions.

Background and atmospheric components

18. Dark animated background, particles

"Standalone background component using canvas. [PARTICLE COUNT] particles in [COLORS]. Each particle has a slow drift velocity [DESCRIBE DIRECTION AND SPEED]. Particles within [DISTANCE]px draw connection lines at [OPACITY]. Background colour [HEX]. The component should accept a className prop for sizing. Performance: RAF loop, 60fps target, reduce to 30fps on mobile. Respects prefers-reduced-motion — static particle positions only, no animation."

19. Mesh gradient background

"Animated CSS mesh gradient background component. Three overlapping radial gradients: [COLOR 1] top-left [SIZE]%, [COLOR 2] top-right [SIZE]%, [COLOR 3] bottom-centre [SIZE]%. Each gradient drifts on its own cycle: [DURATIONS]s, [DURATIONS]s, [DURATIONS]s, different easing. Mix-blend-mode: [BLEND MODE]. Base background [HEX]. Accept intensity and speed props."

20. Grain texture overlay

"Grain texture component using inline SVG feTurbulence filter. baseFrequency [VALUE], numOctaves [VALUE]. Applied as a fixed-position overlay at opacity [VALUE] and mix-blend-mode: overlay. Should be pointer-events: none and z-index above the background but below content. Accept opacity as a prop."

Hero sections for specific audiences

21. For Cursor users (developer-focused)

"[DESCRIBE YOUR COMPONENT]. Tech stack: [STACK]. Output: a single self-contained component file. Do not split into multiple files. All Tailwind classes, no external CSS. Inline the animation keyframes as a style tag if needed. The component should run without any parent context — no context providers, no global state. Prop interface: [LIST PROPS]. Export default."

*Note: This structure works well when pasting into Cursor, which handles single-file components cleanly.*

22. For v0 (Vercel) users

"Build a [COMPONENT TYPE] using shadcn/ui primitives where possible. Use the cn() utility for conditional class merging. Match the shadcn/ui design token conventions: [LIST ANY TOKENS YOU WANT TO OVERRIDE]. The output should be compatible with a Next.js 15 app with the shadcn/ui setup complete."

23. For Lovable users

"Build a [PAGE OR FEATURE] for a [PRODUCT TYPE] app. The design should work for a general audience — readable on mobile, standard spacing, conventional navigation. Prioritise function over aesthetics. Include: [LIST THE FUNCTIONAL REQUIREMENTS]. Do not optimise for visual distinctiveness — optimise for clarity and usability."

Advanced prompt patterns

24. The aesthetic reference prompt

"Build [COMPONENT]. Visual reference: the [SPECIFIC DESIGNER/STUDIO/BRAND] aesthetic — [DESCRIBE 3-4 SPECIFIC CHARACTERISTICS]. Do not replicate their work; capture the sensibility. Specifically: [DESCRIBE THE ELEMENTS YOU WANT TO BORROW]."

25. The negative constraint prompt

"Build [COMPONENT]. Avoid: [LIST 5-6 SPECIFIC THINGS TO AVOID]. Do not use [FONT] unless explicitly specified. No [ELEMENT]. No [TREATMENT]. No [PATTERN]. These constraints are deliberate design choices, not omissions."

26. The iteration prompt

"The component you produced is [DESCRIBE WHAT'S GOOD]. Change [SPECIFIC ELEMENT 1] to [SPECIFIC VALUE]. Change [SPECIFIC ELEMENT 2] to [SPECIFIC VALUE]. Keep everything else identical. Do not rewrite the component from scratch — make surgical changes only."

27. The 'make it feel like money' prompt

"Review the component you produced. Identify the three elements that look cheapest or most generic. Replace each with a more considered alternative: a more specific font choice, a more precise colour, a more deliberate spacing decision. Show me the specific changes you made and why you made each one."

A note on prompt quality

These 27 prompts are starting frameworks. The variables in brackets are the difference between generic output and something worth shipping.

The most important variable in any prompt is specificity. Not "a modern font" but "Fraunces, weight 400, optical sizing enabled, italic." Not "dark background" but "#0C0A09." Not "cool animation" but "18s ease-in-out scale from 1 to 1.04 and back."

That level of specification is what separates AI-generated work that looks AI-generated from AI-generated work that looks designed. The tool doesn't care how specific you are. The output does.