POUR ALLER PLUS LOIN
Pour aller plus loin avec Gemini
Tutoriels, documentation et démonstrations pour concevoir avec Gemini, tels que répertoriés dans le guide publié.
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.
Du brief à l'interface01 / Gemini
VOUS APPORTEZ L'IDÉE↗
« D'une photo de tableau blanc
à un tableau de bord lisible. »
TROIS FAÇONS D'ABORDER CE GUIDE GEMINI
Choisissez par où commencer avec Gemini
CE GUIDE · CONCEPTION D'INTERFACE
Construire une interface produit avec Gemini
Ce guide : brief, références, règles de conception et un résultat HTML révisé.
Lire ce guide CONFIGURATIONConfigurer Gemini à partir de zéro
Voici le chemin complet, d'une machine vierge à un Gemini CLI capable de construire et de vérifier une UI.
Accéder à la configuration COMPARAISONComparer Gemini à d'autres agents
En quoi Gemini diffère de Codex, Claude Code, Cursor pour le travail de design, et quand choisir un autre workflow.
Voir la comparaisonSur cette page Exemple
Une tâche de design Gemini complète
Une tâche de design Gemini, du brief à l'interface
Une seule tâche, montrée de bout en bout : le brief et les contraintes que vous transmettez, l'artefact obtenu en retour, et les vérifications que vous effectuez encore avant que ce soit terminé. L'interface ci-dessous est un exemple illustratif conçu pour cette page, pas une exécution Gemini enregistrée.
1Brief de conception et contraintes
BriefConcevez un tableau de bord opérationnel à partir de la photo de tableau blanc jointe : quatre chiffres clés, un graphique de volume hebdomadaire et une file d'incidents. Un écran sur desktop, un résumé défilant sur téléphone.
- Système de conceptionToile papier OpenDesign : Albert Sans, un accent vert
- Points de rupture1440px pour le bureau et 390px pour le mobile, sans défilement horizontal
- InteractionsPlage de dates, filtres d'incidents, navigation au clavier dans la file
- SortieUn fichier HTML autonome avec des points d'ancrage
data-od-idstables
2Répartition du travail : vous, Gemini et OpenDesign
- Vous
Rédigez le brief, sélectionnez le système de conception et définissez les critères d'acceptation.
- Gemini
Planifie la mise en page, écrit le HTML, le CSS et le JavaScript et le révise sur demande.
- OpenDesign
Fournit le système de conception et le skill, génère l'aperçu et enregistre chaque version comme un fichier dans le projet.
- Révision
La hiérarchie visuelle, l'espacement sur la grille de 8px, les deux points de rupture et chaque interaction sont vérifiés avant la remise.
3Artefact Gemini : le tableau de bord des opérations en 1440px et 390px
4Vérification avant transmission
Mise en page
Grille et espacement
Les quatre cartes, le graphique et la file partagent une seule grille de 8px ; rien ne se superpose à 1440 ou 390.
Hiérarchie
Hiérarchie visuelle
Les chiffres clés se lisent en premier, puis le graphique, puis la file ; l'accent marque une barre et une pastille critique.
Réactif
Mise en page mobile
Deux chiffres par ligne, graphique en dessous, file sous forme de liste ; la plage de dates se replie dans une feuille.
Interaction
Vérifications d'interaction
Changez la plage, filtrez sur critique, parcourez la file avec les flèches.
Adéquation
Quand Gemini convient à la tâche, et quand il ne convient pas
Gemini convient quand
- Capture d'écran multimodale → UI. Une compréhension d'image poussée transforme une image de référence en balisage responsive et vérifie le résultat par rapport à celle-ci.
- Contexte de 1M-token. Un design system, une bibliothèque de composants et un ensemble de références complets tiennent en une seule fois, si bien que le résultat réutilise vos primitives réelles.
- GEMINI.md + MCP. Les fichiers de contexte transmettent vos conventions ; le serveur MCP Figma apporte un contexte de conception réel dans le code.
- Ouvert et gratuit pour commencer. Apache-2.0 et un généreux niveau gratuit via un compte Google, avec BYOK via l'API Gemini.
Choisissez un autre workflow quand
- Vous avez besoin de fichiers vectoriels modifiables. Le livrable est du HTML, pas un document de design modifiable. Vérifiez un workflow vectoriel distinct pour le format d'asset requis.
- Vous n'avez ni référence ni contrainte. Sans design system ni exemples, le résultat tend vers un aspect générique ; rédigez d'abord le brief.
- 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 est le même, la configuration diffère. Voir agents associés.
Compatibilité
Prérequis Gemini avant de commencer
Ce guide couvre Gemini tel que connecté via l'application de bureau OpenDesign. Références publiées vérifiées le 6 septembre 2026.
Périmètre de l'outilGemini, par Google
Gemini CLI est l'agent IA de terminal open source (Apache-2.0) de Google. Il lit votre base de code, modifie des fichiers, exécute des commandes, récupère des données sur le web et ancre ses réponses dans Google Search. Cette page traite de la conception d'interfaces avec Gemini via OpenDesign, pas de l'interface propre à Gemini. Les notes d'installation d'OpenDesign répertorient les agents disponibles.
Comptes et authentificationCompte Google (niveau gratuit) ou API Gemini
Compte Google (niveau gratuit) ou clé API Gemini (BYOK). Authentifiez-vous avec votre compte Google ou votre clé API Gemini (BYOK) — les identifiants restent sur votre machine. Cette page ne garantit ni quota ni tarif.
Système et versionsApplication de bureau ou source
Consultez la page de téléchargement pour les versions de bureau. Les exigences Node.js et pnpm du quickstart source s'appliquent à l'exécution depuis les sources, pas à l'installation d'un paquet de bureau. Version minimale compatible de Gemini : non vérifiée ici.
Vérification de la connexionLe signal de réussite
Suivez les instructions de connexion affichées par votre version installée, puis exécutez une petite tâche. Vérifiez que Gemini l'a traitée et que le produit s'ouvre. Un téléchargement seul n'établit pas une connexion fonctionnelle.
Commencez par l’application de bureau
Configuration de Gemini en trois étapes
Téléchargez d'abord, terminez la configuration de Gemini pour votre version installée, puis vérifiez un petit résultat. Vous n'avez pas besoin de compiler OpenDesign depuis les sources pour suivre ce parcours.
- 1
Téléchargez l’application de bureau OpenDesign
Choisissez le paquet adapté à votre ordinateur, installez-le et ouvrez l’application.
Télécharger OpenDesignPOINT DE CONTRÔLEL'application de bureau s'ouvre. Déjà installée ? Passez à l'étape suivante ; il n'est pas nécessaire de la télécharger à nouveau. - 2
Préparez votre connexion Gemini
Suivez les instructions Gemini de votre version installée. Authentifiez-vous avec votre compte Google ou votre 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_KEYD'après les notes d'installation Gemini du guide publié ; consultez la documentation du fournisseur pour la commande actuelle.
POINT DE CONTRÔLEConfirmez l'agent et le compte prévus. S'il n'est pas disponible, vérifiez la compatibilité avant de tenter une tâche plus importante. - 3
Exécutez une petite tâche Gemini
Utilisez un petit brief afin de pouvoir juger l’ensemble du cycle, y compris une révision.
Brief de démarrageCréez un écran de paramètres avec un formulaire de profil et une confirmation d'enregistrement. Utilisez mes règles de design. Vérifiez-le aux largeurs bureau et mobile.
POINT DE CONTRÔLEOuvrez le résultat, testez l'état de sauvegarde et demandez une modification précise. Un fichier généré est le début de la revue, pas la fin.
Pour exécuter OpenDesign depuis les sources, suivez plutôt le guide de démarrage technique.
Le workflow de conception Gemini
Le workflow de conception Gemini en cinq étapes
La même tâche de tableau de bord opérationnel, suivie du brief au fichier vérifié. Chaque étape indique ce que vous fournissez, ce que fait Gemini, ce qu'apporte OpenDesign et ce que vous vérifiez.
- 1
Brief de design
Langage simple, trois à six lignes. Nommez l'audience, la fonction de l'écran et les plateformes.
- VousRédigez le brief ; joignez une capture d'écran de référence si vous en avez une.
- GeminiLit le brief et le fichier d'instructions du projet ; pose des questions en cas d'ambiguïté.
- OpenDesignFournit le projet, la surface de prompt et le skill correspondant au type d'artefact.
- VérificationConfirmez que le brief énonce les critères d'acceptation. Les ajouter maintenant coûte moins cher qu'après la génération.
- 2
Contraintes de design
Un design system et quelques règles strictes. C'est ce qui distingue un résultat conforme à votre marque d'un rendu générique.
- VousChoisissez un design system ; indiquez les points de rupture et les composants à utiliser obligatoirement.
- GeminiCharge les tokens et règles de posture de DESIGN.md dans le contexte avant d'écrire la moindre ligne.
- OpenDesignFournit la bibliothèque de design systems et associe celui choisi au modèle du skill.
- VérificationLes tokens correspondent à votre marque. Un accent unique, les bonnes polices, le bon rayon.
- 3
Générer l'interface
Gemini écrit un fichier HTML autonome : mise en page, styles, interactions et points d'ancrage stables.
- VousAttendez, ou répondez à une question de clarification. Rien à configurer.
- GeminiPlanifie les sections, écrit le HTML, le CSS et le JavaScript, exécute le fichier et corrige ce qui échoue.
- OpenDesignEnregistre l'artefact dans le dossier du projet et l'indexe pour l'aperçu.
- VérificationRien pour l'instant. Jugez le fichier une fois rendu, pas depuis la source.
- 4
Aperçu
Le fichier s'affiche dans OpenDesign aux largeurs que vous avez demandées. C'est ici que le design est évalué.
- VousChangez de largeur, parcourez les interactions, laissez des commentaires sur les éléments.
- GeminiLit vos commentaires sur l'aperçu et prépare la révision suivante.
- OpenDesignAffiche l'aperçu, expose des cibles
data-od-idpour les commentaires et les modifications. - VérificationHiérarchie, contraste, débordement à 390px, états de focus, et si l'accent est utilisé avec parcimonie.
- 5
Réviser et vérifier
Demandez des modifications en pointant les éléments dans l'aperçu. Chaque révision est un nouveau fichier ; rien n'est écrasé silencieusement.
- VousTransformez les commentaires en demandes ; décidez quand la tâche est terminée.
- GeminiApplique les modifications sur place et réexécute le fichier.
- OpenDesignConserve les versions côte à côte ; exporte une image ou le HTML une fois terminé.
- VérificationRevérifiez uniquement la zone modifiée, puis toute la page une fois à chaque point de rupture.
Ressources
Ressources de conception Gemini
Skills Parcourir les skills Systèmes de design Parcourir les systèmes Modèles Parcourir les modèles
Skills de design
Les types d'artéfacts que Gemini peut produire dans OpenDesign, un skill par type.
Design systems
Tokens de marque et composants à lier avant que Gemini ne génère quoi que ce soit.
Modèles
Points de départ pour des présentations, des pages d'atterrissage et des écrans produit.
Limites
Limites de Gemini, vérifications manuelles et solutions de repli
- PortéeCette page couvre Gemini en tant qu'agent connecté à OpenDesign, pas l'ensemble des fonctionnalités de Gemini.
- Limites d'utilisationLes limites d'utilisation et les coûts dépendent des identifiants que vous utilisez (compte Google (niveau gratuit) ou clé API Gemini). Cette page n'affirme rien concernant les quotas gratuits.
- RéseauDes fichiers de projet locaux ne signifient pas une inférence hors ligne. Vérifiez les paramètres du fournisseur et les politiques de données de votre agent avant de partager des informations sensibles.
- La sortie est en HTMLLes artefacts sont des fichiers HTML, pas des fichiers de design vectoriels.
- Revue manuelleL'accessibilité, le contenu réel, l'adéquation à la marque et la justesse des interactions sont vérifiés par vous dans l'aperçu. Considérez toute autovérification de l'agent comme une première passe.
- Solution de repliSi l'agent est indisponible ou qu'une tâche échoue, vérifiez les 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 vraiment faire du 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.
Qu'est-ce qui rend Gemini CLI particulièrement adapté au 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.
Gemini CLI ou 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 connecter Gemini CLI à 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.
Démarrer une première tâche de design avec Gemini
Commencez par une petite tâche, évaluez l'aller-retour, puis apportez le véritable brief. Choisissez l'option correspondant à votre configuration ; la page ne la détecte pas.