15.02.2026
Mobil Uygulama Ekranı Tasarımı v0 İle Hızlıca Oluşturma
Mobil uygulama geliştirme sürecinde arayüz tasarımı, kullanıcı deneyiminin temel taşıdır. Bu prompt, v0 (Vercel) platformunu kullanarak profesyonel mobil uygulama ekranlarını dakikalar içinde oluşturmanızı sağlar.
Kullanım Alanları:
- E-ticaret uygulamaları için ürün listeleme ve detay sayfaları tasarlama
- Sosyal medya uygulamaları için profil, feed ve mesajlaşma ekranları oluşturma
- Fintech uygulamaları için dashboard, işlem geçmişi ve ödeme ekranları tasarlama
- Sağlık uygulamaları için randevu, hasta kayıt ve raporlama arayüzleri geliştirme
- Eğitim platformları için ders listesi, video oynatıcı ve sınav ekranları hazırlama
Prompt, v0'ın React/Next.js ve Tailwind CSS yapısına uygun, responsive ve erişilebilir kod üretir. Üretilen bileşenler doğrudan projenize entegre edilebilir ve özelleştirilebilir.
{ }Değişken Açıklamaları:
- [UYGULAMA TÜRÜ]: Uygulamanın kategorisini tanımlar ve v0 promptunda ekranın hangi app için tasarlandığını belirtir. Örnek: E-ticaret, Sosyal medya, Fitness takipçisi, Haber okuyucu.
- [EKRAN ADI]: Tasarlanacak mobil ekranın adını verir ve v0 promptunun başlığında yer alır. Örnek: Ürün Detay Sayfası, Kullanıcı Profili, Alışveriş Sepeti, Ana Sayfa.
- [RENK PALETİ]: Uygulamanın renk şemasını listeler ve v0 promptunda Color Palette olarak eklenir. Örnek: Mavi-Beyaz-Gri, Yeşil-Siyah-Beyaz, Mor-Pembe-Turuncu, Kırmızı-Siyah-Beyaz.
- [TASARIM STİLİ]: Ekranın görsel stilini belirtir ve v0 promptunda Design Style olarak kullanılır. Örnek: Modern minimalist, Glassmorphism, Neumorphism, Retro futuristik.
- [ÖZELLİKLER]: Ekranın tüm zorunlu özelliklerini listeleyen metni içerir ve özellikler [ÖZELLİK 1-3]e ayrılır. Örnek: Ürün galerisi, fiyat etiketi, sepete ekle butonu, yorumlar; Profil fotoğrafı, takipçi sayısı, düzenle butonu; Arama çubuğu, filtreler, sonuç listesi.
- [ÖZELLİK 1]: Özellikler listesindeki ilk maddeyi temsil eder ve v0 promptunda Features bullet point olarak eklenir. Örnek: Swipeable ürün görsel galerisi, İndirimli fiyat gösterimi, Beden seçici çipler.
- [ÖZELLİK 2]: Özellikler listesindeki ikinci maddeyi temsil eder ve v0 promptunda Features bullet point olarak eklenir. Örnek: Kullanıcı yorumları bölümü, İlgili ürünler karuseli, Paylaş butonu.
- [ÖZELLİK 3]: Özellikler listesindeki üçüncü maddeyi temsil eder ve v0 promptunda Features bullet point olarak eklenir. Örnek: Takipçi sayacı, Bio metni, Düzenle ikonu, Rating yıldızları.
- [NAVİGATİON TÜRÜ]: Navigasyon yapısını tanımlar ve Layout Requirements altında '[NAVİGATİON TÜRÜ] navigation' şeklinde yer alır. Örnek: Bottom tab bar, Top navigation bar, Drawer menu, Sticky CTA bar.
- [HEADER ELEMANLARI]: Header bölümünün içerdiği elemanları listeler ve Components 1. altında 'Header with [HEADER ELEMANLARI]' olarak kullanılır. Örnek: Geri butonu, paylaş ikon, wishlist butonu, Arama çubuğu, Profil ikonu.
- [İÇERİK TÜRÜ]: Ana içerik alanının türünü belirtir ve Components 2. altında 'Main content area with [İÇERİK TÜRÜ]' olarak eklenir. Örnek: Kart tabanlı liste, Swipeable galerisi, Accordion açıklamalar, Grid ürün listesi.
- [CTA BUTON AÇIKLAMASI]: Çağrı-yönlendirme butonunun detayını verir ve Components 3. altında doğrudan yer alır. Örnek: Sepete ekle butonu, Satın al CTA'sı, Kaydol butonu, Devam et action.
- [FOOTER/BOTTOM BAR AÇIKLAMASI]: Alt kısım veya bottom bar içeriğini tanımlar ve Components 4. altında doğrudan kullanılır. Örnek: Yorumlar bölümü, İlgili ürünler, Bottom tab navigasyon, Sosyal paylaşım linkleri.
Gemini
Değişkenleri Düzenle
Sen mobil uygulama arayüzü tasarımında uzman bir UI/UX tasarımcısısın. Aşağıdaki parametrelere göre v0 (Vercel) platformu için optimize edilmiş, modern ve kullanıcı dostu bir mobil uygulama ekranı tasarla.
# UYGULAMA BİLGİLERİ
Uygulama Türü: [UYGULAMA TÜRÜ]
Tasarlanacak Ekran: [EKRAN ADI]
Renk Paleti: [RENK PALETİ]
Tasarım Stili: [TASARIM STİLİ]
# EKRAN ÖZELLİKLERİ
Ekranın içermesi gereken özellikler:
[ÖZELLİKLER]
# TASARIM GEREKSİNİMLERİ
1. LAYOUT YAPISI
- Mobil-first yaklaşım kullan (375px-414px arası optimizasyon)
- Safe area (güvenli alan) kenar boşluklarını dikkate al
- Scroll davranışını belirle (infinite scroll, pagination vb.)
- Navigation bar veya bottom tab bar konumlandır
2. BİLEŞEN HİYERARŞİSİ
- Header bölümü (başlık, geri butonu, menü ikonu)
- Ana içerik alanı (kartlar, listeler, formlar)
- Call-to-action (CTA) butonları
- Footer veya bottom navigation
3. GÖRSEL ÖĞELER
- İkonlar için Lucide React veya Heroicons kullan
- Görseller için placeholder veya örnek URL'ler ekle
- Tipografi hiyerarşisi belirle (başlık, alt başlık, gövde metni)
- Boşlukları (spacing) tutarlı kullan (4px, 8px, 16px, 24px, 32px)
4. İNTERAKTİF ELEMANLAR
- Buton durumları (default, hover, active, disabled)
- Form input stilleri ve placeholder metinleri
- Loading state (yükleme durumu) göstergesi
- Error state (hata durumu) mesajları
- Empty state (boş durum) için placeholder tasarımı
5. ERİŞİLEBİLİRLİK
- Dokunma hedefleri minimum 44x44px olsun
- Kontrast oranı WCAG AA standardına uygun olsun
- Ekran okuyucu uyumlu aria etiketleri ekle
- Keyboard navigation destekle
6. RESPONSIVE DAVRANIŞLAR
- Dikey ve yatay yönlendirme (portrait/landscape) desteği
- Farklı ekran boyutları için breakpoint'ler
- Dinamik font ölçeklendirme
7. ANIMASYONLAR VE GEÇİŞLER
- Sayfa geçişleri için smooth transition
- Mikro-animasyonlar (buton tıklama, kart açılma)
- Skeleton loader kullan (içerik yüklenirken)
# ÇIKTI FORMATI
v0 için prompt şu yapıda olmalı:
"Create a [EKRAN ADI] screen for a [UYGULAMA TÜRÜ] mobile app using React and Tailwind CSS.
Design Style: [TASARIM STİLİ]
Color Palette: [RENK PALETİ]
Features to include:
- [ÖZELLİK 1]
- [ÖZELLİK 2]
- [ÖZELLİK 3]
Layout Requirements:
- Mobile-first responsive design (375px-414px)
- Safe area padding
- [NAVİGATİON TÜRÜ] navigation
Components:
1. Header with [HEADER ELEMANLARI]
2. Main content area with [İÇERİK TÜRÜ]
3. [CTA BUTON AÇIKLAMASI]
4. [FOOTER/BOTTOM BAR AÇIKLAMASI]
Interactive Elements:
- Button states (hover, active, disabled)
- Form inputs with validation
- Loading states
- Error handling
Accessibility:
- Touch targets minimum 44x44px
- WCAG AA contrast compliance
- Screen reader support
Use shadcn/ui components where applicable. Include Lucide React icons. Make it modern, clean, and user-friendly."
# ÖNEMLİ NOTLAR
- v0, metin tabanlı prompt aldığında otomatik olarak React/Next.js kodu üretir
- Tailwind CSS sınıfları kullanarak stillendirme yapar
- shadcn/ui bileşen kütüphanesini destekler
- Responsive tasarım otomatik olarak uygulanır
- Kod doğrudan kopyalanıp projeye yapıştırılabilir
# ÖRNEK KULLANIM
Uygulama Türü: E-ticaret
Ekran Adı: Ürün Detay Sayfası
Renk Paleti: Mavi-Beyaz-Gri
Tasarım Stili: Modern, minimalist
Özellikler: Ürün görselleri galerisi, fiyat bilgisi, beden seçimi, sepete ekle butonu, ürün açıklaması, kullanıcı yorumları
Bu bilgilerle v0'a verilecek prompt:
"Create a Product Detail screen for an e-commerce mobile app using React and Tailwind CSS.
Design Style: Modern, minimalist
Color Palette: Blue, White, Gray
Features to include:
- Image gallery with swipeable product photos
- Price display with discount badge
- Size selector with available sizes
- Add to cart button (primary CTA)
- Product description accordion
- Customer reviews section with ratings
- Related products carousel
Layout Requirements:
- Mobile-first responsive design (375px-414px)
- Safe area padding (px-4, pt-safe)
- Bottom sticky CTA bar
Components:
1. Header with back button, share icon, and wishlist button
2. Image gallery with dot indicators
3. Product info card (title, price, rating)
4. Size selector chips
5. Sticky add to cart button
6. Expandable description and reviews
Interactive Elements:
- Image zoom on tap
- Size chip selection state
- Add to cart animation
- Review pagination
- Loading skeleton for images
Accessibility:
- Touch targets minimum 44x44px
- Color contrast WCAG AA compliant
- Alt text for images
- Semantic HTML structure
Use shadcn/ui Button, Card, and Badge components. Include Lucide React icons (ChevronLeft, Share2, Heart, ShoppingCart). Make it visually appealing with smooth transitions."
Bu prompt v0'a girildiğinde, kullanıma hazır, profesyonel bir ürün detay ekranı kodu üretilecektir.
Sen mobil uygulama arayüzü tasarımında uzman bir UI/UX tasarımcısısın. Aşağıdaki parametrelere göre v0 (Vercel) platformu için optimize edilmiş, modern ve kullanıcı dostu bir mobil uygulama ekranı tasarla.
# UYGULAMA BİLGİLERİ
Uygulama Türü: [UYGULAMA TÜRÜ]
Tasarlanacak Ekran: [EKRAN ADI]
Renk Paleti: [RENK PALETİ]
Tasarım Stili: [TASARIM STİLİ]
# EKRAN ÖZELLİKLERİ
Ekranın içermesi gereken özellikler:
[ÖZELLİKLER]
# TASARIM GEREKSİNİMLERİ
1. LAYOUT YAPISI
- Mobil-first yaklaşım kullan (375px-414px arası optimizasyon)
- Safe area (güvenli alan) kenar boşluklarını dikkate al
- Scroll davranışını belirle (infinite scroll, pagination vb.)
- Navigation bar veya bottom tab bar konumlandır
2. BİLEŞEN HİYERARŞİSİ
- Header bölümü (başlık, geri butonu, menü ikonu)
- Ana içerik alanı (kartlar, listeler, formlar)
- Call-to-action (CTA) butonları
- Footer veya bottom navigation
3. GÖRSEL ÖĞELER
- İkonlar için Lucide React veya Heroicons kullan
- Görseller için placeholder veya örnek URL'ler ekle
- Tipografi hiyerarşisi belirle (başlık, alt başlık, gövde metni)
- Boşlukları (spacing) tutarlı kullan (4px, 8px, 16px, 24px, 32px)
4. İNTERAKTİF ELEMANLAR
- Buton durumları (default, hover, active, disabled)
- Form input stilleri ve placeholder metinleri
- Loading state (yükleme durumu) göstergesi
- Error state (hata durumu) mesajları
- Empty state (boş durum) için placeholder tasarımı
5. ERİŞİLEBİLİRLİK
- Dokunma hedefleri minimum 44x44px olsun
- Kontrast oranı WCAG AA standardına uygun olsun
- Ekran okuyucu uyumlu aria etiketleri ekle
- Keyboard navigation destekle
6. RESPONSIVE DAVRANIŞLAR
- Dikey ve yatay yönlendirme (portrait/landscape) desteği
- Farklı ekran boyutları için breakpoint'ler
- Dinamik font ölçeklendirme
7. ANIMASYONLAR VE GEÇİŞLER
- Sayfa geçişleri için smooth transition
- Mikro-animasyonlar (buton tıklama, kart açılma)
- Skeleton loader kullan (içerik yüklenirken)
# ÇIKTI FORMATI
v0 için prompt şu yapıda olmalı:
"Create a [EKRAN ADI] screen for a [UYGULAMA TÜRÜ] mobile app using React and Tailwind CSS.
Design Style: [TASARIM STİLİ]
Color Palette: [RENK PALETİ]
Features to include:
- [ÖZELLİK 1]
- [ÖZELLİK 2]
- [ÖZELLİK 3]
Layout Requirements:
- Mobile-first responsive design (375px-414px)
- Safe area padding
- [NAVİGATİON TÜRÜ] navigation
Components:
1. Header with [HEADER ELEMANLARI]
2. Main content area with [İÇERİK TÜRÜ]
3. [CTA BUTON AÇIKLAMASI]
4. [FOOTER/BOTTOM BAR AÇIKLAMASI]
Interactive Elements:
- Button states (hover, active, disabled)
- Form inputs with validation
- Loading states
- Error handling
Accessibility:
- Touch targets minimum 44x44px
- WCAG AA contrast compliance
- Screen reader support
Use shadcn/ui components where applicable. Include Lucide React icons. Make it modern, clean, and user-friendly."
# ÖNEMLİ NOTLAR
- v0, metin tabanlı prompt aldığında otomatik olarak React/Next.js kodu üretir
- Tailwind CSS sınıfları kullanarak stillendirme yapar
- shadcn/ui bileşen kütüphanesini destekler
- Responsive tasarım otomatik olarak uygulanır
- Kod doğrudan kopyalanıp projeye yapıştırılabilir
# ÖRNEK KULLANIM
Uygulama Türü: E-ticaret
Ekran Adı: Ürün Detay Sayfası
Renk Paleti: Mavi-Beyaz-Gri
Tasarım Stili: Modern, minimalist
Özellikler: Ürün görselleri galerisi, fiyat bilgisi, beden seçimi, sepete ekle butonu, ürün açıklaması, kullanıcı yorumları
Bu bilgilerle v0'a verilecek prompt:
"Create a Product Detail screen for an e-commerce mobile app using React and Tailwind CSS.
Design Style: Modern, minimalist
Color Palette: Blue, White, Gray
Features to include:
- Image gallery with swipeable product photos
- Price display with discount badge
- Size selector with available sizes
- Add to cart button (primary CTA)
- Product description accordion
- Customer reviews section with ratings
- Related products carousel
Layout Requirements:
- Mobile-first responsive design (375px-414px)
- Safe area padding (px-4, pt-safe)
- Bottom sticky CTA bar
Components:
1. Header with back button, share icon, and wishlist button
2. Image gallery with dot indicators
3. Product info card (title, price, rating)
4. Size selector chips
5. Sticky add to cart button
6. Expandable description and reviews
Interactive Elements:
- Image zoom on tap
- Size chip selection state
- Add to cart animation
- Review pagination
- Loading skeleton for images
Accessibility:
- Touch targets minimum 44x44px
- Color contrast WCAG AA compliant
- Alt text for images
- Semantic HTML structure
Use shadcn/ui Button, Card, and Badge components. Include Lucide React icons (ChevronLeft, Share2, Heart, ShoppingCart). Make it visually appealing with smooth transitions."
Bu prompt v0'a girildiğinde, kullanıma hazır, profesyonel bir ürün detay ekranı kodu üretilecektir.
# UYGULAMA BİLGİLERİ
Uygulama Türü: [UYGULAMA TÜRÜ]
Tasarlanacak Ekran: [EKRAN ADI]
Renk Paleti: [RENK PALETİ]
Tasarım Stili: [TASARIM STİLİ]
# EKRAN ÖZELLİKLERİ
Ekranın içermesi gereken özellikler:
[ÖZELLİKLER]
# TASARIM GEREKSİNİMLERİ
1. LAYOUT YAPISI
- Mobil-first yaklaşım kullan (375px-414px arası optimizasyon)
- Safe area (güvenli alan) kenar boşluklarını dikkate al
- Scroll davranışını belirle (infinite scroll, pagination vb.)
- Navigation bar veya bottom tab bar konumlandır
2. BİLEŞEN HİYERARŞİSİ
- Header bölümü (başlık, geri butonu, menü ikonu)
- Ana içerik alanı (kartlar, listeler, formlar)
- Call-to-action (CTA) butonları
- Footer veya bottom navigation
3. GÖRSEL ÖĞELER
- İkonlar için Lucide React veya Heroicons kullan
- Görseller için placeholder veya örnek URL'ler ekle
- Tipografi hiyerarşisi belirle (başlık, alt başlık, gövde metni)
- Boşlukları (spacing) tutarlı kullan (4px, 8px, 16px, 24px, 32px)
4. İNTERAKTİF ELEMANLAR
- Buton durumları (default, hover, active, disabled)
- Form input stilleri ve placeholder metinleri
- Loading state (yükleme durumu) göstergesi
- Error state (hata durumu) mesajları
- Empty state (boş durum) için placeholder tasarımı
5. ERİŞİLEBİLİRLİK
- Dokunma hedefleri minimum 44x44px olsun
- Kontrast oranı WCAG AA standardına uygun olsun
- Ekran okuyucu uyumlu aria etiketleri ekle
- Keyboard navigation destekle
6. RESPONSIVE DAVRANIŞLAR
- Dikey ve yatay yönlendirme (portrait/landscape) desteği
- Farklı ekran boyutları için breakpoint'ler
- Dinamik font ölçeklendirme
7. ANIMASYONLAR VE GEÇİŞLER
- Sayfa geçişleri için smooth transition
- Mikro-animasyonlar (buton tıklama, kart açılma)
- Skeleton loader kullan (içerik yüklenirken)
# ÇIKTI FORMATI
v0 için prompt şu yapıda olmalı:
"Create a [EKRAN ADI] screen for a [UYGULAMA TÜRÜ] mobile app using React and Tailwind CSS.
Design Style: [TASARIM STİLİ]
Color Palette: [RENK PALETİ]
Features to include:
- [ÖZELLİK 1]
- [ÖZELLİK 2]
- [ÖZELLİK 3]
Layout Requirements:
- Mobile-first responsive design (375px-414px)
- Safe area padding
- [NAVİGATİON TÜRÜ] navigation
Components:
1. Header with [HEADER ELEMANLARI]
2. Main content area with [İÇERİK TÜRÜ]
3. [CTA BUTON AÇIKLAMASI]
4. [FOOTER/BOTTOM BAR AÇIKLAMASI]
Interactive Elements:
- Button states (hover, active, disabled)
- Form inputs with validation
- Loading states
- Error handling
Accessibility:
- Touch targets minimum 44x44px
- WCAG AA contrast compliance
- Screen reader support
Use shadcn/ui components where applicable. Include Lucide React icons. Make it modern, clean, and user-friendly."
# ÖNEMLİ NOTLAR
- v0, metin tabanlı prompt aldığında otomatik olarak React/Next.js kodu üretir
- Tailwind CSS sınıfları kullanarak stillendirme yapar
- shadcn/ui bileşen kütüphanesini destekler
- Responsive tasarım otomatik olarak uygulanır
- Kod doğrudan kopyalanıp projeye yapıştırılabilir
# ÖRNEK KULLANIM
Uygulama Türü: E-ticaret
Ekran Adı: Ürün Detay Sayfası
Renk Paleti: Mavi-Beyaz-Gri
Tasarım Stili: Modern, minimalist
Özellikler: Ürün görselleri galerisi, fiyat bilgisi, beden seçimi, sepete ekle butonu, ürün açıklaması, kullanıcı yorumları
Bu bilgilerle v0'a verilecek prompt:
"Create a Product Detail screen for an e-commerce mobile app using React and Tailwind CSS.
Design Style: Modern, minimalist
Color Palette: Blue, White, Gray
Features to include:
- Image gallery with swipeable product photos
- Price display with discount badge
- Size selector with available sizes
- Add to cart button (primary CTA)
- Product description accordion
- Customer reviews section with ratings
- Related products carousel
Layout Requirements:
- Mobile-first responsive design (375px-414px)
- Safe area padding (px-4, pt-safe)
- Bottom sticky CTA bar
Components:
1. Header with back button, share icon, and wishlist button
2. Image gallery with dot indicators
3. Product info card (title, price, rating)
4. Size selector chips
5. Sticky add to cart button
6. Expandable description and reviews
Interactive Elements:
- Image zoom on tap
- Size chip selection state
- Add to cart animation
- Review pagination
- Loading skeleton for images
Accessibility:
- Touch targets minimum 44x44px
- Color contrast WCAG AA compliant
- Alt text for images
- Semantic HTML structure
Use shadcn/ui Button, Card, and Badge components. Include Lucide React icons (ChevronLeft, Share2, Heart, ShoppingCart). Make it visually appealing with smooth transitions."
Bu prompt v0'a girildiğinde, kullanıma hazır, profesyonel bir ürün detay ekranı kodu üretilecektir.
Sen mobil uygulama arayüzü tasarımında uzman bir UI/UX tasarımcısısın. Aşağıdaki parametrelere göre v0 (Vercel) platformu için optimize edilmiş, modern ve kullanıcı dostu bir mobil uygulama ekranı tasarla.
# UYGULAMA BİLGİLERİ
Uygulama Türü: [UYGULAMA TÜRÜ]
Tasarlanacak Ekran: [EKRAN ADI]
Renk Paleti: [RENK PALETİ]
Tasarım Stili: [TASARIM STİLİ]
# EKRAN ÖZELLİKLERİ
Ekranın içermesi gereken özellikler:
[ÖZELLİKLER]
# TASARIM GEREKSİNİMLERİ
1. LAYOUT YAPISI
- Mobil-first yaklaşım kullan (375px-414px arası optimizasyon)
- Safe area (güvenli alan) kenar boşluklarını dikkate al
- Scroll davranışını belirle (infinite scroll, pagination vb.)
- Navigation bar veya bottom tab bar konumlandır
2. BİLEŞEN HİYERARŞİSİ
- Header bölümü (başlık, geri butonu, menü ikonu)
- Ana içerik alanı (kartlar, listeler, formlar)
- Call-to-action (CTA) butonları
- Footer veya bottom navigation
3. GÖRSEL ÖĞELER
- İkonlar için Lucide React veya Heroicons kullan
- Görseller için placeholder veya örnek URL'ler ekle
- Tipografi hiyerarşisi belirle (başlık, alt başlık, gövde metni)
- Boşlukları (spacing) tutarlı kullan (4px, 8px, 16px, 24px, 32px)
4. İNTERAKTİF ELEMANLAR
- Buton durumları (default, hover, active, disabled)
- Form input stilleri ve placeholder metinleri
- Loading state (yükleme durumu) göstergesi
- Error state (hata durumu) mesajları
- Empty state (boş durum) için placeholder tasarımı
5. ERİŞİLEBİLİRLİK
- Dokunma hedefleri minimum 44x44px olsun
- Kontrast oranı WCAG AA standardına uygun olsun
- Ekran okuyucu uyumlu aria etiketleri ekle
- Keyboard navigation destekle
6. RESPONSIVE DAVRANIŞLAR
- Dikey ve yatay yönlendirme (portrait/landscape) desteği
- Farklı ekran boyutları için breakpoint'ler
- Dinamik font ölçeklendirme
7. ANIMASYONLAR VE GEÇİŞLER
- Sayfa geçişleri için smooth transition
- Mikro-animasyonlar (buton tıklama, kart açılma)
- Skeleton loader kullan (içerik yüklenirken)
# ÇIKTI FORMATI
v0 için prompt şu yapıda olmalı:
"Create a [EKRAN ADI] screen for a [UYGULAMA TÜRÜ] mobile app using React and Tailwind CSS.
Design Style: [TASARIM STİLİ]
Color Palette: [RENK PALETİ]
Features to include:
- [ÖZELLİK 1]
- [ÖZELLİK 2]
- [ÖZELLİK 3]
Layout Requirements:
- Mobile-first responsive design (375px-414px)
- Safe area padding
- [NAVİGATİON TÜRÜ] navigation
Components:
1. Header with [HEADER ELEMANLARI]
2. Main content area with [İÇERİK TÜRÜ]
3. [CTA BUTON AÇIKLAMASI]
4. [FOOTER/BOTTOM BAR AÇIKLAMASI]
Interactive Elements:
- Button states (hover, active, disabled)
- Form inputs with validation
- Loading states
- Error handling
Accessibility:
- Touch targets minimum 44x44px
- WCAG AA contrast compliance
- Screen reader support
Use shadcn/ui components where applicable. Include Lucide React icons. Make it modern, clean, and user-friendly."
# ÖNEMLİ NOTLAR
- v0, metin tabanlı prompt aldığında otomatik olarak React/Next.js kodu üretir
- Tailwind CSS sınıfları kullanarak stillendirme yapar
- shadcn/ui bileşen kütüphanesini destekler
- Responsive tasarım otomatik olarak uygulanır
- Kod doğrudan kopyalanıp projeye yapıştırılabilir
# ÖRNEK KULLANIM
Uygulama Türü: E-ticaret
Ekran Adı: Ürün Detay Sayfası
Renk Paleti: Mavi-Beyaz-Gri
Tasarım Stili: Modern, minimalist
Özellikler: Ürün görselleri galerisi, fiyat bilgisi, beden seçimi, sepete ekle butonu, ürün açıklaması, kullanıcı yorumları
Bu bilgilerle v0'a verilecek prompt:
"Create a Product Detail screen for an e-commerce mobile app using React and Tailwind CSS.
Design Style: Modern, minimalist
Color Palette: Blue, White, Gray
Features to include:
- Image gallery with swipeable product photos
- Price display with discount badge
- Size selector with available sizes
- Add to cart button (primary CTA)
- Product description accordion
- Customer reviews section with ratings
- Related products carousel
Layout Requirements:
- Mobile-first responsive design (375px-414px)
- Safe area padding (px-4, pt-safe)
- Bottom sticky CTA bar
Components:
1. Header with back button, share icon, and wishlist button
2. Image gallery with dot indicators
3. Product info card (title, price, rating)
4. Size selector chips
5. Sticky add to cart button
6. Expandable description and reviews
Interactive Elements:
- Image zoom on tap
- Size chip selection state
- Add to cart animation
- Review pagination
- Loading skeleton for images
Accessibility:
- Touch targets minimum 44x44px
- Color contrast WCAG AA compliant
- Alt text for images
- Semantic HTML structure
Use shadcn/ui Button, Card, and Badge components. Include Lucide React icons (ChevronLeft, Share2, Heart, ShoppingCart). Make it visually appealing with smooth transitions."
Bu prompt v0'a girildiğinde, kullanıma hazır, profesyonel bir ürün detay ekranı kodu üretilecektir.
Bu Prompt Seni Bekliyor
v0 (Vercel) için hazırlanmış bu promptu anında kopyala, kullan.
Ücretsiz üye ol, binlerce prompta eriş.
6,001 üye
2,039 prompt
20,155 kopya
602,786 görüntülenme
10 saniyede üye ol, sınırsız prompt keşfet
Nile
"Sizin için dünyanın en güzel promptlarını üretiyorum."
Üyelik
21.12.2025
Son Görülme
05.11.2026
Kullanım Zorluğu
İleri Seviye
Bu prompt kullanmadan önce düzenlemeniz gereken 13 değişken içerir.
Keşfet
Alternatif Araçlar
Biliyor muydunuz?
Aynı promptu farklı araçlarda denemek, işine en uygun modeli bulmanın en hızlı yoludur.
En Popüler
İlgili Etiketler
AI Engine
Benzer promptlar
Puan ver