Kreativní výuka, od inspirace k vlastní tvorbě. Učíme limity — žáci píšou prompty cíleně, iterují po kouskách a vidí, co AI opravdu umí.
P. Vaněk · vanekpa@zs16.plzen-edu.cz · canvaveskole.com
Vibe-coding přímo v Canvě. Žák popíše, co chce — Canva vygeneruje funkční hru, kvíz nebo aplikaci.
Profi verze pro doladění. Vlastní doména, větší možnosti, kód, databáze. Ukažte žákům, kam až se dá jít.
Všechny ukázky níž běží v prohlížeči — na PC, tabletu i telefonu. Stačí odkaz.
12 reálných projektů seřazených podle náročnosti. Otevřete v novém okně — všechno funguje i na mobilu.
Zvládneš roli třídního učitele?
Odpočet do konce hodiny pro třídu.
Jednoduchý procvičovací nástroj.
Náhodný výběr — easy verze v Canvě.
Lehká hra k výuce historie.
Krátká hra na historické téma.
Bankomat výher — lehká kvízová hra.
Pokročilá interaktivní práce.
Komplexní úniková hra.
Doladěno v Lovable — profi verze.
Hra pro učitele — doladěno v Lovable.
Upgradovaná verze Digipekla — doladěno v Lovable.
Otevřete v Canvě, vytvořte si kopii a upravte podle sebe. Ideální start pro vlastní projekt — nemusíte řešit layout od nuly.
Vánoční svetr — kreativní šablona pro tvorbu vlastních vzorů.
Sada geometrických tvarů a prvků pro rychlou vizuální tvorbu.
Šablona komiksu — bubliny, panely, efekty. Pro češtinu i dějepis.
Hra „Kufr“ — slova, kategorie, tipování. Připravená k použití ve třídě.
Šablona žákovského portfolia — strukturovaná, čistá, snadno upravitelná.
Dva celé záznamy mých webinářů o Canva Code — kompletní postup, ukázky a tipy. Zdarma na YouTube.

Kompletní záznam workshopu (s časomírou).

