00:00:00ada monster di dalam kode Claude dan namanya adalah AI Slop.
00:00:03Gradien ungu, fon Inter untuk semuanya, dan pengaturan kartu yang sama di setiap
00:00:09satu situs web. Anda tahu jenis AI Slop yang saya maksud,
00:00:12tapi hari ini saya akan memberi Anda 10 alat berbeda untuk membantu Anda mengalahkan monster ini
00:00:16dan tidak, tidak satu pun dari mereka adalah keahlian desain front-end. Faktanya,
00:00:20banyak dari alat ini relatif baru.
00:00:22Jadi meskipun Anda sudah lama berada di dunia desain kode Claude,
00:00:26saya berjanji Anda akan mempelajari sesuatu hari ini.
00:00:28Sekarang semua alat yang akan kita bahas hari ini pada dasarnya melayani tujuan yang sama
00:00:31dan itu adalah memberi Anda kesempatan untuk membuat desain web front-end berkualitas tinggi
00:00:35dengan kode Claude karena meski kode Claude itu bagus,
00:00:39itu adalah satu area di mana ia sangat kurang.
00:00:42Dan alat pertama dalam daftar ini adalah Impeccable.
00:00:44Ini adalah satu set keahlian tunggal yang mencakup 18 perintah.
00:00:46Dan saya akan menautkan ini di deskripsi serta setiap alat lain yang akan kita bahas
00:00:50hari ini.
00:00:51Sekarang saya sangat suka Impeccable karena apa yang bisa dilakukannya sangatlah luas
00:00:55cakupannya. Ini satu keahlian, tapi terdiri dari 18 perintah.
00:00:58Dan jika kita mengikuti tautan GitHub ke impeccable.style,
00:01:01kita bisa melihat semua perintah mereka beraksi. Dan lebih baik lagi,
00:01:05kita bisa melihat keluaran AI generik, Hei, fon inter, gradien ungu,
00:01:09dan semacam tampilan sesudahnya menggunakan perintah yang berbeda. Jadi misalnya,
00:01:15kita punya sesuatu seperti Clarify,
00:01:16yang fokus pada kesalahan UX dan pesan kesalahan.
00:01:19Dan Anda bisa melihat perbedaan antara keduanya di sini.
00:01:21Ini juga memiliki ekstensi Chrome,
00:01:23yang akan menyoroti estetika semacam AI slop langsung di halaman web Anda,
00:01:28seperti dalam contoh ini. Dan saya sangat suka bagaimana keahlian ini menggunakan anti-pola.
00:01:32Jadi pada dasarnya ia mengajarkan model bahasa besar (LLM).
00:01:34Seperti apa sebenarnya rupa AI slop; aksen tepi ini,
00:01:38batas aksen tab samping yang Anda lihat di mana-mana, Anda tahu,
00:01:42sparklines, glassmorphism, kan?
00:01:45Kita melihat hal-hal ini berulang kali.
00:01:47Jadi mengapa kita tidak menggunakan keahlian yang memberi tahu LLM? Ini adalah AI slop secara harfiah.
00:01:52Alih-alih menggunakan sesuatu seperti keahlian desain front-end, yang seperti,
00:01:54tolong jangan buat AI slop; itu tidak berhasil. Dan seperti yang bisa Anda bayangkan,
00:01:58keahlian ini cukup padat seperti yang kita lihat di sini. Dan saya terus menggulir.
00:02:03Dan itu karena ia memiliki beberapa referensi untuk setiap domain desain
00:02:07tertentu.
00:02:08Anda hampir bisa menganggapnya sebagai sub-keahlian dan 18 perintah berbeda yang disebutkan tadi.
00:02:13Sekarang,
00:02:14cara termudah untuk melihat semua perintah ini beraksi adalah dengan membuka dokumentasi Impeccable.
00:02:17Dan persis seperti yang Anda lihat di halaman utama,
00:02:21Anda bisa melihat contoh sebelum versus sesudah.
00:02:25Dan melihat secara visual apa yang bisa dilakukan semua ini jauh lebih baik daripada sekadar
00:02:29melihat deskripsi dan berharap kode Claude menggunakan apa yang Anda harapkan.
00:02:33Dan ini bahkan bukan sekadar masalah visual murni.
00:02:35Ketika Anda melihat keahlian seperti Adapt,
00:02:37itu memastikan desain tersebut benar-benar berfungsi di berbagai platform seperti seluler dan tablet
00:02:41dibandingkan hanya untuk desktop. Jadi sangat disarankan Anda memeriksanya.
00:02:45Ini baru keluar sekitar satu bulan. Nah, sebelum kita masuk ke alat nomor dua,
00:02:48promosi singkat untuk masterclass kode Claude saya, yang baru saja saya rilis bulan lalu.
00:02:52Dan saya sudah memberikan banyak pembaruan.
00:02:54Ini adalah tempat nomor satu untuk beralih dari nol menjadi pengembang AI.
00:02:57Dan harga ini akan naik hanya dalam beberapa hari.
00:03:01Jadi jika Anda ingin mendapatkannya, pastikan untuk memeriksanya.
00:03:04Ada tautan di komentar yang disematkan. Sekarang mari kita bahas alat nomor dua,
00:03:06yaitu Skill UI. Sekarang ini adalah alat yang baru saja saya ketahui pagi ini.
00:03:12Ini bahkan belum ada selama 24 jam. Sudah mendapat tujuh bintang.
00:03:15Kita berada di tahap awal. Saya tidak membuat ini. Saya tidak kenal orang ini.
00:03:18Saya kebetulan melihatnya memposting tentang hal itu di Twitter.
00:03:21Saya baru saja melakukan scroll tanpa henti. Saya melihat, jadi ini terlihat seperti keahlian yang keren.
00:03:24Dan ini memungkinkan kita untuk merekayasa balik sistem desain apa pun menjadi keahlian yang siap untuk Claude.
00:03:29Apa artinya itu? Itu berarti kita mengambil keahlian ini.
00:03:31Kita mengarahkannya ke semacam situs web yang sudah ada.
00:03:34Dan ia pada dasarnya menganalisis bagaimana situs web itu dibangun dan mengubahnya menjadi
00:03:39sebuah templat, menjadi sebuah keahlian, pada dasarnya. Biar saya tunjukkan aksinya. Jadi di sini,
00:03:45kita punya situs web Stripe, situs yang sangat keren, banyak hal yang terjadi.
00:03:49Jelas ia memiliki banyak grafik khusus dan hal-hal seperti itu.
00:03:52Mustahil bagi kode Claude tanpa banyak grafik dan visual ini untuk
00:03:56pasti bisa membuatnya kembali. Belum bisa. Tapi katakanlah saya suka desain umumnya,
00:04:00hanya dari cara pengaturannya dalam hal kartu dan tata letak.
00:04:03Dan saya ingin menggunakan ini sebagai dasar untuk situs web saya sendiri. Nah,
00:04:06kita sudah bahas di video sebelumnya, cara-cara kita bisa melakukannya.
00:04:08Seperti kita lihat HTML-nya, semua hal itu, tapi Anda tahu,
00:04:11itu akhirnya menjadi solusi 60, 70%. Jadi saya mengambil keahlian Skill UI itu.
00:04:15Saya mengarahkannya ke Stripe dan kemudian saya berkata, Hei,
00:04:17buatkan saya situs web Stripe tiruan dengan gaya seperti itu.
00:04:21Dan inilah yang dihasilkannya dalam satu kali percobaan. Hanya itu yang saya katakan.
00:04:25Saya tidak memberinya informasi lebih lanjut dan ia membuat ini.
00:04:27Dan ia memiliki semacam suasana Stripe di dalamnya. Sekali lagi,
00:04:32seperti ini adalah grafik khusus pada Stripe.
00:04:34Ia tidak akan bisa membuatnya kembali hanya dari sebuah prompt, tapi Anda tahu,
00:04:39ini cukup bagus. Sebenarnya, jika Anda bertanya kepada saya, Anda tahu,
00:04:44ia masih memiliki beberapa hal standar AI.
00:04:47Dari cara segalanya diatur dan ikon-ikonnya,
00:04:50tapi ia tidak hanya membuat bento box dua kali dua dengan kartu.
00:04:55Saya suka warna yang mereka gunakan. Saya suka grafiknya, tapi di sini,
00:04:59ini sejujurnya sangat bagus bagi saya hanya dengan mengatakan, Hei, lihat situs
00:05:03Stripe, bangunkan saya fondasinya. Dan karena ia mengubahnya menjadi keahlian,
00:05:06saya sekarang punya keahlian desain Stripe, yang hanya di level proyek,
00:05:10tapi saya bisa menggunakannya kapan saja.
00:05:12Jadi katakanlah saya ingin membuat situs web lain yang juga menggunakan gaya Stripe.
00:05:16Saya bisa melakukannya, tapi saya bisa mengarahkan Skill UI ke apa pun.
00:05:18Dan Anda bisa melihat aksinya di video contoh yang dia punya di sini di GitHub,
00:05:22di mana dia mengarahkan alat ini ke Notion.
00:05:24Dan kemudian dia memberi tahu kode Claude, buatkan saya klon Notion.
00:05:27Dan itulah yang Anda lihat di sana. Jadi untuk menggunakan keahlian ini,
00:05:30Anda tinggal mengikuti perintah instalasi di sini di halaman GitHub.
00:05:33Dan ia memiliki dua mode berbeda. Jadi jika Anda ingin sesuatu yang pada dasarnya,
00:05:38mengambil semuanya seperti tangkapan layar gulir dan interaksi yang berbeda,
00:05:41saat mouse Anda melewati sesuatu, ia menggunakan Playwright,
00:05:45untuk mencari tahu semua itu. Jadi ia tidak hanya melihat HTML,
00:05:48seperti yang dilakukan alat biasa seperti keahlian penguraian situs kustom saya
00:05:52di masa lalu. Jadi jika Anda menggunakan mode ultra, ia benar-benar menyertakan Playwright.
00:05:55Jadi ada tingkat kecanggihan tertentu di sini. Jadi secara keseluruhan,
00:05:58keahlian yang sangat cerdas, Anda berada di tahap awal. Jika Anda mulai menggunakan ini,
00:06:00Anda sekarang seperti pengguna keahlian repo GitHub yang keren.
00:06:03Dan saya sangat menyarankan Anda melakukan ini jika memulai situs web baru dan Anda
00:06:07tidak tahu bagaimana harus memulainya dari nol, karena sekali lagi,
00:06:10ini adalah titik awal yang bagus. Saya bisa mengedit apa pun yang saya mau dari sini.
00:06:13Kini alat nomor tiga adalah satu hal yang sejujurnya sedikit di luar
00:06:17bidang keahlian saya, tapi saya rasa ini sangat menarik.
00:06:19Saya mencoba mempelajarinya lebih lanjut dan menggunakannya sendiri.
00:06:21Dan itu adalah keahlian WebGPU.
00:06:23Jadi WebGPU pada dasarnya seperti komponen desain web di mana
00:06:28halaman web berinteraksi langsung dengan kartu grafis Anda.
00:06:30Dan ini memungkinkan kita membuat animasi yang sangat keren. Seperti yang Anda lihat di sini,
00:06:34seperti hal-hal ini juga.
00:06:36Ketika kita bicara tentang, jika Anda menonton tujuh level desain web kode Claude saya,
00:06:40dan bahkan kita melihat hal-hal seperti situs web Igloo di level tujuh,
00:06:44mereka menggunakan hal-hal seperti WebGL dan shader kustom.
00:06:47Seperti inilah ranah yang saya bicarakan.
00:06:49Dan keahlian ini mengajarkan kode Claude,
00:06:52bagaimana cara menulis kode yang melakukan hal itu.
00:06:54Jadi ia memberitahunya cara mengatur render, cara membuat shader,
00:06:58cara membuat materi berbasis node. Dan dengan menggunakan keahlian ini,
00:07:00saya hanya memberikan beberapa prompt teks dan ia bisa membuat ini.
00:07:06Apakah ini sekeren, Anda tahu, yang satu ini? Tidak,
00:07:08tapi saya melakukannya dalam dua menit setelah, sebenarnya butuh sekitar 10 menit dengan
00:07:13GPU-nya, tapi hanya beberapa prompt teks dan saya tidak tahu apa yang saya lakukan.
00:07:16Jadi jika hal-hal semacam ini menarik minat Anda dan dari semua alat yang saya bahas
00:07:19di sini, ini adalah yang paling mungkin paling canggih,
00:07:22tapi saya suka. Jika hal ini menarik bagi Anda,
00:07:26ini adalah keahlian yang harus Anda periksa karena ia membawa Anda ke
00:07:28arah tersebut.
00:07:29Tapi jelas ini adalah sesuatu yang jauh lebih maju daripada sekadar mengubah
00:07:32tampilan kartu kita atau mengubah tipografi sebuah situs web,
00:07:35tapi ini sesuatu yang perlu diingat.
00:07:37Alat nomor empat adalah salah satu repo AI terpopuler selama sebulan terakhir.
00:07:41Dan itu adalah awesome design.md. Ini dia, sudah lebih dari 50.000 bintang saat ini.
00:07:46Jadi ini benar-benar sedang naik daun.
00:07:48Dan ini mirip dalam beberapa aspek dengan alat Skill UI yang kita bahas tadi karena
00:07:52ini adalah keahlian yang memungkinkan kita melihat situs web lain yang sudah ada dan
00:07:57menggunakannya sebagai semacam templat untuk situs web yang akan kita bangun. Sekarang,
00:08:01Awesome Design sangat dipengaruhi oleh Stitch.
00:08:04Dan kita akan membahas Stitch sedikit nanti.
00:08:06Dan Stitch memiliki konsep design.md ini, file desain markdown,
00:08:11dan itu hanyalah prompt yang menjelaskan bagaimana Anda harus membangun situs web Anda.
00:08:14Perbedaannya adalah Google melakukan pekerjaan yang sangat baik dalam membuat prompt ini.
00:08:18Seperti yang Anda lihat di sini. Dan ia menjadi sangat, sangat spesifik tentang apa gambarannya.
00:08:22Apa tujuannya, bagaimana kita mengatur warna. Ini memberikan struktur yang hebat.
00:08:26Alih-alih sekali lagi, sesuatu seperti keahlian desain front-end dari kode Claude,
00:08:29yang seperti, ya, mari kita lakukan saja hal-hal dengan cara ini.
00:08:32Ini jauh lebih konkret tentang apa yang perlu dilakukan.
00:08:34Dan ia telah mengambil ide dari prompt sistem desain yang sangat spesifik ini dan
00:08:39pada dasarnya membuatnya untuk banyak situs web berbeda di berbagai
00:08:43domain yang berbeda. Jadi sesuatu seperti Eleven Labs,
00:08:47saya klik itu di sini.
00:08:50Saya bisa melihat pada dasarnya seluruh ide desain Eleven Labs
00:08:55dibedah; elemen formulir, contoh kartu, tombol, judul,
00:09:00tipografi, warna, semua itu. Dan ini bukan hanya pratinjau langsung.
00:09:04Kita lihat itu adalah prompt sebenarnya yang kemudian bisa kita berikan ke kode Claude. Dan lagi,
00:09:07mereka punya banyak situs web di sini, termasuk hal-hal non-teks,
00:09:10hal-hal seperti Bugatti, kan? Jadi, pada dasarnya,
00:09:15ini memberi Anda blok bangunan dari beberapa situs web yang Anda suka sehingga Anda bisa membangun
00:09:19milik Anda sendiri menggunakan blok bangunan yang sama.
00:09:21Jadi sementara alat Skill UI yang kita lihat tadi melihat situs web apa pun yang
00:09:25Anda inginkan dan kemudian membangunnya untuk Anda.
00:09:26Ini hanya seperti memecah bagian-bagian komponennya.
00:09:29Dan kemudian terserah kita untuk membangunnya sendiri. Sekarang, setelah memuji Awesome Design,
00:09:33adil saja jika untuk alat nomor lima,
00:09:35kita membahas aplikasi yang sebenarnya menginspirasinya.
00:09:38Dan itu adalah Stitch itu sendiri dari Google. Jadi Stitch itu luar biasa.
00:09:41Jika Anda ingin mulai dari pendekatan visual sebelum Anda benar-benar mulai
00:09:46membangun halaman web Anda.
00:09:48Jadi apa yang Anda lakukan adalah Anda masuk ke Stitch dan memberikan prompt tentang apa
00:09:50yang ingin Anda bangun. Ini bisa termasuk tangkapan layar inspirasi.
00:09:53Apa yang akan dilakukannya adalah ia akan membuat file design.md yang sama
00:09:57seperti yang Anda lihat tadi, tapi di habitat aslinya.
00:09:59Jadi ia memberi kita rincian warna, jenis tipografi, label,
00:10:04tombol, dan kemudian kita bisa melihat di sini, seluruh sistem desain,
00:10:08design.md yang sama dengan yang Anda lihat sebelumnya,
00:10:11tapi sekarang disesuaikan untuk apa pun yang Anda minta. Dan setelah itu,
00:10:14ia kemudian memberi Anda banyak variasi jenis situs web yang akan Anda
00:10:18buat. Bukan hanya bagian utamanya saja. Ia melakukan semuanya.
00:10:20Dan setelah ia membuat mockup itu, saya bisa mengeditnya sesuka hati, saya bisa mengkliknya.
00:10:25Saya bisa klik kanan. Saya bisa mendapatkan varian tertentu.
00:10:28Saya bisa menyesuaikan berbagai varian. Saya bisa mengubahnya dari,
00:10:31saya ingin tiga varian, lima varian. Saya bisa memberikan rentang kreatif,
00:10:34instruksi, dan sebagainya.
00:10:35Saya pada dasarnya punya banyak cara berbeda untuk membuat banyak visual dari
00:10:40potensi situs web saya. Dan ini bagus karena memang sulit.
00:10:43Saat Anda berada di dalam kode Claude dan setiap kali Anda ingin melakukan perubahan visual,
00:10:46kan? Ia perlu menulis kodenya. Anda perlu menjalankan server pengembangan.
00:10:48Anda perlu memeriksanya di halaman web. Dan seringkali saat kita melakukan hal-hal ini,
00:10:52terutama dari sudut pandang desain front-end,
00:10:56saya ingin melihat pilihan di depan mata saya, kan?
00:10:58Jauh lebih mudah bagi saya untuk melihat ketiganya dan berkata, oke, saya benci ini.
00:11:02Saya benci ini. Mungkin saya suka yang ini, daripada seperti, oke tidak, kode Claude. Coba lagi.
00:11:06Tidak. Coba lagi. Tidak. Jadi ini juga gratis,
00:11:11yang mana bagus. Dan apa pun yang saya buat di sini,
00:11:13sangat mudah untuk ditransfer ke Claude Code karena jika saya mengklik yang
00:11:16saya suka, saya pergi ke 'more', saya bisa melihat kodenya.
00:11:19Saya bisa menyalin kodenya lalu membawanya ke Claude Code.
00:11:23Dan Anda bahkan bisa melakukan hal-hal seperti menyalin ke Figma.
00:11:25Anda bisa membawanya ke AI Studio juga,
00:11:27tapi jalur termudah ke Claude Code adalah dengan ekspor lalu salin ke clipboard.
00:11:31Ada sebuah MCP. Jadi Anda bisa melakukan semua ini melalui terminal Claude Code.
00:11:35Tapi sejujurnya, saya tidak begitu mengerti apa untungnya.
00:11:39Saya merasa terjun langsung ke indra visual ini cukup sepadan.
00:11:43Sekarang saya punya pembahasan mendalam tentang Stitched di Claude Code dan saya akan tautkan
00:11:46di atas jika Anda ingin melihat lebih banyak aksinya. Sekarang,
00:11:49saya sempat ragu memasukkan keahlian nomor enam dalam video ini karena saya rasa
00:11:52ini sudah sangat umum. Hampir semua orang tahu itu ada, tapi siapa tahu.
00:11:55Mungkin ini pertama kalinya seseorang melihatnya. Dan itu adalah keahlian UI UX pro max.
00:12:00Ini saya rasa adalah penerus spiritual atau seharusnya menjadi
00:12:05keahlian desain front-end Anthropic. Jadi bayangkan desain front-end Anthropic,
00:12:09keahlian desain yang benar-benar dilatih pada berbagai jenis, Anda tahu,
00:12:14konvensi untuk berbagai jenis situs web di berbagai jenis domain karena
00:12:19tidak setiap situs web harus terlihat seperti beberapa SaaS, seperti SaaS kelas B.
00:12:23Dan itulah inti dari keahlian ini.
00:12:25Ini adalah generator sistem desain yang cerdas.
00:12:27Jadi dia akan mengajukan pertanyaan kepada Anda.
00:12:29Dia akan mencari tahu tentang apa situs web Anda,
00:12:31tentang apa layanan Anda, dan kemudian mendesainnya berdasarkan fungsinya.
00:12:35Jadi dia memiliki 161 aturan penalaran spesifik industri.
00:12:39Jadi mereka benar-benar membangun hal ini.
00:12:43Anda tidak akan mendapatkan jenis sampah AI generik tanpa keahlian,
00:12:47dan Anda tidak akan mendapatkan apa yang perlahan menjadi sampah AI versi Claude Code
00:12:51dengan keahlian desain front-end.
00:12:52Ini juga dibangun dengan banyak panduan spesifik tumpukan teknologi.
00:12:55Jadi Anda tidak didorong hanya ke sesuatu seperti React dan pada akhirnya ini adalah
00:13:00keahlian yang hebat. Jika Anda sama sekali tidak tahu ke mana Anda ingin melangkah.
00:13:04Banyak hal yang telah kita bicarakan sebelumnya mengharuskan Anda memiliki gambaran
00:13:09tentang apa yang Anda inginkan, terutama jika Anda punya contoh situs web, kan?
00:13:12Saat kita melihat Skill UI, jika saya punya contoh,
00:13:15saya bisa menyalinnya dan hal yang sama dengan desain yang luar biasa.
00:13:19Seperti saya memilih dari situs-situs web yang sudah ada ini.
00:13:21Jika Anda tidak ingin menempuh rute itu,
00:13:22tapi Anda masih agak bingung harus ke mana, gunakan keahlian ini.
00:13:26Titik awal yang bagus.
00:13:28Sekarang alat nomor tujuh adalah tentang komponen dan benar-benar mematangkan detail
00:13:33halaman web kita. Dan di situlah kita menggunakan 21st.dev,
00:13:36yaitu situs web dengan jutaan komponen berbeda untuk kita pilih dan
00:13:40langsung integrasikan ke dalam situs web kita. Sebagai contoh,
00:13:43katakanlah saya mencoba mencari sesuatu untuk halaman hero kita. Nah,
00:13:46saya tinggal pergi ke bagian hero di 21st.dev dan mencari satu.
00:13:51Saya suka, katakanlah saya suka yang ini, halaman hero yang menggunakan Spline.
00:13:56Jadi ada robot yang benar-benar mengikuti kursor saya. Nah,
00:14:00daripada mencari tahu cara menggunakan Spline dan menulis kodenya,
00:14:04saya tinggal masuk ke 21st.dev.
00:14:06Saya salin prompt-nya dengan mengeklik tombol 'copy prompt' di atas sana.
00:14:09Saya pergi ke Claude Code dan menempelkannya, boom. Saya akan memilikinya, ini bagian hero saya.
00:14:14Sekarang,
00:14:15jelas bagian hero mungkin adalah hal terberat yang bisa kita impor
00:14:19ke dalam halaman web kita karena jika kita punya halaman hero dengan robot yang melihat
00:14:22ke mana-mana, seluruh situs web kita harus cocok dengan estetika itu. Untungnya,
00:14:26saya rasa Anda mendapatkan nilai terbanyak dari sesuatu seperti 21st.dev dalam hal
00:14:29komponen yang lebih kecil dan hiasan kecil seperti tombol, kan?
00:14:33Hanya fakta bahwa tombol ini memiliki cahaya kecil di atasnya.
00:14:36Saat saya menggerakkannya dibandingkan tombol standar Anda adalah sesuatu yang akan membuat
00:14:39situs web Anda terlihat lebih baik atau kartu yang memiliki, Anda tahu,
00:14:43semacam animasi pencahayaan yang mengikuti kursor saya atau semacamnya. Sekali lagi,
00:14:46ini adalah detail kecil, bayangan yang bercahaya ini.
00:14:49Ini adalah jenis hal yang meningkatkan halaman web Anda,
00:14:52membuatnya terlihat lebih premium dan membuatnya terlihat seolah Anda peduli.
00:14:56Dan Anda benar-benar berusaha. Dan jika tidak ada yang lain,
00:14:59apa yang seharusnya dilakukan adalah memberi Anda inspirasi karena tidak ada
00:15:03yang melarang Anda menyalin prompt untuk salah satu komponen ini,
00:15:07apakah itu border atau hero atau apa pun,
00:15:09dan kemudian menyesuaikannya sesuka hati dengan Claude Code.
00:15:12Ini bukan masalah segalanya atau tidak sama sekali.
00:15:14Dan saya rasa terutama bagi kita yang tidak berasal dari latar belakang
00:15:17desain web, saya tentu saja tidak, Anda tahu,
00:15:19Anda tidak tahu apa yang tidak Anda ketahui dan terpapar pada semua cara berbeda
00:15:23kita bisa membuat tombol akan membuat pikiran Anda bergerak ke arah
00:15:26yang berbeda. Dan itu membantu Anda seiring berjalannya waktu.
00:15:29Semakin sering Anda terpapar, Anda akan mengembangkan selera sendiri dan mencari tahu
00:15:32apa yang Anda suka. Tapi sebelum Anda melihat hal-hal ini,
00:15:34Anda bahkan tidak tahu apa yang Anda suka.
00:15:36Yang Anda lihat hanyalah apa yang diberikan Claude Code kepada Anda.
00:15:39Jadi sangat disarankan Anda memeriksanya, hampir semua ini gratis dan
00:15:43Anda harus mengintegrasikan setidaknya beberapa hal kecil,
00:15:46seperti cara mereka membuat tombol dan kartu ke dalam halaman web Anda berikutnya.
00:15:49Sekarang ungkapan yang terus Anda dengar berulang-ulang akhir-akhir ini adalah AI tidak punya
00:15:53selera. Nah, bagaimana jika kita memberinya selera sebagai sebuah keahlian? Nah,
00:15:56itulah yang kami coba lakukan dengan alat nomor delapan.
00:15:59Dan itu adalah repo Taste Skill.
00:16:01Dan ini adalah kumpulan keahlian yang mencoba atau berupaya memberikan
00:16:06Claude Code semacam selera, alias menjauh dari sampah AI,
00:16:11yang merupakan tema yang Anda lihat berulang kali.
00:16:13Sekarang keahlian selera ini mencakup sejumlah sub-keahlian yang berbeda seperti yang Anda lihat di sini,
00:16:17dan memiliki pengaturan yang berbeda. Jadi Anda bisa menyesuaikan seberapa, Anda tahu,
00:16:21abstrak hasilnya dibandingkan dengan generasi AI normal.
00:16:24Dan apa yang Anda lihat di sini adalah contoh dari beberapa situs web yang telah
00:16:28dibuat menggunakan keahlian ini. Dan seketika,
00:16:31Anda menyadari ini sedikit berbeda, kan? Maksud saya, ini tidak luar biasa,
00:16:36tapi langsung terasa berbeda dan berbeda itu bagus.
00:16:38Semakin sedikit ia terlihat seperti setiap template SaaS, semakin baik.
00:16:41Dan banyak di antaranya menyertakan hal-hal seperti animasi gulir dan Anda tahu,
00:16:46kita tidak melihat kotak bento berulang-ulang.
00:16:47Jadi ini semacam keahlian keren di pinggiran yang mungkin ingin Anda
00:16:52setidaknya coba dan lihat perbandingannya dengan generasi Claude Code normal Anda.
00:16:56Sekarang alat nomor sembilan akan tampak sangat sederhana bagi banyak dari Anda,
00:16:59tapi Anda akan terkejut dengan banyaknya orang yang tidak tahu bahwa Google
00:17:03Fonts itu ada.
00:17:05Google Fonts adalah repositori gratis raksasa berisi satu triliun
00:17:10font berbeda yang bisa Anda gunakan secara harfiah di semua proyek pengodean Anda.
00:17:14Anda tidak perlu menjadi budak 'Inter' atau apa pun lima font
00:17:18yang digunakan Claude Code untuk semuanya.
00:17:20Anda bisa pergi ke Google Fonts dan itu dikelompokkan berdasarkan tampilan,
00:17:24berdasarkan perasaan, Anda tahu, berdasarkan famili dan beri tahu Claude Code, gunakan ini,
00:17:29gunakan itu, Claude Code juga memiliki akses ke semua ini.
00:17:31Karena tipografi adalah bagian yang sangat,
00:17:34sangat besar dari bagaimana desain Anda terlihat dan terasa. Terlebih lagi,
00:17:38Anda bisa menggunakan Claude Code untuk membantu Anda mencari melalui Google Fonts.
00:17:42Jadi cukup beri tahu Claude Code jenis situs web yang Anda bangun,
00:17:45jenis perasaan yang Anda tuju.
00:17:47Dan ia akan memberi Anda contoh atau lima macam font untuk dilihat.
00:17:50Anda benar-benar bisa melihatnya secara real-time di sini. Sekali lagi,
00:17:53Anda tidak ingin menyerahkan semuanya pada keberuntungan dan hanya bergantung pada bagaimana
00:17:57perasaan Claude hari itu mengenai font apa yang akan ia berikan kepada Anda karena
00:18:01rasanya akan selalu Inter, selalu Inter. Dan terakhir,
00:18:05alat nomor 10, Playwright CLI.
00:18:06Sekarang Playwright CLI bukanlah alat desain semata,
00:18:10meskipun itu sesuatu yang sudah kita bicarakan di masa lalu dengan Skill UI dan
00:18:13kemampuannya untuk pergi ke luar sana dan mengambil tangkapan layar halaman web.
00:18:15Jadi Anda bisa menggunakannya sebagai semacam alat riset ideasi.
00:18:19Namun yang benar-benar ingin saya fokuskan,
00:18:21adalah gagasan tentang bentuk dan fungsi dan bahwa ketika kita membangun sesuatu di front-end,
00:18:25pikirkan sesuatu yang sesederhana halaman pengiriman formulir,
00:18:27kita harus mengujinya.
00:18:29Kita harus memastikan hal-hal ini benar-benar berfungsi.
00:18:32Dan cara termudah untuk melakukannya dalam skala besar adalah Playwright CLI, bukan Playwright MCP.
00:18:36CLI jauh lebih efektif.
00:18:38Dan cara kita melakukannya adalah setelah Anda membuat desain front-end,
00:18:41yang harus Anda lakukan setelah menginstal alat CLI adalah memberi tahu Claude Code,
00:18:44Saya ingin Anda menguji setiap interaksi di halaman web ini menggunakan Playwright CLI.
00:18:49Ia akan membuat sekumpulan instans Chrome yang berbeda.
00:18:52Anda bisa mengaturnya agar terlihat jika Anda ingin melihatnya atau tanpa tampilan (headless).
00:18:55Jadi itu tidak terlihat dan ia akan mengujinya sendiri.
00:18:57Jadi ini membuat seluruh proses desain front-end berjalan jauh lebih cepat karena saya rasa
00:19:02kita semua pernah mengalami saat kita menambahkan sesuatu lalu ingin melihatnya.
00:19:05Dan kemudian kita ingin mengujinya dan itu memakan waktu selamanya,
00:19:06terutama hal-hal seperti pengiriman formulir,
00:19:08di mana ada banyak kasus ekstrem (edge cases) dengan bagaimana pengguna aneh akan masuk
00:19:13ke sana dan benar-benar memasukkan informasi mereka.
00:19:15Jadi itu adalah 10 keahlian terkait desain Claude Code favorit saya,
00:19:20plugin, dan CLI. Saya harap setidaknya beberapa di antaranya baru bagi Anda. Maksud saya,
00:19:24Skill UI lebih baik, seperti hanya tiga orang yang tahu tentang hal ini. Jadi, eh,
00:19:29tapi ya, ruang desain front-end,
00:19:31saya rasa sangat menarik dengan Claude Code karena ia sangat buruk dalam hal itu dari sudut
00:19:36pandang selera.
00:19:37Meskipun saya benci mengatakan kata selera hari ini karena itu semua yang
00:19:40dibicarakan orang, tapi karena Claude Code buruk dalam hal itu,
00:19:42itu seharusnya menjadi hal yang baik untuk Anda, individu, kan?
00:19:46Karena itulah ruang di mana sekarang Anda bisa membedakan diri dari yang lain
00:19:50dan kapan pun Anda bisa membedakan diri dari orang lain yang ikut menggunakan
00:19:55Claude Code hari ini, itu adalah hal yang baik.
00:19:57Dan keahlian serta alat ini bisa membantu Anda melakukannya. Jadi seperti biasa,
00:20:00beri tahu saya apa pendapat Anda.
00:20:01Pastikan untuk memeriksa Chase AI Plus jika Anda ingin mengikuti kelas masternya,
00:20:04dan sampai jumpa lagi.