30 promptova za vibe coding koje možete kopirati (spisak)

Najbolji promptovi za vibe coding su kratki, precizni i o ponašanju: ko koristi aplikaciju, šta može da radi, šta čuva i kako izgleda. Ispod je 30 promptova koje možete kopirati i nalijepiti, grupisanih po fazi u kojoj se nalazite, od prve izrade do objavljivanja. Zamijenite dijelove u [uglastim zagradama] svojim detaljima.

Rade u bilo kojem AI alatu za izradu aplikacija ili agentu za kodiranje. Ako želite razlog iza njih, naš duži vodič o kako pisati promptove za AI alate za izradu aplikacija objašnjava principe. Ova stranica je spisak.

Kako koristiti ovaj spisak

• Počnite jednim promptom za prvu izradu, pa koristite ostale jedan po jedan.
• Testirajte nakon svakog prompta. Prokliknite promjenu prije nego što pošaljete sljedeću.
• Zadržite ono što radi. Većina promptova za naknadne korake ovdje završava sa „ostalo neka bude isto” iz dobrog razloga.
• Nalijepite tačan tekst. Poruke o greškama, nazivi dugmadi i riječi na ekranu bolji su od opisa, uvijek.

Prompti za prvu izradu

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

1. Jednostavan tracker

Napravi mi tracker za [naviku]. Mogu dodati [naviku] sa nazivom i bojom, označiti je jednom dnevno i vidjeti mrežu od 30 dana i trenutnu seriju. Sačuvaj sve da ostane nakon osvježavanja. Čist, minimalan dizajn koji radi na telefonu.

2. Stranica za rezervacije za mali biznis

Napravi stranicu za rezervacije za moj [frizerski salon]. Klijenti biraju uslugu ([šišanje 30 min, bojenje 90 min]), datum i slobodan termin između [9:00 i 18:00], zatim unose ime, telefon i email. Dvije osobe ne mogu rezervisati isti termin. Treba mi privatna admin stranica iza prijave koja prikazuje nadolazeće rezervacije po danu.

3. Interni alat

Napravi interni alat za moj tim za praćenje [pozajmica opreme]. Svaki artikal ima naziv, šifru i status (dostupno, pozajmljeno, pokvareno). Zaposleni se prijavljuju, mogu zadužiti artikal na sebe i razdužiti ga. Prikaži tabelu sa filterima po statusu i istorijom ko je imao koji artikal.

4. Landing stranica sa listom čekanja

Napravi jednostranični sajt za [moj proizvod: aplikaciju za planiranje obroka za zauzete roditelje]. Hero sa naslovom, jednorečeničnim podnaslovom i prijavom emailom. Zatim tri prednosti, kratak odjeljak kako funkcioniše i FAQ. Sačuvaj emailove prijava u bazu podataka i pokaži mi listu na privatnoj admin stranici.

5. Portal za klijente

Napravi portal za klijente za moj [dizajnerski studio]. Svaki klijent se prijavi i vidi samo svoje projekte, sa statusom, fajlovima koje sam postavio i nitima komentara. Ja se prijavljujem kao admin i vidim sve klijente. Klijenti nikad ne smiju vidjeti tuđe podatke.

6. Kalkulator ili alat za ponudu

Napravi kalkulator ponude za moj [firmu za čišćenje]. Unosi: broj soba, broj kupatila, dodatne usluge (rerna, prozori, frižider) i učestalost (jednokratno, sedmično, mjesečno). Prikaži cijenu dok se opcije mijenjaju, sa razradom. Cijene: [nalijepite vaš cjenovnik]. Dodaj dugme za slanje zahtjeva za ponudu na moj email.

Prompti za planiranje

Koristite ih prije velike funkcije ili kad niste sigurni kako nešto opisati.

7. Planirajte prije gradnje

Prije nego što napišeš ijedan kod, opiši običnim riječima ekrane koje ćeš napraviti, podatke koje ćeš čuvati i odluke koje trebaš od mene. Sačekaj moje odobrenje.

8. Pretvorite zbrkanu ideju u prvu verziju

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

9. Pitajte šta nedostaje

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

10. Provjerite veliku promjenu prije

Želim da dodam [naloge za tim gdje više osoba dijeli jedan radni prostor]. Objasni šta se mora promijeniti u podacima, ekranima i pravima pristupa i šta može puknuti. Ništa još ne mijenjaj.

Prompti za dizajn

11. Postavite jasan stil

