Design with Claude Code | 3 Workflows Worth Learning — Transcript

Full transcript

1. 0:00Claude Code has become a big part of how
2. 0:01I work, supporting both the design tasks
3. 0:03and also the work around them. I teamed
4. 0:05up with Anthropic to show you where I
5. 0:06use it, what I give it, how I decide
6. 0:08whether the output is any good. And real
7. 0:10quick, before we begin, check out our
8. 0:11website, link in the video description.
9. 0:12We've got about 32 great courses right
10. 0:14now on AI workflows, design topics, and
11. 0:16a whole lot more. It's all just on our
12. 0:17website, link in the video description.
13. 0:19One thing I've covered a lot in the past
14. 0:20is using Claude's skills to shape UI
15. 0:23output. But one thing people aren't
16. 0:25really using skills for is to be able to
17. 0:28look at
18. 0:29>> design deliverables,
19. 0:32like a UX flow, a design, a set of
20. 0:34widgets,
21. 0:35>> through the lens of a of a particular
22. 0:37persona. So, what I've done here is I
23. 0:39have uh attached or uploaded just like a
24. 0:42journey map and like some persona
25. 0:44documentation, things that you might
26. 0:46readily have on hand for your personas.
27. 0:49And we're going to run this prompt. Read
28. 0:51the attached persona documents and build
29. 0:52a reusable skill that reviews UX flows
30. 0:55from the perspective of the attached
31. 0:56persona. And this is the repeatable
32. 0:57process of this. We'll look at that
33. 0:59later. Identify friction based on their
34. 1:01goals, knowledge, behaviors, and
35. 1:03constraints, then recommend prioritized
36. 1:05improvements, ground findings in persona
37. 1:07evidence, label assumptions, and and
38. 1:08void implying real user testing. Here we
39. 1:10have Opus 5.5 selected as the model.
40. 1:13Let's go ahead and run. Now, what we get
41. 1:14back is this skill. So, every time we
42. 1:16need specific feedback relating to this
43. 1:18persona on anything that we're doing,
44. 1:21any type of deliverable, we can invoke
45. 1:23this skill with all these great details
46. 1:25that basically consist of everything
47. 1:27that was in those documents that I
48. 1:28shared a little bit earlier. Anyways,
49. 1:30that's besides the point. Let's go
50. 1:31ahead, let's test this out. With that
51. 1:32skill saved, here I am inside of Claude
52. 1:35Code. Now, why I'm inside of Claude Code
53. 1:37is because Claude Code can navigate a
54. 1:40browser, meaning if you have designs
55. 1:42that are, you know, ran locally,
56. 1:44what Claude Code can do is it can use
57. 1:47the browser to actually navigate those
58. 1:49designs. So, here I just have just this
59. 1:51basic AI-generated prototype. But what
60. 1:55What going to do now is have Claude Code
61. 1:57actually audit the UX.
62. 1:59Through the lens of that skill that we
63. 2:01set up. So, I called that skill and I'm
64. 2:04just going to say, "Audit the UX." Let's
65. 2:07go ahead and run. And what we get back
66. 2:08is this type of report where you have a
67. 2:10summary
68. 2:11and we sort of have the priority table
69. 2:12around what needs to change with details
70. 2:14on the individual findings, specifically
71. 2:17how that persona is going to review that
72. 2:20design. Now, one thing you're thinking
73. 2:22about is, "Okay, this is great cuz we
74. 2:24have a report, but like should I be
75. 2:26using this all the time?" Let's briefly
76. 2:28talk about how I am and am not using
77. 2:30this workflow. First off, I am not using
78. 2:32this workflow to replace users at all.
79. 2:34User feedback is always number one, but
80. 2:36design is not always so straightforward.
81. 2:38You do not always have access to users
82. 2:40when you need them. Sometimes you're
83. 2:41building a widget, you're building a
84. 2:43flow, you're testing some small things
85. 2:45out. You're going to want quick
86. 2:46feedback, but having that user readily
87. 2:48available not always possible. So, what
88. 2:52I'm said I'm doing is using this to
89. 2:53identify gaps in my thinking. After I go
90. 2:56through, I build a couple pages. It's
91. 2:57like, "All right, what am I not thinking
92. 2:58about?" Because I am not that persona. I
93. 3:00am not a financial advisor. So, I want
94. 3:03some quick feedback around the flows,
95. 3:05around the widgets, around the designs
96. 3:07that I'm putting together to avoid this
97. 3:09large group of changes at the end once
98. 3:12we start going through that actual user
99. 3:13testing. When it comes to the actual
100. 3:15doing of the design, is what a lot of
101. 3:17designers will do in Claude Design or
102. 3:19Claude Code is they'll say, "Build me
103. 3:22some uh variations
104. 3:25of a net worth
105. 3:27widget."
106. 3:28Something like that. And then the issue
107. 3:30is is that
108. 3:32the the way the data is structured is
109. 3:34all the same. Maybe all these widgets
110. 3:35then will then use a line graph, but
111. 3:37smaller elements are a little bit
112. 3:39different. But maybe you want to explore
113. 3:41completely different options. So, what
114. 3:44I'm trying to get at here, you can use
115. 3:46Claude to actually help you build an
116. 3:48initial prompt that you're then going to
117. 3:50feed Claude Code or Claude Design in
118. 3:53order to get variations that are
119. 3:55structured differently, have different
120. 3:57looks and feels, and are more up to par
121. 3:58with what you're expecting. So, let's go
122. 4:01ahead and all you have to do, run a
123. 4:02simple prompt like this. We'll get to
124. 4:03the design in just a sec.
125. 4:05I need to design a full-width net worth
126. 4:07widget for a dashboard. Don't do any
127. 4:09designs yet, but build me a prompt that
128. 4:10will generate seven to eight
129. 4:11high-quality variations in different
130. 4:13different style, data formats, so on.
131. 4:15Here we're using Opus 5.5. Let's rock.
132. 4:18So, we get this prompt. I'm going to
133. 4:19talk through some things as we actually
134. 4:20generate the actual designs. But, what I
135. 4:23really liked here, and this is what I
136. 4:24really wanted, was the variations. So,
137. 4:26we have like different options for
138. 4:27composition bar, count table, goal
139. 4:29progress, change sheet map, allocation
140. 4:31map, insight led. So, what this does is
141. 4:33ensures that everything we get is a
142. 4:34little bit different. Then there's some
143. 4:35rationale behind the variations that
144. 4:38it's going to produce. Anyways, let's go
145. 4:40ahead and let's copy this prompt. I
146. 4:41brought that prompt that we copied into
147. 4:43Claude Code and invoked this design
148. 4:44skill. So, {slash} design. Everyone
149. 4:46using Claude Code has access to that
150. 4:48design skill. And if you're going to be
151. 4:50using Opus 5.5 for the models, let's go
152. 4:52ahead and run this prompt. So, we get
153. 4:53some widgets back. Now, I just I don't
154. 4:55want to walk you through the widgets. I
155. 4:56want to talk you through what to do
156. 4:57next. But, you can see here, sorry, let
157. 4:59me condense this in, give us some more
158. 5:01space. Is we get some pretty good
159. 5:03results. All look a little bit
160. 5:04different, different styling, different
161. 5:06treatment, so on, so forth. Now, it
162. 5:08would take forever for us to generate
163. 5:09these types of visualizations on our
164. 5:11own, which is why doing this in Claude
165. 5:12Code and going through this exercise so
166. 5:14important. Now, let's say you like this
167. 5:16composition bar. What you can do is then
168. 5:19you can tell Claude Code to build a
169. 5:20route build a page around this
170. 5:22composition bar. So, it adopts the same
171. 5:24styling, same text treatment, same color
172. 5:26treatment, ways of presenting
173. 5:27information, so on and so forth. Or
174. 5:30let's say you're going into a design
175. 5:31review, because we got some annotations
176. 5:33that Claude Code gave us right away.
177. 5:36But, maybe we want to expand on some of
178. 5:38these, cuz we're going to that design
179. 5:39review, we want some more information.
180. 5:40So, what we can do is we can run this
181. 5:42prompt. As I'm taking these widgets into
182. 5:44a design review, can you expand the
183. 5:45annotations to explain the rationale
184. 5:46behind each design, including its
185. 5:48strengths, limitations, and key
186. 5:49trade-offs. Again, with Opus 5.5 as as
187. 5:51selected as the model, let's run. And
188. 5:53now, what Claude Code gave us were these
189. 5:55more in-depth annotations on the
190. 5:57rationale and strengths, the limits and
191. 5:59trade-offs of each of the different
192. 6:00variations that it gave us, which can
193. 6:02support us in a design review and help
194. 6:04us spur dialogue with different
195. 6:06stakeholders, ask important questions,
196. 6:08so on and so forth. And then, remember
197. 6:10earlier on if we made that skill
198. 6:11centered around our persona, is we can
199. 6:13use that that skill to support us when
200. 6:16we're designing and building inside of
201. 6:18Claude Code. So, what I did is I invoked
202. 6:20that skill,
203. 6:21and then, running this prompt, it could
204. 6:23really be anything, audit the designs
205. 6:25and provide a report, something as
206. 6:26simple as that, with Opus 5.5 selected
207. 6:28as the model. Let's go ahead and run.
208. 6:30And what Claude Code did is it reviewed
209. 6:32that persona skill, and then compared
210. 6:35the designs against the information that
211. 6:38was in that skill. So, here we have uh a
212. 6:41summary of top issues, priority table of
213. 6:43things that need to be changed, how each
214. 6:45variation fits the persona, so on and so
215. 6:47forth. This year, a very powerful senior
216. 6:51design workflow. Moving on. So,
217. 6:53Anthropic has this
218. 6:55design plugin, which is essentially a
219. 6:57group of design-related skills out of
220. 6:59the box, completely native to Claude,
221. 7:01native to Anthropic.
222. 7:03Now, I've gone through and I've tested
223. 7:04all of them.
224. 7:06And there's one particular that I'm
225. 7:07getting a lot of value in.
226. 7:09Now,
227. 7:10one thing I want to preface here is with
228. 7:13some of these, you should not only be
229. 7:15relying on skills. So, for something
230. 7:18like a research synthesis, there's a big
231. 7:20process that you should go through in
232. 7:22order to generate a proper research
233. 7:24synthesis. If you just take everything
234. 7:26that
235. 7:27you have, give it to Claude, run this
236. 7:30research synthesis skill, you're not
237. 7:31always going to get the best output.
238. 7:34These are some of the topics I've talked
239. 7:35about on our on our academy. I'll link
240. 7:37that in the video description. And even
241. 7:38things like UX copy, too. If there's
242. 7:40certain ways that you should be
243. 7:42structuring this, like you need to think
244. 7:43about it. You can't just ask a skill and
245. 7:46just take everything that's there cuz
246. 7:48now we're no longer designers at that
247. 7:49point. We're copy and pasters.
248. 7:52But, anyways, where I do get some value
249. 7:55from this is particularly particularly
250. 7:57this accessibility review skill. And I
251. 8:01use this in two really key areas. I'm
252. 8:03going to walk you through what these
253. 8:05are. And where I find the most value
254. 8:06here is actually generating tab order
255. 8:09and reading order reports for my
256. 8:12developers. Cuz believe it or not,
257. 8:14especially when you're working on
258. 8:15complex pages, the tab order and reading
259. 8:17order is not always as apparent. You
260. 8:18might leave things out of the reading
261. 8:20order. The tab order might be
262. 8:22actually want you might actually want it
263. 8:23to function a little bit differently
264. 8:25than it looks. It's these types of
265. 8:27things that are super important for us
266. 8:28to get right. Here I have just this
267. 8:30dashboard. Um and just to demonstrate
268. 8:32what I sort of was talking about with
269. 8:34reading order, like reading order is
270. 8:35funny because some things you might
271. 8:37actually leave out like this
272. 8:39rewards visa auto pay. You might leave
273. 8:41that out entirely in the reading order
274. 8:42and only see the date, the actual
275. 8:44expense, and the value. Something to
276. 8:45keep in mind. But, we're going to go
277. 8:47ahead and run this prompt again with
278. 8:48Opus 5.5 selected as the model.
279. 8:51So, what I did is I called accessib-
280. 8:53accessibility review skill. So, {slash}
281. 8:55accessibility review. So, make sure you
282. 8:56install that plugin with all those
283. 8:57skills first. And then, uh we're going
284. 8:59to run a simple prompt. Write the tab
285. 9:01order and reading order only in a PDF
286. 9:03format I can share with my developers.
287. 9:05Let's go ahead, run this. Real quick,
288. 9:07one thing you might be wondering is,
289. 9:08"Kirk, tab order and reading order, it's
290. 9:10basic stuff. Can't I just ask any random
291. 9:13AI tool?" No, you can't. Because look,
292. 9:15this has been running for 15 minutes.
293. 9:17Now, for something like this, I actually
294. 9:19don't mind because I want it to take its
295. 9:21time and actually do the proper QA so
296. 9:25that it gets it right the first time
297. 9:27because there's a lot that you need to
298. 9:28take into consideration with tab order
299. 9:30and reading order, the names of things
300. 9:31beyond just, "Oh, this is the particular
301. 9:34order." All right? So, we can see that
302. 9:35this prompt ran. It took 15 minutes. I
303. 9:37don't mind, but that's the
304. 9:40the higher quality bar that you're
305. 9:42getting by using that accessibility
306. 9:44skill versus just asking
307. 9:46uh
308. 9:47AI in general to identify the tab order
309. 9:49reading order. And now we get this
310. 9:50report on tab order and reading order
311. 9:52that we can hand to our developers. Now,
312. 9:53because I built that initial like
313. 9:55dashboard inside of Claude code, it
314. 9:58already had an initial tab order and
315. 9:59reading order. But, if you were bringing
316. 10:00it in in a design in from elsewhere,
317. 10:02maybe you haven't established that yet,
318. 10:04what it would do is it would give you
319. 10:05the specific order of things beyond what
320. 10:07just needs to be fixed here. So, just
321. 10:08something I want to call out, but you
322. 10:10can see here this
323. 10:11like order of problems to fix based on
324. 10:13high, medium, low. We have all this
325. 10:15great detail on things that we're going
326. 10:17to be able to hand our developers in a
327. 10:19way that they're going to be able to
328. 10:20easily consume. Hey, thanks for watching
329. 10:22this one. Going to have a lot more
330. 10:23content coming and working with AI,
331. 10:24design systems, and other things, so be
332. 10:26sure to subscribe for that. Also, too,
333. 10:27check out the website, link in the video
334. 10:29description. And uh yeah, see you at the
335. 10:31next one.