Nasıl Neumorphism UI Tasarımı Uygulanır

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 [Bileşen_Tipi] için HTML yapısını oluştur. * Eğer [Bileşen_Tipi] "Düğme" ise, `` etiketi kullan. * Eğer [Bileşen_Tipi] "Kart" ise, `` etiketi kullan ve içerisine örnek bir başlık ve paragraf ekle. * Eğer [Bileşen_Tipi] "Giriş Alanı" ise, `` etiketi kullan. * Eğer [Bileşen_Tipi] "Toggle" ise, bir checkbox ve label kullanarak erişilebilir bir toggle yapısı oluştur. * Eğer [Bileşen_Tipi] "Slider" ise, `` etiketi kullan. Adım 3: Oluşturulan HTML yapısına Neumorphism stilini uygulayan CSS/SCSS kodunu yaz. * [Bileşen_Boyutu] parametresine göre bileşenin genişlik ve yüksekliğini ayarla. * [Görsel_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 [Bileşen_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.