3 Design Levels For a Free Claude Code Boost (People Stop At Level 1) — Transcript

Full transcript

1. 0:00If you've been watching this channel for
2. 0:01some time, you probably know that we've
3. 0:03covered a lot of design workflows and
4. 0:05tools. We've been testing all of them
5. 0:07for months and we finally figured out
6. 0:09why the same model can give you
7. 0:10something that looks completely custom
8. 0:12or something that immediately screams
9. 0:14AI-generated. It comes down to three
10. 0:16levels. Level one is designing a single
11. 0:18page and there's one thing most people
12. 0:20skip that's the entire reason their
13. 0:22output looks generic. Level two is where
14. 0:24you stop designing pages and start
15. 0:26designing systems and the workflow here
16. 0:28is completely different. And level three
17. 0:30is how we test designs against each
18. 0:32other to find the version that actually
19. 0:34works, which is the part we use on every
20. 0:37real project now. So, level one is about
21. 0:39creating a good design for a single
22. 0:41page. This is the level that most people
23. 0:43teach because it's the foundation of
24. 0:45every good design. We talked in our
25. 0:46previous video about how Opus 4.7's
26. 0:49design capability has gotten so much
27. 0:51better and a lot of the AI slop we used
28. 0:53to see is gone. Earlier, when we used to
29. 0:55give it a simple prompt like creating a
30. 0:57landing page, it would just straight up
31. 0:59take the purple and white theme and
32. 1:00build everything around it. That
33. 1:02specific pattern has gotten better. But,
34. 1:04just like any other AI model, this one
35. 1:06also converges to safe patterns. And
36. 1:08from all our testing and experimenting
37. 1:10with it, we have found that it defaults
38. 1:12to one particular style every time. So,
39. 1:14now whenever we see that style, it's a
40. 1:16dead giveaway that the site came from
41. 1:18Opus 4.7 and it's only a matter of time
42. 1:21before it becomes the next AI slop. So,
43. 1:23we need other ways to make this website
44. 1:25look better. Now, this level mostly
45. 1:26comes down to prompt engineering and how
46. 1:28we specify the app. Because if you
47. 1:30structure your prompt properly, you can
48. 1:32just one-shot the app entirely. The
49. 1:34prompt should start with the intent of
50. 1:35the website you are aiming to build,
51. 1:37then mention the non-negotiables like
52. 1:39the exact things you want in the app and
53. 1:41how you want the UI elements to look.
54. 1:43After that, you specify the color
55. 1:44system. Now, here we use OKLCH, which is
56. 1:47basically a measure of lightness,
57. 1:48chroma, and hue. Using OKLCH instead of
58. 1:51the usual RGB or HSL is better because
59. 1:53it represents colors the the the human
60. 1:55eye actually perceives them. So, it
61. 1:57handles lightness and balance better. It
62. 1:59also creates smoother gradients, unlike
63. 2:01hex codes which can produce ones that
64. 2:02look uneven. Now, once you have set the
65. 2:04color scheme, you also need to mention
66. 2:06the contrast flows. Contrast is a very
67. 2:08important factor of UI design because it
68. 2:10actually creates a hierarchy that guides
69. 2:12your eyes toward the things that matter.
70. 2:14Without explicit contrast, the model
71. 2:15treats every element as equally
72. 2:17important, which makes it hard to form
73. 2:19the visual hierarchy. And to make sure
74. 2:21the website doesn't look like AI slop,
75. 2:23you also have to control the typography
76. 2:25from the prompt. So, you define which
77. 2:26fonts are banned because of AI slop and
78. 2:29which ones to use in different areas of
79. 2:30the design. Fonts like Inter and Geist
80. 2:33have become AI slop giveaways because
81. 2:35every agent reaches for them by default.
82. 2:37So, calling them out explicitly forces
83. 2:39the model to look elsewhere. Then, you
84. 2:40define the layout and rhythm of the
85. 2:42website. But first, you need to know
86. 2:44about symmetry and asymmetry. Symmetric
87. 2:46layouts have components evenly placed on
88. 2:48the grid with a balanced look, which is
89. 2:50more suited toward professional and
90. 2:51straight designs. But for a more
91. 2:53artistic look, go for asymmetry because
92. 2:55that gives you more room to experiment.
93. 2:57It is especially good when you need to
94. 2:58use negative space since that lets the
95. 3:00design breathe. The kind of product you
96. 3:02are building decides which one fits
97. 3:04better. Then, define all the sections
98. 3:06that you want, the materials you'll use,
99. 3:08and how the website should behave
100. 3:09responsively. And the most important
101. 3:11part is mentioning the anti-patterns.
102. 3:13These are the hallmarks of AI slop like
103. 3:15the simple centered CTA, Lucid icons,
104. 3:18and gradients with glassmorphic design.
105. 3:20So, once you give this prompt to Claude
106. 3:21Code or whichever agent you are using,
107. 3:23it will analyze your app and go through
108. 3:25the implementation details. Then, it
109. 3:27will build the app just like the prompt
110. 3:29described with asymmetry because of the
111. 3:31artistic goal and proper use of negative
112. 3:33space. So, level two is about keeping
113. 3:36the same design across every page of the
114. 3:38site because most agent-generated apps
115. 3:40fall apart the moment you leave the
116. 3:42landing page. Often, when generating
117. 3:44whole apps with agents, you might have
118. 3:46encountered exactly this. The landing
119. 3:48page is mostly pretty good, but when you
120. 3:49go to the other pages, they don't follow
121. 3:51the UI style as coherently as they
122. 3:53should. The dashboard ends up with
123. 3:55different button styles, different
124. 3:56spacing, different typography, almost
125. 3:58like the agent forgot it was building
126. 4:00the same app. The other pages end up
127. 4:02looking like they're not even a part of
128. 4:04the same site, and it gives away that
129. 4:05the site was generated by an agent.
130. 4:07Sometimes the design does hold on the
131. 4:09auth pages, but then on the dashboard,
132. 4:11the style breaks completely. So, for
133. 4:13that, you need to create two of the most
134. 4:15important files, Claude.md and
135. 4:17design.md. These two files are what keep
136. 4:19the design consistent across the whole
137. 4:21site. In Claude.md, as we've talked
138. 4:23about many times, you only put your
139. 4:25project information, not the design.
140. 4:27This is because the file stays loaded in
141. 4:29the session all the time, and design
142. 4:31content there will just distract the
143. 4:33agent when it's working on something
144. 4:34else. But, it's still the key file
145. 4:36because it keeps the context of the
146. 4:38project, which informs good design. For
147. 4:40the design itself, we need a separate
148. 4:41file, which mentions everything for the
149. 4:43visual system, the layout, the colors,
150. 4:45the typography, and all the details we
151. 4:47covered in level one. The design.md
152. 4:50should be the kind of file that any
153. 4:51agent could pick up and immediately
154. 4:53understand what the visual system is.
155. 4:55And just like in the previous level, you
156. 4:57need to define the color system in OKLCH
157. 5:00here, too. To create these two files, we
158. 5:02gave Claude Code a detailed prompt
159. 5:04covering what each file needs, and it
160. 5:05generated both files for us. The
161. 5:07Claude.md is short, just containing the
162. 5:10project's details. The design.md is
163. 5:12longer with each and every detail,
164. 5:14including color codes, typography
165. 5:16choices, and everything else. But, that
166. 5:17isn't the end of the design.md. We need
167. 5:20to keep refining it over time. So, we
168. 5:22put a line at the start telling the
169. 5:23agent to add any new design value it
170. 5:25finds to this file. That way, every
171. 5:27session starts from a more refined
172. 5:29version of the design system than the
173. 5:31one before it. But, just letting Claude
174. 5:33create the design.md isn't enough
175. 5:35because what it generates doesn't follow
176. 5:37best practices properly. Google has
177. 5:39open-sourced their template for the
178. 5:41design.md file. The template also
179. 5:43contains commands to cross-verify your
180. 5:45design.md against it and flag any
181. 5:47errors. So, you can just prompt your
182. 5:49agent to iterate using those commands to
183. 5:51perfect the design.md. And this still
184. 5:53isn't the end of level two. To generate
185. 5:55good enough designs at this level, you
186. 5:57also need to audit them against existing
187. 5:59design principles. For that, there are
188. 6:00many open-source skills that do exactly
189. 6:03this. You can use any of them, but we
190. 6:04use Versal Labs skill because instead of
191. 6:07hardcoding all the principles inside the
192. 6:09skill, it points to an external source
193. 6:11that they're actively maintaining. So,
194. 6:13the principles stay up to date with
195. 6:15current best practices instead of being
196. 6:16frozen at whatever was state of the art
197. 6:18when the skill was first written. You
198. 6:20install this skill in the project, run
199. 6:22it, and your design comes out in way
200. 6:23better shape than it was before. But
201. 6:25before we move forwards, let's have a
202. 6:27word by our sponsor. So, I recently
203. 6:28started using Zilliz Cloud, and let me
204. 6:30tell you why. Most rag apps work fine
205. 6:32with a handful of docs, but the moment
206. 6:34you throw in real data, they start
207. 6:36falling apart because the setup just
208. 6:38wasn't designed to handle that kind of
209. 6:39load. Milvus is the most starred
210. 6:41open-source vector database on GitHub
211. 6:44with over 44,000
212. 6:45stars, and it's built to handle that
213. 6:47kind of load. But self-hosting means
214. 6:49managing infrastructure yourself. So,
215. 6:51that's where Zilliz Cloud comes in, the
216. 6:53fully managed version with the same API
217. 6:55that's up to 10 times faster, and you
218. 6:57can set it up in minutes without
219. 6:59changing a single line of code. So, we
220. 7:01ran a semantic search query on Zilliz
221. 7:03Cloud, and the results are actually
222. 7:04relevant because it understands meaning,
223. 7:06not just keywords, and the response time
224. 7:09is almost instant even with a large data
225. 7:11set. We also ran a recommendation query
226. 7:13given one article, it found the five
227. 7:15most similar ones across the entire data
228. 7:17set ranked by similarity in under a
229. 7:19second. And the dashboard tracks your
230. 7:21cluster performance, storage usage, and
231. 7:23data metrics including collection and
232. 7:25entity counts in real time. No credit
233. 7:27card needed, just click the link in the
234. 7:29pinned comment and try Zilliz Cloud for
235. 7:31free. So, level three is about testing
236. 7:33the design programmatically the same way
237. 7:35engineers verify code with TDD. Now, we
238. 7:38know you can't visually write tests the
239. 7:40way you do with code. With code, there
240. 7:42are clear inputs and outputs for
241. 7:43everything. Design doesn't have that
242. 7:45because it's more subjective and can't
243. 7:47be quantified like code can, but just
244. 7:49because it's subjective doesn't mean we
245. 7:51can't write tests for it. The reason TDD
246. 7:53works for code is that the test pins
247. 7:55down what the behavior should be and the
248. 7:57implementation has to satisfy that pin.
249. 7:59The same idea applies to design just
250. 8:01with different kinds of pins. In the app
251. 8:03we were building, the first step was the
252. 8:04same as before to create the claw.md and
253. 8:07design.md files before even thinking
254. 8:09about implementation. Now, tests should
255. 8:11always be written before the code. That
256. 8:13way the implementation can actually be
257. 8:15tested against them. If we write tests
258. 8:17after the implementation, the agent
259. 8:19slacks off. It just writes test cases
260. 8:21that optimize toward the existing code
261. 8:23because that code is already in its
262. 8:25context. Writing the test first forces
263. 8:27the implementation to fit the test
264. 8:29instead of the test fitting the
265. 8:30implementation. So, we use the design
266. 8:32files as the source of truth for the
267. 8:34test because these files contain all the
268. 8:36anti-patterns that we can
269. 8:38programmatically verify against. Every
270. 8:40anti-pattern in design.md becomes a test
271. 8:42case. Every color rule, every spacing
272. 8:45constraint, every typography choice gets
273. 8:47a programmatic check. We gave Claude
274. 8:49code a detailed prompt to write the test
275. 8:51cases specifying every section it should
276. 8:53focus on. Also, if you are enjoying our
277. 8:55content, consider pressing the hype
278. 8:57button because it helps us create more
279. 8:59content like this and reach out to more
280. 9:00people. With your prompt, it will write
281. 9:02all the test cases for the design of the
282. 9:04app. It writes multiple types of tests.
283. 9:07the static tests which directly check
284. 9:09for the anti-patterns we mentioned in
285. 9:11the prompt. Then there's the visual
286. 9:12testing which basically uses Playwright
287. 9:14underneath and runs regression testing
288. 9:16to make the site incrementally better.
289. 9:18It will also write test cases for other
290. 9:20components and helper functions like
291. 9:22scan and report. Now, these tests check
292. 9:24for the static anti-patterns, but design
293. 9:26testing needs something else. For that,
294. 9:28there is another tool called Visly Test
295. 9:29which is basically a CLI that conducts
296. 9:32TDD for UI. The way it works is that it
297. 9:34runs local TDD where you can check the
298. 9:36design as the code changes. So, you can
299. 9:38monitor the diffs yourself instead of
300. 9:40relying on the agent's self-monitoring.
301. 9:42You also get a better diff with metadata
302. 9:44and other details, which makes review
303. 9:46faster. Without that metadata, you are
304. 9:48just comparing two screenshots side by
305. 9:50side and hoping you spot the difference.
306. 9:52With it, Visly tells you exactly which
307. 9:54pixels changed and by how much. To use
308. 9:56it, first install the CLI by running the
309. 9:59install command from the docs. Once it's
310. 10:00set up and initialized, it's ready to
311. 10:02go. Now, just open Claude code and tell
312. 10:05it to use TDD and implement whichever
313. 10:07part of the UI you want using the Visly
314. 10:08CLI as the testing medium. When you run
315. 10:11the Visly TDD command, a local server
316. 10:13starts and monitors the screenshot
317. 10:15changes. To send the screenshots, Claude
318. 10:17basically writes separate tests with the
319. 10:19name Visly. These tests use Playwright
320. 10:21screenshotting mechanisms to push the
321. 10:23images to the viewer on the server. From
322. 10:25there, you can approve or deny the
323. 10:27design and view diffs comparing it to
324. 10:29the previous version. Each rejected diff
325. 10:31becomes feedback the agent uses to
326. 10:33adjust the next pass. Over a few
327. 10:35iterations, the design converges to what
328. 10:37you actually want instead of what the
329. 10:38agent thinks you want. Now, the prompts
330. 10:40used here can be found in AI Labs Pro
331. 10:43for this video and for all our previous
332. 10:45videos from where you can download and
333. 10:46use it for your own projects. If you
334. 10:48found value in what we do and want to
335. 10:50support the channel, this is the best
336. 10:52way to do it. The link's in the
337. 10:53description. That brings us to the end
338. 10:55of this video. If you'd like to support
339. 10:56the channel and help us keep making
340. 10:58videos like this, you can do so by using
341. 11:00the Super Thanks button below. As
342. 11:02always, thank you for watching and I'll
343. 11:04see you in the next one.