Konuya tam olarak nereden başlayacağımı benim de pek bildiğim söylenemez. Ama yapay zeka gelişmelerini yakından takip eden, bu alandaki yeniliklerden haberdar olmak isteyen biri olduğum için öğrendiklerimi de uygulamaktan, denemekten ve paylaşmaktan çekinmediğimi söyleyebilirim.
İşte bundan dolayıdır ki, inanılmaz şaşkınım. Şu anda okumakta olduğunuz bu web sitesinin tasarımını tamamen “Vibe Coding” yani “hissel kodlama” ile gerçekleştirmiş olmanın şaşkınlığı içerisindeyim. Tabi ki hala bazı hataların olduğunun da farkındayım.
Öncelikle şunu belirtmeliyim ki yaklaşık 15 yıl öncesine kadar ileri düzey bir HTML/CSS bilgisine sahiptim. Geçmiş zaman kullanıyorum çünkü neredeyse bu becerilerimi son 10 yıldır hiç kullanmadım. Son zamanlarda çevremde de çok duyduğum “Vibe Coding” nedir diye araştırıp bakınırken, bulduğum birkaç aracı kullanıp şu anda okuduğunuz bu web sitesini tasarladım.
Herhâlde bunu çok uzun süreler önce yapmaya çalışsam bir tasarımcı bulup ilk olarak bu siteyi aklımdaki şekilde tasarlatmam, sonrasında düzenlemeler istemem ve en son olarak da saatlerce kod yazıp düzenlemem gerekirdi. Ama yapay zekanın gelmiş olduğu gelişmeler sayesinde sadece 3-4 saat içerisinde bu hâle getirebildim ki daha da çok geliştirme yapabilirim.
Yazıyı hazır buraya kadar okuduysanız, bunun ne olduğunu açıklamak ve yapabileceklerinizle ilgili birkaç detay paylaşmak isterim.
Hissel kodlama yani “Vibe Coding” nedir?
Hissel kodlama dediğimiz şey aslında tamamen yapay zeka dil modellerini kullanarak, onlara sanki bir insanla konuşuyormuşçasına sohbet ederek istediğiniz web sitesini, uygulamayı ya da tasarımı yaptırmaktır.
Bunu yaptırırken de bir insandan farklı olarak yapay zekanın “yapmıyorum!” deme imkânı da kalmıyor. Hâlâ yüzde yüz komple bir paket hâlinde çalışan bir yapay zeka asistanı var mı bilmiyorum. Fakat başta da dediğim gibi ben bu web sitesini tasarlarken model olarak ChatGPT ve Google Stitch’i kullandığımı söyleyebilirim.
Öncelikli olarak istediğim tasarımı Google Stitch aracılığıyla tasarlattım, ardından da ChatGPT’nin düşünme modelini kullanarak tamamen istediklerimi anlatarak web sitemin alt yapısına entegre edebildim. Şu anda da geliştirdikçe öğrenmeye devam ediyorum.
Vibe Coding ile neler yapılabilir?
Benim deneyimlediğim kadarıyla Vibe Coding’in en etkileyici tarafı, teknik bilgi ile fikir arasındaki mesafeyi ciddi anlamda kısaltması. Eskiden bir web sitesi yapmak istediğinizde önce HTML bilmeniz, CSS öğrenmeniz, JavaScript mantığını anlamanız, sonra tasarım tarafında iyi bir göz geliştirmeniz gerekiyordu. Bunların hepsi hâlâ değerli bilgiler elbette. Hatta bu bilgilerin temelde ne işe yaradığını bilmek, yapay zekadan daha iyi sonuç almanızı da sağlıyor.
Fakat artık sıfırdan başlamak için her şeyi en ince ayrıntısına kadar bilmek zorunda değilsiniz.
Örneğin ben bu web sitesini yaparken önce kafamdaki tasarımı tarif ettim. Nasıl bir ana sayfa istediğimi, yazıların nasıl görünmesi gerektiğini, renklerin sade olmasını, kişisel bir blog havası taşımasını, aynı zamanda modern ve okunabilir olmasını anlattım. Yapay zeka da bu isteklerimi alıp önce bir tasarım fikrine, sonra da gerçek bir web sitesi altyapısına dönüştürmemde bana yardımcı oldu.
Burada önemli olan şey şu: Yapay zeka sizin yerinize düşünmüyor; aslında sizin ne istediğinizi daha hızlı görünür hâle getiriyor. Eğer ne istediğinizi net anlatırsanız, sonuç da o kadar iyi oluyor. Ama “bana güzel bir site yap” dediğinizde alacağınız sonuç ile “minimal, kişisel blog havasında, yazı odaklı, sade renk paletine sahip, mobil uyumlu bir site istiyorum” dediğinizde alacağınız sonuç arasında ciddi fark var.
Peki bu iş tamamen kod bilmeden yapılabilir mi?
Bence büyük ölçüde yapılabilir. Ama daha iyi sonuç almak için temel mantığı bilmek kesinlikle avantaj sağlar.
Benim bu süreçte fark ettiğim şey, kod bilmekten daha önemli olan konunun doğru tarif edebilmek olduğu. Çünkü yapay zekaya ne istediğinizi ne kadar iyi anlatırsanız, o da size o kadar kullanılabilir bir sonuç veriyor.
Bazen istediğiniz şey ilk denemede olmuyor. Bazen tasarım bozuluyor, bazen bir buton çalışmıyor, bazen de ortaya çıkan sonuç kafanızdaki gibi görünmüyor. Ama burada klasik yöntemlerden farklı olarak saatlerce forumlarda çözüm aramak yerine, problemi tekrar yapay zekaya anlatıp adım adım ilerleyebiliyorsunuz.
Mesela ben bu siteyi hazırlarken birçok şeyi defalarca değiştirdim. Başlık boyutlarını, yazı aralıklarını, ana sayfadaki bölümlerin sıralamasını, blog yazılarının görünümünü, mobilde nasıl durduğunu, paylaşım butonlarını ve daha birçok küçük detayı tekrar tekrar düzenledim.
Normalde bunların her biri için ayrı ayrı uğraşmam gerekirdi. Ama Vibe Coding sayesinde “şu alan biraz daha sade olsun”, “bu başlık daha küçük görünsün”, “mobilde bu bölüm üste gelsin” gibi cümlelerle ilerleyebildim.
Bu süreçte beni en çok şaşırtan şey ne oldu?
Beni en çok şaşırtan şey, fikrin bu kadar hızlı somut bir şeye dönüşebilmesi oldu. Çünkü çoğu zaman insanın aklında bir şey olur ama onu hayata geçirmek için gereken teknik detaylar motivasyonu düşürür.
“Bunu kim yapacak?”, “Ne kadar sürer?”, “Nereden başlamalıyım?”, “Bir hata olursa nasıl çözerim?” gibi sorular yüzünden birçok fikir daha başlamadan rafa kalkar.
Vibe Coding bu noktada çok güçlü bir yardımcı gibi çalışıyor. Aklınızdaki fikri hemen denemenize imkân veriyor. Beğenmezseniz değiştiriyorsunuz. Olmazsa yeniden tarif ediyorsunuz. Eksik kalırsa geliştiriyorsunuz.
Bu da özellikle benim gibi denemeyi, öğrenmeyi ve ortaya somut bir şey çıkarmayı seven biri için oldukça heyecan verici.
Açıkçası bu web sitesi de benim için sadece bir blog alanı değil; aynı zamanda yeni teknolojileri deneyimlediğim kişisel bir laboratuvar gibi oldu. Burada yazı yazmak kadar, sitenin kendisini geliştirmek de sürecin bir parçası hâline geldi.
Vibe Coding’in avantajları neler?
Bence en büyük avantajı hız. Bir fikri günlerce, haftalarca düşünmek yerine birkaç saat içinde çalışan bir örneğe dönüştürebiliyorsunuz. Bu, özellikle kişisel projeler için inanılmaz büyük bir kolaylık.
İkinci avantajı ise öğrenme sürecini daha keyifli hâle getirmesi. Çünkü yapay zekadan sadece kod yazmasını istemiyorsunuz; aynı zamanda size neden böyle yaptığını da açıklamasını isteyebiliyorsunuz. Bir hata olduğunda “bu hata neden oldu?” diye sorabiliyorsunuz. Bir tasarım kararını değiştirmek istediğinizde alternatiflerini görebiliyorsunuz.
Bu da süreci pasif bir kopyala-yapıştır deneyiminden çıkarıp gerçekten öğretici bir hâle getiriyor.
Üçüncü avantajı da erişilebilirlik. Daha önce yazılım geliştirme ya da web tasarımı konusunda kendisini yeterli görmeyen birçok kişi artık kendi fikrini hayata geçirme cesareti bulabilir. Kişisel bir blog, portfolyo sitesi, basit bir uygulama, küçük bir yönetim paneli ya da fikir aşamasındaki bir ürün artık eskisine göre çok daha ulaşılabilir.
Ama her şey bu kadar kolay mı?
Tabii ki hayır. Vibe Coding çok güçlü bir yöntem olsa da kusursuz değil. Yapay zeka bazen istediğinizi yanlış anlayabiliyor. Bazen çalışan bir şeyi düzeltirken başka bir yeri bozabiliyor. Bazen de teknik olarak doğru görünen ama uzun vadede iyi olmayan çözümler üretebiliyor.
Bu yüzden tamamen kontrolü bırakmak doğru değil. Ortaya çıkan sonucu mutlaka test etmek gerekiyor. Masaüstünde düzgün görünen bir tasarım mobilde bozulabiliyor. Bir buton görsel olarak iyi durup işlevsel olarak çalışmayabiliyor. Ya da yazılan kod kısa vadede problemi çözse bile ileride düzenleme yapmayı zorlaştırabiliyor.
Benim burada öğrendiğim en önemli şeylerden biri şu oldu: Yapay zekayı bir “sihirli değnek” gibi değil, çok hızlı çalışan bir yardımcı gibi görmek gerekiyor. Son karar yine sizde olmalı. Ne istediğinizi bilen, sonucu kontrol eden ve gerektiğinde yönlendiren kişi siz olmalısınız.
Yeni başlayacaklara birkaç öneri
Eğer siz de Vibe Coding denemek istiyorsanız, bence ilk olarak çok büyük bir proje ile başlamayın. Küçük ama sizi heyecanlandıran bir fikir seçin. Örneğin kişisel bir web sitesi, basit bir not alma uygulaması, portfolyo sayfası ya da sadece tek sayfalık bir tanıtım sitesi olabilir.
İlk prompt’unuzda mümkün olduğunca net olun. Hangi tarzı istediğinizi, hangi renkleri sevdiğinizi, sitenin kimler için olduğunu, hangi bölümlerin yer alacağını anlatın. Hatta beğendiğiniz sitelerden örnekler verin.
“Minimal olsun” demek yerine, “bol boşluklu, yazı odaklı, siyah-beyaz ağırlıklı, sade tipografili ve mobil uyumlu olsun” demek çok daha iyi sonuç verir.
Bir diğer önerim de her şeyi tek seferde yaptırmaya çalışmamanız. Önce ana iskeleti oluşturun. Sonra başlığı düzeltin. Sonra mobil görünümü iyileştirin. Sonra yazı sayfasını düzenleyin. Yani süreci küçük parçalara bölün.
Böyle yaptığınızda hem kontrol sizde kalır hem de ortaya çıkan iş daha temiz olur.
Sonuç olarak…
Vibe Coding bana göre önümüzdeki dönemde daha çok duyacağımız, daha çok kişinin deneyeceği ve üretim alışkanlıklarını ciddi şekilde değiştirecek bir yaklaşım. Herkesin yazılımcı olmasına gerek yok ama herkesin fikrini daha kolay hayata geçirebilmesi bence çok heyecan verici.
Ben de bu siteyi geliştirirken öğrendiklerimi, denediklerimi ve karşılaştığım sorunları zaman zaman burada paylaşmaya devam edeceğim. Belki bir sonraki yazıda bu siteyi oluştururken kullandığım araçları, yazdığım promptları ve adım adım nasıl ilerlediğimi daha detaylı anlatırım.
Şimdilik bu yazıyı, kendi deneyimimden çıkan basit bir cümleyle bitirmek istiyorum:
Bir fikriniz varsa, artık başlamak için eskisi kadar çok bahaneniz yok. Yapay zekaya anlatın, deneyin, bozun, düzeltin ve yeniden deneyin. Çünkü bazen öğrenmenin en iyi yolu, sadece başlamaktır.
