Jak zbudować animowaną stronę w Claude Code w jeden wieczór

Dowiedz się więcej o pracy z modelami w dokumentacji Ailoot.

Dlaczego od pierwszego ekranu widać, że stronę zbudowała AI?#

Prosisz agenta o przygotowanie strony docelowej. Czterdzieści minut później masz działającą stronę: sekcje są na miejscu, układ jest responsywny, a przyciski działają. I niemal od razu pojawia się wrażenie, że już gdzieś ją widziałeś.

Przyczyna jest mechaniczna. Model wytrenowano na ogromnym zbiorze gotowych stron, a zbiór ten był mocno stronniczy.

Tysiące poradników i szablonów startowych kopiowały ten kolor, zaburzając próbę, a model nauczył się, że przyciski są fioletowe. Ten sam mechanizm dotyczy fontów, zaokrąglonych rogów i cieni.

W międzyczasie zmienił się „wygląd AI”. W dokumentacji umiejętności frontend-design Anthropic opisuje teraz inne style.

Źródło problemu: slop pojawia się wtedy, gdy nie ma nic konkretnego do skopiowania, a model po prostu uśrednia wszystkie style internetowe.

„Slop” oznacza tu pracę wygenerowaną maszynowo, uśrednioną do generycznego wyniku bez wyraźnego stylu.

Praktyczny wniosek jest taki, że agent potrzebuje wąskiej gramatyki projektowej zamiast otwartego zadania. Jeśli powiesz „zrób to pięknie”, wybierze średnią. Jeśli podasz mu konkretną paletę, kilka krojów pisma i jeden charakterystyczny zabieg wizualny, będzie na nich budować.

Ruch jest w tym obrazie najbardziej zauważalnym sygnałem. Nawet statyczna strona z idealną typografią nadal wygląda jak szablon, bo żywe strony internetowe oddychają: elementy pojawiają się podczas przewijania, kursor coś zmienia, a przejścia między ekranami nie urywają się gwałtownie.

Czego potrzebujesz, żeby zbudować animowaną stronę internetową w Claude Code?#

Omówmy narzędzia po kolei, bo w kwestii cen panuje spore zamieszanie.

GSAP to biblioteka animacji, która stoi za znaczną częścią nagradzanych stron internetowych. Webflow kupiło ją w październiku 2024 roku i niemal od razu pojawiły się pogłoski, że wszystko stało się darmowe. To niezupełnie prawda: wówczas Webflow potwierdziło, że dotychczasowe ceny pozostaną bez zmian. Biblioteka stała się darmowa pod koniec kwietnia 2025 roku, wraz z wersją 3.13.

W informacji o wydaniu 3.13 wyraźnie podano, że wcześniej płatne wtyczki, takie jak SplitText i MorphSVG, również stały się darmowe, także do użytku komercyjnego. Aktualna wersja na lipiec 2026 roku to gsap@3.15.0.

Darmowy nie znaczy jednak otwartoźródłowy. Licencja pozostaje własnościowa i zabrania tworzenia w GSAP wizualnego edytora animacji konkurującego z Webflow. Nie ma ograniczeń dotyczących stron internetowych, projektów klienckich ani pracy komercyjnej.

Umiejętność frontend-design Anthropic to zestaw instrukcji zmieniających sposób, w jaki agent pracuje nad interfejsem. Opis repozytorium brzmi:

W środku znajdziesz metodę dwuetapową. Najpierw agent przygotowuje system tokenów: od czterech do sześciu nazwanych kolorów, kroje pisma dla co najmniej dwóch ról, schemat układu zapisany w szkicach tekstowych oraz jeden charakterystyczny zabieg wizualny dla strony. Następnie ocenia swój plan w kontekście zadania. Dopiero potem pisze kod.

We wpisie mowa o 75 umiejętnościach, opis repozytorium wymienia 78, a dziś w drzewie plików jest ich 91. Autor otwarcie o tym uprzedza: sprawdź repozytorium poleceniem wyszukiwania, ponieważ opis jest nieaktualny.

