Design with Claude Code: The Designer’s Guide

Everyone's obsessed with cloud code, but for designers like you and me, what does that mean for us? So, today we're going to look at what it is, what to know, how to set it up, how to use it, and how to make the most of it. Let's get started.

Real quick before we begin, if you're a big fan of myself, what we're doing here at UI Collective, can check out our website. I'll put a link for this in the

website. I'll put a link for this in the description. And consider consider

description. And consider consider supporting the academy where you get access to a bunch of great courses, bunch of great micro lessons, private Slack channel access, me and the team, and some great downloads, too. Or

whether you just want to join the community, it's totally free to join the community. You can ask any question on

community. You can ask any question on our community forum. I respond to everyone that's on there. Also get

access to some great savings and some great resources too. So whether you want to join the community or you want to support the academy, hope to see you online. Really appreciate you being

online. Really appreciate you being here. Let's rock and roll. Also made it

here. Let's rock and roll. Also made it a goal for the year to start posting more on X and hyping up other designers.

So I'll put a link to my X in the video description. Come interact with me on

description. Come interact with me on there. Share your designs. I'll hype you

there. Share your designs. I'll hype you up. I'll give you feedback. Whatever you

up. I'll give you feedback. Whatever you

need, follow me. All right, my people.

Design and Claw using Claw to design.

Let's go over what to know. Let's dive

right in. So, Claude Code is all the hype these days. If you go on X, you go on any social media site and you're involved in the tech space, all everyone's doing just hyping up clawed code and what they're able to produce

with clawed code. But what does this mean for us as designers? Because again,

a lot of us, majority of us don't have the level of technical knowhow in order to operate some of these tools at a way in which we see a lot of people online doing. Now, it's important to note like

doing. Now, it's important to note like if you see people online being like, "Oh, look what I spun up with Claude code." Doesn't mean it's perfect in

code." Doesn't mean it's perfect in Figma. Doesn't mean it's going to

Figma. Doesn't mean it's going to replace you as a designer. It just means that they were able to build something cool with AI. So, just because Claude is for more technical users does not mean that you should ignore it. The one thing

you don't want to do right now in the design ecosystem is to ignore AI. Ignore

the tools that developers are hyped about because eventually those tools are are going to get wrapped in some type of design interface and then all of a sudden you're far behind. So, just

because it's for more tactical users does not mean that you should ignore it.

And we're going to cover what to do so that you're not ignoring it throughout this video. But I just want to preface

this video. But I just want to preface with that right away. Now, what is it that you should know? First off, that there's no design interface for Claude Code. If you're expecting Cloud Code to

Code. If you're expecting Cloud Code to have like a Figma type interface, sorely mistaken. You can run it in cursor. You

mistaken. You can run it in cursor. You

can run it in VS Code. Claude Code is a desktop app. You can run it out of your

desktop app. You can run it out of your terminal, but there's no like true design interface that us as designers might be expecting. Now, when prompted right, the designs it produces can be

fantastic, but again, it does take work to get there. What you'll see on X is a lot of people posting what they produced, but they don't like tell you the effort that was involved in order to

get to that design. It's usually just, oh, we built this with clawed code, and everyone thinks it can just oneot like a five-star design. It looks like it came

five-star design. It looks like it came out of Google or Apple. Can't do that.

But when prompted right, the designs it produces can really be good. You know,

it's a really great model. And now it also has a two-way sync with Figma, meaning I can do the prompting in Claude, push it via Figma MCP into a

Figma file, iterate on it in Figma, maybe show a client in Figma, make some changes in Figma, and then pull that back into Claude. So you can see how

powerful that is for a lot of designers and a lot of developers introducing this into the workflow where I can do a lot of the heavy lifting in Claude, do a lot of the minor elements in Figma, then

bring it back into Claude and iterate that way. Now Claude code is not like a

that way. Now Claude code is not like a short form for Claude Opus 4.6, whatever Claude model that's out there by the time you're watching this video. There's

a fundamental difference between the two. First off, cloud code, it's sort of

