Jak vytvořit animovaný web v Claude Code za jeden večer

Více o práci s modely najdete v dokumentaci Ailoot.

Proč je web vytvořený umělou inteligencí poznat už na první obrazovce?#

Požádáte agenta, aby sestavil landing page. O čtyřicet minut později máte funkční web: sekce jsou na svém místě, rozvržení je responzivní a tlačítka fungují. A téměř okamžitě máte pocit, že jste to už někde viděli.

Důvod je mechanický. Model byl natrénován na obrovské sbírce hotových stránek a tato sbírka byla výrazně vychýlená.

Tisíce návodů a úvodních šablon tuto barvu okopírovaly, zkreslily tak vzorek a model se naučil, že tlačítka mají být fialová. Stejný mechanismus se uplatňuje u písem, zaoblených rohů i stínů.

„Vzhled AI“ se mezitím změnil. V dokumentaci ke své dovednosti frontend-design popisuje Anthropic nyní jiné vzhledy.

Hlavní problém: slop vzniká, když není nic konkrétního k okopírování a model jednoduše zprůměruje všechny webové styly.

„Slop“ zde znamená strojově generovanou práci zprůměrovanou do generického výsledku bez osobitého stylu.

Praktické ponaučení je, že agent potřebuje úzce vymezenou designovou gramatiku namísto otevřeného úkolu. Když řeknete „udělej to krásné“, sáhne po průměru. Když mu dáte konkrétní paletu, pár písem a jeden určující vizuální prvek, bude vycházet z nich.

Pohyb je v tomto obrazu nejnápadnějším signálem. I statická stránka s dokonalou typografií stále působí jako šablona, protože živé weby dýchají: prvky se objevují při posouvání, kurzor něco mění a přechody mezi obrazovkami nekončí náhle.

Co potřebujete k vytvoření animovaného webu v Claude Code?#

Pojďme si nástroje projít jeden po druhém, protože kolem cen panuje spousta nejasností.

GSAP je animační knihovna, na které stojí významná část oceňovaných webů. Webflow ji koupil v říjnu 2024 a téměř okamžitě se začaly šířit zvěsti, že všechno bude zdarma. Není to tak úplně pravda: Webflow tehdy potvrdil, že dosavadní ceny zůstanou v platnosti. Knihovna se stala bezplatnou koncem dubna 2025 s verzí 3.13.

Vydání 3.13 výslovně uvádí, že zdarma se staly i dříve placené pluginy, jako SplitText a MorphSVG, a to i pro komerční použití. Aktuální verzí k červenci 2026 je gsap@3.15.0.

Zdarma ale neznamená open source. Licence zůstává proprietární a zakazuje vytvářet na GSAP vizuální animační editor, který by konkuroval Webflow. Pro weby, klientské projekty ani komerční práci žádná omezení neplatí.

Dovednost frontend-design od Anthropicu je sada pokynů, která mění způsob, jakým agent pracuje s rozhraním. Popis v jejím repozitáři uvádí:

Uvnitř je metoda o dvou průchodech. Nejprve agent sestaví systém tokenů: čtyři až šest pojmenovaných barev, písma alespoň pro dvě role, textové náčrty rozvržení a jeden určující vizuální prvek stránky. Pak svůj plán zhodnotí podle zadání. Teprve potom píše kód.

Příspěvek uvádí 75 dovedností, popis repozitáře jich uvádí 78 a v souborovém stromu jich dnes najdete 91. Autor to říká otevřeně: ověřte stav vyhledávacím příkazem v repozitáři, protože popis není aktuální.

Jak přimět Claude Code, aby přestal vytvářet šablony?#

Začněme souborem s pravidly, protože se uplatní při každém požadavku a nic nestojí.

Užitečným výchozím bodem je blok ochranných pravidel proti šablonovitosti. Logika je jednoduchá: vyjmenovat konkrétní volby, ke kterým model ve výchozím nastavení sklouzává, a výslovně je zakázat.

## Anti-Generic Guardrails

- Colors: Never use default Tailwind palette (indigo-500, blue-600).
  Pick a custom brand color and derive from it.
- Shadows: Never use flat shadow-md. Use layered, color-tinted shadows with low opacity.
- Typography: Never use the same font for headings and body. Pair a display/serif
  with a clean sans. Apply tight tracking (-0.03em) on large headings,
  generous line-height (1.7) on body.