Jak sprawić, żeby Claude Code przestał tworzyć szablony?#

Zacznijmy od pliku z zasadami, ponieważ działa przy każdym żądaniu i nic nie kosztuje.

Przydatnym punktem wyjścia jest blok zabezpieczeń przeciw szablonowości. Logika jest prosta: wymień konkretne wybory, ku którym model ma skłonność, i zakaż ich wprost.

## 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 celowo jest po angielsku: model dokładniej stosuje krótkie instrukcje techniczne w języku dokumentacji.

Wzmianka o animacjach znajduje się na liście zakazów obok kolorów i cieni nie bez powodu. Krycie na pierwszym ekranie bezpośrednio obniża wskaźnik szybkości, do czego wrócimy poniżej.

Następnie umiejętność. Oficjalne umiejętności Anthropic można zainstalować za pomocą wtyczki:

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

Jeden szczegół: umiejętności projektowe nie mogą być instalowane pojedynczo; wtyczka example-skills instaluje wszystkie dwanaście naraz. Jeśli chcesz tylko jednej, skopiuj ręcznie folder — Claude Code wykryje go bez ponownego uruchamiania sesji:

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

Przydatne mogą być też inne umiejętności z tej kolekcji: theme-factory z dziesięcioma gotowymi motywami i wymaganym potwierdzeniem człowieka przed ich zastosowaniem, web-artifacts-builder do tworzenia projektów w React z gotowymi komponentami oraz algorithmic-art do generatywnej grafiki. Osobny artykuł szczegółowo wyjaśnia, jak dobierać umiejętności do zadania: jak wybierać umiejętności dla Claude Code.

Zasady i umiejętność współpracują ze sobą: zasady zakazują złych wyborów, a umiejętność narzuca proces — najpierw system, potem krytyka, na końcu kod.

Wszystko, co ważne, dzieje się przed wysłaniem żądania. Z góry umieszczasz w kontekście agenta ograniczenia, według których ma budować, dzięki czemu samo sformułowanie polecenia ma już niewielkie znaczenie. Takie podejście nazywa się inżynierią kontekstu, a plik CLAUDE.md jest jej pierwszym elementem. Połączenie klona AI + Drugiego Mózgu + Inżynierii Kontekstu pomaga zmienić Claude’a z generatora przeciętnych wyników w narzędzie trzymające się Twojego stylu.

Gdzie znaleźć gotowe kierunki wizualne i polecenia dotyczące animacji?#

Zawarte w niej techniki ruchu to: 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.

Jeśli nie programujesz, ważniejsze są dla Ciebie gotowe kierunki wizualne. Zamiast niejasnego „zrób coś nowoczesnego” wybierz jeden z nich i podaj modelowi wąską gramatykę, której mu brakowało:

• clean-minimal-beige-light-mode - jasny beżowy minimalizm
• dark-glass-clean-layout - ciemne szkło
• documentary-brutalist-agency - brutalistyczny styl dokumentalny
• editorial-portfolio-chapters - portfolio podzielone na rozdziały, jak w magazynie
• orange-clean-paper-saas - strona usługowa w stylu papierowym z pomarańczowym akcentem
• solar-duotone-bold - wyrazista kompozycja dwukolorowa
• tech-green-dark-mode-modern - nowoczesny, ciemny styl technologiczny z zielenią
• light-mode-paper-technical - jasny, techniczny papier

Dostępne są też techniczne umiejętności związane z grafiką 3D i efektami: threejs, matterjs, globe-gl, vantajs, unicorn-studio, progressive-blur, beautiful-shadows, css-border-gradient.

W repozytorium nie ma polecenia instalacyjnego — autor jasno pisze w planie rozwoju, że doda je, gdy ustali metodę integracji. Jedyna instrukcja dla Claude Code brzmi:

Poniżej pokazano jedną z opcji instalacji. Tego polecenia nie ma w repozytorium; to zalecenie dotyczące instalacji:

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

