CodeWorlds
Powrót do kolekcji
Przewodnik14 min czytaniaZespół CodeWorlds

Vibe coding: czym jest i jak zacząć

Vibe coding w praktyce: skąd pochodzi termin, jak budować aplikacje z opisu w Cursorze, Claude Code i Lovable, pierwszy projekt, prompty, ryzyka i nauka.

Vibe coding: czym jest i jak zacząć

Vibe coding to sposób tworzenia aplikacji, w którym opisujesz zwykłymi słowami, co ma powstać, a model AI pisze za Ciebie kod. Termin ukuł Andrej Karpathy w lutym 2025 roku. Żeby zacząć, wybierz mały projekt bez danych innych osób i jedno narzędzie, na przykład Lovable albo Cursor, a potem pracuj krótkimi krokami i sprawdzaj każdy efekt.

Prosta aplikacja potrafi powstać w jeden wieczór, ale równie szybko powstaje kod, którego nikt nie rozumie, który ujawnia dane użytkowników albo pochłania budżet na kredyty. Ten przewodnik pokazuje, jak korzystać z tej metody bez tych kosztów.

Skąd się wziął termin vibe coding

2 lutego 2025 roku Andrej Karpathy, współzałożyciel OpenAI i były dyrektor ds. sztucznej inteligencji w Tesli, opublikował krótki wpis na X. Opisał w nim, jak rozmawia głosem z Composerem, funkcją edytora Cursor, akceptuje wszystkie zmiany bez czytania różnic w kodzie i wkleja modelowi komunikaty o błędach bez słowa komentarza. Kod rośnie ponad to, co jest w stanie ogarnąć, a gdy model nie umie naprawić błędu, Karpathy prosi o przypadkowe zmiany, aż błąd zniknie. Sam uprzedził, że to sposób na weekendowe projekty do wyrzucenia.

Nazwa przyjęła się szybciej niż to zastrzeżenie. W listopadzie 2025 roku słownik Collins ogłosił vibe coding słowem roku 2025, a dziś wiele osób nazywa tak każde programowanie z pomocą AI.

Przydatne rozróżnienie zaproponował w marcu 2025 roku programista Simon Willison we wpisie Not all AI-assisted programming is vibe coding. Jeśli kod napisał model, a Ty go przejrzałeś, przetestowałeś i umiesz wyjaśnić, jak działa, to jest już zwykłe tworzenie oprogramowania, a nie vibe coding. Vibe coding zaczyna się tam, gdzie świadomie rezygnujesz z rozumienia kodu i oceniasz wyłącznie efekt.

W 2026 roku Karpathy upowszechnił drugie pojęcie. W notatce z rozmowy na konferencji Sequoia Ascent 2026 pisze, że vibe coding podnosi poziom wyjściowy, bo pozwala zbudować działający program niemal każdemu, a agentic engineering to zawodowa dyscyplina: kod piszą agenci AI, a ludzie projektują specyfikacje, przeglądają zmiany, piszą testy i zarządzają uprawnieniami. Te dwa pojęcia wyznaczają dobrą ścieżkę nauki, od zabawy do świadomej pracy.

Jak działa budowanie aplikacji z opisu

Niezależnie od narzędzia pętla wygląda podobnie: opisujesz, co chcesz uzyskać, model generuje albo zmienia kod, narzędzie go uruchamia, a Ty oglądasz efekt i piszesz, co poprawić. Model nie widzi Twojego ekranu. Wie tylko to, co trafiło do rozmowy: opis, pliki projektu, komunikaty błędów, a w części narzędzi także zrzuty ekranu i wyniki testów. Dlatego jakość opisu tak mocno wpływa na wynik.

Narzędzia do vibe codingu dzielą się na trzy rodziny:

  1. Generatory aplikacji w przeglądarce. Lovable, Bolt, v0 i Replit prowadzą całą pracę w oknie czatu z podglądem na żywo. Niczego nie instalujesz, a publikacja jest w pakiecie. To najprostszy start, ale z najmniejszą kontrolą nad kodem.
  2. Edytory z agentem. Cursor, Windsurf, rozwijany dziś przez Cognition pod nazwą Devin Desktop, oraz GitHub Copilot w VS Code i innych edytorach. Agent edytuje pliki na Twoim komputerze, uruchamia polecenia i pokazuje zmiany do akceptacji. Cursor sam tworzy punkty kontrolne przed większymi zmianami, więc nieudaną próbę cofasz jednym kliknięciem.
  3. Agenci w terminalu. Claude Code, opisany w tekście o modelach Claude, pracuje na Twoim repozytorium z wiersza poleceń. Czyta instrukcje z pliku CLAUDE.md i ma tryb planowania, w którym zmienia pliki dopiero po akceptacji planu.
