Bu siteyi yazmadım; tarif ettim. Ne istediğimi bir yapay zekâ modeline anlatıyorum, kodu o yazıyor; ben yön veriyorum, okuyorum, karar veriyorum. Buna vibe coding deniyor: kodu satır satır yazmak yerine tarif etmek ve çıkan sonucu yönetmek. Kulağa kestirme gibi geliyor, bir yere kadar da öyle. Bu yazı, o kestirmenin bu sitede nerede işe yaradığının ve nerede beni yanılttığının kaydı.
01İlk versiyon çalışıyordu
Sitenin ilk halini daha eski bir modelle yaptım. Altyapı bugün de aynı: Next.js, React ve Tailwind, yayın için Vercel. Veritabanı yok; her şey derleme anında statik HTML'e dönüşüyor ve iki dilin de kendi adresleri var. Site yayındaydı, çalışıyordu, gözüme batan bir şey de yoktu. Aylar sonra siteyi yeniden elden geçirirken ortaya çıkanlar şunlar oldu:
- Tasarım 2021'in trendlerine yaslanıyordu: buzlu cam kartlar, arka planda dolaşan büyük, bulanık sarı lekeler.
- Paletimdeki beş rengin yalnızca üçü kullanılıyordu.
- Sessiz bir Tailwind hatası yüzünden text-foreground/60 gibi saydamlık sınıfları hiç üretilmiyordu. İkincil olması gereken bütün metinler ana metin kadar belirgin çıkıyordu; iletişim formundaki gönder butonunun arka planı ise hiç görünmüyordu.
- Profil fotoğrafım, 1080×1080'lik gri bir tuvalin ortasında duran küçük bir portreydi. Bu yüzden yuvarlak avatarda da sekme ikonunda da bir yüz değil, posta pulu kadar bir resim görünüyordu.
Bunların bir kısmını aylarca kimse fark etmedi, ben de dahil. Çünkü sayfa iyi görünüyordu. Hiçbir şey çökmüyordu; hatalar sessizce yerlerinde duruyordu. Cam efektini ise biliyordum; bir trend olduğunu başka bir yazımda kendim yazmıştım. Bilmek, onu değiştirmeye yetmemiş.
02Beş renk, tek dosya
Eylül 2026'da siteyi bu kez daha yeni bir modelle, Claude ile yeniden yaptım. Ona beş renklik bir Photoshop renk paleti dosyası (.aco) verdim ve daha modern bir site istedim. Brief'in tamamı buydu.
Renkler şunlar: zemin için #F2F2F2, açık yüzeyler için #D9D9D9, koyu zemin için #121212, koyu yüzeyler için #282828 ve vurgu rengi olarak #FFEA67 sarısı. Model bu binary dosyayı kendisi çözümleyip renkleri çıkardı. Sonra bir şey fark etti: portremin arkasındaki sarı #FEEA67'ydi, vurgu renginden tek bir adım uzakta. Böylece fotoğraf da paletin bir parçası oldu.
03Kısıt kurala dönüştü
Beş renkle çalışmak beraberinde bir yasak getirdi. Açık gri zeminde sarı yazının kontrast oranı yaklaşık 1,1:1; yani pratikte okunmuyor. Bu yüzden açık temada sarı hiçbir zaman yazı rengi olmuyor. Yalnızca dolgu olarak kullanılıyor ve üstündeki yazı hep siyaha yakın. Bu kuralı ben icat etmedim, renkler dayattı. Bana düşen, onu esnetmemekti.
Gerisi bu çerçevenin içinde şekillendi. Cam kartların yerini düz kutular aldı; yazı tipleri Geist ve Geist Mono oldu. Açılış sayfası bento tarzı bir düzene geçti, arka plana silik bir nokta ızgarası yerleşti ve "AI" bağlantı sütunu geri geldi.
İsteğimde "modern" kelimesi de vardı, ama sonucu belirleyen o olmadı. "Modern yap" açık uçlu bir istek; aradaki boşluğu modelin en alışık olduğu kalıplar doldurur. Beş renk ise ona basacak sağlam bir zemin verdi. Dar bir kısıt, geniş bir istekten daha iyi sonuç çıkardı.
04Kırk bulgudan otuzu ayakta kaldı
Yeni tasarım oturunca işi bitmiş saymadım, çünkü ilk versiyon bana bir şey öğretmişti: "çalışıyor" ile "doğru" aynı şey değil. Siteyi aynı anda birkaç yapay zekâ ajanına incelettim; her biri başka bir açıdan baktı. Kimi iki temayı da 320 ile 1440 piksel arası genişliklerde görsel olarak taradı, kimi erişilebilirliği gerçek kontrast hesaplarıyla ölçtü, kimi de derlemeyi ve kodun doğruluğunu denetledi. Ardından başka ajanlardan her bulguyu çürütmeye çalışmalarını istedim.
Kırk bulgudan otuzu bu elemeden sağ çıktı. Kalan onu çürütüldü; yani inceleyenler de her seferinde haklı değildi. Ayakta kalanlar arasında düpedüz hatalar da vardı:
- Blog tarihleri bir hydration hatasına yol açıyor, UTC'nin batısındaki ziyaretçilere de yanlış günü gösteriyordu.
- Menü çubuğu tam 768 pikselde bozuluyordu; Türkçe menü etiketleri İngilizcelerinden uzun.
- Mobil menü, dışına dokununca kapanmıyordu.
- CSS sınıflarının sırası yüzünden formdaki hata kenarlıkları açık temada hiç görünmüyordu.
Bunların hiçbiri sayfaya şöyle bir bakınca fark edilmez; ama her biri er geç bir ziyaretçinin karşısına çıkar. Bir ajandan bir şeyin yanlış olduğunu kanıtlamasını istemek, aynı şeyi bir ziyaretçiden öğrenmekten çok daha ucuz.
05İşim nereye kaydı
Vibe coding'de kodu ben yazmıyorum; o kısım gerçekten ortadan kalktı. Ama iş ortadan kalkmadı, yer değiştirdi. Zamanım artık neyin iyi olduğuna karar vermeye, modelin önüne doğru sınırları koymaya ve çıkan sonucu doğrulamaya gidiyor.
Model hızlı. Yanıldığında da aynı hızla ve aynı özgüvenle yanılıyor; üstelik yanlışları gayet düzgün görünüyor. Görünmeyen bir buton zemini ya da açık temada hiç çıkmayan bir hata kenarlığı kendini ele vermez. Ekranda her şey yerli yerinde; sadece doğru değil.
Vibe coding, yayına aldığınız şeyi anlama zorunluluğunu ortadan kaldırmıyor. Kodu ben yazmasam da alan adında benim adım var. Anlamadığım bir satır, benim adıma verilmiş ama benim vermediğim bir karar.
Site şimdi daha iyi; bitmiş değil. Bir hata görürseniz bana yazın. İletişim formundaki gönder butonu artık görünüyor.
