Příklady vibe codingu: 10 typů skutečných aplikací, prompty a co se pokazilo

Nejčastější příklady vibe codingu jsou malé, užitečné webové aplikace: trackery, rezervační stránky, interní nástroje, klientské portály, přistávací stránky, kvízy, dashboardy a jednoduché AI nástroje. Níže je deset z nich. U každé uvidíte, kdo ji staví, první prompt, co se obvykle pokazí, a následný prompt, který to opraví.

Jde o kompozity projektů, se kterými lidé nejčastěji přicházejí do AI nástrojů pro tvorbu aplikací, a ne o případové studie jednoho člověka. Prompty jsou připravené ke zkopírování. Chyby jsou ty, které se opakují znovu a znovu, a proto jsou to nejužitečnější část. Pokud je pro vás vibe coding nová věc, začněte s tím, co je vibe coding.

1. Osobní rozpočtový tracker

Kdo to staví: jednotlivci, kteří zkusili tabulky a vzdali to.

První prompt:

Postav mi měsíční rozpočtový tracker. Přidávám výdaje s částkou, kategorií (jídlo, nájem, doprava, zábava, ostatní), datem a poznámkou. Zobraz celkovou částku tohoto měsíce pro každou kategorii jako sloupcový graf a seznam nedávných výdajů. Mohu nastavit rozpočet pro každou kategorii a vidět, kolik zbývá.

Co se pokazilo: graf počítal každý výdaj, který kdy byl zadán, a ne jen ty z tohoto měsíce, takže po druhém měsíci vypadala každá kategorie jako překročená. Také částka zadaná s čárkou („1,200“) se uložila jako 1.

Opravný prompt:

Graf a součty mají zahrnovat pouze výdaje z vybraného měsíce. Nahoře přidej výběr měsíce, který bude ve výchozím stavu nastaven na aktuální měsíc. Také přijímej částky zadané s čárkami nebo mezerami a ukládej je jako čísla.

Ponaučení: „tento měsíc“ je pravidlo. Pravidla říkejte nahlas.

2. Rezervační stránka pro malý salon

Kdo to staví: majitelé malých firem, kteří jsou unavení z rezervací přes telefon a DM.

První prompt:

Postav rezervační stránku pro můj salon. Zákazníci vyberou službu, datum a volný časový termín, pak zadají jméno a telefon. Mám soukromou administrátorskou stránku za přihlášením, která ukazuje rezervace podle dne.

Co se pokazilo: dva zákazníci zarezervovali stejný termín 10:00 do minuty od sebe, protože stránka kontrolovala dostupnost jen při prvním načtení. Barvení na 90 minut také nezablokovalo termíny po něm.

Opravný prompt:

Když zákazník odešle rezervaci, zkontroluj na serveru, že jsou všechny termíny, které pokrývá, stále volné, a pokud ne, odmítni ji se zprávou „Tento termín byl právě obsazen“. Služba blokuje celou svou délku, takže rezervace na 90 minut od 10:00 blokuje 10:00, 10:30 a 11:00.

Ponaučení: cokoli, co mohou udělat dva lidé najednou, potřebuje kontrolu na serveru. Úplnou verzi najdete v návodu, jak postavit rezervační aplikaci.

3. Restaurační menu s QR kódem

Kdo to staví: majitelé kaváren a restaurací, kteří tisknou jídelní lístky příliš často.

První prompt:

Postav mobilní webové menu pro moji kavárnu. Sekce pro snídaně, obědy, nápoje a dezerty, každá položka s názvem, cenou, krátkým popisem a dietními štítky (vegan, bezlepkové). Potřebuji administrátorskou stránku pro úpravu položek a označení vyprodáno. Zobraz QR kód, který můžu vytisknout a který odkazuje na menu.

Co se pokazilo: nic se nerozbilo, ale menu bylo na kavárenské Wi-Fi pomalé, protože se u každé položky načítaly fotky z telefonu v plné velikosti.

Opravný prompt:

Fotky menu jsou příliš těžké. Zmenši nahrané obrázky na maximálně 800 px šířky, zkomprimuj je a načítej líně, jak návštěvník scrolluje.

