Para peneliti baru-baru ini menguji 49 keterampilan agen populer melalui 565 tugas rekayasa perangkat lunak nyata. 39 di antaranya tidak mengubah tingkat kelulusan sama sekali, sementara biaya token meningkat hingga 451%. Studi ini masih berupa preprint dengan hasil awal, tetapi pola ini tetap berlaku: sebagian besar keterampilan yang diinstal membebankan biaya tambahan untuk saran yang sebenarnya sudah diikuti oleh Claude.
Desain adalah pengecualian. Keterampilan frontend milik Anthropic yang terdiri dari 400 token secara nyata mengubah prompt yang identik, karena hasil desain dinilai sekilas. Dan pengaturan default Claude (Inter, gradien ungu, tiga kartu yang serasi) dapat dikenali dalam hitungan detik.
Namun, ada satu hal yang perlu diperhatikan: keterampilan desain resmi Claude hanya akan membuat hasilnya ‘tidak terlihat seperti hasil buatan AI’. Untuk mencapai hasil yang ‘terlihat seperti merek Anda’, Anda memerlukan berkas yang hanya dapat Anda buat sendiri. Panduan ini mencakup keduanya, termasuk cara membuat berkas Anda sendiri dalam satu sore dan membuktikan bahwa berkas tersebut berfungsi lebih baik daripada standar dasar Claude.
TL;DR: Pasang terlebih dahulu keterampilan frontend-design dari Anthropic: cukup satu perintah di Claude Code, dan ini akan menentukan arah estetika sebelum kode apa pun ditulis. Tambahkan canvas-design untuk visual yang sudah jadi, theme-factory atau brand-guidelines untuk deck yang konsisten, serta keterampilan Figma jika proses desain Anda berpusat di Figma.
Skill resmi mencegah hasil keluaran terlihat seperti buatan AI; hanya file SKILL.md kustom dengan nilai hex, skala tipografi, dan pola yang dilarang milik Anda yang membuatnya terlihat seperti produk Anda. Uji setiap skill dengan cara yang sama: prompt yang identik, dengan dan tanpa skill tersebut, lalu hapus apa pun yang tidak secara jelas mengubah hasil keluaran. Kemudian, perbarui versi file tersebut sesuai dengan sistem desain Anda, atau sistem tersebut akan terus menerapkan warna aksen kuartal lalu jauh setelah rebranding.
Apa Itu Keterampilan Claude Design?
Keterampilan desain Claude adalah berkas instruksi singkat yang mengajarkan Claude bagaimana desain Anda seharusnya terlihat. Claude akan membaca berkas tersebut secara otomatis setiap kali ada tugas desain, sehingga Anda tidak perlu mengulang aturan tersebut di setiap prompt.
Sebuah skill dapat menetapkan aturan umum atau aturan khusus. Skill desain frontend dari Anthropic menetapkan aturan umum: pilih tipografi yang tepat, tentukan gaya visual, dan lakukan keduanya sebelum menulis kode apa pun. Skill yang Anda buat sendiri menetapkan aturan Anda sendiri: warna, font, spasi, dan pola yang tidak pernah digunakan oleh tim Anda.
Keterampilan dirancang agar tidak mengganggu. Claude hanya melihat nama setiap keterampilan dan ringkasan satu baris saat sesi dimulai. Petunjuk lengkap akan terbuka saat tugas yang sesuai muncul. Hal ini memastikan sesi tetap berjalan cepat meskipun ada selusin keterampilan yang terpasang.
Ini juga berarti ringkasan satu baris tersebut lebih penting daripada bagian lain dalam berkas tersebut, karena hal itulah yang menentukan apakah Claude akan membuka keterampilan tersebut atau tidak. Dokumentasi Agent Skills dari Anthropic menyebut hal ini sebagai "progressive disclosure".
Apa perbedaan antara keterampilan desain di Claude dengan Claude Design?
Claude Design adalah produk terpisah dari Anthropic yang membuat desain melalui percakapan di claude.ai/design. Keterampilan desain adalah berkas instruksi yang menentukan hasil keluaran di Claude AI dan Claude Code. Keterampilan ini juga mengatur apa yang dihasilkan oleh Claude Design ketika tidak ada sistem desain yang diimpor. Claude Design tersedia di paket Pro, Max, Team, dan Enterprise.
Claude Skills vs. MCP: Apa perbedaannya?
Sebuah Claude Skill memberi tahu Claude cara kerjanya. Server MCP memberikan tugas kepada Claude, seperti koneksi langsung ke berkas Figma Anda. Claude Projects adalah hal ketiga yang sering disalahartikan sebagai keduanya: ruang kerja yang disimpan yang menyimpan berkas dan konteks klien tertentu secara bersamaan.
| Aspek | Keterampilan Claude | Server MCP | Proyek Claude |
|---|---|---|---|
| Apa itu | Sebuah folder berisi petunjuk yang dimuat oleh Claude saat ada tugas yang cocok | Koneksi langsung ke alat eksternal seperti Figma atau GitHub | Ruang kerja dengan konteks yang disematkan untuk satu proyek yang sedang berjalan |
| Paling cocok untuk pekerjaan desain | Menerapkan sistem desain, token, dan aturan estetika Anda | Mengambil data komponen yang sebenarnya dari berkas Figma | Menjaga konteks merek satu klien dalam satu alur kerja |
| Pengaturan | Buat file SKILL.md, atau pasang salah satunya dalam hitungan menit | Konfigurasikan server dan otentikasi | Buat proyek dan tambahkan berkas di Claude AI |
| Biaya konteks | Hanya nama dan deskripsi, hingga dipicu | Definisi alat dimuat per sesi dan dapat memakan banyak sumber daya | Pengetahuan proyek dimuat dalam setiap percakapan |
Sebagian besar tim desain akhirnya menggunakan skill dan server MCP secara bersamaan. Koneksi Figma menunjukkan kepada Claude tombol, warna, dan komponen asli yang sudah ada di berkas Anda, sedangkan skill memberitahukan cara menggunakannya.
Mengapa Desain Menunjukkan Imbal Hasil Keterampilan Terbesar?
Desain memberikan hasil yang lebih cepat daripada jenis pekerjaan lainnya karena hasilnya dinilai sekilas. Sebuah paragraf atau fungsi yang biasa-biasa saja harus dibaca terlebih dahulu sebelum orang menyadari bahwa itu biasa-biasa saja, tetapi sebuah halaman yang dibuat dari font standar dan tata letak templat akan langsung ditolak. Ini juga berarti bahwa keterampilan yang memperbaiki pilihan-pilihan tersebut langsung membuktikan nilainya.
Anthropic mengukur hal ini saat mengembangkan keterampilan frontend-nya, dengan menjalankan prompt yang identik—baik dengan maupun tanpa keterampilan tersebut—di halaman arahan SaaS, tata letak blog, dan dasbor admin. Saat keterampilan tersebut dimuat, dasbor mengganti komponen datar dengan tema gelap yang terpadu, lengkap dengan tipografi tebal dan animasi yang terencana, sementara tata letak blog menggunakan tipografi editorial dan spasi yang tepat. Prompt tersebut tidak pernah berubah.
Skill yang menghasilkan hasil tersebut menggunakan sekitar 400 token dan tidak mengandung kode hex atau aturan tata letak. Skill tersebut hanya berisi jenis huruf dan pola yang harus dihindari serta arahan alternatif yang harus diikuti: jenis huruf yang khas, satu warna dominan dengan aksen yang mencolok, animasi pemuatan halaman tunggal yang tepat waktu, dan latar belakang berlapis. Anthropic bahkan menemukan bahwa instruksi tipografi saja telah meningkatkan bagian-bagian desain yang tidak pernah disebutkan sebelumnya. Hal ini karena model tersebut selalu memiliki kemampuan, dan hanya kekurangan alasan untuk berhenti memilih opsi yang aman.
Logika yang sama menjelaskan pembagian tolok ukur yang telah kita bahas sebelumnya. Tujuh keterampilan yang meningkatkan hasil tersebut mengkodekan pengetahuan prosedural khusus, seperti rumus risiko keuangan, dan sesuai dengan tugas yang dihadapi.
Ke-39 keterampilan yang tidak mengubah apa pun terlalu umum untuk memengaruhi satu keputusan pun. Tiga di antaranya justru merugikan hasil karena panduan yang mereka berikan bertentangan dengan proyek tempat mereka diterapkan. Uji acuan tersebut hanya menguji tugas-tugas rekayasa perangkat lunak, bukan desain, tetapi mekanismenya tetap berlaku: sebuah keterampilan memerlukan pandangan spesifik untuk dapat mengubah sesuatu.
Skill resmi dari Anthropic mendorong Claude untuk menghasilkan font, warna, dan tata letak yang lebih baik secara umum. Skill yang Anda buat berdasarkan sistem desain Anda sendiri akan lebih sesuai dengan merek Anda. Bagian selanjutnya dari panduan ini membahas keduanya: skill resmi mana yang perlu diinstal, serta cara membuat skill Anda sendiri.
Skill Claude mana saja yang layak diinstal untuk keperluan desain?
Ada enam keterampilan resmi yang layak dipasang untuk pekerjaan desain: frontend-design, canvas-design, theme-factory, brand-guidelines, web-artifacts-builder, dan webapp-testing dari Anthropic, serta rangkaian keterampilan Figma jika tim Anda mendesain menggunakan Figma. Keterampilan frontend-design adalah yang paling berdampak dan sebaiknya dipasang terlebih dahulu.
Skill siap pakai tersedia di setiap paket Claude, termasuk paket Gratis, setelah Anda mengaktifkan eksekusi kode. Untuk mengunggah skill kustom, Anda memerlukan paket Pro, Max, Team, atau Enterprise. Kelola keduanya di bagian "Customize", lalu pilih "Skills".
Di Claude Code, daftarkan repositori keterampilan Anthropic dengan perintah /plugin marketplace add anthropics/skills, lalu instal koleksi yang berkaitan dengan desain dengan perintah /plugin install example-skills@anthropic-agent-skills.
Skill adalah serangkaian instruksi yang akan diikuti oleh agen Anda, jadi bacalah berkas SKILL.md dari pihak ketiga dengan cermat, sama seperti saat Anda membaca kode sebelum menggabungkannya.
| Skill | Sumber | Cocok untuk | Lewati bagian ini jika |
|---|---|---|---|
| frontend-design | Anthropic | Antarmuka pengguna (UI) dan halaman arahan yang tidak terlihat seperti hasil buatan AI | Skill sistem desain yang ketat sudah mengatur hasil karya Anda |
| canvas-design | Anthropic | Poster dan visual media sosial disediakan dalam format PNG atau PDF | Anda memerlukan berkas sumber yang dapat diedit, bukan karya seni yang sudah jadi |
| theme-factory | Anthropic | Memilih tema warna dan font siap pakai untuk deck dan halaman | Merek Anda sudah menentukan warna dan jenis huruf |
| pedoman-merek | Anthropic | Contoh praktis dari keterampilan merek yang lengkap, yang dibangun berdasarkan identitas Anthropic sendiri | Anda mengharapkan sistem ini memahami merek Anda; sistem ini dilengkapi dengan fitur dari Anthropic’s |
| web-artifacts-builder | Anthropic | Prototipe interaktif React dan Tailwind di Claude AI | Prototipe Anda memerlukan komponen produksi Anda |
| pengujian-aplikasi-web | Anthropic | Memverifikasi halaman yang telah dibangun di browser asli sebelum diserahkan | Anda hanya menghasilkan aset desain statis |
| Keterampilan Figma | Figma | Memindahkan pekerjaan antara Figma dan kode dalam kedua arah | Tim Anda tidak merancang di Figma |
| Skill sistem desain Anda | Anda | Hasil yang sesuai dengan bahasa visual produk Anda | Anda belum memiliki konvensi desain yang dapat diulang |
frontend-design
frontend-design adalah instalasi yang paling berpengaruh untuk pekerjaan antarmuka. Sebelum Claude menulis kode UI apa pun, keterampilan ini membuatnya berkomitmen pada arah estetika tertentu dan menghindarkannya dari font, gradien, dan tata letak yang menandakan bahwa halaman tersebut dibuat oleh mesin.
Apa yang berhasil dengan baik
- Arah sebelum menulis satu baris kode pun: Keterampilan ini meminta Claude untuk memilih identitas visual tertentu berdasarkan brief, termasuk satu risiko estetika yang disengaja, alih-alih menentukan gaya secara bertahap
- Nama default yang harus dihindari: Inter, Roboto, gradien ungu pada latar belakang putih, dan komponen yang seragam secara eksplisit dikecualikan, itulah sebabnya hasil akhirnya tidak terlihat seperti halaman AI lainnya
- Ukuran file yang sangat kecil: Panduan ini berukuran sekitar 400 token, sehingga hampir tidak ada biaya yang diperlukan untuk menginstalnya
Batasan
- Selera umum, bukan selera Anda: Keterampilan ini tahu seperti apa tampilan generik dan menghindarinya, tetapi tidak tahu seperti apa tampilan produk Anda seharusnya
- Hanya untuk pekerjaan antarmuka: Fitur ini diaktifkan pada tugas antarmuka web; poster dan visual statis termasuk dalam kategori desain kanvas
Lewati bagian ini jika: Anda sudah menjalankan keterampilan sistem desain dengan aturan yang lebih ketat. Dua pendapat estetika bersaing dalam sesi yang sama, dan pendapat Anda harus menang. Misalnya, di Claude Code, keterampilan pribadi dan proyek memiliki prioritas lebih tinggi daripada instalasi plugin seperti ini, sehingga keterampilan Anda otomatis menang.
Cocok untuk: Halaman arahan, dasbor, dan komponen yang mengutamakan tampilan yang ‘tidak terlihat seperti hasil buatan AI’ dan belum memiliki gaya desain internal.
canvas-design
canvas-design menghasilkan karya seni visual jadi, seperti poster dan grafis media sosial, dalam bentuk berkas PNG atau PDF. Alat ini bekerja dalam dua tahap, meniru cara kerja seorang desainer. Pertama, alat ini menulis filosofi desain singkat untuk karya tersebut. Kemudian, alat ini menciptakan visual berdasarkan filosofi tersebut, dengan meminimalkan teks dan memperlakukan tipografi sebagai bagian dari komposisi.
Apa yang berhasil dengan baik
- Konsep sebelum piksel: Tahap filosofi memastikan adanya ide visual yang koheren, sehingga hasilnya memiliki satu sudut pandang, bukan sekadar kekosongan yang dihias-hias
- Asli berdasarkan instruksi: Keterampilan ini secara eksplisit mengarahkan Claude untuk membuat desain asli, bukan meniru karya seniman yang sudah ada
Batasan
- Hanya berkas hasil akhir: Anda akan mendapatkan berkas PNG atau PDF yang sudah dirender serta dokumen filosofi, dan tidak ada berkas sumber berlapis yang dapat diedit setelahnya
Lewati langkah ini jika: Hasil kerja perlu dikembalikan ke Figma atau Illustrator untuk direvisi. Regenerasi adalah satu-satunya cara untuk mengedit di sini.
Cocok untuk: Visual satu kali dengan tenggat waktu, di mana komposisi akhir yang kuat lebih diutamakan daripada berkas yang dapat diedit.
theme-factory dan brand-guidelines
Kedua keterampilan ini mengatasi masalah konsistensi dari sudut pandang yang berlawanan. theme-factory menyediakan sepuluh tema siap pakai, masing-masing berupa palet warna dengan pasangan font yang serasi. Keterampilan ini dapat menghasilkan tema baru sesuai permintaan, lalu menerapkan tema yang dipilih ke seluruh deck, dokumen, atau halaman. brand-guidelines menunjukkan seperti apa keterampilan merek yang sepenuhnya terdefinisi, dengan palet warna dan pasangan font yang tepat dari sebuah perusahaan sudah terintegrasi di dalamnya. Namun, perlu diperhatikan bahwa perusahaan tersebut adalah Anthropic; jadi, gunakanlah ini sebagai kerangka kerja yang dapat Anda modifikasi sesuai nilai-nilai Anda sendiri, bukan sebagai keterampilan yang sudah memahami merek Anda.
Apa yang berhasil dengan baik
- Satu keputusan, diterapkan di mana-mana: Pilih satu tema sekali saja, dan setiap slide atau halaman dalam dokumen tersebut akan mengikuti tema tersebut, sehingga menghilangkan ketidaksesuaian antara slide 3 dan slide 14
- Solusi alternatif saat belum ada identitas merek: Untuk pekerjaan internal atau konsep awal yang belum memiliki identitas visual, tema bawaan lebih baik daripada penataan gaya yang dibuat-buat
Batasan
- Penataan gaya, bukan desain: Kedua keterampilan tersebut mengatur warna dan font. Tata letak, hierarki, dan gambar tetap ditentukan oleh hal lain yang menjadi pedoman sesi tersebut
Lewati bagian ini jika: Aturan merek Anda sudah terintegrasi dalam keterampilan sistem desain khusus. Sumber kebenaran ganda untuk warna dan tipografi akan membuat warna aksen lama kembali muncul tanpa disadari.
Cocok untuk: Tim yang menghasilkan presentasi dan dokumen untuk klien dalam jumlah besar, di mana konsistensi lebih penting daripada inovasi.
web-artifacts-builder dan webapp-testing
Kedua alat ini melengkapi prototipe. web-artifacts-builder memungkinkan Claude membuat Claude Artifacts dengan React, Tailwind, dan shadcn/ui di beberapa berkas, lalu menggabungkan semuanya menjadi artefak berkas tunggal yang diperlukan. Dengan demikian, prototipe hadir dengan formulir yang berfungsi dan komponen nyata, bukan hanya satu halaman HTML kosong.
webapp-testing kemudian membuka hasilnya di browser sungguhan, menjelajahinya, dan mengambil tangkapan layar serta log konsol. Interaksi yang bermasalah terdeteksi sebelum pemangku kepentingan menemukannya.
Apa yang berhasil dengan baik
- Prototipe yang lebih kaya secara langsung: Aplikasi tugas yang dibangun menggunakan keterampilan tersebut mencakup formulir pembuatan tugas yang berfungsi dengan kategori dan tanggal jatuh tempo, sedangkan versi tanpa keterampilan tetap minimalis
- Pemeriksaan sebelum serah terima: Tangkapan layar dari browser asli jauh lebih meyakinkan dalam menjawab pertanyaan ‘apakah ini benar-benar berfungsi’ daripada kode yang dihasilkan secara otomatis
Batasan
- Pustaka komponen umum: Prototipe dibuat dari bagian-bagian shadcn/ui, bukan komponen produksi Anda, sehingga tingkat kesetiaan terhadap produk Anda memiliki batasan
- Pengujian memerlukan aplikasi lokal: webapp-testing menjalankan aplikasi web lokal, sehingga menjadikannya alat alur kerja pengembang, bukan alat desain
Lewati bagian ini jika: Prototipe Anda harus menggunakan komponen produksi, atau hasil karya Anda tidak pernah dijalankan di browser.
Cocok untuk: Insinyur desain yang membuat prototipe interaktif untuk ditinjau dan ingin prototipe tersebut berfungsi dengan baik, bukan sekadar terlihat menarik.
Keterampilan resmi Figma
Figma mengelola kumpulan skill-nya sendiri di GitHub, yang dirancang untuk diintegrasikan dengan server Figma Model Context Protocol (MCP). Kumpulan skill ini berfungsi dua arah. figma-design-to-code mengubah node Figma menjadi kode di stack pengembangan Anda. figma-generate-design membangun layar di Figma berdasarkan komponen dan token yang telah Anda publikasikan. figma-generate-library membangun pustaka komponen dari basis kode. Dan `figma-code-connect` memetakan desain ke implementasi kodenya, sehingga Dev Mode menampilkan kode komponen yang sebenarnya, bukan perkiraan yang dihasilkan.
Apa yang berhasil dengan baik
- Komponen nyata, bukan sekadar tebakan: Karena keterampilan ini bergantung pada koneksi MCP, Claude bekerja berdasarkan variabel, gaya, dan komponen yang telah Anda publikasikan yang sebenarnya
- Disiplin yang diterapkan: Keterampilan ini mengharuskan adanya konteks desain sebelum kode ditulis dan penggunaan token sistem desain alih-alih nilai yang dikodekan secara langsung, yang justru merupakan kesalahan yang sering terjadi dalam sesi yang dipandu secara manual.
Batasan
- Secara definisi, didasarkan pada Figma: Setiap keterampilan mengasumsikan bahwa prinsip desain Anda tersimpan dalam berkas Figma yang terhubung ke server MCP, dan proses penyiapannya lebih rumit daripada instalasi satu perintah
Lewati bagian ini jika: Tim Anda tidak mendesain menggunakan Figma. Untuk tahap eksplorasi awal, ada baiknya juga mempertimbangkan apakah Anda benar-benar membutuhkan Figma AI dalam proses ini, atau apakah alat berbasis prompt justru lebih cepat.
Cocok untuk: Tim produk yang telah menerbitkan sistem desain Figma dan ingin proses "design-to-code" dan "code-to-design" tidak lagi dilakukan secara manual.
Cara Membuat Claude Skill untuk Sistem Desain Anda
Membuat keterampilan sistem desain memerlukan enam langkah: pilih satu alur kerja yang berulang, buat draf SKILL.md dengan bantuan Claude, tulis deskripsi yang dapat dicocokkan oleh Claude dengan tugas-tugas nyata, isi petunjuk dengan token desain Anda yang sebenarnya, bandingkan hasil dengan dan tanpa keterampilan tersebut, lalu instal folder tersebut di tempat tim Anda bekerja.
Langkah 1: Pilih satu alur kerja desain yang sering digunakan
Tulis keterampilan untuk tugas yang sudah Anda berikan kepada Claude beberapa kali dalam seminggu. Pengulangan membenarkan keberadaan berkas ini: keterampilan ini menghindarkan Anda dari menempelkan aturan yang sama ke setiap sesi, sehingga tugas yang Anda jalankan sekali tidak memerlukan keterampilan tersebut.
Contoh umum:
- Antarmuka Pengguna Produk: Layar dan komponen dalam bahasa visual produk Anda
- Presentasi klien: Slide yang mengikuti gaya yang telah ditetapkan oleh studio Anda
- Spesifikasi Handoff: Dokumentasi pengembang dalam format yang diharapkan oleh para insinyur Anda
Tips Pro: Pilih alur kerja di mana hasil generik membutuhkan paling banyak perbaikan, bukan yang paling mudah ditulis.
Langkah 2: Biarkan Claude menyusun draf SKILL.md
Jelaskan alur kerja kepada Claude dan biarkan ia menulis draf pertamanya. Claude akan menanyakan apa tugasnya, kapan keterampilan tersebut harus diaktifkan, dan seperti apa hasil akhirnya, lalu menghasilkan berkas tersebut. Itulah pertanyaan-pertanyaan yang sering dilupakan orang saat menulis berkas tersebut secara manual.
Panduan penulisan dari Anthropic memperlakukan draf sebagai titik awal, dan siklus setelahnya singkat: jalankan tugas nyata, catat kesalahan pada hasilnya, revisi instruksinya, lalu jalankan lagi.
Langkah 3: Tulis deskripsi yang benar-benar memicu
Baris deskripsi di bagian frontmatter YAML menentukan apakah keterampilan Anda akan dijalankan. Claude hanya membaca baris tersebut saat memindai keterampilan yang terinstal untuk mencari kecocokan, sehingga ‘helps with design’ tidak cocok dengan apa pun, dan instruksi di bawahnya tidak akan dimuat.
Sebuah deskripsi yang memicu akan menyebutkan tiga hal dalam kata-kata yang akan Anda ketikkan dalam prompt:
- Tugas-tugas: ‘membuat antarmuka pengguna (UI), halaman arahan, atau komponen’
- Ruang lingkup: Produk atau merek yang menjadi sasaran keterampilan tersebut
- Aturan yang berlaku: ‘token desain, skala tipografi, dan aturan spasi kami’
Claude AI memberlakukan batas karakter yang lebih pendek, yaitu 200 karakter, untuk keterampilan yang diunggah, jadi tulislah sesuai batas 200 karakter tersebut dan gunakan sisa ruang 1.024 karakter dalam spesifikasi sebagai cadangan untuk kode Claude.
Langkah 4: Kode sistem desain, bukan kata sifat
Isi petunjuk dengan nilai-nilai, bukan deskripsi nilai-nilai tersebut. Istilah ‘bersih dan modern’ menyerahkan setiap keputusan nyata kepada model, yang akan menyelesaikannya dengan nilai default-nya. Sistem desain Anda sudah membuat keputusan-keputusan ini, jadi salin saja ke dalamnya:
- Warna: Nilai hexadesimal yang tepat, bukan nama warna
- Jenis: Skala penuh, dengan nama font dan bobotnya
- Spasi: Satuan spasi dan radius tepi
- Gerakan: Durasi dan easing, jika sistem Anda mendefinisikannya
- Daftar yang dilarang: Tata letak kartu default, karakter dengan gradien, gaya ilustrasi stok, dan hal lain apa pun yang secara eksplisit dilarang oleh sistem Anda.
Daftar larangan lebih berperan daripada daftar yang diizinkan, karena daftar ini menghilangkan opsi cadangan yang akan digunakan model saat instruksi habis. Jika Anda sudah memiliki pedoman merek, langkah ini hanyalah penerjemahan, bukan penciptaan. Materi referensi yang lebih besar, seperti inventaris komponen atau aturan aksesibilitas, sebaiknya disimpan dalam folder referensi yang hanya dimuat oleh keterampilan saat tugas membutuhkannya.
Langkah 5: Uji terhadap baseline Claude
Jalankan satu tugas nyata dua kali, sekali dengan keterampilan terpasang dan sekali tanpa keterampilan tersebut, lalu bandingkan hasilnya secara berdampingan. Perbandingan ini memberi tahu Anda dua hal: apakah keterampilan tersebut benar-benar terpicu, dan apakah instruksi tersebut mengubah sesuatu yang terlihat oleh mata.
Jika kedua hasil tersebut terlihat sama, berarti instruksinya terlalu longgar. Ganti baris-baris yang paling tidak jelas dengan nilai-nilai spesifik, lalu jalankan tugas tersebut kembali.
Tips Pro: Gunakan komponen yang baru saja Anda luncurkan sebagai tugas uji. Hasil yang dapat Anda bandingkan dengan pekerjaan produksi yang sebenarnya akan mengungkap petunjuk yang kurang jelas lebih cepat daripada prompt yang dibuat-buat.
Langkah 6: Pasang di tempat Anda bekerja, dan kelola versinya
Di Claude AI, unggah folder keterampilan melalui menu Pengaturan, lalu Sesuaikan, kemudian Keterampilan. Di Claude Code, simpan ke direktori claude/skills/ proyek Anda, dan semua orang yang mengkloning repositori tersebut akan mendapatkannya.
Perbarui keterampilan tersebut dalam pull request yang sama dengan yang memperbarui sistem desain. Jika tidak, saat rebranding diluncurkan, token-token berubah, dan keterampilan yang tidak pernah diubah akan terus menerapkan warna aksen kuartal lalu ke setiap build baru. Claude tidak memiliki cara untuk mengetahui bahwa berkas tersebut sudah kedaluwarsa, sehingga proses peninjauan harus menjadi bagian dari alur kerja Anda.
Kiat Pro: Tambahkan keterampilan ini ke daftar periksa audit sistem desain Anda, sehingga berkas tersebut ditinjau sesuai jadwal yang sama dengan sistem yang dikodifikasinya.
Lima Kesalahan dalam Keterampilan yang Sering Terlewatkan
Anda mungkin akan langsung menyadari kesalahan yang jelas: keterampilan yang menghasilkan kesalahan, deskripsi dengan kesalahan ketik pada kata pemicu, atau instruksi yang saling bertentangan. Namun, kesalahan yang benar-benar merusak keterampilan desain tidak langsung terlihat. Keterampilan tersebut terinstal dengan lancar, sesi berjalan tanpa masalah, namun hasilnya tetap salah tanpa ada peringatan. Berikut lima hal yang perlu diwaspadai:
Koleksi keterampilan yang tidak melakukan apa-apa. Folder keterampilan Anda berisi lima belas unduhan, sesi dimuat dengan lancar, dan hasilnya terlihat persis sama seperti sebelum keterampilan-keterampilan itu ditambahkan. Tidak ada kesalahan, jadi tidak ada yang dipertanyakan. Setiap keterampilan baik tidak pernah terpicu maupun mengulangi saran yang sudah diikuti oleh Claude, dan Anda membayar biaya tambahan yang tidak sepadan untuk perubahan yang nihil.
Solusinya: Jalankan setiap keterampilan yang terpasang melalui tes sebelum/sesudah yang sama seperti yang akan Anda jalankan sendiri. Pertahankan dua atau tiga keterampilan yang secara jelas mengubah hasil keluaran, dan hapus sisanya tanpa ragu-ragu.
Keterampilan yang sesuai dengan model. Instruksi Anda menyebutkan ‘modern, bersih, dan mudah diakses’, namun Claude tetap menghasilkan halaman median. Claude tidak mengabaikan instruksi Anda. Halaman median tersebut memang sudah modern, bersih, dan mudah diakses, sehingga keterampilan Anda meminta persis apa yang disajikan oleh pengaturan default. Instruksi berupa kata sifat selalu lolos, itulah sebabnya instruksi tersebut selalu gagal.
Solusinya: Ubah setiap kata sifat menjadi sebuah keputusan: nilai hex, nama font, atau pola yang dilarang. Jika suatu aturan tidak boleh dilanggar, maka itu bukanlah instruksi.
Keterampilan yang tak pernah diundang. Berkas tersebut terpasang selama berminggu-minggu, namun Claude tak pernah menyebutkan memuatnya. Tak ada yang menyadarinya, karena sesi-sesi tersebut tetap menghasilkan keluaran, hanya saja keluaran yang tidak terstruktur. Claude memilih keterampilan dengan mencocokkan permintaan Anda dengan deskripsi frontmatter satu baris, dan deskripsi yang samar-samar tak akan cocok dengan apa pun.
Solusinya: Tulis ulang deskripsinya dengan kata-kata persis yang Anda ketik saat menugaskan tugas tersebut. Jika Anda mengatakan ‘membuat halaman harga,’ deskripsinya harus menyebutkan ‘halaman’, bukan ‘membantu dalam kualitas visual.’
Keterampilan yang Anda anggap sebagai "mata". Hasilnya tetap sesuai dengan identitas merek untuk setiap tugas yang diantisipasi oleh instruksi, lalu menyimpang dari identitas merek begitu permintaan berada di luar cakupan instruksi tersebut. Kesenjangan ini selalu ada: keterampilan membatasi pilihan, tetapi tidak dapat "melihat" produk Anda. Apa pun yang tidak tercakup dalam instruksi, model akan mengisinya berdasarkan pengaturan defaultnya.
Solusinya: Padukan keterampilan tersebut dengan sesuatu yang benar-benar dapat dilihat oleh Claude, baik itu berkas desain yang terhubung, komponen yang ditangkap, maupun tangkapan layar dari antarmuka yang telah dirilis. Aturan ditambah referensi mencakup hal-hal yang tidak dapat ditangani oleh aturan saja.
Keterampilan yang tetap relevan meski merek telah diperbarui. Tiga minggu setelah palet warna baru diluncurkan, Claude masih menerapkan warna aksen lama, dengan penuh keyakinan, pada setiap build baru. Tidak ada yang tampak salah pada berkas tersebut, karena tidak ada yang berubah di dalamnya. Itulah masalahnya: sistem desain telah diperbarui, tetapi keterampilan tersebut tidak, dan Claude tidak memiliki cara untuk mengetahui perbedaannya.
Solusinya: Hubungkan berkas keterampilan dengan proses rilis yang sama seperti sistem desain, sehingga keduanya tidak akan mengalami ketidaksesuaian selama proses tinjauan
Cara Menjalankan Alur Kerja Desain Berbasis Keterampilan di ClickUp
ClickUp adalah tempat di mana seluruh proses terkait Claude Skill berlangsung: brief yang menjadi dasarnya, tinjauan yang membentuknya, dan serah terima yang mengantarkannya ke tahap akhir. Sebuah keterampilan desain memperbaiki hasil keluaran Claude. ClickUp memperbaiki alur kerja yang menampung hasil keluaran tersebut.
Apa yang efektif khusus untuk desain berbasis keterampilan:
- Akses Claude dan LLM lainnya secara langsung: Beralihlah ke Claude di tengah percakapan di ClickUp Brain tanpa perlu meninggalkan ruang kerja Anda. Tanyakan tentang tugas desain yang sedang Anda kerjakan, dan Brain akan menampilkan informasi yang tidak dapat dilihat oleh sesi Claude mandiri, seperti umpan balik terakhir dari klien atau brief dari dua tugas sebelumnya dalam thread tersebut
- Ubah aturan desain tim Anda menjadi panduan yang dapat digunakan kembali: ClickUp memiliki Keterampilan AI-nya sendiri: kumpulan instruksi yang disimpan yang diterapkan oleh Brain setiap kali ada tugas yang sesuai. Buatlah satu yang berbunyi “saat meninjau halaman arahan, periksa sesuai dengan skala tipografi, pola yang dilarang, dan token spasi kami,” dan setiap tinjauan akan menjalankan daftar periksa yang sama. Dokumentasi sistem desain yang menjadi dasarnya dapat disimpan berdampingan sebagai wiki ClickUp Docs yang dilacak versinya, dan dapat diakses oleh seluruh tim
Lihat bagaimana Keterampilan AI ClickUp bekerja dalam praktiknya, mulai dari membuat panduan yang dapat digunakan kembali hingga memuat instruksi yang tepat secara otomatis melalui Brain:
- Tutup siklus umpan balik pada aset desain yang dihasilkan Claude: Lampirkan mockup atau tangkapan layar halaman arahan yang dihasilkan Claude ke tugasnya, dan pemangku kepentingan dapat memberikan komentar langsung di atasnya menggunakan ClickUp Proofing. “Jarak antar elemen di bagian hero terasa tidak pas” akan menjadi anotasi pada koordinat yang tepat, ditugaskan kepada seorang desainer, dan ditampilkan di beranda mereka
- Kirimkan pratinjau interaktif alih-alih tangkapan layar: Minta Brain untuk membuat halaman arahan, presentasi, atau dasbor, dan Brain akan menghasilkan ClickUp Artifact yang aktif: halaman HTML yang berfungsi, dibuat berdasarkan brief, dokumen merek, dan data tugas yang sudah dilampirkan ke proyek. Tempelkan URL-nya di mana saja di ruang kerja Anda, dan halaman tersebut akan ditampilkan sehingga pemangku kepentingan dapat menjelajahinya.
Batasan:
- ClickUp bukanlah tempat Anda membuat atau menjalankan Claude Skills: Claude Skills berada di Claude AI dan Claude Code. ClickUp adalah sistem pencatatan untuk keduanya, bukan lapisan produksi.
- Ada kurva pembelajaran dalam pengaturan awal. Tim yang sebelumnya menggunakan alat yang lebih sederhana atau tidak menggunakan alat manajemen proyek sama sekali perlu memikirkan hierarki dan status sejak awal. Seorang desainer mandiri dengan tiga klien dapat menyelesaikan proyek lebih cepat jika menggunakan alat yang lebih sederhana
Lewati bagian ini jika: Anda hanya membutuhkan Claude untuk menghasilkan visual satu kali saja dan tidak memiliki proses peninjauan tim terkait hal tersebut.
Cocok untuk: Tim desain di mana Claude menangani produksi, sementara tim manusia menangani brief, umpan balik, dan persetujuan, serta proses serah terima tersebut perlu dihentikan agar tidak tersebar di berbagai utas percakapan.
Buat Skill Sekali, Nikmati Keunggulannya Selamanya
Pola yang muncul di setiap uji coba yang kredibel sama: keterampilan dengan sudut pandang spesifik mengubah hasil desain, sedangkan yang umum tidak memberikan perbedaan apa pun. Pasang keterampilan desain frontend dari Anthropic hari ini; ini adalah peningkatan yang paling cepat terlihat. Kemudian, luangkan satu sore untuk mengkodekan sistem desain Anda sendiri ke dalam berkas SKILL.md.
Uji berkas tersebut dengan baseline, dan sesuaikan versinya dengan sistem Anda. Berkas tunggal itulah yang membedakan hasil keluaran AI yang terlihat sama dengan milik orang lain dan hasil keluaran AI yang terlihat seperti milik Anda.
Namun, meskipun keterampilan ini memecahkan masalah produksi, keterampilan ini tidak memecahkan masalah alur kerja. Desainer Anda masih menerima brief di satu aplikasi, umpan balik melalui utas email, dan persetujuan dalam rapat yang tidak ada yang mencatatnya. Hasilnya memang membaik, tetapi proses di sekitarnya tetap terfragmentasi.
Rekomendasi kami: Biarkan Claude menangani pekerjaan produksi yang mendalam melalui keterampilan Anda, dan kelola brief, tinjauan, serta persetujuan tim di tempat yang dapat dilihat oleh semua orang.
Coba ClickUp secara gratis dan terapkan sistem yang sama pada alur kerja desain Anda seperti yang baru saja diterapkan oleh keterampilan Anda pada hasil karya Anda.
Pertanyaan yang Sering Diajukan tentang Keterampilan Claude Design (FAQ)
Seberapa banyak konteks yang digunakan oleh sebuah keterampilan yang telah diinstal?
Sekitar 100 token per keterampilan hingga keterampilan tersebut diaktifkan. Claude hanya memuat nama dan deskripsi setiap keterampilan saat startup; isi lengkap berkas SKILL.md (Anthropic merekomendasikan kurang dari 5.000 token dan 500 baris) baru dimasukkan ke dalam konteks saat ada tugas yang cocok, dan berkas referensi yang disertakan hanya dimuat saat dibaca. Sekitar selusin keterampilan yang terpasang memerlukan sekitar 1.200 token sebagai beban tetap.
Apakah sebuah Claude Skill dapat berisi kode yang dapat dieksekusi?
Ya. Keterampilan dapat menggabungkan skrip Python, JavaScript, atau Bash dalam direktori `scripts/`, yang dinyatakan sebagai dependensi di bagian frontmatter YAML. Claude dan Claude Code dapat menginstal paket dari PyPI dan npm saat memuat sebuah keterampilan; keterampilan API mengharuskan semua dependensi sudah terinstal sebelumnya di dalam kontainer. Keterampilan berbasis dokumen milik Anthropic untuk Excel, Word, dan PDF menggunakan pola ini.
Keterampilan mana yang akan diutamakan jika terjadi konflik antara dua keterampilan?
Di Claude Code, keterampilan mengikuti urutan prioritas tetap saat terjadi benturan nama: keterampilan yang dikelola perusahaan didahulukan, kemudian keterampilan pribadi di ~/.claude/skills, lalu keterampilan proyek di .claude/skills, dan terakhir keterampilan yang diinstal melalui plugin. Organisasi dapat menerapkan standar melalui keterampilan perusahaan, sementara individu tetap dapat menggunakan pengaturan pribadi. Menggunakan nama yang deskriptif seperti frontend-review alih-alih review dapat menghindari sebagian besar konflik.
Apa perbedaan antara Claude Skill dan plugin?
Skill adalah satu folder yang berisi berkas petunjuk SKILL.md; sedangkan plugin adalah paket distribusi yang dapat menggabungkan beberapa skill bersama dengan konektor dan perintah untuk Claude Code. Anthropic menyediakan frontend-design sebagai plugin yang berisi skill tersebut dan dapat diinstal dengan satu perintah di marketplace. Jika Anda membuat aturan desain sendiri, Anda membuat sebuah skill; sedangkan plugin adalah cara untuk membagikan kumpulan aturan tersebut.
Apakah Claude Skills dapat digunakan secara gratis?
Skill siap pakai tersedia di semua paket Claude, termasuk paket Gratis, selama eksekusi kode diaktifkan di pengaturan. Mengunggah skill kustom memerlukan paket Pro, Max, Team, atau Enterprise. Skill siap pakai dari Anthropic diaktifkan secara otomatis untuk semua pengguna, dan Anda dapat mengunggah skill kustom melalui menu Sesuaikan, lalu Skill.
Tidak. Sebuah skill adalah folder yang berisi berkas SKILL.md: bagian frontmatter YAML yang berisi nama dan deskripsi, diikuti dengan instruksi dalam format Markdown biasa. Skrip Python, JavaScript, atau Bash yang dapat dieksekusi merupakan tambahan opsional untuk alur kerja tingkat lanjut. Dokumentasi skill khusus dari Anthropic merekomendasikan untuk memulai hanya dengan instruksi dan menambahkan skrip nanti jika tugas tersebut membutuhkannya.