Contoh Vibe Coding: 10 Jenis Aplikasi Nyata, Prompt, dan Kesalahannya

Contoh vibe coding yang paling umum adalah aplikasi web kecil yang berguna: pelacak, halaman booking, alat internal, portal klien, landing page, kuis, dashboard, dan alat AI sederhana. Berikut sepuluh di antaranya. Untuk masing-masing kamu akan melihat siapa yang membuatnya, prompt pertama, apa yang biasanya salah, dan prompt lanjutan yang memperbaikinya.

Ini adalah gabungan proyek yang paling sering dibawa orang ke pembuat aplikasi AI, bukan studi kasus satu orang. Promptnya bisa disalin. Kegagalannya adalah yang muncul berulang kali, dan itulah bagian yang paling berguna. Jika vibe coding masih baru bagimu, mulailah dengan apa itu vibe coding.

1. Pelacak anggaran pribadi

Siapa yang membuatnya: individu yang sudah mencoba spreadsheet lalu menyerah.

Prompt pertama:

Buat pelacak anggaran bulanan. Aku menambahkan pengeluaran dengan jumlah, kategori (makanan, sewa, transportasi, hiburan, lainnya), tanggal, dan catatan. Tampilkan total bulan ini per kategori sebagai diagram batang dan daftar pengeluaran terbaru. Aku bisa menetapkan anggaran per kategori dan melihat berapa sisanya.

Yang salah: diagram menghitung semua pengeluaran yang pernah dimasukkan, bukan hanya bulan ini, sehingga di bulan kedua setiap kategori tampak boros. Selain itu, jumlah yang diketik dengan koma ("1,200") tersimpan sebagai 1.

Prompt perbaikan:

Diagram dan total hanya boleh menyertakan pengeluaran dari bulan yang dipilih. Tambahkan pemilih bulan di bagian atas, default-nya bulan ini. Terima juga jumlah yang diketik dengan koma atau spasi dan simpan sebagai angka.

Pelajaran: "bulan ini" adalah sebuah aturan. Ucapkan aturan secara eksplisit.

2. Halaman booking untuk salon kecil

Siapa yang membuatnya: pemilik usaha kecil yang lelah menerima booking lewat telepon dan DM.

Prompt pertama:

Buat halaman booking untuk salonku. Pelanggan memilih layanan, tanggal, dan slot waktu yang kosong, lalu mengisi nama dan nomor telepon. Aku punya halaman admin privat, di balik login, yang menampilkan booking per hari.

Yang salah: dua pelanggan memesan slot pukul 10.00 yang sama dalam selang semenit, karena halaman hanya memeriksa ketersediaan saat pertama dimuat. Booking pewarnaan 90 menit juga tidak memblokir slot sesudahnya.

Prompt perbaikan:

Saat pelanggan mengirim booking, periksa di server bahwa setiap slot yang dicakup masih kosong, dan tolak dengan "Waktu itu baru saja diambil" jika tidak. Layanan memblokir seluruh durasinya, jadi booking 90 menit pukul 10.00 memblokir 10.00, 10.30, dan 11.00.

Pelajaran: apa pun yang bisa dilakukan dua orang sekaligus butuh pemeriksaan di sisi server. Lihat cara membuat aplikasi booking untuk versi lengkapnya.

3. Menu restoran dengan kode QR

Siapa yang membuatnya: pemilik kafe dan restoran yang terlalu sering mencetak ulang menu.

Prompt pertama:

Buat situs menu mobile untuk kafeku. Bagian sarapan, makan siang, minuman, dan dessert, setiap item dengan nama, harga, deskripsi singkat, dan tag diet (vegan, bebas gluten). Aku butuh halaman admin untuk mengedit item dan menandainya habis. Tampilkan kode QR yang bisa kucetak dan terhubung ke menu.

Yang salah: tidak ada yang rusak, tetapi menu lambat di Wi-Fi kafe karena foto ponsel ukuran penuh dimuat untuk setiap item.

Prompt perbaikan:

Foto menu terlalu berat. Ubah ukuran gambar yang diunggah menjadi lebar maksimal 800px, kompres, dan muat secara lazy saat pengunjung menggulir.

Pelajaran: uji di koneksi lambat, bukan hanya di kantormu.

4. Pelacak peralatan atau stok untuk tim

