Give Codex a UI plan it can build from

Codex writes good components. What it can't know is the rest of your plan: which sections each page has and in what order, the exact copy, your colors, fonts and logo, and the libraries you already use. UIPrompt is where that plan lives. Codex reads it over MCP or from your repo, and builds every page the same way.

Why Codex's UI drifts

Ask for “a pricing page” and Codex has to decide the structure, the hierarchy and the copy on its own. Then it decides again, differently, for the next page. Over a few sessions you get:

• Pages that don't match. Different spacing, button styles and section patterns from one page to the next.
• Placeholder copy. “Streamline your workflow” instead of what you actually want to say.
• Off-brand details. Close but wrong colors, a default font, a redrawn logo.
• Libraries you don't use. A new component library or icon set pulled in because nothing said otherwise.

AGENTS.md is great for how to work in your repo, but not for the plan for each page. That is the part UIPrompt holds.

The quickest way: the UIPrompt plugin

One install adds the UIPrompt connector and a UIPrompt skill that tells Codex how to build from your plan: sections in order, your exact copy, your real logo files. Add the plugin marketplace:

codex plugin marketplace add Curtisx1/uiprompt-plugins

Then install UIPrompt from the Plugins Directory in the Codex app and sign in. See the plugin on GitHub.

Or connect it yourself

1. The MCP connector

Add UIPrompt as an MCP server, then sign in. It works in both the Codex app and the CLI.

codex mcp add uiprompt --url https://uiprompt.app/api/mcp
codex mcp login uiprompt

Codex can then pull the finished brief with get_agent_context, fetch your logo files with get_brand_logo, and plan new pages on your canvas itself: describe a page or drop in a screenshot, and it lays out the sections with exact copy for you to review before anything is built.

2. The brief in your repo

From the editor, choose Publish → Pull request for your agent. UIPrompt opens a pull request (or commits straight to main) with:

• .uiprompt/brief.md: pages, sections in order, design tokens, stack and rules
• .uiprompt/skeleton.json: the same structure as data
• a short marked block in AGENTS.md (and CLAUDE.md if you have one) pointing agents at the brief

Codex reads AGENTS.md, so it picks up the brief on every task with no copy and paste. For projects imported from your repo, each page in UIPrompt shows Built or Planned based on the routes Codex has added.

What Codex receives

Not a paragraph: a structured brief, with a separate prompt, exact copy and visual weight for every component. This is part of the brief for the demo project:

<design_tokens>
Colors: Ink: #111111, Primary: #2c7ef8, Success: #1bc47d, Soft surface: #f4f6fb
Fonts: Sans: Inter / system-ui
Spacing: Base: 8px grid, Section: 96px desktop / 56px mobile
</design_tokens>

<frameworks>Next.js, React</frameworks>
<styling>Tailwind CSS</styling>
<component_library>Shadcn UI, Radix</component_library>

# Hero Section [order: 1]

- **Hero copy**: Main headline, supporting value prop, and CTAs.
  - **Prompt:** Write and render a left-aligned hero for AtlasOps. The headline
    should promise release clarity without hype. Add a short paragraph and two CTAs.
  - **Exact Copy:** Know what shipped, who felt it, and what broke. | Start free | Watch demo
  - **Forbidden Patterns:** gradient blob background, abstract AI sparkle decorations
  - **Visual Weight:** HERO — dominant focal point
- **Product preview**: Dashboard preview showing release and incident signals.
  - **Visual Weight:** PRIMARY — clearly subordinate to hero

Things to ask Codex

• “Build the pricing page from my UIPrompt project.”
• “Plan a settings page in UIPrompt from this screenshot, then build it.”
• “Which pages in the brief are not built yet? Build the next one.”
• “Use the brand logo from UIPrompt in the header and as the favicon.”

Frequently asked questions

Also using Claude Code, Cursor, GitHub Copilot, Windsurf or Gemini CLI? The same plan works there too.