Full landing page design prompt for Codex
Extend the hero direction you picked into a complete landing page, with eight named sections in a fixed order so Codex doesn’t add filler.
Extend direction [B] into a full landing page in one HTML file, 1440px wide. Sections, in order: hero, logo strip, three key features with a small product visual each, how it works in three steps, two customer quotes with names and roles, pricing, FAQ with five questions, and a closing call to action. Keep the hero exactly as it is.
- Works with
- Codex, ChatGPT
- From the set
- Landing pages
About this prompt
Codex takes the hero you chose and builds the rest of the page around it in one 1440px-wide HTML file: a logo strip, three features each with a small product visual, a three-step how-it-works, two attributed customer quotes, pricing, a five-question FAQ and a closing call to action. The hero is meant to come through untouched, so the page grows from a design you already approved instead of being redesigned from scratch.
Change [B] to the letter of your chosen direction. Then edit the section list to match the outline Codex gave you in response to the brief; if that outline included a comparison table or an integrations section, name it here in the same position. Naming every section is what stops the agent from inventing a “Why choose us” block with three vague icons.
Expect the middle of the page to be rough on this first pass. The next prompts in the set rework it one section at a time, starting with the features and then the pricing, so there is no need to fix everything in one long revision request.
More prompts from this set
- 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.
- Landing page brief prompt for CodexA brief prompt that gives Codex your product, audience, goal and proof, then asks for the page’s sections in order before any design starts.