Conseils pour le Vibe Coding

Prérequis

Vous pouvez commencer avec l’IA de votre choix : ChatGPT, Gemini, Claude… Décrivez ce que vous voulez créer, même si vous ne savez pas encore programmer.

Avec une IA de conversation

Elle peut vous aider à préciser votre idée, écrire du code et expliquer une erreur. Selon les outils disponibles, elle peut aussi créer des fichiers et afficher un aperçu du résultat.

ChatGPT
Gemini
Claude

Pour travailler directement sur le projet

Un assistant comme Claude Code, Codex ou Antigravity facilite les allers-retours : il peut lire et modifier vos fichiers, lancer des commandes et vérifier le résultat, avec les accès que vous lui accordez.

Pour démarrer

Choisissez un outil et connectez-vous. Créez un dossier pour votre projet, ouvrez-le dans votre assistant et gardez un navigateur pour voir votre site. Les liens ci-dessus expliquent comment démarrer avec chaque outil.

Pour commencer

Commencez

Un prompt simple vous permettra de commencer. Exprimez ce dont vous avez besoin en une phrase ou deux.

Itérez

Apportez des précisions, demandez des modifications, avancez par ajouts successifs.

Débuguez

Quelque chose ne fonctionne pas ? Utilisez la console du navigateur (faites simplement un clic droit et choisissez Inspecter). Copiez les messages de la console et donnez-les à votre IA. Elle vous dira quoi faire. Vous pouvez aussi faire des captures d'écran, l'IA comprendra.

Testez

Essayez votre site web dans différents navigateurs. Partagez-le avec d'autres utilisateurs et recueillez leur feedback.

Aller plus loin

Améliorez

Une fois que vous avez un site fonctionnel, enrichissez-le. Ajoutez un mode sombre ou la possibilité de changer de langue. Assurez-vous que le site est "responsive design".

Soyez accessible

Vérifiez le contraste des couleurs, la taille des caractères, la lisibilité sur mobile et la navigation au clavier.

Optimisez

Vous pouvez faire deux choses.

