POUR ALLER PLUS LOIN
Pour aller plus loin avec Antigravity
Tutoriels, documentation et démonstrations pour concevoir avec Antigravity, tels que listés 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.
Du brief à l'interface01 / Antigravity
VOUS APPORTEZ L'IDÉE↗
« Un parcours d'inscription que le navigateur
vérifie avant moi. »
TROIS FAÇONS D’ABORDER CE GUIDE ANTIGRAVITY
Choisissez par où commencer avec Antigravity
CE GUIDE · CONCEPTION D'INTERFACE
Construire une interface produit avec Antigravity
Ce guide : brief, références, règles de conception et un résultat HTML révisé.
Lire ce guide CONFIGURATIONConfigurer Antigravity depuis zéro
Voici le parcours complet, d’une machine vierge jusqu’à un agent Antigravity capable de construire et de vérifier l’UI.
Accéder à la configuration COMPARAISONComparer Antigravity avec d’autres agents
En quoi Antigravity 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 Antigravity complète
Une tâche de design Antigravity, du brief à l'interface
Une seule tâche, montrée de bout en bout : le brief et les contraintes que vous transmettez, l'artifact qui en résulte, et les vérifications que vous effectuez encore avant qu'elle ne soit terminée. L'interface ci-dessous est un exemple illustratif conçu pour cette page, pas une exécution Antigravity enregistrée.
1Brief de conception et contraintes
BriefConcevez une inscription en trois étapes pour un produit d'équipe : compte, espace de travail, invitation des coéquipiers. Vérifiez chaque étape dans le navigateur intégré, en largeurs bureau et téléphone, avant de la remettre.
- 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
- InteractionsNavigation entre étapes, validation en ligne, ignorer l'invitation, ordre de focus au clavier
- SortieUn fichier HTML autonome avec des points d'ancrage
data-od-idstables
2Répartition du travail : vous, Antigravity et OpenDesign
- Vous
Rédigez le brief, sélectionnez le système de conception et définissez les critères d'acceptation.
- Antigravity
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 Antigravity : le parcours d'inscription à 1440px et 390px
4Vérification avant transmission
Mise en page
Grille et espacement
Stepper, formulaire et résumé sur la grille de 8px ; le résumé n'est jamais plus haut que le formulaire.
Hiérarchie
Hiérarchie visuelle
Étape en cours, puis la question, puis les champs ; l'accent marque uniquement l'étape en cours.
Réactif
Mise en page mobile
Le stepper se compresse en points avec le libellé de l'étape en cours ; le résumé devient une seule ligne de total.
Interaction
Vérifications d'interaction
Revenir à une étape précédente, déclencher une erreur de validation, ignorer l'étape d'invitation.
Adéquation
Quand Antigravity convient à la tâche, et quand ce n'est pas le cas
Antigravity convient quand
- Capture d'écran multimodale → UI. La compréhension d'image de Gemini 3.x transforme une image de référence en balisage responsive et vérifie le résultat par rapport à celle-ci.
- Vérification intégrée par navigateur. Les agents pilotent un navigateur intégré pour rendre l'UI et la vérifier sur différents points de rupture, en capturant le résultat sous forme d'Artifacts.
- Editor View + Manager Surface. Codez directement dans l'Editor View, ou orchestrez plusieurs agents de manière asynchrone depuis la Manager Surface.
- Gratuit pour démarrer. Aperçu public sans frais pour les particuliers, avec des limites de débit Gemini 3.x généreuses via un compte Google.
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 par cet agent. Requis : compte Google (Gmail personnel), gratuit en aperçu public. OpenDesign ne fournit ni ne relaie d'identifiants.
- Votre équipe travaille dans Cursor ou Kiro. 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 Antigravity avant de commencer
Ce guide couvre Antigravity connecté via l'application de bureau OpenDesign. Références publiées 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 alimenté par l'IA où des agents autonomes travaillent dans l'éditeur, le terminal et un navigateur intégré. Il a été lancé en aperçu public en même temps que Gemini 3. Cette page traite de la conception d'interfaces avec Antigravity via OpenDesign, pas de l'interface propre d'Antigravity. Les notes de configuration d'OpenDesign listent les agents disponibles.
Comptes et authentificationCompte Google (Gmail personnel), gratuit en
Compte Google (Gmail personnel), gratuit en préversion publique. 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
Consultez la page de téléchargement pour les builds de bureau. Les prérequis Node.js et pnpm du guide de démarrage rapide depuis les sources s’appliquent à l’exécution depuis les sources, pas à l’installation d’un package de bureau. Version minimale compatible d’Antigravity : 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 qu’Antigravity l’a traitée et que l’artefact s’ouvre. Un téléchargement seul n’établit pas une connexion fonctionnelle.
Commencez par l’application de bureau
Configuration d’Antigravity en trois étapes
Téléchargez d’abord, terminez la configuration d’Antigravity 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 Antigravity
Suivez les instructions Antigravity de votre version installée. Authentifiez-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 Antigravity du guide publié ; consultez la documentation de l’éditeur 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 Antigravity
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 Antigravity
Le workflow de conception Antigravity en cinq étapes
La même tâche de parcours d'inscription, suivie du brief jusqu'au fichier vérifié. Chaque étape indique ce que vous fournissez, ce que fait Antigravity, 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.
- AntigravityLit le brief et le fichier d’instructions du projet ; pose une question 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.
- AntigravityCharge les tokens et les règles de posture de DESIGN.md dans le contexte avant d’écrire une seule 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
Antigravity é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.
- AntigravityPlanifie 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.
- AntigravityLit 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.
- AntigravityApplique 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 Antigravity
Skills Parcourir les skills Systèmes de design Parcourir les systèmes Modèles Parcourir les modèles
Skills de design
Les types d’artefacts que Antigravity peut produire dans OpenDesign, un skill par type.
Design systems
Les tokens de marque et les composants à relier avant que Antigravity 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 d'Antigravity, contrôles manuels et solutions de repli
- PérimètreCette page traite d'Antigravity en tant qu'agent connecté à OpenDesign, pas de l'ensemble des fonctionnalités d'Antigravity.
- Limites d'utilisationLes limites d'utilisation et le coût dépendent de l'identifiant que vous utilisez (compte Google (Gmail personnel), gratuit en préversion publique). Cette page n'affirme rien quant aux 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 Antigravity et OpenDesign
Antigravity 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, 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.
Devez-vous payer pour concevoir 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 adapté au 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 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 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.
Démarrez une première tâche de design avec Antigravity
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.