Vibecoding prakticky: vlastní aplikace bez programování

Vágní zadání
Udělej mi appku na plánování výletů.

Kompletní zadání Průvodce výletem
Vytvoř interaktivní webovou aplikaci Průvodce výletem, kterou si mohu proklikat přímo tady v chatu.
Pro koho to je: pro lidi, co plánují jednodenní výlet a nechtějí trávit hodiny hledáním.
Co uživatel zadá: vybere jednu z pěti destinací — Prahu, Brno, Olomouc, Český Krumlov, nebo Kutnou Horu — počet lidí, z toho počet dětí, rozpočet v korunách za celou skupinu a styl výletu, aktivní, nebo klidný.
Co má uživatel vidět: po kliknutí na Naplánovat se zobrazí itinerář na celý den, rozdělený na dopoledne, odpoledne a večer. Každá aktivita má název, krátký popis, odhad ceny pro zadaný počet lidí a odhad času. Dole celkový součet ceny za den.
Jak to má vypadat: česky, přehledně, jednoduché barvy, dobře čitelné na mobilu.
Co když něco chybí: když uživatel nevybere destinaci, zadá méně než jednoho člověka, více dětí než lidí nebo nekladný rozpočet, přátelsky mu řekni, co má opravit.
Pro každé město připrav přímo v aplikaci dostatek ukázkových aktivit pro oba styly a různé rozpočty. U dat rozliš cenu pro dospělého, dítě nebo celou skupinu tak, aby šel spočítat odhad pro zadané složení. Vybírej kombinaci aktivit, která se do rozpočtu vejde. Když to nejde, ukaž nejlevnější variantu a srozumitelně na to upozorni.
Každá ukázková aktivita musí mít určenou vhodnou část dne. V jednom itineráři použij každou konkrétní aktivitu nebo místo nejvýše jednou a zařaď je jen do vhodné části dne. Jídla zařaď logicky, například večeři pouze večer. Když není dost vhodných unikátních aktivit, zobraz raději méně položek, než abys něco opakoval nebo zařadil nesmyslně. Před zobrazením zkontroluj, že se nic neopakuje a pořadí programu dává smysl.
Při používání musí prototyp fungovat pouze s připraveným obsahem; nesmí využívat internet ani externí služby a nic dalšího vytvářet pomocí AI. Všechna data a logika zůstanou uvnitř aplikace. Ceny viditelně označ jako orientační odhady k ověření.

Obrácené zadání
Chci postavit aplikaci na plánování výletů. Než začneš cokoliv stavět, ptej se mě postupně na otázky, které potřebuješ k dobrému zadání. Vždycky jen jednu otázku najednou. Až řeknu dost, sepiš z mých odpovědí kompletní zadání.

ChatGPT

Kompletní zadání Průvodce výletem
Vytvoř interaktivní webovou aplikaci Průvodce výletem, kterou si mohu proklikat přímo tady v chatu.
Pro koho to je: pro lidi, co plánují jednodenní výlet a nechtějí trávit hodiny hledáním.
Co uživatel zadá: vybere jednu z pěti destinací — Prahu, Brno, Olomouc, Český Krumlov, nebo Kutnou Horu — počet lidí, z toho počet dětí, rozpočet v korunách za celou skupinu a styl výletu, aktivní, nebo klidný.
Co má uživatel vidět: po kliknutí na Naplánovat se zobrazí itinerář na celý den, rozdělený na dopoledne, odpoledne a večer. Každá aktivita má název, krátký popis, odhad ceny pro zadaný počet lidí a odhad času. Dole celkový součet ceny za den.
Jak to má vypadat: česky, přehledně, jednoduché barvy, dobře čitelné na mobilu.
Co když něco chybí: když uživatel nevybere destinaci, zadá méně než jednoho člověka, více dětí než lidí nebo nekladný rozpočet, přátelsky mu řekni, co má opravit.

