30 Prompt Vibe Coding yang Boleh Anda Salin (Cheat Sheet)

Prompt vibe coding yang terbaik ringkas, spesifik dan tentang tingkah laku: siapa yang menggunakan aplikasi, apa yang boleh mereka lakukan, apa yang disimpan, dan bagaimana rupanya. Di bawah ada 30 prompt yang boleh anda salin dan tampal, dikumpulkan mengikut peringkat anda, dari binaan pertama hingga penerbitan. Gantikan bahagian dalam [kurungan] dengan butiran anda sendiri.

Ia berfungsi dalam mana-mana pembina aplikasi AI atau ejen pengekodan. Jika anda mahu alasan di sebaliknya, panduan kami yang lebih panjang tentang cara menulis prompt untuk pembina aplikasi AI menerangkan prinsipnya. Halaman ini ialah cheat sheet.

Cara menggunakan cheat sheet ini

• Mulakan dengan satu prompt binaan pertama, kemudian gunakan yang lain satu demi satu.
• Uji selepas setiap prompt. Klik perubahan itu sebelum menghantar yang seterusnya.
• Kekalkan apa yang berfungsi. Kebanyakan prompt susulan di sini berakhir dengan "kekalkan semua yang lain" atas sebab tertentu.
• Tampal teks yang tepat. Mesej ralat, label butang dan perkataan di skrin sentiasa mengatasi penerangan.

Prompt binaan pertama

Ini menentukan bentuk aplikasi. Setiap satu menamakan pengguna, tindakan, data dan rupa.

1. Penjejak ringkas

Bina penjejak [tabiat] untuk saya. Saya boleh menambah [tabiat] dengan nama dan warna, menandanya sekali sehari, dan melihat grid 30 hari serta streak semasa saya. Simpan semuanya supaya masih ada selepas muat semula. Reka bentuk bersih dan minimum yang berfungsi pada telefon.

2. Halaman tempahan perniagaan kecil

Bina halaman tempahan untuk [salun rambut] saya. Pelanggan memilih perkhidmatan ([potong 30 min, mewarna 90 min]), tarikh dan slot masa kosong antara [9:00 dan 18:00], kemudian memasukkan nama, telefon dan e-mel. Dua orang tidak boleh menempah slot yang sama. Saya perlukan halaman admin peribadi, di sebalik log masuk, yang menyenaraikan tempahan akan datang mengikut hari.

3. Alat dalaman

Bina alat dalaman untuk pasukan saya menjejak [pinjaman peralatan]. Setiap item mempunyai nama, kod dan status (tersedia, dipinjam, rosak). Kakitangan log masuk, boleh meminjam item untuk diri sendiri dan memulangkannya. Tunjukkan jadual dengan penapis mengikut status dan sejarah siapa yang memegang setiap item.

4. Halaman pendaratan dengan senarai menunggu

Bina laman web satu halaman untuk [produk saya: aplikasi perancang makanan untuk ibu bapa yang sibuk]. Hero dengan tajuk utama, subtajuk satu ayat dan pendaftaran e-mel. Kemudian tiga manfaat, bahagian cara ia berfungsi yang ringkas dan FAQ. Simpan e-mel pendaftaran dalam pangkalan data dan tunjukkan senarainya pada halaman admin peribadi.

5. Portal pelanggan

Bina portal pelanggan untuk [studio reka bentuk] saya. Setiap pelanggan log masuk dan hanya melihat projek mereka sendiri, dengan status, fail yang saya muat naik dan urutan komen. Saya log masuk sebagai admin dan melihat semua pelanggan. Pelanggan tidak boleh sekali-kali melihat data satu sama lain.

6. Kalkulator atau alat sebut harga

Bina kalkulator sebut harga untuk [perniagaan pembersihan] saya. Input: bilangan bilik tidur, bilik air, perkhidmatan tambahan (ketuhar, tingkap, peti sejuk) dan kekerapan (sekali, mingguan, bulanan). Tunjukkan harga apabila pilihan berubah, dengan pecahan. Harga: [tampal senarai harga anda]. Tambah butang untuk menghantar permintaan sebut harga kepada saya melalui e-mel.

Prompt perancangan

Gunakan ini sebelum ciri besar, atau apabila anda tidak pasti cara menerangkan sesuatu.

