AI radionica · Beograd 2 dana · Build + Business Tvoj zadatak →
Zadatak za sve polaznike

Promeni svoju stranicu.
Pushuj. Pokaži.

Svako ima svoju stranicu na ovom sajtu. Tvoj zadatak je da je uz pomoć AI agenta pretvoriš u nešto tvoje, pošalješ promenu na GitHub, a onda na kraju zajedno gledamo šta je ko napravio.

🤖

Radiš sa AI agentom

Ne pišeš kod ručno. Opisuješ agentu šta želiš, on menja fajl, ti proveravaš rezultat i tražiš ispravke.

🌿

Učiš Git tok rada

Branch, commit, push i pull request — isti tok rada koji koriste profesionalni timovi svaki dan.

🌍

Objavljuješ uživo

Kad se promena spoji, sajt se automatski objavljuje. Tvoja stranica je javna i možeš da je podeliš.

⚠️

Tri pravila pre nego što kreneš

1. Menjaj samo svoj folder ljudi/tvoje-ime/. U njemu smeš da praviš nove stranice i podfoldere, a slike stavi u ljudi/tvoje-ime/slike/.
2. Ne diraj assets/style.css i tuđe stranice — tako niko nikome ne kvari rad.
3. Nikad ne stavljaj API ključeve, lozinke ni privatne podatke u kod. Repo je javan.

Korak po korak

Od poziva do live stranice

Prati korake redom. Ako se negde zaglaviš, prvo proveri Debug Diary, pa pitaj u Slack-u.

Prihvati poziv na GitHub repozitorijum

Na mejl ti stiže poziv za repozitorijum n8nlab/aiworkshop. Klikni Accept invitation. Ako nemaš GitHub nalog, napravi ga na github.com/signup istim mejlom.

Preuzmi projekat na svoj računar

Otvori terminal (ili terminal u VS Code / Cursor-u) i pokreni:

git clone https://github.com/n8nlab/aiworkshop.git
cd aiworkshop

Nemaš Git lokalno? Na stranici repozitorijuma pritisni taster . ili otvori Code → Codespaces i radi direktno u browseru.

Napravi svoju granu (branch)

Grana je tvoja lična kopija projekta u kojoj možeš slobodno da eksperimentišeš, bez rizika da pokvariš glavni sajt.

# zameni "marija-babic" imenom svog foldera
git checkout -b marija-babic/moja-stranica

Pronađi svoj folder

Svako ima svoj folder u ljudi/, npr. ljudi/marija-babic/, a glavna stranica je ljudi/marija-babic/index.html. Otvori je u browseru (dupli klik na fajl) da vidiš kako trenutno izgleda. Ne znaš koji je tvoj? Pogledaj stranicu Ljudi.

Kreni od svojih startnih promptova

Na dnu tvoje stranice čeka te 5 promptova spremnih za kopiranje. Idu redom: upoznaj teren → moj identitet → mini alat iz mog posla → mini sajt sa više stranica → provera i objava. Pokreni agenta (Claude Code, GitHub Copilot ili Cursor) u folderu projekta, kopiraj prvi prompt, popuni žuta polja i pošalji.

Svaki prompt ima istu šemu, a nju učiš na ovoj radionici:

# ULOGA        ko je agent (npr. web dizajner)
# KONTEKST     odakle počinjemo: koji fajl, šta već postoji, ko si ti
# ZADATAK      šta tačno tražimo
# ZAHTEVI      kako rezultat mora da izgleda
# OGRANIČENJA  šta agent NE sme (npr. da dira tuđe fajlove)
# CILJ         zašto sve ovo — agent bolje odlučuje kad zna svrhu

Osveži stranicu u browseru, pogledaj rezultat i traži ispravke dok nisi zadovoljan. To je ceo trik: opiši → proveri → ispravi.

Sačuvaj promenu (commit)

Commit je snimak tvoje promene sa kratkim opisom. Proveri da si menjao samo svoj folder, pa sačuvaj:

git status                       # treba da vidiš samo svoj folder
git add ljudi/marija-babic/
git commit -m "Marija: nova verzija moje stranice"

Prompt 05 na tvojoj stranici radi ovo umesto tebe — ali uvek pročitaj šta je agent uradio.

Pošalji na GitHub (push)

git push -u origin marija-babic/moja-stranica

Terminal će ti ispisati link za Pull Request. Ako te pita za prijavu, koristi svoj GitHub nalog.

Otvori Pull Request

Na GitHub-u klikni Compare & pull request. U naslov upiši svoje ime, a u opis šta si promenio i koji prompt ti je najbolje radio. Kad Jovan ili Stefan spoje tvoj PR, sajt se sam objavi za minut-dva na n8nlab.github.io/aiworkshop. Do tada svoju verziju gledaš lokalno u browseru.

Showcase — gledamo šta je ko napravio 🎉

Kad su svi PR-ovi spojeni, sve stranice su uživo na GitHub Pages. Svako ima 2 minuta da pokaže svoju stranicu i kaže jednu stvar koju je naučio. Najbolji prompt ide u Prompt Library, a najzanimljiviji kvar u Debug Diary.

Inspiracija

Ne znaš šta da napraviš? Probaj ovo.

🎨

Lični brend

Boje, font i stil koji liče na tebe ili tvoju firmu. Dodaj logo i link ka sajtu.

🧮

Mini alat

Kalkulator cene, konvertor, kviz ili generator ideja — nešto što stvarno koristiš u poslu.

📇

Digitalna vizitkarta

Ko si, čime se baviš, kako da te kontaktiraju i QR kod ka tvojoj stranici.

✨

Animacije

Pozadina koja se pomera, konfete na klik, efekat kucanja teksta. Neka bude zabavno.

🗺️

Plan automatizacije

Opiši 3 procesa iz svog posla koja želiš da automatizuješ i kako bi agent to radio.

🌙

Dark / light mod

Dugme koje menja temu stranice i pamti izbor posetioca.

Debug Diary — unapred

Česti problemi i rešenja

„Permission denied" kod push-a

Uzrok: nisi prihvatio poziv ili nisi prijavljen. Rešenje: prihvati poziv na mejlu, pa pokreni gh auth login ili se prijavi kad te Git pita.

Agent je menjao i druge fajlove

Uzrok: prompt nije imao sekciju OGRANIČENJA. Rešenje: git checkout -- putanja/do/fajla vraća tuđi fajl, a u promptu uvek napiši „menjaj SAMO fajlove u ljudi/tvoje-ime/".

Stranica izgleda „polomljeno"

Uzrok: obično nezatvoren tag ili pogrešna putanja do CSS-a. Rešenje: otvori DevTools (F12 → Console) i daj agentu tačnu poruku greške.

Podstranica nema stil / linkovi ne rade

Uzrok: pogrešna putanja. Sajt živi na /aiworkshop/, pa putanje koje počinju sa / ne rade. Rešenje: relativne putanje — iz tvog foldera ../../assets/style.css, iz podfoldera ../../../assets/style.css. Prompt 04 ovo već traži.

Conflict kod spajanja

Uzrok: neko je menjao isti fajl. Rešenje: ako si menjao samo svoj folder, ovo se ne dešava 😉 Ako se ipak desi, pozovi Jovana ili Stefana.