AI + Design Systems in 2026: The Workflow I Actually Use

Let's talk about AI and design systems. We'll start off really quickly by talking about current limitations and sort of the space as a whole before looking at how I'm using AI in my design system workflow to speed things up, impress clients, whatever. I'm going to

keep filming videos like this as new features come out, new tools, so on.

Let's get started. Real quick before we begin, if you're a big fan of myself and what we're doing here at UI Collective, consider checking out our website. I'll

put a link for this in the description.

If you want to join the academy, you get access to a bunch of great courses, a bunch of great micro lessons, and a whole lot more in progress. Last week I released a course on design system governance where I just released everything I know uh on the subject into

a course. Uh and even if you don't want

a course. Uh and even if you don't want to join the academy, it's free to join the community. You get access to free

the community. You get access to free resources, you can ask any questions for free on our community forum and I respond to every question that's on there. So whether you want to join the

there. So whether you want to join the academy, you want to join the just join the community. Thanks so much for your

the community. Thanks so much for your support. I'll put a link for this in the

support. I'll put a link for this in the description. AI and design systems in

description. AI and design systems in 2026 so far. Now I say so far is because this is an evolving series because this year is a growing space. AI and design

systems. So, as the months progress, I'm going to release updated videos with new approaches to working with AI within the context of your design system. New tools

that I find interesting and that I'm actually using. Not just ones that are

actually using. Not just ones that are out there, but ones that I actually feel that you should adopt inside of your design workflow. So, as the months

design workflow. So, as the months progress, I'm going to be dropping new videos like this. So, be sure to follow this space. Now, let's dive in. Now,

this space. Now, let's dive in. Now,

what can AI not do, or at least not do well? It cannot build you a variable

well? It cannot build you a variable library from scratch. which mean you cannot open up a brand new Figma file and say build me a variable library for a SAS health tech startup can't do it

also too it cannot build Figma designs using a design system like any project manager who's like I need you to build me a dashboard which translate to a Figma file with AI good luck can't do it

at least not yet maybe in the future but not yet and we're going to touch upon this topic again very shortly and also too it cannot build you components AI can build designs but these designs and cannot like be readily made to

components. I'm going to show you a

components. I'm going to show you a little bit about what I mean a little bit later on, but it tends to group things instead of using auto layout frames and other issues like that too where we almost if it gives you anything

you spend more time having to actually rebuild it. Um when you could have just

rebuild it. Um when you could have just built it from the ground up to begin with. So these are three of the key

with. So these are three of the key things around questions that I do get asked a lot that AI cannot do or not do very well. Now, as of right now, this

very well. Now, as of right now, this one's really important, is don't trust any tool that says it builds perfect components, build designs using your components, so on and so forth, because legitimately, you're going to spend more time trying to get these tools to work

than actually making any significant progress. Now, as I said before, these

progress. Now, as I said before, these tools, they use groups, not not auto layout. So, obviously, like this isn't

layout. So, obviously, like this isn't going to be effective. You're having to take what they give you and just rebuild it from the ground up anyway. Doesn't

help. And also too, it uses your component styles, but the components aren't actually used. So what it does is it looks at your your form field or your

button and it recreates that form field in the button using the variables, but it actually use your component. So it's

great for generating like quick mockups and things like that, but the component, what's the point of it uploading your design system if the design system components aren't actually being used because you'd have to rebuild it anyway.

So, I get a ton of like questions from clients and from like people in the UI collective community whose like bosses are like telling them to investigate these tools or look for a tool that does this. There's a lot of tools out there

this. There's a lot of tools out there that say it builds designs using your actual design system components. They

don't really. Now, that said is that there are some tools coming out that build component libraries and designs outside of Figma, but we work in Figma, so I haven't found

any value working with them in my design workflow as of yet. They're cool to use.

They're cool to try, but all my clients are in Figma. I'm in Figma. Everything

is in Figma. So, what's all the point of me introducing a tool in like as part of my workflow that nobody actually uses and I can't really use in my day-to-day job because the value simply isn't there

