Gila Banget... Ini Mengakhiri Debat Desain Antara Google Stitch VS Claude
AAI LABS
Computing/SoftwareSmall Business/StartupsPhotography/ArtInternet Technology
Transcript
00:00:00Gemini telah menjadi model unggulan dalam hal desain meskipun tidak setara di bidang lainnya,
00:00:05terutama dengan alat desainnya, Stitch, yang telah kami gunakan berkali-kali dalam alur kerja kami.
00:00:09Ini menjadi lebih baik saat Stitch merilis pembaruan 2.0 dengan berbagai fitur baru,
00:00:14yang membuatnya semakin unggul. Namun Anthropic juga bangkit dan memasuki ruang desain dengan
00:00:19perilisan Opus 4.7 dan Claude Design yang memberikan dampak besar hingga orang-orang mulai menyebutnya
00:00:24akhir dari Figma. Namun pertanyaan sebenarnya adalah mana yang lebih baik? Jadi untuk menyelesaikannya,
00:00:30kami akan mengujinya di berbagai kategori dan pada akhirnya, Anda akan tahu mana
00:00:34yang layak menempati posisi dalam alur kerja Anda. Baik Claude Design maupun Google Stitch memiliki banyak fitur
00:00:39yang membedakan satu sama lain. Claude Design dirilis bersama Opus 4.7 dan dengan cepat
00:00:45mendapat popularitas sebagai pembunuh Figma karena fitur-fitur interaktifnya. Modelnya
00:00:49sendiri menjadi sangat ahli dalam desain dan bersama alat desain mereka, hasil desainnya meningkat pesat.
00:00:54Google Stitch di sisi lain sudah ada sejak lama dan tidak terlalu bagus sampai Google
00:00:58merilis Gemini 3, model yang jauh lebih baik dalam desain dibandingkan semua model lainnya. Jadi
00:01:04dikombinasikan dengan Stitch, hasil desainnya meningkat secara signifikan. Sekarang mari kita lihat di mana
00:01:08masing-masing benar-benar unggul. Claude Design memiliki fitur di mana Anda dapat membuat presentasi menggunakan
00:01:13fiturnya dan menulis catatan pembicara di dalamnya juga. Namun Stitch tidak memiliki hal seperti ini
00:01:17karena Stitch hanya untuk UI dan tidak menyediakan fitur untuk desain lain selain antarmuka seluler dan web.
00:01:23Di Claude Design, Anda juga dapat mereferensikan proyek lain yang Anda inginkan gayanya diikuti
00:01:28dengan menghubungkan repo GitHub Anda yang pada dasarnya memungkinkan Claude mengimpor gaya desain
00:01:32darinya dan membuat desain berikutnya berdasarkan itu. Stitch menangani ini dengan cara berbeda. Ia menggunakan
00:01:37sistem desain untuk tugas yang sama di mana Anda dapat menyalin sistem desain dari situs web lain yang
00:01:42dihosting cukup dengan memberikan tautannya di Stitch dan dari sana ia mengimpor gaya yang tepat dan
00:01:46membuat sistem yang digunakan pada desain-desain berikutnya. Mengenai perubahan, Claude Design memungkinkan
00:01:51Anda memasukkan prompt ulang tetapi Anda juga dapat mengeklik langsung pada area yang ingin diubah dan itu tercermin
00:01:56pada desain Anda. Anda bisa langsung berkomentar pada apa pun yang Anda inginkan berbeda dan kemudian ia
00:02:00mulai menerapkan perubahan langsung padanya. Anda dapat menumpuk komentar dan mengirimkannya ke Claude
00:02:04sekaligus. Stitch mengambil cara lain di sini. Anda tidak dapat melakukan perubahan langsung kecuali mengubah
00:02:09teks. Jadi jika Anda ingin perubahan seperti warna atau ukuran font, Anda harus menambahkan komentar pada area yang
00:02:14Anda pilih atau memberi anotasi, lalu mengirim komentar tersebut ke Gemini agar ia menerapkan perubahan Anda.
00:02:19Input suara adalah pembeda lainnya. Claude Design memungkinkan Anda menggunakan suara untuk mengetik prompt
00:02:24sebagai pengganti mengetik. Namun di titik ini Stitch menang karena fitur kanvas suara di Stitch
00:02:28pada dasarnya adalah percakapan langsung dengan model di mana Anda memberi tahu semua tentang desain yang
00:02:33ingin Anda buat dan ia mengajukan pertanyaan terkait desain tersebut lalu membuatkannya untuk Anda,
00:02:37semuanya terjadi secara percakapan. Stitch juga memiliki fitur pratinjau langsung di panel terpisah di mana Anda
00:02:42dapat melihat tampilan desain Anda di desktop, ponsel, dan tablet serta berinteraksi langsung dengan desain tersebut.
00:02:47Claude Design tidak memiliki fitur pratinjau terpisah. Sebagai gantinya, ia menampilkan UI pada
00:02:52panel yang sama di mana Anda dapat berinteraksi dengan elemen secara langsung tanpa harus beralih ke layar
00:02:57pratinjau lain, tetapi Anda tidak bisa memeriksa responsivitasnya seperti pada Google Stitch. Claude Design juga
00:03:01dibuat untuk kerja tim sehingga memungkinkan Anda berbagi proyek dengan berbagai izin seperti
00:03:06izin mengedit dan mengomentari secara terpisah yang tidak dimiliki oleh Stitch. Di Stitch, Anda hanya dapat
00:03:11membagikan proyek dan membiarkan semua orang mengerjakannya tanpa izin terpisah seperti Claude Design.
00:03:15Jadi, terlepas dari fakta bahwa Stitch adalah proyek yang jauh lebih matang dan Claude Design adalah proyek
00:03:20yang baru saja dirilis, kami memberikan poin kepada Claude Design dalam hal fitur. Claude
00:03:24Design adalah produk baru yang hanya tersedia di paket Claude Pro, Max, Team, dan Enterprise.
00:03:30Stitch di sisi lain tersedia gratis terlepas dari jenis paketnya dan hanya menggunakan sistem kredit
00:03:35untuk melacak penggunaan. Jadi dalam hal kegunaan, Stitch menawarkan jauh lebih banyak kredit.
00:03:40Ia memberikan 400 kredit desain harian dan 15 kredit desain ulang harian jadi Anda mendapat banyak kredit untuk
00:03:46digunakan bahkan dalam satu hari dan kredit hariannya bahkan lebih banyak lagi. Biasanya satu desain sederhana menghabiskan tiga
00:03:51kredit dan bisa bervariasi tergantung kerumitan serta jumlah generasi sehingga Anda bisa menghasilkan banyak
00:03:56desain darinya. Claude Design memiliki batas terpisah yang mencakup satu minggu. Batas ini tidak
00:04:00memengaruhi batas Claude Code lainnya sehingga Anda bebas menggunakan fitur Claude lainnya meskipun
00:04:05batas desain habis. Namun seperti yang kita bicarakan di video sebelumnya, batas ini praktis tidak dapat digunakan
00:04:10karena tidak membiarkan Anda bereksperimen bebas dan akan habis sebelum Anda bisa menggunakannya untuk
00:04:15pembangunan substansial, dan ini lebih buruk jika Anda berada di paket Pro karena itu hanya memungkinkan
00:04:20eksperimen dengan beberapa desain sebelum habis. Jadi jika Anda benar-benar ingin mendapatkan sesuatu dari
00:04:24Claude Design, Anda perlu beralih ke paket Max. Jadi membandingkan biaya keduanya, Stitch
00:04:29menang telak dengan selisih jauh karena setidaknya memungkinkan Anda bereksperimen dengan desain yang tidak bisa
00:04:34dilakukan di Claude Design. Kami menguji kedua alat pada prompt yang sama dengan penjelasan gaya situs web dan
00:04:39bagian yang kami inginkan. Claude Design membuat daftar tugas seperti biasanya Claude Code dan mulai
00:04:44bekerja. Dan sementara Claude Design memakan waktu, kami memberikan prompt yang sama persis ke Google Stitch.
00:04:49Hal pertama yang dilakukan Stitch adalah membuat sistem desain dengan memvisualisasikan segalanya mulai dari warna hingga
00:04:54tipografi, ikon, dan tombol. Bahkan sebelum Claude Design selesai, Stitch sudah tuntas. Ia membangun
00:04:59laman landas menggunakan gaya yang sama persis dari sistem desainnya dengan keseimbangan antara warna utama dan
00:05:04aksen. Claude Design memakan waktu jauh lebih lama dan setelah selesai ia mulai mengerjakan
00:05:09langkah-langkah verifikasi. Setiap bagian dari pekerjaan Claude Design bersifat interaktif, tidak seperti halaman statis Stitch.
00:05:15Pada percobaan pertamanya, ia menawarkan pilihan untuk memutuskan antara warna aksen dan tema utama
00:05:20sehingga kami bisa melakukan perubahan kecil sendiri tanpa harus memberi prompt ulang. Pada uji kualitas desain, kami
00:05:25memberikan poin kepada Google Stitch karena desainnya jauh lebih baik daripada yang lain. Stitch secara kreatif
00:05:30menggunakan palet warna agar cocok dengan gaya dan suasana aplikasi, sementara pilihan Claude Design
00:05:34terasa generik dan kurang mendalam. Selain itu dalam hal kecepatan, Stitch juga menang di sini karena
00:05:39Claude Design memakan waktu terlalu lama pada setiap desain. Kapan pun Claude Design perlu menambahkan gambar, ia akan membuat SVG
00:05:45dan mengintegrasikannya ke dalam desain. Kecuali jika Anda menyediakan aset sendiri, ia sepenuhnya mengandalkan
00:05:50generasi SVG. Google di sisi lain memiliki Nano Banana, model pembuatan gambarnya sendiri. Jadi
00:05:55Stitch mengintegrasikannya langsung ke dalam produk dan meskipun tidak diperintahkan secara eksplisit, ia menggunakan pembuatan gambar
00:06:00untuk semua bagian dalam desain dan hasilnya jauh lebih baik. Tidak peduli seberapa
00:06:05berkualitas tinggi sebuah SVG, itu tidak bisa menandingi model gambar. Jadi dalam situasi ini Google Stitch
00:06:10adalah pemenang yang jelas. Stitch tidak terlalu dikenal karena animasinya karena fokus utamanya adalah pada desain
00:06:16tetapi kami tetap mencoba melihat bagaimana ia menanganinya. Ia memang mencoba menambahkan beberapa tetapi animasinya
00:06:21tidak terlihat secara langsung dan hanya bisa dipratinjau di tab terpisah dan hanya menghasilkan scroll
00:06:26reveal pada satu bagian halaman. Namun ketika kami memberikan tugas yang sama ke Claude Design, ia menambahkan banyak
00:06:32animasi seperti marquee di bawah bagian hero. Scroll reveal juga ditambahkan tetapi jauh
00:06:37lebih terkoordinasi dan diterapkan dengan benar pada setiap komponen, bukan hanya bagian hero. Claude Design
00:06:43jauh lebih baik dalam animasi daripada Stitch karena menggunakan pustaka populer seperti shader dan mampu
00:06:48membuat animasi yang jauh lebih interaktif yang perilakunya berubah sesuai gerakan tetikus dan klik.
00:06:54Jadi dalam hal animasi, Claude Design adalah pemenang mutlak. Selain itu jika Anda menyukai konten kami,
00:06:59pertimbangkan untuk menekan tombol hype karena itu membantu kami membuat lebih banyak konten seperti ini dan menjangkau
00:07:04lebih banyak orang. Untuk menguji seberapa baik masing-masing memahami aplikasi dan menangani perubahan, kami meminta mereka membuat
00:07:09halaman daftar dan masuk di atas aplikasi yang sudah ada. Stitch menyelesaikan desainnya terlebih dahulu,
00:07:14menggunakan sistem desain yang sama untuk setiap halaman dan menerapkan header dan footer yang sama pula. Kami dapat
00:07:19melihat alurnya dengan fitur prototipe dan melihat bagaimana setiap tombol terhubung satu sama lain.
00:07:24Implementasi Claude Design lebih sesuai dengan ide aplikasi dan ia memahami apa yang dibutuhkan
00:07:28dengan lebih baik. Ia membangun halaman masuk secara kreatif dan pada halaman daftar, ia bahkan selangkah lebih maju
00:07:33dengan menerapkan berbagai gaya akun. Kami juga ingin melihat seberapa baik masing-masing menyertakan
00:07:38perubahan. Di Claude Design kami hanya menambahkan komentar dan mengirimkannya bersama-sama lalu ia mulai
00:07:44menerapkannya. Di Stitch kami harus memberi anotasi pada area yang ingin diubah tetapi hasilnya tidak persis
00:07:49seperti yang kami inginkan. Ia malah menambahkan footer di tempat yang salah tepat setelah kutipan, yang mana aneh.
00:07:54Secara keseluruhan, beriterasi dengan Stitch tidaklah ramah pengguna karena untuk setiap perubahan yang diminta, ia membuat layar baru
00:07:59dan pada satu titik layar-layar tersebut menjadi terlalu berantakan. Claude Design adalah pengalaman yang jauh lebih baik karena
00:08:04perubahan langsung tercermin pada desain dan karena ia memahami aplikasinya, ia menerapkannya dengan benar
00:08:09tanpa menyimpang dari gaya. Jadi dalam hal iterasi desain, Claude Design jelas
00:08:14merupakan cara yang lebih baik. Setiap alat memiliki sistem desainnya sendiri. Untuk Claude Design, sistem desain mengidentifikasi
00:08:20merek Anda karena alat ini ditujukan untuk tim yang mengerjakan perlengkapan merek. Anda dapat menambahkan deskripsinya
00:08:25bersama dengan font, logo, aset, dan segalanya dan ia menciptakan sistem lengkap yang mewakili
00:08:30gaya merek Anda. Untuk Stitch, sistem desain adalah file yang tidak mengidentifikasi merek melainkan
00:08:36mewakili desain tertentu. File ini tidak terbatas pada Stitch. Anda dapat mengekspornya dan menggunakannya di
00:08:41agen mana pun dan akan dipahami serta diterapkan secara langsung. Seperti yang disebutkan sebelumnya, Anda dapat mengimpor
00:08:46sistem desain dari situs web lain atau membuatnya sendiri. Stitch telah merilis file design.md secara sumber terbuka
00:08:52yang berisi perintah npm untuk instalasi dan pemformatan yang benar. Setiap sistem desain melayani
00:08:57tujuan yang berbeda tetapi kami lebih memilih milik Google karena memungkinkan peralihan lintas platform dengan mudah dan tidak
00:09:02mengunci Anda di dalam Stitch. Sekarang setelah kita menguji desainnya, saatnya membicarakan bagaimana serah terima
00:09:07dari desain ke kode terlihat untuk masing-masing alat. Seperti yang telah disebutkan, Claude Design menawarkan lebih banyak opsi ekspor
00:09:13dengan kontrol izin. Ia memungkinkan ekspor sebagai pdf, slide, dan bahkan ekspor ke canvas sehingga Anda dapat
00:09:18melanjutkan desain Anda di sana. Namun pola serah terima yang paling sering kami gunakan adalah serah terima ke Claude Code
00:09:23karena di situlah kami paling banyak mengembangkan aplikasi. Jadi dengan menyalin satu prompt dan menempelkannya
00:09:28ke dalam Claude Code, ia akan menyalin desain dan menerapkannya dalam aplikasi. Google Stitch di sisi
00:09:33lain memiliki pola serah terima yang jauh lebih baik. Stitch memiliki MCP di mana Anda dapat menghubungkannya ke
00:09:39agen pengodean Anda dan membiarkannya mengirim prompt ke Stitch untuk membuat desain serta mengambil desain darinya untuk diterapkan
00:09:44dalam aplikasi. Claude Design tidak memiliki integrasi MCP apa pun, jadi kami menyukai MCP Stitch karena
00:09:49bekerja sebaliknya, yang berarti agen pengodean dapat memberikan prompt dalam bahasa khusus Stitch dan kita
00:09:53tidak perlu khawatir tentang cara memberi prompt yang benar dan tetap mendapatkan desain yang diinginkan. Stitch juga memungkinkan
00:09:58ekspor sebagai kode zip tetapi Anda memiliki opsi lain juga. Anda bisa mengekspornya ke Google AI Studio
00:10:04di mana Anda dapat membangun aplikasi lebih lanjut menggunakan sumber daya studio dan integrasi Firebase langsung
00:10:09di aplikasi tersebut atau Anda bisa langsung mengekspornya ke Figma agar Anda bisa bekerja dengan orang lain di sana. Kami menggunakan
00:10:14ekspor MCP yang paling sering karena dengan integrasi ini kita tidak perlu khawatir tentang serah terima dan agen
00:10:19pengodean menanganinya sendiri dengan mudah. Ini juga memungkinkan ekspor sebagai PRD yang dapat Anda serahkan ke
00:10:25orang lain atau agen pengodean sehingga mereka dapat menerapkan aplikasi dengan mudah tanpa masalah. Jadi dalam hal gaya serah terima
00:10:30Stitch adalah pemenang yang jelas. Itu membawa kita ke akhir video ini. Jika Anda ingin mendukung
00:10:35saluran ini dan membantu kami terus membuat video seperti ini, Anda dapat melakukannya dengan menekan tombol super thanks di bawah.
00:10:40Seperti biasa, terima kasih telah menonton dan sampai jumpa di video berikutnya.