Transcript
00:00:00Setiap orang memiliki akses ke model AI yang sama, tetapi tidak ada yang membangun proses di sekitarnya.
00:00:05Anda mungkin pernah mendengar ungkapan bahwa model tidak lagi penting, harness-lah yang penting.
00:00:09Harness pada dasarnya adalah proses yang Anda bangun agar diikuti oleh model AI Anda.
00:00:13Tapi inilah hal yang perlu Anda pahami.
00:00:14Model terus berkembang, jadi harness yang Anda bangun tiga bulan lalu sudah usang.
00:00:19Pada saat rekaman ini dibuat, model terbaik yang ada adalah Fable 5, model unggulan Anthropic,
00:00:24tetapi jangan khawatir, kami akan memandu Anda melalui berbagai cara untuk memastikan harness Anda
00:00:27terus berkembang untuk model apa pun di luar sana.
00:00:30Jadi, Anthropic sebenarnya memiliki keahlian resmi untuk desain front-end,
00:00:34dan alasan keberadaannya adalah masalah yang mereka namai sendiri.
00:00:37Yang terjadi adalah model cenderung menuju ke versi desain yang paling aman dan paling rata-rata
00:00:42yang Anda minta.
00:00:43Mereka menyebutnya konvergensi pada distribusi, yang pada dasarnya berarti ia membangun hal
00:00:47yang sudah pernah dilihatnya ribuan kali sebelumnya.
00:00:49Sekarang, dengan seberapa kuat model-model terbaru ini diiklankan, Anda mungkin berpikir ini bukan
00:00:53masalah lagi, tapi bukan itu yang saya temukan.
00:00:56Contohnya, dalam prompt ini, kami hanya memintanya untuk membuat halaman landing untuk situs web perkebunan.
00:01:01Untuk mengarahkannya ke arah yang benar, kami menyuruhnya untuk sekreatif mungkin dan tidak terlalu
00:01:06fokus pada kontennya sendiri.
00:01:07Kami juga secara eksplisit menyuruhnya untuk tidak memuat keahlian apa pun karena kami memiliki banyak keahlian yang tersedia
00:01:13di sistem kami dan kami ingin memastikan ia tidak memanfaatkannya.
00:01:16Inilah yang akhirnya ia buat.
00:01:18Sekarang desainnya sama sekali tidak buruk, tetapi jelas bukan yang terbaik.
00:01:22Sebagai contoh, ada beberapa masalah kontras dan beberapa gambar tidak dimuat dengan benar.
00:01:26Tetapi ketika kami menggunakan keahlian di sini, segalanya berubah cukup banyak.
00:01:29Sekarang tidak ada yang istimewa dalam keahlian ini.
00:01:31Tidak ada referensi atau sumber daya eksternal apa pun.
00:01:34Ini benar-benar hanya sebuah prompt.
00:01:35Dengan menggunakan itu saja, ia menghasilkan desain yang jauh lebih baik.
00:01:37Desainnya jauh lebih dipoles dan estetis.
00:01:41Ini mencakup animasi halus dan perhatian yang jauh lebih mendetail.
00:01:45Secara keseluruhan, hasilnya jauh lebih baik daripada apa yang biasanya dihasilkan model itu sendiri.
00:01:49Dengan setiap model baru, perusahaan AI ini merilis panduan prompting baru bagi orang yang menggunakan API model tersebut.
00:01:55Dan menggunakan panduan Fable 5, kami memodifikasi keahlian desain.
00:01:58Anda bisa saja menyalin prompt desain tujuan umum dan panduan prompting tersebut.
00:02:02Tempel keduanya ke dalam Claude, beri tahu ia bahwa Anda memiliki panduan prompting untuk model tersebut
00:02:06dan minta ia untuk membuat versi terbaru berdasarkan panduan tersebut.
00:02:09Ia menganalisis prompt dan memberi Anda versi yang ditulis ulang untuk model baru.
00:02:12Dan Anda benar-benar bisa melihat situs baru ini terlihat jauh lebih baik.
00:02:15Strukturnya jauh lebih baik dan ia mengubah semua elemen yang berbeda menjadi kartu.
00:02:19Kami pikir itu terlihat jauh lebih kreatif daripada apa yang biasanya dikeluarkan Claude karena detail kecil
00:02:24seperti bagaimana bagian CTA diubah menjadi surat kartu pos dengan prangko di atasnya.
00:02:29Detail-detail kecil inilah yang membuatnya terlihat jauh lebih kreatif.
00:02:32Sekarang, ada alasan lain perusahaan-perusahaan ini mengeluarkan panduan prompting.
00:02:35Seringkali, model memiliki masalah perilaku dan panduan tersebut memberi tahu Anda cara memperbaikinya.
00:02:39Ketika Opus 4.8 diluncurkan, Anthropic menunjukkan bahwa model cenderung menggunakan gaya desain tertentu.
00:02:45Perbaikan mereka adalah meminta model untuk memberikan beberapa alternatif desain terlebih dahulu, lalu biarkan Anda memilih arah mana yang akan diambil.
00:02:51Tetapi ketika Fable 5 keluar, masalah ini tidak disebutkan lagi dalam panduan prompting-nya.
00:02:56Dan dari apa yang kami lihat, model tersebut masih kembali ke gaya yang sama.
00:02:59Itu tidak terjadi setiap saat.
00:03:01Tetapi dari pengujian kami, sekitar dua dari tiga situs yang dihasilkan masih berakhir dengan gaya yang sangat mirip.
00:03:07Jadi itu tidak pernah benar-benar diperbaiki.
00:03:08Itulah mengapa ada baiknya juga melihat dokumen untuk model sebelumnya.
00:03:11Anda akan sering menemukan hal-hal berguna yang tidak masuk ke panduan terbaru.
00:03:15Jadi, menggunakan panduan prompt untuk Opus 4.8, kami beralih ke keahlian desain yang berbeda
00:03:20yang benar-benar menanyakan jenis arah desain apa yang kami inginkan.
00:03:23Berdasarkan itu, ia menghasilkan desain ini.
00:03:25Ini terlihat bagus juga.
00:03:26Tapi jujur saja, pendekatan yang lebih baik adalah menggunakan file design.md di sini.
00:03:30File-file ini berisi bahasa merek yang Anda letakkan di halaman Anda.
00:03:33Get design.md adalah sumber yang sangat bagus di mana Anda bisa mendapatkan file dari banyak merek.
00:03:38Tapi bahkan begitu, gunakan setelah model selesai menghasilkan halaman landing.
00:03:42Dan ini khusus untuk halaman landing karena jika Anda benar-benar melihat ke dalam file design.md,
00:03:47mereka mengunci semuanya, langsung ke jenis hurufnya.
00:03:50Dan seperti yang Anda lihat dalam contoh-contohnya, font adalah bagian besar dari apa yang membuat situs-situs itu terlihat jauh lebih kreatif.
00:03:55Ada dua tingkat dalam hal menambahkan animasi.
00:03:58UI pemasaran dan UI fungsional.
00:04:00Menggunakan keahlian desain pada UI fungsional seperti dasbor akan membuatnya terlihat cantik,
00:04:05tetapi orang-orang tidak akan benar-benar bisa menggunakannya.
00:04:07Jadi untuk menambahkan animasi, kami menggunakan dua hal.
00:04:10Untuk halaman pemasaran, keahlian ini sudah memberi tahu model untuk menambahkan animasi berbasis CSS,
00:04:15tetapi animasi GSAP jauh lebih baik.
00:04:17Di sinilah langkah lain dari panduan prompting ikut berperan.
00:04:20Upaya adalah tuas utama yang mengendalikan model sekarang.
00:04:22Untuk tugas sederhana, Anda bisa menjaganya dari rendah hingga sedang,
00:04:25tetapi untuk tugas seperti menambahkan animasi, menggunakan X-High adalah pilihan yang jauh lebih baik,
00:04:30dan akan memberi Anda lebih sedikit percobaan ulang.
00:04:32Dalam keahlian UI pemasaran kami, ada aturan yang menentukan kapan GSAP harus digunakan.
00:04:36Setiap kali kondisi itu dipicu, ia secara otomatis memuat keahlian GSAP juga.
00:04:41Kami sebenarnya menggunakan pengaturan itu pada halaman landing yang sama seperti yang ditunjukkan di sini.
00:04:44Bahkan dengan perencanaan terbatas dari pihak kami, ia melakukan pekerjaan yang sangat baik.
00:04:48Ia berhasil menempatkan di mana animasi layar diputar di dalam kartu pos,
00:04:52dan musim-musim bertransisi satu demi satu.
00:04:55Ini contoh yang bagus tentang bagaimana keahlian khusus ini dapat menangani banyak detail implementasi
00:04:59secara otomatis.
00:05:00Kami telah mencapai sistem keahlian ini melalui banyak percobaan dan kesalahan.
00:05:03Dan dengan itu, maksud saya berulang kali mencapai batas penggunaan 5 jam.
00:05:07Jika Anda ingin melewatkan semua itu, Anda bisa mendapatkannya dari Community AI Labs Pro kami.
00:05:11Tautannya akan ada di deskripsi.
00:05:12Jadi, seperti yang sudah kami sebutkan, ada dua jenis UI.
00:05:15Seluruh alur kerja di balik UI fungsional benar-benar berbeda dari UI pemasaran.
00:05:20Sebagai contoh, perencanaan adalah langkah pertama, dan itu sangat penting.
00:05:23Kami tidak akan membahasnya secara mendalam dalam video ini, tetapi setelah rencana Anda siap,
00:05:27Anda bisa memberikannya ke Claude.
00:05:27Setelah itu, daripada memintanya membangun aplikasi, Anda harus memintanya membangun mockup menggunakan HTML.
00:05:33Proses kami dimulai dengan design.md.
00:05:36Jika Anda sudah memutuskan design.md mana yang ingin Anda gunakan, itu bagus.
00:05:40Jika Anda tidak memilikinya, tidak apa-apa juga.
00:05:42Anda bisa melanjutkan tanpa itu.
00:05:43Sebagai contoh, jika Anda melihat komunitas yang kami bangun khusus,
00:05:45Anda akan segera menyadari bahwa desain di luar dan desain di dalam benar-benar
00:05:50berbeda.
00:05:51Dalam kasus kami, semuanya direncanakan menggunakan mockup HTML terlebih dahulu.
00:05:54Kami mulai dengan membuat design.md, yang sebagian terinspirasi oleh Notion.
00:05:58Menggunakan sistem desain itu, kami membangun semua layar sebagai mockup sebelum menulis aplikasi yang sebenarnya.
00:06:04Setelah kami menyelesaikan dan memvalidasi mockup tersebut, kami mengubahnya menjadi aplikasi yang berfungsi penuh ini.
00:06:09Sekarang, sebelum kita beralih ke bagian terpenting dalam mendesain UI fungsional, mari dengarkan
00:06:13sepatah kata dari sponsor kami.
00:06:14Banyak orang yang menggunakan Claude Code baru-baru ini menyadari biaya mereka melonjak drastis.
00:06:18Sejujurnya, itulah mengapa Kimi menarik perhatian saya.
00:06:20Mereka membangun model sumber terbuka yang sangat bagus dalam pengodean dengan harga sekitar 1/8 dari harga Opus.
00:06:26Model terbaru mereka, Kimi K2.6, baru saja menempati posisi nomor satu di Sweebench Pro,
00:06:30pada dasarnya tolok ukur pengodean dunia nyata yang paling sulit saat ini.
00:06:33Mereka tidak hanya merilis modelnya, mereka membangun produk di atas K2.6 yang benar-benar berguna.
00:06:38Anda dapat menghasilkan situs web siap produksi dengan desain front-end yang bagus,
00:06:41membuat slide deck lengkap dari satu prompt, dan bahkan menangani basis data serta autentikasi langsung.
00:06:47Tapi fitur yang paling gila mungkin adalah Agent Swarm.
00:06:49Anda dapat menjalankan 300 agen AI secara paralel dalam satu tugas.
00:06:53Daripada satu agen menangani semuanya secara perlahan, Anda mendapatkan seluruh tim AI yang bekerja secara bersamaan.
00:06:58Dan semua ini berjalan pada model sumber terbuka yang biayanya jauh lebih murah daripada alternatif
00:07:03sumber tertutup yang selama ini dibayar orang.
00:07:05Jadi, jika Anda menggunakan Claude Code atau Cursor setiap hari dan tagihan API Anda semakin menyakitkan
00:07:09Kimi layak untuk dicoba.
00:07:11Jika Anda mendaftar melalui tautan kami, Anda juga akan mendapatkan bonus kuota tambahan 10% pada pembelian pertama Anda
00:07:16sebelum 30 Juni. Klik tautan di deskripsi dan mulai membangun.
00:07:19Sekarang, ada bagian lain yang sangat penting dalam mendesain UI fungsional, yaitu eksperimen.
00:07:24Seiring waktu, kami telah mencoba banyak pendekatan berbeda untuk memecahkan masalah ini.
00:07:28Awalnya, kami menggunakan daftar tugas dengan beberapa agen yang bekerja secara paralel,
00:07:32di mana setiap agen akan menghasilkan variasi UI yang berbeda.
00:07:35Tujuannya adalah untuk bereksperimen dengan berbagai desain dan mencari tahu pendekatan mana yang benar-benar berhasil.
00:07:40Kemudian, kami mulai menggunakan sub-agen untuk alur kerja ini, tetapi itu tidak masalah lagi.
00:07:45Dengan satu juta token konteks, Anda bisa melakukannya dengan agen utama juga.
00:07:48Kami juga membangun sesuatu secara internal yang disebut Gallery Viewer.
00:07:51Tujuan dari Gallery Viewer sederhana.
00:07:53Ketika Anda menghasilkan beberapa mockup HTML, mereka tidak seharusnya tersesat di antara lusinan file.
00:07:58Sebaliknya, mereka secara otomatis dibuka bersama dalam satu tampilan, membuatnya mudah untuk dibandingkan
00:08:03berdampingan. Misalnya, saat kami membangun platform komunitas, kami awalnya tidak tahu
00:08:08seperti apa ruang interaksi komunitas seharusnya. Kami tahu kami menginginkan pengalaman komunitas,
00:08:12tetapi ada banyak cara berbeda bagi pengguna untuk berinteraksi satu sama lain. Jadi daripada berkomitmen
00:08:17pada satu desain, kami bereksperimen menggunakan mockup HTML. Kami menugaskan agen untuk membuat beberapa
00:08:22UI saluran komunitas sebagai mockup HTML, agar kami dapat membandingkannya. Agen kemudian akan membuat beberapa
00:08:28versi secara otomatis dan membukanya di dalam Gallery Viewer. Dari sana, kami dapat membandingkan setiap
00:08:33variasi dan memutuskan arah mana yang paling kuat. Satu hal yang akan Anda perhatikan dalam contoh ini
00:08:37adalah bahwa desainnya tidak semuanya terlihat konsisten secara visual. Idealnya, mereka harus berbagi desain yang sama
00:08:42bahasa sambil menjelajahi pola interaksi yang berbeda. Alasan itu tidak terjadi di sini adalah
00:08:46karena tidak ada design.md yang disediakan. Ketika design.md ada, model menggunakannya sebagai sumber kebenaran untuk
00:08:53warna, spasi, tipografi, komponen, dan gaya keseluruhan. Jadi semua mockup yang dihasilkan tetap
00:08:59konsisten secara visual sambil tetap menjelajahi pendekatan UX yang berbeda. Ada juga beberapa detail kecil yang
00:09:04bisa membuat perbedaan besar, seperti menambahkan animasi ke UI fungsional. Kami telah mendokumentasikan serangkaian animasi
00:09:10panduan dalam keahlian kami sendiri dan Anda dipersilakan untuk menyalinnya jika Anda mau. Pedoman itu telah bekerja cukup baik bagi kami sejauh
00:09:15ini dan kami terus menyempurnakannya. Satu hal yang saya sangat sarankan, bagaimanapun, adalah untuk tidak berlebihan
00:09:20dengan animasi di bagian fungsional aplikasi Anda. Animasi yang berlebihan mungkin terlihat mengesankan pada
00:09:25awalnya, tetapi mereka sering membuat antarmuka yang berfokus pada produktivitas terasa lebih mengganggu. Setelah Anda
00:09:29menyelesaikan desain, langkah berikutnya adalah menggunakan keahlian ShadCN. Saya telah menghubungkan UI fungsional
00:09:35keahlian ke keahlian ShadCN, jadi ia menangani sebagian besar alur kerja secara otomatis. Sebelumnya, kami memiliki jauh lebih
00:09:40alur kerja yang rumit. Kami akan membuat rencana implementasi terperinci khusus untuk ShadCN
00:09:45MCP dan kami akan menggunakan rencana itu untuk membangun seluruh antarmuka. Meskipun pendekatan itu berhasil, ia juga
00:09:50menambah banyak kompleksitas. Saat ini, alur kerjanya jauh lebih sederhana. Yang Anda butuhkan hanyalah akhir
00:09:55mockup HTML dan keahlian ShadCN. Alasan ini bekerja dengan sangat baik adalah karena keahlian ShadCN sudah berisi
00:10:01sejumlah besar konteks dan pengetahuan implementasi yang dikemas oleh pencipta ShadCN sendiri.
00:10:06Karena itu, ia dapat mengambil mockup HTML akhir dan mereproduksinya hampir satu-ke-satu menggunakan
00:10:11komponen ShadCN yang sebenarnya. Jadi pada tahap ini, Anda tidak perlu khawatir tentang membuat yang rumit
00:10:16rencana implementasi atau alur kerja konversi. Jika Anda menyukai proses desain ini, berlanggananlah ke
00:10:21saluran dan klik tombol hype juga. Kami memposting konten yang membantu Anda mempelajari cara baru untuk mengoptimalkan
00:10:26proses yang berbeda dalam bisnis yang berbeda dengan AI. Dukungan Anda di sini akan sangat berarti bagi kami.
00:10:31Panduan ini juga meminta Anda untuk membuat verifikasi mandiri secara eksplisit untuk model-model ini. Anda bisa memasukkan prompt di
00:10:36Claude.md yang meminta agen untuk memverifikasi output-nya. Sekarang, daripada menggunakan agen utama,
00:10:41Anda harus menggunakan sub-agen yang dapat memverifikasi output. Dan untuk memverifikasinya, Anda memerlukan sesuatu
00:10:46yang dapat Anda bandingkan. Untuk itu, selalu arahkan sub-agen ke design.md Anda.
00:10:50Hal lain yang disebutkan dalam panduan ini adalah bahwa model berkinerja lebih baik ketika mereka memiliki konteks tentang
00:10:55tugas Anda. Untuk desain, ini berarti memiliki pengetahuan tentang apa produk itu sebenarnya.
00:10:59Sekarang, banyak kerangka kerja telah menyiapkan product.md yang terpisah, tetapi menurut pendapat kami,
00:11:03ketika Anda menyiapkan Claude.md, itu memiliki konteks yang cukup bagi model untuk memahami tentang apa
00:11:09proyek Anda. Jadi apa yang dilakukan keahlian UI fungsional adalah setiap kali mendapatkan tugas baru,
00:11:13ia membuat model membaca Claude.md juga. Selain itu, ia juga berisi folder mox
00:11:18yang memiliki semua file HTML sehingga Anda dapat merujuknya kapan pun Anda menambahkan elemen baru ke
00:11:24aplikasi Anda. Selain itu, akan sangat bagus jika Anda memiliki design.md juga. Ini adalah file-file
00:11:28yang Anda perlu miliki dalam proyek Anda. Saat ini, banyak aplikasi SaaS dapat dengan mudah dikloning.
00:11:32Kami sendiri menggunakan perangkat lunak yang dibangun khusus untuk manajemen tim. Kami telah membangun versi kami sendiri karena
00:11:37kami tidak harus menampung banyak orang. Dalam kasus itu, Anda tidak benar-benar harus membuatnya dari awal.
00:11:42Anda hanya perlu memastikan Anda mengkloning UI mereka sesempurna mungkin. Dengan model yang lebih baru,
00:11:46kemampuan mereka untuk memahami gambar telah menjadi jauh lebih baik, jadi alur kerja di sini menjadi sangat mudah.
00:11:51Dalam pengkloningan, ada dua mode berbeda. Mode B adalah untuk UI pemasaran. Untuk ini,
00:11:56ada alat CLI yang sangat berguna yang disebut single-file CLI. Menggunakannya, Anda dapat menangkap segala sesuatu di halaman,
00:12:01termasuk HTML, CSS, dan bahkan gambar yang digunakan di situs web itu. Jika situs berisi beberapa halaman,
00:12:07Anda juga dapat mengambil file sitemap.xml-nya, yang pada dasarnya adalah peta situs web. Menggunakan peta situs itu,
00:12:13model dapat menemukan dan mengambil halaman lain juga. Masalah dimulai ketika Anda menemukan halaman yang berada di
00:12:19belakang autentikasi. Misalnya, jika Anda ingin mengkloning UI Notion, Anda tidak bisa begitu saja mengarahkan
00:12:23alat ke situs web Notion. Saat Anda memberikan URL Notion, Anda hanya akan mendapatkan halaman landing.
00:12:28Yang sebenarnya Anda inginkan adalah antarmuka aplikasi di belakang layar login. Untungnya, model telah
00:12:34menjadi sangat baik dalam memahami antarmuka dari gambar, jadi dalam situasi tersebut, tangkapan layar adalah
00:12:40pilihan terbaik. Anda harus menangkap berbagai status antarmuka dengan sangat hati-hati. Mari kita ambil
00:12:45halaman yang terbuka, Anda akan menginginkan tangkapan layar yang menunjukkan apa yang terjadi saat diarahkan kursor dan bagaimana interaksi yang berbeda memengaruhi tata letak.
00:12:50Mari kita ambil contoh lain. Misalkan Anda membuka halaman di mana dua halaman berada dalam satu kolom. Jika Anda hanya memberikan ini,
00:12:56model tidak akan tahu bahwa Anda dapat membuat dua kolom. Anda perlu sangat teliti dan memberikan semua
00:13:01konteks yang dibutuhkan model. Setelah Anda mengambil tangkapan layar, jangan tempel gambar langsung ke dalam prompt. Sebaliknya,
00:13:07seret ke dalam Claude. Ini memberi sistem akses ke jalur gambar yang dapat digunakan Mode A. Mode A akan
00:13:13kemudian mengumpulkan semua tangkapan layar itu, menempatkannya di dalam folder clone dan menggunakannya sebagai bahan referensi.
00:13:19Tangkapan layar tersebut secara efektif menjadi dasar untuk proses pengkloningan. Dari sana, Anda dapat menghasilkan
00:13:25versi HTML awal dari antarmuka dan kemudian beralih ke membangun aplikasi akhir.
00:13:29Itu membawa kita ke akhir video ini. Jika Anda ingin mendukung saluran dan membantu kami terus membuat video
00:13:35seperti ini, Anda bisa melakukannya dengan menggunakan tombol super thanks di bawah. Seperti biasa, terima kasih telah
00:13:39menonton dan saya akan melihat Anda di video berikutnya.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video