AI and Design Systems: What Actually Works (and What Doesn’t)

0:00Let's talk AI and design systems. Today,

0:02we're going to break down what actually

0:03matters, clear up the misconceptions,

0:05walk through how this is being done

0:06today, and then get into the AI workflow

0:09I use to generate modules that have made

0:10it into real client design systems.

0:12Let's get started. Some quick things

0:14before we begin, and all this is just on

0:15our website, and link in the

0:16description. But if you're a big fan of

0:18myself and what we're doing here at UI

0:19Collective, consider supporting UI

0:21Collective Academy, where you get access

0:22to a bunch of great courses on different

0:24AI workflows and a whole lot more,

0:25private Slack channel access with me and

0:27the team, and great downloads, too. It's

0:28also totally free to join the community.

0:30If you don't want to support the

0:31academy, you can come ask any questions

0:32for free on our forum. You'll also get

0:33access to some great free savings and

0:35resources, too. So, whether you want to

0:36join the community or support the

0:37academy, thanks for being here. Also,

0:39come follow me on X, link in the

0:40description. Right away,

0:42if you're expecting one magical prompt

0:45to be able to build you an entire design

0:46system complete with

0:49uh variables, text styles,

0:52uh tokens,

0:54basic components, more advanced

0:55components,

0:57we're not there yet. And personally, I

0:58don't know if we're going to be able to

0:59get there, because every design system

1:01is different. One design system that

1:03works for one company is going to be

1:05different than for a than a design

1:07system that works for another company.

1:08So, a lot that goes into it. And I get a

1:10lot of questions around this, where a

1:14lot of people are like, "You know what?

1:15AI built my design system in under 5

1:16minutes." It's clickbait. It's what it

1:19is. It's not a true true design system.

1:21And whenever people generally make that

1:23claim, is they're referring to something

1:24like this. Where here I am just within

1:25Google Stitch. If you haven't used

1:27Google Stitch yet, I'll just put a link

1:28to a video below, and also to Google

1:29Stitch itself. Where sure, it can build

1:31you this really basic, you know, design

1:34system, where you can sort of have like

1:36your different color palettes, your

1:37fonts, your corner radius, and you can

1:39define it, and you can preview what that

1:41looks like here. But there's a lot more

1:43that goes into a design system than

1:45primary, secondary, tertiary, and

1:46neutral colors, headline, body, and

1:48label, and just the list of components

1:50here. In really good, complex design

1:52systems, there's about 200-plus

1:55components and atom components, probably

1:57even more that go into it. And for those

2:00to be replicated by AI, difficult. Here

2:02I am in Claude design. I want to walk

2:04you through what a lot of people are

2:06saying Claude design can do and the

2:08limitations to it cuz I don't want to

2:10get you don't want you to get caught in

2:11this trap. So, let's have Claude design

2:14build us, you know, a design system.

2:17Uh, I need a design system.

2:22Please start off with a button

2:26components. Something real simple. Let's

2:28go ahead and let's run that. We're going

2:30to get some questions back. It say

2:31modern minimal. Uh,

2:33no brand color in mind, so take pick a

2:35tasteful palette. Uh, what button

2:37variants? Primary, secondary, tertiary,

2:39ghost, destructive, uh, success,

2:43uh, icon only, icon and label. Uh, let's

2:46do a couple bunch of different sizes

2:47here. Small, medium, large, maybe

2:49slightly rounded and just have it

2:50decide,

2:51uh, for me. I'll just answer some of

2:53these. Uh, structured. There we go. I

2:56don't even know what I was selecting

2:57there, but let's just run that. This

2:58here is what it came back with. You

3:00know, half-decent looking button

3:01components, some variants, different

3:02size variants, and some different

3:03states, too, which is nice. You know,

3:05it's nice to have a visual.

3:07What's the issue with this, though?

3:09This took

3:1011 minutes on the dot

3:13to build.

3:15And this is just a button component.

3:16This is the easy of easy components. And

3:19you can imagine once we start getting

3:21into way more complex components, side

3:23drawers, different navigation

3:25components, how long those are going to

3:27take, and how how long the tweaks to

3:30those components are going to take once

3:31we change our mind or want different

3:34visuals. And also, too, these aren't

3:36even in any UIs yet. So, we don't even

3:38know if we're going to like all these

3:39components. So, although it's good in

3:42theory in order to build this, and you

3:45can build documentation of your existing

3:47components using things like Claude, but

3:49to have it build your design system,

3:51it's really just not that efficient.

3:53Took my sweater off, it was getting too

3:54warm. But let's say you did have all the

3:56time in the world and you spent here

3:58spent a lot of time here really building

4:00out your components. Let's look at

4:03something here, okay? So what we're

4:04going to do, we're going to choose to

4:05hand this off to Claude code and then

4:08actually push it to Figma. So let's copy

4:11this command and then move into Claude

4:13code. Inside Claude code then, let's go

4:15ahead to enter in what we had copied

4:17from Claude design and send that. While

4:19that's running, we're going to need to

4:20connect Figma MCP also install our Figma

4:22skills. We've already done this before,

4:23skip the next like minute. But starting

4:25off with Figma MCP so that Claude and

4:27Figma can talk to each other. So here

4:29under connectors just under customize of

4:31Claude code, we're going to browse

4:32connect connectors and just search Figma

4:35and it's this one here that we're

4:36interested in. We're going to choose to

4:38connect that. What that's going to do is

4:40going to open up

4:42uh Figma in the browser. Open your

