Skip to content
← Tüm Yazılar

Tasarım & UI/UX

129 Bin Yıldızlı Dev: UI-UX Pro Max ile Ajanlara Mobil ve Web Tasarım Zekâsı Vermek

GitHub'da 129 bin yıldıza ulaşarak açık kaynak dünyasını sarsan UI-UX Pro Max'i kendi kod tabanlarımda denedim. Claude Code ve Cursor'a sadece kod yazmayı değil; komple bir ürün tasarımcısı beyni entegre etmenin tecrübesi.

Tarih 20 Eylül 20269 dk okuma
129 Bin Yıldızlı Dev: UI-UX Pro Max ile Ajanlara Mobil ve Web Tasarım Zekâsı Vermek

Yapay zekâ destekli kodlama araçlarıyla çalışırken arka plan servislerini, veri tabanı şemalarını ve API uçlarını zahmetsizce yazdırabiliyordum. Fakat ne zaman iş bir mobil responsive düzene, butonların başparmak erişim alanına (thumb-zone) oturmasına veya renk kontrastının WCAG standartlarını karşılamasına gelse model hep tökezliyordu.

NextLevelBuilder tarafından açık kaynak olarak sunulan ve GitHub'da tam 129 bin yıldıza ulaşan ui-ux-pro-max-skill reposunu projelerime entegre ettiğimde bu boşluğun nasıl kapandığını gördüm. Sistem, ajanın arka planına binlerce satırlık tasarım disiplinini yükleyerek onu sıradan bir kod üretecinden kıdemli bir UI/UX mimarına dönüştürüyor.

Kendi Deneyimlerimde Fark Yaratan 4 Temel Katman

  • Mobile-First Ergonomi: Mobilde kullanıcıların tek elle ekranın alt yarısına kolayca erişebildiği 'Bottom Sheet' ve 'Sticky Action Bar' düzenlerinin kendiliğinden kurgulanması.
  • Accessibility (Erişilebilirlik - a11y): Ekran okuyucular için ARIA etiketleri ve klavye navigasyonundaki odak halkalarının (focus rings) varsayılan olarak doğru gelmesi.
  • Design Token Mimarisi: Rastgele piksel değerleri yerine 4px/8px katları olan katı grid aralıkları ve sistemik renk değişkenleri.
  • Form Psikolojisi: Karmaşık formların tek sayfaya yığılması yerine çok adımlı (stepper) ve anında doğrulama (inline validation) yapan şablonlara dönüştürülmesi.

Kurulum ve Entegrasyon Adımlarım

install-ui-ux-pro-max.sh
# Claude Code ile entegrasyon
claude skill add nextlevelbuilder/ui-ux-pro-max-skill

# Veya Cursor / Windsurf için sistem kuralı olarak ekleme:
curl -s https://raw.githubusercontent.com/nextlevelbuilder/ui-ux-pro-max-skill/main/SKILL.md >> .cursorrules

Bu kural setini ekledikten sonra bir SaaS yönetim paneli istediğimde, ajanın yalnızca masaüstü görünümünü değil; mobil kırılma noktalarını (breakpoints), boş durum ekranlarını (empty states) ve yükleme iskeletlerini (skeletons) kendiliğinden düşündüğünü gördüm. Kapsamlı ürün geliştirenlerin kesinlikle denemesi gereken dev bir kaynak.