Vibmy Academy
Pro učitele
Učitelský účet zdarma pro pedagogy

Pošlete studentům

Poslat emailem
navigace

Vibecoding
Programování budoucnosti

Kompletní průvodce pro učitele.
Naučte studenty vytvářet software pomocí AI — bez znalosti syntaxe.

#vibecoding
Pro všechny předměty Žádné předchozí znalosti Výsledky za minuty
Definice

Co je
vibecoding?

Vibe coding je nový způsob tvorby webu. Místo toho, abys psal/a každou řádku kódu, popisuješ AI, co chceš — a ono to napíše za tebe.

Klasické programování

Učíte se syntaxi, píšete kód řádek po řádku, ladíte chyby

VS

Vibecoding

Popíšete co chcete, AI vygeneruje kód, vy ho spustíte

Vibecoding není podvádění — je to nová dovednost 21. století.

Pro učitele

Proč učit
vibecoding?

Rychlé výsledky

Studenti vidí funkční výstup za minuty, ne za týdny.

Pro všechny

Nejen pro IT obory. Ekonomie, design, marketing...

Rozvíjí myšlení

Studenti se učí dekomponovat problémy a formulovat zadání.

Praxe

Firmy aktivně hledají lidi, kteří umí pracovat s AI.

Motivace

Když student vidí výsledek hned, chce pokračovat.

Budoucnost

Do 5 let bude vibecoding standardní dovednost.

Workflow

Jak to
funguje?

1

Formulujte zadání

Popište co chcete vytvořit. Čím přesněji, tím lepší výsledek.

2

AI vygeneruje kód

ChatGPT, Claude nebo Gemini vytvoří HTML/CSS/JS/PHP kód.

3

Ověřte a upravte

Prohlédněte výsledek. Pokud něco nesedí, upřesněte zadání.

4

Nasaďte online

Nahrajte kód na Vibmy a máte web na vlastní adrese.

Celý proces trvá 5–15 minut. Žádná instalace, žádný server.

Klíčová dovednost

Umění psát
prompty

Špatný prompt

Prompt
"Udělej mi web"

Příliš vágní. AI neví co chcete — jaký web? Pro koho? Jaký styl? Kolik stránek? Výsledek bude generický a nepoužitelný.

Dobrý prompt

Prompt
"Vytvoř mi jednostránkový web pro školní kavárnu. Chci tmavý design, sekce: menu s 5 nápoji a cenami, otvírací doba (Po–Pá 8–15), kontaktní formulář. Použij HTML a CSS, moderní vzhled s fontem Inter."

Konkrétní, jasná struktura, definovaný styl. AI přesně ví, co má vytvořit — výsledek bude odpovídat očekávání.

Buďte konkrétní

Čím více detailů, tím lepší výsledek

Popište strukturu

Jaké sekce, kolik položek, jaká data

Uveďte styl/design

Barvy, fonty, tmavý/světlý, moderní/retro

OpenAI ChatGPT

Vibecoding v ChatGPT

Nejpopulárnější AI asistent

  • Zdarma (GPT-4o mini) i placená verze (GPT-4o, o3)
  • Canvas editor — úpravy kódu přímo v chatu
  • Generuje HTML, CSS, JS, Python, PHP
  • Ideální pro začátečníky
chat.openai.com
Prompt
"Vytvoř mi interaktivní kvíz o hlavních městech Evropy. 10 otázek, 4 možnosti odpovědí, skóre na konci. Moderní design, tmavé pozadí, animace při správné/špatné odpovědi. Výstup jako jeden soubor index.html."

Tip: Řekněte „výstup jako jeden soubor index.html" — snáz se nahrává na hosting

Anthropic Claude

Vibecoding v Claude

Nejlepší pro delší a složitější projekty

  • Artifacts — živý náhled přímo v chatu
  • Vynikající pro HTML/CSS/JS projekty
  • Lépe chápe kontext a požadavky
  • Claude Code — nasazení přes terminál přímo na Vibmy
claude.ai
Prompt
"Vytvoř kompletní osobní portfolio web. Sekce: hero s animovaným pozadím, O mně s fotkou placeholder, Projekty jako karty s hover efektem, Dovednosti jako progress bary, Kontaktní formulář. Dark theme, font Inter, plynulé scroll animace. Jeden soubor index.html."

Tip: Claude Artifacts umožňují okamžitý náhled — vidíte web ještě před stažením

Google Gemini

Vibecoding v Gemini

Integrovaný v Google ekosystému

  • Zdarma pro všechny s Google účtem
  • Gemini 2.5 Pro — silný v kódu
  • Integrace s Google Workspace
  • Google AI Studio pro pokročilé
gemini.google.com
Prompt
"Vytvoř webovou aplikaci — jednoduchý kalkulátor měsíčních výdajů. Kategorie: bydlení, jídlo, doprava, zábava. Graf výdajů jako koláčový diagram (použij Chart.js z CDN). Tmavý design, responzivní. Jeden soubor index.html."

Tip: Gemini je nejdostupnější — stačí Google účet, který studenti obvykle mají

Další platformy

