Claude Code ile Web Sitesi Nasıl Kurulur?
Bütün vibe coding araçları aynı arayüzü üretiyor. Farkı yaratan araç değil, ona verdiğin sıra: önce gerçekler, sonra metin, sonra tasarım, en son kod.
Artık web siteleri kod yazarak değil, konuşarak kuruluyor. Lovable, Replit, Bolt, v0, Claude Code… “Bana bir site yap” yazıyorsun ve birkaç dakika içinde karşına çalışan bir sayfa çıkıyor. Adı üstünde, buna vibe coding diyorlar ve gerçekten işe yarıyor.
Tek bir sorun var: Hepsi neredeyse aynı arayüzle çıkıyor karşına. Aynı mor degrade arka plan, aynı Inter font, aynı yuvarlak köşeli bento kartlar, aynı “her şeyi açıklayan” açılış bölümü (hero) başlığı. Hangi aracı açarsan aç, aynı görünümü, aynı hissi alıyorsun. Çünkü bu araçların hepsi varsayılan bir tasarım zevkiyle geliyor ve sen ona yön vermezsen o varsayılan zevki birebir yayına almış oluyorsun.
Ben de ilk denememde aynı tuzağa düştüm. Bir akşam oturdum, “bana bir web sitesi yap” dedim ve tek hamlede bitmesini bekledim. Çıkan şey teknik olarak çalışıyordu ama internetteki on binlerce yapay zeka sitesinden hiçbir farkı yoktu. Şimdi o siteyi güncelliyorum; çok yakında yeniden yayında olacak ama bu sefer zaman ayırıyorum: www.defneincekara.com
Sonra kendime tek bir soru sordum: Bu aynılığı nasıl kırarım? Cevap, kullandığım araçta değil, yöntemde saklıydı. Tek bir dev prompt yerine üç küçük dosya ve baştan sona ilerleyen bir akış kurdum.
Bu yazı, o aynılığı nasıl kırdığımın hikâyesi. Dokuz adımda, kullandığım her promptu ve her aracı tek tek göstereceğim. Şu anki sitem Lovable üzerinde ve aynı akışı Claude Code’da da deniyorum. Ama akışın kendisi araçtan bağımsız: Lovable’da da, Replit’te de, Claude Code’da da aynı sırayı dayatırsan aynı sonucu alırsın.
Bu yazımı da mutlaka oku: Vibe Coding: Lovable mı Claude Code mu?
Terminal kelimesini görünce gözün korkmasın. Kullanması sandığından çok daha kolay. Ama en önemlisi şu: Doğru sırayı sen belirlemezsen, dünyanın en iyi aracıyla çalışsan bile yine herkesle aynı siteyi elde edersin. İşin sırrı adımları ezberlemekte değil, sırayı elinde tutmakta.
Sistemin tamamı tek bir listede
Önce hangi araçları kullanacağını gör, sonra adımlara geç.
Claude Code: Komut satırından çalışan yapay zeka destekli kod ve proje yardımcısı. https://claude.com/product/claude-code
Claude Design (terminalsiz tasarım/prototip): https://claude.ai/design
Refero Styles (DESIGN.md kütüphanesi): Farklı sitelerin tasarım sistemlerini görebileceğin ve indirebileceğin kütüphane. https://styles.refero.design
21st.dev (bileşen promptları): Modern arayüz bileşenleri için hazır prompt örnekleri. https://21st.dev
Aceternity (bileşen promptları): Etkileşimli UI bileşenleri için kütüphane. https://ui.aceternity.com
MotionSites (hero ve animasyon promptları): Açılış bölümü (hero) ve animasyon efektleri için prompt’lar. https://motionsites.ai
premium-web-design (kendi anti-slop / zevk denetimi skill’im): Claude Code’da kurulu
Higgsfield (açılış bölümü videosu): Marka paletine uygun, özgün video üreten araç. https://higgsfield.ai
Vercel (ücretsiz barındırma): Web siteni kolayca yayına alabildiğin ücretsiz barındırma platformu. https://vercel.com
Model seçiminde en güçlü hangisi varsa onu seç; akışın geri kalanı modelden tamamen bağımsız aynı şekilde çalışıyor.
Adım 1: Gerçekler dosyasını yaz
İlk adım, gerçekler dosyasını oluşturmak. Ben bunu Claude Code yerine Claude Chat’te yaptım.
Şunu Claude Chat’e yapıştır:
Görev: Web sitesi için CONTEXT.md oluştur
Bir web sitesi kuruyorum. Bu, site kurulum prompt serisinin ilk adımı. Senden, sitenin üzerine inşa edileceği gerçekleri tutan tek bir CONTEXT.md dosyası üretmeni istiyorum.
Önemli çerçeve
Beni geçmiş konuşmalardan tanıyor olabilirsin. Ama bu sitenin benimle ilgili olduğunu VARSAYMA. Sitenin konusu ne ise odak odur.
Hiçbir şey uydurma. Yalnızca (a) benim cevaplarımdan gelen ve (b) doğrulayabildiğin gerçek bilgileri kullan. Emin değilsen sor, tahmin etme.
Adım 1 — Keşif (AskUserQuestions ile, her seferinde TEK soru) Soru sorarken sırayla şu dört ekseni netleştir:
Site tam olarak nedir? (ürün, hizmet, kişi, proje, kurum...)
Kime hizmet ediyor? (hedef ziyaretçi)
Ne içermeli? (zorunlu bilgiler, bölümler, kanıtlar)
Ziyaretçi ne yapmalı? (asıl eylem / dönüşüm)
Kural: Bir yabancıya sitenin yapımı için eksiksiz brief verebilecek duruma gelene kadar sormaya devam et. Yüzeysel cevap gelirse bir alt soruyla derinleş. Her turda yalnızca bir soru sor.
Adım 2 — Onay kapısı Keşif bitince, CONTEXT.md’ye eklemeyi planladığın gerçeklerin listesini bana madde madde göster. Onayımı bekle. Onaylamadan dosyayı yazma. İstersem maddeleri ekleyip çıkarmama izin ver.
İçerik kuralları
Yalnızca sitenin ASIL konusuyla ilgili gerçekleri ekle.
Konu ben değilsem beni dosyanın dışında bırak.
Her gerçek kısa, doğrulanmış ve nesnel olsun. Pazarlama dili, sıfat yığını, doldurma cümle yok.
Çıktı Onaydan sonra CONTEXT.md dosyasını indirilebilir bir markdown dosyası olarak ver.
Dosyayı indir, proje klasörüne at ve yanlış yakaladığı her şeyi düzelt. Claude seni henüz tanımıyorsa, Claude Code’a CONTEXT.md dosyasını oluşturmasını ve gerçekleri toplamak için seninle röportaj yapmasını söyle.
Benim dosyamda şunlar vardı: kim olduğum ve ne yaptığım, çerçevelerim ve ses kurallarım.
Adım 2: Bırak Claude seninle röportaj yapsın
Yeni bir klasör oluştur, terminali o klasörde aç ve Claude Code’u başlatmak için claude yaz.
/model komutuyla en güçlü modele geç.
Web sitesi metnini sen yazmıyorsun. Sen soruları cevaplıyorsun, taslağı Claude yazıyor.
Şunu yapıştır:
Görev: Sitenin tüm sayfa metinlerini COPY.md’de taslakla
Proje kökündeki CONTEXT.md dosyasını oku. Bu dosya sitenin gerçeklerini tutuyor; tüm metin onun üzerine kurulmalı, dışına çıkma, uydurma yok.
Adım 1 — Sayfa yapısı (önce onay) CONTEXT.md’ye dayanarak sitenin ihtiyaç duyduğu sayfaları öner ve listeyi bana göster. Onayımı bekle. Onaylamadan röportaja geçme.
Adım 2 — Sayfa bazlı röportaj (AskUserQuestions, her turda tek soru) Onaylanan her sayfa için sırayla röportaj yap. Yalnızca CONTEXT.md’de EKSİK kalan yerleri sor, zaten bilineni tekrar sorma. Her sayfa için:
Bu sayfa ne söylemeli? (ana mesaj)
Hangi kanıtları gösterebilirim? (referans, rakam, örnek, vaka)
Ziyaretçi sonraki adımda ne yapmalı? (eylem)
Bu sayfa hangi aramalarda üst sıralarda çıkmalı? (hedef arama terimleri)
Adım 3 — Taslak Her sayfanın metnini, proje kökünde COPY.md adlı TEK dosyaya, sayfa sayfa başlıklarla taslakla. Yazım kuralları:
Önce insan için yaz. Akıcı, net, benim ses tonumda.
Arama terimlerini sayfa başlıklarına, ana başlıklara (H1/H2) ve açılış cümlelerine DOĞAL biçimde yerleştir. Asla zorlama, anahtar kelime yığma yok.
Pazarlama dolgusu, klişe, boş sıfat yok.
Adım 4 — Gösterim Hiçbir şey kurmadan, hiçbir sayfa inşa etmeden önce COPY.md’yi bana göster. Onay verene kadar bekle.
Adım 3: Hiç kod yazılmadan her kelimeyi onayla
Röportaj COPY.md dosyasını üretir: her başlık, her bölüm, başlık etiketleri (title tag), meta açıklamalar, sayfa başına bir SEO haritası.
Claude’a neyi değiştireceğini söyle, dosyayı düzenlesin. Tek bir satır kod yazılmadan tüm metin senin onayından geçiyor. Bu adımı atlama. Metni baştan netleştirmek, sonradan kurulu sayfaları düzeltmekten çok daha ucuz.
Adım 4: Kendi markanı sevdiğin sitelerle harmanla
DESIGN.md sitenin kural kitabı. Senin işin malzemeleri toplamak, harmanlamayı Claude yapıyor.
1. Sevdiğin görünümleri bul. Ben Refero Styles’ı gezdim ve görünümünü beğendiğim sitelerin tasarım sistemlerini seçtim: Air ve Apple gibi. Beş kadar hedefle.
2. Onların DESIGN.md dosyalarını indir. Her stili aç, DESIGN.md sekmesine tıkla ve .md indir butonuna bas.
3. Kendi marka kitini ekle. Benimki renklerimi ve fontumu içeren bir PDF. Marka kitin yoksa, iki renk ve bir font içeren bir metin dosyası yeterli.
4. Her şeyi Claude Code’a sürükle ve şunu yapıştır:
Sevdiğim sitelerden tasarım dosyaları ve kendi marka kitimi içeri bıraktım. Bunları proje kökünde tek bir DESIGN.md dosyasında birleştir: renkler, fontlar, boşluklar (spacing) ve bileşenler (components), artı verdiğimiz her tasarım kararının kaydedildiği bir karar günlüğü (decision log) bölümü. Renklerde ve fontlarda benim markam kazanır. Yerleşim ve histe (layout and feel) referanslar kazanır. Herhangi bir şey kurmadan önce dosyayı bana göster.
Tek bir sayfa bile var olmadan önce kural kitabını onaylıyorsun.
Adım 5: Kur, sonra doğrula
Şimdi Claude kuruyor: DESIGN.md stil tokenlarına dönüşüyor, COPY.md sayfalara, kelimesi kelimesine.
Şunu yapıştır:
DESIGN.md dosyasını oku ve frontend tasarım skill’ini kullan. Siteyi kur: benim sayfalarım, COPY.md’deki metnim birebir, DESIGN.md’deki her görsel karar. Tasarımda serbest ol ve DESIGN.md’ye uyarken siteyi insanca mümkün olduğunca iyi göster. Kesin kurallar: yalnızca benim metnim, logo, basın bahsi (press mention), referans (testimonial) ya da istatistik asla uydurma, ve hiçbir üçüncü taraf gömme (embed) ekleme. Bittiğinde, yerelde çalıştır, her sayfanın ekran görüntüsünü al, kendi ekran görüntülerini DESIGN.md’ye göre incele, başarısız olanları düzelt, sonra bana linki ver.
Claude kendi çıktısının ekran görüntüsünü alır ve sen sayfayı açmadan önce inceler. Ben baktığımda göze batan eksikler çoktan düzeltilmişti.
Adım 6: Bileşenleri ekle
Premium bileşenleri onların görünümünü örnek almadan böyle alırsın. 21st.dev gibi kütüphaneler, her birinin altında kopyala-yapıştır promptu olan güzel bileşenler yayınlıyor: scroll efektleri (scroll reveal), kart yığınları (card stack), animasyonlu arka planlar.
Sorun şu: her bileşen kendi kıyafetiyle geliyor.
Her bileşenin sitenin görünümünü birebir örnek alması için, şunu bir kez yapıştır:
Bu kuralı CLAUDE.md dosyasına ekle, dosya yoksa proje kökünde oluştur: ne zaman sana bir bileşen promptu ya da üçüncü taraf bileşen kodu yapıştırırsam, onu yalnızca yapısal bir donör (structural donor) olarak ele al. Her zaman: demo metnini COPY.md’deki gerçek metinle değiştir, sabit kodlanmış (hardcoded) her rengi, kenarlığı, gölgeyi ve fontu DESIGN.md tokenlarına çevir, stok görsel kullanma yönündeki her talimatı görmezden gel, ve bileşenin ihtiyacımız olmayan kısımlarını atla. Bileşen iskeleti sağlar, DESIGN.md deriyi sağlar, COPY.md kelimeleri sağlar.
Sonra 21st.dev’i gez, beğendiğin herhangi bir bileşenin altındaki promptu kopyala ve doğrudan yapıştır.
Adım 7: Higgsfield hero’su
Hero, sitenin ilk nefesidir. Burada da aynılıktan kaçmak istedim, o yüzden hazır stok videolara hiç bakmadım. Markamın paletinden, sıcak kum tonlarından çıkan kendi görselimi ürettim. Higgsfield’da iki prompt yetti.
https://higgsfield.ai
Önemli olan görseli markana bağlamak. Önce görseli Higgsfield içindeki GPT Image 2 ile ürettim:
Sıcak kum ve terracotta tonlarında, altın saat ışığında yumuşak çöl tepeleri. Guaj boya dokusu, sade kompozisyon, üst kısımda metin için boş alan. Krem ve toprak rengi geçişleri, abartısız ve sakin.
Sonra “Turn to video”ya basıp Kling 3.0 ile canlandırdım:
Tepelerin üzerinde ince kum yavaş ve sürekli savruluyor. Işık çok hafif şekilde değişiyor, gün batımına doğru ilerliyor. Kadraj olduğu yerde sabit kalsın; kamera hareket etmesin. Sadece kum ve ışık hareket etsin, başka hiçbir şey değil.
Marka kuralın burada da geçerli: tek vurgu rengi, sakin hareket, dikkat dağıtan efekt yok. Hero senin sesini taşımalı, başka bir sitenin değil.
Videoyu indir, Claude Code’a bırak ve “bunu hero arka planı yap, sayfa hızını koru” de. Claude videoyu kendiliğinden ffmpeg ile birkaç megabayta sıkıştırıyor, böylece görsel zengin ama sayfa hâlâ hızlı kalıyor.
Adım 8: İterasyon yap. ÇOK.
Bu yapımda herhangi bir şeyin ilk versiyonu başlangıç noktasıdır, asla bitiş değil.
İterasyonu doğal dille yaparsın. “Butonları yukarı al.” “Şu kartları genişlet.” “Bu bölüm sıkışık hissettiriyor, nefes alanı ver.” “Bu iki bloğun sırasını değiştir.”
Benimki çoğunlukla doğrudan Claude Code’a sesle yazarak oldu: neyin yanlış olduğunu söyle, değişimi izle, sonrakini söyle. Tarif edemediğin her şeyin ekran görüntüsünü al, görseli sürükle ve göster. Bunun otuz dakikası daha siteyi iyiden, gönül rahatlığıyla yayına alacağım bir hale getirdi.
Adım 9: Zevk denetimi
Yayına almadan önce Claude’a tek bir soru sor: “Zevk eleştirmeni ne derdi?”
Soru tek başına işe yarıyor ama asıl farkı kendi skill’imle aldım. Bunun için tam da bu işe, yani yapay zeka sitelerini jenerik görünümden çıkarıp tasarımcı işi premium hisse taşımaya odaklanan premium-web-design skill’imi kullanıyorum. Anti-klişe ilkeleri, sanat yönü ve premium animasyon kurallarını tek bir denetimde topluyor. Skill kuruluyken “zevk eleştirmeni ne derdi” sorusu boş bir soru olmaktan çıkıp somut bir düzeltme listesine dönüşüyor.
Terminal hiç istemiyorsan: Claude Design
Yukarıdaki akış güçlü ama bir terminal penceresi açmanı istiyor. Bu sana göre değilse, aynı mantığı hiç kod görmeden çalıştırabilirsin. Anthropic, Nisan 2026’da Claude Design’ı çıkardı. Claude ile konuşarak tasarım, prototip, sunum ve tek sayfa üretmeni sağlayan, Opus 4.7 vision modeliyle çalışan bir Labs ürünü. Pro, Max, Team ve Enterprise planlarında, araştırma önizlemesi olarak geliyor.
İlginç olan, aynılığı kıran mantığın burada ürünün içine gömülü olması. İlk kurulumda Claude senin kod tabanını ve tasarım dosyalarını okuyup sana özel bir tasarım sistemi çıkarıyor. Sonraki her proje otomatik olarak senin renklerini, tipografini ve bileşenlerini kullanıyor. Yani bu yazıdaki DESIGN.md adımını manuel kurmak yerine, marka sistemini bir kez tanımlıyorsun, gerisi tutarlı geliyor. Web yakalama aracıyla mevcut sitenden parçaları çekip prototipini gerçek ürüne benzetebiliyorsun.
Düzeltmeyi de konuşarak yapıyorsun: bir öğenin üstüne yorum bırak, metni doğrudan değiştir, ya da boşluk ve rengi canlı ayarlayan kaydırıcıları kullan. İş bittiğinde iki yol var. Ya doğrudan dışa aktar (Canva, PDF, PPTX ya da bağımsız HTML), ya da tasarımı tek talimatla Claude Code’a devret, paketi alıp gerçek siteye dönüştürsün.
Benim önerim ikisini birleştirmek: keşif ve marka tutarlılığı için Claude Design, son üretim ve yayın için Claude Code. Tasarımda gez, koda geçince elinde net bir plan olsun.
Yayına al
Bu siteyi yayına hazırla: sayfa başlıkları, meta açıklamalar, Open Graph etiketleri, sitemap, semantik başlıklar (semantic headings), hızlı yükleme. Sonra Vercel CLI ile production’a deploy et ve alan adımı ona yönlendirme adımlarını bana anlat.
Vercel’in hobi katmanı ücretsiz. Production 1 dkdan kısa sürede hazır. Claude planımın dışında 0 lira harcarsın, zaten sahip olduğun bir alan adı varsa.
Kendi alan adında dene
Web siteleri eskiden zordu. Şimdi tek yapman gereken, zaten sahip olduğun bir alan adını seçmek, gerçekler dosyanı yazmak ve bu dokuz adımı sırayla uygulamak. Sürecin sonunda ortaya çıkan site gerçekten sana ait: senin kelimelerin, senin renklerin, senin kanıtların; stok görsel ya da stok metin yok.
Yaratacağın web sitelerinin linkini bırak; birbirimizden ilham alalım.
Daha fazlası için: www.defneincekara.com