ฝึกพูดภาษาอังกฤษด้วยเทคนิค Shadowing จากวิดีโอ: Claude Design: The Complete Guide

Anthropic just released Claude Design.

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.

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.

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.

Also, always adding more content to this.

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.

So whether you want to join the community, support the academy, thanks for being here.

Also too, remember to come and follow me on X.

I'll also put this in the video description.

Here we are in Claude Design.

I'm going to put a link for this and also Anthropik's blog on the topic in the video description.

Relatively straightforward stuff though.

Let's start off with the prototype.

Again, we're not here for a slide deck.

I might get into that in a future video, but not right now.

So right away, let's create a new prototype.

This is called test prototype exam.

We're testing it out for now.

One thing that's cool is the ability to select between whether you want a wireframe or a hi-fi prototype.

Now, I don't know any designers who wireframe anymore, if I'm honest.

I don't.

All my designer friends don't.

Because we all have design systems and UI kits with all the elements that we would really need.

And especially with AI now, we tend just to jump right into high fidelity because that's what most stakeholders want.

So it's a really cool idea to be able to build wireframes first to explore ideas and flows.

But personally, I just don't know how much that's going to get used.

Thinking about how designers really work these days.

Five years ago, I'd be like, oh, it's awesome.

Designers wireframe all the time.

Not really anymore, if I'm honest, just from what I know.

So let's just create this test prototype in high fidelity.

And then we land on a page like this.

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.

Let's run a small, simple prompt then.

So please build me a onboarding flow for a futuristic ed tech platform.

Please build me an onboarding flow for a futuristic ed tech mobile platform.

it's added mobile here just to specify and let's send

that what it's going to do is it's going to generate some questions about what it is

that we want to see as part of that ed tech onboarding

which is really nice because a lot of people especially designers we're not good at defining everything

that we want in an initial prompt

so these questions really help unlock what it is

that we're looking for to make better use of the ai first time around let's answer some of these now

So product or concept, let's go AI tutor.

Let's have it decide for us who the primary audience should be.

Let's pick a visual direction that resonates.

Personally, in the future, one thing I would love for Claw to do is almost provide some design system components here.

Because it doesn't really give us a whole lot to work with. Or

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.

But again, early stages, I'm sure they might get to that in the future.

let's just select uh let's go with this one for now uh

which onboarding steps so go step welcome sign up off goal uh skill level diagnostic quiz

and everything else it may be a paywall let's just see

part of the possible here device frame let's go ios how

should i present options let's go single flow um there we

go how novel experimental this is kind of cool let's maybe

set it at like an eight to see how close to this weird futuristic UX we can get.

And then what should tweaks let it be changed?

Maybe color theme accent and animation intensity.

Anything else?

No, I think that's good.

So let's continue with that and see what the results are like.

This here is what it came back with, where personally, I think this is pretty cool.

You know, a tutor that learns you first we have all these different types of colors we can play around with.

We can adjust the motion level.

So if we don't want as much motion, thinking about accessibility, we can reduce it.

If we want normal motion, we can increase it.

This is really cool stuff in terms of like, you know, most AI designs do not look this good right away.

So let's go ahead and test some things out.

This also looks pretty good.

How should Luma address you?

Let's just type in, oh, it doesn't really work too well.

Face ID component here doesn't work, but that's okay.

Let's flip through to goals.

What should I orbit you around?

You know, software and systems, you know, mathematics, design and craft.

Pretty cool.

Quick calibration.

What's our current level?

Advanced.

How deep do you want to go?

L4, L5.

Awesome.

Diagnostic.

Again, really cool stuff.

And then, you know, start our seven day free trial, welcome.

In terms of a first draft, this is awesome.

Before you start getting concerned, like, am I going to be out of a job?

This screen here, well, these six screens burned through a ton of Claude tokens.

I don't use Claude for a ton of things and I'm already on a paid plan.

So it's not as easy as just, oh, I can build anything I want.

It's going to cost 20 bucks a month.

That's not the case.

As we move into larger, more complex prototypes, applications, using a design system, we're going to look at later.

The results differ drastically.

