Frontend & Arayüz
Details that make interfaces feel better
Bir inceleme kontrol listesiyle on altı somut arayüz cilası kuralı.
Nedir
Arayüz cilası için bir dizi tasarım mühendisliği ilkesi: eşmerkezli radius’lar, optik hizalama, katmanlı gölgeler, kademeli giriş animasyonları, tablo rakamları, tıklama alanları ve transition özgüllüğü.
Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/
Tasarım için neden önemli
- Kesin değerleri adlandırır; böylece basıştaki ölçek her zaman 0.96’dır, asla tahmin değil.
- Çoğu bileşenin bozuk görünmesine yol açan iç içe radius uyumsuzluğunu düzeltir.
- Değişen sayılardan kaynaklanan düzen kaymasını, kullanıcılara ulaşmadan önce yakalar.
Neleri kapsıyor
- Quick reference
- Core principles
- Common mistakes
- Review output format
- Review checklist
- Reference files
Nasıl kurulur
Details that make interfaces feel better
-
Depoyu klonlayın.
git clone https://github.com/jakubkrehel/make-interfaces-feel-better -
Codex’i skill dosyasına yönlendirin.
skills/make-interfaces-feel-better/SKILL.md -
Sonra istediğiniz arayüzü anlatın. Codex skill’e uyar.
Codex ile nasıl çalıştırılır
-
Codex’i bir bileşene yönlendirin ve ilkeleri uygulamasını isteyin.
-
Bir inceleme isteyin; bulgular Before ve After tabloları olarak döner.
-
Herhangi bir frontend değişikliğini merge etmeden önce on dört maddelik kontrol listesini çalıştırı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.