83.3K+İndir
Kullanım kılavuzuna geç
ui-ux-pro-maxyazan nextlevelbuilder

UI UX Pro Max Skill.

UI tasarımı için bir Claude Code ve Codex skill: web, mobil ve masaüstü için UI/UX tasarım zekası: yerleşim, renk, tipografi ve UX kuralları.

  • Web & UI
  • UI kodu
OpenDesign İndirKullanım kılavuzunu görüntüle
nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/ui-ux-pro-max/SKILL.mdSKILL.md
--- name: ui-ux-pro-max description: UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, … --- ## When to Apply ## Rule Categories by Priority ## Running the search tool ## Workflow ## Query Contract ## If a search returns 0 results
Ön bilgi ve bölüm başlıkları kaynak dosyadan 2026-09-14 tarihinde okundu · Tam metin 15.922 karakter

01 Ne yapar

ui-ux-pro-max Skill'i Claude Code ve Codex İçinde Ne Yapar

Özet, iş akışı ve çıktılar; hepsi skill'in SKILL.md dosyasından okundu.

SKILL.md'den14-09-2026 tarihinde okundu · kayıtlı bir çalıştırma değil

Skill'in Kendi İfadeleriyle

UI/UX Pro Max, web, mobil ve masaüstü arayüzleri için aranabilir bir tasarım zekası skill'idir. 79 stili (50'si aktif), akıl yürütme profilleriyle 192 ürün paletini, 74 font eşleşmesini, 119 UX kuralını, 105 ikonu, 17 GSAP ön ayarını, 25 grafik türünü ve 22 teknoloji yığınını sorgular. Sayfa tasarlamak, renk ve tipografi seçmek, UI'ı erişilebilirlik ve tutarlılık açısından incelemek, navigasyon ve animasyon uygulamak veya kullanılabilirliği artırmak için kullanın.

package.json, pubspec.yaml veya xcodeproj'dan yığını otomatik olarak algılar ve oturumlar arası geri çağırma için isteğe bağlı kalıcılıkla bir tasarım sistemi oluşturur. Üç tasarım kadranı (çeşitlilik, hareket, yoğunluk) çıktıyı ayarlar. Skill; UX, renk, tipografi, ikonlar, GSAP ve yığına özel uygulama rehberliği için alana özel aramalar sunar.

Neler üretir

  • Desen, stil, renkler, tipografi, efektler ve anti-kalıpları ASCII, markdown veya JSON biçiminde içeren tasarım sistemi
  • --page verildiğinde sayfaya özel geçersiz kılmalar için design-system/project-slug/pages/page-name.md
  • Alana özel sonuçlar (UX kuralları, renk paletleri, font eşleşmeleri, ikonlar, GSAP ön ayarları, grafik önerileri, yığın uygulama rehberliği)
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    Gereksinimleri Analiz Et

    Ürün türünü (SaaS, e-ticaret, dashboard), hedef kitleyi, stil anahtar kelimelerini (eğlenceli, minimal, karanlık mod) çıkarın ve package.json, pubspec.yaml, xcodeproj veya app.json'dan yığını algılayın.

  2. 02
    Tasarım Sistemi Oluştur

    Yeni sayfalar veya projeler için search.py'yi --design-system ile çalıştırın.

  3. 03
    Ana Dosya Olarak Sakla ve Geçersiz Kılmalar Ekle

    design-system/project-slug/MASTER.md yazmak için proje köküne işaret eden --persist ve --output-dir ekleyin. Sayfaya özel geçersiz kılmalar pages/page-name.md içine gider.

  4. 04
    Alan Aramalarıyla Tamamla

    2-5 anlamlı terim ve bir kısıtlamayla tek bir alanı (ux, color, typography, icons, gsap, chart, landing, google-fonts) sorgulayın.

  5. 05
    Query Stack Yönergeleri

    Uygulamaya özgü rehberlik için --stack parametresini algılanan yığınla (react, nextjs, vue, swiftui, flutter, vb.) kullanın.

  6. 06
    Teslim öncesi kuralları kontrol edin

    Uygulama UI'sini teslim etmeden önce references/pro-rules.md dosyasını okuyun ve simge disiplini, etkileşim geri bildirimi, açık/koyu kontrast, güvenli alan düzeni ve native/mobil uygulama UI'si için erişilebilirliği kapsayan kanonik Teslim Öncesi Kontrol Listesi'ni uygulayın.

