Projet 04 / 04
Teaching tool · Product builder · sans backend, volontairement

Clear My
Prompt.

En formation, j'ai remarqué que les élèves utilisaient l'IA comme une machine à réponses. J'ai construit un outil pour les aider à l'utiliser comme un vrai tuteur.

Scope Terrain · UX writing · Design · Front
Public Élèves débutants en dev
Stack Next · React · TypeScript · Tailwind
Année 2026
Écran d'accueil de l'assistant — Bloqué sur ton code ? Choisis ta situation, on te construit le bon message. Trois situations : Je suis bloqué, Je veux comprendre, Je veux garder une trace
clear-my-prompt.vercel.app · en ligne Fig. 01 — choisir sa situation, pas chercher ses mots
(01)

Le contexte.

Ce projet ne vient pas d'une idée : il vient d'une salle de classe.

En tant que formateur en bootcamp, je voyais le même scénario chaque semaine : un élève bloqué colle « donne-moi la solution » dans ChatGPT. Sans contexte, sans l'erreur complète, sans montrer ce qu'il a essayé. Il obtient une correction qu'il ne comprend pas, ou une réponse trop avancée pour son niveau. Il avance dans l'exercice, pas dans l'apprentissage.

(02)

Le problème.

Le mauvais réflexe n'est pas d'utiliser l'IA. C'est de lui demander une solution au lieu de lui poser un problème.

Prompts flous, erreurs tronquées, zéro contexte, copie de la réponse sans la relire : le résultat est une faible compréhension et une dépendance qui s'installe. Interdire l'IA aurait été absurde. L'objectif était de transformer le réflexe : clarifier le problème, formuler une vraie demande, obtenir un indice plutôt qu'une correction, et garder une trace de ce qu'on a appris.

(03)

La solution.

Deux pièces qui se répondent : un assistant qui construit le message, une méthode qui cadre le moment de l'utiliser.

S1 l'assistant

Une situation, un formulaire, un message prêt à copier.

L'élève choisit sa situation : « Je suis bloqué », « Je veux comprendre » ou « Je veux garder une trace », puis arrive sur un formulaire adapté : erreur de terminal, énoncé incompris, demande d'indice, notion floue, vérification de compréhension, explication de code ou fiche d'erreur. Quelques champs guidés, et l'app génère un message structuré à coller dans ChatGPT ou Claude. Il ne cherche plus ses mots : il décrit son problème.

S2 la méthode

Quatre étapes, dans cet ordre : Focus seul → Binôme → IA → Formateur.

Chercher seul environ dix minutes, demander à un binôme, utiliser l'IA avec un prompt clair, et appeler le formateur seulement après avoir vraiment essayé. Pas un cours théorique : un cadre simple, rassurant et actionnable, affiché dans l'app et utilisable en cours. L'IA a une place dans la méthode : la troisième, pas la première.

S3 la pédagogie des prompts

Chaque prompt généré demande un indice, jamais la solution.

Les messages générés embarquent les consignes qu'un bon tuteur donnerait : « explique-moi avec des mots simples », « dis-moi où regarder en premier », « ne corrige pas tout directement : donne-moi d'abord un indice », « à la fin, fais-moi un récapitulatif de ce que je dois retenir ». La valeur du produit n'est pas dans le code : elle est dans la structure de ces messages.

Du blocage au message.

Le parcours réel : la méthode qui cadre, puis le formulaire « J'ai une erreur » avec la preview du message qui se construit en direct.
Formulaire J'ai une erreur — trois champs guidés à gauche, preview du message généré à droite avec bouton Copier mon message
Fig. 02 — « J'ai une erreur » : champs guidés à gauche, message construit en direct à droite, copie en un clic
Page méthode — quatre étapes numérotées : Focus seul, Binôme, IA, Formateur, avec les gestes concrets de chaque étape
Fig. 03 — la méthode pour se débloquer : quatre étapes, dans cet ordre, et l'assistant à l'étape IA
(04)

Les choix.

Ce que j'ai décidé de ne pas construire compte autant que le reste.

C1 · Léger, exprès

Pas de backend, pas d'auth, pas de base

La valeur est dans l'UX, la clarté du contenu et la structure des prompts. Ajouter de l'infra n'aurait servi qu'à faire sérieux.

C2 · Langage

Zéro jargon, ton rassurant

« Pas de panique. Une erreur, c'est juste le code qui te dit où regarder. » Chaque libellé est écrit pour un débutant qui doute.

C3 · Guidage

Des champs qui enseignent

« Copie-colle, pas une capture » · « le fichier concerné, pas le projet entier ». Les contraintes des formulaires sont des leçons déguisées.

C4 · Friction utile

Copier se mérite

Le bouton « Copier mon message » reste désactivé tant que les champs obligatoires sont vides. On ne peut pas envoyer un prompt flou.

(05)

Ce que ça montre.

Avant

« Donne-moi la solution », collé tel quel. Une correction reçue, rien de compris, et le même blocage la semaine suivante.

Après

Un blocage transformé en demande claire : contexte, erreur exacte, code concerné, et un indice demandé plutôt qu'une solution.

Ce n'est pas mon projet le plus technique, et c'est voulu. Il montre autre chose : partir d'un problème observé sur le terrain, le transformer en outil concret, et écrire une expérience pour un public non expert. Observation, UX writing, design, front-end : le rôle complet, sur un usage réel.

Retour au début · 01 / 04
Atelier Delphine →
Me contacter
© 2026 Nhat-Quan Ho Nguyen · Product builder full-stack Ce site : Astro · statique · zéro JS inutile. Mes apps : Next. L'outil suit le besoin.