3D Websites Just Became FREE (One Prompt)

O czym jest ten film

1. Autor pokazuje strony internetowe z efektem 3D i przewijaniem sterującym wideo, w całości wygenerowane na lokalnym sprzęcie — bez API i bez modeli zamkniętych.
2. Cały stack sprowadza się do trzech elementów: lokalnego harnessu, lokalnego modelu wideo i wystarczająco silnego lokalnego modelu tekstowego.
3. Konkretnie: pi.dev jako harness, MiniMax H3 jako model wideo, Comfy UI do obsługi workflow wideo i Qwen 3.5 (122 mld parametrów) jako model językowy, uruchomiony przez LM Studio.
4. Autor tłumaczy pojęcie harnessu: model to „mózg w słoiku”, harness dokłada mu kończyny — pętle, sprawdzanie własnej pracy, zapis i edycję plików, analizę obrazów.
5. Kluczowe rozszerzenia harnessu to router umiejętności oraz trzy skille: immersive web, editorial web i effects menu — zbudowane nie ręcznie, lecz przez model zamknięty pracujący nad konfiguracją.
6. Autor stawia realistyczne oczekiwania czasowe: wersja próbna w niskiej rozdzielczości to ~4,5 godziny, wersja finałowa ~8–9 godzin na laptopie M5 Max, a na Mac Miniu nawet dwa dni.
7. Rozwiązaniem kompromisowym jest generowanie surowego wideo na granicy możliwości sprzętu i późniejsze podbicie jakości darmowym, otwartoźródłowym upscalerem.
8. Dla porównania autor pokazuje ten sam model w wersji chmurowej w jakości 2K — koszt ok. 2 dolarów, jakość nieporównywalnie wyższa.
9. Demonstracja na żywo: prompt dla fikcyjnego banku prywatnego Meridian, rozbicie 9-godzinnego klipu na 362 klatki i zbudowanie strony w około 25–30 minut pracy modelu.
10. Model sam wykrył, że pierwsza wersja strony jest pusta, otworzył przeglądarkę, sprawdził własną pracę i poprawiał ją w pętli bez interwencji autora.

Redakcyjne tłumaczenie

Co właściwie widzicie

Ta cała strona — od pięknego tła, przez kojący dźwięk gór, aż po immersyjne przewijanie — została w stu procentach wygenerowana przez modele działające lokalnie na moim komputerze. Podczas jej powstawania nie ucierpiało żadne API ani MCP. Poza tym stylem 3D udało mi się zrobić także stronę, która wygląda o tak, oraz jeszcze jedną, która wygląda w ten sposób. Każda z nich ma własny styl, strukturę i składnię, a wszystkie obrazy oraz krótkie wideo, które widzicie, również są w stu procentach darmowe i wygenerowane u mnie na sprzęcie.

Jeszcze kilka miesięcy temu — o ile nie dysponowaliście nieograniczonym budżetem na sprzęt — absolutnie musieliście sięgać po modele zamknięte: do wideo, do obrazów, a nawet do samego generowania strony. W tym materiale nie tylko rozłożę na części trzy elementy potrzebne do odtworzenia mojego zestawu, ale też zbuduję jedną taką stronę na żywo, używając wyłącznie lokalnego modelu i lokalnego harnessu.

Trzy elementy układanki

Do uruchomienia tego wszystkiego potrzebujecie: lokalnego harnessu, lokalnego modelu wideo oraz jakiegoś modelu tekstowego, któremu ufacie na tyle, by prowadzić z nim dialog i faktycznie zbudować stronę.

W moim przypadku harnessem jest pi.dev, a modelem wideo — MiniMax H3. Nawet w obrębie tego jednego modelu istnieją różne warianty, więc zależnie od specyfikacji laptopa — o ile nie jest bardzo stary — powinniście znaleźć wersję, która u was zadziała.

Poza pobraniem modelu potrzebujecie jeszcze czegoś, co nazywa się Comfy UI. Wygląda to mniej więcej tak i sprawia bardzo techniczne wrażenie. Kiedy przybliżymy, widać, że tworzy się tam kompletny workflow od początku do końca, w którym dobierane są wszystkie parametry potrzebne do konkretnego wideo. Na szczęście nie musicie tego ustawiać samodzielnie — to, co widzicie, mój lokalny model przygotował całkowicie sam.

