Peatükk 7
PromtLab
Kirjelda mida tahad ehitada ja AI genereerib sulle täiusliku vibe coding promti — kohe kasutamiseks.
Vajad inspiratsiooni?
Sinu promt
Tulemus ilmub siia.
Vibe coderi promptimise kuldreeglid
Kuus reeglit, mis eristavad head promti ajaraiskavast.
Konkreetsus võidab
"Tee mulle kena nupp" → halb. "Tee 16px ümarate nurkadega nupp, sinine taust #2E75B6, hover'il liigub 2px üles" → hea.
Anna konteksti
AI ei tea, et sa kasutad Elementorit. Ütle ette ära.
Üks asi korraga
"Tee mulle kogu leht" on liiga suur. Küsi sektsiooni kaupa.
Anna veateade tagasi
Sa ei pea uuesti alustama. Lisa "see ei tööta, viga on X" — AI parandab.
Ütle, mis sulle EI meeldi
"Muuda nupp suuremaks" on parem kui "tee uuesti".
Salvesta head promptid
Kui üks prompt töötas hästi, hoia alles. Sinu prompditeek on sinu superjõud.
Näited
Vaata kuidas hea vibe coding promt välja näeb:
Vajuta näidise peale, et proovida seda generaatoris.
Produktiivsus
Loovus
Haridus
Igapäevaelu
WordPress + Elementor
Promtide kogumik
Valmis promptid, mida saad kohe kasutada ja oma vajadustele kohandada.
Vea parandamine (kui kood ei tööta)
Aitab AI-l oma viga kiiresti parandada — annad tagasi veateate ja keskkonna info, saad parandatud koodi. 💡 Millal kasutada: kogu aeg. See on kõige alahinnatum prompt. 90% AI vigadest parandatakse, kui annad veateate tagasi.
Sa andsid mulle eelmises sõnumis koodi, mis ei tööta WordPressis nii, nagu peaks. MIS PIDI JUHTUMA: [Kirjelda 1-2 lausega, mida tahtsid] MIS TEGELIKULT JUHTUS: [Kirjelda mida näed. Kas: - Kood ei renderda midagi? - Lehe paigutus läks katki? - Brauseri konsool annab veateate? (Kopeeri see siia)] KESKKOND: - WordPress versioon: [nt 6.7] - Page builder: [Elementor / Gutenberg / Divi] - Brauser: [Chrome / Firefox / Safari] - Kas mobiilis või arvutis? [täpsusta] PALU: - Selgita lihtsalt, mis viga oli (1-2 lauset, ilma tehnilise kõnepruugita) - Anna parandatud kood - Lisa, mida edaspidi sarnaste vigade vältimiseks teha
Debugging
Ideaalne kiireks vigade leidmiseks. Annab AI-le täpse konteksti veateate ja koodi näol.
Mul on järgmine viga: [KLEEBI VIGA SIIA]. Siin on kood, mis seda põhjustab: ``` [KLEEBI KOOD SIIA] ``` Palun selgita lühidalt, miks see viga tekib ja paku välja parandatud koodiversioon.
Uue komponendi loomine
Struktureeritud viis uute UI elementide tellimiseks, tagades et AI kasutab õigeid tehnoloogiaid.
Loo React (TypeScript) komponent nimega [KOMPONENDI NIMI]. See peaks tegema järgmist: - [NÕUE 1] - [NÕUE 2] Kasuta stiilimiseks Tailwind CSS-i. Komponent peaks olema visuaalselt ilus ja responsive (mobiilisõbralik). Ära kasuta väliseid teeke, kui ma pole seda palunud.
Koodi selgitamine
Vibe coderid loevad palju koodi, mida nad ise ei kirjutanud. See prompt aitab keerulistest failidest aru saada.
Palun selgita mulle seda koodiplokki nii, nagu ma oleksin algaja programmeerija. Jaga selgitus loogilisteks sammudeks ja lisa igale sammule kommentaar, mida see täpsemalt teeb: ``` [KLEEBI KOOD SIIA] ```
Arhitektuuri planeerimine
Enne koodi genereerimist on oluline süsteem läbi mõelda. See prompt aitab luua teekaardi.
Tahan ehitada rakendust, mis [RAKENDUSE IDEE]. Milliseid funktsionaalsusi, andmebaasi tabeleid ja API lõpp-punkte mul selleks vaja läheb? Loo mulle samm-sammuline plaan selle ehitamiseks.
Koodi refaktoriseerimine
Aitab muuta "spagetikoodi" professionaalseks ja loetavaks koodibaasiks.
Siin on minu töötav kood, aga see on pikk ja raskesti loetav. Palun refaktoriseeri see puhtamaks ja tõhusamaks, järgides Clean Code põhimõtteid. Kirjuta juurde, mida ja miks sa muutsid: ``` [KLEEBI KOOD SIIA] ```
Testide kirjutamine
Kiire viis oma rakenduse stabiilsuse tagamiseks ilma igavat testikoodi käsitsi kirjutamata.
Kirjuta Vitest ja React Testing Library abil ühiktestid (unit tests) järgmisele komponendile. Kata kindlasti ära nii õnnestunud stsenaariumid (happy path) kui ka veasituatsioonid: ``` [KLEEBI KOOD SIIA] ```