Jak jednym wierszem przekazać agentowi aktualną dokumentację GSAP?#

Częstym problemem z bibliotekami animacji jest to, że agent pamięta nieaktualny sposób ich podłączania. Pisze import ze starej ścieżki, rejestruje wtyczkę metodą sprzed dwóch lat, a kod nie działa.

Rozwiązaniem jest samodzielne umieszczenie dokumentacji w kontekście. GSAP udostępnia ją w formacie przyjaznym maszynom:

https://gsap.com/llms.txt

Plik ma około 25 kilobajtów na dziś. Każda strona dokumentacji jest również dostępna w wersji markdown — wystarczy dodać .md do adresu URL.

W praktyce wygląda to tak:

Przeczytaj https://gsap.com/llms.txt i https://gsap.com/docs/v3/Plugins/ScrollTrigger.md

Następnie zbuduj jedną scenę na stronie głównej: nagłówek ma pojawiać się podczas przewijania
pierwszego ekranu, a obraz po prawej ma przesuwać się wolniej niż tekst.
Używaj tylko transformacji i krycia. Bez transition-all.

Biblioteka Motion (dawniej Framer Motion) ma taki sam plik, a jest on jeszcze większy. Motion jest rozpowszechniana na licencji MIT i pozostaje prawdziwie otwartym oprogramowaniem; aktualna wersja to motion@12.42.2. Jeśli projekt jest w React i potrzebuje tylko prostych efektów pojawiania się, możesz wybrać Motion; do złożonych scen przewijania użyj GSAP z wtyczką ScrollTrigger.

Istnieją też opcje działające wyłącznie w przeglądarce, które nie korzystają z bibliotek. Przejścia między stanami strony za pomocą View Transitions API weszły do obsługi bazowej 14 października 2025 roku, ale tylko w obrębie jednej strony; wersja między stronami w ogóle nie jest obsługiwana w Firefoksie. Animacje przewijania w CSS nie weszły jeszcze do obsługi bazowej: Chrome je obsługuje, Safari nauczyło się ich niedawno, ale w Firefoksie trzeba je ręcznie włączyć w ustawieniach, więc zwykli czytelnicy po prostu nie będą mogli z nich korzystać. Poproś agenta, by najpierw sprawdził, czy przeglądarka w ogóle je obsługuje, a jeśli nie, pozostawił standardowe przejście.

Jak zamienić stronę, która Ci się podoba, w polecenie?#

Najczęstszym sposobem wyjaśnienia, czego chcesz, jest pokazanie przykładu. W przypadku agenta nie działa to bezpośrednio: nie widzi strony internetowej, tylko tekst.

Umiejętność video-to-superprompt wypełnia tę lukę. Opis repozytorium: przekształca referencyjne nagranie w szczegółowe polecenie do odtworzenia lub inspiracji. W środku analizuje nagranie warstwami: narrację, układ, ruch, typografię i grafikę 3D. Wynikiem jest jedno gotowe do użycia polecenie.

Jej główna zasada jest sformułowana dobitnie:

Druga umiejętność, html-to-interaction-prompts, pracuje z kodem źródłowym: wyszukuje wszystko, co się porusza — reakcje kursora, grafikę 3D, efekty przewijania, warstwy przesuwające się z różną prędkością — i rozbija stronę na osobne polecenia, po jednym dla każdej sekcji, przycisku, stanu najechania kursorem lub efektu. Jej zasada polega na traktowaniu zachowania w kodzie źródłowym jako prawdy i niewymyślaniu efektów na podstawie zrzutu ekranu, gdy dostępny jest kod.

Trzecia umiejętność, stitched-full-page-capture, rozwiązuje praktyczny problem. Zwykły zrzut całej strony internetowej z leniwym ładowaniem i grafiką 3D wychodzi szary i pusty, ponieważ przechwycenie następuje przed renderowaniem. Umiejętność przewija stronę ekran po ekranie, czeka, aż wszystko się ustabilizuje, i łączy wynik.

