Pratique du Shadowing: Use AI Like a Senior Designer (3 Workflows) - Apprendre l'anglais à l'oral avec la vidéo
Création de la leçon...
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
📺 Même chaîne
✨ Vidéo recommandée
C11
126 phrases
How I use AI as a senior software engineer and 5 principles of AI explained in 10 minutes
Business EnglishUniversity StudentsWorking Adults
C11
163 phrases
Brand Identity Design Challenge - Part 2 - How to create a full Behance Portfolio project
Business EnglishUniversity StudentsWorking Adults
B21
83 phrases
User Flow vs Task Flow in UX Design
Business EnglishUniversity StudentsWorking Adults
B21
208 phrases
Graphic Designers Were Trained to Be Replaceable
Business EnglishUniversity StudentsWorking Adults
C14
311 phrases
Handy CSS layout patterns, and fun ways to elevate them
Business EnglishUniversity StudentsWorking Adults
C11
98 phrases
Tokens vs Variables in Tokens Studio for Figma | Variables Series
Business EnglishUniversity StudentsWorking Adults
B21
157 phrases
Claude Design just got MASSIVE Upgrades (2.0 Update)
Business EnglishUniversity StudentsWorking Adults
C11
346 phrases
Trust the Process: How to Design Teams That Actually Work
Business EnglishUniversity StudentsWorking Adults
C11
135 phrases
How to Become a UX Designer in 2025 (No Degree or Bootcamp)
Business EnglishUniversity StudentsWorking Adults
C1166 phrases
AI Animation Pipeline: How I Make Cartoons 100% With AI
Business EnglishUniversity StudentsWorking Adults
B22
112 phrases
DFM And DFA Explained
Business EnglishUniversity StudentsWorking Adults
C13
53 phrases
System Design Was HARD - Until You Knew the Trade-Offs
Business EnglishUniversity StudentsWorking Adults
Vocabulaire et conseils d’expression pour cette leçon
Cette leçon d’expression orale de niveau C1 s’appuie sur la vidéo « Use AI Like a Senior Designer ». Les mots qui reviennent le plus souvent : design, flow, widget, page, reading. Cette vidéo contient 227 phrases et 3079 mots à répéter en shadowing. La partie parlée dure 14:18. Le locuteur parle vite, environ 215 mots par minute : attendez-vous à des liaisons et à des sons réduits. 84 % des mots font partie des 3 000 mots les plus courants en anglais ; le reste mérite d’être vu avant de commencer.
Vocabulaire clé de cette vidéo
Les 15 mots les plus avancés de la vidéo, avec leur prononciation et leur sens :
| Mot | Prononciation | Sens |
|---|---|---|
| widget nom | /ˈwɪd͡ʒ.ɪt/ | babiole, camelote |
| prompt verbe | /pɹɑmpt/ | inciter |
| dashboard nom | /ˈdæʃˌboɹd/ | tableau de bord |
| workflow nom | /ˈwɝkfloʊ/ | workflow |
| persona nom | /pɝˈsoʊnə/ | rôle social m casquette |
| screenshot nom | /ˈskriːn.ʃɑt/ | capture d'écran |
| claw nom | /klɔ/ | griffe |
| layout nom | /ˈleɪ.aʊt/ | disposition, schéma |
| annotation nom | /ˌæn.əˈteɪ.ʃən/ | annotation |
| browse verbe | /bɹaʊz/ | feuilleter, parcourir |
| demo nom | /ˈdɛm.oʊ/ | démo, démonstration |
| refine verbe | /ɹɪˈfaɪn/ | raffiner |
| tweak nom | /twiːk/ | coup sec |
| recreate verbe | /ˈɹɛk.ɹi.eɪt/ | se réjouir |
| navigate verbe | /ˈnæv.ɪ.ɡeɪt/ | naviguer |
Les verbes à particule que vous entendrez
| Mot | Prononciation | Sens |
|---|---|---|
| go through verbe | traverser | |
| open up verbe | ouvrir | |
| go ahead verbe | /ˌɡoʊ əˈhɛd/ | vas-y, allez-y |
| check out verbe | mater, regarder | |
| break down verbe | tomber en panne | |
| call out verbe | préciser, spécifier | |
| come up verbe | se montrer, sortir du bois | |
| come up with verbe | inventer, imaginer |
Des phrases à répéter
Des phrases courtes et complètes de la vidéo, à réutiliser dans la conversation de tous les jours :
- Do we just want a basic greeting?
- You're not going to make it very far.
- Why am I using it?
- I don't know about anyone else.
La grammaire de cette vidéo
Les structures que le locuteur utilise le plus, avec les mots exacts de la vidéo :
| Structure | Dans la vidéo |
|---|---|
| Phrases conditionnelles if + proposition, will/would + verbe — une condition et son résultat | if you go through this process, you'll be |
| Present perfect have/has + participe passé — une action passée qui compte encore maintenant | they've settled · have chatted · you've identified |
| Propositions relatives who / which + proposition — une précision sur une personne ou une chose | person who I · for which was |
Prononciation à surveiller
Le locuteur utilise 80 contractions et formes réduites, comme we're, I'm, they're. Prononcez-les sous leur forme courte, telles que vous les entendez.
- Les sons « th »: aesthetics /ɛsˈθɛt.ɪks/, synthesis /ˈsɪnθəsɪs/, width /ˈwɪtθ/
- Les sons « sh » et « zh »: dashboard /ˈdæʃˌboɹd/, screenshot /ˈskriːn.ʃɑt/, annotation /ˌæn.əˈteɪ.ʃən/, iteration /ˌɪt.əˈɹeɪ.ʃən/, visualize /ˈvɪʒuəˌlaɪz/
- Mots longs — placez bien l’accent: annotation /ˌæn.əˈteɪ.ʃən/, iteration /ˌɪt.əˈɹeɪ.ʃən/, regenerate /ɹiːˈd͡ʒɛnəɹeɪt/, usability /ˌjuːzəˈbɪlɪti/, wholeheartedly /ˌhoʊlˈhɑɹtədli/
Les sons difficiles pour les francophones :
- /h/ — il se souffle, il n’est pas muet: hesitate /ˈhɛz.ə.teɪt/, wholeheartedly /ˌhoʊlˈhɑɹtədli/
- /tʃ/ et /dʒ/ — à ne pas adoucir en « ch » et « j »: widget /ˈwɪd͡ʒ.ɪt/, regenerate /ɹiːˈd͡ʒɛnəɹeɪt/
- /r/ anglais — langue recourbée, sans frotter la gorge: prompt /pɹɑmpt/, dashboard /ˈdæʃˌboɹd/, screenshot /ˈskriːn.ʃɑt/, browse /bɹaʊz/, refine /ɹɪˈfaɪn/
Comment s’entraîner avec cette vidéo
- Écoutez la vidéo en entier une fois sans parler et notez les mots que vous ne connaissez pas.
- Commencez à la vitesse 0,75×, répétez phrase par phrase, puis revenez à la vitesse normale quand cela devient facile.
- Enregistrez-vous et comparez avec l’original, en faisant attention à des mots comme widget, prompt, dashboard.
Qu'est-ce que la technique du Shadowing ?
Le Shadowing est une technique d'apprentissage des langues fondée sur la science, développée à l'origine pour la formation des interprètes professionnels. Le principe est simple mais puissant : vous écoutez de l'anglais natif et le répétez immédiatement à voix haute — comme une ombre suivant le locuteur avec un décalage de 1 à 2 secondes. Les recherches montrent une amélioration significative de la précision de la prononciation, de l'intonation, du rythme, des liaisons, de la compréhension orale et de la fluidité.