⚠️ Sebelum Install Skill Ini
Skill ini butuh Claude Code terinstall duluan. Claude Code berbeda dari Claude.ai di browser. Ini versi yang jalan di terminal.
Langkah 1: Buka terminal
- Mac: Cmd+Space → ketik "Terminal" → Enter
- Windows: Win+R → ketik "cmd" → Enter
Langkah 2: Cek Node.js
node --version
Kalau error, download di https://nodejs.org (pilih LTS).
Langkah 3: Install Claude Code
npm install -g @anthropic-ai/claude-code
Langkah 4: Login
claude
Ikuti instruksi login. Perlu akun Anthropic (gratis di https://claude.ai).
Apa itu Frontend Design Skill?
Ini skill resmi dari Anthropic, bukan buatan komunitas. Sudah ada 277.000+ instalasi dan di-update Februari 2026. Masalah yang dipecahkan: setiap developer yang pakai Claude Code pernah dapat output yang sama. Inter font, gradient ungu di atas putih, layout kartu dengan rounded corner, animasi minimal. Anthropic menyebutnya "distributive convergence": model mereproduksi pusat statistik dari keputusan desain. Skill ini dibuat khusus untuk memecah itu.
Yang Dilarang Skill Ini
Skill ini punya daftar larangan eksplisit yang Claude harus ikuti:
- Font yang dilarang: Inter, Roboto, Arial, dan Space Grotesk. Semua dicap "overused by AI"
- Warna yang dilarang: Gradient ungu generik di atas background putih
- Layout yang dilarang: Grid kartu seragam dengan rounded corner yang sama
- Animasi yang dilarang: Motion yang tidak punya dampak nyata
Yang Diarahkan Skill Ini
- Tipografi bold dengan karakter editorial kuat
- Palet warna via CSS variables, tidak ada warna hardcoded
- Layout asimetris dan komposisi yang tidak terduga
- Animasi intentional, hanya di tempat yang punya dampak
- Detail visual: gradients, texture, pattern dengan tujuan
Cara Install — 2 Pilihan
Skill ini resmi dari Anthropic, jadi tidak ada repo GitHub untuk di-ZIP. Install via dua cara ini:
⚡ Pilihan 1: Via Claude Code Marketplace (direkomendasikan)
Buka terminal, jalankan Claude Code:
claude
Setelah masuk, ketik perintah ini di dalam Claude Code:
/plugin marketplace add anthropics/skills
Tunggu selesai, lalu aktifkan skill frontend-design:
/plugin install frontend-design
Skill langsung aktif di semua session.
⚡ Pilihan 2: Via npx
Ketik di terminal:
npx skills add anthropics/claude-code --skill frontend-design
✅ Cara Verifikasi Install Berhasil
Ketik di Claude Code:
Bikin landing page untuk startup saya. Jangan pakai Inter atau gradient ungu.
Kalau Claude mulai dengan analisis estetika sebelum nulis kode (bukan langsung output HTML), skill sudah aktif.
Catatan: Skill ini melarang Space Grotesk. Kalau brand kamu pakai Space Grotesk, sebutkan eksplisit di setiap prompt.
Cara Pakai
Skill aktif otomatis saat kamu minta task frontend. Sebelum nulis kode, Claude akan berpikir melalui 4 dimensi:
- Purpose: siapa yang pakai ini dan kenapa?
- Tone: pilih arah estetika spesifik
- Constraints: framework, performa, aksesibilitas
- Differentiation: apa yang bikin interface ini berbeda?
Contoh prompt:
Bikin landing page untuk tool AI writing assistant.
Target: freelancer dan content creator.
Bukan SaaS enterprise.
Desain halaman pricing untuk aplikasi musik.
Karakter: playful tapi tetap premium.
Catatan Penting
Skill ini secara eksplisit melarang Space Grotesk karena dianggap sudah terlalu overused oleh AI. Kalau kamu butuh Space Grotesk untuk brand kamu, sebutkan secara eksplisit di prompt.
Link GitHub: https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design