(Informacja dodatkowa: Comfy UI to popularny, otwartoźródłowy interfejs do generatywnych modeli obrazu i wideo, w którym proces tworzenia buduje się z połączonych ze sobą bloków — stąd wrażenie schematu inżynierskiego.)

Wreszcie korzystam z Qwen 3.5, czyli modelu o 122 miliardach parametrów. Wasz laptop może nie udźwignąć takiej mocy albo może udźwignąć jeszcze więcej, ale powiedziałbym, że przedział od 27 do 40 miliardów jest w zupełności wystarczający. Widziałem, jak to działa nawet przy piętnastu miliardach. Natomiast przy czterech czy dziewięciu miliardach — niezależnie od tego, jak bardzo podkręcicie harness i umiejętności — będzie to spora walka.

Czym jest harness

Jeśli samo pojęcie harnessu jest wam obce, a co dopiero harness lokalny, to pomyślcie o tym tak: wszystkie modele, których zwykle używacie — Fable 5 czy GPT Soul 5.6 — to mózg w słoiku. Harness sprawia, że narzędzia takie jak Claude Code, Codex, a teraz również coś działającego lokalnie na waszym komputerze, dają temu mózgowi dostęp do kończyn i narzędzi. Te kończyny pozwalają mu iterować w pętli, sprawdzać własną pracę, zapisywać i edytować pliki, a także odczytywać i analizować obrazy.

Teoretycznie możecie używać lokalnych modeli razem z harnessem Claude Code czy Codeksa — cokolwiek wam pasuje. Ja lubię pi.dev, bo jest jak czysta kartka: ciągle go doszkalacie, dokładacie nowe narzędzia i umiejętności, szukając własnej drogi do maksymalnej niezależności od konkretnego modelu.

Prosto z pudełka potrafi uruchamiać subagentów, prowadzić listę zadań, oferuje jakąś formę monitoringu i kilka innych rzeczy, absolutnie fundamentalnych, by całość w ogóle ruszyła. To, co zrobiłem i co wy również możecie zrobić, to wziąć ten podstawowy harness — mający raptem sześć elementów — i zacząć nakładać na niego kolejne warstwy: bardzo szczegółowe zarządzanie zadaniami czy tak zwaną pętlę agentową. Dzięki niej, gdy model wygeneruje na przykład tekst na stronę, nie tylko was o tym poinformuje, ale faktycznie uruchomi przeglądarkę, obejrzy własną pracę i wejdzie w tę samą pętlę sprzężenia zwrotnego, którą znacie i lubicie z modeli Codeksa czy Claude Code.

Skille, które zmieniły zasady gry

W moim przypadku przełomowym dodatkiem był router umiejętności — i znów nie zrobiłem tego sam. Poprosiłem coś w rodzaju Codeksa, żeby przyjrzało się mojemu harnessowi pi i tak długo go przerabiało, aż będzie wystarczająco dobre w tym konkretnym procesie oraz zbuduje umiejętności potrzebne do stworzenia strony 3D albo — jeśli wolimy — płaskiej, ale z porządnym tekstem i typografią.

Trzy kluczowe skille, na których się tu opieramy, to: immersive web, który pozwala budować ten trójwymiarowy styl, editorial web oraz effects menu. Zamiast więc ładować stronę w bardzo nudny i schematyczny sposób, co robi wiele modeli otwartoźródłowych, można to zachowanie przechwycić — dając modelowi dość wskazówek i wniosków z wcześniejszych doświadczeń, zebranych przeze mnie z innych repozytoriów GitHuba, żeby nauczył się budować naprawdę zniuansowane strony.

Jak mówiłem, strony to tylko przykład. Możecie to przełożyć na dowolny zasób wizualny: samo wideo, plik PowerPointa, cokolwiek, co ma naturę wizualną.

Kiedy startu brakuje

Jeśli nie macie jeszcze żadnego z tych elementów na komputerze, wystarczy dosłownie podać wszystkie te linki — albo te, które mają sens dla waszego sprzętu — czemuś w rodzaju Codeksa czy Claude Code i polecić mu przeprowadzenie całej instalacji i rozwiązywanie problemów. Oszczędzicie sobie bólu głowy i po prostu skorzystacie z lokalnego zestawu. A jeśli i to brzmi zniechęcająco, wrzuciłem na YouTube darmowy, czterdziestopięciominutowy kurs, który prowadzi od zera aż do gotowego lokalnego środowiska — po nim to wszystko będzie dla was dziecinnie proste.

