30 upita za vibe coding koje možeš kopirati (cheat sheet)

Najbolji upiti za vibe coding su kratki, konkretni i o ponašanju: tko koristi aplikaciju, što može raditi, što sprema i kako izgleda. Ispod je 30 upita koje možeš kopirati i zalijepiti, grupiranih prema fazi u kojoj si, od prve izrade do objave. Zamijeni dijelove u [uglatim zagradama] svojim detaljima.

Rade u svakom AI graditelju aplikacija ili agentu za kodiranje. Ako želiš razloge iza njih, naš duži vodič o kako pisati upite za AI graditelje aplikacija objašnjava načela. Ova stranica je cheat sheet.

Kako koristiti ovaj cheat sheet

• Počni s jednim upitom za prvu izradu, zatim koristi ostale jedan po jedan.
• Testiraj nakon svakog upita. Prođi kroz promjenu prije nego pošalješ sljedeću.
• Zadrži što radi. Većina upita za nadogradnju ovdje završava s „ostalo neka ostane isto“ iz razloga.
• Zalijepi točan tekst. Poruke o greškama, natpisi gumba i riječi na ekranu nadmašuju opise svaki put.

Upiti za prvu izradu

Ovi postavljaju oblik aplikacije. Svaki imenuje korisnike, radnje, podatke i izgled.

1. Jednostavan pratitelj

Napravi mi pratitelj za [naviku]. Mogu dodati [naviku] s nazivom i bojom, označiti je jednom dnevno i vidjeti mrežu od 30 dana i svoj trenutni niz. Spremi sve da ostane nakon osvježavanja. Čist, minimalan dizajn koji radi na telefonu.

2. Stranica za rezervacije malog poslovanja

Napravi stranicu za rezervacije za moj [frizerski salon]. Kupci biraju uslugu ([šišanje 30 min, bojanje 90 min]), datum i slobodan termin između [9:00 i 18:00], zatim upisuju ime, telefon i e-poštu. Dvije osobe ne mogu rezervirati isti termin. Trebam privatnu admin stranicu iza prijave koja prikazuje nadolazeće rezervacije po danu.

3. Interni alat

Napravi interni alat za moj tim za praćenje [posudbe opreme]. Svaka stavka ima naziv, šifru i status (dostupno, posuđeno, pokvareno). Osoblje se prijavljuje, može zadužiti stavku sebi i vratiti je. Prikaži tablicu s filtrima po statusu i povijest tko je imao koju stavku.

4. Landing stranica s listom čekanja

Napravi jednostranu web stranicu za [moj proizvod: aplikacija za planiranje obroka za zaposlene roditelje]. Naslov s podnaslovom od jedne rečenice i prijava e-poštom. Zatim tri prednosti, kratak odjeljak kako radi i FAQ. Spremaj e-adrese za prijavu u bazu i prikaži mi popis na privatnoj admin stranici.

5. Portal za klijente

Napravi portal za klijente za moj [dizajnerski studio]. Svaki klijent se prijavljuje i vidi samo svoje projekte, sa statusom, datotekama koje sam učitao i nitima komentara. Ja se prijavljujem kao admin i vidim sve klijente. Klijenti nikada ne smiju vidjeti tuđe podatke.

6. Kalkulator ili alat za ponude

Napravi kalkulator ponuda za moj [posao čišćenja]. Ulazi: broj spavaćih soba, kupaonica, dodatne usluge (pećnica, prozori, hladnjak) i učestalost (jednokratno, tjedno, mjesečno). Prikaži cijenu dok se opcije mijenjaju, uz raščlambu. Cijene: [zalijepi svoj cjenik]. Dodaj gumb za slanje zahtjeva za ponudu na moju e-poštu.

Upiti za planiranje

Koristi ih prije velike značajke ili kada nisi siguran kako nešto opisati.

7. Planiraj prije izrade

