UI UX Pro Max skill

UI/UX dizayn bo'yicha AI skill: loyiha uchun to'liq dizayn tizimi, uslub, ranglar va shriftlarni qidiradi va yaratadi. MIT litsenziya.

DizaynClaude CodeCursorWindsurfAntigravityGitHub CopilotKiroCodex CLIQoderRoo CodeGemini CLITraeOpenCodeContinueMITPython★ 147 677

Tezkor o'rnatish

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

Terminalda ishga tushiring. npx uchun Node.js kerak. Boshqa usullar quyidagi qo'llanmada.

UI UX Pro Max nima

UI UX Pro Max — veb, mobil va desktop interfeyslar uchun dizayn bo'yicha maslahat beradigan AI skill. U mahsulot turiga qarab mos uslub, rang palitrasi, shrift juftligi, sahifa strukturasi va anti-patternlarni tanlab, to'liq dizayn tizimini yaratadi. Frontend dasturchilar va interfeys yaratayotgan dizaynerlarga kerak. Litsenziya: MIT.

README bo'yicha ichida 80 ta qidiriladigan uslub (51 tasi faol), 192 ta rang palitrasi va mahsulot turi, 74 ta shrift juftligi, 120 ta UX qoidasi, 25 ta diagramma turi va 22 ta texnologiya stegi bor.

O'rnatish

Usul Buyruq Natija
Claude Marketplace /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill va /plugin install ui-ux-pro-max@ui-ux-pro-max-skill Claude Code'ga plagin o'rnatiladi
CLI (tavsiya etiladi) npm install -g ui-ux-pro-max-cli, so'ng loyiha papkasida uipro init --ai claude Skill fayllari loyihaga o'rnatiladi
Global uipro init --ai claude --global ~/.claude/skills/ ga o'rnatiladi

--ai qiymatlari: claude, cursor, windsurf, antigravity, copilot, kiro, codex, qoder, roocode, gemini, trae, opencode, continue va boshqalar; all — hammasi uchun.

Boshqa CLI buyruqlari: uipro versions, uipro update, uipro init --dry-run (fayl yozmasdan ko'rish), uipro uninstall.

Talab: qidiruv skripti uchun Python 3.x (faqat standart kutubxona; hech narsa o'rnatmaydi va tarmoqqa chiqmaydi). Tekshirish: python3 --version. Python yo'q bo'lsa, uni o'zingiz o'rnatasiz — AI agent dasturiy ta'minot o'rnatmasligi kerak.

Ish jarayoni

  1. UI/UX vazifasini so'raysiz (yaratish, dizayn, tekshirish, tuzatish).
  2. Skill mahsulot turi, uslub, rang, sahifa naqshi va tipografiya bo'yicha qidiradi.
  3. Qoidalar mexanizmi sohaga mos dizayn tizimini va qochish kerak bo'lgan anti-patternlarni chiqaradi.
  4. AI kodni shu ranglar, shriftlar va oraliqlar bilan yozadi.
  5. Yetkazishdan oldin tekshiruv ro'yxati bo'yicha (kontrast, fokus holati, responsivlik va h.k.) tekshiradi.

Rejimlar: Claude Code, Cursor, Windsurf, Codex CLI, Gemini CLI, Copilot va boshqalarda skill o'zi ishga tushadi. Kiro, Roo Code va KiloCode'da slash-buyruq ishlatiladi: /ui-ux-pro-max <so'rov>. Trae'da avval SOLO rejimiga o'ting.

Qo'shimcha skill'lar

Repoda boshqa skill'lar ham bor:

Skill Nima uchun
banner-design Ijtimoiy tarmoq, reklama, sayt hero va bosma bannerlar (HTML/CSS, PNG eksport)
brand Brend ovozi, vizual identika, brend izchilligi
design-system Token arxitekturasi (primitive → semantic → component), slaydlar
slides Chart.js bilan strategik HTML taqdimotlar
ui-styling shadcn/ui va Tailwind CSS bilan komponentlar
design Yuqoridagilarni birlashtiruvchi umumiy skill (logo, CIP, ikonka va h.k.)

Amaliy misol

Qidiruv skriptini to'g'ridan-to'g'ri ishga tushirish:

# Dizayn tizimini yaratish
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"

# Markdown formatida
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech banking" --design-system -f markdown

# Aniq soha bo'yicha qidiruv
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "glassmorphism" --domain style

# Stekka xos qoidalar
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "form validation" --stack react

Dizayn tizimini sessiyalar o'rtasida saqlash:

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp"

Bu design-system/myapp/MASTER.md faylini yaratadi. --page "dashboard" qo'shsangiz, pages/dashboard.md fayli ham yaratiladi. Sahifa fayli bo'lsa, u MASTER qoidalarini bekor qiladi.

Mavjud ilovaga mavzu qo'llash uchun AI'ga shunday deng: «Use the ui-ux-pro-max skill to retheme my existing React app. Target style: Minimalism & Swiss Style.» Oldin mavjud tokenlar va komponentlarni tekshirishni, mantiqni o'zgartirmaslikni ayting.

Oddiy so'rov misollari: Build a landing page for my SaaS product, Create a dashboard for healthcare analytics.

Cheklovlar va maslahatlar

  • Skill sof backend, API/ma'lumotlar bazasi va DevOps vazifalari uchun emas — faqat ko'rinish va interaksiyaga tegishli ishlar uchun.
  • Qidiruv natijalari faqat maslahat beradi, ilovangizni o'zi qayta yozmaydi.
  • Mavzu almashtirishda tokenlarni o'zgartirishning o'zi yetmaydi: qattiq yozilgan qiymatlarni komponentlarda bosqichma-bosqich tokenlarga almashtiring.
  • --rtl faqat --domain style yoki --domain product bilan ishlaydi; --design-system va --stack bilan ishlatib bo'lmaydi.
  • Continue uchun yo'lda .claude/skills/ o'rniga .continue/skills/ ishlating (Droid uchun .factory/skills/, ZCode uchun .zcode/skills/).
  • npm paketi ui-ux-pro-max-cli; eski uipro-cli versiyalaridan foydalanmang.
  • README'ga ko'ra, premium versiya brend identika, logo va boshqa qo'shimcha imkoniyatlarni beradi; bu repo — ochiq bazaviy versiya.

Manba

https://github.com/nextlevelbuilder/ui-ux-pro-max-skill