two. First off, cloud code, it's sort of the enogentic tool that runs in your terminal or runs on like the cloud app or whatever. So, it has direct access to

or whatever. So, it has direct access to your file system tools. So, it can do things, not just suggest things. It can

make changes to files. It can um understand things. It can build Figma

understand things. It can build Figma designs, right? Like that's part of like

designs, right? Like that's part of like where that 2ACNC comes from. But Claude,

you know, model X, you know, in this case, Claude Opus 4.6, Six. It's the

underlying language model of Claude. So,

it's like the brain. So, it takes text in, produces text out on its own. It has

no ability to actually read the files, interact with your system. But Claude

code can read files, update files, interact with your system in a way that the claude model itself cannot. Just

wanted to clarify that because it's a pretty fundamental difference and where a lot of designers get mixed up. Now,

let's go ahead and set up uh cloud code and then connect Figma MCP. So, it's a little bit different than how we might have connected Figma MCP to something like Cursor in the past. Now, we're

going to do this actually via our device terminal. More on that in just a second.

terminal. More on that in just a second.

And I'll put a link for their docs down below. So, just scroll down here and

below. So, just scroll down here and find the operating system that you're on. I'm on a Mac OS. So, I would just

on. I'm on a Mac OS. So, I would just copy this line right here because again, this is for Mac OS. So, I would copy that. Now, I'm not too sure like how to

that. Now, I'm not too sure like how to open it on on a PC because I haven't used a PC in like a decade. But on a Mac, like the very top bar, you're going to see a little search. Not within

Chrome, not within your browser, like at like the operating system level, you're going to see a search icon at the very top. Hit that and then search terminal.

top. Hit that and then search terminal.

And then when this line copied here, we are going to paste this line inside of the terminal. So, you're going to land

the terminal. So, you're going to land in something like this once you open up your terminal. Again, I'm on a Mac, so

your terminal. Again, I'm on a Mac, so I'm just going to paste in that exact line that we got from Claude's documentation and just hit enter.

Unreal. So, now you can see that it's actually installed. Now, the first time

actually installed. Now, the first time I did this, I ran into issues. If you

run into issues, just take a screenshot of what terminal is showing you and then just upload it to Claude or even Shotg, right? So, like if you get any issues,

right? So, like if you get any issues, just have AI troubleshoot. So, I just opened up a new terminal. Now, whenever

you open up a new terminal, it's just going to appear blank. And if you want to open a Claude code instant, you have to type Claude, as I did right here, and then just press enter. So, if you hit

type Claude, press enter. This is going to pop up. It's going to show you where you have Claude installed. And now we can start to work with our Figma MCP and do everything else that we want to do.

So, with Claude all set up on our terminal, what we're going to want to do now is just head over to Claw's documentation. I'll put a link for this

documentation. I'll put a link for this in the video description. and just come down here and just copy uh this command right here and let's navigate back to our terminal. Let's just go ahead and

our terminal. Let's just go ahead and paste in that command that we had just copied into a cloud code terminal instance here. So let's go ahead copy

instance here. So let's go ahead copy paste that in and away we go. So

assuming all was successful for you then paste in this command right here. I'll

also put a link to this command not a link sorry I'll paste the command for this in the video description as well.

So then just go ahead and then run that.

So that should have showed as installed for you and it just just doesn't show that for me because I actually already had it installed. What you're going to want to do then hit slash and then plugin and this here is going to pop up.

So you're under discover then just use the arrow keys on your keyboard. Just

navigate towards install. And now you're going to need to go through the process of authenticating your Figma remote MCP server. So hit enter and go through the

server. So hit enter and go through the installation process as it will go through on screen. So then very similar to what you might have seen in some of other tutorials of things like cursor and wind surf you are going to see this

type of agree and allow access page pop up inside of your browser. So just hit agree and allow access. But again make sure you are agreeing and allow access on the right Figma account especially for those who have multiple Figma

accounts with multiple clients. And just

like that now we're connected to to Figma via MCP to claude. So now we can start to have some fun working with our designs. So now let's just start to test

designs. So now let's just start to test our connection and see what Claude is able to produce from our terminal inside of Figma. So what I have just copied