4:43browser and just hit agree and allow

4:45access. You can see now that Figma MCP

4:47is connected. Now we're going to do

4:48install our Figma skills. I'll put link

4:50for this down below as well. But

4:51starting off with this Figma use skills,

4:53let's open this up in GitHub. If we

4:55navigate over here, what we're going to

4:57do, we're just going to go ahead and

4:58download the zip file entirely. You can

5:01see that's downloaded. Then if we go

5:02back to Figma skills, uh there's a

5:04couple ones that I'm more interested in

5:06here that aren't included in that zip

5:08that we just downloaded, which is this

5:10apply design system skill. So let's go

5:13ahead and click in and then choose to

5:15Oops, sorry. Just download that

5:16skill.md. So let's download that and

5:19then this audit design system skill. So

5:21let's go ahead do the same, click that

5:23skill.md and then choose to download

5:25that. Let's now go back to Claude. We

5:28want to start off by uploading the zip.

5:30So what we're going to do, we're going

5:31to choose to upload a plugin and just

5:32download uh or upload that zip file that

5:35we had downloaded uh entirely. So let's

5:38upload that.

5:39Uh do do do do. Let's go ahead, upload

5:41and we can see that we have all of those

5:43great Figma skills here by default.

5:46Now the other one that we're also going

5:48to want uh to to do is also upload some

5:51of our skills. Ignore some of the skills

5:53here. These are my personal skills on

5:55the academy link in the description. So,

5:56we're going to choose to upload a skill

5:58and just drag in those two skill.md

6:00files that we had downloaded one at a

6:02time. There's one and let's go with the

6:05other. Choose to upload that skill and

6:08upload the other one. There we go. So,

6:10we have our apply design system and

6:11audit design system skill. All right,

6:14with those out of the way, let's go back

6:16to Cloud Code. With this now loaded

6:18inside of Cloud Code

6:20and Figma MCP connected, Figma skills

6:22installed, let's go ahead and ask it to

6:24build the button components inside of

6:26Figma. Ensure appropriate use

6:29of variants and properties. Don't

6:31connect it to any design system inside

6:33of Figma now, simply the components

6:36and variants.

6:38That easy. And I'm just going to go

6:39ahead and enter in a Figma link. So,

6:42let's go ahead and run that. Inside of

6:44Figma then,

6:46this is what it came back with. So, it's

6:49not half bad. So, we have our button

6:52component here.

6:53So, we have our primary, our secondary,

6:55our tertiary, destructive, and also our

6:57success. We have our different size

6:59variants here. It looks pretty good in

7:01the grand scheme of things. So, we have

7:03our icon left, our icon right. And if we

7:05switch this to a small, there's some

7:07issues here with the icon. It's okay,

7:09it's not the end of the world.

7:11And if I was to change the label to just

7:13a bunch of random gibberish, our hug

7:16properties aren't applied. So, you can

7:18see that all our buttons are set to hug.

7:21Now, if you've never built a design

7:23system inside of Figma before, you've no

7:27idea what you're doing.

7:28For you, this is like a gold rush.

7:31Because now, you just need to clean up

7:33some small things, then you have your

7:34components. But the issue here is two.

7:38This took 9 minutes to generate.

7:419 minutes for this many variants? For a

7:44designer who's built a design system

7:46before,

7:47you could have all of this done

7:50in about a minute and a half. Less than

7:52that, probably, and you wouldn't even

7:54need to do any polishing.

7:56So, if you're trying to build

7:58simple components like this, you're

8:00going to need to ask yourself if it's

8:02actually worth it. Because this is the

8:04most simple of simple components, a

8:07button component, because it doesn't

8:08have any atom components. And you can

8:10imagine the more complex the components,

8:12the more rework that's going to have to

8:14happen. Back inside Claude design, let's

8:16let's demo when we have more complex

8:18components like a like atom components

8:21that make up a menu. So,

8:23uh let's pivot

8:25to a menu components.

8:29Uh each menu components

8:32or the menu components, the menu

8:34components

8:36uh needs atom components

8:39that make up the menu components.

8:42Let's call this menu list item.

8:45Just describing at a higher level, we're

8:47going to pivot to menu components.

8:49Uh the menu component needs atom

8:51components that make up the menu

8:52component, which is a menu list item

8:54component. I know that's a mouthful.

8:56Let's run that now. Let's see what it

8:58comes back with. Got a result back.

9:00Let's do the same thing. Let's uh hand

9:02this off to Claude code. I'm going to go

9:04into Claude code, paste that in, build

9:06it there, and then push it to Figma. And

9:07then when I reshare my screen, I'm going

9:09to be in Figma so I can show you what

9:10the component structure is. Running and

9:12doing its thing here.

9:13Look what we have. We're at 8 minutes

9:16and 52, 53 seconds

9:18to build these inside of Claude code so

9:20that we can push them into Figma.

9:23That is not an efficient workflow. This

9:25process also takes even longer if you're

9:27using an existing design system. Because

9:29Claude or the AI or Codex needs to go

9:31in, analyze the tokens, analyze the

9:34components, analyze what you already

9:36have, and start to pull these in

9:38together. The components that we're

9:39building there, they're not attached to

9:41any styles. They're not using any

9:43existing component tree.

9:44AI's just building them as it would on a

9:46blank canvas. So, when we start

9:48connecting in our design system, our

9:50variables, our tokens, or whatever,

9:53the time usually doubles in some cases

9:56and takes double the amount of tokens.

