3 Tingkatan Desain AI... Hanya Sedikit yang Mencapai Tingkat 2
AAI LABS
Computing/SoftwarePhotography/Art
Transcript
00:00:00Jika Anda sudah lama menonton saluran ini, Anda mungkin tahu bahwa kami telah membahas banyak
00:00:03alur kerja dan alat desain. Kami telah menguji semuanya selama berbulan-bulan dan akhirnya menemukan
00:00:08alasan mengapa model yang sama bisa memberikan hasil yang tampak sangat kustom atau sesuatu yang langsung
00:00:13terkesan buatan AI. Hal ini bermuara pada tiga level. Level pertama adalah merancang satu halaman dan
00:00:19ada satu hal yang paling sering dilewati orang yang menjadi alasan utama hasil mereka terlihat generik. Level
00:00:23kedua adalah ketika Anda berhenti merancang halaman dan mulai merancang sistem, dan alur kerjanya di sini
00:00:28sangat berbeda. Dan level ketiga adalah bagaimana kami menguji desain satu sama lain untuk menemukan versi
00:00:34yang benar-benar berfungsi, yang merupakan bagian yang kami gunakan pada setiap proyek nyata sekarang. Jadi level pertama adalah tentang
00:00:39menciptakan desain yang baik untuk satu halaman. Ini adalah level yang diajarkan kebanyakan orang karena ini adalah
00:00:44fondasi dari setiap desain yang baik. Kami telah membahas dalam video sebelumnya tentang bagaimana kemampuan desain Opus 4.7
00:00:50telah menjadi jauh lebih baik dan banyak sampah AI yang biasa kita lihat telah hilang. Sebelumnya ketika kami
00:00:55memberikan perintah sederhana seperti membuat halaman landas, ia akan langsung mengambil
00:00:59tema ungu dan putih serta membangun segalanya di sekitar itu. Pola spesifik itu telah menjadi lebih baik. Namun
00:01:04sama seperti model AI lainnya, yang ini juga mengarah pada pola yang aman. Dan dari semua pengujian dan
00:01:09eksperimen kami dengannya, kami menemukan bahwa ia selalu mengarah pada satu gaya tertentu setiap saat. Jadi sekarang kapan pun
00:01:15kami melihat gaya itu, itu adalah tanda pasti bahwa situs tersebut berasal dari Opus 4.7 dan hanya tinggal menunggu waktu
00:01:21sebelum itu menjadi sampah AI berikutnya. Jadi kita memerlukan cara lain untuk membuat situs web ini terlihat lebih baik.
00:01:25Sekarang level ini sebagian besar bermuara pada rekayasa perintah dan bagaimana kita menentukan aplikasi karena
00:01:30jika Anda menyusun perintah dengan benar, Anda dapat langsung membuat aplikasi sepenuhnya dalam satu kali jalan. Perintah harus dimulai
00:01:35dengan niat dari situs web yang ingin Anda bangun, lalu sebutkan hal-hal yang tidak dapat ditawar, seperti
00:01:39hal persis yang Anda inginkan dalam aplikasi dan bagaimana Anda ingin elemen UI terlihat. Setelah itu, Anda menentukan
00:01:44sistem warna. Sekarang di sini kami menggunakan OKLCH, yang pada dasarnya adalah ukuran kecerahan, kroma, dan rona.
00:01:49Menggunakan OKLCH daripada RGB atau HSL biasa lebih baik karena merepresentasikan warna seperti cara
00:01:55mata manusia benar-benar melihatnya, sehingga ia menangani kecerahan dan keseimbangan dengan lebih baik. Ini juga menciptakan
00:01:59gradien yang lebih halus, tidak seperti kode heksadesimal yang dapat menghasilkan gradien yang tampak tidak rata. Sekarang setelah Anda
00:02:04menetapkan skema warna, Anda juga perlu menyebutkan alur kontras. Kontras adalah faktor yang sangat penting
00:02:08dalam desain UI karena sebenarnya menciptakan hierarki yang memandu mata Anda ke hal-hal yang
00:02:13penting. Tanpa kontras yang eksplisit, model memperlakukan setiap elemen sebagai sama pentingnya,
00:02:18yang membuatnya sulit untuk membentuk hierarki visual. Dan untuk memastikan situs web tidak terlihat seperti
00:02:22sampah AI, Anda juga harus mengontrol tipografi dari perintah, sehingga Anda menentukan font mana yang dilarang
00:02:27karena merupakan sampah AI dan font mana yang harus digunakan di berbagai area desain. Font seperti Inter dan Geist
00:02:33telah menjadi ciri khas sampah AI karena setiap agen mencarinya secara default, jadi menyebutkannya
00:02:38secara eksplisit memaksa model untuk mencari di tempat lain. Kemudian Anda menentukan tata letak dan ritme situs web,
00:02:42tetapi pertama-tama Anda perlu tahu tentang simetri dan asimetri. Tata letak simetris memiliki komponen
00:02:47yang ditempatkan secara merata pada grid dengan tampilan seimbang, yang lebih cocok untuk desain profesional dan
00:02:51lurus. Namun untuk tampilan yang lebih artistik, pilihlah asimetri karena itu memberi Anda lebih banyak ruang
00:02:56untuk bereksperimen. Ini sangat bagus ketika Anda perlu menggunakan ruang negatif karena itu membuat desain
00:03:01bernapas. Jenis produk yang Anda bangun menentukan mana yang lebih cocok. Kemudian tentukan semua bagian
00:03:06yang Anda inginkan, material yang akan Anda gunakan, dan bagaimana situs web harus berperilaku secara responsif. Dan bagian yang paling penting
00:03:11adalah menyebutkan pola anti. Ini adalah ciri khas sampah AI seperti CTA terpusat yang sederhana,
00:03:17ikon Lucid, dan gradien dengan desain glassmorphic. Jadi setelah Anda memberikan perintah ini ke Claude Code atau
00:03:22agen mana pun yang Anda gunakan, ia akan menganalisis aplikasi Anda dan memeriksa detail implementasinya. Kemudian ia akan
00:03:27membangun aplikasi seperti yang dijelaskan dalam perintah, dengan asimetri karena tujuan artistik dan penggunaan ruang negatif yang tepat.
00:03:34Jadi level 2 adalah tentang menjaga desain yang sama di setiap halaman situs karena sebagian besar aplikasi yang dihasilkan agen
00:03:40hancur begitu Anda meninggalkan halaman landas. Seringkali saat membuat seluruh aplikasi dengan agen, Anda mungkin
00:03:45mengalami hal ini. Halaman landas sebagian besar cukup bagus, tetapi ketika Anda pergi ke halaman lain,
00:03:50halaman tersebut tidak mengikuti gaya UI secara koheren seperti seharusnya. Dasbor akhirnya memiliki
00:03:55gaya tombol yang berbeda, jarak yang berbeda, tipografi yang berbeda, hampir seolah-olah agen lupa bahwa ia sedang membangun
00:04:00aplikasi yang sama. Halaman lainnya tampak seperti bukan bagian dari situs yang sama dan itu membocorkan
00:04:05bahwa situs tersebut dihasilkan oleh agen. Terkadang desain memang bertahan di halaman otentikasi, tetapi kemudian di
00:04:10dasbor, gayanya rusak total. Jadi untuk itu, Anda perlu membuat dua file yang paling penting,
00:04:15Claude.md dan Design.md. Kedua file inilah yang menjaga agar desain tetap konsisten di seluruh situs.
00:04:21Di Claude.md, seperti yang telah kita bahas berkali-kali, Anda hanya memasukkan informasi proyek Anda, bukan desainnya.
00:04:27Ini karena file tersebut tetap dimuat dalam sesi sepanjang waktu dan konten desain di sana hanya akan
00:04:32mendistraksi agen ketika sedang mengerjakan hal lain, tetapi itu tetap menjadi file kunci karena ia menjaga
00:04:37konteks proyek yang menginformasikan desain yang baik. Untuk desainnya sendiri, kita memerlukan file terpisah
00:04:42yang menyebutkan segalanya untuk sistem visual, tata letak, warna, tipografi, dan semua
00:04:47detail yang kita bahas di level 1. Design.md harus menjadi jenis file yang dapat diambil oleh agen apa pun dan
00:04:52langsung memahami apa sistem visualnya. Dan seperti pada level sebelumnya, Anda perlu
00:04:57mendefinisikan sistem warna dalam OKLCH di sini juga. Untuk membuat kedua file ini, kami memberikan perintah terperinci kepada Claude code
00:05:03yang mencakup apa yang dibutuhkan setiap file dan ia menghasilkan kedua file tersebut untuk kami. Claude.md berukuran pendek, hanya
00:05:09berisi detail proyek. Design.md lebih panjang dengan setiap detail, termasuk kode warna,
00:05:15pilihan tipografi, dan segala sesuatu yang lain. Tetapi itu bukanlah akhir dari design.md. Kita perlu terus
00:05:20menyempurnakannya dari waktu ke waktu. Jadi kita meletakkan satu baris di awal, menyuruh agen untuk menambahkan nilai desain baru
00:05:25yang ditemukannya ke file ini. Dengan begitu, setiap sesi dimulai dari versi sistem desain yang lebih disempurnakan
00:05:30daripada sesi sebelumnya. Namun membiarkan Claude membuat design.md saja tidak cukup,
00:05:35karena apa yang dihasilkannya tidak mengikuti praktik terbaik dengan benar. Google telah membuka sumber
00:05:40templat mereka untuk file design.md. Templat tersebut juga berisi perintah untuk memverifikasi silang design.md Anda
00:05:46terhadapnya dan menandai kesalahan apa pun. Jadi Anda dapat menyuruh agen Anda melakukan iterasi menggunakan perintah tersebut
00:05:51untuk menyempurnakan design.md. Dan ini tetap bukan akhir dari level 2. Untuk menghasilkan desain yang cukup bagus di
00:05:56level ini, Anda juga perlu meng auditnya terhadap prinsip desain yang ada. Untuk itu, ada
00:06:00banyak keterampilan sumber terbuka yang melakukan hal ini. Anda dapat menggunakan salah satu darinya, tetapi kami menggunakan keterampilan VersaLab,
00:06:06karena alih-alih mengkodekan semua prinsip secara keras di dalam keterampilan tersebut, keterampilan ini merujuk ke sumber eksternal
00:06:11yang aktif mereka kelola. Jadi prinsip-prinsip tersebut tetap mutakhir dengan praktik terbaik saat ini alih-alih
00:06:16beku pada apa pun yang menjadi yang terbaik saat keterampilan itu pertama kali ditulis. Anda menginstal keterampilan ini
00:06:21di proyek, menjalankannya, and desain Anda keluar dalam bentuk yang jauh lebih baik daripada sebelumnya. Namun sebelum kita
00:06:25melanjutkan, mari kita dengar pesan dari sponsor kita. Jadi saya baru-baru ini mulai menggunakan ZillysCloud dan izinkan saya memberi tahu Anda
00:06:30alasannya. Sebagian besar aplikasi RAG bekerja dengan baik dengan segelintir dokumen, tetapi begitu Anda memasukkan data nyata,
00:06:35mereka mulai berantakan karena penyiapannya memang tidak dirancang untuk menangani beban seperti itu.
00:06:40Milvus adalah basis data vektor sumber terbuka yang paling banyak diberi bintang di GitHub dengan lebih dari 44.000 bintang,
00:06:46dan itu dibangun untuk menangani beban seperti itu, tetapi menghosting sendiri berarti mengelola infrastruktur sendiri.
00:06:51Jadi di situlah ZillysCloud masuk, versi yang dikelola sepenuhnya dengan API yang sama yang hingga
00:06:5610 kali lebih cepat, dan Anda dapat menyiapkannya dalam hitungan menit tanpa mengubah satu baris kode pun.
00:07:00Jadi kami menjalankan kueri pencarian semantik di ZillysCloud, dan hasilnya benar-benar relevan karena ia
00:07:05memahami makna bukan hanya kata kunci, dan waktu responsnya hampir instan bahkan dengan kumpulan data yang besar.
00:07:11Kami juga menjalankan kueri rekomendasi yang diberikan satu artikel. Ia menemukan lima artikel yang paling mirip
00:07:16di seluruh kumpulan data yang diberi peringkat berdasarkan kesamaan dalam waktu kurang dari satu detik. Dan dasbor melacak kinerja kluster Anda,
00:07:21penggunaan penyimpanan, dan metrik data termasuk jumlah koleksi dan entitas secara real time. Tanpa kartu kredit
00:07:27yang diperlukan, cukup klik tautan di komentar yang disematkan dan coba ZillysCloud secara gratis.
00:07:31Jadi level tiga adalah tentang menguji desain secara terprogram, cara yang sama insinyur memverifikasi
00:07:36kode dengan TDD. Sekarang kita tahu Anda tidak dapat menulis tes secara visual seperti yang Anda lakukan dengan kode. Dengan kode,
00:07:41ada input dan output yang jelas untuk semuanya. Desain tidak memiliki itu karena lebih subjektif
00:07:46dan tidak dapat dikuantifikasi seperti kode, tetapi hanya karena itu subjektif bukan berarti kita tidak dapat menulis
00:07:51tes untuk itu. Alasan TDD bekerja untuk kode adalah bahwa tes menentukan apa perilakunya,
00:07:57dan implementasinya harus memuaskan penentuan tersebut. Gagasan yang sama berlaku untuk desain hanya dengan jenis
00:08:01penentuan yang berbeda. Dalam aplikasi yang kami bangun, langkah pertama sama seperti sebelumnya, yaitu membuat
00:08:05file clod.md dan design.md bahkan sebelum memikirkan implementasi. Sekarang tes harus selalu
00:08:12ditulis sebelum kode, dengan begitu implementasi benar-benar dapat diuji terhadapnya. Jika kita menulis tes
00:08:17setelah implementasi, agen menjadi bermalas-malasan. Ia hanya menulis kasus uji yang mengoptimalkan ke arah
00:08:22kode yang ada, karena kode tersebut sudah ada dalam konteksnya. Menulis tes terlebih dahulu memaksa
00:08:27implementasi agar sesuai dengan tes alih-alih tes yang sesuai dengan implementasi. Jadi kami menggunakan file desain
00:08:32sebagai sumber kebenaran untuk pengujian karena file-file ini berisi semua pola anti yang dapat kita
00:08:37verifikasi secara terprogram. Setiap pola anti dalam design.md menjadi kasus uji. Setiap aturan warna,
00:08:44setiap batasan spasi, setiap pilihan tipografi mendapatkan pemeriksaan terprogram. Kami memberi Claude Code
00:08:49perintah terperinci untuk menulis kasus uji yang menentukan setiap bagian yang harus difokuskannya. Juga jika Anda
00:08:54menikmati konten kami, pertimbangkan untuk menekan tombol suka karena itu membantu kami membuat lebih banyak konten seperti
00:08:59ini dan menjangkau lebih banyak orang. Dengan perintah Anda, ia akan menulis semua kasus uji untuk desain
00:09:04aplikasi tersebut. Ia menulis beberapa jenis tes. Ada tes statis, yang secara langsung memeriksa
00:09:09pola anti yang kami sebutkan dalam perintah. Lalu ada pengujian visual, yang pada dasarnya menggunakan
00:09:14playwright di bawahnya dan menjalankan pengujian regresi untuk membuat situs menjadi sedikit lebih baik. Ia juga
00:09:19akan menulis kasus uji untuk komponen lain dan fungsi pembantu seperti pindai dan laporkan. Sekarang tes ini
00:09:24memeriksa pola anti statis, tetapi pengujian desain memerlukan sesuatu yang lain. Untuk itu, ada
00:09:28alat lain bernama Visly Test, yang pada dasarnya adalah CLI yang melakukan TDD untuk UI. Cara kerjanya adalah
00:09:34bahwa ia menjalankan TDD lokal, di mana Anda dapat memeriksa desain saat kode berubah. Jadi Anda dapat memantau
00:09:39perbedaan sendiri alih-alih mengandalkan pemantauan mandiri agen. Anda juga mendapatkan perbedaan yang lebih baik dengan
00:09:44metadata dan detail lainnya, yang membuat peninjauan lebih cepat. Tanpa metadata itu, Anda hanya membandingkan dua
00:09:49tangkapan layar berdampingan dan berharap Anda melihat perbedaannya. Dengan itu, Visly memberi tahu Anda persis piksel mana
00:09:54yang berubah dan berapa banyak. Untuk menggunakannya, pertama-tama instal CLI dengan menjalankan perintah instalasi dari
00:10:00dokumentasi. Setelah diatur dan diinisialisasi, itu siap digunakan. Sekarang cukup buka Claude code dan suruh untuk menggunakan
00:10:05TDD dan mengimplementasikan bagian UI mana pun yang Anda inginkan menggunakan Visly CLI sebagai media pengujian. Ketika
00:10:10Anda menjalankan perintah Visly TDD, server lokal dimulai dan memantau perubahan tangkapan layar. Untuk mengirim
00:10:16tangkapan layar, Claude pada dasarnya menulis tes terpisah dengan nama Visly. Tes ini menggunakan mekanisme tangkapan layar
00:10:21playwright untuk mendorong gambar ke penampil di server. Dari sana, Anda dapat menyetujui atau menolak
00:10:27desain dan melihat perbedaan yang membandingkannya dengan versi sebelumnya. Setiap perbedaan yang ditolak menjadi umpan balik yang
00:10:32digunakan agen untuk menyesuaikan operan berikutnya. Selama beberapa iterasi, desain menyatu dengan apa yang sebenarnya Anda
00:10:37inginkan alih-alih apa yang dipikirkan agen yang Anda inginkan. Sekarang perintah yang digunakan di sini dapat ditemukan di AI Labs Pro
00:10:43untuk video ini dan untuk semua video kami sebelumnya dari mana Anda dapat mengunduh dan menggunakannya untuk Anda sendiri
00:10:47proyek. Jika Anda menemukan nilai dalam apa yang kami lakukan dan ingin mendukung saluran ini, ini adalah cara terbaik untuk melakukannya. Tautan
00:10:52di deskripsi. Itu membawa kita ke akhir video ini. Jika Anda ingin mendukung saluran ini
00:10:57dan membantu kami terus membuat video seperti ini, Anda dapat melakukannya dengan menggunakan tombol super thanks di bawah ini. Seperti
00:11:02biasanya, terima kasih telah menonton dan sampai jumpa di video berikutnya.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video