Geliştirici olmayanlar için vibe coding’e giriş: 5 adımlı rehber

Son birkaç haftadır geliştirici olmayan tanıdıklarımla (avukatlar, pazarlamacılar, PM’ler vb.) birlikte vibe coding ile beş altı kadar basit uygulama yaptım

• WoW guild raid dashboard (web)
• Çekiliş etkinliği için yarış simülatörü (web + Three.js)
• Video editörü ile işi veren kişi arasında iletişimi sağlayan bir araç (Chrome extension)
• İterasyon sayısını belirleyip belli bir süre odaklanmayı sağlayan ve sonunda değerlendirme yapmaya yardımcı olan otomatik sayaç (Electron masaüstü uygulaması)

Bu süreci derleyip geliştirici olmayanlar için “vibe coding’e giriş rehberi”ni 5 adımda oluşturdum

1. Güncel yapay zekanın bugün nereye kadar ne yapabildiğine dair fikir edinmek
2. Çözmek istediğin problemi, yapmak istediğin ürünü net tanımlamak
3. Ortaya çıkan çıktının nasıl çalıştığını kendi gözlerinle hızlı ve sık aralıklarla doğrulamak
4. Yapay zekanın iyi kod yazabilmesi için doğru prompt’larla karşılıklı ilerlemek
5. Anormal davranışları ve iyileştirme noktalarını fark edip geliştirerek işi kapatmak

1) Güncel yapay zekanın bugün nereye kadar ne yapabildiğine dair fikir edinmek

Vibe coding ile ilk kez tanışan geliştirici olmayanlara başlangıç için şu tür aktiviteleri öneririm

• LLM içinde ya da AI prototyping service üzerinde kısa bir prompt ile çalışan bir şey üretilebildiğini bizzat deneyimleyip özgüven kazanmak
• En güncel yapay zeka gelişmelerini derleyip anlatan birkaç SNS hesabına ve newsletter’a abone olmak
• Tüm yapay zeka bilgilerini ve araçlarını tüketmeye çalışma hırsından vazgeçip, sadece kendi ilgilendiğin belirli konuların araçlarına odaklanarak kısa denemeler yapmak

2) Çözmek istediğin problemi, yapmak istediğin ürünü net tanımlamak

• Yapay zekanın yeteneklerini fark etmiş olsan bile problem tanımın net değilse ürün yapamazsın
• Bu yüzden önce, öz farkındalığı artıran sorular üzerinden kendini daha net hale getirmen gerekir.
• Vibe coding ile yapılmış öz farkındalık uygulamasını kullan
  1. Ne yapmak istiyorsun?
  2. Bunu neden yapmak istiyorsun? Hangi problemi çözmeye çalışıyorsun?
  3. Bu, kimin yaşadığı bir problem?
  4. Onlar bu problemi hangi durumda yaşıyor?
  5. O durumda şu anda hangi geçici çözümü / alternatifi kullanıyorlar?
  6. 1’in, 5’e göre problemi daha iyi çözdüğünü nasıl doğrulayabilirsin?
  7. Onların 5 yerine gönüllü olarak 1’i kullanmasını nasıl sağlarsın?
• Ne yapmak istediğin netleşince, yukarıdaki uygulamanın ürettiği “PRD oluşturma prompt”unu LLM’e verip bir PRD üretmesini sağladım

3) Ortaya çıkan çıktının nasıl çalıştığını kendi gözlerinle hızlı ve sık aralıklarla doğrulamak

• “Çalışan bir uygulama”yı çok erken aşamada görebilmek, vibe coding’in en büyük avantajı. Geliştirici olmayanlar için motivasyon açısından da çok önemli
• Bu anlamda geliştirici olmayanların vibe coding’e Cursor ile başlamasını pek önermiyorum. Çünkü uygulamayı çalıştırma aşamasına gelene kadar aşılması gereken çok sayıda küçük büyük engel olduğunu düşünüyorum
• Bunun yerine, PRD’yi verdiğinde çalışan bir prototip üreten Lovable gibi servislerin daha iyi bir başlangıç noktası olduğunu düşünüyorum. Üstelik anında public link de üretildiği için tanıdıklara gösterip geri bildirim almak kolay
• Ancak yapmak istediğin uygulama web tabanlı değilse biraz daha karmaşık hale geliyor. Çünkü prototipleme araçları web uygulaması üretiyor
• Bu durumda teknik kararlar ve çalışma ortamı kurulumu gerekiyor; bunun için hem benim hem de yapay zekanın daha akıllı hale gelmesi gerekiyor

