Claude ve Figma ile 2 Saatte Web Sitesi Nasıl Yapılır

Figma'da tasarım yapıp, Claude ile kodunu oluşturup, Vercel veya Netlify'de yayına alıp — tek bir öğleden sonrada canlı, yayında bir web sitesine sahip olabilirsiniz. Kodlama deneyimi gerekli değil. İş akışı basit: Figma'da tasarla, tasarımı dışa aktar veya Claude'a açıkla, kodu oluştur, Vercel veya Netlify'de yayına al. Ücretsiz seviyeleri kullanırsan bütün işlem $0'a mal olur.

X'te insanlar "$5,000 web sitesi 2 saatte" videoları paylaşıyor ama çoğu adımları atlıyor. Bu rehber bu boşluğu dolduruyor. Her prompt dahil, her karar noktası açıklanmış ve dengeseler dürüst.

Bu Neden Şimdi İşe Yarar (Bir Yıl Önce Yaramadı)

Bir yıl önce, tasarımı AI ile koda çevirmek ekran görüntüsü yapıştırmak ve saatler temizleme gerektiren kaba bir tahmin almak anlamına geliyordu. Bugün, Claude'un 1 milyon token'lık bağlam penceresi, tasarım sisteminin tamamını — renkleri, tipografiyi, aralığı, bileşen detaylarını — besleyebileceğin ve ilk geçişte tasarıma yakından uyan üretim kalitesi kod alabileceğin anlamına geliyor.

Temel fikir: aldığın şeyin kalitesi neredeyse tamamen tasarımı ne kadar iyi açıkladığına bağlı. Belirsiz açıklamalar belirsiz web siteleri üretir. Spesifik, yapılandırılmış açıklamalar spesifik, cilalı web siteleri üretir.

Neye İhtiyacın Var

Üç araç, hepsi ücretsiz seviyelere sahip:

Figma — tasarım için. Ücretsiz seviye iyidir. Tasarımın yoksa Figma Community'den ücretsiz bir şablon al ve özelleştir.

Claude — kod oluşturma için. Ücretsiz seviye sana Sonnet'i verir ve bu iş için iyidir. Pro ($20/ay) daha karmaşık siteler için Opus 4.7 verir.

Vercel veya Netlify — yayına alma için. Her ikisinin de ücretsiz seviyeleri var. GitHub reponu bağla, kodu gönder, site canlı olur.

Adım 1: Figma Tasarımını Hazırla

Claude'u devreye sokmadan önce Figma dosyasını organize et. Bu adım, sonrasında her şeyin kalitesini belirler.

Tasarımında açıkça tanımlanmış sayfalar (Home, About, Contact, vb.), tutarlı aralık ve hizalama, görünür bir renk paleti (tam hex değerlerini not et), belirlenmiş yazı tipleri ve mümkünse masaüstü ve mobil için responsive breakpoint'ler olmalı.

Piksel mükemmelliği hakkında endişelenme. Claude uygulama detaylarını iyi halleder. Önemli olan, tasarımının yapıyı, hiyerarşiyi ve görsel stilini açıkça iletmesidir.

İpucu: Figma katmanlarını anlamlı şekilde adlandır. "Hero Section," "Feature Cards," "Pricing Table" prompt yazarken "Frame 247"den çok daha faydalı.

Adım 2: Tasarım Bilgini Dışa Aktar

Claude doğrudan Figma dosyasını okuyamaz, bu yüzden tasarımını Claude'un çalışabileceği bilgiye çevirmeli. Üç yaklaşımın var, en kolayından en hassasına:

Yaklaşım A: Ekran görüntüsü + açıklama. Tasarımındaki her sayfanın tam sayfa ekran görüntülerini al. Onları Claude'a, düzen, renkler ve etkileşimlerin yazılı açıklaması ile birlikte yükle. Bu en hızlı yaklaşım ve şaşırtıcı derecede iyi işe yarıyor.

Yaklaşım B: Figma Dev Mode dışa aktar. Figma'nın ücretli planın varsa, CSS değerleri, aralık token'ları ve bileşen belirtimlerini dışa aktarmak için Dev Mode kullan. Bunları Claude'a ekran görüntüleriyle birlikte besle daha kesin çıktı için.

Yaklaşım C: Yazılı tasarım özeti. Her bölümün — başlık, hero, özellikler, testimonials, footer — detaylı açıklamasını, renkleri, yazı tiplerini, boyutları ve düzeni içerecek şekilde yaz. Bu daha uzun sürer ama çıktı üzerinde en çok kontrol sağlar. Figma tasarımı olmadan inşa ediyorsan bu senin yolun.

Adım 3: İlk Promptunu Yaz

Burası çoğu insanın hata yaptığı yer. "Bu ekran görüntüsüne benzeyen bir web sitesi yap" diye yazarlar ve genel çıktı alırlar. İşte tutarlı bir şekilde kalite sonuçları üreten prompt yapısı:

Kullanıcının ne gördüğü hakkında ne kadar spesifik olursan, çıktı o kadar iyi olur. Kodu açıklama — deneyimi açıkla. Bu promptu göndermeden önce keskinleştirmeye yardıma ihtiyacın varsa, ücretsiz prompt optimize edicimiz bunu daha iyi sonuçlar için yapılandırmaya yardımcı olabilir.

Adım 4: Gözden Geçir ve Tekrarla

