30 vibe coding prompt, amit bemásolhatsz (puska)

A legjobb vibe coding promptok rövidek, konkrétak és a viselkedésről szólnak: ki használja az appot, mit tehet benne, mit tárol, és hogyan néz ki. Alább 30 promptot találsz, amelyeket bemásolhatsz, a jelenlegi szakaszod szerint csoportosítva, az első építéstől a közzétételig. Cseréld ki a [szögletes zárójelben] lévő részeket a saját adataiddal.

Bármelyik AI app-építőben vagy kódolóügynökben működnek. Ha a mögöttük álló elveket szeretnéd, a hosszabb útmutatónk, hogyan írj promptot AI app-építőknek, elmagyarázza őket. Ez az oldal a puska.

Hogyan használd ezt a puskát

• Kezdj egy első építési prompttal, aztán használd a többit egyesével.
• Teszteld minden prompt után. Kattints át a változtatáson, mielőtt a következőt küldöd.
• Tartsd meg, ami működik. A legtöbb követő prompt itt azzal végződik, hogy „minden mást tarts meg ugyanúgy”, és ennek oka van.
• Illeszd be pontosan a szöveget. A hibaüzenetek, a gombfeliratok és a képernyőn lévő szavak minden alkalommal többet érnek, mint a leírások.

Első építési promptok

Ezek adják meg az app alakját. Mindegyik megnevezi a felhasználókat, a műveleteket, az adatokat és a megjelenést.

1. Egyszerű követő

Építs nekem egy [szokás] követőt. Hozzáadhatok egy [szokást] névvel és színnel, naponta egyszer kipipálhatom, és láthatom a 30 napos rácsot és a jelenlegi sorozatomat. Mentsd el mindent, hogy frissítés után is megmaradjon. Tiszta, minimalista dizájn, amely telefonon is működik.

2. Kisvállalkozás foglalási oldala

Építs foglalási oldalt a [fodrászszalonomnak]. Az ügyfelek kiválasztanak egy szolgáltatást ([30 perces vágás, 90 perces színezés]), egy dátumot és egy szabad időpontot [9:00 és 18:00 között], majd megadják a nevüket, telefonszámukat és e-mail címüket. Két ember nem foglalhatja le ugyanazt az időpontot. Kell egy privát adminoldal, bejelentkezés mögött, amely napi bontásban listázza a közelgő foglalásokat.

3. Belső eszköz

Építs belső eszközt a csapatomnak a [eszközkölcsönzések] nyomon követésére. Minden tételnek van neve, kódja és állapota (elérhető, kikölcsönözve, hibás). A munkatársak bejelentkeznek, kivehetik maguknak a tételt, és visszaadhatják. Mutass egy táblázatot állapot szerinti szűrőkkel, és minden tételhez előzményeket, hogy ki volt nála.

4. Céloldal várólistával

Építs egyoldalas weboldalt a következőhöz: [a termékem: étkezéstervező app elfoglalt szülőknek]. Főcím egy mondatos alcímmel és e-mailes feliratkozással. Utána három előny, egy „hogyan működik” rész és egy GYIK. Mentsd a feliratkozó e-maileket egy adatbázisba, és mutasd a listát egy privát adminoldalon.

5. Ügyfélportál

Építs ügyfélportált a [tervezőstúdiómnak]. Minden ügyfél bejelentkezik, és csak a saját projektjeit látja, státusszal, az általam feltöltött fájlokkal és egy hozzászólási szállal. Adminként bejelentkezem, és minden ügyfelet látok. Az ügyfelek soha nem láthatják egymás adatait.

6. Kalkulátor vagy árajánlat-eszköz

Építs árajánlat-kalkulátort a [takarítóvállalkozásomnak]. Bemenetek: hálószobák száma, fürdőszobák száma, extra szolgáltatások (sütő, ablakok, hűtő) és gyakoriság (egyszeri, heti, havi). Mutasd az árat, ahogy a beállítások változnak, bontással. Árak: [illessz be az árlistádat]. Adj egy gombot, amellyel az árajánlat-kérést e-mailben elküldöm magamnak.

Tervezési promptok

Használd ezeket egy nagy funkció előtt, vagy amikor nem vagy biztos abban, hogyan írd le valamit.

7. Tervezz építés előtt

