Tasarım Sistemleri
UI-UX Pro Max · Design System
Üç katmanlı tasarım token’ları, bileşen spesifikasyonları ve token uyumlu slayt üretimi.
Nedir
Primitive, semantic ve bileşen token katmanlarını CSS değişkenleri olarak kapsayan; ayrıca bileşen durum spesifikasyonları ve aynı token’lardan desteler kuran bir slayt üreticisi içeren bir tasarım sistemi skill’i.
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design t
Tasarım için neden önemli
- Semantic token katmanı, açık ve koyu tema geçişini yeniden yazım değil, bir config değişikliği hâline getirir.
- Bileşen spesifikasyonları default, hover, active ve disabled durumlarını tablolar; böylece devir teslim hiçbir şeyi muğlak bırakmaz.
- Bir doğrulayıcı sabit kodlanmış hex değerlerini işaretler; bileşenleri ve slaytları token sisteminde tutar.
Neleri kapsıyor
- Token architecture
- Component spec pattern
- Scripts
- Slide system
- Token compliance
- Best practices
Nasıl kurulur
UI-UX Pro Max · Design System
-
Depoyu klonlayın.
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill -
Codex’i skill dosyasına yönlendirin.
cli/assets/skills/design-system/SKILL.md -
Sonra istediğiniz arayüzü anlatın. Codex skill’e uyar.
Codex ile nasıl çalıştırılır
-
CSS değişken dosyanızı üretmek için bir JSON token config üzerinde generate-tokens.cjs çalıştırın.
-
Codex’ten bileşen spesifikasyonları isteyin, sonra ham değerleri yakalamak için src/ üzerinde validate-tokens.cjs çalıştırın.
-
Bir deste için düzenleri seçmek üzere search-slides.py’yi position ve context bayraklarıyla 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.