Contoh Vibe Coding: 10 Jenis Aplikasi Sebenar, Prompt dan Apa yang Silap

Contoh vibe coding yang paling biasa ialah aplikasi web kecil yang berguna: penjejak, halaman tempahan, alat dalaman, portal pelanggan, halaman pendaratan, kuiz, papan pemuka dan alat AI yang ringkas. Di bawah ada sepuluh daripadanya. Untuk setiap satu, anda akan melihat siapa yang membinanya, prompt pertama, apa yang lazim silap, dan prompt susulan yang membetulkannya.

Ini gabungan projek yang paling kerap dibawa orang kepada pembina aplikasi AI, bukan kajian kes seseorang. Prompt-nya boleh disalin. Kegagalannya pula yang berulang-ulang berlaku, itulah sebabnya ia bahagian yang paling berguna. Jika vibe coding masih baharu bagi anda, mulakan dengan apa itu vibe coding.

1. Penjejak belanjawan peribadi

Siapa yang membinanya: individu yang sudah mencuba hamparan dan berputus asa.

Prompt pertama:

Bina penjejak belanjawan bulanan. Saya menambah perbelanjaan dengan jumlah, kategori (makanan, sewa, pengangkutan, hiburan, lain-lain), tarikh dan nota. Tunjukkan jumlah bulan ini bagi setiap kategori sebagai carta bar dan senarai perbelanjaan terkini. Saya boleh menetapkan belanjawan bagi setiap kategori dan melihat baki yang tinggal.

Apa yang silap: carta mengira semua perbelanjaan yang pernah dimasukkan, bukan bulan ini sahaja, jadi menjelang bulan kedua setiap kategori nampak berbelanja berlebihan. Jumlah yang ditaip dengan koma ("1,200") pula disimpan sebagai 1.

Prompt pembetulan:

Carta dan jumlah hanya perlu merangkumi perbelanjaan bagi bulan yang dipilih. Tambah pemilih bulan di bahagian atas, lalai kepada bulan semasa. Terima juga jumlah yang ditaip dengan koma atau ruang dan simpan sebagai nombor.

Pengajaran: "bulan ini" ialah satu peraturan. Sebutkan peraturan dengan jelas.

2. Halaman tempahan untuk salun kecil

Siapa yang membinanya: pemilik perniagaan kecil yang penat menerima tempahan melalui telefon dan DM.

Prompt pertama:

Bina halaman tempahan untuk salun saya. Pelanggan memilih perkhidmatan, tarikh dan slot masa yang kosong, kemudian memasukkan nama dan nombor telefon. Saya ada halaman admin peribadi, di sebalik log masuk, yang menunjukkan tempahan mengikut hari.

Apa yang silap: dua pelanggan menempah slot 10:00 yang sama dalam masa seminit, kerana halaman hanya menyemak ketersediaan semasa ia mula-mula dimuatkan. Tempahan mewarna rambut 90 minit juga tidak menyekat slot selepasnya.

Prompt pembetulan:

Apabila pelanggan menghantar tempahan, semak pada pelayan bahawa setiap slot yang dilitupinya masih kosong, dan tolak dengan "Masa itu baru sahaja diambil" jika tidak. Sesuatu perkhidmatan menyekat sepanjang tempohnya, jadi tempahan 90 minit pada 10:00 menyekat 10:00, 10:30 dan 11:00.

Pengajaran: apa-apa yang boleh dilakukan dua orang serentak memerlukan semakan di sebelah pelayan. Lihat cara membina aplikasi tempahan untuk versi penuh.

3. Menu restoran dengan kod QR

Siapa yang membinanya: pemilik kafe dan restoran yang terlalu kerap mencetak semula menu.

Prompt pertama:

Bina laman web menu mudah alih untuk kafe saya. Bahagian sarapan, makan tengah hari, minuman dan pencuci mulut, setiap item dengan nama, harga, penerangan ringkas dan teg pemakanan (vegan, bebas gluten). Saya perlukan halaman admin untuk mengedit item dan menanda yang habis dijual. Tunjukkan kod QR yang boleh saya cetak yang memaut ke menu.

Apa yang silap: tiada yang rosak, tetapi menu lambat pada Wi-Fi kafe kerana foto telefon bersaiz penuh dimuatkan untuk setiap item.

Prompt pembetulan:

Foto menu terlalu berat. Ubah saiz imej yang dimuat naik kepada lebar maksimum 800px, mampatkannya dan muatkan secara lazy semasa pelawat menatal.

Pengajaran: uji pada sambungan yang perlahan, bukan di pejabat anda sahaja.

4. Penjejak peralatan atau stok untuk pasukan

