Frontend & Arayüz
Skeuomorphic UI
Butonlara ve panellere katmanlı degradeler ve gölgelerle dokunsal derinlik verin.
Nedir
Dokunsal web arayüzü için bir yüzey reçetesi: dikey degrade dolgular, 1px yansıtıcı degrade kenarlık, üst üste dış ve iç gölgeler. Kabartma metin, ikonlar ve mikro doku isteğe bağlıdır.
Create skeuomorphic web UI surfaces with layered gradients, stacked inner and outer shadows, reflective gradient borders, micro texture, and embossed text or icon details. Use when asked for pressed, carved, tactile, rea
Tasarım için neden önemli
- Kabarık ve basılı durumlar derinliği tersine çevirir; böylece kontroller fiziksel okunur.
- Derinlik yönlü kalır; ışık üstten, gölge alttan gelir.
- Tek bir bileşende glassmorphism, neumorphism ve skeuomorphism’i karıştırmaya karşı uyarır.
Neleri kapsıyor
- Use when
- Surface recipe
- Raised surface
- Pressed surface
- Embossed text and icons
- Micro texture
Nasıl kurulur
Skeuomorphic UI
-
Depoyu klonlayın.
git clone https://github.com/MengTo/Skills -
Codex’i skill dosyasına yönlendirin.
agent-skills/web-design/skeuomorphic-ui/SKILL.md -
Sonra istediğiniz arayüzü anlatın. Codex skill’e uyar.
Codex ile nasıl çalıştırılır
-
Temel token’ları bir kez belirleyin, sonra onları marka ve temaya göre ayarlayın.
-
Kabarık yüzeyi kartlara, butonlara, sekmelere ve kontrol yuvalarına uygulayın.
-
Basılı varyantı yalnızca aktif toggle’lar ve seçili sekmeler için ekleyin.
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.