Vibe coding od zera: Claude Code, Cursor i Copilot

• Wybierz jedno narzędzie i jeden mały projekt.
• Najpierw przygotuj działający punkt wyjścia, potem dodawaj pojedyncze funkcje.
• Podawaj AI cel, pliki, ograniczenia i sposób sprawdzenia wyniku.
• Przed zmianą zachowaj działającą wersję.
• Nie wklejaj do rozmowy haseł, kluczy dostępu ani prywatnych danych.

Prompt to instrukcja wpisana do AI. Zamiast „zrób aplikację” napisz: „dodaj przycisk usuwania zadania do istniejącej listy”. Kontekst to informacje potrzebne do wykonania polecenia, na przykład zawartość pliku, komunikat błędu i opis oczekiwanego zachowania.

Model jest mechanizmem AI generującym odpowiedzi. Agent to narzędzie, które korzysta z modelu i wykonuje działania, na przykład czyta pliki lub zmienia kod. Claude Code potrafi czytać projekt, edytować pliki i uruchamiać polecenia.

Polecam taki podział odpowiedzialności: ty wybierasz cel i oceniasz rezultat, AI proponuje wykonanie. Dla naszego ćwiczenia cykl wygląda tak:

flowchart TD
    A[Ty opisujesz cel] --> B[AI analizuje plik]
    B --> C[Ty oceniasz plan]
    C --> D[AI zmienia kod]
    D --> E[Ty sprawdzasz działanie]
    E --> F{Wynik poprawny?}
    F -->|Tak| G[Zachowujesz wersję]
    F -->|Nie| A

Nie musisz od razu rozumieć każdej linijki. Polecam jednak zatrzymać się przy zmianie, której nie umiesz wyjaśnić prostym zdaniem. „Przycisk usuwa tylko wskazany element” jest dobrym początkiem takiego wyjaśnienia.

Edytor kodu to program do pracy z plikami projektu. VS Code, czyli Visual Studio Code, jest jednym z takich edytorów. Terminal to okno, w którym wpisujesz polecenia tekstowe; CLI oznacza interfejs obsługiwany tymi poleceniami.

Poniższe porównanie dotyczy sposobu rozpoczęcia ćwiczenia, a rekomendacje są wyborem redakcyjnym.

Na pierwsze ćwiczenie wybierz jedno narzędzie, wykonaj zadanie i oceń, czy rozumiesz zmieniony plik. Za kryterium wyboru przyjmij wygodę pracy i łatwość sprawdzania zmian.

Przygotuj przeglądarkę, edytor zwykłego tekstu oraz połączenie z internetem do korzystania z narzędzia AI. Ścieżki instalacji Cursor i VS Code poniżej opisuję dla Windows 11, a polecenia Claude Code dla Ubuntu 24.04 z powłoką Bash, czyli programem interpretującym polecenia terminala.

Dla Claude Code producent wymienia między innymi Ubuntu 20.04 lub nowsze i co najmniej 4 GB pamięci RAM, czyli pamięci operacyjnej komputera. Potrzebujesz też dostępu przez subskrypcję Claude, konto w Console, czyli panelu Anthropic do korzystania z API (sposobu komunikacji między programami) i rozliczania jego użycia, albo obsługiwanego dostawcę chmurowego, zgodnie z wymaganiami i instrukcją rozpoczęcia pracy. Pozostałe konta skonfigurujesz w wybranej ścieżce.

1. Przygotuj folder i plik

Utwórz w menedżerze plików pusty folder vibe-start. To będzie folder projektu. Zachowuj w nim wyłącznie materiały tego ćwiczenia.

Przykład używa HTML, języka opisującego strukturę strony, oraz JavaScript, języka obsługującego jej zachowanie. Nie wymaga instalowania bibliotek, czyli dodatkowych pakietów kodu.

Utwórz w folderze projektu plik index.html:

