Designing With AI: Claude, Codex, Figma | Full Guide

Today, we're breaking down the full AI design workflow from start to finish.

We'll look at the current state of AI tools in Figma, how to set everything up, when to use Claude, Codex, Claude design, Figma, and more, and how to combine them without wasting time or burning through tokens. We'll also cover

how to train AI in your design system, generate original screens, improve the quality of AI outputs, and build a workflow that actually feels usable for real product design work. Before we

begin, couple quick things. If you're a big fan of myself and what we're doing, consider checking out UI Collective Academy. Again, this is all just on our

Academy. Again, this is all just on our website, link in the description, where you get access to a bunch of great courses on AI, design systems, and more.

Private Slack channel access with me and the team. I'm always releasing new

the team. I'm always releasing new content on this as well. Or if you don't want to support the academy, it's totally free to join the community. You

can come ask any question for free on our forum. Also get access to great

our forum. Also get access to great savings and resources, too. So, whether

you want to join the community or support the academy, all this is just on our website. Thanks for being here.

our website. Thanks for being here.

Also, come follow me on X. Link to my X, along with our website, both in the description. Right off the bat, for

description. Right off the bat, for designers, AI is not a tool. AI is a workflow.

Two to three years ago, when Figma was all we were using, that's when design relied on one tool. That's it. All we

were using was Figma. We weren't using anything else.

But now, with the introduction of AI, the ability to spin up rapid iterations, spin up handoff documentation, do a lot of the manual work that we were doing before, using AI is not just about

knowing how to use a one tool. It's

about knowing how to use multiple tools, how to collaborate between those tools, and how to adjust your approach depending on what it is that you're actually working on. So, as designers,

we're always looking for one tool to do everything that we were using Figma for before.

But now, it's about how we're using multiple tools to make ourselves a little bit more efficient. Let's take a look at what that looks like. And

naturally, because Figma was our home for so long, we're looking for a tool that does everything. And I actually got an email from someone recently whose boss was like really putting pressure on them to find a tool that does exactly

what I'm about to talk about here, but doesn't exist. Um, so what designers are

doesn't exist. Um, so what designers are really looking for in one tool is the ability to upload a design system flawlessly, where the AI automatically knows every variable, every style, every

component, when to use those components, variables, and styles, and is just an expert on everything right out of the gate.

The ability to prompt our way to desired designs on a canvas UI, very similar to Figma where we can select certain elements, move things around, manually adjust things if we need to.

An option to have Figma-like functionality for finer adjustments, like the ability to, you know, control the variables globally, the ability to tweak spacing just between a couple items.

Uh, one click to generate all handoff documentation for both designers, for developers, when to use components, accessibility guidelines, when to use specific pages, and then a one-click

build to make developers' lives easy where you just click build and it generates, you know, perfect code for the developers to go and implement.

But it doesn't work like this. This is

our dream, and maybe in 3 years when we get there in the future, but this does not exist in current state right now.

Instead, what it looks like is we need to train AI on our design system. We can't just upload it and

system. We can't just upload it and expect AI to do everything is we need to go through a series of prompts to make sure AI understands our current brand, our styles, our variables, our

components, and then store that knowledge somewhere so you don't need to keep telling it every time.

We need to generate multiple iterations across tools because the output that you might get from something like Claude is going to be different than the output that you might get from something like Clo Codex, which is going to be different than something that you might

get from Google Stitch.

So it's important to generate multiple iterations across some of these tools.

And then when it comes to the Figma integration, or how Figma loops into this, is you can push and pull from Figma to different AI tools for iteration. So,

something might come out in Claude code, I can push that to Figma, make some tweaks in Figma, make the styling, the layout tweaks that I want, and then bring that back into whatever AI tool that I was working with before.

So, there's a little bit of give and take there.

And then build out with AI with the help of a developer. So, it's not as easy as just one to click builds everything perfectly, a perfect code, you have everything that you want.

You need developers are there for a reason. We can support them on some of

reason. We can support them on some of these items, but it's not as easy as just going from prototype to production level code right away.

And then we need to work with AI to generate a lot of the documentation, if whether we're building design system components, you know, designs, you know, different modules.

AI doesn't automatically know the usability guidelines, the accessibility guidelines for everything that we're spinning up. We still need to dialogue

spinning up. We still need to dialogue with the AI in order to get the specific outputs that we're looking for. And with

this, this is not just one tool, but this is a suite of different tools in the AI space that we need to know how to maneuver through.

How to generate with Claude, how to generate with Codex, how to generate with Google Stitch, where does Figma come into play, how do we get the better results with each of these tools?

Because as the AI landscape evolves, we can't just get away with just knowing one tool. If we just get away with

one tool. If we just get away with knowing Google Stitch, then we go into an interview or all of a sudden we need to work with Claude or Codex, then we're behind other designers.

So, you need to be able to work with all of them. It's not like you can just know

them. It's not like you can just know Claude, just know Codex. They're all

going to make their own leaps in innovation, especially in the design space eventually. And you just saw that

space eventually. And you just saw that with Claude design.

Codex might come out with something similar in the future that might be better than what Figma offers, and be better than what Claude offers.

So, it's important to have a full understanding of the entire end-to-end workflow for the topic of Figma.

As there's a lot of clickbait that's out there where people are like, "Oh, Figma's finished. Figma's going to go

Figma's finished. Figma's going to go bankrupt. Figma doesn't stand a chance."

bankrupt. Figma doesn't stand a chance."

Despite the fact that their stock price is down like 85 plus percent of all time, it's not finished. It's

still going to be around. But, they've

fallen behind in the AI space. You know,

Figma's AI is incredibly underwhelming.

Um Figma's design system sync does not work very well.

You can sync your design system with Figma make and all of a sudden it's applying like your error states to absolutely everything. Which is weird

absolutely everything. Which is weird cuz you would think that Figma's make would be able to recognize that it's an error state cuz the variant is named error, but it doesn't. It

doesn't work very well. And their

general AI just produces really generic results. You can get way better results

results. You can get way better results in Codex and Claude code and Claude design and Google Stitch as well. So,

they've got some work to do there. But,

for today, these are the tools that we're going to go over. We're going to go over Claude. We're going to go over Codex. We're going to go over where

Codex. We're going to go over where Figma comes into play. We're going to go over Google Stitch, as well. A lot of these concepts I might have covered in other videos as well, but hoping this sort of the one-stop shop uh for

everyone. Everything else besides these

everyone. Everything else besides these tools here, as of right now, it's just noise. There's a lot of startups trying

noise. There's a lot of startups trying to enter the AI design space, but nothing that really comes close to what's here or where I've found value like baking it into my workflow. So,

just something that you should be aware of. To make the most of this course,

of. To make the most of this course, this video, is download Codex, download or have an account with Claude.

Preferably, you have the desktop app.

And also make sure you have a Google account so you can follow along with us with Google Stitch as well and try out all these tools. I'll put links for these in the description. You're going

to see that Claude and Codex very similar. Codex is essentially OpenAI's

similar. Codex is essentially OpenAI's answer to Claude code.

But, both can produce really good designs. There are some key fundamental

designs. There are some key fundamental differences that you need to be aware of. First off, Claude is the better

of. First off, Claude is the better code.

If you're working with developers, they're going to want to use Claude code, they're not going to want to use Codex. I've chatted with one developer

Codex. I've chatted with one developer who was a designer was using Codex, and then when the designer gave them the designs, they had to redo a lot of it inside of Claude code. So, it's not like

a one-to-one, both produce the exact same code.

However, Codex uses about three to four times fewer tokens for the same work as Claude.

What this means is that if we're designing with AI and iterating, Codex might be the better option cuz it allows us to go a little bit farther with the

tokens that we have available.

If you're on a Claude paid plan, especially that base pro plan, you're going to realize that even though you're paying for it, you're often going to run out of tokens, especially as you're working with larger, more complex

designs. Something you should know

designs. Something you should know about.

Claude is, however, is more accurate with using Figma attributes when pushed to Figma. Sorry, the wording here is a

to Figma. Sorry, the wording here is a little bit off. But, what I mean by that is if I'm working with a design inside of Claude, and I have my Figma skills, Figma MCP connected, which we're going

to get to a little bit later, and I push it to Figma, it's generally a little bit better about using auto layout, using the responsiveness properties like fill, hug,

than Codex.

Others might experience it a little bit differently, but it's just something that I've noticed. Then lastly, Claude is getting more expensive. I heard

rumblings online of them thinking about removing or planning on removing their $20 a month plan and making it minimum a little bit more expensive. So, just

something that you should keep an eye on. Before we design, I want to do some

on. Before we design, I want to do some setup. Now, this is more foundational.

setup. Now, this is more foundational.

I've covered it a lot in other videos.

So, you've If you've already done this, you can skip it. Which is connecting Figma MCP and Figma skills. Now, they

are not the same thing in theory.

Is Figma MCP is about giving AI access to your actual design files, the ability to read the design files, understand what's going on. A thing that MCP isn't

connected, the AI can't read anything about your Figma files.

