Big Idea

The argument in one line.

Loading context before the first prompt — an agents.md file, MCP plugins, and design skills — is the single variable that separates a generic AI dashboard from one that respects your actual design system.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

A UI or product designer curious about AI coding agents who assumed they were engineer-only tools.
A designer who keeps getting glassmorphism-heavy, generic-looking output from AI tools and wants to understand why.
Someone evaluating whether Codex or Claude Code is the right fit for their design workflow.
A Figma user who wants a faster path from design file to working, interactive prototype.

SKIP IF…

You are an engineer who designs occasionally — the video is pitched squarely at non-engineers.
You want a deep dive into model internals rather than a practical workflow tutorial.

TL;DR

The full version, fast.

Codex started as a developer tool but designers are now 20% of its user base and growing three times faster than engineers, so OpenAI is actively shipping features aimed at them. The main reason Codex produces generic output is that most users start prompting without loading context first. The fix is three setup steps: an agents.md file with your design conventions and explicit don'ts, the right MCP plugins (Product Design, Figma, Mobbin), and reusable design skills. With that stack in place, the first prompt does most of the work. For pure visual polish with minimal setup, Claude Code still wins the first-draft quality race — but Codex closes the gap once context is built and offers leaner token usage for complex technical design work.

Free for members

Chat with this breakdown — free.

Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.

Create a free account →

Chapters

Where the time goes.

00:00 – 01:29

01 · Intro

Hook on Codex going official for designers; overview of what the video covers — setup, generation, iteration, and honest Codex vs Claude Code comparison.

01:29 – 07:07

02 · Setup process

