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. 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. Cursor, l'éditeur dans lequel vous piloterez l'agent : cursor.com. Créez un compte (votre adresse e-mail personnelle ou scolaire suffit).
  4. Un navigateur Chrome à jour.

Choisir et brancher votre agent IA. Dans Cursor, vous installez le plugin (extension d'agent) de l'IA que vous utiliserez pour construire le site :

  • Sans abonnement payant : utilisez les free tiers de Codex ou de Mistral — largement suffisants pour ce projet si vous préparez bien vos demandes.
  • Avec un abonnement (ChatGPT Plus, Claude Pro, Gemini Advanced, etc.) : branchez l'IA de votre choix.

Peu importe l'agent choisi : le cahier des charges, les maquettes et la façon de piloter restent les mêmes. Notez simplement dans votre journal de pilotage quel agent vous avez utilisé.

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 Cursor :

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.

Ordinateur verrouillé ? Si votre poste refuse l'installation (ordinateur d'entreprise, droits administrateur manquants), prévenez l'intervenant dès la séance 2 pour trouver une solution avant la séance 3.

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 Cursor, ouvrez le dossier via « Clone repository » (ou File > Open Folder après un git clone) 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). Le lire vous évitera de rester bloqué pendant la construction.

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. Selon l'agent branché dans Cursor, les libellés peuvent varier, mais l'idée est la même :

  • Mode agent / planification : l'IA 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).
  • Mode rapide / chat : l'IA exécute ou répond immédiatement. À utiliser pour les petites retouches (changer une couleur, corriger un texte) ou pour poser une question sans modifier le code.

2. Relisez le plan avant de valider. Quand 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. Les free tiers (Codex, Mistral…) sont limités. Préparez vos demandes à l'avance, réservez l'agent aux tâches de construction, et faites vos rédactions (cahier des charges, articles) dans une IA conversationnelle plutôt que dans Cursor.

Votre première mission

Lancez-vous en mode agent / planification, 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.

Dès que ces trois modèles tiennent, passez à la mise en ligne (étape 6) : n'attendez pas que le site soit terminé.

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. Mettre en ligne et déclarer le site dans la Search Console →