Úvod do vibecodingu Práce s AI nástroji Návrh jednoduchého webu nebo aplikace Tvorba jednoduchých webových výstupů pomocí AI Úpravy HTML, CSS a JavaScriptu pomocí AI Tvorba jednoduchých skriptů a automatizací Testování, ladění a kontrola výstupů Praktické cvičení a závěrečný prototyp
Obsah kurzu
Úvod do vibecodingu
co je vibecoding neboli vibe coding
pro koho je vhodný a kdy může zrychlit práci
rozdíl mezi klasickým programováním a tvorbou s pomocí AI
typické výstupy, například webová stránka, landing page, mailing, formulář nebo prototyp aplikace
možnosti a limity současných AI nástrojů
kdy stačí výstup z AI a kdy je vhodné zapojit vývojáře
Práce s AI nástroji
přehled dostupných AI nástrojů pro tvorbu kódu a prototypů
ChatGPT, Gemini, Claude a další nástroje v základním přehledu
jak správně formulovat zadání pro AI
práce s kontextem, cílem, omezeními a příklady vstupů
jak zadávat úpravy, opravy a doplňující požadavky
nejčastější chyby při promptování
kontrola, zda výstup odpovídá skutečnému zadání
Návrh jednoduchého webu nebo aplikace
upřesnění cíle webu, aplikace nebo prototypu
výběr vhodné technologie podle typu výstupu
návrh struktury stránky nebo jednoduché aplikace
rozvržení obsahu a základní uživatelský průchod
příprava zadání pro HTML, CSS a JavaScript
debugging, tedy hledání a oprava chyb
testování funkčnosti v prohlížeči
základní možnosti publikování nebo předání výstupu
Tvorba jednoduchých webových výstupů pomocí AI
vytvoření jednoduché webové stránky
návrh landing page pro reklamní kampaň
příprava jednoduchého mailingu nebo e-mailové šablony
tvorba kontaktního nebo poptávkového formuláře
úprava textů, tlačítek, bloků a rozložení stránky
přizpůsobení výstupu značce, cílové skupině a účelu stránky
Úpravy HTML, CSS a JavaScriptu pomocí AI
vysvětlení neznámého HTML, CSS nebo JavaScriptového kódu pomocí AI
úprava struktury stránky v HTML
úprava vzhledu pomocí CSS
doplnění jednoduchého chování pomocí JavaScriptu
oprava chyb ve zdrojovém kódu
ladění výstupu podle skutečného vzhledu a funkčnosti
rizika nekontrolovaného vkládání kódu do webu
Tvorba jednoduchých skriptů a automatizací
pomocné skripty pro každodenní práci
transformace dat mezi různými formáty
automatizace opakujících se úkolů
úprava textových nebo tabulkových podkladů
generování jednoduchých výstupů podle zadání
základní princip tvorby AI agentů a jejich praktické limity
kontrola výsledků automatizace před použitím v praxi
Testování, ladění a kontrola výstupů
jak ověřit, že webová stránka nebo skript funguje podle zadání
kontrola chyb v prohlížeči a základní práce s chybovými hlášeními
úprava promptu podle nalezené chyby
postupné zpřesňování výstupu
kontrola použitelnosti, čitelnosti a základní přístupnosti
bezpečnostní a praktická omezení výstupů vytvořených AI
Praktické cvičení a závěrečný prototyp
výběr vlastního nebo modelového zadání
návrh jednoduché stránky, aplikace nebo pomocného skriptu
postupná tvorba výstupu pomocí AI
úprava HTML, CSS, JavaScriptu nebo skriptu podle potřeby
testování, opravy a doladění výsledku
prezentace výstupu a společné vyhodnocení postupu
Předpoklady
doporučujeme běžnou uživatelskou znalost internetu a základní orientaci v práci s webem. Výhodou je znalost na úrovni kurzu HTML a CSS nebo Úvod do tvorby webových stránek, ale není nutná pokročilá znalost programování.
Návaznosti
Tvorba grafiky s AI pro každého, HTML a CSS, SEO/AEO – optimalizace pro vyhledávače a AI, PHP
