Copy-paste ChatGPT Codex prompts for landing pages, dashboards, pricing pages and app screens, scoped as single tasks Codex can finish in one run, plus a prompt that writes your AGENTS.md design rules.
A full landing page for a SaaS product: hero, logos, features, how it works, pricing, FAQ and a closing call to action.
Template: Pixel SaaS landing page
“Build a landing page for [product name], a SaaS product that helps [audience] [main outcome]…”
A hero section that explains the product in one line and gets the click, with a product visual and social proof.
Template: Dark gradient hero
“Build the hero section for [product name], which helps [audience] [main outcome]…”
A pricing page with three plans, a monthly and yearly toggle, a comparison table and a pricing FAQ.
Template: Three tier pricing section
“Build a pricing page for [product name]…”
An app dashboard with sidebar navigation, key metrics, a chart, a recent activity table and empty states.
Template: SaaS analytics dashboard
“Build the main dashboard for [product name], used by [user type] to [main job]…”
Sign in, sign up and forgot password screens with social login, clear errors and a branded side panel.
Template: Login page
“Build the sign in, sign up and forgot password pages for [product name]…”
A short onboarding flow: welcome, role, goals and a first-step checklist that gets new users to value fast.
Template: Onboarding role selection
“Build the onboarding flow new users see after sign up for [product name]…”
A ChatGPT-style AI chat app: conversation list, streaming answers, suggested prompts and a clean message box.
Template: AI chat interface
“Build an AI chat app called [product name] that helps [audience] with [topic]…”
A landing page for a mobile app with phone mockups, feature screens, reviews and App Store and Google Play buttons.
Template: Mobile app landing page
“Build a landing page for [app name], a mobile app that helps [audience] [main outcome]…”
A personal portfolio site with selected work, case study pages, an about section and a contact form.
Template: Designer portfolio website
“Build a portfolio website for [name], a [role] who wants [type of client or job]…”
Account, billing, team and notification settings pages with a settings sidebar and clear save states.
Template: Account settings page
“Build the settings area for [product name]…”
A pre-launch waitlist page that collects emails, shows the product and gives people a reason to share.
Template: Waitlist landing page
“Build a pre-launch waitlist page for [product name], launching [launch date]…”
A short launch video built in code: hook, product name, three feature scenes and a closing line, exported as MP4.
Template: App launch video
“Adapt the launch video template for [product name], which helps [audience] [main outcome]…”
Redesign an existing vibe-coded site or app to match a professional template, without breaking content or routes.
Template: AI chatbot landing page
“Redesign this [site or app] so it looks professional, using the template as the new design…”
A design section for AGENTS.md so every Codex task follows your template, colours and spacing.
“Create the design rules file at AGENTS.md for this project, so every future change follows the same design…”
Every ChatGPT Codex prompt above shows its opening line for free. The full prompts, and the templates they are written for, come with a BrowserMoon licence.
Get a licenceCodex works through your repo as a series of tasks, so the best Codex prompts are scoped and specific. These prompts give Codex one page to build, a BrowserMoon template saved in the repo to follow, and a clear definition of done, so each task comes back as a clean pull request.
Choose the ChatGPT Codex prompt for the page you are building, from a SaaS landing page to a login screen or an AI chat app.
Each prompt is written to go with the template shown on its card. Copy that template, or any template from the ChatGPT Codex templates page.
The design template is in design/template.html. Read it first and match its fonts, spacing, colours, corner radius and components exactly.
Replace the parts in brackets, like [product name] and [audience], with your own details. The prompt ends with: “Keep the change to this one page and its components. When done, run the build and lint, and summarise the change for the pull request.”
Start with the AGENTS.md design rules prompt, because every Codex task reads AGENTS.md before it starts. Then send one page prompt per task, beginning with the page your users see first.
OpenAI Codex works through your repository in a sandbox and returns a diff or pull request. It follows instructions carefully, so it does exactly what a task says and nothing more. If the task does not describe the design, the design is left to chance.
These prompts are written as scoped Codex tasks: one page, a template saved in the repo to follow, clear rules and a definition of done. Codex reads the template, builds the page and runs your checks, so the pull request is ready to review.
Each prompt on this page is built from the same five parts. The page-specific part changes per prompt; the rest is written for how ChatGPT Codex works.
Codex does best with one clear task. Ask for one page or section per task, not the whole site.
Commit the template to design/template.html so every Codex task can read it.
Tell Codex what finished looks like: builds, passes lint, matches the template at phone and desktop width.
Put your design rules in AGENTS.md so every Codex task follows them.
Ask Codex for one page or one section per task. Large tasks return large, hard-to-review diffs.
Without it, every task interprets the design again. Write the rules once and Codex follows them.
Codex only sees what is in the repo. Commit the template before you send the task.
Say what finished means: builds, passes lint, matches the template at phone and desktop width.
Codex is used by developers and teams who hand off well-defined tasks to an agent and review the result as a pull request. These Codex prompts are for teams who want UI tasks to come back looking designed and consistent, not just working.
A prompt says what to build; a template shows ChatGPT Codex what it should look like. These templates also fit the prompts above.
A scoped task: one page or component, a design file to follow, and a clear definition of done. Codex then returns a focused change you can review.
Yes, one task at a time. Start with the landing page prompt, then run the pricing, login and dashboard prompts as separate tasks.
In AGENTS.md at the root of the repo. Codex reads it for every task. These prompts include a ready-made design section.
Yes. They work the same in the Codex CLI, the IDE extension and ChatGPT.
Yes. They work as tasks in Codex in ChatGPT and as prompts in the Codex CLI, as long as the template is saved in the repo.
Yes. Send each page as its own task and Codex works on them in parallel, each following the same AGENTS.md rules.
Prompts for other AI coding tools
