Ako za večer vytvoriť animovaný web v Claude Code

Viac o práci s modelmi nájdete v dokumentácii Ailoot.

Prečo je web vytvorený umelou inteligenciou zrejmý už na prvej obrazovke?#

Požiadate agenta, aby zostavil vstupnú stránku. O štyridsať minút máte funkčný web: sekcie sú na svojom mieste, rozloženie reaguje na rôzne veľkosti obrazovky a tlačidlá fungujú. Takmer okamžite však nadobudnete pocit, že ste to už niekde videli.

Dôvod je mechanický. Model sa trénoval na obrovskej zbierke hotových stránok a táto zbierka bola výrazne skreslená.

Tisíce návodov a štartovacích šablón túto farbu prebrali, čím skreslili vzorku, a model sa naučil, že tlačidlá sú fialové. Rovnaký mechanizmus sa uplatňuje pri písmach, zaoblených rohoch a tieňoch.

„Vzhľad umelej inteligencie“ sa medzitým zmenil. Anthropic v dokumentácii k svojej zručnosti frontend-design opisuje nové vzhľady.

Hlavný problém: slop vzniká, keď niet ničoho konkrétneho, čo by sa dalo napodobniť, a model jednoducho spriemeruje všetky webové štýly.

„Slop“ tu znamená strojovo generovanú prácu spriemerovanú do generického výsledku bez osobitého štýlu.

Praktické ponaučenie je, že agent potrebuje úzku dizajnovú gramatiku namiesto otvorenej úlohy. Ak poviete „urob to krásne“, zvolí priemer. Ak mu dáte konkrétnu paletu, niekoľko písiem a jeden určujúci vizuálny prvok, bude vychádzať z nich.

Pohyb je v tomto obraze najnápadnejším signálom. Aj statická stránka s dokonalou typografiou stále pôsobí ako šablóna, pretože živé weby dýchajú: prvky sa objavujú pri posúvaní, kurzor mení veci a prechody medzi obrazovkami sa neskončia náhle.

Čo potrebujete na vytvorenie animovaného webu v Claude Code?#

Prejdime si nástroje jeden po druhom, pretože v cenách panuje veľa nejasností.

GSAP je animačná knižnica, ktorá stojí za významným podielom ocenených webov. Webflow ju kúpilo v októbri 2024 a takmer okamžite sa začali šíriť fámy, že všetko bude zadarmo. Nie je to celkom pravda: v tom čase Webflow potvrdilo, že existujúce ceny zostanú v platnosti. Knižnica sa stala bezplatnou koncom apríla 2025 vo verzii 3.13.

Vydanie 3.13 výslovne uvádza, že zadarmo sa stali aj predtým platené doplnky, napríklad SplitText a MorphSVG, a to aj na komerčné použitie. Aktuálna verzia k júlu 2026 je gsap@3.15.0.

Bezplatné však neznamená open source. Licencia zostáva proprietárna a zakazuje vytvárať vizuálny editor animácií postavený na GSAP, ktorý konkuruje Webflow. Na weby, klientské projekty ani komerčnú prácu sa žiadne obmedzenia nevzťahujú.

Zručnosť frontend-design od Anthropic je súbor pokynov, ktorý mení spôsob, akým agent pracuje na rozhraní. V popise repozitára sa uvádza:

Súčasťou je metóda v dvoch krokoch. Najprv agent zostaví systém tokenov: štyri až šesť pomenovaných farieb, písma aspoň pre dve úlohy, schému rozloženia v textových náčrtoch a jeden určujúci vizuálny prvok stránky. Potom svoj plán posúdi vzhľadom na zadanie. Až potom napíše kód.

Príspevok uvádza 75 zručností, popis repozitára ich uvádza 78 a v strome súborov ich dnes nájdete 91. Autor na to otvorene upozorňuje: skontrolujte repozitár vyhľadávacím príkazom, pretože popis je zastaraný.

Ako dosiahnuť, aby Claude Code prestal vytvárať šablóny?#

Začnime súborom s pravidlami, pretože sa uplatní pri každej požiadavke a nič nestojí.

Užitočným východiskom je blok ochranných pravidiel proti šablónovému vzhľadu. Logika je jednoduchá: vymenujte konkrétne voľby, ku ktorým sa model predvolene prikláňa, a výslovne ich zakážte.

## 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ámerne napísaný po anglicky: model presnejšie dodržiava krátke technické pokyny v jazyku dokumentácie.

Riadok o animáciách je v zozname vedľa farieb a tieňov z určitého dôvodu. Opacita na úvodnej obrazovke priamo zhoršuje metriku rýchlosti, ako si vysvetlíme nižšie.

Ďalej zručnosť. Oficiálne zručnosti Anthropic možno nainštalovať prostredníctvom doplnku:

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

Jeden detail: dizajnové zručnosti sa nedajú inštalovať jednotlivo; doplnok example-skills ich nainštaluje všetkých dvanásť naraz. Ak chcete iba jednu, skopírujte priečinok ručne — Claude Code ho nájde bez reštartovania relácie:

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

Užitočné môžu byť aj ďalšie zručnosti v tejto zbierke: theme-factory s desiatimi hotovými témami a povinným potvrdením od človeka pred ich použitím, web-artifacts-builder na tvorbu v Reacte s hotovými komponentmi a algorithmic-art na generatívnu grafiku. Samostatný článok podrobne vysvetľuje, ako vyberať zručnosti na konkrétnu úlohu: ako vyberať zručnosti pre Claude Code.

Pravidlá a zručnosť spolupracujú: pravidlá zakazujú zlé voľby a zručnosť určuje postup — najprv systém, potom kritika, napokon kód.

Všetko podstatné sa tu deje ešte pred zadaním úlohy. Obmedzenia, podľa ktorých bude agent pracovať, vložíte do jeho kontextu vopred a na samotnom znení zadania potom takmer nezáleží. Tento prístup sa nazýva inžinierstvo kontextu a súbor CLAUDE.md je jeho prvým stavebným prvkom. Kombinácia klonu umelej inteligencie + Druhého mozgu + inžinierstva kontextu pomáha premeniť Claude z generátora priemerných výstupov na nástroj, ktorý sa drží vášho štýlu.

Kde nájdete hotové vizuálne smerovania a zadania pre animácie?#

Obsahuje tieto techniky pohybu: 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.

Ak neprogramujete, dôležitejšie sú pre vás hotové vizuálne smerovania. Namiesto vágneho „urob to moderné“ si vyberte jedno z nich a dajte modelu úzku gramatiku, ktorá mu chýbala:

• clean-minimal-beige-light-mode - svetlý béžový minimalizmus
• dark-glass-clean-layout - tmavé sklo
• documentary-brutalist-agency - dokumentárny brutalistický štýl
• editorial-portfolio-chapters - portfólio rozdelené na kapitoly ako časopis
• orange-clean-paper-saas - službový web v papierovom štýle s oranžovým akcentom
• solar-duotone-bold - výrazné dvojfarebné spracovanie
• tech-green-dark-mode-modern - moderný tmavý technický štýl so zelenou
• light-mode-paper-technical - svetlý technický papier

Sú tam aj technické zručnosti pre 3D grafiku a efekty: threejs, matterjs, globe-gl, vantajs, unicorn-studio, progressive-blur, beautiful-shadows, css-border-gradient.

V repozitári nie je príkaz na inštaláciu — autor v pláne priamo uvádza, že ho pridá, keď sa ustáli spôsob integrácie. Jediný pokyn pre Claude Code znie:

Nižšie je jedna z možností inštalácie. Tento príkaz nie je v repozitári; ide o odporúčanie na inštaláciu:

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

Ako jedným riadkom sprístupniť agentovi aktuálnu dokumentáciu GSAP?#

Pri animačných knižniciach sa často stáva, že si agent pamätá zastaraný spôsob ich zapojenia. Importuje ich zo starej cesty, zaregistruje doplnok spôsobom spred dvoch rokov a kód nefunguje.

Riešením je vložiť dokumentáciu priamo do kontextu. GSAP ju poskytuje vo formáte vhodnom pre strojové spracovanie:

https://gsap.com/llms.txt

Súbor má dnes približne 25 kilobajtov. Každá stránka dokumentácie je dostupná aj vo verzii Markdown — do URL stačí pridať .md.

V praxi to vyzerá takto:

Read https://gsap.com/llms.txt and https://gsap.com/docs/v3/Plugins/ScrollTrigger.md

Then build one scene on the home page: the headline appears as you scroll
through the first screen, and the image on the right shifts more slowly than the text.
Use only transform and opacity. No transition-all.

Knižnica Motion (predtým Framer Motion) má rovnaký súbor, ktorý je ešte väčší. Motion sa šíri pod licenciou MIT a zostáva skutočne open source; aktuálna verzia je motion@12.42.2. Ak je projekt v Reacte a potrebuje iba jednoduché odhalenia prvkov, môžete zvoliť Motion; pri zložitých scénach pri posúvaní použite GSAP s doplnkom ScrollTrigger.

Existujú aj možnosti fungujúce iba v prehliadači, ktoré nepoužívajú knižnice. Prechody medzi stavmi stránky cez View Transitions API získali 14. októbra 2025 podporu baseline — ale iba v rámci jednej stránky; verzia pre viacero stránok nie je vo Firefoxe podporovaná vôbec. CSS animácie pri posúvaní ešte podporu baseline nezískali: Chrome ich podporuje, Safari sa ich naučil len nedávno, no vo Firefoxe ich treba zapnúť ručne v nastaveniach, takže bežným čitateľom jednoducho nebudú fungovať. Požiadajte agenta, aby najprv skontroloval, či ich prehliadač vôbec podporuje, a ak nie, ponechal štandardný prechod.

Ako premeniť web, ktorý sa vám páči, na zadanie?#

Najbežnejší spôsob, ako vysvetliť, čo chcete, je ukázať príklad. S agentom to nefunguje priamo: nevidí web, vidí text.

Zručnosť video-to-superprompt túto medzeru preklenuje. Popis repozitára hovorí: zmeňte video-referenciu na podrobné zadanie na rekonštrukciu alebo inšpiráciu. Zručnosť analyzuje záznam po vrstvách: naratív, rozloženie, pohyb, typografiu a 3D grafiku. Výsledkom je jedno zadanie pripravené na použitie.

Jej hlavné pravidlo je formulované dôrazne:

Druhá zručnosť, html-to-interaction-prompts, pracuje so zdrojovým kódom: nájde všetko, čo sa hýbe — reakcie na kurzor, 3D grafiku, efekty pri posúvaní a vrstvy pohybujúce sa rôznou rýchlosťou — a rozdelí stránku na samostatné zadania, po jednom pre každú sekciu, tlačidlo, stav pri prejdení kurzorom alebo efekt. Jej zásadou je považovať správanie zdrojového kódu za pravdivé a nevymýšľať efekty zo snímky obrazovky, keď je k dispozícii kód.

Tretia zručnosť, stitched-full-page-capture, rieši praktický problém. Bežná snímka celej stránky s lenivým načítavaním a 3D grafikou vyjde sivá a prázdna, pretože sa zachytí ešte pred vykreslením. Zručnosť prejde stránku po jednotlivých obrazovkách, počká, kým sa všetko ustáli, a výsledok spojí.

Existuje aj spôsob bez záznamu obrazovky: pripojte agenta cez MCP ku knižnici živých ukážok rozhraní. Oficiálny server Mobbin možno nainštalovať jediným príkazom:

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

Potom otvorte novú reláciu, vyberte server zo zoznamu a prihláste sa v prehliadači. Agent získa prístup k snímkam obrazoviek skutočných funkčných aplikácií: uvádza sa ich viac než 621 500. Sú to snímky hotových produktov, nie komponentov ani kódu. Dôležitá výhrada: server Mobbin nefunguje v bezplatnom pláne; dostupný je v platených plánoch (stav k júlu 2026). Samostatný článok o Google Stitch vysvetľuje pripojenie externých služieb k agentovi a rovnaký postup na prenos dizajnového systému do Claude Code.

Krok za krokom: animovaný web za večer#

1. Pripravte projekt

   Ak ešte nemáte projekt, začnite prázdnym priečinkom. Vytvorte ho, otvorte v termináli a spustite v ňom claude. Ako prvé zadanie požiadajte o základnú kostru: „vytvor základ webu na jednej stránke pre moje podnikanie (opíš, o čo ide), čisté HTML a CSS, bez knižníc“. Zobrazí sa skupina súborov — to je koreň projektu, v ktorom sa odteraz bude všetko odohrávať.

2. Vložte pravidlá do CLAUDE.md

   Skopírujte blok Anti-Generic Guardrails do súboru CLAUDE.md v koreňovom priečinku projektu. Ak tam nie je, požiadajte agenta, aby ho vytvoril. Pravidlá sú určené pre Tailwind; ak vaša základná kostra používa čisté CSS, povedzte agentovi „uplatni tieto princípy na bežné CSS“ — význam pravidiel sa nemení. V článku rozbor štyroch pravidiel pre CLAUDE.md sa dozviete, ako funguje samotný súbor a čo ďalšie doň vložiť.