9:58That's not a good workflow for us. This

10:00here is what it came back with. This

10:02looks pretty good in the grand scheme of

10:04things. I'm going to talk you through

10:04this. We have our menu component.

10:06So, we have everything. It looks like

10:08there's some fill the hug space there

10:10that, you know, this should be set to

10:12ideally, this should be set to fill.

10:14Uh if we go through, perfect. Things

10:16look pretty good. We have our menu item

10:18checkbox, we have our menu item radio

10:20button, and we have our menu item. Also

10:22below, it built the checkbox, it built

10:24the radio button, and it built some of

10:25the other things, too.

10:27This looks pretty good in the grand

10:28scheme of things. Now, if this was me,

10:31what I would do is I'd probably combine

10:32all of these menu items and make it an

10:35all one large variant grouping. So,

10:38instead of having two inside of the

10:40components, here I just have access to,

10:43you know, this basic menu item, I'd be

10:45able to swap between the checkbox and

10:48the radio button, as well.

10:50It's just a different way that it did

10:52things, but, you know, that would

10:54require some rework. And sure, I could

10:55have been a little bit more explicit in

10:57the actual prompts.

10:59So, this looks pretty good.

11:01This looks great in the grand scheme of

11:03things. This is the job of a junior

11:05design system designer. There's one

11:07caveat to this. So far, we've done two

11:10of the most simple components. We have

11:11our button components and we have menu

11:12components, which are a little bit more

11:14complex, cuz they consist of like an

11:15atom component, like that menu list

11:17item.

11:18But, they're still relatively simple in

11:19the grand scheme of things.

11:22Those took 30 minutes to build. And it

11:24would still require some sort of manual

11:28intervention to fix a lot of the

11:29components, to audit them, and do other

11:31things, as well.

11:33And as I said, they weren't using our

11:34variables in any of our existing Adam

11:36components that we might have set.

11:38There's just raw hex codes applied to

11:39them.

11:41So, you can see that just because AI can

11:43do it, doesn't mean it's a good workflow

11:45for you to use on a day-to-day basis.

11:48There's another thing that you need to

11:48think about here,

11:50which is your usage.

11:52I haven't used Claude Design at all in

11:53the last week, and just from all that

11:55alone, I'm already at 28%

11:58full of my Claude Design usage for

12:00whatever reason.

12:01And why am I using Claude Design? It

12:02generally produces a little bit of a

12:04better output than Claude Code.

12:06I could use Claude Code, sure, just

12:08remove Claude Design entirely, but

12:09there's something I've noticed. The

12:10output on Claude Design is a little bit

12:12better. If I was to put it just do it

12:13just in Claude Code, I'd have to prompt

12:15a little bit more. So, I'm going to use

12:16more tokens.

12:18I'm also on the Claude 20X Max plan. I

12:21had upgraded last week when I was

12:22filming my Claude Design video. Link if

12:24link for that in the description.

12:26So, I might have more room to start

12:28prompting and generate things inside

12:30Figma, but that costs for organizations

12:34or for solopreneurs, solo designers,

12:37solo entrepreneurs, solo designers.

12:40That's really going to add up over time.

12:43And you're starting to see cases where

12:46companies are actually scaling back

12:48their AI budget cuz it's gotten so out

12:49of hand. I believe it was Uber that ran

12:51out of their AI development budget like

12:533 to 4 months.

12:55It's not as easy just sitting here and

12:58prompting all day long cuz there's

12:59actual costs associated with it. There's

13:02a lesson in that. It's don't have it

13:04build your button and basic components

13:06because the time it takes and the tokens

13:09that it burns through are simply not

13:11worth the results. It's best to have

13:13some level of fundamental knowledge on

13:15design systems, especially if you're a

13:17designer. If you're a developer and you

13:20don't care to work with Figma, I get it.

13:22But if you're a designer, you should

13:23know how to build basic componentry

13:25because that's what jobs are still

13:27looking for.

13:28AI hasn't replaced that yet, and it's

13:31pretty rare in my personal opinion that

13:33it's going to replace the entire job of

13:34a design system designer. And I have my

13:36own reasons for that. But don't have it

13:38build your button and basic components.

13:40What you should start out with though is

13:42a pre-built variable set and a basic

13:44component set. Doesn't need to be

13:46anything fancy. Just make sure you have

13:48your button components down, you have

13:49your

13:51uh field, label, input, link,

13:53breadcrumb, a real simple list of

13:56components. If you already have a design

13:58system that's built and has everything

13:59you need and great, just use that. But

14:02it doesn't even need to be anything

14:03fancy. And I even have a free video on

14:06YouTube. It's 3 and 1/2 hours long.

14:08Where I built work with you to build a

14:10very sample design system that you can

14:12easily customize. And we have other

14:14resources available with some more

14:15complex stuff. But I'll put some links

14:16down below where you can go and get

14:18started and learn some of the

14:19foundations in order to supercharge your

14:21own process. Small tangent, but this

14:23video took me 15 hours to film, so go

14:25watch it. Let's talk design tokens and

14:27Figma variables now.

14:29I want to call out that no two design

14:31systems are the same. It doesn't matter

14:35if you're in the same space, you know,

14:38same industry, same niche.

14:40The Figma variables and design tokens

14:42that your competitor has are always

14:44going to be different than the ones that

14:46you have.

14:47They're not the same.

14:49And I'm always getting questions like,

14:51can AI generate my Figma variables for

14:53me?

14:55In theory it can.