<!doctype html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Moje zadania</title>
</head>
<body>
  <h1>Moje zadania</h1>
  <form id="formularz">
    <label for="zadanie">Nowe zadanie</label>
    <input id="zadanie" name="zadanie" type="text" required>
    <button type="submit">Dodaj</button>
  </form>
  <p id="komunikat" role="status"></p>
  <ul id="lista"></ul>

  <script>
    const formularz = document.querySelector("#formularz");
    const pole = document.querySelector("#zadanie");
    const lista = document.querySelector("#lista");
    const komunikat = document.querySelector("#komunikat");

    formularz.addEventListener("submit", (zdarzenie) => {
      zdarzenie.preventDefault();
      const tekst = pole.value.trim();

      if (!tekst) {
        komunikat.textContent = "Wpisz treść zadania.";
        return;
      }

      const element = document.createElement("li");
      element.textContent = tekst;
      lista.append(element);
      komunikat.textContent = "Dodano zadanie.";
      pole.value = "";
      pole.focus();
    });
  </script>
</body>
</html>

To pełny plik naszego przykładu. Kod pobiera tekst z pola, odrzuca same spacje i dopisuje element do listy. Nie zapisuje zadań na później.

2. Sprawdź punkt wyjścia

Otwórz index.html w przeglądarce. Powinny pojawić się nagłówek „Moje zadania”, pole tekstowe i przycisk „Dodaj”.

Wpisz „Przeczytać poradnik” i kliknij przycisk. Zadanie powinno pojawić się poniżej, a pole powinno zostać wyczyszczone. Odświeżenie strony usuwa tę listę, ponieważ przykład przechowuje ją tylko w bieżącej stronie.

3. Zachowaj kopię

Skopiuj cały folder projektu do osobnego folderu vibe-start-kopia przed pierwszą zmianą AI. Otwieraj w narzędziu folder vibe-start, aby kopia pozostała punktem powrotu.

Przy większym projekcie polecam Git, system zapisujący historię zmian w plikach. Repozytorium to projekt objęty taką historią.

Wykonaj tylko jedną z poniższych ścieżek. Następnie przejdź do wspólnego polecenia o usuwaniu zadania.

Claude Code: start w terminalu Ubuntu 24.04

Otwórz terminal w folderze vibe-start. Polecenia tej ścieżki wpisuj w powłoce Bash; nie przenoś ich do terminala Windows bez dobrania instrukcji dla tego systemu.

1. Przygotuj curl, program pobierający dane z adresów internetowych. Jeśli go brakuje, dokumentacja producenta podaje dla Ubuntu instalację pakietów curl i gnupg:

sudo apt install curl gnupg

sudo: unable to send audit message: Operation not permitted

WARNING: apt does not have a stable CLI interface. Use with caution in scripts.

Reading package lists...
Building dependency tree...
Reading state information...
curl is already the newest version (8.5.0-2ubuntu10.15).
gnupg is already the newest version (2.4.4-2ubuntu17.6).
0 upgraded, 0 newly installed, 0 to remove and 2 not upgraded.

Polecenie instaluje pakiety systemowe i może poprosić o hasło administratora oraz zatwierdzenie instalacji. gnupg zawiera narzędzia do szyfrowania danych i sprawdzania podpisów cyfrowych, które pomagają potwierdzić pochodzenie danych.

2. Uruchom instalator Claude Code dla Linuksa:

curl -fsSL https://claude.ai/install.sh | bash

Setting up Claude Code...

Checking installation status...
Installing Claude Code native build latest...
Setting up launcher and shell integration...
⚠ Setup notes:
  ● Native installation exists but ~/.local/bin is not in your PATH. Run:

    echo 'export PATH="$HOME/.local/bin:$PATH"' >> your shell config file && source your shell config file

…
✅ Installation complete!

To polecenie pobiera skrypt producenta i natychmiast wykonuje go w Bash, instalując narzędzie. Sprawdź adres przed uruchomieniem.

