Więcej niż vibe coding w internecie

1. Wprowadzenie

W miarę jak agenci kodujący stają się nieodłącznym elementem codziennego tworzenia oprogramowania, sposób tworzenia i rodzaj tworzonych aplikacji ulegają zasadniczej zmianie, niezależnie od tego, czy jesteś doświadczonym inżynierem, czy nowym deweloperem, który chce wprowadzić na rynek swoją pierwszą aplikację. Gdy zaczynasz korzystać z agentów kodujących, zwykle używasz promptów „zero-shot” – pojedynczej instrukcji, która w krótkim, zrozumiałym języku określa, czego oczekujesz. Szybko pojawiają się problemy:

• Tendencja do zadowalania użytkownika: modele często akceptują błędne ograniczenia lub założenia, starając się jak najszybciej spełnić Twoją prośbę, i nie sprawdzają, czy to, co tworzą, rzeczywiście robi to, czego oczekujesz.
• Brak weryfikacji: agenci, nawet gdy piszą testy, zwykle nie sprawdzają, czy działają one prawidłowo. Próba korzystania z witryn w przeglądarce na żywo ujawnia ukryte błędy, nieprawidłowy układ i niedostępne elementy sterujące.
• Dług techniczny: ze względu na sposób trenowania i działania modeli pisany przez nie kod jest oparty na starych i nieaktualnych wzorcach, co zwiększa dług techniczny, którego zarządzanie wymaga większej liczby tokenów oraz więcej czasu i wysiłku ze strony ludzi i maszyn. Dług techniczny może nawet negatywnie wpłynąć na wygodę użytkowników.

4-etapowy plan działania

Aby pomóc agentom kodującym w tworzeniu lepszego kodu, który jest bardziej zgodny z Twoimi wymaganiami, możesz zastosować 4-etapowy cykl życia produktu:

1. Planowanie i projektowanie: wspólnie z agentem pisz dokumenty wymagań dotyczących produktu (PRD) i twórz ich prototypy oraz projekty w przeglądarce przed rozpoczęciem wdrażania produkcyjnego. Następnie na podstawie dokumentów PRD i projektów przygotuj dokumentację projektową architektury (specyfikacje) przed rozpoczęciem kodowania.
2. Kodowanie i tworzenie: instruuj agentów, aby tworzyli aplikacje zgodnie z dokumentacją wymagań produktu, projektami i specyfikacjami, a nie na podstawie prompta zero-shot, i aby uruchamiali innego agenta w celu sprawdzenia swojej pracy.
3. Powtórz: powtórz kroki 1 i 2 w przypadku każdej nowej funkcji, którą chcesz dodać.
4. Wdróż: przenieś do wersji produkcyjnej.

Z tego dokumentu dowiesz się, jak korzystać z agentów AI jako aktywnych partnerów do współpracy, stosując praktyki, które pomogą Ci zmniejszyć dług techniczny i poprawić jakość kodu wyjściowego. Używasz Antigravity w połączeniu z Przewodnikiem po współczesnych technologiach internetowych i Narzędziami deweloperskimi dla agentów, aby stworzyć prostą grę słowną i wzbogacić ją o funkcje AI. Następnie wdrażasz ją w Google Cloud za pomocą Firebase, aby udostępnić ją znajomym i rodzinie.

Czego się nauczysz

• Jak traktować zadania związane z kodowaniem AI jako minicykle rozwoju produktu.
• Dlaczego należy oddzielić wymagania dotyczące produktu od specyfikacji architektury.
• Jak koordynować przepływy pracy z wieloma agentami, aby tworzyć prototypy bezpośrednio w przeglądarce i sprawdzać kod.
• Jak korzystać z umiejętności i narzędzi innych firm, aby poprawić zarówno wrażenia deweloperów, jak i użytkowników.
• Jak wdrażać aplikacje internetowe bezpośrednio w środowisku produkcyjnym za pomocą Firebase MCP.

Wymagania wstępne

