Vibe coding z Claude Code: jak zbudować aplikację od zera z 10 agentami AI - framework S.H.I.P.

92% deweloperów w USA korzysta z AI codziennie. W ostatniej kohorcie Y Combinator (W25) aż 21% startupów deklaruje, że ponad 91% ich kodu napisała sztuczna inteligencja. Collins Dictionary ogłosił “vibe coding” Słowem Roku 2025. A Andrej Karpathy - człowiek, który wymyślił to pojęcie - w lutym 2026 stwierdził, że vibe coding to już przeszłość. Nastała era agentic engineering.

Co to znaczy dla Ciebie? Że nie musisz uczyć się programowania, żeby zbudować własne narzędzie. Musisz natomiast nauczyć się współpracować z zespołem agentów AI - definiować cele, nadzorować pracę i weryfikować wyniki.

W tym artykule przejdziesz ze mną od pustego folderu do działającego Campaign Performance Dashboard - aplikacji, która agreguje dane z kampanii reklamowych i wizualizuje CTR, CPC i ROAS w czasie rzeczywistym. Użyjesz do tego 10 agentów AI w Claude Code, mojego autorskiego frameworku S.H.I.P. i gotowych promptów, które możesz skopiować. Jeden weekend. Zero wcześniejszego doświadczenia z kodem. Zaczynamy.

Czym jest vibe coding i dlaczego marketerzy powinni go znać?

W lutym 2025 roku Andrej Karpathy - współzałożyciel OpenAI i były szef AI w Tesli - opublikował post, który zmienił sposób myślenia o programowaniu. Opisał podejście, w którym “po prostu widzisz rzeczy, mówisz rzeczy, uruchamiasz rzeczy i to głównie działa”. Nazwał je vibe coding. Rok później, w lutym 2026, sam Karpathy ogłosił, że to pojęcie jest już passé - bo AI przeszło od asystowania do autonomicznego działania. Nowy termin? Agentic engineering.

Vibe coding to podejście do tworzenia oprogramowania, w którym opisujesz w języku naturalnym, co chcesz zbudować, a AI generuje kod. Nie piszesz - nadzorujesz. Im bardziej zaawansowane narzędzie, tym mniej musisz interweniować.

Collins Dictionary nie bez powodu wybrał “vibe coding” na Słowo Roku 2025. To nie moda - to fundamentalna zmiana w relacji człowiek-komputer. A dla marketerów to coś jeszcze większego: koniec zależności od działu IT.

Jeśli chcesz zobaczyć, jakie narzędzia do vibe codingu istnieją na rynku i które wybrać na swoim poziomie zaawansowania, sprawdź mój przegląd 50 narzędzi AI dla marketerów. A jeśli wahasz się między Claude a innymi modelami, zacznij od porównania ChatGPT vs Claude vs Gemini.

Poziom	Nazwa	Co robisz	Przykład narzędzia
1	Vibe coding	Opisujesz, AI generuje, Ty akceptujesz	Bolt.new, Lovable
2	Guided vibe coding	Opisujesz, AI generuje, Ty recenzujesz i korygujesz	Cursor, Windsurf
3	Agentic engineering	Definiujesz cel, AI planuje, buduje i testuje autonomicznie	Claude Code, Devin

Ten artykuł operuje na poziomie 3 - agentic engineering z Claude Code. Dajesz cel. Agenci robią resztę. Ty nadzorujesz.

Co zbudujemy w tym tutorialu?

Campaign Performance Dashboard - narzędzie, które każdy marketer chciałby mieć, ale zwykle czeka tygodniami na dział IT lub płaci freelancerowi 5-10 tysięcy złotych.

+----------------------------------------------------------+
|  Campaign Performance Dashboard          [Logout] [PDF]  |
|----------------------------------------------------------|
|  Filtry: [Google Ads v] [Ostatnie 30 dni v] [Porównaj]   |
|----------------------------------------------------------|
|  +-- CTR --------+  +-- CPC --------+  +-- ROAS -------+ |
|  | 3,42% (+0,8%) |  | 1,24 PLN      |  | 4,2x          | |
|  |   ▲▲▲▲        |  |   ▼▼          |  |   ▲▲▲         | |
|  +---------------+  +---------------+  +---------------+ |
|                                                          |
|  [====== Wykres CTR w czasie ========================]   |
|  [====== Wykres CPC po kampaniach ===================]   |
|                                                          |
|  Tabela kampanii:                                        |
|  | Kampania     | Budżet  | Kliknięcia | CTR   | ROAS  ||
|  | Spring Sale  | 2500 PLN| 3400       | 3,8%  | 4,5x  ||
|  | Brand Aware  | 1200 PLN| 1800       | 2,1%  | 2,8x  ||
+----------------------------------------------------------+

Funkcjonalności:

Logowanie i rejestracja (JWT)
Import danych z CSV + mock API Google Ads i Meta Ads
Wykresy: CTR, CPC, ROAS w czasie (Recharts)
Filtrowanie po platformie, kampanii, zakresie dat
Porównywanie okresów (tydzień do tygodnia, miesiąc do miesiąca)
Eksport raportów do PDF
Responsive design (desktop + mobile)

Stack technologiczny: React 19 + TypeScript + Tailwind + Recharts (frontend), Node.js 20 + Express (backend), PostgreSQL + Prisma (baza danych), Docker + Vercel/Railway (deploy)

Jeśli interesuje Cię głębsza analiza dashboard analitycznych w kontekście marketingowym, zajrzyj do przewodnika po AI analityce marketingowej. A jeśli planujesz wykorzystać dane z takiego dashboardu do hiperpersonalizacji kampanii - tym bardziej warto mieć własne narzędzie zamiast polegać na gotowych raportach.

Kto co robi - 10 agentów mapowanych na framework S.H.I.P.

