Vibe coding pro začátečníky: jak začít krok za krokem

Vibe coding pro začátečníky se scvrkne na pět kroků: vyberte nástroj, který aplikaci spustí za vás, popište jednu malou aplikaci běžnými slovy, vyzkoušejte ji jako uživatel, žádejte vždy jednu opravu a publikujte, až to bude fungovat. Programovat umět nemusíte. Tento návod prochází každý krok na skutečném prvním projektu, s přesnými prompty, které napíšete, a chybami, které téměř každý začátečník dělá v prvním týdnu.

Pokud chcete nejdřív pozadí, odkud se ten pojem vzal a proč se o něm lidé přou, přečtěte si co je vibe coding. Tato stránka je praktická část.

Co potřebujete, než začnete

Méně, než si myslíte:

• Prohlížeč a účet u nástroje pro vibe coding. Začátečníci by měli zvolit AI nástroj pro tvorbu aplikací, který kód napíše, spustí a zahostuje, spíše než asistenta pro kódování, který od vás očekává správu souborů a serverů.
• Jeden malý nápad. Ne váš startup. Nástroj pro jednu osobu (vás) s jednou nebo dvěma obrazovkami.
• Hodinu nebo dvě bez přerušování. První sezení vás naučí rytmus.

To je všechno. Žádné instalace, žádný kurz programování, žádný terminál.

Který nástroj zvolit jako začátečník

Nástroj je méně důležitý než návyky, ale měl by umět tři věci: během tvorby ukazovat živý náhled, umožnit vrátit špatnou změnu a publikovat na odkaz, který můžete sdílet. Náš přehled nejlepších nástrojů pro vibe coding poctivě popisuje hlavní možnosti. Mythex je jednou z nich: popíšete aplikaci v chatu, postaví skutečnou full-stack aplikaci s živým náhledem, přidá databázi, když si aplikace musí něco pamatovat, a publikuje jedním kliknutím. Bezplatný plán nevyžaduje kartu.

Krok 1: Vyberte první projekt, který dokončíte

Začátečníci obvykle selhávají tím, že míří příliš vysoko. Dobrý první projekt:

• Je užitečný přímo vám, takže ho budete pořádně testovat.
• Vejde se na jednu nebo dvě obrazovky.
• Ukládá malé množství vašich vlastních dat.
• Nemá platby, týmy ani citlivé osobní údaje.

Dobré první projekty:

V zbytku tohoto návodu použijeme seznam knih ke čtení.

Krok 2: Napište první prompt

Vaše první zpráva určí tvar všeho ostatního. Řekněte, pro koho je, co dělá a jak má vypadat. Držte se krátkého odstavce.

Slabý první prompt:

Udělej mi aplikaci na knihy.

Dobrý první prompt:

Postav pro mě aplikaci se seznamem knih ke čtení. Můžu přidat knihu s názvem, autorem a stavem (chci číst, čtu, přečteno). Knihy zobraz jako karty seskupené podle stavu, nejnovější nahoře. Můžu změnit stav knihy nebo ji smazat. Drž to čisté a jednoduché: bílé pozadí, jedna akcentová barva, funguje na mém telefonu. Ulož knihy tak, aby zůstaly i po obnovení stránky.

Všimněte si, co druhý dělá. Vypisuje pole, akce, rozložení a jedno pravidlo, na které začátečníci vždy zapomenou: ulož data tak, aby přežila obnovení stránky. Bez tohoto řádku mnoho nástrojů postaví stránku, která vypadá hotově, ale při obnovení zapomene všechno.

Další výchozí body najdete v našem přehledu promptů pro vibe coding.

Když si nejste jistí, požádejte o plán

Pokud nevíte, jak něco popsat, požádejte AI, aby před stavbou naplánovala:

Než začneš cokoli stavět, popiš mi běžnými slovy, jaké obrazovky vytvoříš, jaká data budeš ukládat a co potřebuješ, abych rozhodl já.

V Mythexu je na to režim Plán: agent navrhne postup a vy ho schválíte, než se změní jakýkoli soubor.

Krok 3: Testujte jako uživatel, ne jako člověk, který to postavil

Když se objeví náhled, nejen ho obdivujte. Použijte ho:

1. Přidejte tři knihy, včetně jedné s velmi dlouhým názvem.
2. Změňte stav. Přesune se karta do správné skupiny?
3. Obnovte stránku. Jsou knihy stále tam?
4. Zkuste přidat knihu s prázdným názvem. Co se stane?
5. Otevřete náhled na telefonu nebo zúžte okno prohlížeče.

Zapište si, co je špatně, běžnými slovy. „Dlouhý název rozbíjí rozložení karty“ je dokonalé hlášení chyby. „Je to rozbité“ není.

Krok 4: Opravujte jednu věc v každé zprávě

Tohle je návyk, který odděluje lidi, kteří dokončí, od těch, kdo to vzdají. Pošlete jednu změnu, zkontrolujte ji, a pak pošlete další.

