Frontend & Arayüz
apple-design
Apple’ın akıcı arayüz ilkeleri, web yayları ve jestlerine çevrilmiş.
Nedir
Apple WWDC tasarım konuşmalarından, başta Designing Fluid Interfaces’ten süzülen ve CSS, Pointer Events ile yay kitaplıklarına eşlenen bilgi. Yanıt, kesilebilirlik, momentum, malzemeler, tipografi ve erişilebilirliği kapsar.
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible tran
Tasarım için neden önemli
- Geri bildirim pointer-down anında tetiklenir; basılan öğeler ölü hissettirmeyi bırakır.
- Animasyonlar ekrandaki canlı değerden başlar; kesintide görünen sıçramaları ortadan kaldırır.
- Fiskeler bir iniş noktası öngörür; savurmalar jestin hedeflediği yere iner.
Neleri kapsıyor
- Response
- Direct manipulation
- Interruptibility
- Momentum projection
- Materials and depth
- Reduced motion and accessibility
Nasıl kurulur
apple-design
-
Depoyu klonlayın.
git clone https://github.com/emilkowalski/skills -
Codex’i skill dosyasına yönlendirin.
skills/apple-design/SKILL.md -
Sonra istediğiniz arayüzü anlatın. Codex skill’e uyar.
Codex ile nasıl çalıştırılır
-
Codex’ten bir sheet, drawer ya da sürükleme etkileşimi kurmasını isteyin.
-
Pointer capture ile 1:1 takip eder ve hız geçmişini kaydeder.
-
Bırakıldığında hızı, verilen sönümleme değerleriyle bir yaya devreder.
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.