00:00:00Claude Code sangat buruk dalam desain front-end dan itu salahmu,
00:00:04tapi ini adalah masalah yang bisa kita selesaikan dengan panduan sederhana.
00:00:07Kamu hanya perlu tahu ke mana arah tujuanmu.
00:00:09Dan di video ini,
00:00:10saya akan menguraikan tujuh level desain front-end
00:00:13pada Claude Code dan menjelaskan apa yang bisa kamu harapkan di setiap
00:00:16levelnya, jebakan yang harus dihindari,
00:00:18serta apa yang perlu kamu lakukan untuk naik ke level berikutnya.
00:00:21Dan pada akhirnya,
00:00:22kamu akan memiliki proses sederhana yang bisa diulang untuk membuat
00:00:25desain front-end dengan Claude Code yang tidak sekadar
00:00:28templat umum yang membosankan.
00:00:30Studi kasus kita untuk video hari ini adalah
00:00:33aplikasi web SaaS buatan bernama Argus.
00:00:36Argus akan menjadi aplikasi kecerdasan media sosial.
00:00:41Jadi intinya, tempat di mana pembuat konten atau siapa pun,
00:00:43bisa mencari topik yang sedang tren di bidang mereka.
00:00:48Melalui Argus inilah,
00:00:49kita akan melewati seluruh proses tujuh level tersebut.
00:00:52Mari kita mulai dengan level satu.
00:00:53Sayangnya, banyak orang justru terjebak di sini.
00:00:55Ini hanya kamu dan sebuah perintah prompt.
00:00:57Kamu membuka Claude Code dan hanya
00:00:59mengatakan sesuatu seperti, "Hei,
00:01:01ayo buat halaman arahan untuk Argus,"
00:01:02aplikasi web media sosial saya yang berfungsi sebagai aplikasi intelijen bagi
00:01:05pembuat konten untuk menemukan dan mengidentifikasi topik tren di
00:01:08bidang mereka. Nah,
00:01:09meskipun saya melakukan ini dan memasukkannya ke mode perencanaan,
00:01:12hasil yang akan kita dapatkan adalah sesuatu yang sangat umum.
00:01:15Kenapa? Karena kita benar-benar tidak memberikan arahan desain.
00:01:18Dan kita seolah mengandalkan Claude Code untuk mengisi celah
00:01:20tentang apa yang terlihat bagus.
00:01:22Kamu sering mendengar ini seperti "AI tidak punya selera", itu benar,
00:01:26tapi sebenarnya kebanyakan orang pun tidak punya selera.
00:01:28Dan karena masalah itulah,
00:01:31mereka tidak bisa menjelaskannya kepada Claude Code, kan?
00:01:33Jika kamu tidak tahu seperti apa hasil yang bagus,
00:01:35bagaimana Claude Code bisa mengetahuinya?
00:01:37Jadi di level paling dasar ini, kita perlu
00:01:39mulai menguasai beberapa keterampilan.
00:01:41Ketiga keterampilan itu adalah menulis prompt deskriptif,
00:01:43menentukan kerangka kerja (framework) dan memahami apa itu,
00:01:46serta mulai membangun kosa kata desain dasar.
00:01:46Sekarang, hanya dengan menggunakan mode rencana dalam proses ini,
00:01:50kamu akan mulai membangun beberapa keterampilan tersebut karena
00:01:53ia akan menanyakan hal seperti tumpukan teknologi (tech stack) apa yang
00:01:55ingin kamu gunakan untuk halaman arahan ini, kan?
00:01:57Next JS, HTML biasa, Astro.
00:01:58Mungkin kamu tidak tahu apa maksud dari semua itu,
00:02:00tetapi dengan hanya mengetik dan bertanya apa
00:02:02kerangka kerja ini, kan?
00:02:05Kamu akan mulai membangun tingkat kompetensi di
00:02:07bidang ini terkait framework dan hal semacamnya,
00:02:11kamu hanya perlu bertanya.
00:02:13Mode rencana juga akan memaksamu memikirkan keputusan
00:02:14desain dan tujuan sebenarnya dari situs webmu,
00:02:17karena tidak cukup hanya dengan mengatakan, "Hei,
00:02:19saya hanya ingin halaman arahan untuk Argus."
00:02:20Apa tujuannya, kan? Apa hasil
00:02:21sebenarnya yang ingin kamu capai?
00:02:23Dalam kasus ini,
00:02:25kita ingin pendaftaran daftar tunggu dan pameran produk.
00:02:26Dan kemudian ia akan secara eksplisit menanyakan
00:02:29pertanyaan tentang gaya. Nah, saat itu juga, kamu tahu,
00:02:32gaya visual yang akan diberikannya lagi-lagi
00:02:35agak umum, gelap dan teknis, bersih dan minimalis,
00:02:38kan?
00:02:41Seperti ini tidak cukup spesifik untuk mendapatkan hasil yang kita
00:02:42inginkan. Di sinilah semua orang berhenti.
00:02:45Dan inilah mengapa semuanya terlihat sangat biasa.
00:02:47Jadi bagi kita, kita akan memilih bersih dan minimalis,
00:02:49lalu kita buat bagian hero,
00:02:52fitur, dan panggilan aksi (CTA), lalu kirimkan.
00:02:53Sekarang kamu mungkin berpikir, jika ini semua sangat dasar,
00:02:55bagaimana saya bisa menulis prompt deskriptif dan
00:02:58membangun kosa kata desain dasar itu?
00:03:01Jujur saja,
00:03:03itu hanya akan memakan waktu dan pengalaman.
00:03:04Semakin sering kamu terpapar pada
00:03:06desain front-end kreatif yang terlihat bagus,
00:03:09semakin banyak hal yang akan kamu pahami.
00:03:12Dan kita akan membahasnya lebih lanjut di level-level mendatang.
00:03:13Mari kita lihat apa yang dibuatnya untuk kita dan wah, sampah AI.
00:03:16Ini mengerikan, kan? Ini benar-benar sangat umum.
00:03:20Kita bahkan mendapatkan gradasi ungu,
00:03:24yang entah kenapa sangat disukai AI. Jadi apa yang terjadi?
00:03:27Apa yang salah? Bahkan dengan mode rencana pun, ini hasilnya.
00:03:30Sebenarnya, seperti yang sudah kamu ketahui,
00:03:32Claude Code dan AI secara umum,
00:03:35bukanlah yang terbaik dalam desain front-end.
00:03:37Dan jika kamu memberinya prompt membosankan yang tidak
00:03:38deskriptif, inilah jenis output yang akan kamu dapatkan, kan?
00:03:42Namun hal ini jugalah yang sering kita lihat di mana-mana
00:03:44mungkin dengan sedikit perbedaan. Jadi apa yang bisa kita lakukan?
00:03:46Apa yang bisa kita lakukan untuk keluar dari level satu dan dari neraka
00:03:48desain? Namun sebelum itu,
00:03:51sepatah kata singkat dari sponsor favorit semua orang, yaitu saya.
00:03:52Saya baru saja merilis Masterclass Claude Code,
00:03:55belum lama ini.
00:03:58Dan ini adalah tempat nomor satu untuk belajar dari nol menjadi pengembang AI,
00:03:59terutama jika kamu tidak berasal dari latar belakang teknis.
00:04:02Saya memperbarui ini setiap minggu. Dan sejak dirilis,
00:04:04kami telah menambahkan lebih dari satu jam konten baru dan memperbarui
00:04:0720 lebih modul. Jadi jika kamu ingin mendapatkannya,
00:04:10kamu bisa menemukannya di Chase AI.
00:04:13Ditambah lagi ada tautan untuk itu di komentar yang disematkan,
00:04:14tetapi jika kamu benar-benar baru di dunia AI,
00:04:17mungkin itu terasa terlalu jauh.
00:04:18Pastikan untuk memeriksa komunitas gratis Chase AI.
00:04:19Ada tautannya di deskripsi.
00:04:22Nah, untuk lanjut ke level dua,
00:04:24kita perlu memberikan edukasi desain kepada Claude.
00:04:25Dan di sinilah kita mulai memasukkan keterampilan.
00:04:28Di sinilah kita mulai membawa prompt khusus dari luar
00:04:30yang memberi tahu Claude Code cara mendesain dengan lebih baik.
00:04:33Keterampilan yang kita andalkan seperti desain front-end
00:04:36dan keterampilan UI UX Pro Max akan sangat
00:04:39membantu pekerjaan berat kita.
00:04:41Mereka akan menyuntikkan Claude Code dengan prompt yang
00:04:42mengatakan, "Hei, jika kamu membuat halaman web di industri ini,"
00:04:45inilah hal-hal yang harus kamu perhatikan.
00:04:49Inilah daftar semua teknik desain sampah AI,
00:04:51hindari semua itu.
00:04:55Jadi intinya itu akan memperkuat perintah kita.
00:04:56Meskipun kita datang dengan sesuatu yang agak buruk dan
00:04:58inilah tampilan keterampilan UI UX Pro Max tersebut.
00:05:00Ini adalah repositori sumber terbuka di GitHub. Sudah mendapat 52.000 bintang.
00:05:03Kita bisa masuk ke dalam folder skills di sini dan melihat
00:05:07bagaimana semuanya diatur. Jika kita ingin menulis,
00:05:09semuanya hanyalah prompt teks dan banyak sekali prompt teks
00:05:12yang bertindak seperti daftar periksa bagi Claude Code agar,
00:05:15sekali lagi, ia keluar dari hal-hal umum ini.
00:05:17Jadi kita tidak terjebak dengan ini. Sekarang untuk menginstal
00:05:19keterampilan khusus ini dan semua keterampilan lain yang serupa.
00:05:21Sangat sederhana. Jika kita masuk ke GitHub,
00:05:23instruksinya sudah ada di sini.
00:05:26Kita hanya perlu melakukan garis miring plugin marketplace,
00:05:27tambahkan skill-nya lalu instal skill tersebut.
00:05:30Jadi kita tinggal menjalankan ini di terminal Claude Code kita.
00:05:32Dan jika itu sedikit membingungkan, pahamilah,
00:05:35kamu selalu bisa menyalin URL-nya,
00:05:37tempelkan ke Claude Code dan katakan, "Hei,
00:05:40saya ingin menginstal keterampilan ini."
00:05:41Mari kita uji keterampilan tersebut.
00:05:42Saya sudah memuat skill-nya dengan garis miring.
00:05:44Kamu juga bisa menggunakan bahasa alami dan mengatakan sesuatu seperti,
00:05:46"Hei Claude Code, gunakan keterampilan UI UX Pro Max."
00:05:47Dan kita akan katakan,
00:05:50"Saya ingin kamu membuat ulang halaman arahan menggunakan skill ini."
00:05:51Tanyakan apa pun yang kamu butuhkan."
00:05:54Sekarang, mirip dengan mode rencana standar Claude Code.
00:05:55Ia akan menanyakan beberapa hal tentang gayanya.
00:05:57Kita akan ikuti apa yang direkomendasikannya kali ini, oke?
00:05:59Memilih beberapa tipografi. Tentu. Kedengarannya bagus.
00:06:03Lalu warna CTA. Mari kita pilih oranye.
00:06:05Kita ingin menjauh dari warna ungu dengan segala cara.
00:06:07Claude Code selesai mendesain ulang. Mari kita lihat.
00:06:09Inilah halaman arahan menggunakan keterampilan UI UX Pro Max.
00:06:12Dan seketika, ini adalah peningkatan besar, kan?
00:06:15Kita sekarang punya latar belakang yang layak dan ada elemen kotak kecil ini.
00:06:18Tombol-tombolnya sendiri memiliki efek cahaya halus dan bahkan
00:06:21berubah warna saat kursor diarahkan ke sana.
00:06:22Kita punya grafis dan warnanya berubah dari satu bagian ke
00:06:25bagian lainnya. Jadi ini jauh lebih baik, meskipun masih,
00:06:27ia benar-benar menyukai warna ungu. Meskipun begitu,
00:06:30ini jelas buatan AI, kan?
00:06:33Ini bukan sesuatu yang saat kamu lihat akan membuatmu kagum dengan
00:06:36apa yang dibuat. Ini masih terlihat seperti templat AI.
00:06:38Terlihat seperti templat AI yang didesain,
00:06:40tapi tetap saja ini templat AI. Dan pada intinya,
00:06:43ini persis situs web yang sama dengan yang kamu lihat sebelumnya,
00:06:46hanya sedikit polesan di sana-sini.
00:06:48Jadi bagaimana kita bisa memperbaikinya?
00:06:49Bagaimana kita bisa naik dari level dua ke level tiga?
00:06:51Karena keterampilan ini memang hebat.
00:06:52Mereka membawa beberapa ide tentang teori warna, tipografi,
00:06:55jarak, dan desain tata letak umum, tapi pada intinya,
00:06:56ini masih terasa umum.
00:06:59Dan kenyataannya terkait keterampilan yang harus dikuasai,
00:07:02yang paling besar adalah seperti,
00:07:04bagaimana kita mengevaluasi output ini dengan mata desainer lalu
00:07:07mengubah kritik tersebut menjadi prompt?
00:07:08Ini masih masalah pemberian instruksi (prompting), tetapi masalahnya,
00:07:11dan di sinilah kita masuk ke dalam jebakannya,
00:07:13ada batasan sejauh mana deskripsi kita bisa dibuat,
00:07:16terutama saat kita baru memulai, kan?
00:07:18Kita kekurangan pengetahuan untuk benar-benar menjelaskan masalahnya,
00:07:21kan?
00:07:23Saya mencoba menjelaskan media visual dan masalah visual
00:07:27dengan teks. Secara inheren, ada sesuatu yang hilang di sana.
00:07:27Jadi apa yang sebenarnya bisa kita lakukan? Nah,
00:07:31kita perlu mulai menunjukkan pada Claude Code. Masalahnya adalah,
00:07:34kita harus mulai memperlihatkan kepada Claude Code,
00:07:36contoh nyata dari apa yang ingin kita capai. Benar?
00:07:39Jadi untuk membuka level tiga, kan?
00:07:41Di situlah kita mulai beralih dari sekadar prompt teks dan
00:07:44mulai masuk ke dalam media visual, kan?
00:07:46Kita mulai menunjukkan, bukan sekadar memberi tahu.
00:07:49Dan level tiga adalah saat kamu menjadi sutradara visual.
00:07:52Kita mulai menunjukkannya, bukan sekadar memberi tahu.
00:07:54Jadi, level tiga adalah saat Anda menjadi sutradara visual.
00:07:56Di sinilah kita mulai memberikan kode kepada Claude,
00:07:58contoh nyata tentang apa yang ingin kita capai, kan?
00:08:01Dengan begitu kita tidak hanya mengandalkan teks dan keahlian.
00:08:03Kita sekarang akan menggunakan teks plus keahlian plus contoh visual.
00:08:07Nah, ini adalah terobosan besar karena dua alasan. Pertama,
00:08:09Claude code jelas akan mampu meniru gambar
00:08:12yang Anda tunjukkan dengan lebih baik daripada sekadar deskripsi kata-kata.
00:08:15Kedua, karena kita menggunakan gambar,
00:08:17itu berarti kita sedang melihat situs web lain dan kita
00:08:20sekarang bisa melihat lagi seperti apa hasil yang bagus,
00:08:23apa yang dilakukan oleh para profesional dan bagaimana kita bisa menirunya?
00:08:25Nah,
00:08:26ada beberapa tempat di mana Anda bisa menemukan inspirasi
00:08:28untuk desain front-end Anda dan saya akan menyebutkan empat di antaranya.
00:08:31Yang pertama adalah awwwards. Itu awwwards dengan tiga huruf W.
00:08:34Ini adalah tempat di mana orang-orang mengirimkan karya front-end mereka
00:08:37dan dinilai. Jadi, situs ini sangat kental dengan nuansa kreatif.
00:08:40Kedua adalah godly.website.
00:08:42Ini adalah situs web scrolling tanpa batas di mana Anda bisa,
00:08:45melihat berbagai desain. Nomor tiga adalah Pinterest,
00:08:48yang secara mengejutkan memiliki beberapa hal yang cukup keren.
00:08:49Di sini saya hanya mencari landing page SaaS.
00:08:52Ketika saya menemukan yang saya inginkan,
00:08:53saya juga bisa melihat banyak desain serupa lainnya.
00:08:56Dan terakhir, ada Dribbble. Itu Dribbble dengan tiga huruf B.
00:08:58Di sini, saya hanya memasukkan landing page SaaS. Dan lagi,
00:09:01saya melihat banyak hal berbeda yang terlihat cukup keren.
00:09:04Katakanlah saya memilih situs seperti OpenHands yang saya sukai.
00:09:07Saya suka bagian, Anda tahu,
00:09:09efek scrolling di bagian atas dengan alur kerja yang terbukti.
00:09:11Saya agak suka skema warnanya yang berbeda.
00:09:14Ada sesuatu yang tidak biasa sejak awal.
00:09:15Mereka memiliki bukti sosial dan secara umum,
00:09:19saya menyukai gayanya, kan? Misalnya. Jadi lagi,
00:09:22apa yang akan saya lakukan sangat, sangat sederhana.
00:09:23Saya hanya akan mengambil beberapa tangkapan layar dari halaman web ini,
00:09:26memasukkannya ke Claude code dan berkata, Hei, ini gaya visualnya.
00:09:29Saya ingin meniru ini. Jadi di dalam Claude code, saya katakan,
00:09:31sebenarnya saya ingin situs web kami cocok dengan gaya OpenHands.
00:09:34Saya berikan URL-nya. Lalu saya katakan,
00:09:36ini beberapa tangkapan layar sebagai referensi.
00:09:38Dan saya masukkan semua tangkapan layar ke sana.
00:09:40Jadi sekarang ia memiliki referensi visual nyata untuk diikuti.
00:09:43Akan sulit bagi saya, setidaknya, untuk menjelaskan
00:09:45dengan kata-kata apa yang saya cari di sini,
00:09:47bahkan dengan bantuan instruksi ahli UI/UX sekalipun.
00:09:51Dan melalui proses inilah,
00:09:52kita akan mulai mengkurasi referensi visual yang sangat bagus.
00:09:55Ada begitu banyak di luar sana.
00:09:57Dan begitu Anda mulai melihatnya lebih sering,
00:10:00hal-hal lama akan terasa sangat membosankan. Rasanya seperti,
00:10:03mengapa saya melakukan itu jika ada banyak hal keren yang tersedia?
00:10:05Dan saat Anda melihat lebih banyak referensi itu,
00:10:07meskipun kita hanya memberikan tangkapan layar ke Claude code,
00:10:09ini akan membantu Anda mengomunikasikan apa yang Anda inginkan secara spesifik,
00:10:12karena,
00:10:12Anda akan melihat pola yang sama berulang kali
00:10:14saat Anda melihat semua referensi ini.
00:10:16Dan apa yang juga ingin Anda mulai lakukan adalah
00:10:18menggabungkan referensi dari beberapa situs, kan?
00:10:21Meskipun kita menggunakan OpenHands di sini,
00:10:23mungkin ada beberapa hal keren yang saya temukan di Pinterest atau
00:10:26godly.website seperti, biar saya ambil bagian ini dari sini.
00:10:28Dan biar saya ambil bagian itu dari sana, kan?
00:10:29Saya ingin mengambil yang terbaik dari semua situs ini dan
00:10:32menggabungkannya. Namun,
00:10:33sangat mudah untuk terjebak dalam jebakan tertentu di level ini.
00:10:36Dan saya rasa kebanyakan orang berhenti di level
00:10:39tiga, di mana mereka mengerti, ya, saya harus menggunakan instruksi khusus.
00:10:41Claude code memang kurang bagus di awal,
00:10:42tapi dengan keahlian dan tangkapan layar, saya bisa melangkah cukup jauh.
00:10:45Kenyataannya adalah ada batas di sini karena kita akan,
00:10:49kita akan merasa agak tertahan oleh celah nuansa desain.
00:10:50Seperti yang akan Anda lihat pada hasilnya nanti.
00:10:52Hasilnya akan terasa, Anda tahu, agak mirip, kan?
00:10:55Tapi tidak akan sempurna karena sekali lagi,
00:10:57masih ada efek penurunan kualitas
00:11:01saat saya memberi tahu Claude code, yang mana benar.
00:11:03Ia melakukan segalanya dalam kode, menunjukkannya gambar visual dan
00:11:05berkata, Hei, terjemahkan visual ini ke dalam kode.
00:11:08Dan itulah masalah dengan banyak desain front-end.
00:11:10Ini adalah media visual,
00:11:12namun saya mencoba mengetiknya dalam bentuk teks di saat yang sama,
00:11:15jika saya memberikan tangkapan layar visual,
00:11:17masih ada bagian penerjemahan di sana.
00:11:18Bagaimana cara ia melakukannya dengan benar? Nah,
00:11:20kenyataannya adalah ia memiliki batasan dan kita bisa melihat
00:11:22batasan itu beraksi di sini,
00:11:24karena inilah yang ia buat dengan semua tangkapan layar tadi.
00:11:28Ini yang asli, dan ini milik kita.
00:11:31Dan seperti yang saya katakan sebelumnya,
00:11:32di sinilah orang-orang merasa buntu.
00:11:33Karena jika kita melihat ini, yah, Anda tahu,
00:11:36jika Anda memperhatikannya sekilas,
00:11:37Anda bisa melihat apa tujuannya.
00:11:39Dan mungkin hasilnya baru 50% mendekati.
00:11:41Dan ada beberapa hal yang kita sukai,
00:11:43tapi apa yang dilakukan orang sekarang adalah mereka akan pergi ke sini,
00:11:46mengambil tangkapan layar lain dari bagian utama. Oke.
00:11:49Mari kita perbaiki bagian utamanya berulang-ulang,
00:11:51banyak memberikan perintah, baiklah, kembali ke tangkapan layar, lalu kembali lagi.
00:11:53Dan itu memakan waktu lama dan Anda tidak pernah benar-benar berhasil. Kan?
00:11:56Benar?
00:11:57Karena masalah penerjemahan dari tangkapan layar ke kode.
00:11:59ke kode.
00:11:59Jadi untuk keluar dari level tiga dan mulai pindah ke
00:12:02level empat,
00:12:03kita tidak hanya perlu melihat permukaan situs web ini saja,
00:12:06kita menyukainya dan mengambil inspirasi darinya.
00:12:08Kita perlu belajar cara mengkloningnya dengan benar dan
00:12:11mendapatkan kode dasar yang menggerakkan sesuatu
00:12:15seperti OpenHands. Dan ini lebih dari sekadar,
00:12:18oh, kita hanya ingin mengkloningnya dan kita hanya menirunya. Tidak.
00:12:20Proses mengkloning dan kemudian mencari tahu cara
00:12:23menyalin hal-hal ini memberikan manfaat besar bagi kita,
00:12:26bukan hanya karena bagian pembuatan template-nya, yang memang bagus,
00:12:30tetapi Anda akan terpapar pada kode yang sebenarnya
00:12:34yang ada di balik layar dan mulai berpindah dari
00:12:36level tiga ke level empat.
00:12:38Kita sekarang harus melampaui sekadar melihat tampilan luar situs web
00:12:41untuk inspirasi melalui tangkapan layar.
00:12:44Kita sekarang perlu belajar bagaimana menyelami lebih dalam,
00:12:48melihat ke balik layar dan melihat bagaimana situs web tersebut dibangun
00:12:51dalam hal komponen pengkodean yang sebenarnya, HTML mereka,
00:12:54CSS mereka, dan JavaScript mereka.
00:12:56Dan level empat adalah sang pengkloning.
00:12:59Di sinilah kita belajar dengan "mencuri" dari para profesional.
00:13:02Izinkan saya memperjelasnya.
00:13:04Level ini bukan tentang, oh,
00:13:05kita akan menjiplak situs web orang lain dan mengakuinya
00:13:08sebagai milik kita. Bukan itu masalahnya di sini.
00:13:10Yang sebenarnya adalah kita akan menemukan situs web yang kita sukai
00:13:13dan kita akan membedahnya lalu menggunakannya sebagai
00:13:16template yang kita bangun di atasnya. Dan dalam proses melakukannya,
00:13:20kita akan belajar banyak, sama seperti keahlian apa pun di bidang apa pun.
00:13:24Bagaimana cara Anda menjadi lebih mahir? Anda lihat apa yang dilakukan para ahli.
00:13:27Anda mencoba meniru mereka.
00:13:28Anda belajar banyak dengan mencoba menyamai mereka.
00:13:30Dan seiring berjalannya waktu, Anda memberikan ciri khas Anda sendiri dan membuat
00:13:33sesuatu yang orisinal. Itulah inti dari level ini.
00:13:35Dan untuk benar-benar mendapatkan hasil maksimal dari ini,
00:13:37kita perlu mulai memahami apa yang terjadi pada
00:13:39desain front-end. Desain front-end untuk membuatnya
00:13:42lebih sederhana, memiliki tiga bagian. Pertama ada HTML.
00:13:45Anggaplah itu sebagai kerangka dari situs web, kan?
00:13:47Bagaimana ia terstruktur. Lalu ada CSS.
00:13:50Itu adalah gaya atau tampilan dari situs web.
00:13:52Anggap saja itu sebagai pakaian pada situs web.
00:13:55Dan kemudian kita memiliki JavaScript.
00:13:56Anggaplah JavaScript sebagai ototnya, oke?
00:13:59Itulah yang memungkinkan sesuatu terjadi saat Anda mengeklik
00:14:01tombol atau melakukan tindakan lainnya.
00:14:02Dan dengan melihat ketiga bagian dari sebuah situs web inilah kita
00:14:05akan mampu mengkloning atau membuat template situs dengan lebih baik,
00:14:08sekaligus memahami cara kerjanya, kan?
00:14:10Ide utuhnya adalah membedah situs web dan belajar bagaimana
00:14:13mereka melakukan berbagai hal. Jadi, bagaimana kita melakukannya?
00:14:15Bagaimana kita bisa membedah, misalnya, OpenHands,
00:14:17jelas tangkapan layar tidak berhasil karena hasilnya tidak sama.
00:14:21Yah, caranya relatif sederhana. Jadi untuk mengambil HTML,
00:14:25kita cukup buka situs webnya lalu tekan Ctrl + U.
00:14:28Apa yang Anda lihat di sini adalah keseluruhan HTML.
00:14:33Jadi apa yang akan kita lakukan adalah kita akan menyalin ini,
00:14:37ya, kita akan menyalin semuanya.
00:14:39Lalu kita akan menempelkannya ke dalam Claude code.
00:14:42Biasanya ini akan cukup besar. Dalam kasus ini,
00:14:44ada 1.152 baris HTML. Nah, di bagian
00:14:48paling bawah dari ini,
00:14:50Anda bisa melihat bahwa ada juga tautan ke berkas CSS
00:14:54serta JavaScript.
00:14:56Dan itulah yang saya soroti di bawah sini.
00:14:58Nah, ini akan ada di bagian bawah hampir semua
00:15:01berkas HTML ini dan saya akan memperkecil tampilannya.
00:15:04Agak sulit untuk dilihat, tapi di bagian bawah,
00:15:06kita punya JavaScript serta CSS.
00:15:09Jadi ini adalah berkas-berkas asli yang juga berisi banyak sekali kode.
00:15:13Jadi apa yang akan kita lakukan adalah setelah kita memberikan HTML-nya,
00:15:17kita juga akan memberi tahu Claude code, Hei,
00:15:19lihat berkas JavaScript dan lihat berkas CSS-nya untuk
00:15:22benar-benar memahami apa yang terjadi. Jadi saya menulis,
00:15:24lihat berkas CSS dan JS juga. Sekarang Anda bisa berhenti di sini.
00:15:29Dan ia akan menggunakan web fetch sendiri untuk melihatnya.
00:15:31Masalahnya adalah cara kerja web fetch di Claude code.
00:15:35Ia memanggil model yang lebih kecil untuk melakukannya, kan?
00:15:39Jadi instansi Claude code ini tidak benar-benar pergi ke halaman web tersebut.
00:15:42Ia menggunakan model yang lebih kecil. Model kecil itu melihatnya, merangkumnya, dan memberikannya
00:15:46kembali ke Claude code.
00:15:47Masalahnya adalah berkas CSS dan JS itu cukup besar dan berisi
00:15:51cara-cara yang sangat spesifik bagaimana situs web ini disusun.
00:15:54Jadi kita menginginkan semuanya, kan? Saya tidak mau ringkasan dari berkas-berkas ini.
00:15:58Jadi apa yang saya lakukan adalah saya telah membuat keahlian yang memungkinkan Claude code melakukannya
00:16:03dengan lebih baik. Ini pada dasarnya adalah instruksi yang ditingkatkan.
00:16:04Jadi ia mengambil sebanyak mungkin CSS dan JavaScript yang dibutuhkannya.
00:16:07Jadi saya hanya perlu mengatakan gunakan keahlian site tear down.
00:16:12Saya akan menaruh keahlian site tear down ini di dalam komunitas sekolah gratis dan
00:16:16tautannya ada di deskripsi.
00:16:18Jadi Anda hanya perlu memuatnya dan Anda juga akan bisa melakukan ini.
00:16:21Dan secara total, apa yang saya katakan? Saya katakan, ini HTML untuk OpenHands.
00:16:25Lihat juga file CSS dan JS-nya.
00:16:28Gunakan skill site tear down dan manfaatkan info ini untuk mengkloning situs asli open hands dengan lebih baik.
00:16:31Nah, bagaimana ini akan mengedukasi kita? Pertama-tama,
00:16:36Anda mungkin tidak tahu bagaimana saya bisa membuat latar belakang seperti ini, kan?
00:16:39Benar?
00:16:40Anda mungkin tidak terlalu paham atau bahkan tidak tahu kosakata apa yang
00:16:43seharusnya digunakan agar hasilnya bisa meniru ini dengan lebih baik, kan?
00:16:46Saat kita hanya memberinya tangkapan layar, kita mendapatkan hasil yang, yah,
00:16:50agak mirip tapi tidak persis,
00:16:52tapi dengan membiarkan Claude Code melihat apa yang terjadi di balik layar,
00:16:56kita sekarang bisa mengandalkan Claude Code untuk mengajari kita hal-hal ini karena sekarang Claude Code
00:17:01benar-benar memahami apa yang terjadi di level coding.
00:17:04Kita sekarang bisa berdiskusi secara cerdas dengan Claude Code dan bertanya, Hei,
00:17:07bagaimana mereka membuat ini? Apa artinya itu? Apa itu GSAP?
00:17:11Bagaimana cara mereka membuat animasi scroll? Bagaimana mereka melakukan ini?
00:17:13Bagaimana mereka melakukan itu?
00:17:14Dan seiring waktu setelah Anda mengkloning lebih banyak situs web dan menggunakannya sebagai
00:17:18templat untuk karya Anda sendiri, karena sekali lagi,
00:17:19Anda akan selalu memberikan sentuhan orisinal Anda padanya.
00:17:21Anda hanya menggunakan ini sebagai landasan dasar.
00:17:23Anda akan menjadi lebih mahir dalam desain front-end,
00:17:26sama seperti saat mempelajari keahlian lainnya.
00:17:29Dan ini adalah proses di mana Anda tidak hanya terpapar pada,
00:17:31tetapi mulai menerapkan teknik profesional ke dalam rakitan Anda,
00:17:34namun untuk naik ke level berikutnya. Seperti yang saya katakan, Anda tidak bisa hanya menjadi,
00:17:38sekadar tukang ketik asal-asalan dengan Claude Code,
00:17:41sama seperti semua hal yang kita bicarakan tadi. Tidak bisa cuma klik terima, terima,
00:17:43terima, lanjut, lanjut, lanjut, karena bagaimana Anda akan membedakan diri Anda?
00:17:46Jadi skill apa yang perlu kita kuasai dalam proses ini?
00:17:48Kita perlu belajar membaca dan memahami kode sumber.
00:17:51Claude Code membantu kita di bagian itu.
00:17:52Kita perlu mengidentifikasi teknik mana yang menghasilkan setiap efek karena pada
00:17:57titik tertentu kita harus bisa melihat situs web ini dan langsung
00:18:02mengenali, Oh, inilah yang sedang terjadi. Dan yang terakhir,
00:18:04kita perlu belajar bagaimana mengadaptasi pola kloning ini ke desain kita sendiri, kan?
00:18:09Kita tidak menjiplak. Kita mencari inspirasi.
00:18:12Dan jika Anda tidak menguasai keterampilan ini,
00:18:13Anda akan terjebak dalam jebakan ini, yaitu batasan kloning,
00:18:16Anda hanya akan menyalin, tapi tidak bisa menciptakan.
00:18:18Anda tidak akan mau memahami alasannya.
00:18:20Dan akhirnya Anda akan menemui jalan buntu.
00:18:22Dan pada akhirnya, saya bisa menggantikan Anda dengan sembarang orang di jalanan dan
00:18:25cukup menyuruh mereka melakukan langkah satu, dua, dan tiga, kan?
00:18:27Itu tidak akan membawa Anda sejauh yang Anda inginkan.
00:18:29Jadi mari kita lihat apa yang bisa dibangun Claude Code setelah kita memberikan semua
00:18:32konteks coding tambahan ini, dan inilah versi terbarunya.
00:18:35Dan yang ini jelas terlihat jauh lebih mirip dengan aslinya,
00:18:39terutama sekarang karena latar belakangnya sudah terlihat pas.
00:18:41Jika kita membandingkan keduanya sekarang, tentu ini belum seratus persen sama.
00:18:45Ini pada dasarnya adalah percobaan pertamanya, tapi jauh lebih baik,
00:18:48jauh lebih mendekati apa yang kita inginkan.
00:18:50Dan jika kita ingin terus melakukan iterasi pada tahap ini dan membuatnya semakin mirip dengan
00:18:54apapun yang kita sukai di sini, itu jauh lebih mudah, kan?
00:18:57Karena sekarang Claude Code melihat buku panduan yang sama
00:19:01yang digunakan open hands, dan kita bisa bilang, oke, izinkan saya mengubah ini.
00:19:04Izinkan saya mengubah itu. Saya tahu cara mereka membuatnya. Inilah cara kita menirunya. Begitu.
00:19:07Dan sekali lagi, di sinilah kita bisa memulai proses edukasi tersebut. Misalnya,
00:19:10seperti latar belakang keren ini, bagaimana cara kerjanya?
00:19:12Dan juga bagaimana kita bisa mendapatkan efek yang sama seperti milik open hands di mana mouse kita menscroll
00:19:17dan, Anda tahu, seolah-olah menghapus sebagian darinya.
00:19:19Dan yang harus Anda lakukan hanyalah bertanya pada Claude Code, bagaimana cara kerja latar belakangnya?
00:19:22Bagaimana kita bisa menyamai efek itu? Dan setiap kali Anda melakukan ini,
00:19:25Anda baru saja menambahkan alat baru ke dalam kotak peralatan Anda.
00:19:27Jadi Claude Code menjelaskan bagaimana efek ini bekerja dan lebih baik lagi, ia sekarang menerapkannya
00:19:32dengan benar pada latar belakang kita sendiri. Keren, kan?
00:19:35Tapi untuk alasan yang jelas, kita tidak ingin berhenti di level empat.
00:19:38Kita tidak ingin hanya menjadi pengkloning, kan? Kita ingin memberikan sentuhan pribadi kita.
00:19:42Kita ingin mulai menjadikannya milik kita. Bagaimana cara melakukannya?
00:19:45Bagaimana kita mulai beranjak ke level lima dan memberikan variasi kita sendiri? Nah,
00:19:48di sinilah kita mulai bersenang-senang dengan komponen dan juga desain aset kustom kita sendiri.
00:19:53Di sinilah kita memasukkan elemen kita sendiri. Dan kita tidak lagi hanya menyalin
00:19:56persis apa yang dilakukan situs web lain.
00:19:57Kini, salah satu cara termudah untuk mulai melakukannya adalah dengan menemukan komponen berkualitas di
00:20:02situs web seperti 21st.dev. Jadi dalam banyak hal,
00:20:04ini mirip dengan cara kita menemukan inspirasi untuk situs web dan mengambil
00:20:08bagian-bagian itu, tetapi di tingkat mikro pada tingkat komponen.
00:20:11Jadi di tempat seperti 21st.dev, misalnya,
00:20:14saya bisa melihat hal-hal seperti tombol di sebelah kiri sini.
00:20:17Dan yang akan saya dapatkan adalah banyak sekali,
00:20:21pada dasarnya, berbagai desain tombol. Dan jika saya menemukan desain tombol yang saya suka, katakanlah,
00:20:26seperti ini. Maka saya bisa menyalin prompt ini,
00:20:29masukkan ke Claude Code dan katakan, Hei, mari kita integrasikan desain tombol ini.
00:20:33Dan ini berlaku untuk hampir semua jenis tombol, kan?
00:20:36Kita punya bagian untuk carousel. Kita punya bagian untuk area scroll, peta,
00:20:40menu navigasi, gambar, harapan, semuanya.
00:20:42Dan ini tidak hanya terbatas pada 21st.dev. Kita punya situs web lain seperti CodePen, kan?
00:20:46CodePen punya banyak desain keren yang bisa kita ambil juga.
00:20:50Monet adalah situs lain yang sangat keren. Faktanya,
00:20:52ada banyak tempat di mana Anda bisa menemukan komponen keren semacam ini dan
00:20:57mulai mengintegrasikannya ke dalam halaman web Anda.
00:20:59Tapi bagaimana jika kita menginginkan sesuatu yang lebih kustom?
00:21:01Saya tidak ingin hanya menyalin sekumpulan komponen acak yang saya temukan di tempat lain.
00:21:04Bagaimana cara membuatnya benar-benar orisinal? Nah, Anda punya dua pilihan.
00:21:08Pertama, Anda tetap menggunakan komponen dari 21st.dev ini,
00:21:11tapi kita minta Claude Code untuk mengubahnya, kan? Itu kan cuma kode.
00:21:14Prompt ini memberi kita kode yang tepat lalu kita bisa mengubahnya sesuka hati
00:21:18kita atau kita bisa benar-benar membuatnya sendiri. Maksud saya,
00:21:21jika kita melihat Pinterest dan melihat landing page keren seperti ini yang
00:21:25sangat menonjolkan sisi seni, tidak ada yang melarang
00:21:29kita menggunakan AI untuk membuat gambar semacam ini dan membiarkannya menjadi
00:21:34daya tarik utama saat orang mengunjungi halaman kita.
00:21:36Dan ini tidak harus berupa gambar diam. Maksud saya,
00:21:39kita punya kemampuan penuh untuk menambahkan video ke latar belakang kita,
00:21:42untuk menghubungkannya ke animasi scrolling tertentu untuk, sekali lagi,
00:21:45mengambil ide-ide yang kita temukan di langkah empat dan menjadikannya milik kita sendiri.
00:21:49Jadi mari kita lakukan itu. Mari kita desain ulang halaman web kita dengan cepat,
00:21:53tinggalkan kloning open hands ini dan desainlah karya seni AI yang keren
00:21:57dan biarkan itu menjadi hal pertama yang dilihat saat mengunjungi situs kita.
00:22:01Dan Anda sudah tahu prosedurnya sekarang,
00:22:02pertama kita perlu mencari semacam inspirasi dan setelah menelusuri
00:22:06Pinterest sebentar,
00:22:07saya melihat banyak situs seperti ini di mana terdapat semacam gambar latar belakang yang hampir seperti kartun
00:22:10atau bergaya untuk bagian hero-nya.
00:22:14Lalu kita akan meletakkan beberapa teks di sebelah kiri.
00:22:16Sekarang di sinilah Anda bisa mulai memasukkan beberapa penceritaan visual Anda, kan?
00:22:19Apa aplikasi yang kita buat? Aplikasinya adalah Argus, kan?
00:22:22Dan kita perlu membuat semacam tagline yang idealnya juga selaras
00:22:27dengan gambarnya itu sendiri. Apa yang ingin kita capai di sini dengan Argus? Nah,
00:22:30Argus, Anda tahu, sosok mitologi dengan 10.000 mata.
00:22:33Kita berbicara tentang media sosial.
00:22:34Kita berbicara tentang menemukan hal-hal sebelum orang lain menemukannya.
00:22:37Jadi tagline yang saya buat adalah "lihat apa yang akan terjadi selanjutnya". Sederhana.
00:22:41Taglinenya padat. Dan Anda tahu siapa yang membantu saya membuatnya.
00:22:44Tentu saja Claude Code. Dan kemudian yang saya lakukan dengan Claude Code adalah,
00:22:47saya kurang lebih bilang, Hei, tahu tidak,
00:22:49kita sedang membicarakan tentang penceritaan visual di sini.
00:22:51Apa saja ide citra yang bisa kita buat, kan?
00:22:54Karena di tahap ini, kita melakukan hal kita sendiri, kan?
00:22:57Saya bisa mengambil konsep umum dari apa yang Anda lihat di sini secara visual dalam hal bagaimana
00:23:01mereka mengaturnya, tapi gambarnya harus milik saya sendiri. Dan sekali lagi,
00:23:04memiliki penceritaan visual yang terhubung dengan apa yang sebenarnya dilakukan aplikasi Anda
00:23:07akan memberikan dampak yang sangat besar.
00:23:10Jadi apa yang akhirnya saya lakukan adalah membuat gambar berdasarkan beberapa
00:23:15ide yang diberikan Claude Code, dan saya sebenarnya mengandalkan Midjourney untuk ini. Sekarang,
00:23:18Anda bisa menggunakan generator gambar apa pun yang Anda inginkan,
00:23:21apakah itu Nano Banana Pro atau Seed Dream, itu tidak masalah.
00:23:24Saya sangat suka Midjourney untuk jenis karya seni konsep seperti ini
00:23:28karena Midjourney, terutama versi tujuh,
00:23:31saya benar-benar belum terlalu banyak menguji versi delapan.
00:23:33Anda bisa memberinya prompt yang agak aneh. Contoh prompt yang saya berikan adalah,
00:23:38saya butuh gambar latar belakang yang akan menjadi landing page untuk situs web bernama
00:23:41Argus. Taglinenya adalah "lihat apa yang akan terjadi selanjutnya".
00:23:43Jadi hanya dengan prompt yang buruk seperti itu, yang sangat samar.
00:23:47Saya mendapatkan banyak hal keren yang bisa saya pilih.
00:23:50Dan saya melihat ini dan saya pikir, ini terlihat keren sekali, kan? Dan saya bisa membayangkan
00:23:54sekarang juga,
00:23:55seperti meletakkan informasinya di sebelah kiri sini,
00:23:59kita mungkin bisa meletakkan beberapa hal di bagian atas. Saya bisa berkreasi dengan ini. Menurut saya,
00:24:02ini sangat keren. Mungkin kita bahkan melakukan semacam animasi pada suatu saat nanti.
00:24:06Jadi setelah saya mendapatkan gambarnya, semuanya menjadi cukup mudah dari situ.
00:24:10Saya tinggal mengunduh gambar ini, memberikannya ke Claude Code dan berkata, Hei,
00:24:13saya ingin merombak halaman hero menggunakan gambar ini sebagai latar belakang.
00:24:17Jadi di dalam Claude Code, saya bilang,
00:24:19saya sebenarnya ingin mengubah tampilan front-end sepenuhnya.
00:24:21Saya ingin menggunakan gambar berikut sebagai latar belakang untuk bagian hero.
00:24:24Mari kita letakkan info tentang aplikasi Argus di sisi kiri,
00:24:27sisakan ruang kosong di sisi kanan untuk memamerkan gambarnya dan buat tagline-nya
00:24:30"lihat apa yang akan terjadi selanjutnya". Jadi kita akan lihat apa hasilnya nanti. Dan sekali lagi,
00:24:34ini adalah level di mana Anda perlu membiarkan ide-ide kreatif Anda
00:24:37mengalir karena sampai titik ini,
00:24:39Anda telah terpapar pada banyak desain front-end berbeda yang
00:24:43berbeda dari sekadar templat SaaS yang sangat umum yang Anda lihat di mana-mana.
00:24:46Artinya, beberapa karya seni keren, apa pun itu, sekali lagi,
00:24:48penceritaan visual adalah apa yang kita kejar di sini dan itu benar-benar akan meningkatkan
00:24:52kemampuan Anda.
00:24:52Dan inilah tampilan bagian hero kita yang sudah diperbarui dengan gambar latar belakang
00:24:56baru tersebut. Dan saya membuat ini sedikit lebih kecil,
00:24:58sehingga Anda bisa melihatnya secara keseluruhan dan Claude Code juga melanjutkan dengan,
00:25:02memperbarui semua warnanya. Nah, sekali lagi, itu baru percobaan pertama.
00:25:06Yang kita lakukan hanyalah menambahkan latar belakang ini, tapi seketika,
00:25:09Anda mulai melihatnya terasa sedikit lebih, entahlah, lebih orisinal,
00:25:12lebih kreatif dan tampil beda, bukan?
00:25:15Dan sekarang kita mulai menambahkan lebih banyak lagi ciri khas kita ke dalamnya.
00:25:19Dan untuk memulainya bisa sesederhana meningkatkan resolusi gambar ini.
00:25:21Anda bisa melakukannya di dalam Midjourney, karena seperti yang kita lihat di sini,
00:25:24gambarnya terasa agak pecah dan tidak sedetail yang diinginkan,
00:25:28atau kita bisa melakukan sesuatu seperti menambahkan gerakan.
00:25:30Latar belakang kita tidak harus berupa gambar diam.
00:25:32Kita sebenarnya bisa meletakkan video di sana juga.
00:25:34Mengubahnya menjadi video sangatlah mudah.
00:25:36Anda tinggal pergi ke tempat seperti Kling 3.0 atau Veo 3.1,
00:25:40di mana saja Anda bisa memasukkan frame awal.
00:25:41Idealnya Anda juga bisa mengatur frame akhirnya. Seperti yang Anda lihat di sebelah kiri,
00:25:45dengan begitu tidak akan ada gerakan yang aneh karena Anda harus ingat,
00:25:49idealnya videonya harus menjadi loop yang sempurna.
00:25:52Terkadang sulit untuk membuat gambar AI berputar (loop) dengan benar.
00:25:55Jadi pilihan terbaik kedua adalah membuat video yang agak panjang sekitar 15 detik.
00:25:59Dan Anda ingin gerakannya halus. Jadi seperti yang Anda lihat di sini, kan?
00:26:03Jika saya menggunakan ini sebagai latar belakang, bahkan dengan burung-burung yang sama sekali diam,
00:26:07yang sebenarnya tidak masalah, ini hampir seperti efek paralaks yang Anda dapatkan.
00:26:11Dan karena ini halaman hero dan ini berdurasi 15 detik,
00:26:14kemungkinan seseorang akan duduk diam di sana selama 30 detik dan melihat
00:26:18seluruh videonya sangat kecil. Jadi jika ada sedikit gangguan di bagian akhir,
00:26:22itu tidak akan jadi masalah. Tapi untungnya untuk yang satu ini,
00:26:24karena gerakannya sangat halus,
00:26:25Anda hampir tidak bisa membedakan kapan video beralih dari detik ke-15 ke detik pertama.
00:26:29Jadi kita akan gunakan yang ini. Dan Anda mungkin juga bertanya,
00:26:31bagaimana dengan masalah performa? Nah, untuk performa di desktop,
00:26:35akan baik-baik saja dengan video, tapi kita akan beri tahu Claude Code, Hei,
00:26:38jika itu pengguna ponsel yang datang ke halaman web seluler Anda, videonya tidak akan dimuat. Yang akan dimuat hanyalah gambar diamnya.
00:26:42video tidak akan dimuat. Situs hanya akan memuat gambar diam saja.
00:26:45Jadi saya berikan gambar baru yang sudah di-upscale dan menyuruhnya memakai itu untuk mobile.
00:26:50Lalu saya berikan tautan videonya dan berkata, "Hei,
00:26:52ganti bagian hero dengan ini."
00:26:54Dan begini tampilan halamannya sekarang dengan efek gerak,
00:26:58bagus, kan? Selain itu, gerakannya halus.
00:27:02Anda tidak ingin gerakan berlebihan seperti ada video game
00:27:06di latar belakang, kecuali Anda memang ahli,
00:27:07tapi sesuatu seperti ini dengan pergerakan awan yang halus,
00:27:11dan air yang bergerak di bawah, kan? Sekali lagi, ini memberikan
00:27:14halaman web Anda sebuah karakter,
00:27:15dan memberikan karakter orisinal pada situs adalah inti dari level lima.
00:27:19Seperti yang selalu saya katakan, di empat level pertama, kita belajar fundamental.
00:27:22Kita melihat apa yang dilakukan para profesional. Di level lima ini,
00:27:25kita benar-benar menyesuaikannya. Jadi, seperti yang dilakukan pada bagian hero,
00:27:28begitulah Anda harus mulai menangani setiap bagian lainnya.
00:27:32Seperti kartu-kartu ini, tampilannya buruk. Latar belakangnya juga membosankan.
00:27:36Semuanya terlihat sama persis. Jadi apa yang akan saya lakukan?
00:27:38Saya akan mencari inspirasi. Saya buka 21stthought.dev atau Awwwards.
00:27:42Saya masukkkan ke Claude Code, lalu saya akan terus melakukan iterasi
00:27:45sampai saya mendapatkan hasil yang disukai. Nah, di tahap ini,
00:27:48saat melakukan semua pengeditan visual, Anda akan merasa sedikit
00:27:51terbatas jika hanya di dalam Claude Code. Sekali lagi,
00:27:54selalu ada ketegangan antara bekerja di dalam terminal
00:27:58menggunakan teks dengan mencoba mengolah sesuatu dalam medium visual. Jadi di langkah keenam,
00:28:03kita akan mulai keluar dari Claude Code karena di level enam inilah
00:28:06kita mulai menggunakan alat bantu luar yang memungkinkan kita
00:28:11menjadi lebih spesifik dalam menyusun elemen visual tersebut.
00:28:14Dan ada banyak alat yang bisa kita gunakan.
00:28:17Ada Paper.design, Stitch, dan Figma, kan?
00:28:21Lalu ada Pencil.dev.
00:28:22Di sinilah Anda sekarang memiliki kemampuan untuk membawa program luar
00:28:26untuk sekadar mengutak-atik lebih jauh. Dan alat yang bagus untuk dicoba karena
00:28:29sangat berbasis AI dan mudah digunakan adalah Stitch. Itu juga gratis.
00:28:33Ini dari Google dan pada dasarnya memberi kita kanvas visual untuk mengolah
00:28:37desain front-end.
00:28:38Jadi yang saya lakukan di sini bukan memulai dari nol.
00:28:42Kita sedang melakukan desain ulang. Jadi saya berikan tangkapan layar situs kita,
00:28:45baik halaman hero maupun bagian lainnya.
00:28:47Dan saya katakan, "Begini tampilan situs saat ini. Saya sangat suka bagian hero-nya."
00:28:51Saya suka estetika dan warnanya,
00:28:53tapi saya ingin memperbarui seluruh bagian bawah situs saya.
00:28:57Terasa sangat datar, bukan?
00:28:59Saya ingin memasukkan citra dan warna yang kita miliki di bagian atas
00:29:03ke bawah. Mari kita lihat apa yang bisa dihasilkannya.
00:29:05Mari kita lihat hasil desain ulangnya.
00:29:08Dan inilah hasilnya.
00:29:10Hal keren dari Stitch adalah saya bisa mendesain ulang hasil desain ulangnya.
00:29:14Jika saya memilih bagian ini,
00:29:15Anda bisa lihat di bagian bawah saya bisa memberinya perintah seperti chatbot.
00:29:18Saya juga bisa mengeklik kanan dan memilih varian, lalu lagi-lagi,
00:29:22mengubah tata letak, skema warna, gambar, dan sebagainya.
00:29:24Karena ini desain ulang di Stitch dan saya tidak membangun dari awal,
00:29:28ini hanyalah sebuah gambar yang dibuatnya.
00:29:30Tapi ini adalah sesuatu yang bisa langsung saya klik kanan dan salin.
00:29:34Lalu membawanya kembali ke Claude Code dan bertanya, "Hei,
00:29:37bagaimana menurutmu tentang ini?" Sekali lagi,
00:29:38alat editor visual seperti ini sangat bagus untuk proses ideasi.
00:29:43Dan jumlahnya banyak. Pencil.dev adalah contoh lainnya.
00:29:46Anda akan sering melihatnya di mana-mana.
00:29:47Ini berfungsi sangat baik jika Anda menggunakan Cursor atau VS Code,
00:29:50karena Anda bisa membuka kanvasnya dan mengedit secara waktu nyata.
00:29:54Jadi ada banyak alat di bidang ini dan makin banyak yang muncul di pasar
00:29:58setiap minggunya. Lalu saya masukkan gambar itu kembali ke Claude Code dan
00:30:01bertanya, "Bagaimana menurutmu tentang ini?"
00:30:03"Bagaimana dengan efek glassmorphism yang kita terapkan pada
00:30:06latar belakang gambarnya? Mari kita coba itu."
00:30:08Dan itulah yang akan Anda lakukan terus-menerus sampai situsnya
00:30:12sesuai dengan keinginan Anda,
00:30:12karena ini adalah tahap desain front-end di mana Anda hanya tinggal mengutak-atik.
00:30:15Anda akan terus mengutak-atik, mengutak-atik, dan mengutak-atik.
00:30:16Sekarang Anda sudah punya keahlian untuk menentukan ke mana arahnya,
00:30:21tapi ini proses yang sangat iteratif dan tidak ada jalan pintas di sini.
00:30:25Namun sekali lagi, semua alat sekarang sudah tersedia untuk Anda,
00:30:27baik untuk mencari inspirasi maupun untuk bereksperimen.
00:30:31Setelah sekitar 20 menit mengutak-atik sendiri,
00:30:34inilah hasil yang saya dapatkan untuk situs Argus. Pertama-tama,
00:30:37Anda akan melihat beberapa perubahan kecil yang memberinya bobot,
00:30:40memberikan kesan yang lebih premium. Pertama adalah bagian pemuatan.
00:30:43Saat saya memuat ulang ini, apa yang Anda lihat?
00:30:45Anda melihat ada semacam jeda sebelum semua teks muncul dan itu
00:30:49memberinya bobot, membuatnya terasa lebih "mantap".
00:30:52Anda juga akan menyadari saya mengganti font-nya. Font itu krusial. Tipografi itu penting.
00:30:57Di mana Anda bisa melihat berbagai jenis font dan mencari
00:31:00inspirasi? Tempat yang bagus adalah Google Fonts.
00:31:03Mereka punya jutaan font. Semuanya gratis.
00:31:06Dikelompokkan berdasarkan tipenya dan Claude Code bisa menggunakan semuanya.
00:31:08Jadi pastikan cek Google Fonts. Jika Anda bingung,
00:31:11"Aduh, saya tidak tahu mau pakai yang mana." Kami menambahkan bagian gulir di sini.
00:31:14Kami menambahkan semacam ticker di bagian bawah yang juga berfungsi sebagai pembatas
00:31:19antara video dan latar belakang gambar di bawahnya. Sebelumnya,
00:31:25perpindahan dari bagian hero video ke gambar latar belakang yang sama
00:31:30terlihat sangat kaku, tapi ini memberikan pembatas alami yang bagus.
00:31:35Anda juga akan melihat perubahan yang kita ambil dari Stitch.
00:31:38Sekarang kita memiliki efek glassmorphism yang masih perlu sedikit dipoles.
00:31:41Bisa terlihat agak terpotong saat memantul,
00:31:44tapi ini menunjukkan karya seni latar belakang yang memberikan karakter pada situs.
00:31:48Lalu Anda juga bisa melihat beberapa hal halus, kan?
00:31:52Jika saya muat ulang di sini,
00:31:54Anda akan melihat angka penghitungnya langsung naik dari nol ke 10 juta.
00:31:59Ini adalah hal-hal kecil di bagian pinggir yang menunjukkan bahwa Anda peduli
00:32:03pada situs tersebut dan memiliki rasa bangga profesional.
00:32:07Anda bahkan akan melihat efek kilatan cahaya melewati teks AI tools
00:32:10dan content strategy. Sekali lagi, ini hanyalah hal-hal kecil.
00:32:12Hal-hal kecil ini sejujurnya mungkin tidak akan disadari
00:32:16oleh kebanyakan orang sama sekali. Namun saat Anda menggabungkan semuanya,
00:32:20Anda akhirnya mendapatkan sesuatu yang terlihat koheren dan sesuatu yang
00:32:24benar-benar Anda buat dengan sepenuh hati, terlepas Anda menggunakan AI sebagai alatnya.
00:32:27Poinnya adalah karya ini dikerjakan dengan detail. Semuanya ada.
00:32:31Bahkan bilah gulir di atas, Anda lihat perkembangannya. Sekali lagi, detail kecil.
00:32:34Lalu bagaimana saya memberinya perintah? Sejujurnya,
00:32:38itu hanya kombinasi dari semua yang telah kita bahas sejauh ini.
00:32:40Saya sudah melihat hal-hal yang saya sukai.
00:32:42Saya ambil tangkapan layarnya dan membawanya ke Claude Code.
00:32:45Terlebih lagi, saya bukan ahli desain web.
00:32:48Jadi yang saya lakukan pada hal-hal tertentu adalah,
00:32:52saya langsung tahu, "Hei, saya suka kartu glassmorphism
00:32:53yang kita lihat di Stitch tadi."
00:32:57Karena Stitch yang memberi kita ide itu pertama kali.
00:32:59Dan saat Claude Code awalnya membuatnya, tampilannya agak datar.
00:33:03Tidak terlihat menonjol. Jadi saya bilang, "Hei,
00:33:06mari beri mereka bobot agar terlihat lebih menonjol dari halaman."
00:33:08Tapi saya juga memberi tahu Claude Code,
00:33:12"Saya ingin kamu melakukan pencarian web untuk
00:33:17praktik desain web terbaik dalam melakukan hal-hal semacam ini."
00:33:20Selain mencari tahu cara membuat kartu ini
00:33:22terlihat menonjol dan berbobot,
00:33:25carikan juga hal-hal lain yang bisa membuat situs kita terlihat lebih premium
00:33:29namun tetap halus. Dan ia memberikan banyak ide berbeda.
00:33:32Saya mencoba semua idenya. Ada yang saya buang, ada yang saya simpan.
00:33:36Tapi itulah ritme kerjanya. Anda tidak harus bergantung
00:33:40sepenuhnya pada diri sendiri.
00:33:41Claude bisa mencari praktik terbaik di internet, tapi ingat,
00:33:45Anda selalu memegang kendali.
00:33:47Anda adalah pengemudinya dan jangan takut untuk bersenang-senang dengan ini.
00:33:50Seperti yang saya katakan, semua detail kecil ini adalah tempat di mana
00:33:53Anda memberi karakter dan menjadikannya milik Anda sendiri, bukan?
00:33:57Makin kita bisa menjadikannya milik Anda dan mencerminkan jiwa kreatif Anda
00:34:02di ruang ini, maka hasilnya akan makin bagus.
00:34:04Sejujurnya, jika itu refleksi dari diri Anda dan apa yang ingin ditampilkan,
00:34:08sulit untuk menyebutnya sebagai sampah AI.
00:34:11Sulit menyebutnya template AI karena itu milik Anda.
00:34:14Jadi meskipun di permukaan level ini tentang penggunaan alat luar
00:34:17seperti Stitch, menurut saya level enam ini lebih dari itu.
00:34:19Menggunakan alat luar seperti Stitch untuk terus beriterasi.
00:34:23Namun pada akhirnya di tingkat ini,
00:34:25Anda akhirnya bisa berpikir kreatif dan mengekspresikan diri
00:34:27di ruang desain front-end dengan menggunakan Claude Code sebagai alat bantu.
00:34:31Berbeda dengan level-level awal di mana kita hanya mengikuti arus.
00:34:34Itu membawa kita ke lapisan terakhir, level tujuh. Apa yang terjadi di sana?
00:34:37Apa maksudnya soal 3D? Baiklah, ini bocorannya.
00:34:41Ini adalah area di mana mungkin tidak ada dari kita yang akan bermain di sana.
00:34:45Saat kita bicara soal frontier, arsitek, dan hal-hal 3D,
00:34:51ini adalah tempatnya para pemain liga besar.
00:34:55Ini bukan sesuatu yang benar-benar bisa kita lakukan saat ini.
00:34:57Menurut saya hingga hari ini, akhir Maret 2026,
00:35:02saya rasa ini belum masuk jangkauan kita karena kita mulai bicara tentang
00:35:05hal-hal seperti kustom WebGL, shader, dan pengalaman 3D.
00:35:07Itulah yang sedang kita bicarakan.
00:35:12Situs web yang tampilannya mirip seperti video game. Contohnya,
00:35:13situs web yang satu ini.
00:35:17Apakah Anda pikir ini sesuatu yang bisa kita tekan Ctrl+U, Ctrl+A,
00:35:20lalu melihat HTML dan CSS-nya untuk tahu apa yang terjadi?
00:35:25Tidak, ini semua adalah karya seni.
00:35:30Ini dibuat oleh tim desainer yang menghabiskan waktu sangat lama
00:35:34untuk menyatukan semuanya dan hasilnya benar-benar menakjubkan.
00:35:37Secara teori, bisakah AI melakukan ini? Mungkin saja, tapi jujur ini
00:35:41sudah jauh melampaui kemampuan Anda atau saya.
00:35:45Dan saya memasukkannya di sini hanya untuk menunjukkan apa yang mungkin terjadi.
00:35:47Karena saat Anda melihat situs seperti ini—dan jika ingin lihat lebih banyak—
00:35:50kunjungi Awwwards yang saya bahas tadi dan lihat "Site of the Day"
00:35:53atau "Site of the Month". Semuanya memiliki kemiripan di mana
00:35:54ini adalah karya-karya kustom.
00:35:57Mungkin AI akan mengizinkan kita bermain di sini dalam beberapa tahun ke depan.
00:36:00Tapi ini keren sekali.
00:36:03Seluruh ruang lingkup desain situs web ini sangat menarik.
00:36:07Ini sudah murni seni. Seperti yang saya katakan,
00:36:09saat pertama kali terjun ke bidang ini,
00:36:12Anda hanya melihat tampilan SaaS yang itu-itu saja terus menerus.
00:36:16Tapi saat melihat yang seperti ini, pikiran Anda akan langsung takjub.
00:36:17Dan inilah yang disebut level tujuh.
00:36:19Jika Anda tahu cara melakukan hal seperti ini dengan AI, maka
00:36:22Andalah yang seharusnya membuat video di YouTube.
00:36:24Karena saya juga ingin belajar caranya. Namun jujur saja,
00:36:27saya membuat level ini hanya untuk memamerkan situs Igloo ini.
00:36:29Karena keren sekali. Jadi, silakan cek sendiri dan
00:36:30biarkan diri Anda takjub sambil memikirkan apa yang bisa Anda buat
00:36:34di masa depan.
00:36:38Dan di sinilah saya akan mengakhiri tujuh level desain front-end
00:36:42menggunakan Claude Code. Harapan saya, lebih dari apa pun,
00:36:43Anda mendapatkan gambaran tentang progresi keahlian untuk
00:36:46mencapai hasil seperti ini. Karena ini sangat mungkin dilakukan.
00:36:51Idenya adalah pertama-tama kita harus melihat hal yang kita sukai,
00:36:56lalu kita harus belajar cara membongkar atau mendekonstruksinya.
00:36:58Konsep mengkloning situs web menurut saya sangatlah penting.
00:37:01Karena Anda akan belajar banyak dengan membiarkan Claude Code memandu Anda
00:37:03memahami bagaimana orang lain membuat situs yang Anda sukai.
00:37:06Melalui proses itu, Anda akan teredukasi tentang berbagai teknik
00:37:10dan efek yang tadinya tidak Anda ketahui keberadaannya.
00:37:14Dan melalui proses itu juga, Anda bisa kembali ke situs sendiri
00:37:18dan mulai menerapkannya dalam gaya kreatif Anda sendiri.
00:37:21Itulah inti sebenarnya. Bukan soal, "Hei,
00:37:26ada satu keahlian rahasia dan gunakan keahlian itu di Claude Code."
00:37:30"Dan wah, lihat hasilnya!" Sejujurnya, jika semudah itu,
00:37:33situs web semua orang akan terlihat bagus. Tapi nyatanya tidak, kan?
00:37:37Jadi jelas ini tidak semudah itu. Ada hal lain yang berperan.
00:37:40Menurut saya ide tentang selera dan bahwa AI tidak punya selera,
00:37:44itu ada benarnya juga.
00:37:47Namun yang lebih akurat adalah ide bahwa kita
00:37:48sangat kesulitan untuk mengartikulasikan selera kita sendiri.
00:37:53Kita kesulitan mengartikulasikan selera karena kita bahkan tidak tahu kata yang tepat
00:37:57karena kita bukan desainer web. Kita tidak tahu kosakatanya.
00:38:02Kita tidak tahu nomenklaturnya.
00:38:05Dan itu hal yang sangat umum terjadi pada semua hal terkait AI secara umum,
00:38:06bukan cuma desain web. Itu juga berlaku untuk urusan coding.
00:38:10Jika Anda bukan dari bidang tersebut, Anda tidak tahu cara bahasanya.
00:38:13Dan itu menciptakan semacam kendala terjemahan antara Anda
00:38:15dengan Claude Code, sehingga hasilnya menjadi ceroboh dan generik.
00:38:19Tapi mudah-mudahan dengan mengikuti peta jalan ini,
00:38:21Anda melihat jalan keluar untuk mengatasi masalah tersebut seiring waktu.
00:38:25Semoga Anda mendapatkan manfaat. Saya senang melakukannya.
00:38:29Beri tahu saya di kolom komentar apa pendapat Anda. Seperti biasa,
00:38:32pastikan cek Chase AI Plus jika ingin mencoba Claude Code Masterclass.
00:38:37Kami tunggu kehadiran Anda di sana dan sampai jumpa lagi.
00:38:40chase AI. Além disso, se você quiser colocar as mãos no masterclass de cloud code,
00:38:43Adoraríamos ter você lá e a gente se vê por aí.