Claude Code ile profesyonel web sitesi yapıp satmak

Claude Code ile profesyonel bir web sitesini Framer ya da Webflow gibi araçlara ihtiyaç duymadan, sadece prompt yazarak kurabilir ve bunu şirketlere hizmet olarak satabilirsiniz. Süreç dört adımdan oluşuyor: ne istediğinizi yazmak, bunu bir MD dosyasına dönüştürmek, kodlamayı ve canlıya almayı Claude Code'a bırakmak. Müşteriyi de Apify ile web sitesi olmayan işletmeleri bularak buluyorum.

Neden artık Webflow'a ihtiyacım yok?

Geleneksel modelde önce tasarımı yapıyor, içerikleri hazırlıyor, sonra blokları tek tek yerleştiriyorsunuz; bunun için de Framer ya da Webflow gibi araçlar kullanıyorsunuz. Ben de Webflow'a para ödüyordum, artık ödemiyorum. Aynısını, hatta daha güzelini Claude Code ile yapabiliyorum. Ona örnek bir web sitesi verdiğinizde birebir benzerini de kurabiliyor.

Bunu göstermek için kendi sitem üzerinden iki versiyon hazırladım: birincisini sıfırdan kurdurdum, ikincisinde beğendiğim bir sitenin benzerini istedim.

Claude Code nasıl kurulur?

Visual Studio Code ya da Antigravity'yi indiriyorsunuz. Eklentiler bölümünden Claude Code'u yüklediğinizde bir panel açılıyor ve prompt yazarak ilerliyorsunuz; isterseniz terminalde açılacak şekilde de ayarlayabilirsiniz. Üç çalışma modu var: otomatik düzenleme, planlama ve bypass. Bypass modunda Claude Code her adımda "şunu yapayım mı" diye sormadan bütün aşamaları kendisi yürütüyor, hata alınca alternatif yöntemler arıyor. Tam bir ajan gibi çalışıyor.

İlk versiyon: sıfırdan bir site nasıl kurdurulur?

1. Mevcut içeriği toplayın

Önce mevcut sitemi analiz ettirdim ve bütün sayfalarını PDF olarak indirdim. Amaç, Claude Code'un içerikleri ve yazıları okuyup benzer bir yapı kurabilmesi. Bütün sayfaların dosyada olduğundan emin olun.

2. Bir MD dosyası hazırlayın

MD dosyası, projenin ne olduğunu ve Claude Code'un neleri yapması gerektiğini yazdığınız düz metin bir talimat dosyası. Prompt'umla önce bu dosyayı oluşturdum: görseller için Nano Banana ve fal.ai kullanılacak, çok kaliteli bir web sitesi kurulacak. Sonra dosyayı sitenin görselleriyle birlikte boş bir Claude Code projesine verdim. Projeye başlarken Claude Code'un neler yapabilmesi gerektiğini mutlaka yazın. Yetkili erişimleri verirseniz dosya yönetimi yapar, kod üretir, arayüz oluşturur ve siteyi canlıya bile alır.

3. Arayüz için frontend design yeteneğini ekleyin

Burada önemli bir püf noktası var. Arayüzün kaliteli olmasını ve yapay zekayla aceleyle üretilmiş gibi durmamasını istiyorsanız UI kitlerinden, yani hazır arayüz bileşenlerinden yararlanmanız gerekiyor. Ben Claude Code'a arayüz için frontend design yeteneğini kullanmasını söylüyorum. Yetenek (skill), Claude Code'a belirli bir işi nasıl yapacağını öğreten hazır talimat paketi. Yetenek kütüphanelerinden frontend design'ı kopyalayıp MD dosyasına ekletiyorum.

4. fal.ai anahtarını verin ve limit koyun

Görsel ve video üretimi için fal.ai'dan bir API anahtarı alıp Claude Code'a verdim. Claude Code bunları kendisi üretebiliyor ama bir API'ye ihtiyacı var. Mutlaka limit koyun: ben en fazla 30 görsel ya da 10 video üretmesini söyledim. Limit olmazsa 100 istek atıp 100 dolarlık bir işlem başlatabilir.

