Claude Code'un Tasarım Sorununu Çözen Skill Güncellendi (Impeccable 4.0) — Transcript

Full transcript

1. 0:00Web sesi yapmak artık dünyanın en kolay
2. 0:01işlerinden bir tanesini yapay zeka
3. 0:03söylüyorsunuz. Sizin için yapıyor. Ama
4. 0:06web siteleriyle para kazanmak bu şekilde
5. 0:08mümkün değil. Ya da kendi web sitenizin
6. 0:10farklı olmasını istiyorsanız da böyle
7. 0:13yapamazsınız. Çünkü sürekli birbirine
8. 0:15benzer yapay zekanın yaptığı belli olan
9. 0:18o morlu mavili geçişli siteler ortaya
10. 0:21çıkıyor. Ama bunu değiştirebilecek
11. 0:22yöntemler de var. Bu videoda birazcık
12. 0:24ondan bahsedeceğim. Uygulanmalı olarak
13. 0:26da nasıl kullanabileceğinizi
14. 0:28göstereceğim. Bu açık kaynak ücretsiz
15. 0:30bir ripo aslında.
16. 0:32Artık istenen şey web sitesi yapılması
17. 0:35değil. Buradan para kazanmıyor firmalar.
18. 0:38Artık istenen şey tasarım. Tasarımı iyi
19. 0:40olan web sitelere talep ediliyor ve
20. 0:43buradan para kazanılabiliyor. Yani iş
21. 0:45zorlaştı. Ama doğru adımları bilirseniz,
22. 0:47doğru şeyleri kullanırsanız da çok
23. 0:49rahatlıkla çok değerli 10.000 dolarlık,
24. 0:5220.000 dolarlık web sitelerini
25. 0:54yapabilirsiniz. Onlar da yapay zekayla
26. 0:56birlikte doğru araçları kullanarak
27. 0:58yapılıyor. Şimdi bu skillin adı
28. 1:01Impecable. Impecable'ın yaptığı şey şu.
29. 1:03Kendi söyledikleri de şey şu. Eee, iyi
30. 1:06tasarım öznel bir şey. Birazcık size
31. 1:09bağlı bir şey ama kötü tasarım öznel
32. 1:11değil. Kötü tasarım kötü tasarımdır. Ve
33. 1:13impecable skillinin yaptığı şey bu kötü
34. 1:17tasarımları yok etmek. Burada gitub
35. 1:19sayfasını görebiliyorsunuz. Şu an 59.000
36. 1:21yıldızı var Impackable'ın. Ve burada
37. 1:24yukarıda da bir sitesi var. Bakacağız
38. 1:25birlikte. Temel olarak kötü tasarım
39. 1:28kalıplarını, izlerini izliyor ve bunları
40. 1:32yok ediyor, siliyor ve bunları sildiği
41. 1:34için size iyi tasarıma yer kalıyor. İyi
42. 1:36tasarım kararını yine siz vereceksiniz.
43. 1:39Yani bu skili kullanan herkes birbirinin
44. 1:41kopyası içerikler üretmiyor. Siteler
45. 1:45çıkmıyor ama E'ın o bıraktığı kötü
46. 1:47tasarım izlerini sildiği için sizin
47. 1:50kararınızla oluşan o eşsiz tasarıma yer
48. 1:53açmış oluyor.
49. 1:55Bu se sadece bir yerde çalışan bir şey
50. 1:57değil aslında. Aan oraya
51. 1:58taşıyabiliyorsun. Bir tasarım dili
52. 2:01aslında. Bir tasarım dilini taşıdığını
53. 2:03düşünebiliriz. Impackable'ı daha önce
54. 2:05kullanmış olabilirsin. Ne değişti dersen
55. 2:08yeni modları var. Live modu var. Live
56. 2:10modu aslında canlı şekilde düzenleme
57. 2:12yapmanı sağlıyor. Her seferinde
58. 2:14terminale dönmen gerekmiyor. Site
59. 2:15üzerinde yapabiliyorsun. Bir de Words
60. 2:18dedikleri aslında tasarım dünyaları var
61. 2:20topluluk tarafından üretilen ve o
62. 2:22tasarım dünyalarının içinde gezip o
63. 2:24tasarım dünyalarını kullanabiliyorsun.
64. 2:26Kendi dünyana aktarabiliyorsun. Burada e
65. 2:29impecable. sitesinde burada
66. 2:31görebilirsin. Live modu burada gördüğün
67. 2:34gibi nasıl çalışacağını birlikte
68. 2:36bakacağız ama burada örneklerini
69. 2:38veriyor. Burada görebilirsin. Ve şurada
70. 2:41bir değişiklik yapmak istediğinde nasıl
71. 2:43değiştireceğini söylüyor.
72. 2:45Burada da Words'ü görebiliyorsun. Birçok
73. 2:47birbirinden farklı eee words var ve
74. 2:50burada hepsini görebilirsin ya da burada
75. 2:53değiştirebilirsin. Mesela buna gelelim.
76. 2:56Tasarımın güzelliği gerçekten
77. 2:59çok güzel. Gerçekten güzel. Şimdi skill
78. 3:02sayfasına geldiğinizde bu skillin
79. 3:03özelliklerini görebiliyorsunuz. Ama dört
80. 3:06kısma ayırırsak birinci grup kurma
81. 3:09özellikleri var. Yani nasıl
82. 3:10kuracağınızla ilgili eee skiller var.
83. 3:14Eee yani komutlar var. Eee ikinci grupta
84. 3:17ayarlamalar var. Ayarlamalarda var olanı
85. 3:20aslında değiştiriyorsun. Daha sade
86. 3:22yapıyorsun. Daha canlı yapıyorsun. Böyle
87. 3:24ayarlar yapabiliyorsun. Üçüncü grup
88. 3:27denetleme var. Bitmiş için kontrol
89. 3:29ediyorsun, eleştiriyorsun, değişiklik
90. 3:31istiyorsun. 4.üncü grubumuz da
91. 3:33genişletme. Aslında işi yeni bir boyuta
92. 3:35taşıyabilirsin. Bir hareket
93. 3:36ekleyebilirsin. Bunların hepsi de
94. 3:38genişletme oluyor. Artık burada tasarım
95. 3:40katmanlarıyla çalışıyorsun. Eee mesela
96. 3:43AI tasarımı bir yıl önce başka bir
97. 3:45şeyken şimdi bambaşka bir şey. O yüzden
98. 3:47katman bilgisini oturtmak mantıklı
99. 3:50oluyor. Şimdi göstereceğiz canlı canlı.
100. 3:52Nasıl olacağını da göreceksiniz ve
101. 3:53kuracağız birlikte. Ama kurmadan önce
102. 3:56eee bir şey söylemem lazım. Bu araç
103. 3:59belirli bir not sürümünün üstünde
104. 4:00olmasını istiyor. O yüzden en son e nodu
105. 4:03indirirseniz en önemlisi o olur. Buradan
106. 4:06da şey yapabilirsiniz.
107. 4:08Eee indirebilirsiniz aslında. Kuracağız.
108. 4:11Eğer güncellemezseniz nodu araç bozuk ya
109. 4:13da hatalı çalışmıyor diye
110. 4:15düşünebilirsiniz. Burada komutlar var.
111. 4:16Bu şekilde terminale gelip terminale
112. 4:19gelip böyle yukarıda kaldı böyle şey
113. 4:21yapabilirsiniz. Kurabilirsiniz.
114. 4:24Tek komutla bende kurulu aslında. E
115. 4:27impecable 3.6. Bakalım. Yes dedik. Ok.
116. 4:31Yes dedik. Yüklüyoruz. Ya da daha
117. 4:33kolayını söyleyeceğim terminali
118. 4:35yabancıysanız
119. 4:37eee burada şey oldu gördüğünüz gibi. Aı
120. 4:40coding ages agentında slash impecable
121. 4:43deyince artık çalışıyor dedi ama gidip
122. 4:45bu ripon adresini de verebilirsiniz.
123. 4:48Nerede? Burada. Ve geldiniz. Cloud kodu
124. 4:51açık burada. Bunu
125. 4:53e benim için bur dedik. Bu da yeterli
126. 4:56olacaktır. Anlayacak, kuracak,
127. 4:58güncelleme gerekiyorsa da yapacak. Ya da
128. 5:00tam bir promptta göstereyim. Eee, bunu
129. 5:03benim için yükle. Eğer başlamadan önce
130. 5:06node versiyonunu söyle. Eğer gerekiyorsa
131. 5:09arttır. Eee, benim herhangi bir skillimi
132. 5:12değiştirmedi diyebilirsin aslında. Bu
133. 5:14şekilde de verebilirsin. Oldukça e,
134. 5:17rahat şekilde cloud code senin için
135. 5:18kurar. Zaten gördüğün gibi kontrol etti.
136. 5:22Şimdi bu olurken bir de isteğe bağlı bir
137. 5:24katman bağlayacağız. İsteğe bağlı katman
138. 5:26ne? Aslında burada bizim için şablonlar
139. 5:29üretecek impecable ama e bir görsel
140. 5:32üretim modeline bağlamazsak şablon
141. 5:34üretmeyebilir. Ben burada Hickfield'ı
142. 5:36vereceğim ama isterseniz KY AI FI
143. 5:39herhangi bir noktadan da bağlantı
144. 5:41verebilirsiniz, API verebilirsiniz.
145. 5:42Burada MCP ile aslında daha kolay
146. 5:45ulaşsın modellere diye Xal'ı veriyorum.
147. 5:48Eee daha pahalıya gelecektir böyle.
148. 5:50Şimdi burada şablonlar var. Dediğim gibi
149. 5:54şablonları görsellerle doldurabilmesi
150. 5:57için bir yerden bir görsel üretimi
151. 5:58yapabilmesi gerekiyor. Bunu verseniz çok
152. 6:00daha eee net anlarsınız. Şablonu tasarım
153. 6:04dili ona uygun şekilde yapılabilir.
154. 6:07Bitsin bunu ki bitti sanırım.
155. 6:11Bitsin bunu yapalım. Bitince aktif olsun
156. 6:14diye bunu da verdim. Aradan çıksın.
157. 6:17Şimdi gerçek iş başlıyor. Her şey
158. 6:19kuruldu. slashimpecable init diyorum ve
159. 6:22başlayacak ve bana soru sormaya
160. 6:23başlayacak şimdi. Hatta şöyle yapalım.
161. 6:25Burada yapmayalım. Bir saniye. Yeni bir
162. 6:27klasörde çalışsın. Şimdi bir komut
163. 6:30verdim. Yeni klasör açtık. Burada
164. 6:33çalışsın ki başka şeyler bozulmasın.
165. 6:36Şimdi slash
166. 6:39init diyorum ve çalışmaya başlayacak.
167. 6:41Tamam. Gördüğün gibi interview
168. 6:44başlayacak. Yani bana soru soracak. Ne
169. 6:46inşa etmekle istediğim. Ne inşa etmek
170. 6:49istediğimi ben buraya yazıyorum. Bir
171. 6:51landing page diyorum. Stack kendin karar
172. 6:54ver diyebilirsin ya da HTML CSS nexts
173. 6:58diyebilirsin.
174. 7:00Ben de kendin karar ver diyorum.
175. 7:02Impecable. Eee, evet. Update edeyim mi
176. 7:06diyor. Update diyeceksin.
177. 7:08Update diyecek. Şimdi şimdi burada
178. 7:11söyleyebileceğim şey neyi biliyorsan
179. 7:12söyle. Bilmediğin yerde bilmediğini
180. 7:14söyle. E bu skile ve elinde görseller
181. 7:18varsa, marka kimliği varsa, beğendiğin
182. 7:20ya da kendi sayfanın eski hali vesaire
183. 7:23varsa, bir şeyler varsa ver. Yoksa neler
184. 7:26olmasını istediğini söyle, ürettir
185. 7:28aslında. Eee, tamamen konuşarak
186. 7:31ilerletebiliyorsun.
187. 7:33Bende yok. Bir landing page 5 dedim.
188. 7:35Very sen uydur dedim. Aslında kendisi
189. 7:38uyduracak. Şimdi şimdi işin en güzel
190. 7:41kısmına geldik. Çünkü bizim için
191. 7:43dünyaları üretti. Bu dünyalara tek tek
192. 7:45bakıp seçeceğiz. Mesela burada gördüğün
193. 7:47gibi açalım hemen.
194. 7:50Birinci dünyamız bu. Gördüğünüz gibi bir
195. 7:53tasarım şablonu var aslında. Hepsine
196. 7:56bakalım. İkincisi gayet de güzel
197. 7:58duruyor. Üçüncüsü renkler çok güzel. Ben
198. 8:01üçüncüden gideceğim ama hepsi
199. 8:03farkındaysanız birbirinden farklı
200. 8:05tasarım dillerinde. Bu fazla geldi.
201. 8:08Bakalım. Bu da çok güzel mesela. Bu da
202. 8:10çok güzel olmuş. Gerçekten güzel olmuş.
203. 8:13Bayağı başarılı buldum bundu da. Bu
204. 8:15kaçıncıydı?
205. 8:175inci. 1. Bu mu? 2. Beğendim.
206. 8:215i de ikisinden biriyle gidebiliriz.
207. 8:25Eee 6'ya da baktık mı? 6'ya da baktık.
208. 8:27Evet. Birçok açı getirdi farkındaysanız.
209. 8:31Birden fazla açıdan getirdik. Şimdi eee
210. 8:34biz seçeceğiz ve bir şey söyleyeceğiz.
211. 8:36hangisi iyi, hangisinde ne yapmamız
212. 8:38gerekiyor diye. Eee,
213. 8:41diyorum ki 5 hatta beşinciyi yapalım.
214. 8:43Beşinciyi beğendim dedim. Eee, birazcık
215. 8:47daha sak varyasyonları ver 5şinci ile
216. 8:49ilgili birazcık daha e sakin olsun. Daha
217. 8:52az element olsun ekranda dedim. Bakalım
218. 8:55ne yapacak. Şimdi başka bir tarafa
219. 8:57geldik. Gördüğün gibi bana seçenekler
220. 9:00açtı. kendisi açtı bunları ve buradan
221. 9:03eee hangisini yapmak isteyeceğimi
222. 9:06soruyor. Rendering diyor şu anda. E
223. 9:08render olduğunda göreceğiz. Burada one
224. 9:11entry page witness line tip plot diye
225. 9:14kendisi eee çıkardı. Oldukça enteresan
226. 9:17ve burada başka şeyler de
227. 9:18yapabiliyorsun. Buradan opsiyonel
228. 9:21prompllar da verebiliyorsun. Aslında ne
229. 9:23yaptığını da söyleyeyim. Görsel üretiyor
230. 9:26burada bizim için. Şurada Hickfield'a
231. 9:28kendisi bağlandı ve görsel üretiyor.
232. 9:31Bakalım render gelince göreceğiz.
233. 9:34Seçenekler verdi. Bu tarz kağıt tasarımı
234. 9:37daha mı iyi dedi bu? Okey. Bunu
235. 9:40beğendim. Buradan gördüğün gibi eee
236. 9:43yazabiliyorsun, reroll yapabiliyorsun ya
237. 9:46da boulder hand'e geliyorsun. Mesela
238. 9:49reroll yaptık. Eee ve kendi isteğimizle
239. 9:52söyledik. Orijinal beşinciye daha uygun
240. 9:55olsun dedik. Bu sefer 5inciye daha uygun
241. 9:57bir hale getirecek. Bir yandan da burada
242. 9:59çalışıyor gördüğün gibi. Yani
243. 10:02biz burada istek yapıyoruz. O burada
244. 10:05çalışmaya devam ediyor. Şimdi geldi.
245. 10:07Tekrar eee görseller de gelecek ve
246. 10:10oradan devam edeceğiz. Tamam geldi.
247. 10:13Bakalım bu şekilde daha iyi. Ok. Build
248. 10:18şimdi buradan devam ediyor. Bize sorular
249. 10:20sorarak ilerliyor aslında.
250. 10:23Şimdi eee böyle bir sayfa geldi aslında.
251. 10:26Çok çok iyi sayfa. Şu tasarımı
252. 10:29görebilirsiniz ne kadar güçlü olduğunu.
253. 10:31Böyle bir web sitesi yapmak normalde çok
254. 10:33kolay değil. Bu bir web sitesi.
255. 10:34Gördüğünüz gibi direkt olarak web
256. 10:36sitesini bu şekilde yapmak EA ile çok
257. 10:39mümkün olmuyordu. Ama direkt olarak
258. 10:41böyle yapabildik. Şimdi başka bir modu
259. 10:44göstereceğim. Impackable live diyeceğiz
260. 10:46ve canlı mod başlayacak. Canlı mod
261. 10:49aslında başta da söylediğim gibi
262. 10:51düzenlemeleri canlı olarak yapabilmenizi
263. 10:53sağlayan mod ki en güçlü özelliklerinden
264. 10:55bir tanesi. Şimdi L mod açıldı aynı yer
265. 10:57ama farkındaysanız aşağıda başka bir şey
266. 11:00geldi. Eee ve buradan istediğinizi
267. 11:03isterseniz konuşarak da
268. 11:05yapabiliyorsunuz. İsterseniz pick deyip
269. 11:07mesela burayı seçtim ve dedim ki burayı
270. 11:11daha eee kalın çizgi yapalım dedim.
271. 11:14yolladım ve terminale gidecek. Bu
272. 11:16gördüğünüz gibi arka planda yakaladı
273. 11:20isteğimi yakaladı. Agent output'u
274. 11:22yakaladı ve dedim ki şurayı daha kalın
275. 11:24yapalım. Şu anda üzerinde zaten eee
276. 11:27çalışmak için aldı. Burada terminali
277. 11:30isteği atıyor ve canlı olarak aslında
278. 11:33çalışabiliyorsunuz. Bunun güzelliği şu.
279. 11:35Siteye tekrar yani terminale inip bir
280. 11:37değişiklik yapıp sonra tekrar gidip
281. 11:39bakıp sonra tekrar değişiklik yapmak
282. 11:40yerine canlı burada değişikliği
283. 11:43yapıyorsunuz. Oldukça kullanışlı hale
284. 11:45getiriyor. Live modu bence en önemli
285. 11:47modlardan bir tanesi zaten dedim ya L ve
286. 11:50World. Eee World zaten bu tasarımın
287. 11:52çıkmasını sağladı. Bizim bize tasarım
288. 11:55dünyaları oluşturdu ve o dünyalardan
289. 11:57örnek aldık. Live'da da bir istek
290. 11:59yolladım. Buradaki ajan, eee, bizim
291. 12:02burada çalışan ajanımız hisseyi aldı ve
292. 12:05hisseyi uyguluyor şu anda. Şimdi üç
293. 12:08varyant getirdi. Hepsini burada terminal
294. 12:11artık şeye gitmenize gerek yok. Üç
295. 12:13farklı seçenek oldu gördüğünüz gibi.
296. 12:15Kabul edip devam edebiliyorsunuz. Bence
297. 12:18bir güzel. 1i kabul ettim ve devam
298. 12:20ettim. 1e değişti. Şimdi gördüğünüz gibi
299. 12:24burada hepsini değiştirebiliyoruz.
300. 12:26Burada aldı. Ajan işini yapıyor. Bu
301. 12:29şekilde telikleri
302. 12:32yapabiliyorsunuz. Gerçekten çok güzel
303. 12:34oldu. Animasyonlar ekleyebilirsiniz,
304. 12:36tasarım yapabilirsiniz ama bu şekilde
305. 12:38bir web sitesi yapabilmek, anlatmak, bu
306. 12:41şekilde editlemek çok kullanışlı hale
307. 12:44getiriyor web tasarımını. Bununla
308. 12:46isterseniz şirket için internal page'ler
309. 12:48yapabilirsiniz. İşte benim şu anda
310. 12:50yaptığım gibi eee onboarding yeni gelen
311. 12:53müşterilere aktivasyon page'leri
312. 12:55yapabilirsiniz. Yani deneyimi çok farklı
313. 12:58bir noktaya götürebilirsiniz. Bunu iş
314. 13:00olarak yapıyorsanız, ajans olarak
315. 13:02müşterilerinize hizmet veriyorsanız,
316. 13:05Wall diyecekleri eee hareketler aslında
317. 13:08böyle geliyor. Yoksa yapay zeka çok
318. 13:10kolay kopyalı yapıştırı siteler yapıyor
319. 13:12ama hepsi birbirine benziyor. Aynı
320. 13:14hatalar oluyor. Bu gerçekten para eden
321. 13:16gerçekten tasarım eee kısmı buradan
322. 13:19aslında gidiyor ve bunu canlıcı bu kadar
323. 13:21kolak size gösterdiğim şekilde
324. 13:23kurgulayabilirsiniz. Ben böyle bir şey
325. 13:25tercih ettim. animasyonu, web sitesi
326. 13:27olabilir, başka bir şey olabilir. Birçok
327. 13:29şeyi farklı tasarım dilleriyle yakmanızı
328. 13:32sağlayacak bu sistem. Çünkü yaptığı asıl
329. 13:36şey gerçekten yapay zekanın o izini
330. 13:39silerek tamamen unik bir içerik
331. 13:41çıkarmak. Şimdi yaptı. Şöyle
332. 13:43yenileyeyim.
333. 13:45Çok da güzel oldu gerçekten.
334. 13:48Animasyonları da çok güzel oldu. Ben ben
335. 13:50de buradan çok güzel bir iç sayfa,
336. 13:52eğitimlerde, sitede her yerde
337. 13:54kullanılacak bir şey çıkartabiliriz.
338. 13:56Aslında burada bu skillerle aslında
339. 14:00anlamanız gereken şey şu. Viş
340. 14:01akışlarınızın neresine monte
341. 14:03edeceksiniz? Artık elimizde ajanlar var.
342. 14:06Ajanlar buradaki de bir ajan, şunu yapan
343. 14:08da bir ajan, siteyi yapan da bir ajan
344. 14:11aslında. Yani termin yaptığımız kısım da
345. 14:13bir ajan. Onu buraya kadar o hazırladı.
346. 14:16Burada başka bir ajan burada yazarak
347. 14:18değiştiriyorsunuz. İstediğiniz alanı
348. 14:20seçip istediğiniz değişikliği
349. 14:22yaptırtabiliyorsunuz. Ama o da bir ajan.
350. 14:24Burada seçenekler var. Kaç varyasyon
351. 14:26istediğinizi 4'e kadar ya da neler
352. 14:28yapmak istediğinizi mesela boulderı k
353. 14:31söyleyebilirsiniz
354. 14:32başka şeyler de söyleyebilirsiniz.
355. 14:34Layout değiştirebilirsiniz. Seçip yine
356. 14:37buradaki layout'u değiştirebilirsiniz. E
357. 14:40animate diyebilirsiniz. Burada animasyon
358. 14:42olmayan bir şeyler varsa mesela hepsinde
359. 14:45de animasyon var aslında ama animate
360. 14:47diyebilirsiniz. Başka şeyler
361. 14:48yapabilirsiniz. Birçok seçenek var.
362. 14:50Karıştırıp siz de yapabileceksiniz. Ama
363. 14:52lokalde çalışan bir ajan sizinle
364. 14:55birlikte konşa konşa tasarım yapıyor.
365. 14:57Eee ve cloud koda yaptırtıyor bunu.
366. 14:59İsterseniz Codex kullanırsınız. Codex'e
367. 15:01de yaptırır. Çok e güzel bir skill.
368. 15:03Kullanarak hem buradan para
369. 15:05kazanabilirsiniz hem de iş akışlarınıza
370. 15:07aktarabilirsiniz.
371. 15:09E umarım beğenmişsinizdir. Beğendiyseniz
372. 15:12beğene basın. Kanalı da takip edin ki
373. 15:14bir sonraki videoyu kaçırmayın.
374. 15:15İzlediğiniz için çok teşekkürler.
375. 15:17Görüşürüz.