Au-delà du vibe coding pour le Web

1. Introduction

Les agents de programmation devenant partie intégrante du développement logiciel quotidien, que vous soyez un ingénieur expérimenté ou un nouveau développeur cherchant à lancer votre première application, la façon dont vous créez et ce que vous créez sont en train de changer fondamentalement. Lorsque vous commencez à utiliser des agents de codage, vous commencez généralement par des requêtes "zero-shot" : une seule instruction qui indique brièvement, en langage humain, ce que vous souhaitez. Cela pose rapidement problème :

• Biais de complaisance : les modèles acceptent souvent des contraintes ou des hypothèses erronées, car ils cherchent à répondre à votre demande le plus rapidement possible, sans vérifier que ce qu'ils créent correspond réellement à ce que vous vouliez.
• Manque de vérification : même lorsqu'ils rédigent des tests, les agents ne vérifient généralement pas leur travail pour s'assurer qu'il fonctionne. L'utilisation de sites Web dans un navigateur en direct permet de mettre en évidence des bugs cachés, des mises en page cassées et des commandes inaccessibles.
• Dette technique : en raison de la façon dont les modèles sont entraînés et fonctionnent, le code qu'ils écrivent tend vers des schémas anciens et obsolètes, ce qui augmente la dette technique. La gestion de cette dette technique nécessite plus de jetons, ainsi que plus de temps et d'efforts humains et machine. La dette technique peut même avoir un impact négatif sur l'expérience utilisateur.

Plan d'action en quatre étapes

Pour aider les agents de codage à produire un code de meilleure qualité qui correspond mieux à vos exigences, envisagez de suivre un cycle de vie de développement de produit en quatre étapes :

1. Planification et conception : rédigez des documents de spécification des exigences du produit (PRD) en collaboration avec l'agent, puis demandez-lui de prototyper et de concevoir les PRD dans le navigateur avant de commencer l'implémentation de la production. Ensuite, rédigez des documents de conception architecturale (spécifications) à partir de vos PRD et conceptions avant de commencer le codage.
2. Coder et compiler : demandez à vos agents de compiler en fonction de vos PRD, conceptions et spécifications au lieu d'un prompt zero-shot, et faites-les exécuter un autre agent pour vérifier leur travail.
3. Répétez l'opération : répétez les étapes 1 et 2 pour chaque nouvelle fonctionnalité que vous souhaitez ajouter.
4. Déployer : déployer en production.

Ce document vous explique comment utiliser les agents d'IA comme partenaires actifs et collaboratifs, avec des pratiques destinées à vous aider à réduire la dette technique et à améliorer la qualité du code généré. Vous utilisez Antigravity associé à Modern Web Guidance et DevTools for Agents pour créer un jeu de mots occasionnel et l'améliorer grâce aux fonctionnalités d'IA. Vous le déployez ensuite sur Google Cloud à l'aide de Firebase pour le partager avec vos amis et votre famille.

Points abordés

• Traitez les tâches de codage de l'IA comme des mini-cycles de vie de développement de produits.
• Pourquoi séparer les exigences produit des spécifications architecturales
• Découvrez comment orchestrer des workflows multi-agents pour prototyper directement dans le navigateur et examiner votre code.
• Découvrez comment tirer parti des compétences et des outils tiers pour améliorer à la fois votre développement et l'expérience utilisateur.
• Découvrez comment déployer des applications Web directement en production à l'aide de Firebase MCP.

Prérequis

• Un compte Google personnel et un projet Google Cloud ou Firebase (instructions dans la configuration du projet)
• Vous devez avoir quelques connaissances en HTML, CSS et JavaScript.
• Un navigateur Web tel que Chrome.
• Node.js installé (LTS recommandé).

2. Configuration du projet

Compte Google

Si vous ne possédez pas encore de compte Google personnel, vous pouvez en créer un.

Se connecter à la console Google Cloud

Connectez-vous à la console Google Cloud à l'aide d'un compte Google personnel.

Activer la facturation

Conseil : Si vous configurez la facturation à l'aide de crédits Google Cloud, vous pouvez passer à "Créer un projet Firebase".

Pour configurer un compte de facturation personnel, activez la facturation dans la console Cloud.

Créer un projet Firebase

Conseil : Si vous avez configuré un projet Google Cloud pour configurer des crédits Google Cloud, utilisez ce projet pour configurer votre projet Firebase. Si vous le faites, vous n'avez pas besoin d'associer votre compte de facturation, car il l'est déjà.

