Ringkasan Materi Vibe Coding 3 Desember 2025 (Sharing Session bersama Isparmo)

Vibe Coding: Cara Bikin Website Keren Modal "Curhat" ke AI, Tanpa Sentuh Kode Rumit!

Pernahkah Anda membayangkan memiliki website sendiri untuk bisnis, atau bahkan sebuah aplikasi canggih yang bisa mengedit foto, tapi langsung mundur teratur begitu mendengar kata "coding"? Bayangan layar hitam penuh tulisan berwarna-warni yang rumit seringkali membuat nyali kita ciut. Kita sering berpikir bahwa membuat aplikasi adalah wilayah eksklusif para lulusan IT atau programmer jenius.

Namun, zaman sudah berubah drastis. Selamat datang di era Vibe Coding.

Baru-baru ini, dalam sebuah sesi sharing yang inspiratif, Coach Isparmo memperkenalkan sebuah konsep revolusioner yang disebut Vibe Coding. Intinya sederhana: Anda tidak perlu mengerti bahasa komputer seperti HTML, CSS, atau JavaScript. Anda hanya perlu menggunakan "bahasa manusia". Ya, bahasa yang Anda gunakan sehari-hari untuk ngobrol. Dengan bantuan kecerdasan buatan (AI), impian membuat website profesional kini bisa dilakukan oleh siapa saja, mulai dari pemilik UMKM, pelajar, hingga ibu rumah tangga, hanya dalam hitungan menit.

Mari kita bedah tuntas apa itu Vibe Coding, alat apa yang dipakai, dan bagaimana langkah-langkah praktisnya agar Anda bisa langsung mencobanya sekarang juga.

Apa Itu Vibe Coding?

Secara sederhana, Vibe Coding adalah metode membuat perangkat lunak (website atau aplikasi) tanpa menulis kode program secara manual. Filosofinya adalah "No Coding, No Ribet".

Dulu, jika Anda ingin membuat tombol di website berwarna merah, Anda harus tahu kode heksadesimal warna merah dan sintaks CSS-nya. Sekarang? Anda cukup mengetik perintah: "Tolong buatkan tombol berwarna merah yang kalau diklik akan menuju ke WhatsApp." Selesai. AI yang akan menerjemahkan keinginan Anda menjadi barisan kode rumit di belakang layar.

Mengapa kita harus belajar ini?

1. Hemat Biaya: Anda tidak perlu menyewa programmer mahal di awal merintis bisnis.
2. Cepat: Membuat landing page yang dulu butuh waktu berhari-hari, kini bisa selesai dalam 15 menit.
3. Aksesibel: Tidak perlu latar belakang IT sama sekali.

Senjata Utama: Google Gemini Mode Kanvas

Alat utama yang digunakan dalam Vibe Coding ini adalah Google Gemini, khususnya fitur yang disebut Mode Kanvas (Canvas Mode).

Berbeda dengan chat AI biasa yang hanya menampilkan teks balasan memanjang ke bawah, Mode Kanvas membagi layar Anda menjadi dua. Sebelah kiri adalah tempat Anda "ngobrol" atau memberikan perintah (prompting), dan sebelah kanan adalah "kanvas" tempat hasil website atau aplikasi Anda muncul secara real-time.

Cara menggunakannya sangat mudah. Anda cukup membuka Google Gemini (bisa menggunakan akun gratisan), lalu pada bagian menu alat, pilih "Kanvas". Begitu mode ini aktif, Anda sudah siap menjadi seorang "developer" dadakan.

Studi Kasus 1: Membuat Landing Page Bisnis dalam Sekejap

Mari kita praktikkan dengan contoh nyata yang didemokan oleh Coach Isparmo, yaitu membuat website untuk jasa cuci AC bernama "Berkah Cool".

Langkah 1: Tentukan Tujuan dan Isi Sebelum menyuruh AI, Anda harus tahu dulu apa yang mau dibuat. Misalnya:

• Jenis: Landing page (website satu halaman).
• Brand: Berkah Cool.
• Tagline: Jujur, Profesional, Bergaransi.
• Fitur: Tombol kontak WhatsApp, daftar harga, dan testimoni.

Langkah 2: Masukkan Perintah (Prompting) Di kolom chat Gemini, ketikkan perintah dengan bahasa natural. Contohnya: "Buatkan saya landing page untuk jasa service AC dengan nama brand Berkah Cool. Tagline-nya jujur, profesional, bergaransi. Masukkan kontak WhatsApp 0812xxxx. Cantumkan harga cuci AC Rp75.000 dan servis Rp100.000. Desainnya modern dan minimalis."

Hanya dalam hitungan detik, Gemini akan menuliskan ratusan baris kode untuk Anda dan—voila!—tampilan website akan langsung muncul di layar sebelah kanan. Ada judul besar, ada daftar harga, dan ada tombol pesan.

Langkah 3: Revisi Semudah Meminta Tolong Bagian paling menarik dari Vibe Coding adalah kemudahannya dalam merevisi. Misalnya, Anda melihat harga servis Rp100.000 terlalu murah dan ingin menaikkannya.

Anda tidak perlu mencari baris kode mana yang memuat angka tersebut. Cukup ketik lagi di kolom chat: "Pada bagian jasa servis, tolong ganti harganya menjadi Rp150.000." Atau, Anda ingin mengadakan promo akhir tahun. Ketik saja: "Buatkan penawaran diskon 20% untuk cuci AC dalam rangka akhir tahun, berlaku sampai 31 Desember 2025. Taruh infonya di bagian atas agar menarik."

AI akan langsung mengerti, mengubah kodenya, dan memperbarui tampilan website Anda detik itu juga. Tanpa pusing, tanpa error manual.

Studi Kasus 2: Membuat Aplikasi Web Canggih

Vibe Coding tidak hanya terbatas pada website informasi statis. Anda bahkan bisa membuat aplikasi yang memiliki fungsi logika. Contoh yang didemokan adalah aplikasi ProPhoto Studio, sebuah editor foto untuk membuat pas foto dokumen resmi.

Bayangkan betapa rumitnya logika sebuah aplikasi yang harus:

1. Bisa upload foto atau ambil selfie langsung dari kamera.
2. Menganalisa kualitas foto.
3. Mengganti latar belakang (misalnya menjadi merah untuk tahun kelahiran ganjil).
4. Mengganti baju kaos menjadi jas resmi secara otomatis.

Dengan Vibe Coding, Anda cukup mendeskripsikan alur tersebut kepada Gemini. "Buatkan aplikasi editor foto untuk dokumen resmi. Fiturnya bisa upload dan ambil foto kamera. Gunakan AI untuk memperbaiki kualitas foto, mengganti background, dan mengubah pakaian menjadi jas formal."

Gemini akan bekerja keras menulis kode pemrograman yang kompleks (bisa mencapai 400-800 baris kode). Jika tiba-tiba muncul error—yang wajar terjadi dalam pembuatan aplikasi—Anda tidak perlu panik. Biasanya akan muncul tombol atau opsi "Fix Error". Klik saja, dan biarkan AI yang mencari letak kesalahannya sendiri, memperbaikinya, dan menjalankannya kembali. Tugas Anda hanya sebagai mandor yang memberi perintah.

Tips Profesional agar Hasilnya Maksimal

Meskipun AI yang mengerjakan teknisnya, hasil yang bagus tetap bergantung pada bagaimana cara Anda memerintah. Berikut adalah tips agar hasil Vibe Coding Anda terlihat profesional:

1. Gunakan Bahasa yang Spesifik: Jangan cuma bilang "buatkan web bagus". Tapi jelaskan strukturnya: harus ada Header, Hero Section (bagian utama atas), Keunggulan, Harga, Testimoni, FAQ, dan Footer.
2. Jelaskan Gaya Desain: Sebutkan gaya visual yang diinginkan, misalnya "Modern Minimalis", "Colorful", atau "Korporat". Anda bahkan bisa meminta jenis font tertentu seperti Poppins atau Montserrat agar terlihat kekinian.
3. Responsif itu Wajib: Jangan lupa meminta agar website tersebut "responsif". Artinya, tampilannya harus tetap bagus dan rapi baik saat dibuka di layar laptop yang lebar maupun di layar HP yang kecil. Anda bisa mengeceknya langsung dengan meminta tampilan mode seluler di preview.
4. Bertahap: Jangan meminta satu aplikasi super komplit dalam satu kali perintah. Mulailah dari fitur dasar. Setelah jadi, baru minta tambahkan fitur A, lalu fitur B. Ini meminimalisir error pada AI.

Bagaimana Cara Mempublikasikannya?

Setelah website atau aplikasi jadi di layar Gemini Anda, lalu bagaimana cara orang lain melihatnya?

Cara Paling Gampang: Jika Anda menggunakan akun Google Gemini yang sudah memiliki riwayat (bukan akun yang baru sekali dibuat hari ini), biasanya ada tombol "Share" di pojok kanan atas. Anda bisa membagikan link tersebut ke teman atau klien, dan mereka bisa langsung membuka hasil karya Anda.

Cara Lebih Profesional (Hosting): Untuk penggunaan jangka panjang atau bisnis serius, Anda tentu ingin website tersebut memiliki alamat sendiri (seperti namabisnisanda.com).

1. Copy Kodenya: Di Gemini Canvas, Anda bisa menyalin seluruh kode yang dihasilkan.
2. Gunakan GitHub: GitHub adalah semacam "gudang" penyimpanan kode. Anda bisa membuat akun gratis di sana, membuat repositori (folder proyek) baru, dan menempelkan kode dari Gemini ke dalam file bernama index.html.
3. GitHub Pages: GitHub memiliki fitur gratis untuk menayangkan kode Anda menjadi website yang bisa diakses publik.

Penting tentang API Key: Khusus untuk aplikasi yang menggunakan kecerdasan buatan di dalamnya (seperti aplikasi edit foto atau scanner kartu nama tadi), jika Anda memindahkannya keluar dari lingkungan Gemini (misalnya ke GitHub atau hosting sendiri), Anda perlu memasukkan "API Key". Anggap saja API Key ini adalah kunci paspor agar aplikasi Anda diizinkan menggunakan otak cerdasnya Google Gemini dari luar rumah Google. Kunci ini bisa didapatkan gratis di Google AI Studio. Anda cukup meminta Gemini membuatkan kolom input di aplikasi Anda untuk memasukkan kunci ini.

Kesimpulan: Jangan Takut Mencoba!

Vibe Coding membuka pintu lebar bagi siapa saja untuk berinovasi. Anda bisa membuat alat bantu hitung untuk diet (BMI Calculator), generator artikel otomatis, pemindai kartu nama digital, hingga landing page jualan, semuanya tanpa perlu kuliah IT 4 tahun.

Kuncinya adalah berani mencoba dan jangan takut salah. Jika error, minta AI perbaiki. Jika jelek, minta AI desain ulang. Seperti yang dikatakan Coach Isparmo, di masa depan, bahasa pemrograman yang paling kuat bukanlah Python atau C++, melainkan bahasa manusia.

Jadi, ide apa yang sudah lama mengendap di kepala Anda? Buka laptop Anda, akses Google Gemini, dan mulailah mewujudkannya hari ini juga dengan Vibe Coding. Selamat berkarya!

Contoh-contoh yang telah dibuat menggunakan Vibe Coding:

Landing Page (Website) : https://gemini.google.com/share/907631dc3b30 

Aplikasi Foto Editing, Prophoto Studio: https://gemini.google.com/share/42b59b934d60 

Aplikasi Foto Editing untuk Produk, Pro Studio Photo: https://gemini.google.com/share/5dee4f96a137

Aplikasi ubah sketsa jadi gambar realistis, Sketch2Real: https://gemini.google.com/share/c5594ebea0ff