Claude Code for Designers: All the Ways to Use It

Designers are sleeping on clawed code because you can use it for more than just AI design. Today we'll look at how routines can keep component specs and developer handoff docs updated after skills generate the first draft. Then

we'll cover design audits, accessibility checks, type style generation, AI variable questions, and more. Before we

begin, if you're a big fan of myself and what we're doing here at UI Collective, I'll put a link in the video description to our website where you can come support UI Collective Academy. You get

access to a bunch of great courses on AI workflows and a whole lot more. Always

adding more to this as well. also get

access to some micro lessons, some great perks like our uh design system, private slack channel, access to me and the team and a whole lot more. Or it's totally free to join the community side of things. You can come ask any question

things. You can come ask any question for free on our forum. Also get access to some savings and resources too. So

you join the community, support the academy. Thanks for being here. Let's

academy. Thanks for being here. Let's

rock and roll. Also come follow me on X getting up there in terms of followers.

I cross the thousand mark. I'll put a link to this in the description as well.

AI design is here to stay. And I get a lot of comments around this. Why are you teaching these things? You're going to help AI replace us. Either learn or you

get left behind. We're not going to be able to remove AI from our process. It's

only going to get better. So, you might as well learn now. And I've covered a lot in the past around hey how AI tools work and how to make the most of them

usually from like a design sense whether it's using mob and MCP uh different ways to spin up designs and preserve tokens.

Again I'll leave some links to other videos down below but today we're going to look at how I'm using AI in a non-designing design way. other ways I'm using AI in

design way. other ways I'm using AI in my workflow for very targeted approach to using my tokens and using my time.

All right. Now, I get a feed a lot of feedback like this. AI design takes too long. AI design is too expensive. So,

long. AI design is too expensive. So,

what I see is designers just ignoring it. And that's the wrong approach to

it. And that's the wrong approach to take because yes, it is expensive and it does take a lot of time if you're using it every day. Like if you were in Figma

every day using it to build out new iterations of designs, tweak old ones, trying to do that with AI, yes, will take a lot of time and is very expensive. So, but there are other

expensive. So, but there are other targeted ways we can use AI that are always worth the time and the token investment. Let's take a look at these.

investment. Let's take a look at these.

Workflow we're going to go over to start is relevant whether or not you're working with design systems. If you're working with design systems, use it with components. If you're working on card

components. If you're working on card designs, use it for card designs. If

you're working on larger dashboards, use it on the pages. You just might need to tweak what it is that actually goes into it. But it's relevant whether or not

it. But it's relevant whether or not you're working on design systems or not.

We're going to be using the button component as an example because it's the easiest to get the point across. But I

want to call that out right away. And

for this example, we just going to work with a sample button component. I

removed a lot of the other variants.

Again, this is just from the design system. That's part of our academy. But

system. That's part of our academy. But

like even if you don't have the same variants and the same properties and stuff, it's still going to work for you too. But just as an intro, so we have

too. But just as an intro, so we have this button component with default subtle outline transparent uh and default hover focus disabled. Uh we have a text property for the label and then a

layer property and instance swaps for both of the icons. This is a really really simple button component. Now what

are two things that we need here? So let

me just add uh a quick frame. So two

things that we need for really any design or really any component we need are components or design specs. So this is for us

designers on how to use the specific component, how to use the design. Maybe

it's a card, maybe it's a modal when maybe it's a specific layout of a design. Something I've seen pretty

design. Something I've seen pretty common working with clients. And we also need handoff notes for our developers.

So we don't just need one, we generally need both. And what generally happens

need both. And what generally happens that design or that component is built, the documentation is generated once on first build and then it's left untouched for eternity. Then 6 months go by and

for eternity. Then 6 months go by and the design changes, the component changes and the documentation that is in Figma or the developers have for how it

works does not equal the design. What do

you have then? you have a whole bunch of technical debt. And this here happens

technical debt. And this here happens for one reason, one reason only is that we don't like updating these kinds of things. We want to design, not write. We

things. We want to design, not write. We

generated first off to check a box that our boss is happy, but we never touched it again because it's not what we want to do. So, we're going to look at a

to do. So, we're going to look at a workflow in order not only to generate these things, but also a workflow that we can use or where there is an up when there is an update made on the component

on the design. We can run a routine in order to update that on our behalf. And

real quick, just to preface with anything that's developer specific, have a convo with your developers. They might

want certain things a certain way. I'm

going to show you the process, but the finer details, it's a convo you need to have with your developers for anything developer related. And for this as well,

developer related. And for this as well, we're going to be using a skill to generate that initial documentation, but a routine to update that documentation.

I've covered skills in the past.

Routines I haven't yet covered. Let's

take a look. For this, we're using Claude Opus 4.7 because these are things that we're only going to be doing once every so often. I want to use it to make sure it's done right the first time

because it's most capable for more larger thinking like generating documentation, seeing what it is was maybe changed on a component on a design and generating a plan in order to

generate that updated documentation. So

for this we're using Claude Opus 4.7.

Let's get started building the component spec scale and we're going to start off in Claude AI then we're going to flip over to Claude Code. Now, for this, what we're going to do, sorry, I just have notes here that I'm going to reference to so I don't forget anything inside of

the skill. Uh, please always say your

the skill. Uh, please always say your please build me a claude skill for uh components uh slashdesign specs. Again,

what we're going to look at, you can tweak this depending on whether you're building, you know, documentation for a design, a module, a specific component.

There's no like oneizefits-all approach here. So uh here are the details

here. So uh here are the details we need inside.

First off, we need what's it is. Uh one

sentence uh definition, when to use it.

