WEITERE LEKTÜRE
Weiterführende Lektüre zu Antigravity
Tutorials, Dokumentation und Walkthroughs für die Designarbeit mit Antigravity, wie im veröffentlichten Leitfaden aufgeführt.
Antigravity 
OpenDesign Mit Antigravity
in OpenDesign
gestalten.
Wie man mit Antigravity in OpenDesign Interfaces gestaltet: Screenshots als Eingabe, der integrierte Browser prüft jeden Durchlauf, eine Signup-Flow-Aufgabe vom Briefing bis zur geprüften Datei, und die Grenzen, die Sie vorher kennen sollten.
DREI WEGE IN DIESEN ANTIGRAVITY-LEITFADEN
Wählen Sie einen Einstiegspunkt für Antigravity
DIESER LEITFADEN · UI-DESIGN
Bauen Sie eine Produktoberfläche mit Antigravity
Diese Anleitung behandelt das Briefing, Referenzen, Designregeln und ein geprüftes HTML-Artefakt.
Diese Anleitung lesen EINRICHTUNGAntigravity von Null einrichten
Der vollständige Weg von einer sauberen Installation bis zu einem Antigravity-Agenten, der UI erstellt und verifiziert.
Zum Setup VERGLEICHAntigravity mit anderen Agents vergleichen
Wie Antigravity sich mit Codex, Claude Code und Cursor für Designarbeit vergleicht und wann ein anderer Workflow die bessere Wahl ist.
Zum VergleichAuf dieser Seite Beispiel
Eine vollständige Antigravity-Design-Aufgabe
Eine Antigravity-Designaufgabe: Vom Briefing zur Oberfläche
Eine Aufgabe, nachverfolgt von der Übergabe bis zur fertigen Prüfung: das Briefing und die Vorgaben, die Sie Antigravity geben, das Artefakt, das es zurückliefert, und die Prüfung, die Sie noch schulden, bevor Sie es als erledigt bezeichnen. Die folgende Oberfläche ist ein illustratives Beispiel, das für diese Seite erstellt wurde, kein aufgezeichneter Antigravity-Lauf.
1Design-Briefing und Vorgaben
BriefingEntwerfen Sie eine Team-Produktanmeldung in drei Schritten: Konto, Workspace, Teammitglieder einladen. Verifizieren Sie vor der Übergabe jeden Schritt im integrierten Browser bei Desktop- und Telefonbreiten.
- Design-SystemOpenDesign Papierleinwand — Albert Sans, ein einzelner grüner Akzent
- Breakpoints1440px Desktop, 390px Mobil, ohne horizontales Scrollen
- InteraktionenSchrittnavigation, Inline-Validierung, ein Pfad zum Überspringen der Einladung und Tastaturfokus-Reihenfolge
- AusgabeEine einzelne, in sich geschlossene HTML-Datei mit stabilen
data-od-id-Hooks
2Wer macht was: Sie, Antigravity und OpenDesign
- Sie
Sie schreiben das Briefing, wählen das Designsystem und legen die Abnahmekriterien fest.
- Antigravity
Antigravity plant das Layout, schreibt HTML, CSS und JavaScript und überarbeitet auf Anfrage.
- OpenDesign
OpenDesign liefert das Designsystem und den Skill, rendert die Vorschau und bewahrt jede Version als Projektdatei auf.
- Prüfung
Vor der Übergabe werden visuelle Hierarchie, Abstände auf dem 8px-Raster, beide Breakpoints und jede Interaktion geprüft.
3Antigravity-Artefakt: Anmeldeablauf bei 1440px und 390px
4Überprüfung vor der Übergabe
Layout
Raster und Abstände
Stepper, Formular und Zusammenfassung richten sich am 8px-Raster aus; die Zusammenfassung überschreitet nie die Höhe des Formulars.
Hierarchie
Visuelle Hierarchie
Die Reihenfolge liest sich: aktueller Schritt, dann Frage, dann Felder; nur der aktuelle Schritt trägt den Akzent.
Responsive
Mobiles Layout
Auf Mobilgeräten komprimiert sich der Stepper zu Punkten mit der aktuellen Beschriftung; die Zusammenfassung klappt zu einer einzigen Gesamtzeile zusammen.
Interaktion
Interaktionsprüfungen
Testen Sie das Zurückgehen einen Schritt, das Auslösen eines Validierungsfehlers und das Überspringen des Einladungsschritts.
Eignung
Wo Antigravity passt — und wo nicht
Antigravity passt, wenn
- Multimodaler Screenshot → UI. Mit dem Bildverständnis von Gemini 3.x wird ein Referenzbild zu responsivem Markup, das der Agent gegen das Original prüft.
- Integrierte Browser-Verifizierung. Antigravity-Agenten steuern einen integrierten Browser, rendern die UI über Breakpoints hinweg und erfassen das Ergebnis als Artefakte.
- Editor-Ansicht + Manager-Oberfläche. Arbeiten Sie in der Editor-Ansicht für praktische Codearbeit oder nutzen Sie die Manager-Oberfläche, um mehrere Agenten asynchron zu orchestrieren.
- Kostenloser Einstieg. Die öffentliche Vorschau kostet Privatpersonen nichts und bietet großzügige Gemini 3.x-Ratenlimits über ein Google-Konto.
Wählen Sie einen anderen Workflow, wenn
- Sie benötigen bearbeitbare Vektordateien. Das Artefakt von Antigravity ist HTML, kein bearbeitbares Designdokument. Suchen Sie für das benötigte Asset-Format nach einem separaten Vektor-Workflow.
- Sie haben keine Referenz und keine Vorgaben. Ohne Designsystem oder Beispiele tendiert die Ausgabe zu einem generischen Look; beginnen Sie mit dem Schreiben des Briefings.
- Ihnen fehlt der Nachweis, den dieser Agent erfordert. Benötigt: Google-Konto (persönliches Gmail), in der öffentlichen Vorschau kostenlos. OpenDesign stellt keine Anmeldedaten bereit und vermittelt sie auch nicht.
- Ihr Team arbeitet in Cursor oder Kiro. Diese Agenten haben eigene Seiten; die Einrichtung unterscheidet sich von Agent zu Agent. Siehe verwandte Agenten.
Kompatibilität
Antigravity-Voraussetzungen, bevor Sie starten
Diese Seite behandelt Antigravity in Verbindung über die OpenDesign-Desktop-App. Referenzen geprüft am 6. September 2026.
Tool-UmfangAntigravity, von Google
Antigravity ist Googles agentenorientierte Entwicklungsplattform: eine KI-gestützte IDE, in der autonome Agenten im Editor, Terminal und einem integrierten Browser arbeiten. Sie erschien in der öffentlichen Vorschau zusammen mit Gemini 3. Der Fokus hier liegt auf dem Entwerfen von Oberflächen mit Antigravity über OpenDesign, nicht auf Antigravitys eigener Oberfläche. Die Einrichtungshinweise von OpenDesign nennen die verfügbaren Agenten.
Konten und AuthentifizierungGoogle-Konto (persönliches Gmail), kostenlos während
der öffentlichen Vorschau. Authentifizieren Sie sich mit Ihrem Google-Konto — Anmeldedaten bleiben auf Ihrem Rechner. Diese Seite verspricht kein Kontingent und keinen Preis.
System und VersionenDesktop-App oder Quellcode
Für Desktop-Builds konsultieren Sie die Download-Seite. Die Node.js- und pnpm-Anforderungen im Quelltext-Schnellstart sind relevant, wenn Sie aus dem Quelltext ausführen, nicht bei der Installation eines Desktop-Pakets. Minimale kompatible Antigravity-Version: hier nicht verifiziert.
VerbindungsprüfungDas Erfolgssignal
Verwenden Sie die Verbindungsanweisungen, die Ihre installierte Version anzeigt, und testen Sie dann eine kleine Aufgabe. Bestätigen Sie, dass Antigravity sie bearbeitet hat und das Artefakt sich öffnet. Der reine Download beweist keine funktionierende Verbindung.
Mit der Desktop-App beginnen
Antigravity-Einrichtung in drei Schritten
Beginnen Sie mit dem Download, schließen Sie die Antigravity-Einrichtung für Ihre installierte Version ab und testen Sie dann ein kleines Ergebnis. Diesen Weg zu befolgen erfordert nicht, OpenDesign aus dem Quelltext zu bauen.
- 1
Die OpenDesign-Desktop-App herunterladen
Wählen Sie das Paket für Ihren Rechner, installieren Sie es und starten Sie die App.
OpenDesign herunterladenMEILENSTEINDie Desktop-App öffnet sich. Wenn sie bereits installiert ist, fahren Sie mit dem nächsten Schritt fort; ein zweiter Download ist nicht nötig. - 2
Bereiten Sie Ihre Antigravity-Verbindung vor
Verwenden Sie die Antigravity-Anweisungen, die mit Ihrer installierten Version ausgeliefert werden. Melden Sie sich mit Ihrem Google-Konto an — Anmeldedaten bleiben auf Ihrem Rechner.
# 1. Download Antigravity for your OS (macOS, Windows, Linux) # from the official download page: antigravity.google/download # 2. Launch it and sign in agy # opens Antigravity; sign in with your Google account # 3. Accept the data-use policy, pick a theme, and open your project folderÜbernommen aus den Antigravity-Einrichtungshinweisen im veröffentlichten Leitfaden; überprüfen Sie den aktuellen Befehl in der Anbieterdokumentation.
MEILENSTEINÜberprüfen Sie den Agenten und das Konto, die Sie verwenden wollten. Wenn eines davon nicht verfügbar ist, prüfen Sie die Kompatibilität, bevor Sie eine größere Aufgabe versuchen. - 3
Führen Sie eine kleine Antigravity-Aufgabe aus
Halten Sie das anfängliche Briefing bescheiden, damit Sie den gesamten Kreislauf beurteilen können, einschließlich einer Überarbeitung.
Start-BriefingErstelle einen Einstellungsbildschirm mit einem Profilformular und einer Speicherbestätigung. Wende meine Designregeln an. Verifiziere ihn bei Desktop- und Mobilbreiten.
MEILENSTEINÖffnen Sie das Ergebnis, testen Sie den Speicherzustand und bitten Sie um eine bestimmte Änderung. Die Generierung beginnt die Prüfung; sie beendet sie nicht.
Wenn Sie OpenDesign aus dem Quelltext ausführen möchten, verwenden Sie stattdessen den technischen Schnellstart.
Der Antigravity-Design-Workflow
Antigravitys fünfstufiger Design-Kreislauf
Eine Anmeldeablauf-Aufgabe, nachverfolgt vom ersten Briefing bis zu einem geprüften HTML-Artefakt. In jeder Phase: Ihr Input, Antigravitys Zug, OpenDesigns Part und die Prüfung, die Sie weiterhin verantworten.
- 1
Design-Briefing
Drei bis sechs einfache Sätze. Identifizieren Sie, wem der Bildschirm dient, was er leisten muss und welche Plattformen wichtig sind.
- SieEntwerfen Sie das Briefing. Wenn ein Referenz-Screenshot existiert, fügen Sie ihn bei.
- AntigravityLiest das Briefing plus die Projektanweisungsdatei und fragt bei allem Mehrdeutigen nach.
- OpenDesignStellt das Projekt, die Prompt-Oberfläche und den passenden Skill für diesen Artefakttyp bereit.
- PrüfenStellen Sie sicher, dass das Briefing Abnahmekriterien klar benennt. Sie vor der Generierung festzulegen kostet weniger als sie nachträglich anzupassen.
- 2
Design-Vorgaben
Ein Designsystem plus eine kurze Liste von Nicht-Verhandelbarem. Das ist die Grenze zwischen markenspezifischer Arbeit und einem Standard-Look.
- SieWählen Sie ein Designsystem, benennen Sie die Breakpoints und listen Sie Komponenten auf, die erscheinen müssen.
- AntigravityLädt vor dem Schreiben einer Zeile DESIGN.md-Tokens und Haltungsregeln in den Kontext.
- OpenDesignStellt die Designsystem-Bibliothek bereit und bindet Ihre Auswahl in die Skill-Vorlage ein.
- PrüfenPrüfen Sie, dass die Tokens zur Marke passen: ein Akzent, korrekte Schriften, korrekter Radius.
- 3
Die Oberfläche generieren
Antigravity erzeugt eine in sich geschlossene HTML-Datei — Layout, Stile, Interaktionen und stabile Hooks inklusive.
- SieWarten Sie, es sei denn, Antigravity stellt eine klärende Frage. Es gibt nichts zu konfigurieren.
- AntigravityPlant die Abschnitte, schreibt HTML, CSS und JavaScript, führt dann die Datei aus und behebt Fehler.
- OpenDesignSchreibt das Artefakt in den Projektordner und indiziert es, sodass es in der Vorschau angezeigt werden kann.
- PrüfenNoch nicht. Bewerte die gerenderte Datei, nicht die Quelle.
- 4
Vorschau
OpenDesign rendert die Datei in den von dir angegebenen Breiten. An diesem Punkt wird das Design tatsächlich beurteilt.
- SieÄndere Breiten, teste die Interaktionen und kommentiere direkt an Elementen.
- AntigravitySammelt deine Vorschaukommentare und bereitet die nächste Revision vor.
- OpenDesignStellt das Vorschau-Rendering bereit und legt
data-od-id-Ziele offen, damit Kommentare und Bearbeitungen daran ansetzen können. - PrüfenPrüfe Hierarchie, Kontrast, Überlauf bei 390px, Fokuszustände und ob die Akzentfarbe sparsam eingesetzt wird.
- 5
Überarbeiten und Verifizieren
Zeige auf Vorschau-Elemente, um Änderungen anzufordern. Jede Revision kommt als neue Datei, sodass nichts spurlos überschrieben wird.
- SieWandle Kommentare in konkrete Anfragen um und entscheide, wann die Aufgabe abgeschlossen ist.
- AntigravityWendet die angeforderten Änderungen direkt an und führt die Datei erneut aus.
- OpenDesignHält Versionen nebeneinander und exportiert ein Bild oder das HTML, sobald du fertig bist.
- PrüfenÜberprüfe zuerst nur den geänderten Bereich, dann die gesamte Seite einmal bei jedem Breakpoint.
Ressourcen
Antigravity-Design-Ressourcen
Skills Skills durchsuchen Design-Systeme Systeme durchsuchen Vorlagen Vorlagen durchsuchen
Design Skills
Artefakttypen, die Antigravity in OpenDesign generieren kann, mit einem Skill für jeden Typ.
Design Systems
Marken-Tokens und Komponenten, die gebunden werden müssen, bevor Antigravity mit der Generierung beginnt.
Vorlagen
Startpunkte für Decks, Landingpages und Produkt-Screens.
Einschränkungen
Antigravity-Grenzen, manuelle Prüfungen und Fallback-Pfade
- GeltungsbereichBehandelt wird hier Antigravity als ein in OpenDesign eingebundener Agent, nicht der gesamte Funktionsumfang von Antigravity.
- NutzungslimitsNutzungslimits und Kosten hängen von den von dir verwendeten Zugangsdaten ab (Google-Konto (privates Gmail), in der öffentlichen Vorschau kostenlos). Auf dieser Seite wird keine Aussage über ein kostenloses Kontingent getroffen.
- NetzwerkLokale Projektdateien bedeuten keine Offline-Inferenz. Bevor du sensible Eingaben einspeist, überprüfe die Anbietereinstellungen und Datenrichtlinien deines Agenten.
- Ausgabe ist HTMLDie Artefakte sind HTML-Dateien, keine Vektor-Designdokumente.
- Manuelle ÜberprüfungDu prüfst Barrierefreiheit, echte Inhalte, Markenpassung und Interaktionskorrektheit in der Vorschau. Jede Selbstprüfung durch den Agenten ist nur ein erster Durchgang.
- FallbackWenn der Agent nicht verfügbar ist oder eine Aufgabe fehlschlägt, ziehe die Verbindungsanweisungen und die Authentifizierung deiner installierten Version zu Rate. Bewahre den Fehler und das letzte funktionierende Artefakt auf, bevor du die Konfiguration änderst.
FAQ
Häufige Fragen zu Antigravity und OpenDesign
Kann Antigravity tatsächlich Designarbeit übernehmen?
Ja — mit einer ästhetischen Skill, einem Design-System und echten Referenzbildern im Kontext erzeugt Antigravity produktionsreife, responsive UI, und die multimodalen Gemini-3.x-Agents prüfen das Ergebnis im integrierten Browser. Ohne diesen Kontext tendiert es zu einem generischen Look — genau diese Lücke schließt OpenDesign.
Muss ich bezahlen, um mit Antigravity zu designen?
Antigravity ist in der Public Preview für Einzelpersonen kostenlos verfügbar, mit großzügigen Ratenlimits für Gemini 3.x, wenn Sie sich mit einem privaten Google-Konto anmelden. OpenDesign leitet Ihre Zugangsdaten in beiden Fällen niemals weiter.
Was genau macht Antigravity gut für Design?
Drei Dinge: Die Agents laufen auf nativ multimodalen Gemini-3.x-Modellen, die Referenz-Screenshots gut interpretieren, es bringt einen integrierten Browser mit, den der Agent zur UI-Prüfung steuern kann, und es stellt Artefakte — Screenshots und Browser-Aufzeichnungen — zur Überprüfung bereit. Der gestalterische Anspruch kommt weiterhin aus dem Design-System, der Skill und den Referenzen, die Sie bereitstellen.
Antigravity vs. Claude Code für Frontend-Design?
Beide sind stark. Claude Code ist bekannt für spezifische, codebase-bewusste Designentscheidungen; Antigravitys Vorteil ist seine agentenzentrierte Plattform — multimodales Gemini 3.x, ein integrierter Browser zur Verifizierung und überprüfbare Artefakte. Viele Teams nutzen beide — mit OpenDesign können Sie den Agent wechseln, ohne Ihren Design-Workflow zu ändern.
Wie überprüfe ich, was Antigravity erstellt?
Antigravity bringt einen integrierten Browser mit, den die Agents steuern können: Sie rendern die UI, prüfen sie über verschiedene Breakpoints hinweg und erfassen Screenshots und Browser-Aufzeichnungen als Artefakte. Indem Sie diese Artefakte prüfen — und den Agent sein Ergebnis mit Ihren Referenzen vergleichen lassen — sorgen Sie dafür, dass das Ergebnis der Vorgabe entspricht.
Was Antigravity genau ist
Antigravity ist Googles Agent-first-Entwicklungsplattform — eine KI-gestützte IDE, die so gebaut ist, dass autonome Agenten, nicht Sidebar-Chatbots, die Arbeit erledigen. Am 18. November 2025 zusammen mit Gemini 3 angekündigt und in einer öffentlichen Vorschau für Einzelpersonen kostenlos verfügbar, lässt sie Sie komplexe, werkzeugübergreifende Softwareaufgaben an einen Agenten delegieren, der über Editor, Terminal und einen integrierten Browser hinweg arbeitet. Ihre Agenten laufen hauptsächlich auf Googles multimodalen Gemini-3.x-Modellen.
Für Designarbeit stechen drei Eigenschaften hervor. Ihre Agenten lesen Screenshots und schließen auf das tatsächliche Layout, weil Gemini 3.x nativ multimodal ist. Sie kann einen echten Browser steuern, rendert also und verifiziert, was sie baut. Und sie zeigt Artifacts — Aufgabenlisten, Pläne, Screenshots und Browser-Aufzeichnungen — an, sodass Sie greifbare Ergebnisse statt roher Tool-Logs prüfen.
Editor View + Manager Surface: Die Editor View ist eine vertraute KI-IDE mit Tab-Vervollständigungen und Inline-Befehlen; die Manager Surface lässt Sie mehrere Agenten starten, orchestrieren und beobachten, die asynchron über Workspaces hinweg arbeiten — der natürliche Ort, um eine lange Designaufgabe auszuführen.
Integrierter Browser + Artifacts: Agenten können in einem eingebauten Browser handeln und Artifacts ausgeben (Screenshots, Browser-Aufzeichnungen, Aufgabenlisten, Pläne), zu denen Sie Feedback hinterlassen können — eine Verifikationsschleife, die in die Plattform eingebaut und nicht nachträglich angeflanscht ist.
Kostenloser Einstieg: Die Anmeldung mit einem persönlichen Google-Konto bietet großzügige Ratenlimits für Gemini 3.x; die Plattform läuft auf macOS, Windows und Linux.
Zugangsdaten: Google-Konto (persönliches Gmail), kostenlos während der öffentlichen Vorschau
Binary: Start mit agy; läuft auf macOS, Windows und Linux
Anbieter: Google
Für Designarbeit stechen drei Eigenschaften hervor. Ihre Agenten lesen Screenshots und schließen auf das tatsächliche Layout, weil Gemini 3.x nativ multimodal ist. Sie kann einen echten Browser steuern, rendert also und verifiziert, was sie baut. Und sie zeigt Artifacts — Aufgabenlisten, Pläne, Screenshots und Browser-Aufzeichnungen — an, sodass Sie greifbare Ergebnisse statt roher Tool-Logs prüfen.
Editor View + Manager Surface: Die Editor View ist eine vertraute KI-IDE mit Tab-Vervollständigungen und Inline-Befehlen; die Manager Surface lässt Sie mehrere Agenten starten, orchestrieren und beobachten, die asynchron über Workspaces hinweg arbeiten — der natürliche Ort, um eine lange Designaufgabe auszuführen.
Integrierter Browser + Artifacts: Agenten können in einem eingebauten Browser handeln und Artifacts ausgeben (Screenshots, Browser-Aufzeichnungen, Aufgabenlisten, Pläne), zu denen Sie Feedback hinterlassen können — eine Verifikationsschleife, die in die Plattform eingebaut und nicht nachträglich angeflanscht ist.
Kostenloser Einstieg: Die Anmeldung mit einem persönlichen Google-Konto bietet großzügige Ratenlimits für Gemini 3.x; die Plattform läuft auf macOS, Windows und Linux.
Zugangsdaten: Google-Konto (persönliches Gmail), kostenlos während der öffentlichen Vorschau
Binary: Start mit agy; läuft auf macOS, Windows und Linux
Anbieter: Google
Warum multimodales Gemini und ein eingebauter Browser zu Design passen
Antigravitys Vorteil im Design ergibt sich aus Modell und Plattform zusammen — aber wie bei jedem Agenten muss der Geschmack weiterhin geliefert werden.
Starkes multimodales Verständnis: Weil Gemini 3.x nativ multimodal ist, liest der Agent Referenz-Screenshots gut — er vergleicht seine gerenderte Ausgabe mit einem Bild, statt aus einer Prosabeschreibung zu raten.
Ein integrierter Browser zum Verifizieren: Der Agent steuert einen echten Browser, rendert also die UI, prüft sie über Zustände hinweg und fängt defekte Layouts ab — und hält das Ergebnis als Browser-Aufzeichnungs-Artifact fest, das Sie prüfen können.
Konventionen, die der Agent liest: Kodieren Sie Ihre Tokens, Komponenten und Review-Regeln im Projektkontext des Agenten, damit er gegen Ihre Marke statt gegen einen Standard-Look arbeitet.
Geschmack kommt aus drei Eingaben, die Sie liefern: einem Designsystem, einem Skill und echten Referenzbildern.
Die Lektion ist dieselbe, die jeder Agent lehrt: Antigravity hat standardmäßig keinen Geschmack. Es produziert gutes Design, wenn Sie ihm Einschränkungen geben — ein Designsystem, einen ästhetischen Skill und konkrete Referenzen. OpenDesign verpackt genau diese Eingaben, weshalb die beiden zusammenpassen (mehr dazu unten).
Starkes multimodales Verständnis: Weil Gemini 3.x nativ multimodal ist, liest der Agent Referenz-Screenshots gut — er vergleicht seine gerenderte Ausgabe mit einem Bild, statt aus einer Prosabeschreibung zu raten.
Ein integrierter Browser zum Verifizieren: Der Agent steuert einen echten Browser, rendert also die UI, prüft sie über Zustände hinweg und fängt defekte Layouts ab — und hält das Ergebnis als Browser-Aufzeichnungs-Artifact fest, das Sie prüfen können.
Konventionen, die der Agent liest: Kodieren Sie Ihre Tokens, Komponenten und Review-Regeln im Projektkontext des Agenten, damit er gegen Ihre Marke statt gegen einen Standard-Look arbeitet.
Geschmack kommt aus drei Eingaben, die Sie liefern: einem Designsystem, einem Skill und echten Referenzbildern.
Die Lektion ist dieselbe, die jeder Agent lehrt: Antigravity hat standardmäßig keinen Geschmack. Es produziert gutes Design, wenn Sie ihm Einschränkungen geben — ein Designsystem, einen ästhetischen Skill und konkrete Referenzen. OpenDesign verpackt genau diese Eingaben, weshalb die beiden zusammenpassen (mehr dazu unten).
Antigravity für Designarbeit von Grund auf einrichten
Hier ist der vollständige Weg von einem sauberen Rechner zu einem Antigravity-Agenten, der UI bauen und verifizieren kann. Die genauen In-App-Menüs können sich während der Vorschau verschieben, daher bleibt dies auf der Ebene, auf die Sie sich verlassen können.
Die Einrichtungsreihenfolge: herunterladen → mit Google anmelden → Projekt öffnen → Designregeln und einen Skill hinzufügen → den integrierten Browser zum Verifizieren nutzen.
Kodieren Sie Ihre Designregeln: Legen Sie Ihre Tokens, Primitives und Konventionen in den Projektkontext des Agenten, damit die Ausgabe einer Marke entspricht, statt auf einen generischen Look zurückzufallen.
Nutzen Sie den integrierten Browser: Lassen Sie den Agenten in Antigravitys eingebautem Browser rendern und seine Ausgabe über Breakpoints hinweg prüfen — und so verifizieren, dass die UI richtig aussieht, nicht nur, dass der Build durchläuft.
Nutzen Sie den aktuellen Einrichtungsabschnitt für Befehle und versionsspezifische Details, die sich ändern können.
Historisches Befehlsbeispiel aus dem vorherigen Leitfaden; prüfen Sie die aktuelle Syntax in der verlinkten Anbieterdokumentation.
Die Einrichtungsreihenfolge: herunterladen → mit Google anmelden → Projekt öffnen → Designregeln und einen Skill hinzufügen → den integrierten Browser zum Verifizieren nutzen.
Kodieren Sie Ihre Designregeln: Legen Sie Ihre Tokens, Primitives und Konventionen in den Projektkontext des Agenten, damit die Ausgabe einer Marke entspricht, statt auf einen generischen Look zurückzufallen.
Nutzen Sie den integrierten Browser: Lassen Sie den Agenten in Antigravitys eingebautem Browser rendern und seine Ausgabe über Breakpoints hinweg prüfen — und so verifizieren, dass die UI richtig aussieht, nicht nur, dass der Build durchläuft.
Nutzen Sie den aktuellen Einrichtungsabschnitt für Befehle und versionsspezifische Details, die sich ändern können.
# 1. Download Antigravity for your OS (macOS, Windows, Linux)
# from the official download page: antigravity.google/download
# 2. Launch it and sign in
agy # opens Antigravity; sign in with your Google account
# 3. Accept the data-use policy, pick a theme, and open your project folder
# 4. Start an agent task in the Editor View or the Manager Surface,
# selecting a Gemini 3.x model (e.g. Gemini 3.1 Pro)Historisches Befehlsbeispiel aus dem vorherigen Leitfaden; prüfen Sie die aktuelle Syntax in der verlinkten Anbieterdokumentation.
Screenshots in UI verwandeln: der Workflow
Die wirkungsvollste Designschleife mit Antigravity besteht darin, ein Referenzbild in funktionierende, responsive UI zu verwandeln und zu iterieren, bis es passt — gestützt auf das multimodale Modell, um die Ausgabe mit der Referenz zu vergleichen, und auf den integrierten Browser, um sie zu verifizieren.
Beginnen Sie mit den klarsten visuellen Referenzen, die Sie haben — und beziehen Sie mehrere Zustände ein (Desktop und Mobile, Hover, Leer, Laden), nicht nur einen Hero-Shot.
Seien Sie im Prompt konkret; vage Prompts erzeugen selbst mit einem starken Modell generische UI.
Halten Sie Ihr Designsystem und Ihre Konventionen im Projektkontext des Agenten und sagen Sie ihm, wo die Tokens und kanonischen Primitives liegen.
Lassen Sie den Agenten in Antigravitys integriertem Browser rendern und auf Breakpoints skalieren, um das Ergebnis zu prüfen.
Iterieren Sie, indem der Agent seine Implementierung mit den Screenshots vergleicht — nicht nur bestätigt, dass sie baut — und prüfen Sie die Browser-Aufzeichnungs- und Screenshot-Artifacts, die er erzeugt.
Hängen Sie Ihre Referenzbilder an und geben Sie konkrete Einschränkungen vor, dann lassen Sie den Agenten im Browser verifizieren:
Halten Sie Prompts klein und fokussiert, committen Sie gute Iterationen und machen Sie schlechte rückgängig (und teilen Sie dem Agenten mit, wenn Sie zurücksetzen), damit jeder Durchlauf auf einer sauberen Basis aufbaut.
Historisches Befehlsbeispiel aus dem vorherigen Leitfaden; prüfen Sie die aktuelle Syntax in der verlinkten Anbieterdokumentation.
Beginnen Sie mit den klarsten visuellen Referenzen, die Sie haben — und beziehen Sie mehrere Zustände ein (Desktop und Mobile, Hover, Leer, Laden), nicht nur einen Hero-Shot.
Seien Sie im Prompt konkret; vage Prompts erzeugen selbst mit einem starken Modell generische UI.
Halten Sie Ihr Designsystem und Ihre Konventionen im Projektkontext des Agenten und sagen Sie ihm, wo die Tokens und kanonischen Primitives liegen.
Lassen Sie den Agenten in Antigravitys integriertem Browser rendern und auf Breakpoints skalieren, um das Ergebnis zu prüfen.
Iterieren Sie, indem der Agent seine Implementierung mit den Screenshots vergleicht — nicht nur bestätigt, dass sie baut — und prüfen Sie die Browser-Aufzeichnungs- und Screenshot-Artifacts, die er erzeugt.
Hängen Sie Ihre Referenzbilder an und geben Sie konkrete Einschränkungen vor, dann lassen Sie den Agenten im Browser verifizieren:
Halten Sie Prompts klein und fokussiert, committen Sie gute Iterationen und machen Sie schlechte rückgängig (und teilen Sie dem Agenten mit, wenn Sie zurücksetzen), damit jeder Durchlauf auf einer sauberen Basis aufbaut.
# In an Antigravity agent task, attach reference-desktop.png and
# reference-mobile.png, then prompt:
Implement this design in React + Vite + Tailwind + TypeScript.
Reuse my existing design-system components and tokens.
Match spacing, layout, and hierarchy; make it responsive.
Render it in the integrated browser and iterate until it matches
the references across breakpoints, and show me the screenshots.Historisches Befehlsbeispiel aus dem vorherigen Leitfaden; prüfen Sie die aktuelle Syntax in der verlinkten Anbieterdokumentation.
Agentenkontext, Werkzeuge und Artifacts
Drei Erweiterungspunkte machen Antigravity für dauerhafte Designarbeit praktisch nutzbar, und alle drei lassen sich sauber auf einen offenen Design-Workflow übertragen.
Projektkontext: Persistente Projektregeln sind der dauerhafte Ort für Ihre Designkonventionen – Tokens, Primitive und Review-Checklisten, die der Agent bei jeder Aufgabe liest, damit die Ausgabe markenkonform bleibt.
Integrierter Browser + Terminal: Agenten agieren über Editor, Terminal und einen eingebauten Browser hinweg, sodass sie Referenzen sammeln, einen Dev-Server starten und gerenderte UI überprüfen können, ohne die Plattform zu verlassen.
Artefakte, die Sie prüfen: Aufgabenlisten, Implementierungspläne, Screenshots und Browser-Aufzeichnungen machen die Arbeit des Agenten nachvollziehbar; Sie hinterlassen Feedback am Artefakt und der Agent übernimmt die Korrekturen.
Das sind die Fähigkeiten, die eine ernsthafte Designschleife braucht – genau die Art von Dingen, die OpenDesign orchestrieren soll, statt sie pro Projekt neu zu erstellen.
Projektkontext: Persistente Projektregeln sind der dauerhafte Ort für Ihre Designkonventionen – Tokens, Primitive und Review-Checklisten, die der Agent bei jeder Aufgabe liest, damit die Ausgabe markenkonform bleibt.
Integrierter Browser + Terminal: Agenten agieren über Editor, Terminal und einen eingebauten Browser hinweg, sodass sie Referenzen sammeln, einen Dev-Server starten und gerenderte UI überprüfen können, ohne die Plattform zu verlassen.
Artefakte, die Sie prüfen: Aufgabenlisten, Implementierungspläne, Screenshots und Browser-Aufzeichnungen machen die Arbeit des Agenten nachvollziehbar; Sie hinterlassen Feedback am Artefakt und der Agent übernimmt die Korrekturen.
Das sind die Fähigkeiten, die eine ernsthafte Designschleife braucht – genau die Art von Dingen, die OpenDesign orchestrieren soll, statt sie pro Projekt neu zu erstellen.
Antigravity, Codex, Claude Code, Cursor und Gemini CLI für Design: Wie man sie vergleicht
Für Designarbeit gibt es keinen eindeutigen Gewinner – jeder Agent hat eine andere Stärke, und erfahrene Teams kombinieren sie. Eine faire Zusammenfassung:
Antigravity – Agent-first-IDE mit multimodalem Gemini 3.x, integriertem Browser zur Selbstüberprüfung und prüfbaren Artefakten; kostenlos in der Preview – Asynchrone Multi-Agent-Builds mit eingebauter Browser-Verifizierung der UI
Codex – Starker visueller Feinschliff mit einem Frontend-Skill; sandboxed asynchrone Builds – Delegierte asynchrone Builds und portable AGENTS.md-Regeln
Claude Code – Konkrete Designentscheidungen (Hex, Abstände, Typografie) und codebasis-bewusste UX – Frontend-Reasoning und Refactorings mit großem Kontext
Cursor – Visuelle Build-and-See-Schleife mit Live-Vorschau und Inline-Bearbeitungen – Enges Iterieren und Beobachten von UI-Arbeit innerhalb einer IDE
Gemini CLI – Open-Source-Terminal-Agent auf multimodalem Gemini mit 1M-Token-Kontext und kostenlosem Tarif – Screenshot-lastige Terminalarbeit und das Halten eines ganzen Designsystems im Kontext
Das wiederkehrende Urteil der Community lautet, dass Geschmack von Menschen kommt: Alle greifen ohne Skills, Referenzen und Einschränkungen auf eine generische Ästhetik zurück. Das ist das eigentliche Problem, das zu lösen ist – und es hat die Form eines Designtools, nicht eines Modells.
Agent – Designstärke – Am besten geeignet für
Antigravity – Agent-first-IDE mit multimodalem Gemini 3.x, integriertem Browser zur Selbstüberprüfung und prüfbaren Artefakten; kostenlos in der Preview – Asynchrone Multi-Agent-Builds mit eingebauter Browser-Verifizierung der UI
Codex – Starker visueller Feinschliff mit einem Frontend-Skill; sandboxed asynchrone Builds – Delegierte asynchrone Builds und portable AGENTS.md-Regeln
Claude Code – Konkrete Designentscheidungen (Hex, Abstände, Typografie) und codebasis-bewusste UX – Frontend-Reasoning und Refactorings mit großem Kontext
Cursor – Visuelle Build-and-See-Schleife mit Live-Vorschau und Inline-Bearbeitungen – Enges Iterieren und Beobachten von UI-Arbeit innerhalb einer IDE
Gemini CLI – Open-Source-Terminal-Agent auf multimodalem Gemini mit 1M-Token-Kontext und kostenlosem Tarif – Screenshot-lastige Terminalarbeit und das Halten eines ganzen Designsystems im Kontext
Das wiederkehrende Urteil der Community lautet, dass Geschmack von Menschen kommt: Alle greifen ohne Skills, Referenzen und Einschränkungen auf eine generische Ästhetik zurück. Das ist das eigentliche Problem, das zu lösen ist – und es hat die Form eines Designtools, nicht eines Modells.
Agent – Designstärke – Am besten geeignet für
Häufige Fallstricke und das Vermeiden des „AI-Slop“-Looks
Die häufigste Beschwerde über KI-generiertes Design ist, dass es generisch aussieht – weiche Verläufe, schwebende Panels, überdimensionierte abgerundete Ecken, dramatische Schatten, ein Inter-und-Lila-Vibe, der „schreit, dass eine KI das gemacht hat“. Weitere berichtete Probleme sind fehlerhafte mobile Layouts und Anweisungen, die in UI-Texte durchsickern. Nichts davon ist spezifisch für Antigravity; es passiert, wenn irgendein Agent ohne kuratierten Designkontext läuft.
Einen ästhetischen Skill hinzufügen: Ein kuratierter Design-Skill zwingt den Agenten, sich auf eine echte Richtung festzulegen, statt auf den Standard-Look.
Im integrierten Browser prüfen: Nutzen Sie das multimodale Modell und den eingebauten Browser von Antigravity, um über Breakpoints hinweg zu rendern und selbst zu prüfen, damit Layouts auf Mobilgeräten nicht stillschweigend brechen.
Tokens und Referenzen bereitstellen: Echte Design-Tokens und Referenz-Screenshots sind der größte einzelne Hebel für die Ausgabequalität.
Regeln im Projektkontext verankern: Legen Sie Regeln im Stil von „keine Hero-Cards, maximal zwei Schriftarten, Marken-zuerst-Hierarchie“ dort ab, wo der Agent sie bei jeder Aufgabe liest.
Beachten Sie, dass es bei jeder Gegenmaßnahme darum geht, dem Agenten einen kuratierten Designkontext zu geben. Diesen Kontext von Hand und pro Projekt zu pflegen ist die Mühsal, die OpenDesign beseitigt.
Einen ästhetischen Skill hinzufügen: Ein kuratierter Design-Skill zwingt den Agenten, sich auf eine echte Richtung festzulegen, statt auf den Standard-Look.
Im integrierten Browser prüfen: Nutzen Sie das multimodale Modell und den eingebauten Browser von Antigravity, um über Breakpoints hinweg zu rendern und selbst zu prüfen, damit Layouts auf Mobilgeräten nicht stillschweigend brechen.
Tokens und Referenzen bereitstellen: Echte Design-Tokens und Referenz-Screenshots sind der größte einzelne Hebel für die Ausgabequalität.
Regeln im Projektkontext verankern: Legen Sie Regeln im Stil von „keine Hero-Cards, maximal zwei Schriftarten, Marken-zuerst-Hierarchie“ dort ab, wo der Agent sie bei jeder Aufgabe liest.
Beachten Sie, dass es bei jeder Gegenmaßnahme darum geht, dem Agenten einen kuratierten Designkontext zu geben. Diesen Kontext von Hand und pro Projekt zu pflegen ist die Mühsal, die OpenDesign beseitigt.
Mit Antigravity innerhalb von OpenDesign designen
OpenDesign ist die Open-Source-Designebene, nach der der obige Workflow immer wieder verlangt. Es behandelt Antigravity als First-Party-Adapter und umgibt es mit einer kuratierten Skill- und Designsystem-Bibliothek, einer strukturierten Render-Pipeline und einer lokalen Desktop-UI – sodass der Designkontext, der Antigravity gut macht, vom ersten Lauf an vorhanden ist und nicht jedes Mal von Hand zusammengestellt wird. OpenDesign ist Open Source und local-first, was die Kombination zu einer natürlichen Passung macht.
Installieren Sie OpenDesign und wählen Sie Antigravity als Ihren Agenten.
Authentifizieren Sie sich mit Ihrem Google-Konto – Anmeldedaten bleiben auf Ihrem Rechner und werden niemals über uns weitergeleitet.
Wählen Sie ein Designsystem und einen Skill und generieren Sie dann Präsentationen, Prototypen und Landingpages mit konsistentem Geschmack.
Jedes Artefakt und jede DESIGN.md-Datei liegt in Ihrem eigenen Repo, nicht in einer gehosteten Cloud.
Derselbe Antigravity-Agent, dasselbe Google-Konto – plus ein echter, portabler Open-Source-Design-Workflow darum herum. OpenDesign ist local-first und Apache-2.0-lizenziert, sodass nichts von Ihrer Arbeit oder Ihren Anmeldedaten Ihren Rechner verlässt.
Installieren Sie OpenDesign und wählen Sie Antigravity als Ihren Agenten.
Authentifizieren Sie sich mit Ihrem Google-Konto – Anmeldedaten bleiben auf Ihrem Rechner und werden niemals über uns weitergeleitet.
Wählen Sie ein Designsystem und einen Skill und generieren Sie dann Präsentationen, Prototypen und Landingpages mit konsistentem Geschmack.
Jedes Artefakt und jede DESIGN.md-Datei liegt in Ihrem eigenen Repo, nicht in einer gehosteten Cloud.
Derselbe Antigravity-Agent, dasselbe Google-Konto – plus ein echter, portabler Open-Source-Design-Workflow darum herum. OpenDesign ist local-first und Apache-2.0-lizenziert, sodass nichts von Ihrer Arbeit oder Ihren Anmeldedaten Ihren Rechner verlässt.
Hat OpenDesign irgendeine Verbindung zu Google?
Nein. OpenDesign ist unabhängig; Antigravity und Gemini sind Marken von Google.