스크립트
00:00:00Desain yang bagus sangatlah penting karena jika Anda menginginkan pelanggan, visual situs Anda adalah hal pertama
00:00:05yang mereka nilai. Ada banyak alat yang membantu hal ini dan Claude Design adalah salah satu
00:00:09yang paling kuat saat ini. Namun desain yang bagus tidak berasal dari sekadar memberikan perintah pada alat tersebut. Jadi di
00:00:14video ini kita akan melalui proses lima tahap yang dapat Anda jalankan sendiri dengan Claude Design
00:00:18Anda. Baik Anda belum pernah membuka Claude Design atau sudah menggunakannya selama berbulan-bulan, selalu ada
00:00:22sesuatu di sini untuk Anda. Jika Anda belum pernah membukanya sama sekali, tidak apa-apa karena kita mulai dari apa sebenarnya
00:00:27alat itu. Dan jika Anda sudah mendesain darinya, kita masuk ke cara kita mengintegrasikan Claude Design
00:00:32dengan Claude Code agar menjadi jauh lebih kuat. Jadi gunakan tanda waktu di bawah untuk langsung melompat ke sana.
00:00:37Sekarang jika Anda baru di saluran ini, selamat datang. Kita sebenarnya adalah perusahaan perangkat lunak dan kita telah membangun
00:00:41sistem lengkap untuk Anda seputar Claude Design berdasarkan proses internal kami. Jadi tanpa buang-buang waktu lagi
00:00:47mari kita masuk ke videonya. Bagian ini hanya untuk mereka yang tidak tahu apa itu Claude Design. Jadi
00:00:52jika Anda sudah mengetahuinya, Anda bisa melewati ke bagian berikutnya. Alat ini pertama kali keluar sebagai pratinjau riset
00:00:57ketika Claude meluncurkan model Opus 4.7 mereka. Ini pada dasarnya adalah alat desain dengan antarmuka yang sangat mudah digunakan
00:01:02yang memungkinkan siapa saja, bahkan orang yang tidak teknis, membuat desain yang bagus hanya dengan perintah sederhana.
00:01:07Dan alat ini tersedia di semua paket berbayar. Ini tidak berhenti pada situs web saja. Anda
00:01:12juga dapat mendesain slide, dokumen, dan bahkan membuat animasi dengannya. Selain itu Claude Design tersedia
00:01:17di Claude Desktop maupun situs web Claude. Jadi Anda tidak harus menginstal aplikasi desktopnya.
00:01:22Jika Anda ingin menggunakannya di aplikasi, Anda cukup mengunduhnya, menjalankan instalasi, dan masuk ke akun Anda.
00:01:27Kemudian Anda membuka bilah sisi, klik desain, dan antarmukanya terbuka tempat Anda dapat mulai menggunakannya.
00:01:32Claude Design memberi Anda semua model Claude untuk dipilih, bahkan Fable, yang merupakan model paling mumpuni
00:01:37mereka, meskipun Anda hanya mendapatkan akses terbatas ke sana. Unggulan mereka untuk penggunaan umum tetaplah Opus,
00:01:42dan itu masih yang terbaik untuk mendesain. Tapi masalah dengan model-model Opus ini adalah mereka menghabiskan
00:01:46banyak token. Haiku di sisi lain tidak menggunakan token sebanyak itu, tetapi mungkin memerlukan lebih banyak
00:01:51penyempurnaan untuk mendapatkan desain yang bagus darinya. Dan di atas itu, Anda dapat menyetel tingkat usaha untuk setiap
00:01:55model juga. Tingkat usaha pada dasarnya mengontrol seberapa keras model berpikir sebelum melakukan apa pun. Kami menggunakan
00:02:01Opus 5, model terbaru saat ini, pada tingkat usaha sedang untuk tugas desain kami karena memungkinkan kami mendesain
00:02:06dengan mudah tanpa membuang terlalu banyak token. Ini juga memungkinkan Anda membawa semua MCP dan keterampilan Anda, yang membuatnya
00:02:12jauh lebih mudah untuk menggunakan sistem Anda sendiri tepat di dalamnya. Bagi yang tidak tahu, MCP pada dasarnya adalah hal yang memungkinkan
00:02:18agen terhubung ke hal-hal di luar dirinya, seperti alat dan layanan lain, dan keterampilan adalah seperangkat
00:02:23instruksi yang mengajari agen cara melakukan sesuatu dengan lebih baik dengan panduan langkah demi langkah dan referensi yang dapat
00:02:28diikutinya. Sekarang sebelum Anda mulai, ada satu hal yang perlu diingat. Ada batasan berapa banyak desain
00:02:33yang dapat Anda buat. Claude Design berjalan dengan batas 5 jam, tetapi itu bukan hanya untuk desain Anda. Segala sesuatu yang lain yang
00:02:38Anda lakukan di Claude dihitung ke dalam hal yang sama. Dalam jendela 5 jam itu, ada batasan berapa banyak token yang
00:02:44dapat Anda habiskan, dan begitu habis, Anda harus menunggu hingga 5 jam tersebut selesai sebelum dapat menggunakannya
00:02:49lagi. Dan meskipun sudah jauh lebih baik daripada saat pertama kali keluar, Claude Design masih
00:02:53sangat boros token, jadi jika Anda menggunakannya secara intensif, perkirakan batas Anda akan lebih cepat habis. Jadi untuk
00:02:59mengatasi penggunaan token yang ekstensif itu, Anda perlu mengambil beberapa langkah sebelum langsung melompat ke pemberian perintah.
00:03:04Langkah-langkah ini penting karena memastikan Anda mendapatkan desain yang Anda inginkan tanpa membuang
00:03:09terlalu banyak token. Hal pertama yang perlu Anda lakukan adalah membuat file design.md. Ini adalah format yang
00:03:15dimulai Google, dan ini berisi semua detail desain merek Anda. Agen pengkodean AI Anda membaca file itu
00:03:20sebelum menulis apa pun, sehingga setiap layar yang diberikannya kepada Anda sesuai dengan merek. Itu tidak pernah harus menebak,
00:03:25sehingga tidak pernah keluar dari identitas merek. Sekarang Claude Design memiliki fitur yang memungkinkan Anda membuat sistem desain.
00:03:30Sistem desain pada dasarnya adalah seperangkat pilihan gaya yang muncul di situs Anda. Sistem ini berisi fon Anda,
00:03:35warna Anda, dan semua detail lain yang membentuk desain Anda, dan ini memungkinkan Anda menggunakan hal tersebut untuk membangun
00:03:40lebih banyak desain. Jadi semua desain yang dibangun menggunakan sistem desain akan mengikuti gaya yang sama dan terlihat seperti
00:03:46bagian dari situs yang sama. Tapi alasan utama mengapa Anda ingin mulai dengan file design.md yang telah ditentukan sebelumnya adalah karena
00:03:51semua model ini menghasilkan desain yang terlihat identik. Jika Anda membiarkan Claude Design membangun sistem desain sendiri,
00:03:57alat itu hanya akan kembali ke warna dan gaya generik yang digunakan model Opus di mana-mana, dan
00:04:02karena itu, situs Anda akhirnya terlihat seperti setiap situs buatan AI lainnya di luar sana. Tapi jika Anda
00:04:07menyerahkan file design.md sebagai dasar sistem desain, file itu memberi tahu persis apa yang Anda inginkan, sehingga jauh
00:04:12lebih terkontrol dan tidak kembali ke setelan bawaan tersebut. Dan seperti yang sudah kita sebutkan, alasan
00:04:17lainnya adalah konsistensi. Karena seluruh sistem desain didasarkan pada satu file tersebut, setiap halaman mengikuti
00:04:22gaya yang persis sama, yang merupakan hal menjaga situs banyak halaman Anda tetap terlihat konsisten. Jadi untuk itu, kami membuat keterampilan
00:04:27yang merencanakan file design.md untuk Anda. Sekarang untuk menggunakan keterampilan ini, Anda menjalankannya di dalam Claude Code. Dan Claude
00:04:33Code pada dasarnya adalah alat lain oleh Anthropic. Ini pada dasarnya adalah alat pengkodean AI yang Anda jalankan di terminal Anda
00:04:39yang dapat membangun seluruh aplikasi untuk Anda. Untuk menginstalnya, Anda cukup menuju ke situs resmi mereka, menyalin perintah instalasi
00:04:45, dan menjalankan perintah itu di terminal Anda. Setelah selesai, Anda mengetik Claude di terminal,
00:04:49dan Anda dapat mulai menggunakannya dengan mengetikkan perintah Anda. Karena kami akan membangun aplikasi di Claude
00:04:54Code, kami hanya menjatuhkan keterampilan ini ke dalam folder keterampilan di dalam folder .claude, yang pada dasarnya
00:04:59merupakan tempat semua pengaturan dan konfigurasi Claude Code berada. Anda mungkin tidak memiliki folder ini, tetapi Anda dapat
00:05:05memberitahu Claude Code di kotak perintah bahwa Anda perlu menginstal keterampilan di proyek tersebut, dan itu akan mengaturnya
00:05:10untuk Anda dan bahkan memasukkan keterampilan itu ke sana sendiri. Folder .claude tidak akan terlihat saat Anda membukanya
00:05:15di Finder. Itu karena namanya dimulai dengan titik, dan file yang dimulai dengan titik diperlakukan sebagai
00:05:20file sistem, sehingga Finder menyembunyikannya secara default. Jadi untuk masuk ke sana, Anda memerlukan editor kode, yaitu
00:05:25pada dasarnya aplikasi yang memungkinkan Anda melihat semua file proyek Anda di satu tempat yang terorganisir. Yang kami gunakan adalah
00:05:31VS Code, milik Microsoft, dan itu adalah yang paling sering digunakan pembangun hanya karena betapa mudahnya bekerja
00:05:36dengannya. Untuk menginstalnya, Anda menuju ke situs resmi mereka, unduh penginstal untuk sistem apa pun
00:05:40yang Anda gunakan, dan jalankan instalasinya. Kemudian Anda cukup membuka folder proyek Anda di dalamnya, dan Anda akan dapat
00:05:45melihat semuanya, termasuk file yang tersembunyi. Kemudian kapan pun Anda ingin membangun aplikasi, Anda cukup
00:05:49memanggil keterampilan ini dengan perintah garis miring, yang pada dasarnya adalah pintasan yang Anda ketikkan dengan garis miring untuk
00:05:54memicunya dan memberi perintah yang memberi tahu apa yang ingin Anda bangun. Alat ini mewancarai Anda dan merencanakan
00:05:59identitas visual produk dengan Anda secara detail, dan begitu semuanya siap, alat ini menuliskan
00:06:03seluruh file design.md, dan juga memvalidasinya terhadap standar Google dengan menjalankan skrip. Keterampilan ini
00:06:09juga menyimpan referensi anti-slop, yang pada dasarnya adalah semua pola umum yang membuat sebuah situs ketahuan sebagai buatan
00:06:15AI. Jadi merencanakan file design.md terlebih dahulu adalah pilihan terbaik. Juga, jika Anda bertanya-tanya di mana
00:06:21mendapatkan keterampilan ini, jangan khawatir, kami akan memberitahu Anda nanti di video. Sekarang, aplikasi yang kami bangun dalam video ini
00:06:26adalah aplikasi manajemen proyek tempat Anda mengelola semua proyek pengkodean Anda di satu tempat. Jadi untuk memulai,
00:06:31pertama-tama Anda memberikan perintah kepada Claude Code dengan perintah garis miring untuk keterampilan tersebut, menceritakan tentang aplikasi yang
00:06:36ingin Anda bangun secara garis besar dan untuk apa aplikasi tersebut akan digunakan, dan itu dimulai dengan menganalisis identitas visual
00:06:41ide Anda. Setelah itu selesai, ia mulai menanyakan pertanyaan kepada Anda, seperti apakah Anda memiliki
00:06:46warna dalam pikiran untuk situs web Anda. Jika Anda telah memutuskan warna merek Anda, Anda dapat menyerahkannya,
00:06:51atau Anda dapat membiarkannya memilih sendiri. Karena Anda menggunakan keterampilan tersebut, alat ini tidak akan menggunakan warna slop secara default,
00:06:55jadi Anda tidak perlu khawatir tentang tampilan generik itu, tetapi tetap lebih baik untuk memutuskannya
00:07:00terlebih dahulu. Apa yang biasanya kami lakukan adalah menggunakan coolers, yaitu situs yang menghasilkan dan memvisualisasikan
00:07:05palet warna, sehingga Anda dapat melihat bagaimana warna-warna tersebut terlihat berdampingan. Setelah Anda menemukan kombinasi warna
00:07:09yang Anda sukai, Anda dapat mengklik ekspor, lalu memilih opsi kode, dan itu akan memberi
00:07:14Anda teks ini yang dapat Anda salin dan tempel ke Claude Code. Claude Code akan memasukkan ini
00:07:18ke dalam file design.md Anda. Setelah itu, alat ini akan membuat file design.md dan menjalankan
00:07:24beberapa langkah verifikasi. Dan file desain tersebut keluar persis seperti yang dirancang oleh Google.
00:07:29Sekarang format Google itu mudah dipahami oleh model AI, tetapi sulit bagi Anda untuk benar-benar
00:07:33membayangkan desain yang akan dihasilkan dari ini, jadi Anda tidak dapat mengetahui apakah itu desain yang
00:07:38ingin Anda selesaikan atau apakah perlu diubah. Tapi jangan mengujinya di dalam Claude Design. Anda menghasilkan
00:07:43desain Anda di sana, dan misalkan Anda tidak menyukainya. Sekarang Anda harus kembali ke file design.md,
00:07:48mengubahnya, dan menghasilkan semuanya lagi. Setiap putaran tersebut memakan token Anda. Ada banyak
00:07:53alat yang hanya akan memvisualisasikan file design.md untuk Anda, dan salah satu yang kami gunakan adalah design.md.space. Setiap
00:07:59alat ini menunjukkan kepada Anda bagaimana file desain Anda terlihat dan bagaimana semua warna yang dipilihnya untuk berbagai area
00:08:04bekerja bersama. Alat ini memvisualisasikan semua elemen juga, yang membuatnya jauh lebih mudah untuk diputuskan. Sekarang ini
00:08:10hanya satu cara untuk membuat file design.md, tetapi ada cara lain. Jika Anda tidak ingin membuatnya sendiri,
00:08:15Anda bisa menyalin desain dari situs web populer sebagai sampel. Dan sejujurnya, menyalin salah satu
00:08:19sebagai referensi adalah apa yang sudah dilakukan banyak orang. Anda mengambilnya sebagai titik awal dan membuat perubahan
00:08:24untuk menjadikannya milik Anda sendiri, seperti bagaimana banyak orang telah mengambil tampilan sederhana Notion dan mengerjakannya ke dalam
00:08:29desain mereka sendiri setelah beberapa penyesuaian. Untuk itu, ada situs bernama getdesign.md, yang mencantumkan
00:08:34banyak merek dan semua gaya mereka sebagai file design.md yang bisa kamu ambil sendiri. Karena kita
00:08:39sudah punya file design.md sendiri, kita bisa lanjut menggunakan Claude Design dan membuat
00:08:44sistem desain baru darinya. Saat membuat yang baru, sistem akan menanyakan detail produk. Tapi karena kamu
00:08:49sudah punya design.md, kamu tinggal mengunggahnya sebagai aset. Lalu sistem mulai menghasilkan sistem baru dengan
00:08:55membaca file tersebut, membuat daftar tugas, dan mengerjakannya satu per satu. Setelah beberapa saat, Claude Design
00:09:00membuat sistem desain dan memvisualisasikan semuanya untukmu, membangun berbagai elemen yang akan
00:09:06menjadi bagian dari aplikasi tempatnya digunakan. Agar kamu bisa mengikuti alur kerja ini, kamu memerlukan
00:09:10skill ini. Kami telah mengunggahnya ke GitHub dan menautkannya di deskripsi agar kamu bisa mendapatkannya gratis.
00:09:14Untuk menggunakannya, berikan saja tautan ini ke Claude Code dan suruh untuk mengaturnya, lalu tool itu akan memasang
00:09:19serta menempatkannya di folder .claude tanpa kamu harus melakukan apa pun. Setelah sistem desain
00:09:24sudah terkunci dan saatnya benar-benar digunakan, ada satu langkah penting lagi sebelum kamu mulai
00:09:29membangun situs. Yaitu membuat kerangka (wireframe) dari apa yang ingin kamu bangun. Wireframe pada dasarnya adalah
00:09:34sketsa kasar yang memungkinkanmu melihat letak semua elemen dan apakah penempatannya sudah tepat. Kamu
00:09:39sebenarnya bisa langsung membangun situsnya, tapi itu menimbulkan masalah. Kamu harus menunggu lama
00:09:43karena Claude Design lambat membuat desain, dan jika setelah semua itu ternyata hasilnya tidak sesuai
00:09:48kebutuhan, kamu harus mengulang semuanya dari awal. Jadi di Claude Design, pilih sistem desain yang
00:09:53baru saja kamu buat, pilih opsi wireframe, dan berikan perintah berisi detail jumlah layar yang kamu inginkan.
00:09:58Setelah itu, kamu juga bisa membuat beberapa opsi untuk setiap layar sehingga Claude bisa memberikan beberapa
00:10:03gaya berbeda untuk tiap layar guna dipilih. Prosesnya tidak lama, lalu kamu bisa
00:10:08melihat strukturnya dan meninjau semua variasi yang dibuat untuk halaman yang sama. Fitur ini juga
00:10:12memiliki fitur komentar, jadi untuk mengubah sesuatu, kamu tinggal meninggalkan komentar di bagian itu. Komentar pada dasarnya
00:10:18mengirimkan detail persis dari elemen tersebut beserta perintahmu agar Claude tahu bagian mana yang harus
00:10:23diubah dan bagaimana caranya. Hal ini jauh lebih baik daripada sekadar memberi perintah dan membiarkan Claude menebak
00:10:28bagian mana yang kamu maksud sendiri. Untuk menambahkannya, pilih fitur komentar, klik pada hal
00:10:33yang ingin kamu ubah, dan ketik perubahan yang kamu perlukan. Kamu bisa menambahkan komentar sebanyak yang dibutuhkan.
00:10:38Kamu bisa mengirimkannya satu per satu, tapi lebih baik mengelompokkannya dan mengirim sekaligus agar sistem
00:10:42menyelesaikannya bersamaan dan memperbaiki semuanya dalam sekali jalan. Itu akan meminimalkan waktu menunggumu. Jadi teruslah
00:10:48menyesuaikannya sampai kamu puas dengan strukturnya, dan jika sudah selesai di sini, kamu bisa lanjut. Jika
00:10:52kamu menikmati videonya sejauh ini, berlanggananlah ke saluran ini dan tekan tombol suka. Dukungan kecil
00:10:57ini sangat berarti bagi kami. Setelah merancang wireframe, saatnya mendesain tampilan yang
00:11:03sebenarnya. Kamu juga bisa menggunakan sistem yang sama untuk membuat beberapa variasi. Karena biasanya
00:11:06kamu meminta Claude membuat beberapa variasi dari desain yang sama, pertama-tama pilih variasi yang kamu inginkan
00:11:10dari yang baru saja dibuat. Setiap halaman diidentifikasi dengan nomor kodenya, jadi pilih berdasarkan nomor itu.
00:11:15Setelah itu, berikan perintah yang menyatakan bahwa kamu ingin layar-layar ini diubah menjadi desain detail penuh
00:11:20serta mintalah untuk mempertahankan tata letak dan struktur dari wireframe dengan jarak dan hierarki yang rapi.
00:11:26Claude Design kemudian membaca semua elemen yang dibuatnya saat membangun sistem desain.
00:11:31Dan menggunakannya untuk membangun seluruh situs agar hasilnya persis sesuai dengan sistem desain
00:11:36dan wireframe, persis seperti yang kita butuhkan. Seperti pada wireframe, kamu bisa berkomentar dan memperbaiki hal
00:11:41di sini juga. Kamu mungkin butuh banyak perubahan karena sistem ini cenderung kurang tepat memilih warna tombol.
00:11:46Beberapa tombol harus menarik perhatian dan menggunakan warna tebal agar menonjol, jadi kamu bisa memintanya
00:11:50untuk memperbaiki hal tersebut. Karena dibangun di atas wireframe, situs yang dihasilkan tampak agak kosong
00:11:55jika dibiarkan sendiri dengan bagian dasar saja di atas sketsa kasar, jadi kamu bisa memintanya menambah tekstur
00:12:00dan elemen untuk tampilan yang lebih padat. Kamu juga bisa menerapkan pengeditan langsung pada desain, jadi jika ada perubahan kecil
00:12:05seperti menghapus elemen tertentu, kamu bisa melakukannya langsung pada desain tanpa perlu meminta Claude
00:12:10lewat prompt. Dengan begitu perubahan langsung diterapkan tanpa kamu harus menunggu lama dan membuang token untuk hal kecil.
00:12:15Setelah selesai melakukan perubahan, kamu bisa meminta Claude Design untuk memoles tampilan secara keseluruhan,
00:12:20dan ia akan membuat perubahan yang halus dan bermakna pada desain. Versi pertama aplikasi ini
00:12:25sudah selesai, tapi ada sesuatu yang kurang, yaitu animasinya. Hal ini penting karena membuat situs
00:12:29lebih nyaman digunakan dan mengarahkan pandangan ke hal yang penting. Sentuhan kecil seperti efek muncul saat
00:12:35discroll atau sentuhan kecil lainnya membuat situs terasa lebih hidup. Untuk itu, kami memberikan perintah
00:12:40kepada Claude Design untuk menambahkan animasi di semua layar, seperti elemen yang muncul saat digulir atau sentuhan kecil
00:12:45lain yang membuat situs terasa lebih hidup. Kami juga berpesan agar animasinya dibuat halus dan tidak
00:12:50terlalu memantul karena bisa terasa aneh. Setelah Claude Design selesai, kamu bisa melihat animasi gulir
00:12:55dan teks muncul yang membuat keseluruhan situs terasa jauh lebih interaktif. Begitu kamu
00:13:00puas dengan desainnya, kamu bisa pindah ke langkah berikutnya, yaitu penyerahan (handoff). Desain di Claude
00:13:05Design kini sudah final, dan saatnya menghidupkannya dengan mengubahnya menjadi produk nyata yang akan
00:13:10kita serahkan pada akhirnya. Sebelumnya Claude Design tidak memiliki fitur ini, tetapi sekarang kamu bisa mengekspor desain
00:13:15langsung ke Claude Code. Fitur ini menggunakan Claude Design MCP, yang pada dasarnya memungkinkan Claude Design dan
00:13:21Claude Code saling berkomunikasi. Komunikasi ini berjalan dua arah. Jadi kamu bisa memindahkan
00:13:26desain dari Claude Design ke Claude Code dan membawanya kembali dengan cara yang sama. Kamu buka Claude
00:13:31Code lagi dan tempelkan perintah yang kamu dapatkan dari Claude Design. Tool ini mulai membaca metadata,
00:13:36yakni informasi ringkasan tentang desain, lalu mencantumkan file proyek. Ia membaca sistem
00:13:42desain terlebih dahulu karena di situlah desain didefinisikan, lalu membaca semua elemen satu
00:13:47persatu. Setelah memiliki desain lengkap, ia membangunnya di project-mu dengan semua animasi yang ada di
00:13:52Claude Design. Namun kita harus memeriksa ulang konversi ini untuk memastikan semuanya berjalan benar. Secara visual,
00:13:57semuanya tampak bagus, tapi mungkin masih ada masalah internal saat kode mentah dari Claude Design
00:14:02diubah menjadi aplikasi nyata. Jadi kami meminta peninjauan mendalam, dan sistem mulai memeriksa file design.md
00:14:08dibandingkan dengan apa yang benar-benar dibangun untuk melihat apakah keduanya cocok. Peninjauan ini menemukan beberapa masalah
00:14:12seperti masalah responsivitas, yang berarti aplikasi tidak tampil pas di berbagai ukuran layar,
00:14:17seperti ponsel atau tablet. Apa yang dibangun oleh Claude Design cenderung mengalami masalah ini karena
00:14:22ini masih versi awal, jadi apa pun yang dirancangnya akan tampil paling optimal untuk hal persis yang dibuatnya. Desain
00:14:27untuk situs web akan tampak hebat di sana, tapi belum tentu di ukuran layar lain, jadi kami menjalankan perbaikan,
00:14:32dan setelah itu bagian visual aplikasi berfungsi dengan baik serta responsif. Sekarang untuk benar-benar menyelesaikan
00:14:36aplikasi ini agar berfungsi, kita perlu menghubungkannya ke sesuatu yang disebut basis data (database). Masalahnya
00:14:41saat ini adalah meskipun aplikasinya berfungsi penuh, dan jika kita mengklik tombol, aplikasi akan bekerja dan menambahkan
00:14:46detail pada proyek baru, tetapi jika kita membuka aplikasinya lagi, semua progres yang kita buat di dalam aplikasi
00:14:51akan hilang. Inilah sebabnya kita memerlukan database agar semua data tersebut tersimpan di dalam aplikasi dan orang-orang
00:14:57dapat benar-benar menggunakannya. Untuk itu kami menggunakan Supabase. Ini adalah salah satu penyedia backend paling populer
00:15:02di luar sana, dan salah satu cara terbaik untuk mengelola pengguna serta semua datamu. Supabase tidak asing bagi kami.
00:15:08Kami menggunakannya di hampir setiap aplikasi yang kami buat, terlepas dari untuk siapa kami membangunnya, dan bahkan banyak
00:15:12tools internal kami yang menjalankan seluruh setup-nya di atas Supabase. Alasannya karena platform ini meringankan
00:15:17banyak pekerjaan yang seharusnya harus kita lakukan sendiri. Ini juga merupakan salah satu database yang paling banyak digunakan,
00:15:22hanya karena kemudahannya terhubung dengan AI agent seperti Claude Code. Supabase juga memiliki agent skill yang berisi
00:15:28instruksi, skrip, dan sumber daya yang dapat digunakan agent untuk bekerja dengan Supabase secara lebih andal. Dengan begitu,
00:15:33agent tahu semua yang dibutuhkannya untuk memaksimalkan tools Supabase. Untuk memasangnya, kamu tinggal menyalin
00:15:39perintah instalasi dan memberikannya kepada agent. Di dalam bundle tersebut terdapat dua skill. Yang pertama adalah
00:15:43Supabase skill yang pada dasarnya merupakan panduan cara menggunakannya, dan yang kedua adalah best practices skill,
00:15:48yang berisi cara terbaik untuk mengoptimalkan kinerja aplikasi Anda. Setelah instalasi selesai,
00:15:53Anda akan melihat kedua keterampilan baru tersebut ditambahkan ke proyek Anda. Keterampilan Supabase aktif setiap kali ada
00:15:58database atau login, dan best practices skill akan aktif jika kamu ingin Claude Code membuat
00:16:04aplikasimu lebih cepat dengan menyebutkan kata “optimize performance” di dalam prompt. Semua itu
00:16:08didukung oleh pustaka referensi besar untuk segala jenis masalah. Setelah skill ini terpasang,
00:16:13kamu bisa memberikan prompt kepada Claude Code untuk membangun backend dan menghubungkan desain yang ada ke dalamnya,
00:16:18sehingga seluruh aplikasi benar-benar berfungsi. Karena kita tidak ingin agent ikut campur dalam struktur
00:16:22organisasi data aplikasi, kita sudah membuatnya sendiri sebelumnya dan menambahkannya ke dalam
00:16:27folder utama proyek. Karena skill hanyalah kumpulan instruksi, skill tersebut tidak dapat menjangkau proyekmu
00:16:32di server Supabase dan membuat perubahan di sana. Itu hanyalah teks yang memberi tahu agent apa yang harus dilakukan,
00:16:36jadi ia tidak dilengkapi dengan tool apa pun yang memungkinkannya bekerja pada hal di luar agent. Itulah sebabnya Supabase
00:16:41skill memintamu untuk menghubungkan CLI mereka, yaitu tool yang kamu jalankan dari terminal,
00:16:46atau menggunakan MCP. Salah satunya akan memberikan tool bagi agent untuk bekerja langsung pada proyek Supabase-mu,
00:16:51sehingga kamu tidak perlu melakukan apa pun secara manual. Kami memilih MCP karena lebih mudah diatur,
00:16:56dan kami tidak perlu direpotkan oleh kunci (keys) yang memungkinkan CLI masuk ke akunmu. Untuk menghubungkannya,
00:17:01kamu tinggal menuju situs resmi mereka, menyalin perintah instalasi untuk agent yang kamu gunakan,
00:17:05dan menjalankannya di terminal yang terbuka di folder proyekmu. Setelah itu, jalankan perintah /mcp
00:17:10di dalam Claude Code dan kamu akan melihatnya terhubung, tetapi kamu belum bisa langsung menggunakannya karena
00:17:15belum masuk (log in). Jadi setelah memilih Authenticate, kamu akan diarahkan ke peramban untuk masuk,
00:17:20dan setelah itu MCP akan terhubung. Begitu MCP terhubung, Claude Code kemudian memuat skill
00:17:25tersebut dan mulai mengerjakan aplikasi. Ia membuat banyak perubahan dan menjalankan pengujian terhadap permintaan database
00:17:30tersebut untuk memastikan versinya yang terbaik. Ia juga memastikan untuk mengunci semua area yang
00:17:34seharusnya tidak dapat diakses oleh sembarang pengguna, semua berkat panduan yang ada di dalam skill tersebut. Dan begitulah,
00:17:39Supabase menangani seluruh backend untukmu, sepenuhnya melalui skill ini. Jadi sekarang seluruh aplikasi telah dibangun
00:17:44dan benar-benar berfungsi. Tinggal satu langkah tersisa, yaitu deployment, yang pada dasarnya menaruhnya secara online
00:17:49agar siapa pun di luar sana bisa menggunakannya. Tapi kita tidak akan membahasnya di sini, jadi nantikan
00:17:53video-video mendatang di mana kita akan membahasnya secara detail. Ngomong-ngomong, skill yang kami berikan ini sebenarnya bagian dari
00:17:59sistem desain yang lebih besar yang kami gunakan secara internal dalam proyek-proyek kami. Jadi jika kamu ingin akses ke sistem itu,
00:18:04kamu bisa mendapatkannya di dalam AI Labs Pro, yaitu komunitas kami. Di sanalah tempat kamu akan menemukan
00:18:08skill dan sumber daya lain yang kami tunjukkan dalam video-video kami, beserta tempat untuk berinteraksi dengan
00:18:14tim kami. Jadi jika kamu merasakan manfaat dari apa yang kami lakukan dan ingin mendukung channel ini, inilah cara terbaik
00:18:18untuk melakukannya. Tautannya ada di deskripsi. Itu mengantar kita ke penghujung video ini. Jika kamu ingin mendukung
00:18:23channel ini dan membantu kami terus membuat video seperti ini, kamu bisa melakukannya dengan menggunakan tombol super thanks
00:18:28di bawah. Seperti biasa, terima kasih sudah menonton dan sampai jumpa di video berikutnya.
커뮤니티 글
아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!
이 영상에 대해 글쓰기