Claude Code ile web sitesi: Fal.ai, Nano Banana ve Kling ile videolu açılış kur

Kodlama bilmeden görseli, videoyu ve canlıya almayı Claude Code'a nasıl yaptıracağını adım adım öğreneceksin.

Hızlı not: Hangi modeli kullanacağını söylemezsen Claude Code en kolayını seçer. Nano Banana ve Kling 3.0 gibi modeli adıyla yaz.

Bu rehberin videosu: 20 Dakikada Profesyonel Web Sitesi: Claude Code, Fal.ai ve Kling Entegrasyonu (00:18:18).

Claude Code'a tasarım reposunu yükle

Antigravity'de yeni bir klasör aç. Örnekte adı "website profesyonel" oldu.

Uzantılardan Claude Code'u aç. Yan taraftaki agent panelini kapat, gerek yok.

Sonra Claude Code'a bir GitHub reposu verip ondan site kurmasını iste. Repo, sitenin tasarım mantığını belirleyen bir skill seti içeriyor.

• Komutu bypass modunda çalıştır, her adımda onay beklemesin.
• Repo tek başına bile profesyonel bir ilk sürüm çıkarıyor.

1. Antigravity'de klasör aç
2. Claude Code uzantısını başlat
3. Repo bağlantısını yapıştır
4. Bypass modunda çalıştır

Bu GitHub reposunu kullanarak profesyonel, kaliteli bir web sitesi oluştur. Önce repoyu yükle. Web sitesi bir otomasyon ajansı web sitesi olmalı.

Nano Banana ve Kling promptlarını önce sohbet asistanına yazdır

Açılış animasyonu için iki prompt lazım. Biri görsel için Nano Banana promptu. Diğeri video için Kling promptu.

Örnekte bu promptları ChatGPT'den aldık. Aynı işi Claude Code'a da yaptırabilirsin.

İlk sonuç zayıf kalırsa promptu iyileştirmesini iste. Konsept de önerebilirsin: örnekte uzay gemisi denendi.

Bir otomasyon ajansı için web sitesi yapmak istiyorum. Site ilk açıldığında çok güzel bir animasyon olsun. Nasıl bir animasyon yapabilirim? Bana bir Nano Banana promptu, ardından bir Kling promptu ver.

Fal.ai anahtarını ver, modeli adıyla söyle

Fal.ai'ye gir, API anahtarları bölümünden yeni anahtar oluştur. Adını sonradan silmeyi unutmayacağın bir şey koy.

Anahtarı Claude Code'a yapıştır. Önce Nano Banana ile görsel, sonra Kling ile video üretir.

Örnekte ilk denemede Flux Dev seçti. Sonuç beğenilmedi. Nano Banana dokümantasyon bağlantısını verip onu kullanmasını istedik. Kling için de Kling 3.0 dedik.

• Fal.ai'de "generate recent" bölümünden ne ürettiğini kontrol et.
• Panel geç güncellenebilir; görünmüyorsa hemen müdahale etme.
• Video için önce görsel üretmesi gerektiğini açıkça yaz.

1. Fal.ai'de API anahtarı al
2. Anahtarı Claude Code'a ver
3. Nano Banana ile görsel üret
4. Kling 3.0 ile videoya çevir
5. Videoyu indirip siteye ekle

Görselleri Fal.ai üzerinden Nano Banana ile oluştur, dokümantasyonu bu bağlantıda. Videoları Kling 3.0 ile oluştur. Videoyu oluşturmak için önce Nano Banana ile görsel oluşturmak zorundasın. Fal.ai API anahtarını bir environment dosyasına koy.

Videoyu hero arka planına koy, yazıyla çakıştırma

Üretilen video sitenin hero alanının arka planı olur. Başlığı ortalatmak daha temiz görünür.

Kaydırmaya bağlı video da yaptırabilirsin. Sayfa aşağı indikçe video kare kare ilerler, Apple'ın sitesindeki gibi.

Örnekte ilk sonuçta yazılar videonun rengi yüzünden okunmadı. Videoyu arkaya alıp maskeleme istedik.