Oops. Specific uh scenarios.

Uh when not to use it, common uh misuse.

misuse cases. Sorry, there's going to be some spelling mistakes here, just like this one right here. There we go. Let's

fix that. When not to use it, variance, uh what each one is for.

Uh states list all interactive uh stakes.

uh anatomy names for each part of the component uh properties

uh properties inside of Figma uh available uh let's go with usage rules do and don't

kind of similar to when to use it when not to use it but just sort of a capture all uh accessibility notes, things like uh keyboard

uh screen reader uh behavior. Some of

this can also go in like the dev part, especially those accessibility notes, but we're also going to include here too. Uh and then related uh atom

too. Uh and then related uh atom components uh if applicable. Like a button is not going to have an atom component. I guess

you could call an icon an atom component, but this is more for things like menus and all that stuff. So,

please build me a cloud skill for component design specs. Here are the details we need inside. What it is, one sentence definition, when to use it, specific scenarios, spelled scenarios wrong. There we go. When not to use it,

wrong. There we go. When not to use it, common misuse cases, variance, what each one is for, states, list of interactive states, anatomy, names for each part of the component, properties, properties inside of Figma available, usage rules,

dos and don'ts, accessibility notes, keyboard screener behavior and related adds if applicable. Again, with

Opus 4.7, let's run this here is what it came back with. Now, one thing I want to call out here is if we look here on on the left hand side, one of the reasons why I like using Opus 4.7 is it's really

good about thinking and thinking about how we can maintain the quality of results in the future compared against other models. So, not only did it write

other models. So, not only did it write the skill.md, which we have here, with

the skill.md, which we have here, with the 10 sections specified, but it also added a fill-in template here on the right with all of these sort of variables that AI can fill in in order

to keep that result consistent and include two worked examples. So, Claude

knows the quality bar when filling outs.

Now, this type of quality bar type thing. So, that's two examples for

thing. So, that's two examples for button and also input field. This is the kind of thing that would replace us having a dialogue with AI back and forth

for forever that Claude Opus 4.7 gave us right out of the box. So, it's not only thinking about what's going to help us generate the documentation, but what's

going to help keep it consistent in the future and keep the quality good in the future as well. Let's go ahead and save

this skill inside here of claude code is we're going to navigate here to routines because the skill is going to help us generate that initial documentation but

the routine is going to help us update that documentation as things change. So

this is where you can find routines.

where I choose to create just a new routine with a lot of these things any whenever there's any kind of updating something with automation is you don't want it to update every time something

changes because design is an iterative process and what if you're just doing that iteration you don't want all of the sudden a routine catching things and a

routine automation anywhere this just a good rule of thumb is if you're just doing iteration you don't want to have any AI picking up all of these small adjustments ments and generate documentation. You move something to

documentation. You move something to grab again, it generates new documentation. It's just a complete

documentation. It's just a complete waste. With some of these things, the

waste. With some of these things, the call should always be manual. For this,

we're just going to create a new local routine. Let's just call it uh component

routine. Let's just call it uh component spec or maybe just design spec. We'll

keep it a little bit more broad. Uh

description uh for generating uh updated uh design spec documentation

inside of Figma. Uh we're also going to set this to manual. As I said, there's the option here to do things that like hourly, daily, you know, on weekdays or weekends. It's important to note that

weekends. It's important to note that these local routines, they have to be running while the computer is awake if you do if you do schedule it. Um but as I just said, because every time you make a change, we don't want something new to

update. We're always going to set it to

update. We're always going to set it to manual for all these automations. Um but

now let's go ahead and let's enter in the instructions. I entered in some

the instructions. I entered in some instructions here. And again, for the

instructions here. And again, for the purpose of this example, it's just going to be for components. You can tweak this for anything else. All right. So once I give you the component name, do the following. So step one, use the Figma

following. So step one, use the Figma MCP, find and read that component and all its variants and properties in. What

we're doing here is we're specifying a link to that specific Figma file. It's

important to provide a link to that Figma file because especially if we've been using AI to dialogue with other Figma files, it's going to get confused.

Um, so I always provide a specific link to the Figma file. If it's all on one page, you can also give the link to the page as well. Whatever doesn't really matter. Using the Figma MCP, find the

matter. Using the Figma MCP, find the documentation frame for that component.

Again, inside of that file, not for a specific page, but inside of that file, identify what has changed. New variants,

updated properties, remove states, rename tokens, new design, updated layout, draft an updated doc entry in the exact same format as the existing

documentation frame. What this is going

documentation frame. What this is going to do is it's going to give us one what changed and then ideally draft an updated doc entry so that we can review

it. Now it's important that you don't

it. Now it's important that you don't just draft an updated doc entry um because we want AI first to identify what has actually changed and that's the

beauty of Opus 4.7 is generally pretty good at that. Uh do not edit anything in Figma. Output the draft from my review

Figma. Output the draft from my review only. We will then update Figma uh after

only. We will then update Figma uh after uh my approval. All right, so something as simple as that. Let's go ahead and create this. Before we test out that

create this. Before we test out that workflow, I'm going to install Figma skills and Figma MCP quick. Just in case you're new and you've never done it before, if you've already have this installed, if you watched all my other tutorials, skip the next 30 seconds and

then proceed forward right to where we test and do all that fun stuff. Now,

here I am on Figma Skills site. I'm

going to link this down below if you don't have it. Now, there's some skills that we need to use. And what skills help us do is it helps AI interact with the Figma canvas. That's really it. All

right. So, first off, we're going to need to download the Stigma U skill. So,

I'm going to come in here. We're just

going to open up to GitHub. We're going

to hit MCB server guide and then just go ahead and download that zip directly.