14:57But it's not going to guarantee that

14:59what it gives you is actually going to

15:02be right.

15:04Now, I see a lot of this.

15:06Where AI generates a JSON file for

15:09designers, whether you're on a cursor,

15:11whether you're on Claude.

15:13And then you can upload that JSON file

15:15to Figma now. Or maybe you're using

15:17something like Token Studio. Now, that

15:18truly doesn't work because sometimes

15:20like the aliases of the variables,

15:22they're not connected back to the next

15:23grouping, but whatever.

15:26Then all of a sudden you realize you

15:27need more tokens because what AI gave

15:30you the first time wasn't thinking about

15:31a component that you hadn't yet built.

15:34And now there's a lot of confusion. I

15:36spelled confusion wrong, sorry.

15:38Um because you didn't build out your

15:41Figma variable library.

15:43So now when it comes to building out

15:45like making tweaks to that library, you

15:47don't even know what to do.

15:49So what you have to do that is you have

15:51to go back to the AI that generated that

15:52initial JSON file for you.

15:55Describe to it the tokens that you need,

15:57re-upload it to Figma, and now

15:59everything's broken.

16:01So just because AI is able to generate a

16:03JSON file for you, doesn't mean that

16:06it's going to that it should replace the

16:08manual work involved to build out your

16:10design tokens, to build out your Figma

16:12variables. And I like to think I'm a

16:14pretty nice guy, you know, I respond to

16:16every email that I get basically, you

16:18know, I spend about 15-20 hours a week

16:20filming content for YouTube or for the

16:21academy or whatever. But there's always

16:23one email I will always ignore.

16:25Which is AI gave me these variables, can

16:28you tell me what it is I'm missing?

16:30I have no idea. I don't know your brand.

16:34AI doesn't know your brand. AI doesn't

16:36know all the components that you need.

16:37AI doesn't know the properties that you

16:39need.

16:40AI doesn't know the designs that you

16:43have in your road map for the future

16:45that are going to need to introduce new

16:46variables.

16:48And then like if you can't tell that to

16:49AI because you don't know, how am I

16:51supposed to know?

16:52So if you find yourself having to ask

16:55questions like this around ooh, AI gave

16:57this to me, but I don't know what it is

16:58that I'm missing.

17:00What you're doing is you're relying too

17:01much on AI for a process that AI cannot

17:05fully replace yet. There's a ton that

17:07goes into very Figma variables. And the

17:10way I do it is going to be the way is

17:12going to be different than the way that

17:13you do it, which is different than the

17:14way someone else does it.

17:16So there's no one-size-fits-all

17:19to your Figma variables or design tokens

17:21that AI can fully replace. And luckily

17:23for you, I have a bunch of free videos

17:26on YouTube. I'll link them down below.

17:28Where I talk you through how to set up

17:30your design system, your Figma

17:31variables. It might take you 2 to 3

17:34hours to fully go through it, but it's

17:36better than having AI build it and then

17:39spending 10 hours trying to get AI to

17:40fix it or trying to understand what to

17:42do.

17:43Design tokens and Figma variables is one

17:45of those items where if you're just

17:47getting started that AI cannot replace

17:49cuz there's too many factors that go

17:52into it. You might be wondering, how is

17:53it I have found a lot of use of the AI

17:55in design systems? And my team and I,

17:57for the most part, we build design

17:58systems for a living. Come work with us,

18:00link in the description.

18:01Is

18:03AI can help us build more complex

18:05models, layouts, cards, other types of

18:08things, too.

18:10That we can actually modify and

18:11contribute

18:13to our design system. As we saw, AI can

18:15help us build some of the components and

18:17build some of the models and layouts.

18:19There's going to have to be some

18:20refining that's done.

18:22But AI is better served for more complex

18:25elements.

18:26And we're going to look at that in

18:27generating a nice modal and something

18:29more complex that would take us a fair

18:31bit of time. AI can actually do that for

18:33us that we can contribute to the design

18:35system later.

18:37But there is actually a right way to do

18:39things and prep AI to

18:42work with our design system

18:44as best as possible. As I discussed

18:46earlier, it's best to have a starter

18:48design system of some point.

18:51Here we are in the design system that's

18:53a part of our academy. Again, link in

18:54the description. Now, there's a million

18:56and two design systems like this out

18:58there. Doesn't necessarily need to be

18:59ours. Choose whatever one that you want.

19:02Is I just have some real simple

19:03components here. So, we have our form

19:06elements, we have our navigation

19:07elements, we have our data display

19:08elements. There's other things that you

19:09can include here, too.

19:11But we we also have our Figma variables,

19:14too. Can't forget about those. So,

19:16again, if you're not too sure how to set

19:17up your Figma variables, go watch a

19:19video. It's in the description where I

19:20show you how to chat you through this.

19:21It's the same video. It's on our

19:22academy.

19:23So, we have our maps

19:25collection, which is where all the heart

19:27of the action is. This is where we pull

19:29a lot of the variables from that

19:30actually go to our components.

19:32We have our brand collection. We have

19:33our alias collection. We have a

19:34responsive collection, too, and

19:36gradients and opacity, but whatever.

19:39Is

19:40what we want is we want AI to study this

19:44design system.

19:46And in order to do that, we need to

19:48create some skills. But, we just don't

19:50want to take this file

19:52and then hand it off to Claude or Codex

19:55or whatever tool we're using and say,

19:57"Hey, study this." There's a method to

19:59the madness.

20:00First things first, I want

20:03Claude to know or AI to know