• osobiste konto Google oraz projekt Google Cloud lub projekt w Firebase (instrukcje w sekcji konfigurowanie projektu);
• Podstawowa znajomość języków HTML, CSS i JavaScript.
• przeglądarka, np. Chrome;
• Zainstalowane środowisko Node.js (zalecana wersja LTS).

2. Konfigurowanie projektu

Konto Google

Jeśli nie masz jeszcze osobistego konta Google, możesz utworzyć konto Google.

Zaloguj się w konsoli Google Cloud

Zaloguj się w konsoli Google Cloud, korzystając z osobistego konta Google.

Włącz płatności

Wskazówka: jeśli skonfigurujesz płatności za pomocą środków w Google Cloud, możesz przejść do sekcji „Tworzenie projektu w Firebase”.

Aby skonfigurować osobiste konto rozliczeniowe, włącz płatności w Cloud Console.

Tworzenie projektu w Firebase

Wskazówka: jeśli w ramach konfigurowania środków Google Cloud utworzono projekt w chmurze Google Cloud, użyj go do skonfigurowania projektu w Firebase. Jeśli to zrobisz, nie musisz łączyć konta rozliczeniowego, ponieważ jest ono już połączone.

1. Otwórz konsolę Firebase i zaloguj się na swoje osobiste konto Google.
2. Kliknij Dodaj projekt (lub Utwórz projekt).
3. W kreatorze tworzenia projektu:
   • Wpisz nazwę projektu (np. wordup-web-app) lub użyj ponownie projektu Google Cloud skonfigurowanego podczas konfigurowania projektu.
4. Połącz konto rozliczeniowe
   • Na pasku bocznym konsoli Firebase znajdź u dołu plakietkę z informacją o abonamencie (np. „Spark”). Kliknij Zmień.
   • Wybierz abonament Płatność według wykorzystania.
   • Wybierz konto rozliczeniowe skonfigurowane w kroku konfigurowania projektu.
   • Potwierdź wybór, aby dołączyć konto rozliczeniowe do projektu. (Hosting Firebase oferuje obszerny poziom bezpłatny; ukończenie tego samouczka zwykle nie wiąże się z żadnymi kosztami).

Instalowanie narzędzi

• Antigravity 2.0: podstawowy mechanizm kodowania oparty na agentach, z którego korzystasz, w połączeniu z najnowszym modelem Gemini Flash, który zapewnia szybkie kodowanie na najwyższym poziomie.
• Przewodnik po współczesnych technologiach internetowych: umiejętność dla agentów kodujących, która pomaga im pisać nowoczesny kod CSS, HTML i JavaScript. Zainstaluj w Antigravity: Ustawienia > Dostosowywanie > Twórz za pomocą wtyczek Google > Przewodnik po współczesnych technologiach internetowych.
• Narzędzia deweloperskie dla agentów: umożliwiają agentom sterowanie Chrome, sprawdzanie DOM na żywo, testowanie układu i debugowanie w czasie działania. Zainstaluj go w Antigravity, klikając kolejno Ustawienia > Dostosowywanie > Twórz za pomocą wtyczek Google > Narzędzia deweloperskie w Chrome i Ustawienia > Dostosowywanie > Dodaj serwery MCP > Narzędzia deweloperskie w Chrome dla agentów.
• Serwer MCP Firebase: umożliwia bezproblemową konfigurację projektu i wdrażanie za pomocą jednego prompta. Zainstaluj za pomocą Antigravity: Ustawienia > Dostosowywanie > Twórz za pomocą wtyczek Google > Ustawienia Firebase i Antigravity > Dostosowywanie > Dodaj serwery MCP > Firebase.

3. Zacznij od planu

Częstą pokusą w przypadku kodowania z użyciem agentów jest przesłanie prompta bez przykładów („Stwórz grę słowną”) i liczenie na najlepsze. Prawie zawsze skutkuje to pominięciem przypadków brzegowych, rozbudowanymi bazami kodu i niekończącymi się cyklami usuwania błędów.