But Figma skills are more on teaching the AI how to use Figma.

If you use Figma MCP, you can still do a lot of things that you want to do inside Figma.

Um build designs.

But Figma skills teach the AI how to apply variables, how to use components, how to better use the Figma

canvas. Now, luckily for us, we're going

canvas. Now, luckily for us, we're going to walk through how to install Figma MCP and Figma skills on both Codex and also in Claude. We are on the Figma community

in Claude. We are on the Figma community skills site. I'll put a link for this in

skills site. I'll put a link for this in the video description. So, these are all the skills that Figma promotes. Now, we

can create our own skills for specific purposes unique to us inside of Claude or Codex. We'll look at that a little

or Codex. We'll look at that a little bit later.

But there's certain skills that we're going to want to install just for us designers. And it's important to note as

designers. And it's important to note as well that some of these skills they're more focused on developers, so they don't necessarily apply to us. But we're

going to focus on the ones that apply most to us today.

Right away, we need this required skill, this Figma use skill. If we don't have this installed, the other skills won't work as well.

So, what we want to do is we want to download this from GitHub. And if we hit this MCP server guide, we want to download the zip entirely.

The reason being, sorry if I just go back here. Oops, what did I click that?

back here. Oops, what did I click that?

Sorry. Um is on the left-hand side, we have all these skills that go into this larger skill. So, we want to install

larger skill. So, we want to install them in bulk. That said though, there's other skills that we're interested in that aren't bundled in this Figma use skill. Because these skills are already

skill. Because these skills are already bundled inside of this.

Now, the other ones that we're going to want to apply, but I find a lot of value in, are the supply design system skill.

So, say we have existing Figma designs.

What we can do is we can call this scale and connect those designs to our existing design system.

I don't use it a ton, but I know a lot of designers who have found value in this one right here. So, we're going to go ahead and install this. Now, for

this, what we just want here is we just want the skill.md. So, we can come in here and just choose to download that.

And probably my favorite skill out of all of these is this audit design system skill. The output that I get from

skill. The output that I get from running this is great. Because what it does is it audits designs that I already have and checks to see where that design system is not applied, where it's

applying the wrong component, the wrong variable, the wrong style, where those variable styles or components aren't being used at all. And then it will fix it based on that. It's my favorite skill that they offer. So, again, it's just the skill.md that we're really

the skill.md that we're really interested in here. Let's go ahead and download that and let's open up Claude.

Here we are in Claude. In in Claude on the left-hand side, you're going to see like a customize button. Uh so, just hit customize. You're going to navigate to a

customize. You're going to navigate to a page like this.

So, the way in which we install things is different on Claude than it was Codex.

Let's start off by installing our Figma U skills. So, I want to show you

U skills. So, I want to show you something here. It's where a lot of

something here. It's where a lot of designers tend to get tripped up.

Is we want to bulk upload that zip file cuz it contains all of those sub skills.

So, let's choose to uh go ahead and upload a plugin and let's just drag in that first zip file that we had downloaded. So, the MCP server guide zip

downloaded. So, the MCP server guide zip file. So, let's go ahead, upload that.

file. So, let's go ahead, upload that.

So, I can see the plugin is installed and ready to use. So, if we click in here, you can see that the plugin that includes the Figma MCP server and skills for common workflows.

This is where it's not super clear.

Because we have all of those skills, but under connectors, we're technically not connected to Figma yet.

So, despite the fact that it says includes the Figma MCP servers, we still need to initiate that connection.

So, under connectors, let's just choose to install, and then just choose to connect.

And what that's going to do is going to open up Figma in the browser. So, just sign in to Figma there, uh and go ahead and connect. Sorry, I'm

trying to do it offline here, but it's being a little bit slow. So, I'm just going to pause the video here. It

finally loaded inside of my browser, so I just hit agree and allow access, and I can see now now that Figma MCP is installed. So, it's important to note

installed. So, it's important to note here, just by uploading uh that zip file, even though it says includes the Figma MCP servers, you still need to connect it. The alternative way that you

connect it. The alternative way that you can do it is if you don't want the Figma skills, it's just under connectors, you can choose to browse connectors, and then just search Figma. And again, it's this one right here uh that we're

interested in, and then we have already installed it, so all is well.

Beautiful. Now those are installed. Here

we are inside of Codex.

This is where things can kind of get a little bit weird because people experience things differently, and I don't know why.

Like as of yesterday, I was able to have this Figma plugin installed, which consists of all these different skills.

I just chatted with someone who was on a personal plan, just like me, and they're able to install the Figma plugin.

So, you might there's there's I don't know what's going on. Put it that way.

But, the Figma plugin here actually has all of the skills that we had installed in that Figma U skill. So, we didn't need to download

the item from GitHub, upload it. It's

all wrapped inside of this one skill.

I'm hearing mumblings where this is only going to be available to workspace users, so maybe that's just slowly getting rolled out.

I don't know.

But there's a workaround here. Where

under skills, again, just at the top here, and if you search Figma, you just go ahead and install all of those same skills.

So, starting off with that Figma MCP, uh that Sigma code connects, Sigma create design systems rule, so all of those sub skills that were in that zip file that we had installed a little bit

earlier.

They're now installed for us and ready to rock. So, a little bit of a different

to rock. So, a little bit of a different workflow.

You know, I'm seeing different thing people different people experiencing different things. Some skills are

different things. Some skills are available, some skills are not available. Sometimes that plugin is

available. Sometimes that plugin is available, sometimes that plugin is not available for users who are just on a personal plan like myself. Just

something to be aware of sometimes.

Um yeah, I know it can be confusing. One

thing real quick, Codex finally got his act together and allowed me to install this Figma plugin, so I had installed it. In terms of basic setup, that's kind

it. In terms of basic setup, that's kind of it. We have those, you know, Claude,

of it. We have those, you know, Claude, Codex, whatever installed. We're using

it, we're signed up. We have Figma MCP connected. We have those Figma Figma

connected. We have those Figma Figma skills also installed. Let's go through the tools now, how they work, how to make the most of them. I want to start off with Google Stitch

for a couple reasons. One, because

Google Stitch we can't train it on our on our design system the the way that we would expect. We can't paste in a Figma

would expect. We can't paste in a Figma file here and build skills around our design system. That's a big limitation to

system. That's a big limitation to Stitch as of right now. I'm sure they're going to change it in the future, but as of right now that is not existing functionality.

The other reason why I want to start with Google Stitch is cuz it's most different.

It's way different than Claude design, it's way different than generating designs with Claude code or Codex.

I want to show you what I mean.

One thing I want to do here is we're just going to start off with Thinking With 3.1 Pro cuz it's not going to be as quick, but it's get better quality with it. So, we're going to start with

it. So, we're going to start with thinking with 3.1 Pro. And let's build a financial app. Because my background is

financial app. Because my background is in financial technology. So, what

desktop web experience should we start with? And one thing I want to call out

with? And one thing I want to call out here is Google Stitches web designs are never really that good. The app

designs usually way better.

What I want to do is let's just say run it again. My background is a financial

it again. My background is a financial technology. So, uh builds a financial

technology. So, uh builds a financial uh management app for financial advisors. Let's just run that. This

advisors. Let's just run that. This

here, great result. And this took about 30 seconds to generate.

So, pretty quick. Now, there's still issues with it. It's not like something I can take right away and be like, "Yeah, sending this to developer. Done."

But this is really good for iteration.

I need to get some layout inspiration fast based on an app that I'm trying to build. Of course, beef up the prompt a

build. Of course, beef up the prompt a little bit.

But this allows me to sort of get an idea of the structure down, the types of data that I should display.

How I should structure my bottom nav.

And again, some of this stuff looks AI generated. This is clearly an AI

generated. This is clearly an AI generated widget.

But that's okay. It's going to get better.

I can see So, we have our client list, the client profile, advisor dashboard, rebalancing tool.

This gives me enough to get started with and start having meaningful conversations with others on my team around what it is we're going going to want to display on each page. Want to

show you something here is I ran the exact same prompt, but shows for a desktop. And this is what it gave me.

desktop. And this is what it gave me.

The result is way worse. Way worse.

So, whenever it comes to working with Google Stitches, you are going to get way better results working with mobile designs than you are on desktop. Like this here, Super Junior

on desktop. Like this here, Super Junior feels super AI generated, not great. But

that's not to say that Stitch can't give you good results.

A lot of times the base prompts that it might give you as examples will give you really good results. And sometimes even the prompts that you run give you results that look like this

where it's clean, it looks good.

It has polished to it.

So, Stitch is because it's still in beta, you never get accurate results all the time. Sometimes it's hit or

miss.

Sometimes the result is not good at all.

Going back to the mobile version though, is Stitch is really good for just basic iteration. Like this market overview

iteration. Like this market overview page, this advisor dashboard. Maybe I

want additional variations. I can come in here under generate, select variations, select the number of variations I want, specify creative range like more refining, exploring, or

reimagining completely. So, let's just

reimagining completely. So, let's just explore some different versions here.