- Gradients: Layer multiple radial gradients. Add grain/texture via SVG noise filter for depth.
- Animations: Only animate transform and opacity. Never transition-all.
  Use spring-style easing.
- Interactive states: Every clickable element needs hover, focus-visible,
  and active states. No exceptions.
- Spacing: Use intentional, consistent spacing tokens - not random Tailwind steps.
- Depth: Surfaces should have a layering system (base -> elevated -> floating).

Blok je záměrně napsaný anglicky: model přesněji dodržuje krátké technické pokyny v jazyce dokumentace.

Řádek o animacích je na seznamu zákazů vedle barev a stínů záměrně. Opacity na první obrazovce přímo zhoršuje metriku rychlosti, jak si vysvětlíme níže.

Dále dovednost. Oficiální dovednosti Anthropicu lze instalovat prostřednictvím pluginu:

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

Jeden detail: designové dovednosti nelze instalovat jednotlivě; plugin example-skills přináší všech dvanáct najednou. Pokud chcete jen jednu, zkopírujte složku ručně — Claude Code ji načte bez restartu relace:

git clone https://github.com/anthropics/skills.git
cp -r skills/skills/frontend-design ~/.claude/skills/

Užitečné mohou být i další dovednosti z této kolekce: theme-factory s deseti hotovými motivy a povinným potvrzením od člověka před jejich použitím, web-artifacts-builder pro tvorbu v Reactu s hotovými komponentami a algorithmic-art pro generativní grafiku. Samostatný článek podrobně vysvětluje, jak vybírat dovednosti pro konkrétní úkol: jak vybírat dovednosti pro Claude Code.

Pravidla a dovednost spolupracují: pravidla zakazují špatné volby a dovednost určuje postup — nejprve systém, potom kritika, nakonec kód.

Všechno důležité se děje ještě před zadáním požadavku. Omezení, podle nichž má agent stavět, vložíte do jeho kontextu předem a na formulaci samotného zadání už téměř nezáleží. Tomuto přístupu se říká kontextové inženýrství a soubor CLAUDE.md je jeho prvním stavebním kamenem. Kombinace AI klon + druhý mozek + kontextové inženýrství pomáhá změnit Claude z generátoru průměrných výstupů na nástroj, který se drží vašeho stylu.

Kde najít hotové vizuální směry a animační zadání?#

Obsahuje tyto pohybové techniky: animation-on-scroll, gsap, gsap-scrolltrigger-storytelling, cinematic-gsap-lenis-motion-system, cinematic-scroll-storytelling, marquee-loop, masked-reveal, staggered-word-reveal, reveal-hover-effect, scroll-progress-timeline, scroll-scrubbed-visual-sequence, scroll-scrubbed-word-reveal, scroll-world-storytelling.

Jako člověka, který neprogramuje, vás více zajímají hotové vizuální směry. Místo vágního „udělej to moderní“ si vyberte jeden z nich a dejte modelu úzce vymezenou gramatiku, která mu chyběla:

• clean-minimal-beige-light-mode - světlý béžový minimalismus
• dark-glass-clean-layout - tmavé sklo
• documentary-brutalist-agency - dokumentární brutalismus
• editorial-portfolio-chapters - portfolio rozdělené do kapitol jako časopis
• orange-clean-paper-saas - papírový web služby s oranžovým akcentem
• solar-duotone-bold - výrazné dvoubarevné zpracování
• tech-green-dark-mode-modern - moderní tmavý technický styl se zelenou
• light-mode-paper-technical - světlý technický papír

K dispozici jsou také technické dovednosti pro 3D grafiku a efekty: threejs, matterjs, globe-gl, vantajs, unicorn-studio, progressive-blur, beautiful-shadows, css-border-gradient.

V repozitáři není příkaz k instalaci — autor v plánu výslovně říká, že ho přidá, až bude rozhodnuto o způsobu integrace. Jediný pokyn pro Claude Code zní:

Níže je uvedena jedna možnost instalace. Tento příkaz není v repozitáři; jde o doporučení k instalaci:

git clone '<OFFICIAL_URL>'
cp -r Skills/agent-skills/web-design/documentary-brutalist-agency ~/.claude/skills/

Jak předat agentovi aktuální dokumentaci GSAP jediným řádkem?#

Častým problémem animačních knihoven je, že si agent pamatuje zastaralý způsob jejich propojení. Napíše import ze staré cesty, zaregistruje plugin způsobem používaným před dvěma lety a kód nefunguje.