of Figma. So what I have just copied onto my clipboard right now is just a URL to a a regular Figma file, just an empty Figma file. So let's just put in

build me a uh black and purple uh dashboard for a modern uh SAS company, whatever. Something like that. and then

whatever. Something like that. and then

just paste in the link that we're going to want that dashboard built inside.

Again, this just an easy simple prompt just to get our feet wet here. So, let's

go ahead now and then run that. So,

eventually what it did is it produced and I'm looking up here because I sort of had to move my monitor around and move it on a bigger screen so I can see both at the same time is what it did is

it built the dashboard locally, but then it also built the same dashboard inside of Figma here. So, what's nice about it is I can actually take individual

elements here. Um, you know, let's

elements here. Um, you know, let's select an element. Let's select this and then paste select that and then send that to Figma. Now, if I was to extend

this out, it just takes it as is. You

can see just because I'm condensed down to a screen like it took like sort of the condensed down version. But if I was just to extend this out here, if I was just to extend this out and then copy this, select an element. I always forget

to do that. And then send that to Figma.

Notice how it pastes in a little bit cleaner. So, just something for you to

cleaner. So, just something for you to take note of right there. So, I'm just going to collapse this back in. So, you

can take the entire screen, you can select specific elements, and what that allows you to do is sort of jam on individual elements here and not having to jam on the entire dashboard at a time. So, say if there's only one

time. So, say if there's only one element that I like here, one group, I just want to send this one group to Figma for me to riff on. I actually have that ability where it then takes that

element. So now if I really like this

element. So now if I really like this element, I can take the specific ones that I like that Claude coded produced and then send that to Figma. Again,

still looking up here just because I have a larger monitor for me to have more space on. But one thing I'd like to call out is that say I want to get rid of these emojis. Like I don't really like these things that are here. I can

delete these. I can delete these. Uh and

I can delete these. Now notice that it doesn't update on the Claude version run locally right away. So we actually need to do some prompting order to send that back to Claude. But again, there is that two-way sync. Now, I'll show you in just

two-way sync. Now, I'll show you in just a sec. The other thing, too, is you're

a sec. The other thing, too, is you're going to notice is that there's still issues with perfect responsiveness.

Again, like all the other AI tools that are out there and that I've covered in other videos, they don't really get it responsive perfectly first try. If

you're expected to be like you can get a design, you don't need to do anything with it, perfectly responsive, just in a way where like it's it's development handoff ready out of the out of the box.

Not there yet. Probably get there in the future, but not there yet. So, let's

take the changes that we made here.

here. So, I'm just going to copy uh a link to this selection because again, what we did is we just removed those emojis because I didn't really want it.

And again, you can do this at a larger scale. And it would have been easy to

scale. And it would have been easy to say, hey, remove like the emojis from the top the metrics, but let's open back up the terminal now and take this Figma URL that we just copied and have it

actually, you know, rebuild the dashboard or update the dashboard based on the changes that we had made. So, now

what I can do is I can back into the terminal now. So, updates the dashboard

terminal now. So, updates the dashboard uh cards based on the changes I made here. So, then I'm going to paste the

here. So, then I'm going to paste the link to just th those Figma cards that we had tweaked. So, then we're just going to send that to Claude. And look

what it came back with is it took the changes that we made to the widget in Figma and then pushed it to like the developed side. How wicked. like and you

developed side. How wicked. like and you we I know we did that on such a small scale like just removing the emojis, but how powerful of a workflow is that especially on a larger scale where you build a design in Claude, push it to

Figma, iterate with your team on the widgets, the components, everything inside Figma, even if the auto layout and stuff isn't perfect right away, and then when you're ready, tell Claude like the here's the updated widgets, include

it on the dashboard so that we can show a client, a stakeholder, whoever. Come

on people, unreal workflow. Now, one

thing that's important to note is don't condense it down as I did here. Just

trying to fit things on one screen. Use

two monitors or else Claude will get confused around like maybe you want a tighter look. You want to adjust the

tighter look. You want to adjust the padding. Just do it normally. Don't

