Aplikacja bez programowania w 4 poleceniach

Da się. Ekran „zamówienie gotowe” dla kawiarni — panel dla baristy, duży ekran z numerami dla klientów i numerek na telefonie — powstał w czterech poleceniach po polsku, w około 14,5 minuty pracy asystenta AI. Nie napisałem przy tym linijki kodu. Niżej jest każde polecenie do skopiowania, to, co asystent zrobił sam, i to, jak sprawdzić wynik, zanim pójdziesz dalej.

Gotowe demo przeklikasz sam: demo.szybkopisz.pl/kawiarnia. Dane są przykładowe, a wszystko, co klikniesz, zostaje w Twojej przeglądarce.

Co znaczy „bez programowania”

Kod jest — pisze go asystent. Twoja praca to dwie rzeczy: opisać, co ma powstać, i sprawdzić, czy działa. Nie czytasz kodu linijka po linijce. Musisz za to wiedzieć, co jest czym: po każdej rundzie asystent wypisuje, jakie pliki dodał, zmienił albo usunął, i to wystarczy, żeby wiedzieć, gdzie co leży.

To różni tę drogę od kreatorów stron typu „przeciągnij i upuść”. Tam masz gotowe klocki i ich ograniczenia. Tu opisujesz dokładnie to, czego potrzebujesz — na przykład ekran, który kawiarnia postawi przy ladzie — a asystent buduje to od zera. Ogólny obraz tej metody, z jej plusami i ścianą, na którą zwykle wpada się w drugim tygodniu, jest w tekście vibe coding — od czego zacząć.

Czego potrzebujesz przed startem

• Asystenta, który pracuje w folderze projektu, a nie w czacie. W filmie to Claude Code: sam tworzy pliki, uruchamia stronę i ogląda ją w przeglądarce. Z czatu musiałbyś każdy kawałek kodu kopiować ręcznie. Jak go postawić, opisuje instalacja Claude Code krok po kroku, ile kosztuje — cena Claude Code, a darmowe drogi są na mapie narzędzi AI.
• Pusty folder na projekt. W filmie leżał w nim pusty szablon strony Next.js. Jeśli zaczynasz od zupełnie pustego folderu, pierwsze polecenie może brzmieć: „Załóż w tym folderze pusty projekt Next.js”.
• Pomysł na jedną małą rzecz. Coś, co ktoś w firmie robi ręcznie każdego dnia — tu: wołanie klientów przez całą salę.

Pierwsze polecenie: cały plan, ale tylko runda 1

Asystent dostaje plan wszystkich czterech rund, żeby od początku wiedział, dokąd zmierza projekt — ale robi tylko pierwszą. Jedna rzecz na raz: po każdej rundzie możesz sprawdzić wynik i wiesz, która zmiana co zrobiła. Pierwsze polecenie niesie też zasady na cały projekt: język, brak serwera i bazy danych, wygląd, a na koniec każdej rundy sprawdzenie, zapis w Gicie i listę plików.

Budujemy narzędzie „Ekran „zamówienie gotowe” z numerkami” dla firmy
przykładowej „Kawiarnia Ziarno” w tym projekcie Next.js. Plan w 4
rundach: 1) Następny numer; 2) Numer wyskakuje z animacją; 3) Dwa ekrany
zsynchronizowane; 4) Klient bierze numer telefonem. Teraz zrób TYLKO
rundę 1: Panel obsługi kawiarni na / : duży przycisk „Następny numer” i
aktualny numer; pod adresem /ekran duży ekran dla klientów z numerem
wywołanym (na cały ekran, czytelny z 5 metrów). Na panelu link „Otwórz
ekran”. Zasady na cały projekt: wszystko po polsku (teksty, przykładowe
dane: polskie imiona, firmy, kwoty w złotych); bez serwera, bazy danych,
kont i kluczy — stan trzymaj w przeglądarce (localStorage); wygląd
nowoczesny, dopracowany, czytelny także na telefonie; narzędzie stoi na
stronie głównej /. Na koniec rundy sprawdź typy (npx tsc --noEmit) i
lint, zapisz zmiany w Gicie z krótkim opisem po polsku i wypisz listę
plików, które dodałeś albo zmieniłeś.

Asystent pracował 2 min 40 s. Po obejrzeniu zrzutów ekranu zamienił przekreślone zera w numerze na zwykłe, bo z daleka są czytelniejsze. O tę poprawkę nie prosiłem.

Co powstało: Cztery nowe pliki: zapis numeru, panel obsługi i dwa pliki ekranu dla klientów.

Sprawdź: Kliknij „Następny numer” dwa razy: na panelu i na ekranie ma być 001, potem 002. Ekran na razie milczy — klient odwrócony plecami nie zauważy zmiany. To zadanie rundy drugiej.

Runda 2: numer wyskakuje z animacją

Runda 2: Nowy numer na ekranie /ekran wyskakuje z efektowną animacją i
krótkim sygnałem dźwiękowym (Web Audio, bez plików), ostatnie 5 numerów
zjeżdża w bok jako „gotowe do odbioru”. Zasady jak wcześniej (po polsku,
bez serwera, sprawdź typy i lint, zapisz w Gicie, wypisz pliki).

Asystent pracował 2 min 30 s. Uprzedził, że przeglądarka nie zagra dźwięku, dopóki ktoś raz nie kliknie strony, i sam dodał przycisk „włącz dźwięk”. Sygnał wygenerował w samej przeglądarce, bez plików dźwiękowych.

