WEITERE LEKTÜRE
Weiterführende Lektüre zu Antigravity
Tutorials, Dokumentation und Walkthroughs zum Designen 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.
Vom Briefing zur Oberfläche01 / Antigravity
SIE BRINGEN DIE IDEE EIN↗
„Ein Registrierungsablauf, den der Browser
prüft, bevor ich es tue.“
Drei Wege in diesen Antigravity-Leitfaden
Wählen Sie Ihren Einstieg mit Antigravity
DIESER LEITFADEN · UI-DESIGN
Bauen Sie eine Produktoberfläche mit Antigravity
Dieser Leitfaden: Briefing, Referenzen, Designregeln und ein überprüftes HTML-Ergebnis.
Diese Anleitung lesen EINRICHTUNGAntigravity von Null einrichten
Hier ist der vollständige Weg von einer sauberen Maschine bis zu einem Antigravity-Agent, der UI bauen und prüfen kann.
Zum Setup VERGLEICHAntigravity mit anderen Agents vergleichen
Wie sich Antigravity von Codex, Claude Code, Cursor bei Designarbeit unterscheidet, und wann Sie einen anderen Workflow wählen sollten.
Zum VergleichAuf dieser Seite Beispiel
Eine vollständige Antigravity-Design-Aufgabe
Eine Antigravity-Design-Aufgabe, vom Briefing zur Oberfläche
Eine einzelne Aufgabe, end-to-end gezeigt: das Briefing und die Vorgaben, die Sie übergeben, das Artefakt, das zurückkommt, und die Prüfungen, die Sie vor dem Abschluss noch durchführen. Die unten gezeigte Oberfläche ist ein illustratives Beispiel für diese Seite, kein aufgezeichneter Antigravity-Lauf.
1Design-Briefing und Vorgaben
BriefingEntwerfen Sie eine dreistufige Registrierung für ein Team-Produkt: Konto, Workspace, Teammitglieder einladen. Überprüfen Sie jeden Schritt im integrierten Browser bei Desktop- und Smartphone-Breiten, bevor Sie sie übergeben.
- Design-SystemOpenDesign Paper Canvas: Albert Sans, ein grüner Akzent
- Breakpoints1440px Desktop und 390px Mobil, kein horizontales Scrollen
- InteraktionenSchrittnavigation, Inline-Validierung, Einladung überspringen, Tastaturfokus-Reihenfolge
- AusgabeEine in sich geschlossene HTML-Datei mit stabilen
data-od-id-Hooks
2Arbeitsteilung: Sie, Antigravity und OpenDesign
- Sie
Schreiben Sie das Briefing, wählen Sie das Design-System aus und definieren Sie die Abnahmekriterien.
- Antigravity
Plant das Layout, schreibt HTML, CSS und JavaScript und überarbeitet es auf Anfrage.
- OpenDesign
Stellt das Design-System und den Skill bereit, rendert die Vorschau und speichert jede Version als Datei im Projekt.
- Prüfung
Visuelle Hierarchie, Abstände im 8px-Raster, beide Breakpoints und jede Interaktion werden vor der Übergabe geprüft.
3Antigravity-Artefakt: Der Signup Flow bei 1440px und 390px
4Überprüfung vor der Übergabe
Layout
Raster und Abstände
Stepper, Formular und Zusammenfassung auf dem 8px-Raster; die Zusammenfassung wird nie höher als das Formular.
Hierarchie
Visuelle Hierarchie
Aktueller Schritt, dann die Frage, dann die Felder; der Akzent markiert nur den aktuellen Schritt.
Responsive
Mobiles Layout
Der Stepper komprimiert sich zu Punkten mit dem aktuellen Label; die Zusammenfassung wird zu einer einzigen Gesamtzeile.
Interaktion
Interaktionsprüfungen
Gehen Sie einen Schritt zurück, lösen Sie einen Validierungsfehler aus, überspringen Sie den Einladungsschritt.
Eignung
Wann Antigravity zur Aufgabe passt – und wann nicht
Antigravity passt, wenn
- Multimodaler Screenshot → UI. Das Bildverständnis von Gemini 3.x wandelt ein Referenzbild in responsives Markup um und prüft das Ergebnis dagegen.
- Integrierte Browser-Verifizierung. Agents steuern einen integrierten Browser, um die UI zu rendern und über verschiedene Breakpoints zu prüfen, wobei das Ergebnis als Artifacts erfasst wird.
- Editor View + Manager Surface. Programmieren Sie direkt in der Editor View, oder orchestrieren Sie mehrere Agents asynchron über die Manager Surface.
- Kostenloser Start. Öffentliche Preview kostenlos für Einzelpersonen, mit großzügigen Gemini 3.x-Ratenlimits über ein Google-Konto.
Wählen Sie einen anderen Workflow, wenn
- Sie benötigen bearbeitbare Vektordateien. Das Artefakt ist HTML, kein bearbeitbares Design-Dokument. Prüfen Sie einen separaten Vektor-Workflow für Ihr benötigtes Asset-Format.
- Sie haben weder Referenz noch Vorgaben. Ohne Designsystem oder Beispiele tendiert die Ausgabe zu einem generischen Look; schreiben Sie zuerst das Briefing.
- Sie verfügen nicht über die Zugangsdaten, die dieser Agent benötigt. Erforderlich: Google-Konto (privates Gmail), kostenlos in der öffentlichen Preview. OpenDesign stellt keine Zugangsdaten bereit und leitet sie nicht weiter.
- Ihr Team arbeitet mit Cursor oder Kiro. Diese Agents haben eigene Seiten; der Workspace ist derselbe, das Setup unterscheidet sich. Siehe verwandte Agents.
Kompatibilität
Antigravity-Voraussetzungen, bevor Sie starten
Dieser Leitfaden behandelt Antigravity, wie es über die OpenDesign-Desktop-App verbunden wird. Veröffentlichte Referenzen geprüft am 6. September 2026.
Tool-UmfangAntigravity, von Google
Antigravity ist Googles agentenorientierte Entwicklungsplattform – eine KI-gestützte IDE, in der autonome Agents über den Editor, das Terminal und einen integrierten Browser hinweg arbeiten. Sie wurde zusammen mit Gemini 3 als Public Preview veröffentlicht. Auf dieser Seite geht es um das Gestalten von Oberflächen mit Antigravity über OpenDesign, nicht um die Oberfläche von Antigravity selbst. Die Setup-Hinweise von OpenDesign listen die verfügbaren Agents auf.
Konten und AuthentifizierungGoogle-Konto (privates Gmail), kostenlos in
Google-Konto (privates Gmail), kostenlos in der öffentlichen Vorschau. Authentifizieren Sie sich mit Ihrem Google-Konto — die Zugangsdaten bleiben auf Ihrem Rechner. Diese Seite verspricht kein Kontingent und keinen Preis.
System und VersionenDesktop-App oder Quellcode
Prüfen Sie die Download-Seite auf Desktop-Builds. Die Node.js- und pnpm-Anforderungen im Source-Quickstart gelten für das Ausführen aus dem Quellcode, nicht für die Installation eines Desktop-Pakets. Mindestens kompatible Antigravity-Version: hier nicht verifiziert.
VerbindungsprüfungDas Erfolgssignal
Folgen Sie den Verbindungsanweisungen Ihrer installierten Version und führen Sie dann eine kleine Aufgabe aus. Bestätigen Sie, dass Antigravity sie bearbeitet hat und dass sich das Artefakt öffnet. Ein Download allein stellt noch keine funktionierende Verbindung her.
Mit der Desktop-App beginnen
Antigravity-Einrichtung in drei Schritten
Laden Sie zuerst herunter, schließen Sie die Antigravity-Einrichtung für Ihre installierte Version ab und prüfen Sie dann ein kleines Ergebnis. Sie müssen OpenDesign für diesen Weg nicht aus dem Quellcode bauen.
- 1
Die OpenDesign-Desktop-App herunterladen
Wählen Sie das Paket für Ihren Computer, installieren Sie es und öffnen Sie die App.
OpenDesign herunterladenMEILENSTEINDie Desktop-App öffnet sich. Bereits installiert? Fahren Sie mit dem nächsten Schritt fort; ein erneuter Download ist nicht erforderlich. - 2
Bereiten Sie Ihre Antigravity-Verbindung vor
Folgen Sie den Antigravity-Anweisungen in Ihrer installierten Version. Authentifizieren Sie sich mit Ihrem Google-Konto — die Zugangsdaten 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 folderAus den Antigravity-Einrichtungshinweisen im veröffentlichten Leitfaden; prüfen Sie die Anbieterdokumentation für den aktuellen Befehl.
MEILENSTEINBestätigen Sie den vorgesehenen Agent und das Konto. Ist er nicht verfügbar, prüfen Sie die Kompatibilität, bevor Sie eine größere Aufgabe versuchen. - 3
Führen Sie eine kleine Antigravity-Aufgabe aus
Verwenden Sie ein kleines Briefing, damit Sie den gesamten Ablauf beurteilen können, einschließlich einer Überarbeitung.
Start-BriefingErstellen Sie einen Einstellungsbildschirm mit einem Profilformular und einer Speicherbestätigung. Verwenden Sie meine Designregeln. Prüfen Sie ihn bei Desktop- und Mobilbreiten.
MEILENSTEINÖffnen Sie das Ergebnis, testen Sie den Speicherstatus und fordern Sie eine konkrete Änderung an. Eine generierte Datei ist der Beginn der Überprüfung, nicht das Ende.
Um OpenDesign aus dem Quellcode auszuführen, folgen Sie stattdessen dem technischen Schnellstart.
Der Antigravity-Design-Workflow
Der Antigravity-Design-Workflow in fünf Schritten
Die gleiche Signup-Flow-Aufgabe, verfolgt vom Briefing bis zur verifizierten Datei. Jeder Schritt listet auf, was Sie beisteuern, was Antigravity macht, was OpenDesign beiträgt und was Sie prüfen.
- 1
Design-Briefing
Klare Sprache, drei bis sechs Zeilen. Benennen Sie die Zielgruppe, die Aufgabe des Screens und die Plattformen.
- SieSchreiben Sie das Briefing; hängen Sie einen Referenz-Screenshot an, falls vorhanden.
- AntigravityLiest das Briefing und die Instruktionsdatei des Projekts; fragt nach, wenn etwas mehrdeutig ist.
- OpenDesignStellt das Projekt, die Prompt-Oberfläche und das Skill für den Artefakttyp bereit.
- PrüfenStellen Sie sicher, dass das Briefing die Abnahmekriterien enthält. Diese jetzt hinzuzufügen ist günstiger als nach der Generierung.
- 2
Design-Vorgaben
Ein Design-System und ein paar feste Regeln. Das unterscheidet markenkonforme Ergebnisse von einem generischen Look.
- SieWählen Sie ein Design-System; legen Sie Breakpoints und verbindlich zu verwendende Komponenten fest.
- AntigravityLädt die DESIGN.md-Tokens und die Haltungsregeln in den Kontext, bevor eine Zeile geschrieben wird.
- OpenDesignLiefert die Design-System-Bibliothek und bindet das ausgewählte System in die Skill-Vorlage ein.
- PrüfenDie Token entsprechen Ihrer Marke. Ein Akzent, die richtigen Schriften, der richtige Radius.
- 3
Die Oberfläche generieren
Antigravity schreibt eine eigenständige HTML-Datei: Layout, Styles, Interaktionen und stabile Hooks.
- SieWarten Sie, oder beantworten Sie eine Rückfrage. Nichts zu konfigurieren.
- AntigravityPlant die Abschnitte, schreibt HTML, CSS und JavaScript, führt die Datei aus und behebt Fehler.
- OpenDesignSpeichert das Artefakt im Projektordner und indexiert es für die Vorschau.
- PrüfenNoch nichts. Beurteilen Sie die Datei nach dem Rendern, nicht anhand des Quellcodes.
- 4
Vorschau
Die Datei wird innerhalb von OpenDesign in den angeforderten Breiten dargestellt. Hier wird das Design beurteilt.
- SieWechseln Sie zwischen Breiten, klicken Sie sich durch die Interaktionen, hinterlassen Sie Kommentare zu Elementen.
- AntigravityLiest Ihre Kommentare zur Vorschau und bereitet die nächste Überarbeitung vor.
- OpenDesignRendert die Vorschau, stellt
data-od-id-Ziele für Kommentare und Änderungen bereit. - PrüfenHierarchie, Kontrast, Überlauf bei 390px, Fokuszustände und ob der Akzent sparsam eingesetzt wird.
- 5
Überarbeiten und Verifizieren
Fordern Sie Änderungen an, indem Sie auf Elemente in der Vorschau zeigen. Jede Überarbeitung ist eine neue Datei; nichts wird stillschweigend überschrieben.
- SieVerwandeln Kommentare in Anfragen; entscheiden, wann die Aufgabe abgeschlossen ist.
- AntigravityWendet die Änderungen direkt an und führt die Datei erneut aus.
- OpenDesignBehält Versionen nebeneinander; exportiert ein Bild oder das HTML, wenn Sie fertig sind.
- PrüfenNur den geänderten Bereich erneut prüfen, dann die gesamte Seite einmal bei jedem Breakpoint.
Ressourcen
Antigravity-Design-Ressourcen
Skills Skills durchsuchen Design-Systeme Systeme durchsuchen Vorlagen Vorlagen durchsuchen
Design Skills
Die Artefakttypen, die Antigravity in OpenDesign erzeugen kann, ein Skill pro Typ.
Design Systems
Marken-Tokens und Komponenten, die gebunden werden müssen, bevor Antigravity etwas generiert.
Vorlagen
Ausgangspunkte für Decks, Landingpages und Produktbildschirme.
Einschränkungen
Antigravity: Einschränkungen, manuelle Prüfungen und Fallbacks
- GeltungsbereichDiese Seite behandelt Antigravity als mit OpenDesign verbundenen Agent, nicht sämtliche Antigravity-Funktionen.
- NutzungslimitsNutzungslimits und Kosten richten sich nach den verwendeten Zugangsdaten (Google-Konto (privates Gmail), in der Public Preview kostenlos). Diese Seite macht keine Aussage über kostenlose Kontingente.
- NetzwerkLokale Projektdateien bedeuten nicht, dass die Inferenz offline erfolgt. Prüfen Sie die Anbietereinstellungen und Datenrichtlinien Ihres Agents, bevor Sie sensible Eingaben teilen.
- Ausgabe ist HTMLArtefakte sind HTML-Dateien, keine Vektor-Designdateien.
- Manuelle ÜberprüfungBarrierefreiheit, echte Inhalte, Markenkonformität und korrekte Interaktionen werden von Ihnen in der Vorschau geprüft. Betrachten Sie jede Selbstprüfung des Agents als ersten Durchgang.
- FallbackWenn der Agent nicht verfügbar ist oder eine Aufgabe fehlschlägt, prüfen Sie die Verbindungsanleitung und Authentifizierung der installierten Version. Bewahren Sie den Fehler und das letzte funktionierende Artefakt auf, bevor Sie die Konfiguration ändern.
FAQ
Häufige Fragen zu Antigravity und OpenDesign
Kann Antigravity wirklich Designarbeit leisten?
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 für das Design mit Antigravity bezahlen?
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 macht Antigravity speziell für Design gut?
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 oder 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.
Starten Sie eine erste Design-Aufgabe mit Antigravity
Beginnen Sie mit einer kleinen Aufgabe, bewerten Sie den Ablauf, und bringen Sie dann das eigentliche Briefing ein. Wählen Sie die Option, die zu Ihrem Setup passt; die Seite erkennt dies nicht automatisch.