Claude ile Web Sitesi Yapma: Prompt ve Gerçekler

Claude ile web sitesi yapma, ilk taslağı hızlı çıkarmak için gerçekçi bir yol. Ama sonuç “hazır site” değil, düzenlemeniz gereken bir başlangıç. Hızı en çok brief’in netliği, işi bölüm bölüm ilerletmeniz ve çıktıyı tarayıcıda gerçekten kontrol etmeniz belirler.

Bu yazı örnek prompt’larla bir iş akışı, Claude’un iyi ve zayıf kaldığı yerler ve bitirmeden önce yapılacak kontroller içeriyor. Claude Code’un kurulumunu Claude Code nedir yazısında anlattım; WordPress sitesine bağlamayı ise burada ele almıyorum.

Claude ile site yapmanın üç yolu

Hedefinize göre yol değişir:

Birinci yol görsel bir fikri hızla görmek için iyi, ama kod kopyalayıp dosyaya yapıştırmanız gerekir. İkinci yolda Claude dosyaları kendisi oluşturur ve düzenler; ayrıntılar için Claude Code rehberine bakın. Üçüncü yol için önce bağlantıyı kurmanız gerekir; seçenekler Claude WordPress bağlantısı yöntemleri yazısında.

Brief yazın, “site yap” demeyin

“Bana bir ana sayfa yap” gibi kısa bir istek genel geçer sonuç verir. Claude’un tahmin etmesine izin verdiğiniz her şey bir varsayıma dönüşür. Başlamadan önce şunları yazın:

• Site kimin için ve ziyaretçiden ne istiyorsunuz (arama, form, satın alma)?
• Hangi sayfalar olacak?
• Renk, yazı tipi ve genel his (örnek sitelerle birlikte).
• Gerçek metinler: firma adı, hizmetler, telefon, adres. Siz vermezseniz Claude uydurma yer tutucu yazar.
• Teknik sınırlar: framework var mı, statik mi, WordPress mi?
• Logo ve fotoğraflar, mümkünse web için boyutlandırılmış.
• Formdan gelen mesajın nereye gideceği (e-posta adresi ya da bir hizmet).

Örnek bir ilk prompt:

Küçük bir muhasebe ofisi için tek sayfalık, statik bir web sitesi
yapacağız. Hedef: ziyaretçinin telefonla arayması veya form doldurması.

Bölümler: üstte kısa tanıtım ve arama düğmesi, hizmetler (3 madde),
sık sorulan sorular, iletişim formu, alt bilgi.

Tasarım: sade, açık zemin, tek vurgu rengi (koyu mavi), sistem
yazı tipleri. Mobilde önce tasarla.

Henüz kod yazma. Önce sayfa yapısını ve dosya düzenini öner.
Eksik bilgileri bana sor; yer tutucu metni "[DOLDURULACAK]"
olarak işaretle, uydurma.

Son iki cümle önemli: planı onayınıza sunmasını ve eksikleri sormasını isteyin. Claude Code’da bunun doğal karşılığı plan modu. claude --permission-mode plan ile başlatırsanız, resmi dokümana göre Claude siz planı onaylayana kadar kaynak dosyaları düzenlemez.

Bölüm bölüm ilerleyin

Tüm sayfayı tek istekte istemek yerine bölüm bölüm gidin. Her adımda sonucu tarayıcıda açıp bakın.

1. İskelet: HTML yapısı, başlık hiyerarşisi, boş bölümler.
2. Stil: renkler, yazı tipleri, boşluklar. Bunları değişken olarak tek yerde tanımlatın.
3. Bölümler: her biri için ayrı istek. “Hizmetler bölümünü ekle, üç kart, mobilde tek sütun.”
4. Etkileşim: menü, form doğrulaması.
5. İnce ayar: metinleri, boşlukları, başlıkları düzeltmek.

Her bölüm sonrası geri bildirimi somut verin. “Daha güzel olsun” yerine “Kartların arasındaki boşluğu artır ve başlıkları sola hizala” demek, Claude’un aynı şeyi iki kere denemesini önler.

Doğrulama adımı ekleyin