3. Nainštalujte zručnosť frontend-design

   Použite doplnok example-skills alebo skopírujte priečinok frontend-design, ako je opísané vyššie. Pomocou príkazu /doctor môžete skontrolovať, či sa zručnosť načítala.

4. Vyberte jedno vizuálne smerovanie

   Jedno, nie dve ani tri. Kombinácia dokumentárneho brutalistického štýlu s béžovým minimalizmom vám prinesie presne to spriemerovanie, ktorému sa snažíte vyhnúť.

5. Vytvorte statickú stránku

   Bez jedinej animácie. Najprv typografia, rozostupy a mriežka. Požiadajte agenta, aby spustil lokálny náhľad, a otvorte adresu, ktorú vám poskytne. Ak si ju chcete pozrieť na telefóne, povedzte „spusti to tak, aby sa to otvorilo aj na ďalších zariadeniach v mojej sieti“ a agent vám poskytne adresu.

6. Pridajte jednu pohybovú scénu

   Iba jednu. Zvyčajne ide o prvú obrazovku: objaví sa nadpis a vrstva pozadia sa pohybuje pomalšie než popredie. Dajte agentovi súbor llms.txt z knižnice a konkrétne opíšte scénu — čo sa hýbe, kde a počas koľkých milisekúnd. Na prvej obrazovke nechajte opacitu na pokoji; nižšie je samostatná časť o dôvodoch.

7. Pridajte pravidlo pre obmedzenie pohybu

   Použite pravidlo CSS aj nastavenie obmedzeného pohybu v JavaScripte z časti prístupnosti. Pred publikovaním stránku overte so zapnutým obmedzením pohybu.

8. Zverejnite stránku a skontrolujte rýchlosť

   Zverejnite ju v ľubovoľnej bezplatnej službe na statický hosting — Vercel, Netlify alebo GitHub Pages. Požiadajte agenta: „zverejni tento projekt na Verceli a pošli mi odkaz“. Až po zverejnení zadajte výslednú URL do PageSpeed Insights: služba pracuje s verejnými URL a lokálnu stránku nevidí. Pozrite sa na „Largest Contentful Paint“ — čas potrebný na vykreslenie najväčšieho prvku; zelená zóna siaha do 2,5 sekundy. Agent môže zmerať lokálnu verziu pred zverejnením: Chrome DevTools MCP ju otvorí v Chrome a zobrazí tú istú metriku.

Práve v šiestom kroku sa najľahšie pokazí práca z predchádzajúcich piatich.

Prečo priveľa animácií spôsobuje, že web vyzerá ešte viac ako výtvor umelej inteligencie?#

Práve tu sa rozpadá uvažovanie takmer každého, kto sa začne tejto téme venovať: príliš málo animácií vyzerá lacno, preto treba pridať ďalšie.

Uvádza to tá istá zručnosť frontend-design, ktorú ste nainštalovali, aby ste zlepšili dizajn. Anthropic varuje pred preháňaním práve v nástroji, ktorý agent používa na zdobenie stránky.

Uvádza aj ďalšie šablónové postupy: veľké číslo s malým popisom a farebným prechodom ako štandardnú odpoveď na akúkoľvek úlohu; číslované bloky ako 01 / 02 / 03, ktoré sú vhodné iba vtedy, keď skutočne ide o postupnosť.

Ako preháňanie vyzerá v praxi: agent dostane úlohu „pridaj animácie“ a pridá odhalenie pri posúvaní do každej sekcie. Nadpis sa zasunie, tri karty sa postupne objavia, referencie sa zasunú zboku a päta sa rozplynie. Každý efekt je sám osebe v poriadku. Spolu však vytvoria stránku, ktorá sa neprestáva hýbať a nič nezdôrazňuje.

Živý web funguje inak: jedna premyslená scéna, zvyčajne na úvodnej obrazovke, a potom zdržanlivosť. Pohyb funguje ako dôraz — zmysel má, pokiaľ sa týka jediného slova.

Z toho vyplýva pravidlo pre zadanie. Sformulujte ho takto: „vytvor jednu scénu na úvodnej obrazovke a všetko ostatné nechaj statické“. Oproti „pridaj animácie“ sa líši iba niekoľkými slovami, no výsledok je rádovo lepší.

Ako animácie zabíjajú rýchlosť webu?#

