O czym jest ten film
- Autor przedstawia Fable 5 jako najlepszy obecnie model do projektowania stron internetowych i pokazuje własną „umiejętność” (skill) do Claude Code, którą udostępnia za darmo.
- Kluczowa teza: liczy się nie tylko model („pojazd”), ale też sposób jego prowadzenia — dobry prompting i system pracy.
- Skill prowadzi użytkownika przez zestaw pytań i buduje kompletną, animowaną stronę w zasadzie „jednym strzałem”.
- System oferuje dwa tryby: pełny Fable 5 (maksymalna jakość) oraz tryb oszczędnościowy (delegowanie części zadań do tańszych modeli, m.in. Opus 4.8 i ChatGPT).
- Do generowania mediów (obrazów i wideo) używa się Higgsfield, podłączanego do Claude przez CLI.
- Sercem podejścia jest podział ról między modele: Anthropic odpowiada za kierunek artystyczny i decyzje projektowe, tańsze modele robią „czarną robotę” i walidację.
- Na początku procesu stosowana jest recenzja przeciwstawna (adversarial review) — pomysł Fable jest sprawdzany przez Opus, by poprawić jakość pierwszego podejścia.
- Autor pokazuje przykłady: strona smoothie z owocami, perfumy „Nocturne”, górski projekt „Alpine Glow” z efektem opadającego śniegu.
- Praktyczne triki na obniżenie kosztów: wyłączanie ścieżki audio przy generowaniu wideo, budowanie systemu projektowego na modelu Anthropic i dopiero potem przełączanie na tańsze modele.
- Orientacyjny koszt kompletnej strony to około 10 dolarów, głównie za generowanie wideo; osobne poszczególne klipy zlewają się w jedną płynną animację.
Redakcyjne tłumaczenie
Wprowadzenie — najlepszy model do projektowania
Fable 5 to najlepszy na świecie agent projektowy. Buduje piękne, oszałamiające strony internetowe, które sprzedają się za tysiące dolarów. Właśnie znalazłem nową umiejętność (skill), która pozwala budować takie strony „jednym strzałem”, jednocześnie utrzymując niskie koszty. W tym filmie pokażę dokładnie, jak jej użyć, żebyś mógł tworzyć piękne witryny w kilka minut — nawet jeśli nigdy wcześniej się z tym nie stykałeś.
Jeśli mnie nie znasz — jestem Jack. Zbudowałem akcelerator e-commerce z solidną bazą klientów. Sprzedawałem strony za ponad 10 000 dolarów. Na tym kanale dzielę się rzeczami, które naprawdę działają.
(Informacja dodatkowa: „skill” w Claude Code to spakowany zestaw instrukcji, który rozszerza możliwości modelu o konkretny sposób pracy nad danym typem zadania.)
Co potrafi ten system
Ten system tworzy unikalne, przepiękne strony o bardzo różnych stylach i animacjach. Mogą to być witryny z eleganckimi animacjami, strony, które zmieniają się w miarę przewijania i odsłaniają kolejne szczegóły, interaktywne przewijane witryny, a nawet projekty przedstawiające pewną podróż — na przykład zejście w głąb góry, z opisem wszystkiego, co dzieje się po drodze. Możliwości jest nieskończenie wiele. Każdą stronę, którą teraz pokazuję, zbudowano w jednym podejściu przy użyciu Fable 5 i systemu, który za chwilę zaprezentuję.
To „maszyna do umiejętności Fable 5” i jest po prostu niesamowita. Fable 5 to najlepszy model projektowy, jaki dziś istnieje. Ale jest jedna rzecz, którą trzeba zrozumieć, jeśli chce się cokolwiek budować w Fable 5, także strony: znaczenie mają zarówno pojazd, jak i kierowca. Najlepszy dostępny pojazd to Fable 5, ale osoba, która nim kieruje — rozumiejąca skille i prompting — również ma ogromne znaczenie. Gdybyś dał Opusowi 4.8 najlepszego inżyniera promptów, ten zestaw zwykle pobiłby samo Fable 5.
Dobra wiadomość jest taka, że pokażę ci gotowy system. Wydałem na jego zbudowanie mnóstwo pieniędzy i spędziłem nad jego dopracowaniem wiele godzin, żebyś ty wiedział, jak uzyskać efekt jednym promptem. Cały skill oddaję całkowicie za darmo — link znajdziesz poniżej.
Jak to działa w zarysie
Zasada jest prosta: używamy dosłownie jednej umiejętności i jesteśmy gotowi do działania. Po lewej stronie mamy Fable 5. Dajemy mu prompt. Model ma dostęp do zasobów online, a moim pomysłem było, żeby udostępnić mu wszystkie najlepsze repozytoria projektowe, skille, biblioteki umiejętności i zasobów — dosłownie wszystko, czego mógłby potrzebować — i wyjaśnić, co jest dobre. Dzięki temu możemy budować piękne przewijane animacje, do których wykorzystamy Higgsfield. Następnie przeprowadzamy recenzję przeciwstawną: oceniamy, czy to jest dobre, czy nie, i jak to wygląda. Na końcu otrzymujemy stronę, która jest fantastyczna. Jedną z fajnych rzeczy w tym systemie jest właśnie duża ilość recenzji przeciwstawnej na początku procesu.
(Informacja dodatkowa: recenzja przeciwstawna, „adversarial review”, to sprawdzanie efektu z nastawieniem na wyszukanie słabości — jedna instancja modelu krytycznie ocenia propozycję drugiej.)
Pobranie umiejętności i start w Claude Code
Najpierw pobieramy skill — link do społeczności i do umiejętności do stron Fable 5 jest pod filmem. Powstał po wielu próbach i błędach. Moja filozofia brzmiała: jak uzyskać najlepszy możliwy projekt strony, jednocześnie minimalizując koszty.
Pierwsza rzecz, jaką trzeba zrobić, to otworzyć Claude Code. (Informacja dodatkowa: jeśli te pojęcia brzmią obco, autor odsyła do swojego pełnego kursu Claude Code — obejmującego konfigurację, budowę stron, strategie, funkcje zaawansowane i systemy pamięci.) W Claude wystarczy wgrać pobrany plik i napisać: „Cześć, chciałbym uruchomić tę umiejętność. Przeprowadź mnie przez konfigurację.” Można też po prostu wcisnąć Enter.
Wybór trybu i podłączenie Higgsfield
Po dodaniu skilla program zapyta o kilka rzeczy. Po pierwsze: czy chcesz pełny tryb Fable 5? To wariant „bez ograniczeń” — najlepsze możliwe projektowanie, z użyciem najlepszego modelu na każdym etapie. Alternatywą jest tryb oszczędnościowy, który maksymalizuje efekt przy jednoczesnym obniżeniu kosztów — domyślnie sięga po Opus 4.8 i inne modele w trakcie procesu.
Następnie system pyta, jak chcemy generować media. Użyjemy do tego Higgsfield, bo oferuje mnóstwo sposobów: generowanie obrazów, wideo i wielu innych rzeczy, a sama konfiguracja jest bardzo prosta. Możemy wybrać, gdzie go instalujemy — idziemy do CLI, robimy zrzut ekranu strony, kopiujemy do schowka, wracamy do Claude, wklejamy zrzut i mówimy: „Chciałbym połączyć to z Higgsfield przez CLI.” Ja mam już to połączone, pokazuję tylko, jak to zrobić, bo jest to niezwykle proste.
Gdy podłączymy Higgsfield do Claude, zyskujemy dostęp do najlepszych na świecie modeli generowania obrazów i wideo oraz wszystkich ich funkcji. Możemy po angielsku wyjaśnić Claude, czego chcemy, a on to zbuduje. To samo można zrobić z poziomu terminala (skrót Command+T): skopiować polecenia i wpisać je, na przykład higgsfield auth login. Pojawi się ekran logowania, klikasz „Connect” i jesteś w pełni połączony.
Modele weryfikujące i raport kosztów
Jedną z ciekawych rzeczy jest wykorzystanie ChatGPT 5.6, który jest bardzo wydajny i którego można używać w ramach własnej subskrypcji ChatGPT — bez dodatkowych kluczy API. Dzięki temu nasze projekty stron recenzuje zupełnie inny model. Włączyłem to jako pytanie w procesie, żeby projekty były wyjątkowo odporne.
Każda budowa kończy się „paragonem kosztowym”: jakie modele wykorzystano, ile tokenów, ile kredytów. Można wybrać, gdzie ma się pojawić — ja proszę o umieszczenie go i na stronie, i w czacie.
Pierwszy zestaw pytań o stronę
Potem dostajemy pierwszą serię pytań. System po prostu przechodzi przez nie po kolei, ty odpowiadasz to, co chcesz, a on fizycznie buduje stronę. Zbudowałem tego tak wiele, że zrozumiałem, gdzie takie procesy zawodzą — i wyciąłem te koszty oraz czas za ciebie.
Pojawiają się pytania o samą stronę. Powiedzmy, że to strona premiery produktu. System pyta: gdy ktoś opuszcza stronę, co jest najważniejszą rzeczą, którą powinien poczuć albo zrobić? Wybieram „zapamiętać markę”. Jaki kierunek projektowy? Śmiały i żywy — brzmi świetnie. Czy masz logo, czcionki albo kolory marki? Można je zintegrować, ale ja wybieram „nie” i włączam „tryb czystej wyobraźni”.
Następnie model pyta o szczegóły. Może też pojawić się prompt CLI do autoryzacji urządzenia w Higgsfield — wtedy wracamy do Claude.
Budowa strony smoothie — przykład
Claude pyta o produkt. Mówię: „Chciałbym stronę do wypromowania mojego pięknego biznesu z owocowymi smoothie. Fajnie byłoby, gdyby w miarę przewijania w dół pojawiały się różne owoce, które robią różne rzeczy, a na dole eksplodują w jedno wielkie, piękne smoothie. Może po prawej stronie coś jakby smoothie napełniało się, gdy przewijam. Pełny tryb wyobraźni. Po prostu spraw, żeby wyglądało pięknie.”
W zasadzie po prostu opisujesz to, czego chcesz. Nie musisz nawet mówić, że ma być piękne — model zrobi to sam. Wrócił z trzema różnymi opcjami, które jego zdaniem dobrze by zadziałały. Mówię: „Zbuduj wszystkie trzy naraz, osobno” — robię to na potrzeby pokazu. W praktyce po prostu wybierz tę, która najbardziej ci odpowiada, albo kliknij „re-pitch”, by uzyskać lepszy pomysł na projekt, i zatwierdź.
Po ukończeniu dostajemy strony. Pierwsza to „Pulp — Real Fruit”. Truskawka opada w dół, hasło „Picked at Dawn”, potem blendowanie — to jest wręcz nieprawdopodobne. Na dole mamy sam napój: „Drink the Riot”, „Every Bottle Starts with a Fall”, „Berry Uprising”, „Mango Mayhem”, teksty i wszystkie social media na samym dole. To naprawdę opowiada historię: od sadu, przez opadającą truskawkę i wszystkie owoce, które się blendują, aż po gotowy produkt.
Zbudowałem trzy wersje tej samej strony. Druga to ten sam pomysł w nieco innym stylu, bardziej „tech” — trochę jak szkic techniczny (wireframe), co wygląda przepięknie. Trzecia jest jeszcze bardziej technologiczna, jakby laboratoryjna, z rozłożeniem elementów („pull apart”), ruchem w lewym dolnym rogu i hasłem „Specimen approved”.
Inne przykłady stylów
Żeby pokazać inne style, wygenerowałem też „Nocturne” — stronę dla perfum. Przewijając w dół, widzimy jak produkt jest tworzony, wpada i się wyłania — to perfumy, które można kupić. Był też bardzo ciekawy „Alpine Glow”. Zwróć uwagę, że mimo iż to wideo, mamy opadające płatki śniegu, które dają wrażenie trójwymiarowości. Zbudowaliśmy to wszystko przy użyciu Higgsfield i Fable 5: nurkujemy przez chmury, przelatujemy nad doliną wzdłuż rzeki i docieramy do posiadłości. Widać, że woda jest już ciepła — można się zanurzyć. Wszystko płynnie się ze sobą zlewa.
Mam też wersje bez dużego wideo. Na przykład bardzo elegancka, premium strona z kursorem, który ma lekkie opóźnienie i delikatny „opór” przy ruchu — po prostu fantastyczna.
Wyznanie kosztowe i wniosek o modelach
Szybkie wyznanie: ten system kosztował mnie znacznie więcej, niż powinien. Wydałem mnóstwo pieniędzy na kredyty Anthropic. Odkryłem, że jeśli chodzi o projektowanie, Anthropic ma po prostu silniejszą pozycję na rynku — buduje najlepsze modele projektowe. Możesz zbudować cokolwiek modelem Anthropic (Claude), a gdy system projektowy jest już gotowy, możesz „zmienić zawodnika” na dowolny z tańszych modeli. Oszczędź pieniądze i nie powtarzaj moich błędów przy testowaniu tego.
System, na którym się zatrzymałem — podział ról między modele
Moim celem było zminimalizować twoje wydatki, jednocześnie maksymalizując naturalną jakość. Kluczowa obserwacja: pewne linie się nie przecinają. Anthropic buduje kierunek artystyczny, markę, czcionki, layout, listę ujęć do każdego promptu i „silnik przewijania”. Potem wprowadzamy „ekipę”: ChatGPT 5.6 działa niczym ekipa serwisowa w boksie (pit stop), pomagając w zadaniach, które można delegować, a które nie wymagają wydawania cennych kredytów. Waliduje też, czy nie ma błędów i czy wszystko ze sobą współgra. Tym modelom nie oddajemy żadnych decyzji projektowych, ale projekt bywa krzyżowo walidowany przez inny model Anthropic.
Najpierw powstaje pomysł: Fable go proponuje, a system uruchamia go przeciwko Opusowi, żeby zweryfikować i sprawdzić. To sposób na poprawę jakości decyzji, tak by uzyskać lepszy wynik już przy pierwszym podejściu. Taki poziom kreatywnego kierowania trudno osiągnąć jednym promptem — potrzebny jest dobry system.
Potem wprowadzamy GPT 5.6 jako „tanią siłę”. Może nie lubić tej nazwy, ale zajmuje się rusztowaniem promptów (prompt scaffolding), rachunkiem kosztów, logiką i spójnością. Dzięki temu nie płacisz cen Fable 5 tam, gdzie nie musisz.
W siedmiu krokach: sparujemy pomysły (spar), ustalamy ujęcie brandowe, renderujemy w Higgsfield, przechodzimy przez „bramkę” (gate), budujemy, recenzujemy i weryfikujemy — po czym strona jest gotowa. Podzieliliśmy pracę między Anthropic a to, co jest mechaniczne, zdejmując z wysokowydajnych modeli wszystko, co zbędne. Mówiąc inaczej: Opus prowadzi salę, a tanie modele odwalają robotę. Do dyspozycji mamy Opus 4.8, a subagenci zajmują się rozpoznaniem i budowaniem rusztowań.
(Informacja dodatkowa: nazwy i numery modeli — „Fable 5”, „GPT 5.6”, „ChatGPT 5.6 Sol” — pochodzą wprost z narracji autora i odnoszą się do konkretnych modeli używanych w jego systemie.)
Triki obniżające koszty
Jeden z kluczowych trików na obniżenie rachunku przy generowaniu: wyłącz audio. Włączona ścieżka dźwiękowa potrafi mocno podnieść cenę. Nie mając audio tam, gdzie nie jest potrzebne, sporo oszczędzamy. Realnym kosztem jest sam film — około 250 kredytów — ale i to można drastycznie zredukować tymi strategiami.
W świecie, w którym najlepsze modele kosztują więcej, trzeba myśleć o tym jak o ekipie serwisowej: różne role dla różnych modeli, każdy robi coś innego. Cały prompt systemowy zamieszczam pod filmem, żebyś mógł to wszystko zbudować.
Koszt kompletnej strony
Ile realnie kosztuje wygenerowanie takiej strony? Cała ta witryna kosztowała około 10 dolarów. Większość to poszczególne filmy, które zlewają się w jedną, płynną generację. Dlatego właśnie tak ważne jest, by pierwszy prompt był trafny za pierwszym razem — bo to generowanie wideo stanowi główny koszt. Dla strony, którą można monetyzować, która reprezentuje twoją markę albo którą sprzedajesz agencjom, to naprawdę solidna inwestycja.
Budowanie pięknych stron to jedno, ale jeśli nie wiesz, jak przekazać je klientom do edycji, jak tworzyć wiele witryn na skalę, jak je hostować i jak ogarnąć całą tę „nudną” robotę zaplecza, która realnie daje przewagę — obejrzyj kolejny film, gdzie pokazuję najprostszą drogę do tego wszystkiego.
10 najważniejszych takeaways — z kontekstem zastosowania
1.Liczy się i model, i sposób jego prowadzenia
Na czym polega: Fable 5 jest przedstawiany jako najlepszy dostępny model projektowy, ale autor podkreśla, że sam model nie wystarczy — równie ważny jest „kierowca”, czyli prompting i system pracy. Słabszy model w rękach świetnego inżyniera promptów potrafi pobić lepszy model prowadzony byle jak.
Jak stosować: Zamiast liczyć wyłącznie na „najlepszy model”, zainwestuj czas w powtarzalny system: ustrukturyzowane pytania, jasny opis efektu, etap recenzji. To on daje przewagę.
Na co uważać: Nie traktuj wyboru modelu jako gwarancji jakości. Bez dobrego promptu i procesu nawet topowy model zwróci przeciętny wynik.
2.Jedna „umiejętność” prowadzi przez cały proces
Na czym polega: Autor spakował cały workflow w jeden skill do Claude Code, który zadaje pytania i buduje stronę praktycznie w jednym podejściu.
Jak stosować: Jeśli wielokrotnie powtarzasz ten sam typ zadania, opłaca się zamknąć go w umiejętności/szablonie z pytaniami przewodnimi — obniża próg wejścia i standaryzuje efekt.
Na co uważać: Skill autora jest dostrojony do jego przypadków (strony, Higgsfield). Zanim mu zaufasz, przejrzyj, jakie decyzje podejmuje za ciebie i jakie zewnętrzne usługi angażuje.
3.Dwa tryby: pełna jakość vs. oszczędność
Na czym polega: System oferuje pełny tryb Fable 5 (najwyższa jakość na każdym etapie) oraz tryb oszczędnościowy, który sięga po tańsze modele jak Opus 4.8 tam, gdzie się da.
Jak stosować: Do finalnych, komercyjnych projektów rozważ tryb pełny; do eksploracji i wczesnych iteracji — oszczędnościowy, żeby nie przepalać budżetu na wersje, które i tak odrzucisz.
Na co uważać: Tryb oszczędnościowy przenosi część zadań na słabsze modele — trzeba sprawdzić, czy jakość nadal spełnia twoje wymagania dla danego klienta.
4.Podział ról między modele („ekipa serwisowa”)
Na czym polega: Anthropic (Claude/Fable/Opus) podejmuje decyzje projektowe i kierunek artystyczny, a tańsze modele (np. ChatGPT 5.6) robią rusztowanie promptów, walidację, rachunki kosztów i „mechaniczną” robotę.
Jak stosować: Zbuduj system projektowy na najsilniejszym modelu, a gdy jest gotowy, deleguj powtarzalne i pomocnicze zadania na tańsze modele. To realnie obniża koszty.
Na co uważać: Nie oddawaj tańszym modelom decyzji projektowych — mają robić „robotę”, nie kierować estetyką. Ich rolą jest wsparcie i weryfikacja.
5.Recenzja przeciwstawna poprawia pierwsze podejście
Na czym polega: Pomysł proponowany przez Fable jest sprawdzany przez Opus, zanim strona powstanie. Autor twierdzi, że taki krok daje lepszą jakość decyzji przy pierwszym uruchomieniu.
Jak stosować: Wpleć w swój workflow krok, w którym drugi model (lub druga instancja) krytycznie ocenia koncepcję przed jej realizacją. Szczególnie opłacalne, gdy sam finalny efekt jest drogi w wygenerowaniu.
Na co uważać: Recenzja to dodatkowe wywołania modelu — bilansuj koszt tego kroku z oszczędnością na uniknięciu złego, drogiego renderu.
6.Higgsfield do generowania mediów, podłączany przez CLI
Na czym polega: Obrazy i wideo powstają w Higgsfield, który łączy się z Claude przez CLI (higgsfield auth login, „Connect”). Claude opisowo steruje generowaniem.
Jak stosować: Skonfiguruj połączenie raz przez CLI, a potem opisuj po angielsku, czego chcesz. Zrzut ekranu strony konfiguracji można wkleić do Claude, by przeprowadził cię przez podłączenie.
Na co uważać: To zewnętrzna, płatna usługa na kredyty. Autoryzacja urządzenia i koszty generowania leżą po twojej stronie — pilnuj zużycia kredytów.
7.Opisuj efekt, nie proś o „ładność”
Na czym polega: Autor po prostu opisuje pomysł (owoce eksplodujące w smoothie, napełniający się kubek przy przewijaniu) i włącza „tryb wyobraźni”. Nie musi prosić, żeby było „piękne” — model robi to sam.
Jak stosować: Skup prompt na konkretnej narracji i zachowaniu strony (co się dzieje przy przewijaniu, jaka historia), a estetykę zostaw modelowi. Poproś o kilka wariantów i wybierz najbliższy ci kierunek.
Na co uważać: Generowanie wielu wersji naraz zwiększa koszt. Autor robi to „na pokaz” — w praktyce wybierz jedną koncepcję albo użyj funkcji „re-pitch”.
8.Wyłączaj audio przy generowaniu wideo
Na czym polega: Włączona ścieżka dźwiękowa znacząco podnosi koszt generowania wideo. Wyłączenie audio tam, gdzie nie jest potrzebne, daje realne oszczędności.
Jak stosować: Domyślnie generuj wideo bez audio, chyba że dźwięk jest częścią efektu. Dodaj audio dopiero na etapie, gdy naprawdę go potrzebujesz.
Na co uważać: Sam film to główny koszt (rzędu ~250 kredytów za klip), więc każdy zbędny parametr się kumuluje przy wielu ujęciach składających się na stronę.
9.Pierwszy prompt musi być trafny — bo wideo kosztuje najwięcej
Na czym polega: Kompletna strona to koszt rzędu 10 dolarów, a jego lwia część to generowanie poszczególnych filmów zlewających się w jedną animację. Dlatego trafność pierwszego podejścia jest kluczowa kosztowo.
Jak stosować: Dopracuj koncepcję i prompt (m.in. dzięki recenzji przeciwstawnej) zanim uruchomisz kosztowne generowanie wideo. Iteruj na tanim etapie koncepcji, nie na drogim etapie renderu.
Na co uważać: Budowanie wielu pełnych wersji „dla porównania” szybko mnoży koszt wideo. Traktuj każdy render jako wydatek, nie darmową iterację.
10.Buduj na Anthropic, potem przełączaj na tańsze modele
Na czym polega: Autor twierdzi, że Anthropic ma najsilniejszą pozycję w projektowaniu. Zaleca zbudować system projektowy modelem Claude, a dopiero po jego ukończeniu „zmienić zawodnika” na tańsze modele do reszty pracy.
Jak stosować: Ponoś koszt najsilniejszego modelu tylko na etapie tworzenia kierunku i systemu projektowego; egzekucję i powtarzalne zadania przenieś na tańsze modele.
Na co uważać: To relacja z konkretnego doświadczenia autora (i jego wydatków na kredyty), a nazwy modeli oraz „pozycja rynkowa” mogą się szybko zmieniać — zweryfikuj aktualne opcje i ceny przed skalowaniem wydatków.