WONDER : ce que vous concevez est le code que vous livrez
📌 WONDER est un outil de design où le canvas produit directement du code production-ready (React + Tailwind ou CSS). La promesse : « what you see is what you ship » — fini l’artefact de handoff entre design et développement.
Le problème que WONDER attaque est ancien. Un designer travaille dans Figma, produit un fichier soigné, puis ce fichier est traduit à la main en code par un développeur. À chaque itération, la traduction se rejoue, et le code livré finit par diverger du design. WONDER supprime ce maillon : le format de design correspond 1:1 au code. Vous partez de ce qui est déjà construit, vous itérez librement sur le canvas, vous livrez directement en production. Ce que vous voyez est ce que vous shippez.
Les outils sont volontairement familiers — canvas, calques, composants — pour qui a déjà utilisé un éditeur visuel. La différence est que la sortie n’est pas une image ou un spec, mais du React et du Tailwind réels (ou du CSS brut si vous préférez). Vous générez, itérez et livrez au même endroit.
Le détail le plus intéressant est l’intégration MCP. WONDER expose un serveur MCP qui se branche sur vos agents de code — Claude, Cursor, et autres. Les changements côté design et les changements côté code restent synchronisés. Concrètement : un designer ajuste un composant sur le canvas, et l’agent de code voit le changement sans recopie manuelle ; inversement, ce que l’agent modifie dans le code remonte dans le design. C’est la boucle bidirectionnelle que la plupart des outils design-vers-code prétendent offrir mais n’implémentent jamais vraiment.
Côté tarifs, la grille est claire. Le plan Free à 0 $ donne un accès limité au chat IA, une génération illimitée via MCP, 3 fichiers privés (publics illimités), une collaboration limitée en lecture seule, un accès partiel aux shaders et un upload d’images jusqu’à 25 Mo. Le plan Pro passe à 16 $/utilisateur/mois en facturation annuelle (20 $ en mensuel) : il inclut 20 $ de tokens IA mensuels par utilisateur invité, des fichiers privés illimités, la collaboration en édition complète, l’accès à plus de 700 shaders, des uploads jusqu’à 100 Mo et un support prioritaire. Le plan Enterprise ajoute SSO/SAML, des contrôles admin et un onboarding dédié.
Mon avis est nuancé. L’idée de fermer la boucle design-code n’est pas nouvelle, mais la plupart des tentatives produisent soit un export de code mort (qu’il faut réécrire), soit un design qui se désynchronise dès qu’un développeur touche au code. Le serveur MCP de WONDER est la réponse technique la plus crédible à ce problème : la synchronisation se fait via le même protocole que vos agents utilisent déjà. La réserve est la dépendance — adopter WONDER, c’est accepter que votre design vit dans un format propriétaire dont le code généré est la seule fenêtre. Et la grille Pro à 16 $/utilisateur/mois invite à comparer sérieusement avec un workflow Figma + copilot bien rôdé.
Points clés :
- 🎨 Canvas qui produit du React + Tailwind (ou CSS) production-ready
- 🔁 Format design ↔ code en mapping 1:1, sans handoff
- 🤖 Serveur MCP : sync bidirectionnelle avec Claude, Cursor…
- 🧱 Outils familiers : canvas, calques, composants
- 💸 Free (3 fichiers privés) · Pro 16 $/user/mois · Enterprise SSO
- 🎭 700+ shaders accessibles en Pro