NarzędzieNajlepsze doJak z nim pracujeszModel cenowy
LovablePrototyp bez instalacjiCzat, podgląd, synchronizacja z GitHubemKredyty, darmowa pula dzienna
BoltSzybki prototyp fullstackCzat, projekt działający w przeglądarceTokeny, darmowy limit
v0Interfejsy i aplikacje w Next.jsCzat, podgląd, wdrożenie na VercelKredyty, darmowa pula miesięczna
CursorPraca na własnym kodzieEdytor oparty na VS Code z agentemPlan darmowy, abonament z limitami
Windsurf (Devin Desktop)Zadania zlecane agentowi w edytorzeEdytor z agentem od CognitionPlan darmowy, abonament z limitami
Claude CodeDłuższe zadania na repozytoriumTerminal, IDE, aplikacja, przeglądarkaPłatne plany Claude albo API
GitHub CopilotPraca we własnym edytorzePodpowiedzi, czat, tryb agentaPlan darmowy, abonament z kredytami

Kwoty zmieniają się często, więc zebrano je osobno, według stron producentów z września 2026 roku. Cursor kosztuje od 20 USD miesięcznie, podobnie jak Claude Pro (17 USD miesięcznie przy płatności rocznej), w którym mieści się Claude Code, niedostępny w planie darmowym. Devin Desktop ma plan Pro za 20 USD, Bolt Pro kosztuje 25 USD, v0 Plus 30 USD za osobę, a GitHub Copilot Pro 10 USD. Lovable w cenniku wyświetlanym w Polsce pokazuje plan Pro za 25 EUR z VAT. Przed zakupem sprawdź aktualny cennik na stronie producenta.

Pierwszy projekt krok po kroku

Na pierwszy projekt wybierz coś małego, co przyda się Tobie i nie przetwarza danych innych osób, na przykład tracker nawyków z licznikiem dni z rzędu. Nie potrzebuje logowania, serwera ani płatności, a mimo to ma prawdziwą logikę, którą da się zrozumieć i sprawdzić.

1. Opisz projekt, zanim otworzysz narzędzie

Kilka zdań specyfikacji oszczędza kilkanaście poprawek. Zapisz, co aplikacja ma robić i czego świadomie nie robisz w pierwszej wersji:

Code
Markdown
# Tracker nawyków

Cel: prosta strona, na której zapisuję kilka nawyków i codziennie je odhaczam.

Musi mieć:
- dodawanie i usuwanie nawyku
- odhaczanie nawyku na dziś
- licznik dni z rzędu dla każdego nawyku
- zapis danych w przeglądarce (localStorage), bez logowania i serwera

Nie robimy teraz:
- kont użytkowników, płatności ani powiadomień

2. Wybierz narzędzie i poproś o plan

Bez instalowania czegokolwiek wkleisz specyfikację do generatora w przeglądarce. Edytor z agentem wymaga instalacji, ale uczy więcej, bo widzisz każdy plik i każdą zmianę. W obu przypadkach poproś najpierw o plan, który wyłapie nieporozumienia, zanim zamienią się w dziesięć plików do poprawienia:

Code
TEXT
Zbuduj aplikację webową według specyfikacji poniżej.
Użyj czystego HTML, CSS i JavaScriptu, bez frameworków i dodatkowych bibliotek.
Interfejs po polsku, wygodny na telefonie.
Najpierw wypisz plan: jakie pliki powstaną i jakie funkcje znajdą się w każdym z nich.
Kod napisz dopiero wtedy, gdy zaakceptuję plan.

[tutaj wklej specyfikację]

3. Sprawdź, zanim pójdziesz dalej

Dodaj nawyk z pustą nazwą, z bardzo długą nazwą i dwa nawyki o tej samej nazwie. Odśwież stronę i sprawdź, czy dane zostały. Zapytaj też, co zrobi licznik, gdy odhaczysz nawyk o 23:59, a potem o 0:01, bo daty i strefy czasowe to klasyczne źródło błędów, także w kodzie pisanym przez ludzi. Każdy problem zgłaszaj modelowi osobno.

4. Zapisuj działające wersje

