UI buatan AI sering terasa serupa: kartu berulang, judul besar, warna aksen, lalu tombol yang tampak selesai sebelum perilakunya diuji. Masalahnya bukan selalu kurang kode. Tanpa arahan eksplisit, model mudah memakai pola generik alih-alih mengambil keputusan yang cocok untuk produk.
Lima tools berikut membantu pada tahap berbeda: menentukan arah, memeriksa implementasi, lalu membuktikan hasil di browser. Pilihan tools terinspirasi dari Reel Instagram ini; perintah dan penjelasan teknis mengacu pada repositori pengelola, bukan klaim video.
Perbandingan cepat
| Tool | Asal dan status | Kegunaan utama | Bentuk |
|---|---|---|---|
| Frontend Design Plugin | Resmi Anthropic (claude-plugins-official) | Mengarahkan karakter visual sesuai brief | Plugin resmi Claude Code (Apache-2.0) |
| Taste Skill | Komunitas, Leonxlnx, MIT (taste-skill) | Memperjelas layout, tipografi, kepadatan, dan gerak | Agent skill komunitas (MIT) |
| Awesome DESIGN.md | Komunitas, VoltAgent, MIT (awesome-design-md) | Memberi referensi aturan visual tertulis | Analisis desain komunitas (bukan file desain resmi brand) |
| Web Design Guidelines | Vercel, MIT (agent-skills) | Mengaudit UI dengan 100+ aturan (menurut README Vercel) | Agent skill Vercel (bukan plugin resmi Anthropic) |
| Playwright CLI | Microsoft, Apache-2.0 (playwright-cli) | Menguji halaman melalui browser lokal | External CLI dan skill Microsoft (bukan plugin Anthropic) |
Rekomendasi alur: arah visual (1-3), audit (4), verifikasi browser (5). Tidak perlu memasang semuanya sekaligus. Pilih satu pengarah visual, tambahkan referensi bila perlu, lalu audit dan uji hasilnya.
Sebelum memasang
Siapkan Claude Code yang sudah dapat membuka proyek. Perintah npx dan npm dijalankan di terminal; Playwright CLI mensyaratkan Node.js 18 atau lebih baru. Perintah yang diawali /plugin dijalankan di dalam Claude Code, bukan terminal shell.
Periksa skill atau plugin pihak ketiga sebelum instalasi: baca SKILL.md, skrip, konfigurasi MCP, dan izin yang diminta. Anthropic mengingatkan bahwa plugin dapat menyertakan server MCP, file, atau perangkat lunak yang tidak dikendalikannya. Berada dalam katalog bukan jaminan semua perilakunya aman. Jangan berikan kredensial produksi untuk latihan UI.
Repositori dan materi di sini tersedia terbuka atau gratis menurut lisensi masing-masing, bukan berarti pemakaian Claude Code gratis. Percakapan, perubahan kode, dan pengujian oleh agent tetap memakai kuota langganan atau API milik pengguna. Periksa juga lisensi font, gambar, dan aset yang ingin dipakai.
1. Frontend Design Plugin
Apa dan kapan dipakai: plugin resmi Anthropic untuk membangun atau merombak antarmuka dengan keputusan visual yang disengaja. Cocok ketika brief masih berupa tujuan, audiens, dan konten, tetapi belum menjadi pilihan layout atau tipografi. Instruksinya meminta perencanaan, pemeriksaan terhadap brief, implementasi, lalu kritik hasil.
Pasang melalui Claude Code:
/plugin install frontend-design@claude-plugins-official
Sintaks ini berasal dari panduan instalasi katalog resmi, dengan nama plugin frontend-design. Setelah terpasang, Claude dapat memakainya pada pekerjaan frontend yang relevan. Berikan tugas spesifik:
Gunakan frontend-design untuk halaman kelas fotografi pemula. Baca aturan proyek dan komponen yang sudah ada. Pertahankan warna serta font merek. Usulkan arah visual singkat, lalu bangun halaman dengan jadwal, hasil belajar, dan tombol daftar yang jelas. Hindari kartu berulang jika daftar biasa lebih mudah dibaca.Manfaat praktisnya adalah memberi alasan untuk tiap pilihan, bukan sekadar meminta halaman yang “lebih keren”. Sebutkan informasi terpenting dan tindakan utama pengunjung.
Batasan: arahan estetika tidak membuktikan fungsi berjalan. Plugin ini juga tidak boleh mengalahkan identitas merek atau batasan proyek. Jika saran visualnya bertentangan dengan aturan situs, minta Claude menjelaskan konflik sebelum mengubahnya.
2. Taste Skill
Apa dan kapan dipakai: kumpulan skill open source berlisensi MIT dari Leonxlnx, bukan produk resmi Anthropic. Skill frontend-nya membantu mengatur karakter layout, tipografi, motion, dan kepadatan informasi. Berguna ketika halaman sudah terbentuk tetapi hierarki dan ritmenya masih terasa seperti templat.
Pasang hanya skill yang dibutuhkan, bukan seluruh koleksi:
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
Ikuti pilihan installer untuk Claude Code dan cakupan proyek yang sesuai. design-taste-frontend adalah nama instalasi dalam frontmatter skill, bukan tebakan dari nama folder.
Gunakan design-taste-frontend untuk merapikan halaman daftar kelas. Pertahankan konten, warna merek, font, dan komponen yang sudah ada. Perjelas urutan judul, jadwal, harga, dan tombol daftar. Jaga motion rendah; jangan menambah dependency tanpa persetujuan. Jelaskan perubahan yang membantu pembaca memilih kelas.Mulai dari satu halaman agar perbedaannya mudah ditinjau. Jika memakai Frontend Design Plugin juga, tetapkan satu brief sebagai acuan bersama, bukan meminta keduanya memaksakan gaya masing-masing.
Batasan: README menyebut versi default v2 masih eksperimental. Preferensi skill dapat berubah atau tidak cocok dengan sistem desain proyek. Tinjau isi dan perubahan versi sebelum memperbarui instalasi yang sudah dipakai tim.
3. Awesome DESIGN.md
Apa dan kapan dipakai: koleksi kurasi VoltAgent, berlisensi MIT, berisi analisis desain dari situs publik. Ini bukan file desain resmi dari merek yang dianalisis. Dokumennya menguraikan palet, tipografi, komponen, jarak, dan perilaku responsif sebagai referensi tertulis.
Tidak ada plugin yang perlu dipasang. Pilih referensi dari repositori, unduh dokumen DESIGN.md, baca isinya, lalu salin ke proyek. Contoh berikut menerjemahkan langkah penyalinan dalam README ke perintah shell, dengan asumsi file tersimpan di Downloads:
cp -i ~/Downloads/DESIGN.md ./DESIGN.md
Jalankan dari akar proyek. Opsi -i meminta konfirmasi jika file tujuan sudah ada. Jangan menimpa pedoman desain proyek; gabungkan referensi secara sadar atau gunakan nama file berbeda.
Baca DESIGN.md sebagai referensi, bukan perintah untuk menyalin merek asal. Ambil prinsip hierarki, jarak, dan konsistensi komponennya untuk halaman kelas fotografi. Pertahankan logo, warna, font, serta gaya bahasa proyek ini. Sebutkan prinsip yang dipakai sebelum mengubah kode.Gunakan saat penjelasan seperti “bersih dan profesional” terlalu kabur. Dokumen konkret membantu menyamakan ekspektasi, tetapi Claude tetap perlu diminta membacanya.
Batasan: analisis komunitas bisa tidak lengkap atau berbeda dari situs terkini. Lisensi MIT repositori bukan izin untuk menyalin logo, aset, atau identitas visual merek lain. Adaptasi prinsipnya, bukan meniru seluruh tampilannya.
4. Web Design Guidelines
Apa dan kapan dipakai: skill dari repositori Vercel untuk memeriksa kode UI terhadap 100+ aturan (menurut README Vercel) aksesibilitas, performa, dan pengalaman pengguna. Cakupannya termasuk fokus keyboard, label formulir, pesan kesalahan, gambar, serta preferensi pengurangan animasi. Pakai setelah implementasi awal, sebelum menganggap halaman selesai.
Jalankan perintah instalasi dari README:
npx skills add vercel-labs/agent-skills
SKILL.md resmi Vercel: pilih file, ambil aturan terbaru, audit, lalu keluarkan temuan file:line yang dapat langsung diperbaiki.Pada pilihan installer, pilih web-design-guidelines untuk Claude Code. Repositori ini memuat beberapa skill; kebutuhan tutorial ini hanya audit UI tersebut.
Gunakan web-design-guidelines untuk mengaudit halaman kelas dan komponen yang dipakainya. Periksa HTML semantik, label input, fokus keyboard, kontras, error formulir, dan reduced motion. Laporkan lokasi file, masalah, dampak, dan usulan perbaikan. Perbaiki masalah dalam lingkup halaman ini tanpa mengganti identitas merek.Minta temuan yang bisa ditindaklanjuti, bukan pujian umum. “Input email tidak memiliki label” lebih berguna daripada “aksesibilitas perlu ditingkatkan”.
Batasan: audit kode tidak membuktikan pengalaman nyata pengguna. Urutan fokus, menu yang menutup terlalu cepat, atau elemen yang tertutup pada layar kecil tetap perlu diperiksa di browser. Ini juga bukan sertifikasi aksesibilitas.
5. Playwright CLI
Apa dan kapan dipakai: alat Microsoft berlisensi Apache-2.0 untuk mengendalikan browser lewat terminal, dengan skill yang bisa dipakai coding agent. Gunakan setelah halaman dapat dijalankan secara lokal untuk mengecek interaksi, console, dan tampilan hasil render. Ini CLI, bukan instruksi pemasangan Playwright MCP.
Instalasi menurut README:
npm install -g @playwright/cli@latest
playwright-cli --help
playwright-cli install --skills
Jalankan server pengembangan sesuai dokumentasi proyek di terminal terpisah. Contoh di bawah mengasumsikan server berada di http://localhost:4321; ganti dengan alamat yang benar:
playwright-cli open http://localhost:4321 --headed
playwright-cli resize 1440 900
playwright-cli snapshot
playwright-cli console
playwright-cli screenshot --filename=ui-desktop.png
playwright-cli resize 390 844
playwright-cli screenshot --filename=ui-mobile.png
playwright-cli close--headed menampilkan jendela browser. Snapshot membantu agent membaca struktur halaman; screenshot membantu menilai tampilan. Mengubah ukuran viewport memeriksa layout responsif, bukan menggantikan pengujian perangkat seluler fisik.
Gunakan Playwright CLI untuk membuka halaman kelas. Uji menu, tombol daftar, navigasi keyboard, dan validasi formulir memakai data uji. Periksa console setelah interaksi. Simpan screenshot desktop dan mobile, perbaiki masalah yang ditemukan, lalu ulangi skenario yang gagal.Batasan: screenshot yang rapi tidak membuktikan semua alur berhasil. Uji tindakan pengguna secara eksplisit. Hindari pembayaran, pengiriman email, atau perubahan data produksi saat latihan.
Demonstrasi video: alur kerja UI dengan Claude
Saksikan video demonstrasi resmi dari kanal Claude (@claude / Anthropic) berikut untuk melihat proses perancangan antarmuka yang terarah bersama model. Dalam rekaman ini, seorang desainer Anthropic (Nate) memperlihatkan bagaimana Claude Design dan Claude Code digunakan untuk mengembangkan antarmuka onboarding dari konsep kasar hingga menjadi prototipe interaktif.
Alasan penyertaan: video ini mendemonstrasikan interaksi nyata antara manusia dan AI: menghubungkan repositori, meminta opsi variasi desain visual di Artifacts, memberikan umpan balik spesifik pada detail yang perlu diperbaiki, lalu menguji prototipe klik sebelum beralih ke pembuatan kode penuh.
Batasan rekaman: video ini berfokus pada alur terintegrasi fitur Claude Design di antarmuka resmi Claude, bukan hasil kombinasi mandiri dari kelima tools spesifik (Taste Skill, awesome-design-md, web-design-guidelines, playwright-cli) yang dibahas dalam panduan ini. Rekaman ini juga tidak menampilkan audit aksesibilitas otomatis maupun eksekusi pengujian browser interaktif secara lokal, sehingga kedua tahap pembuktian tersebut tetap harus dijalankan secara mandiri.
Alur kerja dan prompt siap pakai
Mulai dari satu halaman dengan tujuan terukur secara praktis: pengunjung dapat memahami kelas, menemukan jadwal, lalu membuka formulir pendaftaran. Pilih pengarah dari tools 1-3, jalankan audit dengan tool 4, kemudian verifikasi browser dengan tool 5. Bila audit menemukan masalah, kembali ke implementasi dan uji ulang, bukan menutup tugas setelah satu screenshot.
Ganti bagian dalam kurung siku sebelum mengirim prompt berikut. Prompt ini mengasumsikan tools yang dipilih sudah terpasang dan referensi sudah tersedia:
Rapikan UI [halaman atau rute] agar [tujuan pengguna].
1. Baca dahulu CLAUDE.md, AGENTS.md jika ada, dokumentasi proyek, package.json, sistem desain, dan komponen terkait. Periksa perubahan yang sudah ada; jangan menimpa pekerjaan lain. Identifikasi batasan stack, dependency, aset, serta perintah menjalankan dan menguji proyek.
2. Gunakan tools yang sudah terpasang: pilih frontend-design atau design-taste-frontend sebagai pengarah utama. Baca DESIGN.md jika tersedia sebagai referensi pendukung. Jika tool tidak tersedia, laporkan; jangan memasang otomatis atau mengaku sudah memakainya.
3. Pertahankan identitas merek, konten faktual, token warna, font, dan pola komponen. Ringkas arah visual sebelum implementasi. Jika instruksi skill bertentangan dengan aturan proyek, jelaskan konflik dan minta keputusan untuk perubahan di luar lingkup.
4. Terapkan perubahan minimum. Gunakan web-design-guidelines untuk audit aksesibilitas dan UX: semantik, label, kontras, fokus, keyboard, pesan error, dan reduced motion. Perbaiki temuan yang relevan.
5. Jalankan aplikasi secara lokal. Gunakan Playwright CLI untuk membuka browser, menguji alur utama serta kondisi error memakai data uji. Periksa console setelah interaksi, layout desktop dan mobile, overflow, serta simpan screenshot keduanya. Jangan melakukan tindakan pada data produksi.
6. Jalankan pemeriksaan proyek yang tersedia. Perbaiki kegagalan, lalu ulangi audit dan pengujian terdampak sebelum melaporkan PASS. Jika ada pemeriksaan terhalang, tulis BLOCKED beserta alasannya, bukan PASS.
7. Laporkan file berubah, skenario yang benar-benar diuji, hasil pemeriksaan, lokasi screenshot, dan keterbatasan yang tersisa. Jangan commit, push, atau deploy.PASS di sini hanya berarti pemeriksaan yang disebutkan sudah lolos, bukan jaminan kualitas produksi. Keputusan rilis tetap membutuhkan peninjauan manusia dan pengujian sesuai risiko produk.
Sumber
- Frontend Design Plugin, Anthropic: plugin resmi Anthropic, README, dan instruksi skill. README katalog resmi menjelaskan instalasi serta peringatan keamanan plugin; lisensi skill memuat Apache-2.0.
- Taste Skill, Leonxlnx: repositori komunitas Leonxlnx, nama instalasi, status versi, dan lisensi MIT.
- Awesome DESIGN.md, VoltAgent: koleksi analisis desain komunitas (bukan file desain resmi brand), cara menyalin dokumen, lisensi MIT, serta batas kepemilikan identitas visual.
- Web Design Guidelines, Vercel: skill audit UI dari Vercel Labs (bukan plugin resmi Anthropic). README repositori induk memuat instalasi, cakupan 100+ aturan menurut README Vercel, dan lisensi MIT.
- Playwright CLI, Microsoft: CLI eksternal dan skill browser dari Microsoft (Apache-2.0, bukan plugin Anthropic); persyaratan, instalasi, dan perintah browser.
- Build an App With Claude Design, Claude (Anthropic): video demonstrasi resmi dari kanal @claude (Anthropic, 2 Oktober 2026, ID: COJAZQM1aeQ) yang memperlihatkan alur kerja terarah dari ide UI kasar menuju prototipe interaktif.
- Reel Instagram DeRPpHaCMV1: inspirasi pemilihan tools, bukan dokumentasi teknis pengganti repositori.