+
+ Guide de terrain · v1.0
+Est-ce vibecodé ?
++ Un petit guide pour lire un fichier et décider, sans cérémonie, s’il + a été écrit — ou surtout généré — à l’instinct. Huit signes, des + exemples concrets, une note sur 100. +
+ +
+
+ 8catégories observables
+ 0–100échelle de vibe
+ 2 minpour un premier verdict
+
+
+ À quoi ça sert
++ Vibecoder, c’est coller la sortie d’un assistant, tweaker jusqu’à ce + que « ça marche », et passer à la suite. L’outil n’est pas le + problème. Le problème, c’est le code que plus personne ne peut + expliquer. Ce guide ne chasse pas l’IA : il chasse les traces + laissées quand on n’a pas relu. +
+
+
+ 01
+ Ouvre le fichier
+ Une fonction, un composant, un script. Pas tout le repo d’un coup.
+
+
+ 02
+ Cherche les 8 signes
+ Chaque catégorie a un contre-exemple. Compare, ne compte pas les
+ lignes.
+
+
+ 03
+ Coche le détecteur
+ Absent, léger, présent, criant. Le score se calcule tout seul.
+
+
+ 04
+ Lis le verdict
+ La note est un jeu. La liste des signes, elle, est actionnable.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Les 8 signes
++ Un seul signe ne prouve rien : un humain fatigué commente trop, une + IA bien briefée peut être sobre. C’est le cocktail qui parle. +
+ +01
+
+
+ Le tutoriel dans le code
++ Le fichier raconte ce qu’il fait comme s’il s’adressait à un + débutant. Les commentaires paraphrasent chaque ligne au lieu + d’expliquer une intention, un piège, ou un choix. +
+
+
+
+ Vibecodé
+
+ // This function adds two numbers together
+// It takes a and b, then returns the sum
+function add(a, b) {
+ // Store the result of adding a and b
+ const result = a + b;
+ // Return the result to the caller
+ return result;
+}
+ Plutôt ça
+
+ function add(a, b) {
+ return a + b;
+}
+
+// Arrondi banquier : les totaux caisse
+// doivent matcher le journal N-1.
+function roundMoney(amount) {
+ return Math.round(amount * 20) / 20;
+}+ Règle : un commentaire dit pourquoi, pas ce que fait + déjà le code. +
+02
+
+
+ Les noms jetables
++ Vocabulaire IKEA : data, + item, + result, + obj, + processData. Ça compile. Ça ne + décrit aucun métier. +
+
+
+
+ Vibecodé
+
+ function processData(data) {
+ const result = [];
+ for (const item of data) {
+ const obj = { ...item, value: item.value };
+ result.push(obj);
+ }
+ return result;
+}
+ Plutôt ça
+
+ function invoicesWithTax(invoices) {
+ return invoices.map((invoice) => ({
+ ...invoice,
+ total: invoice.amount * 1.2,
+ }));
+}+ Si tu ne peux pas remplacer data + par un mot du produit (facture, trajet, vote), le nom n’a pas + encore été choisi. +
+03
+
+
+ L’erreur de décoration
++ Un try/catch partout, un + console.log dans le catch, un + commentaire // handle error, et + on continue comme si de rien n’était. +
+
+
+
+ Vibecodé
+
+ try {
+ const data = JSON.parse(raw);
+ return data;
+} catch (error) {
+ console.log("An error occurred:", error);
+ // Handle error gracefully
+}
+ Plutôt ça
+
+ function parseConfig(raw) {
+ try {
+ return JSON.parse(raw);
+ } catch {
+ throw new Error("Config JSON invalide");
+ }
+}+ Attraper une erreur, c’est décider : retry, message utilisateur, + ou arrêt. Logger et avaler, ce n’est pas décider. +
+04
+
+
+ L’usine à gaz
++ Factory, helper, wrapper, context, et un + useMemo pour un booléen. Le + problème tenait en six lignes. La solution en tient soixante. +
+
+
+
+ Vibecodé
+
+ const createToggleFactory = () => {
+ return {
+ createInitialState: () => ({ isEnabled: false }),
+ toggle: (state) => ({ isEnabled: !state.isEnabled }),
+ };
+};
+const factory = createToggleFactory();
+const state = factory.createInitialState();
+ Plutôt ça
+
+ const [enabled, setEnabled] = useState(false);
+
+<button onClick={() => setEnabled((v) => !v)}>
+ {enabled ? "On" : "Off"}
+</button>+ Si tu dois dessiner un schéma pour expliquer un interrupteur, tu + as généré de l’architecture, pas une solution. +
+05
+
+
+ La doc qui répète le code
++ Un JSDoc encyclopédique sur une fonction triviale, des + @param qui recopyent les noms, + zéro info sur les cas limites. +
+
+
+
+ Vibecodé
+
+ /**
+ * Adds two numbers together.
+ * @param {number} a - The first number to add.
+ * @param {number} b - The second number to add.
+ * @returns {number} The sum of a and b.
+ */
+function add(a, b) {
+ return a + b;
+}
+ Plutôt ça
+
+ /** Prix TTC à partir d’un HT déjà en centimes. */
+function ttcFromCents(htCents, vatRate = 0.2) {
+ return Math.round(htCents * (1 + vatRate));
+}+ Documente le contrat bizarre (unités, arrondis, auth). Laisse + add tranquille. +
+06
+
+
+ Les traces de l’assistant
++ Phrases de chat restées dans le fichier : « Sure! », « Here’s a + comprehensive solution », TODO: implement, emojis 🚀✅, URL + api.example.com. +
+
+
+
+ Vibecodé
+
+ // Sure! Here's a robust user service 🚀
+// Let's fetch the users from the API
+async function fetchUsers() {
+ // TODO: add your API endpoint here
+ const res = await fetch("https://api.example.com/users");
+ const data = await res.json();
+ return data; // return the data
+}
+ Plutôt ça
+
+ async function fetchUsers() {
+ const res = await fetch("/api/users");
+ if (!res.ok) {
+ throw new Error(`Users HTTP ${res.status}`);
+ }
+ return res.json();
+}+ Si une phrase pourrait être collée dans un chat, elle n’a rien à + faire dans le dépôt. +
+07
+
+
+ Le patchwork de styles
++ camelCase et snake_case dans le même objet, quotes mixtes, un + fetch ici, un + axios là, des imports d’un + package qui n’existe pas. +
+
+
+
+ Vibecodé
+
+ const user_name = user.name;
+const userId = user["id"];
+await axios.get("/v1/profile");
+await fetch("/api/profile");
+import { prettyPrint } from "lodash-helpers";
+ Plutôt ça
+
+ const userName = user.name;
+const userId = user.id;
+const profile = await api.get("/v1/profile");+ Un fichier, une convention. Les APIs inventées et les imports + morts sont le bonus « halluciné ». +
+08
+
+
+ Les restes de chantier
++ console.log("here"), variables + inutilisées, README impeccable qui promet un dashboard alors que + le bouton ne fait rien. +
+
+
+
+ Vibecodé
+
+ export function saveDraft(payload) {
+ console.log("payload", payload);
+ console.log("saving...");
+ // TODO: implement persistence
+ return { success: true, data: payload };
+}
+ Plutôt ça
+
+ export async function saveDraft(payload) {
+ const row = await db.drafts.upsert(payload);
+ return row;
+}+ Le README n’est pas un alibi. S’il décrit une app qui n’existe + pas encore, c’est de la vibe, pas de la doc. +
+
+
+ L’échelle
++ Le détecteur additionne 8 signes notés de 0 à 3, puis ramène le + total sur 100. C’est un jeu — utile pour comparer deux fichiers, pas + pour un procès. +
+
+
+
+ 0–17
+ Artisan — quelqu’un a choisi les noms et coupé le gras.
+ Artisan
+
+
+ 18–37
+ Vibe light — un assistant a aidé, une relecture a suivi.
+ Vibe light
+
+
+ 38–61
+ Vibecodé — les tics s’empilent, le métier s’efface.
+ Vibecodé
+
+
+ 62–81
+ Vibe max — trop de code, trop peu de décisions.
+ Vibe max
+
+
+ 82–100
+ Spécimen — à classer au musée, pas en production.
+ Spécimen
+
+
+
+ Détecteur
++ Coche ce que tu vois dans le fichier. Le vibe-o-mètre fait le reste. +
+
+
+
+
+
+
+ Publier sur GitHub Pages
++ Ce dépôt est un site statique : HTML, CSS, JS. Aucun build. Une fois + fusionné dans main, active Pages + ainsi : +
+
+
+
+
+ -
+
- + Ouvre le dépôt → Settings → + Pages. + +
- + Sous Build and deployment, choisis + Source : Deploy from a branch. + +
- + Branch main, dossier + / (root), puis + Save. + +
- + Le site sera servi sur + https://<user>.github.io/guide_vibecode/ + (quelques minutes). + +
+
+ + Variante Actions : dans Pages, source + GitHub Actions. Le workflow + .github/workflows/pages.yml + publie la racine du dépôt à chaque push sur + main. +
++ Fichier .nojekyll : GitHub ne + passe pas le site dans Jekyll, donc les chemins et assets restent + tels quels. +
+