102.7K+Télécharger
Gemini OpenDesign

Concevoir avec
Gemini dans
OpenDesign.

Comment concevoir des interfaces avec Gemini CLI dans OpenDesign : une photo de tableau blanc comme référence, GEMINI.md comme livre de règles, une tâche de tableau de bord opérationnel du brief au fichier revu, et les limites à connaître avant de commencer.

Télécharger OpenDesign Aller à la configuration

TROIS FAÇONS D'ENTRER DANS CE GUIDE DE GEMINI CLI

Choisissez votre point d'entrée dans Gemini CLI

CE GUIDE · CONCEPTION D'INTERFACE

Générer une interface produit avec Gemini CLI

Le parcours principal ici : un brief, des images de référence, des règles de design conservées en contexte, et un artefact HTML que vous révisez vous-même.

Lire ce guide CONFIGURATION

Configurer Gemini à partir de zéro

Partez d'une machine propre et allez jusqu'à un Gemini CLI capable de construire et de vérifier sa propre sortie d'interface utilisateur.

Accéder à la configuration COMPARAISON

Comparer Gemini à d'autres agents

Où les atouts multimodaux et de grand contexte de Gemini CLI se situent face à Codex, Claude Code et Cursor, et quand un autre flux de travail convient mieux.

Voir la comparaison
Sur cette page Exemple
  1. Exemple
  2. Adéquation
  3. Compatibilité
  4. Configuration
  5. Workflow
  6. Ressources
  7. Limites
  8. FAQ

Une tâche de design Gemini complète

Une tâche Gemini : du brief sur tableau blanc à l'interface rendue

Suivez une tâche sur toute sa boucle : le brief et les contraintes que vous confiez à Gemini, l'artefact qu'il renvoie, et les vérifications qui restent les vôtres avant de la déclarer terminée. L'interface ci-dessous est un exemple illustratif conçu pour cette page, et non une exécution Gemini enregistrée.

1Brief de conception et contraintes

Brief

Transformez la photo du tableau blanc ci-jointe en un tableau de bord opérationnel : quatre chiffres clés, un graphique de volume hebdomadaire et une file d'incidents. Un écran sur ordinateur, un résumé défilable sur téléphone.

  • Système de conceptionPaper canvas de OpenDesign : Albert Sans, un seul accent vert
  • Points de rupture1440px pour le bureau et 390px pour le mobile, sans défilement horizontal
  • InteractionsContrôle de plage de dates, filtres d'incidents et navigation au clavier dans la file
  • SortieUn fichier HTML autonome avec des points d'ancrage data-od-id stables

2Qui fait quoi : vous, Gemini CLI et OpenDesign

  • Vous

    Vous rédigez le brief, choisissez le système de design et définissez les critères d'acceptation.

  • Gemini

    Gemini CLI planifie la mise en page, écrit le HTML, le CSS et le JavaScript, puis révise sur demande.

  • OpenDesign

    OpenDesign fournit le système de design et la compétence, affiche l'aperçu et conserve chaque version sous forme de fichier dans le projet.

  • Révision

    Avant la livraison, vous vérifiez la hiérarchie visuelle, l'espacement sur la grille de 8px, les deux points de rupture et chaque interaction.

3L'artefact de Gemini : le tableau de bord opérationnel à 1440px et 390px

L'artefact de Gemini : le tableau de bord opérationnel à 1440px et 390px — Bureau
Exemple illustratif

4Vérification avant transmission

Mise en page

Grille et espacement

Les quatre cartes, le graphique et la file reposent tous sur une grille de 8px ; rien ne se chevauche à 1440 ou 390.

Hiérarchie

Hiérarchie visuelle

L'ordre de lecture suit les chiffres clés, puis le graphique, puis la file ; l'accent touche une seule barre et une seule pastille critique.

Réactif

Mise en page mobile

Sur mobile, deux chiffres par ligne, le graphique en dessous, la file sous forme de liste ; la plage de dates se replie en une feuille.

Interaction

Vérifications d'interaction

Changez la plage, filtrez sur critique uniquement, et parcourez la file avec les flèches du clavier.

Adéquation

Où Gemini CLI s'intègre à votre tâche de design — et où il ne le fait pas

