Frontend & Arayüz
Hallmark
58 kapı ve zorunlu yapısal çeşitlilikle özensizlik karşıtı bir tasarım akışı.
Nedir
AI kod asistanları için tek bir varsayılan kurma akışı ve üç fiili olan bir tasarım skill’i: audit, redesign ve study. Yapısal çeşitliliği zorlar; böylece iki yapım tek bir sayfa ritmini paylaşmaz.
Anti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots. Use when the user asks to build a new app or landing page, wants to redesign something, invokes Hallmark
Tasarım için neden önemli
- Çeşitlendirme kuralları, ardışık yapımlar boyunca farklı makro yapılar, navigasyonlar ve footer’lar dayatır.
- Kilitli token’lar, token bloğunu atlayan satır içi hex ya da font-family değerlerini yasaklar.
- Her çıktı 320, 375, 414 ve 768 piksel genişliklerinde doğrulanır.
Neleri kapsıyor
- How to use this skill
- Disciplines that hold across every verb
- When the brief is a component, not a page
- Design flow (default)
- Hallmark study
- Output contract and scope
Nasıl kurulur
Hallmark
-
Depoyu klonlayın.
git clone https://github.com/Nutlope/hallmark -
Codex’i skill dosyasına yönlendirin.
skills/hallmark/SKILL.md -
Sonra istediğiniz arayüzü anlatın. Codex skill’e uyar.
Codex ile nasıl çalıştırılır
-
Önce kalkış öncesi taramanın mevcut fontları, paleti ve hareket kitaplıklarını okumasına izin verin.
-
Kitle, kullanım senaryosu ve ton kapısını yanıtlayın ya da devam edin deyin.
-
Düzenleme yapmadan sıralı bir yapılacaklar listesi için bir sayfada hallmark audit ç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.