Not every result you get with Claude Design is absolutely fantastic.

Yeah, we'll look at that later on.

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.

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

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

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

📺 ช่องเดียวกัน

Design with Claude Code: The Designer’s Guide

Business EnglishUniversity StudentsWorking Adults

Use AI Like a Senior Designer (3 Workflows)

Business EnglishUniversity StudentsWorking Adults

✨ วิดีโอแนะนำ

166 ประโยค

Brand Identity Design Challenge - Part 2 - How to create a full Behance Portfolio project

Business EnglishUniversity StudentsWorking Adults

188 ประโยค

Fix your Trousers Fitting Issues | Body Specific Adjustments (Part 1)

Business EnglishUniversity StudentsWorking Adults

197 ประโยค

Unreal Engine 5.8 - Experimental MCP Server Support Walkthrough | State of Unreal 2026

Business EnglishUniversity StudentsWorking Adults

689 ประโยค

Database Sharding! Designing Data-Intensive Applications chapter 6

Business EnglishUniversity StudentsWorking Adults

85 ประโยค

Transition to and from display: none

Business EnglishUniversity StudentsWorking Adults

346 ประโยค

Trust the Process: How to Design Teams That Actually Work

Business EnglishUniversity StudentsWorking Adults

239 ประโยค

My 4.9-Star iOS App Is Actually a Website: Here’s How I Built It

Business EnglishUniversity StudentsWorking Adults

98 ประโยค

Tokens vs Variables in Tokens Studio for Figma | Variables Series

Business EnglishUniversity StudentsWorking Adults

คำศัพท์และข้อสังเกตด้านการพูดสำหรับบทเรียนนี้

วิดีโอนี้มี 512 ประโยค และ 6152 คำ สำหรับฝึกพูดตาม ช่วงที่มีเสียงพูดยาว 31:58 ผู้พูดพูดเร็ว ประมาณ 192 คำต่อนาที จึงมีการเชื่อมเสียงและลดเสียงค่อนข้างมาก 84% ของคำอยู่ใน 3,000 คำที่ใช้บ่อยที่สุดในภาษาอังกฤษ ส่วนที่เหลือควรดูไว้ก่อนเริ่มฝึก

คำศัพท์สำคัญในวิดีโอนี้

คำที่ควรเรียนรู้ 15 คำจากวิดีโอ พร้อมคำอ่านและความหมาย:

คำศัพท์	คำอ่าน	ความหมาย
upload คำกริยา	/ˈʌpˌloʊd/	อัปโหลด
designer คำนาม	/dɪˈzaɪnɚ/	ผู้ออกแบบ, นักออกแบบ
cloud คำนาม	/ˈklaʊ̯d/	เมฆ
select คำกริยา	/sɪˈlɛkt/	คัดเลือก
font คำนาม	/fɑnt/	ฟอนต์
edit คำกริยา	/ˈɛdɪt/	แก้ไข
claw คำนาม	/klɔ/	เล็บ, กรงเล็บ
enterprise คำนาม	/ˈɛntəˌpɹaɪz/	ธุรกิจ
scroll คำนาม	/skɹoʊl/	ม้วนกระดาษ
attach คำกริยา	/əˈtæt͡ʃ/	ติด
ignore คำกริยา	/ɪɡˈnɔː/	เมิน
chart คำนาม	/t͡ʃɑɹt/	ผัง, แผนผัง
hire คำกริยา	/ˈhaɪɹ/	จ้าง
introduce คำกริยา	/ˌɪntɹəˈdus/	แนะนำ
log คำนาม	/lɔɡ/	ซุง, ท่อน

กริยาวลีที่คุณจะได้ยิน

คำศัพท์	ความหมาย
come back คำกริยา	กลับมา
log out คำกริยา	ล็อกเอาต์

ไวยากรณ์ในวิดีโอนี้

โครงสร้างที่ผู้พูดใช้บ่อยที่สุด พร้อมคำพูดจริงจากวิดีโอ:

