Yapay zeka ile web sitesi yapmak: adım adım rehber

Yapay zeka ile web sitesi yapmak için bir kodlama ajanına (Claude Code, Codex, Gemini CLI gibi) siteyi kısa ve somut bir tarifle anlatırsın; ajan projeyi kurar, sayfaları yazar, sen tarayıcıda bakıp düzeltme istersin ve sonunda siteyi Vercel, Netlify ya da Cloudflare Pages’e yüklersin. Tanıtım sitesi ya da portfolyo için bu iş bir öğleden sonra sürebilir. Asıl fark yaratan şeyler doğru stack, iyi bir ilk prompt ve yayından önceki kontrol listesi.

Bu yazıda sıfırdan yayına kadar giden yolu adım adım anlatıyorum: hangi teknolojiyi neden seçmelisin, ajana ilk mesajda ne yazmalısın, tasarımı ekran görüntüleriyle nasıl toparlarsın, mobil ve erişilebilirlik kontrolü, SEO temelleri, iletişim formu, alan adı ve yayın. Sonda da yapay zekanın sık yaptığı hatalar ve güvenlik notları var.

Önce karar: site oluşturucu mu, kodlama ajanı mı?

İki yol var ve ikisi de “yapay zeka ile site yapmak” sayılıyor.

Yapay zeka destekli site oluşturucular (Wix, Framer, Webflow gibi platformların yapay zeka özellikleri ya da tarayıcıda çalışan uygulama üreticileri) bir cümleden birkaç dakikada yayında bir sayfa çıkarır. Hızlıdır, barındırma dahildir. Bedeli: kod çoğunlukla platformda kalır, aylık ücret ödersin, platformun izin vermediği bir şeyi yapamazsın ve başka yere taşımak zordur.

Kodlama ajanları ise senin bilgisayarında, senin klasöründe çalışır. Dosyaları yazar, npm install çalıştırır, hatayı okuyup düzeltir. Daha fazla adım ister; karşılığında elinde normal bir kod deposu olur. Ücretsiz barındırmalara koyabilir, istediğin geliştiriciye devredebilir, istediğin kütüphaneyi ekleyebilirsin.

Bu yazı ikinci yolu anlatıyor; yani vibe coding ile, kodu ajana yazdırıp sonucu yöneterek site yapmayı. Hangi ajanın sana uyduğunu bilmiyorsan en iyi yapay zeka kodlama araçları yazısına göz at.

1. Gerekenleri kur

Üç şey yeter:

1. Node.js (LTS sürümü). Astro ve Next.js bunun üzerinde çalışır.
2. Git ve bir GitHub hesabı. Hem geri dönüş noktası, hem de yayın servislerine bağlanmanın en kolay yolu.
3. Bir kodlama ajanı. Örneğin:

npm install -g @anthropic-ai/claude-code   # Claude Code
npm install -g @openai/codex               # Codex

Sonra boş bir klasör aç, git’i başlat ve ajanı orada çalıştır:

mkdir kafe-sitesi && cd kafe-sitesi
git init
claude

Git’i baştan başlatmak önemli: ajan bir şeyi bozduğunda git diff ile ne değiştiğini görür, git checkout . ile geri alırsın.

2. Stack seç: Astro, Next.js ya da düz HTML

Ajan her şeyi yazabilir, ama ona yön vermezsen o an aklına gelen en ağır çözümü seçebilir. Kabaca:

• Düz HTML + CSS: tek sayfalık bir davetiye, bir ürün tanıtımı, bir “yakında” sayfası. Derleme yok, bağımlılık yok, her yerde çalışır.
• Astro: tanıtım sitesi, kurumsal site, blog, portfolyo. Sayfalar varsayılan olarak saf HTML olarak üretilir, bu yüzden hızlıdır ve SEO için iyidir. Blog yazılarını Markdown dosyası olarak tutar. İçerik sitelerinde benim varsayılanım bu.
• Next.js: kullanıcı girişi, panel, veritabanı, ödeme gibi uygulama tarafı ağır işler. Tek başına bir tanıtım sitesi için gereğinden fazla.

Emin değilsen Astro ile başla. Sonradan bir iletişim formu ya da küçük bir API gerekse bile Astro bunları kaldırır.

3. İlk prompt: tasarım yönüyle birlikte

En sık gördüğüm hata, ajana “bana bir kafe sitesi yap” yazmak. Sonuç, herkesin gördüğü o mor degradeli, ortalanmış başlıklı şablon olur. İlk mesaja içerik, yapı ve tasarım yönünü birlikte koy:

Astro ile "Kumbara Kahve" adlı bir mahalle kafesi için tanıtım sitesi kur.

Sayfalar: Ana sayfa, Menü, Hakkımızda, İletişim.
Ana sayfa: büyük bir fotoğraf alanı (şimdilik yer tutucu), tek cümlelik slogan,
"Menüyü gör" düğmesi, çalışma saatleri, adres ve harita bağlantısı.
Menü: kategorilere ayrılmış liste (kahveler, tatlılar, kahvaltı), fiyatlar TL.

Tasarım yönü: sıcak ve sade. Krem arka plan (#f6f0e6), koyu kahve metin (#2b1d14),
vurgu rengi terracotta (#c2603a). Başlıklarda serif, metinde okunaklı sans-serif
(Google Fonts). Bol boşluk, köşe yuvarlaklığı küçük, gölge yok, degrade yok.
Mobil öncelikli olsun.

Kurallar:
- Tailwind kullanma, düz CSS ve CSS değişkenleri kullan.
- Tüm metinler Türkçe, html lang="tr".
- Her sayfada benzersiz <title> ve meta description olsun.
- Bitirince `npm run dev` ile çalıştır ve hangi dosyaları oluşturduğunu listele.

Neden işe yarıyor: renkleri ve yazı tiplerini somut verdin, “yapma” listesi ekledin (degrade, gölge), sayfa yapısını ve içeriği tarif ettin. Ajanın tahmin edeceği şey ne kadar azsa sonuç o kadar sana benzer. Beğendiğin bir sitenin ekran görüntüsünü de ekleyebilirsin: “Bu sitenin boşluk ve tipografi hissine yakın olsun, renkleri ve içeriği kopyalama.”

4. Tasarımı ekran görüntüleriyle toparla

Ajan npm run dev çalıştırınca site genelde http://localhost:4321 (Astro) ya da http://localhost:3000 (Next.js) adresinde açılır. Burada iş döngüye döner:

1. Sayfayı tarayıcıda aç, beğenmediğin yerin ekran görüntüsünü al.
2. Görüntüyü ajana ver (çoğu CLI sürükle bırak ya da yapıştırmayla görsel kabul eder) ve tek bir şeyi düzelt dedirt.
3. Sonucu kontrol et, iyiyse commit at.

Ekteki görüntüde ana sayfanın mobil hali var. Üç sorun:
1. Slogan ekrana sığmıyor, satır kırılması kötü.
2. "Menüyü gör" düğmesi kenara yapışık.
3. Çalışma saatleri tablosu yatayda taşıyor.
Yalnızca bunları düzelt, başka bir şeyi değiştirme.

“Başka bir şeyi değiştirme” cümlesi küçük ama önemli. Ajanlar bir sorunu düzeltirken komşu bileşenleri de “iyileştirme” eğiliminde. Her başarılı adımdan sonra git add -A && git commit -m "..." yap; bir sonraki istek işleri bozarsa son iyi noktaya dönersin.

Ajanın tarayıcıyı kendisinin kullanmasını istersen bir Playwright MCP sunucusu ekleyebilirsin; ajan sayfayı açar, ekran görüntüsü alır ve kendi çıktısını görerek düzeltir.

5. Mobil ve erişilebilirlik kontrolü

Yapay zekanın yazdığı siteler masaüstünde iyi görünüp telefonda dağılabiliyor. Yayından önce:

• Tarayıcının geliştirici araçlarında cihaz modunu aç; en az 375 px (telefon), 768 px (tablet) ve 1440 px (masaüstü) genişliğe bak. Yatay kaydırma çubuğu çıkıyorsa bir şey taşıyor.
• Chrome DevTools’taki Lighthouse raporunu çalıştır; Performans, Erişilebilirlik, En İyi Uygulamalar ve SEO puanlarını ve somut uyarıları verir.
• Sayfayı yalnızca klavyeyle (Tab, Enter) gez. Her bağlantıya ve düğmeye ulaşabiliyor ve odağı görebiliyor musun?

Uyarıları doğrudan ajana ver:

Lighthouse erişilebilirlik raporu şunları söylüyor: [uyarıları yapıştır].
Bunları düzelt. Ayrıca her görselde anlamlı bir alt metni, her form alanında
label'ı, metin/arka plan kontrastının WCAG AA'yı karşıladığını ve klavye odağının
görünür olduğunu kontrol et.

6. SEO temelleri

Ajan bunları bilir ama sen istemezsen çoğu zaman yarım bırakır. Kontrol listesi:

• Her sayfaya benzersiz <title> (60 karakter civarı) ve meta description (150–160 karakter civarı).
• Sayfa başına tek bir <h1>, altında mantıklı <h2>/<h3> sırası.
• sitemap.xml ve robots.txt. Astro’da @astrojs/sitemap entegrasyonu sitemap üretir; bunun için astro.config içinde site adresinin tanımlı olması gerekir.
• Open Graph etiketleri (og:title, og:description, og:image); bağlantı WhatsApp’ta ya da sosyal medyada paylaşıldığında önizleme bunlardan gelir.
• Canonical URL ve doğru lang özniteliği.
• Yerel bir işletmeysen adres, telefon ve çalışma saatlerini metin olarak yaz (görselin içine gömme) ve isteğe bağlı olarak LocalBusiness yapılandırılmış verisi ekle.

SEO denetimi yap: her sayfanın title ve meta description'ını listele,
eksik ya da çok uzun olanları düzelt. @astrojs/sitemap ekle, robots.txt oluştur,
Open Graph etiketlerini ortak layout'a koy. Değişiklikleri özetle.

7. İletişim formu

Statik bir sitenin kendi sunucusu yoktur, bu yüzden form gönderimi bir yere gitmeli. Üç makul yol:

1. Form servisi: Formspree gibi bir servis ya da Netlify’da yayınlıyorsan Netlify Forms. Form action’ı servise gider, sen e-postayla alırsın. En kolayı bu.
2. Sunucusuz fonksiyon: Astro ya da Next.js’te küçük bir API rotası formu alır ve bir e-posta API’siyle gönderir. API anahtarı yalnızca sunucuda, ortam değişkeninde durur.
3. Sadece mailto: bağlantısı: form yok, sorun yok. Küçük işletmeler için çoğu zaman yeterli.

Hangisini seçersen seç, ajana şunları ekletmeyi unutma: zorunlu alanların sunucu tarafında da kontrolü, basit bir spam önlemi (gizli honeypot alanı ya da servisin sunduğu captcha) ve gönderim sonrası anlaşılır bir “mesajın alındı” durumu. Kişisel veri topladığın için kısa bir gizlilik metni (Türkiye’de KVKK aydınlatma metni) koymak da gerekir.

8. Alan adı ve yayın

Siteyi önce GitHub’a gönder:

git remote add origin git@github.com:kullanici/kafe-sitesi.git
git push -u origin main

Sonra üç yaygın seçenekten birini bağla. Üçü de GitHub deposunu bağladığında her push’ta otomatik derleyip yayınlar ve her dal ya da pull request için önizleme adresi verebilir:

• Vercel: Next.js’in geliştiricisi; Astro’yu da sorunsuz tanır. CLI ile: npx vercel önizleme, npx vercel --prod üretim.
• Netlify: Statik siteler için çok oturmuş; yerleşik form desteği var. CLI: npx netlify deploy --prod.
• Cloudflare Pages: Cloudflare ağında barındırır; alan adın zaten Cloudflare’daysa pratik. CLI: npx wrangler pages deploy dist.

Derleme ayarları genelde otomatik algılanır: Astro için derleme komutu npm run build, çıktı klasörü dist. Alan adını servisin panelinden ekler, sana verdiği DNS kaydını (genelde bir A ya da CNAME kaydı) alan adını aldığın firmanın panelinde girersin. HTTPS sertifikası bu servislerde otomatik gelir.

Yayından sonra Google Search Console’a siteyi ekleyip sitemap adresini gönder; Google’ın siteyi bulması hızlanır.

Yapay zekanın sık yaptığı hatalar

• Şablon görünüm. Tasarım yönü vermezsen her şey aynı degrade, aynı kart ızgarası olur. Renk, yazı tipi ve “yapma” listesi ver.
• Uydurma içerik. Ajan sahte müşteri yorumları, uydurma rakamlar (“10.000+ mutlu müşteri”), var olmayan ödüller yazabilir. Her metni oku; gerçek olmayanı sil.
• Telif riski taşıyan görseller. İnternetten rastgele görsel bağlantısı koyabilir. Kendi fotoğraflarını ya da lisansı açık görselleri kullan.
• Gereksiz bağımlılık. Basit bir menü için koca bir animasyon ya da UI kütüphanesi ekleyebilir. “Yeni paket eklemeden önce sor” kuralı koy.
• Kırık bağlantılar ve boş href’ler. href="#" ile bırakılmış düğmeleri ara. Yayından önce her bağlantıya tıkla.
• Yalnızca masaüstünde test. Ajan çoğu zaman sadece varsayılan pencere boyutuna bakar; mobil kontrolü sen iste.
• “Bitti” demesi. Ajan derleme hatası varken bile işi bitmiş sayabilir. Yayından önce npm run build komutunu kendin çalıştır; hatasız bitmeli.

Güvenlik

Bir tanıtım sitesinde bile birkaç kural var:

• Gizli anahtarları .env dosyasında tut ve .env’nin .gitignore’da olduğunu kontrol et. Yayın servislerinde bu değerleri panelden ortam değişkeni olarak girersin.
• API anahtarlarını sohbete yapıştırma. Ajana “anahtar .env içinde RESEND_API_KEY adıyla duruyor” de, değerin kendisini yazma. Sohbet geçmişi de bir yerde saklanıyor.
• İstemciye giden kodda sır olmaz. Tarayıcıda çalışan JavaScript’e konan her anahtar herkesin görebileceği bir anahtardır. E-posta ya da ödeme anahtarları yalnızca sunucu tarafında kullanılmalı.
• Ajanın çalıştırdığı komutları oku. Özellikle rm -rf, curl ... | sh, global paket kurulumu ya da git push --force gibi komutlara otomatik onay verme.
• Commit’ten önce diff’e bak. git diff ile neyin değiştiğini görmek, hem hataları hem de yanlışlıkla eklenmiş bir sırrı yakalamanın en kolay yolu.

Bunu AgentVera ile yapmak

Yukarıdaki her şey tek bir terminal ve bir tarayıcıyla yapılabilir. Benim pratiğimde işi rahatlatan birkaç şey var ve bunları AgentVera içinde kullanıyorum:

• Paralel ajanlar, ayrı worktree’ler. Örneğin bir Claude Code ajanı içerik ve SEO üzerinde, bir Codex ajanı arayüzde çalışır; her biri kendi git worktree’sinde olduğu için birbirinin dosyasını ezmez. Hepsi tek bir çalışma alanı ızgarasında görünür.
• Önizleme ortamları. Her worktree’nin dev sunucusu kendi adresinde açılır; önizleme ortamları sayfaları mobil, tablet ve masaüstü boyutlarında görüntüleyip önceki hâliyle piksel piksel karşılaştırabilir.
• Ajan tarayıcısı. Ajanlar ayrı profilli bir Chrome’u Playwright ile kullanır, sen de ajan tarayıcısında ne yaptıklarını canlı izlersin.
• İnceleme ve token takibi. Tur bitince kod incelemesi ajanın yazdığını ikinci bir modele okutur; her ajanın token kullanımı da panelde görünür. Birleştirmeden önce diff’i yine sen okursun.
• Vercel. Proje Vercel’e bağlıysa Vercel sekmesi dağıtımları ve derleme loglarını gösterir; kırılan bir derlemeyi ajana düzelttirebilirsin.

Bunlar şart değil; ama birden fazla ajanla ilerlediğinde neyin nerede olduğunu takip etmeyi kolaylaştırıyor. Yöntemin kendisi için paralel kodlama ajanları yazısına bak.

Kısa kontrol listesi

• Stack seçildi (içerik sitesi için Astro)
• İlk prompt’ta sayfalar, içerik, renkler, yazı tipleri ve “yapma” listesi var
• Her iyi adımdan sonra commit atıldı
• 375, 768 ve 1440 px genişlikte kontrol edildi; Lighthouse uyarıları giderildi
• Her sayfada title, meta description, tek h1; sitemap ve robots.txt var
• Uydurma yorum, rakam ve görsel kalmadı
• Form çalışıyor, spam önlemi ve gizlilik metni var
• .env git’te değil, sırlar yalnızca sunucu tarafında
• npm run build hatasız; site yayında, alan adı ve HTTPS çalışıyor

Sonuç

Yapay zeka ile web sitesi yapmak artık kod yazmaktan çok iyi tarif etmek ve dikkatli kontrol etmek demek. Doğru stack’i seç, ilk mesaja tasarım yönünü koy, küçük adımlarla ilerleyip her adımı commit’le, yayından önce mobil, erişilebilirlik ve SEO kontrolünü yap. Ajan hızlı yazar; neyin doğru olduğuna karar veren hâlâ sensin.