Príklady vibe codingu: 10 skutočných typov aplikácií, prompty a čo sa pokazilo

Najbežnejšie príklady vibe codingu sú malé, užitočné webové aplikácie: sledovače, rezervačné stránky, interné nástroje, klientske portály, vstupné stránky, kvízy, dashboardy a jednoduché AI nástroje. Nižšie je desať z nich. Pri každom uvidíte, kto ho tvorí, prvý prompt, čo sa zvyčajne pokazí, a nasledujúci prompt, ktorý to opraví.

Sú to zloženiny projektov, s ktorými ľudia najčastejšie prichádzajú do nástrojov na tvorbu aplikácií pomocou AI, nie prípadové štúdie jedného človeka. Prompty sa dajú kopírovať. Chyby sú tie, ktoré sa opakujú znova a znova, a preto sú to najužitočnejšia časť. Ak je pre vás vibe coding nový, začnite s čo je vibe coding.

1. Osobný rozpočtový sledovač

Kto ho tvorí: jednotlivci, ktorí už skúsili tabuľky a vzdali to.

Prvý prompt:

Vytvor mesačný rozpočtový sledovač. Pridávam výdavky so sumou, kategóriou (jedlo, nájom, doprava, zábava, iné), dátumom a poznámkou. Zobraz celkovú sumu tohto mesiaca podľa kategórie ako stĺpcový graf a zoznam posledných výdavkov. Môžem nastaviť rozpočet pre každú kategóriu a vidieť, koľko zostáva.

Čo sa pokazilo: graf počítal všetky výdavky, aké kedy boli zadané, nielen tohto mesiaca, takže už v druhom mesiaci vyzerala každá kategória prečerpaná. Suma zadaná s čiarkou („1,200“) sa navyše uložila ako 1.

Opravný prompt:

Graf a súčty majú zahŕňať iba výdavky z vybraného mesiaca. Pridaj výber mesiaca hore, predvolene aktuálny mesiac. Súmy zadané s čiarkami alebo medzerami tiež prijímaj a ukladaj ako čísla.

Ponaučenie: „tento mesiac“ je pravidlo. Pravidlá treba vysloviť nahlas.

2. Rezervačná stránka pre malý salón

Kto ju tvorí: majitelia malých firiem, ktorí sú unavení rezervovať telefonicky a cez správy.

Prvý prompt:

Vytvor rezervačnú stránku pre môj salón. Zákazníci si vyberú službu, dátum a voľný časový termín, potom zadajú meno a telefón. Mám súkromnú admin stránku za prihlásením, ktorá zobrazuje rezervácie podľa dní.

Čo sa pokazilo: dvaja zákazníci si rezervovali ten istý termín o 10:00 v rozmedzí minúty, pretože stránka dostupnosť kontrolovala iba pri prvom načítaní. Farbenie na 90 minút navyše neblokovalo nasledujúce termíny.

Opravný prompt:

Keď zákazník odošle rezerváciu, na serveri over, že každý termín, ktorý zaberá, je stále voľný, a ak nie, odmietni ju s hláškou „Tento čas bol práve obsadený“. Služba blokuje celú svoju dĺžku, takže rezervácia na 90 minút o 10:00 blokuje 10:00, 10:30 a 11:00.

Ponaučenie: všetko, čo môžu dvaja ľudia urobiť naraz, potrebuje kontrolu na serveri. Úplnú verziu nájdete v ako vytvoriť aplikáciu na rezervácie.

3. Reštauračné menu s QR kódom

Kto ho tvorí: majitelia kaviarní a reštaurácií, ktorí tlačia menu príliš často.

Prvý prompt:

Vytvor mobilnú stránku s menu pre moju kaviareň. Sekcie pre raňajky, obed, nápoje a dezerty, každá položka s názvom, cenou, krátkym popisom a označením diéty (vegánske, bezlepkové). Potrebujem admin stránku na úpravu položiek a označenie vypredaných. Zobraz QR kód, ktorý môžem vytlačiť a ktorý vedie na menu.

Čo sa pokazilo: nič sa nerozbilo, ale menu bolo na kaviarenskom Wi-Fi pomalé, pretože pri každej položke sa načítavali plnorozmerné fotky z telefónu.

Opravný prompt:

Fotky v menu sú príliš ťažké. Zmenši nahrané obrázky na najviac 800 px na šírku, skomprimuj ich a načítavaj postupne podľa toho, ako návštevník scrolluje.

Ponaučenie: testujte na pomalom pripojení, nie len vo svojej kancelárii.

