$ entry

HTML místo Markdownu v Claude Code — kdy to dává smysl a kdy ne

Thariq Shihipar z týmu Claude Code tvrdí, že HTML je pro agentní vývoj lepší výstupní formát než Markdown. Vizuální čitelnost zvyšuje ochotu artefakt přečíst a pro AI je to dobře srozumitelné. Stinné stránky tento přístup ovšem má, pojďme si to rozebrat.

HTML místo Markdownu v Claude Code — kdy to dává smysl a kdy ne

Thariq Shihipar z týmu Claude Code publikoval na X příspěvek, v němž tvrdí, že HTML je pro agentní vývoj lepší výstupní formát než Markdown. Vizuální čitelnost zvyšuje ochotu artefakt přečíst a pro AI je to dobře srozumitelné. Stinné stránky to ovšem má, pojďme si to rozebrat.

Thariqův manifest najdete na Using Claude Code: The Unreasonable Effectiveness of HTML a doprovodné materiály na Githubu.

Co Thariq tvrdí

HTML má vyšší informační hustotu (tabulky, SVG, CSS, interakce), líp se čte i sdílí. Markdown soubor přes sto řádků prý skoro nikdo nečte, HTML stránka se čte. Doporučuje promptovat “udělej HTML soubor” místo Markdown plánů. Ve FAQ Thariq přiznává, že HTML stojí dvakrát až čtyřikrát víc tokenů a generování trvá déle, ale s kontextovým oknem Opusu 4.7 to prý nepoznáte. Verzování přiznává jako hlavní nevýhodu a hned tu nevýhodu odbude.


Tohle je opravdu rozdíl mezi méně a více přehledným vyjádřením..

Proč pro víkendového vibecodera HTML smysl má

Implementační plán, který v terminálu vyplivne dvě stovky řádků, vibecoder nečte. Schválí, scrolluje, doufá. HTML s vyrenderovaným data flow, mockupy a barevně odlišenými kroky se reálně přečte. To není kosmetický rozdíl — to je rozdíl mezi “rozhodnutí udělá člověk” a “rozhodnutí udělá agent, člověk to scrolováním odsouhlasí”. S tímto argumentem musím souhlasit, protože to sám zažívám na sobě a na workshopech s lidmi, je těžké se donutit studovat delší markdown.

Pro junior vývojáře a sváteční vibecodery je tohle zcela relevantní argument. Architektura vykreslená jako flowchart se pochopí líp než abstraktní popis. Tři přístupy k řešení vedle sebe v tabulce či diagramu se snadno porovnají, lineární text to nesvede. Reporty pro netechnické lidi (klient, šéf, manželka) z Markdownu nepřečte nikdo, z HTML stránky leckdo. Anthropic do tohoto směru investuje skrz frontend-design plugin a Claude Design, takže nástroje na to existují.

Tady souhlasím s Thariqem. Pro tenhle typ uživatele a tenhle typ výstupu HTML smysl dává.

Behaviorální rizika, o kterých řeč nebyla

Vizuální polish maskuje obsahové chyby. Vyrenderovaný flowchart s šipkami a barvami má vyšší vnímanou autoritu než stejně chybný Markdown text. Pro junior vývojáře, který nemá hluboké doménové znalosti, je tohle reálné riziko: spíše tomu uvěří a odsouhlasí to. Markdown je v tomhle poctivější — holá struktura, slabý argument vyčnívá.