Řešení je vložit dokumentaci přímo do kontextu. GSAP ji poskytuje ve strojově čitelném formátu:

https://gsap.com/llms.txt

Soubor má dnes asi 25 kilobajtů. Každá stránka dokumentace je také dostupná ve verzi Markdown — stačí do adresy URL přidat .md.

V praxi to vypadá takto:

Přečti https://gsap.com/llms.txt a https://gsap.com/docs/v3/Plugins/ScrollTrigger.md

Pak vytvoř jednu scénu na domovské stránce: nadpis se objeví při posouvání první obrazovky a obrázek vpravo se posouvá pomaleji než text.
Použij pouze transformace a opacity. Žádné transition-all.

Knihovna Motion (dříve Framer Motion) má stejný soubor a je ještě větší. Motion se šíří pod licencí MIT a zůstává skutečně open source; aktuální verzí je motion@12.42.2. Pokud projekt používá React a potřebuje jen jednoduché odhalovací animace, můžete zvolit Motion; pro složité scény při posouvání použijte GSAP s pluginem ScrollTrigger.

Existují také možnosti fungující přímo v prohlížeči bez knihoven. Přechody stavu stránky prostřednictvím View Transitions API získaly základní podporu 14. října 2025, ale pouze v rámci jedné stránky; verze mezi stránkami není ve Firefoxu vůbec podporována. Animace posouvání v CSS zatím základní podporu nezískaly: Chrome je podporuje, Safari se je naučilo teprve nedávno, ale ve Firefoxu je musíte ručně zapnout v nastavení, takže běžným čtenářům prostě fungovat nebudou. Požádejte agenta, aby nejprve ověřil, zda je prohlížeč vůbec podporuje, a pokud ne, ponechal standardní přechod.

Jak proměnit web, který se vám líbí, v zadání?#

Nejběžnějším způsobem, jak vysvětlit své přání, je ukázat příklad. U agenta to přímo nefunguje: web nevidí, vidí text.

Dovednost video-to-superprompt tuto mezeru překonává. Popis v repozitáři: převést video referenci na podrobné zadání pro napodobení nebo inspiraci. Uvnitř analyzuje záznam po vrstvách: příběh, rozvržení, pohyb, typografii a 3D grafiku. Výstupem je jedno zadání připravené k použití.

Její hlavní pravidlo je formulováno důrazně:

Druhá dovednost, html-to-interaction-prompts, pracuje se zdrojovým kódem: najde vše, co se pohybuje — reakce kurzoru, 3D grafiku, efekty posouvání a vrstvy pohybující se různou rychlostí — a rozdělí stránku na samostatná zadání, jedno pro každou sekci, tlačítko, stav při najetí nebo efekt. Jejím principem je považovat chování zdrojového kódu za pravdu a nevymýšlet efekty podle snímku obrazovky, když je kód k dispozici.

Třetí dovednost, stitched-full-page-capture, řeší praktický problém. Běžný celostránkový snímek webů s líným načítáním a 3D grafikou vyjde šedý a prázdný, protože se pořizuje před vykreslením. Dovednost stránku prochází obrazovku po obrazovce, čeká, až se vše ustálí, a výsledek spojí.

Existuje i způsob bez záznamu obrazovky: připojit agenta přes MCP ke knihovně živých příkladů rozhraní. Oficiální server Mobbin lze nainstalovat jedním příkazem:

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

Poté otevřete novou relaci, vyberte server ze seznamu a přihlaste se v prohlížeči. Agent získá přístup ke snímkům obrazovek skutečných funkčních aplikací: uvedeno je jich více než 621 500. Jde o snímky hotových produktů, nikoli komponent ani kódu. Důležitá výhrada: server Mobbin na bezplatném tarifu nefunguje; je dostupný v placených tarifech (k červenci 2026). Samostatný článek o Google Stitch vysvětluje připojení externích služeb k agentovi stejným způsobem, aby se do Claude Code dostal designový systém.

Krok za krokem: animovaný web za jeden večer#

1. Připravte projekt

   Pokud ještě žádný projekt nemáte, začněte prázdnou složkou. Vytvořte ji, otevřete v terminálu a spusťte v ní claude. V prvním zadání požádejte o základ: „vytvoř kostru jednostránkového webu pro mou firmu (popište, co dělá), čisté HTML a CSS, bez knihoven“. Objeví se sada souborů — to je kořen projektu, kde odteď bude probíhat všechno.

