Jak začít s vibe codingem

Filip: Najednou to přestane fungovat. Vy kliknete na tlačítko tady, tady se vám rozbije něco úplně někde jinde

Jindřich: vývojáři těhletěch nástrojů tak skutečně míří na ty, který jako nerozumí tomu

Filip: že jo. Jeden to prostě miluje, říká: „To je revoluční, s tím uděláš všechno.“ Druhej to nenávidí a říká, že to je cesta do pekla.

Jindřich: to opravdu nebát se toho. Jako vyzkoušet si to, protože je to opravdu hodně jednoduchý Čau Filipe, vítám tebe i naše posluchače. Další díl podcastu Deep Link Show. A my se vracíme trochu do historie, protože v prvním dílu jsme tady řešili fenomén vibe coding a teď bysme na to chtěli navázat. Respektive je to takovej prequel toho vibe codingu, protože bysme chtěli jít jako do větších, eh, základů, protože i jako řada z vás, našich posluchačů, tak nám jako psali, že tohleten vibe coding díl třeba byl fajn, ale že tam chyběly jako ty základy. Třeba jako jak s tím začít. Mají třeba nápad, že jo, chtěli by ho přetavit do toho softwarovýho projektu nebo do tý webový aplikace a tak. Tak pojďme dneska k základům a pojďme se pokusit dát pár tipů a triků, eh, jak s vibe codingem začít

Filip: Ahoj Jindro, zdravím tebe, zdravím i naše posluchače. A hele, vibe coding, to je něco, co mám strašně rád. Já, ono to dostává i jako velkou kritiku. Když si přečteš LinkedIn nebo nějaký další sociální sítě, tak tam máš takový ty dva tábory, že jo. Jeden to prostě miluje, říká: „To je revoluční, s tím uděláš všechno.“ Druhej to nenávidí a říká, že to je cesta do pekla. Já si myslím, že prostě ta zlatá střední cesta je někde mezi. Nicméně, eh, pro ty, který třeba ještě vibe coding neznaj nebo ten termín slyšej poprvé, tak vibe coding, to je vlastně způsob, kdy tvořím nějakej software, nějaký aplikace a je jedno, jaký aplikace, jestli jsou webový, mobilní a tak dál. A tvořím to pomocí AI. A tím stylem, že já vlastně tu umělou inteligenci toho chatbota, agenta, zkrátka nějakej ten nástroj, tak že ho promptuješ. To znamená, že mu zadáváš ty pokyny. Dá se to představit tak, že chtěl-- chci postavit web, kterej bude prezentovat, já nevím, osobu Filipa Oborníka. Ten dělá tohle, tohle, tamto. Chtěl bych použít tydle barvy atd. To může být nějaký prompt. A pak díky těm nástrojům, který nám ten vibe coding umožňujou, tak vlastně ta umělá inteligence napíše za nás ten program, ten kód na pozadí a vytvoří ten web. Eh, s tímhletím termínem tak přišel Andrej Karpaty. On to tweetnul někde prostě na Twitteru před, myslím, že to je rokem a půl, někdy loni v únoru. A tenhleten termín se ujal a od tý doby se vlastně jako používá jako takovou tu definici tohohle přístupu. A já bych ještě jako na začátek, když jsme tady takhle fakt jako úplně na svém začátku, to chtěl oddělit od toho, co používají profesionální programátoři. Tomu se říká agentic engineering. A to je vlastně, že používáš umělou inteligenci k tvorbě toho softwaru. Takže jako teď to zní pořád stejně, ale má to jako jeden velkej rozdíl. A to je, že ty víš, co děláš, co dělá ten kód, jak se tvoří, koukáš na něj, kontroluješ ho a celý to jsi schopnej vlastně jako takhle designovat. Tak to je jenom tak jako pro srovnání, protože já se často setkávám s tím, že programátoři odsuzujou vibe coding a, a nebo naopak. A jsou to prostě dvě rozdílný disciplíny. Jak se díváš na vibe coding ty?

Jindřich: My tady vlastně historicky ten, eh, díl o využití jako umělé inteligence ve vývoji měli. Tuším, že to byl devátej díl a tam jsme právě rozebírali víc ten jako agentic engineering a jak k tomu přistupuješ ty třeba jako softwarový vývojář. A tam si myslím, že jsme udělali dost tu silnou čáru právě vůči tomu vibe codingu. Ale dneska my jsme se chtěli právě pobavit primárně o tom vibe codingu a jinými slovy, přesně ty už jsi to trochu naznačil, jak vlastně přetavit ten nebo jak vysvětlit tomu A agentovi, aby nám dal ten softwarovej projekt nebo tu webovou aplikaci, řekněme jako v našem případě, tak, aniž bych já se musel na ten kód vůbec koukat. Jo, takže typicky to, čeho bychom jako chtěli docílit, zbořit tu bariéru, když jako spousta lidí si říká: „Ok, jasně, software jako to já vlastně nezvládnu vytvořit, zvládnu nic.“ Jako ba naopak jako zvládnete. A v dnešní době k tomu existují specializovaný nástroje, který nám celou tu cestu opravdu hodně zjednodušujou. A já, když si budu chtít vytvořit například landing page nebo osobní stránku s pár informacema, tak opravdu ten agent to udělá za mě a já mu můžu zadat ten prompt jenom třeba na pár vět. Jo, takže pojďme si to oddělit a pojďme se dneska pobavit právě o tom, jak ten softwarovej projekt vytvořit bez toho, aniž bych já vůbec musel koukat na ten software, na ten zdrojový kód.

Filip: Super, tak pojďme začít nějakejma příkladama. Když se posluchači podívají třeba na náš web Deep Link Show, tak používal jsem nástroj Claude Code, což je trošku pokročilejší vibe coding, ale je to čistej vibe coding. Já jsem na ten kód vůbec vlastně jako nekoukal. Stejně tak jako můj web FilipOboril.cz taky čistej vibe coding. Jasně, sem tam tam použiju v těch promptech nějaký jako termíny, který jsou jako z IT, ale je to pořád čistej vibe coding. Já jsem vlastně ten kód vůbec neviděl. A ten nejjednodušší způsob, jak si můžete nějakej jako vibe coding vyzkoušet, tak ještě než budete hledat nějakej nástroj, nějakej webovej nástroj nebo Claude Code a nějakýho agenta, tak klidně běžte do svýho chatovýho asistenta, ať už je to ChatGPT nebo Claude a řekněte mu, ať vám vytvoří nějakou jednoduchou interaktivní hru nebo nějakou jednoduchou webovou stránku. A oni tydle chatboti už dneska uměj taky psát takzvaný HTML. To jsou prostě ty soubory, který se vám pak zobrazujou, ale to vlastně není podstatný. Ale když mu řeknete: "Vytvoř mi nějakou takovouhle webovou hru nebo nějakou webovou stránku," tak on vám ji vytvoří a takhle v pravým panelu vám ji ukáže. To je za mě jakoby ten nejjednodušší způsob vibe codingu. Moc daleko vás nedostane, ale pro nějakej začátek a pochopení toho, že vlastně z toho promptu, to znamená z toho vašeho požadavku, z toho zadání, co zadáte do toho textovýho políčka toho chatbota, tak že může vzniknout nějakej jako program, tak to si myslím, že je ten jako nejlepší základ, kde si to vyzkoušet.

Jindřich: A ne o moc složitější přístup tak je potom vlastně využití těch aplikací, který jsou už stavěný na vibe coding těch softwarovejch projektů, respektive webovejch aplikací. Ten nejznámější je pravděpodobně Labable, švédská společnost tuším, ale potom pro jako řadu z nás tak možná může bejt ještě lepší využití Makaly. Makaly je to vlastně českej nástroj a kde já vidím, byť jsou jako velmi podobný z mýho úhlu pohledu, pokud nejdeme do nějaký jako větší míry detailu, samozřejmě Labable jako mnohem větší společnost, tak obrovská konkurenční výhoda v Makaly tak je ta, že je to česká společnost, tudíž mají českou podporu. V podstatě všechno je v češtině, český návody, český tutoriály, dělaj různý webináře, například kde oni mají live stream a člověk se může zeptat jako na otázky k tomuhle. Takže pokud by si to ještě někdo chtěl to trošku víc jako zjednodušit oproti například tomu Labable, tak bych doporučoval určitě tohleto využití právě nástroje Makaly.

