Shadowing Practice: Use AI Like a Senior Designer (3 Workflows) - Learn English Speaking with Video
Creando lección...
1
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.
2
So today we're going to break down some of these workflows and how you can apply them to your own design work.
3
Let's dive in.
4
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.
5
And come follow me on X, link also down below.
6
The first concept that I want to cover is the idea of building the pieces before you actually build the page.
7
One thing we might want to start moving away from as designers is this traditional approach here,
8
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,
9
hey, build me a dashboard for this startup, build me a landing page for this fintech company.
10
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.
11
And then we spend hours and hundreds of thousands of tokens
12
prompting to refine until we get the look that we're ultimately going for.
13
We want to start moving away from this here.
14
And instead, what we want to start transitioning to, and I'm going to demo this, so bear with me, is this approach.
15
And this is a common theme across a lot of like the big senior designers who I'm chatting with,
16
where what they're doing is they're not starting off with page generation.
17
They're starting off with widget generation.
18
And whatever that most important widget is on the page, that's where they start.
19
And they produce dozens and dozens of different layouts
20
and designs based off that widget before they even think about the rest of the page.
21
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,
22
that's when they start building out the rest of the design around and then prompt to refine.
23
Whereas before we were starting off with an entire page, now we're starting off with one widget.
24
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
25
down below is try to build this entire page in one prompts.
26
But what these designers who have chatted with are doing is they're starting off with the most important widget on the page.
27
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?
28
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.
29
And to demo this, then we'll go over some next steps and look over the options in just a second.
30
But I ran this prompt inside of cloud design.
31
You can use whatever AI tool that you want to use, Grok, cloud code, codex, doesn't really matter.
32
So we ran this, I'm designing a banking dashboard where net worth is the primary widget.
33
Create eight distinctively different versions of this widget, exploring different layouts, chart styles, functionality, controls, insights, and ways of visualizing growth over time.
34
Do not design the full dashboard.
35
Focus only on the full width net worth widget.
36
Each concept should have a clearly different format, visual approach, and color scheme all remaining clean, modern, light mode, and not overly busy.
37
And to look at the results now, you can see that the options and variations are all a little bit different.
38
So different formats of data, different ways of grouping data, different ways of presenting data.
39
And if you think about it here, If I had asked, and this is the whole value of this workflow,
40
if I had asked Claude Design to build me a dashboard, it might have given me this.
41
But personally, this option here, I really like.
42
I think it's clean.
43
I think there's a lot of good options for interactions, potential for interactions.
44
I like this uh alert summarizing what's going on in plain
45
language at the bottom can you imagine the amount of prompting
46
that you would have to do to go from this
47
that it might have given you originally to something like this
48
and you're probably thinking what's that next step after you've identified the widget
49
that you really like
50
and one of the designers who i chatted with says he
51
doesn't just keep prompting inside claw design for the next widget
52
what he does is he takes a screenshot of whatever widget he identified
53
that he likes the most
54
so in this case let's choose with this option right here he then brings
55
that screenshot into figma has figma agents recreate it
56
so now he has an editable figma widget
57
that he can customize as much as he wants to apply his own design system make tweaks
58
and now he has a really good starting point for whatever page he's designing
59
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,
60
okay, if we have our net worth as our main widget, what might come up above it?
61
Do we just want a basic greeting?
62
Are there other metrics that would go along the top here?
63
What would go beneath the card?
64
So he does that critical thinking part.
65
He doesn't rely on AI to build the rest of the dashboard for him
66
because when you're working in these big corporate enterprise settings, if you're relying AI to do the thinking for you.
67
You're not going to make it very far.
68
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.
69
He doesn't do it for every widget because not every widget on the page is going to need that level of iteration.
70
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.
71
The next concept I want to cover is experiencing a UI through a persona's particular lens and using AI to do that.
72
Now, the idea of AI being able to navigate prototypes is something I've covered in the past.
73
It's not something that's net new, but with one of the designers that I spoke to,
74
I didn't realize how prevalent that was in their day-to-day work and also the method in which they're
75
like initiating some of these AI reviews.
76
And we're going to look at that.
77
And before we move into the AI review process is we're
78
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,
79
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.
80
And he told me specifically
81
that sometimes what he sees happen is ai goes through one flow it moves to the next flow
82
and then it realizes it needs to clarify something so
83
that it exits that flow
84
and then moves back to the first flow in order to make sure
85
that it captured what it needed to
86
so that's the benefit of some sort of page like this i spun this up in claw design
87
but you can use any ai tool
88
that you want to it's basically a home page for all the flows
89
that you're going to want to test the next step here is then to test both those flows using AI.
90
The person who I chatted to, they do this inside of CloudCode, but I'm using Google Antigravity.
91
What Google Antigravity is, it's essentially Google's version of CloudCode.
92
Why am I using it?
93
Because it's really good at navigating the web.
94
You can watch it do it in real time.
95
It's quite a cool experience.
96
Anyways, so I just opened up Google Antigravity and I'll put a link to that in the video description.
97
If you know how to work with CloudCode, you'll know how to work with Google Antigravity.
98
It's the same thing.
99
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
📺 Mismo canal
✨ Recomendar Video
C11
126 oraciones
How I use AI as a senior software engineer and 5 principles of AI explained in 10 minutes
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
B21
83 oraciones
User Flow vs Task Flow in UX Design
Business EnglishUniversity StudentsWorking Adults
B21
208 oraciones
Graphic Designers Were Trained to Be Replaceable
Business EnglishUniversity StudentsWorking Adults
C14
311 oraciones
Handy CSS layout patterns, and fun ways to elevate them
Business EnglishUniversity StudentsWorking Adults
C11
98 oraciones
Tokens vs Variables in Tokens Studio for Figma | Variables Series
Business EnglishUniversity StudentsWorking Adults
B21
157 oraciones
Claude Design just got MASSIVE Upgrades (2.0 Update)
Business EnglishUniversity StudentsWorking Adults
C11
346 oraciones
Trust the Process: How to Design Teams That Actually Work
Business EnglishUniversity StudentsWorking Adults
C11
135 oraciones
How to Become a UX Designer in 2025 (No Degree or Bootcamp)
Business EnglishUniversity StudentsWorking Adults
C1166 oraciones
AI Animation Pipeline: How I Make Cartoons 100% With AI
Business EnglishUniversity StudentsWorking Adults
B22
112 oraciones
DFM And DFA Explained
Business EnglishUniversity StudentsWorking Adults
C13
53 oraciones
System Design Was HARD - Until You Knew the Trade-Offs
Business EnglishUniversity StudentsWorking Adults
Why Practice Speaking with This Video?
Learning English with videos like this one is a goldmine for real-world speaking practice. The speaker uses a conversational, professional tone—perfect for shadowing technique, where you mimic their rhythm and phrasing. You’ll pick up how to explain complex ideas (like AI design workflows) clearly, which is key for business or tech contexts. Plus, the natural pauses and transitions help you build fluency, making it easier to hold your own in discussions. It’s not just about words; it’s about sounding confident when sharing ideas.
Grammar & Expressions in Context
Let’s break down useful structures from the video:
- “the way in which they're using AI”: This formal phrasing (instead of “how they use”) adds precision. Practice saying it to sound more polished in meetings.
- “start moving away from this traditional approach”: “Moving away from” is a common phrasal verb for shifting habits. Use it to talk about changing methods, like “I’m moving away from old study tricks.”
- “once they've settled on the widget”: “Settled on” means choosing after consideration. Try it in daily life: “We settled on a restaurant for dinner.”
These phrases work in both casual and professional settings, making your English more versatile.
Common Pronunciation Traps
English pronunciation can trip you up—here are tricky words from the video to master for better shadow speak:
- “widget”: Pronounce it “WID-jit,” not “WEE-jit.” The short “i” sound is key.
- “regenerate”: Stress the second syllable: “re-JEN-er-ate.” Avoid overstressing the first syllable.
- “semi-decent”: Blend the words smoothly: “SEM-ee-DEE-sent.” Don’t pause between “semi” and “decent.”
Listen closely to the speaker’s rhythm—they shorten words like “uh” (instead of “um”) and link phrases, which makes speech flow. Practice shadowing these parts to sound more natural.
By focusing on these elements, you’ll turn this video into a powerful tool for English speaking practice. Whether you’re learning for work or daily life, mimicking the speaker’s style will boost your confidence and clarity. Ready to start? Hit play and shadow along—you’ll see progress in no time!
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 |
|---|---|
| Oraciones condicionales if + oración, will/would + verbo — una condición y su resultado | if you go through this process, you'll be |
| Present perfect have/has + participio pasado — una acción pasada que sigue importando ahora | they've settled · have chatted · you've identified |
| Oraciones de relativo who / which + oración — información extra sobre una persona o cosa | person who I · for which was |
¿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.