Blog

Claude Design ile web sitesi tasarımı, bir fikrin ekranda görünür hale gelmesini günlerden saatlere indirebilen yeni bir çalışma biçimi. Yapay zekâ destekli tasarım araçları, klasik anlamda bir tema seçip sürükle-bırak yapmak yerine, doğal dilde anlattığınız bir arayüzü doğrudan HTML, CSS ve bileşen yapısına dönüştürebiliyor. Bu rehberde, bir siteyi Claude Design üzerinde tasarlayıp gerçek bir alan adı ve barındırma ortamında yayına alma sürecini altı adımda, uygulanabilir ayrıntılarla ele alıyoruz.

Claude Design Gerçekte Ne Yapıyor, Ne Yapmıyor?

Claude Design, Anthropic’in Claude arayüzü üzerinden tasarım odaklı çıktı üretme yeteneğini ifade ediyor. Pratikte olan şu: bir sayfa düzeni, renk paleti, tipografi ölçeği veya bileşen kütüphanesini tarif ediyorsunuz; model bunu çalıştırılabilir kod ya da yapılandırılmış bir arayüz taslağı olarak geri veriyor. Yani ortada bir “tasarım asistanı” var; sizin yerinize karar veren bir otomobil değil, direksiyonda sizsiniz.

Yapamadıkları da en az yaptıkları kadar önemli. Claude Design sizin adınıza alan adı almaz, sunucu kurmaz, SSL sertifikası bağlamaz, form gönderimlerini bir e-posta kutusuna ulaştırmaz. Üretilen arayüz; gerçek içerik, doğru yönlendirme (routing), form doğrulama ve dağıtım süreciyle birleşmediği sürece yalnızca bir vitrin maketidir. Bu yazının omurgası da tam olarak bu kopukluğu kapatmak: tasarımdan yayına giden yol.

Adım 1: Brief ve Marka Girdilerini Netleştirin

Yapay zekâdan iyi çıktı almanın ilk şartı, iyi girdi vermek. Tasarıma başlamadan önce elinizde şu dosya setinin olması süreci belirgin biçimde hızlandırır:

• Marka özeti: Ne yapıyorsunuz, kime hitap ediyorsunuz, rakiplerinizden hangi tek cümleyle ayrışıyorsunuz?
• Görsel kimlik: Logo (tercihen SVG), kurumsal renklerin hex kodları, kullanılan yazı tipleri veya yazı tipi karakteri tarifi.
• Ton ve dil: Kurumsal mı, samimi mi, teknik mi? Örnek iki-üç cümle vermek, modelin metin üslubunu da yakalamasını sağlar.
• Referans estetiği: “Sade, bol boşluklu, nötr renkli” gibi tarifler; beğendiğiniz sektör dışı sitelerden alınmış soyut ilkeler.
• Teknik kısıtlar: Hangi CSS yaklaşımı (utility-first mı, klasik mi), hangi kırılım noktaları, JavaScript’e ne kadar bağımlılık istediğiniz.

Bu listeyi bir arada tutmak, her yeni sohbette aynı bilgileri yeniden anlatma zorunluluğunu ortadan kaldırır. Marka görsellerini de yapay zekâ ile çoğaltmayı planlıyorsanız, markaya uygun görselleri yapay zeka ile oluşturma rehberi bu adımı tamamlayıcı nitelikte.

Adım 2: Site Mimarisi ve İçerik İskeletini Çıkarın

Tasarıma geçmeden sayfaların listesini ve her sayfanın tek bir işini yazmak, sonradan yapılan geri dönüşleri büyük ölçüde azaltır. Claude Design’a “bana ana sayfa tasarla” demek yerine, sayfa sayfa ilerleyin:

• Ana sayfa: Tek birincil eylem (ör. demo talebi, iletişim, satın alma) ve bunu destekleyen üç kanıt bloğu.
• Hizmet/ürün sayfaları: Her biri kendi sorusunu yanıtlayacak şekilde ayrıştırılmış.
• Hakkında ve güven unsurları: Ekip, referanslar, sertifikalar, sık sorulan sorular.
• İletişim: Form, harita yerine adres metni, doğrudan e-posta bağlantısı.
• Yasal sayfalar: Gizlilik, KVKK aydınlatma metni, çerez politikası.

Her sayfa için üç başlık seviyesi, iki-üç paragraf ve bir çağrı düğmesi tanımlayın. Bu iskeleti promptun içine gömdüğünüzde, model sayfayı pazarlama metni uydurmak yerine verdiğiniz yapıya göre kurar. İçeriği sonradan düzenlemek, boş bir tuvalden başlamaktan çok daha hızlıdır.

Adım 3: Katmanlı Tasarım Promptları Yazın

Tek bir dev prompt yerine, dört katmanda ilerlemek hem kontrolü artırır hem de çıktı kalitesini yükseltir:

• Katman 1 – Sistem ve kısıtlar: “Semantik HTML5 kullan, harici CSS çerçevesi kullanma, erişilebilirlik için kontrast oranlarına dikkat et.”
• Katman 2 – Yapı: Bölüm bölüm düzen tarifi (üst gezinme, hero, üç sütunlu özellik alanı, fiyatlandırma, alt bilgi).
• Katman 3 – Estetik: Renk değişkenleri, tipografi ölçeği, boşluk ritmi, kenar yuvarlaklığı, gölge kullanımı.
• Katman 4 – Etkileşim: Mobil menü davranışı, odak (focus) halleri, hover geçişleri, form hata mesajları.

Örnek bir kısa istek şöyle olabilir: “Aşağıdaki renk değişkenlerini kullanan, 12 sütunlu ızgara üzerine kurulu, 768 piksel altında tek sütuna düşen bir hizmetler bölümü üret. Kart başlıkları h3 olsun, her kartta tek satırlık açıklama ve metin bağlantısı bulunsun. Gölge yerine 1 piksellik kenarlık kullan.” Bu düzeyde bir tarif, hem daha tutarlı hem de düzenlemesi kolay bir çıktı verir.

Adım 4: Arayüzü Gerçek Koda ve İçeriğe Bağlayın

Üretilen taslağı doğrudan canlıya almak cazip görünse de, araya bir sağlamlaştırma adımı koymak gerekir:

• Kod temizliği: Kullanılmayan sınıfları, tekrar eden stilleri ve gereksiz iç içe geçmiş kapsayıcıları ayıklayın.
• Gerçek metin: Lorem ipsum’u tamamen kaldırın; başlıkların uzunluğu tasarımı bozuyorsa düzeni metne göre revize edin.
• Erişilebilirlik: Görsel alternatif metinleri, klavye ile gezinebilme, başlık hiyerarşisi ve renk kontrastı kontrol edilmeli.
• Performans: Görselleri WebP/AVIF formatına çevirin, boyutlandırın, kritik CSS’i satır içine alın, kullanılmayan JavaScript’i kaldırın.
• Form ve entegrasyonlar: İletişim formunu bir arka uç hizmetine veya sunucu tarafı betiğe bağlayın; spam koruması ekleyin.

Bu noktada iki yol ayrımı var: statik HTML/CSS çıktısını olduğu gibi yayına almak ya da tasarımı bir içerik yönetim sistemine taşımak. İçerik ekibiniz sık güncelleme yapacaksa, tasarımı WordPress hosting ortamına taşıyıp bloğa dönüştürmek uzun vadede daha sürdürülebilir olur. Yapay zekânın bu tür iş akışlarındaki gerçek katkısını ve sınırlarını daha geniş okumak isterseniz, WordPress ve yapay zekâda abartının ötesindeki gerçekler yazısı iyi bir tamamlayıcı.

Adım 5: Alan Adı, Barındırma ve Yayına Alma

Tasarım hazır olduğunda işin teknik yarısı başlar. Sıralama önemli, çünkü her adım bir öncekine bağlı:

1. Alan adı: Markanızla birebir eşleşen, kısa ve tire içermeyen bir ad seçin. Domain kaydı sırasında otomatik yenilemeyi açık tutun; süresi geçen bir alan adı, tasarımı ne kadar iyi olursa olsun tüm emeği erişilemez kılar.
2. Barındırma: Trafik beklentiniz, kullanacağınız teknoloji yığını ve yönetim isteğiniz paket seçimini belirler. Küçük ve orta ölçekli projelerde paylaşımlı sınırsız hosting paketleri çoğu zaman yeterli olur; yoğun eklenti kullanımı, özel PHP sürümü veya yalıtılmış kaynak ihtiyacı varsa sanal sunucuya geçmek gerekir.
3. SSL: Ücretsiz sertifika ile HTTPS’i zorunlu kılın, HTTP isteklerini 301 ile yönlendirin.
4. DNS: Yayına almadan önce TTL değerini düşürün, sonra A ve CNAME kayıtlarını güncelleyin. Geçiş sırasında eski ve yeni ortamı paralel çalıştırmak kesintiyi önler.
5. Yedekleme ve izleme: Günlük otomatik yedek, çalışma süresi izleme ve hata günlüğü takibi ilk günden kurulmalı.

Yayın öncesi kontrol listesi olarak şunları test edin: 404 sayfası, form gönderimi, e-posta teslimi, mobil görünüm, sayfa hızı ve arama motorlarına kapalı olup olmadığı. Özellikle “arama motorlarına izin ver” ayarının unutulması, sık karşılaşılan ve günlerce fark edilmeyen bir hatadır. Tasarımın teknik tarafını kendi başınıza kurmak istemiyorsanız, web tasarım süreçlerini bir arada yürütmek de mümkün.

Adım 6: Yayın Sonrası Ölçüm ve İyileştirme

Tasarım yayına alındığında iş bitmiyor, yeni bir aşama başlıyor. İlk 30 gün için önerilen minimum ölçüm seti:

• Ziyaretçi başına sayfa görüntüleme ve ortalama oturum süresi
• Birincil dönüşümün (form, arama, sepet) tamamlanma oranı
• Core Web Vitals değerleri: LCP, INP ve CLS
• Mobil kırılımda hemen çıkma oranı
• Arama konsolunda dizine eklenen sayfa sayısı ve tıklama oranı