Ponaučení: testujte na pomalém připojení, ne jen v kanceláři.

4. Tracker vybavení nebo zásob pro tým

Kdo to staví: lidé z provozu, kteří nahrazují sdílenou tabulku.

První prompt:

Postav nástroj pro správu zásob pro náš skladový tým. Položky mají název, SKU, množství, umístění a minimální stav. Zaměstnanci se přihlásí, můžou přidávat zásoby, odebírat zásoby s uvedením důvodu a vidí seznam položek pod minimem zvýrazněných červeně. Uchovávej historii každé změny a toho, kdo ji provedl.

Co se pokazilo: historie ukazovala „user 3“ místo jmen, a když se odebralo víc zásob, než bylo k dispozici, množství se dostalo do záporu.

Opravný prompt:

V historii ukazuj jméno osoby, ne její ID. Nepovol odebrání, které by snížilo množství pod nulu; místo toho zobraz „Na skladě jsou jen 4 kusy“.

Ponaučení: popište, co by mělo být nemožné, nejen co by mělo být možné. Náš návod na stavbu aplikace pro správu skladu pokrývá zbytek.

5. Klientský portál pro freelancera nebo studio

Kdo to staví: designéři, účetní, konzultanti a agentury.

První prompt:

Postav klientský portál. Klienty zvu e-mailem. Každý klient se přihlásí a vidí jen své projekty, soubory a faktury a může zanechávat komentáře. Já se přihlásím jako administrátor a vidím všechno.

Co se pokazilo: toto je nejdůležitější chyba v seznamu. Stránky klientovi ukazovaly jen jeho vlastní projekty, ale server vrátil libovolný projekt, když se v adresním řádku změnilo číslo. Klikání jako jeden klient to nikdy neodhalilo.

Opravný prompt:

Zkontroluj každou serverovou trasu, která vrací projekty, soubory, komentáře nebo faktury. Každá musí ověřit, že přihlášený klient je vlastníkem záznamu, a jinak vrátit „nenalezeno“. Pak to otestuj: přihlas se jako klient A a zkus otevřít projekt klienta B podle jeho ID.

Ponaučení: něco na obrazovce skrýt není totéž co to chránit. Více k tomu v článku je vibe coding bezpečný?.

6. Úvodní stránka s čekací listinou

Kdo to staví: zakladatelé, kteří testují nápad dřív, než ho postaví.

První prompt:

Postav přistávací stránku pro aplikaci, která pomáhá doučovatelům plánovat lekce a vybírat platby. Hlavní nadpis, podnadpis, registrace e-mailem, tři výhody, sekce jak to funguje a FAQ. Ukládej registrace do databáze s datem a nech mě je stáhnout jako CSV ze soukromé stránky.

Co se pokazilo: během několika dní se seznam zaplnil nevyžádanými registracemi od botů a stránka neměla titulek ani popis, takže sdílené odkazy zobrazovaly prázdný náhled.

Opravný prompt:

Přidej do registračního formuláře základní ochranu proti botům (skryté pole honeypot a limit 5 registrací na IP adresu za hodinu). Přidej titulek stránky, meta popis a obrázek pro sdílení na sociálních sítích.

Ponaučení: veřejný formulář si někdo najde. Viz jak postavit stránku s čekací listinou.

7. Kvízová aplikace pro učitele

Kdo to staví: učitelé a lektoři, kteří chtějí něco lehčího než LMS.

První prompt:

Postav kvízovou aplikaci pro moji třídu. Vytvářím kvízy s otázkami s výběrem odpovědi a jednou správnou odpovědí. Studenti se připojí kódem a svým křestním jménem, odpoví na otázky a na konci vidí své skóre. Vidím tabulku výsledků pro každý kvíz.

Co se pokazilo: správné odpovědi se odesílaly do prohlížeče spolu s otázkami, takže zvědavý student je mohl přečíst ve zdrojovém kódu stránky. Studenti také mohli odevzdávat znovu, dokud nedosáhli 100 %.

Opravný prompt:

Neposílej správné odpovědi do prohlížeče. Kontroluj odpovědi na serveru po odeslání. Povol jedno odevzdání na jméno studenta a kvíz a učiteli ukaž, když se někdo pokusí odevzdat znovu.

