Claude Code + Nano Banana 2 ile 6 Adımda Tam Markalı Website (Sıfır Kod)

Altı adım, sıfır kod, bir terminal. Firecrawl markayı çeker, Nano Banana 2 görselleri üretir, Claude Code tüm siteyi birleştirir, Vercel canlıya alır. Ajansların 5k-25k$ aldığı tam yığın — laptop'unda çalışıyor.

Problem

İnsanların büyük çoğunluğu hâlâ ajanslara 5k-25k$ ödüyor — altı haftada teslim edilen, internetteki diğer her şablon gibi görünen siteler için.

Builder'lar yavaş değil çünkü iş zor. Yavaşlar çünkü workflow bozuk — marka keşfi bir araçta, tasarım başkasında, geliştirme üçüncüde, deploy dördüncüde. Her el değiştirmede bir şey kayboluyor.

Çözüm başka bir website builder değil. Tüm pipeline'ı — marka çıkarımı, görsel üretimi, layout, kod, deploy — tek terminale toplamak, doğru araçları birbirine bağlamak.

İşte o workflow. Altı adım. Production-ready. Elle tek satır kod yok.

Bir Bakışta Yığın

Marka

Firecrawl

Logoları, renkleri, fontları ve kopyayı herhangi bir canlı siteden otomatik çeker.

Görseller

Nano Banana 2

Hero görselleri, parçalarına ayrılmış varyantlar ve kısa geçiş videoları üretir.

Kur + Yayınla

Claude Code → GitHub → Vercel

Layout, mobil, kod, deploy — tek terminal, tek push.

Adım 1 — Kaynak Site Üzerinde Firecrawl Çalıştır

Ne yapar: Müşterinin mevcut sitesini (veya herhangi bir referans markayı) tarar ve tüm logoları, hex renk kodlarını, font ailelerini ve önemli kopya parçalarını yapılandırılmış JSON'a çıkarır — Claude Code'a doğrudan verebileceğin formatta.

Neden önemli: Bir tasarımcının normalde 2-3 saatini alan, DevTools'ta gezinmek ve Figma ekran görüntüsü almakla geçen iş. Firecrawl bunu 30 saniyede yapar ve çıktı makine tarafından okunabilir — workflow'un geri kalanı için tek önemli olan da bu.

Kurulum:

npm install -g @mendable/firecrawl-cli
export FIRECRAWL_API_KEY=fc-your-key-here

Çalıştır:

firecrawl scrape https://clientsite.com \
  --formats markdown,html,extract \
  --extract-prompt "Extract all brand assets: logo URLs, hex colors, font families, headline copy, value props" \
  --output brand.json

Ne alacaksın: Temiz bir brand.json — logo SVG/PNG URL'leri, primary/secondary/accent hex kodları, kullanılan Google Fonts ve ana sayfadaki gerçek kopya. Bu dosya, sitenin geri kalanı için tek kaynak (source of truth).

firecrawl.dev

Adım 2 — Claude Code'da Asset Map Prompt'unu Çalıştır

Ne yapar: Adım 1'den gelen brand.json'u alır ve Claude Code'a sitenin ihtiyaç duyduğu her görseli planlatır — hero, feature illüstrasyonları, social card'lar, favicon'lar, OG görselleri — daha tek bir tanesini üretmeden önce.

Neden önemli: İnsanlar image-gen kredilerinin %80'ini, gerçekten gerekmeyen şeyleri tekrar tekrar üreterek yakar. Önce asset listesini haritalamak, her Nano Banana 2 çağrısının net bir brief'i olmasını sağlar.

Claude Code'a yapıştırılacak prompt:

Read brand.json. Based on the brand identity, output a complete
asset map for a 5-section landing page (hero, features, social
proof, pricing, CTA). For each asset specify:

- Filename and dimensions
- Subject and composition
- Color palette to enforce
- Mood / lighting / style
- Whether it needs an exploded variant for animation

Format the output as a single markdown table I can hand to
Nano Banana 2.