Gemini convient quand

  • Capture d'écran multimodale → UI. La compréhension d'image de Gemini lit une capture de référence pour en faire du balisage réactif et peut comparer le rendu à cette référence.
  • Contexte de 1M de tokens. Un système de design complet, une bibliothèque de composants et un ensemble de références tiennent dans une seule fenêtre, de sorte que la sortie réutilise vos véritables primitives au lieu d'inventer des styles.
  • GEMINI.md + MCP. Le fichier de contexte GEMINI.md transporte vos conventions à chaque exécution ; le serveur MCP Figma importe le contexte de design réel dans le code.
  • Ouvert et gratuit pour commencer. Apache-2.0, avec un niveau gratuit généreux via un compte Google et BYOK via l'API Gemini.

Choisissez un autre workflow quand

  • Vous avez besoin de fichiers vectoriels modifiables. Ce qui revient est du HTML, pas un document de design modifiable. Envisagez un flux de travail vectoriel séparé si votre format d'actif l'exige.
  • Vous n'avez ni référence ni contraintes. Sans système de design ni exemples sur lesquels vous appuyer, Gemini tend vers un aspect générique ; rédigez le brief avant de générer.
  • Vous ne disposez pas des identifiants requis pour cet agent. Requis : compte Google (offre gratuite) ou clé API Gemini (à apporter vous-même). OpenDesign ne fournit ni ne relaie d'identifiants.
  • Votre équipe travaille dans Antigravity ou Claude Code. Ces agents ont leurs propres pages ; l'espace de travail lui-même ne change pas, mais la configuration si. Voir agents associés.

Compatibilité

Prérequis Gemini avant de commencer

Cette page traite Gemini comme un agent connecté via l'application de bureau OpenDesign. Les références publiées ont été vérifiées le 6 septembre 2026.

Périmètre de l'outilGemini, par Google

Google livre Gemini CLI en tant qu'agent IA de terminal open source (Apache-2.0). Il lit les bases de code, modifie les fichiers, exécute des commandes, récupère le Web et fonde ses réponses avec Google Search. Cette page se concentre sur la conception d'interfaces avec Gemini via OpenDesign, et non sur l'interface propre à Gemini. Les notes de configuration de OpenDesign listent les agents disponibles.

Comptes et authentificationCompte Google (niveau gratuit) ou API Gemini

Options d'authentification : un compte Google (niveau gratuit) ou une clé API Gemini (BYOK). Authentifiez-vous avec l'un ou l'autre ; les identifiants restent sur votre machine. Cette page ne promet aucun quota ni prix.

Système et versionsApplication de bureau ou source

Les versions de bureau apparaissent sur la page de téléchargement. Les prérequis Node.js et pnpm du guide de démarrage rapide source ne s'appliquent que lors d'une exécution depuis les sources, et non lors de l'installation d'un package de bureau. Version minimale compatible de Gemini : non vérifiée ici.

Vérification de la connexionLe signal de réussite

Utilisez les instructions de connexion affichées dans votre version installée, puis essayez une petite tâche. Confirmez que Gemini l'a traitée et que l'artefact s'ouvre. Un téléchargement en soi ne prouve pas une connexion fonctionnelle.

Commencez par l’application de bureau

Configuration de Gemini en trois étapes

Téléchargez d'abord l'application, effectuez la configuration de Gemini pour la version que vous avez installée, puis vérifiez un petit résultat. Ce parcours ne nécessite pas de compiler OpenDesign depuis les sources.

  1. 1

    Téléchargez l’application de bureau OpenDesign

    Sélectionnez le package pour votre ordinateur, installez-le et ouvrez l'application.

    Télécharger OpenDesign
    POINT DE CONTRÔLE
    L'application de bureau s'ouvre. Si elle est déjà installée, passez à l'étape suivante ; vous n'avez pas besoin de la télécharger à nouveau.
  2. 2

    Préparez votre connexion Gemini

    Suivez les instructions Gemini fournies avec votre version installée, y compris toute convention de contexte de projet GEMINI.md qu'elle utilise. Authentifiez-vous avec votre compte Google ou une clé API Gemini (BYOK) ; les identifiants restent sur votre machine.

    Documentation Gemini CLI 
    # 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

    Extrait des notes de configuration Gemini de ce guide publié ; vérifiez la commande actuelle dans la documentation du fournisseur.

    POINT DE CONTRÔLE
    Assurez-vous que l'agent et le compte correspondent à ce que vous vouliez. Si l'agent est indisponible, vérifiez la compatibilité avant de tenter une tâche plus importante.
  3. 3

    Exécutez une petite tâche Gemini

    Gardez le brief d'ouverture suffisamment modeste pour juger toute la boucle, une révision incluse.

    Brief de démarrage

    Créez un écran de paramètres avec un formulaire de profil et une confirmation de sauvegarde. Appliquez mes règles de design. Vérifiez-le aux largeurs ordinateur et mobile.

    POINT DE CONTRÔLE
    Ouvrez l'artefact, testez l'état de sauvegarde et demandez une modification spécifique. La révision commence par le fichier généré ; elle ne s'arrête pas là.

