How to make sites that don't look vibecoded — Transcript

Full transcript

1. 0:00So, here's the app that I created last
2. 0:01night. In this video, we're going to
3. 0:02take your VIC coded app and turn it into
4. 0:04something where people are going to look
5. 0:05at it and be like, "Dang, are you a
6. 0:07designer? How did you do that?" And I'm
7. 0:09going to walk you through this from
8. 0:10beginner to intermediate to expert level
9. 0:12through my own process of launching an
10. 0:14app this year that ended up generating
11. 0:1638,000 views. Just unlovable, completely
12. 0:19vcoded. So, this video isn't going to be
13. 0:21for those of you who have never vioded
14. 0:23before. It's not an intro series. It's a
15. 0:25little bit more of the advanced tips and
16. 0:26tricks that I use for good design.
17. 0:28Without further ado, let's get right
18. 0:29into it. If you're new to the channel
19. 0:31and we haven't met before, hi, my name
20. 0:32is Sepair, like the fruit pair. I'm a
21. 0:34machine learning platform engineer at
22. 0:36Coinbase. I also teach vibe coding
23. 0:38classes at UC Berkeley. And finally, I'm
24. 0:40the founder of AI Scouts, which is a
25. 0:42free program. We got it right here. Uh,
26. 0:44where we teach people how to launch vibe
27. 0:46coded apps, kind of like these ones. So,
28. 0:47if you're interested, a link in that is
29. 0:49actually going to be in the description
30. 0:50as well. Free to apply. And we actually
31. 0:51give out $2,000 worth of prizes in every
32. 0:54cohort. First of all, I want to just
33. 0:55shortly talk about what to avoid. So,
34. 0:58this is a vibe coded site that you're
35. 0:59typically going to see, but what makes
36. 1:01it look viodated, and I would say it's a
37. 1:03couple of things. One are these Lucid
38. 1:06React type components. This sparkle in
39. 1:08specific you see so many times, and it's
40. 1:10kind of a dead giveaway. But in general,
41. 1:12all of these icons are ones that are
42. 1:15these V coding apps just love to use
43. 1:16them for some reason. So, I would avoid
44. 1:18using those. Swap them out for images,
45. 1:21maybe even emojis, but overuse of emojis
46. 1:23can be bad. And then the second thing is
47. 1:26this purple gradient. Like I love
48. 1:28purple. AI Scouts is actually purple,
49. 1:30but so many of these AI bioded apps are
50. 1:32purple nowadays that I would maybe try
51. 1:34to just avoid that color entirely. And
52. 1:37then thirdly is the use of gradients.
53. 1:39Purple plus gradients like this right
54. 1:42here. This little bit of app is a dead
55. 1:43giveaway that is AI. So if you do
56. 1:46nothing else, kind of get rid of these
57. 1:47components and it'll make it look at
58. 1:48least a little bit better. But now let's
59. 1:50jump into the intermediate level. Now
60. 1:52for my actual design process is a couple
61. 1:54of things. One is I like to start here
62. 1:56is this site called 21st.dev that has a
63. 1:59lot of cool animations that you can
64. 2:01actually copy paste directly into your
65. 2:02site. The thing is with this though so
66. 2:04many people have discovered this
67. 2:06website. So a lot of the websites I'm
68. 2:08actually seeing use these same
69. 2:10animations which is kind of a giveaway
70. 2:11as well. But particularly for smaller
71. 2:14things like button designs and headers
72. 2:17it's not too bad. But like this robot
73. 2:19avoid this robot. Everybody's using this
74. 2:21robot. Another site I like to use is
75. 2:23Framer. And this one, you can't really
76. 2:25copy paste the code into your vibe coded
77. 2:28site, but you can just draw inspiration.
78. 2:29I like to see things that maybe inspire
79. 2:31me a little bit and maybe take
80. 2:32screenshots of them and paste it into my
81. 2:34app. From there, what I like to do is
82. 2:36come onto Lovable or whatever vioded
83. 2:39site you have. I'll actually typically
84. 2:40use a couple. I'll use like Lovable,
85. 2:42Bolt, Emergent, and I'll take the same
86. 2:44prompt, maybe vary just slightly, and
87. 2:47paste it onto all these different sites.
88. 2:49And what that's going to do is going to
89. 2:50give me like different variations of
90. 2:52what the AI thinks the site might want
91. 2:55to look like. And the only reason I do
92. 2:57this is cuz AI is like an underrated
93. 2:59design partner. You can get a lot of
94. 3:00inspiration seeing what it generates the
95. 3:02first time. So I don't end up actually
96. 3:04using these projects. I just use it as
97. 3:06dummy projects to generate the site in
98. 3:08one prompt. See what it looks like and
99. 3:10then take screenshots of any pieces that
100. 3:12I particularly like. And my final step
101. 3:14is pulling up Excalibur or any tool you
102. 3:17want. But I come on here and I frame out
103. 3:20what I want my app to look like page by
104. 3:22page, step by step, and putting it in
105. 3:24the text here. This process takes me
106. 3:26like 80% of the time coming up with
107. 3:28everything here. But as you can see,
108. 3:30like if I liked what some of the
109. 3:31components of the previous sites were
110. 3:33generating, I'll paste it into here. And
111. 3:35then other parts I might put in the
112. 3:36words myself, right? And that's what's
113. 3:39like really going to matter when you're
114. 3:40writing these sites. The design actually
115. 3:41doesn't matter too much at the end of
116. 3:43the day. It's the content that you're
117. 3:44putting on there. So, like this video is
118. 3:46about design, but please don't skip that
119. 3:48part. Your words, your messaging is
120. 3:49going to mean a lot more than what it
121. 3:51looks like. Now, let's get into how you
122. 3:53make it like look really nice. Okay, so
123. 3:56now we're on the AI Scouts version two
124. 3:58site, which still doesn't look great to
125. 4:00be honest, but it looks a little bit
126. 4:01better than most vioded sites. And I
127. 4:03think what does this is the background
128. 4:05because you can get away with a lot of
129. 4:07like bad design techniques when you have
130. 4:09a really nice looking background. And I
131. 4:11like to set it as a static background so
132. 4:13that as you scroll through the site, you
133. 4:15have the same background all the way
134. 4:17through. And I think this tends to have
135. 4:18like a really cool effect. The way that
136. 4:21I did this, I came on to midjourney and
137. 4:23I just started prompting it about
138. 4:24whatever I wanted to look like. Kept
139. 4:25iterating, kept iterating. It actually
140. 4:28took me a lot of tries to get like
141. 4:29exactly what I wanted. But eventually I
142. 4:31got one that I liked and set it as the
143. 4:33background. You can do this with Chachi
144. 4:35PT, you can do this with Gemini, but I
145. 4:37think MidJourney's quality of photos
146. 4:39that they create is still a little
147. 4:41better in my taste, but you can go ahead
148. 4:43and try out and see what you like for
149. 4:44yourself. Okay. And then this is the
150. 4:46third version of the site that I came on
151. 4:48to minus the animations. So, how I got
152. 4:50here is one I recommend going and
153. 4:53looking at most popular UI designs.
154. 4:56What's happening right now is a lot of
155. 4:58apps are following the same like very
156. 4:59simplistic modern looking design and it
157. 5:02ends up looking dull and all the same,
158. 5:04but there's a lot of different like
159. 5:06names of designs that you probably don't
160. 5:08know, but if you pump your AI to build
161. 5:10it like that, it will. So, for example,
162. 5:12new neo brutalism is the one that I
163. 5:15ended up creating, but there's other
164. 5:16ones. There's so many like cool ones
165. 5:17that you don't see as much like Bajas.
166. 5:19This is more like uh you know, shapes
167. 5:22and stuff coming out. neomorphism. It
168. 5:25has some cool fading effects into there,
169. 5:27but you can come through these and see
170. 5:29what you like and prompt your AI to
171. 5:32follow that type of style. So, when you
172. 5:34look at this site, I think it's a couple
173. 5:35of things that set it apart from a
174. 5:36typical vioded website. One is the
175. 5:39background makes look kind of different,
176. 5:41especially when you add that animation.
177. 5:43Two is this little guy I have right
178. 5:44here. That's not something you typically
179. 5:46see on a vibe coded site. And then
180. 5:48three, this one's minor, but I think
181. 5:50just like the simple black border around
182. 5:53these white boxes, I don't even like
183. 5:55them that much, but this is the new
184. 5:57brutalism design that I picked. And it's
185. 6:00different. It's different than the
186. 6:01existing apps out there. So, I recommend
187. 6:03it even if it's like not your favorite
188. 6:05as much as the modern ones. I think
189. 6:07picking something just different helps a
190. 6:08little bit. So, how do you do this one?
191. 6:11For this guide that I created right
192. 6:13here, I just went on to chacht, put our
193. 6:15logo on here, and I was playing around
194. 6:17with it. I I wasn't even initially
195. 6:18planning on putting this on the site. I
196. 6:20just w wanted to have some fun. Asked it
197. 6:22to generate a Funko Pop character and
198. 6:24then kept playing with the prompts a
199. 6:26little bit and got the idea to have him
200. 6:27hold an iPad and then play a video onto
201. 6:30there. Right. And then once you've got
202. 6:32this image, you can just paste it into
203. 6:33Canva or whatever other AI app you have
204. 6:36for photos and have it remove the
205. 6:38background. And I just fed that directly
206. 6:40into my V coding app. Told it, hey, this
207. 6:42is the photo. Place the image right on
208. 6:44top of it. It'll be a little bit harder
209. 6:46if the screen is tilted to make it fit.
210. 6:48If you want to get it simpler, make it
211. 6:50something where the screen is just like
212. 6:51horizontal in the right dimension set
213. 6:53right away. But something along those
214. 6:55lines, you don't have to create a
215. 6:57character holding an iPad, right? Just
216. 6:59come up with some fun little design
217. 7:00matching your app that you can do that
218. 7:03will make it stand out. And then
219. 7:05secondly, for the animation of the
220. 7:07background, um I just it's super easy.
221. 7:10You you take this, you put it into
222. 7:12Gemini,
223. 7:14and then it generates a video for you.
224. 7:15Like super super easy. I didn't even
225. 7:18know Gemini could do this till recently,
226. 7:20but yeah, it's awesome. Okay. And then
227. 7:22final tip, like once you've done this,
228. 7:24the quality of the images that chat GPT
229. 7:26and Gemini create and the video is not
230. 7:29that good. So, you're going to want to
231. 7:30use something to upscale it. The one
232. 7:32I've been using is this tool called
233. 7:34upscale. You just put your video, you
234. 7:36select the image from here. Let's grab
235. 7:38some random one. Sure.
236. 7:41Let's grab these trees. You post it onto
237. 7:43here. Uh you hit upscale.
238. 7:46And it just spends a little bit of time.
239. 7:50All right. And there you see it. On the
240. 7:52right hand side is the upscaled one. On
241. 7:54the left hand side is the downscaled
242. 7:55one. You can see the difference is quite
243. 7:57drastic. And then I would take this one,
244. 7:59throw it into your site. If it's the
245. 8:01video, first generate your image,
246. 8:03upscale your image, then put it into
247. 8:05Gemini to have Gemini generate the video
248. 8:08of the image. And then finally, once we
249. 8:11have this video from Gemini that we
250. 8:13generated, we're going to take that one
251. 8:15and put it into this other tool called
252. 8:17Astra, which also helps upscale except
253. 8:19for video this time around. Both of
254. 8:21these tools unfortunately are paid, but
255. 8:23if you are trying to go for that like
256. 8:24little extra oomph on your website, you
257. 8:26might need it. Now, on the third version
258. 8:29of the website, I left a little Easter
259. 8:30egg component that I want to see if any
260. 8:32of you guys can catch that looks super
261. 8:34AI generated and you should always
262. 8:35avoid. So, if you caught it, put it down
263. 8:37in the comments. Otherwise, thanks for
264. 8:39listening to the video. Please subscribe
265. 8:40below if you're interested. I'm going to
266. 8:42be posting a lot more. Check out AI
267. 8:43Scouts if this type of content is what
268. 8:45you like and you want a community of
269. 8:47people to gather around with and vibe
270. 8:48code, launch apps, launch businesses.
271. 8:51Otherwise, this month I'm going to be
272. 8:52posting a lot more YouTube videos. So,
273. 8:54any comment that you guys post about a
274. 8:56video that you want, I promise to make
275. 8:58this month. Uh, and yeah, I'll catch you
276. 9:00guys next time.