2. Vložte pravidla do CLAUDE.md

   Zkopírujte blok Anti-Generic Guardrails do souboru CLAUDE.md v kořeni projektu. Pokud tam žádný není, požádejte agenta, aby ho vytvořil. Pravidla jsou napsaná pro Tailwind; pokud váš základ používá čisté CSS, řekněte agentovi „použij tyto principy na běžné CSS“ — význam pravidel se nemění. Vysvětlení, jak soubor funguje a co dalšího do něj vložit, najdete v rozboru čtyř pravidel pro CLAUDE.md.

3. Nainstalujte dovednost frontend-design

   Použijte plugin example-skills nebo zkopírujte složku frontend-design podle výše uvedeného popisu. Zda se dovednost načetla, můžete ověřit příkazem /doctor.

4. Vyberte jeden vizuální směr

   Jeden, ne dva ani tři. Kombinace dokumentárního brutalismu s béžovým minimalismem vám dá přesně to průměrování, kterému se snažíte vyhnout.

5. Vytvořte statickou stránku

   Bez jediné animace. Nejdřív mají přijít typografie, rozestupy a mřížka. Požádejte agenta, aby spustil místní náhled, a otevřete adresu, kterou vám poskytne. Chcete-li stránku zobrazit v telefonu, řekněte „spusť ji tak, aby se otevírala i na dalších zařízeních v mé síti“ a agent vám dá adresu.

6. Přidejte jednu pohybovou scénu

   Jen jednu. Obvykle jde o první obrazovku: objeví se nadpis a vrstva pozadí se pohybuje pomaleji než popředí. Předejte agentovi soubor llms.txt knihovny a konkrétně popište scénu — co se pohybuje, kde a po kolika milisekundách. Na první obrazovce nechte opacity být; níže je samostatná část, která vysvětluje proč.

7. Přidejte pravidlo pro omezení pohybu

   Použijte pravidlo CSS i nastavení omezeného pohybu v JavaScriptu z části o přístupnosti. Před zveřejněním stránku ověřte se zapnutým omezením pohybu.

8. Zveřejněte web a zkontrolujte rychlost

   Zveřejněte ho na libovolné bezplatné službě pro statický hosting — Vercel, Netlify nebo GitHub Pages. Požádejte agenta: „zveřejni tento projekt na Vercelu a pošli mi odkaz“. Až po zveřejnění zadejte výslednou URL do PageSpeed Insights: služba pracuje s veřejnými URL a místní stránku nevidí. Podívejte se na „Largest Contentful Paint“ — dobu vykreslení největšího prvku; zelená zóna je do 2,5 sekundy. Místní verzi může agent změřit ještě před zveřejněním: Chrome DevTools MCP ji otevře v Chromu a zobrazí stejnou metriku.

V šestém kroku se nejlépe zkazí práce z předchozích pěti.

Proč kvůli přílišnému množství animací vypadá web ještě víc jako výtvor AI?#

Právě tady selhává uvažování téměř každého, kdo se tímto tématem zabývá: příliš málo animací vypadá lacině, takže jich musíte přidat víc.

To je přímo v dovednosti frontend-design, kterou jste nainstalovali, abyste design vylepšili. Anthropic v nástroji, který agent používá ke zdobení stránky, varuje před přeháněním.

Uvádí také další otřepané techniky: velké číslo s drobným popiskem a barevným přechodem jako standardní odpověď na jakýkoli úkol; číslované bloky jako 01 / 02 / 03, které se hodí jen tehdy, když jde skutečně o posloupnost.

Jak přehánění vypadá v praxi: agent dostane úkol „přidej animace“ a přidá odhalení při posouvání do každé sekce. Nadpis vjede, tři karty se jedna po druhé objeví, reference vjedou ze strany a zápatí se rozplyne. Každý efekt zvlášť je v pořádku. Dohromady vytvoří stránku, která se nepřestává hýbat a nic nezdůrazňuje.

Živý web funguje jinak: jedna promyšlená scéna, obvykle na první obrazovce, a potom střídmost. Pohyb funguje jako zvýraznění — dává smysl, když se soustředí na jedno slovo.

Z toho plyne pravidlo pro zadání. Formulujte ho takto: „vytvoř jednu scénu na první obrazovce a vše ostatní nech statické“. Oproti „přidej animace“ je to jen pár slov navíc, ale výsledek je řádově lepší.