Mielőtt bármilyen kódot írnál, írd le egyszerű szavakkal, milyen képernyőket építenél, milyen adatokat tárolnál, és miben kell döntenem. Várd meg a jóváhagyásomat.

8. Egy zavaros ötletből első változat

Itt az ötletem: [illeszd be a jegyzeteidet]. Javasolj a legkisebb olyan első változatot, amely még hasznos, 5–8 felsorolásjelben. Sorold fel, mit hagynál későbbre, és miért.

9. Kérdezd meg, mi hiányzik

Milyen kérdéseket tenne fel nekem egy fejlesztő, mielőtt ezt megépíti? Tedd fel őket egyesével, aztán foglald össze a válaszaimat rövid specifikációban.

10. Nagy változtatás előtt ellenőrizd

Szeretnék hozzáadni [csapatfiókokat, ahol több ember közös munkaterületet használ]. Magyarázd el, mit kell változtatni az adatokban, a képernyőkön és a jogosultságokban, és mi törhet el. Még ne változtass semmit.

Dizájn promptok

11. Adj egyértelmű stílust

Dizájnold át az appot: meleg, törtfehér háttér, sötét szöveg, egy kiemelő szín [#1F6F50], lekerekített sarkok, bőséges térköz és modern sans-serif betűtípus. Tartsd meg az elrendezést és minden funkciót pontosan úgy, ahogy van.

12. Másold egy referencia hangulatát

Legyen az irányítópult hatása olyan, mint egy nyugodt pénzügyi appé: sok fehér tér, nagy, vastag számok, kicsi, szürke címkék, és egy egyszerű diagram a tetején. Ne másolj márkajelzést, logót vagy szöveget.

13. Javítsd a telefonos elrendezést

375 px széles telefonon a [Rendelések oldal] táblázata oldalra gördül, és a gombok egymásra csúsznak. Kis képernyőn minden sort alakíts álló kártyává. Az asztali elrendezést ne változtasd.

14. Üres, betöltő és hibaállapotok

Adj megfelelő állapotokat a [Projektek listához]: barátságos üres állapot egy gombbal az első projekt hozzáadásához, betöltési váz, amíg az adat töltődik, és egyértelmű üzenet újrapróbálás gombbal, ha a betöltés nem sikerül.

15. Jobbról balra támogatás

Adj hozzá arab nyelvi változatot az felülethez teljes jobbról balraz elrendezéssel. Az irányt jelző ikonok forduljanak meg; a számok és dátumok a nyelvi formátumot kövessék. Az angol maradjon az alapértelmezett.

Adat- és funkciópromptok

16. Tedd tartóssá az adatot

Most a frissítéskor eltűnnek az adataim. Helyette tárold őket valódi adatbázisban, és a jelenlegi képernyők működjenek ugyanúgy.

17. Adj bejelentkezést

Adj hozzá regisztrációt és bejelentkezést e-mail címmel és jelszóval. Minden felhasználó csak a saját [bejegyzéseit] lássa és szerkeszthesse. Mutasd a felhasználó e-mail címét a felső sávban egy kijelentkezés gombbal.

18. Adj szerepköröket

Adj hozzá két szerepkört: adminisztrátor és tag. Az adminok hozzáadhatják, szerkeszthetik és törölhetik a [termékeket]; a tagok csak megtekinthetik őket. Ezt a szerveren érvényesítsd, ne csak a gombok elrejtésével.

19. Adj keresést és szűrőket

Adj egy keresőmezőt a [partnerlista] fölé, amely gépelés közben a nevre, cégre vagy e-mailre szűr, plusz egy szűrőt a [státuszra]. Tartsd meg a jelenlegi rendezési sorrendet.

20. Adj fájlfeltöltést

Engedd, hogy a felhasználók csatoljanak legfeljebb [5] képet minden [hirdetéshez], darabonként legfeljebb [5 MB]. A hirdetésen mutass bélyegképeket, kattintásra pedig nagyobb nézetet. Csak a tulajdonos törölhesse a képeit.

21. Importálás táblázatból

Adj egy Importálás gombot, amely [név, e-mail, telefon, megjegyzés] oszlopokat tartalmazó CSV-t fogad, mutasson előnézetet az első 10 sorról, és engedje, hogy mentés előtt megerősítsem. Ugorjaz át az e-mail nélküli sorokat, és mondja meg, hány sort hagyott ki.

Hibajavító promptok

22. Jelents hibát világosan

Amikor a [szerkesztőűrlapon a Mentés gombra kattintok], ezt látom: „[pontos hibaszöveg]”, és a változtatás nem mentődik. Elvárt: a változtatás mentődik, és visszatérek a listához. Keresd meg az okot, magyarázd el egy-két mondatban, majd javítsd.

23. Állítsd meg a javítási kört

Háromszor próbáltuk már javítani, és még mindig hibás. Állj le a kódváltoztatással. Sorold fel a három legvalószínűbb okot, hogyan ellenőrizhető mindegyik, és melyikre gondolsz.

24. Vond vissza a mellékhatásokat

Az utolsó változtatásod javította a dátumválasztót, de a [oldalsáv] eltűnt. Állítsd vissza az oldalsávot pontosan úgy, ahogy volt, és tartsd meg a dátumválasztó javítását.

25. Magyarázd el, mielőtt változtatsz

Magyarázd el lépésről lépésre, hogyan számítódik ki most a [fizetés végösszege], az érintett fájlokra hivatkozva. Ne változtass semmit.

Teszt- és átnézési promptok

26. Szélsőséges esetek

Sorolj fel 10 módot, ahogyan egy valódi felhasználó eltörheti a [foglalási űrlapot]: üres mezők, nagyon hosszú szöveg, dupla kattintás, két ember egyszerre, rossz időzónák. Teszteld mindet, és javítsd, ami elbukik. Írd le, mit változtattál.

27. Foglald össze a legutóbbi változtatásokat

Foglald össze egyszerű szavakkal az utolsó [öt] lépésben tett összes változtatást, és jelezd, amelyik érintheti a meglévő adatokat.

Biztonsági promptok

Ezeket párosítsd az biztonságos-e a vibe coding? oldalunkkal.

28. Ellenőrizd az adathozzáférést

Nézd át a szerverkódot: egy bejelentkezett felhasználó be tudja olvasni vagy módosítani egy másik felhasználó [rekordjait] egy kérésben az azonosító megváltoztatásával? Mutasd meg, hol ellenőrzik a hozzáférést, és javítsd a hiányosságokat.

29. Ellenőrizd a kiszivárgott titkokat

Sorold fel minden API-kulcsot, jelszót vagy tokent, amelyet ez az app használ, és azt, hol van tárolva. Győződj meg róla, hogy egyik sincs a böngészőben futó kódban vagy a fájlokban commitolva. Ha mégis, tedd titokként a szerverre.

Közzétételi promptok

30. Közzététel előtti átnézés

Éppen valódi felhasználóknak akarom közzétenni. Nézd át reviewerként: törött linkek, hiányzó oldalcímek és leírások, validáció nélküli űrlapok, lassú oldalak, konzolhibák, és minden, ami befejezetlennek látszik telefonon. Adj fontosság szerinti listát, majd javítsd az első ötöt.

Kerülendő promptok

Vannak promptok, amelyek megbízhatóan rosszabb eredményt adnak:

• „Csináld jobbra.” Jobbra hogyan? Nevezd meg a képernyőt és a változtatást.
• „Javíts ki mindent.” Az AI sokat fog változtatni, és nem fogod tudni, mi mozdult el.
• „Használd a [könyvtárat], a [keretrendszert] és a [mintát].” Hacsak nincs rá okod, írd le a viselkedést, és hagyd, hogy az eszköz válasszon technológiai alapot.
• „Itt az API-kulcsom: …” Soha ne illessz be titkot chatbe. Használd az eszköz titokbeállításait.
• Tíz funkció egy üzenetben. Bontsd szét őket.

A promptok szokássá tétele

Néhány projekt után megvan a saját változatod ezekből. Tartsd egy jegyzetben, és használd újra azokat, amelyek működnek. A Mythex projektek között is megjegyzi, ki vagy és hogyan dolgozol, így az ismétlődő preferenciáid, például a szokásos stílusod vagy technológiai alapod, újraírás nélkül is átöröklődnek.

Ha elakadsz az első promptnál, az ingyenes app-prompt generátor egy egysoros ötletet teljesebb kiindulópromptá alakít. Ha pedig látni szeretnéd, mit adnak ezek a promptok a gyakorlatban, olvasd el a vibe coding példákat, vagy illeszd be az 1-es promptot az AI app-építőbe, és cseréld ki a szögletes zárójeleket a saját ötletedre.

Kérdések