4. Sledovač vybavenia alebo zásob pre tím

Kto ho tvorí: prevádzkoví pracovníci, ktorí nahrádzajú zdieľanú tabuľku.

Prvý prompt:

Vytvor nástroj na zásoby pre náš skladový tím. Položky majú názov, SKU, množstvo, umiestnenie a minimálnu úroveň. Zamestnanci sa prihlásia, môžu pridať zásoby, odobrať zásoby s dôvodom a vidieť zoznam položiek pod minimom zvýraznených červenou. Uchovávaj históriu každej zmeny a toho, kto ju urobil.

Čo sa pokazilo: história zobrazovala „používateľ 3“ namiesto mien a odobratie väčšieho množstva, než bolo na sklade, spôsobilo záporné množstvo.

Opravný prompt:

V histórii zobrazuj meno osoby, nie jej ID. Nepovoľ odobratie, ktoré by znížilo množstvo pod nulu; namiesto toho zobraz „Na sklade sú iba 4“.

Ponaučenie: opíšte, čo má byť nemožné, nie len to, čo má byť možné. Náš sprievodca vytvorením aplikácie na správu zásob pokrýva zvyšok.

5. Klientsky portál pre freelancera alebo štúdio

Kto ho tvorí: dizajnéri, účtovníci, konzultanti a agentúry.

Prvý prompt:

Vytvor klientsky portál. Klientov pozývam e-mailom. Každý klient sa prihlási a vidí iba svoje projekty, súbory a faktúry a môže pridávať komentáre. Ja sa prihlásim ako admin a vidím všetko.

Čo sa pokazilo: toto je najdôležitejšia chyba zo zoznamu. Stránky zobrazovali každému klientovi iba jeho projekty, ale server vrátil ľubovoľný projekt, ak ste zmenili číslo v adresnom riadku. Klikanie ako jeden klient to nikdy neodhalilo.

Opravný prompt:

Skontroluj každú serverovú trasu, ktorá vracia projekty, súbory, komentáre alebo faktúry. Každá musí overiť, že prihlásený klient je vlastníkom záznamu, a inak vrátiť „nenájdené“. Potom to otestuj: prihlás sa ako klient A a skús otvoriť projekt klienta B podľa jeho ID.

Ponaučenie: skryť niečo na obrazovke nie je to isté ako to chrániť. Viac o tom v je vibe coding bezpečný?.

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

Kto ju tvorí: zakladatelia, ktorí testujú nápad skôr, než ho postavia.

Prvý prompt:

Vytvor vstupnú stránku pre aplikáciu, ktorá pomáha doučovateľom plánovať hodiny a vyberať platby. Hlavný nadpis, podnadpis, registrácia e-mailom, tri výhody, sekcia ako to funguje a FAQ. Ukladaj registrácie do databázy s dátumom a nechaj ma stiahnuť ich ako CSV zo súkromnej stránky.

Čo sa pokazilo: za pár dní sa zoznam zaplnil nezmyselnými registráciami od botov a stránka nemala titulok ani popis, takže zdieľané odkazy zobrazovali prázdny náhľad.

Opravný prompt:

Pridaj základnú ochranu pred botmi do registračného formulára (skryté pole honeypot a limit 5 registrácií z jednej IP adresy za hodinu). Pridaj titulok stránky, meta popis a obrázok na zdieľanie na sociálnych sieťach.

Ponaučenie: verejný formulár sa nájde. Pozrite si ako vytvoriť stránku so zoznamom čakateľov.

7. Kvízová aplikácia pre učiteľa

Kto ju tvorí: učitelia a tréneri, ktorí chcú niečo ľahšie než LMS.

Prvý prompt:

Vytvor kvízovú aplikáciu pre moju triedu. Vytváram kvízy s otázkami s možnosťami, pričom každá má jednu správnu odpoveď. Študenti sa pripoja kódom a svojím krstným menom, odpovedajú na otázky a na konci vidia svoje skóre. Pre každý kvíz vidím tabuľku výsledkov.

Čo sa pokazilo: správne odpovede sa posielali do prehliadača spolu s otázkami, takže zvedavý študent ich mohol prečítať v zdrojovom kóde stránky. Študenti navyše mohli odosielať znova, kým nedosiahli 100 %.

Opravný prompt:

Neposielaj správne odpovede do prehliadača. Over odpovede na serveri až po odoslaní. Povoľ jedno odoslanie na meno študenta v jednom kvíze a ak to niekto skúsi znova, ukáž to učiteľovi.