Let's go back. There's one other skill that I'm going to want uh to install as well, which is this audit design system skill. Uh, so what we're going to do

skill. Uh, so what we're going to do here, we're just going to simply download that individual skill.md file.

There we go. And we're also going to use this apply design system skill as well.

Uh, or install this one. It's always

good to have. So, let's go ahead and let's also download that. Let's flip

back to Claude. Back inside Claude, then under customize, uh, cloud code, sorry.

Under customize, we're going to choose to, uh, add a plugin. We're just going to upload a plugin. And in that first zip file that we had downloaded, we're simply just going to drag it in. Just

like that. Let's go ahead and upload uh that. So now we can see that everything

that. So now we can see that everything is good here. But under connectors, you're going to see that we still need to connect Figma. So what we need to do is just choose to connect Figma. What

that's going to do is it's going to open up uh Figma inside of the browser. And I

realize need to log into Figma in my browser for us to connect uh Figma to Claud. This here is the Figma MCP. I'll

Claud. This here is the Figma MCP. I'll

pause the video while I log into my Figma account. And I'll meet you back

Figma account. And I'll meet you back here. You can see we're now connected.

here. You can see we're now connected.

Um, so let's just navigate up to skills and ignore all these other skills here.

These first couple are just from like a past video and the other ones are for from our academy. Uh, so what we're going to do is we're going to upload a skill now. And the skills that we're

skill now. And the skills that we're going to upload are just the individual skill.mmd files that we that we had

skill.mmd files that we that we had downloaded. So particularly that audit

downloaded. So particularly that audit design system skill uh and then also uh this other skill that we had downloaded as well which I use a little bit generally less frequently but it's always good to have. Okay, perfect. So

we have the skills installed. We have uh the Figma plugin installed. We're also

connected to uh the MCP. Now we're ready to test out that workflow. One quick

thing under the plug-in directory, if you just go browse plugins and you just search Figma. I did not have this for

search Figma. I did not have this for the longest time, which is why I was still manually installing some of those things. You're going to see that you do

things. You're going to see that you do have the Figma plugin with a lot of those skills already installed, but you still would need to connect uh Figma MCP

and any of the skills that were not in that Figma use skill, you would also still need to upload individually. Um,

so like the audit design system skill as an example, but now I have this and I didn't have it for the longest time. So,

woohoo. What I'm going to do now inside that design system that we referenced earlier, I'm going to copy a link to this uh frame inside of a cloud code

session again with Opus 4.7. I'm just

running on high. You can run on extra high if you want to. Doesn't matter.

[snorts] Is I'm going to paste in a link to that Figma frame. And then please generate me component uh spec documentation.

uh we are going or sorry uh build it locally here first build it locally here first uh before we push uh to Figma. So let's

go ahead and run that. Now what we have is this where we have what it is when to use it when not to use it to variance the states anatomy properties usage rules so on and so forth. I think it

looks pretty good. What I want to do now is let's uh push uh to Figma and it's going to put this documentation frame next to the component. So let's run

that. What we got then inside of Figma

that. What we got then inside of Figma is this this component spec sheet. Looks

pretty good. You know, it's basically everything that we looked at before.

What I want to do now is I want to signify breaking this component. Not necessarily

this component. Not necessarily breaking, but changing things. Maybe

removing a variant, changing the colors, changing the radius to almost simulate us already having existing documentation, then making changes to that button. Let's make some tweaks

that button. Let's make some tweaks here. Let's get rid of the transparent

here. Let's get rid of the transparent version. Let's select all of these and

version. Let's select all of these and let's change the radius uh to none. Uh

just on this first set here, let's set the stroke to two pixels instead of one.

Again, just on uh these default uh variants. So our default default subtle

variants. So our default default subtle default outline defaults uh and also too don't forget the focus here. Uh select

the focus. Let's also change the radius here as well uh to zero. There we go.

And then maybe on these let's just add a strange one. So let's go with a border.

strange one. So let's go with a border.

Actually you know what? Never mind.

Let's just leave that as is for now. All

right. So enough changes to sort of warrant maybe some changes in that documentation. So we removed a variant

documentation. So we removed a variant set. We adjusted the radius. We added a

set. We adjusted the radius. We added a border to just one of the one of the sets. Um, so now what we're going to do,

sets. Um, so now what we're going to do, let's run that routine that we set earlier. Now inside of a new claude code

earlier. Now inside of a new claude code session, then again using Opus 4.7, uh, let's run this prompt uh, run the design

uh, spec uh, routine uh, for the button sample components. Um

do not use uh any component specific component or design system specific flawed skills. Uh the reason why I'm

flawed skills. Uh the reason why I'm doing this is sometimes whenever you call routines manually, it still even just picks up skills and it kind of messes things up and especially if your

skills and your routines are closely named. We probably could have named ours

named. We probably could have named ours a little bit differently just so it wouldn't get confused. Just something

that you should be aware of and doesn't usually happen, but it does happen sometimes. Just something that I've

sometimes. Just something that I've noticed. So, let's go ahead and run this

noticed. So, let's go ahead and run this then. Notice what it came back with

then. Notice what it came back with where it recognized we now only have three types. Uh the states grid is wrong

three types. Uh the states grid is wrong because again, we only have three types.

We only have 12 variants. Now, we it caught that we used the two pixel border. It caught the properties type.

border. It caught the properties type.

And there's some other things that it caught as well that are more irrelevant that I think it just missed in the first pass, but that's okay. Tokens observed

uh drafted replacing copy.

Perfect. So, it caught sort of what changed. Now, what we can do update the

