O czym jest ten film
- Claude potrafi budować piękne strony, ale większość efektów jest słaba — nie z winy użytkownika, lecz braku odpowiednich „umiejętności” i wiedzy dostarczonej modelowi.
- Autor przedstawia siedem poziomów budowania stron w Claude Code — każdy kolejny znacząco podnosi jakość efektu.
- Poziom 1 to traktowanie Claude jak zwykłego chatbota („zbuduj mi stronę“) — efekt najbardziej podstawowy.
- Poziom 2 to dostarczanie zrzutów ekranu i referencji wizualnych zamiast opisów słownych.
- Poziom 3 to dodanie „skills“ — gotowych pakietów instrukcji projektowych, które uczą model zasad dobrego designu.
- Poziom 4 to generowanie obrazów i wideo (np. przez OpenArt, także programowo przez MCP).
- Poziom 5 to „UI snapping“ — wklejanie gotowych, publicznie dostępnych komponentów z bibliotek jak 21st.dev czy Magic UI.
- Poziom 6 to dane — badanie, co realnie konwertuje odwiedzających w klientów, m.in. przez scraper Firecrawl.
- Poziom 7 to „design extraction“ — wydobywanie tożsamości projektowej z istniejącej, świetnej strony i podniesienie jej na wyższy poziom.
- Wszystkie zasady działają niezależnie od modelu — model (tu Fable 5) jest mnożnikiem jakości, a nie jej źródłem.
Redakcyjne tłumaczenie
Dlaczego strony z Claude bywają słabe
Claude Code buduje piękne strony internetowe. Problem w tym, że jakieś 95% z nich to kompletny bubel. I to nie jest wina użytkownika — to kwestia tego, że Claude nie dostał odpowiednich umiejętności ani wiedzy. To trochę tak, jakby dać Mozartowi kompozytora bez fortepianu.
W tym materiale omówię siedem poziomów budowania pięknych stron w Claude Code: jak sprawić, żeby wyglądały oszałamiająco, jak osiągać to za każdym razem, jakich wielkich błędów unikać oraz jak awansować na kolejny poziom. Chodzi o prosty, powtarzalny system, który zbuduje ci ładną stronę, nawet jeśli nigdy wcześniej się tym nie zajmowałeś.
Mam na imię Jack. Zbudowałem i sprzedałem swój poprzedni startup technologiczny, a teraz buduję własne startupy AI i dzielę się tutaj tym, co faktycznie działa.
Mamy siedem poziomów. Każdy jest wart więcej niż poprzedni, a zasady kumulują się i wzmacniają w miarę wspinania się w górę. Ale zaczynamy od fundamentów.
Poziom 1 — „chwyć i idź“
Fundamentem jest poziom pierwszy, który nazywam „grab and go“ — chwyć i idź. Użytkownik wchodzi do Claude i traktuje go jak chatbota. Mówi coś w stylu: „Cześć Claude, zbuduj mi ładnie wyglądającą stronę o żółtych iPhone’ach“. Po prostu: „Claude, zbuduj mi stronę“.
Problem polega na tym, że to jest używanie Claude jak zwykłego chatbota. Jakość projektu to jakieś 3 na 100. To jak zawołać projektanta do remontu pokoju i powiedzieć tylko: „Zrób, żeby wyglądało ładnie“. Większość ludzi używa Claude właśnie w ten sposób — i to jest w porządku, bo to dopiero poziom pierwszy.
I tak dostajemy pierwszą stronę: unoszący się iPhone, niewiele kreatywności, bardzo prosto. Ma ten klasyczny „aiowy“ wygląd. Zrobiłaby swoje, ale to najbardziej podstawowa rzecz, jaka jest możliwa. To wszystko zbudowane samym Opusem 4.8 — czyli mocnym modelem — a mimo to jest to tylko bardzo surowy pierwszy szkic.
(Informacja dodatkowa: autor podkreśla, że nawet najlepszy model przy złym sposobie proszenia daje słaby efekt — jakość zależy od metody, nie tylko od siły modelu.)
Poziom 2 — zrzuty ekranu i referencje
Poziom drugi rozwiązujemy, podając modelowi zrzuty ekranu i przykłady referencyjne. Wyobraź sobie, że zamiast mówić projektantowi „zrób ładnie“, pokazujesz mu kartkę i mówisz: „Widziałem to mieszkanie po drugiej stronie ulicy, podoba mi się ich ogród — możemy zrobić coś podobnego?“.
To zasada „pokazuj, nie opowiadaj“. Obraz wart tysiąca słów — w projektowaniu z Claude to również prawda. Jakość projektu na tym poziomie to około 10 na 100, ale różnica jest ogromna.
Warto sięgnąć po serwisy: Godly (godly.io), Landbook, strony z nagrodami (awwwards) oraz Dribbble. To zbiory pięknych, często nagradzanych stron. Możesz wyszukać na przykład dashboardy i dostajesz mnóstwo świetnych referencji. Podoba ci się praca konkretnego studia (autor wspomina Halo Lab)? Klikasz, tworzysz moodboard, kopiujesz obraz, wracasz do Claude i wrzucasz go do czatu.
Następnie mówisz: „Chciałbym, żebyś zaktualizował stronę, używając tego obrazu jako referencji stylu“. Claude analizuje obraz i zaczyna budować w tym kierunku. Oczywiście takiej strony byś jeszcze nie opublikował — ale na poziomie drugim ludzie zaczynają realnie wpływać obrazami na architekturę projektu.
Poziom 3 — umiejętności (skills)
To jeden z największych skoków na wczesnych poziomach. Mamy już projektanta w pokoju, daliśmy mu obrazy i referencje — ale skills decydują o tym, jak dobry jest sam artysta. Czy siedzi w kącie i je kredki, czy tworzy dzieła, które trafią do muzeów.
Skills to prepakowane zestawy instrukcji przygotowane przez ekspertów i „nerdów od designu“. Instruują naszego Mozarta, jak grać na fortepianie: jak dokładnie tworzy się dobry projekt, jak strona powinna wyglądać, a jak wyglądać nie powinna. Łączymy surową inteligencję modelu z tymi bardzo dobrymi instrukcjami.
Skills są zarządzane na GitHubie (Informacja dodatkowa: GitHub to serwis do przechowywania i udostępniania plików, tu — repozytoriów z kodem). Ludzie, którym zależy na projektowaniu, przetestowali, co działa, i skodyfikowali to w skille. Autor wymienia m.in.:
- Front end design — popularny skill (autor wspomina o niemal 100 000 gwiazdek; sama liczba nie przesądza o jakości, ale to solidny sygnał).
- UI/UX Pro Max — bogaty skill z 67 stylami UI, 161 paletami kolorów, parami fontów i mnóstwem przykładów.
- shadcn/ui — bardzo dobry system komponentów.
- Power design — skill autora oparty na jego researchu o tym, co czyni projekt świetnym (pierwotnie do slajdów, ale działa też dla stron).
Sposób dodania: klikasz przycisk „Code“, kopiujesz URL repozytorium, wracasz do Claude Code i mówisz: „Sprawdź ten skill, pobierz go i dodaj do swoich skills“. Claude wchodzi do repozytorium, pobiera informacje i zamienia je w skill, który później aktywujesz.
Potem uruchamiamy test: „Chciałbym, żebyś użył wszystkich najlepszych skills i zasad projektowych, aby zbudować piękną stronę sprzedającą żółte iPhone’y — korzystaj ze wszystkich odpowiednich skills“. Dla pewności można dorzucić jeszcze zrzut ekranu z przykładem dobrego designu.
Efekt poziomu trzeciego od razu widać: pojawia się logo Apple, spójna paleta kolorów, font bardziej „telefoniczny“, unoszący się iPhone, styl Bento Box, elementy wprost z estetyki strony Apple. Wciąż dużo bym zmienił i nie jest to ideał, ale kierunek jest wyraźnie właściwy — różne odcienie żółci, sekcje, możliwość zakupu.
(Informacja dodatkowa: autor odsyła tu do swoich płatnych kursów — „Hermes Agentic Masterclass“ i „Claude Code Agentic Masterclass“ — obejmujących konfigurację, systemy pamięci, projektowe i monetyzację.)
Poziom 4 — obraz i wideo
Gdy chcemy wynieść stronę wyżej, musimy myśleć o czymś więcej niż tekst i grafika — o obrazie i wideo. To jak dać naszemu artyście nowe narzędzia, dodać do jego środowiska rzeczy, których wcześniej po prostu nie miał.
Autor poleca tu OpenArt. Można w nim generować obrazy — np. na potrzeby strony stworzyć żółtego iPhone’a. Wybierasz model (autor używa „Nano Banana 2“), wpisujesz opis, ustawiasz proporcje (np. 21:9, panorama) i rozdzielczość — 2K w zupełności wystarczy, 4K jest zbędne, a 1K za mało. Zwykle warto wygenerować od dwóch do czterech wariantów.
Kluczowy unlock poziomu czwartego: możesz połączyć Claude Code z generatorami obrazów przez MCP. Wtedy mówisz raz: „Zbuduj mi tę stronę i wygeneruj do niej pasujące, piękne obrazy“, a Claude programowo tworzy wszystkie potrzebne assety. (Informacja dodatkowa: MCP — Model Context Protocol — to standard, dzięki któremu model może korzystać z zewnętrznych narzędzi i usług.)
Obrazy można też dopracowywać — np. usunąć tło i uzyskać białe, dobrać warianty i wkleić gotowy plik do projektu. Autor pokazuje wcześniejsze realizacje z obrazem i wideo, w tym stronę „rakietową“ zbudowaną z użyciem Fable 5. Podkreśla przy tym, że te zasady działają niezależnie od modelu — model jest mnożnikiem, akceleratorem, a nie źródłem jakości.
OpenArt pozwala też tworzyć wideo. Autor bierze wygenerowanego iPhone’a jako klatkę startową i prosi: „To jest ujęcie produktowe, obróć ten telefon w wideo“. Włącza wzmocniony prompt (enhanced prompt), generuje kilka wariantów, ustawia proporcje 16:9, długość i rozmiar, a tę samą klatkę ustawia jako końcową, żeby ujęcie się domykało. Efekt: telefon ląduje dokładnie w tym samym miejscu — coś, co zwykle wymaga mnóstwa żmudnej roboty, tu wychodzi bezbłędnie. I to wszystko da się zrobić bezpośrednio z poziomu Claude.
Poziom 5 — UI snapping (wklejanie gotowych komponentów)
Poziom piąty to trik, którego większość ludzi nie zna, a poważnie podnosi jakość każdej strony: UI snapping. Wyobraź sobie jubilera-projektanta, który wchodzi do dowolnego wnętrza, mówi „podoba mi się ten kominek“ i po prostu kopiuje go idealnie do twojego środowiska.
W internecie istnieją biblioteki publicznie udostępnianych komponentów — gotowych fragmentów kodu. Dzięki nim nie musisz wynajdywać koła na nowo: kopiujesz komponent i wklejasz. Autor wymienia: 21st.dev, CodePen, Magic UI oraz Mobbin.
Na 21st.dev warto zaglądać do sekcji „Featured“ i „Latest components“ — tam są zwykle najlepsze rzeczy: paski narzędzi, przyciski boczne, animowane balony i wiele innych. Bierzemy np. komponent „launch balloons“, klikamy „copy code“, wracamy do Claude i mówimy: „Zintegruj tę funkcję z balonami na dole strony“ — podając adres URL. Claude wpina komponent w stronę i balony pojawiają się na dole. Efektowne i szybkie.
Poziom 6 — dane
Cała ta uroda nic nie znaczy, jeśli nie masz opanowanego poziomu szóstego, czyli danych. Strony istnieją po coś: mają pozyskać klienta albo skłonić kogoś do konkretnego działania. Piękna strona, która nie zamienia widzów w kupujących, to jak Ferrari bez silnika — świetnie wygląda przed domem, ale nic nie robi.
Dobra wiadomość: dane potrzebne do stworzenia strony, która konwertuje, już istnieją — trzeba je tylko umieć znaleźć. Autor używa do tego Firecrawl — najlepszego scrapera, jaki znalazł. Potrafi pobrać logo, typografię, praktycznie wszystko. (Informacja dodatkowa: scraper to narzędzie automatycznie pobierające dane ze stron internetowych.)
Przykład: „Wejdź na apple.com przez moją integrację z Firecrawl, pobierz tożsamość marki i zaktualizuj tę stronę zgodnie z nią“. Firecrawl wyciąga tożsamość marki z dowolnej strony — schemat kolorów, użyte fonty.
Jeszcze potężniejsze są prompty badawcze. Autor podaje wzór: „Uruchamiam firmę dekarską w Leeds. Znajdź w sieci 10 najskuteczniejszych firm dekarskich w Londynie i 10 takich, którym idzie słabo. Zrób kompleksowy research: co mają wygrywający, czego nie mają przegrywający? Co ich łączy? Jaki jest układ strony — czy zawsze jest obraz, a potem CTA? Jakie jest CTA? Zbuduj macierz oceny, co jest dobrą stroną, a co nie. Na końcu chcę jasny blueprint, który przekażę innemu modelowi, żeby stworzył zwycięską formułę. Wszystko musi być poparte dowodami, a w razie potrzeby zweryfikuj to innym modelem. Do researchu użyj Firecrawl MCP“.
Wystarczy powiedzieć to Claude, a model przynosi dane. Autor, który prowadził biznesy z ok. 50 000 unikalnych odwiedzających miesięcznie, podkreśla: trzeba rozumieć, co konwertuje, a co nie. Strony poziomu szóstego korzystają z zewnętrznych danych — nie po to, by kopiować, lecz by budować w oparciu o dowody.
Poziom 7 — design extraction (wydobywanie projektu)
To najmocniejszy poziom. Najlepsza strategia tworzenia pięknych stron, które konwertują, to design extraction. Wyobraź sobie, że nie tylko masz narzędzia, skille, wyobraźnię i obrazy, ale możesz też porozmawiać z pierwotnym twórcą — architektem świetnej strony, która ci się podoba.
Rzecz w tym, że ani Claude, ani często my sami nie potrafimy nazwać, co czyni projekt świetnym. Nie każdy ma słownictwo, by powiedzieć „chcę dużo światła“ albo „między tym tekstem a tym powinien być złoty podział“. Te reguły da się skodyfikować, ale trudno je wyartykułować.
Przykład: strona Antigravity od Google. Zdaniem autora to genialna strona — jedna strona, jedna myśl, interaktywna, ale nierozpraszająca; w miarę przewijania pojawiają się animacje, wideo, wszystko jest wyraziste i czyste. Może masz produkt technologiczny i lubisz ten „vibe“ — nie chcesz nic kopiować, ale chcesz, żeby model zrozumiał, o co chodzi.
Rozwiązanie: prosimy Claude, żeby wyekstrahował tożsamość projektową — typografię, kolory, ogólne reguły designu. Autor zbudował do tego dedykowany skill („design blueprint extractor“) w swojej społeczności. Jeśli go nie masz, najprościej wyjaśnić Claude to samo: „Stwórz blueprint i zweryfikuj go, żebym mógł zbudować, co potrzebuję“.
By pokazać pełnię możliwości, autor przełącza się na Fable 5 (czyli Claude 5). Model początkowo nie był dostępny na liście — po restarcie instancji pojawia się. Prompt brzmi mniej więcej: „Dam ci stronę. Chcę zrozumieć jej projekt — postępuj według instrukcji w tym pliku: wejdź na stronę, przeanalizuj typografię i design, przygotuj blueprint ekstrakcji, żebym mógł zbudować stronę, która to podniesie na wyższy poziom. Moja strona będzie o sprzedaży pięknych telefonów“. Wklejamy adres strony i gotowe.
Efekt to przepaść względem wcześniejszych wersji — dosłownie dzień i noc. Strona dostała nazwę, dynamicznie zmieniający kolor „orb“, piękny tekst, subtelne rozwiązania. „Pięć telefonów, żadnej złej odpowiedzi“. Jakość jest imponująca — a to wszystko w jednym podejściu (one shot), dokładnie według pokazanego systemu.
To zaledwie ułamek tego, co można zrobić z Fable 5.
10 najważniejszych takeaways — z kontekstem zastosowania
1.Metoda proszenia liczy się bardziej niż sam model
Na czym polega: Nawet mocny model (Opus 4.8) proszony jak chatbot daje słaby projekt. Jakość zależy od tego, ile kontekstu i „umiejętności“ dostarczysz, a nie tylko od siły modelu.
Jak stosować: Traktuj każdy z siedmiu poziomów jako warstwę do dołożenia: referencje → skille → media → komponenty → dane → ekstrakcja projektu. Zamiast liczyć na lepszy model, dokładaj warstwy.
Na co uważać: Nie myl mocy modelu z jakością efektu. Sam „upgrade“ do Fable 5 bez metody wciąż da przeciętną stronę — model jest mnożnikiem, nie substytutem procesu.
2.Pokazuj referencje wizualne zamiast opisów
Na czym polega: Zrzuty ekranu i przykłady z Godly, Landbook, Awwwards czy Dribbble mówią modelowi więcej niż akapit opisu.
Jak stosować: Zbuduj moodboard z 2–4 stron, które lubisz, wklej obrazy do czatu i poproś o użycie ich jako referencji stylu, nie o kopiowanie.
Na co uważać: Referencja to inspiracja, nie szablon do przepisania — kopiowanie cudzej strony grozi problemami prawnymi i brakiem oryginalności. Pierwszy efekt z referencji nadal będzie surowy.
3.Dodawaj skille projektowe do Claude Code
Na czym polega: Skille to gotowe pakiety instrukcji (np. „front end design“, „UI/UX Pro Max“, shadcn/ui, „power design“), które uczą model konkretnych zasad dobrego designu.
Jak stosować: Skopiuj URL repozytorium z GitHuba, poproś Claude o sprawdzenie i dodanie skilla, a przy generowaniu wyraźnie każ „użyć wszystkich odpowiednich skills“.
Na co uważać: Liczba gwiazdek na GitHubie nie gwarantuje jakości — sam autor to zaznacza. Zweryfikuj skill przed użyciem i sprawdź, czy pasuje do twojego typu strony.
4.Generuj obrazy i wideo jako assety strony
Na czym polega: Poziom czwarty dodaje realne media (np. przez OpenArt) — obrazy produktowe, a nawet animacje z domykającą się klatką startową i końcową.
Jak stosować: Generuj 2–4 warianty, wybieraj rozdzielczość 2K (nie 4K), dobieraj proporcje pod miejsce na stronie i dopracowuj tło. Do wideo używaj tej samej klatki jako start i koniec, by ujęcie się zapętlało.
Na co uważać: 1K to za mało, 4K to zwykle marnowanie zasobów. Nadmiar generowanych mediów spowalnia stronę — dobieraj tylko to, co realnie służy przekazowi.
5.Połącz generator obrazów przez MCP dla automatyzacji
Na czym polega: Po podpięciu generatora przez MCP Claude może programowo tworzyć wszystkie potrzebne obrazy jednym poleceniem.
Jak stosować: Skonfiguruj integrację MCP raz, a potem proś: „zbuduj stronę i wygeneruj pasujące obrazy“ — model wypełni assety sam.
Na co uważać: Integracje MCP dają modelowi realny dostęp do zewnętrznych usług i kosztów generowania. Kontroluj, ile assetów tworzy, i sprawdzaj ich trafność, zanim trafią na produkcję.
6.Wklejaj gotowe komponenty UI („UI snapping“)
Na czym polega: Publiczne biblioteki (21st.dev, CodePen, Magic UI, Mobbin) oferują gotowe fragmenty kodu, które kopiujesz i wpinasz zamiast budować od zera.
Jak stosować: Szukaj w sekcjach „Featured“/„Latest“, kopiuj kod lub podawaj URL komponentu i proś Claude o zintegrowanie go w konkretnym miejscu strony.
Na co uważać: Sprawdzaj licencję komponentu przed użyciem komercyjnym. Wklejony element musi spójnie wyglądać z resztą strony — czasem wymaga dostrojenia stylu.
7.Zdobądź dane o tym, co konwertuje
Na czym polega: Piękna strona bez konwersji to „Ferrari bez silnika“. Poziom szósty opiera projekt na danych o skutecznych i nieskutecznych stronach z branży.
Jak stosować: Użyj Firecrawl (MCP), by porównać liderów i maruderów w niszy: układ, obecność i treść CTA, kolejność sekcji. Poproś o macierz oceny i blueprint do przekazania innemu modelowi.
Na co uważać: Chodzi o analizę wzorców, nie o kopiowanie konkretnych stron. Wymagaj, by wnioski były poparte dowodami i w razie potrzeby zweryfikowane innym modelem.
8.Wyciągaj tożsamość marki z istniejących stron
Na czym polega: Firecrawl potrafi wyekstrahować z dowolnej strony schemat kolorów, typografię i elementy identyfikacji marki.
Jak stosować: Poproś o pobranie brand identity ze strony wzorcowej i zaktualizowanie projektu zgodnie z nią, gdy chcesz spójności wizualnej z konkretnym stylem.
Na co uważać: Ekstrakcja kolorów i fontów cudzej marki to inspiracja, nie prawo do jej odtworzenia — nie podszywaj się pod cudzą identyfikację wizualną.
9.Stosuj „design extraction“ jako najmocniejszą strategię
Na czym polega: Zamiast opisywać słowami, czego nie umiesz nazwać, prosisz model o wyekstrahowanie reguł projektowych (typografia, kolory, zasady) ze strony, która ci imponuje, i podniesienie ich na wyższy poziom.
Jak stosować: Wskaż wzorcową stronę, poproś o „blueprint ekstrakcji“ z weryfikacją, a potem zbuduj na jego podstawie własną stronę o swoim temacie. Dobrze sprawdza się z Fable 5 w jednym podejściu.
Na co uważać: Cel to zrozumienie „vibe’u“ i zasad, nie klonowanie oryginału. Blueprint zweryfikuj, zanim zbudujesz z niego finalną stronę.
10.Buduj warstwowo — poziomy się kumulują
Na czym polega: Siedem poziomów nie wyklucza się nawzajem; najlepsze strony łączą referencje, skille, media, komponenty, dane i ekstrakcję projektu jednocześnie.
Jak stosować: Zacznij od fundamentów i dokładaj kolejne warstwy w miarę wzrostu ambicji projektu. Traktuj listę jako checklistę dojrzałości procesu, nie jako pojedynczy wybór.
Na co uważać: Przeskakiwanie wprost na poziom 7 bez opanowania podstaw (referencji, skilli, danych) daje efekt mniej powtarzalny. Buduj system, który da się odtworzyć, a nie jednorazowy sukces.