3. Po zakończeniu otwórz nowe okno terminala w folderze projektu i sprawdź instalację:

claude --version

Oczekiwany wynik to numer wersji z oznaczeniem Claude Code, zgodnie z instrukcją weryfikacji.

4. Rozpocznij sesję, jawnie wybierając tryb uprawnień:

claude --permission-mode default

Flaga --permission-mode wybiera tryb sesji według dokumentacji CLI. Tryb default pyta o zgodę przy pierwszym użyciu danego narzędzia, zgodnie z opisem uprawnień; nie oznacza pytania przed każdą czynnością.

5. Przy pierwszym uruchomieniu przejdź przez logowanie zgodnie z komunikatami. Dla kont subskrypcyjnych i Console uwierzytelnienie odbywa się w przeglądarce. Potem poproś o wyjaśnienie index.html przed jego zmianą.

Cursor: start w Windows 11

1. Pobierz instalator Windows ze strony pobierania Cursor. Uruchom instalator, otwórz aplikację i zaloguj się.
2. Wybierz folder vibe-start.
3. Otwórz Agent skrótem Ctrl+I i poproś o wyjaśnienie pliku.
4. Zleć jedną małą zmianę, a potem obejrzyj różnice i sprawdź rezultat. Tę kolejność opisuje przewodnik startowy Cursor.

Diff to widok różnic między wcześniejszym i zmienionym kodem. Polecam czytać go przed kolejnym poleceniem, nawet gdy strona już wygląda poprawnie.

Copilot: start w VS Code na Windows 11

1. Jeśli nie masz edytora, pobierz Visual Studio Code User setup i uruchom pobrany instalator, zgodnie z instrukcją dla Windows. Otwórz w edytorze folder vibe-start.
2. Najedź na ikonę Copilot w pasku stanu i wybierz Use AI Features.
3. Wybierz sposób logowania i wykonaj wyświetlone kroki. Potrzebujesz dostępu do Copilota na swoim koncie GitHub, zgodnie z instrukcją konfiguracji.
4. W menu Copilot Chat wybierz Open Chat, jeżeli rozmowa nie jest otwarta. Na dole widoku wybierz Agent, wpisz zadanie i przejrzyj zmiany, zgodnie z instrukcją trybu agenta.

1. Najpierw poproś o wyjaśnienie

W wybranym narzędziu wpisz:

Przeczytaj index.html. Wyjaśnij po polsku, co robi formularz
i gdzie powstaje element listy. Na razie nie zmieniaj plików.

Polecam sprawdzić, czy odpowiedź wskazuje obsługę wysłania formularza i tworzenie elementu li, czyli pozycji listy. Jeżeli wyjaśnienie jest niezrozumiałe, poproś o opis na przykładzie wpisanego zadania.

2. Podaj cel i ograniczenia

Następnie użyj tego polecenia:

Dodaj do każdego zadania przycisk „Usuń”.
Kliknięcie ma usuwać wyłącznie zadanie przy tym przycisku.
Zmieniaj tylko index.html. Nie instaluj bibliotek.
Zachowaj dodawanie zadań i odrzucanie samych spacji.
Najpierw przedstaw krótki plan i poczekaj na moją decyzję.
Po zmianie wyjaśnij kod oraz podaj testy ręczne.

To proponowana instrukcja ćwiczenia, a nie zabezpieczenie uprawnień. W Claude Code instrukcje w rozmowie nie zmieniają tego, co narzędzie może wykonać; uprawnienia konfiguruje się oddzielnie, jak wyjaśnia dokumentacja.

Przeczytaj plan i zleć jego wykonanie, jeśli odpowiada zadaniu. Oczekiwany rezultat to przycisk przy każdej nowej pozycji oraz usuwanie pojedynczej pozycji.

3. Wykonaj własny test

