5. Installer votre environnement et prendre en main l’agent

Objectif : installer vos outils, récupérer le projet de départ et apprendre à piloter l'agent avant de lancer la construction.

Grâce à l'étape 4, vous avez une idée précise de ce à quoi doit ressembler votre site. Avec WordPress, vous seriez parti à la recherche du thème le plus proche. Ici, vous partez d'un projet de départ volontairement neutre (le « starter »), et c'est l'agent qui va lui donner l'allure de votre maquette.

Avant de commencer : installer l'environnement

Vous aurez besoin de 4 choses sur votre ordinateur, et de 2 comptes en ligne.

Sur votre ordinateur :

  1. Node.js (version LTS), le moteur qui fait tourner Astro : nodejs.org.
  2. Git, l'outil qui enregistre chaque version de votre site : git-scm.com.
  3. Antigravity, l'éditeur avec son agent : antigravity.google. Connectez-vous avec votre compte Google de l'école.
  4. Un navigateur Chrome à jour.

Sous Windows, le plus simple est d'ouvrir PowerShell et de taper :

winget install OpenJS.NodeJS.LTS
winget install Git.Git

Si PowerShell refuse ensuite d'exécuter des commandes avec un message d'erreur sur les « scripts désactivés », tapez cette commande puis redémarrez Antigravity :

Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

En ligne : créez un compte gratuit sur GitHub (le « coffre-fort » de votre code) et sur Netlify (l'hébergeur de votre site). Utilisez la même adresse e-mail pour les deux, et connectez-vous à Netlify avec votre compte GitHub.

Récupérer le starter

  1. Rendez-vous sur le dépôt du starter : [lien du starter].
  2. Cliquez sur « Use this template » puis « Create a new repository ». Donnez-lui le nom de votre site.
  3. Dans Antigravity, choisissez « Clone repository » et collez l'adresse de votre nouveau dépôt.
  4. Une fois le projet ouvert, demandez à l'agent : « Installe les dépendances du projet et lance le serveur de développement. » Il vous donnera une adresse locale (du type http://localhost:4321) pour voir votre site dans le navigateur.

Prenez le temps de lire le fichier README.md du starter : il explique où se trouve chaque chose (pages, articles, images, styles). C'est l'équivalent de la documentation d'un thème WordPress : très important pour ne pas rester bloqué pendant la conception !

Enfin, complétez la section « Identité du projet » du fichier de règles avec votre résumé de cahier des charges (cf. étape 4).

Apprendre à piloter l'agent

Piloter un agent, c'est un peu comme travailler avec un prestataire très rapide mais qui ne vous connaît pas. Quelques principes à respecter :

1. Choisissez le bon mode. L'agent propose deux modes de conversation :

  • Planning : l'agent réfléchit, découpe la tâche et vous présente un plan avant d'agir. À utiliser pour les tâches importantes (construire une page, créer un composant).
  • Fast : l'agent exécute immédiatement. À utiliser pour les petites retouches (changer une couleur, corriger un texte).

2. Relisez le plan avant de valider. En mode Planning, l'agent produit un plan d'implémentation. Lisez-le comme vous reliriez un devis : s'il prévoit quelque chose que vous n'avez pas demandé, ou s'il oublie un élément, corrigez-le avant qu'il ne se mette au travail. C'est là que vous gagnez le plus de temps.

3. Une demande = une tâche. « Fais-moi tout le site » donne un résultat impossible à corriger. Demandez une page ou un élément à la fois, vérifiez, puis passez au suivant.

4. Vérifiez toujours dans le navigateur, sur ordinateur et en vue mobile (dans Chrome : clic droit > Inspecter > icône du téléphone). Ne vous fiez jamais au simple « c'est fait » de l'agent.

5. Enregistrez chaque étape validée. Quand un résultat vous convient, demandez à l'agent : « Fais un commit avec un message clair qui décrit ce qui a été fait. » Si la suite tourne mal, vous pourrez toujours revenir à cette version. C'est votre sauvegarde.

6. Soyez précis quand ça ne va pas. « C'est moche » ne mène nulle part. « Le titre de la page d'accueil est trop grand sur mobile, il passe sur 4 lignes : réduis-le pour qu'il tienne sur 2 » mène quelque part. N'hésitez pas à joindre une capture d'écran.

7. Économisez votre quota. Votre quota d'agent est limité. Préparez vos demandes à l'avance, utilisez le mode Fast pour les petites retouches, et faites vos rédactions (cahier des charges, articles) dans une IA conversationnelle plutôt que dans Antigravity.

Votre première mission

Lancez-vous en mode Planning, en joignant vos maquettes et votre cahier des charges :

« Voici mon cahier des charges et mes maquettes. Applique ma charte graphique au site (couleurs, typographies, style général), puis construis la page d'accueil en suivant la maquette jointe. Utilise des textes provisoires pour l'instant. Avant de commencer, liste-moi les points de mon cahier des charges qui te semblent ambigus. »

Vérifiez le résultat, corrigez, faites un commit. Puis faites de même pour le modèle d'article et pour la page de liste des articles.

Pensez à votre compte-rendu : notez au fil de l'eau les demandes qui ont bien marché, celles qui ont échoué et comment vous avez corrigé le tir. Vous en aurez besoin à l'étape 9.

← 4. Définir votre cahier des charges graphique & technique · 6. Remplir les pages & écrire les premiers articles →