Jest też sposób bez nagrania ekranu: podłącz agenta przez MCP do biblioteki aktualnych przykładów interfejsów. Oficjalny serwer Mobbin można zainstalować jednym poleceniem:

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

Następnie otwórz nową sesję, wybierz serwer z listy i zaloguj się w przeglądarce. Agent uzyska dostęp do zrzutów ekranu rzeczywistych, działających aplikacji: na liście znajduje się ponad 621 500 ekranów. Są to zrzuty gotowych produktów, a nie komponentów ani kodu. Ważne zastrzeżenie: serwer Mobbin nie działa w darmowym planie; jest dostępny w planach płatnych (w lipcu 2026 roku). Osobny artykuł o Google Stitch opisuje podłączanie zewnętrznych usług do agenta i wykorzystuje tę samą metodę, aby wprowadzić system projektowy do Claude Code.

Krok po kroku: animowana strona internetowa w jeden wieczór#

1. Skonfiguruj projekt

   Jeśli nie masz jeszcze projektu, zacznij od pustego folderu. Utwórz go, otwórz w terminalu i uruchom tam claude. W pierwszym poleceniu poproś o szkielet: „zbuduj szkielet jednostronicowej strony internetowej dla mojej firmy (opisz, czym się zajmuje), czysty HTML i CSS, bez bibliotek”. Pojawi się zestaw plików — to katalog główny projektu, w którym od tej pory będzie się działo wszystko.

2. Umieść zasady w CLAUDE.md

   Skopiuj blok Anti-Generic Guardrails do pliku CLAUDE.md w katalogu głównym projektu. Jeśli go tam nie ma, poproś agenta, żeby go utworzył. Zasady napisano z myślą o Tailwind; jeśli Twój szkielet korzysta z czystego CSS, powiedz agentowi: „zastosuj te zasady do zwykłego CSS” — ich znaczenie pozostaje takie samo. W artykule omówiono cztery zasady dla pliku CLAUDE.md, wyjaśniając działanie samego pliku i to, co jeszcze w nim umieścić.

3. Zainstaluj umiejętność frontend-design

   Użyj wtyczki example-skills albo skopiuj folder frontend-design, zgodnie z wcześniejszym opisem. Poleceniem /doctor możesz sprawdzić, czy umiejętność została załadowana.

4. Wybierz jeden kierunek wizualny

   Jeden, nie dwa ani trzy. Połączenie brutalistycznego stylu dokumentalnego z beżowym minimalizmem daje dokładnie takie uśrednienie, którego próbujesz uniknąć.

5. Zbuduj statyczną stronę

   Bez ani jednej animacji. Najpierw typografia, odstępy i siatka. Poproś agenta o uruchomienie lokalnego podglądu i otwórz podany adres. Aby wyświetlić stronę w telefonie, powiedz: „uruchom ją tak, żeby otwierała się na innych urządzeniach w mojej sieci”, a agent poda Ci adres.

6. Dodaj jedną scenę ruchu

   Tylko jedną. Zazwyczaj będzie to pierwszy ekran: pojawia się nagłówek, a warstwa tła przesuwa się wolniej niż pierwszy plan. Udostępnij agentowi plik llms.txt biblioteki i konkretnie opisz scenę — co się porusza, gdzie i przez ile milisekund. Na pierwszym ekranie nie zmieniaj krycia; poniżej wyjaśniono, dlaczego.

7. Dodaj regułę ograniczonego ruchu

   Zastosuj regułę CSS i konfigurację JavaScript ograniczonego ruchu z sekcji dostępności. Przed publikacją sprawdź stronę z włączonym ograniczeniem ruchu.

8. Opublikuj stronę i sprawdź jej szybkość

   Opublikuj ją w dowolnej darmowej usłudze hostingu statycznego — Vercel, Netlify lub GitHub Pages. Poproś agenta: „opublikuj ten projekt w Vercel i podaj mi link”. Dopiero po publikacji sprawdź uzyskany adres URL w PageSpeed Insights: usługa obsługuje publiczne adresy URL i nie widzi lokalnej strony. Sprawdź „Largest Contentful Paint” — czas renderowania największego elementu; zielona strefa to maksymalnie 2,5 sekundy. Agent może zmierzyć lokalną wersję przed publikacją: Chrome DevTools MCP otworzy ją w Chrome i pokaże ten sam wskaźnik.