02 Uyumunuzu bulun

ui-ux-pro-max Skill Ne Zaman Kullanılır

Bu tür UI tasarım işleri için Claude Code veya Codex'te ui-ux-pro-max skill'ini kullanın. Uygunluk ve sınırlamalar aşağıda skill'in kendi dosyasından alınmıştır.

İyi Uyum

  • Yeni sayfalar tasarlama veya UI bileşenleri oluşturma ve yeniden düzenleme
  • Renk, tipografi, boşluk veya düzen sistemleri seçme
  • UX, erişilebilirlik veya tutarlılık açısından UI inceleme
  • Navigasyon, animasyon veya duyarlı davranış uygulama
  • Bir arayüzün algılanan kalitesini ve kullanılabilirliğini artırma

Sınırları Bilin

  • Salt arka uç mantığı, API veya veritabanı tasarımı
  • Görsel olmayan performans çalışması, altyapı veya DevOps
  • Görev, bir şeyin görünüşünü, hissini, hareketini veya etkileşim biçimini değiştirmedikçe görsel olmayan betikler

Ne Sağlamalısınız

  • Ürün türü ve kitleSaaS, e-ticaret, portföy, panel, eğlence, araç veya üretkenlik; ayrıca yaş grubu ve kullanım bağlamı (yolculuk, boş zaman, iş)
  • Stil anahtar kelimeleriEğlenceli, canlı, minimal, karanlık mod, içerik odaklı, sürükleyici veya istenen görsel yönü tanımlayan diğer sıfatlar
  • Kalıcılık için proje adıdesign-system alt dizinini ve MASTER.md dosyasını adlandırmak için --design-system parametresine -p "Project Name" geçirin
  • Tasarım kadranları (isteğe bağlı)Üç 1-10 kaydırıcı: --variance (merkezliden kalın/asimetrik olana), --motion (sadeden karmaşık koreografiye), --density (geniş açık alandan yoğun/panel boşluk ölçeğine)

03 Skill'in içinde

ui-ux-pro-max Skill'in Claude Code ve Codex'e Verdiği Kurallar

SKILL.md'nin ajan için belirlediği 8 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

  1. Önce Erişilebilirlik

    Öncelik 1 (KRİTİK). 4.5:1 kontrast, alt metin, klavye navigasyonu ve aria-label'ları sağlayın. Odak halkalarını asla kaldırmayın ve etiketsiz salt simge düğmeler kullanmayın.

  2. Dokunma Hedefleri Minimum 44×44px

    Öncelik 2 (KRİTİK). Dokunma ve etkileşim minimum 44×44px boyutunda, 8px+ boşlukla ve yükleme geri bildirimiyle olmalıdır. Yalnızca hover'a bağımlılıktan ve anlık durum değişikliklerinden (0ms) kaçının.

  3. Boş Sonuçlarda Bir Kez Yeniden Deneyin

    Arama 0 sonuç döndürürse, daha dar bir sorgu veya açık bir alan/yığın belirterek bir kez yeniden deneyin.

  4. En Küçük Arama Modunu Kullanın

    Yeni bir proje veya sayfa için --design-system, hedeflenen bir konu veya bileşen hatası için tek bir açık --domain, bilinen bir uygulama yığını için --stack seçin.

  5. Asla Bir Yığın Varsaymayın

    Yığını package.json, pubspec.yaml, xcodeproj, Package.swift, composer.json veya app.json'dan tespit edin. Hiçbir şey tespit edilemiyorsa ve yığın rehberliği önemliyse kullanıcıya sorun.

  6. Search'ü Tam Yol ile Çağırın

    python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" komutunu her zaman göreli değil tam yol ile çalıştırın.

  7. Master'ı Yetki Olmadan Üzerine Yazmayın

    design-system/project-slug/MASTER.md mevcutsa, --force verilmedikçe --persist yazmayı atlar ve dosyayı dokunulmadan bırakır.

  8. Yığından Önce Anlamsal Sonucu Sorgulayın

    Metin düzeni ve kompakt bileşen hataları için önce anlamsal UX sonucunu (yetim başlık satırı dengesi, rozet/chip etiketi satır kaydırmaları) arayın, ardından uygulama için tespit edilen yığını arayın.

