Nejdřív se na něco podíváme

(živé demo)

Kolik lidí to psalo?

Jak dlouho to trvalo?

A teď to důležité

• většinu kódu jsem nenapsal já
• napsal jsem zadání - a pak jsem hodně opravoval
• před třemi roky by to byla práce pro tým na několik týdnů

Co se změnilo

Práh úsilí potřebný k vytvoření softwaru dramaticky klesl.

Dřív vs. dnes

Pořád ale musíš rozumět tomu, co děláš.

Rozumět je teď ta cennější polovina.

Co to vlastně je?

LLM = Large Language Model

• model, který se naučil předpovídat text
• trénovaný na obrovském množství textu a kódu z internetu
• neví, co je pravda - ví, co obvykle následuje

Dobrá představa: velmi rychlý kolega, který přečetl celý internet, nikdy se neunaví, ale občas si věci s naprostou jistotou vymýšlí.

Není to...

• vyhledávač
• kalkulačka
• věštec, který zná tvůj projekt
• nic, co by za tebe převzalo odpovědnost

Jak s tím mluvit

Tady se dělá 90 % rozdílu mezi "nefunguje to" a "hotovo"

1. Kontext je král

• co stavím
• v čem to má být (HTML, CSS, JS, žádné knihovny)
• kde to poběží
• co už mám hotové

Špatně vs. dobře

Špatně:

udelej mi web

Dobře:

Chci jednostránkovou webovou stránku (ne appku),
poběží jen v prohlížeči. Čisté HTML + CSS,
žádné knihovny.
Cíl: fiktivní kavárna, lidi si mají prohlédnout
menu a najít otevírací dobu.
Sekce: hlavička s navigací, hero s obrázkem,
menu jako 3 karty vedle sebe (flexbox),
patička s kontaktem.
Inspiruj se stylem jako [odkaz na web] -
jednoduché, světlé barvy.
Piš to jednoduše - jsem začátečník
a musím tomu rozumět.

2. Rozděl to na kroky

• nechtěj celou aplikaci jednou zprávou
• jedna funkce = jedna zpráva = otestovat = commit
• když je zadání velké, model si začne vymýšlet

3. Iteruj

První odpověď je návrh, ne výsledek.

• "skoro dobře, ale karty mají být pod sebou na mobilu"
• "tohle je moc složité, zjednoduš to"
• "nech HTML jak je a změň jen CSS"

4. Když to nejde podle plánu

• nefunguje to? pošli celou chybovou zprávu, kód, co jsi čekal a co se stalo
• řekni i co nechceš: "bez Reactu a npm knihoven", "neměň strukturu souborů", "nepiš komentáře ke každému řádku"

Tenhle kód mi hodí chybu:
[kód]

Chyba v konzoli:
[celá chyba]

Čekal jsem, že se text změní po kliknutí,
ale nestane se nic.

Jak se s tím učit

Ne jen vyrábět - ale skutečně se zlepšovat

Nejlepší prompty na učení

• "Vysvětli mi tenhle kód řádek po řádku."
• "Vysvětli mi flexbox, jako by mi bylo 15."
• "Dej mi 5 cvičení na tohle téma, od lehkého."
• "Tady je můj kód. Co bys zlepšil a proč?"
• "Neřeš to za mě - naveď mě."

Nejsilnější trik: nech si vygenerovat řešení - a pak si ho nech vysvětlovat tak dlouho, dokud ho nedokážeš napsat znovu sám.

Past, do které padne každý

• copy-paste, funguje to, jdu dál
• za týden nevíš, co tvůj vlastní projekt dělá
• svůj kód musíš vždycky umět vysvětlit!

Kde to selhává

Halucinace

• vymyslí si funkci, která neexistuje
• použije knihovnu, která už se takhle nepoužívá
• řekne to naprosto sebevědomě

Pravidlo: vždycky to spusť. Kód, který jsi nespustil, nefunguje.

Bezpečnost

• nikdy tam nevkládej hesla a API klíče
• nevkládej osobní data sebe ani druhých
• nevkládej nic, co nesmí opustit školu / firmu

Vibecoding v praxi

Smyčka, kterou budete jet

1. popiš, co chceš (konkrétně)
2. nech vygenerovat malý kus
3. spusť to
4. rozumíš tomu? nech si vysvětlit
5. commit
6. zpátky na 1

Git je vaše záchranná síť

• malé commity = můžeš kdykoli zkusit blbost
• rozbilo se to? vrátíš se k poslednímu commitu
• proto jsme se Git učili před tímhle

Živé demo

Založíme firmu, která potřebuje web

Takhle vypadá vyplněný

Vytvoř jednostránkový web pro Psí patrolu - venčení psů v Praze.
Zákazník: lidé, kteří jsou celý den v práci a nemají čas venčit.
Vzhled: hravé a přátelské, zelená a bílá, zakulacené rohy.

Čisté HTML + CSS v jednom souboru, žádné knihovny.

Sekce v tomto pořadí:
1. hlavička s logem a navigací (Domů, Ceník, Kontakt)
2. hero: velký nadpis "Váš pes se nudí. My ne." + tlačítko
3. tři karty vedle sebe: Krátká vycházka / Dlouhá / Celý den
4. ceník jako tabulka
5. patička s e-mailem a telefonem

Piš to jednoduše - jsme začátečníci a musíme tomu rozumět.

To je jen ukázka formy. Obsah bude ten váš.

Teď to zkusíme spolu

Vytvoř jednostránkový web pro [FIRMA] - [CO DĚLÁ].
Zákazník: [KOMU TO PRODÁVÁ].
Vzhled: [VIBE], barvy [BARVY].

Čisté HTML + CSS v jednom souboru, žádné knihovny.

Sekce v tomto pořadí:
1. [...]
2. [...]
3. [...]
4. [...]

Piš to jednoduše - jsme začátečníci a musíme tomu rozumět.

Hranaté závorky doplníme spolu, nahlas.

Krok 1: sledujeme, jak to roste

Čeho si všímat, až to začne psát:

• kde přesně dělá to, co jsme řekli
• kde si domyslel něco, co jsme neřekli
• jestli poznáváme značky a vlastnosti, které používá
• jestli bychom to dokázali vysvětlit

Tohle jsme se učili

• na karty vedle sebe použije display: flex
• na odsazení padding a margin
• na sekce header, main, footer

Proto se to učíme. Ne abychom to psali - abychom to poznali.

Krok 2: iterujeme

Tři kola, každé vyslovíme nahlas jako větu:

• něco přidat
• něco zjednodušit
• něco opravit, co je rozbité

A pak commit.

Co jste právě viděli

• od nuly k webu za pár minut
• vy jste řekli, CO chcete - model vyřešil, JAK to napsat
• nejtěžší bylo vědět, co vlastně chceme - ne to napsat
• a to je přesně ta část, kterou za vás nikdo neudělá