Claude Code’un en iyi uygulamalar sayfası şunu önerir: Claude’a işi bitirdiğini kontrol edebileceği bir yol verin. Web sitesi için bu şöyle olabilir:

Değişiklikten sonra projeyi derle. Hata varsa düzelt.
Bittiğinde hangi dosyaları değiştirdiğini ve neyi
doğruladığını listele.

Derleme geçse bile görsel sonucu siz kontrol edin. Tarayıcıda dar ve geniş ekranda sayfayı açın, klavye ile Tab tuşuyla gezinin, formu gönderin.

Hazır prompt kalıpları

Aşağıdaki kalıpları kendi projenize göre uyarlayın. Köşeli parantez içindekileri siz doldurun.

Düzeltme isteği:

Hizmetler bölümünde kartların arası dar. Kartlar arasına 24px boşluk
ekle, başlıkları sola hizala. Başka hiçbir bölüme dokunma.

Bir sorunu teşhis ettirmek:

Mobilde menü düğmesine basınca menü açılmıyor. Önce nedenini bul ve
bana açıkla; düzeltmeyi ben onaylayınca yap.

Erişilebilirlik gözden geçirmesi:

Bu sayfanın HTML'ini şu açılardan incele: başlık sırası, form
etiketleri, görsel alt metinleri, düğme ve bağlantı adları.
Bulduklarını önem sırasıyla listele, henüz değiştirme.

Metin için:

Aşağıdaki gerçek bilgilerden [hizmet adı] için 80 kelimelik bir
açıklama yaz. Verilmeyen hiçbir bilgiyi ekleme, rakam uydurma:
[buraya bilgileri yapıştırın]

Kalıpların ortak yanı üç şey: kapsamı daraltmak (“başka hiçbir şeye dokunma”), önce analiz isteyip sonra değişikliğe geçmek ve uydurma yasağını açıkça yazmak. Böylece istemediğiniz değişiklikleri ve uydurma bilgiyi baştan sınırlamış olursunuz.

Kaç tur sürer?

Süre garantisi vermek mümkün değil; site boyutuna, brief’in netliğine ve içeriğin hazır olmasına bağlı. Metin, fotoğraf ve hizmet detayları hazırsa ilk çalışan taslağa daha çabuk ulaşırsınız. Hazır değilse Claude yer tutucuyla ilerler ve içerik işini sonraya ertelemiş olursunuz.

İlk taslak sonrası beklenen turlar: düzen düzeltmeleri, metin düzeltmeleri, mobil sorunlar, erişilebilirlik ve hız ayarları. Bunları tek istekte değil, ayrı ayrı yaptırın; her turdan sonra kontrol edin.

Projeye kalıcı kural yazın

Claude Code kullanıyorsanız her oturumda tekrar anlatmamak için kuralları proje köküne CLAUDE.md olarak yazın; ayrıntı için Claude Code rehberine bakın. Bir site projesi için kısa bir örnek:

# Site kuralları
- Statik site: HTML, CSS, az miktarda JavaScript. Framework ekleme.
- Renkler ve boşluklar `style.css` başındaki değişkenlerden gelir.
- Yer tutucu metni uydurma; eksik bilgiyi "[DOLDURULACAK]" yaz.
- Her değişiklikten sonra hangi dosyaları değiştirdiğini listele.
- Görsellere anlamlı alt metin yaz; başlık sırasını (h1, h2, h3) bozma.

SEO ve içerik için dürüst not

Claude başlık, açıklama ve sayfa yapısı önerebilir. Ama arama sıralaması içerik kalitesine, hıza, bağlantılara ve rekabete bağlıdır; bir prompt bunu garanti etmez. Anahtar kelimeyi sayfaya serpiştirmek yerine ziyaretçinin sorusuna net cevap veren metinler isteyin ve yazdıklarını kendi bilginizle sınayın.

Müşteri örneği, yerel bilgi, fiyat ve süreç gibi yalnızca sizin bildiğiniz bilgiler sayfayı farklı kılar. Bunları Claude’a siz verin.

Claude’un iyi yaptıkları

