Claude Code, artık yalnızca yazılım geliştiricilerin değil, teknik bilgisi sınırlı kişilerin de profesyonel görünümlü bir web sitesi çıkarabildiği bir araca dönüştü. Doğru proje düzeni, iki özel tasarım becerisi ve doğru komut yapısıyla Claude’a bir referans görsel gösterip markanızı anlatmanız, siteyi kodlamaya başlaması için yeterli. Bu rehberde kurulumdan Hostinger üzerinden yayına almaya kadar tüm süreci adım adım anlatıyoruz.

Claude ile Web Sitesi Yapmak İçin Neye İhtiyacınız Var?

Sürece başlamadan önce üç şeyi hazır bulundurmanız gerekiyor. Birincisi Claude’un masaüstü uygulaması, çünkü Claude Code özelliğine tarayıcı üzerinden değil bu uygulamanın “Code” sekmesinden erişiyorsunuz. İkincisi bir Claude Pro aboneliği, ücretsiz plan Claude Code’u desteklemiyor. Üçüncüsü de logo, marka renkleri ve varsa ürün ya da hizmet görselleri gibi medya varlıkları. Elinizde hazır görsel yoksa Higsfield gibi yapay zeka görsel araçlarıyla bunları önceden oluşturabilirsiniz. Claude’un genel yeteneklerine daha yakından bakmak isterseniz Claude Nedir, Nasıl Kullanılır? yazımıza göz atabilirsiniz.

Adım 1: Proje Klasörünü Kurun ve Claude Code’u Başlatın

Bilgisayarınızda tüm site dosyalarının toplanacağı bir ana klasör oluşturun, örneğin “web-projem”. Bu klasörün içine bir “media” alt klasörü açıp hazırladığınız logo ve görselleri buraya yerleştirin. Ardından Claude masaüstü uygulamasında “Code” sekmesine geçip “New Session” ile yeni bir oturum başlatın ve az önce oluşturduğunuz ana klasörü seçerek açın. Claude’un dosyalarınıza erişebilmesi için karşınıza çıkan “Trust workspace” (çalışma alanına güven) seçeneğini onaylamanız gerekiyor. Kurulumun teknik ayrıntılarını, Node.js gereksinimini ve terminal tarafını merak ediyorsanız Claude Code Nasıl Kurulur? rehberimiz konuyu daha derinlemesine ele alıyor.

Adım 2: Tasarımı Sıradanlıktan Kurtaran İki Beceri

Claude Code’a hiçbir yönlendirme yapmadan site istediğinizde genellikle standart, birbirine benzeyen yapay zeka tasarımları ortaya çıkıyor. Bunun önüne geçmek için iki beceriyi (skill) sisteme tanıtmanız öneriliyor:

• Front-end Design becerisi: Anthropic tarafından hazırlanan bu beceri, Claude’a daha geniş bir font kütüphanesi ve daha yaratıcı yerleşim seçenekleri kazandırıyor. Komut satırına ilgili beceri bağlantısını yapıştırıp “install this skill globally” yazmanız yeterli, ardından gelen düzenleme onaylarını kabul edin.
• UI UX Pro Max becerisi: Renk paleti, font eşleşmesi, arayüz stili ve teknoloji yığını konusunda Claude’a geniş bir ilham kütüphanesi sunuyor. Temiz bir kurulum için bu beceriyi “install this plugin globally again using npm” komutuyla, npm üzerinden kurmanız tavsiye ediliyor. Kurulum sırasında gelen tüm izin isteklerini tek tek onaylamanız gerekiyor.

Her iki beceri de yüklendikten sonra değişikliklerin etkinleşmesi için Claude masaüstü uygulamasını kapatıp yeniden açmanız gerekiyor.

Adım 3: İlham Toplayın ve Doğru Komutu Yazın