Generatory w przeglądarce mają własną historię wersji, a w edytorze najprościej użyć Gita. Każdy commit to punkt, do którego wrócisz, gdy kolejna prośba coś zepsuje:

Code
Bash
git init
git add -A
git commit -m "Tracker: dodawanie i odhaczanie nawyków działa"

5. Poproś o wyjaśnienie i przeczytaj kluczowy fragment

Zapytaj model, jak aplikacja zapisuje dane, i znajdź ten fragment w kodzie. Zwykle wygląda mniej więcej tak:

Code
JavaScript
const STORAGE_KEY = 'habits'

function loadHabits() {
  const saved = localStorage.getItem(STORAGE_KEY)
  return saved ? JSON.parse(saved) : []
}

function saveHabits(habits) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(habits))
}

localStorage przechowuje wyłącznie tekst, dlatego lista nawyków jest zamieniana na JSON przy zapisie i z powrotem przy odczycie. Gdy niczego jeszcze nie zapisano, getItem zwraca null, więc funkcja oddaje pustą listę. Dane żyją tylko w tej jednej przeglądarce: na telefonie ich nie zobaczysz, a wyczyszczenie danych strony je usunie. Takie ograniczenia trzeba znać, zanim obiecasz komuś, że aplikacja zapamięta jego postępy.

6. Opublikuj

Generatory publikują projekt jednym przyciskiem, a projekt z edytora wrzucisz na GitHuba i podłączysz do Vercela albo Netlify. Działający adres to dobry moment, żeby się zatrzymać i przejrzeć, co właściwie powstało.

Wzorce promptów, które działają

Większość rozczarowań vibe codingiem bierze się z próśb, które dla człowieka są oczywiste, a dla modelu niejednoznaczne. Pomagają proste nawyki:

  • Kontekst przed zadaniem. Napisz, dla kogo jest aplikacja i co ma osiągnąć, a dopiero potem, co zmienić.
  • Jedna zmiana w jednej wiadomości. Prośba o pięć rzeczy naraz zwykle kończy się cofaniem dwóch z nich.
  • Odniesienie do tego, co już jest. Prośba „zrób ekran statystyk w stylu listy nawyków” daje spójny wynik, a „dodaj statystyki” coś zupełnie nowego.
  • Granice zmiany. Napisz, których plików, wyglądu i zależności nie ruszać.
  • Przypadki brzegowe wprost. Model buduje ścieżkę, w której wszystko działa, więc pusta lista, błąd zapisu czy zmiana daty o północy wymagają osobnej wzmianki.
  • Pełny komunikat błędu. Wklej go w całości i opisz, co zrobiłeś tuż przed nim, zamiast pisać „nie działa”.

Różnicę dobrze widać na zgłoszeniu błędu:

Code
TEXT
Słabo: popraw licznik, bo nie działa

Lepiej: licznik dni z rzędu pokazuje 0 po odświeżeniu strony, chociaż
nawyk "Czytanie" jest odhaczony wczoraj i dziś. Oczekuję wartości 2.
Znajdź przyczynę, opisz ją w dwóch zdaniach i popraw tylko funkcję
liczącą serię. Nie zmieniaj wyglądu ani pozostałych plików.

Zasady powtarzane w każdej rozmowie zapisz w pliku projektu. Cursor czyta reguły projektu z katalogu .cursor/rules albo z pliku AGENTS.md, a Claude Code czyta plik CLAUDE.md i potrafi korzystać także z AGENTS.md. Na początek wystarczy krótki plik:

Code
Markdown
# Zasady projektu

- Czysty HTML, CSS i JavaScript, bez frameworków i nowych zależności
- Dane tylko w localStorage pod kluczem "habits"
- Przed większą zmianą przedstaw plan i poczekaj na akceptację
- Po każdej zmianie wypisz zmienione pliki i powód zmiany
- Nie usuwaj istniejących funkcji bez pytania

Granice i ryzyka

Vibe coding świetnie sprawdza się przy prototypach i narzędziach na własny użytek. Kłopoty zaczynają się, gdy aplikacja trafia do innych ludzi, przechowuje ich dane albo ma działać latami.

Bezpieczeństwo

Kod, który działa, nie musi być bezpieczny. Firma Veracode regularnie testuje kod generowany przez modele i w aktualizacji z marca 2026 roku podaje, że tylko 55% zadań generowania kodu kończyło się kodem bezpiecznym. Ten wynik prawie nie drgnął od dwóch lat, mimo kolejnych premier modeli.

