Gemini CLI pour le design.

Ce qu’est réellement Gemini CLI

Gemini CLI est un agent IA open source (Apache-2.0) que Google propose pour le terminal. Il lit votre dépôt, modifie des fichiers, exécute des commandes shell, récupère des pages web et peut ancrer ses réponses avec Google Search — planifiant et vérifiant le travail à partir de tâches en langage naturel plutôt que de simplement compléter des lignes. Le même moteur alimente aussi l’agent Gemini Code Assist au sein de VS Code.

Pour le travail de design, deux propriétés se distinguent. Ses modèles sont nativement multimodaux : vous pouvez donc lui transmettre une capture d’écran et il raisonne sur la mise en page réelle. Et sa fenêtre de contexte atteint jusqu’à 1 M de tokens, assez grande pour contenir tout votre design system, votre bibliothèque de composants et votre jeu de références à la fois, au lieu de les résumer et de les perdre.

• Fichiers de contexte: Gemini CLI lit un fichier GEMINI.md pour le contexte projet persistant — l’endroit naturel pour encoder vos conventions de design, vos tokens et vos checklists de revue. Les réglages personnels et d’équipe viennent s’y superposer.
• Outils intégrés + MCP: Il fournit d’emblée des outils de fichiers, de shell, de récupération web et Google Search, et prend en charge les serveurs MCP (configurés dans ~/.gemini/settings.json) pour ajouter du contexte externe, comme un fichier Figma en direct.
• Gratuit pour démarrer: Se connecter avec un compte Google personnel donne un généreux palier gratuit de requêtes Gemini ; vous pouvez aussi apporter une clé API Gemini ou utiliser Vertex AI.

• Éditeur : Google
• Identifiant : compte Google (palier gratuit) ou clé API Gemini depuis AI Studio (BYOK) ou Vertex AI
• Licence : Apache-2.0, open source

Pourquoi les modèles multimodaux et un immense contexte conviennent au design

L’avantage de Gemini CLI pour le design vient de deux propriétés du modèle — mais, comme pour tout agent, le goût reste à fournir.

• Forte compréhension multimodale: Parce que les modèles Gemini sont nativement multimodaux, l’agent lit bien les captures d’écran de référence — comparant son rendu à une image plutôt que de deviner à partir d’une description en prose.
• Une fenêtre de contexte de 1 M de tokens: Un grand contexte signifie que tout le design system, les tokens et de nombreux états de référence tiennent à la fois, si bien que l’agent réutilise vos primitives réelles au lieu d’inventer des styles ponctuels.
• Des conventions dans GEMINI.md: Un GEMINI.md (plus le serveur MCP Figma) oriente l’agent vers vos tokens, vos composants et vos vraies specs, de sorte qu’il travaille pour une marque plutôt que sur un look par défaut.

La leçon est la même que celle de tout agent : Gemini CLI n’a pas de goût par défaut. Il produit du bon design quand vous lui donnez des contraintes — un design system, un skill esthétique et des références concrètes. Open Design empaquette précisément ces entrées, et c’est pourquoi les deux s’accordent (plus de détails ci-dessous).

Configurer Gemini CLI pour le travail de design, à partir de zéro

Voici le parcours complet d’une machine vierge jusqu’à un Gemini CLI capable de construire et de vérifier des interfaces.

# 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_KEY

# 3. Generate project context
/init             # scaffolds a GEMINI.md for this project

# 4. Wire the Figma MCP server (optional, for design handoff)
#    add it under "mcpServers" in ~/.gemini/settings.json

• Encoder vos règles de design: Placez vos tokens, vos primitives et vos conventions dans GEMINI.md et orientez Gemini vers eux, pour que le rendu corresponde à une marque au lieu de retomber sur un look générique.
• Ajouter la vérification dans le navigateur: Branchez un MCP Playwright ou navigateur pour que Gemini effectue son rendu dans un vrai navigateur et contrôle son résultat sur les différents points de rupture, au lieu de seulement confirmer que le build passe.

Le workflow capture d’écran vers interface