Si vous avez l'intention d'exécuter OpenDesign depuis les sources, utilisez plutôt le guide de démarrage rapide technique.

Le workflow de conception Gemini

Cinq étapes dans la boucle de design de Gemini

Un brief de tableau de bord opérationnel, retracé du premier prompt à un fichier vérifié. À chaque étape, vous voyez votre entrée, l'action de Gemini CLI, la contribution de OpenDesign et votre devoir de révision.

  1. 1

    Brief de design

    Restez simple et court : trois à six lignes. Dites qui utilise l'écran, ce qu'il doit faire et où il s'exécutera.

    • VousRédigez le brief vous-même, et utilisez @ pour joindre une capture d'écran de référence lorsque vous en avez une.
    • GeminiLit le brief ainsi que le GEMINI.md du projet ; si un détail est ambigu, il demande au lieu de deviner.
    • OpenDesignFournit le projet, la surface d'invite du terminal et la compétence adaptée au type d'artefact.
    • VérificationAssurez-vous que le brief nomme les critères d'acceptation. Les écrire maintenant coûte moins que de corriger un artefact terminé.
  2. 2

    Contraintes de design

    Un système de design plus quelques règles fermes. C'est la différence entre une sortie spécifique à la marque et un rendu générique par défaut.

    • VousChoisissez un système de design, puis nommez vos points de rupture et les composants qui doivent apparaître.
    • GeminiAvant d'écrire une ligne, il charge les tokens de DESIGN.md et les règles de posture de GEMINI.md dans le contexte.
    • OpenDesignLivre la bibliothèque du système de design et intègre le système choisi dans le modèle de compétence.
    • VérificationVérifiez que les tokens correspondent à la marque : un accent, les bonnes polices, le bon rayon.
  3. 3

    Générer l'interface

    Gemini CLI écrit un seul fichier HTML autonome, couvrant la mise en page, les styles, les interactions et des points d'ancrage stables.

    • VousAttendez, ou répondez à une question de clarification. Il n'y a rien à configurer ici.
    • GeminiIl planifie les sections, écrit le HTML, le CSS et le JavaScript, exécute le fichier et répare ce qui échoue.
    • OpenDesignEnregistre l'artefact dans le dossier du projet et l'indexe pour que l'aperçu puisse le trouver.
    • VérificationRien pour l'instant. Révisez le fichier après son rendu, pas en lisant sa source.
  4. 4

    Aperçu

    OpenDesign affiche le fichier aux largeurs que vous avez spécifiées. C'est le moment où le design est jugé.

    • VousModifiez les largeurs, testez les interactions et attachez des commentaires à des éléments précis.
    • GeminiGemini CLI lit vos commentaires depuis l'aperçu et prépare la passe suivante.
    • OpenDesignGénère l'aperçu et expose les cibles data-od-id afin que les commentaires et les modifications puissent pointer vers des éléments.
    • VérificationVérifiez la hiérarchie, le contraste, le débordement à 390px, les états de focus, et si l'accent reste parcimonieux.
  5. 5

    Réviser et vérifier

    Demandez des changements en pointant des éléments de l'aperçu. Chaque révision est un nouveau fichier ; rien n'est écrasé à votre insu.

    • VousConvertissez les commentaires en demandes de modification et décidez quand la tâche est terminée.
    • GeminiApplique les modifications sur place et relance le fichier.
    • OpenDesignConserve les versions côte à côte, puis exporte une image ou le HTML une fois que vous avez terminé.
    • VérificationVérifiez d'abord la zone modifiée, puis la page entière une fois à chaque point de rupture.