Další nástroje
pro pokročilé

Cursor

AI-powered editor. Píšete kód a AI vám pomáhá v reálném čase. Pro studenty, kteří chtějí jít hlouběji.

cursor.com

Bolt.new

Celá appka přímo v prohlížeči. Stačí popsat co chcete a Bolt vytvoří kompletní projekt.

bolt.new

Replit

Online IDE s AI asistentem. Kód, běh i hosting na jednom místě. Skvělé pro výuku.

replit.com

v0 by Vercel

Specializovaný na UI komponenty a React. Ideální pro design-first projekty.

v0.dev

Všechny tyto nástroje generují kód, který můžete nahrát na Vibmy.

Porovnání

Kterou platformu
zvolit?

ChatGPT

Nejlepší pro začátečníky

Doporučujeme začít zde

Claude

Nejlepší kvalita kódu

Nejlepší výstup

Gemini

Nejdostupnější (zdarma s Google účtem)

Zdarma pro všechny

Cursor / Bolt

Pro pokročilé studenty

Další level

Pro výuku doporučujeme začít s ChatGPT (jednoduchost) nebo Claude (kvalita). Gemini je skvělá alternativa díky dostupnosti.

Hands-on #1

Vyzkoušejte si:
Osobní web

1

Otevřete AI nástroj

ChatGPT, Claude, nebo Gemini — vyberte si jakýkoliv.

2

Zadejte prompt:

Prompt
"Vytvoř mi osobní webovou stránku. Jmenuji se [vaše jméno], studuji [váš obor] na [vaše škola]. Chci sekce: Hero s mým jménem a krátkým mottem, O mně (3 odstavce), Moje projekty (3 placeholder karty), Kontakt s emailem a odkazy na sociální sítě. Tmavý moderní design, plynulé animace při scrollu, font Inter. Výstup jako jeden soubor index.html."
3

Zkopírujte kód

Celý výstup zkopírujte (Ctrl+C / Cmd+C).

4

Nahrajte na Vibmy

Přihlaste se na vibmy.cz, vytvořte projekt, vložte kód a klikněte Nasadit.

Hotovo!

Váš web běží na [slug].vibmy.cz

Časová náročnost: 5–10 minut

Hands-on #2

Vyzkoušejte si:
Interaktivní kvíz

1

Zvolte téma kvízu

Může být z jakéhokoliv předmětu: dějepis, zeměpis, biologie, literatura...

2

Zadejte prompt:

Prompt
"Vytvoř interaktivní webový kvíz na téma [vaše téma]. 10 otázek, u každé 4 možnosti. Po odpovědi okamžitě ukaž správnost (zelená/červená). Na konci celkové skóre s hodnocením (0–4 Začátečník, 5–7 Pokročilý, 8–10 Expert). Tmavý design s gradientovým pozadím, animace přechodů, progress bar nahoře. Jeden soubor index.html."
3

Zkopírujte a nasaďte

Stejný postup jako u příkladu 1 — zkopírujte kód, vložte na Vibmy, klikněte Nasadit.

Nápad pro učitele: Nechte každého studenta vytvořit kvíz ze svého předmětu. Pak si kvízy navzájem vyzkoušejí!

Inspirace

Nápady
pro vaši výuku

Kalkulačka

Kalkulátor BMI, převodník jednotek, finanční kalkulačka... Matematika v praxi.

Časovač / Timer

Pomodoro timer, odpočítávání do maturity, stopky pro tělocvik.

Vizualizace dat

Grafy z CSV dat, interaktivní statistiky, dashboardy.

Blog / Deník

Studentský blog, čtenářský deník, zápisky z výuky.

Hry

Had, Pong, Memory, vědomostní soutěže. Programování = zábava.

E-shop / Katalog

Fiktivní e-shop, katalog knih, školní bazar.

Cokoliv si dokážete popsat slovy, AI to dokáže vytvořit.

Vibmy

Kód je hotový.
Kam s ním?

AI vygeneruje kód

z ChatGPT, Claude, Gemini

Nahrajte na Vibmy

paste, upload, nebo CLI

Web je online!

student.vibmy.cz

Platba za spotřebu
4 Kč / den
  • 3 dny zdarma
  • PHP + MySQL
  • Vlastní adresa + SSL
  • Monitoring chyb
  • Historie verzí

Slevový kód: WANT2KNOW — 50% sleva pro studenty

Začněte na vibmy.cz

Vibecoding je budoucnost
výuky

Vibecoding je dovednost

Naučte studenty formulovat zadání pro AI. To je dovednost, kterou budou potřebovat v každé profesi.

Výsledky motivují

Když student za 10 minut vidí svůj web online, chce pokračovat. Motivace je klíčová.

Začněte jednoduše

Nemusíte měnit celý sylabus. Stačí jedna hodina, jeden projekt, jeden wow efekt.

Zdroje a odkazy

vibmy.cz — hosting pro studentské projekty
chat.openai.com — ChatGPT
claude.ai — Claude
gemini.google.com — Gemini

Kontakt: support@vibmy.cz

Slevový kód: WANT2KNOW
vibmy.cz
1 / 15