20:06a lot about our variables. That's one of

20:08the most important parts. And as you can

20:10see here, like this is some pretty

20:12complex stuff. And the variables here

20:14might not work for every brand. So, it's

20:16difficult for AI to generate tokens,

20:18going back to what I was talking about

20:19earlier. It's besides the point.

20:22Is the best thing that you can actually

20:24do to prep your AI

20:27is have a list of all of your design

20:29tokens or your Figma variables.

20:31Where you have the name, the value in

20:33light mode, the value in dark mode, and

20:34a brief one-line description on when

20:36it's used for.

20:38If you ask AI to do this, it's going to

20:40hallucinate. If you don't have a

20:42one-line description on when to use a

20:44specific Figma variable or design token,

20:47it's not going to know when to when to

20:50use that token. Cuz unless the naming is

20:52super clear,

20:53like error on on color, when is that

20:56used for? That's some unique naming.

20:59And not every design system or AI not

21:02every design system uses that naming,

21:03and not every AI is going to know what

21:04to do.

21:06So, have some sort of template like

21:08this. Spend 15 minutes spin it up.

21:10There's a million and two free templates

21:11like that out there.

21:13So, like, you know, it's there's kinds

21:15of templates not hard to find. That's

21:16what I'm trying to get at. So, before we

21:18start with our components, cuz I want to

21:20start and train AI on our tokens and our

21:23variables. So, I'm going to copy a link

21:25to this frame. Oops. Copy a link to this

21:27frame specifically, and let's navigate

21:29into Claude. Here we are in Claude. I'm

21:31using Sonnet just because Opus seems to

21:34be down for whatever reason seems to be

21:35taking forever. Claude's having some

21:37issues today, but whatever. So, I'm

21:39going to paste in the link to that thing

21:40the file.

21:41Uh please study uh

21:43this Figma frame or sorry, link to that

21:46Figma frame, not the Figma file. Uh

21:48please study this Figma frame consisting

21:51of all of our

21:53design uh tokens and Figma variables

22:00inside of our design system.

22:04Become a master on the tokens and when

22:07they are used.

22:12After coming to a complete understanding

22:17build

22:19a uh Claude skill

22:23around uh when each variable should or

22:27should not be used.

22:30Do not focus on any components

22:35strictly uh the variables {slash} tokens

22:39inside of that Figma frame.

22:43Be sure to cover both light Actually,

22:47no. We'll leave that part out for now.

22:49Essentially, what we're doing is we're

22:50asking Claude or the AI to study our

22:52design tokens and come to an elite

22:54understanding of when those tokens

22:56should be used, and then build a skill

22:59that the AI can reuse later on

23:02when building different modules, modals,

23:06and things that we can contribute to our

23:08design system with. That's what I'm

23:10trying to get at here. Let's run. Look

23:12at what it came back with. So, now we

23:13have a skill around when each of these

23:16variables, design tokens, whatever you

23:18want to call them should be used. One

23:20thing I'd like to call out is So, it's

23:21pretty comprehensive, but it also went

23:23ahead and did like the the font style

23:25tokens as well. Um one thing I was going

23:27to do as part of this video was also

23:28build another skill around our font

23:30style tokens and like our font styles.

23:33Like you can do that if you want to, but

23:35it already included it. So, I'm probably

23:36going to skip that part. It's not the

23:37end of the world if it's included in

23:39here.

23:40So, this is a reusable skill that

23:42whenever we're generating anything

23:45AI can look at

23:47in order to check which variables should

23:49be applied where and when.

23:52Let's go ahead and save this skill now.

23:55So, that skill's now saved.

23:57But now So, AI knows a lot about our

23:59Figma variables, but what about our

24:01components? Let's flip back to Figma.

24:03Back inside our design system.

24:05I want to talk you through something.

24:07Is look how I've grouped the specific

24:09components. We have our form elements.

24:11We have our navigation elements. We have

24:13our data display.

24:16What a lot of designers do when they're

24:18working with AI in their design system

24:20is they upload everything at once.

24:23But that causes AI to hallucinate

24:26and come up with things that aren't

24:28necessarily true when analyzing your

24:29design system.

24:31But if you work with AI to analyze

24:33component specific component groups, not

24:36everything at once, but specific groups

24:38like form elements, like navigation

24:40it generally comes to a little bit of a

24:42better understanding of the components

24:44that are there.

24:45And also when they should be applied,

24:48when they should not be applied.

24:50So, if you're looking to leverage AI

24:53with your design system, my suggestion

24:54to you

24:56break out all of your components and any

24:58groups that you want. Again, I have good

25:00luck with form elements, navigation, and

25:01data display. That's pretty

25:02comprehensive, but other design systems

25:05have other groups out there as well.

25:07It's not the end of the world.

25:08Now, what we are actually going to do

25:11is we're going to copy a link

25:12to this entire Figma file.

25:15And then go back to Claude. Back inside

25:17Claude then, let's paste in the link to

25:18that Figma file. Uh above is our design

25:22system.

25:23Uh come to a

25:26uh an elite understanding

25:29uh elite understanding of all of the

25:31components

25:32in

25:34in the following uh groupings.

25:37Uh so, we have our form elements,

25:41navigation,

25:44and data display.

25:49Uh of all the components, uh their

25:51variants,

25:53and properties

25:55in the following groupings.

25:57Uh

25:59After mastering uh the components,

26:03builds a Claude skill

26:06around

26:07uh

26:09which components

26:11are in the design system