04 İşe koyun

Claude Code veya Codex'te ui-ux-pro-max Yükleyin

Bir npx skills add komutu, ardından ajanınızda ilk görev ve sonuç için bir kontrol listesi.

Claude Code, Codex veya Ajanınıza ui-ux-pro-max Ekleyin

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

Terminal
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max

.claude/skills/ui-ux-pro-max/SKILL.md için genel skills CLI formu; depo kendi yolunu belgeleyebilir.

Skill'e İlk UI Tasarım Görevini Verin

Skill'in kendi terimleriyle yazıldı; köşeli parantezli bölümleri kendi malzemenizle değiştirin.

Starter prompt
Design a dashboard page for a SaaS analytics product targeting data teams. The interface should feel modern and minimal with good dark mode support. Use the detected Next.js stack for implementation guidance. Persist the design system so the team can reference it across sessions.

Kaynak: SKILL.md'den, skill'in kendi terimleriyle yazıldı.

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

  • Arama sonuçlarını uygulamadan önce döndürülen alanı, en üst sonuç kimliğini ve kullanıcının ürünü ve platformuyla uyumunu doğrulayın
  • Çıktı boş veya konu dışıysa daha dar bir yeniden yazımla veya açık bir domain/stack ile bir kez yeniden deneyin.
  • --force'un onu yeniden oluşturmayı haklı çıkarıp çıkarmadığına karar vermeden önce mevcut bir MASTER.md dosyasını okuyun
  • Erişilebilirlik çalışmaları için, açık erişilebilirlik sonuç terimleri kullanarak her seferinde bir gözlemlenebilir sonucu sorgulayın ve sonucun belirli etkileşim veya WCAG kriteriyle eşleştiğini doğrulayın

OpenDesign'da ui-ux-pro-max önceden yüklüdür: Plugins → Skills, üst çubukta seçin.

OpenDesign İndirHızlı başlangıcı okuyun

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

Bu sayfadaki bilgilerin nereden geldiği ve en son ne zaman kontrol edildiği.

Author
nextlevelbuilder
Repository
github.com/nextlevelbuilder/ui-ux-pro-max-skill Branch main
Skill dosyası
.claude/skills/ui-ux-pro-max/SKILL.md Doğrulama sırasında kaydedilen içerik sağlama toplamı; commit 7f69fed
License
MIT LICENSE dosyasından.
Repository yıldızları
127.450 Bu katalogda 7 skill içeren nextlevelbuilder/ui-ux-pro-max-skill deposunun tamamı için 2026-09-14 tarihinde alınan GitHub görüntüsü. ui-ux-pro-max için bir derecelendirme veya kullanım sayısı değildir.
OpenDesign tarafından doğrulandı
2026-09-14 Kaynak dosya, yol, lisans metni ve yıldız sayısı kontrol edildi. OpenDesign ana sürümünde paketlenmiştir (2026-08-28 tarihinde kontrol edildi); bu sayfada canlı bir çalıştırma kaydı bulunmamaktadır.

