Claude ile web sitesi nasıl yapılır?

En hızlı yol boş sayfadan başlamamak. Çalışan bir şablonu Claude'a verip işini anlatıyorsun, o metinleri, renkleri ve içeriği senin işine göre değiştiriyor. Aşağıda adım adım anlattık.

Neye ihtiyacın var?

Bir bilgisayar (telefondan indirebilirsin ama kodu çalıştırmak için bilgisayar gerekir)
Claude: claude.ai hesabı ya da bilgisayarında Claude Code
Bir şablon. Next.js şablonlarını çalıştırmak için Node.js kurulu olmalı; düz HTML şablonlarında buna da gerek yok.

1. Önce ne istediğini yaz

Claude'a vermeden önce işletmeni birkaç satırda topla. Ne kadar net olursa o kadar az düzeltirsin:

İşletme adı: …
Ne yapıyor, kime hitap ediyor: …
Sayfada olması gerekenler: menü / hizmetler / fiyatlar / adres / çalışma saatleri
Renk ve hava: ör. koyu yeşil, sakin, sade
Dil: Türkçe

2. Sektörüne yakın bir şablon seç

Kafe için kafe, klinik için klinik şablonu seçersen yerleşim zaten doğru olur, sadece içerik değişir. Kütüphanede her şablonun canlı demosuna bakıp karar verebilirsin.

3. Klasörü Claude'a ver

Claude Code kullanıyorsan şablon klasöründe aç; claude.ai kullanıyorsan dosyaları yükle. Sonra birinci adımda yazdıklarını ekleyerek isteğini gönder. Bizim denediğimiz istek şuydu:

Bu klasör "Brewns" adlı bir kahve sitesi şablonu. Bunu Kadıköy'de "Kıyı Kahve" adında küçük bir kahveci için uyarla: marka adını, başlıkları ve sitedeki tüm metinleri Türkçe yap. Menüde filtre kahve, cortado ve San Sebastian cheesecake olsun. Adres: Moda Caddesi No:12, Kadıköy. Tasarımı ve animasyonları olduğu gibi koru.

"Tasarımı koru" cümlesi önemli: aksi hâlde araç beğendiğin yerleşimi de değiştirmeye kalkabilir.

4. Çalıştır, bak, düzelttir

Next.js şablonlarında klasörde npm install ve ardından npm run dev çalıştırırsın, site localhost:3000'de açılır. Düz HTML şablonlarında index.html'i açman yeterli. Beğenmediğin yerleri tek tek söyle. Bizim denemede logo hâlâ eski adı gösteriyordu; "sol üstteki logoyu da değiştir" demek yetti.

Şablondaki fotoğraflar kendiliğinden değişmez. Kendi fotoğraflarını klasöre koyup hangisinin nereye gideceğini Claude'a söylemen gerekir.

Ne kadar sürüyor?

Bizim denememizde Claude kahveci şablonunu ilk istekte 5 dakika 58 saniyede uyarladı; logoyu düzelttiği ikinci istek 2 dakika 59 saniye sürdü. Şablonu seçme, indirme ve kurulumla birlikte toplam yaklaşık 10 dakika; bu toplamın sunucunun açılışına düşen birkaç saniyesi ölçüm değil tahmin. Bu, içeriği önceden hazır bir işletme için geçerli; metin yazmak, fotoğraf çekmek ve karar vermek ayrı bir iş.

5. Yayına al

Yöntem şablonun türüne göre değişir:

Düz HTML şablonları: dosyaları olduğu gibi Netlify, Vercel ya da kendi hostingine yüklersin; derleme gerekmez.
Next.js şablonları: kaynak klasör doğrudan yayınlanmaz, önce derlenmesi gerekir. En pratik yol projeyi GitHub'a gönderip Vercel gibi bir platforma bağlamak; platform her güncellemede siteyi kendisi derler. Kendi hostingini kullanacaksan Node.js desteği ya da projenin izin verdiği ölçüde statik çıktı gerekir.
Alan adını, kullandığın platformun panelinden bağlarsın.

Sık yapılan hatalar

Her şeyi tek mesajda istemek. Küçük adımlar daha az hata demek.
Demo metinlerini unutmak. Sayfada İngilizce kalan bir satır var mı, son bir kez tara.
İletişim formunun gerçekten bir yere gönderdiğini kontrol etmemek.
Sadece bilgisayarda bakıp telefonda denememek.

Hazırsan şablonlara göz at. Terimin kendisini merak ediyorsan: Vibe coding nedir?