7. Rancang sebelum membina

Sebelum menulis sebarang kod, terangkan dengan perkataan biasa skrin yang akan anda bina, data yang akan disimpan dan apa-apa keputusan yang anda perlukan daripada saya. Tunggu persetujuan saya.

8. Ubah idea yang bersepah kepada versi pertama

Ini idea saya: [tampal nota]. Cadangkan versi pertama paling kecil yang masih berguna, dalam 5–8 titik peluru. Senaraikan apa yang anda tinggalkan untuk kemudian dan sebabnya.

9. Tanya apa yang tertinggal

Soalan apa yang akan ditanya pembangun kepada saya sebelum membina ini? Tanya satu demi satu, kemudian ringkaskan jawapan saya sebagai spesifikasi pendek.

10. Semak perubahan besar dahulu

Saya mahu menambah [akaun pasukan di mana beberapa orang berkongsi satu ruang kerja]. Terangkan apa yang perlu berubah pada data, skrin dan kebenaran, dan apa yang mungkin rosak. Jangan ubah apa-apa lagi.

Prompt reka bentuk

11. Tetapkan gaya yang jelas

Reka semula gaya aplikasi: latar putih gading yang hangat, teks gelap, satu warna aksen [#1F6F50], sudut bulat, jarak yang selesa dan fon sans-serif moden. Kekalkan susun atur dan setiap ciri tepat seperti sedia ada.

12. Tiru rasa sesuatu rujukan

Jadikan papan pemuka terasa seperti aplikasi kewangan yang tenang: banyak ruang putih, nombor besar dan tebal, label kecil dan kelabu, satu carta ringkas di atas. Jangan salin logo atau teks mana-mana jenama.

13. Betulkan susun atur telefon

Pada telefon selebar 375px, jadual di [halaman Pesanan] tergelincir ke sisi dan butang bertindih. Ubah setiap baris menjadi kad bertindan pada skrin kecil. Jangan ubah susun atur desktop.

14. Keadaan kosong, memuat dan ralat

Tambah keadaan yang betul pada [senarai Projek]: keadaan kosong yang mesra dengan butang untuk menambah projek pertama, rangka memuat semasa data dimuatkan, dan mesej yang jelas dengan butang cuba semula jika pemuatan gagal.

15. Sokongan kanan-ke-kiri

Tambah versi Bahasa Arab antara muka dengan susun atur kanan-ke-kiri penuh. Ikon yang menunjuk arah patut dibalikkan; nombor dan tarikh patut menggunakan format tempatan. Kekalkan Bahasa Inggeris sebagai lalai.

Prompt data dan ciri

16. Jadikan data kekal

Buat masa ini data saya hilang apabila saya muat semula. Simpan dalam pangkalan data sebenar, dan pastikan skrin sedia ada berfungsi dengan cara yang sama.

17. Tambah log masuk

Tambah pendaftaran dan log masuk dengan e-mel dan kata laluan. Setiap pengguna hanya melihat dan mengedit [entri] mereka sendiri. Tunjukkan e-mel pengguna di bar atas dengan butang log keluar.

18. Tambah peranan

Tambah dua peranan: admin dan ahli. Admin boleh menambah, mengedit dan memadam [produk]; ahli hanya boleh melihatnya. Kuatkuasakan ini di pelayan, bukan sekadar dengan menyembunyikan butang.

19. Tambah carian dan penapis

Tambah kotak carian di atas [senarai kenalan] yang memadankan nama, syarikat atau e-mel semasa saya menaip, serta penapis untuk [status]. Kekalkan susunan semasa.

20. Tambah muat naik fail

Benarkan pengguna melampirkan sehingga [5] imej pada setiap [penyenaraian], maksimum [5 MB] setiap satu. Tunjukkan imej kecil pada penyenaraian dan paparan lebih besar apabila diklik. Hanya pemilik boleh memadam imej mereka.

21. Import daripada hamparan

Tambah butang Import yang mengambil CSV dengan lajur [nama, e-mel, telefon, nota], menunjukkan pratonton 10 baris pertama dan membenarkan saya mengesahkan sebelum menyimpan. Langkau baris tanpa e-mel dan beritahu saya berapa yang dilangkau.

Prompt pembetulan

22. Laporkan pepijat dengan jelas

Apabila saya [klik Simpan pada borang edit], saya melihat "[teks ralat tepat]" dan perubahan tidak disimpan. Dijangka: perubahan disimpan dan saya kembali ke senarai. Cari puncanya, terangkan dalam satu atau dua ayat, kemudian betulkan.

23. Hentikan gelung pembetulan

Kita sudah cuba membetulkan ini tiga kali dan ia masih gagal. Berhenti mengubah kod. Senaraikan tiga punca paling mungkin, cara menyemak setiap satu, dan yang mana anda fikir puncanya.

24. Buat asal kesan sampingan

Perubahan terakhir anda membetulkan pemilih tarikh tetapi [bar sisi] hilang. Pulihkan bar sisi tepat seperti sebelumnya dan kekalkan pembetulan pemilih tarikh.

25. Terangkan sebelum mengubah

Terangkan bagaimana [jumlah checkout] dikira sekarang, langkah demi langkah, dengan menunjuk fail yang terlibat. Jangan ubah apa-apa.

Prompt ujian dan semakan

26. Kes tepi

Senaraikan 10 cara pengguna sebenar boleh merosakkan [borang tempahan]: medan kosong, teks yang sangat panjang, klik dua kali, dua orang serentak, zon waktu yang salah. Uji setiap satu dan betulkan yang gagal. Laporkan apa yang anda ubah.

27. Ringkaskan perubahan terkini

Ringkaskan setiap perubahan yang anda buat dalam [lima] langkah terakhir dengan perkataan biasa, dan tandakan apa-apa yang boleh menjejaskan data sedia ada.

Prompt keselamatan

Gandingkan ini dengan halaman kami tentang adakah vibe coding selamat.

28. Semak akses data

Semak kod pelayan: bolehkah pengguna yang log masuk membaca atau mengubah [rekod] pengguna lain dengan menukar ID dalam permintaan? Tunjukkan di mana akses disemak dan betulkan sebarang kelompangan.

29. Semak rahsia yang terdedah

Senaraikan setiap kunci API, kata laluan atau token yang digunakan aplikasi ini dan di mana setiap satu disimpan. Pastikan tiada satu pun dalam kod yang dijalankan di pelayar atau di-commit dalam fail. Alihkan ke rahsia jika ada.

Prompt penerbitan

30. Semakan sebelum pelancaran

Saya hampir menerbitkan ini untuk pengguna sebenar. Semak seperti seorang penyemak: pautan rosak, tajuk dan penerangan halaman yang tiada, borang tanpa pengesahan, halaman perlahan, ralat konsol dan apa-apa yang nampak belum siap pada telefon. Beri saya senarai mengikut kepentingan, kemudian betulkan lima teratas.

Prompt yang patut dielakkan

Sesetengah prompt sentiasa menghasilkan keputusan yang lebih buruk:

• "Jadikan lebih baik." Baik bagaimana? Namakan skrin dan perubahannya.
• "Betulkan semuanya." AI akan mengubah banyak perkara dan anda tidak tahu apa yang berubah.
• "Guna [library] dan [framework] dan [corak]." Melainkan anda ada sebab, terangkan tingkah laku dan biar alat memilih stack.
• "Ini kunci API saya: …" Jangan tampal rahsia dalam sembang. Gunakan tetapan rahsia alat.
• Sepuluh ciri dalam satu mesej. Pecahkan.

Menjadikan prompt satu tabiat

Selepas beberapa projek anda akan mempunyai versi sendiri bagi prompt ini. Simpan dalam nota, dan guna semula yang berkesan. Mythex juga mengingati siapa anda dan cara anda bekerja merentas projek, jadi pilihan yang anda ulang, seperti gaya atau stack biasa anda, dibawa tanpa perlu ditaip semula.

Jika anda tersekat pada prompt pertama, penjana prompt aplikasi percuma menukar idea satu baris menjadi prompt permulaan yang lebih lengkap. Dan untuk melihat hasil prompt ini dalam praktik, baca contoh vibe coding kami, atau tampal prompt 1 ke dalam pembina aplikasi AI dan ubah kurungan kepada idea anda sendiri.

Soalan lazim