changed. Now, what we can do update the documentation layer inside of Figma next to the

components based on your findings. Based

on your findings. There we go. Let's run

this now. And now you can see that this has been updated for just the three variants. And it looks like you can see

variants. And it looks like you can see adjusted adjusted the components and other things as well. So now instead of having to manually change that just by running that cloud routine with Opus

4.7, it did it for us. I want to do the same for developer handoff docs then.

And again I'm going to show you the formula as to how the data might differ and what that routine might look like.

Again, very similar, but again, we're going to go through it. Another thing

I'd like to call out is I do know that oftent times Figma isn't your central source of truth for these things.

Whether it's Supernova, Zero Height, Figma is going to probably going to come out with a solution of their own in the future. But I was showing you to how to

future. But I was showing you to how to use this as a starting point where you can take that content, take that information and update it elsewhere.

Let's dive in. Back inside Claude, then again using Opus 4.7. Let's run this prompt. I typed it out so you didn't

prompt. I typed it out so you didn't need to watch me type it. Please build

me a Claude skill for developer handoff specs. The emphasis here is for

specs. The emphasis here is for developers to make sense of the component and its parts and not for designers and its usability. Now this

again we're focusing on components just for this example. You can do it for full pages if you want to cards modules like a graph module. You can tweak this to fit your own needs and do whatever you want. As I mentioned have convers with

want. As I mentioned have convers with your developers around what they want in here. And this is just sort of like a

here. And this is just sort of like a starting template but it's not a one-sizefits-all. So parts what the

one-sizefits-all. So parts what the component is made of sizing width height padding gap radius token states behavior accessibility responsive rules edge cases like long text missing content overflows empty states composition and

atom components which smaller components it uses and what they're for. Now one

thing I'd like to call out is if for those academy members like you might have like there's other ways in which you can generate things like empty states edge cases that are a little bit more in depth where you do leverage multiple tools and a little more of a

specific workflow in order to generate that. This is a good starting point for

that. This is a good starting point for those getting started here. All right,

so let's go ahead and run this. And then

this is what it came back with. So very

similar to what we have before. So we

had our skill, we sort of have the template file that it's going to introduce. And then we have some

introduce. And then we have some examples. But what I want to do is I

examples. But what I want to do is I want to test this out on a more complex component because dev handoff docs for things like a button. It's relatively

straightforward because not really atom components. But what if this is like a

components. But what if this is like a menu component where those menu list item components have like a checkbox or radio button and those all go into like a menu list item component. That list

item component goes into a menu component where it can get more complex where developers need to know some of the details. I want to test that out on

the details. I want to test that out on something like that. And this here is an example of what I mean where we have our you have like all these different list item components and variants which are

combined to go into one larger component. So all of these combined to

component. So all of these combined to go into one. If I was to click into these, you see how it can swap all the different variants for this individual row alone. That's kind of what I'm

row alone. That's kind of what I'm getting at here. And you can see here is we're also using a checkbox component where you have like a radio box component. We have all these different

component. We have all these different atom components that can go into these larger components. So this is what I'm

larger components. So this is what I'm trying to get across here. So one thing as well that so what we're going to do here is we're going to generate the handoff docs for this here inside of a new cloud code session. Then again

running opus 4.7. Let's enter a link to just that Figma component and just uh please build the uh developer handoff

docs for this component uh for this components for the component above for the component linked uh above

uh build locally and HTML before we push to Figma. Uh

let's run that. While that's generating, what I'm going to do here is going to create a new routine. Similar process we went through before. Developer handoff

update developer handoff uh documents.

And the instructions are relatively the same as what we did before. The only

reason why I duplicated it is because I just want to put an emphasis on identify any developer related changes including all of these. Draft an updated developer handoff doc. Again, we don't want it to

handoff doc. Again, we don't want it to confuse the two documents. And then

focus on implement details.

implementation details. Developers need

to build or maintain the component accurately. So just the wording is a

accurately. So just the wording is a little more developer focused so it doesn't confuse the two documents.

That's the only reason why I duplicated it though. Everything else really just

it though. Everything else really just stays exactly the same. Let's go ahead and create this. This is what we have now. Notice how some of the components

now. Notice how some of the components appear a little off here like some of the styling. That's okay. Usually when

the styling. That's okay. Usually when

we push this to Figma fixes itself, but if not that's fine. Is [clears throat] notice how this is way different than what we as designers consume. So we have all our sizing values. We have the menu

container. We have the scroll bar. We

container. We have the scroll bar. We

have all the tokens uh that are used. We have the different states. Uh we have the specific

states. Uh we have the specific behavior. We have accessibility. This is

behavior. We have accessibility. This is

going a little bit more in depth around what developers are actually interested in edge cases. Uh components and atom components. So this is a little bit more

components. So this is a little bit more in depth than what us designers would consume because it's more developer specific. Again, have the cond with your

specific. Again, have the cond with your developers around what you want in here.

This is just an example. What we're

going to do now, we are going to push to Figma next to the components and let's rock. You can see this is now inside

rock. You can see this is now inside Figma. Again, there's some things we'd

Figma. Again, there's some things we'd have to go through and edit confirm, but you again you can, as I mentioned, you can see how much different this is and compared to what the designers had. Now,

let's make some changes to our menu component. So, again, just to test it

component. So, again, just to test it out, test out the workflow. Let's just

get rid of uh this entire grouping here.

And let's just shift this up. And let's

maybe get rid of also the radio button groupings here too. And let's just move this off to the side. And

one other thing we might also want to do if we think about it is let's just remove that stroke entirely, that border stroke from all of the items. Now let's run the routine. And very similar as we did before, run the developer handoff