Zamiast tego traktuj każde zadanie jako minicykl rozwoju produktu. Agenci kodujący mają narzędzia do badań i rozumowania, które pozwalają im pełnić rolę partnera do współpracy, aby pomóc Ci doprecyzować pomysły przed napisaniem kodu. Omówienie pomysłu często pomaga znaleźć odpowiedzi na pytania, zanim staną się problemami. W inżynierii oprogramowania nazywa się to debugowaniem za pomocą gumowej kaczki. Możesz używać agentów do kodowania jako gumowych kaczek, aby planować projekty i funkcje.

Tworzysz prostą grę słowną. Poproś agenta o pomoc w zaprojektowaniu gry, która Cię interesuje.

I want to make a casual word guessing game. Go do deep research on those kinds
of games, then ask me questions to help me write a PRD for the game's features.

To podstawowy kształt promptu – dostosuj go do swoich potrzeb. Najważniejsze jest to, że przeprowadza ona dogłębne badania i zadaje Ci pytania na ich podstawie, aby pomóc Ci zaplanować pracę.

Zacznij od tego prompta, ponieważ praca z agentami kodującymi wymaga wielu weryfikacji. Podzielenie pełnego planu wdrożenia na mniejsze, bardziej szczegółowe części znacznie ułatwia weryfikację, pozwala wcześnie wykrywać przypadki brzegowe, umożliwia wykorzystanie wiedzy spoza danych treningowych agenta i co najważniejsze, pozwala robić więcej przerw między weryfikacjami.

• Oddziela „co” od „jak”: zdefiniowanie wrażeń użytkownika i zakresu produktu w formalnym dokumencie wymagań dotyczących produktu (PRD) oddziela co chcesz osiągnąć od jak to zostanie wdrożone. Dzięki temu możesz skupić się na jednym aspekcie rozwoju produktu naraz, a nie na wszystkich jednocześnie.
• Wczesne wykrywanie przypadków brzegowych: interaktywna sesja pytań i odpowiedzi zmusza do wyjaśnienia wymagań przed rozpoczęciem projektowania lub wdrażania.
• Aktywne wyszukiwanie informacji przez agenta: szkolenie agenta jest przerywane w określonym dniu, a informacje w nim zawarte są bardzo skrótowe. Korzystanie z bieżących badań może dostarczyć nowych informacji, które w inny sposób zostałyby pominięte.

Wskazówka: jeśli zobaczysz, że agent kodujący robi coś, co Ci się podoba, lub coś, co Ci się nie podoba, możesz dodać instrukcje do pliku AGENTS.md w folderze projektu, aby skorygować lub wzmocnić jego działanie. Aby mieć pewność, że Antigravity używa wbudowanego narzędzia do zadawania pytań, dodaj te informacje:

When I ask you to ask me questions, you are **REQUIRED** to use your `ask_question` tool to do so.

Ćwiczenie 1

Teraz Twoja kolej. Skonfiguruj projekt i utwórz dokument PRD.

1. Dodaj do pliku AGENTS.md instrukcję, aby zapisać dane wyjściowe w pliku docs/plans/{{YYYY-MM-DD}}-{{description}}.md.
2. Uruchom powyższy prompt badawczy z dowolnymi zmianami, aby utworzyć dokument PRD.
3. [Cel dodatkowy] Zaktualizuj plik AGENTS.md o rzeczy, które Ci się nie podobają w działaniach agenta, i ponownie uruchom prompt.

Wskazówka: Antigravity 2.0 ma polecenie /grill-me, które możesz uruchomić specjalnie w celu przeprowadzenia tego rodzaju eksploracji.

Wskazówka: Antigravity 2.0 ma narzędzie „Artifact”, które umożliwia komentowanie wiersz po wierszu lub wyróżnianie określonego tekstu i dodawanie komentarzy, tak jak w Dokumentach Google. Komentarze należy dodawać w tekście, a nie w prompcie. Zapisz prompta dla komentarzy w całym dokumencie. Wysłanie prompta, nawet pustego, powoduje wysłanie komentarzy i poinformowanie Antigravity o konieczności ponownego wygenerowania dokumentu z uwzględnieniem komentarzy.

