Primjeri vibe codinga: 10 stvarnih tipova aplikacija, prompti i šta je pošlo po zlu

Najčešći primjeri vibe codinga su mali, korisni web alati: trackeri, stranice za rezervacije, interni alati, portali za klijente, landing stranice, kvizovi, dashboardi i jednostavni AI alati. Ispod su deset takvih primjera. Za svaki vidite ko ga pravi, prvi prompt, šta obično pođe po zlu i prompt za popravku.

Ovo su kompozit primjeri projekata koje ljudi najčešće donose AI alatima za izradu aplikacija, a ne studije slučaja jedne osobe. Promptovi se mogu kopirati. Greške su one koje se stalno ponavljaju, zato su upravo one korisni dio. Ako vam je sam vibe coding nov, počnite s šta je vibe coding.

1. Lični tracker budžeta

Ko ga pravi: pojedinci koji su probali tabele i odustali.

Prvi prompt:

Napravi tracker mjesečnog budžeta. Dodajem troškove sa iznosom, kategorijom (hrana, stanarina, prevoz, zabava, ostalo), datumom i napomenom. Prikaži ukupan iznos za ovaj mjesec po kategorijama kao stupčasti grafikon i listu nedavnih troškova. Mogu postaviti budžet po kategoriji i vidjeti koliko je ostalo.

Šta je pošlo po zlu: grafikon je računao svaki trošak ikad unesen, a ne samo ovaj mjesec, pa su nakon drugog mjeseca sve kategorije izgledale prekoračene. Osim toga, iznosi unijeti sa zarezom („1,200”) sačuvani su kao 1.

Prompt za popravku:

Grafikon i ukupni iznosi treba da uključuju samo troškove iz odabranog mjeseca. Dodaj izbor mjeseca na vrhu, sa podrazumijevanim trenutnim mjesecom. Takođe prihvati iznose unesene sa zarezima ili razmacima i sačuvaj ih kao brojeve.

Lekcija: „ovaj mjesec” je pravilo. Izgovorite pravila naglas.

2. Stranica za rezervacije za mali salon

Ko je pravi: vlasnici malih firmi kojima je dosadilo da rezervacije primaju telefonom i porukama.

Prvi prompt:

Napravi stranicu za rezervacije za moj salon. Klijenti biraju uslugu, datum i slobodan termin, zatim unose ime i broj telefona. Imam privatnu admin stranicu iza prijave koja prikazuje rezervacije po danu.

Šta je pošlo po zlu: dvije klijentkinje su rezervisale isti termin od 10:00 u razmaku od minut, jer je stranica dostupnost provjeravala samo pri prvom učitavanju. Rezervacija u trajanju od 90 minuta za bojenje takođe nije blokirala termine koji slijede.

Prompt za popravku:

Kad klijent pošalje rezervaciju, na serveru provjeri da su svi termini koje ona obuhvata još slobodni, i odbij je porukom „Taj termin je upravo zauzet” ako nisu. Usluga blokira cijelo svoje trajanje, pa rezervacija od 90 minuta u 10:00 blokira 10:00, 10:30 i 11:00.

Lekcija: sve što dvije osobe mogu raditi istovremeno zahtijeva provjeru na serveru. Pogledajte kako napraviti aplikaciju za rezervacije za cijelu verziju.

3. Restoranski meni sa QR kodom

Ko ga pravi: vlasnici kafića i restorana koji prečesto štampaju jelovnike.

Prvi prompt:

Napravi mobilni web meni za moj kafić. Odjeljci za doručak, ručak, pića i desert, a svaka stavka ima naziv, cijenu, kratak opis i oznake za prehranu (veganski, bez glutena). Treba mi admin stranica za izmjenu stavki i označavanje da je rasprodano. Prikaži QR kod koji mogu odštampati i koji vodi na meni.

Šta je pošlo po zlu: ništa nije stalo, ali je meni bio spor na kafićkom Wi-Fi-ju jer su se za svaku stavku učitavale pune fotografije sa telefona.

Prompt za popravku:

Fotografije u meniju su pretežke. Smanji učitane slike na najviše 800 px širine, kompresuj ih i učitavaj postepeno dok posjetilac skroluje.

Lekcija: testirajte na sporoj vezi, a ne samo u kancelariji.

4. Praćenje opreme ili zaliha za tim

