Claude Code umožňuje vytvářet moderní a brandované weby i začátečníkům – pokud víte, jak ho správně nastavit. Tento článek shrnuje pět klíčových hacků, díky kterým výsledek nevypadá jako generické „AI vibe coded“ stránky, ale jako profesionální web.
Základní nastavení: VS Code a Claude Code extension
Celý pracovní postup začíná instalací Visual Studio Code a rozšíření Claude Code. Po stažení VS Code vyhledáte v záložce Extensions rozšíření „Cloud Code“ a nainstalujete jej. Provoz vyžaduje placenou Anthropic/Claude subscription – na free tieru Claude Code dostupné není. Pro začátek postačí plán Pro, plán Max se hodí při naražení na limity.
Hack #0: Soubor claude.md jako systémový prompt
Soubor claude.md funguje jako systémový prompt – Claude Code jej přečte před každým požadavkem a řídí se jím po celou dobu projektu. Měl by být stručný a obsahovat pouze relevantní pravidla a cíle projektu. Součástí obsahu souboru je i nastavení tzv. screenshot workflow (viz hack #3). Hotový soubor web_design_claude.md je dostupný zdarma v komunitní škole v kapitole „Claude Code“.
Hack #1: Front-end Design Skill
Skills jsou vlastní instrukce uložené v markdown souboru. Claude Code si je automaticky vybere ve chvíli, kdy je potřebuje. Front-end design skill zajistí modernější a profesionálnější výsledný design. Instalace probíhá spuštěním dvou příkazů přímo v Claude Code – rozšíření se nainstaluje globálně pro všechny budoucí projekty.
Pro práci s brandingem se doporučuje vytvořit složku brand_assets, do níž se umístí logo a brand guidelines (barvy, typografie, ikony). Claude Code si je najde automaticky, případně je lze explicitně označit pomocí symbolu @. Výsledkem jednovětného promptu s připojenými brand guidelines je například kompletní one-page landing page s animacemi, navigací, hero sekcí, statistikami, testimonials a plovoucí animací loga.
Hack #2: Screenshot Loop pro iterativní vylepšování
Bez screenshot loopu Claude Code dokončí projekt jen z části – bez skill přibližně na 40 %, se skill přibližně na 60 %. Screenshot loop umožňuje AI iterovat samotnou na sobě: napíše HTML kód, spustí server, pořídí screenshoty, porovná výsledek ve dvou průchodech a opraví nesrovnalosti. Screenshoty se ukládají do složky temporary_screenshots a jsou postaveny na nástroji Puppeteer. Dočasné screenshoty lze smazat příkazem „delete all temporary screenshots“.
Důležité nastavení: v Claude Code přejděte do Settings a povolte „allow dangerously skip permissions“ (bypass permissions mode). Autoři doporučují být během běhu nablízku a nenechávat proces přes noc bez dozoru. U dynamických animací se screenshot tool může stát kontraproduktivním – v takovém případě jej lze vypnout instrukcí „do not use the screenshot tool to compare“.
Hack #3 a #4: Inspirační weby a komponenty
Pro inspiraci celkovým designem slouží weby jako Dribbble, Godly website nebo Awards. Postup extrakce designu konkrétní stránky zahrnuje tyto kroky:
- Stisknout F12 (Windows) pro otevření developer tools
- Přejít na Console, poté Ctrl+Shift+P a vyhledat „screenshot“ pro full-page screenshot
- Přejít na Elements → Style section a zkopírovat HTML/CSS kód
- Vložit screenshot i style informace do Claude Code spolu s instrukcí ke klonování
Pro inspiraci jednotlivými komponentami (nikoliv celými weby) slouží 21st.dev, kde lze najít shadery, backgrounds, tlačítka, mouse highlights a další prvky. Stačí zkopírovat kód komponenty a dát Claude Code instrukci k její integraci. Klonovaný web lze následně rozšířit o vlastní branding předáním brand guidelines a loga.
Nasazení webu přes GitHub a Vercel
Finální web se nasazuje přes pipeline GitHub + Vercel. Postup je následující:
- Vytvoření účtu na GitHub a nového repository (např. „AIS test website“)
- Vytvoření účtu na Vercel.com (ideálně přihlášením přes GitHub) a import repository
- Po importu Vercel automaticky nasadí web na doménu (např.
ais-test-website.vercel.app) - Každý push z Claude Code do GitHubu Vercel automaticky detekuje a nasadí jako novou verzi
Doporučený postup je vždy nejprve otestovat na localhostu a do GitHubu pushovat až po schválení – k tomu slouží instrukce „Don’t push it to GitHub until I tell you to“. Vlastní doménu lze přidat v nastavení projektu na Vercelu, včetně automatické DNS konfigurace. Pozor: do veřejného GitHub repository nikdy nevkládejte API klíče, hesla ani citlivé informace z automatizací.
Pokud chcete začít stavět profesionální weby s Claude Code, začněte nastavením souboru claude.md a front-end design skill – právě tyto dva základní kroky mají největší vliv na kvalitu výsledku. Celý popsaný workflow pak umožňuje iterovat, klonovat inspiraci a nasazovat web na živou doménu bez pokročilých technických znalostí.