Choose what it is we want to vary. So,

maybe just layouts. And now we can choose to generate different variations based on specific screens, specific elements. Or off to the right here, what

elements. Or off to the right here, what it's going to do it's going to generate those variations. There we go. You can

those variations. There we go. You can

see that they're they're generating here. But ta-da! Stitch glitched out

here. But ta-da! Stitch glitched out while it was generating those two designs, so I just had to generate it again. This time with three. And this is

again. This time with three. And this is what it came back with. So, just some different layouts here. Where this one's got that bar graph. And again, sure some of the bars are hard to see here. You

know, active client pulse, priority alerts. Whereas this version is a little

alerts. Whereas this version is a little bit different where you have those big metric cards right at the top. Then you

move into an itinerary, what they need to focus on today.

And this one's even a little bit more different where you have that AUM like their assets under management like a big and bold at the top with other metrics.

Then you get into your growth.

But as you can see, like these aren't production-level designs.

I wouldn't take these and show it to a client. I wouldn't take these and say,

client. I wouldn't take these and say, "Developer, build this out for me."

But where is it I'm using Google Stitch right now? Where is it I'm using Stitch?

right now? Where is it I'm using Stitch?

For fast generation, for very, very early stage concepts without burning tokens. I'm not looking for polished

tokens. I'm not looking for polished designs. I'm looking for types of

designs. I'm looking for types of widgets, types of data that we might want to display, to sort of have some of these more early conversations on what's important with internal stakeholders.

I'm only going to bring Claude and Codex and Claude design into the equation once I know absolutely for sure. So I got a couple options here. Either I can burn a

ton of tokens and a ton of time generating these polished first drafts inside of Claude and Codex.

Or I can use Stitch because it's basically free to spin up a bunch of different variations of things, of ways data can be displayed and data points we want to

show and types of widgets to chat with again, just internal stakeholders. I

wouldn't show this to a client or anyone external on what really speaks to them, the types of data that they like, how they like data to be displayed. Cuz it's going to

better inform what I'm either able to one, then reproduce in Figma or two, build out in Claude code and Codex

without having to go through the level of variation we did in Stitch, which is going to burn a million and two tokens inside of the other tools. And hopefully

you can see that Stitch is designer-friendly. You know, we can move

designer-friendly. You know, we can move things around, we can preview things, we can choose to mod modify things, we can, you know, generate those variations and regenerate designs. We can generate a

regenerate designs. We can generate a desktop web version based on that. We

can even tweak like the design system here, too. We can adjust the color

here, too. We can adjust the color palette.

But again, it doesn't produce those production level designs that I just talked about.

But what's the other key tool in the AI space that's really tailored to designers? That's Claude Design. It's

designers? That's Claude Design. It's

going to be a nice segue into sort of the Claude Codex space. Here we are on Claude Design.

And I want to because Claude Design and Stitch, they're the design-focused AI tools. The real popular ones that are

AI tools. The real popular ones that are out there.

And I want to showcase the different quality that you get on Claude Design versus what you get on Stitch.

So here we are on Claude Design. I'll

put a link for this in the video description. Let's just create a new

description. Let's just create a new project and not select any particular design system. Just call it high

design system. Just call it high fidelity. Just make it a high fidelity,

fidelity. Just make it a high fidelity, not a wireframe. Sorry. Um so let's just call it uh AI demo.

Let's create this.

And let's go ahead and build a prompt now. Let's run the exact same prompt as

now. Let's run the exact same prompt as we did in Google Stitch. Build me Oh, forgot my please. Please build me me a financial management app for

financial advisors. Again, not the best prompt in

advisors. Again, not the best prompt in the world.

Uh not a really good prompt at all, but still the same.

Let's run. And we get some questions, and this is nice because with Google Stitch, it just like basically went ahead and did things, but Claude Design wants to know a little bit more detail. It's going to

help us produce a more polished version the very first time.

So, who's the primary user? Let's go uh financial planner.

Uh which workflows matter most? So I can select Let's go performance reporting.

Uh select a couple of these and portfolio dashboard. Which screen should

portfolio dashboard. Which screen should be the hero?

Advisor home, platform. Let's just go desktop.

Let's go aesthetic direction. Have it

decide for me. Information density,

again decide for me. All these other ones, let's just select decide for me.

But you can see the level of detail that it's asking us to try to get the best result the very first time.

So, decide for me and then decide for me. Let's run this. You can see that it

me. Let's run this. You can see that it came up with a list of to-do's, but I'm already on minute six. It doesn't look like any of these are actually built yet.

So, you can see already how a stitch the results came back after like 15 seconds, not even sometimes.

But with Claude design, there's a lot of waiting involved, which we're looking for fast variations and iterations, just exploring certain concepts, what data

could go where, what data might resonate with an internal stakeholder.

Claude design really slows down a lot of that fast iteration we want to do in those early stages. I know what you're thinking.

But Kirk, I have all the time in the world. So, if Claude design gives me a

world. So, if Claude design gives me a better result first try to share with stakeholders, I'm only going to use Claude design.

Let's pause for a sec because the usage of Claude design is limited in this early stage and it is going to get expensive. Claude code is an

get expensive. Claude code is an expensive tool.

I believe I've said it before, I'll say it again. I believe it was Uber, they

it again. I believe it was Uber, they ran out of their AI development budgets in like three to four months that they had set for the year.

Now, unless you're working at a company like Apple or Google where your budget, I don't want to say is infinite, then chances are the way in which you can leverage a tool like Claude design

once they pile on the features, pile on like included in all the plans and everything like that and start charging for it a lot more than they are now.

The cost is going to add up. So, you

need to be really strategic around where you're going to be using your tokens. And the results here

your tokens. And the results here is way better. Look at this. This is

like senior level design.

It looks clean. The font is nice. The

different font treatments here, how this is like normal font, not indented. This

is slightly different color. It's

indented. And or not indented, sorry.

Italicized.

Um we have this interactive graph. We

have this allocation. We have this book of business. We have today's agenda.

of business. We have today's agenda.

It's all interactive, or at least some of it is.

This is great.

You know, like you can show this to a client and be like, "We spun this up."

And they wouldn't bat an eye.

Whereas with the Stitch example, they would bat an eye. Despite the fact how good this looks, there's an issue.

Is it only built the dashboard. It

didn't build any of the other pages.

Now, you might be thinking, "Let's just have it build those pages now." But

today is a currently Wednesday. You can

see that my usage resets in Claude design on Tuesday. I did not use Claude design yesterday. So, that one dashboard

design yesterday. So, that one dashboard took me 8% through my usage.

So, you can see how easy it is to use up what you're available to use in Claude design. So, if we're inefficient in the

design. So, if we're inefficient in the way in which we start to start with Claude design for a lot of that iteration, by the time we get feedback from our stakeholders, all

of a sudden we have to wait in order to re-prompt inside Claude design. So, what

you're doing is you're using Stitch to inform your prompt for Claude design.

Because with Google Stitch, what's your objective? Mid-fi wireframing, as we

objective? Mid-fi wireframing, as we saw. It's not hi-fi, it's not low-fi,

saw. It's not hi-fi, it's not low-fi, with just basic shapes. It's somewhere

in between.

To align on metrics, align on potential formats, align on charts.

And then when you move into claw design, which is more of that super high-fi wireframing, it's, "Hey claw, here is the specific data that we want on the dashboard.

Here's the format that this should be in. We want our metrics along the top in

in. We want our metrics along the top in four cards. These are the specific

four cards. These are the specific metrics cuz I aligned on these with my stakeholder after reviewing what Google Stitch gave us.

Below that, we are going to have a performance chart, and it's going to be a line chart chart, not a bar chart, and here is why. Ultimately, your goal is just to reduce the number of edits you need in claw design. The closer you can

get to it first try and claw design, the better. But you can't do it if you

better. But you can't do it if you haven't had those good convos with internal stakeholders around what they like, the data, what data should be displayed where, and that's where

Google Stitch comes in.

Having better early stage convos at a much faster rate. Another thing that's not great about claw design, despite it's not very efficient, I guess,

is it doesn't feel like a design tool.

So, I'm going to have it actually build another variation. Build

another variation. Build me another variation. Or actually, let's say, uh

variation. Or actually, let's say, uh build the book page in instead. Build the book page instead.

instead. Build the book page instead.

Uh then lay out the designs side by side so I can view them.

So, build the book page instead. So,

we're referring to this page right here because we only really have our dashboard. Uh then lay out the designs

dashboard. Uh then lay out the designs side by side so I can view them. Let's

run. And now this is what it came back with. So, now we have that book of

with. So, now we have that book of business. So, we have that book page.

business. So, we have that book page.

And again, looks pretty good. We have

our filters here on the side. We have

these this great metrics treatment at the top. We have a list of everyone

the top. We have a list of everyone who's in like our financial advisor book. I think it looks pretty good. And

book. I think it looks pretty good. And

now what's nice is because I told it I want to view things side by side, we can kind of view it like a canvas. But

what's the issue here?