Ko ga pravi: ljudi iz operativnog poslovanja koji mijenjaju zajedničku tabelu.

Prvi prompt:

Napravi interni alat za praćenje zaliha u našem skladištu. Artikli imaju naziv, SKU, količinu, lokaciju i minimalnu količinu. Zaposleni se prijavljuju i mogu dodati zalihe, ukloniti zalihe uz razlog i vidjeti listu artikala ispod minimuma označenu crvenom bojom. Čuvaj istoriju svake promjene i ko ju je napravio.

Šta je pošlo po zlu: istorija je pokazivala „korisnik 3” umjesto imena, a uklanjanje više zaliha nego što ih ima dovelo je količinu u minus.

Prompt za popravku:

U istoriji prikaži ime osobe, a ne njen ID. Ne dozvoli uklanjanje koje bi spustilo količinu ispod nule; umjesto toga prikaži „Na stanju je samo 4”.

Lekcija: opišite šta mora biti nemoguće, a ne samo šta treba biti moguće. Naš vodič o izradi aplikacije za upravljanje zalihama pokriva ostalo.

5. Portal za klijente za freelancera ili studio

Ko ga pravi: dizajneri, računovođe, konsultanti i agencije.

Prvi prompt:

Napravi portal za klijente. Klijente pozivam emailom. Svaki klijent se prijavi i vidi samo svoje projekte, fajlove i fakture, i može ostavljati komentare. Ja se prijavljujem kao admin i vidim sve.

Šta je pošlo po zlu: ovo je najvažnija greška na listi. Stranice su svakom klijentu prikazivale samo njegove projekte, ali je server vratio bilo koji projekat ako se broj u adresnoj traci promijeni. Klikanje kroz aplikaciju kao jedan klijent to nikad nije otkrilo.

Prompt za popravku:

Provjeri svaku rutu na serveru koja vraća projekte, fajlove, komentare ili fakture. Svaka mora potvrditi da prijavljeni klijent posjeduje zapis, a inače vratiti „nije pronađeno”. Zatim testiraj: prijavi se kao klijent A i pokušaj otvoriti projekat klijenta B preko njegovog ID-a.

Lekcija: sakriti nešto na ekranu nije isto što i zaštititi to. Više o tome u da li je vibe coding siguran?.

6. Launch stranica sa listom čekanja

Ko je pravi: osnivači koji testiraju ideju prije nego što je naprave.

Prvi prompt:

Napravi landing stranicu za aplikaciju koja pomaže instruktorima da zakazuju časove i naplaćuju plaćanja. Glavni naslov, podnaslov, prijava emailom, tri prednosti, odjeljak kako to funkcioniše i FAQ. Sačuvaj prijave u bazu sa datumom i omogući mi da ih preuzmem kao CSV sa privatne stranice.

Šta je pošlo po zlu: lista se za nekoliko dana napunila lažnim prijavama od botova, a stranici nisu bili postavljeni naslov i opis, pa su podijeljeni linkovi prikazivali prazan pregled.

Prompt za popravku:

Dodaj osnovnu zaštitu od botova na formular za prijavu (skriveno polje kao zamka i ograničenje od 5 prijava po IP adresi na sat). Dodaj naslov stranice, meta opis i sliku za dijeljenje na društvenim mrežama.

Lekcija: javni formular će neko pronaći. Pogledajte kako napraviti stranicu za listu čekanja.

7. Aplikacija za kviz za nastavnika

Ko je pravi: nastavnici i treneri koji žele nešto lakše od LMS-a.

Prvi prompt:

Napravi aplikaciju za kviz za moj razred. Kreiram kvizove sa pitanjima višestrukog izbora i jednim tačnim odgovorom. Učenici se pridružuju šifrom i svojim imenom, odgovaraju na pitanja i na kraju vide rezultat. Ja vidim tabelu rezultata za svaki kviz.

Šta je pošlo po zlu: tačni odgovori su poslati pregledaču zajedno sa pitanjima, pa je radoznao učenik mogao da ih pročita u izvornom kodu stranice. Učenici su takođe mogli slati ponovo dok ne dobiju 100%.

Prompt za popravku:

Ne šalji tačne odgovore pregledaču. Provjeri odgovore na serveru nakon slanja. Dozvoli jedno slanje po imenu učenika za svaki kviz i pokaži nastavniku ako neko pokuša ponovo.

