🚀

Vajbovačka

príručka workshopu

Praktický sprievodca celým dňom — od prvého kontaktu s Claudom až po vlastnú appku naživo na internete. Poskladaný podľa obsahu, krok za krokom: každá časť je jeden kúsok cesty od nápadu k hotovému projektu.

Legenda ↑↓predošlý / ďalší blok MEDZERAmaximalizovať blok 🖱klik = maximalizovať ESCzavrieť
📶 WiFi Monada-8787 Heslo 87878787
📶 WiFi Monada-131 Heslo 131131131
Mapa dňa
🗺️

Štruktúra dňa

Jeden deň, deväť blokov programu — od prípravy až po appku naživo. Toto je kostra, na ktorú vešiame celý zvyšok príručky.

📶 WiFi Monada-8787 Heslo 87878787
📶 WiFi Monada-131 Heslo 131131131
Časový rozpis · blok programu → časť príručky
Čas Blok programu Časť
—Príprava (pred workshopom)Časť 0
9:00Úvod — zorientuj sa v ClaudeČasť 1
9:00Mindset vibe kódovaniaČasť 2
9:30Promptovanie ako remesloČasť 3
10:45Tvoje zadanie — brief & podkladyČasť 4
10:45Claude Design — návrh appky/webuČasť 5
13:15Z dizajnu do kódu: HTML/JSČasť 6
14:15git push → NAŽIVO 🚀Časť 7
15:15Výkon, GEO + Claude Code na úpravyČasť 8
—Kam ďalej — pokročilé stackyBonus A
—Otázky a cvičenia na záverBonus B
—Slovníček pojmovPríloha
00
Časť 0 · pred workshopom

Nachystaní
ešte pred príchodom

Účty a programy máme prichystané vopred. Kto to má hotové, ráno rovno tvorí.

Rekap prípravy — účty a programy máme nachystané ešte pred príchodom (viď samostatný checklist pred workshopom): platený Claude, GitHub, Vercel, Claude desktop appka (s Claude Code) a GitHub Desktop. Kto to má hotové, ráno rovno tvorí.

Claude (platený) GitHub Vercel Claude desktop (Code) GitHub Desktop
01
Časť 1 · zorientuj sa

Claude, modely
a ako to celé zapadá

Tri tváre Clauda, výber modelu, náš tech stack a mapa celého dňa — aby si sa nestratil.

🕘 9:00 · doobedný blok (úvod)
1.1

Tri tváre Clauda: Chat · Code · Cowork

Claude ti počas dňa poslúži v troch podobách. Je to stále ten istý „mozog", líšia sa len tým, na čo sú stavané:

Claude (Chat) — „tvoje myslenie nahlas"

Klasický rozhovor na claude.ai alebo v appke. Tu premýšľaš, analyzuješ, zadávaš: rozvinieš nápad, spíšeš zadanie, poradíš sa.

Claude Code — „tvoj staviteľ"

Agent na kódovanie. Nielen píše kód, ale aj sám spúšťa príkazy (CLI), vytvára súbory, testuje a nasadzuje. Beží v desktop appke (bez terminálu) alebo v príkazovom riadku.

Claude Cowork — „tvoj samostatný kolega"

Agent na väčšie viackrokové úlohy pre nekódiacich ľudí. Odovzdáš mu zadanie (výskum, príprava podkladov, práca so súbormi a nástrojmi) a on to odpracuje.

🧭 Dnes budeme najviac v Chat (analýza + zadanie) a Claude Code (staviame appku). Cowork spomíname, aby si vedel, že existuje, keď budeš mať väčšiu úlohu než len appku.
1.2

Modely Clauda pre začiatočníkov

Claude má viac modelov — líšia sa výkonom, rýchlosťou a cenou. Predstav si to ako motorizácie tej istej značky auta:

Model Aký je Kedy ho použiť
Haikunajrýchlejší a najlacnejšíjednoduché, rýchle úlohy
Sonnetvyvážený „ťahúň"bežná každodenná práca, väčšina kódenia
Opusnajvýkonnejšízložité, náročné úlohy a rozmýšľanie
Fablešpička nad Opusom — „brutalita"to najnáročnejšie, keď chceš maximum (za príplatok)

Praktické dnes: na náročné premýšľanie a ťažší kód siahni po Opuse, na svižnú prácu po Sonnete. Model prepneš priamo v rozhovore.

A kto chce dnes nejakú brutalitu, môže otestovať Fable — ale priprav sa, že si priplatíš. 💸

Aktuálne verzie: Opus 4.8, Sonnet 4.6, Haiku 4.5. Existujú aj novšie experimentálne úrovne, ale na dnešný workshop ich netreba.
1.2b

Tokeny — a prečo si dnes strážime Usage

Token je najmenší kúsok textu, ktorý model spracúva — zhruba kus slova. Všetko, čo Claudovi napíšeš, aj to, čo ti odpovie, sa počíta v tokenoch. Tokeny = mena, ktorou platíš za prácu modelu. Silnejší model (Opus, Fable) minie na tú istú úlohu drahšie tokeny než Sonnet či Haiku.

Preto si dnes budeme strážiť Usage (spotrebu) — aby ste sa naučili efektívne pracovať s tokenmi: dávať jasný kontext, neopakovať zbytočnosti a siahať po silnom modeli len tam, kde sa to naozaj oplatí.

🪙 Budúcnosť práce je tzv. token economy — hodnota sa čoraz viac meria tým, koľko dokážeš z tokenov vyťažiť. Kto vie zadať úlohu úsporne a presne, spraví viac za menej.
1.3

Čo dnes staviame — tech stack

Náš dnešný stack (skladačka technológií) má tri vrstvy:

  1. 1
    Appka / web (HTML · JS · React) — to, čo užívateľ vidí a s čím kliká. Začíname jednoduchým HTML/JS; React je možnosť pre interaktívnejšie appky.
  2. 2
    GitHub — miesto, kde žije a verzuje sa kód. Z GitHubu sa appka posiela na internet.
  3. 3
    Vercel — hosting, ktorý appku z GitHubu vezme a zverejní na internete na vlastnej adrese. Pri každej zmene v GitHube ju automaticky obnoví.
