Tu veux les meilleurs outils IA avant les autres ?
On teste et on décrypte les nouveaux outils IA chaque soir, en 5 min. Gratuit.
Inclus dès l'inscription : notre sélection des meilleurs guides & comparatifs IA.
Choisis ton rythme
Gratuit · Pas de spam · Désabonnement en 1 clic
Une innovation signée Stripe : Protodash
Owen Williams, un responsable de design chez Stripe, a mis au point Protodash, un outil révolutionnaire de prototypage basé sur l'intelligence artificielle. Cet outil interne permet aux designers et chefs de produits de transformer rapidement le système de design de Stripe en prototypes cliquables de qualité production. Ce qui a débuté comme un ensemble de règles Cursor et de composants React s'est transformé en une plateforme complète de prototypage fonctionnant directement dans le navigateur. Protodash facilite les revues de design et permet aux équipes de passer de simples mémos à des démonstrations fonctionnelles en un temps record. Owen partage les origines de Protodash, les raisons pour lesquelles les outils de design IA génériques échouent souvent, et comment les chefs de produits sont devenus des utilisateurs clés inattendus.
Les fondations de Protodash
Protodash a vu le jour grâce à un ensemble de règles Cursor, de composants React, et à l'intégration d'un serveur MCP. La première version de cet outil visait à simplifier l'accès pour les designers, ne nécessitant que la commande "npm run dev" pour fonctionner. Owen a regroupé les composants du système de design de Stripe, mis en place un serveur MCP pour Sail, et élaboré des règles Cursor détaillées pour guider l'IA dans l'utilisation du projet. Lorsqu'un utilisateur insère un lien Figma, le serveur MCP de Sail est vérifié avant toute écriture de code. Si le serveur est indisponible, l'outil ne peut pas imaginer le système de design. Ces règles ont été affinées au fil de mois d'itérations et de résolutions de problèmes.
Changement de mentalité chez les designers
L'un des plus grands défis pour les designers a été de surmonter la peur du terminal. Owen, avec son parcours en ingénierie, a toujours valorisé l'embauche de designers techniques capables de naviguer efficacement dans le terminal. Avant l'ère de l'IA, atteindre cette compétence technique était ardu. Désormais, il suffit de demander à Claude : "Comment fonctionne Git ?" pour obtenir une réponse claire, sans même connaître les commandes.
Les limites des outils de prototypage IA génériques
Les outils de prototypage IA génériques échouent souvent à produire des résultats satisfaisants car ils ne connaissent pas le système de design spécifique de l'entreprise. Owen a observé lors de revues de design que des outils comme v0 produisaient des prototypes Tailwind peu convaincants, avec des navigations incorrectes, des polices erronées et des composants mal assortis. Stripe, avec son standard de qualité élevé et son système de design bien défini appelé Sail, nécessitait des outils capables de construire des tableaux de bord fiables à partir de ses éléments. C'est cette nécessité qui a conduit à la création de Protodash.
Une adoption par les chefs de produits
Aujourd'hui, autant de chefs de produits que de designers utilisent Protodash, ce qui a amélioré les relations entre ces deux groupes. Initialement, Owen était nerveux à l'idée que les chefs de produits se mettent à concevoir. Cependant, il a été agréablement surpris de voir ces derniers créer des éléments conformes à l'identité de Stripe, explorer des idées plus tôt et mieux communiquer avec les designers. Les discussions ont évolué de "Devrions-nous affecter un designer à ce projet ?" à "Voici le travail réel ; discutons de comment l'améliorer." Les chefs de produits peuvent désormais tester des idées plus tôt et défendre des ressources en design avec des prototypes tangibles.
Prototypage avec des données réelles
Le prototypage avec des données intégrées dans le code permet d'explorer des cas d'utilisation que Figma ne pouvait jamais atteindre. Owen a présenté un tableau de bord affichant près de 500 000 dollars de volume brut, mais qu'en est-il des états initiaux ou des entreprises effectuant une transaction par jour ? Explorer ces différents modèles commerciaux était auparavant un casse-tête dans Figma. Désormais, il est possible de basculer facilement entre ces états, permettant de concevoir des solutions plus intéressantes et de les confronter à la réalité plus tôt.
L'importance des outils internes adaptés
Les outils internes les plus précieux sont ceux qui s'alignent sur la culture et les flux de travail spécifiques de l'entreprise. Owen souligne la difficulté de recruter des équipes pour développer des outils internes, mais maintenant, il est possible de créer des outils qui évoluent avec les méthodes de travail. Chez Stripe, les revues de design incluent traditionnellement le partage de Google Docs pour les retours. Owen a donc intégré un mode de revue de design où chacun peut commenter le prototype, obtenir un résumé généré par l'IA et envoyer des corrections directement à l'IA.
Les conseils d'Owen pour travailler avec l'IA
Owen conseille d'être précis dès le début et de faire une pause dès que la frustration monte. Ayant un parcours en création de contenu, il a appris que la précision dans le premier prompt est cruciale. Cependant, la leçon la plus importante est d'éviter la fallacie des coûts irrécupérables. En tant que créateur, il est facile de s'attacher à un projet en pensant "je vais sûrement y arriver." Souvent, il est plus rapide de tout abandonner et de recommencer. Si une approche ne fonctionne pas, il est préférable de réinitialiser le contexte.