Sıfırdan bir tasarım istemek yerine Claude’a somut bir yön göstermek çok daha iyi sonuç veriyor. Awwwards ödüllü site örnekleri için, Dribbble ise tasarım detayları için iyi birer kaynak. Beğendiğiniz bir bölümün ekran görüntüsünü alıp Claude Code sohbetine yükleyin, ardından komutunuzu “\” işaretiyle başlatarak UI UX Pro Max becerisini çağırın, örneğin “\UI” yazarak. Komutunuzda şirketinizin adını, konumunu ve hedefini belirtin, kendi logo ve renklerinizin kullanılmasını isteyin. En kritik kısım ise komutun sonuna eklediğiniz cümle: Claude’dan işi tamamlamak için size sorması gereken tüm soruları sormasını isteyin. Bu tek cümle, Claude’un boşlukları kendi varsayımlarıyla doldurmak yerine sizden eksik bilgiyi (hangi bölümler olacak, hangi teknoloji kullanılacak gibi) talep etmesini sağlıyor.

Adım 4: Soruları Yanıtlayın ve Taslağı İnceleyin

Komutu gönderdikten sonra Claude size sırayla sorular yöneltecek. Elinizde hazır logo ve renk paleti olup olmadığını, ana sayfa dışında hangi özel bölümlerin (hakkımızda, hizmetler, öncesi-sonrası gibi) isteneceğini ve sitenin tek bir HTML dosyası mı yoksa React veya Next.js gibi bir yapı mı olacağını netleştirin. Basit tanıtım siteleri için tek sayfa HTML genellikle yeterli ve daha hızlı sonuç veriyor. Tüm bilgileri verdiğinizde Claude, “media” klasörünüzü otomatik tarayıp görsellerinizi bulur ve kodlamaya başlar. Sağ üstteki “Preview” butonuna tıklayarak ya da sağlanan localhost bağlantısını tarayıcınızda açarak taslağı canlı canlı izleyebilirsiniz. Beğenmediğiniz bir bölümü ekrandaki kurşun kalem aracıyla işaretleyip Claude’a yeniden yaptırabilir, ya da doğrudan yazılı komutla düzeltme isteyebilirsiniz. Sesli komut vermek isterseniz mikrofon simgesini kullanabilir, her adımda onay istenmesini engellemek içinse “Auto mode” ayarına geçebilirsiniz.

Örnek Prompt: Peyzaj Şirketi Web Sitesi

Kaynaklarda paylaşılan ve iyi sonuç veren örnek komut şöyle:

Bu komutun işe yaramasının birkaç nedeni var. “\UI” ifadesi geniş renk paleti ve arayüz stillerine erişim sağlayan beceriyi devreye sokuyor. Şirket adı ve konumun belirtilmesi, Claude’un metin içeriğini bölgeye ve sektöre uygun yazmasına yardımcı oluyor. Referans görsel genel düzen için somut bir kalıp veriyor. Sondaki “soruları sor” ifadesi ise Claude’u varsayım yapmaktan alıkoyup sizinle etkileşime zorluyor. Claude’a etkili komut yazma konusunda daha fazla örnek için En İyi Prompt Nasıl Yazılır? ve Claude Komutları yazılarımızı inceleyebilirsiniz.

Adım 5: Hostinger’da Doğru Planı Seçin

Tasarım bittiğinde sırada siteyi yayına almak var. Hangi planı seçeceğiniz sitenizin karmaşıklığına bağlı:

Başlangıç seviyesindeki tanıtım siteleri için Premium plan genellikle yeterli. En ekonomik seçenek 48 aylık paket olsa da, 12 aylık planı seçmek daha mantıklı bir orta yol, çünkü bu süre bir yıl boyunca ücretsiz alan adı ve markanıza bağlı kurumsal e-posta adresleri hakkı da getiriyor.

Adım 6: Dosyaları Zip’leyin ve Siteyi Taşıyın