Jednou vetou: appku napíšeme (HTML/JS/React) → uložíme na GitHub → Vercel ju pustí naživo.
1.4

.md vs .html — čo sú to za súbory

Dva typy textových súborov, s ktorými sa dnes stretneš:

  • •.md (Markdown) — jednoduchý text s pár značkami na formátovanie. Ľahko sa píše aj číta; poznámky, dokumentácia, obsah. (Táto príručka je .md súbor.)
  • •.html — jazyk webových stránok. Prehliadač ho premení na vizuálnu stránku. Ukecanejší, plný „tagov".

Vzťah medzi nimi: Markdown je na písanie, HTML je to, čo prehliadač zobrazí. Markdown sa dá jednoducho premeniť na HTML pre web.

Ako vyzerá Markdown zvnútra

# Veľký nadpis
## Menší nadpis

Bežný text s **tučným** a *kurzívou*.

- bod v zozname
- ďalší bod

[Odkaz](https://priklad.sk) a `kúsok kódu`.
1.5

Cesta od nápadu k živej appke (mapa dňa)

Celý deň je jedna cesta. Takto ide krok po kroku — a takto sa mapuje na program:

  1. 1
    Analýza a zadanie — Claude (Chat). Rozmyslíš, čo staviaš, a spíšeš jasné zadanie. (Časť 2–3)
  2. 2
    Návrh — Claude Design. Zo zadania vznikne vizuálny návrh appky/webu. (Časť 5)
  3. 3
    Handoff → Claude Code. Návrh „podáš" Claude Code ako podklad na kódenie. (Časť 6)
  4. 4
    Kódovanie. Claude Code postaví reálnu appku (HTML/JS/React). (Časť 6)
  5. 5
    Smoke test na localhoste. Najprv si to pozrieš u seba na localhost:3000 — funguje? (Časť 6)
  6. 6
    Deployment na internet (Vercel). git push → appka je naživo na vlastnej adrese. (Časť 7)
  7. 7
    Distribúcia. Zdieľaš odkaz, appka žije pre svet. (Časť 7–8)
  8. 8
    Ďalšie možnosti — vlastná doména (DNS). Napojíš vlastnú adresu (napr. mojaappka.sk) cez DNS. (Časť 8 / bonus)
🧭 Toto je „veľká mapa". Keď sa počas dňa stratíš, vráť sa sem a pozri, v ktorom kroku práve si.
02
Časť 2 · úvod & mindset

Vibe
kódovanie

Neprogramuješ ručne riadok po riadku. Opíšeš, čo chceš, a Claude to postaví. Ty si režisér.

🕘 9:00 · doobedný blok
2.1

Mindset — čo je vibe kódovanie

Opíšeš, čo chceš, a Claude to postaví. Ty si režisér, Claude je remeselník — tvoja práca je jasne zadať, pozrieť výsledok a smerovať ďalej. Kvalita výstupu stojí a padá na tom, ako dobre zadáš a aký kontext dodáš.

Zmyslom vibe kódovania je preniesť svoj vibe (vibráciu) — ja tomu hovorím nadšenie — do AI, ktorá z toho vytvorí aplikáciu. Keďže ste tu podnikatelia, poznáte, čo potrebujete riešiť, zlepšovať, a hlavne poznáte detaily. Sám si ich zadáš, AI to vylepší a dodá Ti hotovú vec — doladenú aj tam, kde by si Ty ani netušil, že treba riešiť detail.

2.2

Ako to celé technicky funguje (bez strachu z terminálu)

Kde žijú projekty — domovský adresár

Na začiatku si vyberieš alebo vytvoríš priečinok, kde budú tvoje projekty „bývať" (napr. Projects v domovskom priečinku). Claude Code pracuje vždy vnútri tohto priečinka.

localhost — projekt najprv žije u teba

Kým appka nie je na internete, žije len na tvojom počítači. Tomu hovoríme localhost. Keď niečo nakódime, najprv si to pozrieš u seba v prehliadači na adrese localhost:3000 — je to súkromná verzia len pre teba. Až keď si spokojný, pošleme ju von na internet (to je poobedný git push).

Terminál a CLI — Claude to robí za teba

Kedysi sa množstvo krokov pri kódovaní klepalo ručne do terminálu (čierne okno s príkazmi). My ho používať nebudeme. Claude Code si príkazy spúšťa sám — tomu hovoríme CLI (command line). Aj jednotlivé služby (Vercel, GitHub…) majú svoje CLI a Claude ich obsluhuje za teba. Terminálu sa báť nemusíš.

2.3

Zahrievačka — ako silno vieš využiť AI

🧪 Skús hneď — napíš Claudovi

„Čo si o mne myslíš? Čo o mne vieš?"

Prečítame si odpovede a podelíme sa (spraví to aj Peter).

Prečo to robíme: ukazuje, koľko kontextu už Claude o tebe má z pamäte a histórie — a že čím lepší kontext, tým lepší výstup. Toto je palivo celého dnešného dňa.

2.4

Nastav si Claude na najlepšie výsledky

Otvor to otázkou priamo Claudovi:

🧪 Prompt

„Som na workshope, kde sa idem učiť Claude Code. Čo mi odporúčaš teraz urobiť, aby si mi dával čo najlepšie výsledky?"

Potom si prejdeme päť nástrojov, ktoré Claude „vyladia" na tvoju dnešnú prácu:

①
Projects — domov pre dnešný build

Otázka pre teba: Čo dnes chcem vyrobiť / naprogramovať? Na to si založíme projekt — všetok kontext, súbory aj história k dnešnej appke budú na jednom mieste.

②
Custom instructions — pravidlá projektu

Projektu nastavíme vlastné inštrukcie: čo staviame, v akom štýle, kam to nasadzujeme. Claude ich má „pod rukou" v každej správe. (Detailne v 2.5 nižšie.)

③
Skills — opakovateľné know-how

Skill je nastálo uložený postup či znalosť, ktorý Claude použije, keď treba.

🧪 Prompt„Analyzuj moju dnešnú úlohu. Preskúmaj, čo všetko ti mám dodať, aby som mal čo najkvalitnejší výstup."

Na základe odpovede si vytvoríme skill pre dnešný deň, ktorý zoptimalizuje našu prácu.

④
Connectors — napojenie na tvoje dáta a nástroje

Cez konektory Claude siahne na externé služby. Dnes napr. Airtable ako databáza — miesto, kam bude naša appka/web posielať dáta.

⑤
Memory — treba ju pre tento projekt?

Krátka odpoveď: pre jednodňový build zvyčajne netreba. Kontext ti nesú Custom instructions + Skill. Memory sa oplatí pri dlhodobých projektoch, kde sa história hromadí cez veľa sedení. Dnes ju necháme tak.

2.5

Custom instructions — bližšie

Dobré projektové inštrukcie zvyčajne obsahujú:

  • •Čo staviame — jednou vetou (typ appky/webu, pre koho).
  • •Tech — čím to staviame (HTML/JS), kam nasadzujeme (GitHub → Vercel).
  • •Štýl — vizuálny tón, farby, jazyk textov.
  • •Dáta — kam appka posiela dáta (napr. Airtable).
  • •Ako komunikovať — napr. „vysvetľuj po slovensky, bez žargónu, ukáž kroky."

Príklad — ilustračný landing page pre kaviareň

Staviam jednoduchý landing page pre moju kaviareň (pre okoloidúcich a nových zákazníkov).
Tech: čisté HTML/JS, nasadzujem cez GitHub → Vercel.
Štýl: teplé zemité farby, veľké fotky, priateľský tón, texty po slovensky.
Dáta z rezervačného formulára posielaj do Airtable.
Komunikuj so mnou po slovensky, jednoducho, a pri každej zmene mi ukáž, čo sa stalo.
🛠️ Na workshope si takéto inštrukcie naformulujeme spoločne pre TVOJ projekt a vložíme ich do Custom instructions.
03
Časť 3 · remeslo

Promptovanie
ako remeslo

Prompt nie je jeden dokonalý príkaz. Je to rozhovor, ktorý riadiš — prvá odpoveď je štart, nie cieľ.

🕘 9:30 · doobedný blok
3.1

Hlavná myšlienka: prompt nie je jeden dokonalý príkaz

Promptovanie nie je o nájdení jednej perfektnej vety. Je to rozhovor, ktorý riadiš. Začneš všeobecne, pozrieš, čo príde, a ďalšími otázkami to postupne dolaďuješ k tomu, čo naozaj chceš. Prvá odpoveď je štart, nie cieľ.

Remeslo nie je v tom, čo napíšeš prvýkrát — je v tom, čo vieš povedať po prvej odpovedi.

3.2

Sada páčok — čo povedať po prvej odpovedi

Toto je pár univerzálnych „páčok". Fungujú na hocijakú tému — recept, text, appku:

Páčka Čo povieš Čo tým získaš
Nechaj rozhodnúť Clauda„Ako by si to spravil Ty? Čo odporúčaš?"názor a odporúčanie, nie len neutrálny výpis
Pýtaj alternatívy„Ukáž mi ešte iné pohľady. Existuje iné riešenie?"širší priestor možností, z ktorých vyberáš
Pridaj rámec / optiku„Pozri sa na to cez TCM / očami dizajnéra / marketéra."hĺbku a nový uhol pohľadu
Zúž na cieľz „dobrý vývar" na „peptidový vývar"presnejšiu, cielenú odpoveď
Vytlač ďalej / zosilni„Ako to ešte zosilním? Čo pridať, aby to bolo lepšie?"optimalizáciu a extra kvalitu
3.3

Ukážka naživo: vývar (od všeobecného k majstrovskému)

Tá istá téma, štyri otázky — a sleduj, ako odpoveď rastie:

Krok 0 — všeobecne
🧪 „Poraď mi, ako si mám uvariť dobrý vývar."

Dostaneš solídny základ. Ale je všeobecný — pre každého rovnaký.

Krok 1 — zúž na cieľ
🧪 „Poraď mi, ako si mám uvariť peptidový vývar."

Odpoveď sa úplne zmení — zrazu je cielená na kolagén a peptidy, dlhé varenie kostí a kĺbov. → páčka: zúženie na cieľ.

Krok 2 — pridaj rámec (TCM)
🧪 „Pridaj pohľad TCM na vývary."

Preklopí sa do inej roviny — hrejivosť, budovanie qi a krvi, sezónnosť. → páčka: pridanie optiky.

Krok 3 — vytlač ďalej
🧪 „Čo si môžem pridať do vývaru, aby som ho ešte zosilnil?"

Dostaneš konkrétne prísady a prečo fungujú. → páčka: optimalizácia.

💡 Poznanie: z „obyčajného vývaru" je majstrovský recept šitý na mieru. Nie preto, že si našiel dokonalý prompt — ale preto, že si viedol rozhovor.
3.4

A teraz to isté pre kódovanie

Presne tie isté páčky použiješ, keď staviaš svoju appku:

  • •Všeobecne: „Sprav mi appku na rezervácie."
  • •Zúž na cieľ: „…pre kaviareň, kde si vyberiem dátum a počet ľudí."
  • •Nechaj rozhodnúť Clauda: „Ako by si to navrhol Ty? Čo odporúčaš?"
  • •Pýtaj alternatívy: „Ukáž mi 2–3 iné spôsoby rozloženia."
  • •Vytlač ďalej: „Ako to spravíme rýchlejšie / krajšie / bezpečnejšie?"
Rovnaké páčky, iná téma. Toto je celé remeslo — vieš, čo povedať po prvej odpovedi.
04
Časť 4 · tvoje zadanie

Zadaj si vlastné zadanie
+ nakŕm Clauda podkladmi

Nečakaj na dokonalé zadanie od niekoho iného — zadaj si ho sám a daj Claudovi svoje podklady.

🕘 10:45 · doobedný blok

Doteraz sme sa hrali na cvičných príkladoch. Teraz na TVOJOM. Podstata tohto bloku: nečakaj na dokonalé zadanie od niekoho iného — zadaj si ho sám, daj Claudovi svoje podklady a nechaj výstup do .md súboru, s ktorým ideš ďalej.

4.1

Zadaj si vlastný brief

Napíš Claudovi, čo naozaj riešiš — vlastnými slovami, kľudne neučesane. Nemusí to byť appka; môže to byť analýza, prehľad, rozhodnutie. Claude si to s tebou učeše (pamätáš páčky z Časti 3).

🧪 Prompt„Mám [dáta / problém / nápad]. Chcem [výsledok]. Navrhni mi, ako na to."
4.2

Nakŕm Clauda podkladmi

Claude je oveľa lepší, keď nehádže do vzduchu, ale pracuje s tvojím materiálom. Pripoj čo máš:

  • •tabuľky — .csv, .xlsx (export z účtovníctva, Airtable, Excelu)
  • •screenshoty a obrázky — fotka rozpisu, screenshot appky, logo, náčrt na papieri
  • •dokumenty — .pdf, .docx, poznámky
  • •živý zdroj — pokročilé: napojená databáza (napr. Airtable/Supabase cez konektor)
📎 Najjednoduchšia cesta: pretiahni súbor priamo do okna chatu (drag & drop), alebo vlož screenshot. Netreba nič inštalovať. Napojenie živej databázy je „ďalší level" — na dnes stačí súbor.
4.3

Nechaj výstup do .md

Nepýtaj len odpoveď v chate — vypýtaj si výstup do súboru:

🧪 Prompt„Daj mi to ako .md súbor, ktorý si viem stiahnuť."

Prečo: v chate sa to stratí v scrollovaní; .md súbor si uložíš, upravíš, pošleš ďalej a stane sa vstupom pre ďalší krok (napr. podklad pre Claude Design alebo pre kód). Presne toto je „poriadok v chaose" v praxi.

4.4

Živá ukážka: analýza dát Monády 🔴

Aby to nebolo len teória — takto to prebehlo naozaj, na reálnych dátach bistra:

Brief„Pozri moje dáta v Airtable a navrhni niekoľko druhov výstupov pre finančné prehľady bistra. Zaujíma ma vývoj v čase a sezónnosť — ako to vyzeralo v letných mesiacoch minulé roky?"

Čo spravil Claude: pozrel sa do tabuľky Cashflow (2 153 záznamov) — a prvý užitočný výstup nebol graf. Bolo to zistenie, čo tie dáta vôbec unesú:

  • •dáta idú od 2025-01 do 2026-06,
  • •rok 2025 je čistý, ale 2026 má deravé tržby a jeden nezmyselný výkyv (184 884 € v jednom mesiaci),
  • •a hlavne: na „letá po rokoch" dáta nestačia — je tam len jedno kompletné leto (2025).

Toto je hlavné poučenie celého bloku:

💡 Dobrý výstup často nie je pekný graf, ale poctivé „toto ti dáta povedia, toto nie — a toto treba najprv opraviť." Claude to povedal rovno namiesto toho, aby si vymyslel medziročné porovnanie, ktoré by klamalo. Poctivosť > sebavedomá vymyslenosť.

Až potom prišiel návrh 5 typov výstupov (mesačný vývoj, food-cost %, štruktúra výdavkov, sezóna, medziročne) + reálne čísla 2025 — a všetko do .md súboru, s ktorým sa dá ďalej robiť.

4.5

Skús chvíľu sám promptovať

Teraz ty. Vezmi vlastný podklad (alebo si vymysli malý), zadaj si brief, pripoj dáta, vypýtaj .md. Skús aj páčky z Časti 3 („ako by si to spravil Ty?", „ukáž iné pohľady"). Nič nepokazíš — pokojne experimentuj.

4.6

A odtiaľ do Claude Design →

Keď máš brief a podklady vyčistené v .md, máš presne to, čo Claude Design potrebuje na vstupe. Návrh appky/webu nestaviaš z prázdna — staviaš ho z tohto briefu. V ďalšom kroku z neho spravíme vizuálny návrh (Časť 5) a potom z neho reálny kód (Časť 6).

05
Časť 5 · 10:45 · doobedný blok

Claude Design

Z briefu spravíme vizuálny návrh — obrazovky, farby, typografiu — bez kódu, priamo v prehliadači. Ty opíšeš, Claude nakreslí.

Claude Design je krok medzi „mám nápad" a „mám appku". Vezme tvoj brief z Časti 4 a spraví z neho skutočný vizuálny návrh — obrazovky, rozloženie, farby, typografiu — ktorý si hneď vidíš a klikáš, ešte predtým, než sa píše čo i len riadok kódu.

Čo Claude Design robí:

  • 💬Pracuje z reči, nie z kódu — opíšeš, čo chceš, a Claude to postaví ako živý HTML návrh, ktorý sa dá otvoriť a preklikať.
  • 🎨Drží jednotný štýl — ak máš dizajn systém, farby a fonty, návrh ich rešpektuje; ak nemáš, navrhne konzistentný vzhľad zaň.
  • 🔁Ladíš rozhovorom — „daj to väčšie", „skús inú farbu", „pridaj sekciu" — a hneď vidíš výsledok. Ukáž si aj viac variantov naraz.
  • 📤Odovzdá to ďalej — keď si spokojný, návrh je vstup (handoff) pre Claude Code, ktorý z neho spraví reálnu appku (Časť 6).
✨ Nepotrebuješ nič „doniesť" hotové. Nemusíš vedieť kresliť ani dodávať finálne podklady — stačí brief a nápad, zvyšok vyvinie Claude spolu s tebou. Podklady (dáta, logo, fotky) sú vítané, ale nie povinné — pokojne ich dopĺňaš priebežne.
Ukážka · návrh v Claude Design
Návrh stránky Dielničky vytvorený v Claude — vľavo rozhovor, vpravo živý vizuálny návrh
Z briefu vzniká živý návrh: vľavo opíšeš, čo chceš, vpravo hneď vidíš vizuál — a ladíš ho rozhovorom.
06
Časť 6 · 13:15 · poobedný blok

Z dizajnu do kódu:
HTML / JS

Návrh z Claude Design odovzdáme Claude Code, ktorý z neho spraví reálny HTML/JS. Appku hneď vidíš u seba, upravuješ ju rozhovorom a Claude spúšťa príkazy za teba. Toto si ukážeme naživo.

Máš návrh, ktorý sa páči. Teraz z neho spravíme skutočnú appku. Návrh odovzdáš (handoff) Claude Code — agentovi, ktorý nielen píše kód, ale aj sám spúšťa príkazy, ukladá súbory a rovno ti ukáže výsledok v prehliadači.

Naživo · Claude Code + náhľad appky
Claude Code s upravovaním živej stránky Dielničky — vľavo chat a zoznam sessions, vpravo náhľad webu na localhose
Vľavo Claude Code (chat + úlohy), vpravo živý náhľad appky. Zadáš úlohu po slovensky → Claude upraví kód a rovno vidíš zmenu.

Ako to prebieha:

  1. 1Handoff — návrh z Claude Design podáš Claude Code ako vstup.
  2. 2Claude Code píše kód — reálny HTML/JS, sám spúšťa príkazy a ukladá súbory.
  3. 3Náhľad naživo — appku vidíš hneď u seba v prehliadači (napr. localhost).
  4. 4Ladíš rozhovorom — „pridaj Katarínu do tímu", „zmenši fotku" — a zmena naskočí. Nič nepíšeš ručne.
💡 Na screenshote vyššie beží presne tento kolobeh: vľavo je úloha zadaná po slovensky, Claude Code spravil zmeny v kóde a vpravo okamžite vidno výsledok. Toto si spolu ukážeme na reálnom projekte.
07
Časť 7 · 14:15 · poobedný blok

git push → NAŽIVO 🚀

Appka beží u teba na localhost. Teraz ju pošleme von na internet — a to celé v Claude Code. Založíme repo na GitHube, prepojíme ho s Vercelom a od tej chvíle každá zmena naskočí naživo sama.

Celý tento blok zvládneš bez terminálu a bez klikania po weboch — všetko zadáš do Claude Code ako obyčajnú vetu. Claude spustí príkazy za teba. Postup má štyri kroky: (1) nahrať projekt na GitHub, (2) v novej session si nechať vysvetliť ako GitHub funguje, (3) prepojiť Vercel s GitHubom, (4) rozumieť webhooku, ktorý to celé drží naživo.

7.1

Nahraj projekt na GitHub — jednou vetou

Otvor projekt v Claude Code a zadaj mu presne toto:

🧪 Prompt„Vytvor nové repo pre tento projekt a nahraj tam náš projekt."

Čo sa stane na pozadí (Claude to spraví za teba):

  1. 1z projektu spraví git repozitár (zapne sledovanie zmien),
  2. 2vytvorí nové repo na tvojom GitHub účte,
  3. 3spraví prvý commit (odfotí aktuálny stav) a push (nahrá ho na GitHub).
🔑 Ak sa Claude prvýkrát potrebuje prihlásiť na GitHub, otvorí ti prihlásenie v prehliadači (alebo požiada o povolenie). Odklikni a pokračuje sám. Repo nech je súkromné (private) — na Vercel ho aj tak prepojíš.
7.2

Nová session: „vysvetli mi GitHub"

Otvor si novú, čistú session v Claude Code (aby nemiešal kontext) a nechaj si to vysvetliť vlastnými slovami:

🧪 Prompt„Vysvetli mi úplne od základu, ako funguje GitHub a čo sme pred chvíľou spravili — ako keby som to videl prvýkrát."

Aby si to nemusel skladať sám, tu je základ, ktorý by ti mal vysvetliť:

Ako je to poskladané
repozitár (repo)
priečinok s celým kódom projektu + históriou zmien.
commit
„fotka" projektu v danom momente + krátky popis, čo sa zmenilo.
branch (vetva)
samostatná línia zmien; hlavná sa volá main.
local vs. remote
u teba v počítači (local) vs. na GitHube v cloude (remote).
Ako to tečie (proces)
  1. 1Zmeníš kód u seba (alebo ho zmení Claude Code).
  2. 2commit — uložíš zmenu s popisom („odfotíš" stav).
  3. 3push — pošleš commit z počítača na GitHub.
  4. 4GitHub je zdroj pravdy — odtiaľ si to Vercel vyzdvihne a nasadí naživo.
Jednou vetou: GitHub je cloudový sklad tvojho kódu s históriou. Ty tam posielaš „fotky" projektu (commit → push), on ich stráži a púšťa ďalej. My tie príkazy nepíšeme ručne — hovoríme ich Claude Code po slovensky.
7.3

Prepoj Vercel s GitHubom

Vercel je hosting — vezme kód z GitHubu a zobrazí ho ako živú stránku na internete. Prepojíš ich raz a potom je to automatické:

  1. 1Choď na vercel.com a prihlás sa cez GitHub (Continue with GitHub).
  2. 2Add New → Project a povoľ Vercelu prístup k svojim GitHub repozitárom (Install / Authorize).
  3. 3V zozname vyber repo z kroku 6.1 a klikni Import.
  4. 4Nastavenia väčšinou nechaj tak, ako sú (Vercel projekt rozpozná) a klikni Deploy.
  5. 5Za pár sekúnd dostaneš vlastnú adresu (napr. tvojprojekt.vercel.app) — a appka je naživo. 🎉
💡 Chceš aj toto v Claude Code? Vercel má vlastné CLI — povedz Claudovi: „Nasaď tento projekt na Vercel." Prevedie ťa prihlásením a nasadením z terminálu. Klikacia cesta vyššie je ale pre prvýkrát najnázornejšia.
Odteraz platí zlaté pravidlo: GitHub = zdroj pravdy, Vercel = výklad do sveta. Ty robíš zmeny → push na GitHub → Vercel ich automaticky nasadí. Nič viac klikať netreba.
7.4

Čo je webhook (a prečo to celé funguje samo)

Keď si v kroku 6.3 prepojil GitHub s Vercelom, potichu sa nastavil webhook. To je jediný dôvod, prečo sa zmeny objavia naživo bez toho, aby si čokoľvek klikal.

🔔 Webhook = automatické „ťuknutie". Je to správa, ktorú jedna služba pošle druhej v momente, keď sa niečo stane. GitHub takto povie Vercelu: „Hej, práve prišiel nový push — nasaď to!"

Predstav si to ako domový zvonček: Vercel nemusí každú chvíľu kontrolovať, či si niečo zmenil. Namiesto toho GitHub zazvoní presne vtedy, keď treba. Celý reťazec:

  1. 1Povieš Claude Code: „uprav toto a pushni to."
  2. 2Push dorazí na GitHub.
  3. 3GitHub cez webhook okamžite upozorní Vercel.
  4. 4Vercel automaticky nasadí novú verziu — za pár sekúnd je zmena naživo na tvojej adrese.
Dobrá správa: webhook si nemusíš nastavovať ručne — Vercel ho pri prepojení s GitHubom založí sám. Stačí, že vieš, čo to je: neviditeľný poslíček, vďaka ktorému „push = naživo".
08
Časť 8 · 15:15 · poobedný blok

Výkon & GEO:
aby ťa našli — aj AI

Appka je naživo. Teraz dve otázky: je rýchla? (skontrolujeme si ju Lighthouse skóre na pagespeed.web.dev) a nájdu ju? — nielen Google, ale aj AI asistenti (GEO).

Keď appka beží, netreba tušiť — dá sa to zmerať. Výkon si overíš cez tzv. Lighthouse skóre, a to, či ťa v ére AI vôbec niekto nájde, rieši GEO. Poďme na oboje.

8.1

Skontroluj si výkon — Lighthouse na pagespeed.web.dev

Lighthouse je nástroj od Googlu, ktorý „preklepne" tvoju stránku a dá jej známky. Najjednoduchšie ho spustíš online — netreba nič inštalovať:

  1. 1Choď na pagespeed.web.dev.
  2. 2Vlož adresu svojej appky (tú .vercel.app z Časti 7) a stlač Analyze.
  3. 3Prepínaj Mobile / Desktop — mobil býva prísnejší, tam sa oplatí pozrieť najviac.

Dostaneš štyri známky (0–100). Zelená (90+) je cieľ, oranžová je OK, červená volá po oprave:

⚡
Performance
ako rýchlo sa stránka načíta a je použiteľná.
♿
Accessibility
či ju zvládnu aj ľudia s hendikepom a čítačky.
✓
Best Practices
bezpečnosť a moderné štandardy webu.
🔎
SEO
základy, aby ťa vyhľadávače vedeli prečítať.
💡 Pod známkami nájdeš Core Web Vitals — reálne merané „pocitové" metriky: LCP (kedy sa zobrazí hlavný obsah), CLS (či obsah neposkakuje) a INP (ako rýchlo reaguje na klik). Toto sú tie čísla, ktoré cíti aj návštevník.
8.2

Nechaj opravy na Claude Code

Nemusíš tušiť, prečo je skóre nízke. Odfoť report a podaj ho Claudovi:

🧪 Prompt„Tu je Lighthouse report mojej appky. Vysvetli mi po slovensky, čo najviac ťahá skóre dole, a oprav to."
8.3

GEO — nová hra: nájde ťa aj AI?

GEO = Generative Engine Optimization. Kým klasické SEO ťa tlačí vyššie v zozname modrých odkazov na Googli, GEO rieši niečo nové: aby ťa AI asistent (ChatGPT, Claude, Perplexity, Google AI Overviews) spomenul a odporučil priamo vo svojej odpovedi.

Klasické SEO
Cieľ: byť vyššie v zozname odkazov. Užívateľ klikne a príde k tebe.
GEO
Cieľ: byť v odpovedi AI. Asistent ťa odcituje ako zdroj — často bez kliknutia.
8.4

Indikátory GEO — na čom AI záleží

Čo zvyšuje šancu, že ťa AI pochopí a odcituje:

  • 🧱Jasná štruktúra a nadpisy — logické H1/H2, krátke odseky. AI si tak ľahko „vytiahne" odpoveď.
  • 📊Fakty, čísla a citovateľné tvrdenia — konkrétne údaje sa citujú lepšie než vata.
  • 🏷️Štruktúrované dáta (schema.org) — strojovo čitateľné „štítky" o tom, čo obsah je (podnik, produkt, FAQ, recept…).
  • ❓Sekcie otázka → odpoveď (FAQ) — presne v tvare, v akom sa ľudia pýtajú AI.
  • 🤝Dôvera a autorstvo (E-E-A-T) — kto to píše, kontakt, referencie. AI uprednostní dôveryhodný zdroj.
  • 🚀Rýchlosť a čistý HTML — späť pri Lighthouse: čo sa dobre číta strojom, to sa dobre aj indexuje.
  • 🤖Prístup pre AI — nezablokuj botov v robots.txt; postupne sa udomácňuje aj súbor llms.txt ako „mapa pre AI".
🧪 Prompt„Priprav moju appku na GEO: doplň štruktúrované dáta, FAQ sekciu, jasné nadpisy a llms.txt — a vysvetli mi, čo si spravil."
8.5

Čo to znamená pre budúcnosť

Ľudia sa čoraz viac pýtajú AI namiesto toho, aby googlili a klikali. To mení pravidlá:

  • •Viditeľnosť už nie je len „prvé miesto na Googli", ale byť tým, koho AI odporučí.
  • •Menej klikov, viac priamych odpovedí — o to dôležitejšie je byť v tej odpovedi ako zdroj.
  • •Dobrá správa: to, čo pomáha AI, pomáha aj ľuďom — jasnosť, štruktúra, rýchlosť a dôvera nikdy nie sú zbytočné.
🔮 Zhrnutie: SEO ťa dostane do zoznamu, GEO ťa dostane do odpovede. Nemusíš byť odborník — stačí písať jasne, dávať fakty a nechať Claude Code doplniť technickú časť. Presne to je výhoda, keď staviaš appku dnes.
8.6

GoFullPage — odfoť celý web jedným klikom

Rozšírenie do Chrome, ktoré spraví screenshot celej stránky — aj tej časti, čo je „pod záhybom" a musel by si ju doskrolovať. Jeden klik a máš celý web ako jeden obrázok alebo PDF. gofullpage.com ↗

Na čo sa hodí:

  • 📥Stiahni si celý web, ak sa ti páči — uložíš si dizajn aj s obsahom ako jeden obrázok, kým ho máš pred očami.
  • ⚡Rýchlo dostaneš texty z webu — odfoť celú stránku a hoď celý screenshot do Clauda; prepíše ti text, zhrnie ho alebo prerobí po svojom.
  • 💾Odkladaj si pekné a inšpiratívne weby — vlastná „nástenka" nápadov, ku ktorej sa vrátiš, keď staviaš svoj.
8.7

Rýchly hack: ladenie na 100/100/100/100

Pripomeňme si: Lighthouse na pagespeed.web.dev dá tvojej stránke štyri známky 0–100 (Performance, Accessibility, Best Practices, SEO). Sen je mať všetky štyri na 100 — a ide to prekvapivo rýchlo:

  1. 1Sprav si rýchlu prvú verziu webu a daj ju online (napr. na Vercel).
  2. 2Na pagespeed.web.dev spusti analýzu a rozklikaj si v reporte všetky záložky a sekcie (Performance, Accessibility, Best Practices, SEO + Opportunities / Diagnostics) — nech je na obrazovke vidno všetko naraz.
  3. 3Cez GoFullPage (z bodu 8.6) odfoť celý report do jedného obrázka.
  4. 4Nahraj screenshot do Claude Code s promptom nižšie.
  5. 5Zopakuj to párkrát — s každým kolom sa priblížiš k 100/100/100/100.
🧪 Prompt„Tu je celý Lighthouse report mojej appky ako screenshot. Uprav web tak, aby som sa dostal na 100/100/100/100 — vysvetli mi po slovensky, čo najviac ťahá skóre dole, a oprav to."
Bonus A
🧭

Kam ďalej —
pokročilé stacky

Nad rámec dnešného dňa — inšpirácia, kam sa dá projekt posunúť. Každý nástroj rieši iný typ projektu.

Eshop — Medusa v2

Ak potrebuješ online obchod (produkty, košík, platby), Medusa je open-source „motor" pre eshopy. Je headless — obchodná logika (backend) je oddelená od vzhľadu (frontend), takže výzor si postavíš úplne po svojom. Verzia v2 je aktuálna línia. medusajs.com ↗

Marketingový obsah — headless CMS (Ghost / Payload)

Na blog, články a marketingový obsah sa hodí CMS (systém na správu obsahu).

  • •Headless CMS znamená, že obsah spravuješ na jednom mieste a cez API ho „ťaháš" do ľubovoľného webu.
  • •Ghost — publikačná platforma na blogy a newslettre, vie fungovať aj headless. ghost.org ↗
  • •Payload — headless CMS úzko prepojený s kódom (pre vývojárske projekty). payloadcms.com ↗

Rýchly web — Astro + čo je SSG

Na bežný web (prezentácia, portfólio, firemný web) je skvelý Astro.

  • •SSG (Static Site Generation) = stránky sa poskladajú vopred do hotového statického HTML. Výsledok je extrémne rýchly — návštevník nečaká, kým niečo vygeneruje server.
  • •Rýchlosť si zmeraj na pagespeed.web.dev — Google ti dá skóre a povie, čo zlepšiť.
  • •Čitateľnosť pre AI: čisté, sémantické HTML a dobre štruktúrovaný obsah znamenajú, že tvoj web ľahšie „prečítajú" aj AI a vyhľadávače (nadväzuje na GEO, Časť 7).

Notion / Obsidian v procese

Kde písať a držať obsah a poznámky, z ktorých appka/web čerpá:

  • •Notion — cloudový priestor na dokumenty a databázy; dá sa napojiť ako konektor priamo do Clauda.
  • •Obsidian — poznámky lokálne na tvojom počítači v Markdown súboroch (.md), plne v tvojich rukách.

Oba sa dajú zapojiť ako zdroj obsahu, ktorý Claude spracuje a premení na web/appku.

Zdroj pravdy — kde držať dáta a zdroje

Zdroj pravdy (source of truth) = jedno miesto, ktoré platí pre daný druh dát. Keď máš tú istú vec na piatich miestach, skôr či neskôr si protirečia. Preto pre každý typ obsahu urči jeden hlavný domov:

Čo Kde býva zdroj pravdy
KódGitHub
Dáta z appky (objednávky, formuláre)databáza (dnes Airtable)
Obsah a poznámkyNotion alebo Obsidian
Rozpracované / lokálnetvoj počítač (lokál)
Pravidlo: jeden druh dát = jeden zdroj pravdy. Ostatné miesta z neho len čerpajú.
Bonus B
🔐

Otázky a cvičenia
na záver

Keď je appka naživo a posiela dáta, sprav si bezpečnostnú previerku vlastného projektu.

🔐 Bezpečnosť — hackni si to sám cez inú AI

Keď je appka naživo a posiela dáta (napr. do Airtable), sprav si bezpečnostnú previerku vlastného projektu:

🧪 CvičenieOtvor inú AI (alebo čerstvý rozhovor s Claudom) a poproś ju, nech ti nájde slabé miesta v tvojej appke a repozitári — čo by zneužil útočník.

Na čo si dať u začiatočníkov najväčší pozor:

  • •Odhalené kľúče a heslá — API kľúč (napr. k Airtable) sa nikdy nesmie dostať do frontendového kódu ani na GitHub. Ktokoľvek ho tam vidí.
  • •Nezabezpečený zápis do databázy — appka by nemala dovoliť komukoľvek zapisovať čokoľvek priamo.
  • •.env a tajné súbory — nikdy ich nepushuj na GitHub.
Ak nájdeš odhalený kľúč, okamžite ho zneplatni (rotuj) a nasaď nanovo. Toto je najčastejšia chyba pri „vibe" appkach — a dá sa jej ľahko vyhnúť.
Príloha
📖

Slovníček pojmov

Rastie počas dňa.

Airtable
tabuľky, ktoré fungujú ako databáza pre appku; dáta z nich ťaháš cez API alebo MCP konektor. airtable.com ↗
API
„rozhranie" — spôsob, akým sa dva programy medzi sebou rozprávajú a vymieňajú si dáta.
API kľúč
tajné heslo k službe (napr. Airtable); nikdy nepatrí do frontendu ani na GitHub.
Astro
moderný webový framework na rýchle obsahové weby (blog, portfólio, prezentácia); stavia na SSG. astro.build ↗
Claude
AI asistent od Anthropicu; zastrešuje rodinu nástrojov — Chat, Code, Design aj Cowork. claude.ai ↗
Claude (Chat)
rozhovor na premýšľanie, analýzu a zadanie.
Claude Code
agent, ktorý kóduje a sám spúšťa príkazy.
Claude Cowork
agent na väčšie viackrokové úlohy pre nekódiacich.
Claude Design
z briefu spraví živý vizuálny návrh (obrazovky, štýl) v prehliadači — bez kódu; ladíš ho rozhovorom a odovzdáš do Claude Code.
CLI (command line)
príkazy, ktoré Claude Code spúšťa za teba; služby ako Vercel či GitHub majú vlastné CLI.
CMS
systém na správu obsahu (články, stránky).
Core Web Vitals
reálne merané metriky pocitu z webu — rýchlosť zobrazenia (LCP), stabilita (CLS) a odozva na klik (INP).
CRM systém
systém na evidenciu kontaktov, vzťahov a obchodných príležitostí (Customer Relationship Management).
deploy / nasadenie
poslanie appky z GitHubu naživo na internet.
doména & DNS
vlastná adresa (napr. mojaappka.sk) a systém, ktorý ju nasmeruje na tvoj hosting.
domovský adresár
priečinok, kde „bývajú" tvoje projekty.
frontend / backend
čo užívateľ vidí (frontend) vs. logika a dáta v pozadí (backend).
GEO
Generative Engine Optimization — aby ťa AI asistenti (ChatGPT, Claude, Perplexity) spomenuli a odcitovali priamo v odpovedi.
GitHub
služba, kde žije a verzuje sa kód projektu (repo); odtiaľ sa appka nasadzuje naživo. github.com ↗
handoff
„odovzdanie" — keď návrh či podklad podáš ďalšiemu nástroju (napr. z Claude Design do Claude Code) ako vstup na ďalší krok.
headless
oddelený backend od vzhľadu; obsah/logiku ťaháš cez API do ľubovoľného frontendu.
hosting
služba, ktorá appku drží a zobrazuje na internete (dnes Vercel).
HTML
jazyk, ktorý prehliadač zobrazí ako webovú stránku.
Lighthouse
nástroj od Googlu, ktorý ohodnotí stránku známkami 0–100 (výkon, prístupnosť, SEO…); spustíš ho na pagespeed.web.dev.
localhost
tvoj počítač ako „súkromný internet"; appka tam beží len pre teba, kým ju nepošleš von.
localhost:3000
adresa, na ktorej si appku pozrieš u seba v prehliadači.
Markdown / .md
jednoduchý textový formát na písanie; dá sa premeniť na HTML.
MCP
štandard, cez ktorý sa AI pripája na externé nástroje a dáta (konektory) — napr. Airtable, Notion.
Medusa
open-source „headless" motor pre eshopy; obchodnú logiku máš oddelenú od vzhľadu a frontend si postavíš po svojom. medusajs.com ↗
merge (zlúčenie)
spojenie zmien z jednej vetvy do druhej — napr. keď schválený PR začleníš do hlavnej verzie kódu.
MVP
Minimum Viable Product — najmenšia funkčná verzia, ktorú dáš von, aby si nápad rýchlo overil naživo.
Notion
cloudový priestor na dokumenty a databázy; dá sa napojiť ako konektor (MCP) priamo do Clauda. notion.com ↗
Obsidian
poznámky lokálne u teba v Markdown súboroch (.md), plne v tvojich rukách; znalostná báza prepojená odkazmi. obsidian.md ↗
PR (pull request)
návrh zmien v kóde — na jednom mieste ukáže, čo sa mení; dá sa skomentovať, skontrolovať a potom zlúčiť (merge).
push
poslanie tvojich zmien z počítača na GitHub; často hneď spustí automatický deploy.
repozitár (repo)
priečinok s kódom projektu na GitHube.
SEO
optimalizácia pre vyhľadávače — aby ťa Google zaradil vyššie v zozname odkazov.
smoke test
rýchla kontrola, či appka vôbec beží a základ funguje.
SSG (Static Site Generation)
stránky poskladané vopred do statického HTML; veľmi rýchle.
štruktúrované dáta (schema.org)
strojovo čitateľné „štítky", ktoré webu povedia, čo obsah je (podnik, produkt, FAQ) — pomáha SEO aj GEO.
terminál
čierne okno na príkazy; my ho priamo nepoužívame.
Vercel
hosting, ktorý appku z GitHubu nasadí naživo; po každom push vyrobí novú verziu. vercel.com ↗
webhook
automatické „ťuknutie" medzi službami: keď sa niečo stane (napr. push na GitHub), jedna služba hneď upozorní druhú (Vercel) — a tá nasadí novú verziu. Ako domový zvonček namiesto neustáleho kontrolovania.
zdroj pravdy
jedno hlavné miesto, ktoré platí pre daný druh dát.