4) Yapay zekanın iyi kod yazabilmesi için doğru prompt’larla karşılıklı ilerlemek

• Benim ve yapay zekanın daha akıllı hale gelmesi <-> iyi prompt yazmak <-> çıktının daha hızlı ve daha iyi gelmesi
• Prompt ne kadar iyi olursa, hedefe ulaşmak için gereken ping-pong sayısı (= zaman ve para) o kadar azalıyor
• Çeşitli prompt engineering rehberlerine bakarsanız ortak olarak söylenen şey, prompt içinde Role, Context ve Task’ı iyi tanımlamanız gerektiği

Rol, bağlam, görev

• Vibe coding’de “rol” çok kritik değil
  • Kodlama ajanlarında zaten uygun roller tanımlı olduğu için işleri karıştırabilir
  • Muhtemelen kodlama önemli bir benchmark olduğu için, LLM’ler de rol ataması olmadan kod yazmakta gayet iyi
  • Elbette yapmak istediğin uygulama özelse uygun bir rol vermek de iyi olabilir
• “Bağlam” için iyi bir PRD hazırladıysan bu genelde yeterli
• “Görev” ise hedefi ve tamamlanma kriterlerini iyi tanımlamak demek. Tamamlanma kriterleri
  • Prompt içinde açıkça yazılmış olabilir (few-shot prompting)
  • Harici dosyalarda veya kod içinde tanımlanmış olabilir (TODOs.md ya da test kodu)
  • Sadece senin kafanda da olabilir (ama bu tarz pek iyi değil)
• Vibe coding’in nihai hedefi yapay zekaya iyi kod yazması için doğru talimatlar vererek PRD’ye göre çalışan bir uygulamayı hızla üretmek. Bunun için 3 ara hedef belirlemek iyi olur
  • Ben daha akıllı hale gelirim
  • Yapay zeka daha akıllı hale gelir
  • Özellikler spesifikasyona uygun çalışır

Ben daha akıllı hale gelirim?

• Geliştirici değilsen, alan sana yabancıysa ya da teknoloji yığınına aşina değilsen, doğru terimlerle talimat vermek zor olur
• Böyle durumlarda eksik olduğunu LLM’e söyleyip ondan öğrenebilirsin
  • “(Ekran görüntüsü verip) Böyle oyunlar genelde neyle yapılıyor?”
  • “Böyle bir şey yapacağım, sence veriyi nasıl toplamak gerekir?”
  • “Native uygulamanın temel davranışını mümkün olduğunca hızlı doğrulamak için hangi teknolojiyi kullanmak gerekir?”
• Bu sorular üzerinden kendinde şu değişimleri gözlemlemeye çalış
  • Teknik anahtar kelimeler: Doğru teknik terimleri / alan terimlerini kullanabiliyorum
  • Veri akışı: Uygulamamın temel işlevi için verinin nasıl elde edildiğini, işlendiğini ve gösterildiğini açıklayabiliyorum
  • Çalışma ortamı: Yapay zekanın yazdığı kodu çalıştırıp sonucunu kendi gözlerimle doğrulayabileceğim bir ortam kurdum
• İdeal olarak, tüm unknown unknown’ları giderdikten sonra PRD yazıp koda başlamak iyi olur; ama şart değil
• Çünkü çoğu şeyi kodlamaya girince öğreniyorsun ve gerekirse en baştan yeniden yapmak mümkün. (Hatta mevcut olanı düzeltmekten daha hızlı bile olabilir)

Yapay zeka daha akıllı hale gelir?

