Desain Claude Sebenarnya Adalah Jebakan
AAI LABS
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Claude Design muncul dan mengubah segalanya tentang desain, namun kenyataannya ini jauh lebih
00:00:04banyak sensasi daripada yang disadari kebanyakan orang.
00:00:05Dan inilah alasan mengapa apa yang Anda lihat di X bukanlah cerita lengkapnya.
00:00:09Jika Anda berpikir Claude Design melakukan sesuatu yang inovatif atau demo gila yang beredar
00:00:13di luar sana adalah bukti bahwa Anda perlu beralih ke sana, Anda sebenarnya salah.
00:00:17Alat itu sendiri bahkan bukan alasan mengapa desain tersebut terlihat begitu bagus, dan cara orang-orang
00:00:21menggunakannya secara diam-diam justru merugikan mereka dengan cara yang belum disadari kebanyakan orang.
00:00:25Claude Design dipasarkan sebagai produk revolusioner untuk industri desain saat
00:00:29produk itu diluncurkan.
00:00:30Orang-orang mulai menyebutnya sebagai pembunuh Figma atau akhir dari desainer, dan dampaknya cukup besar
00:00:34sehingga saham Figma terus menurun dan valuasinya terpukul.
00:00:38Ini adalah alat untuk membuat prototipe realistis, wireframe, desain, dek presentasi, dan
00:00:43berbagai jenis desain lainnya.
00:00:44Namun kenyataannya, itu hanyalah sensasi belaka.
00:00:47Ini secara harfiah adalah Claude Code yang dikemas ulang sebagai alat lain dan dijual seperti itu, karena Claude Code dapat
00:00:52melakukan hal yang sama dan mungkin lebih.
00:00:54Ada fitur seperti pengeditan dan komentar di Claude Design, tetapi tidak ada yang ada di sini yang
00:00:58tidak bisa dilakukan Claude Code jika Anda memberinya alat yang tepat.
00:01:01Dan ketika kami mengatakan ini adalah Claude Code yang dikemas ulang, itu bukan karena kami tidak mengujinya.
00:01:05Kami memberinya perintah sederhana, memintanya untuk membuat situs web komunitas dan menjawab pertanyaan
00:01:09yang dimilikinya.
00:01:10Ia membuat dua desain yang mengesankan secara mandiri dan jauh lebih baik daripada cara Claude
00:01:14biasa membuat halaman arahan sebelumnya, tetapi masih ada banyak masalah.
00:01:18Satu versi terpotong di bagian harga dan tidak ada footer sama sekali, jadi kami menguji
00:01:23bagaimana Claude Code akan bekerja dengan perintah yang serupa.
00:01:25Kami menggunakan Opus 4.7 dengan upaya tinggi untuk membandingkan keduanya, dan desain yang dihasilkannya setara
00:01:30dengan kemampuan Claude Design.
00:01:32Ada beberapa masalah, seperti warna font tombol daftar yang tidak dipilih dengan benar,
00:01:37tetapi secara keseluruhan itu adalah desain yang dibuat dengan sangat baik.
00:01:39Dan ini meskipun tidak memiliki desain harness dan tanpa perintah khusus yang
00:01:43dimiliki Claude Design, murni dengan sendirinya dengan kami hampir tidak memberikan apa pun.
00:01:48Tetapi demo yang pasti Anda lihat di sekitar terlihat mengesankan, dan ada sesuatu yang tersembunyi di balik
00:01:52mereka.
00:01:53Apa yang beredar di media sosial didasarkan pada sensasi daripada apa yang sebenarnya dilakukan alat tersebut
00:01:57dengan sendirinya.
00:01:58Orang-orang membuat desain dengan mengikuti alur kerja yang luas dan kemudian menyajikannya seolah-olah Claude
00:02:03Design membangun semuanya dalam satu kali percobaan.
00:02:05Tetapi alur kerja yang sama itu dapat dijalankan di Claude Code secara langsung tanpa memerlukan Claude Design
00:02:09sama sekali.
00:02:10Jadi meskipun produk ini dibuat untuk desainer, mereka sebaiknya menggunakan Claude Code daripada
00:02:14Claude Design, karena dengan cara ini mereka akan dapat mencoba berbagai variasi, bereksperimen
00:02:19lebih banyak, dan mendapatkan hasil yang sama, jika tidak lebih baik, daripada Claude Design.
00:02:22Mereka dapat melakukan iterasi lebih banyak kali dengan Claude Code daripada terpotong,
00:02:26tepat saat desainnya benar-benar mulai membaik.
00:02:28Membangun di atas apa yang sudah ada alih-alih memulai dari awal setiap saat memberi mereka
00:02:32kontrol yang lebih baik atas arah setiap desain.
00:02:35Dan karena semua yang dihasilkan Claude Code adalah kode nyata, apa yang mereka dapatkan bukanlah
00:02:39prototipe sekali pakai tetapi sesuatu yang dapat dikirim langsung ke dalam produk tanpa
00:02:43perlu dibangun kembali oleh orang lain setelahnya.
00:02:45Dan di atas semua ini, ada masalah biaya dengan Claude Design.
00:02:48Claude Code dapat melakukan hal yang sama dengan biaya yang jauh lebih murah sementara Claude Design dibangun secara terpisah
00:02:53dan dihitung terhadap batas yang berjalan mingguan dan tidak dihitung terhadap batas Anda yang lain
00:02:57tetapi itu menghabiskan penggunaan dengan kecepatan yang jauh lebih cepat daripada yang biasanya Anda harapkan dengan model
00:03:02melalui aplikasi Claude lainnya.
00:03:03Ini paling berdampak pada desainer karena kuotanya sangat rendah sehingga mereka tidak bisa benar-benar bereksperimen
00:03:08seperti yang mereka butuhkan dan batas mereka habis setelah hanya beberapa iterasi desain.
00:03:12Dan inilah yang dikeluhkan banyak orang.
00:03:15Ketika seseorang bekerja dengannya, mereka kehabisan batas desain dengan cepat hanya setelah sekitar
00:03:1920 iterasi desain bahkan ketika mereka menggunakan paket maksimal tertinggi.
00:03:23Dan banyak orang lain mengatakan mereka mencapai batas dalam satu jam dan masih berakhir dengan desain sederhana
00:03:27yang mudah diimplementasikan dengan Claude Code dalam satu kali percobaan.
00:03:31Jadi, itu tidak terlalu bisa digunakan dalam praktiknya karena mereka mencapai batas sebelum mereka dapat
00:03:35bahkan menyelesaikan alur kerja yang sedang mereka kerjakan, membuatnya jauh lebih buruk dibandingkan dengan batas Claude Code.
00:03:39limits.
00:03:40Alasan mengapa hasil karya Claude Design terlihat begitu mengesankan sebenarnya adalah karena peluncuran model Opus 4.7, bukan
00:03:45alat itu sendiri.
00:03:46Opus 4.7 sekali lagi merupakan model canggih dengan kemampuan luar biasa dan bekerja
00:03:50lebih baik di semua tolok ukur.
00:03:52Tetapi peningkatan yang sebenarnya penting di sini adalah penglihatan.
00:03:54Model ini memiliki penglihatan yang jauh lebih baik dan dapat melihat gambar pada resolusi yang jauh lebih besar
00:03:59daripada sebelumnya.
00:04:00Claude Opus 4.6 mampu menganalisis gambar pada resolusi 1,15 megapiksel sedangkan
00:04:074.7 mampu menganalisis 3,75 megapiksel.
00:04:10Jadi itu menyiratkan bahwa ia mampu memahami desain dari referensi jauh lebih baik.
00:04:14Jika Anda memberinya desain referensi, ia memproses referensi tersebut dengan kejernihan yang jauh lebih baik dan
00:04:18memperhatikan hal-hal yang akan dilewatkannya sebelumnya.
00:04:20Dengan peningkatan model ini, Anthropic mengisi satu-satunya celah di mana model Claude kurang
00:04:25dan membutuhkan banyak pekerjaan, yaitu desain front end.
00:04:27Model ini lebih berselera dan kreatif saat menyelesaikan tugas dan dengan sendirinya ia menghasilkan
00:04:31antarmuka dan desain berkualitas lebih tinggi.
00:04:34Jadi ketika Claude Design muncul, ia ditampilkan dengan banyak sensasi karena desainnya yang gila
00:04:38tetapi kenyataannya model itulah yang menjadi lebih baik.
00:04:41Bukan alatnya yang menjadi sangat bagus sehingga menghasilkan visual berbeda yang
00:04:45Anda lihat.
00:04:46Claude Design adalah cara cerdik lainnya untuk menjual sesuatu dan menciptakan sensasi di sekitarnya oleh Anthropic.
00:04:50Sekarang Anda bisa mendapatkan manfaat yang sama yang Anda dapatkan di Claude Design di Claude Code 2 atau mungkin
00:04:55lebih baik.
00:04:56Anda dapat meniru alur pertanyaan Claude Design di Claude Code dengan membuat skill sederhana.
00:05:00Saat Anda membuat proyek di Claude Design, Anda memberikan perintah dan ia mengajukan banyak pertanyaan
00:05:04sehingga ia dapat memastikan arah desain dengan benar.
00:05:07Ia bertanya jauh lebih banyak daripada mode perencanaan Claude Code tetapi sebuah skill bisa melakukan hal yang persis sama.
00:05:11Skill tersebut berisi instruksi tentang cara menjalankan sesi tanya jawab seperti Claude Design
00:05:16menggunakan pertanyaan untuk mengisi celah yang dibuat oleh perintah dan bertanya tentang apa yang perlu dibangun.
00:05:21Ia mendefinisikan kapan harus memicu pertanyaan tindak lanjut dan bagaimana alurnya harus benar-benar bekerja.
00:05:25Ia juga mencakup contoh pertanyaan untuk menjalankan sesi, pustaka pertanyaan, dan bahkan
00:05:30tata letak ASCII situs sehingga ia dapat menentukan posisi elemen di halaman arahan.
00:05:34page.
00:05:35Saat Anda memberikan perintah, ia menggunakan skill tersebut dan mengajukan pertanyaan terkait celah yang diidentifikasinya
00:05:39seperti Claude Design.
00:05:41Ia mengajukan beberapa pertanyaan di berbagai area dan setelah ia memiliki semua informasi
00:05:45yang diperlukan untuk mengimplementasikan, ia mulai membangun.
00:05:47Bagian terbaiknya adalah ia secara langsung mengeluarkan kode sehingga tidak ada serah terima desain ke kode.
00:05:51Dan dengan pendekatan ini, Anda dapat melakukan iterasi sebanyak yang Anda inginkan tanpa khawatir kehabisan
00:05:55batas dalam waktu satu jam saja.
00:05:57Pembuatan UI dari jenis perintah yang sama bersama dengan alur pertanyaan serupa di
00:06:01Claude Code kurang lebih mirip dengan apa yang dihasilkan Claude Design.
00:06:05Perbedaan utamanya adalah Claude Design memiliki keunggulan dalam aspek-aspek tertentu di mana ia membuat
00:06:09situs web lebih imersif dengan menambahkan animasi kecil agar terlihat lebih menarik.
00:06:13Namun sebelum kita melangkah lebih jauh, mari kita dengarkan kata dari sponsor kita.
00:06:16HeyGen Anda mungkin sudah mencoba membuat video dengan
00:06:18alat AI.
00:06:1920 menit kemudian Anda harus berkutat dengan garis waktu, merekam ulang sulih suara, dan berjuang dengan sinkronisasi bibir yang terlihat
00:06:24seperti dubbing buruk.
00:06:25HeyGen melewatkan semua itu.
00:06:26HeyGen adalah generator video AI yang baru saja merilis CLI baru, yang berarti video avatar kembaran digital lengkap
00:06:31dapat dihasilkan dengan satu perintah.
00:06:34Tanpa garis waktu, tanpa kamera, tanpa kru.
00:06:36Rekam kembaran digital Anda sekali dan HeyGen memungkinkan Anda mempublikasikan secara konsisten tanpa syuting ulang,
00:06:40mengubah buletin, PDF, powerpoint menjadi video.
00:06:44Hasilkan video multi-adegan yang diedit sepenuhnya dari satu perintah dengan agen video lalu terjemahkan
00:06:48untuk audiens global dengan sinkronisasi bibir penuh.
00:06:51Bangun dengan avatar, suara, agen video, terjemahan, dan lainnya di developers.heygen.com
00:06:56Kembaran digital memerlukan persetujuan terverifikasi.
00:06:59Konten Anda tidak pernah digunakan untuk melatih model publik dan seluruh platform dibangun untuk
00:07:03keamanan kelas perusahaan.
00:07:04Mulai kirim video berkualitas studio tanpa menyentuh kamera.
00:07:07Klik tautan di komentar yang disematkan dan coba HeyGen hari ini.
00:07:11Sebagian besar desain interaksi gulir yang mungkin Anda lihat di X saat orang-orang memamerkan
00:07:15Claude Design hanyalah situs yang menggunakan latar belakang video yang membuatnya terlihat jauh lebih
00:07:20premium dan memberikan kesan bahwa itu lebih mengesankan daripada aslinya.
00:07:24Sebagian besar demo sering kali hanyalah perintah yang disalin dari situs yang menyediakan templat perintah siap pakai.
00:07:28templates.
00:07:29Perintah tersebut menyertakan tautan ke video yang dimaksudkan untuk digunakan sebagai latar belakang bersama
00:07:33dengan panduan terperinci tentang cara mengimplementasikannya.
00:07:36Jadi agen mana pun mampu mengimplementasikan situs web semacam ini, bukan hanya Claude Design selama
00:07:40diberikan perintah serupa.
00:07:42Tapi ini hanya contoh perintah untuk situs pameran.
00:07:45Pada kenyataannya, aplikasi kelas produksi dibangun menggunakan pustaka seperti Lennis yang
00:07:49digunakan di banyak aplikasi produksi serta GSAP yang merupakan salah satu pustaka paling populer
00:07:54untuk mengimplementasikan animasi mulus yang membuat pengalaman situs web jauh lebih imersif daripada
00:07:59sebelumnya.
00:08:00Untuk menguji ini, kami benar-benar mengunduh video dan dalam perintah kami hanya memberi tahu Claude Code untuk
00:08:04menggunakan video sebagai bagian pahlawan bersama dengan tema warna yang kami inginkan dan ia mengimplementasikan
00:08:08sisa situs web itu sendiri.
00:08:10Kami hanya harus mengoreksinya sekali di mana kami harus menjelaskan tentang apa video itu.
00:08:14Dan ia menggabungkan gaya dengan sempurna ke dalam halaman arahan yang membuatnya jauh lebih baik daripada
00:08:18versi sebelumnya.
00:08:19Situs web tersebut diimplementasikan dengan sangat baik yang cukup kuat mengingat betapa sederhananya perintah
00:08:23itu dan mencakup berbagai animasi dan interaksi yang membuat bagian situs ini
00:08:28jauh lebih kuat dan interaktif daripada sebelumnya dengan kemampuan Claude.
00:08:32Sekarang di Claude Code Anda juga dapat melengkapinya dengan lebih banyak alat dengan mudah dibandingkan dengan Claude
00:08:36Design karena Claude Code lebih mampu secara teknis dan dapat mengimplementasikan hal-hal dengan lebih mulus.
00:08:42Anda bahkan dapat menggunakan skill sumber terbuka seperti scrolly telling yang pada dasarnya memungkinkan animasi
00:08:46pendongeng gulir di proyek Anda.
00:08:48Jadi dengan skill ini Claude dapat dengan mudah mengimplementasikan pendongeng multi-level dari perintah sederhana
00:08:53dan bekerja untuk membuat animasi yang jauh lebih mendalam daripada apa yang bisa dilakukan Claude Design
00:08:57dengan sendirinya.
00:08:59Juga jika Anda menikmati konten kami, pertimbangkan untuk menekan tombol hype karena itu membantu kami
00:09:03membuat lebih banyak konten seperti ini dan menjangkau lebih banyak orang.
00:09:07Menggunakan Claude Code daripada Claude Design membuatnya lebih mudah untuk mengimplementasikan UI karena dengan
00:09:11Claude Code Anda dapat mengintegrasikan sistem desain bawaan dengan mudah dengan menggabungkan komponen
00:09:16dari shad cn, aseternity, atau hero ui yang sudah menyertakan banyak animasi bawaan.
00:09:22Ini mengurangi kebutuhan model untuk mencari tahu bagaimana setiap komponen harus terlihat dan berperilaku
00:09:27dan alih-alih membiarkannya fokus pada peningkatan desain keseluruhan.
00:09:30Jadi outputnya jauh lebih mudah dicapai dibandingkan bekerja langsung di Claude Design secara default.
00:09:35Anda juga dapat menggunakan keterampilan desain front end atau keterampilan khusus lainnya yang disesuaikan dengan proyek Anda
00:09:39yang dibangun menggunakan pembuat skill yang menganalisis keadaan proyek saat ini.
00:09:43Ini membantunya mengimplementasikan fitur dengan lebih efektif tanpa membuang waktu.
00:09:47Claude Code juga lebih fleksibel karena Anda dapat menghubungkan server mcp ke sana.
00:09:51Misalnya Anda dapat menggunakan server mcp shad cn sehingga agen dapat menginstal komponen yang tepat
00:09:56sendiri daripada diberitahu secara eksplisit apa yang harus digunakan dan di mana.
00:09:59Demikian pula Anda dapat menggunakan berbagai mcp yang membantu membangun UI dengan lebih efektif daripada mengandalkan
00:10:04desain yang dihasilkan murni.
00:10:06Bahkan dengan model seperti opus 4.7 dan alat seperti Claude Design, desain yang dihasilkan langsung
00:10:11sering kali mengungkapkan bahwa desain tersebut diproduksi oleh model karena cenderung mengikuti pola serupa.
00:10:16Tetapi menggunakan pustaka yang mapan membantu mengurangi masalah ini dan membuat output terasa lebih alami
00:10:20dan tidak mudah diprediksi.
00:10:22Keuntungan terbesar menggunakan Claude Code daripada Claude Design adalah Anda dapat menghubungkannya
00:10:26ke git.
00:10:27Sekarang meskipun Anda dapat menghubungkan github ke Claude Design juga, ada perbedaan besar
00:10:30dalam cara kerja keduanya.
00:10:31Integrasi git Claude Design cukup dasar.
00:10:34Ini terutama memungkinkannya mengambil file dari repositori github yang terhubung dan menggunakannya untuk
00:10:38memahami desain.
00:10:39Tetapi tujuannya sebagian besar terbatas pada membaca dan mereferensikan.
00:10:42Ia tidak benar-benar membuat perubahan pada repositori.
00:10:45Claude Code di sisi lain sangat berbeda.
00:10:47Ia dapat melakukan operasi git penuh seperti commit, percabangan, dan banyak lagi.
00:10:51Jadi jika ada yang tidak beres dalam implementasi Anda atau jika Anda lebih suka versi lama setelah membuat
00:10:55perubahan, Anda dapat dengan mudah kembali ke versi sebelumnya menggunakan git.
00:10:59Itu adalah sesuatu yang tidak akan dapat Anda lakukan dengan Claude Design saat Anda menggunakannya, yang membuat
00:11:02Claude Code pendekatan yang jauh lebih kuat.
00:11:04Untuk mendesain prototipe yang berbeda daripada pergi ke Claude Design atau menggunakan figma, itu
00:11:09lebih efektif jika Anda membuat mockup langsung dalam HTML.
00:11:12Untuk mencoba berbagai variasi, Anda juga dapat memanfaatkan agen paralel dan pohon kerja
00:11:16untuk membagi tugas, mirip dengan bagaimana Claude Design menjelajahi desain tetapi dengan cara yang dikelola git,
00:11:21sehingga Anda dapat menyimpan versi terbaik dan membuang sisanya dengan mudah.
00:11:24Anda cukup memberikan perintah untuk menggunakan sub-agen di pohon kerja terpisah dan meminta setiap agen untuk
00:11:29mengimplementasikan variasi desain yang berbeda.
00:11:31Dengan itu, Claude akan menelurkan agen di ruang kerja terpisah.
00:11:35Menggunakan agen paralel membantu Anda menghemat waktu dan upaya saat menjelajahi berbagai arah
00:11:39sekaligus.
00:11:40Sekarang setelah setiap agen menyelesaikan pekerjaannya, Anda mendapatkan beberapa variasi yang dapat Anda tinjau
00:11:44kapan saja dan memilih mana yang paling sesuai dengan kebutuhan Anda.
00:11:47Dari sana, Anda dapat membuat perubahan dan terus membangun aplikasi berdasarkan gaya yang tepat yang
00:11:51paling Anda sukai.
00:11:52Dan meskipun tidak dihasilkan oleh Claude Design, masing-masing desain yang dihasilkan tetap memiliki
00:11:57tampilan estetis dengan SVG yang dibuat sepenuhnya melalui kode untuk menggambarkan elemen dan keseimbangan keseluruhan yang jauh
00:12:02lebih baik.
00:12:04Anda kemudian dapat menggabungkan versi pilihan Anda ke utama dan menghapus pohon kerja yang berisi
00:12:08desain yang tidak Anda sukai.
00:12:09Skill yang digunakan di sini bersama dengan sumber daya lainnya tersedia di AI Labs Pro untuk video ini
00:12:15dan untuk semua video kami sebelumnya dari mana Anda dapat mengunduh dan menggunakannya untuk proyek Anda sendiri.
00:12:19Jika Anda telah menemukan nilai dalam apa yang kami lakukan dan ingin mendukung saluran ini, inilah cara terbaik
00:12:23untuk melakukannya.
00:12:24Tautannya ada di deskripsi.
00:12:25Itu membawa kita ke akhir video ini.
00:12:26Jika Anda ingin mendukung saluran ini dan membantu kami terus membuat video seperti ini, Anda dapat melakukannya
00:12:30dengan menggunakan tombol super thanks di bawah.
00:12:33Seperti biasa, terima kasih telah menonton dan sampai jumpa di video berikutnya.