Vibe Coding : La masterclass du VP Product de Photoroom pour appendre à coder ses prototypes avec Cursor

Dans ce nouvel épisode de “C’est pas SorciAI”, notre émission IA et Product animée par Fred Bardolle en partenariat avec Maestro, Ahmed Dahbi, VP Product de Photoroom, tente un pari : faire du “vibe coding” d'un prototype en live sur Cursor, afin de montrer comment les profils Product peuvent développer cette compétence essentielle à l’avenir. Sans filet ! 

⌛ 7 min de lecture (ou 57 min en replay vidéo)

🎫 Les membres Premium du Ticket ont un accès intégral à cet article

 ✉️ Article issu du Ticket n°110

---

Ce que tu vas apprendre dans ce résumé de l’émission sur le “Vibe Coding” avec Ahmed Dahbi, VP Product de Photoroom :

- C’est quoi le “Vibe Coding” ?

- Comment utiliser concrètement Cursor, l’outil emblématique de Vibe Coding

- Mode Agent / Mode Chat : pourquoi Cursor est un super prof pour apprendre à coder

- Les bonnes pratiques d’Ahmed pour Vibe Coder (versioning, proto vs produit fini, projet de 0 vs code existant…)

---

Une véritable lame de fond. Conférence après conférence, un mot d’ordre revient constamment à nos oreilles : avec l’IA, les profils Product vont devoir faire leurs prototypes en totale autonomie, sans demander l'intervention des ingés.

Que cela soit les Chief Product Officers de OpenAI et Anthropic ou la CPO de LaunchDarkly. Une tendance qui s’inscrit dans la lignée des propos des CEO de Shopify ou de Duolingo qui martèlent vouloir désormais faire une boîte “AI-first”.

En mars dernier, lors de l’IA Product Day, c’était au tour d’Ahmed Dahbi de remettre le sujet sur le tapis. 

“Chez nous, nous demandons aux candidats et candidates de prototyper durant les entretiens. Aujourd'hui, ce n’est plus une question de compétence mais de volonté”, indique le VP Product de Photoroom, la startup française de retouche photos avec l’IA, aux 20 millions d’utilisateurs actifs mensuels et aux 50 millions de revenus annuels récurrents (ARR).

À la suite de cette conférence, on l’a pris au mot en lui demandant de venir en parler dans Le Ticket. Sa réponse :

“Et pourquoi je ne ferais pas une demo live de vibe coding sur Cursor ?”

Chiche !

C’est quoi le “Vibe Coding” ?

Avant d’être une tendance Linkedin un peu régurgitée à toutes les sauces, le “vibe coding” est un concept inventé par Andrej Karpathy, un ingénieur canado-slovaque, ex directeur de l’IA chez Tesla et cofondateur de OpenAI. Une référence.

Le 3 février 2025, il tweete :

“Il existe un nouveau type de code que j'appelle "Vibe Coding", où vous vous abandonnez complètement aux vibes (...) et oubliez même que le code existe. C'est possible parce que les LLM deviennent trop performants.”

Le buzzword est né. Deux ans auparavant, il avait déjà amorcé cette vision en déclarant que le nouveau langage informatique à la mode est… l’anglais ! En résumé, “vibe coder” signifie coder sans comprendre intégralement tout ce que l’IA fait.

“On a l’habitude de l’appeler Vibe Coding. Bientôt, on l’appelera juste “Construire”, pointe Enzo Avigo, le cofondateur de la plateforme June. Le Vibe Coding a commencé comme un mème. Cela risque de devenir la nouvelle norme”.

Cursor, un des outils les emblématiques du Vibe Coding

Pour sa démonstration, Ahmed utilise Cursor, un IDE (= un éditeur de code) américain qui connaît une croissance phénoménale : de 1 à 100 M$ d’ARR en un an ! L’interface se décompose en deux écrans principaux : à gauche, la base de code et à droite, la fenêtre de discussion avec le LLM (Large Language Model).

“Quand tu lui poses une question, il va pouvoir chercher la réponse en fonction de ce qu’il voit dans la codebase et peut même faire la modification directement dans les fichiers”, décrit-il.