โครงสร้าง	ในวิดีโอ
Present perfect have/has + กริยาช่อง 3 — เหตุการณ์ในอดีตที่ยังเกี่ยวข้องกับปัจจุบัน	I've noticed · have noticed · I've seen
Passive voice be + กริยาช่อง 3 — เน้นสิ่งที่เกิดขึ้น ไม่ใช่ผู้กระทำ	is called · be changed · is applied
Relative clauses who / which + อนุประโยค — ข้อมูลเพิ่มเติมเกี่ยวกับคนหรือสิ่งของ	now, which is · bug, which is · tab, which is

การออกเสียงที่ควรระวัง

ผู้พูดใช้รูปย่อและรูปลดเสียง 163 ครั้ง เช่น I'm, don't, we're ให้พูดแบบสั้นตามที่ได้ยิน

เสียง “th”: mathematics /mæθ(.ə)ˈmæt.ɪks/, aesthetic /ɛsˈθɛ.tɪk/
เสียง “sh” และ “zh”: transaction /tɹænˈzækʃən/, recognition /ˌɹɛkəɡˈnɪʃ(ə)n/, interaction /ˌɪn.təˈɹæk.ʃən/, polish /ˈpɑ.lɪʃ/, examination /ɪɡˌzæm.ɪˈneɪ.ʃən/
คำยาว — ลงเสียงหนักให้ถูกพยางค์: 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/

วิธีฝึกกับวิดีโอนี้

ฟังวิดีโอให้จบหนึ่งรอบโดยยังไม่ต้องพูด แล้วจดคำที่ยังไม่รู้จัก
เริ่มที่ความเร็ว 0.75× พูดตามทีละประโยค แล้วกลับไปใช้ความเร็วปกติเมื่อเริ่มคล่อง
อัดเสียงตัวเองแล้วเทียบกับต้นฉบับ โดยสังเกตคำอย่าง upload, designer, cloud เป็นพิเศษ

เทคนิค Shadowing คืออะไร?

Shadowing เป็นเทคนิคการเรียนรู้ภาษาที่ได้รับการรับรองทางวิทยาศาสตร์ พัฒนาขึ้นสำหรับการฝึกนักแปลมืออาชีพ วิธีการนี้เรียบง่ายแต่ทรงพลัง: คุณฟังเสียงภาษาอังกฤษจากเจ้าของภาษาและพูดตามทันที — เหมือนเงาที่ตามผู้พูดด้วยช่วงเวลาห่าง 1-2 วินาที การวิจัยแสดงว่าเทคนิคนี้ปรับปรุงความแม่นยำในการออกเสียง ทำนองเสียง จังหวะ การเชื่อมเสียง การฟังเข้าใจ และความคล่องแคล่วในการพูดได้อย่างมีนัยสำคัญ

เทคนิค shadowing: อ่านคู่มือฉบับเต็มทีละขั้นตอน →

ฝึกพูดภาษาอังกฤษด้วยเทคนิค Shadowing จากวิดีโอ: Claude Design: The Complete Guide

Design with Claude Code: The Designer’s Guide

Use AI Like a Senior Designer (3 Workflows)

AI Animation Pipeline: How I Make Cartoons 100% With AI

New Skills! v1.3 brings /pr, /implement-spec, and /retro

Overcoming Service Blueprinting Frustrations

Brand Identity Design Challenge - Part 2 - How to create a full Behance Portfolio project

Fix your Trousers Fitting Issues | Body Specific Adjustments (Part 1)

Unreal Engine 5.8 - Experimental MCP Server Support Walkthrough | State of Unreal 2026

Database Sharding! Designing Data-Intensive Applications chapter 6

Transition to and from display: none

Trust the Process: How to Design Teams That Actually Work

My 4.9-Star iOS App Is Actually a Website: Here’s How I Built It

Tokens vs Variables in Tokens Studio for Figma | Variables Series

คำศัพท์และข้อสังเกตด้านการพูดสำหรับบทเรียนนี้

คำศัพท์สำคัญในวิดีโอนี้

กริยาวลีที่คุณจะได้ยิน

ไวยากรณ์ในวิดีโอนี้

การออกเสียงที่ควรระวัง

วิธีฝึกกับวิดีโอนี้

เทคนิค Shadowing คืออะไร?