Realistyczne oczekiwania wobec sprzętu

Zanim wskoczymy do terminala i zbudujemy jedną z tych stron, chcę ustawić realistyczne oczekiwania zależne od waszego sprzętu.

Ta strona była moją wersją zerową, gdy dopiero testowałem model. Przewijając, zauważycie, jaka jest pikselowata i ziarnista — bo ma znacznie niższą rozdzielczość niż finalna wersja, którą pokazałem. Samo to zajęło około czterech i pół godziny na moim komputerze, czyli układzie M5 Max Pro ze 128 GB RAM-u. Jeśli to wam nic nie mówi: to niezła bestia i większość ludzi takiej nie ma. W waszym przypadku trzeba po prostu realnie ocenić, jak daleko da się popchnąć istniejący system, żeby wygenerować kluczowe wideo.

Ale jest dodatkowy smaczek: możecie użyć darmowego, otwartoźródłowego oprogramowania do podbicia rozdzielczości utworzonych filmów. Da się przejść od czegoś takiego do czegoś takiego za pomocą darmowego upscalera. Bierzecie więc surowe wideo, wyciskacie ze sprzętu, ile się da, a potem prosicie harness i model, żeby doprowadziły materiał tak daleko, jak to możliwe. Czy nadal jest pikselowate i ziarniste? Tak. Po prostu jest znacznie lepiej.

W moim przypadku można poświęcić więcej czasu i uzyskać dużo wyższe rozdzielczości — pod warunkiem, że godzicie się na czekanie. Gdybym chciał przeprowadzić dokładnie ten sam eksperyment na moim Mac Minim, dojście do wyższej rozdzielczości zajęłoby nawet dwa dni. To był właśnie przykład takiej wyższej rozdzielczości. Na laptopie M5 zajęło to około ośmiu godzin, na Mac Minim — jakieś dwa dni. Kiedy jednak macie wideo w lepszej jakości niż to pierwsze i dodatkowo je podbijecie, otrzymujecie dokładnie tę stronę, którą pokazałem na początku.

Punkt odniesienia: wersja płatna

Dla porządku pokażę, jak wygląda płatna wersja tego modelu wideo. Tę można wygenerować wyłącznie w chmurze, bo jest tak wymagająca. Działa w jakości 2K. Kiedy przybliżę, zauważycie, że wszystko jest nieskończenie ostrzejsze. To jest punkt odniesienia — absolutna czołówka. Kosztowało mnie to około dwóch dolarów. Nasza wersja wypada przy tym całkiem nieźle, zwłaszcza gdy zobaczycie, że podbiliśmy ją lokalną technologią.

Realistycznie, żeby wyznaczyć sobie punkt wyjścia, przetestujcie te modele na bardzo krótkim klipie w najniższej rozdzielczości. Kiedy zrozumiecie ich możliwości, możecie puścić generowanie na dobę czy dwie i dostać swój klip przewodni. I to jedyny klip, jakiego potrzebujemy, co za chwilę zobaczycie — cała reszta to czysta mechanika: wzięcie tego wideo i rozbicie go na pojedyncze klatki, z których buduje się immersyjne doświadczenie.

Budowa strony na żywo

Wchodzimy do terminala, gdzie mam sesję pi.dev z omawianym wcześniej modelem językowym. Uruchomiłem go przez LM Studio — po instalacji LM Studio, gdy model działa i jest rozgrzany, można go używać w pi.dev.

(Informacja dodatkowa: LM Studio to darmowa aplikacja desktopowa do pobierania i uruchamiania modeli językowych lokalnie; udostępnia je innym programom przez lokalny serwer zgodny ze standardowym API.)

Do nowej strony wykorzystamy świeżo wygenerowany klip. Ma przedstawiać złowieszczy skarbiec, który otwiera się jak sejf bankowy — coś, co mogłoby pasować do hipotetycznego startupu fintechowego. Weźmiemy więc ten koncept, którego przygotowanie zajęło na moim laptopie około dziewięciu godzin, i użyjemy go jako wideo przewodniego.

