30 Vibe Coding Prompt na Puwede Mong Kopyahin (Cheat Sheet)

Ang pinakamabuting vibe coding prompt ay maikli, tiyak at nakatuon sa asal: sino ang gumagamit ng app, ano ang puwede nilang gawin, ano ang iniimbak nito, at kung paano ito tumitingin. Narito ang 30 prompt na puwede mong kopyahin at i-paste, pinagpangkat ayon sa yugto mo, mula sa unang build hanggang sa pag-publish. Palitan ang mga bahaging nasa [panaklong] ng sarili mong detalye.

Gumagana ang mga ito sa kahit anong AI app builder o coding agent. Kung gusto mo ng paliwanag sa likod ng mga ito, ipinapaliwanag ng mas mahabang gabay namin tungkol sa paano magsulat ng prompt para sa AI app builder ang mga prinsipyo. Cheat sheet ang pahinang ito.

Paano gamitin ang cheat sheet na ito

• Magsimula sa isang first-build prompt, tapos gamitin ang iba nang isa-isa.
• Subukan pagkatapos ng bawat prompt. I-click ang pagbabago bago magpadala ng susunod.
• Panatilihin ang gumagana. Karamihan sa mga follow-up prompt dito ay nagtatapos sa "panatilihing pareho ang lahat ng iba" sa isang dahilan.
• I-paste ang eksaktong teksto. Mas mahalaga ang mga mensahe ng error, label ng button at mga salitang nasa screen kaysa sa paglalarawan.

Mga first-build prompt

Ito ang humuhubog sa hugis ng app. Pinangalanan ng bawat isa ang mga user, ang mga aksyon, ang datos at ang itsura.

1. Simpleng tracker

Gumawa ng [habit] tracker para sa akin. Puwede akong magdagdag ng [habit] na may pangalan at kulay, markahan ito minsan bawat araw, at makita ang 30-araw na grid at kasalukuyang streak ko. I-save ang lahat para manatili pa rin pagkatapos mag-refresh. Malinis at payak na disenyo na gumagana sa telepono.

2. Booking page para sa maliit na negosyo

Gumawa ng booking page para sa [hair salon] ko. Pipili ang customer ng serbisyo ([cut 30 min, colour 90 min]), petsa at libreng time slot sa pagitan ng [9:00 at 18:00], tapos ilalagay ang pangalan, telepono at email. Hindi puwedeng mag-book ang dalawang tao ng parehong slot. Kailangan ko ng pribadong admin page, sa likod ng login, na naglilista ng paparating na booking bawat araw.

3. Internal tool

Gumawa ng internal tool para sa team ko para masubaybayan ang [equipment loans]. May pangalan, code at status (available, nasa labas, sira) ang bawat item. Nag-log in ang staff, puwedeng i-check out ang item sa sarili nila at ibalik ito. Magpakita ng talahanayan na may filter ayon sa status at kasaysayan kung sino ang may hawak ng bawat item.

4. Landing page na may waitlist

Gumawa ng isang-pahinang website para sa [produkto ko: meal-planning app para sa abalang magulang]. Hero na may headline, isang-pangungusap na subheading at email sign-up. Pagkatapos, tatlong benepisyo, maikling seksyong paano ito gumagana at FAQ. I-save ang mga email ng sign-up sa database at ipakita sa akin ang listahan sa pribadong admin page.

5. Client portal

Gumawa ng client portal para sa [design studio] ko. Nag-log in ang bawat client at ang nakikita lang nila ay sarili nilang mga proyekto, kasama ang status, mga file na in-upload ko at isang thread ng komento. Mag-log in ako bilang admin at makita ang lahat ng client. Hindi dapat makita ng mga client ang datos ng isa't isa.

6. Calculator o quote tool

Gumawa ng quote calculator para sa [cleaning business] ko. Mga input: bilang ng kuwarto, banyo, dagdag na serbisyo (oven, bintana, ref) at dalas (isang beses, lingguhan, buwanan). Ipakita ang presyo habang nagbabago ang mga pagpipilian, may breakdown. Mga presyo: [i-paste ang price list mo]. Magdagdag ng button para ipadala sa akin sa email ang quote request.

Mga planning prompt

Gamitin ang mga ito bago ang malaking feature, o kapag hindi ka sigurado kung paano ilalarawan ang isang bagay.

7. Magplano bago gumawa

Bago ka sumulat ng kahit anong code, ilarawan sa simpleng salita ang mga screen na bubuuin mo, ang datos na iimbakin mo at anumang desisyong kailangan mo mula sa akin. Maghintay ka ng OK ko.