Szczegółowe konfiguracje każdego z 10 agentów opisałem w artykule o autonomicznym zespole deweloperskim AI. Tu skupiamy się na tym, jak ich użyć w praktyce - na konkretnym projekcie.

Faza S.H.I.P.	Agent	Zadanie w projekcie Dashboard
S - Scope	PM Agent	User stories, acceptance criteria, podział na epiki
H - Handoff	Architect Agent	Architektura systemu, API contract, diagram komponentów
H - Handoff	DB Engineer Agent	Schema PostgreSQL, relacje, migracje Prisma
I - Implement	Frontend Dev Agent	React components, wykresy Recharts, Tailwind UI
I - Implement	Backend Dev Agent	Express API, endpointy REST, logika biznesowa
I - Implement	QA Tester Agent	Testy jednostkowe, integracyjne, E2E
P - Polish	Code Reviewer Agent	Code review, refaktoryzacja, jakość kodu
P - Polish	Security Expert Agent	Audyt bezpieczeństwa, OWASP Top 10
P - Polish	DevOps Agent	Dockerfile, CI/CD pipeline, deploy
P - Polish	Documentation Agent	README, API docs, komentarze w kodzie

Jak skonfigurować Claude Code do vibe codingu?

Zanim zaczniemy budować, musisz przygotować środowisko. Cały setup zajmuje 10-15 minut.

Wymagania

Node.js 20+ (sprawdź: node --version)
npm (instaluje się z Node.js)
Terminal (VS Code terminal, Windows Terminal, iTerm2)
Konto Anthropic z API key lub subskrypcja Claude Max

Instalacja Claude Code

npm install -g @anthropic-ai/claude-code

Po instalacji uruchom claude w terminalu. Przy pierwszym uruchomieniu CLI poprosi Cię o autentykację - API key z console.anthropic.com lub zalogowanie się na konto Claude Max.

Klonowanie repozytorium agentów

Konfiguracje 10 agentów są gotowe do pobrania. Sklonuj repozytorium i skopiuj folder .claude/agents/ do swojego projektu:

git clone https://github.com/pika-pikaa/Full-Stack-Dev-Team_ClaudeCodeCLI.git
mkdir marketing-dashboard && cd marketing-dashboard
cp -r ../Full-Stack-Dev-Team_ClaudeCodeCLI/.claude .

Jeśli nie znasz jeszcze Claude jako narzędzia, zacznij od mojego kompletnego przewodnika po Claude dla marketerów - znajdziesz tam fundamenty, na których buduję ten tutorial.

Claude Max vs API - co wybrać?

Kryterium	Claude Max ($100/mies.)	Claude API (pay-as-you-go)
Koszt	Stały, przewidywalny	Zmienny, zależy od użycia
Limit	Brak limitu wiadomości w CLI	Płacisz za tokeny
Modele	Opus 4.6, Sonnet 4.6, Haiku 4.5	Wszystkie modele, wybór per zapytanie
Dla kogo	Regularni użytkownicy, vibe coderzy	Deweloperzy, API-heavy projekty
Agent Teams	Tak (experimental)	Tak
Typowy koszt projektu	$100 flat	$20-80 za weekend projektu

Moja rekomendacja: Claude Max za $100 miesięcznie. Przy intensywnym vibe codingu API potrafi zjeść tyle w jeden dzień. Max daje spokój głowy i brak limitu.

Jak napisać CLAUDE.md - konstytucję projektu?

CLAUDE.md to najważniejszy plik w Twoim projekcie. To “briefing” dla wszystkich agentów - definiuje standardy, stack technologiczny, konwencje i zasady pracy. Bez niego agenci generują kod w próżni. Z nim - działają jak zsynchronizowany zespół.

3 lokalizacje CLAUDE.md

~/CLAUDE.md              -> Globalne zasady (dla WSZYSTKICH projektów)
./CLAUDE.md              -> Zasady projektu (wersjonowane w Git)
./.claude/local/CLAUDE.md -> Lokalne overrides (nie commitowane)

Claude ładuje wszystkie trzy - od globalnego do lokalnego. Lokalne nadpisują projektowe, projektowe nadpisują globalne.

Gotowy szablon CLAUDE.md dla Marketing Dashboard

# Campaign Performance Dashboard

## Stack
- Frontend: React 19, TypeScript strict, Tailwind CSS 4, Recharts
- Backend: Node.js 20, Express 5, TypeScript
- DB: PostgreSQL 16, Prisma ORM
- Auth: JWT (access + refresh tokens)
- Testing: Vitest + React Testing Library + Playwright

## Konwencje
- Nazwy plików: kebab-case (campaign-chart.tsx)
- Komponenty React: PascalCase (CampaignChart)
- API routes: /api/v1/resource (REST)
- Commity: conventional commits (feat:, fix:, chore:)
- Zmienne env: .env.local (nigdy nie commituj)

## Struktura
/src
  /components    -> Reusable UI components
  /pages         -> Route pages
  /hooks         -> Custom React hooks
  /api           -> Backend routes
  /lib           -> Shared utilities
  /types         -> TypeScript types/interfaces
  /prisma        -> Schema and migrations

## Zasady
- Każdy komponent musi mieć testy
- API endpoints zwracają {data, error, meta}
- Błędy loguj przez centralny error handler
- Brak any w TypeScript - zawsze definiuj typy
- Max 200 linii na plik - podziel, jeśli więcej

Docelowo CLAUDE.md powinien mieć maksymalnie 150 linii. To ograniczenie kontekstowe - dłuższy plik zaczyna rozmywać uwagę modelu. Pisz zwięźle, konkretnie, bez wodolejstwa.

Skills i hooks jako rozszerzenia

Oprócz CLAUDE.md masz do dyspozycji dwa mechanizmy rozszerzające:

Skills (.claude/skills/) - gotowe “umiejętności”, które agent może wywołać (np. skill do generowania migracji Prisma)
Hooks (14 eventów: PreToolUse, PostToolUse, Stop, SessionStart i inne) - skrypty uruchamiane automatycznie przy określonych zdarzeniach (np. auto-lint po każdej edycji pliku)

Więcej o tym, jak konfigurować środowisko wieloagentowe, znajdziesz w artykule o zespołach agentów AI w marketingu, gdzie opisuję Orchestrator Pattern i architekturę komunikacji między agentami.

Faza S - jak zdefiniować zakres z AI Project Managerem?

S.H.I.P. - Faza Scope: Zanim napiszesz linijkę kodu, zdefiniuj CO budujesz, DLA KOGO i JAKIE są kryteria sukcesu. PM Agent tłumaczy Twoją wizję na język, który rozumieją pozostali agenci.

Prompt do PM Agenta

Używam tu frameworku CRISP, który opisałem szczegółowo w osobnym artykule. CRISP daje strukturę, która eliminuje niejednoznaczność:

claude "Działasz jako PM Agent. Kontekst: buduję Campaign Performance Dashboard
dla marketerów - SPA z React, backend Express, baza PostgreSQL. Użytkownicy:
marketing managerowie w firmach 10-200 osób, którzy ręcznie zbierają dane z
Google Ads i Meta Ads do Excela. Rola: rozłóż ten projekt na epiki, user
stories z acceptance criteria i zaproponuj kolejność implementacji. Wynik:
dokument w Markdown z estymacjami w story pointach. Precyzja: każda user story
musi mieć format 'Jako [rola], chcę [funkcja], żeby [wartość]' z 3-5
acceptance criteria."

Plan Mode - jak Claude Code planuje przed implementacją?

Claude Code ma wbudowany tryb planowania. Cykl wygląda tak:

Explore - agent analizuje istniejący kod i kontekst
Plan - tworzy plan działania (widoczny w terminalu)
Implement - realizuje plan krok po kroku
Commit - commituje zmiany z opisem

Możesz wymusić planowanie wpisując /plan lub naciskając Shift+Tab w trakcie pisania prompta. To kluczowe w fazie Scope - chcesz widzieć plan, zanim agent zacznie działać.

Przykładowy output PM Agenta

# Campaign Performance Dashboard - Project Breakdown

## Epic 1: Autentykacja (8 SP)
### US-1.1: Rejestracja użytkownika
Jako marketer, chcę się zarejestrować emailem i hasłem,
żeby mieć własne konto z prywatnymi danymi.

Acceptance Criteria:
- [ ] Formularz z polami: email, hasło, potwierdzenie hasła
- [ ] Walidacja: email unikatowy, hasło min. 8 znaków
- [ ] Po rejestracji automatyczne logowanie + redirect do /dashboard
- [ ] Hasło hashowane bcrypt, nigdy w plaintekście

### US-1.2: Logowanie
Jako zarejestrowany użytkownik, chcę się zalogować,
żeby uzyskać dostęp do moich dashboardów.

Acceptance Criteria:
- [ ] JWT access token (15 min) + refresh token (7 dni)
- [ ] Obsługa błędnych danych (komunikat bez ujawniania czy email istnieje)
- [ ] Protected routes - redirect do /login bez tokenu

## Epic 2: Import danych (13 SP)
### US-2.1: Import CSV
### US-2.2: Mock API Google Ads
### US-2.3: Mock API Meta Ads

## Epic 3: Dashboard i wizualizacje (21 SP)
### US-3.1: Wykresy CTR/CPC/ROAS
### US-3.2: Filtrowanie i porównywanie okresów
### US-3.3: Tabela kampanii z sortowaniem

## Epic 4: Eksport i UX (8 SP)
### US-4.1: Eksport do PDF
### US-4.2: Responsive design

Kolejność: Epic 1 → Epic 2 → Epic 3 → Epic 4
Łącznie: 50 story pointów, estymacja: 2-3 dni z agentami AI

To jest Twoja mapa drogowa. Każda user story staje się osobnym zadaniem dla odpowiedniego agenta. PM rozbił abstrakcyjną wizję “chcę dashboard” na konkretne, mierzalne deliverables.

Jeśli interesuje Cię, jak zarządzać takimi sprintami w metodyce zwinnej, polecam artykuł o frameworku S.P.R.I.N.T. dla zespołów Scrum.

Faza H - jak zaprojektować architekturę z AI Architektem?

S.H.I.P. - Faza Handoff: Architektura to most między wymaganiami a kodem. Architect Agent projektuje “szkielet” aplikacji, a DB Engineer definiuje strukturę danych. Bez tej fazy agenci implementacyjni budują na piasku.

Prompt do Architect Agenta

claude "Działasz jako Architect Agent. Przeczytaj CLAUDE.md i project breakdown
od PM Agenta. Zaprojektuj architekturę Campaign Performance Dashboard:
1) Diagram komponentów (frontend), 2) Architekturę API (backend),
3) Kontrakt API - listę endpointów z request/response,
4) ADR (Architecture Decision Records) dla kluczowych decyzji.
Stack: React 19, Express 5, PostgreSQL 16, Prisma. Monorepo z Turborepo."

Diagram architektury

+--------------------------------------------------+
|                    FRONTEND                       |
|  React 19 + TypeScript + Tailwind + Recharts      |
|                                                    |
|  [LoginPage] [DashboardPage] [ImportPage]          |
|       |              |              |              |
|  [AuthForm]   [ChartPanel]    [CSVUpload]          |
|               [FilterBar]     [APIConnect]         |
|               [CampaignTable]                      |
|               [DateComparator]                     |
|               [PDFExport]                          |
+---------------------+----------------------------+
                      | HTTP/REST
                      v
