Strony z płynnym wideo w tle — obracający się samochód, rozkładające się słuchawki, budynek rosnący w górę — jeszcze niedawno wymagały ekipy filmowej, wyjazdu w plener i dużego budżetu. Dziś podobny efekt da się złożyć w kilka minut z dwóch narzędzi: generatora wideo i asystenta, który zbuduje stronę za ciebie. Takie strony bywają nazywane „stronami za 10 tysięcy dolarów” — to ocena efektu wizualnego, nie wycena pracy. Pokażę ci spokojnie, krok po kroku, na czym ten proces polega.
Z czego składa się cały proces
Pomysł jest prosty i ma trzy etapy. Najpierw powstaje obraz wyjściowy — pojedyncza grafika, od której zacznie się animacja. Potem ten obraz trafia do Seedance — to generator wideo oparty na sztucznej inteligencji: na podstawie zdjęcia i opisu słownego tworzy krótki, ruchomy klip. Na końcu gotowe wideo wędruje do Claude Code — narzędzia, w którym Claude (model AI) pracuje przy zadaniach programistycznych: czyta pliki na twoim komputerze i sam pisze kod strony, a ty rozmawiasz z nim zwykłym językiem.
Całość kręci się wokół jednej rozmowy. Ty opisujesz, czego chcesz; narzędzia wykonują robotę. Nie trzeba znać kodu — trzeba umieć jasno powiedzieć, jak ma wyglądać efekt.
Przygotowanie środowiska
Punktem wyjścia jest Visual Studio Code — darmowy program, w którym po lewej stronie widać pliki projektu, a pośrodku rozmawia się z Claude. Po jego zainstalowaniu dokłada się rozszerzenie Claude Code i loguje się kontem (radzę zacząć od abonamentu za 20 dolarów miesięcznie zamiast płacić za każde zapytanie osobno — przy tym zastosowaniu wychodzi taniej).
W projekcie tworzy się folder .claude — to miejsce, w którym Claude Code szuka swoich ustawień i tak zwanych umiejętności (ang. skills). Umiejętność to po prostu instrukcja napisana zwykłym językiem, która mówi narzędziu, jak wykonać konkretne zadanie — tutaj: jak ułożyć dobry opis wideo dla Seedance. To jednorazowe przygotowanie; potem korzysta się z niego przy każdej kolejnej stronie.
Od obrazu do wideo
Najpierw obraz. Powstaje on w osobnym generatorze grafiki z krótkiego polecenia: „rysunek techniczny wieżowca na papierze szkicowym, naszkicowany mniej więcej w trzech czwartych”. Ważny szczegół: obraz robi się w proporcjach 16:9 (poziomy prostokąt), bo w takich samych proporcjach ma powstać wideo — łatwiej, gdy jedno pasuje do drugiego.
Potem ten sam obraz trafia do Seedance jako pierwsza i ostatnia klatka klipu. To celowy zabieg: skoro film zaczyna się i kończy tym samym kadrem, można go zapętlić tak, że odtwarza się w kółko bez widocznego „skoku”. Dla osoby na stronie wygląda to jak nieskończone, spokojne tło.
Sam opis wideo układa Claude Code. Wystarczy pokazać mu obraz i opowiedzieć scenę po ludzku: szkic się dopełnia, kamera wjeżdża w prawdziwe miasto, budynek rośnie aż po dach, w połowie z lewej wjeżdża napis „Zamień pomysły w rzeczywistość”, a na koniec kadr wraca do pierwotnego szkicu. Claude zamienia ten opis na gotowe polecenie dla generatora. Warto wiedzieć o dwóch rzeczach. Po pierwsze, takie generowanie kosztuje — rozlicza się je w kredytach, a ich liczba rośnie z długością i jakością klipu (dziesięciosekundowe wideo bywa wyraźnie tańsze od piętnastosekundowego). Po drugie, opłaca się zrobić dwie wersje i porównać — krótsza często wypada żywiej.
Budowanie strony w Claude Code
Gotowe wideo wraca do Claude Code. Tu warto włączyć dwa ustawienia. Tryb planowania (ang. plan mode) sprawia, że Claude najpierw omawia z tobą, co ma zrobić, i dopiero po twojej zgodzie zaczyna pisać kod — dzięki temu nie buduje na ślepo. Drugie to dodatkowa umiejętność do projektowania stron (z angielska front-end design), która daje narzędziu lepsze wyczucie estetyki.
Polecenie znów jest opisowe: „całą górną sekcję strony ma wypełniać to wideo, bez nagłówków; to strona biura architektonicznego, ma sprawiać wrażenie zaufanej i profesjonalnej; pod wideo uzupełnij treść i układ; film ma chodzić w nieskończonej pętli”. Górną, pierwszą sekcję strony — tę, którą widać zaraz po wejściu — nazywa się hero; to twarz strony i pierwsze, co rzuca się w oczy.
W trybie planowania Claude sam dopytuje: jak nazywa się firma, czy są kolory marki, jaki ma być nastrój. Tu można podać własne logo i wytyczne albo poprosić, żeby wymyślił nazwę i markę od zera. Po zatwierdzeniu planu Claude pisze stronę. Powstaje plik, który na razie działa lokalnie, czyli tylko na twoim komputerze, jeszcze nie w internecie — można go obejrzeć i poprawiać.
Dalej idą poprawki, też zwykłym językiem: dołożyć mniejsze wideo silnika nad sekcją ze statystykami, zmienić liczbę z 58 na 60 lat. Pokażę ci sprytną sztuczkę: możesz znaleźć stronę, której wygląd ci się podoba, zapisać jej zrzut ekranu i poprosić Claude, żeby upodobnił do niej styl — narzędzie przebuduje układ, zachowując twoje wideo i treść.
Publikacja w internecie
Gotowa strona wciąż siedzi tylko na twoim komputerze. Żeby zobaczył ją ktokolwiek inny, trzeba ją opublikować — wystawić pod adresem w internecie. Służą do tego dwa narzędzia. GitHub działa jak wspólny dysk na kod: wysyłasz tam projekt, żeby był dostępny spoza twojego komputera. Vercel bierze ten projekt z GitHuba i udostępnia go pod prawdziwym adresem — od tej chwili stronę widzi każdy, kto go wpisze. Claude Code potrafi sam założyć repozytorium (czyli „magazyn” projektu na GitHubie) i wysłać tam pliki.
Najwygodniejsze jest to, co dzieje się potem: gdy raz połączysz GitHub z Vercel, każda kolejna poprawka wystarczy, że trafi na GitHub — Vercel sam ją podchwyci i w pół minuty zaktualizuje stronę na żywo. Z twojej strony wygląda to jak praca z jednym narzędziem, choć pod spodem działają dwa.
Jedna rozsądna uwaga na koniec. Przy wysyłaniu projektu do internetu trzeba uważać, czego się tam nie wgrywa — przede wszystkim haseł i kluczy dostępu do innych usług. W tak prostej stronie zwykle takich danych nie ma, więc problemu nie ma, ale to nawyk, o który warto dbać od początku.
Co z tego zostaje? Konkretny, powtarzalny przepływ: obraz, wideo z Seedance, strona z Claude Code, publikacja przez GitHub i Vercel. Określenie „strona za 10 tysięcy” to ocena samego efektu wizualnego, nie wycena pracy — ale sam fakt, że taki rezultat składa się z opisów wpisywanych zwykłym językiem, mówi sporo o tym, jak przesunęła się poprzeczka.