W kroku szóstym najłatwiej zepsuć efekty poprzednich pięciu.

Dlaczego nadmiar animacji sprawia, że strona wygląda jeszcze bardziej jak wygenerowana przez AI?#

W tym miejscu rozumowanie niemal każdego, kto zajmuje się tym tematem, się załamuje: zbyt mało animacji wygląda tanio, więc trzeba dodać ich więcej.

To ta sama umiejętność frontend-design, którą zainstalowałeś, aby poprawić projekt. Anthropic ostrzega przed przesadą w narzędziu, którego agent używa do ozdabiania strony.

Wymienia też inne typowe techniki: duża liczba z małym podpisem i gradientowym akcentem jako standardowa odpowiedź na każde zadanie; ponumerowane bloki w rodzaju 01 / 02 / 03, odpowiednie tylko wtedy, gdy faktycznie istnieje jakaś kolejność.

Jak w praktyce wygląda przesada: agent dostaje zadanie „dodaj animacje” i dodaje efekt pojawiania się przy przewijaniu w każdej sekcji. Nagłówek wsuwa się na miejsce, trzy karty pojawiają się jedna po drugiej, opinie klientów wsuwają się z boku, a stopka wyłania się stopniowo. Każdy efekt osobno jest w porządku. Razem tworzą stronę, która nieustannie się porusza i niczego nie wyróżnia.

Żywa strona internetowa działa inaczej: jedna przemyślana scena, zwykle na pierwszym ekranie, a potem powściągliwość. Ruch działa jak wyróżnienie — ma sens, dopóki przypada na pojedyncze słowo.

Wynika z tego zasada dotycząca polecenia. Sformułuj je tak: „zrób jedną scenę na pierwszym ekranie, a wszystko inne pozostaw statyczne”. To tylko kilka słów różnicy w porównaniu z „dodaj animacje”, ale efekt jest o rząd wielkości lepszy.

Jak animacje zabijają szybkość strony internetowej?#

Trzy wskaźniki, których Google używa do oceny strony, to: czas renderowania największego elementu — nie więcej niż 2,5 sekundy; responsywność na interakcję — nie więcej niż 200 milisekund; oraz przesunięcie układu — nie więcej niż 0,1. Mierzy się je na 75. percentylu rzeczywistych wizyt.

Wyjaśnijmy, dlaczego ma to tu znaczenie. Domyślnie agent tworzy efekt pojawiania się w następujący sposób: ustawia krycie sekcji na zero, a następnie usuwa to ustawienie, gdy sekcja wchodzi w obszar widoku. Jeśli efekt pojawia się na pierwszym ekranie, obraz może być w pełni załadowany i zdekodowany, ale wskaźnik i tak go nie uwzględni, dopóki nie rozpocznie się renderowanie. Jest jeszcze gorzej, jeśli skrypt usuwa krycie dopiero po załadowaniu — wtedy wskaźnik czeka na wykonanie całego skryptu.

Są dwa sposoby, by to naprawić. Możesz rozpocząć efekt od niewielkiego, niezerowego krycia zamiast od zera, dzięki czemu początkowe renderowanie zostanie uwzględnione. Albo pozostawić krycie pierwszego ekranu bez zmian i animować tylko przesunięcie.

Drugi problem dotyczy tego, co tanio, a co kosztownie się animuje.

Mówiąc prościej: przeglądarka składa obraz z warstw, a zmiany pozycji i krycia zachodzą na ostatnim, najtańszym etapie. Wszystko inne zmusza ją do ponownego obliczenia strony. Pomiary z tej samej dokumentacji: animowanie za pomocą przesunięć top i left zajmuje 37 milisekund na układ i 79 na renderowanie; ten sam efekt wizualny uzyskany przez transform zajmuje zero w obu przypadkach.