routine for the menu sample component.

Did not use any component or design system specific claude skills. The

component that I edited, it wasn't the main menu component. I duplicated that and just called it menu samples. That's

just why they're sample in the name of the component. Um, but anyways, let's

the component. Um, but anyways, let's run. And as we did before, now we got a

run. And as we did before, now we got a summary. It was like what the changes

summary. It was like what the changes were versus what's in the existing doc.

And there's a whole lot here. I'm not

going to go through it with you, but uh let's have it update uh the documentation and let's rock and roll documentation inside of Figma always specified. And let's run. And this is a

specified. And let's run. And this is a long handoff document, so I'm not going to go through it, but I can assure you those changes were made. I want to talk about the auditing of designs now. And

right out of the gates, using AI to audit designs for UX and UI issues is not the best approach. The reason being is AI does not have the context to your project. Doesn't have the context of

project. Doesn't have the context of what it is that you're working on right now. And it just creates this endless

now. And it just creates this endless cycle of feedback, revisions, feedback, second-guessing yourself. It's just not

second-guessing yourself. It's just not the best thing that you're going to want to do. Ask your team members for

to do. Ask your team members for feedback who have an idea as to what it is that you're working on. Way better

approach. Ask a design community like UI collective the best approach in my own personal opinion. Um but what I see a

personal opinion. Um but what I see a lot of is this. I need feedback on my UI and my UX. Claw is going to provide

suggestions. You're going to implement

suggestions. You're going to implement those suggestions. Then you're going to

those suggestions. Then you're going to realize it's wrong or someone else may tell you it's wrong or is doesn't fully make sense. Then you ask for more

make sense. Then you ask for more feedback. Cloud's going to provide more

feedback. Cloud's going to provide more suggestions. Then it's just a never-

suggestions. Then it's just a never- ending cycle. So when it comes to

ending cycle. So when it comes to auditing designs and asking for like UI feedback, UX feedback, use your team members, you know, use a design

community like UI collective. Um asking

AI not the best approach. So where

audits generally come into play then is auditing for consistency. Winner winner

chicken dinner. This is where I find a ton of value in working with Claude Claude Code to audit my designs for consistency. Not just my designs, my

consistency. Not just my designs, my clients designs. And this is far easier

clients designs. And this is far easier than you think. On the topic of auditing, I've gotten other questions as well, more than once. So, I'm going to

cover them here. One of which is auditing for your progress.

And it's a question I've got a lot is, can AI audit my designs for progress and provide updates?

Yes, it can. But why would you set it up like this? It's just going to cause too

like this? It's just going to cause too much hassle. You're going to have to

much hassle. You're going to have to read through the update, uh, make tweaks to it. It's not going to be perfect.

to it. It's not going to be perfect.

What if it misses something? What if you did something in another file that week that AI doesn't have access to? it can

do it but this is one of those ones where just write it on on its own you know take 10 minutes write out what actually got done and provide that update the other one I want to uh

discuss is can AI check if a design was changed that's like the auditing for accidental changes lock your Figma files lock your layers you know is if you're working on a

design team any designer should know not to unlock a design that's one locked in terms of of it layers and two marked for dev.

It's pretty standard stuff. So, sure, it can also check if a design was changed, but just lock your layers. Okay, so um those are two common questions that I've

gotten around like can AI audit for progress? Can AI audit for accidental

progress? Can AI audit for accidental changes? It can do those things, but

changes? It can do those things, but it's just not worth it to set it up. I

really don't see the value. That's just

my own personal opinion. Uh but I just don't see the value in doing those two things. Where I find a lot of value is

things. Where I find a lot of value is auditing for consistency. And we're

going to look at that. And this is far easier than you you think because it's part of those Figma skills that we had installed earlier. Remember that the

installed earlier. Remember that the start of the video? Woo. Um there is that audit design system skill where what it can do is essentially

check which variables not applied, which components are not applied, where things are broken. So all we have to do is

are broken. So all we have to do is provide a link to a Figma page and ask it to ask Claude Code to audit the design and then we're good. Let's take a

look in the documentation spec that we generated earlier. This is a great

generated earlier. This is a great sample design to test this in. So I'm

just going to copy a link to this and let's flip over to cloud code inside of a new Cloud Code session. Then again

we're using Opus 4.7. Uh what we're going to do audit uh this uh Figma frame and then paste in a link. Let's run.

This is what it came back with. You can

see it used that skill audit design system. The same one that we had

system. The same one that we had uploaded earlier on that we had downloaded from the Figma community skills site. Then what we have design

skills site. Then what we have design system audit button component spec. So

the Figma frame the file all this stuff.

So right away the verdict it needs work confidence in around 85%. Summary the

button itself is properly component sized. every button sample and variant

sized. every button sample and variant states anatomy uh is an instance bound to this. Uh the problem is the

to this. Uh the problem is the documentation chrome around it do don't cards numbered step badges token chips all this stuff built as raw frames with hard-coded hex values. So it's able to

catch up what was an instance and what was just not attached to anything at all. And then we have our findings. So

all. And then we have our findings. So

we have the number it's priority in the specific finding and then it goes in depth on each of those findings below.

So do don't cards or duplicated raw frames nothing's connected number of step badges and anatom anatomy are handbuilt so we didn't use the badge components

all of this great stuff. And then right away at the bottom recommendations too this here is the kind of work the kind of output that a senior or design lead

would give you. to a senior designer or design lead. This is awesome. This is

design lead. This is awesome. This is

something too, this kind of audit. You

can imagine if you had a bunch of frames side by side, how long it would take you to go through, check everything, check all the variables, check all the instances,

