Průvodce vibe codingem
Jak začít s vibe codingem?
První funkční hru vytvoříte za dvě minuty. Česky, zdarma a bez instalace. Ukážu vám přesně, kudy vede cesta.
Autor: Jindřich Fáborský · 17 let v marketingu · 2 000+ hodin vibe codingu · 180+ projektů
Rychlá odpověď
Jak tedy začít s vibe codingem?
Za mě jedině tvorbou. Nikoliv čtením. Tak jdeme na to.
Otevřete si na počítači ChatGPT, Claude nebo Gemini. Běžnou češtinou napište, co chcete vytvořit, a do dvou minut máte první funkční hru. Žádná instalace, žádné programování.
Nevíte jistě, co vibe coding vlastně je? Začněte u samostatného průvodce.
První krůček ve vibe codingu
Naprogramujte si vlastního hada. I když to vůbec neumíte
Opravdu stačí AI říci, že chcete, aby vytvořila hru Had. To kouzlo ale začíná, když si začnete vymýšlet zadání, jak přesně má ta vaše verze fungovat. Tady začíná tvorba. A s ní vibe coding.
Ovládání: šipky či WASD, na mobilu tlačítka pod hrou
Klikněte na zadání (každé jde zase vrátit)
Žádné z těch tlačítek není kouzlo. Je to obyčejná česká věta, kterou byste napsali do AI chatu. Přesně takhle vypadají první iterace.
Chcete to samé doopravdy?
Otevřete AI chat s předvyplněným zadáním. Funguje to i v bezplatné verzi, jen doporučuju počítač místo mobilu.
Hlavní princip
Nemusíte rozumět kódu. Vy jste architekt
Vidíte vstup (svoji větu) a výstup (změnu na obrazovce). Co se děje uprostřed, řeší AI. Vy říkáte, co se má stát, a kontrolujete výsledek.
1 · Řeknete, co chcete
„Chci, aby ten had byl zelený.“
Obyčejnou češtinou. Žádný odborný jazyk.
2 · AI přepíše kód
Dovnitř nevidíte. A nevadí to.
3 · Vidíte výsledek
čekám na změnu…
Na obrazovce, během chvíle.
Není to ono? Reklamujete: napíšete, co je špatně, a AI to předělá.
Tenhle moment popisují účastníci mých školení nejčastěji: najednou jim dochází, že svoje nápady můžou zadávat rovnou. Bez čekání na ostatní. Vibe coding dává lidem svobodu. Jak zadání formulovat čím dál líp, ukazuje průvodce Jak psát prompty.
Co po hadovi
Začněte jednoduchým webem. Tam se nemá co pokazit
Na hře Had jsme si ukázali, jak můžete iterovat. Přidávat další a další nápady do hry. Teď je čas si zkusit něco, co má reálně hodnotu. Co takhle se pustit do výroby webu?
Web bez formulářů, databáze a přihlašování nenese žádné bezpečnostní riziko.
Beztrestně si na něm osaháte design, iterace, rychlost i optimalizaci pro vyhledávače. Nejhorší, co se může stát? Smažete ho a začnete znovu.
Kam pokračovat dál? Tohle je mých šest úrovní vibe codingu z podcastu. Produkční aplikace je poslední schod, ne první.
- 0
Jednorázové utilitky
Prakticky nulové rizikoHromadné přejmenování fotek, konverze formátů, přepis audia přes Whisper
- 1
Landing pages
Prakticky nulové rizikoStránka kampaně, prezentace za 15 minut. HTML + CSS, žádná databáze
- 2
Celé weby
Nízké rizikoVícestránkový firemní web, web konference. Úspora 20–100 tisíc za agenturu
- 3
Prototypy aplikací
Prakticky nulové rizikoKlikací mockup, na kterém se porada domluví za deset minut. Žádná reálná data
- 4
Interní nástroje
Nízké riziko, největší užitekDashboard prodejů, správa řečníků, archiv referencí. Běží u vás, nikdo o nich neví
- 5
Produkční aplikace
Vysoké rizikoAppka pro tisíce cizích lidí, 24/7 provoz, osobní údaje. Až s auditem od profíka
Schody se přeskočit dají. Ale každý přeskočený schod je riziko, kterému zatím nerozumíte. Úroveň 5 je cíl cesty, ne start.
Kde naopak vibe coding (zatím) nenasadit, rozebírá průvodce Kdy se vibe coding nehodí.
Čím začít
Tři vstupní body. Od chatu po terminál
Nevybírejte dlouho. Začněte tím nejjednodušším a posuňte se dál, až narazíte na strop.
Začněte přímo v ChatGPT nebo Claude
3, 2, 1 startClaude, ChatGPT nebo Gemini. Napíšete zadání a výsledek vidíte rovnou vedle chatu: Claude tomu říká Artifacts, ChatGPT má u bloků kódu tlačítko Preview a Gemini Canvas. U Claude a Gemini to funguje i zdarma, v ChatGPT záleží na tarifu a zařízení.
Kdy přejít dál: jakmile chcete web s víc stránkami a vlastní adresou, chat přestane stačit.
Macaly: první weby bez instalace
Doporučuju na webyMacaly běží v prohlížeči, mluví česky a postaví vám celý web včetně publikace a domény. Je to česká platforma: založil ji Petr Brzek a dnes patří pod evropskou hostingovou skupinu team.blue.
Zdarma dostanete 3 miliony kreditů měsíčně. Macaly navíc umí navrhnout web podle odkazu nebo screenshotu. Studenti kurzu AI First mají bonus 10 milionů kreditů, což reálně stačí na tři až čtyři weby.
Kdy přejít dál: až budete chtít plnou kontrolu nad kódem a projekty mimo jednu platformu.
Claude Code nebo GPT Codex
Plná sílaProfesionální nástroje, které pracují přímo se soubory na vašem počítači. Tady se z vibe codingu stává řemeslo: weby, aplikace, automatizace. Pokud už platíte za Claude nebo ChatGPT, máte je v předplatném a stačí je jen nainstalovat.
Jednoduché pravidlo na přechod: jakmile má projekt reálné uživatele, data nebo platby, patří do Claude Code, ne do builderu v prohlížeči.
Poctivě
Čtyři chyby, které začátečníky stojí nejvíc nervů
Vibe coding je návykový a snadno se rozjedete moc rychle. Tyhle čtyři věci vidím u začátečníků pořád dokola.
01
Jedno obří zadání
Chtít celou aplikaci jedním promptem. Výsledek se rozsype a nepoznáte, co ho rozbilo. Zadávejte po malých krocích, jednu změnu za druhou. Přesně jako u toho hada nahoře.
02
Začít rovnou produkční aplikací
Aplikace s daty uživatelů a platbami je poslední úroveň, ne první. Bezpečnost se nedá obejít nadšením. Začněte webem, který žádná data nemá, a vystoupejte po schodech výš.
03
Donekonečna opravovat jedno vlákno
Když AI třikrát po sobě opraví věc špatně, čtvrtý pokus to nespraví. Dlouhá konverzace se modelu plete. Začněte novou a zadání napište rovnou líp. Proč se to děje, vysvětluje průvodce Co je kontextové okno.
04
Mobilní appka jako první projekt
App Store i Google Play znamenají schvalování, roční poplatky a provize. Nápad si nejdřív ověřte jako web, do mobilu ho převedete později, až bude jasné, že funguje.
Poslechněte si
Důkaz? Zvládli to i středoškoláci
Na finále soutěže DemocraTICon dostalo 11 týmů 60 minut a Macaly. Funkční aplikaci odevzdaly všechny. Pokud váháte, jestli na to máte, tyhle epizody vás přesvědčí.
Soutěž pořádá DemocraTICon. Byl jsem u toho jako mentor a pořád z toho mám radost.
Chcete tou cestou projít se mnou?
V kurzu AI First vás vezmu od první hříčky až po weby a aplikace, které budete reálně používat. Bez teorie, všechno na konkrétních projektech.
20 hodin videí · 1 800+ absolventů · bonus 10 milionů kreditů v Macaly · roční licence s aktualizacemi zdarma
FAQ
Časté otázky začátečníků
Musím umět programovat, abych mohl začít?+
Ne. První hru i první web zvládnete bez jediného řádku kódu, zadání píšete běžnou češtinou. Postupně pochytíte pojmy jako HTML, databáze nebo API, protože je AI při práci používá. To je v pořádku, učíte se cestou.
Co potřebuju, abych mohl začít s vibe codingem?+
Stačí počítač s prohlížečem a účet u libovolného AI chatu (Claude, ChatGPT nebo Gemini). Všechny mají bezplatnou verzi, která na první experimenty bohatě stačí. Nic se neinstaluje.
Kolik stojí začátek?+
Nic. Bezplatné verze AI chatů i platformy Macaly (3 miliony kreditů měsíčně) na první projekty stačí. Až vás to chytne, počítejte s 20 až 60 dolary měsíčně za placené nástroje. Pořád je to zlomek ceny, co dáte za výrobu jednoho webu na míru.
Můžu zadávat česky?+
Ano. Velké AI modely rozumí česky výborně a Macaly má kompletně české rozhraní. Angličtina není podmínka, hodí se nanejvýš na čtení dokumentace.
Můžu začít na mobilu?+
Doporučuju počítač. Náhled vytvořené hry nebo webu je v mobilních aplikacích osekaný, nebo chybí úplně. Plnou funkčnost mají náhledové režimy na počítači: výsledek vidíte hned vedle chatu a iteruje se mnohem pohodlněji.
Co si mám postavit jako první?+
Po první hříčce jednoduchý web bez formulářů, databáze a přihlašování: osobní stránku, web projektu nebo landing page. Nemá co pokazit a naučí vás iterace, design i SEO. Produkční aplikace s daty uživatelů je poslední schod, ne první.
Jak dlouho trvá se to naučit?+
První funkční hru máte za dvě minuty, první vlastní web za víkend. Rozdíl mezi hraním a sebejistou tvorbou dělá pár desítek hodin praxe. Přesně tuhle cestu s vámi projdu v kurzu AI First.