Pro každé město připrav přímo v aplikaci dostatek ukázkových aktivit pro oba styly a různé rozpočty. U dat rozliš cenu pro dospělého, dítě nebo celou skupinu tak, aby šel spočítat odhad pro zadané složení. Vybírej kombinaci aktivit, která se do rozpočtu vejde. Když to nejde, ukaž nejlevnější variantu a srozumitelně na to upozorni.
Každá ukázková aktivita musí mít určenou vhodnou část dne. V jednom itineráři použij každou konkrétní aktivitu nebo místo nejvýše jednou a zařaď je jen do vhodné části dne. Jídla zařaď logicky, například večeři pouze večer. Když není dost vhodných unikátních aktivit, zobraz raději méně položek, než abys něco opakoval nebo zařadil nesmyslně. Před zobrazením zkontroluj, že se nic neopakuje a pořadí programu dává smysl.
Při používání musí prototyp fungovat pouze s připraveným obsahem; nesmí využívat internet ani externí služby a nic dalšího vytvářet pomocí AI. Všechna data a logika zůstanou uvnitř aplikace. Ceny viditelně označ jako orientační odhady k ověření.

Pojistka pro klikací náhled
Nevysvětluj mi, jak ji vytvořit. Vytvoř rovnou interaktivní klikací náhled aplikace přímo v tomto chatu.

Oprava chyby
Tohle se stalo. Oprav to.

Víkend místo jednoho dne
Přidej možnost vybrat si délku výletu, jeden den, nebo celý víkend. U víkendu rozděl itinerář na sobotu a neděli. V celém víkendovém plánu použij každou aktivitu nebo místo nejvýše jednou a zachovej logické zařazení do částí dne.

Konkrétní oprava itineráře
Ve víkendovém itineráři se opakuje stejná aktivita a večeře je zařazená dopoledne. Každé místo použij jen jednou, večeři zařaď pouze večer a současnou verzi oprav. Potom znovu zkontroluj celý itinerář.

Varianta pro déšť
Přidej ke každému dni záložní variantu pro případ deště. Použij v ní jiné aktivity než v hlavním plánu a zařaď je do logické části dne.

Proč aktivita stojí za to
U každé aktivity napiš jednou větou, proč stojí za to.

Kvíz pro firemní večírek
Vytvoř v ChatGPT interaktivní webovou aplikaci s kvízem pro firemní večírek, kterou si mohu proklikat přímo tady v chatu. Deset otázek o obecných znalostech, u každé čtyři možnosti. Po každé odpovědi hned ukaž, jestli byla správně, a když ne, zvýrazni tu správnou. Na konci zobraz celkové skóre a vtipný komentář podle výsledku. Česky, velká tlačítka, ať se to dobře hraje na mobilu.

České filmy a odpočet
Otázky změň na téma české filmy a přidej odpočet dvaceti vteřin na každou otázku.

Pojistka pro klikací náhled
Nevysvětluj mi, jak ji vytvořit. Vytvoř rovnou interaktivní klikací náhled aplikace přímo v tomto chatu.

AI funkce uvnitř aplikace v Lovable

Kompletní zadání pro Lovable — prémiový design
Co má vzniknout: webová aplikace Průvodce výletem.
Pro koho to je: pro lidi, co plánují výlet a nechtějí trávit hodiny hledáním.
Co uživatel zadá: destinaci, počet lidí, z toho počet dětí, rozpočet v korunách za celou skupinu, styl výletu, aktivní, nebo klidný, a délku, jeden den, nebo celý víkend.
Co má uživatel vidět: po kliknutí na Naplánovat se zobrazí itinerář rozdělený na dopoledne, odpoledne a večer, u víkendu na sobotu a neděli. Každá aktivita má název, krátký popis, odhad ceny pro zadaný počet lidí, odhad času a větu, proč stojí za to. Ke každému dni přidej záložní variantu pro případ deště. Dole celkový součet ceny za celý výlet.
Itinerář ať si aplikace nechá pokaždé vygenerovat od AI podle toho, co uživatel zadal. Použij k tomu Lovable AI, žádná předpřipravelná data.
Jak to má vypadat: všechno česky, uživateli vykej.
Vizuální směr: prémiová, filmová cestovatelská aplikace jako moderní cestovatelský magazín. Musí působit výrazněji a profesionálněji než běžná šablona nebo administrace.
Úvodní obrazovka: velký nadpis „Váš výlet začíná tady“, krátký podnadpis a široký abstraktní cestovatelský vizuál vytvořený z vrstvených gradientů a jemných mapových linií. Formulář umísti do plovoucího panelu, který částečně překrývá úvodní blok.
Barvy a písmo: temná námořnická modř #0B132B, sytá modř #2563EB, světlé slonovinové pozadí #F8F7F4 a teplá korálová #FF6B4A pouze pro hlavní tlačítko Naplánovat. Pro nadpisy použij písmo Sora, pro běžný text Inter. Vytvoř jasnou typografickou hierarchii a hodně prostoru.
Formulář a výsledek: styl výletu a délku zobraz jako elegantní přepínače. Itinerář zobraz jako vizuální časovou osu; každou aktivitu v samostatné kartě s jednoduchou lineární ikonou a štítky s časem a cenou. Celkovou cenu zvýrazni v samostatné souhrnné kartě.
Hloubka a pohyb: použij jemný glassmorphism jen u plovoucího formuláře, vrstvenou hloubku, měkké stíny, zaoblení 20 až 24 pixelů a decentní animace při načtení a najetí. Při generování zobraz elegantní stav „Skládáme váš výlet“. Pohyb nesmí rušit.
Mobil a přístupnost: na telefonu vše uspořádej do jednoho sloupce, zjednoduš průsvitné efekty a zachovej pohodlně velká tlačítka. Udrž vysoký kontrast a dobrou čitelnost.
Čemu se vyhnout: žádné emoji, přeplácané gradienty, nízký kontrast, generický vzhled administrace ani nahodilé styly. Všechny prvky musí používat stejný vizuální jazyk.
Co když něco chybí: když uživatel nezadá destinaci, přátelsky ho upozorni, ať ji doplní.
Důvěryhodnost: konkrétní tipy a ceny viditelně označ jako orientační návrhy k ověření.

