30 vibe coding prompti, mida saad kopeerida (spikker)

Parimad vibe coding promptid on lühikesed, täpsed ja käituma suunatud: kes rakendust kasutab, mida nad seal teha saavad, mida see hoiab ja kuidas see välja näeb. Allpool on 30 prompti, mida saad kopeerida ja kleepida, grupeeritud sinu etapi järgi, esimesest ehitusest avaldamiseni. Asenda [nurksulgudes] olevad osad oma detailidega.

Need töötavad iga AI-rakenduste looja või kodeerimisagendi juures. Kui tahad nende taga olevat mõtlemist, selgitab meie pikem juhend kuidas kirjutada prompte AI-rakenduste loojatele põhimõtteid. See leht on spikker.

Kuidas seda spikrit kasutada

• Alusta ühe esimese ehituse promptiga, seejärel kasuta teisi ükshaaval.
• Testi pärast iga prompti. Klõpsa muudatus läbi enne järgmise saatmist.
• Hoia, mis töötab. Enamik siin olevaid järelprompte lõpevad fraasiga „hoia kõik muu samana“ põhjusega.
• Kleebi täpne tekst. Veateated, nuppude sildid ja ekraanil olevad sõnad lööb iga kirjeldus.

Esimese ehituse promptid

Need määravad rakenduse kuju. Igaüks nimetab kasutajad, tegevused, andmed ja välimuse.

1. Lihtne jälgija

Ehita mulle [harjumuse] jälgija. Saan lisada [harjumuse] nime ja värviga, märkida selle üks kord päevas ära ning näha 30-päevast ruudustikku ja oma praegust seeriat. Salvesta kõik nii, et see oleks ka pärast värskendamist alles. Puhas minimalistlik disain, mis töötab telefonil.

2. Väikeettevõtte broneerimisleht

Ehita mu [juuksurisalongi] jaoks broneerimisleht. Kliendid valivad teenuse ([lõikus 30 min, värvimine 90 min]), kuupäeva ja vaba aja vahemikus [9:00 kuni 18:00], seejärel sisestavad nime, telefoni ja e-posti. Kaks inimest ei saa broneerida sama aega. Vajan privaatset administraatorilehte sisselogimise taga, mis loetleb tulevased broneeringud päeva kaupa.

3. Sisemine tööriist

Ehita mu meeskonnale sisemine tööriist [seadmete laenutuste] jälgimiseks. Igal esemel on nimi, kood ja staatus (saadaval, laenatud, katkine). Töötajad logivad sisse, saavad võtta eseme endale välja ja tagastada selle. Näita tabelit, mida saab filtreerida staatuse järgi, ning ajalugu, kes mis eseme omas.

4. Maandumisleht ootenimekirjaga

Ehita üheleheline veebisait [minu tootele: söögiplaneerimise rakendus hõivatud vanematele]. Pealkiri lausega, ühe lause alapealkiri ja e-posti registreerimine. Seejärel kolm eelist, lühike, kuidas see töötab, ja KKK. Salvesta registreerumise e-kirjad andmebaasi ja näita mulle nimekirja privaatsel administraatorilehel.

5. Kliendiportaal

Ehita mu [disainistuudio] jaoks kliendiportaal. Iga klient logib sisse ja näeb ainult oma projekte koos staatuse, mina üles laaditud failide ja kommentaarilõimega. Mina login sisse administraatorina ja näen kõiki kliente. Kliendid ei tohi kunagi näha teiste andmeid.

6. Kalkulaator või pakkumise tööriist

Ehita mu [koristusfirma] jaoks hinnapakkumise kalkulaator. Sisendid: magamistubade arv, vannitubade arv, lisateenused (ahi, aknad, külmkapp) ja sagedus (üks kord, iganädalaselt, igakuiselt). Näita hinda valikute muutumisel koos erittelusega. Hinnad: [kleebi oma hinnakiri]. Lisa nupp, mis saadab pakkumise päringu mulle e-kirjaga.

Planeerimise promptid

Kasuta neid enne suurt funktsiooni või alati, kui pole kindel, kuidas midagi kirjeldada.