Ponaučenie: prehliadač patrí používateľovi. Všetko, čo je tam, sa dá prečítať.

8. Malý AI nástroj

Kto ho tvorí: marketéri, autori a zakladatelia, ktorí chcú sústredeného AI pomocníka.

Prvý prompt:

Vytvor nástroj, ktorý z popisu produktu spraví päť príspevkov na sociálne siete v rôznych tónoch (priateľský, odborný, hravý, krátky, dlhý). Použi AI API. Vložím popis, vyberiem platformu a dostanem príspevky s tlačidlami na kopírovanie.

Čo sa pokazilo: prvá verzia volala AI službu priamo z prehliadača s API kľúčom vnútri stránky, kde ho mohol ktokoľvek skopírovať a spôsobiť vysoký účet.

Opravný prompt:

Presuň volanie AI na server. Ulož API kľúč ako tajomstvo, nikdy v kóde frontendu. Obmedz každého návštevníka na 20 generovaní za deň.

Ponaučenie: kľúče patria do tajomstiev na serveri. Pozrite si ako chrániť API kľúče a ako pridať AI funkcie do aplikácie.

9. Arabská a anglická firemná webová stránka

Kto ju tvorí: firmy v Zálive a širšom arabskom svete, ktoré obsluhujú dva jazyky.

Prvý prompt:

Vytvor webovú stránku pre moju firmu zaoberajúcu sa interiérovým dizajnom v arabčine a angličtine, s prepínačom jazyka. Stránky: domov, služby, portfólio, o nás a kontakt. Arabčina má byť úplne sprava doľava.

Čo sa pokazilo: arabský text bol zarovnaný sprava, ale rozloženie nebolo zrkadlené: šípky ukazovali zlým smerom a menu bolo na zlej strane. Telefónne čísla sa niekde zobrazovali pozpätky.

Opravný prompt:

V arabčine zrkadli celé rozloženie: nastav smer stránky sprava doľava, menu daj vpravo, otoč smerové ikony a telefónne čísla a e-maily nechaj zľava doprava vnútri arabského textu.

Ponaučenie: pravo-ľavé písanie je rozloženie, nie zarovnanie. Mythex zvláda arabčinu a ďalšie rozloženia sprava doľava a môžete zadávať prompty priamo v arabčine.

10. Sledovač, ktorý sa stane aplikáciou do telefónu

Kto ho tvorí: tréneri, fitnesky a komunitné skupiny, ktorých používatelia žijú na telefónoch.

Prvý prompt:

Vytvor denník cvičenia pre moje klienty osobného tréningu. Každý klient sa prihlási, vidí plán, ktorý som mu priradil na týždeň, odškrtáva cviky a zapisuje váhy. Ja vidím pokrok každého klienta v grafe.

Čo sa pokazilo: webová aplikácia fungovala, ale na telefónoch boli tlačidlá počas cvičenia príliš malé na ťuknutie a graf bol nečitateľný.

Opravný prompt:

Navrhni to na použitie jednou rukou v telefóne: veľké dotykové plochy v dolnej časti obrazovky, jeden cvik na obrazovku s veľkými tlačidlami Ďalej a Hotovo a jednoduchý týždenný graf pokroku.

Ponaučenie: ak ľudia budú používať aplikáciu na telefóne, navrhujte najprv pre telefón. Na pláne Mythex Pro sa publikovaná aplikácia potom môže zmeniť na Android aplikáciu pre Google Play a iPhone aplikáciu odoslanú do TestFlight; aplikácia v telefóne otvára vašu publikovanú aplikáciu, takže každé publikovanie ju aktualizuje. Pozrite si stránku tvorca mobilných aplikácií.

Vzory za týmito príkladmi

Naprieč všetkými desiatimi sa chyby delia do niekoľkých skupín:

Žiadna z týchto chýb nevyžaduje čítanie kódu. Potrebujete testovať ako zvedavý, trochu nepriateľský používateľ a presne opísať, čo vidíte.

Vyskúšajte si jeden sami

Vyberte príklad, ktorý je najbližšie k vášmu nápadu, skopírujte jeho prvý prompt a zmeňte detaily. Potom použite opravný prompt ako kontrolný zoznam, než to zdieľate. Náš cheat sheet s promptmi pre vibe coding má 30 ďalších a ako vytvoriť aplikáciu pomocou vibe codingu prevedie jeden projekt od nápadu po publikovanú aplikáciu. Keď budete pripravení, spustite ho v AI tvorcovi aplikácií alebo si pozrite šablóny ako štart.

Otázky