Opaline MustièreSenior Product Designer & Builder

Aller au contenu
Paris,
Paris,
À proposÀ proposProjetsProjetsServicesServices
LabsLabsRessourcesRessourcesContactContact
AccueilAccueilProjetsProjetsServicesServicesContactContact
Paris,
  1. Accueil→
  2. À propos→
  3. Projets→
  4. Services→
  5. Labs→
  6. Ressources→
  7. Contact→
Opaline Mustière
Opaline Mustière@opalinedesign

Branding + Product Design + Build

Paris
Opaline Mustière

Opaline Mustière

Product Design · Groupe Luminess

Paris

Opaline Mustière, Senior Product Designer & Builder

AccueilLabsCollaborative Prompting
Projet personnel · Éditeur de prompts collaboratif

Collaborative Prompting

Un éditeur pour écrire un PromptLa consigne écrite qu'on donne à une IA. Plus elle est précise, plus la réponse part juste. comme un document : bloc par bloc, à plusieurs, avec une IA qui propose un premier jet qu'on garde, réécrit ou refuse.

L'enjeu : qu'un Agent de codeUne IA qui lit, écrit et teste le code d'un projet à partir d'une consigne, comme Claude Code ou Cursor. parte juste dès le premier essai, sans que je lui réexplique le projet à chaque tâche.

13Blocs de prompt dans la bibliothèque

Rôle
Recherche, design et code
Période
Depuis octobre 2026
Statut
Prototype local
Prochaine étape
Panel de testeurs le 1er nov.
Collaborative Prompting
On pose un bloc, l'IA l'écrit, une autre personne le complète en direct.
  1. SituationLe même cadre, réécrit à chaque tâche
  2. TâcheUn prompt complet en quelques minutes
  3. ActionComment ça marche
  4. RésultatOù en est le prototype

Situation

Le même cadre, réécrit à chaque tâche

Tâche 1RôleContexteRèglesCritère de fini
Tâche 2ContexteRôleCritère de finioublié
Tâche 3RèglesoubliéRôleContexte
Schéma : le même cadre, réécrit à la main d'une tâche à l'autre, change d'ordre et perd des blocs.

Je pilote plusieurs projets avec des agents de code, et chaque tâche commence par un long PromptLa consigne écrite qu'on donne à une IA. Plus elle est précise, plus la réponse part juste. où je reconstruis le même cadre : rôle, contexte du projet, règles, critère de fini. Toujours le même. Je recolle le contexte à la main, l'ordre change d'une fois sur l'autre, et le résultat de l'agent change avec lui. Pourquoi réécrire à chaque tâche ce qui ne bouge pas ?

La plupart des outils du marché arrivent après l'écriture. J'ai lu les pages publiques de PromptLayer, Langfuse et LangSmith : ils rangent les versions d'un prompt déjà en production et mesurent ses réponses, pour des équipes d'ingénieurs. Et pour écrire à plusieurs ? Presque rien. Sampler, l'outil interne de l'agence New Material, est le seul que j'ai trouvé, et rien ne dit qu'il soit en service.

Où interviennent les outils existantsLes étapes de la vie d'un prompt, et les outils qui s'y placent (pages publiques lues le 15 octobre 2026).
  1. 01Écrire
    • Sampler
    • Notion, Google Docs
    Collaborative Prompting vise cette étape
  2. 02Versionner
    • PromptLayer
    • Langfuse
  3. 03Servir en production
    • PromptLayer
    • LangSmith
  4. 04Mesurer les réponses
    • Langfuse
    • LangSmith

Tâche

Un prompt complet en quelques minutes

« Quand je lance une tâche sur un projet, je veux un prompt complet et structuré en quelques minutes, qui connaît déjà mon projet, pour que l'agent parte juste du premier coup. »

Mon besoin de départ.

Mon besoin de structurer mes prompts plus efficacement, tous les jours, m'a donné l'idée de ce produit. J'ai écrit quatre PersonaLe portrait d'un utilisateur type, écrit à partir d'observations, pour décider pour qui l'on conçoit. : le mien, et trois autres à confronter au panel. En équipe produit, chacun touche surtout certains blocs, du développeur qui fixe les contraintes au rédacteur qui règle le ton.

La date de sortie est fixe, le périmètre bouge. En cas de retard, je coupe dans une liste écrite d'avance, de la fonction la moins utile à la plus utile, jusqu'à tenir la date. Deux promesses n'y figurent pas : la coédition, et le contexte tiré du Dépôt GitHubLe dossier en ligne qui contient le code d'un projet et son historique. Il dit à l'IA quels outils et quelles conventions le projet utilise..

  • Créé pour mon besoinDesigner qui code avec des agentsÉcrit surtout : Rôle, Objectif, Contexte, Règles, Critères
  • Hypothèse à testerDéveloppeur ou tech leadÉcrit surtout : Contraintes, Règles, Format de sortie
  • Hypothèse à testerProduct ownerÉcrit surtout : Objectif, Critères de qualité
  • Hypothèse à testerRédacteur ou consultantÉcrit surtout : Ton, Persona, Exemples