check auto layouts. Now, it's just a matter of installing that audit design system skill, going into a new claw code session, telling it to audit the design.

is going to call that skill automatically and as long as you provided the Figma file, it's just going to do the rest. This is like a 5hour long depending on, you know, how many

pages you're auditing. This is a 5 hour workflow condensed into 10 minutes if that. Let's take a look at

that. Let's take a look at accessibility. Now, when I'm talking

accessibility. Now, when I'm talking about accessibility, I'm more focused on like wicked color contrast and things like that. Accessibility can get into a

like that. Accessibility can get into a whole wide range uh of topics. I have

some stuff for that on our academy for members. But accessibility is a complex

members. But accessibility is a complex one. So it's not one where there's sort

one. So it's not one where there's sort of a one-sizefits-all approach to absolutely everything. There's a lot

absolutely everything. There's a lot that we need to take into consideration.

But uh Anthropic actually has a design plugin with an accessibility skill right out of the box. Let's take a look at that. Back inside customize part of

that. Back inside customize part of Claude Code under personal plugins.

Let's browse plugins and then select this install this design plugin. So, um,

let me close that. And one thing I'd want to talk through here really quickly is inside of this, there's a bunch of different skills here. And I talk I want to talk

skills here. And I talk I want to talk through why I only like the accessibility review skill here.

Things like generating developer handoff specs.

Companies are going to want specific control around what goes into those documents, what goes into those specs.

Remember earlier on how I was talking about have the convo with your developers. So I don't find the out

developers. So I don't find the out ofthe-box one is valuable. Getting

structured feedback on usability, hierarchy consistency.

Again, it doesn't because Claude doesn't know your brand. You just still and you end up spinning. It's just my own personal opinion. uh even things like uh

personal opinion. uh even things like uh research synthesis on the academy. I go through like the my actual process on how I you know

generate results what I look for in that usability synthesis. So I have my own

usability synthesis. So I have my own way of doing some of these things and you should too. You shouldn't

necessarily rely on AI to do everything because you're not going to know the steps that go that go into it. These are

great starting skills, but in order to take your design to the next level is you need some more custom skills. You need to know the why behind

skills. You need to know the why behind the skills. Not just installing a skill

the skills. Not just installing a skill and hoping that it does everything for you. That's what's going to separate out

you. That's what's going to separate out the good designers from the great designers. But this accessibility

designers. But this accessibility review, I have found really good results from using it. So let's take a look back inside a cloud code session then uh check for uh accessibility and again

just a link to the exact same frame like that uh button component spec frame that we generated earlier and let's run it went through and did an audit for the accessibility. It came back with this

accessibility. It came back with this report. So we have our color contrast

report. So we have our color contrast check. Looks like everything's good. Um

check. Looks like everything's good. Um

but we do have some issues. Now one

thing I want to call out here is it does throw false positives. like it will say, "Oh, if this is paired on a dark background, it won't work like what's here." But we wouldn't pair it up

here." But we wouldn't pair it up against a dark background. So, just

because it's flagging things here for you, doesn't necessarily mean that you're wrong. Another example is Preston

you're wrong. Another example is Preston loading states are not in the components. That's by design. It's just

components. That's by design. It's just

from working with developers and designers and a lot with design systems. Designers don't like to build loading and press states inside of their design systems. They never get used. A lot of times developers like don't even put

those in anyway because we're going to do that on our own on our side and include it in our documentation site. So

that was left out on purpose. So it does give some false positives sometimes. But

in terms of the overall quality of the report and in-depth of the report, this is like senior designer design lead or accessibility expert type level of quality and thoroughess. So, this is one

of those things if you're generating designs, just run a quick accessibility audit. We no longer need to use Figma's

audit. We no longer need to use Figma's Wik 2.1 color contrast tool to check for these things. AI can do it for us. Let's

these things. AI can do it for us. Let's

look at now variables and styles. This

one, there's a lot of specifics and finer things that I want to talk through. So, let's just jump right into

through. So, let's just jump right into uh Claw directly. The biggest pain point whenever I'm starting a new project is building out the type variables and also

the type styles. I can't stand it because again building out the variables is just annoying. Connecting all the variables to styles is just annoying and then you have to do that like build out

the the variables for both desktop, mobile and tablet.

Not fun. Claude code can help us with that. And we're going to look at other

that. And we're going to look at other types of variables too later on, but I want to focus on the type scale for now or what we can do now is we can sort of

define the type scale that we're looking for and have Claude actually do the rest. Now, as I mentioned, this is best

rest. Now, as I mentioned, this is best when you're starting a new project, working with a new client, they don't have an existing brand, something like that. Now, let's just get it up and

that. Now, let's just get it up and running first. make sure we like the

running first. make sure we like the look and feel before we push to fake. Uh

please build me a type scale a type scale uh ran locally before we push uh

to Figma to Figma and build the uh variables and styles. Oh, I really cannot type

and styles. Oh, I really cannot type this morning. Uh and styles uh styles we

this morning. Uh and styles uh styles we need. So we will going to want let's say

need. So we will going to want let's say hero uh H1 H2 H3 H4 H5 and H6 uh

paragraph we'll just add them on here uh paragraph uh large paragraph

medium PG uh small uh font

uh is going to The enter for hero and h tags, robboto for paragraph for paragraph text. Uh, please build me

a type scale ran locally before we push to Figma and build the variables and styles styles. We need hero H1, H2, H3,

styles styles. We need hero H1, H2, H3, H4, H5, H6. Uh, font enter for hero and H tags. Robboto for paragraph text. We

H tags. Robboto for paragraph text. We

also need a mobile variation uh as well.