Ressources

Ressources de conception Gemini

Skills

Skills de design

Les types d'artefacts que Gemini CLI peut générer dans OpenDesign, avec une compétence associée à chaque type.

Parcourir les skills Systèmes de design

Design systems

Les tokens et composants du design system à lier avant que Gemini CLI ne produise la moindre sortie.

Parcourir les systèmes Modèles

Modèles

Des points de départ pour des présentations, des landing pages et des écrans produit dans le flux de travail Gemini CLI.

Parcourir les modèles

Limites

Limites de Gemini CLI, vérifications manuelles et solutions de repli

  • PortéeCette page traite de Gemini CLI en tant qu'agent connecté à OpenDesign, et non de toutes les fonctionnalités de Gemini lui-même.
  • Limites d'utilisationLes limites d'usage et le coût dépendent des identifiants utilisés — compte Google (offre gratuite) ou clé API Gemini (BYOK). Cette page ne promet rien quant aux quotas gratuits.
  • RéseauLes fichiers de projet locaux n'impliquent pas d'inférence hors ligne. Vérifiez les paramètres du fournisseur et les politiques de données de votre agent avant de partager des entrées sensibles.
  • La sortie est en HTMLLes artefacts sont des fichiers HTML, et non des documents de design vectoriels modifiables.
  • Revue manuelleL'accessibilité, le contenu réel, l'adéquation à la marque et l'exactitude des interactions sont à vérifier de votre côté dans l'aperçu. Considérez toute auto-vérification de Gemini CLI comme une première passe.
  • Solution de repliSi Gemini CLI est indisponible ou si une tâche échoue, revenez aux instructions de connexion et à l'authentification de la version installée. Conservez l'erreur et le dernier artefact fonctionnel avant de modifier la configuration.

FAQ

Questions fréquentes sur Gemini et OpenDesign

Gemini CLI peut-il produire du vrai travail de design ?
Oui — avec un skill esthétique, un design system et de véritables images de référence en contexte, Gemini CLI produit une interface responsive de qualité production, et ses modèles multimodaux puissants vérifient le résultat par rapport aux références. Sans ce contexte, il a tendance à revenir à un rendu générique, ce que OpenDesign vient combler.
Dois-je payer pour concevoir avec Gemini CLI ?
Non — se connecter avec un compte Google donne accès à un niveau gratuit généreux, et vous pouvez aussi fournir votre propre clé API Gemini (BYOK) ou utiliser Vertex AI. OpenDesign ne relaie jamais vos identifiants, quel que soit le cas.
Quels traits de Gemini CLI comptent le plus pour le design ?
Deux choses : ses modèles sont fortement multimodaux, ce qui lui permet de bien lire les captures d'écran de référence, et son contexte de 1M-token peut contenir tout un design system et un ensemble 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.
Choisir entre Gemini CLI et Claude Code pour le design frontend
Les deux sont solides. Claude Code est reconnu pour des décisions de design précises et conscientes du codebase ; l'atout de Gemini CLI est sa compréhension multimodale, un contexte immense et un niveau gratuit. De nombreuses équipes utilisent les deux — OpenDesign vous permet de changer d'agent sans modifier votre workflow de design.
Comment Gemini CLI se connecte-t-il à Figma ?
Ajoutez le serveur MCP Figma sous mcpServers dans ~/.gemini/settings.json. Gemini peut ensuite récupérer le véritable contexte de design — composants, variables, données de mise en page — afin que le code généré corresponde à la source plutôt que de l'approximer.
Ce qu'est Gemini CLI, en pratique
Gemini CLI est un agent IA open source (Apache-2.0) que Google fournit 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 — il planifie et vérifie son 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 dans VS Code.

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

Fichiers de contexte : Gemini CLI lit un fichier GEMINI.md pour le contexte de 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 se superposent.

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 palier gratuit généreux de requêtes Gemini ; vous pouvez aussi apporter une clé API Gemini ou utiliser Vertex AI.

