Bagaimana menggunakan Claude Code untuk membuat situs web dan efek animasi setingkat $10.000.

Dari menginstal skill desain, mengumpulkan materi referensi, menulis prompt pembangunan, hingga mengimplementasikan animasi kursor sorot, melakukan review dan perbaikan putaran demi putaran, hingga penyempurnaan akhir, panduan lengkap ini memungkinkan Anda yang tidak memiliki dasar coding sekalipun untuk langsung mahir. Artikel ini dirangkum dan diterjemahkan dari artikel monokern di X.
(Pengantar sebelumnya: Claude Code meluncurkan perintah /goals baru: memisahkan eksekusi dan evaluasi, menghindari AI agent bermalas-malasan dan berbohong)
(Latar belakang tambahan: Praktik: Panduan langkah demi langkah menggunakan 7 Agent untuk meningkatkan Vibe Coding menjadi proses pengembangan tingkat ahli)

Daftar Isi

Toggle

• Langkah Pertama: Menginstal Skill Desain
• Langkah Kedua: Mencari Materi Referensi
• Langkah Ketiga: Menulis Prompt Pembangunan
• Langkah Keempat: Animasi Blok Hero
• Langkah Kelima: Review dan Perbaikan
• Langkah Keenam: Penyempurnaan Akhir
• Hasil

Agensi mematok biaya $5.000 untuk membuat situs portofolio yang terlihat sebagus ini.

Saya menyelesaikan portofolio saya sendiri dalam 2 jam. Berikut proses lengkapnya.

Ini adalah catatan implementasi nyata, bukan panduan template umum.

Saya menggunakan portofolio saya sendiri sebagai contoh: materi referensi yang benar-benar saya gunakan, prompt yang benar-benar saya kirim, bug yang benar-benar saya temui dan perbaiki.

Tidak diperlukan pengalaman coding sama sekali.

Langkah Pertama: Menginstal Skill Desain

Secara default, output desain Claude biasa-biasa saja. Font yang sama, tata letak yang sama, tampilan datar yang sama. Dua skill dapat mengatasi masalah ini.

• Frontend Design — dikembangkan oleh Anthropic, berjalan di latar belakang, memblokir font yang terlalu sering digunakan seperti Inter, mendorong tipografi yang lebih berani, meningkatkan kualitas teks.

Tempelkan ini ke Claude Code:

Install skill ini: github.com/anthropics/skills/tree/main/frontend-design

Saat diminta, izinkan perubahan, instal secara global.

• UI/UX Pro Max — 57 gaya antarmuka, 95 skema warna, 56 pasangan font, Anda bisa memanggilnya langsung saat membangun.

Tempelkan ini ke Claude Code:

Install plugin ini menggunakan NPM: github.com/nextlevelbuilder/ui-ux-pro-max

Alihkan pemilih mode ke Mode Auto, sehingga Claude tidak akan bertanya apakah Anda mengizinkan di setiap langkah.

Langkah Kedua: Mencari Materi Referensi

Jangan mendeskripsikan situs impian Anda secara abstrak, biarkan Claude melihat seperti apa yang Anda inginkan.

Portofolio saya menggunakan "Il Capo Production" dari Awwwards sebagai referensi utama.

awwwards.com/sites/il-capo-production

Gaya gelap dan sinematik itulah yang saya inginkan.

Berikut cara saya benar-benar menggunakannya:

Saya tidak mengambil tangkapan layar seluruh halaman dan berkata "buatkan ini untuk saya", melainkan mengambil tangkapan layar per blok dari bagian yang saya suka:

• 1.png — Blok hero
• 2.png — Blok di bawah hero (karya ditampilkan dalam format video + judul/deskripsi)
• 6.png — Footer dan bagian bawah situs
• 11.png — Halaman proyek tunggal
• 12.png — Layar pemuatan

Untuk halaman portofolio (halaman yang menampilkan semua karya), situs referensi tidak memiliki tata letak yang cocok. Saya pergi ke Pinterest dan menemukan tata letak berbeda dengan gaya serupa, lalu mengambil tangkapan layar terpisah dan menamainya 11.png.

Jangan mencoba menyalin seluruh situs, pinjam bagian yang bagus dari setiap situs.

Masukkan semua materi ke dalam folder /reference di dalam proyek.

Langkah Ketiga: Menulis Prompt Pembangunan

Di awal prompt, gunakan /ui-ux-pro-max untuk mengaktifkan skill desain.

Ini adalah prompt persis yang saya gunakan untuk portofolio:

Prompt untuk disalin:

