Frontend & Arayüz
UI-UX Pro Max · UI Styling
shadcn bileşenleri ve Tailwind yardımcılarıyla erişilebilir arayüzler kurar.
Nedir
Radix primitive’leri üzerinde bir shadcn bileşen katmanını, bir Tailwind yardımcı stil katmanını ve bir canvas görsel tasarım katmanını birleştirir. Temalandırma, erişilebilirlik, responsive kurallar ve özelleştirme için referans dosyaları içerir.
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing
Tasarım için neden önemli
- Dialog’lar ve menüler Radix focus yönetimini devralır; böylece erişilebilirlik sonradan eklenmez.
- Tema renkleri CSS değişkenlerinde yaşar; böylece dark mode tutarlı kalır.
- Mobile-first breakpoint’ler, düzenlerin küçük başlayıp yukarı doğru katmanlandığı anlamına gelir.
Neleri kapsıyor
- Core stack
- Component library guide
- Theme and customization
- Accessibility patterns
- Responsive design
- Visual design system
Nasıl kurulur
UI-UX Pro Max · UI Styling
-
Depoyu klonlayın.
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill -
Codex’i skill dosyasına yönlendirin.
cli/assets/skills/ui-styling/SKILL.md -
Sonra istediğiniz arayüzü anlatın. Codex skill’e uyar.
Codex ile nasıl çalıştırılır
-
Framework ve temayı yapılandırmak için npx shadcn@latest init çalıştırın.
-
Bileşenleri npx shadcn@latest add button card dialog form ile ekleyin.
-
Özel token’lı bir config üretmek için scripts/tailwind_config_gen.py ç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.