DEV Community

Cover image for Neden “Vibe Coding”?
Hakan Yücel
Hakan Yücel

Posted on

Neden “Vibe Coding”?

#webdev #programming #ai #productivity

Vibe Coding: Kod Yazmanın Yeni Boyutu

Son yıllarda yazılım geliştirme süreçlerinde bir değişim dalgası yükseliyor: “Vibe Coding”. Temel fikir şu: Her satırı kodu elle yazmak yerine, doğru “vibes” (yönlendirmeler) vererek AI destekli araçlardan yardım alıyoruz. Böylece tekrarlayan işler otomatikleşiyor, biz de strateji, mimari ve kullanıcı deneyimine odaklanabiliyoruz.

1. Vibe Coding Nedir?

Vibe Coding, doğal dilde verdiğiniz talimatlarla (prompts) AI ajanların kodun önemli parçalarını sizin yerinize üretmesini sağlayan bir yaklaşım. Örneğin

“Responsive bir navigasyon menüsü oluştur”

“Form validasyonunu JavaScript ile ekle”
gibi cümlelerle, arka planda çalışan model ilgili kodu otomatik olarak yazıyor.

Öne çıkan özellikleri:

  • Yüksek seviye komutlarla çalışma: “Ne yapmak istediğinizi” anlatırsınız, satır satır kodu AI üstlenir.
  • AI ile interaktif döngü: Kod üretildikçe anında önizleyebilir, revize edebilir veya ek yönlendirmeler verebilirsiniz.
  • Hızlı prototipleme: Fikirleriniz kısa sürede çalışan bir versiyona dönüşür.

2. Popüler Vibe Coding Araçları ve IDE’ler

Araç / IDE Avantajları Notlar
Cursor AI Kod editörü + sohbet paneli bir arada. CLI entegrasyonu mevcut. JavaScript, Python projeleri için güçlü.
Windsurf AI ajanları odaklı, görsel iş akışlarıyla hızlı pivot imkânı sunar. Startup’lar arasında popüler.
GitHub Copilot VSCode, JetBrains eklentisiyle komut destekli AI önerileri. Mevcut projeye hızlı entegre edilebilir.
AWS Kiro AWS altyapısına doğrudan bağlanan, kod üretim ve test otomasyonu özellikleri. Bulut tabanlı projelerde avantajlı.
Anthropic Claude (Xcode) macOS üzerinde Xcode’a entegre, Swift/Objective-C projelerde doğal dil kodlama. Apple ekosistemine odaklı.

3. Teknik Detaylar ve Örnekler

3.1 Prompt Tasarımı

Vibe Coding’in başarısı iyi hazırlanmış prompt’a bağlı. Basit birkaç öneri:

  • Net ve spesifik olun: 
   // Kötü örnek
   “Butonu yeşilden maviye dönüştür.”

   // İyi örnek
   “Primary buton rengini #0057ff’e güncelle ve hover durumunda #0041cc yap.”
Enter fullscreen mode Exit fullscreen mode

  • Adım adım ilerleyin:

    Büyük bir modülü tek bir prompt ile tarif etmeye çalışmak yerine, küçük ve odaklı adımlarla ilerlemek hem daha anlaşılır kodlar üretir hem de AI’nin isabetini artırır. Örneğin:

    • “Önce HTML yapısını oluştur.”
    • “Şimdi CSS stillerini ekle.”
    • “Form gönderildiğinde veriyi ekrana yazdır.” Bu sayede süreç daha kontrol edilebilir hale gelir.

  • Bağlamsal bilgi verin:

    Prompt’unuzda projede kullanılan teknolojileri, framework versiyonlarını ve hedef davranışları net şekilde belirtmek oldukça önemlidir.

    Örnek:

    “Proje React 18 ile yazıldı. Tailwind CSS kullanılıyor. Dark mode desteklemeli bir kart bileşeni oluştur.”

3.2 Örnek “Vibe” Akışı

Bir React projesinde basit bir TodoList bileşeni oluşturmak için şu adımları takip edebiliriz:

  1. Prompt 1:

    “Yeni bir React bileşeni TodoList.js oluştur. İçinde bir input, ‘Ekle’ butonu ve todos state’i olsun.”

    • AI yanıtı: useState ile todos dizisi tanımlanır, input alanı ve buton yerleştirilir.

  2. Prompt 2:

    “Kullanıcı ‘Ekle’ butonuna tıkladığında input değerini todos’a ekle, ardından input’u temizle.”

    • AI yanıtı: handleAdd fonksiyonu ile todos dizisine yeni öğe eklenir.

  3. Prompt 3:

    “Her maddeyi listele ve yanında bir ‘Sil’ butonu göster. Bu buton tıklanınca ilgili öğeyi sil.”

    • AI yanıtı: .map() ile render edilen listeye handleDelete fonksiyonu eklenir.

  4. Prompt 4:

    “Başlık yazısını text-blue-600 hover:text-blue-400 Tailwind sınıfları ile stillendir.”

    • AI yanıtı: 
     <h1 className="text-blue-600 hover:text-blue-400">Todo List</h1>

Bu adımlar sayesinde, sadece ne yapmak istediğinizi tanımlayarak çalışan bir modül elde edebilirsiniz. İşin büyük kısmını AI hallederken siz de yönlendirici rolünüzü koruyarak ilerleyebilirsiniz.

Top comments (0)