1 · Elle ne devine pas
« Fais-moi un joli site » donne un résultat générique. L’IA comble les vides avec la moyenne de ce qu’elle a vu. Chaque vide que vous remplissez, c’est un choix qui vous appartient.
Le but de tout ce site
Diriger une IA avec les bons mots.
Une IA qui code est un exécutant brillant mais littéral. Elle ne devine pas : elle répond au niveau de précision (et au vocabulaire) que vous lui donnez. Voici comment parler pour obtenir exactement ce que vous imaginez.
2 · Elle suit votre vocabulaire
Dites « truc qui s’ouvre » et elle improvise. Dites « modale avec overlay, fermeture par Échap » et elle construit exactement ça. Le bon mot est un raccourci vers des centaines de décisions.
3 · On avance par itérations
Le premier jet est un brouillon. Le talent, c’est de savoir nommer l’écart entre ce qu’on voit et ce qu’on veut : « plus d’espace entre les cartes », « le hover est trop brusque ».
La méthode
Les 5 questions : Quoi · Où · Quand · Look · Limites
Avant d’envoyer un prompt, vérifiez que vous avez répondu à ces cinq questions. Même rapidement. Les composants du catalogue vous donnent les mots pour y répondre.
- 1
Quoi ?
Le nom exact du composant.
« Une modale de confirmation »
- 2
Où ?
Sa place dans la page.
« Dans le header, à droite du menu »
- 3
Quand ?
Le déclencheur et la réaction.
« Au clic sur Supprimer, elle apparaît en fondu »
- 4
Look ?
Style, couleurs, formes, mouvement.
« Coins arrondis 16px, ombre douce, violet #5b3df5 »
- 5
Limites ?
Contraintes et critère de réussite.
« Sans librairie, utilisable au clavier, ferme avec Échap »
💡
La règle d’or : une demande = un changement. Si vous demandez le header, la modale et le footer en même temps, vous ne saurez pas lequel est cassé.
Avant / après
Le même souhait, deux façons de le dire
Basculez entre le prompt vague et le prompt précis. Remarquez combien de décisions sont prises pour vous dans le premier cas.
Outil
Le générateur de prompts
Choisissez un composant, cochez les options, et obtenez un prompt complet à copier-coller dans votre IA préférée.
Votre prompt
Astuce : collez-le tel quel, puis ajustez les mots qui ne vous ressemblent pas. Avant de coder, vous pouvez ajouter : « Pose-moi les questions dont tu as besoin. »
Traducteur
« Je dis… » → « Je devrais dire… »
Les formulations de tous les jours, et leur équivalent précis. Cliquez sur une ligne pour copier la bonne formulation.
Ajuster
Les 7 curseurs du design
Pour retoucher un résultat, pensez « curseur » : un paramètre qu’on pousse plus ou moins. Voici le mot, la propriété CSS qu’il cache, et la phrase.
Quand ça ne marche pas
Décrire un bug comme un·e pro
« Ça marche pas » est le pire prompt du monde. Un bon rapport de bug tient en 5 lignes, et l’IA le corrige du premier coup bien plus souvent.
Vos 4 outils de diagnostic
- Inspecteur — clic droit → Inspecter. Voir le HTML et les styles réellement appliqués à un élément.
- Console — F12 → Console. Les erreurs JavaScript s’y affichent en rouge : copiez-les à l’IA.
- Mode responsive — dans les outils, l’icône téléphone/tablette pour tester un autre écran.
- Rechargement forcé — Ctrl/Cmd + Maj + R pour contourner le cache.
Modèle de rapport de bug
Attendu : la modale se ferme quand je clique sur le fond sombre. Obtenu : rien ne se passe, elle reste ouverte. Où : page Contact, composant « modale de confirmation » Appareil : iPhone 14, Safari (largeur 390px) Étapes : 1. Cliquer sur « Supprimer » 2. La modale s’ouvre 3. Cliquer sur le fond sombre Console : Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') Capture : (jointe) Déjà essayé : rechargement forcé, ça ne change rien. Corrige uniquement ce bug et dis-moi ce que tu as modifié.
Le workflow
La boucle du vibecoding
Un cycle court, répété. Chaque tour vous rapproche du résultat et vous apprend un mot de plus.
1
Décrire
Les 5 questions. Un seul changement.
→
2
Générer
L’IA propose du code. Demandez un plan d’abord si c’est gros.
→
3
Tester
Dans le navigateur, sur mobile, au clavier.
→
4
Nommer l’écart
« Attendu / obtenu ». Utilisez le vocabulaire.
↻
🛟 Garde-fous
- Faites un commit (ou une copie) avant chaque grosse modification.
- Ajoutez : « Ne modifie rien d’autre. »
- Demandez : « Explique ce que tu as changé en 3 lignes. »
- Si ça part en vrille, repartez d’une version qui marchait plutôt que de patcher à l’infini.
- Gardez un fichier de « règles du projet » (couleurs, polices, composants existants) à rappeler à l’IA.
🧠 Prompts « méta » à garder sous la main
Cliquez sur un prompt pour le copier.
À vous de jouer.
Testez ce que vous avez retenu avec le quiz, ou retournez au catalogue pour piocher de nouveaux mots.