Action

Comment ça marche

Quatre gestes, du bloc vide au prompt prêt à coller dans l'agent, chacun montré sur l'outil réel, dans l'ordre où je m'en sers.

  1. La bibliothèque range 13 blocs en cinq familles, d'Intention à Logique. On en glisse un dans le prompt, à la souris ou Glisser-déposer au clavierDéplacer un élément avec les flèches et la touche Entrée, sans souris. Indispensable pour qui navigue au clavier ou avec un lecteur d'écran..

    Collaborative Prompting
    Éditeur Collaborative Prompting : à gauche une bibliothèque de blocs classés par famille, chacun avec sa pastille de couleur, au centre le prompt « Visuel services, Higgsfield » avec son objectif et des blocs Rôle et Objectif marqués « généré », à droite la fiche de contexte et le compositeur.
    La bibliothèque à gauche, le prompt en blocs au centre, le contexte à droite.
  2. Le bloc posé se remplit en Flux continu (streaming)Le texte s'affiche mot après mot pendant que l'IA l'écrit, au lieu d'arriver d'un bloc à la fin.. L'IA s'appuie sur l'objectif du prompt et sur les blocs voisins, puis une autre personne peut le compléter au même moment, avec son prénom et sa couleur au bout du curseur.

    Collaborative Prompting
    Gros plan sur le bloc Persona : l'IA l'écrit, puis Camille le complète depuis une autre fenêtre.
  3. Plus court, plus précis : on cible un bloc et on demande la retouche au compositeur. La proposition s'affiche en avant et après. Rien ne change sans accord.

    Collaborative Prompting
    Le bloc Ton est ciblé. À droite, le compositeur affiche la demande « Plus court : deux phrases, sans perdre l'exemple », puis le texte d'avant barré et la proposition d'après, avec les boutons Accepter et Annuler.
    Une vraie demande au compositeur : l'avant reste en place tant que l'après n'est pas accepté.
  4. Le prompt se copie ou se télécharge en MarkdownUn format de texte très simple : un # pour un titre, un tiret pour une liste. Les agents de code le lisent tel quel., en français ou en anglais, avec un titre par bloc. L'agent le lit tel quel.

    cortex-fiche-de-notion.md
    # CORTEX · fiche de notion
     
    ## Rôle
     
    Tu rédiges une fiche de notion pour Opaline, product designer avec 10 ans de métier, qui code (HTML/CSS/JS, Python en apprentissage)…
     
    ## Variables
     
    NOTION : {notion}
    SPRINT : {sprint} / {domaine}
    MOMENT : {creneau}
     
    ## Règles
     
    1. Français. Vouvoiement. Pas de tiret cadratin.
    2. Aucune analogie avec la cuisine, le sport ou les recettes.
    
    Le début de l'export copié depuis l'outil, sans retouche.
Collaborative Prompting
Éditeur Collaborative Prompting : à gauche une bibliothèque de blocs classés par famille, chacun avec sa pastille de couleur, au centre le prompt « Visuel services, Higgsfield » avec son objectif et des blocs Rôle et Objectif marqués « généré », à droite la fiche de contexte et le compositeur.
La bibliothèque à gauche, le prompt en blocs au centre, le contexte à droite.

Ce qui le distingue

    • IntentionRôle · Objectif · Persona
    • ComportementRègles · Ton · Garde-fous
    • StructureContexte · Format · Contraintes
    • ÉvaluationCritères · Contrat de fini
    • LogiqueÉtapes · Exemples
    13 blocs

    Cinq familles, une couleur chacune

    La couleur dit à quoi sert un bloc avant même qu'on le lise. Une seule liste nourrit la bibliothèque et la génération : elles ne peuvent pas diverger.

  • RôleRèglesContexte
    ↑↓Entrée
    Glisser-déposer au clavier

    Le clavier vaut la souris

    Chaque glisser-déposer a son équivalent au clavier, les flèches pour déplacer un bloc et Entrée pour le poser, parce que beaucoup de gens naviguent sans souris. Règle du projet depuis le premier jour.

  • AvantLe ton est technique, direct et précis. Il s'adresse…

    AprèsLe ton est technique et précis, adressé à une lectrice qui code…

    AccepterAnnuler
    Avant, après, accord

    L'IA propose, vous décidez

    Aucune réécriture n'écrase un texte sans accord. Une génération n'écrit que dans le bloc vide qu'elle vient de créer, et le badge « généré » reste affiché tant que personne ne l'a relu.

    • ✓Ordinateur 0 violation
    • ✓Mobile 0 violation
    • ✓Navigation au clavier complète
    0 violation axe-core

    Accessible, et contrôlé

    Zéro violation. Le contrôle axe-coreUn outil libre qui parcourt une page et liste ses défauts d'accessibilité : contrastes, libellés, navigation au clavier. au niveau WCAG 2.2, niveau AALe référentiel international d'accessibilité du web. Le niveau AA est celui que reprend le RGAA, la norme française. tourne sur l'outil réel, sur ordinateur comme sur mobile.

