O czym jest ten film
- Prezentacja strony AI Automation Society zbudowanej w Claude: warstwowe tło, animowany ekran laptopa i karty nakładające się przy przewijaniu — plus wersja mobilna, która trzyma ten sam poziom.
- Wizytówka samego autora: rosnące liczniki, subtelne animowane tło, galeria zdjęć i pasek nawigacji towarzyszący czytelnikowi przez całą witrynę.
- Landing page Glydo, aplikacji do dyktowania, z animacjami imitującymi użycie produktu w Slacku, Cursorze, Gmailu i Claude Code.
- Główna teza: polecenie „zrób, żeby wyglądało premium” nie działa — model musi dostać konkretny wzorzec i opis, co dokładnie mamy na myśli.
- Praktyczna metoda: inspiracja z pojedynczych stron (Fora — warstwy), komponenty z promptami z 21st.dev, wzorce z godly.design, Awwwards i Motion Sites.
- Bezpłatna umiejętność ScrollCraft autora — zbiór zasad warstwowania, przewijania i animowania tekstu, dostępny w jego społeczności w Skool.
- Eksperyment „jedno polecenie, jedna strona”: Fable 5.1 zbudował od zera dwie dopracowane witryny — Ferna (zioła) i Low-key (klawiatura).
- Siedem zasad budowania stron z AI: brand guidelines, trzy P, responsywność przewijania, inspiracja, gotowe komponenty, test mobilny i pętla weryfikacji.
- Porównanie Fable 5 z 5.1: przy tych samych promptach jakość niemal identyczna, ale 5.1 wychodził taniej w każdym zestawieniu.
- Własne limity autora potwierdzają zapowiedź Anthropic: nowa wersja ma być nawet do 45% tańsza w ciężkiej pracy agentowej.
Redakcyjne tłumaczenie
(Informacja dodatkowa: przez cały materiał „Fable” to używana przez autora nazwa modelu Claude od Anthropic; 5.1 to najnowsza odsłona. „AI slop” oznacza tu generyczny, wtórny chłam, jaki AI potrafi wyprodukować przy zbyt ogólnych poleceniach.)
Strona AI Automation Society: warstwy robią całą różnicę
To prawdopodobnie najładniejsza strona, jaką kiedykolwiek zbudowałem w Claude — tak autor zaczyna, prezentując witrynę AI Automation Society. Najbardziej pociąga go zabieg warstw: gdy zaczynamy przewijać, widać wyraźnie, że góry w tle, linia drzew i ekran laptopa przesuwają się niezależnie od siebie, a to nadaje stronie drogi, dopracowany charakter. Sam laptop jest przy tym animowany — jego ekran żyje.
Im niżej, tym więcej się dzieje. Pojawiają się informacje o społeczności, tekst wjeżdża w kadr, między sekcjami „klasa”, „spotkania na żywo”, „wydarzenia” i „ranking” można się przełączać, a karty zaczynają układać się jedna na drugiej — zdaniem Herka całość wygląda wyjątkowo żywo i wciąga. Dalej jest cennik (darmowa społeczność, wersja Plus, kohorta certyfikacyjna), pytania i odpowiedzi, animacja, w której tekst „zaciska się” przy zmianie zakładki, filmy z YouTube, a na końcu wezwanie do działania, w którym motyw warstw wraca.
Telefon? Ten sam poziom
Autor pokazuje witrynę na własnym telefonie: ten sam animowany ekran laptopa, ten sam efekt warstw. Nieco inaczej działa przechodzenie między sekcjami, a karty nie układają się w stos jak na komputerze — choć, jak dodaje, jeden prompt prawdopodobnie by to naprawił. Sedno pokazu: Fable 5.1 radzi sobie z tym także na telefonie i odbiór jest równie dobry.
Wizytówka autora
Drugi przykład to strona samego Herka. W sekcji powitalnej liczniki przekręcają się w górę, obok widać jego fotografię, a tło — animowane i dodające głębi — nie odciąga uwagi. Liczby są klikalnymi linkami, a animacja tła zachowuje spójność przez całe przewijanie. Elementy rozjaśniają się pod kursorem; jest też interaktywny fragment reagujący na ruch myszy — znów z wyczuciem, bez lawiny efektów.
Dalej: krótkie tło z linkiem do zakładki „o mnie” (nic więcej niż kilka zdań biografii), montaż zdjęć wjeżdżających do kadru, książka „Becoming AI Native”, informacja o nowych filmach na YouTube co tydzień oraz przycisk „Dołącz do AIS” z podpisem, który model sam znalazł w plikach na lokalnym pulpicie autora. Na pochwałę zasługuje również pasek nawigacji towarzyszący czytelnikowi od początku do końca — w witrynie AIS działał identycznie. „Nie wiem czemu, ale gdy ta belka jest przyklejona, po prostu dobrze się to ogląda” — kwituje Herk.
Glydo: strona, która sama pokazuje produkt
Trzeci przykład to Glydo, aplikacja do dyktowania, przy której autorowi najbardziej podoba się animowana belka dyktowania: słowa zapisują się na żywo i lecą do Slacka, a całość przypomina to, co widzowie widzą, gdy sam mówi do mikrofonu. W kolejnych sekcjach strony pojawiają się aplikacje, których i tak używamy; pasek pauzuje, gdy na niego wchodzimy; widać sekwencję „przytrzymaj klawisz, powiedz niechlujnie”, po której tekst ląduje w aplikacji już wyczyszczony.
Strona demonstruje Glydo w Slacku, Cursorze, Gmailu i Claude Code w terminalu, a także zestawienie transkrypcji z mówieniem i ręcznym pisaniem. Ulubiony fragment autora to animacja, w której od dyktowanej kwestii rozchodzą się strzałki do kolejnych aplikacji. Część logotypów wyszła przekręcona, ale jak na jednorazowe polecenie — bardzo przyzwoicie. Na dole krótko o założycielach i cennik.
Sedno: nie każ modelowi zgadywać, co znaczy „premium”
Jak doprowadzić Fable 5.1 do takich rezultatów bez „slopu”? Autor wymienia swoje odkrycia: animacje przewijania, bardziej dynamiczny tekst, a w tym filmie przede wszystkim warstwowanie — to pomaga ogromnie. Kluczowa jest jednak inna obserwacja: do żadnego modelu, Fable 5.1 nie wyłączając, nie można napisać po prostu „zrób, żeby wyglądało profesjonalnie, żeby czuć klasę”. Model musi mieć coś, na czym się oprze.
Dlatego autor sięgnął po gotowe strony. Dla witryny AIS inspiracją był serwis Fora: wielki tekst powitalny, warstwy w tle, a przy przewijaniu góry przesuwające się w osobnych planach. Opisał to wprost: sekcja powitalna ma mieć cztery płaszczyzny — dalszą górę, środkową górę, ekran laptopa i przedni plan z drzewami — i taki właśnie efekt kazał odtworzyć. Podobnie z kartami: podobało mu się, jak nakładają się jedna na drugiej, więc opisał modelowi ten mechanizm, wyjaśnił, co mu się w nim podoba, i przekazał jako punkt odniesienia.
Komponenty zamiast natchnienia: 21st.dev i ScrollCraft
Własnej strony nie budował na bazie jednego wzorca — złożył ją z pojedynczych elementów. Narzędziem był 21st.dev, biblioteka komponentów, z której można wprost skopiować prompt danego efektu i przekazać go agentowi; przykład: „container scroll” odtwarza przewijany kontener. Autor przeglądał tła, gradienty i elementy interaktywne, wybrał tło widoczne za tekstem — i na nim oparł projekt. Następnie opisał oczekiwania: tekst ma wjeżdżać przy wejściu w kadr, strona ma mieć głębię i dynamikę, a jedna sekcja ma przewijać się w bok.
Do tego użył własnej umiejętności ScrollCraft, dostępnej bezpłatnie w jego społeczności w Skool (link w opisie filmu). Zbiera ona zasady projektowe: warstwowanie, przewijanie, sposoby pojawiania się tekstu. Autor stale ją uzupełnia, bo sam dalej uczy się projektowania z AI.
Wzorzec z konkurencji i galerie inspiracji
Dla Glydo punkt wyjścia stanął po drugiej stronie barykady: autor obejrzał witrynę Lemon, konkurencyjnej aplikacji do dyktowania, i zachwycił się animacjami dającymi poczucie, że już używa się produktu. Polecenie było wprost: weź wytyczne marki Glydo i przenieś je na stronę w tym stylu. To niemal klon — przyznaje — ale właśnie w tym widać siłę Fable 5.1: potrafi zajrzeć w budowę cudzej strony i wygenerować własną o identycznym charakterze, łącznie z tłem przypominającym akwarelę. Efekt byłby gotowy do publikacji.
Do szukania inspiracji służą trzy miejsca:
- godly.design — na topie, logotypy, sekcje powitalne, wezwania do działania, stopki, obrazy OG;
- Awwwards — strony nagradzane za projekt, z podziałem na kategorie: technologia, e-commerce, restauracje, moda. Argument autora: witryna utrzymana w klimacie własnej niszy po prostu lepiej konwertuje, bo mówi językiem swojego odbiorcy;
- Motion Sites — zapierające dech animowane tła, które można przenieść do własnych projektów; jedno z nich posłużyło za punkt wyjścia dla interaktywnego tła na stronie autora (w jego wersji reaguje ono na użytkownika).
Eksperyment: jedno polecenie, dwie strony
Kolejny krok: dać modelowi wzorzec i cel w jednym prompcie. Polecenie brzmiało: zbuduj dwie wyraźnie odmienne, najbardziej imponujące witryny w duchu ScrollCraft — z warstwami, z odniesieniem do strony AIS, z komponentami z 21st.dev i trendami z godly.design. Model mógł sam wygenerować potrzebne materiały (m.in. w Higgsfield (Informacja dodatkowa: narzędzie do generowania wideo z AI.)), z jednym zastrzeżeniem: subtelnie, ale premium.
Pierwszy wynik to Ferna — „świeże zioła bez parapetu”. Warstwy widać od pierwszej sekundy: roślina, liście i tło leżą na różnych płaszczyznach, co daje efekt zanurzenia. Tekst wpada w kadr, karty się nakładają, jest „przewijane wideo”, w którym roślina rośnie (i można je cofnąć), rośliny w tle przesuwają się w innym tempie niż pierwszy plan, a finał stanowi filmik, w którym zapala się światło. Całość z jednego prompta.
Drugi wynik to Low-key, strona klawiatury. Tekst wjeżdża, klawisze wyglądają, jakby były naciskane, a tło i klawiatura przesuwają się w różnym rytmie. Jedna wada: twarde cięcie w środku — przy kolejnym przejściu, w trybie iteracji z pętlą weryfikacji, dałoby się to wyprostować, ale to wciąż jednostrzałowe polecenie. Niżej klawiatura dosłownie rozkłada się na części i pokazuje wnętrze; można wybrać wariant kolorystyczny, biurko cały czas ucieka w dół, klawiatura składa się z powrotem i pojawia się wezwanie do działania.
Wniosek autora: obie witryny z jednego prompta to znakomita baza do dalszej pracy.
Siedem zasad, które decydują o jakości
Wszystkie są zaszyte w umiejętności ScrollCraft.
- Wytyczne marki. Logo, kolory i cała reszta mają tworzyć spójną całość.
- Trzy P. Autor nazywa to „oceną gotowości do monetyzacji AI”: czy biznes rozwiązuje realny problem (pain), czy jest osoba, której on doskwiera (person), i czy istnieje obietnica (promise), że produkt rozwiąże ten problem właśnie tej osobie.
- Poczucie sterowania przy przewijaniu. Użytkownik ma czuć, że to on kieruje stroną, bo każdy ruch kółka myszy przynosi odpowiedź. Nie musi to być nic efektownego — samo wjeżdżanie słów wystarczy, by witryna wydała się znacznie bardziej dopracowana. Autor odpowiada tu na głos z poprzedniego filmu („nienawidzę tego świata 3D, w którym lecę”): ile dynamiki, zależy od biznesu i trzech P, ale jakiś element przewijania warto mieć.
- Inspiracja. Trudno wejść w projekt i po prostu opisać oczekiwany efekt, licząc, że nie wyjdzie „slop” — bez umiejętności albo szablonu najpewniej wyjdzie, bo AI pozostaje AI. Punktem odniesienia może być cudza strona (warstwy, ułożenie cennika, tło reagujące na mysz), a 21st.dev podpowie kształt nawet obramowań, przycisków czy sekcji FAQ.
- Gotowe komponenty. Warto wiedzieć, jakie elementy już istnieją i da się je przenieść, by strona była dynamiczna i zgodna z marką.
- Telefon. Mnóstwo osób sprawdza nas z komórki i klika linki właśnie tam — wygląd mobilny trzeba zweryfikować; Claude radzi sobie z tym dobrze.
- Weryfikacja. Model ma robić zrzuty ekranu wszystkiego, a przy animacjach przewijania — klatka po klatce. Wtedy ogląda niejako film z tego, jak użytkownik będzie przeżywał stronę. Bez takiej pętli, w której model sam zauważa, że coś wygląda źle, wystaje poza kadr albo ma zły kolor, i to poprawia — nie ma sensu zaczynać.
Fable 5 kontra Fable 5.1: ten sam fach, niższy rachunek
Ostatnia część materiału to porównanie obu wersji. Autor zlecił im serię podobnych zadań — m.in. kilka witryn typu „perk form” — i przy tych samych promptach, zasobach, wytycznych marki i umiejętności (wszędzie ScrollCraft) różnice były minimalne. Żadna wersja nie zmiażdżyła drugiej. Wniosek autora: przywołane siedem zasad znaczy więcej niż wybór konkretnego modelu.
Za to na rachunku różnica jest wyraźna — Fable 5.1 wychodził taniej w każdym zestawieniu: 1824 wobec 2022; 1452 wobec 1467 (tu niewiele); 1283 wobec 2164; 1118 wobec 1737. To wpisuje się w zapowiedź Anthropic z notki o premierze: około 25% oszczędności w typowej pracy wiedzowej i nawet do 45% w cięższej, wieloetapowej pracy agentowej — dzięki oszczędniejszemu gospodarowaniu tokenami.
Własne doświadczenie autora to potwierdza: po wszystkich eksperymentach z filmu (i sporej części tych niepokazanych), przy 5–6 godzinach pracy, wykorzystał ledwie około 45% tygodniowego limitu — podczas gdy wcześniej, na Fable 5, potrafił go wyczerpać w godzinę–dwie. Planował rozłożyć te liczby na czynniki pierwsze, ale uznał, że zrobi się monotonnie, więc poprzestał na wynikach.
Podsumowanie autora jest krótkie: Fable 5.1 wydaje się odrobinę szybszy i odrobinę tańszy.
Na koniec
Herk zaprasza do bezpłatnej społeczności w Skool po umiejętność ScrollCraft — stale ją uzupełnia w miarę kolejnych lekcji o projektowaniu z AI. Prosi o łapkę, jeśli materiał czegoś nauczył, i żegna się do następnego odcinka.
10 najważniejszych takeaways — z kontekstem zastosowania
1.Zamiast „zrób to premium” — konkretny wzorzec
Na czym polega: Ogólnikowe polecenia („profesjonalnie”, „klasycznie”) niczego modelowi nie mówią. Różnicę między dobrą stroną a „slopem” robi podany przykład wraz z opisem, co dokładnie w nim cenimy.
Jak stosować: Zanim napiszesz prompt, zrób research: wybierz jedną–dwie strony (np. z Awwwards w kategorii swojej branży) i w poleceniu rozłóż je na czynniki — warstwy, układ cennika, tempo animacji — wyjaśniając, dlaczego mają być odwzorowane.
Na co uważać: Wzorzec to materiał wyjściowy, nie szablon do skopiowania co do piksela; bezpośredni klon cudzego projektu bywa ryzykowny prawnie i wizerunkowo.
2.Warstwy to najtańszy sposób na głębię
Na czym polega: Kilka płaszczyzn (dal, plan środkowy, pierwszy plan), które przy przewijaniu przesuwają się w różnym tempie, daje wrażenie drogiej, dopracowanej strony — to najmocniejsze odkrycie autora w tym materiale.
Jak stosować: Opisz modelowi każdą warstwę osobno (np. dalsza góra, ekran laptopa, przednie drzewa) i każ im reagować na przewijanie niezależnie; motyw przenieś też do sekcji końcowej z wezwaniem do działania.
Na co uważać: Warstwy mają budować głębię, nie bałagan — zbyt wiele niezależnych ruchów męczy wzrok, zwłaszcza na telefonie.
3.Przewijanie musi dawać odpowiedź
Na czym polega: Użytkownik ma czuć, że steruje stroną: każdy ruch kółka myszy wywołuje reakcję — choćby tylko wjeżdżający tekst.
Jak stosować: Wypunktuj w prompcie konkretne mikroanimacje: pojawianie się słów przy wejściu w kadr, rozjaśnianie elementów pod kursorem, „zaciskanie” tekstu przy zmianie zakładki.
Na co uważać: Nie przesadzaj z dynamiką: intensywne „latanie” w trójwymiarze odstrasza część odbiorców — stopień efektu dopasuj do rodzaju biznesu i odbiorcy.
4.Korzystaj z gotowych komponentów (21st.dev)
Na czym polega: Biblioteki takie jak 21st.dev udostępniają komponenty wraz z gotowymi promptami — agent odtwarza dany element na podstawie skopiowanego opisu.
Jak stosować: Przeglądaj kategorie (tła, gradienty, elementy interaktywne, FAQ, przyciski), wybierz kilka spójnych elementów i zbuduj na nich całość, zamiast opisywać każdy efekt od zera.
Na co uważać: Sklejanie komponentów bez wspólnego mianownika (kolorystyka, tempo) daje efekt kolażu — pilnuj spójności z identyfikacją marki.
5.Szukaj inspiracji w swojej niszy
Na czym polega: Awwwards i godly.design pozwalają przejrzeć nagradzane i popularne strony w podziale na branże; Motion Sites oferuje animowane tła do wzięcia wprost.
Jak stosować: Przed startem projektu ustal klimat właściwy dla odbiorcy (e-commerce wymaga innego języka niż restauracja) i czerp wzorce z tej samej kategorii; animowane tło z Motion Sites może stać się podstawą sekcji powitalnej.
Na co uważać: Modne efekty bywają efektowne, ale nietrwałe — sprawdzaj, czy wzór „z galerii” nie przesłania przekazu i przycisku decyzyjnego.
6.Zanim animacje — trzy P
Na czym polega: Autor każe najpierw odpowiedzieć: jaki problem rozwiązuję (pain), dla kogo (person) i jaką składam obietnicę (promise). Dopiero to przesądza o charakterze strony.
Jak stosować: Zapisz trzy P razem z wytycznymi marki i wklejaj do każdego prompta — model projektuje wtedy pod konkretnego odbiorcę, a nie „ogólnie ładnie”.
Na co uważać: Zjawiskowa animacja przy rozmytym przekazie sprzedażowym nic nie da — kolejność jest ważna: najpierw trzy P, potem efekciarstwo.
7.Spójność marki ponad wszystko
Na czym polega: Logo, kolory, ton — strona ma wyglądać jak jedna całość; nawet klonując układ konkurenta, autor wstrzykiwał własne wytyczne marki.
Jak stosować: Przygotuj plik z identyfikacją (kolory, typografia, logo, styl ilustracji) i podawaj go modelowi przy każdym zadaniu, łącznie z zastrzeżeniem „subtelnie, ale premium”.
Na co uważać: Wzorzec zainspirowany cudzą stroną nie może przysłonić własnej tożsamości — twoje wytyczne mają wygrać, nie cudze logo.
8.Obowiązkowy test na telefonie
Na czym polega: Większość ludzi trafia na strony z komórki, więc wygląd mobilny trzeba weryfikować osobno; w pokazanych przykładach wersja mobilna zachowała warstwy i dynamikę.
Jak stosować: Zapisz w poleceniu wymóg pełnej responsywności i poproś model o sprawdzenie efektu w wymiarach telefonu — Claude, zdaniem autora, robi to dobrze.
Na co uważać: Niektóre mechanizmy z komputera (np. nakładanie się kart) na telefonie wymagają osobnego potraktowania — świadomie zdecyduj, co uprościć.
9.Pętla weryfikacji: zrzuty klatka po klatce
Na czym polega: Model ma dokumentować pracę zrzutami ekranu, a przy animacjach przewijania — klatka po klatce. Wtedy „ogląda film” z doświadczenia użytkownika i sam wychwytuje błędy: element poza kadrem, zły kolor, twarde cięcie.
Jak stosować: Wpisz do prompta wymóg serii zrzutów podczas przewijania i każ poprawiać wszystko, co wygląda źle, zanim model odda wynik.
Na co uważać: Jednorazowe polecenie bez iteracji zostawi rysy — w przykładzie z klawiaturą twarde cięcie przetrwało właśnie dlatego, że nie było kolejnego przejścia.
10.Metoda znaczy więcej niż wersja modelu
Na czym polega: W bezpośrednim porównaniu Fable 5 i 5.1 przy identycznych promptach, zasobach i umiejętności różnice jakościowe były znikome — o wyniku decydowała metoda pracy, nie numer modelu.
Jak stosować: Inwestuj czas we wzorce, komponenty, wytyczne marki i weryfikację, a dopiero potem w zmianę modelu na nowszy.
Na co uważać: Nowsza wersja bywa po prostu tańsza — w testach 5.1 zużywał mniej w każdym zestawieniu, zgodnie z zapowiedzią nawet do 45% w pracy agentowej. Jeśli pilnujesz budżetu, licz limity, nie tylko jakość.