30 pozivov za vibe coding, ki jih lahko kopirate (kratek pregled)

Najboljši pozivi za vibe coding so kratki, konkretni in se nanašajo na vedenje: kdo uporablja aplikacijo, kaj lahko v njej naredi, kaj shranjuje in kako izgleda. Spodaj je 30 pozivov, ki jih lahko kopirate in prilepite, razvrščenih po fazi, v kateri ste, od prve gradnje do objave. Dele v [oglatih oklepajih] zamenjajte s svojimi podrobnostmi.

Delujejo v vsakem gradniku aplikacij z AI ali agentu za kodiranje. Če želite razlog za njih, naš daljši vodnik o tem, kako pisati pozive za gradnike aplikacij z AI razloži načela. Ta stran je kratek pregled.

Kako uporabljati ta pregled

• Začnite z enim pozivom za prvo gradnjo, nato uporabljajte ostale po eno naenkrat.
• Preizkusite po vsakem pozivu. Preklikajte spremembo, preden pošljete naslednjo.
• Ohranite, kar deluje. Večina nadaljevalnih pozivov tukaj se konča z „ohrani vse ostalo enako“ z razlogom.
• Prilepite točno besedilo. Sporočila o napaki, napisi na gumbih in besede na zaslonu so vedno boljši od opisov.

Pozivi za prvo gradnjo

To določi obliko aplikacije. Vsak poimenuje uporabnike, dejanja, podatke in videz.

1. Preprost sledilnik

Zgradi mi sledilnik [navade]. Dodam lahko [navado] z imenom in barvo, enkrat na dan jo označim kot opravljeno, vidim mrežo za 30 dni in svoj trenutni niz zaporednih dni. Shrani vse, da bo ostalo tudi po osvežitvi. Čista, minimalistična zasnova, ki deluje na telefonu.

2. Stran za rezervacije za majhno podjetje

Zgradi stran za rezervacije za moj [frizerski salon]. Stranke izberejo storitev ([striženje 30 min, barvanje 90 min]), datum in prosti termin med [9:00 in 18:00], nato vpišejo ime, telefon in e-pošto. Dve osebi ne moreta rezervirati istega termina. Potrebujem zasebno stran za skrbnike, zaščiteno s prijavo, ki po dnevih prikazuje prihajajoče rezervacije.

3. Interno orodje

Zgradi interno orodje za mojo ekipo za sledenje [izposoji opreme]. Vsak predmet ima ime, kodo in stanje (na voljo, izposojeno, pokvarjeno). Zaposleni se prijavijo, predmet lahko izposodijo sebi in ga vrnejo. Prikaži tabelo s filtri po stanju in zgodovino, kdo je imel kateri predmet.

4. Pristajalna stran s čakalnim seznamom

Zgradi enostransko spletno stran za [moj izdelek: aplikacijo za načrtovanje obrokov za zaposlene starše]. Naslov z glavnim sporočilom, podnaslov v enem stavku in prijava z e-pošto. Nato tri prednosti, kratek razdelek o tem, kako deluje, in pogosta vprašanja. Shrani e-poštne naslove prijav v bazo in mi jih pokaži na zasebni strani za skrbnike.

5. Portal za stranke

Zgradi portal za stranke za moj [studio za oblikovanje]. Vsaka stranka se prijavi in vidi samo svoje projekte s statusom, datoteke, ki sem jih naložil, in nit komentarjev. Kot skrbnik se prijavim in vidim vse stranke. Stranke nikoli ne smejo videti podatkov drugih strank.

6. Kalkulator ali orodje za ponudbe

Zgradi kalkulator ponudb za moje [podjetje za čiščenje]. Vnosi: število spalnic, kopalnic, dodatne storitve (pečica, okna, hladilnik) in pogostost (enkratno, tedensko, mesečno). Cena naj se prikaže, ko se spreminjajo možnosti, z razčlenitvijo. Cene: [prilepite svoj cenik]. Dodaj gumb za pošiljanje zahteve za ponudbo po e-pošti.

Pozivi za načrtovanje

Uporabite jih pred večjo funkcijo ali kadar niste prepričani, kako nekaj opisati.

7. Načrtujte pred gradnjo

