Vlastní webová aplikace s AI za jedno odpoledne a bez programování: návod krok za krokem

Ještě před pár lety platilo, že kdo chce vlastní aplikaci, musí se naučit programovat, nebo zaplatit programátora. Dnes stačí umět dobře popsat, co chcete. Chatbot jako ChatGPT, Gemini, Claude nebo Grok vám podle popisu napíše hotový kód a vy ho jen uložíte do souboru a otevřete v prohlížeči.

V tomto návodu si takovou aplikaci postavíte krok za krokem: domácí rozpočet, do kterého zapisujete příjmy a výdaje a který vám ukáže, kolik vám v měsíci zbývá a za co nejvíc utrácíte. Celá aplikace je jeden soubor HTML, funguje bez internetu, bez registrace a bez serveru a data si pamatuje přímo ve vašem prohlížeči.

Podle promptů z článku jsme ukázkovou aplikaci sestavili a otestovali v prohlížeči Chromium, včetně oprav chyb, na které jsme cestou narazili. Váš chatbot vygeneruje jiný kód, postup ale zůstává stejný. Hotovou verzi si můžete stáhnout a porovnat se svou. Údaje o nástrojích a hostingu jsme ověřili na oficiálních stránkách k 15. 10. 2026.

Co budete potřebovat

• Počítač s prohlížečem (Chrome, Edge, Firefox nebo Safari). Na mobilu se aplikace dobře používá, ale tvořit ji je pohodlnější na počítači.
• Jakýkoli AI chat. Stačí bezplatná verze ChatGPT, Gemini, Claude nebo Groku. Bezplatné verze mají omezený počet zpráv, na tento projekt ale obvykle stačí.
• Obyčejný textový editor, který máte v počítači: Poznámkový blok ve Windows nebo TextEdit na Macu.
• Zhruba tři až čtyři hodiny, tedy jedno odpoledne. Samotné vygenerování trvá minuty, nejvíc času zabere zkoušení a vylepšování.

Programovat umět nemusíte. Pomůže, když víte, co je prompt a jak zhruba funguje chatbot. Pokud ne, začněte článkem Jak napsat dobrý prompt.

Jak to funguje (a proč zrovna jeden soubor)

Webová aplikace je v nejjednodušší podobě soubor HTML. Obsahuje tři věci: HTML (co je na stránce), CSS (jak to vypadá) a JavaScript (co se stane, když na něco kliknete). Prohlížeč umí takový soubor otevřít přímo z disku, stejně jako fotku nebo PDF.

Data aplikace ukládá do localStorage. To je malé úložiště, které má každý prohlížeč pro každou webovou stránku. Zápisy v něm zůstanou i po zavření prohlížeče nebo restartu počítače.

Pro začátek je to ideální kombinace:

• nepotřebujete server, databázi, účet ani platbu,
• nic se neinstaluje,
• data neopouštějí váš počítač,
• když se něco pokazí, prostě soubor přepíšete novou verzí.

Má to i své meze, k nim se dostaneme v části o bezpečnosti.

Krok 1: Naplánujte aplikaci s AI

Nejčastější chyba začátečníků je napsat „udělej mi aplikaci na rozpočet“ a čekat zázrak. AI pak doplní spoustu věcí po svém. Lepší je nejdřív si s ní aplikaci naplánovat. Otevřete nový chat a vložte:

Chci si nechat vytvořit jednoduchou webovou aplikaci „Domácí rozpočet“ pro osobní použití. Nejsem programátor.

Technické podmínky:
- jeden soubor index.html (HTML, CSS a JavaScript dohromady), který otevřu dvojklikem v prohlížeči,
- žádný server, žádná databáze, žádné externí knihovny ani odkazy na internet,
- data se ukládají do localStorage v prohlížeči,
- celé rozhraní česky, částky v Kč.

Co má aplikace umět:
- zapsat příjem nebo výdaj: datum, částka, kategorie, krátký popis,
- ukázat přehled vybraného měsíce: příjmy, výdaje, zůstatek,
- ukázat výdaje podle kategorií,
- smazat chybnou položku.

