Shadowing Practice: Claude Design: The Complete Guide - Learn English Speaking with Video
Creando lección...
1
Anthropic just released Claude Design.
2
Today, we're going to cover everything, starting off with generating initial concepts and how it works, before we look at syncing a design system, generating a design with a design system, and a whole lot more.
3
And if you're a big fan of myself and what we're doing here at UI Collective, check out our website in the video description for UI Collective Academy or the community.
4
With the Academy, if you choose to support it, you get access to a ton of great courses on AI concepts, private Slack channel access, some great downloads, and a whole lot more.
5
Also, always adding more content to this.
6
Or it's totally free to join the community you can come ask any questions for free on our community forum, get access to some great savings and resources too.
7
So whether you want to join the community, support the academy, thanks for being here.
8
Also too, remember to come and follow me on X.
9
I'll also put this in the video description.
10
Here we are in Claude Design.
11
I'm going to put a link for this and also Anthropik's blog on the topic in the video description.
12
Relatively straightforward stuff though.
13
Let's start off with the prototype.
14
Again, we're not here for a slide deck.
15
I might get into that in a future video, but not right now.
16
So right away, let's create a new prototype.
17
This is called test prototype exam.
18
We're testing it out for now.
19
One thing that's cool is the ability to select between whether you want a wireframe or a hi-fi prototype.
20
Now, I don't know any designers who wireframe anymore, if I'm honest.
21
I don't.
22
All my designer friends don't.
23
Because we all have design systems and UI kits with all the elements that we would really need.
24
And especially with AI now, we tend just to jump right into high fidelity because that's what most stakeholders want.
25
So it's a really cool idea to be able to build wireframes first to explore ideas and flows.
26
But personally, I just don't know how much that's going to get used.
27
Thinking about how designers really work these days.
28
Five years ago, I'd be like, oh, it's awesome.
29
Designers wireframe all the time.
30
Not really anymore, if I'm honest, just from what I know.
31
So let's just create this test prototype in high fidelity.
32
And then we land on a page like this.
33
We're going to get into working with the design system and dragging it a Figma file a little bit later on, but let's just go through some of the fundamentals to start.
34
Let's run a small, simple prompt then.
35
So please build me a onboarding flow for a futuristic ed tech platform.
36
Please build me an onboarding flow for a futuristic ed tech mobile platform.
37
it's added mobile here just to specify and let's send
38
that what it's going to do is it's going to generate some questions about what it is
39
that we want to see as part of that ed tech onboarding
40
which is really nice because a lot of people especially designers we're not good at defining everything
41
that we want in an initial prompt
42
so these questions really help unlock what it is
43
that we're looking for to make better use of the ai first time around let's answer some of these now
44
So product or concept, let's go AI tutor.
45
Let's have it decide for us who the primary audience should be.
46
Let's pick a visual direction that resonates.
47
Personally, in the future, one thing I would love for Claw to do is almost provide some design system components here.
48
Because it doesn't really give us a whole lot to work with. Or
49
if it can sort of give us more ideas around what the app would look like under each of these visual directions, it might better inform which one we select.
50
But again, early stages, I'm sure they might get to that in the future.
51
let's just select uh let's go with this one for now uh
52
which onboarding steps so go step welcome sign up off goal uh skill level diagnostic quiz
53
and everything else it may be a paywall let's just see
54
part of the possible here device frame let's go ios how
55
should i present options let's go single flow um there we
56
go how novel experimental this is kind of cool let's maybe
57
set it at like an eight to see how close to this weird futuristic UX we can get.
58
And then what should tweaks let it be changed?
59
Maybe color theme accent and animation intensity.
60
Anything else?
61
No, I think that's good.
62
So let's continue with that and see what the results are like.
63
This here is what it came back with, where personally, I think this is pretty cool.
64
You know, a tutor that learns you first we have all these different types of colors we can play around with.
65
We can adjust the motion level.
66
So if we don't want as much motion, thinking about accessibility, we can reduce it.
67
If we want normal motion, we can increase it.
68
This is really cool stuff in terms of like, you know, most AI designs do not look this good right away.
69
So let's go ahead and test some things out.
70
This also looks pretty good.
71
How should Luma address you?
72
Let's just type in, oh, it doesn't really work too well.
73
Face ID component here doesn't work, but that's okay.
74
Let's flip through to goals.
75
What should I orbit you around?
76
You know, software and systems, you know, mathematics, design and craft.
77
Pretty cool.
78
Quick calibration.
79
What's our current level?
80
Advanced.
81
How deep do you want to go?
82
L4, L5.
83
Awesome.
84
Diagnostic.
85
Again, really cool stuff.
86
And then, you know, start our seven day free trial, welcome.
87
In terms of a first draft, this is awesome.
88
Before you start getting concerned, like, am I going to be out of a job?
89
This screen here, well, these six screens burned through a ton of Claude tokens.
90
I don't use Claude for a ton of things and I'm already on a paid plan.
91
So it's not as easy as just, oh, I can build anything I want.
92
It's going to cost 20 bucks a month.
93
That's not the case.
94
As we move into larger, more complex prototypes, applications, using a design system, we're going to look at later.
95
The results differ drastically.
96
Not every result you get with Claude Design is absolutely fantastic.
97
Yeah, we'll look at that later on.
98
And even if you look at like Google Stitch and my tutorials with that, the base prompts that they gave you always gave you a really good result.
99
But when you started introducing your own spin on thing and stitch didn't really know what to do.
100
I think that's what we're kind of encountering here, where if you give AI total freedom and total control, it produces really good results.
101
But when you start adding guardrails like a design system, the results are not usually as good.
102
I want to try something now, which is to generate a web facing design.
103
Because another thing that I've noticed a lot of AI tools is that the mobile designs turn out pretty good, but the second it starts getting into web is when things tend to stray.
104
So let's try that.
105
Inside of a new project then, we're running a small prompt,
106
build me a dashboard for a financial management application.
107
Oh, I really cannot type today.
108
I'll correct this, financial and then management.
109
Oops, doesn't even give me a suggestion.
110
Financial management application.
111
Let's send that, see what questions uh it comes back with again some more questions
112
so let's go uh personal finance uh main job that's fine
113
uh how interactive should it be uh hover tooltip polish only
114
or maybe just decide for me how should i present options uh again decide for me
115
and then let's go aesthetic direction let's keep it uh nice
116
and clean data density again decide for me let's go usd
117
product name leave it empty must have let's just select a couple here navigation pattern let's go left sidebar
118
which tweaks should I expose decide for me
119
and let's just run we have another pretty good result I'm not going to lie
120
so we have our net worth cash on hand insights cash
121
flow accounts recent transactions again there's still some clear issues here is that these sections too long.
122
You know, we've got a bunch of white space right here.
123
But for the most part, you know, it's pretty interactive I think it looks pretty good now
124
when it comes to making some adjustments we have this tweak
125
section here we can you know adjust sort of the color
126
scheme the density the chart style whether you want it area
127
or blue even privacy mode where we can turn some things on this is nice
128
when it comes to like experimenting and just see some other options
129
but I'm just going to go ahead and turn those off for now.
130
A couple things in terms of how we can edit things.
131
So if we hit edit, we can start to edit some of these items directly.
132
So if we want to adjust this to, you know, like an eight as an example, we can do that.
133
If we want to adjust this, maybe set this to maybe a little bit of a different color.
134
We have some options here over adjusting some of the font, font weights, and everything like that.
135
So it's a pretty good treatment if we want to just select items and make some adjustments.
136
We want to make this a little bit of a darker color we can, but we're not going to for now.
137
Keep that nice.
138
So that's something that I really do like.
139
Even these, we can come in and adjust.
140
It's pretty comprehensive.
141
Now, that's the edit functionality for more quick features.
142
But if we want to make larger adjustments, what we can do is we can leave comments.
143
And for larger changes, or if we want to send a multiple at once to Claude, we can leave comments.
144
So maybe this insights card here, you know, different insights.
145
So we can comment that.
146
And then what it does, it adds it to this comments grouping.
147
Ignore some of the other ones that were here.
148
I had messed up recording when I was just doing it the last time.
149
So they're still here.
150
And for whatever reason, I can't get rid of them.
151
I have noticed some bugs with this comment feature.
152
So just something to be aware of.
153
And then maybe this section here, far too tall, reduce number of transactions.
154
So let's comment that too.
155
And then we can add any others that are here.
156
You can see here there's this bug, which is this added white space that gets added.
157
And I can't scroll all the way to the top.
158
So a little bit buggy, but that's okay.
159
So now what we can do is we can select the comments that we want to send to Claude.
160
So I'm going to select the two that we had just added.
161
Again, ignore the other ones.
162
Let's send those to Claude.
163
It made those adjustments.
164
So instead of these insights to change, it actually changed these ones too.
165
That's my fault.
166
I wasn't very explicit.
167
And it reduced the number of transactions to avoid that extra scrolls.
168
Then we have 505 show.
169
Pretty good.
170
But there's still the issue where this is burning through tokens.
171
A heck of a lot of tokens.
172
And a lot of companies, like I've seen a couple instances where Uber actually,
173
they ran out of their AI tokens within like three to four months that they had budgeted for the year.
174
So don't think that there is no cost associated with doing this level of editing and also vibe designing.
175
It's not cheap.
176
Not every company is willing to give their designers full access to something like this.
177
And if you're a solo designer, solo entrepreneur, you know, you might be able to afford one of the base plans and use this for iteration.
178
But if you're looking to generate full-blown prototypes and a ton of different stuff, you might be burning through tokens that you might not want to spend a lot of money on,
179
where it might help with some of the initial iteration.
180
But it might be better to still use Figma in some cases.
181
There's also this draw functionality where you can like point to different things and add notes associated with it.
182
I think it's a little bit of a wonky experience.
183
It's not something that I find myself using, but I thought I'd call it out anyway.
184
In terms of like presenting, sharing a couple options to present here.
185
So we can do it in the new tab, which is kind of nice where we can see what it would look like.
186
It's great of showing something to a client or they're also the ability to, you know, do full screen mode to again, really similar stuff.
187
Now, when it comes to sharing and exporting, so you can copy a link exactly to this project
188
and share it with your team members who are part of like your cloud team.
189
and there's also the ability to export.
190
Now there's no option right from Claude Design to send this right to Figma.
191
I can download this as a zip.
192
I can export all this stuff.
193
Send to Canva.
194
I think is, I don't know.
195
I would never use that because I don't really use Canva.
196
But what I would do is I would generally choose to hand this off to Claude Code.
197
So when I select hand off to Claude Code, what we can do, we can copy this command.
198
Now let's open up the Claude application in this case we'll
199
navigate to the code tab inside of a new cloud code session then let's go ahead
200
and just enter in that whatever it is
201
that we copied from cloud design
202
and then run then we have this design inside of cloud code
203
and what i did is i just created a new figma file i already have figma mcp
204
and my figma skills connected if you don't know how to do
205
that i'll link a video in the video description where i talk through
206
that process let's just enter this in and just say, you know, push this design to Figma and let's run.
207
This is now in Figma.
208
I'm going to be honest, it took about seven minutes for this to push.
209
You can see here that it's not perfectly responsive.
210
There's some elements that are responsive, but you know, you have to go through in here and like adjust some of these things, but it's okay.
211
I think it's pretty good in terms of the grand scheme of things.
212
But as we zoom in here, we're going to see that there's some issues with some of the with some of the elements
213
but that's okay this is now in figma
214
and enough where we can start to iterate on some of these items
215
if we needed to two things i want to cover here
216
real quick first off is the dragon of figma file unless
217
there's like one page in your figma file it's gonna go through
218
so many tokens in my honest opinion just not worth it the other thing
219
that i don't really get is this start from sketch idea
220
like why are you giving me a canvas to draw things
221
on like i don't know like i don't i don't really get the point of it
222
if i'm honest i'm struggling to articulate how to even describe
223
it like i just don't get it i don't i wouldn't find value in this
224
because i would just prompt what i want i don't want to draw a random shape as
225
if i'm just drawing on paper and hope that AI understands.
226
I don't know.
227
I haven't found value in it.
228
You know, you can leave like notes and things.
229
It's cool, I guess, but it's not what I'm looking for.
230
What about bringing our design system now?
231
Do we still get really good results?
232
Now, one thing I'd like to call out is the results
233
I got in this video were actually way better than results I got yesterday or even this morning.
234
So it's hit or miss.
235
So when it comes to bringing your own design system, sometimes you get this right here to set up a design system, but I whenever sometimes when I'm in claw design I don't actually see this
236
so let's just create a new prototype just in case you
237
don't have this button let's just call it UI collective tutorial
238
and stick with high fidelity for now so let's choose to create and then we're back in this page
239
so I'm going to hit design system and then under here just hit edit
240
and what that's going to do is going to open up
241
this like form where you can set up your design system
242
in a new tab you can also just choose this button
243
if you do see it here
244
and it takes you to the exact same place let's talk
245
through this now now played around with claw design enough where
246
entering the company name in a blurb about the company doesn't really impact the design too much
247
because as i start prompting it asks questions
248
that i would put here anyway like what kind of app
249
are you building who is it for who is the target user
250
so i haven't found
251
or seen a difference in completing this section entirely we're just going to put ui collector um
252
and then i'm going to upload a figma file
253
so what i did is offline
254
or behind cameras i just downloaded one of the design systems as part of our academy
255
and i just gonna upload it here so yeah we're gonna attach all 75
256
pages and frames now this is nice because especially if we're working with a really large design system, maybe there's only certain ones that we actually want to include
257
or upload to clod so this year functionality that i do like
258
but i'm just going to choose to attach everything for now
259
so i'm going to attach that
260
and same with this any other note section is i playing around with it i haven't really seen a difference
261
if i was to populate this or not
262
because as i prompt claude's just going to ask me questions anyway
263
so with that uploaded let's continue to generation usually it does take about five
264
or so minutes let's choose to generate and keep rocking
265
and rolling what it's doing is it's auditing the figma file
266
and creating the design system
267
so every time you upload a design system it creates a mini task breakdown of things
268
that it needs to look at and things
269
that it needs to do one thing i would like to call out here is
270
if you have a really really complex design system you might
271
want to consider removing some elements like some of the larger page templates
272
because that's where it can really burn through a lot of
273
tokens in the time like drastically increases in order to set up your design system inside of cloud design
274
so we're still going to wait for this to generate
275
but just wanted to call
276
that out right away one other thing is i'm doing this
277
in the browser some people have reported this being in the cloud app i don't see it i don't have
278
that functionality i've restarted clod a bunch of times and i just don't see it inside my my Cloud desktop app.
279
So I'm doing this in the browser.
280
I'll review a draft of the design system.
281
One thing I want to call it right away is this banner.
282
Missing brand fonts.
283
Cloud is rendering typography with substitute web fonts.
284
In the design system, I was you that I'd uploaded.
285
I am using regularly available web fonts.
286
And behind the camera, what I had done is I'd uploaded all of those fonts from the design system.
287
and then on the left hand side here you can see
288
that i was dialoguing with claude over it
289
but for whatever reason it's still missing some of those fonts
290
and i went back to the figma file i was like there's no other rogue fonts in here
291
that claude shouldn't have based off what it is
292
that i had uploaded
293
so there seems to be something wrong with the font recognition
294
it's okay you know this just came out like a day
295
or two ago so give them some slack
296
but i would have loved for this to be have been like perfect for a first release
297
because if the font's wrong in our designs
298
then we're not going to get a good output that's in line with what it is that we actually want to see.
299
And now we need to review everything that it pulled from the design system.
300
So starting off with type.
301
So we can filter through everything here.
302
We can scroll down and see everything individually.
303
So let's scroll down here.
304
So looking at type, I would love the ability to zoom in here.
305
That functionality I haven't yet found because it's pretty hard for me to see like the fine print, especially if I'm on like my 12 or 13 inch Mac, it's hard to see exactly what this is saying.
306
So I would love the ability to expand this or really zoom in on some of these things.
307
But one thing I see right away is in the design system I uploaded, I don't have displays.
308
I have H tags.
309
I have one hero, but I left out displays just in the design system.
310
So it came back and gave me all of these displays.
311
and when I took my little magnifying glass and zoomed in, it looks like the attributes of the font are actually wrong when compared against what's in the design system.
312
Line heights aren't right.
313
Font sizes aren't right.
314
The naming is wrong.
315
Because even too, like, as I mentioned, I don't have displays.
316
I have h tags.
317
I have a hero in the design system that I uploaded.
318
So there seems to be something off with how it's pulling things from the design system file.
319
as we go into colors colors for the most part look pretty good uh
320
and then we get into radiuses again radiuses too it does
321
look like it added a couple extra radiuses for whatever reason
322
but that's okay not the end of the world
323
and then we can see uh our components again just sort
324
of pulled a small subset of the components it did pull all of them
325
but that's okay too so it's a Great first start.
326
And in terms of workflow, I think this does have a lot of promise.
327
But one thing that worries me is the design system that I uploaded, it wasn't a large one, especially when compared against a lot of the enterprises that I work with.
328
So it does worry me that as designers want to upload super complex design systems,
329
there might be a lot of inconsistencies in the results that Claude has after it goes through and does its audit.
330
I'm going to leave all these other ones alone for now even if they're small things I think we can tweak.
331
But the big one that I want to get right is the font.
332
So I'm going to say that this needs work
333
and let it know that this does not match what was in the design system I had provided.
334
That's what I'm going to tell it.
335
I'm going to let it know that it got it wrong.
336
So let's submit that.
337
Credit where credit is due is it came back with this
338
list of questions in order to help get the better result first try.
339
And this is something I've seen a little more explicitly with Claude Opus 4.7 is
340
when I give it a prompt or I tell it something's wrong, I usually get a list of questions back.
341
So credit where credit's due.
342
It's come a long way.
343
So where is the source of truth for this?
344
Upload the design system file and I'm gonna have to upload that Figma file again.
345
So let's just choose to upload that while that's loading and doing its thing.
346
So it wouldn't let me upload the Figma file I'd uploaded earlier.
347
So I just downloaded a PNG of of our type scales and just uploaded it here.
348
What specifically didn't match basically everything.
349
There's a lot that was really wrong with it.
350
And then even here to like keep the 18, 24, 28 point optical treatment, we didn't have an 18 in the design system that I had uploaded.
351
We had a 16, we had a 20, we didn't have an 18.
352
So something seems just off here.
353
So let's choose to continue with that.
354
And it's going to go ahead and start doing its thing again.
355
And while it's doing that, look what happened.
356
my cloud subscription did not renew
357
that long ago all of a sudden i've hit my usage limit now i got to upgrade my plan
358
so i upgraded my plan rough way to start my saturday um
359
and now it's not recognizing that i upgraded my plan
360
so i gotta keep spamming retry i've tried closing claude i
361
don't know sorry with me you get authenticity i gotta figure
362
this part out i tried logging out logging back in refreshing all the usual fixes
363
but it's still not recognizing that i just paid a whole bunch of money
364
and it's really slowing down my recording workflow right now
365
so what i'm going to do i want to give it a couple hours um see
366
if that fixes things in the meantime i need like eight more coffees
367
and i need to go for a walk a couple hours later i recognize
368
that i actually did upgrade and this year is what it came back with that's a little bit more
369
accurate in terms of the font styles and related items
370
that are actually in the design system now there's things
371
that i could clean up with some of these other groupings
372
but i just don't want want to burn through any more tokens.
373
So let's go ahead and choose to create a new design using the system now.
374
It takes us back to this page.
375
Now we're going to, what's kind of nice here is
376
that there's kind of like these different folders in order to keep things organized, where we have the tutorial prototype, then we have like the design system, we hit the design system,
377
we can come back in here and sort of make changes to it.
378
So it keeps a lot of the work separate, which personally, I actually do like in terms of organization.
379
Have one section for my design system where I can dialogue with that and then another section for any associated prototype.
380
So that is something that I do like.
381
So now that we're in, which folder did I select here?
382
Just this tutorial folder again, not the one for the design system.
383
Let's generate a design now.
384
And here if we were to hit design system, we can see the design system is applied, which is good.
385
So now let's run a small simple prompt, please build me a mobile financial welcome page,
386
along with both a sign up and login page.
387
Ensure it is prototyped.
388
Something like that.
389
Please build me a mobile financial app welcome page, along with the sign up
390
and login page ensure it is prototyped easy prompt whatever let's run
391
that then again we just get some questions
392
so you're what do we want to call this just call it uh finance app something like
393
that uh neo everyday banking device framing let's go ios uh let's go light mode actually i'm I'm curious, go both here.
394
Welcome page style.
395
Let's go.
396
Let's go with this.
397
Sign up fields, full name, email, password.
398
Maybe we'll add some complex ones here too, just in case it introduces the flow a little bit, like add some things to the flow.
399
Sign up as, let's go multi-step, login, email passwords, maybe add a Google sign up, interactions.
400
These are some really good questions.
401
Want to equal variations.
402
Yes, tone.
403
Let's go friendly and approachable.
404
Anything else?
405
No, I think that's good.
406
Let's continue on.
407
This here is what it came back with.
408
Now, in the design system file that I had uploaded, green is not a primary button color.
409
It's only used in success elements.
410
And that's one thing
411
that I don't like in playing around with Claude design is it still drifts from those design system rules
412
if it really had a good understanding of the design system it would realize
413
that the buttons in the file i uploaded are like a really really dark gray almost black
414
and here it's not following that design system the way i
415
which in which i would expect
416
so now i have to burn tokens to tweak it time
417
and time again if it just got
418
that wrong with the colors you can only imagine how the
419
more complex the design system is the more you're going to
420
burn through tokens trying to correct it correct to correct it
421
but that said
422
when it comes to the design system itself is like it
423
looks like it used the components relatively well like you know
424
the fields here are a little bit wrong in terms of you know you can see
425
that this is broken these are overlapping but they look like the components
426
that are in the design system small things too like the
427
our error state this looks like the the error state in our design system.
428
But even with the focus too, it looks relatively accurate.
429
But the focus here, the focus color that we use in the design system is not blue.
430
So we've got some things right.
431
But is it enough for me to warrant having to sit here and burn through tokens and correct it, correct it, correct it, correct it, correct it, especially for smaller items like this?
432
Not really.
433
It's almost quicker for these smaller screens to build them using my design system
434
and Figma and then bring into Cloud Code because then we're not burning through
435
a million into tokens every time so just something to keep in mind here
436
but let's see let's navigate some of the options
437
that it gave us
438
so the charts not bad stack again we don't have any
439
of these icons in our design system it just pulled in
440
emojis let's check the dark mode too dark mode doesn't look half bad um
441
but overall the results it's getting better for like it's pretty good for a first release
442
and i'm sure it's going to get better over time
443
but i don't know
444
if bringing my design system in the Claude design is really worth burning through all the tokens in the effort just yet.
445
If you compare that result with what the result is, if we didn't give it any guardrails, like a design system, you notice
446
that the design is not as good with the design system versus if I just had let AI do its thing.
447
So that's where there's still a lot of maturing that needs to happen in the in the AI space.
448
And it's something I feel Figma might work to fix with
449
their launch at their conference later on this year by hosting documentation inside of Figma and stuff like that.
450
But as you saw, if you use your design system, designs just aren't as good versus what we got here.
451
I want to share my thoughts on some things here.
452
Because I saw a lot of people worried online about what's going to happen with their careers
453
and so on and so forth.
454
You're not wrong to be worried is because the space is really, really changing.
455
But I always tell people, I'm like, chat GBT has been around for a while.
456
All these AI tools that write emails, write blogs, write, like refine your copy.
457
They've been around for, what is it, four years now?
458
And communications roles are still getting hired for.
459
I have a lot of friends who are in communications.
460
and you know they're moving up in their careers to higher level communications roles
461
and they're hiring you know people fresh out of school
462
so instead of being replaced they just learn to work with
463
ai to orchestrate ai the same thing's going to happen with designers now design is a little bit different
464
because this is very very expensive you saw earlier i ran out of credits
465
and i hadn't use Claude for a whole lot of things since my plan renewed before this tutorial.
466
You burn through credits pretty quickly.
467
And what I think you'll actually start to have happen is I think I mentioned it earlier is the Uber CTO, I believe, I believe it was Uber.
468
They ran out of like their AI development budget or something within like three months.
469
Because if you start like token maxing you run out of tokens really quickly
470
and tokens are expensive
471
so i think what you're going to start seeing is the designers will have an ai budget at work
472
so you have a monthly number of credits to support in some of this iteration
473
so you're no longer having to manually go through things
474
and build things
475
and like figure out what data points you want to include
476
you're likely going to use ai to get a lot of
477
those first drafts get a lot of the styling down
478
and then you're going to need to work in whatever tool whether it's a future version of claw design
479
or push to figma or whatever it is to refine
480
and build on some of those next iterations some of the next screens
481
but you're going to have an ai budget each month again this is my thought i don't know
482
but it's just my own personal opinion
483
that is probably where you're going to start to head we're
484
going We're going to have an AI budget at work for
485
you to use each month to help with some of the more iteration and first draft level items.
486
And where is it I'm using claw design right now?
487
Right now, I'm using it for iteration, but barely.
488
Like it just came out.
489
And as I mentioned before, if I use it for iteration for everything, I am burning through tokens.
490
And we're not rich by any means.
491
Like us as designers, we don't have an unlimited budget.
492
Design teams do not have an unlimited budget.
493
We are not a rich division in enterprises.
494
We are not like sales or finance where we have a lot of money.
495
I've worked with clients where a design team was trying to get a specific plugin that had a paid version.
496
And it was like 15 bucks a month per seat.
497
And that was actually rejected by the enterprise.
498
Like that's too expensive for the design team.
499
So how can now you start to justify 200 USD a month
500
or whatever it is for everyone on your design team to have all these tokens, especially knowing that the token costs,
501
are actually subsidized and
502
when you take away the guard rails where it's like 200 a month for you know max tokens
503
or whatever you know the token cost is going to exponentially increase it's just my opinion
504
so these tools really help for first draft iteration
505
but it is my own personal opinion is it's going to be too expensive to replace designers day to day
506
and hey thanks for watching thanks for being here be sure to check out our website uh 3y collective academy
507
if you're a big fan of you know this video
508
and this channel really appreciate your support
509
and just thanks for being here overall remember to drop a subscribe as well uh
510
if you want to watch a video where i build an
511
entire design system click in the top left you want to watch another video
512
that i highly recommend click in the top right see you at the next one
📺 Mismo canal
✨ Recomendar Video
C1166 oraciones
AI Animation Pipeline: How I Make Cartoons 100% With AI
Business EnglishUniversity StudentsWorking Adults
C13
214 oraciones
New Skills! v1.3 brings /pr, /implement-spec, and /retro
Business EnglishUniversity StudentsWorking Adults
C14
36 oraciones
Overcoming Service Blueprinting Frustrations
Business EnglishUniversity StudentsWorking Adults
C11
163 oraciones
Brand Identity Design Challenge - Part 2 - How to create a full Behance Portfolio project
Business EnglishUniversity StudentsWorking Adults
C15
188 oraciones
Fix your Trousers Fitting Issues | Body Specific Adjustments (Part 1)
Business EnglishUniversity StudentsWorking Adults
C11
197 oraciones
Unreal Engine 5.8 - Experimental MCP Server Support Walkthrough | State of Unreal 2026
Business EnglishUniversity StudentsWorking Adults
C11
689 oraciones
Database Sharding! Designing Data-Intensive Applications chapter 6
Business EnglishUniversity StudentsWorking Adults
C14
85 oraciones
Transition to and from display: none
Business EnglishUniversity StudentsWorking Adults
C11
346 oraciones
Trust the Process: How to Design Teams That Actually Work
Business EnglishUniversity StudentsWorking Adults
C14
239 oraciones
My 4.9-Star iOS App Is Actually a Website: Here’s How I Built It
Business EnglishUniversity StudentsWorking Adults
C11
98 oraciones
Tokens vs Variables in Tokens Studio for Figma | Variables Series
Business EnglishUniversity StudentsWorking Adults
Vocabulario y notas de pronunciación para esta lección
Este vídeo tiene 512 frases y 6152 palabras para practicar shadowing. La parte hablada dura 31:58. El hablante habla rápido, unas 192 palabras por minuto, así que espera sonidos enlazados y reducidos. El 84 % de las palabras está entre las 3.000 más comunes del inglés; conviene repasar el resto antes de empezar.
Vocabulario clave de este vídeo
15 palabras del vídeo que vale la pena aprender, con su pronunciación y significado:
| Palabra | Pronunciación | Significado |
|---|---|---|
| upload verbo | /ˈʌpˌloʊd/ | subir, cargar |
| token sustantivo | /ˈtoʊkən/ | seña |
| designer sustantivo | /dɪˈzaɪnɚ/ | diseñador, diseñadora |
| cloud sustantivo | /ˈklaʊ̯d/ | nube, nimbo |
| select verbo | /sɪˈlɛkt/ | seleccionar, cribar |
| generate verbo | /ˈd͡ʒɛn.ə.ɹeɪt/ | generar |
| prompt verbo | /pɹɑmpt/ | llevar a, concitar |
| prototype sustantivo | /ˈpɹəʊtətaɪp/ | prototipo |
| font sustantivo | /fɑnt/ | tipo de letra, tipografía |
| component sustantivo | /kəmˈpoʊ.nənt/ | componente |
| edit verbo | /ˈɛdɪt/ | editar |
| adjust verbo | /əˈd͡ʒʌst/ | ajustar, arreglar |
| functionality sustantivo | funcionalidad | |
| claw sustantivo | /klɔ/ | garra |
| collective adjetivo | /kəˈlɛktɪv/ | colectivo |
Phrasal verbs que vas a escuchar
| Palabra | Pronunciación | Significado |
|---|---|---|
| sign up verbo | inscribir, alistar | |
| go ahead verbo | /ˌɡoʊ əˈhɛd/ | venga, adelante |
| go through verbo | atravesar | |
| call out verbo | especificar | |
| check out verbo | investigar, chequear | |
| come out verbo | /ˌkʌm ˈaʊt/ | revelarse, salir a la luz |
| figure out verbo | averiguar, captar | |
| leave out verbo | dejar de lado |
Gramática en este vídeo
Las estructuras que más usa el hablante, con las palabras exactas del vídeo:
| Estructura | En el vídeo |
|---|---|
| Present perfect have/has + participio pasado — una acción pasada que sigue importando ahora | I've noticed · have noticed · I've seen |
| Voz pasiva be + participio pasado — importa lo que ocurre, no quién lo hace | is called · be changed · is applied |
| Oraciones de relativo who / which + oración — información extra sobre una persona o cosa | now, which is · bug, which is · tab, which is |
Pronunciación a tener en cuenta
El hablante usa 163 contracciones y formas reducidas, como I'm, don't, we're. Dilas en su forma corta, tal como las oyes.
- Los sonidos de “th”: mathematics /mæθ(.ə)ˈmæt.ɪks/, aesthetic /ɛsˈθɛ.tɪk/
- Los sonidos de “sh” y “zh”: transaction /tɹænˈzækʃən/, recognition /ˌɹɛkəɡˈnɪʃ(ə)n/, interaction /ˌɪn.təˈɹæk.ʃən/, polish /ˈpɑ.lɪʃ/, examination /ɪɡˌzæm.ɪˈneɪ.ʃən/
- Palabras largas — cuida el acento: unlimited /ʌnˈlɪm.ɪ.tɪd/, interactive /ˌɪn.tɚˈæk.tɪv/, diagnostic /ˌdaɪ.əɡˈnɑ.stɪk/, recognition /ˌɹɛkəɡˈnɪʃ(ə)n/, comprehensive /ˌkɑm.pɹəˈhɛn.sɪv/
Cómo practicar con este vídeo
- Escucha el vídeo entero una vez sin hablar y anota las palabras que no conoces.
- Empieza a velocidad 0,75×, haz shadowing frase por frase y vuelve a la velocidad normal cuando te resulte fácil.
- Grábate y compara con el original, prestando atención a palabras como upload, token, designer.
¿Qué es la Técnica de Shadowing?
Shadowing es una técnica de aprendizaje de idiomas respaldada por la ciencia, desarrollada originalmente para la formación de intérpretes profesionales y popularizada por el políglota Dr. Alexander Arguelles. El método es simple pero poderoso: escuchas audio en inglés nativo y lo repites en voz alta de inmediato, como una sombra que sigue al hablante con solo 1-2 segundos de retraso. A diferencia de la escucha pasiva o los ejercicios de gramática, el shadowing obliga a tu cerebro y músculos de la boca a procesar y reproducir simultáneamente patrones de habla reales. Las investigaciones muestran que mejora significativamente la precisión de la pronunciación, la entonación, el ritmo, el habla conectada, la comprensión auditiva y la fluidez al hablar, convirtiéndola en una de las metodologías más efectivas para la preparación del IELTS Speaking y la comunicación en inglés en el mundo real.