O czym jest ten film
- Autor pokazuje, że w zaskakująco krótkim czasie da się zbudować z Claude Code odpowiednik WordPressa: panel, do którego logują się nietechniczni klienci i pracownicy, oraz kreator stron metodą „przeciągnij i upuść”.
- Motywacja odejścia od WordPressa: nie wiązać się z infrastrukturą, która — zdaniem autora — wyraźnie traci na znaczeniu; Claude Code ma być szybszy, tańszy i bardziej funkcjonalny.
- Całość opiera się na dwóch darmowych narzędziach open source: Payload (panel administracyjny w stylu WordPressa) i Puck (wizualny kreator à la Elementor).
- Pierwszy prompt buduje kompletną witrynę (przykład: firma hydraulika) razem z zapleczem; tryb Claude Design dba o spójną, estetyczną szatę strony głównej, podstron usług i bloga.
- Panel zawiera sekcję Media (zdjęcia z banków obrazów lub własne), użytkowników z rolami oraz stronę logowania — klienci mogą sami dodawać wpisy i podstrony.
- Payload ma 11 wbudowanych wtyczek (SEO, formularze, multi-tenancy dla agencji), a czego w nich zabraknie, Claude dopisze na życzenie — bez ograniczeń znanych z WordPressa czy Elementora.
- Edycja treści jest prosta: można modyfikować istniejące sekcje (np. opis procesów, cennik), dodawać kolejne albo tworzyć zupełnie nowe podstrony na bazie szablonów.
- Wpisy blogowe edytuje się jak rozbudowane pole tekstowe — kolejne bloki (np. ramkę z poradą) dokleja się przyciskiem plus.
- Kreator Puck działa wewnątrz Payloada i przypomina Elementora: przeciąganie elementów oraz trzy zakładki — Treść, Styl, Zaawansowane — z tą różnicą, że wszystko można przebudować, bo kod jest otwarty.
- Publikacja na Vercel odbywa się jednym promptem, razem z bazą danych na zdjęcia; konto Vercel jest darmowe. Na końcu autor promuje swoją płatną społeczność (Google Ads, SEO, konwersje, automatyzacja sprzedaży).
10 najważniejszych takeaways — z kontekstem zastosowania
1.Strona i panel z jednego promptu — precyzuj zadanie od razu
Na czym polega: Claude Code potrafi na podstawie jednego polecenia postawić całą witrynę wraz z panelem administracyjnym; kluczem jest konkretny prompt: branża, narzędzie (Payload) i prośba o użycie Claude Design.
Jak stosować: zacznij od jednego, porządnego polecenia w stylu „zbuduj stronę firmy hydraulicznej w Payloadzie, z zapleczem do dodawania bloga i podstron, w trybie Claude Design”, a dopiero potem doszlifowuj efekt kolejnymi poleceniami.
Na co uważać: prompt, który zadziałał u autora, najlepiej powtórzyć dokładnie — najprościej zrobić zrzut ekranu z poleceniem i wkleić go do Claude; luźny opis da luźny efekt.
2.Nie musisz umieć kodować — wystarczy VS Code i rozmowa
Na czym polega: całe środowisko pracy to darmowy edytor VS Code z rozszerzeniem Claude Code; pracuje się, prowadząc zwykłą rozmowę z asystentem.
Jak stosować: pobierz VS Code, w markecie rozszerzeń (ikona czterech kwadratów) wyszukaj „Claude”, zainstaluj pierwszą pozycję i otwórz Claude ikoną w prawym górnym rogu.
Na co uważać: nazwa „edytor kodu” brzmi groźniej, niż jest w rzeczywistości — jeśli potrafisz pisać z Claude w przeglądarce, dasz radę; nie zniechęcaj się samym interfejsem.
3.Każdy projekt w osobnym folderze
Na czym polega: autor trzyma wszystkie witryny w jednym katalogu nadrzędnym, a każdy nowy projekt umieszcza w osobnym, pustym podfolderze (u niego: „WordPress 2”).
Jak stosować: przed pierwszym promptem kliknij niebieski przycisk otwierania folderu i wskaż świeżo utworzony, pusty katalog — Claude Code będzie pracował właśnie w nim.
Na co uważać: pominięcie tego kroku kończy się plikami rozrzuconymi po przypadkowych lokalizacjach i szukaniem zgubionych projektów po całym dysku.
4.Claude Design jako gwarancja estetyki
Na czym polega: dopisek „zbuduj to w Claude Design” sprawia, że Claude tworzy szablony graficzne — strony głównej, podstron usług i wpisów — wielokrotnego użytku, dzięki czemu cała witryna wygląda spójnie i dopracowane.
Jak stosować: poproś wprost o szablon dla każdego typu podstrony i stosuj go przy kolejnych materiałach, zamiast projektować każdą stronę od zera.
Na co uważać: ładny wygląd to dopiero początek — nie zastępuje strony, która rzeczywiście konwertuje; sam autor przypomina, że projektowanie to tylko drobny element układanki.
5.Panel dla klienta: użytkownicy i role
Na czym polega: Payload generuje gotowy system logowania; można dodawać członków zespołu i klientów oraz nadawać im różne role, czyli kontrolować, kto co może zmieniać.
Jak stosować: po zbudowaniu witryny wejdź na zapleczu w sekcję użytkowników, załóż konta klientów i przypisz im odpowiednie uprawnienia.
Na co uważać: Claude tworzy konto startowe z przykładowymi danymi (u autora: jono@example.com i wygenerowane hasło) — przed oddaniem panelu klientowi koniecznie ustaw prawdziwe, bezpieczne dane logowania.
6.Zacznij od 11 gotowych wtyczek, resztę zamawiaj u Claude
Na czym polega: Payload ma jedenaście wbudowanych wtyczek — od SEO, przez formularze, po multi-tenancy (wiele witryn klientów w jednym panelu); wszystkiego, czego zabraknie, Claude dopisze na życzenie, bez barier znanych z marketów WordPressa.
Jak stosować: najpierw przejrzyj listę gotowych rozszerzeń; jeśli czegoś nie ma, opisz Claude, czego potrzebujesz, i pozwól mu to zbudować.
Na co uważać: kod pisany „na zamówienie” nie przeszedł testów u tysięcy użytkowników jak popularne wtyczki — sprawdź nową funkcjonalność od podszewki, zanim pokażesz ją klientowi.
7.Edycja treści przez sekcje i szablony
Na czym polega: podstrony usług składają się z edytowalnych sekcji (np. opis procesów, cennik); można je zmieniać, dokładać kolejne albo budować zupełnie nowe strony od zera, startując z szablonu.
Jak stosować: wejdź na zapleczu w stronę, popraw istniejące sekcje lub dodaj nowe na dole; nową podstronę stwórz z szablonu i modyfikuj element po elemencie.
Na co uważać: panel pokazuje widok pełnej szerokości i „ściśniętą” wersję, jak na tablecie — zawsze sprawdź stronę w obu wariantach, zanim ją opublikujesz.
8.Blog jak rozbudowane pole tekstowe
Na czym polega: wpisy edytuje się inaczej niż strony — jak tekst w polu, do którego przyciskiem plus dokleja się kolejne bloki (np. ramkę z poradą).
Jak stosować: w edytorze wpisu kliknij plus, wybierz typ bloku, wpisz treść i podejrzyj efekt na żywej stronie.
Na co uważać: dostępny zestaw bloków zależy od promptów — jeśli chcesz pełen wachlarz (obrazy, nagłówki, przyciski, SVG, linki do YouTube), zaznacz to wprost w poleceniu.
9.Kreator Puck: Elementor bez oków Elementora
Na czym polega: drugi prompt dodaje do panelu wizualny edytor w stylu Elementora — przeciąganie sekcji, kolumn, nagłówków — z trzema zakładkami edycji elementu: Treść, Styl i Zaawansowane (m.in. odstępy).
Jak stosować: wejdź na zapleczu w strony wizualne, otwórz kreator i przeciągaj elementy na stronę; kliknij dowolny z nich, by zmienić tekst, wielkość, wyrównanie, kolor czy krój pisma.
Na co uważać: w Elementorze akceptujesz to, co dał producent; tu wszystko jest otwarte, ale każda przebudowa kreatora to kolejny prompt i kolejny test — nie modyfikuj dla samych modyfikacji.
10.Publikacja jednym promptem: Vercel z bazą na pliki
Na czym polega: ostatni prompt każe Claude wdrożyć całość na Vercel i dodać bazę danych (kilka kliknięć), by przesyłane przez klientów zdjęcia miały się gdzie zapisywać.
Jak stosować: jeśli nie masz konta Vercel, załóż darmowe — Claude sam poprowadzi cię przez rejestrację, a w razie czego zrobisz to na vercel.com; po wdrożeniu sprawdź panel na wersji publicznej.
Na co uważać: darmowy plan ma swoje limity — przy witrynach z dużym ruchem lub sporą liczbą plików zweryfikuj warunki, zanim przeniesiesz tam wszystkich klientów.
Redakcyjne tłumaczenie
Dlaczego odchodzić od WordPressa
Okazuje się, że w zaskakująco krótkim czasie da się zbudować kreator stron z przeciąganiem elementów — na wzór WordPressa — wraz z panelem administracyjnym, do którego logują się nietechniczni klienci i pracownicy, żeby tworzyć wpisy blogowe, strony docelowe i tym podobne treści.
Po co robić to z Claude Code, zamiast zostać przy WordPressie? Przede wszystkim po to, żeby nie wiązać się z infrastrukturą, która — w mojej ocenie — wyraźnie traci na znaczeniu. Do tego dochodzą zalety samego narzędzia: jest szybsze, tańsze i potrafi więcej. Czas to zbudować — w rekordowym tempie.
Instalacja: piętnaście sekund dla początkujących
Zaczynamy od pobrania Claude Code, a jeśli dopiero zaczynasz z tym narzędziem, mam dla ciebie całą instrukcję w piętnaście sekund. W wyszukiwarce wpisujemy „VS Code” i pobieramy program z pierwszego wyniku. To darmowy edytor do pracy z kodem. Brzmi groźniej, niż jest w rzeczywistości: dopóki potrafisz rozmawiać z Claude w oknie dialogowym — dokładnie tak jak w zwykłym czacie — wszystko będzie dobrze.
Po pobraniu i uruchomieniu zobaczysz ekran startowy. Pierwsze zadanie: dodać Claude Code do projektu. Klikamy ikonę z czterema kwadratami, wpisujemy „Claude”, wybieramy pierwszą pozycję z listy i instalujemy — od tej pory Claude otwieramy ikoną w prawym górnym rogu.
Jedna rzecz, o której łatwo zapomnieć: każdy nowy projekt — stronę, aplikację czy to, co budujemy dzisiaj — zawsze trzymamy w osobnym folderze. Klikamy niebieski przycisk otwierania katalogu. Ja lubię mieć porządek i wszystkie witryny trzymam w jednym miejscu, żeby żadna nie zginęła gdzieś na dysku. W moim katalogu z projektami tworzę nowy folder — nazwijmy go „WordPress 2”. Na razie zupełnie pusty. Otwieramy go i możemy zaczynać pierwszą iterację, czyli zaplecze oparte na Payloadzie.
Dwa narzędzia: Payload i Puck
Technicznie korzystamy z dwóch programów: Payload i Puck. Oba są darmowe i rozprowadzane na zasadach open source. Payload zapewnia panele w stylu WordPressa, do których logują się członkowie zespołu i klienci; Puck to kreator stron metodą przeciągania. Czas to połączyć.
(Informacja dodatkowa: Payload to otwartoźródłowy system zarządzania treścią (CMS) dla nowoczesnych aplikacji internetowych, a Puck — otwartoźródłowy edytor wizualny, który można osadzić we własnej aplikacji. Żadne z nich nie wymaga opłat licencyjnych.)
Pierwszy prompt: strona firmy hydraulicznej
Wszystkie promptu pokażę na ekranie — w razie czego wystarczy zrobić zrzut ekranu i wkleić go do Claude. W pierwszym poleceniu prosimy o kilka rzeczy naraz: niech Claude zbuduje stronę firmy hydraulicznej w Payloadzie, który posłuży za zaplecze w stylu WordPressa, tak aby dało się dodawać wpisy blogowe i zwykłe podstrony. Resztę promptu omówię, gdy projekt już powstanie — łatwiej zobaczyć to na własne oczy niż słuchać opisu. Na końcu dopisuję jedno zdanie: „zbuduj to z użyciem Claude Design”, żeby efekt nie tylko działał, ale i dobrze wyglądał. Wysyłam polecenie i wracam, kiedy Claude skończy.
(Informacja dodatkowa: „Claude Design” to tryb projektowy w produktach Anthropic — dzięki niemu generowane interfejsy trzymają się spójnej, dopracowanej estetyki.)
Za jednym zamachem: witryna i panel
Jesteśmy z powrotem, a Claude — dosłownie jednym poleceniem — postawił nie tylko całą witrynę, ale i panel administracyjny à la WordPress. Zobaczmy to na własne oczy. Mamy link do strony; kopiujemy go i otwieramy w nowej karcie przeglądarki.
Od razu rzuca się w oczy, że strona naprawdę dobrze wygląda. Zawdzięczamy to Claude Design: na jego bazie powstały szablony — strony głównej, podstron usług i wpisów blogowych — których można używać w kółko. Stąd ta spójna, ładna szata graficzna.
Wejście na zaplecze
Żeby zalogować się do zaplecza, które przygotował Payload, wystarczy na końcu adresu dopisać /admin. Panel jest chroniony hasłem. Co wygodne, Claude od razu utworzył konto użytkownika i wyświetlił dane logowania. Wybieram adres jono@example.com i podane hasło — i jesteśmy w środku.
Media, użytkownicy, role i wtyczki
Dużo tu się dzieje, więc omówię najważniejsze rzeczy na szybko. Media: można automatycznie wyszukiwać zdjęcia w bankach obrazów albo wgrywać własne — wszystko ląduje w bibliotece na zapleczu. Użytkownicy: dodajemy członków zespołu i klientów oraz nadajemy im różne role, jeśli potrzebna jest większa elastyczność w określaniu, kto co może robić. Mamy też gotową stronę logowania.
I najciekawsze: zupełnie jak WordPress ze swoim ekosystemem wtyczek, Payload ma ich jedenaście wbudowanych — od SEO, przez budowanie formularzy, po multi-tenancy, czyli prowadzenie witryn wielu klientów w jednym panelu; wdzięczne rozwiązanie dla agencji. Ale prawdziwa rewelacja jest inna: nie jesteś zamknięty na tę jedenastkę. Cokolwiek zechcesz dodać, wystarczy poprosić Claude w oknie na dole, a on się tym zajmie. Nie musisz zmagać się z ograniczeniami WordPressa czy platform takich jak Elementor — Claude zbuduje praktycznie wszystko.
Podstrony usług: edycja i nowe strony
Zobaczmy teraz, jakie strony da się budować. Wchodzimy najpierw w podstrony usług. Widzimy to, co właśnie powstało — można się upewnić, że wygląda dobrze i trzyma się szablonu. Różnica między podglądami jest taka, że jeden pokazuje pełną szerokość, a drugi — nieco „ściśniętą” wersję, jak na tablecie. Każdy fragment strony da się swobodnie edytować: sekcje takie jak opis procesów czy cennik zmieniamy bezpośrednio, na dole dodajemy kolejne bloki, a gdy zachodzi potrzeba — generujemy zupełnie nową podstronę od zera, z taką liczbą sekcji, jaka jest potrzebna. Można startować od szablonu, rozbierać go na części i dokładać pojedyncze elementy. Wszystko to robimy bez wychodzenia z Payloada.
Blog: prosty edytor blokowy
Wpisy blogowe dodaje się równie prosto, a każdą publikację można podejrzeć na żywej stronie. Edycja wygląda jednak nieco inaczej: wpis przypomina rozbudowane pole tekstowe, do którego dodaje się kolejne elementy. Przykład: przewijam wpis w dół i w tym miejscu chcę wstawić ramkę z poradą. Klikam plus, wybieram blok „tip box”, wpisuję tekst, sprawdzam podgląd — gotowe. Ramka z poradą to tylko jedna z wielu opcji; takich bloków może być dowolnie wiele.
Wszystko, czego oczekujesz od kreatora stron
Wróćmy na chwilę do pierwszego promptu. Prosiłem w nim także o dodanie wszystkich domyślnych elementów i gotowych szablonów, których spodziewałbyś się po kreatorze stron. Budując witrynę w Elementorze, zakładasz przecież, że pod ręką będą obrazy, nagłówki, przyciski, grafiki SVG, linki do filmów na YouTube i tak dalej. Wszystko to zadziałało w Payloadzie od razu, jako natywna funkcjonalność. A rzeczy, których nie ma nawet Elementor, Claude Code zbuduje na zamówienie.
Drugi prompt: kreator w stylu Elementora
I to prowadzi nas do kolejnego etapu: Pucka — kolejnego otwartego narzędzia, które pozwoli osadzić wewnątrz Payloada przyjazny interfejs do przeciągania elementów, dostępny dla zespołu i klientów. Budujemy go drugim promptem: „dodaj kreator w stylu Elementora, korzystając z Pucka”. Jak poprzednio — efekt pokażę, gdy Claude skończy.
Przeciąganie bez ograniczeń
Wracamy, a kreator już działa. W panelu pojawiła się sekcja stron wizualnych. Klikamy, otwieramy edytor — i przeciągamy na stronę, co tylko chcemy.
Podkreślam to, bo uważam to za najcenniejszą część całego rozwiązania: wszystko da się konfigurować. Chcesz coś dodać, poprawić albo przebudować? Kod jest otwarty, a Claude może zbudować cokolwiek. Przykład: przeciągasz na dół sekcję hero, czyli wielki blok otwierający stronę; dodajesz kolejną sekcję z dwiema kolumnami; w jednej z nich umieszczasz nagłówek — i tak dalej, bez końca. W Elementorze jesteś skazany na to, co dał ci producent; tutaj naprawdę dopasujesz wszystko do siebie.
Trzy zakładki: Treść, Styl, Zaawansowane
Po kliknięciu konkretnego elementu na stronie zobaczysz coś bardzo znajomego dla użytkowników Elementora: trzy zakładki u góry. To jeden z moich ulubionych fragmentów całości. Zakładka Treść pozwala zmienić sam tekst. Zakładka Styl odpowiada za wygląd: wielkość, wyrównanie (środek, lewa, prawa), kolor, krój pisma i tak dalej — i wszystko da się ustawić w stu procentach po swojemu. Zakładka Zaawansowane służy m.in. do odstępów wewnętrznych (tzw. padding), żeby odsunąć element od reszty strony. Możliwości są praktycznie nieograniczone.
Ostatni prompt: publikacja na Vercel
Zostaje ostatni krok: uruchomienie strony na żywo. I znów zaskoczenie — jest to zdumiewająco łatwe. Kopiujemy ostatni prompt, w którym prosimy Claude o wdrożenie projektu na Vercel oraz — już po stronie Vercela — o dodanie bazy danych jednym kliknięciem. Dzięki temu po publikacji będzie gdzie zapisywać zdjęcia wgrywane przez klientów. Wysyłam polecenie i wracam, gdy wszystko będzie gotowe.
Jesteśmy z powrotem, a cała aplikacja działa już w chmurze. Dla porządku: jeśli nie masz jeszcze konta Vercel, jest darmowe — Claude sam poprosi cię o rejestrację. Gdyby z jakiegoś powodu tego nie zrobił, konto założysz na vercel.com. Po wdrożeniu warto jeszcze raz zajrzeć do panelu administracyjnego — wszystko jest na miejscu i działa.
(Informacja dodatkowa: Vercel to platforma hostingowa dla aplikacji internetowych; podstawowy plan jest darmowy, a bazę danych dodaje się tam kilkoma kliknięciami.)
Podsumowanie i co dalej
To w zasadzie koniec. Możesz dodawać kolejne konta dla klientów i członków zespołu, nadawać uprawnienia i rozbudowywać system dalej.
Jeśli natomiast zależy ci na tym, żeby strona nie tylko ładnie wyglądała, ale przynosiła ruch i zamieniała go w leady oraz płacących klientów, zajrzyj do mojej płatnej społeczności — dostęp zaczyna się od siedmiodniowego okresu próbnego. Pokażę w niej najpierw, jak przyciągać odwiedzających przez Google Ads i SEO: czekają na ciebie cykle liczące szesnaście i siedemnaście odcinków, prowadzące krok po kroku przez konfigurację i optymalizację — z Claude Code, który wykonuje za ciebie całą ciężką robotę. Następnie bierzemy na warsztat psychologię konwersji: ładny projekt to tylko mały fragment układanki, a w budowaniu stron, które sprzedają, kryje się znacznie więcej — przetestowałem to, wydając sto tysięcy dolarów. Wreszcie automatyzacja sprzedaży, która zamienia pozyskane leady w płacących klientów. A jeśli nie masz jeszcze własnej firmy, pokażę ci, jak zdobyć i domknąć pierwsze zlecenia, urosnąć do dziesięciu tysięcy i zbudować agencję opartą na Google Ads i SEO.
Na dziś to wszystko. Dziękuję za obejrzenie — do zobaczenia w następnym odcinku.