Warto pamiętać o jeszcze jednej sprzeczności: krycie jest tanie w kompozytowaniu, ale dyskwalifikuje element z udziału we wskaźniku szybkości. Animacja tania dla przeglądarki i bezpieczna dla wydajności to dwie różne rzeczy.

Jeszcze jedna sprawa dotycząca właściwości will-change, którą agenci uwielbiają rozrzucać „dla optymalizacji”. Dokumentacja MDN mówi co innego:

Dokumentacja dodaje też, że właściwość jest przeznaczona jako ostateczność przy istniejących problemach z wydajnością. Nie służy do zapobiegania problemom. Wiersz will-change: transform, opacity zastosowany do pięćdziesięciu elementów to typowy znak rozpoznawczy wygenerowanego kodu.

W przypadku przesunięcia układu sprawa jest prostsza. Dokumentacja Google nie obwinia animacji; przeciwnie, starannie dobrane przejścia pomagają aktualizować treść bez zaskakiwania czytelnika. Zasada jest taka sama: zmieniaj skalę przez transform zamiast szerokości i wysokości, a przesuwaj za pomocą przesunięć zamiast współrzędnych.

Co z osobami, którym ruch fizycznie szkodzi?#

Ta sekcja ma znaczenie nie tylko ze względu na uprzejmość. Klientami firmy prowadzonej przez właściciela są właśnie osoby w wieku czterdziestu lat i starsze.

Dla osób z zaburzeniami układu przedsionkowego animacje przewijania mogą powodować nudności i migrenę, czasem tak silne, że trzeba się położyć.

Możesz rozwiązać ten problem za pomocą trzech wierszy stylów:

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

Warto pamiętać o trzech kwestiach.

Ustaw animację jako zachowanie domyślne i wyłączaj ją wewnątrz tej reguły — dzięki temu strona degraduje się bezpieczniej niż w odwrotnej sytuacji.

Specyfikacja mówi „usuwa, ogranicza lub zastępuje” — całkowite usunięcie wcale nie jest pierwszą opcją. Zastąpienie ostrego wsunięcia krótkim rozjaśnieniem działa lepiej niż całkowite jego wyłączenie: wyłączenie wszystkich animacji psuje wskaźniki ładowania i paski postępu.

Animacje JavaScript wymagają własnej obsługi preferencji; nadpisanie czasu CSS nie anuluje osi GSAP. Sam zapis matchMedia(...).matches do zmiennej niczego nie robi bez warunku w konfiguracji. W GSAP zachowaj element widoczny w zwykłym HTML/CSS i twórz ruch tylko przy zgodzie użytkownika:

// 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.

Tytuł nie może mieć ukrytego ani przesuniętego stylu bazowego. Przy ograniczonym ruchu pozostaje widoczny i statyczny. Zmiana preferencji przy otwartej stronie powoduje cofnięcie animacji, gdy zapytanie przestaje pasować. mm.revert() usuwa też zebrane animacje przy sprzątaniu. W Motion zastosuj równoważne rozgałęzienie konfiguracji tej biblioteki; sam CSS nie wystarcza. Zobacz cykl życia i sprzątanie GSAP matchMedia.

Warto też pamiętać o formalnym kryterium dostępności. WCAG 2.2.2, kryterium poziomu A, wymaga, by użytkownik mógł zatrzymać wszystko, co porusza się, miga lub przewija automatycznie, trwa dłużej niż pięć sekund i jest wyświetlane wraz z inną treścią. Dotyczy to automatycznie obracających się karuzel i nieskończonych pasków przewijanych, które agenci chętnie dodają.

Siedem miejsc, w których coś się sypie#

1. Pierwszy ekran jest ukryty, dopóki nie pojawi się przez rozjaśnienie. Element o zerowym kryciu nie jest zaliczany do kandydatów na potrzeby wskaźnika renderowania. To najkosztowniejszy błąd, ponieważ szkodzi wskaźnikowi wpływającemu na pozycje w wynikach wyszukiwania.

