Taste Skill: Kasih Claude Selera Desain yang Tajam

⚠️ 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:

bash

node --version

Kalau muncul angka versi, Node.js sudah ada. Kalau error, download di https://nodejs.org (pilih LTS).

Langkah 2: Install Claude Code

bash

npm install -g @anthropic-ai/claude-code

Langkah 3: Cek berhasil

bash

claude --version

Langkah 4: Login

bash

claude

Ikuti instruksi login. Perlu akun Anthropic (daftar gratis di https://claude.ai).

Apa itu Taste Skill?

Tagline-nya jujur: "stops the AI from generating boring, generic slop." Ini bukan satu skill tapi suite 11 skill spesialis plus 3 skill image generation. Dibuat oleh Leonxlnx, sekarang punya 51.000+ stars di GitHub. Yang bikin beda: Taste Skill pakai sistem 3 parameter seperti equalizer audio:

DESIGN_VARIANCE (1-10): Skala 1 = layout centered bersih. Skala 10 = komposisi asimetris dan modern.
MOTION_INTENSITY (1-10): Skala 1 = hover sederhana. Skala 10 = animasi magnetic scroll-triggered.
VISUAL_DENSITY (1-10): Skala 1 = spacing mewah. Skala 10 = dashboard padat. Atur tiga angka ini, karakter output desain Claude langsung berubah.

Kegunaan

Landing page dengan gaya visual distinctive: glassmorphism, brutalism, claymorphism, soft UI
Redesign UI yang ada dengan fitur audit khusus
Portfolio dan marketing page yang tidak kelihatan template AI
Referensi board untuk handoff ke developer

Cara Install — 3 Pilihan

📁 Pilihan 1: Download ZIP dari GitHub (paling mudah)

Langkah 1. Buka https://github.com/Leonxlnx/taste-skill di browser

Langkah 2. Klik tombol hijau "Code" di kanan atas halaman

Langkah 3. Klik "Download ZIP"

Langkah 4. Extract file ZIP yang terdownload

Langkah 5. Pindahkan folder ke:

Mac: ~/.claude/skills/ (Finder → Go → Go to Folder → ketik path ini)
Windows: %USERPROFILE%\.claude\skills\ (ketik di address bar File Explorer)

Langkah 6. Rename folder jadi taste-skill

Langkah 7. Buka Claude Code (claude di terminal), skill aktif otomatis.

⚡ Pilihan 2: Via npx (perlu terminal)

Install default (direkomendasikan untuk pemula):

bash

npx skills add https://github.com/Leonxlnx/taste-skill

Install varian spesifik (kalau sudah tahu mana yang cocok):

bash

# Untuk premium portfolio
npx skills add https://github.com/Leonxlnx/taste-skill --skill "elite-frontend-design-2026"

# Untuk UI kalem dan banyak whitespace
npx skills add https://github.com/Leonxlnx/taste-skill --skill "soft-skill"

# Untuk audit dan redesign UI yang sudah ada
npx skills add https://github.com/Leonxlnx/taste-skill --skill "redesign-skill"

✅ Cara Verifikasi Install Berhasil

Buka Claude Code, ketik:

javascript

Bikin landing page simple. DESIGN_VARIANCE: 7, MOTION_INTENSITY: 3, VISUAL_DENSITY: 4.

Kalau Claude langsung pakai tiga parameter itu dalam outputnya, skill sudah aktif.

Daftar 11 Varian

Skill	Kegunaan
`design-taste-frontend`	Default. Output premium tanpa gaya memaksa
`elite-frontend-design-2026`	Tipografi agresif, portfolio premium
`redesign-skill`	Audit dan perbaiki UI yang sudah ada
`soft-skill`	UI kalem, kontras lembut, banyak whitespace
`minimalist-skill`	Editorial bersih ala Notion atau Linear
`bugbuster`	Deteksi dan fix masalah visual hierarchy + contrast
`image-to-code-skill`	Generate referensi visual dulu, lalu kode
`imagegen-frontend-web`	Referensi board web untuk handoff
`imagegen-frontend-mobile`	Referensi board mobile screen
`brandkit`	Brand identity board

Cara Pakai

Skill aktif otomatis. Bisa sebutkan parameter secara eksplisit:

javascript

Bikin landing page untuk SaaS project management tool.
DESIGN_VARIANCE: 7, MOTION_INTENSITY: 4, VISUAL_DENSITY: 3.
Stack React + Tailwind.

javascript

Redesign halaman pricing ini. Audit dulu masalahnya, baru perbaiki.

3 Aturan yang Selalu Ditegakkan

Satu aksen warna di seluruh halaman
Satu sistem border-radius per halaman
Satu mode warna, tidak ada flip di tengah halaman

Link GitHub: https://github.com/Leonxlnx/taste-skill Website: https://www.tasteskill.dev