Claude Code ile vibe coding yapılarak geliştirilen kitaplık projesi
(balajmarius.com)- Yaklaşık 500 kitabı otomatik olarak sınıflandırmak ve görselleştirmek için Claude Code kullanılan kişisel bir proje örneği
- Mevcut ISBN tarayıcıları ve Goodreads Romence baskıları tanıyamadığı için başarısız olan sorun, OpenAI Vision API ve Claude’un yazdığı betiklerle çözüldü
- %90 doğrulukla metadata çıkarıldıktan sonra kalan kısım elle düzeltildi ve Open Library·SerpAPI üzerinden kapak görselleri otomatik olarak toplandı
- Framer Motion ile kaydırma tabanlı animasyonlar ve sayfa sayısına göre kitap kalınlığı gösterimi kullanılarak gerçek bir kitaplık benzeri etkileşim uygulandı
- Yapay zekanın uygulamayı üstlendiği, kullanıcının ise estetik yargı ve seçimleri yaptığı işbirliği yapısını gösterirken, “uygulama maliyeti azalıyor ama zevk hâlâ insanın payına düşüyor” fikrini vurguluyor
Tamamlanan Bookshelf - https://balajmarius.com/bookshelf projesine göz atın
Projeye genel bakış
- Yaklaşık 500 kitaba sahip olmasına rağmen listesini yönetemeyen biri, AI araçlarını kullanarak otomatik sınıflandırma ve görselleştirme sistemi kurdu
- Basit bir elektronik tablo yerine, Claude Code ile yürütme adımlarını otomatikleştirerek uzun süredir ertelenen kişisel proje tamamlandı
- Projenin odağı teknik mükemmellikten çok uygulamadaki darboğazları ortadan kaldırmak
Sorunun fark edilmesi
- ISBN tarayıcı uygulamaları ve Goodreads, Romence baskıları veya nadir yayımları tanıyamadığı için veri eksik kalıyordu
- Eksik veri daha da fazla karmaşa yaratarak projenin tekrar tekrar durmasına neden oldu
- İhtiyaç duyulan şey kusursuz bir uygulama değil, kusurluluğa dayanabilen bir sistem yapısıydı
Veri toplama ve işleme
- Kitapların kapak ve sırtlarının fotoğraflandığı 470 görsel temel alınarak veri oluşturuldu
- Claude’un yazdığı betik, her görseli OpenAI Vision API’ye gönderip yazar·başlık·yayınevi bilgilerini çıkardı ve sonuçları
JSONdosyalarına kaydetti - Yaklaşık %90 doğruluk elde edildi; kalan hatalar aydınlatma, hasar ve çözünürlük sorunlarından kaynaklandı
- Kalan %10 elle düzeltildi, ardından yeni kitap eklendiğinde aynı pipeline otomatik olarak çalıştırıldı
Kapak görsellerini iyileştirme
- Open Library API ile kapaklar getirildi ancak yarısının kalitesi düşüktü veya yanlış görsellerdi
- Claude, kalite puanlama ve hata bayraklama sistemi ekledi; başarısız olunduğunda bunun yerine SerpAPI üzerinden Google görsel araması kullanıldı
- Yaklaşık 460 kitaptan yalnızca 10’u manuel düzeltmeyle çözüldü ve otomasyon verimliliği sağlandı
Kitaplık arayüzünün uygulanması
- Basit bir kapak ızgarası yerine, gerçek bir kitaplık gibi kitap sırtı odaklı görsel sunum hayata geçirildi
- Claude, renk çıkarımı (color quantization) ve kontrast metin rengi hesaplaması yaptı
- Open Library’nin sayfa sayısı verisi kullanılarak kitap kalınlığı yansıtıldı, ayrıca hafif varyasyonlar eklenerek gerçekçilik artırıldı
- Sonuç olarak gerçek bir kitaplığa benzer görsel doku elde edildi
Animasyon ve etkileşim
- Framer Motion ile kaydırma sırasında kitap sırtlarının eğildiği kaydırma tabanlı animasyon eklendi
- Başlangıçta React durum güncellemeleri nedeniyle takılmalar yaşansa da, bu sorun motion values ve spring animasyonları ile düzeltildi
- Düzeltmeden sonra akıcı hareket sağlandı ve deneme maliyeti düştüğü için yinelemeli denemeler mümkün oldu
Gereksiz özelliklerin kaldırılması
- Sonsuz kaydırma özelliği eklendi ancak konteyner yüksekliği uyumsuzluğu ve kaydırma hataları nedeniyle kullanıcı deneyimi kötüleşti
- Teknik olarak çalışsa da gerekli olmadığı için kaldırıldı
- “Çalışıyor ama gereksiz olan kodu” kaldırma kararının insanın rolü olduğu vurgulandı
Mobil uyumluluk ve yığın görünümü
- Mobilde yatay kaydırma rahatsız edici olduğu için dikey yığın görünümü eklendi
- Claude, mevcut kodu analiz ederek animasyon zamanlaması, renk çıkarımı, kaydırma şeffaflığı işleme gibi unsurları yeniden kullandı
- Ayrı bir açıklama olmadan tamamen yeni bir bileşen üreterek AI’ın kodu anlama ve yeniden kurgulama yeteneğini gösterdi
İnsanın rolü ve sonuç
- Tüm kodu Claude yazmış olsa da, kullanıcı şu kararları verdi
- %90 doğruluğu kabul etmek
- 10 kapağı manuel olarak düzeltmek
- kitap sırtı odaklı tasarımı seçmek
- gereksiz özellikleri kaldırmak
- animasyonun duyusal olarak tamamlandığını doğrulamak
- Nihai çıktı, 460 kitabı otomatik sınıflandırıp görselleştiren web tabanlı bir kitaplık oldu
- Yapay zekanın uygulamayı, insanın ise zevk ve yargıyı üstlendiği işbirliği modelini gösteriyor
- Sonuç olarak “uygulama maliyeti sürekli düşüyor ama zevk hâlâ insanın payına düşüyor”
2 yorum
Sadece 10 tanesinde manuel işlem gerektiğini iddia ediyor ama bu ancak kendi kendini avutma. O 10 tanesini bulmak için tümünün tek tek denetlenmesi gerekmişti. Kuyruğun köpeği sallaması.
Hacker News görüşleri
Şu anki vibe coding, küçük ölçekli projeler için tam uygun bir noktada
Proje büyüdükçe bağlam yönetimi zorlaşıyor ve LLM gereksiz yere fazla kod üretmeye ya da ince hatalar oluşturmaya daha yatkın hale geliyor
Böyle durumlarda yeniden beyin fırtınası moduna dönüp sadece tasarımda LLM’den yardım almak, gerçek kodu ise doğrudan kendin yazmak ya da iskeleti kurup LLM’in içini doldurmasını sağlamak daha iyi oluyor
LLM’ler mevcut kodu az miktarda değiştirme veya var olan yapıyı kullanma konusunda hâlâ zayıf. Çoğu zaman yeni soyutlamalar eklemeye çalışıyorlar
Modül yapısını ben tasarlıyorum ve sonucu net olarak biliyorum. Tüm kodu ayrıntılı biçimde inceliyorum; iyi promptlar ve bağlam yönetimiyle (ör. örnek kod vermek,
agent.mdrehberleri vb.) yeterince kontrol etmek mümkünKod tabanı büyüdükçe modüller arasındaki sıkı bağlılık (tight coupling) performansı düşürüyor
Çözüm, “uygulamaya değil arayüze göre programla” ilkesidir
Her modülün sınırlarını netleştirip yalnızca gerekli kısımları açığa çıkaran arayüzleri ayrı dosyalara ayırır, Claude’un ya da ekip arkadaşlarının sadece o arayüzleri kullanmasını sağlarsan olur
Böylece bağlam azalır ve Claude daha iyi çalışır
Proje daha da büyürse arayüzlerin sayısı da artabilir; o zaman daha büyük birimler halinde ayırmak veya değişiklik kapsamını daraltmak gibi yöntemlerle yönetmek gerekir
Şimdi bunları epey büyük projelerde bile karıştırarak kullanabilecek durumdayız
“Daha iyi bir uygulamaya değil, kusurları tolere eden bir sisteme ihtiyacım vardı” cümlesi etkileyiciydi
Claude’un fikri üretmediği, uygulamayı üstlendiği ve benim de zevki üstlendiğim yönündeki yazım tarzı hoşuma gitti
Bugünlerde e-postalarda bile “Tekerleği yeniden icat etmedik. Tekerleğin kendisiyiz.” gibi cümleler sık görülüyor
Büyük laflar kullanmaması ve aynı cümle yapısını tekrar etmesi, insan alışkanlığı gibi duruyordu
AI genelde cümle kalıplarını daha rastgele karıştırır; bu ise tam tersine tutarlı bir çerçeveyi koruyor
Henüz editoryal sezgisi tam oturmamış birinin bilinçli olarak havalı yazmaya çalışması gibi
Başkalarının bunu gerçekten AI kokusu olarak algılayıp algılamadığını merak ediyorum
Yalnız LinkedIn’de bu tarz o kadar çoğaldı ki dün sonunda patlayıp bir gönderi paylaştım
Muhtemelen değer duygusu ile atmosferin ince bir birleşimi, AI tespitini etkiliyor
Henüz vibe coding ile başarıya ulaşmış büyük bir proje görmedim
Çoğu zaten eğitim verisinde mevcut olan küçük programlar
Gerçekten devrim niteliğindeyse yeni bir sıkıştırma algoritması ya da gezgin satıcı problemi için en iyi çözüm gibi bir şey üretmesini isterdim
AI kodlama araçları da iyi oldukları alana odaklanmalı
Ben bu araçlarla sık sık küçük işletme otomasyon yazılımları yapıyorum
Bu sayede eskiden imkânsız olan şeyleri yapabiliyorum ve üretkenliğim 10 kat arttı
Perfect Software yazısındaki gibi, biri için mükemmel uygulama onun zevkine ve amacına uyan uygulamadır
LLM’ler sayesinde böyle kişiye özel mükemmel yazılımlar üretmek kolaylaştı
Yarışma 1, Yarışma 2
Benim puanım diğer katılımcıların iyileştirme yapmasını teşvik etti
AI bu sıkıcı işleri ortadan kaldırırsa insanlar yaratıcı işlere odaklanabilir
Küçük sorunları çözen bu tür vibe coding, zamanı çok daha değerli kullanmanın bir yolu
Ben de birkaç gün önce aynı fikirle Claude kullanarak bir kitaplık uygulaması yaptım
nindalf.com/books
Bu sayede daha çok okumaya başladım ve highlight’lar ile notları görmek kolaylaştı
Claude’un UI önerileri benim kendi başıma yapacaklarımdan çok daha iyiydi, backend de neredeyse aynıydı
Yalnız bazen garip doğrulama mantığında ısrar ediyordu; ben doğrudan düzeltince “Haklısın!” diye kabul etti. Böyle durumlar nadirdi
Ben de benzer bir kitaplık uygulaması yaptım ama sesli kitap notlarını yönetmek için hâlâ iyi bir yöntem bulamadım
Senin sürümün de ilginç görünüyor
Ben de benzer bir şey denedim ama benimki Claude açısından bir başarısızlık örneğiydi
andrewblinn.com üzerinde kitaplık görsellerinin tıklanabilir olmasını istiyordum
Ama Claude sık sık Goodreads bağlantılarını yanlış üretti ve geçersiz kimlikler ekledi
Kitap sırtı tanıma da isabetsizdi, bu yüzden sonunda işi Figma’da elle yaptım
Claude’un önerdiği otomasyon fazla yavaş ve pahalıydı
Ben de her yıl okuduğum kitapları HTML olarak sunan statik bir kitaplık sayfası yapardım
Eskiden Delicious Library’i yeniden oluşturma denemem hakkında da yazmıştım
Aslında gerekli değildi ama kitapları düzenlemek keyifliydi
“460 kitap bir ölçek sorunu değil. Çalışan kodu ne zaman silmek gerektiğini bilmenin yerini AI tutamaz” sözüne katılıyorum
Ben de 900 puan ve 550 kitap verisi olan bir uygulama yaptım; sonsuz kaydırma ya da karmaşık arama özelliklerini tarayıcı zorlanana kadar eklememeye karar verdim
Şimdilik “sayfa içinde ara” yeterli
“Doğruluk %90 ise yeterlidir” sözü hoşuma gitti
LLM yeni hatalar üretse bile dünyada zaten hataya toleranslı sistemler çok fazla
Bu yaklaşım, AI’ye karşı olumsuz bakan kişiler için bile faydalı olabilir
Ben de moviesonthe.computer üzerinde film izleme kayıt uygulamamı vibe coding ile yaptım
“Kendime ait bir Letterboxd klonu” gibi net bir fikirle başlayınca süreç hızlı ilerledi
Bu tür kişiye özel uygulama geliştirme yeteneği inanılmaz güçlü
Ama mevcut araçlar, geliştirici olmayanlara düşünme biçiminin kendisini öğretme konusunda yetersiz
Dediğin gibi, programlama geçmişi olan biri bu tür projeler için çok daha kolay prompt yazabiliyor
Açık konuşmak gerekirse bu kişinin yaptığı şeyin kullanılabilirliği berbat
Kendisi bir başarı hissi yaşamış olabilir ama gerçekte bu, üretkenlik aracından çok eğlencelik bir oyuncak gibi
Yine de bu tür denemelerden öğrenilecek şeyler var
Ama kişisel bir araçsa amaç doğrudan eğlence de olabilir
Ben de küçükken BASIC ile eğlenmek için kod yazardım. Üretken değildi ama yine de yeterince kıymetliydi