Bayangkan Anda ingin membuat website profil bisnis atau CV online.

Dulu, Anda harus:

• Belajar HTML
• Belajar CSS
• Belajar JavaScript
• Belajar hosting
• Belajar deploy

Sekarang prosesnya jauh lebih sederhana.

Dengan bantuan AI, Anda bisa fokus menjelaskan apa yang ingin dibuat, sementara AI membantu menghasilkan desain dan kode.

Tetapi sebelum mulai, ada satu pertanyaan penting:

“Saya harus buka aplikasi apa dulu?”

Jawabannya adalah:

Tool	Fungsi
ChatGPT	Asisten berpikir, menyusun ide, membuat konten, membuat prompt
Lovable	Membuat website dan aplikasi dari prompt
GitHub	Menyimpan source code
Vercel	Mempublikasikan website ke internet

Jika diibaratkan membangun rumah:

• ChatGPT = arsitek
• Lovable = tukang bangunan
• GitHub = gudang penyimpanan
• Vercel = lokasi rumah berdiri

---

Tahap 1: Mulai dari ChatGPT, Bukan Lovable

Kesalahan pemula biasanya langsung membuka Lovable.

Padahal mereka belum tahu website yang ingin dibuat seperti apa.

Karena itu bukalah ChatGPT terlebih dahulu.

Tujuannya:

• Menentukan isi website
• Menentukan target pengunjung
• Menentukan struktur halaman
• Menentukan gaya desain

---

Contoh Percakapan Awal di ChatGPT

Tulis:

Saya ingin membuat website profil bisnis software house. Tolong bantu saya menentukan struktur landing page yang profesional.

Biasanya ChatGPT akan memberikan struktur seperti:

• Hero Section
• Tentang Kami
• Layanan
• Portfolio
• Testimoni
• Kontak

Nah, sekarang Anda sudah memiliki kerangka.

---

Tahap 2: Kumpulkan Konten Website

Masih di ChatGPT.

Minta AI membantu membuat isi website.

Contoh:

Buatkan copywriting landing page untuk software house yang melayani UMKM dan perusahaan berkembang.

Hasilnya bisa menjadi:

• Headline
• Subheadline
• Deskripsi layanan
• Call To Action
• Tentang perusahaan

Semakin lengkap kontennya, semakin mudah tahap berikutnya.

---

Tahap 3: Cari Referensi Desain

Sebelum membuka Lovable, cari inspirasi terlebih dahulu.

Lihat website yang Anda sukai.

Perhatikan:

• Warna
• Layout
• Font
• Gaya gambar

Simpan screenshot atau URL yang menarik.

---

Tahap 4: Baru Buka Lovable

Setelah ide dan konten siap, sekarang buka:

Lovable

Di sinilah proses Vibe Coding sebenarnya dimulai.

---

Prompt Pertama

Masukkan prompt seperti:

Buat landing page untuk software house modern.

Target:
- UMKM
- Startup
- Perusahaan berkembang

Style:
- Modern
- Professional
- Clean

Section:
- Hero
- About
- Services
- Portfolio
- Testimonials
- Contact

Gunakan desain premium seperti website SaaS modern.

Tunggu beberapa menit.

Lovable akan membuat website pertama Anda.

---

Tahap 5: Jangan Langsung Lanjut

Biasanya hasil pertama masih jauh dari sempurna.

Di sinilah banyak pemula salah paham.

Mereka mengira AI akan langsung menghasilkan website final.

Padahal kenyataannya:

Vibe Coding adalah proses revisi berkali-kali.

---

Contoh Revisi

Jika hero section kurang menarik:

Perbesar headline.

Kurangi tinggi hero section.

Tambahkan ilustrasi modern.

Gunakan warna biru tua sebagai warna utama.

Jika kartu layanan terlihat membosankan:

Gunakan icon yang lebih profesional.

Tambahkan efek hover.

Perbaiki spacing antar kartu.

---

Tahap 6: Kerjakan Per Section

Jangan mencoba memperbaiki seluruh website sekaligus.

Fokus satu bagian.

Urutan yang saya rekomendasikan:

1. Hero Section

Pastikan pengunjung langsung mengerti:

• Siapa Anda
• Apa yang Anda tawarkan

---

2. Services

Jelaskan:

• Layanan
• Manfaat
• Solusi yang diberikan

---

3. Portfolio

Tampilkan karya terbaik.

Tidak perlu banyak.

---

4. Contact

Pastikan pengunjung tahu cara menghubungi Anda.

---

Tahap 7: Review Menggunakan ChatGPT Lagi

Setelah website mulai jadi, kembali ke ChatGPT.

Minta AI melakukan review.

Contoh:

Saya sudah membuat landing page software house. Tolong berikan checklist review UI/UX dan conversion rate.

Ini salah satu manfaat besar menggunakan ChatGPT sebagai partner berpikir.

---

Tahap 8: Simpan ke GitHub

Setelah desain cukup bagus, hubungkan project ke:

GitHub

GitHub berfungsi seperti penyimpanan project.

Manfaatnya:

• Ada backup
• Bisa kembali ke versi sebelumnya
• Mudah dihubungkan ke hosting

---

Tahap 9: Publish ke Internet

Setelah project tersimpan di GitHub, buka:

Vercel

Hubungkan:

GitHub
↓
Vercel
↓
Deploy

Beberapa menit kemudian website sudah online.

Anda akan mendapatkan URL seperti:

namabisnis.vercel.app

---

Tahap 10: Pasang Domain Sendiri

Setelah puas dengan hasilnya, pasang domain.

Contoh:

• hexa.id
• jasasoftware.id
• portofoliorifqi.com

Website akan terlihat jauh lebih profesional.

---

Ringkasan Alur Vibe Coding Landing Page

Bagi pemula yang benar-benar baru mengenal AI, urutannya sederhana:

IDE
↓
ChatGPT
(Menyusun struktur & konten)
↓
Lovable
(Membuat website)
↓
Lovable
(Revisi desain)
↓
ChatGPT
(Review & evaluasi)
↓
GitHub
(Simpan project)
↓
Vercel
(Publish website)
↓
Domain
(Website profesional)

Banyak orang mengira Vibe Coding berarti “mengetik satu prompt lalu selesai”. Kenyataannya tidak seperti itu. Yang paling penting justru kemampuan memberikan arahan, mengevaluasi hasil, dan memperbaiki sedikit demi sedikit. AI adalah alat bantu yang sangat kuat, tetapi Anda tetap berperan sebagai pemilik proyek yang menentukan arah website tersebut.