Budowanie aplikacji z Vibe Coding

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 ukuty przez Andreja Karpathy (współzałożyciela OpenAI) w lutym 2025. Collins Dictionary wybrał "vibe coding" na Słowo Roku 2025.

3 poziomy

Poziom	Co robisz	Narzędzia
Vibe coding	Opisujesz, AI generuje	Bolt.new, Lovable, v0.dev
Guided vibe coding	Opisujesz, AI generuje, Ty recenzujesz	Cursor, Windsurf
Agentic engineering	Definiujesz cel, AI planuje i buduje autonomicznie	Claude Code

Claude Code jest na poziomie 3 - najwyższa autonomia.

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

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"
• 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: Plan Mode

Naciśnij Shift+Tab dwa razy, aby wejść w Plan Mode. Claude nigdy nie pisze kodu automatycznie - zawsze pyta.

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 każdy krok

4. Git jako undo:

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

Best practices

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

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

1. Wybierz projekt: TODO list z filtrowaniem LUB landing page z formularzem
2. Zastosuj S.H.I.P.: Scope → Handoff → Implement → Polish
3. Użyj Plan Mode do zaplanowania architektury
4. Iteruj feature po feature
5. 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

Ostatnia lekcja modułu - bezpieczeństwo, prywatność i etyka korzystania z AI.