yet. Now, I'm going to be monitoring

yet. Now, I'm going to be monitoring these tools and if one comes out or an update from one of them comes out where I actually find significant value, I'm going to let you know right away. So,

again, watch this space. Now, one thing you might be thinking, Kirk, in a couple videos ago, you released a video where you build a variable library from scratch using AI, which I did. However,

it requires considerable input. You kind

of need to know the foundations of each collection and what it is that you're looking for in order for it to produce something accurate the very first time.

And with that said, good luck getting it perfect first try. is going to require a couple rounds of iteration to actually really get anything right and actually build the variable library that you want using AI the very first time. It's a

cool thing to like work with and it's a really great video. I do recommend you watching it to just use some good like AI concepts, but it's not one of those things where it almost speeds up your day-to-day workflow just because there's a lot of back and forth. There's a lot

of inputting things into AI and you kind of already need to have a little bit of a more highlevel foundational knowledge on design tokens and Figma variables for it to get anything remotely accurate. So

I want to talk about building designs using a design system inside of Figma because a lot of people like oh but Figma make can sync with your design system. Sure it can but it's not

system. Sure it can but it's not entirely accurate. So I want to show you

entirely accurate. So I want to show you what I mean relating to this. So here I am just within Figma make here. So if

you hit this, you can select a design system for it to sync with and which in this case it's like the master file from our collective kit design system and just be like build me a dashboard. Um

build me a dashboard and just enter. So

we're just going to build something real quick and sort of let AI here do its thing. So it gave me back this dashboard

thing. So it gave me back this dashboard here. Not great. I would have to iterate

here. Not great. I would have to iterate on it. Now, couple things is one thing I

on it. Now, couple things is one thing I want to do here is I'm just going to come up and just hit this button and copy the design and then go inside of just this blank Figma page here and just paste it in. Oh, we're super zoomed out.

Uh, and one thing that we noticed right away, look, it didn't use our actual variables. At least when I copy it

variables. At least when I copy it inside of FA page, it didn't like apply the variables to really anything. And if

I click into the text, it didn't apply the text styles either. And it gave a line height here of 57.6, six, which just isn't right. And if we click on any of the items in our sidenav, notice too

how it gave us these weird values like a padding of 138.07.

Um, and the variance in the components aren't actually being used. So you, it says in Figma make that it builds a design based on your design system, but I don't know what the background of Figma make looks like. So I don't know

if the variables are actually being applied there. looks relatively

applied there. looks relatively accurate, but if I take that into Figma, it doesn't work. It's broken. There's

all of a sudden there's a disconnect between the actual design system and the designs itself. Doesn't really save us

designs itself. Doesn't really save us any time. And people will tell you like,

any time. And people will tell you like, oh, you can just like because it's already built, you can just sort of recreate it. But you should know by now,

recreate it. But you should know by now, like working with Figma, hopefully being an expert of Figma, if you watched any of our tutorials, like our design system videos like here on YouTube or paid on our academy, that why on earth would you

need like a 138 padding here? What this

should actually be is this should be set to fill, but instead this looks like it's set to a fixed width. So you'd

actually almost have to go through and rebuild the components one at a time to actually get any sort of value out of it. Not worth the effort. So with all

it. Not worth the effort. So with all that out of the way, how am I working with AI in the context of my design system right now? So let's take it take a look at the methods and approaches

that I am using within my current actual design workflow that I am actually finding value within right now. So, I

use cursor when it comes to working with AI in my design system. It's more of a technical tool, but we're going to work with it in a way where you don't need to be technical at all. So, no need to worry. So, go ahead, go to cursor.com,

worry. So, go ahead, go to cursor.com, download Cursor, and we're going to connect Figma MCP to Cursor so that AI can read our Figma file. If you've

already done that in a prior video, you can just skip the next minute or so. Uh,

but if you haven't yet done it, I'm going to walk you through it. So,

navigate to the Figma MCP catalog. I'll

put a link for this in the video description. and come down here and you

description. and come down here and you can just hit uh add MCP to cursor.

