O czym jest ten film
- ChatGPT‑6 Astra w duecie z nowym modelem obrazów GPT Image 2.5 pozwala budować dopracowane strony — dopasowane do każdego ekranu, z grafikami, wideo i edytowalną treścią.
- Poziom 1: o jakości projektu decydują referencje. Autor pokazuje serwery z inspiracjami, z których składa się tablicę nastrojów.
- Kluczowy krok przygotowawczy to zapisanie autorskiej umiejętności „pętli projektowej” w ChatGPT i uruchomienie budowy w Codexie — m.in. przez narzędzie Glider.
- Wtyczka Higgsfield daje w ChatGPT dostęp do czołowych modeli obrazu i wideo, z poprawkami (np. zmiana koloru) i wariantami.
- Poziom 2: pętla projektowa, w której wielu agentów ocenia i poprawia projekt, aż wygląda dobrze na desktopie, tablecie i telefonie.
- Statyczne obrazy warto zastąpić krótkimi, zapętlonymi animacjami tworzonymi z klatki początkowej i końcowej.
- Poziom 3: „system operacyjny strony” — podgląd na urządzeniach, design system oraz edycja tekstów i grafik bez proszenia ChatGPT, czyli bez ponownego spalania tokenów.
- Dwa praktyczne triki: „UI sniping” (podmiana komponentów gotowcami z 21st.dev) i regeneracja pojedynczych grafik bez ruszania reszty układu.
- „Slop monster” — darmowe repozytorium do wykrywania sztampy AI w tekstach (słownictwo, konstrukcje, rytm) oraz moduł SEO do metadanych strony.
- Wątek biznesowy: ze społeczności pochodzi przypadek sprzedaży strony za 18 500 dolarów z abonamentem 350 dolarów — plus pomysł, by część edycji oddać samemu klientowi.
Redakcyjne tłumaczenie
Wstęp: pięć ulepszeń, trzy poziomy
Dzięki nowym możliwościom ChatGPT‑6 Astra i świeżemu modelowi obrazów — GPT Image 2.5 — można dziś budować naprawdę ładne witryny, dobrze wyglądające na każdym ekranie: od telefonu po monitor. W tym materiale pokażę, jak krok po kroku dojść do strony klasy premium — z edytowalnymi tekstami, dopracowanymi grafikami, optymalizacją SEO i całą obsługą we własnym „systemie operacyjnym witryny”.
Całość opiera się na pięciu ulepszeniach: budowaniu ładnych stron, dopracowaniu każdego ekranu, najlepszej dostępnej technologii obrazów, likwidacji „slopu” (Informacja dodatkowa: slop — żargonowe określenie wtórnych, bezmyślnych treści generowanych maszynowo) i pracy w systemie operacyjnym. Ułożymy to w trzy poziomy trudności. Nawet jeśli dotąd nie miałeś nic wspólnego ze stronami internetowymi, na koniec będziesz wiedzieć, jak powstać witrynę, za którą klient naprawdę zechce zapłacić.
Poziom 1: jakość strony zaczyna się od referencji
Ostateczny projekt będzie dokładnie tak dobry, jak przykłady i obrazy, którymi nakarmimy model. Chcesz uzyskiwać lepsze rezultaty niż inni? Sięgnij po lepsze wzorce.
Godne polecenia źródła inspiracji:
- Savee — zestawienie projektowe układane przez samych grafików;
- inspo.design — niszowe, wciąż mało znane źródło ładnych projektów i grafik;
- post.design — podobny charakter, nieco inny klimat;
- Refero Designs — klasyka gatunku: pełne „rozbicia” tożsamości wizualnej witryn, które można wprost odtworzyć we własnym projekcie;
- serwis świetny do ekranów aplikacji (w transkrypcji „Min”);
- recent.design — bardziej niszowy, odważniejszy;
- superhero.io;
- witryna poświęcona projektowaniu z myślą o telefonach — bo zdecydowana większość odwiedzających trafi na stronę właśnie z komórki;
- osobne serwisy z przykładami przycisków CTA i gotowych komponentów.
(Informacja dodatkowa: nazwy serwisów pochodzą z automatycznej transkrypcji i mogły zostać zniekształcone; linki autor podrzuca w opisie filmu.)
Zadanie jest proste: robimy tablicę inspiracji — mood board — z projektów, które chcemy przenieść na własną stronę.
Umiejętność „pętli projektowej” zapisana w ChatGPT
Zanim opiszemy wymarzoną witrynę, musimy wgrać do ChatGPT autorską umiejętność — tzw. skill — „pętli projektowej”. To drugi link w opisie, w sejfie autora. Schemat jest banalny: kopiujemy treść umiejętności, wklejamy do Astry i prosimy: „zapisz to jako umiejętność”. Od tej chwili całe budowanie stron opiera się na znacznie sprawniejszej technice.
Przykład działania: podoba mi się strona Wise — fintechu o rozpoznawalnej, dopracowanej identyfikacji. Klikam, kopiuję i wklejam referencję do Codexu. (Informacja dodatkowa: Codex to agentskie środowisko OpenAI do tworzenia i edycji kodu.) Można też krócej — przez Glider: „użyj mojej umiejętności pętli projektowej i zbuduj dla Jackai, firmy sprzedającej strony, piękną witrynę w tym stylu. Stwórz ją w Codexie”. Glider to narzędzie, z którego korzystam, żeby odpalać zadania w dowolnym miejscu — jedno polecenie wystarczy, a w Codexie rusza cały proces: sam układa sobie własny prompt i zaczyna pracę. I od razu zapowiadam: gdy dojdziemy do poziomu trzeciego i systemu operacyjnego witryny, zrozumiesz, dlaczego to najważniejszy element całej układanki.
Higgsfield: grafiki i wideo z poziomu rozmowy
Kolejny warunek: Astra musi umieć tworzyć unikalne obrazy i wideo. Wchodzimy w ustawienia, wybieramy wtyczki, klikamy „przeglądaj katalog” i wyszukujemy Higgsfield. Dorzucamy wtyczkę plusem, przechodzimy przez „Continue to Higgsfield”, a na otwartej stronie zatwierdzamy dostęp („Allow”).
Szczera uwaga autora: teoretycznie obrazy da się generować w ChatGPT‑6 przez Codex, ale nie udało mu się potwierdzić, że pracuje tam model GPT Image 2.5. Dlatego grafiki — a wideo i tak obowiązkowo — przerzuca do Higgsfield. (Informacja dodatkowa: Higgsfield to platforma udostępniająca czołowe modele generowania obrazów i wideo; wtyczka pozwala nią sterować bez wychodzenia z ChatGPT.)
Wszystkie zasoby zaprojektowane w rozmowie automatycznie lądują w serwisie. Przykład: model narysował ładną kulę ziemską — wystarczy jedno polecenie, żeby zamienić ją w animowane wideo. Kolor nie gra? Klikamy zasób, wybieramy „reference” i prosimy, by niebieski został czerwony. Następnie bierzemy wariant „2.5 Sunburst” dla najwyższej jakości, ustawiamy dwie wersje i generujemy. Takie poprawki można potem wykonywać programistycznie — po prostu rozmawiając z ChatGPT — i od razu osadzać efekty w stronie.
A jeśli te nazwy brzmią dla ciebie jak hiszpański: autor zapowiada pełny kurs „od zera do AI” z Astrą — fundamenty, produktywność, skalowanie biznesu, marketing, tworzenie treści, automatyzacje i agenci, a także dostęp do autorskiego „Agentic OS”, systemów pamięci i agenta Hermes.
Poziom 2: pętla projektowa, czyli agenci spierają się o szczegóły
W ChatGPT uruchamia się zamknięty cykl: model dostaje referencję — na przykład tę ładną witrynę Wise — po czym tworzy wielu agentów, które spierają się między sobą, aż powstanie efekt naprawdę nam odpowiadający. Z jednego zdjęcia produktu można wyciągnąć dziesiątki wariantów: od generycznego slopu, którego nikt nie chce oglądać, do projektu, który prezentuje się świetnie na każdym ekranie — desktopie, tablecie i telefonie.
Autor pokazuje efekt: witryna utrzymana w stylu Wise. Kulę ziemską wygenerował Higgsfield, a reszta — adnotacje, komponenty, cały układ — powstała dynamicznie. Dalej spacer po stronie: sklep ze stronami i lista klientów do przejrzenia, elegancka animacja przy przewijaniu pod hasłem „brands going places” („dla marek zmierzających w górę”), teksty „Good ideas deserve a brilliant website” („dobre pomysły zasługują na świetną stronę”), sekcja „Big idea. Clear next steps”, hasło „Things are changing. Let’s make your next move” („świat się zmienia — zróbmy twój kolejny krok”). Osobna sekcja „seriously good websites” ma zabawną animację, w której elementy spadają w dół wraz z przewijaniem — coś z charakterem, wyróżniającego się na tle sztampy. Inny fragment zatrzymuje przewijanie i przybliża obraz — inny kąt, inny nastrój. Chodzi o to, by złapać pomysł.
Krótkie pętle zamiast statycznych obrazów
Ciekawostka, którą łatwo przeoczyć: miejsca, gdzie zwykle stoją nieruchome grafiki, autor zastąpił zapętlonymi animacjami. Robi się to w Higgsfield: definiujesz klatkę początkową i końcową, a model płynnie je łączy. Efekt? Krzewy delikatnie kołyszą się w tle, motyl macha skrzydłami, królik świetnie się bawi. Takie mikro‑ruchy wyraźnie podnoszą jakość witryny i nadają jej osobowość — zamiast nijakich obrazków dostajemy coś, co czuć żywym.
Poziom 3: system operacyjny witryny
To krok, który prawie wszyscy pomijają — a potem łapią się za głowę: „co tu się dzieje i jak to edytować, nie wydając fortuny na tokeny?”. Sprawa wygląda tak: jeśli budowa strony pochłonęła choćby 500 tysięcy tokenów, zmiana jednego zdania przez rozmowę z modelem oznacza przejście przez nie od nowa — i pożegnanie z dostępem do Astry. Website OS rozwiązuje ten problem i przy okazji dorzuca cały pakiet możliwości.
Wersja dla społeczności: w kursie Claude Code, na samym dole, pobieramy „system operacyjny Hermes” (przycisk „Download Agentic OS”). Autor swoją edycję zbudował z Astrą — wystarczy kliknąć „Website OS”. Co dostajemy?
Podgląd i design system. Witrynę można obejrzeć na tablecie i telefonie oraz nanosić poprawki. Po prawej stronie ekranu stoi design system — czyli zestaw reguł wizualnych projektu. Paleta kolorów z próbnikiem, typografia, którą od razu widać w działaniu i którą można edytować, łącznie z nagłówkami.
„UI sniping”. Na starcie system podrzucił autorowi paskudny próbnik kolorów. Zamiast się godzić, wszedł na 21st.dev — bibliotekę gotowych komponentów interfejsu — wpisał „color picker”, wybrał element, który mu się podobał, i wkleił go do design systemu. Od tej pory próbnik ma zaokrąglone krawędzie i po prostu dobrze wygląda.
Grafiki regenerowane na miejscu. W sekcji grafik widać wszystkie zasoby witryny wraz z wymiarami — w tym chociażby zdjęcie „herosfery”. Każdy z nich można jednym kliknięciem wygenerować ponownie w Higgsfield, nie ruszając reszty strony: przycisk „regenerate video” tworzy nowy wariant, a stary układ zostaje nietknięty. Edycja grafiki we własnej witrynie, bez przebudowy — to brzmi nieprawdopodobnie, a działa.
Teksty bez proszenia ChatGPT. Kopię strony zmienia się bezpośrednio w systemie. Przykład z filmu: „less watching” jednym ruchem zamienione na „less hearing” — i po sprawie. Zero tokenów, zero czekania na model. Cała treść jest przy tym porządnie poukładana w sekcje: „o nas”, „realizacje”, „metoda”, stopka — nic nie ginie w chaosie.
Slop monster. Autorski moduł zbudowany na najlepszych repozytoriach do „humanizowania” tekstu. Przegląda copy pod kątem śladów AI — sztampowego słownictwa, charakterystycznych konstrukcji, interpunkcji, kadencji i rytmu zdań — a wszystko, co pachnie maszyną, bezlitośnie wyplenia i wysyła do lamusa. Do tego warstwa marketingowa: kontrole słownictwa i konstrukcji typowych dla modeli. Repozytorium jest darmowe (link w opisie); wystarczy polecić swojemu agentowi, by każdy tekst przepuszczał przez „slop monster”, zanim ujrzy światło dzienne. Opcja „request a fresh rewrite” uruchamia cały system przepisywania od nowa.
SEO. Osobny moduł: przegląd SEO, edycja metadanych — tytuł strony, opis do wyników wyszukiwania — i zapis zmian. Dzięki temu całą witrynę da się w jednym miejscu dopracować pod tablety, desktopy, grafikę i design.
Strony, za które klienci płacą
Na tym poziomie wszystko nabiera wymiaru biznesowego. Ktoś ze społeczności — dosłownie trzy dni wcześniej — sprzedał stronę za 18 500 dolarów z abonamentem 350 dolarów miesięcznie. Autor od razu zastrzega: to nie jest typowy wynik, ale pokazuje, że tymi metodami ludzie rzeczywiście robią dopracowane, sprzedażne projekty.
Najbardziej cieszy go jednak co innego: gotowy system można oddać klientowi. To celowe założenie konstrukcji — nie musisz być na haczyku przy każdej literówce. Klient sam zmieni treść, doda nowe podstrony, a ty rozwiniesz całość w dziesiątkach kierunków. Kluczowa korzyść: można edytować więcej, nie przebudowując wszystkiego od zera.
Na koniec zapowiedź: design systemy to jedno, ale jeśli nie znasz pewnej funkcji w GPT‑6, marnujesz sporą część jej możliwości. W kolejnym materiale autor pokaże, o co chodzi.
10 najważniejszych takeaways — z kontekstem zastosowania
1.Strona jest tak dobra, jak jej referencje
Na czym polega: efekt generowania zależy przede wszystkim od jakości przykładów, które podamy modelowi — nie od samego opisu.
Jak stosować: przed pierwszym promptem zbierz tablicę 5–10 witryn z kuratorskich serwisów (Savee, inspo.design, Refero Designs i podobne) i wklej ją jako kontekst; dopiero potem opisuj własny projekt.
Na co uważać: inspiracja to nie kopiowanie — bierz nastrój, układ i rytm, nie cudze teksty ani logotypy. Nazwy serwisów z automatycznej transkrypcji łatwo pomylić, więc weryfikuj adresy u źródła.
2.Umiejętność „pętli projektowej” zapisujesz raz, używasz stale
Na czym polega: gotowa procedura zapisana jako skill w ChatGPT potrafi sama układać sobie polecenia i prowadzić cały proces budowy witryny.
Jak stosować: skopiuj treść umiejętności (u autora — drugi link w opisie), wklej do Astry z prośbą „zapisz to jako umiejętność”, a potem wywołuj ją nazwą przy każdym projekcie, podając konkretną referencję.
Na co uważać: to zasób autorski i zależy ci na jego aktualności — warto przeczytać prompt i rozumieć, co robi, zamiast wklejać w ciemno.
3.Grafiki i wideo deleguj do Higgsfield przez wtyczkę
Na czym polega: wtyczka w ChatGPT daje dostęp do czołowych modeli obrazu i wideo, a wszystkie wygenerowane zasoby lądują w jednym magazynie, gotowe do osadzenia na stronie.
Jak stosować: ustawienia → wtyczki → katalog → Higgsfield → autoryzacja. Potem proś o assety w rozmowie, poprawiaj przez „reference” (np. zmiana koloru) i wybieraj warianty wyższej jakości.
Na co uważać: sprawdź, który model faktycznie generuje — autor nie zdołał potwierdzić, że w Codexie działa GPT Image 2.5. Pilnuj też limitów i kosztów platformy.
4.Agenci iterują — ty zatwierdzasz kierunek
Na czym polega: pętla projektowa uruchamia wielu agentów, które oceniają i poprawiają projekt, aż będzie spójny na desktopie, tablecie i telefonie.
Jak stosować: podaj jedną wyraźną referencję i pojedyncze zdjęcie produktu; przerywaj iteracje w momencie, gdy ogólny kierunek jest dobry.
Na co uważać: każda iteracja kosztuje tokeny — akceptuj koncepcję wcześnie, a detale szlifuj później, już w systemie edycji, nie w chacie.
5.Statyczne obrazy zamień na krótkie pętle
Na czym polega: animację tworzy się z klatki początkowej i końcowej — model płynnie je łączy i zapętla.
Jak stosować: wybierz 2–3 miejsca na stronie (tła, akcenty), wygeneruj subtelne pętle w Higgsfield i osadź je zamiast nieruchomych grafik.
Na co uważać: ruch ma być ledwie zauważalny. Nadmiar animacji rozprasza, a ciężkie pliki spowalniają witrynę — zwłaszcza na telefonach.
6.Po zbudowaniu strony edytuj ją w systemie, nie w chacie
Na czym polega: zmiana jednego zdania przez rozmowę z modelem może oznaczać ponowne przetworzenie całej witryny — czyli koszt rzędu setek tysięcy tokenów.
Jak stosować: wgraj „Website OS” (wersja społecznościowa do pobrania w kursie Claude Code) i wszystkie poprawki treści, kolorów i typografii wprowadzaj bezpośrednio w jego interfejsie.
Na co uważać: system trzeba najpierw skonfigurować — zainwestuj w to na starcie, zanim oddasz projekt klientowi, bo późniejsze dochodzenie „jak to edytować” kosztuje najwięcej.
7.Brzydki komponent? Podmień go gotowcem
Na czym polega: tzw. „UI sniping” — gdy domyślny element interfejsu jest nieestetyczny, zastępuje się go komponentem z biblioteki takiej jak 21st.dev.
Jak stosować: wpisz nazwę elementu (np. „color picker”), wybierz pasujący wizualnie i wklej do design systemu — jednym ruchem zyskujesz dopracowany detal.
Na co uważać: nowy element musigrać z resztą (zaokrąglenia, font, kolory) i mieć licencję zgodną z komercyjnym użyciem.
8.Regeneruj pojedyncze zasoby, nie całe sekcje
Na czym polega: każdy obraz i wideo witryny ma w systemie własny wpis z wymiarami i przyciskiem regeneracji — nowy wariant powstaje w Higgsfield, a układ strony zostaje nietknięty.
Jak stosować: gdy grafika nie pasuje, użyj „regenerate video” i porównuj warianty na podglądzie, aż trafisz w klimat.
Na co uważać: pilnuj proporcji i kompozycji, żeby świeży zasób nie rozjechał się z siatką i sąsiednimi elementami.
9.Każdy tekst przez „slop monster” przed publikacją
Na czym polega: moduł zbudowany na darmowym repozytorium wykrywa w copy sztampowe słownictwo AI, charakterystyczne konstrukcje, interpunkcję i rytm — i przepisuje tekst na ludzki.
Jak stosować: zapisz jako stałe polecenie dla agenta: „żaden tekst nie ujrzy światła dziennego bez przejścia przez slop monster”, a przy sekcjach używaj opcji świeżego przepisywania.
Na co uważać: automat wygładza język, ale nie zna twojej marki — ostateczny ton, fakty i obietnice weryfikuj ręcznie.
10.SEO i edytowalność domykaj w tym samym narzędziu
Na czym polega: metadane (tytuł, opis wyszukiwania), optymalizacja pod urządzenia i możliwość samodzielnych zmian przez klienta siedzą w jednym panelu obok design systemu.
Jak stosować: po zbudowaniu witryny przejdź przegląd SEO, uzupełnij tytuł i opis, zapisz zmiany — a klientowi przekaż jasny zakres: edycja treści, dodawanie podstron.
Na co uważać: sprzedaż za 18 500 dolarów z abonamentem 350 dolarów to wyjątek, nie reguła — autor sam to podkreśla. Wyceniaj projekt niezależnie od cudzych sukcesów.