Filip: Já u toho Makali zmíním, eh, takovou malou reklamu na náš předchozí díl. Měli jsme tady Petra Brzka, což je vlastně autor nebo zakladatel společnosti Makali, takže můžete mrknout na, eh, tenhleten rozhovor. Najdete ho na YouTube, Spotify, zkrátka všude, kde posloucháte Deep Link Show. No a pojďme k tady těm webovým nástrojům. jsou vlastně jako jiný oproti takovým těm třeba Claude Code? Protože t-ten je dneska slyšet prakticky všude. Tak já to vždycky vysvětluju tak, že tyhlety webový nástroje jsou vlastně jako skvělý pro začátečníky a netechnický lidi. A to z toho důvodu, že vlastně software, ten váš program, ať už je to jakákoliv aplikace, není jenom ten kód, ale je to spousta dílků tý skládačky, který musíte dát dohromady. chcete webovku, tak je to jenom ten nějakej jako kód, co se vám zobrazuje. Ale pokud chcete nějakou složitější apku, potřebujete ty data někam třeba ukládat. Potřebujete, aby ten uživatel měl možnost se tam přihlašovat. Potřebujete z tý aplikace třeba odesílat maily, protože potřebujete poslat ně-nějaký informace, že se něco jako stalo. A vy si buďto todleto všechno, tady tu skládačku můžete skládat sami. To je ten složitější přístup k tomu vibe codingu. Anebo můžete využít právě nástroje, jako jsou Makali, Lovable Bolt a další, který se vlastně tady tu skládačku snažej složit za vás. Takže ten agent, kterýmu vy tam říkáte, co chcete vytvořit, tak on velmi jednoduše je vám schopnej zařídit to ukládání dat. Je vám jednoduše schopnej řešit přihlašování do tý aplikace, poslat maily těm vašim uživatelům. Zkrátka spoustu tady těch jakoby relativně složitějších problémů za vás. No a pak, když dojde na to, že chcete tu apku sdílet se světem, no tak přes tady ty nástroje vy kliknete na jedno tlačítko Publikovat a ta apka je prostě veřejná a nemusíte nic moc řešit. Kdežto když to pak děláte tím složitějším p-způsobem, ke kterýmu se pak za chvilku dostanem, tak tam si spoustu tady těch věcí musíte vlastně vyřešit mimo ten nástroj a poskládat to dohromady. Má to svoje výhody, ale pro tu jednoduchost a rychlost tak za mě tady ty webový nástroje mají svoje perfektní místo a sám i jako vývojář je sem tam čas od času použiju. to prostě zkrátka svoje využití.

Jindřich: Ty, eh, zmínil vlastně našeho předchozího hosta. Tedy to byl Petr Brzek, autor Makaly. Tak, eh, to mně trochu připomíná, že on nám nebo respektive nám všem i tady jako našim posluchačům přinesl takovej nejmenší dárek. A pokud by někdo si chtěl Makalu vyzkoušet, tak, eh, když použije, eh, odkaz makaly tečka link lomeno Deep Link Show a registruje se jako nový uživatel, tak získá tři plus deset milionů, eh, kreditů zdarma. Takže pokud by to někoho zaujalo, můžete, eh, a budete chtít si vyzkoušet, eh, s Makaly, není to žádná placená spolupráce, tak můžete, eh, klidně využít. Necháme to samozřejmě na vás. Ale co je hodně důležitý, si myslím si uvědomit při využití těhletěch vibe codingových nástrojů, tak je to, že vývojáři těhletěch nástrojů tak skutečně míří na ty, který jako nerozumí tomu kódu. Jo, takže spoustu věcí je tam připravená a od-odladěná tak, abychom to měli co možná nejjednodušší. Takže jak jsi zmínil, databáze. Já ji vlastně nemusím ani řešit. Vytvoří se mi sama. Nemusím řešit žádný SEO, nemusím řešit taky analytický nástroje, protože už implicitně jsou v tom jako portálu. Eh, nemusím vlastně řešit takový napojování nebo byť částečně, tak napojování domény, ale můžu si třeba přímo přes ten software, tak přes ten nástroj, tak si můžu koupit svoji vlastní doménu, na kterou se mi to automaticky,

Filip: Mhm.

Jindřich: eh, připojí. A v neposlední řadě, což si myslím, že je možná dokonce ty nej-- ta nejdůležitější část, tak oni mají připravený a odladěný už ty systémový prompty tak, že vlastně počítají s tím, že uživatelé, který zadávají ten prompt, tak ho nezadají přesně tak technicky, jak by ho zadal například vývojář. Eh, takže oni ho nějakým způsobem zadají a na pozadí se tam připojí ten systémový prompt, který vlastně vyřešili a odladili právě pro, pro naše zjednodušení vývojáři toho nástroje, jako je například Labelle. A to nám vlastně pomáhá v tom, že já nemusím bejt znalej v tom oboru, nemusím všechny tyhle odborný termíny znát a můžu si to zadat vlastně nějakým, eh, jako řekněme obyčejnou češtinou, řekněme laickou češtinou a jsem schopnej i přesto přes všechno se dostat k velmi kvalitnímu nebo řekněme k velmi uspokojivému výsledku, i když tu terminologii neznám a nemám ten technickej background a nemám například ani technický vzdělání za sebou.

Filip: Rozhodně. Takže tyhlety webový nástroje, když bych to shrnul, tak za mě mají skvělý využití. Pokud nejste technickej člověk a s vibe codingem začínáte, tak bych určitě začal tady. Neznamená to, že tam musíte skončit. Vy z těch nástrojů pak můžete vždycky odejít. Ty kódy pořád za tím běží kód, cokoliv co vibe codujete, tak za tím je nějakej kód a i z těhlech nástrojů vy si ho pak můžete případně vzít a můžete pokračovat pak třeba v Cloud Codu nebo v Kurzoru. Zkrátka v nějakým takovýmhle jako pokročilejším nástroji. Takže pokud začínáte, sk-- začal bych tady v těch nástrojích. Pokud, eh, vaším cílem je něco jenom jako rychle vytvořit a jde vám o ten výsledek, ale nechcete si pak vibe codovat delší jako stovky aplikací, nechcete řešit, já nevím, mobilní aplikace, aplikace na váš počítač a tak, ale stačí vám čistě webový věci, protože to je možná důležitý říct, to jsme úplně nezmínili, tak tady ty apky uměj primárně webový věci, byť třeba AI Studio od Googlu teďka začíná dělat i androidí aplikace, takže oni i tadycty webový vibe codingový nástroje se jako rozšiřujou. Tak ale pokud vám nevadí, že vlastně jako někdo za vás předvybral ty technologie, zůstáváte v tom webu, tak opět šel bych tady tou cestou. Nicméně ve chvíli, kdy chcete třeba si vybrat, jakou službu chcete na posílání mailů nebo si chcete vybrat, kam budete ukládat, eh, ty data nebo chcete využít jako jiný technologie, než vám tadycta webová aplikace nebo tady ten jako AI builder nabízí, už musíte šáhnout po něčem trošku složitějším. A tam zase ta paleta se jako otvírá, je poměrně široká. Takovým asi jako nejzvučnějším nástrojem, tak je teďka Cloud Code. O tom je slyšet prakticky všude, ale dosti podobný tak jsou nástroje jako Cursor, Antigravity CLI, GitHub Copilot, Windsurf a tak dál. A každý mají svoje nějaký výhody, nevýhody. A jak jsem říkal na začátku, tak tady vy sice máte extrémní flexibilitu a jsou to fakt profi nástroje, který používají i profesionální vývojáři, ale můžete s nima i vibe codovat, ale musíte si ty dílky té skládačky poskládat sami. Chcete databázi? Musíte jít na Supabase, založit si účet, připojit to přes nějaký klíč. Chcete odesílat maily? Musíte si najít nějakou službu. MailChimp, Resend a další. To jsou prostě normálně jako firmy, který poskytujou tady tu službu. Vy si tam založíte účet buďto zdarma, nebo se zaplatíte a zase to připojíte k tomu vašemu programu a musíte si to takhle poskládat. Ale výměnou za to, za tady to víc práce tak dostáváte vlastně neomezenou flexibilitu.

Jindřich: Což už nicméně vyžaduje mnohem větší technickej background nebo alespoň nějaký základní technický znalosti. Což samozřejmě jasně, leckdo se může naučit leccos v dnešní době, kde je YouTube plný různých návodů a tipů a triků a podobně. Nicméně pojďme teda, řekněme, že, eh, jsem ten laik. Chci si něco zkusit vyzkoušet. Mám v hlavě nějakej plán. Registroval jsem se na Lovable nebo na Makali nebo na Bolt. Jakýkoliv vlastně nástroj. Jsem tam teda přihlášenej, tak jak se do toho teda pustit, abych dosáhl co možná nejlepšího, co možná nejlevnějšího, důležité je taky říct, výsledku. Protože v každým tomhle nástroji tak vlastně platím za spotřebovaný tokeny, což pro zjednodušení je něco, co jde dovnitř a něco, co jde ven, včetně toho, co píšu já, včetně toho kódu, se kterým pracuju. Takže, em, vlastně v mým zájmu je dávat co možná nejjasnější a nejsnažší, řekněme, eh, prompty, abych já dostal co možná nejkvalitnější výsledek. Takže typicky čím já bych začal, je fajn mít jako něco v hlavě, ale, eh, předat to tomu agentovi co možná nejpřesněji. Jo, takže opravdu nebát se ne říct jenom chci vytvořit úkolníček,

Filip: Mhm.

Jindřich: řekl bych, v jakých, co chci barvách třeba, jak má vypadat, jaký to má bejt funkce, jak můžu přidávat úkoly, jak je můžu mazat, jestli to má být pod nějakým heslem, nebo jestli to je veřejně přístupný a tak dál. Tudíž za mě ten nějakej první outcome, co bych byl rád, kdyby si naši posluchači odnesli, tak je to, když já vytvářím softwarovej projekt, webovou aplikaci, tak nebýt línej psát ten kód, eh, psát ten prompt takhle,