5. Bittiğinde Vercel'e yayınlatın

Prompt'un sonuna, iş bittiğinde siteyi Vercel'de canlıya alacağımızı ekledim; yani Claude Code Vercel'e kendisi bağlanıp siteyi yayına alabilsin. Ardından bypass moduna geçtim ve Claude Code yaklaşık 25 dakikada siteyi kurdu. Bu sürede başında beklemeniz gerekmiyor, ben başka bir işle uğraşırken çalıştırdım.

Ortaya çıkan site Türkçe, İngilizce ve Hollandaca hazırlanmıştı ve üç dil de doğruydu. Sayfa çok hızlıydı, görselleri kendisi üretmişti. Sektör sayfaları, bir form ve blog yazıları da vardı; yazıların hepsini kendisi yazmıştı. Yine de benim için yeterince profesyonel değildi.

İkinci versiyon: beğendiğiniz bir sitenin benzeri nasıl yaptırılır?

Ertesi gün aynı projeyi açtım. Aynı klasörü açtığınızda Claude Code bütün dosyaları görüyor, bu yüzden her proje için bilgisayarınızda ayrı bir klasör açın. İdeal olanı, yaptığı her değişikliği otomatik olarak GitHub'a yüklemesi. Böylece projeyi istediğiniz cihazdan geri çekebilirsiniz.

İkinci prompt'ta mevcut mantığı ve içeriği korumasını ama daha detaylı bir şey istediğimi söyledim. Görseller için Nano Banana, video için Veo 3 kullanmasını, logoyu animasyonlu hale getirmesini, çok beğendiğim bir ajans sitesini incelemesini ve arka tarafa bir form otomasyonu bağlamasını istedim. O sitedeki açılış animasyonunu ve toplantı alınabilen takvimi de istiyordum; bunun için bir API anahtarı ve Calendly toplantı adresimi verdim.

Claude Code önce o sitenin bütün sayfalarını inceledi, hata aldığı yerlerde yeniden denedi ve sonunda 99 sayfa oluşturdu. Bu süreçte hiçbir şeye müdahale etmedim.

Site nasıl canlıya alınır ve neden kontrol edilmeli?

Deploy, yani canlıya alma için Claude Code'a "Vercel'e deploy et" demeniz yeterli. Vercel bağlanırken bir kerelik doğrulama penceresi açıyor; gösterilen kodu kopyalayıp yapıştırıyorsunuz. Altyapı şöyle işliyor: GitHub'da organizasyonunuzun içinde "websitem" gibi bir isimle yeni bir repo açıp URL'sini Claude Code'a veriyorsunuz, kodu oraya kendisi yüklüyor. Vercel de GitHub bağlantısı üzerinden projeyi deploy ediyor.

Burada bir uyarı: Claude Code "canlıya aldım" dedi ama sayfada hiçbir değişiklik yoktu. Vercel'de projenin deployments sekmesine baktığımda son deployment'ın iki gün önce yapıldığını gördüm. Bunu Claude Code'a söyleyip önce GitHub'daki projeyi, sonra Vercel'i güncellemesini istedim. Commit GitHub'a gitmişti ama site yine tam güncellenmedi; Vercel'de yeni bir paket kullanıldığında bazen sorun çıkabiliyor. Bu yüzden projeyi elle bir kez daha deploy ettim. "Bitti" mesajına değil, deployment tarihine bakın.

Tasarım nasıl daha profesyonel hale gelir?

Bu haliyle site fena değildi: videolar eklenmiş, form konmuştu. Ama beğendiğim görüntünün birebir aynısını istiyordum. Bunun için sayfanın PDF'ini ya da sayfanın layout ve stil kodlarını verebilirsiniz, ikisi de olur. Prompt'um kısaca şuydu:

Bu web sitesinin birebir aynısını yapmanı istiyorum. Yapay zekayla üretilen görseller biraz kalitesiz duruyor, onları düzelt. Yerine daha profesyonel, gerçek insan görselleri koy. Bunun için fal.ai üzerinden Nano Banana 2'yi kullan.

