Nasıl Neumorphism Ui Tasarımı Uygulanır - Hazır AI Prompt

Cursor, Neumorphism UI tasarım prensiplerini kullanarak modern ve erişilebilir bir kullanıcı arayüzü bileşeni oluşturmama yardımcı ol. Adım 1: Neumorphism için temel renk paletini ve gölge değerlerini tanımla. * Arka plan rengi: #temel_renk * Açık gölge rengi: #temel_renk'ten biraz daha açık bir ton. * Koyu gölge rengi: #temel_renk'ten biraz daha koyu bir ton. * Gölge yayılma mesafesi ve bulanıklık değerleri için Neumorphism prensiplerine uygun başlangıç değerleri öner. Adım 2: Belirtilen #bilesen_tipi için HTML yapısını oluştur. * Eğer #bilesen_tipi "Düğme" ise, `` etiketi kullan. * Eğer #bilesen_tipi "Kart" ise, `` etiketi kullan ve içerisine örnek bir başlık ve paragraf ekle. * Eğer #bilesen_tipi "Giriş Alanı" ise, `` etiketi kullan. * Eğer #bilesen_tipi "Toggle" ise, bir checkbox ve label kullanarak erişilebilir bir toggle yapısı oluştur. * Eğer #bilesen_tipi "Slider" ise, `` etiketi kullan. Adım 3: Oluşturulan HTML yapısına Neumorphism stilini uygulayan CSS/SCSS kodunu yaz. * #bilesen_boyutu parametresine göre bileşenin genişlik ve yüksekliğini ayarla. * #gorsel_durum parametresine göre (örneğin "Hover" veya "Aktif" durumları için) farklı gölge ve renk geçiş efektleri ekle. * Bileşenin içindeki metin veya ikonlar için uygun renk kontrastını sağla. * `border-radius` değerini yumuşak bir görünüm için ayarla. * `box-shadow` özelliklerini kullanarak içe veya dışa doğru bir kabartma efekti oluştur. Adım 4: Erişilebilirlik (Accessibility) kontrolü yap. * Oluşturulan #bilesen_tipi için renk kontrast oranlarını kontrol et ve WCAG standartlarına uygunluğunu değerlendir. * Gerekirse, kontrastı artırmak için renk önerilerinde bulun. * Klavye ile gezinme ve odaklanma durumları için (`:focus` stili) uygun görsel ipuçları ekle. Adım 5: Kod optimizasyonu ve en iyi uygulamalar. * Oluşturulan CSS/SCSS kodunu daha modüler ve yeniden kullanılabilir hale getirmek için önerilerde bulun (örneğin, CSS değişkenleri kullanma). * Performans açısından olası iyileştirmeler hakkında bilgi ver. * Neumorphism tasarımının hangi durumlarda daha uygun olduğunu ve hangi durumlarda alternatif yaklaşımların düşünülmesi gerektiğini tartış. Cursor, bu adımları takip ederek bana adım adım kod parçacıkları ve açıklamalar sun. Her adımda benden geri bildirim bekle ve sorular sorarak ilerleyelim.