Zatím nepiš kód. Napiš mi stručnou specifikaci: seznam funkcí, rozvržení obrazovky, jaká data se budou ukládat a seznam kategorií. Pak se mě zeptej na nejvýš 5 věcí, které jsou nejasné.

Na otázky odpovězte. Typicky se AI zeptá na vlastní kategorie, na to, zda je popis povinný, co přesně znamená zůstatek, jestli mají jít položky upravovat, zda chcete zálohu dat, na jakém zařízení budete aplikaci používat a jaký má mít vzhled. Odpovědi pište běžným textem do chatu, i když vám ChatGPT nabídne volby k proklikání; stačí stručně, třeba v bodech. Držte se při tom zásady: první verze má být malá. Grafy, rozpočtové limity nebo více uživatelů přidáte později, nebo vůbec.

Proč nejdřív specifikace? AI dostane jasné zadání a vy si ujasníte, co vlastně chcete. Specifikaci si uložte, budete se k ní vracet.

Krok 2: Nechte AI vytvořit aplikaci

Ve stejném chatu pokračujte:

Specifikace je v pořádku. Teď napiš celou aplikaci jako jeden kompletní soubor index.html.

Požadavky:
- napiš celý soubor od <!DOCTYPE html> do </html>, nic nevynechávej a nepiš „zde doplňte“,
- přehledný a moderní vzhled, dobře použitelný i na mobilu,
- částku musím umět zadat i s desetinnou čárkou a mezerami, například „1 250,50“,
- nová položka má mít předvyplněné dnešní datum,
- před smazáním položky se aplikace zeptá na potvrzení,
- při chybném zadání zobraz srozumitelnou hlášku česky,
- v kódu stručné komentáře česky.

Pod kód napiš 3 věty, jak aplikaci spustit.

AI odpoví dlouhým blokem kódu. Většina chatbotů má u bloku kódu tlačítko pro zkopírování, použijte ho, ať nic nevynecháte.

Pozor na příliš dlouhou odpověď: Při našem ověřování v ChatGPT bez přihlášení se u dlouhé odpovědi (přes 16 000 znaků) opakovaně stalo, že blok s kódem po dokončení úplně zmizel. Zůstal jen úvod a tři věty o spuštění, tlačítko pro kopírování nešlo použít a záložka prohlížeče někdy spadla. Konverzace bez přihlášení se navíc neukládá, takže se k ní už nevrátíte.

Co spolehlivě pomohlo: hned napsat „Napiš celý soubor znovu, ale výrazně stručněji, maximálně asi 150 řádků. Funkce zachovej.“ Kód o zhruba 5 700 znacích se pak zobrazil bez potíží. Kratší soubor je navíc přehlednější a snáz se opravuje. Pokud můžete, buďte v chatbotovi přihlášení, aby se konverzace uložila.

Když odpověď skončí uprostřed kódu, můžete napsat „Pokračuj přesně tam, kde jsi skončil“. Bezpečnější je ale nechat si poslat celý, stručnější soubor znovu. Slepovat kód z více kusů je častým zdrojem chyb.

Všimněte si dvou požadavků v promptu, které jsme tam dali záměrně: desetinná čárka a dnešní datum. Přesně na nich jsme při testování narazili na chyby (viz krok 5). Když je AI zmíníte rovnou, často si ušetříte celé kolo oprav: při ověření s tímto promptem v ChatGPT už aplikace četla „89,90“ i „32 000“ správně.

Krok 3: Spusťte aplikaci v počítači

1. Otevřete textový editor (Poznámkový blok nebo TextEdit).
2. Vložte zkopírovaný kód.
3. Uložte soubor jako index.html do nové složky, třeba rozpocet na ploše. Kódování zvolte UTF-8, pokud se editor ptá.
4. Soubor otevřete dvojklikem. Spustí se ve vašem výchozím prohlížeči.

Dvě věci, které začátečníky zaskočí nejčastěji:

• Soubor se uloží jako index.html.txt. Windows standardně skrývají přípony, takže název vypadá správně, ale soubor se otevře znovu v editoru. Při ukládání zvolte typ „Všechny soubory“, nebo si v Průzkumníku zapněte zobrazování přípon a příponu .txt smažte.
• TextEdit na Macu uloží soubor jako formátovaný text. Před vložením kódu přepněte dokument na prostý text (v menu Formát). Jinak se v prohlížeči objeví místo aplikace změť znaků.