Prije nego napišeš ijedan kod, opiši običnim riječima ekrane koje ćeš napraviti, podatke koje ćeš spremati i sve odluke koje trebaš od mene. Pričekaj moj OK.

8. Pretvori nejasnu ideju u prvu verziju

Evo moje ideje: [zalijepi bilješke]. Predloži najmanju prvu verziju koja je i dalje korisna, u 5 do 8 točaka. Navedi što bi ostavio za kasnije i zašto.

9. Pitaj što nedostaje

Koja bi pitanja developer postavio prije nego što ovo izgradi? Postavi ih jedno po jedno, zatim sažmi moje odgovore u kratku specifikaciju.

10. Provjeri veliku promjenu prije

Želim dodati [račune za tim gdje više ljudi dijeli jedan radni prostor]. Objasni što se mora promijeniti u podacima, ekranima i dozvolama i što bi moglo puknuti. Još ništa ne mijenjaj.

Upiti za dizajn

11. Postavi jasan stil

Preuredi aplikaciju: topla pozadina sivkasto-bijele boje, tamni tekst, jedna naglasna boja [#1F6F50], zaobljeni kutovi, velikodušan razmak i moderan sans-serif font. Zadrži raspored i svaku značajku točno kakvi jesu.

12. Preslikaj osjećaj reference

Neka nadzorna ploča izgleda kao mirna financijska aplikacija: puno bijelog prostora, brojevi veliki i podebljani, oznake male i sive, jedan jednostavan grafikon na vrhu. Ne kopiraj ničiji logo ni tekst.

13. Popravi raspored na telefonu

Na telefonu širine 375 px tablica na [stranici Narudžbe] klizi u stranu i gumbi se preklapaju. Pretvori svaki red u složenu karticu na malim ekranima. Ne mijenjaj raspored za računalo.

14. Prazna, učitavajuća i stanja greške

Dodaj ispravna stanja za [popis projekata]: prijateljsko prazno stanje s gumbom za dodavanje prvog projekta, skeleton učitavanja dok se podaci učitavaju i jasnu poruku s gumbom za ponovni pokušaj ako učitavanje ne uspije.

15. Podrška za smjer zdesna nalijevo

Dodaj arapsku verziju sučelja s potpunim rasporedom zdesna nalijevo. Ikone koje pokazuju smjer trebaju se okrenuti; brojevi i datumi neka koriste format jezika. Engleski neka ostane zadani.

Upiti za podatke i značajke

16. Učini podatke trajnima

Trenutno mi podaci nestaju pri osvježavanju. Spremi ih umjesto toga u pravu bazu podataka i neka trenutni ekrani rade isto kao prije.

17. Dodaj prijavu

Dodaj registraciju i prijavu s e-poštom i lozinkom. Svaki korisnik smije vidjeti i uređivati samo svoje [unose]. Prikaži e-poštu korisnika u gornjoj traci s gumbom za odjavu.

18. Dodaj uloge

Dodaj dvije uloge: admin i član. Admini mogu dodavati, uređivati i brisati [proizvode]; članovi ih samo gledaju. Provedi to na poslužitelju, a ne samo skrivanjem gumba.

19. Dodaj pretragu i filtre

Dodaj polje za pretragu iznad [popisa kontakata] koje se podudara s imenom, tvrtkom ili e-poštom dok tipkam, uz filtar za [status]. Zadrži trenutni redoslijed sortiranja.

20. Dodaj učitavanje datoteka

Neka korisnici mogu priložiti do [5] slika uz svaki [oglas], najviše [5 MB] svaka. Prikaži sličice na oglasu i veći prikaz na klik. Samo vlasnik smije brisati svoje slike.

21. Uvoz iz tablice

Dodaj gumb Uvezi koji prima CSV sa stupcima [ime, e-pošta, telefon, bilješke], prikazuje pregled prvih 10 redaka i dopušta mi potvrdu prije spremanja. Preskoči retke bez e-pošte i reci mi koliko ih je preskočeno.

Upiti za popravke

22. Jasno prijavi grešku

Kada [kliknem Spremi na obrascu za uređivanje], vidim „[točan tekst greške]“ i promjena se ne sprema. Očekivano: promjena se sprema i vraćam se na popis. Pronađi uzrok, objasni ga u jednoj ili dvije rečenice, zatim ga popravi.

23. Zaustavi petlju popravaka

Pokušali smo popraviti ovo tri puta i još uvijek ne radi. Prestani mijenjati kod. Navedi tri najvjerojatnija uzroka, kako provjeriti svaki i koji misliš da je.

24. Poništi nusefekte

Tvoja posljednja promjena popravila je birač datuma, ali je [bočna traka] nestala. Vrati bočnu traku točno kakva je bila i zadrži popravak birača datuma.

25. Objasni prije promjene

Objasni kako se trenutno računa [ukupan iznos na blagajni], korak po korak, navodeći uključene datoteke. Ništa ne mijenjaj.

Upiti za testiranje i pregled

26. Rubni slučajevi

Navedi 10 načina na koje bi stvarni korisnik mogao srušiti [obrazac za rezervacije]: prazna polja, vrlo dug tekst, dvostruki klikovi, dvije osobe istovremeno, pogrešne vremenske zone. Testiraj svaki i popravi što pukne. Javi što si promijenio.

27. Sažmi nedavne promjene

Sažmi svaku promjenu koju si napravio u posljednjih [pet] koraka običnim riječima i označi što bi moglo utjecati na postojeće podatke.

Sigurnosni upiti

Upari ih s našom stranicom je li vibe coding siguran.

28. Provjeri pristup podacima

Provjeri kod na poslužitelju: može li prijavljeni korisnik čitati ili mijenjati tuđe [zapise] promjenom ID-a u zahtjevu? Pokaži mi gdje se pristup provjerava i popravi sve rupe.

29. Provjeri izložene tajne

Navedi svaki API ključ, lozinku ili token koji ova aplikacija koristi i gdje je svaki pohranjen. Pazi da nijedan nije u kodu koji se izvodi u pregledniku ili commitan u datotekama. Ako jest, premjesti ga u tajne.

Upiti za objavu

30. Pregled prije lansiranja

Spreman sam ovo objaviti za stvarne korisnike. Prođi kroz to kao recenzent: pokvarene poveznice, nedostajući naslovi i opisi stranica, obrasci bez provjere, spori stranice, greške u konzoli i sve što djeluje nedovršeno na telefonu. Daj mi popis poredan po važnosti, zatim popravi prvih pet.

Upiti kojih se treba kloniti

Neki upiti dosljedno daju lošije rezultate:

• „Učini ovo boljim.“ Bolje na koji način? Imenuj ekran i promjenu.
• „Popravi sve.“ AI će promijeniti puno toga, a ti nećeš znati što se pomaknulo.
• „Koristi [biblioteku] i [framework] i [obrazac].“ Osim ako za to imaš razlog, opiši ponašanje i prepusti alatu da odabere stack.
• „Evo mog API ključa: …“ Nikada ne lijepi tajne u chat. Koristi postavke tajni alata.
• Deset značajki u jednoj poruci. Podijeli ih.

Pretvori upite u naviku

Nakon nekoliko projekata imat ćeš svoje verzije ovih. Čuvaj ih u bilješci i ponovno koristi one koji rade. Mythex također pamti tko si i kako radiš kroz projekte, pa se preferencije koje ponavljaš, poput tvog uobičajenog stila ili stacka, prenose bez ponovnog upisivanja.

Ako zapneš na prvom upitu, besplatni generator upita za aplikacije pretvara jednoredni opis ideje u potpuniji polazni upit. A da vidiš što ovi upiti daju u praksi, pročitaj naše primjere vibe codinga ili zalijepi upit 1 u AI graditelj aplikacija i promijeni zagrade svojom idejom.

Pitanja