Hadi gelin itiraf edelim: prompt’u yazdık, kırk saniye bekledik ve karşımıza koyu temalı bir yönetim paneli geldi. Grafikler yerli yerinde, kenar boşlukları düzgün, hatta “henüz kayıt yok” ekranı bile düşünülmüş. O an hepimiz kendimizi dâhi sandık. Bu his ortalama beş dakika sürer. Altıncı dakikada “peki şimdi bunu kendi projeme nasıl taşıyacağım” sorusu gelir ve mutfak kapısı gıcırdayarak açılır.
Bölüm 3.1’de ajanı editörün içine alıp çoklu dosya düzenlemesini konuşmuş, bir sonraki adımda Mega-Prompting ve .cursorrules konularına geçeceğimizi söylemiştim. El kitabının sırası araya bu bölümü koyuyor ve iyi de yapıyor. Ajana anayasa yazmadan önce – o iş Bölüm 4.1 ve 4.2’de – ajanın önümüze koyduğu ilk tabağın içinde ne olduğunu bilmemiz gerekiyor.
Çünkü v0 ve Bolt.new tam olarak hazır yemek reyonu gibi çalışıyor. Beş dakikada sıcak bir tabak veriyorlar; ama o tabağı kendi mutfağınıza taşıdığınızda işin rengi değişiyor. Gelin bu iki aracın gerçekte ne yaptığına, neyi yapmadığına ve prototipi projeye sokmadan önce bakılması gereken beş şeye bakalım.
Aynı Reyon, Çok Farklı İki Tabak
İkisi de “yaz, çalışsın” vaat ediyor. Ama biri vitrini kuruyor, diğeri mutfağın tamamını tarayıcınızın içine taşıyor. Bu ayrımı bilmeden seçim yaparsanız, yanlış aletle iş görmüş olursunuz.
v0: Vitrini Kuran
Vercel’in aracı, ürettiği kodu belli bir dünyada üretiyor: resmî dokümantasyona göre Next.js, React, Tailwind CSS ve shadcn/ui; veri tarafında Python, Pandas ve Matplotlib. Tasarım Modu (Design Mode) ile üretilen arayüzü prompt yazmadan elle düzeltebiliyor, çıktıyı doğrudan Vercel’e deploy edebiliyor ve GitHub ile senkronize edebiliyorsunuz.
Teknik Detay: v0 mesaj sayısıyla değil, jetonla (token) ücretlendiriliyor. Vercel’in 13 Mayıs 2025 tarihli duyurusunda anlattığı gibi, girdi ve çıktı jetonları krediye çevriliyor. Güncel fiyat sayfasında ücretsiz plan aylık 5 dolarlık kredi ve günde 7 mesaj, Plus planı kullanıcı başına ayda 30 dolar (30 dolarlık kredi ve günlük 2 dolarlık bedava kredi), Business planı ise kullanıcı başına ayda 100 dolar.
Acı Gerçek: Kredi tüketimini sadece prompt’unuzun uzunluğu belirlemiyor; sohbet geçmişi ve projeye eklediğiniz kaynak dosyalar da bağlama giriyor. Yani aynı sohbette ne kadar uzun tartışırsanız, her yeni mesaj o kadar pahalıya mal oluyor. Uzun muhabbet yerine temiz ve yeni bir oturum, cüzdan açısından daha ucuz.
Bolt.new: Mutfağı Tarayıcıya Taşıyan
Bolt.new’in numarası farklı: StackBlitz’in WebContainer teknolojisiyle Node.js’i doğrudan tarayıcınızın içinde çalıştırıyor. npm install gerçekten çalışıyor, dev sunucusu gerçekten ayağa kalkıyor, terminal gerçek bir terminal. Sunucu yok, kurulum yok, “bende çalışıyordu” yok.
Teknik Detay: Bu sihrin bedeli iki tarayıcı özelliğine bağımlılık: SharedArrayBuffer ve cross-origin isolation. WebContainer dokümantasyonu tam desteği Chromium tabanlı tarayıcılarda (Chrome, Brave, Edge) veriyor; Firefox ve Safari 16.4 TP beta seviyesinde. Chromium’daki credentialless izolasyon modu Firefox ve Safari’de yok, ki önizleme penceresinde kendi uygulamanızı test etmek için gereken şey tam olarak bu.
Gizli Hazine: Entegrasyon listesi bir prototip aracına göre fazla ciddi. Supabase ile hazır veritabanı, kimlik doğrulama ve edge fonksiyonları; ayrıca Netlify, GitHub, Stripe, Expo, Figma ve MCP sunucuları. Fiyat tarafında ücretsiz plan günde 300 bin, ayda 1 milyon jeton; Pro ayda 25 dolara 10 milyon jeton ve günlük tavan yok. 1 Temmuz 2025’ten beri ücretli planlarda kullanılmayan jetonlar bir ay devrediyor.
| Soru | v0 | Bolt.new |
|---|---|---|
| Asıl işi | Arayüz ve bileşen üretimi | Tarayıcıda tam yığın proje |
| Varsayılan yığın | Next.js, React, Tailwind, shadcn/ui | Node.js tabanlı ne varsa |
| Çalışma ortamı | Vercel altyapısı | Tarayıcıda WebContainer |
| Ücretsiz sınır | Aylık 5 $ kredi, günde 7 mesaj | Günde 300 bin, ayda 1 milyon jeton |
| İlk ücretli basamak | Plus, 30 $ / kullanıcı / ay | Pro, 25 $ / ay |
| Ne zaman seçilir | Ekranı görmek, tasarımı tartışmak | Akışı uçtan uca denemek |
Beş Dakikalık Tabak, Beş Haftalık Mutfak
Prototipin hızı yalan değil. Yalan olan, o hızın production’a devredilebileceği fikri. Aradaki farkı dört başlıkta toplayabiliriz.
Etiketi okumadan yemeyin
v0’ın ürettiği arayüzün altında shadcn/ui var ve shadcn/ui bir npm bağımlılığı değil: bileşenlerin kaynak kodu doğrudan sizin projenize kopyalanıyor. Bu, kontrol açısından güzel; bakım açısından ise şu demek: üretilen kod artık sizin kodunuz. Bir hata çıktığında npm update sizi kurtarmaz, o dosyayı açıp okumanız gerekir. Prototipte kimsenin okumadığı şey de tam olarak budur.
Son kullanma tarihine bakın
Üretilen proje hangi sürümle geliyor, ilk bakılacak yer package.json. Next.js’in güncel sürümü 16.3.5 (11 Eylül 2026). Next.js 15’in güvenlik desteği ise 21 Ekim 2026’da bitiyor. Elinize 15 ile kurulmuş bir prototip geçtiyse, projeye daha ilk gün bir yükseltme borcuyla başlıyorsunuz. Hazır yemeğin üstündeki tarihe bakmamak, mutfakta kimsenin affetmediği hatadır.
Tarayıcı mutfağında ocak yok
WebContainer’ın sınırı net: yalnızca web’in doğal olarak desteklediği diller çalışır, yani JavaScript ve WebAssembly. Native eklentiler --no-addons ile varsayılan olarak kapalıdır; C++ ile yazılmış bir modülü yükleyemezsiniz. Kendi service worker’ınızı da kuramazsınız, çünkü WebContainer ağ altyapısı için zaten kendi service worker’ını kullanıyor. Birden fazla projeyi aynı anda açık tutarsanız tarayıcı hafızası tükenir ve şu hatayı görürsünüz:
WebAssembly.instantiate(): Out of memory: wasm memoryYani görüntü işleme, native kripto kütüphanesi, headless tarayıcı veya bir Docker adımı gerektiren her şey bu mutfakta pişmez. Prototip çalışıyor diye “demek ki mimari tutuyor” demeyin; tutan şey, gerçek bağımlılıkların henüz sahneye çıkmamış olması.
Şemaya dokunanın geri dönüşü yok
Bölüm 2.2’de şemanın kutsallığından bahsetmiştik. Bolt tarafında bunun çok somut bir karşılığı var: Bolt’un sürüm geçmişi özelliği Supabase veritabanını geri almıyor. Yani projeyi eski bir sürüme döndürdüğünüzde kod geri gelir, veritabanı geldiği gibi kalır. Prototipte bu bir ayrıntı. Müşteri verisi girdiği gün ayrıntı olmaktan çıkar.
Prototipi Mutfağa Sokmadan Önce Beş Kontrol
Üretilen projeyi indirdiniz ve kendi reponuza almak üzeresiniz. Tek bir npm install ile devam etmeden önce şu beş komutu çalıştırın; on dakikanızı alır, haftanızı kurtarır.
# 1. Stack'in yaşı: prototip hangi sürümlerle geldi?
npm ls next react tailwindcss --depth=0
# 2. Tarayıcı mutfağında pişmeyen native bağımlılıklar
npm ls --all --parseable 2>/dev/null | grep -Ei 'sharp|bcrypt|canvas|puppeteer|playwright'
# 3. Prototipin getirdiği paketlerde bilinen açık var mı?
npm audit --omit=dev
# 4. İstemciye sızmış anahtar var mı?
grep -rn "NEXT_PUBLIC_.*\(KEY\|SECRET\|TOKEN\)" app components lib 2>/dev/null
# 5. Gerçekte kaç satır kodu devralıyorsunuz?
find app components lib \( -name '*.ts' -o -name '*.tsx' \) | xargs wc -l | tail -1Dördüncü komut en çok sürpriz çıkaranı. NEXT_PUBLIC_ ön eki o değişkeni istemci paketine gömer; prototip hızlı çalışsın diye oraya konmuş bir servis anahtarı, siz fark etmeden yayına çıkar. Beşinci komutun çıktısı da ayık tutar: “birkaç ekran” sandığınız prototip çoğu zaman dört haneli satır sayısıyla gelir ve o satırların tamamı artık sizin sorumluluğunuzdadır.
Prototipten Sonra Sahneyi Kim Devralıyor?
Vitrin kurulduktan sonra işi prototip aracı yürütmüyor. Repoya inen kodu bölme, büyütme ve test etme işi başka bir kategoriye geçiyor: terminal ajanları ve ajan-öncelikli platformlar. Anthropic in Claude Code u ile OpenAI nın Codex i bu kategoride; ikisinin de çalışma birimi açık dosya değil, görev. Formu yeniden yaz ve testini de ekle dediğinizde ekrandaki dosyaya değil repoya bakarlar. Google un Antigravity si aynı işi birden fazla yerel ajanı paralel koşturarak yapıyor ve geliştiriciler için ücretsiz sunuluyor. Kodun makineden çıkmasını istemiyorsanız Cline, Aider veya OpenCode ile lokal bir modele bağlanabilirsiniz; oraya Bölüm 3.3 te geleceğiz.
Benim çizgim şu: vitrini prototip aracı kurar, mutfağı ajan işletir. v0 ın ürettiği ekranı tartışmak için başka aracı açmaya gerek yok. Ama o ekran production a girecekse migration ı, testi ve yeniden yapılandırmayı yazacak olan şey editörünüzün otomatik tamamlaması değil, görev alan bir ajandır. Kategori karşılaştırmasının tamamı Bölüm 3.1 de duruyor.
Vitrin Güzeldir, Fatura Mutfakta Kesilir
Bu araçları küçümsemek için yazmadım bunları. v0 ile bir ekranı tartışmak, Figma’da üç gün dönüp durmaktan daha verimli. Bolt.new ile bir akışı uçtan uca denemek, toplantıda anlatmaktan daha ikna edici. Doğru kullanım şu: prototip bir karar aracıdır, bir teslimat değil. Ekranı görüp yön belirlersiniz, sonra o yönü kendi mutfağınızda, kendi standartlarınızla pişirirsiniz.
Beş dakikada gelen tabağı beğenin, afiyetle de yiyin. Ama etiketini okuyun, tarihine bakın, mutfağınızın o yemeği kaldırıp kaldırmadığını bilin. Vibe Coder hızlı tabak sevdiği için değil, hangi tabağın nereden geldiğini bildiği için hızlıdır.
Bir sonraki bölümde (3.3) buluta hiç uğramadan çalışmayı konuşacağız: Qwen-Coder ve Llama ile lokal modeller, gizlilik, gecikme ve GPU faturası.
Teknolojiyle kalın, prompt’la değil sorumlulukla kodlayın.
“Vibe Coder #3.2: Frontend Prototipleme – v0, Bolt.new ve Beş Dakikalık Hayaller” için bir yanıt
[…] Devamı: Bölüm 3.2: Frontend Prototipleme – v0, Bolt.new ve Beş Dakikalık Hayaller. […]