30 promptov pre vibe coding, ktoré si môžete skopírovať (cheat sheet)

Najlepšie prompty pre vibe coding sú krátke, konkrétne a týkajú sa správania: kto aplikáciu používa, čo môže robiť, čo uchováva a ako vyzerá. Nižšie je 30 promptov, ktoré si môžete skopírovať, zoskupených podľa fázy, v ktorej ste, od prvého vytvorenia po publikovanie. Časti v [hranatých zátvorkách] nahraďte vlastnými údajmi.

Fungujú v ktoromkoľvek tvorcovi aplikácií pomocou AI alebo kódovom agentovi. Ak chcete dôvody, ktoré za nimi stoja, náš dlhší návod na ako písať prompty pre tvorcov aplikácií pomocou AI vysvetľuje princípy. Táto stránka je cheat sheet.

Ako používať tento cheat sheet

• Začnite jedným promptom na prvé vytvorenie, potom používajte ostatné jeden po druhom.
• Testujte po každom prompte. Prekliknite sa zmenou skôr, než pošlete ďalšiu.
• Ponechajte si to, čo funguje. Väčšina nadväzujúcich promptov tu končí vetou „ostatné nechaj rovnaké“ z dobrého dôvodu.
• Vkladajte presný text. Chybové hlásenia, popisy tlačidiel a slová na obrazovke porazia opisy vždy.

Prompty na prvé vytvorenie

Tie určujú tvar aplikácie. Každý pomenúva používateľov, akcie, dáta a vzhľad.

1. Jednoduchý sledovač

Vytvor mi sledovač [návyku]. Môžem pridať [návyk] s názvom a farbou, odškrtnúť ho raz denne a vidieť 30-dňovú mriežku a aktuálnu sériu. Ulož všetko, nech je tam aj po obnovení stránky. Čistý, minimalistický dizajn, ktorý funguje na telefóne.

2. Rezervačná stránka pre malú firmu

Vytvor rezervačnú stránku pre môj [dámsky kaderník]. Zákazníci vyberú službu ([strih 30 min, farbenie 90 min]), dátum a voľný časový termín medzi [9:00 a 18:00], potom zadajú meno, telefón a e-mail. Dvaja ľudia nemôžu rezervovať ten istý termín. Potrebujem súkromnú admin stránku za prihlásením, ktorá zobrazuje nadchádzajúce rezervácie podľa dní.

3. Interný nástroj

Vytvor interný nástroj pre môj tím na sledovanie [výpožičiek vybavenia]. Každá položka má názov, kód a stav (dostupné, vypožičané, pokazené). Zamestnanci sa prihlásia, môžu položku vypožičať sebe a vrátiť ju. Zobraz tabuľku s filtrami podľa stavu a históriu, kto mal ktorú položku.

4. Vstupná stránka so zoznamom čakateľov

Vytvor jednostránkový web pre [môj produkt: aplikáciu na plánovanie jedál pre zaneprázdnených rodičov]. Hero sekcia s nadpisom, jednou vetou podnadpisu a registráciou e-mailom. Potom tri výhody, krátka sekcia ako to funguje a FAQ. Ukladaj registrácie e-mailom do databázy a zobraz mi zoznam na súkromnej admin stránke.

5. Klientsky portál

Vytvor klientsky portál pre moje [dizajnérske štúdio]. Každý klient sa prihlási a vidí iba svoje projekty so stavom, súbory, ktoré som nahral, a vlákno komentárov. Ja sa prihlásim ako admin a vidím všetkých klientov. Klienti nesmú nikdy vidieť dáta iných.

6. Kalkulačka alebo nástroj na cenové ponuky

Vytvor kalkulačku cenových ponúk pre moju [firmu na upratovanie]. Vstupy: počet spální, kúpeľní, dodatočné služby (rúra, okná, chladnička) a frekvencia (jednorazovo, týždenne, mesačne). Ukáž cenu pri zmene možností s rozpisom. Ceny: [vlož svoj cenník]. Pridaj tlačidlo na odoslanie žiadosti o ponuku e-mailom.

Prompty na plánovanie

Použite ich pred veľkou funkciou alebo keď si nie ste istí, ako niečo opísať.

7. Plánujte pred tvorbou