Prompt, którego użyję, jest bardzo szczegółowy, bo przy modelach lokalnych zawsze trzeba przetłumaczyć wszystko z nadmiarem. Przy Codeksie czy Claude można sobie pozwolić na lenistwo — są dość inteligentne, żeby samodzielnie dobrać poziom wysiłku i rozbić zadanie na podzadania. Nie przeczytam całości, ale podam pierwsze linijki i kilka elementów; zadbam też o to, żeby dołączyć to do wielkiego pakietu startowego ze wszystkim, czego potrzebujecie.

Piszę tam: „Przeczytaj tę konkretną umiejętność i zbuduj mi za jednym zamachem stronę sterowaną przewijaniem dla wymyślonego banku prywatnego o nazwie Meridian, z hasłem »wealth fortified«”. Potem podaję dokładnie, gdzie leży wideo, jak wygląda, i informuję, że daje to około 362 klatki. Rzecz jasna, wcześniej kazałem AI przeanalizować film, żeby ustalić liczbę klatek i rozłożyć na czynniki pierwsze cały koncept przekładania każdej klatki na kolejne etapy przewijania. Dzięki temu da się przejść od samego początku do samego końca.

Model faktycznie obejrzy materiał, rozbijając go na części. Niżej w prompcie mówię: najpierw obejrzyj nagranie, wyodrębnij sześć kluczowych klatek i je odczytaj. Potem po prostu przypominam, że ten model ma zdolności wizualne. Podaję jeszcze ogólny klimat, do którego zmierzamy, akcenty, jakie mają się pojawić na stronie, głos, ton, strukturę oraz wszelkie inne potrzebne umiejętności — w tym przypadku odwołuję się też do umiejętności projektowej, czy raczej „smakowej”, którą sam stworzyłem i zmiksowałem po swojemu.

Teraz wystarczy to wkleić i uruchomić polecenie. Zaraz po starcie nagranie może zacząć zwalniać, więc zatrzymam je do lepszego momentu. Zobaczycie, że model rusza dokładnie tak, jak zrobiłby to Claude czy Codex: układa listę zadań i odhacza je po kolei. Widać krok pierwszy — przechodzi przez wszystkie potrzebne etapy, następnie wywołuje umiejętność immersive web, przerabia ją i zaczyna składać potrzebne elementy.

Przeskakuję kilka minut do przodu — teraz rozbija wideo na pojedyncze klatki, żeby ustalić, jak dokładnie zaprojektować doświadczenie przewijania: od samego początku aż do sceny ze skarbcem. Kolejny przeskok, jakieś piętnaście minut później: model zdecydował już o strukturze, stylu, całej składni i ogólnym motywie. Jest w trakcie pisania całej strony — wynik pokażę, mam nadzieję, za pięć, dziesięć minut.

I proszę: dziesięć minut później mamy finalną wersję strony. Przewijamy i widzimy strukturę bardzo podobną do pierwowzoru, tylko w zupełności innym zastosowaniu. Kończy się na skarbcu. Mamy wezwanie do działania, niżej dodatkowe komponenty strony — i naprawdę daje to immersyjne wrażenie przy dokładnie tej samej strukturze.

Najlepsza część: model sam się poprawił

Najlepsze jest to, że początkowo model zrobił wszystko źle. Widzicie tutaj: pierwszy ekran był całkowicie pusty. Bez żadnej mojej interwencji sięgnął po obsługę przeglądarki — której to umiejętności nauczył go wcześniej Fable — i zapętlał się tak długo, aż w końcu odnalazł właściwą stronę główną. Do tej chwili nadal testuje każdy fragment kadru, przewijając stronę, by upewnić się, że trafia w dokładnie te momenty, o które nam chodziło.

Owszem, kosztowało to i czas, i tokeny — ale te tokeny były darmowe, nie licząc prądu zużytego na ich wygenerowanie. A czas był w zasadzie bezobsługowy: bardziej się przyglądałem, niż aktywnie uczestniczyłem, w przeciwieństwie do dawnej pracy z modelami lokalnymi, gdzie musiałem dyktować dosłownie każdy krok i kazać ponawiać próby.

Co dalej

