Claude Code ile Web Sitesi Yapma: Sıfırdan Prod'a Gerçek Bir Proje Deneyimi (2026)

2026'da bir web sitesi yapmak için artık saatlerce kod yazmanıza gerek yok. Ama bu, 'her şeyi AI'a yaptırın' demek değil. Ben son 6 aydır Claude Code ile gerçek projeler geliştiriyorum — thekai.co'nun kendisi, kamer.kim, müşteri siteleri ve daha fazlası. Bu yazıda, size bir web sitesini Claude Code ile nasıl sıfırdan production'a aldığımı, gerçek deneyimlerimle, hatasız anlatacağım.

1. Claude Code Nedir ve Neden Farklı?

Claude Code, Anthropic'in terminal tabanlı AI kodlama asistanı. Cursor veya Copilot'tan farkı şu: Terminalinizde çalışıyor, proje dizininizi gerçekten okuyabiliyor, dosya yazabiliyor, komut çalıştırabiliyor ve hepsinden önemlisi — bağlamı anlıyor. Bir dosyayı düzenlerken projenin tamamını görebiliyor. Bu, özellikle Next.js gibi çok dosyalı framework'lerde ezber bozucu.

Cursor vs Copilot vs Claude Code: Hangisi?

• Cursor: IDE içinde, hızlı otomatik tamamlama için iyi. Ama proje bazlı büyük değişikliklerde bağlamı dar.
• GitHub Copilot: Kod tamamlama için pratik. Ancak 'bir sayfa yap' deyince sayfayı yapamaz.
• Claude Code: Terminal tabanlı, proje genelinde çalışıyor. 'Hero section'ı Apple-tier yap' deyince, globals.css'ten tutun Hero.tsx'e her şeyi düzenliyor. Benim tercihim bu.

2. Kurulum: 5 Dakikada Başla

Claude Code'u kurmak sandığınızdan kolay. Tek satırla başlıyorsunuz:

Adım 1: npm ile global kurulum

npm install -g @anthropic-ai/claude-code komutuyla global olarak kuruyorsunuz. Sonra proje dizininizde claude yazmanız yeterli. API anahtarınızı isteyecek — Anthropic Console'dan alabilirsiniz.

Adım 2: Proje bağlamını tanıtın

İlk açılışta Claude Code, projenizin dizin yapısını okuyor. Ama asıl farkı yaratan şey: CLAUDE.md dosyası. Bu dosyaya projenizin stack'ini, kurallarını ve tercihlerinizi yazıyorsunuz. Claude her oturumda bu dosyayı okuyor ve ona göre davranıyor. Ben thekai.co için şöyle bir CLAUDE.md kullanıyorum:

# Stack: Next.js 16 + TypeScript + Tailwind v4 + framer-motion
# Renk: #D8FB32 (spark) + #0A0A0A (bg)
# Asla pure white kullanma, maks #F5F5F5
# Türkçe commit mesajları

Adım 3: MCP sunucularını bağlayın

Claude Code'un en güçlü özelliği MCP (Model Context Protocol) entegrasyonları. Playwright ile tarayıcı kontrolü, Supabase veritabanı yönetimi, Vercel deploy — hepsini Claude Code'dan yönetebiliyorsunuz. Ben projelerimde şu MCP'leri aktif kullanıyorum:

• Playwright MCP: Tarayıcıda siteyi açıp snapshot alıyor, UI hatalarını anında yakalıyor.
• Supabase MCP: Veritabanı migration, auth, RLS politikalarını terminalden yönetiyor.
• Vercel MCP: Deploy, env değişkenleri, domain yönetimi tek komutla.
• Context7: Güncel kütüphane dokümantasyonunu anında çekiyor.

3. Gerçek Proje: Bir Blog Sitesini 2 Saatte Canlıya Alma

Size somut bir örnek vereyim. Geçen ay bir müşteri için Next.js blog sitesi yaptım. İşte adım adım süreç:

Faz 1: Proje iskeleti (15 dakika)

npx create-next-app@latest blog --typescript --tailwind --app ile projeyi oluşturdum. Sonra Claude'a "Bu projeye DM Sans + DM Serif Display fontlarını ekle, koyu tema yap, #D8FB32 aksan rengi olsun, globals.css'i hazırla" dedim. 15 dakikada tasarım sistemi hazırdı.

Faz 2: Veri katmanı + blog altyapısı (30 dakika)