26:14and when they should

26:17should not

26:19uh be used.

26:21One thing that's important to note here

26:22is just to save time, I'm combining it

26:24all into one. You might actually,

26:26depending on how complex your design

26:28system is, want a separate skill for

26:30form elements, for navigation, and also

26:32data display.

26:33Another thing that's really important to

26:34call out is don't just list components,

26:36because sometimes it might just pull one

26:38component. When in reality, one

26:40component has all these different

26:41variants and all these different

26:43properties as well, like the ability to

26:46turn on and off an icon. That kind of

26:48thing. So, above is our design system

26:50inside of Figma.

26:53Uh

26:54do not uh look at uh variables. Do not

26:58document

27:00you meant variables

27:03or design tokens as these are inside

27:07another skill. So, about the design

27:10system inside of Figma, come to an elite

27:11understanding of all the components,

27:13their variants, and properties in the

27:14following groupings: form elements,

27:15navigation, data display. After

27:17mastering the components, build a Claude

27:18skill around which components are in the

27:20design system, when they should should

27:21not be used. One last thing I'd like to

27:23call out is I always call it the

27:24groupings cuz it sort of forces the AI

27:26to go grouping after grouping after

27:27grouping. Sometimes like what it might

27:30do is if the first component that it

27:32looks at has an atom component that's in

27:34another like grouping,

27:37it might jump back and forth, and then

27:39sometimes the results are a little bit

27:40messed up. It's just the way I do

27:41things. You again, you can trial and

27:43find a way that works for you. Uh but

27:45let's go ahead and run this again. I'm

27:46just using Sonic just because Opus it

27:48seems to be down, so let's run. This

27:50here is what it came back with. So, a

27:51decent-looking skill with all our

27:53components, their variants, their

27:54properties, so on and so forth.

27:56Now, I know this is just like draft one,

27:58but personally I'd probably go a little

27:59bit more in-depth on this just cuz this

28:01is a super important skill. So, we can

28:02dialogue with Claude a little bit more

28:04to add more detail. One thing you also

28:06might want to consider is playing around

28:08with different structures of your skill

28:11here. Like maybe you want form elements,

28:13um navigation, and data display to all

28:15have a separate .md file with the skill

28:18.md file like coaching the AI in where

28:21it went to look in which folder and

28:23which components are where. It's just

28:24different ways that you can set up your

28:26skill to be more efficient with the AI.

28:28Again, I'm going to leave that to you.

28:29Off camera, I already saved this to my

28:31skill, so be sure to save that to your

28:32skills, and let's keep moving forward

28:34now. One thing you might be asking

28:35yourself is do we really need to go

28:37through all that setup process if we can

28:39just import our design system to uh

28:42Claude design.

28:44We can in theory, and let's go through

28:46this. Is I'm just going to again, just

28:48in an empty

28:50Claw design space.

28:51Here we have a simple design system.

28:53Let's go ahead just choose to to edit

28:55this.

28:56And what we're going to do is we're

28:58going to upload

28:59a Figma file. So, I just downloaded the

29:02exact design system that we are

29:03referencing earlier, and we're going to

29:05use that. So, I'm just going to go ahead

29:06and drag in uh that design system right

29:09here. Do do do do. We're going to choose

29:11to attach all those pages and all those

29:13frames. So, let's attach.

29:15Beautiful. It's attached. Let's just

29:17continue to generation. So, it usually

29:20takes about

29:21it says 5 minutes, but sometimes like 15

29:23minutes to actually generate the design

29:24system. So, let's go ahead and generate

29:26this. It's gone through and pulled a lot

29:28of items in that design system.

29:31Let's analyze this.

29:33Right away when I go into type, again, a

29:35lot of these things I covered in that

29:36Claw design Claw design video I posted

29:38last week.

29:39I don't have font this big. I don't have

29:42displays. I have a hero, but I don't

29:44have displays.

29:46So, it added additional styles that were

29:49not inside of our design system. So, I'd

29:51need to burn through more tokens now

29:53describing that this needs work.

29:56Now,

29:57that's just type. Let's look at other

29:58things, too. Let's go to buttons.

30:01So, it's telling me that I only have

30:03these button variants. But in the design

30:05system,

30:06I have there's like 96 different button

30:09variants to support things like success,

30:10warning, information.

30:13There's a lot more to it than what's in

30:15here. It looks like the disabled

30:17variants aren't even right, either.

30:19So, it's missing button components.

30:22And even too, like the wording is wrong.

30:25I call it error. I don't call it danger.

30:28If we go into What's another one? We go

30:30into our avatars.

30:33I don't use these types of colors inside

30:36my avatar components.

30:38And it's missing variants of avatars, as

30:41well.

30:43The colors look accurate, so it looks

30:44like it did pull in some of the colors,

30:47but it's missing a ton of different

30:49variants that are inside of that design

30:51system.

30:52And as we looked at earlier, I hadn't

30:53used Claude Design for a lot in the last

30:56week. Next to nothing at all. And I was

30:58already at 23% through sort of my Claude

31:01Design usage.

31:03So you can imagine how many how many

31:05tokens you're going to burn through

31:07having to tweak your design system

31:09inside of Claude Design and reminding

31:10it, "Oh, we actually have these

31:11components. We have all these

31:12components. We have all these

31:13components."

31:14Personally, I think this is a good

31:16start. Claude again, Claude Design came

31:17out like a week and a half ago. So it's

31:19a good start when compared against other

31:21design tools that I've seen that are out

