Jetzt starten

Gemini CLI ein Designsystem zuweisen

Das Kontextsystem von Gemini CLI ist das unmittelbarste aller Agenten: Es durchläuft eine Hierarchie von GEMINI.md-Dateien, fügt diese zusammen und sendet das Ergebnis mit jedem Prompt. Keine Matching-Heuristiken, kein On-Demand-Loading. Diese Direktheit ist ein Vorteil für Designarbeiten, da ein Design-Contract genau die Art von Information ist, die man jedes einzelne Mal geladen haben möchte.

Aktualisiert 2026-08-04

Wie Gemini CLI Kontext tatsächlich lädt

Drei Ebenen, die bei jedem Prompt in dieser Reihenfolge zusammengefügt werden. ~/.gemini/GEMINI.md enthält die globalen Standardwerte. Vom Startverzeichnis aus durchläuft die CLI den Pfad hoch bis zur Projekt-Root (der Ordner mit .git) und sammelt projektbezogene GEMINI.md-Dateien. Komponenten-Verzeichnisse können eigene Dateien für lokalen Kontext hinzufügen. Der Befehl /memory show gibt das zusammengesetzte Ergebnis wortgetreu aus, /memory refresh scannt nach Bearbeitungen erneut, und @file.md innerhalb einer GEMINI.md importiert eine weitere Datei (relative sowie absolute Pfade funktionieren).

In dieser Pipeline gibt es kein Relevance-Matching: Alles Gefundene wird immer geladen. Das hat zwei Seiten. Lange explorative Notizen gehören nicht in die GEMINI.md, aber ein Design-Contract schon, da Design jede UI-Anfrage betrifft und das Ausbleiben des Ladens genau zu dem Drift führt, den Sie hier beheben wollen.

Das Fehlerbild ohne Contract

Wenn man Gemini CLI bittet, über mehrere Sessions hinweg Screens ohne schriftlichen Contract zu erstellen, entscheidet es jedes Mal die visuelle Sprache neu: eine neue Akzentfarbe, leicht andere Abstände, eine andere Schriftkombination. Nicht weil das Modell schwach ist, sondern weil nichts seine früheren Entscheidungen persistiert. Der statistische Standardwert, auf den es zurückgreift, ist derselbe, den jedes Modell teilt – weshalb ungesteuerte KI-Apps oft zum gleichen Look konvergieren.

Consistency check · Ad-hoc colors

The same plan card, built two ways in Ambient Sage.

Drifting system

Pricing

Starter$19/mo

Everything a small team needs to ship a branded UI.

Consistent system

Pricing

Starter$19/mo

Everything a small team needs to ship a branded UI.

What to notice: Links: Komponenten aus separaten, ungesteuerten Sessions. Rechts: dieselben Anfragen mit geladenen Tokens eines Kits via GEMINI.md.

Das Setup

  1. 1

    Tokens eines Kits installieren

    Semantische CSS-Variablen oder ein Tailwind-Theme im Repo, sodass Token-Namen in reale Werte aufgelöst werden, die der Code nutzen kann.

  2. 2

    DESIGN.md an der Projekt-Root hinzufügen

    Das vollständige schriftliche System: Bedeutung jeder Farbrole, Typografie-Skala, Abstände, Motive und No-Go-Regeln. Dies ist die Datei, welche die Identität über Sessions hinweg bewahrt.

  3. 3

    Import in die projektbezogene GEMINI.md

    Ein Abschnitt, meist nur eine Importzeile. Die Hierarchie erledigt den Rest: Jeder Prompt im Projekt enthält nun den Contract.

  4. 4

    Verifizierung mit /memory show

    Einmal ausführen und die Ausgabe lesen. Wenn der Inhalt von DESIGN.md nicht enthalten ist, ist der Importpfad falsch – und kein Prompting der Welt kann beheben, was nie geladen wurde.

# Design system

@DESIGN.md

- Use only the semantic tokens defined above; never a literal hex
  value or an ad-hoc font.
- Type, spacing, and radii come from the scales in DESIGN.md.
- If a needed value has no token, stop and ask.
Der Design-Abschnitt einer projektbezogenen GEMINI.md.

Die globale Datei außen vor lassen

Design contracts are per-project by nature. Put the import in the project GEMINI.md, not ~/.gemini/GEMINI.md, or every repo you open inherits one product's brand.

Optional: MCP, damit Gemini Kits selbst anwenden kann

Gemini CLI unterstützt MCP-Server über ~/.gemini/settings.json. Mit einem registrierten Identity Forge-Server kann der Agent den Kit-Katalog durchsuchen, vollständige Token-Systeme lesen und DESIGN.md sowie Tokens als Tool-Call in das Repo schreiben, anstatt dass Sie die Dateien manuell zusammenstellen:

npx --yes identityforge@latest install --client gemini
Registriert den MCP-Server für Gemini CLI.

Eine vollständige DESIGN.md, bereit zum Import

Jedes Identity Forge Kit exportiert die Datei, auf der dieses Setup basiert: 28 semantische Tokens für Light- und Dark-Mode, Typografie, Spacing, Motive und Agent-Regeln.

Verfügt Gemini CLI über eine Designsystem-Funktion?

No native one. Its GEMINI.md context hierarchy is the mechanism: files load on every prompt, and the @file.md import syntax pulls a DESIGN.md straight into that context. Paired with installed tokens, it covers what a native feature would.

Wo wird die GEMINI.md platziert?

Drei Ebenen: ~/.gemini/GEMINI.md global, eine GEMINI.md im (oder über dem) Arbeitsverzeichnis für das Projekt sowie optionale Dateien pro Unterverzeichnis. Alle gefundenen Dateien werden in dieser Reihenfolge bei jedem Prompt zusammengeführt. Design-Regeln gehören auf die Projektebene.

Wie überprüfe ich, ob die Design-Regeln tatsächlich geladen wurden?

/memory show prints the exact concatenated context sent to the model; your DESIGN.md content should appear in it. After editing files, /memory refresh re-scans. This one check catches nearly every broken setup, usually a wrong import path.

Warum nicht das gesamte Designsystem direkt in die GEMINI.md kopieren?

It works, but it forks the truth: the system then lives in two places once you also need it for other agents or human docs. Keeping DESIGN.md as the single artifact and importing it with @DESIGN.md means every tool, and every teammate, reads the same file.

Kann Gemini CLI ein Identity Forge Kit anwenden?

Ja. Ohne MCP schreibt der CLI-Befehl identityforge apply <kit> die DESIGN.md und die Tokens in das Repository. Wenn der MCP-Server in ~/.gemini/settings.json registriert ist, kann Gemini Kits während einer Session selbstständig suchen, in der Vorschau anzeigen und anwenden.