Cara Menggunakan Claude Design untuk Membangun Situs yang Indah
AAI LABS
Computing/SoftwareInternet Technology
Transcript
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.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video