Keahlian Desain Claude Luar Biasa yang Anda Butuhkan untuk Membangun Website yang Menawan
AAI LABS
컴퓨터/소프트웨어창업/스타트업AI/미래기술
스크립트
00:00:00Ada satu hal yang sering salah dipahami orang.
00:00:01Model AI semakin mahir dalam desain dan kita melihat peningkatannya setiap hari.
00:00:05Namun pada titik tertentu, semua desain bagus itu mulai terlihat mirip.
00:00:08Jadi pertanyaannya, apa yang membuat desainmu benar-benar menonjol?
00:00:12Sebagian besar hal itu bergantung pada prompt dan instruksi yang tepat.
00:00:15Di sinilah peran skill, karena kini yang benar-benar berfungsi dapat dikemas
00:00:19menjadi alur kerja dapat digunakan ulang yang bisa kamu bagikan ke siapa saja.
00:00:21Jadi banyak orang telah membangun skill untuk desain dan beberapa yang terbaik berasal
00:00:25langsung dari tim di balik alat-alat tersebut.
00:00:27Namun tidak semua skill yang ada layak digunakan dan banyak yang tidak terlalu membantu
00:00:31untuk desainmu.
00:00:32Sebagai konteks, kami adalah perusahaan perangkat lunak dan ini adalah saluran kami AI Labs, dan di saluran
00:00:37ini kami menunjukkan cara mengoptimalkan proses dengan AI seperti halnya kami mengoptimalkan proses kami sendiri.
00:00:41Sebelum kita membahas beberapa skill yang lebih kreatif, mari kita mulai dengan yang menjadi
00:00:46dasar dari banyak skill desain lainnya.
00:00:48Skill desain front-end Anthropic adalah yang membentuk arah desain situsmu
00:00:53dan kami juga telah menggunakannya di video sebelumnya.
00:00:55Setelah kamu menghasilkan cukup banyak halaman landing dengan AI, kamu mulai menyadari pola di mana
00:01:00situs-situs tersebut berbeda tetapi entah mengapa terasa sama.
00:01:03Itu karena model belajar dari data dalam jumlah besar yang penuh dengan pola yang sama.
00:01:07Jadi setiap kali harus membuat keputusan desain, ia memilih yang paling umum.
00:01:11Sehingga desainnya terus bergeser ke pilihan generik yang aman tanpa mempedulikan apa
00:01:16sebenarnya proyek tersebut.
00:01:17Dan itulah masalah utama yang diselesaikan oleh skill ini.
00:01:19Skill ini keluar dari pilihan aman tersebut dengan memaksa model berkomitmen pada arah desain yang nyata sebelum
00:01:24ia menulis apa pun.
00:01:25Daripada menggunakan tampilan umum yang aman secara default, model harus memilih satu arah dan konsisten
00:01:30dengannya.
00:01:30Skill ini bahkan secara langsung menyebutkan sampah AI yang biasa muncul di dalam file skill.md, yang pada dasarnya
00:01:36merupakan lembar instruksi skill, sehingga model berhenti menggunakan font yang itu-itu saja dan
00:01:41gradien ungu pada latar belakang putih.
00:01:42Dan itu jauh lebih penting dari yang terdengar.
00:01:44Karena ketika kebanyakan model membuat halaman landing, mereka mengoptimalkan agar terlihat benar.
00:01:48Namun skill ini justru mendorong mereka untuk berkomitmen pada arah desain.
00:01:52Jadi kami terutama menggunakannya pada halaman landing atau portofolio di mana desain itu sendiri merupakan bagian
00:01:56dari produk, karena skill ini memberi model sudut pandang yang lebih kuat sebelum memulai.
00:02:00Untuk mengujinya, kami memintanya membuat halaman landing dan memberikan persyaratan kami.
00:02:03Dan ia menghasilkan situs tanpa sampah AI biasa karena ia tetap berpegang pada arah desain
00:02:08yang telah dipilihnya alih-alih melenceng ke pengaturan default biasa.
00:02:11Dalam sistem desain AI labs, kami memiliki dua skill, masing-masing dibuat untuk tugas yang berbeda.
00:02:15Ada skill fungsional yang membangun UI yang benar-benar harus digunakan orang, seperti dasbor.
00:02:20Dan ada pula skill untuk UI pemasaran.
00:02:22Di dalam skill pemasaran, file skill.md menggunakan prompt yang disebut “break the default”.
00:02:27Dan itu pada dasarnya adalah skill desain front-end Anthropic.
00:02:29Hanya sedikit dimodifikasi.
00:02:31Kami memodifikasinya karena versi aslinya sudah agak ketinggalan zaman untuk model-model yang lebih baru.
00:02:35Opus 4.8 dan Fable 5 keduanya dirilis dengan panduan prompt yang menunjukkan bagaimana Claude berubah
00:02:40dan bagaimana instruksi yang kamu berikan juga perlu diubah.
00:02:42Jadi kami memasukkan versi tersebut ke dalam sistem desain kami sendiri.
00:02:45Seperti yang telah kami sebutkan, skill desain Anthropic tidak bekerja dengan baik pada UI fungsional.
00:02:50Begitu kamu membangun produk nyata, masalahnya akan berubah sepenuhnya.
00:02:53Kamu tidak lagi hanya mencoba membuat sesuatu terlihat bagus.
00:02:55Kamu mencoba membangun sesuatu yang berfungsi sebagai produk
00:02:58dengan banyak komponen yang semuanya harus berperilaku dengan benar.
00:03:01Di sinilah segala sesuatunya beralih dari halaman landing ke aplikasi nyata.
00:03:04Contohnya, di AI Labs Pro, kamu dapat melihat bahwa halaman landing memiliki bahasa desain yang jauh lebih artistik
00:03:09berbeda dengan lapisan fungsional komunitas yang terlihat sangat membosankan
00:03:14dan biasa saja seperti antarmuka web lain yang pernah kamu gunakan.
00:03:18Dan di sinilah ShadCN berperan.
00:03:20Model tentu saja dapat membangun dasbor sendiri.
00:03:23Namun setiap komponen yang biasa digunakan dalam dasbor sudah ada,
00:03:27dibangun dengan standar profesional oleh orang-orang nyata.
00:03:29Jadi model tidak perlu menghasilkan komponen dari awal dan mengonfigurasi animasi sendiri.
00:03:34Ia dapat langsung mengambil komponen yang sudah ada di registri,
00:03:38yang pada dasarnya adalah pustaka besar komponen siap pakai.
00:03:41Itulah inti dari ShadCN.
00:03:43Daripada model merakit setiap komponen secara manual,
00:03:46ia tinggal mengambil dari pustaka bagian yang sudah berstandar profesional dan menggunakannya di aplikasimu.
00:03:51Dan itulah mengapa hasilnya terasa seperti produk nyata.
00:03:53Karena kamu tidak mulai dari draf kasar pertama lalu perlahan memperbaikinya.
00:03:57Kamu mulai dari komponen yang memang sudah siap untuk diluncurkan.
00:03:59Pengaturan ShadCN memiliki dua bagian yang bekerja sama.
00:04:02Bagian pertama adalah skill.
00:04:03Bayangkan ini sebagai buku aturan.
00:04:05ShadCN memiliki cara spesifik dan benar dalam membangun sesuatu, dan skill ini memuat semua aturan tersebut.
00:04:10Selain itu, skill ini melihat bagaimana projekmu sendiri disiapkan.
00:04:12Jadi ketika kamu meminta model untuk membangun sesuatu,
00:04:15skill tersebut memastikan hasilnya mengikuti aturan ShadCN dan sesuai dengan cara kerja projekmu.
00:04:20Manfaatnya sederhana.
00:04:21Kamu mendapatkan hasil yang bersih sejak awal alih-alih harus kembali dan memperbaiki kesalahan yang sama berulang kali.
00:04:26Yang kedua adalah MCP ShadCN.
00:04:29Ini pada dasarnya adalah koneksi langsung ke registri ShadCN
00:04:32yang memungkinkan model menelusuri dan menarik komponen nyata langsung ke dalam projekmu.
00:04:36Sekarang kamu mungkin berpikir,
00:04:37mengapa harus menggunakan skill jika MCP sudah ada dan memberikan komponen yang kamu butuhkan?
00:04:41Jawabannya adalah skill hanya dimuat saat benar-benar diperlukan,
00:04:44bukan berada di jendela konteks sepanjang waktu seperti halnya MCP.
00:04:48Skill ShadCN memberikan aturan kepada agen pengodean,
00:04:50pola, serta konteks tentang projekmu.
00:04:53Bersama-sama, hal itu memberikan pertimbangan untuk menggunakan komponen secara benar.
00:04:56Dengan aplikasi normal, kamu membangunnya satu komponen pada satu waktu dan pendekatan itu bekerja dengan baik.
00:05:00Jadi kamu mungkin berharap cara itu langsung diterapkan pada dasbor.
00:05:03Dan sebagian memang begitu.
00:05:04Namun dasbor memiliki masalah inti yang berbeda dari aplikasi normal.
00:05:07Masalahnya bukan lagi tentang menjaga konsistensi komponen, melainkan bagaimana semua informasi diatur
00:05:12di layar.
00:05:12Artinya, kita harus memikirkan cara mengelompokkan data dan seberapa banyak yang bisa dimuat dalam satu layar sebelum terlalu sesak.
00:05:17Jadi ada skill terpisah bernama dasbor yang dibuat khusus untuk itu.
00:05:21Bukan oleh ShadCN, melainkan oleh pengembang lain.
00:05:23Dan skill itu memfokuskan model tepat pada penataan tersebut.
00:05:26Dan karena model menalar penataan tersebut terlebih dahulu, hasilnya benar-benar terasa seperti
00:05:30alat analitik sungguhan alih-alih tampak berantakan.
00:05:33UIUX Pro Max bekerja secara berbeda dari semua yang ada sejauh ini.
00:05:36Sebagian besar skill memberikan beberapa prinsip desain kepada model dan mempercayakannya untuk menerapkannya.
00:05:40Namun skill ini menjalankan mesin nyata terlebih dahulu.
00:05:43Masalah yang dipecahkannya adalah bahwa bahkan dengan arahan yang baik dan kumpulan komponen yang solid,
00:05:47model tetap harus memutuskan pilihan desain seperti apa yang cocok untuk produkmu.
00:05:51Kebanyakan skill memperlakukan desain sebagai satu gagasan umum tentang keindahan.
00:05:54Sehingga semuanya bergeser ke tampilan yang sama terlepas dari apa yang sedang kamu bangun.
00:05:58Dan itulah celah yang ditutup oleh skill ini.
00:06:00Ketika kamu memintanya membangun sesuatu, ia tidak langsung melompat ke kode.
00:06:03Ia menjalankan mesin terlebih dahulu.
00:06:04Di balik layar, mesin ini memicu lima pencarian sekaligus di seluruh basis data sumber
00:06:09terbukanya sendiri di GitHub.
00:06:11Ia menarik gaya yang sesuai dengan produkmu dari 161 kategori industri.
00:06:15Dan dari pilihan tersebut, ia memilih palet warna, pasangan font, dan tata letak halaman yang benar-benar
00:06:20sesuai dengan industri yang sedang kamu bangun.
00:06:22Lalu ia menyaring hal-hal yang tidak cocok untuk jenis produk tersebut dan memberikan
00:06:26model sistem desain yang disesuaikan, yang pada dasarnya adalah buku aturan lengkap yang diikuti model untuk
00:06:31membangun situs web.
00:06:32Jadi, Anda mendapatkan situs web yang benar-benar kuat di mana ia mencocokkan setiap atribut desain dengan ide situs web Anda.
00:06:37Alih-alih model menciptakan desain dan berharap itu berhasil, ia membangun dari
00:06:41desain yang benar-benar dipikirkan untuk kasus penggunaan Anda yang sebenarnya.
00:06:44Keterampilan ini sangat berbeda dari yang lain.
00:06:46Yang lain memberikan selera yang lebih baik pada model, sementara yang ini memberikan keputusan sebelum mulai,
00:06:50yang disesuaikan dengan jenis produk yang sedang Anda buat.
00:06:53Namun sebelum kita lanjut, mari kita dengar sepatah kata dari sponsor kita, SciSpace.
00:06:56Jika Anda melakukan penelitian apa pun, Anda mungkin pernah menggunakan ChatGPT untuk itu.
00:07:00Masalahnya adalah, ia dengan percaya diri mengarang kutipan dan makalah yang bahkan tidak ada,
00:07:04dan Anda biasanya tidak menyadarinya sampai kutipan palsu itu sudah ada di dalam makalah Anda.
00:07:08SciSpace memperbaiki hal tersebut, dan kini ia ada di dalam ChatGPT.
00:07:12Untuk mengujinya, saya membuka SciSpace, menavigasi ke profil saya, dan memilih aplikasi ChatGPT dari sana untuk
00:07:17menghubungkan SciSpace.
00:07:18Saya meminta tinjauan literatur, dan ChatGPT menarik studi yang relevan dari pustaka SciSpace yang berisi lebih dari 280
00:07:24juta makalah nyata.
00:07:25Ia juga merangkumnya dan memberi saya kutipan nyata yang dapat diklik alih-alih berhalusinasi.
00:07:30Dan setiap kutipan ditautkan langsung kembali ke sumbernya.
00:07:33Sehingga Anda dapat membuka makalah tersebut dan memeriksa baris persisnya sendiri dalam satu klik.
00:07:37Dalam uji head-to-head, ia bahkan memunculkan lebih banyak makalah yang relevan daripada alat seperti Elicit dan ConsenSys.
00:07:42Jadi, jika Anda seorang pelajar atau peneliti, hubungkan aplikasi SciSpace di dalam ChatGPT menggunakan tautan pertama
00:07:48di deskripsi dan mulailah mendapatkan penelitian yang akhirnya dapat Anda percayai.
00:07:52Sejauh ini, semua yang kita tambahkan membuat situs terlihat pas saat diam.
00:07:56Tetapi halaman statis hanya membawa Anda sampai di situ saja.
00:07:58Animasi sebenarnya penting karena meningkatkan pengalaman pengguna dan meningkatkan durasi
00:08:04orang bertahan di situs web. Namun masalahnya adalah, animasi adalah bagian di mana kode buatan AI berantakan.
00:08:09Masalah sebenarnya adalah ketika Anda meminta model untuk menambahkan animasi, ia hampir selalu melakukan hal yang persis
00:08:15sama yaitu elemen meluncur ke layar saat Anda menggulir ke bawah halaman. Satu gerakan gulir itu pada dasarnya
00:08:20adalah satu-satunya trik yang ia tahu. Tetapi itu juga animasi yang sama pada separuh situs buatan AI di luar sana,
00:08:25dan itu jauh dari apa yang bisa dilakukan oleh gerakan nyata.
00:08:27Di sinilah keterampilan GSAP berperan. GSAP adalah pustaka animasi yang digunakan oleh banyak situs profesional
00:08:32dan keterampilan ini berasal langsung dari tim yang membangunnya. Jadi alih-alih model
00:08:37menebak cara kerjanya, ia bekerja dari pola yang benar, dan mencakup segalanya mulai dari
00:08:42gerakan dasar hingga animasi yang lebih besar yang dimainkan saat Anda menggulir ke bawah halaman. Ia juga menangani
00:08:47sisi performa, yang merupakan bagian yang paling diremehkan orang. Alasan besar mengapa animasi AI terasa
00:08:52tersendat-sendat adalah karena model menggerakkan sesuatu dengan mengubah ukuran atau posisi mereka, dan perubahan tersebut memaksa
00:08:57browser membangun ulang seluruh halaman pada setiap bingkai. Jadi keterampilan ini mengarahkan model menuju
00:09:02jenis gerakan yang dapat ditangani browser dengan mudah, dan satu kebiasaan itulah yang menjaga animasi
00:09:07tetap mulus. GSAP berada dalam kondisi terbaiknya pada halaman landas dan penceritaan berbasis gulir, di mana semuanya
00:09:12diungkapkan seperti sebuah cerita, sehingga detail penting sampai kepada pemirsa, dan itulah yang membawa
00:09:16situs web Anda dari halaman statis menjadi dinamis. Inilah mengapa dalam sistem desain AI Labs, kami secara eksplisit
00:09:22menyebutkan dalam keterampilan UI pemasaran bahwa setiap kali animasi diperlukan, ia harus menggunakan keterampilan GSAP
00:09:27untuk menerapkan animasi tersebut di halaman landas. Kelompok keterampilan berikutnya ini bukan untuk sistem penuh.
00:09:33Ini adalah preset gaya yang Anda masukkan untuk mendorong model ke satu tampilan pilihan spesifik Anda.
00:09:38Pertama ada UI minimalis. Ini adalah jenis desain di mana alih-alih menjejali terlalu banyak hal ke halaman,
00:09:43Anda menjaga semuanya tetap sederhana dan terbuka. Ini adalah pilihan yang Anda gunakan untuk surat kabar atau situs blog di mana Anda ingin
00:09:49kontennya bernapas alih-alih semuanya berebut perhatian. Di sisi yang sangat berlawanan ada
00:09:54keterampilan UI brutalist industrial yang tampil mentah dan berat dengan gaya anti-korporat tersebut. Lalu ada
00:09:59UI UX front-end, pilihan serba guna umum untuk standar yang solid ketika Anda tidak menginginkan sesuatu yang ekstrem. Ini adalah
00:10:05pilihan aman untuk produk atau halaman landas bisnis yang hanya perlu terlihat bersih dan profesional. Dan kemudian
00:10:10ada keterampilan UI front-end premium yang membuat situs terlihat seperti halaman landas merek fesyen mewah tersebut.
00:10:16Jadi Anda tidak menumpuk semua ini sekaligus. Alih-alih, Anda memilih yang sesuai dengan gaya yang Anda inginkan
00:10:21dan biarkan itu mengarahkan desain. Jadi jika Anda sudah memiliki arah di kepala Anda, ini adalah cara tercepat
00:10:25untuk menyerahkannya langsung ke model. Pada titik ini Anda dapat membangun situs yang terstruktur dengan baik,
00:10:30bergerak dengan baik, dan memiliki gaya yang nyata. Tetapi situs web tingkat profesional membutuhkan lebih dari sekadar animasi. Untuk
00:10:36aplikasi profesional, Anda memerlukan visual gambar dan video yang nyata. Model dengan sendirinya kebanyakan hanya mengambil gambar stok
00:10:41dari internet dan sebagian besar waktu gambar tersebut tidak benar-benar cocok dengan apa yang Anda butuhkan. Higgsfield adalah
00:10:46apa yang kita gunakan untuk melewati hal tersebut. Alat ini menyambungkan pembuatan gambar dan video langsung ke agen Anda sehingga Anda dapat meminta
00:10:51gambar pahlawan atau klip latar belakang tepat di tempat Anda bekerja tanpa harus meninggalkan terminal.
00:10:56Dan Higgsfield tidak terikat pada satu model. Alat ini memiliki sebagian besar model gambar dan video yang bagus jadi Anda tidak
00:11:01terjebak dengan keunggulan hanya satu model dan Anda dapat menggunakan mana pun yang cocok untuk Anda. Jika Anda membuat video,
00:11:06Cdance adalah yang layak digunakan karena merupakan salah satu model pembuatan video terbaik saat ini sehingga Anda mendapatkan
00:11:12visual nyata alih-alih teks statis atau kotak placeholder abu-abu di situs web Anda. Keterampilan sebelumnya
00:11:17semuanya untuk web. Sekarang kita akan membahas keterampilan seluler di mana banyak UI buatan AI secara diam-diam
00:11:23berantakan karena alasan sederhana. Model cenderung memperlakukan ponsel seperti situs web kecil, mengambil kebiasaan web yang sama
00:11:29dan memperkecilnya. Tetapi seluler bukanlah web yang lebih kecil. Ponsel memiliki aturannya sendiri. Cara
00:11:35orang memegang ponsel di mana ibu jari mereka benar-benar dapat menjangkau, bagaimana navigasi harus bekerja, semuanya berbeda
00:11:40dan setiap platform memiliki bahasa desainnya sendiri yang biasanya tidak diikuti dengan benar oleh model. Ada
00:11:45beberapa keterampilan untuk mengoptimalkan pengembangan seluler juga. Yang pertama adalah desain UI aplikasi seluler, lapisan prinsip.
00:11:51Sendirian, model memperlakukan aturan desain seluler yang baik dengan cukup longgar tetapi keterampilan ini
00:11:56menanamkannya secara langsung. Itu mencakup hal-hal seperti zona ibu jari yang menjaga tombol utama di tempat
00:12:01yang dapat dijangkau oleh ibu jari Anda beserta jarak yang konsisten dan sekumpulan ukuran font terbatas yang bersih alih-alih 10
00:12:06ukuran berbeda. Dan ini pada dasarnya adalah aturan yang sama di balik aplikasi populer seperti Airbnb, Duolingo,
00:12:11dan Spotify. Jadi model akhirnya mendesain dengan pemahaman tersebut alih-alih menebak-nebaknya. Yang kedua adalah
00:12:16Material 3 yang pada dasarnya adalah versi seluler dari apa yang dilakukan Shad CN untuk web. Ini memberi model
00:12:21sistem desain Google yang sebenarnya, yang ada di balik sebagian besar aplikasi Android dan Pixel. Bahasa desain Google memiliki kepribadian
00:12:27yang nyata. Desain ini berani dan penuh warna dengan bentuk bulat besar dan gerakan kenyal yang berada di ujung
00:12:33yang lebih ekspresif dari desain seluler. Keterampilan ini menghadirkan seluruh sistem komponen dan warna sehingga Anda memberikannya
00:12:38satu warna dan ia membangun tema pencocokan yang lengkap. Ia bahkan memeriksa seberapa dekat aplikasi Anda mengikuti panduan
00:12:43Google sehingga aplikasi yang Anda bangun cocok persis dengan sistem desain tersebut. Tetapi jika Anda membangun sepenuhnya
00:12:48secara native di iPhone, Anda dapat menggunakan keterampilan Swift UI. Desain Apple berada di ujung yang berlawanan dari Google.
00:12:53Di mana Material berani dan penuh warna, Apple lebih tertahan dan mengandalkan tampilan tembus pandang,
00:12:58seperti kaca yang sekarang disebut liquid glass. Keterampilan ini menarik dokumentasi Apple sendiri langsung dari
00:13:04Xcode di Mac Anda dan menyerahkannya kepada model sebagai aturan. Jadi model tidak menebak-nebak bagaimana rasanya sebuah aplikasi
00:13:09Apple, ia bekerja dari panduan aktual Apple. Dan alih-alih sesuatu yang hanya
00:13:14tampak mirip aplikasi iPhone secara kasar, Anda benar-benar mendapatkan yang terasa native. Dan jika Anda membangun untuk
00:13:18iPhone dan Android secara bersamaan, ada keterampilan Expo resmi. Expo adalah kerangka kerja untuk
00:13:23membuat satu aplikasi yang berjalan di Android dan iOS. Jadi Anda tidak perlu membangun aplikasi yang sama dua kali. Ini mencakup
00:13:29semua yang Anda perlukan untuk aplikasi nyata yang berjalan di keduanya, dari navigasi dan tata gaya hingga fitur platform
00:13:34semuanya di satu tempat. Jadi apakah Anda membangun untuk satu platform atau keduanya sekaligus, ada keterampilan
00:13:39yang benar-benar memahami wilayah tersebut. Sekarang semua keterampilan dan alur kerja serta hal lain yang kami bangun dan
00:13:43tunjukkan kepada Anda dalam video ini dapat ditemukan di AI Labs Pro, yang merupakan komunitas kami. Di sanalah Anda akan
00:13:48mendapatkan sumber daya, paket pemula, dan banyak lagi beserta tempat untuk berinteraksi dengan sekelompok orang yang berpikiran sama,
00:13:53termasuk tim kami. Jadi jika Anda menemukan nilai dari apa yang kami lakukan dan ingin mendukung saluran ini,
00:13:58ini adalah cara terbaik untuk melakukannya. Tautannya ada di deskripsi. Itu membawa kita ke akhir video ini.
00:14:02Jika Anda ingin mendukung saluran ini dan membantu kami terus membuat video seperti ini, Anda dapat melakukannya dengan
00:14:07menggunakan tombol super thanks di bawah. Seperti biasa, terima kasih telah menonton dan sampai jumpa di video berikutnya.