AI Hub · naučte se programovat s pomocí AI

Vibe coding

Ilustrace kódu generovaného s pomocí AI

Zapomeňte na učebnice plné teorie. Vibe coding je praktický způsob, jak programovat s AI – v pohodovém tempu, na reálných příkladech a s nástroji, které dnes používají vývojáři po celém světě.

Vyzkoušet hada

Co je vibe coding

Programování v přirozeném jazyce. Popíšete, co chcete, a kód napíše AI. Vy určujete směr, zkoušíte výsledek a necháváte AI vysvětlovat a opravovat.

Pojem zpopularizoval v roce 2025 Andrej Karpathy. Neučíte se dlouhé teorie ani se nestresujete syntaxí – tvoříte malé skripty, automatizace nebo webové prvky, které vycházejí přímo z vašich potřeb.

KlasickyVibe coding
Jak zadáváteUčíte se syntaxi programovacího jazykaPopisujete česky, co má vzniknout
První výsledekPo týdnech kurzůČasto do hodiny
Vaše rolePíšete každý řádek kóduUrčujete směr, zkoušíte a kontrolujete
ChybyHledáte je samiAI je vysvětlí a navrhne opravu

Zkopírujte prompt

Naprogramujte si hada v ChatGPT

Zkopírujte prompt do ChatGPT a nechte si vytvořit hru Snake. Uvidíte, jak AI rozumí zadání a napíše funkční kód, který můžete hned použít a upravit. Výsledek si můžete rovnou zahrát tady.

Had z ChatGPT

Ovládání šipkami nebo WASD, mezerník = pauza.

Skóre0
Nejlepší0
Rychlost1,00×
Každých 5 soust se had zrychlí.
Prompt ke zkopírování
Vytvoř jednoduše jednu webovou stránku ve formátu HTML (jeden soubor obsahující HTML, CSS i JavaScript) s následujícími požadavky:
– Název hry: Snake
– Cíl hry: sbírání dílků, na jejichž základě had roste. Jedná se o klasickou hru Snake z telefonů Nokia – se zvyšující se rychlostí, záznamem nejlepšího skóre (high score), tlačítkem pro opakování hry (Restart) a zábavnými zvukovými efekty (alespoň zvuk při sebrání dílku a při konci hry).
– Uživatelské prostředí má být barevné, postavička hada a sbíraných dílků mají být kreslené a zábavné, grafika podobná klasické hře Snake z mobilů Nokia.…
Zobrazit celý prompt
Vytvoř jednoduše jednu webovou stránku ve formátu HTML (jeden soubor obsahující HTML, CSS i JavaScript) s následujícími požadavky:
– Název hry: Snake
– Cíl hry: sbírání dílků, na jejichž základě had roste. Jedná se o klasickou hru Snake z telefonů Nokia – se zvyšující se rychlostí, záznamem nejlepšího skóre (high score), tlačítkem pro opakování hry (Restart) a zábavnými zvukovými efekty (alespoň zvuk při sebrání dílku a při konci hry).
– Uživatelské prostředí má být barevné, postavička hada a sbíraných dílků mají být kreslené a zábavné, grafika podobná klasické hře Snake z mobilů Nokia.

Doplň prosím tyto konkrétní požadavky, aby byla hra plně funkční:
Pevné stěny – kolem hracího pole vytvoř čtyři pevné stěny. Pokud had narazí do některé stěny, okamžitě hra končí (Game Over), zobrazí se hláška a možnost hru restartovat. Stěny nejsou úplně v rozích – hrací pole zarovnej tak, aby stěny nebyly nalepené přímo na okraj okna prohlížeče, ale aby kolem byla mírná mezera (margin), aby to bylo uživatelsky přívětivé.
Respektování modrých stěn – pokud použiješ modré stěny, chovej se k nim jako k reálné hranici hracího pole. Had ani sbíraný dílek se nesmí objevovat mimo tyto stěny. Hrací plocha musí přesně odpovídat vnitřku modrého rámečku, aby to nepůsobilo jako „obraz v obraze".
Retro rámeček – kolem celé herní plochy (včetně názvu hry a skóre) vytvoř retro rámeček ve stylu starých kapesních her / starých mobilů (lehce 3D efekt, zaoblené rohy, jemný stín / zvýraznění).
Sbíraný objekt – místo jablka použij zlatou tečku (golden dot) nebo malý zlatý kruh, který je jasně viditelný na hracím poli.

Hra musí být:
– napsaná v čistém HTML + CSS + JavaScript bez externích knihoven,
– plně ovladatelná klávesnicí (šipkami),
– veškerý kód v jednom HTML souboru, který bude po otevření v prohlížeči ihned funkční.

Jak postupuji

  1. 01

    Zadání

    Popíšu, co má vzniknout, pro koho a z jakých dat. Dobré zadání je polovina práce – i pro AI.

  2. 02

    První verze

    AI postaví kostru: strukturu, design a první funkce. Za hodinu je co ukázat.

  3. 03

    Iterace

    Malé kroky, po každém kontrola v prohlížeči. Co nefunguje, opravíme hned, ne na konci.

  4. 04

    Kontrola

    Projdu kód, rychlost, SEO, přístupnost a bezpečnost. Tohle za vás AI neudělá.

  5. 05

    Nasazení

    Hosting, doména, měření v GA4 a předání. Web žije a dá se dál rozvíjet.

AI nástroje, které používám: ClaudeChatGPTGeminiSunoElevenLabsGitHubAstro

Na co vibe coding stačí

Vibe coding je skvělý sluha. Na ostrý provoz se ale vyplatí, aby výsledek zkontroloval někdo, kdo ví, co hledat.

Postavíte si sami

  • Prototyp nebo ověření nápadu
  • Interní nástroj, kalkulačka, převodník
  • Landing page nebo jednoduchý web
  • Automatizace opakované práce

Tady přizvěte odborníka

  • Platby, osobní údaje a přihlašování
  • Napojení na sklad, ERP nebo účetnictví
  • E-shop se stovkami produktů
  • Dlouhodobá údržba, výkon a SEO
Probrat váš projekt →

Časté otázky k vibe codingu

Co je vibe coding?

Programování v přirozeném jazyce: popíšete, co chcete, a kód napíše AI. Vy určujete směr, kontrolujete výsledek a necháváte AI vysvětlovat a opravovat. Pojem zpopularizoval v roce 2025 Andrej Karpathy.

Musím umět programovat?

Na první projekty ne. Pomůže ale rozumět tomu, co AI vytvořila – jinak nepoznáte chybu. Proto na školení vždy vysvětluji i to, co se v kódu děje.

Jakým nástrojem začít?

Na první pokusy stačí ChatGPT nebo Claude v prohlížeči. Na větší projekty doporučuji Claude Code, který pracuje přímo se soubory projektu. Nástroj je ale méně důležitý než dobré zadání.

Stačí vibe coding na firemní web?

Na jednoduchý prezentační web často ano. Jakmile jde o platby, osobní údaje nebo napojení na další systémy, potřebujete někoho, kdo výsledek zkontroluje a bude ho udržovat.

Učíte vibe coding na školení?

Ano. Na školení si každý postaví vlastní malý nástroj na svém počítači – od zadání po funkční výsledek. Skupinově i jeden na jednoho.

Lukáš Koula

Chcete vibe coding zkusit s někým, kdo vás provede?

Na školení si postavíte první vlastní nástroj na svém počítači – s AI a bez programátorské průpravy.

Poptat školení