W miarę jak lokalne modele stają się mocniejsze, mniejsze i o wiele bardziej dostępne dla różnego rodzaju sprzętu, będziecie w stanie wykonywać coraz więcej zadań i tworzyć coraz więcej materiałów wyłącznie na własnym komputerze. Mam nadzieję, że to daje wam pewną jasność i przedsmak tego, co da się osiągnąć z modelami lokalnymi — zwłaszcza jeśli próbujecie tworzyć takie trójwymiarowe czy po prostu estetyczne strony na skalę.

Przez najbliższe trzy, sześć, dziewięć miesięcy modele wideo i obrazu będą się dalej poprawiać. Coraz więcej codziennej pracy będziecie mogli przenieść na te lokalne modele bazowe.

Zgodnie z obietnicą udostępnię duży pakiet ze wszystkimi umiejętnościami pokazanymi w tym filmie, wraz z dodatkowymi wskazówkami dotyczącymi projektowania i optymalizacji własnego harnessu. Dorzucę nawet surowy kod HTML pokazanych stron, żebyście mogli podać go swoim modelom językowym i kazać im go odtworzyć.

10 najważniejszych takeaways — z kontekstem zastosowania

1.Lokalny stack to trzy elementy, nie trzydzieści

Na czym polega: Cała konfiguracja sprowadza się do harnessu (pi.dev), lokalnego modelu wideo (MiniMax H3 przez Comfy UI) i modelu językowego uruchomionego w LM Studio. Reszta to warstwy dokładane na wierzch.

Jak stosować: Zacznij od pojedynczego elementu, który najbardziej cię kosztuje w chmurze — zwykle jest to generowanie wideo lub obrazu — i tylko ten przenieś lokalnie. Model tekstowy możesz na początku zostawić w chmurze.

Na co uważać: Autor pokazuje działający zestaw, ale nie mierzy się z sytuacją, w której któryś element nie chce współpracować z twoim sprzętem. Nie planuj migracji całości naraz.

2.Wielkość modelu językowego ma twardy próg

Na czym polega: Autor podaje przedział 27–40 mld parametrów jako w pełni wystarczający, 15 mld jako działające minimum, a 4–9 mld jako granicę, poniżej której żadna optymalizacja harnessu nie pomaga.

Jak stosować: Zanim zbudujesz cokolwiek, sprawdź, jaki model realnie mieści ci się w pamięci. To ta liczba decyduje, czy projekt ma sens — a nie sprawność promptu.

Na co uważać: To obserwacje jednej osoby na jednym typie zadania. Model o 15 mld parametrów może wystarczyć do pisania kodu, a polec przy analizie klatek wideo, która wymaga zdolności wizualnych.

3.Cały budżet czasu idzie na jedno wideo

Na czym polega: Klip przewodni to 4,5–9 godzin na mocnym laptopie i nawet dwa dni na Mac Minim. Sama strona powstaje potem w mniej więcej pół godziny, bo to już wyłącznie mechanika rozbijania wideo na klatki.

Jak stosować: Traktuj generowanie wideo jako osobny, nocny etap procesu. Prototypuj tekst i układ strony na dowolnym zastępczym klipie, a ostateczne wideo podmień na końcu.

Na co uważać: Powtarzanie generowania wideo, bo „koncept jednak nie ten”, kosztuje kolejną dobę. Zatwierdź kierunek na krótkim, niskorozdzielczym teście, zanim uruchomisz pełny render.

4.Upscaler jako most między sprzętem a jakością

Na czym polega: Zamiast walczyć o wysoką rozdzielczość na starcie, generuje się materiał na granicy możliwości sprzętu, a potem podbija go darmowym, otwartoźródłowym narzędziem.

Jak stosować: Wpisz upscaling na stałe w swój proces jako ostatni krok. To najtańszy sposób, by słabszy sprzęt dał materiał nadający się do publikacji.

Na co uważać: Autor uczciwie przyznaje, że efekt „nadal jest pikselowaty i ziarnisty, po prostu znacznie lepiej”. Upscaler nie tworzy szczegółów, których nie było — nie licz na jakość chmurowego 2K.

5.Znaj koszt alternatywny: dwa dolary kontra dwa dni

