00:00:00Desain AI terus berkembang menjadi lebih baik di setiap peluncuran alat dan pembaruan model baru,
00:00:04tapi desain yang bagus tidak lahir hanya dengan mengandalkan satu alat dan berharap aplikasi Anda terlihat hebat.
00:00:09Selalu ada kombinasi alat dan sumber daya yang membuat desain menjadi lebih baik,
00:00:12namun yang lebih penting adalah menggunakan alat yang tepat untuk tujuan yang tepat pula.
00:00:16Stitch, alat desain AI milik Google, baru saja mendapat pembaruan keren yang membuat desain UI jadi jauh lebih mudah.
00:00:21Dan Vercel juga baru-baru ini merilis sesuatu yang telah melampaui ekstensi Chrome milik Claude
00:00:26dan kini menjadi alat andalan saya untuk pengujian browser.
00:00:29Banyak yang harus kita bahas hari ini karena saya tidak menyangka
00:00:32kombinasi ini bisa menghasilkan desain yang begitu solid.
00:00:34Google Stitch kini tersedia sebagai MCP untuk menghubungkan agen AI,
00:00:39memungkinkannya membuat dan mengelola proyek, serta membuat desain menggunakan agen tersebut.
00:00:43Dengan pembaruan ini, saya tidak perlu lagi memberikan prompt khusus ke Stitch sendiri dan membiarkan Claude yang melakukannya
00:00:48untuk saya. Ia menawarkan berbagai fitur seperti manajemen proyek dan kemampuan untuk membuat proyek baru
00:00:53serta mengambil semua proyek aktif Anda. Ia mampu mengelola proyek dengan menggunakan layar daftar
00:00:57serta mengambil proyek dan layar. Ia juga memungkinkan agen membuat desain baru dari prompt teks.
00:01:02Proses instalasinya dijelaskan langkah demi langkah dalam dokumentasi mereka.
00:01:06Ini memerlukan instalasi Google Cloud SDK menggunakan curl, tapi karena saya menggunakan Mac,
00:01:11saya menginstalnya menggunakan brew dan membiarkannya mengunduh Google Cloud CLI.
00:01:14Anda perlu login dua kali, sekali sebagai pengguna dan sekali sebagai aplikasi, karena Anda harus
00:01:19menghubungkannya ke proyek di dalam Google Cloud untuk mengaktifkan API Stitch di proyek tersebut,
00:01:24sebab ia menggunakan sumber daya proyek itu untuk membuat desain.
00:01:27Setelah melewati seluruh prosesnya, Anda bisa menghubungkan Stitch ke editor apa pun.
00:01:31Karena saya menggunakan Claude Code, saya mengaturnya di sana dan semua alatnya siap digunakan.
00:01:35Kini seseorang telah menyederhanakan seluruh proses setup yang panjang ini bagi kita dengan membuat Stitch MCP,
00:01:41yang menangani seluruh prosesnya. Mulai dari instalasi Google Cloud hingga pengaturan proyek,
00:01:45semuanya ditangani secara otomatis. Namun ini tidak resmi. Ini hanyalah alat eksperimental independen,
00:01:50meskipun bekerja dengan sangat baik untuk saat ini. Apa pun yang kita bangun,
00:01:54perencanaan sebelum implementasi adalah hal yang esensial. Saya sedang mengerjakan aplikasi simulasi wawancara teknis
00:01:59yang tidak hanya mencakup wawancara teknis. Ini juga mencakup jenis wawancara lainnya,
00:02:03semuanya ditujukan untuk pekerjaan di industri teknologi. Sepanjang video, saya menemukan banyak masalah pada
00:02:08cara kerja Stitch MCP dan bagaimana seharusnya alat ini dimanfaatkan lebih baik untuk proses desain saya.
00:02:13Saya telah memasukkan semua aturan tersebut ke dalam file Claude.md beserta kode sumber aplikasi ini di
00:02:18AI Labs Pro. Bagi yang belum tahu, ini adalah komunitas yang baru kami luncurkan di mana kami mengumpulkan
00:02:23semua sumber daya dari video ini dan video sebelumnya di satu tempat, baik itu prompt,
00:02:28perintah yang bisa digunakan kembali, skill yang kami buat untuk proyek kami, dan banyak lagi. Jika Anda merasa
00:02:33apa yang kami lakukan bermanfaat dan ingin mendukung channel ini, inilah cara terbaik. Link ada di deskripsi.
00:02:38Saya lebih suka merencanakan aplikasi menggunakan mode plan di Claude Code karena ia melakukan iterasi pada setiap aspek
00:02:43ide umum yang saya berikan dan menuliskan dokumen terperinci, tapi Anda bisa merencanakan dengan IDE pilihan Anda.
00:02:48Saya memberikan ide aplikasi saya ke Claude Code dalam mode planning dan memintanya membuat panduan UI,
00:02:53memastikan UI-nya tidak terlihat seperti desain AI generik yang biasanya dihasilkan.
00:02:58Meski prosesnya memakan waktu lama, saya melewati seluruh proses perencanaan tersebut. Sangatlah
00:03:03penting untuk membaca rencana tersebut secara menyeluruh karena saya bahkan harus menyempurnakannya sesuai keinginan
00:03:09dengan melakukan banyak perubahan. Saya terus menyempurnakan rencana tersebut sampai saya benar-benar puas
00:03:14dan pada akhirnya, saya mendapatkan rencana yang persis seperti yang saya inginkan. Setelah rencana desain final,
00:03:19saatnya untuk mengimplementasikan rencana tersebut. Jujur saja, saya lebih suka kemampuan desain Gemini
00:03:24daripada model-model Claude. Jadi saya meminta Claude untuk mengambil rencana yang baru saja dibuat,
00:03:29membuat desain yang sama persis dengan memulai proyek baru menggunakan Stitch MCP. Ia menggunakan alat MCP tersebut
00:03:35untuk membuat proyek baru dan kemudian mulai menghasilkan bagian-bagian desainnya. Ia mengidentifikasi proyek menggunakan
00:03:40ID proyek dan mengirimkan prompt terperinci ke Stitch, yang kemudian menerima prompt tersebut dan mulai membuat
00:03:45layar-layarnya. Ia menggunakan Gemini 3 Flash untuk menghasilkan bagian pertama. Satu hal yang saya kurang suka adalah
00:03:50ia mengirimkan prompt untuk semua bagian landing page secara terpisah, bukannya membuat satu desain panjang
00:03:55sebagaimana desain web biasanya dibuat. Ini mungkin akan menyulitkan saat kita harus menyatukannya
00:04:00dalam satu aplikasi. Jadi saya meminta Claude untuk membuat satu desain halaman panjang, bukan komponen individual.
00:04:05Claude kemudian menghasilkan prompt yang sangat detail yang diterima oleh Stitch dan digunakan untuk
00:04:10menghasilkan seluruh landing page sambil tetap mempertahankan semua ide dari pendekatan bagian-per-bagian tadi.
00:04:15Dalam desainnya, saya sangat suka bagaimana ia menggunakan referensi seperti komentar dan perintah terminal
00:04:20agar terasa lebih dekat dengan developer.
00:04:25Saya menggunakan fitur preview Stitch untuk memeriksa tampilan UI di berbagai platform dan ia telah
00:04:30mengimplementasikan efek hover yang halus. Desainnya responsif dan berfungsi dengan baik di mobile maupun desktop.
00:04:34Setelah saya puas dengan desain yang dihasilkan Stitch, saya ingin memindahkannya ke proyek Next.js saya
00:04:40di mana saya membangun seluruh aplikasinya menggunakan Claude Code. Saya meminta Claude menggunakan Stitch MCP
00:04:45untuk mengambil kode dari desain landing page lengkap tersebut dan mengimplementasikannya di proyek Next.js
00:04:51baru yang sedang saya kerjakan.
00:04:56Ia menggunakan alat get screen untuk mengambil layar. Alat ini memberikan link download untuk kodenya,
00:05:01jadi Claude menggunakan perintah curl pada link tersebut untuk mengekstrak kodenya. Setelah mendapatkan HTML-nya,
00:05:06menjadi mudah untuk mengimplementasikannya ke dalam proyek Next.js yang sudah ada. Ia mulai mengintegrasikan desainnya
00:05:11ke dalam aplikasi, tapi ia hanya membuat perubahan pada file page.tsx utama, menumpuk semuanya dalam satu file
00:05:17dan tidak mengikuti struktur komponen yang tepat seperti standar yang direkomendasikan untuk aplikasi berbasis React.
00:05:22Untuk saat ini, saya menjalankan server dev untuk melihat bagaimana tampilan UI yang diimplementasikan. Desain yang terpasang
00:05:26hampir identik dengan yang dihasilkan Stitch, kecuali penempatan teks di bagian hero.
00:05:31Ia telah mengimplementasikan semua efek hover, menambahkan animasi untuk bento grid, dan parallax scrolling
00:05:36di latar belakang. Untuk memperbaiki tumpukan kode dalam satu file tadi, saya meminta Claude menggunakan struktur
00:05:41komponen yang tepat agar lebih modular. Ia melakukan refactoring dan mengatur ulang kodenya menjadi satu set
00:05:46komponen UI dan halaman yang bersih serta terstruktur dengan baik, sehingga lebih mudah untuk ditelusuri.
00:05:51Dengan bantuan Claude Code dan Stitch, saya membuat aplikasi lengkap dengan tema yang menyatukan nuansa
00:05:57developer dengan estetika terminal. Namun, masih ada beberapa masalah UI. Misalnya, panel kode
00:06:02seharusnya bisa diedit karena di sanalah pengguna akan mengetik kode selama sesi wawancara teknis mereka.
00:06:08Selain itu, pertanyaannya harus muncul di bagian atas karena penempatannya saat ini membuat UX kurang nyaman bagi pengguna.
00:06:14Untuk menguji aplikasinya, saya menggunakan Agent Browser dari Vercel. Ini adalah alat CLI yang dirancang untuk agen AI
00:06:19yang dibangun dengan Rust dan Node.js, yang berarti ia jauh lebih cepat daripada alat otomatisasi browser tradisional.
00:06:24Instalasinya sederhana, cukup jalankan perintah install dan ia akan terpasang secara global di sistem Anda.
00:06:29Untuk saat ini, alat ini terbatas pada browser berbasis Chromium dan tidak tersedia di Firefox atau Safari.
00:06:34Agent Browser menawarkan fitur yang lebih baik daripada ekstensi Chrome Claude, Playwright, Puppeteer, atau alat dev lainnya.
00:06:40Ini karena ekstensi Chrome bergantung pada menjalankan browser secara penuh, mengambil screenshot,
00:06:44memetakan piksel secara visual, lalu menavigasi UI-nya. Sebaliknya,
00:06:50Agent Browser adalah alat CLI yang berjalan sebagai perintah bash dan bekerja dengan snapshot, bukan screenshot.
00:06:55Pada dasarnya, snapshot adalah pohon aksesibilitas (accessibility tree) dari seluruh halaman yang ditandai
00:07:00dengan selector untuk mengidentifikasi setiap komponen. Agen menggunakan selector ini untuk menavigasi halaman dengan efisien.
00:07:05Ia tidak berbagi sesi dengan browser Anda yang sudah ada dan berjalan di browser terpisah, jadi ia tidak akan bisa
00:07:10melakukan tindakan yang memerlukan sesi aktif Anda, tidak seperti ekstensi Claude yang berjalan di dalam browser
00:07:14Anda sendiri dan bisa melakukan tindakan atas nama Anda. Jika Anda ingin melihat perintah yang tersedia,
00:07:19Anda bisa melihat repositori GitHub-nya, yang berisi daftar detail semua perintah inti.
00:07:24Ini menunjukkan cara menavigasi UI, menggunakan selector, menyimulasikan kontrol mouse, mengelola cookie
00:07:30dan storage, bahkan memantau aktivitas jaringan. Untuk aplikasi saya, saya menambahkan file Claude.md
00:07:35dan menginstruksikannya untuk menggunakan alat agent browser untuk semua jenis pengujian. Saya juga memintanya
00:07:40menggunakan perintah help jika tidak tahu cara menggunakan perintah agent browser tertentu.
00:07:45Anda juga bisa mendapatkan aturan ini beserta panduan alur kerja lengkapnya di AI Labs Pro. Meskipun ini adalah alat
00:07:50otomatisasi browser headless, kita juga bisa menjalankannya dalam mode headed dengan mengaktifkan opsi headed,
00:07:55yang akan menampilkan jendela browser sehingga kita bisa melihat prosesnya. Saya meminta Claude menggunakan browser
00:07:59dalam mode headed untuk menguji UI aplikasi. Ia pertama-tama menggunakan perintah help untuk melihat semua perintah
00:08:05yang tersedia lalu membuka browser. Ia menggunakan pendekatan yang mirip dengan saran kami pada Claude browser use,
00:08:09yaitu mengambil snapshot satu halaman penuh alih-alih screenshot bagian per bagian seperti yang dilakukan ekstensi
00:08:14Chrome Claude, yang secara signifikan mempercepat proses pengujian sambil menjaga tingkat akurasi yang sama.
00:08:19Agen melakukan banyak tindakan, menavigasi seluruh aplikasi, dan menguji berbagai fitur dengan berpindah
00:08:24antar UI yang berbeda dan memeriksa tata letak visualnya. Ia menyelesaikan seluruh proses pengujian hanya dalam
00:08:29empat menit, sementara alat otomatisasi browser lain mungkin butuh waktu jauh lebih lama karena alat ini
00:08:34mengandalkan pohon aksesibilitas, bukan pendekatan screenshot. Ia juga mengidentifikasi bahwa editor kode
00:08:39perlu dibuat bisa diedit dan langsung mengimplementasikan perbaikannya. Ia kemudian mengujinya di browser
00:08:43dengan mengambil snapshot, mencari selector editor, dan menggunakan fungsi klik serta ketik dari agent browser
00:08:48untuk mengubah bagian kode guna melihat apakah sudah terimplementasi dengan benar. Sampailah kita di penghujung
00:08:53video ini. Jika Anda ingin mendukung channel ini dan membantu kami terus membuat video seperti ini, Anda bisa
00:08:57melakukannya dengan bergabung di AI Labs Pro. Seperti biasa, terima kasih telah menonton dan sampai jumpa
00:09:02di video berikutnya.