Zoran Jovanović
Profesionalni upravnik zgrada. Na radionici učim kako da AI preuzme prijave stanara i radne naloge.
O meni
Radim i živim u Negotinu kao profesionalni upravnik zgrada.
Šta želim da automatizujem
Prijem mejlova od stanara
Izdavanje radnih naloga tehničarima
Prijava stigne telefonom ili mejlom, a nalog ide pravom tehničaru.
Pet promptova. Jedna stranica koja je samo tvoja.
Kopiraj prompt, zalepi ga AI agentu (Claude Code, Copilot, Cursor) i gledaj šta radi. Idi redom — svaki korak se nadovezuje na prethodni. Žuta polja obavezno zameni svojim podacima — tu nastaje razlika između tvoje i tuđe stranice.
Upoznaj teren
Pre nego što išta menjaš, neka agent pročita projekat i objasni ti ga. Ovaj prompt ne menja nijedan fajl.
# ULOGA Ti si iskusan web developer i mentor koji radi sa početnikom. Objašnjavaj jednostavno i na srpskom. # KONTEKST — odakle počinjemo Nalazimo se u repozitorijumu sajta "AI Radionica Beograd". Sajt je čist HTML + CSS, bez frameworka i bez build koraka. Objavljuje se na GitHub Pages: https://n8nlab.github.io/aiworkshop/ - Zajednički stilovi: assets/style.css (njih NE menjamo) - Moja stranica: ljudi/led-svetla/index.html - Moj folder: ljudi/led-svetla/ — ovde smem da pravim nove stranice i dodajem slike # ZADATAK 1. Pročitaj README.md, assets/style.css i ljudi/led-svetla/index.html. 2. Objasni mi u 5–7 rečenica kako je sajt organizovan. 3. Nabroj gotove CSS klase (kartice, dugmad, grid…) koje mogu da koristim na svojoj stranici. 4. Predloži mi 3 potpuno različita pravca kako bi moja stranica mogla da izgleda. # OGRANIČENJA - U ovom koraku NE menjaj nijedan fajl. Samo čitaj i objasni. # CILJ Da razumem teren pre nego što počnem da gradim i da izaberem svoj pravac.
Moj identitet
Pretvori generičku stranicu u svoju: ime, priča, boje i stil. Popuni žuta polja pre slanja.
# ULOGA Ti si web dizajner koji pravi lične stranice sa jakim, prepoznatljivim stilom. # KONTEKST Radim na svojoj stranici: ljudi/led-svetla/index.html. Trenutno ima privremeno ime, prazne sekcije i generički izgled. O meni: - Ime i prezime: [TVOJE IME I PREZIME] - Čime se bavim: [NPR. prodajemo LED rasvetu preko sajta ledsvetla.rs] - 3 reči koje me opisuju: [NPR. precizan, kreativan, brz] # ZADATAK Redizajniraj moju stranicu tako da odražava mene i moj posao. # ZAHTEVI 1. Upiši moje pravo ime, inicijale u avataru i kratku biografiju (2–3 rečenice) na osnovu podataka iznad. 2. Vizuelni stil: [IZABERI: minimalistički / retro 80-e / luksuzni crno-zlatni / razigran i šaren / brutalistički / ili opiši svoj] 3. Promeni boju naglaska (--c) i sve svoje stilove piši u <style> blok na vrhu fajla. 4. Stranica mora lepo da izgleda i na telefonu. 5. Ukloni žuti baner "Ova stranica čeka tvoju prvu promenu". 6. Sekciju "Moji startni promptovi" ostavi na dnu stranice. # OGRANIČENJA - Menjaj SAMO fajl ljudi/led-svetla/index.html. - Ne menjaj assets/style.css niti tuđe stranice. - Ne izmišljaj činjenice o meni — ako ti nešto fali, pitaj me. # CILJ Kad neko otvori moju stranicu, za 5 sekundi treba da zna ko sam i čime se bavim. # NA KRAJU Napiši mi kratak spisak svega što si promenio.
Mini alat iz mog posla
Dodaj nešto interaktivno što rešava pravi problem iz tvog posla: kalkulator, kviz, generator ponude…
# ULOGA Ti si frontend developer koji pravi male, korisne alate u čistom JavaScript-u. # KONTEKST Moja stranica je ljudi/led-svetla/index.html. - Čime se bavim: [NPR. prodajemo LED rasvetu preko sajta ledsvetla.rs] - Problem koji imam u poslu: [NPR. kupci ne znaju koliko LED trake i koje napajanje im treba za prostoriju] # ZADATAK Dodaj na moju stranicu novu sekciju sa interaktivnim mini alatom koji rešava taj problem. Primeri: kalkulator cene, kviz "šta ti odgovara", generator ponude, forma koja sklapa poruku za WhatsApp ili mejl. # ZAHTEVI 1. PRE pisanja koda predloži mi 3 ideje za alat i sačekaj da izaberem jednu. 2. Sav JavaScript i CSS stavi u isti fajl (<script> i <style>), bez spoljnih biblioteka. 3. Alat mora da radi bez servera i bez API ključeva. 4. Dizajn uskladi sa ostatkom moje stranice. 5. Objasni mi u 3 rečenice kako alat radi, da mogu da ga pokažem drugima. # OGRANIČENJA - Menjaj SAMO ljudi/led-svetla/index.html. - Nikakve lozinke, ključevi ni lični podaci u kodu. # CILJ Da moja stranica ne bude samo vizitkarta, nego nešto što stvarno koristi meni ili mojim klijentima.
Moj mini sajt — više stranica i nivoa
Napravi dodatne stranice u svom folderu, pa i podfoldere (npr. projekti → projekat-1). Ovde se najlakše pokvare linkovi, zato je prompt strožiji.
# ULOGA Ti si web developer koji pravi uredne sajtove sa više stranica. # KONTEKST Moj folder je ljudi/led-svetla/, a glavna stranica je ljudi/led-svetla/index.html. Sajt živi na podadresi https://n8nlab.github.io/aiworkshop/ — zato su putanje bitne: - iz ljudi/led-svetla/ do zajedničkog CSS-a: ../../assets/style.css - iz ljudi/led-svetla/podfolder/ do zajedničkog CSS-a: ../../../assets/style.css # ZADATAK Napravi mi mini sajt unutar mog foldera sa ovim stranicama: - ljudi/led-svetla/[NPR. usluge].html — [ŠTA IDE NA TU STRANICU] - ljudi/led-svetla/[NPR. projekti]/index.html — [SPISAK MOJIH PROJEKATA] - ljudi/led-svetla/[NPR. projekti]/[NPR. projekat-1].html — [DETALJI JEDNOG PROJEKTA] # ZAHTEVI 1. Svaka stranica ima isti meni sa linkovima ka svim mojim stranicama + link "← Svi polaznici" ka ljudi/index.html. 2. Koristi SAMO relativne putanje (../ i ../../). Nikad putanje koje počinju sa "/". 3. Zajedničke stilove mog mini sajta stavi u ljudi/led-svetla/stil.css i poveži ih na svim mojim stranicama. 4. Na glavnoj stranici dodaj vidljive linkove ka novim stranicama. 5. Na kraju proveri SVAKI link i napravi mi tabelu: stranica → link → gde vodi → radi / ne radi. # OGRANIČENJA - Pravi i menjaj fajlove SAMO unutar foldera ljudi/led-svetla/. - Nazivi fajlova i foldera: mala slova, crtice umesto razmaka, bez č/ć/š/ž/đ (npr. moji-projekti.html). # CILJ Da naučim kako se sajt organizuje u više stranica i nivoa, i da moj deo sajta izgleda kao pravi mali sajt.
Provera i objava na GitHub
Poslednji korak: agent pregleda tvoj rad, proveri da nisi dirao tuđe fajlove, napravi commit i pushuje tvoju granu.
# ULOGA Ti si pažljiv code reviewer i pomažeš mi da bezbedno objavim svoje promene. # KONTEKST Završio/la sam izmene u folderu ljudi/led-svetla/. Radim na grani led-svetla/moja-stranica (ako ne postoji, napravi je od main). # ZADATAK 1. Pregledaj sve fajlove u ljudi/led-svetla/: pokvareni linkovi, nezatvoreni tagovi, slike koje ne postoje, izgled na telefonu. 2. Pokreni `git status`. Ako je izmenjen bilo koji fajl VAN mog foldera, zaustavi se i pitaj me šta da radimo. 3. Pokaži mi spisak pronađenih problema i popravi ih tek kad potvrdim. 4. Napravi commit sa jasnom porukom na srpskom, npr. "LED Svetla: nova stranica + mini alat". 5. Pushuj granu led-svetla/moja-stranica i daj mi link za otvaranje Pull Request-a. # OGRANIČENJA - Nikad ne radi push direktno na main. - Ne briši i ne menjaj ništa van mog foldera. # CILJ Da moja promena stigne na GitHub čista, proverena i spremna da je svi vide.
Rezultat ne valja?
Ne kreći ispočetka. Reci tačno šta ne valja: „Naslov je prevelik na telefonu. Smanji ga, a sve ostalo ostavi isto."
Jedan korak odjednom
Mali, jasni promptovi rade bolje od jednog ogromnog. Proveri rezultat posle svakog koraka.
Napravi svoj prompt
Kad savladaš ovih pet, napiši svoj po istoj šemi: uloga, kontekst, zadatak, zahtevi, ograničenja, cilj.