Codex 
OpenDesign How to design interfaces with OpenAI Codex in OpenDesign: the setup, one complete task from brief to reviewed file, and the limits to know before you start.
“A calmer project board.
Clear priorities. Room to focus.”
THREE CODEX PAGES
This guide: brief, references, design rules and a reviewed HTML result.
Read this guide PLUGINS & INSTALLATIONBrowse design plugins or get the OpenDesign install instructions.
Go to resources A DIFFERENT OUTPUTSlide decks have a separate guide with their own workflow.
Open Codex SlidesOne Complete Codex Design Task
A single task, shown end to end: the brief and constraints you hand over, the artifact that comes back, and the checks you still run before it is done. The interface below is an illustrative example built for this page, not a recorded Codex run.
BriefDesign a project progress board for a small product team. Show overall progress, the next milestone and blocked work at a glance. Tasks move across To do, In progress and Done. The board must work on desktop and on mobile.
data-od-id hooksWrite the brief, select the design system and define the acceptance criteria.
Plans the layout, writes the HTML, CSS and JavaScript, runs the file and revises it on request.
Provides the design system and skill, renders the preview and stores every version as a file in the project.
Visual hierarchy, spacing on the 8px grid, both breakpoints and every interaction are checked before handoff.
Sidebar, header, stats and columns sit on the 8px grid; nothing overlaps at 1440 or 390.
Progress, next milestone and blocked count outrank the column headers; the accent marks one milestone label only.
Columns become a segmented switch; the milestone bar stays; the sidebar folds into a tab bar.
Switch the preview between desktop and mobile here. In your own artifact, open a task and test the filters, keyboard navigation and focus behavior.
Fit
Compatibility
This guide covers local Codex. Other modes have different setup and billing. Published references checked on 11 September 2026.
OpenAI Codex, the coding agent — not the older code-completion model. This page is about designing interfaces with Codex, not the Codex app’s own UI. OpenDesign’s setup notes list Codex among the available agents.
For local Codex, sign in with ChatGPT or use an OpenAI API key. They have different billing and policy implications. Follow OpenAI’s authentication instructions; this page does not promise a quota or price.
Check the download page for desktop builds. The Node.js and pnpm requirements in the source quickstart apply to running from source, not to installing a desktop package. Minimum compatible Codex version: not verified here.
Follow the connection instructions shown by your installed version, then run a small task. Confirm that the intended agent handled it and that the artifact opens. A download alone does not establish a working connection.
Start with the desktop app
Download first, complete the Codex setup for your installed version, then check a small result. You do not need to build OpenDesign from source to follow this path.
Choose the package for your computer, install it and open the app.
Download OpenDesignFollow the Codex instructions in your installed version. For local Codex, complete ChatGPT sign-in or API-key authentication before sending a task.
Read Codex authentication notesUse a small brief so you can judge the whole loop, including one revision.
Build a settings screen with a profile form and a save confirmation. Use my design rules. Check it at desktop and mobile widths.
To run from source, follow the technical quickstart instead. To install the plugin in Codex, use the installation entry below.
The Codex design workflow
The same progress-board task, followed from brief to verified file. Each step lists what you provide, what Codex does, what OpenDesign contributes and what you check.
Plain language, three to six lines. Name the audience, the job of the screen and the platforms.
AGENTS.md; asks when something is ambiguous.A design system and a few hard rules. This is what separates on-brand output from a generic look.
Codex writes a self-contained HTML file: layout, styles, interactions and stable hooks.
The file renders inside OpenDesign at the widths you asked for. This is where the design is judged.
data-od-id targets for comments and edits.Request changes by pointing at elements in the preview. Every revision is a new file; nothing is overwritten silently.
Resources
A plain-text address with installation instructions for Codex to read, not a visual tutorial. Copy the prompt into Codex and it reads the entry itself.
Install OpenDesign in Codex by reading https://open-design.ai/codex-plugin/ and following its installation instructions. Ask before changing configuration.
Frontend and design-system plugins for Codex, each with its own source and setup instructions.
The artifact types Codex can produce in OpenDesign, one skill per type.
Brand tokens and components to bind before Codex generates anything.
Decks have a separate guide; the output and workflow differ from product UI.
Limitations
FAQ
Start with a small task, judge the round trip, then bring the real brief. Choose the option that matches your setup; the page does not detect it.