/ui-ux-pro-max
Buatkan situs web portofolio pribadi kelas atas untuk seorang pengembang frontend. Situs harus terlihat mahal, modern, dan mengesankan secara teknis,
dengan animasi elegan yang dimuat dengan lancar di perangkat apa pun.
Gunakan referensi desain dari folder reference: 1.png adalah blok hero, 2.png adalah blok di bawah hero
(menampilkan karya dalam format video + judul/deskripsi), 6.png adalah footer/bagian bawah situs, 7.png adalah halaman portofolio yang menampilkan semua karya,
11.png adalah contoh halaman proyek tunggal saat mengklik karya apa pun dari portofolio, 12.png adalah layar pemuatan.
Di tengah blok hero, gunakan me.png untuk menempatkan foto saya.
Semua placeholder gambar karya/proyek menggunakan example.png.

Sebelum mulai membangun, ajukan pertanyaan klarifikasi yang perlu Anda tanyakan.

Baris terakhir adalah kuncinya
Claude akan berhenti dan mengajukan 4-6 pertanyaan tentang gaya, font, tata letak, tingkat animasi, nada konten. Jawaban Anda akan menjadi dasar seluruh situs.

Saat menjawab, spesifiklah. Semakin akurat di sini, semakin sedikit bolak-balik setelahnya.

Setelah Anda menjawab, Claude membutuhkan waktu sekitar 5 menit untuk merencanakan, lalu sekitar 10 menit untuk membangun. Output pertama sudah cukup solid.

Langkah Keempat: Animasi Blok Hero

Menempatkan foto biasa di tengah blok hero gelap itu membosankan
Sesuatu harus terjadi saat pengguna menggerakkan mouse.

Saya memikirkan ide sorot untuk portofolio saya:

• Seluruh blok gelap
• Foto saya hampir tidak terlihat secara default
• Kursor bertindak seperti senter — "menerangi" saya
• Lapisan kedua hanyalah versi lebih terang dan hangat dari foto yang sama

Saya mendeskripsikan konsep ini ke Claude dan memintanya mengembangkan implementasi:

"Di blok hero, saya ingin efek kursor senter/sorot. Latar belakang gelap. Foto saya hampir tidak terlihat secara default. Saat kursor bergerak di atas blok, ia bertindak sebagai sorot — melalui topeng lingkaran dengan tepi lembut yang mengikuti kursor, mengungkapkan versi lebih terang dan hangat dari foto di bawahnya. Radius 100-150px, tepi kabur lembut. Tolong implementasikan efek ini."

Claude berhasil membuatnya dalam sekali percobaan. Efeknya persis seperti yang dideskripsikan — pengguna menggerakkan kursor, foto menjadi terang di tempat yang mereka arahkan.

Langkah Kelima: Review dan Perbaikan

Sebelum melakukan pemeriksaan kualitas formal, gulir sendiri situs webnya dan catat semua yang terasa tidak beres.

Daftar saya setelah pembangunan pertama:

• Transisi antar rute halaman terasa kasar — perlu fade in/out yang halus
• Efek sorot memiliki jeda yang terlihat dan tidak mengikuti kursor
• Beberapa elemen meluap dari layar, tidak dapat menyesuaikan dengan layar
• Font tidak sesuai dengan situs referensi — terlihat lebih generik daripada estetika Il Capo

Catat semua masalah, lalu kirimkan sekaligus:

"Berikut beberapa masalah yang perlu diperbaiki, tolong tangani semuanya:\

2. [Deskripsi masalah 1]\
3. [Deskripsi masalah 2]\
4. [Deskripsi masalah 3]"

Sangat penting untuk mengirimkan semua masalah sekaligus.

Langkah Keenam: Penyempurnaan Akhir

Setelah bug yang jelas diperbaiki, lakukan pemeriksaan kualitas terstruktur. Tempelkan ini ke Claude:

"Tolong tinjau situs web ini sesuai dengan standar berikut, tunjukkan dengan jujur bagian mana yang perlu ditingkatkan:
— Tipografi (apakah kita menggunakan font AI yang terlalu sering digunakan seperti Inter?)
— Warna (apakah skema warna terkendali atau berantakan?)
— Hierarki (apakah ukuran teks memandu mata dengan benar?)
— Animasi (apakah halus dan bermakna, atau tersentak-sentak dan acak?)
— Versi seluler (apakah benar-benar dirancang untuk ponsel, atau hanya versi desktop yang dikecilkan?)
— Teks (apakah terkendali dan spesifik, atau konten isian AI yang generik?)"

Claude akan memberi skor untuk setiap poin. Bacalah semuanya, lalu setuju atau tidak setuju untuk setiap poin, kemudian kumpulkan masalah yang ingin Anda perbaiki menjadi satu prompt dan kirimkan sekaligus.

Jangan perbaiki poin yang tidak Anda setujui. Anda lebih tahu situs web Anda sendiri darinya.

Hasil

Anda akan mendapatkan situs web yang solid pada akhirnya. Tidak sempurna — tapi cukup baik.

Beberapa hal tidak akan benar-benar sempurna pada pembangunan pertama, mungkin versi seluler perlu diulang sekali lagi, atau animasi tertentu terasa sedikit meleset. Itu normal.

Mulai dari sini, iterasi. Temukan satu hal setiap hari untuk diperbaiki dan perbaiki.