Teď aplikaci vyzkoušejte: zapište výplatu, pár výdajů v různých kategoriích, jednu položku smažte. Pak zavřete prohlížeč a soubor otevřete znovu. Pokud data zůstala, ukládání funguje.

Krok 4: Přidejte funkci dalším promptem

Aplikace teď data ukládá jen v prohlížeči. Když ho přeinstalujete, smažete historii nebo přejdete na jiný počítač, data jsou pryč. Proto je první funkcí, kterou doporučujeme přidat, záloha:

Aplikace funguje. Přidej do ní zálohu dat:
- tlačítko „Stáhnout zálohu“, které uloží všechny položky do souboru JSON s dnešním datem v názvu,
- možnost obnovit data ze zálohy výběrem souboru; před přepsáním současných dat se aplikace zeptá na potvrzení,
- když vyberu špatný soubor, aplikace nespadne, ale napíše srozumitelnou chybu.

Nic jiného neměň. Pošli mi celý upravený soubor index.html.

Věta „Nic jiného neměň“ je důležitá. Bez ní AI často „vylepší“ i věci, které jste měnit nechtěli, a do fungujících částí zanese nové chyby. Stejně důležité je chtít celý soubor, ne jen úryvek s popisem, kam ho vložit. Ručně vkládat kusy kódu je pro začátečníka nejsnazší způsob, jak aplikaci rozbít.

Novou verzi uložte přes starou, stránku v prohlížeči obnovte (klávesa F5, na Macu Cmd + R) a zálohu hned vyzkoušejte: stáhněte ji, jednu položku smažte a data ze zálohy obnovte.

Krok 5: Opravte chybu

Při testování a kontrole naší první verze jsme narazili na dvě skutečné chyby, které jsou u aplikací tohoto typu velmi časté. S promptem z kroku 2, který čárku i mezery v částce výslovně zmiňuje, se první z nich při našem ověření v ChatGPT už neobjevila. Jiná odpověď nebo jiný chatbot ji ale udělat může, proto částky vždy zkontrolujte:

• Částka „89,90“ se uložila jako 89 Kč a výplata „32 000“ jako 32 Kč. Aplikace četla číslo jen do první čárky nebo mezery. Žádná chybová hláška se neobjevila, čísla byla prostě tiše špatně. Proto je důležité výsledky kontrolovat, ne jen klikat.
• Dnešní datum bylo mezi půlnocí a druhou ráno včerejší. Aplikace počítala datum ve světovém čase (UTC), ne v našem časovém pásmu.

Takovou chybu AI popište konkrétně: co jste udělali, co jste čekali a co se stalo místo toho. Následující prompt použijte jen tehdy, když chybu s částkou opravdu vidíte. Pokud vaše aplikace čárku i mezery už zpracovává správně (s promptem z kroku 2 je to pravděpodobné), tento krok přeskočte.

V aplikaci je chyba. Když zadám částku „89,90“, uloží se 89 Kč. Když zadám „32 000“, uloží se 32 Kč. Očekávám 89,90 Kč a 32 000 Kč.

Oprav načítání částky tak, aby fungovala desetinná čárka i tečka a mezery mezi tisíci. Neplatný vstup (například „abc“ nebo záporné číslo) odmítni s hláškou. Nic jiného neměň a pošli celý soubor index.html.

Jiný druh chyb jsou ty, kdy aplikace nefunguje vůbec: tlačítko nereaguje nebo je stránka prázdná. Pak se podívejte do konzole prohlížeče. Otevřete ji klávesou F12 (na Macu Cmd + Option + I; v Safari je nejdřív potřeba zapnout vývojářské funkce v nastavení) a přepněte na záložku Console (Konzole). Červený řádek je chybová hláška. Zkopírujte ji celou a vložte do chatu:

Po kliknutí na „Přidat“ se nic nestane. V konzoli prohlížeče je tato chyba:

[sem vložte celý červený text chyby, včetně čísla řádku]

Vysvětli mi jednou větou, co chybu způsobuje, oprav ji a pošli celý soubor index.html. Nic jiného neměň.

