Website templates for Codex

Choose by business first and by weak spot second. Open the live demo first; each one is a working Codex website example of what the agent will keep. Four pairings, each with what Codex cannot fix alone:

• A software product with plans: the weekly-message app page has a pinned phone, five source columns and two plans. Weak spot: the plan prices are invented and the contact form sends nothing until you connect it.
• A mobile app: the training app page has no form, only email links and Get the app buttons. Weak spot: those buttons need your App Store and Google Play addresses before the page is useful.
• A shop with one product drop: the streetwear store page shows a lookbook of portrait cards with priced lists. Weak spot: there is no cart, so every buying button needs the link to your real shop.
• A local service that takes bookings: the driving school page puts price and hours in coloured tiles. Weak spot: the booking button needs a calendar or a form service behind it.

1. Install Codex and sign in. The install page for the CLI gives curl -fsSL https://chatgpt.com/codex/install.sh | sh for macOS and Linux and lists Windows, npm and Homebrew options. On the first run choose Sign in with ChatGPT or another available method.
2. Make a folder and download the Codex website template. Take the repository name from the template's page; the DESIGN.md comes from this site, where the slug ends the template's address:

   curl -LO https://raw.githubusercontent.com/8bsite/<repository>/main/index.html
   curl -LO https://raw.githubusercontent.com/8bsite/<repository>/main/AGENTS.md
   curl -LO https://raw.githubusercontent.com/8bsite/<repository>/main/LICENSE
   curl -LO https://8b.com/templates/<slug>/DESIGN.md

   Copy
3. Commit the untouched files. Run git init and commit. Codex's docs recommend Git checkpoints before and after a task.
4. Start Codex in the folder. Run codex. It builds its instructions from AGENTS.md files, starting at the project root and walking down to the current directory, with at most one file per directory.
5. Check the result. The /permissions command sets when Codex may edit files or run commands without asking. Open the page in a browser at desktop width and at 390 px.

The IDE extension works in VS Code and compatible editors, including Cursor, which also has an agent of its own, and Windsurf. Its page in the docs does not say whether it reads AGENTS.md, so name the file in your first message.

The DESIGN.md files for coding agents hold the colours, type scale and spacing of each template as tokens.

Codex Cloud does not touch files on your computer, so ChatGPT Codex website templates have to sit in a GitHub repository. Its tasks run remotely in a cloud environment set up with the repositories you choose.

1. Open the template's repository on GitHub and press Use this template. The catalog's repositories are template repositories, so this makes a copy in your own account.
2. In Codex Cloud, create an environment, choose that copy and connect GitHub if asked. Review the setup and test results, save and publish, then wait for Environment published before you start a task.
3. Describe the change as a task.
4. Review the changes, ask for follow-ups, then commit or open a pull request.

The cloud page of the docs does not cover images or AGENTS.md, so commit the DESIGN.md next to the page and name both files in the task.

Demo names, reviews, prices and addresses are made up, so the first pass should replace or remove every one.

Task: turn the page in this folder into the site of <business>, which <sells what, to whom, in which town>. Read AGENTS.md first. Before editing anything, list every invented name, price, review, address and phone number with the section it sits in, and ask me for the real value or whether to delete it. Keep the section order, every id and data attribute, the classes AGENTS.md names and the scripts. Do not change colours, fonts or motion. Done when the page shows only facts I gave you and I can check it at 1440 and 390 px wide.

To build from the design instead of the file, give Codex the tokens and a screenshot of the template. In the CLI, codex --image passes one with the first prompt, and the composer accepts a pasted image.

Build one index.html with inline CSS and no framework for <product>. Use the attached screenshot as the visual reference and DESIGN.md for the typefaces, palette and spacing, not your defaults. Sections in order: <list>. No gradient unless DESIGN.md has one, no emoji bullets, no stock phrases. Use only the facts below; where one is missing, write [ask] and tell me at the end.

Further prompts, grouped by job and tied to templates you can open, are in a separate collection.

Told to improve a page, an agent modernises it into the average of every page it has seen. Say the task is content, not look. Colours and fonts live in :root, so a new brand colour is one line there. Read git diff --stat after each task; a copy edit that touches the CSS went too far.

In the marketing agency page a paper-cut arrow returns in five sections; tell Codex to keep such parts.

In the tile studio page the designer reads each price from a data attribute, so a price change belongs there as well as in the visible text.

The youth football club page sizes each display line with a --len value, so new words need the value set again.

A page that keeps its type and palette also avoids the habits people spot as machine made, listed in the checklist of tells people notice.

Codex edits files and proposes pull requests; it does not host a website. The finished folder goes to any static host. Upload index.html, LICENSE and CREDITS.md, and leave AGENTS.md, the README and the previews folder behind. A single file such as the speech therapy practice page needs nothing more.

Forms send nothing until you connect Formspree, Netlify Forms or your own backend. Demo text is invented, and a made-up rating or address left in place misleads. Fonts load from Google Fonts, GSAP, ScrollTrigger and Lenis from jsDelivr and photos from Unsplash's servers, so the page needs a connection. Keep the Design: 8B footer link unless the site owner asks to remove it.

If you would rather not touch code at all, 8B's own builder designs a site inside Claude or ChatGPT: designing is free, and publishing with hosting is $9 a month billed yearly.

All 101 templates