Again, make sure that cursor is installed and you're signed in and all that fun stuff. So, you're going to hit add MCP to cursor and it's going to throw you a little Chrome modal. I know

you can't see right here and just hit open cursor. And when a cursor opens,

open cursor. And when a cursor opens, it's going to prompt you to install a specific MP MCP server. So, just hit install. I can see it's loading and now

install. I can see it's loading and now it needs authentication. So, go ahead and just hit connect. Go ahead now and hit agree and allow access. So when you navigate back to cursor, you should see that the MCP server is properly

connected, which is highlighted by this badge here and the switch that it's on.

If you see it loading, just delete it and go ahead and reconnected because it should be something that's instant. So

the first method I use it is whenever I'm working with really complex clients who have really complex designs or really complex design system is I always use AI to make sure that that design system is actually being applied

properly. So almost look at it like your

properly. So almost look at it like your mini like design system assistant who's able to go through analyze the designs and make sure your components tokens styles whatever it is are actually being

used correctly and nothing is floating around or missing nothing's being used in the wrong context. So I want to show you how I do this in the context of our design tokens to start. Now what I'm

about to show you is going to be unique to just colors of our design system.

making sure the correct variables are applied, the correct text styles are applied. This can also come in handy for

applied. This can also come in handy for things like spacing, too. So, what I'm about to show you is kind of a workflow that you can twist on your own in order

to make the most value out of it. Now,

you likely have something like this. And

what I'm showing you here, this is part of the collective kit design system as part of our academy. Again, link in the description, but you probably already have something like this where you have the name of the token, what it is in light mode, what it is in dark mode, and

just a brief description of what that token is for. If you don't have something like this, I strongly suggest producing something like this. It

doesn't need to be crazy, but in the context of a design system, there's a lot of different tokens and a lot of different use cases that are covered.

You can see here, just scrolling through it. Believe it or not, this is actually

it. Believe it or not, this is actually on the more simple end of a lot of the tokens and components that I've seen.

with clients that I've worked with. So,

if you don't have this already, my suggestion to you have just a simple Figma table, a simple anything where you have the token name, the token in light mode, the token in dark mode, and then a description of that token. And what

we're going to do, we're going to feed this the AI and actually work with what's given here and how AI analyzes this to be to build a reusable command that can actually audit our components

and also our designs to make sure that the correct variables are applied so that developers don't get confused. So,

we're going to want AI to actually just like extract the the token name uh and also the description too. So, what I'm going to do, I'm just going to copy this. So, copy uh link to selection and

this. So, copy uh link to selection and we're going to navigate into cursor now.

So, with that copied here, because we've connected Figma MCP, what we can actually do is paste in that Figma link.

And what we're going to do here is you've seen any of our other tutorials, we manually build rules, but I don't want to type out one super long list of

like when to use this token. So, we're

going to have AI do it. So uh uh check the following uh Figma link and build me

a cursor rule cursor project rule uh focused on the design the sigma variables

slashdesign uh tokens and when to when to use them or when they should be applied.

should be uh applied. And let's go ahead and copy that. And I could have worked on the prompt. Um but anyways, I'm doing this on the fly. Believe it or not, it's actually much harder to think about what

you want your prompts to be when you're filming something. Um anyways, let's let

filming something. Um anyways, let's let cursor do its thing now. So, look what it came back with is it came back with a specific file. It went through analyzed

specific file. It went through analyzed uh that table in Figma with all the tokens and their descriptions and when to use them and it came back and it built a rule around this. Now,

essentially what a rule is, if you're new here, haven't watched any of our other vibe coding tutorials, essentially what informs the AI. It just teaches the AI things. So, as you can see here, it

AI things. So, as you can see here, it broke out all the text colors and sort of went through and pulled the name of the token, the color, and also when it should be used. Now you can go a little

bit more in depth on to when it should be used. Here you'll see the

be used. Here you'll see the descriptions here a little bit more high level. If you did want to get this

level. If you did want to get this perfect first time, you'd go through and add as much details onto the rule and usage guidelines for each token if you want to. But essentially what it did is

