Projektowanie i generowanie kodu za pomocą Antigravity i Stitch MCP

1. Wprowadzenie

W tym ćwiczeniu zbudujesz witrynę przygotowaną do zastosowań produkcyjnych, łącząc projektowanie oparte na AI ze środowiskiem programistycznym opartym na agentach. Za pomocą Google Stitch wygenerujesz interfejs o wysokiej wierności, a następnie połączysz go ze środowiskiem IDE Antigravity za pomocą protokołu Model Context Protocol (MCP). Na koniec użyjesz autonomicznego agenta, aby pobrać „DNA projektu” i wdrożyć aplikację React o dokładności do piksela.

Co musisz zrobić

• Generowanie interfejsu w Stitch: używaj języka naturalnego, aby tworzyć pełnowymiarowe projekty stron internetowych w Google Stitch.
• Połącz za pomocą protokołu MCP: połącz Antigravity z projektem Stitch za pomocą protokołu Model Context Protocol.
• Autonomiczne wdrażanie: użyj „karty agenta” Antigravity, aby pobrać tokeny projektu i utworzyć szkielet projektu React/Tailwind.
• Weryfikacja i dopracowywanie: użyj zintegrowanej przeglądarki, aby sprawdzić, czy kod jest zgodny z oryginalnym projektem.

Czego się nauczysz

• Jak używać Google Stitch do szybkiego tworzenia prototypów interfejsu o wysokiej jakości.
• Jak skonfigurować serwery MCP w środowisku IDE Antigravity.
• Jak używać autonomicznych agentów do tłumaczenia metadanych projektu wizualnego na kod modułowy.

Czego potrzebujesz

• przeglądarki Chrome,
• zainstalowane środowisko Antigravity IDE,
• konto Google Stitch;
• Klucz interfejsu API Stitch
• Node.js (wersja 18 lub nowsza) zainstalowany lokalnie.

Zanim zaczniesz

1. W konsoli Google Cloud na stronie selektora projektów wybierz lub utwórz projekt Google Cloud.
2. Sprawdź, czy w projekcie Cloud włączone są płatności. Dowiedz się, jak sprawdzić, czy w projekcie są włączone płatności .

W przypadku środków w Google Cloud: aby ułatwić Ci korzystanie z Antigravity w projektach Google Cloud, wykorzystaj bezpłatne środki w Google Cloud, klikając ten link. Aby aktywować środki i utworzyć nowy projekt, postępuj zgodnie z instrukcjami podanymi tutaj.

3. Otwórz stronę stitch.withgoogle.com i upewnij się, że możesz się zalogować.
4. Sprawdź, czy masz zainstalowane środowisko IDE Antigravity (dostępne na stronie antigravity.google).

2. Tworzenie projektu w Google Stitch

Agent potrzebuje wizualnego „źródła informacji”, z którego będzie korzystać. Zanim zaczniemy pisać kod, musimy określić estetykę.

1. Dostęp do platformy: otwórz stronę stitch.withgoogle.com.
2. Wybierz typ projektu: na głównym panelu znajdź przełącznik Rozpocznij nowy projekt. Kliknij Internet, aby mieć pewność, że projekt jest zoptymalizowany pod kątem układów w przeglądarce.
3. Wybierz model: w polu prompta kliknij menu modeli (obecnie wyświetlany jest model 3.0 Flash). Aby uzyskać najbardziej zaawansowane wnioskowanie i generowanie układu, wybierz Gemini 3.
4. Opisz swoją wizję: w obszarze tekstowym oznaczonym „Opisz swój projekt” wpisz prompt:

„Zaprojektuj nowoczesną stronę docelową SaaS dla startupu z branży technologii kosmicznych o nazwie LaunchPad. Użyj palety kolorów granatowego i neonowego fioletu. Umieść sekcję główną z przyciskiem „Rozpocznij”, siatkę funkcji z 3 kolumnami i tabelę cenową z efektem szkła." 5. Generowanie: kliknij ikonę strzałki (obok selektora modelu), aby rozpocząć proces generowania. 6. Dopracuj i nazwij: po wygenerowaniu interfejsu nadaj projektowi nazwę w nagłówku u góry. Nazwij go LaunchPad. Na pasku bocznym czatu możesz dopracować dowolne elementy, zanim przejdziesz do IDE.

[!TIP] Możesz też wybrać opcję z

„Wypróbuj te prompty”

, jeśli chcesz szybko zacząć.

3. Konfigurowanie MCP Antigravity

Aby umożliwić agentowi Antigravity „odczytanie” projektu, musisz wygenerować bezpieczny klucz interfejsu API i dodać serwer Stitch MCP.

Generowanie klucza interfejsu API Stitch

1. W Google Stitch kliknij zdjęcie profilowe w prawym górnym rogu.
2. W menu kliknij Ustawienia łączenia.
3. Przejdź do sekcji Klucz interfejsu API.
4. Kliknij przycisk Utwórz klucz.
5. Skopiuj klucz: od razu skopiuj wygenerowany klucz i zapisz go w bezpiecznym miejscu. Będzie Ci potrzebny w następnym kroku.

