Claude Code ile web sitesi: prompt yaz, canlıya al, müşteriye sat

Claude Code ile sıfırdan ya da örnek bir siteden profesyonel bir web sitesi kurmayı, Vercel'de yayına almayı ve ilk müşterileri bulmayı öğreneceksin.

Hızlı not: fal'a görsel ve video limiti koy: en fazla 30 görsel ya da 10 video. Limit koymazsan 100 istek, 100 dolarlık bir işlem demek olabilir.

Bu rehberin videosu: CLAUDE CODE İLE 1 SAATTE PROFESYONEL WEB SİTESİ YAP VE SAT: 2026 REHBERİ (00:24:08).

Claude Code'u editörün içine kur

Önce Visual Studio Code ya da Antigravity'yi indir.

Extensions bölümünden Claude Code eklentisini yükle. Bir panel açılır, oraya prompt yazarak ilerlersin.

Paneli aşağıda terminal olarak da açabilirsin. Bu kullanım bizce çok değerli.

• Editör: Visual Studio Code veya Antigravity
• Eklenti: Claude Code
• Modlar: otomatik editleme, bypass, planlama

1. Editörü indir
2. Extensions'a gir
3. Claude Code'u yükle
4. Paneli terminalde aç

Örnek siteyi PDF yap, isteğini MD dosyasına yaz

Örnek aldığın sitenin her sayfasını PDF olarak kaydet. Bütün sayfaların olduğundan emin ol.

Claude Code bu PDF'lerden hem yazıları okur hem de benzer yapıyı kurar.

Sonra ne istediğini bir MD dosyasına yazdır. Bu dosya projenin altyapısıdır. Ayrı prompt vermesen bile Claude Code dosyayı okuyup başlar.

• Görseller için Nano Banana
• Videolar için Veo 3
• Görsel ve video üretimi için fal
• Yayına almak için GitHub ve Vercel

1. Örnek sitenin sayfalarını PDF kaydet
2. Ne istediğini prompt olarak yaz
3. MD dosyası oluşturt
4. PDF'leri ve MD dosyasını Claude Code'a ver

Ekteki PDF'lerdeki siteyi incele. Bana Claude Code'a verebileceğim bir proje altyapısı çıkar ve bunu bir MD dosyası olarak yaz. Görseller için Nano Banana, videolar için Veo 3 kullan ve bunları fal üzerinden üret. Arayüz için frontend design yeteneğini kullan. İş bitince projeyi GitHub'a yükle ve Vercel'e bağlanıp canlıya al. Claude Code'un yapabilmesi gereken her şeyi dosyaya yaz. Promptumu da iyileştir.

Vibe coded görünmesin: frontend design yeteneğini ekle

Arayüzün kaliteli dursun istiyorsan hazır yetenekler ve arayüz kitleri kullan.

"Claude skills" diye aratınca aitmpl sitesine ulaşırsın. Orada bir sürü Claude Code yeteneği var.

Frontend design yeteneğini kopyala, yapıştır ve MD dosyasına eklet. Test yeteneklerini de ekleyebilirsin.

• Yapay zeka kısa yolu seçer, en hızlı çözümü düşünür.
• Beğendiğin bir animasyonun promptunu kopyalayıp doğrudan ver.
• Belirli bir açılış ya da animasyon istiyorsan açıkça yaz.

Arayüzün iyi olması için frontend design yeteneğini kullanman gerekiyor. Aşağıya yapıştırdığım yeteneği oku ve MD dosyasına ekle.

fal anahtarını ver, harcamaya tavan koy

Claude Code görsel ve video üretebilir ama bunun için API anahtarına ihtiyacı var.

fal'a gir, bir API anahtarı al ve Claude Code'a ver.

Sonra limit koy. Videoda en fazla 30 görsel ya da 10 video dedik.

• İstek atıp atmadığını ara ara kontrol et.
• AI görseller kalitesiz durursa gerçek insan görselleriyle yeniden ürettir.

fal'ı çok fazla kullanma. En fazla 30 görsel ya da 10 video üret. Daha fazlasını oluşturma.

