00:00:00Desain Claude adalah hal terbaik yang terjadi
00:00:01pada pekerjaan front-end Anda sejak adanya skill.
00:00:05Namun jika Anda tidak tahu apa yang dilakukan,
00:00:06Anda akan menghabiskan seluruh kuota penggunaan Anda
00:00:09sebelum sempat membuat halaman arahan (landing page).
00:00:11Tetapi masterclass desain Claude ini
00:00:12akan membantu menyelesaikan masalah itu
00:00:14saat saya menunjukkan fitur mana yang benar-benar layak bagi waktu Anda.
00:00:17Selain itu, kita akan melakukan pengujian langsung
00:00:19antara Claude code biasa versus desain Claude.
00:00:22Dan kita akan membahas beberapa kasus penggunaan yang menarik
00:00:25yang melampaui pekerjaan halaman arahan sederhana.
00:00:27Ini adalah alat yang luar biasa dan kita punya banyak hal untuk dibahas.
00:00:30Jadi mari kita mulai.
00:00:31Jadi desain Claude adalah tanggapan Anthropic terhadap Stitch dari Google.
00:00:35Dan sama seperti Google Stitch,
00:00:37itu memberi kita kemampuan untuk membuat sejumlah maket visual
00:00:40untuk aplikasi web, aplikasi seluler, dan bahkan slide presentasi.
00:00:43Untuk mengakses desain Claude, harus melalui aplikasi web.
00:00:45Jadi claud.ai/design.
00:00:47Itu tidak tersedia di Claude code
00:00:48dan tidak tersedia di aplikasi desktop.
00:00:51Dan berbicara tentang batasan,
00:00:52satu batasan besar yang perlu kita sebutkan segera
00:00:54adalah batas penggunaan.
00:00:56Ini memiliki batas mingguan tersendiri dan batasnya sama
00:00:59baik Anda menggunakan Pro, Max 5, atau 20X.
00:01:02Dan ini adalah pemakan sumber daya,
00:01:05terutama jika Anda menggunakan alat tertentu
00:01:08yang akan kita bicarakan nanti di video ini.
00:01:10Namun meskipun dengan batasan-batasan tersebut,
00:01:11desain Claude adalah lompatan besar ke depan
00:01:14dalam hal pekerjaan desain front-end dengan Claude.
00:01:17Hal-hal seperti sistem tweak membuatnya sangat mudah untuk melihat
00:01:20bagaimana perubahan yang berbeda akan menyesuaikan nuansa keseluruhan
00:01:23dari aplikasi web Anda.
00:01:23Hal-hal seperti edit memungkinkan Anda dengan sangat cepat masuk ke perincian
00:01:28dan mengubah sesuatu pada tingkat granular
00:01:30tanpa mengandalkan perintah teks.
00:01:31Tetapi jika Anda ingin tetap menggunakan sistem komentar,
00:01:33kita bisa melakukannya.
00:01:34Mereka memiliki tombol komentar yang sebenarnya
00:01:35di mana saya bisa memilih bagian individu dari aplikasi web
00:01:39dan meninggalkan komentar yang langsung menuju ke Claude code
00:01:42atau ditambahkan ke antrean komentar untuk anggota tim saya lainnya
00:01:46untuk menambahkan pemikiran mereka karena ini sangat kolaboratif.
00:01:48Anda dapat membagikan desain ini dengan orang lain
00:01:50dan Anda semua dapat mengerjakan hal yang sama dari tempat yang berbeda.
00:01:53Saya bisa menggambar di aplikasi untuk menunjukkan apa yang ingin saya ubah.
00:01:56Saya bisa dengan sangat mudah melihat presentasi dalam layar penuh.
00:02:00Dan yang paling penting,
00:02:02saya bisa dengan sangat mudah mengekspor ini ke Claude code.
00:02:05Dan pengaturan visual ke depan desain ini membuatnya jauh lebih mudah
00:02:09untuk mendapatkan hasil front-end yang Anda inginkan
00:02:11daripada harus sepenuhnya di dalam Claude code
00:02:13dan harus melakukan penyegaran server pengembangan kode kembali ke kode
00:02:18dinamis yang sudah lama kita miliki.
00:02:19Tetapi untuk mendapatkan hasil maksimal dari alat ini,
00:02:21ada beberapa hal yang perlu Anda ketahui.
00:02:22Jadi kita akan mulai dengan pekerjaan desain front-end
00:02:25untuk aplikasi web, yang merupakan apa yang dicari kebanyakan orang.
00:02:29Dan kita juga akan menunjukkan apa yang akan diberikan Claude code kepada kita
00:02:33versus desain Claude.
00:02:34Jadi Anda bisa melihat apa yang kita dapatkan di sini
00:02:37dan apakah ini sepadan.
00:02:38Tapi sebelum kita melakukan itu, pesan singkat dari sponsor kita, yaitu saya.
00:02:42Jadi kita baru saja merilis masterclass Claude code
00:02:44alih-alih chase AI plus.
00:02:45Dan ini adalah cara nomor satu untuk beralih dari nol menjadi pengembang AI,
00:02:48terutama jika Anda tidak berasal dari latar belakang teknis.
00:02:51Dan akhir-akhir ini kita berfokus pada sistem OS agen kita
00:02:54di dalam masterclass,
00:02:55di mana kita menggunakan Claude code sebagai mesin
00:02:58dan kita melengkapinya dengan obsidian untuk memori,
00:03:00dengan GWS untuk melampirkan seluruh Google suite kita.
00:03:03Dan kemudian dengan fondasi ini,
00:03:05melampirkan semua paket keterampilan yang disesuaikan,
00:03:09yang bisa kita pikirkan yang masuk akal untuk kasus penggunaan kita.
00:03:12Dan kita bahkan berbicara tentang bagaimana mengemas semua itu
00:03:14dan menjualnya kepada klien.
00:03:15Jadi jika itu adalah sesuatu yang Anda minati,
00:03:17pastikan untuk memeriksanya.
00:03:18Ini ada di dalam chase AI plus,
00:03:19akan ada tautan di komentar yang disematkan.
00:03:21Jadi mari kita bicara tentang desain Claude dan aplikasi web Anda,
00:03:24karena ada beberapa keputusan yang perlu kita buat
00:03:26sebelum kita bahkan mulai meminta hal ini.
00:03:28Dan sekarang saya akan bergerak ke seluruh layar
00:03:31selama video ini, jadi bersabarlah dengan saya.
00:03:32Nah, pertanyaan pertama yang akan kita tanyakan pada diri sendiri adalah,
00:03:35apakah kita akan menggunakan sistem desain?
00:03:38Jadi di sini bagi saya, Anda melihat tidak ada
00:03:40dan Anda melihat sistem desain OS agen.
00:03:42Milik Anda, awalnya akan mengatakan tidak ada.
00:03:44Jika kita ingin membuat sistem desain,
00:03:47kita akan datang ke sini
00:03:48dan kita akan pergi ke sistem desain.
00:03:50Jadi Anda mungkin tidak akan memiliki apa pun di sini
00:03:52dan Anda akan menekan buat.
00:03:53Nah, apa itu sistem desain?
00:03:56Yah, pada dasarnya ini seperti templat visual
00:04:00yang dapat Anda terapkan pada proyek apa pun yang Anda buat di masa mendatang.
00:04:03Jadi jika Anda memiliki font tertentu, Anda menggunakan logo tertentu,
00:04:07apa pun yang spesifik, bahkan jika itu hanya seperti suasana hati umum,
00:04:10Anda bisa melakukannya di sini.
00:04:11Di sinilah Anda mengaturnya.
00:04:12Jadi Anda tidak perlu mengulangi diri sendiri
00:04:13untuk setiap proyek.
00:04:15Jika Anda memiliki semacam garis lurus
00:04:17dari sudut pandang visual desain.
00:04:20Jadi Anda memasukkan nama perusahaan Anda
00:04:21dan kemudian Anda memberikan contoh.
00:04:23Nah, contoh-contoh ini bisa berupa kode.
00:04:25Jadi saya bisa menautkan repo GitHub.
00:04:27Saya bisa menarik folder ke sini.
00:04:29Saya bisa mengunggah file.
00:04:30Saya bisa menambahkan font, aset, apa pun.
00:04:33Di sinilah Anda menentukan merek Anda.
00:04:36Nah, peringatan.
00:04:39Ini yang saya bicarakan ketika saya mengatakan pemakan token.
00:04:42Dan dengan pemakan token, maksud saya menjalankan sistem desain
00:04:45akan A, memakan waktu antara lima hingga 15 menit
00:04:47karena ia menelan semuanya, agak bergantung pada ukurannya.
00:04:50Dan B, ini akan memakan sekitar 20 hingga 25% dari penggunaan Anda
00:04:55sejak awal.
00:04:56Jadi pahami itu, jangan datang ke sini dengan berpikir,
00:04:57oh, hal pertama yang akan saya lakukan
00:04:58adalah hanya menyalin lima sistem desain.
00:05:00Sama sekali tidak, sama sekali tidak.
00:05:02Lakukan satu jika Anda tahu apa yang ingin Anda lakukan
00:05:05dan saya akan menunjukkan seperti apa bentuknya
00:05:07saat kita mengaturnya.
00:05:08Tapi jangan melakukan lebih dari itu.
00:05:09Setidaknya tidak sekarang sampai mereka meningkatkan batasnya
00:05:11yang mungkin akan mereka lakukan di masa depan.
00:05:12Jadi pemakan sumber daya, pemakan sumber daya, pemakan sumber daya,
00:05:16jangan sampai Anda dirugikan oleh ini.
00:05:17Nah, jika Anda memang ingin melakukan ini,
00:05:19Anda hanya akan mengisi semua ini
00:05:20dan kemudian Anda akan menekan lanjutkan ke pembuatan
00:05:21dan kotak pop-up akan menunjukkan sesuatu seperti,
00:05:24hei, ini akan memakan waktu lima hingga 15 menit.
00:05:26Setelah selesai menelan semua aset itu,
00:05:29Anda akan mendapatkan sesuatu seperti ini
00:05:30di mana ia meminta Anda untuk meninjau rancangan sistem desain
00:05:33yang telah dibuatnya.
00:05:34Apa yang saya berikan adalah kode untuk dasbor OS agen saya
00:05:38yang saya tunjukkan sedikit sebelumnya.
00:05:40Ini memiliki semacam tema warna cloud.
00:05:43Ini memiliki font teks khusus, semua itu.
00:05:45Jadi ini yang saya berikan,
00:05:46adalah pada dasarnya semacam visual ini.
00:05:48Dan ia kembali dengan semua ini.
00:05:49Jadi, hei, ini terlihat bagus.
00:05:53Ini terlihat bagus.
00:05:53Hei, lihat maskot itu.
00:05:54Terlihat agak familiar.
00:05:55Itu terlihat bagus.
00:05:57Suara melewati semua warna.
00:05:59Jadi ia masuk ke dalam sangat, sangat seperti hal detail
00:06:03seperti, oke, seperti apa warna yang Anda inginkan?
00:06:06Seperti apa kartu yang Anda inginkan?
00:06:07Ini sangat spesifik.
00:06:08Ini sangat bagus.
00:06:09Dan lagi, sangat mengingatkan pada Stitch.
00:06:11Sangat, sangat mengingatkan pada semacam hal ini.
00:06:14Jadi saya melanjutkan dan menyetujui semuanya.
00:06:16Dikatakan bahwa font merek hilang.
00:06:17Jadi jika saya memiliki font khusus yang selalu ingin saya gunakan,
00:06:20saya bisa mengunggahnya juga.
00:06:21Dan kapan saja saya bisa kembali ke sini
00:06:23karena ia memecah semua hal komponen,
00:06:26klik di atasnya, lalu lihat dan edit sesuai kebutuhan.
00:06:30Dan sama seperti apa yang akan Anda lihat nanti
00:06:31dengan halaman arahan yang sebenarnya dan slide presentasi
00:06:33dan semua itu, kita bisa membagikan ini, bukan,
00:06:36ke tim atau apa pun, atau saya bisa mengekspornya.
00:06:39Seperti PowerPoint PDF, kita bisa mengirimnya ke Canva, HTML,
00:06:42kode cloud, benar-benar, sangat mudah, hanya dengan satu klik.
00:06:44Juga, kita memiliki file desain yang sebenarnya.
00:06:46Jadi saya bisa melihat ke dalam sini dan melihat semua yang terjadi,
00:06:50file HTML yang sebenarnya dan semua itu sendiri.
00:06:52Jadi ada banyak hal yang bisa Anda sesuaikan dan mainkan di sini.
00:06:55Ini sama sekali bukan kotak hitam di mana seperti,
00:06:57yah, saya harap desain cloud menghasilkan sesuatu yang bagus.
00:06:59Siapa yang tahu apa yang terjadi di bawah permukaan?
00:07:01Tidak, Anda memiliki wawasan.
00:07:03Seperti ini semua adalah kode.
00:07:04Seperti ini adalah cara keren baginya untuk membuat kode
00:07:06dan kita bisa mengambil kode itu ke mesin lokal kita sendiri
00:07:09kapan saja.
00:07:10Kita tidak terjebak di sini.
00:07:11Jadi untuk membawanya kembali ke desain cloud dan aplikasi web,
00:07:13itu adalah pertanyaan pertama yang kita jawab.
00:07:15Apakah kita akan menggunakan sistem desain?
00:07:16Apakah ini sesuatu yang sama secara visual
00:07:18dengan apa yang telah kita lakukan di masa lalu?
00:07:19Dan yang lebih penting,
00:07:20apakah Anda bahkan membuat sistem desain sama sekali?
00:07:22Apakah Anda telah menyerahkan 20% token mingguan Anda
00:07:25kepada para dewa Anthropic dan bahkan sudah memiliki opsi ini?
00:07:28Nah, untuk demo ini, kita akan memilih tidak ada.
00:07:30Jadi kita semua berada dalam pemahaman yang sama.
00:07:32Pertanyaan berikutnya adalah, hei,
00:07:33apakah saya ingin membuat wireframe atau resolusi tinggi?
00:07:37Kemungkinan besar Anda akan memilih resolusi tinggi.
00:07:39Agar Anda bisa melihat seperti apa sebenarnya nanti.
00:07:41Tapi sekali lagi, hei, jika Anda ingin membuat wireframe,
00:07:43Anda selalu bisa kembali lagi nanti.
00:07:44Anda tidak terpaku pada satu atau yang lainnya.
00:07:45Tapi untuk ini, kita akan gunakan resolusi tinggi.
00:07:47Jadi kita sebut saja demo CD dan kita akan buat.
00:07:50Lalu ini akan membawa kita ke sini dan meminta konteks.
00:07:53Jadi, apakah Anda memiliki sistem desain itu atau hanya tangkapan layar
00:07:56atau basis kode atau file Figma?
00:07:58Terlepas dari itu, jika Anda mulai dari awal di langkah nol,
00:08:01atau jika Anda memiliki basis kode,
00:08:03idealnya Anda ingin memberikannya sesuatu.
00:08:05Jika Anda memiliki basis kode, seperti yang kita bahas,
00:08:07Anda sudah mengerjakan aplikasi, berikan ke sini.
00:08:09Berikan ke Clod Design.
00:08:10Itu akan bekerja lebih baik.
00:08:12Namun meskipun tidak, dan Anda mulai dari nol,
00:08:14saya sangat menyarankan setidaknya,
00:08:16Anda mencari inspirasi di luar sana
00:08:18yang Anda sukai,
00:08:20baik itu dari Dribbble atau Awwwards atau Godly Websites,
00:08:23apa saja, kan?
00:08:25Memulai dari lembaran kosong dan mengharapkan Clod Design
00:08:27melakukan semua pekerjaan berat,
00:08:28karena saya yakin prompt Anda akan buruk.
00:08:30Pahami saja bahwa semakin sedikit konteks yang Anda berikan,
00:08:33semakin besar kemungkinan Anda mengalami regresi ke rata-rata.
00:08:35Jadi pahami itu sebelum memulainya.
00:08:36Kita memiliki kemampuan untuk membuat sketsa.
00:08:38Jadi, Anda tahu, kita bisa benar-benar menggambar di sini
00:08:40dan seperti, oke, ini gambar kita.
00:08:44Saya ingin teks di sini.
00:08:48Lalu saya ingin gambar hero.
00:08:53Gambar hero di sini.
00:08:59Lalu mari kita buat spanduk gulir.
00:09:10Kita akan memberinya sesuatu,
00:09:12meskipun itu karya seni brilian seperti ini.
00:09:15Dan Anda bisa melakukan lebih banyak dari itu.
00:09:16Kita bisa mengganti pena, kan?
00:09:18Kita bisa memasukkan teks.
00:09:19Saya bisa memasukkan hal yang berbeda, seperti, saya bisa menambah sticky note.
00:09:21Jadi ada banyak hal yang bisa dilakukan di sini.
00:09:25Dan dari sini, Anda tinggal meminta hal tersebut.
00:09:28Anda juga memiliki kemampuan untuk mengubah modelnya.
00:09:30Opus 4.7 adalah yang saya sarankan,
00:09:33karena terutama jika Anda menambahkan hal-hal seperti tangkapan layar,
00:09:35Opus 4.7 memiliki fidelitas tertinggi
00:09:37dan resolusi tertinggi untuk tangkapan layarnya.
00:09:403X lipat dari yang Anda dapatkan dengan Opus 4.6.
00:09:42Jadi sekarang mari kita beri prompt.
00:09:44Saya katakan membuat halaman arahan untuk Argus,
00:09:46platform intelijen media sosial
00:09:48yang membantu kreator menemukan topik tren
00:09:49di ceruk mereka sebelum meledak.
00:09:51Itu tata letaknya, Anda tahu,
00:09:53hampir mencerminkan apa yang Anda tulis di sini.
00:09:55Jadi itulah prompt paling membosankan yang bisa kita berikan.
00:09:58Hal dasar tipe SaaS.
00:10:00Jadi mari kita lihat apa yang dihasilkannya.
00:10:02Dan inilah yang dihasilkan oleh Claw Design,
00:10:03dengan prompt yang sangat minim dan tanpa konteks di luar coretan kita
00:10:06di halaman.
00:10:08Dan hasilnya ini, yang menurut saya lumayan untuk percobaan pertama.
00:10:13Dalam hal penggunaan, peringatan penggunaan, 4%.
00:10:16Menghabiskan 4% dari total penggunaan mingguan kita
00:10:18untuk menghasilkan halaman arahan ini.
00:10:20Dan inilah yang diberikan Cloud Code kepada kita
00:10:21dengan prompt yang persis sama,
00:10:22menggunakan keahlian desain ujung depan juga.
00:10:25Tidak buruk.
00:10:26Maksud saya, ada beberapa hal kecil yang bisa kita kritik langsung,
00:10:28seperti, hei, teksnya terpotong di sini dan di sini.
00:10:32Tidak banyak yang salah pada yang satu ini.
00:10:35Teksnya memang agak tumpang tindih di sini.
00:10:39Ini menampilkan kenaikan sekarang di bawah sini,
00:10:41yang juga agak tumpang tindih, tapi cukup dekat.
00:10:45Maksud saya, sejujurnya,
00:10:46saya sedikit lebih menyukai yang desain ini,
00:10:47tapi saya bisa melihat orang lain menyukai yang ini
00:10:49sedikit lebih banyak juga.
00:10:50Jadi percobaan pertama, tidak ada perbedaan yang mencolok.
00:10:52Jadi mengapa menggunakan Claw Design?
00:10:54Di mana letak keunggulannya?
00:10:55Nah, itu mulai menonjol
00:10:56ketika kita mulai berbicara tentang variasi
00:10:59dan kemampuan untuk beriterasi.
00:11:00Dan Anda bisa melihatnya langsung dengan penyesuaian (tweaks).
00:11:03Jadi kemampuan saya untuk melakukan ini adalah hal besar.
00:11:07Saya bisa mengubah tajuk utama dengan sangat cepat
00:11:10atau melihat ticker.
00:11:13Dan kita bisa mengembangkan ini juga.
00:11:16Jadi saya menulis tingkatkan jumlah penyesuaian secara agresif.
00:11:18Saya ingin bisa bermain-main dengan ini sebanyak mungkin.
00:11:20Jadi mari kita lihat hasilnya.
00:11:22Baik, jadi sekarang kita bisa melihat ia menambahkan lebih banyak penyesuaian
00:11:26untuk kita mainkan.
00:11:27Dan berapa tingkat penggunaannya?
00:11:30Menambahkan semua penyesuaian ini menambah 7%.
00:11:32Jadi Anda bisa melihat bahwa hanya dengan menambahkan halaman arahan
00:11:36dan sekitar 14 penyesuaian, kita sudah menghabiskan, berapa itu?
00:11:39Sekitar 11% dari total kita.
00:11:40Nah, menurut saya penyesuaian itu penting.
00:11:43Saya katakan sebelumnya di intro,
00:11:44fitur apa yang sebenarnya ingin kita fokuskan
00:11:47ketika berbicara tentang Claw Design?
00:11:48Karena ketika kita baru saja melakukan satu tembakan,
00:11:49itu tidak jauh berbeda dengan apa yang saya dapatkan
00:11:51dengan keahlian desain ujung depan.
00:11:52Nah, penyesuaian ini dan kemampuan untuk mengotak-atik
00:11:55semua hal ini dan perubahan halus ini dengan cepat,
00:11:59kan, itulah kekuatan sebenarnya dari Claw Design.
00:12:02Jadi saya akan memperkecil tampilan sedikit
00:12:03supaya kita bisa melihat penyesuaiannya beraksi sedikit lebih baik,
00:12:05tetapi saya bisa melakukan semuanya sekarang dari palet hingga aksen,
00:12:10jari-jari sudut, kisi latar belakang, tanpa kisi latar belakang,
00:12:14font, penekanan, perbedaan tajuk utama, sakelar tata letak, kan?
00:12:19Inilah kekuatannya.
00:12:21Kekuatannya bukan seperti, oh, ia bisa langsung melakukan desain UI
00:12:23dan desain UI langsung jadi sangat bagus.
00:12:25Tidak, ini fakta bahwa saya benar-benar bisa beriterasi dengan sangat cepat,
00:12:29sangat cepat, ini, pikirkan betapa cepat saya melakukan ini
00:12:33dan pikirkan betapa lama waktu yang dibutuhkan
00:12:34untuk melakukan semua ini di dalam Claude Code.
00:12:36Maksud saya, kita bahkan bisa mengubah ceruk
00:12:39hal media sosial apa yang dilihatnya
00:12:41dalam gambar ini dari AI dan teknologi ke game, ke keuangan.
00:12:46Untunglah saya bisa mengatur kecepatan ticker
00:12:47karena benda ini terbang, tapi ya, ini luar biasa.
00:12:52Ini bagian satu dan saya pikir ada dua hal.
00:12:54Yah, sebenarnya ada beberapa lagi dari itu,
00:12:56tapi penyesuaian menurut saya adalah nilai tambah nomor satu dari desain
00:12:59karena ini semua tentang iterasi visual.
00:13:01Dan menurut saya, fitur paling berdampak kedua
00:13:04dari Claude Design adalah variansi halaman web.
00:13:07Jadi penyesuaian sangat mikro, kan?
00:13:09Seperti kita berbicara tentang warna, kita berbicara tentang aksen,
00:13:11kita berbicara tentang font, tapi bagaimana jika saya ingin variasi
00:13:14halaman arahan secara keseluruhan, seperti membuatnya jadi gila.
00:13:18Saya tidak berbicara tentang font yang berbeda,
00:13:19saya berbicara tentang desain yang sama sekali berbeda
00:13:21dan saya ingin bisa melihatnya ditumpuk.
00:13:23Sekali lagi, seperti yang bisa saya lakukan dengan stitch.
00:13:25Saya ingin bisa melakukan ini.
00:13:26Nah, kita bisa melakukannya di dalam Claude Design
00:13:28dan itu sangat mudah.
00:13:29Kita tinggal memintanya untuk melakukan persis seperti itu.
00:13:32Jadi saya meminta desain dan berkata,
00:13:33bisakah Anda sekarang membuat dua varian lagi dari halaman arahan ini
00:13:36yang bisa saya klik di antaranya yang gayanya sangat berbeda,
00:13:39sarankan gaya varian yang berbeda kepada saya terlebih dahulu.
00:13:42Jadi ia kembali dengan enam opsi berbeda untuk saya.
00:13:44Kita bisa melakukan gaya terminal Bloomberg,
00:13:48hypermaximal editorial, brutalist, synthwave, soft pastel,
00:13:53atau surat kabar cetak.
00:13:56Ayo, ya, agak seperti satu dan dua.
00:13:59Jadi saya akan mengatakan, mari kita lakukan satu dan dua
00:14:03dan jelas tetap pertahankan tata letak saat ini juga.
00:14:08Jadi Claude Design selesai dengan varian.
00:14:10Jadi inilah editorial satu, yang kita mulai tadi.
00:14:13Kita sekarang memiliki opsi terminal.
00:14:18Serta opsi editorial maksimal,
00:14:21yang agak menarik, sesuatu yang berbeda.
00:14:24Nah, jika Anda tidak menyuruhnya untuk,
00:14:25ia hanya akan melakukan penyesuaian untuk yang asli.
00:14:28Jadi ketika Anda melakukan varian ini,
00:14:30menurut saya alur kerja umum seharusnya,
00:14:33adalah Anda pertama-tama memulai dengan varian.
00:14:35Jadi pada tingkat makro, Anda berpikir, oke,
00:14:37saya agak ingin pergi ke arah ini.
00:14:39Dan kemudian setelah Anda memilih salah satu dari yang makro ini,
00:14:42katakanlah kita memutuskan untuk tetap dengan apa yang kita sukai,
00:14:44maka Anda akan masuk ke tahap penyesuaian yang sangat agresif.
00:14:47Jadi Anda bisa melihat semuanya
00:14:49dan menggali lebih dalam apa yang Anda inginkan.
00:14:51Karena dengan cara penggunaan yang diatur sekarang,
00:14:54jika Anda pergi makro dan Anda berkata,
00:14:56saya tidak ingin hanya tiga opsi.
00:14:57Saya ingin empat, lima varian dan saya ingin penyesuaian pada semuanya.
00:15:00Anda hanya akan menghabiskan penggunaan Anda.
00:15:02Karena menambahkan dua varian ini, maksimal dan terminal,
00:15:04itu tambahan 5%.
00:15:05Jadi itu membawa kita ke sekitar,
00:15:07saya pikir kita berada di 17% sekarang untuk halaman arahan,
00:15:11dua variasi halaman arahan ditambah penyesuaian.
00:15:13Dan saya tahu saya terus mengoceh tentang penggunaan,
00:15:14tetapi bagi banyak orang, ini masalah besar
00:15:16dan memang seharusnya begitu.
00:15:17Saya pikir ke depannya,
00:15:18ini mungkin akan mengubah seluruh masalah penggunaan,
00:15:19tapi ingat saja itu.
00:15:20Dan jadi dengan dua hal ini oleh Anda secara beriringan,
00:15:23variansi menjadi penyesuaian,
00:15:26ini memungkinkan kita untuk mendapatkan solusi 80%, solusi 90%.
00:15:31Sekarang saya bisa menjadi lebih fokus pada hal ini.
00:15:35Kita bisa naik ke sini seperti yang saya tunjukkan di awal.
00:15:37Kita bisa melakukan penyuntingan.
00:15:39Jadi saya bisa mengeklik tajuk atas ini.
00:15:42Saya bisa mengubah opasitasnya.
00:15:43Saya bisa mengubah lebar, warna, dan semua hal itu.
00:15:45Jadi kita bisa membuatnya sangat spesifik jika kita mau,
00:15:47tetapi kekuatan sebenarnya datang dari mencapai solusi 90%,
00:15:50seperti, oke, saya suka yang editorial pertama.
00:15:54Saya suka penekanannya pada tanda itu,
00:15:55maksud saya, lingkaran itu terlihat buruk, pada tanda.
00:15:59Saya suka subjudul tertentu ini, judul utama ini, apa pun itu.
00:16:04Lalu seperti, baiklah, kita akan menggunakan itu.
00:16:05Kita suka penyesuaiannya.
00:16:06Sekarang mari selesaikan sisa halaman arahan ini,
00:16:09karena ini baru bagian utama.
00:16:11Dan kemudian yang Anda lakukan adalah mengekspor ini ke Claude Code.
00:16:14Anda serahkan ini ke Claude Code.
00:16:15Saat saya mengeklik ini, Anda punya beberapa opsi.
00:16:17Anda bisa mengunduh zip-nya atau Anda cukup menyalin perintah ini
00:16:20dan Anda membawanya ke dalam Claude Code.
00:16:22Dan menurut saya alur kerja semacam ini jauh lebih cepat
00:16:25daripada berada di sini, yang merupakan hasil dari Claude Code
00:16:28dengan perintah yang persis sama.
00:16:29Maksud saya, oke, baiklah, Claude Code,
00:16:32mari utak-atik warnanya sekarang.
00:16:35Mari buat beberapa variasi.
00:16:36Mari utak-atik judul utamanya sekarang dan buat beberapa variasi.
00:16:39Itu bisa memakan waktu berjam-jam sedangkan ini hanya butuh beberapa menit.
00:16:44Dan setidaknya bagi saya, saya perlu melihat berbagai hal
00:16:47dan saya perlu melihat banyak opsi
00:16:48sebelum saya benar-benar tahu apa yang saya sukai.
00:16:50Dan lebih baik lagi, kemungkinan setelah saya melihat sesuatu,
00:16:53saya mungkin akan mengubahnya.
00:16:54Karena sejujurnya, jika mereka melihat ini,
00:16:54saya agak suka yang vertikal sekali.
00:16:56Mungkin kita buat ikon di sini atau apa pun itu.
00:16:58Saya hanya ingin melakukan iterasi.
00:17:00Saya hanya ingin melihat hal-hal yang berbeda.
00:17:02Jadi itu dua praktik terbaik terbesar yang bisa saya berikan kepada Anda
00:17:05terkait bagian aplikasi web dari ini.
00:17:08Makro, benar, mintalah variasi.
00:17:11Dan kemudian mikro, mintalah lebih banyak penyesuaian.
00:17:13Satu hal yang tidak kita lakukan di sini,
00:17:15dan kita akan menunjukkannya dalam hal-hal seperti dek slide
00:17:18dan hal-hal semacam itu,
00:17:19adalah memintanya untuk menjalankan mode rencananya sendiri.
00:17:22Jadi kita memberinya perintah dan langsung,
00:17:24itu memunculkan hasilnya untuk kita.
00:17:25Apa yang bisa kita lakukan sebagai gantinya adalah berkata,
00:17:26hei, saya ingin melakukan mode rencana dengan Anda.
00:17:28Saya ingin Anda menanyakan banyak pertanyaan kepada saya.
00:17:30Dan itu akan menjalankan Anda melalui
00:17:32sejumlah besar pertanyaan,
00:17:33seperti lima, delapan, sepuluh pertanyaan tentang,
00:17:35oke, apa yang Anda inginkan di sini?
00:17:36Apa yang Anda inginkan di sana?
00:17:37Apa yang Anda inginkan di sana?
00:17:38Dengan begitu Anda tidak perlu melakukan iterasi sebanyak itu
00:17:40dan pada akhirnya itu menghemat penggunaan Anda.
00:17:42Dan saya melalui alur yang sama
00:17:44ketika saya membuat antarmuka depan
00:17:46untuk dasbor sistem operasi agen saya.
00:17:47Anda bisa melihat di atas sini,
00:17:48ini yang awalnya saya mulai.
00:17:51Dan kemudian saya bisa melalui
00:17:52semua opsi berbeda ini.
00:17:53Saya akhirnya memilih yang ini, yang model kokpit,
00:17:56meskipun saya berpikir untuk menggunakan yang ini dengan sprite keren.
00:17:58Dan kemudian saya hanya membawa versi ini kembali ke Claude Code
00:18:01dan kemudian membuat penyesuaian kecil pada margin
00:18:03dan benar-benar menghubungkannya.
00:18:04Jadi itu menjadi aplikasi web yang layak.
00:18:06Sekarang mari kita buat desain Claude dan dek slide.
00:18:08Jadi kita akan melalui ini sedikit lebih cepat
00:18:09karena banyak fundamental yang kita bahas
00:18:13terkait aplikasi web juga berlaku untuk dek slide.
00:18:16Jadi saya tidak akan berlama-lama pada poin-poin ini.
00:18:17Dan kali ini kita akan memamerkan sistem desain yang sedang bekerja.
00:18:21Dan ingat sistem itu didasarkan pada visual
00:18:24dari sistem operasi agen kita.
00:18:26Jadi kita akan klik buat.
00:18:27Dan apa yang kita lihat?
00:18:28Pengaturan yang sama seperti sebelumnya.
00:18:30Dan sesuatu yang meminta Anda untuk memberikan konteks,
00:18:32baik itu tangkapan layar, basis kode, atau file Figma.
00:18:35Nah, satu-satunya konteks yang akan kita berikan
00:18:37adalah sistem desain yang sudah ada di sana.
00:18:39Serta sebuah perintah yang mengatakan,
00:18:41kita ingin dek slide yang membahas perbedaan
00:18:45antara desain Claude dan Google stitch.
00:18:48Dan saya memiliki Opus 4.7 di jendela lain dengan Claude code,
00:18:53membuat perintahnya.
00:18:54Jadi saya harus melakukan pencarian web.
00:18:55Oke, ini semacam perbedaan antara keduanya.
00:18:57Sekarang di akhir, saya menulis sebelum Anda membangun apa pun,
00:19:01tanyakan kepada saya pertanyaan apa pun yang Anda miliki.
00:19:02Jadi kita berada di halaman yang sama.
00:19:05Jadi dalam arti tertentu, kita hampir seperti memaksanya untuk melakukan
00:19:07semacam mode rencana.
00:19:08Dan Anda lihat ini muncul di sini.
00:19:10Sekali lagi, Anda bisa membuat mode rencana paksa ini
00:19:12benar-benar terjadi saat Anda membuat aplikasi web juga.
00:19:14Pastikan saja Anda memasukkannya ke dalam perintah awal.
00:19:16Jadi untuk siapa dek ini?
00:19:18Katakanlah ini untuk pembicaraan publik.
00:19:20Kami akan katakan, kami akan membuatnya singkat dan manis.
00:19:24Tetapkan pada enam, kita akan lakukan lima menit.
00:19:28Kita akan lakukan lima slide.
00:19:30Kita akan buat sedikit opini, gaya judul, potongan tengah.
00:19:34Kita akan katakan hanya peta pemosisian dua kali dua.
00:19:37Harga panggilan, ya.
00:19:39Dan kemudian kita akan melalui sisanya.
00:19:43Tidak ada catatan.
00:19:44Jadi secara keseluruhan, ia menanyakan satu, dua, tiga, empat, lima,
00:19:47enam, tujuh, delapan, sembilan, 10, 11, 12, 13, 14, 14 pertanyaan.
00:19:52Ditambah, Anda tahu, sedikit tangkapan di sini,
00:19:56yang sangat saya sukai.
00:19:58Saya membuatnya jadi layar penuh dan sebagai referensi,
00:20:00saya rasa paling banyak, Anda tahu, beberapa,
00:20:03seperti dua iterasi dari empat pertanyaan masing-masing.
00:20:05Jadi ini bagus.
00:20:06Dan ini tampilan dek slidenya.
00:20:07Saya meletakkannya dalam layar penuh dan sebagai referensi,
00:20:10ini memakan 5% dari penggunaan kita.
00:20:12Jadi sekitar 1% per slide.
00:20:15Jadi kita punya halaman judul, catatan kaki kecil tentang dek
00:20:19yang dihasilkan oleh desain Claude.
00:20:22Kita punya angka-angkanya, Anda tahu, di mana mereka mendarat.
00:20:26Yah, punya semacam grafik yang menunjukkan di mana mereka mendarat
00:20:30dalam hal biaya.
00:20:31Jelas, desain Claude jauh lebih mahal.
00:20:34Laporan lapangan.
00:20:37Dan kemudian memberi kita semacam,
00:20:38hei, ini grafik kecil yang menunjukkan
00:20:40apa yang harus Anda gunakan untuk kasus penggunaan apa.
00:20:43Jadi menurut saya dek slidenya terlihat cukup keren,
00:20:45sejujurnya.
00:20:46Tetapi yang lebih penting dari itu,
00:20:48itu tetap menggunakan sistem desain.
00:20:49Sistem operasi agen yang seluruh sistem desainnya dibangun
00:20:53benar-benar tercermin dalam dek tersebut.
00:20:55Kedua hal ini terlihat seperti berasal dari tempat yang sama.
00:20:59Dan sama seperti dengan aplikasi web,
00:21:00kita bisa melalui alur kerja yang sama.
00:21:03Ini adalah versi asli yang diberikannya kepada kita.
00:21:05Sekarang kita bisa meminta varian makro dan berkata,
00:21:07oke, apakah kita benar-benar ingin tetap dengan, Anda tahu,
00:21:09sistem desain kita?
00:21:11Atau apakah kita ingin pergi ke arah yang sama sekali berbeda?
00:21:13Oke, kita lihat, Anda tahu, dua, tiga, empat varian berbeda.
00:21:16Baiklah, mari kita fokus pada satu.
00:21:17Dan sekarang mari kita masukkan penyesuaiannya
00:21:19dan benar-benar menyempurnakan hal ini.
00:21:20Dan begitulah cara saya pikir
00:21:22Anda harus mendekati dek slide.
00:21:23Sama seperti kita mendekati aplikasi web.
00:21:24Sekarang sebagai referensi, ini adalah dek slide
00:21:27bisa dibilang begitu.
00:21:29Saya memberinya perintah yang persis sama
00:21:31dan saya membuat ini dari direktori yang sama,
00:21:34sistem operasi agen secara langsung.
00:21:36Jadi ia memiliki akses penuh ke sistem desain yang sama,
00:21:38bisa dibilang.
00:21:39Selain itu, saya juga memintanya untuk menanyakan pertanyaan kepada saya.
00:21:42Ia hanya menanyakan tujuh kepada saya.
00:21:43Dan pertanyaannya, sejujurnya, tidak sebagus itu.
00:21:46Itu sedikit lebih dangkal
00:21:47dalam hal, yah, jumlah slide.
00:21:49Dan rasio aspek apa yang Anda inginkan
00:21:51dibandingkan dengan apa yang kita lihat dalam desain.
00:21:52Dan saya pikir itu tercermin dalam keseluruhan,
00:21:55hasil yang jauh lebih hambar.
00:21:57Dan saya agak terkejut itu tidak lebih dekat
00:22:00dalam hal gaya visual dibandingkan dengan apa yang diberikan desain kepada kita.
00:22:02Maksud saya, itu tidak buruk.
00:22:05Maksud saya, warnanya dekat, teksnya dekat,
00:22:07tapi maksud saya, mari kita serius.
00:22:10Hal ini semacam mengalahkan semuanya
00:22:12jika kita ingin jujur.
00:22:13Terakhir, mari kita bicara tentang desain aplikasi seluler.
00:22:15Dan Anda punya dua opsi di sini.
00:22:17Satu, Anda langsung ke seluler.
00:22:19Anda tidak melakukan hal-hal aplikasi web apa pun.
00:22:21Dan itu cukup sederhana.
00:22:22Anda hanya akan melakukan apa yang kita lakukan dengan bagian aplikasi web
00:22:25di awal video ini.
00:22:26Dan Anda hanya akan berkata di awal,
00:22:28ini untuk aplikasi seluler.
00:22:29Pastikan visualnya mencerminkan hal itu.
00:22:32Tetapi jika Anda mengambil aplikasi web
00:22:33dan Anda kemudian ingin menerjemahkannya ke platform seluler,
00:22:35itu cukup sederhana.
00:22:36Meskipun kita bisa tetap di jendela perintah ini di tempat kita berada,
00:22:40faktanya, oke, sekarang tunjukkan kepada saya dalam seluler.
00:22:42Mungkin lebih masuk akal untuk memiliki proyek terpisah
00:22:45dengan hal yang persis sama sedang terjadi.
00:22:46Tapi sekarang kita punya garis pemisah yang jelas
00:22:48antara aplikasi web yang sedang kita kerjakan versus seluler.
00:22:51Dan jadi untuk melakukannya, Anda hanya akan datang ke kanan atas
00:22:53di mana tertulis bagikan.
00:22:54Dan kemudian Anda akan menekan duplikat proyek.
00:22:57Setelah Anda melakukannya, itu akan membawa Anda ke halaman seperti ini.
00:23:00Tetapi jika Anda kembali ke beranda,
00:23:02kita sekarang bisa melihat bahwa ada remix demo CD.
00:23:05Dan remix itu adalah proyek yang diduplikasi.
00:23:08Dan jadi sekarang saya hanya akan memerintahnya dan berkata,
00:23:10bisakah Anda menunjukkan kepada saya desain yang sama dalam format seluler?
00:23:13Dan ini adalah versi seluler yang diberikannya kepada kita.
00:23:15Ia pergi dan membuat varian dari ketiganya.
00:23:18Saya tidak menentukan itu, tapi ia melakukannya.
00:23:19Jadi ia memberi kita sembilan tiruan
00:23:21dan total biayanya adalah 5% dari penggunaan.
00:23:25Jadi alur yang sama seperti biasanya.
00:23:27Ia memberi kita makro di sini.
00:23:29Jadi kita akan memilih yang kita sukai,
00:23:30jelas akan menjadi yang mana pun yang Anda putuskan untuk aplikasi web Anda.
00:23:32Dan kemudian dari sana, kita akan berkata,
00:23:34hei, saya suka yang editorial.
00:23:36Sekarang munculkan banyak penyesuaian agar saya bisa benar-benar melakukannya.
00:23:38Tetapi sejujurnya,
00:23:39jika Anda sudah menyiapkan semuanya pada versi aplikasi web,
00:23:42kemungkinannya Anda sudah melakukan penyesuaiannya.
00:23:44Jadi seharusnya tidak ada terlalu banyak
00:23:47yang perlu Anda ubah pada titik ini.
00:23:48Tapi selalu ada sedikit,
00:23:51Anda selalu menghadapi masalah ketika Anda beralih dari aplikasi web standar
00:23:53ke desain seluler.
00:23:55Tapi seperti yang Anda lihat di sini, sangat mudah dilakukan,
00:23:57hanya satu perintah.
00:23:58Jadi di situlah saya akan meninggalkan kalian untuk hari ini.
00:23:59Saya harap saya bisa menghilangkan perbedaan
00:24:02Saya bisa mencoba banyak sekali versi berbeda
00:24:04dari apa pun yang ingin saya buat,
00:24:06agar akhirnya saya bisa mendapatkan hasil yang saya sukai.
00:24:09yaitu penyesuaian dan varian tersebut.
00:24:11Dan yang benar-benar didapat adalah kecepatan iterasi.
00:24:15Saya bisa melalui banyak versi berbeda
00:24:17dari apa pun yang saya coba buat
00:24:19sehingga saya akhirnya bisa mendapatkan sesuatu yang saya sukai.
00:24:21Dan begitu saya melakukannya,
00:24:22maka saya menariknya ke dalam ekosistem Claude Code.
00:24:25Dan saya harap saya bisa membuat biaya penggunaan
00:24:27sedikit lebih jelas dengan menyebutkan persentase yang kita hilangkan
00:24:31setelah setiap iterasi dan kreasi.
00:24:33Jadi seperti biasa, beri tahu saya pendapat Anda.
00:24:35Sampai jumpa.
00:24:38karena menurut saya ini adalah alat yang sangat keren.
00:24:40Pastikan untuk memeriksa Chase AI+
00:24:42jika Anda ingin mendapatkan Masterclass Claude Code,
00:24:45dan sampai jumpa.