SKILL.md içinde

  1. Ne Zaman UygulanırUI yapısı, görsel tasarım, etkileşim, UX kalitesi için kullanın. Backend, API, altyapı için atlayın.
  2. Önceliğe Göre Kural KategorileriErişilebilirlik'ten (KRİTİK) Grafikler'e (DÜŞÜK) kadar önemli kontroller ve anti-pattern'lerle 10 kategori
  3. Arama Aracını Çalıştırmasearch.py'yi skill dizininden tam yolla çağırın. Python 3.x gerektirir, harici bağımlılık yoktur.
  4. Sorgu SözleşmesiEn küçük arama modunu seçin. Bir baskın niyet, 2-5 terim, domain/uyumu doğrulayın, boşsa bir kez yeniden deneyin.
  5. Adım 1: Kullanıcı Gereksinimlerini Analiz EdinÜrün tipini, kitleyi, stil anahtar kelimelerini çıkarın ve yığını package.json veya eşdeğerinden tespit edin.
  6. Adım 2: Tasarım Sistemi OluşturunYeni sayfalar/projeler için --design-system kullanın. Ürün/stil/renk/landing/tipografi eşleşmelerini toplar.
  7. Adım 2b: Tasarım Sistemini Kalıcı Hale GetirinMASTER.md yazmak için --persist ve --output-dir ekleyin. --force ile yetkilendirilmedikçe mevcut Master atlanır.
  8. Adım 2c: Tasarım Kadranları--design-system çıkışını ayarlamak için varyans, hareket, yoğunluk için isteğe bağlı 1-10 kaydırıcılar.
  9. Adım 3: Detaylı Aramalarla TamamlayınÜrün, stil, renk, tipografi, google-fonts, chart, ux, landing, icons, gsap, react, web domainlerini sorgulayın.
  10. 4. Adım: Yığın KılavuzlarıUygulamaya özgü rehberlik için tespit edilen yığınla --stack kullanın. 22 yığın mevcut.
  11. Bir arama 0 sonuç döndürürseSorguyu daraltarak bir kez daha deneyin. Hâlâ boşsa öncelik tablosuna geri dönün ve kullanıcıya bildirin.
  12. Daha İyi Sonuçlar İçin İpuçlarıSorgu başına tek amaç, 2-5 terim. Bir kez yeniden deneyin. Yeni için --design-system, odaklı için --domain kullanın.
Skill'in Kendi Açıklaması
"Web, mobil ve masaüstü için UI/UX tasarım zekası. Bu skill, sayfalar, bileşenler, tasarım sistemleri, erişilebilirlik, etkileşim, duyarlı düzen, tipografi, renk, grafikler ve yığın-spesifik UI uygulaması dahil olmak üzere arayüzleri tasarlarken, oluştururken, incelerken veya düzeltirken kullanılmalıdır. Aranabilir yerel veri: 79 aranabilir stil (50 aktif), 192 ürün paleti ve akıl yürütme profili, 74 yazı tipi eşleştirmesi, 119 UX yönergesi, 105 ikon, 17 GSAP öntanımı, 25 grafik türü ve 22 yığın."

SKILL.md'den ön bilgi açıklaması. Tam dosya yaklaşık 15.922 karakterdir. Tam dosyayı GitHub'da okuyun.

06 Kurmadan önce

ui-ux-pro-max Skill Hakkında Sorular

Yanıtlar, 2026-09-14 tarihinde okunan SKILL.md üzerinden alınmıştır, kaydedilmiş bir çalıştırmadan değil.

Skill'in çalışması için ne gerekir?

Arama betiği, harici bağımlılık olmadan Python 3.x gerektirir. python, python3 veya py -3 kullanılarak skill dizininden tam yoluyla çağrılmalıdır. Python eksikse README kurulum talimatlarını içerir.

Belirli bir sayfa için tasarım sistemini nasıl geçersiz kılarım?

design-system/project-slug/pages/page-name.md dosyasını oluşturmak için kalıcı hale getirirken --page "page-name" iletin. Ajan bu sayfayı oluştururken önce MASTER.md'yi okur, ardından pages/page-name.md dosyasının var olup olmadığını kontrol eder. Varsa kuralları Master'ı geçersiz kılar. Yoksa yalnızca Master kuralları kullanılır.

UI UX Pro Max

ui-ux-pro-max'i Gerçek Bir UI Tasarım Görevinde Çalıştırın.

ui-ux-pro-max skill'i OpenDesign içinde gelir. Uygulamayı indirin, Plugins → Skills'te skill'i seçin, yukarıdaki prompt'u yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirinTüm skill'lere göz atın
Terminal
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max