31:23there.

31:24But the effort required to make sure

31:27that the components that it generates

31:29and pulls into Claude Design from the

31:31design system that we uploaded, it's

31:33just it's just too much. It's not worth

31:36the time and it's not worth the usage in

31:39order to get it right. This is one of

31:41those things I think we should revisit

31:43in like 2 or 3 months and see how much

31:45it's improved. But again, the effort

31:47required to make it match the design

31:49system inside of our Figma file, not it.

31:52By this point, AI now knows a lot about

31:54our tokens and our components, which is

31:56good.

31:57But let's generate a more complex model

31:59now. We can maybe look to contribute to

32:01our design system because as I was

32:02talking about earlier, it's not

32:03efficient for us to spend our time

32:05building the simple components that are

32:07already available out of the out of the

32:08box elsewhere. Just doesn't make sense.

32:11But for a more complex

32:14widgets and things that still can go

32:16into a design system, there's a way that

32:17we can set this up and do this

32:19correctly.

32:20But we do need to conserve our tokens.

32:23Because if we sit there and we just keep

32:25describing what we want and having

32:26whether it's Claude Code or Codex or

32:29other AI tools, having it fix things,

32:31"No, this is what I meant. That's what I

32:32meant." We're going to burn through more

32:35tokens. So believe it or not, there's a

32:38right way that we should generate some

32:41of these, you know, modals, cards,

32:43layouts

32:44that can go into our design system to be

32:46a little bit more efficient with our

32:48tokens. Just because it's for a design

32:50system does not mean that we should not

32:52do research

32:55into the different layouts and things

32:57that we're going to want to contribute.

32:59So, this is an easy way to conserve a

33:01lot of our tokens. We're all familiar

33:03with Mobbin. Again, it's just a massive

33:04repository of a ton of apps, flows, UI

33:07elements, and stuff that are out there.

33:10But, most people we use it for screens.

33:13But, Mobbin also has a library of UI

33:17elements as well

33:19that we can come in here to get

33:20inspiration to better feed

33:23our AI.

33:24So, in this case, let's say I'm looking

33:26for

33:28uh full-screen overlay. We can browse.

33:30Let's just search modal and just see

33:32what comes up. Yeah, full-screen

33:34overlay. Let's take a look at

33:36something here.

33:37So, we can come in here and use a lot of

33:41this inspiration to feed the AI

33:44around what it is that we want and then

33:46component-size some of those pieces.

33:48Now, this full-screen overlay might not

33:50be the best example.

33:52Um I'm trying to think. Let's go with

33:54like a dialogue

33:55uh dialogue box uh dialogue UI elements.

33:59So, let's browse here and I'm trying to

34:01look for something. You know what? I

34:03Slack actually just invited someone to

34:04our Slack channel. So, let's look at

34:06Slack's

34:07um item. So, where is their invite

34:10modal? So, I'm going to pause here and

34:11try to find it. Unrelated, but you can

34:13take 20% off the annual Mobbin plan

34:15using the link in the description. But,

34:16anyways, this is the kind of modal that

34:18I was looking for. I actually found it

34:19on like the the apps section, the web

34:22app section of Mobbin. Um

34:24and what's great about this is this is a

34:26core part of Slack's UI. So, of course,

34:28they might want something like this

34:29inside of their design system. What I'm

34:30trying to get across here is you can use

34:32AI to build some of these larger layouts

34:34and models, so you don't have to do it.

34:35You can do other things.

34:37While still having it somewhat connected

34:38to your design system and component size

34:41a lot of the elements, whether AI does

34:42it or you have to go in after and make

34:44some tweaks.

34:45So, I'm going to take a screenshot of

34:46this and maybe find one more example.

34:48Then we're going to flip back to Claude.

34:50Inside of Claude code now, I just burned

34:52through tokens telling it hello.

34:54Is we're going to paste in a link to our

34:56Figma design system.

34:58Inside of this design system,

35:00we are going to build uh modal

35:03components

35:05uh that

35:07uh

35:08is similar

35:10to the examples attached.

35:13So, let's go ahead. Let's just bring in

35:16those two screenshots here that we took.

35:18I found another one from Threads, so not

35:19just Slack, so Slack competitor.

35:22Um

35:23we need the modal

35:26uh aligned with our design system

35:31and uh Figma variables.

35:35Figma variables, please reference

35:38the component

35:40uh

35:41scale

35:42and our uh design tokens {slash} Figma

35:47uh variables

35:49uh scale.

35:50So, inside of this design system, we're

35:51going to build a modal component that is

35:52similar to the examples attached. We

35:54need the modal aligned with our design

35:55system and Figma variables. Please

35:56reference the component scale and our

35:58design uh tokens {slash} Figma variable

36:00scale.

36:01Uh build this locally first

36:04in HTML, React, whatever.

36:07Uh

36:08and then once we like uh the design, we

36:13will push to uh Figma. Let's run that.

36:17While this is busy generating the design

36:19before we push to Figma, go do anything

36:21else. A lot of people when Claude or

36:23Codex whatever is taking time building

36:25something, they just sit here staring at

36:26it.

36:27AI is supposed to make us more

36:28efficient,

36:29not just give us like 10 minutes a day

36:31to stare at a screen. All right, so

36:33while Claude is generating the component

36:35that we eventually going to push to

36:36Figma, go review other designs, go focus

36:38on other components, go do anything

36:40else. So, a couple things here is

36:42so it gave me two modals. Now, this is

