Apprendre à écrire de bons prompts avec Codex

Introduction

Codex est un outil d'une puissance exceptionnelle. Il peut analyser une base de code entière, déduire des règles métier complexes et rédiger des centaines de lignes parfaites en quelques secondes.

Pourtant, il possède un défaut fondamental : il ne devinera jamais ce que vous avez en tête.

La qualité des réponses que vous obtiendrez de Codex dépendra presque exclusivement de la qualité de vos demandes. Plus votre instruction sera claire, structurée et précise, plus le résultat sera rapide et pertinent.

Utilisons une analogie. Demander de l'aide à Codex revient à demander un itinéraire à un chauffeur de taxi. Si vous montez dans la voiture et dites simplement "Je veux aller quelque part de sympa", le chauffeur va rouler au hasard, et vous risquez d'être déçu. Si vous dites "Emmenez-moi à la gare centrale en évitant l'autoroute", la réponse sera immédiate, exacte et répondra parfaitement à vos contraintes.

Ce chapitre constitue la fondation de votre nouvelle méthode de travail. Il vous apprendra à devenir un excellent copilote.

Qu'est-ce qu'un prompt ?

En intelligence artificielle, le mot "prompt" désigne tout simplement l'instruction ou la question que vous adressez à la machine. C'est le texte que vous tapez dans le terminal pour déclencher une action.

Un prompt peut être extrêmement basique :

Génère une liste de couleurs.

Il peut aussi être beaucoup plus sophistiqué :

Analyse le fichier style.css et crée une liste des couleurs utilisées, en les classant par fréquence d'apparition et en donnant leur code hexadécimal.

Dans les deux cas, vous avez rédigé un prompt. Mais le second produira un résultat infiniment plus utile pour votre projet.

Pourquoi certains prompts fonctionnent mieux que d'autres ?

Pour bien comprendre la mécanique, rien ne vaut l'analyse d'exemples concrets. Voici 15 situations du quotidien où un mauvais prompt conduit à l'échec, et comment le transformer en instruction gagnante.

Les éléments d'un excellent prompt

Un prompt parfait ressemble à une recette de cuisine. Il ne doit laisser aucune place au hasard. Pour qu'il soit inattaquable, assurez-vous d'y inclure systématiquement ces 5 éléments essentiels.

1. Le contexte

Définition : C'est la situation actuelle. Sur quel projet travaillez-vous ? Quel est le langage ? Quelle est la page concernée ?
Pourquoi c'est important : Parce que coder un bouton sur un blog WordPress ou sur une application mobile React n'implique pas du tout le même code.
Exemple : "Je travaille sur un site vitrine en pur HTML/CSS. Sur la page contact.html..."

2. L'objectif

Définition : C'est le verbe d'action. Que voulez-vous faire exactement ? (Créer, modifier, corriger, expliquer).
Pourquoi c'est important : Cela donne la direction de travail principale de l'IA.
Exemple : "...je souhaite ajouter un formulaire de demande de devis."

3. Les contraintes

Définition : Ce sont vos règles strictes. Ce qu'il ne doit PAS faire.
Pourquoi c'est important : C'est le bouclier qui empêche l'IA de casser le reste de votre travail.
Exemple : "Tu dois utiliser uniquement le CSS existant, sans rajouter de nouvelles couleurs."

4. Le résultat attendu

Définition : Le comportement final de l'application vu par l'utilisateur.
Pourquoi c'est important : Cela permet à Codex de valider que sa logique remplit le contrat.
Exemple : "Lorsqu'on valide le formulaire, un message vert 'Envoyé' doit s'afficher sous le bouton."

5. Le format de réponse

Définition : La manière dont vous souhaitez que Codex vous présente l'information.
Pourquoi c'est important : Vous évite d'avoir à lire 40 lignes d'explications si vous vouliez juste un morceau de code.
Exemple : "Propose uniquement le code HTML de la section, sans aucune explication de texte autour."