Promijeni izgled aplikacije: topla bijela pozadina, tamni tekst, jedna akcentna boja [#1F6F50], zaobljeni uglovi, velik prostor između elemenata i moderan sans-serif font. Zadrži raspored i svaku funkciju tačno kakvi jesu.

12. Kopirajte osjećaj iz referentnog primjera

Neka dashboard djeluje kao mirna finansijska aplikacija: mnogo bijelog prostora, brojevi veliki i podebljani, oznake male i sive, jedan jednostavan grafikon na vrhu. Nemoj kopirati logo ni tekst nijednog brenda.

13. Popravite raspored na telefonu

Na telefonu širine 375 px, tabela na [stranici Narudžbine] se pomjera u stranu i dugmad se preklapaju. Na malim ekranima pretvori svaki red u složenu karticu. Ne mijenjaj izgled za desktop.

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

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

15. Podrška za arapski (zdesna nalijevo)

Dodaj arapsku verziju interfejsa sa potpunim rasporedom zdesna nalijevo. Ikone koje pokazuju smjer treba okrenuti; brojevi i datumi treba da koriste format jezika. Engleski neka ostane podrazumijevani.

Prompti za podatke i funkcije

16. Učinite podatke trajnim

Trenutno mi podaci nestanu kad osvježim stranicu. Umjesto toga sačuvaj ih u pravu bazu podataka i neka trenutni ekrani rade isto kao prije.

17. Dodajte prijavu

Dodaj registraciju i prijavu sa emailom i lozinkom. Svaki korisnik treba da vidi i mijenja samo svoje [unose]. Prikaži email korisnika u gornjoj traci sa dugmetom za odjavu.

18. Dodajte uloge

Dodaj dvije uloge: admin i član. Admini mogu dodavati, mijenjati i brisati [proizvode]; članovi ih mogu samo pregledati. Provjeri to na serveru, a ne samo skrivanjem dugmadi.

19. Dodajte pretragu i filtere

Dodaj polje za pretragu iznad [liste kontakata] koje se podudara sa imenom, kompanijom ili emailom dok kucam, plus filter za [status]. Zadrži trenutni redoslijed sortiranja.

20. Dodajte otpremanje fajlova

Neka korisnici prikače do [5] slika na svaki [oglas], najviše [5 MB] svaka. Prikaži sličice na oglasu i veći prikaz na klik. Samo vlasnik može obrisati svoje slike.

21. Uvoz iz tabele

Dodaj dugme Uvezi koje uzima CSV sa kolonama [ime, email, telefon, napomene], prikazuje pregled prvih 10 redova i dozvoljava mi da potvrdim prije čuvanja. Preskoči redove bez emaila i reci mi koliko ih je preskočeno.

Prompti za popravke

22. Jasno prijavite grešku

Kad [kliknem Sačuvaj na formularu za izmjenu], vidim „[tačan tekst greške]” i promjena se ne sačuva. Očekivano: promjena se sačuva i vraćam se na listu. Pronađi uzrok, objasni ga u jednoj ili dvije rečenice, pa ga popravi.

23. Zaustavite petlju popravki

Pokušali smo da ovo popravimo tri puta i i dalje ne radi. Prestani mijenjati kod. Navedi tri najvjerovatnija uzroka, kako provjeriti svaki i koji misliš da je.

24. Poništite nuspojave

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

25. Objasnite prije promjene

Objasni kako se trenutno računa [ukupan iznos u blagajni], korak po korak, uz navođenje fajlova koji su uključeni. Ništa ne mijenjaj.

Prompti za testiranje i pregled

26. Rubni slučajevi

Navedi 10 načina na koje stvarni korisnik može pokvariti [formular za rezervaciju]: prazna polja, veoma dug tekst, dvostruki klikovi, dvije osobe istovremeno, pogrešne vremenske zone. Testiraj svaki i popravi ono što ne radi. Izvijesti šta si promijenio.

27. Sažetak nedavnih promjena

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

Prompti za sigurnost

Upotrijebite ih uz našu stranicu o da li je vibe coding siguran.

28. Provjerite pristup podacima

Provjeri kod na serveru: može li prijavljeni korisnik čitati ili mijenjati tuđe [zapise] mijenjajući ID u zahtjevu? Pokaži mi gdje se provjerava pristup i popravi sve propuste.

29. Provjerite izložene tajne

Navedi svaki API ključ, lozinku ili token koji ova aplikacija koristi i gdje je svaki pohranjen. Provjeri da nijedan nije u kodu koji se izvršava u pregledaču ili upisan u fajlove. Ako jeste, premjesti ga u tajne.

Prompti za objavljivanje

30. Pregled prije lansiranja

Spreman sam da ovo objavim za prave korisnike. Prođi kroz to kao recenzent: neispravni linkovi, nedostajući naslovi i opisi stranica, formulari bez provjere, spori prikazi, greške u konzoli i sve što na telefonu izgleda nedovršeno. Daj mi listu poredanu po važnosti, pa popravi prvih pet.

Promptovi koje treba izbjegavati

Neki promptovi pouzdano daju lošije rezultate:

• „Učini da bude bolje.” Bolje kako? Imenujte ekran i promjenu.
• „Popravi sve.” AI će promijeniti mnogo, a vi nećete znati šta se pomjerilo.
• „Koristi [biblioteku] i [okvir] i [obrazac].” Osim ako za to imate razlog, opišite ponašanje i pustite alat da izabere tehnologiju.
• „Evo mog API ključa: …” Nikad ne lijepite tajne u chat. Koristite postavke tajni alata.
• Deset funkcija u jednoj poruci. Podijelite ih.

Pretvaranje promptova u naviku

Nakon nekoliko projekata imaćete svoje verzije ovih promptova. Čuvajte ih u bilješkama i koristite ponovo one koji rade. Mythex takođe pamti ko ste i kako radite na svim projektima, pa se preferencije koje ponavljate, poput vašeg uobičajenog stila ili tehnologije, prenose bez ponovnog ukucavanja.

Ako zapnete na prvom promptu, besplatni generator promptova za aplikacije pretvara jednu rečenicu ideje u potpuniji početni prompt. A da vidite šta ovi promptovi daju u praksi, pročitajte naše primjere vibe codinga ili nalijepite prompt 1 u AI alat za izradu aplikacija i zamijenite zagrade vlastitom idejom.

Pitanja