I can't really like you know, I can move things around, but I can't modify Ooh, look, these are these are interactive, too. That's nice.

Um built those out right away. But I

can't move things side to side. Like I

can like that scroll effect works. Oop,

we got a Ah, what's going on there?

Delete that. Um but I can't rearrange things like I would on Figma. It's very,

very static. I'm sorry, it's still running and changing things as I go.

And if I wanted to make tweaks here, what I would need to do is I can just choose to select items and edit it, or I would have to leave comments about change this, change this, just leave that as a comment, you know, um

different treatments, different treatments, and things like that. It's

all very Claude has to do it manually. It's not

something that we can just move around or make those tweaks on the fly, especially for those larger layout changes. And now, after that second

changes. And now, after that second prompt, we're now at 15% used of our Claude design usage, which resets next week.

So, you can imagine how frustrating it would be if you ran out of Claude design tokens when you're in the middle of like a design sprint. Not fun. One thing I

did forget to call out here is there is the ability to hand this off to Claude code. We're going to get to Claude code

code. We're going to get to Claude code in just a second. We're not going to use the designs here remove to Claude code, but something I did just want to call out that I forgot to highlight here.

Everything else within Claude design, relatively straightforward stuff. There's nothing

straightforward stuff. There's nothing out of the ordinary that would stop you from using this effectively. In order to hand off to Claude code, just hit hand off to Claude code, copy this command, and then go inside to Claude code, and

just paste that in a new chat. We're now

familiar with Stitch and Claude design, limitations, and where they're used, generally used.

I want to show you the different outputs with Claude code and Codex then. So,

remove Claude design and like the design more design-focused tools. And just

inside Claude code and Codex, let's run the exact same prompt we've been working with. It's not just about comparing

with. It's not just about comparing outputs, but your AI workflow might change as part of it. Once we look at tokens and how long things take when compared against both of them. So, we're

going to go through a little experiment as well. All right. Now, it's funny

as well. All right. Now, it's funny because everything we're just about to go through, I actually am re-filming it after I filmed it because I realized that I ran Claude on extra high, but I

ran Codex just on high. So, there might have been a little bit of a discrepancy there, um, just because after a bunch of research 2 days ago, extra high and extra high on Claude and Codex, the

exact same things, even though Claude has a max plan. All right. So, anyways,

it's besides the point. What we're going to do is we're going to reuse that same prompt that we've been running with. And

I want to build a financial management app because I want to showcase sort of the outputs on Codex and also Claude and to compare how long things take, and also how many tokens are used. So, let's

go ahead and just run this. This is what we got back, pretty half-decent looking, uh, dashboard, all things considered.

Um, so what I want to do now is I'm going to choose to push this to Figma. What I chose to do here is I just

Figma. What I chose to do here is I just chose to push it to Figma. Now, one

thing is important to note is you don't need to push everything to Figma in order to bring it into Codex.

And especially for those more technical, I know there's other ways to do things, you know, get repo, bring it into Codex, but this is the flow that designers are generally most comfortable with. So, that's what

I'm going with for now because even with Claude code, we might want to push it to Figma, make changes in Figma, and then bring it into Codex. That's another big part of a designer's workflow. It's not

about always going straight from Claude code or right into Codex and then a right back into Claude code. We

generally have that Figma step in between, make tweaks, move things around on our own. And then when we're ready, we might pull it either way. While

that's being pushed to Figma inside Claude, I'm I'm going to hop into Codex here and run the exact same prompt we ran before.

Uh so let's go ahead and let's run this.

This is what Codex came back with.

I know what you're thinking. This is

horrible. You're not wrong. It's not

great.

It's because for designs out of the box, Codex is not your best option.

Claude is. You can see the design that Claude produced compared to this, night and day difference.

But that doesn't mean that we shouldn't use Codex as part of our AI workflow.

I'm going to elaborate on this. But what

I want to do now is with the design that Claude had pushed to Figma, I'm going to bring that into Codex. And

you're going to see why. And this is here is what Claude gave us inside Figma. It looks pretty good. There's a

Figma. It looks pretty good. There's a

there's some small responsiveness things that I noticed, but that's totally fine.

What I'm going to do, I'm going to copy a link to this section and then let's go and go back to Codex. Inside Codex, I'm going to paste the link to that Figma file. Please build this

file. Please build this uh locally. And we're going to have

uh locally. And we're going to have Codex build what Claude had. So let's

run. All right. This is what Codex came back with.

What I want to do now is I want to make the same changes on Codex and on Claude and compare how long those changes take.

And also how many tokens that those changes burn.

So what are some larger and smaller changes? One,

changes? One, maybe we can swap this from dark mode to light mode.

Maybe we want to make top households have a search bar and make it full width. So some larger changes that come into play.

What we're going to do, we're going to as I mentioned, we're going to Codex, run that, and then go to Claude and run those same instructions. Inside Codex

then, running this prompt, make the following changes: change it to light mode, add a search bar to top households, make top households full width, and swap positions of AUM and households. So, I

decided to just swap these two cards along the top, another smaller change.

So, let's copy this, and then let's So, first off, let's run this.

There we go. Now, let's copy this, and let's do the same in Claude. Back inside

Claude then, let's run the exact same thing. So, we can see that it did its

thing. So, we can see that it did its job versus the old version versus the new version, where it swapped households and AUM. Here, this version, we have

and AUM. Here, this version, we have this full width, we have the search bar, whereas on the older version, we did not. And those changes have been made in

not. And those changes have been made in Claude as well. One thing I'd like to call out is the styling is different on Claude than Codex, but it's not Codex's fault, because when the design was

pushed from Claude into Figma, it lost some of the good text treatment. So,

that's why on Codex, how it looks a little bit plain, Codex actually did a really good job taking exactly what was in Figma and bringing it into Codex, but things like styling just got lost in the Figma translation. One thing I'd like to

Figma translation. One thing I'd like to call out is right after I started filming some of these things, I realized I forgot to take screenshots or showcase what the context window was before and after. So,

instead of having to like get my recording started, which takes like a couple seconds, I just screenshotted right away, just so it was fully honest what those tokens were that they started with. All right. Um but, the time it

with. All right. Um but, the time it take it took to make those changes in Claude was 12 minutes with 38,000 tokens used.

The time it took in Codex to make those changes was 4 minutes with 17,000 tokens used.

There's a lesson in this, and one of the reasons why I'm not showing like how or talking about how many tokens it took to do everything so far, is because Claude had to build a design from

scratch, but Codex just brought in a design from Figma. So, there's a little bit of a different workflow, so you can't compare it apples to apples in that sense. So,

that sense. So, this is the results from that little experiment that we ran through. Clearly,

Codex is a little bit more efficient in terms of time and also for tokens. And

as I said, there's a lesson in this.

Whereas, if you want to maintain the best use of your time and tokens, it might make sense to generate your initial designs in Claude, whether it's Claude design, Claude code, whatever it is. Again, if

you're doing it in Claude design, you're going to need to bring it in to Claude code, um in order to push it to Figma.

Then, from Claude code, push it to Figma.

Once it's in Figma, pull it from Figma into Codex, where you can iterate in Codex. You can add different things,

Codex. You can add different things, move things around, make tweaks, like when add a badge here, remove this badge, move this down, swap these elements. And then, when you're happy

elements. And then, when you're happy with it, push it to Figma, and then bring it back into Claude when you're ready to make your developers happy and

to do any, you know, larger exploration.

It doesn't make sense to always make small changes in Codex.

You're going to need to decide when it makes sense to do something in Claude versus do something in Codex. Because it

takes effort to either download the entire file, bring it into Codex, or push to Figma, and then bring it into Codex from Figma.

You know, it's it takes a lot of effort, and if especially if you're going down the Figma route, it takes a lot of tokens.

So, if you need to just change one color and move two things around, maybe it just does make sense to do it in Claude.

But, if you have a full application in Claude code, then maybe it does make sense to bring things into Codex, because you can make a lot of those larger changes. Like, if you

have to spend a couple days making a bunch of changes, yeah, then sure, it makes sense to do it in Codex versus Claude. But, one or two small things,

Claude. But, one or two small things, you know, you don't always need to bring it into Codex. Right now, we're at a point where we understand some of the key tools in the AI design space right now. What that workflow could look like

now. What that workflow could look like depending where you are in your design journey.

But I want to talk about design system consistency and how our design systems work with these AI tools and how can we get a really good results

using AI when building designs, but still keeping it on brand with our design system and the guidelines that our organization sets. I want to start off in Claude design

because this is getting all the hype and I see a lot of clickbait around this.

So, I want to clear some things up. Now,

one thing I'd like to call out just as a fun fact, I have been filming everything you've seen so far for 7 hours because I had to do retakes, all this stuff. It takes a

long time. And in case you want a sneak

long time. And in case you want a sneak preview into my life behind the scenes.

Um so, and also too, planning things. I'll

like plan the video then I realize I should have done it a little bit differently or explain things differently. Takes a long time. So,

differently. Takes a long time. So,