Bu veriler, tasarım kararlarını tahminden çıkarıp ölçüme dayandırmanızı sağlar. Bir başlığın iki varyantını iki hafta boyunca test etmek, aylarca tartışmaktan daha hızlı sonuç verir. Claude Design’ı bu döngüde yeniden kullanabilirsiniz: “Mevcut hero bölümünün üç alternatifini üret, yalnızca başlık ve düğme metni farklı olsun” gibi bir istek, A/B testi için malzemeyi dakikalar içinde hazırlar.

Yöntemlerin Karşılaştırması

Yaklaşım	Tasarım hızı	Teknik kontrol	Öğrenme eğrisi	Uygun olduğu durum
Claude Design + elle yayına alma	Çok yüksek	Yüksek (kod tamamen sizde)	Orta (HTML/CSS bilgisi gerekir)	Özgün arayüz isteyen, küçük-orta projeler
Hazır tema + sayfa düzenleyici	Yüksek	Orta (tema sınırları içinde)	Düşük	Hızlı yayına alınacak tanıtım siteleri
Klasik ajans işi	Düşük	Çok yüksek	Düşük (siz yönetmezsiniz)	Kurumsal kimlik ve marka stratejisi kritikse
Hazır site kurucu platformlar	Çok yüksek	Düşük (platforma bağımlı)	Çok düşük	Tek sayfalık, geçici tanıtımlar

Tablodan çıkan sonuç şu: yapay zekâ destekli tasarım, hız ile özgünlüğü aynı anda sunabildiği için öne çıkıyor; ancak kazanç, yayına alma ve bakım aşamasındaki disiplinle korunuyor. Bu yaklaşımın sınırlarını ve pratik tuzaklarını merak ediyorsanız, vibe coding ile bütün bir web sitesini gerçekten kurabilir miyiz sorusuna verilen yanıt da aynı çizgide ilerliyor.

Sık Yapılan Hatalar

• Tek dev promptla başlamak: Sonuç görsel olarak iyi görünse de kod tarafı dağınık çıkar ve düzeltmesi saatler alır.
• Marka girdilerini atlamak: Renk ve tipografi tarifi verilmediğinde her istekte farklı bir estetik ortaya çıkar, tutarlılık kaybolur.
• İçeriği sonraya bırakmak: Gerçek metinlerle test edilmeyen düzenler, yayında kırılır.
• Erişilebilirliği yok saymak: Kontrast ve odak halleri sonradan eklenmesi en zor katmandır.
• Yayın öncesi kontrolü atlamak: Arama motoru izinleri, form bağlantısı ve SSL yönlendirmesi en sık unutulan üç maddedir.

SSS

Claude Design ile tasarlanan site doğrudan yayına alınabilir mi?

Teknik olarak alınabilir, ancak önerilmez. Üretilen çıktı genellikle bir arayüz taslağıdır; gerçek içerik, form bağlantısı, SSL, yönlendirme ve performans optimizasyonu eklenmeden yayına alınması kırık bağlantılar ve zayıf arama görünürlüğüyle sonuçlanır.

HTML bilmeden bu süreç yürütülebilir mi?

Kısmen. Tasarım üretmek ve küçük metin değişiklikleri yapmak HTML bilgisi gerektirmez. Ancak kodu temizlemek, form bağlantısını kurmak ve yayın sorunlarını çözmek için temel HTML/CSS bilgisi ya da bu işi devralacak bir teknik destek gerekir.

Tasarımı bir içerik yönetim sistemine taşımak şart mı?

Şart değil. İçerik nadiren değişiyorsa statik yapı daha hızlı ve daha güvenli olabilir. Düzenli blog, ürün kataloğu veya çok yazarlı bir yapı varsa, tasarımı bir yönetim sistemine taşımak sürdürülebilirlik açısından avantaj sağlar.

Bu yaklaşımın SEO’ya etkisi ne olur?

Araç değil, uygulama belirleyici. Semantik başlık yapısı, hızlı yüklenen görseller, mobil uyum ve doğru yönlendirmeler sağlandığında sonuç klasik yöntemlerle aynıdır. Yapay zekâ ile üretilen sayfalarda en sık görülen sorun, başlık hiyerarşisinin bozulması ve gereksiz JavaScript yüküdür.

Sunucu tarafında özel bir gereksinim var mı?

Statik çıktı için herhangi bir standart barındırma yeterlidir. Form işleme, veritabanı veya sunucu tarafı betikler ekleniyorsa PHP sürümü ve kaynak limitleri kontrol edilmeli; ziyaretçi sayısı arttıkça kaynakları yalıtılmış bir ortama taşımak gerekebilir.

Tasarım tekrar tekrar üretildiğinde tutarlılık nasıl korunur?

Renk, tipografi ve boşluk değerlerini tek bir “tasarım belirteçleri” bloğunda tanımlayıp her istekte bu bloğu referans verin. Böylece sayfalar arasında estetik kayması yaşanmaz.