Od holého promptu po hotovou osobní stránku s designem. Krok po kroku uvidíte, jak obrovský rozdíl dělá kontext — soubory, obrázky, informace z webu.
Klasická vizitka, kterou by si člověk jinak bastlil půl víkendu. Začneme úplně od nuly a za chvíli máte stránku s osobním obsahem, vlastním designem, sekcí o aktuálních trendech, samoopravou a na konci dark módem s kartami. Všechno v jednom HTML souboru — otevřete v prohlížeči a můžete sdílet.
V repozitáři webináře jsou předpřipravené soubory, se kterými budete pracovat. Pokud ho ještě nemáte, naklonujte si ho podle návodu v Začátku. Pak otevřete Claude Code ve složce level-1-beginner/demo-files — v desktopové aplikaci vyberte tuhle složku při vytváření nové relace, v terminálu napište cd level-1-beginner/demo-files a pak claude.
Ve složce demo-files/ najdete:
muj-obsah.md
Krátký markdown s informacemi o vás
design-inspirace.png
Screenshot designu jako vizuální inspirace
CLAUDE.md
Jednoduchá pravidla pro agenta (česky, čistý design)
Tip: Než začnete, upravte si muj-obsah.md — napište tam své jméno, čím se zabýváte, co vás baví. Čím konkrétnější obsah, tím lepší výsledek.
Začněte úplně jednoduše. Jedna věta, žádné soubory. Podívejte se, co agent vytvoří, když nemá žádný kontext.
Vytvoř mi osobní webovou stránku. Jmenuju se Slava, pracuju v AI firmě Aibility. Ulož do složky vystupy/01-zaklad/.
Princip: Prompt bez kontextu = generický výsledek. Agent je chytrý, ale není jasnovidec.
Teď dáme agentovi něco, z čeho může čerpat — váš soubor muj-obsah.md se skutečnými informacemi.
Přečti si muj-obsah.md — tam jsou skutečné informace o mně. Zkopíruj vystupy/01-zaklad/ do vystupy/01-obsah/ a přepiš stránku v nové složce podle toho, co se tam dozvíš.
muj-obsah.md — v terminálu vidíte "Reading muj-obsah.md". Stránka je najednou osobní, konkrétní, se skutečným obsahem. Stejný agent, stejný projekt — jen dostal kontext.Princip: Agent čte reálné zdroje, nevymýšlí si z paměti. Říkáme tomu „číst, ne hádat" — vrátíme se k tomu v Levelu 3.
Claude Code je multimodální — vidí obrázky, ne jen text. Ukažte mu screenshot designu, který se vám líbí.
Podívej se na design-inspirace.png a zkopíruj vystupy/01-obsah/ do vystupy/01-design/. V nové složce uprav stránku tak, aby co nejvíc odpovídala tomu, co vidíš na obrázku. Převezmi z něj všechno, co jde — barevnou paletu, typografii, layout, tvary, styl tlačítek, spacing. Cílem je, aby výsledek vypadal jako variace té stránky z obrázku, ne jen vzdálená inspirace.
Princip: Kontext nejsou jen texty. Obrázky, screenshoty, diagramy — agent vidí všechno.
Agent umí hledat na webu aktuální informace. Nepracuje jen s tím, co „zná" ze svého tréninku.
Vezmi stránku z vystupy/01-design/ a zkopíruj ji do vystupy/02-trendy/. Tam se podívej, co jsou aktuální trendy v designu osobních stránek v roce 2026 (použij web search) a přidej jednu sekci, která takovému trendu odpovídá a ladí se zbytkem stránky. Napiš komentář, odkud jsi trend vzal. Původní složku nech beze změny.
Poznámka: Claude Code má přístup k webovému vyhledávání nativně — žádný plugin není potřeba.
Tady uvidíte dvě důležité vlastnosti agenta najednou: umí se sám zkontrolovat a opravit, a než provede akci na vašem počítači, zeptá se na povolení.
Zkopíruj poslední složku z vystupy/ do vystupy/03-oprava/. Otevři stránku z vystupy/03-oprava/ v prohlížeči a zkontroluj, že všechno funguje. Pokud najdeš chybu, oprav ji přímo v této složce.
y (povolit) nebo n (odmítnout). Pokud najde chybu — opraví ji sám a zkusí znovu.Princip: Claude Code nemění nic na vašem počítači bez vašeho souhlasu. Konečné rozhodnutí je vždy na vás.
Pro složitější úkoly má Claude Code speciální režim: nejdřív naplánuje, co udělá, a teprve pak to provede. Tenhle krok ukážeme ve dvou fázích.
Před tímhle promptem přepněte do plan mode stiskem Shift+Tab (v terminálu uvidíte indikátor plan mode).
Zkopíruj vystupy/03-oprava/ do vystupy/04-iterace/. V téhle nové složce chci přidat sekci "Co dělám" se třemi kartami a přepnout celou stránku do tmavého režimu. Ještě nic neměň — navrhni plán: jaké soubory upravíš, jaké barvy použiješ pro dark mode, jak budou karty vypadat. Počkej na mé schválení.
Projděte si plán. Pokud chcete něco upravit (jiné barvy, jiný počet karet, jiná struktura), napište to v další zprávě — agent plán přepracuje.
Jakmile jste s plánem spokojení, stiskněte Shift+Tab pro odchod z plan mode a napište:
Super, jdi na to podle plánu.
Princip: U složitějších změn je levnější opravit plán než opravovat kód. Plan mode je vaše pojistka proti tomu, že agent vyrazí špatným směrem.
Každý krok zkopíroval předchozí složku a něco přidal. Vidíte kumulativně, jak stejný agent dává úplně jiný výsledek, když dostane víc kontextu.
Právě jste viděli všechny fáze v akci. Pojďme si je pojmenovat:
Tohle je zásadní rozdíl oproti chatbotovi. Chatbot odpovídá. Agent pracuje — čte soubory, spouští příkazy, kontroluje výsledky, opravuje chyby, a u důležitých kroků se vás ptá na souhlas. Vy jste šéf, on je schopný asistent.
Agent občas udělá něco jinak, než jste chtěli. Nemusíte panikařit — všechno se dá vrátit.
/rewind) — otevře se nabídka, kde vrátíte kód, konverzaci, nebo oboje na libovolný předchozí bod.
Nebojte se experimentovat. Vždycky se dá vrátit zpátky.
Vyberte si jeden a pusťte se do toho. Každý z nich využívá to, co jste právě viděli — kontext, soubory, plánování.
Vytvořte si svou vlastní stránku od nuly. Upravte muj-obsah.md, přidejte vlastní obrázek jako inspiraci.
„Vytvoř mi osobní stránku podle souboru muj-obsah.md a podle vizuálního stylu v obrázku inspirace.png. Stránka má být v češtině."
Nechte agenta vytvořit jednoduchou aplikaci na úkoly. Funguje rovnou v prohlížeči.
„Vytvoř mi jednoduchou to-do aplikaci v HTML, CSS a JavaScriptu. Chci přidávat úkoly, označovat jako hotové a mazat. Pěkný design, tmavý režim."
Máte koníček, firmu, projekt? Nechte agenta vytvořit stránku o tom, co vás baví.
„Vyhledej na webu informace o [vaše téma] a vytvoř krásnou informační stránku v češtině. Moderní design, s obrázky z webu."