2. Animowane jest wszystko. Każda sekcja wsuwa się na miejsce, każda karta wyskakuje. Anthropic mówi wprost, że zwiększa to wrażenie, iż projekt został wygenerowany.

3. Scrolljacking. Strona internetowa zastępuje standardowe działanie kółka myszy własną „kinową” logiką. Zmiana standardowego przewijania może odbierać użytkownikowi kontrolę nad jego urządzeniem i powodować dezorientację.

W tym samym badaniu większość uczestników doświadczyła co najmniej łagodnej dezorientacji.

4. Animowane są właściwości układu. Współrzędne i wymiary zamiast transformacji. 37 i 79 milisekund zamiast zera.

5. Animacje trwają zbyt długo. Użyteczny czas trwania wynosi od 100 do 400 milisekund, przy czym 400 milisekund to już bardzo długo i taki czas sprawdza się tylko przy dużych ruchach. Agenci domyślnie lubią ustawiać pełną sekundę.

Z jego ustaleń wynika, że użyteczny zakres wynosi od 100 do 400 milisekund, przy czym 400 milisekund to już bardzo długo i taki czas nadaje się tylko do dużych ruchów. Agenci domyślnie lubią ustawiać pełną sekundę.

6. Brak reguły ograniczonego ruchu. Agent sam jej nie doda.

7. Strona zwalnia z każdą interakcją. Problem dotyczy Reacta: animacja utworzona bez referencji do elementu i bez sprzątania powiela się przy każdej aktualizacji komponentu. Z czasem strona zaczyna zwalniać bez wyraźnego powodu.

Metoda „agent robi zrzut ekranu i poprawia to, co widzi” świetnie działa w przypadku statycznych stron, ale przy animowanych elementach wpędza agenta w nieskończoną pętlę edycji: widzi pośrednią klatkę, uznaje ją za błąd, poprawia ją i widzi kolejną pośrednią klatkę. Do tego każdy zrzut ekranu zajmuje miejsce w kontekście.

Ile to kosztuje i jak nie zużyć miesięcznego limitu na jedną stronę?#

Typowa historia z anglojęzycznych społeczności vibe-codingu: ktoś buduje efektowną stronę z przewijaniem przez kosmos, publikuje wynik, a w dyskusji okazuje się, że ta jedna strona zużyła cały miesięczny limit.

Można się tego spodziewać. Animacje kosztują więcej niż zwykła praca nad układem z kilku powodów naraz. Nie da się zweryfikować wyniku, czytając kod — potrzebne są iteracje. Każda zmiana wiąże się z ponownym czytaniem plików. A pętla zrzutów ekranu przy ruchomych elementach dodaje niepotrzebne przebiegi.

Co pomaga:

Buduj jedną scenę naraz i zatwierdzaj wynik. Jednorazowa prośba „dodaj animacje w całej witrynie” gwarantuje nadmierne wydatki. Możesz wyłączyć weryfikację zrzutami ekranu dla animowanych elementów i samodzielnie obejrzeć je wizualnie. Utrzymuj plik CLAUDE.md w krótkiej formie, aby zasady nie zajmowały kontekstu przy każdym żądaniu. Zawczasu udostępnij agentowi plik llms.txt biblioteki, bo inaczej wymyśli nieaktualny sposób podłączenia, a potem będzie debugował własny wymysł.

Artykuł dlaczego Claude Code ponownie czyta cały projekt wyjaśnia, dokąd trafiają tokeny podczas pracy nad projektem; artykuł jak nie wyczerpać limitów Claude Code opisuje sposoby kontrolowania zużycia.

Co dalej?#

Zbuduj swoją pierwszą stronę według ośmiu kroków. Wybierz jeden kierunek wizualny, utwórz jedną scenę na pierwszym ekranie i sprawdź szybkość.

Następny krok — Ailoot.