Konfigurowanie platformy MCP Stitch w Antigravity

1. Otwórz Antigravity IDE.
2. Otwórz Menedżera agentów.

W dowolnym momencie możesz przełączać się między Menedżerem agentów a edytorem, naciskając CMD+E (Mac) lub CTRL+E (Windows) albo używając przycisków Otwórz edytor i Otwórz Menedżera agentów w prawym górnym rogu paska menu. .

3. Kliknij + Otwórz obszar roboczy.

Aby rozpocząć nową rozmowę w obszarze roboczym, wybierz odpowiedni obszar roboczy na karcie Rozpocznij rozmowę lub kliknij przycisk plusa obok nazwy obszaru roboczego na pasku bocznym.

4. Kliknij Otwórz nowy obszar roboczy, nadaj mu nazwę LaunchPad-Project i wybierz katalog lokalny. Dzięki temu Agent ma określony folder główny, w którym może tworzyć pliki bez zaśmiecania innych projektów.

Konfigurowanie platformy MCP Stitch

1. W nowym obszarze roboczym wróć do Menedżera agentów (CMD+E na komputerze Mac lub CTRL+E w systemie Windows) i wybierz Serwery MCP.

Otwórz sklep MCP, klikając menu „…” u góry panelu agenta edytora.

Antigravity obsługuje protokół Model Context Protocol (MCP), czyli standard, który umożliwia edytorowi bezpieczne łączenie się z lokalnymi narzędziami, bazami danych i usługami zewnętrznymi. Ta integracja zapewnia AI kontekst w czasie rzeczywistym, który wykracza poza pliki otwarte w edytorze.

MCP działa jako pomost między Antigravity a Google Stitch. Zamiast ręcznie eksportować tokeny projektu lub kopiować kody szesnastkowe i metadane układu do edytora, MCP umożliwia Antigravity pobieranie DNA projektu bezpośrednio z projektu Stitch w razie potrzeby.

2. Wyszukaj „Stitch” i kliknij Zainstaluj.
3. Gdy pojawi się odpowiedni komunikat, wklej klucz interfejsu Stitch API w odpowiednim polu konfiguracji.
4. Sprawdź: na czacie z agentem wpisz: List my Stitch projects.. Jeśli pojawi się odpowiedź LaunchPad, możesz przejść dalej.

5. Sprawdź: na czacie z agentem wpisz: List my Stitch projects.. Jeśli agent zwróci LaunchPad, most został skonfigurowany.

4. Pobieranie kontekstu projektu

Aby zapewnić dokładność kodu, agent musi teraz przetworzyć metadane projektu.

1. Na czacie Antigravity wpisz: „Use the Stitch MCP to fetch the ‘LaunchPad' project. Wyodrębnij paletę kolorów i typografię, a następnie wygeneruj plik DESIGN.md w moim katalogu głównym”.
2. Sprawdź: otwórz nowo utworzony plik DESIGN.md, aby zobaczyć wyodrębnione przez agenta kody szesnastkowe i reguły układu.

5. Wdrożenie (kompilacja)

Użyj agenta, aby przetłumaczyć projekt na działającą aplikację React.

1. Wpisz prompt „Buduj”:

„Chcę teraz zbudować całą witrynę. Użyj React i Tailwind CSS. Upewnij się, że komponenty są modułowe. Po zakończeniu uruchom serwer deweloperski i pokaż mi go w zintegrowanej przeglądarce”. 2. Obserwuj agenta: utworzy on szkielet projektu w terminalu, napisze komponenty w edytorze i otworzy podgląd w zintegrowanej przeglądarce.

6. Przejrzyj i doprecyzuj

Sprawdź wynik i użyj agenta, aby usunąć wszelkie rozbieżności wizualne.

1. Porównaj dane wyjściowe zintegrowanej przeglądarki z oryginalnym projektem Stitch.
2. Jeśli jakikolwiek element (np. odstępy przycisku lub grubość czcionki) nie pasuje, poproś agenta: „Odstępy przycisku „Rozpocznij” są nieco nieprawidłowe. Wróć do projektu Stitch i zaktualizuj klasy Tailwind”.
3. Agent ponownie pobierze kontekst projektu i natychmiast zastosuje poprawkę.

7. Podsumowanie i dalsze kroki

Gratulacje! Udało Ci się zniwelować różnicę między projektem o wysokiej wierności a funkcjonalną bazą kodu za pomocą Antigravity i Stitch MCP.

Podsumowanie wykonanych czynności:

• Zaprojektowano interfejs w Stitch przy użyciu Gemini 3.
• wygenerowano bezpieczny klucz interfejsu API i skonfigurowano Antigravity MCP;
• użyto autonomicznego agenta do utworzenia i zweryfikowania witryny React + Tailwind;