WEITERE LEKTÜRE
Weiterführende Lektüre zu Gemini
Tutorials, Dokumentation und Anleitungen für das Design mit Gemini, wie im veröffentlichten Guide aufgeführt.
Gemini 
OpenDesign Mit Gemini
in OpenDesign
gestalten.
Wie man Oberflächen mit Gemini CLI in OpenDesign gestaltet: ein Whiteboard-Foto als Referenz, GEMINI.md als Regelwerk, eine Operations-Dashboard-Aufgabe vom Briefing bis zur geprüften Datei, und die Grenzen, die Sie vorab kennen sollten.
Vom Briefing zum Interface01 / Gemini
SIE BRINGEN DIE IDEE EIN↗
„Von einem Foto eines Whiteboards
zu einem Dashboard, das wir lesen können.“
Drei Wege in diesen Gemini-Guide
Wählen Sie, wo Sie mit Gemini starten
DIESER LEITFADEN · UI-DESIGN
Erstellen Sie eine Produktoberfläche mit Gemini
Dieser Leitfaden: Briefing, Referenzen, Designregeln und ein überprüftes HTML-Ergebnis.
Diese Anleitung lesen EINRICHTUNGGemini von null einrichten
Hier ist der vollständige Weg von einer sauberen Maschine zu einer Gemini CLI, mit der Sie UI erstellen und verifizieren können.
Zum Setup VERGLEICHGemini mit anderen Agents vergleichen
Wie sich Gemini von Codex, Claude Code, Cursor bei Design-Arbeit unterscheidet und wann Sie einen anderen Workflow wählen sollten.
Zum VergleichAuf dieser Seite Beispiel
Eine vollständige Gemini-Design-Aufgabe
Eine Gemini-Design-Aufgabe, vom Briefing zur Oberfläche
Eine einzelne Aufgabe, von Anfang bis Ende gezeigt: das Briefing und die Vorgaben, die Sie übergeben, das Artefakt, das zurückkommt, und die Prüfungen, die Sie danach noch durchführen. Die untenstehende Oberfläche ist ein anschauliches Beispiel für diese Seite, kein aufgezeichneter Gemini-Lauf.
1Design-Briefing und Vorgaben
BriefingEntwerfen Sie ein Operations-Dashboard aus dem angehängten Whiteboard-Foto: vier Kennzahlen als Überschrift, ein wöchentliches Volumen-Diagramm und eine Warteschlange mit Vorfällen. Ein Bildschirm auf dem Desktop, eine scrollbare Zusammenfassung auf dem Smartphone.
- Design-SystemOpenDesign Paper Canvas: Albert Sans, ein grüner Akzent
- Breakpoints1440px Desktop und 390px Mobil, kein horizontales Scrollen
- InteraktionenZeitraum, Vorfallsfilter, Tastaturnavigation durch die Warteschlange
- AusgabeEine in sich geschlossene HTML-Datei mit stabilen
data-od-id-Hooks
2Aufgabenteilung: Sie, Gemini und OpenDesign
- Sie
Schreiben Sie das Briefing, wählen Sie das Design-System aus und definieren Sie die Abnahmekriterien.
- Gemini
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.
3Gemini-Artefakt: Das Operations Dashboard bei 1440px und 390px
4Überprüfung vor der Übergabe
Layout
Raster und Abstände
Vier Karten, Diagramm und Warteschlange teilen sich ein 8px-Raster; bei 1440 oder 390 überlappt nichts.
Hierarchie
Visuelle Hierarchie
Zuerst werden die Kennzahlen gelesen, dann das Diagramm, dann die Warteschlange; der Akzent markiert einen Balken und eine kritische Pille.
Responsive
Mobiles Layout
Zwei Kennzahlen pro Zeile, Diagramm darunter, Warteschlange als Liste; der Zeitraum klappt in ein Sheet.
Interaktion
Interaktionsprüfungen
Zeitraum wechseln, nach kritisch filtern, mit den Pfeiltasten durch die Warteschlange navigieren.
Eignung
Wann Gemini zur Aufgabe passt und wann nicht
Gemini passt, wenn
- Multimodaler Screenshot → UI. Starkes Bildverständnis wandelt ein Referenzbild in responsives Markup um und prüft das Ergebnis dagegen.
- 1M-token-Kontext. Ein komplettes Design System, eine Komponentenbibliothek und ein Referenzset passen gleichzeitig hinein, sodass die Ausgabe Ihre echten Primitives wiederverwendet.
- GEMINI.md + MCP. Kontextdateien tragen Ihre Konventionen; der Figma-MCP-Server bringt echten Design-Kontext in den Code.
- Offen und kostenlos zu starten. Apache-2.0 und eine großzügige kostenlose Stufe über ein Google-Konto, mit BYOK über die Gemini API.
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 besitzen die Anmeldedaten nicht, die dieser Agent benötigt. Erforderlich: Google-Konto (kostenlose Stufe) oder Gemini-API-Schlüssel (eigener Schlüssel). OpenDesign stellt keine Anmeldedaten bereit und leitet sie nicht weiter.
- Ihr Team arbeitet mit Antigravity oder Claude Code. Diese Agents haben eigene Seiten; der Workspace ist derselbe, die Einrichtung unterscheidet sich. Siehe verwandte Agents.
Kompatibilität
Gemini-Anforderungen vor dem Start
Dieser Leitfaden behandelt Gemini, wie es über die OpenDesign-Desktop-App angebunden wird. Veröffentlichte Referenzen geprüft am 6. September 2026.
Tool-UmfangGemini, von Google
Gemini CLI ist Googles Open-Source-(Apache-2.0)-Terminal-KI-Agent. Er liest Ihre Codebasis, bearbeitet Dateien, führt Befehle aus, ruft das Web ab und stützt Antworten mit der Google-Suche. Auf dieser Seite geht es um das Gestalten von Interfaces mit Gemini über OpenDesign, nicht um Geminis eigenes Interface. OpenDesigns Setup-Hinweise listen die verfügbaren Agents auf.
Konten und AuthentifizierungGoogle-Konto (kostenlose Stufe) oder Gemini API
Google-Konto (kostenlose Stufe) oder Gemini API-Schlüssel (BYOK). Authentifizieren Sie sich mit Ihrem Google-Konto oder Gemini API-Schlüssel (BYOK) — 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-Voraussetzungen im Quickstart der Quelle gelten für die Ausführung aus dem Quellcode, nicht für die Installation eines Desktop-Pakets. Mindestens kompatible Gemini-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 Gemini sie bearbeitet hat und dass sich das Artifact öffnet. Ein Download allein stellt keine funktionierende Verbindung her.
Mit der Desktop-App beginnen
Gemini-Einrichtung in drei Schritten
Laden Sie zuerst herunter, schließen Sie die Gemini-Einrichtung für Ihre installierte Version ab und prüfen Sie dann ein kleines Ergebnis. Sie müssen OpenDesign nicht aus dem Quellcode bauen, um diesem Weg zu folgen.
- 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 Gemini-Verbindung vor
Folgen Sie den Gemini-Anweisungen in Ihrer installierten Version. Authentifizieren Sie sich mit Ihrem Google-Konto oder Gemini API-Schlüssel (BYOK) — Zugangsdaten bleiben auf Ihrem Rechner.
Gemini CLI-Dokumentation# 1. Install Gemini CLI (Node 20+) npm install -g @google/gemini-cli # or run without installing: npx https://github.com/google-gemini/gemini-cli # 2. Start it in your project and authenticate on first run cd your-project gemini # sign in with your Google account, or set GEMINI_API_KEYAus den Gemini-Setup-Hinweisen 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 Gemini-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 Gemini-Design-Workflow
Der Gemini-Design-Workflow in fünf Schritten
Dieselbe Operations-Dashboard-Aufgabe, verfolgt vom Briefing bis zur verifizierten Datei. Jeder Schritt listet auf, was Sie bereitstellen, was Gemini 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.
- GeminiLiest das Briefing und die Anweisungsdatei 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.
- GeminiLädt die DESIGN.md-Tokens und 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
Gemini schreibt eine eigenständige HTML-Datei: Layout, Styles, Interaktionen und stabile Hooks.
- SieWarten Sie, oder beantworten Sie eine Rückfrage. Nichts zu konfigurieren.
- GeminiPlant 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.
- GeminiLiest 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.
- GeminiWendet 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
Gemini-Design-Ressourcen
Skills Skills durchsuchen Design-Systeme Systeme durchsuchen Vorlagen Vorlagen durchsuchen
Design Skills
Die Artefakttypen, die Gemini in OpenDesign erzeugen kann – ein Skill pro Typ.
Design Systems
Brand-Tokens und Komponenten, die Sie einbinden, bevor Gemini etwas generiert.
Vorlagen
Ausgangspunkte für Decks, Landingpages und Produktbildschirme.
Einschränkungen
Grenzen von Gemini, manuelle Prüfungen und Fallbacks
- UmfangDiese Seite behandelt Gemini als mit OpenDesign verbundenen Agent, nicht jede Gemini-Funktion.
- NutzungslimitsNutzungslimits und Kosten richten sich nach den verwendeten Zugangsdaten (Google-Konto (kostenlose Stufe) oder Gemini-API-Key). Diese Seite trifft 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 Gemini und OpenDesign
Kann Gemini CLI wirklich Designarbeit leisten?
Ja — mit einem ästhetischen Skill, einem design system und echten Referenzbildern im Kontext erzeugt Gemini CLI produktionsreife, responsive UIs, und seine starken multimodalen Modelle prüfen die Ausgabe gegen die Referenzen. Ohne diesen Kontext tendiert es zu einem generischen Look – genau diese Lücke schließt OpenDesign.
Muss ich bezahlen, um mit Gemini CLI zu designen?
Nein — die Anmeldung mit einem Google-Konto bietet eine großzügige kostenlose Stufe, und Sie können auch einen eigenen Gemini-API-Key (BYOK) mitbringen oder Vertex AI verwenden. OpenDesign leitet Ihre Zugangsdaten in keinem Fall über einen Proxy.
Was macht Gemini CLI speziell für Design geeignet?
Zwei Dinge: Seine Modelle sind stark multimodal und lesen Referenz-Screenshots gut, und der 1M-token-Kontext kann ein komplettes design system und einen ganzen Referenzsatz gleichzeitig fassen. Beides hilft — der Geschmack stammt jedoch weiterhin aus dem design system, dem Skill und den Referenzen, die Sie bereitstellen.
Gemini CLI oder Claude Code für Frontend-Design?
Beide sind stark. Claude Code ist bekannt für präzise, codebase-bewusste Designentscheidungen; der Vorteil von Gemini CLI liegt im multimodalen Verständnis sowie einem riesigen Kontext und einer kostenlosen Stufe. Viele Teams nutzen beide — mit OpenDesign wechseln Sie den Agent, ohne Ihren Design-Workflow zu ändern.
Wie verbinde ich Gemini CLI mit Figma?
Fügen Sie den Figma-MCP-Server unter mcpServers in ~/.gemini/settings.json hinzu. Gemini kann dann echten Design-Kontext abrufen — Komponenten, Variablen, Layout-Daten —, sodass der generierte Code der Quelle entspricht, statt sie nur anzunähern.
Starten Sie eine erste Design-Aufgabe mit Gemini
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.