Frontend & Arayüz
emil-design-eng
Emil Kowalski’nin animasyon zamanlaması, easing ve bileşen cilası kuralları.
Nedir
Bir tasarım mühendisliği felsefesini kodlar: animasyon karar çerçevesi, yay rehberi, bileşen ilkeleri, clip-path teknikleri, jest yönetimi, performans kuralları ve bir inceleme kontrol listesi.
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
Tasarım için neden önemli
- Sık yapılan eylemler animasyonlarını tümüyle yitirir; böylece komut paletleri anlık kalır.
- Girişler scale(0.95)’ten başlar, asla scale(0)’dan değil; böylece hiçbir şey yoktan belirmez.
- Popover’lar merkezleri yerine tetikleyicilerinden ölçeklenir; mekânsal bağı korur.
Neleri kapsıyor
- The animation decision framework
- Spring animations
- Component building principles
- clip-path for animation
- Performance rules
- Review checklist
Nasıl kurulur
emil-design-eng
-
Depoyu klonlayın.
git clone https://github.com/emilkowalski/skills -
Codex’i skill dosyasına yönlendirin.
skills/emil-design-eng/SKILL.md -
Sonra istediğiniz arayüzü anlatın. Codex skill’e uyar.
Codex ile nasıl çalıştırılır
-
Codex’ten arayüz kodunu incelemesini isteyin; bir Before, After, Why tablosu döndürür.
-
Yeni hareket için şunları yanıtlar: bu animasyonlanmalı mı, neden, hangi easing, ne kadar hızlı.
-
Kontrol listesini uygular; transition: all kullanımını ve 300ms üzeri süreleri işaretler.
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.