Ponaučení: prohlížeč patří uživateli. Cokoli tam je, lze přečíst.

8. Malý AI nástroj

Kdo to staví: marketéři, autoři a zakladatelé, kteří chtějí zaměřeného AI pomocníka.

První prompt:

Postav nástroj, který z popisu produktu vytvoří pět příspěvků na sociální sítě v různých tónech (přátelský, odborný, hravý, krátký, dlouhý). Použij AI API. Vložím popis, vyberu platformu a dostanu příspěvky s tlačítky pro kopírování.

Co se pokazilo: první verze volala AI službu přímo z prohlížeče s API klíčem uvnitř stránky, kde ho mohl kdokoli zkopírovat a navyšovat účet.

Opravný prompt:

Přesuň volání AI na server. Ulož API klíč jako tajný údaj, nikdy v kódu frontendu. Omez každého návštěvníka na 20 generování denně.

Ponaučení: klíče patří do tajných hodnot na serveru. Viz jak chránit API klíče a jak přidat AI funkce do aplikace.

9. Arabsko-anglický firemní web

Kdo to staví: firmy v Zálivu a širším arabském světě, které obsluhují dva jazyky.

První prompt:

Postav web pro moji firmu zabývající se interiérovým designem v arabštině a angličtině, s přepínačem jazyka. Stránky: domů, služby, portfolio, o nás a kontakt. Arabština má být plně zprava doleva.

Co se pokazilo: arabský text byl zarovnaný doprava, ale rozložení nebylo zrcadlené: šipky ukazovaly špatným směrem a menu bylo na špatné straně. Telefonní čísla se na některých místech zobrazovala pozpátku.

Opravný prompt:

V arabštině zrcadli celé rozložení: nastav směr stránky zprava doleva, dej menu vpravo, otoč směrové ikony a nech telefonní čísla a e-maily zleva doprava uvnitř arabského textu.

Ponaučení: zprava doleva je rozložení, ne zarovnání. Mythex zvládá arabštinu a další rozvržení zprava doleva a promptovat můžete rovnou v arabštině.

10. Tracker, který se stane mobilní aplikací

Kdo to staví: trenéři, posilovny a komunitní skupiny, jejichž uživatelé žijí v telefonech.

První prompt:

Postav tréninkový deník pro své osobní klienty. Každý klient se přihlásí, vidí plán, který jsem mu na týden přiřadil, odškrtává cviky a zapisuje váhy. Vidím pokrok každého klienta v grafu.

Co se pokazilo: webová aplikace fungovala, ale na telefonech byla tlačítka během tréninku moc malá na to, aby se dobře trefila, a graf nešel přečíst.

Opravný prompt:

Navrhni to pro ovládání jednou rukou na telefonu: velké dotykové plochy ve spodní části obrazovky, jeden cvik na obrazovku s velkými tlačítky Další a Hotovo a jednoduchý týdenní graf pokroku.

Ponaučení: pokud lidé budou používat aplikaci v telefonu, navrhujte nejdřív pro telefon. Na Mythex Pro se publikovaná aplikace může pak proměnit v Android aplikaci pro Google Play a iPhone aplikaci odeslanou do TestFlight; mobilní aplikace otevírá vaši publikovanou aplikaci, takže každé publikování ji aktualizuje. Viz stránka tvůrce mobilních aplikací.

Vzorce za těmito příklady

Napříč všech deseti se chyby dělí do několika skupin:

Žádná z nich nevyžaduje, abyste četli kód. Vyžadují, abyste testovali jako zvědavý, trochu nepřátelský uživatel, a popsali přesně, co vidíte.

Vyzkoušejte si to sami

Vyberte příklad nejblíž vašemu nápadu, zkopírujte jeho první prompt a změňte detaily. Potom použijte opravný prompt jako kontrolní seznam, než to sdílíte. Náš přehled promptů pro vibe coding jich má dalších 30 a jak postavit aplikaci vibe codingem provede jeden projekt od nápadu k publikované aplikaci. Až budete připraveni, spusťte ho v AI nástroji pro tvorbu aplikací nebo si prohlédněte šablony pro rychlejší start.

Otázky