00:00:00Saya akan memberikan sebuah eksperimen yang sangat keren kepada Anda dan ratusan desainer lainnya.
00:00:06Saya ingin melihat sejauh mana kita bisa membawa desain AI, dan kali ini khusus menggunakan Claude Code,
00:00:13untuk membuat hero section berdasarkan ide bisnis fiktif yang sama.
00:00:19Saat ini sedang berlangsung tantangan desain UI 30 hari di designcourse.com.
00:00:24Ini 100% gratis.
00:00:25Kami sudah mengadakan satu tantangan dengan lebih dari 200 pengiriman karya, dan ini adalah
00:00:30tantangan kedua.
00:00:31Saya akan menunjukkan cara menggunakan Claude Code dan melengkapinya dengan keahlian desain khusus
00:00:37untuk menghasilkan beberapa desain yang sangat bagus.
00:00:40Tujuan dari tantangan ini adalah saya akan memberikan ide bisnis fiktif yang sama kepada Anda semua,
00:00:44tapi kita akan melihat seberapa baik kemampuan prompting Anda untuk membuat UI terbaik
00:00:50yang mungkin untuk tugas ini.
00:00:52Sebentar lagi, saya akan menunjukkan cara tepat untuk berpartisipasi dalam tantangan hari ini.
00:00:56Kapan pun Anda menonton ini, bahkan mungkin berbulan-bulan setelahnya,
00:00:58Anda selalu bisa berpartisipasi untuk melihat apa yang sedang dikerjakan orang lain.
00:01:01Tapi pertama-tama, saya akan menunjukkan cara menyiapkan semua yang Anda butuhkan.
00:01:04Jadi, pertama-tama Anda tentu butuh Claude Code, ya.
00:01:07Ini adalah halaman untuk pengaturannya.
00:01:10Ada berbagai lingkungan yang berbeda.
00:01:11Saya tidak akan membahas semuanya, jadi saya akan menautkan halaman pengaturannya saja.
00:01:15Anda bisa mencari tahu cara menginstalnya jika belum melakukannya.
00:01:17Setelah siap, Anda cukup mengetik “Claude” dan programnya akan memuat di sini.
00:01:22Oke.
00:01:23Sekarang langkah selanjutnya adalah memastikan Anda melengkapinya dengan keahlian khusus.
00:01:24Sebuah “skill” sebenarnya hanyalah sekumpulan instruksi yang dimasukkan ke dalam konteks AI.
00:01:26Dan ada banyak sekali jenis skill.
00:01:30Sebelum saya tunjukkan skill-nya, begini cara menginstal skill di sistem Anda.
00:01:31Anda harus menemukan di mana folder Claude Code berada berdasarkan OS dan lingkungan
00:01:32yang Anda gunakan.
00:01:37Lalu Anda cukup mengambil file markdown ini, yang merupakan sebuah skill, dan letakkan
00:01:43ke dalam folder tersebut.
00:01:44Skill khusus yang saya maksud ini bernama Front End Design, di sini.
00:01:49Saya akan menautkannya di deskripsi agar Anda bisa mengaksesnya.
00:01:50Yang perlu Anda lakukan adalah mengeklik Skills, Front End Skills, Skill.md, lalu di sini,
00:01:55Download Raw File, oke?
00:01:58Setelah Anda memiliki file skill tersebut, ambil dan cari folder Claude Code Anda
00:02:03di URL yang baru saja saya tunjukkan.
00:02:06Folder saya di Windows 11 berada di C:\Users\Gary\.claude.
00:02:12Di dalam sini, Anda mungkin belum memiliki folder “skills”.
00:02:14Jika belum ada, buatlah.
00:02:21Saya sudah memilikinya.
00:02:24Klik dua kali, lalu buat saja folder bernama “Designer”.
00:02:25Dan di dalamnya, di situlah Anda menempelkan file skill tersebut, Skill.md.
00:02:26Jika Claude sedang berjalan, pastikan Anda menutupnya dulu dengan menekan Control C
00:02:31beberapa kali.
00:02:35Ketik “Claude” lagi, lalu ketik /skills untuk melihat daftar semua skill yang tersedia.
00:02:39Saat ini saya baru punya tiga.
00:02:41Kita lihat di sini, ada Front End Design.
00:02:47Dan cara mengakses yang satu ini adalah dengan mengetik /frontend-design.
00:02:48Lalu tempelkan prompt Anda.
00:02:51Sekarang izinkan saya menunjukkan cara kerjanya.
00:02:56Jika saya memasukkan /frontenddesigner, Desain hero section halaman arahan untuk layanan
00:02:58verifikasi identitas AI.
00:03:00Harus memiliki latar belakang krem muda dengan dua kolom, headline yang kuat, dan teks
00:03:06di sebelah kiri dengan tombol ajakan bertindak.
00:03:07Dan di sebelah kanan harus ada animasi UI fiktif namun sederhana yang menunjukkan
00:03:11ide tentang verifikasi identitas, maaf.
00:03:13Letakkan ini dalam file HTML dengan CSS dan sertakan variabel.
00:03:16Itulah seluruh prompt saya, dan inilah hasilnya.
00:03:20Saya tidak tahu bagaimana menurut Anda, tapi ini sebenarnya sangat solid, dan ini dihasilkan dalam sekali coba.
00:03:23Dan Anda sudah melihat prompt-nya.
00:03:28Sangat singkat.
00:03:33Jadi saya akan menunjukkan tantangannya dan ide bisnis dari prompt yang saya ingin
00:03:35Anda gunakan untuk bisnis fiktif ini, dan saya ingin melihat apa yang bisa Anda buat.
00:03:36Idenya adalah untuk menambahkannya dengan preferensi desain Anda sendiri sehingga Anda bisa menciptakan sesuatu yang
00:03:41unik dan bahkan beranimasi jika Anda mau.
00:03:46Langkah pertama adalah buka [designcourse.com/foundations](https://www.google.com/search?q=https://designcourse.com/foundations) challenge.
00:03:51Tautannya ada di bawah sini.
00:03:53Saat Anda membukanya, Anda akan melihat halaman ini, sudah ada 613 siswa dan 197 karya
00:03:58untuk tantangan pertama yang sudah kita adakan.
00:04:00Ini untuk tantangan kedua.
00:04:06Yang harus Anda lakukan adalah klik di sini, dan Anda akan melihat, dapatkan template Figma UI/UX 2026.
00:04:08Dan di dalamnya ada tantangan nomor dua, dan itulah yang saya ingin Anda gunakan.
00:04:09Seperti inilah tampilannya.
00:04:16Ini adalah tantangan nomor dua, dan ini instruksinya.
00:04:20Ini adalah bagian dari prompt yang saya ingin Anda sertakan.
00:04:23Ini adalah ide bisnis fiktifnya.
00:04:27Saya tidak ingin Anda menggunakan ide lain.
00:04:29Saya ingin kita semua menggunakan ide yang sama, yaitu bisnis inspeksi rumah berbasis AI.
00:04:31Layanan ini menggunakan visi komputer untuk menganalisis gambar ruang bawah tanah, atap, pondasi untuk cacat umum
00:04:32dan secara otomatis menghasilkan laporan inspeksi standar.
00:04:37Tujuan kita adalah menginstruksikan AI dengan prompt awal ini untuk menciptakan
00:04:42hero section yang luar biasa dengan skill desainer Claude Code kita.
00:04:45Dan di sebelah sini adalah instruksinya.
00:04:50Gunakan Claude Code untuk membuat hero section bagi ide bisnis fiktif yang ditampilkan
00:04:56di sebelah kanan bingkai ini.
00:04:58Jadi pastikan Anda menempelkan itu sebagai bagian dari prompt Anda.
00:05:03Sertakan ide bisnisnya, tapi sertakan juga preferensi desain dan gaya Anda sendiri.
00:05:05Begitulah cara saya mengarahkannya untuk membuat kartu animasi kecil yang
00:05:08baru saja kita lihat.
00:05:13Anda bisa menggunakan prompt sebanyak yang Anda mau untuk menyempurnakan hasil akhirnya.
00:05:17Anda bisa mengintegrasikan animasi jika diinginkan.
00:05:18Saat Anda mengirimkan karya, pertama sertakan jumlah prompt yang dibutuhkan untuk mencapai hasil akhir,
00:05:22karena saya ingin Anda menyempurnakan hasilnya jika Anda mau.
00:05:24Sertakan juga prompt itu sendiri di bagian komentar di mana Anda bisa meninggalkan komentar.
00:05:29Anda juga bisa menggunakan plugin Claude Code ke Figma untuk membagikan prototipe Figma dari desain tersebut
00:05:32dalam kiriman Anda, tapi itu tidak wajib.
00:05:36Tangkapan layar saja sudah cukup.
00:05:42Jadi plugin Claude Code ke Figma memungkinkan Anda mengambil hasil akhir UI Anda dan
00:05:44mengirimkannya ke Figma.
00:05:47Saya tidak akan menunjukkan caranya di sini karena saya baru saja mengunggah video kemarin
00:05:53yang menunjukkan cara melakukannya.
00:05:54Sekali lagi, Anda tidak harus melakukan itu.
00:05:58Tangkapan layar saja sudah cukup untuk pengiriman karya Anda.
00:06:00Lalu untuk cara mengirimkan entri Anda, di sini ditunjukkan caranya.
00:06:01Katakanlah misalnya, jika Anda memutuskan untuk membagikan dokumen Figma dari apa yang Anda kerjakan,
00:06:04yang akan memungkinkan saya melakukan revisi jika saya akhirnya meninjau milik Anda, maka Anda tinggal tekan
00:06:09bagikan di sebelah sini.
00:06:14Klik salin tautan prototipe, pastikan siapa pun bisa melihatnya, lalu kirimkan itu bersama
00:06:18dengan kiriman karya Anda.
00:06:20Ini akan menjadi tantangan yang sangat keren karena kita akan melihat, apakah hasilnya
00:06:25akan sangat mirip?
00:06:26Hasilnya akan mirip jika Anda tidak memberikan banyak arahan, minat kreatif Anda sendiri
00:06:30dalam penataan gaya, dan bagaimana Anda menuangkan ide kreatif Anda.
00:06:32Dan jika Anda melakukannya, saya rasa kita akan melihat banyak variasi dan konsep menarik
00:06:37yang dihasilkan.
00:06:40Jadi sekali lagi, tentukan skema warna yang Anda inginkan, tentukan jenis ilustrasi
00:06:47atau animasi menarik yang Anda inginkan.
00:06:48Tujuannya adalah mencoba memaksimalkan apa yang bisa dihasilkan oleh AI.
00:06:53Baiklah, saya harap semua orang mengikuti tantangan ini.
00:06:55Ini adalah tantangan yang sangat keren.
00:06:58Baiklah, saya harap semua orang mengikuti tantangan ini.
00:07:01Ini adalah tantangan yang sangat keren.