Hosting planınızı satın aldıktan sonra sırada dosyaları doğru şekilde paketlemek var. En sık yapılan hata, proje klasörünün kendisini sıkıştırmak. Bunun yerine klasörün içine girip index.html dosyasını, media klasörünü ve varsa diğer tüm dosyaları seçin, sağ tıklayıp “Sıkıştır” (Compress) diyerek bir archive.zip oluşturun. Hostinger panelinde oturum açtıktan sonra “Yeni bir site oluştur” yerine “Mevcut bir siteyi taşı” (Migrate an existing site) seçeneğini işaretleyin, ardından “Yedek dosyalarını yükle” (Upload backup files) diyerek hazırladığınız zip dosyasını yükleme alanına sürükleyin.

Aynı ekranda “Claim your free domain” seçeneğiyle ücretsiz alan adınızı talep edebilirsiniz. İstediğiniz adresi arama çubuğuna yazıp müsaitlik durumunu kontrol edin, uygunsa bilgilerinizi girip “Register” ile kaydı tamamlayın. Son olarak “Submit request” butonuna basarak işlemi onaylayın. Sistem dosyaları yerleştirdikten sonra alan adınızı tarayıcıya yazarak sitenizin canlı halini görebilirsiniz. Yayına aldıktan sonra bir değişiklik yapmak isterseniz Claude Code üzerinden düzenlemeye devam edip güncellenmiş dosyaları aynı yöntemle tekrar yükleyebilirsiniz.

Sık Sorulan Sorular

Claude Code ile web sitesi yapmak için kodlama bilmek gerekir mi?
Hayır. Süreç boyunca kod yazmıyorsunuz, isteklerinizi doğal dille anlatıyorsunuz. Claude kodu kendisi üretiyor, siz sonucu inceleyip yönlendiriyorsunuz.

Claude Code’un ücretsiz sürümü var mı?
Yok. Masaüstü uygulamasında bu özelliği kullanabilmek için en az Claude Pro planına ihtiyaç var. Claude’un ücretsiz ve sınırsız kullanım seçenekleri hakkında daha fazla bilgi alabilirsiniz.

Front-end Design ve UI UX Pro Max becerileri zorunlu mu?
Zorunlu değil, Claude Code bu beceriler olmadan da site üretebilir. Ancak bu iki beceri, tasarımın standart yapay zeka kalıplarından çıkıp daha özgün görünmesini sağladığı için şiddetle öneriliyor.

Site kaç sayfadan oluşabilir, sınır var mı?
Teknik bir sınır yok. Basit tanıtım siteleri için tek sayfa HTML yeterliyken, daha büyük projelerde Claude’a React veya Next.js tabanlı çok sayfalı bir yapı kurdurabilirsiniz.

Hazırladığım siteyi Hostinger dışında bir yere de yükleyebilir miyim?
Evet. Claude Code çıktısı standart HTML, CSS ve JavaScript dosyaları olduğu için herhangi bir hosting sağlayıcısına yüklenebilir, Hostinger yalnızca bu rehberde örnek alınan ve ücretsiz alan adı avantajı sunan seçenek.

Sonuç

Claude ile web sitesi yapmak artık teknik bilgi gerektiren bir süreç olmaktan çıktı. Doğru proje klasörü, Front-end Design ve UI UX Pro Max becerileri, iyi seçilmiş bir referans görsel ve “bana sorman gereken soruları sor” cümlesini içeren bir komutla Claude Code birkaç dakika içinde kullanılabilir bir taslak çıkarabiliyor. Süreç, planı gözden geçirip onaylamanızla devam ediyor, yani işi Claude’a devrediyorsunuz ama son kararı hâlâ siz veriyorsunuz. Tasarım bittikten sonra Hostinger üzerinden dosyaları zip’leyip yüklemek, siteyi birkaç adımda internete taşımanın en pratik yolu.

Claude Code’un otonom çalışma mantığını ofis işlerine taşıyan Cowork özelliğini merak ediyorsanız Claude Cowork Nedir, Nasıl Kullanılır? yazımıza bakabilirsiniz. Kodlama tarafında hangi modelin daha güçlü olduğunu öğrenmek isterseniz Kodlama için Claude Opus mu Sonnet mi? karşılaştırmamız işinize yarayabilir.