Tek Komutla 10.000 Dolarlık Web Sitesi Oluştur

Gerekenler

• Bilgisayarında Node.js 18+ yüklü olmalı
• Bir Anthropic API anahtarı (ANTHROPIC_API_KEY ortam değişkeni olarak tanımlı)
• 21st.dev'de ücretsiz bir hesap (MCP sunucu URL'ini almak için)
• Bir terminal (macOS, Linux veya Windows WSL)

Adım Adım Rehber

1. Claude Code'u Kur

Terminalini aç ve Claude Code'u npm üzerinden global olarak yükle.

npm install -g @anthropic-ai/claude-code

Ardından kurulumu tamamlamak için Claude Code'u başlat:

claude

2. Framer Motion'ı Yükle

Projenize pürüzsüz, prodüksiyon kalitesinde animasyonlar için Framer Motion'ı ekle.

npm install framer-motion

Bu sayede Claude, fade-in, slide, scroll efektleri ve daha fazlasını — tek satır animasyon kodu yazmadan — kullanabilir.

3. UI/UX Pro Max Skill'ini Ekle

Claude Code içinde, profesyonel arayüzler oluşturan tasarım skill'ini etkinleştir.

Skill nasıl eklenir:

• Claude Code ayarlarını aç
• Skills / Tools sekmesine git
• "UI/UX Pro Max" araması yap ve ekle

4. 21st.dev ile Web Siteni Oluştur

21st.dev'i bir MCP sunucusu olarak bağla, ardından aşağıdaki komutu kullan.

Bu komutu Claude Code'a yapıştır (yer tutucuyu kendi sektörün veya ürün türünle değiştir):

/21st build a professional [your niche] website

[your niche] yerine şunları yazabilirsin: SaaS landing page, creative agency, personal portfolio veya e-commerce store.

Ne Elde Ediyorsun?

• 10.000$+ web sitesi değeri
• ~1 komut toplam çaba
• 0 saat tasarım çalışması

Claude Code tüm inşaatı halleder — temiz tasarım, duyarlı düzen, pürüzsüz Framer Motion animasyonları ve profesyonel bileşen yapısı — hepsi otomatik olarak üretilir.

En İyi Sonuçlar için İpuçları

• Sektörünü spesifik belirt — ne kadar bağlam verirsen çıktı o kadar iyi olur
• İlk üretimden sonra renkleri, bölümleri veya metni değiştirmesini iste
• "add a pricing section" veya "make the hero darker" gibi takip komutları kullan
• Sitenin tamamı düzenlenebilir kod — sahipliğin sende ve istediğin platformdan yayınlayabilirsin