Co chcete určitě stihnout
Do formuláře přidej nepovinné textové pole s názvem Co chcete určitě stihnout. Uživatel do něj může napsat konkrétní místo nebo aktivitu. Pokud pole vyplní, zahrň jeho přání do vygenerovaného itineráře právě jednou a do logické části dne. Aktivitu označ štítkem Vaše přání a její odhad času a případnou cenu zahrň do celého plánu i součtu. Pokud pole zůstane prázdné, aplikace funguje jako dosud. Nový prvek začleň do stejného prémiového cestovatelského designu. Použij stávající barvy, typografii, ikony, zaoblení, stíny, rozestupy, animace a chování na mobilu. Ostatní vzhled a funkce neměň.

Vyměnit aktivitu
Ke každé aktivitě v hotovém itineráři přidej tlačítko Vyměnit aktivitu. Po kliknutí nahraď jen tuto jednu aktivitu jinou, která patří do stejné části dne a odpovídá zadanému stylu výletu. Ostatní aktivity, jejich pořadí a zadané údaje ponech beze změny. Po výměně přepočítej celkovou cenu. Nový prvek začleň do stejného prémiového cestovatelského designu. Použij stávající barvy, typografii, ikony, zaoblení, stíny, rozestupy, animace a chování na mobilu. Ostatní vzhled a funkce neměň.

Lovable Cloud

Sdílené výlety
Přidej ukládání výletů. Každý vygenerovaný výlet se automaticky uloží do databáze. Přidej záložku Sdílené výlety, kde každý návštěvník uvidí všechny uložené výlety a může kterýkoliv znovu otevřít. U záložky na to krátce upozorni. Novou záložku a karty uložených výletů začleň do stejného prémiového cestovatelského designu. Použij stávající barvy, typografii, ikony, zaoblení, stíny, rozestupy, animace a chování na mobilu. Ostatní vzhled a funkce neměň.

Zkopírovat itinerář
Pod hotový itinerář přidej tlačítko Zkopírovat itinerář. Po kliknutí zkopíruj do schránky celý plán jako přehledný text: destinaci, jednotlivé dny a části dne, názvy aktivit, odhad času a ceny a celkový součet. Po úspěšném zkopírování na dvě sekundy zobraz potvrzení Zkopírováno. Nové tlačítko i potvrzení začleň do stejného prémiového cestovatelského designu. Použij stávající barvy, typografii, ikony, zaoblení, stíny, rozestupy, animace a chování na mobilu. Ostatní vzhled a funkce neměň.

Kuchyňská minutka
Vytvoř mi jednoduchou webovou stránku, která bude sloužit jako kuchyňská minutka.

Zpracování účtenek
Pracuj jen s kopiemi účtenek v téhle složce. Když na nějakou kvůli formátu neuvidíš, nejdřív si ji převeď. Z každé vytáhni datum, obchod, částku a co se nakupovalo. Vytvoř z toho přehlednou tabulku seřazenou podle data a dole celkový součet. Nic nemaž ani neupravuj, vytvářej jen nové soubory.