Jak animace zabíjejí rychlost webu?#

Tři metriky, podle kterých Google hodnotí stránku, jsou: doba vykreslení největšího prvku — nejvýše 2,5 sekundy; odezva na interakci — nejvýše 200 milisekund; a posun rozvržení — nejvýše 0,1. Měří se na 75. percentilu skutečných návštěv.

Vysvětlíme si, proč je to důležité právě zde. Agent ve výchozím nastavení vytvoří odhalení takto: nastaví sekci opacity na nulu a toto nastavení odstraní, když sekce vstoupí do výřezu. Pokud je toto odhalení na první obrazovce, obrázek může být plně načtený a dekódovaný, ale metrika ho nezapočítá, dokud nezačne vykreslování. Ještě horší je, když skript odstraní opacity až po načtení — metrika pak čeká na celý skript.

Lze to napravit dvěma způsoby. Buď začněte odhalení nízkou nenulovou hodnotou opacity místo nuly, aby se počáteční vykreslení započítalo. Nebo nechte opacity na první obrazovce být a animujte pouze posun.

Druhý problém se týká toho, co se animuje levně a co draze.

Jednoduše řečeno: prohlížeč skládá obraz z vrstev a změny polohy a opacity nastávají v posledním, nejlevnějším kroku. Všechno ostatní ho nutí přepočítávat stránku. Měření ze stejné dokumentace: animace pomocí posunů top a left trvá 37 milisekund na rozvržení a 79 na vykreslení; stejný vizuální efekt pomocí transformu zabere nula u obou.

A teď rozpor, na který je dobré pamatovat: opacity je levná na kompozici, ale vyřazuje prvek z metriky rychlosti. Animace levná pro prohlížeč a animace bezpečná pro výkon tedy nejsou totéž.

Ještě něco k vlastnosti will-change, kterou agenti rádi přidávají „kvůli optimalizaci“. Dokumentace MDN říká opak:

Dokumentace také říká, že tato vlastnost je určena jako poslední možnost u existujících problémů s výkonem. Jako prevence nefunguje. Řádek will-change: transform, opacity u padesáti prvků je typickým poznávacím znamením generovaného kódu.

U posunu rozvržení je situace jednodušší. Dokumentace Googlu neobviňuje animace; naopak, pečlivé přechody pomáhají aktualizovat obsah, aniž by čtenáře zaskočily. Recept je stejný: měňte měřítko pomocí transformu, ne šířky a výšky, a posouvejte pomocí offsetů, ne souřadnic.

Co lidé, kterým pohyb fyzicky škodí?#

Tato část je důležitá nejen z ohleduplnosti. Zákazníky podnikatele tvoří právě lidé ve věku čtyřiceti let a více.

Konsorcium W3C popisuje následky bez zmírňování: nevolnost a migrény, někdy tak silné, že je nutné ulehnout.

Lze to ošetřit třemi řádky stylů:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Mějte na paměti tři věci.

Nastavte animaci jako výchozí chování a vypněte ji uvnitř tohoto pravidla — stránka se tak bezpečněji přizpůsobí než při opačném postupu.

Specifikace říká „odstraní, omezí nebo nahradí“ — úplné odstranění není ani první možností. Nahradit prudké vjetí krátkým prolínáním funguje lépe než efekt úplně utnout: vypnutí všech animací rozbíjí indikátory načítání a ukazatele průběhu.

Animace řízené JavaScriptem potřebují vlastní zpracování preference; přepsání délky v CSS časovou osu GSAP nezruší. Pouhé uložení matchMedia(...).matches do proměnné nic nedělá, dokud se podle ní nastavení nerozvětví. U GSAP ponechte prvek v běžném HTML/CSS viditelný a pohyb vytvořte jen tehdy, když ho uživatel povolí:

// Spusťte po načtení GSAP a prvků stránky.
function mountMotion() {
  const mm = gsap.matchMedia();
  mm.add('(prefers-reduced-motion: no-preference)', () => {
    gsap.from('.hero-title', { y: 24, duration: 0.35 });
  });
  return () => mm.revert();
}

const cleanupMotion = mountMotion();
// Při odstranění stránky nebo komponenty zavolejte cleanupMotion().

