prompt

Hero Section Layout Planner

Plans hero section layouts for a landing page with structure, hierarchy, and responsive notes.

VettedUpdated June 2026
The prompt
Propose {{count}} hero section layout options for a {{page_type}} landing page. For each: describe the structure (headline, subhead, CTA, visual placement), visual hierarchy, and how it adapts on mobile. Goal of the page: {{goal}}.
Did it work? Rate this prompt

Variables

countNumber of options
page_typePage type
goalPage goal

Example output

Option A — Split layout. Left: headline, subhead, primary CTA. Right: product screenshot. Hierarchy: headline largest, CTA high contrast. Mobile: stacks to image below text. Option B — Centered. Headline and subhead centered, CTA below, full-width background image with overlay. Mobile: keeps center alignment, reduces image height. Option C — Left text, no image, large type with a single accent shape. Mobile: full-width type, accent moves above headline.

Details

Author

AI Khazna

License

—

Security

Vetted

Type

prompt

Frequently asked questions

What is the Hero Section Layout Planner prompt?

Plans hero section layouts for a landing page with structure, hierarchy, and responsive notes.

Is Hero Section Layout Planner free?

Yes, it is free to use.

Related assets

More curated picks in Design & Creative.

prompt
Checks color pairs against WCAG contrast rules and suggests accessible fixes.
Accessibility Contrast Checker
Checks color pairs against WCAG contrast rules and suggests accessible fixes.0+
prompt
Specs a UI component with its variants, states, sizing, and usage rules for a design system.
Design System Component Spec
Specs a UI component with its variants, states, sizing, and usage rules for a design system.0+
prompt
Turns a vague design ask into a structured creative brief a designer can act on.
Creative Brief Generator
Turns a vague design ask into a structured creative brief a designer can act on.0+
prompt
Adapts a light-mode color palette to an accessible dark-mode palette with surface and text tokens.
Dark Mode Palette Adapter
Adapts a light-mode color palette to an accessible dark-mode palette with surface and text tokens.0+
prompt
Defines a consistent illustration direction including style, palette, composition, and do/don't rules.
Illustration Style Brief
Defines a consistent illustration direction including style, palette, composition, and do/don't rules.0+
prompt
Recommends harmonious font pairings for a brand or project with rationale and usage guidance.
Font Pairing Advisor
Recommends harmonious font pairings for a brand or project with rationale and usage guidance.0+

Audit before you install

Run any source through our checks - AI visibility, security, performance, and stack detection.

AI Agent / MCP Server Tester

ai testing

Automated Web Security Scan

security

AI Content Quality Test

arabic content

Site Stack Detector

migration

PageSpeed Analyzer

performance

AI SEO / AEO / GEO Audit

ai visibility

llms.txt Generator

ai visibility

Schema / JSON-LD Builder

ai visibility

Readability Score

arabic content

AI Cost Calculator

ai testing

Headline Analyzer

arabic content

More in Design & Creative