• Yapı ve standart kod: Anlamlı HTML, duyarlı CSS ızgaraları, tekrar eden bileşenler.
• Çok dosyalı tutarlı değişiklik: Bir rengi, bir bileşeni ya da bir ifadeyi tüm dosyalarda güncellemek.
• Metin taslağı: Verdiğiniz gerçek bilgilerden tutarlı bir ilk metin. Yine de siz düzeltmelisiniz.
• Açıklama: “Bu CSS kuralı neden böyle?” sorusuna yanıt vermek, bir hatayı izlemek.
• Tekrarlayan işler: Form doğrulama kodu, SSS bölümü, bir sayfa şablonunun kopyaları.

Claude’un zayıf kaldığı yerler

Burada abartmamak gerekiyor. Bunlar sizin sorumluluğunuzda kalır:

• Gerçek içerik: Hizmet detayları, fiyatlar, referanslar. Vermezseniz uydurur; gerçek sanılan yer tutucu bilgi ciddi bir sorun olur.
• Marka kimliği: Logo, fotoğraf, ses tonu. Claude size ait olmayan bir kimliği tahmin edemez.
• Yayın altyapısı: Alan adı, barındırma, SSL, e-posta. Bunlar ayrı kurulur.
• Form sonrası: Formun gönderdiği veriyi alacak bir sunucu tarafı gerekir. Claude arayüzü yazar; verinin nereye gideceği ayrı bir karar ve ayrı bir güvenlik konusudur.
• Güvenlik ve erişilebilirlik: Kodu üretir ama sizin yerinize denetlemez. Kontrast, etiketler, giriş doğrulaması sizin gözünüzden geçmeli.
• Hız ve SEO: Görsel boyutları, yazı tipi yükü, başlık yapısı ve arama niyeti için ölçüm gerekir; Claude’un bunu kendi kendine doğru yaptığını varsaymayın.
• Tutarlılık: Uzun işlerde önceki kararlar unutulabilir. Önemli kuralları proje dosyasına (CLAUDE.md) yazın.

WordPress sitesinde Claude

Siteniz zaten WordPress ise iki ayrı iş vardır. Birincisi tema ya da eklenti kodu: bunu Claude Code ile dosyalarda yaparsınız. İkincisi içerik ve ayarlar: bunun için MCP bağlantısı gerekir.

Elementor kullanıyorsanız sayfa yapısıyla çalışmanın kendi kuralları var; Elementor MCP ve Claude yazısına bakın. WordPress’in yeni sürümündeki değişikliklerin bu işleri nasıl etkilediğini merak ediyorsanız WordPress 7.0 yenilikleri yazısını okuyun.

Her durumda önce staging. Canlı sitede ilk deneme yapmayın; yedek almadan yazma yetkisi vermeyin.

Yayından önce kontrol listesi

1. Sayfadaki tüm yer tutucu metin gerçek içerikle değişti mi? ([DOLDURULACAK] aratın.)
2. Telefon, e-posta, adres ve fiyatlar doğru mu? Kendi gözünüzle kontrol edin.
3. Mobil ve masaüstünde düzen bozuk mu?
4. Klavye ile menüye ve forma ulaşılıyor mu? Görsellerin alt metni var mı?
5. Form gerçekten bir yere ulaşıyor mu? Kendiniz test gönderisi yapın.
6. Sayfa başlığı ve açıklaması her sayfada farklı ve anlamlı mı?
7. PageSpeed Insights gibi bir araçla ölçüm aldınız mı?
8. Kod içinde parola, anahtar ya da test verisi kaldı mı?

Claude ile web sitesi yapma: gerçekçi beklenti

Claude ilk taslağı ve tekrarlayan işleri ciddi biçimde hızlandırır. Hangi işin sizin için doğru olduğunu, markanın nasıl konuşacağını ve sonucun yeterince iyi olup olmadığını belirlemez. Küçük, tek amaçlı bir site için Claude ile ilerlemek makul bir yol. Çok sayfalı, ödeme alan ya da yasal yükümlülüğü olan bir site için çıktıyı bir geliştiricinin gözden geçirmesi gerekir.

Bu aşamada destek isterseniz hizmetler sayfamdan kapsamı görebilir, ya da iletişim üzerinden projenizi anlatabilirsiniz.