here just under design systems. We already have this design system in here, but I'm going to choose to create a new one.

I'm going to create a design system and what I did offline is I downloaded a copy of one of the design systems that that's a part of our academy. Again,

link in the in the description. I'm just

going to drag that in. It's a real simple design system. There's nothing

crazy about it. There's not these big insane UI layouts and these super uber complex components with crazy blur. It's

relatively simple design system.

So, I'm going to choose to attach all the pages and frames and I can see that that's attached. Let's continue to the

that's attached. Let's continue to the generation now.

And let's of course choose to generate.

Forgot that was going to be a step. It

came back with everything in the design system for us to preview. Say Say it looks good, say

to preview. Say Say it looks good, say whether it needs work.

This has gotten way better in the last 2 and 1/2 weeks or 3 weeks since whatever Claude design was launched.

But there's still fundamental issues with it not capturing everything.

Let's go into buttons as an example.

Now, I know this design system really well cuz I built it.

We don't use ghost. Oops, sorry. We

don't use ghost as variant name. We don't use danger.

variant name. We don't use danger.

We're missing variants here.

So, it appears as if there's still Again, this is still better than what it gave me like 2 weeks ago.

But it appears it's still missing things and it's not capturing everything inside of that design system.

And another example here is we go up to our type scale.

I don't have a display in this design system. I have a hero.

system. I have a hero.

Where's our heading three?

We just have heading two, heading four.

What about heading five, heading six?

What about our body large, body and body medium?

It's missing some of the most fundamental elements of the design system.

Because some of these I care less about and we're still missing a lot of components. Like this is not the extent

components. Like this is not the extent of all the components that are in that design system.

But I care less about avatars which also aren't correct.

I care more about form fields which look pretty good. Sure, we're missing some

pretty good. Sure, we're missing some variants, but that's fine.

I care most about buttons. Again, these

all look pretty looking pretty good.

Still missing some variants. And I care most about our type.

So, if I was Claude or Anthropic, I would focus most on the fundamentals and make sure that those are built properly.

Now, one thing that's important to note here is I can say this looks good or I can say what needs work. And I can describe what I prefer what they got wrong.

But I don't want to have to go through and do that for everything here.

Doing that alone, we already know how slow Claude is. Do we really have 12 hours to burn and all of our Claude design credits to go through and polish our design system?

So just because you can import your design system in theory, you can, but it doesn't mean it's ready to produce these Claude

design high-quality UIs with. It's just not there yet. And

UIs with. It's just not there yet. And

something you might get from your team, and it's something I know that some of our community members have also got from their team, are is their bosses being like, "Just import the design system to Claude design. I don't know what the big deal

design. I don't know what the big deal is."

is." If you ever get that, just send them this part of the video or recreate the demo in on its own where you upload your design system and show them the flaws. A

lot of higher-level design leadership exacts, they're just going off the headlines. They're going off the

headlines. They're going off the clickbait because they've never actually tried it themselves. So even though your boss might be telling you, "Just import the design system to Claude design."

it's important for them to understand that it does not work as intended. All

that's just it's not just to say that AI can't do anything relating to your design system entirely.

But what I'm going to show you, I'm going to talk about why it's not the best, is I want to enter a link to just a empty Figma file. It's just called variables test. Please build me type

variables test. Please build me type styles uh H1, H2,

H2, H3, H4, H5, H6, uh P1, paragraph one, paragraph medium, I spelled paragraph wrong. Paragraph

medium, paragraph large, paragraph small.

Inside of this Figma file, inside of this Figma file, inside each style, there should be

variables. This file

variables. This file file above is empty.

So, you will need to build the variables and styles and styles.

Let's run this. And this is the result.

It looks pretty good. So, we have all of our variables inside of a typography collection. I always like to call this

collection. I always like to call this responsive actually.

Again, some links in the description for responsive collection stuff.

And we have all of our styles on the right-hand side here. It looks like our variables are applied.

This is pretty good.

Now, let's do the same but with our more color-specific variables. Cuz I

want to talk through some things here.

Back inside claw, let's run another prompt. Now, build me a complete Figma

prompt. Now, build me a complete Figma variable library.

I spelled variable wrong. Come on. Oh,

it doesn't even come up. Variable

library. There we go. Let me move my video bar out of the way. Perfect. I got

some space. Now, build me a complete Figma variable library. We will use a Brand, alias, and map collection.

Brand has raw hex codes and groupings.

Alias determines primary, secondary, etc. Error.

Etc. Uh in map has all of the surface text icon and border variables.

Inside uh alias collection there will be a second brand for the second brand within there will be a second mode

for a second brand.

Inside of map is a second mode for dark mode.

Uh uh So, now build me a complete variable library. We use a three-tier approach.

library. We use a three-tier approach.

Brand alias map collection. Brand has

raw hex codes and groupings. Alias

determines primary, secondary, error. In

map has all the surface text icon and border variables. Inside alias

border variables. Inside alias collection will be a second mode for a second brand. Inside of map is a second

second brand. Inside of map is a second mode for dark mode.

And if you don't know what any of these like collections are, again, link in the description for some other videos that goes through that in depth.

Um again, I kind of build design systems for a living, so I know a lot on the topic. But, let's

run this. This is what it came back with. So, we have our map collection to

with. So, we have our map collection to light and dark, our brand collection to all those raw hex codes, our alias collection we defined primary and so on so forth. Brand A, brand B as modes.

so forth. Brand A, brand B as modes.

Again, our map collection, as I said, with light and dark. And this is where all the heart of the action is.

This is one of those scenarios where just because AI can do it doesn't mean you should use AI to do it.

Because one thing I noticed here is there's no disabled button no disabled variable for disabled buttons.

There's no disabled border. We're

missing some pretty key variables as I scrolled through here.

Also, too, at the same time, so you AI gave you this variable library.

Now, what do you have to do? You have to start building some components.

How do you know which variables to apply to which components, which variables you might be missing.

This is one of those things where you're going to spend more time trying to figure out what it is that AI gave you than it would be to learn how to build

your variable library properly, spend 3 hours, and we have complete free videos on YouTube where we go through that.

Spend a couple hours, learn how to build it.

So, you can build it yourself, and then scale that from there.

This is one of those things where just because AI can do it, you're going to spend more time trying to figure out what it is AI gave you, if it's actually right, if it has all the variables that you need. Do all the variables that it

you need. Do all the variables that it gave you work with your brand? Because

maybe you don't need some of these.

And you won't know until you start going through it. And I see a lot of designers

through it. And I see a lot of designers be like, "Oh, I built my variable library with Claude code. Can you tell me what it is that I'm missing?"

I have no idea. I'm not your brand.

Claude is not your brand. They have no idea your brand guidelines, your brand rules, what components you need in your design system. Some brands that will

design system. Some brands that will have way more complex components that require a completely different range of variables.

It's difficult for AI to get this right.

Back inside Claude, let's have it build us a component. Now, I started filming then I realized I actually said build me a complete button variable set

instead of components and variant set uh based on the styles and variables we created. Now, please

build me a complete button component and variant set based on the styles and variables we created. Sorry, but for the sake of authenticity, I make mistakes as I go. Because I still want to have it

I go. Because I still want to have it generate us some components, cuz I still want to talk through some things associated with this. So, let's go ahead and run this. For this part of the lesson is I'm using Claude because it's

more accurate when working with Figma. I

didn't want to use Codex even though it takes less time, takes less tokens, because I know that Codex is going to give us like some iffy results. And I

always don't want to use sort of the less superior tool to try to prove a point. I want to go use Claude cuz I know it's going to give us a really great result to show you what it can do, but still talk about why it's

probably not the best approach to things. So, just wanted to clarify that

things. So, just wanted to clarify that why I'm using Claude for this and not Codex. Buttons are the easiest component

Codex. Buttons are the easiest component of a design system to build, full stop.

They're the easiest. And right now we're at almost at 6 minutes and 5,000 tokens to generate our button component.

This isn't even including any changes that we're going to have to make. And

look, it looks like it just came back and finished. So, 6 minutes and 5.4

and finished. So, 6 minutes and 5.4 thousand tokens. It's a lot of time. It's a lot

tokens. It's a lot of time. It's a lot of tokens for the easiest component.

Let's jump into Figma now. This is what it came back with. So, we have our sort of gave us like this little demo here, which is actually kind of nice. I

do like the thought here.

Where what those buttons look like on light mode, what they look like on dark mode.

I don't know for sure, but I don't know if some of these would pass our color contrast ratios right away. This one

absolutely wouldn't. So, that would be something that we would need to fix.

Now, another thing right off the bat is in the button component, so we have like our primary, secondary, tertiary, and then our then our error.

They went ahead and built us a went ahead and built us a disabled button, which they'd also gave us some disabled variables, which it missed originally, which is good.

But, in our variables here, let's go in.

We have a secondary variable set. We

have a success warning variable set.

It gave us those examples here.

Why aren't they in the button component?

So, we just spent 6 minutes and like what was it? Like 5 plus thousand tokens to build this. Now we need some changes.

