O czym jest ten film
- Ładna strona to za mało — żeby sprzedawała, potrzebne są konkretne umiejętności i proces, a nie samo „ładnie wygląda”.
- Poziom 1: znalezienie wzorca — strony nagradzanej i konwertującej w danej niszy, z której wyciągamy „DNA projektu”.
- Poziom 2: struktura — mapa serwisu, wireframe’y i style guide zamiast pojedynczej strony głównej.
- Podłączenie generatora obrazów i wideo do Claude’a, żeby strona miała własne grafiki, logo i animacje.
- Poziom 3: „scroll stopper” — interaktywny element, który zatrzymuje użytkownika i zbiera leada (tu: kalkulator wyceny dachu).
- Poziom 4: optymalizacja mobilna jako obowiązek, nie dodatek — większość ruchu jest z telefonów.
- Poziom 5: walka ze „slopem” — usuwanie charakterystycznych śladów pisania przez AI z tekstów na stronie.
- Psychologia „don’t make me think” i konkret zamiast pustych superlatywów jako fundament copy.
- Poziom 6: „UI sniping” — podbieranie gotowych komponentów i ikon z bibliotek i wklejanie ich do własnego projektu.
- Poziom 7: SEO — checklist, dobór słów kluczowych według wolumenu i trudności, mapa treści, publikacja przez repozytorium i hosting.
Redakcyjne tłumaczenie
Wstęp: ładna strona to jeszcze nie sprzedająca strona
Claude jest dziś najlepszym na świecie agentem projektowym do budowania pięknych stron. Ale to, że witryna ładnie wygląda, nie znaczy jeszcze, że będzie sprzedawać albo przyprowadzać klientów. Do tego potrzebne są odpowiednie umiejętności — i właśnie te najważniejsze pokażę tu w siedmiu poziomach. Dzięki nim zbudujesz piękne strony, które są zoptymalizowane pod telefony, brzmią jak napisane przez człowieka i mają poprawną strukturę — bez konieczności bycia ekspertem od designu.
Poziom 1: znajdź wzorzec
Budowanie ładnej strony nie jest wcale najtrudniejszą częścią. Trudne jest wszystko dookoła. Omówię tu siedem umiejętności i pod koniec będziesz wiedzieć wszystko, czego trzeba, żeby budować strony, które faktycznie sprzedają — łącznie z całą psychologią, której nauczyłem się, robiąc to samodzielnie.
Jak ustalić, jaki jest standard? Potrzebny jest dobry punkt odniesienia. Jednym z najlepszych źródeł, jakie znalazłem, jest referral.design.
(Informacja dodatkowa: referral.design to katalog wyróżniających się projektów stron — służy tu jako galeria referencji, z której wybieramy wzorzec.)
Na poziomie pierwszym zachęcam do znalezienia strony w swojej niszy, która jest złotym standardem — zdobyła nagrody, realnie konwertuje klientów. Ja wybieram tutaj Mintlify, którą uważam za piękną i dopracowaną witrynę. Ma ładne tło, dobrze się przewija, dobrze prowadzi wzrok. Taka strona daje nam „DNA projektu”, projektowy blueprint — pozwala zrozumieć, co dokładnie sprawia, że ten design jest świetny. A kiedy przekażemy to Claude’owi, możemy zbudować własną wersję.
Poziom 2: struktura serwisu, a nie sama strona główna
Mamy świetny wzorzec. Teraz robimy coś, czego większość ludzi nigdy nie robi: myślimy o czymś więcej niż strona główna. Żeby mieć dobrą witrynę, potrzebujemy pełnej struktury.
Można to zrobić na kilka sposobów. Da się zbudować całość w Claude. Narzędziem, którego ostatnio dużo używam, jest Relume. To rzecz zbudowana przez projektantów, z mnóstwem wiedzy projektowej wbudowanej w środku.
(Informacja dodatkowa: w automatycznym transkrypcie nazwa pojawia się jako „Reloom”, „Room” czy „Breloom” — chodzi o Relume, narzędzie generujące mapy serwisu i wireframe’y.)
Dzięki niemu dostajemy pełne mapy serwisu — i o to mi właśnie chodzi. Chcę mieć widok z lotu ptaka na całą witrynę, bo jeśli oddajemy ją klientowi albo budujemy dla siebie, ludzie nie zostaną na stronie głównej. Będą wchodzić w kolejne rzeczy. Potrzebujemy wireframe’ów, które pokazują, jak wszystko wygląda, jakiegoś pojęcia o warstwie wizualnej i briefu. To dla mnie najszybsza droga do startu. Da się to zrobić w samym Claude, ale jeśli chcesz szybciej — to bywa bardzo pomocne.
Są dwie drogi. Pierwsza: eksport. Klikasz „export”, potem zakładasz nowy projekt i opisujesz zamysł. Mogę napisać: „Zbuduj mi firmę dekarską w klasie best-in-class, według poniższych zasad projektowych”. Następnie wklejasz URL wzorcowej strony wyciągnięty z galerii — możesz też skopiować i wkleić całą jej zawartość. Po tym dostajesz wygenerowaną mapę serwisu.
To bardzo przydatne, bo sekcje można przesuwać w górę i w dół. Jak to mówią: uncja pracy przed drukiem warta jest funta poprawek po druku.
(Informacja dodatkowa: przysłowie z branży poligraficznej — lepiej dopracować projekt przed produkcją, niż poprawiać go po fakcie.)
Wygląd i tak jeszcze dopieszczymy, ale świetne jest to, że możemy przemyśleć samą mapę: strona „o nas”, usługi, realizacje, blog, kontakt. Możemy obejrzeć wireframe’y i zobaczyć, jak wygląda każdy element, przestawiać je i edytować z lewej strony. Warto poświęcić kilka minut na przejście przez to i zbudowanie wszystkiego, czego chcemy. Jest też style guide oparty na tym, co podaliśmy: kolory i inne rzeczy, które możemy zmienić, jeśli coś nam nie leży. To w praktyce platforma all-in-one do zbudowania dowolnej strony.
Kiedy wireframe’y już nam odpowiadają, klikamy „export” w prawym górnym rogu. Można wyeksportować bezpośrednio do Claude Design, ale na potrzeby tego materiału eksportuję do HTML. Wracamy do Claude’a, wgrywamy plik ZIP i mówimy: „Zbuduj mi piękną stronę na podstawie tego pliku ZIP i całego systemu projektowego”. Podajemy też link do strony referencyjnej, żeby Claude miał dostęp do oryginału.
Następnie sięgamy po skill o nazwie design loop — link jest w opisie filmu, na mojej stronie z darmowymi zasobami. Ten skill pomaga uchwycić i wypracować styl, którego chcemy, przy użyciu kilku sprytnych technik. Kopiujesz całość, wklejasz w Claude i pozwalasz mu działać.
Na marginesie: całość da się zrobić także w Relume. Po kliknięciu „publish” w lewym górnym rogu narzędzie działa jak pełny system zarządzania treścią. W przykładowej stronie firmy dekarskiej, którą zbudowałem wcześniej, widać, że można ułożyć wszystko: brief generuje mapę serwisu, wireframe’y edytowalne na milion sposobów i projekty graficzne do dopracowania. W prawym górnym rogu publikujesz jednym kliknięciem i podglądasz w nowym oknie. W bibliotece widzisz obrazy i style, a w ustawieniach edytujesz podstrony — tytuł i opis meta. To wygodne rozwiązanie „z pudełka”. My jednak wracamy do Claude’a.
Obrazy i wideo: podłączenie generatora
Claude nie zbuduje nam pięknej strony, jeśli nie damy mu możliwości generowania ładnych obrazów najnowszymi modelami. Ja używam do tego Higgsfield — wszystkie obrazy na moich stronach i w prezentacjach powstają właśnie tam.
(Informacja dodatkowa: w transkrypcie nazwa pojawia się w wielu zniekształconych wariantach — „Higsfield”, „Hakesfield”, „Hicksville”. Chodzi o jedno narzędzie do generowania obrazów i wideo.)
Podłączenie do Claude’a jest banalnie proste. Kopiujesz link, mówisz Claude’owi: „Podłącz się do CLI Higgsfield, żebyśmy mogli tworzyć piękne obrazy i wideo, oto link” — otworzy ci się nowa karta w przeglądarce, logujesz się i możesz działać. I uwierz mi: używanie tego na stronach to nie tylko animacje 3D. Da się zbudować rzeczy, które wyglądają spektakularnie i na które sam byś nie wpadł.
Efekt: pierwsza wersja strony
Mamy więc piękną witrynę, dla której najpierw zbudowaliśmy strukturę. To jest ten krok, który wszyscy pomijają: mapa serwisu i struktura. Pojedyncza strona jest fajna, ale nikt nie kupuje pojedynczej strony — ludzie potrzebują przycisków, w które mogą kliknąć. Jeśli sprzedajesz to firmie dekarskiej albo jakiemukolwiek biznesowi, ten element musi być dopięty.
Mamy strukturę, mamy najlepszy system projektowy, mamy obrazy i wideo — i mamy wynik. Zbudowało nam logo, co jest świetne: to kolejny powód, żeby podpiąć generator obrazów, bo logo możemy tworzyć na bieżąco, jeśli klient go nie ma. Widać też, że skopiowało dokładnie ten styl — zieleń i czerń — którym chcieliśmy się inspirować.
Schodzimy niżej: piękna animacja, sekcja z firmami, z którymi „współpracujemy”, kolejna animacja. Przy odświeżeniu strony animacje pojawiają się na nowo i wygląda to bardzo czysto. Firmy w sekcji to oczywiście przykłady — nie wiem, czy Stripe płaci nam za dachy. Ale w Ridgeline pracujemy z najlepszymi firmami AI, żeby dać im najlepszy dach. „Uwielbiane przez twoje ulubione firmy”. To naprawdę jest dopracowane — design tu jest świetny.
Zwróć uwagę na wierność szczegółom. Kiedy zjedziemy niżej, widać sposób przewijania na dole sekcji. Model poszedł trochę własną drogą, ale zrozumiał, dlaczego to dobrze wygląda i dlaczego jest tak czyste. Dalej mamy sekcję „sprawdź, co jest nie tak z twoim dachem” i całą resztę. I nie kończy się na tym: mamy realne podstrony — usługi, o nas — które możemy rozbudowywać. Cała mapa serwisu została zbudowana tymi narzędziami.
A to dopiero fundament.
Podsumowując: mamy mapę serwisu, przygotowaną z jednego briefu w Relume, wireframe’y, a więc jedno miejsce, w którym możemy budować całą witrynę. To komponenty zrobione przez ludzi, nie generowane przez AI — dzięki temu styl wszystkich naszych stron jest naprawdę spójny.
Poziom 3: „scroll stopper”
Poziom trzeci to element, który zatrzymuje przewijanie. Klasyczny przykład zbudowałem przy pomocy generowania wideo — jest piękny, robi wrażenie. Ale wszyscy myślą tylko o samej stronie, a sposobów na przyciągnięcie uwagi jest wiele — zwłaszcza jeśli zależy ci na konwersjach. Te elementy naprawdę konwertują.
Ostatnio zakochałem się w serwisie Savee. Są tam piękne projekty, ale najlepsze jest to, że można szukać inspiracji. Mogę wpisać „dashboard UI” — powiedzmy, że budujemy panel i chcemy inspiracji. Można oczywiście korzystać z Pinteresta, ale tam siedzą wszyscy. Choć trzeba przyznać, że Pinterest też jest niezły i można tam znaleźć piękne rzeczy.
Załóżmy, że chcę mieć formularz rejestracji. Może chcemy dodać do naszej dekarskiej strony coś interaktywnego, żeby użytkownik zostawił swoje dane — na przykład piękną wycenę jako lead magnet. Znajduję inspirację, która wygląda świetnie. Gdzie problem? Taki, że to nie jest komponent. To nie jest element UI, który można po prostu wziąć. Musimy go odtworzyć — ale w stylu naszej strony.
Robimy więc tak: kopiujemy obrazek i wracamy do Claude’a. Tak jak wcześniej wpisujemy ukośnik i wywołujemy skill design loop. Piszemy: „Zrób mi wersję tego dla firmy dekarskiej. Chcę, żeby użytkownik mógł wgrać zdjęcie dachu, odpowiedzieć na kilka pytań, a potem chcę piękną animację w stylu Siri i pokazanie ceny — a my przechwytujemy te dane”. Wrzucamy prompt razem z obrazkiem i idziemy poszukać animacji typu Siri.
Znajduję jedną — wygląda przepięknie. Nie wiem nawet, co ona reklamuje, ale chcę to kupić od razu. Pobieram ją jako podpowiedź wideo dla Claude’a. I proszę: mamy „darmową wycenę twojego dachu”. Można wgrać zdjęcie, podać kod pocztowy, kliknąć „get my price” — i rusza animacja: sprawdzanie spadku i dachówek, ceny materiałów, „już prawie”, „rozglądamy się”. Widać, jaka to frajda. Bum: 7150 funtów. Poniżej są opinie i możliwość umówienia bezpłatnego przeglądu. Naprawdę świetne. Jak to mówią: kiedy masz odpowiednie skille, opłacisz rachunki.
Tego nie było, dopóki tego nie zbudowaliśmy. Fajny detal: na dole obrazka jest biel — idealnie te krople powinny się kończyć tak, by przejście było w pełni płynne, ale i tak lekko się wygaszają, co daje ładne przenikanie. Dostaję wycenę, jest tam sensowna analiza AI, którą możemy wpiąć w stronę. Używam do tego różnych, dość prostych skilli. I gotowe — dodajemy to do witryny.
Poziom 4: optymalizacja mobilna
Poziom czwarty to zrozumienie, że co najmniej 60% ruchu jest na telefonach. Ludzie nie zawsze siedzą przy biurku, a mimo to większość materiałów pokazuje wyłącznie wersję desktopową — sam jestem tego do pewnego stopnia winny, bo tak po prostu wygodniej się pokazuje. Ale stronę trzeba zoptymalizować pod urządzenia mobilne.
Jak to zrobić? Istnieje mnóstwo gotowych skilli, podlinkuję swoje ulubione. Ale szczerze mówiąc, możesz po prostu napisać Claude’owi: „Zoptymalizuj tę stronę pod urządzenia mobilne. Znajdź najlepsze, sprawdzone w boju, dobrze oceniane repozytoria, które zapewnią zgodność z zasadami dobrego projektowania mobilnego”. Po tym Claude wykona optymalizację.
Skąd wiemy, że zadziałało? Sprawdzamy. Widać, jak przy każdej szerokości ekranu strona się dostosowuje. Wierz lub nie, początkowo tak nie wyglądała — musiałem to wymusić. Nie jest idealnie, jeden fragment trzeba jeszcze poprawić, ale to jest strona, z której da się realnie korzystać i którą da się zrozumieć na telefonie. Nadal mogę przewijać, doszły też nowe elementy — nawet ładne menu „hamburger”.
Musisz zoptymalizować stronę pod mobile. Kiedy prowadziłem swój poprzedni startup technologiczny — zbudowałem go i sprzedałem, miał mnóstwo klientów, a teraz buduję własny startup AI — bardzo mocno stawiałem na SEO i strony internetowe. Zaczynaliśmy zawsze od wersji mobilnej i dopiero z niej wychodziliśmy wstecz do pełnej wersji desktopowej. I nie ma tu zamiennika dla samodzielnego przeklikania strony na telefonie. Claude może wykonać mnóstwo automatycznych testów przy pomocy repozytoriów, które podlinkuję w sekcji skilli, ale ostatecznie musisz przejść przez witrynę osobiście.
Poziom 5: walka ze slopem
To prowadzi nas do największego problemu, który nazywam walką z potworem AI-slopu. Zapraszam do wspólnej walki — jestem po dobrej stronie, ale jestem sam i przydałaby mi się drużyna.
Co mam na myśli przez „odsloppowanie”? To, że AI ma bardzo charakterystyczny sposób wypowiadania się. Od razu widać, że coś napisała maszyna. Jak pokazywałem w innych filmach, zbudowałem system do copy, który to naprawia — powstał w mojej społeczności, bo dostawałem to pytanie bez przerwy. W praktyce zbierasz wiedzę z najlepszych repozytoriów na GitHubie poświęconych odsloppowaniu — zbierają one wszystkie klasyczne znaki pisania przez AI, choćby na przykładzie Wikipedii — i przepuszczasz przez to swój tekst. Możesz też przepuścić go przez GPT-5.6, żeby brzmiał bardziej ludzko. Większość dzisiejszych stron jest pisana przez Claude’a — stąd wszystkie brzmią tak samo.
Pod spodem stoi psychologia. Jedna z najlepszych zasad w budowaniu czegokolwiek to „don’t make me think” — nie zmuszaj mnie do myślenia.
(Informacja dodatkowa: to tytuł klasycznej książki Steve’a Kruga o użyteczności stron internetowych.)
Chodzi o to, że ludzie nie czytają stron, tylko je skanują wzrokiem. Muszę móc rzucić okiem i zrozumieć, o czym jest ta strona. Nie traktuj cudzego czasu jak czegoś oczywistego — musisz na niego zapracować. Jeśli muszę poświęcić minutę na zrozumienie, o co chodzi w twojej witrynie, to o wiele za dużo. Ogólna zasada: opieraj się na myśleniu szybkim, systemie pierwszym. Ma być bardzo łatwo. Nazwij ból klienta.
(Informacja dodatkowa: „system pierwszy” to szybkie, automatyczne myślenie w modelu Daniela Kahnemana; „system drugi” to wolne i wysiłkowe. Autor w nagraniu poprawia się z jednego na drugi.)
Warto też przepuścić tekst przez sprawdzone zasady marketingu, psychologii i sprzedaży. Klasyczny przykład: zamiast „get started” — „start free”. Zamiast „zabawny sposób na naukę AI” — „wszyscy używają AI”.
Na poziomie piątym odsloppowujesz więc wszystko. Mój system stronowy generuje propozycje copy i przechodzi przez każdy element. Znaki pisania przez AI:
- Zamiast „Zaufani, niezawodni i zbudowani na lata” — „Sześć gwoździ na gont. Na każdy gont”. To ta sama treść, tylko podana przez konkretny przykład.
- Zamiast „Nie tylko dach, ale spokój ducha” — „Spisany zakres i stała cena, zanim ktokolwiek wejdzie na drabinę”. Ile osób w komentarzach byłoby w stanie stwierdzić, że pierwsze zdanie napisała maszyna? Drugie brzmi po prostu znacznie lepiej.
- Napuszone czasowniki: zamiast „wykorzystujemy wiodące w branży materiały, by dostarczyć niezrównaną ochronę” — „kupujemy materiały od producentów, którzy testują je na wiatr, grad i słońce”. „Wykorzystujemy”, „dostarczamy” — właśnie o to chodzi.
- Puste superlatywy: zamiast „najbardziej zaufani eksperci dekarscy w okolicy” — „Dachy i tylko dachy od 2001 roku”.
- Stos myślników: zamiast „Nasz zespół — przeszkolony, certyfikowany i lokalny — jest gotów pomóc” — „38 osób w ekipie, przeszkolonych fabrycznie w każdym materiale, który montujemy”.
Które z nich naprawdę kliknąłbyś jako lepsze? Odpowiedź jest oczywista. Jeden przykład — „Ukochani przez 10 000 zadowolonych właścicieli domów”, z uwagą, że nazwy realizacji i zdjęcia są zastępcze i trzeba je podmienić przed publikacją — to akurat nie jest dobry pomysł jako tekst na stronie, bo mówi mi tylko, że zbudowałem placeholdery. Ale idea jest jasna. Do tego dostajesz pełne rozpisanie zasad i wyjaśnienie, dlaczego jedna wersja jest lepsza.
Musimy odsloppować całą witrynę tak, żeby czytało się ją jak tekst napisany przez człowieka. Bo powiem ci to, czego inni nie mówią: ludzie czują strony zrobione przez AI z odległości sześciu mil — o ile nie usuniesz tych problemów, nie zoptymalizujesz strony pod mobile i nie zaatakujesz kwestii slopu. A te skille właśnie to robią.
Poziom 6: ikony i showstoppery
Poziom szósty to ikony i elementy, które robią wrażenie. Nazywam to „UI snipingiem” i uwielbiam to. Chodzi o to, że możemy znaleźć dowolny komponent UI, który nam się podoba, i przenieść go do siebie.
Relume buduje własną, naprawdę fajną bibliotekę takich rzeczy — przewaga polega na tym, że robią to projektanci. Drugi dobry przykład to 21st.dev, gdzie znajdziesz biblioteki, tła, obramowania, co tylko chcesz. Znajdujesz coś, co ci się podoba, i przenosisz do siebie. Jeśli masz odpowiedni serwer MCP, możesz po prostu o to poprosić; jeśli bierzesz z 21st.dev, kopiujesz kod, wchodzisz do Claude’a i mówisz: „Dodaj to do mojej strony”.
(Informacja dodatkowa: MCP to standard łączenia modeli z zewnętrznymi narzędziami i bibliotekami — pozwala pobierać komponenty bez ręcznego kopiowania kodu.)
Po powrocie na stronę widać, że te elementy tam są: „zarezerwowane w tydzień”, a po najechaniu kursorem pojawiają się klienci i „4800 dachów utrzymanych w suchości”. To ładny element budujący wiarygodność, bo przecież jedno z podstawowych pytań brzmi: jak pokażesz, że jesteś prawdziwy? Element jest w pełni zintegrowany ze stroną i możesz go przesunąć, gdzie chcesz.
Można też korzystać z ikon — jestem ich wielkim fanem. Jest Icons8, Flaticon, IconScout i mnóstwo innych. Ja używam obecnie Flaticona — nie jestem przez nich sponsorowany, po prostu uważam, że są niezłe. Znajdziesz tam różne style: jeśli robisz coś w nowoczesnym, luźnym klimacie dla młodszej grupy odbiorców — millenialsi, pokolenie Z i młodsi — możesz sięgnąć po fajniejszą grafikę. Bycie na takim serwisie kosztuje jakieś 10–12 dolarów i możesz używać ikon w ramach posiadanej licencji. To sposób, by nadać stronie świeżości, jeśli pasuje to do twojego designu. A jeśli nie — po prostu „snajpuj” komponenty UI i zrób, żeby wyglądało świetnie.
Poziom 7: SEO
Poziom siódmy to coś, co wielu pomija: SEO. Na GitHubie jest mnóstwo skilli. Lubię Claude SEO — jest całkiem nieźle oceniany, a jego autor jest chyba też twórcą treści. Ludzie od SEO — nazywam ich nerdami, mam nadzieję, że się nie obrażą — skodyfikowali tę wiedzę, więc możesz zbudować systemy, które przeczeszą całą twoją stronę.
Idziesz więc do Claude’a i mówisz: „Znajdź mi najlepsze strategie SEO, jakie istnieją w internecie, przejrzyj to repozytorium SEO i zbuduj mi checklistę oraz strategię dla mojej strony. Oto rzeczy, na które chcę się pozycjonować, oto słowa kluczowe, oto intencja użytkownika. Zadawaj mi pytania o moich klientów, żebyśmy wspólnie ustalili frazy długiego i krótkiego ogona, i uszereguj je według wolumenu wyszukiwań i trudności. Na tej podstawie zbudujemy strategię SEO, mapę treści i znajdziemy sugestie dla mojej strony”.
Wynik wygląda mniej więcej tak, jak w ćwiczeniu, które zrobiłem niedawno dla Glidera — mojego startupu do zamiany mowy na tekst, dzięki któremu mogę mówić do różnych narzędzi. Zobacz poziom szczegółowości: „speech to text”, ile osób tego szuka, indeks popytu, jak trudna jest fraza. System znajduje te słodkie punkty. Mam 28 słów kluczowych, na które powinienem się pozycjonować, plus frazy długiego ogona w rodzaju „alternatywa dla Whisper Flow”. To naprawdę pomocne i na tej podstawie budujesz strategię treści. Dokładnie to robię teraz we własnym startupie — i możesz zrobić to samo dla dowolnej swojej strony czy systemu.
Publikacja i co dalej
Żeby to opublikować, wystarczy powiedzieć Claude’owi, żeby wrzucił projekt do prywatnego repozytorium na GitHubie — mam na kanale pełne tutoriale, jak przejść przez ten proces. Potem uruchamiasz całość z Vercela. Vercel hostuje wszystko, w tym wiele stron, które pokazuję na tym kanale. Konfiguracja jest banalnie prosta — wytłumacz Claude’owi, o co ci chodzi, a on przeprowadzi cię krok po kroku.
To prowadzi nas jednak do kolejnego problemu. Te umiejętności projektowe są przydatne i faktycznie pomagają budować piękne, sprzedające strony. Ale prawda jest taka, że jeśli nie masz własnego projektowego systemu operacyjnego, zostawiasz na stole zbyt wiele godzin, produktywności i wartości. Dlatego następnym krokiem jest nauczenie się, jak taki system zbudować.
10 najważniejszych takeaways — z kontekstem zastosowania
1.Zacznij od wzorca, nie od pustej strony
Na czym polega: Zamiast opisywać Claude’owi wyobrażony design, znajdujesz w swojej niszy stronę, która realnie konwertuje i zdobyła uznanie, i wyciągasz z niej „DNA projektu” — układ, kolory, typografię, rytm sekcji.
Jak stosować: Wybierz jedną stronę wzorcową, podaj Claude’owi jej URL i opis tego, co konkretnie ci się w niej podoba. Trzymaj się jednego wzorca na projekt, żeby styl był spójny.
Na co uważać: „Inspirowanie się” ma granicę prawną i wizerunkową — kopiuj zasady projektowe, nie identyczny layout ani treści. Popularność strony nie dowodzi, że konwertuje w twojej branży.
2.Mapa serwisu przed pikselem
Na czym polega: Krok, który większość pomija — zanim powstanie cokolwiek ładnego, ustalasz pełną strukturę: usługi, o nas, realizacje, blog, kontakt, plus wireframe’y każdej podstrony.
Jak stosować: Wygeneruj mapę serwisu i wireframe’y z jednego briefu, przestaw sekcje, dopiero potem eksportuj do Claude’a jako fundament. Poświęć na to kilkanaście minut — to najtańszy moment na zmiany.
Na co uważać: Wygenerowana mapa jest generyczna dla branży. Jeśli jej nie przejrzysz, dostaniesz podstrony, których nikt nie potrzebuje, i zabraknie tych, które faktycznie sprzedają.
3.Podłącz generator obrazów do agenta
Na czym polega: Bez własnych grafik, logo i animacji nawet dobrze zaprojektowana strona wygląda jak szablon. Autor podpina do Claude’a narzędzie do generowania obrazów i wideo przez CLI.
Jak stosować: Poproś Claude’a o połączenie z narzędziem, podając link do dokumentacji, zaloguj się w przeglądarce i generuj materiały w trakcie budowania strony — także logo, jeśli klient go nie ma.
Na co uważać: Sprawdź licencję na użycie komercyjne wygenerowanych materiałów, zwłaszcza gdy oddajesz stronę klientowi. Generowane grafiki potrafią też mocno obciążyć czas ładowania — kompresuj.
4.Zbuduj jeden interaktywny element, który zatrzymuje
Na czym polega: „Scroll stopper” to interaktywny moduł — u autora kalkulator wyceny dachu ze zdjęciem, kodem pocztowym, animacją analizy i konkretną kwotą — który jednocześnie zbiera dane kontaktowe.
Jak stosować: Znajdź wizualną inspirację w galerii designu, wklej zrzut do Claude’a i opisz przepływ krok po kroku: co użytkownik wgrywa, o co go pytasz, co widzi na końcu i co zapisujesz.
Na co uważać: Inspiracja z galerii to obrazek, nie komponent — trzeba go odtworzyć w stylu swojej strony. Zbieranie danych osobowych wymaga informacji o przetwarzaniu i zgody; „wycena” musi być wyraźnie oznaczona jako szacunkowa.
5.Mobile first, nie mobile potem
Na czym polega: Co najmniej 60% ruchu jest z telefonów, a większość materiałów i projektów skupia się na desktopie. Autor w poprzedniej firmie projektował od wersji mobilnej i dopiero z niej wychodził do desktopowej.
Jak stosować: Poproś Claude’a o optymalizację mobilną z odwołaniem do sprawdzonych, dobrze ocenianych repozytoriów z zasadami projektowania mobilnego, a potem sam przeklikaj stronę na telefonie.
Na co uważać: Automatyczne testy nie zastąpią własnego kciuka — autor przyznaje, że po optymalizacji wciąż zostały usterki. Pierwsza wersja z reguły nie jest mobilna, choćby wyglądała poprawnie na podglądzie.
6.Systematycznie usuwaj ślady AI z tekstów
Na czym polega: Teksty pisane przez model mają rozpoznawalne wzorce: napuszone czasowniki, puste superlatywy, nadmiar myślników, ogólniki bez liczb. Autor przepuszcza copy przez system oparty na skodyfikowanych listach takich sygnałów.
Jak stosować: Podmieniaj ogólnik na konkret: nie „zaufani i niezawodni”, tylko „sześć gwoździ na gont”; nie „wiodące w branży materiały”, tylko nazwa testu i parametru. Przepuść tekst przez drugi model, żeby złamać charakterystyczny rytm.
Na co uważać: Automat potrafi wygenerować konkret, którego nie masz pokrycia w rzeczywistości — liczby, daty i certyfikaty muszą być prawdziwe. Autor sam pokazuje wpadkę, gdy system napisał na stronie, że zdjęcia są zastępcze.
7.„Don’t make me think” jako filtr każdej sekcji
Na czym polega: Ludzie nie czytają stron, tylko je skanują. Jeśli zrozumienie, o co chodzi, zajmuje minutę, strona przegrała. Copy ma trafiać w szybkie, automatyczne myślenie i nazywać ból odbiorcy.
Jak stosować: Sprawdź każdą sekcję pytaniem: czy po trzech sekundach patrzenia wiadomo, co tu jest oferowane i co zrobić dalej? Zmieniaj neutralne wezwania na konkretne — „start free” zamiast „get started”.
Na co uważać: Uproszczenie nie może zjeść informacji potrzebnych do decyzji zakupowej — cena, zakres, dowód wiarygodności muszą być łatwo dostępne, tylko podane szybko do odczytania.
8.„UI sniping” — podbieraj gotowe komponenty
Na czym polega: Zamiast projektować każdy element od zera, bierzesz gotowe komponenty z bibliotek (Relume, 21st.dev) i wklejasz je do własnego projektu, dopasowując do stylu.
Jak stosować: Skopiuj kod komponentu i poproś Claude’a o dodanie go do strony, albo pobierz go przez serwer MCP. Dobre miejsca na to: elementy budujące wiarygodność, jak licznik realizacji czy zdjęcia klientów pojawiające się po najechaniu.
Na co uważać: Komponenty z różnych źródeł łatwo rozjeżdżają spójność wizualną — przepuść je przez swój style guide. Sprawdzaj licencje bibliotek i ikon, zwłaszcza w projektach komercyjnych.
9.SEO jako proces z checklistą, nie jako domysł
Na czym polega: Autor zleca Claude’owi zbudowanie strategii SEO: checklisty, listy fraz z wolumenem i trudnością, podziału na frazy długiego i krótkiego ogona oraz mapy treści — z modelem dopytującym o profil klienta.
Jak stosować: W prompcie podaj słowa kluczowe, intencję i pozwól modelowi zadawać pytania o twojego klienta. Wynik uszereguj po wolumenie i trudności i wybierz nisze możliwe do zdobycia, jak „alternatywa dla [konkurent]”.
Na co uważać: Model potrafi halucynować wolumeny i indeksy trudności — te liczby trzeba zweryfikować w realnym narzędziu do badania fraz. Strategia bez publikowanych treści nic nie daje.
10.Zamknij pętlę: repozytorium, hosting, powtarzalny system
Na czym polega: Gotową stronę wrzucasz do prywatnego repozytorium i uruchamiasz z platformy hostingowej — autor korzysta z Vercela. Jednorazowe skille to jednak za mało: bez własnego systemu projektowego tracisz godziny przy każdym kolejnym projekcie.
Jak stosować: Poproś Claude’a o przeprowadzenie przez wrzucenie kodu do repozytorium i wdrożenie krok po kroku. Zapisuj powtarzalne elementy — style guide, listę sygnałów slopu, checklistę mobilną — jako stały zestaw do kolejnych projektów.
Na co uważać: Repozytorium ma być prywatne, jeśli zawiera materiały klienta lub klucze. Skille i narzędzia z filmu zmieniają się szybko — traktuj je jako przykłady procesu, nie jako listę, która będzie aktualna za rok.