Seminář webový design · oktáva · 15. 9. 2026

Web s AI

Jak se dnes dělá web — a jak ho letos uděláte vy.
Pro skutečného klienta.

Martin Gebhart · Sportovní gymnázium Kladno

Rok ve dvou částech

Naučit se postup. Pak ho použít doopravdy.

I · Postup a nástroje

září – leden

nástroje, prostředí, jak se s AI dělá web
malé úkoly, v prosinci první celý web
souběžně hledáte klienta

II · Velký projekt

únor – duben

web pro skutečného klienta
celý postup až po předání
obhajoba v dubnu

Předávám vám postup, kterým reálně dělám weby pro zákazníky.

Část A

Co se změnilo

Stav září 2026. Co platí dnes, může být v lednu jinak — učíme se postup, ne tlačítka.

Co se změnilo

AI dnes napíše celý web

Modely

GPT-5, Claude 5, Gemini 3.

Rozumí obrázkům, píší kód na úrovni seniora.

Agenti

Claude Code, Codex, Copilot.

Nesešívají kus kódu — staví celý projekt.

Konektory

MCP — jeden standard.

AI čte a píše do WordPressu, Gmailu, Figmy.

Co se změnilo

Starý postup

Návrh

Photoshop, Figma — dny práce grafika

Kód

ručně, nebo builder (Elementor, Breakdance)

Texty

copywriter, týdny čekání

Nasazení

FTP, ručně, „snad to funguje“

Typicky týdny až měsíce. Většina času = čekání a klikání.

Co se změnilo

Nový postup

Zadání + podklady

od klienta — texty, fotky, cíl webu

Design systém

Claude Design, klient schválí za hodinu

Agent staví

kód z podkladů, změny v gitu

Revize a publikace

jiný model zkontroluje, git nasadí

Dny. Většina času = přemýšlení a rozhodování.

Co se změnilo

Co zůstalo stejné

Zadání

co má web dělat a pro koho

Podklady

fakta, fotky, texty od klienta

Odpovědnost

za to, co je na webu, ručíš ty

To AI neudělá. Proto se učíme postup, ne nástroj.

Nejdůležitější pravidlo

AI generuje, ty ručíš

AI nikdy nesmí

vymyslet číslo, cenu, jméno, IČO
vyrobit fotky lidí a budov
opsat text z konkurence

Ty vždy

dodáš podklady od klienta
označíš, co napsala AI
necháš to zkontrolovat někým jiným

Vymyšlený obsah na webu firmy = právní problém klienta.

Část B

Mapa nástrojů

Pět kategorií. Každá je na něco jiného.

Mapa nástrojů

Pět kategorií

1Chat — přemýšlení, zadání, texty · ChatGPT, Claude, Gemini

2Stránka přímo z chatu — prototyp za minutu · Canvas, Artifacts

3Agenti — staví celý projekt · Claude Code, Codex, Copilot, Cursor

4AI buildery — hotový web na cizí platformě · Lovable, Framer, Wix AI

5Design — vzhled a design systém · Claude Design, Figma, Canva

Nástroje · 1 Chat

Chat: přemýšlení, zadání, texty

ChatGPT

Nejrozšířenější. Brainstorming, texty, vysvětlení.

Claude

Nejlepší na dlouhé dokumenty a kód. Projekty, konektory.

Gemini

Zdarma s Google účtem. Rešerše, obrázky, Disk.

ano zadání, struktura, texty z podkladů, „proč to nefunguje“ ne stavět celý web v chatu

Nástroje · 2 Stránka přímo z chatu

Prototyp za minutu

ChatGPT Canvas

Napíšeš, vidíš stránku vedle chatu, upravuješ slovy.

Claude Artifacts

Totéž, navíc stránku rovnou zveřejní na odkazu.

Gemini Canvas / AI Studio

Rychlé aplikace a stránky z popisu.

ano skica pro klienta, ověření nápadu ne ostrý web — kód není tvůj, nemá git ani doménu

Nástroje · 3 Agenti

Agent staví celý projekt

Claude Code moje volba

Terminál, desktop, web, VS Code. Soubory, git, konektory.

OpenAI Codex

Stejný princip od OpenAI, v ChatGPT i v terminálu.

GitHub Copilot

Agent ve VS Code. Pro studenty zdarma (Student Pack).

Cursor, Windsurf

Celý editor s AI. Placené.

Nástroje · 3 Agenti

Jak agent pracuje

1Přečte instrukce projektu a podklady

2Navrhne plán — ty ho potvrdíš nebo opravíš

3Vytvoří a upraví soubory, spustí náhled

4Každá změna je v gitu — jde vrátit

Ty jsi zadavatel a kontrolor. Agent je ruce.

Nástroje · 4 AI buildery

Hotový web na cizí platformě

Lovable, Bolt, v0, Replit

Z věty aplikace. Skvělé na prototyp.

Framer, Webflow AI

Designové weby s hostingem v ceně.

Wix AI, Squarespace, 10Web

Web „na klik“ pro laiky.

pozor rychlé, ale zamčené: měsíční poplatek, kód mimo tvou kontrolu, těžké předat dál

Nástroje · 5 Design

Vzhled a design systém

Claude Design

Z popisu firmy design systém: barvy, písmo, komponenty. Export = podklad pro kód.

Figma + Figma Make

Když je v týmu grafik. Přes konektor čte AI rovnou návrh.

Canva

Bannery, sítě, tiskoviny. Ne web.

Část C

Na čem web postavit

Tři cesty. Rozhoduje, kdo bude web měnit a jak je velký.