Nadpis nesmí mít skrytý či posunutý základní styl. Při omezení pohybu zůstává viditelný a statický. Změní-li se preference během otevření stránky, GSAP animaci vrátí, jakmile přestane dotaz odpovídat. mm.revert() odstraní shromážděnou animaci i při úklidu. V Motion vytvořte odpovídající větev v nastavení dané knihovny; samotné CSS nestačí. Viz dokumentace životního cyklu a úklidu GSAP matchMedia.

Je třeba pamatovat i na formální kritérium přístupnosti. Kritérium WCAG 2.2.2 úrovně A vyžaduje, aby uživatel mohl zastavit cokoli, co se automaticky pohybuje, bliká nebo posouvá, trvá déle než pět sekund a zobrazuje se spolu s jiným obsahem. Týká se to automaticky se otáčejících karuselů a nekonečných běžících textů, které agenti rádi vkládají.

Sedm míst, kde se to pokazí#

1. První obrazovka zůstane skrytá, dokud se neprolne. Prvek s nulovou opacity se nezapočítává mezi kandidáty metriky vykreslení. Jde o nejdražší chybu, protože škodí metrice ovlivňující pozice ve vyhledávání.

2. Animuje se všechno. Každá sekce vjede, každá karta vyskočí. Anthropic výslovně říká, že to zvyšuje dojem generovaného designu.

3. Scrolljacking. Web nahrazuje běžné chování kolečka myši vlastní „filmovou“ logikou.

Ve stejné studii zažila většina účastníků alespoň mírnou dezorientaci.

4. Animují se vlastnosti rozvržení. Souřadnice a rozměry místo transformací. 37 a 79 milisekund oproti nule.

5. Animace jsou příliš dlouhé. Užitečné rozmezí je 100 až 400 milisekund, přičemž 400 už je velmi pomalé a hodí se jen pro velké pohyby. Agenti rádi používají celou sekundu jako výchozí hodnotu.

Podle jeho zjištění je užitečný rozsah 100 až 400 milisekund; 400 už je velmi pomalé a hodí se jen pro velké pohyby. Agenti ve výchozím nastavení rádi používají celou sekundu.

6. Chybí pravidlo pro omezení pohybu. Agent ho sám nepřidá.

7. Web se s každou interakcí zpomaluje. Specifické pro React: animace vytvořená bez odkazu na prvek a bez úklidu se při každé aktualizaci komponenty množí. Stránka se postupně začne bez zjevného důvodu zpomalovat.

Osmou pastí je postup, kdy „agent pořídí snímek obrazovky a opraví, co vidí“. Funguje skvěle u statických stránek, ale u animovaných prvků agenta uvězní v nekonečné smyčce úprav: vidí mezisnímek, považuje ho za chybu, opraví ho a uvidí další mezisnímek. Navíc každý snímek spotřebuje část kontextu.

Kolik to stojí a jak nespálit měsíční limit na jednom webu?#

Typický příběh z anglicky mluvících komunit kolem vibe codingu: někdo vytvoří efektní stránku s posouváním vesmírem, zveřejní výsledek a v diskusi se ukáže, že jediný web spotřeboval celý měsíční limit.

To lze čekat. Animace stojí více než běžná práce s rozvržením z několika důvodů najednou. Výsledek nelze ověřit přečtením kódu; vyžaduje iterace. Každá úprava znamená znovu pročíst soubory. Smyčka se snímky pohybujících se prvků navíc přidává zbytečné průchody.

Co pomáhá:

Vytvářejte jednu scénu po druhé a výsledek ustalte. Jednorázový požadavek „přidej animace na celý web“ zaručuje nadměrnou spotřebu. Ověřování pomocí snímků obrazovky u animovaných prvků můžete vypnout a prohlédnout si je sami. CLAUDE.md udržujte stručný, aby pravidla při každém požadavku nezabírala kontext. A předem agentovi předejte llms.txt knihovny, jinak si vymyslí zastaralý způsob propojení a pak bude ladit vlastní výmysl.

Článek proč Claude Code znovu čte celý projekt vysvětluje, kam při práci na projektu odcházejí tokeny; článek jak nepřekročit limity Claude Code popisuje způsoby, jak udržet spotřebu pod kontrolou.

Co dál?#

Vytvořte první stránku podle osmi kroků. Vyberte jeden vizuální směr, vytvořte jednu scénu na první obrazovce a zkontrolujte rychlost.

Pro další kroky — Ailoot.