Ogarnij AI, level 9: Twoja pierwsza gra albo strona: kodujesz z AI, zanim nauczysz się kodować
Piszesz z AI działającą stronę albo prostą grę w przeglądarce bez ani jednej lekcji programowania - i rozumiesz na tyle dużo, żeby zmieniać ją po swojemu.
👁 185 przeczytań
- Do zbudowania działającej gry przeglądarkowej bez znajomości programowania wystarczy wkleić gotowy prompt do ChatGPT lub Claude, a kod uruchomić w Replit.
- Claude jest szczególnie polecany do dłuższego i bardziej złożonego kodu, bo rzadziej gubi się w szczegółach niż inne modele.
- Kod źródłowy projektu w Replit jest domyślnie widoczny dla innych użytkowników, więc nie należy wpisywać tam prywatnych danych jak mail czy numer telefonu.
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ą.
| Narzędzie | Do czego najlepsze | Gdzie uruchamiasz kod |
|---|---|---|
| ChatGPT | Generowanie kodu, szybkie poprawki, wyjaśnienia | Replit, przeglądarka |
| Claude | Dłuższy kod, mniej błędów przy skomplikowanych projektach | Replit, przeglądarka |
| Gemini | Kod + szybkie pytania kiedy coś nie działa | Replit, przeglądarka |
| Replit | Uruchamianie kodu, hosting, udostępnianie linku | - |
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
Nie przepłacaj za te subskrypcje
Prowadzę sklep z rocznymi dostępami do narzędzi AI - te same konta, o których piszę wyżej, tylko taniej niż w cenniku producenta.
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.
Cały tydzień w AI, w jednym mailu
Wybrane premiery, narzędzia i analizy. Raz w tygodniu, prosto do skrzynki.
Zapisz się za darmo →Najczęstsze pytania
Jak uruchomić grę przeglądarkową zrobioną przez AI bez instalowania programów?
Wystarczy wkleić wygenerowany kod do Replit, który działa całkowicie w przeglądarce. Po kliknięciu Run projekt od razu działa i można go udostępnić przez publiczny link.
Jakiego AI użyć do generowania kodu gry - ChatGPT, Claude czy Gemini?
Każde z nich poradzi sobie z prostą grą lub stroną. Claude jest jednak szczególnie dobry przy dłuższym, złożonym kodzie, bo rzadziej popełnia błędy w szczegółach.
Co zrobić, gdy kod wygenerowany przez AI nie działa i pojawia się błąd?
Należy wkleić treść błędu razem z kodem z powrotem do AI, korzystając z gotowego promptu do naprawiania błędów. AI wyjaśni co poszło nie tak w 2-3 zdaniach i dostarczy poprawiony, kompletny kod.
Ogarnij AI, level 4: Twoja pierwsza piosenka: od pomysłu w głowie do kawałka, który wysyłasz znajomymPremium
Leonid „Leo” Radvinsky i OnlyFans: życie, fortuny, kontrowersje i ciemna strona cyfrowego imperiumPremium
AI w cyberobronie przechodzi na tryb ciągły. Reakcja po incydencie jest już za późnaPremiumPodobne tematy na Promptowym