Uwaga: czasami nawet wtedy, gdy poprosisz o napisanie tylko PRD, uwzględnia ono w nim projekt i architekturę oprogramowania. Jeśli tak się stanie, zostaw komentarz lub poproś o usunięcie tych elementów i skupienie się tylko na wrażeniach użytkownika.

4. Projektowanie w przeglądarce

Statyczny projekt interfejsu użytkownika opiera się na makietach, które często wyglądają oszałamiająco, ale mogą nie uwzględniać przypadków skrajnych, ograniczeń i rzeczywistych interakcji użytkowników. Podobnie jak w przypadku kodu, poproszenie agenta o „zaprojektowanie” aplikacji witryny skutkuje projektami, które są zbieżne z ogólnym (często fioletowym) projektem.

W przypadku aplikacji internetowych możesz użyć możliwości agenta do sterowania przeglądarką za pomocą Narzędzi deweloperskich dla agentów, aby projektować wprzeglądarce. Niezależnie od tego, czy jesteś projektantem, który chce zwiększyć wierność swoich projektów, programistą lub twórcą, który chce ulepszyć interfejs i wrażenia użytkownika w swoim projekcie, czy też pracujesz w zespole, praca w rzeczywistym medium, w którym tworzysz, przynosi lepsze wyniki.

Projektowanie w przeglądarce daje też możliwość koordynowania pracy wielu agentów, którzy wspólnie tworzą jedno wyjście. Te podagenty to agenty o określonych profilach i celach, które można koordynować, aby uzyskać lepsze wyniki niż w przypadku pojedynczego agenta pracującego samodzielnie. W przypadku projektowania możesz poprosić o współpracę agenta ds. projektowania wizualnego, agenta ds. UX i agenta ds. ułatwień dostępu, aby pomogli Ci w projektowaniu, a następnie wyświetlili wyniki bezpośrednio w przeglądarce.

Uwaga: korzystanie z pomocników do wykonywania zadań zużywa więcej tokenów. Chociaż mogą one przynosić wyniki o znacznie wyższej jakości, pamiętaj, że ich używanie może wiązać się z dodatkowymi kosztami.

Uruchom panel agentów projektowych, aby pomogli Ci wybrać projekt na podstawie dokumentu wymagań produktu.

Using the PRD, start a panel of expert agents: one UX design, one web
accessibility, and one for visual design, and have them work together to design
3 different UI mockups and show them to me in-browser.

Wskazówka: w obszarze prompta Antigravity możesz wpisać @ i zacząć wpisywać nazwę pliku, aby wskazać Antigravity konkretny plik, który ma sprawdzić.

Projektowanie w środowisku, w którym tworzysz aplikację (w tym przypadku w internecie), zamiast w środowisku statycznym, pozwala wychwycić przypadki brzegowe i ograniczenia, którymi trudno zarządzać w inny sposób, a także uzyskać natychmiastową wizualną informację zwrotną, która jest zgodna z wersją produkcyjną.

Ćwiczenie 2

Teraz Twoja kolej. Zaprojektuj projekt.

1. Uruchom poprzedni prompt dotyczący projektu, wprowadzając dowolne zmiany, aby rozwinąć projekt. Podaj pomysły na różne kierunki projektowania, które Cię interesują (np. nowoczesny, zabawny, realistyczny itp.).
2. Wybierz projekt, który Ci się podoba, i dopracuj go z pomocą agenta.
3. Poproś agenta o zaktualizowanie dokumentu PRD, aby wskazywał uzgodniony projekt.
4. Cel dodatkowy: przeprowadź testy dostępności i testy projektu responsywnego dla wybranego projektu i dostosuj go na podstawie wyników tych testów.

Uwaga: agenci czasami są zbyt gorliwi i traktują tę wskazówkę jako zgodę na zbudowanie całej aplikacji. Obserwuj jego proces myślowy, a jeśli zauważysz, że robi więcej, niż oczekujesz, zatrzymaj go i poproś o zmianę działania.

5. Tworzenie specyfikacji

Po zatwierdzeniu dokumentu PRD („co zbudować”) i wybraniu projektu wizualnego („jak to będzie wyglądać”) musisz teraz uzgodnić kwestie techniczne dotyczące architektury („jak to zbudować”).

