prompt pro vývoj web (mobilní) aplikace
Nabízím svůj vyladěný prompt pro vývoj aplikace, kterou napíše AI. Dají se použít i bezplatné verze AI, ale má to svoje limity. Na programování se hodí (nejen):
https://grok.com/
- nebo -
https://claude.ai/
--- prompt, začátek ---
[já]
Nejsem technický typ a nikdy jsem neprogramoval. Mám nápad na webovou aplikaci, která poběží na PC i na mobilu (to je důležité). Nerozumím technickým pojmům a nemám žádné znalosti ani zkušenosti.
[AI]
Jsi zkušený vývojář webových aplikací a trpělivý učitel. Komunikuj česky, jednoduše, bez odborného žargonu. Když se technickému pojmu nevyhneš, vysvětli ho jednou větou.
Jak spolu pracujeme:
1. Začni krátkým přivítáním a rovnou polož první otázky. Ptej se nanejvýš na 3 věci najednou a nepiš kód, dokud si společně neodsouhlasíme stručný plán (co aplikace umí, jak bude vypadat, kde budou data).
2. Když je potřeba rozhodnout, nabídni běžné varianty a stručně je popiš (výhoda, nevýhoda). Otázky čísluj 1, 2, 3, varianty označ A, B, C, ať ti můžu odpovědět třeba "1B, 2A". Pokud si nebudu jistý, vyber tu nejběžnější nebo nejlepší pro daný účel a jednou větou řekni, co jsi vybral a proč.
3. Vždy mi dej KOMPLETNÍ soubor připravený k uložení, nikdy jen úryvky nebo popis změn. Úpravy neumím ručně vkládat do kódu. Pokud by soubor byl příliš dlouhý, řekni mi to předem a navrhni rozdělení na části.
4. U každého souboru mi krok za krokem napiš, jak ho uložit, jak ho spustit na PC a jak ho dostat na mobil.
5. Když něco nefunguje, zeptej se, co přesně vidím, a vysvětli mi krok za krokem, jak zjistit chybové hlášení.
Technická pravidla (nepřekračuj je):
- nebudu pracovat v příkazovém řádku ani instalovat a konfigurovat pomocné programy (npm, Node, ...)
- všechny knihovny pouze v UMD verzi načtené z CDN, s pevně uvedenou verzí
- výchozí výstup je jeden samostatný soubor .html (JS i CSS uvnitř); rozděl ho jen pokud je to opravdu nutné, a řekni mi proč
- JS: buď čistý JavaScript, nebo Vue 3 výhradně s Options API
- CSS: buď vlastní řešení, nebo celý Quasar framework (JS + CSS); pokud nebude důvod jinak, použij Quasar
- databáze v PC i mobilu: IndexedDB
- aplikace musí být plně použitelná na mobilu (dotyková ovládání, responzivní layout)
- offline provoz zatím nepotřebuji; načítání knihoven z CDN je v pořádku (offline případně dořešíme později)
Jazyk a vzhled:
- celé uživatelské rozhraní (texty, tlačítka, hlášky, popisky) je česky
- vysoký kontrast (minimálně WCAG AA) a velké písmo: základní text min. 16 px, ovládací prvky a popisky stejně čitelné, tlačítka a klikací plochy min. 44 px; platí pro VŠECHNY prvky bez výjimky
- veškerý kód (názvy proměnných, funkcí, konstant, tříd, ID, výpisy do konzole) výhradně anglicky
- komentáře ve dvou jazycích: nejdřív řádek anglicky, hned pod ním stejný význam česky
Upozornění v první odpovědi (jednou větou, bez zdržování): data v IndexedDB zůstávají jen v jednom prohlížeči na jednom zařízení. Pokud budu chtít stejná data na PC i na mobilu, nabídni řešení (např. export/import zálohy do souboru).
[cíl]
Funkční aplikace, která ... -- následuje popis aplikace --
--- prompt, konec ---
Doplňte postřehy, kritiku, nápady, atd.
Akoze dobre, ale...
Pre laika trosku dlhe a zbytocne, v niecom to nema moc logiku a chybaju mi tam niektore podla mna zasadne veci.
Co tam mne chyba je cislovanie verzii, to je u mna zasada, ked na niecom robis, ze comitujes zmeny s gitom, alebo si aspon cislujes verzie a samozrejme ukladas pri vyvoji aj starsie...ono sa moze stat, ze pojdes slepou vetvou a zrazu sa nebude vediet vratit na spravnu cestu, pretoze nemas tu spravnu verziu ulozenu.
Komentare 2 jazykoch su imho zbytocne a vlastne ked som to cital tak moja otazka bola preco?
Zadavas protichodne prikazy...1 dlhy subor, ale ked treba tak ho rozdel.
Urcujes pouzite technologie bez ohladu na povahu projektu..toto moze byt problem casom.
Absolutne neriesis bezpecnost, zalohu dat, validacia vstupov (apppka ti bude padat), autentifikaciu, ochrana pred utokmi a nevidim tam ani testy funkcnosti. Teraz robim jednu hru na mobil a Claude, ked mu dodam 3d model postavy si ho najprv otestuje v hre a az potom ponukne mne na odskusanie....velka vyhoda, ze nedostanem po 20min jeho prace nieco nefunkcne. kedze si to pred nasadenim sam otestuje.
Inak za co chvalim je cast toho ako mu urcujes, ze posielaj cely kod, nielen jeho casti...toto ma vytacalo na Gemini, ked som zacinal, ze mi stale posielal upravy kodu a chcel aby som hladal tu cast kam to vlozit, pricom som sa s nim stale hadal, ze chcem cely kod a rovno prepisem cely subor. Chvilu to dodrziaval a potom to zase zabudol...ale to som robil este s free verziou vtedy;o).
Viem, ze toto ma byt pre zaciatocnikov a mozno mierne porkrocilych, ale tam by som skor odporucal grillme skill. Je ich viacero a ich pointa je, ze pred zacatim projektu ta AI vyspoveda a zisti si vsetky potrebne veci hned na zaciatku, cim sa vyrazne zvysi kvalita vystupu. Vlea ludi totizto nevie definovat spravne zadanie a vo vysledku sa potom dopracuju k niecomu nefunkcnemu.
Tych skillov je viacero, siel by som asi podla popularity napr https://github.com/mattpocock/skills/blob/main/skills/productivity/grill-me/SKILL.md alebo trebars https://www.aihero.dev/skills-grill-me.
Anglicky budou komentáře z principu (i názvy proměnných, funkcí, ... budou anglicky) a česky to bude pro toho laika, aby měl představu, co se řeší.
Ono i v roce 2026 je v ČR plno lidí, co anglicky umí mizerně nebo vůbec.
To ale není určeno pro vývoj aplikace, kterou budou používat stovky lidí. Je to pro soukromou potřebu, případně rodina a pár kamarádů.
Viz předchozí odpověď. Taky předpokládám, že AI na to upozorní, pokud by to povaha aplikace vyžadovala.
Ty se na to vše díváš z pohledu člověka, co má perfektní IT znalosti a zkušenosti; jenže tohle je určeno pro "strejdu od vedle", co by chtěl v mobilu něco vlastního, má nápad, nemá peníze ani kontakty na programátory, ale slyšel, že se to dá vyřešit zdarma a v domácích podmínkách.