シャドーイング練習: Use AI Like a Senior Designer (3 Workflows) - 動画で英語スピーキングを学ぶ

I spoke with senior designers at Meta, Google, and other top companies, and the way in which they're using AI and their design process is actually very different than what designers are used to.

So today we're going to break down some of these workflows and how you can apply them to your own design work.

Let's dive in.

And before we begin, check out our website, link in the video description, where I'm teaching AI workflows, design topics, and a whole lot more.

And come follow me on X, link also down below.

The first concept that I want to cover is the idea of building the pieces before you actually build the page.

One thing we might want to start moving away from as designers is this traditional approach here,

which is we start off our AI design generation process by actually building out an entire page, whether we're working with claw design or another tool,

hey, build me a dashboard for this startup, build me a landing page for this fintech company.

And then when we don't like the result, we regenerate it a couple of times till we land on a concept that's semi-decent.

And then we spend hours and hundreds of thousands of tokens

prompting to refine until we get the look that we're ultimately going for.

We want to start moving away from this here.

And instead, what we want to start transitioning to, and I'm going to demo this, so bear with me, is this approach.

And this is a common theme across a lot of like the big senior designers who I'm chatting with,

where what they're doing is they're not starting off with page generation.

They're starting off with widget generation.

And whatever that most important widget is on the page, that's where they start.

And they produce dozens and dozens of different layouts

and designs based off that widget before they even think about the rest of the page.

And then once they've settled on the widget that has the right look and feel, the right layouts, communicates what they want to communicate to the user,

that's when they start building out the rest of the design around and then prompt to refine.

Whereas before we were starting off with an entire page, now we're starting off with one widget.

And I'm going to demo this as a workflow very shortly, but just in case you're not too sure what I'm talking about in the past, what we might do. And again, I just took the screenshot from mobbing link to mob is

down below is try to build this entire page in one prompts.

But what these designers who have chatted with are doing is they're starting off with the most important widget on the page.

So once they've settled on the layout, the design, the styling for this widget, they're then working backwards and thinking, okay, what should go above this widget?

What should go below this widget and then applying the look and feel of this widget, sorry, saying widget a bunch, uh, to everything else that's actually on the page.

And to demo this, then we'll go over some next steps and look over the options in just a second.

But I ran this prompt inside of cloud design.

You can use whatever AI tool that you want to use, Grok, cloud code, codex, doesn't really matter.

So we ran this, I'm designing a banking dashboard where net worth is the primary widget.

Create eight distinctively different versions of this widget, exploring different layouts, chart styles, functionality, controls, insights, and ways of visualizing growth over time.

Do not design the full dashboard.

Focus only on the full width net worth widget.

Each concept should have a clearly different format, visual approach, and color scheme all remaining clean, modern, light mode, and not overly busy.

And to look at the results now, you can see that the options and variations are all a little bit different.

So different formats of data, different ways of grouping data, different ways of presenting data.

And if you think about it here, If I had asked, and this is the whole value of this workflow,

if I had asked Claude Design to build me a dashboard, it might have given me this.

But personally, this option here, I really like.

I think it's clean.

I think there's a lot of good options for interactions, potential for interactions.

I like this uh alert summarizing what's going on in plain

language at the bottom can you imagine the amount of prompting

that you would have to do to go from this

that it might have given you originally to something like this

and you're probably thinking what's that next step after you've identified the widget

that you really like

and one of the designers who i chatted with says he

doesn't just keep prompting inside claw design for the next widget

what he does is he takes a screenshot of whatever widget he identified

that he likes the most

so in this case let's choose with this option right here he then brings

that screenshot into figma has figma agents recreate it

so now he has an editable figma widget

that he can customize as much as he wants to apply his own design system make tweaks

and now he has a really good starting point for whatever page he's designing

so then he just fills in gaps with the rest he doesn't go back to whatever ai tool that he's using, this is where he does some of that critical thinking where he thinks,

okay, if we have our net worth as our main widget, what might come up above it?

Do we just want a basic greeting?

Are there other metrics that would go along the top here?

What would go beneath the card?

So he does that critical thinking part.

He doesn't rely on AI to build the rest of the dashboard for him

because when you're working in these big corporate enterprise settings, if you're relying AI to do the thinking for you.

You're not going to make it very far.

And then once he has this initial idea as to how the rest of the page should be structured, then he repeats that process as much as he feels that he needs to.

He doesn't do it for every widget because not every widget on the page is going to need that level of iteration.

Only where he's stuck on different treatments, where he's not too sure what the art of the possible is in certain places of that page.

The next concept I want to cover is experiencing a UI through a persona's particular lens and using AI to do that.

Now, the idea of AI being able to navigate prototypes is something I've covered in the past.

It's not something that's net new, but with one of the designers that I spoke to,

I didn't realize how prevalent that was in their day-to-day work and also the method in which they're

like initiating some of these AI reviews.

And we're going to look at that.

And before we move into the AI review process is we're

going to need what one of those designers called me as like a flow home base, where you have all the different flows on some starting page like this,

where an AI can click through that one particular flow, then when it's done, move to the next flow, and then to the next flow to compare and contrast between flows.