Siapa yang membuatnya: orang operasional yang mengganti spreadsheet bersama.

Prompt pertama:

Buat alat inventaris untuk tim gudang kami. Item punya nama, SKU, jumlah, lokasi, dan level minimum. Staf login dan bisa menambah stok, mengurangi stok dengan alasan, dan melihat daftar item di bawah minimum yang disorot merah. Simpan riwayat setiap perubahan dan siapa yang melakukannya.

Yang salah: riwayat menampilkan "user 3" alih-alih nama, dan mengurangi stok lebih dari yang tersedia membuat jumlahnya negatif.

Prompt perbaikan:

Tampilkan nama orang di riwayat, bukan ID-nya. Jangan izinkan pengurangan yang membuat jumlah di bawah nol; tampilkan "Hanya ada 4 di stok" sebagai gantinya.

Pelajaran: jelaskan apa yang tidak boleh terjadi, bukan hanya apa yang boleh. Panduan kami tentang membuat aplikasi inventaris membahas sisanya.

5. Portal klien untuk freelancer atau studio

Siapa yang membuatnya: desainer, akuntan, konsultan, dan agensi.

Prompt pertama:

Buat portal klien. Aku mengundang klien lewat email. Setiap klien login dan hanya melihat proyek, file, dan faktur miliknya sendiri, serta bisa meninggalkan komentar. Aku login sebagai admin dan melihat semuanya.

Yang salah: ini kegagalan terpenting dalam daftar. Halaman hanya menampilkan proyek milik masing-masing klien, tetapi server mengembalikan proyek mana pun jika kamu mengubah angka di bilah alamat. Mengklik-klik sebagai satu klien tidak pernah mengungkapnya.

Prompt perbaikan:

Periksa setiap rute server yang mengembalikan proyek, file, komentar, atau faktur. Masing-masing harus memastikan klien yang login adalah pemilik data itu, dan mengembalikan "tidak ditemukan" jika bukan. Lalu ujilah: login sebagai klien A dan coba buka proyek klien B lewat ID-nya.

Pelajaran: menyembunyikan sesuatu di layar tidak sama dengan melindunginya. Selengkapnya di apakah vibe coding aman?.

6. Halaman peluncuran dengan waitlist

Siapa yang membuatnya: founder yang menguji ide sebelum membangunnya.

Prompt pertama:

Buat landing page untuk aplikasi yang membantu tutor menjadwalkan les dan menerima pembayaran. Headline hero, subjudul, pendaftaran email, tiga manfaat, bagian cara kerja, dan FAQ. Simpan pendaftar ke database beserta tanggalnya, dan biarkan aku mengunduhnya sebagai CSV dari halaman privat.

Yang salah: dalam beberapa hari daftar penuh pendaftar sampah dari bot, dan halaman tidak punya judul atau deskripsi, sehingga tautan yang dibagikan menampilkan pratinjau kosong.

Prompt perbaikan:

Tambahkan perlindungan bot dasar pada formulir pendaftaran (kolom honeypot tersembunyi dan batas 5 pendaftaran per IP per jam). Tambahkan judul halaman, meta description, dan gambar untuk berbagi di media sosial.

Pelajaran: formulir publik pasti ditemukan. Lihat cara membuat halaman waitlist.

7. Aplikasi kuis untuk guru

Siapa yang membuatnya: guru dan pelatih yang menginginkan sesuatu yang lebih ringan dari LMS.

Prompt pertama:

Buat aplikasi kuis untuk kelasku. Aku membuat kuis dengan soal pilihan ganda dan satu jawaban benar untuk tiap soal. Siswa bergabung dengan kode dan nama depan, menjawab soal, dan melihat skor di akhir. Aku melihat tabel hasil per kuis.

Yang salah: jawaban benar dikirim ke browser bersama soalnya, sehingga siswa yang penasaran bisa membacanya di sumber halaman. Siswa juga bisa mengirim ulang sampai mendapat 100%.

Prompt perbaikan:

Jangan kirim jawaban benar ke browser. Periksa jawaban di server setelah pengiriman. Izinkan satu pengiriman per nama siswa per kuis, dan beri tahu guru jika ada yang mencoba lagi.

Pelajaran: browser adalah milik pengguna. Apa pun di sana bisa dibaca.

8. Alat AI kecil

