AI Hub · naučte se programovat s pomocí AI
Vibe coding
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 hadaCo 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.
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.
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í.
Z praxe
Co jsem takhle postavil

lukaskoula.com
Tenhle web. Převod z WordPressu na statický web v Astru – rychlejší, bez pluginů a bez starostí s aktualizacemi.

UX Mind
Web výzkumné firmy UX Mind, kterou spoluvlastním. Vlastní design a statický web bez CMS.

Memoriae Loci
Web Memoriae Loci – Paměť místa Liberec s projekty Kameny zmizelých a Ve jménu lilie. Vedu ho jako předseda správní rady.

Školní weby
Landing page služby Školní weby, postavená s AI. Samotné weby pro školy pak vznikají ručně s programátorem.
Appky a nástroje
Komprese obrázků
Převede JPG a PNG do WebP, ohlídá maximální velikost souboru a AI doplní SEO název, alt text i popis.
Vyzkoušet →
CSV → Markdown
Nahrajete CSV z Excelu a stáhnete Markdown tabulku – třeba jako podklad pro NotebookLM.
Vyzkoušet →Heuréka reporty
Data z Heuréky přes API v přehledném reportu pro klienta. Žádné ruční exporty a tabulky.
Interní nástroj pro klientaJak postupuji
- 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.
- 02
První verze
AI postaví kostru: strukturu, design a první funkce. Za hodinu je co ukázat.
- 03
Iterace
Malé kroky, po každém kontrola v prohlížeči. Co nefunguje, opravíme hned, ne na konci.
- 04
Kontrola
Projdu kód, rychlost, SEO, přístupnost a bezpečnost. Tohle za vás AI neudělá.
- 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
Č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.
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.