La boucle de design la plus rentable avec Gemini CLI consiste à transformer une image de référence en interface fonctionnelle et responsive, puis à itérer jusqu’à la correspondance — en s’appuyant sur le modèle multimodal pour comparer le rendu à la référence.

1. Partez des références visuelles les plus claires dont vous disposez — et incluez plusieurs états (ordinateur et mobile, survol, vide, chargement), pas seulement une image héro.
2. Soyez précis dans le prompt ; des prompts vagues produisent une interface générique, même avec un modèle puissant.
3. Gardez votre design system et vos conventions dans GEMINI.md, et indiquez à Gemini où se trouvent les tokens et les primitives canoniques.
4. Lancez un serveur de développement et faites effectuer le rendu à Gemini dans un vrai navigateur, en redimensionnant aux points de rupture pour vérifier le résultat.
5. Itérez en demandant à Gemini de comparer son implémentation aux captures d’écran — pas seulement de confirmer qu’elle compile.

Référencez une image avec @ pour la joindre au prompt, puis donnez des contraintes concrètes :

gemini
# in the prompt:
> @reference-desktop.png @reference-mobile.png
  Implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens from GEMINI.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the references
  across breakpoints.

Gardez des prompts courts et ciblés, validez les bonnes itérations et annulez les mauvaises (en prévenant Gemini quand vous annulez), pour que chaque passe s’appuie sur une base propre.

GEMINI.md, MCP et extensions

Trois points d’extension rendent Gemini CLI exploitable pour un travail de design durable, et tous trois s’appliquent proprement à un workflow de design ouvert.

• Contexte GEMINI.md: Les règles du projet vivent dans un GEMINI.md à la racine du dépôt (avec des couches globale et d’équipe). C’est le foyer durable de vos conventions de design, lu à chaque exécution.
• Serveurs MCP: Configurez les serveurs MCP dans ~/.gemini/settings.json — la manière portable d’apporter du contexte de design et des outils externes, et tout particulièrement le serveur MCP Figma, qui fonctionnent d’un agent à l’autre, pas seulement avec Gemini.
• Extensions et outils intégrés: Les extensions de Gemini CLI et ses outils intégrés Google Search, fichiers, shell et récupération web lui permettent de rassembler des références et d’exécuter la boucle de vérification sans quitter le terminal.

Ce sont des capacités portables et multi-agents — exactement le genre de chose qu’Open Design est conçu pour orchestrer, plutôt que de la recréer projet par projet.

Gemini CLI vs Codex vs Claude Code vs Cursor pour le design

Il n’y a pas de vainqueur unique pour le travail de design — chaque agent a une force différente, et les équipes expérimentées les combinent. Un résumé honnête :

Le verdict récurrent de la communauté est que le goût vient des humains : tous retombent sur une esthétique générique sans skills, références et contraintes. C’est le vrai problème à résoudre — et il a la forme d’un outil de design, pas d’un modèle.

Pièges, et comment éviter le rendu « bouillie IA »

Le reproche le plus courant fait au design généré par IA, c’est qu’il a l’air générique — dégradés doux, panneaux flottants, coins arrondis surdimensionnés, ombres spectaculaires, une ambiance Inter-et-violet qui « crie qu’une IA a fait ça ». Parmi les autres problèmes signalés : des mises en page mobiles cassées et des instructions qui s’infiltrent dans le texte de l’interface. Aucun de ces travers n’est propre à Gemini CLI ; c’est ce qui arrive quand un agent, quel qu’il soit, tourne sans contexte de design soigné.

• Ajouter un skill esthétique: Un skill de design soigné force l’agent à s’engager dans une vraie direction au lieu du look par défaut.
• Vérifier dans un vrai navigateur: Servez-vous du modèle multimodal pour effectuer le rendu et l’auto-contrôle sur les différents points de rupture, afin que les mises en page ne cassent pas silencieusement sur mobile.
• Fournir tokens et références: De vrais tokens de design et des captures d’écran de référence sont le plus grand levier sur la qualité du rendu.
• Encoder les règles dans GEMINI.md: Placez des règles du style « pas de cartes héro, deux polices au maximum, hiérarchie centrée sur la marque » là où l’agent les lit à chaque exécution.