Yapmanız gereken tek şey prompt yazmak. "Şu görselleri beğenmedim, yeniden oluştur" dediğinizde bütün aşamaları kendisi yürütüyor.

Bir ipucu daha: yapay zeka hangi bileşeni kullanacağını uzun uzun düşünmez, her zaman kısa yolu seçer. 21st.dev gibi kütüphanelerde çok sayıda hazır bileşen var. Beğendiğiniz bir açılışın ya da animasyonun prompt'unu kopyalayıp Claude Code'a verdiğinizde onu sitenize entegre ediyor.

Web sitesini kime ve nasıl satarsınız?

Müşteri bulmak için Apify kullanıyorum. Apify, web'den veri çeken hazır araçların bulunduğu bir platform. Store bölümündeki Google Maps aracını çalıştırıp örneğin İstanbul Kadıköy'deki restoranları çekebilirsiniz. Araç hem e-postaları çıkarıyor hem de hangi işletmenin web sitesi olup olmadığını gösteriyor. Web sitesi olmayanlara site, olanlara güncelleme hizmeti satabilirsiniz.

Bu işletmelere ulaşmanın en mantıklı yolu kısa e-postalar. Gördüğüm dönüş oranları %7 ile %12 arasında ve yanıtların yarısı olumlu, yarısı olumsuz. %7 ile %8 dönüş oranında her 100 kişide yaklaşık 4 toplantı alırsınız. On toplantıda bir satış bile yapsanız, bir haftalık bir işle ilk projenizi bağlamış olursunuz. Claude Code ile profesyonellerin normalde 2.000 ile 3.000 dolar istediği web sitelerini çok daha basit şekilde yapabiliyorsunuz.

Kısacası iyi bir web sitesi için artık zaman kaybına, ek maliyete ya da birçok farklı aracı birleştirmeye gerek yok. Ne istediğinizi net yazmak, Claude Code'a doğru erişimleri vermek ve sonucu kontrol etmek yetiyor. Gerisi, bu siteye ihtiyacı olan şirketleri bulup onlara ulaşmak.

Bu yazı, Claude Code ile 1 Saatte Profesyonel Web Sitesi Yap ve Sat videomdan derlendi.

Sık sorulan sorular

Claude Code ile web sitesi yapmak ne kadar sürer?

Benim denememde Claude Code ilk versiyonu yaklaşık 25 dakikada kurdu ve site Türkçe, İngilizce ve Hollandaca hazırdı. Bypass modunda her adımda onay istemeden çalıştığı için bu sürede başında beklemeniz gerekmiyor. Tasarımı iyileştiren son prompt için de yaklaşık 30 dakika daha beklemek gerekiyordu.

Claude Code ile web sitesi yaparken MD dosyasına ne yazılmalı?

MD dosyasına projenin ne olduğunu, Claude Code'un neleri yapabilmesi gerektiğini ve hangi araçları kullanacağını yazıyorum. Benim dosyamda görseller için Nano Banana ve fal.ai, arayüz için frontend design yeteneği ve iş bitince Vercel'e yayın talimatı vardı. fal.ai için en fazla 30 görsel ya da 10 video gibi bir limit de koyuyorum.

Web sitesi hizmeti satmak için müşteri nasıl bulunur?

Apify'daki Google Maps aracıyla belirli bir bölgedeki işletmeleri, örneğin Kadıköy'deki restoranları çekiyorum. Araç e-postaları çıkarıyor ve hangi işletmenin web sitesi olmadığını gösteriyor. Sitesi olmayanlara web sitesi, olanlara güncelleme hizmeti için kısa bir e-posta gönderiyorum.

Claude Code canlıya aldım dediğinde site neden güncellenmiyor?

Bazen Claude Code canlıya aldığını söylese de yeni sürüm yayına çıkmamış olabiliyor; özellikle yeni bir paket eklendiyse Vercel'de sorun çıkabiliyor. Vercel'de projenin deployments sekmesinden son deployment tarihini kontrol edin. Tarih eskiyse Claude Code'dan önce GitHub'ı, sonra Vercel'i güncellemesini isteyin ya da projeyi elle yeniden deploy edin.