Please keep all font variables uh or font attributes to a multiple of four. What this does,

it stops cloud code from introducing something that's like a multiple of three. That doesn't necessarily work

three. That doesn't necessarily work with like what it is that we're going for. Um so I think that looks pretty

for. Um so I think that looks pretty good. Oops, an issue here. Paragraph

good. Oops, an issue here. Paragraph

small. Uh please build me a type scale ran locally. Perfect. Let's run this.

ran locally. Perfect. Let's run this.

What it did here is it generated those type scales for us. We have our desktop and we also have our mobile too. Now

this is great if we just want to show a client. If we have different versions of

client. If we have different versions of font, we have different treatments, different styles, we want to get feedback before we implement everything.

Really great for spinning up quick examples or if we're doing it for oursel and we know exactly what we're looking for. We can iterate here without having

for. We can iterate here without having to spend all the time in Figma trying to figure out what it is that we like. So

we have our desktop, we have our mobile.

It looks like everything is a multiple of four, which is good. Um, we can scroll down here. We see our paragraph small, which is 12 pixels. Personally, I

would probably put that to 14. We could

introduce a caption size that's 12, but that's okay. And we have the tokens,

that's okay. And we have the tokens, which are ready for Figma variables.

This looks good. Robboto Robboto. So, we

have some tracking here. Personally, I'm

not a big fan of like like negative 1% tracking and even negative 2% tracking.

The user can't really even tell a difference if I'm honest. Um, so I think this uh looks pretty good. So let's drag this back out. Give ourselves some space. And what I've done here just

space. And what I've done here just offline is I created a new Figma file and we're going to have it uh push these

to Figma. These look good. uh please

to Figma. These look good. uh please

build the uh variables uh first inside of Figma

and then build the type styles.

Ensure the variables are linked inside of the styles. Let's run. All right. So,

I made a mistake in the prompt. Um

sorry, it's 8:15 in the morning here, so I need just need coffee in me, I guess.

[laughter] But as part of this is I didn't define the collections that we're going to use. So one thing I'm going to do is I'm going to link some videos down below where I one build a design system

and two build an advanced variable uh library where I go through these collections a little bit more in depth.

So, we're going to need collection setup setup uh brand uh empty for now, leave empty

for now or sorry, uh font uh weights and font family string variables alias collection.

Uh leave empty for now.

Actually, what we'll do is we'll actually bring in the the font family.

font family uh string variables alias from the brand collection. Again,

if you don't know what what these are, I have some links down below. And then map collection, that's going to be empty for now. And

then responsive collection holds variables for uh font size, line height, paragraph spacing, and it included tracking. So we're going

to include tracking in here too.

Tracking. Uh

and so font size, line height, paragraph spacing, tracking. So, collection setup,

spacing, tracking. So, collection setup, uh, brand, font weight, and font family, string variables, alias collection, font family, string variables, alias from the brand collection. You're going to see

brand collection. You're going to see what I mean when I talk about this.

Mapped collection, empty for now.

Responsive collection holds variables for font size, line height, paragraph spacing, tracking. There we go. Adjusted

spacing, tracking. There we go. Adjusted

prompt. Let's run this. This is here what it produced. So, we have a responsive collection with the font size, line height, paragraph spacing, and tracking uh across desktop and mobile. Amazing. We have our mapped

mobile. Amazing. We have our mapped collection, which we said to leave it empty for now. We have our brand collection with our font family and our font weights, which is good. We have our alias collection with our just our font family. Again, what this is going to

family. Again, what this is going to allow us to do is add in a second mode for brand. So, brand A, brand B. Um, and

for brand. So, brand A, brand B. Um, and

then also here we have our heroes.

So, it looks like the variables for the most part uh are applied. Looking really

good. Now, this here is one of the most tedious tasks of building a design system, getting your variables set up.

And this just took like nine or 10 minutes at most. Like it didn't even take a whole long time to generate. So

if you're looking for ways to leverage clawed code beyond just designing your type styles, you're guess just getting started with a new client, a new project, it's a really great place to start. I want to talk about the rest of

start. I want to talk about the rest of your variables. Now, it's a question I

your variables. Now, it's a question I usually get because claude code can generate you your variables,

but do you want clawed code to generate your variables? Let's take a look. Now,

your variables? Let's take a look. Now,

please build the rest of the variable library. So, we have some details here.

library. So, we have some details here.

brand raw color hex codes, raw color scales uh with just pure hex codes.

Alias where we define the colors from brand into primary, secondary,

error success uh etc mapped. Uh

these are the variables applied to components.

Uh here are the groupings for surface text icon and border variables. We could

beef this up a little bit, but what I'm trying to do is I'm trying to show you what it can do and then get kind of my point across here. So now please build the rest of the variable library. Brand

raw color scales with just pure hex codes. Alias where we define the colors

codes. Alias where we define the colors from branded to primary, secondary, error, success. Mapped. These are the

error, success. Mapped. These are the variables we apply to components. Here

are the groupings for surface text inside of mapped are the groupings for surface text, icon, border variables.

Let's run it. Came back and gave us this variable library. Let's take a look at

variable library. Let's take a look at it. So we have our brand collection with

it. So we have our brand collection with all our hex codes just grouped in their purest form. So which is nice. So it

purest form. So which is nice. So it

looks like we're using the 100 scale, too. So blue, indigo, green, so on and

too. So blue, indigo, green, so on and so forth.

Let's go into our alias. And our alias is essentially, and one thing I did offline, I messed up recording before where I had sort of originally just had this where it was just like a default

mode. Um, but inside your alias is where

mode. Um, but inside your alias is where you can add additional brands. So maybe

