Kako sem preoblikoval svojo spletno stran z Gemini 3 (Brez kodiranja)

Gemini 3 je izšel (novi Googlov model) in lahko preverjeno rečem, da je prava “zverina”.

Takoj sem ga preizkusil in je z lahkoto na ravni Claude 4.5 za programerske naloge, verjetno celo boljši. V Google AI Studio sem mu dal prompt in v prvem poskusu je zgradil popolnoma delujočo spletno aplikacijo.

Toda danes bi rad govoril o nečem drugem.

Želel sem preizkusiti njegovo oko za UX in dizajn.

Zato sem uporabil Windsurf AI (ki že omogoča Gemini 3), da sem popolnoma preoblikoval svojo domačo spletno stran.

V današnjem newsletterju ti bom na hitro razložil, kako sem vodil model skozi pogovor, da je dolgočasno spletno stran spremenil v modernejšo pripovedno izkušnjo.

Kako sem nadgradil spletno stran z Gemini 3 v “pripovedno”

Večina ljudi misli, da moraš biti profesionalni oblikovalec ali razvijalec, da dobiš tisti občutek po meri in visoki kakovosti. Ni res. Vedeti moraš le, kako usmerjati AI.

Tukaj sem posnel kratek video končnega rezultata:

Tukaj so 3 ključna načela, ki sem jih uporabil za ta rezultat.

Načelo 1: Zgodba narekuje postavitev

Nisem začel z zahtevo po “hero sekciji” ali “treh stolpcih”. Začel sem s pripovedjo.

Model sem prosil, naj strukturira stran kot potovanje osebe: Borba → Ovire → Rešitev.

Posebej sem prosil za vizualno “povezovalno črto”, ki vodi uporabnika navzdol po strani in fizično povezuje te stopnje.

Torej želel sem da zgradi pripovedni tok.

Načelo 2: Ustvari globino

Želel sem, da stran deluje živo, ne “ravno” oz. statično.

Želel sem dva specifična vizualna učinka, ki običajno zahtevata kompleksen CSS:

1. Rekel sem, da naj izgleda, kot da drseča črta potuje skozi kartico, lebdi nad ozadjem, a pod besedilom.
2. Ko uporabnik končno priskrola do razdelka “Rešitev”, sem želel, da ta zažari ali utripa. Da ustvarimo občutek olajšanja po skrolanju mimo “Ovir”.

Opisal sem občutek, ki sem ga želel, AI pa je poskrbel za kodo.

Načelo 3: Poliranje

Prva verzija je izgledala v redu, vendar je imela težave: povezovalna črta je prekrivala besedilo na mobilnih telefonih in animacije so se na Safariju močno zatikale.

V preteklosti bi bilo to nočna mora za debugiranje. Z Gemini 3 je bil to preprost pogovor:

“Črta prekriva besedilo na mobilcu. Premakni jo.”

“Animacija se zatika na Safari brskalniku. Popravi.”

Takoj je preuredil kodo za zmogljivost in odzivnost.

Ti si na vrsti

Torej naslednjič poskusi ubesediti izkušnjo.

1. Začni s širšo sliko: Definiraj zgodbo (Borba -> Rešitev).
2. Dodaj “Wow”: Zahtevaj specifične vizualne interakcije (globina, sijaj, gibanje).
3. Izboljšaj: Ne sprejmi zatikanja ali slabih postavitev na mobilcih. Reci modelu, naj to popravi.

V naslednjih newsletterjih bom sigurno še bolj testiral Gemini 3. Predvsem kako nam pride prav v poslu ne samo v kodiranju. Čeprav nisem nič kodiral, samo ukazoval. 😉

Se slišiva,

Primož

---

Dodatek: Podobna navodila tistim, ki sem jih uporabil jaz

Želiš to preizkusiti sam? Tukaj je približek pogovora v 6 korakih, ki sem ga imel z modelom:

1. korak: Širša slika

Cilj: Spremeni dolgočasno domačo stran v zgodbo.

“Želim preoblikovati svojo domačo stran tako, da bo pripovedovala zgodbo o moji stranki. Namesto da samo naštevaš funkcije, pokaži njihovo potovanje: najprej ‘Borba’, nato ‘Ovire’ in končno ‘Rešitev’. Ali lahko ustvariš postavitev, kjer se pomikamo skozi te stopnje eno za drugo, morda s povezovalno črto, ki nas vodi navzdol?“

2. korak: Popravljanje mobilnega pogleda

Cilj: Poskrbi, da deluje na telefonih.

“Drseča črta izgleda kul na mojem računalniku, vendar prekriva besedilo na mojem telefonu. Ali lahko zaznaš, kdaj je nekdo na mobilcu, in premakneš to črto na stran? Še vedno mora izgledati dobro, samo da ni na poti.”

3. korak: Čiščenje & Copywriting

Cilj: Bolje organiziraj vsebino.

“Organizirajva to bolje. Ali lahko naredimo zgornji meni ‘lepljiv’, da ti sledi, ko skrolaš? Prav tako, prosim, premakni kartico ‘Hosting Platform’ na ločeno stran, imenovano ‘Eksperimenti’. Za glavno besedilo želim spremeniti sporočilo, da se osredotoča na ‘Manj teorije, več izvedbe’. Posodobi naslove, da bodo ustrezali temu vzdušju.”

4. korak: “Wow” trenutek

Cilj: Naj razdelek z rešitvijo zasije.

“Ko uporabnik končno prikrola do razdelka ‘Rešitev’, želim veliko vizualno poplačilo. Ali lahko narediš, da ta specifičen razdelek zažari ali utripa, ko pride v pogled? Moralo bi delovati kot olajšanje po skrolanju mimo ovir.”

5. korak: Učinek čarobne kartice

Cilj: Dodaj kul trik s 3D plastmi.

“Imam specifično oblikovalsko idejo za srednjo kartico v razdelku ‘Ovire’. Na velikih zaslonih želim, da drseča črta izgleda, kot da potuje skozi kartico — lebdi nad barvo ozadja, a pod besedilom. Ali lahko to izvedeš?“

6. korak: Gladko jadranje

Cilj: Popravi zatikajoče se animacije.

“Opazil sem, da se drseča animacija na Safariju in iPhonih malo zatika. Ali lahko optimiziraš kodo, da bo tekla gladko kot maslo na vseh napravah? Preveri morebitne težave z zmogljivostjo pri animacijah.”