Jak zbudowaliśmy VEX Systems: Claude Design + Claude Code

Nowa era inżynierii: jak AI zmieniło budowę platform B2B

Tradycyjny proces tworzenia dedykowanej platformy e-commerce klasy B2B w agencjach software house trwa od 6 do 12 miesięcy. Angażuje sztab ludzi: project managerów, analityków, UI/UX designerów, programistów frontendowych, backendowców i testerów QA. Większość tego czasu pochłaniają spotkania, nieprecyzyjne briefy, poprawianie kodu po juniorach i walka z niespójną architekturą.

W Alex Media Lab zrealizowaliśmy pełne wdrożenie platformy VEX Systems (katalog 897+ produktów, integracja Subiekt GT, 4 wersje językowe, system biletów serwisowych, dual-channel B2B/B2C) w zaledwie 3 miesiące.

Nie zatrudniliśmy armii programistów. Zamiast tego stworzyliśmy zintegrowany tandem: doświadczony Główny Architekt Systemowy + zaawansowane narzędzia autonomicznego kodowania (Claude Code CLI oraz Claude Design).

Poniżej odsłaniamy kulisy tego wdrożenia i pokazujemy, jak wygląda nowoczesny warsztat inżynierski w 2026 roku.

Faza 1: Architektura i Claude Design (Zanim powstała pierwsza linijka kodu)

Złota zasada inżynierii Alex Media Lab brzmi: „Kod jest najtańszą częścią projektu — najdroższe są błędy w strukturze”.

Przed uruchomieniem jakiegokolwiek generatora kodu, Główny Architekt opracował kompleksowy dokument techniczny — Site Engine Blueprint. Zdefiniowaliśmy:
* Trzy niezależne warstwy systemu: Front (publiczny interfejs i kokpit), Back (Django REST API) oraz Engine (niezależne procesy w tle, ETL Subiekta, silnik generowania treści).
* Relacyjną strukturę bazy danych PostgreSQL z eliminacją redundantnych kolumn-keszy.
* Rygorystyczną zasadę: AI odpowiada wyłącznie za treści nieprecyzyjne (opisy, tłumaczenia, scoring leadów), podczas gdy wszystkie operacje krytyczne (ceny, stany magazynowe, sumy zamówień) wykonuje deterministyczny kod z podwójną walidacją na serwerze.

Dzięki narzędziom Claude Design przygotowaliśmy spójną bibliotekę komponentów UI, opartą na zmiennych CSS, surowej typografii technicznej (Space Grotesk, Manrope) oraz ciemnym motywie przystosowanym do pracy w warunkach reżyserek oświetleniowych.

Faza 2: Claude Code CLI — terminalowy partner inżyniera

Zwykłe interfejsy czatu z modelami AI (jak ChatGPT w przeglądarce) mają fundamentalną wadę: brak kontekstu całego repozytorium i brak możliwości bezpośredniej edycji plików w środowisku deweloperskim.

Wykorzystaliśmy Claude Code CLI działający bezpośrednio w środowisku terminala. Model miał wgląd w całe drzewo projektu, strukturę bazy danych oraz konfigurację środowiska testowego.

# Przykład sesji roboczej z Claude Code CLI
$ claude-code --autonomous
> Zadanie: Zaimplementuj moduł `pricing.py` zgodnie ze specyfikacją z Blueprintu 02.
> Wymagania:
  - Funkcja `calculate_tier_price(product, user, channel)`
  - Uwzględnij rabaty przypisane do firmy (10%, 25%, 40%)
  - Zablokuj ujawnianie ceny zakupu EUR w API publicznym
  - Napisz testy jednostkowe weryfikujące zaokrąglenia i walutę PLN

Claude Code nie pisał generycznego kodu z internetu — implementował precyzyjną logikę biznesową w oparciu o nasz standard: jeden moduł = один plik = jedna odpowiedzialność (np. catalog_api.py, pricing.py, omni_leads.py).

