Jak zbudować sklep WooCommerce z Claude Code i uniknąć pułapek?

Założenie profesjonalnego sklepu internetowego dla małej firmy często wiąże się z trudnymi kompromisami budżetowymi i technologicznymi. Z jednej strony przedsiębiorcy potrzebują unikalnego, dopracowanego w każdym pikselu wyglądu oraz płynnej integracji z lokalnymi systemami magazynowymi. Z drugiej strony tradycyjne wdrożenia dedykowane potrafią kosztować fortunę, zmuszając właścicieli do korzystania z gotowych, ciężkich szablonów, które spowalniają działanie witryny i utrudniają pozycjonowanie w wyszukiwarkach.

W świecie nowoczesnych technologii pojawia się jednak alternatywa, która rewolucjonizuje podejście do programowania i tworzenia stron internetowych. Wykorzystanie zaawansowanych narzędzi sztucznej inteligencji, takich jak Claude Code, pozwala na drastyczne obniżenie kosztów wdrożenia niestandardowych funkcji w e-commerce. W tym artykule przyjrzymy się realnemu studium przypadku, w którym programista samodzielnie zbudował produkcyjny sklep internetowy dla marki odzieżowej, zastępując większość zespołu deweloperskiego sztuczną inteligencją.

Projekt ten udowodnił, że dzięki AI można osiągnąć gigantyczne oszczędności budżetowe i stworzyć lekki, szybki sklep oparty na WordPressie i WooCommerce. Jednocześnie realizacja ta obnażyła konkretne wyzwania techniczne i pułapki, na które musi uważać każdy właściciel firmy decydujący się na wdrożenie sztucznej inteligencji w swoich procesach biznesowych. Przyjrzyjmy się szczegółom tej wyjątkowej realizacji.

Pułapka domyślnych, kosztownych systemów ERP i CMS

W omawianym przypadku marka odzieżowa potrzebowała sklepu zsynchronizowanego z ich systemem magazynowym 1C – oprogramowaniem ERP i POS obsługującym sprzedaż detaliczną, które komunikuje się ze światem zewnętrznym wyłącznie za pomocą plików XML. Standardowa odpowiedź branży na takie wymaganie jest zawsze taka sama: należy zbudować sklep na platformie Bitrix (popularnym komercyjnym systemie CMS w tamtym regionie), który posiada gotowy moduł wymiany danych oraz bazę integratorów potrafiących go wdrożyć.

Dla małego butiku z jedną lokalizacją takie domyślne rozwiązanie okauje się jednak finansową katastrofą. Koszt licencji, coroczne odnowienia oraz opłaty dla integratorów potrafią pochłonąć niemal cały budżet projektu, zanim powstanie jakakolwiek unikalna funkcja. Co więcej, klient posiadał już gotowy prototyp w React o estetyce "quiet luxury" (cztery kolory, dwa kroje pisma, całkowity brak zaokrągleń krawędzi) i wymagał jego dokładnego odwzorowania piksel do piksela, a nie tylko przybliżonej kopii. Narzucenie takiego designu na gotowy szablon komercyjnego CMS-a zajęłoby więcej czasu niż napisanie motywu od zera.

Mimo małego budżetu, wymagania funkcjonalne nie uległy zmniejszeniu. Sklep musiał obsługiwać integrację stanów magazynowych w czasie rzeczywistym (gdzie każda para rozmiar-kolor ma własny licznik), płatności kartą i szybkie przelewy przez lokalnego operatora, dostawy kurierskie, baner cookies zgodny z lokalnym prawem oraz śledzenie zdarzeń e-commerce. Wszystko to na budżecie, który teoretycznie wykluczał tak zaawansowane wdrożenie.

Lekki i wydajny stos technologiczny bez page builderów

Aby zmieścić się w budżecie i zapewnić najwyższą wydajność, deweloper zdecydował się na całkowite odrzucenie wtyczek typu page builder, takich jak Elementor. W projektach niskobudżetowych rezygnacja z kreatorów stron to czysta matematyka: każda taka wtyczka obniża wydajność witryny, uzależnia od harmonogramu aktualizacji zewnętrznych dostawców i wprowadza zbędną warstwę między projektem graficznym a kodem, nad którym deweloper ma pełną kontrolę.

Zamiast tego zastosowano nowoczesny i czysty stos technologiczny:

• CMS i E-commerce: WordPress z motywem w pełni opartym na blokach (FSE - Full Site Editing) stworzonym od zera, uzupełniony o WooCommerce i WooCommerce Blocks oraz minikoszyk działający przez Store API.
• Backend: PHP 8 z modułową strukturą katalogu inc/ oraz niestandardowymi polami rejestrowanymi bezpośrednio w kodzie, zamiast przez interfejs administracyjny.
• Frontend: Czyste moduły ES (plain ES modules) bez biblioteki jQuery, wykorzystanie IntersectionObserver do animacji przewijania oraz history.pushState do zarządzania stanem filtrów.
• Tokeny projektowe: Plik theme.json jako jedyne źródło prawdy, z którego WordPress automatycznie generuje zmienne CSS (cztery kolory, skala odstępów 8px, dwa kroje pisma).
• Synchronizacja ERP: Protokół CommerceML działający w czasie rzeczywistym.

