00:00:00Jadi, pembaruan tidak pernah berhenti.
00:00:02Anthropic baru saja merilis Claude Design,
00:00:05yang sekarang memberi kita antarmuka untuk membuat aplikasi web,
00:00:09situs web, hampir apa pun yang kita inginkan
00:00:11melalui antarmuka Claude.
00:00:13Ini adalah versi mereka dari Google Stitch.
00:00:16Dan seperti yang bisa Anda lihat dari video demo ini,
00:00:18semuanya tentang memberi Anda kemampuan untuk mengubah segalanya
00:00:21dari makro hingga mikro dengan desain ini.
00:00:23Dan kita tidak hanya berbicara tentang aplikasi web,
00:00:25kita juga berbicara tentang desain seluler.
00:00:27Dan ini agak lucu karena ketika kita berbicara tentang
00:00:28Anthropic dan Claude Code,
00:00:30salah satu kelemahan terbesarnya adalah desain front-end.
00:00:32Jadi, melihat bahwa mereka sekarang keluar
00:00:34dengan aplikasi lengkap
00:00:36yang menangani kelemahan ini sangatlah keren.
00:00:39Jadi dalam video ini, saya akan menunjukkan cara kerjanya.
00:00:41Kita akan melakukan demo singkat
00:00:42agar Anda bisa mencobanya sendiri.
00:00:43Sekarang, Claude Design dibuat dengan mempertimbangkan Opus 4.7
00:00:46dan tersedia jika Anda menggunakan apa pun
00:00:49mulai dari Pro Max hingga Enterprise.
00:00:51Dan ini melakukan segalanya mulai dari prototipe hingga mockup
00:00:53hingga presentasi PowerPoint.
00:00:54Dan itu adalah sesuatu yang bisa kita ekspor ke berbagai hal
00:00:57seperti Microsoft PowerPoint atau mengirimnya ke Canva.
00:00:59Sekarang, salah satu hal keren tentang ini adalah desain merek.
00:01:01Jadi Anda bisa memberikan basis kode,
00:01:03misalnya basis kode situs web Anda,
00:01:05dan itu akan menarik semua aset merek dari situs web tersebut
00:01:09sehingga dapat menyesuaikan hal-hal seperti warna dan tipografi
00:01:11dengan desain yang sedang Anda kerjakan.
00:01:12Untuk memulai, Anda hanya perlu membuka claud.ai/design
00:01:15dan itu akan membawa Anda ke halaman web yang terlihat seperti ini.
00:01:18Sekarang, langsung di sebelah kiri, kita punya beberapa opsi berbeda,
00:01:20prototipe, slide deck, Anda bisa menggunakan templat atau lainnya.
00:01:23Di bawah sini di bagian bawah, seperti yang saya bicarakan,
00:01:25kita punya kemampuan untuk membuat sistem desain.
00:01:27Jadi jika saya pergi ke pengaturan sistem desain,
00:01:29saya bisa memberikan sesuatu seperti nama perusahaan saya,
00:01:33lalu saya bisa memberikan contoh sistem desain saya.
00:01:36Anda tidak harus melakukan ini,
00:01:38tapi ini akan membantu jika Anda sudah memiliki sesuatu
00:01:40yang ingin Anda sesuaikan.
00:01:41Jadi Anda bisa memberikannya tautan ke GitHub Anda.
00:01:43Anda sebenarnya bisa menyeret foldernya.
00:01:45Jadi jika Anda memiliki basis kode di komputer Anda,
00:01:48Anda bisa menyeretnya ke sini,
00:01:49atau Anda bisa menambahkan font, logo, dan aset,
00:01:51serta catatan lainnya.
00:01:52Jadi yang saya lakukan adalah saya memilih folder di komputer saya
00:01:55dengan aset untuk situs web saya,
00:01:57lalu saya klik lanjutkan ke pembuatan.
00:01:59Saat Anda melakukan ini, terutama jika basis kodenya besar,
00:02:01pertama-tama, itu tidak akan mengunggah seluruh basis kode.
00:02:03Itu akan mencari tahu file mana yang sebenarnya masuk akal.
00:02:05Dan kedua, Anda akan mendapatkan jendela pop-up yang bertuliskan,
00:02:07"Hei, ini bisa memakan waktu 15 hingga 20 menit,"
00:02:09saat sistem memeriksa semua file Anda.
00:02:11Sekarang, jika Anda ingin melakukan sesuatu dari awal,
00:02:12Anda juga bisa melakukannya.
00:02:13Jadi kita akan mulai prototipe baru.
00:02:16Kita akan menamainya demo Chase.
00:02:17Kita punya dua opsi.
00:02:18Anda bisa memilih hanya wireframe kasar,
00:02:20atau kita bisa langsung ke mockup fidelitas tinggi.
00:02:23Jadi kita akan pilih mockup.
00:02:25Itu akan membawa Anda ke halaman ini.
00:02:26Dan sekali lagi, benar-benar terasa suasana Stitch di sini.
00:02:28Jadi saya akan memberitahunya,
00:02:29mari kita desain grafik tema gelap interaktif
00:02:31yang menunjukkan bagaimana budaya mengalir antar kota,
00:02:33bola dunia yang berputar dengan kota-kota yang dihubungkan oleh jalur bercahaya.
00:02:35Ini hal yang sama yang mereka lakukan dalam demo,
00:02:37tapi saya tertarik untuk melihat apakah yang kita dapatkan di sini
00:02:40benar-benar cocok dengan aset yang mereka tunjukkan dalam video,
00:02:43dan perbedaan apa yang akan kita lihat.
00:02:45Seberapa besar mereka melebih-lebihkannya di iklan?
00:02:47Jadi kita akan langsung mengirimkannya.
00:02:48Dan omong-omong, Anda bisa melihat di sini,
00:02:50kita juga bisa memilih hal-hal seperti modelnya.
00:02:52Anda bisa melampirkan file.
00:02:53Anda sebenarnya bisa melakukan suara di sini dan mengimpor apa pun.
00:02:55Jadi segera saja, itu mulai menanyakan beberapa pertanyaan,
00:02:57yang sangat saya sukai.
00:02:58Ini hampir mirip dengan mode rencana di dalam Claude code.
00:03:02Jadi jenis budaya apa yang kita pikirkan?
00:03:04Mari kita pilih gaya bola dunia campuran.
00:03:07Mari kita lakukan, mari kita lakukan jalur alur ini.
00:03:13Itu terlihat keren.
00:03:14Apa yang ingin kita lakukan untuk palet warna?
00:03:16Mari kita pilih multi-rona.
00:03:18Dan segera, saya menyukai kenyataan
00:03:20bahwa kita sekarang mendapatkan perintah-perintah ini.
00:03:21Jika saya masuk ke Stitch, saya tidak akan benar-benar mendapatkan ini.
00:03:24Jika saya masuk ke hal lain, saya tidak akan benar-benar mendapatkan ini.
00:03:26Salah satu hal paling kuat di dalam Claude code,
00:03:29dan kita telah membicarakan ini di pelajaran desain web lainnya,
00:03:31adalah melakukan tanya jawab ini
00:03:33untuk mengetahui titik-titik buta dalam rencana kita.
00:03:37Dan fakta bahwa ia menanyakan semua pertanyaan ini sangat besar.
00:03:39Ia menanyakan cukup banyak.
00:03:40Bahkan mode rencana normal di Claude code hanya menanyakan sekitar tiga.
00:03:43Jadi kita akan seret untuk memutar.
00:03:45Kota mana yang harus kita tampilkan?
00:03:47Mari kita lakukan 10 teratas.
00:03:49Berapa banyak UI?
00:03:50Mari kita buat dasbor lengkap.
00:03:53Suasana keseluruhan.
00:03:54Mari kita pilih gaya editorial.
00:03:58Kita akan tetap dengan editorial.
00:04:00Apa yang harus bisa diubah?
00:04:02Ooh, kita akan buat palet warna alur.
00:04:07Saya akan memintanya melakukan tiga hal.
00:04:08Mari kita lanjutkan.
00:04:09Lalu di sebelah kiri, setelah kita menjawab pertanyaan-pertanyaan itu,
00:04:11ia mengatur kemajuannya.
00:04:12Sekali lagi, mirip dengan apa yang akan kita lihat di Claude code
00:04:15jika kita mengaturnya ke mode rencana dan memintanya melakukan sesuatu.
00:04:17Dan omong-omong, ini jelas sesuatu
00:04:19yang harus Anda lakukan di aplikasi web.
00:04:22Ini bukan sesuatu yang tersedia di terminal
00:04:24karena alasan yang jelas terkait sifat grafisnya.
00:04:27Dan dari apa yang saya baca,
00:04:29saya tidak berpikir ini akan pernah diimplementasikan
00:04:30ke dalam aplikasi desktop, atau mungkin saja suatu saat nanti.
00:04:33Tapi untuk saat ini, Anda harus melakukannya melalui Claude.ai.
00:04:35Sekarang, selagi ini sedang dibangun,
00:04:36mari kita bicarakan beberapa pertanyaan yang mungkin Anda miliki,
00:04:38seperti, apa bedanya ini
00:04:39dari saya memberikan perintah ini
00:04:41ke jendela obrolan atau membuka Claude code
00:04:43dan hanya berkata, hei, saya ingin Anda
00:04:45membangun hal interaktif ini.
00:04:47Yah, dan membiarkannya saja,
00:04:48membuat semacam aplikasi web dari itu.
00:04:50Jawabannya adalah, jika kita sangat reduktif, tidak ada bedanya.
00:04:54Benar, itu hanya menulis kode.
00:04:55Hasilnya akan sama saja.
00:04:56Perbedaannya adalah, dan sekali lagi,
00:04:58jika Anda pernah melakukan desain front-end dalam kapasitas apa pun,
00:05:00meskipun itu hanya halaman arahan sederhana,
00:05:02Anda memahami kekuatan dari kemampuan
00:05:04untuk melihat hal-hal ini secara visual dan membandingkannya.
00:05:05Itulah mengapa Google Stitch sangat keren
00:05:08karena hal luar biasa tentang Stitch
00:05:09bahkan bukan filosofi desainnya,
00:05:11meskipun menurut saya itu sangat bagus.
00:05:12Melainkan fakta bahwa saya memiliki antarmuka
00:05:13di mana saya bisa melihat banyak opsi secara visual
00:05:15dan mengeditnya dengan cara ini.
00:05:17Lalu ketika saya menyukainya, saya tarik ke kode.
00:05:18Saat saya melakukan semuanya berbasis kode
00:05:20dari perspektif desain, itu sulit.
00:05:22Rasanya agak kaku.
00:05:23Agak sulit untuk mengambil media visual
00:05:26dan memasukkannya ke dalam bahasa alami,
00:05:28yang kemudian diubah menjadi kode,
00:05:29yang kemudian diubah menjadi visual dan benar-benar tepat,
00:05:32terutama di awal.
00:05:33Saya perlu melihat sesuatu secara visual.
00:05:34Setidaknya bagi saya, saya perlu melihat pilihan.
00:05:36Jadi memiliki ini sangat luar biasa.
00:05:38Ini adalah langkah besar bagi Anthropic dan Claude code
00:05:41karena ini selama ini menjadi titik lemah.
00:05:42Itulah sebabnya Anda melihat aplikasi seperti Pencil
00:05:45dan hal-hal seperti itu menjadi sangat populer
00:05:46karena itu memberi Anda media visual
00:05:48untuk menangani hal-hal semacam ini.
00:05:49Dan juga catatan singkat, seperti yang Anda lihat di bawah sini,
00:05:51ini adalah aplikasi yang sudah matang.
00:05:53Ini pada dasarnya adalah pembuatan prototipe.
00:05:55Jadi Anda bisa memiliki hal-hal yang disebut API.
00:05:58Anda harus menganggap ini lebih sebagai,
00:06:00bukan hanya sekadar alat desain visual Canva.
00:06:03Anda harus menganggap ini lebih
00:06:04dalam hal seperti Google Studio,
00:06:05seperti jenis layanan Google AI Studio.
00:06:07Jadi inilah hasilnya.
00:06:08Agak menggunakan gaya editorial.
00:06:10Kita bisa melihat bola dunia tepat di sini.
00:06:12Saya bisa menyeretnya dengan mouse.
00:06:14Kita bisa mengatur kecepatan rotasi, mengubah intensitas cahaya,
00:06:18mengubah palet.
00:06:19Itu lumayan keren.
00:06:21Dan kemudian ada semacam tulisan kecil di sebelah sini.
00:06:25Sekarang mari kita bicara tentang kemampuan untuk mengedit benda ini.
00:06:27Pertama-tama, kita punya menu tweak kecil di atas sini.
00:06:30Jadi tweak itu hanya berkaitan dengan kecepatan rotasi
00:06:33dan sebagainya.
00:06:34Saya bisa meninggalkan komentar, saya bisa mengedit, saya bisa menggambar.
00:06:37Dan kemudian kita juga bisa melakukan hal-hal seperti layar penuh
00:06:39untuk melihat seperti apa bentuk aslinya.
00:06:41Menarik juga dalam mode layar penuh.
00:06:42Itu terlihat jauh, jauh lebih baik sebenarnya.
00:06:44Tapi katakanlah saya ingin melakukan pengeditan pada benda ini.
00:06:46Jelas kita bisa kembali ke jendela perintah
00:06:49dan memberinya instruksi.
00:06:50Jika saya pergi ke edit, saya bisa mendapatkan pengaturan yang jauh lebih detail.
00:06:55Ini mengingatkan saya pada editor Cursor
00:06:58atau bahkan sesuatu seperti Lovable.
00:06:59Jadi saya sebenarnya bisa memilih kota-kota individual.
00:07:04Jika saya memilih bola dunia secara keseluruhan, itu akan muncul di sini.
00:07:07Dan saya bisa mengubah hal-hal seperti warnanya.
00:07:11Itu terlihat jelek, ketinggiannya dan semua itu.
00:07:14Jadi saya memiliki kemampuan untuk menjadi sangat, sangat spesifik
00:07:16dengan apa yang ingin saya ubah, yang sekali lagi, sangat bagus.
00:07:18Lebih baik daripada saya mengatakannya dalam teks,
00:07:19"Hei, saya ingin mengubah ukuran ini."
00:07:21Yah, saya bisa langsung memilihnya di sini dan mengeditnya dengan cara itu.
00:07:24Kita juga bisa memberikan komentar.
00:07:25Jadi saya bisa mengklik pada hal tertentu.
00:07:27Sama seperti edit, tapi alih-alih benar-benar mengubah,
00:07:29"Hei, angka-angka spesifik ini."
00:07:31Saya bisa mengklik bola dunia dan meninggalkan komentar seperti,
00:07:34"Bisakah kita membuat bola dunianya lebih besar?"
00:07:37Kirim ke Claude.
00:07:40Dan itu akan membuat antrean komentar.
00:07:41Jika Anda tidak ingin mengirimnya ke Claude segera,
00:07:43tapi kapan saja Anda bisa mengirimnya ke Claude
00:07:45dan ia akan mulai bekerja.
00:07:46Selain itu, kita juga bisa menggambar.
00:07:48Jadi saya bisa bilang, "Baiklah,
00:07:50saya hanya ingin ada bulan di sebelah sini."
00:07:52Mari kita tambahkan bulan.
00:07:53Saya ingin melihat sesuatu seperti Artemis 2 terbang di sini.
00:07:56Hal-hal seperti itu.
00:07:56Lalu di sini, kita juga punya file desain.
00:07:58Jadi Anda sebenarnya bisa melihat
00:08:00kode di balik layarnya.
00:08:02Dan terakhir, kita memiliki kemampuan untuk mengekspor
00:08:04dan membagikan benda ini.
00:08:05Jadi jika saya klik ekspor, saya bisa mengunduhnya sebagai zip.
00:08:07Saya bisa mengekspornya sebagai PDF, PowerPoint, mengirimnya ke Canva.
00:08:11Atau yang juga sangat keren adalah saya bisa menyerahkan ini
00:08:13ke Claude code.
00:08:14Dan itu memberi saya perintah untuk membawanya
00:08:15ke dalam Claude code, yang mana sangat hebat.
00:08:17Jadi di situlah saya akan mengakhiri untuk hari ini.
00:08:18Saya tahu itu tadi agak cepat dan to the point,
00:08:19tapi saya hanya ingin menunjukkan kepada Anda
00:08:21cara menavigasi alat ini dan apa yang mungkin dilakukan.
00:08:23Pastikan untuk menantikan pembahasan mendalam besok atau lusa,
00:08:26yang akan menunjukkan bagaimana Anda bisa memaksimalkan ini.
00:08:29Seperti biasa, beri tahu saya pendapat Anda.
00:08:31Jika Anda ingin mendapatkan Chase AI Masterclass,
00:08:33tautannya ada di komentar yang disematkan dan sampai jumpa.