Filip: jo?

Jindřich: přesně tak, to zadání, ale zkrátka pokusit se být co možná nejpřesnější

Filip: Rozhodně. Hele, to zadání nebo vůbec jako ta představa toho, co chci vytvořit, to je za mě alfa omega, protože jako není nic horšího a já sám jsem se jako několikrát spálil, když mám jako mlhavou představu, že chci vytvořit nějakou appku a začnu to tam sázet a ono teď to má skvělej efekt, že jo. Ono se to začne tvořit, ty tlačítka se objevujou, data se ukládají, to je jako super. Takže ten první wow efekt je jako fajn, ale ve chvíli, kdy pak zjistíš: „Jo ty jo, no to je fajn, ale já jsem to vlastně nepromyslel. Já to takhle úplně jako nechci.“ A teď to začneš jako ohýbat a měnit a je to zdlouhavý. Stojí to jako extrémní množství tokenů, je to tím pádem drahý. Takže jako ten plán a ta představa je jako základ. A tady možná takovej tip, pokud budete používat ty nástroje, jako je třeba Macally a Lovable, tak ty jejich kredity jsou vlastně jako dražší než kredity, když třeba máte předplatný ChatGPT nebo Clouda. Tak já bych třeba doporučil vlastně jako vzít si tu svoji představu, ideálně buďto jí napsat, nebo mně třeba skvěle funguje jí nadiktovat pomocí nějakejch apek, jako je Whisper Flow, Super Whisper, kde já vlastně si jenom sednu a povídám, jak by to mělo fungovat a klidně mluvím deset, dvacet minut a popisuju to. Nadiktuju, jak by to mělo bejt. Hodím to do toho ChatGPT nebo Clouda, klasickýho prostě chatovacího asistenta, kterýho znáte mu: „Vytvoř mi na základě tohodle zadání, nebo odborně se tomu dá říkat nějakej product requirement dokument, PRD. S tím se setkáte pravděpodobně dost často při nějakým jako trošku vibe codingu. No a řeknu mu: „Super, pomož mi vytvořit to zadání.“ A hlavně, co je za mě důležitý, jako doptej se mě na nejasnosti. Doptej se mě na otázky, protože já vám zaručím to, že jako když dáte první takhle myšlenku, tak to nikdy neodladíte do toho detailu, abyste na nějaký funkce nezapomněli nebo třeba něco nedomysleli, jak má fungovat. Tak tohle je jako skvělá věc si to s tím, ať už agentem v tom Macally nebo Lovable nebo klidně s tím chatem tak jenom popinkat a nechat ho, ať vám vlastně jako zkritizuje to zadání, ať vás se doptá na nějaký nejasnosti a vlastně necháte ho vytvořit nějaký textový zadání. No a z tohodle zadání vy pak budete vycházet, eh, tý vlastně implementaci, při tvorbě, eh, toho softwaru. A to je asi za mě jako takovej ideální přístup, jak bych začal

Jindřich: Já si myslím, že ten jako důležitej, eh, úhel pohledu na tohle je, že ty seš ten, kdo to dokáže, eh, jako promyslet. Ty s tím máš zkušenosti, máš nějak jako technickej background, eh,

Filip: Jasně

Jindřich: ale když to jako řeší jako úplnej laik, tak ten naopak si myslím pro něj mnohem jako líp stravitelný bude ta vizuální forma. Jo, takže tam jasně co možná nejpřesnějc popsat tu moji představu. Pak ten Vibe Coding nás něco udělá, něco mi dá a já si to prohlídnu a řeknu: „Aha, jasný, ty jo, to jo, to je pěkný, ale chtěl jsem to trošičku jinak a teď to začínám postupně upravovat.“ Jo, takže jasný, dost pravděpodobně to ne-nedostane se do takovýho výstupu, aby byl, aby dosáhl takový kvality, jako by se dostal třeba ty tím tvým přístupem. Ale zase si myslím, že pro jako řadu je-lidí a řadu začátečníků, který nemají zkušenosti se softwarovým vývojem, tak tohleto může bejt jako mnohem jednodušší, mnohem stravitelnější a taky se můžou dostat k velmi dobrýmu anebo přinejmenším uspokojivému výsledku.

Filip: Hele, tady jako souhlasím. Ty to prototypování je super. Já jsem se možná moc jako rozvášnil v tý specifikaci, ale tobě vlastně jako nic nebrání tomu, aby si s tím Lovable makali nebo klidně s tím chatem. Já jsem zmiňoval úplně na začátku ty takzvaný artefakty, že ti to vy-vy-vytvoří tu jednoduchou aplikaci, tak tobě nic nebrání říct vlastně: „Hele, pojďme vytvořit prototyp a pojďme si to proklikat. Pojďme se podívat, jak by to vlastně mohlo vypadat.“ A ty si to takhle ozkoušíš na x jako variantách a až pak ve chvíli, kdy víš, jak to má fungovat, tak pak třeba začneš nanovo. Protože já vím, jako že ta aplikace jde upravovat. Ty když prostě se někam vydáš, pak to nebude to správný, tak řekneš super, pojďme to upravit. Ono to jako jde, ale přijde mi, že jako ve chvíli, kdy vlastně jako tohle děláš, že to často upravuješ a upravuješ to ne o nuance, chci jinou barvičku tlačítka nebo jiný zaoblení, ale chceš vyloženě jako strukturální změny tý logiky tý appky, takže je dobrý si to od předtím ještě jako odprototypovat a fakt klidně v tom ChatGPT říct: „Hele, teďka tady máme tu specku, udělej mi prototyp, já si to proklikám, vyzkouším, jestli to jako dává smysl.“ A až ve chvíli, kdy je to jako good, tak to hodíš tomu Lovable nebo tomu Makalu a řekneš: „Hele, tohle je moje zadání pro tu appku a pojďme ji tvořit jakoby naostro.“ Dává to takhle smysl, jak to popisuju?

Jindřich: Jo, ale, mm, myslím si, že hodně záleží na tom, jakej projekt ty chceš tvořit. Tohleto, co popisuješ ty, tak dost možná je to nějaká, řekněme, složitější aplikace nebo CRMko, kde chci mít nějakou databázi, mm, chci tam mít nějak provázaný ty tabulky například. Eh, zatím-- a chci zkrátka pracovat s nějakou jako větší business logikou. Mm, zatímco kdybych já chtěl jednoduchou landing page, svoji vizitku například, byť samozřejmě těch jednodušších projektů tady může bejt celá řada, ale je to takový pro nás asi nejstravitelnější, nejpředstavitelnější, tak proto my to tady často uvádíme jako ten, eh, jednoduchej projekt a myslím si, že je to jako skvělá start, skvělá jako startovací pozice, jak si ten web coding vyzkoušet. Tak pro tehle přístup bych já spíš doporučil to si to klidně vyzkoušet v tom, eh, komaklin, v tom zkrátka web coding nástroji, abych hnedka na první dobrou viděl, jak to bude vypadat a řekl si ok, chci jméno jinam, chci tlačítko jinam, chci tady větší fotku, chci tady větší moje jméno. Eh, chybí mi tady email a telefon a nevím, obor podnikání a, a tak dál.

Filip: Jasně

Jindřich: Takže asi ani jeden přístup, eh, není špatně, eh, ale dost záleží na tom, čeho já vlastně chci do-docílit.

Filip: Určitě jako jak ta appka má bejt složitá. Jako je pravda, že když jdeš dělat nějakou jako jednoduchou webovku, tak tam asi nějaký extrémně složitý zadání není potřeba. Prostě řekneš, co chceš, pak to upravuješ a je to v pohodě. Takže možná bych to jako rozdělil, jak jsi to popisoval ty. Chci něco jako velmi složitýho, tak pokud začínám s vibe codingem, tak bych si to nejdřív vyzkoušel na těch malejch webovkách teda, nepouštěl bych se hnedka do něčeho obrovskýho. To je asi jako pravidlo číslo jedna. Ale pokud už jsem si to jako ozkoušel, tak jako ve chvíli, kdy chci tvořit nějakou složitou appku, která má spousty stavů, spousty obrazovek a tak dál, tak bych šel cestou těch prototypů a toho kvalitního zadání. Pokud chci tvořit webovku nebo nějakou jako velmi jednoduchou appku, tak asi hnedka dávat to do toho Macally nebo Lovable, tak může bejt vlastně jako funkční, eh, cesta. Souhlasím.

Jindřich: S tím si myslím dost souvisí i to, co jsem říkal, jo, že, em, vývojáři těchhle jako vibe coding nástrojů tak už implicitně do toho našeho promptu schovávají i nějaký další jako jejich, eh,

Filip: Jo, jo, jo.

Jindřich: a prompty. A ty se třeba mnohdy jako velmi úzce jako týkají designu. Jo, takže to může být jako ten důvod, když já vezmu úplně stejnej prompt a dám ho do HubL a dám ho potom i do jako do jinýho nástroje, tak můžu mít relativně jako odlišnej výsledek. A

