1. Wprowadzenie i konfiguracja
Witamy
Cześć! Witamy w Coding Jam. W ciągu najbliższych 75 minut stworzysz prawdziwą, działającą aplikację internetową opartą na AI.
Zobacz witrynę tutaj: witryna Coding Jam
Co utworzysz
Aplikacja internetowa oparta na AI, która jest zgodna z briefem projektu na ten tydzień. Działa w przeglądarce. Korzysta z funkcji AI od Gemini od Google. Po zakończeniu sesji będzie w pełni Twoja.
Instalowanie Antigravity
Antigravity to asystent AI, którego będziemy używać do wszystkiego. Jest to aplikacja, którą instalujesz na komputerze.
Krok 1. Pobierz
👉 W przeglądarce otwórz stronę https://antigravity.google/download.
👉 Kliknij przycisk pobierania odpowiedni do Twojego systemu operacyjnego (Mac, Windows lub Linux).
👉 Uruchom pobrany instalator. Ustawienia domyślne są odpowiednie – kliknij je.
Krok 2. Uruchom aplikację i zaloguj się
👉 Uruchom Antigravity z folderu Aplikacje (Mac) lub menu Start (Windows).
👉 Gdy pojawi się odpowiedni komunikat, kliknij „Zaloguj się”.
👉 Użyj konta Google.
Krok 3. Sprawdź ekran powitalny
Powinien pojawić się ekran powitalny Antigravity z 3 dużymi przyciskami:
- Otwórz folder – otwiera istniejący folder jako obszar roboczy.
- Otwórz Menedżera agentów – otwiera panel agenta (to tutaj będziemy wykonywać większość pracy).
- Clone Repository (Sklonuj repozytorium) – pobiera projekt z GitHuba (użyjemy tej opcji w sekcji 3A).
Więcej dokumentów znajdziesz na stronie https://antigravity.google/.
✅ Punkt kontrolny: aplikacja Antigravity jest zainstalowana, jesteś zalogowany(-a) i widzisz ekran powitalny z 3 przyciskami.
2. Instalowanie wymaganych narzędzi (za pomocą Antigravity)
Antigravity wymaga na komputerze 2 narzędzi pomocniczych:
Narzędzie | Co to jest (w prostym języku) |
uv | zarządza Pythonem – językiem, na którym opiera się backend aplikacji; |
git | Pobiera pliki projektu z internetu (Antigravity używa tej funkcji do klonowania). |
Nie musisz samodzielnie wpisywać poleceń instalacji. Zadajesz pytanie Antigravity po angielsku, a ona zajmuje się resztą.
Krok 1. Otwórz tymczasowy obszar roboczy
Aby rozpocząć czat, musisz otworzyć folder w Antigravity. (Brak folderu = brak czatu).
👉 Na ekranie powitalnym kliknij „Otwórz folder”.
👉 Utwórz lub wybierz dowolny pusty folder. Zalecane: nowy folder o nazwie coding-jam-setup w wygodnym miejscu (może to być pulpit).
👉 Kliknij Otwórz (lub Wybierz folder).
Otworzy się widok Menedżera agentów z wybranym nowym (pustym) obszarem roboczym.
Krok 2. Poproś Antigravity o sprawdzenie i zainstalowanie narzędzi
👉 Naciśnij Cmd+L (Mac) lub Ctrl+L (Windows/Linux), aby ustawić zaznaczenie na pole wpisywania na czacie.
👉 Sprawdź, czy w menu modeli u dołu jest widoczny Gemini 3 Flash (domyślny – w tym przypadku jest odpowiedni).
📝 Najprostszy prompt – wklej go na czacie:
Install uv and git on my computer if they're not already there.
Don't install Node.js. Ask permission before each install command.
📝 Bardziej szczegółowa wersja (opcjonalnie):
Check whether uv and git are installed by running their --version commands.
For any tool that's missing, install it using the best method for my OS:
- Mac: prefer `brew install` (install Homebrew first if missing)
- Windows: prefer `winget install`
- Linux: prefer `apt install` or `dnf install`
Ask permission before each install command.
Do NOT install Node.js — we'll install it later only if needed.
When done, give me a summary of what's installed.
👉 Aby wysłać wiadomość, naciśnij Enter.
🤖 Obserwuj pracę agenta i klikaj „Zezwól” w wyskakujących okienkach
Krok 3. Przeczytaj podsumowanie
Gdy agent skończy, zobaczysz coś takiego:
✅ Setup complete:
- uv 0.4.18 ✅ (installed)
- git 2.42.0 ✅ (already had it)
- Node.js: skipped (will install later if needed)
Jeśli coś pójdzie nie tak
✅ Punkt kontrolny: agent potwierdza, że zarówno uv, jak i git są zainstalowane. Całkowity czas: ok. 3–5 minut (lub ok. 7 minut, jeśli Homebrew musi zostać najpierw zainstalowany na komputerze Mac).
Klonowanie projektu
1. Wybierz projekt na ten tydzień
Coding Jam to 8-tygodniowy program, w którym co tydzień realizowany jest inny miniprojekt. Prowadzący poinformuje Cię, który tydzień omawiamy dzisiaj. Znajdź ten wiersz i skopiuj adres URL.
Tydzień | Projekt | URL repozytorium |
1 | Wirtualne przymierzanie fryzur z AI |
|
2 | Generator awatarów AI |
|
3 | Mój kalendarz specjalny |
|
4 | Fridge to Recipe |
|
5 | Słoik nastrojów AI |
|
6 | Portfolio jednostronicowe |
|
7 | Resume Tailor |
|
8 | Czat z postacią wygenerowaną przez AI |
|
2. Wróć do ekranu powitalnego
Aby użyć przycisku „Clone Repository” (Sklonuj repozytorium), musimy wrócić do ekranu uruchamiania.
👉 W Antigravity sklonuj wybrany projekt, np. „clone week 1”, ale musisz wpisać prawidłowe repozytorium.
📝 Prompt referencyjny
Git clone ⚠️ PASTE_YOUR_PROJECT and save to my local folder: ⚠️ PASTE_YOUR_PROJECT
3. Obejrzyj projekt
Sprawdź listę plików. Zobaczysz, że:
Plik / folder | Co to jest? |
BRIEF.md | Pomysł na produkt – co tworzymy, w prostym języku |
reference/ | Folder z działającą przykładową aplikacją. AI odczyta ten folder podczas pisania kodu, dzięki czemu aplikacja będzie zgodna z wzorcami. |
.gitignore | Lista plików, które Git powinien ignorować (technicznie – ignoruj je). |
👉 Kliknij
BRIEF.md, aby go otworzyć. Oto pomysł na projekt.
✅ Punkt kontrolny: projekt został sklonowany, otwarty jako obszar roboczy i przeczytano plik BRIEF.md.
3. Instalowanie umiejętności Workshop
„Umiejętność” to zestaw instrukcji przechowywanych w usłudze GitHub, które możesz przekazać AI.
Krok 1. Poproś Antigravity o zainstalowanie umiejętności
📝 Wklej ten prompt na czacie:
Please install the workshop skills into this workspace's .agent/skills/
folder. Run these two git clones from the project root:
1. git clone https://github.com/cuppibla/skills-garden .agent/skills/skills-garden
2. git clone https://github.com/google-gemini/gemini-skills .agent/skills/gemini-skills
When Antigravity asks permission to run each command, I'll click Allow.
When done, list the skills that are now available in this workspace.
Krok 2. Kliknij Zezwól w 2 wyskakujących okienkach
🤖 Powinno pojawić się coś takiego:
I'll create the .agent/skills/ folder and clone both repos into it.
Running: git clone https://github.com/cuppibla/skills-garden .agent/skills/skills-garden
Zezwalaj na wszystkie działania, jeśli agent wyświetla prompt.
👉 Sprawdź listę plików. Powinien pojawić się nowy folder .agent/. Kliknij, aby rozwinąć folder, i sprawdź, czy zawiera on kilka umiejętności, np. skills-garden i gemini-skills.
Co robi każda umiejętność (informacje, nie musisz nic robić)
Umiejętność | Działanie |
| Tworzy dokument projektu produktu |
| Tworzy dokument projektu UX |
| Pisze dokument projektu technicznego (z sekcją strategii testowania) |
| Pisze testy, uruchamia je i automatycznie naprawia błędy (maksymalnie 3 próby). |
| Oficjalne szkolenie Google – jak prawidłowo korzystać z interfejsu Gemini API |
| prostsza kopia zapasowa, jeśli oficjalna umiejętność jest niedostępna; |
| Przykłady stylu wizualnego |
✅ Sprawdź: na liście plików pojawi się nowy folder .agent/skills/, w którym znajdują się pliki skills-garden/ i gemini-skills/.
4. The Spec Talk
Spec Talk to 2-minutowa rozmowa, w której mówisz AI, co chcesz zbudować. Brak kodu, dokumentacji i utworzonych elementów. Po prostu rozmawiamy.
Jedno wymagane pytanie
Najważniejsza rzecz, którą AI musi wiedzieć:
„Co wchodzi, co wychodzi?”
🎯 MODEL: Gemini 3 Flash (domyślny) – proste pytania i odpowiedzi.
📝 Wklej to:
Here's what's in @BRIEF.md. Before we lock the spec, ask me 3 short
questions to refine it:
1. What's the one input I want the user to provide?
2. What's the magical moment for the user?
3. What are we deliberately NOT building (to keep scope tight)?
DO NOT generate any plans, docs, or code yet. Just ask me the questions
and wait for my answers.
🤖 Porozmawiaj z AI i dopracuj swój plan
Nie generuj jeszcze dokumentów
Po zakończeniu rozmowy Spec Talk pracownik obsługi klienta NIE powinien generować żadnych plików. Jeśli zobaczysz product.md lub inne nowe pliki, możesz powiedzieć agentowi: „Stop – usuń wszystkie utworzone dokumenty. Jesteśmy jeszcze na etapie rozmów o specyfikacjach”.
Wskazówki
✅ Punkt kontrolny: odbyłeś(-aś) krótką rozmowę z Antigravity na temat swojego pomysłu na produkt i usługa rozumie dane wejściowe i wyjściowe. Nie wygenerowano jeszcze żadnych plików.
5. Wygeneruj 3 dokumenty projektowe
Teraz AI pisze 3 plany na papierze, zanim powstanie jakikolwiek kod. Wszystkie 3 czynności wykonujemy w jednym prompcie, używając kolejno 3 umiejętności związanych z dokumentacją projektową.
3 Dokumenty
Plik | Co zawiera | Użyta umiejętność |
product.md | kim jest użytkownik, jaki problem rozwiązujemy i jakie funkcje |
|
ui.md | wygląd ekranów, kolory, czcionki, układ; |
|
engineering.md | Stos technologiczny, struktura plików, sekcja dotycząca strategii testowania |
|
Krok 1. Wygeneruj wszystkie 3 dokumenty naraz
🤖 Przełącz na Gemini 3.1 Pro z niskim poziomem myślenia (zalecane)
📝 Wklej ten prompt – jeden prompt wykonuje wszystkie 3 czynności:
Apply all three design-doc skills in this order:
1. pm-design-doc from .agent/skills/skills-garden/design-doc-skills/pm-design-doc/
→ Generates product.md
2. ux-design-doc from .agent/skills/skills-garden/design-doc-skills/ux-design-doc/
→ Generates ui.md (based on the product.md you just created)
3. eng-design-doc from .agent/skills/skills-garden/design-doc-skills/eng-design-doc/
→ Generates engineering.md (based on product.md, ui.md, and @BRIEF.md)
→ MUST include a "Testing strategy" section with real content
(specific functions to unit-test, one integration test per major flow,
and what's deliberately NOT being tested)
Use the patterns in @reference/ as guidance for the engineering doc
(but vary if the brief justifies it).
Save all three files in the project root. After each one is saved,
briefly confirm what you saved before moving to the next.
When all three are done, give me a final summary listing the section
titles in each file.
Krok 2. Sprawdź, czy pliki zostały zapisane
👉 Sprawdź listę plików. Teraz powinny się wyświetlić (oprócz tego, co było wcześniej):
codingjam-week-1/
├── product.md ← NEW
├── ui.md ← NEW
├── engineering.md ← NEW
├── BRIEF.md
├── reference/
└── .agent/
Krok 3. Sprawdź i powtórz
Ty tu rządzisz. Plan został napisany przez AI. Teraz możesz go przeczytać i poprosić o zmiany.
Najważniejszy nawyk
Jeśli chcesz wprowadzić zmianę, zmień dokument, a nie kod. Dokument jest wiarygodnym źródłem informacji.
🤖 Przeczytaj i sprawdź wszystkie 3 dokumenty
👉 Otwórz każdy z nich (kliknij na liście plików), od góry do dołu:
product.md– Czy to opisuje to, czego szukam?ui.md– Czy ekrany i wygląd są prawidłowe?engineering.md– Czy strategia testowania ma sens? (Nie musisz rozumieć technologii – wystarczy sprawdzić, czy plan istnieje).
🤖 Dokumenty są gotowe. Przejdź do następnych kroków.
6. Wdrażanie i testowanie
Największa sekcja laboratorium. AI bierze 3 dokumenty i tworzy aplikację – kod I testy jednocześnie.Po zakończeniu tej sekcji będziesz mieć działającą bazę kodu, która przechodzi własne testy.
Dlaczego warto pisać kod i testy razem?
Twój dokument engineering.md zawiera już informacje o tym, jakie testy powinny być przeprowadzane (sekcja Strategia testowania). Wdrożenie nie zostanie ukończone, dopóki te testy nie zakończą się powodzeniem. Dlatego robimy to w jednym etapie.
🤖 Przejdź na Gemini 3.1 Pro z zaawansowanym myśleniem (zalecane)
Krok 1. Poproś AI o utworzenie kodu I testów
📝 Wklej to:
You're going to do two things in one shot.
PART 1 — IMPLEMENT THE APP CODE
- Build it according to @engineering.md (stack, file structure)
- Match the UI described in @ui.md
- Use the patterns in @reference/ as guidance for code style
- Backend: use Python with `uv` for dependency management
- If your chosen stack requires Node.js and it isn't installed on my
system, install it via Antigravity (use brew/winget/apt) — ask
permission first
- DO NOT start any dev servers — that's a later section
PART 2 — APPLY THE TEST-GATE SKILL
After the code is written, apply the test-driven-dev skill from
.agent/skills/skills-garden/eng-skills/test-driven-dev.md.
Use the "Testing strategy" section in @engineering.md as the test plan.
IMPORTANT: Mock the Gemini API calls in tests — use a stub that returns
fake response data. The real API key isn't set up yet, and tests should
be deterministic and free anyway (best practice).
The skill should:
1. Write the tests described in the Testing strategy
2. Run them (use pytest for Python, Vitest or Jest for JS)
3. If any fail, fix the CODE (not the tests) and re-run
4. Up to 3 retry attempts max
5. If still failing after 3 tries, STOP and tell me what's broken
When Antigravity asks permission to run commands (uv sync, uv pip
install, pytest, etc.), click Allow.
Report results when both parts are done.
🤖 Kliknij Zezwól w przypadku wyskakujących okienek (wiele)
Krok 2. Przeczytaj raport końcowy
Po zakończeniu sprawdź:
- ✅ Istnieje folder
backend/z kodem. - ✅ Istnieje folder
frontend/z kodem. - ✅ Istnieje folder
tests/z plikami testowymi. - ✅ W podsumowaniu jest napisane „all tests passing” (wszystkie testy zaliczone), a nie „failed after 3 retries” (nieudane po 3 próbach).
- ✅ Agent NIE uruchomił żadnych serwerów.
Co się stanie, jeśli wszystkie 3 próby testu zakończą się niepowodzeniem?
Rzadkie, ale możliwe. Zwykle oznacza to, że strategia testowania w dokumentacji technicznej jest nierealistyczna w stosunku do tego, co zostało zbudowane.
📝 Wklej to:
The auto-fix loop hit the 3-try cap. Pull up @engineering.md and look
at the Testing strategy section. Is the strategy realistic for what
got built? Suggest updates to the doc so the tests align with reality.
Don't change the code yet — update the doc, then re-apply the
test-driven-dev skill.
Co zrobić, jeśli coś wygląda podejrzanie?
👉 Jeśli AI utworzyło coś, co nie pasuje do dokumentacji, wróć do dokumentu – nie proś AI o „naprawienie kodu” w izolacji.
Przykład:
I see you built the chat as a popup, but @ui.md says it should be a
full page. Either update ui.md if a popup is actually better, OR
rebuild the chat as a full page to match the current ui.md.
Zawsze: dokument jest wiarygodnym źródłem informacji.
✅ Punkt kontrolny: kod istnieje, testy istnieją, testy przechodzą. Klucz interfejsu API jest gotowy do skonfigurowania.
7. Konfiguracja Google Cloud i klucza interfejsu API
Krok 1. Uzyskaj klucz interfejsu Gemini API z AI Studio (1 min)
- Otwórz stronę https://aistudio.google.com/app/apikey w nowej karcie przeglądarki.
- Zaloguj się na to samo konto Google.
- Kliknij „Utwórz klucz interfejsu API” (w prawym górnym rogu).
- Otworzy się okno z menu projektów:
- Jeśli masz już utworzony projekt Google, możesz go wybrać i kliknąć „Utwórz klucz interfejsu API w istniejącym projekcie”.
- Jeśli nie ma go na liście: kliknij „Utwórz projekt”.
- Skopiuj wyświetlony klucz interfejsu API. Zaczyna się od
AIza..., ok. 40 znaków.
✏️ Wklej go w bezpiecznym miejscu – w następnym kroku przekażesz go Antigravity.
Krok 2. Poproś Antigravity o skonfigurowanie .env (30 sekund)
Wróć do Antigravity i otwórz czat.
⚠️ STOP. PRZECZYTAJ TO, ZANIM WKLEISZ.
Poniższy prompt zawiera obiekty zastępcze PASTE_YOUR_API_KEY_HERE i PASTE_YOUR_PROJECT_ID_HERE.
MUSISZ zastąpić je prawdziwymi wartościami z kroku 1. W przeciwnym razie plik .env będzie zawierać tekst ⚠️ PASTE_..., a aplikacja nie będzie działać.
Zanim klikniesz Wyślij, zeskanuj prompt i upewnij się, że widzisz:
GEMINI_API_KEY=AIzaSy...(zaczyna się odAIzaSy, ok. 40 znaków)
Jeśli nadal widzisz
⚠️ PASTE_...
w dowolnym miejscu prompta, NIE wysyłaj go jeszcze – najpierw je zastąp.
📝 Prośba o wklejenie (zastąpienie
⚠️ PASTE_...
najpierw znaczniki):
Apply the gemini-api-dev skill from .agent/skills/gemini-skills/skills/gemini-api-dev/.
(If that skill isn't found, fall back to .agent/skills/skills-garden/eng-skills/gemini-api.md)
Create a .env file in the backend folder with these settings:
- GEMINI_API_KEY= ⚠️ PASTE_YOUR_API_KEY_HERE
- Any other env vars the app needs based on @engineering.md
Also verify:
- .env is in .gitignore so the key never gets committed
- The backend code reads GEMINI_API_KEY at startup
- The Gemini SDK is initialized correctly (use google-genai for Python)
When Antigravity asks permission to install Python packages, click Allow.
When done, show me the .env contents with the KEY redacted (just first 6 chars + ...).
🤖 Oczekiwany rezultat: agent tworzy .env, instaluje google-genai (klikasz Zezwól) i potwierdza z ukrytym kluczem:
✅ .env created at backend/.env
GEMINI_API_KEY=AIzaSy... (40 chars, redacted)
.env is already in .gitignore ✓
Backend reads GEMINI_API_KEY via os.getenv() ✓
Gemini client initialized ✓
8. Wyświetlanie podglądu i weryfikacja
Kod został utworzony. Testy są zaliczane. Skonfigurowano klucz interfejsu API. Teraz otwórz aplikację i klikaj różne elementy.
Co ludzie zauważają (a czego nie wykrywają testy)
Testy Catch | Humans Catch |
Nieprawidłowe wartości zwrotów | Brzydkie kolory |
Nieprawidłowe wywołania funkcji | Mylące treści |
Brakujące importy | Przyciski w dziwnych miejscach |
Błędy o 1 | Animacja jest niestabilna |
Błędy logiczne | Klimat jest wyłączony |
Krok 1. Poproś Antigravity o uruchomienie serwera deweloperskiego
🎯 MODEL: domyślny (Flash) jest w porządku.
📝 Wklej to:
Please start the dev server(s) so I can preview the app in my browser.
Tell me the URL when it's ready. When Antigravity asks permission to
run the server command, I'll click Allow.
🔔 Wyskakujące okienko: uv run uvicorn main:app --reload (lub podobne) → kliknij Zezwól
Krok 2. Otwórz adres URL podglądu
🤖 Pracownik obsługi klienta zgłasza:
Backend running at: http://localhost:8000
Frontend served at: http://localhost:8000 (backend serves it)
Adres URL to zwykle http://localhost:8000 lub http://localhost:5173.
👉 Kliknij adres URL na czacie lub skopiuj go i wklej na nowej karcie przeglądarki.
Krok 3. Kliknij
Używaj go tak, jak prawdziwy użytkownik:
- Kliknij każdy przycisk
- Wpisz coś
- Najeżdżanie kursorem na elementy
- Wypróbuj główny proces od początku do końca.
Jeśli wszystko wygląda i działa prawidłowo, przejdź do kroku 9.7 (napisz plik README). Kroki 9.4–9.6 są potrzebne tylko wtedy, gdy wykryjesz problemy.
Krok 4. Napisz plik README
Gdy aplikacja będzie działać, zablokuj ją:
📝 Wklej to:
The app works! Please create a README.md in the project root that explains:
- What this app does (in plain English)
- How to install it on a new machine (uv sync, etc.)
- How to run the dev server(s)
- The 3 design docs (@product.md, @ui.md, @engineering.md) are the
source of truth — anyone can read them to understand the system
Save it as README.md.
🤖 Co dalej: README.md pojawi się na liście plików.
Dlaczego plik README jest ważny
✅ Punkt kontrolny: przetestowano aplikację, rozwiązano ewentualne problemy i zapisano plik README.
9. 🎉 You Shipped an MVP!
Udało się.
Co utworzysz
- ✅ Aplikacja internetowa oparta na AI
- ✅ 3 dokumenty projektowe (
product.md,ui.md,engineering.md) - ✅ prawdziwy zestaw testów, który jest uruchamiany za każdym razem, gdy zmieniasz kod;
- ✅
README.md, aby w każdej chwili móc wrócić do tego miejsca. - ✅ połączenie z funkcjami AI od Gemini od Google;
Przekształcasz pomysł w działającą aplikację bez pisania ani jednej linijki kodu. To szalone.
Czego się dowiedziałeś(-aś)
Umiejętność | Dlaczego to jest ważne |
Specyfikacja → Kod+Test → Weryfikacja | Najpierw zaplanuj. Twórz kod i testy razem. Kliknij na końcu. Zawsze w tej kolejności. |
Popraw dokument, a nie kod | Jeśli coś nie pasuje, zmień plan i odtwórz go. Nie łataj. |
Testy jako brama bezpieczeństwa | Wbudowana w implementację – AI wychwytuje głupie błędy, zanim Ty to zrobisz. |
Reguła regresji | Każdy błąd znaleziony przez człowieka staje się testem. Błąd nie może się już powtórzyć. |
Tabele przestawne oparte na dokumentach | Gdy kierunek się zmieni, zmień dokument – AI zajmie się resztą. |
Antigravity 3-layer flow | Angielski na czacie → agent wybiera polecenie → Ty zatwierdzasz. |
Wracasz w przyszłym tygodniu?
- Wybierz inny wiersz w tabeli 8-tygodniowej
- Sklonuj repozytorium z danego tygodnia, klikając przycisk „Clone Repository” w Antigravity.
- Umiejętności są instalowane od nowa w każdym obszarze roboczym (zakres obszaru roboczego – brak pozostałego stanu).
- Możesz ponownie użyć tego samego projektu Google Cloud.
- Cała reszta to ten sam proces, który właśnie poznałeś.
Co dalej
- Opublikuj projekt: opublikuj projekt na stronie Coding Jam.
- Twórz w domu: 3 dokumenty możesz zabrać ze sobą. Otwórz je w dowolnym narzędziu AI i kontynuuj tworzenie.
- Zaproś znajomego: sparuj się z nową osobą w ramach tego codelabu. Nauczanie to najszybszy sposób na zdobywanie wiedzy