00:00:00Claude Code sangat bagus, tapi tim kami mulai menggunakannya untuk segala hal.
00:00:03Anthropic menyadari hal ini dan beberapa waktu lalu mereka memperkenalkan konsep skill.
00:00:07Tapi sejak Nano Banana Pro dirilis, orang-orang mulai beralih ke arah yang berbeda,
00:00:12menggunakan produk Google seperti anti-gravity untuk membangun situs yang lebih baik.
00:00:15Kami mencoba anti-gravity, tapi menurut kami saat ini fiturnya masih terlalu bermasalah.
00:00:19Kami tahu para pencinta anti-gravity pasti akan menyerang kami karena ini.
00:00:21Tapi itu topik untuk video lain, yang jelas gambar yang dihasilkan itu gratis.
00:00:25Jadi kami pikir, kenapa tidak biarkan Claude menangani koding dan anti-gravity khusus gambarnya saja.
00:00:30Tapi masalahnya begini.
00:00:31Untuk berbagai skenario ini, Anda tidak seharusnya mem-prompt ulang Claude terus-menerus.
00:00:35Anda harus melatihnya dan membuat skill khusus.
00:00:37Claude baru-baru ini merilis panduan tentang bagaimana seharusnya skill dibangun.
00:00:41Dan bagian terpentingnya adalah pengujian dan iterasi.
00:00:44Sejujurnya, panduan tersebut benar-benar mengubah cara pandang kami tentang skill ini.
00:00:48Anda mungkin sudah pernah mendengar tentang Skill Creator.
00:00:50Itu adalah skill resmi Claude Code yang memberikan panduan untuk membuat skill yang efektif.
00:00:55Tapi salah satu anggota tim kami menemukan bahwa fitur tersebut sudah ketinggalan zaman
00:00:58berdasarkan panduan baru yang kami terbitkan.
00:01:00Jadi kami memperbaruinya dan banyak hal yang berubah
00:01:02sesuai dengan pedoman baru dan menghasilkan peningkatan yang sangat bagus.
00:01:05Menggunakan Skill Creator yang diperbarui ini dan banyak iterasi yang melelahkan,
00:01:09kami berhasil membuat skill nano banana UI yang baru ini.
00:01:12Tapi skill yang kami mulai dan hasil akhirnya ternyata dua hal yang sangat berbeda.
00:01:16Kedua skill ini akan tersedia di AI Labs Pro.
00:01:19Bagi yang belum tahu, itu adalah komunitas yang baru kami luncurkan
00:01:22di mana Anda mendapatkan templat siap pakai yang bisa langsung dipasang ke proyek Anda
00:01:26untuk video ini dan semua video sebelumnya.
00:01:28Jika Anda merasa konten kami bermanfaat dan ingin mendukung channel ini,
00:01:31ini adalah cara terbaik. Link-nya ada di deskripsi.
00:01:34Kami sudah memahami proses koordinasi antara Claude Code dan Anti-Gravity.
00:01:38Jadi kami membuka direktori yang sama di Claude Code dan juga di Anti-Gravity.
00:01:42Claude menginisialisasi proyeknya dan Anti-Gravity hanya perlu fokus pada folder publik ini,
00:01:47yang nantinya akan berisi semua gambar di dalamnya.
00:01:49Claude akan memberi kami prompt dan nama file untuk gambar yang
00:01:53perlu dibuat oleh Anti-Gravity. Prompt tersebut dimasukkan ke Anti-Gravity.
00:01:56Lalu alat pembuat gambarnya dijalankan dan menggunakan pemrosesan paralel,
00:02:00alat tersebut menghasilkan beberapa gambar sekaligus dalam satu waktu.
00:02:03Bisa dilihat ada tiga gambar yang dihasilkan dan ketiganya masuk ke folder images ini.
00:02:08Setelah gambar masuk, Claude otomatis tahu dan bisa langsung menggunakannya.
00:02:12Tapi begitu kami mulai menghasilkan gambar, banyak hal mulai bermasalah.
00:02:17Mungkin Anda sudah sering mendengar ini, tapi rekayasa deskripsi adalah salah satu
00:02:21hal terpenting saat membangun alur kerja berulang. Deskripsi ini adalah
00:02:26YAML front matter yang selalu dimuat ke dalam konteks Claude Code saat Anda membukanya.
00:02:30Dan inilah cara Claude memutuskan apakah dia perlu memuat skill Anda atau tidak.
00:02:34Namun banyak pengguna melaporkan skill termuat ke konteks padahal tidak dibutuhkan.
00:02:38Itu terjadi karena kebanyakan deskripsi hanya menjelaskan apa fungsi skill-nya.
00:02:41Deskripsi yang baik sebenarnya menjawab dua pertanyaan.
00:02:44Apa fungsi skill tersebut? Dan kapan Claude harus menggunakannya?
00:02:46Di sinilah frasa pemicu berperan. Itulah yang memanggil skill untuk digunakan,
00:02:51seperti “buat landing page” atau saat menyebut “nano banana”. Tapi ini bukan cuma soal kapan menggunakannya.
00:02:57Panduannya juga menyebutkan pemicu negatif, yang memberitahu Claude kapan tidak boleh menggunakan skill.
00:03:01Misalnya, kami mengatur agar skill tidak dimuat untuk perbaikan bug ringan atau pekerjaan database.
00:03:05Jadi perbedaan antara deskripsi yang bagus dan yang buruk sangatlah jelas.
00:03:08Bisa dilihat skill dari skill creator baru ini punya banyak frasa pemicu dan pemicu negatif,
00:03:13sedangkan yang dari skill creator lama cuma mendeskripsikan fungsi skill-nya saja.
00:03:17Ada juga instruksi yang murni kuantitatif dan terkait sintaksis,
00:03:21tapi Anda tidak perlu terlalu pusing soal itu.
00:03:23Juga, jika Anda menyukai konten kami, pertimbangkan untuk menekan tombol hype,
00:03:27karena itu membantu kami membuat lebih banyak konten dan menjangkau lebih banyak orang.
00:03:31Biasanya, saat membuat berbagai gambar, sebagian besar harus memiliki
00:03:35dimensi yang berbeda karena harus disesuaikan untuk berbagai kegunaan.
00:03:39Itulah yang ditentukan prompt sebelum kami melakukan perubahan.
00:03:42Tapi yang selalu terjadi adalah setiap kali kami mencoba menggunakan dimensi kustom,
00:03:46alat pembuat gambar di anti-gravity hanya menghasilkan gambar kotak.
00:03:50Normalnya ini bukan masalah di model sederhana pada aplikasi Gemini atau Google AI Studio.
00:03:55Tapi di sini kami harus mengubah prosesnya dan memodifikasi skill tersebut.
00:03:58Hal ini direferensikan di sepanjang skill.md pada tahapan yang sesuai,
00:04:02dan juga direferensikan dalam aturan prompting bahwa setiap kali menulis prompt,
00:04:06dia tidak boleh menentukan dimensi atau rasio aspek, karena itu tidak terlalu penting.
00:04:10Dan jika memang perlu memotong gambar untuk penggunaan tertentu,
00:04:12dia harus melakukannya nanti menggunakan alat crop image-nya.
00:04:15Inilah alasan mengapa folder skrip sangatlah penting.
00:04:18Folder ini berisi alat-alat eksekusi yang bisa dipanggil Claude dengan argumen tertentu,
00:04:22dan Anda bisa menemukan alat-alat ini sesuai dengan kebutuhan penggunaan Anda.
00:04:25Skrip yang bagus biasanya memiliki argumen CLI dengan mode yang berbeda,
00:04:29sehingga Claude bisa memanggilnya dengan mudah.
00:04:31Dan satu hal yang kami temukan sangat dibutuhkan adalah mode pratinjau,
00:04:35yang membantu Claude melihat hasil sebelum benar-benar melakukan operasi destruktif.
00:04:40Mari istirahat sejenak untuk membicarakan sponsor hari ini.
00:04:42Setelah ini, kita akan melihat satu kesalahan struktural
00:04:45yang paling sering dilakukan orang saat membangun skill mereka.
00:04:47CREAM
00:04:47Bagi pengembang dan pendiri SaaS, masalah terbesarnya bukanlah membangun produk.
00:04:50Tapi kerumitan pajak global dan kepatuhan PPN.
00:04:53CREAM adalah merchant of record yang menangani beban ini sepenuhnya, sehingga Anda bisa fokus pada pengembangan.
00:04:58Dibuat untuk gelombang bisnis digital masa depan,
00:05:00CREAM menawarkan pengaturan super cepat untuk menerima pembayaran di 100+ negara sejak hari pertama.
00:05:05Mereka telah menghilangkan kebingungan soal biaya tersembunyi,
00:05:07dengan menawarkan tarif tetap transparan sebesar 3,9% + 40 sen.
00:05:11Cuma itu saja.
00:05:11Tarifnya sama baik pelanggan di Tokyo atau Texas, pakai American Express atau Google Pay.
00:05:16Anda mendapatkan fitur canggih seperti pembagian pendapatan otomatis untuk peluncuran yang lancar.
00:05:20Selalu gunakan mode uji terisolasi dan SDK TypeScript khusus mereka.
00:05:23Plus, CREAM menawarkan skill agen AI resmi untuk Claude Code, Cursor, dan WinSurf.
00:05:28Cukup minta asisten AI Anda untuk mengintegrasikan CREAM,
00:05:30dan asisten itu akan langsung membuat kode aman yang siap produksi berdasarkan praktik terbaik API terbaru.
00:05:36Ingat, jangan pernah memasukkan kunci API Anda ke dalam version control.
00:05:39Jika Anda siap untuk sistem pembayaran, klik link di komentar yang disematkan.
00:05:42Berhenti mencemaskan pajak dan mulailah berkembang dengan CREAM.io.
00:05:45Mungkin Anda sudah mendengar kami membahas tentang progressive disclosure di banyak video
00:05:50sebelumnya karena ini bukan cuma soal skill, tapi juga sangat penting untuk jendela konteks.
00:05:55Artinya agen hanya boleh mengetahui sesuatu jika memang membutuhkannya saat itu.
00:05:59Anda sudah tahu bahwa deskripsi selalu dimuat ke dalam konteks Claude Code.
00:06:03Inilah mengapa skill ini menggunakan struktur tiga tingkat,
00:06:06di mana tingkat pertama selalu ada di dalam konteks Claude.
00:06:09Lalu tingkat kedua adalah isi dari skill.md, yang harus punya referensi ke tingkat 3,
00:06:14termasuk alur kerja lengkap dan instruksi cara menggunakan referensi tersebut.
00:06:18Dalam struktur tersebut, panduan resmi mendefinisikan sesuatu yang disebut bagian kritis.
00:06:23Anda harus mencantumkan informasi terpenting tepat di bagian depan,
00:06:26dan tidak menyembunyikannya di balik berbagai instruksi lain.
00:06:29Bisa dilihat jelas bahwa skill ini hanya punya skill.md dan tidak punya struktur tingkat 3.
00:06:34Ini karena semua alur kerja, tips, berbagai rekomendasi,
00:06:38dan panduan pemecahan masalah diletakkan di dalam satu file saja.
00:06:41Bukan begini seharusnya struktur dibuat,
00:06:43karena mungkin dia tidak butuh semua panduan itu pada saat ini.
00:06:45Dia seharusnya memuat alur kerja terlebih dahulu,
00:06:47lalu menarik aturan prompting hanya saat waktunya menulis atau menggunakannya.
00:06:51Di sisi lain, skill ini terstruktur rapi dengan referensi
00:06:54dan berbagai skrip yang dibutuhkannya.
00:06:56Bersama alur kerjanya, file tersebut jelas memiliki pemicu kapan harus menjalankan tiap skrip,
00:07:01dan kapan harus mengecek referensi untuk berbagai panduan.
00:07:04Jadi di skill.md, isinya hanya alur kerja untuk skill nano banana.
00:07:08Setelah itu, di bagian referensi, terdapat berbagai panduan,
00:07:12di mana aturan prompting-nya berisi 13 aturan pengujian berbeda
00:07:15yang kami temukan setelah melakukan pengujian iterasi.
00:07:17Tapi meski dengan struktur ini, Claude Code masih saja melewatkan beberapa langkah.
00:07:22Setelah dia menghasilkan kumpulan gambar pertama,
00:07:24gambar-gambar itu pasti perlu dibuat ulang,
00:07:26karena nano banana tidak selalu menghasilkan output yang paling akurat.
00:07:29Yang mengejutkan adalah Claude tidak memverifikasi hal ini sendiri.
00:07:33Kami harus bertanya kepadanya apakah gambarnya sudah bagus sesuai desain yang ingin dibuat.
00:07:37Jika tidak, dia akan langsung mengimplementasikan apa pun yang dihasilkan.
00:07:41Lagi-lagi, itulah mengapa kami bilang iterasi adalah hal terpenting dalam membangun skill ini.
00:07:45Kami sebenarnya sudah punya langkah validasi aset yang menggunakan skrip validate images,
00:07:49tapi itu hanya memvalidasi apakah struktur gambarnya sudah benar,
00:07:52bukan apakah gambarnya sudah benar secara estetika.
00:07:55Itu sama sekali tidak ada hubungannya dengan estetika.
00:07:57Untuk estetika, Claude harus melakukan tinjauan visual sendiri,
00:08:00di mana dia akan melihat pertanyaan-pertanyaan ini dan memutuskan gambarnya lolos atau tidak.
00:08:04Dan jika gagal, dia juga harus memberikan alasannya.
00:08:07Ini karena jika gambar tersebut gagal dalam tinjauan visual,
00:08:09dia perlu menghapus gambar itu, lalu menulis prompt baru yang sudah diperbaiki.
00:08:13Dan tergantung mode mana yang Anda gunakan, jika Anda di mode anti-gravity,
00:08:16dia akan memberi prompt baru, termasuk alasan kenapa prompt sebelumnya gagal,
00:08:20agar anti-gravity bisa menghasilkan gambar yang baru dan lebih baik.
00:08:23Itulah sebabnya anti-gravity mengatakan bahwa dia telah membuat ulang gambar kaca,
00:08:27dan kali ini sudah sesuai dengan persyaratan.
00:08:29Jadi jika Anda membangun alur kerja, sangat penting untuk memiliki gerbang validasi ini.
00:08:34Gerbang validasi adalah penghalang eksplisit yang menentukan hal yang harus diselesaikan
00:08:39sebelum bisa berlanjut ke bagian alur kerja berikutnya.
00:08:41Dan seperti yang Anda lihat, jika dibiarkan, Claude akan dengan senang hati membangun UI dengan gambar yang hilang atau rusak,
00:08:46dan tidak akan memverifikasi apa pun kecuali Anda menyuruhnya.
00:08:48Jadi contohnya pada skill ini,
00:08:50bisa dilihat jelas bahwa alur kerjanya punya beberapa langkah yang harus diikuti.
00:08:54Dan di antara kesalahan lainnya,
00:08:55dia tidak menuliskan gerbang validasi apa pun sebelum lanjut ke langkah berikutnya.
00:08:59Gerbang validasi ini tetaplah berupa prompt.
00:09:01Bukan berarti ada perintah bash yang ajaib.
00:09:04Tapi jika ini harus dipakai terus setiap saat tanpa ada variasi,
00:09:08sebaiknya Anda membuat sebuah alat dan mencantumkan alat itu sebagai gerbang validasi.
00:09:11Namun dalam kasus ini, di antara berbagai langkah, kami punya gerbang validasi ini
00:09:15yang tidak hanya membantu mencegah perpindahan proses yang prematur,
00:09:19tapi juga membentuk proses kecil di dalam setiap alur kerja.
00:09:22Saat Anda bereksperimen dan mengulangi proses Anda berulang kali,
00:09:26Anda akan menemukan banyak error, beberapa di antaranya sudah Anda lihat.
00:09:30Misalnya, gambar yang hilang atau rusak, output API yang tidak lengkap,
00:09:34atau skrip yang berhenti karena kegagalan sebagian.
00:09:36Dan selama proses itu, saat Anda menyempurnakan skill tersebut,
00:09:39pembuat skill yang baik harus mencatat penanganan error untuk masing-masing masalah dan mendefinisikannya dengan jelas.
00:09:44Karena jika sudah pernah terjadi sekali, itu bisa terjadi lagi.
00:09:46Dan hal itu harus ditangani dalam format seperti ini.
00:09:48Tentukan error-nya, lalu penyebabnya agar Claude tahu,
00:09:51dan kemudian langkah-langkah untuk memperbaiki masalah tersebut.
00:09:54Sekali lagi, saat kami memintanya membuat landing page, dia cuma memuat skill dan membaca file Anda.
00:09:58Jika Anda sudah punya proyek Next.js, dia akan mendeteksinya dan mengajukan pertanyaan,
00:10:02seperti untuk apa landing page tersebut dan apakah Anda ingin gambar buatan AI atau tidak.
00:10:06Jika Anda bilang tidak mau, dia hanya akan menggunakan sumber daya front-end miliknya untuk membangun landing page.
00:10:11Ini karena saat membangunnya, kami juga meminta Claude untuk menyelesaikan
00:10:16skill desain front-end ini, yang punya banyak panduan luar biasa
00:10:19untuk mengimplementasikan situs yang benar-benar tampak bagus.
00:10:22Dan setelah semua eksperimen selesai, inilah hasil yang dia buat untuk kami.
00:10:27Jadi Anda bisa lihat ini adalah gambar yang kami hasilkan,
00:10:29dan gambar ini punya efek animasi yang halus.
00:10:32Selain itu, ini landing page yang sangat bersih, dan gambarnya tidak berlebihan.
00:10:36Gambar hanya dipasang di tempat yang memang membutuhkannya.
00:10:39Tapi saat pertama kali dibuat, ada masalah dengan font yang digunakannya.
00:10:43Font-nya tidak terlihat cocok.
00:10:44Jadi kami mencari font tipografi spesifik yang mereka coba gunakan,
00:10:48dan itulah yang akhirnya memperbaiki masalah tipografi kami.
00:10:51Jadi sekali lagi, kami cuma mengumpulkan berbagai sumber daya
00:10:54yang bahkan tidak berhubungan dengan skill desain nano banana ini,
00:10:57dan kami memasukkannya ke sana agar dia punya kemampuan itu saat dibutuhkan.
00:11:00Di bagian progressive disclosure, kita sudah membahas file tambahan berisi referensi dan skrip.
00:11:06Sekarang kita bahas lebih dalam soal referensi, yang merupakan kecerdasan spesifik domain.
00:11:09Dan meski skill Anda sudah siap untuk satu domain tertentu,
00:11:12ia bisa memiliki paket pengetahuan kecil yang terpisah sebagai komponen tersendiri juga.
00:11:16Misalnya, dalam referensi ini, kami mencantumkan pola desain,
00:11:19estetika front-end, dan aturan prompting.
00:11:21Dengan cara ini, kita bisa terus memperluas basis pengetahuan skill tanpa mengotori jendela konteks.
00:11:26Sampai sekarang, semua saran yang Anda dengar cuma memberitahu cara melatih Claude agar melakukan tugas lebih baik.
00:11:31Tapi tidak memberitahu cara menggunakannya dengan benar.
00:11:33Untuk itu, kami punya video lain di mana kami menunjukkan 10 cara
00:11:36terbaru untuk mendapatkan keuntungan maksimal dengan Claude Code.
00:11:39Anda akan melihat videonya di layar akhir,
00:11:41jadi sebaiknya klik itu saja daripada mencarinya secara manual.
00:11:43Itu membawa kita ke akhir video ini.
00:11:45Jika Anda ingin mendukung channel ini dan membantu kami terus membuat video seperti ini,
00:11:49Anda bisa melakukannya dengan menekan tombol super thanks di bawah.
00:11:51Seperti biasa, terima kasih sudah menonton, dan sampai jumpa di video berikutnya.