Na czym polega: Wersja chmurowa tego samego modelu w jakości 2K kosztowała autora około dwóch dolarów i była nieporównywalnie ostrzejsza.

Jak stosować: Policz to jawnie przed decyzją. Lokalnie opłaca się przy dużym wolumenie, danych, których nie chcesz wysyłać na zewnątrz, albo gdy chcesz eksperymentować bez licznika.

Na co uważać: Przy jednorazowym projekcie o wysokiej stawce wizualnej dwa dolary za wersję chmurową to lepszy wybór niż dwie doby renderowania. „Darmowe” dotyczy tokenów, nie czasu i nie prądu.

6.Modele lokalne wymagają promptu z nadmiarem

Na czym polega: Autor podkreśla, że przy modelach lokalnych trzeba przetłumaczyć wszystko aż do przesady, podczas gdy Claude czy Codex same rozbiją zadanie na podzadania.

Jak stosować: W prompcie podaj ścieżkę do pliku, opis jego zawartości, liczbę klatek, kolejność kroków, ton, strukturę i przypomnienie o dostępnych zdolnościach modelu. Ten prompt jest artefaktem — zapisz go i wersjonuj.

Na co uważać: Prompt napisany pod model lokalny będzie zbyt rozwlekły dla modelu zamkniętego i odwrotnie. Nie przenoś ich mechanicznie między środowiskami.

7.Przygotuj metadane wejściowe zawczasu

Na czym polega: Autor nie kazał modelowi zgadywać liczby klatek — najpierw poprosił AI o analizę wideo i podał wynik (362 klatki) wprost w prompcie.

Jak stosować: Wszystko, co da się wyliczyć deterministycznie przed uruchomieniem modelu, wylicz i podaj jako fakt. Oszczędzasz w ten sposób najdroższą i najbardziej zawodną część pracy modelu lokalnego.

Na co uważać: Błędne metadane są gorsze od braku metadanych — model przyjmie je bezkrytycznie i zbuduje na nich cały układ przewijania.

8.Pętla ze sprawdzaniem w przeglądarce to warunek bezobsługowości

Na czym polega: Pierwsza wersja strony była całkowicie pusta. Model sam otworzył przeglądarkę, zobaczył problem i zapętlał poprawki, aż strona zadziałała — bez żadnej interwencji autora.

Jak stosować: Zanim zaczniesz zlecać modelowi lokalnemu długie zadania, wyposaż harness w możliwość oglądania własnego wyniku. Bez tego oszczędność tokenów zamienia się w koszt twojej uwagi.

Na co uważać: Pętla samosprawdzająca potrafi się kręcić długo. Warto ją ograniczyć liczbą prób albo czasem, bo lokalny model nie ma poczucia, kiedy przestać.

9.Umiejętności harnessu buduj cudzym modelem

Na czym polega: Autor nie pisał routera umiejętności ani skilli ręcznie — kazał Codeksowi przeanalizować swój harness pi i przerabiać go, aż zaczął działać dobrze. Wskazówki do skilli pochodziły z publicznych repozytoriów GitHuba.

Jak stosować: Użyj mocnego modelu zamkniętego jako narzędzia do budowy i strojenia lokalnego środowiska. To jednorazowy koszt, który potem obniża rachunki na stałe.

Na co uważać: Powstaje zależność, o której łatwo zapomnieć: „w pełni lokalny” zestaw został zbudowany przez model chmurowy. Zapisuj konfiguracje, żeby ich odtworzenie nie wymagało kolejnej sesji z modelem zamkniętym.

10.Metoda nie ogranicza się do stron

Na czym polega: Autor wyraźnie zaznacza, że strony to tylko przykład — ten sam układ (harness plus skille plus lokalne modele generatywne) działa dla dowolnego zasobu wizualnego: wideo, prezentacji, grafik.

Jak stosować: Zamiast kopiować skille do stron, potraktuj je jako wzorzec: zbiór wskazówek stylistycznych plus pętla weryfikacji własnej pracy. Napisz analogiczny zestaw dla materiału, który faktycznie produkujesz.

Na co uważać: Skuteczność pętli samosprawdzania zależy od tego, czy model może zobaczyć efekt. Dla stron jest to trywialne dzięki przeglądarce; dla prezentacji czy wideo trzeba dopiero taką możliwość zbudować.