8. Gawing unang bersyon ang magulong ideya

Ito ang ideya ko: [i-paste ang mga tala]. Magmungkahi ng pinakamaliit na unang bersyon na kapaki-pakinabang pa rin, sa 5–8 bullet point. Ilista ang iiwanan mo para sa susunod at kung bakit.

9. Itanong kung ano ang kulang

Anong mga tanong ang itatanong sa akin ng isang developer bago ito buuin? Itanong ang mga ito isa-isa, tapos ibuod ang mga sagot ko bilang maikling spec.

10. Suriin muna ang malaking pagbabago

Gusto kong magdagdag ng [team accounts kung saan sabay-sabay na ginagamit ng ilang tao ang isang workspace]. Ipaliwanag kung ano ang kailangang baguhin sa datos, mga screen at permiso, at ano ang puwedeng masira. Huwag pa munang baguhin ang anuman.

Mga prompt sa disenyo

11. Magtakda ng malinaw na istilo

I-restyle ang app: mainit na off-white na background, madilim na teksto, isang accent na kulay [#1F6F50], bilugang sulok, maluwag na espasyo at modernong sans-serif na font. Panatilihin ang layout at bawat feature nang eksakto gaya ng mga ito.

12. Kopyahin ang pakiramdam ng isang reference

Gawing parang kalmadong finance app ang dashboard: maraming puting espasyo, malalaki at matapang ang mga numero, maliit at kulay abo ang mga label, at isang simpleng chart sa itaas. Huwag kopyahin ang logo o teksto ng anumang brand.

13. Ayusin ang layout sa telepono

Sa telepono na 375px ang lapad, ang talahanayan sa [Orders page] ay nagsa-scroll sa gilid at nagkakapatong ang mga button. Gawing stacked card ang bawat hilera sa maliliit na screen. Huwag baguhin ang layout sa desktop.

14. Mga estado ng walang laman, naglo-load at may error

Magdagdag ng tamang estado sa [listahan ng Projects]: magiliw na walang laman na estado na may button para magdagdag ng unang proyekto, loading skeleton habang naglo-load ang datos, at malinaw na mensahe na may retry button kapag nabigo ang pag-load.

15. Suporta sa right-to-left

Magdagdag ng bersyong Arabic ng interface na may ganap na right-to-left na layout. Dapat i-flip ang mga icon na nakaturo sa direksyon; ang mga numero at petsa ay dapat gumamit ng locale format. Panatilihing English ang default.

Mga prompt sa datos at feature

16. Gawing permanente ang datos

Sa ngayon, nawawala ang datos ko kapag nag-refresh ako. Iimbak ito sa totoong database, at panatilihing gumagana ang kasalukuyang mga screen sa parehong paraan.

17. Magdagdag ng login

Magdagdag ng sign-up at login gamit ang email at password. Bawat user ay dapat makakita at makapag-edit lang ng sarili nilang [entries]. Ipakita ang email ng user sa top bar na may log-out button.

18. Magdagdag ng mga role

Magdagdag ng dalawang role: admin at member. Puwedeng magdagdag, mag-edit at magbura ng [products] ang mga admin; view lang ang puwede ng mga member. Ipatupad ito sa server, hindi lang sa pagtatago ng mga button.

19. Magdagdag ng search at filter

Magdagdag ng search box sa itaas ng [listahan ng contacts] na tumutugma sa pangalan, kumpanya o email habang nagta-type ako, at isang filter para sa [status]. Panatilihin ang kasalukuyang ayos ng pagkakasunod-sunod.

20. Magdagdag ng file upload

Payagan ang mga user na maglakip ng hanggang [5] larawan sa bawat [listing], pinakamalaki [5 MB] bawat isa. Ipakita ang thumbnail sa listing at mas malaking view kapag na-click. Ang may-ari lang ang puwedeng magbura ng sarili nilang larawan.

21. Mag-import mula sa spreadsheet

Magdagdag ng Import button na tumatanggap ng CSV na may mga column na [name, email, phone, notes], nagpapakita ng preview ng unang 10 hilera at hinahayaan akong kumpirmahin bago i-save. Laktawan ang mga hilerang walang email at sabihin sa akin kung ilan ang nilaktawan.

Mga prompt sa pag-aayos

22. Mag-report ng bug nang malinaw

Kapag [pinindot ko ang Save sa edit form], lumalabas ang "[eksaktong teksto ng error]" at hindi na-save ang pagbabago. Inaasahan: na-save ang pagbabago at bumabalik ako sa listahan. Hanapin ang sanhi, ipaliwanag ito sa isa o dalawang pangungusap, tapos ayusin.

23. Pigilan ang loop ng pag-aayos

Tatlong beses na nating sinubukang ayusin ito at pumapalya pa rin. Huminto sa pagbabago ng code. Ilista ang tatlong pinakamalamang na sanhi, kung paano suriin ang bawat isa, at alin sa tingin mo ang tama.

24. Bawiin ang mga side effect

Naayos ng huli mong pagbabago ang date picker pero nawala ang [sidebar]. Ibalik ang sidebar nang eksakto gaya ng dati at panatilihin ang ayos sa date picker.

25. Ipaliwanag bago magbago

Ipaliwanag kung paano kinakalkula ngayon ang [checkout total], hakbang-hakbang, na tinutukoy ang mga file na kasangkot. Huwag baguhin ang anuman.

Mga prompt sa pagsubok at pagsusuri

26. Mga edge case

Ilista ang 10 paraan kung paano masisira ng totoong user ang [booking form]: walang laman na field, napakahabang teksto, dobleng pag-click, dalawang taong sabay, maling time zone. Subukan ang bawat isa at ayusin ang sumasablay. Iulat kung ano ang binago mo.

27. Ibuod ang mga kamakailang pagbabago

Ibuod sa simpleng salita ang bawat pagbabagong ginawa mo sa huling [limang] hakbang, at markahan ang anumang maaaring makaapekto sa umiiral na datos.

Mga prompt sa seguridad

Ipares ang mga ito sa pahina namin tungkol sa kung ligtas ba ang vibe coding.

28. Suriin ang access sa datos

Suriin ang server code: maaari bang basahin o baguhin ng naka-log in na user ang [records] ng ibang user sa pamamagitan ng pagpalit ng ID sa request? Ipakita sa akin kung saan sinusuri ang access at ayusin ang anumang butas.

29. Suriin para sa nakalantad na secret

Ilista ang bawat API key, password o token na ginagamit ng app na ito at kung saan nakaimbak ang bawat isa. Siguruhing wala sa code na tumatakbo sa browser o nakasama sa mga file na naka-commit ang alinman sa mga ito. Ilipat sila sa secrets kung nasa ibang lugar sila.

Mga prompt sa pag-publish

30. Huling pagsusuri bago ilunsad

Malapit ko nang i-publish ito para sa totoong mga user. Dumaan ka rito bilang reviewer: mga sirang link, nawawalang page title at deskripsyon, mga form na walang validation, mabagal na page, console error at anumang mukhang hindi tapos sa telepono. Magbigay ng listahang nakaayos ayon sa kahalagahan, tapos ayusin ang nangungunang lima.

Mga prompt na iwasan

May ilang prompt na tiyak na nagbubunga ng mas masamang resulta:

• "Gawin mong mas maganda." Mas maganda paano? Pangalanan ang screen at ang pagbabago.
• "Ayusin mo ang lahat." Maraming babaguhin ang AI at hindi mo malalaman kung ano ang gumalaw.
• "Gamitin ang [library] at [framework] at [pattern]." Maliban kung may dahilan, ilarawan ang asal at hayaang piliin ng tool ang stack.
• "Ito ang API key ko: …" Huwag kailanman mag-paste ng secret sa chat. Gamitin ang secret settings ng tool.
• Sampung feature sa iisang mensahe. Hatiin ang mga ito.

Gawing ugali ang mga prompt

Pagkatapos ng ilang proyekto, magkakaroon ka ng sarili mong bersyon ng mga ito. Itago sa note at gamitin muli ang mga gumagana. Naaalala rin ng Mythex kung sino ka at paano ka nagtatrabaho sa iba't ibang proyekto, kaya ang mga kagustuhang paulit-ulit mo, gaya ng karaniwan mong istilo o stack, ay dinadala nang hindi mo na kailangang i-type muli.

Kung natigil ka sa unang prompt, pinapalawak ng libreng app prompt generator ang isang linyang ideya tungo sa mas buong panimulang prompt. At para makita kung ano ang nagagawa ng mga prompt na ito sa totoong gamit, basahin ang aming mga halimbawa ng vibe coding, o i-paste ang prompt 1 sa AI app builder at palitan ang mga panaklong ng sarili mong ideya.

Mga tanong