Coder avec ChatGPT ou Gemini : guide du débutant en vibe coding

Le vibe coding consiste à décrire ce que tu veux avec des mots simples et à laisser ChatGPT ou Gemini écrire le code. Pour bien le faire en débutant, demande des fichiers entiers, une petite étape à la fois, et enregistre chaque version qui marche. L’extension gratuite AI Code Harvester liste tous les fichiers de la conversation et les télécharge en un clic, donc plus besoin de faire défiler pour trouver le code. Elle tourne dans ton navigateur et ne demande aucun compte.

Ce qu’est le vibe coding, et où les débutants se bloquent

En vibe coding, tu n’écris pas le code toi-même. Tu dis à l’IA quoi construire (une page pour ma boulangerie), elle écrit les fichiers, tu les testes et tu dis quoi changer. C’est une vraie façon de commencer, car tu vois un résultat en quelques minutes. Le souci arrive au bout d’une heure. La conversation est devenue très longue, le code est éparpillé sur de nombreuses réponses et tu fais défiler vers le haut et le bas pour retrouver la dernière version de chaque fichier. Tu copies, tu colles, tu perds le fil et tu casses ce qui marchait. Les habitudes ci-dessous règlent l’essentiel.

Sept habitudes pour coder plus facilement avec une IA

1. Commence par une phrase claire. Dis ce que tu construis, pour qui et à quoi ça doit ressembler. Un site d’une page pour un promeneur de chiens, avec une photo, des tarifs et un formulaire de contact. Un objectif clair vaut mieux qu’un long prompt.
2. Demande le fichier complet à chaque fois. Écris : Montre toujours le fichier complet, pas seulement les lignes modifiées. Les morceaux partiels sont la première raison pour laquelle les débutants collent le code au mauvais endroit.
3. Fais nommer chaque fichier par l’IA. Demande-lui d’écrire le nom et l’extension au-dessus de chaque bloc de code, comme index.html ou style.css. Enregistre-le comme règle permanente : dans ChatGPT, va dans Settings → Personalization → Custom Instructions.
4. Change une seule chose à la fois. Une demande, puis un test. Si tu demandes dix changements d’un coup et que quelque chose casse, tu ne sauras pas lequel est en cause.
5. Recolle le message d’erreur dans la conversation. Quand la page est blanche ou qu’un bouton ne fait rien, colle le texte exact de l’erreur et écris corrige ça. Pas besoin de la comprendre pour l’instant.
6. Enregistre une version qui marche avant chaque gros changement. Télécharge les fichiers, mets-les dans un dossier et garde cette copie. Si la réponse suivante casse tout, tu reviens en arrière en une minute.
7. Demande pourquoi, avec des mots simples. Dis explique ce que fait cette partie comme si j’étais nouveau. Un court cours sur les bases en parallèle aide beaucoup, car tu repères quand l’IA se trompe.

L’aide qui met fin au défilement : AI Code Harvester

• Une liste de fichiers au lieu d’une longue conversation. Le panneau montre chaque bloc de code de la dernière réponse sous forme de ligne avec le nom du fichier et un point de couleur selon le type.
• Copier ou sauter. Chaque ligne a un bouton Copy et un bouton à flèche qui amène la conversation jusqu’à ce bloc.
• Choisis ce qui est enregistré. Coche ou décoche Include in download pour chaque fichier.
• Un clic pour tout. Download all as ZIP enregistre toute la réponse dans un ZIP. Tu préfères des fichiers séparés ? Passe sur 1-by-1.
• Petits plus. Un bouton Jump to Bottom, un curseur d’opacité pour que le panneau ne cache pas la conversation et un bouton qui explique la configuration.
• Il reste où tu le mets. Déplace-le, redimensionne-le ou réduis-le, et il peut mémoriser sa position.

Tu peux aussi changer l’apparence. Dans les réglages, tu choisis l’une des quatre couleurs d’accent : violet, bleu, vert ou ambre, et tu décides où vont les fichiers : un dossier AI_Code_Harvester dans Téléchargements, directement dans Téléchargements, ou demander à chaque fois. La configuration prend une minute : ajoute-la depuis le Chrome Web Store et ouvre ChatGPT ou Gemini.

Pourquoi l’installer dès le premier jour

Quand on débute, on fait beaucoup de petits essais, et chacun produit des fichiers. Sans aide, chacun est un travail manuel : défiler, sélectionner, copier, coller dans un fichier, le nommer. Avec Harvester, c’est un clic, et les fichiers portent déjà les bons noms, donc le dossier de ton projet reste propre dès le premier jour. Cela rend l’habitude six (enregistrer une version qui marche) presque gratuite, et c’est pour ça que l’extension est la plus utile au début. Elle est gratuite, ne marche que sur chatgpt.com et gemini.google.com, et tes conversations restent sur ton ordinateur. Plus d’infos sur la page AI Code Harvester.

Les limites, en toute honnêteté

• Elle ne récupère que les blocs de code. Si l’IA ne donne qu’un PDF, une image ou un lien de fichier, il n’y a rien à enregistrer à l’écran.
• Elle ne recrée pas les dossiers. Le ZIP est à plat, tu ranges les fichiers dans des dossiers toi-même.
• Elle n’écrit ni ne corrige le code. C’est toujours le travail de l’IA, et le test reste le tien.
• Les vues Canvas (la fenêtre latérale que certaines conversations ouvrent) peuvent ne pas être trouvées. Demande à l’IA de coller le code dans la conversation.

Tu connais déjà la partie ZIP ? Le pas-à-pas est dans notre guide pour télécharger le code d’une IA en ZIP.

Bon à savoir avant de commencer

FAQ