Ne alacaksın: Nano Banana 2'ye doğrudan yedirebileceğin promptlarla 8-12 asset'lik bir tablo. Hero, destekleyici görseller, OG image, favicon — hepsi Firecrawl'un çektiği marka renklerine ve tonuna göre spec'lenmiş.

Adım 3 — Nano Banana 2'de Hero + Parçalanmış Varyant + Geçiş Videosu Üret

Ne yapar: Nano Banana 2, Google'ın en yeni görsel modeli — native 4K çıktı, güçlü metin render'ı ve birden fazla varyasyonda tutarlı karakter/obje üretimi. Önce hero'yu üretirsin, sonra "parçalanmış" varyantı (aynı kompozisyon, parçalar havada ayrılmış), sonra ikisi arasında geçiş videosu.

Neden önemli: Statik bir hero idare eder. Ama kullanıcı kaydırırken parçalarına ayrılarak akıcı şekilde geçiş yapan bir hero — sitenin "üretilmiş" değil "kurulmuş" hissi vermesini sağlayan detay.

Çalıştırılacak üç üretim:

Pro tip: İkinci pass'te Nano Banana 2'nin reference image özelliğini kullan — hero.png'yi referans olarak ver ki parçalanmış versiyon aynı dünyada kalsın. Bu olmadan ikinci pass kayar, morph iki farklı sahnenin birbirine dikilmiş hali gibi durur.

nanobanana.ai

Adım 4 — Videoyu Claude Code'a Bırak ve Website Builder Workflow'unu Çalıştır

Ne yapar: Claude Code'a brand JSON'unu, asset map'i, üretilmiş görselleri ve geçiş videosunu verir; tam bir Next.js + Tailwind site iskeleti kurmasını ister — videonun gömülü olduğu hero, mobile-first responsive, erişilebilirlik kontrolleri, hepsi.

Neden önemli: "AI website builder"ların %99'unun çuvalladığı yer burası. Section'ları tek tek üretirler, aralarda design system kayar, alakasız component'lerden oluşan bir portfolyo gibi görünen şey teslim ederler. Tek Claude Code workflow'u olarak çalıştırmak sistemi tutarlı tutar.

Workflow prompt:

Build a Next.js 14 + Tailwind landing page from these inputs:
- brand.json (palette, fonts, copy)
- assets/ (all generated images)
- hero-transition.mp4 (autoplay, muted, loop, plays inline)

Requirements:
- 5 sections: hero, features (3-up), social proof,
  pricing (3 tiers), CTA
- Mobile-first responsive (test at 375px, 768px, 1440px)
- Lighthouse 95+ on performance and accessibility
- Framer Motion for scroll-triggered animations
- Dark mode toggle in nav
- Type-safe throughout

Write tests for the page renders and the dark mode toggle.
Use the frontend-design plugin if installed.

Ne alacaksın: Tam bir /app dizini, component'ler düzgün ayrılmış, Tailwind config marka paletine bağlı, geçiş videosu hero'ya doğru autoplay attribute'larıyla gömülmüş. Claude Code testleri çalıştırır, fail edenleri düzeltir ve preview için hazır olduğunu söyler.

Adım 5 — Müşterinin Mevcut HTML'ini Referans Pass Olarak Yapıştır

Ne yapar: Müşterinin mevcut websitesinin HTML'ini (veya bir adım öne geçmek istediğin rakibi) alır ve Claude Code'a yapıyı eşleştirmesini ama yeni design system'le daha yüksek kalitede tekrar kurmasını söyler.

Neden önemli: Müşteriler farklı bir site istemez. Kendi sitelerini ister — ama daha iyisini. Mevcut HTML'i yapıştırmak section sırasını, kopya hiyerarşisini ve feature parity'yi korur — ama her component yeni yığında, yeni görsellerle tekrar inşa edilir.

Prompt:

Here is the client's current site HTML: [paste full HTML].

Keep the same section structure and information hierarchy.
Rebuild every component using:
- The new brand.json palette and fonts
- The new assets from Step 3
- Production patterns from the frontend-design plugin
- Better copy where the original is weak (flag what you changed)

