Shadowing Practice: Design with Claude Code: The Designer’s Guide - Learn English Speaking with Video
בחר מצב תרגול
כל מצב פותח חדר תרגול במסך מלא.
269 משפטים
אם המשפטים קצרים או ארוכים מדי, לחץ על ערוך כדי להתאים אותם.
1
Everyone's obsessed with Claude Code, but for designers like you and me, what does that mean for us?
2
So today we're going to look at what it is, what to know, how to set it up, how to use it, and how to make the most of it.
3
Let's get started.
4
Real quick before we begin, if you're a big fan of myself, what we're doing here at UI Collective, you can check out our website, I'll put a link for this in the description, and consider supporting the academy where you get access to a bunch of great courses,
5
a bunch of great micro lessons, private Slack channel access, me and the team, and some great downloads too.
6
Or whether you just want to join the community, it's totally free to join the community.
7
You can ask any question on our community forum.
8
I respond to everyone that's on there.
9
Also get access to some great savings and some great resources too.
10
So whether you want to join the community or you want to support the Academy, hope to see you online.
11
Really appreciate you being here.
12
It's rock and roll.
13
Also made it a goal for the year to start posting more on X and hyping up other designers.
14
So I'll put a link to my X in the video description.
15
Come interact with me on there.
16
Share your designs.
17
I'll hype you up.
18
I'll give you feedback, whatever you need.
19
Follow me.
20
All right, my people.
21
Design and claw.
22
Using claw to design let's go over what to know let's dive right in
23
so Claude code is all the hype these days
24
if you go on x you go on any social media site
25
and you're involved in the tech space all everyone's doing just hyping up Claude code
26
and what they're able to produce with Claude code
27
but what does this mean for us as designers
28
because again a lot of us majority of us don't have
29
the level of technical know-how in order to operate some of these tools at a way in
30
which we see a lot of people online do it now it's important to note that
31
if you see people online being like oh look what i spun up with Claude code doesn't mean it's perfect in Figma.
32
Doesn't mean it's going to replace you as a designer.
33
It just means that they were able to build something cool with AI.
34
So just because Claude is for more technical users does not mean that you should ignore it.
35
The one thing you don't want to do right now in the design ecosystem is to ignore AI, ignore the tools that developers are hyped about.
36
Because eventually those tools are going to get wrapped in some type of design interface.
37
And then all of a sudden you're far behind.
38
So just because it's for more technical users does not mean that you should ignore it.
39
and we're going to cover what to do so that you're not ignoring it throughout this video, but I just want to preface with that right away.
40
Now, what is it that you should know?
41
First off, that there's no design interface for CloudCode.
42
If you're expecting CloudCode to have like a Figma type interface, sorely mistaken.
43
You can run it in cursor, you can run it in VS Code, CloudCode is a desktop app, you can run it out of your terminal, but there's no like true design interface that us as designers might be expecting.
44
Now, when prompted right, the designs it produces can be fantastic.
45
But again, it does take work to get there.
46
What you'll see on X is a lot of people posting what they produced, but they don't tell you the effort that was involved in order to get to that design.
47
It's usually just, oh, we built this with Claude Code
48
and everyone thinks they can just one shot like a five star design.
49
It looks like it came out of Google or Apple.
50
Can't do that.
51
But when prompted, right, the designs it produces can really be good.
52
You know, it's a really great model.
53
And now it also has a two-way sync with Figma, meaning I can do the prompting in Claude, push it via Figma MCP into a Figma file,
54
iterate on it in Figma, maybe show a client in Figma, make some changes in Figma, and then pull that back into Claude.
55
So you can see how powerful that is for a lot of designers and a lot of developers
56
introducing this into the workflow where I can do a lot of the heavy lifting in Claude, do a lot of the minor elements in Figma, then bring it back into Claude and iterate that way.
57
Now, Claude code is not like a short form for Claude Opus 4.6, whatever Claude model that's out there by the time you're watching this video.
58
There's a fundamental difference between the two.
59
First off, Claude code, it's sort of the energetic tool
60
that runs in your terminal or runs on like the Claude app or whatever.
61
So it has direct access to your file system tools.
62
So it can do things not just suggest things it can
63
make changes to files it can um understand things it can
64
build figma designs right like that's part of like where
65
that two async comes from
66
but claude you know model x you know in this case claude opus 4.6 it's the underlying language model of Claude.
67
So it's like the brain.
68
So it takes text in, produces text out.
69
On its own, it has no ability to actually read the files and interact with your system.
70
But Claude code can read files, update files, interact with your system in a way that the Claude model itself cannot.
71
Just wanted to clarify that because it's a pretty fundamental difference and where a lot of designers get mixed up.
72
Now let's go ahead and set up a cloud code and then connect Figma MCP.
73
So it's a little bit different than how we might have connected Figma MCP to something like Cursor in the past.
74
Now we're going to do this actually via our device terminal.
75
More on that in just a second.
76
And I'll put a link for their docs down below.
77
So just scroll down here and find the operating system that you're on.
78
I'm on a Mac OS.
79
So I would just copy this line right here because, again, this is for Mac OS.
80
So I would copy that.
81
Now I'm not too sure like how to open it on a PC
82
because I haven't used a PC in like a decade.
83
But on a Mac, like the very top bar, you're going to see a little search, not within Chrome, not within your browser, but like at like the operating system level,
84
you're going to see a search icon at the very top.
85
Hit that and then search terminal.
86
And then with this line copied here, we're going to paste this line inside of the terminal.
87
So you're going to land in something like this once you open up your terminal.
88
Again, I'm on a Mac.
89
So I'm just going to paste in that exact line
90
that we got from Claude's documentation and just hit enter unreal
91
so now you can see
92
that it's actually installed now the first time I did this I ran into issues
93
if you run into issues just take a screenshot of what terminal is showing you
94
and then just upload it to Claude or even shout gpt
95
and have it walk you through how to fix it right
96
so like if you get any issues just have ai troubleshoot
97
so I just opened up a new terminal now whenever you open up a new terminal it's just going to appear blank.
98
And if you want to open a Claude code instance, you have to type Claude as I did right here, and then just press enter.
99
So if you hit type Claude, press enter, this is going to pop up, it's going to show you where you have Claude installed.
100
And now we can start to work with our Figma MCP and do everything else that we want to do.
101
So with Claude all set up on our terminal, what we're going to want to do now is head over to Claude's documentation, I'll put a link for this in the video description
102
and just come down here just copy this command right here
103
and let's navigate back to our terminal let's just go ahead and paste in that command that we had just copied
104
into a cloud code terminal instance here so let's go ahead copy paste
105
that in and away we go
106
so assuming all was successful for you then paste in this
107
command right here I'll also put a link to this command
108
not a link sorry I'll paste the command for this in the video description as well
109
So then just go ahead and then run that.
110
So that should have showed as installed for you.
111
And it just doesn't show that for me because I actually already had it installed.
112
What you're gonna wanna do then, hit slash and then plug in.
113
And this here is going to pop up.
114
So you're under discover, then just use the arrow keys on your keyboard.
115
Just navigate towards installed.
116
And now you're gonna need to go through the process of authenticating your Figma Remote MCP server.
117
So hit enter and go through the installation process as it will go through on screen.
118
So then very similar to what you might have seen in some of our other tutorials with things like Cursor and Windsurf, you are going to see this type of agree and allow access page pop up inside of your browser.
119
So just hit agree and allow access.
120
But again, make sure you are agreeing and allow access on the right Figma account, especially for those who have multiple Figma accounts with multiple clients.
121
And just like that, now we're connected to Figma via MCP to Claude.
122
So now we can start to have some fun working with our designs.
123
So now let's just start to test our connection
124
and see what Claude is able to produce from our terminal inside of Figma.
125
So what I have just copied onto my clipboard right now is just a URL to a regular Figma file, just an empty Figma file.
126
So let's just put in build me a black and purple dashboard for a modern SaaS company,
127
whatever, something like that.
128
And then just paste in the link that we're going to want that dashboard built inside.
129
Again, there's just an easy, simple prompt just to get our feet wet here.
130
So let's go ahead now and then run that.
131
So eventually what it did is it produced, and I'm looking up here because I sort of had to move my monitor around
132
and move it on a bigger screen so I can see both at the same time, is what it did is it built the dashboard locally,
133
but then it also built the same dashboard inside of Figma here.
134
So what's nice about it is I can actually take individual elements here.
135
You know, let's select an element.
136
Let's select this and then paste, select that and then send that to Figma.
137
Now, if I was to extend this out, it just takes it as is.
138
You can see just because I'm condensed down to a screen, like it took like sort of the condensed down version.
139
But if I was just to extend this out here, if I was just to extend this out
140
and then copy this select an element I always forget to do
141
that and then send that to Figma notice how it pastes in a little bit cleaner
142
so there's something for you to take note of right there
143
so it's going to collapse this back in
144
so you can take the entire screen you can select specific elements
145
and what that allows you to do is sort of jam on individual elements here
146
and not having to jam on the entire dashboard at a time
147
so say if there's only one element
148
that I like here one group I just want to send
149
this one group to Figma for me to riff on I actually have that ability where it then takes that element.
150
So now if I really like this element, I can take the specific ones that I like that Claude coded produce and then send that to Figma.
151
Again, still looking up here just because I have a larger monitor for me to have more space on.
152
But one thing I'd like to call out is that say I want to get rid of these emojis.
153
Like I don't really like these things that are here.
154
I can delete these.
155
I can delete these.
156
And I can delete these.
157
Now notice that it doesn't update on the Claude version run locally right away.
158
So we actually need to do some prompting order to send
159
that back to clod but again there is
160
that two-way sync now i'll show you in just a sec
161
the other thing too is you're going to notice is
162
that there's still issues with perfect responsiveness again like all the other ai tools
163
that are out there and
164
that have covered other videos they don't really get it responsive perfectly first try
165
if you're expected to be like you can get a design
166
you don't need to do anything with it perfectly responsive just
167
in a way where like it's it's development handoff right out
168
of the out of the box not there yet probably get there in the future, but not there yet.
169
So let's take the changes that we made here.
170
So I'm just going to copy a link to this selection.
171
Because again, what we did is we just removed those emojis because I didn't really want it.
172
And again, you can do this at a larger scale.
173
It would have been easy to say, hey, remove like the emojis from the top metrics.
174
But let's open back up the terminal now and take this Figma URL that we just copied and have it actually,
175
you know, rebuild the dashboard or update the dashboard based on the changes that we had made.
176
So now what I can do is I can back into the terminal now.
177
So updates the dashboard cards based on the changes I made here.
178
So then I'm going to paste the link to just those Figma cards that we had tweaked.
179
So then we're just going to send that to Claude.
180
Then look what it came back with is it took the changes
181
that we made to the widget in Figma and then pushed it to like the developed side.
182
How wicked.
183
like and you i know we did
184
that on such a small scale like just removing the emojis
185
but how powerful of a workflow is
186
that especially in a larger scale where you build a design
187
and claude push it to figma iterate with your team on the widgets the components everything inside figma even
188
if the auto layout and stuff isn't perfect right away
189
and then when you're ready tell claude like here's the updated widgets included on the dashboards
190
that we can show a client a stakeholder or whoever.
191
Come on, people.
192
Unreal workflow.
193
Now, one thing that's important to note is don't condense it down as I did here.
194
Just try to fit things on one screen.
195
Use two monitors or else Claude will get confused around like maybe you want a tighter look.
196
You want to adjust the padding.
197
Just do it normally.
198
Don't condense things down as I did.
199
Now, we did all that within Terminal, But Claude also has a desktop app. Who knew?
200
So if you download the desktop app and navigate over to code
201
you can do the exact same thing as we did in terminal
202
but in their desktop app it makes things easier i started
203
with terminal to get your feet wet with terminal something us
204
designers should know all right didn't want to go the easy way out
205
but you can also do it inside of their desktop
206
app so let's do that real quick right now
207
so build me uh a black and purple dashboard uh
208
or let's go about us page us page for a modern uh sas
209
and um let me go ahead and actually just grab the same sigma url
210
so i know you can't see the page right here but i forgot to copy it to my clipboard
211
um
212
so uh for a modern sas uh put it in this stigma file all right i know prompting's not great
213
but whatever so let's go ahead let's run
214
that now now it's important to notice you should do be doing this in the same folder uh
215
but anyways let's just let's run that
216
so now my friends it did the exact same thing
217
so whether you do it in terminal you do it in
218
like the claw desktop app you know whatever you get a
219
great result it's cool i wanted to go through the terminal with you
220
because it's something
221
that we should know we should get familiar with as more
222
ai tools come out it's a great thing to add like your wheelhouse of skills
223
and things that you're familiar with
224
but again the claude desktop app also works too now i
225
know that's a little bit more of like a technical workflow it's a technical tool
226
but there is this tool
227
that came out called pencil pencil.dev pro link for the description
228
where it's more of like a desire friendly approach of working with claude code
229
so go ahead download pencil again whether it's like the mac version the windows version
230
or whatever and then let's go ahead and look at this
231
so here i am inside a pencil
232
and again you're going to have to connect like your claude subscription account
233
but you can already see as much friendlier version of you know what we just did
234
so i'm going to design with claw and just say build me a purple dashboard for a a SAS,
235
you know, platform, whatever, similar prompt, what we use before.
236
I was going to paste that in and then see what it comes back with.
237
Now, one thing that's nice about this, you can, you can see it build things in real time.
238
I know it's going a little bit slow right now. So pause.
239
So as you can see, it's building out the dashboard in real time, which is super cool.
240
You can see like, Oh, look at that.
241
Just it's adding like those dashboard cars, super unreal.
242
So you can see it's thinking about everything
243
that is building on the left hand side building it out piece by piece I'll pause the video here
244
and then come back once it's fully built
245
so look what it came back with it came back with
246
this dashboard looks pretty good now it's not perfect like look
247
this element isn't fully responsive not everything in here works as intended
248
but again neither does Figma now one thing
249
that is important to note is there's currently no way to take the designs
250
that are done here and then putting them into Figma there's no option to do
251
that just yet I imagine and Pencil's roadmap of things that they're going to be doing.
252
But this year looks pretty good.
253
It's honestly pretty, a little bit better than what you generally see a lot of like AI design tools, quote unquote, do.
254
But again, can't put it to Figma.
255
So it's great if you're just sort of like looking for inspiration and want to build things out fast in a way, sort of like an interface that works a little bit better for us designers.
256
Now, one other cool feature of Pencil, they kind of have like these pre-built like design system or like UI kits that you can choose from.
257
So if you have a certain look and feel that you're going for, you can come up here, choose a kit, and have that already applied.
258
Just a cool feature that's nice to have within Pencil.
259
All right, I know there was a ton going on in this one.
260
I jumped back and forth between a lot.
261
Thanks for staying with me.
262
If you're a big fan of myself, check out UI Collective Academy or join our free community.
263
I'll put a link for that in the description below.
264
And also too, if you want to build an entire design system, click in the top left.
265
If you want to watch another video, I highly recommend it.
266
Click at the top right.
267
Be sure to drop a subscribe, drop a like.
268
Thanks for being here.
269
See you at the next one.
הורד אפליקציה
כל מה שאתה צריך כדי לדבר בשטף
הגיית AIציון לכל משפט
תרגול IPAשלוט בכל צליל
אוצר מיליםבנה את מאגר המילים שלך
משחק אוצר מיליםלמד תוך כדי משחק
אותו ערוץ
FOR YOU
המלץ על סרטון
B21
268 משפטים
Learn 97% of Claude in Under 16 Minutes
Business EnglishWorking Adults
B21
4 משפטים
What do Design Managers do?
Business EnglishUniversity StudentsWorking Adults
B21
157 משפטים
How A Graphic Designer MUST Think in 2026 To Survive!
Business EnglishWorking Adults
B21
155 משפטים
Want To Make Your Ideas Stick? Make It Into A Meme!
Business EnglishUniversity StudentsWorking Adults
B21
90 משפטים
What Makes Expensive Websites Expensive
Business EnglishWorking Adults
B21
364 משפטים
Claude Cowork Tutorial: Build Monthly Reports in Minutes
Business EnglishWorking Adults
B21
243 משפטים
Building a Brand – Redesigning a Business Start to Finish
Business EnglishWorking Adults
B21
564 משפטים
AI-First Playbook: Do a Team's Work With AI (2026) | Peter Yang
Business EnglishWorking Adults
C13
80 משפטים
What is clean code? - Uncle Bob
Business EnglishUniversity StudentsWorking Adults
C12
11 משפטים
What are Design Patterns? | Introduction to Design Patterns and Principles | Geekific
Business EnglishUniversity StudentsWorking Adults
B21
179 משפטים
Design The Perfect Offer in Under 10 Minutes
Business EnglishWorking Adults
C11
182 משפטים
How to organize and present your design explorations for feedback
Business EnglishWorking Adults
אוצר מילים והערות הגייה לשיעור הזה
שיעור הדיבור הזה ברמה B2 מבוסס על הסרטון “Design with Claude Code: The Designer’s Guide”. המילים שחוזרות הכי הרבה: claude, figma, terminal, design, code. בסרטון הזה יש 269 משפטים ו-3530 מילים לתרגול Shadowing. הדיבור נמשך 16:10. הדובר מדבר מהר, כ-218 מילים בדקה, אז צפו לצלילים מחוברים ומקוצרים. 83% מהמילים נמצאות בין 3,000 המילים הנפוצות ביותר באנגלית; כדאי ללמוד את השאר לפני שמתחילים.
אוצר מילים מרכזי בסרטון הזה
15 המילים המתקדמות ביותר בסרטון, עם ההגייה והמשמעות שלהן:
| מילה | הגייה | משמעות |
|---|---|---|
| dashboard שם עצם | /ˈdæʃˌboɹd/ | לוח מחוונים |
| pasta שם עצם | /ˈpɑ.stə/ | פַּסְטָה |
| pencil שם עצם | /ˈpɛnsəl/ | עִפָּרוֹן |
| interface שם עצם | /ˈɪn(t)ɚˌfeɪs/ | מִמְשָׁק |
| emoji שם עצם | /ɪˈmoʊ.d͡ʒi/ | אֶמוֹגִ׳י, פַּרְצוּפוֹן |
| claw שם עצם | /klɔ/ | טוֹפֶר, טֹפֶר |
| cursor שם עצם | /ˈkɜːsə/ | סמן |
| navigate פועל | /ˈnæv.ɪ.ɡeɪt/ | נִוֵּט |
| pause שם עצם | /pɔːz/ | אתנח |
| developer שם עצם | /dɪˈvɛləpɚ/ | מְפַתֵּחַ |
| unquote | סוף ציטוט | |
| sigma שם עצם | /ˈsɪɡmə/ | סִיגְמָא |
| folder שם עצם | /ˈfoʊldɚ/ | תִּיקִיָּה |
| microwave שם עצם | /ˈmaɪkɹoʊˌweɪv/ | מִיקְרוֹגַל |
| clarify פועל | /ˈklæɹ.ɪ.faɪ/ | הבהיר |
Phrasal verbs שתשמעו
| מילה | הגייה | משמעות |
|---|---|---|
| check out פועל | בדק | |
| come out פועל | /ˌkʌm ˈaʊt/ | יָצָא |
| come back פועל | שָׁב |
משפטים שכדאי לחזור עליהם
משפטים קצרים ושלמים מהסרטון שאפשר להשתמש בהם בשיחה יומיומית:
- I respond to everyone that's on there.
- I'll give you feedback, whatever you need.
- You know, it's a really great model.
- You know, let's select an element.
- Don't condense things down as I did.
דקדוק בסרטון הזה
המבנים שהדובר משתמש בהם הכי הרבה, עם המילים המדויקות מהסרטון:
| מבנה | בסרטון |
|---|---|
| הווה מושלם (Present perfect) have/has + past participle — פעולה שקרתה בעבר ועדיין יש לה חשיבות או השפעה עכשיו | have just copied · have covered |
| סביל (Passive voice) be + past participle — הדגש הוא על מה שקורה, לא על מי שעושה את הפעולה | are hyped · was involved |
| משפטי זיקה (Relative clauses) who / which + clause — מידע נוסף על אדם או דבר | those who have · time, which is |
הגייה ששווה לשים לב אליה
הדובר משתמש ב-77 קיצורים וצורות מקוצרות, כמו you're, I'll, I'm. אמרו אותם בצורה הקצרה, כפי שאתם שומעים אותם.
- הצלילים של “sh” ו-“zh”: dashboard /ˈdæʃˌboɹd/, documentation /ˌdɑkjəmɛnˈteɪʃən/, troubleshoot /ˈtɹʌbl̩ˌʃuːt/, screenshot /ˈskriːn.ʃɑt/, subscription /səbˈskɹɪpʃən/
- מילים ארוכות — שימו לב להטעמה: documentation /ˌdɑkjəmɛnˈteɪʃən/, developer /dɪˈvɛləpɚ/, asynchronous /eɪˈsɪŋ.kɹə.nəs/, authenticate /ɔˈθɛn.tɪ.keɪt/, responsiveness /ɹɪˈspɑn.sɪv.nɪs/
צלילים שדוברי עברית מתקשים בהם:
- /w/ — שפתיים מעוגלות, לא /v/: workflow /ˈwɝkfloʊ/, widget /ˈwɪd͡ʒ.ɪt/, wheelhouse /ˈwilˌhaʊs/, microwave /ˈmaɪkɹoʊˌweɪv/, anyways /ˈɛn.iˌweɪz/
- /æ/ — פתוח יותר מה-“אֶ” העברית, לא כמו “a” ב-“cup”: dashboard /ˈdæʃˌboɹd/, navigate /ˈnæv.ɪ.ɡeɪt/, interact /ɪn.təˈɹækt/, clarify /ˈklæɹ.ɪ.faɪ/, pad /pæd/
- /r/ — הלשון לא נוגעת בשום מקום, לא ה-“ר” הגרונית: dashboard /ˈdæʃˌboɹd/, prompt /pɹɑmpt/, iterate /ˈɪtəɹeɪt/, unreal /ʌnˈɹi.əl/, responsive /ɹɪˈspɑn.sɪv/
איך לתרגל עם הסרטון הזה
- הקשיבו לכל הסרטון פעם אחת בלי לדבר, ורשמו את המילים שאתם לא מכירים.
- התחילו במהירות 0.75×, תרגלו Shadowing משפט אחר משפט, וחזרו למהירות רגילה כשזה מרגיש קל.
- הקליטו את עצמכם והשוו למקור, תוך תשומת לב למילים כמו dashboard, pasta, pencil.
מהי טכניקת השאדואינג?
שאדואינג היא טכניקת למידת שפה מבוססת מדע שפותחה במקור להכשרת מתורגמנים מקצועיים ופופולרית על ידי הפוליגלוט ד"ר אלכסנדר ארגואלס. השיטה פשוטה אך עוצמתית: אתה מקשיב לאודיו באנגלית ילידית וחוזר עליו בקול רם מיד — כמו צל העוקב אחרי הדובר עם עיכוב של 1–2 שניות בלבד. בניגוד להאזנה פסיבית או תרגילי דקדוק, שאדואינג מכריח את המוח והשרירים בפה לעבד ולשחזר דפוסי דיבור אמיתיים בו זמנית. מחקרים מראים שזה משפר משמעותית את דיוק ההגייה, האינטונציה, הקצב, הדיבור המחובר, הבנת השמיעה ושטף הדיבור — מה שהופך אותו לאחת השיטות היעילות ביותר להכנה לIELTS Speaking ולתקשורת באנגלית בעולם האמיתי.