• Belirlediğin teknik anahtar kelimeleri veya veri akışını system prompt’a (Cursor Rules vb.) ekleyerek yapay zekaya öğretmek
• Benim müdahale sayımı azaltmak ve yapay zekanın yazdığı kodun daha çok içime sinmesi için büyük ölçüde iki şey gerekiyor: kısıtlar ve dokümantasyon talimatları
• Kısıt talimatları, yapay zekanın daha tutarlı kod yazmasına yardımcı olur. Örneğin:
  • Teknoloji yığını: NextJS app router kullan, stil için Tailwind ve ShadCN kullan, ikonlarda sadece Lucid kullan, ödeme için Stripe kullan vb.
  • Yapı ve desenler: Klasörleri şöyle düzenle, dosya adlarını böyle ver, UI stilini Material gibi yap vb.
  • (Çalışma ortamına göre) çıktı formatı: Electron Fiddle kullanacağım, ona uygun 4 dosya ver; CodePen kullanacağım, HTML, CSS ve JS’yi ayrı ayrı ver vb.
• Dokümantasyon talimatları, yapay zekanın odaklanma ve hatırlama kapasitesini artırmaya yardımcı olur. İki fikir özellikle çok faydalıydı
  • Cline’ın memory bank’i: Yapılan işleri ve yapılacakları dosyalara kaydederek ilerleyen bir workflow tanımlamak
  • Kang Dong-yoon’un prompt context’i: Tüm proje talimatlarını en üst klasöre uzun uzun bırakmak yerine klasör bazında talimatlar oluşturmak
• Memory bank, şu anda ne olduğunu gözlemlemeyi ve öğrenmeyi kolaylaştırdığı için özellikle geliştirici olmayanlara öneririm

Özellikler spesifikasyona uygun çalışır?

• Bu, proje seviyesinde değil; daha çok (kodlama ajanıyla) sohbet ederken kullanılan prompt stratejisi
• Özellikleri spesifikasyona uygun çalıştırmanın en iyi stratejisinin test geçerse commit et olduğunu düşünüyorum
  • “X’i uygula. Önce testi yaz, sonra kodla, ardından testleri çalıştır ve geçene kadar kodu düzeltmeye devam et.”
• Bu mümkün çünkü kodlama ajanı test kodunu yazabiliyor, terminalde çalıştırabiliyor ve sonucu okuyabiliyor
• Testler geçince commit mesajı önerisi alıp test koduyla özellik kodunu birlikte commit edebilirsin. Ben commit’i kendim yapıyorum ama ajan otomatik commit de yapabilir
• Sadece unit test değil, integration test ve E2E testleri de yapay zekaya yazdırıp çalıştırabilir, hatta hataları kendi kendine düzelttirebilirsin (bkz: Cursor + Playwright otomatik test)
• Bütün bunlar, “Tek tek özellikler spesifikasyona göre mi geliştirildi, tüm uygulama PRD’ye göre mi çalışıyor?” sorusunu hem vibe coder hem de yapay zeka tarafının daha kolay doğrulamasını sağlayan bir strateji

5) Anormal davranışları ve iyileştirme noktalarını fark edip geliştirerek işi kapatmak

• Benim anladığım vibe coding, “tıkla ve olsun” yaklaşımından oldukça uzak ve öğrenilecek çok şey var
• Özellikle de “kendime ait küçük bir prototip” seviyesini aşıp tek kişilik bir girişimci olarak ticari ürün kalitesinde uygulama yapmak için gerekli gördüğüm 3 yetkinlik var: fark etme becerisi, kodlama becerisi ve product engineering becerisi

Fark etme becerisi

• PRD’ye (veya başlangıçtaki niyetine) uymayan ekranları ya da işlevleri hassas biçimde fark edebilmek
• Bu beceri zayıfsa yapay zekanın nerede hata yaptığını bulup düzeltmesini istemek çok zorlaşır
  • 4. adımdaki “test”, hem yapay zekanın hata yapma oranını baştan azaltır hem de senin becerini geliştirir.
  • Çünkü spesifikasyonun yapay zeka tarafından test koduna çevrilme sürecini okurken sadece “bu özelliğe ihtiyacım var”ı değil, “bu özelliğin tamamlandığını söylemek için şu koşullar gerekir”i de öğrenirsin
• Ama “uygulama spesifikasyona uygun geliştirildi” ile “uygulama iyi” aynı şey değil. Bu yüzden iyileştirme noktalarını bulma konusunda “product sense” önemli (ayrıntı için bağlantıdaki Lenny newsletter’ına bakılabilir)

Kodlama becerisi