Filip: dně

Jindřich: jasně, může se mi lí-víc líbit tohle nebo se může víc líbit tohle. Mnohdy to je dost, eh, možná jako věc názoru nebo co tomu člověku zkrátka jako vy-vyhovuje víc. Jo, ale tohleto já třeba nutně nedostanu takhle dobrej výsledek v tom ChatGPT nebo v tom jako Claudeovi, protože ten nemá odladěnej ten systémovej prompt přesně pro to, co za nás dělají vý-vývojáři těchhle těch jako vibe coding nástrojů

Filip: Jo jo, tam jde fakt jako o ten prototyp, tam, tam ten design přesně jak říkáš, jako nebude, nebude dobrej. Nicméně pojďme se asi posunout dál. Eh, ve chvíli, kdy máme nějakou představu, co chceme tvořit, ať už jako tady v hlavě nebo nějakou jako nějaký zadání, teď potřebujeme, aby to ten agent vytvořil. A co je za mě jako velmi dobrý pravidlo, zase má svoje jako různý výjimky v různejch situacích, jít krok po kroku. To znamená nenechat tu aplikaci jako udělat hnedka na první dobrou, pokud, zase, pokud je to jednoduchá webovka, klidně ji můžeme jako udělat prv-- na, na první dobrou celou. Pokud je to ale nějaká složitější appka, tak jít krok po kroku a třeba obrazovku po obrazovce a vždycky to potom jako agentovi zkontrolovat, vyzkoušet, jestli to všechno funguje. Protože ve chvíli, kdy zadáte agentovi vytvořit velmi složitou appku jedním promptem, tak on si s tím nějak poradí, ale jako naseká pravděpodobně jako víc chyb po cestě a vy pak to odladit všechno, tak to bude jako extrémně náročný. Kdežto když pojedete kousek po kousku, krok za krokem, nevím, mám to do list aplikaci, tak nejdřív si udělám založení novýho toho to dočka, že, toho úkolu. to, supr, tak si udělám výpis, odladím ten výpis, že se všechno načítá, že to jako funguje. Když přidám novej, tak se tam přidá. Potom třeba přidám smazání a takovýdle věci a jdu vlastně jako krok za krokem a jsem schopnej ty chyby nebo te-to, co se vygenerovalo testovat a potom jsem to vlastně schopnej hnedka i opravovat. A to je za mě jako dobrej přístup, takovej ten jako bezpečnej, byť je pomalejší, aby se v tom člověk nezamotal. Souhlasíš?

Jindřich: Asi zase záleží. Já jsem zase spíš asi jako zastánce toho, že když si budu dělat opravdu jako jednoduchou aplikaci, tak prostě řeknu hele a popíšu veškerý ty myšlenky, který mám a pak teprve jakoby to ladím, ladím dál. Zas ten přístup podle mě, kterej jako vys-vysvětluješ ty, je spíš u těch trošku možná složitějších. Tam určitě jako dává smysl. Ale zase domnívám se, že pokud je člověk laik bez technického backgroundu, tak vlastně moc jako neví, jak to strukturovat a čím začít. Jo jasně, ty máš ty zkušenosti, že jo. Ty víš, jak se vyvíjí software a víš, že nejdřív bys začal založením, pak by si začal logicky výpisem a pak by sis velmi pravděpodobně, eh, pokračoval v nějakým bazání například a pak by si přidával další a další funkce. Jo, ale tohleto už, tahleta disciplína už může být pro leckoho jako složitější, eh, zjistit, čím teda vlastně začít, čím pokračovat a čím bych měl jako končit. Jo, takže tudíž když já bych to dělal tím způsobem, kterej popisuju já, eh, dostat se k tomu výsledku a pak to případně ladit, tak to opět zase pro ty lidi, který s tím zkušenosti nemají nebo nemají ty technický znalosti, tak ten přístup může být snazší

Filip: Mně se strašně líbí, jak jako i ten vibe coding je vlastně taková kreativní disciplína a vlastně jako neexistuje správnej postup. Jako že bys řekl: „Tohle je to správně, jak to jako dělat.“ A je to úplně stejný jako třeba i v tom profi vývoji, kdy prostě ten správný postup. Jsou různý jako metodologie, přístupy a je to jako na tom, jak každej si to umí představit, jakou má jako znalost a zkrátka co mu třeba i víc sedí. Takže my vám tady vlastně

Jindřich: Jo

Filip: takový jako dva pohledy, kde můžete si vlastně vyzkoušet ty oboje, co vám víc jako sedne a, a uvidíte. Je to, je to

Jindřich: Hele

Filip: tom,

Jindřich: jo, já si přesně myslím, že ty jsi řekl jako velmi důležitou věc a že to jako co vám bude vyhovovat. Jo, že my, i my dva i vlastně kdokoliv jinej, tak jako budu mít jinou představu o tom, jak to má fungovat a hlavně bude mít jako jinej vkus na to, co se mu bude líbit.

Filip: Rozumím

Jindřich: můj vlastní jako landing page, tak velmi pravděpodobně chci primárně, aby mně se líbila, že jo. Ne jako někomu jinýmu. No takže jako koneckonců to, s čím bych se třeba spokojil já, se nemusíš spokojit ty. A, a, a naopak. A ty bys šel třeba ještě do větší míry detailu nebo řešil třeba jiný věci, co já bych neřešil a ta-- a tak podobně. A takhle to zcela určitě bude mít jako i každej, každej zkrátka

Filip: Rozhodně. No tak když se posunem dál, tak taková univerzální věc, byť vlastně už trošku technická, ale zase Lovable nebo Makali. Tyhlety nástroje to budou dělat za vás. Tak je takzvaný verzovací systém Git. Není to, nepředstavujte si to nikterak jako složitě. Je to podobný, jako když se podíváte třeba v Google dokumentech a vidíte, kdo kdy jakej řádek toho dokumentu vlastně změnil a k jaký změně došlo, co se přesně změnilo. tady je to vlastně úplně stejný, jenom je to vlastně u toho kódu. A pokud používáte Makali nebo Lovable, tak ten agent to dělá za vás a vy se vlastně o to nemusíte moc starat. pokud používáte Claude Code a Cursor nebo nějaký tyhlety pokročilejší agenty, tak už jste pravděpodobně pokročilejší uživatel a v tu chvíli bych zainvestoval nějakej čas aspoň jako velmi hrubě pochopit, jak ten Git funguje a vy to nemusíte pak ty příkazy a tu zprávu psát ručně. Necháte to dělat agenta, on si s tím jako poradí, ale je dobrý vlastně jako trošku třeba tušit, jak si to ukládat, protože ta nejhorší věc, co vibe coder může zažít je, že máte super appku. Ono to funguje. Teďka dáte prompt tomu agentovi a on to celý nějakým způsobem rozbije. Najednou to přestane fungovat. Vy kliknete na tlačítko tady, tady se vám rozbije něco úplně někde jinde a nejste schopný to opravit. Ve chvíli, kdy používáte Git, jste v pohodě. Řeknete tomu agentovi: „Hele, to, co jsme dělali, prostě teď to jako zahoď, vrať to. Pojďme začít znova. Tohle nikam nevede.“ A jste dobrý, pokud ho nepoužíváte, no hodně štěstí.

Jindřich: A s tímhletím se zcela určitě dřív nebo později pot-potká jako každej, kdo, eh, bude něco wipecodovat. Ale zároveň k tomu, co říkáš tomu Gitu, tak leckdo by asi mohl jako namítnout, že Git je jenom, eh, v placený verzi například v Makali. No ale ono je to tak jenom částečně, že jo, protože když, eh, j-já si zaplatím tu jako placenou verzi v Makali, tak si můžu připojit svůj vlastní účet jako na GitHubu a tudíž ten mám já někde jinde ten zdrojový kód. No ale ve skutečnosti, když já zaplacený nemám, i když mám pro, pro zjednodušení, tak to já jak tam vidím tu historii verzí v tom mým chatu a můžu si tam rozkliknout tu, tu nabídku, ty tři tečky nebo co tam je, dát jako vrátit k tomuhle bodu, tak vlastně za tím v pozadí není nic jinýho než přesně tenhleten Git, ten verzovací systém. A já zkrátka když takhle budu pokračovat a, a jako něco rozbiju, nebude se mi to už líbit nebo se nebudu schopnej dostat zpátky, tak si vyberu akorát tam ten příkaz, kdy mi to ještě fungovalo a přesně tímhletím, že si tam rozkliknu ty tři tečky a dám vrátit se k týhletý změně, tak ten agent na pozadí udělá to, že všechno od tohohle toho kroku dál zahodí a mě vrátí do toho stavu, do toho požadovaného stavu, kdy mi to vlastně ještě fungovalo.