Do not invent new sections. Do not drop existing ones. Match
feature parity, raise the quality bar.

Ne alacaksın: Aynı site, on kat daha iyi. Aynı call-to-action konumu, aynı pricing yapısı, aynı feature sırası — ama tipografi nefes alıyor, görseller özel, motion bilinçli ve mobil gerçekten çalışıyor.

Adım 6 — GitHub + Vercel'i Bağla ve Canlıya Push'la

Ne yapar: Yerel projeyi yeni bir GitHub repo'suna ve Vercel projesine bağlar — böylece her git push production deploy'unu tetikler, her branch'te preview URL'i olur.

Neden önemli: Gerçek URL. Gerçek SSL. Gerçek CDN. Merge etmeden önce müşteriye gönderebileceğin gerçek preview link'leri. Bu, "laptop'undaki bir klasör"ü "müşterinin bugün yatırımcılarına gösterebileceği bir website"e çeviren adım.

Sırayla çalıştır:

# 1. Initialize and push to GitHub
gh repo create client-site --private --source=. --remote=origin --push

# 2. Link to Vercel and deploy
npm install -g vercel
vercel link
vercel --prod

Pro hamle: Müşterinin mevcut URL yapısından redirect'lerle bir vercel.json ekle — DNS'i geçtiğin an eski marketing link'leri 404 vermesin. Claude Code orijinal HTML'den bunu tek prompt'ta üretebilir.

vercel.com

Tam Workflow Uçtan Uca

Çıkar

Firecrawl → brand.json

Logolar, renkler, fontlar, kopya — 30 saniyede çekildi.

Üret

Claude Code → Nano Banana 2

Önce asset map, sonra hero, parçalanmış varyant, geçiş videosu.

Kur + Yayınla

Claude Code → GitHub → Vercel

Next.js site, mobile-ready, tek push ile deploy edilmiş.

Önerilen Kullanım Sırası

Yeni bir müşteri sitesi için:

1. Müşterinin mevcut sitesinde (veya site yoksa marka rehberi sayfasında) Firecrawl çalıştır
2. Claude Code'da brand.json'a karşı asset map prompt'unu çalıştır
3. Nano Banana 2'de hero, parçalanmış varyant ve geçiş videosunu üret
4. Claude Code'da website builder workflow prompt'unu çalıştır
5. Yapısal referans pass için müşterinin mevcut HTML'ini yapıştır
6. gh repo create + vercel --prod ile yayına al

Kişisel site / portfolyo için:

1. Firecrawl'u atla — brand.json'u kendin elle yaz (10 dakika, 3 renk + 2 font seç)
2. Doğrudan asset map adımına geç
3. Görselleri Nano Banana 2'de üret
4. Builder workflow'u çalıştır — ama Claude Code'a 5 section yerine tek sayfa layout kullanmasını söyle
5. Adım 5'i atla (eşleştirilecek mevcut HTML yok)
6. GitHub + Vercel'e push'la

Sadece bir adıma vaktin varsa:

Adım 4 en yüksek kaldıraçlı olanı. Markan zaten varsa, görseller zaten varsa, kopya zaten varsa — frontend-design plugin'i açıkken Claude Code'da website builder workflow'unu çalıştırmak tek başına sonucun %80'ini verir. Tam pipeline istediğinde diğer adımları ekle.

Her Aracın Maliyeti

Production-ready site başına toplam maliyet: 5$ altında. Tüm prompt'lar hazırken uçtan uca süre: 90 dakika altında.

Son bir şey. Bu workflow zevki yerine koymaz — sadece işin zaten yaratıcılıkla ilgisi olmayan kısımlarını kaldırır. Marka çıkarımı, asset spec'leme, boilerplate kod, deploy config — hiçbiri yaratıcı iş değildi. Geriye gerçek kararlar kalıyor: hangi renk önde, hangi section çıkacak, hangi kopya tutuyor. Zamanını orada harca. Geri kalanını yığına bırak.

İyi bir şey kur.