Preden napišeš kakršno koli kodo, mi z navadnimi besedami opiši zaslone, ki jih boš naredil, podatke, ki jih boš shranjeval, in odločitve, ki jih potrebuješ od mene. Počakaj na moje soglasje.

8. Zamotano idejo spremenite v prvo različico

Tukaj je moja ideja: [prilepite zapiske]. Predlagaj najmanjšo prvo različico, ki je še uporabna, v 5–8 točkah. Naštej, kaj bi pustil za pozneje, in zakaj.

9. Vprašajte, kaj manjka

Katera vprašanja bi mi razvijalec zastavil, preden bi to začel graditi? Vprašaj me eno za drugim, nato povzemi moje odgovore v kratko specifikacijo.

10. Najprej preverite veliko spremembo

Želim dodati [računi za ekipo, pri katerih več ljudi deli en delovni prostor]. Razloži, kaj se mora spremeniti v podatkih, zaslonih in dovoljenjih ter kaj bi se lahko pokvarilo. Še ne spreminjaj ničesar.

Pozivi za oblikovanje

11. Določite jasen slog

Preoblikuj videz aplikacije: topel svetlo bel odtenek ozadja, temno besedilo, ena naglasna barva [#1F6F50], zaobljeni robovi, velik razmik in moderna brezserifna pisava. Ohrani postavitev in vsako funkcijo točno tako, kot sta.

12. Kopirajte občutek referenčne aplikacije

Naj bo nadzorna plošča videti kot mirna aplikacija za financ: veliko belega prostora, številke velike in krepke, oznake majhne in sive, en preprost grafikon na vrhu. Ne kopiraj nobenega logotipa ali besedila kakšne blagovne znamke.

13. Popravite postavitev na telefonu

Na telefonu široko 375 slikovnih pik se tabela na [strani Naročila] pomika vstran in gumbi se prekrivajo. Na majhnih zaslonih vsako vrstico spremeni v zloženo kartico. Ne spreminjaj postavitve za namizje.

14. Prazna, nalagalna in napačna stanja

Dodaj ustrezna stanja na [seznam projektov]: prijazno prazno stanje z gumbom za dodajanje prvega projekta, nalagalni okvir med nalaganjem podatkov in jasno sporočilo z gumbom za ponovni poskus, če nalaganje ne uspe.

15. Podpora za desno proti levi

Dodaj arabsko različico vmesnika s popolno postavitvijo od desne proti levi. Ikone, ki kažejo smer, naj se obrnejo; številke in datumi naj uporabljajo oblikovanje za jezik. Privzeto naj ostane angleščina.

Pozivi za podatke in funkcije

16. Naj podatki ostanejo

Trenutno mi podatki izginejo, ko osvežim stran. Shrani jih v pravo podatkovno bazo in naj trenutni zasloni delujejo na enak način.

17. Dodajte prijavo

Dodaj registracijo in prijavo z e-pošto in geslom. Vsak uporabnik naj vidi in ureja samo svoje [vnose]. E-pošto uporabnika prikaži v zgornji vrstici z gumbom za odjavo.

18. Dodajte vloge

Dodaj dve vlogi: skrbnik in član. Skrbniki lahko dodajajo, urejajo in brišejo [izdelke]; člani jih lahko samo pregledujejo. To uveljavi na strežniku, ne samo s skrivanjem gumbov.

19. Dodajte iskanje in filtre

Dodaj iskalno polje nad [seznamom stikov], ki se med tipkanjem ujema z imenom, podjetjem ali e-pošto, ter filter za [stanje]. Ohrani trenutni vrstni red razvrščanja.

20. Dodajte nalaganje datotek

Naj uporabniki pri vsakem [oglasu] pripnejo do [5] slik, največ [5 MB] vsaka. Na oglasu prikaži predogled sličic in večji pogled ob kliku. Samo lastnik lahko izbriše svoje slike.

21. Uvoz iz preglednice

Dodaj gumb Uvozi, ki sprejme CSV s stolpci [ime, e-pošta, telefon, opombe], prikaže predogled prvih 10 vrstic in mi omogoči potrditev pred shranjevanjem. Preskoči vrstice brez e-pošte in mi povej, koliko jih je bilo preskočenih.

Pozivi za popravljanje

22. Jasno opišite napako

Ko [kliknem Shrani na obrazcu za urejanje], vidim „[točno besedilo napake]“ in sprememba se ne shrani. Pričakovano: sprememba se shrani in vrnem se na seznam. Poišči vzrok, ga razloži v enem ali dveh stavkih, nato popravi.

23. Ustavite zanko popravkov

To smo poskusili popraviti trikrat in še vedno ne deluje. Nehaj spreminjati kodo. Naštej tri najverjetnejše vzroke, kako preveriti vsakega in kateri misliš, da je.

24. Razveljavite stranske učinke

Tvoja zadnja sprememba je popravila izbirnik datuma, vendar je [stranski meni] izginil. Vrni stranski meni točno tak, kot je bil, in ohrani popravek izbirnika datuma.

25. Najprej razložite, nato spremenite

Razloži, kako se trenutno izračuna [skupni znesek v blagajni], korak za korakom, in pokaži na vključene datoteke. Ne spreminjaj ničesar.

Pozivi za preizkušanje in pregled

26. Robni primeri

Naštej 10 načinov, kako lahko pravi uporabnik pokvari [obrazec za rezervacije]: prazna polja, zelo dolgo besedilo, dvojni kliki, dve osebi hkrati, napačni časovni pasovi. Preizkusi vsakega in popravi, kar ne deluje. Poroči, kaj si spremenil.

27. Povzemite nedavne spremembe

V navadnih besedah povzemi vsako spremembo, ki si jo naredil v zadnjih [petih] korakih, in označi vse, kar bi lahko vplivalo na obstoječe podatke.

Varnostni pozivi

To povežite s stranjo o tem, ali je vibe coding varen.

28. Preverite dostop do podatkov

Preglej strežniško kodo: ali lahko prijavljeni uporabnik bere ali spreminja tuje [zapise] s spreminjanjem ID-ja v zahtevi? Pokaži, kje se preverja dostop, in popravi vse vrzeli.

29. Preverite za izpostavljene skrivnosti

Naštej vsak ključ API, geslo ali žeton, ki ga ta aplikacija uporablja, in kje je shranjen. Poskrbi, da nobeden ni v kodi, ki teče v brskalniku, ali v datotekah v repozitoriju. Če so, jih premakni v skrivnosti.

Pozivi za objavo

30. Pregled pred zagonom

Kmalu bom to objavil za prave uporabnike. Pregledaj kot recenzent: pokvarjene povezave, manjkajoče naslove in opise strani, obrazce brez preverjanja, počasne strani, napake v konzoli in vse, kar na telefonu izgleda nedokončano. Daj mi seznam, urejen po pomembnosti, nato popravi prvih pet.

Pozivi, ki se jim je treba izogniti

Nekateri pozivi zanesljivo dajo slabše rezultate:

• „Naredi bolje.“ Kako bolje? Poimenujte zaslon in spremembo.
• „Popravi vse.“ AI bo veliko spremenil, vi pa ne boste vedeli, kaj se je premaknilo.
• „Uporabi [knjižnico] in [ogrodje] in [vzorec].“ Razen če imate razlog, opišite vedenje in naj orodje izbere sklad.
• „Tukaj je moj ključ API: …“ Skrivnosti nikoli ne prilepljajte v klepet. Uporabite nastavitve skrivnosti orodja.
• Deset funkcij v enem sporočilu. Razdelite jih.

Pozive spremenite v navado

Po nekaj projektih boste imeli svoje različice teh. Shranite jih v zapiske in ponovno uporabite tiste, ki delujejo. Mythex si tudi med projekti zapomni, kdo ste in kako delate, zato se ponovljene nastavitve, na primer vaš običajni slog ali sklad, prenesejo brez ponovnega vpisovanja.

Če ste obtičali pri prvem pozivu, brezplačni generator pozivov za aplikacije spremeni idejo v eni vrstici v obsežnejši začetni poziv. Da vidite, kaj ti pozivi dajejo v praksi, preberite naše primere vibe codinga ali prilepite poziv 1 v gradnik aplikacij z AI in zamenjajte oglate oklepaje s svojo idejo.

Vprašanja