Průvodce výletem v Codexu
Vytvoř v této prázdné složce webovou aplikaci Průvodce výletem v češtině. Připrav ji tak, abych ji po dokončení mohl rovnou otevřít na tomto počítači bez instalace dalších programů nebo složitého nastavování. Až skončíš, jednoduše mi řekni, jak ji otevřít. Nic mimo tuto složku neměň.
Formulář obsahuje destinaci, počet lidí a dětí, rozpočet, délku výletu jeden den, nebo celý víkend, a čtyři styly. Výsledkem je itinerář rozdělený na dopoledne, odpoledne a večer, každá aktivita jako karta s cenou a dobou trvání, dole celkový součet. Použij tmavý moderní design a zajisti použitelnost na mobilu.
Připrav návrhy aktivit pro deset oblíbených českých a evropských destinací, určitě mezi nimi Prahu, Paříž, Vídeň a Kutnou Horu. Reykjavík mezi ně nezařazuj; použijeme ho v závěrečné ukázce ke srovnání připravených dat a nového obsahu vytvářeného pomocí AI. Tato první verze má pracovat jen s připravenými návrhy. Všechny tipy označ jako orientační a určené k ověření.
Přidej přehled posledních pěti vytvořených výletů. Každý musí jít znovu otevřít. Přehled stačí zachovat jen po dobu, kdy je aplikace otevřená; po zavření se může vymazat.
Na konci všechno vyzkoušej podle zadání. Pokud některou část nemůžeš splnit, řekni mi to jednoduše. Nepopisuj mi technické podrobnosti; stačí mi vědět, jak aplikaci otevřít a používat.

Volitelné napojení aplikace na AI
Rozšiř aplikaci tak, aby pro město mimo připravené návrhy mohla získat nový itinerář pomocí OpenAI. API klíč je tajný. Nikdy mě nežádej, abych ho vložil do chatu, zdrojových souborů ani přímo do stránky v prohlížeči. Pokud bude potřeba, nejdřív mi běžným jazykem vysvětli, kde ho mám bezpečně zadat.
Nejdřív posuď současný projekt a navrhni bezpečné řešení pro můj počítač. Vysvětli mi jen první krok a nic neměň, dokud ho nepotvrdím. Potom mě veď po jednom kroku. Před placenou službou, instalací, přístupem k internetu nebo změnou mimo tuto složku si vyžádej můj souhlas. Pokud to bezpečně nejde, zastav se a řekni mi proč. Tuto verzi nepřipravuj k veřejnému používání. Klíč do tohoto zadání nevkládám.

Projektové pokyny AGENTS.md

Stálá pravidla projektu
Ulož k tomuto projektu následující stálá pravidla, aby je Codex použil i v novém chatu nad stejnou složkou. Vytvoř pro ně projektový soubor AGENTS.md. Aplikaci teď neměň.
Projekt Průvodce výletem, webová aplikace pro plánování výletů. Všechno je v češtině. Výstupy jsou vždycky karty, ne dlouhé texty. Ceny vždycky v korunách. Aplikace musí fungovat na mobilu.

Test pravidel v novém chatu
Přidej na konec itineráře tip na dopravu z Prahy 6.

Vytváření skills pro Codex

Spuštění tvůrce skillu
$skill-creator

Zadání skillu Vyúčtuj
Vytvoř osobní skill s názvem vyuctuj, ať ho mám k dispozici i v dalších složkách. Když ho použiju, pracuj jen s kopiemi fiktivních nebo necitlivých účtenek v právě otevřené složce. Z každé vytáhni datum, obchod, částku a co se nakupovalo. Vytvoř novou tabulku seřazenou podle data a dole celkový součet. Nic nemaž, nepřejmenovávej ani neupravuj. Když si nebudeš jistý, zastav se a zeptej se. Než skill uložíš mimo aktuální projekt, ukaž mi cílovou cestu a vyžádej si schválení.

Spuštění skillu
@vyuctuj

Ověřit na mapách
Ke každé aktivitě přidej tlačítko Ověřit na mapách. Po kliknutí se otevřou Google Mapy s vyhledaným názvem místa a městem.

Druhá kontrola výstupu
Teď výsledek znovu zkontroluj proti původním souborům. U každého čísla napiš, odkud pochází, a vypiš všechno, čím si nejsi jistý.

Příklad vágního zadání
Udělej mi appku na cvičení.

Oprava chyby
Tohle se stalo, oprav to.