Predtým než napíšeš akýkoľvek kód, obyčajnými slovami opíš obrazovky, ktoré vytvoríš, dáta, ktoré uložíš, a rozhodnutia, ktoré odo mňa potrebuješ. Počkaj na môj súhlas.

8. Premeňte chaotický nápad na prvú verziu

Tu je môj nápad: [vlož poznámky]. Navrhni najmenšiu prvú verziu, ktorá je ešte užitočná, v 5–8 odrážkach. Vypíš, čo odložíš na neskôr a prečo.

9. Opýtajte sa, čo chýba

Aké otázky by ma vývojár pýtal, než by to začal stavať? Pýtaj sa ich jednu po druhej a potom zhrň moje odpovede do krátkej špecifikácie.

10. Najprv skontrolujte veľkú zmenu

Chcem pridať [tímové účty, pri ktorých viacero ľudí zdieľa jeden pracovný priestor]. Vysvetli, čo sa musí zmeniť v dátach, obrazovkách a oprávneniach, a čo sa môže pokaziť. Zatiaľ nič nemeň.

Prompty na dizajn

11. Nastavte jasný štýl

Uprav štýl aplikácie: teplé sivobiele pozadie, tmavý text, jedna akcentová farba [#1F6F50], zaoblené rohy, veľkorysé medzery a moderné bezpätkové písmo. Ponechaj rozloženie a každú funkciu presne tak, ako sú.

12. Skopírujte pocit z referencie

Nech dashboard pôsobí ako pokojná finančná aplikácia: veľa bieleho priestoru, čísla veľké a tučné, popisky malé a sivé, jeden jednoduchý graf hore. Nekopíruj logo ani text žiadnej značky.

13. Opravte rozloženie na telefóne

Na telefóne široko 375 px sa tabuľka na stránke [Objednávky] posúva do strán a tlačidlá sa prekrývajú. Na malých obrazovkách zmeň každý riadok na zoradenú kartu. Rozloženie na počítači nemeň.

14. Prázdne, načítavajúce sa a chybové stavy

Pridaj správne stavy do [zoznamu projektov]: prívetivý prázdny stav s tlačidlom na pridanie prvého projektu, načítavací skeleton, kým sa dáta nahrávajú, a jasnú správu s tlačidlom na opakovanie, ak načítanie zlyhá.

15. Podpora pravo-ľavého písania

Pridaj arabskú verziu rozhrania s plným rozložením sprava doľava. Ikony, ktoré ukazujú smer, sa majú otočiť; čísla a dátumy použijú formát lokality. Angličtina nech zostane predvolená.

Prompty pre dáta a funkcie

16. Zabezpečte uchovanie dát

Teraz sa moje dáta po obnovení stránky stratia. Ulož ich namiesto toho do skutočnej databázy a nechaj aktuálne obrazovky fungovať rovnako.

17. Pridajte prihlasovanie

Pridaj registráciu a prihlásenie e-mailom a heslom. Každý používateľ môže vidieť a upravovať iba svoje [záznamy]. Zobraz e-mail používateľa v hornej lište s tlačidlom na odhlásenie.

18. Pridajte roly

Pridaj dve roly: admin a člen. Admini môžu pridávať, upravovať a mazať [produkty]; členovia ich môžu iba zobrazovať. Vynucuj to na serveri, nie iba skrývaním tlačidiel.

19. Pridajte vyhľadávanie a filtre

Pridaj vyhľadávacie pole nad [zoznam kontaktov], ktoré pri písaní zodpovedá menu, firme alebo e-mailu, plus filter pre [stav]. Zachovaj aktuálne poradie zoradenia.

20. Pridajte nahrávanie súborov

Nech používatelia pripoja až [5] obrázkov ku každému [inzerátu], najviac [5 MB] na obrázok. Na inzeráte zobraz náhľady a po kliknutí väčší pohľad. Vymazať obrázky môže iba vlastník.

21. Import z tabuľky

Pridaj tlačidlo Import, ktoré prijme CSV so stĺpcami [meno, e-mail, telefón, poznámky], ukáže náhľad prvých 10 riadkov a nechá ma potvrdiť pred uložením. Preskoč riadky bez e-mailu a povedz mi, koľko sa ich preskočilo.

Prompty na opravy

22. Jasne nahláste chybu

Keď [kliknem na Uložiť vo formulári na úpravu], zobrazí sa „[presné znenie chyby]“ a zmena sa neuloží. Očakávané: zmena sa uloží a vrátim sa na zoznam. Nájdi príčinu, vysvetli ju v jednej či dvoch vetách a potom ju oprav.

23. Zastavte slučku opráv

Tri razy sme sa pokúsili toto opraviť a stále to zlyháva. Prestaň meniť kód. Vypíš tri najpravdepodobnejšie príčiny, ako overiť každú z nich a ktorú si myslíš, že je to.

24. Vráťte vedľajšie efekty späť

Tvoja posledná zmena opravila výber dátumu, ale [bočný panel] zmizol. Vráť bočný panel presne tak, ako bol, a ponechaj opravu výberu dátumu.

25. Vysvetlite pred zmenou

Vysvetli, ako sa teraz počíta [celková suma v pokladni], krok za krokom, s odkazom na zapojené súbory. Nič nemeň.

Prompty na testovanie a kontrolu

26. Okrajové prípady

Vypíš 10 spôsobov, ako by skutočný používateľ mohol rozbiť [rezervačný formulár]: prázdne polia, veľmi dlhý text, dvojité kliknutia, dvaja ľudia naraz, nesprávne časové pásma. Otestuj každý a oprav, čo zlyhá. Nahlás, čo si zmenil.

27. Zhrňte nedávne zmeny

Zhrň obyčajnými slovami každú zmenu, ktorú si urobil v posledných [piatich] krokoch, a označ všetko, čo by mohlo ovplyvniť existujúce dáta.

Bezpečnostné prompty

Spárujte ich s našou stránkou o tom, či je vibe coding bezpečný.

28. Skontrolujte prístup k dátam

Skontroluj serverový kód: môže prihlásený používateľ čítať alebo meniť cudzie [záznamy] zmenou ID v požiadavke? Ukáž mi, kde sa prístup kontroluje, a oprav všetky medzery.

29. Skontrolujte uniknuté tajomstvá

Vypíš každý API kľúč, heslo alebo token, ktorý táto aplikácia používa, a kde je každý uložený. Uisti sa, že žiadny z nich nie je v kóde bežiacom v prehliadači ani zapísaný v súboroch. Ak sú, presuň ich do tajomstiev.

Prompty na publikovanie

30. Predpublikačná kontrola

Chystám sa to publikovať pre skutočných používateľov. Prejdi to ako recenzent: pokazené odkazy, chýbajúce titulky a popisy stránok, formuláre bez validácie, pomalé stránky, chyby v konzole a všetko, čo na telefóne vyzerá nedokončene. Daj mi zoznam zoradený podľa dôležitosti a potom oprav prvých päť.

Prompty, ktorým sa treba vyhnúť

Niektoré prompty spoľahlivo vytvoria horšie výsledky:

• „Urob to lepšie.“ Ako lepšie? Pomenujte obrazovku a zmenu.
• „Oprav všetko.“ AI zmení veľa a vy nebudete vedieť, čo sa pohlo.
• „Použi [knižnicu] a [framework] a [vzor].“ Pokiaľ na to nemáte dôvod, opíšte správanie a nechajte nástroj vybrať technológie.
• „Tu je môj API kľúč: …“ Nikdy nevkladajte tajomstvá do chatu. Použite nastavenia tajomstiev nástroja.
• Desať funkcií v jednej správe. Rozdeľte ich.

Premena promptov na návyk

Po niekoľkých projektoch budete mať vlastné verzie týchto promptov. Uchovajte ich v poznámke a používajte tie, ktoré fungujú. Mythex si navyše pamätá, kto ste, a ako pracujete naprieč projektmi, takže preferencie, ktoré opakujete, napríklad váš obvyklý štýl alebo technológie, sa prenesú bez toho, aby ste ich museli znova písať.

Ak uviazli na prvom prompte, bezplatný generátor promptov pre aplikácie premení nápad na jednu vetu na väčší štartovací prompt. A ak chcete vidieť, čo tieto prompty v praxi vytvoria, prečítajte si naše príklady vibe codingu, alebo vložte prompt 1 do AI tvorcu aplikácií a zmeňte hranaté zátvorky na svoj nápad.

Otázky