Keahlian Desain Claude yang Luar Biasa untuk Membangun Situs yang Indah
AAI LABS
Computing/SoftwareInternet Technology
Transcript
00:00:00Ada banyak keahlian di luar sana yang memungkinkan Anda merancang situs web yang indah dengan AI dan masing-masing
00:00:04dari mereka berbeda, tetapi tidak semuanya berfungsi. Beberapa memiliki alur kerja intensif yang tampak mengesankan
00:00:09dan pada akhirnya mereka tetap menghasilkan situs yang terlihat seperti situs lainnya. Hanya sedikit dari
00:00:13mereka yang benar-benar memberikan hasil. Sekarang Anda mungkin berpikir mengapa Anda bahkan membutuhkan keahlian ini sejak awal
00:00:17karena model sudah cukup kuat dan mereka mendesain dengan sangat baik sekarang. Tapi tidak peduli seberapa
00:00:22kuat sebuah model, setiap model mengikuti polanya sendiri saat mendesain dan pola itu mudah
00:00:26dikenali. Itulah mengapa Anda memerlukan sesuatu untuk menjauhkan mereka dari pola tersebut dan benar-benar membuat
00:00:30situs web Anda menonjol. Sekarang keahlian ini dikembangkan oleh orang-orang yang memiliki pengalaman luas dalam desain
00:00:36dan mereka telah mengemas ulang alur kerja yang telah mereka uji dan berhasil bagi mereka ke dalam bentuk yang dapat digunakan kembali agar
00:00:41Anda dapat menggunakannya juga. Jika Anda baru di sini, selamat datang. Kami adalah perusahaan perangkat lunak dan ini adalah AI Labs dan dalam
00:00:46video ini kami akan membahas keahlian yang telah kami uji yang benar-benar memberikan hasil kepada kami. Dan satu hal
00:00:51yang perlu diketahui sebelum kita mulai adalah bahwa Anda tidak perlu menambahkan keahlian ke desain Claude itu sendiri. Yang
00:00:55Anda tambahkan dalam penyiapan Claude Anda adalah sama dengan yang dapat Anda gunakan di desain Claude. Jadi Anda cukup menambahkan keahlian
00:01:00dari pengaturan Claude. Dan meskipun kami menggunakan keahlian ini di desain Claude, keahlian ini akan bekerja dengan Claude
00:01:05Code, Codex, atau agen lain yang Anda gunakan dan memberikan hasil yang sama. Yang pertama akan kita bahas
00:01:10adalah keahlian oleh Emil Kowalski. Dalam set ini ada bukan hanya satu melainkan sembilan keahlian dan masing-masing
00:01:15mengubah bagian desain yang berbeda. Ini adalah keahlian yang juga kami gunakan sendiri ketika kami mengerjakan
00:01:20desain, baik saat menggunakan Claude code maupun di desain Claude. Ada banyak keahlian di sana,
00:01:25masing-masing menargetkan area desain yang berbeda. Di antaranya ada desain Apple, yang berisi semua
00:01:30prinsip desain yang digunakan Apple dalam produknya sendiri dan membuatnya tersedia untuk digunakan di situs web lain.
00:01:35Ada juga keahlian kosakata animasi, yang pada dasarnya mengubah deskripsi animasi Anda yang samar
00:01:40menjadi kata-kata yang tepat yang dapat dipahami oleh model. Anda dapat menambahkan sebanyak mungkin keahlian yang Anda inginkan, tetapi ada dua
00:01:45di antaranya yang paling sering kami gunakan karena seberapa besar keahlian tersebut meningkatkan kemampuan desain Claude.
00:01:50Salah satunya adalah keahlian rekayasa desain email, yang berisi instruksi tentang cara membangun komponen UI yang indah
00:01:55dan menambahkan animasi ke dalamnya, menjadikannya keahlian terbaik untuk memulai desain Anda.
00:02:00Satu lagi yang kami gunakan adalah animasi dan ini berisi alur kerja lengkap untuk menambahkan animasi ke
00:02:05situs web yang sudah dibangun dengan proses langkah demi langkah yang detail. Untuk menggunakannya, Anda perlu menambahkannya ke Claude
00:02:10dan setelah ditambahkan, Anda dapat menggunakannya di dalam desain Claude. Dari sana Anda mengetik garis miring dan nama keahlian
00:02:15tersebut dan pada perintah beri tahu situs apa yang Anda inginkan. Karena kami belum membangun desainnya, kami menggunakan
00:02:20keahlian rekayasa desain Emil terlebih dahulu. Kemudian ia menarik keahlian tersebut tetapi sebelum membangun apa pun, ia menanyai Anda
00:02:25pertanyaan tentang aplikasi dengan cara yang sama seperti yang dilakukan desain Claude sendiri. Saat Anda menjawabnya, ia membangun
00:02:30desain tersebut. Versi pertama yang dibuat desain Claude terlihat minimalis dengan gaya monoton tetapi animasi yang
00:02:35dihasilkan tidak tampak begitu disempurnakan dan tidak sinkron di beberapa tempat. Jadi di sinilah keahlian animasi
00:02:40berperan karena keahlian ini benar-benar menyempurnakan animasi pada situs web yang sudah dibangun. Keahlian ini memahami cara
00:02:46situs tersebut bekerja dan menentukan apa yang memerlukan gerakan dan apa yang tidak. Setelah Claude selesai membuat
00:02:51perubahan, animasi situs tersebut sangat meningkat. Gerakannya sinkron dengan pengguliran dan semuanya
00:02:56terlihat lebih disengaja dibandingkan dengan apa yang kita miliki sebelumnya. Sekarang Anda mungkin berpikir bahwa ini tidak begitu
00:03:01berbeda dari apa yang biasanya dihasilkan Claude tetapi itu karena ini adalah halaman landas. Meskipun memang
00:03:06meningkatkan animasi yang sangat kecil dan halus di sini, gaya animasi utama yang terlihat bagus di halaman landas
00:03:11adalah animasi berbasis gulir tersebut dan kami telah membahas banyak keahlian tentang itu di video sebelumnya.
00:03:16Namun tempat di mana keahlian ini benar-benar berfungsi dengan baik adalah pada elemen kecil dari sisi fungsional
00:03:21aplikasi. Sebagai contoh, kami sedang mengerjakan situs untuk sebuah restoran dan kami menggunakan keahlian animasi untuk menambahkan
00:03:26animasi ke dalamnya dan ia menambahkan animasi kecil yang meningkatkan pengalaman menggunakan situs ini seperti menambahkan animasi
00:03:32saat kami mengirimkan formulir dan grafik yang muncul saat kursor diarahkan. Semua detail tersebut secara bersama-sama membuat
00:03:37situs terasa jauh lebih interaktif dan membuat pengalaman menggunakannya menjadi lebih baik. Dan Anda dapat menambahkan
00:03:42sebanyak mungkin keahlian Emil yang Anda inginkan karena semuanya akan menjadi tambahan yang signifikan untuk perangkat desain Anda.
00:03:47Sekarang yang berikutnya yang akan kita bahas adalah keahlian taman Conard Lee dan ini juga merupakan
00:03:52koleksi daripada satu keahlian tunggal. Ada lima keahlian di dalamnya yang mencakup hal-hal seperti presentasi video
00:03:57dan gambar tetapi yang paling penting di antaranya adalah keahlian insinyur desain web
00:04:02dan ini karena keahlian ini sebenarnya berisi instruksi tentang cara mendesain seperti insinyur desain tingkat atas.
00:04:07Keahlian ini semata-mata berfokus pada membuat visual menjadi memukau, bukan fungsional. Cara kerja keahlian
00:04:12ini adalah ia mengambil kebutuhan Anda dan membahasnya bersama Anda sampai jelas mengenai apa yang Anda
00:04:17inginkan dan kemudian ia mencari desain nyata untuk dikerjakan. Prinsipnya adalah bahwa desain yang bagus tidak pernah dimulai
00:04:22dari udara kosong, sama seperti bagaimana setiap desain di luar sana terinspirasi oleh sesuatu yang datang sebelumnya. Ia
00:04:27juga mendasarkan dirinya pada desain yang telah berhasil sebelumnya. Keahlian ini juga berisi seperangkat
00:04:32referensi yang mencakup berbagai area terkait desain. Referensi tersebut mencakup cara menilai desain, cara desain biasanya salah,
00:04:38dan resep gaya untuk situs terkenal seperti Apple dan Linear sehingga ia dapat melihat bagaimana situs tersebut benar-benar bekerja saat ia membangun situs Anda.
00:04:44bekerja sambil membangun milik Anda. Jadi begitu Anda menambahkannya di Claude Design, Anda dapat menggunakannya dengan memberikan sebuah perintah
00:04:49yang menjelaskan apa yang ingin Anda buat. Situs yang kita hasilkan jauh lebih menarik daripada yang biasanya dikeluarkan oleh Claude Design
00:04:55sendiri. Hasilnya lebih teliti dan dari perspektif desain lebih baik daripada versi yang dibuat Claude Design secara mandiri.
00:05:01Dan jika Anda sudah memiliki desain lalu menjalankan keahlian tersebut, ia akan meninjau desain tersebut dan memberinya skor di berbagai area.
00:05:08Anda dapat terus menyempurnakan desain dan menjalankannya berulang-ulang hingga mencapai skor sempurna dan cocok
00:05:13dengan desain yang benar-benar Anda inginkan. Namun sebelum kita menjelajahi keahlian lain, alangkah baiknya jika Anda berlangganan saluran ini
00:05:18dan menekan tombol suka. Gestur dukungan kecil ini sangat berarti bagi kami.
00:05:22Keahlian berikutnya yang akan kita bahas adalah keahlian desain AI oleh Elia Design dan kali ini ini hanyalah satu keahlian tunggal yang dibuat untuk halaman landas.
00:05:30Semua yang dilakukannya berada dalam satu file dan tugasnya adalah mengambil ide Anda dan mengubahnya menjadi sistem visual yang pada dasarnya adalah seperangkat aturan
00:05:37yang kemudian diikuti oleh segala sesuatu di halaman dan ini mencakup warna, jenis huruf, dan jarak.
00:05:41Keahlian ini adalah sistem lengkap khusus untuk merancang halaman landas yang benar-benar bernilai.
00:05:46Pemikiran di baliknya adalah bahwa halaman landas bukanlah halaman utama. Halaman utama mencoba melayani banyak orang yang berbeda sekaligus.
00:05:53Tetapi halaman landas memiliki satu tugas dan itu adalah membuat orang benar-benar mengambil tindakan.
00:05:57Model cenderung menghasilkan halaman utama yang berfungsi tetapi mereka tidak khusus dalam merancang halaman landas seperti keahlian ini.
00:06:03Jadi ia menyusun halaman di sekitar satu tindakan yang ingin Anda ambil oleh seseorang yang mengunjungi situs Anda sehingga ia memusatkan perhatian pada tindakan tersebut dengan menyusun situs Anda di sekitarnya.
00:06:12Ia juga menjaga desain tetap pada gaya visual yang konsisten dan ia juga mengatasi area desain web lain yang diabaikan oleh sebagian besar model termasuk memastikan situs web dapat dengan mudah ditemukan melalui pencarian.
00:06:22Jadi begitu Anda menginstalnya di keahlian Claude, Anda menjalankannya dengan perintah setiap kali Anda menginginkan desain.
00:06:27Ia juga menanyai Anda pertanyaan terlebih dahulu dan begitu Anda menjawabnya, ia mulai merancang.
00:06:31Situs yang dibuatnya terasa seperti merek nyata dan cocok dengan suasana persis yang kami tuju.
00:06:36Dan cara setiap elemen disusun membuatnya jauh lebih mungkin bahwa siapa pun yang masuk ke situs akan benar-benar melakukan pembelian.
00:06:43Namun pertama-tama mari kita dengar pesan dari sponsor kita.
00:06:45Make. Anda sudah mengenal Make untuk Automasi Visual tetapi mereka baru saja meluncurkan Maya.
00:06:49Ini adalah rekan kerja AI yang tinggal tepat di dalam pembuat Make.
00:06:52Sebagian besar pembuat AI memberi Anda kotak hitam dan Anda hanya berharap itu berfungsi.
00:06:56Maya berbeda. Anda memberitahunya apa yang Anda inginkan dalam bahasa Inggris biasa dan ia membangunnya tepat di depan Anda.
00:07:00Jadi kami mencobanya. Kami meminta Maya untuk mengirimkan ringkasan Slack kepada tim kami setiap kali prospek baru masuk ke Salesforce dan itu langsung menuju ke kanvas.
00:07:07Maya bernalar melalui permintaan tersebut, memilih alat yang tepat, memetakan setiap modul, dan merangkai seluruh automasi bersama-sama di kanvas sementara kami menonton.
00:07:15Anda melihat setiap keputusan sehingga Anda dapat masuk dan menyesuaikan apa saja, kapan saja.
00:07:19Sepanjang jalan Anda tidak hanya mendapatkan automasi, Anda mempelajari cara Make benar-benar bekerja.
00:07:23Ini gratis untuk dicoba dalam versi beta sekarang. Tautan ada di deskripsi.
00:07:26Keahlian berikutnya yang akan kita bahas adalah oleh Meng To.
00:07:29Ia sebenarnya adalah seorang perancang yang telah berada di industri ini untuk waktu yang lama dan dikenal karena desain penceritaan berbasis gulir yang imersif.
00:07:36Dan ia telah mengambil segala sesuatu yang ia temukan dan mengemasnya ke dalam sistem keahlian desain sehingga Anda dapat menggunakannya juga.
00:07:41Ini berisi banyak keahlian di dalamnya yang mencakup berbagai area.
00:07:44Semuanya berfokus pada menghasilkan desain berkualitas tinggi yang benar-benar menceritakan sebuah kisah alih-alih hanya tampak bagus secara visual.
00:07:51Salah satunya adalah video ke super prompt yang bekerja dengan mengambil rekaman layar atau panduan situs web dan menggunakan alat pada mesin Anda untuk mengubah rekaman itu menjadi prompt untuk agen Anda.
00:08:01Namun keahlian yang benar-benar ingin kita bicarakan adalah situs berkualitas penghargaan.
00:08:05Awards adalah situs yang mengadakan kompetisi untuk desain yang memukau dan situs yang menang di sana diakui sebagai situs dengan desain terbaik di web.
00:08:12Keahlian ini benar-benar mencantumkan prinsip dan detail desain yang terkandung dalam situs tingkat penghargaan.
00:08:17Dan itu penting karena Claude tidak membangun desain pada tingkat itu dengan sendirinya.
00:08:21Jadi keahlian tersebut memasukkan prinsip-prinsip tersebut ke dalam proses dan mengarahkan arah desain.
00:08:25Dan apa yang membedakannya adalah bahwa di samping prinsip-prinsip tersebut, set ini membawa teknik aktual dan efek spesifik yang membuat situs terlihat mahal, yang merupakan bagian yang tidak akan dihasilkan oleh model dengan sendirinya.
00:08:35Begitu Anda menambahkan keahlian penghargaan, Anda memberinya perintah yang menjelaskan situs yang Anda inginkan.
00:08:40Dan yang dihasilkan adalah situs yang terstruktur dan dirancang dengan cara yang sama seperti situs-situs pemenang penghargaan.
00:08:45Ada latar belakang animasi halus di dalamnya, tetapi hal yang paling menonjol adalah penggulirannya.
00:08:49Situs ini menggunakan pendekatan penceritaan berbasis pengguliran, persis seperti situs web yang Anda lihat di Awwwards.
00:08:54Kumpulan keterampilan berikutnya adalah karya Jakub Krehel.
00:08:57Dan tidak seperti yang lain, di mana satu keterampilan menangani setiap bagian situs sekaligus, yang ini membaginya menjadi beberapa keterampilan.
00:09:05Semua elemen yang menjadi bagian dari desain, termasuk tipografi, warna, aksesibilitas, dan banyak lagi, masing-masing memiliki keterampilan terpisah.
00:09:13Anda dapat menambahkan keterampilan apa pun ke Claude Design, tetapi yang kami gunakan adalah keterampilan peninjauan.
00:09:18Kami menggunakannya karena dapat meninjau secara menyeluruh semua aspek desain sehingga kami dapat melakukan iterasi berdasarkan skor yang diberikan.
00:09:24Keterampilan peninjauan ini bekerja lebih baik jika Anda menghubungkannya ke GitHub karena alat ini memeriksa tampilan desain sebelum dan sesudah perubahan.
00:09:31Jika sesuatu berfungsi sebelum perubahan terakhir Anda dan tidak lagi berfungsi, alat ini akan menandainya dan memberi tahu Anda penyebabnya.
00:09:40Alat ini memeriksa hal-hal seperti animasi, aksesibilitas, dan tampilan situs pada berbagai ukuran layar, lalu mencatat semuanya agar dapat Anda perbaiki.
00:09:48Kami juga menggunakan keterampilan tata letak yang lebih baik karena di sinilah Claude Design benar-benar mengalami kesulitan.
00:09:52Keterampilan ini menangani jarak, penempatan, dan kesejajaran elemen di seluruh desain secara menyeluruh.
00:09:58Sebagai contoh, alat ini mendapati bahwa tanggal pada halaman memerlukan lebih banyak ruang dan bahkan memberi tahu jumlah piksel tambahan yang dibutuhkan.
00:10:04Jadi, Anda tinggal menyuruhnya memperbaiki semua tanda yang diberikan.
00:10:06Situs tidak akan terlihat jauh berbeda, tetapi akan disesuaikan dengan prinsip-prinsip desain yang benar-benar digunakan oleh para profesional.
00:10:14Keterampilan berikutnya dalam daftar adalah Tastemaker.
00:10:16Tujuan utamanya adalah menghindari standar generik yang dihasilkan model, dan pembedanya terletak pada cara melakukannya.
00:10:22Keterampilan ini bekerja langsung dari piksel referensi nyata, sehingga tidak ada yang hilang saat mengubah tampilan menjadi kata-kata.
00:10:28Saat Anda memberikan gambar referensi kepada model, model biasanya mengubahnya menjadi ringkasan berbasis teks untuk referensi nanti.
00:10:34Namun, keterampilan ini menggunakan skrip untuk mengekstrak detail desain yang tepat dan menyimpannya dalam format terstruktur untuk agen.
00:10:42Ini mempertahankan detail desain yang biasanya akan hilang dalam ringkasan berbasis teks.
00:10:46Keterampilan ini mengandalkan skrip untuk menangani banyak hal yang dapat diselesaikan tanpa agen harus mengerjakannya sendiri.
00:10:52Sebagai contoh, alat ini mendorong berbagai arah dan mencoba berbagai variasi.
00:10:55Keputusan yang diambil diterapkan di seluruh proyek alih-alih berhenti pada satu layar saja.
00:10:59Keterampilan ini memberikan cita rasa desain kepada model agar tidak kembali ke pola generik yang sama.
00:11:05Jadi, setelah menambahkannya, Anda dapat menjalankannya dengan cara yang sama menggunakan perintah garis miring dan teks perintah.
00:11:09Kami memberikan situs yang diinginkan beserta persyaratan gaya dari sebelumnya dan membiarkannya memproses semuanya.
00:11:14Hasilnya adalah situs yang tampak sangat mengesankan tanpa gaya generik dan sesuai dengan tampilan serta nuansa situs yang diminta.
00:11:22Kumpulan terakhir adalah salah satu koleksi populer, dan pembedanya adalah koleksi ini didasarkan pada riset nyata.
00:11:28Berdasarkan hukum baku yang digunakan oleh para perancang, dengan keterampilan terpisah untuk masing-masing hukum.
00:11:33Beberapa keterampilannya membahas alasan pengunjung meninggalkan situs web Anda dan bagaimana perilaku mereka saat menelusuri situs.
00:11:39Dan Anda tidak perlu menginstal semuanya.
00:11:41Anda cukup menginstal keterampilan yang sesuai dengan cara kerja Anda.
00:11:44Untuk pengaturan kami, kami menambahkan dua.
00:11:45Yang pertama adalah kritik layar, yang menganalisis layar dari berbagai sudut pandang berbeda.
00:11:50Lalu menunjukkan letak kesalahan layar tersebut berdasarkan pedoman yang tepat untuk menilai kualitas desain.
00:11:56Yang kedua adalah hukum persepsi, yang berisi panduan tentang bagaimana mata manusia melihat dan memahami desain itu sendiri.
00:12:03Jadi, setelah desain selesai, Anda menjalankan peninjauan dan alat ini akan menampilkan kesalahan seperti elemen yang paling menonjol.
00:12:09Jenis huruf serta jarak, lalu mendaftarkan semuanya agar dapat Anda perbaiki.
00:12:12Dan setelah hukum persepsi diterapkan pada situs, semuanya terasa jauh lebih sempurna.
00:12:17Itulah keterampilan yang tersedia di GitHub untuk Anda gunakan.
00:12:20Namun, kami juga menggunakan keterampilan lain yang kami buat dan sempurnakan sendiri melalui pengujian saat membangun produk.
00:12:26Jika Anda ingin mengaksesnya, Anda bisa mendapatkannya di AI Labs Pro, komunitas kami.
00:12:31Ini adalah keterampilan yang mencakup beberapa buatan kami sendiri dan beberapa bersumber terbuka.
00:12:36Jadi, jika Anda menyukai konten kami dan ingin mendukung saluran ini, inilah cara terbaik untuk melakukannya.
00:12:41Tautan tersedia di deskripsi.
00:12:42Sampai di sini akhir video kali ini.
00:12:44Jika Anda ingin mendukung saluran ini agar terus membuat video seperti ini, Anda dapat menggunakan tombol Super Thanks di bawah.
00:12:50Seperti biasa, terima kasih sudah menonton dan sampai jumpa di video berikutnya.