Blog yazılarını TypeScript dosyasında tutan bir yapı kurdum. Claude Code'a 'blog-data.ts oluştur, BlogPost tipini şu alanlarla tanımla: slug, title, description, content...' dedim. Tip tanımı, örnek veriler, filtreleme fonksiyonları — hepsini tek seferde yazdı.

Faz 3: Sayfalar ve SEO (25 dakika)

Blog index sayfası, detay sayfası, metadata generation, JSON-LD Article schema, OpenGraph, Twitter card — hepsini Claude Code halletti. Ayrıca sitemap.xml ve robots.txt'yi de unutmadı.

Faz 4: Tasarım cilası (20 dakika)

'Kart hover'larını Apple-tier yap, scroll-reveal ekle ama abartma, glow efektlerini %35 azalt' gibi direktiflerle tasarımı cilaladım. Claude Code framer-motion ile stagger animasyonlarını, hover scale geçişlerini, gradient maskeleri tek tek ayarladı.

Faz 5: Deploy (10 dakika)

vercel --prod ile production'a aldım. Claude Code Vercel MCP üzerinden env değişkenlerini kontrol etti, build'i izledi, çıkan uyarıları düzeltti.

4. Claude Code ile Çalışırken Öğrendiğim 5 Kritik Ders

1. Küçük diff, sık commit

Claude Code'a asla 'tüm siteyi yeniden yaz' demeyin. Her seferinde tek bir section, tek bir component değiştirin. Değişikliği inceleyin, commit'leyin, sonra devam edin. Ben her özellik için ayrı branch açıyorum.

2. CLAUDE.md sizin kullanım kılavuzunuz

Bu dosyaya ne kadar spesifik kural yazarsanız, Claude o kadar tutarlı çalışıyor. Renk token'ları, font kuralları, mimari kararlar, hatta 'asla pure white kullanma' gibi tasarım kuralları — hepsi burada.

3. Plan önce, kod sonra

Claude Code'un plan modunu kullanın. 'Önce bir plan yap, sonra uygula' dediğinizde, mimari hatalar %90 azalıyor. Planı gördükten sonra 'şu kısmı şöyle değiştir' diyebiliyorsunuz.

4. TypeScript'i zorunlu tutun

Claude Code TypeScript'i çok iyi kullanıyor. Tip hatalarını anında yakalıyor, generics ile güvenli kod yazıyor. TypeScript'siz büyük proje yapmayı düşünmeyin bile.

5. Hata ayıklamayı Claude'a bırakın

Build hatası mı var? 'Bu hatayı çöz' deyin, hata mesajını yapıştırın. TypeScript hatası mı? Aynısı. Lighthouse skoru mu düşük? 'Performansı iyileştir' deyin. Ben hata ayıklamaya neredeyse hiç vakit harcamıyorum artık.

5. Claude Code'un Sınırları — Ne Zaman İnsan Gerekir?

Şeffaf olayım: Claude Code her şeyi yapamaz. İşte hâlâ insan gerektiren durumlar:

• Marka stratejisi: Hangi renk, hangi font, hangi ton — bunlar sizin kimliğiniz. Claude teknik olarak uygular, kararı siz verirsiniz.
• İş mantığı: 'Bu sayfada önce fiyat mı görünsün, önce referans mı?' — Claude veriyle destekler, karar sizin.
• Kullanıcı testi: Gerçek kullanıcıların ne yapacağını Claude bilemez. Analytics'e bakıp karar vermek size kalır.
• Son onay: Production deploy öncesi son kontrol her zaman insanda olmalı. Ben her deploy öncesi siteyi manuel test ederim.

6. The Kai ile Profesyonel Claude Code Geliştirme

The Kai olarak, Claude Code ile profesyonel web sitesi ve otomasyon geliştirme hizmeti veriyoruz. 72+ AI ajanıyla çalışan bir orkestrasyon sistemimiz var. İşletmeniz için özel bir web sitesi, blog, e-ticaret entegrasyonu veya otomasyon sistemi istiyorsanız, Claude Code + The Kai farkıyla teslim ediyoruz.

Claude Code, 2026'da web geliştirmenin en heyecan verici aracı. Ama unutmayın: en iyi sonuçlar, AI ile insan deneyiminin birleştiği noktada çıkıyor. Siz vizyonu ve kararları verin; Claude Code uygulamayı halletsin. Bu rehberdeki yaklaşımla, bir sonraki projenizi çok daha hızlı ve kaliteli teslim edebilirsiniz.