Identifiant : compte Google (palier gratuit) ou clé API Gemini depuis AI Studio (BYOK) ou Vertex AI

Fournisseur : Google

Licence : Apache-2.0, open source
Pourquoi les modèles multimodaux et un contexte énorme conviennent au design
L'avantage de Gemini CLI en matière de design vient de deux propriétés du modèle — mais, comme pour tout agent, le goût doit encore être apporté de l'extérieur.

Une forte compréhension multimodale : Comme les modèles Gemini sont nativement multimodaux, l'agent lit bien les captures d'écran de référence — il compare sa sortie rendue à une image plutôt que de deviner à partir d'une description en prose.

Une fenêtre de contexte de 1M tokens : Un grand contexte signifie que tout le design system, les tokens et de nombreux états de référence tiennent d'un coup, si bien que l'agent réutilise vos vraies primitives au lieu d'inventer des styles jetables.

Des conventions dans GEMINI.md : Un GEMINI.md (plus le serveur MCP Figma) oriente l'agent vers vos tokens, vos composants et vos specs réelles, pour qu'il travaille d'après une marque plutôt que d'après un look par défaut.

Le goût vient de trois entrées que vous fournissez : un design system, une skill et de vraies images de référence.

La leçon est celle que tout agent enseigne : 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, une skill esthétique et des références concrètes. OpenDesign empaquette exactement ces entrées, d'où leur bonne adéquation (plus de détails ci-dessous).
Configurer Gemini CLI pour le travail de design à partir de zéro
La séquence de mise en place : installer → s'authentifier → configurer GEMINI.md → ajouter une skill → activer la vérification par navigateur.

Encodez vos règles de design : Placez vos tokens, vos primitives et vos conventions dans GEMINI.md et indiquez-les à Gemini, pour que la sortie corresponde à une marque au lieu de tomber par défaut dans un look générique.

Ajoutez une vérification par navigateur : Câblez un MCP Playwright ou navigateur pour que Gemini rende le résultat dans un vrai navigateur et vérifie sa sortie sur les différents breakpoints, au lieu de simplement confirmer que le build passe.

Utilisez la section de configuration actuelle pour les commandes et les détails propres à une version, qui peuvent changer.

# 1. Installer Gemini CLI (Node 20+) npm install -g @google/gemini-cli # ou exécuter sans installer : npx https://github.com/google-gemini/gemini-cli # 2. Le lancer dans votre projet et s'authentifier au premier lancement cd your-project gemini # connexion avec votre compte Google, ou définir GEMINI_API_KEY # 3. Générer le contexte de projet /init # génère un GEMINI.md pour ce projet # 4. Câbler le serveur MCP Figma (optionnel, pour le passage de relais design) # l'ajouter sous "mcpServers" dans ~/.gemini/settings.json
Exemple de commande historique issu du guide précédent ; vérifiez la syntaxe actuelle dans la documentation du fournisseur liée.
Transformer des captures d'écran en interface avec Gemini CLI
La boucle de design la plus rentable avec Gemini CLI consiste à transformer une image de référence en UI responsive fonctionnelle, puis à itérer jusqu'à ce qu'elle corresponde — en s'appuyant sur le modèle multimodal pour comparer la sortie à la référence.

Partez des références visuelles les plus claires dont vous disposez — et incluez plusieurs états (desktop et mobile, survol, vide, chargement), pas seulement une capture héro.

Soyez précis dans le prompt ; des prompts vagues produisent une UI générique, même avec un modèle puissant.

Gardez votre design system et vos conventions dans GEMINI.md, et indiquez à Gemini où se trouvent les tokens et les primitives canoniques.

Lancez un serveur de dev et faites rendre le résultat à Gemini dans un vrai navigateur, en redimensionnant aux breakpoints pour contrôler le rendu.

Itérez en demandant à Gemini de comparer son implémentation aux captures d'écran — pas seulement de confirmer que ça build.

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

Gardez des prompts courts et ciblés, committez les bonnes itérations et annulez les mauvaises (en le signalant à Gemini), pour que chaque passe reparte d'une base propre.

