Ogarnij AI, level 9: Twoja pierwsza gra albo strona: kodujesz z AI, zanim nauczysz się kodować

👁 168 przeczytań

Wyobraź sobie, że wrzucasz na swój profil link i piszesz: „hej, zrobiłem to sam”. Nie filmik, nie grafika - działająca strona albo gra, w którą można od razu zagrać w przeglądarce. Znajomi klikają, grają, pytają jak to zrobiłeś. A ty miałeś zero lekcji programowania. Dosłownie zero.

Co ogarniesz w tym levelu

• Wygenerujesz działający kod prostej gry albo strony bez znajomości programowania.
• Nauczysz się, jak rozmawiać z AI, żeby kod faktycznie działał i żeby naprawiać błędy bez paniki.
• Uruchomisz swój projekt w przeglądarce i wrzucisz go do sieci za darmo.
• Zrozumiesz tyle kodu, ile trzeba, żeby zmieniać kolory, teksty i zasady gry po swojemu.

Nie musisz umieć kodować - musisz umieć pytać

Programiści uczą się latami. Ty nie musisz. Zamiast uczyć się pisać kod, nauczysz się zlecać pisanie kodu. To nie jest ściema - tak dziś pracuje mnóstwo profesjonalistów. Różnica jest jedna: oni rozumieją kod, który dostają. Ty też zaraz zaczniesz rozumieć wystarczająco dużo.

Do budowania stron i gier w przeglądarce potrzebujesz trzech rzeczy: HTML (szkielet strony), CSS (wygląd) i JavaScript (zachowanie, logika gry). Na szczęście AI ogarnie to za ciebie. Twoją robotą jest powiedzieć mu co chcesz, nakarmić go kontekstem i - co ważne - umieć powiedzieć, kiedy coś nie działa.

Gdzie piszesz kod i gdzie go uruchamiasz

Najprościej zacząć od Replit. To edytor kodu w przeglądarce - wklejasz kod, klikasz Run i strona albo gra od razu działa. Nie instalujesz nic. Możesz od razu dostać link do swojego projektu i go komuś wysłać.

Do generowania kodu możesz używać ChatGPT, Claude albo Gemini. Claude jest szczególnie dobry jeśli chodzi o długi, złożony kod - rzadziej gubi się w szczegółach. Ale każde z nich poradzi sobie z prostą grą czy stroną.

Twój pierwszy projekt - od razu z prompta

Nie zaczynaj od „zrób mi grę”. AI potrzebuje konkretów, żeby dać ci coś, co naprawdę działa. Im dokładniej opiszesz co chcesz, tym mniej poprawek. Oto gotowe prompty - każdy możesz wkleić 1:1:

Prompt na prostą grę przeglądarkową

Jesteś doświadczonym programistą front-end. Tworzę swoją pierwszą grę przeglądarkową i potrzebuję działającego kodu.

Stwórz grę "kliknij, zanim zniknie": na ekranie pojawia się kółko w losowym miejscu, gracz musi kliknąć je zanim zniknie po 2 sekundach. Każde trafienie to punkt, każde przegapienie to życie (3 życia). Gra kończy się po utracie wszystkich żyć.

Wymagania techniczne:
- Jeden plik HTML z CSS i JavaScript w środku (żadnych zewnętrznych bibliotek)
- Prosta, czytelna grafika: ciemne tło, kolorowe kółko, wyraźny licznik punktów i żyć
- Ekran startowy z przyciskiem "Zagraj" i ekran końcowy z wynikiem i przyciskiem "Zagraj jeszcze raz"
- Kod ma być przejrzysty z krótkimi komentarzami po polsku przy ważniejszych fragmentach

Daj mi gotowy, kompletny plik HTML, który mogę od razu wkleić do Replit i uruchomić.

Prompt na prostą stronę - portfolio albo wizytówka

Jesteś programistą front-end specjalizującym się w prostych, nowoczesnych stronach. Buduję swoją pierwszą stronę-wizytówkę i chcę, żeby wyglądała dobrze i działała bez żadnych zewnętrznych bibliotek.

Stwórz jedną stronę HTML z:
- Sekcją "o mnie" z miejscem na imię (placeholder: "Tu wpisz swoje imię"), krótki opis (3-4 zdania) i zdjęcie (użyj placeholder - szare pole)
- Sekcją "moje projekty" z trzema kartami (karta: tytuł, krótki opis, przycisk "Zobacz")
- Stopką z linkami do Instagrama i YouTube (puste, do uzupełnienia)
- Ciemny motyw, akcent w kolorze fioletowym, czysty układ
- Responsywna - dobrze wygląda też na telefonie