Siapa yang membinanya: orang operasi yang menggantikan hamparan kongsi.

Prompt pertama:

Bina alat inventori untuk pasukan gudang kami. Item mempunyai nama, SKU, kuantiti, lokasi dan tahap minimum. Kakitangan log masuk dan boleh menambah stok, mengeluarkan stok dengan sebab, dan melihat senarai item di bawah tahap minimum yang diserlahkan dengan warna merah. Simpan sejarah setiap perubahan dan siapa yang membuatnya.

Apa yang silap: sejarah menunjukkan "user 3" dan bukan nama, dan mengeluarkan stok lebih daripada yang ada menjadikan kuantiti negatif.

Prompt pembetulan:

Tunjukkan nama orang itu dalam sejarah, bukan ID-nya. Jangan benarkan pengeluaran yang menjadikan kuantiti di bawah sifar; tunjukkan "Hanya 4 dalam stok" sebagai ganti.

Pengajaran: terangkan apa yang sepatutnya mustahil, bukan hanya apa yang boleh. Panduan kami tentang membina aplikasi inventori membincangkan selebihnya.

5. Portal pelanggan untuk pekerja bebas atau studio

Siapa yang membinanya: pereka, akauntan, perunding dan agensi.

Prompt pertama:

Bina portal pelanggan. Saya menjemput pelanggan melalui e-mel. Setiap pelanggan log masuk dan hanya melihat projek, fail dan invois mereka sendiri, serta boleh meninggalkan komen. Saya log masuk sebagai admin dan melihat semuanya.

Apa yang silap: ini kegagalan paling penting dalam senarai. Halaman hanya menunjukkan setiap pelanggan projek mereka sendiri, tetapi pelayan memulangkan mana-mana projek jika anda menukar nombor dalam bar alamat. Klik sana-sini sebagai seorang pelanggan tidak akan mendedahkannya.

Prompt pembetulan:

Semak setiap laluan pelayan yang memulangkan projek, fail, komen atau invois. Setiap satu mesti mengesahkan pelanggan yang log masuk memiliki rekod itu, dan memulangkan "tidak ditemui" jika tidak. Kemudian ujinya: log masuk sebagai pelanggan A dan cuba buka projek pelanggan B melalui ID-nya.

Pengajaran: menyembunyikan sesuatu di skrin tidak sama dengan melindunginya. Lebih lanjut dalam adakah vibe coding selamat?.

6. Halaman pelancaran dengan senarai menunggu

Siapa yang membinanya: pengasas yang menguji idea sebelum membinanya.

Prompt pertama:

Bina halaman pendaratan untuk aplikasi yang membantu tutor menjadualkan kelas dan mengutip bayaran. Tajuk utama hero, subtajuk, pendaftaran e-mel, tiga manfaat, bahagian cara ia berfungsi dan FAQ. Simpan pendaftaran dalam pangkalan data dengan tarikh, dan benarkan saya memuat turunnya sebagai CSV dari halaman peribadi.

Apa yang silap: dalam beberapa hari senarai dipenuhi pendaftaran sampah daripada bot, dan halaman tiada tajuk atau penerangan, jadi pautan yang dikongsi menunjukkan pratonton kosong.

Prompt pembetulan:

Tambah perlindungan bot asas pada borang pendaftaran (medan honeypot tersembunyi dan had 5 pendaftaran bagi setiap IP sejam). Tambah tajuk halaman, meta description dan imej perkongsian sosial.

Pengajaran: borang awam pasti ditemui. Lihat cara membina halaman senarai menunggu.

7. Aplikasi kuiz untuk guru

Siapa yang membinanya: guru dan jurulatih yang mahukan sesuatu yang lebih ringan daripada LMS.

Prompt pertama:

Bina aplikasi kuiz untuk kelas saya. Saya mencipta kuiz dengan soalan aneka pilihan dan satu jawapan betul bagi setiap soalan. Pelajar menyertai dengan kod dan nama pertama, menjawab soalan, dan melihat skor di akhir. Saya melihat jadual keputusan bagi setiap kuiz.

Apa yang silap: jawapan yang betul dihantar ke pelayar bersama soalan, jadi pelajar yang ingin tahu boleh membacanya dalam sumber halaman. Pelajar juga boleh menghantar semula sehingga mendapat 100%.

Prompt pembetulan:

Jangan hantar jawapan yang betul ke pelayar. Semak jawapan di pelayan selepas penghantaran. Benarkan satu penghantaran bagi setiap nama pelajar bagi setiap kuiz, dan tunjukkan kepada guru jika seseorang cuba lagi.

Pengajaran: pelayar milik pengguna. Apa-apa yang ada di situ boleh dibaca.