Claude Code w akcji: Jak AI pisało kod produkcyjny

W tym projekcie sztuczna inteligencja nie była jedynie zabawką do generowania prostych skryptów. Narzędzie Claude Code napisało większość kodu źródłowego, podczas gdy człowiek pełnił rolę architekta systemu oraz recenzenta (code reviewer) każdej linijki kodu, którą dotknęło AI. Do automatyzacji pracy wykorzystano również serwery MCP (Model Context Protocol), które pozwalały na uruchamianie testów przeglądarkowych Playwright oraz automatyczne wdrażanie kodu na serwer przez SSH.

Taki podział pracy pozwolił na błyskawiczne tempo wdrażania zmian. Plik functions.php został zaprojektowany tak, aby nie zawierać żadnej logiki biznesowej, a jedynie spinać poszczególne moduły:

// functions.php: wiring only, no logic
require_once get_theme_file_path ( 'inc/setup.php' );
require_once get_theme_file_path ( 'inc/assets.php' );
require_once get_theme_file_path ( 'inc/woocommerce.php' );
require_once get_theme_file_path ( 'inc/ajax-handlers.php' );

Powtarzające się sekcje stały się natywnymi wzorcami bloków (block patterns), nagłówek i stopka zostały wydzielone jako części szablonu (template parts), a domyślne szablony WooCommerce były nadpisywane wyłącznie w miejscach, w których standardowy kod HTML psuł założenia projektowe.

Co poszło nie tak? Ograniczenia i kłótnie z AI

Choć brzmi to jak idealny scenariusz, rzeczywistość "kodowania sterowanego intencją" (vibe coding) przyniosła realne problemy i błędy. Narzędzia AI potrafią być niezwykle uparte. Najlepszym tego przykładem była zasada "zero border radius" (całkowity brak zaokrągleń krawędzi w elementach graficznych sklepu). Ta jedna prosta reguła stylistyczna wywołała więcej sporów i kłótni z asystentem AI niż jakikolwiek inny element projektu. Claude Code wielokrotnie próbował przemycić zaokrąglenia w generowanym kodzie CSS, co wymagało ciągłych korekt ze strony programisty.

Doświadczenie to pokazało, że bez silnego nadzoru technicznego i precyzyjnie określonej architektury, kod generowany przez sztuczną inteligencję szybko staje się niespójny. AI ma tendencję do wybierania najprostszych, często przestarzałych rozwiązań, jeśli nie zostanie odpowiednio nakierowane. Rola człowieka jako architekta dbającego o czystość kodu PHP 8 oraz optymalizację zapytań do bazy danych WooCommerce okazała się kluczowa dla powodzenia całego przedsięwzięcia.

Co to oznacza dla małej firmy? (Lokalna perspektywa)

Dla właścicieli małych firm, również tych działających lokalnie na Śląsku – w miastach takich jak Czechowice-Dziedzice, Bielsko-Biała czy Katowice – wnioski z tego projektu są przełomowe. Pokazują one, że nowoczesny, unikalny i niezwykle szybki sklep internetowy nie musi wiązać się z budżetem rzędu kilkudziesięciu tysięcy złotych i zatrudnianiem wieloosobowej agencji deweloperskiej.

Dzięki wykorzystaniu zaawansowanych narzędzi AI przez doświadczonych projektantów, proces powstawania dedykowanych rozwiązań ulega radykalnemu skróceniu. W PROWEBCRAFTING łączymy tę nowoczesną metodologię z dbałością o detale. Odwiedzając naszą stronę prowebcrafting.com, możesz przekonać się, jak pomagamy lokalnym przedsiębiorcom wdrażać zoptymalizowane sklepy WooCommerce, które nie tylko wyglądają dokładnie tak, jak sobie zaplanujesz, ale też działają błyskawicznie i bez problemu integrują się z Twoimi systemami magazynowymi czy płatnościami online.

Kluczem do sukcesu jest eliminacja zbędnego balastu technologicznego. Rezygnacja z gotowych szablonów na rzecz natywnego systemu bloków WordPressa (FSE) sprawia, że strona ładuje się błyskawicznie. Dla lokalnego biznesu oznacza to lepszą pozycję w wynikach wyszukiwania Google na terenie Śląska oraz znacznie wyższą konwersję – klienci po prostu nie rezygnują z zakupów z powodu wolno działającej witryny.

Podsumowanie

Zastąpienie części zespołu programistów narzędziem Claude Code przy budowie produkcyjnego sklepu WooCommerce udowodniło, że sztuczna inteligencja jest gotowa do realizacji zaawansowanych projektów e-commerce. Pozwala ona na znaczne oszczędności finansowe i pozwala małym firmom konkurować z rynkowymi gigantami. Należy jednak pamiętać, że AI to jedynie potężne narzędzie w rękach rzemieślnika. Bez odpowiedniego nadzoru architektonicznego, znajomości standardów PHP 8 oraz precyzyjnego planowania, projekt może łatwo utknąć w gąszczu drobnych błędów. Kluczem do sukcesu pozostaje synergia ludzkiego doświadczenia i technologicznej wydajności sztucznej inteligencji.

Zdjęcie: Ron Lach / Pexels