Na čem web postavit

Tři cesty

Statický web

HTML + CSS, případně generátor (Astro).

Vizitka, spolek, landing page.

CMS

WordPress s bloky.

Klient si mění obsah sám.

Headless

Obsah v CMS, web generuje framework.

Velké weby, aplikace, více kanálů.

Na čem web postavit · 1

Statický web

HTML + CSS + minimum JS
rychlý, bezpečný, hosting zdarma
AI ho generuje nejlíp
změny děláš ty přes git

Generátory

Astro — komponenty, více stránek, výstup je stále statika. Moderní standard.

Eleventy, Hugo, Jekyll — starší, stále funkční.

Kdy: klient obsah neměnívá, nebo ho měníte vy.

Na čem web postavit · 2

CMS: WordPress s bloky

vlastní šablona + knihovna hotových sekcí
zamčená struktura — klient přepisuje texty, nerozbije rozložení
AI generuje bloky jako text → jde verzovat

Ne: page buildery

Elementor, Breakdance, Divi — proprietární data, AI je negeneruje, migrace = stavět znovu.

Kdy: klient chce sám psát aktuality, měnit ceník, blog.

Na čem web postavit · 3

Headless

obsah v headless CMS: Sanity, Strapi, Payload, i WordPress „bez hlavy“
web generuje framework: Astro, Next.js
obsah jde do webu, aplikace i na sítě najednou

Kdy ano

Velký web, e-shop, více jazyků, aplikace.

Kdy ne

Malý klient — dvojí infrastruktura za nic.

Znát ano, letos nepoužijeme.

Verdikt

Cesta pro rok 2026/27

Chat na zadání a texty → Claude Design na vzhled → agent generuje statický web nebo WordPress bloky → git jako paměť projektu → revize jiným modelem → publikace z gitu.

Kód je tvůj, verzovaný, přenositelný. Žádný poplatek za platformu.

Část D

Můj postup

Sedm kroků. Bez přeskakování.

Můj postup

Sedm kroků

1Podklady — co od klienta mám a co chybí

2Zpětná vazba — co je silné, co chybí, otázky klientovi

3Struktura — stránky a sekce ke schválení, ještě bez kódu

4Stavba — design systém → agent generuje web

5Vyhledatelnost — aby web našel Google i AI

6Kontrola a revize — checklist, pak jiný model

7Publikace — náhled → schválení → ostrá adresa

Konektory

MCP: „USB-C pro AI“

jeden standard pro čtení a zápis do cizích systémů
WordPress, Gmail, Drive, Notion, Figma, GitHub
„vypiš články na webu“, „oprav telefon v patičce“

Pravidla

klíč = heslo, nikdy do chatu ani gitu
nejdřív číst, pak psát
ostrý web až po náhledu

ukázka Claude připojený k webu školy: přečte, navrhne, vrátí zpět.

Prostředí

Co budete potřebovat

Editor

VS Code

Git + GitHub

paměť projektu, publikace, zdarma

AI účet

Claude nebo ChatGPT — free stačí na začátek

Agent

rozhodneme podle účtů, které seženeme (Claude Code, Codex, Copilot)

Nastavíme společně příští hodinu. Později: lokální WordPress, hosting náhledu.

Živá ukázka

Jednostránkový web za 10 minut

Zadání agentovi

„Postav jednostránkový web pro sportovní klub z podkladů ve složce. Fakta jen z podkladů, co chybí, vypiš jako otázky. Texty, které vymyslíš, označ.“

Sledujte

nejdřív čte podklady a píše plán
co udělal s chybějícím IČO a fotkami
jak vypadá první uložení do gitu

Část E

Dnes a dál

Kvíz, velký projekt, příští hodina.

Praktická část · dnes

Kvíz: co jste si odnesli

vyuka.martingebhart.cz
/materialy/wd/kviz.html

Otevřít kvíz ↗

12 otázek, na telefonu nebo PC
po každé odpovědi vysvětlení
na konci skóre — ukažte mi ho
10 minut, pak projdeme sporné otázky

Velký projekt · 1/3

Web pro skutečného klienta

Klient může být

oddíl, trenér, tým
spolek, kapela, kroužek
živnostník, rodinná firma (IČO)
školní akce nebo projekt

Neprojde

smyšlená firma „pro seminář“
web sám pro sebe
klient, který se neozve

Nemáte klienta? Přidělím z rezervního seznamu. Vlastní je za víc bodů.

Velký projekt · 2/3

Milníky

20. 10.M0 · dva kandidáti na klienta 24. 11.M1 · potvrzený klient + zadání 19. 1.M2 · podklady a zápis ze schůzky 23. 2.M3 · struktura a design schválené klientem 23. 3.M4 · hotová stavba na náhledu 30. 3.M5 · revize a opravy 6. 4.M6 · publikace u klienta a předání 13./20. 4.M7 · obhajoba

Každý milník se odevzdává a boduje. Celé zadání na webu semináře.

Velký projekt · 3/3

Hodnocení: 100 bodů

Klient a zadání	10
Postup	15
Kvalita webu	30
Vyhledatelnost a zákon	15
Revize	10
Reálný konec	10
Obhajoba	10

Známka

90+ → 1 · 75 → 2 · 60 → 3 · 45 → 4

Bez reálného konce nejde lépe než za 3.

Příště · 22. 9.

Prostředí a první stránka

účty a instalace
jak se s AI mluví o webu
první stránka publikovaná

Domácí úkol

Přemýšlejte, komu uděláte web. Do 20. 10. dva kandidáti.

vyuka.martingebhart.cz → WD oktáva