W aplikacjach budowanych z opisu powtarzają się trzy błędy. Klucze do zewnętrznych usług trafiają do kodu działającego w przeglądarce, gdzie może je odczytać każdy. Reguły dostępu do bazy danych zostają otwarte, więc jeden użytkownik widzi dane innych, co przy zapleczu na Supabase oznacza zwykle brak zabezpieczeń na poziomie wierszy. Uprawnienia są sprawdzane tylko w interfejsie, a nie na serwerze. Jak szybko to sprawdzić, pokazuje tekst o Lovable.

Osobnym ryzykiem są agenci z szerokimi uprawnieniami. W lipcu 2025 roku agent w Replit usunął produkcyjną bazę danych w projekcie Jasona Lemkina, założyciela społeczności SaaStr, mimo polecenia, żeby bez zgody niczego nie zmieniać. Dane udało się odzyskać, choć narzędzie twierdziło, że cofnięcie zmian jest niemożliwe. Agent nie powinien więc mieć dostępu do danych produkcyjnych, a polecenia, które coś kasują, powinny wymagać Twojego potwierdzenia.

Kod, którego nie rozumiesz

Dopóki wszystko działa, brak zrozumienia kodu nie przeszkadza. Kłopot pojawia się przy pierwszym błędzie, którego model nie umie naprawić, i rośnie z każdą funkcją dopisaną bez zrozumienia poprzednich. W ankiecie Stack Overflow z 2025 roku największą frustracją przy pracy z AI, wskazaną przez 66% osób, były rozwiązania prawie dobre, ale nie do końca, a 45,2% uznało, że debugowanie kodu wygenerowanego przez AI zajmuje więcej czasu. W tej samej ankiecie 72% osób odpowiedziało, że vibe coding nie jest częścią ich pracy zawodowej.

Koszty

Generatory rozliczają się kredytami albo tokenami, edytory abonamentem z limitami, a modele używane przez API kosztują za każdy przetworzony token. Najwięcej pochłaniają pętle poprawek: gdy model nie rozumie problemu, ta sama zmiana wraca pięć razy, a każda próba kosztuje. Do tego dochodzą hosting, baza danych, domena i płatne usługi, z których korzysta aplikacja. Zanim przejdziesz na wyższy plan, sprawdź w panelu, na co poszło zużycie, i ustaw limity wydatków tam, gdzie się da.

Dlaczego podstawy programowania nadal się liczą

Vibe coding przesuwa ciężar pracy z pisania kodu na opisywanie, sprawdzanie i podejmowanie decyzji, a każda z tych czynności wymaga wiedzy. Żeby opisać zadanie, trzeba znać nazwy elementów aplikacji. Żeby ocenić wynik, trzeba odróżnić rozwiązanie poprawne od pozornie poprawnego. Żeby naprawić błąd, z którym model sobie nie radzi, trzeba czytać komunikaty i kod.

Karpathy ujął to na Sequoia Ascent tak: myślenie da się zlecić modelowi, ale rozumienia już nie. Jeśli nie umiesz wyjaśnić, co robi dany fragment, nie powinien on trafić do aplikacji, z której korzystają inni.

Minimum, które bardzo ułatwia pracę z AI:

  • podstawy HTML, CSS i JavaScriptu, żeby czytać kod interfejsu,
  • rozumienie, jak przeglądarka rozmawia z serwerem i gdzie mogą leżeć sekrety,
  • Git, żeby zapisywać wersje i cofać nieudane zmiany,
  • czytanie komunikatów błędów i praca z narzędziami deweloperskimi przeglądarki,
  • podstawy baz danych i logowania, zanim zbudujesz coś z kontami użytkowników.

Plan nauki tych rzeczy krok po kroku znajdziesz w przewodniku jak nauczyć się programować, a jeśli myślisz o pracy w branży, w tekście jak zostać programistą. Na start dobrze sprawdzą się HTML i CSS od podstaw oraz JavaScript dla początkujących.

Jak uczyć się vibe codingu odpowiedzialnie

