Landing page HTML to production code prompt for Codex

Rebuild 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.

Rebuild landing.html as a [Next.js] page using [Tailwind CSS] and our existing components in [src/components]. Match the layout, spacing, and type sizes of the HTML file, make it responsive between 390px and 1440px, and keep the copy exactly as it is.

Works with

Codex

From the set

Landing pages

About this prompt

Here the HTML file stops being the design and becomes the spec. Codex rebuilds landing.html as a page in your codebase, matching its layout, spacing and type sizes, using your existing components where they fit, making it responsive between 390px and 1440px, and keeping every word of the copy.

Replace the brackets with your framework, styling approach and components folder; an Astro page with CSS modules works as well as Next.js with Tailwind. If your file has a different name or lives in a subfolder, give its real path. Mention the 390px file from the mobile check too, so Codex has a reference for the small-screen layout instead of guessing it.

With a large component library, ask Codex to build the page section by section and compare each one with the HTML at the same width before going on. This step reads and writes your repository, so run it in Codex inside your project rather than in a chat window.

More prompts from this set

• 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.
• Hero section design prompt with three directions for CodexAsk Codex for three hero sections at 1440×900, editorial, dark and soft, with identical copy, so you compare visual style and nothing else.
• 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.