Design-to-Code mit Antigravity und Stitch MCP

1. Einführung

In diesem Codelab erstellen Sie eine produktionsreife Website, indem Sie KI-gestütztes Design mit einer Agent-First-Entwicklungsumgebung kombinieren. Sie verwenden Google Stitch, um eine originalgetreue Benutzeroberfläche zu generieren, und verbinden sie dann über das Model Context Protocol (MCP) mit der Antigravity IDE. Schließlich verwenden Sie einen autonomen Agent, um die „Design-DNA“ abzurufen und eine pixelgenaue React-Anwendung zu implementieren.

Aufgaben

• Benutzeroberfläche in Stitch generieren:Mit natürlicher Sprache ein umfassendes Webdesign in Google Stitch erstellen.
• Mit MCP verbinden:Verbinden Sie Antigravity über das Model Context Protocol mit Ihrem Stitch-Projekt.
• Autonome Implementierung:Verwenden Sie den Tab „Agent“ von Antigravity, um Design-Tokens abzurufen und ein React-/Tailwind-Projekt zu erstellen.
• Prüfen und optimieren:Verwenden Sie den integrierten Browser, um den Code mit dem ursprünglichen Design zu vergleichen.

Lerninhalte

• Wie Sie mit Google Stitch schnell Prototypen von Benutzeroberflächen mit hoher Detailtreue erstellen.
• So konfigurieren Sie MCP-Server in der Antigravity IDE.
• Autonome Agents verwenden, um Metadaten für visuelles Design in modularen Code zu übersetzen

Voraussetzungen

• Chrome-Webbrowser
• Eine Antigravity IDE ist installiert.
• Ein Google Stitch-Konto
• Ein Stitch-API-Schlüssel
• Node.js (Version 18 oder höher) ist lokal installiert.

Hinweis

1. Wählen Sie in der Google Cloud Console auf der Seite zur Projektauswahl ein Google Cloud-Projekt aus oder erstellen Sie eines.
2. Die Abrechnung für das Cloud-Projekt muss aktiviert sein. So prüfen Sie, ob die Abrechnung für ein Projekt aktiviert ist .

Google Cloud-Guthaben: Wenn Sie Antigravity mit Google Cloud-Projekten verwenden möchten, können Sie Ihr kostenloses Google Cloud-Guthaben über diesen Link einlösen. Folgen Sie dieser Anleitung, um das Guthaben zu aktivieren und ein neues Projekt zu erstellen.

3. Rufe stitch.withgoogle.com auf und prüfe, ob du dich anmelden kannst.
4. Prüfen Sie, ob die Antigravity IDE installiert ist (verfügbar unter antigravity.google).

2. Design in Google Stitch erstellen

Der Agent benötigt eine visuelle „Source of Truth“, an die er sich halten kann. Bevor wir Code schreiben, müssen wir die Ästhetik definieren.

1. Auf die Plattform zugreifen:Rufen Sie stitch.withgoogle.com auf.
2. Projekttyp auswählen:Suchen Sie auf dem Haupt-Dashboard nach dem Schalter Neues Design starten. Klicken Sie auf Web, um sicherzustellen, dass Ihr Design für browserbasierte Layouts optimiert ist.
3. Modell auswählen:Klicken Sie im Promptfeld auf das Drop-down-Menü für Modelle (derzeit wird 3.0 Flash angezeigt). Achten Sie darauf, dass Gemini 3 ausgewählt ist, um die fortschrittlichsten Funktionen für logisches Schlussfolgern und Layoutgenerierung zu nutzen.
4. Vision beschreiben:Geben Sie im Textbereich mit der Bezeichnung Design beschreiben Ihren Prompt ein:

„Entwirf eine moderne SaaS-Landingpage für ein Space-Tech-Startup namens LaunchPad. Verwende eine Palette aus Mitternachtsblau und Neonviolett. Füge einen Hero-Bereich mit einem „Jetzt starten“-Button, ein dreispaltiges Raster mit Funktionen und eine Glasmorphismus-Preistabelle ein.“ 5. Generieren:Klicken Sie auf das Pfeilsymbol (neben der Modellauswahl), um den Generierungsprozess zu starten. 6. Verfeinern und benennen:Wenn die Benutzeroberfläche generiert wurde, geben Sie Ihrem Projekt oben im Header einen Namen. Nenne es LaunchPad. Sie können die Chat-Seitenleiste verwenden, um bestimmte Elemente zu optimieren, bevor Sie zur IDE wechseln.

[!TIP] Sie können auch aus den

„Diese Prompts ausprobieren“

Abschnitt, wenn Sie schnell loslegen möchten.

3. Antigravity MCP konfigurieren

Damit der Antigravity-Agent Ihr Design „lesen“ kann, müssen Sie einen sicheren API-Schlüssel generieren und den Stitch MCP-Server hinzufügen.

Stitch-API-Schlüssel generieren

1. Klicken Sie in Google Stitch oben rechts auf Ihr Profilbild.
2. Wähle im Drop-down-Menü Stitch-Einstellungen aus.
3. Rufen Sie den Abschnitt API-Schlüssel auf.
4. Klicken Sie auf die Schaltfläche Schlüssel erstellen.
5. Schlüssel kopieren:Kopieren Sie den generierten Schlüssel sofort und bewahren Sie ihn sicher auf. Sie benötigen sie für den nächsten Schritt.

