Sklep premium z ręcznie robionymi świecami - zbudowany w modelu AI-first
Marka z segmentu premium lifestyle/rękodzieło potrzebowała pełnego sklepu WooCommerce z własnym design systemem, niestandardowymi blokami Gutenberg i kilkunastoma widokami - od strony głównej po panel klienta i e-mail transakcyjny. Projekt graficzny wykonałem samodzielnie w Claude Design. Warstwę techniczną opieram na motywie startowym z architekturą MVC, który dostosowuję i rozwijam na potrzeby projektu. Całą warstwę implementacyjną prowadzę w modelu AI-first: GitHub Copilot generuje kod bloków, Claude Cowork obsługuje zadania wieloplikowe i kontekstowe, ja projektuję architekturę, weryfikuję output i akumuluję wiedzę projektową. Projekt jest aktualnie w fazie testów.
- 10skillówbiblioteka wiedzy domenowej dla AI (konwencje bloków, SCSS, dostępność, WooCommerce, AJAX i inne)
- 2narzędzia AICopilot w IDE + Claude Cowork, świadomie przypisane do różnych ról
- 13+stronwdrożonych w modelu AI-first (strona główna, sklep, karty produktów, kategorie, moje konto, 404 i inne)
- 0bloków ręczniebez projektu i weryfikacji; każdy oparty na mojej decyzji architektonicznej i code review
WordPress + Gutenberg to za dużo boilerplate'u na jeden projekt
Nowoczesny sklep WooCommerce oparty na WordPress Full Site Editing to dziesiątki bloków Gutenberg - każdy z własnym block.json, komponentem React w edytorze, szablonem PHP, plikami SCSS. Przy klasycznym podejściu: developer siada, scaffolduje plik po pliku, koduje ręcznie, popełnia literówki w tokenach, zapomina o escaping w PHP, mija się z design systemem.
Do tego dochodzi design system - zestaw tokenów kolorów, typografii i spacingów, który musi być spójny w kodzie, w edytorze i na froncie. Bez automatyzacji łatwo o rozbieżności między projektem a implementacją.
Potrzebowałem podejścia, które skróci czas implementacji bez obniżenia jakości - i w którym AI jest pierwszorzędnym wykonawcą kodu, nie tylko autouzupełnianiem.
Jak AI-first zmienia budowanie sklepu
Design system zaprojektowany w Claude Design, przeniesiony do theme.json
Projekt graficzny wykonałem samodzielnie w Claude Design - paleta kolorów, typografia, spacing, komponenty UI dla wszystkich widoków. Efekt: kompletny design system eksportowany jako pliki HTML, które w projekcie pełnią rolę wejścia dla AI. Przed implementacją każdego bloku AI otwiera odpowiedni plik HTML i traktuje go jako jedyne źródło prawdy o layoucie. Jednocześnie wszystkie tokeny trafiły do theme.json jako zmienne CSS - dostępne zarówno w edytorze Gutenberg, jak i w SCSS.
Warstwa kontekstu AI: skills, prompty i agents.md
Pracuję w oparciu o wypracowany framework AI (.github/skills/, .github/prompts/), który współrozwijam i dostosowuję per projekt. Na potrzeby tego projektu rozszerzyłem go o własną warstwę .project-context/ z regułami specyficznymi dla klienta. Plik agents.md napisałem samodzielnie - to onboarding dla AI zawierający design tokeny, konwencje SCSS/BEM, listę dostępnych skillów i workflow tworzenia bloku krok po kroku. AI dostaje ten plik na początku każdej sesji i ma pełny kontekst projektu bez pytania o szczegóły.
Generowanie bloków: developer opisuje, AI implementuje
Dla każdego bloku Gutenberg workflow wygląda tak: opisuję AI co blok ma robić, AI samo odczytuje theme.json po aktualne tokeny z live pliku (nie z treningu), pyta o brakujące parametry, scaffolduje przez CLI i pisze edit.js, save.js / szablon PHP oraz SCSS. Ja czytam diff, weryfikuję i zatwierdzam albo koryguję. Kluczowa zasada: AI jest zmuszone odczytać tokeny z pliku przed implementacją - to eliminuje halucynowanie kolorów, fontów i spacingów, które w projekcie nie istnieją. Przykład: przy bloku z dynamiczną listą produktów ja zdecydowałem o typie React/PHP (WP_Query po stronie serwera), AJAX load more zamiast paginacji i filtrowaniu bez przeładowania strony. AI napisało block.json, edit.js, szablon PHP i SCSS. Ja przejrzałem escaping w PHP, sprawdziłem dostępność i zatwierdziłem.
/review-block jako systematyczny code review
Po implementacji każdego bloku uruchamiam /review-block - prompt zlecający AI audyt w czterech obszarach: bezpieczeństwo (output escaping w PHP), dostępność (WCAG 2.1 AA), konwencje motywu (block.json, wzorce React/PHP) i jakość SCSS/BEM. AI zwraca listę problemów z poziomami ważności i gotowymi poprawkami. Pierwsza siatka bezpieczeństwa przed stagingiem.
Dwa narzędzia AI, dwie świadomie rozdzielone role
GitHub Copilot działa w IDE - generuje implementacje, reaguje na komendy /make-block, /review-block, widzi otwarty plik i kontekst repo. Claude Cowork obsługuje zadania kontekstowe i wieloplikowe - czyta HTML designu, analizuje pliki projektowe, przetwarza zadania obejmujące wiele plików jednocześnie. To nie są zamienne narzędzia - zostały świadomie przypisane do różnych typów pracy.
Co dał model AI-first
Projekt jest aktualnie w fazie testów. Poniżej podsumowanie dotychczasowych efektów.
- Kompletny design system wykonany w Claude Design, przeniesiony do theme.json
- 13+ stron i widoków wdrożonych w modelu AI-first
- Warstwa kontekstu AI: agents.md, 10 plików skill, 8+ promptów workflow
- Systematyczna weryfikacja outputu AI: linting (pre-commit), /review-block, WCAG audit
- .project-context/ z akumulowaną wiedzą projektową (learned-lessons.md, project-rules.md, business-context.md)
Technologie
- WordPress (FSE / Gutenberg)
- WooCommerce
- React / JavaScript
- PHP 8.1+
- SCSS / BEM
- Webpack
- GitHub Copilot
- Claude AI (Cowork)
- Claude Design