Filip: Jo, přesně jako ten Git v těchhle nástrojích tam figuruje vždycky. Takovej možná protip. Eh, ty jsi zmiňoval, že je to v tý placený verzi. To je vlastně to připojení na ten GitHub, jak jsi říkal. Tak vlastně můžete celou dobu vyvíjet v tý neplacený, řekněme, byť to má nějaký svoje další limitace, ale pokud by jedinou limitací pro vás byl ten Git, že si to chcete někam ukládat, se bát nemusíte. Můžete to vyvíjet v tý zdarma verzi. Samozřejmě platíte ty kredity vždycky a potom, až když ty kódy byste chtěli si vzít a odejít vlastně z toho nástroje, tak si můžete zaplatit tu pro verzi a nahrát to tam. Takže, eh, jako jak říkal Jindřich, nemusíte se bát, ten kód tam vždycky v tom Gitu žije a je zálohovaný. No a pokud používáte ty nástroje, jako je třeba Cloud Code, Cursor a tyhlety pokročilejší, zaprvý, jak jsem říkal, je fajn si trošku jako přečíst fakt jako obecný věci o tom Gitu. Dále potom vy jenom tomu agentovi řekněte: „Pojďme používat Git, udělej mi tady, jako ulož mi ty změny v Gitu.“ A on bude vědět, že má udělat takzvaný commit a přepnout se mezi nima a tyhlety jako odborný věci, do toho teďka nechci zacházet, ale zkrátka to, co chci říct je, že i v těchhle pokročilejších nástrojích, tak ten Git vlastně ten agent umí ovládat a umí tu práci pak dělat za vás a zároveň i vy tomu agentovi tím, že ten Git používáte, tak mu dáte jako mnohem větší pole působnosti v tom, že on vidí, co za změny se kdy stalo, kdo kdy to udělal a je to i pro něj příjemnější vlastně jako koukat na ten kód jako sérii změn než jenom obrovský množství kódu, který je jakoby v jednom Zkrátka chci říct Git určitě používejte, pokud jste ve webovejch těchhle těch builderech, Makali, Liveable nemusíte řešit, dělají se to za vás. Pokud jste v tady těch profesionálnějších, musíte na to myslet. Tak

Jindřich: Velmi pravděpodobně, eh, promiň, že ti do skáču, ale velmi pravděpodobně, eh, ten Git nebude asi ta, eh, limitace, proč, eh, jako začít platit nebo mít ten, ten placenej ho, eh,

Filip: Jasně

Jindřich: na, na Whiteboardu nástroj, tak velmi pravděpodobně to budou ty kredity, že jo. Protože

Filip: Rozumím

Jindřich: že je takový jako téma, který si zaslouží, abysme ho trošku víc, eh, jako probrali. A primárně jako jakým způsobem ty kredity asi šetřit a jakým způsobem zkrátka šetřit. Protože každej z nás se dřív jako nebo později dostane asi jako do situace, kdy ten projekt jako naroste a najednou já tam budu chtít nějakou jako drobnou změnu a ono mi to seže-sežere teda jako milion tokenů, eh, například. Což samozřejmě jako s rostoucí codebase nebo s rostoucím projektem, tak, eh, je to pravděpodobně jako nevyhnutelný. Ale jako za mě asi bych se vrátil k tomu, co jsem říkal na začátku. Čím přesnější prompt dám, tak tím jako snadnější pro toho agenta bude ta daná úprava. Tudíž opravdu, když já jako nebudu línej psát ten prompt, dám si s tím práci, jako jak to vysvětlit, tak jako zcela určitě v tom konečným důsledku já budu schopnej toho výsledku docílit za menší množství tokenů, nežli kdybych neustále musel dělat iterace a neustále mu něco, eh, vlastně dokola jako připomínat a dávat mu to jenom jako vágním zadáním. Eh, tudíž alfa omega, za mě dejme si skutečně, eh, záležet na tom promptu, kterej člověk píše.

Filip: Rozhodně. takovej krásnej doplněk toho promptu, tak když už vlastně jako máte nějakou aplikaci a chcete upravit něco, já nevím, máte webovku, jo a teď tam jsou různý jako podstránky jako já nevím, o mně, moje služby, rezervační systém, přihlášení k newsletteru atd. je vlastně fajn, když toho agenta nasměrujete, kde tu úpravu chcete dělat. Takže pro příklad chci upravit přihlášení k newsletteru. Nelíbí se mi to tlačítko, že když na něj kliknu, tak se mi vlastně jako nezobrazí hláška u úspěchu, že, že se to jako stalo. A vy buďto můžete jenom jako normálně říct: „Hele, tam kde je newsletter, tak mi jako udělej tady tu změnu." Ono to bude fungovat, ale pokud chcete jako ušetřit trošku kreditu, je vlastně fajn třeba v tom Makali otevřít si ten prohlížeč, dojít na tu stránku, kde ten newsletter, to přihlášení, to políčko je vy tam máte takovou šipečku a můžete vlastně jako vybrat takzvaný element. To znamená, že na to můžete kliknout a vy na to kliknete a pak tam můžete napsat prompt k tomu elementu a tam dáte: „Hele, když tady prostě dojde k zadání mailu, tak tady zobraz nějaký progress, prostě nějaké točítko, že se to jako děje." A není to jako dramatický ušetření kreditů, že najednou jste tady ušetřili tisíce kreditů, jako nějaký kredity ušetříte, protože je potřeba nad tím přemýšlet tak, že ty kredity to není jenom ta vaše zpráva, co jde dovnitř a ten výsledek, co jde ven, ale u těch agentů, tak tam je jako extrémní množství dalších věcí. Systémovej prompt, co vám tam, tam vlastně ten nástroj připravil, to se počítá do těch kreditů. To, že ten agent musí jít a musí to v tom kódu najít, kde vlastně ta stránka je, co jste tím vlastně jako mysleli, co vy chcete upravit. Opět zase čerpá to kredity. Stejně tak, když vlastně vám generuje ten kód, tak to čerpá kredity. Vlastně jako cokoliv, co ten agent udělá, tak jsou tokeny, v tomhletom případě rovná se kredity. A to je dobrý si vlastně jako uvědomit, že opravdu vy nečerpáte to jenom na tý konverzaci, ale děje se tam jako extrémní množství věcí okolo a všechno todleto stojí, vlastně ty tokeny rovná se vlastně kredity.

Jindřich: My jsme už o tom to mluvili vlastně v předchozím, eh, vlastně možná v několika předchozích dílech. Co je určitě fajn, tak je, eh, mít nějakej přehled o tom, kolik kreditů mi vezme jako jaká úprava. Teď samozřejmě nemyslím, eh, jako kolik přesně mi jako vezme co, ale abych dokázal zhruba jako odhadnout, jestli tadyhle to třeba teď vlastně budu chtít, jestli mě to bude stát jako deset tisíc tokenů, nebo jestli mě to bude stát jako dva miliony tokenů. To je samozřejmě velkej rozdíl. A, eh, typicky, kdy tam vlastně ty-ta cena nebo respektive ten počet tokenů jako poroste, eh, v rámci toho inputu i outputu, tak nějaká multimodalita, že jo, kterou jsme tady ne-nakousli i, i, eh, vlastně. Takže já tomu kódovacímu asistentovi, já mu můžu dát třeba i nějakou předlohu, jakej web třeba se mi líbí nebo například mu můžu dát nějakou fotku, kterou chce jako použít a podobně. A když mu dám tu předlohu webu, kterej se mi líbí, tak on musí nejdřív tu, tu, tu fotku, že jo, nahrát, jako zpracovat, zjistit teda, co na tom je a podobně. A obecně tahle takzvaná multimodalita, když pracuju s multimédii, tak, eh, to je taky hodně jako tokenově hustý. Takže když já použiju tohle, tak mi to sežere jako mnohem víc kreditů, nežli když já mu dám ten jednoduchej jako textovej, eh, prompt. Co tím chci říct? Pokud já budu chtít upravit nějakou drobnou věc, tak nejlepší je mu to skutečně dobře popsat textově, aniž bych mu musel dávat někde jako screenshot, co má třeba jak upravit, předělat a tak dále. Další z technik, jak, eh, si alespoň nějaký tokeny ušetřit.

Filip: Jo určitě. Není to vždycky tak černobílý, že jo. U nějakejch věcí člověk pak může narazit, že popsat to slovy a aby ten agent jako dohledal a pochopil, co vlastně chceme, tak může bejt složitější. Tak zase jako někde ten screenshot může bejt jako lepší cesta. podle mě se nedá jakoby univerzálně říct, že my bysme vám teďka řekli: „Hele, když prostě je to tahle situace, popište to slovy. Když je to tahle situace, použijte vlastně jako screenshot s nějakým třeba šipečkou." to o nějakým citu, kdy prostě vibe codujete častějc a častějc a pak dostanete takový ten jako pocit toho, co asi tomu agentovi sedne na ten danej problém líp. Takže tohleto podle mě přijde jenom pak jako s tou zkušeností. Tak. Eh, máš ještě nějaký tipy, co se týče šetření tokenů nebo se můžem posunout dál?

Jindřich: Klidně bych se posunul. Těch pár, několik částí nás ještě čeká