this here is brand A and then this is brand B.

And it grouped all of those um groupings from our brand collection into primary, secondary neutral success warning error, so on and so forth. Looks pretty

good and everything is connected back to the brand collection.

Then in our mapped collection, so we have groups for surface, text, icon, border, which is good.

Let's go through some of these now. So

within our surface grouping, we have subtle, muted, strong, and default.

Do you know when a subtle should be applied versus a muted?

Say you were building a design system.

you were building a set of components.

Maybe you're not even building components, but you're just building designs and Claude gave you this library. Do you know when to use subtle

library. Do you know when to use subtle vers muted?

No.

Do you know when to use success versus success subtle? Maybe. The point I'm

success subtle? Maybe. The point I'm trying to get across here is just because clawed code can generate you a variable library does not mean that it's right. It's missing fundamental gaps in

right. It's missing fundamental gaps in your brand, how [clears throat] things should be structured, your naming conventions.

And even if you're just getting started from scratch, you don't know what you don't know.

Now, I get a lot of emails around like, oh, um, AI generate me generated me this variable library. Can you tell me what's

variable library. Can you tell me what's missing? I have no idea because I don't

missing? I have no idea because I don't know your brand. And if I have no idea, how is Claude going to know and generate you an accurate variable library complete with every variable that you

might need? You're going to spend more

might need? You're going to spend more time trying to tweak it and trying to understand what's going on and trying to reverse engineer it. You're going to spend more time doing that when you could have just built your own library

from scratch using some of our tutorials in half the time and you'd be an expert on your own variable library. And just

to summarize that, can Claude code build variable libraries? Yes, it can.

variable libraries? Yes, it can.

But why would you want it to? Because

what you're going to do, you're going to Claude is going to provide a library.

You're going to use it, realize it's wrong, ask for changes. Going to provide the library, use it, realize it's wrong, it's going to you're going to ask for changes again. And it's a never- ending

changes again. And it's a never- ending cycle. My suggestion to you, watch some

cycle. My suggestion to you, watch some of the videos I have down below. They're

free, where I teach you how to build a variable library, what variables go into it, what to look out for. All right? I

have like a full video, three-hour video where we build a design system with a smaller variable set. And then I have another video where we build a more complex variable set only focus on that.

I have another video where we focus on multiple brands. So I have a lot of

multiple brands. So I have a lot of great content on that totally free my gift to you. That would be my suggestion. Thinking outside the box now

suggestion. Thinking outside the box now is using AI isn't about just us but it's how can we help developers understand what's possible claude code and Figma

MCP because they might not know. So, how

can we almost either one make their lives easier if they've like given us their trust and maybe we are a little bit more technical and if we're not, how can we tell them what they can do to

maybe help them save some time? One of

those things is actually generating our token file. So, we have like this big

token file. So, we have like this big beautiful variable library inside of Figma, but how can we then translate that to code?

There's going to be some prompting involved. And there's more to that than

involved. And there's more to that than just, you know, having Claude generating the token file. What I'm trying to show you is that that it's possible here because your developers are going to

want to build out the that file differently than what you're going to do on just like a than what you might understand or do first try. So, what I want to do here is let's go into this

variable kit. Again, this is with the

variable kit. Again, this is with the design system that's a part of our academy. And you can see here that like

academy. And you can see here that like how complex it can really get. All these

different variables. And again, we show I show you how to build this variable library for free. Link in the description. Um, where we have our

description. Um, where we have our brand, we have our alias, we have our mount, we have our responsive collection.

What I want to do is I want to copy a link to this and let's then go into claude code and have it build out the

file that devs could use realistically.

I'm just going to paste in a link to that library. Now, the prompt I'm

that library. Now, the prompt I'm running here, it's going to be a horrible prompt. I'm trying to get my

horrible prompt. I'm trying to get my point across to show you that it's possible because every company is going to want to structure their variables a little bit differently. So, it's gonna be one basic prompt to show you that as possible to show you the output. I'm not

saying this is the way that you should prompt it. Have the convo with your

prompt it. Have the convo with your developers around how they want it structured or just let your developers know that this is possible that they can

save time using Figma MCP and cloud code to build out the variable file. Um so

study all of the Figma variables uh inside of this file. Uh then

please generate me a JSON file uh I can share with my developers. Something that

simple and that basic. Let's just run it. And this here is what it came back

it. And this here is what it came back with. We have this really large JSON

with. We have this really large JSON file. Again, what this is about is like

file. Again, what this is about is like informing the developers that this is possible because they know that you can bring in designs and components, but do

they know that Cloud Code can read the raw variables, our variable library, our our styles, everything that goes in there, all the different modes.

So, it's more about dialogue and informing. If they trust you to generate

informing. If they trust you to generate something like this, great. They might

give you some tips, some pointers. Maybe

you generate a first copy, then share with your developers and let them do the rest. And if not, maybe it's just

rest. And if not, maybe it's just something that they didn't know existed.

Now all of a sudden, they can dialogue with Claude around some of these supporting materials. So when it comes

supporting materials. So when it comes to things like this, it's a lot about educating your developers on what's possible. Hey, thanks for watching this

possible. Hey, thanks for watching this one and making it this far in the video.

Um, we have a lot more content coming on AI and working with design systems and all that fun stuff. So be sure to drop a subscribe. Uh, also too check out our

subscribe. Uh, also too check out our website. Uh, link for this for this link

website. Uh, link for this for this link for our website is in the description.

Words are tough. Um, and anyways, if you want to watch a video where I build an entire design system, click in the top left. If you want to watch another video

left. If you want to watch another video that I highly recommend, click in the top right.