Vibe coding pre začiatočníkov: ako začať krok za krokom

Vibe coding pre začiatočníkov sa dá zhrnúť do piatich krokov: vyberte nástroj, ktorý aplikáciu spustí za vás, opíšte jednu malú aplikáciu obyčajnými slovami, vyskúšajte ju ako používateľ, žiadajte jednu opravu naraz a publikujte, keď to funguje. Nemusíte vedieť programovať. Tento návod prechádza každý krok na skutočnom prvom projekte, s presnými promptmi a chybami, ktoré takmer každý začiatočník urobí počas prvého týždňa.

Ak najprv chcete pozadie – odkiaľ tento pojem pochádza a prečo sa o ňom ľudia hádajú – prečítajte si čo je vibe coding. Táto stránka je praktická stránka.

Čo potrebujete na začiatok

Menej, než si myslíte:

• Prehliadač a účet u nástroja na vibe coding. Začiatočníci by mali zvoliť tvorcu aplikácií pomocou AI, ktorý píše kód, spúšťa ho a hostuje, a nie asistenta na kódovanie, ktorý od vás očakáva správu súborov a serverov.
• Jeden malý nápad. Nie vašu startup. Nástroj pre jednu osobu (vás) s jednou alebo dvoma obrazovkami.
• Hodinu alebo dve bez prerušení. Prvé sedenie vás naučí rytmus.

To je všetko. Žiadna inštalácia, žiadny kurz programovania, žiadny terminál.

Ktorý nástroj zvoliť ako začiatočník

Nástroj je dôležitejší menej než návyky, ale mal by robiť tri veci: ukazovať živý náhľad počas tvorby, umožniť vrátiť zlú zmenu späť a publikovať na odkaz, ktorý môžete zdieľať. Náš prehľad najlepších nástrojov na vibe coding pokrýva hlavné možnosti úprimne. Mythex je jedna z nich: aplikáciu opíšete v chate, on postaví skutočnú full-stack aplikáciu so živým náhľadom, pridá databázu, keď si aplikácia potrebuje niečo zapamätať, a publikuje ju jedným kliknutím. Bezplatný plán nevyžaduje kartu.

Krok 1: Vyberte prvý projekt, ktorý dokončíte

Začiatočníci zvyčajne zlyhajú tým, že mieria príliš vysoko. Dobrý prvý projekt:

• Je užitočný pre vás osobne, takže ho poriadne otestujete.
• Vojde sa na jednu alebo dve obrazovky.
• Ukladá malé množstvo vlastných dát.
• Nemá platby, tímy ani citlivé osobné údaje.

Dobré prvé projekty:

V zvyšku tohto návodu použijeme zoznam kníh na čítanie.

Krok 2: Napíšte prvý prompt

Vaša prvá správa určuje tvar všetkého. Povedzte, pre koho to je, čo to robí a ako to má vyzerať. Držte sa krátkeho odseku.

Slabý prvý prompt:

Urob mi aplikáciu na knihy.

Dobrý prvý prompt:

Vytvor aplikáciu zoznamu kníh na čítanie pre mňa. Môžem pridať knihu s názvom, autorom a stavom (chcem čítať, čítam, prečítané). Knihy zobraz ako karty zoskupené podľa stavu, najnovšie hore. Môžem zmeniť stav knihy alebo ju zmazať. Nech je to čisté a jednoduché: biele pozadie, jedna akcentová farba, funguje na mojom telefóne. Ulož knihy, aby tam boli aj po obnovení stránky.

Všimnite si, čo robí druhý. Vymenúva polia, akcie, rozloženie a jedno pravidlo, na ktoré začiatočníci vždy zabudnú: uložte dáta tak, aby prežili obnovenie stránky. Bez tohto riadku mnohé nástroje vytvoria stránku, ktorá vyzerá hotovo, ale pri znovunačítaní zabudne všetko.

Ďalšie štartovacie body nájdete v cheat sheete s promptmi pre vibe coding.

Keď si nie ste istí, vyžiadajte plán

Ak neviete, ako niečo opísať, požiadajte AI, aby pred tvorbou naplánovala postup:

Predtým než čokoľvek vytvoríš, mi obyčajnými slovami povedz, aké obrazovky vytvoríš, aké dáta budeš ukladať a čo potrebuješ, aby som rozhodol ja.

V Mythex na to slúži režim Plan: agent načrtne prístup a vy ho schválite, skôr než sa zmenia akékoľvek súbory.

Krok 3: Otestujte to ako používateľ, nie ako človek, ktorý to postavil

Keď sa náhľad zobrazí, nezostávajte len obdivovať. Používajte ho:

1. Pridajte tri knihy, vrátane jednej s veľmi dlhým názvom.
2. Zmeňte stav. Presunie sa karta do správnej skupiny?
3. Obnovte stránku. Sú knihy stále tam?
4. Skúste pridať knihu s prázdnym názvom. Čo sa stane?
5. Otvorte náhľad na telefóne alebo zúžte okno prehliadača.

Zapíšte si, čo nie je v poriadku, obyčajnými slovami. „Dlhý názov rozbíja rozloženie karty“ je dokonalé hlásenie o chybe. „Je to pokazené“ nie je.

Krok 4: Opravujte jednu vec v jednej správe

Toto je návyk, ktorý oddeľuje ľudí, ktorí dokončia, od tých, ktorí to vzdajú. Pošlite jednu zmenu, skontrolujte ju a potom pošlite ďalšiu.

