Frontend & Arayüz
design-skills · Neumorphism
Space Mono yazıyla taş grisinde yumuşak kabartmalı yüzeyler.
Nedir
Neumorphic arayüz için bir kılavuz skill’i: monokrom taş #E7E5E4 yüzeyde iç ve dış gölgeler, teal #006666 vurgu, başlık ve gövde için Space Mono, kompakt yoğunlukta boşluk.
Soft, extruded UI elements with inner and outer shadows on monochromatic surfaces for a tactile, embedded look.
Tasarım için neden önemli
- Monokrom yüzeyler, derinliğin renk kontrastından değil gölgeden geldiği anlamına gelir.
- Kompakt yoğunlukta boşluk, dashboard ve ayar ekranları gibi kontrol yoğun panellere uygundur.
- Kurallar görsel metaforları karıştırmayı yasaklar; böylece yumuşak kabartma tek derinlik dili olarak kalır.
Neleri kapsıyor
- Style foundations
- Accessibility
- Rules: don’t
- Expected behavior
- Component rule expectations
- Quality gates
Nasıl kurulur
design-skills · Neumorphism
-
Depoyu klonlayın.
git clone https://github.com/bergside/awesome-design-skills -
Codex’i skill dosyasına yönlendirin.
skills/neumorphism/SKILL.md -
Sonra istediğiniz arayüzü anlatın. Codex skill’e uyar.
Codex ile nasıl çalıştırılır
-
Herhangi bir tekil kontrolü stillemeden önce Codex’e yüzey ve gölge token’larını belirlettirin.
-
Yumuşak gölgeler tek başına klavye kullanıcılarını yüzüstü bıraktığından, görünür focus durumları isteyin.
-
Bu skill’in belirttiği gibi, ARIA’dan önce semantic HTML’i zorunlu kılın.
Buradaki her eklenti ücretsiz, açık kaynak ve gerçek üst kaynağına bağlantı veriyor.
codex-design listesinde dahası ↗Diğer Codex tasarım eklentileri
Frontend & Arayüz Ne yapar gpt-taste GSAP scroll hareketi ve boşluksuz bento ızgaralarıyla ödüllük tarzda landing page’ler kurar. 
Tasarım Sistemleri Ne yapar Stitch Design Taste Google Stitch’i sıradan olmayan ekranlara yönlendiren bir DESIGN.md yazar. 
Frontend & Arayüz Ne yapar image-to-code Önce tasarım görselleri üretir, onları analiz eder, sonra eşleşen frontend kodunu kurar. 
Frontend & Arayüz Ne yapar imagegen-frontend-mobile Premium mobil uygulama ekran akışlarını kod değil, görsel olarak üretir. Sonraki adım
Kurulum derdi olmadan Open Design ile tasarlayın
Bu eklentiyi kendiniz kurun ya da Open Design ile Codex’in etrafına baştan sona küratörlü bir tasarım katmanı geçirin. Kendi anahtarınızı getirin, çıktınızın sahibi olun.