Bir önceki yazımda Claude Code ile web sitesi kurmayı anlatmıştım. Oradaki ana fikir şuydu: farkı yaratan araç değil, ona verdiğin sıra. Önce gerçekler, sonra metin, sonra tasarım, en son kod.
Yeni şirketimiz kurm.ai’yi kurduktan sonra kendi web sitemi güncellemem gerekti. Bilgileri yenilemek yetmiyordu, tasarımı da daha iyi bir yere taşımak istiyordum. Bunun için yine Claude Code’u kullandım, model olarak da Claude Opus 5.5’i seçtim.
Bu kez işe beğendiğim, ödül almış bir siteden başladım. O siteden yalnızca yapıyı ve hissi aldım: bölümlerin nasıl aktığını, sayfanın insanda nasıl bir duygu bıraktığını. Metinler ve rakamlar benim, fotoğraflar da kendi fotoğraflarım.
Yeni sitem şimdi yayında: defneincekara.com. Aşağıda nasıl yaptığımı adım adım anlatıyorum. Kısaca akış şöyle:
Beğendiğin bir web sitesini bul ve ilham kaynağın olarak seç.
Sitendeki gerçekleri tek bir dosyada topla.
İlham aldığın sitenin yalnızca yapısını çıkar.
Hedefini /goal komutuyla Claude Code’a ver.
Görselleri kendi fotoğraflarınla değiştir.
Telefonda nasıl göründüğüne bak.
GitHub ve Vercel ile yayına al.
Bu web sitesini yapmak sadece 50 dakikamı aldı ve geçişleri çok sevdim.
Gereken altyapı
Claude Code: Ücretli Claude planında, masaüstü uygulamadaki Code sekmesi.
GitHub: Kodun durduğu yer. Ücretsiz plan yeterli.
Vercel: Siteyi yayına alan servis. GitHub hesabıyla bağlanıyor. Ücretsiz plan yalnızca kişisel siteler için. Ticari site için Pro gerekiyor, ayda 20 dolar.
Adım 1: Beğendiğin bir web sitesini bul
Kopyalamakla ilham almak arasındaki fark ne?
Yapay Zeka araçlarıyla artık herhangi bir sitenin görünümünü birkaç komutla yeniden üretmek mümkün. Bu, iki tarafı keskin bir imkân. Bir sitenin logosunu, metnini, fotoğrafını ya da kodunu alıp kendi adınla yayına koyarsan, emek başkasına ait olmaya devam eder. Üstelik ziyaretçi de bunu hisseder.
Benim kuralım basit: Beğendiğim bir siteden yalnızca yapıyı ve hissi alıyorum. Metin, rakam, fotoğraf ve ses tamamen benim.
İyi bir web sitesi yapmak, iyi bir referans seçmekle başlar. Bu listeyi kullanabilirsin:
Awwwards: İddialı tasarımlar ve ödüllü web siteleri.
Lapa Ninja: Sektöre ve renge göre inceleyebileceğin örnekler. Kurumsal siteler için iyi bir başlangıç.
Minimal Gallery: Sade ve net tasarımlar. Danışmanlık, eğitim ve kişisel marka siteleri için bak.
Landing Love: Animasyonlar, geçişler ve kaydırma efektleriyle dikkat çeken siteler.
Land-book: Açılış sayfaları ve sayfa bölümleri. Hizmetini nasıl sunacağını düşünürken incele.
Httpster: Güçlü tipografi ve alışılmışın dışında tasarımlar.
Refero: Kayıt, ödeme ve dashboard gibi işlevsel ekranlar. Üyelik veya müşteri paneli düşünüyorsan bak.
Adım 2: Bağlam
Sitendeki gerçekleri tek dosyada topla.
Yenilemeye başlamadan önce, değişmemesi gereken her şeyi tek bir yere yazmak gerekiyor. Rakamlar, unvanlar, kurum adları, referans metinleri, sık sorulan soruların cevapları. Bir önceki yazıda bunun için CONTEXT.md dosyasını kullanmıştım. Burada amaç biraz farklı: yeni bir şey yazmak değil, var olanı korumak.
Claude Code’u sitenin klasöründe açıp şunu yapıştır:
Bu klasördeki sitenin tüm sayfalarını oku. Değişmemesi gereken
gerçekleri GERCEKLER.md adlı tek bir dosyada topla: rakamlar,
unvanlar, kurum adları, referans metinleri, sık sorulan soruların
cevapları ve iletişim bilgileri. Her maddenin yanına hangi sayfadan
geldiğini yaz. Hiçbir şey ekleme, hiçbir şeyi yorumlama. Bitince
dosyayı bana göster ve onayımı bekle.
Dosya geldiğinde satır satır oku. Eski bir rakam ya da artık geçerli olmayan bir unvan varsa burada düzelt. Bundan sonraki her adımda Claude bu dosyayı esas alacak.
Adım 3: İlham aldığın sitenin yapısını çıkar
Şimdi beğendiğin siteye geçiyoruz. Burada Claude’dan istediğim şey bir kopya değil, bir okuma notu. Sayfanın hangi sırayla aktığını, boşlukları nasıl kullandığını, yazı karakterinin nasıl bir his verdiğini ve geçişlerin ne kadar sakin olduğunu anlatan kısa bir not.
Şu siteyi incele: [İLHAM ALDIĞIN SİTENİN ADRESİ]
Bu sitenin metinlerini, logolarını, fotoğraflarını, videolarını
ve kodunu kullanma, indirme, projeye ekleme. Bana yalnızca yapısını
anlatan ILHAM.md adlı kısa bir not yaz: bölümlerin sırası, boşluk
kullanımı, tipografinin hissi, geçişlerin temposu, hissi. Sonra bu yapının
GERCEKLER.md'deki içerikle nasıl buluşabileceğini öner. Onayımı
almadan hiçbir dosyayı değiştirme.
Adım 4: Hedefi /goal ile koy
Bu akışın merkezinde Claude Code’un /goal komutu duruyor.
Normalde Claude bir işi bitirdiğini düşündüğünde durur ve sıradaki adımı senden bekler. /goal ile ona bir bitiş koşulu veriyorsun. Claude Code dokümanına göre her turun sonunda ayrı, küçük ve hızlı bir model bu koşulun sağlanıp sağlanmadığına bakıyor. Koşul sağlanmadıysa Claude kontrolü sana bırakmadan yeni bir tura başlıyor.
Dokümanda dikkatimi çeken bir ayrıntı var: Koşulu değerlendiren model kendisi komut çalıştırmıyor, dosya da okumuyor. Yalnızca konuşmada görünenlere bakıyor. Bu yüzden koşulu, Claude’un kendi çıktısıyla kanıtlayabileceği şekilde yazmak gerekiyor. Dokümanın önerdiği iyi bir koşulun parçalarını şöyle özetledim:
Site yenilemesi için örnek bir koşul:
/goal ILHAM.md'deki yapıya göre sitenin ana sayfası yenilendi.
Kanıt: build komutu hatasız bitti, ana sayfanın 1440 piksel
genişlikte ve 390 piksel genişlikte ekran görüntüleri alınıp bu
konuşmada incelendi ve bulunan sorunlar düzeltildi.
Değişmeyecekler: GERCEKLER.md'deki rakamlar, sık sorulan soruların
cevapları ve referans metinleri harfi harfine aynı kaldı. Başka bir
siteye ait metin, logo, fotoğraf ya da kod kullanılmadı.
Ya da 100 turdan sonra dur.
Birkaç pratik not:
Koşul en fazla 4.000 karakter olabiliyor.
İşin ne kadar süreceğini sınırlamak için koşulun sonuna bir tur ya da süre sınırı eklemek öneriliyor.
/goalizin modunu değiştirmiyor. Turların sen başında beklemeden ilerlemesini istiyorsan Claude Code’u otomatik modda çalıştırman gerekiyor.Hiçbir şey yazmadan
/goaldersen hedefin ne olduğunu, ne kadar süredir çalıştığını, kaç tur geçtiğini ve son değerlendirmenin gerekçesini görüyorsun.Hedefi erken bitirmek istersen
/goal clearyazman yeterli.
Çalıştırma ayarları: Sitenin klasörü, Auto modu, Claude Opus 5.5 ve Medium efor seçiliyor. Sonra /goal komutuyla hedef veriliyor. Komut iki şeyle sınırlı: rapor tamamlanana kadar çalış ya da en fazla 100 turda dur.
Adım 5: Fotoğrafları kendi fotoğraflarınla değiştir
İlham aldığın sitenin yapısı ne kadar iyi olursa olsun, oradaki görseller sana ait değil. Benim sitemde açılıştaki fotoğraf TEDxOSTİMTech sahnesinden.
Fotoğraflarını bir klasöre koy ve Claude’a şunu yaz:
fotograflar/ klasöründeki görselleri kullanarak sitedeki her görsel
alanını doldur. Her fotoğrafın içeriğine bakarak en uygun bölüme
yerleştir. Yetmeyen bir yer varsa uydurma ya da stok görsel koyma,
o alanın listesini bana ver. Görselleri sayfa hızını bozmayacak
şekilde sıkıştır.
İkinci tur: varlık değişimi
Claude orijinal sitedeki her görselin yerini, oranını, renk ve parlaklığını ölçüp bir tabloya döküyor.
Her görsel için “bu alanda bizim şirketimizden ne görünmeli” tarifini yazıyor.
Video olan yerlere fotoğraftan yavaş zoom’lu klip koyuyor.
Her görselin kaynağını kayda geçiriyor.
3D modeller otomatik değişmiyor. Ayrıca istenmesi gerekiyor.
Adım 6: Telefonda nasıl göründüğüne bak
Masaüstünde kusursuz görünen bir sayfa, telefonda bambaşka bir hale gelebiliyor.
Claude Code’dan ekran görüntülerini hem masaüstü hem telefon genişliğinde almasını iste ve her birini kendin de aç. Göze batan bir şey varsa ekran görüntüsünü Claude’a sürükleyip doğal dille anlat: “Bu başlık telefonda dört satıra bölünüyor, üçe indir.” gibi.
Adım 7: GitHub ve Vercel ile yayına al
Son adımda kod GitHub’a, oradan Vercel’e gidiyor.
Vercel’in dokümanına göre GitHub’daki bir projeyi Vercel’e bağladığında her gönderim için otomatik olarak bir yayın oluşuyor. Ana dal dışındaki dallar kendi önizleme adresini alıyor. Ana dala yapılan gönderimler ise canlı siteye çıkıyor. Bir değişikliği geri aldığında da önceki sürüm alan adına yeniden bağlanıyor.
Bu yüzden değişiklikleri önce ayrı bir dalda denemek güvenli bir yol:
Yaptığımız değişiklikleri yeni bir dalda GitHub'a gönder.
Vercel'in bu dal için oluşturduğu önizleme adresini bana ver.
Ben onaylamadan ana dala birleştirme yapma.
Önizlemeyi telefonda ve bilgisayarda açıp her şeyin yerinde olduğundan emin olduktan sonra Claude’a ana dala birleştirmesini söyleyebilirsin.
Kullandığım promptlar
Aşağıdaki üç promptu sırayla çalıştırabilirsin. Köşeli parantezli yerleri kendi bilgilerinle doldur.
Prompt A: Stil analizi (önce bunu çalıştır)
Görev: [REFERANS SİTE URL] adresindeki siteyi incele ama kopyalama.
Bana bir "stil kartı" çıkar:
- Renk paleti (hex kodlarıyla), tipografi hiyerarşisi, boşluk ritmi
- Bölüm akışı (hero, kanıt, hizmet, CTA vb.) ve her bölümün amacı
- Animasyon ve etkileşim dili (kaydırma efekti, geçişler, hover)
- Bu sitenin "hissi"ni 3 kelimeyle tanımla
Kurallar: Metin, logo, görsel, kod veya font dosyası kopyalama.
Sadece tasarım prensiplerini çıkar. Çıktıyı stil-karti.md olarak kaydet.Prompt B: Özgün site üretimi
Görev: stil-karti.md'deki prensipleri kullanarak benim şirketim için
SIFIRDAN özgün bir site kur.
Şirket bilgisi: [ad], [ne yapıyoruz], [hedef kitle], [3 ana hizmet].
Marka: renkler [hex], fontlar [lisansı bende olan veya Google Fonts].
İçerik: Tüm metinleri benim şirketime göre yaz, referans sitenin
cümlelerini kullanma. Görseller için önce bir görsel listesi çıkar
(alan, oran, ne göstermeli), ben onaylamadan üretme.
Teknik: Mobil ve masaüstü uyumlu. GitHub'a yükle, Vercel'de önizleme aç.
Bitirme şartı: Her bölüm hem masaüstünde hem mobilde çalışıyor ve
referans sitenin hiçbir metni/görseli/kodu kullanılmamış olmalı.
Kontrol: Bitince referansla benzerlik raporunu ver; birebir benzeyen
bölüm varsa listele ve farklılaştır.Prompt C: Görsel üretimi
Görev: Onayladığım görsel listesindeki her alan için yeni görsel üret.
Kurallar: Gerçek kişi, başka markanın logosu veya metni olmasın.
Kendi fotoğraflarım [klasör] içinde, önce bunları kullan.
Her görselin kaynağını gorsel-kaynaklari.md dosyasına yaz.Siteni artık kim okuyor?
Bir web sitesi yaparken genelde insanları düşünürüz: sayfayı açan kişi ne görecek, aradığını nasıl bulacak? Bugün siteni okuyanların arasında Yapay Zeka ajanları da var. Biri ChatGPT’ye ya da Claude’a bir soru sorduğunda, cevabı hazırlayan ajan senin sayfanı açıp okuyabiliyor.
Şirketler bu ziyaretçileri artık ayrı ayrı adlandırıyor. OpenAI, ChatGPT aramasında görünmeyi OAI-SearchBot ile, model eğitimini GPTBot ile ayrı ayrı yönetmeni sağlıyor. Anthropic tarafında da eğitim için ClaudeBot, kullanıcının sorusuna cevap ararken sayfanı açan Claude-User gibi ayrı adlar var. Google ise Google-Extended adıyla içeriğinin Gemini için kullanılıp kullanılmayacağını yönetmeni sağlıyor; bu ayar Google Arama’daki yerini etkilemiyor.
Bir de şu var: Vercel’in 2024 sonundaki ölçümüne göre büyük Yapay Zeka tarayıcılarının çoğu JavaScript çalıştırmıyor. Yani bilgin ancak sayfa yüklendikten sonra beliriyorsa, ajan onu hiç görmeyebilir. Öte yandan Google, AI Overviews ve AI Mode için özel bir dosyaya gerek olmadığını söylüyor. Temel kurallar aynı: içerik metin olarak dursun, yapılandırılmış veri görünen metinle örtüşsün.
Ajanlar sitende neye bakıyor?
Ham HTML: JavaScript çalışmadan da metnin sayfada olması.
robots.txt: Hangi ajana izin verdiğini söyleyen dosya.
llms.txt: Sitenin ajanlar için hazırlanmış kısa Markdown özeti. llmstxt.org bunu bir öneri olarak tanımlıyor, yani henüz resmi bir standart değil.
Yapılandırılmış veri: Kim olduğunu ve ne sunduğunu anlatan JSON-LD etiketleri.
Erişilebilirlik ağacı: Chrome ekibine göre ajanlar sayfayı en çok bu ağaç üzerinden anlıyor. Bu yüzden her butonun ve form alanının anlaşılır bir adı olmalı.
Ufukta daha fazlası da var. WebMCP önerisinde, bir forma birkaç özellik eklemek onu ajanın doğrudan kullanabileceği bir araca dönüştürebiliyor. Microsoft’un açık projesi NLWeb ise sitenin mevcut schema.org verisinden sohbet edilebilir bir arayüz kuruyor. İkisi de henüz erken aşamada.
Ajan deneyimini nasıl test edersin?
Terminalde
curlile ana sayfanın ham HTML’ini indir ve en önemli bilgilerin orada olup olmadığına bak./robots.txt ve /sitemap.xml adreslerini aç, varsa /llms.txt dosyasını da oku.
Yapılandırılmış veriyi Google’ın Zengin Sonuçlar Testi ile kontrol et.
Chrome Lighthouse’taki deneysel Agentic Browsing kategorisini çalıştır. Bunun için Chrome 150 ya da daha yeni bir sürüm gerekiyor.
Bir görev testi yap: ajana yalnızca HTML’i ver ve gerçek bir ziyaretçinin soracağı bir şeyi sor.
Bunların hepsini Claude Code’a tek bir promptla yaptırabilirsin:
Görev: [SİTE ADRESİ] için ajan deneyimi denetimi yap. Hiçbir dosyayı değiştirme.
1. Ana sayfanın ve iletişim sayfasının ham HTML'ini curl ile indir.
JavaScript çalıştırmadan başlık, açıklama, ana metin ve iletişim
bilgisi görünüyor mu, kontrol et.
2. /robots.txt, /llms.txt ve /sitemap.xml dosyalarını aç. Hangi Yapay Zeka
ajanlarına izin verildiğini, llms.txt'nin llmstxt.org biçimine uyup
uymadığını ve sitemap'teki adreslerin çalışıp çalışmadığını yaz.
3. JSON-LD yapılandırılmış verisini bul, türlerini listele ve sayfadaki
görünür metinle çelişen bilgi var mı bak.
4. Görsellerin alt metinlerini kontrol et. Boş olanların süs görseli mi
yoksa eksik mi olduğunu ayır. Buton ve form alanlarının erişilebilir
bir adı var mı bak.
5. Görev testi: Yalnızca indirdiğin HTML'i kullanarak şu iki soruyu
cevapla: "Keynote için nasıl başvurulur?" ve "İletişim e-postası nedir?"
Cevabı hangi sayfada bulduğunu yaz. Bulamazsan bunu açıkça söyle.
Çıktı: Bulguları ajan-raporu.md dosyasına yaz. Her madde için durum
(tamam ya da eksik), kanıt ve önerilen düzeltmeyi ekle. Ben onaylamadan
sitedeki hiçbir dosyayı değiştirme.Bu güncellemeden ne öğrendim?
Bir siteyi yeniden üretmek artık zor değil. Zor olan, neyi alıp neyi bırakacağına karar vermek. Yapıyı başkasından öğrenebilirsin ama sitenin içindeki cümleler, rakamlar, fotoğraflar ve hikâyeler senin olmalı. Ziyaretçinin aklında kalan da zaten o.
Kendi siteni bu akışla yenilersen bağlantısını yorumlara bırak, birbirimizden ilham alalım.
Bir sonraki yazıda görüşmek üzere.