Browse and preview all 590+ ChatGPT Codex templates for free. Copy any template, and every ChatGPT Codex setup file on this page, with a BrowserMoon licence.
Get a licenceDesign help before you prompt ChatGPT Codex
Ask Mon, the AI design assistant, which layout and template fit your app. Then paste it into ChatGPT Codex.
What are ChatGPT Codex templates?
ChatGPT Codex templates are finished designs you commit to your repo so every Codex task builds to the same look. Save a template in design/template.html, add the AGENTS.md design section from this page, and give Codex one scoped task at a time: it returns a pull request that matches the design.
How to use templates with ChatGPT Codex
Commit the template
Save the template as design/template.html in your repo so every Codex task can read it.
Add AGENTS.md
Add the AGENTS.md design section from this page. Codex reads it at the start of every task.
Give one task at a time
Ask for one page or component per task, and say what done looks like.
Review the pull request
Check the diff and the screenshots, then merge or ask for a follow-up task.
AGENTS.md design template
Codex reads AGENTS.md for every task. This section gives it your design rules and a definition of done for UI work.
AGENTS.md design template
A design section for AGENTS.md. Codex reads it on every task, so each pull request follows your template and passes the same design checks.
AGENTS.md# Design rules for agents Every task that touches UI must follow these rules. Read design/template.html before you start. ## Design source of truth - Match the BrowserMoon template in design/template.html for fonts, spacing, colours, corner radius, shadows and components. When in doubt, open it and copy what it does. - Never invent a new style. If something is not in the template, use the closest thing that is.
Free logo, app icon and favicon for your ChatGPT Codex app
Still showing the default icon? Pick a free SVG logo, then make a matching app icon, favicon, social share image and App Store screenshot with the free app launch kit. Drop the files in your ChatGPT Codex project's public folder. If the rest of the app still looks default, read why AI apps look generic.
Scoped tasks build better UI
Codex works best on clear, contained tasks. "Build the pricing page following design/template.html" returns a focused change you can review. "Redesign the app" returns a sprawling one. Break the site into pages and run them as separate tasks, all following the same template.
Best templates for Codex tasks
Codex is strongest on well defined work in an existing repo, so page and section templates suit it best: a pricing page, a settings page, a new landing page section. Give each one its own task, and Codex returns a pull request that matches the template.
Email templates and documentation pages also work well, because they are self-contained and easy to review.
Codex vs Claude Code for building from templates
Both read a template file in your repo and a rules file at the root: AGENTS.md for Codex, CLAUDE.md for Claude Code. Codex runs tasks in the cloud and returns pull requests; Claude Code works with you in the terminal. The same template and the same design rules work in both.
Who uses ChatGPT Codex templates
Codex templates are used by engineering teams that review every change as a pull request: product teams adding pages to an existing app, agencies maintaining several client sites and solo developers running tasks in parallel. A template in the repo plus AGENTS.md means every task returns UI in the same design.
Best ChatGPT Codex templates by use case
Pricing page template for ChatGPT Codex
A scoped task Codex can finish in one pull request.
Settings pages template for ChatGPT Codex
Self-contained screens that are easy to review as a diff.
Landing page section template for ChatGPT Codex
Add one new section to an existing site without touching the rest.
Email templates template for ChatGPT Codex
Transactional emails that match the product, built as a separate task.
Docs page template for ChatGPT Codex
A documentation layout Codex can fill from your existing markdown.
Tips for better results in ChatGPT Codex
Name the template in every task
Start tasks with "following design/template.html" so each one reads it.
Ask for screenshots
Ask Codex to include screenshots at phone and desktop width in the pull request.
Small tasks in parallel
Run several small page tasks at once; they stay consistent because they share AGENTS.md.
Review the diff for styles
Reject pull requests that add raw colours or new fonts.
Codex vs Claude Code
Codex runs tasks in the cloud and returns pull requests, which suits teams that review everything. Claude Code works interactively in your terminal, which suits fast iteration. Both read a template in the repo and a rules file at the root, so the same design system works in both.
What to ask ChatGPT Codex after you paste a template
- Following design/template.html and AGENTS.md, build the pricing page. Include screenshots at 375px and 1440px.
- Build the account settings page with our existing components. Do not change other pages.
- Add the welcome email template to our email folder, matching design/template.html.
Common mistakes with ChatGPT Codex templates
Whole-site tasks
Split work into one page per task.
No definition of done
Say what must pass and what the PR must include.
ChatGPT Codex templates by category
ChatGPT Codex templates by framework
Frequently asked questions
What are ChatGPT Codex templates?
Finished designs you keep in your repo so every Codex task builds UI to the same look, plus an AGENTS.md design section that tells Codex the rules.
What should AGENTS.md include for design?
Which template to follow, your colours, type and spacing, rules for reusing components, and a definition of done for UI tasks.
Does this work in the Codex CLI and IDE extension?
Yes. Codex reads the same repo files, template and AGENTS.md, wherever you run it.
Are the Codex templates free?
Browsing and previewing are free. Copying the code and the AGENTS.md section needs a BrowserMoon licence.
Can Codex turn a template into React components?
Yes. Give it a task like "Build the pricing page in our React components following design/template.html" and it returns a pull request.
Can I run several Codex tasks on the same design?
Yes. Because every task reads the same template and AGENTS.md, parallel tasks still produce matching pages.
Do I need AGENTS.md to use the templates?
No, but it helps a lot. Without it, each task only follows the template you name in the prompt; with it, every task also follows your design rules and checks.
Can Codex work on several pages at once?
Yes. Run one task per page; they stay consistent because each reads the same template and AGENTS.md.
Templates for other AI coding tools