36:45where AI just made a mistake. I probably

36:46could have been more explicit. Sorry,

36:48that's on me. Where I thought we're

36:50going to build one modal. I specified a

36:52modal component, but what it did is it

36:53actually gave me two. But, it's okay cuz

36:55what we're going to do is we're going to

36:56try to see if we can make it into

36:57variants.

36:58So, if I can open the browse channel

36:59modal, this is similar to one example.

37:01If I open the channel modal, this is

37:03similar to another example as well. It's

37:05similar to the Slack example. But, it

37:06looked like it also did add a twist down

37:08here, which it pulled from one of the

37:10other the other example that I gave it.

37:12That's fine, you know. Ideally, what we

37:14don't want to do is have AI generate

37:16designs look exactly like the examples

37:18we give it, but find some middle ground.

37:20It didn't this time, but that's fine.

37:22Again, this is just an example.

37:24Now, to also talk you through the prompt

37:26here is I always provide the Figma file

37:30just in case it needs to reference it.

37:32Um and another thing too, always

37:35reference which skills it should call

37:37call to the component skill and our

37:39design token {slash} Figma variable

37:41skill. And we'll build it locally first.

37:43What a lot of people do is they say

37:45build this in Figma, but you don't know

37:47if you actually like the design yet. And

37:48it burns way more tokens pushing to

37:50Figma. So, best is to like make sure

37:53it's ran locally first and you really

37:55like the design before you push to

37:56Figma. Let's uh have send this to Figma

37:59now. Please send uh both modals

38:05to Figma as variants as variants of a

38:10new components.

38:12Whatever, I think that makes sense.

38:14Um ensure proper use of atom components

38:19uh where required

38:22and build new atom components

38:25where needed.

38:27If you need to use an existing

38:30components,

38:34use it and do not generate a new

38:38duplicate

38:39components.

38:41Something like that. I can probably

38:42clean it up, but please send both models

38:44to Figma as variants of a new component.

38:46Ensure proper use of atom components

38:47where required and build new atom

38:49components where needed. If you need to

38:50use an existing component, use it. Do

38:52not generate a new duplicate components.

38:55Let's run that. This is what it pushed

38:57to Figma. Looks pretty good.

39:00Where we have our modal

39:02and we also have the variants other set

39:05of variants. So, we can toggle between

39:07these now just based off that

39:10inspiration that we gave it.

39:12And if we click in here, there's a

39:14couple things that we notice. So, right

39:16away, it's using our variables.

39:19Even our border width variable. The drop

39:21shadow drop shadow style didn't get

39:23used, but that's okay.

39:25And if we click in here,

39:27okay, I need to clean up some of the

39:28spacing variables, but that's fine. But,

39:30all the other variables appear to be

39:32applied correctly. And if we even click

39:34in, I can see on the left-hand side

39:36here, it's using

39:37our existing

39:40components to build this.

39:43This is amazing. If you've ever tried

39:45this before and just had Claude

39:48try to spin this up for you without

39:49going through that workflow that we did.

39:52It usually wouldn't be this good in the

39:54grand scheme of things. A lot of things

39:55would be like just pure hex codes,

39:58variables not applied.

40:00But, this looks as if it used our

40:02variables, used our design system, used

40:03our components. Now, of course, there's

40:05still some cleaning up that we would

40:06have to do. Like as I said, it didn't

40:07apply the drop shadow style, but that's

40:09fine.

40:10But, this now as a designer, this is

40:12getting close to a point where after a

40:13couple minutes of polish, we'd be able

40:15to start sharing with our team. It's not

40:18ready for dev handoff yet. But, these

40:20models alone would probably take the

40:22average designer you know, about 25 or

40:24so minutes to spin up.

40:26You know, to get the spacing down, to

40:27get everything down. But, AI was

40:29actually able to build these components

40:31for us. So, now we're further along and

40:34closer to contributing these types of

40:36models, layouts, whatever it is, to our

40:39design system. And remember how we had

40:40installed that audit design system

40:42skill? Let's put this to use. I just

40:44copied a link to that frame that we were

40:46looking at inside of Figma. So, let's uh

40:49copy that and say, "Audit this for uh

40:53design system uh drift." And it's going

40:56to call that skill and come back with

40:58the report.

40:59You can see that it came back with

41:02an audit of all the findings as to where

41:04those designs did not actually

41:07match our design system. Small things

41:09that uh you know, a text is not a link

41:13or is missing some styles or something

41:16should be a reusable atom component.

41:19This is the thing that really would

41:20really take like a junior designer to a

41:22senior designer. Doing this level of

41:23audit, recognizing when there should be

41:25an atom component versus not an atom

41:27component.

41:28So, and we're using that audit design

41:30system skill, even for the components

41:32that it creates, you can still have it

41:33do an audit and encourage it to fix

41:35those items based on its associated

41:37findings. Hey, thanks for watching this

41:39one. Really appreciate you being here

41:40and making it this far in the video.

41:41Going to have a lot more content coming

41:42on design systems, AI, other design

41:45content as well. So, be sure to drop

41:46drop a subscribe. Also too, be sure to

41:48check out our academy uh for a bunch of

41:50great courses, private Slack channel

41:51access, and more. And again, it's

41:52totally free to join the community. Um

41:54I'll put the links to other videos that

41:56I suggest you watch down below. Um if

41:58you want to build an entire design

41:59system, click in the top left. If you

42:01want to watch another video that I

42:02highly recommend, click in the top

42:03right. See you in the next one.