Druhý díl — pokročilejší ukázky a Q&A.
Kompletní přehled obou webinářů v jednom dokumentu — postupy, prompty, ukázky a tipy k použití ve výuce.
Žákům ukazujeme i „profi verzi" vibe-codingu. Stejný princip (popíšu → vznikne aplikace), ale větší kontrola, vlastní doména, databáze, opravdový kód.
Nasdílíte projekt na vlastní URL — ne jen .canva.site.
Více obrazovek, databáze, přihlášení uživatelů, AI funkce.
Žák vidí, že za vibe-codingem je opravdový React. Otevírá to cestu k programování.
Prototyp v Canvě → doladění v Lovable. Viz kolotoc.peklo-edu.cz nebo tridni-ucitel.
Použijte můj zvací odkaz — pomůžete tím i tomuhle projektu.
V Canvě si žáci málokdy uvědomí, že AI má hranice. „Vytvoř mi hru" → dostanou cokoliv. Tady je naopak vedeme k tomu, aby chápali, co stojí za promptem — tokeny, kredity, čas modelu, kontext.
Každý prompt model „přečte" jako tokeny (≈ 1 token = 4 znaky). Krátký nepřesný prompt = krátká nepřesná odpověď a další pokus = další kredit.
Lekce pro žáky: radši napíšu o pět vět víc a dostanu výsledek napoprvé, než pětkrát opravovat.
Místo „vytvoř mi hru" → dnes herní mechanika, zítra grafika, pozítří zvuky. Žák vidí, jak projekt roste a jak se každá změna projeví.
Iterace > jeden velký prompt.
Model si „nepamatuje" celý projekt do nekonečna. U dlouhých chatů je dobré shrnovat, co už máme, a vracet se k zadání. Žáci se učí pracovat se stavem — stejně jako v reálném programování.
Když to nefunguje, neřeknu „oprav to". Popíšu, co nefunguje a co jsem čekal. Čtení výstupu, hledání chyby, hypotéza → nejcennější dovednost, kterou si žák odnese.
„Vytvoř mi hru."
Spotřebuje kredit, dostanete náhodný výsledek, žák se nic nenaučí.
„Vytvoř 2D plošinovku v prohlížeči. Hráč ovládá kočku šipkami, sbírá ryby (10 kusů = výhra), vyhýbá se psům. Tmavý styl, animace skoku. Začni jen s pohybem — bez nepřátel."
Jasný cíl, mechaniky, omezení, první krok. AI ví, co dělat.
„2D plošinovka, canvas 800×450, 60 FPS. Hráč: kočka 32×32 px, gravitace 0.6, skok −11. Šipky ←/→ pohyb (5 px/frame), mezerník skok (jen z podlahy). Sbírej 10 ryb (kolize AABB), vyhýbej se 3 psům s patrolováním. Vítězství: overlay s tlačítkem Restart. Tmavé pozadí #1a1a2e, kočka oranžová. Klávesnice + dotyk (mobil). Když hráč spadne mimo canvas → reset. Začni jen s pohybem a podlahou — bez nepřátel ani sběru."
Konkrétní čísla, mechaniky, edge-cases, accessibility. AI nic neimprovizuje.
Než půjdeš do Canva Code / Lovable, napiš si prompt nejdřív s pomocí ChatGPT (nebo jiného chatu). Šetří to kredity i nervy. Použij šablonu níž a doplň, co chceš tvořit:
Jsem učitel a budu v Canva Code (vibe-coding) tvořit: [stručně popiš projekt, např. „hru na násobilku pro 4. třídu"]. Napiš mi co nejpodrobnější prompt v češtině, který: - definuje cíl, cílovku a kontext (škola, věk), - popíše mechaniky, vstupy, výstupy a vítězný stav, - určí styl (barvy, font, atmosféru), - vyjmenuje omezení (bez reklam, bez přihlášení, jeden screen), - rozdělí práci na malé kroky (co udělat jako první).
Tip: výsledek si přečti, zkrať na podstatu a teprve pak vlož do Canvy.
Pro koho/co děláme. „Hra pro 4. třídu na násobilku.
Co se má dít. Vstupy, výstupy, vítězný stav.
Vizuál, barvy, atmosféra. „Pixel art, žluto-oranžová.
Co nedělat. „Bez reklam, bez přihlášení, jeden screen.
Co chci nejdřív. „Začni jen s pohybem postavy.
Po každé změně otestovat a zadat další malý krok.
Než začneš, řekni AI na čem to poběží a kdo to bude ovládat. Mobil, interaktivní panel ve třídě, PC pro víc hráčů — pokaždé jiný kód.
„Cílové zařízení: mobilní telefon na výšku (375×812). Layout 100% šířky, velké tlačítka min. 56 px, žádné hover-only interakce. Ovládání prstem (tap, swipe), bez klávesnice. Funguje offline po načtení."
„Cílové zařízení: interaktivní panel 1920×1080, dotyk. Velký kontrastní font min. 32 px, tlačítka min. 80 px. Vše viditelné z 3 m. Bez drag & drop přes celou plochu (učitel by nedosáhl). Žádné scrollování — vše na jedné obrazovce."
„Cílové zařízení: PC, 2 hráči na jedné klávesnici. Hráč 1: WASD + Space. Hráč 2: šipky + Enter. Rozdělená obrazovka půl/půl, skóre nahoře. Možnost přidat 3.–4. hráče (IJKL + U / 8456 num). Žádné menu myší — jen klávesami."
Vytvoř webovou hru "Ovocný odstřelovač" pro výuku zeměpisu. ZAŘÍZENÍ A OVLÁDÁNÍ - Cílové zařízení: PC + interaktivní panel ve třídě (1920×1080). - 2 hráči na jedné klávesnici současně: · Hráč 1 (modrý zaměřovač): šipky ↑↓←→ pohyb, MEZERNÍK = výstřel. · Hráč 2 (červený zaměřovač): WASD pohyb, LEVÝ SHIFT = výstřel. - Žádná myš — vše klávesnicí, ať to funguje i bez stolu. HERNÍ MECHANIKA - Po obrazovce náhodně létá ovoce (jablko, banán, pomeranč, hruška, meloun). - Spawn každých 0,8 s, náhodný směr a rychlost (3–7 px/frame). - Hráč pohybuje zaměřovačem a střílí — když trefí ovoce, "rozstříkne se" (částicová animace + zvuk). - Skóre se počítá zvlášť pro každého hráče (zobrazení vlevo nahoře / vpravo nahoře). KVÍZOVÝ MOMENT - Když hráč sejme 5 kusů ovoce v řadě → hra se zastaví, objeví se modal s otázkou: "Které zemi patří tato vlajka?" + 4 možnosti (A/B/C/D). - Hráč odpovídá klávesami 1/2/3/4 (P1) nebo Q/W/E/R (P2). - Správná odpověď → +50 bodů a VŠECHNO OVOCE NA OBRAZOVCE ZRYCHLÍ o 20 %. - Špatná odpověď → −20 bodů, rychlost se nemění. - Po odpovědi modal zmizí, hra pokračuje. VIZUÁL - Tmavé pozadí s noční oblohou a hvězdami. - Ovoce v jasných barvách, zaměřovače modrý/červený kruh s křížem. - Fonty velké (min. 32 px), kontrastní — viditelné z 3 metrů. - HUD: skóre P1 vlevo, skóre P2 vpravo, počítadlo "do dalšího kvízu: X/5". OBSAH - 20 vlajek evropských zemí (Česko, Německo, Francie, Itálie, Polsko, ...). - Náhodný výběr, žádná otázka 2× za sebou. OMEZENÍ - Bez přihlášení, bez ukládání, vše v prohlížeči. - Funguje offline po načtení. - Jeden HTML soubor, žádné externí knihovny. ZAČNI POSTUPNĚ 1) Nejdřív jen jeden zaměřovač + 1 ovoce + střelba (žádné skóre). 2) Pak přidej spawn ovoce a počítání skóre. 3) Pak druhého hráče. 4) Nakonec kvízový modal a zrychlování.
💡 Všimni si: zařízení → ovládání → mechanika → vizuál → omezení → kroky. AI ví přesně, co dělat — a hlavně co nedělat.
Nejčastější problém u školních (EDU) účtů: Magic / Canva Code / AI funkce mají žáci zakázané z úrovně admina. Není to chyba Canvy — je to nastavení týmu.
Settings → Permissions → Magic and AI
Pouze School team admin (správce školního týmu). Učitel bez admin role to nezmění — pošlete tuhle stránku ICT koordinátorovi.
U EDU účtů jsou některé AI funkce defaultně omezené na učitele. Pokud chcete, aby žáci tvořili, je potřeba je explicitně povolit pro „Everyone" nebo „Students".

Takhle vypadá obrazovka, kterou admin uvidí.
Nové AI nástroje (Magic, Canva Code, experimenty) přicházejí nejdřív v angličtině. V češtině se objeví o pár týdnů / měsíců později. Stačí změnit jazyk účtu — a hned máte v menu o pár možností víc.
Jak na to
Settings → Account → Language → English (US)
Po obnovení stránky uvidíte víc tlačítek a beta funkcí. Kdykoliv lze přepnout zpátky.
Workshop žije — co se osvědčí ve třídě, přistane sem.