Stitch MCP in Antigravity konfigurieren

1. Öffnen Sie die Antigravity-IDE.
2. Agent Manager öffnen

Sie können jederzeit zwischen dem Agent Manager und dem Editor wechseln, indem Sie CMD+E (Mac) oder STRG+E (Windows) drücken oder oben rechts in der Menüleiste auf die Schaltflächen „Editor öffnen“ und „Agent Manager öffnen“ klicken. .

3. Klicken Sie auf + Arbeitsbereich öffnen.

Wenn Sie eine neue Unterhaltung in einem Arbeitsbereich starten möchten, wählen Sie entweder den gewünschten Arbeitsbereich auf dem Tab „Unterhaltung starten“ aus oder klicken Sie in der Seitenleiste neben dem Namen des Arbeitsbereichs auf das Pluszeichen.

4. Klicken Sie auf „Neuen Arbeitsbereich öffnen“, geben Sie dem Arbeitsbereich den Namen LaunchPad-Project und wählen Sie ein lokales Verzeichnis aus. So hat der Agent einen bestimmten Stammordner, in dem Dateien erstellt werden können, ohne andere Projekte zu überladen.

Stitch MCP konfigurieren

1. Kehren Sie in Ihrem neuen Arbeitsbereich zum Agent Manager zurück (CMD+E für Mac oder STRG+E für Windows) und wählen Sie MCP Servers aus.

Öffnen Sie den MCP-Store über das Dreipunkt-Menü oben im Agent-Bereich des Editors.

Antigravity unterstützt das Model Context Protocol (MCP), einen Standard, der es dem Editor ermöglicht, sicher eine Verbindung zu Ihren lokalen Tools, Datenbanken und externen Diensten herzustellen. Durch diese Integration erhält die KI Echtzeitkontext, der über die in Ihrem Editor geöffneten Dateien hinausgeht.

MCP fungiert als Brücke zwischen Antigravity und Google Stitch. Anstatt Design-Tokens manuell zu exportieren oder Hexadezimalcodes und Layout-Metadaten in den Editor zu kopieren, kann Antigravity mit MCP die Design-DNA bei Bedarf direkt aus Ihrem Stitch-Projekt abrufen.

2. Suchen Sie nach Stitch und klicken Sie auf Installieren.
3. Fügen Sie den Stitch API-Schlüssel in das Konfigurationsfeld ein, wenn Sie dazu aufgefordert werden.
4. Bestätigen: Geben Sie im Agent-Chat List my Stitch projects. ein. Wenn LaunchPad zurückgegeben wird, sind Sie bereit.

5. Prüfen:Geben Sie im Agent-Chat Folgendes ein: List my Stitch projects.. Wenn der Agent LaunchPad zurückgibt, wurde die Bridge erfolgreich konfiguriert.

4. Designkontext abrufen

Der Agent muss nun die Designmetadaten aufnehmen, um die Richtigkeit des Codes zu gewährleisten.

1. Geben Sie im Antigravity-Chat Folgendes ein: „Use the Stitch MCP to fetch the ‘LaunchPad’ project. Extrahiere die Farbpalette und die Typografie und generiere dann eine DESIGN.md-Datei in meinem Stammverzeichnis.“
2. Überprüfen:Öffnen Sie das neu erstellte DESIGN.md, um die vom Agenten extrahierten Hexadezimalcodes und Layoutregeln zu sehen.

5. Implementierung (The Build)

Verwenden Sie den Agent, um das Design in eine funktionierende React-Anwendung zu übersetzen.

1. Geben Sie den Prompt „Build“ ein:

„Ich möchte diese vollständige Website jetzt erstellen. React und Tailwind CSS verwenden Die Komponenten müssen modular sein. Wenn du fertig bist, starte den Entwicklungsserver und zeige ihn mir im integrierten Browser an.“ 2. Agent beobachten:Das Projekt wird im Terminal eingerichtet, die Komponenten werden im Editor geschrieben und die Vorschau wird im integrierten Browser geöffnet.

6. Überprüfen und optimieren

Prüfen Sie die Ausgabe und verwenden Sie den Agent, um visuelle Unstimmigkeiten zu beheben.

1. Vergleichen Sie die Ausgabe des integrierten Browsers mit Ihrem ursprünglichen Stitch-Design.
2. Wenn ein Element (z. B. die Schaltflächenauffüllung oder die Schriftstärke) nicht übereinstimmt, weise den Kundenservicemitarbeiter darauf hin: „Die Auffüllung der Schaltfläche ‚Jetzt loslegen‘ ist nicht ganz korrekt. Bitte sieh dir das Stitch-Design noch einmal an und aktualisiere die Tailwind-Klassen.“
3. Der Agent ruft den Designkontext noch einmal ab und wendet die Korrektur sofort an.

7. Zusammenfassung und nächste Schritte

Glückwunsch! Sie haben mit Antigravity und dem Stitch-MCP erfolgreich die Lücke zwischen einem High-Fidelity-Design und einem funktionalen Code geschlossen.

Zusammenfassung der durchgeführten Schritte:

• Er hat mit Gemini 3 eine Benutzeroberfläche in Stitch entworfen.
• Sie haben einen sicheren API-Schlüssel generiert und Antigravity MCP konfiguriert.
• Sie haben einen autonomen Agenten verwendet, um eine React + Tailwind-Website zu erstellen und zu überprüfen.