want to. But essentially what it did is sort of scraped what was in Figma and brought it in here. So now AI can always reference this rule itself. So when we build a command to sort of say, hey,

analyze this component, analyze this UI, it's going to go through here and understand all of the different tokens and when it should be used to identify if something is actually applied wrong.

And you're going to see it also gave me a CSS file, which I didn't ask for, and that one's on me cuz I didn't include only return the rule in the prompt.

Anyways, let's go back and now let's build the command that's actually going to understand this rule whenever we provide a Figma link, whether that's a URL or a component to make sure that the

elements of of our design system are applied in the correct order. So, what's

next is we want to build the command that we can reuse every time we want AI to analyze our design. What we can do is we can call that command and it's going

to check all of these variables that are in this rule and then tell us which ones are applied wrong or which ones are missing. So, let's go into our settings

missing. So, let's go into our settings here, go to rules and commands and we're going to add a project command that we're just going to call um

check variables. Um oops, check uh

check variables. Um oops, check uh variables. Oh, sorry. No, can't have a

variables. Oh, sorry. No, can't have a hashtag. Sorry about that. but just call

hashtag. Sorry about that. but just call it uh check variables. So now let's go through and build out a reusable command that we can use to check our designs. So

now let's go through and build out this command. Now I just added a brief

command. Now I just added a brief description here so you didn't have to watch me write it. So description

analyze a page or component holistically and point out incorrect Figma variable usage. Um so again this command what

usage. Um so again this command what it's going to be is every time we have a page or comp component that we actually want audited we can call this command provided a Figma link and it's going to run through these steps one by one. So

uh with this uh what we're going to do here is again I do h also have just like some notes here on the left hand side is believe it or not it's really hard to think and record at the same time. Uh so

uh let's write this out together. So

steps. So first things first uh determine what this uh what is being shared

is being shared you know uh is it a page or a component uh or something else. So,

it's going to first things first because we don't want to just like go through and start like looking for variables is in order for it to understand which variables are applied and which aren't supplied is it kind of needs to know

what it's looking at. All right. Um,

okay. Perfect. And then two, uh, look at the UI or component or component as a whole. So, essentially what this is

whole. So, essentially what this is saying is don't look at like one specific element. Look at everything

specific element. Look at everything together. how all the like modules work

together. how all the like modules work together or is just like if there's multiple cards on a dashboard, does one have a different surface than the others? Like that's sort of what it's

others? Like that's sort of what it's saying is look at the UI or the component as a whole, identify the page color,

uh identify, identify uh all surfaces, uh identify all borders,

identify all text colors, uh identify all icon colors, all icon colors.

uh and also identify any secondary or tertiary components. So basically everything and

components. So basically everything and whenever I do this I like to include secondary or tertiary because sometimes I do realize that I get so fixated on primary elements. So like calling it out

primary elements. So like calling it out explicitly does help it almost sort of look for secondary or tertiary components elements whatever it is. So

look at the UI or component uh as a whole and then three and then we're just going to review uh if I can spell right review the variables and context.

Oh god I really can't type today. Uh

review the variables in context. So uh

check uh surface variables against surface usage. So essentially what this

surface usage. So essentially what this is saying we've identified them now we're going to be checking what they are against like their proper usage. Uh same

for border same for text.

There we go. All right. Check text

variables against text usage and then icon variables was our other big one.

Again if you have other things in here too you can include them in here.

Beautiful. And then uh step four, call out what uh is wrong. Call out what is wrong. And then just add some steps here

wrong. And then just add some steps here where it's like, you know, uh one um line per issue. uh if nothing is wrong

uh state nothing is wrong or all variables applied correctly. Beautiful. So what I

applied correctly. Beautiful. So what I always do just like for formatting and clean things up is I always take I always like do this really rough and cursor and actually upload a shotg have

it clean it up for like a cursor command or a cursor rule. So, I'm going to do that really quickly. And again,

apologies if I made any mistakes in here. So, hdbt just clean it up really b

here. So, hdbt just clean it up really b really quickly. You don't need to review