Bypass modunda çalıştır, GitHub ve Vercel ile canlıya al

Bypass permissions açıkken Claude Code her adımda izin sormaz. Alternatif yolları kendisi arar ve ajan gibi çalışır.

Yayına almak için GitHub'da bir repo aç, örneğin "websitem". URL'yi Claude Code'a ver.

Vercel bağlanırken tek seferlik bir doğrulama açılır. Gösterilen kodu kopyalayıp yapıştırırsın.

1. Bypass permissions'ı aç
2. GitHub'da repo aç, URL'yi ver
3. Claude Code commit'i push etsin
4. Vercel doğrulama kodunu yapıştır
5. Vercel'de Deployments sekmesini kontrol et

Canlıya aldım dedin ama son deployment iki gün önce yapılmış. Önce GitHub'daki projeyi güncelle, sonra Vercel'i güncelle.

Web sitesi olmayan işletmeleri Google Maps'ten bul

Apify'da Store'a gir ve Google Maps aracını çalıştır.

Örneğin "İstanbul Kadıköy" restoranlarını çek. Hangisinin web sitesi var, hangisinin yok, görürsün.

Sitesi olmayana yeni site, olana yenileme teklif et. E-posta göndermek en mantıklısı. Kısa yaz.

• Sitesi olmayan işletme: yeni site teklifi
• Sitesi olan işletme: "Sitenizi güncellemek ister misiniz?" teklifi

1. Apify Store'a gir
2. Google Maps aracını seç
3. Bölge ve sektör gir
4. Sitesi olmayanları ayır
5. Kısa bir e-posta gönder

Adım adım

1. Visual Studio Code ya da Antigravity'ye Claude Code eklentisini kur.
2. Örnek sitenin bütün sayfalarını PDF olarak kaydet.
3. İsteğini yazıp bir MD dosyası oluşturt, frontend design yeteneğini ekle.
4. fal API anahtarını ver ve görsel, video limiti koy.
5. Bypass modunu açıp Claude Code'un siteyi kurmasını bekle.
6. GitHub reposunu bağla ve Vercel ile canlıya al.
7. Vercel'de Deployments tarihini kontrol et, gerekirse yeniden deploy et.

Örnek: Leftflow sitesini iki turda kurduk

1. Leftflow sitesinin sayfalarını PDF yaptık ve MD dosyasıyla Claude Code'a verdik.
2. İlk sürüm yaklaşık 25 dakikada çıktı: Türkçe, İngilizce ve Felemenkçe, bloglar ve form dahil.
3. Yeterli bulmadık. Ertesi gün beğendiğimiz bir ajans sitesini örnek verdik.
4. Nano Banana, Veo 3, animasyonlu logo, form otomasyonu ve Calendly takvimi istedik.
5. Claude Code 99 sayfa oluşturdu ama Vercel'de son deployment iki gün önceydi.
6. GitHub ve Vercel'i güncellemesini istedik, sonra manuel deploy ile yeni sürümü yayına aldık.

Sık yapılan hatalar

Kontrol listesi

• Örnek sitenin bütün sayfaları PDF olarak kaydedildi mi?
• MD dosyasında Claude Code'un yapacağı her iş yazıyor mu?
• Frontend design yeteneği MD dosyasına eklendi mi?
• fal için görsel ve video limiti verildi mi?
• GitHub reposu bağlı ve son commit push edildi mi?
• Vercel'de son deployment tarihi bugün mü?

Bugün şunu yap

1. Claude Code eklentisini editörüne kur.
2. Beğendiğin bir sitenin bütün sayfalarını PDF olarak kaydet.
3. İsteğini yazıp Claude Code'a bir MD dosyası oluşturt.
4. GitHub'da "websitem" adında boş bir repo aç.
5. Apify'da kendi semtindeki bir sektörü Google Maps ile tara.

Sıkça Sorulan Sorular

Nasıl hazırlandı: Bu yazıyı Burhan Kocabıyık'ın videosundan yapay zeka yardımıyla çıkardık. Her somut bilgiyi videoyla karşılaştırıp denetledik.