00:00:00Bagaimana cara mengetahui alat desain mana yang benar-benar layak dipakai saat ada yang baru setiap minggunya?
00:00:04Masalahnya, ada alat baru yang dirilis setiap hari, semuanya menjanjikan kualitas, tapi kebanyakan hanya sensasi belaka.
00:00:09Selama pengujian, kami menemukan beberapa yang benar-benar menepati janji dan cocok dengan alur kerja kami.
00:00:15Salah satu anggota tim kami sedang mengerjakan halaman landas produk mobil dengan animasi 3D di bagian hero.
00:00:21Kode sumber situs web ini dan semua fitur yang digunakan tersedia di AI Labs Pro.
00:00:25Bagi yang belum tahu, ini adalah komunitas yang baru kami luncurkan di mana Anda mendapatkan templat siap pakai, perintah, dan semua keahlian yang bisa langsung diterapkan ke proyek Anda.
00:00:36Jika Anda merasa konten kami bermanfaat dan ingin mendukung saluran ini, inilah cara terbaiknya. Tautan ada di deskripsi.
00:00:42Langkah pertama membangun situs seperti ini adalah memiliki aset yang bagus, dan untuk itu saya menggunakan Tripo3D, generator objek 3D berbasis AI.
00:00:50Saat masuk, saya mendapat sekitar 300 kredit, yang lebih dari cukup untuk sekitar 10 kali pembuatan model.
00:00:54Sekarang saya butuh gambar untuk dikonversi menjadi 3D.
00:00:57Saya punya gambar mobil untuk bagian hero, tapi latar belakangnya mengganggu pembuatan model karena pemisahan latar depan dan belakang itu sulit bagi alat seperti ini.
00:01:08Jadi saya menghapus latar belakangnya menggunakan alat penghapus latar di Canva, tapi Anda juga bisa menggunakan Remove BG sebagai alternatif gratis.
00:01:16Setelah latar belakangnya hilang, saya ke Tripo3D dan memasukkan gambar tersebut sebagai referensi.
00:01:21Butuh sekitar 1 menit untuk menghasilkan modelnya dan hasilnya sangat mirip dengan gambar aslinya.
00:01:25Saya bisa memeriksa semua sudut pandang, dan modelnya secara konsisten menyerupai objek dari segala sisi.
00:01:31Setelah model 3D siap, saya mengekspornya.
00:01:34Di Tripo3D, Anda hanya dapat 15 kali ekspor pada paket gratis, jadi saya pastikan hasilnya memuaskan dan mengunduh yang terbaik dari dua percobaan.
00:01:43Saya mengatur resolusinya ke 4K lalu mengekspornya.
00:01:45Setelah berkas GLB diunduh, saya menambahkannya ke direktori publik di aplikasi Next.js yang baru diinisialisasi agar mudah diakses.
00:01:52Alasan memilih format GLB adalah karena format ini menggabungkan tekstur dan material dalam satu berkas tunggal, serta merupakan format asli web sehingga mudah diintegrasikan.
00:02:04Begitu berkas GLB siap, saatnya menerapkannya ke dalam aplikasi web.
00:02:08Untuk membangun halaman landas ini, saya memilih aplikasi Codex yang baru saja dirilis dan hanya tersedia di macOS.
00:02:14Mungkin Anda berpikir, meskipun sudah ada Claude Code, mengapa kita menggunakan Codex di video ini?
00:02:19Dengan peluncuran produk baru mereka, mereka menawarkan batas yang lebih besar dan kuota yang melimpah bahkan di paket gratis, jadi sekarang waktu terbaik untuk mencobanya.
00:02:29Tapi Anda bisa menggunakan proses yang sama di agen AI pilihan Anda.
00:02:32Saya mengunduh Codex dan membuka folder proyek di dalamnya.
00:02:34Antarmukanya mirip dengan pengelola agen AntiGravity, namun lebih berfokus pada agen daripada sekadar kode.
00:02:40Fitur “skills” adalah bagian yang paling kami sukai.
00:02:43Di agen lain, setiap kali ingin membuat keahlian sendiri, Anda harus menggunakan pembuat keahlian sumber terbuka dan membangunnya dari sana.
00:02:49Tapi Codex sudah memiliki pembuat keahlian bawaan dan banyak keahlian siap pakai yang disertakan saat instalasi, hal yang tidak ada di agen lain.
00:02:56Untuk menyederhanakan proses animasi 3D, saya menggunakan pembuat keahlian dan memberikan deskripsi detail tentang bagaimana animasi harus dibuat serta pustaka yang digunakan.
00:03:06Codex mengajukan beberapa pertanyaan, dan setelah dijawab, ia menjalankan skrip, membangun keahlian tersebut, dan siap digunakan.
00:03:13Namun ada satu hal yang berbeda.
00:03:14Biasanya, agen menginstal keahlian di folder .agent atau .claud, tapi Codex menginstalnya di folder root, jadi saya memindahkannya ke folder .agent secara manual.
00:03:24Meski begitu, ia mengikuti pola yang sama dengan kerangka agen sumber terbuka Claude, berisi skrip, referensi, dan aset untuk menambah kemampuan keahlian tersebut.
00:03:33Ini juga mencakup berkas yaml dengan perintah generik yang menjadi acuan bagi agen untuk mengetahui perintah pengguna mana yang akan memicu keahlian tersebut.
00:03:40Saya memberikan tugas kepada Codex untuk mengatur animasi menggunakan keahlian yang baru dibuat, lengkap dengan semua detail yang diperlukan.
00:03:47Ia mulai melakukan implementasi dan menjalankan perintah instalasi.
00:03:49Setelah waktu yang cukup lama, tugas selesai, tapi ia gagal menginstal dependensi karena waktu habis (timeout), jadi saya memintanya menulis dependensi ke package.json saja.
00:04:01Saat saya menjalankan perintah instalasi secara manual, muncul galat karena ketidakcocokan versi pustaka di dalam proyek.
00:04:08Saya harus melakukan debug dengan Codex beberapa kali sampai animasi di bagian hero akhirnya bekerja sesuai keinginan.
00:04:14Karena Codex memakan waktu lama untuk menyelesaikan fitur individu, saya membagi tugas menjadi empat sub-tugas.
00:04:21Setiap tugas berisi satu fitur halaman landas yang terisolasi dari yang lain, lengkap dengan tujuan, persyaratan, dan batasan.
00:04:28Saya menggunakan fitur multi-agen di Codex dan membiarkan setiap agen mengerjakan satu tugas.
00:04:32Karena semuanya mengerjakan halaman yang sama, saya meminta mereka bekerja di branch terpisah agar tidak terjadi konflik kode saat melakukan perubahan di bagian yang sama.
00:04:43Hampir semua agen menyelesaikan tugas mereka dalam rentang waktu yang sama.
00:04:46Saya menggabungkan hasilnya dan semua fitur terimplementasi tanpa konflik, namun jauh lebih cepat dibandingkan jika Codex bekerja sendirian.
00:04:55Situs web sudah siap dengan komponen yang diperlukan, tapi semua bagian kecuali hero terlihat kaku karena tidak ada animasi, jadi saya menggunakan GSAP.
00:05:03GSAP adalah pustaka animasi JavaScript yang digunakan banyak profesional dan memberikan performa yang konsisten.
00:05:09Karena sebelumnya ada masalah dependensi dan galat timeout, saya menginstal GSAP terlebih dahulu secara manual melalui terminal menggunakan perintah npm install.
00:05:18Saya memberikan perintah yang sangat detail kepada Codex untuk menambahkan animasi dan secara khusus memintanya tidak menyentuh bagian hero karena sudah bagus.
00:05:27Saya menambahkan instruksi spesifik tentang bagaimana dan di mana animasi harus ditambahkan. Tugas ini memakan waktu cukup lama.
00:05:33Ada beberapa kesalahan kecil yang saya perbaiki dengan memberikan kembali pesan galatnya ke Codex.
00:05:37Setelah itu, animasi berhasil diterapkan dan bagian hero tetap terjaga seperti semula.
00:05:42Animasi pemicu gulir (scroll) ditambahkan ke semua bagian lain, dan itu memberikan perbedaan nyata pada nuansa situs secara keseluruhan.
00:05:48Meskipun sudah ada animasi, komponen-komponennya masih terlihat datar dibandingkan dengan bagian hero.
00:05:54Jadi saya beralih ke Aceternity UI dan memilih komponen dari sana karena komponen Aceternity dilengkapi dengan banyak mikro-interaksi dan animasi bawaan.
00:06:04Saya meminta Codex untuk mengganti komponen yang ada dengan milik Aceternity sambil tetap mempertahankan animasi yang sudah ada.
00:06:10Setelah diterapkan, saya menyadari ada gradasi warna yang tidak cocok dengan tema aplikasi.
00:06:14Saya memberikan tangkapan layar dan menunjukkan gradasi yang tidak sesuai, lalu Codex mengubahnya ke warna yang lebih serasi.
00:06:21Tapi saat saya periksa animasinya, komponen yang diterapkan masih statis dan tidak memiliki mikro-interaksi khas Aceternity.
00:06:30Jadi saya beri tahu Codex bahwa ada komponen Aceternity dengan mikro-interaksi seperti efek miring saat kursor melintas (tilt-on-hover) dan memintanya memakai itu.
00:06:38Setelah itu, komponen memiliki efek interaksi tersebut dan situs terasa jauh lebih interaktif.
00:06:44Untuk meningkatkan visual lebih lanjut, saya menggunakan repositori publik bernama post-processing yang tersedia sebagai paket NPM.
00:06:51Ini adalah lapisan animasi pemrosesan akhir yang diterapkan setelah efek saat menggunakan React Three Fiber.
00:06:56Lewat ini, kita bisa menggunakan fitur pengolahan citra seperti koreksi gamma dan penyempurnaan lainnya untuk hasil performa tinggi.
00:07:01Saya meminta Codex menggunakan pustaka ini untuk membuat efek pencahayaan halus dan memintanya memandu saya melalui proses tersebut.
00:07:07Awalnya hasilnya tidak tepat dan tidak ada perbedaan visual yang terlihat pada keluarannya.
00:07:11Saya harus melakukan debug beberapa kali sampai akhirnya ia berhasil memberikan efek pendaran halus pada model 3D dan pencahayaan hangat di bagian hero.
00:07:23Itulah akhir dari video kali ini.
00:07:25Jika Anda ingin mendukung saluran ini agar kami bisa terus membuat video seperti ini, Anda bisa menggunakan tombol Super Thanks di bawah.
00:07:31Seperti biasa, terima kasih telah menonton dan sampai jumpa di video berikutnya.