Frontend & Arayüz
Impeccable
Frontend arayüzleri kurmak, eleştirmek ve inceltmek için yirmi dört komut.
Nedir
Komutları build, evaluate, refine, enhance, fix ve iterate olarak gruplanmış bir frontend tasarım skill’i. Proje bağlamını ve bir register referansını okur, sonra üretim kalitesinde kod yazar.
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing page
Tasarım için neden önemli
- Register ayrımı, pazarlama sayfalarını ve ürün arayüzünü farklı tasarım kurallarına gönderir.
- Mutlak yasaklar; degrade metni, yan şeritli kenarlıkları ve her bölümün üstündeki eyebrow etiketlerini reddeder.
- Kontrast tabanları açıktır: gövde metni için 4.5:1, büyük metin için 3:1.
Neleri kapsıyor
- Setup
- Design guidance
- The AI slop test
- Commands
- Routing rules
- Hooks
Nasıl kurulur
Impeccable
-
Depoyu klonlayın.
git clone https://github.com/pbakaus/impeccable -
Codex’i skill dosyasına yönlendirin.
plugin/skills/impeccable/SKILL.md -
Sonra istediğiniz arayüzü anlatın. Codex skill’e uyar.
Codex ile nasıl çalıştırılır
-
Skill’in PRODUCT.md ve DESIGN.md’yi yüklemesi için oturum başına bir kez context.mjs çalıştırın.
-
Bir hedef dosyayla critique, polish ya da animate gibi bir komut çağırın.
-
Tarayıcı içi varyantlar üretmek için çalışan bir dev sunucusuyla live mode kullanı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.