Jak programować z ChatGPT lub Gemini: poradnik vibe codingu dla początkujących

Vibe coding to opisanie słowami, czego chcesz, i pozwolenie, by ChatGPT lub Gemini napisał kod. Żeby robić to dobrze jako początkujący, proś o całe pliki, po jednym małym kroku, i zapisuj każdą działającą wersję. Darmowe rozszerzenie AI Code Harvester wypisuje wszystkie pliki z rozmowy i pobiera je jednym kliknięciem, więc nie musisz przewijać w poszukiwaniu kodu. Działa w przeglądarce i nie wymaga konta.

Czym jest vibe coding i gdzie utykają początkujący

W vibe codingu nie piszesz kodu sam. Mówisz AI, co ma zbudować (stronę dla mojej piekarni), ono pisze pliki, ty je testujesz i mówisz, co zmienić. To prawdziwy sposób na start, bo wyniki widzisz po kilku minutach. Kłopot zaczyna się po godzinie. Rozmowa jest bardzo długa, kod rozrzucony po wielu odpowiedziach, a ty przewijasz w górę i w dół, szukając ostatniej wersji każdego pliku. Kopiujesz, wklejasz, gubisz się i psujesz coś, co działało. Poniższe nawyki rozwiązują większość tego.

Siedem nawyków, które ułatwiają programowanie z AI

1. Zacznij od jednego jasnego zdania. Powiedz, co budujesz, dla kogo i jak ma wyglądać. Jednostronicowa strona dla osoby wyprowadzającej psy, ze zdjęciem, cennikiem i formularzem kontaktowym. Jasny cel jest wart więcej niż długi prompt.
2. Za każdym razem proś o cały plik. Napisz: Zawsze pokazuj cały plik, nie tylko zmienione linie. Fragmenty to powód numer jeden, dla którego początkujący wklejają kod w złe miejsce.
3. Niech AI nazywa każdy plik. Poproś, by nad każdym blokiem kodu pisało nazwę pliku z rozszerzeniem, np. index.html lub style.css. Zapisz to jako stałą regułę: w ChatGPT wejdź w Settings → Personalization → Custom Instructions.
4. Zmieniaj jedną rzecz naraz. Jedna prośba, potem test. Jeśli poprosisz o dziesięć zmian naraz i coś się zepsuje, nie będziesz wiedzieć, która zawiniła.
5. Wklej komunikat o błędzie z powrotem do rozmowy. Gdy strona jest pusta albo przycisk nic nie robi, wklej dokładny tekst błędu i napisz napraw to. Nie musisz go jeszcze rozumieć.
6. Zapisz działającą wersję przed każdą większą zmianą. Pobierz pliki, włóż je do folderu i zachowaj tę kopię. Jeśli następna odpowiedź wszystko zepsuje, wracasz w minutę.
7. Pytaj dlaczego, prostymi słowami. Powiedz wyjaśnij, co robi ta część, jakbym był nowy. Krótki kurs podstaw obok rozmowy bardzo pomaga, bo wtedy zauważasz, kiedy AI się myli.

Pomocnik, który kończy przewijanie: AI Code Harvester

• Lista plików zamiast długiej rozmowy. Panel pokazuje każdy blok kodu z ostatniej odpowiedzi jako wiersz z nazwą pliku i kolorową kropką oznaczającą typ.
• Kopiuj lub skocz. Każdy wiersz ma przycisk Copy i przycisk ze strzałką, który przewija rozmowę do tego bloku.
• Wybierz, co zapisać. Zaznacz lub odznacz Include in download przy każdym pliku.
• Jedno kliknięcie na wszystko. Download all as ZIP zapisuje całą odpowiedź jako jeden ZIP. Wolisz osobne pliki? Przełącz na 1-by-1.
• Przydatne dodatki. Przycisk Jump to Bottom, suwak przezroczystości, żeby panel nie zasłaniał rozmowy, i przycisk wyjaśniający konfigurację.
• Zostaje tam, gdzie go postawisz. Przeciągnij, zmień rozmiar lub zwiń, a może zapamiętać położenie.

Możesz też zmienić wygląd. W ustawieniach wybierasz jeden z czterech kolorów akcentu: fioletowy, niebieski, zielony lub bursztynowy, i decydujesz, gdzie trafiają pliki: do folderu AI_Code_Harvester w Pobranych, prosto do Pobranych albo pytać za każdym razem. Konfiguracja trwa minutę: dodaj z Chrome Web Store i otwórz ChatGPT lub Gemini.

Dlaczego zainstalować od pierwszego dnia

Gdy jesteś nowy, robisz wiele małych prób, a każda daje pliki. Bez pomocnika każda to ręczna robota: przewiń, zaznacz, skopiuj, wklej do pliku, nazwij. Z Harvesterem to jedno kliknięcie, a pliki mają już właściwe nazwy, więc folder projektu jest uporządkowany od pierwszego dnia. Dzięki temu nawyk szósty (zapisz działającą wersję) kosztuje prawie nic i właśnie dlatego rozszerzenie jest najprzydatniejsze na początku. Jest darmowe, działa tylko na chatgpt.com i gemini.google.com, a twoje rozmowy zostają na twoim komputerze. Więcej na stronie AI Code Harvester.

Uczciwe ograniczenia

• Zbiera tylko bloki kodu. Jeśli AI da tylko PDF, obraz albo link do pliku, na ekranie nie ma nic do zapisania.
• Nie odtwarza folderów. ZIP jest płaski, więc pliki do folderów przenosisz sam.
• Nie pisze i nie naprawia kodu. To nadal zadanie AI, a testowanie jest twoje.
• Widoki Canvas (boczne okno otwierane w niektórych rozmowach) mogą nie zostać znalezione. Poproś AI, by wkleiło kod do rozmowy.

Znasz już część z zapisem do ZIP? Krok po kroku jest w naszym poradniku o pobieraniu kodu z AI jako ZIP.

Warto wiedzieć, zanim zaczniesz

FAQ