To jest wersja do trzymania pod ręką w trakcie pracy. Cały proces ma trzy etapy: obraz wyjściowy, wideo z Seedance, strona zbudowana w Claude Code — plus publikacja w internecie. Przechodź sekcje po kolei, każdy punkt zaczyna się od czynności do wykonania.
0. Zanim zaczniesz — środowisko
Przygotuj to raz; potem korzystasz z tego przy każdej kolejnej stronie.
- Zainstaluj Visual Studio Code — darmowy program, w którym po lewej widać pliki projektu, a pośrodku rozmawia się z Claude.
- Dołóż rozszerzenie Claude Code i zaloguj się kontem.
- Wybierz rozliczenie. Zacznij od abonamentu za 20 dolarów miesięcznie zamiast płacić za każde zapytanie osobno — przy tym zastosowaniu wychodzi taniej.
- Utwórz w projekcie folder
.claude— tam Claude Code szuka swoich ustawień i umiejętności (ang. skills). - Dodaj umiejętność układania opisu wideo dla Seedance. Umiejętność to instrukcja napisana zwykłym językiem, która mówi narzędziu, jak wykonać konkretne zadanie.
1. Obraz wyjściowy
Pojedyncza grafika, od której zacznie się animacja.
- Wygeneruj obraz w osobnym generatorze grafiki z krótkiego polecenia opisowego (na przykład: „rysunek techniczny wieżowca na papierze szkicowym, naszkicowany mniej więcej w trzech czwartych”).
- Ustaw proporcje 16:9 (poziomy prostokąt) — w takich samych proporcjach ma powstać wideo, więc jedno pasuje do drugiego.
2. Od obrazu do wideo (Seedance)
Seedance to generator wideo: na podstawie zdjęcia i opisu słownego tworzy krótki, ruchomy klip.
- Wczytaj ten sam obraz do Seedance jako pierwszą i ostatnią klatkę klipu — film zaczyna się i kończy tym samym kadrem, więc daje się go zapętlić bez widocznego „skoku”.
- Pokaż Claude Code obraz i opisz scenę zwykłym językiem; Claude zamieni opis na gotowe polecenie dla generatora.
- Sprawdź, że scena wraca na koniec do pierwotnego kadru — to warunek płynnej pętli.
- Wygeneruj dwie wersje — krótszą i dłuższą — i porównaj je. Krótsza często wypada żywiej.
3. Budowanie strony w Claude Code
Gotowe wideo wraca do Claude Code. Claude czyta pliki na twoim komputerze i sam pisze kod strony.
- Włącz tryb planowania (ang. plan mode) — Claude najpierw omawia z tobą plan i pisze kod dopiero po twojej zgodzie, więc nie buduje na ślepo.
- Włącz dodatkową umiejętność do projektowania stron (ang. front-end design) — daje narzędziu lepsze wyczucie estetyki.
- Opisz, czego chcesz, zwykłym językiem: że całą górną sekcję strony — hero, czyli pierwszą rzecz widoczną po wejściu — ma wypełniać wideo bez nagłówków, że film ma chodzić w nieskończonej pętli, a pod wideo Claude ma uzupełnić treść i układ. Dodaj, jaki ma być charakter strony.
- Odpowiedz na pytania, które Claude zada w trybie planowania (nazwa firmy, kolory marki, nastrój) — albo poproś, żeby wymyślił nazwę i markę od zera.
- Zatwierdź plan i sprawdź wynik. Powstaje plik działający na razie lokalnie, czyli tylko na twoim komputerze — obejrzyj go i poprawiaj.
- Wprowadzaj poprawki zwykłym językiem (na przykład dołożyć mniejsze wideo nad sekcją albo zmienić liczbę w treści).
Sztuczka ze stylem
- Znajdź stronę, której wygląd ci się podoba, zapisz jej zrzut ekranu i poproś Claude, żeby upodobnił do niej styl — narzędzie przebuduje układ, zachowując twoje wideo i treść.
4. Publikacja w internecie
Gotowa strona wciąż siedzi tylko na twoim komputerze. Żeby zobaczył ją ktokolwiek inny, trzeba ją opublikować pod adresem w internecie.
- Wyślij projekt na GitHub — działa jak wspólny dysk na kod, dzięki czemu projekt jest dostępny spoza twojego komputera. Claude Code potrafi sam założyć repozytorium i wysłać tam pliki.
- Połącz GitHub z Vercel — Vercel bierze projekt z GitHuba i udostępnia go pod prawdziwym adresem.
- Po połączeniu wystarczy, że kolejna poprawka trafi na GitHub — Vercel sam ją podchwyci i w pół minuty zaktualizuje stronę na żywo.
Na co uważać
- Nie wgrywaj sekretów. Przy wysyłaniu projektu do internetu pilnuj, czego tam nie umieszczasz — przede wszystkim haseł i kluczy dostępu do innych usług. W tak prostej stronie zwykle takich danych nie ma, ale to nawyk, o który warto dbać od początku.
- Generowanie wideo 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.
- Sprawdzaj na dwóch wersjach. Zanim wybierzesz klip, porównaj krótszą z dłuższą — krótsza często wygląda lepiej.
Co zostaje na koniec: powtarzalny przepływ — obraz, wideo z Seedance, strona z Claude Code, publikacja przez GitHub i Vercel — złożony z opisów wpisywanych zwykłym językiem.