really quickly. You don't need to review this uh together. So, now what we have here is if I just go back here and if I just at check variables, notice how that command is actually reusable. So, I

don't need to go through and actually type out a prompt every time. Every time

I want to check like a Figma design or a Figma component for proper variable usage, all I have to do is just call this command and then enter in a Figma URL. So, now let's demo this really

URL. So, now let's demo this really quickly. Let's flip back to Figma first

quickly. Let's flip back to Figma first so we know what it is what's being analyzed. Sorry, it was a little cold.

analyzed. Sorry, it was a little cold.

Had to get changed. Look at the red.

Okay. [laughter] All right. So, what

we're going to do here is let's just go ahead and just put like uh test components. Just build something like a

components. Just build something like a simple button. Uh so, let's go ahead.

simple button. Uh so, let's go ahead.

Let's add a fill. And let's just call this like surface defaults. And let's

maybe set our text to like our uh let's look for something interesting where it's like text.

Uh maybe if we apply this to like a border. Let's actually apply a border

border. Let's actually apply a border element here. Um, border default subtle.

element here. Um, border default subtle.

And then on the stroke, let's maybe not add a border, but we're just going to set the border to something specific.

So, sure, our surface color might be applied, right? But we don't have a

applied, right? But we don't have a border color applied, and we have the wrong variable applied to our our text element. So this is a really small scale

element. So this is a really small scale to sort of demo the power of this, but you can imagine if you had an actual dashboard or a set of UIs, whatever it is, how easy it would be now to go

through and actually just identify where wrong variables are applied before handing that off to devs. So what I'm going to do, let's just create the component of this and just call this

test button. Test button. Uh I'm going

test button. Test button. Uh I'm going to go ahead, let's copy uh a link to this selection and flip back the cursor now. So now with that link copied, let's

now. So now with that link copied, let's go ahead uh apply our add our check variables command and just paste in that URL. Don't need to do anything else

URL. Don't need to do anything else because the like the steps are already in the command file that we built. And

let's add that. Enter that. And now just let it run. See what it comes back with.

All right. Come on. Look what it came back with. Issues found. Text is using a

back with. Issues found. Text is using a border variable. Beautiful. Uh text

border variable. Beautiful. Uh text

should use a text token. Text primary on color. Look at that. It even called out

color. Look at that. It even called out the the specific variable that should be used because we did our rules so well.

Look at that. And then it also said that the border is hardcoded. So it showed the border value. It's a hard-coded hex value instead of an actual border variable and called out the specific border uh that should actually be

applied. Beautiful. Now you can imagine

applied. Beautiful. Now you can imagine how powerful this is if you're doing this on a much larger scale. You built

out an entire dashboard. You don't want to go component to component, element to element, looking to see where issues are with your design tokens. Something's

applied wrong, something's not applied at all. This speeds up my time with

at all. This speeds up my time with auditing designs like 50fold. If you're

really liking this video so far, consider consider supporting UI Collective Academy. You get access to a

Collective Academy. You get access to a ton of great courses. We just launched another one of design system governance earlier on this week. There's a get access to a private Slack channel with myself and other design experts as well.

A bunch of different micro lessons, a bunch of different perks like our collective kit design system, and a whole lot more is on the way. Uh,

supporting this really helps me keep doing this for free on YouTube. So,

really appreciate your support. Let's

keep watching the video. The next one I'm using AI for in the context of design systems is actually generate the design system documentation itself. Now

I know in the past video I released how you can kind of build like a design system documentation site. It's more of a little more little bit more of an edge case little more of a unique case. You

would need to have some sort of technical background. But what I find a

technical background. But what I find a lot of value in is generating like not a not a documentation site because I as a designer don't want to have to worry about hosting it, maintaining it and all

the nuances associated with it because it's kind of like building another product. I this is focused on the actual

product. I this is focused on the actual design content itself like accessibility considerations uses usage guidelines all the things that we as designers don't like doing and just uploading a chat GPT

doesn't provide proper context. Um, and

again, let the developers write the developer content.