Faza 3: Rygor modularny i automatyczne testy w Claude Code

Samo wygenerowanie kodu przez AI to dopiero połowa sukcesu. Prawdziwym wyzwaniem jest zapewnienie, by kod był czysty, modularny i odporny na awarie. W tym celu wdrożyliśmy rygor architektoniczny:

Standard modularny ≤300 linii kodu na plik: Jeśli moduł zaczynał przekraczać 300 linii, Claude Code automatycznie wydzielał funkcje pomocnicze do dedykowanych podmodułów, zapobiegając powstawaniu spaghetti-code.
Kierunkowy graf zależności (DAG): Architektura bez zapętleń importów (circular imports). Warstwy wyższe mogą importować niższe, nigdy odwrotnie.
142 zautomatyzowane testy jednostkowe: Przed wdrożeniem jakiejkolwiek zmiany na serwer produkcyjny, potok testowy weryfikował:
Prawidłowość przeliczania podatku VAT 23% i walidację numerów NIP w bazie VIES.
Odporność endpointów na ataki typu SSRF i wstrzykiwanie kodu SQL.
Bezpieczeństwo formularzy zamówień (zapobieganie modyfikacji cen w przeglądarce przez manipulację parametrami POST).

# Fragment zestawu testowego VEX Systems
def test_order_tamper_prevention(client, b2b_user, moving_head_product):
    client.force_login(b2b_user)
    # Próba wysłania zmanipulowanej kwoty z poziomu przeglądarki
    payload = {
        "product_id": moving_head_product.id,
        "quantity": 2,
        "declared_total_net": 100.00  # Prawdziwa cena hurtowa to 4 800.00 PLN
    }
    response = client.post("/api/orders/create/", payload)
    order = Order.objects.get(id=response.json()["order_id"])

    # Serwer ZAWSZE przelicza cenę z bazy danych
    assert order.total_net == 4800.00
    assert order.data["tamper_detected"] is True

Faza 4: Frontend bez Webpacka — kompilacja esbuild po jednym pliku

Jedną z najważniejszych decyzji technicznych było odrzucenie ciężkich narzędzi frontendowych. W tradycyjnym projekcie instalacja Next.js skutkuje pobraniem setek tysięcy plików do node_modules. Jeśli narzędzie AI ma przeczytać taki projekt, gubi się w gąszczu zależności i frameworkowego narzutu.

Zastosowaliśmy unikalną architekturę:
* Każdy komponent UI powstaje w czystym pliku .jsx.
* Kompilacja odbywa się przez błyskawiczny kompilator esbuild dla każdego pliku z osobna (esbuild Card.jsx --outfile=Card.compiled.js).
* Własny skrypt łączący build-cockpit.js scala skompilowane moduły w ściśle określonym porządku.

Dzięki temu kod źródłowy całego frontendu zajmuje zaledwie kilkaset kilobajtów, kompilacja na serwerze trwa poniżej 0.4 sekundy, a Claude Code jest w stanie zanalizować dowolny komponent w 2 sekundy.

Wyniki biznesowe: Co to oznacza dla naszych partnerów?

Dla właściciela VEX Systems ten model pracy przyniósł trzy kluczowe korzyści:

Skrócenie czasu Time-to-Market o ponad 60%: Od koncepcji do działającej, przetestowanej platformy produkcyjnej minęło 12 tygodni zamiast roku.
Drastyczne obniżenie kosztów rozwoju: Brak konieczności opłacania 6-osobowego zespołu deweloperskiego.
100% niezależności technologicznej: Całość kodu, bazy danych i infrastruktury jest własnością klienta. Żadnych ukrytych licencji, abonamentów SaaS czy uzależnienia od platform zewnętrznych.

Tą samą metodologią budujemy platformy dla kolejnych klientów Alex Media Lab — łącząc strategiczną myśl inżynierską z bezprecedensową szybkością pracy w Claude Code.