And that's the hard part with building components with AI. You go through tokens. You go through a ton of time

tokens. You go through a ton of time to not get the result that you're looking for the first time and then you either have to spend time fixing yourself, trying to reverse

engineer what it is that AI gave you or burning through more tokens and more time trying to dialogue with the AI.

And for such a simple component, button component, there are a million and two design systems out there that have button components, that have a link components, button icon components,

fields labels inputs.

Why do we need AI to do this for us?

It is my honest opinion that AI should be used for more complex layouts and models and dialogues and things like that that actually take a lot of time to

build.

Because there's so many free resources and paid resources for 100 bucks, 120 bucks, 50 bucks that offer you all of the components that AI is going

to spend time burning to get your design system up and running. And they're going to come complete with a complete variable set that are actually applied to real components.

So, you're not having to rely on AI to build the variable set, then build the components, then realize that it might have forgot some variables, and then it needs to add more variables, and it's just it's too much back and forth that needs

to happen. You're going to spend more

to happen. You're going to spend more time reverse engineering things than anything else. And I get emails like

anything else. And I get emails like this, like AI gave me these variables, what am I missing?

This proves my point.

Is that if AI just gives you an output, but you don't know the rationale behind the output, how can you expect to succeed in your day-to-day design role when you're applying variables that you

didn't build, when you're using components that you didn't build? So,

you don't know how those variables are structured. You don't know which

structured. You don't know which variables belong where. You don't know how those components were built. So, if

you need to make a change to those components, then you you mess something up. Now, the example that I gave is just

up. Now, the example that I gave is just for buttons, but again, that's just an easy component. There were no atom

easy component. There were no atom components that went inside of that component.

So, you all you have to do is just change the one uh component set and the variants inside. Once you start getting into more

inside. Once you start getting into more complex things like tables, really complex component, graphs, where there's all these different components that are added together to build one larger

component, that's when you're going to run into a lot of issues. Where AI is going to give you something, but you don't know how it's structured and why it's built the way that it was. And I

said this in my last video, I have free videos teaching you how to do a lot of these things. To build a design system, to set up a design system, uh to build a responsive

collection. I have a 3-hour video. And

collection. I have a 3-hour video. And

again, links in the description for these on how to build a design system. 3

hours.

Took me like 15 hours, 12 hours to film.

All right? So, there are resources available for you, so you don't need to rely on AI for all these things. It

might take you 2 to 3 hours, 4 hours, 5 hours. It might take you an entire

hours. It might take you an entire working day.

But, it's going to set you up for success if you know how to do it. You

can build it yourself, and you don't need to rely on AI for some of these things. So, what you should ideally do

things. So, what you should ideally do is start with a design system already.

As I said earlier, there's a million and two templates out there. Some are free, a lot are paid, but it's like they're like 50 bucks, 100 bucks, 150 bucks.

There's some really crazy design systems. They're worth the investment.

Especially if you don't already have a design system, or you have a design system, but you need component references to go off of.

It's easy to plug and play with these systems. You can copy components from one to another, recreate them, reverse engineer them, do whatever you need to do. Don't rely on AI to build your

do. Don't rely on AI to build your simple components. It's a waste of

simple components. It's a waste of tokens, it's a waste of time. Trust me.

Because what I have in this design system, just as an example, again, this is the one that's part of our academy.

I really cover like the fundamental components. Things like your your field

components. Things like your your field and inputs, you know, your drop down, your text area, your checkbox.

It's just all the components that every design system needs and that you need to get started. And you can imagine like it

get started. And you can imagine like it took 5 minutes for to generate just the button components, but it didn't generate all the variants that we actually want. It didn't go through some

actually want. It didn't go through some of that accessibility testing. So, you

can imagine with all the components that you're seeing here on the left-hand side. Sorry, I know my face is probably

side. Sorry, I know my face is probably covering some of them.

That how many tokens and how many how much time it would take to go through and refine for you to not even know if they're built 100% right. So, my

suggestion to you, if you're looking to build a design system from scratch with AI, use your tokens and time to build the larger, more complex widgets, modules, dialogues,

more complex layouts.

Don't spend the time building the easy components. Start with a template of

components. Start with a template of some sort or build them yourself based on the tutorials that we have in the description. When it comes to working

description. When it comes to working with AI on our design system is we need to train AI. It's not as easy as just, "Hey, this is my design system. Build me

these widgets." We need to guarantee that AI knows when to use the variables, the styles, and when to use the components.

So, it's a little bit of a prompting workflow that you need to go through.

So, you need to train AI on your variables and styles first. Sorry, I

should say variables and styles.

Whatever.

And then you need to train it on your components and any related documentation that you have.

Only then can you start to use AI to build a lot of those larger modules, widgets, dialogues, leveraging the components and

variables above because it's going to increase the chance that these here are built the very first time correctly. So,

we don't have to burn through a million in due tokens in 15 minutes to build something that wasn't using what was already in our design system. So there's

a little bit of a prompting workflow that we need to go through. But it's

important that everything here is reusable.

So what AI teaches itself, it can call on that knowledge a little bit later on.

Because every time we build one of these, we don't want to have to revert back to step one, retrain it on our variables and our components and documentation.

This is where custom skills come into play. I'm actually going to have a

play. I'm actually going to have a larger video talking about how to best train AI on our design systems. I don't know if I'm going to release this on YouTube or the academy, but we're going to go into the more technical specifics of things.

But in the meantime, what I suggest you do is again, starting off with training AI on our variables and our styles.

Have some sort of template like this for your variables, where you have the token name or the variable name, its value on light mode, its value on dark mode, and a

description of when it's used.

And this is why it's so important to build your variables yourself, because then you can know explicitly when those variables are used and when those variables are not used. If you ask AI to

do it, AI is going to hallucinate. It

might give wrong use cases to when to use specific variables.

It's not going to be perfect.

So spend a couple hours learn to build your variables correctly. Don't rely on AI to do it. Now,

templates like these, they're everywhere. This again, this is the one

everywhere. This again, this is the one that's part of our academy, but like there's a million and two free templates like that available on Figma community.

Heck, it's super easy to create your own. So I'm not saying like you need to

own. So I'm not saying like you need to use this by any means. It's there

there's ones that are free that are out there.

But again, just a description, what the variable is, the name, its value on light mode, value on dark mode, and when it should be used. Because what we want to do now is just copy a link to this

frame.

And we're going to work with AI to build a skill around these variables and when they're used that AI can reference every time it's building something new. All right,

we're inside Claude. You can do this in Codex too because both have the ability to build skills if you describe the type of skill that you want.

Anyways um let's enter in a link to that uh Figma frame that we copied. Please

study all of the Figma variables uh inside of this table.

Uh after coming to an elite understanding on the variables, their values, their um naming

and when they are used, build a Claude skill

that will help train Claude on when to use different variables for future designs. Please

study all of the Figma variables inside of this table after coming to an elite understanding of the variables, their naming, and when they are used, build a Claude skill that will help train Claude in when to use different variables for future designs. Um

future designs. Um do not uh include any type styles or type specific variables

uh inside of this skill. We're going to that very shortly. Uh

only focus on surface border uh text and icon variables. So, just some guardrails just

variables. So, just some guardrails just so that cuz sometimes it does include type styles in this, but it's best to include sort of another um skill for the type styles. Let's go

ahead and uh run this. This is what it came back with. As I said earlier, I have more content coming. I don't know if it's for YouTube or for the academy on the most ideal way to structure this, but there's still a couple things that

I'm sorting through. I'm teaching you the method for now and things like that.

Now, this is ideal what it actually did here is it gave us back these individual markdown files where it goes through where it sort of grouped everything. So,

we have our border, our icon, our surface, our text, when to use them and what variables are available. And one

thing that's really nice to Oh, perfect.

Had some common pairings here, which is great. Um and what text does not have

great. Um and what text does not have Okay, beautiful. So, you even went in

Okay, beautiful. So, you even went in deep here. So, there's no focus states

deep here. So, there's no focus states on text cuz again, you won't need a focus state on text.

Um and then it has a scale.md where it's sort of like how to choose the four different axes and everything else and giving it a lot of good context and when to essentially reference each of those

markdown files. This is really good. For

markdown files. This is really good. For

a first draft, you know, I've shown it a couple ways in the past where it doesn't go this level of depthness. Is Is that a word? Or this

depthness. Is Is that a word? Or this

doesn't go this in-depth?

Anyways, okay.

So, this is good. And again, going to have more content coming in the right way to structure this.

Um what we're going to do now is we're going to save this scale and let's flip back to Figma. What we want to do now do the same for our type scale. This one's

a little bit different because there's no What word am I looking for?

description on when it should be used because depending on the design that you're going for, you might use an H3, you might use an H2, you might use an H1, you might use

an H1 regular, H1 medium, H1 semi-bold.

So, it's not like your variables where you have explicit rationale as to which should be used where.

If you have that and your brand is that like rigid great awesome but it's pretty rare for that to happen

