مبقتش حمل المواقع المعمولة بالذكاء الاصطناعي — Transcript

Full transcript

1. 0:00Any website made with AI today, you
2. 0:02don't need any effort to spot it. And
3. 0:04know that it was made with AI. There
4. 0:06are a few things if we put them
5. 0:08together, you'll know on your own.
6. 0:09Writing with a specific font. And that
7. 0:11purple or eggplant color. Cards with
8. 0:14rounded edges. Buttons that have a glow
9. 0:17or blink on and off. Not to mention, of
10. 0:19course, the icons next to the text. And
11. 0:21the stars, rockets, and things like
12. 0:23that. The truth is, the look isn't bad
13. 0:25in itself. But our brains have been
14. 0:27programmed, from seeing it everywhere,
15. 0:29that it's something cheap and lazy.
16. 0:31Without any effort at all, and because
17. 0:33of its abundance, almost all websites
18. 0:35made in the last two years look alike,
19. 0:37especially dark mode. As someone who
20. 0:39uses it on my laptop, I don't like it
21. 0:41anymore. Because I see it on every site
22. 0:43now, with or without reason. Alright.
23. 0:45Does AI not know how to do anything
24. 0:47else? Is this its limit, then? And why
25. 0:48does it do that anyway? If it's
26. 0:50mimicking existing websites, there are
27. 0:53so many styles. And how do you
28. 0:54practically overcome this problem?
29. 0:56That's what we'll find out, God willing
30. 0:57, in today's video. So let's get
31. 0:59started. Peace be upon you and God's
32. 1:00mercy and blessings. Welcome to a new
33. 1:02video. The issue of all AI sites
34. 1:05looking alike has a term that’s
35. 1:06repeated a lot. It's the "Sea of
36. 1:10Sameness." Sometimes they call it "AI
37. 1:14Slop." Most likely, if you have an idea
38. 1:18for a website now and open something
39. 1:19like Claude Code to build it, or any
40. 1:21other model, the first version it gives
41. 1:23you will be in that style we talked
42. 1:25about. And the truth is, this doesn't
43. 1:27happen by coincidence. No, this has a
44. 1:28reason. And the main culprit is
45. 1:31something you'll find strange: a famous
46. 1:33framework called Tailwind CSS. Let's
47. 1:35see how Tailwind CSS did this to us.
48. 1:39Tailwind is a framework for CSS, the
49. 1:41language responsible for formatting,
50. 1:43color, and shape of elements on
51. 1:45websites. It has a library called
52. 1:48Tailwind UI, consisting of a collection
53. 1:50of buttons, cards, and forms that you
54. 1:52can copy and use in your design. That
55. 1:55was back in the day, when we used to go
56. 1:57and get these things and use them,
57. 1:58before AI ruined everything. Anyway,
58. 2:00the guy who made the library, when he
59. 2:02chose a default color for these
60. 2:04elements he was displaying, chose the
61. 2:06color called Indigo 500. It's a color
62. 2:09between blue and purple, and he chose
63. 2:11it. Maybe randomly, or he saw it as a
64. 2:14neutral color. You can fit it with any
65. 2:17design without feeling like it's out of
66. 2:20context. And what happened is the
67. 2:22snowball effect. Tailwind UI became one
68. 2:25of the most famous front-end libraries
69. 2:27in the world. And thousands of
70. 2:29tutorials, templates, and open-source
71. 2:32projects on GitHub used these
72. 2:33components exactly as they were in the
73. 2:36default setting. With the color purple
74. 2:39—the buttons, the purple gradients,
75. 2:41everything, it's all purple. With the
76. 2:44rise of LLMs, which are AI models that
77. 2:46are essentially the best imitators on
78. 2:48Earth, the kings of patterns and
79. 2:50repetitions. These models started
80. 2:53training on all the material available
81. 2:54on the entire internet. And the data
82. 2:57and projects available online have this
83. 2:59pattern repeating very often. Whenever
84. 3:03it sees this look repeated in designs,
85. 3:05it considers it the best choice, the
86. 3:07one people love. So it recommends it,
87. 3:10generates it, and leans toward it. Even
88. 3:12the guy, Adam Wathan, the man who
89. 3:14created Tailwind itself, wrote a tweet
90. 3:16saying he wanted to officially
91. 3:17apologize to everyone. For making all
92. 3:20Tailwind UI buttons that specific color
93. 3:22. And that what he did led to every
94. 3:24interface generated by AI on the face
95. 3:26of the. Earth becoming purple. Of
96. 3:28course, he was joking, though. But it's
97. 3:29true, you know. That is the reason. Of
98. 3:31course, AI companies aren't just
99. 3:33sitting around watching this happen.
100. 3:34They certainly caught on to something
101. 3:36like this. And they noticed the issue.
102. 3:37And saw that it was repeating. So they
103. 3:39started putting instructions in the
104. 3:41models 'prompts to avoid the color
105. 3:43purple. But unfortunately, that didn't
106. 3:46solve the problem. Because we ended up
107. 3:48with a new, also repetitive theme. The
108. 3:50creamy background. The one with serif
109. 3:53fonts. Big headings and italicized
110. 3:55subheadings. And the accent color is
111. 3:57that brick-like or orange shade. So we
112. 3:59moved slightly away from the purple
113. 4:01pattern. And entered another pattern.
114. 4:03It will repeat in the same way dark
115. 4:05mode and the purple pattern were
116. 4:07repeated on websites before. And if you
117. 4:10went and told the AI not to use the
118. 4:12creamy color. It will indeed avoid it.
119. 4:15But it will then move you to another
120. 4:17repetitive color theme. So why are we
121. 4:19constantly shifting from one pattern to
122. 4:21another like this? The problem lies in
123. 4:23the training method of the models
124. 4:24themselves. These models are trained
125. 4:27using something called RLHF. Which is
126. 4:29known as Reinforcement Learning from
127. 4:32Human Feedback. Meaning another model
128. 4:34evaluates these answers and gives them
129. 4:37a score. And the base model learns to
130. 4:40produce the answers that get the
131. 4:41highest evaluation scores. And the
132. 4:45model that evaluates is trained on the
133. 4:47average human opinion. So when it gets
134. 4:50a strange, distinct, or different
135. 4:52answer. It gives it a lower evaluation
136. 4:55score. Not because it's bad, no. Just
137. 4:58because it's anomalous, or outside the
138. 5:00well-known and customary patterns. You
139. 5:03could say that we are training the
140. 5:05models to kill uniqueness. And if you
141. 5:08apply this to design, a unique design,
142. 5:11which we define as being different. Is
143. 5:14statistically unusual and also not
144. 5:17repetitive. So the AI model will not
145. 5:19lean toward it. That's why any design
146. 5:21you ask from AI will always end up in
147. 5:24that "average" range. And it won't give
148. 5:26you something "wow" on the first try.
149. 5:28So back to the question, is this all AI
150. 5:30can do? Doesn't it know how to do
151. 5:31anything else? No, it knows, and it
152. 5:34knows very well, too. The problem is
153. 5:36that you aren't giving it a design
154. 5:38direction to follow. So they will
155. 5:40immediately go for the thing they know
156. 5:42best, the eggplant color. Someone might
157. 5:44tell me, so what? Even if it’s
158. 5:45eggplant colored or brick colored, it
159. 5:47makes no difference. It’s working and
160. 5:49it’s correct. What more could I
161. 5:50possibly need? And by the way, part of
162. 5:51what you’re saying is very true. As
163. 5:53long as it serves the purpose and does
164. 5:54what you need, then it’s fine. Even
165. 5:56if, by design standards, it looks bad.
166. 5:58But the problem is, at certain stages,
167. 6:01design isn’t just a look for the user
168. 6:04to see. Design is sometimes the thing
169. 6:07that reflects and speaks for your
170. 6:09product or business. Even before the
171. 6:12user thinks of anything else. It is the
172. 6:14first thing their eye lands on. So when
173. 6:16this look becomes accessible, so that
174. 6:18anyone can do it. With the click of a
175. 6:21button, it becomes repetitive and worn
176. 6:23out, losing its ability to convey a
177. 6:24message or say something about your
178. 6:26product or brand because everything
179. 6:28looks the same; a pharmacy site looks
180. 6:30like a delivery site or a travel agency
181. 6:32site, with no identity or clear
182. 6:34branding. The part that bothers me even
183. 6:37more is the unjustified, purposeless
184. 6:39clutter. Try asking AI for a website
185. 6:42without specifying anything. You will
186. 6:44find every section has a heading. And
187. 6:45under the heading, a subheading. And
188. 6:47under them, three cards full of text.
189. 6:49And it looks like you don't know where
190. 6:51to go or where to start. So where do
191. 6:52you begin your journey? If you are
192. 6:54buying a product on the site. I mean,
193. 6:55if you want to. Guide the user within
194. 6:57this site to a specific thing, you
195. 6:58won't be able to. And I am not telling
196. 7:00you here that you must turn into a
197. 7:01designer. I mean, there is a minimum
198. 7:04you must know if you are building a
199. 7:06product with AI. Like knowing what a
200. 7:08visual hierarchy is. And that only one
201. 7:11thing on the page should grab the
202. 7:13user’s eye. And knowing what spacing
203. 7:15between elements means. And knowing
204. 7:17that choosing a font can change the
205. 7:19entire feel of the website. Just
206. 7:22knowing these things. The knowledge
207. 7:24itself makes a huge difference. Because
208. 7:26then you can tell the AI to move in
209. 7:27that direction. Or go in that path or
210. 7:29implement these things. And it will do
211. 7:32it for you based on its vision. And
212. 7:34here I must say that, undoubtedly,
213. 7:36these tools opened the door for many
214. 7:38people. Who found it difficult to do
215. 7:40these things before AI. Especially if
216. 7:41someone is making something simple like
217. 7:43a landing page for their course. Or,
218. 7:44for example, a teacher creating a page
219. 7:47for their students to interact with. It
220. 7:49saved them all the hassle that used to
221. 7:51happen before. And certainly, not every
222. 7:54site needs me to stop and look at its
223. 7:56design and all that. I mean, for
224. 7:58example, I have tools that I made and
225. 8:00use. I don't like their design. But as
226. 8:02long as their purpose is working, it
227. 8:03makes no difference to me. But what we
228. 8:06are talking about here is that if there
229. 8:07is the ability to improve the design,
230. 8:09why not? So the solution to the matter.
231. 8:11Where does it lie? The solution is in
232. 8:14something called productive friction.
233. 8:16The idea is that you get back to having
234. 8:18a hand in it, in some way, at certain
235. 8:19stages. So you can produce something
236. 8:22that looks humanized. Or make it look
237. 8:24like a human created it. Or as we call
238. 8:27it, "human-in-the-loop." First thing:
239. 8:29don't tell the AI what not to do or
240. 8:31what to avoid. Tell it what to do. This
241. 8:34is actually the biggest mistake people
242. 8:36make. When you tell it, for example, "
243. 8:38don't use the color purple." Or "don't
244. 8:41make it look like AI." You haven't told
245. 8:43it what to do instead. So, it will
246. 8:45default to the closest thing it knows.
247. 8:48And it gives you the same problem, just
248. 8:49in a different color. So, by...Telling
249. 8:51it not to go in a certain direction.
250. 8:53You aren't really guiding it. You're
251. 8:54actually confusing it more. You have to
252. 8:56give it a specific direction and style
253. 8:58to follow. Also, avoid vague
254. 9:00descriptions. Like, for instance, don't
255. 9:02just tell it to make the site "modern"
256. 9:04or "professional." None of that will
257. 9:05solve the problem. It sees those words
258. 9:07and descriptions you use, like "
259. 9:09professional" and so on, as neutral
260. 9:11terms. And "professional" to you is not
261. 9:13the same as it is to the AI. So you
262. 9:15must be specific in describing exactly
263. 9:17what you want. Second thing: to create
264. 9:19a good design, it starts before the
265. 9:21coding and execution phase. Meaning you
266. 9:25need a design system and colors that
267. 9:28align with your brand. And that is very
268. 9:30easy to do now with something like
269. 9:32Claude Projects. You can go in and talk
270. 9:35to it. Give it ideas. And it will build
271. 9:37you a complete visual identity. Which
272. 9:39you can then use later in the execution
273. 9:42phase. And make it stick to, for
274. 9:44example, this button style. And this
275. 9:46menu style. And these fonts. These are
276. 9:48very important things. Third thing: use
277. 9:51design skills/prompts. There is a skill
278. 9:53called "Front-end Design." This is an
279. 9:55official skill from Anthropic found
280. 9:57inside Claude. And it instructs the
281. 9:59model. It tells it in its system
282. 10:01instructions file. It tells it to
283. 10:03imagine itself as a design manager at a
284. 10:04famous small studio. And you are
285. 10:07required to create a visual identity
286. 10:09that can never be mistaken for someone
287. 10:11else's. And the client coming to you
288. 10:13has rejected previous proposals. They
289. 10:15feel they were just templates. Or
290. 10:17ready-made designs, and they are paying
291. 10:20money now for a distinct perspective,
292. 10:22so you want to take a creative risk and
293. 10:24give this guy your best work, making it
294. 10:26work in two stages: the first stage is
295. 10:28to create a design plan before writing
296. 10:30any code, including colors, fonts, and
297. 10:32everything, then the second stage is to
298. 10:34review this plan yourself, and if it
299. 10:36finds any part that could be done for
300. 10:38any other project and doesn't reflect
301. 10:41the specific business we're talking
302. 10:42about, it removes it. The best thing
303. 10:46about this skill is that it warns it
304. 10:48about styles that look too much like AI
305. 10:50. Not 100%, of course. It tells it, for
306. 10:53example, about three or four looks that
307. 10:55clearly look like AI, which are. The
308. 10:57cream background, the terracotta accent
309. 10:59, the eggplant background, and the
310. 11:01green and orange stuff. The second
311. 11:04important skill is something called "UI
312. 11:06UX Pro Max." This is an open-source
313. 11:08skill. The idea behind it is that it
314. 11:11gives it a database to search through.
315. 11:14It contains 79 styles, 192 color
316. 11:16palettes for 192 different products,
317. 11:18and a wide combination of fonts. So,
318. 11:21there's quite a lot of variety in there
319. 11:23. The most important thing is that it
320. 11:25changes depending on the field you are
321. 11:26talking about. If you tell it, for
322. 11:28example, that you want a spa website,
323. 11:30it will give you a different system and
324. 11:32visual identity. Than if you tell it
325. 11:33you want a banking application. It
326. 11:35gives you the patterns, style, and
327. 11:36colors appropriate for that business.
328. 11:38It also gives you a list of things you
329. 11:40should not do in this field. And a
330. 11:42checklist before. Delivery, which you
331. 11:44use to verify things, such as
332. 11:46responsiveness or how the site looks on
333. 11:48mobile. But keep in mind that these
334. 11:50skills are not a magic wand. You still
335. 11:53need to combine these things together
336. 11:55or assemble them. Meaning you should
337. 11:58have a specific direction already, and
338. 12:00a design system you created with cloud
339. 12:02design, for instance, and use these
340. 12:03skills to execute the design for you.
341. 12:05It is a workflow or a sequence of steps
342. 12:07that are carried out. It makes your
343. 12:10website look significantly different
344. 12:12from the websites that AI produces by
345. 12:14default. One last thing is that when
346. 12:17you want to build any website, you must
347. 12:18prepare its content first. If you have
348. 12:22already written all the site's content,
349. 12:24it will reduce the gaps that AI sees
350. 12:26and tries to fill with filler. The AI
351. 12:30won't go and create three cards and
352. 12:31stuff them with text by default unless
353. 12:33there is no content on the site,
354. 12:35because it is trying to help you. So
355. 12:37when you have written all the sentences
356. 12:39for it, the design will be built around
357. 12:41that content and will truly serve the
358. 12:43idea you want to present. If you do
359. 12:46these few things, hopefully, your site
360. 12:47will likely turn out different from the
361. 12:49rest of the sites around it. I hope
362. 12:51this video has been useful to you in
363. 12:52one way or another. And don't forget to
364. 12:54like at the end because it makes a big
365. 12:56difference in the video's reach. See
366. 12:58you in a new video, God willing, and
367. 13:00stay safe. Yeah.