Başlamadan önce bir şeyi çok net bir şekilde belirtmek istiyorum.
Bunu kaydet :)
Ben bir geliştirici değilim. Hiçbir zaman geliştirici olmadım. Bilgisayar bilimi diplomasına sahip değilim. Tek bir kod kampına bile katılmadım. Çoğu kodu okuyup ne işe yaradığını söyleyemem.
Ama geçen hafta sonu internete çalışan bir web uygulaması yayınladım. Gerçek kullanıcılar kaydoldu. Gerçek veriler depolandı. Gerçek özellikler çalıştı.
Her şeyi iki günde Claude Code ile inşa ettim. Ve size bu deneyimin gerçekte nasıl olduğuna dair tüm gerçeği anlatacağım. Küratörlü versiyonunu değil. Dağınık, sinir bozucu, atılımlarla dolu gerçeği.
Çünkü internetteki her "AI ile bir uygulama yaptım" hikayesi kulağa zahmetsiz geliyor. Zahmetsiz değil. Ama bu çok ama çok mümkün.
Cumartesi Sabahı: Fikir
Basit bir araç yapmak istedim. Gönderilerinizi platformlar arasında planlamanıza, günler arasında sürüklemenize ve yayınlanmış olarak işaretlemenize olanak tanıyan bir içerik takvimi. Devrim niteliğinde bir şey değil. Ama kendi iş akışım için gerçekten ihtiyacım olan bir şey.
Cumartesi günü saat 9'da terminalimde Claude Code'u ilk kez açtım.
Saat 9:15'te ilk hatamı çoktan yapmıştım.
Hata 1: Plansız Başlamak
Claude Code'a verdiğim ilk komut şuydu:
Bana bir içerik takvimi uygulaması yap
Claude bir sürü dosya oluşturdu. Ekranda bir şeyler belirdi. Daha önce hiç takvim görmemiş biri tarafından tasarlanmış bir içerik takvimine benziyordu.
İşte insanların %90'ı burada pes ediyor. Belirsiz bir komut yazıyorlar, belirsiz bir sonuç alıyorlar ve vibe coding'in işe yaramadığı sonucuna varıyorlar.
Sorun Claude değildi. Sorun bendim. Ona çalışabileceği hiçbir şey vermemiştim.
Yapmam gereken şey:
Plan Modunda başlamalıydım. Claude Code'da Shift + Tab tuşlarına basarak Act Modu'ndan Plan Modu'na geçin. Plan Modu'nda Claude, inşa etmeden önce düşünür. Sorular sorar. Mimarıyı haritalandırır. Size ne yaratmayı planladığını gösterir.
Geri döndüm ve düzgün bir şekilde yaptım:
Bir içerik takvimi web uygulaması yapmak istiyorum. Herhangi bir kod yazmadan önce, bunu planlayalım.
Uygulamanın ihtiyacı olanlar:
- 7 sütunlu (Pazartesi'den Pazar'a) haftalık bir görünüm
- Başlık, platform (Twitter, LinkedIn, Instagram) ve durum (taslak, planlanmış, yayınlanmış) ile gönderi ekleme özelliği
- Gönderileri günler arasında taşımak için sürükle ve bırak
- Tailwind CSS kullanan basit, temiz bir tasarım
- Oturumlar arasında kalıcı olması için yerel bir veritabanında depolanan veriler
Hangi teknoloji yığınını kullanmalıyız? Klasör yapısı ne olmalı? Herhangi bir şey inşa etmeden önce bana mimariyi anlat.
Claude ayrıntılı bir planla geri döndü. Framework için Next.js. Veritabanı için SQLite. Stil için Tailwind. Dosya dosya düzenlenmiş temiz bir klasör yapısı.
Alınan ders: Her zaman Plan Modunda başlayın. Ne istediğinizi her zaman ayrıntılı olarak açıklayın. Planlama için harcadığınız 5 dakika, yeniden inşa etmek için harcayacağınız 2 saatten sizi kurtarır.
Hata 2: Her Şeyi Bir Anda İnşa Etmeye Çalışmak
Planlamadan sonra heyecanlandım. Claude'a her şeyi tek seferde inşa etmesini söyledim.
Sonuç bir karmaşaydı. Bazı özellikler çalıştı. Diğerleri yarı yarıya uygulanmıştı. Sürükle ve bırak bozuktu. Veritabanı düzgün kaydetmiyordu. Düzeltmeye nereden başlayacağım hakkında hiçbir fikrim yoktu.
Yapmam gereken şey:
Her seferinde bir özellik inşa edin. Bu, vibe coding'in altın kuralıdır.
Baştan başladım ve şu sırayı izledim:
- Oturum: Sadece temel sayfa düzeni. Yedi sütun. Hiçbir özellik yok. 2. Oturum: Bir gönderi oluşturma özelliği ekle (sadece basit bir form). 3. Oturum: Kaydedilmiş gönderileri doğru gün sütununda görüntüle. 4. Oturum: Sürükle ve bırak işlevselliği ekle. 5. Oturum: Durum özelliğini ekle (taslak/planlanmış/yayınlanmış). 6. Oturum: Güzel görünmesini sağla.
Her özellik kendi konuşmasını aldı. Yeni bağlam. Net görev. Temiz sonuç.
Her seferinde bir özellik inşa ettiğimde, her biri mükemmel çalıştı. Her şeyi aynı anda inşa etmeye çalıştığımda, hiçbir şey çalışmadı.
Alınan ders: Her özellik için bir konuşma. Birden çok özelliği asla aynı Claude Code oturumunda karıştırmayın.
Hata 3: Bir [CLAUDE.md](http://claude.md/) Dosyası Oluşturmamak
Cumartesi öğleden sonra çalışan bir temel düzene sahiptim ve heyecanlıydım. Ama aynı sorunlarla tekrar tekrar karşılaşıyordum:
Claude gereksiz karmaşıklık eklemeye devam ediyordu. Sadece basit bir try-catch istediğimde ayrıntılı hata işleme sistemleri oluşturuyordu. Sadece temiz bir geçiş istediğimde animasyon kütüphaneleri ekliyordu. Küçük bir değişiklik istediğimde tüm klasör sistemimi yeniden yapılandırıyordu.
Aynı şeyleri tekrar tekrar düzeltiyordum.
Sonra CLAUDE.md hakkında okuduğumu hatırladım.
Proje kökünde bir dosya oluşturdum:
CLAUDE.md
Proje Kuralları
- Bu basit bir içerik takvimi. Her şeyi minimal tut.
- App Router ile Next.js 14 kullan.
- Tüm stil için Tailwind CSS kullan. Başka CSS framework'ü yok.
- Veritabanı için Prisma ORM ile SQLite kullan.
- Basit tut. Gereksiz soyutlamalar veya tasarım desenleri yok.
- "Güzel görünmesini sağla" dediğimde şunu kastediyorum: temiz boşluklar, okunabilir yazı tipleri, ince hover efektleri, yuvarlatılmış köşeler.
- Bana sormadan asla yeni bağımlılık ekleme.
- Mevcut herhangi bir kodu yeniden düzenlemeden önce sor.
Kod Stili
- Basit, okunabilir kod. Yeni başlayan biri anlayabilmeli.
- Net değişken adları. Kısaltma yok.
- Yalnızca açık olmayan mantık için yorumlar.
Bu dosyayı oluşturduktan sonra deneyim çarpıcı bir şekilde değişti. Claude aşırı mühendislik yapmayı bıraktı. Rastgele kütüphaneler eklemeyi bıraktı. Dokunmasını istemediğim şeyleri yeniden yapılandırmayı bıraktı.
Claude istemediğim bir şey yaptığında, [CLAUDE.md](http://claude.md/)'ye yeni bir kural ekledim. Pazar gecesine kadar bu dosyada 30'dan fazla kural vardı ve Claude hepsini mükemmel bir şekilde takip ediyordu.
Alınan ders: [CLAUDE.md](http://claude.md/)'yi ilk gün oluşturun. Sürekli güncelleyin. Claude Code'daki en güçlü araçtır.
Hata 4: Ekran Görüntüsü Kullanmamak
Cumartesi akşamı. Uygulama işlevsel olarak çalışıyor ama çirkin görünüyordu. Şunu yazdım:
Tasarımı daha modern ve profesyonel yap
Claude bazı şeyleri değiştirdi. Farklı görünüyorlardı. Daha iyi değil, sadece farklı.
Görsel sorunları kelimelerle tarif etmeye çalışıyordum. Bu inanılmaz derecede verimsiz.
Bunun yerine, tasarımını beğendiğim web sitelerinin ekran görüntülerini almaya başladım. Bunları doğrudan Claude Code'a yapıştırdım:
[temiz bir takvim arayüzünün ekran görüntüsü]
Takvimimin buna benzemesini istiyorum. Spesifik olarak:
- Arka plan için bu tam gri tonu
- Her gönderi için bu yuvarlatılmış kartlar
- Öğeler arasında bu miktarda boşluk
- Aktif günün maviyle vurgulanma şekli
Claude tasarımı neredeyse mükemmel bir şekilde eşleştirdi. İlk denemede.
Sonra bir şey bozuk göründüğünde, onu tarif etmek yerine bir ekran görüntüsü aldım, sorunlu alanı daire içine aldım, içine yapıştırdım ve "bu boşluk yanlış" veya "bu yazı tipi çok küçük" dedim.
Alınan ders: Ekran görüntüleri, görsel geri bildirim için kelimelerden 10 kat daha iyidir. Gördüklerinizi tarif etmek yerine her zaman resimler yapıştırın.
Pazar: Her Şey Bir Araya Geldi
Pazar sabahına kadar çalışan bir uygulamam vardı: temiz tasarım, sürükle ve bırak, kalıcı veriler ve çalışan bir veritabanı. Kodun çoğunu anlamadan her şeyi inşa etmiştim.
Ama bu sadece dizüstü bilgisayarımda vardı. Yayınlama zamanı.
Hata 5: Yayınlamaktan Korkmak
Yayınlama kulağa korkunç geliyordu. Sunucular. Alan adları. DNS. Yapılandırma dosyaları.
Neredeyse duruyordum. Neredeyse "yerelde çalıştırmak yeterli" demeye karar veriyordum.
Ama devam ettim ve Claude'a sordum:
Bu uygulamayı canlı olarak internete yayınlamak istiyorum. En kolay olduğunu duyduğum için Vercel kullanmak istiyorum. Bana tam adımları anlat.
Claude bana yedi adım verdi:
- Kodu GitHub'a gönder (Git'i kurmamda Claude yardımcı oldu)
- Vercel'e kaydol (ücretsiz)
- Vercel'i GitHub depoma bağla
- Veritabanı için ortam değişkenlerini ayarla
- Yayınla'ya tıkla
- 90 saniye bekle
- Canlı URL'imi al
Adımları takip ettim. Üç dakika sonra uygulamam canlıydı. URL'yi beş kişiye gönderdim. Açtılar. Çalıştı.
Alınan ders: Yayınlama korkutucu değildir. Sadece bir kontrol listesidir. Claude size her adımda yol gösterecektir.
Başlamadan Önce Bilmek İstediğim 12 Kural
İki günde öğrendiğim her şey, kurallara sıkıştırılmış halde:
Kural 1: Her zaman Plan Modunda başlayın. Shift + Tab. İnşa etmeden önce düşünün.
Kural 2: Her özellik için bir konuşma. Yeni bağlam, daha iyi bağlamdır.
Kural 3: CLAUDE.md'yi ilk gün oluşturun. Her düzeltme kalıcı bir kural haline gelir.
Kural 4: Her görsel sorun için ekran görüntüleri kullanın. Sorunu daire içine alın. Doğrudan yapıştırın.
Kural 5: Önce en basit sürümü inşa edin. Karmaşıklığı yalnızca basit sürüm çalıştıktan sonra ekleyin.
Kural 6: Ne istediğinizi ayrıntılı olarak açıklayın. Komut ne kadar spesifik olursa, çıktı o kadar iyi olur. "Bir giriş sayfası yap" çöp getirir. "E-posta ve şifre alanları olan, altında 'şifremi unuttum' bağlantısı bulunan, mavi bir gönder düğmesi olan ve başarılı olduğunda /panoya yönlendiren bir giriş sayfası yap" tam olarak istediğinizi getirir.
Kural 7: Konuşmalar uzadığında /compact kullanın. Bağlam dolduğunda Claude'un kalitesi düşer.
Kural 8: Her çalışan özellikten sonra Git'e commit yapın. Claude bu konuda size yardımcı olabilir. Bir şey bozulursa, geri alabilirsiniz.
Kural 9: Bir şey bozulduğunda, hata mesajını kopyalayın ve Claude'a yapıştırın. "Hiçbir şeyi düzeltmeden önce temel nedeni teşhis et" deyin. Claude neredeyse her zaman sorunu anında bulur.
Kural 10: Her kod satırını anlamaya çalışmayın. Her dosyanın ne yaptığını ve nasıl bağlandıklarını anlayın. Claude'u etkili bir şekilde yönlendirmek için bu yeterlidir.
Kural 11: Claude aynı şeyi tekrar tekrar düzeltmek için bir döngüye girdiğinde durun. Yeni bir konuşma başlatın. Yalnızca ilgili dosyayı ve sorunun net bir tanımını yapıştırın.
Kural 12: Mükemmel olmadan önce yayınlayın. Birinci sürümün güzel olması gerekmez. Çalışması gerekir. İkinci sürümde her zaman daha iyi hale getirebilirsiniz.
O Hafta Sonundan Beri Ne İnşa Ettim
Bu üç hafta önceydi. O zamandan beri inşa ettiklerim:
- Giriş ve dosya yükleme özellikli bir müşteri katılım portalı
- İçerik metriklerimi takip eden bir dahili panel
- Bir formdan PDF faturalar oluşturan basit bir fatura oluşturucu
- Bağlantıları konuya göre kaydeden ve düzenleyen bir yer imi yöneticisi
Hala çoğu kodu okuyamıyorum. Hala dosyalarda olup bitenlerin %80'ini anlamıyorum. Ama ne istediğimi Claude'un inşa edebileceği kadar net bir şekilde tanımlayabiliyorum. Claude'a hatayı göstererek sorunları hata ayıklayabiliyorum. Çalışan ürünleri internete yayınlayabiliyorum.
İşte vibe coding budur. Siz programcı değilsiniz. Siz ürün yöneticisisiniz. Claude programcıdır. Sizin işiniz ne inşa edileceğini bilmek ve bunu net bir şekilde iletmektir.
Çoğu insan, bir şey inşa edebilmek için önce kodlamayı öğrenmeleri gerektiğini söylemeye devam edecek.
Bu hafta sonu terminallerini açanlar, Pazartesi sabahına kadar çalışan bir uygulamaya sahip olacaklar. Biliyorum çünkü bana olan tam olarak buydu.
Beni takip edin @eng_khairallah1 daha fazla AI kursu, aracı ve iş akışı için. Her hafta yeni içerik.
umarım bu sizin için faydalı olmuştur, Khairallah ❤️
