O czym jest ten film
- Autor prezentuje własny skill do Claude Code o nazwie „ScrollCraft”, który buduje strony typu landing page sterowane przewijaniem.
- Kluczowa idea: scroll ma być powiązany z tym, co dzieje się na stronie — użytkownik myszą kontroluje przebieg narracji.
- Skill nie jest szablonem — każda wygenerowana strona wygląda inaczej, bo punktem wyjścia jest wywiad z użytkownikiem.
- Wywiad pyta o podróż odwiedzającego, o to, w co ma uwierzyć na końcu, o posiadane assety i o „znak firmowy” strony.
- Brakujące grafiki i wideo skill dogenerowuje przez Kie.ai — agregator modeli obrazu i wideo, podpinany kluczem API w zmiennych środowiskowych.
- Podczas budowy Claude robi przebieg weryfikacyjny: zrzuca ekrany kluczowych klatek i sam je ocenia, żeby trafić lepiej za pierwszym razem.
- Demonstracja na żywo: przebudowa istniejącej strony AI Automation Society w stronę „edytorialną”, premium, z subtelnymi animacjami.
- Efekt pierwszego przebiegu: świeże liczby pobrane na bieżąco, licznik odblokowywanych źródeł, animowany globus, sekcje „dowodowe”, horyzontalny scroll.
- Druga iteracja po feedbacku: nowy hero w stylu okładki magazynu, wolniejsza animacja globusa, usunięta zbędna sekcja, poprawione linki i copy.
- Skill jest rozdawany za darmo w społeczności Skool autora; film zakłada podstawową znajomość Claude Code.
Redakcyjne tłumaczenie
Czym jest ScrollCraft
Wydaje mi się, że zbudowałem najlepszy skill do projektowania stron w Claude i zamierzam wam go oddać zupełnie za darmo. To narzędzie najpierw pomaga ustalić, jakiego typu strony właściwie szukacie, potem generuje wszystkie potrzebne materiały — albo bierze te, które już macie — a na końcu tworzy interaktywną stronę opartą na przewijaniu. To nie jest zwykły „AI slop”. Na tym przykładzie widać, że dosłownie przechodzimy przez pewną podróż, bo to jest biuro podróży, które próbuje nakłonić klientów do rezerwacji.
Tutaj macie moją pierwotną stronę, którą zbudowałem z Claude’em. Jest w porządku, prawda? Nic nadzwyczajnego. Powiedziałem więc Claude’owi: „Spójrz na moją stronę, użyj tego skilla i przekształć ją”. I to jest efekt. Zachował całe copy, całą identyfikację wizualną i ten sam klimat, ale przerobił to na coś dużo bardziej interaktywnego, co niemal wciąga i sprawia, że chce się przewijać dalej, żeby zobaczyć, co będzie. Ma znacznie bardziej premium charakter niż to, co zwykle dostajecie, budując strony z Claude’em.
Nazwałem ten skill ScrollCraft, bo cała idea polega na tym, żeby zahaczyć odbiorcę — sprawić, by przewijanie odpowiadało czemuś, co realnie dzieje się na stronie. Poza samą zasadą, że Claude ma zawsze szukać okazji, by scroll był interaktywny, w skillu siedzą też elementy projektowe: odstępy, typografia, wyczucie, smak, tego rodzaju rzeczy.
(Informacja dodatkowa: „skill” w Claude Code to pakiet instrukcji i plików, który model wczytuje na żądanie i traktuje jak zestaw wytycznych do konkretnego typu zadania).
Dlaczego wywiad jest najważniejszą częścią
To, co od razu rzuca się w oczy, to fakt, że skill nie jest jednym konkretnym szablonem. Każda z tych stron, które wam do tej pory pokazałem, wychodzi trochę inaczej. Właśnie dlatego sekcja wywiadu jest w tym skillu tak istotna — pyta was, jakiego typu strony chcecie, jaki ma być jej klimat. Naprawdę myśli o podróży użytkownika, o tym, co się dzieje, gdy ktoś otworzy stronę i zacznie przewijać. To trochę jak content krótkiej formy: jeśli nie zahaczy was od razu, przestajecie być zainteresowani.
Niektóre z tych realizacji są bardzo profesjonalne i bardzo edytorialne, jak ta. Ma budzić zaufanie, a mimo to zawiera sporo animacji przewijania i wypada bardziej premium. To dodaje głębi, gdy coś jeszcze dzieje się w tle. Uwielbiam tę małą animację tutaj.
Wracając do przykładu z suplementem — kazałem wygenerować dwie wersje. To jest pierwsza. Obie utrzymują spójną paletę barw, ten sam nastrój i to samo przesłanie w treści. Cała strona nie musi być przesadnie efekciarska i naszpikowana animacjami. Ta była animowana głównie w pierwszej sekcji hero. A tu druga wersja, na początku prostsza, bo tylko delikatnie przybliżamy kadr. Potem wchodzimy w moment, w którym skupiamy się na jednej rzeczy naraz, a użytkownik przewija i sam decyduje, na co właściwie patrzy. Na końcu widzimy trzy ujęcia produktu, trzy smaki i wezwanie do działania.
Wygenerowałem mnóstwo różnych przykładów i widać, że każdy ma inny klimat i inny styl, ale wszystkie pozostają unikalne — takie, po których klient zapamięta wasz biznes.
Jak zdobyć skill i czego trzeba
Jeśli chcecie ten skill, jest całkowicie darmowy. Wejdźcie do mojej darmowej społeczności na Skool z linku w opisie, przejdźcie do zakładki z materiałami i znajdziecie tam wszystkie zasoby, które kiedykolwiek rozdaję za darmo.
W tym filmie korzystam z desktopowej wersji Claude Code. Zakładam też, że macie już trochę doświadczenia z Claude Code. Jeśli dopiero zaczynacie od zera, obejrzyjcie najpierw kawałek mojego sześciogodzinnego kursu dla osób nietechnicznych, oswójcie się z narzędziem, a potem wróćcie tutaj i budujcie szalone strony.
Skill jest wtyczką, którą możecie zainstalować, albo po prostu weźmiecie foldery i pliki i wrzucicie je bezpośrednio do swojego Claude’a — jak wolicie. Gdy wpiszę „scroll”, pojawia się skill ScrollCraft z opisem: zbuduj premium landing page sterowany przewijaniem dla dowolnego biznesu. Cokolwiek sprzedajecie — produkt czy usługę — da się to tu zrobić. Widzieliśmy produkty fizyczne, stronę marki osobistej (moją własną), agencję turystyczną. Da się z tym skillem naprawdę dużo.
Start realnego projektu: AI Automation Society
Zróbmy prawdziwą stronę dla mnie, dla AI Automation Society. Tak wygląda obecna strona. Mamy tę ładną animację globusa na górze, ale poza tym nie ma tu nic specjalnego. Kilka zdjęć. Próbowaliśmy sprawić, żeby wyglądało to przynajmniej w miarę brandowo i wiarygodnie, ale nie ma tu nic angażującego. Owszem, część kart lekko się rusza, ale spróbujmy tę stronę przerobić.
Zaczynam prompt tak: chcę użyć tego skilla, żeby przebudować stronę AI Automation Society; ma być premium i budzić zaufanie; ma być bardziej edytorialna, a nie oparta na stosie assetów generowanych przez AI; nie chcę świata, przez który przelatujemy — chcę czegoś bardziej premium.
Zaczynam mniej więcej w ten sposób, bo pierwsza część skilla to proces wywiadu, który ma naprawdę zrozumieć, jakiego klimatu szukacie. Bo spójrzcie: ta realizacja to zestaw assetów z AI, które tworzą efekt przelotu przez świat, w którym się odbijamy. Tamta też ma assety z AI, ale jest bardziej hajpowa, bardziej energetyczna, bo próbujemy sprzedać produkt fizyczny. Myślę, że dla AI Automation Society szukam czegoś bliższego temu przykładowi — z subtelnymi animacjami i subtelnym scrollem.
Widać, że nie startujemy od zera. Model ma naszą stronę, ma nasze materiały brandowe i ma inne realizacje, które już zrobiliśmy. Teraz przeprowadzi z nami wywiad.
Załóżmy, że nie macie żadnego biznesu i nie wiecie, dla czego mielibyście zbudować stronę. Zróbcie po prostu wszystko na assetach generowanych przez AI, żeby pobawić się skillem i zobaczyć, jak działa.
Generowanie assetów przez Kie.ai
Ten skill robi to konkretnie przez Kie.ai. Jeśli nigdy z tego nie korzystaliście, to coś jak OpenRouter, tyle że dla modeli obrazu i wideo. Można wybierać spośród wielu różnych modeli.
(Informacja dodatkowa: OpenRouter to pośrednik dający dostęp do wielu modeli językowych przez jedno API i jeden klucz; Kie.ai pełni analogiczną rolę dla generatorów grafiki i wideo).
Jeśli zajrzę do logów, zobaczycie moje ostatnie generacje — to są materiały, których właśnie użyliśmy. Ta puszka, ta twarz, ten kubek, wszystkie te assety generowane na potrzeby tych stron, wideo albo obrazy. Wystarczy wejść tutaj, pobrać klucz API, wstawić go do zmiennych środowiskowych projektu w Claude Code, i wtedy model będzie mógł sam sięgać po wszystkie potrzebne materiały i uzupełniać braki. Automatycznie stworzy obrazy, zamieni je w wideo, poskleja te wideo ze sobą. Zrobi, co trzeba, bo skill mówi mu jak.
Pytania z wywiadu
Pojawiają się pierwsze pytania. Jaka jest podróż przez scroll — co odwiedzający widzi najpierw i w jakiej kolejności potem? Czy chcemy otworzyć dowodami, tymi dużymi liczbami? Czy zacząć od historii Nate’a? Czy od spojrzenia od środka? Myślę, że zaczniemy od góry od dowodów — to zresztą rekomendacja modelu.
Potem pyta: w co odwiedzający ma uwierzyć na końcu? Jedno zdanie, nie lista funkcji. Wklejam tu w zasadzie naszą misję — to, co sami o sobie mówimy. Dalej.
Kolejne pytanie: jakie realne materiały posiadacie? To decyduje, ile zostanie wygenerowane, a ile wyciągnięte z tego, co macie. Zdjęcia z wydarzeń, zrzuty ze społeczności, workflow — co mamy, a co model ma dogenerować?
Odpowiadam: użyj po prostu zdjęć, które już tam są. Jest jedno zdjęcie, na którym przemawiam. Jest też zdjęcie nas wszystkich na jednym z wydarzeń — wygląda trochę jak rozmowa na Zoomie. To jedyne dwa zdjęcia, jakie ci dałem, poza tym na dole przy „poznaj naszego założyciela” i zdjęciem merchu. Z tymi materiałami masz pracować.
Ale fajnie by było, gdybyś wygenerował kilka obrazów, które niekoniecznie są fotorealistyczne, tylko pokazują coś w rodzaju środowisk edukacyjnych. Może w stylu — nie mogę sobie przypomnieć nazwy — chyba coś jak minimalistyczny, geometryczny low poly. Spróbujmy tego. Minimalistyczne, geometryczne postacie low poly. Sceny pasujące do certyfikacji, do wydarzeń, do AIS Plus: ludzie odnoszący sukcesy, uczący się nawzajem, pracujący razem. Utrzymaj to minimalistycznie i dopasuj do palety barw oraz wytycznych marki AIS. Chodzi o coś, co doda smaku i co da się zsynchronizować z przewijaniem.
(Informacja dodatkowa: low poly to styl grafiki 3D oparty na małej liczbie widocznych wielokątów — daje uproszczone, geometryczne bryły zamiast realistycznych kształtów).
Na koniec pada pytanie: jedna rzecz, którą ta strona ma robić, a której nie robi żadna znana wam strona? To staje się znakiem firmowym. Odpowiedź: każde twierdzenie ma swój dowód. Nic na stronie nie jest stwierdzone bez podania źródła. Niech na razie tak zostanie, zatwierdzam.
I tu właśnie można wejść naprawdę głęboko w szczegóły. Im lepiej wiecie, czego chcecie, tym śmielej to wpisujcie. Ale jeśli nie macie pomysłu — na tym polega piękno tego skilla, że sam ma sporo wyczucia co do tego, co składa się na dobrą animację przewijania.
O co naprawdę chodzi w scrollu
Jak widzieliście na przykładach, było tam mnóstwo różnych rozwiązań. Tego akurat nie pokochałem, ale ma na końcu naprawdę fajne elementy: wygląda to jak karty odlotów, kierunki podróży, i widzimy, jak to synchronizuje się ze scrollem.
Naprawdę ważne jest dla mnie to, żeby na całej stronie użytkownik miał kontrolę przez mysz — żeby to on sterował tym, co się dzieje, żeby mógł cofnąć się i pójść do przodu. Czy to będzie przewijanie obrazów w ten sposób, czy po prostu liczby pojawiające się przez przenikanie, czy obraz, który się wygasza. Chodzi po prostu o tę ideę, że scroll jest z czymś zsynchronizowany.
Jest jeszcze kilka pytań. Gdzie strona ma być spokojna, a gdzie intensywna? Przejdę przez te pozostałe pytania projektowe i odezwę się, kiedy zacznie się dziać coś ciekawego.
Ostatnio zauważam, że modele AI można instruować dużo bardziej emocjonalnie niż kiedyś. Mówię temu narzędziu, jak strona ma się odczuwać i jaka ma być motywacja, i naprawdę zmuszam je do myślenia: gdyby to ono było użytkownikiem, klikało i przewijało — co by czuło i jak możemy tą emocją pokierować najlepiej, jak się da.
Weryfikacja przez zrzuty ekranu
Chcę zwrócić uwagę na jedną rzecz. Po tym, jak wygenerował część obrazów przez Kie.ai, zaczął budować stronę. A skoro ją buduje, robi też weryfikację. Pisze: teraz część, której harness nie jest w stanie ocenić — przybliżam kluczowe klatki. Dosłownie robi zrzuty ekranu strony, po czym je bada i sprawdza, czy nic nie jest nie tak. Dzięki temu jest szansa, że już za pierwszym podejściem dostaniemy coś znacznie lepszego, niż gdyby tego przebiegu weryfikacyjnego nie było. Dlatego tak ważne jest, żeby obserwować Claude’a przy pracy — wyrabiacie sobie wtedy wyczucie, jak harness naprawdę się zachowuje.
(Informacja dodatkowa: „harness” to warstwa uruchomieniowa wokół modelu — pętla narzędzi, uprawnień i kontekstu, w której model działa; w tym wypadku Claude Code).
Pierwsza wersja strony
I proszę, skończył. Zajęło mu to chyba jakieś 30 minut. Mamy tu zrzut ekranu przechodzący przez cały przepływ — czyli przeszedł sam przez scroll, żeby sprawdzić, jaki jest klimat. Wchodzimy. Sam jeszcze tego nie oglądałem.
Od razu widać ten profesjonalny klimat, prawie jak raport. Bardzo edytorialny w tym sensie, bardzo profesjonalny. Na pierwszy rzut oka wygląda jednak dość nudno, więc miejmy nadzieję, że w miarę przewijania zacznie się coś dziać.
Mamy dane na żywo. Faktycznie poszedł i pobrał aktualne liczby, na dzisiaj. Jeśli sprawdzę moją darmową społeczność — 441,5. To jest dosłownie stan na dziś. Wyciągnął świeże liczby.
„Przygotowujemy jak najwięcej osób do nowego sposobu pracy. AI przebudowuje sposób, w jaki wykonuje się pracę”. O, ciekawe — dopiero teraz to zauważyłem, odświeżę. Pisze: „zebrano źródła 0 z 9”. Po lewej stronie mamy źródła, a w miarę przewijania odblokowujemy kolejne. To całkiem fajne.
Teraz przeszliśmy w coś w rodzaju trybu ciemnego. Jest napis, że dawno przestało to być jednym pokojem, i widzimy przyrost członków oraz rosnącą globalną obecność — to mi się bardzo podoba. Choć uważam, że ta animacja idzie odrobinę za szybko. Przy typowym przewijaniu to za szybko. Da się to spowolnić, zaraz wam pokażę. Ale sama grafika jest bardzo ładna.
Mamy „Dowód A: pokój w zwyczajny wtorek” — to jest ta rozmowa na żywo. Mamy tu opinie: Glenn, Casper i Amy. Bardzo, bardzo fajne. Wszystkie te trzy osoby są też na tej rozmowie: Glenn, Casper i Amy. Uwielbiam to.
Idąc dalej w dół: cztery kwartały na publicznej tablicy wyników. Chwila moment. Nie wiem nawet, gdzie te zrzuty trzymałem, ale poszedł i je znalazł, bo tej informacji nie ma na oryginalnej stronie. Nie mamy tych zrzutów nigdzie. Musiał je gdzieś odszukać. Znalazł te zdjęcia rankingu i wstawił je tutaj przy naszych czterech wygranych na cztery możliwe w Skool Games w 2025.
Dalej „Dowód F” — klasa AIS Plus. Mamy tu poziome przewijanie. Licznik pokazuje 6 z 9 źródeł. Sekcja o założycielu: nie był programistą, gdy zaczynał, ukończył University of Iowa. Fajne, ładne zdjęcie. Ten podpis będziemy musieli poprawić, bo to nie było AIS Live, tylko Africa AI. Kilka rzeczy trzeba będzie doszlifować.
Tu z kolei mamy wideo w tej geometrycznej stylistyce low poly — to do certyfikacji, jakby uczyli. Bardzo fajne. Trochę copy pewnie będę musiał poprawić. Dokąd prowadzi ten przycisk? Do naszej darmowej społeczności. Parę rzeczy trzeba pozmieniać.
„Wszystko, co ta strona właśnie stwierdziła” — co to jest? A, rozumiem, to przebiega przez te dziewięć źródeł. Nie wiem, czy to kocham, ale nie wiem, całkiem fajne. Mamy darmową społeczność, potem AIS Plus z odesłaniem do AIS Plus. Bardzo dobrze. Chyba mamy tam merch, mamy jeszcze raz certyfikację — i to zasadniczo koniec.
To oczywiście zupełnie inny klimat niż oryginalna strona AIS. Inny klimat, ale podobny odbiór. Widać, że to wciąż ta sama marka, wciąż te same wytyczne. Teraz to już tylko kwestia wchodzenia w szczegóły: co drobnego nam się nie podoba i co chcemy zmienić. Ale ogólnie uważam, że to bardzo unikalna strona. Nie widziałem zbyt wielu takich.
Feedback do drugiej iteracji
Mam trochę uwag do strony. Najpierw chcę powiedzieć, że wykonałeś dobrą robotę. Byłeś kreatywny i uwzględniłeś moje sugestie, to dobrze. Podoba mi się, że poszedłeś i pobrałeś aktualne liczby, to było naprawdę fajne.
Jeśli chodzi o sekcję hero, jest trochę mdła, gdy ktoś pierwszy raz ładuje stronę. Jest bezbarwna i nie sprawia wrażenia premium. Może dodaj tu trochę głębi albo zrób coś z tą sekcją, bo to właśnie tam chcemy zahaczyć odbiorcę.
Bardzo podoba mi się pierwsza część o zasięgu. Bardzo mi się podoba animacja z wypełniającym się globusem — czuję, że to bardzo na miejscu dla naszej marki, pokazuje przyrost członków. Ale przewija się za szybko. Gdybyś mógł to znacząco spowolnić, żeby użytkownik zdążył przewinąć i zrozumieć, co się dzieje, byłoby świetnie.
Idąc niżej: podoba mi się Dowód A, podoba mi się część o społeczności, podobają mi się opinie. Na razie uważam, że to dobre. Może dałoby się coś jeszcze dodać, bo trochę mdło to wygląda. Podoba mi się przejście do dowodów od B do F, podoba mi się przewijanie w bok, ale znów sprawia trochę mdłe wrażenie. Myślę, że da się tu wpleść elementy, które sprawią, że będzie bardziej premium.
W sekcji o założycielu nie ma nic wyjątkowego. Może dodajmy tam także jakąś animację przewijania, żeby nie było tak nijako. Podoba mi się animacja przy certyfikacji, ale mam wrażenie, że trwa za krótko. Może spowolnij ją albo mocniej wyeksponuj.
Poza tym link do certyfikacji: weź prawdziwy link, który jest na głównej stronie AIS. Tam link do certyfikacji prowadzi chyba na listę oczekujących — „zarezerwuj miejsce”. Tak, powinien prowadzić na listę oczekujących. Weź ten link i upewnij się, że jest na stronie, którą dla nas budujesz.
I szczerze — nie przepadam za sekcją z rejestrem. Po prostu ją usuńmy. Podoba mi się pomysł z przewijaniem, dodaniem animacji i interaktywności, ale sam rejestr mi nie leży. Możesz go usunąć. Resztę na ten moment uważam za w porządku. Posprzątajmy po prostu te rzeczy.
Wysyłam ten feedback i odezwę się, kiedy dostaniemy odpowiedź.
Druga wersja i finał
Wróciła kolejna wersja. Widzimy ją otwartą na localhoście. Rejestr zniknął. Globus został spowolniony. Jest nowa sekcja hero — teraz to okładka magazynu, zobaczymy, jak wygląda. I wszystko inne, o co prosiliśmy, zostało zmienione.
Otwieramy link. Nieźle, podoba mi się, jak to wjechało. Odświeżam i widać, jak to się wsuwa przy przewijaniu. Podoba mi się. Jest tu moje małe zdjęcie. To samo copy, ten sam klimat, ładne niebieskie podświetlenie przy kursorze — może odrobinę za dużo tego, ale w porządku.
To przewija się teraz dużo wolniej, więc da się obserwować, jak rosną liczby, jak mapa zapełnia się niebieskimi kropkami i połączeniami. Naprawdę podoba mi się ta animacja, uważam, że jest świetna.
Dalej „pokój w zwyczajny wtorek”. Tu nie ma żadnej animacji. Może obraz powinien się odsłaniać albo tekst powinien wjeżdżać jakby był pisany na maszynie? To łatwa poprawka.
Niżej doszły kolorowe tła pod tymi elementami. Karty są dynamiczne — po najechaniu myszą reagują, a ta ładnie wjeżdża. To właśnie chciałbym zrobić wyżej: żeby tekst pojawiał się jak z maszyny do pisania.
Dalej: „zajęcia to nie to samo co certyfikat”. O, ładnie. Zmienił też całe to copy — uszczegółowił je pod konkretny nabór. I to prowadzi już we właściwe miejsce. Bardzo dobrze. Jak widać, rejestr też zniknął. Wszystkie zmiany, o które prosiliśmy, zostały wykonane.
To, co chcę tu podkreślić: nie stworzyłem wcześniej żadnego przykładu, który wyglądałby tak. I to jest właśnie fajne w tym skillu — wykorzystuje zasady projektowe, ale nie daje wam szablonu. Wciąż dostajecie coś unikalnego, zgodnego z tym, jak opisaliście emocje, podróż i cele swojego biznesu czy tego, dla czego robicie stronę.
Przy okazji: kazałem mu jeszcze szybko przegenerować to z efektem maszyny do pisania. Uważam, że jest dużo czyściej. Zrobił też naprawdę fajną animację, w której twarze na kolejnych ekranach pojawiają się jedna po drugiej. To jest bardzo zgrabne i bardzo mi się podoba. Widać drobnego buga, gdy trzeba przeładować stronę, ale poza tym wchodzi całkiem czysto.
Pamiętajcie: jeśli chcecie pobrać skill, wejdźcie do mojej darmowej społeczności na Skool. Będzie podlinkowany w poście, będzie też w materiałach dla widzów w sekcji z zasobami AI. Znajdziecie go tam w wielu miejscach. Sprawdźcie go, jeśli chcecie budować takie strony.
10 najważniejszych takeaways — z kontekstem zastosowania
1.Scroll jako oś narracji, nie ozdobnik
Na czym polega: Cała koncepcja opiera się na tym, że przewijanie steruje tym, co dzieje się na stronie — użytkownik myszą kontroluje przebieg, może cofnąć i pójść dalej. Animacja nie jest dekoracją, tylko sposobem prowadzenia odbiorcy.
Jak stosować: Przy każdej sekcji zadaj pytanie: co konkretnie ma się zmienić, gdy użytkownik przewinie o ekran? Liczby rosną, mapa się zapełnia, kadr się przybliża, karty wjeżdżają w bok.
Na co uważać: Autor sam podkreśla, że cała strona nie musi być efekciarska — w jednym z przykładów animowana była głównie sekcja hero. Nadmiar synchronizowanych efektów męczy i spowalnia stronę.
2.Wywiad wstępny decyduje o wyniku bardziej niż sam prompt
Na czym polega: Skill zaczyna od serii pytań: jaka jest podróż przez scroll, w co odwiedzający ma uwierzyć na końcu, jakie realne materiały posiadasz, gdzie strona ma być spokojna a gdzie intensywna, co ma być znakiem firmowym.
Jak stosować: Przenieś ten schemat do własnych promptów, nawet bez tego skilla. Kolejność sekcji, jedno zdanie docelowego przekonania i inwentarz posiadanych materiałów to trzy najbardziej sprawcze wejścia.
Na co uważać: Pytanie o docelowe przekonanie ma dostać jedno zdanie, nie listę funkcji. Rozlana odpowiedź daje rozlaną stronę.
3.Brak szablonu to zaleta, ale też brak przewidywalności
Na czym polega: Każda wygenerowana strona wychodzi inna — autor podkreśla, że nawet on nie miał wcześniej przykładu wyglądającego jak finalna wersja AIS.
Jak stosować: Traktuj pierwszy przebieg jako propozycję kierunku, a nie deliverable. Zaplanuj co najmniej jedną rundę uwag.
Na co uważać: Przy pracy dla klienta unikalność bywa ryzykiem — nie da się pokazać z góry, co dokładnie wyjdzie. Warto najpierw wygenerować wariant „na sucho” jako referencję.
4.Podawaj modelowi istniejącą stronę i materiały brandowe
Na czym polega: W demonstracji Claude startuje z dostępem do obecnej strony, materiałów marki i wcześniejszych realizacji. Efekt zachowuje copy, paletę i rozpoznawalność marki mimo zupełnie nowego układu.
Jak stosować: Zanim uruchomisz przebudowę, wrzuć do projektu istniejące zdjęcia, wytyczne kolorystyczne i teksty. Wyraźnie napisz, które materiały są prawdziwe i mają zostać użyte.
Na co uważać: Model potrafi sięgnąć po materiały, o których nie pamiętasz — autor był zaskoczony, że znalazł zrzuty rankingu, których nie ma na stronie. Sprawdź, skąd faktycznie pochodzą użyte grafiki.
5.Automatyczne dogenerowanie assetów przez Kie.ai
Na czym polega: Skill uzupełnia braki, generując obrazy, zamieniając je w wideo i sklejając materiały. Wymaga klucza API do Kie.ai w zmiennych środowiskowych projektu Claude Code.
Jak stosować: Jeśli nie masz jeszcze biznesu ani materiałów, zbuduj pierwszą stronę wyłącznie na assetach z AI, żeby poznać działanie skilla.
Na co uważać: To płatne generacje po zewnętrznym API — koszt rośnie z liczbą iteracji, zwłaszcza przy wideo. Klucz trzymaj w zmiennych środowiskowych, nie w kodzie.
6.Instruowanie „emocjonalne” działa lepiej niż lista wymagań
Na czym polega: Autor zauważa, że współczesne modele znacznie lepiej reagują na opis odczuć i motywacji niż na suchą specyfikację. Mówi modelowi, jak strona ma się odczuwać, i każe mu wcielić się w użytkownika.
Jak stosować: Zamiast „dodaj animację fade-in” napisz, jaki stan ma osiągnąć odbiorca w danym momencie — spokój, napięcie, zaufanie — i pozwól modelowi dobrać środki.
Na co uważać: Bez twardych ograniczeń (marka, linki, dane) sam opis emocji prowadzi do ładnych, ale niezgodnych z faktami stron. Łącz oba rejestry.
7.Przebieg weryfikacyjny na zrzutach ekranu
Na czym polega: Podczas budowy Claude sam robi zrzuty kluczowych klatek strony i je ogląda, żeby wychwycić błędy. Autor traktuje to jako główny powód, dla którego pierwszy wynik jest użyteczny.
Jak stosować: Wbuduj analogiczny krok w swoje workflow — po wygenerowaniu strony każ modelowi zrzucić i ocenić kluczowe widoki, zanim odda robotę.
Na co uważać: Statyczny zrzut nie wykryje problemów czasowych. Zbyt szybka animacja globusa przeszła przez weryfikację i wyłapał ją dopiero człowiek.
8.Tempo animacji to najczęstsza poprawka
Na czym polega: Pierwsza wersja miała animację przewijaną za szybko, a animacja certyfikacji trwała za krótko. Po prośbie o znaczące spowolnienie sekcja stała się czytelna.
Jak stosować: Testuj przy normalnym tempie przewijania, nie przy przeciąganiu paska. Formułuj uwagi ilościowo: „znacząco spowolnij”, „wydłuż i mocniej wyeksponuj”.
Na co uważać: Nadmierne spowolnienie zamienia scroll w przymus — użytkownik musi długo kręcić, żeby dojść do treści.
9.Feedback wypunktowany sekcja po sekcji
Na czym polega: Druga iteracja powstała z uwagi przechodzącej przez stronę od góry do dołu: co działa, co jest mdłe, co usunąć, który link poprawić. Wszystkie żądane zmiany zostały wykonane w jednym przebiegu.
Jak stosować: Zacznij od tego, co się udało (model to podtrzyma), potem idź sekcjami. Wskazuj wprost usunięcia — autor po prostu kazał wyciąć sekcję rejestru.
Na co uważać: Uwagi typu „jest mdło” bez wskazania środka zaradczego dają nieprzewidywalny wynik. Tam, gdzie wiesz czego chcesz — jak efekt maszyny do pisania — nazwij to.
10.Realistyczne oczekiwania: 30 minut, iteracje, drobne błędy
Na czym polega: Pełny przebieg zajął około 30 minut. Wynik wymagał poprawek: błędny podpis zdjęcia, link prowadzący nie tam gdzie trzeba, copy do doszlifowania, drobny bug przy przeładowaniu strony.
Jak stosować: Planuj co najmniej dwie–trzy iteracje i osobny przegląd faktograficzny: podpisy, linki, liczby, nazwy wydarzeń.
Na co uważać: Model potrafi pobrać dane na żywo i wpleść je w stronę — atrakcyjne, ale wymaga świadomej decyzji, czy liczby mają być zamrożone, czy odświeżane. Wymaga też podstawowej znajomości Claude Code; autor kieruje początkujących najpierw do swojego kursu.