Lekcija: pregledač pripada korisniku. Sve što je tamo može se pročitati.

8. Mali AI alat

Ko ga pravi: marketinški stručnjaci, pisci i osnivači koji žele fokusiranog AI pomoćnika.

Prvi prompt:

Napravi alat koji opis proizvoda pretvara u pet objava za društvene mreže u različitim tonovima (prijateljski, stručni, razigrani, kratki, dugi). Koristi AI API. Nalijepim opis, izaberem platformu i dobijem objave sa dugmadima za kopiranje.

Šta je pošlo po zlu: prva verzija je pozivala AI servis direktno iz pregledača, a API ključ je bio unutar stranice, gdje ga je svako mogao kopirati i potrošiti tuđe pare.

Prompt za popravku:

Prebaci poziv AI servisu na server. Čuvaj API ključ kao tajnu, nikad u kodu frontenda. Ograniči svakog posjetioca na 20 generisanja dnevno.

Lekcija: ključevi pripadaju tajnama na serveru. Pogledajte kako čuvati API ključeve i kako dodati AI funkcije u svoju aplikaciju.

9. Poslovni sajt na arapskom i engleskom

Ko ga pravi: firme u zaljevskim zemljama i širem arapskom svijetu koje služe dva jezika.

Prvi prompt:

Napravi sajt za moju firmu za enterijer na arapskom i engleskom, sa prekidačem jezika. Stranice: početna, usluge, portfolio, o nama i kontakt. Arapski treba biti potpuno zdesna nalijevo.

Šta je pošlo po zlu: arapski tekst je bio poravnat udesno, ali raspored nije bio ogledan: strelice su i dalje pokazivale pogrešno, a meni je bio na pogrešnoj strani. Brojevi telefona su mjestimično bili prikazani naopako.

Prompt za popravku:

Na arapskom ogledaj cijeli raspored: postavi smjer stranice zdesna nalijevo, stavi meni desno, okreni ikone koje pokazuju smjer i zadrži brojeve telefona i emailove s lijeva nadesno unutar arapskog teksta.

Lekcija: smjer zdesna nalijevo je raspored, a ne samo poravnanje. Mythex podržava arapski i druge rasporede zdesna nalijevo, a možete pisati prompt direktno na arapskom.

10. Tracker koji postaje aplikacija za telefon

Ko ga pravi: treneri, teretane i zajednice čiji korisnici žive na telefonima.

Prvi prompt:

Napravi dnevnik treninga za moje klijente personalnog treninga. Svaki klijent se prijavi, vidi plan koji sam mu dodijelio za sedmicu, označava vježbe i bilježi težine. Ja vidim napredak svakog klijenta na grafikonu.

Šta je pošlo po zlu: web aplikacija je radila, ali su na telefonima dugmad bila premala da se pritisnu usred treninga, a grafikon nečitljiv.

Prompt za popravku:

Dizajniraj ovo za korištenje jednom rukom na telefonu: velika dugmad pri dnu ekrana, jedna vježba po ekranu sa velikim dugmadima Dalje i Završeno i jednostavan sedmični grafikon napretka.

Lekcija: ako će ljudi koristiti na telefonu, dizajnirajte prvo za telefon. Na Mythex Pro planu objavljena aplikacija može zatim postati Android aplikacija za Google Play i iPhone aplikacija poslana na TestFlight; aplikacija na telefonu otvara vašu objavljenu aplikaciju, pa je svako objavljivanje ažurira. Pogledajte stranicu graditelj mobilnih aplikacija.

Obrasci iza ovih primjera

Kroz svih deset, greške spadaju u nekoliko grupa:

Nijedna od ovih ne zahtijeva da čitate kod. Potrebno je da testirate kao radoznao, pomalo neprijateljski nastrojen korisnik i da precizno opišete šta vidite.

Probajte sami

Izaberite primjer koji je najbliži vašoj ideji, kopirajte njegov prvi prompt i promijenite detalje. Zatim koristite prompt za popravku kao listu provjere prije nego što podijelite aplikaciju. Naš spisak promptova za vibe coding ima još 30, a kako napraviti aplikaciju vibe codingom prolazi kroz jedan projekat od ideje do objavljene aplikacije. Kad budete spremni, pokrenite ga u AI alatu za izradu aplikacija ili pogledajte šablone za brzi početak.

Pitanja