Vibe Coding – 5 fundamentalnych umiejętności, które musisz znać #EN361
Adam Michalski
28 grudnia 2025
Poniższy tekst to notatki z materiału edukacyjnego Tina Huang pt. „Vibe Coding Fundamentals In 33 minutes”. Wszystkie opisane przemyślenia, obserwacje i strategie pochodzą od autorki materiału.
TL;DR
- Vibe coding to nie czarna magia – wymaga strukturyzowanego myślenia i znajomości podstawowych zasad współpracy z AI
- Cztery poziomy myślenia (logical, analytical, computational, procedural) poprzez PRD determinują jakość końcowego produktu
- Git i GitHub to must-have – historia o dwóch tygodniach straconej pracy pokazuje, dlaczego kontrola wersji nie jest opcjonalna
- Debugging wymaga metodycznego podejścia – identyfikacja problemu + dostarczenie szczegółowego kontekstu AI = szybsze rozwiązanie
- MVP najpierw, iteracje później – najbardziej krytyczny mindset dla początkujących vibe coderów
- Dwa tryby pracy (implementacja vs. debugging) wymagają różnych strategii i podejścia do AI
- Mnemonik FCDC – Thinking, Frameworks, Checkpoints, Debugging, Context to fundament skutecznego vibe codingu
Wprowadzenie
Vibe coding fundamentalnie zmienia sposób tworzenia aplikacji. Według Tina Huang, ta metoda rewolucjonizuje rozwój oprogramowania, jednak nie oznacza to, że wystarczy „pogadać” z AI, a aplikacja zbuduje się sama.
Jak podkreśla autorka, vibe coding to nie czarna magia. To systematyczne podejście oparte na pięciu fundamentalnych umiejętnościach, które pozwalają efektywnie komunikować się z AI i tworzyć działające aplikacje – nawet bez głębokiej wiedzy programistycznej. Sukces zależy od tego, jak formułujesz prośby do AI i jak strukturyzujesz swoją komunikację.
Czym jest vibe coding?
Definicja według Andreja Karpathy’ego
Termin „vibe coding” został ukuty przez Andreja Karpathy’ego, jednego z członków założycieli OpenAI. W poście z 3 lutego 2025 roku opisał nowy rodzaj kodowania, w którym programista „całkowicie poddaje się vibom, przyjmuje wykładniczy rozwój i zapomina, że kod w ogóle istnieje”.
Jak wyjaśnia Tina Huang, ta metoda stała się możliwa dzięki rozwojowi modeli językowych. Narzędzia takie jak Cursor Composer z Claude Sonnet osiągnęły poziom, gdzie wystarczy powiedzieć AI, co chcesz zbudować, a ono to zbuduje. Niektórzy programiści dosłownie rozmawiają z AI głosowo, używając narzędzi takich jak Super Whisper, ledwo dotykając klawiatury.
Zmiana paradygmatu: od pisania kodu do komunikacji z AI
To fundamentalna zmiana w sposobie myślenia o developmencie. Zamiast samodzielnie pisać każdą linijkę kodu, proces ten przesuwa rolę człowieka z pozycji wykonawcy do pozycji dyrygenta procesów logicznych. Tina pokazuje prosty przykład: polecenie „stwórz prostą aplikację React o nazwie Daily Vibes, gdzie użytkownicy mogą wybrać nastrój z listy emoji, opcjonalnie napisać krótką notatkę i to wysłać” generuje działającą aplikację.
Mimo pozornej prostoty, vibe coding nie działa magicznie dla wszystkiego. Według autorki istnieją konkretne zasady i porządek w tym chaosie. Dlatego właśnie sukces zależy od tego, jak formułujesz prośby do AI i jak strukturyzujesz swoją komunikację.
Pięć fundamentalnych umiejętności vibe codingu
Tina Huang przywołuje kurs „Vibe Coding 101” stworzony przez Replit we współpracy z Deep Learning AI jako najlepsze źródło wiedzy o fundamentach. Kurs identyfikuje pięć kluczowych umiejętności: thinking, frameworks, checkpoints, debugging i context.
2.1 Thinking – Cztery poziomy myślenia
Według autorki, większość vibe coderów ma największy potencjał do poprawy właśnie w tej dziedzinie. Ponieważ używasz naturalnego języka do opisywania, co chcesz zbudować, często tak naprawdę nie przemyślisz dokładnie, jak ma wyglądać końcowy produkt. To jest niesprawiedliwe wobec AI – jeśli sam nie wiesz dokładnie, czego chcesz, jak AI ma to odgadnąć?
Tina wyjaśnia cztery poziomy myślenia na przykładzie programowania komputera do gry w szachy:
1. Logical thinking – Co buduję? W tym przypadku: gra w szachy. To najprostszy poziom, intuicyjny dla większości ludzi.
2. Analytical thinking – Jak w to grać? Jaki jest główny cel gry? Jakie są podstawowe zasady?
3. Computational thinking – Jak rozłożyć to na problemy? Jak dopasować logikę gry do skomplikowanego zestawu problemów i konfiguracji na szachownicy? W jaki sposób egzekwować zasady?
4. Procedural thinking – Jak wyróżnić się w tej grze? Nie chodzi tylko o granie, ale o granie dobrze. Jakie strategie zastosować? Jakie granice przesunąć, żeby komputer grał naprawdę dobrze?
PRD jako kluczowy dokument sukcesu
Tina Huang podkreśla, że najlepszym sposobem na przejście przez wszystkie cztery poziomy myślenia jest stworzenie PRD (Product Requirements Document). Pokazuje konkretny przykład PRD stworzonego dla jednego z klientów – systemu AI do personalizowanych planów żywieniowych dla diabetyków.
Jak cztery poziomy myślenia przekładają się na PRD:
Logical thinking jest wyrażony w sekcji „Project Overview”: „Celem projektu jest stworzenie systemu AI, który tworzy spersonalizowane plany żywieniowe dla osób z cukrzycą”.
Analytical thinking znajduje się w sekcji „Skills”: Python, przetwarzanie danych zdrowotnych, OpenAI API, przetwarzanie obrazów dla wizualnych planów, rozwój UI. Można też dodać więcej szczegółów o konkretnych pakietach, rodzaju interfejsu użytkownika i warstwy serwerowej, ale to wystarczy na start.
Computational thinking jest w sekcji „Key Features”: Etap 1 obejmuje silnik personalizowanych planów żywieniowych z metrykami jak indywidualne dane zdrowotne i czynniki socjoekonomiczne. Z kolei Etap 2 dodaje kontekstowe dostosowanie uwzględniające poziom wykształcenia i literacji.
Procedural thinking – najwyższy poziom myślenia – objawia się przez dodawanie maksymalnych detali w całym PRD. Na przykład precyzyjne definiowanie czynników jak analiza medyczna, dane o spożyciu, dochód, lokalizacja, dostępność lokalnej żywności. Im bardziej szczegółowo myślisz o grupie docelowej, doświadczeniu użytkownika i czynnikach wpływających na sukces, tym jaśniejsza wizja i lepsze rezultaty od AI.
Co ważne – nie musisz tworzyć PRD samodzielnie. Tina zaleca użycie polecenia (pokazanego w materiale), który pracuje z tobą i zadaje właściwe pytania, aby stworzyć dobrze zdefiniowany PRD. Autorka zaleca spędzenie znaczącej ilości czasu na tej sekcji. Zawsze łatwiej jest mieć jasną wizję tego, co chcesz, niż budować coś, odkryć że to nie do końca to, czego chcesz, i próbować naprawiać w połowie drogi.
✅ LISTA KONTROLNA: Tworzenie skutecznego PRD
Przed rozpoczęciem vibe codingu upewnij się, że Twój PRD zawiera:
- Project Overview – jasno zdefiniowany cel projektu (logical thinking)
- Skills/Tech Stack – lista technologii i narzędzi potrzebnych do budowy (analytical thinking)
- Key Features – podzielone na etapy z konkretnymi metrykami (computational thinking)
- Szczegółowe parametry – grupa docelowa, doświadczenie użytkownika, czynniki sukcesu (procedural thinking)
- Makiety lub inspiracja – wizualna reprezentacja końcowego produktu
- Usunięte „nice to have” – zostaw tylko kluczowe funkcje dla MVP
2.2 Frameworks – Wybór odpowiednich narzędzi
Jak zauważa Tina Huang, cokolwiek chcesz zbudować, ktoś prawdopodobnie już zbudował coś podobnego. AI jest wytrenowane na wszystkich istniejących rozwiązaniach – jeśli potrafisz skierować je w stronę właściwego szkieletu aplikacji, otrzymasz znacznie lepsze rezultaty niż prosząc, żeby wymyśliło coś od zera.
Najłatwiejszym sposobem w vibe codingu jest po prostu wylistowanie szkieletów lub pakietów, których AI ma użyć. Wskazujesz kierunek. Na przykład:
- Aplikacja webowa: Warstwa serwerowa w React, interfejs użytkownika w CSS i HTML JavaScript, konkretnie Tailwind CSS do stylowania
- Animacje: Three.js – popularny pakiet do tworzenia animacji
- Drag-and-drop UI: „Czy mógłbyś pomóc mi znaleźć szkielety React do implementacji drag-and-drop w tej aplikacji, a potem to zaimplementować?”
Uczenie się razem z AI – klucz do długoterminowego sukcesu
Kluczowa rzecz, którą podkreśla Tina: nie musisz wiedzieć dokładnie, jak zaimplementować każdą rzecz samodzielnie, ale wciąż bardzo ważne jest rozumienie struktury tego, co budujesz.
Jeśli nie znasz najlepszego sposobu implementacji, możesz zapytać AI. Kluczem jest otwartość na naukę o różnych szkieletach aplikacji i jak komponenty pasują do siebie. Przy tworzeniu aplikacji webowej powinieneś przynajmniej rozumieć, czym jest interfejs użytkownika, warstwa serwerowa, jak komunikują się ze sobą, i jakie szkielety są popularne dla każdego z nich.
Według Tina, to jest budowanie i rozwijanie się razem z AI, co czyni cię znacznie lepszym vibe coderem w dłuższej perspektywie. Jak podkreśla omawiając kursy programowania na Brilliant: umiejętność myślenia jak inżynier jest wciąż kluczowa w erze AI i vibe codingu. To nie jest zastąpienie myślenia przez AI, ale wzmocnienie twoich możliwości.
2.3 Checkpoints – Kontrola wersji
Tina Huang jest kategoryczna: rzeczy się zepsują. To fakt. Nie chcesz skończyć jak osoba, która straciła całą swoją pracę, bo nie wiedziała o kontroli wersji.
Historia ostrzegawcza pochodzi z X: „Dzisiaj był najgorszy dzień w moim życiu. Projekt, nad którym pracowałem przez ostatnie dwa tygodnie, uległ uszkodzeniu i wszystko zostało utracone. Po prostu tak. Mój SaaS zniknął. Dwa tygodnie ciężkiej pracy całkowicie zniszczone”.
Brak systematycznej kontroli wersji może prowadzić do utraty efektów wielotygodniowej pracy. Niektóre narzędzia jak Replit mają przyzwoitą kontrolę wersji wbudowaną. Jednak dla większości oprogramowania – i jako ogólnie najlepsza praktyka – należy nauczyć się Git i GitHub.
Git i GitHub – podstawy
Tina wyjaśnia podstawy: Git to samo oprogramowanie do kontroli wersji, podczas gdy GitHub to strona internetowa pozwalająca przechowywać kod w chmurze i dzielić się nim z innymi.
✅ LISTA KONTROLNA: Podstawowy przepływ pracy Git/GitHub
Konfiguracja lokalna:
git init– inicjalizacja Git w folderze projektugit status– sprawdzenie nieśledzonych plikówgit add .– śledzenie wszystkich plików (kropka = wszystko)git commit -m "initial commit"– zapisanie pierwszej wersji z komentarzem
Przydatne komendy w trakcie pracy:
git log– przejrzenie historii zmiangit reset– cofnięcie zatwierdzenia
Połączenie z GitHub:
- Stwórz nowe repozytorium na GitHub.com i skopiuj URL
git remote add origin [URL]– połączenie lokalnego repozytorium z GitHubgit branch -m main– zmiana nazwy gałęzi na „main”git push -u origin main– wysłanie kodu na GitHub
Według Tina, są oczywiście dodatkowe niuanse i komendy, ale znając ten przepływ pracy, masz wystarczającą wiedzę dla dobrej kontroli wersji. Co więcej – używając edytora kodu AI, nie musisz znać dokładnych komend. Wystarczy powiedzieć w naturalnym języku: „użyj git do zatwierdzenia zmian”, „wypchnij na GitHub na tej gałęzi”, „cofnij do poprzedniej wersji”. W rezultacie kluczem do vibe codingu jest rozumienie wysokopoziomowych struktur i przepływów, tak żebyś mógł kierować AI w implementacji. Implementacja to obszar, w którym AI się wyróżnia.
2.4 Debugging – Metodyczne rozwiązywanie problemów
Według Tina Huang, cokolwiek budujesz, pójdzie nie tak. To tylko kwestia kiedy i jak. Dlatego debugging jest równie ważny jak samo budowanie.
To umiejętność wdrukowana inżynierom przez lata treningu. Dla wielu vibe coderów, szczególnie bez technicznego doświadczenia, debugging może być czymś nowym. Najlepszy debugging jest metodyczny i dokładny. Najpierw identyfikujesz, gdzie jest problem i jaki to problem. Potem stosujesz różne rozwiązania, żeby go naprawić. Brzmi prosto, ale Tina przestrzega: nie lekceważ sztuki debugowania.
W przypadku vibe codingu, gdy zauważysz, że coś nie działa, najlepszym sposobem jest po prostu wskazanie tego AI i pozwolenie mu wymyślić rozwiązania. Tina pokazuje przykład z własnej transmisji na żywo: kopiowała komunikat błędu, mówiła „jest błąd”, a AI odpowiadało „pozwól, że spróbuję to naprawić” i proponowało różne rozwiązania.
Często wystarczy akceptować zmiany. Jeśli wciąż nie działa, może trzeba przejść przez wiele cykli. Trzeba być cierpliwym, wskazywać problem, pozwalać AI działać. Często rozwiązuje się samo. Jak żartobliwie mówi Tina podczas budowania swojej aplikacji: „jak prawdziwy vibe coder, mamy nadzieję, że samo się naprawi”. I często tak właśnie jest – czasem wystarczy dać AI drugą szansę.
Jednak w rzadkich przypadkach, gdy nie rozwiązuje się łatwo, naprawdę pomocne jest podstawowe rozumienie tego, co budujesz. Tina podaje przykład: ciągle dostawała ten sam błąd, ale ponieważ rozumiała struktury plików i jak pliki współpracują, mogła wskazać, który plik prawdopodobnie powoduje problem i która sekcja, a AI mogło to naprawić. Inny przykład: nakładające się komponenty UI. Patrząc na kod, mogła powiedzieć, że AI próbuje statycznie wprowadzać wymiary, przez co w zależności od orientacji strony czasem się nakładało, czasem nie. Wskazała, że musi być dynamiczne – i AI naprawiło.
Kluczowa zasada: jedna zmiana na raz
Autorka podkreśla bardzo istotną rzecz: kluczowe do zapamiętania jest to, że najlepiej, gdy wskazujesz coś do zmiany, robić to po jednej zmianie na raz, zamiast dawać długą listę rzeczy do zmiany, ponieważ może to potencjalnie zdezorientować AI.
To często pomijany, ale krytyczny element skutecznego vibe codingu. Zamiast mówić „zmień kolor, popraw centrowanie, napraw te trzy błędy i dodaj tę funkcję”, lepiej podzielić to na osobne, sekwencyjne prośby. AI lepiej radzi sobie ze skoncentrowanymi zmianami niż z wieloma jednocześnie.
✅ LISTA KONTROLNA: Debugging w vibe codingu
- Skopiuj pełny komunikat błędu – nie parafrazuj, daj AI dokładny tekst
- Zrób zrzut ekranu problemu – pokaż wizualnie, co nie działa
- Wskaż AI na problem: „Jest błąd” + wklej komunikat
- Akceptuj proponowane zmiany i przetestuj
- Jeśli nie działa: daj AI drugą szansę – czasem samo się naprawia
- Jeśli nie działa po 2-3 cyklach: sprawdź strukturę plików i wskaż konkretny plik/sekcję
- Bądź bardziej konkretny o tym, czego oczekujesz
- JEDNA ZMIANA NA RAZ – nie dawaj długiej listy zmian jednocześnie
2.5 Context – Im więcej, tym lepiej
Według Tina, ogólna zasada mówi: im więcej kontekstu – czyli informacji i szczegółów – możesz dostarczyć AI, tym lepsze będą rezultaty.
Kontekst może przybierać różne formy:
- Szczegółowe polecenia i PRD – im więcej detali, tym lepiej
- Makiety wizualne – pokaż dokładnie, jak ma wyglądać końcowy produkt
- Przykłady i dane – dostarcz przykładowe dane pomagające AI zrozumieć przypadek użycia
- Szczegóły środowiska – informacje o aplikacji, preferencjach, ograniczeniach
- Pełne komunikaty błędów – nie mów „to nie działa”, ale kopiuj cały komunikat błędu
- Zrzuty ekranu – wizualna reprezentacja tego, co dokładnie nie działa
Vibe coding w praktyce
Mnemonik na start
Tina Huang proponuje mnemonik pomagający zapamiętać zasady: „The Friendly Cat Dances Constantly” – Thinking, Frameworks, Checkpoints, Debugging, Context.
Replit vs. Windsurf/Cursor – praktyczne różnice
Tina pokazuje praktyczne różnice między platformami na przykładzie budowania aplikacji SEO Tag Scout – narzędzia do wizualnej inspekcji meta tagów SEO.
Replit to platforma oparta na chmurze, gdzie AI pozwala szybko kodować i wdrażać aplikacje. Jest super przyjazna dla początkujących. Wystarczy zalogować się i dostać darmowe kredyty na start. Tina zaczyna od ChatGPT, używając polecenia do stworzenia PRD. Po wygenerowaniu PRD i makiety, kopiuje wszystko do Replit. Platforma automatycznie generuje wizualizacje i populuje pliki.
Podczas budowania Tina zaleca używanie asystenta do wyjaśnienia struktury plików. To znacząco poprawia umiejętności vibe codera, bo rozumiesz, co się działa i jak pliki współdziałają. Na przykład: gdzie jest główny kod aplikacji React (client/source), gdzie komponenty UI, gdzie punkt wejścia serwera (index.ts), gdzie ścieżki.
Po pierwszym uruchomieniu aplikacja nie działała – typowe dla vibe codingu. Tina wskazała błąd, AI zaproponowało poprawkę. Po kilku iteracjach zadziałało. Następnie Tina prosiła o zmiany wizualne („make it colorful”), dodanie szczegółów. AI implementowało zmiany progresywnie.
Przydatna wskazówka od Tina: w Replit możesz kliknąć i dostać dev URL, który można sprawdzić z innych urządzeń. Wystarczy zeskanować kod QR, żeby zobaczyć, jak aplikacja wygląda na urządzeniach mobilnych. To świetny sposób na szybkie testowanie responsywności.
Windsurf (lub Cursor) to edytory kodu AI do pełnoskalowego rozwoju. Tina używa dokładnie tego samego PRD i makiety. Różnica? Windsurf to lokalne środowisko developerskie. Konfiguruje rzeczy lokalnie, instaluje pakiety. Zajmuje więcej czasu niż Replit w chmurze. Rezultat? Pierwsza wersja w Windsurf wyglądała lepiej niż pierwsza wersja Replit – była bardziej podobna do makiety. Jednak pojawiły się inne wyzwania związane z lokalnym środowiskiem.
Ciekawe, że Tina zauważa różnicę w wynikach: numery SEO score były różne między Replit i Windsurf dla tej samej strony. To pokazuje, że nawet z identycznym PRD i makietą, różne platformy mogą implementować logikę nieco inaczej. Warto o tym pamiętać i być gotowym na iteracje.
Zalety i wady platform:
Replit:
- ✅ Szybsze uruchamianie i łatwiejsze dla początkujących
- ✅ Oparte na chmurze – zero konfiguracji środowiska i proste wdrażanie
- ✅ Wbudowany QR code do testowania na urządzeniach mobilnych
- ❌ Mniej funkcjonalności i ograniczone dostosowanie
Windsurf/Cursor:
- ✅ Więcej funkcjonalności i pełna kontrola nad projektem
- ✅ Zaprojektowany dla pełnoskalowego rozwoju i większa skalowalność
- ✅ Często lepsza pierwsza wersja (bliższa makiety)
- ❌ Wyższa krzywa uczenia, trzeba konfigurować środowisko lokalnie
- ❌ Samodzielne wdrażanie i monitorowanie
W obu przypadkach zasady vibe codingu pozostają te same.
Dwa tryby pracy: implementacja vs. debugging
Tina Huang przywołuje schemat z kursu Vibe Coding 101, który pokazuje, że podczas developmentu jesteś tylko w dwóch trybach: implementacji nowych funkcji lub debugowania błędów.
Tryb implementacji – co robić
- Dostarczaj kontekst związany z nowymi funkcjami
- Wspominaj szkielety aplikacji – kieruj AI w stronę właściwych narzędzi
- Dostarczaj dokumentację z jawnymi szczegółami
- Rób przyrostowe zmiany – krok po kroku, nie wszystko naraz
- Punkty kontrolne i kontrola wersji – zatwierdzenie po każdej działającej zmianie
Tryb debugowania – co robić
- Zastanów się: jak działają rzeczy? Czy rozumiesz strukturę projektu?
- Zidentyfikuj, co dokładnie jest nie tak
- Pomyśl, jak przekazać informację do LLM – zrzuty ekranu, komunikaty błędów, wskaż właściwy plik
- Dostarczaj maksimum kontekstu – im więcej szczegółów, tym szybsze rozwiązanie
Autorka podkreśla, że uwielbia ten schemat. Zaleca zrobienie zrzutu ekranu – gdy czujesz frustrację lub nie wiesz, co robić, przypomnij sobie, w którym trybie jesteś i co powinieneś robić w tym trybie.
Najlepsze praktyki i mindset
MVP najpierw, iteracje później
Tina Huang mocno podkreśla ten mindset, szczególnie dla osób bez technicznego doświadczenia. Zawsze myśl o startowaniu małym i budowaniu w górę. Cokolwiek tworzysz, myśl o Minimal Viable Product – minimum funkcji, żeby aplikacja działała. Po uruchomieniu możesz iterować i dodawać funkcje.
To właściwy mindset vibe codingu – w przeciwieństwie do wymyślania najbardziej wystawnego rozwiązania z milionem funkcji. Tina już widzi wszystkie błędy i problemy z takiego podejścia, i jak wyrywasz sobie włosy, bo nie możesz zrozumieć, co poszło nie tak. Uruchom działającą wersję najpierw.
Rules documentation – system prompt dla AI
To bardziej zaawansowana technika. Rules lub dokumentacja to systemowe polecenie dla agenta kodującego. Możesz wylistować rzeczy, które AI ma robić lub nie robić.
✅ LISTA KONTROLNA: Dobre praktyki dla Rules Documentation
Bezpieczeństwo (MUST-HAVE szczególnie dla osób bez technicznego doświadczenia):
- Klucze API nigdy w kodzie – tylko w zmiennych środowiskowych
- Włącz CAPTCHA na wszystkich stronach autoryzacji i rejestracji
- Ograniczenie częstotliwości dla wszystkich punktów końcowych API
Efektywność kodu:
- Ogranicz zmiany kodu do minimum przy implementacji lub naprawianiu
- Nie zmieniaj działających plików jeśli nie jest to absolutnie konieczne
Koszty:
- Ogranicz częstotliwość wszystkich wywołań API – żeby nie wywoływać wielokrotnie i nie ponosić wysokich kosztów
Tina podkreśla: szczególnie dla osób bez technicznego doświadczenia, naucz się o kluczach API i dlaczego nie powinieneś ich ujawniać. Podczas nauki dodawaj do pliku zasad, żeby przypominać AI o przestrzeganiu najlepszych praktyk bezpieczeństwa. W internecie znajdziesz zasady specyficzne dla typów aplikacji lub języków. Możesz przekazać ten plik Replit, Cursor czy Windsurf.
Co dalej?
Autorka przyznaje, że jest znacznie więcej do omówienia: dokumenty stylowania do referencjonowania, refaktoryzacja kodu, serwery MCP dla agentów AI z dodatkowymi narzędziami i funkcjonalnościami. Jednak to już zaawansowane tematy wykraczające poza fundamenty.
Polecane zasoby
- Vibe Coding 101 – darmowy kurs stworzony przez Replit we współpracy z Deep Learning AI
- Brilliant – platforma STEM do nauki programowania, AI i myślenia komputacyjnego. Według Tina, kursy programowania na Brilliant pomagają zbudować fundament kodowania i uczą myśleć jak inżynier – umiejętność wciąż kluczowa w erze AI i vibe codingu
Biblioteka poleceń dla vibe coderów
Tina Huang pokazuje w materiale konkretne polecenia, które stosuje w różnych sytuacjach. Oto zbiór najważniejszych z nich wraz z kontekstem użycia.
Polecenia do tworzenia PRD (ChatGPT)
POLECENIE: Generowanie PRD z pomocą AI
Help me to make a PRD for an MVP app I'm looking to vibe code.
[Opis aplikacji - co ma robić]
Thinking through these questions:
- What is this app?
- How do I use the app?
- What are the patterns behind the app?
- How do I make the app the most useful for the target audience?
[Opcjonalnie: załącz przykładowy PRD jako reference]
Kiedy stosować: Na samym początku projektu, przed jakimkolwiek kodowaniem. To pomaga przejść przez wszystkie cztery poziomy myślenia i stworzyć solidny fundament.
Przykład użycia z materiału:
Help me to make a PRD for an MVP app. I'm looking to vibe code an interactive app that displays the SEO meta tags for any website in an interactive visual way to check that they're properly implemented. The app should fetch the HTML for a site, then provide feedback on SEO tags in accordance with best practices for SEO optimization. The app should give Google and social media previews.
POLECENIE: Doprecyzowanie PRD
Could you include [konkretna funkcja]? Also remove "nice to haves".
Kiedy stosować: Po otrzymaniu pierwszej wersji PRD, gdy chcesz dodać kluczową funkcję lub usunąć zbędne elementy, żeby skupić się na MVP.
Przykład z materiału:
Could you include a total score out of 100? Also remove nice to haves.
POLECENIE: Przygotowanie PRD do konkretnej platformy
Could you make this into a prompt to build an app using [nazwa platformy - Replit/Cursor/Windsurf]?
Kiedy stosować: Po zatwierdzeniu finalnej wersji PRD, gdy chcesz przekształcić go w format optymalny dla konkretnego narzędzia vibe coding.
POLECENIE: Generowanie makiety wizualnej
Generate an image mockup or inspo [dla tej aplikacji].
Kiedy stosować: Razem z PRD, żeby mieć wizualną reprezentację końcowego produktu. To znacząco poprawia wyniki AI w fazie implementacji.
Polecenia do nauki struktury projektu
POLECENIE: Zrozumienie architektury
Could you explain to me the file structure in this project?
Kiedy stosować: Zaraz po wygenerowaniu pierwszej wersji projektu. To pomaga zrozumieć, jak pliki współpracują ze sobą i jest kluczowe dla późniejszego debugowania.
POLECENIE: Wyjaśnienie konkretnego kodu
[Zaznacz fragment kodu] → Explain with Assistant
Kiedy stosować: Gdy widzisz fragment kodu, którego nie rozumiesz, ale który wydaje się ważny. Tina podkreśla, że to opcjonalne, ale bardzo pomaga w nauce.
Polecenia do szukania szkieletów aplikacji
POLECENIE: Znalezienie odpowiedniego szkieletu
Could you help me come up with some [typ technologii - React/Python/etc.] frameworks to implement [funkcja] into this application and then implement it?
Kiedy stosować: Gdy wiesz, czego chcesz, ale nie znasz najlepszego sposobu implementacji. AI zaproponuje szkielety i od razu je zaimplementuje.
Przykład z materiału:
Could you help me come up with some React frameworks to implement drag and drop into this application and then implement it?
Polecenia do Git/kontroli wersji
POLECENIE: Instalacja Git
Please download git for me.
Kiedy stosować: W edytorze kodu AI (Replit/Cursor/Windsurf), gdy nie masz jeszcze zainstalowanego Git.
POLECENIE: Inicjalizacja kontroli wersji
Initiate git for version control.
Kiedy stosować: Na początku projektu, zaraz po utworzeniu pierwszych plików. Nie czekaj – zrób to od razu.
POLECENIE: Operacje Git w naturalnym języku
Use git to commit these changes.
Push it to GitHub on this branch.
Roll back to previous version.
Merge everything together.
Kiedy stosować: Zamiast pamiętać konkretne komendy Git, po prostu mów AI w naturalnym języku, co chcesz zrobić. Tina podkreśla, że to jeden z kluczowych benefitów vibe codingu.
Polecenia do debugowania
POLECENIE: Podstawowe zgłoszenie błędu
There is an error.
[Wklej pełny komunikat błędu]
Kiedy stosować: Gdy coś nie działa. Nie parafrazuj błędu – kopiuj dokładny tekst. Często AI samo zaproponuje rozwiązanie.
POLECENIE: Błąd z dodatkowymi szczegółami
[Zrzut ekranu problemu]
[Pełny komunikat błędu]
This specific thing doesn't work: [konkretny opis]
Kiedy stosować: Gdy podstawowe zgłoszenie błędu nie pomogło po 2-3 cyklach. Dodaj więcej kontekstu.
POLECENIE: Uporczywy błąd
Still doesn't work. Try again.
[Opcjonalnie: wskaż konkretny plik/sekcję, która może być problemem]
Kiedy stosować: Gdy AI próbowało już naprawić, ale błąd się powtarza. Czasem wystarczy dać drugą szansę („jak prawdziwy vibe coder”).
Polecenia do zmian wizualnych/funkcjonalnych
POLECENIE: Pojedyncza zmiana wizualna
Make it colorful.
Kiedy stosować: Gdy chcesz poprawić wizualia. PAMIĘTAJ: jedna zmiana na raz! Nie dawaj długiej listy.
POLECENIE: Konkretna zmiana funkcjonalna
Make it so that you don't need to type "https://" before the URL.
Kiedy stosować: Gdy chcesz poprawić doświadczenie użytkownika. Bądź konkretny o tym, co dokładnie ma się zmienić.
POLECENIE: Naprawa konkretnego problemu interfejsu
[Zrzut ekranu problemu]
This component is overlapping. Make it dynamic so it doesn't overlap at any screen orientation.
Kiedy stosować: Gdy widzisz konkretny problem wizualny i rozumiesz, co może być przyczyną (np. statyczne wymiary zamiast dynamicznych).
Kluczowe zasady stosowania poleceń
- Jedna zmiana na raz – nie dawaj listy 5 rzeczy do zmiany jednocześnie
- Konkret > ogólnik – „Make the submit button green” > „Make it prettier”
- Pełne błędy – zawsze kopiuj cały komunikat błędu, nie parafrazuj
- Zrzuty ekranu pomagają – szczególnie przy problemach wizualnych
- Naturalny język dla Git – nie musisz znać komend, opisz co chcesz zrobić
- Iteruj – jeśli nie działa, spróbuj ponownie z większą ilością kontekstu
Kluczowy insight
Paradoks prędkości planowania
Standardowo myślimy: Vibe Coding pozwala pominąć żmudną dokumentację i od razu przejść do generowania kodu. To właśnie tam leży jego największa przewaga – szybkość.
W praktyce okazuje się, że: Najszybsza droga do gotowej aplikacji prowadzi przez powolny etap tworzenia szczegółowego PRD. Im więcej czasu poświęcisz na planowanie przed rozpoczęciem kodowania, tym szybciej osiągniesz działający produkt.
Dlaczego to jest istotne: Sztuczna inteligencja nie zawodzi w pisaniu kodu, lecz w czytaniu w myślach użytkownika. Każdy brak w specyfikacji generuje domysły modelu, które prowadzą do wielogodzinnych poprawek. PRD eliminuje interpretacje i daje AI dokładną mapę drogową. Paradoksalnie w erze programowania wspomaganego AI, myślenie stało się trudniejsze niż samo kodowanie – bo kodowanie robi AI, ale myślenia nikt za ciebie nie zrobi.
Test na jutro: Następnym razem gdy zaplanujesz nową funkcję, zamiast pisać krótkie polecenie poświęć godzinę na opisanie każdego zachowania w PRD. Przejdź przez cztery poziomy myślenia: co buduję (logical), jak to działa (analytical), jak to rozłożyć na problemy (computational), jak zrobić to najlepiej (procedural). Sprawdź, jak drastycznie spadnie liczba błędów i ile szybciej dojdziesz do działającego produktu.
Ten wpis jest częścią mojej kolekcji notatek z ciekawych podcastów, webinarów i innych treści, które uważam za wartościowe i do których sam chcę wracać. Jeśli chcesz sprawdzić oryginalne źródło, znajdziesz je tutaj: Vibe Coding Fundamentals In 33 minutes – Tina Huang