⚠️ Sebelum Install Skill Ini
Skill ini butuh Claude Code terinstall duluan di komputermu. Claude Code berbeda dari Claude.ai yang kamu buka di browser. Ini versi yang jalan di terminal.
Langkah 1: Pastikan Node.js sudah ada
Buka terminal dulu:
- Mac: Tekan Cmd+Space → ketik "Terminal" → Enter
- Windows: Tekan Win+R → ketik "cmd" → Enter Lalu ketik perintah ini dan tekan Enter:
node --version
Kalau muncul angka seperti v20.0.0, Node.js sudah ada. Kalau muncul error, download Node.js dulu di https://nodejs.org. Pilih versi LTS.
Langkah 2: Install Claude Code
Masih di terminal yang sama, ketik:
npm install -g @anthropic-ai/claude-code
Tunggu sampai selesai. Biasanya 1–2 menit.
Langkah 3: Cek apakah berhasil
claude --version
Kalau muncul angka versi, Claude Code sudah siap. Kalau error, coba tutup terminal dan buka lagi, lalu ulangi perintah ini.
Langkah 4: Login
claude
Ikuti instruksi login yang muncul di layar. Kamu perlu akun Anthropic (bisa daftar gratis di https://claude.ai).
Apa itu UI-UX Pro Max Skill?
UI-UX Pro Max adalah skill untuk Claude Code buatan komunitas yang punya 97.000+ stars di GitHub. Kalau biasanya Claude output desain yang generik (Inter font, gradient ungu, layout kartu seragam), skill ini mengubah itu. Claude jadi punya database desain yang bisa dicari: 50+ gaya UI, 97 palet warna, 57 pasangan font, 99 UX guidelines, dan 25 jenis chart. Fitur terkuat: Design System Generator. Kamu bilang "fintech dashboard" atau "wellness spa", skill langsung generate sistem desain lengkap yang sesuai industri itu.
Kegunaan
- Bikin landing page produk digital yang tidak kelihatan seperti template AI
- Generate design system untuk Next.js, React, Flutter, SwiftUI, shadcn/ui
- Audit UI yang sudah ada dan perbaiki anti-pattern
- Bikin dashboard dengan sistem warna dan tipografi yang konsisten
Cara Install — 3 Pilihan
📁 Pilihan 1: Download ZIP dari GitHub (paling mudah, tidak perlu paham terminal)
Langkah 1. Buka https://github.com/nextlevelbuilder/ui-ux-pro-max-skill di browser kamu
Langkah 2. Cari tombol hijau bertuliskan "Code" di kanan atas halaman, klik tombol itu
Langkah 3. Klik "Download ZIP" dari menu yang muncul. File akan terdownload ke folder Downloads kamu
Langkah 4. Buka folder Downloads, cari file ZIP yang baru didownload, lalu extract (klik kanan → Extract All di Windows, atau double-click di Mac)
Langkah 5. Pindahkan folder hasil extract ke folder skills Claude Code:
- Mac: Buka Finder → klik menu Go → Go to Folder → ketik
~/.claude/skills/→ klik Go → pindahkan folder ke sini - Windows: Buka File Explorer → klik address bar di atas → ketik
%USERPROFILE%\.claude\skills\→ Enter → pindahkan folder ke sini
Langkah 6. Rename foldernya jadi ui-ux-pro-max-skill (hapus teks "-main" di akhir nama folder kalau ada)
Langkah 7. Buka Claude Code di terminal dengan ketik claude, lalu coba prompt desain apapun. Skill aktif otomatis.
⚡ Pilihan 2: Via npm CLI (lebih cepat, perlu terminal)
Buka terminal, ketik satu per satu dan tekan Enter setelah masing-masing:
npm install -g ui-ux-pro-max-cli
Tunggu sampai selesai, lalu arahkan ke folder proyekmu:
cd /folder-proyekmu
Ganti /folder-proyekmu dengan lokasi folder projekmu. Contoh Mac: cd ~/Desktop/proyekku. Contoh Windows: cd C:\Users\namamu\Desktop\proyekku
Lalu jalankan:
uipro init --ai claude
Untuk install global supaya berlaku di semua proyek (tidak perlu ulangi tiap proyek baru):
uipro init --ai claude --global
Catatan penting: Python 3 harus terinstall. Cek dengan:
python3 --version. Kalau error, download di https://python.org
🏪 Pilihan 3: Via Claude Marketplace (perlu Claude Code Pro)
Buka Claude Code di terminal, lalu ketik:
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
Tekan Enter dan tunggu konfirmasi install selesai.
✅ Cara Verifikasi Install Berhasil
Buka Claude Code, ketik prompt ini:
Bikin landing page sederhana. Pakai UI-UX Pro Max skill.
Kalau skill aktif, Claude akan mulai dengan analisis desain yang detail sebelum nulis kode, bukan langsung lempar kode HTML generik.
Cara Pakai
Skill aktif otomatis saat kamu minta task UI/UX. Tidak perlu command khusus.
Contoh prompt:
Bikin landing page untuk SaaS productivity tool, target profesional 25-40 tahun, stack Next.js + Tailwind.
Desain dashboard analytics untuk aplikasi keuangan, dark mode, pakai shadcn/ui.
Skill akan otomatis analisis kebutuhan, generate design system, dan tulis kode dengan best practice UI/UX bawaan.
Contoh Output Design System Generator
Kamu input: "luxury wellness spa website"
Output skill:
TARGET: Serenity Spa
PATTERN: Hero-Centric + Social Proof
Conversion: Emotion-driven dengan trust elements
Color: Sage green #8FAF8F + Warm cream #F9F5EF
Font: Cormorant Garamond (heading) + Jost (body)
Spacing: Generous whitespace, 80px section gap
Link GitHub: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill