11:49Austin Marchese · Tutorial
How Anthropic Founders ACTUALLY Pick What to Build with Claude
A former startup COO reverse-engineers the four decision rules behind Anthropic's industry-leading shipping velocity.
June 5thThe argument in one line.
AI design in 2026 is not one tool but a four-tool workflow, and knowing which platform to use at each stage is the skill that separates efficient designers from ones burning through their quota on the wrong job.
Read if. Skip if.
READ IF YOU ARE…
- A product or UX designer trying to integrate AI tools without burning through token budgets in the first week.
- Someone whose boss has said to just import the design system to Claude Design and you want evidence of why that fails.
- A designer who generates initial designs in Claude or Stitch but has no system for keeping those designs on-brand.
- Anyone comparing Claude Code vs Codex and wanting real benchmark data on time and token cost for the same task.
SKIP IF…
- You are a developer -- the entire workflow is designed around the designer perspective and Figma handoff.
- You want a deep technical dive on a single tool rather than a workflow overview across four platforms.
The full version, fast.
The single AI tool that does everything designers want does not exist yet. The answer is a four-tool chain: Google Stitch for near-free mid-fi mobile concepts to align internal stakeholders, Claude Design for expensive but high-quality first drafts once you know exactly what you want, Codex for iterative edits at 3-4x fewer tokens than Claude, and Figma as the handoff layer between all of them. Training AI on your design system requires a deliberate three-step sequence -- variables, then type styles, then components by group -- and storing that knowledge as custom skills so it persists between sessions.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Where the time goes.
00:00 – 00:52
01 · Introduction
Tools covered, what the video promises, community/academy plug.
00:52 – 06:43
02 · AI is Not a Tool, AI is a Workflow
Core thesis: why the one-tool dream does not exist yet, and what the real workflow looks like.
06:43 – 09:16
03 · The AI Design Stack
Claude, Codex, Stitch, and Figma introduced as four distinct roles. Everything else is noise.
09:16 – 16:16
04 · Claude vs Codex: Key Differences
Claude has better code quality; Codex uses 3-4x fewer tokens. Claude more accurate with Figma attributes.
16:16 – 23:11
05 · Setup: Figma Skills and Figma MCP
Installing Figma skills from GitHub, connecting Figma MCP in Claude and Codex.
23:11 – 26:47
06 · Google Stitch
Stitch demo -- strong mobile output, weak desktop. Fast iteration without burning tokens.
26:47 – 26:49
07 · Where Stitch Belongs in the Workflow
Use Stitch to align stakeholders on metrics and widget formats before touching Claude Design.
26:49 – 31:44
08 · Claude Design
Claude Design demo -- higher quality output, severe usage limits (8% quota per dashboard), no canvas interactivity.
31:44 – 32:35
09 · Stitch Into Claude Design
Stitch reduces Claude Design iterations by aligning stakeholders on specifics first.
32:35 – 35:15
10 · Claude Design Limitations
Not a design canvas. After two prompts, 15% of weekly quota used. Design system import unreliable.
35:15 – 40:40
11 · Claude vs Codex Comparison Experiment
Same design edits: Claude 12 min/38k tokens, Codex 4 min/17k tokens. Real benchmark data.
40:40 – 45:25
12 · Best Use of AI Tokens
Full workflow mapped: Claude first draft, Figma tweaks, Codex iteration, Figma handoff, Claude dev cleanup.
45:25 – 48:04
13 · Design Systems and AI: Overview
How to keep AI design on-brand. The training workflow introduced.
48:04 – 50:32
14 · Claude Design System Limitations
Live demo: importing a real design system -- missing button variants, wrong type scale, incomplete components.
50:32 – 52:32
15 · Building Design Tokens with AI
AI-built variable library looks complete but has missing disabled states. Audit takes longer than building manually.
52:32 – 58:32
16 · Figma Variables and AI -- Button Component
Button component: 6 min, 5,400 tokens, still missing variants. AI is for complex layouts, not base components.
58:32 – 1:01:34
17 · Training AI on the Design System
Three-step sequence: variable table, type styles, then component groups. Custom skills store the knowledge.
1:01:34 – 1:03:48
18 · Design System Claude Skills (Variables)
Building variable skill from token table. Output: grouped markdown files with common pairings.
1:03:48 – 1:08:48
19 · Components and Claude Skills
Training AI on component groups methodically. Testing with a sample pricing widget.
1:08:48 – 1:10:09
20 · Adding Claude Skills to Codex
Making design system skills available in Codex so brand context persists when moving between tools.
1:10:09 – 1:14:04
21 · AI and Design Research with Mobbin
Using Mobbin as visual reference to give AI direction before generating designs.
1:14:04 – 1:19:23
22 · Building Production UIs with Claude Code
Production UI built with Claude Code using design system skills -- personal info onboarding screen pushed to Figma.
1:19:23 – 1:27:43
23 · Outro
Final result shown in Figma. Channel and academy links.
Lines worth screenshotting.
- AI for designers is a workflow across four tools, not a feature inside one -- the right question is not which AI tool, but which stage of the process.
- Google Stitch is the correct tool for early stakeholder conversations because it generates mid-fi mobile concepts in seconds at near-zero cost.
- Claude Design used 8% of a weekly usage quota to build one dashboard; early-stage exploration in Claude Design is how you run out mid-sprint.
- Codex runs the same iterative design edits in 4 minutes and 17,000 tokens vs Claude at 12 minutes and 38,000 tokens.
- The token-efficient workflow is: Claude for first draft, Figma for layout tweaks, Codex for iteration, Figma for handoff, Claude for developer cleanup.
- Claude is more accurate than Codex when pushing designs to Figma -- better auto layout, fill/hug property handling.
- Importing a design system to Claude Design does not work reliably -- missing variants, wrong type scale, incomplete components.
- Asking AI to build your variable library creates an audit problem: you spend more time verifying what it gave you than building it yourself from a tutorial would have taken.
- Buttons -- the simplest component -- took 6 minutes and 5,400 tokens and still came back missing variants; AI is not the right tool for simple components.
- Training AI on a design system requires three ordered steps: variables/styles first, then type styles, then component groups -- each before the next.
- Giving AI a single broad instruction to study all components leads to missed components; specifying ordered groups keeps it methodical.
- Custom Claude skills are the persistence layer for design system knowledge -- without them AI forgets everything between sessions.
- Figma own AI lags far behind Claude, Codex, and Stitch -- Figma Make applies error state variants globally without recognizing variant names.
- Claude produces better code quality than Codex; developers consistently redo Codex-generated code in Claude Code before implementation.
- Google Stitch produces dramatically better results for mobile than desktop -- the same prompt yields a polished mobile app and a generic desktop UI.
Train AI on your design system before you build anything.
WHAT TO LEARN
Every wasted token in AI design comes from the same mistake: giving AI a canvas before giving it context.
02AI is Not a Tool, AI is a Workflow
- The AI tool that does everything designers want does not exist in 2026; any workflow built around that assumption will break.
05Google Stitch
- Google Stitch is the right tool for early stakeholder conversations: mid-fi mobile concepts in under a minute at near-zero cost.
- Stitch consistently produces better results for mobile than desktop -- the same prompt yields a polished mobile app and a generic desktop UI.
08Claude Design
- Claude Design weekly usage limit is severe -- one dashboard costs roughly 8% of a weekly quota.
- Claude Design is not a design canvas -- elements cannot be rearranged directly; all changes require prompting.
11Claude vs Codex Comparison Experiment
- Codex runs the same iterative design edits in 4 minutes and 17,000 tokens versus Claude at 12 minutes and 38,000 tokens.
- The token-efficient chain is: Claude for first draft, Figma for tweaks, Codex for iteration, Figma for handoff, Claude for developer cleanup.
15Building Design Tokens with AI
- Asking AI to build your variable library creates an audit problem: verifying what it gave you takes longer than building variables yourself with a tutorial.
16Figma Variables and AI
- Buttons took 6 minutes and 5,400 tokens and still came back missing variants; AI is not efficient for base components.
- AI is best applied to complex widgets, modals, and layouts -- not the base components every design system template already includes.
17Training AI on the Design System
- Training AI on a design system requires three ordered steps: variables with usage descriptions, then type styles, then components by named group.
- Specifying ordered component group names keeps AI methodical and prevents it from skipping entire sections.
- Custom skills in Claude and Codex are the persistence layer for design system knowledge -- without them, AI forgets between every session.
Terms worth knowing.
- Figma Skills
- Markdown files that teach AI how to use Figma -- when to apply variables, how to use components, how to navigate the canvas. Distinct from Figma MCP, which gives AI read-access to design files.
- Figma MCP
- A Model Context Protocol server that gives AI (Claude or Codex) direct access to read your Figma design files, enabling it to understand existing designs before making changes.
- Design tokens
- Named values in a design system (colors, spacing, typography sizes) that can be applied globally. Changing a token updates every component that references it.
- Three-tiered variable approach
- A Figma variable architecture with brand (raw hex codes), alias (semantic names like primary/error), and map (surface/text/icon/border) collections -- each tier referencing the one below.
- Mid-fi wireframe
- A design fidelity between low-fi (basic shapes) and high-fi (pixel-perfect) -- enough detail to discuss layout, data, and widget types with stakeholders, not polished enough to show clients.
- Token budget
- The total number of AI input/output tokens available in a subscription plan. Different tools consume tokens at different rates for the same work.
- Claude Design
- Anthropic design-focused AI tool at claude.ai/design that generates high-fidelity UI prototypes from prompts, with a weekly usage quota separate from Claude Code.
- Codex
- OpenAI answer to Claude Code -- an AI coding agent that generates and modifies UI code, running at roughly 3-4x lower token consumption than Claude for equivalent design iteration tasks.
Things they pointed at.
Lines you could clip.
00:56
“AI is not a tool. AI is a workflow.”
08:08
“Codex uses about three to four times fewer tokens for the same work as Claude.”
54:26
“Buttons are the easiest component of a design system to build. Full stop.”
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
analogystory
00:00Today, we're breaking down the full AI design workflow from start to finish. We'll look at the current state of AI tools in Figma, how to set everything up, when to use Claude, Codex, Claude Design, Figma, and more, and how to combine them without wasting time or burning through tokens. We'll also cover how to train AI in your design system, generate original screens, improve the quality of AI outputs, and build a workflow that actually feels usable for real product design work.
00:22Before we begin, couple quick things. If you're a big fan of myself, what we're doing, consider checking out UI Collective Academy. Again, this is all just on our website, link in the description, where you get access to a bunch of great courses on AI, design systems, more.
00:32Private Slack channel access me and the team. They're always releasing new content on this as well. Or if you don't wanna support the academy, it's totally free to join the community.
00:39You can come ask any question for free on our forum. Also get access to some great savings and resources too. So whether you wanna join the community or support the academy, all this is just on our website.
00:47Thanks for being here. Also, come follow me on X. Link to my X along with our website, both in the description.
00:52Right off the bat, for designers, AI is not a tool. AI is a workflow. Two to three years ago, when Figma was all we were using, that's when design relied on one tool.
01:04That's it. All we were using was Figma. We weren't using anything else.
01:08But now with the introduction of AI, the ability to spin up rapid iterations, spin up handoff documentation, do a lot of the manual work that we were doing before, using AI is not just about knowing how to use one tool.
01:22It's about knowing how to use multiple tools, how to collaborate between those tools, and how to adjust your approach depending on what it is that you're actually working on. So as designers, we're always looking for one tool to do everything that we were using Figma for before. But now it's about how we're using multiple tools to make ourselves a little bit more efficient.
01:43Let's take a look at what that looks like. And naturally, because Figma was our home for so long, we're looking for a tool that does everything. And I actually got an email from someone recently whose boss is, like, really putting pressure on them to find a tool that does exactly what I'm about to talk about here, but doesn't exist.
01:59Um, so what designers are really looking for in one tool is the ability to upload a design system flawlessly where the AI automatically knows every variable, every style, every component, when to use those components, variables, and styles. It is just an expert on everything right out of the gates.
02:16The ability to prompt our way to desired designs on a Canvas UI, very similar to Figma where we can select certain elements, move things around, manually adjust things if we need to. An option to have Figma like functionality for finer adjustments, like the ability to, you know, control the variables globally, the ability to tweak spacing just between a couple items.
02:39Uh, one click to generate all handoff documentation for both designers, for developers, when to use components, accessibility guidelines, when to use specific pages, and then a one click build to make developers lives easy where you just click build and it generates, you know, perfect code for the developers to go and implement.
02:58But it doesn't work like this. This is our dream, and maybe in three years when we get there in the future, but this does not exist in current state right now.
03:07Instead, what it looks like is we need to train AI in our design system. We can't just upload it and expect AI to do everything, because we need to go through a series of prompts to make sure AI understands our current brand, our styles, our variables, our components, and then store that knowledge somewhere so you don't need to keep telling it every time.
03:27We need to generate multiple iterations across tools because the output that you might get from something like Claude is gonna be different than the output that you might get from something like codec codecs, which is gonna be different than something that you might get from Google Stitch. So it's important to generate multiple iterations across some of these tools.
03:44And then when it comes to the Figma integration or how Figma loops into this, if you can push and pull from Figma to different AI tools for iterations.
03:54So something might come out in Cloud Code, I can push that to Figma, make some tweaks in Figma, make the styling, the layout tweaks that I want, and then bring that back into whatever AI tool that I was working with before. So there's a little bit of give and take there.
04:07And then build out with AI with the help of a developer. So it's not as easy as just one click builds everything perfectly, a perfect code.
04:14You have everything that you want. You need developers are there for a reason. We can support them on some of these items, but it's not as easy as just going from prototype to production level code right away.
04:28And then we need to work with AI to generate a lot of the documentation. If whether we're building design system components, you know, designs, you know, different modules. AI doesn't automatically know the usability guidelines, the accessibility guidelines for everything that we're spinning up.
04:43We still need to dialogue with the AI in order to get the specific outputs that we're looking for. And with this, this is not just one tool, but this is a suite of different tools in the AI space that we need to know how to maneuver through, how to generate with Claude, how to generate with Codex, how to generate with Google Stitch.
05:03Where does Figma come into play? How do we get the better results with each of these tools? Because as the AI landscape evolves, we can't just get away with just knowing one tool.
05:13If we just get away with knowing Google Stitch, then we go into an interview, or all of a sudden we need to work with Claude or Codex, then we're behind other designers. So you need to be able to work with all of them.
05:25It's not like you can just know Claude, just know Codex. They're all gonna make their own leaps in innovation, especially in the design space eventually.
05:33And you just saw that with Claude Design. Codex might come out with something similar in the future that might be better than what Figma offers and be better than what Claude offers.
05:44So it's important to have a full understanding of the entire end to end workflow. For the topic of Figma, is there's a lot of clickbait that's out there where people are like, oh, Figma's finished.
05:56Figma's gonna go bankrupt. Figma doesn't stand a chance. Despite the fact that their stock price is down, like, 85 plus percent of all time, it's not finished.
06:06It's still gonna be around. But they've fallen behind in the AI space. You know, Figma's AI is incredibly underwhelming.
06:14Figma's design system sync does not work very well. You can sync your design system with Figma Make, and all of a sudden, it's applying, like, your error states to absolutely everything, which is weird because you would think that Figma's Make would be able to recognize that it's an error state because the variant is named error, but it doesn't.
06:33It doesn't work very well. And their general AI just produces really generic results. You can just get way better results in Codex and Claude code and Claude design and Google stitch as well.
06:41So they've got some work to do there. But for today, these are the tools that we're gonna go over. We're gonna go over Claude.
06:47We're gonna go over Codex. We're gonna go over where Figma comes into play. We're gonna go over Google Stitch as well.
06:52A lot of these concepts I might have covered in other videos as well, but hoping this sort of the one stop shop, uh, for everyone. Everything else besides these tools here, as of right now, it's just noise. There's a lot of startups trying to enter the AI design space, but nothing that really comes close to what's here or where I found value, like, baking it into my workflow.
07:12So just something that you should be aware of. To make the most of this course, this video is download Codex, download or have an account with Claude, preferably you have the desktop app, and also make sure you have a Google account so you can follow along with us with Google Stitch as well and try out all these tools.
07:31I'll put links to these in the description. You're gonna see that Claude and Codex, very similar. Codex is essentially OpenAI's answer to Claude code.
07:39But both can produce really good designs, and there's some key fundamental differences that you need to be aware of. First off, Claude is the better code. If you're working with developers, they're gonna wanna use Claude code.
07:47They're not gonna wanna use Codex. I've chatted with one developer. It was the designer who was using Codex.
07:52And then when the designer gave them the designs, they'd redo a lot of it inside of Claude code. So it's not like a one to one both produce the exact same code.
08:02However, Codex uses about three to four times fewer tokens for the same work as Claude. What this means is that if we're designing with AI and iterating, Codex might be the better option because it allows us to go a little bit farther with the tokens that we have available.
08:19If you're on a Claude paid plan, especially that base pro plan, you're gonna realize that even though you're paying for it, you're often gonna run out of tokens, especially as you're working with larger and more complex designs, something you should know about.
08:34Claude is, however, is more accurate with using Figma attributes when pushed to Figma. Sorry. The wording here is a little bit off.
08:41But what I mean by that is if I'm working with a design inside of Claude, and I have my Figma skills, Figma MCP connected, which we wanna get to a little bit later, and I push it to Figma, it's generally a little bit better about using auto layout, using the response in this properties like fill, hug, then codex.
09:01Others might experience it a little bit differently, but it's just something that I've noticed. Then lastly, Claude is getting more expensive. I heard rumblings online of them think about removing or planning on removing their $20 a month plan and making it minimum a little bit more expensive.
09:15So just something that you should keep an eye on. Before we design, I wanna do some setup. Now this is more foundational.
09:20I've covered it a lot in other videos. So you've if you've already done this, you can skip it, which is connecting Figma MCP and Figma skills. Now they're not the same thing in theory.
09:30Is Figma MCP is about giving AI access to your actual design files, the ability to read the design files, understand what's going on. If Figma MCP isn't connected, the AI can't read anything about your Figma files. But Figma skills are more on teaching the AI how to use Figma.
09:50If you use Figma MCP, you can still do a lot of things that you wanna do inside Figma, um, build designs.
10:00But the Figma skills teach the AI how to apply variables, how to use components, how to better use the Figma Canvas.
10:11Now luckily for us, we're gonna walk through how to install Figma MCP and Figma skills on both Codex and also in Claude. We are on the Figma community skills site.
10:22I'll put a link for this in the video description. So these are all the skills that Figma promotes. Now we can create our own skills for specific purposes unique to us inside of Claude or Codex.
10:32We'll look at that a little bit later. But there's certain skills that we're gonna want to install just for us designers. And it's important to note as well that some of these skills, they're more focused on developers, so they don't necessarily apply to us.
10:44But we're gonna focus on the ones that apply most to us today. Right away, we need this required skill, this Figma use skill. If we don't have this installed, the other skills won't work as well.
10:55So what we wanna do is we wanna download this from GitHub. And if we hit this MCP server guide, we want to download the ZIP entirely.
11:05The reason being sorry. Let's go back here. Oops.
11:07Why did I click that? Sorry. Is on the left hand side, we have all these skills that go into this larger skill.
11:14So we want to install them in bulk. That said, though, there's other skills that we're interested in that aren't bundled in this Figma use skill because these skills are already bundled inside of this. Now the other ones that we're gonna want to apply that I find a lot of value in are the supply design system skill.
11:31So say we have existing Figma designs. What we can do is we can call this skill and connect those designs to our existing design system. I don't use it a ton, but I have a lot of designers who have found value in this one right here.
11:45So we're gonna go ahead and install this. Now for this, what we just want here is we just want the skill dot m d. So we can come in here and just choose to download that.
11:53And probably my favorite skill out of all of these, this audit design system skill. The output that I get from running this is great because what it does is it audits designs that I already have and checks to see where that design system is not applied, where it's applying the wrong component, the wrong variable, the wrong style, where those variable styles or components aren't being used at all, and then it will fix it based on that.
12:15It's my favorite skill that they offer. So, again, it's just the skill dot md that we're really interested in here. Let's go ahead and download that, and let's open up Claude.
12:22Here we are in Claude. In in Claude, on the left hand side, you're gonna see, like, a customize button. So just hit customize.
12:29You're gonna navigate to a page like this. So the way in which we install things is different on Claude than it is Codex. Let's start off by installing our Figma use skills.
12:41So I wanna show you something here. It's where a lot of designers tend to get tripped up. Is we wanna bulk upload that zip file because it contains all of those sub skills.
12:52So let's choose to, uh, go ahead and upload a plugin, and let's just drag in that first zip file that we had downloaded. So the MCP server guide zip file. So let's go ahead, upload that.
13:04So I can see the plugin is installed and ready to use. So if we click in here, you can see that the plugin that includes the Figma MCP server and skills for common workflows.
13:15This is where it's not super clear because we have all of those skills, but under connectors, we're technically not connected to Figma yet.
13:27So despite the fact that it says includes the Figma MCP servers, we still need to initiate that connection. So under connectors, let's just choose to install and then just choose to connect.
13:38And what that's going to do is going to open up Figma in the browser. So just sign in to Figma there, uh, and go ahead and connect.
13:47Sorry. I'm trying to do it offline here, but it's being a little bit slow. So I'm just gonna pause the video here.
13:51It finally loaded inside of my browser. So I just hit agree and allow access, and I can see now now that Figma MCP is installed.
13:59So it's important to note here just by uploading, uh, that zip file, even though it says includes the Figma MCP servers, you still need to connect it.
14:08The alternative way that you can do it is you don't want the Figma skills. It's just under connectors. You can choose to browse connectors and then just search Figma.
14:16And again, it's this one right here, uh, that we're interested in, and we have already installed it. So all is well. Beautiful.
14:23Now those are installed. Here we are inside of Codex. This is where things can kinda get a little bit weird because people experience things differently, and I don't know why.
14:37Like, as of yesterday, I was able to have this Figma plug in installed, which consists of all these different skills. I just chatted with someone who was on a personal plan just like me, and they're able to install the Figma plug in.
14:55So you might there's there's I don't know what's going on. Put it that way. But the Figma plug in here actually has all of the skills that we had installed in that Figma use skills.
15:07We didn't need to download the item from GitHub, upload it. It's all wrapped inside of this one skill.
15:15I'm hearing mumblings where this is only gonna be available to workspace users, maybe that's just slowly getting rolled out. I don't know. But there's a workaround here.
15:23Where under skills, again, at the top here, and if you search Figma, you just go ahead and install all of those same skills.
15:32So starting off with that Figma MCP, that Figma Code Connect, Figma Crate Design Systems Rules. So all of those sub skills that were in that zip file that we had installed a little bit earlier, they're now installed for us and ready to rock.
15:48So a little bit of a different workflow. You know, I'm seeing different thing people different people experiencing different things. Some skills are available.
15:56Some skills are not available. Sometimes that plugin is available. Sometimes that plugin is not available for users who are just on a personal plan like myself.
16:04Just something to be aware of sometimes. Yeah. I know it can be confusing.
16:09One thing real quick, Codex finally got his act together and allowed me to install this Figma plug in, so I had installed it. In terms of basic setup, that's kind of it. We have those, you know, Claude Codex, whatever installed.
16:21We're using it. We're signed up. We have Figma MCP connected.
16:24We have those Figma Figma skills also installed. Let's go through the tools now, how they work, how to make the most of them. I wanna start off with Google Stitch for a couple reasons.
16:35One, because Google Stitch, we can't train it on our on our design system to the way that we would expect. We can't paste in a Figma file here and build skills around our design system.
16:48That's a big limitation to Stitch as of right now. I'm sure they're gonna change it in the future, but as of right now, that is not existing functionality. The other reason why I wanna start with Google Stitch is because it's most different.
17:01It's way different than Claude design. It's way different than generating designs with Claude code or Codex. I wanna show you what I mean.
17:11One thing I wanna do here is we're just gonna start off with thinking with 3.1 pro cause it's not gonna be as quick, but it's yet better quality with it. So we're gonna start with thinking with 3.1 pro. And let's build a financial app.
17:26So my background is in financial technology. So what desktop web experience should we start with? And one thing I wanna call out here is Google Stitches web designs are never really that good.
17:39The app designs usually way better. What I wanna do is let's just say, run it again. My background is a financial technology.
17:47So, uh, builds a financial, uh, management app for financial advisers.
17:57Let's just run that. This year, great result, and this took about thirty seconds to generate.
18:05So pretty quick. Now there's still issues with it. It's not like something I can take right away and be like, yep.
18:11Sending this to developer. Done. But this is really good for iteration.
18:18I need to get some layout inspiration fast based on an app that I'm trying to build, of course, beef up the prompt a little bit. But this allows me to sort of get an idea of the structure down, the types of data that I should display, how I should structure my bottom nav.
18:34And, again, some of this stuff looks AI generated. This is clearly an AI generated widget, but that's okay.
18:40It's going to get better. I can see so we have our client list, our client profile, adviser dashboard, rebalancing tool.
18:49This gives me enough to get started with and start having meaningful conversations with others on my team around what it is we're going going to want to display on each page. Wanna show you something here.
19:00As I ran the exact same prompt, but show us for a desktop, and this is what it gave me. The result is way worse.
19:07Way worse. So whenever it comes to working with Google Stitch, you are going to get way better results working with mobile designs than you are on desktop.
19:18Like this here, super junior, feels super AI generated, not great. But that's not to say that Stitch can't give you good results. A lot of times, the base prompts that it might give you as examples will give you really good results.
19:31And sometimes, even the prompts that you run give you results that look like this, where it's clean, it looks good, It has polish to it.
19:44So stitches, because it's still in beta, you never get a accurate result all the time.
19:55Sometimes it's hit or miss. Sometimes the result is not good at all. Going back to the mobile version, is Stitch is really good for just basic iteration?
20:04Like this market overview page, this adviser dashboard. Maybe I want additional variations.
20:10I can come in here under generate, select variations, select the number of variations I want, Specify a creative range, like more refining, exploring, or reimagining completely.
20:21So let's just explore some different versions here. Choose what it is we want to vary. So maybe just layouts.
20:27And now we can choose to generate different variations based on specific screens, specific elements. We're off to the right here. What it's gonna do is gonna generate those variations.
20:36There we go. You can see that they're they're generating here. Stitch glitched out while I was generating those two designs, I just had to generate it again this time of three.
20:45And this sort of came back with. So just some different layouts here where this one's got that bar graph.
20:50Again, sure, some of the bars are hard to see here, you know, active client pulse, priority alerts. Whereas this version is a little bit different where you have those big metric cards right at the top, then you move into an itinerary, what they need to focus on today. This one is even a little bit more different where you have that AUM, like their assets under management, like a big and bold at the top with other metrics that you get into your growth.
21:12But as you can see, like, these aren't production level designs. I wouldn't take these and show it to a client.
21:19I wouldn't take these and say, developer, build this out for me. But where is it I'm using Google Stitch right now? Where is it I'm using Stitch?
21:29For fast generation, for very, very early stage concepts without burning tokens. I'm not looking for polished designs.
21:36I'm looking for types of widgets, types of data that we might want to display to sort of have some of these more early conversations on what's important with internal stakeholders.
21:46I'm only gonna bring Claude and Codex and Claude Design into the equation once I know absolutely for sure.
21:53So I got a couple options here. Either I can burn a ton of tokens in a ton of time generating these polished first drafts inside of Claude and Codex, or I can use Stitch because it's basically free to spin up a bunch of different variations of things, of ways data can be displayed and data points you wanna show and types of widgets to chat with, again, just internal stakeholders.
22:20I wouldn't show this to a client or anyone external on what really speaks to them, the types of data that they like, how they like data to be displayed. Because it's gonna better inform what I'm either able to, one, then reproduce in Figma or, two, build out in Claude code and codex without having to go through the level of variation we did in Stitch, which is going to burn a million and two tokens inside of the other tools.
22:51And, hopefully, you can see that Stitch is designer friendly. You know? We can move things around.
22:55We can preview things. We can choose to mod modify things.
22:59We can, you know, generate those variations and regenerate designs. We can generate a desktop web version based on that. And we can even tweak, the design system, uh, here too.
23:09We can adjust the color palette. But, again, it doesn't produce those production level designs that I had just talked about. But what's the other key tool in the AI space that's really tailored to designers?
23:24That's Claude design. It's gonna be a nice segue into sort of the Claude codec space.
23:29Here we are in Claude design. And I want to because Claude design stitch, they're the design focused AI tools, the real popular ones that are out there.
23:41And I wanna showcase the different quality that you get on Claude Design versus what you get on Stitch.
23:50So here we are in claw design. I'll put a link for this, the video description. Let's just create a new project and not select any particular design system.
23:56Just call it high fidelity. Just make it a high fidelity, not a wireframe. Sorry.
24:02So let's just call it AI demo. Let's create this, and let's go ahead and build a prompt now.
24:10Let's run the exact same prompt as we did in Google Stitch. Build me oh, forgot my please. Please build me me a financial management's app for financial advisers.
24:23Again, not the best prompt in the world. Uh, not a really good prompt at all, but still the same. Let's run.
24:30And we get some questions, and this is nice because with Google Stitch, it just, like, basically went ahead and did things. But Claw Design wants to know a little bit more detail, and it's gonna help us produce a more polished version the very first time.
24:45So who's the primary user? Let's go, financial planner.
24:51Uh, which workflows matter most? So I can select let's go performance reporting, uh, select a couple of these, and portfolio dashboard.
25:01Which screen should be the hero, uh, adviser home, platform. Let's just go desktop.
25:08Let's go aesthetic direction. Have it decide for me. Information density, again, decide for me.
25:15All these other ones, let's just select decide for me. But you can see the level of detail that it's asking us to try to get the best result the very first time. So decide for me and then decide for me.
25:27Let's run this. You can see that it came up with a list of to dos, but I'm already on minute six. It doesn't look like any of these are actually built yet.
25:36So you can see how already how with Stitch, the results came back after, like, fifteen seconds, not even sometimes. But with Claude Design, there's a lot of waiting involved, which if we're looking for fast variations and iterations, just exploring certain concepts, what data could go where, what data might resonate with an internal stakeholder.
25:59Claw design really slows down a lot of that fast iteration we wanna do in those early stages. I know what you're thinking. But, Kirk, I have all the time in the world.
26:09So if claw design gives me a better result first try to share with stakeholders, I'm only going to use Claude design. Let's pause for a sec.
26:18Because the usage of Claude design is limited in this early stage, and it is going to get expensive. Claude code is an expensive tool.
26:27I believe I've said it before. I'll say it again. I believe it was Uber.
26:30They ran out of their AI development budgets in, like, three to four months that they had set for the year. Now unless you're working at a company like Apple or Google where your budget, I don't wanna say, is infinite, then chances are the way in which you can leverage a tool like Claw Design, once they pile on the features, pile on, like, included in all the plans and everything like that and start charging for it a lot more than they are now, the cost is going to add up.
26:56So you need to be really strategic around where you're going to be using your tokens. And the results here is way better.
27:05Look at this. This is, like, senior level design.
27:11It looks clean. The font is nice. The different font treatments here, how this is, like, normal font, not indented.
27:17This is slightly different color. It's indented and or not indented.
27:22Sorry. Italicized. We have this interactive graph.
27:26We have this allocation. We have this book of business. We have today's agenda.
27:30It's all interactive or at least some of it is. This is great.
27:35You know? Like, you can show this to a client and be like, we spun this up, and they wouldn't bat an eye.
27:42Whereas with the Stitch example, they would bat an eye. Despite the fact how good this looks, there's an issue.
27:49Is it only built the dashboard? It didn't build any of the other pages. Now you might be thinking, let's just have it build those pages now.
27:58But today is currently Wednesday. You can see that my usage reset some Claw Design on Tuesday. I did not use Claw Design yesterday.
28:06So that one dashboard took me 8% through my usage. So you can see how easy it is to use up what you're available to use in Claude design.
28:20So if we're inefficient in the way in which we start just start with claw design for a lot of that iteration, by the time we get feedback from our stakeholders, all of a sudden, have to wait in order to reprompt inside claw design.
28:35So what you're doing is you're using Stitch to inform your prompt for claw design. Because with Google Stitch, what's your objective?
28:43Mid file wireframing, as we saw. It's not hi fi. It's not lo fi with just basic shapes.
28:47It's somewhere in between to align on metrics, align on potential formats, align on charts. And then when you move into Claude design, which is more of that super high fi wireframing, it's, hey, Claude.
28:58Here is the specific data that we want on the dashboard. Here's the format that this should be in. We want our metrics along the top in four cards.
29:06These are the specific metrics because I aligned on these with my stakeholder after reviewing what Google Stitch gave us. Below that, we are going to have a performance chart, and it's going to be a line chart chart, not a bar chart, and here is why. Ultimately, your goal is just to reduce the number of edits you need in Claw Design.
29:21The closer you can get to it first try in Claw Design, the better. But you can't do it if you haven't had those good convos with internal stakeholders around what they like the data, what data should be displayed where, and that's where Google Stitch comes in.
29:38Having better early stage convos at a much faster rate. Another thing that's not great about claw design, despite the fact it's not very efficient, I guess, is it doesn't feel like a design tool.
29:53So I'm gonna have it actually build another variation. Build me another variation or actually, let's say, build the book page instead.
30:06Build the book page instead, then lay out the designs side by side so I can view them.
30:18So build the book page instead. So referring to this page right here because we only really have our dashboard. Uh, then lay out the design side by side so I can view them.
30:27Let's run. And now this is what it came back with. So now we have that book of business.
30:31So we have that book page. And again, looks pretty good. We have our filters here on the side.
30:35We have these this great metrics treatment at the top. We have a list of everyone who's in, like, our financial adviser book. I think it looks pretty good.
30:43And now what's nice is because I told it I wanna view things side by side, we can kind of view it like a canvas. But what's the issue here? I can't really, like, you know, I can move things around, but I can't modify oh, look, these are these are interactive too.
30:59That's nice. Uh, built those out right away. But I can't move things side to side.
31:04Like, I can like, that scroll effect works. We gotta what's going on there?
31:09Let me delete that. Um, but I can't rearrange things like I would on Figma. It's very, very static.
31:16I'm sorry. It's still at running and changing things as I go. And if I wanted to make tweaks here, what I would need to do is I can just choose to select items and edit it, or I would have to leave comments about change this, change this, just leave that as a comment, you know, different treatments different treatments and things like that.
31:35It's all very Claude has to do it manually. It's not something that we can just move around or make those tweaks on the fly, especially for those larger layout changes.
31:44And now after that second prompt, we're now at 15% used of our Claude design usage, which resets next week.
31:55So you can imagine how frustrating it would be if you ran out of claw design tokens when you're in the middle of, a design sprints. Not fun.
32:04One thing I did forget to call out here is there is the ability to hand this off to Claude Code. We're gonna get to Claude Code in just a second. We're not gonna use the designs here.
32:14We moved to Claude Code. But something I did just wanna call out that I forgot to highlight here, everything else within Claude Design, relatively straightforward stuff.
32:22There's nothing out of the ordinary that would stop you from using this effectively. In order to hand off to Cloud Code, just hit hand off to Cloud Code, copy this command, and then go inside to Cloud Code and just paste that in a new chat. We're now familiar with Stitch and Claude design limitations and where they're used generally used.
32:41I wanna show you the different outputs with Claude code and Codex then. So remove Claude design and, like, the design more design focused tools. And just inside Cloud Code and Codex, let's run the exact same prompt we've been working with.
32:54It's not just about comparing outputs, but your AI workflow might change as part of it. Once we look at tokens and how long things take when compared against both of them. So we're gonna go through a little experiment as well.
33:06Alright. Now it's funny because everything we're just about to go through, I actually am refilming it after I filmed it because I realized that I ran Claude on extra high, but I ran Codex just on high. So there might have been a little bit of a discrepancy there, um, just because after a bunch of research two days ago, extra high and extra high on Claude and Codex, the exact same things even though Claude has a max plan.
33:29Alright. So, anyways, it's besides the point. What we're gonna do is we're going to reuse that same prompt that we've been running with.
33:35And I wanna build a financial management app because I wanna showcase sort of the outputs on Codex and also Claude and to compare how long things take and also how many tokens are used. So let's go ahead and just run this. This is what we got back.
33:49Pretty half decent looking, uh, dashboard, all things considered.
33:54Um, so what I want to do now is I'm going to choose to push this to Figma. What I chose to do here is I just chose to push it to Figma.
34:03Now one thing that's important to note is you don't need to push everything to Figma in order to bring it into Codex. And especially for those more technical, I know there's other ways to do things, you know, get repo, bring it into Codex.
34:15But this is the flow that designers are generally most comfortable with. So that's what I'm going with for now.
34:21Because even with Claude code, we might wanna push it to Figma, make changes in Figma, and then bring it into Codex. That's another big part of a designer's workflow.
34:30It's not about always going right from Claude code or right into Codex and then right back into Claude code. We generally have that Figma step in between, make tweaks, move things around on our own. And then when we're ready, we might pull it either way.
34:42While that's being pushed to Figma inside of Claude, I'm I'm gonna hop into Codex here and run the exact same prompts we ran before. Uh, so let's go ahead and let's run this. This is what Codex came back with.
34:54I know what you're thinking. This is horrible. You're not wrong.
34:57It's not great. It's because for designs out of the box, Codex is not your best option.
35:03Claude is. You could see the design that Claude produced compared to this night and day difference. But that doesn't mean that we shouldn't use Codex as part of our AI workflow.
35:14I'm gonna elaborate on this, but what I wanna do now is with the design that Claude had pushed to Figma, I'm going to bring that into Codex, and you're gonna see why.
35:25And this is here's what Claude gave us inside Figma. It looks pretty good. There's a there were some small responsiveness things that I noticed, but that's totally fine.
35:33What I'm gonna do, I'm gonna copy a link to this section and then let's go and go back to Codex. Inside Codex, I'm gonna paste a link to that Figma file. Please build this, uh, locally.
35:44And we're gonna have Codex build what Claude had. So let's run.
35:49Alright. This is what Codex came back with. What I wanna do now is I wanna make the same changes on Codex and on Claude and compare how long those changes take and also how many tokens that those changes burn.
36:07So what are some larger and smaller changes? One, maybe we can swap this from dark mode to light mode. Maybe we want to make top households have a search bar and make it full width.
36:21So some larger changes that come into play. What we're gonna do, we're gonna as I mentioned, we're gonna to Codex, run that, and then go to Claude and run those same instructions.
36:31Inside Codex then, running this prompt, make the following changes, change it to light mode, add a search bar to top households, make top households full width, and swap positions of AUM and households. So I decided to just swap these two cards along the top, another smaller change.
36:45So let's copy this and then let's so first off, let's run this. There we go. Now let's copy this and let's do the same in Claude.
36:54Back inside Claude then, let's run the exact same thing. So we can see that it did its job versus the old version versus the new version where it swapped households and AUM. Here, this version, we have this full width.
37:04We have the search bar, whereas on the older version, we did not. And those changes have been made in Claude as well. One thing I'd like to call out is the styling is different on Claude than Codex, but it's not Codex's fault because when the design was pushed from Claude into Figma, it lost some of the good text treatment.
37:21So that's why on Codex, how it looks a little bit plain. Codex actually did a really good job taking exactly what was in Figma and bringing it into Codex, but think, like, styling just got lost in the Figma translation.
37:33One thing I'd like to call out is right after I started filming some of these things, I realized I forgot to take screenshots or showcase what the context window was before and after. So instead of having to, like, get my recording started, which takes, like, a couple seconds, I just screenshot it right away just so it was fully honest what those tokens were that they started with.
37:50Alright? Um, but the time it take it took to make those changes in Claude was twelve minutes with 38,000 tokens used.
38:01The time it took in Codex to make those changes was four minutes with 17,000 tokens used.
38:09There's a lesson in this. And one of the reasons why I'm not showing, like, how or talking about how many tokens it took to do everything so far is because Claude had to build a design from scratch, but Codex just brought in a design from Figma.
38:23So it's a little bit of a different workflow, so you can't compare it apples to apples in that sense. So this is the results in that little experiment that we ran through.
38:32Clearly, Codex is a little bit more efficient in terms of time and also for tokens. And as I said, there's a lesson in this. Whereas if you want to maintain the best use of your time and tokens, it might make sense to generate an initial designs in Claude, whether there's Claude design, Claude code, whatever it is.
38:49Again, if you're doing it in Claude design, you need to bring it into Claude code, um, in order to push it to Figma. Then from Claude code, push it to Figma.
38:58Once it's in Figma, pull it from Figma into Codex where you can iterate in Codex. You can add different things, move things around, make tweaks, like add a badge here, remove this badge, move this down, swap these elements.
39:11And then when you're happy with it, push it to Figma, and then bring it back into Claude when you're ready to make your developers happy and to do any, you know, larger exploration. It doesn't make sense to always make small changes in codex.
39:29You're gonna need to decide when it makes sense to do something in Claude versus do something in Codex. Because it takes effort to either download the entire file, bring it into Codex or push to Figma, and then bring it into Codex from Figma.
39:44You know, it's it takes a lot of effort. If especially if you're going down the Figma route, it takes a lot of tokens.
39:52So if you need to just change one color and move two things around, maybe it just does make sense to do it in Claude. But if you have a full application in Claude code, then maybe it does make sense to bring things into Codex because you can make a lot of those larger changes.
40:08Like, you have to spend a couple days making a bunch of changes, yeah, then sure. It makes sense to do it in Codex versus Claude. But one or two small things, you know, you don't always need to bring it into Codex.
40:17Right now, we're at a point where we understand some of the key tools in the AI design space right now. What that workflow could look like depending where you are in your design journey.
40:28But I wanna talk about design system consistency and how our design systems work with these AI tools, and how can we get a really good results using AI when building designs, but still keeping it on brand with our design system and the guidelines that our organization sets.
40:47I wanna start off in Claude design because this is getting all of the hype, and I see a lot of clickbait around this.
40:53So I wanna clear some things up. Now one thing I'd like to call out, just as a fun fact, I've been filming everything you've seen so far for seven hours because I actually retakes all this stuff.
41:06It takes a long time in case you wanna sneak preview into my life behind the scenes. So and also to planning things.
41:14I'll, like, plan the video, then I realized I should have done it a little bit differently or explain things differently. It takes a long time. So here, just under design systems.
41:22We already have this design system in here, but I'm gonna choose to create a new one. I'm gonna create a design system. And what I did offline is I downloaded a copy of one of the design systems that that's a part of our academy.
41:36Again, link in the in the description. I'm just gonna drag that in. It's a real simple design system.
41:41There's nothing crazy about it. There's not these big insane UI layouts and these super uber complex components with crazy blur.
41:51It's relatively simple design system. So I'm gonna choose to attach all the pages and frames, and I can see that that's attached.
41:58Let's continue to the generation now. And let's, of course, choose generate. Forgot that was gonna be a step.
42:05It came back with everything in the design system for us to preview, say whether it looks good, say whether it needs work. This just got in way better in the last two and a half weeks or three weeks since whatever Claw design was launched.
42:22But there's still fundamental issues with it not capturing everything.
42:30Let's go into buttons as an example. Now I know this design system really well because I built it.
42:39We don't use ghost. Oops.
42:41Sorry. We don't use ghost as very name.
42:47We don't use danger. We're missing variants here. So it appears as if there's still again, this is still better than what it gave me, like, two weeks ago, but it appears it's still missing things.
43:01And it's not capturing everything inside of that design system. And another example here is we go up to our type scale. I don't have a display in this design system.
43:13I have a hero. Where's our heading three? We just have heading two, heading four.
43:19What about heading five, heading six? What about our body large, body, and body medium?
43:26It's missing some of the most fundamental elements of the design system because some of these, I care less about, and we're still missing a lot of components.
43:37Like, this is not the extent of all the components that are in that design system. But I care less about avatars, which also aren't correct.
43:48I care more about form fields, which look pretty good. Sure.
43:52We're missing some variants, but that's fine. I care most about buttons. Again, these will look pretty looking pretty good, still missing some variants, and I care most about our type.
44:03So if I was Claude or Anthropic, I would focus most on the fundamentals and make sure that those are built properly. Now one thing that's important to note here is I can say this looks good or I can say what needs work, and I can describe what I'd prefer or what they got wrong.
44:20But I don't wanna have to go through and do that for everything here. Doing that alone, we already know how slow Claude is.
44:28Do we really have twelve hours to burn in all of our Claude design credits to go through and polish our design system? So just because you can import your design system, in theory, you can, but it doesn't mean it's ready to produce these clawed design, high quality UIs with.
44:51It's just not there yet. And something you might get from your team, and it's something I know that some of our community members have also got from their team, are is their bosses being like, just import the design system to Cloud Design?
45:02I don't know what the big deal is. If you ever get that, just send them this part of the video or recreate the demo in on its own, where you upload your design system and show them the flaws. A lot of higher level design leadership execs, they're just going off the headlines.
45:19They're going off the clickbait because they've never actually tried it themselves. So even though your boss might be telling you, just import the design system to Claw Design, it's important for them to understand that it does not work as intended.
45:32All that's justice, not just to say that AI can't do anything relating to your design system entirely.
45:40But what I'm gonna show you, I wanna talk about why it's not the best, is I wanna enter a link to just an empty Figma file. It's just called variables test. Please build me type styles, h one, h two, h two, h three, h four, h five, h six, p one, paragraph one, paragraph medium.
46:05I spelled paragraph wrong. Paragraph medium paragraph large paragraph small inside of this Figma file inside of this Figma file, inside each style, there should be variables.
46:28This file file above is empty, So you will need to build the variables and styles and styles.
46:44Let's run this. And this is the result. It looks pretty good.
46:47So we have all of our variables inside of a typography collection. I always like to call it responsive, actually.
46:53Uh, again, some links in the description for responsive collection stuff. Um, and we have all of our styles in the right hand side here. It looks like our variables are applied.
47:01This is pretty good. Now let's do the same, but with our more color specific variables because I wanna talk through some things here.
47:13Back inside Claw, I just run another prompt. Now build me, uh, a complete, uh, Figma variable, uh, library.
47:23Spelled variable wrong. Come on. Oh, it doesn't even come up.
47:25Uh, variable library. There we go. Let me move my video bar out of the way.
47:31Perfect. I got some space. Now build me a complete Figma variable library.
47:34We will use a three tiered approach, brand alias, and matte collection.
47:45Brand has raw hex codes and groupings. Alias determines primary, secondary, ETC, error, ETC.
48:02And mapped has all of the surface, text, icon, and border variables.
48:12Inside alias collection, there will be a second brand for a second brand within there'll be a second mode for a second brand.
48:26Inside of maps is a second mode for dark mode. Uh, so now building a complete family variable library, we use a three tiered approach, brand alias map collection, brand has raw hex codes and groupings, alias determines primary secondary error, and mapped has all the surface text icon and border variables.
48:44Inside alias collection, there'll be a second mode for a second brand. Inside of map is a second mode for dark mode. And if you don't know what any of these like collections are, again, link in the description for some other videos that goes through that in-depth.
48:55Again, I kinda build design systems for a living, know a lot on that topic. But let's run this.
49:01This is what it came back with. So we have our mapped collections, light and dark, our brand collection, all those raw hex codes, our alias collection redefined primary and so on and so forth. Brand a, brand b as modes.
49:11And, again, our map collection, as I said, with light and dark, and this is where all the hard of the action is. This is one of those scenarios where just because AI can do it doesn't mean you should use AI to do it.
49:25Because one thing I noticed here is there's no disabled but no disabled variable for disabled buttons. There's no disabled border.
49:34We're missing some pretty key variables as I scrolled through here. Also, two at the same time so AI gave you this variable library.
49:44Now what do you have to do? You have to start building some components. How do you know which variables to apply to which components?
49:54Which variables you might be missing. This is one of those things where you're gonna spend more time trying to figure out what it is that AI gave you than it would be to learn how to build your variable library properly, spend three hours, and we have complete free videos on YouTube where we go through that.
50:14Spend a couple hours, learn how to build it so you can build it yourself and then scale up from there.
50:20This is one of those things where just because AI can do it, you're gonna spend more time trying to figure out what it is AI gave you if it's actually right, if it has all the variables that you need. Do all the variables that it gave you work with your brand? Because maybe you don't need some of these, and you won't know until you start going through it.
50:38And I see a lot of designers being like, oh, I built my variable library with Claude code. He would tell me what it is that I'm missing. I have no idea.
50:45I'm not your brand. Claude is not your brand. They have no idea your brand guidelines, your brand rules, what components you need in your design system.
50:52Some brands will have way more complex components that require a completely different range of variables. It's difficult for AI to get this right.
51:01Back inside Claude, let's have it build us a component. Now I had started filming, then I realized I actually said build me a complete button variable set instead of components and variant set, uh, based on the styles and variables we created.
51:17Now please build me a complete button component and variant set based on the styles and variables we created. Sorry. But he get authenticity.
51:23I make mistakes as I go. Because I still wanna have it generate us some components. They still want to talk through some things associated with this.
51:30So let's go ahead and run this. For this part of the lesson is I'm using Claude because it's more accurate when working with Figma. I didn't wanna use Codex even though it takes less time, takes less tokens because I know that Codex is gonna give us, like, some iffy results.
51:43And I always don't wanna use sort of the less superior tool to try to prove a point. I wanna go use Claude because I know it's gonna give us some really great results to show you what it can do, but still talk about why it's probably not the best approach to things.
51:56So just wanted to clarify that, why I'm using Claude for this and not Codex. Buttons are the easiest component of a design system to build. Full stop.
52:03They're the easiest. And right now, we're at almost at six minutes and 5,000 tokens to generate our button component.
52:13This isn't even including any changes that we're gonna have to make. And look, it looks like it just came back and finished. So six minutes and 5.4 thousands tokens.
52:22It's a lot of time. It's a lot of tokens for the easiest component. Let's jump into Figma now.
52:27This is what it came back with. So we have our, um, sort of gave us like a little demo here, which is actually kinda nice. I do like the thought here Where what those buttons look like on light mode, what they look like on dark mode.
52:38I don't know for sure, but I don't know if some of these would pass their color contrast ratios right away. This one absolutely wouldn't.
52:46So that would be something that we would need to fix. Now another thing right off the bat is in the button component. So we have like a primary, secondary, tertiary, and then our then our error.
52:58It went ahead and built us a it went ahead and built us a disabled button, which they'd also gave us some disabled variables, which it missed originally, which is good.
53:08But in our variables here, let's go in. We have a secondary variable set.
53:16We have a success warning variable set. It gave us those examples here. Why aren't they in the button component?
53:26So we just spent six minutes and, like, what was it, like, 5 plus thousand tokens to build this. Now we need some changes. And that's the hard part with building components with AI.
53:38You go through tokens. You go through a ton of time to not get the result that you're looking for the first time, and then you either have to spend time fixing it yourself, trying to reverse engineer what it is that AI gave you, or burning through more tokens and more time trying to dialogue with the AI.
54:01And for such a simple component, button component, there are a million into design systems out there that have button components, that have link components, button icon components, fields, labels, inputs.
54:15Why do we need AI to do this for us? It is my honest opinion that AI should be used for more complex layouts and modals and dialogues and things like that that actually take a lot of time to build.
54:31Because there's so many free resources and paid resources for a $100, $120, $50, that offer you all of the components that AI is gonna spend time burning to get your design system up and running.
54:45And they're gonna come complete with a complete variable set that are actually applied to real components. So you're not having to rely on AI to build the variable set, then build the components, then realize that it might have forgot some variables, and then it needs to add more variables. And it's just it's too much back and forth that needs to happen.
55:03You're gonna spend more time reverse engineering things than anything else. And I get emails like this. Like, AI gave me these variables.
55:09What am I missing? This proves my point is that if AI just gives you an output, but you don't know the rationale behind the output, how can you expect to succeed in your day to day design role when you're applying variables that you didn't build, when you're using components that you didn't build?
55:27So you don't know how those variables are structured. You don't know which variables belong where. You don't know how those components were built.
55:33So if you need to make a change to those components, then you might mess something up. Now the example that I gave is just for buttons. But, again, that's just an easy component.
55:40There were no Adam components that went inside of that component. So you all you have to do is just change the one, uh, component set and the variants inside.
55:50Once you start getting into more complex things like tables, really complex component, graphs where there's all these different components that are added together to build one larger component, that's where you're gonna run into a lot of issues, where AI is gonna give you something, but you don't know how it's structured and why it's built the way that it was.
56:09And I said this in my last video, I have free videos teaching you how to do a lot of these things, to build a design system, to set up a design system, to build a responsive collection.
56:20I have a three hour video. And, again, links in the description for these on how to build a design system.
56:26Three hours. Took me, like, fifteen hours, twelve hours to film. Alright?
56:30So there are resources available for you, so you don't need to rely on AI for all these things. It might take you two to three hours, four hours, five hours. It might take you an entire working day.
56:40But it's gonna set you up for success if you know how to do it. You can build it yourself. You don't need to rely on AI for some of these things.
56:46So what you should ideally do is start with the design system already. As I said earlier, there's a million and two templates out there. Some are free.
56:56A lot are paid, but it's like they're like $50, a $100, a $150. There's some really crazy design systems.
57:03They're worth the investment, especially if you don't already have a design system or you have a design system, but you need component references to go off of. It's easy to plug and play with these systems.
57:16You can copy components from one to another, recreate them, reverse engineer them, do whatever you need to do. Don't rely on AI to build your simple components. It's a waste of tokens.
57:26It's a waste of time. Trust me. Because what I have in this design system, this is an example.
57:31Again, this is the one that's part of our academy. I really cover, like, the fundamental components, things like your the your field and inputs, you know, your drop down, your text area, your checkbox.
57:42It's just all the components that every design system needs that you need to get started. And you can imagine, like, it took five minutes for to generate just the button components, but it didn't generate all the variants that we actually want.
57:55It didn't go through some of that accessibility testing. So you can imagine with all the components that you're seeing here on the left hand side, so I know my face is probably covering some of them, that how many tokens and how many how much time it would take to go through and refine for you to not even know if they're built a 100% right.
58:13So my suggestion to you, if you're looking to build a design system from scratch with AI, use your tokens in time to build the larger, complex widgets, modules, dialogues, more complex layouts.
58:26Don't spend the time building the easy components. Start with a template of some sort or build them yourself based on the tutorials that we have in the description.
58:34When it comes to working with AI on our design system is we need to train AI. It's not as easy as just, hey.
58:42This is my design system. Build me these widgets. We need to guarantee that AI knows when to use the variables, the styles, and when to use the components.
58:51So it's a little bit of a prompting workflow that you need to go through. So you need train AI on your variables and styles first. So I just say variables and styles, whatever.
59:00And then you need train it on your components and any related documentation that you have. Only then can you start to use AI to build a lot of those larger modules, widgets, dialogues, leveraging the components and variables above because it's gonna increase the chance that these here are built the very first time correctly So we don't have to burn through a million and two tokens in fifteen minutes to build something that wasn't using what was already in our design system.
59:31So it's a little bit of a prompting workflow that we need to go through. But it's important that everything here is reusable.
59:40So what AI teaches itself, it can call on that knowledge a little bit later on. Because every time we build one of these, we don't wanna have to revert back to step one.
59:49We train it on our variables and our components and documentation. This is where custom skills come into play. I'm actually gonna have a larger video talking about how to best train AI on our design systems.
1:00:00I don't if I'm gonna release it on YouTube or the academy, but before we go into the more technical specifics of things. But in the meantime, what I suggest you do is, again, starting off with training AI on our variables and our styles.
1:00:16Have some sort of template like this for your variables, where you have the token name or the variable name, its value on light mode, its value on dark mode, and the description of when it's used.
1:00:29And this is why it's so important to build your variables yourself because then you can know explicitly when those variables are used and when those variables are not used. If you ask AI to do it, AI is gonna hallucinate.
1:00:41It might give wrong use cases to when to use specific variables. It's not gonna be perfect.
1:00:49So spend a couple hours, learn to build your variables correctly. Don't rely on AI to do it. Now templates like these, they're everywhere.
1:00:57This, again, this is the one that's part of our academy, but, like, there's a million and two free templates like that available on Figma community. Heck, it's super easy to create your own.
1:01:06So I'm not saying, like, you need to use this by any means. It's there there's ones that are free that are out there. But, again, just a description, what the variable is, the name, its value light mode, value on dark mode, and when it should be used.
1:01:20Because what we want to do now is just copy a link to this frame, and we're gonna work with AI to build a skill around these variables and when they're used that AI can reference every time it's building something new.
1:01:34Alright. We're inside Cloth. You can do this in Codex two because both have the ability to build skills if you describe the type of skill that you want.
1:01:44Anyways, let's enter in a link to that Figma frame that we copied. Please study all of the Figma variables inside of this table.
1:02:00After coming to an elites understanding on the variables, their values, their naming, and when they are used, build a Claude skill that will help train Claude on when to use different variables for future designs.
1:02:35Please study all the finger variables inside of this table after coming to an elite understanding of the variables they're naming and when they are used. Build a Claude skill that will help train Claude and when to use different variables for future designs. Do not include any type styles or type specific variables inside of the skill.
1:02:57We'll get to that very shortly. Only focus on surface, border, text, and icon variables.
1:03:09So just some guardrails to set because sometimes it does include type styles in this, but it's best to include sort of another skill for the type styles. Let's go ahead and run this.
1:03:19This is what it came back with. As I said earlier, I have more content coming. I don't know if it's for YouTube or for the academy on the most ideal way to structure this, but it's still a couple things that I'm sorting through.
1:03:29Well, I'm teaching you the method for now and things like that. Now this is ideal what it actually did here is it gave us back these individual markdown files where it goes through where it sort of grouped everything.
1:03:41So we have our border, our icon, our surface, our text, when to use them, and what variables are available. And one thing that's really nice too, oh, perfect, has some common pairings here, which is great. Um, and what text does not have okay.
1:03:53Beautiful. So even went deep here. So there's no focus dates on text because again, you won't need a focus date on text.
1:03:59And then it has the skill.md, where sort of like how to choose the four different accesses and everything else and giving it a lot of good context and when to essentially reference each of those markdown files. This is really good for a first draft.
1:04:13So, you know, I've shown it a couple ways in the past where it doesn't go this level of depthness. Is is that the word?
1:04:20Or this doesn't go this in-depth anyways. Okay.
1:04:25So this is good. And, again, we're have more content coming in the right way to structure this. Um, what we're gonna do now is we're gonna save this skill, and let's flip back to Figma.
1:04:35What we wanna do now, do the same for a type scale. This one's a little bit different because there's no what word am I looking for?
1:04:45Description on when it should be used. Because depending on the design that you're going for, you might use an h three.
1:04:53You might use an h two. You might use an h one. You might use an h one regular, h one medium, h one semi bold.
1:05:00So it's not like your variables where you have explicit rationale as to which should be used where.
1:05:09If you have that and your brand is that, like, rigid, great.
1:05:16Awesome. But it's pretty rare for that to happen. But what even though we don't have the descriptions is we still want the AI to know what text styles and variables and things are available to it.
1:05:33Because one thing that happens is if you just ask it to generate initial design as a mock up, it might use a size that's like 15, like a font size for paragraph that's 15.
1:05:43And then when you want to apply your design system to it, it never applies the design system to that one style because it's looking for something in the text styles that matches, and when there's no match there, it just defaults to not applying anything.
1:05:59So we're going to still train it on these text styles and text variables to let it know what's available to it. And what I mean by text variables, sorry, wasn't I wasn't clear when I said that, is inside of these, notice how we have variables applied here.
1:06:15So that's sort of what I'm I'm getting at. Again, I copied the link to that frame, so paste it in. Uh, please study all of the, uh, text styles available inside our design system here.
1:06:33Please take note of all the variables applied to the styles and their values on, uh, desktop, uh, and mobile.
1:06:47After coming to a complete understanding, Please build a Claude skill, which will inform Claude on which styles are available on which styles are available.
1:07:12Please study all the text styles available inside our design system above above.
1:07:17Please take note of all the variables applied to the styles and their values in desktop and mobile. After coming to a complete understanding, please build a Claude skill, which will inform Claude in which styles are available when building new designs.
1:07:29Something like that, we could probably clean it up a bit, but let's run. Alright. Here we go.
1:07:33Rock and roll. Look what it came back with, which is another skill around our textiles.
1:07:40Oh, it gave us some stuff here too. Um, but looks pretty good.
1:07:44I'm not gonna go through it. It's a whole lot for me to read. I'm gonna make the assumption I did it right.
1:07:47You should not do that though. You should always read through it. So we're gonna go ahead.
1:07:50Again, save this skill. Let's talk about components now. Field description skill must be ten twenty four characters.
1:07:56Let's tell Claude it messed up. Okay. So I'm gonna fix that.
1:07:59It just just needs to be shorter and then we're going to flip back to Figma to talk about components. Oftentimes, what I see is designer just being like study my components. What happens then is the AI doesn't know where to look.
1:08:12It tries to go in a methodical order, but then all of a sudden if there's Adam components on a page, it's going to analyze the first component, realize there's Adam components that needs to study.
1:08:22It's gonna jump to that Adam component, but then it's gonna forget to work its way back to the other component to then continue what it was doing before. And it's gonna miss components because we just sort of gave it as broad instruction with nothing to help guide it. And our goal here is when we say study my components, is that it moves through different component groups in a very methodical order and build skills specific to these component groups.
1:08:48It's gonna help keep the AI more on track when it's reviewing the components and what's available and lead to a better output when we're asking AI to generate designs. I want you to look here on the left hand side is we have different groups for our components.
1:09:03So you don't have everything in a one long list. And the way I've grouped things, I have my form elements within field, input drop down, text area, checkbox, radio button, so on and so forth. We have our navigation components, and then we have our data display components, things like tables, tags, avatars, badges.
1:09:21This is a really easy way of grouping your components. These are sort of like three broad categories that are kind of all encompassing.
1:09:29You don't have to use these same categories, but it's a way to approach it working to train the AI on your design system. Because when we tell AI what to look at, we're gonna be specifying the individual groupings, the form elements, the navigation, the data display.
1:09:46We're not gonna be referencing the entire, like, list of components because it can do that on its own. But these groupings help keep the AI a little bit more structured.
1:09:55Let's flip back to Claude. I'm gonna paste in the link to that Figma file. I didn't copy specific frame, just that Figma file.
1:10:01Please study the following components groupings.
1:10:09So form elements, navigation, data display.
1:10:15Fix that.
1:10:19Do not move to navigation elements unless you have a mastery of form elements, the same with data display.
1:10:36Only move on once you have mastered the prior group.
1:10:45After coming to an elite understanding of all components, build a, uh, Claude skill around which components are available and when to use them.
1:11:04Now, in the design system, I don't have documentation. If you did have documentation, this would really come in handy, but we just don't have it.
1:11:11So we're gonna ask Claude just to come up around when these should be used. But the components, they're relatively simple.
1:11:17So any AI should be able to detect when to use a button versus a link. Um, after coming to an elite understanding of all components, build a Claude skill around which components are available and when to use them inside of the scale.
1:11:28And what I want is I kinda wanna do it how we formatted the way in which we do the variables. We're inside the scale. There are different, like, files talking about the form elements and navigation of the data display.
1:11:37Inside of the scale, have different, uh, dot m d files talking about form elements, navigation, data display more in-depth.
1:11:51It's just a way to structure information again. We're gonna have content coming out whether for YouTube or the academy on how to better, like, do this, the right way to do things going like the a deeper level down, but I think this is good for now. So let's run.
1:12:02So this is what it came back with. Took a little bit of time where we have, you know, our Skilled. Md and then we have individual m d files on navigation form elements and data display talking with the variants that are there.
1:12:13One thing I actually should have done is in the original prompt, I should have actually specified to also look at the properties, the variance.
1:12:22But as I took a quick look through, it looked like it picked everything up. But don't make that same mistake just in case. Like, Todd, when, like, after coming to the understanding of all components, it should say components, properties, variants, and anything else associated with it.
1:12:38Alright? So something just to make sure that you don't make the same mistake as because sometimes it can miss specific variants, but I think this is good for the purpose of this exercise.
1:12:48Let's go ahead. Let's save this skill and keep moving forward. Inside of just a new Claude code session then, one thing I wanna do is I just wanna test out those skills and see how it looks.
1:12:57So we haven't necessarily we're not building it out in Figma yet. Let's just build a dashboard. Uh, please build actually, let's go with, like, simple sample pricing page.
1:13:06Dashboard's too complex. Please build me a simple pricing widget.
1:13:12Please reference the components component and variable component type component type and variables, uh, skills, whatever.
1:13:26Something like that. Let's just run it. It appears that the skills are being applied.
1:13:29The colors look right. Like, the style looks right. Sure.
1:13:32It looks a little bit basic, but that's totally fine. We're gonna solve that a little bit later on. Something I wanna touch upon with Codex now, especially if we're designing in Claude code or designing in Codex, what we're about to chat about sort of applies to the other platform that we might not be using consistently.
1:13:49Based on what we looked at earlier is it might make the most sense from, like, a token perspective, from a efficiency perspective to build something to start in Claude.
1:13:59Nice initial first draft. And then move it to Codex for some of the refinement.
1:14:04Again, a little bit more efficient on the time and the tokens. And then when ready, push it to Figma and then bring it back into Claude. But we have our skills inside of Claude, but not Codex.
1:14:16So there's no ability to keep the changes in sync with our design system once we move everything into Codex. And that's what I want to fix next.
1:14:24What I did is I just ran this prompt. I need the design system components, variables, and textile skills in separate zip folders complete with all sub folders associated with this those skills.
1:14:33And it has packaged those up for me. So I can go ahead and download those and then let's go into Codex. What I did is just inside the Codex chat, I provided those zip files and had it just create the skills for me.
1:14:45So now there's a match between the skills that are in Codex and the skills that are in in Claude. So if we need to make changes in Claude, it'll follow our design system. And if we need to make those changes in Codex, then it'll also follow our design system.
1:14:57It's important to note though that whenever you're modifying something, I always still like to provide the design system file in case it does need to reference it.
1:15:07Just something to call out. We'll look at that a little bit later. Now when it comes to generating designs, AI always works better from visuals.
1:15:16And I want you to pretend as if you're building a kitchen, like, just tell, you know, whoever's building your kitchen, I want my kitchen to be to be dark. They might give you this with this sort of look with this type of cabinet.
1:15:30But you're like, no. I imagined this. So take, like, the same example and apply it to your AI.
1:15:38Unless the people building your kitchen had a specific visual, there would be no way for them to realize that this is what you wanted in your kitchen. They were just taking an accurate guess. And too often, we assume that AI is gonna make the right call, and we end up burning through tokens, and we take way longer to get the design that we're looking for.
1:15:58And the best way to tell AI what we're looking for is to give it those specific examples. And the best place to find those specific examples is mobbin. And, again, you can take 20% off the annual mobbin plan with the link that's in the description.
1:16:09It's hands down one of my favorite tools in the design space right now. We're essentially what it is, just a massive repository of just about every screen, app flow that's out there.
1:16:19So if I'm looking at Wise as an example, like the money transfer app, I can come in here, see all of their specific screens. I can break down those screens into specific flows. I can see here on the left hand side.
1:16:30We're able to come in here and get a lot of good inspiration and see how others are doing it where, you know, this card example, you know, maybe I like this one. I can save this. I can copy it.
1:16:39They have a Figma plug in where I can just take these screenshots and upload them right to Figma. It saves me a ton of time when it comes to designing and especially now with AI. What it allows me to do is take screenshots of examples that I like.
1:16:53So AI has something to go off of. So I found this example, uh, that I like from this tool tonal.
1:16:59So what I'm gonna do, I'm just gonna come in here. I'm just gonna take a screenshot. Again, you can download it too, but I usually always take screenshots.
1:17:04And then I can see more like this down below, which is great because you you want you always wanna feed AI multiple different examples. So you can come in here and take different screenshots of ones that are similar, uh, at least.
1:17:16But maybe I wanna use this as inspiration to recreate one of these designs for me now. So let's flip back to Claude.
1:17:24I believe I said it earlier, but with the link that's in the description, you can take 20 off the annual mob and plan. I've gotten to know the mob and team pretty well. Um, they're a great group, so definitely check out definitely consider supporting them and checking out mob and if you haven't already.
1:17:38What I did here is I just dragged in a copy of the research that we got. This is gonna help us inform Claude code.
1:17:45So using the screenshot attached or the reference example attached along with the, uh, variables, type styles, and component skills skills.
1:18:07Please build please, uh, build a page like this, uh, using our, uh, design system.
1:18:20And one thing I forgot to do that you should always do is let me just, uh, go back to Figma here. Sorry. I know you can't see it.
1:18:26Where I'm just going to copy a link to that Figma design system just in case it needs to reference it.
1:18:34It's always best to do. I always do it as best practice. Here is our design system file if you need it, but all info should be encompassed inside, uh, the Claude skills inside the Claude skills.
1:18:56Again, it's just something that I do. Even though we're not pushing to Figma yet, um, it's just something that I do. Do not push to Figma, to Figma yet.
1:19:07Simply just generate it locally. So what this is doing is we're telling it what skills to reference.
1:19:14So it doesn't miss any, especially we have a lot of skills. Sometimes it might just skip over like a textile skills. Again, we gave it the design system file.
1:19:23So something I do, just best practice. And then telling it not to push to Figma X. We wanna see the design that it comes up with first and we can refine it here or in codex and bring it back here before we end up pushing to the actual Figma files.
1:19:37So let's go ahead. Let's run this. One thing I should have also done is to specify that we don't want it a one to one to what's here because, of course, it's somebody else's design.
1:19:45Um, and also too, if you provide more examples, it's gonna find some synergies between those examples. Just something I wanna call out, you shouldn't just provide mob and screenshots and have Claude copy a one to one because that's so that's someone else's design.
1:19:59So just wanted to call that out while that's generating. We now have an example pretty similar to the one that we wanted. So you can see how just by giving AI an example or examples, we're able to get to our results first try because how difficult would the prompt be to sort of describe what we're looking for here, what we're looking for here with all, like like, the the arc and this green, you know, dot here and everything, sort of the layout.
1:20:25It'd be one hefty prompt and a whole lot of back and forth to try to get this. But in that one prompt, by providing an example, we're able to go from zero to a 100 relatively quickly.
1:20:36Again, ideally, what we would want is for Claude to not produce something one to one. But I'm just showing you the workflow here.
1:20:44So always be sure to provide a couple examples so we can find synergies so that your design is more unique. But there's an issue with this.
1:20:53On our design system, we don't have buttons that are this route. So something was clearly off there where it didn't use like, it said it used the button, but it overrode the corner radius variables on that button to make it route.
1:21:15This is an example of what I mean where sometimes you're gonna need to make tweaks in Claude. And if it's just this one tweak, it doesn't make sense to push it into Figma then bring it into codec codecs because that's a lot of tokens on its own.
1:21:32So instead of focusing on this small item for now, what I might want to do if I was building out the rest of this onboarding, the rest of this application, is get all the other pages in there first.
1:21:44And then once I have all the other pages in there, I can take stock of what needs to change, how many items need to change, what is wrong.
1:21:55And then once I have a list of everything that needs to be changed, I can make the call as to whether it's worth the tokens and worth the time to push everything into Figma, then bring it into Codex to make those iterations, and then push it back to Figma, then bring into Claude code when I'm ready.
1:22:12So just because some one item is off here does not mean that I need to go into Codex and make that change there and then push it back. For smaller changes, it's still okay to work within Claude, But I think the best use of your time here was to bill is to build out as much as you can in Claude code.
1:22:31And if there's a lot that needs to change, instead of smoke focusing on those some of those smaller items, you can do that in Codex at a cheaper token cost and with less time and then bring back to Cloud Code when you're ready. I wanna drop some knowledge on you here because believe it or not, Movin is actually not the only place to spin up inspiration.
1:22:51Is here we are just in ChatGPT, and I'm just gonna configure this here.
1:22:56We're gonna use Thinking 5.5. We're not in Codex. We're just in ChatGPT.
1:23:02Something I wanna let you know is what I'm going to do is I'm actually going to provide that screenshot here.
1:23:10Let me drag it in to chat GPT and say, generate me some alternate options of a screen like this.
1:23:22Let's run. And look what we have now. We have a little bit of a different option and a couple different options at that.
1:23:31And this is what not a lot of people know is GPT 5.5 is really good at generating designs based on even just a prompt or other pieces of info that you give it.
1:23:47It's really good, And it's fast. It's included in your chat GBT plan.
1:23:53I've gotten a lot of value from this so far. We can change aspects ratios of things. We can, um, usually just there's usually a come on.
1:24:01What's going on here? There's use there's usually a little, like, pencil or highlight button where I can highlight specific parts on an image that I want changed.
1:24:10Maybe it might just be if I only have one generation, not multiple. But it's a wicked tool and something not a lot of designers know.
1:24:18So what I'm gonna do is I'm just going to download this image specifically. Maybe we're gonna have Claude just adjust some of that initial design so it's not like a one to one match. Back inside Claude code, let's drag in that, uh, item that we downloaded from ChatGPT.
1:24:32Here is another example I like. Can you tweak the design to match?
1:24:40And let's run. And look what it came back with now. A little bit different examples.
1:24:43So it's not a one to one match to what was there before. Now some of the coloring is a little bit off.
1:24:49I could have been a little more explicit, but I think that's fine. For the most part, it looks as if it's following our design system relatively to a tee.
1:24:56And, you know, I can't really complain except with some of the smaller things as well. But again, now that we have some of these colors and this color isn't in our design system, something wrong with the button here, some the radiuses are off as well. Those are things that, you know, if it's worth it to bring it into Codex and make those changes, we can do that or we can do it right here inside Cloud Code.
1:25:13What I wanna do now, let me just copy a Figma link, is sorry. Here we go.
1:25:18Back in Claude. We're gonna push this to Figma. Please push this to Figma.
1:25:24Remember to follow the design system and reference the text styles, variables, and components, uh, rules.
1:25:38So let's run this. This is what's in Figma now. Looks really good.
1:25:42Where we have, you know, our different sections. It looks like our styles and variables are all applied well, which is great.
1:25:49You know, it didn't apply the drop shadow style, but it's just because I didn't include it in, like, one of those skills. Probably didn't know how look with look for it. But you can see here that it's using some of the raw the the instances of the components.
1:26:02Now personally, I would have loved for this to be a radio button label and not just the radio button, but that's okay. Not the end of the world. And it looks like our items are applied here.
1:26:11Let's see what color it used here. So it used okay. So surface warning default subtle is the variable it used for this kind of treatment.
1:26:17I think it looks pretty good. You know? And it fixed, the rounded corner that it was that it was showing in, um, cloud code, and it, like, adjusted it to the actual button with the actual corner radius instead of it being round.
1:26:30It's just a little bit curved. So I think it looks pretty good for the most part. One thing that's important to note here is before, if you were to bring this into Codex, say you have a bunch of app screens here, you need to make a bunch of changes and you don't wanna do it in Figma, you can bring it into Codex then.
1:26:43As one thing you wanna do is make sure that a lot of the small things are cleaned up. Like the styles are applied, variables are applied because you don't wanna do that in Codex.
1:26:52You can just do it right in Figma itself and then bring it into Codex or back to Claude code. So if you ever have to push a design to Figma, try to polish it as much as you can in Figma before you bring it back into Claude or back into Codex or, you know, back into Claude as I mentioned. So just something for you to be aware of.
1:27:09Thanks for watching this one. Really appreciate you being here. Be sure to drop a subscribe.
1:27:13Gonna have a lot more content coming on working with Claude, Codex, AI workflows, and a whole bunch of other things as well.
1:27:20So be sure to, you know, check the channel out, subscribe, check back in. Also be sure to check out our website.
1:27:27A link for that is in the description where I'm sort of teaching everyone about AI workflows, design leadership, and a whole bunch of other things as well. I'm always adding new courses to this, working on a user testing course right now as we speak.
1:27:37So, again, that link is just in the description. And, yeah, thanks for being here. Uh, be sure to share this video and rock and roll.
1:27:42See at the next
The Hook
The bait, then the rug-pull.
Every designer right now is looking for the one AI tool that does everything Figma used to do -- and the instructor first move is to tell you that tool does not exist yet. What exists instead is a workflow, and this guide maps every tool to its correct stage.
Named ideas worth stealing.
06:43model
AI Design Tool Hierarchy
- Google Stitch (mid-fi, free, fast)
- Claude Design (hi-fi, expensive, limited quota)
- Claude Code (production quality, developer-preferred)
- Codex (3-4x token efficient, best for iteration)
- Figma (handoff and refinement layer)
Each AI tool has a specific role in the design process. Using the wrong one at the wrong stage wastes tokens and time.
Steal forAny team building a sane AI tool policy without overspending on Claude Design for early ideation
52:32list
Design System Training Sequence
- 1. Train on variables/styles (name, light value, dark value, when used)
- 2. Train on type styles (what is available, even without usage rules)
- 3. Train on components by group (form elements, navigation, data display) one group at a time
AI must learn the design system in three ordered layers before it can reliably generate on-brand UI.
Steal forAny designer trying to get Claude or Codex to generate on-brand UI consistently
40:40model
Token Decision Rule
- Small change (1 color, 2 elements): stay in Claude
- Large iterative session on existing design: move to Codex
- New design from scratch: Claude Code or Claude Design
- Fast early-stage concepts for internal review: Google Stitch
A decision framework for which tool handles each type of design task, optimizing for quality and token efficiency.
Steal forTeam onboarding docs, design ops guidelines
How they asked for the click.
VERBAL ASK
00:00product
“Check out UI Collective Academy for premium courses, design system downloads, private Slack access.”
Mentioned at the top of the video before any content, then referenced throughout. Also offers a free community tier.
MENTIONED ON CAMERA
Visual structure at a glance.
