30 Prompt Vibe Coding yang Bisa Kamu Salin (Contekan)

Prompt vibe coding terbaik itu singkat, spesifik, dan tentang perilaku: siapa yang memakai aplikasi, apa yang bisa mereka lakukan, apa yang disimpan, dan bagaimana tampilannya. Di bawah ini ada 30 prompt yang bisa kamu salin dan tempel, dikelompokkan menurut tahap yang sedang kamu jalani, dari build pertama sampai publikasi. Ganti bagian dalam [kurung siku] dengan detailmu sendiri.

Prompt ini berfungsi di pembuat aplikasi AI atau agen coding mana pun. Jika kamu ingin alasan di baliknya, panduan kami yang lebih panjang tentang cara menulis prompt untuk pembuat aplikasi AI menjelaskan prinsipnya. Halaman ini adalah contekannya.

Cara memakai contekan ini

• Mulai dengan satu prompt build pertama, lalu pakai yang lain satu per satu.
• Uji setelah setiap prompt. Klik-klik perubahannya sebelum mengirim yang berikutnya.
• Pertahankan yang sudah berfungsi. Sebagian besar prompt lanjutan di sini diakhiri "pertahankan yang lain tetap sama" dengan alasan yang jelas.
• Tempel teks persis. Pesan error, label tombol, dan kata-kata di layar selalu lebih baik daripada deskripsi.

Prompt build pertama

Prompt ini menentukan bentuk aplikasi. Masing-masing menyebut pengguna, tindakan, data, dan tampilan.

1. Pelacak sederhana

Buatkan aku pelacak [kebiasaan]. Aku bisa menambah [kebiasaan] dengan nama dan warna, mencentangnya sekali per hari, dan melihat grid 30 hari serta streak saat ini. Simpan semuanya agar tetap ada setelah refresh. Desain bersih dan minimalis yang berfungsi di ponsel.

2. Halaman booking usaha kecil

Buat halaman booking untuk [salon rambut]-ku. Pelanggan memilih layanan ([potong 30 menit, pewarnaan 90 menit]), tanggal, dan slot waktu kosong antara [9.00 dan 18.00], lalu mengisi nama, telepon, dan email. Dua orang tidak boleh memesan slot yang sama. Aku butuh halaman admin privat, di balik login, yang mencantumkan booking mendatang per hari.

3. Alat internal

Buat alat internal agar timku bisa melacak [peminjaman peralatan]. Setiap item punya nama, kode, dan status (tersedia, dipinjam, rusak). Staf login, bisa meminjam item atas nama sendiri dan mengembalikannya. Tampilkan tabel dengan filter menurut status dan riwayat siapa yang memegang tiap item.

4. Landing page dengan waitlist

Buat situs satu halaman untuk [produkku: aplikasi perencana menu makan untuk orang tua yang sibuk]. Hero dengan headline, subjudul satu kalimat, dan pendaftaran email. Lalu tiga manfaat, bagian cara kerja singkat, dan FAQ. Simpan email pendaftar ke database dan tampilkan daftarnya di halaman admin privat.

5. Portal klien

Buat portal klien untuk [studio desain]-ku. Setiap klien login dan hanya melihat proyeknya sendiri, dengan status, file yang kuunggah, dan utas komentar. Aku login sebagai admin dan melihat semua klien. Klien tidak boleh pernah melihat data klien lain.

6. Kalkulator atau alat penawaran

Buat kalkulator penawaran untuk [bisnis kebersihan]-ku. Input: jumlah kamar tidur, kamar mandi, layanan tambahan (oven, jendela, kulkas), dan frekuensi (sekali, mingguan, bulanan). Tampilkan harga saat opsi berubah, beserta rinciannya. Harga: [tempel daftar hargamu]. Tambahkan tombol untuk mengirim permintaan penawaran kepadaku lewat email.

Prompt perencanaan

Pakai ini sebelum fitur besar, atau kapan pun kamu tidak yakin cara menjelaskan sesuatu.

7. Rencanakan sebelum membangun

