Zaloguj się, aby zapisywać progres i rozwiązywać quizy.
Zaloguj się →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: Nie przerywaj AI w trakcie. Pozwól dokończyć, potem oceń wynik.
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.
AI poprowadzi Cię przez proces. Za 5 minut Twoja aplikacja będzie miała 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."