Siapa yang membuatnya: marketer, penulis, dan founder yang menginginkan asisten AI yang fokus.

Prompt pertama:

Buat alat yang mengubah deskripsi produk menjadi lima postingan media sosial dengan nada berbeda (ramah, ahli, santai, singkat, panjang). Pakai API AI. Aku menempelkan deskripsi, memilih platform, lalu mendapat postingan dengan tombol salin.

Yang salah: versi pertama memanggil layanan AI langsung dari browser dengan kunci API di dalam halaman, tempat siapa pun bisa menyalinnya dan menggelembungkan tagihan.

Prompt perbaikan:

Pindahkan panggilan AI ke server. Simpan kunci API sebagai secret, jangan pernah di kode frontend. Batasi setiap pengunjung 20 generasi per hari.

Pelajaran: kunci disimpan sebagai secret di server. Lihat cara menjaga kunci API tetap aman dan cara menambahkan fitur AI ke aplikasimu.

9. Situs bisnis berbahasa Arab dan Inggris

Siapa yang membuatnya: bisnis di Teluk dan dunia Arab yang melayani dua bahasa.

Prompt pertama:

Buat situs untuk perusahaan desain interiorku dalam bahasa Arab dan Inggris, dengan pengalih bahasa. Halaman: beranda, layanan, portofolio, tentang, dan kontak. Bahasa Arab harus sepenuhnya kanan-ke-kiri.

Yang salah: teks Arab rata kanan tetapi tata letaknya tidak dicerminkan: panah masih menunjuk arah yang salah dan menu berada di sisi yang salah. Nomor telepon juga tampil terbalik di beberapa tempat.

Prompt perbaikan:

Dalam bahasa Arab, cerminkan seluruh tata letak: atur arah halaman ke kanan-ke-kiri, taruh menu di kanan, balik ikon berarah, dan pertahankan nomor telepon dan email tetap kiri-ke-kanan di dalam teks Arab.

Pelajaran: kanan-ke-kiri adalah tata letak, bukan perataan. Mythex menangani bahasa Arab dan tata letak kanan-ke-kiri lainnya, dan kamu bisa menulis prompt langsung dalam bahasa Arab.

10. Pelacak yang menjadi aplikasi ponsel

Siapa yang membuatnya: pelatih, gym, dan komunitas yang penggunanya hidup di ponsel.

Prompt pertama:

Buat catatan latihan untuk klien personal training-ku. Setiap klien login, melihat rencana yang kuberikan untuk minggu itu, mencentang latihan, dan mencatat beban. Aku melihat kemajuan tiap klien di sebuah diagram.

Yang salah: aplikasi web berfungsi, tetapi di ponsel tombolnya terlalu kecil untuk diketuk saat latihan dan diagramnya tidak terbaca.

Prompt perbaikan:

Rancang untuk penggunaan satu tangan di ponsel: target ketuk besar di bagian bawah layar, satu latihan per layar dengan tombol Next dan Done yang besar, dan diagram kemajuan mingguan yang sederhana.

Pelajaran: jika orang akan memakainya di ponsel, rancang untuk ponsel lebih dulu. Di Mythex Pro, aplikasi yang dipublikasikan bisa menjadi aplikasi Android untuk Google Play dan aplikasi iPhone yang dikirim ke TestFlight; aplikasi ponselnya membuka aplikasi terpublikasimu, jadi setiap Publish memperbaruinya. Lihat halaman pembuat aplikasi mobile.

Pola di balik contoh-contoh ini

Dari kesepuluhnya, kegagalan terbagi dalam beberapa kelompok:

Tidak satu pun butuh kamu membaca kode. Semuanya butuh kamu menguji seperti pengguna yang penasaran dan sedikit usil, lalu menjelaskan apa yang kamu lihat dengan tepat.

Coba sendiri

Pilih contoh yang paling dekat dengan ideamu, salin prompt pertamanya, dan ubah detailnya. Lalu pakai prompt perbaikan sebagai daftar periksa sebelum membagikannya. Contekan prompt vibe coding kami punya 30 prompt lagi, dan cara membuat aplikasi dengan vibe coding mengantar satu proyek dari ide sampai aplikasi terpublikasi. Setelah siap, mulai di pembuat aplikasi AI atau jelajahi template untuk awal yang lebih cepat.

Pertanyaan