Les prompts à éviter

Pour gagner du temps, bannissez de votre vocabulaire toutes ces requêtes génériques :

• "Corrige ça." → Trop vague. Dites : "Corrige la fonction de tri qui renvoie des résultats inversés."
• "Fais mieux." → Totalement subjectif. Dites : "Rends ce design plus moderne en aérant les marges."
• "Optimise mon projet." → Risque massif de casse. Dites : "Réduis la taille de la grande image sur la page d'accueil."
• "Ajoute des fonctionnalités." → Lesquelles ? Dites : "Ajoute un moteur de recherche dans la barre de navigation."
• "Fais un site e-commerce." → Projet trop vaste. Dites : "Génère la maquette HTML d'une page produit."

Les prompts efficaces classés par catégorie

Voici 20 exemples de prompts redoutablement efficaces, que vous pouvez copier et adapter à vos besoins.

Comprendre un projet ou un fichier

• Explique-moi le rôle du fichier config.js en une phrase simple.
• Dresse la liste des 3 dossiers les plus importants de ce projet et résume leur utilité.
• Lis cette fonction complexe et ajoute des commentaires français au-dessus de chaque étape clé.

Créer une page ou un composant

• Crée le code HTML et CSS d'une carte de présentation avec une photo ronde, un nom en gras et un bouton "Voir le profil".
• Génère un tableau HTML de 4 colonnes (Nom, Prénom, Email, Rôle) avec des bordures grises.
• Écris le code d'un pied de page simple contenant le copyright 2026 et 3 liens légaux.

Corriger un bug

• Le texte du titre H1 déborde sur l'image sur les écrans mobiles. Propose une correction CSS.
• Le script app.js me renvoie l'erreur "Cannot read property 'value'". Trouve l'origine du problème et corrige-la.
• Mon formulaire recharge la page au lieu d'afficher le message. Ajoute le code pour empêcher ce rechargement.

Ajouter une fonctionnalité

• Ajoute une icône en forme d'œil dans le champ mot de passe pour permettre de l'afficher en clair au clic.
• Modifie le menu pour que la couleur de fond passe du noir au bleu foncé lorsqu'on passe la souris dessus.
• Ajoute un script qui affiche la date d'aujourd'hui automatiquement en haut de la page.

Optimiser et refactoriser

• Ce code HTML contient 10 boutons presque identiques. Utilise une classe CSS commune pour factoriser le style.
• Simplifie les conditions (if/else) de ce fichier pour le rendre plus lisible sans en changer la logique.
• Nettoie le fichier CSS en supprimant toutes les règles qui ne sont plus utilisées.

Travailler sur les données

• Transforme cette liste de noms (séparés par des virgules) en un fichier JSON propre.
• Écris un script Python qui lit le dossier "Images" et renomme tous les fichiers en minuscules.
• Trie cette liste de clients par ordre alphabétique.

Générer du contenu annexe

• Rédige une documentation technique claire expliquant comment installer et lancer ce projet.
• Génère un fichier de configuration standard (.gitignore) pour un projet web classique.

Demander à Codex de réfléchir étape par étape

L'une des techniques les plus puissantes en intelligence artificielle s'appelle le "Chain of Thought" (la chaîne de pensée).

Si vous demandez directement un code complexe, l'IA risque de sauter des étapes logiques. Si vous lui demandez de réfléchir à haute voix avant de coder, le résultat sera exceptionnel.

❌ Sans étape :
Crée un système de calcul de facture avec TVA et réductions.

✅ Avec étapes de réflexion :
Nous devons créer un système de calcul de facture. Avant d'écrire le code, liste d'abord les étapes logiques nécessaires (TVA, vérification des réductions, sous-total). Attends ma validation avant de générer le code.

Cette approche est fantastique, car elle vous permet de vérifier la logique mathématique ou technique de l'IA avant qu'elle ne modifie vos fichiers.

