Rdzeń programu czytasz bez konta. Quizy, zapis postępu i biblioteka — dla członków.
Najlepszy sposób na naukę to zbudowanie czegoś prawdziwego. W tym module zbudujesz swoją pierwszą działającą aplikację — od opisu po deploy. Bez pisania kodu. Serio.
- 1Doświadczenie > teoria — czytanie o vibe codingu nie zastąpi zbudowania czegoś. Po tym module masz konkretny dowód, że to działa.
- 2Iteracja to kluczowa umiejętność — nauczysz się komunikować zmiany AI, co jest fundamentem całej reszty.
- 3Coś Twojego w internecie — masz URL, który możesz komuś wysłać. To motywuje bardziej niż jakikolwiek quiz.
Plan na ten moduł
Zbudujesz prostą, ale prawdziwą aplikację: osobisty tracker nawyków. Dlaczego akurat to?
- •Jest wystarczająco proste, żeby zbudować w jednej sesji
- •Ma interakcję (dodawanie, oznaczanie, usuwanie)
- •Możesz go naprawdę używać
- •Pokazuje kluczowe koncepty: UI, stan, dane
Krok 1: Opisz co budujesz
Zanim dotkniesz narzędzia, napisz opis. To najważniejszy moment — jakość opisu = jakość wyniku.
Zły opis:
Zrób mi tracker nawyków
Dobry opis:
Zbuduj aplikację webową "Habit Tracker" z następującymi funkcjami:
- •Wyświetla listę nawyków z checkboxami na dzisiejszy dzień
- •Pozwala dodać nowy nawyk (przycisk + pole tekstowe)
- •Pozwala usunąć nawyk (ikona kosza)
- •Zapisuje dane w localStorage (żeby przetrwały odświeżenie)
- •Dark theme, minimalistyczny design
- •Responsywny — działa na telefonie i komputerze
- •Jeden plik HTML z wbudowanym CSS i JavaScript
Widzisz różnicę? Dobry opis mówi:
- •Co aplikacja robi (lista nawyków, checkboxy)
- •Jak wygląda (dark theme, minimalistyczny)
- •Jak przechowuje dane (localStorage)
- •Ograniczenia techniczne (jeden plik HTML)
Krok 2: Daj AI kontekst i buduj
Otwórz Claude Code w swoim folderze projektu i wklej dobry opis. Obserwuj:
- •AI przeczyta Twój opis
- •Zaplanuje strukturę
- •Stworzy pliki
- •Może zaproponować uruchomienie
Ważne: Zwykle nie przerywaj w trakcie — pozwól dokończyć, potem oceń wynik. Wyjątek: jeśli widzisz, że Claude idzie w zupełnie złą stronę, naciśnij Esc i skoryguj kierunek jednym zdaniem.
Krok 3: Otwórz i oceń
Otwórz plik HTML w przeglądarce (dwuklik na plik). Sprawdź:
- ✅ Czy wyświetla się lista?
- ✅ Czy mogę dodać nawyk?
- ✅ Czy checkboxy działają?
- ✅ Czy po odświeżeniu dane są zachowane?
- ✅ Czy wygląda przyzwoicie?
Krok 4: Iteruj
Tu zaczyna się prawdziwy vibe coding. Coś nie działa? Coś chcesz zmienić? Mów:
Dodaj podsumowanie na górze — ile nawyków ukończyłem dzisiaj vs ile mam łącznie. Pokaż to jako "3/7" z progress barem.
Albo:
Nawyki powinny mieć kategorie (zdrowie, praca, rozwój). Pozwól filtrować po kategorii.
Albo:
Coś jest nie tak — po dodaniu nawyku strona mruga. Napraw to.
Każdy z tych opisów to iteracja. Budujesz przyrostowo, warstwa po warstwie.
Krok 5: Deploy (pokaż światu)
Masz działającą aplikację? Czas ją opublikować. Dla prostego pliku HTML:
Poproś Claude Code:
Pomóż mi opublikować tę stronę na Cloudflare Pages. Przeprowadź mnie krok po kroku.
Claude poprowadzi Cię przez proces krok po kroku. Na końcu Twoja aplikacja ma prawdziwy URL, który możesz wysłać komukolwiek.
Co właśnie się stało
Bez jednej linii kodu napisanej ręcznie:
- •Opisałeś aplikację — precyzyjnie, konkretnie
- •Razem z AI zbudowaliście ją od zera
- •Iterowałeś — kierowałeś zmianami i poprawkami
- •Opublikowałeś ją w internecie
To jest vibe coding. I to jest dopiero początek.
Typowe problemy na start
"AI zrobił coś innego niż chciałem" → Twój opis był zbyt ogólny. Dodaj szczegóły.
"Aplikacja nie działa" → Powiedz AI co dokładnie nie działa. "Kliknięcie przycisku nic nie robi" > "Nie działa".
"Wygląda brzydko" → Opisz jak MA wyglądać: "Minimalistyczny, dużo białej przestrzeni, zaokrąglone rogi, subtelne cienie."
"AI zmienił coś czego nie chciałem"
→ Powiedz: "Cofnij ostatnią zmianę w header. Chcę żeby wyglądał jak wcześniej, ale z nowym kolorem."
→ Albo cofnij się sam: /rewind (lub dwa razy Esc przy pustym polu) pokazuje Twoje wcześniejsze polecenia i przywraca pliki do stanu sprzed wybranego z nich.