Commencer

Intégrer un design system à Gemini CLI

Le système de contexte de Gemini CLI est le plus littéral de tous les agents : il parcourt une hiérarchie de fichiers GEMINI.md, les concatène et envoie le résultat avec chaque prompt. Pas d'heuristiques de correspondance, pas de chargement à la demande. Cette approche directe est un avantage pour le travail de design, car un contrat de design est précisément le type d'élément que l'on souhaite charger systématiquement.

Mis à jour 2026-08-04

Comment Gemini CLI charge réellement le contexte

Trois niveaux, concaténés dans l'ordre à chaque prompt. ~/.gemini/GEMINI.md contient vos paramètres par défaut globaux. À partir du répertoire de lancement, le CLI remonte jusqu'à la racine du projet (le dossier contenant .git) en collectant les fichiers GEMINI.md du projet. Les répertoires de composants peuvent ajouter les leurs pour apporter un contexte local. La commande /memory show affiche le résultat assemblé tel quel, /memory refresh relance l'analyse après modification, et @file.md à l'intérieur de tout fichier GEMINI.md permet d'importer un autre fichier, via un chemin relatif ou absolu.

Il n'y a aucune analyse de pertinence dans ce pipeline : tout ce qui est trouvé est systématiquement chargé. C'est un couteau à double tranchant. Les longues notes exploratoires n'ont pas leur place dans GEMINI.md, mais un contrat de design y a tout à fait sa place, car le design s'applique à chaque requête d'UI et le risque lié à son absence est précisément la dérive que vous cherchez à corriger.

Le risque en l'absence de contrat

Demandez à Gemini CLI de créer des écrans sur plusieurs sessions sans contrat écrit et il redéfinira le langage visuel à chaque fois : une nouvelle couleur d'accentuation, un espacement légèrement différent, un autre duo de polices. Non pas parce que le modèle est limité, mais parce que rien ne pérennise ses choix précédents. Le défaut statistique vers lequel il revient est le même pour tous les modèles, c'est pourquoi les applications IA non guidées convergent vers le même aspect visuel.

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: À gauche : composants issus de sessions distinctes non guidées. À droite : mêmes requêtes avec les tokens d'un kit chargés via GEMINI.md.

La configuration

  1. 1

    Installer les tokens d'un kit

    Variables CSS sémantiques ou thème Tailwind dans le dépôt, afin que les noms de tokens correspondent à des valeurs réelles utilisables par le code.

  2. 2

    Ajouter DESIGN.md à la racine du projet

    Le système écrit complet : signification de chaque rôle de couleur, échelle typographique, espacements, motifs et règles d'interdiction. C'est ce fichier qui assure la continuité de l'identité entre les sessions.

  3. 3

    L'importer depuis le GEMINI.md du projet

    Une seule section, principalement une ligne d'import. La hiérarchie s'occupe du reste : chaque prompt du projet transporte désormais le contrat.

  4. 4

    Vérifier avec /memory show

    Exécutez la commande une fois et lisez le résultat. Si le contenu de DESIGN.md n'y figure pas, le chemin d'import est erroné, et aucun prompt ne pourra corriger un élément qui n'a jamais été chargé.

# 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.
La section design d'un fichier GEMINI.md de projet.

Ne pas utiliser le fichier global

Les contrats de design sont par nature propres à chaque projet. Placez l'importation dans le fichier GEMINI.md du projet, et non dans ~/.gemini/GEMINI.md, sinon chaque dépôt ouvert héritera de l'identité visuelle d'un seul produit.

Optionnel : MCP, pour que Gemini puisse appliquer les kits lui-même

Gemini CLI prend en charge les serveurs MCP via ~/.gemini/settings.json. Une fois le serveur Identity Forge enregistré, l'agent peut effectuer des recherches dans le catalogue du kit, lire des systèmes de tokens complets et écrire le fichier DESIGN.md ainsi que les tokens dans le repo via un appel d'outil, vous évitant ainsi d'assembler les fichiers manuellement :

npx --yes identityforge@latest install --client gemini
Enregistre le serveur MCP pour Gemini CLI.

Un fichier DESIGN.md complet, prêt à être importé

Chaque kit Identity Forge exporte le fichier dont dépend cette configuration : 28 tokens sémantiques en modes clair et sombre, la typographie, l'espacement, les motifs et les règles pour l'agent.

Gemini CLI dispose-t-il d'une fonctionnalité de design system ?

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.

Où placer le fichier GEMINI.md ?

Trois niveaux : ~/.gemini/GEMINI.md globalement, un GEMINI.md à la racine (ou au-dessus) de votre répertoire de travail pour le projet, et des fichiers optionnels par sous-répertoire. Tous les fichiers trouvés sont concaténés dans cet ordre à chaque prompt. Les règles de design doivent se trouver au niveau du projet.

Comment vérifier que les règles de design sont bien chargées ?

/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.

Pourquoi ne pas coller l'intégralité du design system directement dans GEMINI.md ?

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.

Gemini CLI peut-il appliquer un kit Identity Forge ?

Oui. Sans MCP, la commande CLI identityforge apply <kit> écrit le fichier DESIGN.md et les tokens dans le repo. Avec le serveur MCP enregistré dans ~/.gemini/settings.json, Gemini peut rechercher, prévisualiser et appliquer les kits lui-même durant une session.