Projektowanie i generowanie kodu za pomocą Antigravity i Stitch MCP

1. Wprowadzenie

W tym ćwiczeniu utworzysz gotową do użytku produkcyjnego stronę internetową, łą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 Antigravity IDE za pomocą Model Context Protocol (MCP). Na koniec użyjesz autonomicznego agenta, aby pobrać „DNA projektu” i wdrożyć aplikację React o dokładności co do piksela.

Co musisz zrobić

• Generowanie interfejsu w Stitch: używaj języka naturalnego, aby tworzyć pełne projekty stron internetowych w Google Stitch.
• Połącz za pomocą 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ądarka 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 wyboru projektu 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 .
3. Otwórz stronę stitch.withgoogle.com i upewnij się, że możesz się zalogować.
4. Sprawdź, czy masz zainstalowane Antigravity IDE (dostępne na stronie antigravity.google).

2. Tworzenie projektu w Google Stitch

Agent potrzebuje wizualnego „źródła wiarygodnych 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 promptu kliknij menu modeli (obecnie wyświetla się 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 platformy Antigravity MCP

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 w prawym górnym rogu kliknij zdjęcie profilowe.
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 Plus 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ć szkielety plików bez zaśmiecania innych projektów.

Konfigurowanie platformy Stitch MCP

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 (tworzenie)

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. Sprawdź i sprecyzuj

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ę połączyć projekt o wysokiej wierności z funkcjonalną bazą kodu za pomocą Antigravity i Stitch MCP.

Podsumowanie wykonanych działań:

• 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.