And he told me specifically

that sometimes what he sees happen is ai goes through one flow it moves to the next flow

and then it realizes it needs to clarify something so

that it exits that flow

and then moves back to the first flow in order to make sure

that it captured what it needed to

so that's the benefit of some sort of page like this i spun this up in claw design

but you can use any ai tool

that you want to it's basically a home page for all the flows

that you're going to want to test the next step here is then to test both those flows using AI.

The person who I chatted to, they do this inside of CloudCode, but I'm using Google Antigravity.

What Google Antigravity is, it's essentially Google's version of CloudCode.

Why am I using it?

Because it's really good at navigating the web.

You can watch it do it in real time.

It's quite a cool experience.

Anyways, so I just opened up Google Antigravity and I'll put a link to that in the video description.

If you know how to work with CloudCode, you'll know how to work with Google Antigravity.

It's the same thing.

And what I had What I did is I opened up

100

that file that we had exported from Claude design

101

and I opened it up here had it run the experience

102

locally what I then did is I then invoke the browser

103

and pasted in a link to that specific url

104

and we're going to run this prompt browse both flows let

105

me move my video bar out of the way sorry browse

106

both flows from the perspective of this persona on the url

107

above the persona is a senior financial advisor managing a large

108

book of high net worth clients highly experienced with wealth platforms time constrained and focused on quickly finding right information

109

identifying risks and hesitance on switching tools so what i'm doing here is i'm defining the

110

viewpoint that the ai should browse both those flows based on

111

and then we're giving it instructions to review each flow independently

112

before comparing them at every step explain what you believe is

113

happening what you expect to happen next where you hesitate what

114

feels unclear in your confidence from one to five ignore visual aesthetics unless they directly affect usability

115

and once complete compare both flows and recommend which better supports the persona's goal citing specific moments from the experience.

116

In the interest of time, we're keeping the prompt a little bit more brief, but depending on the details that you have on your persona,

117

you can really make this prompt much, much longer and much, much more detailed.

118

So what we're going to do, we're going to go ahead and run this.

119

Because the agent going through it happened so quickly, I wasn't able to get a recording of it.

120

But if you go through this process, you'll be able to see what I mean, how it opens up Chrome, again, ideally, and goes through like the UI, you'll be able to watch it do its tests.

121

But what we got back is the core recommendation summary here.

122

So it's recommending flow B and it gave you some reasons why.

123

And then we have this more in-depth UX evaluation analysis where it sort of talks about flow A, all the steps, what's happening in that step,

124

what it expected next, where the persona might hesitate.

125

So it did that for all the steps in flow A and then also for flow B as well.

126

Some pushback that you might be thinking with this is, oh, why don't you just ask users instead you don't always have instant access to users especially

127

if your design practice isn't super mature or you have access to users

128

but by the time you need to make a decision on a flow

129

you don't have time to go through source those users and

130

or vote interview those users come up with a synthesis based on the data

131

that you like identify so design isn't

132

so linear yes in an ideal world we would like to ask users

133

but we don't always have

134

that luxury also too in the real world design setting sometimes

135

an executive just wants you to experiment with the flow

136

that you know won't work

137

so you don't even want to put it in front of users

138

but by running one of these ai tests you're able to get some of the data

139

and be able to share that with the executive around what someone in

140

that persona might actually be thinking now also too this is

141

really just about identifying blind spots opening up your thinking i don't think you should ever take an ai suggestion

142

and take it wholeheartedly you should always double check everything

143

that it says

144

if you have access to users you can use like what

145

ai gives you as sort of this initial foundation to sort

146

of tweak some of your designs based on the initial output

147

and then share it with users so i want to like really emphasize

148

that that you should never just take an ai suggestion

149

and take it 100 as the full truth the last concept

150

that i want to talk about here supporting

151

and developer handoff i had been using ai to do this

152

in my design pro my design process in the past

153

so chatting with some of those designers is great to get

154

that level of validation now they're not using it for every element in developer handoff there's one specific one

155

that they're really using it for which was reading order over something like tab order

156

and other items so we're going to use reading order as an example there's a lot

157

that can go into developer handoff

158

and i'll link a video to a developer handoff video down below where i cover some of these concepts

159

if you're not sure Now, the assumption that designers make is that the reading order is the logical order

160

and that's just not always the case so

161

when designers are marking off reading order they generally go left to right

162

and then down because that's what makes sense in their mind

163

and that's what ultimately they're generally trained to do but

164

that is not always the case so bringing ai into this equation can really help

165

get out some of those errors before you actually ship off

166

the reading order to your development team we're gonna start out

167

here in figma now this design i just generated it from claw design had figma agents let's recreate it

168

and because it's not crazy complex the reading order might be a little bit more obvious um

169

but again just for the purposes of this exercise

170

so what i want to do is is I'm going to take a copy, a link to this design inside of Figma.

171

And then within whatever AI tool you have access to, run this basic prompt.

172

So identify the reading order based on this design.

173

Make sure you have Figma MCP connected.

174

If you don't have Figma MCP or your company hasn't enabled Figma MCP, a screenshot also just works.

