O czym jest ten film
- Autor pokazuje, jak wykorzystać model Claude Fable 5 do masowego generowania wysokiej jakości, wizualnie zaawansowanych stron internetowych.
- Kluczowa teza: nie projektuj pojedynczej strony — zaprojektuj prompt, który sam projektuje wszystkie strony.
- Przeprowadził eksperyment: pozwolił modelowi zaprojektować 25 różnych stron „wszelkimi dostępnymi środkami”, bez narzucania struktury.
- Twierdzi, że nie potrzeba żadnych wieloetapowych „frameworków” — sztuką jest zejść modelowi z drogi i nie przeszkadzać jego inteligencji.
- Pokazuje dokładny, dosłowny prompt, którego użył — udostępnia go publicznie pod ścieżką /guide.
- Kluczem do jakości jest danie modelowi dostępu do narzędzi (Pinterest, Higgsfield MCP, generatory obrazu/wideo/3D) oraz mechanizmu samodzielnej weryfikacji.
- Model pracował autonomicznie 20–25 minut, uruchamiając równolegle wiele subagentów — wychodzi ok. minuty na stronę.
- Efekty obejmują m.in. trójwymiarowy „rój cząstek”, minigrę wideo, reaktywne audio-wizualizacje, proceduralne miasta 3D i obracające się produkty 3D generowane przez AI.
- Autor planuje puścić to na tydzień, wygenerować 10 000 stron i rozdać je za darmo swojej społeczności.
- Wskazuje na praktyczne zastosowania biznesowe, np. sklep Shopify z tysiącami obracających się modeli 3D wysyłanych bezpośrednio do producenta.
Redakcyjne tłumaczenie
Pomysł: zamiast projektować stronę, zaprojektuj prompt, który projektuje strony
Skoro wszyscy dostaliśmy dodatkowe pięć dni z Claude Fable 5, chcę wam pokazać prosty i łatwy sposób, w jaki można wykorzystać ten model, by w praktyce postawić nieskończoną liczbę coraz lepszych stron internetowych.
Przeprowadziłem dość ciekawy eksperyment: pozwoliłem Fable zaprojektować strony najwyższej jakości, na jakie tylko go stać — wszelkimi dostępnymi środkami, w tym z użyciem bibliotek zdjęć i wideo. Efekt końcowy jest, szczerze mówiąc, niesamowity. Najlepsze jest to, że nie kazałem modelowi robić tego w żaden konkretny sposób. Nie narzuciłem mu żadnej struktury. Cały ten motion design, projekt wideo, projekt obrazów — wszystko zrobił zupełnie sam. Nie ma tu niczego, co musiałbym mu podpowiedzieć.
Nagrywam ten film z dwóch powodów. Pierwszy jest taki, że po prostu chcę wam oddać te wszystkie strony — możecie ich użyć, żeby zaprojektować cokolwiek zechcecie. Chcę też przekazać wam prompty, których użyłem do stworzenia stron; znajdziecie je pod adresem /guide. Możecie je skopiować i wkleić do dowolnego, słabszego modelu — takiego, który nie jest Fable — i w ten sposób „zarbitrażować” koszty, które ja poniosłem, budując to wszystko.
(Informacja dodatkowa: „arbitraż” oznacza tu wykorzystanie gotowego, dopracowanego promptu w tańszym modelu, żeby uzyskać podobny efekt niższym kosztem niż płacenie za droższy model).
Drugi powód: chciałem wam pokazać, że aby uzyskać naprawdę wysokiej jakości strony, wcale nie potrzebujecie czterokrokowego czy pięciokrokowego frameworka. Nie musicie w kółko powtarzać „najpierw zdefiniuję to, potem zrobię tamto, a potem jeszcze to” — jak zapewne mówi wam większość twórców na YouTube. Wystarczy, że znajdziecie sposób, aby zejść Fable z drogi. Musicie przestać przeszkadzać inteligencji modelu, a wtedy zaczną dziać się naprawdę fajne rzeczy.
Planuję puścić to na jakiś tydzień, wygenerować 10 000 takich stron, a potem oddać je wam wszystkie za darmo. Zamierzam to zrobić. Ale zanim to zrobię, chcę wam pokazać, jak możecie odtworzyć coś takiego u siebie w domu. Dlatego postanowiłem nagrać ten film. Klucz nie polega na projektowaniu strony. Polega na projektowaniu promptu, który projektuje wszystkie strony.
Dokładny prompt, którego użyłem
Oto sam prompt. To dokładnie to, co podałem modelowi, słowo w słowo:
„Chcę zbudować 25 stron internetowych za pomocą Fable, aby zademonstrować jego skrajne możliwości w projektowaniu stron, w guście i w artystycznym zacięciu. Następnie chcę nagrać o tym film i pokazać moje opinie ponad 500 000 osób. Chcę, aby każda strona była fundamentalnie inna i łączyła zaawansowane techniki wizualne — mogą to być między innymi wysokiej jakości efekty 3D, nieziemsko piękne animacje, wyjątkowe palety kolorów, nowatorskie i ciekawe kroje pisma oraz cokolwiek, co uznasz za stosowne, by zaprezentować swoje umiejętności. Możesz to osiągnąć na wiele sposobów, korzystając z wielu przepływów pracy. Na przykład możesz pobrać obrazy z Pinteresta [tu podaję mu swój adres e-mail], wygenerować podobne, ale inne obrazy za pomocą GPT Image 2, do którego masz klucze, ożywić je w Higgsfield, do którego masz MCP — a to obejmuje dziesiątki modeli animacji, jak Kling — i użyć ich jako kluczowych zasobów. Możesz też czerpać z zaawansowanych stron w stylu motion dissolve. Masz całkowitą wolność twórczą, by projektować w sposób, który Twoim zdaniem najlepiej ilustruje Twoje możliwości. Prawdopodobnie jedna z najważniejszych części: gdy postawisz już wszystkie 25 stron, chcę, żebyś umieścił je na Netlify — z tej usługi korzystałem do hostingu — i podał mi link. Chcę też, żebyś dodał krótki opis, jak to zrobić, pod ścieżką /guide, aby inni mogli zrobić to samo. Zanim zatwierdzisz każdą stronę, wykonaj co najmniej trzy przejścia iteracyjne. Przejście iteracyjne to moment, w którym po ukończeniu strony przeglądasz ją pod lupą w poszukiwaniu problemów projektowych, okazji do ulepszenia i skomplikowania designu i tak dalej. Zobaczy to bardzo, bardzo wiele osób, a ja w pełni Cię docenię — więc daj z siebie wszystko i pokaż światu, na co Cię stać. 25 stron na Netlify, ze ścieżkami /guide i trzema przejściami iteracyjnymi — to jest Twój cel. Pracuj całkowicie autonomicznie i nie pytaj mnie o nic, dopóki nie skończysz wszystkiego”.
(Informacja dodatkowa: „MCP” — Model Context Protocol — to standard, który pozwala modelowi łączyć się z zewnętrznymi narzędziami i usługami. „Netlify” to platforma do hostowania stron. Higgsfield i Kling to narzędzia do generowania obrazu i wideo).
Jak przebiegła praca modelu
Model pracował przez jakieś 20–25 minut. Uruchomił wiele odrębnych subagentów, żeby zrównoleglić pracę i mieć pewność, że wszystko zostanie zrobione w tym samym czasie — i voilà, gotowe. Jeśli policzyć czas przypadający na jedną stronę przy tym podejściu z równoległością, przy 25 stronach wychodzi około minuty na stronę. To mnie po prostu powala, bo — jak już mówiłem wcześniej — kiedyś zajmowało to znacznie dłużej i było o wiele trudniejsze.
Jak wielokrotnie powtarzałem, klucz to zejść modelowi z drogi. Model jest wystarczająco inteligentny, żeby zrobić mniej więcej wszystko, czego od niego chcesz. Ty musisz tylko w miarę dobrze wyartykułować swoje pragnienie, a potem dać mu jakiś sposób na zweryfikowanie własnej pracy. Jeśli to masz i dorzucisz do tego dostęp do zestawu narzędzi, jakość wyników cię zaskoczy. Ja sam nie miałem pojęcia, że w ogóle da się to zrobić.
Co model stworzył
Model wpadł na trójwymiarowy „rój cząstek”. Wziął gotowe, wysokiej jakości artefakty artystyczne, które zostały znalezione przez ludzi, i zmapował je tak, że powstał powoli obracający się „wszechświat”. Inna strona wygenerowała cały sprite — i nie skończyła na tym: zrobiła też prawdziwą grę wideo. Dosłownie mam teraz na stronie małą minigrę. Nie miałem z tym absolutnie nic wspólnego.
(Informacja dodatkowa: „sprite” to grafika 2D — pojedynczy obiekt lub postać — używana w grach i animacjach).
Jeszcze inny styl polegał na tworzeniu zestawu szpilek, wbijaniu ich w ziemię i przeprowadzaniu ich przez litery. Oczywiście możemy zrobić dowolnie wiele takich liter. Kolejna strona wykorzystuje zmienną grubość kroju (variable font weights) i powoli zmienia rozmiary. Kiedy najedziesz na tytuł — czy widzieliście kiedyś coś takiego? To niezwykle imponujące. To działają prawdziwe shadery, bezpośrednio na moim komputerze.
(Informacja dodatkowa: shadery to programy odpowiedzialne za renderowanie grafiki i efektów wizualnych na karcie graficznej — stąd wymóg wydajności).
Czy będą to najwydajniejsze strony świata? Prawdopodobnie nie. Ale oczywiście to jest kierunek, w którym wszystko zmierza. Przechodzimy od statycznych stron do przewijania w stronę „doświadczeń”, bo mamy teraz możliwość, by AI dosłownie zaprojektowało te fajne wszechświaty i tak dalej. To dla mnie po prostu obłędne, że możemy to robić — a wy dosłownie możecie skopiować i wkleić wszystko, co udostępniłem pod /guide, i podać to modelowi.
Sercem systemu jest weryfikacja i narzędzia
Kiedy już to zrobicie, wystarczy pozwolić modelowi pracować samodzielnie — w większości przypadków sam będzie wiedział, jak to zrobić — a potem po prostu przetestować wyniki. W moim przypadku pracuję w Ghostty. To po prostu widok terminalowy i przez to nie mam wbudowanego sposobu, żeby wizualizować efekt tak, jak zrobi to większość osób w aplikacji desktopowej.
(Informacja dodatkowa: Ghostty to emulator terminala; nie pokazuje graficznego podglądu stron, dlatego autor musiał dodać osobne narzędzie do „patrzenia” na wyniki).
To, co zrobiłem — i co wy też możecie zrobić, jeśli pracujecie podobnie — to danie modelowi dostępu do czegoś w rodzaju Chrome DevTools MCP. To narzędzie pozwala mu otwierać strony internetowe i wykonywać na nich różne czynności. Ale nie musicie tego robić, jeśli korzystacie z aplikacji desktopowej Claude — którą znajdziecie po prostu wpisując w Google „Claude desktop app” i pobierając ją. Wszystko jest teraz aż tak proste. Aplikacja przejdzie przez to, uruchomi demo na żywo tuż obok was i automatycznie wykona całą weryfikację. Więc dopóki macie wbudowaną jakąś formę weryfikacji, możecie pozwolić modelowi szaleć — i jest dobrze.
Następnie po prostu dajecie mu narzędzia. W moim przypadku powiedziałem: „Masz Pinterest, więc wejdź na Pinterest, jeśli chcesz”. Dałem mu dostęp do Pinteresta, bo są tam po prostu fajne obrazy — rzeczy w stylu „Rodziny Soprano”, Spider-Mana, naprawdę fajne estetyki. Chodziło o to, że jeśli z jakiegokolwiek powodu potrzebowałby inspiracji, mógłby ją mieć.
Po Pintereście, który był moim głównym źródłem, dałem mu dostęp do Higgsfield MCP. Dla tych, którzy nie wiedzą: Higgsfield MCP pozwala modelowi sięgać po ogromną liczbę wysokiej jakości, mocno stylizowanych pipeline’ów obrazu i wideo. Po co to zrobiłem? Żeby mógł generować fajne filmy i automatycznie je wstawiać, żeby mógł wygenerować własny krój pisma i go użyć — zrobić z niego zrzut ekranu i zamienić w jakiś rój cząstek — albo żeby mógł generować zasoby do gry wideo.
Chodzi mi jednak o to, że gust tych narzędzi jest lepszy niż mój własny. Więc po jaką cholerę miałbym narzucać z góry własne przekonanie o tym, jak to coś powinno wyglądać? Dałem mu też cel — ale cel to nic wyjątkowego. Cel to po prostu sposób, by zachęcić go do dalszej autonomicznej pracy. Zrobiłem to, bo szczerze mówiąc byłem leniwy. Poszedłem do drugiego pokoju i obejrzałem z dziewczyną odcinek „Dark” na Netfliksie. Kiedy wróciłem, wszystkie te strony były gotowe.
Przegląd wybranych stron
Przejdę teraz przez kilka fajniejszych. Mogę dosłownie skopiować to i wkleić w cokolwiek, a ono przeprojektuje mi całość. Pojedynczy plik HTML, Three.js R160, krój Francis Italic, Space Grotesk, wszystkie te przepływy, floaty… To jak profesjonalny projektant przekazujący coś nieco mniej profesjonalnemu projektantowi. Więc jeśli chcielibyście rozkręcić ten pomysł na słabszych modelach — jak najbardziej możecie.
(Informacja dodatkowa: Three.js to biblioteka JavaScript do grafiki 3D w przeglądarce; „R160” to numer jej wersji. Space Grotesk to popularny krój pisma).
Bardzo podoba mi się ta strona. To w zasadzie strona historyczna o różnych erach — kenozoiku, mezozoiku, paleozoiku. Nie wiem, jak to poprawnie wymówić, ale jest bardzo czysta.
Ta strona nazywa się Murmur. Cały pomysł polega na tym, że przysuwasz się bliżej, żeby czytać. Gdy mówię „przysuwasz się bliżej”, chodzi o efekt w tle, w którym wszystko jest rozmyte i nie da się tego dobrze odczytać, a potem skupia się w ostry obraz i stabilizuje formę. Jest tam mała aplikacja o nazwie „static”, która w tle odtwarza szum brzmiący jak ocean. To trochę jak idea latarni morskiej, plus jest tu poezja: „I keep the sound you were, a tape worn thin as breath, rewound past meaning”.
Mamy tu też sporo stron z ruchem i interakcją. Moje ulubione to te, które już wam pokazałem, ale jest też strona reaktywna na dźwięk, gdzie — jestem prawie pewien — model zsyntetyzował zestaw utworów za pomocą prostego systemu. 5 minut 42 sekundy, 6 minut 11 sekund. Jeśli odtworzysz jeden z nich, zmieni się podgląd wizualizacji audio. Bez wątpienia widzę ludzi używających tego do różnych celów.
Na tej stronie przelatujesz przez proceduralnie generowany krajobraz miasta 3D — całkiem fajne. Bardzo lubię tę stronę: to coś w rodzaju strony z okładkami albumów, bardzo nostalgiczna. Przepraszam — to po prostu mój Chrome DevTools MCP zrobił to wyskakujące okienko. Można przejść przez zasadniczo nieskończoną liczbę takich stron, a ja po prostu będę dalej dorzucał rzeczy do tej biblioteki.
To, co mi się podoba, to że wykorzystuje bardzo proste animacje ruchu, żeby stworzyć fajne efekty. To na przykład strona „Millennium 2000” — bardzo w stylu Y2K.
(Informacja dodatkowa: „Y2K” to estetyka nawiązująca do przełomu tysiącleci — jasne kolory, chrom, futurystyczny, retro-technologiczny wygląd z okolic roku 2000).
Pomyślcie, jak łatwo byłoby dziś zrobić stronę produktową 3D, która automatycznie obraca się wokół jakiegoś produktu. Ten produkt został wygenerowany przez AI — do tego służą tekstury. Użyto tu modelu „tekst na 3D”, żeby wygenerować to krzesło. Z tego co wiem, to mogłoby być zupełnie nowatorskie krzesło — takie, którego nigdy wcześniej nie zaprojektowano. A gdybyś postawił sklep Shopify z 10 000 takich powoli obracających się modeli, osoba wybiera to, co chce, a ty po prostu wysyłasz tę specyfikację — oczywiście wyczyszczoną — do producenta? Możliwości są po prostu obłędne i w zasadzie nieograniczone.
Podsumowanie
I to w zasadzie tyle. Nie miałem tak naprawdę żadnego planu ani konkretnego projektu, gdy tworzyłem tę stronę. Po prostu pomyślałem, że ludzie powinni zobaczyć, jak proste i łatwe jest to do zrobienia. Jeśli chcecie wszystkich tych zasobów, zajrzyjcie poniżej. Mam darmową społeczność, w której gromadzę teraz wszystkie moje materiały — te prompty, wszystkie te strony i tak dalej. Będę tworzył ich znacznie więcej i dalej wam je rozdawał, bo w tym momencie po prostu trochę arbitrażuję własny koszt tokenów — jakieś 5–10 dolarów na stronę — po to, żebyście wy mieli nieskończoną liczbę szablonów. To żaden problem. Miłego dnia, mam nadzieję, że wam się podobało, i do zobaczenia w następnym.
10 najważniejszych takeaways — z kontekstem zastosowania
1.Projektuj prompt, nie pojedynczą stronę
Na czym polega: Zamiast ręcznie tworzyć jedną stronę, budujesz jeden dopracowany prompt, który zleca modelowi wyprodukowanie wielu (tu: 25) różnych stron autonomicznie. Zwrot z pracy nad promptem skaluje się na dowolną liczbę wyników.
Jak stosować: Włóż wysiłek w precyzyjne opisanie pragnienia i ograniczeń, a nie w mikrozarządzanie każdą stroną. Poproś o różnorodność („każda fundamentalnie inna”) i o twardy, policzalny cel.
Na co uważać: Skalowanie mnoży też błędy — jeśli prompt jest niejasny, dostaniesz 25 razy powtórzony ten sam problem. Zawsze testuj kilka wyników, zanim uruchomisz produkcję masową.
2.Zejdź modelowi z drogi zamiast narzucać framework
Na czym polega: Autor twierdzi, że wieloetapowe „frameworki” bywają zbędne — najlepsze efekty daje ograniczenie własnej ingerencji i zaufanie inteligencji oraz „gustowi” modelu.
Jak stosować: Sformułuj cel i wolność twórczą, a decyzje estetyczne zostaw modelowi, zwłaszcza gdy jego gust przewyższa twój w danej dziedzinie.
Na co uważać: To działa tylko przy realnie mocnym modelu i przy niskiej stawce za błąd. W projektach z twardymi wymaganiami (branding, dostępność, zgodność prawna) brak struktury bywa ryzykowny — wtedy jednak potrzebne są jasne ograniczenia.
3.Zbuduj mechanizm samodzielnej weryfikacji
Na czym polega: Autonomiczna praca ma sens tylko wtedy, gdy model potrafi sam sprawdzić swój wynik. To weryfikacja, nie „framework”, jest prawdziwym sercem systemu.
Jak stosować: Daj modelowi narzędzie do oglądania efektu — Chrome DevTools MCP w terminalu albo podgląd na żywo w aplikacji desktopowej Claude. Zleć wprost „przejścia iteracyjne”: przejrzyj, znajdź problemy, popraw.
Na co uważać: Bez weryfikacji autonomia zamienia się w generowanie ładnie wyglądających, ale zepsutych wyników. I tak weryfikuj końcowo ręcznie — model nie wyłapie wszystkiego.
4.Jakość bierze się z dostępu do narzędzi
Na czym polega: Model dostał Pinterest (inspiracja), generator obrazu (GPT Image 2), Higgsfield MCP (wideo i stylizowane pipeline’y) oraz „tekst na 3D”. To dostęp do zasobów, a nie sam prompt, odblokował efekty w rodzaju roju cząstek czy minigry.
Jak stosować: Zanim poprosisz o zaawansowany efekt, upewnij się, że model ma narzędzia zdolne go wytworzyć, oraz działające klucze/dostępy do nich.
Na co uważać: Każde narzędzie to koszt, klucze API i potencjalne kwestie licencyjne (np. inspiracje z Pinteresta). Pilnuj praw do zasobów, zwłaszcza przy komercyjnym użyciu.
5.Cel istnieje po to, by podtrzymać autonomię
Na czym polega: „Cel” (25 stron, /guide, trzy iteracje) nie jest magiczny — to sposób, by skłonić model do nieprzerwanej, samodzielnej pracy bez dopytywania.
Jak stosować: Podawaj policzalne, jednoznaczne cele i wyraźnie każ pracować „całkowicie autonomicznie, nie pytając o nic aż do końca”.
Na co uważać: Autonomia bez punktów kontrolnych oznacza, że jeśli model źle zinterpretuje cel, zmarnuje cały przebieg (i tokeny). Przy droższych zadaniach rozważ wczesny punkt kontroli.
6.Arbitraż modeli: dopracuj prompt na mocnym, uruchamiaj na tańszym
Na czym polega: Dopracowany prompt można wkleić do słabszego modelu i uzyskać przyzwoity efekt taniej — autor nazywa to arbitrażem kosztu.
Jak stosować: Użyj najsilniejszego modelu do wypracowania i przetestowania promptu oraz kluczowych zasobów, a masową, powtarzalną produkcję przenieś na tańszy model.
Na co uważać: Jakość na słabszym modelu spada, szczególnie przy najbardziej zaawansowanych efektach 3D/shaderach. Sprawdź, gdzie leży akceptowalny próg, zamiast zakładać identyczne wyniki.
7.Równoległość subagentów drastycznie skraca czas
Na czym polega: Model rozdzielił pracę na wiele subagentów działających jednocześnie — 25 stron w 20–25 minut, czyli ok. minuty na stronę.
Jak stosować: Przy zadaniach składających się z wielu niezależnych elementów formułuj je tak, by dało się je zrównoleglić, i korzystaj z modeli/harnessów wspierających subagentów.
Na co uważać: Równoległość mnoży zużycie tokenów w tym samym czasie — koszt rośnie szybko. Równoległe agenty trudniej też monitorować; zadbaj, by każdy miał własną weryfikację.
8.Koszt jednostkowy jest niski, ale realny
Na czym polega: Autor podaje ok. 5–10 dolarów za stronę i traktuje to jako „nieistotne”, żeby rozdawać szablony za darmo.
Jak stosować: Policz koszt na jednostkę przed uruchomieniem masowej produkcji (np. 10 000 stron × stawka) i zaplanuj budżet tokenowy oraz koszty narzędzi zewnętrznych.
Na co uważać: „5–10 dolarów za stronę” przy dużej skali to setki–tysiące dolarów. Doliczaj koszty generatorów obrazu/wideo i hostingu, nie tylko samego modelu.
9.Strony przechodzą od statyki do „doświadczeń”
Na czym polega: Efekty typu shadery, rój cząstek 3D, proceduralne miasta czy audio-reaktywne wizualizacje pokazują przesunięcie od statycznego przewijania ku interaktywnym doświadczeniom.
Jak stosować: Wykorzystaj to tam, gdzie zaangażowanie i efekt „wow” są ważniejsze niż szybkość — portfolio, landing page, kampanie kreatywne.
Na co uważać: Autor sam przyznaje, że nie są to najwydajniejsze strony. Ciężkie efekty biją w wydajność, czas ładowania, dostępność i słabszy sprzęt — nie nadają się do każdego zastosowania.
10.Realne zastosowania biznesowe: produkty 3D generowane przez AI
Na czym polega: Przykład ze sklepem Shopify z tysiącami obracających się, wygenerowanych przez AI modeli 3D (np. krzeseł), gdzie wybór klienta zamienia się w specyfikację wysyłaną do producenta.
Jak stosować: Traktuj generowanie 3D + „tekst na model” jako sposób na tanie prototypowanie katalogów produktów lub konfiguratorów przed fizyczną produkcją.
Na co uważać: Model 3D generowany przez AI to nie gotowa specyfikacja produkcyjna — wymaga oczyszczenia, walidacji inżynierskiej i sprawdzenia wykonalności oraz praw. To pomysł koncepcyjny, nie wdrożony przez autora proces.