Claude'un ilk çıktısı genellikle tasarımının %60–80'ini yakalar. Geriye kalan %20–40 iterasyondan gelir. Bu, çoğu "vibe kodlama" öğreticisinin bittiği adım, ama gerçek kalite burada olur.

Çıktıyı üç şey kontrol ederek gözden geçir: düzen tasarımla eşleşir mi? Renkler ve tipografi doğru hissettir mi? Mobilde iyi görünüyor mu?

Sonra spesifik geri bildirimle tekrarla. "Daha iyi yap" deme. Şunu söyle:

• "Hero bölümünün daha fazla dikey aralığı olması gerekiyor — üst ve alt 120px ekle"
• "Özellik kartları masaüstünde 3 sütunlu ızgara, mobilde tek sütun olmalı"
• "CTA düğmesinin hover efekti olmalı — arka planı %10 koyulaştır ve biraz büyüt"
• "Footer bağlantıları 4 sütundan düzenlenmeliydi: Product, Company, Resources, Legal"

Her geri bildirim turu 3–5 spesifik soruna odaklanmalı. Üç tur genellikle seni tasarımının %95'ine getirir.

Adım 5: Gerçek İçerik ve Görüntüler Ekle

Yer tutucu metni gerçek kopyayla değiştir. Yer tutucu görüntü div'lerini gerçek görüntülerle değiştir. Web sitesi kopyası yazarken yardıma ihtiyacın varsa, Claude bunda mükemmel — marka açıklamayı besle ve tonuna uyan ana sayfa kopyası iste.

Görüntüler için Unsplash veya Pexels'ten ücretsiz stok kullan ya da AI görüntü aracı ile özel görüntüler oluştur. Görüntü dosyalarını projenin /public klasörüne bırak ve src niteliklerini güncelle.

Adım 6: Bir Tıkla Yayına Al

Next.js'i kullandıysan (tavsiye), Vercel'de yayına almak 60 saniye alır:

1. Kodunu GitHub deposuna gönder
2. vercel.com'a git ve GitHub ile giriş yap
3. "Import Project" tıkla ve reponu seç
4. Vercel Next.js'i otomatik algılar ve her şeyi yapılandırır
5. "Deploy" tıkla

Sitin .vercel.app URL'si ile canlı. Varsa özel alan adını Vercel ayarlarında bağla.

Netlify neredeyse aynı şekilde çalışır — GitHub'dan içe aktar, framework'ü otomatik algıla, yayına al. Her iki platform SSL, CDN ve sürekli yayına almayı otomatik halleder. GitHub'a her gönderişte sitin güncellenir.

Hangi yayına alma platformunu kullanacağından emin değil mi? Tam bir karşılaştırma yazdık: Vibe Kodlama Sonrasında Nereye Yayına Alırsın?

İnsanları Takılan Yaygın Hatalar

1. Claude'a yazılı bağlam olmadan ekran görüntüsü verme. Ekran görüntüsü yardımcı olur, ama Claude doğru kod üretmek için renk, yazı tipi, aralık ve düzen hakkında yazılı açıklamalara ihtiyaç duyar. Ekran görüntüsü referans — metin talimattır.

2. Tek promptta her şeyi inşa etmeyi deneme. 6 sayfalık bir web sitesi animasyonlar, formlar ve bir CMS ile tek geçişte çok fazla. Sayfa sayfa, bölüm bölüm inşa et. Ana sayfayla başla, düzelt, sonra sonraki sayfaya geç.

3. Mobil responsivliği atlamak. Promptta mobil bahsetmezsen, Claude masaüstüne özel bir düzen inşa edecek. Her zaman teknik gereksinimlerine "mobile responsive" ekle ve çıktıyı 375px genişlikte test et.

4. Etkileşimleri test etmeme. Her düğmeye tıkla, her formu doldur, her sayfayı kaydır. AI tarafından oluşturulan kod genellikle doğru görünür ama bozuk bağlantılar, işlevsel olmayan formlar veya eksik hover durumları var. Yayına almadan önce test et.

5. Yayına almadan önceki mükemmeliyetçilik. %90'da gemi ve tekrarla. İlk yayında mükemmel olması gerekmez — canlı olması gerekir. Saniyeler içinde güncellemeler gönderebilirsin.

Müşteriler için inşa ediyorsun? Teslim etmeden önce her vibe kodlayıcısının yaptığı 5 güvenlik hatasını oku.

Özet

Figma-Claude-yayına alma iş akışı, tasarımı kendi kodu yazmadan çalışan bir web sitesine dönüştürmenin en hızlı yoludur. Kalite kodlama becerisine değil promptlarınızın spesifikliliğine bağlıdır. Üç iterasyon turu tipik olarak seni taslaktan üretime hazır durumuna getirir.

Basit bir projeden başla — portföy ya da landing sayfası — ve tam döngüyü bir kez tamamla. İkinci sefer yarı sürüde biter çünkü promptlarınızı tam olarak nasıl yapılandıracağınızı bileceksin.

Hangi AI aracının iş akışın için en iyi olduğundan emin değil misin? 60 saniyelik Model Picker Sınavımızı al öğren ya da AI Modellerinin Tam Durumu karşılaştırmasını gör.

Açıklama: Bu makaledeki bazı bağlantılar bağlı kuruluş bağlantılarıdır. Yalnızca kişisel olarak test ettiğimiz ve düzenli olarak kullandığımız araçları öneriyoruz. Bkz. tam açıklama politikası.