Tri metriky, pomocou ktorých Google hodnotí stránku, sú: čas vykreslenia najväčšieho prvku — najviac 2,5 sekundy; odozva na interakciu — najviac 200 milisekúnd; a posun rozloženia — najviac 0,1. Merajú sa na 75. percentile skutočných návštev.

Vysvetlime si, prečo je to dôležité. Agent predvolene vytvorí odhalenie tak, že nastaví sekcii opacitu na nulu a odstráni toto nastavenie, keď sekcia vstúpi do zorného poľa. Ak sa toto odhalenie nachádza na úvodnej obrazovke, obrázok môže byť úplne načítaný aj dekódovaný, no metrika ho nezapočíta, kým sa nezačne vykresľovanie. Ešte horšie je to, ak skript odstráni opacitu až po načítaní — metrika potom čaká na celý skript.

Sú dva spôsoby, ako to napraviť. Buď začnite odhalenie malou nenulovou opacitou namiesto nuly, aby sa započítalo počiatočné vykreslenie. Alebo na úvodnej obrazovke nechajte opacitu na pokoji a animujte iba posun.

Druhým problémom je, čo sa animuje lacno a čo draho.

Jednoducho povedané: prehliadač skladá obraz z vrstiev a zmeny polohy a opacity prebiehajú v poslednom, najlacnejšom kroku. Všetko ostatné ho núti prepočítať stránku. Merania z tej istej dokumentácie: animácia pomocou posunov top a left trvá 37 milisekúnd pri rozložení a 79 pri vykreslení; rovnaký vizuálny efekt cez transformáciu trvá v oboch prípadoch nula.

A tu je rozpor, ktorý sa oplatí zapamätať: opacity sa skladá lacno, ale vylučuje prvok z metriky rýchlosti. Animácia lacná pre prehliadač a animácia bezpečná pre výkon teda nie sú to isté.

Ešte jedna vec o vlastnosti will-change, ktorú agenti radi pridávajú „na optimalizáciu“. Dokumentácia MDN tvrdí opak:

Dokumentácia tiež uvádza, že táto vlastnosť je určená ako posledná možnosť pri už existujúcich problémoch s výkonom. Neslúži ako prevencia. Riadok ako will-change: transform, opacity na päťdesiatich prvkoch je typickým znakom generovaného kódu.

Pri posune rozloženia je situácia jednoduchšia. Dokumentácia Googlu neobviňuje animácie; naopak, starostlivé prechody pomáhajú aktualizovať obsah bez toho, aby čitateľa zaskočili. Recept je rovnaký: meniť mierku pomocou transformácie namiesto šírky a výšky a posúvať pomocou posunov namiesto súradníc.

Čo ľudia, ktorým pohyb fyzicky škodí?#

Táto časť je dôležitá nielen zo zdvorilosti. Publikum, ktorému podnikateľ predáva, tvoria práve ľudia vo veku štyridsať a viac rokov.

Môžete to ošetriť tromi riadkami štýlov:

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

Majte na pamäti tri veci.

Animáciu napíšte ako predvolené správanie a v tomto pravidle ju vypnite — stránka sa tak bezpečnejšie zjednoduší, než keby ste postupovali opačne.

Špecifikácia hovorí „odstráni, obmedzí alebo nahradí“ — úplné odstránenie nie je ani prvou možnosťou. Nahradiť prudké zasunutie krátkym rozplynutím funguje lepšie než animáciu úplne zastaviť: vypnutie všetkých animácií narúša indikátory načítania a ukazovatele priebehu.

Animácie riadené JavaScriptom potrebujú vlastné spracovanie preferencie; zmena trvania CSS nezruší časovú os GSAP. Samotné uloženie matchMedia(...).matches do premennej nič nerobí bez vetvenia nastavenia. Pri GSAP ponechajte prvok viditeľný v bežnom HTML/CSS a pohyb vytvorte iba pri súhlase používateľa:

// Run after GSAP and the page elements have loaded.
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();
// Call cleanupMotion() when this page or component is removed.

Nadpis nesmie mať skrytý či posunutý základný štýl. Pri obmedzení pohybu zostane viditeľný a statický. Ak sa preferencia zmení počas otvorenej stránky, GSAP vráti animáciu po ukončení zhody dotazu. mm.revert() odstraňuje zozbieranú animáciu aj pri odstránení komponentu. V Motion implementujte ekvivalentné vetvenie tejto knižnice; samotné CSS nestačí. Pozrite životný cyklus a čistenie GSAP matchMedia.