Filip: Rozhodně. Hele, mám tady ještě jednu drobnost, na kterou je vlastně super myslet a to jsou secrets. Eh, není to nic jinýho, než když máš prostě, nevím, chceš ve svý aplikaci se připojit, eh, na nějakou službu, nevím, třeba číst si data z Notionu nebo se chceš připojit na, nevím, Fakturoit, to může bejt super příklad, jo. Chceš si prostě ten svů, tu svoji aplikaci napojit na fakturační systém, potřebuješ použít tak zvanej API klíč. To není nic jinýho než jenom nějaký textový text, textový text. Prostě text, který vlastně je, jako nedává smysl, když se na něj podíváš, ale je to vlastně tak zvanej klíč, kterej ty pak můžeš použít pro tu komunikaci a vlastně je to důkaz, že ty seš ten, kdo může to propojení použít. Zkrátka aby se nestalo, že někdo, kdo bude znát, jak se jmenuješ v tom fakturačním systému, tak za tebe vytvoří ty faktury, abys to mohl udělat jenom ty. tady ty texty, tyhlety klíče, tak jsou jako extrémně citlivá věc. co je dobrý je, tak je vlastně jako nedávat do těch chatů tomu asistentovi hnedka, ale říct tomu asistentovi, j-já použiju ten příklad toho jako Fakturuoidu, jo, že prostě: „Chci si napojit Fakturoit.“ On řekne jako: „Supr, tady si, jsem si našel dokumentaci, jak to propojení funguje a budu od tebe potřebovat nějaký třeba dva údaje: Client ID a Client Secret. To je prostě to klientský ID, to najdeš prostě ve Fakturuoidu a Secret to je to, ten klíč, to heslo. A, no a t-ten agent, když používáš Makali nebo Lavable, tak on tě bezpečnou cestou vyzve, abys tyhlety zadal. To je tak, že ty mu to nedáš do toho chatu, on ti vytvoří dvě takový okýnka, ty je tam vložíš a on si to uloží do takzvanýho .env souboru. Zní to možná trošku složitě, ale je to nějakej soubor, kterej se jako z, se kterým se pracuje velmi obezřetně a tam se tady ty citlivý údaje ukládají. Makali, když se podíváš do záložky, myslím, že se to jmenuje Secrets, najdeš tam tady ty svoje klíče a je dobrý k nim fakt takhle jako přistupovat a zbytečně je nedávat do toho chatu. Pokud používáš Cloud Coda nebo Cursor, tak obdobně, řekneš mu: „Chci tohle připojit.“ On řekne: „Supr, vytvořil jsem ti tady teďka ten soubor .env, otevři si ho u sebe na počítači a vlož mi tam tady ty hodnoty.“ Takže to taková zmínka. Tyhlety klíče je fajn nikam moc jako nesdílet a bejt k nim obezřetnej, protože to ten důkaz toho, že vy můžete ovládat tu službu a když by vám ten klíč utekl, tak potenciálně někdo ho může zneužít a může vám tu službu jako unýst. Může tam prostě udělat nějakej čurbes.

Jindřich: Je důležitý asi i říct to, že, eh, s těma secrets tak Makalii pracuje implicitně a mnohdy třeba já to ani nemusím zpozorovat. No takže, eh, typicky, typickej příklad z praxe, co se mi teď vlastně nedávno stal. Tak mě jeden kamarád, kterej je jako vynikající videomaker, tak on si dělal tu svoji jako landing page, svoje CRMko a podobně a poslal mi to jako v Makalii jako review, abych se jako na to podíval a abych poslal nějaký DNSka a podobně. No a on třeba jako ne-například pravděpodobně jako neví, co to je env, že jo, neví, co to jsou secrets a podobně. Byť třeba to může tušit, ale neví, že s tím má pracovat. No ale on si tam jako implementoval, že chce, aby ta služba jako měl tam nějakej rezervační systém, aby odesílala e-maily, tím pádem na pozadí je tam napojenej Resend, kterej on vůbec řešit nemusel. Vyřešilo to za něj Makali. Tím pádem tam musí bejt nějakej jako API klíč nebo, eh, zkrátka nějakej hash v tom v secrets. Eh, a implicitně, když já jsem se potom podíval v Makalii, že jo, do těch záznamů, tak tam těch secrets bylo asi pět nebo šest různejch služeb, který jako on z jakýhokoliv důvodu používal, ale nemusel on je nikde generovat, nemusel se registrovat do těch služeb, nemusel on nikde kopírovat ty secrets a předávat je do Makalii, ale i tohle všechno tak to Makali celý jako udělalo za něj. Takže je to zase nějakej aspekt, na kterej vlastně myslej vývojáři těchhle těch jako web codingovejch nástrojů, aby alespoň jako uchovávání těch secrets bylo podle nějakejch jako best practices, aby to bylo právě bezpečný a aby i ten uživatel, kterej jako to neví, že si to musí uchovávat bezpečně, tak aby to uchovaný bezpečně měl. Takže ne vždycky, eh, vlastně to musí vůbec ten uživatel, kterej si vytváří ten web, řešit

Filip: Yes, rozhodně. Jenom je vlastně za mě fajn jako tušit, že tam nějakej takovejhle mechanismus je. Pojďme se posunout dál. Eh, další věcí, a to už se jako trošku týká, ale spíš netýká těch webovejch builderů, ale spíš těch nástrojů, jako je Cloud Code a podobný, tak jsou různý MCP servery. Jsou to vlastně jako nástroje, který ty si můžeš připojit do toho svýho agenta a nějakým způsobem mu ulehčit tu práci. A může to bejt nebo takhle ještě jako to MCP, abysme to tady trošku odtajnili. Je to zkratka, je to model kontext protokol a já to vždycky jako vysvětluju lidem. Je to vlastně USBčko mezi tím agentem, tím nástrojem a mezi tím jiným nástrojem, kterej chci připojit. Takže například Cloud Code mi programuje, tak to je ten jeden nástroj a chci do něj připojit, eh, Figmu. To může bejt zdroj designu, jo, že prostě grafik mi tam nakreslil nebo já jsem si tam nakreslil, jak by to mělo vypadat a todleto chci propojit, tak to propojuju skrze to MCP. pak ještě nějaký alternativy, například jako CLI, který je jakoby trošku efekt-efektivnější a nestojí tolik tokenů na to její komunikaci, do toho bych možná teďka nezabředával, ať to necháme trošku jednodušší. Zkrátka MCP je tady to propojení a já vždycky jako klientům říkám: „Pokud máte nějakej nástroj a přislíhnete se, že abyste jako naprogramovali nebo abyste cokoliv vlastně s tím agentem udělali a potřebujete a děláte to, že otevřete si svůj nástroj, zkopírujete data, vložíte je do agenta, ten něco udělá, výsledek vezmete a vložíte ho zase do toho nástroje, tak dost pravděpodobně děláte zbytečnou práci a můžete to napojit přes to MCP a dá se to jednoduše vyhledat tak, že dám prostě do Googlu název nástroje MCP a podívám se, jestli to připojení vlastně má a-a jak funguje a můžu si to takhle propojit.

Jindřich: No ale tady už jsme zase asi trošku advanced. Eh, MCP primárně budou určitě řešit ty lidi, kteří používají CodeCode, GitHub Copilot a podobně. A jako pro celou řadu věcí, že jo, například když se budu chtít, em, připojit k sobě do počítače kvůli nějakým souborům nebo, eh, Figmu, co sis zmínil, si myslím, že je, je jako skvělej příklad. Další příklad, který já uvádím často, tak je jako Playwright jako testovací nástroj, kterej udělá to, že mi vlastně na pozadí otevře prohlížeč a tu aplikaci za mě jako prokliká, jestli někde nespadne, jestli nevykazuje chyby v konzoli a podobně. Pokud jo, tak samozřejmě ten agent to dál, eh, jako opraví. No ale pokud já používám jeden z těch jako webových builderů, Webble, Bolt, V0, Makali, cokoliv, tak tam už to do jisté míry je vlastně řešený za mě. Co se týče i těch testů, velmi pravděpodobně, vlastně ani nevím, jestli do Makali můžu napojit Figmu, mě teď napadá, to možná budeš, eh, jako vědět, vědět víc, líp, ale pokud, tak už to bude jako nějaký implicitní řešení, který bude integrovaný v rámci toho konkrétního nástroje, kterej já budu využívat. Tudíž jakmile by někdo začal řešit jako MCP, tak pravděpodobně už bude trochu pokročilejší a bude si chtít vyzkoušet, eh, nějaký trochu pokročilejší nástroje a pravděpodobně už tedy nebude, eh, využívat ten, ta, ty webový nástroje pro VIP coding, který jsme tady zmínili