Wszystko w jednym pliku HTML. Dodaj krótkie komentarze po polsku, żebym wiedział gdzie zmieniać teksty i kolory.

Prompt do naprawiania błędów - najważniejszy z całej trójki

To jest prompt, który będziesz używał najczęściej. Kod z AI nie zawsze działa za pierwszym razem. Zamiast się poddawać, wklejasz błąd z powrotem do AI:

Jesteś programistą, który pomaga mi zrozumieć i naprawić błąd w kodzie.

Oto mój kod:
[WKLEJ TUTAJ SWÓJ KOD]

Kiedy uruchamiam go w Replit, widzę ten błąd:
[WKLEJ TUTAJ TREŚĆ BŁĘDU LUB OPISZ CO SIĘ DZIEJE]

Zrób dwie rzeczy:
1. Wyjaśnij mi w 2-3 zdaniach po polsku co poszło nie tak (prosto, bez żargonu)
2. Daj mi poprawiony, kompletny kod gotowy do wklejenia

Nie chcę tylko działającego kodu - chcę też zrozumieć błąd, żeby nie robić go znowu.

Jak czytać kod, którego nie napisałeś

Kiedy dostaniesz kod od AI, nie musisz rozumieć każdej linijki. Wystarczy, że rozpoznasz kilka wzorców. W komentarzach AI zaznaczy co jest co - dlatego w promptach proś o komentarze po polsku. Szukaj słów kluczowych: color to kolory, font-size to rozmiar tekstu, a fragmenty w cudzysłowach to zwykle teksty, które możesz zmienić bez ryzyka.

Najważniejsza zasada: zmieniaj po jednej rzeczy na raz. Zmień kolor, sprawdź czy działa. Zmień tekst, sprawdź czy działa. Jeśli coś się posypie, wiesz co zrobiłeś i możesz cofnąć.

Zanim wrzucisz to w sieć

Replit daje ci publiczny link od razu. Zanim go udostępnisz, szybki check: nie wrzucaj do kodu swojego prawdziwego imienia, maila ani numeru telefonu - ten link może trafić dosłownie wszędzie. Jeśli robisz stronę-wizytówkę i chcesz, żeby ludzie mogli się z tobą skontaktować, użyj formularza przez zewnętrzny serwis albo po prostu podaj link do profilu, który już masz publiczny. Kod źródłowy twojego projektu w Replit jest domyślnie widoczny dla innych - miej to z tyłu głowy, jeśli chcesz zachować swój pomysł dla siebie.

Narzędzia i linki z tego levelu

• Replit - pisanie, uruchamianie i udostępnianie kodu w przeglądarce
• ChatGPT - generowanie kodu i wyjaśnienia
• Claude - dłuższe projekty, mniej błędów w złożonym kodzie
• Gemini - alternatywa do generowania i debugowania kodu
• Katalog narzędzi AI - promptowy.com
• Biblioteka promptów - promptowy.com

Misja

Weź prompt na grę „kliknij, zanim zniknie” z tego levelu, wklej go do ChatGPT albo Claude i uruchom gotowy kod w Replit. Zagraj sam, sprawdź czy działa. Potem zmień jedną rzecz: kolor kółka albo czas na reakcję (szukaj „2000” w kodzie - to milisekundy). Jak działa jak chcesz - skopiuj link z Replit i wyślij go jednej osobie z pytaniem „hej, ile punktów zdobyłeś?”.

Następny level

W następnym levelu odblokowujesz coś, co może ci się przydać bardziej niż rok angielskiego w szkole - nauczysz się rozmawiać po angielsku z AI tak, żeby stres przed mówieniem w końcu zniknął. Jeśli zawsze blokowałeś się na angielskim, bo bałeś się oceny albo wstydu - to jest level właśnie dla ciebie. Wróć po następny odcinek.

// czytaj dalejOgarnij AI, level 4: Twoja pierwsza piosenka: od pomysłu w głowie do kawałka, który wysyłasz znajomymPremiumAI w edukacji przechodzi od zabawek do infrastruktury. Nauczyciel dostaje narzędzia, nie zastępstwoPremiumAsystenci kodowania robią się mobilni. Programowanie przestaje być przywiązane do jednego biurkaPremium