Treba myslieť aj na formálne kritérium prístupnosti. Kritérium WCAG 2.2.2 úrovne A vyžaduje, aby používateľ mohol zastaviť čokoľvek, čo sa automaticky pohybuje, bliká alebo posúva, trvá viac než päť sekúnd a zobrazuje sa súčasne s iným obsahom. Platí to pre automaticky rotujúce karusely a nekonečné pásy, ktoré agenti radi vkladajú.

Sedem miest, kde sa to pokazí#

1. Úvodná obrazovka je skrytá, kým sa nerozplynie. Prvok s nulovou opacitou sa nezapočítava medzi kandidátov na metriku vykreslenia. Je to najnákladnejšia chyba, pretože zhoršuje metriku, ktorá ovplyvňuje pozície vo vyhľadávaní.

2. Animuje sa všetko. Každá sekcia sa zasúva, každá karta sa objaví. Anthropic jasne hovorí, že to posilňuje dojem generovaného dizajnu.

3. Scrolljacking. Web nahradí bežné správanie kolieska myši vlastnou „filmovou“ logikou.

V tej istej štúdii väčšina účastníkov zažila aspoň miernu dezorientáciu.

4. Animujú sa vlastnosti rozloženia. Súradnice a rozmery namiesto transformácií. 37 a 79 milisekúnd oproti nule.

5. Animácie sú príliš dlhé. Užitočné trvanie je 100 až 400 milisekúnd, pričom 400 milisekúnd je už veľmi pomalé a hodí sa len na veľké pohyby. Agenti predvolene radi používajú celú sekundu.

Podľa jeho zistení je užitočný rozsah 100 až 400 milisekúnd; 400 je už veľmi pomalých a hodí sa iba na veľké pohyby. Agenti predvolene radi používajú celú sekundu.

6. Chýba pravidlo pre obmedzenie pohybu. Agent ho sám nepridá.

7. Web sa pri každej interakcii spomaľuje. Ide o špecifický problém Reactu: animácia vytvorená bez odkazu na prvok a bez vyčistenia sa pri každej aktualizácii komponentu znásobí. Stránka sa postupne začne bez zjavného dôvodu spomaľovať.

Ôsme úskalie: Postup, pri ktorom „agent urobí snímku obrazovky a opraví, čo vidí“, funguje skvele na statických stránkach, no pri animovaných prvkoch agenta uväzní v nekonečnej slučke úprav: uvidí medzisnímku, považuje ju za chybu, opraví ju a uvidí ďalšiu medzisnímku. Navyše každá snímka obrazovky zaberá časť kontextu.

Koľko to stojí a ako sa vyhnúť tomu, aby ste na jednom webe minuli mesačný limit?#

Typický príbeh z anglicky hovoriacich komunít o vibe codingu: niekto vytvorí efektnú stránku s posúvaním vesmírom, zverejní výsledok a v diskusii sa ukáže, že jeden web spotreboval celý jeho mesačný limit.

To sa dá očakávať. Animácie stoja viac než bežná práca na rozložení z viacerých dôvodov naraz. Výsledok nemožno overiť čítaním kódu; treba skúšať ďalšie iterácie. Každá úprava si vyžaduje opätovné čítanie súborov. A snímková slučka pri pohyblivých prvkoch pridáva zbytočné priechody.

Čo pomáha:

Vytvárajte vždy jednu scénu a jej výsledok uzavrite. Jednorazová požiadavka „pridaj animácie na celý web“ zaručuje nadmerné míňanie. Overovanie animovaných prvkov pomocou snímok obrazovky môžete vypnúť a prezrieť si ich sami. Udržujte CLAUDE.md stručný, aby pravidlá pri každej požiadavke nespotrebúvali kontext. A vopred dajte agentovi súbor llms.txt z knižnice, inak vymyslí zastaraný spôsob zapojenia a potom bude ladiť vlastný výmysel.

Článok prečo Claude Code znova číta celý projekt vysvetľuje, kam pri práci na projekte odchádzajú tokeny; článok ako neminúť limit Claude Code ponúka spôsoby, ako udržať používanie pod kontrolou.

Čo ďalej?#

Vytvorte svoju prvú stránku podľa ôsmich krokov. Vyberte jedno vizuálne smerovanie, vytvorte jednu scénu na úvodnej obrazovke a skontrolujte rýchlosť.

Ďalší krok — Ailoot.