How to make UI concepts and prototypes with the Product Design plugin in Codex

OpenAI's Product Design plugin for Codex shows you three visual directions before it builds a screen, then turns the one you pick into a runnable prototype. A post saying it makes UI work with OpenAI models much better passed 1,000 likes on X on October 13.

In the ChatGPT desktop app, open the Plugins tab, find Product Design and press the + button. In Codex CLI, open the plugin browser and install it there.

/plugins

After installing, start a new session and call it with @.

@Product Design Help me get started

The first time, it walks you through saving product context such as product URLs, Figma files, screenshots, codebase paths and design tokens. If you already know the task, just ask for it.

• Get three visual directions for a new idea. Turn this product idea into three visual directions
• Build the mockup you picked as a responsive prototype. Turn this selected mockup into a responsive prototype
• Turn an existing web page into an editable prototype. Clone this URL into an editable prototype
• Find UX and accessibility issues in an onboarding flow. Audit this onboarding flow and identify the highest-impact UX and accessibility issues

With tools like a browser, Figma, image generation or Vercel connected, it carries on to capturing screens, moving designs over and deploying. Plugins aren't available in the IDE extension.