We as designers don't know enough usually in order to provide the sort of specific developer usage guidelines.

Leave that to the devs. Now, this is great if you're working with something like Zero Height, Supernova, or like an internal design system documentation site um, in order to that

I I just copy the content and upload it in there without having to really worry about anything else. Still, it's

important to audit and go through it, but this saves a ton of time. So, I want to go through the process of actually doing that. Now, real quick, this is

doing that. Now, real quick, this is still super valuable if you already have documentation. Go through this process

documentation. Go through this process anyway. Is there are there elements of

anyway. Is there are there elements of your documentation that you're missing?

Is something wrong with your documentation? It's important to still

documentation? It's important to still go through the current docs if you already have it and actually conduct the full audit. All right, so let's jump

full audit. All right, so let's jump back into cursor. So, what we're going to do again, go to rules and you can create a new project rule specific uh to your documentation. Let's just call it,

your documentation. Let's just call it, you know, design system uh documentation. And this is what I

documentation. And this is what I actually do when I'm generating documentation. [snorts] Now, uh let's go

documentation. [snorts] Now, uh let's go through and build this out together. I

got I got a lot of feedback that people do like seeing me actually build out the rule because I can sort of talk through the way that I'm approaching it. So,

let's go through and do that now. So,

just to provide just like a little description here, you know, generate clear lightweight design system documentation from provided components, tokens or or patterns, whatever it is.

Let's go ahead and save that real quick.

And again, I do have notes here just cuz it's easier for me to reference as I do this. So bear with me. Okay. So starting

this. So bear with me. Okay. So starting

off uh the goal is to uh document uh what exists not to redesign uh or expand

on it. Uh only reference

on it. Uh only reference uh provided components or Figma links and not to like reference anything else. Again, it sort of helps

anything else. Again, it sort of helps keep it focused. And again, adding like these small things I found like really really does help. [snorts] Um sorry, I lost my notes here. There we go.

Beautiful. Uh when documenting when documenting uh use plain language uh describe

what the component uh is, where it is used uh and why it exists.

Do not introduce uh new components or rules. Uh if you need to make assumptions, please confirm. A lot of times you're

please confirm. A lot of times you're generating documentation. What it'll do

generating documentation. What it'll do is it'll make assumptions based on your components what this is for when it's used and that's not always right. So in

this like in the rule when it's generating design system documentation is if you do it does need to make assumptions. What it does, it asks you

assumptions. What it does, it asks you about those assumptions instead of having to like you having to dialogue with it be like, "Hey, you made this assumption that's not actually right."

Then providing an additional context.

Just helps keep it focused. Um, and then do not overexlain theory. Uh, consider

accessibility uh and usage uh guidelines. Um,

yeah, you can really customize this to make it your own. And then for each item uh document document uh name. So kind of similar

just kind of re redoing purpose when to use uh when not to use use why it exists.

Um I think that's fine. So let's just take this really quick and just run it through chat GBT and just like update the rule. So GBT just like cleaned up

the rule. So GBT just like cleaned up the wording a So let's now go back into our rules and commands and we're going to build like a reusable command just call it uh generate uh documentation.

Um and very similar to what we did the last one. Let's build our command here

last one. Let's build our command here and sort of talk through the thinking behind the prompt. All right. So

beautiful. So let's get started. So

description uh is generate simple design system documentation. And sorry if I'm

system documentation. And sorry if I'm making any spelling mistakes here. Uh

for the provided Figma, let's just say element, you know, could be component, it can be whatever you want. And the

beauty of this too everyone is depending on how complex you want it to be. You

can tweak the rule, you can tweak the command. I'm just leaving this up to

command. I'm just leaving this up to you. I'm just leading you to water. You

you. I'm just leading you to water. You

can do the rest. All right. Uh so then uh steps steps. There we go. Uh identify

steps. There we go. Uh identify

what is being documented.

documented. Is it you know uh components components uh variant a module

module is it a page whatever it is. Um two uh review it as a whole. Uh starting off uh what

problem does it solve solve? Uh where does uh it appear in a

