تدريب Shadowing: Design with Claude Code: The Designer’s Guide - تعلم التحدث بالإنجليزية عبر الفيديو

Everyone's obsessed with Claude 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, you can check out our website, I'll put a link for this in the description, and consider supporting the academy where you get access to a bunch of great courses,

a 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 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 here.

It'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 there.

Share your designs.

I'll hype 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 Claude code

and what they're able to produce with Claude 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 know-how in order to operate some of these tools at a way in

which we see a lot of people online do it now it's important to note that

if you see people online being like oh look what i spun up with Claude code doesn't mean it's perfect in 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 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 technical 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 with that right away.

Now, what is it that you should know?

First off, that there's no design interface for CloudCode.

If you're expecting CloudCode to have like a Figma type interface, sorely mistaken.

You can run it in cursor, you can run it in VS Code, CloudCode is a 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 tell you the effort that was involved in order to get to that design.

It's usually just, oh, we built this with Claude Code

and everyone thinks they can just one shot like a 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 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, Claude code, it's sort of the energetic tool

that runs in your terminal or runs on like the Claude app 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 designs right like that's part of like where

that two async comes from

but claude you know model x you know in this case claude opus 4.6 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 and 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 a 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.

And I'll put a link for their docs down 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 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 open it 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, but 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.

And then with this line copied here, we're going to paste this line inside of 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 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 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 shout gpt

and have it walk you through how to fix it 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 instance, 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.

100

And now we can start to work with our Figma MCP and do everything else that we want to do.

101

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

102

and just come down here just copy this command right here

103

and let's navigate back to our terminal let's just go ahead and paste in that command that we had just copied

104

into a cloud code terminal instance here so let's go ahead copy paste

105

that in and away we go

106

so assuming all was successful for you then paste in this

107

command right here I'll also put a link to this command

108

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

109

So then just go ahead and then run that.

110

So that should have showed as installed for you.

111

And it just doesn't show that for me because I actually already had it installed.

112

What you're gonna wanna do then, hit slash and then plug in.

113

And this here is going to pop up.

114

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

115

Just navigate towards installed.

116

And now you're gonna need to go through the process of authenticating your Figma Remote MCP server.

117

So hit enter and go through the installation process as it will go through on screen.

118

So then very similar to what you might have seen in some of our other tutorials with things like Cursor and Windsurf, you are going to see this type of agree and allow access page pop up inside of your browser.

119

So just hit agree and allow access.

120

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.

121

And just like that, now we're connected to Figma via MCP to Claude.

122

So now we can start to have some fun working with our designs.

123

So now let's just start to test our connection

124

and see what Claude is able to produce from our terminal inside of Figma.

125

So what I have just copied onto my clipboard right now is just a URL to a regular Figma file, just an empty Figma file.

126

So let's just put in build me a black and purple dashboard for a modern SaaS company,

127

whatever, something like that.

128

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

129

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

130

So let's go ahead now and then run that.

131

So eventually what it did is it produced, and I'm looking up here because I sort of had to move my monitor around

132

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,

133

but then it also built the same dashboard inside of Figma here.

134

So what's nice about it is I can actually take individual elements here.

135

You know, let's select an element.

136

Let's select this and then paste, select that and then send that to Figma.

137

Now, if I was to extend this out, it just takes it as is.

138

You can see just because I'm condensed down to a screen, like it took like sort of the condensed down version.

139

But if I was just to extend this out here, if I was just to extend this out

140

and then copy this select an element I always forget to do

141

that and then send that to Figma notice how it pastes in a little bit cleaner

142

so there's something for you to take note of right there

143

so it's going to collapse this back in

144

so you can take the entire screen you can select specific elements

145

and what that allows you to do is sort of jam on individual elements here

146

and not having to jam on the entire dashboard at a time

147

so say if there's only one element

148

that I like here one group I just want to send

149

this one group to Figma for me to riff on I actually have that ability where it then takes that element.

150

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

151

Again, still looking up here just because I have a larger monitor for me to have more space on.

152

But one thing I'd like to call out is that say I want to get rid of these emojis.

153

Like I don't really like these things that are here.

154

I can delete these.

155

I can delete these.

156

And I can delete these.

157

Now notice that it doesn't update on the Claude version run locally right away.

158

So we actually need to do some prompting order to send

159

that back to clod but again there is

160

that two-way sync now i'll show you in just a sec

161

the other thing too is you're going to notice is

162

that there's still issues with perfect responsiveness again like all the other ai tools

163

that are out there and

164

that have covered other videos they don't really get it responsive perfectly first try

165

if you're expected to be like you can get a design

166

you don't need to do anything with it perfectly responsive just

167

in a way where like it's it's development handoff right out

168

of the out of the box not there yet probably get there in the future, but not there yet.

169

So let's take the changes that we made here.

170

So I'm just going to copy a link to this selection.

171

Because again, what we did is we just removed those emojis because I didn't really want it.

172

And again, you can do this at a larger scale.

173

It would have been easy to say, hey, remove like the emojis from the top metrics.

174

But let's open back up the terminal now and take this Figma URL that we just copied and have it actually,

175

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

176

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

177

So updates the dashboard cards based on the changes I made here.

178

So then I'm going to paste the link to just those Figma cards that we had tweaked.

179

