Frontend & Arayüz
image-to-code
Önce tasarım görselleri üretir, onları analiz eder, sonra eşleşen frontend kodunu kurar.
Nedir
Görsel web işleri için görsel-önce bir iş akışı. Ajan bölüm referans görselleri üretir, bunlardan tipografi, boşluk, renk ve bileşenleri çıkarır, sonra siteyi bunlara uyacak şekilde kodlar.
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In C
Tasarım için neden önemli
- Kod gerçek bir görsel referansı izler; bu yüzden uygulama jenerik düzenlere kaymaz.
- Her bölüm kendi büyük görselini alır; metin ve boşluk böylece incelenebilir kalır.
- Hero’lar üç başlık satırının altında kalır ve iç içe kapsayıcı yığınlarından arınır.
Neleri kapsıyor
- Mandatory image-first rule
- Generate enough images rule
- Deep image analysis requirement
- Hero minimalism rules
- Anti-drift implementation rule
- Anti-AI-slop rules
Nasıl kurulur
image-to-code
-
Depoyu klonlayın.
git clone https://github.com/Leonxlnx/taste-skill -
Codex’i skill dosyasına yönlendirin.
skills/image-to-code-skill/SKILL.md -
Sonra istediğiniz arayüzü anlatın. Codex skill’e uyar.
Codex ile nasıl çalıştırılır
-
Bölüm sayısını belirtin; Codex içinde skill her bölüm için bir görsel üretir.
-
Buton ya da yazı detayı okunaksız kaldığında daha yakın bir detay render isteyin.
-
Herhangi bir uygulama dosyası yazmadan önce netlik kontrolünü çalıştırtı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 imagegen-frontend-mobile Premium mobil uygulama ekran akışlarını kod değil, görsel olarak üretir. 
Frontend & Arayüz Ne yapar imagegen-frontend-web Landing page’in her bölümü için ayrı bir yatay referans görsel ü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.