Branża IT przechodzi obecnie jedną z największych rewolucji w swojej historii. W ciągu zaledwie kilku lat sposób tworzenia oprogramowania diametralnie się zmienił. Jeszcze niedawno programiści samodzielnie pisali każdą linijkę kodu. Później pojawiły się narzędzia do autouzupełniania, a dziś coraz większą część pracy przejmują agenci AI w modelu określanym jako vibe coding.
Czym więc jest vibe coding? Vibe coding to nowe podejście do tworzenia oprogramowania. W praktyce vibe coding polega na tym, że człowiek określa cele i nadzoruje projekt, a agenci AI odpowiadają za większość pracy związanej z tworzeniem kodu. Programista nie skupia się już na ręcznym pisaniu każdej linijki kodu, a staje się architektem rozwiązania, product managerem i osobą odpowiedzialną za jakość. Takie czynności jak pisanie, debugowanie oraz refaktoryzacja kodu są autonomicznie wykonywane przez agentów AI.
Jest tu jednak pewien haczyk. Wielu przedsiębiorców, product managerów i programistów podchodzi do vibe codingu w niewłaściwy sposób. Używają ogólnego promptu, a w rezultacie otrzymują kod pełen błędów i dochodzą do wniosku, że AI nie nadaje się do tworzenia złożonych aplikacji.
Najczęściej problem leży w bezrefleksyjnym kopiowaniu fragmentów kodu wygenerowanych przez zwykłe chatboty. W efekcie powstaje niespójny projekt, który dalej jest bardzo trudny w rozwoju i optymalizacji.
Najlepsze zespoły inżynierskie pracują inaczej. Korzystają one z uporządkowanego procesu, który prowadzi projekt od pierwszego pomysłu aż do wdrożenia aplikacji na serwer produkcyjny, zachowując pełną kontrolę nad kodem.
Poniższy przewodnik pokazuje całość tego procesu krok po kroku. Opisany proces pozwala przejść od pustego pliku do aplikacji gotowej do wdrożenia, niezależnie od tego, czy korzystasz z Claude Code, czy z innego środowiska do programowania wspieranego przez AI.
Odpowiedni wybór narzędzi na początku projektu pozwala zaoszczędzić wiele godzin późniejszej pracy.
Obecnie Claude jest jednym z najlepszych modeli do vibe codingu. Wersja Premium kosztuje, ale bardzo szybko zwraca się oszczędnością czasu i mniejszą liczbą problemów podczas pracy. Ten model radzi sobie bardzo dobrze już w domyślnej konfiguracji, dzięki czemu nie trzeba ciągle kontrolować limitów tokenów. Jeśli agent AI pracuje nad projektem przez kilka godzin, ostatnią rzeczą, jakiej chcesz, jest przerwanie zadania z powodu wyczerpania limitu.
Alternatywa: dobrym wyborem jest również Codex, który osiąga solidne rezultaty. W praktyce Claude lepiej radzi sobie jednak z projektami o bardziej złożonej architekturze i wieloetapowym planowaniu. Inne modele sprawdzają się przy pojedynczych zadaniach, ale przy tworzeniu kompletnej aplikacji zwykle wymagają większych kompromisów.
Możesz korzystać zarówno z Claude Code uruchamianego z poziomu terminala (CLI), jak i z Visual Studio Code z odpowiednią wtyczką. VS Code jest szczególnie wygodny dla osób, które lubią mieć pełny podgląd struktury projektu oraz wszystkich plików. Z kolei natywny Claude Code oferuje głębszą automatyzację części procesów.
Wskazówka: przetestuj oba rozwiązania i wybierz to, które najlepiej pasuje do Twojego sposobu pracy. W dalszej części artykułu określenie Claude Code odnosi się do całego procesu pracy z agentem AI, niezależnie od wybranego interfejsu.
Największym błędem jest rozpoczęcie pracy od wpisania polecenia: „Stwórz aplikację, która robi X". W większości przypadków prowadzi to do powstania chaotycznego projektu pełnego błędów.
Burza mózgów: otwórz zwykły czat w ChatGPT lub Claude. Nie korzystaj jeszcze ze środowiska do programowania, gdyż na tym etapie chodzi wyłącznie o dopracowanie pomysłu.
Poproś AI o krytykę: nie pytaj wyłącznie o to, jak stworzyć aplikację. Poproś model, aby:
wskazał słabe strony pomysłu,
znalazł potencjalne problemy,
zaproponował alternatywne rozwiązania,
pokazał możliwe scenariusze awarii.
Na tym etapie całkowicie pomiń kwestie techniczne, takie jak język programowania, baza danych czy architektura systemu. Liczy się wyłącznie sam produkt.
Używaj odpowiednich sformułowań: dobrze działają polecenia zawierające określenia takie jak:
kompleksowy,
najlepszy,
elegancki,
nietypowy,
przemyślany.
Takie słowa zachęcają model do głębszej analizy zamiast generowania standardowego szablonu odpowiedzi.
Udokumentuj pomysł: gdy koncepcja będzie gotowa, poproś AI o przygotowanie kompletnego dokumentu w formacie Markdown (.md). Będzie on podstawą całego projektu.
Przed rozpoczęciem programowania warto włączyć jedno z najciekawszych rozszerzeń dla Claude Code – Superpowers (Supermoce).
Schemat wygląda następująco:
[Pomysł] → [Superpowers] → [Uporządkowana realizacja projektu]Co dają Supermoce?
Rozszerzenie całkowicie zmienia sposób pracy modelu.
Zamiast natychmiast pisać kod, Claude najpierw:
przygotowuje plan,
projektuje strategię testów,
analizuje możliwe rozwiązania,
dopiero później rozpoczyna implementację.
Dzięki temu agent AI działa znacznie bardziej metodycznie.
Ma to jednak swoją cenę
Proces staje się wyraźnie wolniejszy. Zadanie, które model wykonałby w godzinę, może zająć nawet pół dnia.
W zamian otrzymujesz kod, który jest:
bardziej uporządkowany,
lepiej przemyślany,
łatwiejszy do utrzymania,
dokładniej przetestowany.
Dlatego w przypadku większych projektów taki kompromis zwykle się opłaca.
Po przygotowaniu dokumentu z koncepcją i uruchomieniu Superpowers:
Dodaj plik .md do projektu.
Poleć Claude Code dokładnie go przeanalizować.
Poproś model o zadanie pytań dotyczących wszystkich niejasności.
Uzupełnij dokument na podstawie odpowiedzi. Dzięki temu już na początku eliminujesz błędne założenia i ograniczasz ryzyko halucynacji modelu.
Dopiero teraz przychodzi czas na kwestie techniczne. Poproś Claude Code (z aktywnym Superpowers), aby zaprojektował optymalną architekturę aplikacji i zapisał ją jako kolejny dokument Markdown.
Specyfikacja powinna obejmować między innymi:
język programowania,
stos technologiczny,
strukturę danych,
architekturę aplikacji,
wykorzystywane biblioteki.
Aby uniknąć problemów w połowie projektu, warto zastosować prosty workflow:
[Claude Code] → [przygotowanie 10 pytań badawczych] → [AI z funkcją Deep Research] → [zapis wyników do Markdown] → [ponowne przekazanie dokumentów do Claude Code] Nie zostawiaj interfejsu użytkownika na sam koniec projektu. Wczesne przygotowanie frontendu pozwala szybko zobaczyć działający produkt i znacznie łatwiej wychwycić błędy.
Krok 1 Poproś Claude Code o przygotowanie szczegółowego briefu UI/UX na podstawie wcześniejszej specyfikacji. Przeczytaj go i wprowadź własne poprawki. Dobra intuicja projektowa nadal pozostaje przewagą człowieka nad AI.
Krok 2 Wklej gotowy brief do Claude Design i przygotuj kompletny prototyp aplikacji. Dopracowuj go aż do momentu, gdy będzie odpowiadał wszystkim wymaganiom.
Krok 3 W tym samym czacie poproś o przygotowanie pełnego designu systemu oraz biblioteki komponentów. Zachowaj tę rozmowę – będzie przydatna podczas projektowania kolejnych ekranów.
Krok 4
Pobierz wszystkie zasoby projektu, umieść je w katalogu aplikacji i poleć Claude Code przeanalizować całą strukturę interfejsu. Niech model zapisze swoje wnioski w kolejnym pliku .md .
Na tym etapie Claude dysponuje już:
opisem koncepcji,
specyfikacją techniczną,
wynikami Deep Research,
projektem interfejsu.
Teraz czas przygotować kompletny plan realizacji projektu. Poproś Claude Code o wygenerowanie głównego dokumentu Markdown zawierającego wszystkie etapy prac. To będzie główny dokument całego projektu.
Wdrożenie zostaw na koniec. Najpierw stwórz i dokładnie przetestuj aplikację lokalnie lub na własnym serwerze. Dopiero później przechodź do środowiska produkcyjnego.
Automatyczne zarządzanie Git. Superpowers automatycznie korzysta z kontroli wersji Git, dzięki czemu łatwo wrócić do wcześniejszych zmian. Repozytorium GitHub warto podłączać przede wszystkim wtedy, gdy nad projektem pracuje cały zespół.
Infrastrukturę AI przygotuj wcześniej. Jeżeli aplikacja korzysta z modeli językowych (LLM), skonfiguruj tę część już na początku projektu. Autor workflow wykorzystuje lokalne modele lub API platformy Bitrix24 Vibe Code, a w razie potrzeby korzysta również z OpenRouter.
Ręcznie popraw plan wygenerowany przez AI. Przed rozpoczęciem pracy warto wprowadzić dwie zmiany:
Przenieś budowę interfejsu użytkownika na możliwie wczesny etap projektu.
Od pierwszego dnia wymuś bardzo szczegółowe logowanie zdarzeń, które znacząco ułatwi późniejsze debugowanie.
To właśnie ten etap pochłania około 95% całego czasu pracy nad aplikacją. W praktyce agenci AI często pracują samodzielnie przez wiele godzin. Twoją rolą jest przede wszystkim nadzorowanie postępów, kontrolowanie kolejnych kamieni milowych i pomaganie modelowi w sytuacjach, w których potrzebuje dodatkowych informacji lub decyzji.
Zadbaj o możliwie szerokie pokrycie testami. Korzystaj z narzędzi takich jak Playwright, które umożliwiają uruchamianie testów w przeglądarce bez interfejsu graficznego (headless). Dzięki temu Claude może nie tylko analizować logi aplikacji, ale również sprawdzić, jak działa interfejs użytkownika i czy wszystko wygląda zgodnie z założeniami.
Regularnie ręcznie sprawdzaj aplikację. Automatyczne testy są niezwykle pomocne, ale nie wychwycą wszystkich problemów związanych z doświadczeniem użytkownika (UX). Po każdej większej zmianie samodzielnie przejdź przez najważniejsze ścieżki w aplikacji. Kilka minut ręcznych testów często pozwala znaleźć błędy, których żaden automat nie zauważy.
Przejrzyj wszystkie teksty w interfejsie. To jeden z najczęstszych problemów podczas vibe codingu. AI potrafi wygenerować świetny kod, ale teksty w aplikacji bywają niespójne, nienaturalne lub zwyczajnie pozbawione sensu. Przed wdrożeniem warto ręcznie przejrzeć wszystkie komunikaty, przyciski, formularze i opisy oraz poprawić ich treść.
Wskazówka dla profesjonalistów: dodatkowy audyt architektury. Dobrą praktyką jest otwieranie co kilka etapów nowej rozmowy z innym agentem AI. Przekaż mu aktualny kod projektu i poproś o niezależny audyt architektury.
Świeże spojrzenie bardzo często pozwala wykryć:
ukryte błędy,
niepotrzebnie skomplikowane rozwiązania,
potencjalne problemy z wydajnością,
luki bezpieczeństwa.
Przed wdrożeniem aplikacji wykonaj osobny audyt bezpieczeństwa. Możesz wykorzystać narzędzia dostępne w GitHub oraz odpowiednio przygotowane prompty dla Claude, aby przeskanować kod pod kątem:
podatności typu injection (wstrzykiwanie),
wycieków danych,
błędów związanych z autoryzacją,
innych potencjalnych zagrożeń.
Warto zrobić to jeszcze przed pierwszym uruchomieniem aplikacji na serwerze produkcyjnym.
W zależności od rodzaju projektu możesz wybrać jedno z trzech rozwiązań.
Lokalny serwer
Dobry wybór dla:
prywatnych narzędzi,
automatyzacji,
projektów wykorzystywanych wyłącznie wewnątrz organizacji.
Bitrix24 Vibe Code (Black Hole Server)
Sprawdza się w aplikacjach wymagających integracji z ekosystemem Bitrix24 oraz większego poziomu bezpieczeństwa.
Klasyczny serwer VPS
Najlepsze rozwiązanie dla publicznych aplikacji działających pod własną domeną.
Claude bardzo dobrze radzi sobie również z zadaniami infrastrukturalnymi, takimi jak:
konfiguracja środowiska serwerowego,
przygotowanie skryptów wdrożeniowych,
podstawowa konfiguracja zapory sieciowej (firewall),
automatyzacja procesu deploymentu.
Po uruchomieniu aplikacji wykonaj kolejny audyt bezpieczeństwa — tym razem już na środowisku produkcyjnym. Pozwoli to wykryć problemy wynikające z konfiguracji serwera, których nie da się zauważyć podczas testów lokalnych. Jeżeli aplikacja wykorzystuje modele językowe (LLM), koniecznie przetestuj ją również pod kątem prompt injection, czyli prób manipulowania modelem za pomocą odpowiednio przygotowanych poleceń.
Po wdrożeniu projektu praca się nie kończy. Ponownie wyślij logi produkcyjne do Claude, aby przeprowadzić szybkie testy (smoke tests) oraz usunąć drobne błędy pojawiające się po uruchomieniu aplikacji.
Nigdy nie próbuj przebudowywać całego projektu jednocześnie. Duże refaktoryzacje wykonywane przez AI bardzo często prowadzą do przypadkowego uszkodzenia wcześniej działających elementów. Dlatego należy zastosować się do poniższych zasad:
Aktualizacje powinny być maksymalnie izolowane i modułowe.
Spraw, by Claude edytował wyłącznie konkretny fragment kodu — pojedynczą funkcję lub plik.
Po każdej zmianie uruchamiaj komplet testów.
Jeżeli w przyszłości zdecydujesz się przejść z Claude do Codexa lub innego narzędzia AI, dobrze prowadzona dokumentacja znacznie ułatwi migrację.
W katalogu projektu powinny znaleźć się wszystkie pliki Markdown:
opis koncepcji,
specyfikacja,
wyniki badań,
plan projektu.
Dzięki tamu nowy model bardzo szybko zrozumie cały kontekst, architekturę i logikę kodu. Dobre udokumentowanie projektu daje więc dużą przewagę.
.md)?W całym opisanym procesie tworzenia aplikacji przewija się jedna zasada: wszystkie najważniejsze informacje zapisuj w plikach Markdown znajdujących się bezpośrednio w katalogu projektu.
Dotyczy to między innymi:
opisu koncepcji,
specyfikacji technicznej,
wyników Deep Research,
planu projektu,
kolejnych decyzji architektonicznych.
Takie podejście ma trzy kluczowe zalety.
Łatwy powrót do wcześniejszych decyzji
Każdy członek zespołu może w dowolnym momencie sprawdzić, dlaczego dana decyzja została podjęta. Dzięki temu nie trzeba odtwarzać kontekstu z pamięci ani przeszukiwać historii rozmów.
Zachowanie kontekstu dla AI
Agent AI może w każdej chwili ponownie odczytać dokumentację i natychmiast odzyskać pełny kontekst projektu. To znacznie ogranicza zużycie tokenów i zmniejsza ryzyko błędnych założeń.
Łatwa migracja projektu
Pliki Markdown tworzą niezależną bazę wiedzy o projekcie. Pozwala to bez większego problemu przenieść projekt pomiędzy różnymi modelami AI lub narzędziami do programowania wspieranych przez sztuczną inteligencję.
Morał tego artykułu brzmi więc następująco:
Dokumentuj wszystko w plikach Markdown.