Nie chodzi o to, żeby unikać AI, tylko o to, żeby po każdym projekcie umieć więcej niż przed nim. Sprawdzają się proste zasady:

  1. Czysty vibe coding tylko w projektach bez stawki, takich jak prototypy i narzędzia na własny użytek. Aplikacja z danymi innych osób wymaga przeglądu kodu.
  2. Nie publikuj kodu, którego nie umiesz wyjaśnić. To zasada Willisona w praktyce: przejrzyj, przetestuj, wytłumacz.
  3. Git od pierwszego dnia. Małe commity to najtańsze ubezpieczenie od nieudanej prośby.
  4. AI jako nauczyciel. Proś o wyjaśnienie błędu, o podpowiedź zamiast gotowca i o pytania sprawdzające do nowego kodu.
  5. Jeden fragment samodzielnie. Po każdym projekcie napisz od nowa, bez pomocy, jedną funkcję, na przykład licznik dni z rzędu, żeby sprawdzić, co naprawdę rozumiesz.
  6. Przegląd bezpieczeństwa i budżet. Przed pierwszymi użytkownikami sprawdź klucze, reguły dostępu do danych i uprawnienia na serwerze, a wydatki na narzędzia ustal z góry.

W CodeWorlds temu tematowi poświęcony jest cały piracki świat Vibecoding: 14 modułów i ponad 300 ćwiczeń, a strona kursu szacuje czas nauki na 100-150 godzin. Budujesz w nim aplikacje z Cursorem i Claude Code, od konfiguracji edytora, przez klony znanych serwisów, po testy i wdrożenie. To świat dla zaawansowanych: zakłada znajomość Reacta i Next.js, których uczą światy JavaScript i React oraz Next.js, a także podstaw TypeScriptu z Parku Jurajskiego. Jeśli zaczynasz od zera, najpierw przejdź kurs HTML i CSS.

Na dobry początek otwórz lekcje Wprowadzenie do Cursora, Tworzenie projektu Next.js z Cursorem oraz Git i GitHub. Potem przejdź do lekcji Poznaj Claude Code, testów z Jest i React Testing Library oraz wdrożenia na Vercel lub Netlify. Lekcje tego świata przeczytasz za darmo na stronie, a jego zadania w aplikacji wymagają planu premium. Darmowy plan obejmuje w aplikacji kurs HTML i CSS i daje 10 jednostek paliwa dziennie, co dobrze pasuje do krótkich, codziennych sesji.

FAQ

Kto wymyślił określenie vibe coding?

Andrej Karpathy, współzałożyciel OpenAI i były dyrektor ds. AI w Tesli, we wpisie na X z 2 lutego 2025 roku. W listopadzie 2025 roku słownik Collins wybrał vibe coding słowem roku.

Czy do vibe codingu trzeba umieć programować?

Do prostego prototypu nie, i to największa zaleta tej metody. Do aplikacji, z której korzystają inni, potrzebne są podstawy, bo bez nich nie ocenisz bezpieczeństwa, nie naprawisz błędu, z którym model sobie nie radzi, i nie utrzymasz projektu dłużej niż kilka tygodni.

Od jakiego narzędzia zacząć?

Jeśli nie chcesz niczego instalować, zacznij od Lovable albo Bolt. Jeśli chcesz przy okazji uczyć się programowania, wybierz edytor z agentem, taki jak Cursor, bo widzisz w nim każdy plik i każdą zmianę. Po Claude Code sięgnij, gdy oswoisz się z terminalem i Gitem.

Czy aplikacja zbudowana vibe codingiem jest bezpieczna?

Nie ma takiej gwarancji. Testy Veracode pokazują, że spora część generowanego kodu zawiera znane podatności, a model często pomija reguły dostępu do danych i ochronę kluczy. Zanim udostępnisz aplikację innym, sprawdź te obszary albo poproś o przegląd kogoś, kto programuje.

Ile kosztuje vibe coding?

Możesz zacząć za darmo, bo większość narzędzi ma plany darmowe z limitem. Płatne plany kosztują od 10 USD miesięcznie w GitHub Copilot do 20-30 USD lub EUR w pozostałych omawianych narzędziach, a do tego dochodzą hosting i usługi używane przez aplikację. Ceny często się zmieniają, więc sprawdzaj je u producentów.

Czym vibe coding różni się od agentic engineering?

Vibe coding to budowanie przez opis bez wnikania w kod, dobre do prototypów i nauki. Agentic engineering to określenie, którym Karpathy nazywa zawodową pracę z agentami AI: agenci piszą kod, a człowiek projektuje specyfikację, przegląda zmiany, pisze testy i odpowiada za jakość.

Czytaj dalej

Używamy cookies, żeby zwiększyć Twoje doświadczenia na stronie