Dlouhý název „Stopařův průvodce Galaxií: Kompletní trilogie“ přetéká z karty. Dlouhé názvy zalom na dva řádky a zbytek ukonči znakem „…“.

Potom:

Když odešlu formulář s prázdným názvem, nic se nestane a nezobrazí se žádná zpráva. Zobraz pod polem „Přidejte název“ a knihu neukládej.

Proč jednu po druhé? Když požádáte o pět změn v jedné zprávě, AI může čtyři udělat dobře a potichu rozbít něco dalšího, a vy nebudete vědět, která změna to způsobila. Malé kroky také dělají vrácení užitečným: pokud jedna změna dopadne špatně, vraťte se k verzi těsně před ní a zkuste jasnější požadavek.

Když se něco rozbije

Stane se to. Každý nástroj narazí na chyby. Zkopírujte přesný text chyby, nebo popište přesně, na co jste klikli a co jste viděli, a vložte to zpět:

Když kliknu na Smazat u karty, vidím „Něco se pokazilo“ a kniha zůstane. Zjisti proč a oprav to. Řekni mi, jaká byla příčina.

Žádat o příčinu je důležité. Učí vás to, jak aplikace fungují, a brání AI v hádání. Náš návod na jak ladit aplikaci postavenou AI jde hlouběji.

Krok 5: Udělejte si ji po svém

Jakmile funguje, vylepšujte ji ve stejných malých krocích:

• „Přidej hodnocení 1–5 hvězdiček, které se zobrazí u přečtených knih.“
• „Přidej nad karty vyhledávací pole, které filtruje podle názvu nebo autora.“
• „Použij teplé pozadí v barvě smetany a tmavě zelený akcent.“
• „Přidej nahoru počítadlo: knihy přečtené letos.“

Každá z nich je jedna testovatelná změna.

Krok 6: Publikujte a sdílejte

Až bude dělat, co potřebujete, publikujte. V Mythexu je to jedno kliknutí a dostanete veřejnou adresu URL, kterou lze otevřít na jakémkoli zařízení nebo poslat příteli. Pokud později budete chtít vlastní doménu, je to funkce Pro a náš návod jak připojit vlastní doménu to vysvětluje.

Předtím, než cokoli sdílíte za pár přátel, si přečtěte je vibe coding bezpečný?. U osobního seznamu knih je riziko nízké. U aplikace, kde se registrují cizí lidé a ukládají data, musíte nejdřív udělat kontroly.

Chyby začátečníků, kterým se vyhnout

• Žádat všechno najednou. „Postav mi Goodreads“ vytvoří něco, co vypadá impozantně a funguje špatně. Začněte nejmenší užitečnou verzí.
• Netestovat obnovení stránky. Data, která po obnovení zmizí, jsou nejčastější překvapení začátečníků.
• Pokaždé přepisovat požadavek od nuly. Řekněte, co změnit a co ponechat: „Ponech rozložení, změň jen barvy.“
• Věřit tomu, že „je to opravené“. AI často řekne, že je chyba opravená. Vždy to zkontrolujte sami.
• Vkládat hesla nebo API klíče do chatu. Pokud vaše aplikace potřebuje klíč pro externí službu, uložte ho do nastavení tajných hodnot nástroje, nikdy do zprávy nebo do kódu. Viz jak chránit API klíče.
• Vzdát to po první chybě. Chyby jsou normální. Vložte je zpět a požádejte o příčinu.

Co se naučit po cestě

Kurz nepotřebujete, ale několik pojmů udělá každý požadavek ostřejší. Požádejte AI, aby je vysvětlila v kontextu vaší vlastní aplikace:

• Frontend a backend: co běží v prohlížeči návštěvníka a co na serveru. (Frontend vs backend)
• Databáze: kde aplikace uchovává data. (Co je databáze?)
• Autentizace: jak aplikace pozná, kdo je kdo.
• Tajné hodnoty: soukromé klíče, které aplikace používá a které návštěvníci nesmí nikdy vidět.

Dobrý prompt k tomu: „Vysvětli, jak můj seznam knih ukládá knihu, od kliknutí na Přidat až po uložení dat. Používej běžná slova a odkazuj na skutečné soubory.“

Váš druhý a třetí projekt

Po první aplikaci zvolte něco o krok těžšího. Tracker návyků s týdenním grafem. Rezervační formulář, který vám pošle e-mail. Malý dashboard, který čte z Google Sheet. Naše příklady vibe codingu ukazují skutečné typy aplikací s prompty a s tím, co se pokazilo, a jak postavit aplikaci vibe codingem provede větším projektem od nápadu po publikovanou aplikaci s uživateli.

Až budete připraveni začít, otevřete AI nástroj pro tvorbu aplikací, vložte výše uvedený prompt pro seznam knih a změňte ho na svůj vlastní nápad.

Otázky