Être précis sur les contraintes

Limiter la zone d'action de Codex est essentiel pour protéger votre projet. N'hésitez pas à utiliser des formulations strictes :

• "Ne modifie que la couleur des textes, ne touche pas aux marges."
• "N'ajoute aucune nouvelle bibliothèque externe, fais tout en code natif."
• "Concentre-toi uniquement sur le fichier `header.html`, ignore les autres."

L'IA obéira sagement. C'est le meilleur moyen de conserver un environnement de développement stable.

Obtenir exactement le format souhaité

Parfois, vous n'avez pas besoin de code, mais de théorie. Il suffit de le préciser :

• "Liste les avantages sous forme de puces."
• "Résume cette erreur en un seul paragraphe."
• "Dresse un tableau comparant les deux solutions techniques."
• "Propose la solution sous forme de code uniquement, sans commentaire."

Les erreurs les plus fréquentes

Même avec de la bonne volonté, certaines erreurs de prompt reviennent souvent chez les débutants.

• Symptôme : La réponse de Codex s'arrête au milieu.
  Cause : Votre demande génère un code trop massif.
  Bonne pratique : Demandez composant par composant, et tapez "Continue" s'il s'arrête.
• Symptôme : L'IA utilise une vieille version d'un langage.
  Cause : Vous n'avez pas précisé l'environnement.
  Bonne pratique : Précisez "Utilise la syntaxe moderne ES6 pour le JavaScript".
• Symptôme : Le design proposé ne correspond pas du tout au vôtre.
  Cause : Vous n'avez pas mentionné vos classes CSS existantes.
  Bonne pratique : "Reprend les couleurs de la classe `.header-main`".
• Symptôme : L'IA crée trois nouveaux fichiers non sollicités.
  Cause : Manque de contraintes.
  Bonne pratique : "Ne modifie que le fichier actuellement ouvert".
• Symptôme : Le code proposé fonctionne, mais il a effacé vos commentaires.
  Cause : L'IA a optimisé le code entier.
  Bonne pratique : "Conserve absolument tous les commentaires existants dans ta réponse".
• Symptôme : Codex tourne en rond et propose toujours la même erreur.
  Cause : L'historique de la conversation est embourbé.
  Bonne pratique : Utilisez `/clear` ou ouvrez un nouveau terminal pour repartir à zéro sur de bonnes bases.
• Symptôme : Codex génère des alertes de sécurité dans le terminal.
  Cause : Vous avez demandé d'exécuter un script depuis le web.
  Bonne pratique : Ne demandez à l'IA d'installer des paquets que si vous comprenez leur rôle.
• Symptôme : Vous passez 10 minutes à rédiger un prompt énorme, mais la réponse est décevante.
  Cause : Un prompt massif est souvent rempli de contradictions.
  Bonne pratique : Divisez votre tâche en 4 petits prompts d'une minute chacun.
• Symptôme : La réponse utilise une bibliothèque (ex: Tailwind) que vous n'avez pas.
  Cause : Vous n'avez pas spécifié l'approche stylistique.
  Bonne pratique : "Je n'utilise pas de framework. Utilise du CSS pur (vanilla)".
• Symptôme : Le texte généré par Codex semble froid et robotique sur votre site.
  Cause : C'est la tonalité par défaut.
  Bonne pratique : "Rédige le contenu avec un ton chaleureux, naturel et dynamique".
• Symptôme : L'IA invente une fonction qui n'existe pas dans le langage.
  Cause : Hallucination liée à un prompt paradoxal.
  Bonne pratique : "Vérifie dans la documentation officielle que cette méthode existe bien".
• Symptôme : Il modifie le backend au lieu de l'interface.
  Cause : Le mot "bouton" peut représenter la logique ou le visuel.
  Bonne pratique : "Travaille uniquement sur l'affichage HTML, pas sur le fichier de sauvegarde".