Zapisz zmieniony plik i odśwież stronę w przeglądarce.

1. Dodaj „Nauka” oraz „Spacer”.
2. Usuń „Nauka” i sprawdź, czy „Spacer” pozostał.
3. Dodaj kolejne zadanie po usunięciu poprzedniego.
4. Spróbuj dodać same spacje.
5. Wpisz <b>test</b> i sprawdź, czy pozostaje zwykłym tekstem.

Ostatni przypadek sprawdza zachowanie obecnego przykładu, który przypisuje wpis przez textContent. Jeśli AI zmieniło sposób wstawiania tekstu, poproś o wyjaśnienie tej decyzji.

Sam komunikat „gotowe” nie jest wynikiem testu. GitHub zaleca sprawdzanie kodu AI pod kątem błędnej logiki, zmyślonych interfejsów i usuwania testów zamiast naprawiania problemu.

Terminal nie znajduje Claude Code

Jeżeli po instalacji pojawia się command not found, najpierw otwórz nowe okno terminala. Gdy problem pozostaje, wykonaj poniższe kroki z instrukcji naprawy PATH dla Bash na Ubuntu 24.04. PATH to lista folderów, w których powłoka szuka programów; dokumentacja podaje kroki osobno dla różnych systemów.

Najpierw musisz zakończyć instalację Claude Code instalatorem dla Linuksa z wcześniejszej sekcji; naprawa PATH dotyczy sytuacji, gdy instalacja się udała.

1. W terminalu w folderze projektu sprawdź, czy PATH zawiera ~/.local/bin:

if printf '%s\n' "$PATH" | tr ':' '\n' | grep -Fx "$HOME/.local/bin"; then
  printf '%s\n' 'Folder jest w PATH.'
else
  printf '%s\n' 'Brak folderu w PATH. Wykonaj krok 2.'
fi

Brak folderu w PATH. Wykonaj krok 2.

Sam grep zwraca kod 1, gdy nie znajdzie pasującej linii; powyższy warunek if w Bash obsługuje ten wynik i wyświetla komunikat.

Jeśli polecenie wypisze ścieżkę do .local/bin w twoim folderze domowym, ten folder jest już w PATH. W takim przypadku pomiń następny krok; dokumentacja zaleca wtedy sprawdzenie konfliktów między instalacjami.

2. Jeśli polecenie wypisze „Brak folderu w PATH. Wykonaj krok 2.” lub instalator wskazał brak ~/.local/bin w PATH, dodaj ten folder do konfiguracji Bash i wczytaj ją:

echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc

Pierwsze polecenie dopisuje ustawienie PATH na końcu pliku konfiguracji Bash ~/.bashrc, zachowując jego dotychczasową zawartość. Drugie wczytuje konfigurację w bieżącym terminalu.

3. Ponownie sprawdź instalację:

claude --version

Oczekiwany wynik to numer wersji z oznaczeniem (Claude Code), zgodnie z instrukcją weryfikacji.

Strona pokazuje kod albo zmiana nie działa

Sprawdź, czy plik nazywa się dokładnie index.html, a nie index.html.txt. Zapisz go jako zwykły tekst i otwórz w przeglądarce. Porównaj folder otwarty w AI z folderem pliku wyświetlanego w przeglądarce.

Jeśli nadal coś nie działa, opisz powtarzalny przypadek: „dodaję dwa zadania, usuwam pierwsze, znikają oba”. Polecam dołączyć oczekiwany wynik i aktualny fragment kodu, zamiast prosić ogólnie o naprawienie wszystkiego.

Agent rozbudowuje projekt ponad potrzebę

Zatrzymaj pracę i przypomnij zakres: „jeden plik, jeden przycisk, bez bibliotek”. Jeśli zmiana jest trudna do oceny, wróć do kopii i zleć mniejsze zadanie. Przy przywracaniu pliku z kopii nadpiszesz bieżące zmiany w tym pliku.