+---------------------+----------------------------+
|                     API                            |
|  Express 5 + TypeScript                            |
|                                                    |
|  /api/v1/auth/*     -> AuthController              |
|  /api/v1/campaigns/* -> CampaignController         |
|  /api/v1/metrics/*   -> MetricsController          |
|  /api/v1/export/*    -> ExportController           |
|                                                    |
|  Middleware: auth, validation, errorHandler         |
+---------------------+----------------------------+
                      | Prisma ORM
                      v
+---------------------+----------------------------+
|               POSTGRESQL 16                        |
|                                                    |
|  users | campaigns | metrics | imports             |
+--------------------------------------------------+

API contract - kluczowe endpointy

Metoda	Endpoint	Opis	Auth
POST	/api/v1/auth/register	Rejestracja	Nie
POST	/api/v1/auth/login	Logowanie, zwraca JWT	Nie
POST	/api/v1/auth/refresh	Odświeżenie tokenu	Tak
GET	/api/v1/campaigns	Lista kampanii usera	Tak
POST	/api/v1/campaigns/import/csv	Import z CSV	Tak
POST	/api/v1/campaigns/import/google	Mock Google Ads	Tak
POST	/api/v1/campaigns/import/meta	Mock Meta Ads	Tak
GET	/api/v1/metrics?from=&to=&platform=	Metryki z filtrami	Tak
GET	/api/v1/metrics/compare?period1=&period2=	Porównanie okresów	Tak
GET	/api/v1/export/pdf?campaignId=	Eksport PDF	Tak

Prompt do DB Engineer Agenta

claude "Działasz jako DB Engineer Agent. Na podstawie API contractu od Architecta
zaprojektuj schema PostgreSQL z Prisma ORM. Uwzględnij: users (auth),
campaigns (metadane kampanii), metrics (CTR, CPC, ROAS, impressions, clicks,
spend per dzień), imports (historia importów). Relacje: user hasMany campaigns,
campaign hasMany metrics, user hasMany imports. Dodaj indeksy na najczęstsze
zapytania (filtrowanie po dacie i platformie). Wygeneruj plik prisma/schema.prisma."

Schema bazy danych

-- Uproszczony ERD (Prisma wygeneruje migracje)

CREATE TABLE users (
    id          UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    email       VARCHAR(255) UNIQUE NOT NULL,
    password    VARCHAR(255) NOT NULL,
    created_at  TIMESTAMP DEFAULT NOW()
);

CREATE TABLE campaigns (
    id          UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id     UUID REFERENCES users(id) ON DELETE CASCADE,
    name        VARCHAR(255) NOT NULL,
    platform    VARCHAR(50) NOT NULL, -- 'google_ads' | 'meta_ads'
    status      VARCHAR(20) DEFAULT 'active',
    created_at  TIMESTAMP DEFAULT NOW()
);

CREATE TABLE metrics (
    id            UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    campaign_id   UUID REFERENCES campaigns(id) ON DELETE CASCADE,
    date          DATE NOT NULL,
    impressions   INTEGER DEFAULT 0,
    clicks        INTEGER DEFAULT 0,
    spend         DECIMAL(10,2) DEFAULT 0,
    conversions   INTEGER DEFAULT 0,
    revenue       DECIMAL(10,2) DEFAULT 0,
    -- Computed: CTR = clicks/impressions, CPC = spend/clicks, ROAS = revenue/spend
    UNIQUE(campaign_id, date)
);

CREATE TABLE imports (
    id          UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id     UUID REFERENCES users(id) ON DELETE CASCADE,
    source      VARCHAR(50) NOT NULL, -- 'csv' | 'google_api' | 'meta_api'
    file_name   VARCHAR(255),
    rows_count  INTEGER DEFAULT 0,
    status      VARCHAR(20) DEFAULT 'completed',
    created_at  TIMESTAMP DEFAULT NOW()
);

CREATE INDEX idx_metrics_campaign_date ON metrics(campaign_id, date);
CREATE INDEX idx_campaigns_user_platform ON campaigns(user_id, platform);

Architect Agent powinien także wygenerować ADR (Architecture Decision Records) - krótkie dokumenty uzasadniające kluczowe decyzje (dlaczego Prisma zamiast TypeORM, dlaczego JWT zamiast sesji). To przydaje się później, gdy Code Reviewer pyta “dlaczego tak?”.

Po więcej o konfiguracji agenta-architekta i jego pełnym system prompcie odsyłam do autonomicznego zespołu deweloperskiego AI.

Faza I - jak budować aplikację równolegle z 3 agentami?

S.H.I.P. - Faza Implement: Tu dzieje się magia. Trzej agenci pracują równolegle - frontend, backend i QA - każdy w swoim terminalu. Claude Code obsługuje to przez Git Worktrees, które tworzą izolowane kopie repozytorium.

Jak działa równoległość w Claude Code?

Otwierasz trzy terminale. Każdy uruchamia osobną instancję Claude Code. Dzięki Git Worktrees każdy agent pracuje na swojej kopii kodu, bez konfliktów:

# Terminal 1 - Frontend
cd marketing-dashboard
claude "/worktree frontend"

# Terminal 2 - Backend
claude "/worktree backend"

# Terminal 3 - QA
claude "/worktree qa"

Alternatywnie, jeśli masz dostęp do Agent Teams (experimental feature, od Opus 4.6), możesz uruchomić 2-16 agentów z jednego terminala. Ale na potrzeby tego tutoriala - trzy osobne terminale są prostsze i stabilniejsze.

Terminal 1 - Frontend Dev Agent

claude "Działasz jako Frontend Dev Agent. Przeczytaj CLAUDE.md, API contract
i schema DB. Zaimplementuj Epic 3 (Dashboard i wizualizacje) z project breakdown.
Zacznij od: 1) Layout z Tailwind (sidebar + main content), 2) ChartPanel
z Recharts (CTR line chart, CPC bar chart, ROAS area chart), 3) FilterBar
(platform select, date range picker, porównanie okresów), 4) CampaignTable
z sortowaniem. Używaj React 19 z Server Components gdzie to możliwe.
TypeScript strict, żadnych any."

Przykład kodu, jaki generuje Frontend Dev Agent:

// src/components/chart-panel.tsx
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
import type { MetricData } from '@/types/metrics';

interface ChartPanelProps {
  data: MetricData[];
  metric: 'ctr' | 'cpc' | 'roas';
  comparisonData?: MetricData[];
}

export function ChartPanel({ data, metric, comparisonData }: ChartPanelProps) {
  const formatValue = (value: number) => {
    switch (metric) {
      case 'ctr': return `${(value * 100).toFixed(2)}%`;
      case 'cpc': return `${value.toFixed(2)} PLN`;
      case 'roas': return `${value.toFixed(1)}x`;
    }
  };

  return (
    <div className="rounded-xl border border-zinc-200 bg-white p-6 shadow-sm">
      <h3 className="mb-4 text-sm font-medium text-zinc-500 uppercase tracking-wide">
        {metric.toUpperCase()} w czasie
      </h3>
      <ResponsiveContainer width="100%" height={300}>
        <LineChart data={data}>
          <XAxis dataKey="date" tick={{ fontSize: 12 }} />
          <YAxis tickFormatter={formatValue} tick={{ fontSize: 12 }} />
          <Tooltip formatter={(value: number) => formatValue(value)} />
          <Line
            type="monotone"
            dataKey={metric}
            stroke="#6366f1"
            strokeWidth={2}
            dot={false}
          />
          {comparisonData && (
            <Line
              type="monotone"
              data={comparisonData}
              dataKey={metric}
              stroke="#a5b4fc"
              strokeWidth={2}
              strokeDasharray="5 5"
              dot={false}
            />
          )}
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}

Terminal 2 - Backend Dev Agent

claude "Działasz jako Backend Dev Agent. Przeczytaj CLAUDE.md, API contract
i schema Prisma. Zaimplementuj: 1) Auth endpoints (register, login, refresh)
z bcrypt + JWT, 2) Campaign CRUD, 3) Metrics endpoint z filtrami (platform,
date range) i porównywaniem okresów, 4) CSV import parser, 5) PDF export
z puppeteer. Middleware: authGuard, validateRequest (Zod), errorHandler.
Każdy endpoint zwraca {data, error, meta}."

Przykład kodu, jaki generuje Backend Dev Agent:

// src/api/controllers/metrics.controller.ts
import { Request, Response } from 'express';
import { prisma } from '@/lib/prisma';
import { z } from 'zod';

const metricsQuerySchema = z.object({
  from: z.string().date(),
  to: z.string().date(),
  platform: z.enum(['google_ads', 'meta_ads', 'all']).default('all'),
  campaignId: z.string().uuid().optional(),
});

export async function getMetrics(req: Request, res: Response) {
  const query = metricsQuerySchema.parse(req.query);
  const userId = req.user.id;

  const where = {
    campaign: {
      userId,
      ...(query.platform !== 'all' && { platform: query.platform }),
      ...(query.campaignId && { id: query.campaignId }),
    },
    date: {
      gte: new Date(query.from),
      lte: new Date(query.to),
    },
  };

  const metrics = await prisma.metric.findMany({
    where,
    orderBy: { date: 'asc' },
    include: { campaign: { select: { name: true, platform: true } } },
  });

  const aggregated = metrics.map((m) => ({
    date: m.date,
    campaign: m.campaign.name,
    platform: m.campaign.platform,
    impressions: m.impressions,
    clicks: m.clicks,
    spend: Number(m.spend),
    ctr: m.impressions > 0 ? m.clicks / m.impressions : 0,
    cpc: m.clicks > 0 ? Number(m.spend) / m.clicks : 0,
    roas: Number(m.spend) > 0 ? Number(m.revenue) / Number(m.spend) : 0,
  }));

  res.json({ data: aggregated, error: null, meta: { count: aggregated.length } });
}

Terminal 3 - QA Tester Agent

claude "Działasz jako QA Tester Agent. Przeczytaj CLAUDE.md i cały kod
wygenerowany przez Frontend i Backend agentów. Napisz testy według piramidy
70/20/10: 70% unit (Vitest), 20% integration (Supertest), 10% E2E (Playwright).
Zacznij od: 1) Unit testy dla metrics controller (edge cases: puste dane,
niepoprawne daty, brak uprawnień), 2) Integration testy dla auth flow
(register -> login -> access protected route), 3) E2E test: login -> import CSV
-> widok dashboard -> eksport PDF."

Przykład testu integracyjnego:

// tests/integration/auth.test.ts
import { describe, it, expect, beforeAll, afterAll } from 'vitest';
import request from 'supertest';
import { app } from '@/app';
import { prisma } from '@/lib/prisma';

describe('Auth flow', () => {
  const testUser = {
    email: 'test@example.com',
    password: 'SecurePass123!',
  };

  afterAll(async () => {
    await prisma.user.deleteMany({ where: { email: testUser.email } });
  });

  it('powinien zarejestrować nowego użytkownika', async () => {
    const res = await request(app)
      .post('/api/v1/auth/register')
      .send(testUser);

    expect(res.status).toBe(201);
    expect(res.body.data).toHaveProperty('accessToken');
    expect(res.body.data).toHaveProperty('refreshToken');
  });

  it('powinien zalogować istniejącego użytkownika', async () => {
    const res = await request(app)
      .post('/api/v1/auth/login')
      .send(testUser);

    expect(res.status).toBe(200);
    expect(res.body.data.accessToken).toBeDefined();
  });

  it('powinien odrzucić dostęp bez tokenu', async () => {
    const res = await request(app)
      .get('/api/v1/campaigns');

    expect(res.status).toBe(401);
    expect(res.body.error).toBe('Unauthorized');
  });
});

Wskazówki do fazy implementacji

/clear między taskami - czyści kontekst. Po skończeniu jednego epiku wyczyść i załaduj nowy. Agent nie musi pamiętać implementacji auth, gdy buduje wykresy.
Jeden prompt = jedno zadanie - nie każ agentowi zbudować “całego backendu”. Dawaj po jednym epiku, maksymalnie po jednej user story.
/compact - jeśli kontekst rośnie (dużo plików), użyj /compact do skondensowania dotychczasowej rozmowy.
/rewind - jeśli agent poszedł w złą stronę, cofnij do ostatniego dobrego punktu zamiast walczyć z błędami.

Jeśli chcesz pogłębić temat zaawansowanych workflow z AI, polecam artykuł o workflow AI power usera, gdzie opisuję techniki pracy z wieloma modelami jednocześnie.

Faza P - jak dopracować i wdrożyć aplikację?

S.H.I.P. - Faza Polish & Push: Kod działa, ale “działa” to za mało. Faza P to różnica między prototypem a produkcją. Czterech agentów recenzuje, zabezpiecza, pakuje i dokumentuje Twój projekt.

Code Reviewer Agent

claude "Działasz jako Code Reviewer Agent. Przeczytaj cały codebase.
Zrób code review: 1) Znajdź code smells (powtórzenia, zbyt długie funkcje,
brak typów), 2) Sprawdź spójność z CLAUDE.md, 3) Zaproponuj refaktoryzację
z konkretnymi diff-ami. Format: plik -> problem -> sugerowana zmiana."

Przykładowy output Code Reviewera:

## Code Review - Campaign Performance Dashboard

### src/api/controllers/metrics.controller.ts
**Problem:** Logika obliczania CTR/CPC/ROAS powielona w kontrolerze i w testach.
**Sugestia:** Wynieś do src/lib/metrics-calculator.ts
**Priorytet:** Medium

### src/components/chart-panel.tsx
**Problem:** Brak obsługi pustego stanu (data.length === 0).
**Sugestia:** Dodaj EmptyState component z komunikatem "Brak danych dla wybranego okresu"
**Priorytet:** High

### src/api/middleware/auth.guard.ts
**Problem:** Token JWT weryfikowany synchronicznie bez try-catch.
**Sugestia:** Wrap w try-catch, zwróć 401 przy JsonWebTokenError
**Priorytet:** Critical

Security Expert Agent

45% kodu generowanego przez AI zawiera luki bezpieczeństwa (dane IBM). To nie jest powód, żeby nie używać AI do kodowania - to powód, żeby mieć Security Experta w zespole.

claude "Działasz jako Security Expert Agent. Przeprowadź audyt bezpieczeństwa
codebase pod kątem OWASP Top 10. Sprawdź: injection, broken auth, sensitive
data exposure, XSS, CSRF, insecure dependencies. Wygeneruj raport z severity
(Critical/High/Medium/Low) i konkretnymi fixami."

OWASP	Ryzyko	Co sprawdzić w dashboardzie	Status
A01: Broken Access Control	Critical	Czy user widzi tylko SWOJE kampanie?	Do weryfikacji
A02: Cryptographic Failures	High	Bcrypt rounds >= 12, JWT secret w env	Do weryfikacji
A03: Injection	High	Prisma parametrized queries, Zod validation	Do weryfikacji
A05: Security Misconfiguration	Medium	CORS whitelist, Helmet.js headers	Do weryfikacji
A07: XSS	High	React auto-escape, DOMPurify dla CSV	Do weryfikacji
A09: Logging & Monitoring	Medium	Structured logging, no secrets in logs	Do weryfikacji

Human oversight jest tu kluczowy. Agent znajdzie większość problemów, ale ostateczna odpowiedzialność za bezpieczeństwo spoczywa na Tobie. To zresztą wymóg EU AI Act - człowiek musi nadzorować systemy AI, szczególnie te podejmujące decyzje wpływające na dane użytkowników.

DevOps Agent

claude "Działasz jako DevOps Agent. Przygotuj: 1) Multi-stage Dockerfile
(build + runtime), 2) docker-compose.yml (app + postgres + redis),
3) GitHub Actions CI/CD pipeline (lint -> test -> build -> deploy to Railway).
Optymalizuj obraz Dockera pod rozmiar (Alpine, multi-stage)."

# .github/workflows/deploy.yml
name: CI/CD Pipeline

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci
      - run: npm run lint
      - run: npm run type-check
      - run: npm run test:unit
      - run: npm run test:integration
        env:
          DATABASE_URL: ${{ secrets.DATABASE_URL }}

  deploy:
    needs: quality
    if: github.ref == 'refs/heads/main'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Deploy to Railway
        uses: bervProject/railway-deploy@main
        with:
          railway_token: ${{ secrets.RAILWAY_TOKEN }}
          service: marketing-dashboard

Documentation Agent

Documentation Agent generuje README, API docs i komentarze JSDoc. Nie będę tu wklejać pełnego output - wystarczy wiedzieć, że dostajesz gotowe README.md z sekcjami: Quick Start, API Reference, Environment Variables, Architecture Overview.

Jakich błędów unikać przy vibe codingu?

Po kilkudziesięciu projektach z Claude Code zebrałem listę błędów, które popełnia niemal każdy początkujący. Część z nich wynika z nawyków rodem z rozmów z chatbotami - vibe coding to inna dyscyplina.

Błąd	Konsekwencja	Rozwiązanie
Jeden mega-prompt “zbuduj mi całą apkę”	Agent gubi kontekst, produkuje niespójny kod	Dziel na małe zadania, jeden prompt = jedna user story
Brak CLAUDE.md	Agenci generują kod w różnych konwencjach	Napisz CLAUDE.md PRZED pierwszym promptem
Ignorowanie code review	Dług techniczny rośnie z każdym promptem	Po każdym epiku uruchamiaj Code Reviewera
Akceptowanie kodu bez zrozumienia	Nie umiesz debugować, gdy coś się zepsuje	Proś agenta o wyjaśnienie kluczowych decyzji
Brak testów	”Działa na moim komputerze” = nie działa nigdzie indziej	QA Agent od pierwszego dnia, piramida 70/20/10
Pominięcie Security Experta	45% kodu AI ma luki - Twojego to też dotyczy	Security audit przed każdym deploy
Nie używanie /clear i /compact	Kontekst rośnie, jakość odpowiedzi spada	/clear między taskami, /compact przy długich sesjach

Dwa z tych błędów wynikają z problemów komunikacyjnych z AI - zbyt ogólne prompty i brak struktury. Jeśli chcesz to naprawić systemowo, wróć do frameworku CRISP i technik Chain-of-Thought, które pomagają strukturyzować myślenie AI krok po kroku.

Ile kosztuje vibe coding z Claude Code?

Zanim przeliczymy koszty, kontekst: freelance developer w Polsce wyceni Campaign Performance Dashboard na 3 000-8 000 PLN. Software house? 15 000-40 000 PLN, w zależności od scope i SLA. Czas realizacji: 2-6 tygodni.

Z Claude Code? Jeden weekend i koszty poniżej.

Porównanie narzędzi do vibe codingu

Narzędzie	Cena	Dla kogo	Limit	Moc
Claude Max	$100/mies. (~400 PLN)	Regular vibe coderzy	Bez limitu wiadomości	Opus 4.6, Agent Teams
Claude API	Pay-as-you-go	Deweloperzy	Brak, płacisz za tokeny	Wszystkie modele
Cursor Pro	$20/mies. (~80 PLN)	Intermediate	500 premium requests	GPT-4o, Claude Sonnet
Bolt.new Pro	$25/mies. (~100 PLN)	Beginnerzy	10M tokenów/mies.	Wielomodelowy

Porównanie z tradycyjnym developmentem

Opcja	Koszt (dashboard)	Czas	Kontrola	Iteracje
Freelancer	3 000-8 000 PLN	2-4 tyg.	Średnia	Płatne
Software house	15 000-40 000 PLN	4-8 tyg.	Niska	W umowie
Claude Code + Ty	400-800 PLN/mies.	1-2 dni	Pełna	Nieograniczone

Oczywiście, porównanie nie jest uczciwe w stu procentach. Freelancer i software house dają Ci gwarancję, support i doświadczenie. Claude Code daje Ci szybkość, kontrolę i niezależność - ale odpowiedzialność za jakość spoczywa na Tobie. Wybór zależy od tego, czego potrzebujesz.

Więcej o kosztach i porównaniach narzędzi znajdziesz w przeglądzie 50 narzędzi AI.

Vibe coding vs agentic engineering - co dalej w 2026?

Stoimy na progu zmiany, która przeformułuje całą branżę. Vibe coding był pierwszym krokiem - człowiek opisuje, AI pisze. Agentic engineering to krok drugi - człowiek definiuje cel, AI planuje, buduje, testuje i wdraża.

Agent Teams - przyszłość, która już działa

Od Opus 4.6 Claude Code oferuje experimental feature: Agent Teams. Zamiast ręcznie otwierać trzy terminale, uruchamiasz zespół 2-16 agentów z jednego polecenia. Agenci komunikują się między sobą (przez eventy TeammateIdle i TaskCompleted), dzielą zadania i synchronizują wyniki. To jeszcze wczesna wersja, ale kierunek jest jasny.

MCP - agenci podłączeni do świata

Model Context Protocol (MCP) to standard, który pozwala agentom łączyć się z zewnętrznymi API, bazami danych i narzędziami. Wyobraź sobie agenta, który nie tylko pisze kod do integracji z Google Ads, ale faktycznie połączy się z Twoim kontem Google Ads, pobierze dane i zaimportuje je do dashboardu. MCP to most między “generuję kod” a “wykonuję akcję”.

Rynek - liczby

Rynek agentów AI rośnie z 8,5 mld USD w 2026 do prognozowanych 52,62 mld USD w 2030, z CAGR na poziomie 46,3%. Anthropic podaje, że w Q1 2026 deweloperzy wciąż delegują w pełni autonomicznie tylko 0-20% zadań, nadzorując pozostałe 80-100%. Ale ta proporcja zmienia się z każdym kwartałem.

Jeśli interesuje Cię, jak trend agentowy wpływa na e-commerce i marketing, przeczytaj o agentic commerce i agentach AI w marketingu.

FAQ - najczęstsze pytania o vibe coding z Claude Code

Czy muszę umieć programować, żeby używać vibe codingu?

Nie musisz umieć pisać kodu, ale musisz rozumieć podstawowe koncepcje: co to jest API, baza danych, frontend vs backend. To jak prowadzenie samochodu - nie musisz budować silnika, ale musisz wiedzieć, co robi hamulec. Vibe coding obniża próg wejścia z “umiem pisać kod” do “umiem opisać, co chcę”. Dla narzędzi typu Bolt.new wystarczy zero wiedzy technicznej. Dla Claude Code - przydaje się orientacja w terminalu i strukturze projektu.

Ile czasu zajmuje zbudowanie aplikacji z Claude Code?

Zależy od złożoności. Campaign Performance Dashboard z tego tutoriala - realistycznie 1-2 intensywne dni (8-16 godzin). Prosty landing page - 30 minut. Chatbot FAQ - 2-3 godziny. Pełna aplikacja SaaS - 1-2 tygodnie. Kluczowe: czas spędzony na planowaniu (Faza S i H) skraca czas implementacji (Faza I) o 40-60%. Nie pomijaj CLAUDE.md i project breakdown.

Czy kod generowany przez AI jest bezpieczny?

Nie domyślnie. IBM raportuje, że 45% kodu generowanego przez AI zawiera luki bezpieczeństwa. Dlatego framework S.H.I.P. ma fazę Polish z dedykowanym Security Expert Agentem. Traktuj AI-generated code jak kod od juniora - działa, ale wymaga review. Nigdy nie wdrażaj na produkcję bez audytu bezpieczeństwa.

Claude Code vs Cursor - co wybrać?

Cursor to AI-native IDE - edytujesz pliki w edytorze, AI podpowiada i generuje. Claude Code to autonomiczny agent w terminalu - dajesz cel, agent realizuje. Cursor jest lepszy dla programistów, którzy chcą zachować pełną kontrolę. Claude Code jest lepszy, gdy chcesz delegować większe zadania. Moja rekomendacja: Cursor na codzienne kodowanie, Claude Code na budowanie nowych projektów od zera.

Ile kosztuje Claude Code miesięcznie?

Claude Max (rekomendowany dla vibe codingu) kosztuje $100/mies. (ok. 400 PLN). Opcja $200/mies. daje wyższe limity. API to pay-as-you-go - projekt typu dashboard to $20-80 w tokenach. Cursor Pro za $20/mies. jest tańszy, ale mniej autonomiczny. Szczegółowe porównanie znajdziesz w sekcji “Ile kosztuje vibe coding” powyżej.

Czy mogę używać Claude Code na Windows?

Tak. Claude Code działa na Windows, macOS i Linux. Na Windows potrzebujesz WSL2 (Windows Subsystem for Linux) lub Windows Terminal z Git Bash. Instalacja przez npm jest identyczna na wszystkich platformach. Jedyne ograniczenie: niektóre funkcje Docker mogą wymagać dodatkowej konfiguracji na Windows.

Jak Claude Code różni się od ChatGPT?

ChatGPT to konwersacyjny interfejs webowy - świetny do pytań, analizy i tworzenia treści. Claude Code to agent terminalowy z dostępem do systemu plików - czyta, pisze i uruchamia kod bezpośrednio w Twoim projekcie. ChatGPT “mówi Ci, co zrobić”. Claude Code “robi to za Ciebie”. To jak różnica między konsultantem a pracownikiem.

Czy vibe coding zastąpi programistów?

Nie w przewidywalnej przyszłości. Zmieni natomiast to, co programiści robią. Zamiast pisać boilerplate, będą projektować architektury, definiować standardy i nadzorować agentów. Dane Anthropic z Q1 2026: deweloperzy delegują w pełni autonomicznie tylko 0-20% zadań. Reszta wymaga ludzkiego nadzoru. Vibe coding nie zastąpi programistów - zastąpi programistów, którzy nie umieją współpracować z AI.

Co to jest CLAUDE.md i dlaczego jest ważny?

CLAUDE.md to plik konfiguracyjny, który definiuje “zasady gry” dla agentów AI w Twoim projekcie. Zawiera stack technologiczny, konwencje nazewnicze, strukturę folderów i zasady jakości. Bez niego każdy agent generuje kod według własnych domysłów. Z nim - wszyscy grają według tych samych reguł. Maksymalnie 150 linii, trzy lokalizacje (globalny, projektowy, lokalny).

Od czego zacząć przygodę z vibe codingiem?

Krok 1: Zainstaluj Claude Code (npm install -g @anthropic-ai/claude-code). Krok 2: Zbuduj coś prostego - landing page, kalkulator, formularz. Krok 3: Przeczytaj ten artykuł od początku i zbuduj dashboard. Krok 4: Dołącz do community vibe coderów. Nie zaczynaj od teorii - zaczynaj od budowania. Najgorsza aplikacja, którą zbudowałeś, jest lepsza od najlepszej, o której tylko myślałeś. Jeśli potrzebujesz więcej kontekstu o widoczności treści w erze AI, polecam artykuł o GEO - Generative Engine Optimization.

Podsumowanie - od pomysłu do deploy w jeden weekend

Przeszliśmy całą drogę. Framework S.H.I.P. dał Ci strukturę: Scope (zdefiniuj zakres z PM Agentem), Handoff (zaprojektuj architekturę z Architectem i DB Engineerem), Implement (zbuduj równolegle z Frontend, Backend i QA Agentami), Polish & Push (dopracuj z Code Reviewerem, Security Expertem, DevOps i Documentation Agentem). 10 agentów, 4 fazy, jeden dashboard.

To nie jest magia. To metodyka. Taki sam skok jakościowy jak przejście od ręcznego wysyłania maili do marketing automation. Różnica: dziś automatyzujesz nie wysyłkę, ale budowanie narzędzi.

Twoje następne kroki:

Zainstaluj Claude Code i sklonuj repozytorium agentów - 15 minut
Napisz CLAUDE.md dla swojego pierwszego projektu - skopiuj szablon z tego artykułu
Zbuduj prosty projekt - zanim weźmiesz się za dashboard, zrób landing page lub kalkulator ROI
Iteruj z S.H.I.P. - po pierwszym projekcie framework wejdzie Ci w krew

Jeśli chcesz zobaczyć, jak S.H.I.P. łączy się z innymi frameworkami (CRISP, JTBD, AIMS, H.E.A.R.T.), przeczytaj o Systemie Operacyjnym Marketera AI - to meta-framework, który spina wszystko w jeden workflow.

A jeśli zbudujesz swój dashboard lub dowolny inny projekt z S.H.I.P. - napisz do mnie. Chcę zobaczyć, co stworzysz.

Ten artykuł jest częścią serii o AI w marketingu na czechu.blog. Jeśli chcesz zacząć od podstaw, zacznij od kompletnego przewodnika po Claude. Jeśli interesuje Cię automatyzacja marketingu, przeczytaj o workflow automatyzacji z AI. A jeśli szukasz gotowego stacka narzędzi, zajrzyj do AI Marketing Stack i przewodnika po content marketingu w erze AI.