O czym jest ten film
- Jak zbudować animowaną stronę WWW ze scrollowanym efektem „nabierania koloru” bez pisania kodu, korzystając z Claude Code i Codeksa.
- Dlaczego pierwsze podejście („jeden magiczny prompt”) się nie udało i co konkretnie poszło nie tak.
- Realny podział pracy między dwa modele: Fable 5 (planowanie, audyt) i GPT-5.6 „Sol” w Codeksie (wdrożenie, generowanie materiałów).
- Rola platformy Higgsfield do generowania grafik i wideo — połączonej z agentami przez MCP i CLI.
- Znaczenie jednego spójnego konceptu i pełnego storyboardu z oszacowanym budżetem przed wydaniem pierwszego kredytu.
- Sześć „bramek bezpieczeństwa”, które oddzielają realny proces od obietnicy „jednego kliknięcia”.
- Oszczędne generowanie: testy na tanich rozdzielczościach, upscaling wideo zamiast generowania od razu w 4K.
- Zamiana wideo na 121 klatek WebP, żeby strona (czysty HTML/CSS/JS) działała płynnie przy przewijaniu.
- Audyt strony przez jeden model AI pilnujący drugiego — wykrycie błędu w animacji „Iris”, niewidocznego gołym okiem.
- Publikacja strony na hostingu (Hostinger) przez rozmowę z agentem dzięki serwerowi MCP — bez ręcznego zarządzania plikami.
Redakcyjne tłumaczenie
Efekt końcowy i cena wstępu
To animowana strona fikcyjnego studia animacji 2D „Kalamarnica”, którą zbudowałem z pomocą Claude Code i Codeksa. Kiedy przewijasz ją w dół, czarno-biały świat rodem z bajek z lat 30. dosłownie nabiera koloru — najpierw pojawia się pomarańcz, potem niebieski i żółty, a efekt zmienia się na ekranie w miarę scrollowania. Sekcja kontaktowa jest już w pełnym kolorze. Zero programowania, dzień roboty.
Zanim to jednak wyszło, przepaliłem mnóstwo kredytów i tokenów, a na koniec wyrzuciłem wszystko do kosza — i to była chyba najlepsza decyzja w całym projekcie. Pokażę ci, jak podszedłbym do budowania animowanych stron, gdybym chciał się tego nauczyć bez wchodzenia w każdy szczegół, ale za to z realnym rachunkiem i z decyzjami, w których AI się myliło. Na koniec zobaczysz, jak w prosty sposób wystawić taką stronę do internetu.
Jak lepiej tego nie robić — nauka z nieudanego podejścia
Wszystko zaczęło się od tego, że obejrzałem kilkanaście zagranicznych filmów, w których twórcy pokazywali, jak takie strony powstają za pomocą jednego magicznego prompta i nowych, potężnych modeli — GPT-5.6 „Sol” czy Fable 5. W mojej głowie zrodził się pomysł na stronę fikcyjnej kawiarni „Deploy Rose”. Usunąłem ją, ale część mniej udanych animacji z tamtego podejścia można zobaczyć w filmie.
Co poszło nie tak? Po pierwsze, cały koncept był zbiorem losowych scen, a nie jedną spójną historią — klipy leciały obok siebie, zamiast współgrać i opowiadać jedną narrację. Po drugie, zatwierdziłem generowanie wideo w ciemno, bez wcześniejszego testu na tańszym kadrze; poprawki zjadły około jednej trzeciej mojego planu na Higgsfield. Po trzecie, uwierzyłem guru z YouTube’a, że Fable czy „Sol” zbuduje super stronę jednym promptem, którą potem sprzedasz za „pierdyliard dolarów”. Spoiler: nie zbudujesz jej jednym prostym promptem.
Sam koszt wygenerowania obrazów i animacji przy obu stronach — tej nieudanej i tej z intro — to w przeliczeniu jakieś 100 zł. Nie liczę w tym zużycia planu Max 20× w Claude ani planu Pro 5× w Codeksie, bo z tych modeli korzystałem.
Ta pozorna porażka nauczyła mnie jednej rzeczy, która zmieniła całe podejście: zanim wydasz choćby jeden kredyt czy grosz, musisz mieć w głowie jeden koncept — jedno zdanie, które opisuje całą linię narracyjną.
Zespół AI i stack technologiczny
Za drugim razem zbudowałem sobie mały zespół AI i zanim ktokolwiek zaczął cokolwiek generować, musieliśmy ustalić, co w ogóle chcemy stworzyć i jakich narzędzi użyjemy.
Mój stack wyglądał tak. Claude Code z modelem Fable 5 na medium efforcie, żeby oszczędzić tokeny. Zwykle korzystam z Fable’a na medium albo high — na medium i tak jest lepszy niż Opus 4.8, więc mi to wystarcza. Claude pomógł mi złożyć sensowny koncept, narrację i historię strony, a także delegował zadania do Codeksa i sprawdzał, czy ten nie robi lipy.
Drugi zawodnik to Codex z modelem GPT-5.6 „Sol” na wysokim poziomie rozumowania. Zajmował się „czarną robotą” — wdrożeniem i generowaniem materiałów w Higgsfield. Co ciekawe, „Sol” sprawdza mi się lepiej niż Fable do kreatywnych burz mózgów (używam go np. do konceptów miniaturek), więc chciałem sprawdzić, na co go stać.
(Informacja dodatkowa: „effort” to poziom rozumowania modelu — im wyższy, tym dokładniejsze odpowiedzi, ale i większe zużycie tokenów.)
Jeśli masz tylko plan Claude Code, radzę użyć silniejszego modelu do planowania i audytów (np. Fable 5), a słabszego i tańszego do wdrażania (np. Opus 4.8) — przy dobrym planie słabszy model poradzi sobie z implementacją, a ty oszczędzisz limity i koszty API. Na planie Pro w Claude nie masz dostępu do Fable’a, więc możesz planować Opusem, a wdrażać Sonetem.
Higgsfield, MCP, CLI i skille
Do generowania obrazów i animacji użyłem platformy Higgsfield (to nie materiał sponsorowany) — z planem odnawianym co miesiąc. To agregator modeli do generowania i edycji grafik oraz wideo, dużo różnych narzędzi w jednym miejscu. Wybrałem ją także dlatego, że oferuje MCP i CLI, dzięki czemu można połączyć agentów (Claude czy Codex) z platformą — my tylko wpisujemy polecenia na czacie, a agenty generują za nas.
(Informacja dodatkowa: MCP — Model Context Protocol — to standard łączący agenta AI z zewnętrznymi usługami; CLI to interfejs uruchamiany w terminalu.)
Żeby zainstalować Higgsfield CLI w Claude Code, kopiujesz komendę, przechodzisz do folderu projektu w terminalu, wklejasz i zatwierdzasz — potem autoryzujesz konto Higgsfield w przeglądarce. Przydała mi się też paczka skilli od Higgsfield — dzięki niej Codex doskonale wiedział, jak korzystać z ich CLI. Skille najlepiej instalować lokalnie, per projekt.
Korzystałem również z paczki skilli od Mata Pococka — konkretnie ze skilla grillin do burzy mózgów oraz spec, dzięki któremu razem z Claude i Codeksem stworzyliśmy dokładny plan działania przed wdrożeniem. To pierwsza bramka bezpieczeństwa: im więcej czasu poświęcisz na dobry plan, tym szybciej pójdzie budowanie, mniej przepalisz tokenów i lepszej jakości będzie efekt.
Koncept i szukanie inspiracji
Razem z Claude Code (Fable 5) utworzyliśmy nowy projekt — folder „strona Motion” — zainstalowaliśmy skille, skonfigurowaliśmy Higgsfield CLI i przygotowaliśmy pliki na bazie transkrypcji kilku poradników z YouTube’a oraz mojego wcześniejszego, nieudanego podejścia, w którym przepaliłem około jednej trzeciej miesięcznych kredytów (227 kredytów). Nie traktuję tego jak stratę — czegoś się nauczyłem i wliczam to w koszty.
Inspiracji szukałem na Pintereście (spodobała mi się animacja „splasha”, gdzie kolory rozmywają się po ekranie), na stronie motionsites.ai (skąd można skopiować prompt gotowej strony i zastosować inżynierię wsteczną — poprosić model, żeby się nią zainspirował) oraz na stronie CSO, gdzie znalazłem czarno-białe postaci, które przydały się do animacji z intro.
Claude zaproponował trzy pomysły: „Klex & Co” (fikcyjna manufaktura tuszu), „Studio Kalamarnica” (fikcyjne retro-studio animacji 2D) oraz „Bimberfizz” (fikcyjna craftowa oranżada). Kupiłem Kalamarnicę: maskotka-kalamarnica machająca pędzlem, scena z lat 30. w czerni i bieli, która nabiera koloru w miarę scrollowania. Każdy „splash” koloruje kolejny fragment świata, a finał to pełnokolorowy kadr z showreelem — ładna metafora „ożywiania twojej marki”. Model podpowiedział też rdzeń stylu: rubber hose, lata 20.–30., Fleischer Studios, Betty Boop, Felix, oraz przejścia „Iris in / Iris out” (czarne kółko zamykające sceny) jako tanie i efektowne przejścia między sekcjami na scrollu.
(Informacja dodatkowa: „Iris in/out” i „rubber hose” to techniki z klasycznej animacji — zamykanie kadru czarnym kółkiem oraz gumowe, elastyczne kończyny postaci.)
Zebrałem inspiracje (Cuphead, Felix, Ink Well, splash z Pinteresta) i poleciłem Codeksowi przeczytać agents.md, runbook i inspiracje oraz zapisać zdjęcia jako materiały referencyjne z odpowiednimi nazwami.
Grillin: 30 pytań przed generowaniem
Zanim wydaliśmy grosz, przeprowadziłem z Codeksem (GPT-5.6 „Sol”, high effort) 30–40-minutowy grillin przy pomocy skilla z paczki Mata. Agent zadawał mi jedno pytanie na raz i dawał własne rekomendacje. Gdy nie wiedziałem, jak odpowiedzieć, wracałem do Claude i przesyłałem mu pytania Codeksa. Raz Codex zaproponował dwie opcje ruchu kamery, a Claude stwierdził, że moja wątpliwość jest zasadna i najlepsza jest trzecia opcja, którą Codex pominął — po czym dał mi gotowy prompt. Tak krążyłem między modelami przez wszystkie 30 pytań.
Uważam, że to najważniejsza bramka bezpieczeństwa: zbijać myśli z modelami i planować, a nie od razu generować. Finalnie stanęło na pięciu osobnych scenach, dzięki czemu całość wyszła bardziej autentycznie i taniej. Powstał gotowy storyboard z oszacowanym budżetem — Codex, mając dostęp do Higgsfield CLI, wiedział, ile mniej więcej kosztuje generacja i mógł ocenić, czy zmieścimy się w planie. Zmieściliśmy się.
Bramka nr 2: najpierw obrazy, potem wideo
Zamiast od razu generować animacje, najpierw wygenerowałem obrazy, żeby sprawdzić, czy stylistyka mi odpowiada. Zleciłem Codeksowi, by przez Higgsfield CLI i skille skorzystał z modelu GPT Image 2 i wygenerował obrazy w jakości high w 4K. W idealnym scenariuszu warto najpierw zrobić 1K i dopiero potem regenerować, ale jeden obraz kosztuje 12 kredytów, więc zaryzykowałem od razu wyższą jakość.
Codex sam przygotował prompty i sam wygenerował materiały — nie wchodziłem na Higgsfield, niczego nie klikałem. Tak powstał kadr kanoniczny maskotki, którego użyliśmy jako referencji do reszty. Ciekawostka: GPT Image 2 narysował kilka macek zamiast dwóch nóg. Nie kazałem tego poprawiać — wyglądało lepiej, niż to sobie wyobrażałem. Wniosek: czasem najlepsza decyzja to nie walka z modelem o każdy piksel, lecz przyznanie mu racji, gdy ma lepszy pomysł.
Generowanie i oszczędzanie na wideo
Dopiero gdy wszystkie grafiki mi się podobały, przeszedłem do wideo — również w Higgsfield, tym razem modelem Seedance 2. Chodziło o zamianę obrazu w wideo. Początkowo generowałem w 480p, bo różnica w cenie jest spora: 5 sekund w 480p to 15 kredytów, w 720p — 25, w 1080p — 45, a w 4K aż 110 kredytów. Rozsądnie było wygenerować pierwszą testową scenę jak najtaniej, żeby sprawdzić, czy ma ręce i nogi. Polecam też generować bez dźwięku — i tak się nie przyda. Całością znów zajął się Codex.
Gdy pierwsze podejścia wyglądały dobrze, powtórzyłem animację w 720p. Storyboard dzielił animację na akty, a każdy odpowiadał innej sekcji strony. Technika: dodajemy klatkę początkową (np. butelka), klatkę końcową (ta sama butelka, bo ośmiornica miała się w niej schować) oraz materiał referencyjny — po prostu wyciętą postać, którą Codex wyciął z wcześniejszego screena. Kolejne akty szły analogicznie: klatka startowa z mniejszą ilością koloru, końcowa z większą, plus referencja.
Chciałem lepszej rozdzielczości niż 720p, ale brakowało mi kredytów (4K to ~100 kredytów, a miałem 101). Dlatego poprosiłem Codeksa o użycie upscalera wideo (Beidance upscale) — przesłaliśmy wideo w 720p i dostaliśmy 4K za kilkanaście kredytów. To dużo tańsze niż generowanie od razu w 4K. Generowanie z upscalingiem trwało kilkadziesiąt minut, ale działo się w tle.
Budowa strony: klatki zamiast wideo
Zleciłem Codeksowi budowę strony w czystym HTML, CSS i JS — zero skomplikowanych frameworków. Animacja to nie plik wideo, lecz 121 klatek w formacie WebP. Dzięki temu całość śmiga przy przewijaniu i nie zabija wydajności. Codex użył kodeku FFmpeg, żeby podzielić wideo na klatki. W panelu bocznym projektu, w folderze .agents, są skille dostępne w Codeksie — w skillu Higgsfield oprócz generate jest też „Higgsfield Websites” z instrukcją, jak tworzyć strony z efektem scrollowania. Codex nie musiał więc uczyć się wszystkiego od zera.
Bramka nr 3: audyt — agent pilnuje agenta
Pierwsza wersja strony miała masę artefaktów. Zleciłem więc audyt Fable’owi w Claude Code — robię to bardzo często przy tworzeniu kodu. To trzecia bramka: jeden agent AI pilnuje drugiego. Codex sam zaprojektował prompt z prośbą o audyt dla Claude — skopiowałem go i wkleiłem do Claude (znów Fable 5, medium lub high). Claude odpalił podgląd w przeglądarce i przez Playwright zweryfikował wszystkie 121 klatek.
Największy błąd: efekt przejścia „Iris” działał odwrotnie — czarne kółko rosło nad sceną, zamiast się kurczyć jak w starych bajkach. Porozmawiałem z Claude o tym, co mi się podoba, a co nie, i doszliśmy do finalnej wersji. Ten audyt uratował stronę przed wypuszczeniem z błędem, którego przy zwykłym oglądaniu praktycznie nie widać.
Publikacja przez Hostinger i MCP
Zostało wystawić stronę do internetu. Postawiłem na hosting od głównego partnera technologicznego kanału — Hostinger. Do wyboru są trzy plany: Premium (12 zł/mies., do 3 stron), Bez limitu (16 zł/mies., bez ograniczeń liczby stron) i Cloud Startup (35 zł/mies.). Różnią się m.in. liczbą stron, pamięcią SSD (20 GB / 50 GB), a plany Bez limitu i Cloud Startup pozwalają hostować aplikacje w Node.js, nie tylko WordPressa. W każdym planie dostajesz domenę na rok. Im dłuższy okres (np. 48 miesięcy), tym taniej; z kodem rabatowym ROBERTHOST plan na 4 lata wychodzi niecałe 850 zł. Jest też 30-dniowa gwarancja zwrotu pieniędzy.
(Informacja dodatkowa: fragmenty o cenach, kodzie rabatowym i „głównym partnerze technologicznym” to lokowanie produktu / współpraca reklamowa autora.)
Hostinger oferuje serwer MCP, m.in. dla Claude Code. Wchodzisz na wskazaną stronę, w sekcji „build by you or your AI” wybierasz narzędzie, kopiujesz komendę, wklejasz w terminalu projektu i zatwierdzasz, a potem logujesz się kontem Hostinger, by autoryzować dostęp przez MCP. Po dodaniu MCP najlepiej wyłączyć i włączyć aplikację, żeby serwer i jego narzędzia załadowały się do kontekstu agenta. Przez MCP można zarządzać hostingiem, VPS-em, domenami, DNS-ami czy e-commerce.
Po restarcie zapytałem Claude, jakie mam dostępne domeny — użyłem „arena-utomaz” (celowo z błędem w nazwie, żeby to pokazać). Poprosiłem, by wrzucił stronę na Hostinger i podpiął domenę; Claude wybrał odpowiedni plan i ogarnął całą resztę sam. Gotowa strona pokazuje kalamarnicę i animację rysowania, kolejne sekcje nabierające koloru (pomarańcz, żółty, niebieski, zielony), efekt Iris oraz przycisk call-to-action wysyłający maila na fikcyjny adres.
Gdy chcesz coś zmienić, mówisz o tym agentowi. Poprosiłem Claude, by upewnił się, że wszystko wdrożono poprawnie — znalazł kilka rzeczy, poprawił je i zweryfikował na produkcji w kilkadziesiąt sekund. Bez ręcznego zarządzania plikami, zmiany zaciągają się niemal automatycznie.
Podsumowanie procesu
Cała droga — od pierwszego spalonego podejścia do strony, która realnie żyje w internecie pod własnym adresem — trzyma się jednej osi: porażka, koncept, budżet, decyzje, audyt, deploy. Sześć bramek, które robią różnicę między prawdziwym procesem a magicznym promptem od „guru AI” z internetu.
Chcę być szczery: to nie jest bajka o spektakularnym sukcesie po jednym kliknięciu, lecz historia realnego procesu, w którym AI czasem się myli. Ale proces jest w miarę powtarzalny — im więcej takich stron zrobisz, tym lepiej ci to wyjdzie. Pełną instrukcję udostępniam za darmo (link w opisie). Zrobiłem tylko wersję na desktop — optymalizacja na mobile to temat na osobny film.
10 najważniejszych takeaways — z kontekstem zastosowania
1.Zacznij od jednego zdania opisującego całą narrację
Na czym polega: Pierwsze podejście autora rozsypało się, bo było zbiorem losowych scen bez wspólnej historii. Zanim wydasz kredyt, potrzebujesz jednego konceptu spinającego całość.
Jak stosować: Sformułuj jedno zdanie („czarno-biały świat z lat 30. nabiera koloru w miarę scrollowania”) i przepuść przez nie każdą scenę — jeśli nie pasuje, wytnij ją.
Na co uważać: Ładne pojedyncze klipy nie zastąpią spójności. Efektowna scena, która nie służy narracji, to zmarnowane kredyty.
2.Podziel modele według ról: silny do planowania, tańszy do wdrożenia
Na czym polega: Fable 5 planował i audytował, a Codex (GPT-5.6 „Sol”) wykonywał czarną robotę. Silny model pilnuje jakości, tańszy realizuje.
Jak stosować: Na planie Claude Code planuj Fable’em, wdrażaj Opusem; na planie Pro planuj Opusem, wdrażaj Sonetem. Dobry plan pozwala słabszemu modelowi go wykonać.
Na co uważać: Oszczędność ma sens tylko przy naprawdę dobrym planie — słaby model przy złym planie wygeneruje kosztowny chaos.
3.Traktuj planowanie jako pierwszą bramkę bezpieczeństwa
Na czym polega: 30–40-minutowy grillin (pytanie po pytaniu) z Codeksem, wsparty konsultacjami z Claude, ułożył całą strukturę i storyboard przed generowaniem.
Jak stosować: Użyj skilla do burzy mózgów, odpowiadaj na jedno pytanie naraz, a przy trudnych wyborach skonfrontuj rekomendację jednego modelu z drugim.
Na co uważać: To zajmuje czas i bywa nużące, ale pominięcie tego etapu przekłada się wprost na przepalone kredyty na poprawki.
4.Konfrontuj modele między sobą (agent pilnuje agenta)
Na czym polega: Autor krążył między Codeksem a Claude — jeden wskazał, że drugi pominął najlepszą, trzecią opcję ruchu kamery. Na końcu Fable audytował stronę zbudowaną przez Codeksa i wykrył odwrócony efekt Iris.
Jak stosować: Przesyłaj propozycje jednego modelu drugiemu do oceny; zlecaj audyt kodu/efektu osobnemu, silniejszemu modelowi z podglądem w przeglądarce (Playwright).
Na co uważać: Błędy, które audyt wychwytuje, bywają niewidoczne przy zwykłym oglądaniu — nie zakładaj, że „skoro wygląda dobrze, jest dobrze”.
5.Testuj najpierw tanio, dopiero potem generuj drogo
Na czym polega: Ceny rosną drastycznie z rozdzielczością (480p — 15 kredytów, 4K — 110 za 5 sekund). Autor testował sceny w 480p/720p, zanim zdecydował się na finał.
Jak stosować: Wygeneruj testową scenę w najniższej rozdzielczości i bez dźwięku, sprawdź, czy „ma ręce i nogi”, i dopiero wtedy skaluj jakość.
Na co uważać: Zatwierdzanie generacji „w ciemno” zjadło autorowi jedną trzecią planu przy pierwszym podejściu — to najdroższy błąd w całym procesie.
6.Upscaluj wideo zamiast generować od razu w 4K
Na czym polega: Zamiast płacić ~100 kredytów za 4K, autor wygenerował wideo w 720p i podniósł jakość upscalerem za kilkanaście kredytów.
Jak stosować: Generuj w niższej rozdzielczości, a finalną jakość dobij osobnym modelem upscalującym; procesy puszczaj w tle, bo trwają kilkadziesiąt minut.
Na co uważać: Upscaling nie naprawi błędów kompozycji ani stylu — poprawia tylko rozdzielczość, więc materiał źródłowy musi być już dobry.
7.Zamień wideo na klatki (WebP) dla wydajności strony
Na czym polega: Animacja na stronie to 121 klatek WebP sterowanych scrollem, a nie plik wideo — dzięki temu przewijanie jest płynne, a wydajność nie cierpi.
Jak stosować: Zleć agentowi podział wideo na klatki (np. FFmpeg) i sterowanie nimi w czystym HTML/CSS/JS; korzystaj z gotowych skilli opisujących ten wzorzec.
Na co uważać: Dużo klatek to więcej plików do załadowania — trzeba pilnować rozmiaru i liczby klatek, by nie obciążyć strony w drugą stronę.
8.Nie walcz z modelem o każdy piksel
Na czym polega: GPT Image 2 narysował kalamarnicy macki zamiast nóg — autor to zaakceptował, bo wyszło lepiej, niż zaplanował.
Jak stosować: Gdy „błąd” modelu poprawia efekt, przyjmij go i idź dalej, zamiast regenerować w nieskończoność w pogoni za pierwotnym wyobrażeniem.
Na co uważać: To nie licencja na akceptowanie byle czego — rozróżniaj szczęśliwy przypadek od realnego defektu, który zaboli w finale.
9.Publikuj i edytuj stronę przez MCP z poziomu rozmowy
Na czym polega: Dzięki serwerowi MCP Hostingera Claude sam wybrał plan, wrzucił stronę, podpiął domenę i wdrażał poprawki na produkcji w kilkadziesiąt sekund.
Jak stosować: Podłącz serwer MCP hostingu, po instalacji zrestartuj aplikację agenta, a potem opisuj słowami, co ma zrobić (deploy, zmiana, weryfikacja).
Na co uważać: Po dodaniu MCP narzędzia nie załadują się w trwającej sesji — trzeba ją zrestartować; autoryzacja MCP daje agentowi realny dostęp do konta, więc traktuj to poważnie.
10.„Magiczny prompt” to mit — licz się z realnym rachunkiem
Na czym polega: Wbrew obietnicom „jednego prompta” cały koszt to ~100 zł za grafiki i wideo plus zużycie planów Max/Pro, dwa podejścia i sześć bramek kontrolnych.
Jak stosować: Zaplanuj budżet kredytów z góry (Codex z dostępem do CLI potrafi oszacować koszt storyboardu) i potraktuj proces jako powtarzalny warsztat, nie jednorazowy fuks.
Na co uważać: Fragmenty o hostingu, cenach i kodzie rabatowym to lokowanie produktu — oceniaj je jako reklamę, a nie neutralną rekomendację, i porównaj oferty samodzielnie.