1. Accédez à la console Firebase et connectez-vous avec votre compte Google personnel.
2. Cliquez sur Ajouter un projet (ou Créer un projet).
3. Dans l'assistant de création de projet :
   • Saisissez un nom de projet (par exemple, wordup-web-app) ou réutilisez le projet Google Cloud que vous avez configuré lors de la configuration du projet.
4. Associer un compte de facturation
   • Dans la barre latérale de la console Firebase, recherchez le badge du forfait en bas de l'écran (il indique "Spark"). Cliquez sur Mettre à jour.
   • Sélectionnez le forfait Paiement à l'usage.
   • Sélectionnez le compte de facturation que vous avez configuré lors de l'étape de configuration du projet.
   • Confirmez la sélection pour associer votre compte de facturation au projet. (Firebase Hosting propose un niveau sans frais généreux. Ce tutoriel ne devrait donc pas vous coûter d'argent.)

Installer les outils

• Antigravity 2.0 : le harnais de codage agentif principal avec lequel vous travaillez, associé au dernier modèle Gemini Flash pour un codage rapide et de pointe.
• Conseils pour le Web moderne : compétence permettant aux agents de codage d'écrire du code CSS, HTML et JavaScript moderne. Installez-le via Antigravity : Settings > Customization > Build With Google Plugins > Modern Web Guidance (Paramètres > Personnalisation > Créer avec les plug-ins Google > Conseils pour le Web moderne).
• Outils de développement pour les agents : permet aux agents de contrôler Chrome, d'inspecter le DOM en direct, de tester la mise en page et de déboguer en cours d'exécution. Installez-le via Antigravity : Paramètres > Personnalisation > Créer avec les plug-ins Google > Outils pour les développeurs Chrome et Antigravity : Paramètres > Personnalisation > Ajouter des serveurs MCP > Outils de développement Chrome pour les agents.
• Serveur MCP Firebase : pour une configuration de projet fluide et des déploiements en une seule invite. Installez-le via Antigravity : Settings > Customization > Build With Google Plugins > Firebase and Antigravity Settings > Customization > Add MCP Servers > Firebase (Paramètres > Personnalisation > Créer avec les plug-ins Google > Paramètres Firebase et Antigravity > Personnalisation > Ajouter des serveurs MCP > Firebase).

3. Commencer par un plan

La tentation habituelle dans le codage agentique est de soumettre un prompt zéro-shot ("Crée-moi un jeu de mots") et d'espérer le meilleur. Cela entraîne presque toujours des cas extrêmes ignorés, des bases de code gonflées et des cycles de correction de bugs sans fin.

Au lieu de cela, considérez chaque tâche comme un mini-cycle de vie de développement de produit. Les agents de programmation disposent d'outils de recherche et de raisonnement qui leur permettent d'agir en tant que partenaires collaboratifs pour vous aider à clarifier vos idées avant d'écrire du code. Le fait de parler de votre idée vous aide souvent à trouver des réponses à vos questions avant qu'elles ne deviennent des problèmes. En génie logiciel, on appelle cela le débogage du canard en caoutchouc. Vous pouvez utiliser vos agents de programmation comme des canards en caoutchouc pour planifier vos projets et vos fonctionnalités.

Vous créez un jeu de mots grand public. Demandez à votre agent de vous aider à concevoir le jeu de votre choix.

I want to make a casual word guessing game. Go do deep research on those kinds
of games, then ask me questions to help me write a PRD for the game's features.

Il s'agit de la forme de base de la requête. Remixe-la pour l'adapter à tes besoins. L'idée est de lui demander d'effectuer des recherches approfondies et de vous poser des questions basées sur ces recherches pour vous aider à planifier votre travail.

Commencez par cette requête, car l'utilisation d'agents de codage implique de nombreuses vérifications. Décomposer un plan d'implémentation complet en éléments plus petits et ciblés facilite l'examen, vous permet de détecter les cas extrêmes plus tôt, peut apporter des connaissances en dehors des données d'entraînement de l'agent et, surtout, vous permet de faire plus de pauses entre les examens.

• Sépare le "quoi" du "comment" : définir l'expérience utilisateur et le champ d'application du produit dans un document formel de spécifications produit sépare ce que vous voulez qu'il se passe de la façon dont cela se passe. Vous pouvez ainsi vous concentrer sur un aspect du développement du produit à la fois, au lieu de tout faire en même temps.
• Identifiez les cas extrêmes en amont : une séance de questions-réponses interactive vous oblige à clarifier vos exigences avant de commencer la conception ou l'implémentation.
• Recherche d'agents actifs : comme l'entraînement des agents est interrompu à une certaine date et que les informations qu'il contient sont très résumées, l'extraction de données de recherche en direct peut apporter de nouvelles informations qui seraient autrement manquées.

Conseil : Si vous voyez votre agent de programmation faire quelque chose que vous aimez ou que vous n'aimez pas, vous pouvez ajouter des instructions à un fichier AGENTS.md dans le dossier de votre projet pour corriger ou renforcer son comportement. Essayez d'ajouter ce qui suit pour vous assurer qu'Antigravity utilise son outil de questions intégré lorsqu'il vous pose des questions :

When I ask you to ask me questions, you are **REQUIRED** to use your `ask_question` tool to do so.

Exercice 1

À vous de jouer. Configurez votre projet et créez votre PRD.

1. Ajoutez une instruction à votre fichier AGENTS.md pour lui indiquer d'enregistrer votre résultat dans docs/plans/{{YYYY-MM-DD}}-{{description}}.md.
2. Exécutez la requête de recherche précédente, avec les ajustements de votre choix, pour développer votre PRD.
3. [Objectif supplémentaire] Mettez à jour votre fichier AGENTS.md avec les actions de votre agent qui ne vous plaisent pas, puis exécutez à nouveau votre requête.

Remarque : Antigravity 2.0 dispose d'une commande /grill-me que vous pouvez exécuter spécifiquement pour ce type d'exploration.

Bonne pratique : Antigravity 2.0 dispose d'un outil "Artifact" qui vous permet de commenter ligne par ligne ou de mettre en surbrillance un texte spécifique et de laisser des commentaires, comme dans Google Docs. Vous devez laisser des commentaires intégrés au lieu de les ajouter à la requête. Enregistrez la requête pour les commentaires à l'échelle du document. Si vous envoyez votre requête, même si elle est vide, vos commentaires sont transmis et Antigravity est invité à régénérer votre document en tenant compte de vos commentaires.

Attention : Parfois, même si vous lui demandez de rédiger uniquement un PRD, il inclut la conception et l'architecture du logiciel dans votre PRD. Si c'est le cas, laissez un commentaire ou demandez-lui de supprimer ces éléments et de se concentrer uniquement sur l'expérience utilisateur.

4. Concevoir dans le navigateur

La conception d'UI statique repose sur des maquettes souvent magnifiques, mais qui peuvent ne pas tenir compte des cas extrêmes, des contraintes et des interactions réelles des utilisateurs. Tout comme le code, demander à un agent de "concevoir" l'application de votre site génère des conceptions qui convergent vers une conception générique (souvent violette).

Pour les applications Web, vous pouvez utiliser la capacité de votre agent à contrôler un navigateur Web via les Outils de développement pour les agents afin de concevoir dans le navigateur. Que vous soyez un concepteur qui cherche à améliorer la fidélité de ses conceptions, un codeur ou un développeur qui souhaite améliorer l'UI et l'UX de son projet, ou les deux travaillant ensemble, travailler dans le support réel pour lequel vous développez produit de meilleurs résultats.

La conception dans le navigateur vous permet également de coordonner plusieurs agents travaillant ensemble pour produire un seul résultat. Ces sous-agents sont des agents avec des personas et des objectifs spécifiques qui peuvent être coordonnés pour produire de meilleurs résultats qu'un seul agent travaillant seul. Avec la conception, vous pouvez demander à un agent de conception visuelle, à un agent d'expérience utilisateur et à un agent d'accessibilité de travailler ensemble pour vous aider à concevoir votre projet, et de vous le montrer directement dans le navigateur.

Attention : L'utilisation de sous-agents pour effectuer des tâches consomme plus de jetons. Bien qu'ils puissent produire des résultats de bien meilleure qualité, sachez que leur utilisation peut entraîner des coûts supplémentaires.

Démarrez un groupe d'agents de conception pour vous aider à choisir une conception en fonction de votre PRD.

Using the PRD, start a panel of expert agents: one UX design, one web
accessibility, and one for visual design, and have them work together to design
3 different UI mockups and show them to me in-browser.

Conseil : Vous pouvez saisir @ dans la zone de requête d'Antigravity, puis commencer à saisir le nom d'un fichier pour indiquer à Antigravity le fichier spécifique que vous souhaitez qu'il examine.

Concevoir dans le support pour lequel vous créez, dans ce cas le Web, au lieu d'un support statique, vous permet de détecter les cas extrêmes et les contraintes difficiles à gérer autrement, et d'obtenir un retour visuel immédiat fidèle à la production.

Exercice 2

À vous de jouer. Concevez votre projet.

1. Exécutez la requête de conception précédente, avec les modifications de votre choix, pour développer votre conception. Incluez des idées pour les différentes orientations de conception que vous aimeriez voir (moderne, ludique, réaliste, etc.).
2. Choisissez un design qui vous plaît et itérez dessus avec votre agent.
3. Demandez à votre agent de mettre à jour votre PRD pour qu'il pointe vers la conception convenue.
4. Objectif ambitieux : effectuez des tests d'accessibilité et de conception responsives pour la conception choisie, puis ajustez-la en fonction de ces audits.

Attention : Les agents sont parfois trop zélés et interprètent cette instruction comme une autorisation de développer l'intégralité de l'application. Observez sa façon de réfléchir. S'il fait plus que ce à quoi vous vous attendez, arrêtez-le et demandez-lui de changer de cap.

5. Rédiger une spécification

Maintenant que vous avez un PRD approuvé (ce qu'il faut créer) et une conception visuelle sélectionnée (à quoi cela ressemble), vous devez vous assurer que l'architecture est techniquement alignée (comment le créer).

Un document de conception technique ou une spécification (spéc en abrégé) détaille les structures de fichiers, la gestion des états, les interfaces de composants, les pipelines d'événements et les dépendances. Créer une spécification avant d'écrire du code vous permet de détecter les incohérences et les modèles de codage indésirables dès le début, avant qu'ils ne se transforment en code plus difficile à comprendre et à refactoriser.

Write a detailed technical design document on how to implement the game with
the chosen design.

Pourquoi vous faites cela

• Clarté architecturale : la définition de la hiérarchie des composants et du flux de transition d'état (par exemple, Idle → InGame → EvaluatingGuess → GameOver) permet d'éviter les conditions de course et le code spaghetti fragile.
• Alignement sur les normes modernes : lorsque les conseils pour le Web moderne sont activés, l'agent fait référence aux normes modernes (par exemple, les requêtes CSS @container, les éléments
  intégrés pour les modaux ou les calques d'aide, et les modules ES modulaires) au lieu d'extraire les anciennes bibliothèques lourdes.
• Examens par étapes : en séparant l'examen du PRD fonctionnel de celui du document de conception technique, vous pouvez évaluer l'architecture indépendamment de l'expérience utilisateur.

Exercice 3

1. Demandez à votre AGENTS.md d'enregistrer votre sortie dans le dossier actuel :

   PRDs should _always_ be written to the current project's root in `docs/plans/{{YYYY-MM-DD}}-{{description}}.md` format
   

2. Exécutez la requête du document de conception et examinez-la. Assurez-vous qu'elle couvre des aspects tels que la structure des répertoires, la gestion des événements et le stockage.
3. Objectif ambitieux : incluez des diagrammes Mermaid pour expliquer le flux d'état dans l'application, si ce n'est pas déjà le cas.

6. Enfin, compilez l'application.

Une fois le PRD, la maquette d'UI et le document de conception établis, il est temps de créer. Ces trois éléments constituent les consignes claires et non ambiguës dont les agents ont besoin pour savoir ce qu'ils doivent faire.

Voici une autre bonne occasion d'utiliser des sous-agents. Vous pouvez les exécuter après la compilation du code pour vérifier dans quelle mesure le code compilé respecte vos conceptions initiales, et une autre pour vérifier la qualité du code compilé.

Use the PRD, design doc, and mockup to implement the site, then send out 2
agents, one to check how closely you followed the requirements, and one to
review the code.

Pourquoi vous faites cela

Le développement basé sur les spécifications avec des réviseurs de première passe fournit à votre agent des exigences claires et pré-vérifiées sur lesquelles s'appuyer, ainsi qu'un regard neuf pour s'assurer qu'il a respecté le plan avant de vous le transmettre, ce qui améliore la qualité et la fidélité.

• Exigences vérifiées : l'agent n'a pas besoin de deviner ce que vous voulez. Vous avez déjà tout vérifié, sauf l'implémentation, avant qu'un code soit écrit.
• Un regard neuf : un agent d'examen généré dans un nouveau contexte n'a aucun biais de confirmation lié à la création de la codebase. Il est donc efficace pour détecter les cas extrêmes non traités, les exigences d'implémentation manquantes et d'autres détails de code ou de produit qui ont été oubliés.

Exercice 4

1. Exécutez le prompt de compilation en pointant vers les fichiers exacts que vous souhaitez qu'il examine.
2. Observez le résultat à mesure qu'il s'exécute. Vous le voyez raisonner à partir de vos exigences lorsqu'il essaie de les développer. Si vous avez l'impression que quelque chose ne va pas, vous pouvez l'arrêter et le corriger.
3. Demandez-lui d'exécuter votre serveur de développement pour afficher le site final et vérifier son travail.
4. Objectif supplémentaire : Exécutez à nouveau ce processus pour ajouter des tests automatisés.
5. Objectif ambitieux : choisissez un framework ou une pile technologique spécifiques dans lesquels vous souhaitez que le site soit créé. Avec le PRD, la maquette et le document de conception séparés, il devrait être facile de s'adapter à différents frameworks ou piles technologiques.

7. Déployer en production

Vous avez planifié, conçu et codé. Qu'est-ce qui reste ? Déploiement en production.

Deploy this site to my Firebase project [YOUR_PROJECT_ID] using Firebase
Hosting.

Attention : Si cela ne fonctionne pas, assurez-vous que Firebase MCP est installé. Vous devrez peut-être également vous connecter la première fois que vous exécuterez cette commande.

Exercice 5

1. Exécutez l'invite de déploiement en remplaçant l'ID de votre projet.
2. Copiez l'URL d'hébergement en direct fournie par l'agent.
3. Ouvrez l'URL en direct pour vérifier qu'elle est déployée et qu'elle fonctionne.
4. Objectif ambitieux : utilisez les outils de développement pour les agents afin d'exécuter un audit Lighthouse de votre site de production, apportez des ajustements pour améliorer le score Lighthouse et publiez les modifications.

8. [Facultatif] Améliorations de l'IA

Votre jeu de mots est désormais entièrement fonctionnel à l'aide d'un dictionnaire statique. Pour transformer le dictionnaire statique en mot dynamique, vous pouvez plutôt demander un mot à chaque fois à l'aide d'un petit modèle de langage local de l'API Prompt.

Attention : Si ce n'est pas déjà fait, assurez-vous d'avoir installé les conseils pour le Web moderne pour vous aider.

Comme cette fonctionnalité n'est pas disponible sur tous les appareils, vous utilisez l'amélioration progressive pour vérifier si l'API et le modèle sont disponibles. Si c'est le cas, vous les utilisez. Sinon, vous revenez à votre liste statique.

Exercice 6

Mettez en pratique tout ce que vous avez appris.

1. Collaborez avec votre agent pour rédiger un PRD afin d'utiliser l'API Prompt pour générer un mot caché valide.
2. Concevez la barre de progression du téléchargement et l'interface utilisateur d'intégration de l'IA dans le navigateur.
3. Rédige une spécification pour l'implémentation. (Conseil : Exécutez un agent pour vous assurer qu'il a utilisé la syntaxe d'API correcte.)
4. Développez votre nouvelle fonctionnalité.
5. Déployez-le en production.

9. Conclusion

Félicitations, Vous avez réussi à créer, affiner, améliorer et déployer une application Web moderne, accessible et axée sur l'IA en utilisant les bonnes pratiques de codage agentique.

Ce que vous avez appris

• Workflows d'agents axés sur les produits : découvrez comment le fait de traiter les tâches comme des mini-cycles de vie de produits (PRD → conception → spécification → création) réduit la dette technique, les frais généraux d'examen et les frictions liées aux allers-retours.
• Panneaux d'experts multi-agents : découvrez comment l'exécution de plusieurs sous-agents d'IA peut vous aider à améliorer la qualité et la fidélité de votre travail.
• PRD vs document de conception : pourquoi séparer le champ d'application fonctionnel (plan) de l'architecture technique (spécifications) est un processus plus évolutif et précis que l'incitation à la fonctionnalité zero-shot.
• Déploiement fluide : découvrez comment utiliser les serveurs MCP (comme Firebase MCP) pour simplifier l'accès aux systèmes tiers, comme le déploiement de votre site.