Son projet ? Créer un faux magasin de chaussures, en se servant de l’API de Photoroom pour faire évoluer l’arrière-plan de ces dernières.

Avant l’émission, afin de réduire la durée de latence, il a déjà construit un premier mockup. De manière assez bluffante, l’IA a pris seule la décision, sans instruction explicite, d’écrire un texte d’intro (“Step Into Style”), de choisir des prix aléatoires, des noms de modèle de chaussure, des boutons “ajouter au panier” avec la possibilité de choisir sa taille lorsque l’on clique dessus.

Durée de ce premier exercice : une grosse quarantaine de minutes. Et s’il avait voulu le faire par lui-même ?

“Même si j’ai un background d’ingénieur, je n’ai jamais développé professionnellement. Je ne pense pas que j’aurais pu faire ce proto tout seul, sachant que je ne connais pas cette techno (nextjs). J’aurais peut-être réussi à faire quelque chose en passant mon temps sur Stack Overflow avec un peu de curiosité…” répond celui qui fait du produit depuis 15 ans.

Les Cursor Rules, un cadre pré-défini pour le LLM 

Avant de commencer, il présente un onglet particulièrement important sur la gauche de l’écran : les “Cursor Rules”. Une sorte de master prompt qui va cadrer l’IA par des règles générales à chacune des requêtes. Avec les fameuses instructions d’identification par exemple (“Tu est un Front-end Engineer senior, expert en Javascript, HTML etc.”).

Pour se faciliter la vie ici, Ahmed renvoie vers la page Cursor.directory qui recense des bases de prompt déjà existantes. Il ajoute tout de même une règle personnelle loin d’être anecdotique : “Commence chaque réponse par “Salut” (je m’appelle Ahmed au fait)”.

“Déjà, c’est plus cool. Et, surtout, cela me permet de m’assurer qu’il a bien pris en compte les Cursor Rules lors de mes requêtes”, détaille Ahmed.

Avec Cursor, aussitôt dit, aussitôt fait

À partir du premier mockup, Ahmed commence alors la démo live en essayant différentes variantes de fond. Première instruction : “Je veux que le fond de l’image change quand je passe ma souris dessus”.

Cursor s'exécute alors en décrivant, sur la partie droite de l’écran, tout ce qu’il fait. Sauf que cela ne marche pas du tout. Ahmed lui fait remarquer dans l’espace de chat et lui demande de résoudre le problème. Sans lui donner plus de précisions.

Résultat, après quelques petites minutes de traitement : un site e-commerce dont le fond change quand on passe la souris dessus !

“Cela peut servir par exemple si des Sales veulent faire des démos à leurs clients”, précise Ahmed.

Pour rendre ce live plus interactif, un participant demande alors une nouvelle fonctionnalité : quand l’utilisateur reste immobile pendant 3 secondes, une fenêtre de chat doit apparaître à l’écran.

Ahmed n’a juste qu’à entrer cette instruction. Temps de traitement de Cursor, retour au proto, 1, 2, 3… une fenêtre de chat apparaît sur la droite.

Comme le design de cette fenêtre est assez rudimentaire, Ahmed décide de l’améliorer. Il se rend alors sur la librairie de composants shadcn/ui. Après quelques secondes à chercher le bon composant directement sur la plateforme, il a une autre idée : il demande à Cursor de chercher le meilleur pour améliorer ce design.

L’IA lui expose son raisonnement pour cette recherche, lui propose un composant et met à jour directement le proto. Tant de perfection est limite décevant ! #DemoEffect

À noter qu’il est possible à tout moment de voir dans l’écran principal les lignes de code que l’IA a supprimé (en rouge) et ajouté (en vert) afin de faciliter le travail de supervision pour l’humain.

Les bonnes pratiques d’Ahmed pour Vibe Coder

Au cours de cette démo, Ahmed a distillé de nombreux conseils pour celles et ceux qui souhaitent se mettre au Vibe Coding.

La différence entre le mode agent et le mode chat