O czym jest ten film
- Autor ogłasza GPT-6 Astra nowym „królem projektowania” — jego zdaniem dystans do poprzedniego lidera, Fable 5.1, jest przepaścisty.
- Wszystkie zaprezentowane strony powstały po jednym prompcie, bez żadnej iteracji.
- Mocną stroną Astry jest poczucie głębi: animacje, obiekty 3D i parallaksa, które nie przytłaczają, bo układ pozostaje czytelny i spójny z marką.
- Każda z realizacji korzystała z autorskiego skilla ScrollCraft (darmowego, w społeczności autora na Skool) — pakietu wiedzy o warstwowaniu, typografii i odstępach.
- Największe odkrycie autora: rozdzielenie tekstu, tła i obiektów na niezależne warstwy daje efekt zanurzenia bez przesady.
- Model sprawdza się też w motion graphics (Hyperframes): animacje 3D zsynchronizowane z muzyką plus wersja pionowa — dwa prompty i 20–30 minut pracy.
- Po podaniu linku do folderu ze 152 GB nagrań Astra samodzielnie zmontowała minutowe podsumowanie eventu AIS Live w 35 minut; próby z modelami Soul i Fable 5.1 wypadały znacznie słabiej.
- Według autora skille to za mało — fundamentem jest inspiracja: gotowe witryny i komponenty z godly.design, 21st.dev oraz awwwards.com (z filtrowaniem po branży).
- Tandera AI ma dwa oblicza: rozpoznawalne sztampy (przyciski, gradienty, fonty) oraz strony „dla kogoś innego” — np. trójwymiarowy świat na serwisie z lekami dla seniora.
- Cały przepis: trzy P (ból, odbiorca, obietnica), wytyczne marki, treści, skill — a potem szybka pętla poprawek („to mi nie gra — popraw”).
Redakcyjne tłumaczenie
Nowy król projektowania — bez dyskusji
Mamy nowego króla projektowania w AI i nie ma tu nawet o co spierać. Zobaczcie kilka efektów, które uzyskałem z Astry. Zerknijcie, jak fajnie działa przewijanie w tym projekcie. A co z przykładem dla marki GLO? Moim zdaniem to po prostu niesamowite. Astra znakomicie radzi sobie z trójwymiarowością, dynamiką i budowaniem wrażenia głębi, a przy tym niczego nie przekombinowuje — sekcja otwierająca stronę (tzw. hero) wciąż jest bardzo czysta. Realizacja dla Perkform jest odważniejsza, ale i tak robi ogromne wrażenie, a przy tym pozostaje schludna. Dochodzą inne rodzaje animacji — popatrzcie, jak wjeżdżają te puszki. Bardzo podoba mi się, że powstały w trójwymiarze.
Dopiero co opublikowałem film, w którym królem designu ogłosiłem Fable 5.1, bo pomógł mi zbudować coś takiego — bardzo mi się to podobało. Tymczasem Astra radzi sobie z tym o niebo lepiej. I zwróćcie uwagę na najważniejszy szczegół: wszystko, co oglądaliście i co jeszcze zobaczymy, powstało po jednym prompcie. Przemyślcie to. Gdybym poświęcił czas na świadome iterowanie, wyniki byłyby jeszcze lepsze.
Pierwsze podejście do strony własnej społeczności
To był pierwszy strzał Astry w stronę serwisu mojej społeczności, AI Automation Society. Model próbował zachować dotychczasowy klimat. Na ten moment wygrywa wersja zbudowana przez Fable — ale wyłącznie dlatego, że przerabiałem ją z piętnaście razy. Jako pierwsze podejście: naprawdę, naprawdę dobry wynik. Trafił w charakter marki, ma animacje i te ciekawe, wciągające efekty parallaksy, a przy tym niczego nie przesadza.
(Informacja dodatkowa: AI Automation Society, w skrócie AIS, to społeczność prowadzona przez autora kanału; Fable 5.1 i Soul to konkurencyjne modele, które testował wcześniej.)
W komentarzach piszecie, że takie strony nie konwertują. Macie rację — ale wszystko zależy od trzech P, o których ciągle mówię: bólu, odbiorcy i obietnicy (po angielsku: pain, person, promise).
Bardzo podoba mi się subtelność tego rozwiązania. Od razu czuć produkt z wyższej półki. Wyczuwasz głębię, nic nie zalewa Cię nadmiarem, a całość wciąż pasuje do Twojej marki i niesie przekaz, który chcesz wyrazić. Podobnie marka luksusowych zegarków: sam ten drobiazg pozwalający przewijać zawartość odróżnia serwis od wszystkiego, co robi w tej branży konkurencja, bo nie wszystko kręci się wokół samej sekcji otwierającej. Wszystkie pokazane witryny są zresztą spójne z marką — nie ma jednego sztywnego szablonu powtarzanego za każdym razem. Za każdym razem wychodzi coś innego.
Wiem, że przeskakuję z przykładu na przykład. Chciałem pokazać, co model potrafi zrobić i jak korzysta ze swobody twórczej i smaku — bo ja mu w gruncie rzeczy tylko powiedziałem: zrób mi kilka stron.
ScrollCraft, czyli skąd bierze się głębia
Jedno łączy wszystkie pokazane realizacje: powstały z użyciem mojego skilla ScrollCraft. Jeśli go jeszcze nie masz, dołącz do mojej darmowej społeczności na Skool — link znajdziesz w opisie filmu. Tam go pobierzesz, a ja bez przerwy go ulepszam, ilekroć dowiaduję się czegoś nowego o projektowaniu z AI.
(Informacja dodatkowa: „skill” to pakiet instrukcji i wiedzy, który model wczytuje przed wykonaniem zadania — w tym wypadku zbiór zasad projektowania stron z animacjami przewijania.)
Ta umiejętność obejmuje nie tylko warstwowanie i zachowanie witryny przy przewijaniu, ale też typografię, odstępy i pozostałe elementy, dzięki którym strona faktycznie dobrze się ogląda w trakcie scrollowania. Największe odkrycie ostatniego czasu: nakładanie warstw daje ogromną głębię. Gołym okiem widać, że tekst leży na innej warstwie niż zdjęcie w tle, tło — na innej niż rower, a rower — na innej niż skały. Właśnie to buduje wrażenie zanurzenia bez przesady. Przynajmniej tak to widzę ja, bo ostatecznie całość sprowadza się do kwestii gustu.
Zauważcie zresztą, że pokazane do tej pory strony należą do zupełnie różnych typów biznesów: agencja contentowa, produkty fizyczne, firma doradcza. Każda ma inny klimat i inną strukturę sekcji — ta akurat ma pasek boczny, czego wcześniej nie widzieliśmy.
Motion graphics: animacja zgrana z muzyką
Poza projektowaniem stron mówię też o motion graphics, na przykład w narzędziu Hyperframes. Obejrzyjcie ten przykład i zwróćcie uwagę na elementy trójwymiarowe oraz na to, że muzyka jest idealnie zgrana z obrazem. Nie będę odtwarzać całości — model zrobił też wersję pionową, więc pokażę kilka sekund.
Oczywiście nie są to materiały szalone i same z siebie internetu nie zdobędą. Ale przeliczcie: dwa prompty i dwadzieścia–trzydzieści minut pracy. Ile czasu i pieniędzy pochłonąłby montażysta? Nieporównywalnie więcej.
Ze 152 GB nagrań do gotowego montażu w 35 minut
Ten przykład jest moim zdaniem jeszcze bardziej szalony. Dla naszego eventu AIS Live mam folder z ponad 100 GB materiału — dokładnie 152 GB nagrań do przejrzenia. Dałem modelowi sam link i jedno polecenie: zrób mi minutowe podsumowanie tego wydarzenia. I popatrzcie, co dostałem.
(Informacja dodatkowa: sizzle reel to krótki, dynamiczny montaż z najmocniejszych momentów wydarzenia, służący promocji.)
Cytaty z materiału:
„Wczoraj wychodziłem z tego cały nakręcony. Gęsia skórka, masa ekscytacji i świetna zabawa.”
„Koszt nie uzasadnia ceny. To cena uzasadnia koszt.”
„Ile jest warte to, co wiesz, i to, co potrafisz?”
„Kultura, jaką mamy w AIS, jest po prostu wyjątkowa.”
Jedyna wpadka: domena. Ten widoczny w materiale adres nie jest prawdziwy. Poza tym jestem wprost zachwycony. Wiem, że część z was popatrzy i machnie ręką: przecież widać błędy montażowe. Ale pomyślcie, co musiało się wydarzyć: model przeszedł przez cały surowy materiał i wymyślił, jak opowiedzieć z niego historię — i moim zdaniem zrobił to naprawdę dobrze. Musiał też przejrzeć nasze logotypy, projekty graficzne, branding, zdjęcia i wszystkie pliki. Wszystko odnalazł i wplotł w montaż. Zajęło mu to 35 minut.
Podejmowałem takie próby z Soulem i Fable 5.1 — nie szło im nawet blisko tak dobrze. Astra po prostu rozumie, o co chodzi, i podchodzi do zadania tak pragmatycznie i logicznie, że dla mnie to kolejny ogromny skok naprzód.
Tandetę zabija inspiracja, nie sam skill
Skoro rozmawiamy o pozbywaniu się projektowej tandery generowanej przez AI — o wejściu na wyższy poziom — to oczywiście pomagają skille z GitHuba, moje czy cudze. Ale najważniejsza jest inspiracja. Bardzo trudno wręczyć modelowi zadanie typu „zrób mi stronę, oto wytyczne marki” i dostać coś, co nie wygląda maszynowo. Trzeba dostarczyć wzorce.
Znajdziesz je na przykład na godly.design: prawdziwe witryny, z których możesz czerpać, albo pojedyncze komponenty — sekcje hero, przyciski CTA, stopki. Dokładnie to samo zrobisz na 21st.dev, gdzie jest mnóstwo wspaniałych rzeczy: hero, elementy interfejsu, formularze, czaty AI, przyciski. Przekazywanie Astra tych fragmentów kodu albo adresów URL ogromnie podnosi jakość wyników. Bo teraz mogę otworzyć dowolną z tych dziesięciu stron i powiedzieć: „ten przycisk jest super, ale podmień go na ten z 21st.dev — lepiej pasuje do marki albo bardziej podoba mi się ta dynamika dookoła”.
Pomocny jest też serwis awwwards.com — mnóstwo nagradzanych realizacji, które można przeglądać według kategorii. To według mnie bardzo ważne, bo sklep internetowy powinien wyglądać inaczej niż strona restauracji czy hotelu, a ta — inaczej niż witryna marki modowej.
(Informacja dodatkowa: mówca ma na myśli Awwwards, znany katalog i konkurs projektów webowych.)
Dwa oblicza tandery AI
Tandera generowana przez modele ma dwie twarze. Pierwsza to rozpoznawalna sztampa: te konkretne przyciski, te konkretne fonty, ten konkretny gradient w tle. Druga to uczucie, że patrzysz na coś stworzonego dla kogoś innego. Siedemdziesięciolatek szukający leków, który zamiast treści przewija trójwymiarowy świat, powie: „to najgorsze, co w życiu widziałem”. A nastolatek kupujący słuchawki, które obracają się na ekranie, pokazują wnętrze i się transformują, pomyśli, że jest świetnie. I tyle w temacie.
Cały przepis: trzy P, inspiracje, iteracje
Zastanów się nad bólem, nad odbiorcą, nad obietnicą. Zastanów się nad stronami, które Cię inspirują. A potem już nie stój Astra nad głową — daj jej działać. Przekaż wytyczne marki, teksty i skill ScrollCraft, żeby powstały te wszystkie fajne rzeczy. I przewijaj witrynę: „to mi nie gra — popraw; to mi nie gra — popraw”. Iterujesz tak w kółko — i właśnie tak się to robi.
To tyle w tym materiale. Mam nadzieję, że czegoś się nauczyliście — jeśli tak, zostawcie łapkę w górę, bardzo mi to pomaga. Jak zawsze dziękuję, że dotrwaliście do końca, i do zobaczenia w następnym filmie.
10 najważniejszych takeaways — z kontekstem zastosowania
1.Jeden dobrze przygotowany prompt potrafi zastąpić dzień pracy
Na czym polega: wszystkie strony z filmu — łącznie z witryną społeczności autora — powstały za jednym zamachem, bez iteracji. Pierwsze podejście Astry od razu wyglądało „na markę”.
Jak stosować: zanim napiszesz prompt, przygotuj komplet materiałów: wytyczne marki, finalne teksty i referencje wizualne. Model z pełnym zestawem informacji oddaje znacznie lepszy pierwszy szkic.
Na co uważać: pierwszy wynik traktuj jako punkt wyjścia, nie produkt końcowy — najlepszą wersję autor uzyskał dopiero po kilkunastu poprawkach.
2.Głębia bierze się z warstw, nie z efektów specjalnych
Na czym polega: rozdzielenie tekstu, tła i obiektów na niezależne warstwy buduje wrażenie zanurzenia, które nie przytłacza.
Jak stosować: w prompcie lub skillu każ modelowi traktować te elementy jako osobne płaszczyzny i animować je niezależnie od siebie.
Na co uważać: nadmiar ruchu zabija czytelność — po każdej iteracji sprawdzaj, czy sekcja otwierająca wciąż jest czysta i czy główne przekazy dają się na niej umieścić.
3.Zamknij zasady designu w skillu i stale go aktualizuj
Na czym polega: wiedza o warstwowaniu, typografii i odstępach wpisana w skill (tu: ScrollCraft) sprawia, że wyniki są spójne między projektami, mimo że każdy wygląda inaczej.
Jak stosować: zbieraj sprawdzone skille z GitHuba, własne rozszerzaj po każdym projekcie; skill autora jest dostępny w jego darmowej społeczności na Skool.
Na co uważać: skill nie zastąpi decyzji smakowych — to narzędzie porządkujące wiedzę, a nie wyrocznia estetyczna.
4.Oceniaj konwersję przez trzy P, nie przez wygląd
Na czym polega: autor przyznaje wprost, że efektowne strony nie zawsze konwertują; o skuteczności decydują ból (problem klienta), odbiorca i obietnica.
Jak stosować: przed akceptacją projektu odpowiedz na trzy pytania: jaki problem rozwiązuję, do kogo mówię i co obiecuję — dopiero potem oceniaj formę.
Na co uważać: kieruj się realnym odbiorcą, a nie własnym gustem; subtelna strona dla seniora sprawdzi się lepiej niż trójwymiarowy spektakl.
5.Karm model inspiracją z banków komponentów
Na czym polega: gołe polecenie „zrób stronę” kończy się rozpoznawalną sztampą; adresy URL i fragmenty kodu z godly.design czy 21st.dev wyraźnie podnoszą jakość.
Jak stosować: zbierz referencje przed generowaniem, a potem podmieniaj pojedyncze elementy konkretnym językiem: „ten przycisk, ale w wersji z 21st.dev”.
Na co uważać: inspiracja to punkt wyjścia, nie szablon do sklejania — kopiowanie całości komponent po komponencie odtwarza problem, który chcesz rozwiązać.
6.Dopasuj styl do branży jeszcze przed briefem
Na czym polega: autor przeglądał nagradzane realizacje na Awwwards według kategorii, bo e-commerce, gastronomia i moda rządzą się różnymi konwencjami.
Jak stosować: wybierz 3–5 witryn z własnej branży jako referencje i przekaż je modelowi razem z wytycznymi marki.
Na co uważać: uniwersalny styl „premium” nie istnieje — to, co eleganckie w modzie, może odstraszać na stronie medycznej.
7.Tandera ma dwie twarze: sztampę i nietrafienie w odbiorcę
Na czym polega: oprócz powtarzalnych fontów i gradientów problemem jest strona „dla kogoś innego”, która nie pasuje do swojej grupy docelowej.
Jak stosować: przed publikacją zrób prosty test — pokaż projekt komuś z grupy docelowej i obserwuj, czy forma pomaga, czy przeszkadza w docieraniu do treści.
Na co uważać: nowoczesna forma to nie automatycznie wada — kryterium jest odbiorca, nie aktualna moda.
8.Model zmontuje wideo z surowego materiału za Ciebie
Na czym polega: po dostaniu samego linku do 152 GB nagrań Astra wybrała ujęcia i cytaty, odnalazła logo i branding, a w 35 minut złożyła minutowe podsumowanie eventu.
Jak stosować: zapewnij modelowi dostęp do uporządkowanego folderu (nagrania, logo, pliki marki) i opisz jednym zdaniem cel oraz długość materiału.
Na co uważać: wynik traktuj jak wersję roboczą — korekty będą wymagały detale typu nieprawdziwe domeny, drobne błędy montażu czy dobór wypowiedzi.
9.Motion graphics jako tani materiał testowy
Na czym polega: dwa prompty i 20–30 minut wystarczyły na animację 3D zsynchronizowaną z muzyką, od razu w wersji poziomej i pionowej.
Jak stosować: używaj takich szybkich animacji do testowania komunikatów i formatów (poziomy i pionowy) bez angażowania montażysty.
Na co uważać: to materiały poglądowe — nie licz, że zdobędą internet; finalne kampanie wciąż wymagają człowieka.
10.Pracuj krótką pętlą poprawek
Na czym polega: finalna metoda autora to przewijanie strony i zgłaszanie pojedynczych korekt — najlepsze efekty wyszły po około piętnastu iteracjach.
Jak stosować: oceniaj witrynę tak jak użytkownik, czyli przewijając, i każdą uwagę formułuj precyzyjnie: konkretny element plus kierunek zmiany.
Na co uważać: iteruj pojedyncze elementy, a nie całość od zera — inaczej stracisz spójność zbudowaną we wcześniejszych krokach.