YT YouTube2Text

YouTube2Text → Transcripts → Designing With AI: Claude, Codex, Figma | Full Guide

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

by UI Collective · 16,121 words · 2,546 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00Today, we're breaking down the full AI
0:01design workflow from start to finish.
0:03We'll look at the current state of AI
0:04tools in Figma, how to set everything
0:06up, when to use Claude, Codex, Claude
0:08design, Figma, and more, and how to
0:10combine them without wasting time or
0:11burning through tokens. We'll also cover
0:13how to train AI in your design system,
0:15generate original screens, improve the
0:16quality of AI outputs, and build a
0:18workflow that actually feels usable for
0:20real product design work. Before we
0:22begin, couple quick things. If you're a
0:23big fan of myself and what we're doing,
0:25consider checking out UI Collective
0:26Academy. Again, this is all just on our
0:27website, link in the description, where
0:28you get access to a bunch of great
0:29courses on AI, design systems, and more.
0:32Private Slack channel access with me and
0:33the team. I'm always releasing new
0:35content on this as well. Or if you don't
0:37want to support the academy, it's
0:38totally free to join the community. You
0:39can come ask any question for free on
0:40our forum. Also get access to great
0:42savings and resources, too. So, whether
0:44you want to join the community or
0:45support the academy, all this is just on
0:46our website. Thanks for being here.
0:48Also, come follow me on X. Link to my X,
0:50along with our website, both in the
0:51description. Right off the bat, for
0:53designers, AI is not a tool. AI is a
0:56workflow.
0:58Two to three years ago, when Figma was
1:00all we were using, that's when design
1:03relied on one tool. That's it. All we
1:05were using was Figma. We weren't using
1:07anything else.
1:08But now, with the introduction of AI,
1:10the ability to spin up rapid iterations,
1:13spin up handoff documentation, do a lot
1:15of the manual work that we were doing
1:17before, using AI is not just about
1:20knowing how to use a one tool. It's
1:22about knowing how to use multiple tools,
1:24how to collaborate between those tools,
1:26and how to adjust your approach
1:28depending on what it is that you're
1:29actually working on. So, as designers,
1:32we're always looking for one tool to do
1:34everything that we were using Figma for
1:37before.
1:38But now, it's about how we're using
1:39multiple tools to make ourselves a
1:41little bit more efficient. Let's take a
1:43look at what that looks like. And
1:45naturally, because Figma was our home
1:47for so long, we're looking for a tool
1:48that does everything. And I actually got
1:50an email from someone recently whose
1:52boss was like really putting pressure on
1:54them to find a tool that does exactly
1:56what I'm about to talk about here, but
1:58doesn't exist. Um, so what designers are
2:00really looking for in one tool is the
2:01ability to upload a design system
2:03flawlessly, where the AI automatically
2:06knows every variable, every style, every
2:08component, when to use those components,
2:11variables, and styles, and is just an
2:13expert on everything right out of the
2:15gate.
2:16The ability to prompt our way to desired
2:18designs on a canvas UI, very similar to
2:21Figma where we can select certain
2:23elements, move things around,
2:25manually adjust things if we need to.
2:28An option to have Figma-like
2:29functionality for finer adjustments,
2:31like the ability to, you know, control
2:33the variables globally, the ability to
2:35tweak spacing just between a couple
2:37items.
2:38Uh, one click to generate all handoff
2:41documentation for both designers, for
2:43developers, when to use components,
2:45accessibility guidelines, when to use
2:47specific pages, and then a one-click
2:49build to make developers' lives easy
2:51where you just click
2:53build and it generates, you know,
2:55perfect code for the developers to go
2:57and implement.
2:58But it doesn't work like this. This is
3:00our dream, and maybe in 3 years when we
3:02get there in the future, but this does
3:04not exist in current state right now.
3:06Instead, what it looks like
3:08is we need to train AI on our design
3:10system. We can't just upload it and
3:12expect AI to do everything is we need to
3:14go through a series of prompts to make
3:15sure AI understands our current brand,
3:18our styles, our variables, our
3:20components, and then store that
3:22knowledge somewhere so you don't need to
3:24keep telling it every time.
3:27We need to generate multiple iterations
3:28across tools because the output that you
3:30might get from something like Claude is
3:32going to be different than the output
3:33that you might get from something like
3:34Clo Codex, which is going to be
3:36different than something that you might
3:37get from Google Stitch.
3:39So it's important to generate multiple
3:41iterations across some of these tools.
3:44And then when it comes to the Figma
3:45integration, or how Figma loops into
3:48this,
3:49is you can push and pull from Figma to
3:52different AI tools for iteration. So,
3:54something might come out in Claude code,
3:55I can push that to Figma,
3:57make some tweaks in Figma, make the
3:59styling, the layout tweaks that I want,
4:01and then bring that back into whatever
4:03AI tool that I was working with before.
4:05So, there's a little bit of give and
4:06take there.
4:07And then build out with AI with the help
4:09of a developer. So, it's not as easy as
4:11just one to click builds everything
4:13perfectly, a perfect code, you have
4:15everything that you want.
4:16You need developers are there for a
4:18reason. We can support them on some of
4:20these items,
4:22but it's not as easy as just going from
4:24prototype to production level code right
4:27away.
4:28And then we need to work with AI to
4:29generate a lot of the documentation, if
4:31whether we're building design system
4:32components, you know, designs, you know,
4:34different modules.
4:36AI doesn't automatically know the
4:38usability guidelines, the accessibility
4:40guidelines for everything that we're
4:42spinning up. We still need to dialogue
4:45with the AI in order to get the specific
4:46outputs that we're looking for. And with
4:49this, this is not just one tool, but
4:51this is a suite of different tools in
4:53the AI space that we need to know how to
4:57maneuver through.
4:59How to generate with Claude, how to
5:01generate with Codex, how to generate
5:02with Google Stitch, where does Figma
5:04come into play, how do we get the better
5:05results with each of these tools?
5:08Because as the AI landscape evolves, we
5:10can't just get away with just knowing
5:12one tool. If we just get away with
5:14knowing Google Stitch, then we go into
5:16an interview or all of a sudden we need
5:17to work with Claude or Codex, then we're
5:20behind other designers.
5:22So,
5:23you need to be able to work with all of
5:25them. It's not like you can just know
5:26Claude, just know Codex. They're all
5:28going to make their own leaps in
5:31innovation, especially in the design
5:32space eventually. And you just saw that
5:34with Claude design.
5:35Codex might come out with something
5:37similar in the future that might
5:39be better than what Figma offers, and be
5:41better than what Claude offers.
5:44So, it's important to have a full
5:46understanding of the entire end-to-end
5:49workflow for the topic of Figma.
5:52As there's a lot of clickbait that's out
5:53there where people are like, "Oh,
5:54Figma's finished. Figma's going to go
5:56bankrupt. Figma doesn't stand a chance."
5:59Despite the fact that their stock price
6:01is down like 85 plus percent
6:04of all time, it's not finished. It's
6:06still going to be around. But, they've
6:09fallen behind in the AI space. You know,
6:11Figma's AI is incredibly underwhelming.
6:14Um Figma's design system sync does not
6:16work very well.
6:18You can sync your design system with
6:20Figma make and all of a sudden it's
6:21applying like your error states to
6:23absolutely everything. Which is weird
6:25cuz you would think that Figma's make
6:27would be able to recognize
6:29that it's an error state cuz the variant
6:31is named error, but it doesn't. It
6:32doesn't work very well. And their
6:34general AI just produces really generic
6:36results. You can get way better results
6:37in Codex and Claude code and Claude
6:39design and Google Stitch as well. So,
6:42they've got some work to do there. But,
6:44for today, these are the tools that
6:45we're going to go over. We're going to
6:46go over Claude. We're going to go over
6:48Codex. We're going to go over where
6:49Figma comes into play. We're going to go
6:50over Google Stitch, as well. A lot of
6:53these concepts I might have covered in
6:54other videos as well, but hoping this
6:56sort of the one-stop shop uh for
6:58everyone. Everything else besides these
6:59tools here, as of right now, it's just
7:02noise. There's a lot of startups trying
7:04to enter the AI design space, but
7:06nothing that really comes close to
7:08what's here or where I've found value
7:10like baking it into my workflow. So,
7:12just something that you should be aware
7:13of. To make the most of this course,
7:16this video, is
7:18download Codex,
7:20download or have an account with Claude.
7:22Preferably, you have the desktop app.
7:24And also make sure you have a Google
7:26account so you can follow along with us
7:28with Google Stitch as well and try out
7:30all these tools. I'll put links for
7:31these in the description. You're going
7:32to see that Claude and Codex very
7:34similar. Codex is essentially OpenAI's
7:37answer to Claude code.
7:39But, both can produce really good
7:40designs. There are some key fundamental
7:41differences that you need to be aware
7:43of. First off, Claude is the better
7:44code.
7:45If you're working with developers,
7:46they're going to want to use Claude
7:47code, they're not going to want to use
7:48Codex. I've chatted with one developer
7:50who was a designer was using Codex, and
7:52then when the designer gave them the
7:54designs, they had to redo a lot of it
7:56inside of Claude code. So, it's not like
7:58a one-to-one, both produce the exact
8:00same code.
8:02However, Codex uses about three to four
8:04times fewer tokens for the same work as
8:05Claude.
8:06What this means is that if we're
8:09designing with AI and iterating, Codex
8:13might be the better option cuz it allows
8:15us to go a little bit farther with the
8:17tokens that we have available.
8:19If you're on a Claude paid plan,
8:21especially that base pro plan,
8:23you're going to realize that even though
8:25you're paying for it, you're often going
8:27to run out of tokens, especially as
8:29you're working with larger, more complex
8:31designs. Something you should know
8:33about.
8:34Claude is, however, is more accurate
8:36with using Figma attributes when pushed
8:38to Figma. Sorry, the wording here is a
8:40little bit off. But, what I mean by that
8:42is if I'm working with a design inside
8:45of Claude, and I have my Figma skills,
8:47Figma MCP connected, which we're going
8:48to get to a little bit later,
8:50and I push it to Figma, it's generally a
8:52little bit better about using auto
8:55layout, using the responsiveness
8:56properties like fill, hug,
8:59than Codex.
9:01Others might experience it a little bit
9:02differently, but it's just something
9:04that I've noticed. Then lastly, Claude
9:06is getting more expensive. I heard
9:07rumblings online of them thinking about
9:09removing or planning on removing their
9:11$20 a month plan and making it minimum a
9:13little bit more expensive. So, just
9:15something that you should keep an eye
9:16on. Before we design, I want to do some
9:18setup. Now, this is more foundational.
9:20I've covered it a lot in other videos.
9:21So, you've If you've already done this,
9:23you can skip it. Which is connecting
9:25Figma MCP and Figma skills. Now, they
9:27are not the same thing in theory.
9:30Is Figma MCP is about giving AI access
9:33to your actual design files, the ability
9:36to read the design files, understand
9:38what's going on. A thing that MCP isn't
9:41connected, the AI can't read anything
9:43about your Figma files.
9:45But Figma skills are more on teaching
9:47the AI how to use Figma.
9:50If you use Figma MCP, you can still do a
9:53lot of things that you want to do inside
9:55Figma.
9:56Um build designs.
9:59But Figma skills teach the AI
10:03how to apply variables, how to use
10:06components, how to better use the Figma
10:09canvas. Now, luckily for us, we're going
10:13to walk through how to install Figma MCP
10:15and Figma skills on both Codex and also
10:19in Claude. We are on the Figma community
10:21skills site. I'll put a link for this in
10:22the video description. So, these are all
10:24the skills that Figma promotes. Now, we
10:27can create our own skills for specific
10:29purposes unique to us inside of Claude
10:31or Codex. We'll look at that a little
10:32bit later.
10:33But there's certain skills that we're
10:35going to want to install just for us
10:37designers. And it's important to note as
10:38well that some of these skills they're
10:39more focused on developers, so they
10:42don't necessarily apply to us. But we're
10:44going to focus on the ones that apply
10:45most to us today.
10:47Right away, we need this required skill,
10:50this Figma use skill. If we don't have
10:52this installed, the other skills won't
10:54work as well.
10:55So, what we want to do is we want to
10:56download this from GitHub. And if we hit
10:59this MCP server guide, we want to
11:02download the zip entirely.
11:05The reason being, sorry if I just go
11:06back here. Oops, what did I click that?
11:08Sorry. Um is on the left-hand side, we
11:10have all these skills that go into this
11:13larger skill. So, we want to install
11:15them in bulk. That said though, there's
11:17other skills that we're interested in
11:19that aren't bundled in this Figma use
11:20skill. Because these skills are already
11:23bundled inside of this.
11:25Now, the other ones that we're going to
11:26want to apply, but I find a lot of value
11:29in, are the supply design system skill.
11:31So, say we have existing Figma designs.
11:34What we can do is we can call this scale
11:36and connect those designs to our
11:38existing design system.
11:40I don't use it a ton, but I know a lot
11:42of designers who have found value in
11:44this one right here. So, we're going to
11:45go ahead and install this. Now, for
11:47this, what we just want here is we just
11:48want the skill.md. So, we can come in
11:50here and just choose to download that.
11:53And probably my favorite skill out of
11:55all of these is this audit design system
11:56skill. The output that I get from
11:58running this is great. Because what it
12:00does is it
12:01audits designs that I already have
12:04and checks to see where that design
12:05system is not applied, where it's
12:07applying the wrong component, the wrong
12:08variable, the wrong style, where those
12:10variable styles or components aren't
12:12being used at all. And then it will fix
12:14it based on that. It's my favorite skill
12:16that they offer. So, again, it's just
12:18the skill.md that we're really
12:19interested in here. Let's go ahead and
12:20download that and let's open up Claude.
12:22Here we are in Claude. In in Claude on
12:25the left-hand side, you're going to see
12:26like a customize button. Uh so, just hit
12:29customize. You're going to navigate to a
12:30page like this.
12:32So, the way in which we install things
12:34is different on Claude than it was
12:36Codex.
12:37Let's start off by installing our Figma
12:40U skills. So, I want to show you
12:42something here. It's where a lot of
12:43designers tend to get tripped up.
12:46Is we want to bulk upload that zip file
12:49cuz it contains all of those sub skills.
12:51So, let's choose to uh go ahead and
12:54upload a plugin and let's just drag in
12:56that first zip file that we had
12:58downloaded. So, the MCP server guide zip
13:00file. So, let's go ahead, upload that.
13:04So, I can see the plugin is installed
13:05and ready to use. So, if we click in
13:07here, you can see that the plugin that
13:09includes the Figma MCP server
13:12and skills for common workflows.
13:14This is where it's not super clear.
13:18Because we have all of those skills,
13:21but under connectors,
13:24we're technically not connected to Figma
13:26yet.
13:27So, despite the fact that it says
13:28includes the Figma MCP servers, we still
13:31need to initiate that connection.
13:33So, under connectors, let's just choose
13:35to install, and then just choose to
13:37connect.
13:38And what that's going to do is going to
13:40open up
13:41Figma in the browser. So, just sign in
13:44to Figma there,
13:46uh and go ahead and connect. Sorry, I'm
13:47trying to do it offline here, but it's
13:49being a little bit slow. So, I'm just
13:50going to pause the video here. It
13:51finally loaded inside of my browser, so
13:53I just hit agree and allow access, and I
13:55can see now now that Figma MCP is
13:59installed. So, it's important to note
14:00here, just by uploading uh that zip
14:03file, even though it says includes the
14:05Figma MCP servers, you still need to
14:07connect it. The alternative way that you
14:09can do it is if you don't want the Figma
14:11skills, it's just under connectors, you
14:13can choose to browse connectors, and
14:14then just search Figma. And again, it's
14:16this one right here uh that we're
14:18interested in, and then we have already
14:19installed it, so all is well.
14:22Beautiful. Now those are installed. Here
14:25we are inside of Codex.
14:28This is where things can kind of get a
14:30little bit weird because people
14:32experience things differently, and I
14:34don't know why.
14:37Like as of yesterday,
14:39I was able to have this Figma plugin
14:42installed, which consists of all these
14:44different skills.
14:45I just chatted with someone who was on a
14:47personal plan, just like me,
14:50and they're able to install the Figma
14:53plugin.
14:55So, you might there's there's I don't
14:56know what's going on. Put it that way.
14:59But, the Figma plugin here actually has
15:02all of the skills that we had installed
15:05in that Figma U skill. So, we didn't
15:07need to download
15:09the item from GitHub, upload it. It's
15:11all wrapped inside of this one skill.
15:15I'm hearing mumblings where this is only
15:17going to be available to workspace
15:18users, so maybe that's just slowly
15:19getting rolled out.
15:21I don't know.
15:22But there's a workaround here. Where
15:24under skills, again, just at the top
15:26here, and if you search Figma, you just
15:28go ahead and install all of those same
15:30skills.
15:32So, starting off with that Figma MCP,
15:34uh that Sigma code connects, Sigma
15:36create design systems rule, so all of
15:38those sub skills that were in that zip
15:41file that we had installed a little bit
15:43earlier.
15:44They're now installed for us and ready
15:47to rock. So, a little bit of a different
15:49workflow.
15:50You know, I'm seeing different thing
15:52people different people experiencing
15:54different things. Some skills are
15:55available, some skills are not
15:56available. Sometimes that plugin is
15:59available, sometimes that plugin is not
16:00available for users who are just on a
16:02personal plan like myself. Just
16:04something to be aware of sometimes.
16:07Um
16:08yeah, I know it can be confusing. One
16:09thing real quick, Codex finally got his
16:11act together and allowed me to install
16:13this Figma plugin, so I had installed
16:14it. In terms of basic setup, that's kind
16:17of it. We have those, you know, Claude,
16:19Codex, whatever installed. We're using
16:21it, we're signed up. We have Figma MCP
16:23connected. We have those Figma Figma
16:25skills also installed. Let's go through
16:27the tools now, how they work, how to
16:29make the most of them. I want to start
16:31off with Google Stitch
16:34for a couple reasons. One, because
16:36Google Stitch we can't train it on our
16:39on our design system the the way that we
16:41would expect. We can't paste in a Figma
16:43file here
16:45and build skills around our design
16:47system. That's a big limitation to
16:49Stitch as of right now. I'm sure they're
16:51going to change it in the future, but as
16:53of right now that is not existing
16:55functionality.
16:56The other reason why I want to start
16:57with Google Stitch is cuz it's most
16:59different.
17:01It's way different than Claude design,
17:04it's way different than generating
17:06designs with Claude code or Codex.
17:09I want to show you what I mean.
17:11One thing I want to do here is we're
17:13just going to start off with Thinking
17:14With 3.1 Pro cuz it's not going to be as
17:17quick, but it's get better quality with
17:19it. So, we're going to start with
17:21thinking with 3.1 Pro. And let's build a
17:25financial app. Because my background is
17:27in financial technology. So, what
17:29desktop web experience should we start
17:30with? And one thing I want to call out
17:32here is Google Stitches web designs
17:36are never really that good. The app
17:39designs usually way better.
17:42What I want to do is let's just say run
17:45it again. My background is a financial
17:46technology. So, uh builds a financial
17:52uh management app for financial
17:56advisors. Let's just run that. This
17:59here, great result. And this took about
18:0130 seconds to generate.
18:04So, pretty quick. Now, there's still
18:07issues with it. It's not like something
18:09I can take right away and be like,
18:11"Yeah, sending this to developer. Done."
18:13But this is really good for iteration.
18:17I need to get some layout inspiration
18:19fast based on an app that I'm trying to
18:22build. Of course, beef up the prompt a
18:23little bit.
18:25But this allows me to sort of get an
18:27idea of the structure down, the types of
18:28data that I should display.
18:31How I should structure my bottom nav.
18:34And again, some of this stuff looks AI
18:36generated. This is clearly an AI
18:38generated widget.
18:39But that's okay. It's going to get
18:41better.
18:42I can see So, we have our client list,
18:44the client profile, advisor dashboard,
18:46rebalancing tool.
18:49This gives me enough to get started with
18:51and start having meaningful
18:52conversations with others on my team
18:54around what it is we're going going to
18:57want to display on each page. Want to
18:58show you something here is I ran the
19:00exact same prompt, but shows for a
19:02desktop. And this is what it gave me.
19:05The result is way worse. Way worse.
19:09So, whenever it comes to working with
19:10Google Stitches, you are going to get
19:12way better results
19:14working with mobile designs than you are
19:16on desktop. Like this here, Super Junior
19:20feels super AI generated, not great. But
19:23that's not to say that Stitch can't give
19:24you good results.
19:26A lot of times the base prompts that it
19:28might give you as examples will give you
19:29really good results. And sometimes even
19:32the prompts that you run
19:34give you results that look like this
19:36where it's clean, it looks good.
19:40It
19:41has polished to it.
19:44So,
19:45Stitch is because it's still in beta,
19:48you never get accurate
19:52results
19:53all the time. Sometimes it's hit or
19:55miss.
19:56Sometimes the result is not good at all.
19:59Going back to the mobile version though,
20:01is Stitch is really good for just basic
20:03iteration. Like this market overview
20:06page, this advisor dashboard. Maybe I
20:09want additional variations. I can come
20:11in here under generate, select
20:12variations, select the number of
20:14variations I want, specify creative
20:17range like more refining, exploring, or
20:19reimagining completely. So, let's just
20:21explore some different versions here.
20:24Choose what it is we want to vary. So,
20:26maybe just layouts. And now we can
20:27choose to generate different variations
20:29based on specific screens, specific
20:32elements. Or off to the right here, what
20:34it's going to do it's going to generate
20:35those variations. There we go. You can
20:37see that they're they're generating
20:38here. But ta-da! Stitch glitched out
20:41while it was generating those two
20:42designs, so I just had to generate it
20:44again. This time with three. And this is
20:45what it came back with. So, just some
20:46different layouts here. Where this one's
20:48got that bar graph. And again, sure some
20:50of the bars are hard to see here. You
20:52know, active client pulse, priority
20:54alerts. Whereas this version is a little
20:56bit different where you have those big
20:57metric cards right at the top. Then you
20:58move into an itinerary, what they need
21:00to focus on today.
21:01And this one's even a little bit more
21:02different where you have that AUM like
21:04their assets under management like a big
21:06and bold at the top with other metrics.
21:09Then you get into your growth.
21:12But as you can see, like these aren't
21:14production-level designs.
21:16I wouldn't take these and show it to a
21:19client. I wouldn't take these and say,
21:22"Developer, build this out for me."
21:24But where is it I'm using Google Stitch
21:26right now? Where is it I'm using Stitch?
21:29For fast generation, for very, very
21:31early stage concepts without burning
21:33tokens. I'm not looking for polished
21:35designs. I'm looking for types of
21:37widgets, types of data that we might
21:39want to display, to sort of have some of
21:41these more early conversations on what's
21:44important with internal stakeholders.
21:46I'm only going to bring Claude and Codex
21:48and Claude design into the equation once
21:51I know absolutely for sure. So I got a
21:54couple options here. Either I can burn a
21:56ton of tokens and a ton of time
21:58generating these polished first drafts
22:02inside of Claude and Codex.
22:05Or I can use Stitch
22:07because it's basically free
22:09to spin up a bunch of different
22:10variations of things, of ways data can
22:14be displayed and data points we want to
22:15show and types of widgets to chat with
22:18again, just internal stakeholders. I
22:20wouldn't show this to a client or anyone
22:22external
22:24on what really speaks to them, the types
22:26of data that they like, how they like
22:28data to be displayed. Cuz it's going to
22:30better inform what I'm either able to
22:33one, then reproduce in Figma
22:35or two,
22:37build out in Claude code
22:40and Codex
22:42without having to go through the level
22:44of variation we did in Stitch, which is
22:46going to burn a million and two tokens
22:49inside of the other tools. And hopefully
22:51you can see that Stitch is
22:52designer-friendly. You know, we can move
22:54things around, we can preview things, we
22:57can choose to mod modify things, we can,
22:59you know, generate those variations and
23:01regenerate designs. We can generate a
23:03desktop web version based on that. We
23:05can even tweak like the design system
23:08here, too. We can adjust the color
23:10palette.
23:11But again, it doesn't produce those
23:13production level designs that I just
23:15talked about.
23:16But
23:18what's the other key tool in the AI
23:20space that's really tailored to
23:22designers? That's Claude Design. It's
23:25going to be a nice segue into sort of
23:28the Claude Codex space. Here we are on
23:30Claude Design.
23:31And I want to because Claude Design and
23:34Stitch, they're the design-focused
23:38AI tools. The real popular ones that are
23:40out there.
23:41And I want to showcase the different
23:44quality that you get on Claude Design
23:46versus what you get on Stitch.
23:50So here we are on Claude Design. I'll
23:51put a link for this in the video
23:52description. Let's just create a new
23:54project and not select any particular
23:56design system. Just call it high
23:57fidelity. Just make it a high fidelity,
23:59not a wireframe. Sorry. Um so let's just
24:02call it uh
24:04AI demo.
24:05Let's create this.
24:07And let's go ahead and build a prompt
24:10now. Let's run the exact same prompt as
24:12we did in Google Stitch. Build me Oh,
24:15forgot my please. Please build me
24:18me a financial management app for
24:21financial
24:22advisors. Again, not the best prompt in
24:25the world.
24:26Uh not a really good prompt at all, but
24:28still the same.
24:29Let's run. And we get some questions,
24:31and this is nice because with Google
24:32Stitch, it just like basically went
24:34ahead and did things, but Claude Design
24:36wants to know
24:38a little bit more detail. It's going to
24:39help us produce a more polished version
24:43the very first time.
24:45So, who's the primary user? Let's go uh
24:49financial planner.
24:51Uh which workflows matter most? So I can
24:54select Let's go performance reporting.
24:57Uh select a couple of these and
24:59portfolio dashboard. Which screen should
25:02be the hero?
25:04Advisor home, platform. Let's just go
25:07desktop.
25:08Let's go aesthetic direction. Have it
25:11decide for me. Information density,
25:13again decide for me. All these other
25:15ones, let's just select decide for me.
25:17But you can see the level of detail that
25:19it's asking us to try to get the best
25:21result the very first time.
25:24So, decide for me and then decide for
25:27me. Let's run this. You can see that it
25:29came up with a list of to-do's, but I'm
25:31already on minute six. It doesn't look
25:33like any of these are actually built
25:34yet.
25:35So, you can see already how a stitch the
25:38results came back after like 15 seconds,
25:40not even sometimes.
25:42But with Claude design, there's a lot of
25:44waiting involved, which we're looking
25:47for fast variations and iterations, just
25:49exploring certain concepts, what data
25:52could go where, what data might resonate
25:56with an internal stakeholder.
25:59Claude design really slows down a lot of
26:02that fast iteration we want to do in
26:04those early stages. I know what you're
26:05thinking.
26:07But Kirk, I have all the time in the
26:08world. So, if Claude design gives me a
26:10better result first try to share with
26:12stakeholders, I'm only going to use
26:14Claude design.
26:16Let's pause for a sec
26:18because the usage of Claude design is
26:19limited
26:21in this early stage and it is going to
26:23get expensive. Claude code is an
26:25expensive tool.
26:27I believe I've said it before, I'll say
26:28it again. I believe it was Uber, they
26:30ran out of their AI development budgets
26:33in like three to four months that they
26:34had set for the year.
26:36Now, unless you're working at a company
26:38like Apple or Google where your budget,
26:40I don't want to say is infinite,
26:42then chances are the way in which you
26:44can leverage a tool like Claude design
26:46once they pile on the features, pile on
26:48like included in all the plans and
26:50everything like that and start charging
26:52for it a lot more than they are now.
26:54The cost is going to add up. So, you
26:56need to be really strategic
26:58around where you're going to be using
27:00your tokens. And the results here
27:04is way better. Look at this. This is
27:06like
27:08senior level design.
27:11It looks clean. The font is nice. The
27:13different font treatments here, how this
27:15is like normal font, not indented. This
27:18is slightly different color. It's
27:19indented. And or not indented, sorry.
27:22Italicized.
27:23Um we have this interactive graph. We
27:26have this allocation. We have this book
27:28of business. We have today's agenda.
27:30It's all interactive, or at least some
27:32of it is.
27:34This is great.
27:35You know, like you can show this to a
27:37client and be like, "We spun this up."
27:40And they wouldn't bat an eye.
27:42Whereas with the Stitch example, they
27:45would bat an eye. Despite the fact how
27:47good this looks, there's an issue.
27:49Is it only built the dashboard. It
27:52didn't build any of the other pages.
27:55Now, you might be thinking, "Let's just
27:56have it build those pages now." But
27:58today is a currently Wednesday. You can
28:00see that my usage resets in Claude
28:02design on Tuesday. I did not use Claude
28:05design yesterday. So, that one dashboard
28:07took me 8% through my usage.
28:10So, you can see how
28:13easy it is to use up
28:16what you're available to use in Claude
28:18design. So, if we're inefficient in the
28:21way in which we
28:24start to start with Claude design for a
28:26lot of that iteration, by the time we
28:28get feedback from our stakeholders, all
28:31of a sudden we have to wait in order to
28:33re-prompt inside Claude design. So, what
28:35you're doing is you're using Stitch to
28:37inform your prompt for Claude design.
28:41Because with Google Stitch, what's your
28:42objective? Mid-fi wireframing, as we
28:44saw. It's not hi-fi, it's not low-fi,
28:46with just basic shapes. It's somewhere
28:47in between.
28:48To align on metrics, align on potential
28:50formats, align on charts.
28:53And then when you move into claw design,
28:54which is more of that super high-fi
28:56wireframing,
28:57it's, "Hey claw, here is the specific
28:59data that we want on the dashboard.
29:01Here's the format that this should be
29:03in. We want our metrics along the top in
29:05four cards. These are the specific
29:07metrics cuz I aligned on these with my
29:08stakeholder after reviewing what Google
29:10Stitch gave us.
29:11Below that, we are going to have a
29:13performance chart, and it's going to be
29:14a line chart chart, not a bar chart, and
29:16here is why. Ultimately, your goal is
29:18just to reduce the number of edits you
29:20need in claw design. The closer you can
29:21get to
29:24it first try and claw design, the
29:26better. But you can't do it if you
29:28haven't had those good convos with
29:30internal stakeholders around what they
29:32like, the data, what data should be
29:34displayed where, and that's where
29:37Google Stitch comes in.
29:38Having better early stage convos at a
29:41much faster rate. Another thing that's
29:43not great about
29:45claw design, despite it's not very
29:48efficient, I guess,
29:49is
29:50it doesn't feel like a design tool.
29:53So, I'm going to have it actually build
29:55another variation. Build
29:58me another
30:01variation. Or actually, let's say, uh
30:04build the book page in
30:06instead. Build the book page instead.
30:09Uh then lay out the designs
30:14side by side
30:16so I can view them.
30:18So, build the book page instead. So,
30:20we're referring to this page right here
30:21because we only really have our
30:22dashboard. Uh then lay out the designs
30:25side by side so I can view them. Let's
30:27run. And now this is what it came back
30:28with. So, now we have that book of
30:30business. So, we have that book page.
30:32And again, looks pretty good. We have
30:34our filters here on the side. We have
30:35these this great metrics treatment at
30:37the top. We have a list of everyone
30:39who's in like our financial advisor
30:41book. I think it looks pretty good. And
30:43now what's nice is because I told it I
30:45want to view things side by side, we can
30:46kind of view it like a canvas. But
30:48what's the issue here?
30:50I can't really like
30:52you know, I can move things around,
30:55but I can't modify Ooh, look, these are
30:58these are interactive, too. That's nice.
30:59Um built those out right away. But I
31:01can't move things side to side. Like I
31:05can like that scroll effect works. Oop,
31:07we got a
31:08Ah, what's going on there?
31:09Delete that. Um but I can't rearrange
31:12things like I would on Figma. It's very,
31:15very static. I'm sorry, it's still
31:17running and changing things as I go.
31:19And if I wanted to make tweaks here,
31:20what I would need to do is I can just
31:22choose to select items and edit it, or I
31:25would have to leave comments about
31:26change this, change this, just leave
31:28that as a comment, you know, um
31:30different treatments, different
31:32treatments, and things like that. It's
31:35all very
31:36Claude has to do it manually. It's not
31:38something that we can just move around
31:40or make those tweaks on the fly,
31:42especially for those larger layout
31:44changes. And now, after that second
31:47prompt, we're now at 15% used
31:51of our Claude design usage, which resets
31:53next week.
31:55So, you can imagine how frustrating it
31:56would be if you ran out of Claude design
32:00tokens when you're in the middle of like
32:02a design sprint. Not fun. One thing I
32:05did forget to call out here is there is
32:07the ability to hand this off to Claude
32:10code. We're going to get to Claude code
32:12in just a second. We're not going to use
32:13the designs here remove to Claude code,
32:16but something I did just want to call
32:17out that I forgot to highlight here.
32:18Everything else within
32:20Claude design, relatively
32:21straightforward stuff. There's nothing
32:23out of the ordinary that would stop you
32:25from using this effectively. In order to
32:27hand off to Claude code, just hit hand
32:29off to Claude code, copy this command,
32:31and then go inside to Claude code, and
32:33just paste that in a new chat. We're now
32:35familiar with Stitch and Claude design,
32:37limitations, and where they're used,
32:39generally used.
32:41I want to show you the different outputs
32:43with Claude code and Codex then. So,
32:44remove Claude design and like the design
32:48more design-focused tools. And just
32:50inside Claude code and Codex, let's run
32:52the exact same prompt we've been working
32:54with. It's not just about comparing
32:55outputs, but your AI workflow might
32:57change as part of it. Once we look at
33:00tokens and how long things take when
33:02compared against both of them. So, we're
33:04going to go through a little experiment
33:05as well. All right. Now, it's funny
33:07because everything we're just about to
33:08go through, I actually am re-filming it
33:11after I filmed it because I realized
33:13that I ran Claude on extra high, but I
33:16ran Codex just on high. So, there might
33:18have been a little bit of a discrepancy
33:20there,
33:21um, just because after a bunch of
33:23research 2 days ago, extra high and
33:25extra high on Claude and Codex, the
33:27exact same things, even though Claude
33:28has a max plan. All right. So, anyways,
33:31it's besides the point. What we're going
33:32to do is we're going to reuse that same
33:34prompt that we've been running with. And
33:35I want to build a financial management
33:37app because I want to showcase sort of
33:39the outputs on Codex and also Claude and
33:42to compare how long things take, and
33:45also how many tokens are used. So, let's
33:47go ahead and just run this. This is what
33:49we got back, pretty half-decent looking,
33:51uh, dashboard, all things considered.
33:54Um, so what I want to do now
33:57is I'm going to choose to push this to
33:59Figma. What I chose to do here is I just
34:01chose to push it to Figma. Now, one
34:03thing is important to note is you don't
34:04need to push everything to Figma
34:07in order to bring it into Codex.
34:09And especially for those more technical,
34:10I know there's other ways to do things,
34:12you know,
34:13get repo, bring it into Codex, but this
34:15is the flow that designers are generally
34:18most comfortable with. So, that's what
34:19I'm going with for now because even with
34:22Claude code, we might want to push it to
34:24Figma, make changes in Figma, and then
34:26bring it into Codex. That's another big
34:28part of a designer's workflow. It's not
34:30about always going straight from Claude
34:32code or right into Codex and then a
34:34right back into Claude code. We
34:35generally have that Figma step in
34:37between, make tweaks, move things around
34:39on our own. And then when we're ready,
34:41we might pull it either way. While
34:42that's being pushed to Figma inside
34:44Claude, I'm I'm going to hop into Codex
34:46here and run the exact same prompt we
34:48ran before.
34:49Uh so let's go ahead and let's run this.
34:52This is what Codex came back with.
34:54I know what you're thinking. This is
34:55horrible. You're not wrong. It's not
34:57great.
34:58It's because for designs out of the box,
35:01Codex is not your best option.
35:03Claude is. You can see the design that
35:05Claude produced compared to this, night
35:06and day difference.
35:08But that doesn't mean that we shouldn't
35:10use Codex as part of our AI workflow.
35:14I'm going to elaborate on this. But what
35:16I want to do now is with the design that
35:19Claude had pushed to Figma,
35:21I'm going to bring that into Codex. And
35:24you're going to see why. And this is
35:26here is what Claude gave us inside
35:27Figma. It looks pretty good. There's a
35:29there's some small responsiveness things
35:30that I noticed, but that's totally fine.
35:33What I'm going to do, I'm going to copy
35:34a link to this section and then let's go
35:36and go back to Codex. Inside Codex, I'm
35:39going to paste the link to that Figma
35:40file. Please build this
35:43uh locally. And we're going to have
35:45Codex build what Claude had. So let's
35:49run. All right. This is what Codex came
35:51back with.
35:53What I want to do now is I want to make
35:55the same changes
35:57on Codex and on Claude and compare how
36:00long those changes take.
36:03And also how many tokens
36:05that those changes burn.
36:07So what are some larger and smaller
36:09changes? One,
36:11maybe we can swap this from dark mode to
36:12light mode.
36:14Maybe we want to make top households
36:17have a search bar
36:19and make it full width. So some larger
36:22changes that come into play.
36:25What we're going to do, we're going to
36:26as I mentioned, we're going to Codex,
36:28run that, and then go to Claude and run
36:29those same instructions. Inside Codex
36:31then,
36:32running this prompt, make the following
36:34changes: change it to light mode, add a
36:36search bar to top households, make top
36:38households full width, and swap
36:39positions of AUM and households. So, I
36:41decided to just swap these two cards
36:43along the top, another smaller change.
36:45So, let's copy this, and then let's So,
36:48first off, let's run this.
36:50There we go. Now, let's copy this, and
36:52let's do the same in Claude. Back inside
36:54Claude then, let's run the exact same
36:56thing. So, we can see that it did its
36:58job versus the old version versus the
36:59new version, where it swapped households
37:01and AUM. Here, this version, we have
37:03this full width, we have the search bar,
37:05whereas on the older version, we did
37:06not. And those changes have been made in
37:08Claude as well. One thing I'd like to
37:10call out is the styling is different on
37:13Claude than Codex, but it's not Codex's
37:15fault, because when the design was
37:17pushed from Claude into Figma, it lost
37:20some of the good text treatment. So,
37:21that's why on Codex, how it looks a
37:24little bit plain, Codex actually did a
37:26really good job taking exactly what was
37:27in Figma and bringing it into Codex, but
37:30things like styling just got lost in the
37:32Figma translation. One thing I'd like to
37:33call out is
37:34right after I started filming some of
37:36these things, I realized I forgot to
37:37take screenshots or showcase what the
37:39context window was before and after. So,
37:42instead of having to like get my
37:43recording started, which takes like a
37:45couple seconds, I just screenshotted
37:46right away, just so it was fully honest
37:49what those tokens were that they started
37:50with. All right. Um but, the time it
37:53take it took to make those changes in
37:55Claude was 12 minutes with 38,000 tokens
37:59used.
38:01The time it took in Codex to make those
38:03changes was 4 minutes
38:05with 17,000 tokens used.
38:08There's a lesson in this, and one of the
38:11reasons why I'm not showing like
38:13how or talking about how many tokens it
38:15took to do everything so far, is because
38:18Claude had to build a design from
38:19scratch, but Codex just brought in a
38:21design from Figma. So, there's a little
38:23bit of a different workflow, so you
38:24can't compare it apples to apples in
38:26that sense. So,
38:28this is the results from that little
38:30experiment that we ran through. Clearly,
38:32Codex is a little bit more efficient in
38:34terms of time and also for tokens. And
38:36as I said, there's a lesson in this.
38:38Whereas, if you want to maintain the
38:40best use of your time and tokens, it
38:42might make sense
38:44to generate your initial designs in
38:45Claude, whether it's Claude design,
38:47Claude code, whatever it is. Again, if
38:49you're doing it in Claude design, you're
38:51going to need to bring it in to Claude
38:52code, um in order to push it to Figma.
38:55Then, from Claude code, push it to
38:57Figma.
38:58Once it's in Figma, pull it from Figma
39:00into Codex, where you can iterate in
39:02Codex. You can add different things,
39:04move things around, make tweaks, like
39:06when add a badge here, remove this
39:08badge, move this down, swap these
39:10elements. And then, when you're happy
39:12with it, push it to Figma, and then
39:14bring it back into Claude when you're
39:16ready to make your developers happy and
39:18to do any, you know, larger exploration.
39:21It doesn't make sense to
39:25always make small changes in Codex.
39:29You're going to need to decide when it
39:30makes sense to do something in Claude
39:32versus do something in Codex. Because it
39:34takes effort to either download the
39:36entire file, bring it into Codex, or
39:40push to Figma, and then bring it into
39:42Codex from Figma.
39:44You know, it's
39:46it takes a lot of effort, and if
39:47especially if you're going down the
39:48Figma route,
39:49it takes a lot of tokens.
39:52So, if you need to just change one color
39:54and move two things around, maybe it
39:55just does make sense to do it in Claude.
39:57But, if you have a full application in
39:58Claude code, then maybe it does make
40:01sense to bring things
40:03into Codex, because you can make a lot
40:06of those larger changes. Like, if you
40:08have to spend a couple days making a
40:09bunch of changes, yeah, then sure, it
40:11makes sense to do it in Codex versus
40:12Claude. But, one or two small things,
40:15you know, you don't always need to bring
40:16it into Codex. Right now, we're at a
40:18point where we understand some of the
40:19key tools in the AI design space right
40:22now. What that workflow could look like
40:24depending where you are in your design
40:27journey.
40:28But I want to talk about design system
40:30consistency and how our design systems
40:33work with these AI tools and how can we
40:36get a really good results
40:38using AI when building designs, but
40:41still keeping it on brand with our
40:43design system and the guidelines that
40:45our organization sets. I want to start
40:47off in Claude design
40:49because this is getting all the hype and
40:51I see a lot of clickbait around this.
40:53So, I want to clear some things up. Now,
40:55one thing I'd like to call out just as a
40:57fun fact,
40:59I have been filming everything you've
41:01seen so far for 7 hours because I had to
41:04do retakes, all this stuff. It takes a
41:06long time. And in case you want a sneak
41:08preview into my life behind the scenes.
41:10Um
41:11so, and also too, planning things. I'll
41:14like plan the video then I realize I
41:15should have done it a little bit
41:16differently or explain things
41:17differently. Takes a long time. So,
41:20here just under design systems. We
41:22already have this design system in here,
41:24but I'm going to choose to create a new
41:25one.
41:26I'm going to create a design system and
41:28what I did offline is I downloaded
41:32a copy of one of the design systems that
41:34that's a part of our academy. Again,
41:36link in the in the description. I'm just
41:38going to drag that in. It's a real
41:40simple design system. There's nothing
41:42crazy about it. There's not these big
41:45insane UI layouts and these super uber
41:48complex components with crazy blur. It's
41:51relatively simple design system.
41:53So, I'm going to choose to attach all
41:54the pages and frames and I can see that
41:57that's attached. Let's continue to the
41:59generation now.
42:02And let's of course choose to generate.
42:03Forgot that was going to be a step. It
42:05came back with
42:07everything in the design system for us
42:08to preview. Say Say it looks good, say
42:11whether it needs work.
42:13This has gotten way better in the last 2
42:16and 1/2 weeks or 3 weeks since whatever
42:20Claude design was launched.
42:22But there's still fundamental issues
42:25with
42:26it not capturing
42:28everything.
42:30Let's go into buttons as an example.
42:33Now,
42:34I know this design system really well
42:37cuz I built it.
42:39We don't use ghost. Oops, sorry. We
42:42don't use ghost
42:44as
42:45variant name. We don't use danger.
42:48We're missing variants here.
42:52So,
42:53it appears as if there's still Again,
42:54this is still better than what it gave
42:56me like 2 weeks ago.
42:58But it appears it's still missing things
43:01and it's not capturing everything inside
43:03of that design system.
43:06And another example here is we go up to
43:08our type scale.
43:10I don't have a display in this design
43:12system. I have a hero.
43:14Where's our heading three?
43:17We just have heading two, heading four.
43:19What about heading five, heading six?
43:21What about our body large, body
43:23and body medium?
43:26It's missing
43:28some of the most fundamental elements of
43:31the design system.
43:33Because some of these I care less about
43:35and we're still missing a lot of
43:36components. Like this is not the extent
43:38of all the components that are in that
43:39design system.
43:42But I care less about avatars
43:45which also aren't correct.
43:48I care more about form fields which look
43:51pretty good. Sure, we're missing some
43:53variants, but that's fine.
43:54I care most about buttons. Again, these
43:57all look pretty looking pretty good.
43:58Still missing some variants. And I care
44:00most about our type.
44:03So, if I was Claude or Anthropic, I
44:06would focus most on the fundamentals and
44:08make sure that those are built properly.
44:12Now, one thing that's important to note
44:13here is I can say this looks good or I
44:14can say what needs work. And I can
44:16describe what I prefer what they got
44:18wrong.
44:20But I don't want to have to go through
44:22and do that for everything here.
44:26Doing that alone, we already know how
44:27slow Claude is. Do we really have 12
44:30hours to burn and all of our Claude
44:32design credits to go through and polish
44:35our design system?
44:37So just because you can import your
44:38design system
44:40in theory, you can, but it doesn't mean
44:44it's ready to produce these Claude
44:46design high-quality
44:49UIs with. It's just not there yet. And
44:52something you might get from your team,
44:54and it's something I know that some of
44:55our community members have also got from
44:57their team,
44:59are is their bosses being like, "Just
45:00import the design system to Claude
45:02design. I don't know what the big deal
45:03is."
45:05If you ever get that, just send them
45:07this part of the video or recreate the
45:09demo in on its own where you upload your
45:11design system and show them the flaws. A
45:14lot of higher-level design leadership
45:16exacts, they're just going off the
45:18headlines. They're going off the
45:20clickbait because they've never actually
45:21tried it themselves. So even though your
45:24boss might be telling you, "Just import
45:26the design system to Claude design."
45:28it's important for them to understand
45:30that it does not work as intended. All
45:32that's just it's not just to say that AI
45:35can't do anything relating to your
45:38design system entirely.
45:40But what I'm going to show you, I'm
45:42going to talk about why it's not the
45:43best, is I want to enter a link to just
45:45a empty Figma file. It's just called
45:47variables test. Please build me type
45:50styles
45:52uh H1, H2,
45:55H2, H3, H4, H5, H6, uh P1, paragraph
46:02one,
46:03paragraph medium,
46:05I spelled paragraph wrong. Paragraph
46:08medium,
46:10paragraph large, paragraph
46:14small.
46:16Inside of this Figma file,
46:19inside of this Figma file,
46:22inside each style,
46:24there should be
46:26variables. This file
46:29file above
46:31is empty.
46:32So, you will
46:34need to build the variables
46:39and styles
46:41and styles.
46:44Let's run this. And this is the result.
46:46It looks pretty good. So, we have all of
46:48our variables inside of a typography
46:50collection. I always like to call this
46:51responsive, actually.
46:53Again, some links in the description for
46:54responsive collection stuff.
46:56And we have all of our styles on the
46:58right-hand side here. It looks like our
46:59variables are applied.
47:01This is pretty good.
47:03Now, let's do the same
47:05but with our
47:08more color-specific variables. Cuz I
47:11want to talk through some things here.
47:13Back inside claw, let's run another
47:14prompt. Now, build me a complete Figma
47:18variable
47:20library.
47:22I spelled variable wrong. Come on. Oh,
47:24it doesn't even come up. Variable
47:27library. There we go. Let me move my
47:29video bar out of the way. Perfect. I got
47:31some space. Now, build me a complete
47:33Figma variable library. We will use a
47:39Brand, alias, and map collection.
47:45Brand has raw hex codes and groupings.
47:50Alias
47:52determines primary, secondary, etc.
47:56Error.
47:58Etc.
48:01Uh in map has all of the surface text
48:08icon and border variables.
48:12Inside uh alias collection
48:15there will be a second brand for the
48:19second brand within
48:21there will be a second mode
48:23for a second brand.
48:26Inside of map
48:28is a second mode for dark mode.
48:32Uh uh
48:33So, now build me a complete variable
48:34library. We use a three-tier approach.
48:36Brand alias map collection. Brand has
48:38raw hex codes and groupings. Alias
48:39determines primary, secondary, error. In
48:41map has all the surface text icon and
48:43border variables. Inside alias
48:44collection will be a second mode for a
48:45second brand. Inside of map is a second
48:47mode for dark mode.
48:49And if you don't know what any of these
48:50like collections are, again, link in the
48:52description for some other videos that
48:53goes through that in depth.
48:55Um again, I kind of build design systems
48:57for a living, so
48:58I know a lot on the topic. But, let's
48:59run this. This is what it came back
49:02with. So, we have our map collection to
49:03light and dark, our brand collection to
49:04all those raw hex codes, our alias
49:06collection we defined primary and so on
49:08so forth. Brand A, brand B as modes.
49:11Again, our map collection, as I said,
49:12with light and dark. And this is where
49:13all the heart of the action is.
49:16This is one of those scenarios where
49:19just because AI can do it
49:21doesn't mean you should use AI
49:24to do it.
49:25Because one thing I noticed here is
49:28there's no disabled button no disabled
49:30variable for disabled buttons.
49:32There's no disabled border. We're
49:34missing some pretty key variables
49:37as I scrolled through here.
49:39Also, too, at the same time, so you AI
49:42gave you this variable library.
49:44Now, what do you have to do? You have to
49:45start building some components.
49:48How do you know which variables
49:51to apply to which components, which
49:54variables you might be missing.
49:57This is one of those things where you're
49:59going to spend more time trying to
50:00figure out what it is that AI gave you
50:04than it would be to learn how to build
50:06your variable library properly, spend 3
50:09hours, and we have complete free videos
50:11on YouTube where we go through that.
50:13Spend a couple hours, learn how to build
50:15it.
50:16So, you can build it yourself, and then
50:18scale that from there.
50:20This is one of those things where just
50:22because AI can do it, you're going to
50:23spend more time trying to figure out
50:24what it is AI gave you, if it's actually
50:27right, if it has all the variables that
50:29you need. Do all the variables that it
50:31gave you work with your brand? Because
50:33maybe you don't need some of these.
50:35And you won't know until you start going
50:37through it. And I see a lot of designers
50:39be like, "Oh, I built my variable
50:40library with Claude code. Can you tell
50:42me what it is that I'm missing?"
50:44I have no idea. I'm not your brand.
50:46Claude is not your brand. They have no
50:47idea your brand guidelines, your brand
50:49rules, what components you need in your
50:51design system. Some brands that will
50:53have way more complex components that
50:54require a completely different range of
50:57variables.
50:59It's difficult for AI to get this right.
51:01Back inside Claude, let's have it build
51:03us a component. Now, I started filming
51:05then I realized I actually said build me
51:07a complete button variable set
51:10instead of components
51:13and variant set uh based on the styles
51:16and variables we created. Now, please
51:18build me a complete button component and
51:19variant set based on the styles and
51:20variables we created. Sorry, but for the
51:22sake of authenticity, I make mistakes as
51:23I go. Because I still want to have it
51:26generate us some components, cuz I still
51:27want to talk through some things
51:29associated with this. So, let's go ahead
51:31and run this. For this part of the
51:32lesson is I'm using Claude because it's
51:34more accurate when working with Figma. I
51:36didn't want to use Codex even though it
51:38takes less time, takes less tokens,
51:40because I know that Codex is going to
51:41give us like some iffy results. And I
51:43always don't want to use
51:45sort of the less superior tool to try to
51:46prove a point. I want to go use Claude
51:49cuz I know it's going to give us a
51:50really great result to show you what it
51:51can do, but still talk about why it's
51:54probably not the best approach to
51:55things. So, just wanted to clarify that
51:57why I'm using Claude for this and not
51:59Codex. Buttons are the easiest component
52:01of a design system to build, full stop.
52:03They're the easiest. And right now we're
52:05at almost at 6 minutes and 5,000 tokens
52:09to generate our button component.
52:13This isn't even including any changes
52:14that we're going to have to make. And
52:15look, it looks like it just came back
52:17and finished. So, 6 minutes and 5.4
52:19thousand
52:21tokens. It's a lot of time. It's a lot
52:23of tokens for the easiest component.
52:25Let's jump into Figma now. This is what
52:27it came back with. So, we have our
52:29sort of gave us like this little demo
52:31here, which is actually kind of nice. I
52:32do like the thought here.
52:34Where
52:35what those buttons look like on light
52:37mode, what they look like on dark mode.
52:38I don't know for sure, but I don't know
52:40if some of these would pass our color
52:41contrast ratios right away. This one
52:44absolutely wouldn't. So, that would be
52:46something that we would need to fix.
52:48Now, another thing right off the bat is
52:52in the button component,
52:54so we have like our primary, secondary,
52:56tertiary, and then our then our error.
52:58They went ahead and built us a
53:00went ahead and built us a disabled
53:01button, which they'd also gave us some
53:03disabled variables, which it missed
53:05originally, which is good.
53:08But,
53:10in our variables here, let's go in.
53:13We have a secondary variable set. We
53:16have a success warning variable set.
53:19It gave us those examples here.
53:22Why aren't they in the button component?
53:26So, we just spent 6 minutes and like
53:28what was it? Like 5 plus thousand tokens
53:31to build this. Now we need some changes.
53:34And that's the hard part with building
53:36components with AI. You go through
53:39tokens. You go through a ton of time
53:43to not get the result that you're
53:44looking for the first time
53:47and then you either have to spend time
53:48fixing yourself, trying to reverse
53:50engineer what it is that AI gave you
53:54or burning through more tokens and more
53:56time trying to dialogue
53:58with the AI.
54:01And for such a simple component, button
54:04component, there are a million
54:07and two design systems out there that
54:09have button components, that have a link
54:11components, button icon components,
54:12fields, labels, inputs.
54:15Why do we need AI to do this for us?
54:18It is my honest opinion that AI should
54:21be used for more complex layouts and
54:23models and dialogues and things like
54:27that that actually take a lot of time to
54:30build.
54:31Because there's so many free resources
54:33and paid resources for 100 bucks, 120
54:35bucks, 50 bucks
54:37that offer you
54:39all of the components that AI is going
54:42to spend time burning to get your design
54:43system up and running. And they're going
54:45to come complete with a complete
54:47variable set
54:48that are actually applied to real
54:50components.
54:51So, you're not having to rely on AI to
54:53build the variable set, then build the
54:54components, then realize that it might
54:56have forgot some variables, and then it
54:58needs to add more variables, and it's
55:00just
55:01it's too much back and forth that needs
55:03to happen. You're going to spend more
55:04time reverse engineering things than
55:06anything else. And I get emails like
55:08this, like AI gave me these variables,
55:09what am I missing?
55:10This proves my point.
55:12Is that if AI just gives you an output,
55:15but you don't know the rationale behind
55:17the output, how can you expect to
55:20succeed in your day-to-day design role
55:22when you're applying variables that you
55:23didn't build, when you're using
55:25components that you didn't build? So,
55:27you don't know how those variables are
55:28structured. You don't know which
55:29variables belong where. You don't know
55:31how those components were built. So, if
55:32you need to make a change to those
55:33components, then you you mess something
55:35up. Now, the example that I gave is just
55:37for buttons, but again, that's just an
55:39easy component. There were no atom
55:40components that went inside of that
55:42component.
55:43So, you all you have to do is just
55:45change the one
55:47uh component set and the variants
55:49inside. Once you start getting into more
55:51complex things like tables, really
55:54complex component, graphs, where there's
55:57all these different components that are
55:58added together to build one larger
56:00component, that's when you're going to
56:02run into a lot of issues. Where AI is
56:04going to give you something, but you
56:06don't know how it's structured and why
56:07it's built the way that it was. And I
56:09said this in my last video,
56:11I have free videos teaching you how to
56:14do a lot of these things. To build a
56:15design system, to set up a design
56:17system, uh to build a responsive
56:20collection. I have a 3-hour video. And
56:22again, links in the description for
56:23these
56:24on how to build a design system. 3
56:26hours.
56:27Took me like 15 hours, 12 hours to film.
56:29All right? So, there are resources
56:31available for you, so you don't need to
56:33rely on AI for all these things. It
56:35might take you 2 to 3 hours, 4 hours, 5
56:37hours. It might take you an entire
56:39working day.
56:40But, it's going to set you up for
56:41success if you know how to do it. You
56:43can build it yourself, and you don't
56:44need to rely on AI for some of these
56:46things. So, what you should ideally do
56:48is start with a design system already.
56:51As I said earlier, there's a million and
56:53two templates out there. Some are free,
56:56a lot are paid, but it's like they're
56:57like 50 bucks, 100 bucks, 150 bucks.
57:00There's some really crazy design
57:02systems. They're worth the investment.
57:05Especially if you don't already have a
57:07design system, or you have a design
57:09system, but you need component
57:11references to go off of.
57:13It's easy to plug and play with these
57:16systems. You can copy components from
57:17one to another, recreate them, reverse
57:19engineer them, do whatever you need to
57:20do. Don't rely on AI to build your
57:24simple components. It's a waste of
57:25tokens, it's a waste of time. Trust me.
57:28Because what I have in this design
57:30system, just as an example, again, this
57:31is the one that's part of our academy.
57:33I really cover like the fundamental
57:35components. Things like your your field
57:37and inputs, you know, your drop down,
57:40your text area, your checkbox.
57:42It's just all the components that every
57:44design system needs and that you need to
57:46get started. And you can imagine like it
57:48took
57:495 minutes for to generate just the
57:52button components, but it didn't
57:53generate all the variants that we
57:54actually want. It didn't go through some
57:56of that accessibility testing. So, you
57:58can imagine with all the components that
57:59you're seeing here on the left-hand
58:00side. Sorry, I know my face is probably
58:02covering
58:03some of them.
58:04That how many tokens and how many how
58:07much time it would take to go through
58:08and refine for you to not even know if
58:11they're built 100% right. So, my
58:13suggestion to you, if you're looking to
58:14build a design system from scratch with
58:16AI,
58:17use your tokens and time to build the
58:19larger, more complex widgets, modules,
58:22dialogues,
58:24more complex layouts.
58:26Don't spend the time building the easy
58:28components. Start with a template of
58:30some sort or build them yourself based
58:32on the tutorials that we have in the
58:34description. When it comes to working
58:35with AI on our design system is we need
58:38to train AI. It's not as easy as just,
58:42"Hey, this is my design system. Build me
58:43these widgets." We need to guarantee
58:46that AI knows when to use the variables,
58:48the styles, and when to use the
58:50components.
58:51So, it's a little bit of a prompting
58:53workflow that you need to go through.
58:54So, you need to train AI on your
58:56variables and styles first. Sorry, I
58:57should say variables and styles.
58:58Whatever.
58:59And then you need to train it on your
59:01components and any related documentation
59:03that you have.
59:05Only then
59:07can you start to use AI to build a lot
59:10of those larger modules, widgets,
59:12dialogues, leveraging the components and
59:15variables above because it's going to
59:17increase the chance that these here are
59:19built the very first time correctly. So,
59:23we don't have to burn through a million
59:25in due tokens in 15 minutes to build
59:27something that wasn't using what was
59:29already in our design system. So there's
59:31a little bit of a prompting workflow
59:33that we need to go through. But it's
59:35important that everything here
59:38is reusable.
59:39So what AI teaches itself, it can call
59:42on that knowledge a little bit later on.
59:45Because every time we build one of
59:46these, we don't want to have to revert
59:48back to step one, retrain it on our
59:50variables and our components and
59:51documentation.
59:52This is where custom skills come into
59:54play. I'm actually going to have a
59:55larger video talking about how to best
59:57train AI on our design systems. I don't
1:00:00know if I'm going to release this on
1:00:01YouTube or the academy, but we're going
1:00:02to go into the more technical specifics
1:00:04of things.
1:00:05But in the meantime,
1:00:08what I suggest you do
1:00:10is again, starting off with training AI
1:00:12on our variables and our styles.
1:00:16Have some sort of template like this for
1:00:18your variables,
1:00:19where you have the token name or the
1:00:23variable name, its value on light mode,
1:00:24its value on dark mode, and a
1:00:26description of when it's used.
1:00:29And this is why it's so important to
1:00:31build your variables yourself, because
1:00:33then you can know explicitly when those
1:00:36variables are used and when those
1:00:37variables are not used. If you ask AI to
1:00:39do it, AI is going to hallucinate. It
1:00:41might give
1:00:44wrong use cases to when to use specific
1:00:46variables.
1:00:47It's not going to be perfect.
1:00:49So spend a couple hours learn to build
1:00:51your variables correctly. Don't rely on
1:00:53AI to do it. Now,
1:00:55templates like these, they're
1:00:56everywhere. This again, this is the one
1:00:58that's part of our academy, but like
1:01:00there's a million and two free templates
1:01:01like that available on Figma community.
1:01:03Heck, it's super easy to create your
1:01:05own. So I'm not saying like you need to
1:01:08use this by any means. It's there
1:01:10there's ones that are free that are out
1:01:11there.
1:01:12But again, just a description, what the
1:01:14variable is, the name, its value on
1:01:16light mode, value on dark mode, and when
1:01:18it should be used. Because what we want
1:01:20to do now is just copy a link to this
1:01:23frame.
1:01:24And we're going to work with AI to build
1:01:26a skill
1:01:28around these variables and when they're
1:01:30used that AI can reference every time
1:01:33it's building something new. All right,
1:01:34we're inside Claude. You can do this in
1:01:36Codex too because both have
1:01:39the ability to build skills if you
1:01:40describe the type of skill that you
1:01:42want.
1:01:44Anyways, um
1:01:45let's enter in a link to that uh Figma
1:01:48frame that we copied. Please
1:01:51study all of the Figma variables
1:01:56uh inside of this table.
1:01:59Uh after coming to an elite
1:02:03understanding
1:02:07on the variables, their values, their um
1:02:13naming
1:02:14and when they
1:02:17are used, build a Claude skill
1:02:23that will help train Claude on
1:02:28when
1:02:29to use different
1:02:31variables for future designs. Please
1:02:35study all of the Figma variables inside
1:02:37of this table after coming to an elite
1:02:38understanding of the variables, their
1:02:39naming, and when they are used, build a
1:02:41Claude skill that will help train Claude
1:02:43in when to use different variables for
1:02:44future designs. Um
1:02:46do not
1:02:48uh include any type styles or type
1:02:52specific variables
1:02:55uh inside of this skill. We're going to
1:02:58that very shortly. Uh
1:03:00only focus on surface
1:03:03border
1:03:05uh
1:03:05text and icon
1:03:08variables. So, just some guardrails just
1:03:10so that cuz sometimes it does include
1:03:12type styles in this, but it's best to
1:03:13include sort of another um
1:03:16skill for the type styles. Let's go
1:03:18ahead and uh run this. This is what it
1:03:19came back with. As I said earlier, I
1:03:21have more content coming. I don't know
1:03:22if it's for YouTube or for the academy
1:03:24on the most ideal way to structure this,
1:03:27but there's still a couple things that
1:03:28I'm sorting through. I'm teaching you
1:03:30the method for now and things like that.
1:03:32Now, this is ideal what it actually did
1:03:34here is it gave us back these individual
1:03:37markdown files where it goes through
1:03:40where it sort of grouped everything. So,
1:03:41we have our border, our icon, our
1:03:43surface, our text, when to use them and
1:03:45what variables are available. And one
1:03:47thing that's really nice to Oh, perfect.
1:03:48Had some common pairings here, which is
1:03:50great. Um and what text does not have
1:03:53Okay, beautiful. So, you even went in
1:03:54deep here. So, there's no focus states
1:03:56on text cuz again, you won't need a
1:03:57focus state on text.
1:03:59Um and then it has a scale.md where it's
1:04:02sort of like how to choose the four
1:04:03different axes and everything else and
1:04:05giving it a lot of good context and when
1:04:07to essentially reference each of those
1:04:09markdown files. This is really good. For
1:04:11a first draft, you know, I've shown it a
1:04:14couple ways in the past where it doesn't
1:04:15go this level of
1:04:18depthness. Is Is that a word? Or this
1:04:21doesn't go this in-depth?
1:04:23Anyways,
1:04:24okay.
1:04:25So, this is good. And again, going to
1:04:27have more content coming in the right
1:04:28way to structure this.
1:04:29Um what we're going to do now is we're
1:04:31going to save this scale and let's flip
1:04:33back to Figma. What we want to do now do
1:04:36the same for our type scale. This one's
1:04:38a little bit different because
1:04:41there's no
1:04:42What word am I looking for?
1:04:44description on when it should be used
1:04:47because depending on the design that
1:04:50you're going for,
1:04:51you might use an H3, you might use an
1:04:54H2, you might use an H1, you might use
1:04:56an H1 regular, H1 medium, H1 semi-bold.
1:05:00So, it's not like your variables where
1:05:04you have explicit rationale as to which
1:05:07should be used where.
1:05:09If you have that and your brand is that
1:05:12like
1:05:13rigid
1:05:14great
1:05:16awesome
1:05:17but it's pretty rare for that to happen
1:05:19but what because even though we don't
1:05:21have the descriptions is we still want
1:05:24the AI to know
1:05:26what
1:05:27text styles and variables and things are
1:05:30available to it
1:05:32because one thing that happens
1:05:35is if you just ask it to generate
1:05:36initial designs as a mock up it might
1:05:39use a size that's like 15 like a font
1:05:41size for paragraph that's 15 and then
1:05:44when you want to apply your design
1:05:45system to it
1:05:46it never applies the design system to
1:05:49that one style
1:05:51because it's looking for something in
1:05:52the text styles that matches and when
1:05:54there's no match there
1:05:56it just defaults to not applying
1:05:58anything
1:05:59so we're going to still train it on
1:06:01these text styles and text variables to
1:06:03let it know what's available to it and
1:06:06what I mean by text variables sorry I
1:06:08wasn't I wasn't clear when I said that
1:06:10is inside of these notice how we have
1:06:13variables applied here so that's sort of
1:06:15what I'm I'm getting at again I copied a
1:06:18link to that frame so paste it in
1:06:21please study all of the
1:06:25text styles available
1:06:29inside our design system here
1:06:33please take note of all the variables
1:06:37applied to the styles and their values
1:06:42on
1:06:43desktop
1:06:45and mobile
1:06:47after coming to
1:06:50a complete understanding
1:06:54uh
1:06:56please build
1:06:59a Claude skill
1:07:02which will inform Claude on
1:07:06which styles are available.
1:07:10On which styles are available. Please
1:07:12study all the text styles available
1:07:13inside our design system above.
1:07:17Above, please take note of all the
1:07:18variables applied to the styles and
1:07:20their values in desktop and mobile.
1:07:21After coming to a complete
1:07:22understanding, please build a Claude
1:07:23skill which will inform Claude in which
1:07:25styles are available when building uh
1:07:27new designs. Something like that. We
1:07:30could probably clean it up a bit, but
1:07:31let's run. All right, here we go. Rock
1:07:33and roll. Look what it came back with.
1:07:35Which is another skill around our text
1:07:39styles. Ooh, it gave us some stuff here,
1:07:41too. Um
1:07:42but
1:07:43looks pretty good. I'm not going to go
1:07:44through it. There's a whole lot for me
1:07:45to read. I'm going to make the
1:07:46assumption it did it right. You should
1:07:47not do that, though. You should always
1:07:49read through it. So, we're going to go
1:07:50ahead, again, save this skill. Let's
1:07:51talk about components now. Uh field
1:07:53description skill must be 1024
1:07:55characters.
1:07:56Let's tell Claude it messed up. Okay.
1:07:58So, I'm going to fix that. It just just
1:08:00needs to be shorter. And then we're
1:08:02going to flip back to Figma to talk
1:08:03about components. Often times what I see
1:08:05is designers just being like, "Study my
1:08:07components."
1:08:08What happens then is the AI doesn't know
1:08:11where to look. It tries to go in a
1:08:13methodical order, but then all of a
1:08:14sudden if there's atom components on a
1:08:17page, it's going to analyze the first
1:08:20component, realize there's atom
1:08:21components that needs to study, it's
1:08:22going to jump to the atom component, but
1:08:23then it's going to forget to work its
1:08:24way back to the other component to then
1:08:27continue what it was doing before.
1:08:29And it's going to miss components
1:08:30because we just sort of gave it a broad
1:08:32instruction with nothing to help guide
1:08:34it. And our goal here is when we say,
1:08:36"Study my components."
1:08:38is that it moves through different
1:08:40component groups in a very methodical
1:08:43order and builds skills specific to
1:08:46these component groups. It's going to
1:08:49help keep the AI more on track when it's
1:08:51reviewing the components and what's
1:08:53available and lead to a better output
1:08:55when we're asking AI to generate
1:08:57designs. I want you to look here on the
1:08:58left-hand side as we have different
1:09:01groups
1:09:02for our components. So, you don't have
1:09:04everything in a one long list.
1:09:06And the way I've grouped things is I
1:09:07have my form elements with N field input
1:09:09drop down text area checkbox radio
1:09:11button so on and so forth. We have our
1:09:12navigation components. And then we have
1:09:14our data display components. Things like
1:09:16tables, tags, avatars, badges.
1:09:21This is a really easy way of grouping
1:09:24your components. These are sort of like
1:09:26three broad categories that are kind of
1:09:28all encompassing.
1:09:29You don't have to use these same
1:09:31categories, but it's a way to approach
1:09:33it and working to train the AI on your
1:09:35design system.
1:09:37Because when we
1:09:39tell AI
1:09:41what to look at, we're going to be
1:09:42specifying the individual groupings, the
1:09:44form elements, the navigation, the data
1:09:46display. We're not going to be
1:09:47referencing the entire like list of
1:09:49components because it can do that on its
1:09:51own.
1:09:52But these groupings help keep the AI a
1:09:54little bit more structured. Let's flip
1:09:56back to Claude. I'm going to paste in
1:09:57the link to that Figma file. I didn't
1:09:58copy a specific frame, just that Figma
1:10:00file. Please study
1:10:03the following components
1:10:06groupings.
1:10:08So, form elements, navigation,
1:10:12data display.
1:10:15Let's fix that.
1:10:19Do not move to navigation elements
1:10:24unless
1:10:26you have a mastery of form elements.
1:10:31The same with
1:10:33data display.
1:10:36Only move on once you have mastered
1:10:40the prior group.
1:10:44After coming to an elite understanding
1:10:49of all components,
1:10:51build a
1:10:53Claude skill
1:10:55around which components
1:10:58are available
1:11:01and
1:11:02when to use them. Now, in this design
1:11:05system, I don't have documentation. If
1:11:07you did have documentation, this would
1:11:09really come in handy, but we just don't
1:11:11have it. So, we're going to ask Claude
1:11:12just to come up around when these should
1:11:14be used, but the components are
1:11:15relatively simple. So, any AI should be
1:11:18able to detect when to use a button
1:11:20versus a link. Um after coming to a lead
1:11:22understanding of all components, build a
1:11:23Claude skill around which components are
1:11:25available and when to use them. Inside
1:11:27of the skill, and what I want is I kind
1:11:28of want to do it how we formatted the
1:11:30way in which we did the variables, where
1:11:32inside the skill, there are different
1:11:33like files talking about the form
1:11:35elements and navigation and data
1:11:36display. Inside of the skill, have
1:11:38different uh .md files talking about
1:11:44form elements, navigation,
1:11:47data display
1:11:49more in-depth. It's just a way to
1:11:51structure information again. We're going
1:11:52to have content coming out whether for
1:11:54YouTube or the academy on how to better
1:11:56like do this and the right way to do
1:11:58things going like the a deeper level
1:11:59down, but I think this is good for now,
1:12:01so let's run. So, this is what it came
1:12:02back with. Took a little bit of time,
1:12:04where we have, you know, our skill.md,
1:12:06and then we have uh individual .md files
1:12:09on navigation, form elements, and data
1:12:10display talking with the variants that
1:12:12are there. One thing I actually should
1:12:14have done is in the original prompt, I
1:12:17should have actually specified
1:12:19to also look at the properties, the
1:12:21variants, but as I took a quick
1:12:24quick look through, it looked like it
1:12:25picked everything up, but don't make
1:12:27that same mistake just in case. Like,
1:12:29taught me like after coming to a lead
1:12:31understanding of all components,
1:12:33it should say components, properties,
1:12:36variants, and anything else associated
1:12:38with it, all right? So, something just
1:12:40uh
1:12:41make sure that you don't make the same
1:12:42mistake as because sometimes it can miss
1:12:44specific variants, but I think this is
1:12:46good for the purpose of this exercise.
1:12:48Let's go ahead. Let's save this skill
1:12:50and keep moving forward. Inside of just
1:12:52a new Claude code session then, one
1:12:54thing I want to do is I just want to
1:12:55test out those skills. See how it looks.
1:12:57So, we haven't necessarily we're not
1:12:58building it out in Figma yet. Let's just
1:13:00build a dashboard.
1:13:02Please build Actually, let's go with
1:13:04like simple sample pricing page.
1:13:06Dashboard's too complex.
1:13:08Please build me a simple pricing
1:13:11widget. Please reference
1:13:14the components component and variable
1:13:19component type component type and
1:13:22variables
1:13:24skills.
1:13:26Whatever. Something like that. Let's
1:13:27just run it. It appears that the skills
1:13:29are being applied. The colors look
1:13:30right. Like the style looks right. Sure,
1:13:31it looks a little bit basic, but that's
1:13:33totally fine. We're going to solve that
1:13:35a little bit later on. Something I want
1:13:36to touch upon with Codex now, especially
1:13:39if we're designing in Claude code or
1:13:42designing in Codex, what we're about to
1:13:43chat about sort of applies to the other
1:13:46platform that we might not be using
1:13:48consistently. Based on what we looked at
1:13:49earlier.
1:13:51It It might make the most sense from
1:13:53like a token perspective from the
1:13:54efficiency perspective to build
1:13:56something to start in Claude.
1:13:59It's nice initial first draft. And then
1:14:02move it to Codex for some of the
1:14:03refinement. Again, a little bit more
1:14:04efficient on the time and the tokens.
1:14:06And then when ready, push it to Figma
1:14:08and then bring it back into Claude.
1:14:11But we have our skills inside of Claude,
1:14:14but not Codex.
1:14:16So, there's no ability to keep the
1:14:17changes in sync with our design system
1:14:19once we move everything into Codex. And
1:14:23that's what I want to fix next.
1:14:24>> What I did is
1:14:26I just ran this prompt. I need the
1:14:27design system components, variables, and
1:14:28textile skills in separate zip folders
1:14:30complete with all sub folders associated
1:14:32with the those skills. And it just
1:14:34packaged those up for me, so I can go
1:14:36ahead and download those. And let's go
1:14:37into Codex. What I did is just inside
1:14:40the Codex chat, I provided those zip
1:14:41files and had it just create the skills
1:14:44for me. So, now there's a match between
1:14:46the skills that are in Codex and the
1:14:47skills that are in in Claude. So if we
1:14:49need to make changes in Claude, they'll
1:14:51follow our design system. And if we need
1:14:53to make those changes in Codex, then
1:14:55it'll also follow our design system.
1:14:57It's important to note though that
1:14:59whenever you're modifying something, I
1:15:02always still like to provide the design
1:15:04system file in case it does need to
1:15:06reference it. Just something to call it.
1:15:08We'll look at that a little bit later.
1:15:09Now when it comes to generating
1:15:11designs,
1:15:13AI always works better from visuals.
1:15:16And I want you to pretend as if you're
1:15:17building a kitchen, like you just tell,
1:15:19you know, whoever's building your
1:15:20kitchen, "I want my kitchen to be to be
1:15:22dark."
1:15:23They might give you this
1:15:25with this sort of look with this type of
1:15:28cabinet.
1:15:30But you're like, "No, I imagined this."
1:15:33So take like the same example and apply
1:15:36it to your AI.
1:15:38Unless the people building your kitchen
1:15:40had a specific visual, there would be no
1:15:42way for them to realize that this is
1:15:44what you wanted in your kitchen. They
1:15:46were just taking an accurate guess. And
1:15:48too often we assume that AI is going to
1:15:50make the right call, and we end up
1:15:52burning through tokens, and we take way
1:15:55longer to get the design that we're
1:15:57looking for. And the best way to tell AI
1:16:00what we're looking for is to give it
1:16:01those specific examples. And the best
1:16:03place to find those specific examples is
1:16:05Mobbbin. And again, you can take 20% off
1:16:07the annual Mobbbin plan with the link
1:16:08that's in the description. It's
1:16:09hands-down one of my favorite tools in
1:16:11the design space right now. Where
1:16:12essentially what it is is just a massive
1:16:14repository of just about every screen,
1:16:17app flow that's out there. So if I'm
1:16:19looking at Wise as an example, like the
1:16:21money transfer app, I can come in here,
1:16:23see all of their specific screens. I can
1:16:25break down those screens into specific
1:16:27flows I can see here on the left-hand
1:16:29side. We're able to come in here and get
1:16:31a lot of good inspiration and see how
1:16:32others are doing it. Where, you know,
1:16:35this card example, you know, maybe I
1:16:36like this one. I can save this. I can
1:16:38copy it. They have a Figma plugin where
1:16:40I can just take these screenshots and
1:16:42upload them right to Figma. It saves me
1:16:44a ton of time when it comes to
1:16:46designing, and especially now with AI.
1:16:48What it allows me to do is take
1:16:50screenshots of examples that I like, so
1:16:53AI has something to go off of. So, I
1:16:55found this example uh that I like from
1:16:57this tool Tona. So, what I'm going to do
1:16:59I'm just going to come in here and just
1:17:00going to take a screenshot. Again, you
1:17:01can download it, too, but I just always
1:17:02take screenshots, and then I can see
1:17:04more like this down below, um which is
1:17:07great because you you want you always
1:17:08want to feed AI multiple different
1:17:10examples. Um so, you can come in here
1:17:12and take different screenshots of ones
1:17:14that are similar uh at least. But, maybe
1:17:17I want to use this as inspiration to
1:17:19recreate one of these designs for me
1:17:22now. So, let's flip back to Claude. But,
1:17:24I believe I said it earlier, but with
1:17:26the link that's in the description, you
1:17:27can take 20% off the annual Mobbin plan.
1:17:29I've gotten to know the Mobbin team
1:17:31pretty well. Um they're a great group,
1:17:33so definitely check out definitely
1:17:34consider supporting them and checking
1:17:36out Mobbin if you haven't already. Um
1:17:38so, what I did here is I just dragged in
1:17:40a copy of the research that we got. It's
1:17:42going to help us inform Claude code. So,
1:17:45using the screenshot uh attached or the
1:17:49uh reference example
1:17:52attached along with the
1:17:56uh variables
1:17:59type styles
1:18:03and component skills
1:18:06skills, please build
1:18:10Please uh build a
1:18:14page like this.
1:18:16Uh
1:18:17using our uh design system. And one
1:18:20thing I forgot to do that you should
1:18:21always do is let me just uh go back to
1:18:24Figma here. Sorry, I know you can't see
1:18:26it, where I'm just going to copy a link
1:18:29to that Figma design system just in case
1:18:32it needs to reference it. It's always
1:18:35best to do. I always do it as best
1:18:36practice. Here is our design
1:18:40uh system
1:18:42uh re- uh file
1:18:45if you need it.
1:18:47But, all info
1:18:48uh
1:18:49should be encompassed
1:18:53inside uh the Claude skills. Inside the
1:18:56Claude skills. Again, it's just
1:18:57something that I do. Even though we're
1:18:58not pushing to Figma yet,
1:19:00um it's just something that I do. Do not
1:19:03push to Figma
1:19:05to Figma yet. Uh simply just uh generate
1:19:09it
1:19:10locally. So, what this is doing is we're
1:19:12telling it what skills to reference, so
1:19:14it doesn't miss any. Especially we have
1:19:16a lot of skills, sometimes it might just
1:19:18skip over like a text style skills.
1:19:21Again, we gave it the design system
1:19:22file. It's just something I do, just
1:19:24best practice. And then telling it not
1:19:26to push to Figma yet, cuz you want to
1:19:27see the design that it comes up with
1:19:30first, and we can refine it here or in
1:19:32Codex and bring it back here before we
1:19:34end up pushing to the actual Figma
1:19:36files. Let's go ahead, let's run this.
1:19:38One thing I should have also done is to
1:19:40specify that we don't want it a
1:19:41one-to-one to what's here, cuz of course
1:19:43it's somebody else's design.
1:19:45Um
1:19:46it also too, if you provide more
1:19:47examples, it's going to find some
1:19:48synergies between those examples. Just
1:19:51something I want to call out. You
1:19:52shouldn't just provide mobile
1:19:53screenshots and have Claude copy it a
1:19:56one-to-one, because that's that's
1:19:57someone else's design. So, just wanted
1:19:59to call that out while that's
1:20:01generating. We now have an example
1:20:03pretty similar to the one that we
1:20:04wanted.
1:20:05So, you can see how just by giving AI an
1:20:08example or examples, we're able to get
1:20:11to our results first try, because
1:20:13how difficult would the prompt be to
1:20:15sort of describe what we're looking for
1:20:17here. What we're looking for here with
1:20:19all like like the the arc and this
1:20:21green, you know, dot here and
1:20:23everything. Sort of the layout. It'd be
1:20:25one hefty prompt and a whole lot of back
1:20:28and forth to try to get this. But, in
1:20:30that one prompt by providing an example,
1:20:32we were able to go from zero to 100
1:20:34relatively quickly. Again, ideally what
1:20:37we would want is for
1:20:39Claude to not produce something
1:20:41one-to-one. But I'm just showing you the
1:20:43workflow here. So, always be sure to
1:20:45provide a couple examples so we can find
1:20:47synergies so that your design is more
1:20:50unique. But there's an issue with this.
1:20:53On our design system, we don't have
1:20:56buttons that are
1:20:58this round.
1:21:00So, something was clearly off there.
1:21:03Where it didn't use Like it said it used
1:21:06the button, but it overrode
1:21:08the corner radius variables on that
1:21:11button to make it round.
1:21:15This is an example of what I mean where
1:21:18sometimes
1:21:20you're going to need to make tweaks in
1:21:21Claude.
1:21:22And if it's just this one tweak, it
1:21:25doesn't make sense to push it into Figma
1:21:27then bring it into Code Codex cuz that's
1:21:29a lot of tokens on its own.
1:21:32So, instead of focusing on this small
1:21:34item for now,
1:21:36what I might want to do if I was
1:21:38building out the rest of this
1:21:39onboarding, the rest of this
1:21:40application, is get all the other pages
1:21:43in there first.
1:21:44And then once I have all the other pages
1:21:46in there, I can take stock
1:21:49of what needs to change. How many items
1:21:52need to change? What is wrong?
1:21:55And then once I have a list of
1:21:56everything that needs to be changed, I
1:21:57can make the call as to whether it's
1:22:00worth the tokens, worth the time
1:22:02to push everything into Figma, then
1:22:04bring it into Code Codex to make those
1:22:06iterations,
1:22:08and then push it back to Figma, then
1:22:09bring it into Claude code when I'm
1:22:11ready.
1:22:12So, just because some one item is off
1:22:15here, does not mean that I need to go
1:22:17into Code Codex and make that change
1:22:19there then push it back.
1:22:21For smaller changes, it's still okay to
1:22:23work within Claude.
1:22:25But I think the best use of your time
1:22:27here was to build is to build out as
1:22:29much as you can in Claude code. And if
1:22:31there's a lot that needs to change
1:22:33instead of smoke is focusing on those
1:22:34some of those smaller items. You can do
1:22:36that in Codex at a cheaper token cost
1:22:39and with less time and then bring back
1:22:41to Claude code when you're ready. I want
1:22:43to drop some knowledge on you here.
1:22:45Because believe it or not, Mobin is
1:22:47actually not the only place to spin up
1:22:49inspiration.
1:22:51Is
1:22:52here we are just in chat GPT.
1:22:55And I'm just going to configure this
1:22:56here. I'm going to use thinking 5.5.
1:22:59We're not in Codex. We're just in chat
1:23:01GPT.
1:23:02Something I want to let you know
1:23:04is
1:23:06what I'm going to do is I'm actually
1:23:07going to provide that screenshot here.
1:23:10Let me drag it in to chat GPT
1:23:13and say,
1:23:14uh, generate me some alternate options
1:23:18of a screen like, uh, this. Let's run.
1:23:22And look what we have now.
1:23:24We have a little bit of a different
1:23:26option.
1:23:28And a couple of different options at
1:23:29that.
1:23:31And this is what not a lot of people
1:23:33know is in GPT 5.5
1:23:36is really good
1:23:38at generating
1:23:40designs based on even just a prompt or
1:23:44other pieces of info that you give it.
1:23:46It's really good. And it's fast. It's
1:23:50included in your chat GPT plan. I've
1:23:53gotten a lot of value from this so far.
1:23:55We can change aspect ratios of things.
1:23:57We can, um,
1:23:59usually just There's usually a Come on.
1:24:01What's going on here? There's use
1:24:03There's usually a little like, um,
1:24:05pencil or highlight button where I can
1:24:08highlight specific parts on an image
1:24:09that I want change. Maybe it might just
1:24:11be if I only have one generation, not
1:24:13multiple. But it's a wicked tool and
1:24:16something not a lot of designers know.
1:24:18So, what I'm going to do is I'm just
1:24:19going to download this image
1:24:21specifically. Maybe I'm going to have
1:24:22Claude just adjust the initial design so
1:24:24it's not like a one-to-one match. Back
1:24:26inside Claude code, let's drag in that
1:24:29item that we downloaded from ChatGPT.
1:24:32Here is another example I like. Can you
1:24:37tweak the design
1:24:39to match? And let's run. And look what
1:24:41it came back with now. A little bit of a
1:24:42different example. So it's not a
1:24:43one-to-one match to what
1:24:45was there before. Now, some of the
1:24:47coloring is a little bit off. I could
1:24:49have been a little bit more explicit,
1:24:51but I think that's fine. For the most
1:24:53part, it looks as if it's following our
1:24:54design system relatively to a T, and you
1:24:57know, I can't really complain except
1:24:58with some of the smaller things as well.
1:24:59But again, now that we have some of
1:25:01these colors, and this color isn't in
1:25:02our design system, something wrong with
1:25:04the button here, some of the radiuses
1:25:05are off as well. Those are things that,
1:25:07you know, if it's worth it to bring it
1:25:08into Codex and make those changes, we
1:25:10can do that, or we can do it right here
1:25:12inside Claude code. What I want to do
1:25:14now, let me just copy a Figma link, is
1:25:16uh Sorry, here we go. Back in Claude.
1:25:19Uh we're going to push this to Figma.
1:25:20Please push this to Figma.
1:25:23Uh remember uh to follow uh the design
1:25:27system
1:25:29and reference the textiles
1:25:34variables and components
1:25:37uh rules. So, let's run this. This is
1:25:39what's in Figma now. Looks really good.
1:25:41Where
1:25:43we have, you know, our different
1:25:44sections. It looks like our styles and
1:25:46variables are all applied well, which is
1:25:48great.
1:25:49Um you know, it didn't apply the drop
1:25:50shadow style, but that's just cuz I
1:25:52didn't include it in like one of those
1:25:54skills. Probably didn't know to look
1:25:55with look for it. But you can see here
1:25:56that it's using some of the raw
1:26:00the the
1:26:01instances of the components. Now,
1:26:03personally, I would have loved for this
1:26:04to be a radio button label, and not just
1:26:05the radio button, but that's okay. Not
1:26:07the end of the world. And looks like our
1:26:10items are applied here. Let's see what
1:26:11color it used here. So, it used Okay, so
1:26:13it's surface warning default subtle is
1:26:15the variable it used for this kind of
1:26:17I think it looks pretty good, you know,
1:26:19and it fixed like the rounded corner
1:26:21that I was that I was showing in um
1:26:24Claud code and it like adjusted it to
1:26:26the actual button with the actual corner
1:26:28radius instead of it being round it's
1:26:30just a little bit curved. So, I think it
1:26:31looks pretty good for the most part. One
1:26:33thing that's important to note here is
1:26:34before he were to bring this into Codex.
1:26:36Say you have a bunch of app screens
1:26:37here, you need to make a bunch of
1:26:38changes and you don't want to do it in
1:26:40Figma, you can bring it into Codex then.
1:26:43As one thing you want to do is make sure
1:26:45that a lot of the small things are
1:26:47cleaned up. Like the styles are applied,
1:26:49variables are applied
1:26:51cuz you don't want to do that in Codex
1:26:52if you can just do it right in Figma
1:26:53itself and then bring it into Codex or
1:26:55back to Claud code. So, if you ever have
1:26:57to push a design to Figma, try to polish
1:26:59it as much as you can in Figma before
1:27:01you bring it back into Claud or back
1:27:03into Codex or you know, back into Claud
1:27:06as I mentioned. So, just something for
1:27:08you to be aware of. Hey, thanks for
1:27:09watching this one. Really appreciate you
1:27:10being here. Be sure to drop a subscribe.
1:27:12Um going to have a lot more content
1:27:14coming on working with Claud, Codex, AI
1:27:17workflows, and a whole bunch of other
1:27:19things as well. So, be sure to you know,
1:27:21check the channel out, subscribe, check
1:27:23back in. Uh also be sure to
1:27:26check out our website. Link for that is
1:27:27in the description where I'm sort of
1:27:29teaching everyone about AI workflows,
1:27:31design leadership, and a whole bunch of
1:27:33other things as well. I'm always adding
1:27:34new courses to this, working on a user
1:27:36testing course right now as we speak.
1:27:37So, again, that link is just in the
1:27:38description. And yeah, thanks for being
1:27:40here. Uh be sure to share this video and
1:27:41rock and roll. See you at the next one.

About this transcript

This page contains the full transcript of Designing With AI: Claude, Codex, Figma | Full Guide by UI Collective, generated from the public captions YouTube serves with the video. The transcript has 16,121 words across 2,546 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to choose a caption track available on the video.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, caption language selection, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.