but what because even though we don't have the descriptions is we still want the AI to know what text styles and variables and things are

available to it because one thing that happens is if you just ask it to generate initial designs as a mock up it might use a size that's like 15 like a font

size for paragraph that's 15 and then when you want to apply your design system to it it never applies the design system to that one style because it's looking for something in

the text styles that matches and when there's no match there it just defaults to not applying anything so we're going to still train it on these text styles and text variables to

let it know what's available to it and what I mean by text variables sorry I wasn't I wasn't clear when I said that is inside of these notice how we have variables applied here so that's sort of

what I'm I'm getting at again I copied a link to that frame so paste it in please study all of the

text styles available inside our design system here

please take note of all the variables applied to the styles and their values on desktop

and mobile after coming to a complete understanding uh

please build a Claude skill which will inform Claude on

which styles are available.

On which styles are available. Please

study all the text styles available inside our design system above.

Above, please take note of all the variables applied to the styles and their values in desktop and mobile.

After coming to a complete understanding, please build a Claude skill which will inform Claude in which styles are available when building uh new designs. Something like that. We

new designs. Something like that. We

could probably clean it up a bit, but let's run. All right, here we go. Rock

let's run. All right, here we go. Rock

and roll. Look what it came back with.

Which is another skill around our text styles. Ooh, it gave us some stuff here,

styles. Ooh, it gave us some stuff here, too. Um

too. Um but looks pretty good. I'm not going to go through it. There's a whole lot for me

through it. There's a whole lot for me to read. I'm going to make the

to read. I'm going to make the assumption it did it right. You should

not do that, though. You should always read through it. So, we're going to go ahead, again, save this skill. Let's

talk about components now. Uh field

description skill must be 1024 characters.

Let's tell Claude it messed up. Okay.

So, I'm going to fix that. It just just needs to be shorter. And then we're going to flip back to Figma to talk about components. Often times what I see

about components. Often times what I see is designers just being like, "Study my components."

components." What happens then is the AI doesn't know where to look. It tries to go in a methodical order, but then all of a sudden if there's atom components on a

page, it's going to analyze the first component, realize there's atom components that needs to study, it's going to jump to the atom component, but then it's going to forget to work its way back to the other component to then continue what it was doing before.

And it's going to miss components because we just sort of gave it a broad instruction with nothing to help guide it. And our goal here is when we say,

it. And our goal here is when we say, "Study my components."

is that it moves through different component groups in a very methodical order and builds skills specific to these component groups. It's going to

help keep the AI more on track when it's reviewing the components and what's available and lead to a better output when we're asking AI to generate designs. I want you to look here on the

designs. I want you to look here on the left-hand side as we have different groups for our components. So, you don't have everything in a one long list.

And the way I've grouped things is I have my form elements with N field input drop down text area checkbox radio button so on and so forth. We have our navigation components. And then we have

navigation components. And then we have our data display components. Things like

tables tags avatars badges.

This is a really easy way of grouping your components. These are sort of like

your components. These are sort of like three broad categories that are kind of all encompassing.

You don't have to use these same categories, but it's a way to approach it and working to train the AI on your design system.

Because when we tell AI what to look at, we're going to be specifying the individual groupings, the form elements, the navigation, the data display. We're not going to be

display. We're not going to be referencing the entire like list of components because it can do that on its own.

But these groupings help keep the AI a little bit more structured. Let's flip

back to Claude. I'm going to paste in the link to that Figma file. I didn't

copy a specific frame, just that Figma file. Please study

file. Please study the following components groupings.

So, form elements, navigation, data display.

Let's fix that.

Do not move to navigation elements unless you have a mastery of form elements.

The same with data display.

Only move on once you have mastered the prior group.

After coming to an elite understanding of all components, build a Claude skill

around which components are available and when to use them. Now, in this design system, I don't have documentation. If

you did have documentation, this would really come in handy, but we just don't have it. So, we're going to ask Claude

have it. So, we're going to ask Claude just to come up around when these should be used, but the components are relatively simple. So, any AI should be

relatively simple. So, any AI should be able to detect when to use a button versus a link. Um after coming to a lead understanding of all components, build a Claude skill around which components are available and when to use them. Inside

of the skill, and what I want is I kind of want to do it how we formatted the way in which we did the variables, where inside the skill, there are different like files talking about the form elements and navigation and data

display. Inside of the skill, have

display. Inside of the skill, have different uh .md files talking about

different uh .md files talking about form elements, navigation, data display more in-depth. It's just a way to

more in-depth. It's just a way to structure information again. We're going

to have content coming out whether for YouTube or the academy on how to better like do this and the right way to do things going like the a deeper level down, but I think this is good for now, so let's run. So, this is what it came back with. Took a little bit of time,

back with. Took a little bit of time, where we have, you know, our skill.md,

and then we have uh individual .md files

on navigation, form elements, and data display talking with the variants that are there. One thing I actually should

are there. One thing I actually should have done is in the original prompt, I should have actually specified to also look at the properties, the variants, but as I took a quick

quick look through, it looked like it picked everything up, but don't make that same mistake just in case. Like,

taught me like after coming to a lead understanding of all components, it should say components, properties, variants, and anything else associated with it, all right? So, something just uh

make sure that you don't make the same mistake as because sometimes it can miss specific variants, but I think this is good for the purpose of this exercise.

Let's go ahead. Let's save this skill and keep moving forward. Inside of just a new Claude code session then, one thing I want to do is I just want to test out those skills. See how it looks.

So, we haven't necessarily we're not building it out in Figma yet. Let's just

build a dashboard.

Please build Actually, let's go with like simple sample pricing page.

Dashboard's too complex.

Please build me a simple pricing widget. Please reference

widget. Please reference the components component and variable component type component type and

variables skills.

Whatever. Something like that. Let's

just run it. It appears that the skills are being applied. The colors look right. Like the style looks right. Sure,

right. Like the style looks right. Sure,

it looks a little bit basic, but that's totally fine. We're going to solve that

totally fine. We're going to solve that a little bit later on. Something I want to touch upon with Codex now, especially if we're designing in Claude code or designing in Codex, what we're about to

chat about sort of applies to the other platform that we might not be using consistently. Based on what we looked at

consistently. Based on what we looked at earlier.

It It might make the most sense from like a token perspective from the efficiency perspective to build something to start in Claude.

It's nice initial first draft. And then

move it to Codex for some of the refinement. Again, a little bit more

refinement. Again, a little bit more efficient on the time and the tokens.

And then when ready, push it to Figma and then bring it back into Claude.

But we have our skills inside of Claude, but not Codex.

So, there's no ability to keep the changes in sync with our design system once we move everything into Codex. And

that's what I want to fix next.

What I did is I just ran this prompt. I need the design system components, variables, and textile skills in separate zip folders complete with all sub folders associated with the those skills. And it just packaged those up for me, so I can go

ahead and download those. And let's go into Codex. What I did is just inside

into Codex. What I did is just inside the Codex chat, I provided those zip files and had it just create the skills for me. So, now there's a match between

for me. So, now there's a match between the skills that are in Codex and the skills that are in in Claude. So if we need to make changes in Claude, they'll follow our design system. And if we need to make those changes in Codex, then

it'll also follow our design system.

It's important to note though that whenever you're modifying something, I always still like to provide the design system file in case it does need to reference it. Just something to call it.

reference it. Just something to call it.

We'll look at that a little bit later.

Now when it comes to generating designs, AI always works better from visuals.

And I want you to pretend as if you're building a kitchen, like you just tell, you know, whoever's building your kitchen, "I want my kitchen to be to be dark."

dark." They might give you this with this sort of look with this type of cabinet.

But you're like, "No, I imagined this."

So take like the same example and apply it to your AI.

Unless the people building your kitchen had a specific visual, there would be no way for them to realize that this is what you wanted in your kitchen. They

were just taking an accurate guess. And

too often we assume that AI is going to make the right call, and we end up burning through tokens, and we take way longer to get the design that we're looking for. And the best way to tell AI

looking for. And the best way to tell AI what we're looking for is to give it those specific examples. And the best place to find those specific examples is Mobbbin. And again, you can take 20% off

Mobbbin. And again, you can take 20% off the annual Mobbbin plan with the link that's in the description. It's

hands-down one of my favorite tools in the design space right now. Where

essentially what it is is just a massive repository of just about every screen, app flow that's out there. So if I'm looking at Wise as an example, like the money transfer app, I can come in here,

see all of their specific screens. I can

break down those screens into specific flows I can see here on the left-hand side. We're able to come in here and get

side. We're able to come in here and get a lot of good inspiration and see how others are doing it. Where, you know, this card example, you know, maybe I like this one. I can save this. I can

copy it. They have a Figma plugin where I can just take these screenshots and upload them right to Figma. It saves me a ton of time when it comes to designing, and especially now with AI.

What it allows me to do is take screenshots of examples that I like, so AI has something to go off of. So, I

found this example uh that I like from this tool Tona. So, what I'm going to do I'm just going to come in here and just going to take a screenshot. Again, you