Filip: Jo, já si vlastně nejsem jistej. Myslím, že do Makali se to napojit už pak nedá. Ale zase tys to zmiňoval vlastně jako všechno, co pro ten vibe coding základní tam máš, tak- nebo co potřebuješ, tak tam máš. Eh, se možná zase posunout o kousíček dál, ať nezabředneme v těchhle pokročilejších věcech, protože to má bejt že jo přesně takový ten jako úvod, jak začít. Tak jedna z věcí, na kterou pravděpodobně jako dřív nebo později narazíte, je, že chcete, aby ten web byl hezkej, aby ty tlačítka vypadaly dobře, byly použitelný. Zkrátka jakoby to, co vytvoříte, tak chcete, aby fungovalo dobře. Zase ty webový buildery, jako je Makali, Lovable a podobný, tak to vlastně jako řeší do jisté míry za vás. Oni to řeší tím, že oni tam dají nějaký vlastně komponenty. Říká se tomu UI komponenty a není to nic jinýho, než že někdo dřív prostě přišel a řekl: já si myslím, že tlačítko vypadá prostě dobře takhle a takhle vypadá dobře vstupní boxík na text a takhle vypadá dobře profilová fotka uživatele jako prostě že nějaká kulatá.“ A někdo to prostě jako předdefinoval dopředu. No a vy, když si pak něco vibe codujete a používají se tady ty komponenty, tak oni se třeba jenom upraví, že se změní barva, změní se třeba velikost toho tlačítka, změní se zaoblení rohů. Ale ten princip toho, jak to tlačítko je udělaný, tak vlastně už, už tam je zakořeněnej a používá se a vám to pomůže docílit jako lepší konzistentnosti a i lepší vlastně toho, toho výsledku. Protože ten, kdo ty komponenty tvořil, tak pravděpodobně měl nějakej jako základ toho, jak by se ty prvky měly chovat a co jsou takový ty takzvaný jako best practices, ty nejlepší přístupy. Takže to vlastně jako vytvořil za vás. Webový buildery, už to tam je. Pokud používáte třeba Claude Coda a chcete takovýdle věci používat, tak není nic jednoduššího, než když jim řeknete, eh, tomu agentovi: „Hele, používej pro komponenty třeba, eh, já nevím, jak se to čte, ale to shadcnui,

Jindřich: Hm.

Filip: shad, nevím.

Jindřich: Hm

Filip: že to je od Vercelu. Jsou to prostě jako hotový sady komponent a tady těch jako component libraries podle toho to vlastně můžete vygooglit si. Takže existuje celá řada a můžete si třeba vybrat nějaký, který se vám líběj. Zase jenom tomu agentovi řeknete: „Hele, pojďme používat tady to.“ A on vám to do toho projektu dostane a vy za odměnu dostanete vlastně jako konzistentnější to uživatelský rozhraní.

Jindřich: Řada začátečníků to asi řešit nebude tohle, ale třeba bych jako doporučil tak, em, vyzkoušet si klidně několik těch webových builderů, jo, protože každej k tomu přistupuje trochu jinak a já jsem to před nějakým časem testoval. Já jsem si, tady jsem se registroval třeba do osmi služeb nebo do kolika. Odladil jsem si ten můj projekt, co jsem chtěl, eh, nejdřív s Claudem, s tím chatovacím asistentem. Takže přesně jsem řík-, přesně jsem dělal ty kroky, který tys tady popisoval jako hele, chci, chci tohle, támhleto. Trošku jsem samozřejmě mu dal ty technický termíny a zároveň jsem mu řekl: „Hele, pojď mě vyzpovídat a chci, aby výstupem bylo to PRD, že jo, ten Project Requirement Document, což se, jsem k němu doiteroval a pak jsem ho zkopíroval a jedna ku jedný jsem to dal asi do těchhle těch šesti, sedmi, osmi nástrojů, do kterejch jsem se registroval a ty výstupy jsou skutečně odlišný a každýmu se může líbit něco jinýho, jo. Mně třeba u jednoho se mně hodně líbily ilustrace, který byl skvělej, jo. U dalšího se mi třeba líbil, jak, jakej zvolil jako layout. U dalšího se mi lí-se mi lí-líbily ty použitý jako UI komponenty, který tam byly. A opravdu jako řada z těch jako nástrojů nebo spíše z těch výstupů z těch jednotlivých nástrojů tak se lišily. A úplně stejně bych to doporučil i, eh, vlastně posluchačům. Zkrátka registrujte se tam. Registrace je v dnešní době jenom zadání emailu, přijde potvrzovací kód na email a vlastně vyřešeno. Takže, takže je to hlavně jednoduchá práce. A tohle ten stejnej prompt já můžu zkopírovat do těch několika nástrojů, protože zpravidla mi dávají nějaký jako kredity zdarma. Jo, takže když se registruju někde, mám třeba tři miliony, dva miliony, pět milionů kreditů, nevím a můžu to vyzkoušet a můžu si vybrat vlastně ten výstup, kterej se mi bude, eh, líbit nejvíc a nebo s jakým nástrojem se mi bude nejlíp pracovat nebo kterej se mi bude nejlý-nejvíc jako líbit,

Filip: Mhm.

Jindřich: eh, jako vzhledově ten, ten nástroj, kterej pro mě bude nejvíc uživatelsky přívětivej a tak. Takže i tohle může být jako faktor, jak se rozhodnout pro ten webovej builder, kterej využít. Em, anebo samozřejmě ten druhej přístup může bejt takovej, že to vůbec nebudu řešit. Registruju se tady a zkrátka taky docílím toho výsledku, kterej chci. Takže možná i jeden z těch pohledů může bejt takovej, kterej už jsme tady řešili v epizodě s chatovacíma asistentama. Nemusí jít nutně o to, jakej nástroj si vyberu, ale o to, jak se s ním naučím pracovat. A platí to jak u chatovacích asistentů, platí to i u webovejch builderů, u generátorů, nevím, obrázků a dalších AIčkových nástrojů

Filip: A hlavně je to taková ta klasická věc. Nenechte se tím ne-nekonečným výběrem, kterej jako existuje, vlastně jako paralyzovat, abyste nakonec neudělali nic a pořád budete hledat: „Ty jo, tenhle nástroj je o krapék lepší, protože používá jiný komponenty. Vypadá to trošku líp, ale tenhle má zase, nevím, lepší databázi a tady ten zase jako posílá hezčí maily a td a td. Prostě jako důležitý je začít něco vytvořit a tyhlety detaily si troufnu tvrdit, jakoby když děláte vibe coding tímhletím jako jednoduchým způsobem přes ty jako web buildery, tak je dobrý jako tak do detailu řešit. Samozřejmě je fajn si udělat nějakej research, co použijete na začátku, ale jako nenechat se tím sežrat. Já často se setkávám s lidma, který vlastně ještě nevytvořili ani svoji první appku, ani svůj první web, ale strašně debatujou o tom: „No já nevím, jestli ten Loveable nebo Makaly nebo ještě Google má to AI Studio a teď jsem jako tady slyšel, že tohle je lepší a teďka Google vydal ještě Antigravity, tak já nevím, jestli zkusit to.“ Ano, v určitý úrovni to dává smysl řešit, ale na začátku netrápil bych se tím.

Jindřich: Ono je hlavně hodně těžký se v tom světě dnešního jako marketingu zorientovat, že jo?

Filip: se to

Jindřich: Oni,

Filip: že

Jindřich: no jasně, to je samozřejmě jako další věc. Snad kdybych každej den měl jako sledovat novinky, tak člověk jako ani nespí a hlavně nedělá nic jinýho.

Filip: Práve

Jindřich: Ale to, že někdo někde řekne, že vyšlo něco novýho a že to je lepší v něčem jiným, tak to vlastně vůbec nemusí bejt pravda. Akorát to může bejt jako marketingová masáž, jo. Přece jenom koneckonců každý z těch společností jde o to mít co možná největší počet uživatelů, co možná největší počet platících uživatelů. Logicky a ten, ten, ten cíl jejich je jako skutečně stejnej. No tak takže, uh, určitě ten tip je vyvarovat se důvěře vůči tomuhle marketingu. Trošku se obrnit hlavně, ale zkrátka to, co vyzkouším, tak, uh, no zkrátka vyzkoušet hlavně něco a pokusit se doručit ten můj výsledek, kterej mám v hlavě, tu webovou aplikaci, kterou mám v hlavě nezávisle na tom, jakej nástroj zvolim

Filip: Ty jsi mi nahrál teďka úplně krásnej oslí můstek. Doručit appku. Tak to je jako, je super, že jsem si to vytvořil, ale teď jako jak ji dostanu, že jo, k těm lidem, k těm kamarádům, kolegům nebo prostě já bych se s ní jenom pochlubil. To je prakticky jedno. Potřebuju ji dostat na internet. už se jako opakujem asi po stý. Pokud používáte webový buildery jako je Loveable nebo Makali, tak není nic jednoduššího, než tam kliknete na takový tlačítko Publikovat a ono vám to dá vlastně odkaz, který vezmete, pošlete ho kamarádům a oni vám můžou říct, jakej super nástroj jste vlastně jako vytvořili a je to super. Máte to samozřejmě na doméně, třeba jako XYtdddm tečka makali tečka com nebo něco takovýho. Takže to není hezká doména, ale pro nějaký otestování, tak je to jako nejjednodušší cesta. Potom, to už Jindřich vlastně zmiňoval, tak si můžete přes tyhlety nástroje buďto napojit doménu, to se dělá přes takzvaný jako DNS záznamy. Zase trošku pokročilejší věc. Ty, co budou vědět, tak si to můžete vygooglit. Není to nic složitýho, jenom tam, kde jste si koupili doménu, tak změníte pár číslíček, ale nepůjdu teďka do detailu tady. A nebo si přes ty nástroje tu doménu můžete vyloženě koupit. Takže v Makali nebo Loveblu si vyloženě kliknete, hele, chci si to prostě zakoupit. Vy si to zakoupíte a máte vyřešeno. A pokud ale používáte nějaký jiný nástroje, který jsou třeba jako právě ten CloudCode nebo Cursor, no tak v tu chvíli, tak vy si to někde musíte zahostovat a tam jsou pak takzvaný hostingový služby a to je třeba Vercel, Digital Ocean. Pu, ježišmarja, teď jsem, normálně jich znám jako tisíce a teď se mi to jako vyhořelo z hlavy. Znáš ještě nějaký, Jindro?

