| Istilah | Arti |
|---|---|
| Claude Design | Fitur desain di claude.ai yang dipakai di video ini untuk membuat design system, merancang lima halaman website, dan membuat motion graphic lewat percakapan. |
| Claude Code | Asisten coding AI dari Anthropic yang di video ini dipasang sebagai ekstensi VS Code untuk mengubah desain menjadi website Next.js dan mengunggahnya ke GitHub. |
| design system | Kumpulan aturan brand seperti warna, font, ikon, dan tombol yang membuat setiap halaman website tampil seragam, di video ini dibangun dari brand kit getdesign.md. |
| GSAP | Library JavaScript untuk membuat animasi web yang di video ini dipakai Claude Code agar teks, tombol, dan angka bergerak saat halaman di-scroll. |
| Vercel | Layanan hosting gratis yang mengambil kode dari GitHub lalu menayangkannya sebagai website online, di video ini dengan preset aplikasi Next.js. |
| GitHub | Layanan penyimpanan kode di cloud yang diibaratkan Google Drive untuk kode, tempat proyek website di video ini diunggah sebelum di-deploy. |
| animations | Efek gerak pada halaman seperti teks yang terbang masuk, tombol yang mengambang, dan slider, yang ditambahkan Claude Code dengan bantuan GSAP. |
| kit | Paket aset brand siap pakai berisi judul, warna, dan jenis font, misalnya brand kit Claude dari getdesign.md yang disalin ke Claude Design. |
| deploy | Proses menayangkan website dari komputer lokal ke internet agar bisa diakses siapa pun, yang di video ini dilakukan lewat Vercel. |
| export | Langkah mengeluarkan hasil desain dari Claude Design, di video ini lewat opsi handoff to Claude Code yang menghasilkan perintah untuk disalin. |
| website | Kumpulan halaman web yang bisa dibuka lewat browser, di video ini berupa situs agensi lima halaman bernama Automatable. |
| brand | Identitas visual sebuah perusahaan seperti warna, font, dan gaya, yang di video ini dijaga konsisten di semua halaman lewat design system. |
Jono Catliff menunjukkan cara membuat website multi-halaman yang indah dalam sekitar sepuluh menit dengan memadukan Claude Design dan Claude Code. Ia menilai Claude Design sedang ramai dipakai orang untuk memamerkan website buatan AI, dan video ini menjawab pertanyaan bagaimana mengubah desain tersebut menjadi website sungguhan yang punya animasi saat di-scroll lalu bisa diakses siapa pun secara online. Alurnya dimulai dari membangun design system agar semua halaman punya identitas brand yang seragam, merancang halaman di Claude Design, kemudian menyerahkannya ke Claude Code untuk dikodekan. Video ini penting bagi pemula tanpa latar belakang teknis yang ingin membuat website profesional untuk bisnis atau klien tanpa harus menulis kode sendiri.
Jono menyalin brand kit Claude dari situs getdesign.md, yang menyediakan kit untuk 68 brand besar, lalu menempelkannya ke tab design systems sehingga dalam sekitar lima menit terbentuk ikon, tombol, dan tipografi. Ia membuat prototype high fidelity bernama Automatable, melampirkan screenshot desain agensi pemasaran dari Dribbble sebagai acuan struktur, dan meminta lima halaman: home, services, contact, about, dan case studies. Placeholder bisa diubah lewat fitur comment, edit, dan draw. Setelah itu ia memilih export dan handoff to Claude Code, memasang ekstensi Claude Code di VS Code atau Antigravity, lalu meminta situs dibangun dengan Next.js dan library GSAP memakai file claude.md berisi instruksi. Hasilnya nyaris identik dengan desain dan penuh animasi. Terakhir, kode diunggah ke repository GitHub privat, di-deploy lewat Vercel dengan preset Next.js, dan bisa dipasangi domain sendiri.
Kata kunci
- Claude Design
- design system
- GSAP
- Vercel
- Membangun website multi-halaman yang indah dalam sekitar 10 menit dengan Claude Design dan Claude Code, lengkap dengan animasi saat scroll, lalu men-deploy-nya.
- Menyusun design system dan prompt di Claude Design, mengekspor desain, lalu memakai Claude Code yang menambahkan library GSAP untuk animasi.
- Memakai GitHub dan Vercel untuk deploy, serta menyinggung dampaknya pada Figma dan Adobe.
Tulis catatan pribadimu untuk video ini. Catatan tersimpan di akunmu dan bisa dibuka dari perangkat mana pun.