Budowanie aplikacji z Vibe Coding | Kurs Claude AI

Czym jest vibe coding

Kiedy budowałem stronę czechu.blog, użyłem Claude Code do wygenerowania całej infrastruktury - layout, komponenty, routing. Napisałem może 5% kodu ręcznie. Reszta to kierowanie Claude Code przez prompty, review wyników i iteracja. To właśnie jest vibe coding w praktyce.

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.

Termin ukuł Andrej Karpathy, członek zespołu założycielskiego OpenAI, we wpisie na X z 2 lutego 2025. Collins Dictionary wybrał „vibe coding” na Słowo Roku 2025 (ogłoszenie z 6 listopada 2025).

3 poziomy

Poziom	Co robisz	Narzędzia
Vibe coding	Opisujesz, AI generuje	Bolt.new, Lovable, v0 (v0.app)
Guided vibe coding	Opisujesz, AI generuje, Ty recenzujesz	Cursor, Devin Desktop (dawniej Windsurf)
Agentic engineering	Projektujesz specyfikację, nadzorujesz plan, sprawdzasz zmiany i testy, a agenci piszą kod	Claude Code, Codex, Devin Cloud

W mojej klasyfikacji Claude Code jest na poziomie 3. Granice są płynne: Cursor i Devin Desktop też mają dziś tryby agentowe. Sam Karpathy opisuje agentic engineering jako zawodową dyscyplinę: koordynujesz omylnych agentów i pilnujesz poprawności, bezpieczeństwa i łatwości utrzymania kodu. To sposób pracy, nie poziom autonomii narzędzia.

Dwie uwagi do tabeli. Windsurf po przejęciu przez Cognition działa od 2 czerwca 2026 pod marką Devin Desktop. Narzędzie v0 przeniosło się z adresu v0.dev na v0.app.

Stan na 1 października 2026: domyślnym modelem Claude Code na każdym planie jest Opus 5.5. Tak jest od 22 września (wymaga wersji 2.1.280 lub nowszej). Anthropic rekomenduje go na start do większości zadań. Fable 5.1 to według Anthropic najmocniejszy model dostępny dla wszystkich, ale Opus 5.5 dorównuje mu w większości zadań za ułamek ceny. Na Fable przełączysz się komendą /model fable. Na Pro modele Fable działają wyłącznie na usage credits, czyli dokupionych kredytach rozliczanych po stawkach API. Na Max są wliczone do 50% limitu tygodniowego.

Framework S.H.I.P.

S.H.I.P. to autorski framework z czechu.blog do budowania projektów z AI:

S - Scope (Zakres)

Zanim napiszesz „zbuduj mi stronę”, zdefiniuj CEL.

User stories: „Jako [kto] chcę [co], żeby [dlaczego]”
Acceptance criteria: jak poznam, że jest gotowe?
Prompt: „Na podstawie opisu projektu stwórz user stories i acceptance criteria”

H - Handoff (Przekazanie)

Architektura PRZED kodem.

Prompt: „Zaplanuj architekturę systemu. Stack: [X]. Narysuj diagram komponentów.”
Efekt: AI wie CO budować, zanim zacznie pisać KOD
Makiety ekranów: przygotuj je w Claude Design (beta, tylko plany płatne). Na Pro, Max i Team jest włączony domyślnie, na Enterprise włącza go właściciel organizacji. Działa jako szablon artefaktu na webie i w Claude Desktop oraz osobno pod claude.ai/design
Gotowy projekt przekaż do Claude Code opcją „Handoff to Claude Code” jako punkt wyjścia do implementacji. Design zużywa wspólny limit planu (dawniej miał osobny limit tygodniowy)
W samym Claude Code makiety narysujesz komendą /design (wymaga 2.1.265 lub nowszej). Komenda /design-sync wgrywa Twój system komponentów React do Claude Design, żeby makiety używały prawdziwych komponentów

I - Implement (Implementacja)

Krok po kroku, feature po feature.

NIE: „Zbuduj całą aplikację”
TAK: „Zaimplementuj endpoint POST /api/campaigns na podstawie tej specyfikacji”
Commit po każdej feature

P - Polish (Szlif)

Nie pomijaj tego kroku.

