O meni
Ovde napiši 2–3 rečenice o sebi: čime se baviš, gde radiš i zašto si došao/la na radionicu.
Ovde napiši 2–3 rečenice o sebi: čime se baviš, gde radiš i zašto si došao/la na radionicu.
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.
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/onix/index.html - Moj folder: ljudi/onix/ — ovde smem da pravim nove stranice i dodajem slike # ZADATAK 1. Pročitaj README.md, assets/style.css i ljudi/onix/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.
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/onix/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. vodim studio za pirsing Piercing Works] - 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/onix/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.
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/onix/index.html. - Čime se bavim: [NPR. vodim studio za pirsing Piercing Works] - Problem koji imam u poslu: [NPR. klijenti stalno pitaju koliko košta pirsing i kako se neguje posle] # 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/onix/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.
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/onix/, a glavna stranica je ljudi/onix/index.html. Sajt živi na podadresi https://n8nlab.github.io/aiworkshop/ — zato su putanje bitne: - iz ljudi/onix/ do zajedničkog CSS-a: ../../assets/style.css - iz ljudi/onix/podfolder/ do zajedničkog CSS-a: ../../../assets/style.css # ZADATAK Napravi mi mini sajt unutar mog foldera sa ovim stranicama: - ljudi/onix/[NPR. usluge].html — [ŠTA IDE NA TU STRANICU] - ljudi/onix/[NPR. projekti]/index.html — [SPISAK MOJIH PROJEKATA] - ljudi/onix/[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/onix/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/onix/. - 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.
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/onix/. Radim na grani onix/moja-stranica (ako ne postoji, napravi je od main). # ZADATAK 1. Pregledaj sve fajlove u ljudi/onix/: 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. "Onix: nova stranica + mini alat". 5. Pushuj granu onix/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.
Ne kreći ispočetka. Reci tačno šta ne valja: „Naslov je prevelik na telefonu. Smanji ga, a sve ostalo ostavi isto."
Mali, jasni promptovi rade bolje od jednog ogromnog. Proveri rezultat posle svakog koraka.
Kad savladaš ovih pet, napiši svoj po istoj šemi: uloga, kontekst, zadatak, zahtevi, ograničenja, cilj.