Remarquez que chaque parade revient à donner à l’agent un contexte de design soigné. Maintenir ce contexte à la main, projet par projet, c’est précisément la corvée qu’Open Design supprime.

Concevoir avec Gemini CLI dans Open Design

Open Design est la couche de design open source que le workflow ci-dessus ne cesse de réclamer. Il traite Gemini CLI comme un adaptateur de première partie et l’enveloppe dans une bibliothèque sélectionnée de skills et de design systems, un pipeline de rendu structuré et une interface de bureau locale — de sorte que le contexte de design qui rend Gemini bon soit présent dès la première exécution, sans être assemblé à la main à chaque fois. Les deux sont open source et locaux d’abord, ce qui rend l’association naturelle.

1. Installez Open Design et sélectionnez Gemini CLI comme agent.
2. Authentifiez-vous avec votre compte Google ou votre clé API Gemini (BYOK) — les identifiants restent sur votre machine et ne transitent jamais par nos serveurs.
3. Choisissez un design system et un skill, puis générez des présentations, des prototypes et des landing pages avec un goût cohérent.
4. Chaque artefact et chaque fichier DESIGN.md vit dans votre propre dépôt, pas dans un cloud hébergé.

Le même agent Gemini CLI, la même clé — plus un véritable workflow de design portable et open source tout autour. C’est local d’abord et Apache-2.0, donc rien de votre travail ni de vos identifiants ne quitte votre machine.

Questions fréquentes

1. 01 Gemini CLI peut-il vraiment faire du travail de design ? +

   Oui — avec un skill esthétique, un design system et de vraies images de référence en contexte, Gemini CLI produit des interfaces responsives de qualité production, et ses puissants modèles multimodaux vérifient le rendu par rapport aux références. Sans ce contexte, il a tendance à retomber sur un look générique, et c’est l’écart que comble Open Design.

2. 02 Dois-je payer pour faire du design avec Gemini CLI ? +

   Non — se connecter avec un compte Google donne un généreux palier gratuit, et vous pouvez aussi apporter une clé API Gemini (BYOK) ou utiliser Vertex AI. Open Design ne fait transiter vos identifiants dans aucun cas.

3. 03 Qu’est-ce qui rend Gemini CLI bon pour le design en particulier ? +

   Deux choses : ses modèles sont fortement multimodaux, donc il lit bien les captures d’écran de référence, et son contexte de 1 M de tokens peut contenir tout un design system et un jeu de références à la fois. Les deux aident — mais le goût vient toujours du design system, du skill et des références que vous fournissez.

4. 04 Gemini CLI ou Claude Code pour le design frontend ? +

   Les deux sont solides. Claude Code est réputé pour des décisions de design précises et conscientes de la base de code ; l’avantage de Gemini CLI, c’est la compréhension multimodale plus un immense contexte et un palier gratuit. De nombreuses équipes utilisent les deux — Open Design vous permet de changer d’agent sans changer votre workflow de design.

5. 05 Comment connecter Gemini CLI à Figma ? +

   Ajoutez le serveur MCP Figma sous mcpServers dans ~/.gemini/settings.json. Gemini peut alors tirer un vrai contexte de design — composants, variables, données de mise en page — pour que le code généré corresponde à la source au lieu de l’approximer.

6. 06 Open Design est-il affilié à Google ? +

   Non. Gemini CLI est un produit de Google ; Open Design est un projet open source indépendant qui le prend en charge en tant qu’adaptateur de première partie. Gemini est une marque déposée de Google.

7. 07 Mes fichiers et mes identifiants sont-ils en sécurité ? +

   Oui — Open Design est local d’abord et Apache-2.0. Vos fichiers, vos artefacts et votre DESIGN.md restent dans votre propre dépôt, et vos identifiants Google sont utilisés directement par votre agent, jamais acheminés via les serveurs d’Open Design.