175

All right.

176

Something I want to call out.

177

So identify the reading order based on this design and turn the link to that Figma page.

178

Let's run.

179

What AI did then is then provided this document

180

if it didn't provide you the document ask for the document on the sequence of the reading order

181

so it separated things out

182

so we can see the nav bar the reading order associated with it the hero the summary card

183

and when you have cards with a lot of

184

different elements that's where reading order can actually start to drift and start to change

185

so we have uh the reading order for here the reading order for the for band four

186

which is the purchasing goals you can see it's all numbered accordingly and then for asset allocation as as well.

187

It looks like it flagged some things here.

188

So let's go ahead.

189

What I'm going to do is I'm going to take a screenshot of like some of these, and then we're going to bring that into Figma.

190

And to mark things off like reading order, this is just something that I use.

191

I don't know about anyone else.

192

I didn't chat with the designers I spoke to about this, but it's a great resource.

193

It's the Web Accessibility Annotation Kit by CVS Health.

194

It's on the Figma community.

195

What this does, it has a lot of annotations here

196

that you can see where it's easy to mark off what The reading order is, as an example, so developers are pretty easy to follow.

197

So we're going to go ahead and install this

198

or open this up and then publish it as a design system so we can pull in some of those elements.

199

What you would want to do then is take the annotations from the Web Accessibility Annotation Kit.

200

So you can see here is the reading order stamp.

201

And based off the number that AI gave us, so we can see here purchasing goals is number 27.

202

We have add a goal.

203

This would be number 28.

204

So we can come in here, mark this off as number 28.

205

Oops, sorry.

206

I just need a position.

207

Right there we go uh mark this off as number 28

208

and then we can apply send this to our developers one

209

thing that's important to note is not lots of good dialogue

210

with this uh around the designers we spoke to is never ever ever just take the output

211

that ai gives you have ai add all the annotations

212

and then send that off to your developers that's where mistakes can happen

213

we still do want to do this part manually

214

but uh ai can help us with what

215

that initial order might look like especially

216

when it comes to more complex widgets more complex components um

217

but yeah that is another way in

218

which these designers are using ai in their design process hey

219

thanks for watching this one gonna have a lot more content

220

coming on working with ai have some really long videos on some great topics uh in the pipeline

221

so be sure to subscribe for

222

that also to be sure to check out our website link

223

in the video description for ui collective academy where i'm teaching ai workflows

224

and a whole lot more uh

225

if you want to watch a video where i build an

226

entire design system click in the top left you want to watch another video

227

that i highly recommend click in the top right see you soon

📺 同じチャンネル

Design with Claude Code: The Designer’s Guide

Business EnglishUniversity StudentsWorking Adults

Claude Design: The Complete Guide

Business EnglishUniversity StudentsWorking Adults

✨ おすすめ動画

126 文

How I use AI as a senior software engineer and 5 principles of AI explained in 10 minutes

Business EnglishUniversity StudentsWorking Adults

163 文

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

Business EnglishUniversity StudentsWorking Adults

288 文

Using Selection & Scan Processing tools for reverse engineering | Geomagic Design X

Business EnglishUniversity StudentsWorking Adults

83 文

シャドーイングとは？英語上達に効果的な理由

シャドーイング（Shadowing）は、もともとプロの通訳者養成プログラムで開発された言語学習法で、多言語習得者として知られるDr. Alexander Arguelles によって広く普及されました。方法はシンプルですが非常に効果的：ネイティブスピーカーの英語を聞きながら、1〜2秒の遅延で声に出してすぐに繰り返す——まるで「影（shadow）」のように話者を追いかけます。文法ドリルや受動的なリスニングと異なり、シャドーイングは脳と口の筋肉が同時にリアルタイムで英語を処理・再現することを強制します。研究により、発音精度、抑揚、リズム、連音、リスニング力、そして会話の流暢さが大幅に向上することが確認されています。IELTSスピーキング対策や自然な英語コミュニケーションを目指す方に特におすすめです。

シャドーイングのやり方: ステップ別の完全ガイドを読む →

シャドーイング練習: Use AI Like a Senior Designer (3 Workflows) - 動画で英語スピーキングを学ぶ

Design with Claude Code: The Designer’s Guide

Claude Design: The Complete Guide

How I use AI as a senior software engineer and 5 principles of AI explained in 10 minutes

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

Using Selection & Scan Processing tools for reverse engineering | Geomagic Design X

User Flow vs Task Flow in UX Design

Graphic Designers Were Trained to Be Replaceable

Handy CSS layout patterns, and fun ways to elevate them

Tokens vs Variables in Tokens Studio for Figma | Variables Series

Claude Design just got MASSIVE Upgrades (2.0 Update)

Trust the Process: How to Design Teams That Actually Work

How to Become a UX Designer in 2025 (No Degree or Bootcamp)

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

System Design Was HARD - Until You Knew the Trade-Offs

この動画で身につく英語スピーキングのポイント

聞き取りに注意すべき「つながり言葉」

ネイティブのように話すコツ: リズムとストレス

シャドーイングとは？英語上達に効果的な理由