Projektowanie i generowanie kodu za pomocą Antigravity i Stitch MCP

1. Wprowadzenie

W tym ćwiczeniu utworzysz witrynę przygotowaną do zastosowań produkcyjnych, łącząc projektowanie oparte na AI ze środowiskiem programistycznym, w którym najważniejszy jest agent. Użyjesz Google Stitch do wygenerowania interfejsu użytkownika o wysokiej jakości, a następnie połączysz go z Antigravity IDE za pomocą Model Context Protocol (MCP). Na koniec użyjesz autonomicznego agenta, aby pobrać „DNA projektu” i wdrożyć aplikację React, która będzie idealnie dopasowana do pikseli.

Co zrobisz

• Wygenerujesz interfejs użytkownika w Stitch: użyj języka naturalnego, aby utworzyć pełnowymiarowy projekt strony internetowej w Google Stitch.
• Połączysz się z MCP: połącz Antigravity z projektem Stitch za pomocą protokołu Model Context Protocol.
• Wdrożysz autonomicznie: użyj karty „Agent” w Antigravity, aby pobrać tokeny projektu i utworzyć projekt React/Tailwind.
• Weryfikacja i dopracowanie: użyj zintegrowanej przeglądarki, aby sprawdzić kod pod kątem zgodności z oryginalnym projektem.

Czego się nauczysz

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

Czego potrzebujesz

• Przeglądarka Chrome
• Zainstalowane Antigravity IDE
• Konto Google Stitch
• Klucz interfejsu API Stitch
• Lokalnie zainstalowany Node.js (wersja 18 lub nowsza)

Zanim zaczniesz

1. W konsoli Google Cloud na stronie wyboru projektu wybierz lub utwórz projekt Google Cloud .
2. Sprawdź, czy w projekcie w chmurze 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 sprawdź, czy możesz się zalogować.
4. Upewnij się, że masz zainstalowane Antigravity IDE (dostępne na stronie antigravity.google).

2. Tworzenie projektu w Google Stitch

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

1. Otwórz platformę: wejdź na stronę stitch.withgoogle.com.
2. Wybierz typ projektu: na głównym panelu znajdź przełącznik Rozpocznij nowy projekt. Kliknij Witryna, aby mieć pewność, że projekt jest zoptymalizowany pod kątem układów opartych na przeglądarce.
3. Wybierz model: kliknij menu modeli (obecnie wyświetla się 3.0 Flash) w polu promptu. 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 w odcieniach granatowego i neonowego fioletu. Dodaj sekcję hero z przyciskiem „Rozpocznij”, siatkę funkcji z 3 kolumnami i tabelę cen w stylu glassmorphism.” 5. Wygeneruj: kliknij ikonę strzałki (obok selektora modelu), aby rozpocząć proces generowania. 6. Dopracuj i nazwij: gdy interfejs użytkownika zostanie wygenerowany, nadaj projektowi nazwę w nagłówku u góry. Nazwij go LaunchPad. Przed przejściem do IDE możesz użyć paska bocznego czatu, aby dopracować dowolne elementy.

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

"Wypróbuj te prompty"

, jeśli chcesz szybko zacząć.

3. Konfigurowanie Antigravity MCP

Aby agent Antigravity mógł „odczytać” Twój projekt, 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. Z menu wybierz Ustawienia Stitch.
3. Otwórz sekcję Klucz interfejsu API.
4. Kliknij przycisk Utwórz klucz.
5. Skopiuj klucz: natychmiast skopiuj wygenerowany klucz i przechowuj go w bezpiecznym miejscu. Będzie Ci potrzebny w następnym kroku.

Konfigurowanie Stitch MCP 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 klikając przyciski 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 naciśnij przycisk plusa obok nazwy obszaru roboczego na pasku bocznym.

4. Kliknij Otwórz nowy obszar roboczy, nazwij obszar roboczy LaunchPad-Project i wybierz katalog lokalny. Dzięki temu agent będzie miał określony folder główny, w którym będzie mógł tworzyć pliki bez zaśmiecania innych projektów.

Konfigurowanie Stitch MCP

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

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

Antigravity obsługuje Model Context Protocol (MCP), 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ę prośba, wklej klucz interfejsu API Stitch w polu konfiguracji.
4. Sprawdź: na czacie agenta wpisz: List my Stitch projects. Jeśli pojawi się odpowiedź LaunchPad, wszystko jest gotowe.

5. Sprawdź: na czacie agenta wpisz: List my Stitch projects. Jeśli agent zwróci LaunchPad, połączenie zostało skonfigurowane.

4. Pobieranie kontekstu projektu

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

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

5. Wdrożenie (kompilacja)

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

1. Wpisz prompt „Kompilacja”:

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

6. Sprawdzanie i dopracowywanie

Sprawdź dane wyjściowe i użyj agenta, aby naprawić wszelkie rozbieżności wizualne.

1. Porównaj dane wyjściowe zintegrowanej przeglądarki z oryginalnym projektem Stitch.
2. Jeśli jakikolwiek element (np. dopełnienie przycisku lub grubość czcionki) nie pasuje, wpisz prompt: „Dopełnienie przycisku „Rozpocznij” jest nieco inne. 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 jakości z funkcjonalną bazą kodu za pomocą Antigravity i Stitch MCP.

Podsumowanie wykonanych czynności:

• Zaprojektowano interfejs użytkownika w Stitch za pomocą Gemini 3.
• Wygenerowano bezpieczny klucz interfejsu API i skonfigurowano Antigravity MCP.
• Użyto autonomicznego agenta do utworzenia i sprawdzenia witryny React + Tailwind.