Dokumentacja projektu technicznego lub specyfikacja – w skrócie specyfikacja – zawiera szczegółowe informacje o strukturach plików, zarządzaniu stanem, interfejsach komponentów, potokach zdarzeń i zależnościach. Utworzenie specyfikacji przed napisaniem kodu pozwala wcześnie wykryć niezgodności i niepożądane wzorce kodowania, zanim przekształcą się one w kod, który trudniej jest zrozumieć i zrefaktoryzować.

Write a detailed technical design document on how to implement the game with
the chosen design.

Dlaczego to robisz

• Jasność architektury: zdefiniowanie hierarchii komponentów i przepływu przejść stanu (np. Idle → InGame → EvaluatingGuess → GameOver) zapobiega wyścigom i niezrozumiałemu kodowi spaghetti.
• Zgodność z nowoczesnymi standardami: gdy włączony jest Przewodnik po współczesnych technologiach internetowych, agent odwołuje się do nowoczesnych standardów (np. zapytań CSS @container, wbudowanych elementów
  do wyświetlania okien modalnych lub nakładek pomocy oraz modułowych modułów ES), zamiast pobierać starsze, duże biblioteki.
• Etapowe sprawdzanie: oddzielenie sprawdzania funkcjonalnego dokumentu PRD od sprawdzania dokumentu projektu technicznego pozwala ocenić architekturę niezależnie od wrażeń użytkownika.

Ćwiczenie 3

1. Poproś AGENTS.md o zapisanie danych wyjściowych w bieżącym folderze:

   PRDs should _always_ be written to the current project's root in `docs/plans/{{YYYY-MM-DD}}-{{description}}.md` format
   

2. Uruchom prompta dotyczącego dokumentu projektowego i sprawdź go, upewniając się, że obejmuje takie aspekty jak struktura katalogu, obsługa zdarzeń i przechowywanie danych.
3. Cel dodatkowy: dodaj diagramy Mermaid, aby wyjaśnić przepływ stanu w aplikacji, jeśli jeszcze ich nie zawiera.

6. Na koniec utwórz aplikację.

Gdy masz już PRD, makietę interfejsu i dokument projektowy, możesz zacząć tworzyć. Te 3 elementy to jasne i jednoznaczne wskazówki dla agentów dotyczące tego, co powinni tworzyć.

To kolejna dobra okazja do użycia subagentów. Możesz je uruchomić po utworzeniu kodu, aby sprawdzić, jak bardzo gotowy produkt jest zgodny z wcześniejszymi projektami, oraz uruchomić kolejne testy, aby sprawdzić jakość kodu.

Use the PRD, design doc, and mockup to implement the site, then send out 2
agents, one to check how closely you followed the requirements, and one to
review the code.

Dlaczego to robisz

Opracowywanie na podstawie specyfikacji z udziałem pierwszych weryfikatorów zapewnia agentowi jasne, wstępnie sprawdzone wymagania, na podstawie których może tworzyć aplikację, a także świeże spojrzenie na to, czy trzyma się planu, zanim aplikacja trafi do Ciebie, co poprawia jakość i dokładność.

• Sprawdzone wymagania: agent nie musi zgadywać, czego potrzebujesz. Zanim napisze jakikolwiek kod, sprawdzisz wszystko poza implementacją.
• Nowe spojrzenie: agent sprawdzający, który został utworzony w nowym kontekście, nie ma żadnych uprzedzeń związanych z tworzeniem bazy kodu, dzięki czemu skutecznie wykrywa nieobsłużone przypadki brzegowe, brakujące wymagania dotyczące implementacji i inne pominięte szczegóły kodu lub produktu.

Ćwiczenie 4