Les choix techniques, et ce que j'ai écarté

  • React 19
  • Vite
  • TypeScript
  • WebSocket
  • Claude
  1. 01

    Un prototype local, sans compte

    Je voulais tester l'usage avant de payer un service. Le Prototype localUne version qui tourne seulement sur mon ordinateur : ni adresse publique, ni compte à créer. tourne donc sur mon poste, sans inscription ni Clé d'APIUn mot de passe qui autorise un logiciel à utiliser un service payant. Posée dans le navigateur, n'importe quel visiteur pourrait la lire. à gérer.

    ÉcartéUn service temps réel hébergé, prévu pour la mise en ligne.

  2. 02

    Une salle WebSocket par document

    Une frappe part aussitôt vers les autres fenêtres par WebSocketUne connexion qui reste ouverte entre le navigateur et le serveur. Chaque frappe part aussitôt vers les autres fenêtres, sans recharger la page.. Assez pour coécrire à deux ? Dans des blocs différents, oui.

    ÉcartéLa Fusion frappe par frappe (CRDT)Une méthode qui combine les frappes de deux personnes dans le même paragraphe sans qu'aucune n'efface l'autre. C'est ce que fait Google Docs., plus lourde. Limite assumée : dans un même bloc, la dernière frappe gagne.

  3. 03

    Générer par la commande Claude du poste

    La génération passe par la commande Claude installée sur mon ordinateur. Aucun secret ne transite par le navigateur.

    ÉcartéAppeler le modèle depuis la page, ce qui exposerait la clé à n'importe quel visiteur.

Résultat

Où en est le prototype

Le prototype tourne sur mon poste depuis le 15 octobre 2026. J'ai testé la coédition entre deux fenêtres, sous deux prénoms : les frappes arrivent aussitôt. Aucun résultat d'usage n'est encore mesuré. Le panel suivra trois choses, le temps qu'il faut pour rédiger un vrai prompt de travail, la part du texte généré qu'on garde et les moments où ça bloque.

Ce qui marche · 6

  • ✓Bibliothèque de 13 blocs, filtrable par famille
  • ✓Glisser-déposer à la souris et au clavier
  • ✓Génération en flux continu à la pose d'un bloc
  • ✓Compositeur avec avant et après
  • ✓Coédition entre deux fenêtres
  • ✓Export Markdown en français et en anglais

Ce qui manque · 3

  • ○Contexte lu dans le dépôt GitHub du projet
  • ○Mise en ligne
  • ○Fusion frappe par frappe dans un même bloc
  1. 15 oct.Prototype localFait
  2. 1er nov.Ouverture à 5 à 8 testeursProchaine étape
  3. 2 au 8 nov.Observations de 20 minutes, puis synthèseÀ venir

Ce que j'en retiens

Mon plus grand risque, c'est de passer mon temps à construire l'outil au lieu de m'en servir. Alors pour moi, une étape n'est finie que si j'ai écrit avec l'outil un vrai prompt de travail.

Autres labs

  • Politik↗Données publiques et politiqueUn site qui met à plat les données publiques de data.gouv.fr : qui gouverne, qui possède les médias, combien coûte la fraude sociale. Chaque chiffre porte sa source et son niveau de fiabilité, pour se faire son propre avis.
  • HeyBoss↗Outil d'onboarding no-codeUn outil d'onboarding no-code pour les équipes produit de start-up et de PME, conçu et construit à deux en deux semaines de sprint, pendant notre formation. Le manager déclenche une arrivée, le collaborateur suit son intégration, un moteur d'alertes veille sur les 90 premiers jours.
  • Antidote OS↗Système de pilotage personnelLe système de pilotage qui me permet de suivre une dizaine de projets avec des agents IA. Un tableau de bord fait le point chaque matin, et des garde-fous vérifient le travail des agents avant qu'ils ne le déclarent fini.
Voir tous les labs

J'aime bien partager ce que j'apprends.

Voir les ressources ↗
Opaline

Disponible

Besoin de renseignements ?
Envie de prendre un café ?

Me contacter ↗
Copier l'emailE-mail copié !
Opaline Mustière
Opaline Mustière@opalinedesign

Branding + Product Design + Build

Paris
Opaline Mustière

Opaline Mustière

Product Design · Groupe Luminess

Paris

© 2026 Opaline MustièreMentions légales et confidentialitéOpen to work