gemini # dans le prompt : > @reference-desktop.png @reference-mobile.png Implémente ce design en React + Vite + Tailwind + TypeScript. Réutilise mes composants et tokens de design system existants depuis GEMINI.md. Respecte les espacements, la mise en page et la hiérarchie ; rends-le responsive. Rends-le dans le navigateur et itère jusqu'à ce qu'il corresponde aux références sur tous les breakpoints.
Exemple de commande historique issu du guide précédent ; vérifiez la syntaxe actuelle dans la documentation du fournisseur liée.
GEMINI.md, serveurs MCP et extensions
Trois points d'extension rendent Gemini CLI pratique pour un travail de design suivi, et tous les trois s'intègrent proprement à un workflow de design ouvert.

Contexte GEMINI.md : Les règles de projet résident 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 sous ~/.gemini/settings.json — la façon portable d'apporter du contexte de design et des outils externes, au premier chef 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'OpenDesign 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 empilent. Un résumé honnête :

Gemini CLI — Forte compréhension multimodale des images et un contexte de 1M tokens ; open source avec un palier gratuit — Travail très orienté captures d'écran et maintien de tout un design system en contexte

Codex — Forte finition visuelle avec une skill frontend ; builds asynchrones en sandbox — Builds asynchrones délégués et règles AGENTS.md portables

Claude Code — Décisions de design précises (hex, espacements, typographie) et UX consciente du codebase — Raisonnement frontend et refactorings à grand contexte

Cursor — Boucle visuelle construire-et-voir avec aperçu en direct et éditions inline — Travail d'UI en itération-observation serrées à l'intérieur d'un IDE

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

Agent — Force en design — Idéal pour
Pièges courants et comment éviter le look « AI slop »
La plainte la plus fréquente à propos du design généré par IA est qu'il paraît générique — dégradés doux, panneaux flottants, coins arrondis surdimensionnés, ombres dramatiques, une ambiance Inter-et-violet qui « crie que c'est une IA qui a fait ça ». D'autres problèmes signalés incluent des mises en page mobiles cassées et des instructions qui fuient dans les textes de l'UI. Aucun n'est propre à Gemini CLI ; c'est ce qui arrive quand un agent tourne sans contexte de design soigné.

Ajoutez une skill esthétique : Une skill de design soignée force l'agent à s'engager dans une vraie direction au lieu du look par défaut.

Vérifiez dans un vrai navigateur : Utilisez le modèle multimodal pour rendre et auto-contrôler sur les différents breakpoints, afin que les mises en page ne cassent pas silencieusement sur mobile.

Fournissez tokens et références : De vrais tokens de design et des captures d'écran de référence constituent le plus grand levier unique sur la qualité de la sortie.

Encodez les règles dans GEMINI.md : Placez des règles du type « pas de hero cards, deux polices maximum, hiérarchie guidée par la marque » là où l'agent les lit à chaque exécution.

Remarquez que chaque parade consiste à donner à l'agent un contexte de design soigné. Maintenir ce contexte à la main, projet par projet, c'est le labeur dont OpenDesign vous décharge.
Utiliser Gemini CLI comme agent dans OpenDesign
OpenDesign est la couche de design open source que le workflow ci-dessus ne cesse de réclamer. Il traite Gemini CLI comme un adaptateur first-party et l'enveloppe dans une skill et une bibliothèque de design systems soignées, un pipeline de rendu structuré et une UI desktop locale — de sorte que le contexte de design qui rend Gemini bon est là dès le premier lancement, au lieu d'être assemblé à la main chaque fois. Les deux sont open source et local-first, ce qui rend le duo naturel.

Authentifiez-vous avec votre compte Google ou votre clé API Gemini (BYOK) — les identifiants restent sur votre machine et ne passent jamais par notre intermédiaire.

Choisissez un design system et une skill, puis générez des decks, des prototypes et des landing pages avec un goût cohérent.

Chaque artefact et 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 vrai workflow de design portable et open source autour. C'est local-first et Apache-2.0, donc rien de votre travail ni de vos identifiants ne quitte votre machine.

Installez OpenDesign et sélectionnez Gemini CLI comme agent.
OpenDesign est-il affilié à Google ?
Non. OpenDesign est indépendant ; Gemini est une marque déposée de Google.