1. Uruchom prompta kompilacji, wskazując dokładne pliki, które chcesz sprawdzić.
2. Obserwuj dane wyjściowe podczas działania. Widzisz, jak analizuje Twoje wymagania, próbując je spełnić. Jeśli coś zaczyna iść nie tak, możesz to zatrzymać i skorygować.
3. Uruchom serwer programistyczny, aby zobaczyć gotową witrynę i sprawdzić, czy działa prawidłowo.
4. Dodatkowy cel: powtórz ten proces, aby dodać testy automatyczne.
5. Cel dodatkowy: wybierz konkretną platformę lub stos technologii, w którym chcesz utworzyć witrynę. Dzięki oddzieleniu PRD, makiety i dokumentacji projektu dostosowanie do różnych platform powinno być proste.

7. Wdrażanie w środowisku produkcyjnym

Masz już zaplanowany, zaprojektowany i zakodowany projekt. Co zostało? Wdrażanie w środowisku produkcyjnym.

Deploy this site to my Firebase project [YOUR_PROJECT_ID] using Firebase
Hosting.

Uwaga: jeśli to nie zadziała, upewnij się, że masz zainstalowaną platformę Firebase MCP. Przy pierwszym uruchomieniu może być też konieczne zalogowanie się.

Ćwiczenie 5

1. Uruchom prompt wdrożenia, zastępując identyfikator projektu.
2. Skopiuj adres URL hostingu na żywo podany przez agenta.
3. Otwórz URL wersji opublikowanej, aby sprawdzić, czy został wdrożony i działa.
4. Cel dodatkowy: użyj narzędzi deweloperskich dla agentów, aby przeprowadzić audyt Lighthouse w witrynie produkcyjnej, wprowadzić zmiany w celu poprawy wyniku Lighthouse i opublikować aktualizacje.

8. [Opcjonalnie] Ulepszenia oparte na AI

Twoja gra słowna jest teraz w pełni funkcjonalna i korzysta ze statycznego słownika. Aby zmienić statyczny słownik na dynamiczne słowo, możesz zamiast tego za każdym razem prosić o nie za pomocą małego, lokalnego modelu językowego z interfejsu Prompt API.

Uwaga: jeśli nie masz jeszcze zainstalowanego Przewodnika po współczesnych technologiach internetowych, zrób to, aby uzyskać pomoc.

Ponieważ ta funkcja nie jest dostępna na wszystkich urządzeniach, używasz progresywnego ulepszania, aby sprawdzić, czy interfejs API i model są dostępne. Jeśli tak, używasz ich; jeśli nie, wracasz do statycznej listy.

Ćwiczenie 6

Wykorzystaj w praktyce wszystko, czego się nauczyłeś(-aś).

1. We współpracy z agentem napisz dokument PRD, aby użyć interfejsu Prompt API do wygenerowania prawidłowego ukrytego słowa.
2. Zaprojektuj w przeglądarce pasek postępu pobierania i interfejs integracji AI.
3. Napisz specyfikację implementacji. (Wskazówka: uruchom agenta, aby sprawdzić, czy użyto prawidłowej składni interfejsu API).
4. Opracuj nową funkcję.
5. wdrożyć ją w środowisku produkcyjnym.

9. Podsumowanie

Gratulacje. Udało Ci się utworzyć, ulepszyć, rozwinąć i wdrożyć nowoczesną, dostępną i wykorzystującą AI aplikację internetową, stosując najlepsze praktyki kodowania zorientowanego na agentów.

Czego się dowiedziałeś(-aś)

• Przepływy pracy agenta oparte na produktach: jak traktowanie zadań jako minicykli życia produktu (dokument PRD → projekt → specyfikacja → tworzenie) zmniejsza zadłużenie, koszty weryfikacji i tarcie związane z wymianą informacji.
• Panele specjalistów z wieloma agentami: jak uruchamianie wielu podagentów AI może pomóc w poprawie jakości i dokładności Twojej pracy.
• PRD a dokument projektowy: dlaczego oddzielenie zakresu funkcjonalnego (planu) od architektury technicznej (specyfikacji) jest bardziej skalowalnym i dokładnym procesem niż promptowanie funkcji bez przykładów.
• Bezproblemowe wdrażanie: jak używać serwerów MCP (np. Firebase MCP), aby usprawnić dostęp do systemów innych firm, np. wdrażanie witryny.