8. Alat AI kecil

Siapa yang membinanya: pemasar, penulis dan pengasas yang mahukan pembantu AI yang fokus.

Prompt pertama:

Bina alat yang menukar penerangan produk kepada lima siaran media sosial dalam nada berbeza (mesra, pakar, ceria, ringkas, panjang). Gunakan API AI. Saya menampal penerangan, memilih platform, dan mendapat siaran dengan butang salin.

Apa yang silap: versi pertama memanggil perkhidmatan AI terus dari pelayar dengan kunci API di dalam halaman, tempat sesiapa sahaja boleh menyalinnya dan menaikkan bil.

Prompt pembetulan:

Alihkan panggilan AI ke pelayan. Simpan kunci API sebagai rahsia, bukan dalam kod frontend. Hadkan setiap pelawat kepada 20 penjanaan sehari.

Pengajaran: kunci diletakkan dalam rahsia di pelayan. Lihat cara memastikan kunci API selamat dan cara menambah ciri AI pada aplikasi anda.

9. Laman web perniagaan Bahasa Arab dan Inggeris

Siapa yang membinanya: perniagaan di Teluk dan dunia Arab yang lebih luas yang melayani dua bahasa.

Prompt pertama:

Bina laman web untuk syarikat reka bentuk dalaman saya dalam Bahasa Arab dan Inggeris, dengan suis bahasa. Halaman: utama, perkhidmatan, portfolio, tentang kami dan hubungi. Bahasa Arab mesti sepenuhnya kanan-ke-kiri.

Apa yang silap: teks Arab diselaraskan ke kanan tetapi susun atur tidak dicerminkan: anak panah masih menghala ke arah yang salah dan menu berada di sebelah yang salah. Nombor telefon juga dipaparkan terbalik di beberapa tempat.

Prompt pembetulan:

Dalam Bahasa Arab, cerminkan keseluruhan susun atur: tetapkan arah halaman kepada kanan-ke-kiri, letakkan menu di kanan, balikkan ikon berarah, dan kekalkan nombor telefon serta e-mel kiri-ke-kanan di dalam teks Arab.

Pengajaran: kanan-ke-kiri ialah susun atur, bukan penyelarasan. Mythex mengendalikan Bahasa Arab dan susun atur kanan-ke-kiri yang lain, dan anda boleh membuat prompt terus dalam Bahasa Arab.

10. Penjejak yang menjadi aplikasi telefon

Siapa yang membinanya: jurulatih, gim dan kumpulan komuniti yang penggunanya sentiasa menggunakan telefon.

Prompt pertama:

Bina log senaman untuk pelanggan latihan peribadi saya. Setiap pelanggan log masuk, melihat pelan yang saya berikan untuk minggu itu, menanda senaman yang siap dan merekod berat. Saya melihat kemajuan setiap pelanggan pada carta.

Apa yang silap: aplikasi web berfungsi, tetapi pada telefon butang terlalu kecil untuk diketik ketika bersenam dan carta tidak boleh dibaca.

Prompt pembetulan:

Reka bentuk ini untuk penggunaan sebelah tangan pada telefon: sasaran ketikan besar di bahagian bawah skrin, satu senaman bagi setiap skrin dengan butang Seterusnya dan Siap yang besar, serta carta kemajuan mingguan yang ringkas.

Pengajaran: jika orang akan menggunakannya pada telefon, reka bentuk untuk telefon dahulu. Pada Mythex Pro, aplikasi terbitan boleh menjadi aplikasi Android untuk Google Play dan aplikasi iPhone yang dihantar ke TestFlight; aplikasi telefon membuka aplikasi terbitan anda, jadi setiap Publish mengemas kininya. Lihat halaman pembuat aplikasi mudah alih.

Corak di sebalik contoh-contoh ini

Dalam kesemua sepuluh, kegagalan jatuh dalam beberapa kumpulan:

Tiada satu pun memerlukan anda membaca kod. Ia memerlukan anda menguji seperti pengguna yang ingin tahu dan sedikit nakal, serta menerangkan apa yang anda lihat dengan tepat.

Cuba satu sendiri

Pilih contoh yang paling hampir dengan idea anda, salin prompt pertamanya dan ubah butirannya. Kemudian gunakan prompt pembetulan sebagai senarai semak sebelum berkongsi. Cheat sheet prompt vibe coding kami mempunyai 30 lagi, dan cara membina aplikasi dengan vibe coding membawa satu projek dari idea hingga aplikasi terbitan. Apabila sedia, mulakan dalam pembina aplikasi AI atau layari templat sebagai permulaan.

Soalan lazim