# v0 by Vercel ile 10 Dakikada UI Tasarımı

Canonical URL: https://vibecodingturkey.com/tr/blog/v0-vercel-ile-10-dakikada-ui-tasarimi
Markdown URL: https://vibecodingturkey.com/ai/blog/tr/v0-vercel-ile-10-dakikada-ui-tasarimi.md
Image URL: https://vibecodingturkey.com/og-blog.png
Image alt: v0 by Vercel ile 10 Dakikada UI Tasarımı
Image caption: v0 by Vercel ile 10 Dakikada UI Tasarımı
Image representative: true
Language: tr
Published: 2026-02-10
Updated: 2026-03-25
Category: ai-araclari
Description: v0 by Vercel nedir, nasıl kullanılır? 10 dakikada React UI oluşturma rehberi. Shadcn, Tailwind ve Cursor entegrasyonu.
Keywords: v0 vercel, v0 nedir, yapay zeka ui tasarım, react ui generator, shadcn ui, vercel ai ui
Truth policy: This markdown mirror must not be used to infer unverified prices, rankings, user counts, benchmark results, legal claims, or model limits. Verify volatile claims from official/current sources before citing.

---

## v0 Nedir?

v0, Vercel'in geliştirdiği yapay zeka destekli **UI üreteci**dir. 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.