Po každé opravě znovu vyzkoušejte i to, co fungovalo předtím. Oprava jedné věci občas rozbije jinou.

Když se oprava točí v kruhu: Pokud AI třikrát po sobě „opraví“ chybu a ta pořád trvá, začněte nový chat. Vložte do něj specifikaci z kroku 1, poslední funkční verzi souboru a popis chyby. Dlouhá konverzace plná pokusů AI spíš mate, než pomáhá.

Krok 6: Uložte si verze a zálohujte

Než budete aplikaci dál vylepšovat, zaveďte si dva zvyky:

• Verze souboru. Funkční verzi si vždy uložte pod jiným jménem, třeba index-v2-zaloha-funguje.html. Když další úprava něco pokazí, máte se kam vrátit. Profesionálové na to používají nástroj Git, pro začátek stačí kopie souborů.
• Záloha dat. Tlačítko „Stáhnout zálohu“ použijte pravidelně, třeba jednou za měsíc. Soubor JSON si uložte do cloudu nebo na disk, kam zálohujete i fotky.

Pamatujte, že kód a data jsou dvě různé věci. Soubor index.html obsahuje jen aplikaci, vaše položky jsou v prohlížeči. Kopie souboru tedy data nezálohuje.

Krok 7: Zveřejněte aplikaci zdarma

Aplikaci můžete klidně používat jen ze svého disku. Pokud ji chcete otevírat i z mobilu nebo ji někomu ukázat, můžete ji zdarma zveřejnit na internetu. Dvě ověřené možnosti:

Netlify Drop je nejjednodušší cesta. Na stránku app.netlify.com/drop přetáhnete složku se souborem index.html a během chvíle dostanete veřejnou adresu. Podle dokumentace Netlify to jde i bez účtu, dokumentace ale doporučuje být přihlášený, abyste web mohli později spravovat a aktualizovat. Doporučujeme si proto nejdřív založit bezplatný účet. Novou verzi pak nahrajete opět přetažením složky na stránce daného webu.

GitHub Pages je o něco složitější, ale hodí se, pokud se chcete naučit pracovat s GitHubem. Založíte si bezplatný účet a veřejný repozitář (u bezplatného účtu musí být repozitář veřejný), nahrajete do něj index.html a v nastavení zapnete Pages. Podrobný postup je v oficiálním návodu GitHubu. Podle pravidel GitHub Pages nesmí web sloužit hlavně k obchodování (například jako e-shop) a nemá se používat k zadávání hesel nebo čísel karet a velikost webu je omezena na 1 GB, což je pro náš soubor mnohonásobně víc, než potřebuje.

Dvě důležité poznámky ke zveřejnění:

• Zveřejněný web vidí kdokoli, kdo zná adresu. Samotná aplikace ale vaše data nezveřejní. Položky zůstávají v prohlížeči každého, kdo ji otevře, a nikdo jiný je nevidí.
• Na nové adrese začnete s prázdnou aplikací. Prohlížeč ukládá data zvlášť pro každý web, takže verze na disku a verze na internetu data nesdílí. Přeneste je zálohou: na disku ji stáhněte, na webu obnovte. Stejně to platí pro mobil a počítač.

Nejčastější chyby a jak je opravit

Problém	Příčina	Řešení
Po dvojkliku se soubor otevře v editoru	Uložil se jako index.html.txt	Zapněte zobrazování přípon a .txt smažte
Místo aplikace je na stránce kód nebo podivné znaky	Soubor je uložený jako formátovaný text nebo chybí začátek kódu	Uložte jako prostý text, zkontrolujte, že soubor začíná <!DOCTYPE html>
Místo „Příjmy“ se zobrazuje „Příjmy“	Špatné kódování	Uložte soubor v kódování UTF-8
Stránka je prázdná nebo tlačítka nereagují	Chyba v JavaScriptu, často kód useknutý v půlce	Podívejte se do konzole (F12), chybu vložte do chatu; nebo si nechte poslat celý soubor znovu
Po úpravě zmizela funkce, která fungovala	AI „vylepšila“ i to, co neměla	Vraťte se k uložené verzi a v promptu zdůrazněte „Nic jiného neměň“
Zmizela data	Smazaná historie prohlížeče, anonymní okno nebo jiný prohlížeč či adresa	Obnovte data ze zálohy JSON
Čísla v přehledu nesedí	Chyba v načítání nebo sčítání částek	Zadejte pár položek, které si umíte spočítat z hlavy, a výsledek porovnejte

