How to design UI with ChatGPT.
ChatGPT can take a UI from rough idea to working screen, but each step works best in a different place. Use Chat to think, image generation to explore the look, and Codex to build real screens you can open, compare, and ship.
Updated November 2, 2026 · 7 min read
The short answer
Yes, ChatGPT can design an app or website UI. Pick the mode that matches the step you are on:
| Step | Best place in ChatGPT | What you get |
|---|---|---|
| Shape the idea | Chat | A design brief, screen list, and user flow |
| Explore the look | Image generation | Mockup images of a few visual directions |
| Build real screens | Codex | HTML files you can open, test, and edit |
| Compare and refine | Codex with a canvas | Several screens side by side, revised fast |
| Ship it | Codex in your codebase | The chosen design in your framework |
Chat and Work are good for thinking and documents. Codex is the mode built for software work: it reads and writes files in your project, which is what turns a design into something real. In the ChatGPT desktop app, select Codex in the product selector.
Step 1: Shape the idea in Chat
Start with a conversation, not a design. Ask ChatGPT to turn a rough idea into a brief: who the product is for, which screens it needs, and what each screen must show.
I'm designing a habit-tracking app for people who want to read more. Help me write a one-page design brief: target users, the five most important screens, what each screen shows, and three possible visual styles with one sentence each. Ask me up to three questions first if anything is unclear.
Keep the brief. You will paste it into every later step, so each one starts from the same context.
Step 2: Explore the look with images
Before anyone writes code, mockup images are a cheap way to see a style. ChatGPT’s image model, gpt-image-2, is good at interface images with readable text. In Chat, just ask for an image. In Codex, include $imagegen in your prompt to call the image generation skill directly.
$imagegen Create three mockup images of the home screen from this brief, one per visual style. iPhone screen, 390×844, realistic UI with real-looking text and numbers, no device frame. Keep the content identical across the three so only the style changes.
Treat these as mood boards, not specs. Small text and exact spacing in generated images still need checking. In Codex, image generation also uses your usage limits three to five times faster than a normal turn, so explore with a few images rather than dozens.
Step 3: Build real screens with Codex
An image shows what a screen could look like. An HTML file is a screen you can click, resize, and change line by line. Switch to Codex, open a project folder, and ask for the screens as code:
Using the attached brief and the mockup image I picked, build the home screen as one self-contained HTML file, 390×844, with inline CSS and system fonts. Then make two alternative directions in separate files with the same content: one bolder, one calmer.
Attach the mockup image you liked so Codex can match its layout and mood. One self-contained file per screen keeps every version portable and easy to revise.
Step 4: Compare the directions side by side
Judging three designs one browser tab at a time is slow. Put them next to each other:
- Without a plugin: ask Codex to build a single comparison page that shows all three screens in a row.
- With a canvas plugin: Codex Design adds a canvas to Codex, where screens appear side by side as live HTML, next to your reference images. Install it with one prompt.
Then pick a direction, or combine the parts you like: “the bold version’s header with the calm version’s cards” is a good next instruction.
Step 5: Refine with specific feedback
Name the element and the change. “Make it pop” gives the agent nothing to act on. This does:
Refine the calm direction: - Make the streak counter the first thing you notice. - Reduce the card padding to 16px and use one accent color for active states. - Keep everything else the same.
For changes that are faster to make than to describe, such as a font size or a shade of color, edit the HTML directly, or select the element on the Codex Design canvas and adjust it in the properties panel.
Step 6: Turn the design into production code
When a direction is approved, ask Codex to rebuild it in your real app, with your framework, components, and colors. The HTML mockup becomes the spec:
Implement the approved home screen in our SwiftUI app. Match the layout and spacing of home-calm.html, use the colors in Theme.swift, and reuse our existing card component.
Tips for better results
- Give real sizes. 390×844 for a phone, 1440×900 for a desktop page.
- Use real content. Plausible names, numbers, and dates expose layout problems that placeholder text hides.
- Ask for options. Three deliberately different directions beat ten small variations of one.
- Add a design skill. Skills such as Taste Skill give Codex a stronger point of view on typography and layout. See the best Codex skills for UI design.
Frequently asked questions
Can ChatGPT design an app for me?
It can design and build the screens. Chat helps you plan them, image generation shows how they could look, and Codex writes them as working code. You still make the decisions: which direction, what to change, and when it is done.
Is there a UI design plugin for ChatGPT?
Yes. Plugins work in Chat, Work, and Codex in the ChatGPT desktop app, and in the Codex CLI. Codex Design is a UI design plugin that adds a visual canvas to Codex. OpenAI’s plugin directory also includes a Figma plugin for teams that work in Figma.
Should I use ChatGPT or Codex for UI design?
Both are ChatGPT. Use Chat for ideas and briefs, and switch to Codex when you want real files: screens you can open, compare, edit, and move into your codebase.