padding. Just do it normally. Don't

condense things down as I did. Now, we

did all that within terminal, but Claude also has a desktop app. Who knew? Um, so

if you download the desktop app and navigate over to code, you can do the exact same thing as we did in terminal, but in their desktop app. It makes

things easier. I started with terminal to get your feet wet with terminal.

Something us designers should know. All

right. Didn't want to go the easy way out, but you can also do it inside of their desktop app. So, let's do that real quick right now. So, build me uh a

black and purple dashboard uh or let's go about us page

us page for a modern uh SAS. And um let me go ahead and actually just grab the same Figma URL. Sorry, I know you can't see the page right here, but I forgot to

copy it to my clipboard. Um so, uh for modern SAS, uh put it in this Figma file. All right. I know prompting is not

file. All right. I know prompting is not great but whatever. So let's go ahead let's run that now. Now now it's important to notice you should do be doing this in the same folder. Uh but

anyways let's just let's run that. So

now my friends it did the exact same thing. So whether you do it in terminal

thing. So whether you do it in terminal you do it in in like the claw desktop app you know whatever you get a great result. It's cool. I wanted to go

result. It's cool. I wanted to go through the terminal with you because it's something that we should know and we should get familiar with as more AI tools come out. It's a great thing to add to like your wheelhouse of skills and things that you're familiar with.

But again, the claw desktop app also works too. Now, I know that's a little

works too. Now, I know that's a little bit more of like a technical workflow.

It's a technical tool, but there is this tool that came out called Pencil, pencil.dev, put a link in the description, where it's more of like a designer friendly approach of working

with clawed code. So, go ahead, download Pencil again, whether it's like the Mac version, the Windows version, or whatever. And then let's go ahead and

whatever. And then let's go ahead and look at this. So, here I am inside of Pencil. And again, you're going to have

Pencil. And again, you're going to have to connect like your Claw subscription account, but you can already see how it's a much friendlier version of, you know, what we just did. So, I'm going to

design with Claw and just say, "Build me a purple uh dashboard for a uh SAS, you know, um, platform, whatever. Similar

prompt what we used before. I just going to paste that in and then see what it comes back with." Now, one thing that's nice about this, you can you can see it build things in real time. Um, I know

it's going a little bit slow right now, so I'll pause. So, as you can see, it's building out the dashboard in real time, which is super cool. You can see like, oh, look at that. Just it's adding like

those dashboard cars. Super unreal. Um,

so you can see it's thinking about everything that it's building on the lefth hand side, building it out piece by piece. I'll pause the video here and

by piece. I'll pause the video here and then come back once it's fully built.

So, look what it came back with. It came

back with this dashboard. looks pretty

good. Now, it's not perfect. Like, look,

this element isn't fully responsive. Not

everything in here works as intended, but again, neither does Figma. Now, one

thing that is important to note is there's currently no way to take the designs that are done here and then putting them into Figma. There's no

option to do that just yet. I imagine

it's in Pencil's road map of things that they're going to be doing. But, this

here looks pretty good. is honestly

pretty a little bit better than what you generally see a lot of like AI design tools quote unquote uh do but again can't put it to Figma. So it's great if you're just sort of like looking for

inspiration and want to build things out fast in a way sort of like an interface that works a little bit better for us designers. Now one other cool feature of

designers. Now one other cool feature of pencils they kind of have like these pre-built like design system or like UI kits that you can choose from. Um, so if you are have a certain look and feel that you're going for, you can come up

here, choose a kit, and have that already applied. Just a cool feature

already applied. Just a cool feature that's nice to have within Pencil. All

right, I know there was a ton going on in this one, and I jump back and forth between a lot. Thanks for staying with me. Uh, if you're a big fan of myself,

me. Uh, if you're a big fan of myself, check out UI Collective Academy or join our free community. I'll put a link for that in the description below. Um, and

also too, if you want to build an entire design system, click in the top left. If

you want to watch another video I highly recommend, click at the top right. Be

sure to drop a subscribe, drop a like.

Thanks for being here. See you the next one.