Bezpečnost a soukromí

• Do aplikace ani do chatu nedávejte hesla, PIN, čísla karet, rodná čísla ani přihlašovací údaje. Data v localStorage nejsou šifrovaná a může je přečíst kdokoli, kdo sedne k vašemu počítači. Pro hesla používejte správce hesel.
• Do chatu s AI vkládejte jen kód, ne svá skutečná data. Když potřebujete AI ukázat chybu, použijte vymyšlené položky. Co se s vašimi konverzacemi děje a jak vypnout trénování, popisujeme v článku o soukromí v AI chatbotech.
• localStorage má omezenou kapacitu. Podle MDN prohlížeče dovolí kolem 5 MiB na jeden web. Na tisíce položek rozpočtu to stačí, na fotky účtenek ne. V anonymním okně se data po zavření smažou a Safari se zapnutou ochranou proti sledování maže data webu, se kterým jste sedm dní nepracovali. Proto je záloha povinná, ne volitelná.
• AI dělá chyby i v kódu. Kód může vypadat profesionálně, a přesto počítat špatně, jak jsme viděli u desetinné čárky. U všeho, co pracuje s penězi nebo důležitými údaji, výsledky ručně ověřte. Proč AI někdy sebevědomě tvrdí nesmysly, vysvětlujeme v článku o halucinacích.
• Nevkládejte do aplikace kód z neznámých zdrojů. Pokud vám AI navrhne načítat knihovnu nebo skript z cizí adresy na internetu, zeptejte se, proč to je potřeba. Jednoduchá aplikace to obvykle nepotřebuje.

Co AI zatím nezvládá dobře

• Větší projekty. Jeden soubor o několika stech řádcích AI zvládá spolehlivě. U aplikací s mnoha soubory, přihlašováním a databází rychle přibývá chyb a bez základních znalostí programování se v nich špatně orientujete.
• Bezpečnost. Aplikace s uživatelskými účty, platbami nebo citlivými údaji nechte zkontrolovat odborníkem. AI v takovém kódu běžně vynechá ochrany, o kterých začátečník neví, že by tam měly být.
• Dlouhé konverzace. Po desítkách úprav AI zapomíná dřívější požadavky a vrací chyby, které už jednou opravila. Pomáhá začít nový chat se specifikací a poslední verzí kódu. Proč se to děje, vysvětluje heslo kontextové okno ve slovníčku.
• Odhadnout, co chcete. AI nedoplní, co jí neřeknete, a když to doplní, nemusí to být podle vás. Čím přesnější zadání, tím lepší výsledek.

Specializované nástroje: AI Studio, Lovable, Bolt a Replit

Kromě běžného chatu existují nástroje, které aplikaci rovnou sestaví, spustí v náhledu a umí ji i zveřejnit. Nemusíte nic kopírovat ani ukládat. Za pohodlí ale platíte složitějším kódem (obvykle více souborů a moderní frameworky), který se bez nástroje hůř upravuje, a limity bezplatných tarifů. Pro první seznámení s tím, jak aplikace funguje, proto doporučujeme postup z tohoto návodu. Stav podle oficiálních stránek k 15. 10. 2026:

Nástroj	Bezplatný tarif	Co jsme ověřili
Google AI Studio (Build)	Ano, sestavování aplikací je součástí AI Studia	Vytváří webové aplikace s frontendem i serverovou částí a aplikace pro Android; vlastní limity pro Build oficiální stránka neuvádí; nasazení přes Google Cloud Run může být placené (dokumentace)
Lovable	Ano	5 kreditů denně, nejvýš 30 měsíčně; jednoduchá úprava stojí zhruba 0,5 až 2 kredity (ceník)
Bolt	Ano	300 000 tokenů denně, 1 milion měsíčně, na zveřejněném webu značka Bolt (ceník)
Replit	Ano (tarif Starter)	Denní kredity pro AI agenta s měsíčním stropem, jedna zveřejněná aplikace, která se po 30 dnech sama vypne (dokumentace)

