v0 by Vercel ile 10 Dakikada UI Tasarımı | Rehber 2025
v0 by Vercel ile 10 dakikada profesyonel React UI nasıl oluşturulur? Adım adım rehber, prompt teknikleri ve Cursor entegrasyonu.
v0 Nedir?
v0, Vercel'in geliştirdiği yapay zeka destekli UI üretecidir. Doğal dil ile açıkladığınız arayüz bileşenlerini saniyeler içinde React + Tailwind CSS kodu olarak üretir.
2024'te beta'dan çıkan v0, artık ücretsiz (sınırlı) kullanılabiliyor. Özellikle Shadcn/UI bileşenlerini mükemmel üretiyor.
Neden v0 Kullanmalısınız?
- Hızlı prototipleme: 10 dakikada professional görünümlü UI
- Shadcn entegrasyonu: Hazır bileşen kütüphanesiyle uyumlu
- Düzenlenebilir kod: Üretilen kodu direkt kopyalayın, Cursor'da düzenleyin
- Responsive tasarım: Mobil uyumlu kod otomatik üretilir
Adım Adım: 10 Dakikada Dashboard UI
Adım 1: v0.dev'e Gidin (1 dk)
v0.dev adresini açın ve GitHub ile giriş yapın.
Adım 2: Promptunuzu Yazın (2 dk)
Şu gibi bir prompt deneyin:
> "Türkçe bir SaaS dashboard'u oluştur. Sol sidebar'da menü, üstte navbar, ana alanda KPI kartları (kullanıcı sayısı, gelir, aktif abonelik), altında son işlemler tablosu. Dark mode. Shadcn/UI kullan."
Adım 3: Sonucu İnceleyin (3 dk)
v0 birkaç varyasyon üretir. Beğendiğinizi seçin. Önizlemeyi inceleyin.
Adım 4: Revizyon Yapın (2 dk)
Beğenmediğiniz kısımları belirtin:
> "KPI kartlarını daha büyük yap, renkli ikon ekle. Tabloyu zebra striped yap."
Adım 5: Kodu Kopyalayın (2 dk)
"Copy Code" butonuna tıklayın veya npm komutuyla projenize ekleyin:
```bash
npx shadcn@latest add "v0.dev/chat/XXXXX"
```
Etkili Prompt Teknikleri
Kötü Prompt:
> "Güzel bir dashboard yap"
İyi Prompt:
> "E-ticaret yönetim paneli: Günlük sipariş sayısı, toplam gelir ve iade oranı gösteren 3 KPI kartı. Her kartta trend ok ikonu. Altında son 5 siparişin tablosu: sipariş no, müşteri adı, tutar, durum (badge ile). Tailwind dark mode. Türkçe metin."
v0 ile Ne Yapılabilir?
- Landing page bölümleri (hero, özellikler, fiyatlandırma)
- Form bileşenleri (kayıt, giriş, ödeme)
- Tablo ve liste görünümleri
- Modal ve drawer bileşenleri
- Navigasyon menüleri
- Grafik ve istatistik kartları
Fiyatlandırma
| Plan | Fiyat | Kredi/Ay |
|------|-------|---------|
| Free | $0 | 200 |
| Premium | $20/ay | 5000 |
| Team | $50/ay | 15000 |
Cursor + v0 Kombinasyonu
En güçlü workflow:
1. v0 ile UI iskeletini oluşturun
2. Kodu Cursor'a yapıştırın
3. Cursor ile backend bağlantısını ekleyin
4. State yönetimi ve veri çekme işlemlerini Cursor ile tamamlayın
Bu kombinasyon ile 1 günde tam çalışır bir web uygulaması çıkarabilirsiniz.
Sonuç
v0, UI geliştirme sürecini dramatik biçimde hızlandırıyor. Artık tasarımcıya bağımlı olmadan, profesyonel kalitede arayüzler üretebilirsiniz. Vibe coding stack'inizin vazgeçilmez parçası olacak.