Claude Code Baru Saja Mendapat Pembaruan Desain Terbesarnya Tahun Ini (Dan Begini Cara Menguasainya)
CChase AI
컴퓨터/소프트웨어AI/미래기술
스크립트
00:00:00Claude Code baru saja mendapatkan pembaruan terbesar untuk kemampuan desain antarmukanya dalam waktu yang cukup lama melalui skill Slash Design yang baru.
00:00:07Skill Slash Design ini pada dasarnya mengambil fitur terbaik dari aplikasi web mandiri Claude Design yang Anda lihat di sini dan memasukkannya langsung ke dalam Claude Code.
00:00:16Daripada harus berpindah-pindah antara dua aplikasi terpisah atau mentransfer desain Anda secara canggung dari Claude Design ke Claude Code, kini kita bisa mendapatkan yang terbaik dari keduanya.
00:00:25Selain itu, kita mendapatkan tambahan fungsionalitas dari semua skill yang selama ini sudah kita gunakan di dalam Claude Code.
00:00:30Jadi, kita bisa menggabungkan fitur Slash Design baru ini dengan hal-hal seperti Impeccable atau skill Taste, yang memberikan hasil jauh lebih baik.
00:00:36Jadi hari ini, saya tidak hanya akan menunjukkan cara kerja Slash Design, tetapi juga memberikan alur kerja terbaik untuk memaksimalkannya.
00:00:42Maka dari itu, jika Anda sering melakukan pekerjaan desain antarmuka dengan Claude Code, Anda pasti ingin menyimak video ini sampai selesai.
00:00:46Kelebihan utama dari skill Slash Design ini bisa Anda lihat tepat di sini.
00:00:49Saat ini saya berada di dalam aplikasi Claude Desktop, namun hal yang sama juga berlaku jika Anda menggunakan terminal.
00:00:53Gagasannya adalah ketika saya mengetik Slash Design dan memintanya membuat sesuatu untuk saya, ia akan menghasilkan artboard yang sangat mirip dengan aplikasi web Claude Design.
00:01:02Saya memiliki beberapa pilihan yang dapat dipilih, dan saat melihat pilihan-pilihan ini, saya bisa mengatur detail perubahannya secara sangat spesifik.
00:01:09Seperti yang bisa Anda lihat di sebelah kanan, saat saya mengklik berbagai komponen dari desain antarmuka yang dibuatnya, saya bisa mengubah hampir semuanya.
00:01:17Selain itu, saya dapat dengan mudah meminta beberapa versi dari jenis keluaran yang sama, dan begitu saya menyukai versi tertentu, saya bisa menyuruh Claude Code untuk langsung bekerja dan mengodingnya.
00:01:27Ini menghemat banyak waktu dibandingkan harus berada di aplikasi web Claude Design, mengerjakan semuanya, bilang ingin mentransfernya, memasukkannya ke zip, menjatuhkannya ke folder, mengarahkannya ke Claude Code, dan melakukan semua hal yang merepotkan itu.
00:01:38Dan lebih dari sekadar praktis, seperti yang saya singgung sebelumnya, kita kini bisa menggabungkan berbagai skill.
00:01:43Saat saya berada di dalam aplikasi web Claude Design, saya tidak selalu bisa menggunakan atau memanggil skill seperti Impeccable atau Taste.
00:01:49Saya bisa melakukannya di sini.
00:01:50Jadi pada akhirnya, hasil kerja saya akan jauh lebih baik sekaligus lebih praktis.
00:01:54Cara menggunakan skill desain ini sangatlah mudah.
00:01:56Yang perlu saya lakukan hanyalah mengetik slash design, lalu memberikan prompt tentang apa yang ingin saya buat.
00:02:01Katakanlah saya ingin membuat postingan media sosial, atau bayangkan seperti postingan Instagram, yang merinci apa fungsi dari skill slash design yang baru ini.
00:02:10Dan katakanlah saya ingin membuat tiga variasi dalam tiga gaya desain yang sangat berbeda, serta ingin menggunakan skill Impeccable.
00:02:19Saya tinggal menyalakan mikrofon dan mengucapkan kalimat seperti itu.
00:02:22Jadi, bisakah kita membuat tiruan untuk postingan media sosial?
00:02:27Bayangkan ini sebagai semacam postingan Instagram yang merinci fungsi dari skill slash design Claude Code yang baru.
00:02:34Saya ingin tiga variasi yang sangat berbeda, yaitu gaya desain yang sangat berbeda dan gaya estetika yang sangat berbeda pula.
00:02:41Dan saat Anda melakukan ini, saya ingin Anda memanggil skill Impeccable untuk membantu Anda membuatnya.
00:02:45Sekarang, jika saya menjalankan skill yang sama persis di dalam aplikasi Claude desktop, tampilannya akan muncul di panel samping ini, itulah sebabnya saya suka melakukannya di aplikasi desktop karena semuanya berada di satu tempat.
00:02:57Di dalam terminal, yang akan Anda lihat adalah ia akan membuat artefak, sehingga pada dasarnya ia akan terbuka di peramban saya.
00:03:02Jadi, meskipun tidak praktis aplikasi desktop, hal ini tetap cukup mudah untuk dilakukan.
00:03:06Sekarang, sebelum kita melihat artefaknya, pesan singkat dari sponsor hari ini, yaitu saya sendiri.
00:03:10Jadi, saya baru saja merilis versi terbaru dari Claude Code Masterclass, dan ini adalah cara nomor satu untuk bertransformasi dari nol menjadi pengembang AI, terutama jika Anda bukan berasal dari latar belakang teknis.
00:03:19Kami berfokus pada kasus penggunaan nyata dan praktis, dan saya memperbarui materi ini setiap minggu.
00:03:24Jadi, jika Anda adalah seseorang yang sedang mencari cara untuk benar-benar menggunakan alat yang luar biasa ini, maka kelas ini sangat cocok untuk Anda.
00:03:32Anda dapat menemukannya di dalam Chase AI+.
00:03:33Tautan tersedia di komentar yang disematkan.
00:03:35Dan inilah tampilan artefak yang dihasilkannya.
00:03:37Kita memiliki tiga gaya desain berbeda untuk postingan Instagram kita, persis seperti yang kita lihat di dalam aplikasi desktop.
00:03:44Kita memiliki bilah properti di sisi sebelah kanan ini.
00:03:46Saya dapat memperbesar tampilan, mengklik sesuatu, dan mulai melihat detail yang jauh lebih spesifik mengenai apa yang sedang saya sesuaikan.
00:03:52Anda juga akan melihat di bagian kanan atas, kita memiliki bagian penyesuaian (tweaks) yang saat ini masih kosong.
00:03:57Kapan pun saya mau, saya dapat meminta Claude Code untuk memunculkan panel penyesuaian, seperti yang Anda lihat di aplikasi web Claude Design.
00:04:03Dan saya bisa menyesuaikan lebih banyak hal daripada yang terlihat di sini.
00:04:07Jadi dari segi penggunaan alat ini, caranya relatif sederhana.
00:04:10Cukup ketik slash design lalu minta apa yang Anda inginkan.
00:04:12Lalu, seperti apa seharusnya alur kerja kita?
00:04:14Bagaimana cara kita memaksimalkan fitur ini?
00:04:16Nah, ada alur kerja tiga langkah sederhana yang harus Anda gunakan setiap kali melakukan desain antarmuka dengan Claude Code.
00:04:22Langkah pertama adalah mencari inspirasi, karena apa yang ingin saya berikan kepada Claude bukan sekadar prompt seperti, hei, saya ingin tiga hal yang berbeda.
00:04:30Yang idealnya ingin saya berikan kepada Claude Code adalah beberapa contoh.
00:04:33Saya ingin mengambil tangkapan layar dari poster-poster yang saya sukai.
00:04:35Saya ingin mengambil tangkapan layar dari gaya desain yang saya nikmati.
00:04:39Memberikannya ke Claude Code dan berkata, hei, bisakah kamu membuat sesuatu dengan gaya yang mirip seperti ini?
00:04:43Saat ini kita sedang mengerjakan poster, namun ini juga berlaku jika Anda membuat halaman landing (landing page), bagian hero (hero section), atau semacamnya.
00:04:50Pertanyaan selanjutnya adalah, di mana saya bisa menemukan inspirasi?
00:04:52Untungnya, ada banyak sekali tempat untuk mendapatkan ide.
00:04:55Salah satu situs web yang bagus adalah Pinterest.
00:04:57Saya cukup mencari infografis Instagram dan melihat semua potensi desain ini.
00:05:01Situs bagus lainnya adalah Landbook, yang sangat bagus untuk desain web dan bagian hero.
00:05:06Kita juga memiliki platform seperti Dribbble, dengan tiga huruf b.
00:05:11Intinya adalah Anda hanya perlu mencari inspirasi dan mulai membangun perpustakaan desain yang dapat selalu Anda jadikan referensi dan bawa ke Claude Code saat ingin mendesain sesuatu.
00:05:21Sehingga Anda tidak perlu mengulangi proses mencari inspirasi ini setiap kali.
00:05:24Jadi saya akan mengambil beberapa tangkapan layar dari desain yang agak saya sukai.
00:05:27Saya suka yang ini.
00:05:29Menurut saya ini terlihat cukup menarik.
00:05:31Dan ingat, Anda hanya mencari estetika umum yang Anda ingin Claude ambil darinya.
00:05:36Dan saya pikir yang ini juga terlihat cukup menarik.
00:05:39Jadi sekarang saya akan memasukkan ketiga tangkapan layar tersebut ke dalam jendela prompt.
00:05:43Dan sekarang saya pada dasarnya akan memberikan prompt yang sama seperti sebelumnya, yaitu, hei, saya ingin postingan Instagram seperti itu.
00:05:48Saya ingin tiga versi yang berbeda.
00:05:49Hanya saja kali ini, saya akan mengatakan, jadikan tangkapan layar ini sebagai referensi.
00:05:52Saya ingin gambar-gambar ini digunakan sebagai inspirasi.
00:05:54Anda bisa membuat gaya desain yang berbeda untuk masing-masing tangkapan layar.
00:05:59Dan saya juga akan mengatakan, pastikan untuk menggunakan skill Impeccable.
00:06:02Dan saya juga akan memberitahunya, jika ingin menghasilkan aset eksternal, gunakan sesuatu seperti Higgs field MCP yang saya miliki.
00:06:09Anda bisa menggunakan hal lain, seperti file.ai untuk generator gambar jenis lainnya.
00:06:14Gagasannya adalah, karena kita sekarang berada di dalam Claude Code, kita dapat menarik apa pun yang kita inginkan ke dalam proses desain ini.
00:06:19Dan sekali lagi, Anda tidak harus menggunakan gambar eksternal jika tidak mau.
00:06:23Tetapi begitulah bunyi prompt saya nantinya.
00:06:25Jadi mari kita buat ulang ketiga postingan yang telah kita lakukan.
00:06:29Sekali lagi, kita menggunakan skill slash design.
00:06:31Tetapi saya telah menjatuhkan tiga tangkapan layar di sini.
00:06:33Dan saya ingin menggunakan gambar-gambar itu sebagai inspirasi untuk proses desain kita.
00:06:37Jadi saya ingin tiga generasi baru.
00:06:39Buat satu generasi yang mengambil referensi dari masing-masing tangkapan layar tersebut.
00:06:43Sekali lagi, gunakan skill desain Impeccable.
00:06:45Dan ingat, Anda memiliki akses ke Higgs field MCP.
00:06:48Jadi jika Anda merasa perlu membuat aset eksternal yang dapat kita gunakan untuk poster, lakukan itu juga.
00:06:55Saya serahkan hal itu pada kebijakan Anda.
00:06:56Dan itulah sebenarnya langkah satu dan dua dari proses ini.
00:06:59Langkah pertama adalah menemukan inspirasi.
00:07:00Dan langkah kedua adalah benar-benar menggunakan skill tambahan yang tidak bisa kita gunakan di dalam aplikasi web Claude design.
00:07:08Dan jika Anda berpikir, hei, kamu terus menyebutkan Impeccable, aku sama sekali tidak tahu apa ini.
00:07:11Ini hanyalah skill gratis sumber terbuka (open source) yang dapat Anda tambahkan ke Claude Code.
00:07:16Dan skill ini berfokus penuh pada desain antarmuka.
00:07:18Pada dasarnya, intinya adalah ia mengenali seperti apa bentuk desain AI yang buruk, menyingkirkannya, dan menambahkan prinsip desain yang lebih baik pada apa pun yang Anda buat.
00:07:26Dan jika Anda ingin pembahasan yang lebih mendalam mengenai hal itu, saya memiliki video yang membahas secara mendalam tentang cara terbaik menggunakan Impeccable.
00:07:31Dan sekarang inilah tampilan poster baru yang dibuat oleh Claude menggunakan Slash design.
00:07:35Dan Anda dapat melihat bahwa poster-poster ini jelas mengambil inspirasi yang kita berikan sebelumnya.
00:07:39Dan kapan pun, seperti sebelumnya, saya bisa memperbesar tampilan di sini.
00:07:43Saya bisa melihat propertinya dan mulai mengedit berbagai hal.
00:07:46Sekarang, mari kita bahas tentang panel penyesuaian (tweaks).
00:07:49Jadi desain ini belum memiliki kontrol yang dapat disesuaikan.
00:07:50Jelaskan apa yang ingin Anda sesuaikan dan Claude akan menambahkan panel penyesuaian untuk itu.
00:07:53Baiklah, mari kita lakukan karena sekarang kita berada di langkah ketiga dari proses di mana kita ingin mulai menyesuaikan berbagai hal sampai kita menyukainya.
00:08:00Jadi yang akan saya lakukan adalah membuka terminal, di mana Anda berada, dan berkata, hei, bisakah kita sekarang menambahkan beberapa kontrol yang dapat disesuaikan di sini?
00:08:10Saya ingin penyesuaiannya bersifat sangat agresif.
00:08:12Jadi saya ingin dapat mengedit hampir semuanya sebanyak mungkin, menggunakan panel penyesuaian di dalam Claude design.
00:08:21Jadi sekarang Anda dapat melihat bagian penyesuaian ini di sisi kanan.
00:08:24Dan kita sedang melihat poster yang ada di tengah ini.
00:08:25Jadi saya bisa mengubah warna kertasnya, kan?
00:08:29Apa yang ingin kita lakukan di sini?
00:08:30Dan ingat juga, penyesuaian ini juga bisa memberi Anda ide.
00:08:33Jadi, kapan pun, Anda juga bisa kembali ke Claude Code dan memberikan perintah untuk melakukan berbagai perubahan ini.
00:08:39Sekali lagi, hal terhebat dari melihat semua ini secara visual adalah kenyataan bahwa saya dapat melakukan iterasi dengan begitu cepat alih-alih harus meminta Claude Code, menunggu hasilnya, melihat apakah saya menyukainya, meminta Claude Code lagi, menunggu hasilnya, benar kan?
00:08:52Ini membuat seluruh proses menjadi jauh lebih cepat.
00:08:55Jadi, kita bisa mengubah tampilan teksnya.
00:08:58Kita bisa mengubah ukuran sebenarnya, ketebalan, jarak baris, dan seterusnya.
00:09:03Jadi, segala sesuatu yang Anda lihat di sini dapat diedit.
00:09:06Namun ingat juga, kita bisa melakukan perubahan besar juga.
00:09:08Jadi, saya kurang menyukai tampilan umum dari, Anda tahu, yang kedua.
00:09:12Kita juga bisa melakukannya.
00:09:13Misalnya, saya bisa memberikan perintah lain yang menyatakan, hei, saya kurang suka konten yang ini.
00:09:17Saya ingin kontennya lebih berbobot dalam hal menjelaskan kepada orang-orang apa fungsi slash design.
00:09:21Jadi, saya bisa bilang sesuatu seperti untuk dial design, yang kedua, saya agak ingin menggunakan itu.
00:09:26Tapi jujur saja, saya ingin mengubah bagian isinya.
00:09:29Sekali lagi, kita mengarah ke bentuk infografis yang menjelaskan apa sebenarnya keunggulan slash design.
00:09:34Jadi, saat Anda membuatnya kembali, Anda bisa mengabaikan dua yang lainnya.
00:09:36Saya hanya ingin fokus pada yang itu untuk saat ini.
00:09:38Silakan lakukan pencarian web, pastikan Anda memahami apa keunggulan sebenarnya dari slash design, lalu masukkan ke dalam versi baru infografis ini.
00:09:48Dan inilah versi terbaru dari poster tersebut.
00:09:49Seperti yang bisa Anda lihat, ada lebih banyak informasi tentang apa kegunaan slash design yang baru ini.
00:09:53Dan sekali lagi, karena kita menggunakan skill slash design yang baru ini, proses editsnya menjadi sangat mudah.
00:09:56Oh, saya tidak suka teks yang di sini.
00:09:59Saya bisa memindahkannya ke mana pun saya mau.
00:10:00Saya bisa menyesuaikan teksnya itu sendiri, dan seterusnya, dan seterusnya.
00:10:03Dan dari sini, Anda tinggal melanjutkan proses tiga langkah yaitu mencari inspirasi, menggunakan skill yang tepat, dan melakukan iterasi pada desain apa pun yang Anda sukai.
00:10:11Jadi, jika kita memang ingin memilih yang di tengah ini, kita tinggal bilang ke Claude Code, hei, saya hanya ingin bekerja dengan yang di tengah ini.
00:10:16Dan Anda tinggal melakukan iterasi terus-menerus sampai Anda menyukai hasil yang Anda buat.
00:10:20Lalu Anda bisa melakukan apa saja dengan hasil tersebut.
00:10:22Secara keseluruhan, skill slash design ini benar-benar membuat desain front-end menjadi jauh lebih mudah di dalam Claude Code itu sendiri.
00:10:28Sering kali, kita harus mengandalkan hal-hal luar seperti Impeccable untuk melakukan jenis desain langsung di web seperti ini.
00:10:34Jadi, pastikan Anda meluangkan waktu untuk mencoba fitur baru ini.
00:10:36Menurut saya, ini sangat cocok bagi siapa saja yang terbiasa menggunakan Claude Code tetapi menyukai aplikasi web Claude Design dan merasa canggung jika harus beralih di antara keduanya.
00:10:45Itulah pasarnya.
00:10:46Itulah audiens yang dituju.
00:10:48Jadi, seperti biasa, beri tahu saya pendapat Anda tentang ini.
00:10:51Pastikan untuk memeriksa Chase AI Plus jika Anda ingin mendapatkan masterclass Claude Code saya.
00:10:55Selain itu, sampai jumpa di video berikutnya.