7. Planeeri enne ehitamist

Enne kui kirjutad ühtegi koodi, kirjelda lihtsates sõnades ekraane, mida ehitad, andmeid, mida salvestad, ja otsuseid, mida vajad minu käest. Oota mu nõusolekut.

8. Muuda segane idee esimeseks versiooniks

Siin on mu idee: [kleebi märkmed]. Paku väikseim esimene versioon, mis on ikka kasulik, 5–8 punktina. Loetle, mida jätaksid hilisemaks, ja miks.

9. Küsi, mis puudu on

Milliseid küsimusi küsiks arendaja minult enne selle ehitamist? Küsi need üks kaupa, seejärel võta mu vastused kokku lühikese spetsifikatsioonina.

10. Kontrolli suurt muudatust enne

Tahan lisada [meeskonnakontod, kus mitu inimest jagavad ühte töökeskkonda]. Selgita, mis andmetes, ekraanides ja õigustes peab muutuma ja mis võib katki minna. Ära veel midagi muuda.

Disaini promptid

11. Sea selge stiil

Uuenda rakenduse stiili: soe kreemjas taust, tumedad tekstid, üks rõhuvärv [#1F6F50], ümardatud nurgad, avar vahe ja kaasaegne sans-serif font. Hoia paigutus ja iga funktsioon täpselt samad.

12. Kopeeri viide tunnet

Tee juhtpaneel tundma nagu rahulik finantsrakendus: palju tühja ruumi, suured paksud numbrid, väikesed hallid sildid ja üks lihtne diagramm ülaosas. Ära kopeeri ühegi brändi logo ega teksti.

13. Paranda telefonipaigutus

Telefonil, mis on 375px lai, kerib tabel [Tellimuste lehel] külgsuunas ja nupud kattuvad. Muuda iga rida väikestel ekraanidel pinutud kaardiks. Ära muuda lauaarvuti paigutust.

14. Tühjad, laadimis- ja veaolekud

Lisa [Projektide nimekirjale] korralikud olekud: sõbralik tühi olek nupuga esimese projekti lisamiseks, laadimise skelett andmete laadimise ajal ning selge teade koos uuesti proovimise nupuga, kui laadimine ebaõnnestub.

15. Paremalt vasakule tugi

Lisa liidesele araabiakeelne versioon täieliku paremalt vasakule paigutusega. Suunda näitavad ikoonid peavad pöörduma; numbrid ja kuupäevad kasutavad keelepõhist vormingut. Hoia inglise keel vaikimisi.

Andmete ja funktsioonide promptid

16. Tee andmed püsivaks

Praegu kaovad mu andmed värskendamisel. Salvesta need selle asemel päris andmebaasi ja hoia praegused ekraanid samamoodi töötamas.

17. Lisa sisselogimine

Lisa registreerimine ja sisselogimine e-posti ja parooliga. Iga kasutaja näeb ja muudab ainult oma [kirjeid]. Näita kasutaja e-posti ülaosas ribal koos väljalogimise nupuga.

18. Lisa rollid

Lisa kaks rolli: administraator ja liige. Administraatorid saavad lisada, muuta ja kustutada [tooteid]; liikmed saavad neid ainult vaadata. Jõusta see serveris, mitte ainult peites nupud.

19. Lisa otsing ja filtrid

Lisa [kontaktide nimekirja] kohale otsingukast, mis vastab nimele, ettevõttele või e-postile, kui kirjutan, ning filter [staatuse] järgi. Hoia praegune sorteerimisjärjestus.

20. Lisa failide üleslaadimine

Lase kasutajatel lisada igale [kuulutusele] kuni [5] pilti, maksimaalselt [5 MB] kumbki. Näita kuulutusel pisipilte ja klõpsul suuremat vaadet. Ainult omanik saab oma pilte kustutada.

21. Impordi tabelist

Lisa Impordi nupp, mis võtab CSV-faili veergudega [nimi, e-post, telefon, märkmed], näitab esimese 10 rea eelvaadet ja lasen mul kinnitada enne salvestamist. Jäta vahele read ilma e-postita ja ütle, mitu jäeti vahele.

Vigade parandamise promptid

22. Teata veast selgelt

Kui ma [klõpsan muutmisvormil Salvesta], näen teadet „[täpne veateade]“ ja muudatust ei salvestata. Oodatud: muudatus salvestub ja naasen nimekirja. Leia põhjus, selgita seda ühe-kahe lausega ja paranda see.

23. Peata parandusahel

Oleme seda kolm korda parandada üritanud ja see ikka ebaõnnestub. Lõpeta koodi muutmine. Loetle kolm kõige tõenäolisemat põhjust, kuidas igaüks kontrollida ja millist sa arvad olevat.

24. Paranda kõrvalmõjud

Su viimane muudatus parandas kuupäevavaliku, kuid [külgriba] kadus. Too külgriba täpselt tagasi nagu oli ja hoia kuupäevavaliku parandus alles.

25. Selgita enne muutmist

Selgita samm-sammult, kuidas [ostukorvi kogusumma] praegu arvutatakse, viidates asjaomastele failidele. Ära muuda midagi.

Testimise ja ülevaatuse promptid

26. Äärmuslikud juhud

Loetle 10 viisi, kuidas päris kasutaja võib [broneerimisvormi] katki teha: tühjad väljad, väga pikk tekst, topeltklõpsud, kaks inimest korraga, valed ajavööndid. Testi iga ja paranda, mis ebaõnnestub. Teata, mida muutsid.

27. Võta viimased muudatused kokku

Võta lihtsates sõnades kokku kõik muudatused viimase [viie] sammu jooksul ja märgi kõik, mis võib mõjutada olemasolevaid andmeid.

Turvalisuse promptid

Kombineeri need lehega kas vibe coding on ohutu?.

28. Kontrolli andmetele juurdepääsu

Vaata serveri koodi: kas sisselogitud kasutaja saab lugeda või muuta teise kasutaja [kirjeid], muutes päringus ID-d? Näita, kus juurdepääsu kontrollitakse, ja paranda puudused.

29. Kontrolli avalikke saladusi

Loetle iga API-võti, parool või token, mida see rakendus kasutab, ja kus iga üks on hoitud. Veendu, et ükski neist ei ole brauseris jooksvas koodis ega failides. Kui on, liiguta need saladusi.

Avaldamise promptid

30. Enne starti läbivaatus

Olen avaldamas seda päris kasutajatele. Vaata see üle kui ülevaataja: katkised lingid, puuduvad lehe pealkirjad ja kirjeldused, valideerimata vormid, aeglased lehed, konsooli vead ja kõik, mis tundub telefonil pooleli. Anna mulle nimekiri olulisuse järjekorras ja paranda esimesed viis.

Prompti, mida vältida

Mõned promptid annavad järjekindlalt halvema tulemuse:

• „Tee see paremaks.“ Kuidas paremaks? Nimeta ekraan ja muudatus.
• „Paranda kõik.“ AI muudab palju ja sa ei tea, mis liikus.
• „Kasuta [teeki] ja [raamistikku] ja [mustrit].“ Kui sul pole põhjust, kirjelda käitumist ja lase tööriistal valida tehnoloogiapinu.
• „Siin on mu API-võti: …“ Ära kunagi kleebi saladusi vestlusse. Kasuta tööriista saladuste seadeid.
• Kümme funktsiooni ühes sõnumis. Jaga need ükshaaval.

Promptidest harjumuse kujundamine

Pärast mõnda projekti on sul oma versioonid nendest. Hoia neid märkmes ja kasuta uuesti neid, mis töötavad. Mythex mäletab ka, kes sa oled ja kuidas töötad projektide vahel, nii et eelistused, mida korrad, nagu sinu tavaline stiil või tehnoloogiapinu, kantakse üle ilma uuesti kirjutamata.

Kui oled esimese prompti pärast kinni, muudab tasuta rakenduse prompti generaator ühe lausega idee põhjalikumaks alguspromptiks. Ja et näha, mida need promptid praktikas annavad, loe meie vibe coding näiteid, või kleebi prompt 1 AI-rakenduste loojasse ja muuda nurksulud oma ideeks.

Küsimused