00:00:00Agen AI Anda kini sudah cukup mahir dalam hal desain.
00:00:02Mereka tidak lagi memiliki masalah di mana situs yang mereka buat memiliki elemen yang rusak.
00:00:06Namun karena semua model dilatih menggunakan data yang sama, desainnya sering kali terlalu
00:00:10serupa dan generik.
00:00:11Bahkan model Claude pun butuh perintah khusus untuk memastikan mereka tidak membuat kesalahan ini.
00:00:15Google Stitch adalah alat yang dibuat khusus untuk desain, dan sebenarnya dapat terhubung langsung
00:00:19ke dalam alur kerja Claude Code Anda.
00:00:21Jadi di video ini, kita akan membahas 4 cara menggunakan Stitch dengan Claude Code, untuk memastikan
00:00:26aplikasi Anda tidak terlihat seperti situs buatan AI pada umumnya.
00:00:30Pembaruan Stitch terbaru menggunakan sistem desain untuk membangun UI Anda, dan sistem ini
00:00:34dibangun berdasarkan semua fitur yang membentuk panduan UI situs web, yang mencakup berbagai
00:00:38kolom seperti warna, tema, font, dan lainnya.
00:00:41Fitur-fitur ini sebenarnya dibentuk dengan menggunakan berkas design.md.
00:00:45Berkas ini juga yang membuat desain dapat dipindahkan dari satu agen ke agen lainnya.
00:00:49Anda dapat memindahkan berkas design.md ini ke agen mana pun yang Anda gunakan untuk menerapkan desain,
00:00:54dan seluruh tema gaya akan tercocokkan dengan sempurna.
00:00:56Alasan mengapa ini berhasil adalah karena berkas tersebut dikhususkan untuk agen.
00:00:59Ini berisi bahasa yang lebih tertarget sehingga mereka dapat memahami maksud desain dengan mudah.
00:01:04Ini juga memvisualisasikan semua sistem desain di layar, jadi Anda tidak hanya harus menafsirkan
00:01:08gayanya hanya melalui teks.
00:01:10Anda bisa mendapatkan gambaran bagaimana tampilan aplikasi saat diterapkan dengan melihat
00:01:14warna dan font secara berdampingan.
00:01:16Setiap kali Anda membangun apa pun dengan Stitch, langkah pertama yang dilakukan Stitch adalah membuat design.md
00:01:21dan sistem desain.
00:01:22Bahkan jika Anda tidak memintanya secara eksplisit dalam perintah Anda.
00:01:25Setelah sistem desain ditetapkan, setiap kali Stitch membuat situs apa pun, ia mampu memastikan konsistensi
00:01:30di berbagai halaman dan proses pembuatan ulang.
00:01:32Ini memperbaiki masalah terbesar yang kami alami saat bekerja dengan Stitch, karena sebelumnya ia tidak mampu
00:01:36menjaga konsistensi desain sebaik sekarang.
00:01:39Namun alih-alih mengandalkan sistem desain yang dibuat Stitch sendiri, Anda juga dapat membuat
00:01:43sistem desain Anda sendiri.
00:01:45Anda dapat mengatur tema sesuai kebutuhan Anda, atau jika Anda memiliki berkas desain, Anda tinggal
00:01:49mengunggahnya, dan Stitch akan secara otomatis memasukkannya sebagai sistem desain dan memvisualisasikannya.
00:01:53untuk Anda.
00:01:54Yang penting adalah Anda perlu memastikan design.md apa pun yang Anda gunakan, mengikuti
00:01:58struktur yang tepat.
00:01:59Struktur ini dikenal telah dioptimalkan untuk agen, khususnya Stitch, dan membantu mereka
00:02:04memahami maksud desain secara efisien.
00:02:06Sering kali kita melakukan brainstorming ide aplikasi dengan Claude atau agen lainnya.
00:02:09Jadi jika Anda ingin membuat desain dari sesi brainstorming tersebut di Stitch, Anda dapat membawa
00:02:13gaya desain tersebut ke Stitch dalam bentuk berkas design.md.
00:02:17Anda dapat memberikan Claude struktur untuk berkas desain yang bisa didapatkan dari repositori keahlian resmi
00:02:21oleh Google yang berisi semua keahlian terkait Stitch.
00:02:25Dari contoh-contoh tersebut, Anda bisa mendapatkan templat berkas desain yang dioptimalkan untuk Stitch.
00:02:29Jadi agen mana pun yang Anda gunakan, Anda dapat memberikan gaya situs web yang ingin Anda buat
00:02:33beserta templatnya, sehingga agen tersebut dapat membuat design.md berdasarkan templat tersebut
00:02:38dengan mengikuti panduan gaya secara benar.
00:02:39Setelah agen Anda menghasilkan berkas design.md yang mendetail, Anda dapat membawanya ke Stitch dan cukup
00:02:44menempelkannya ke bagian design.md di bawah opsi pembuatan sistem desain baru.
00:02:48Saat Anda menekan simpan desain, Stitch akan membuat visualisasi untuk desain ini.
00:02:52Setelah divisualisasikan, Anda dapat menggunakannya dan meminta Stitch untuk menerapkan UI menggunakan
00:02:56sistem desain yang baru dibuat sebagai dasarnya.
00:02:59Stitch kemudian menerapkan desain tersebut, yang mencerminkan sistem yang Anda buat, menangkap
00:03:03gaya yang tepat dari design.md.
00:03:05Jadi dengan menggunakan sistem desain ini, Anda dapat membuat halaman sebanyak yang Anda mau secara iteratif, dan masing-masing
00:03:10akan mengikuti gaya desain yang sama.
00:03:12Jika Anda sudah membuat proyek di Stitch dan ingin mengekstrak design.md darinya,
00:03:16Anda dapat melakukannya dengan menggunakan keahlian yang dibuat oleh Google.
00:03:19Dalam keahlian yang mereka buat, fitur design.md mengubah proyek Stitch menjadi berkas design.md
00:03:25sesuai templat, yang dioptimalkan untuk alur kerja Stitch.
00:03:28Juga jika Anda menyukai konten kami, pertimbangkan untuk menekan tombol hype, karena itu sangat membantu
00:03:32kami membuat lebih banyak konten seperti ini dan menjangkau lebih banyak orang.
00:03:35Kemampuan Stitch memang mengesankan, tetapi masih ada celah dalam menerapkan UX yang baik
00:03:39untuk ceruk situs web tertentu yang sedang Anda bangun.
00:03:42Mendesain dari awal tidak selalu menjadi pilihan utama.
00:03:44Situs web yang sudah ada dibangun di atas pola yang benar-benar berfungsi untuk ceruk spesifik
00:03:48tempat mereka dibuat, jadi meniru pola mereka membantu Anda membuat situs web yang benar-benar berfungsi bagi
00:03:53pengguna Anda.
00:03:54Sebelumnya, saat membangun dengan AI, kita terbiasa memberikan tangkapan layar lalu meminta alat desain
00:03:58untuk menyalin desain tersebut.
00:04:00Alat tersebut akan mencoba meniru tata letak, komponen, dan segalanya apa adanya.
00:04:04Namun pembaruan baru Stitch telah mengubah hal itu.
00:04:06Dengan fitur desain ulang Stitch, Anda tetap memberinya tangkapan layar, tetapi sekarang ia tidak
00:04:10menyalinnya mentah-mentah.
00:04:11Stitch menggunakan tangkapan layar tersebut sebagai panduan gaya.
00:04:12Ia menarik pola, penempatan komponen, dan bahasa desain dari referensi tersebut serta
00:04:17menerapkannya ke situs web Anda sendiri.
00:04:18Jadi Anda pada dasarnya membangun sesuatu yang orisinal di atas pola yang sudah ada.
00:04:22Untuk menggunakan fitur desain ulang, Anda memerlukan tangkapan layar.
00:04:25Tapi mengambil tangkapan layar bagian demi bagian adalah cara yang melelahkan.
00:04:28Sebagai gantinya, gunakan ekstensi apa pun seperti GoFullPage untuk tangkapan layar satu halaman penuh agar Anda dapat
00:04:33memberikan referensi gaya dalam sekali jalan.
00:04:35Setelah Anda memberikan tangkapan layar situs web yang ingin Anda tiru desainnya, Stitch menggunakan
00:04:39tangkapan layar itu sebagai referensi gaya dan penempatan komponen untuk membuat UI lain yang serupa
00:04:44dengan yang ada di tangkapan layar.
00:04:45Ia menggunakan kemampuan pembuatan gambar Nano Banana untuk menghasilkan gambar di berbagai bagian yang cocok
00:04:50dengan gaya UI tersebut.
00:04:51Ada cara lain juga untuk menyalin gaya dari situs web lain.
00:04:54Anda dapat meniru gaya seluruh situs web dengan menyalin tautannya dan kemudian dari sistem desain,
00:04:59Anda dapat mengimpor desain dari situs web mana pun sebagai berkas design.md.
00:05:03Cukup berikan tautannya dan Stitch akan mengimpor sistem desain dari situs tersebut dengan merayapinya
00:05:06dan mengambil gaya serta tipografi darinya.
00:05:09Namun sering kali Stitch tidak mendapatkan gaya yang persis seperti yang Anda bayangkan.
00:05:12Dalam kasus tersebut, Anda cukup mengunggah sketsa kasar atau wireframe dengan gaya yang sebenarnya
00:05:17Anda inginkan.
00:05:18Anda juga dapat menentukan tema desain yang Anda inginkan untuk situs web Anda.
00:05:21Dengan referensi dan spesifikasi tema tersebut, UI yang dihasilkan oleh Stitch akan sesuai dengan wireframe
00:05:26dan panduan gaya secara tepat, membuat situs web selaras dengan kebutuhan Anda.
00:05:31Dan jika ada hal spesifik yang ingin Anda ubah, Anda dapat melakukannya dengan menggunakan
00:05:34fitur anotasi dan penyuntingan di Stitch.
00:05:36Anda dapat memberi anotasi pada bagian yang tidak Anda sukai dengan cara yang Anda inginkan, klik terapkan dan Stitch akan
00:05:40menerapkan gaya yang Anda minta.
00:05:42Namun sebelum kita lanjut, mari dengarkan pesan dari sponsor kami.
00:05:45Uptime Robot.
00:05:46Anda sedang membangun dengan API AI, entah itu OpenAI, Anthropic, atau apa pun.
00:05:49Semuanya terlihat baik-baik saja, status 200 OK, tetapi responsnya sampah.
00:05:52Aplikasi Anda rusak dan Anda baru tahu saat pengguna mulai mengeluh.
00:05:56Di situlah Uptime Robot berperan.
00:05:57Ia mendeteksi hal itu sebelum pengguna Anda merasakannya.
00:05:59Ia melakukan ping ke API Anda, memeriksa respons yang sebenarnya, bukan hanya kode status, dan memberi tahu Anda secara instan
00:06:04di Slack, email, atau di mana pun Anda bekerja.
00:06:06Pantau endpoint AI, lacak kredit API sebelum mencapai batas, dan tangkap kesalahan sebelum
00:06:10menjadi tiket dukungan pelanggan.
00:06:12Anda bahkan mendapatkan halaman status publik yang menunjukkan statistik uptime langsung dan riwayat insiden.
00:06:16Penyetelannya hanya butuh hitungan detik.
00:06:18Tambahkan endpoint Anda, tetapkan respons yang diharapkan, pilih peringatan Anda, dan Anda sudah aktif.
00:06:21Tersedia paket gratis dengan 50 monitor untuk mencobanya.
00:06:24Pemantauan API sudah termasuk hanya dengan $7 sebulan, lebih murah daripada menyelenggarakannya sendiri.
00:06:28Gunakan kode AI Labs untuk diskon 10%, berlaku hingga akhir tahun.
00:06:32Klik tautan di komentar yang disematkan dan mulailah membangun hari ini.
00:06:35Cara lain untuk membangun adalah dengan menghubungkan kemampuan Stitch dengan salah satu kemampuan agen
00:06:40Anda yang sudah ada seperti Claude Code atau agen lain yang mendukung keahlian agen.
00:06:44Google telah mengembangkan berbagai keahlian untuk tujuan ini dan menyediakan keahlian yang memberikan
00:06:48kemampuan tambahan bagi agen untuk bekerja dengan Stitch.
00:06:51Anda dapat menginstal keahlian apa pun yang Anda butuhkan dengan mengikuti langkah-langkah di repositori.
00:06:54Yang paling penting untuk digunakan dalam alur kerja Anda adalah keahlian Enhance Prompt.
00:06:58Ini mengubah perintah samar yang Anda berikan menjadi perintah yang dioptimalkan untuk Stitch, membuatnya
00:07:02persis seperti cara Stitch dioptimalkan untuk bekerja.
00:07:05Ini berisi referensi untuk kata kunci umum karena Stitch mengandalkan kata sifat untuk mengidentifikasi
00:07:09suasana hati daripada deskripsi desain yang tepat.
00:07:12Selain itu, ada keahlian untuk membangun situs web lengkap yang disebut Stitch Loop.
00:07:16Ini memungkinkan agen untuk menggunakan alat pengembang Chrome dan membangun situs web secara iteratif dari Stitch
00:07:20menggunakan pola pengulangan otonom seperti yang dijelaskan dalam perintah.
00:07:23Idenya adalah untuk mempertahankan pelacakan perintah yang tepat dan meneruskan perintah dari satu tahap ke tahap lainnya.
00:07:28Karena keahlian ini mengelola segalanya sendiri, ini adalah alur kerja yang paling mendekati pembangunan
00:07:32aplikasi dalam sekali pengerjaan.
00:07:33Namun sebelum Anda benar-benar menggunakan keahlian ini, Anda perlu memastikan bahwa Stitch MCP sudah terhubung
00:07:38karena inilah yang digunakan Stitch di balik layar untuk membangun dan mengambil desain.
00:07:41Ada video di kanal ini yang memandu proses instalasi MCP dan pemecahan
00:07:46masalah umum pada instalasi yang bisa Anda tonton.
00:07:49Kini saat Anda mengekspor desain dari Stitch, baik melalui MCP atau kode, biasanya ia menghasilkan
00:07:53berkas HTML besar di mana semuanya disatukan dalam satu berkas.
00:07:56Karena sebagian besar aplikasi berbasis React dan terstruktur komponen, hal ini menjadi beban tambahan
00:08:01bagi agen untuk memetakan HTML ke React.
00:08:03Jadi untuk menyederhanakan ini, Anda dapat menggunakan keahlian komponen React.
00:08:06Ini mengubah desain Stitch menjadi komponen modular menggunakan metrik validasi yang tepat.
00:08:10Ini menggunakan skrip untuk memvalidasi dan mengambil desain sehingga komponen dapat dipetakan dengan mudah.
00:08:15Dengan alur kerja ini, Anda dapat membuat Clod.md yang mencantumkan alur kerja yang ingin Anda gunakan.
00:08:20Urutannya harus seperti ini.
00:08:21Pertama, Anda menggunakan keahlian Enhance prompt untuk mengubah perintah samar Anda menjadi perintah spesifik Stitch,
00:08:26memastikan Stitch menerima input dengan benar.
00:08:28Kemudian ia harus membangun desain menggunakan Stitch loop.
00:08:31Setelah pembangunan selesai, ia perlu menerapkan desain di aplikasi menggunakan komponen React.
00:08:35Saat Anda memberikan perintah untuk halaman landas yang ingin Anda buat, ia akan mengikuti instruksi
00:08:39yang tercantum di Clod.md.
00:08:41Pertama-tama ia memuat keahlian Enhance prompt, yang kemudian menghasilkan perintah yang ditingkatkan menggunakan
00:08:45keahlian dan alat yang tersedia.
00:08:47Setelah perintah siap, ia akan meminta izin Anda untuk melanjutkan ke langkah berikutnya.
00:08:50Setelah disetujui, ia memuat keahlian Stitch loop dan menggunakan Stitch MCP untuk membuat proyek.
00:08:56Setelah proyek dibuat, ia mengirimkan perintah yang dihasilkan oleh keahlian Enhance prompt ke Stitch,
00:09:00yang pertama-tama menghasilkan sistem desain dan kemudian desain yang sebenarnya.
00:09:04Untuk memfasilitasi gambar, ia menggunakan pembuatan gambar sebagai bagian dari proses desain.
00:09:08Setelah desain selesai, ia pindah ke langkah berikutnya menggunakan keahlian komponen React untuk
00:09:12membuat struktur berbasis komponen dan menerapkan aplikasi dengan benar, dioptimalkan untuk kerangka kerja apa pun
00:09:17yang Anda gunakan.
00:09:18Jika Anda menjalankan server pengembang, Anda dapat melihat bahwa aplikasi tersebut memetakan desain dari
00:09:22Stitch secara tepat, termasuk efek hover pada tombol, membuat alur kerja ini jauh lebih mudah dan cepat
00:09:26untuk membangun aplikasi yang berfungsi penuh.
00:09:28Nah, Clod.md yang digunakan di sini, beserta semua sumber daya yang dibuat, tersedia di AI
00:09:33Labs Pro.
00:09:34Ini mencakup sumber daya dari video ini, serta semua video sebelumnya, yang dapat Anda
00:09:38unduh dan gunakan untuk proyek Anda sendiri.
00:09:40Jika Anda merasa apa yang kami lakukan bermanfaat dan ingin mendukung kanal ini, inilah cara terbaik
00:09:43untuk melakukannya.
00:09:44Tautannya ada di deskripsi.
00:09:46Membangun dari nol tidak selalu merupakan ide yang bagus, dan ini juga berlaku untuk komponen.
00:09:50UI yang dihasilkan oleh komponen React murni terlalu statis dan hanya berfokus pada tampilan, jadi
00:09:54Anda akan butuh beban kerja ekstra untuk menambahkan interaksi dan efek animasi.
00:09:58Alih-alih membangun dari awal, Anda harus menggunakan pustaka UI di aplikasi Anda karena mereka
00:10:02mempermudah pembuatan dengan fitur interaksi yang sudah terpasang di dalamnya yang dapat
00:10:07Anda gunakan untuk membuat UI Anda lebih hidup.
00:10:08Agar ini lebih mudah lagi, Google menyediakan keahlian ShadCN UI, yang memberikan panduan saat
00:10:13mengonversi aplikasi dari Stitch ke komponen ShadCN.
00:10:16Keahlian ini pada dasarnya adalah panduan mendetail tentang cara menerapkan komponen ini dengan benar
00:10:21di seluruh aplikasi.
00:10:22Karena ShadCN mendukung koneksi dengan banyak registri, Anda dapat memperluas kemampuannya
00:10:26lebih jauh lagi dengan mengintegrasikannya dan memanfaatkan fitur-fiturnya juga.
00:10:30Namun disarankan untuk menyiapkan ShadCN MCP sebelum membangun agar alur kerjanya
00:10:35tetap lancar.
00:10:36Untuk menggunakannya secara efektif, Anda juga harus menyiapkan berkas Clod.md dan menyertakan instruksi
00:10:41agar setiap kali Anda menggunakan Stitch MCP, ia secara otomatis menggunakan keahlian ShadCN untuk mengubah desain
00:10:47menjadi komponen.
00:10:48Karena Anda dapat menambahkan registri, Anda dapat menentukan mana saja yang ingin Anda gunakan dalam proyek Anda.
00:10:52Misalnya, saat kami membangun situs ini, kami memilih Glassmorphism dan Motion Primitives
00:10:57karena berisi komponen yang memiliki kesan premium.
00:11:00Anda dapat memilih mana pun yang paling sesuai dengan kebutuhan proyek Anda.
00:11:03Jika sebelumnya Anda telah membuat UI di Stitch, Anda dapat mengubahnya menjadi aplikasi dengan komponen
00:11:07ShadCN.
00:11:08Anda perlu menentukan nama proyek yang ingin Anda terapkan dan memintanya untuk menerapkannya
00:11:12di aplikasi.
00:11:13Pertama-tama ia akan mengambil proyek dengan nama yang ditentukan, lalu memuat keahlian ShadCN UI dan menggunakan
00:11:18panggilan alat ShadCN MCP beserta registri yang telah Anda tentukan untuk menerapkan seluruh
00:11:23aplikasi.
00:11:24Setelah implementasi selesai, aplikasi akan mencerminkan persis apa yang Anda lihat di Stitch
00:11:27tetapi dibangun dengan komponen ShadCN UI.
00:11:29Ini membuat perbedaan besar karena aplikasi yang dihasilkan dalam sekali jalan menjadi jauh lebih interaktif
00:11:34karena kemudahan implementasinya.
00:11:36Itu membawa kita ke akhir video ini.
00:11:38Jika Anda ingin mendukung kanal ini dan membantu kami terus membuat video seperti ini, Anda dapat
00:11:42melakukannya dengan menekan tombol super thanks di bawah.
00:11:44Seperti biasa, terima kasih telah menonton dan sampai jumpa di video berikutnya.