Vibe coding speciál
Slyšíte to všude kolem sebe, ale ještě jste vibe coding nezkusili? Nechť je tohle vydání inspirací. A nebojte, zpravodajství z posledních dvou týdnů v AI máme taky.
Vydání #88:
Vibe coding: Vše, co potřebujete vědět pro orientaci a svůj první vibe kódovaný projekt. Speciál sepsal náš Michal Jirák.
Přehled novinek v AI jsme tentokrát dali do separátního postu.
“Vibe coding otevírá dveře lidem s nápady, vkusem a trpělivostí.”
Když Andrej Karpathy nazval AI asistovaný vývoj software “vibe codingem”, souborně označil něco, co má dnes dva proudy, přicházející z opačných stran a od zcela jiných uživatelů.
Dva proudy
Jedním proudem jsou vývojáři, kteří s LLMs dostali do rukou mnohem chytřejší našeptávač, než si uměli představit. Čím dál tím více jim také nahrazují designéra, který jim rozkreslí přesné UI. Copilot nebo Cursor by dnes prostě měly být každodenním parťákem každého vývojáře. Už teď je zvýšení efektivity obrovské, a to zatím stále bojujeme s velkými omezeními či obavami o bezpečnost.
Druhým proudem jsou tvořiví lidé s nápady, kteří by se dříve bez vývojáře a grafika neobešli. Nemohli by vůbec začít. Dnes se mohou dostat k funkčnímu prototypu, aniž by uměli programovat nebo věděli, co je to Figma. Musí vědět, co chtějí vytvořit, nemusí ale vědět jak. Právě tento proud přivádí od loňského podzimu ke tvorbě software milióny nových lidí a už dnes vznikají produkční aplikace se 100 % kódu napsaného AI.
Z těchto dvou směrů také přicházejí různé vibe coding nástroje:
Copilot, Cursor, Windsurf či Augment Code by dnes měly být denním nástrojem každého vývojáře jako parťák, který poradí, nebo kolega, který napíše celý kód a někdo ho musí “jen” zkontrolovat.
Bolt.new, v0 či Replit umějí vytvořit celou aplikaci jen přirozeným jazykem, bez znalosti programování. Jsou skvělé pro ty, kteří chtějí myšlenku co nejdříve vidět funkční a menší aplikace i vydat bez jediného vývojáře.
Jednu takovou jednostránkovou aplikaci na ukázku jsme pro vás rovnou vytvořili. Konkrétně evoluci vibe coding nástrojů. Podívejte se na časovou osu i prompt, na jehož základě v Boltu vznikla. Je na ní mj. hezky vidět, jak je celý tenhle segment mladý.
Kam směřujeme?
Ať už k vibe codingu přicházíte z jakékoliv strany, vše míří do jedné budoucnosti. Z dříve oddělených rolí jako product, design a dev míříme zpět do mnohem všestrannější role, která má k dispozici AI pro doplnění svých slabších stránek.
Zmizí také odlišení jednotlivých nástrojů - všechny budou umět pracovat s existujícím zdrojovým kódem libovolného rozsahu, dělat změny pomocí textu, navrhovat vlastní testy či hlídat si bezpečnost. Vibe coding jako označení už nebude potřeba - bude to prostě software na tvorbu software.
V čem je vibe coding super? Kde jsme v praxi dnes?
Skvělé na zero-to-one vývoj - z designu udělat první verzi produktu k otestování na uživatelích.
Díky integrovaným LLMs umí využít i obecné znalosti. Pokud budete chtít udělat jednoduchou kvízovou aplikaci, nemusíte dodávat otázky a odpovědi - poprosíte přímo nástroj, aby nějaké vymyslel.
Skvělé na rutinní úlohy, které už někdo implementoval tisíckrát a zabírají většinu času programátorů - login, zapomenuté heslo, formulář nastavení uživatele, napojení na OpenAI API, …
Prototypování nových funkcí ve stávající aplikaci - debatovat nad funkčním prototypem místo popisů, zadání nebo screenshotů, “jak to mají jinde”.
Skvěle jde vibe coding appkám práce s open source kódem, dobře zdokumentovanými API a známými knihovnami, protože jsou součástí tréninkových dat internetu - to platí i pro elementy, jako jsou ikony ze známých design systémů.
Některé skvělé integrace a funkce:
Ze screenshotu nebo Figma návrhu vytvořit funkční aplikaci.
Discussion/Chat mode - diskuse nad kódem a dalším plánem, vyjasnění postupu bez změny kódu.
Inspector - v náhledu aplikace označíte element, který chcete měnit, a tím omezíte scope pro AI.
Automatické vytvoření databáze, autentifikace uživatelů (nejčastěji přes Supabase).
Deploy webových aplikací na vlastní doménu (Bolt například přes Netlify).
V0 community - knihovna projektů vytvořených s v0, které můžete použít jako výchozí bod pro svou aplikaci a dále ji rozvíjet - možná vizuálně zajímavější budoucnost GitHubu?
Expo - vývoj mobilních aplikací přímo ve webovém prostředí.
Slabé stránky: co musí dodat člověk?
Nepojme komplexní kód. Nástroje jako Cursor či Windsurf věnují hodně energie výběru těch částí kódu, které vloží do kontextového okna, ale ve velkých aplikacích je stále vibe coding omezený. CTO Graetu Tomáš si zde chválí Augment Code.
Neumí vytvořit originální kód. “Make me an Airbnb clone” funguje, protože někdo už Airbnb vytvořil, je notoricky známé a navíc není technologicky nijak revoluční. Komplexnější zadání je potřeba rozpadnout do pochopitelnějších částí.
Připravte se na technologický dluh - díky rychlým iteracím a větší pozornosti zaměřené na výsledek může být kvalita kódu méně konzistentní. Stejně jako když kód píše více lidí s různou senioritou. Věnujte se refaktoringu průběžně, AI vám s tím pomůže.
Vibe coding svádí ke zcela jinému chování - rychle promptovat, rychle testovat, rychle předělávat. Je to správný směr, ale může se to zvrhnout v přidávání funkcí bez rozmyslu. Nenechte se svést rychlostí a nenabalujte zbytečné funkce jen proto, že je to snadné.
Rozumět zdrojovému kódu je stále výhoda - občas AI řešení překomplikuje, a že jste si v zadání úplně nerozuměli, se dozvíte až po mnoha iteracích, ze kterých se špatně vrací.
AI skončí občas ve slepé uličce plné errorů. Jakmile to ani napotřetí neopraví, vraťte se zpět k funkčnímu kódu a zkuste to jiným promptem.
Nejlepší je si to zkusit: pár tipů na začátek
Zkuste si jedním promptem vytvořit hru svého dětství - pong, tetris, snake nebo candy crush. Určitě vás napadne, jakým směrem je dále zlepšit (Bolt/Lovable/v0).
V Bolt.new si vytvořte vlastní blog s napojením na databázi, spusťte si jej klidně na vlastní doméně přes Netlify.
Do Magic Patterns si zkuste vložit screenshot třeba detailu produktu ze svého oblíbeného eshopu a promptem změňte styl na Amazon.
Najděte si ve v0 community nějakou aplikaci a doplňte pár nových funkcí.
S Replit Agentem si vytvořte doplněk do Chromu, který se vás při každé návštěvě Facebooku zeptá, jestli se raději nechcete jít projít.
Znáte nějakou aplikaci, kterou často používáte a je přeplněná reklamami? Naprogramujte si svoji - s téměř nulovými náklady na vývoj ji pravděpodobně budete moci dát k dispozici zdarma.
Když si nebudete jistí, jak dál, zeptejte se AI přímo v daném nástroji - jsou na to připravené.
… nebo se rovnou přidejte do 30denního hackathonu.
Hlavně se ale pochlubte, jak vám to šlo, třeba na Twitteru s mention pro @mitoncz :)
Zajímají vás příběhy za vibe coding nástroji? Lenny’s Podcast postupně mluvil s většinou a je to skvělý pohled pod pokličku: v0, Windsurf, Lovable, Bolt.new, Replit.
Chcete si přečíst ještě aktuální zpravodajství z AI? I to jsme pro vás připravili.
👍/👎 Dejte nám vědět, jak jste s novým vydáním spokojení.
Chcete psát newsletter s námi? Hledáme full-time vedoucí/ho i občasné přispěvatele.