Wonder
Wonder (Aquila Lab) · Image · Programmation
Wonder est un outil de design IA où le canevas et le code ne font qu'un. Au lieu de dessiner une maquette puis de la confier à un ingénieur, vous passez du design IA au code au même endroit et exportez du React et du Tailwind (ou du CSS brut) prêts pour la production. C'est un outil de design pour les équipes produit qui veulent générer une interface avec l'IA, la retoucher à la main sur un canevas familier et livrer le résultat sans étape de traduction. Wonder propose aussi un serveur MCP qui se branche sur des agents de codage comme Claude et Cursor. Les modifications de design et de code restent synchronisées.
À propos de Wonder
Qu'est-ce que Wonder
Wonder est un outil de design bâti autour d'une seule idée : ce que vous voyez sur le canevas est ce que vous livrez. Son format de design correspond un à un au code, si bien qu'un composant disposé visuellement devient le composant React réel de votre projet. Cela supprime l'étape de balisage où quelqu'un reconstruit un écran à l'œil. Pas d'étape de traduction, pas d'approximation.
Le produit vise les équipes produit plutôt que les amateurs solitaires. Il réunit les outils que les designers connaissent déjà (canevas, calques, composants) avec la génération par IA et un chat intégré, et se connecte à un dépôt GitHub pour que l'IA lise votre code existant et reconstruise de vraies interfaces sur le canevas. Vous accédez aussi au même canevas via des agents de codage par MCP, ce qui signifie que ceux qui écrivent le reste de l'application peuvent piloter Wonder sans quitter leur éditeur.
Les limites principales sont la portée et le prix. Wonder produit du React et du Tailwind (ou du CSS brut), donc les équipes sur d'autres stacks front-end tirent moins de l'export. Les comptes gratuits ont aussi un plafond. Jetons de chat IA limités, trois fichiers privés et envois d'images de 25 Mo. Ça s'épuise vite.
Pour commencer
- Créez un compte sur app.wonder.so et ouvrez un nouveau fichier. Les fichiers publics sont illimités ; les fichiers privés sont limités à trois sur l'offre gratuite.
- Décrivez l'écran ou le composant voulu dans le chat IA, ou partez d'une maquette existante et laissez l'IA générer en parallèle.
- Modifiez le résultat comme dans n'importe quel outil de design. Le canevas dispose de calques, de composants, de variables de design, de grilles et d'une bibliothèque de shaders et d'icônes.
- Connectez votre espace de travail pour la livraison. Reliez un dépôt GitHub pour importer de vraies interfaces dans le canevas, ou ajoutez le serveur MCP Wonder à Claude, Cursor ou Codex pour faire circuler les changements dans les deux sens.
- Exportez ou synchronisez le code React et Tailwind de production vers votre projet.
Informations sur le produit
Aperçu des tarifs, des plateformes compatibles et des performances de Wonder.
Idéal pour
Les utilisateurs, tâches et cas d'usage où cet outil convient le mieux.
Utilisateurs
- Designers produit
- Ingénieurs design et développeurs front-end
- Petites équipes produit
- Fondateurs créant leur première interface
Tâches
- Générer une interface à partir d'un texte
- Reconstruire l'interface existante d'un produit
- Exporter le design vers React et Tailwind
- Garder design et code synchronisés
- Prototyper des maquettes interactives
Cas d'usage
- Lancer l'écran d'une nouvelle fonctionnalité
- Transmission à l'ingénierie
- Travailler dans un agent de codage
- Refonte d'une page existante
- Séances de relecture en équipe
Fonctionnalités clés
Un canevas qui correspond au code
L'argument central de Wonder est que son format de design correspond au code un à un. Un composant sur le canevas est la même chose que le composant de votre projet. Vous disposez les éléments visuellement et le résultat est un vrai composant React, pas son image. Pour les équipes lassées de reconstruire les écrans à la main, c'est tout l'intérêt de l'outil.
Génération IA et chat intégré
L'éditeur dispose d'un chat IA qui génère et modifie l'interface sur le canevas. Vous décrivez ce que vous voulez, puis continuez à lui parler en affinant la maquette. Les comptes Pro reçoivent 20 $ de jetons IA par mois et par utilisateur invité. L'offre gratuite garde des jetons limités.
Export React et Tailwind
Le travail terminé s'exporte en React et Tailwind prêts pour la production, avec du CSS brut en alternative. Le code est censé aller directement dans un vrai projet. Pas un dossier de transmission. Si votre stack n'est pas basé sur React, c'est là que Wonder perd de sa pertinence.
Serveur MCP Wonder
Le serveur MCP sur mcp.wonder.so relie Wonder à des agents de codage comme Claude, Cursor et Codex. Votre agent obtient un accès en lecture et en écriture au canevas, il peut donc importer des designs dans le code ou renvoyer du code dans les designs. La configuration passe par une connexion OAuth standard. Aucune clé API à gérer. C'est gratuit sur toutes les offres, y compris la gratuite.
GitHub et application de bureau
Vous pouvez relier un dépôt GitHub pour que l'IA lise votre code existant et reconstruise la vraie interface du produit sur le canevas. Wonder fonctionne aussi comme application de bureau sur Mac et Windows pour ceux qui préfèrent éviter un onglet de navigateur. Vous préférez le navigateur ? Ça marche aussi.
Collaboration et variables de design
Les fichiers peuvent être publics ou privés, partagés avec des invitations en lecture seule ou en édition complète, avec des contrôles de présence pour les séances en direct. Un panneau Variables stocke les jetons de design, et chaque fichier a sa propre bibliothèque d'icônes. Les grilles et les dispositions bloc et en ligne permettent de tester des changements de structure sans tout refaire.
Avantages et inconvénients
Avantages
- Design et code partagent un seul format, donc aucune reconstruction manuelle entre le canevas et le produit.
- L'export réel vers React et Tailwind s'intègre à un code existant sans nettoyage.
- La prise en charge de MCP fonctionne avec Claude, Cursor, Codex et d'autres agents, et c'est gratuit sur toutes les offres.
- Le tarif fixe de 16 $ par utilisateur et par mois en facturation annuelle garde les coûts prévisibles à mesure que l'équipe grandit.
- Des applications de bureau pour Mac et Windows, plus une collaboration en temps réel avec rôles et permissions.
Inconvénients
- L'export est lié à React et Tailwind, donc les équipes sur d'autres stacks front-end perdent presque tout le bénéfice.
- L'offre gratuite plafonne les jetons de chat IA, trois fichiers privés et les envois d'images de 25 Mo, ce qui freine les vrais projets. Trois fichiers privés, c'est peu.
- Aucun quota mensuel de jetons n'est indiqué pour l'offre gratuite, donc un usage intensif de l'IA vous pousse vite vers Pro.
- L'outil est encore jeune ; il est sorti en avril 2026, donc attendez-vous à des changements réguliers et à quelques aspérités pendant que l'équipe continue de livrer des fonctionnalités et des correctifs toutes les quelques semaines.
Questions fréquentes
Wonder est un outil de design IA qui transforme le travail sur canevas en code de production. Vous dessinez l'interface sur un canevas familier, la générez et la modifiez avec l'IA, puis exportez du vrai React et Tailwind plutôt qu'une maquette statique.
Contenus associés
Découvrez des outils, des compétences et des articles liés à Wonder.
Alternatives à Wonder
X Ray Interpreter
X-ray Interpreter · ImageX Ray Interpreter est un outil de radiologie par IA basé sur le web qui transforme les radiographies, les scanners, les IRM, les échographies et les images TEP en comptes rendus en langage clair. Vous téléchargez un examen, obtenez une interprétation préliminaire de la radiographie en quelques instants, puis posez des questions complémentaires si quelque chose mérite une explication. Il sert de second avis et d'aide à l'apprentissage, pas de diagnostic médical.
Aieasypic
AIEasyPic · ImageAIEasyPic est un générateur d'images par IA qui transforme de simples prompts texte en œuvres finies en quelques secondes. Vous pouvez aussi entraîner des modèles personnalisés sur vos propres photos, échanger des visages dans des images existantes et créer de courts clips vidéo à partir de texte, le tout depuis un navigateur. Il convient aux créateurs occasionnels qui veulent des visuels rapides et aux amateurs qui souhaitent bâtir un modèle personnel sans toucher à la moindre ligne de code.
Chargen
Chargen · ImageChargen est un générateur de personnages par IA et une boîte à outils de création d'univers conçue pour Donjons & Dragons et les autres jeux de rôle sur table. Il transforme une idée d'une ligne en un portrait de personnage peint, crée des PNJ, des monstres, des cartes et des rencontres dans la même session, et garde les détails de chaque créature à portée de main. Le volet art pour jeu de rôle sur table repose sur un système de crédits appelé Gold, tandis que les générateurs de texte restent gratuits pour tous.