Codex prompts for a whole website

Write the site as a file layout

A person reads a site as pages. An agent builds it as files. Say both: list the pages, then say where things live. One tokens file for colour, type and spacing. One folder of components. One file of content, so copy can be edited without touching layout.

This is more than tidiness. The next ten tasks you give Codex will name these files. A brief that says "all values come from src/styles/tokens.css" makes every follow-up shorter.

Put real content in the repository

Codex reads files, so give it files. Put the copy in a Markdown or JSON file and the images in a folder, and name both in the brief. An agent that finds real headlines and real photographs fits the layout around them. An agent that finds nothing writes filler and sizes the page to the filler.

If the content isn't ready, say which parts are placeholders and ask for them to be marked in one place, so replacing them is a single edit.

End with a definition of done

Close the brief with a short list the agent can check without you: the build passes, the type checker passes, the linter passes, no page scrolls sideways at 390px, every image has alt text, every link resolves. Ask for a closing report that lists what it checked and what it couldn't.

The last item matters. An agent may not be able to look at the rendered page in your setup. Asking it to say so is better than a report that claims the site looks right.

What a whole-site brief for Codex should contain

• The goal in one sentence: who the site is for and the one action.
• The pages, each with its sections in order and where its content file is.
• Design values: typefaces, sizes, colours in hex, spacing, radius.
• The file layout: tokens, components, content, pages.
• What not to add: UI libraries, extra pages, analytics, sample blog posts.
• Done when: the commands to run and the report to write.

A prompt to start from

Task: build a three-page website for [studio name], a [what it does] in [city]. The one action is "[Book a visit]", which links to [URL].

Stack: Vite + React + TypeScript, React Router, plain CSS with custom properties. No UI library, no CSS framework, no analytics.

File layout:
- src/styles/tokens.css: every colour, size, space and duration. Components use tokens only.
- src/content/site.json: all copy. Read it; do not rewrite it.
- src/components/: Header, Footer, Button, WorkCard, Section.
- src/pages/: Home, Work, Contact.

Design values:
- Ground #f3efe6, ink #17150f, accent #c8401a, hairlines #17150f at 14% opacity.
- Headlines in "Fraunces" 600: 84px desktop, 44px phone, line-height 0.98. Body in "Inter" 17px, line-height 1.55. Labels 12px uppercase, letter-spacing 0.08em.
- Page grid: 12 columns, 24px gutters, max width 1320px. 144px between sections, 72px on phones. Radius 2px. No shadows.

Pages:
1. Home: headline and one sentence from site.json; a row of three WorkCards; a full-width quote; the action.
2. Work: all projects from site.json in a two-column grid, images at 4:5.
3. Contact: address, hours, email, the action. No form.

Motion: page content fades up 16px over 0.5s, ease-out, once. WorkCard image scales to 1.03 over 0.4s on hover. Nothing else moves. With prefers-reduced-motion, no movement at all.

Phones (below 720px): one column, header collapses to the name and the action, hover effects off.

Done when:
- npm run build, npm run typecheck and npm run lint all pass.
- No horizontal scroll at 390px or 1440px.
- Every image has alt text from site.json.
Run it and check each page. Then report what you verified and what you could not.

Written for this page as a starting point; swap the parts in [brackets] for your own. The full prompt of each uberdesigner template is longer and specific to one finished design, and it is tested by rebuilding the template from the prompt alone.

Keep reading

• How to brief Codex for designThe five parts of a front-end task brief for Codex: goal, constraints, design values, files it may touch and a definition of done. With a skeleton to copy.
• Design rules in AGENTS.mdAn AGENTS.md example for front-end work: where design rules go, what to include, and a rules block to copy so every Codex task follows the same system.

• Landing pages
• UI components
• Dashboards
• 3D websites
• Restyles