Rilis Facebook Baru Saja Memberikan Claude Code Sistem Desain Baru
AAI LABS
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Sekarang Meta baru saja melakukan sesuatu yang besar. Mereka merilis sistem desain mereka sendiri. Dan ini bukan sembarang
00:00:04sistem desain karena memiliki dua hal yang tidak akan Anda temukan di tempat lain. Yang pertama adalah ini
00:00:09adalah sistem milik Meta sendiri, sistem yang tepat yang telah dibangun dan disempurnakan oleh teknisi mereka selama delapan tahun dan masih
00:00:14dijalankan di aplikasi mereka. Jadi, sistem ini sudah terbukti skalanya, bukan sekadar eksperimen baru.
00:00:19Yang kedua adalah yang lebih besar. Ini adalah sistem desain pertama yang benar-benar dibuat untuk agen AI
00:00:23agar bisa membaca dan membangun sesuatu, bukan hanya untuk manusia. Semuanya diatur agar agen dapat
00:00:28memahami seluruh sistem dan menggunakannya secara langsung alih-alih menebak-nebak seperti yang
00:00:32biasanya dilakukan. Sekarang jika Anda tidak mengenal kami, kami adalah perusahaan perangkat lunak dan ini adalah saluran kami, AI Labs,
00:00:37tempat kami menunjukkan kepada Anda cara mengoptimalkan proses dengan AI, persis seperti cara kami mengoptimalkan proses kami sendiri. Dan di video
00:00:42ini, kami akan membahas rilis baru Meta secara mendetail, bagaimana sistem ini benar-benar mengutamakan agen, dan
00:00:47keterampilan yang kami bangun untuk mendapatkan jauh lebih banyak manfaat darinya daripada yang diberikannya kepada Anda.
00:00:51Sebelum kita masuk ke tampilan sistem ini, mari kita bahas secara singkat apa itu Asterix. Jadi, Asterix pada dasarnya adalah sistem internal
00:00:57Meta untuk membangun situs, dan mereka baru saja menjadikannya open source. Gaya Meta adalah profesional dan
00:01:02minimalis. Ini adalah pendekatan desain yang sama yang muncul di seluruh produk Meta sendiri. Jadi, minimalis dipadukan
00:01:08dengan desain tingkat merek dan pemikiran sistem. Dengan begitu, setiap bagian situs mengikuti aturan yang sama
00:01:13dan saling cocok. Sistem ini sepenuhnya dapat disesuaikan, sehingga siapa pun yang menggunakannya dapat mengubahnya dengan warna merek mereka sendiri dan
00:01:19menjadikan sistem Meta milik mereka sendiri. Sistem ini dibangun dengan React dan Stylex, yang pada dasarnya adalah dua alat paling populer
00:01:24yang digunakan orang untuk membangun front-end situs. Dan ini adalah pustaka komponen yang mirip dengan ShadCN,
00:01:30di mana ShadCN memberi kita komponen siap pakai yang bisa langsung kita masukkan ke aplikasi kita. Asterix memberi kita lebih dari
00:01:35150 komponen bergaya Meta yang dapat kita ubah sesuai kebutuhan. Sistem ini juga dirancang agar agen dapat menggunakannya dengan mudah.
00:01:41Sistem ini dilengkapi dengan templat siap pakai untuk halaman yang paling sering muncul, seperti halaman login, pengaturan,
00:01:47dan obrolan, dan agen dapat menariknya langsung sebagai titik awal. Anda bahkan dapat menggunakan
00:01:51playground untuk melihat bagaimana perubahan Anda terlihat. Playground menampilkan kode di satu sisi dalam panel yang dapat diedit, dan perubahan
00:01:57apa pun yang Anda buat di sana akan langsung muncul di panel di sebelah kanan. Playground juga merupakan tempat Anda dapat
00:02:01menjelajahi tema Asterix. Masing-masing memiliki gaya, warna, dan font sendiri yang cocok untuk jenis
00:02:07situs web yang berbeda, dan Anda dapat melihat pratinjaunya langsung di sana untuk melihat mana yang Anda inginkan tanpa benar-benar menerapkannya
00:02:11ke proyek Anda. Karena masih dalam versi beta, para teknisi di Meta secara aktif memperbarui dan meningkatkannya.
00:02:17Mereka membangunnya berdasarkan 8 tahun pengalaman mendesain sistem di perusahaan tersebut, dan sistem ini sudah
00:02:22mendukung sejumlah besar aplikasi yang telah mereka luncurkan. Prinsip utama di balik pustaka ini adalah panduan
00:02:27daripada penegakan, jadi alih-alih menambahkan batasan yang menghentikan agen untuk melakukan hal-hal tertentu, sistem ini hanya
00:02:32memberikan komponen yang dapat mereka gunakan secara langsung. Panduan ini tidak ada dalam prompt, tetapi ada dalam dokumentasi dan
00:02:37contoh, karena setiap konvensi yang diperlukan untuk membangun dengan Asterix didokumentasikan, hingga ke setiap aturan dan
00:02:42detail. Jadi Asterix dibangun agar manusia dan agen AI dapat bekerja dengannya tanpa terjebak. Dan
00:02:47karena teknisi Meta membangun dan memeliharanya, segala sesuatu dalam sistem desain ini diuji dan
00:02:52terbukti dalam praktiknya, bukan berdasarkan asumsi tentang bagaimana seharusnya sesuatu bekerja. Sekarang setelah kita tahu apa
00:02:57itu Asterix, langkah selanjutnya adalah memasukkannya ke dalam proyek. Instalasi cukup mudah. Anda akan menemukan
00:03:02langkah-langkahnya di GitHub, di mana Anda menyalin perintah instalasi untuk manajer paket yang Anda gunakan.
00:03:07Manajer paket pada dasarnya adalah alat yang menginstal dan mengelola pustaka kode proyek Anda.
00:03:12Kami membangun proyek kami dengan npm, jadi kami menyalin perintah itu, membuka folder proyek kami, dan menempelkannya
00:03:17di sana. Setelah perintah itu berjalan, sistem menginstal inti dan tema Asterix. Anda dapat menukar tema
00:03:23ini dengan salah satu yang kita lihat sebelumnya, dan karena kami menyukai tema netral untuk apa yang sedang kami bangun,
00:03:27itulah yang kami instal. Selain tema, perintah ini juga menginstal CLI dan menambahkan
00:03:32Asterix sebagai dependensi proyek, sehingga komponen pustaka dapat digunakan di aplikasi. CLI bertindak
00:03:38sebagai jembatan antara agen dan Asterix, dan memungkinkan agen untuk mengakses dan mengunduh komponen
00:03:43yang dibutuhkannya untuk membangun situs. Asterix juga memiliki MCP, tetapi CLI adalah pilihan yang lebih baik karena hanya
00:03:49memuat apa yang dibutuhkannya sedikit demi sedikit dan tidak memenuhi jendela konteks. Ada satu hal lagi yang perlu
00:03:54Anda jalankan jika Anda membangun dengan agen seperti cara kami selalu melakukannya dengan Claude, dan itu adalah perintah
00:03:58inisialisasi Asterix. Apa yang dilakukan perintah inisialisasi ini adalah menyiapkan proyek untuk digunakan oleh agen pengodean AI. Saat Anda
00:04:04menjalankannya, sistem akan menanyakan beberapa pertanyaan, dan juga akan menanyakan apakah Anda menginginkan templat. Tapi jika Anda
00:04:09membangun di Next.js seperti kami, ada satu hal yang perlu diperhatikan. Templat yang diinstalnya berada di
00:04:13folder pages, sementara Next.js menggunakan folder app. Semua proyek Next.js baru menggunakan folder app untuk
00:04:19membuat halaman, yang disebut app router. Folder pages di sisi lain berarti router halaman yang lebih lama
00:04:24sedang digunakan. Dan folder app dan folder pages tidak bisa keduanya ada di dalam
00:04:29proyek yang sama, memiliki keduanya akan menyebabkan kesalahan. Jadi Anda perlu memindahkan templat itu ke dalam folder app,
00:04:34atau mengubah nama halaman menjadi app selama instalasi, sehingga ini tidak menyebabkan konflik di masa mendatang.
00:04:40Perintah inisialisasi mengubah file clod.md dan agent.md, yang pada dasarnya adalah file panduan untuk
00:04:46agen apa pun yang Anda gunakan untuk membangun. Perintah ini menambahkan semua instruksi yang membantu agen mengetahui
00:04:50cara membangun dengan CLI Asterix, perintah mana yang harus dijalankan untuk mendapatkan komponen, dan proses apa yang harus diikuti.
00:04:56Dengan instruksi tersebut, agen membangun aplikasi dengan benar menggunakan CLI di bawahnya,
00:05:01alih-alih menebak-nebak sendiri atau melakukan pencarian web. Dan itu penting karena agen yang bekerja
00:05:05sendiri tidak melakukannya dengan benar, seperti yang mungkin pernah Anda alami sendiri. Asterix memperbaiki ini
00:05:11dengan menjaga agen tetap berdasar pada dokumentasi, sehingga agen bekerja dari fakta yang didokumentasikan alih-alih tebakan.
00:05:16Melalui file clod.md, agen diminta untuk mencari dokumen-dokumen tersebut menggunakan CLI. Prompt yang sama
00:05:22masuk ke file agent.md juga, jadi bahkan jika Anda menggunakan agen lain selain Clod, itu tetap
00:05:28diarahkan ke mereka. Meskipun kami memilih templat kosong, gayanya masih mengisi file globals.css
00:05:34yang menyimpan semua gaya desain dan tema yang berlaku di seluruh situs web, sehingga dapat digunakan
00:05:39di mana saja. Halaman itu sendiri untuk saat ini dirender kosong, hanya halaman kosong, tetapi dari sini kita dapat menggunakan gaya-gaya tersebut
00:05:45untuk membangun situs kita. Dan jika Anda menikmati videonya sejauh ini, berlanggananlah ke saluran ini dan tekan
00:05:50tombol hype. Dukungan kecil ini sangat berarti bagi kami. Dengan Asterix terinstal dan
00:05:55proyek yang siap untuk agen, kita dapat mulai membangun situs yang sebenarnya. Untuk menggunakannya, Anda cukup memberi agen
00:06:00prompt yang menjelaskan situs web yang Anda inginkan secara mendetail. Setelah Anda mengirimnya, Claude memulai dengan mengorientasikan dirinya dengan
00:06:06proyek terlebih dahulu, karena kami sudah menginstal proyek Next.js. Kemudian ia mengikuti alur kerja Asterix
00:06:11yang dijabarkan dalam file Claude.md. Claude kemudian memanggil alat CLI Asterix dan mencari paket awal,
00:06:17prompt desain, dan sumber daya lain apa pun yang dimiliki Asterix yang cocok dengan arah desain yang kami tuju.
00:06:22Dengan begitu, ia tidak membangun sesuatu dari awal, melainkan memulai dari apa yang sudah ada.
00:06:27Dari sana, Claude memilih templat yang paling cocok. Ia melalui beberapa perintah untuk menarik semua
00:06:32komponen yang dibutuhkannya. Kemudian ia mulai menulis kode untuk aplikasi dan menjalankannya. Situs yang dibangunnya sederhana
00:06:37dan memang mengikuti gaya minimalis, meskipun ada beberapa masalah. Satu kartu membungkus ke baris baru
00:06:43ketika seharusnya tetap sejajar dengan baris utama dan produk tidak berada di tengah. Tema warna
00:06:47yang dipilihnya juga terlihat seperti sampah AI, tema biru dan hitam biasa yang sering digunakan model AI saat membangun
00:06:53hampir semua situs web bisnis. Dan meskipun kami hanya membangun situs sederhana, butuh waktu yang sangat lama,
00:06:58sekitar 16 menit, jauh lebih lama dari yang kami harapkan. Tapi sebelum kita melangkah lebih jauh, mari kita dengarkan pesan dari sponsor kita,
00:07:03Lychee Gen. Saya mengambil karya seni karakter ini dan beberapa menit kemudian, itu menjadi model 3D yang lengkap,
00:07:09siap cetak, tanpa perlu keterampilan memodelkan. Inilah caranya. Dengan Lychee Gen, Anda beralih dari gambar,
00:07:14sketsa, atau bahkan prompt teks ke model 3D dalam hitungan menit. Saya mengunggah karya seni saya dan itu menghasilkan model yang bersih
00:07:21dan siap cetak langsung di layar. Figur saya tampak hebat, tetapi pedangnya terasa terlalu kecil. Jadi di studio edit
00:07:26saya hanya mengatakan, perbesar, tanpa harus memulai dari awal. Kemudian saya membukanya langsung di Lychee Slicer,
00:07:31di mana ia masuk dalam keadaan bersih, kedap air, dan siap untuk dicetak. Dan inilah yang sebenarnya penting. Lychee Gen
00:07:36dibangun oleh tim di belakang Lychee Slicer, perangkat lunak pencetakan resin paling populer dengan lebih dari 800.000
00:07:42pengguna. Jadi model-model ini tidak hanya cantik di layar, mereka dibuat untuk dicetak, dengan topologi bersih dan
00:07:48perbaikan otomatis yang sudah disertakan. Setiap akun baru mendapatkan kredit gratis, jadi model pertama Anda sepenuhnya gratis.
00:07:53Klik tautan di komentar yang disematkan untuk memulai dengan Lychee Gen.
00:07:57Untuk memperbaiki tampilan yang dihasilkan tersebut, pertama-tama kami harus mencari tahu apa penyebabnya. Jika Anda telah menonton
00:08:02video kami, Anda mungkin ingat sistem desain AI Labs yang sering kami bicarakan sebelumnya. Bagi mereka
00:08:06yang tidak tahu, ini pada dasarnya adalah kumpulan semua keterampilan yang kami gunakan di seluruh proyek yang kami bangun,
00:08:11baik internal maupun eksternal. Keterampilan ini benar-benar membantu kami. Di dalam keterampilan tersebut,
00:08:16ada keterampilan Pendeteksi Sampah AI. Tugas utamanya adalah menjalankan situs yang dibangun oleh agen melalui sesi
00:08:21tinjauan kritis yang menemukan semua pola yang dianggap sebagai Sampah AI. Dengan begitu, desain yang kami bangun
00:08:27tidak terlihat seperti hasil buatan, melainkan terlihat dirancang. Keterampilan ini menghasilkan laporan, tetapi tidak memperbaiki masalah
00:08:32sendiri, jadi kami dapat melakukan iterasi dan memperbaikinya sendiri. Keterampilan ini terus berkembang dan sudah menangkap banyak
00:08:37pola yang diketahui, dan jika Anda memberi tahu bahwa sesuatu masih terlihat seperti Sampah AI, sistem akan menambahkannya ke pola-polanya juga.
00:08:42Jadi, kami menarik keterampilan itu dan menjalankannya terhadap situs web tersebut. Sistem mulai mengaudit halaman landas,
00:08:47menjalankan pemindai, dan menemukan semua masalahnya. Sistem melaporkan bahwa meskipun desain visualnya bersih,
00:08:51itu terlihat seperti halaman landas SaaS yang dihasilkan buku teks. Pemindaian kembali dengan empat temuan yang
00:08:56membuatnya terlihat seperti situs Sampah AI, dan prioritas tertinggi adalah tampilan keseluruhan halaman landas.
00:09:02Kami kemudian meminta sistem untuk menjalankan perbaikan untuk masalah tersebut. Setelah keterampilan menjalankan perbaikan, sistem mengubah palet warna
00:09:07dari yang khas Sampah AI menjadi sesuatu yang lebih minimalis. Sistem memperbaiki semua
00:09:12temuan yang dilaporkan dan memotong kata-kata klise sehingga situs benar-benar terlihat dirancang alih-alih dihasilkan.
00:09:17Hasilnya jauh lebih baik daripada versi pertama. Langkah selanjutnya adalah membuat Asterix membangun
00:09:22situs yang mengesankan sendiri alih-alih situs dasar yang harus kami perbaiki setelahnya. Untuk mendapatkan lebih banyak dari
00:09:27pustaka dan memperbaiki semua masalah yang kami hadapi sebelumnya, kami membuat keterampilan bernama Asterix Max.
00:09:33Cara kerja keterampilan ini adalah, alih-alih mengikuti tata letak umum yang kami lihat digunakan oleh pustaka, di mana ia
00:09:37bersandar pada templat telanjang dan membangun situs sederhana, keterampilan ini mendorong Asterix hingga batas tertingginya.
00:09:43Hal terpenting yang dilakukannya adalah mendasarkan model. Pada dasarnya, buat model tetap bekerja dari fakta nyata
00:09:48alih-alih tebakan. Cara melakukannya adalah dengan menjalankan perintah manifes Asterix, yang membuat
00:09:52file yang mencantumkan semua yang tersedia. Itu membuat model sadar akan semua perintah dan tanda yang akan
00:09:58dilewatkan, hanya karena ia tidak tahu mereka ada. Dengan manifes itu, model tidak perlu
00:10:03menebak. Ia tahu apa yang ada di CLI dan dapat memperbaiki masalah yang dihadapinya. Keterampilan kemudian mengikuti
00:10:09instruksi dalam file claw.md dan menggunakan alat untuk benar-benar melihat desain, memeriksa hal-hal seperti kisi-kisi bersih
00:10:15dan hierarki kedalaman yang tepat, sehingga masalah yang kami hadapi tidak terjadi lagi. Ia juga memiliki referensi di
00:10:20beberapa area dan mencakup evaluasi, pada dasarnya pemeriksaan otomatis untuk menemukan dan menjalankan tes untuk masalah. Untuk menguji
00:10:27keterampilan yang telah kami bangun, kami juga menginstal keterampilan Pendeteksi Sampah AI di sini, sehingga keduanya dapat bekerja
00:10:32bersama untuk menghasilkan situs yang lebih baik. Itu berarti kami tidak perlu memperbaikinya nanti. Semuanya dapat
00:10:36dilakukan dalam satu kali jalan. Kami memanggil keterampilan dan memberi tahu situs yang ingin kami bangun. Seperti yang kami instruksikan,
00:10:41ia menjalankan perintah manifes terlebih dahulu dan mengumpulkan semua konten yang dibutuhkannya. Ia kemudian mengikuti alur kerja
00:10:46yang mirip dengan yang digunakan sebelumnya untuk membangun situs. Setelah itu, keterampilan mulai menggunakan browser chrome
00:10:51tanpa kepala, pada dasarnya browser yang berjalan tanpa jendela yang dapat Anda lihat, untuk memeriksa tampilan situs.
00:10:56Bekerja sama dengan keterampilan Pendeteksi Sampah AI, sistem berulang kali mengambil tangkapan layar,
00:11:00menganalisisnya, dan memperbaiki masalah yang ditemukan. Pada akhirnya, semua perubahan sudah ada di tempatnya di seluruh
00:11:05situs. Meskipun ini memakan waktu lebih lama, karena ia meninjau dan meningkatkan pada saat yang sama,
00:11:10situs yang dihasilkan secara signifikan lebih baik. Dengan keterampilan pelengkap ini, masih ada
00:11:14beberapa masalah, tetapi kami dapat memperbaikinya dengan cukup efektif. Situs tersebut jauh lebih baik daripada Asterix
00:11:19yang bekerja sendiri. Sekarang, keterampilan yang baru saja kami bangun, bersama dengan sistem desain AI Labs, dapat ditemukan di
00:11:24AI Labs Pro, yang merupakan komunitas kami. Di sanalah Anda akan mendapatkan semua sumber daya, paket awal, dan
00:11:29lebih banyak lagi, bersama dengan tempat untuk berinteraksi dengan sekelompok orang yang berpikiran sama, termasuk tim kami. Jadi jika Anda
00:11:34menemukan nilai dalam apa yang kami lakukan dan ingin mendukung saluran ini, ini adalah cara terbaik untuk melakukannya. Tautannya ada di
00:11:39deskripsi. Itu membawa kita ke akhir video ini. Jika Anda ingin mendukung saluran ini dan membantu
00:11:43kami terus membuat video seperti ini, Anda dapat melakukannya dengan menggunakan tombol super thanks di bawah. Seperti biasa,
00:11:49terima kasih telah menonton, dan saya akan melihat Anda di video berikutnya.