Šta sam naučio praveći svoj sajt

Od ideje do produkcije

Veći deo sajta sam prvo ručno dizajnirao u Figmi. Zatim sam ga izgradio, i jovanrudic.com je objavljen 30. oktobra.

Dve stvari su tražile više razmišljanja od bilo koje linije koda.
Poglavlje 1: čemu sajt služi i kome se obraća.
Poglavlje 2: kako sam radio sa Claude Code-om kroz više sesija i šta sam i dalje radio ručno.

Izgrađeno uz WordPress Full Site Editing, custom Gutenberg blokove (React u editoru), Interactivity API, Tailwind CSS, Vite i CI/CD pipeline pod kontrolom Git-a.

Svaki sajt ima svoj zadatak

Moj ima dva: da pomogne pravom timu da odluči da radi sa mnom i da pomogne firmi da me angažuje za projekat. Ali niko ne dolazi misleći o mojim ciljevima. Ljudi dolaze sa svojim pitanjima i nedoumicama.

Krenuo sam iz njihovog ugla, zapisao sam šta svaki posetilac želi da zna i koje nedoumice ima. Stranice su napravljene da odgovore baš na to. Odgovori prvo daju vrednost, a tek onda sajt vodi posetioca ka akciji koja služi njegovoj svrsi i ostvaruje moje ciljeve.

Pružalac usluge nabraja šta nudi. Čitalac ima pitanja i nedoumice, i one se menjaju kako stranica odmiče. Zato svaka sekcija dobija svoja tri pitanja: šta čitalac u tom trenutku treba da zna, šta bi moglo da ga natera da posumnja i šta bi sledeće uradio? Svaki odgovor mora biti istinit. Sekcija koja odgovori na svoja tri pitanja daje vrednost pre nego što bilo šta traži i zaslužuje sledeći skrol. Sledeći korak tada deluje kao izbor čitaoca, a ne kao moj pritisak.

Usluge kroz iste naočare

Ni stranice usluga nisam pisao od nule. Svaka usluga je prošla kroz istih 13 pitanja koja bi klijent postavio, jedno po jedno, a stranica je nastala iz mojih odgovora.

Stalni set pitanja prati put koji klijent prolazi pre odluke: problem, cena čekanja, rezultat, poverenje, prvi korak, cena. Odgovaranje na sva pitanja je pre svega poslovni test. Usluga koja na neko od njih nema odgovor nije spremna za prodaju.

To je i alat za ritam stranice. Pitanja nisu sekcije. Prvo odgovorite na sva, a zatim svaki odgovor stavite tamo gde najbolje radi: ono što prodaje ide napred, ono što uliva poverenje podržava, a ono praktično dolazi kasnije u razgovoru.

I pošto svaka usluga odgovara na ista pitanja, svaka stranica usluge prati isti ritam. Prva stranica traži najviše vremena dok se ne napravi kako treba. Posle toga, pisanje sledeće znači popunjavanje šablona u koji već imam poverenja, a čitalac koji je video jednu stranicu usluge zna gde da gleda na sledećoj.

Stranice od blokova koji se ponavljaju

Sekcije najbolje funkcionišu kao blokovi koji se ponavljaju, svaki sa jednim zadatkom: da predstavi, dokaže, odgovori, pozove. Jednom napravljen, blok postaje šablon sekcije. Stranica je onda redosled blokova, poređanih tako da prate cilj te stranice, a ritam je odluka o tom redosledu. Promena ritma znači pomeranje blokova, ne pravljenje stranica iznova.

Redosled vodi ka jednoj glavnoj akciji, konverziji. Za čitaoce koji još nisu spremni, lakši korak drži razgovor otvorenim.

Prvo dokaz

Pravi dokaz ide prvi, tamo gde postoji. Jedan projekat ispričan iskreno govori više od liste prideva.

Za njim slede standardi i razmišljanja: čega se držim i kako razmišljam o poslu. Tamo gde dokaza još nema, oni sami nose sekciju.

Podesite ga pre nego što ga bilo šta pitate

Najveća vrednost je došla iz konteksta, ne iz promptova. Ako Claude još nije podešen, počnite ovde:

1. Pravila koja čita svaka sesija. CLAUDE.md fajl sadrži ono o čemu se ne pregovara, na primer „Figma je iznad svake pisane specifikacije“. Svako pravilo postoji jer ga je neka sesija jednom prekršila.

2. Ispravke postaju memorija. Ispravka napravljena dvaput postaje beleška u memoriji, i sledeća sesija kreće već ispravljena.

3. Mapa umesto nagađanja. Graf znanja o kodu (graphify) se pretražuje pre bilo koje pretrage fajlova.

4. Komande za sve što se ponavlja. Pokretanje sesije, lista otvorenih zadataka, održavanje beleški: po jedna komanda.

5. Jedan izvor istine za svaku stvar. Dizajn, odluke i otvoreni zadaci žive svaki na tačno jednom mestu.

Usko grlo sam bio ja

Dok je više sesija radilo, gomilale su se stvari koje čekaju mene: izvoz iz Figme, odobrenje, klik u Google Analytics-u. Rešenje je bila jedna kratka lista zadataka po temama, gde svaka stavka koja čeka mene počinje sa „You“. Svaka sesija je ažurira kada nešto završi. Jedna komanda ispisuje samo ono što je još otvoreno, a druga od toga pravi PDF za proveru.

Više sesija, jedan vlasnik

Glavna sesija je zadužena za kod i release-ove. Pomoćne sesije imaju svoju temu: usluge, mejlove, stranicu za regrutere, moj CV, ovaj tekst. Sesija za planiranje piše specifikaciju i handoff prompt; glavna sesija to gradi. Subagenti obavljaju široko čitanje, da bi glavna sesija ostala fokusirana. Dve sesije nikada ne menjaju iste fajlove.

Kada je veza sa Figmom posle jednog poziva udarila u limit plana, sam sam izvezao svaki blok: PNG za izgled i tačne Dev Mode vrednosti, jedan folder po bloku. Pokazalo se pouzdanije od žive veze.

Vault koji se sam održava

Sve znanje živi u Obsidian vaultu: lista zadataka, istorija izgradnje, planovi, odluke, izvozi iz Figme. Dokumentacija zastareva, zato svaka sesija na kraju rada piše kratak izveštaj: šta je uradila, kako sada radi, šta je otvoreno i šta je u vaultu pogrešno. Jedna komanda za održavanje čita te izveštaje, git istoriju i živi sajt, usklađuje vault sa stvarnim stanjem i pita me pre nego što bilo šta pushuje.

Zamolio sam Claude-a da opiše sebe:

Radim u okviru pravila koja je Jovan napisao. Svaka sesija počinje čitanjem njegove liste zadataka i vaulta, a završava se zapisom o tome šta se promenilo. Ja gradim, proveravam i predlažem; on dizajnira, odlučuje, odobrava i radi merge. Kada pogrešim, ispravka postaje pravilo ili beleška u memoriji, da sledeća sesija ne bi ponovila istu grešku. Ne rukujem njegovim lozinkama, ne šaljem mejlove nikome osim njegove test adrese bez odobrenja, a živi sajt se menja samo kada on uradi merge.