Code review: „Przejrzyj kod pod kątem: czytelność, wydajność, bezpieczeństwo”
Wbudowana alternatywa: komenda /code-review przegląda bieżący diff (także PR, gałąź lub ścieżkę) pod kątem błędów. Z opcją --fix od razu je poprawia
Testy: „Napisz testy jednostkowe”
Dokumentacja: „Napisz README z instrukcją instalacji”

Planowanie z Claude Code

Krok 1: Inicjalizacja

mkdir moj-projekt && cd moj-projekt
claude

Krok 2: Tryb pracy - auto, plan, default

Stan na 1 października 2026: nowa sesja Claude Code w terminalu i VS Code startuje domyślnie w trybie auto. Dotyczy to każdego planu i każdego dostawcy (wymaga wersji 2.1.284 lub nowszej). Od 14 sierpnia do 28 września 2026 auto startowało tylko na Pro, Max i Team. W trybie auto klasyfikator w tle przepuszcza bezpieczne akcje i blokuje ryzykowne. Claude edytuje pliki i uruchamia polecenia bez pytania o każde z nich.

Trzy zastrzeżenia. Pierwsza sesja po instalacji lub aktualizacji może wystartować w innym trybie, dopiero kolejne trzymają się reguły. Własny permissions.defaultMode w ustawieniach nadal wygrywa. Tryb jednorazowy claude -p i Agent SDK (biblioteka do budowania własnych agentów) startują w trybie default. U zewnętrznych dostawców albo bez telemetrii startują w auto (od 2.1.285).

Aktualizacja (wrzesień 2026): poprzednia wersja tej lekcji twierdziła, że Claude „nigdy nie pisze kodu automatycznie - zawsze pyta”. To już nieprawda. Jeśli chcesz zachowanie „zawsze pytaj”, przełącz się klawiszem Shift+Tab na tryb default albo ustaw go na stałe kluczem permissions.defaultMode w pliku ustawień.

Plan Mode nadal istnieje i na etapie architektury jest właściwym wyborem. Naciskaj Shift+Tab, aż pasek stanu pokaże plan mode - klawisz przełącza tryby uprawnień w pętli (default, acceptEdits, plan, auto). W Plan Mode Claude czyta kod, proponuje plan i czeka na Twoją akceptację. Nic nie zapisuje. Reguły klasyfikatora trybu auto podejrzysz i zmienisz w zakładce Auto mode komendy /permissions.

Krok 3: Briefing

Chcę zbudować [opis projektu].
Zanim cokolwiek napiszesz:
1. Zaproponuj architekturę
2. Podziel na fazy (max 4)
3. Dla każdej fazy: lista zadań, priorytet
4. Wymień potencjalne ryzyka
Czekaj na moją akceptację przed rozpoczęciem.

Kierowanie Claude Code bez pisania kodu

1. Język naturalny:

„Dodaj formularz kontaktowy na stronie głównej”
„Strona ładuje się wolno - zoptymalizuj”

2. Screenshot-driven development:

Zrób screenshot mockupu → „Odwzoruj ten design”

3. Review before execute:

Plan Mode - Claude planuje, ale nie wykonuje
Ty akceptujesz plan, a w trybie auto przeglądasz zmiany po zadaniu komendą /diff
Klasyfikator trybu auto nie zastępuje Twojego review - blokuje ryzykowne akcje, nie ocenia jakości kodu

4. Git jako undo:

Commit po każdej fazie
Jeśli coś poszło źle: git revert

Best practices

Specification engineering - strukturalne briefy z scope, constraints, architekturą
Human oversight - zawsze review przed merge
Security mindset - AI nie myśli o bezpieczeństwie domyślnie
Iteracja - nie buduj całej aplikacji jednym promptem
Version control - commituj często, branch na każdą feature

Ćwiczenie praktyczne: Zbuduj prostą aplikację webową używając wyłącznie Claude Code:

Wybierz projekt: TODO list z filtrowaniem LUB landing page z formularzem

Zastosuj S.H.I.P.: Scope → Handoff → Implement → Polish

Użyj Plan Mode do zaplanowania architektury, potem przełącz na tryb auto do implementacji

Iteruj feature po feature

Na końcu: code review + deploy

Pełny tutorial vibe codingu z frameworkiem S.H.I.P. znajdziesz w artykule Vibe coding z Claude Code - tutorial i framework S.H.I.P..

Co dalej

W następnej lekcji zajmiemy się bezpieczeństwem, prywatnością i etyką korzystania z AI. Moduł zamyka lekcja o znaku wodnym i C2PA.