Jindřich: A řada jich půjde, že jo, nevím,

Filip: Jo.

Jindřich: WEDOS

Filip: Jo,

Jindřich: například, Hetzner

Filip: Ano, jo, Hetzner, ano. Takže vlastně můžete použít tady ty. No a třeba ten Vercel je super v tom, že když, eh, tam prostě jenom připojíte ten váš GitHub repozitář, jasně, obnáší to zase ten Git, ale pokud jdete cestou těchhletěch jako agentů, tak je fajn, jak už jsem říkal, o tom něco vědět. Tak vy si jenom na jeden klik to napojíte a vlastně on se postará o to publikování toho webu a zase máte tam tu doménu k dispozici.

Jindřich: Je to vlastně vždycky, jako hezky vysvětluješ, jo, ty dílky jako puzzle. Když mám tady nějak jako webovej, eh, jako projekt, tak to není jenom o tom, jako mít ten kód, že jo, ale je to přesně o tý databázi a vo nějaký jako security, autentizaci a hostingu a tý doméně, kde, a veškerý tyhlety věci se musej jako nějak propojit. Takže to, co jsi teďto trochu jako zmiňoval, tak to je třeba část toho, když já si vygeneruju ten kód, udělám ten vibe coding a mám ten zdroovej kód někde například přes Cloud Code, že jo, tak ten hosting někde musím řešit a tu doménu někde musím řešit a musím tam teda pravděpodobně změnit DNS záznamy, že jo, abych to měl jako na tý svý doméně, kterou si koupím třeba někde jinde. A když jsem u těch, jako v těch webovejch builderů, Makale, Webble a tak dál, tak, eh, tam ty to řešej za mě, jo. Takže ty, vlastně oni musej řešit něco podobnýho, musej řešit ten deployment, ale dělaj to všechno za mě. Takže pro mě je to jednodušší v tom, že já si akorát kliknu, jasně, chci to ven, chci tam, eh, chci to někde hostovat, chci tam připojit, eh, tuhle tu doménu a tak podobně. Takže ta obrovská výhoda v těchhlech, em, webovejch builderech je taková, že to mám jako whole package. Já udělám ten projekt a jsem schopnej ho opravdu deliverovat a někde ho mít online vystavenej tak, abych ho například jako mohl někomu, eh, na internetu poslat nebo aby ho mohlo využívat víc lidí. Zatímco pokud já budu používat Cloud Code a podobně, tak tam mě ještě čeká tenhleten proces právě toho deploye, hostingu a tak podobně, abych to mohl používat nebo abych to mohl, eh, zkrátka někomu poslat. Takže overall, eh, webovej builder spíš pro vyšší začátečníky, Cloud Code a další, eh, nástroje, další agenting nástroje, tak asi pro trochu pokročilejší uživatele.

Filip: Rozhodně. No tak co tady máme dál? Chceme jít do testování s Playwrightem. To už jsme tady naznačili. Přijde mi to vlastně jako takový dosti pokročilý. Asi bych to dál jako neřešil. To už prostě jenom ta možnost, že vlastně ten agent si to sám otestuje. Nicméně máme tady takzvaný udržitelný vibe coding nebo jak to dělat jako udržitelně, vám to zkrátka fungovalo. No a za mě to pravidlo nebo ten přístup tak je takovej: zaprvý, přidávejte ty věci postupně, přemýšlejte nad tím, jak to vlastně jako tvoříte a testujte po sobě. Jako vždycky, když něco přidáte, tak se snažte to otestovat ze všech možnejch stran, aby se pak zkrátka nestalo, že najednou přijdete a najednou ty data nebudou prostě fungovat tak, jak vy chcete. Nebo ta aplikace nebude fungovat tak, jak vy chcete. Zkrátka testujte to po malejch kouscích a tvořte to zadání. Napadej tě ještě nějaký rady na závěr, Jindro?

Jindřich: Já si myslím, že jsme to takhle fakt jako udělali jsme kolem toho takovej pěknej jako wrap up. Myslím si, že by to co-celou řadu jako lidí mohlo inspirovat. A hlavně, jestli opravdu bych chtěl nějakou hlavní message, kterou si z tohohle dílu odnést, tak je to opravdu nebát se toho. Jako vyzkoušet si to, protože je to opravdu hodně jednoduchý a zvládne to i člověk, kterej, eh, používá na počítači jenom e-mail. Opravdu registrovat se na tu službu, ona vás jako skvěle navede. Oni tu UI mají udělaný tak, aby jsi viděl, ok, tady to teda popiš, tady na pravý stránce já ti zobrazím ten web a jestli to chceš publikovat, tak tam vpravo nahoře klikni na to tlačítko Publikovat. Jo, takže opravdu žijem v krásný době, protože někdo nám dává takovejhle krásnej nástroj, kterej nám celej ten proces opravdu zjednodušuje. Jo, takže je to vlastně o tom mít jenom ten nápad, co já chci jako zítra nebo co já chci udělat. Ideálně pojďme začít jako něč-něčím jednodušším, ale měla by to bejt asi ta myšlenka, kterou si tady snažíme předat. Opravdu nebát se toho. Vyzkoušejte to. Každý z vás to zvládne. Někdo bude mít lepší projekt, někdo horší projekt, jasně, ale obecně, když budete mít dostatek kreditů, tak se dostanete k tomu výsledku, se kterým přinejmenším budete spokojení. Takže s radostí do toho. A samotnýho mě zajímá, co se vám podařilo vytvořit. Takže určitě, když se dostanete do zdárnýho cíle a publikujete pak ten projekt, tak se nám nezapomeňte s ním pochlubit

Filip: A hlavně je dobrý mít na paměti vibe coding. Je to schopnost jako každá jiná a čím víc budete vibe codovat, tak tím budete se stávat lepší. Dostanete pro to ten cit. Takže není za mě jinej přístup, než to prostě zkoušet a ladit a vlastně zlepšovat se v tom. To je za mě

Jindřich: Jasně. Hm, ono koneckonců my bysme mohli jít ještě jednak jako do mnohem většího detailu, ale zároveň bysme se mohli i vyhnout nebo trochu uhnout třeba jako do jiných sfér, že jo? Protože existují i nástroje, který nám pomáhají vibe codovat mobilní aplikace například, nebo existují nástroje, který nám pomáhají vibe codovat jako desktopový aplikace a, a tak podobně. Nebo dokonce existuje i nástroj, se kterým já můžu vibe codovat design ve Figmě, že jo. A vlastně jako celá, celá řada věcí a celá řada jako technologií, který nám ten vibe coding usnadňujou, nebo respektive který nám usnadňujou ten vývoj toho jakýhosi softwaru. Eh, to, co jsme si tady zmínili dneska, byly spíš webový aplikace a byly to samozřejmě spíš základy. Tak doufejme, že to někoho z vás inspiruje.

Filip: Super, tak já si myslím, že skvělý deal. Dejte nám vědět do komentářů, jestli máte třeba nějaký otázky, jestli jsme zbytečně někde šli do hloubky, jestli jsme třeba používali pojmy, který nic neříkají. Zkrátka abysme dostali nějakou zpětnou vazbu, jak co nejlíp ty věci komunikovat. Takže budem rádi za jakýkoliv komentáře a že jste nás poslouchali nebo se dívali.

Jindřich: Jo, díky moc. Vidíme se u dalšího dílu. Eh, určitě nějaký tipy se nám budou hodit. Dokonce už, eh, nám na e-mail přišlo, že jo, několik, několik tipů, čemu bychom se třeba měli věnovat nebo jaký, jaký díl bysme mohli udělat. Takže jsme rádi, eh, že vás to baví. A pokud byste nás ještě nějak chtěli podpořit, tak budeme rádi, když nás budete, eh, sledovat na Instagramu. Pokusíme se tam teď dávat víc contentu. Zkusíme nějaký ještě další informace, který by se vám mohly hodit. Trochu se zaměříme i na nějaký věci tady trochu z backstage, jak třeba ty díly vznikají, jak připravujeme a v neposlední řadě se tam vždycky, eh, dozvíte, jakej vyšel poslední díl. Tak díky moc, díky za vaši podporu a vidíme se my, Filipe, u dalšího dílu a s posluchačema se slyšíme u dalšího dílu.

Filip: Budu se těšit jak na tebe, tak i na naše posluchače. Tak se mějte krásně. Ahoj

Jindřich: Díky, čau.