Snížení kontroly výstupu. Když Claude v Markdownu napíše “step 3: deploy with sudo rm -rf /tmp/*”, uživatel to vidí. V HTML flowchartu to může být ikonka deployment kroku, kterou uživatel proklikne bez přečtení detailu. Vizuální abstrakce skrývá konkrétní řešení.

Závislost na artefaktu jako “dokumentaci”. Vibecoder vygeneruje HTML report, považuje ho za projektovou dokumentaci, ale za měsíc ho rozumně nezedituje. Markdown si otevřeš a upravíš, HTML si otevřeš a koukáš. Verzovat HTML diff je peklo.

Token a čas náklady. Thariqových 2-4× víc tokenů a generování není zanedbatelné, zvlášť mimo Opus 4.7 s milionovým kontextem. U Sonnetu 4.6 to znát je. U Haiku 4.5 ještě víc.

Pohodlí jako protihráč myšlení a bezpečnosti

Tady je hlubší vrstva problému, kterou Thariq nezmiňuje.

Pohodlnější nástroje nezpůsobují, že je věc bezpečnější nebo promyšlenější. Naopak. Tím, že odstraní třecí plochu, vyvolají dojem, že tomu nemusíme tak moc rozumět. To známe z bezpečnosti: WAF před nezabezpečenou aplikací aplikaci nezabezpečí. ORM před netušením, jak vypadá SQL injection, injekci nezastaví. JWT bez znalosti replay attacku není autentizace, je to dekorace. S3 bucket nastavený “secure by default” má každý druhý měsíc na hackernews článek o tom, jak unikla data, protože uživatel default nepochopil.

Stejný vzorec je u myšlení. Markdown plán z AI schválený bez čtení je vibecoding. HTML plán s flowcharty je vibecoding s polishem. Anotační nástroj, který vás vede k tomu, co odškrtnout, je vibecoding s metodickou stopou. Nástroj práci za vás neodvede ani líp nepromyslí.

Tady je ale poctivý zrcadlový problém. Stejný argument už jsme slyšeli. Proti vyšším programovacím jazykům (“napiš to v assembleru, ať víš, co počítač dělá”). Proti garbage collectoru. Proti webovým frameworkům. Proti no-code platformám. Pokaždé částečně validní, pokaždé částečně gatekeeping — obhajoba třecí plochy proto, že stávající uživatelé už ji zinternalizovali jako součást identity.

Cesta z toho je zlatý střed mezi sebevzděláváním, pohodlím a uznáním reálné problematiky. Příkop musí zasypávat všechny tři strany současně. Nástroje by měly líp podporovat práci s myšlenkami a se zabezpečením. Naše vzdělávání by nás mělo vést k pochopení, čeho se nástroj týká. A musíme přiznat, že problém pod nástrojem je reálný a nezruší se jeho zaobalením do krásného vzhledu. Odbornost je vědomí limitů — vlastních i nástroje.

Pro vibecodera to znamená: Plannotator nebo visual-explainer nejsou špatné nástroje. Jsou pohodlnější verzí téhož problému, pokud uživatel nerozumí, co anotace nebo flowchart reprezentují. A jsou užitečné, pokud rozumí.

Hosting: Val.town, S3, lokální soubor

Když už vytvářet HTML zprávy, analýzy a reporty v Claude Code, tak kam ho dát? Provozovat ho z localhostu či přímo souborového systému? To není vždy pohodlné, zvláště ne pro sdílení. Existuje několik nástrojů, které nabízí pohodlný způsob pro hosting HTML artefaktů.

Val.town (val.town) je SaaS pro hosting jednoduchých web aplikací a HTML artefaktů, vyrobený na rapid prototyping. Plus: instant deploy, sdílecí link, remixable, version history, org-auth. Minus: vendor lock-in, US-based služba (GDPR komplikace pro firemní data), shareable link je viditelný komukoli s URL, pokud nezapnete auth. Pro výuku, osobní projekty a sdílení s kamarády ano. Pro klientská data pod NDA ne.

S3 nebo jiný cloud storage. Pod vlastní kontrolou, presigned URLs s expirací, vlastní doména. Nevýhoda: méně zkušený uživatel se v IAM policies snadno ztratí, public bucket je klasická bezpečnostní katastrofa. Pro středně pokročilého ano, pro někoho, kdo si poprvé sahá na AWS je to riziko.

Lokální HTML soubor v prohlížeči. Žádný hosting, nulové riziko, rychlé. Nedá se sdílet linkem, ale Claude Code ti ho otevře sám. Pro 80% případů svátečního vibecodera tohle stačí.

Vrstvený přístup: Markdown jako zdroj, HTML jako rozhraní

Thariq tlačí HTML jako primární formát. Existuje ale třetí cesta, kterou jeho argumentace přehlíží: Markdown zůstává kanonickým artefaktem, HTML je jen rozhraní pro review nebo prezentaci. Žádný drift mezi soubory, žádná ztráta verzovatelnosti, žádný HTML maximalismus. Tahle vrstva nástrojů řeší Thariqův legitimní bod (HTML pomáhá s vizuální čitelností), aniž by obětovala Markdown.

Plannotator je open-source plugin (MIT/Apache 2.0) pro AI kódovací agenty. Když Claude Code dokončí plánovací fázi, místo terminálového dialogu se v prohlížeči otevře HTML rozhraní s plánem. Označíte text, vyznačíte ke smazání, přidáte komentář, navrhnete náhradu. Po stisku se anotace vrátí agentovi jako strukturovaný feedback. Funguje s Claude Code, Codex, Copilot CLI, Gemini CLI, OpenCode a Pi. Privacy model je elegantní: malé plány kódované přímo v URL hashi (žádný server), velké přes end-to-end šifrované krátké odkazy. Použitelné i pro citlivá data.

visual-explainer od Nico Bailona (4.4k GitHub hvězdiček) je opačná strana mince. Agent skill, který bere komplexní výstupy a renderuje je jako samostatné HTML stránky nebo slide decky. Příkazy /generate-web-diagram, /generate-visual-plan, /diff-review, /plan-review, /project-recap, /fact-check. Modifikátor --slides udělá magazínový deck. Skill se aktivuje sám, když chce agent v terminálu vyprodukovat tabulku se 4+ řádky nebo 3+ sloupci. Mermaid pro flowcharty, CSS Grid pro architektonické přehledy, Chart.js pro dashboardy. Self-contained HTML soubor, žádné dependencies kromě prohlížeče.

Plannotator a visual-explainer jsou komplementární. Plannotator je HTML rozhraní pro vstup do agenta (review plánu před exekucí). Visual-explainer je HTML rozhraní pro výstup z agenta (prezentace výsledku). Mezi nimi zůstává Markdown jako zdroj pravdy.

Pár dalších možností pro úplnost. claude-code-plan-critique od Serbana Ghity má inverzní filozofii: uživatel píše plán, Claude ho kritizuje. Pro mikromanagement, ne pro vibecoding. Plan Mode vestavěný v Claude Code (Shift+Tab dvakrát) je zdarma a stačí pro jednoduché případy, ale nemá vizuální UI ani sdílení. Ultraplan je Anthropicova cloudová varianta na Opus 4.6 s anotacemi v browseru, součást Claude Max planu. Builder.io je multiplayer platforma pro velké týmy, pro svátečního vibecodera nadměrná.

Kdy HTML, kdy Markdown

Typ artefaktuFormátProč
Plán projektu, který budeš editovatMarkdownVerzování, editace v editoru
Spec ve GituMarkdownHTML diffy jsou peklo
Pracovní poznámkyMarkdownRychlost
Dokumentace pro budoucnostMarkdownZa rok ji budeš upravovat
Plán k review před exekucíMarkdown + PlannotatorAnotace nad textem
Architektonický přehled k vysvětlenívisual-explainerVizuální projekce
Report pro klienta nebo managementHTML přes visual-explainerVizuální polish, čtenost
Code review pro PRHTMLAnotované diffy, závažnost
Prototyp s parametryHTMLSlidery, knoby
Brainstorm tří přístupůHTMLSrovnání vedle sebe

Praktické tipy podle typu uživatele

Víkendový vibecoder. - Markdown jako default, lokální HTML soubor pro reporty. Nainstaluj Plannotator (curl -fsSL https://plannotator.ai/install.sh | bash), bude tě nutit číst plány. Visual-explainer si zkus na vysvětlení architektury vlastního projektu, který za měsíc nebudeš pamatovat. Val.town přidej, až budeš chtít něco poslat kamarádovi — ne pro projekt s daty.

Pokročilý freelancer. - Plannotator pro každý netriviální plán. Visual-explainer pro klientské reporty místo Markdown souborů, které klient nepřečte. Hosting vlastní (S3 s presigned URLs nebo statický web), ne Val.town — klientská data nepatří na cizí cloud bez NDA. Markdown jako kanonický formát všeho, co půjde do Gitu nebo do předávací dokumentace. HTML pouze jako prezentační vrstva.

Člověk pracující v týmu. - Plannotator pro sdílení plánů přes shareable link (end-to-end šifrované, prohovor s bezpečáky před nasazením). Code review přes Claude Code Code Review (oficiální, integruje se do GitHub PR workflow), ne ad-hoc HTML přes visual-explainer. Markdown specs s přísnou code review kulturou — HTML maximalismus by ti rozbil PR workflow. Ultraplan pro velké refaktorace, kde Opus 4.6 dá víc, než lokální Plan Mode.

Závěr

Thariqův HTML maximalismus má své racionální jádro a má také marketingové přehánění. Jádro: pro výstupy ke konzumaci HTML reálně zvyšuje pravděpodobnost, že je člověk přečte. Přehánění: tvrdit, že to platí pro pracovní artefakty taky. Verzování, tokeny a portabilita Markdown drží na pozici kanonického formátu pro všechno, co se bude vyvíjet.

Plannotator a visual-explainer jsou rozumný kompromis: Markdown jako zdroj, HTML jako rozhraní. Žádný drift, žádná ztráta verzovatelnosti, vyřešený Thariqův legitimní bod. Pro svátečního vibecodera je to dobrý setup. Pro freelancera taky, s vlastním hostingem. Pro tým s kalibrací podle existujícího PR workflow.

A pro každého z nich platí stejné: nástroj práci za nikoho neudělá. Plannotator anotuje plán, který chápete. Visual-explainer prezentuje architekturu, kterou jste promysleli. Bez vašeho chápání problému se dobrá práce neodvede, naopak jen narůstá technologický dluh vašeho projektu…

Patrick Zandl

Technologický publicista a vývojář, který od roku 2025 provozuje Vibecoding.cz — největší česky psaný zdroj o AI-asistovaném programování. Dříve Chief Wizard Architect v Prusa3D, dnes konzultant a lektor AI implementace ve firmách.

Profil autora →