POUR ALLER PLUS LOIN
Pour aller plus loin avec Antigravity
Tutoriels, documentation et guides pas à pas pour le travail de design avec Antigravity, comme détaillé dans le guide publié.
Antigravity 
OpenDesign Concevoir avec
Antigravity dans
OpenDesign.
Comment concevoir des interfaces avec Antigravity dans OpenDesign : des captures d’écran comme entrée, le navigateur intégré vérifiant chaque passe, une tâche de flux d’inscription du brief au fichier révisé, et les limites à connaître avant de commencer.
TROIS ROUTES DANS CE GUIDE ANTIGRAVITY
Choisissez un point de départ pour Antigravity
CE GUIDE · CONCEPTION D'INTERFACE
Construire une interface produit avec Antigravity
Ce parcours couvre le brief, les références, les règles de conception et un artefact HTML révisé.
Lire ce guide CONFIGURATIONConfigurer Antigravity depuis zéro
Le parcours complet, d'une installation propre à un agent Antigravity qui construit et vérifie l'UI.
Accéder à la configuration COMPARAISONComparer Antigravity avec d’autres agents
Comment Antigravity se compare à Codex, Claude Code et Cursor pour le travail de conception, et quand un autre workflow est le meilleur choix.
Voir la comparaisonSur cette page Exemple
Une tâche de design Antigravity complète
Une tâche de conception Antigravity : du brief à l'interface
Une tâche suivie du transfert à la vérification finale : le brief et les contraintes que vous donnez à Antigravity, l'artefact qu'il renvoie, et la revue qu'il vous reste à faire avant de la déclarer terminée. L'interface ci-dessous est un exemple illustratif créé pour cette page, et non une exécution Antigravity enregistrée.
1Brief de conception et contraintes
BriefConcevez une inscription à un produit d'équipe en trois étapes : compte, espace de travail, invitation de coéquipiers. Avant le transfert, vérifiez chaque étape dans le navigateur intégré aux largeurs bureau et téléphone.
- Système de conceptionOpenDesign canevas papier — Albert Sans, un seul accent vert
- Points de rupture1440px bureau, 390px mobile, sans défilement horizontal
- InteractionsNavigation par étapes, validation en ligne, un chemin pour ignorer l'invitation, et l'ordre de focus clavier
- SortieUn seul fichier HTML autonome avec des points d'accroche stables
data-od-id
2Qui fait quoi : vous, Antigravity et OpenDesign
- Vous
Vous rédigez le brief, choisissez le système de conception et définissez les critères d'acceptation.
- Antigravity
Antigravity 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 conception et la compétence, génère l'aperçu et conserve chaque version comme fichier de projet.
- Révision
Avant le transfert, la hiérarchie visuelle, l'espacement sur la grille de 8px, les deux points de rupture et chaque interaction sont vérifiés.
3Artefact Antigravity : parcours d'inscription à 1440px et 390px
4Vérification avant transmission
Mise en page
Grille et espacement
Le stepper, le formulaire et le résumé s'alignent sur la grille de 8px ; le résumé ne dépasse jamais la hauteur du formulaire.
Hiérarchie
Hiérarchie visuelle
L'ordre se lit : étape actuelle, puis question, puis champs ; seule l'étape actuelle porte l'accent.
Réactif
Mise en page mobile
Sur mobile, le stepper se compresse en points avec le libellé actuel ; le résumé se réduit à une seule ligne de total.
Interaction
Vérifications d'interaction
Testez le retour à une étape précédente, le déclenchement d'une erreur de validation et le saut de l'étape d'invitation.
Adéquation
Où Antigravity convient — et où il ne convient pas
Antigravity convient quand
- Capture d'écran multimodale → UI. Avec la compréhension d'image de Gemini 3.x, une image de référence devient un balisage responsive que l'agent vérifie par rapport à l'original.
- Vérification par navigateur intégré. Les agents Antigravity pilotent un navigateur intégré, rendent l'UI sur plusieurs points de rupture et capturent le résultat sous forme d'artefacts.
- Vue Éditeur + Surface Gestionnaire. Travaillez dans la vue Éditeur pour le code pratique, ou utilisez la Surface Gestionnaire pour orchestrer plusieurs agents de manière asynchrone.
- Gratuit pour commencer. L'aperçu public ne coûte rien aux particuliers et offre de généreuses limites de débit Gemini 3.x via un compte Google.
Choisissez un autre workflow quand
- Vous avez besoin de fichiers vectoriels modifiables. L'artefact d'Antigravity est du HTML, pas un document de conception modifiable. Tournez-vous vers un workflow vectoriel distinct pour le format d'actif dont vous avez besoin.
- Vous n'avez ni référence ni contraintes. Sans système de conception ni exemples, le résultat tend vers un aspect générique ; commencez par rédiger le brief.
- Il vous manque l'identifiant requis par cet agent. Nécessaire : compte Google (Gmail personnel), gratuit en aperçu public. OpenDesign ne fournit ni ne proxifie les identifiants.
- Votre équipe travaille dans Cursor ou Kiro. Ces agents ont leurs propres pages ; la configuration change d'un agent à l'autre. Voir agents associés.
Compatibilité
Prérequis Antigravity avant de commencer
Cette page couvre Antigravity connecté via l'application de bureau OpenDesign. Références vérifiées le 6 septembre 2026.
Périmètre de l'outilAntigravity, par Google
Antigravity est la plateforme de développement agent-first de Google : un IDE propulsé par l’IA dans lequel des agents autonomes opèrent dans l’éditeur, le terminal et un navigateur intégré. Elle est arrivée en aperçu public aux côtés de Gemini 3. L’objectif ici est de concevoir des interfaces avec Antigravity via OpenDesign, et non l’interface propre d’Antigravity. Les notes de configuration d’OpenDesign nomment les agents disponibles.
Comptes et authentificationCompte Google (Gmail personnel), gratuit pendant
l’aperçu public. Authentifiez-vous avec votre compte Google — les identifiants restent sur votre machine. Cette page ne promet ni quota ni prix.
Système et versionsApplication de bureau ou source
Pour les versions de bureau, consultez la page de téléchargement. Les exigences Node.js et pnpm du démarrage rapide depuis les sources s’appliquent lorsque vous exécutez depuis les sources, pas lorsque vous installez un paquet de bureau. Version minimale compatible d’Antigravity : non vérifiée ici.
Vérification de la connexionLe signal de réussite
Utilisez les instructions de connexion affichées par votre version installée, puis essayez une petite tâche. Vérifiez qu’Antigravity l’a traitée et que l’artefact s’ouvre. Le téléchargement à lui seul ne prouve pas une connexion fonctionnelle.
Commencez par l’application de bureau
Configuration d’Antigravity en trois étapes
Commencez par le téléchargement, terminez la configuration d’Antigravity pour votre version installée, puis testez un petit résultat. Suivre ce parcours ne nécessite pas de compiler OpenDesign depuis les sources.
- 1
Téléchargez l’application de bureau OpenDesign
Sélectionnez le paquet correspondant à votre machine, installez-le et lancez l’application.
Télécharger OpenDesignPOINT DE CONTRÔLEL’application de bureau s’ouvre. Si elle est déjà installée, passez à l’étape suivante ; aucun second téléchargement n’est nécessaire. - 2
Préparez votre connexion Antigravity
Utilisez les instructions Antigravity fournies avec votre version installée. Connectez-vous avec votre compte Google — les identifiants restent sur votre machine.
# 1. Download Antigravity for your OS (macOS, Windows, Linux) # from the official download page: antigravity.google/download # 2. Launch it and sign in agy # opens Antigravity; sign in with your Google account # 3. Accept the data-use policy, pick a theme, and open your project folderExtrait des notes de configuration d’Antigravity du guide publié ; vérifiez la commande actuelle dans la documentation du fournisseur.
POINT DE CONTRÔLEVérifiez l’agent et le compte que vous vouliez utiliser. Si l’un des deux est indisponible, consultez la compatibilité avant de tenter une tâche plus importante. - 3
Exécutez une petite tâche Antigravity
Gardez le brief initial modeste pour pouvoir juger la boucle complète, y compris une révision.
Brief de démarrageConstruis un écran de paramètres avec un formulaire de profil et une confirmation d’enregistrement. Applique mes règles de design. Vérifie-le aux largeurs bureau et mobile.
POINT DE CONTRÔLEOuvrez le résultat, testez l’état d’enregistrement et demandez une modification précise. La génération lance la revue ; elle ne l’achève pas.
Si vous souhaitez exécuter OpenDesign depuis les sources, utilisez plutôt le démarrage rapide technique.
Le workflow de conception Antigravity
La boucle de design en cinq étapes d’Antigravity
Un travail de parcours d’inscription suivi du premier brief jusqu’à un artefact HTML vérifié. À chaque étape : votre contribution, l’action d’Antigravity, le rôle d’OpenDesign et la vérification qui vous incombe toujours.
- 1
Brief de design
Trois à six phrases simples. Identifiez à qui l’écran s’adresse, ce qu’il doit accomplir et quelles plateformes comptent.
- VousRédigez le brief. Si une capture de référence existe, joignez-la.
- AntigravityAnalyse le brief ainsi que le fichier d’instructions du projet, et pose des questions sur tout élément ambigu.
- OpenDesignFournit le projet, la surface de prompt et la compétence correspondant à ce type d’artefact.
- VérificationAssurez-vous que le brief énonce clairement les critères d’acceptation. Les fixer avant la génération coûte moins cher que de les rattraper après coup.
- 2
Contraintes de design
Un design system plus une courte liste d’éléments non négociables. C’est la frontière entre un travail propre à la marque et un rendu par défaut.
- VousChoisissez un design system, nommez les breakpoints et listez les composants qui doivent apparaître.
- AntigravityAvant d’écrire la moindre ligne, charge les tokens et règles de posture d’DESIGN.md dans le contexte.
- OpenDesignFournit la bibliothèque de design system et intègre votre sélection 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
Générer l'interface
Antigravity produit un fichier HTML autonome — mise en page, styles, interactions et points d’ancrage stables inclus.
- VousAttendez, sauf si Antigravity pose une question de clarification. Il n’y a rien à configurer.
- AntigravityPlanifie les sections, écrit le HTML, le CSS et le JavaScript, puis exécute le fichier et corrige les échecs.
- OpenDesignÉcrit l'artefact dans le dossier du projet et l'indexe pour qu'il puisse être prévisualisé.
- VérificationPas encore. Évaluez le fichier rendu, pas la source.
- 4
Aperçu
OpenDesign rend le fichier aux largeurs que vous avez spécifiées. C'est le moment où le design est réellement évalué.
- VousModifiez les largeurs, testez les interactions et commentez directement les éléments.
- AntigravityRecueille vos commentaires de prévisualisation et prépare la révision suivante.
- OpenDesignFournit le rendu de prévisualisation et expose les cibles
data-od-idpour que les commentaires et les modifications puissent s'y attacher. - VérificationVérifiez la hiérarchie, le contraste, le débordement à 390px, les états de focus et si l'accent est utilisé avec parcimonie.
- 5
Réviser et vérifier
Pointez les éléments de prévisualisation pour demander des modifications. Chaque révision arrive sous forme de nouveau fichier, donc rien n'est écrasé sans laisser de trace.
- VousConvertissez les commentaires en demandes concrètes et décidez quand la tâche est terminée.
- AntigravityApplique les modifications demandées sur place et réexécute le fichier.
- OpenDesignConserve les versions côte à côte et exporte une image ou le HTML une fois que vous avez terminé.
- VérificationRevérifiez d'abord uniquement la zone modifiée, puis la page complète une fois à chaque point de rupture.
Ressources
Ressources de conception Antigravity
Skills Parcourir les skills Systèmes de design Parcourir les systèmes Modèles Parcourir les modèles
Skills de design
Types d'artefacts qu'Antigravity peut générer dans OpenDesign, avec une compétence pour chaque type.
Design systems
Tokens de marque et composants à lier avant qu'Antigravity ne commence à générer.
Modèles
Points de lancement pour les présentations, les pages de destination et les écrans produit.
Limites
Limites d'Antigravity, vérifications manuelles et voies de repli
- PérimètreLa couverture ici concerne Antigravity en tant qu'agent connecté à OpenDesign, et non l'ensemble des fonctionnalités d'Antigravity.
- Limites d'utilisationLes limites d'utilisation et le coût dépendent de l'identifiant que vous fournissez (compte Google (Gmail personnel), gratuit en aperçu public). Aucune affirmation de quota gratuit n'est faite sur cette page.
- RéseauLes fichiers de projet locaux n'impliquent pas d'inférence hors ligne. Avant de fournir des entrées sensibles, examinez les paramètres du fournisseur de votre agent et les politiques de données.
- La sortie est en HTMLLes artefacts sont des fichiers HTML, et non des documents de design vectoriels.
- Revue manuelleVous examinez l’accessibilité, le contenu réel, l’adéquation à la marque et la justesse des interactions dans l’aperçu. Toute auto-vérification de l’agent n’est qu’une première passe.
- Solution de repliLorsque l’agent est indisponible ou qu’une tâche échoue, consultez les instructions de connexion et l’authentification de votre version installée. Conservez l’erreur et le dernier artefact fonctionnel avant de modifier la configuration.
FAQ
Questions fréquentes sur Antigravity et OpenDesign
Antigravity peut-il réellement gérer le travail de design ?
Oui — avec un skill esthétique, un design system et de véritables images de référence en contexte, Antigravity produit une UI responsive de qualité production, et ses agents Gemini 3.x multimodaux vérifient le résultat dans le navigateur intégré. Sans ce contexte, il a tendance à revenir à un rendu générique, ce que OpenDesign vient combler.
Dois-je payer pour faire du design avec Antigravity ?
Antigravity est disponible en préversion publique gratuitement pour les particuliers, avec des limites de débit généreuses sur Gemini 3.x lorsque vous vous connectez avec un compte Google personnel. Dans tous les cas, OpenDesign ne fait jamais transiter vos identifiants.
Qu’est-ce qui rend Antigravity particulièrement bon pour le design ?
Trois choses : ses agents fonctionnent sur des modèles Gemini 3.x nativement multimodaux qui lisent bien les captures de référence, il intègre un navigateur que l'agent peut piloter pour vérifier l'UI, et il produit des Artifacts — captures d'écran et enregistrements du navigateur — que vous pouvez examiner. Le goût, lui, provient toujours du design system, du skill et des références que vous fournissez.
Antigravity vs. 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 d'Antigravity est sa plateforme agent-first — Gemini 3.x multimodal, un navigateur intégré pour la vérification, et des Artifacts consultables. De nombreuses équipes utilisent les deux — OpenDesign vous permet de changer d'agent sans modifier votre workflow de design.
Comment vérifier ce que construit Antigravity ?
Antigravity intègre un navigateur que ses agents peuvent piloter, ce qui leur permet de rendre l'UI, de la vérifier selon les différents points de rupture, et de capturer des captures d'écran et des enregistrements du navigateur sous forme d'Artifacts. Examiner ces Artifacts — et demander à l'agent de comparer son résultat à vos références — permet de garder le résultat conforme.
Ce qu’est exactement Antigravity
Antigravity est la plateforme de développement axée sur les agents de Google — un IDE alimenté par l'IA conçu pour que des agents autonomes, et non des chatbots en barre latérale, fassent le travail. Annoncée le 18 novembre 2025 aux côtés de Gemini 3 et disponible en aperçu public gratuitement pour les particuliers, elle vous permet de déléguer des tâches logicielles complexes et multi-outils à un agent qui opère à travers l'éditeur, le terminal et un navigateur intégré. Ses agents fonctionnent principalement sur les modèles multimodaux Gemini 3.x de Google.
Pour le travail de design, trois propriétés se distinguent. Ses agents lisent les captures d'écran et raisonnent sur la mise en page réelle, car Gemini 3.x est nativement multimodal. Il peut piloter un vrai navigateur, donc il rend et vérifie ce qu'il construit. Et il fait apparaître des Artifacts — listes de tâches, plans, captures d'écran et enregistrements de navigateur — afin que vous examiniez un résultat tangible au lieu de journaux d'outils bruts.
Vue Éditeur + Surface de gestion : La Vue Éditeur est un IDE IA familier avec des complétions d'onglet et des commandes en ligne ; la Surface de gestion vous permet de lancer, orchestrer et observer plusieurs agents travaillant de manière asynchrone sur des espaces de travail — l'endroit naturel pour exécuter une longue tâche de design.
Navigateur intégré + Artifacts : Les agents peuvent agir dans un navigateur intégré et émettre des Artifacts (captures d'écran, enregistrements de navigateur, listes de tâches, plans) sur lesquels vous pouvez laisser des commentaires — une boucle de vérification intégrée à la plateforme plutôt qu'ajoutée après coup.
Gratuit pour commencer : Se connecter avec un compte Google personnel offre des limites de débit généreuses sur Gemini 3.x ; la plateforme fonctionne sur macOS, Windows et Linux.
Identifiant : Compte Google (Gmail personnel), gratuit pendant l'aperçu public
Binaire : lancez avec agy ; fonctionne sur macOS, Windows et Linux
Fournisseur : Google
Pour le travail de design, trois propriétés se distinguent. Ses agents lisent les captures d'écran et raisonnent sur la mise en page réelle, car Gemini 3.x est nativement multimodal. Il peut piloter un vrai navigateur, donc il rend et vérifie ce qu'il construit. Et il fait apparaître des Artifacts — listes de tâches, plans, captures d'écran et enregistrements de navigateur — afin que vous examiniez un résultat tangible au lieu de journaux d'outils bruts.
Vue Éditeur + Surface de gestion : La Vue Éditeur est un IDE IA familier avec des complétions d'onglet et des commandes en ligne ; la Surface de gestion vous permet de lancer, orchestrer et observer plusieurs agents travaillant de manière asynchrone sur des espaces de travail — l'endroit naturel pour exécuter une longue tâche de design.
Navigateur intégré + Artifacts : Les agents peuvent agir dans un navigateur intégré et émettre des Artifacts (captures d'écran, enregistrements de navigateur, listes de tâches, plans) sur lesquels vous pouvez laisser des commentaires — une boucle de vérification intégrée à la plateforme plutôt qu'ajoutée après coup.
Gratuit pour commencer : Se connecter avec un compte Google personnel offre des limites de débit généreuses sur Gemini 3.x ; la plateforme fonctionne sur macOS, Windows et Linux.
Identifiant : Compte Google (Gmail personnel), gratuit pendant l'aperçu public
Binaire : lancez avec agy ; fonctionne sur macOS, Windows et Linux
Fournisseur : Google
Pourquoi le Gemini multimodal et un navigateur intégré conviennent au design
L'avantage design d'Antigravity provient du modèle et de la plateforme ensemble — mais, comme pour tout agent, le goût doit encore être fourni.
Forte compréhension multimodale : Comme Gemini 3.x est nativement multimodal, l'agent lit bien les captures d'écran de référence — comparant son rendu produit à une image au lieu de deviner à partir d'une description en prose.
Un navigateur intégré pour vérifier : L'agent pilote un vrai navigateur, donc il rend l'interface utilisateur, la vérifie dans différents états et détecte les mises en page cassées — et capture le résultat sous forme d'Artifact d'enregistrement de navigateur que vous pouvez examiner.
Conventions que l'agent lit : Encodez vos jetons, composants et règles de révision dans le contexte de projet de l'agent afin qu'il travaille selon votre marque au lieu d'un aspect par défaut.
Le goût provient de trois entrées que vous fournissez : un système de design, une compétence et de vraies images de référence.
La leçon est la même que celle que chaque agent enseigne : Antigravity n'a pas de goût par défaut. Il produit un bon design lorsque vous lui donnez des contraintes — un système de design, une compétence esthétique et des références concrètes. OpenDesign regroupe exactement ces entrées, c'est pourquoi les deux s'accordent (plus de détails ci-dessous).
Forte compréhension multimodale : Comme Gemini 3.x est nativement multimodal, l'agent lit bien les captures d'écran de référence — comparant son rendu produit à une image au lieu de deviner à partir d'une description en prose.
Un navigateur intégré pour vérifier : L'agent pilote un vrai navigateur, donc il rend l'interface utilisateur, la vérifie dans différents états et détecte les mises en page cassées — et capture le résultat sous forme d'Artifact d'enregistrement de navigateur que vous pouvez examiner.
Conventions que l'agent lit : Encodez vos jetons, composants et règles de révision dans le contexte de projet de l'agent afin qu'il travaille selon votre marque au lieu d'un aspect par défaut.
Le goût provient de trois entrées que vous fournissez : un système de design, une compétence et de vraies images de référence.
La leçon est la même que celle que chaque agent enseigne : Antigravity n'a pas de goût par défaut. Il produit un bon design lorsque vous lui donnez des contraintes — un système de design, une compétence esthétique et des références concrètes. OpenDesign regroupe exactement ces entrées, c'est pourquoi les deux s'accordent (plus de détails ci-dessous).
Configurer Antigravity pour le travail de design à partir de zéro
Voici le chemin complet depuis une machine propre jusqu'à un agent Antigravity capable de construire et de vérifier l'interface utilisateur. Les menus exacts de l'application peuvent changer pendant l'aperçu, donc ceci reste au niveau sur lequel vous pouvez compter.
La séquence de configuration : télécharger → se connecter avec Google → ouvrir votre projet → ajouter des règles de design et une compétence → utiliser le navigateur intégré pour vérifier.
Encodez vos règles de design : Mettez vos jetons, primitives et conventions dans le contexte de projet de l'agent afin que la sortie corresponde à une marque au lieu de prendre un aspect générique par défaut.
Utilisez le navigateur intégré : Faites rendre l'agent dans le navigateur intégré d'Antigravity et vérifiez sa sortie sur les différents points de rupture — en vérifiant que l'interface utilisateur a l'air correcte, pas seulement que la compilation réussit.
Utilisez la section de configuration actuelle pour les commandes et les détails spécifiques à la version, qui peuvent changer.
Exemple de commande historique du guide précédent ; vérifiez la syntaxe actuelle dans la documentation du fournisseur liée.
La séquence de configuration : télécharger → se connecter avec Google → ouvrir votre projet → ajouter des règles de design et une compétence → utiliser le navigateur intégré pour vérifier.
Encodez vos règles de design : Mettez vos jetons, primitives et conventions dans le contexte de projet de l'agent afin que la sortie corresponde à une marque au lieu de prendre un aspect générique par défaut.
Utilisez le navigateur intégré : Faites rendre l'agent dans le navigateur intégré d'Antigravity et vérifiez sa sortie sur les différents points de rupture — en vérifiant que l'interface utilisateur a l'air correcte, pas seulement que la compilation réussit.
Utilisez la section de configuration actuelle pour les commandes et les détails spécifiques à la version, qui peuvent changer.
# 1. Téléchargez Antigravity pour votre système d'exploitation (macOS, Windows, Linux)
# depuis la page de téléchargement officielle : antigravity.google/download
# 2. Lancez-le et connectez-vous
agy # ouvre Antigravity ; connectez-vous avec votre compte Google
# 3. Acceptez la politique d'utilisation des données, choisissez un thème et ouvrez votre dossier de projet
# 4. Démarrez une tâche d'agent dans la Vue Éditeur ou la Surface de gestion,
# en sélectionnant un modèle Gemini 3.x (par exemple Gemini 3.1 Pro)Exemple de commande historique du guide précédent ; vérifiez la syntaxe actuelle dans la documentation du fournisseur liée.
Transformer des captures d’écran en UI : le flux de travail
La boucle de design à plus fort effet de levier avec Antigravity consiste à transformer une image de référence en une interface utilisateur fonctionnelle et responsive, puis à itérer jusqu'à ce qu'elle corresponde — en s'appuyant sur le modèle multimodal pour comparer la sortie à la référence, et sur le navigateur intégré pour la vérifier.
Partez des références visuelles les plus claires dont vous disposez — et incluez plusieurs états (ordinateur de bureau et mobile, survol, vide, chargement), pas seulement une seule capture héroïque.
Soyez précis dans l'invite ; des invites vagues produisent une interface utilisateur générique même avec un modèle puissant.
Gardez votre système de design et vos conventions dans le contexte de projet de l'agent, et dites-lui où se trouvent les jetons et les primitives canoniques.
Laissez l'agent rendre dans le navigateur intégré d'Antigravity, en redimensionnant aux points de rupture pour vérifier le résultat.
Itérez en demandant à l'agent de comparer son implémentation aux captures d'écran — et pas seulement de confirmer qu'il compile — et examinez les Artifacts d'enregistrement de navigateur et de capture d'écran qu'il produit.
Joignez vos images de référence et donnez des contraintes concrètes, puis laissez l'agent vérifier dans le navigateur :
Gardez les invites courtes et ciblées, validez les bonnes itérations et annulez les mauvaises (en disant à l'agent quand vous annulez), afin que chaque passe s'appuie sur une base propre.
Exemple de commande historique du guide précédent ; vérifiez la syntaxe actuelle dans la documentation du fournisseur liée.
Partez des références visuelles les plus claires dont vous disposez — et incluez plusieurs états (ordinateur de bureau et mobile, survol, vide, chargement), pas seulement une seule capture héroïque.
Soyez précis dans l'invite ; des invites vagues produisent une interface utilisateur générique même avec un modèle puissant.
Gardez votre système de design et vos conventions dans le contexte de projet de l'agent, et dites-lui où se trouvent les jetons et les primitives canoniques.
Laissez l'agent rendre dans le navigateur intégré d'Antigravity, en redimensionnant aux points de rupture pour vérifier le résultat.
Itérez en demandant à l'agent de comparer son implémentation aux captures d'écran — et pas seulement de confirmer qu'il compile — et examinez les Artifacts d'enregistrement de navigateur et de capture d'écran qu'il produit.
Joignez vos images de référence et donnez des contraintes concrètes, puis laissez l'agent vérifier dans le navigateur :
Gardez les invites courtes et ciblées, validez les bonnes itérations et annulez les mauvaises (en disant à l'agent quand vous annulez), afin que chaque passe s'appuie sur une base propre.
# Dans une tâche d'agent Antigravity, joignez reference-desktop.png et
# reference-mobile.png, puis invitez :
Implémentez ce design en React + Vite + Tailwind + TypeScript.
Réutilisez mes composants et jetons de système de design existants.
Faites correspondre l'espacement, la mise en page et la hiérarchie ; rendez-le responsive.
Rendez-le dans le navigateur intégré et itérez jusqu'à ce qu'il corresponde
aux références sur les différents points de rupture, et montrez-moi les captures d'écran.Exemple de commande historique du guide précédent ; vérifiez la syntaxe actuelle dans la documentation du fournisseur liée.
Contexte de l'agent, outils et Artifacts
Trois points d'extension rendent Antigravity pratique pour un travail de design soutenu, et tous trois s'intègrent parfaitement à un flux de travail de design ouvert.
Contexte du projet : Les règles de projet persistantes sont le foyer durable de vos conventions de design — jetons, primitives et listes de contrôle de révision que l'agent lit à chaque tâche, de sorte que la sortie reste fidèle à la marque.
Navigateur + terminal intégrés : Les agents agissent à travers l'éditeur, le terminal et un navigateur intégré, de sorte qu'ils peuvent recueillir des références, exécuter un serveur de développement et vérifier l'interface rendue sans quitter la plateforme.
Artefacts que vous examinez : Les listes de tâches, les plans d'implémentation, les captures d'écran et les enregistrements du navigateur rendent le travail de l'agent lisible ; vous laissez des commentaires sur l'Artefact et l'agent incorpore les corrections.
Ce sont les capacités dont une boucle de design sérieuse a besoin — exactement le genre de chose qu'OpenDesign est conçu pour orchestrer, plutôt que de recréer pour chaque projet.
Contexte du projet : Les règles de projet persistantes sont le foyer durable de vos conventions de design — jetons, primitives et listes de contrôle de révision que l'agent lit à chaque tâche, de sorte que la sortie reste fidèle à la marque.
Navigateur + terminal intégrés : Les agents agissent à travers l'éditeur, le terminal et un navigateur intégré, de sorte qu'ils peuvent recueillir des références, exécuter un serveur de développement et vérifier l'interface rendue sans quitter la plateforme.
Artefacts que vous examinez : Les listes de tâches, les plans d'implémentation, les captures d'écran et les enregistrements du navigateur rendent le travail de l'agent lisible ; vous laissez des commentaires sur l'Artefact et l'agent incorpore les corrections.
Ce sont les capacités dont une boucle de design sérieuse a besoin — exactement le genre de chose qu'OpenDesign est conçu pour orchestrer, plutôt que de recréer pour chaque projet.
Antigravity, Codex, Claude Code, Cursor et Gemini CLI pour le design : comment les comparer
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é équitable :
Antigravity — IDE centré sur l'agent avec Gemini 3.x multimodal, un navigateur intégré pour l'auto-vérification et des Artefacts examinables ; gratuit en aperçu — Constructions multi-agents asynchrones avec vérification intégrée de l'interface dans le navigateur
Codex — Forte finition visuelle avec une compétence frontend ; constructions asynchrones en sandbox — Constructions asynchrones déléguées et règles AGENTS.md portables
Claude Code — Décisions de design spécifiques (hex, espacement, typographie) et UX consciente de la base de code — Raisonnement frontend et refactorisations à grand contexte
Cursor — Boucle visuelle construire-et-voir avec aperçu en direct et modifications en ligne — Travail d'interface itératif et d'observation serré dans un IDE
Gemini CLI — Agent de terminal open-source sur Gemini multimodal avec un contexte de 1M de jetons et un niveau gratuit — Travail de terminal riche en captures d'écran et maintien d'un système de design complet en contexte
Le verdict récurrent de la communauté est que le goût vient des humains : tous se rabattent sur une esthétique générique sans compétences, 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.
Agent — Force de design — Idéal pour
Antigravity — IDE centré sur l'agent avec Gemini 3.x multimodal, un navigateur intégré pour l'auto-vérification et des Artefacts examinables ; gratuit en aperçu — Constructions multi-agents asynchrones avec vérification intégrée de l'interface dans le navigateur
Codex — Forte finition visuelle avec une compétence frontend ; constructions asynchrones en sandbox — Constructions asynchrones déléguées et règles AGENTS.md portables
Claude Code — Décisions de design spécifiques (hex, espacement, typographie) et UX consciente de la base de code — Raisonnement frontend et refactorisations à grand contexte
Cursor — Boucle visuelle construire-et-voir avec aperçu en direct et modifications en ligne — Travail d'interface itératif et d'observation serré dans un IDE
Gemini CLI — Agent de terminal open-source sur Gemini multimodal avec un contexte de 1M de jetons et un niveau gratuit — Travail de terminal riche en captures d'écran et maintien d'un système de design complet en contexte
Le verdict récurrent de la communauté est que le goût vient des humains : tous se rabattent sur une esthétique générique sans compétences, 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.
Agent — Force de design — Idéal pour
Pièges courants et comment éviter l’aspect « bâclé par IA »
La plainte la plus courante concernant le design généré par l'IA est qu'il semble générique — dégradés doux, panneaux flottants, coins arrondis surdimensionnés, ombres dramatiques, une ambiance Inter-et-violet qui « crie qu'une IA a fait ça ». D'autres problèmes signalés incluent des mises en page mobiles cassées et des instructions qui fuient dans le texte de l'interface. Aucun de ces problèmes n'est propre à Antigravity ; ils surviennent lorsque n'importe quel agent tourne sans contexte de design curaté.
Ajoutez une compétence esthétique : Une compétence de design curatée force l'agent à s'engager dans une vraie direction au lieu de l'apparence par défaut.
Vérifiez dans le navigateur intégré : Utilisez le modèle multimodal et le navigateur intégré d'Antigravity pour effectuer le rendu et l'auto-vérification à travers les points de rupture afin que les mises en page ne se cassent pas silencieusement sur mobile.
Fournissez des jetons et des références : De vrais jetons de design et des captures d'écran de référence sont le plus grand levier sur la qualité de la sortie.
Encodez des règles dans le contexte du projet : Mettez des règles du style « pas de cartes héros, maximum deux polices de caractères, hiérarchie centrée sur la marque » là où l'agent les lit à chaque tâche.
Remarquez que chaque atténuation consiste à donner à l'agent un contexte de design curaté. Maintenir ce contexte à la main, projet par projet, est la corvée qu'OpenDesign supprime.
Ajoutez une compétence esthétique : Une compétence de design curatée force l'agent à s'engager dans une vraie direction au lieu de l'apparence par défaut.
Vérifiez dans le navigateur intégré : Utilisez le modèle multimodal et le navigateur intégré d'Antigravity pour effectuer le rendu et l'auto-vérification à travers les points de rupture afin que les mises en page ne se cassent pas silencieusement sur mobile.
Fournissez des jetons et des références : De vrais jetons de design et des captures d'écran de référence sont le plus grand levier sur la qualité de la sortie.
Encodez des règles dans le contexte du projet : Mettez des règles du style « pas de cartes héros, maximum deux polices de caractères, hiérarchie centrée sur la marque » là où l'agent les lit à chaque tâche.
Remarquez que chaque atténuation consiste à donner à l'agent un contexte de design curaté. Maintenir ce contexte à la main, projet par projet, est la corvée qu'OpenDesign supprime.
Concevoir avec Antigravity au sein de OpenDesign
OpenDesign est la couche de design open-source que le flux de travail ci-dessus ne cesse de réclamer. Il traite Antigravity comme un adaptateur de première partie et l'enveloppe dans une bibliothèque de compétences et de systèmes de design curatés, un pipeline de rendu structuré et une interface de bureau locale — de sorte que le contexte de design qui rend Antigravity bon est là dès la première exécution, pas assemblé à la main à chaque fois. OpenDesign est open-source et local d'abord, ce qui rend l'association naturelle.
Installez OpenDesign et sélectionnez Antigravity comme agent.
Authentifiez-vous avec votre compte Google — les identifiants restent sur votre machine et ne sont jamais relayés par notre intermédiaire.
Choisissez un système de design et une compétence, puis générez des présentations, des prototypes et des pages d'atterrissage 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é.
Même agent Antigravity, même compte Google — plus un vrai flux de travail de design portable et open-source autour. OpenDesign est local d'abord et sous licence Apache-2.0, donc rien de votre travail ni de vos identifiants ne quitte votre machine.
Installez OpenDesign et sélectionnez Antigravity comme agent.
Authentifiez-vous avec votre compte Google — les identifiants restent sur votre machine et ne sont jamais relayés par notre intermédiaire.
Choisissez un système de design et une compétence, puis générez des présentations, des prototypes et des pages d'atterrissage 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é.
Même agent Antigravity, même compte Google — plus un vrai flux de travail de design portable et open-source autour. OpenDesign est local d'abord et sous licence Apache-2.0, donc rien de votre travail ni de vos identifiants ne quitte votre machine.
OpenDesign a-t-il une quelconque affiliation avec Google ?
Non. OpenDesign est indépendant ; Antigravity et Gemini sont des marques de Google.