• Görseli Kling'e ver, kamera çok yavaş sağdan sola gitsin.
• Video yazıyla çakışmasın, ayarı Claude Code'a bırak.

Oluşturacağın video dosyasını alıp hero header'ın arka planı yap. Hero header'ı ortalayarak daha temiz görünmesini sağla. Animasyonun arka planı sitenin genel arka planıyla çakışmasın diye doğru bir maskeleme uygula. Ayrıca ben sayfayı aşağı kaydırdıkça video aşama aşama ilerlesin; videoyu farklı kareler gibi düşün. Video yazıyla çakışmasın, bunu kendin ayarla.

GitHub'a yükle, Vercel'den canlıya al

Claude Code ile çalışırken her zaman GitHub kullan. Yeni bir repo aç ve Claude Code'a "projeyi buraya yükle, sonra Vercel'e pushla" de.

Vercel'de proje ekle, GitHub reposunun https bağlantısını yapıştır. Bunu bir kere yapman yeterli.

Sonra Claude Code'da bir şey değiştirip "tekrar deploy et" dersin. Vercel son sürümü GitHub'dan otomatik çeker.

• Custom domain bölümünden kendi alan adını ekle.
• Analitik ekranında kaç kişinin girdiğini görürsün.
• Trafik çok artarsa Vercel pahalılaşabilir. Netlify de bir seçenek.

1. GitHub'da yeni repo aç
2. Claude Code'a projeyi yüklet
3. Vercel'de projeyi ekle
4. Custom domain bağla
5. Değişiklikte tekrar deploy ettir

Projeyi bu GitHub reposuna yükle. Sonra Vercel'e pushla.

Adım adım

1. Antigravity'de yeni bir klasör aç ve Claude Code uzantısını başlat.
2. Tasarım reposunu yükletip sitenin konusunu belirten ilk promptu bypass modunda çalıştır.
3. ChatGPT ya da Claude Code'dan Nano Banana ve Kling promptlarını al.
4. Fal.ai API anahtarını ver, modelleri adıyla yaz ve anahtarı environment dosyasına koydur.
5. Videoyu hero arka planına koydur, kaydırmaya bağla ve yazıyla çakışmayı düzelttir.
6. Projeyi GitHub'a yükletip Vercel'e bağla.
7. Vercel'de kendi alan adını ekleyip siteyi canlıya al.

Örnek: Otomasyon ajansı sitesinden iç tasarım sitesine

1. Repo ile otomasyon ajansı için ilk siteyi kurdurduk.
2. Fal.ai ile üç görsel ve Kling videoları üretildi, Flux Dev sonucu beğenilmedi.
3. Nano Banana ve Kling 3.0 belirtilip içerik yeniden üretildi.
4. Kaydırmalı videoda yazılar okunmayınca konsepti iç tasarım şirketine çevirdik.
5. Nano Banana görseli Kling'de yavaş sağdan sola kamera ile videoya döndü.
6. Proje GitHub'a yüklendi, Vercel'den canlıya alındı.

Sık yapılan hatalar

Kontrol listesi

• İlk promptta sitenin konusu yazıyor mu?
• Fal.ai API anahtarı environment dosyasında mı?
• Görsel Nano Banana, video Kling 3.0 ile mi üretildi?
• Hero yazıları videonun üstünde okunuyor mu?
• Proje GitHub reposunda ve Vercel'e bağlı mı?
• Kendi alan adın custom domain olarak eklendi mi?

Bugün şunu yap

1. Antigravity'de bir klasör aç ve Claude Code'u başlat.
2. Fal.ai'de bir API anahtarı oluştur.
3. Sohbet asistanından bir Nano Banana ve bir Kling promptu iste.
4. Hero alanına video koyan ilk denemeyi yaptır.
5. GitHub'da boş bir repo aç ve Vercel hesabına bağla.

Sıkça Sorulan Sorular

Nasıl hazırlandı: Bu yazıyı Burhan Kocabıyık'ın videosundan yapay zeka yardımıyla çıkardık. Her somut bilgiyi videoyla karşılaştırıp denetledik.