• Symptôme : La réponse arrive trop vite et est incomplète.
  Cause : Vous avez appuyé sur Entrée par erreur avant de finir.
  Bonne pratique : Prenez votre temps, lisez, et formulez de nouveau si nécessaire.
• Symptôme : Vous avez perdu votre précédent prompt génial.
  Cause : Vous n'avez pas gardé de trace.
  Bonne pratique : Enregistrez vos meilleurs prompts dans un fichier texte "mes-prompts.md".
• Symptôme : Vous vous énervez contre la machine.
  Cause : Frustration humaine naturelle face à la rigidité technique.
  Bonne pratique : L'IA ne comprend pas l'agressivité. Soyez factuel. "Ce code est faux car X. Refais Y".

Bonnes pratiques d'organisation

Atelier pratique : Améliorez vos propres prompts

Exercez-vous à repérer les failles dans ces prompts courants et observez comment ils ont été solidifiés.

1. Initial : Met le texte au centre.
   Analyse : Quel texte ? Sur quelle page ? Comment (marges, flexbox) ?
   Amélioré : Centre le titre principal (H1) de la page d'accueil horizontalement en utilisant la propriété CSS text-align.
2. Initial : Fais marcher le bouton.
   Analyse : Le bouton doit faire quoi ? Un lien ? Un calcul ? Une alerte ?
   Amélioré : Ajoute un écouteur d'événement sur le bouton "Submit" pour qu'il affiche "Bravo" dans la console lorsqu'on clique dessus.
3. Initial : Crée moi un blog complet.
   Analyse : Beaucoup trop ambitieux pour un seul prompt.
   Amélioré : Pour commencer mon blog, génère le code HTML de la structure de base d'un article, avec un titre, une date et un paragraphe d'introduction.
4. Initial : Rend ça plus joli.
   Analyse : Joli ne veut rien dire techniquement.
   Amélioré : Ajoute une couleur de fond gris clair sur la section, et donne au texte une police moderne sans serif comme Roboto.
5. Initial : Explique l'erreur.
   Analyse : Le contexte est absent.
   Amélioré : Dans le fichier `index.js`, j'obtiens une erreur "Syntax Error ligne 12". Explique-moi pourquoi avec un exemple simple.
6. Initial : Change la taille.
   Analyse : Plus grand ? Plus petit ? En pixels ? En pourcentages ?
   Amélioré : Augmente la taille de toutes les images du diaporama pour qu'elles prennent 100% de la largeur de l'écran.
7. Initial : Ajoute du texte ici.
   Analyse : Codex ne voit pas où vous pointez votre doigt (le "ici").
   Amélioré : Insère un paragraphe de texte de présentation (lorem ipsum) juste en dessous de la balise <h2> "Services".
8. Initial : Sécurise l'appli.
   Analyse : Concept trop vague et vaste.
   Amélioré : Vérifie que les mots de passe entrés dans ce formulaire fassent au moins 8 caractères avant de les envoyer.
9. Initial : Trouve le problème.
   Analyse : Quel est le symptôme que vous observez ?
   Amélioré : Quand je clique sur "Suivant", la page met 10 secondes à charger. Analyse la fonction `loadData` pour voir si on peut l'optimiser.
10. Initial : Fais un jeu.
    Analyse : Aucune direction.
    Amélioré : Je veux créer un mini-jeu de Tic-Tac-Toe dans la console. Donne-moi uniquement l'algorithme des règles de victoire pour commencer.

Tableau récapitulatif

Foire aux questions

À retenir

Transition vers le chapitre suivant

La théorie est acquise. Vous savez maintenant pourquoi une consigne floue génère un code flou. Le moment est venu de confronter ces principes à la réalité.

Dans le prochain chapitre, nous allons réaliser de véritables modifications sur un petit projet. Vous expérimenterez la satisfaction de voir votre prompt se transformer en code fonctionnel directement dans votre éditeur.