Dlhý názov „Stopárov sprievodca Galaxiou: Kompletná trilógia“ presahuje kartu. Zalamuj dlhé názvy na dva riadky a zvyšok skráť znakom „…“.

Potom:

Ak odošlem formulár s prázdnym názvom, nič sa nestane a nezobrazí sa žiadna správa. Pod poľom zobraz „Pridajte názov“ a knihu neukladaj.

Prečo po jednej? Keď žiadate päť zmien v jednej správe, AI môže štyri urobiť dobre a potichu niečo iné rozbiť, a vy nebudete vedieť, ktorá zmena to spôsobila. Malé kroky tiež robia vrátenie užitočným: ak jedna zmena pokazí, vráťte sa k verzii tesne pred ňou a skúste jasnejšiu požiadavku.

Keď sa niečo pokazí

Pokazí sa. Každý nástroj na tvorbu naráža na chyby. Skopírujte presné znenie chyby alebo opíšte, na čo ste presne klikli a čo ste videli, a vložte to späť:

Keď kliknem na Zmazať na karte, zobrazí sa „Niečo sa pokazilo“ a kniha zostane. Zisti, prečo sa to deje, a oprav to. Povedz mi, aká bola príčina.

Pýtať sa na príčinu je dôležité. Učí vás to, ako aplikácie fungujú, a zabraňuje to tomu, aby AI hádala. Náš návod na ako ladiť aplikáciu postavenú AI ide hlbšie.

Krok 5: Prispôsobte si ju

Keď funguje, zlepšujte ju rovnakými malými krokmi:

• „Pridaj hodnotenie 1–5 hviezd, ktoré sa zobrazí pri dočítaných knihách.“
• „Pridaj vyhľadávacie pole nad karty, ktoré filtruje podľa názvu alebo autora.“
• „Použi teplé sivobiele pozadie a tmavozelený akcent.“
• „Pridaj počítadlo hore: knihy dočítané tento rok.“

Každá je jedna, testovateľná zmena.

Krok 6: Publikujte a zdieľajte

Keď robí to, čo potrebujete, publikujte ju. V Mythex je to jedno kliknutie a dostanete verejnú URL, ktorú môžete otvoriť na ľubovoľnom zariadení alebo poslať priateľovi. Ak neskôr chcete vlastnú doménu, je to funkcia plánu Pro a náš návod na pripojenie vlastnej domény to vysvetľuje.

Predtým, než niečo zdieľate za hranicami niekoľkých priateľov, prečítajte si je vibe coding bezpečný?. Pri osobnom zozname kníh je riziko nízke. Pri aplikácii, kde sa registrujú cudzí ľudia a ukladajú dáta, musíte najprv urobiť kontroly.

Chyby začiatočníkov, ktorým sa treba vyhnúť

• Pýtať všetko naraz. „Vytvor mi Goodreads“ dá niečo, čo vyzerá pôsobivo, ale funguje zle. Začnite s najmenšou užitočnou verziou.
• Netestovať obnovenie. Dáta, ktoré zmiznú pri načítaní, sú najčastejšie prekvapenie začiatočníkov.
• Prepisovať požiadavku od nuly zakaždým. Povedzte, čo zmeniť a čo zachovať: „Ponechaj rozloženie, zmeň len farby.“
• Veriť „je to opravené“. AI často povie, že chyba je opravená. Vždy to skontrolujte sami.
• Vkladať heslá alebo API kľúče do chatu. Ak vaša aplikácia potrebuje kľúč od externej služby, uložte ho do nastavení tajomstiev nástroja, nikdy do správy ani do kódu. Pozrite si ako chrániť API kľúče.
• Vzdať sa po prvej chybe. Chyby sú normálne. Vložte ich späť a požiadajte o príčinu.

Čo sa učiť za pochodu

Na kurz nepotrebujete, ale pár pojmov urobí každú požiadavku ostrejšou. Požiadajte AI, aby ich vysvetlila v kontexte vašej vlastnej aplikácie:

• Frontend a backend: čo beží v prehliadači návštevníka a čo na serveri. (Frontend vs backend)
• Databáza: kde aplikácia uchováva svoje dáta. (Čo je databáza?)
• Autentifikácia: ako aplikácia zistí, kto je človek.
• Tajomstvá: súkromné kľúče, ktoré aplikácia používa a ktoré návštevníci nesmú nikdy vidieť.

Dobrý prompt na toto: „Vysvetli, ako moja aplikácia zoznamu kníh uloží knihu, od kliknutia na Pridať po uloženie dát. Použi obyčajné slová a odkazuj na skutočné súbory.“

Váš druhý a tretí projekt

Po prvej aplikácii si vyberte niečo o krok náročnejšie. Sledovač návykov s týždenným grafom. Rezervačný formulár, ktorý vám pošle e-mail. Malý dashboard, ktorý číta z Google Sheet. Naše príklady vibe codingu ukazujú skutočné typy aplikácií s promptmi a tým, čo sa pokazilo, a ako vytvoriť aplikáciu pomocou vibe codingu prevedie väčší projekt od nápadu po publikovanú aplikáciu s používateľmi.

Keď budete pripravení začať, otvorte AI tvorcu aplikácií, vložte prompt pre zoznam kníh a zmeňte ho na svoj nápad.

Otázky