5 Dakikada Uygulama Arayüzü Bileşeni Tasarlama
Uygulama arayüzü tasarımı; renk paleti, tipografi, bileşen hiyerarşisi ve etkileşim durumları gibi birden fazla kararı aynı anda yönetmeyi gerektiren, zaman alan bir süreçtir. Tasarım deneyimi olmayan kullanıcılar için bu süreç özellikle zorlu olabilir.
Bu prompt, v0 aracına yönelik optimize edilmiş bir yapıya sahiptir. Kullanıcılar; tasarlamak istedikleri bileşeni, hedef kitleyi, renk tercihini ve içerik türünü metin olarak girerek saniyeler içinde kullanıma hazır, görsel olarak tutarlı bir React bileşeni elde edebilir.
Prompt, v0'ın doğal dil anlama kapasitesini en üst düzeyde kullanacak biçimde yapılandırılmıştır. Bileşen tipi, düzen tercihi, etkileşim durumları (hover, aktif, boş durum) ve erişilebilirlik gereksinimleri ayrı ayrı belirtildiğinden çıktı, doğrudan üretim ortamına uyarlanabilir nitelikte olur.
- Ürün kartı, fiyatlandırma tablosu, açılış sayfası bölümü gibi yaygın bileşen türleri için uygundur.
- Renk, yazı tipi ve boşluk tercihlerini doğal dille ifade etme imkânı sunar.
- v0'ın bileşen çıktısını Tailwind CSS ile üretme özelliğinden yararlanır; bu sayede kod doğrudan kullanılabilir.
- Hem mobil hem masaüstü düzenini tek promptta kapsayan duyarlı tasarım talimatları içerir.
Tasarım sürecini hızlandırmak, prototip maliyetlerini düşürmek ve teknik bilgi gerektirmeden profesyonel görünümlü arayüzler üretmek isteyen ürün yöneticileri, girişimciler ve içerik üreticileri için pratik bir başlangıç noktası sağlar.
{ }Değişken Açıklamaları:
- [BİLEŞEN TÜRÜ]: Tasarlanacak bileşenin türü. Örneğin; ürün kartı, fiyatlandırma tablosu, hero bölümü
- [KULLANIM AMACI]: Bileşenin kullanım amacı. Örneğin; e-ticaret ürün listesi, SaaS açılış sayfası, mobil uygulama ana ekranı
- [HEDEF KULLANICI]: Hedef kullanıcı grubu. Örneğin; kurumsal müşteriler, genç kullanıcılar, profesyoneller
- [RENK TERCİHİ]: Kullanılacak renk paleti. Örneğin; koyu zemin üzerine amber tonları, açık ve temiz beyaz-yeşil, sıcak krem tonları
- [GENEL STİL]: Bileşenin genel stil tercihi. Örneğin; minimalist, modern, kurumsal
- [TİPOGRAFİ TONU]: Tipografi tarzı ve tonu. Örneğin; kalın başlıklar, ince ve zarif yazılar, okunabilir sansserif
- [ANA İÇERİK]: Gösterilecek ana içerikler. Örneğin; ürün adı fiyatı ve açıklama, CTA butonu ile özellik listesi, başlık ve alt metin
- [VURGULANAN ÖĞE]: Vurgulanacak özel öğe. Örneğin; indirim etiketi, öne çıkan plan rozeti, yeni ürün bandı
- [GÖRSEL VARLIK]: Kullanılacak görsel unsurlar. Örneğin; ürün fotoğrafı için yer tutucu, ikon seti, illüstrasyon alanı
- [VARYANT SAYISI]: Oluşturulacak bileşen varyant sayısı. Örneğin; 2, 3, 1
Değişkenleri Düzenle
BİLEŞEN BİLGİLERİ:
- Bileşen türü: [BİLEŞEN TÜRÜ] (örn: ürün kartı, fiyatlandırma tablosu, hero bölümü, giriş formu)
- Kullanım amacı: [KULLANIM AMACI] (örn: e-ticaret ürün listesi, SaaS açılış sayfası, mobil uygulama ana ekranı)
- Hedef kullanıcı: [HEDEF KULLANICI] (örn: kurumsal müşteriler, genç kullanıcılar, profesyoneller)
GÖRSEL TERCIHLER:
- Renk paleti: [RENK TERCİHİ] (örn: koyu zemin üzerine amber tonları, açık ve temiz beyaz-yeşil, sıcak krem tonları)
- Genel stil: [GENEL STİL] (örn: minimalist, modern, kurumsal, oyunsu)
- Tipografi tonu: [TİPOGRAFİ TONU] (örn: kalın başlıklar, ince ve zarif yazılar, okunabilir sansserif)
İÇERİK YAPISI:
- Gösterilecek ana içerik: [ANA İÇERİK] (örn: ürün adı, fiyat, açıklama, CTA butonu)
- Vurgulanması gereken öğe: [VURGULANAN ÖĞE] (örn: indirim etiketi, öne çıkan plan rozeti, yeni ürün bandı)
- Görsel varlık: [GÖRSEL VARLIK] (örn: ürün fotoğrafı için yer tutucu, ikon seti, illüstrasyon alanı)
EKLENMESİNİ İSTEDİĞİM ÖZELLİKLER:
- Etkileşim durumları: hover efekti, aktif durum, boş durum mesajı
- Duyarlı düzen: mobil öncelikli, tablet ve masaüstü kırılma noktaları
- Erişilebilirlik: aria etiketleri, klavye navigasyonu, yeterli renk kontrastı
- Bileşen varyantları: [VARYANT SAYISI] farklı varyant (örn: 2 → standart ve öne çıkan)
TASARIM KURALLARI:
- Tailwind CSS sınıflarını kullan; özel CSS yazmaktan kaçın.
- Her bileşen kendi içinde bağımsız çalışmalı; dış bağımlılık gerektirmemeli.
- Boşluk ve hizalama için tutarlı bir ızgara sistemi uygula.
- Renkler, köşe yuvarlaklığı ve gölge değerleri tasarım sistemi mantığıyla seçilmeli.
ÇIKTI BEKLENTİSİ:
1. Kullanıma hazır React bileşen kodu
2. Bileşenin nasıl kullanılacağını gösteren örnek kullanım satırı
3. Tasarım kararlarına ilişkin kısa açıklama (renk, boşluk, tipografi)
4. Varsa geliştirme önerileri (animasyon, dark mode, veri entegrasyonu)
Sen, kullanıcı arayüzü tasarımında uzman bir v0 bileşen mimarısın. Aşağıdaki gereksinimlere göre, üretim ortamına hazır, görsel olarak tutarlı ve duyarlı bir React bileşeni tasarla.
BİLEŞEN BİLGİLERİ:
- Bileşen türü: [BİLEŞEN TÜRÜ] (örn: ürün kartı, fiyatlandırma tablosu, hero bölümü, giriş formu)
- Kullanım amacı: [KULLANIM AMACI] (örn: e-ticaret ürün listesi, SaaS açılış sayfası, mobil uygulama ana ekranı)
- Hedef kullanıcı: [HEDEF KULLANICI] (örn: kurumsal müşteriler, genç kullanıcılar, profesyoneller)
GÖRSEL TERCIHLER:
- Renk paleti: [RENK TERCİHİ] (örn: koyu zemin üzerine amber tonları, açık ve temiz beyaz-yeşil, sıcak krem tonları)
- Genel stil: [GENEL STİL] (örn: minimalist, modern, kurumsal, oyunsu)
- Tipografi tonu: [TİPOGRAFİ TONU] (örn: kalın başlıklar, ince ve zarif yazılar, okunabilir sansserif)
İÇERİK YAPISI:
- Gösterilecek ana içerik: [ANA İÇERİK] (örn: ürün adı, fiyat, açıklama, CTA butonu)
- Vurgulanması gereken öğe: [VURGULANAN ÖĞE] (örn: indirim etiketi, öne çıkan plan rozeti, yeni ürün bandı)
- Görsel varlık: [GÖRSEL VARLIK] (örn: ürün fotoğrafı için yer tutucu, ikon seti, illüstrasyon alanı)
EKLENMESİNİ İSTEDİĞİM ÖZELLİKLER:
- Etkileşim durumları: hover efekti, aktif durum, boş durum mesajı
- Duyarlı düzen: mobil öncelikli, tablet ve masaüstü kırılma noktaları
- Erişilebilirlik: aria etiketleri, klavye navigasyonu, yeterli renk kontrastı
- Bileşen varyantları: [VARYANT SAYISI] farklı varyant (örn: 2 → standart ve öne çıkan)
TASARIM KURALLARI:
- Tailwind CSS sınıflarını kullan; özel CSS yazmaktan kaçın.
- Her bileşen kendi içinde bağımsız çalışmalı; dış bağımlılık gerektirmemeli.
- Boşluk ve hizalama için tutarlı bir ızgara sistemi uygula.
- Renkler, köşe yuvarlaklığı ve gölge değerleri tasarım sistemi mantığıyla seçilmeli.
ÇIKTI BEKLENTİSİ:
1. Kullanıma hazır React bileşen kodu
2. Bileşenin nasıl kullanılacağını gösteren örnek kullanım satırı
3. Tasarım kararlarına ilişkin kısa açıklama (renk, boşluk, tipografi)
4. Varsa geliştirme önerileri (animasyon, dark mode, veri entegrasyonu)
Bu Prompt Seni Bekliyor
v0 (Vercel) için hazırlanmış bu promptu anında kopyala, kullan.
Ücretsiz üye ol, binlerce prompta eriş.
10 saniyede üye ol, sınırsız prompt keşfet
Nile
Bu prompt kullanmadan önce düzenlemeniz gereken 10 değişken içerir.
Keşfet
Alternatif Araçlar
Biliyor muydunuz?
İstediğin çıktıyı en başta net formatla belirt: 'Tablo olarak ver', 'JSON formatında döndür', 'Madde madde listele, her madde 1 cümle olsun'
En Popüler
İlgili Etiketler
Benzer promptlar
Topluluk Görüşleri
Bu içerik hakkında üyeler neler düşünüyor?
Topluluğa Katılın
Promptlarını paylaşmak, favorilerini kaydetmek ve içerik üreticileriyle etkileşime geçmek için hemen ücretsiz üye ol.