So then we're just going to send that to Claude.

180

Then look what it came back with is it took the changes

181

that we made to the widget in Figma and then pushed it to like the developed side.

182

How wicked.

183

like and you i know we did

184

that on such a small scale like just removing the emojis

185

but how powerful of a workflow is

186

that especially in a larger scale where you build a design

187

and claude push it to figma iterate with your team on the widgets the components everything inside figma even

188

if the auto layout and stuff isn't perfect right away

189

and then when you're ready tell claude like here's the updated widgets included on the dashboards

190

that we can show a client a stakeholder or whoever.

191

Come on, people.

192

Unreal workflow.

193

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

194

Just try to fit things on one screen.

195

Use two monitors or else Claude will get confused around like maybe you want a tighter look.

196

You want to adjust the padding.

197

Just do it normally.

198

Don't condense things down as I did.

199

Now, we did all that within Terminal, But Claude also has a desktop app. Who knew?

200

So if you download the desktop app and navigate over to code

201

you can do the exact same thing as we did in terminal

202

but in their desktop app it makes things easier i started

203

with terminal to get your feet wet with terminal something us

204

designers should know all right didn't want to go the easy way out

205

but you can also do it inside of their desktop

206

app so let's do that real quick right now

207

so build me uh a black and purple dashboard uh

208

or let's go about us page us page for a modern uh sas

209

and um let me go ahead and actually just grab the same sigma url

210

so i know you can't see the page right here but i forgot to copy it to my clipboard

211

212

so uh for a modern sas uh put it in this stigma file all right i know prompting's not great

213

but whatever so let's go ahead let's run

214

that now now it's important to notice you should do be doing this in the same folder uh

215

but anyways let's just let's run that

216

so now my friends it did the exact same thing

217

so whether you do it in terminal you do it in

218

like the claw desktop app you know whatever you get a

219

great result it's cool i wanted to go through the terminal with you

220

because it's something

221

that we should know we should get familiar with as more

222

ai tools come out it's a great thing to add like your wheelhouse of skills

223

and things that you're familiar with

224

but again the claude desktop app also works too now i

225

know that's a little bit more of like a technical workflow it's a technical tool

226

but there is this tool

227

that came out called pencil pencil.dev pro link for the description

228

where it's more of like a desire friendly approach of working with claude code

229

so go ahead download pencil again whether it's like the mac version the windows version

230

or whatever and then let's go ahead and look at this

231

so here i am inside a pencil

232

and again you're going to have to connect like your claude subscription account

233

but you can already see as much friendlier version of you know what we just did

234

so i'm going to design with claw and just say build me a purple dashboard for a a SAS,

235

you know, platform, whatever, similar prompt, what we use before.

236

I was going to paste that in and then see what it comes back with.

237

Now, one thing that's nice about this, you can, you can see it build things in real time.

238

I know it's going a little bit slow right now. So pause.

239

So as you can see, it's building out the dashboard in real time, which is super cool.

240

You can see like, Oh, look at that.

241

Just it's adding like those dashboard cars, super unreal.

242

So you can see it's thinking about everything

243

that is building on the left hand side building it out piece by piece I'll pause the video here

244

and then come back once it's fully built

245

so look what it came back with it came back with

246

this dashboard looks pretty good now it's not perfect like look

247

this element isn't fully responsive not everything in here works as intended

248

but again neither does Figma now one thing

249

that is important to note is there's currently no way to take the designs

250

that are done here and then putting them into Figma there's no option to do

251

that just yet I imagine and Pencil's roadmap of things that they're going to be doing.

252

But this year looks pretty good.

253

It's honestly pretty, a little bit better than what you generally see a lot of like AI design tools, quote unquote, do.

254

But again, can't put it to Figma.

255

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.

256

Now, one other cool feature of Pencil, they kind of have like these pre-built like design system or like UI kits that you can choose from.

257

So if you have a certain look and feel that you're going for, you can come up here, choose a kit, and have that already applied.

258

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

259

All right, I know there was a ton going on in this one.

260

I jumped back and forth between a lot.

261

Thanks for staying with me.

262

If you're a big fan of myself, check out UI Collective Academy or join our free community.

263

I'll put a link for that in the description below.

264

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

265

If you want to watch another video, I highly recommend it.

266

Click at the top right.

267

Be sure to drop a subscribe, drop a like.

268

Thanks for being here.

269

See you at the next one.

ما هي تقنية التظليل الصوتي؟

التظليل الصوتي (Shadowing) تقنية تعلم لغة مدعومة علمياً، طُورت أصلاً لتدريب المترجمين الفوريين المحترفين. الطريقة بسيطة لكنها قوية: تستمع لصوت إنجليزي أصلي وتكرره فوراً بصوت عالٍ — كظل يتبع المتحدث بتأخير 1-2 ثانية. تُظهر الأبحاث تحسناً كبيراً في دقة النطق والتنغيم والإيقاع وربط الأصوات والاستماع والطلاقة.

تدريب Shadowing: Design with Claude Code: The Designer’s Guide - تعلم التحدث بالإنجليزية عبر الفيديو

السياق والخلفية

أفضل 5 عبارات للتواصل اليومي

دليل خطوة بخطوة لتقنية التظليل

ما هي تقنية التظليل الصوتي؟