Build Landing Page dengan Vibe Coding (Praktek Langsung Jadi)

Konsep dan Alur Kerja Vibe Coding untuk Web Development

Vibe coding adalah metode pengembangan perangkat lunak berbasis AI di mana developer atau instruktur produk mengarahkan proses logika dan visual menggunakan bahasa alami (natural language prompting), sementara LLM (Large Language Model) seperti Claude 3.5 Sonnet, Cursor, atau ChatGPT bertugas mengeksekusi sintaks kode secara langsung. Pendekatan ini memangkas waktu pembuatan prototype dari hitungan hari menjadi hitungan menit.

Meskipun mengandalkan AI, vibe coding tanpa perencanaan struktur visual yang jelas akan menghasilkan UI berantakan dan struktur DOM yang membingungkan. Kunci keberhasilan terletak pada ketajaman brief spesifikasi teknis dan batasan aturan (constraints) yang diberikan sebelum prompt awal dieksekusi. Pada panduan ini, kita akan membangun landing page siap pakai untuk produk SaaS bernama 'KetikAuto', sebuah platform generator draf email prospek berbasis AI.

Penyusunan Brief dan Spesifikasi Komponen

Sebelum membuka AI editor, definisikan seluruh section UI secara mendetail. Penentuan komponen di awal mencegah AI dari melakukan asumsi liar terkait tata letak dan skema warna.

Komponen Utama Page

