Wonder

Qu'est-ce que Wonder ?

Wonder est un outil de design basé sur un canvas qui réunit design et développement front-end dans un seul workflow. Contrairement aux outils de design classiques qui imposent un handoff séparé vers les ingénieurs, Wonder génère des designs qui correspondent 1:1 à du code prêt pour la production (React + Tailwind). Les designers peuvent prompt, itérer et affiner les visuels directement sur le canvas pendant que le code sous-jacent se met à jour en temps réel. L'outil s'intègre également à des agents de codage comme Cursor et Claude Code via un MCP server, permettant aux développeurs de récupérer le contexte de design directement dans leur codebase, sans captures d'écran ni reconstruction.

Fonctionnalités clés

• Du design au code en temps réel

  Chaque élément créé sur le canvas s'appuie sur du véritable HTML/CSS. Le format de design correspond 1:1 au code, sans aucun écart entre ce que voient les designers et ce que livrent les développeurs.

• Génération par IA basée sur le canvas

  Décrivez ce que vous voulez et Wonder génère mises en page, composants et variantes de style directement sur le canvas. Sélectionnez n'importe quel élément pour le retravailler sur place.

• Intégration MCP Server

  Connectez Wonder à des agents de codage comme Cursor ou Claude Code grâce à son MCP server intégré. Votre agent lit directement le contexte de design, sans avoir à redessiner ou prendre des captures d'écran.

• Génération d'images intégrée

  Générez des images directement sur le canvas, sans changer d'outil. Plus besoin d'éléments d'attente — décrivez ce qu'il vous faut et l'image apparaît dans son contexte.

• Prise en charge des shaders pour des visuels interactifs

  Ajoutez des effets de shader accélérés par GPU à vos designs pour obtenir des visuels riches et interactifs qui vont bien au-delà des maquettes statiques.

• Tarification par paliers basée sur les crédits

  Quatre formules (Free, Pro, Pro+, Max) avec des allocations mensuelles de crédits allant de 300 à 60 000, qui couvrent aussi bien l'expérimentation que la mise en production quotidienne.

Cas d'utilisation

• Design d'UI produit : Les designers qui conçoivent des applications web ou des interfaces mobiles peuvent générer, itérer et exporter des composants React + Tailwind prêts pour la production sans quitter le canvas.
• Fin du handoff design-développement : Les équipes qui souffrent des pertes liées au passage du design au développement peuvent utiliser Wonder pour s'assurer que le produit livré correspond exactement au design, sans aucune reconstruction manuelle.
• Marketing et landing pages : Les équipes marketing et growth peuvent prototyper et livrer rapidement des landing pages, pitch decks et visuels promotionnels depuis un seul et même canvas.
• Développement assisté par agent : Les développeurs utilisant des agents de codage IA (Cursor, Claude Code) peuvent récupérer le contexte de design en direct via MCP pour accélérer l'implémentation front-end.
• Prototypage visuel avec du vrai code : Les fondateurs et solo builders peuvent transformer des idées encore au stade initial en prototypes interactifs et livrables, sans équipe dédiée de design ni d'ingénierie.

FAQ