Alur Kerja Desain Gemini 3 Terbaik

Video dibuka dengan membahas kekuatan AI generatif saat ini, khususnya bagaimana Google meningkatkan permainannya sejak peluncuran Gemini 3. Banyak orang di media sosial mengklaim dapat langsung membuat landing page luar biasa, namun kenyataannya mereka menggunakan beberapa alat sekaligus. Google telah mengembangkan berbagai alat eksperimental yang didukung oleh Gemini 3 dan Nano Banana. Tantangannya adalah Google tidak menawarkan cara untuk menggunakan semua alat ini secara bersamaan, sehingga diperlukan alur kerja lengkap yang mengintegrasikan semuanya.

Bagian ini menjelaskan masalah utama dalam membuat animasi: ketidakkonsistenan hasil saat menggunakan alat AI untuk menghasilkan frame. Google merilis WISC (alat eksperimental) yang dirancang khusus untuk pembuatan aset, didukung oleh Nano Banana untuk pembuatan gambar. WISC menggunakan kerangka kerja subjek, adegan, dan gaya untuk memandu pembuatan gambar dengan konsistensi yang lebih baik. Kelebihan utama WISC adalah penggunaan Gemini 3 sebagai lapisan tengah yang menulis prompt detail di atas kata-kata sederhana pengguna, sehingga tidak perlu menulis prompt panjang untuk mendapatkan hasil berkualitas. WISC juga mendukung penggabungan gambar referensi, memungkinkan kontrol yang lebih baik dibanding Nano Banana atau Mix Board dari Google.

Video mendemonstrasikan proses pembuatan frame pertama dan terakhir untuk animasi kamera di bagian hero landing page. Untuk frame pertama, dibuat visual kamera dengan detail spesifik tentang jenis kamera, pantulan lensa, resolusi, dan kedalaman gambar. Frame terakhir dirancang sebagai sudut samping kamera dengan lensa yang dipisah untuk menunjukkan komponen internalnya. Tantangan muncul karena WISC pada percobaan pertama juga memecah sirkuit internal yang tidak diinginkan. Solusinya adalah dengan menyebutkan perubahan yang diperlukan dalam kata-kata sederhana, menginstruksikan alat untuk hanya menunjukkan pelapisan lensa tanpa sirkuit internal.

WISC memiliki keterbatasan karena hanya fokus pada animasi satu gambar, bukan menghubungkan beberapa keyframe. Google Flow menjadi solusinya dengan menggunakan Gemini untuk merencanakan cerita, model gambar Google untuk merancang karakter stabil, dan VIO untuk membuat konten video. Fitur frame-to-video digunakan untuk membuat transisi mulus antara frame awal dan akhir. Prompt yang baik harus mencakup bagaimana frame awal mengarah ke akhir, gaya animasi, dan arah pergerakan untuk memberikan model jalur logika yang jelas. Video pertama yang dihasilkan memiliki kesalahan dalam arah putaran dan frame akhir, namun dengan membuat prompt ulang dengan perubahan spesifik, akhirnya menghasilkan versi yang diinginkan.

Bagian ini membahas keterbatasan tier gratis Google Flow yang hanya menyediakan 180 kredit bulanan, dengan setiap video VIO 3.1 menggunakan 20 kredit, sehingga maksimal 9 video per bulan. Video yang dihasilkan dalam format MP4 tidak bisa langsung digunakan di bagian Hero karena sulit dipetakan melalui animasi scroll. Solusinya adalah mengonversi video MP4 ke format WebP menggunakan konverter online gratis. Format WebP dipilih karena di web diperlakukan sebagai gambar yang tidak memerlukan wrapper pemutar media, lebih ringkas, memberikan performa lebih baik, dan lebih mudah untuk memetakan interaksi scroll, menjadikannya ideal untuk konten animasi berdurasi pendek.