Sebelum menulis kode apa pun, jelaskan dengan kata-kata biasa layar yang akan kamu bangun, data yang akan kamu simpan, dan keputusan apa saja yang kamu butuhkan dariku. Tunggu persetujuanku.

8. Ubah ide berantakan menjadi versi pertama

Ini ideaku: [tempel catatan]. Usulkan versi pertama terkecil yang tetap berguna, dalam 5–8 poin. Sebutkan apa yang akan kamu tunda dan alasannya.

9. Tanyakan apa yang kurang

Pertanyaan apa yang akan diajukan developer kepadaku sebelum membangun ini? Tanyakan satu per satu, lalu ringkas jawabanku sebagai spesifikasi singkat.

10. Periksa dulu perubahan besar

Aku ingin menambahkan [akun tim di mana beberapa orang berbagi satu workspace]. Jelaskan apa yang harus berubah pada data, layar, dan izin akses, serta apa yang bisa rusak. Jangan ubah apa pun dulu.

Prompt desain

11. Tetapkan gaya yang jelas

Ubah gaya aplikasi: latar putih gading hangat, teks gelap, satu warna aksen [#1F6F50], sudut membulat, spasi lega, dan font sans-serif modern. Pertahankan tata letak dan setiap fitur persis seperti sekarang.

12. Tiru nuansa sebuah referensi

Buat dashboard terasa seperti aplikasi keuangan yang tenang: banyak ruang putih, angka besar dan tebal, label kecil dan abu-abu, satu diagram sederhana di atas. Jangan tiru logo atau teks merek mana pun.

13. Perbaiki tata letak ponsel

Di ponsel selebar 375px, tabel di [halaman Pesanan] bergulir ke samping dan tombolnya saling tumpang tindih. Ubah tiap baris menjadi kartu bertumpuk di layar kecil. Jangan ubah tata letak desktop.

14. State kosong, memuat, dan error

Tambahkan state yang layak pada [daftar Proyek]: state kosong yang ramah dengan tombol untuk menambah proyek pertama, skeleton saat data dimuat, dan pesan yang jelas dengan tombol coba lagi jika pemuatan gagal.

15. Dukungan kanan-ke-kiri

Tambahkan versi antarmuka berbahasa Arab dengan tata letak kanan-ke-kiri penuh. Ikon yang menunjuk arah harus dibalik; angka dan tanggal harus memakai format lokal. Pertahankan bahasa Inggris sebagai default.

Prompt data dan fitur

16. Buat data bertahan

Saat ini dataku hilang saat aku refresh. Simpan di database sungguhan, dan buat layar yang ada tetap berfungsi seperti sekarang.

17. Tambah login

Tambahkan pendaftaran dan login dengan email dan kata sandi. Setiap pengguna hanya boleh melihat dan mengedit [entri] miliknya sendiri. Tampilkan email pengguna di bilah atas dengan tombol keluar.

18. Tambah peran

Tambahkan dua peran: admin dan anggota. Admin bisa menambah, mengedit, dan menghapus [produk]; anggota hanya bisa melihatnya. Terapkan ini di server, bukan hanya dengan menyembunyikan tombol.

19. Tambah pencarian dan filter

Tambahkan kotak pencarian di atas [daftar kontak] yang mencocokkan nama, perusahaan, atau email saat aku mengetik, plus filter untuk [status]. Pertahankan urutan sortir saat ini.

20. Tambah unggah file

Biarkan pengguna melampirkan hingga [5] gambar pada setiap [listing], maksimal [5 MB] per gambar. Tampilkan thumbnail di listing dan tampilan lebih besar saat diklik. Hanya pemilik yang bisa menghapus gambarnya.

21. Impor dari spreadsheet

Tambahkan tombol Impor yang menerima CSV dengan kolom [nama, email, telepon, catatan], menampilkan pratinjau 10 baris pertama, dan membiarkanku mengonfirmasi sebelum menyimpan. Lewati baris tanpa email dan beri tahu berapa yang dilewati.

Prompt perbaikan

22. Laporkan bug dengan jelas

Saat aku [klik Simpan pada formulir edit], aku melihat "[teks error persis]" dan perubahan tidak tersimpan. Seharusnya: perubahan tersimpan dan aku kembali ke daftar. Cari penyebabnya, jelaskan dalam satu atau dua kalimat, lalu perbaiki.

23. Hentikan lingkaran perbaikan

Kita sudah mencoba memperbaiki ini tiga kali dan masih gagal. Berhenti mengubah kode. Sebutkan tiga penyebab paling mungkin, cara memeriksa masing-masing, dan mana yang menurutmu benar.

24. Batalkan efek samping

Perubahan terakhirmu memperbaiki date picker tetapi [sidebar] hilang. Kembalikan sidebar persis seperti semula dan pertahankan perbaikan date picker.

25. Jelaskan sebelum mengubah

Jelaskan bagaimana [total checkout] dihitung saat ini, langkah demi langkah, dengan menunjuk file yang terlibat. Jangan ubah apa pun.

Prompt pengujian dan peninjauan

26. Kasus tepi

Sebutkan 10 cara pengguna nyata bisa merusak [formulir booking]: kolom kosong, teks sangat panjang, klik ganda, dua orang sekaligus, zona waktu yang salah. Uji masing-masing dan perbaiki yang gagal. Laporkan apa yang kamu ubah.

27. Ringkas perubahan terbaru

Ringkas setiap perubahan yang kamu buat dalam [lima] langkah terakhir dengan kata-kata biasa, dan tandai apa pun yang bisa memengaruhi data yang ada.

Prompt keamanan

Padukan dengan halaman kami tentang apakah vibe coding aman.

28. Periksa akses data

Periksa kode server: apakah pengguna yang login bisa membaca atau mengubah [data] milik pengguna lain dengan mengganti ID dalam permintaan? Tunjukkan di mana akses diperiksa dan perbaiki celah apa pun.

29. Periksa secret yang terekspos

Sebutkan setiap kunci API, kata sandi, atau token yang dipakai aplikasi ini dan di mana masing-masing disimpan. Pastikan tidak ada yang berada di kode yang berjalan di browser atau ter-commit di file. Pindahkan ke secret jika ada.

Prompt publikasi

30. Pemeriksaan pra-peluncuran

Aku akan mempublikasikan ini untuk pengguna sungguhan. Telusuri sebagai reviewer: tautan rusak, judul dan deskripsi halaman yang hilang, formulir tanpa validasi, halaman lambat, error konsol, dan apa pun yang tampak belum selesai di ponsel. Beri aku daftar berurutan menurut kepentingan, lalu perbaiki lima teratas.

Prompt yang sebaiknya dihindari

Beberapa prompt selalu menghasilkan hasil yang lebih buruk:

• "Buat lebih baik." Baik dalam hal apa? Sebut layar dan perubahannya.
• "Perbaiki semuanya." AI akan mengubah banyak hal dan kamu tidak tahu apa yang bergeser.
• "Pakai [library] dan [framework] dan [pola]." Kecuali ada alasan, jelaskan perilakunya dan biarkan alat memilih stack.
• "Ini kunci API-ku: …" Jangan pernah menempelkan secret ke chat. Pakai pengaturan secret alat.
• Sepuluh fitur dalam satu pesan. Pecah.

Menjadikan prompt sebagai kebiasaan

Setelah beberapa proyek, kamu akan punya versi sendiri dari prompt-prompt ini. Simpan di catatan dan pakai ulang yang berhasil. Mythex juga mengingat siapa kamu dan cara kerjamu di berbagai proyek, jadi preferensi yang kamu ulang, seperti gaya atau stack andalan, terbawa tanpa perlu diketik ulang.

Jika kamu buntu di prompt pertama, generator prompt aplikasi gratis mengubah ide satu kalimat menjadi prompt awal yang lebih lengkap. Dan untuk melihat hasil prompt-prompt ini dalam praktik, baca contoh vibe coding kami, atau tempel prompt 1 ke pembuat aplikasi AI dan ubah bagian dalam kurung dengan ideamu sendiri.

Pertanyaan