Workshop pro učitele

CANVA AI→ Lovable

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

🎨

Canva Code

Vibe-coding přímo v Canvě. Žák popíše, co chce — Canva vygeneruje funkční hru, kvíz nebo aplikaci.

🚀

Lovable navazuje

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.

📱

Funguje i na mobilu

Všechny ukázky níž běží v prohlížeči — na PC, tabletu i telefonu. Stačí odkaz.

Ukázky od žáků a učitelů

Co všechno se dá udělat

12 reálných projektů seřazených podle náročnosti. Otevřete v novém okně — všechno funguje i na mobilu.

Krok dál

Když Canva nestačí — přepneme do Lovable

Žá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.

Vlastní doména

Nasdílíte projekt na vlastní URL — ne jen .canva.site.

Větší rozsah

Více obrazovek, databáze, přihlášení uživatelů, AI funkce.

Reálný kód

Žák vidí, že za vibe-codingem je opravdový React. Otevírá to cestu k programování.

Bezešvý workflow

Prototyp v Canvě → doladění v Lovable. Viz kolotoc.peklo-edu.cz nebo tridni-ucitel.

Chcete si Lovable vyzkoušet?

Použijte můj zvací odkaz — pomůžete tím i tomuhle projektu.

Přihlásit přes můj odkaz →
Klíčové téma workshopu

Učme limity

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.

⛽

Tokeny & kredity

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.

📅

Kousek každý den

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.

🧠

Kontextové okno

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í.

🐛

Práce s chybou

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.

❌ Úroveň 1 — Anti-vzor

„Vytvoř mi hru."

Spotřebuje kredit, dostanete náhodný výsledek, žák se nic nenaučí.

✅ Úroveň 2 — Cílený prompt

„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.

🔥 Úroveň 3 — „ECHT" prompt

„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.

💬

Nevíš, jak takový prompt napsat? Poraď se s ChatGPT.

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.

Recept

Jak psát dobrý prompt

1. Kontext

Pro koho/co děláme. „Hra pro 4. třídu na násobilku.

2. Cíl & mechaniky

Co se má dít. Vstupy, výstupy, vítězný stav.

3. Styl

Vizuál, barvy, atmosféra. „Pixel art, žluto-oranžová.

4. Omezení

Co nedělat. „Bez reklam, bez přihlášení, jeden screen.

5. První krok

Co chci nejdřív. „Začni jen s pohybem postavy.

6. Iterace

Po každé změně otestovat a zadat další malý krok.

Mysli na zařízení

Cíl rozhoduje o platformě

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.

📱

Mobil first

„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í."

🖥️

Interaktivní panel ve třídě

„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."

⌨️

PC pro 2+ hráče

„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."

🍎Ukázka — kompletní zadání

„Sejmi létající ovoce + kvíz vlajek"

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.

Pro učitele s EDU licencí

Když žáci AI funkce nevidí

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.

1. Cesta v Canvě

Settings → Permissions → Magic and AI

2. Co povolit

  • Who can use Magic Write → Everyone
  • Who can use Magic Design / Edit / Media → Everyone
  • Who can use Magic Insights → Everyone
  • Who can use Canva Code → Everyone

3. Kdo to zapne

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.

💡 Tip

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".

Náhled obrazovky Permissions v Canvě — sekce Magic and AI

Takhle vypadá obrazovka, kterou admin uvidí.

Canva tipy

Drobnosti, které pomůžou

🌍Tip #1

Chcete novější AI funkce? Přepněte si Canvu do angličtiny.

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.

✨

Další tipy průběžně přibývají

Workshop žije — co se osvědčí ve třídě, přistane sem.