| Istilah | Arti |
|---|---|
| AI slop | Istilah untuk desain atau konten buatan AI yang generik dan membosankan, dengan tata letak dan komponen yang mirip satu sama lain. |
| Shadcn | Pustaka komponen siap pakai untuk membangun antarmuka, seperti akordion atau avatar, yang bisa langsung dipasang di proyek web. |
| 3.js | Pustaka untuk membuat grafis 3D di browser, dipakai di video ini untuk menampilkan animasi 3D di bagian ajakan bertindak situs. |
| Spline | Alat desain grafis 3D yang hasilnya bisa diekspor sebagai kode dan dipasang sebagai latar belakang di bagian atas situs. |
| Railway | Platform untuk menjalankan aplikasi di cloud, yang situsnya dipakai Jono sebagai contoh untuk dikloning dengan Claude Code. |
| typography | Seni memilih dan menata huruf, termasuk jenis dan ukuran font, yang menurut Jono bisa mengubah kesan keseluruhan sebuah situs. |
| Google Fonts | Perpustakaan font gratis dari Google yang bisa dipilih berdasarkan gaya, lalu dipasang ke situs untuk judul atau isi paragraf. |
| Claude Code | Asisten pemrograman berbasis AI yang dipakai untuk membuat seluruh situs dalam video ini lewat instruksi dalam bahasa biasa. |
| technique number | Nomor urut teknik yang dibahas satu per satu dalam video, mulai dari instruksi untuk Claude sampai pengeditan lewat screenshot. |
| CSS | Bahasa untuk mengatur tampilan halaman web, seperti warna, jarak, lebar, dan tata letak, yang terpisah dari struktur HTML. |
| graphics | Elemen visual pada situs, seperti gambar, gradien, dan animasi 3D, yang dipakai video ini untuk membuat situs terlihat lebih hidup. |
| fonts | Jenis huruf yang dipakai untuk judul dan isi teks, yang menurut Jono bisa mengubah keseluruhan kesan sebuah situs. |
Jono membahas cara membuat website dengan Claude Code yang tidak terlihat seperti AI slop, yaitu desain generik dengan tata letak, gradien, dan komponen stok yang sama. Menurutnya, perbedaannya bukan pada alat, melainkan pada teknik yang jarang dipakai orang. Teknik pertama adalah memberi instruksi lewat berkas instruksi Claude agar AI berperan sebagai desainer UI senior sekaligus pengembang front-end. Teknik kedua adalah mencari inspirasi dari situs yang disukai, lalu mengkloningnya dengan screenshot dan meminta Claude membaca struktur serta gayanya. Penonton yang sering membuat situs dengan AI akan terbantu oleh langkah yang bisa langsung dipraktikkan ini.
Teknik berikutnya mencakup penggunaan Tailwind CSS dan Shadcn UI untuk komponen siap pakai, serta latar gradien radial berwarna ungu, biru, pink, dan teal. Animasi ditambahkan dengan pustaka animasi dan Framer Motion, dan grafis 3D untuk bagian atas serta ajakan bertindak diambil dari Spline dan 3JS. Untuk tipografi, Jono memilih satu font untuk judul dan satu untuk isi dari Google Fonts. Teknik terakhir adalah mengedit hasil lewat screenshot dengan instruksi spesifik, misalnya mengubah satu grid menjadi empat kali empat. Jono mengakui hasilnya belum sempurna, misalnya subjudul yang terpotong saat animasi bergulir.
Kata kunci
- AI slop
- Shadcn
- Spline
- Railway
- Mengajarkan delapan teknik agar situs buatan AI tidak tampak seperti AI slop (tata letak membosankan, gradien, dan komponen stok) saat membangun dengan Claude Code.
- Memakai komponen siap pakai dari Shadcn, grafik 3D dan gerak dengan Three.js dan Spline, serta tipografi lewat Google Fonts.
- Memberi prompt akhir untuk tipografi dan menyebut Railway dalam alurnya.
Tulis catatan pribadimu untuk video ini. Catatan tersimpan di akunmu dan bisa dibuka dari perangkat mana pun.