Hero section design prompt with three directions for Codex

Ask Codex for three hero sections at 1440×900, editorial, dark and soft, with identical copy, so you compare visual style and nothing else.

Design the hero section in three directions, each as its own self-contained HTML file at 1440×900 with inline CSS and system fonts:
A — warm and editorial, with a serif headline
B — bold and dark, with one bright accent color and big numbers
C — soft and friendly, with rounded cards and a light gradient
Use the same headline, subheading, and call to action in all three. Draw any product visuals with HTML and CSS; no external images.

Works with

Codex, ChatGPT

From the set

Landing pages

About this prompt

Codex writes three self-contained HTML files, one per direction: A is warm and editorial with a serif headline, B is dark with a single bright accent and big numbers, C is soft with rounded cards and a light gradient. The headline, subheading and button are the same in all three, so the only variable is the visual approach, which is exactly what you are deciding at this stage.

The three style lines are the part to rewrite. If your brand already rules out a dark page, replace B with something else that is genuinely different, such as a dense, data-heavy layout, rather than a second light variant. Keep the 1440×900 size and the rule against external images: product visuals drawn in HTML and CSS stay editable and don’t break when the file moves.

Judge the directions together rather than one browser tab at a time. On a Codex Design canvas the three files sit side by side as live HTML, and differences in hierarchy and density are obvious at a glance. Note the letter you pick, or the parts you want to combine, because the full-page prompt that comes next refers to the direction by its letter.

More prompts from this set

• Full landing page design prompt for CodexExtend the hero direction you picked into a complete landing page, with eight named sections in a fixed order so Codex doesn’t add filler.
• Landing page features section prompt with real contentRewrite a landing page’s features so each has a concrete headline, a specific detail or number, and a small HTML visual instead of an icon.
• Pricing section design prompt for CodexDesign a pricing section with your plans, a highlighted recommended tier, a monthly/annual toggle and a one-line answer to the top objection.
• Mobile landing page check prompt for CodexHave Codex make a 390px version of your landing page with the call to action above the fold, 44px tap targets and a list of what it cut.
• Prompt to make an AI-made landing page look less genericA review prompt that has Codex find what makes a page look AI-generated, from centered layouts to vague copy, and fix the five worst issues.
• Landing page HTML to production code prompt for CodexRebuild the approved HTML landing page in your real stack, such as Next.js and Tailwind, with your own components and the copy left as it is.