solve? Uh where does uh it appear in a product?

What makes it different? Sorry, there's something on

different? Sorry, there's something on my screen. Uh different from uh similar

my screen. Uh different from uh similar items. Now, this one's kind of important because you could have a transparent button and also a link. Those look

pretty similar cuz they like they basically almost usually look the same, but they actually have a different purpose. A like a transparent button is

purpose. A like a transparent button is used in a different use case than a link. It's those kinds of things that's

link. It's those kinds of things that's important to call out here. Uh three, uh oops, not three, write documentation uh

using this format. Um,

one name or sorry maybe not the one just name uh purpose uh when to use

uh when not to use accessibility guidelines.

Accessibility guidelines uh name, purpose, when to use, when not to use accessibility guidelines. just go

accessibility guidelines. just go properties properties um accessibility guidelines notes or like anything else notes or capture all

uh just in case there's anything else that doesn't fit into that. And then uh four uh keep it short uh clarity over

completeness.

uh avoid internal uh jargon or let's put and avoid internal jargon uh less provided. All right, beautiful. So

less provided. All right, beautiful. So

then let's go uh with the specific output here. So in terms of the outputs

output here. So in terms of the outputs output, we're going to have it generate uh generate markdown

file uh one section per item and then no opinions. No opinions, no assumptions,

opinions. No opinions, no assumptions, no new system rules. Beautiful. So, I

think I kind of covered everything there. Again, apologies if there are any

there. Again, apologies if there are any mistakes. So, again, let's just run this

mistakes. So, again, let's just run this through GPT and then come back. So, in

the design system that's part of our academy, again, there's all these like tons of different button options for you, but I just simplified it just to again because this is a lot of like variants. You don't want to have to go

variants. You don't want to have to go through and build documentation for all these variants at a time. That is a heck of a lot of effort for AI to do. is

probably going to end up with some mistakes if you do do try to do that.

It's best to try to simplify it. Select

specific variants, select specific components. In this case, what I did is

components. In this case, what I did is I just basically took one set. Uh, and

what we're going to do here is just like uh copy the link to this selection and then just run it via AI and then call the command and see what it comes back with. So, chatbt just uh improved our

with. So, chatbt just uh improved our documentation. So, let's go ahead and um

documentation. So, let's go ahead and um call that command now. So we can go at uh generate documentation and then just paste in that Figma link. Uh Figma MCP

or cursor via MCP is going to do its thing. And then let's go ahead and see

thing. And then let's go ahead and see what it comes back with. Now you can see the documentation that it came back with. Now it's a little bit light in

with. Now it's a little bit light in terms of content, but it gives me enough to work with. And this is where you can dialogue with the AI, adjust the command, adjust the rule in order to get the level of content that you're looking

for and based on the structure.

>> [snorts] >> Now this as it stands is not what you would hand off to a developer. Ideally

you do have some type of design system documentation site where you can actually copy this and upload it to along with in like images uh use cases and everything else associated with it.

But what this is just helping to understand the component and build documentation on the component on the variants when it's used like if you look here the variants the different types of variants the use cases for when these

are used the states the behavior that happens in those states the different props associated with it. So there's a lot of good content that you can take to help structure that documentation site

and build documentation for your design system 50 times easier and get it closer to perfect the first time around. So,

for today, I'm going to stop there because those are really the only two ways consistently that I'm using AI with my design system. I don't want to cover all these different use cases and tell

you to use them if I'm not actually using them myself. So, those right there are the actual methods that I bake into my workflow every day building design systems. It's what I do for a living.

Um, so more to come in this series as more work is done in the space, new tools are are released, more features to Figma are released that I do find are of value. But I'm going to stop there for

value. But I'm going to stop there for now. We do have a lot more videos on

now. We do have a lot more videos on vibe coding design systems. I'm going to put some links down below that you should check out and see you at the next part of the series or just the next video, whatever that is. Uh, probably

next week. All right. Thanks. If you

want to build an entire design system, click right there. If you want to watch another video, I highly recommend, click right there. Thanks for watching.

right there. Thanks for watching.