can download it, too, but I just always take screenshots, and then I can see more like this down below, um which is great because you you want you always want to feed AI multiple different examples. Um so, you can come in here

examples. Um so, you can come in here and take different screenshots of ones that are similar uh at least. But, maybe

I want to use this as inspiration to recreate one of these designs for me now. So, let's flip back to Claude. But,

now. So, let's flip back to Claude. But,

I believe I said it earlier, but with the link that's in the description, you can take 20% off the annual Mobbin plan.

I've gotten to know the Mobbin team pretty well. Um they're a great group,

pretty well. Um they're a great group, so definitely check out definitely consider supporting them and checking out Mobbin if you haven't already. Um

so, what I did here is I just dragged in a copy of the research that we got. It's

going to help us inform Claude code. So,

using the screenshot uh attached or the uh reference example attached along with the

uh variables type styles and component skills skills, please build

Please uh build a page like this.

Uh using our uh design system. And one

thing I forgot to do that you should always do is let me just uh go back to Figma here. Sorry, I know you can't see

Figma here. Sorry, I know you can't see it, where I'm just going to copy a link to that Figma design system just in case it needs to reference it. It's always

best to do. I always do it as best practice. Here is our design

practice. Here is our design uh system uh re- uh file if you need it.

But, all info uh should be encompassed inside uh the Claude skills. Inside the

Claude skills. Again, it's just something that I do. Even though we're not pushing to Figma yet, um it's just something that I do. Do not

push to Figma to Figma yet. Uh simply just uh generate it locally. So, what this is doing is we're

locally. So, what this is doing is we're telling it what skills to reference, so it doesn't miss any. Especially we have a lot of skills, sometimes it might just skip over like a text style skills.

Again, we gave it the design system file. It's just something I do, just

file. It's just something I do, just best practice. And then telling it not

best practice. And then telling it not to push to Figma yet, cuz you want to see the design that it comes up with first, and we can refine it here or in Codex and bring it back here before we

end up pushing to the actual Figma files. Let's go ahead, let's run this.

files. Let's go ahead, let's run this.

One thing I should have also done is to specify that we don't want it a one-to-one to what's here, cuz of course it's somebody else's design.

Um it also too, if you provide more examples, it's going to find some synergies between those examples. Just

something I want to call out. You

shouldn't just provide mobile screenshots and have Claude copy it a one-to-one, because that's that's someone else's design. So, just wanted to call that out while that's generating. We now have an example

generating. We now have an example pretty similar to the one that we wanted.

So, you can see how just by giving AI an example or examples, we're able to get to our results first try, because how difficult would the prompt be to sort of describe what we're looking for

here. What we're looking for here with

here. What we're looking for here with all like like the the arc and this green, you know, dot here and everything. Sort of the layout. It'd be

everything. Sort of the layout. It'd be

one hefty prompt and a whole lot of back and forth to try to get this. But, in

that one prompt by providing an example, we were able to go from zero to 100 relatively quickly. Again, ideally what

relatively quickly. Again, ideally what we would want is for Claude to not produce something one-to-one. But I'm just showing you the

one-to-one. But I'm just showing you the workflow here. So, always be sure to

workflow here. So, always be sure to provide a couple examples so we can find synergies so that your design is more unique. But there's an issue with this.

unique. But there's an issue with this.

On our design system, we don't have buttons that are this round.

So, something was clearly off there.

Where it didn't use Like it said it used the button, but it overrode the corner radius variables on that

button to make it round.

This is an example of what I mean where sometimes you're going to need to make tweaks in Claude.

And if it's just this one tweak, it doesn't make sense to push it into Figma then bring it into Code Codex cuz that's a lot of tokens on its own.

So, instead of focusing on this small item for now, what I might want to do if I was building out the rest of this onboarding, the rest of this application, is get all the other pages

in there first.

And then once I have all the other pages in there, I can take stock of what needs to change. How many items need to change? What is wrong?

And then once I have a list of everything that needs to be changed, I can make the call as to whether it's worth the tokens, worth the time to push everything into Figma, then bring it into Code Codex to make those

iterations, and then push it back to Figma, then bring it into Claude code when I'm ready.

So, just because some one item is off here, does not mean that I need to go into Code Codex and make that change there then push it back.

For smaller changes, it's still okay to work within Claude.

But I think the best use of your time here was to build is to build out as much as you can in Claude code. And if

there's a lot that needs to change instead of smoke is focusing on those some of those smaller items. You can do that in Codex at a cheaper token cost and with less time and then bring back to Claude code when you're ready. I want

to drop some knowledge on you here.

Because believe it or not, Mobin is actually not the only place to spin up inspiration.

Is here we are just in chat GPT.

And I'm just going to configure this here. I'm going to use thinking 5.5.

here. I'm going to use thinking 5.5.

We're not in Codex. We're just in chat GPT.

Something I want to let you know is what I'm going to do is I'm actually going to provide that screenshot here.

Let me drag it in to chat GPT and say, uh, generate me some alternate options

of a screen like, uh, this. Let's run.

And look what we have now.

We have a little bit of a different option.

And a couple of different options at that.

And this is what not a lot of people know is in GPT 5.5 is really good at generating

designs based on even just a prompt or other pieces of info that you give it.

It's really good. And it's fast. It's

included in your chat GPT plan. I've

gotten a lot of value from this so far.

We can change aspect ratios of things.

We can, um, usually just There's usually a Come on.

What's going on here? There's use

There's usually a little like, um, pencil or highlight button where I can highlight specific parts on an image that I want change. Maybe it might just be if I only have one generation, not

multiple. But it's a wicked tool and

multiple. But it's a wicked tool and something not a lot of designers know.

So, what I'm going to do is I'm just going to download this image specifically. Maybe I'm going to have

specifically. Maybe I'm going to have Claude just adjust the initial design so it's not like a one-to-one match. Back

inside Claude code, let's drag in that item that we downloaded from ChatGPT.

Here is another example I like. Can you

tweak the design to match? And let's run. And look what

to match? And let's run. And look what it came back with now. A little bit of a different example. So it's not a

different example. So it's not a one-to-one match to what was there before. Now, some of the coloring is a little bit off. I could

have been a little bit more explicit, but I think that's fine. For the most part, it looks as if it's following our design system relatively to a T, and you know, I can't really complain except with some of the smaller things as well.

But again, now that we have some of these colors, and this color isn't in our design system, something wrong with the button here, some of the radiuses are off as well. Those are things that, you know, if it's worth it to bring it into Codex and make those changes, we

can do that, or we can do it right here inside Claude code. What I want to do now, let me just copy a Figma link, is uh Sorry, here we go. Back in Claude.

Uh we're going to push this to Figma.

Please push this to Figma.

Uh remember uh to follow uh the design system and reference the textiles

variables and components uh rules. So, let's run this. This is

uh rules. So, let's run this. This is

what's in Figma now. Looks really good.

Where we have, you know, our different sections. It looks like our styles and

sections. It looks like our styles and variables are all applied well, which is great.

Um you know, it didn't apply the drop shadow style, but that's just cuz I didn't include it in like one of those skills. Probably didn't know to look

skills. Probably didn't know to look with look for it. But you can see here that it's using some of the raw the the instances of the components. Now,

personally, I would have loved for this to be a radio button label, and not just the radio button, but that's okay. Not

the end of the world. And looks like our items are applied here. Let's see what color it used here. So, it used Okay, so it's surface warning default subtle is the variable it used for this kind of I think it looks pretty good, you know,

and it fixed like the rounded corner that I was that I was showing in um Claud code and it like adjusted it to the actual button with the actual corner radius instead of it being round it's

just a little bit curved. So, I think it looks pretty good for the most part. One

thing that's important to note here is before he were to bring this into Codex.

Say you have a bunch of app screens here, you need to make a bunch of changes and you don't want to do it in Figma, you can bring it into Codex then.

As one thing you want to do is make sure that a lot of the small things are cleaned up. Like the styles are applied,

cleaned up. Like the styles are applied, variables are applied cuz you don't want to do that in Codex if you can just do it right in Figma itself and then bring it into Codex or back to Claud code. So, if you ever have

to push a design to Figma, try to polish it as much as you can in Figma before you bring it back into Claud or back into Codex or you know, back into Claud as I mentioned. So, just something for you to be aware of. Hey, thanks for

watching this one. Really appreciate you being here. Be sure to drop a subscribe.

being here. Be sure to drop a subscribe.

Um going to have a lot more content coming on working with Claud, Codex, AI workflows, and a whole bunch of other things as well. So, be sure to you know, check the channel out, subscribe, check

back in. Uh also be sure to

back in. Uh also be sure to check out our website. Link for that is in the description where I'm sort of teaching everyone about AI workflows, design leadership, and a whole bunch of other things as well. I'm always adding new courses to this, working on a user

testing course right now as we speak.

So, again, that link is just in the description. And yeah, thanks for being

description. And yeah, thanks for being here. Uh be sure to share this video and

here. Uh be sure to share this video and rock and roll. See you at the next one.