WEITERE LEKTÜRE
Weiterführende Lektüre zu Gemini
Kuratierte Gemini CLI-Tutorials, Dokumentation und Walkthroughs für Designarbeit, wie im veröffentlichten Leitfaden 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-CLI-LEITFADEN
Wählen Sie Ihren Einstieg in Gemini CLI
DIESER LEITFADEN · UI-DESIGN
Eine Produktoberfläche mit Gemini CLI generieren
Der Kernpfad hier: ein Brief, Referenzbilder, im Kontext gehaltene Designregeln und ein HTML-Artefakt, das Sie selbst prüfen.
Diese Anleitung lesen EINRICHTUNGGemini von null einrichten
Starten Sie auf einem sauberen Rechner und arbeiten Sie sich zu einem Gemini CLI vor, das seine eigene UI-Ausgabe erstellen und prüfen kann.
Zum Setup VERGLEICHGemini mit anderen Agents vergleichen
Wo die multimodalen und Large-Context-Stärken von Gemini CLI im Vergleich zu Codex, Claude Code und Cursor stehen, und wann ein anderer Workflow besser passt.
Zum VergleichAuf dieser Seite Beispiel
Eine vollständige Gemini-Design-Aufgabe
Eine Gemini-Aufgabe: Vom Whiteboard-Brief zur gerenderten Oberfläche
Verfolgen Sie eine Aufgabe durch ihren gesamten Kreislauf: den Brief und die Vorgaben, die Sie an Gemini übergeben, das Artefakt, das es zurückgibt, und die Prüfungen, die Ihnen bleiben, bevor Sie es als fertig bezeichnen. Die folgende Oberfläche ist ein veranschaulichendes Beispiel, das für diese Seite erstellt wurde, kein aufgezeichneter Gemini-Lauf.
1Design-Briefing und Vorgaben
BriefingVerwandeln Sie das angehängte Whiteboard-Foto in ein Operations-Dashboard: vier Kennzahlen, ein wöchentliches Volumendiagramm und eine Warteschlange von Vorfällen. Ein Bildschirm auf dem Desktop, eine scrollbare Zusammenfassung auf dem Telefon.
- Design-SystemPapier-Leinwand von OpenDesign: Albert Sans, ein einzelner grüner Akzent
- Breakpoints1440px Desktop und 390px Mobil, kein horizontales Scrollen
- InteraktionenDatumsbereichssteuerung, Vorfallfilter und Tastaturnavigation durch die Warteschlange
- AusgabeEine in sich geschlossene HTML-Datei mit stabilen
data-od-id-Hooks
2Wer macht was: Sie, Gemini CLI und OpenDesign
- Sie
Sie schreiben den Brief, wählen das Designsystem und legen die Abnahmekriterien fest.
- Gemini
Gemini CLI plant das Layout, schreibt das HTML, CSS und JavaScript und überarbeitet dann auf Anfrage.
- OpenDesign
OpenDesign liefert das Designsystem und den Skill, rendert die Vorschau und bewahrt jede Version als Datei im Projekt auf.
- Prüfung
Vor der Übergabe prüfen Sie die visuelle Hierarchie, den Abstand im 8px-Raster, beide Breakpoints und jede Interaktion.
3Geminis Artefakt: Das Operations-Dashboard bei 1440px und 390px
4Überprüfung vor der Übergabe
Layout
Raster und Abstände
Die vier Karten, das Diagramm und die Warteschlange liegen alle auf einem 8px-Raster; bei 1440 oder 390 kollidiert nichts.
Hierarchie
Visuelle Hierarchie
Die Scan-Reihenfolge verläuft über Kennzahlen, dann Diagramm, dann Warteschlange; der Akzent berührt einen einzelnen Balken und eine einzelne kritische Pille.
Responsive
Mobiles Layout
Auf Mobilgeräten zwei Zahlen pro Zeile, Diagramm darunter, Warteschlange als Liste; der Datumsbereich klappt in ein Sheet ein.
Interaktion
Interaktionsprüfungen
Ändern Sie den Bereich, filtern Sie nur auf kritisch und navigieren Sie mit den Pfeiltasten durch die Warteschlange.
Eignung
Wo Gemini CLI in Ihre Designaufgabe passt — und wo nicht
Gemini passt, wenn
- Multimodaler Screenshot → UI. Geminis Bildverständnis liest einen Referenz-Screenshot in responsives Markup ein und kann das Rendering damit vergleichen.
- 1M-Token-Kontext. Ein komplettes Designsystem, eine Komponentenbibliothek und ein Referenzset passen in ein Fenster, sodass die Ausgabe Ihre echten Primitive wiederverwendet, statt Stile zu erfinden.
- GEMINI.md + MCP. Die GEMINI.md-Kontextdatei trägt Ihre Konventionen bei jedem Lauf; der Figma-MCP-Server zieht echten Designkontext in den Code.
- Offen und kostenlos zum Start. Apache-2.0, mit einem großzügigen kostenlosen Kontingent über ein Google-Konto und BYOK über die Gemini API.
Wählen Sie einen anderen Workflow, wenn
- Sie benötigen bearbeitbare Vektordateien. Zurück kommt HTML, kein bearbeitbares Designdokument. Sehen Sie sich einen separaten Vektor-Workflow an, wenn Ihr Asset-Format dies erfordert.
- Sie haben keine Referenz und keine Vorgaben. Ohne Designsystem oder Beispiele, an denen Sie sich orientieren können, neigt Gemini zu einem generischen Look; schreiben Sie den Brief, bevor Sie generieren.
- 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 in Antigravity oder Claude Code. Diese Agenten haben ihre eigenen Seiten; der Workspace selbst ändert sich nicht, aber das Setup. Siehe verwandte Agenten.
Kompatibilität
Gemini-Anforderungen vor dem Start
Diese Seite behandelt Gemini als einen Agenten, der über die OpenDesign-Desktop-App verbunden ist. Veröffentlichte Referenzen wurden am 6. September 2026 geprüft.
Tool-UmfangGemini, von Google
Google liefert Gemini CLI als Open-Source-Terminal-KI-Agent (Apache-2.0) aus. Er liest Codebasen, bearbeitet Dateien, führt Befehle aus, ruft das Web ab und untermauert Antworten mit Google Search. Diese Seite konzentriert sich auf das Entwerfen von Oberflächen mit Gemini über OpenDesign, nicht auf Geminis eigene Oberfläche. Die Setup-Notizen von OpenDesign listen die verfügbaren Agenten auf.
Konten und AuthentifizierungGoogle-Konto (kostenlose Stufe) oder Gemini API
Anmeldeinformationsoptionen: ein Google-Konto (kostenloses Kontingent) oder ein Gemini-API-Schlüssel (BYOK). Authentifizieren Sie sich mit einem von beiden; die Anmeldeinformationen bleiben auf Ihrem Rechner. Diese Seite verspricht kein Kontingent und keinen Preis.
System und VersionenDesktop-App oder Quellcode
Desktop-Builds erscheinen auf der Download-Seite. Die Node.js- und pnpm-Anforderungen im Quell-Quickstart gelten nur beim Ausführen aus dem Quellcode, nicht beim Installieren eines Desktop-Pakets. Minimale kompatible Gemini-Version: hier nicht verifiziert.
VerbindungsprüfungDas Erfolgssignal
Verwenden Sie die in Ihrer installierten Version angezeigten Verbindungsanweisungen und versuchen Sie dann eine kleine Aufgabe. Bestätigen Sie, dass Gemini sie bewältigt hat und dass sich das Artefakt öffnen lässt. Ein Download allein beweist keine funktionierende Verbindung.
Mit der Desktop-App beginnen
Gemini-Einrichtung in drei Schritten
Laden Sie zuerst die App herunter, schließen Sie das Gemini-Setup für die von Ihnen installierte Version ab und prüfen Sie dann ein kleines Ergebnis. Dieser Pfad erfordert kein Bauen von OpenDesign aus dem Quellcode.
- 1
Die OpenDesign-Desktop-App herunterladen
Wählen Sie das Paket für Ihren Computer aus, installieren Sie es und öffnen Sie die App.
OpenDesign herunterladenMEILENSTEINDie Desktop-App öffnet sich. Wenn sie bereits installiert ist, gehen Sie zum nächsten Schritt über; Sie müssen sie nicht erneut herunterladen. - 2
Bereiten Sie Ihre Gemini-Verbindung vor
Befolgen Sie die Gemini-Anweisungen, die mit Ihrer installierten Version geliefert werden, einschließlich jeglicher GEMINI.md-Projektkontext-Konvention, die sie verwendet. Authentifizieren Sie sich mit Ihrem Google-Konto oder einem Gemini-API-Schlüssel (BYOK); die Anmeldeinformationen 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_KEYEntnommen aus den Gemini-Setup-Notizen in diesem veröffentlichten Leitfaden; überprüfen Sie den aktuellen Befehl in der Herstellerdokumentation.
MEILENSTEINStellen Sie sicher, dass Agent und Konto dem entsprechen, was Sie beabsichtigt haben. Wenn der Agent nicht verfügbar ist, prüfen Sie die Kompatibilität, bevor Sie eine größere Aufgabe versuchen. - 3
Führen Sie eine kleine Gemini-Aufgabe aus
Halten Sie den Eröffnungsbrief bescheiden genug, um den gesamten Kreislauf zu beurteilen, eine Überarbeitung eingeschlossen.
Start-BriefingErstellen Sie einen Einstellungsbildschirm mit einem Profilformular und einer Speicherbestätigung. Wenden Sie meine Designregeln an. Überprüfen Sie ihn bei Desktop- und Mobilbreiten.
MEILENSTEINÖffnen Sie das Artefakt, testen Sie den Speicherzustand und bitten Sie um eine bestimmte Änderung. Die Prüfung beginnt mit der generierten Datei; sie endet dort nicht.
Wenn Sie beabsichtigen, OpenDesign aus dem Quellcode auszuführen, verwenden Sie stattdessen den technischen Quickstart.
Der Gemini-Design-Workflow
Fünf Schritte durch Geminis Design-Kreislauf
Ein Operations-Dashboard-Brief, verfolgt vom ersten Prompt bis zu einer geprüften Datei. Bei jedem Schritt sehen Sie Ihren Input, die Aktion von Gemini CLI, den Beitrag von OpenDesign und Ihre Prüfpflicht.
- 1
Design-Briefing
Halten Sie es einfach und kurz: drei bis sechs Zeilen. Sagen Sie, wer den Bildschirm nutzt, was er tun muss und wo er laufen wird.
- SieEntwerfen Sie den Brief selbst und verwenden Sie @, um einen Referenz-Screenshot anzuhängen, wenn Sie einen haben.
- GeminiLiest den Brief plus die GEMINI.md des Projekts; wenn ein Detail unklar ist, fragt es nach, statt zu raten.
- OpenDesignLiefert das Projekt, die Terminal-Prompt-Oberfläche und den auf den Artefakttyp abgestimmten Skill.
- PrüfenStellen Sie sicher, dass der Brief Abnahmekriterien nennt. Sie jetzt zu schreiben kostet weniger, als ein fertiges Artefakt zu reparieren.
- 2
Design-Vorgaben
Ein Designsystem plus ein paar feste Regeln. Das ist der Unterschied zwischen markenspezifischer Ausgabe und einem generischen Standard.
- SieWählen Sie ein Designsystem und nennen Sie dann Ihre Breakpoints und alle Komponenten, die erscheinen müssen.
- GeminiBevor es eine Zeile schreibt, lädt es DESIGN.md-Token und GEMINI.md-Haltungsregeln in den Kontext.
- OpenDesignLiefert die Designsystem-Bibliothek und bindet Ihr gewähltes System in die Skill-Vorlage ein.
- PrüfenPrüfen Sie, dass die Token zur Marke passen: ein Akzent, die richtigen Schriften, der richtige Radius.
- 3
Die Oberfläche generieren
Gemini CLI schreibt eine eigenständige HTML-Datei, die Layout, Stile, Interaktionen und stabile Hooks abdeckt.
- SieWarten Sie oder beantworten Sie eine Klärungsfrage. Hier gibt es nichts zu konfigurieren.
- GeminiEs plant die Abschnitte, schreibt HTML, CSS und JavaScript, führt die Datei aus und repariert, was fehlschlägt.
- OpenDesignSpeichert das Artefakt im Projektordner und indiziert es, damit die Vorschau es finden kann.
- PrüfenNoch nichts. Prüfen Sie die Datei, nachdem sie gerendert wurde, nicht durch Lesen ihres Quellcodes.
- 4
Vorschau
OpenDesign rendert die Datei in den von Ihnen angegebenen Breiten. Dies ist der Punkt, an dem das Design beurteilt wird.
- SieÄndern Sie die Breiten, probieren Sie die Interaktionen aus und hängen Sie Kommentare an bestimmte Elemente.
- GeminiGemini CLI liest Ihre Kommentare aus der Vorschau und bereitet den nächsten Durchgang vor.
- OpenDesignRendert die Vorschau und macht
data-od-id-Ziele verfügbar, sodass Kommentare und Änderungen auf Elemente verweisen können. - PrüfenPrüfen Sie Hierarchie, Kontrast, Überlauf bei 390px, Fokuszustände und ob der Akzent sparsam bleibt.
- 5
Überarbeiten und Verifizieren
Bitten Sie um Änderungen, indem Sie auf Vorschau-Elemente zeigen. Jede Überarbeitung ist eine neue Datei; nichts wird ohne Ihr Wissen überschrieben.
- SieWandeln Sie Kommentare in Änderungsanfragen um und entscheiden Sie, wann die Aufgabe abgeschlossen ist.
- GeminiWendet die Änderungen direkt an und führt die Datei erneut aus.
- OpenDesignHält Versionen nebeneinander und exportiert anschließend ein Bild oder das HTML, sobald Sie fertig sind.
- PrüfenPrüfen Sie zuerst den geänderten Bereich, dann die vollständige Seite einmal bei jedem Breakpoint.
Ressourcen
Gemini-Design-Ressourcen
Skills Skills durchsuchen Design-Systeme Systeme durchsuchen Vorlagen Vorlagen durchsuchen
Design Skills
Die Arten von Artefakten, die Gemini CLI in OpenDesign erzeugen kann, wobei jedem Typ ein Skill zugeordnet ist.
Design Systems
Designsystem-Tokens und Komponenten, die gebunden werden müssen, bevor Gemini CLI eine Ausgabe schreibt.
Vorlagen
Ausgangspunkte für Decks, Landing Pages und Produktscreens im Gemini CLI-Workflow.
Einschränkungen
Grenzen von Gemini CLI, manuelle Prüfungen und Fallback-Pfade
- UmfangDiese Seite behandelt Gemini CLI als Agenten, der mit OpenDesign verbunden ist, nicht jede Funktion von Gemini selbst.
- NutzungslimitsNutzungslimits und Kosten richten sich nach den verwendeten Anmeldedaten — Google-Konto (Free-Tier) oder Gemini API-Schlüssel (BYOK). Diese Seite macht keine Zusicherung zu kostenlosen Kontingenten.
- NetzwerkLokale Projektdateien bedeuten nicht Offline-Inferenz. Prüfen Sie die Anbieter-Einstellungen und Datenrichtlinien Ihres Agenten, bevor Sie sensible Eingaben teilen.
- Ausgabe ist HTMLArtefakte sind HTML-Dateien, keine bearbeitbaren Vektordesign-Dokumente.
- Manuelle ÜberprüfungBarrierefreiheit, echte Inhalte, Markenpassung und Interaktionskorrektheit müssen Sie in der Vorschau prüfen. Betrachten Sie jede Selbstprüfung von Gemini CLI als ersten Durchgang.
- FallbackWenn Gemini CLI nicht verfügbar ist oder eine Aufgabe fehlschlägt, kehren Sie zu den Verbindungsanweisungen und der Authentifizierung der installierten Version zurück. 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 echte 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.
Welche Gemini CLI-Eigenschaften sind für Design am wichtigsten?
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.
Wahl zwischen Gemini CLI und 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 verbindet sich 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.
Was Gemini CLI in der Praxis ist
Gemini CLI ist ein quelloffener (Apache-2.0) KI-Agent, den Google für das Terminal bereitstellt. Er liest dein Repository, bearbeitet Dateien, führt Shell-Befehle aus, ruft das Web ab und kann Antworten mit Google Search untermauern – er plant und verifiziert Arbeit aus natürlichsprachlichen Aufgaben, statt nur Zeilen zu vervollständigen. Dieselbe Engine treibt auch den Gemini Code Assist-Agenten in VS Code an.
Für Designarbeit stechen zwei Eigenschaften hervor. Seine Modelle sind von Natur aus multimodal, du kannst ihm also einen Screenshot geben, und er schließt auf das tatsächliche Layout. Und sein Kontextfenster reicht bis zu 1M Token – groß genug, um dein gesamtes Designsystem, deine Komponentenbibliothek und deinen Referenzsatz auf einmal zu fassen, statt sie wegzukürzen.
Kontextdateien: Gemini CLI liest eine GEMINI.md-Datei für persistenten Projektkontext – der natürliche Ort, um deine Designkonventionen, Tokens und Review-Checklisten zu hinterlegen. Persönliche und Team-Einstellungen werden darübergelegt.
Integrierte Tools + MCP: Er bringt Datei-, Shell-, Web-Fetch- und Google Search-Tools von Haus aus mit und unterstützt MCP-Server (konfiguriert in ~/.gemini/settings.json), um externen Kontext wie eine Live-Figma-Datei hinzuzufügen.
Kostenlos starten: Die Anmeldung mit einem persönlichen Google-Konto bietet ein großzügiges kostenloses Kontingent an Gemini-Anfragen; du kannst auch einen Gemini API-Schlüssel mitbringen oder Vertex AI verwenden.
Zugangsdaten: Google-Konto (kostenloser Tarif) oder Gemini API-Schlüssel aus AI Studio (BYOK) oder Vertex AI
Anbieter: Google
Lizenz: Apache-2.0, Open Source
Für Designarbeit stechen zwei Eigenschaften hervor. Seine Modelle sind von Natur aus multimodal, du kannst ihm also einen Screenshot geben, und er schließt auf das tatsächliche Layout. Und sein Kontextfenster reicht bis zu 1M Token – groß genug, um dein gesamtes Designsystem, deine Komponentenbibliothek und deinen Referenzsatz auf einmal zu fassen, statt sie wegzukürzen.
Kontextdateien: Gemini CLI liest eine GEMINI.md-Datei für persistenten Projektkontext – der natürliche Ort, um deine Designkonventionen, Tokens und Review-Checklisten zu hinterlegen. Persönliche und Team-Einstellungen werden darübergelegt.
Integrierte Tools + MCP: Er bringt Datei-, Shell-, Web-Fetch- und Google Search-Tools von Haus aus mit und unterstützt MCP-Server (konfiguriert in ~/.gemini/settings.json), um externen Kontext wie eine Live-Figma-Datei hinzuzufügen.
Kostenlos starten: Die Anmeldung mit einem persönlichen Google-Konto bietet ein großzügiges kostenloses Kontingent an Gemini-Anfragen; du kannst auch einen Gemini API-Schlüssel mitbringen oder Vertex AI verwenden.
Zugangsdaten: Google-Konto (kostenloser Tarif) oder Gemini API-Schlüssel aus AI Studio (BYOK) oder Vertex AI
Anbieter: Google
Lizenz: Apache-2.0, Open Source
Warum multimodale Modelle und ein riesiger Kontext zu Design passen
Gemini CLIs Designvorteil rührt von zwei Modelleigenschaften her – doch wie bei jedem Agenten muss Geschmack trotzdem geliefert werden.
Starkes multimodales Verständnis: Weil Gemini-Modelle von Natur aus multimodal sind, liest der Agent Referenz-Screenshots gut – er vergleicht seine gerenderte Ausgabe mit einem Bild, statt aus einer Prosa-Beschreibung zu raten.
Ein 1M-Token-Kontextfenster: Ein großer Kontext bedeutet, dass das gesamte Designsystem, Tokens und viele Referenzzustände auf einmal hineinpassen, sodass der Agent deine echten Primitive wiederverwendet, statt einmalige Stile zu erfinden.
Konventionen in GEMINI.md: Eine GEMINI.md (plus der Figma MCP-Server) verweist den Agenten auf deine Tokens, Komponenten und echten Spezifikationen, sodass er gegen eine Marke statt gegen einen Standard-Look arbeitet.
Geschmack kommt aus drei Inputs, die du lieferst: ein Designsystem, ein Skill und echte Referenzbilder.
Die Lektion ist dieselbe, die jeder Agent lehrt: Gemini CLI hat standardmäßig keinen Geschmack. Es erzeugt gutes Design, wenn du ihm Einschränkungen gibst – ein Designsystem, einen ästhetischen Skill und konkrete Referenzen. OpenDesign bündelt genau diese Inputs, weshalb die beiden zusammenpassen (mehr unten).
Starkes multimodales Verständnis: Weil Gemini-Modelle von Natur aus multimodal sind, liest der Agent Referenz-Screenshots gut – er vergleicht seine gerenderte Ausgabe mit einem Bild, statt aus einer Prosa-Beschreibung zu raten.
Ein 1M-Token-Kontextfenster: Ein großer Kontext bedeutet, dass das gesamte Designsystem, Tokens und viele Referenzzustände auf einmal hineinpassen, sodass der Agent deine echten Primitive wiederverwendet, statt einmalige Stile zu erfinden.
Konventionen in GEMINI.md: Eine GEMINI.md (plus der Figma MCP-Server) verweist den Agenten auf deine Tokens, Komponenten und echten Spezifikationen, sodass er gegen eine Marke statt gegen einen Standard-Look arbeitet.
Geschmack kommt aus drei Inputs, die du lieferst: ein Designsystem, ein Skill und echte Referenzbilder.
Die Lektion ist dieselbe, die jeder Agent lehrt: Gemini CLI hat standardmäßig keinen Geschmack. Es erzeugt gutes Design, wenn du ihm Einschränkungen gibst – ein Designsystem, einen ästhetischen Skill und konkrete Referenzen. OpenDesign bündelt genau diese Inputs, weshalb die beiden zusammenpassen (mehr unten).
Gemini CLI für Designarbeit von Grund auf einrichten
Die Einrichtungsreihenfolge: installieren → authentifizieren → GEMINI.md konfigurieren → einen Skill hinzufügen → Browser-Verifizierung aktivieren.
Halte deine Designregeln fest: Lege deine Tokens, Primitives und Konventionen in GEMINI.md ab und verweise Gemini darauf, damit die Ausgabe zu einer Marke passt, statt auf ein generisches Aussehen zurückzufallen.
Browser-Verifizierung hinzufügen: Verbinde ein Playwright- oder Browser-MCP, damit Gemini in einem echten Browser rendert und seine Ausgabe über Breakpoints hinweg prüft, statt nur zu bestätigen, dass der Build erfolgreich ist.
Verwende den aktuellen Einrichtungsabschnitt für Befehle und versionsspezifische Details, die sich ändern können.
Historisches Befehlsbeispiel aus dem vorherigen Leitfaden; prüfe die aktuelle Syntax in der verlinkten Herstellerdokumentation.
Halte deine Designregeln fest: Lege deine Tokens, Primitives und Konventionen in GEMINI.md ab und verweise Gemini darauf, damit die Ausgabe zu einer Marke passt, statt auf ein generisches Aussehen zurückzufallen.
Browser-Verifizierung hinzufügen: Verbinde ein Playwright- oder Browser-MCP, damit Gemini in einem echten Browser rendert und seine Ausgabe über Breakpoints hinweg prüft, statt nur zu bestätigen, dass der Build erfolgreich ist.
Verwende den aktuellen Einrichtungsabschnitt für Befehle und versionsspezifische Details, die sich ändern können.
# 1. Gemini CLI installieren (Node 20+)
npm install -g @google/gemini-cli
# oder ohne Installation ausführen: npx https://github.com/google-gemini/gemini-cli
# 2. Im Projekt starten und beim ersten Lauf authentifizieren
cd your-project
gemini # mit deinem Google-Konto anmelden oder GEMINI_API_KEY setzen
# 3. Projektkontext generieren
/init # erstellt eine GEMINI.md für dieses Projekt
# 4. Den Figma MCP-Server verbinden (optional, für Design-Übergabe)
# unter "mcpServers" in ~/.gemini/settings.json hinzufügenHistorisches Befehlsbeispiel aus dem vorherigen Leitfaden; prüfe die aktuelle Syntax in der verlinkten Herstellerdokumentation.
Screenshots mit Gemini CLI in UI verwandeln
Der wirkungsvollste Design-Loop mit Gemini CLI ist es, ein Referenzbild in eine funktionierende, responsive UI zu verwandeln und so lange zu iterieren, bis es passt – dabei stützt man sich auf das multimodale Modell, um die Ausgabe mit der Referenz zu vergleichen.
Beginne mit den klarsten visuellen Referenzen, die du hast – und beziehe mehrere Zustände ein (Desktop und Mobil, Hover, leer, Ladezustand), nicht nur einen Hero-Shot.
Sei im Prompt konkret; vage Prompts erzeugen generische UI, selbst mit einem starken Modell.
Halte dein Designsystem und deine Konventionen in GEMINI.md fest und sage Gemini, wo die Tokens und kanonischen Primitives liegen.
Starte einen Dev-Server und lass Gemini in einem echten Browser rendern, wobei es die Größe auf Breakpoints anpasst, um das Ergebnis zu prüfen.
Iteriere, indem du Gemini seine Implementierung mit den Screenshots vergleichen lässt – nicht nur bestätigen lässt, dass der Build erfolgreich ist.
Referenziere ein Bild mit @, um es an den Prompt anzuhängen, und gib dann konkrete Vorgaben:
Halte Prompts klein und fokussiert, committe gute Iterationen und mache schlechte rückgängig (sage Gemini, wenn du etwas rückgängig machst), damit jeder Durchlauf auf einer sauberen Basis aufbaut.
Historisches Befehlsbeispiel aus dem vorherigen Leitfaden; prüfe die aktuelle Syntax in der verlinkten Herstellerdokumentation.
Beginne mit den klarsten visuellen Referenzen, die du hast – und beziehe mehrere Zustände ein (Desktop und Mobil, Hover, leer, Ladezustand), nicht nur einen Hero-Shot.
Sei im Prompt konkret; vage Prompts erzeugen generische UI, selbst mit einem starken Modell.
Halte dein Designsystem und deine Konventionen in GEMINI.md fest und sage Gemini, wo die Tokens und kanonischen Primitives liegen.
Starte einen Dev-Server und lass Gemini in einem echten Browser rendern, wobei es die Größe auf Breakpoints anpasst, um das Ergebnis zu prüfen.
Iteriere, indem du Gemini seine Implementierung mit den Screenshots vergleichen lässt – nicht nur bestätigen lässt, dass der Build erfolgreich ist.
Referenziere ein Bild mit @, um es an den Prompt anzuhängen, und gib dann konkrete Vorgaben:
Halte Prompts klein und fokussiert, committe gute Iterationen und mache schlechte rückgängig (sage Gemini, wenn du etwas rückgängig machst), damit jeder Durchlauf auf einer sauberen Basis aufbaut.
gemini
# im Prompt:
> @reference-desktop.png @reference-mobile.png
Implementiere dieses Design in React + Vite + Tailwind + TypeScript.
Verwende meine vorhandenen Design-System-Komponenten und Tokens aus GEMINI.md wieder.
Passe Abstände, Layout und Hierarchie an; mache es responsive.
Rendere es im Browser und iteriere, bis es den Referenzen
über Breakpoints hinweg entspricht.Historisches Befehlsbeispiel aus dem vorherigen Leitfaden; prüfe die aktuelle Syntax in der verlinkten Herstellerdokumentation.
GEMINI.md, MCP-Server und Erweiterungen
Drei Erweiterungspunkte machen Gemini CLI für kontinuierliche Designarbeit praktikabel, und alle drei lassen sich sauber auf einen offenen Design-Workflow abbilden.
GEMINI.md-Kontext: Projektregeln liegen in einer GEMINI.md im Repo-Stamm (mit globalen und Team-Ebenen). Sie ist der dauerhafte Ort für Ihre Design-Konventionen und wird bei jedem Lauf gelesen.
MCP-Server: Konfigurieren Sie MCP-Server unter ~/.gemini/settings.json — der portable Weg, Designkontext und externe Tools einzubringen, am relevantesten der Figma MCP-Server, die agentenübergreifend funktionieren, nicht nur mit Gemini.
Erweiterungen und integrierte Tools: Gemini CLI-Erweiterungen und seine integrierten Tools für Google Search, Dateien, Shell und Web-Fetch ermöglichen es, Referenzen zu sammeln und die Verifikationsschleife auszuführen, ohne das Terminal zu verlassen.
Dies sind portable Multi-Agent-Fähigkeiten — genau die Art von Sache, für deren Orchestrierung OpenDesign gebaut ist, statt sie pro Projekt neu zu erstellen.
GEMINI.md-Kontext: Projektregeln liegen in einer GEMINI.md im Repo-Stamm (mit globalen und Team-Ebenen). Sie ist der dauerhafte Ort für Ihre Design-Konventionen und wird bei jedem Lauf gelesen.
MCP-Server: Konfigurieren Sie MCP-Server unter ~/.gemini/settings.json — der portable Weg, Designkontext und externe Tools einzubringen, am relevantesten der Figma MCP-Server, die agentenübergreifend funktionieren, nicht nur mit Gemini.
Erweiterungen und integrierte Tools: Gemini CLI-Erweiterungen und seine integrierten Tools für Google Search, Dateien, Shell und Web-Fetch ermöglichen es, Referenzen zu sammeln und die Verifikationsschleife auszuführen, ohne das Terminal zu verlassen.
Dies sind portable Multi-Agent-Fähigkeiten — genau die Art von Sache, für deren Orchestrierung OpenDesign gebaut ist, statt sie pro Projekt neu zu erstellen.
Gemini CLI vs. Codex vs. Claude Code vs. Cursor für Design
Es gibt keinen einzelnen Gewinner für Designarbeit — jeder Agent hat eine andere Stärke, und erfahrene Teams kombinieren sie. Eine faire Zusammenfassung:
Gemini CLI — Starkes multimodales Bildverständnis und ein 1M-Token-Kontext; Open Source mit einem kostenlosen Tarif — Arbeit mit vielen Screenshots und ein ganzes Designsystem im Kontext halten
Codex — Starke visuelle Politur mit einem Frontend-Skill; sandboxed-asynchrone Builds — Delegierte asynchrone Builds und portable AGENTS.md-Regeln
Claude Code — Spezifische Designentscheidungen (Hex, Abstände, Typografie) und codebase-bewusste UX — Frontend-Reasoning und Refactorings mit großem Kontext
Cursor — Visuelle Build-and-See-Schleife mit Live-Vorschau und Inline-Bearbeitungen — Dichtes Iterieren-und-Beobachten an UI-Arbeit innerhalb einer IDE
Das wiederkehrende Urteil der Community ist, dass Geschmack von Menschen kommt: Alle fallen ohne Skills, Referenzen und Einschränkungen auf eine generische Ästhetik zurück. Das ist das eigentliche Problem, das es zu lösen gilt — und es ist eher ein Design-Tool-Problem als ein Modell-Problem.
Agent — Design-Stärke — Am besten für
Gemini CLI — Starkes multimodales Bildverständnis und ein 1M-Token-Kontext; Open Source mit einem kostenlosen Tarif — Arbeit mit vielen Screenshots und ein ganzes Designsystem im Kontext halten
Codex — Starke visuelle Politur mit einem Frontend-Skill; sandboxed-asynchrone Builds — Delegierte asynchrone Builds und portable AGENTS.md-Regeln
Claude Code — Spezifische Designentscheidungen (Hex, Abstände, Typografie) und codebase-bewusste UX — Frontend-Reasoning und Refactorings mit großem Kontext
Cursor — Visuelle Build-and-See-Schleife mit Live-Vorschau und Inline-Bearbeitungen — Dichtes Iterieren-und-Beobachten an UI-Arbeit innerhalb einer IDE
Das wiederkehrende Urteil der Community ist, dass Geschmack von Menschen kommt: Alle fallen ohne Skills, Referenzen und Einschränkungen auf eine generische Ästhetik zurück. Das ist das eigentliche Problem, das es zu lösen gilt — und es ist eher ein Design-Tool-Problem als ein Modell-Problem.
Agent — Design-Stärke — Am besten für
Häufige Fallstricke und wie man den „AI slop“-Look vermeidet
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 geradezu „schreit, dass eine KI das gemacht hat“. Weitere gemeldete Probleme sind kaputte mobile Layouts und Anweisungen, die in UI-Texte durchsickern. Nichts davon ist einzigartig für Gemini CLI; es passiert, wenn irgendein Agent ohne kuratierten Designkontext läuft.
Einen Ästhetik-Skill hinzufügen: Ein kuratierter Design-Skill zwingt den Agenten, sich auf eine echte Richtung festzulegen, statt auf den Standard-Look.
In einem echten Browser verifizieren: Nutzen Sie das multimodale Modell, um über Breakpoints hinweg zu rendern und selbst zu prüfen, damit Layouts auf Mobilgeräten nicht stillschweigend kaputtgehen.
Tokens und Referenzen bereitstellen: Echte Design-Tokens und Referenz-Screenshots sind der größte einzelne Hebel für die Ausgabequalität.
Regeln in GEMINI.md kodieren: Legen Sie Stilregeln wie „keine Hero-Cards, maximal zwei Schriftarten, Brand-First-Hierarchie“ dort ab, wo der Agent sie bei jedem Lauf liest.
Beachten Sie, dass jede Gegenmaßnahme darauf hinausläuft, dem Agenten einen kuratierten Designkontext zu geben. Diesen Kontext pro Projekt manuell zu pflegen, ist die Mühsal, die OpenDesign beseitigt.
Einen Ästhetik-Skill hinzufügen: Ein kuratierter Design-Skill zwingt den Agenten, sich auf eine echte Richtung festzulegen, statt auf den Standard-Look.
In einem echten Browser verifizieren: Nutzen Sie das multimodale Modell, um über Breakpoints hinweg zu rendern und selbst zu prüfen, damit Layouts auf Mobilgeräten nicht stillschweigend kaputtgehen.
Tokens und Referenzen bereitstellen: Echte Design-Tokens und Referenz-Screenshots sind der größte einzelne Hebel für die Ausgabequalität.
Regeln in GEMINI.md kodieren: Legen Sie Stilregeln wie „keine Hero-Cards, maximal zwei Schriftarten, Brand-First-Hierarchie“ dort ab, wo der Agent sie bei jedem Lauf liest.
Beachten Sie, dass jede Gegenmaßnahme darauf hinausläuft, dem Agenten einen kuratierten Designkontext zu geben. Diesen Kontext pro Projekt manuell zu pflegen, ist die Mühsal, die OpenDesign beseitigt.
Gemini CLI als Agenten in OpenDesign verwenden
OpenDesign ist die Open-Source-Designschicht, nach der der obige Workflow ständig verlangt. Es behandelt Gemini CLI als First-Party-Adapter und umhüllt es mit einer kuratierten Skill- und Designsystem-Bibliothek, einer strukturierten Render-Pipeline und einer lokalen Desktop-UI – sodass der Designkontext, der Gemini gut macht, vom ersten Lauf an vorhanden ist und nicht jedes Mal von Hand zusammengesetzt werden muss. Beide sind Open Source und Local-First, was die Kombination naheliegend macht.
Authentifizieren Sie sich mit Ihrem Google-Konto oder Gemini-API-Schlüssel (BYOK) – die Anmeldedaten bleiben auf Ihrem Rechner und werden niemals über uns als Proxy geleitet.
Wählen Sie ein Designsystem und einen Skill und generieren Sie dann Decks, Prototypen und Landingpages mit konsistentem Geschmack.
Jedes Artefakt und jede DESIGN.md-Datei liegt in Ihrem eigenen Repo, nicht in einer gehosteten Cloud.
Derselbe Gemini-CLI-Agent, derselbe Schlüssel – plus ein echter, portabler, Open-Source-Design-Workflow drumherum. Es ist Local-First und Apache-2.0, sodass nichts an Ihrer Arbeit oder Ihren Anmeldedaten Ihren Rechner verlässt.
Installieren Sie OpenDesign und wählen Sie Gemini CLI als Ihren Agenten aus.
Authentifizieren Sie sich mit Ihrem Google-Konto oder Gemini-API-Schlüssel (BYOK) – die Anmeldedaten bleiben auf Ihrem Rechner und werden niemals über uns als Proxy geleitet.
Wählen Sie ein Designsystem und einen Skill und generieren Sie dann Decks, Prototypen und Landingpages mit konsistentem Geschmack.
Jedes Artefakt und jede DESIGN.md-Datei liegt in Ihrem eigenen Repo, nicht in einer gehosteten Cloud.
Derselbe Gemini-CLI-Agent, derselbe Schlüssel – plus ein echter, portabler, Open-Source-Design-Workflow drumherum. Es ist Local-First und Apache-2.0, sodass nichts an Ihrer Arbeit oder Ihren Anmeldedaten Ihren Rechner verlässt.
Installieren Sie OpenDesign und wählen Sie Gemini CLI als Ihren Agenten aus.
Ist OpenDesign mit Google verbunden?
Nein. OpenDesign ist unabhängig; Gemini ist eine Marke von Google.
Erste Designaufgabe mit Gemini CLI starten
Beginnen Sie mit einer kleinen Aufgabe, bewerten Sie den vollständigen Kreislauf und bringen Sie dann das echte Briefing mit. Wählen Sie die Setup-Option, die zu Ihnen passt; die Seite kann sie nicht erkennen.