Demandez à l'IA de relire le code et de l'optimiser. Demandez-lui de respecter le DRY (Don't Repeat Yourself). Il s'agit d'avoir un code concis.
Vous pouvez aussi demander de refactoriser le code. Après de multiples ajouts, l'IA oublie souvent de retirer des portions de code qui sont parfois inutiles et alourdissent le site.

Sécurisez

Demandez à votre IA de procéder à un audit complet de votre site, d'identifier les bugs et les failles de sécurité. Vous obtiendrez un rapport complet. Faites alors jouer les IA entre elles. Soumettez ce rapport à une autre IA et procédez aux modifications nécessaires.

Sauvegardez

Avant une grosse modification, faites une copie ou utilisez Git.

Accélérez

Vous pouvez aussi dicter vos instructions au lieu de tout taper. Avec une app comme MacWhisper, vous gagnerez du temps et dialoguerez plus naturellement avec votre IA.

Astuces supplémentaires

Séparez

Il est peut-être plus simple d'avoir un seul fichier regroupant tout. Mais une bonne pratique consiste à séparer le HTML, le CSS et le JavaScript.
Allégez

Vous insérez des images ? Veillez à ce qu'elles ne soient pas trop lourdes et compressez-les avec Tinyfy.
Enrichissez

Vous pouvez ajouter une petite base de données avec Firebase ou des fonctions d'intelligence artificielle avec l'API de Google AI Studio ou l'API de MiniMax, qui est très abordable.
Déployez

Si vous n'avez pas d'hébergement en ligne, utilisez GitHub ou mieux Netlify (vous pourrez même avoir une page de contact sans vous compliquer la vie).

Icones

Évitez les émojis bariolés et demandez à Codex ou Claude Code d'utiliser des icônes du type Font Awesome. L'IA saura de quoi il s'agit.
Polices

Envie d'essayer autre chose qu'Arial ? Utilisez Google Fonts pour insérer différentes polices (en veillant à leur lisibilité).
Couleurs

Soyez précis dans vos demandes. Trouvez le code hexadécimal sur w3schools ou même des palettes sur color-hex.
Inspiration

Vous trouvez l'esthétique de votre site déprimante ? Faites un tour sur CodePen, vous trouverez plein d'idées et vous pourrez même donner le code à l'IA.

Prompts pratiques

Choisissez un modèle, adaptez-le à votre projet et copiez-le dans votre IA.

01 Créer un premier site

Le sujet de votre site

Le prompt s’adapte au fil de votre saisie.

Votre palette de couleurs

Cliquez sur une couleur ou modifiez son code hexadécimal.

Boutons et liens
Fond
Cartes
Texte
Bordures

Base : Open Color

Aperçu de la palette

Mon site

Une interface à vos couleurs.

Découvrir

DM Sans · Google Fonts

Font Awesome 6

Votre prompt

Crée un site web sur le thème suivant : [sujet à compléter].

Prévois une page d’accueil avec une présentation, trois rubriques adaptées au sujet et un pied de page. Garde une interface sobre, aérée et facile à utiliser, sur mobile comme sur ordinateur.

Utilise les icônes gratuites de Font Awesome 6 et la police DM Sans de Google Fonts.

Applique cette palette de couleurs :
- Boutons et liens : #1971C2
- Fond : #F8F9FA
- Cartes : #FFFFFF
- Texte : #212529
- Bordures : #DEE2E6

Sépare le HTML, le CSS et le JavaScript dans trois fichiers. Assure une bonne lisibilité et une navigation au clavier.

02 Vérifier l’accessibilité

Remplacez le texte entre crochets et fournissez à votre IA la page ou le code à examiner.

Ressources utiles

Complétez les vérifications automatiques par des tests manuels, notamment au clavier.

Votre prompt

Examine l’accessibilité de [page ou projet] en t’appuyant sur les WCAG 2.2, niveau AA.

Vérifie les contrastes, la structure des titres, les alternatives des images, les libellés des boutons et formulaires, la navigation au clavier, la visibilité du focus, le zoom et les animations.

Pour chaque problème, indique l’élément concerné, l’impact pour l’utilisateur et la correction proposée. Classe les corrections par priorité.

Distingue ce que tu as effectivement testé de ce qui reste à vérifier manuellement. Propose ensuite les corrections et une courte liste de tests pour les valider.

03 Examiner la sécurité

Remplacez le texte entre crochets et fournissez à votre IA la page ou le code à examiner.

Ressources utiles

OSS Scanner propose des analyses gratuites et périodiques aux projets open source admissibles, après inscription et acceptation. Ses rapports peuvent ne pas avoir été revus par un humain.

Votre prompt

Analyse la sécurité de [mon projet] à partir du code et de la configuration disponibles, en t’appuyant sur les recommandations OWASP.

Identifie les risques pertinents pour ce projet : secrets exposés, dépendances vulnérables, injections, accès non autorisés, gestion des sessions et données sensibles.

Pour chaque constat, indique sa gravité, son emplacement, les éléments qui le justifient et une correction concrète. Distingue les problèmes confirmés des hypothèses à vérifier.

Présente d’abord le rapport. Pour les corrections retenues, ajoute un test démontrant que le problème est résolu.

Superpouvoirs

Copiez une demande dans votre assistant et adaptez le texte entre crochets.

Remotion

Créer une vidéo

Explications

Animez des textes et des images pour présenter une idée.

GitHub

À copier

Utilise Remotion : https://github.com/remotion-dev/remotion

Crée une vidéo de 30 secondes sur [mon sujet], en français : un titre, trois idées clés, des animations sobres. Montre un aperçu, puis exporte en MP4.

Exemple

Qwen3-TTS

Transformer un texte en audio

Explications

Donnez une voix à vos textes, narrations ou dictées.

GitHub

À copier

Utilise Qwen3-TTS : https://github.com/QwenLM/Qwen3-TTS

Vérifie la compatibilité avec mon ordinateur. Lis [mon texte] en français avec une voix claire et posée, puis enregistre le résultat en MP3.

Exemple

Lecture : Aux champs, Maupassant

Voir le texte

Les deux chaumières étaient côte à côte, au pied d’une colline, proches d’une petite ville de bains. Les deux paysans besognaient dur sur la terre inféconde pour élever tous leurs petits. Chaque ménage en avait quatre. Devant les deux portes voisines, toute la marmaille grouillait du matin au soir.

Remotion + Qwen3-TTS

Créer une vidéo avec voix off

Explications

Associez les animations de Remotion à la voix de Qwen3-TTS.

Remotion Qwen3-TTS

À copier

Utilise Remotion et Qwen3-TTS :
https://github.com/remotion-dev/remotion
https://github.com/QwenLM/Qwen3-TTS

Crée une vidéo d’environ 45 secondes sur [mon sujet], en français, avec une voix off claire et des visuels sobres. Synchronise les scènes avec la narration. Montre un aperçu, puis exporte en MP4 et conserve les fichiers du projet.

Exemple

Leaflet

Ajouter une carte interactive

Explications

Présentez vos lieux sur une carte avec des fiches cliquables.

GitHub

À copier

Utilise Leaflet : https://github.com/Leaflet/Leaflet

Ajoute une carte de [ville ou région] avec [mes lieux] et leurs fiches : description, image ou audio fourni. Respecte le design du site, l’affichage mobile et les attributions. Rends la liste des lieux accessible au clavier.

Exemple

Essayez la carte

Bibliothèque

Horaires et ressources de la bibliothèque.

Three.js

Explorer des molécules en 3D

Explications

Faites tourner des molécules pour observer leurs atomes et leurs liaisons.

GitHub

À copier

Utilise Three.js : https://github.com/mrdoob/three.js

Ajoute une vue 3D de [mes molécules] avec des atomes colorés et leurs liaisons. Permets de choisir une molécule, de la faire tourner et de zoomer à la souris, au toucher et au clavier. Indique sa formule et sa géométrie. Respecte le design du site et l’affichage mobile. Prévois une description accessible si la 3D est indisponible.

Exemple

Essayez la vue 3D

Chargement de la vue 3D…

Glissez pour tourner, pincez pour zoomer. Au clavier : flèches, +, − et R.

HydrogèneH
OxygèneO
CarboneC

H₂O · 2 hydrogènes, 1 oxygène. Une forme coudée, avec un angle d’environ 104,5°.

Modèles simplifiés · Tailles des atomes non proportionnelles.

Aide

Git : garder les versions de votre site

Git enregistre des étapes de votre travail. Vous pouvez comparer les changements et retrouver ce qui a été fait, directement sur votre ordinateur.

Je modifie mes fichiers
git addJe sélectionne les changements
git commitJ’enregistre une version

Saisissez une commande par ligne et appuyez sur Entrée. Les résultats affichés sont des exemples.

Préparer Git sur votre ordinateur

Ouvrez Terminal sur macOS ou Linux, ou Git Bash sur Windows. Vérifiez que Git est installé, puis indiquez votre nom et votre adresse e-mail pour signer vos versions.

Installer Git pour mon système

Remplacez le nom et l’e-mail par les vôtres. L’option --global applique ces réglages à vos projets sur cet ordinateur.

Terminal · exemple

git --version
git config --global user.name "Votre nom"
git config --global user.email "vous@example.com"

Exemple de résultat

git version 2.x.x

Démarrer dans le dossier de votre site

Placez-vous dans le dossier qui contient vos fichiers HTML, CSS et JavaScript. Initialisez Git une seule fois pour ce projet : il crée un dossier .git qui conserve l’historique.

Quels fichiers laisser de côté ?

Avant le premier enregistrement, créez un fichier nommé .gitignore à la racine du projet. Par exemple, ces lignes excluent les fichiers .env et le dossier des dépendances :

.env
.env.*
node_modules/

Remplacez le chemin entre guillemets par celui de votre dossier. Créez aussi le fichier .gitignore ci-dessous. Gardez le dossier .git : il contient vos versions.

Terminal · exemple

cd "chemin/vers/mon-site"
git init -b main
git status

Exemple de résultat

Initialized empty Git repository in …/.git/

Enregistrer une première version

Sélectionnez vos fichiers et .gitignore avec git add, vérifiez les changements préparés avec git diff --cached, puis enregistrez-les avec git commit. Le message décrit cette étape.

Ces noms correspondent au premier prompt de cette page. Adaptez-les aux fichiers de votre projet. Un commit enregistre les changements sélectionnés avec git add.

Terminal · exemple

git add index.html styles.css script.js .gitignore
git diff --cached
git commit -m "Première version du site"

Exemple de résultat

[main (root-commit) a1b2c3d] Première version du site
4 files changed

Enregistrer chaque amélioration

Après avoir changé une couleur dans styles.css et enregistré le fichier dans votre éditeur, examinez la différence, sélectionnez le fichier et créez une nouvelle version.

Répétez ce cycle après chaque changement cohérent. Enregistrer le fichier dans votre éditeur ne crée pas automatiquement un commit.

Terminal · exemple

git status
git diff
git add styles.css
git diff --cached
git commit -m "Ajuste les couleurs"
git status

Exemple de résultat

On branch main
nothing to commit, working tree clean

Lire l’historique de votre travail

Chaque ligne affiche un identifiant et le message d’une version. La plus récente est en haut. Vous voyez ainsi les étapes de votre projet.

Annuler le dernier commit

Si la dernière modification pose problème, commencez par git status. S’il indique « working tree clean », la commande suivante crée un nouveau commit qui annule les changements du dernier, tout en conservant l’historique.

git revert --no-edit HEAD

Si des modifications sont en cours, enregistrez-les ou mettez-les de côté avant de continuer. Cette commande annule le dernier commit ; elle ne sert pas à choisir n’importe quelle ancienne version.

Les identifiants seront différents chez vous. --no-pager affiche la liste directement dans le terminal.

Terminal · exemple

git --no-pager log --oneline -5

Exemple de résultat

d4e5f6a Ajuste les couleurs
a1b2c3d Première version du site

Où sont mes versions ?

Ces commits restent sur votre ordinateur. Pour garder aussi une copie ailleurs ou partager votre code, vous pouvez ensuite relier le projet à un dépôt distant, par exemple sur GitHub.

Le tutoriel officiel de Git

L’inspecteur : comprendre et dépanner une page

Les outils du navigateur permettent de voir le HTML, d’essayer un style et de comprendre pourquoi une action ne fonctionne pas.

01Ouvrir l’inspecteur

Sur votre page, faites un clic droit sur le texte, le bouton ou l’image qui vous intéresse, puis choisissez « Inspecter » ou « Inspecter l’élément ». Un panneau s’ouvre à côté ou en bas de la page.

Ou utilisez le clavier pour ouvrir les outils
Navigateur	Windows / Linux	Mac
Chrome Edge Firefox	`CtrlShiftI`	`CmdOptionI`
Safari	Sur Mac uniquement	`CmdOptionI`

Dans Safari, activer les outils la première fois

Ouvrez Safari → Réglages → Avancés, puis activez les fonctionnalités pour les développeurs web. Le menu Développement et l’option « Inspecter l’élément » deviennent disponibles.

mon-site.local

Mon site

Une page à explorer

Découvrir

02Repérer un élément et essayer son style

Dans l’onglet « Éléments » (ou « Inspecteur » dans Firefox), le HTML de l’élément choisi est surligné. Le panneau « Styles » affiche son CSS. Cliquez sur une valeur, comme une couleur, pour la modifier et voir le résultat.

Ces essais sont temporaires : reportez la modification dans votre fichier CSS pour la conserver. Un rechargement réaffiche normalement le style du site.

Découvrirbutton.action

ÉlémentsConsole

<button class="action">Découvrir</button>

Styles

.action {
  background: #1971c2;
  color: #ffffff;
}

03Lire une erreur dans la console

Ouvrez l’onglet « Console », puis refaites l’action qui pose problème. Un message rouge peut préciser l’erreur, le fichier et la ligne concernés. Cliquez sur « script.js:42 » pour consulter le code à cet endroit.

Copiez le message complet ou faites une capture. Donnez-le à votre IA avec ce que vous avez fait et le résultat attendu.

ÉlémentsConsole

Uncaught ReferenceError: afficherMenu is not defined

script.js:42

Dans cet exemple, le navigateur ne trouve pas la fonction afficherMenu au moment de son appel.

Guides officiels : Chrome · Edge · Firefox · Safari

Mémoriser

Vous répétez souvent les mêmes consignes à votre IA ? Notez vos préférences dans un fichier AGENTS.md : un petit guide qui reste avec votre projet.

01
Créer le fichier

Dans votre éditeur, créez un fichier texte nommé exactement AGENTS.md, à côté de index.html. L’extension .md désigne le Markdown : du texte simple, avec des titres et des listes.
À la racine de votre projet
- mon-site/
- AGENTS.md
- index.html
- styles.css
- script.js
Noter vos préférences

Copiez cet exemple, adaptez les consignes et enregistrez le fichier. Quelques règles précises suffisent. Complétez-les quand une préférence devient récurrente.
Les retrouver à chaque démarrage

Codex lit AGENTS.md au démarrage. Après une modification du fichier, commencez une nouvelle session dans ce projet pour qu’il charge les nouvelles consignes.

Un exemple à personnaliser

AGENTS.md

# Préférences pour ce projet

## Interface
- Garde une interface sobre, lisible et aérée.
- Respecte les couleurs et les composants existants.
- Utilise Font Awesome 6 plutôt que des émojis.
- Prévois un affichage mobile et un mode sombre.
- Veille aux contrastes et à la navigation au clavier.

## Fichiers
- Pour un site sans framework, sépare HTML, CSS et JavaScript.

## Échanges
- Réponds en français, avec des explications courtes.
- Après une modification, indique ce qui a changé et ce que tu as vérifié.

Documentation officielle OpenAI : utiliser AGENTS.md

Prérequis

Avec une IA de conversation

Pour travailler directement sur le projet

Pour démarrer

Pour commencer

Commencez

Itérez

Débuguez

Testez

Aller plus loin

Prompts pratiques

01 Créer un premier site

02 Vérifier l’accessibilité

03 Examiner la sécurité

Superpouvoirs

Explications

À copier

Exemple

Explications

À copier

Exemple

Explications

À copier

Exemple

Explications

À copier

Exemple

Essayez la carte

Bibliothèque

Explications

À copier

Exemple

Aide

Git : garder les versions de votre site

Préparer Git sur votre ordinateur

Démarrer dans le dossier de votre site

Enregistrer une première version

Enregistrer chaque amélioration

Lire l’historique de votre travail

Où sont mes versions ?

L’inspecteur : comprendre et dépanner une page

01Ouvrir l’inspecteur

02Repérer un élément et essayer son style

03Lire une erreur dans la console

Mémoriser

Créer le fichier

Noter vos préférences

Les retrouver à chaque démarrage

Un exemple à personnaliser