• En azından şimdilik, işi ne kadar iyi parçalayıp yapay zekaya dağıtırsan dağıt, kapanışı yapmak için en az %5 kadar koda doğrudan dokunman gerekiyor
  • Bunu yapamadığı için %80 seviyesinde kalıp yayına çıkamayan çok sayıda uygulama SNS’lerde görülüyor
• Elbette bu oran yapmak istediğin uygulamaya göre değişebilir ve sonuna kadar sadece yapay zekayla geliştirmek imkânsız değildir; ama çok verimsiz olur
• Kendini tamamen vibe’a bırakmak yerine (memory bank, test kodu vb. üzerinden) yapay zekanın ürettiği dokümanları okuyarak kodlamayı da öğrenmeni öneririm. Geliştiricilerden koçluk almak da iyi olur
• Özellikle nispeten daha görünmez olan backend tarafı (kullanıcı kimlik doğrulama, harici API entegrasyonu, veri girdi/çıktısı, ödeme vb.) ve dağıtım stratejileri (main branch ve feature branch, environment variable yönetimi vb.) üzerine öğrenmek daha etkili olacaktır

Product engineering becerisi

• Uygulamayı yayına almak son değil, başlangıçtır. Bunu düzgün yapmak için ürün geliştirme yaşam döngüsünün tamamını anlamak gerekir
  • Problemi fark etme, çözüm fikri üretme, planlama, tasarım, geliştirme, test, dağıtım, tanıtım, hata izleme, geri bildirim toplama, operasyon...
• Bu adımların hepsini derinlemesine bilmek şart değil; ama en azından her aşamada ne yapıldığını ve hangi anahtar kelimelerin kullanıldığını bilmek faydalı
• Böylece bilmediğin şeyi öğrenebilir, tek başına kaldıramadığında birlikte çalışacağın kişinin yetkinliğini de anlayabilirsin

Kapanış

• Vibe coding ile ticari ürün seviyesinde uygulama yapmak asla kolay değil. Ama “başlamak” hiç olmadığı kadar kolaylaştı; bunu kimsenin inkâr edeceğini sanmıyorum
• Kendi küçük fikrinin canlı şekilde çalıştığını gören tanıdıklarımın hayranlıkla (“Vay, ben gerçekten kod yazıyormuşum!”) çok keyif aldığını görünce ben de çok mutlu oldum
• Bu yazıyı okuyan diğer geliştirici olmayanlara da bu fırsatı değerlendirip keyifle bir “maker” olmalarını öneririm
• Kendi alan uzmanlığınızı kullanarak belirli bir problemi çok iyi çözen küçük, hızlı ve kullanışlı bir araç geliştirirseniz, bunu (vibe coding ile) yapmış olsanız bile yapay zeka çağında yeterince rekabetçi olabileceğinizi düşünüyorum

[jk34011]

Vay be~ vibe coding'in bir yanılsama olduğunu düşünüyordum.
Bu kadar uzmanlıkla yazılmış bir yazıyı uzun zamandır görmemiştim.
Keyifle okudum.

[spilist2]

Teşekkürler! Ben de potansiyelin çok büyük olduğunu düşünüyorum haha

[jk34011]

Ah;; şimdi fark ettim, yorumum biraz öyle olmuş.
Aslında “bir yanılsama” demekten ziyade, daha hâlâ gidilecek yol var gibi bir his.
Sonuçta vibe coding'in sınırları var ve geliştirme bilgisi olmadan zor olduğunu düşünüyorum.
Tabii yapay zeka geliştikçe ileride çok daha iyi olacağını da düşünüyorum.

Yorumum sanki vibe coding'in hiçbir anlamı yokmuş gibi anlaşılabilir diye, böyle uzun uzun tekrar yanıt yazıyorum.
Ben de vibe coding'i sık kullanıyorum haha

[spilist2]

Yok, hayır. :) Ben de söylediğiniz nüansı anladım.

Bu yüzden, yazıda da belirttiğim gibi benim kastettiğim vibe coding, "tık" yapmaktan oldukça uzak; seviyeyi yükseltmek için mühendisin ciddi çaba göstermesi gerektiğini düşünüyorum.

[bbulbum]

Her zaman keyifle okuyorum.

[spilist2]

Teşekkür ederim!

[spilist2]

YouTube videosunu da çektim haha https://www.youtube.com/watch?v=ecY5VBpruOA