Claude Code ile 5.000 Dolarlık Web Sitesi Yapın — Ücretsiz Kurulum Rehberi

Bu sistem neden işe yarıyor?

Bir tasarımcıya ihtiyacınız yok. Bir yazılım ekibine ihtiyacınız yok. Prompt yazmaya başlamadan önce doğru kuruluma ihtiyacınız var. Çünkü Claude Code; ona erişim verdiğiniz ortam, animasyonlar, tasarım zevki ve bileşenler kadar iyidir.

Bu rehber, Claude Code’u sıradan bir kod üreticisinden kıdemli seviyede bir web tasarımcıya dönüştüren birebir teknoloji yığınıdır.

Adım 1 — Claude Code’u Kurun

Claude Code, terminaliniz üzerinden yerel olarak bilgisayarınızda çalışır. Tek bir komutla kullanmaya başlayabilirsiniz: npm install -g @anthropic-ai/claude-code ve ardından claude çalıştırmanız yeterlidir.

Adım 2 — Animasyon Desteği Ekleyin: Framer Motion

Varsayılan yapay zeka üretimi siteler genellikle statik ve cansız görünür. Animasyon, bir siteyi premium hissettiren en önemli unsurlardan biridir. npm install framer-motion ile kütüphaneyi kurun.

1. 1
   Framer Motion paketini projenize yükleyin.
2. 2
   Claude Code'a talimat verin: 'Tüm animasyonlar için Framer Motion kullan. Etkileşimli öğelerde scroll tetiklemeli fade efektleri, sıralı görünme animasyonları ve yumuşak hover geçişleri uygula.'

Hero alanları nefes alır. Kartlar scroll sırasında kayarak görünür. Butonlar canlı hissettirir. Bu tek ekleme, 'AI sitesi' ile 'ajans işi web sitesi' arasındaki farkı yaratır.

Adım 3 — Tasarım Odaklı Bir Skill Ekleyin

Claude Code, Skills desteğine sahiptir. Skills, Claude’un bir göreve nasıl yaklaşacağını yönlendiren tekrar kullanılabilir talimat setleridir. Frontend tasarım skill’i Claude’a 'zevk' kazandırır: boşluk kullanımı, hiyerarşi, tipografi, renk sistemleri ve layout prensipleri.

• Proje kök dizininde .claude/skills/ klasörü oluşturun.
• Tasarım kurallarını içeren bir SKILL.md dosyası ekleyin veya herkese açık frontend-design skill’ini kullanın.
• Claude Code, arayüz geliştirirken bunu otomatik olarak referans alacaktır.

• Tipografi ölçeği: Rastgele font boyutları yerine gerçek bir tipografi sistemi kullanın.
• Boşluk sistemi: 8px tabanlı grid sistemi.
• Renk token’ları: Primary, neutral, accent gibi tanımlı renkler; rastgele hex kodları yok.
• Component pattern’leri: Buton durumları, kart yapısı, form layout’ları.
• Generic AI estetiğinden kaçınma talimatları.

Adım 4 — Bir Component Library Entegre Edin: 21st.dev

Tekerleği yeniden icat etmeyin. 21st.dev, doğrudan projenize ekleyebileceğiniz üretime hazır ve güzel tasarlanmış bileşenlerden oluşan bir kütüphanedir.

1. 1
   21st.dev sitesine gidin ve bileşenleri inceleyin (hero, pricing, testimonial, navbar, footer).
2. 2
   Component kodunu kopyalayın ve projenize ekleyin.
3. 3
   Claude Code'a prompt verin: 'Bu 21st.dev component’ini landing page’imize entegre et. Tasarım token’larımıza uyumlu hale getir, placeholder içerikleri bizim metinlerimizle değiştir ve Framer Motion giriş animasyonları ekle.'

Tüm Teknoloji Yığınına Genel Bakış

Kurulumdan Sonra Kullanılacak Başlangıç Prompt’u

Kaçınılması Gereken Yaygın Hatalar

• Tasarım skill’ini atlamak. Bu olmadan 'AI tarafından üretilmiş' diye bağıran generic bir site elde edersiniz.
• Belirsiz prompt yazmak. Bölümler, animasyonlar ve içerik konusunda net olun. Claude Code, brief’iniz kadar iyi sonuç verir.
• İterasyon yapmamak. İlk çıktı nadiren final çıktı olur. Claude Code’dan boşlukları, kontrastı ve hareketleri iyileştirmesini isteyin.
• Performansı unutmak. Her zaman lazy-loaded görseller, optimize edilmiş fontlar ve en sonda Lighthouse denetimi isteyin.

Az Önce Ne Kadar Tasarruf Ettiniz?