Co powstało: Jeden nowy plik (sygnał dźwiękowy), zmienione: ekran i animacje. Dokładnie to, o co prosiłem.

Sprawdź: Otwórz ekran w drugiej karcie, wróć do panelu i kliknij „Następny numer”. Nowy numer ma wjechać z animacją, a poprzednie przesunąć się na listę „gotowe do odbioru”.

Runda 3: dwa ekrany zsynchronizowane

Runda 3: Panel obsługi i /ekran synchronizują się na żywo między kartami
przeglądarki (BroadcastChannel + localStorage). Na panelu lista zamówień
w przygotowaniu i przycisk „Gotowe” przy każdym — kliknięcie wywołuje
ten numer na ekranie. Zasady jak wcześniej (po polsku, bez serwera,
sprawdź typy i lint, zapisz w Gicie, wypisz pliki).

Asystent pracował 3 min 40 s. Przetestował dwa panele i ekran naraz. Nowa kolejka zamówień zastąpiła stary zapis numeru, więc stary plik usunął — posprzątał po sobie.

Co powstało: Nowy plik z kolejką zamówień, usunięty stary zapis numeru, zmienione: panel i ekran.

Sprawdź: Kliknij „Gotowe” przy dowolnym zamówieniu, nie po kolei, i przełącz się na ekran. Numer ma już tam być, a poprzednie mają czekać na liście.

Runda 4: klient bierze numer telefonem

Runda 4: Strona /numer dla klienta (wejście z kodu QR pokazanego na
/ekran): przycisk „Weź numer”, potem duży numer i „Przed Tobą: N osób”,
aktualizowane na żywo; gdy numer zostanie wywołany — pełnoekranowe
„Twoje zamówienie jest gotowe!”. Zasady jak wcześniej (po polsku, bez
serwera, sprawdź typy i lint, zapisz w Gicie, wypisz pliki).

Asystent pracował 5 min 40 s. Zauważył, że przy pełnej liście kod QR wypycha ekran poza okno. Dopasował listę do wysokości i sprawdził na czterech rozmiarach ekranu. Kod QR generuje w przeglądarce, bez zewnętrznej usługi.

Co powstało: Nowe pliki: strona klienta, numer zapisany w telefonie i kod QR. Zmienione: ekran, panel i kolejka.

Sprawdź: Otwórz stronę w widoku telefonu i kliknij „Weź numer”. Masz zobaczyć swój numer i ile osób jest przed Tobą. Gdy w panelu tej samej przeglądarki klikniesz „Gotowe” przy Twoim numerze, strona pokaże „Twoje zamówienie jest gotowe!”.

Uczciwie: czego to demo jeszcze nie umie

To demo działa na moim komputerze — tam je uruchamiam i testuję. Panel i ekran na jednym komputerze w kawiarni zadziałają od razu. Żeby klient wziął numer swoim telefonem, aplikacja musi trafić do internetu, na serwer. To osobny krok, dlatego telefon w filmie ma własną kolejkę.

Z zasad projektu wynika też, czego tu celowo nie ma: serwera, bazy danych, kont i haseł. Wszystko trzyma przeglądarka. Na prototyp to zaleta — nic nie wycieknie i nic nie kosztuje. Do prawdziwej aplikacji dla wielu osób te elementy trzeba dołożyć i wtedy rośnie liczba rzeczy, które trzeba umieć sprawdzić. Prototyp to jeszcze nie produkt.

Jak przenieść to na swój pomysł

1. Wybierz jedną rzecz robioną ręcznie

   Coś, co ktoś w Twojej pracy robi każdego dnia: wołanie klientów, przepisywanie zamówień, liczenie wyceny. Mała rzecz, którą sprawdzisz w jeden wieczór.

2. Rozpisz ją na 3–4 rundy

   Każda runda kończy się czymś, co da się kliknąć i sprawdzić. Najpierw to, co najprostsze, na końcu to, co robi wrażenie.

3. Pierwsze polecenie: plan, zasady, tylko runda 1

   Skopiuj układ polecenia z tego tekstu i podmień nazwę narzędzia, firmę i rundy. Zasady zostaw — pilnują porządku przez cały projekt.

4. Po każdej rundzie: lista plików i test jak klient

   Przeczytaj, co asystent dodał i zmienił, a potem przeklikaj wynik tak, jak zrobi to użytkownik. Dopiero wtedy kolejna runda.

Ten sposób pracy — rundy, sprawdzanie i przejście z czatu do własnego folderu — rozpisałem w darmowym e-booku „Masz bolid. Przestań pedałować”. Są w nim dwie karty do wydruku: „Plan wyścigu”, w którym rozpiszesz swoje rundy, i „Lusterka”, czyli cztery pytania do asystenta, zanim klikniesz „Akceptuj”.

Co dalej

• Funkcje asystenta, które ułatwiają takie rundy — plik z zasadami projektu, tryb planowania i tryby zgody: funkcje Claude Code.
• Najpierw zobaczyć wygląd, potem budować? Makietę ekranu zrobisz w Claude Design i przekażesz ją asystentowi.
• Czy w ogóle w to wchodzić? Co AI realnie zmieniło w pracy z kodem: czy AI zastąpi programistów.