W tym roku odbyliśmy tę samą rozmowę z kilkoma klientami: „Zaprojektowałem swoją stronę w Claude — możecie to po prostu zbudować?”. To uzasadnione pytanie, a szczera odpowiedź brzmi: tak, w większości — ale „po prostu zbudować” nie oddaje tego, co dzieje się między mockupem wygenerowanym przez Claude a stroną WordPress, na której faktycznie da się prowadzić biznes.
To nie jest tekst, który ma cię zniechęcić do używania AI w projektowaniu. My też z niego korzystamy — dokładnie w tej części, w której jest dobre. Chodzi o to, żeby jasno powiedzieć, co tak naprawdę przekazujesz deweloperowi, dając mu mockup od AI, żeby wycena, którą dostaniesz, miała sens.
Co naprawdę dostajesz z „projektu w Claude”
Poproś Claude o zaprojektowanie strony docelowej, a dostaniesz coś realnego: uporządkowany układ, spójny system kolorów i typografii, działający kod HTML i CSS, czasem naprawdę dobre teksty. To jednak statyczny zrzut — jeden plik HTML ze wszystkim wbudowanym w kod, stworzony do oglądania i iterowania w rozmowie z AI, a nie do prowadzenia na nim strony internetowej.
Traktuj wynik projektowania przez AI jako szybki, wysokiej jakości mockup — bliższy plikowi z Figmy niż gotowej stronie internetowej. Mówi twojemu deweloperowi dokładnie, czego chcesz. Nie wykonuje za niego jego pracy.
Statyczny wynik HTML/CSS
To, co dostajesz, to pojedynczy plik bez serwera, bez bazy danych i bez systemu zarządzania treścią w tle. Każde „menu”, „formularz” i „wpis na blogu” na stronie to ręcznie wpisany tekst umieszczony w danym miejscu — nic z tego nie jest z niczym połączone. To w porządku, żeby pokazać klientowi czy wspólnikowi, jak wygląda pomysł na projekt. Nie jest to jednak w porządku, gdy w kolejny wtorek trzeba zmienić cenę.
System projektowy, a nie gotowa budowa
Naprawdę użyteczną częścią mockupu z Claude jest zwykle system projektowy ukryty w jego środku — paleta kolorów, skala typografii, rytm odstępów oraz wzorce komponentów (jak zbudowane są karty, przyciski i nagłówki sekcji). To realna praca projektowa, którą deweloper może przenieść bezpośrednio do motywu WordPress, i często jest to element, który wcześniej zajmował najwięcej czasu na początkowym etapie projektu.
Dlaczego nie możesz po prostu wgrać tego do WordPress
WordPress to nie miejsce, w które wrzucasz plik HTML — to system zarządzania treścią. Strony są składane z szablonów PHP, bazy danych i (zwykle) własnej struktury komponentów danego motywu, dzięki czemu możesz edytować tekst, dodawać podstrony i zarządzać nawigacją z panelu administracyjnego bez dotykania kodu. Statyczny mockup nie ma pod spodem nic z tego.
| Aspekt | Mockup wygenerowany przez AI | Docelowa strona WordPress |
|---|---|---|
| Kod | Jeden statyczny plik HTML, wszystko wbudowane w kod | Szablony PHP połączone z systemem treści WordPress |
| Edycja treści | Wymaga ręcznej edycji surowego kodu | Edycja z panelu administracyjnego WordPress — bez kodu |
| Wydajność | Niezoptymalizowane, często zbyt duże pliki | Zminifikowane, buforowane i zoptymalizowane obrazy dla realnego czasu ładowania |
| Struktura SEO | Brak metadanych, mapy strony, danych strukturalnych | Tytuły, meta tagi, mapa strony i dane strukturalne na miejscu |
| Funkcje dynamiczne | Formularze i menu to statyczny tekst | Prawdziwe formularze, dynamiczne menu, wyszukiwarka, integracje z wtyczkami |
| Bezpieczeństwo i aktualizacje | Brak środowiska produkcyjnego do zabezpieczenia | Zarządzane aktualizacje rdzenia i wtyczek, kopie zapasowe, monitoring |
Nic z tego nie jest zarzutem wobec mockupu — on nigdy nie miał być stroną produkcyjną. To po prostu powód, dla którego „zbuduj to” jest realnym zakresem pracy, a nie zwykłym kopiuj-wklej.
Claude Design daje ci front strony w ciągu popołudnia. Rozwój w WordPress — struktura motywu, modele treści, wydajność — to właśnie to, co zamienia go w dom, w którym da się faktycznie zamieszkać.
Realistyczny proces: od mockupu do działającej strony
Oto wersja tego procesu, która naprawdę działa, oparta na projektach, które prowadziliśmy od punktu wyjścia wygenerowanego przez AI aż do uruchomienia:
- Wygeneruj koncepcję w Claude — opisz swoją firmę, potrzebne sekcje i ton, na jakim ci zależy, i pracuj nad układem oraz strukturą tekstów, aż statyczna strona zacznie wyglądać dobrze.
- Wyodrębnij system projektowy — kolory, skalę typografii, odstępy i wzorce komponentów — i traktuj to jako źródło prawdy, a nie dokładne piksele mockupu.
- Odbuduj to jako prawdziwy motyw WordPress (kodowany ręcznie lub w kreatorze stron, np. Elementor czy Bricks), podpinając rzeczywistą nawigację, typy treści i szablony.
- Dodaj funkcjonalność, której nigdy nie było w mockupie — działające formularze, wtyczkę SEO, buforowanie i optymalizację obrazów.
- Przetestuj na różnych urządzeniach i przeprowadź prawdziwą analizę wydajności (Core Web Vitals, a nie tylko „czy dobrze wygląda na moim laptopie”), zanim cokolwiek trafi na produkcję.
Kroki 1 i 2 to miejsce, w którym AI naprawdę skraca harmonogram. Kroki od 3 do 5 to nieunikniony rozwój w WordPress — a pominięcie ich to prosta droga do strony, która dobrze wygląda na zrzucie ekranu i psuje się w chwili, gdy prawdziwy odwiedzający otworzy ją na telefonie.
Gdzie narzędzia AI do projektowania naprawdę oszczędzają czas
Nie jesteśmy wobec tego sceptyczni — użyte do właściwej części pracy naprawdę oszczędzają czas:
- Szybkie eksplorowanie koncepcji przed prezentacją dla klienta lub decyzją wewnątrz firmy, bez rezerwowania czasu projektanta na trzy kierunki, które i tak trafią do kosza.
- Tworzenie tekstów i struktury strony — jakich sekcji potrzebuje strona i w jakiej kolejności — zanim ktokolwiek zajmie się finalnymi treściami.
- Punkt odniesienia dla wzorców komponentów — jak może wyglądać tabela cenowa czy akordeon FAQ — od którego deweloper może zacząć, zamiast startować od zera.
- Szybkie szkice stron docelowych pod konkretną kampanię, gdzie szybkość liczy się bardziej niż długoterminowa edytowalność.
Gdzie im nie wystarcza
Ta sama szczerość w drugą stronę: są elementy prawdziwej strony, których mockup od AI nie dotyka, i żadne promptowanie tego nie zmieni.
- Złożona funkcjonalność dynamiczna — rezerwacje, płatności w WooCommerce, logika systemu członkowskiego — którą trzeba zbudować i przetestować na prawdziwych zachowaniach użytkowników, a nie tylko opisać.
- Naprawdę indywidualne zdjęcia lub ilustracje dopasowane do twojej firmy, w przeciwieństwie do ogólnych grafik zastępczych.
- Testy w różnych przeglądarkach i pod kątem dostępności, które wychwytują problemy niewidoczne na pojedynczym zrzucie ekranu.
- Techniczna implementacja SEO — elementy, które faktycznie czytają wyszukiwarki, a nie tylko to, co widzą odwiedzający.
- Długoterminowa możliwość edycji przez kogoś z twojego zespołu, kto nie jest deweloperem.
Pytania warte zadania, zanim zapłacisz komuś za „po prostu zbudowanie mockupu”
- Czy odbudowujecie to jako prawdziwy motyw WordPress, czy po prostu wrzucacie statyczny HTML na stronę i nazywacie to gotowym produktem?
- Co dzieje się z systemem projektowym w stosunku do dokładnego układu — dopasujecie go piksel w piksel, czy potraktujecie jako mocny punkt odniesienia?
- Czy będę mógł potem sam edytować treści, tak jak na każdej innej stronie WordPress?
- Na czym opiera się wycena — na przekazanym mockupie, czy na rzeczywistych funkcjach (rezerwacje, sklep, system członkowski), które on sugeruje?
Podsumowanie
Projekt wygenerowany przez AI to naprawdę użyteczny punkt startowy — skraca do jednego popołudnia część projektu, która wcześniej oznaczała tygodnie ustaleń nad układem i tekstami. Nie jest to jednak gotowa strona internetowa, a traktowanie go jako takiej to prosta droga do przekroczenia budżetu w pogoni za „po prostu dopasuj to dokładnie do mockupu” zamiast zbudowania czegoś, co faktycznie działa. Wprowadź mockup jako brief, a nie gotowy produkt, a reszta procesu pójdzie dzięki temu szybciej.
Tworzy i hostuje strony WordPress dla małych firm. Pisze o praktycznej stronie prowadzenia strony internetowej — kosztach, szybkości i tym, za co naprawdę warto płacić.