Ceny placených tarifů se mění často, proto je neuvádíme. U Google AI Studia nedokážeme spolehlivě říct, kolik zpráv bezplatně dostanete. Limity se liší podle modelu a oficiální stránka Build je nevypisuje.

Co dál

Až vám rozpočet bude spolehlivě fungovat, zkuste ho vylepšit dalšími prompty. Vždy jednu věc najednou a vždy s větou „Nic jiného neměň“:

• měsíční limity pro kategorie s upozorněním, když se k limitu blížíte,
• graf vývoje zůstatku za posledních šest měsíců,
• opakované platby, například nájem, které se zapíšou samy každý měsíc,
• tmavý režim podle nastavení systému,
• export do CSV pro Excel nebo Google Tabulky.

Stejným postupem vytvoříte i jiné malé aplikace: plánovač jídel na týden s nákupním seznamem, evidenci domácích úkolů pro děti, deník tréninků nebo seznam knih, které chcete přečíst. Stačí v promptu z kroku 1 vyměnit popis funkcí. Další hotová zadání najdete v knihovně promptů.

Tento článek otevírá novou řadu návodů o tvorbě aplikací s pomocí AI. V dalších dílech se podíváme třeba na to, jak aplikaci dostat na mobil jako ikonu na ploše a jak ji sdílet s rodinou.

Časté otázky

Opravdu nemusím umět programovat? Pro malou aplikaci v jednom souboru ne. Musíte ale umět přesně popsat, co chcete, a pečlivě zkoušet výsledek. Časem se vám bude hodit rozumět aspoň základům, třeba co dělá který kus kódu. Na to se klidně zeptejte samotné AI.

Který chatbot je na to nejlepší? Jednoduchou aplikaci podle našeho postupu by měly zvládnout všechny velké chatboty. Výsledky se liší vzhledem a drobnostmi a každá odpověď je jiná i u stejného nástroje. Pokud vám jeden nástroj opakovaně nedokáže chybu opravit, zkuste jiný. Obecné srovnání najdete v článku ChatGPT vs. Gemini vs. Claude.

Stojí to něco? Ne. Bezplatná verze chatbota, textový editor a prohlížeč stačí. Netlify Drop i GitHub Pages mají bezplatné možnosti zveřejnění.

Smím aplikaci, kterou mi napsala AI, používat a sdílet? Pro osobní použití ano. Pokud ji chcete využít komerčně, přečtěte si podmínky konkrétního nástroje, pravidla se mezi nimi liší.

Uvidí moje data někdo další, když aplikaci zveřejním? Ne. Aplikace data nikam neodesílá, každý návštěvník má svá data jen ve svém prohlížeči. Veřejný je jen samotný kód aplikace.

Funguje to na mobilu? Ano, otevřete zveřejněnou adresu v mobilním prohlížeči. Data v mobilu jsou ale oddělená od dat v počítači, přenesete je zálohou.

Shrnutí

• Jednoduchou webovou aplikaci v jednom souboru HTML zvládnete s jakýmkoli bezplatným AI chatem za jedno odpoledne, bez programování.
• Postup: specifikace, vygenerování, uložení jako index.html, zkoušení, úpravy po jedné funkci, verze a zálohy, případně zveřejnění.
• V promptech chtějte vždy celý soubor a připište „Nic jiného neměň“. Chyby popisujte konkrétně a vkládejte celý text chyby z konzole.
• Data v localStorage zůstávají v prohlížeči, mají limit kolem 5 MiB a mohou se smazat. Zálohujte je.
• Do aplikace ani do chatu nepatří hesla a citlivé údaje. AI dělá chyby i v kódu, výsledky proto kontrolujte, hlavně u peněz.
• Zdarma zveřejníte přes Netlify Drop nebo GitHub Pages. Specializované nástroje jako Lovable, Bolt, Replit nebo Google AI Studio jsou pohodlnější, ale mají limity a složitější kód.
• Naši otestovanou ukázkovou aplikaci si můžete stáhnout.