Polecam po każdej poprawce wybrać jeden fragment kodu i rozłożyć go na części. Zmienna to nazwana wartość, na przykład tekst wpisanego zadania. Funkcja to fragment kodu wykonujący określoną pracę, a zdarzenie to sygnał, taki jak kliknięcie przycisku albo wysłanie formularza.

1. Poproś o wyjaśnienie jednej funkcji na przykładzie danych wejściowych.
2. Samodzielnie zmień drobny szczegół, na przykład tekst komunikatu.
3. Sprawdź, czy umiesz przewidzieć wynik przed uruchomieniem strony.

Polecam też zapisywać pytania: „dlaczego usuwamy spacje?” albo „co zatrzymuje przeładowanie formularza?”. W kolejnym zadaniu spróbuj samodzielnie odpowiedzieć na jedno z nich, zanim poprosisz AI o podpowiedź.

Klucz API to sekret pozwalający programowi korzystać z usługi w twoim imieniu. API jest sposobem komunikacji między programami. W tym ćwiczeniu nie tworzysz klucza i nie wpisujesz żadnego sekretu do kodu strony.

Polecam pracować na danych przykładowych oraz nie otwierać w agencie folderu zawierającego hasła lub dokumenty osobiste. Jeśli później połączysz projekt z usługą, najpierw poznaj podstawy komunikacji przez API, aby rozumieć przesyłane dane.

W Cursor funkcje AI przesyłają instrukcje i kontekst kodu dostawcom modeli. Włączony Privacy Mode zapobiega używaniu kodu do treningu, czyli uczenia modeli na danych. Nie traktuj go jako pracy wyłącznie na swoim komputerze.

Polecam przed płatnymi ćwiczeniami sprawdzić limit wykorzystania i warunki dodatkowych opłat. W VS Code możesz otworzyć panel statusu Copilota z paska stanu i zobaczyć wykorzystaną część miesięcznego limitu, zgodnie z opisem monitorowania użycia.

Czy można programować z AI bez znajomości kodu?

Możesz zacząć od tego ćwiczenia bez wcześniejszego pisania programów. Polecam równolegle uczyć się, jak działa zmieniany fragment: poproś o wyjaśnienie funkcji, sam popraw tekst przycisku i ponownie sprawdź stronę.

Czy GitHub Copilot jest darmowy?

Istnieje Copilot Free. Według instrukcji VS Code logowanie bez planu zapisuje uprawnione konto do tego wariantu z miesięcznym limitem. Przed rozpoczęciem sprawdź dostęp swojego konta i aktualne warunki planu.

Dlaczego AI pisze niedziałający kod?

Dokumentacja GitHub wskazuje między innymi błędną logikę i ignorowanie ograniczeń. Polecam podać konkretny błąd, oczekiwane zachowanie i sposób jego odtworzenia, a następnie sprawdzić poprawkę na tych samych danych.

Czy aplikację napisaną z AI można opublikować?

Przed publikacją polecam oddzielny przegląd plików, działania i bezpieczeństwa. Nasza lista jest ćwiczeniem bez trwałego zapisu, logowania i synchronizacji. Jeśli potrzebujesz takich funkcji, opisz je jako osobne zadania i zaplanuj sprawdzenie każdej z nich.

Najpierw poznaj polecenia Git, aby nauczyć się zachowywać i przeglądać wersje projektu. Potem wybierz Pythona, jeśli chcesz rozwijać podstawy programowania na skryptach, czyli programach uruchamianych do konkretnego zadania.

Gdy będziesz przygotowywać środowisko bardziej rozbudowanego projektu, polecam poznać podstawy Dockera. Kontener to odizolowane środowisko uruchomienia aplikacji. Na tym etapie polecam jednak zakończyć jedną małą zmianę: przycisk „Usuń”, który działa poprawnie i którego kod potrafisz wyjaśnić.