File WebP yang sudah dikonversi ditambahkan ke direktori public proyek Next.js yang baru diinisialisasi. Untuk mengintegrasikan animasi ke bagian Hero, digunakan Claude dengan format prompt XML karena model Claude dioptimalkan untuk memahami XML. Prompt terstruktur ini memungkinkan Claude mengurai maksud dengan lebih andal dan bernalar atas setiap bagian secara independen. Prompt mencakup konteks tentang apa yang ingin dibangun, lokasi aset animasi, cara kerja animasi scroll-through dalam tag konteks, semua persyaratan dalam tag requirement, perilaku animasi dalam tag animation behavior, serta detail implementasi, batasan, dan output yang diperlukan dalam tag masing-masing. Dengan prompt ini, Claude secara otomatis mengimplementasikan animasi persis seperti yang diinginkan.

Meskipun bagian Hero terlihat bagus, komponen lainnya terlihat generik seperti website biasa yang dihasilkan AI. Masalahnya adalah mengandalkan CSS vanilla alih-alih library komponen yang sudah ada. Untuk landing page kamera dengan gaya Apple, dipilih Hero UI yang dibangun di atas Tailwind CSS dan mengandalkan Framer Motion untuk animasi. Hero UI mendukung framework umum seperti Next.js, Vite, dan Laravel dengan dua metode instalasi: install seluruh proyek atau install komponen individual. Claude diminta untuk mengganti komponen yang ada dengan komponen Hero UI, dan hasilnya website menjadi jauh lebih baik dengan tampilan dan nuansa yang lebih profesional.

Motion membantu mengarahkan perhatian pengunjung ke fitur yang ingin disoroti, memastikan retensi pengguna lebih tinggi karena pengguna memutuskan dalam beberapa detik apakah akan tetap di landing page berdasarkan UI. Mengimplementasikan animasi dari awal dengan vanilla JavaScript sangat menantang, sehingga digunakan Motion.dev, library gratis dan open source dengan berbagai animasi siap pakai. Motion.dev mengabstraksi logika sinkronisasi manual antara pembaruan DOM dengan timing animasi, menangani pembaruan DOM secara internal dan otomatis saat pengguna scroll. Library ini menggunakan komponen motion dengan state awal dan akhir yang didefinisikan dalam props, menangani logika transisi secara otomatis. Claude diminta mengimplementasikan animasi parallax dan scroll, meningkatkan pengalaman pengguna dengan mengarahkan perhatian ke bagian kunci halaman.

Mendeskripsikan tampilan bagian halaman adalah proses melelahkan, lebih baik mendapat inspirasi dari galeri karya desainer. Platform 21st.dev menawarkan inspirasi untuk berbagai komponen UI yang dibangun di atas library populer seperti Aceternity UI, Prism UI, Coconut UI, dan Magic UI. Keunggulan utama 21st.dev adalah untuk setiap komponen, tersedia prompt yang secara khusus dirancang untuk AI coding agent yang dapat langsung disalin. Prompt terstruktur ini mencakup persyaratan proyek, kode dengan instruksi untuk ditempelkan ke direktori komponen, semua kode dependensi yang diperlukan, jalur penambahan kode, paket NPM yang harus diinstal, dan panduan implementasi lengkap. Video mencontohkan penggunaan bagian call-to-action dan footer dari 21st.dev, di mana Claude tidak hanya mengintegrasikan komponen tetapi juga menambahkan motion dan menyesuaikan konten (seperti menghilangkan ikon GitHub yang tidak relevan) tanpa instruksi eksplisit.

Video ditutup dengan ajakan kepada penonton untuk mendukung channel menggunakan tombol super thanks di bawah video jika mereka ingin membantu channel terus membuat konten seperti ini. Pembuat konten mengucapkan terima kasih kepada penonton yang telah menonton video hingga selesai. Pesan penutup menyampaikan salam perpisahan dengan janji akan bertemu lagi di video berikutnya, menggunakan frasa standar "sampai jumpa" yang umum digunakan dalam penutupan video YouTube.