Predstavte si, že máte rozrobený web, funkčný, ale vizuálne pôsobí ako dokumentácia z roku 2010. Tlačidlo „Začať" je obyčajný sivý obdĺžnik, nadpisy nesedia a vy neviete, či má zmysel platiť grafikovi stovky eur za niečo, čo možno zvládnete sami.
Presne tu sa v poslednom období menia pravidlá hry: nástroje ako Gemini dnes vedia z vášho kódu vygenerovať hotový návrh rozhrania a rovno aj upravený kód. Ukážeme si, ako to funguje v praxi, čo to reálne stojí a kde si dať pozor, aby ste si nepokazili web.
Čo Gemini pri dizajne naozaj zvládne
Na kanáli ProgrammingKnowledge autor predvádza postup, ktorý je pre živnostníka prekvapivo použiteľný: vytvorí základný projekt v Reacte s TypeScriptom, do Gemini vloží požiadavku „mám základný projekt, pomôž mi navrhnúť domovskú stránku" a nástroj vygeneruje celý náhľad aj kód – vrátane animácií. Následne kód skopíruje do súboru app.tsx, obnoví server a rieši chyby.
Z toho vyplývajú tri veci, ktoré musíte vedieť dopredu:
- Gemini negeneruje len obrázok. Vracia funkčný kód (v tomto prípade pre React/TypeScript), ktorý sa dá priamo vložiť do projektu.
- Výstup takmer nikdy nefunguje na prvý pokus. Vo videu sa po vložení kódu objaví chyba pre chýbajúce moduly, ktoré treba doinštalovať. To nie je zlyhanie nástroja, to je normálny stav.
- Menšie zadania vychádzajú lepšie. Autor neskôr namiesto celého webu žiada len o úpravu jedného tlačidla („Get started") a dostane cieľavedomejší výsledok – konkrétnu úpravu s SVG prvkom.
Postup krok za krokom
Toto je postupnosť, ktorú video demonštruje, preložená do jazyka pre človeka bez programátorského vzdelania:
- Pripravte si projekt. Vo videu ide o React s TypeScriptom cez príkaz v termináli. Ak nemáte vývojové prostredie (VS Code a Node.js), toto je váš prvý kopec – bez neho sa nepohnete.
- Otvoríte Gemini a prihlásite sa. Do chatu vložíte opis: čo máte a čo chcete (napr. „mám základnú stránku, navrhni domovskú stránku").
- Skopírujete vygenerovaný kód do príslušného súboru (vo videu
app.tsx) a uložíte. - Spustíte server a opravíte chyby. Chýbajúce knižnice doinštalujete príkazom, ktorý vám nástroj alebo chybová hláška napovie.
- Iterujete po malých častiach. Namiesto „prerob celý web" žiadate o jednu vec – tlačidlo, nadpis, farbu. Vkladáte pritom existujúci kód, aby Gemini vedel, s čím pracuje.
Kde sú skryté náklady a pasce
- Čas na učenie je reálna položka. Video ukazuje hladký priebeh, ale počíta s tým, že rozumiete terminálu, súborom a inštalácii balíkov. Ak toto neviete, prvý deň vám odíde na nastavení prostredia, nie na dizajne.
- Verzie nástrojov a knižníc sa menia. Konkrétne príkazy a názvy modulov z videa nemusia platiť o mesiac – overte si ich v aktuálnej dokumentácii, nie podľa videa.
- Vygenerovaný kód treba skontrolovať. Automaticky vytvorený front-end môže obsahovať nadbytočné knižnice alebo neprístupné prvky. Vo videu to autor rieši tak, že siahne po verzii s menším počtom knižníc – to je rozumný zvyk.
- Ceny Gemini nie sú vo videu uvedené. Limity a cena predplatného Google AI sa menia, preto si ich pred rozhodnutím overte priamo v aplikácii Gemini.
Kedy sa to vyplatí a kedy nie
Pre živnostníka s malým webom je front-end s asistenciou AI rozumný pri jednotlivých prvkoch: upraviť tlačidlo, doladiť nadpis, vyskúšať iné rozloženie sekcie. Pri celej vizuálnej identite (logo, maskot, jednotný štýl značky) je to slabšie – generátor nemá váš kontext a výstup sa ťažko zosúlaďuje. Praktické pravidlo: AI na objem a varianty, človek na to, čo má držať pokope.
Technický záver: Kedy má Gemini zmysel pre front-end živnostníka
Gemini dnes zvládne vygenerovať funkčný návrh rozhrania aj kód pre React/TypeScript a vďaka iterácii po malých častiach ho dostanete do použiteľnej podoby bez programátora. Rozhodujúce však nie je, či to nástroj dokáže, ale či máte základné prostredie a čas na ladenie – bez toho zostane aj najlepší výstup v podobe chybovej hlášky. Pre živnostníka to znamená: začnite jedným tlačidlom, nie celým webom, a každý vygenerovaný kód berte ako návrh na kontrolu, nie ako hotovú vec.
Zdroje
- ProgrammingKnowledge - How To Style Your Website With Google Gemini In 2026: Ultimate Front-End Web Design Masterclass! (citované 26. 10. 2026)
- WebOptim - AI generovanie obrázkov a videa: nástroje pre marketing, weboptim.sk/blog/ai-generovanie-obrazkov (citované 26. 10. 2026)