• Navbar: Sticky bar dengan efek blur (backdrop-blur), logo platform, link navigasi internal (#fitur, #harga, #faq), serta tombol Call-to-Action (CTA) pendaftaran.
• Hero Section: Titik fokus utama berisi penanda rilis versi, headline bernilai tinggi, sub-headline persuasif, dua tombol CTA (Primary dan Demo), serta visual mockup antarmuka aplikasi.
• Social Proof: Metrik kepercayaan calon pengguna berupa jumlah pengguna aktif dan jajaran logo placeholder perusahaan yang menggunakan layanan.
• Feature Grid: Layout 3 kolom responsif memuat kartu fitur utama dengan icon SVG interaktif dan penjelasan nilai tambah produk.
• Interactive Pricing: Komponen tabel harga dengan switch toggle pembayaran (Bulanan/Tahunan) dan 3 tier paket (Starter, Pro, Enterprise). Paket Pro diberi penanda visual (highlight badge).
• FAQ Accordion: Daftar pertanyaan umum berinteraksi dengan JavaScript Vanilla murni untuk melakukan toggle buka-tutup teks jawaban.
• Footer: Area bawah berisi hak cipta, navigasi sekunder, dan link akun media sosial.

Pilihan Tech Stack: Minimalis dan Zero-Build

Untuk menjaga alur kerja vibe coding tetap cepat dan ramah eksekusi tanpa ketergantungan pada konfigurasi bundler (seperti Vite, Webpack, atau Node.js), stack teknis disederhanakan menjadi single-file `index.html` dengan dependensi berbasis CDN:

• HTML5 Semantik: Penggunaan tag `
  `, `
• Tailwind CSS v3 CDN: Penggunaan utility class langsung pada elemen HTML tanpa perlu mengompilasi file CSS eksternal.
• Google Fonts (Inter): Typography modern berbobot 400 hingga 800 untuk estetika antarmuka SaaS profesional.
• Lucide Icons CDN: Perpustakaan ikon SVG ringan yang diinisialisasi secara otomatis melalui JavaScript di bagian akhir dokumen.

Formulasi Prompt AI yang Presisi dan Terstruktur

Buka editor Cursor, Claude, atau ChatGPT. Salin dan kirimkan prompt komprehensif berikut. Prompt ini menggunakan prinsip *system context*, *structural rules*, dan *explicit constraints* untuk memastikan output kode langsung bekerja tanpa eror.

Template Prompt Utama

Buat file single-page HTML5 landing page lengkap untuk SaaS bernama 'KetikAuto'.
Stack: HTML5 semantik, Tailwind CSS CDN (v3), Google Font Inter, Lucide Icons CDN.

Struktur Komponen:
1. Navbar: Sticky top, logo 'KetikAuto' + ikon zap, menu (Fitur, Harga, FAQ), tombol CTA 'Coba Gratis'.
2. Hero Section: Badge 'Versi 2.0', headline 'Tulis Email Penjualan 10x Lebih Cepat dengan AI', subheadline, CTA utama, CTA Demo, dan mockup UI antarmuka generator email berbentuk card Tailwind.
3. Social Proof: Teks 'Dipercaya 500+ Tim Sales', 4 placeholder logo perusahaan.
4. Features Section: Grid 3 kolom. Feature 1: Integrasi Gmail, Feature 2: Auto Tone Adjustment, Feature 3: Analytics Open Rate.
5. Pricing Section: Switch toggle Monthly/Yearly. Tier Starter ($0), Pro ($29/mo), Enterprise ($99/mo). Highlight card Pro dengan border indigo-600.
6. FAQ Section: Accordion 4 item menggunakan Vanilla JS murni.
7. Footer: Navigasi, copyright, icon media sosial.

Aturan Kode:
- Desain modern, clean, warna utama indigo-600 dan background slate-50.
- Wajib fully responsive (mobile-first approach).
- Tempatkan JavaScript toggle FAQ dan Mobile Menu di bagian bawah sebelum tag penutup body.
- Tulis seluruh kode secara utuh dari doctype sampai tag HTML penutup tanpa memotong baris kode.

Generasi Kode Baseline HTML5 & Tailwind CSS

AI akan menghasilkan struktur kode HTML utuh. Buat file baru bernama `index.html` di editor lokal, salin seluruh hasil kode, dan jalankan menggunakan ekstensi Live Server atau buka secara langsung di web browser.

Struktur Kode Hasil Generation (Potongan Utama)

<!DOCTYPE html>
<html lang="id" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KetikAuto - Generator Email Penjualan AI</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest"></script>
    <style>
        body { font-family: 'Inter', sans-serif; }
    </style>
</head>
<body class="bg-slate-50 text-slate-900 antialiased overflow-x-hidden">

    <!-- Navbar -->
    <nav class="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
            <div class="flex items-center gap-2 font-bold text-xl text-indigo-600">
                <i data-lucide="zap" class="w-6 h-6"></i>
                <span>KetikAuto</span>
            </div>
            <div class="hidden md:flex items-center gap-8 font-medium text-slate-600 text-sm">
                <a href="#fitur" class="hover:text-indigo-600 transition">Fitur</a>
                <a href="#harga" class="hover:text-indigo-600 transition">Harga</a>
                <a href="#faq" class="hover:text-indigo-600 transition">FAQ</a>
            </div>
            <div class="flex items-center gap-4">
                <a href="#" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg font-semibold transition text-sm shadow-sm">Coba Gratis</a>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="pt-20 pb-16 px-4 text-center max-w-5xl mx-auto">
        <span class="bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-wider">Rilis Versi 2.0</span>
        <h1 class="text-4xl sm:text-6xl font-extrabold text-slate-900 mt-6 tracking-tight leading-tight">
            Tulis Email Penjualan <span class="text-indigo-600">10x Lebih Cepat</span> dengan AI
        </h1>
        <p class="text-lg text-slate-600 mt-6 max-w-2xl mx-auto leading-relaxed">
            KetikAuto buat draf email prospek berkonversi tinggi dalam hitungan detik. Hubungkan ke Gmail, atur tone bicara, dan tingkatkan angka responsif sales Anda.
        </p>
        <div class="mt-8 flex flex-col sm:flex-row justify-center gap-4">
            <a href="#" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-xl font-semibold shadow-lg shadow-indigo-200 transition text-center">Mulai Gratis Sekarang</a>
            <a href="#" class="bg-white hover:bg-slate-100 text-slate-700 border border-slate-300 px-6 py-3 rounded-xl font-semibold transition text-center">Lihat Demo</a>
        </div>
    </section>

    <script>
        lucide.createIcons();
    </script>
</body>
</html>

Teknik Refinement dan Iterasi Berbasis Vibe

Hasil awal yang diberikan oleh LLM umumnya membutuhkan sentuhan perbaikan spesifik. Prinsip vibe coding memungkinkan Anda memperbaiki UI atau perilaku interaktif tanpa perlu menyalin atau mengedit baris kode secara manual.

Skenario 1: Penambahan Visual Mockup Editor di Hero Section

Jika bagian hero terasa polos tanpa gambaran antarmuka produk, perintahkan AI untuk menambahkan mockup komponen visual aplikasi.

Prompt Refinement:

Ubah bagian Hero Section pada index.html. Di bawah tombol CTA, tambahkan visual mockup antarmuka aplikasi berbentuk card Tailwind CSS. Card harus memiliki header jendela browser (tombol merah, kuning, hijau di kiri atas), field input 'Kepada', 'Subjek', dan area konten teks dengan draf email yang dibuat oleh AI. Tambahkan efek bayangan tebal (shadow-2xl) dan border rounded-2xl.

Skenario 2: Interaktivitas FAQ Accordion dan Mobile Nav Menu

Apabila tombol FAQ tidak dapat diklik atau menu navigasi mobile belum dapat dibuka, perintahkan AI melengkapi Vanilla JavaScript tanpa menambahkan pustaka eksternal.

Prompt Refinement:

Tambahkan script Vanilla JavaScript lengkap di sebelum penutup tag body di index.html untuk dua fungsi interaktif:
1. FAQ Accordion: Saat elemen header pertanyaan diklik, tampilkan atau sembunyikan (toggle) elemen jawaban di bawahnya. Putar ikon panah 180 derajat saat status terbuka.
2. Mobile Menu: Tambahkan ikon hamburger di navbar untuk tampilan mobile (<768px). Saat diklik, buka menu navigasi drawer dari atas.

Skenario 3: Transformasi Skema Warna (Dark Mode / Theme Shift)

Ganti nuansa visual situs secara instan dengan menginstruksikan perubahan utility class Tailwind.

Prompt Refinement:

Ubah tema visual index.html dari light mode menjadi dark mode premium. Ganti warna latar belakang utama menjadi bg-zinc-900, teks menjadi text-zinc-100, card background menjadi bg-zinc-800/50 dengan border zinc-700, dan ganti seluruh warna aksen indigo-600 menjadi emerald-500.

Deployment Instan ke Production/Staging

Setelah antarmuka dan interaktivitas landing page sesuai harapan, lakukan eksekusi deployment agar landing page dapat diakses secara publik online.

Metode 1: Vercel CLI (Via Terminal)

Deployment menggunakan Vercel Command Line Interface dapat dilakukan langsung dari folder lokal tanpa harus menyambungkan repository GitHub terlebih dahulu.

1. Buka terminal pada direktori proyek file `index.html`.
2. Jalankan perintah berikut:

npx vercel

1. Jawab petunjuk CLI yang muncul di layar:
   • Set up and deploy? Ketik y.
   • Which scope? Pilih akun Vercel Anda.
   • Link to existing project? Ketik n.
   • Project name? Isi ketikauto-landing.
   • In which directory is your code located? Tekan Enter (current directory).
2. Proses upload selesai dalam beberapa detik. Terminal akan menampilkan URL staging live, misalnya: https://ketikauto-landing.vercel.app.

Metode 2: Netlify Drop (Via Web Interface)

1. Buka aplikasi browser dan akses alamat app.netlify.com/drop.
2. Tarik (drag) folder lokal yang memuat file `index.html` lalu lepas (drop) di area upload browser.
3. Netlify akan memproses alokasi CDN secara otomatis dan menerbitkan URL publik instan dalam hitungan detik.

Checklist Quality Assurance (QA) dan Auditing Responsif

Sebelum membagikan URL landing page ke publik atau calon pengguna, lakukan pengujian komprehensif menggunakan DevTools (F12) pada berbagai viewport layar (Mobile 375px, Tablet 768px, Desktop 1440px).

Item Wajib Audit Visual & Teknis

• Meta Viewport Tag: Pastikan `` terpasang sempurna di dalam tag `` untuk mencegah scaling desktop pada layar perangkat ponsel.
• Responsivitas Navigasi: Tampilan menu navigasi desktop harus tersembunyi pada layar bawah 768px (`hidden md:flex`) dan digantikan oleh tombol hamburger menu.
• Skalabilitas Tipografi: Kelas utilitas ukuran font wajib beradaptasi menggunakan prefix breakpoint responsive, seperti `text-3xl sm:text-5xl lg:text-6xl`, sehingga teks tidak terpotong pada layar berukuran 320px.
• Ukuran Area Ketuk (Touch Target Size): Setiap tombol interaktif dan link navigasi harus memiliki minimum ukuran area sentuh 44x44 pixel untuk memenuhi standar aksesibilitas pada perangkat touch-screen.
• Pencegahan Horizontal Overflow: Periksa apakah muncul scrollbar horizontal tak disengaja pada perangkat seluler. Tambahkan atribut `overflow-x-hidden` pada tag `` jika terdapat elemen visual yang memakan space lebar melebihi boundary viewport.
• Inisialisasi Lucide Icons: Panggilan fungsi `lucide.createIcons()` harus berada di bagian bawah file HTML setelah seluruh elemen DOM selesai dirender oleh browser.

Langkah Selanjutnya

Landing page statis SaaS KetikAuto kini telah aktif secara online dengan tampilan UI modern, fully responsive, dan siap digunakan. Namun, komponen tombol seperti 'Coba Gratis' atau form penangkapan prospek (lead capture) masih belum terhubung ke database simpan data.

Pada modul berikutnya (Part 5 dari 10), kita akan mengintegrasikan alur backend dan penanganan form menggunakan teknik vibe coding: Menghubungkan Form HTML secara langsung ke Supabase Database dan Email Service API tanpa perlu menulis arsitektur server backend dari nol.