Three pre-generation steps: agents.md file (design brief, color system, typography, don'ts), MCP plugins (Product Design, Figma, Mobbin, Linear, Notion), and design skills.

07:07 – 10:54

03 · First prompt

Live generation of a dark-mode investment dashboard using GPT 5.5 on medium reasoning, with the product design skill invoked. Codex asks a clarifying question and builds a fully interactive prototype in about 6 minutes.

10:54 – 14:45

04 · Iteration

Using the annotation feature to fix chart axes and add tooltips; fixing distorted axis labels; checking mobile responsiveness (broken by default); instructing Codex to verify its work visually. Shareable live URL feature teased.

14:45 – 16:16

05 · Codex vs Claude Code

Honest comparison: Claude Code wins first-draft visual quality with minimal setup; Codex wins on token efficiency and precision for complex technical codebases. Many designers use both.

16:16 – 16:44

06 · Outro

Subscribe CTA, invitation to comment for more Codex videos.

Atomic Insights

Lines worth screenshotting.

Designers are now 20% of all Codex users and growing three times faster than engineers — OpenAI is actively building for this audience.
The single biggest difference between Codex producing garbage and Codex producing something usable is the context you load before the first prompt.
An agents.md file functions as a brief that travels with the project — Codex reads it automatically on every task, so you write it once instead of re-explaining yourself every prompt.
Telling the agent what to avoid (bright gradients, glassmorphism, overly colorful cards) is as important as telling it what to do.
The Mobbin MCP lets Codex reference successful design patterns from hundreds of thousands of real shipped app screens instead of guessing from training data.
Codex annotation mode lets you click any element on screen and write a prompt targeted at that exact element, eliminating the need to describe which component you mean.
Codex will not give you mobile responsiveness by default — you need to specify it in agents.md or your first prompt.
Telling Codex to check its work visually at each screen size produces better results than asking it to verify breakpoints exist in code.
Two-instruction prompts often produce one correct result and one broken one — single-instruction prompts are safer and more reliable.
Claude Code wins the first-draft visual quality race; Codex wins on token efficiency and precision for complex technical codebases.
Codex shareable live URLs let you send a working prototype link instead of a Figma file that needs explaining.
Higher reasoning modes (High or Extra High) cost more tokens but catch implementation errors on the first pass rather than requiring follow-up prompts.

Takeaway

What actually controls the quality of AI-generated UI.

WHAT TO LEARN

The output quality of an AI coding agent is not set by the model — it is set by the context you load before the first prompt.

02Setup process

An agents.md file placed in your project directory gives the AI a persistent design brief — visual style, color system, typography, and explicit don'ts — without re-explaining conventions in every prompt.
Specifying what to avoid (glassmorphism, bright gradients, overly colorful cards) shapes output as strongly as specifying what to include.
MCP plugins connect the AI to external design tools and real-world reference libraries, replacing guesswork with pattern matching against actual shipped products.

03First prompt

AI coding agents do not generate mobile-responsive layouts by default; responsiveness must be explicitly requested in the agents.md file or the initial prompt.

04Iteration

When asking for two changes in one prompt, the agent often nails the first instruction and breaks the second — splitting requests into individual prompts produces more reliable results.
Instructing the AI to verify its changes visually catches layout errors that reviewing code alone misses.

05Codex vs Claude Code

For visual-first exploratory work with minimal setup, one AI tool may consistently outperform another on first-draft quality even if it trails on token efficiency — the right tool depends on the task type, not the brand.

Glossary

Terms worth knowing.

agents.md: A markdown file placed inside a Codex project directory specifying design conventions, color systems, typography rules, component patterns, and explicit don'ts. Codex reads it automatically on every task, functioning as a persistent design brief.
MCP server: Model Context Protocol server — a connector that lets an AI agent communicate with an external tool. In Codex, MCPs are installed as plugins, giving the agent read or write access to services like Figma, Slack, or Notion.
Skill (Codex): A reusable set of instructions stored as a skill.md file that teaches Codex to follow specific design conventions without repeating those instructions in every prompt.
Annotation mode: A Codex feature that lets you click directly on any element in the in-app browser preview and attach a prompt to that element, removing the need to describe which UI component you want changed.
Mobbin: A design inspiration platform containing hundreds of thousands of screens from real shipped apps. Its MCP server lets Codex query this library to apply real-world design patterns rather than generating from model training data alone.

Resources

Things they pointed at.

05:08toolProduct Design plugin (OpenAI)

05:22toolFigma plugin for Codex

05:34toolMobbin MCP ↗

06:00toolLinear MCP

06:05toolNotion MCP

06:15toolEmil Kowalski design engineering skill

06:20toolFront-end design skill

Quotables

Lines you could clip.

01:54

“The single biggest difference between Codex producing garbage and Codex producing something usable is the context that you give it before you build anything.”

Clean standalone thesis line, no setup needed→ TikTok hook↗ Tweet quote

02:37

“Think of this as the brief that travels with your project.”

Tight metaphor on agents.md, quotable on its own→ IG reel cold open↗ Tweet quote

15:37

“If you want the prettiest first draft with the least setup, go for Claude Code.”

Honest takeaway that surprises given the video subject→ TikTok hook↗ Tweet quote

14:38

“Send a link instead of a Figma file that needs explaining.”

Punchy value prop for the shareable prototype feature→ IG reel cold open↗ Tweet quote

The Script

Word for word.

Read-along

Don't just watch it. Burn it in.

See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.

metaphoranalogy

00:00OpenAI just made Codex for designers official. Designers are now one of the fastest growing groups using it, and OpenAI is shipping plugins, annotations, shareable sites, and more, making it a super exciting time to be using Codex as a designer.

00:14So in this video, I'm gonna show all of you designers how to use it, how to feed it context so it stops spitting out generic AI output, how to generate a real polished UI, and how to iterate on that first pass so it's like having a full time designer working for you. Then I'll give you my honest take on Codex versus ClaudeCode for design work because they are actually more different tools than you may think at first.

00:35Let's get into it. Quick context if you've only heard the name. Codex is OpenAI's coding agent.

00:40It runs in your terminal, your IDE, and now a dedicated desktop app. And it can take a task and run it on its own, read your project, write the code, check its work, and hand you something to review. The newest models behind it, like GPT 5.5, are tuned specifically for this kind of work, with a faster low latency version for quicker work and a deeper one for heavier tasks.

01:00Here's the part that matters for designers. Codecs started as a developer tool, but OpenAI just confirmed designers, marketers, and other non engineers are now about a fifth of all Codex users and are growing three times faster than engineers.

01:13So they're shipping features aimed straight at that crowd. Plug ins tuned to your role, ability to refine a result by annotating it in place, and a preview of shareable interactive sites and apps. So this is no longer a tool you'll feel out of place when using as a designer.

01:28It's being built for you now. Let's get started in the Codex desktop app. Just like most AI tools, the UI is pretty simple and easy to navigate.

01:35You have your sidebar on the left where you can start a new chat, search your existing chats, browse plugins, and more. All of your projects, like building websites or apps, are listed here, while the chat section basically shows you all the chat g p t conversations you've had inside Codex. Now the single biggest difference between Codex producing garbage and Codex producing something usable is the context that you give it before you build anything.

01:57If you open codecs and just say build me a dashboard, codecs will go ahead and build something for you, but it'll have no idea what kind of dashboard you want, what kind of styling you want, and you're almost guaranteed to end up with a UI that looks like every other AI generated UI out there. The fix is to set up three things first.

02:13One, an agent dot n d file. When you're starting a new project in Codex, I recommend you open this drop down, hover over add new project, and if you choose use an existing folder, this is gonna let you choose a directory to work in. This means that every time you send a prompt to Codex, it's only gonna search for context within this directory.

02:31It's not gonna scan your entire computer looking at irrelevant files and burning a ton of extra tokens in the process. Now you can see inside my directory, I already have an agents dot m d file. I've opened it in Versus Code just to show you what's inside it.

02:44Think of this as the brief that travels with your project, your design conventions, your component patterns, your tokens, your dos and don'ts. And I've opened it here in Versus Code just to show you what's inside it. Codecs will read it automatically on every task, so you write it once instead of re explaining yourself every prompt.

03:00This is basically your design system talking directly to the agent. Now this is just a demo agents dot m d file, but it includes some sections that will be helpful for codecs to give it more context. I tell it my visual style, my color system, and down here, I've even included an example color palette including hex values.

03:16Now all this detail isn't essential, especially if you're working on a brand new project with no design system to adhere to. You can just include some more general instructions in your agents dot m d file, and Codex will figure out a design system and style guide and so on for you. Just to show you what else is in here, I have typography guidelines.

03:33For example, I always wanna use a clean modern sans serif font like Enter, SF Pro, or Geist. I gave it a suggested type scale, and this part of the end of my file is important. I've told it what to avoid, bright gradients, glass morphism style, overly colorful cards.

03:47So on top of telling my agent what to do and what guidelines to follow, it's important that you also give it the don'ts. Now you'll wanna save this agent's file as a dot m d file and just make sure it's inside the directory that you're gonna be working in in Codecs. The next essential setup step before we start building is plugins.

04:03OpenAI plugins are where you access MCP servers and collections of skills. Quick word about MCP servers and skills. For those who don't know what those are, an MCP server, to put it simply, just lets your AI agent communicate with outside tools.

04:15For example, if I wanted Codex to be able to read and manage my Slack, I could connect this Slack MCP server or as Codex calls them, plugins. Now a skill on the other hand is just a reusable set of instructions that teaches your AI agent to work the way you want it to. It's similar to your agents dot m d file in that you can include instructions about how you want your agent to design, for example.

04:35Now there's a handful of useful plugins for designers inside Codecs that are built by OpenAI themselves. The first one I wanna install is this product design plugin. It's a collection of 11 different skills that enable you to explore better product directions, audit user flows, research user friction, and prototype from a live URL.

04:52A A couple skills in particular that I think are very useful inside this plugin are the product design skill and URL to live code, which actually lets you take a live URL from the Internet and turn it into an interactive prototype that you can run locally. So I'm adding this plugin to my codex right now, and just like that, I have it installed.

05:09Another plugin that I highly recommend you check out, especially if you already use Figma, is the Figma plugin. This is pretty much the fastest way to go from a Figma design to real code, or you can even prompt Codex to design for you inside your Figma file. Now one more of my favorite plugins is the Mobin MCP server.

05:25Mobin, if you haven't heard of it, is a design inspiration platform with hundreds of thousands of screens from real shipped apps from some of the biggest brands like Uber, Netflix, Apple, and many more. And with the Mobin MCP, Codex can analyze successful design patterns in top apps and apply them in your AI generated designs.

05:43This way, your AI isn't just guessing anymore. If you wanna get started with the Mobin MCP, I'll leave a link in the description. Aside from Mobin, I recommend you just connect whatever tools you already use day to day for your design work.

05:54For example, if your team uses linear for project management, try connecting this. If you use Notion for design documentation, this is a good one too.

06:01Just go check out their plugins library and see what works for you. Plugins are simply the installable package that bundles the AI workflow plus its MCP setup. You're not configuring this by hand every time.

06:11Now the third setup step for Codex is using skills. Like I said, a skill is just a reusable set of instructions that Codex will follow. Through skill dot m d files, you can teach Codex how to generate or edit images.

06:23You could use the skill creator to create your own skill with your guidelines, your design rules, but there's also a handful of skills more closely related to design. A couple of my most popular videos are actually about skills. So if you haven't already seen those, I highly recommend you go check those out to learn more about how to use them as a designer specifically.

06:39In those videos, you'll see a lot of the skills that I already have installed listed here, like Emil Kowalski's design engineering skill, the infamous front end design skill, and quite a few others that teach codecs how to design better. So before I generate anything, my setup is a solid agents dot m d file, having the right m c p's ready for whatever kind of design project I'm working on, and a few design skills.

07:00That's the entire setup process. Now it's time for the first generation. And with all that context in place, the first prompt does most of the work.

07:07Right before the first prompt, I wanna call out that I'm gonna use GPT 5.5 for this generation. It's OpenAI's latest and strongest model and by far the best one for designers. For this demo, I'm gonna leave the reasoning on medium.

07:19But if you're working on a more complex project, that's when you might wanna consider switching to high or extra high. This will, of course, use more tokens, but it's worth it if it means a smaller number of prompts in the end. The first prompt I'm using is create a dark mode investment dashboard UI at desktop dimensions.

07:35Include screens for dashboard, transactions, budgets and goals, analytics and reports, and settings. Refer to the agents dot m d file and the attached inspiration image as you craft our UI.

07:45So note that I said the attached inspiration image. Something I usually do, especially on the first prompt, is on top of the agent's MD file that it's gonna read, give it a screenshot of a design that you really like and wanna use the style and overall design of as inspiration. Keep in mind that, ideally, the guidelines in your agents dot MD file and your attached inspiration image don't conflict.

08:04Because, for example, if you say you want light mode in the dot m d file and then dark mode in the inspiration image, that's gonna confuse codecs and you might not get a good result. Now this is my whole prompt. The last thing I wanna add to this prompt is that product design skill that I showed you earlier.

08:18I can run this as a slash command, meaning I just hit slash, start typing product, then hit enter.

08:24And now Codex is gonna invoke that skill as it starts building our UI. We can see that it's found the agents dot m d file, and it's referencing the inspiration image as a strong visual target. Now check this out.

08:34If Codex feels like it's missing any information from you, it'll tell you. It's asking me if this should be mostly a static polished UI with clickable screen navigation or a fully interactive prototype with functional filters, settings controls, and more.

08:47GPT 5.5 is so powerful that I'm gonna tell it to go straight to the fully interactive prototype. Here's the thing. If you're working on a much more complex project, I recommend that you take baby steps and have it just decide on the look of the UI first.

08:59But for this investment dashboard, I'm comfortable going straight to the prototype. Now as it's building, it tells me that the product design handoff wants a visual QA pass before I call this done. Now because we're using the product design plugin, after it builds the UI, it's gonna open it itself in browser, capture the desktop state, and tighten anything that visibly drifts from the reference.

09:17This is a pretty essential step that you have AI do, check its own work. And ideally, check its own work visually. Because after all, what we're trying to achieve is a beautiful, functional, and usable UI.

09:28Now while it's still building, we can already review the file that it's writing to. Now to give you a little more detail about the UI while it's building, we have three buttons in the upper right. This first one prompts a pinned summary.

09:39It shows whatever outputs you've created during the session and any sources that it's followed to build those outputs. You can also bring up a bottom panel. This is your terminal that you can use inside Codecs and a right sidebar, which is basically your file explorer or IDE.

09:53Now after six minutes, it's built the first version of our dashboard, so let's check it out. If I hit open in, I can either view it in the Codex browser without even leaving the app or my preferred external browser. For the sake of staying inside Codex, I'm gonna use the in app browser.

10:07We have a full dashboard produced by Codex. We have this dashboard page with four KPIs at the top, a huge chart right here, and a couple cards showing my top holdings and priority actions. It's looking pretty solid.

10:18It adhered to the inspiration image I gave it pretty well along with the guidelines in the agents.md file. Dark mode, rounded corners, green to indicate growth, and so far, I'm not seeing any design patterns that Screen AI generated.

10:30That's because we went through that setup process and attached a reference image. The first generation is, of course, a starting point, never the finish. So here's how I teach Codex what it can improve on so that I can iterate on my design fast.

10:42One thing I'm noticing is that this chart doesn't have any x or y values, so I really can't tell what the graph is conveying or measuring. I also wish there were tooltips here so that I could hover over a certain part of the line and see the exact value at that point. So this is a great opportunity to show you one of my favorite features in codecs, annotating.

10:59This is a newer feature, and to use it, all I have to do is click this button up here. And just like that, I'm in annotating mode. What this means is I can select any element on the screen and write a prompt targeted at that element that I've selected.

11:10This keeps you from having to explain what element you're talking about when you prompt codecs. So I'm gonna annotate this chart area and say, add x and y axes that clearly convey what values are being tracked, and then also add interactive tooltips upon hover of the line graph.

11:27Now we can see in the left sidebar that it's made those changes. Now the thing that might throw you off about Codex is you'll likely have to refresh this Codex browser every time a change is made to see those changes live. So we have this working dynamic tooltip now that's looking great, but the labels in the x and y axes are clearly getting a little bit distorted, so I'm gonna give a follow-up prompt telling Codex to fix this.

11:47This is actually a great example of you telling Codex to do two different things at once and nailing the execution of the first thing, but then butchering the implementation of the second thing. So sometimes you're better off giving Codex these instructions in individual prompts. I'm willing to bet that if I was using a higher reasoning mode like high or extra high, it would have gotten the execution right on the first pass at the cost of using more tokens.

12:08Something I would also wanna fix is the spacing in between the first row of KPIs and the next row below it. There only seems to be a couple pixels of spacing in between, and that's something I would definitely wanna bump up a bit to match this horizontal spacing here. And this is yet another fix you could easily make with that annotation feature.

12:24Now like you saw in the beginning, we asked for a full prototype. So we have the dashboard page, but then we also have all the other pages included too, transactions, which is looking pretty solid, budgets and goals.

12:35I like the colors being used here to differentiate each type of funding goal, analytics and reports, and we can see it's applied those same x and y axes and tooltip to this chart as well. Then we also have this final settings page. Now one more thing about my dashboard that I wanna check is whether it's responsive or not.

12:51I would definitely have mobile users using this dashboard, so taking mobile screen sizes into consideration is super important. Here's how we can check for that in Codecs. Click this drop down, show device toolbar, and then this button right here is gonna switch our view from desktop to mobile.

13:06And we can clearly see dashboard is not mobile responsive whatsoever. All the content is just getting absolutely smushed, and the left side nav bar should ideally get collapsed into a hamburger menu.

13:17So this just shows you that you don't get mobile responsiveness by default, and this is something you should definitely consider including in that agent's dot m d file or just in your first prompt. So here's what I'm gonna tell Codex now. It's not responsive at all.

13:29Set up robust breakpoints for mobile and tablet and check your work visually at each screen size to make sure it's fully responsive. Now here's the important thing.

13:38I'm telling it to check it visually. This means don't just review the code and make sure those breakpoints are technically there. See what our app looks like because that's a much better indicator of whether the app is actually responsive or not.

13:49Now Codec's just finished, so let's refresh our browser. And now from that prompt, at mobile screen size, the KPIs stack vertically, the chart shrinks to fit the screen size, and we have this bottom nav bar for navigation. So this just shows you that every change you wanna make in these AI agents can be done through natural English, but it makes it more convenient having tools like annotation and seeing your designs at both mobile and desktop screen sizes.

14:12Now if I open the summary panel that I showed you earlier when it was empty, it's now listing this index dot HTML file that's making up this whole design and the in app browser that we have running right now. One more thing worth knowing because it's brand new at the time of recording. Codex can now build interactive sites and apps and give you a live URL so you can share them.

14:31For a designer, that's a huge deal. Spin up a working prototype, a portfolio site, even a full app that has real functionality, and send a link instead of a Figma file that needs explaining.

14:41Still early, and right now, it's only available in preview for business users, but keep an eye on it. Now the honest part, because if you've watched my channel, know that I love Claude code personally and use it a lot for my work, but you deserve an honest comparison. Across a lot of real world testing that I've done, the pattern is consistent.

14:57For pure visual and UI work, Claude code tends to win. Its first pass is often closer to shippable, and it preserves more of the original design structure when converting a Figma design. Codex's raw UI output tends to lean more functional and beautiful out of the box.

15:11So where does Codex actually win for a designer? Well, when you can write a clear detailed brief, Codex can execute it exactly. It's leaner on token usage, so if you've ever used Cloud Code to design and ended up burning through a 100,000 tokens in one prompt, This is something you'll probably experience less of using Codecs.

15:28It's pretty strong at kicking off several tasks and then reviewing them later. And like I said before, OpenAI has started shipping a ton of new features targeted toward designers. There's no sign of them slowing down anytime soon, so I'm very excited to see what else is coming.

15:41Here's my honest take. If you want the prettiest first draft with the least setup, go for Claude Code. I think for that reason alone, Claude Code is used by more designers than Codex at this point.

15:50If you're willing to do the setup with an agents dot m d file, the right skills and MCPs, Codex closes most of that gap and gives you that coding precision that more technical folks will appreciate. A lot of people, myself included, end up using both. Thought code for more exploratory visual work, Codex for more technical design work that involves a more complex code base, And, of course, the new designer features that are being shipped.

16:12The setup beforehand is what makes the main difference. That's the main lesson of this video. So that's Codecs for designers.

16:18You saw how to give it context with an agent's dot m d file, plugins, and skills, how to generate a UI that respects your design system, and how to iterate fast with annotations and the visual loop. And you got the honest comparison against Cloud Code, so you can pick the right one depending on your project and workflow.

16:34If you want me to make more videos like this on codecs, let me know in the comments because I read every single one. I'll see you in the next video, and don't forget to subscribe to become a better designer.

The Hook

The bait, then the rug-pull.

OpenAI just confirmed what the usage data already showed: designers are one of the fastest-growing groups on Codex, growing three times faster than engineers. The problem is that most tutorials treat Codex like a developer tool and skip the setup work that makes it useful for design. This one does not.

Frameworks