Ce qu’il vous faut avant de commencer
UXMagic transforme une description écrite en un écran modifiable sur un canevas. Le centre d’aide indique que le premier facteur de qualité du résultat est le prompt, donc l’essentiel de la préparation consiste à écrire.
Le produit en une ligne, les écrans que vous voulez et le public. Le centre d’aide cite ces trois éléments comme les premiers qu’un prompt doit contenir.
Les couleurs de marque en codes exacts, et les polices, si elles doivent être respectées. Le centre d’aide prévient qu’une mention vague est interprétée alors qu’une instruction exacte est suivie.
Du vrai contenu si le contenu compte. Sans lui, vous obtenez du texte de remplacement, correct pour la structure et faux pour une démo.
Le parcours plutôt qu’un seul écran, si les écrans font partie d’un flux qui partage un thème et une navigation.
Toute référence, capture d’écran ou document de spécifications que vous voulez faire lire à l’IA, joint au même message pour qu’elle lise tout avant de concevoir.
Un compte. L’offre gratuite donne 20 crédits chaque jour, de quoi produire environ 3 écrans par jour, sans carte bancaire. Pro coûte $35 par mois.
Comment le travail se fait avec UXMagic
L’ordre ci-dessous suit le centre d’aide de l’entreprise.
Connectez-vous sur uxmagic.ai avec Google ou par email.
Démarrez un nouveau projet. Un projet est un conteneur pour des écrans qui partagent un thème, donc gardez les travaux sans lien dans des projets séparés.
Décrivez ce que vous voulez dans la zone de prompt. Le centre d’aide demande cinq parties : ce qu’est le produit, quels écrans vous voulez, à qui il s’adresse, la direction visuelle et tout ce qui n’est pas négociable.
Leur propre exemple travaillé : « A B2B invoicing tool for freelancers called Ledgerly. Design a marketing landing page, a pricing page with three tiers, and a dashboard listing recent invoices. Audience is solo freelancers, not enterprises. Visual direction: calm and trustworthy, deep green as the primary color, generous whitespace, sans-serif. The landing page must have a Start free CTA in the nav and a section on getting paid faster. »
Pour un nouveau projet, l’outil propose généralement un plan d’écrans avant de concevoir quoi que ce soit. Ajoutez, renommez ou supprimez des écrans, puis validez. Le centre d’aide est explicite : corriger le plan coûte bien moins cher que de reconcevoir des écrans terminés, donc passez du temps ici.
Les écrans sont ensuite conçus un par un et apparaissent sur le canevas au fur et à mesure.
Itérez. Utilisez le chat pour les changements structurels et thématiques, comme déplacer une section ou changer le thème du projet. Utilisez le mode Edit pour modifier le texte et remplacer les images directement, ce que le centre d’aide décrit comme exempt d’appel de génération. Des modifications ciblées sur une section ou une chaîne coûtent bien moins qu’une réécriture, et une réécriture coûte moins qu’une régénération complète.
Quand l’écran est bon, sortez-le de l’outil. Vous pouvez exporter vers Figma, exporter le code en HTML, React ou Tailwind, ou le publier comme site en ligne.
Sur cette page
Ce qu’il faut vérifier dans le résultat
Les cinq parties du prompt. Si le public ou la direction visuelle manque à l’écran, le prompt était trop mince.
La taille d’appareil. Une demande mobile doit être réellement remise en page, pas un écran desktop réduit.
La marque. Les codes exacts doivent être utilisés et aucune couleur d’accent supplémentaire ne doit apparaître.
Le contenu. Décidez si le texte est réel ou de remplacement avant de montrer l’écran à qui que ce soit.
La cohérence du thème sur chaque écran. La règle du centre d’aide est de vérifier le canevas, pas la réponse du chat. Un message qui annonce un changement de thème comme fait ne prouve pas que les écrans ont bougé.
Le contraste. Les thèmes sont validés pour des associations de couleurs lisibles avant d’être appliqués, donc un traitement à faible contraste volontaire mérite d’être annoncé d’emblée.
L’exhaustivité après un plan. Chaque écran de la liste validée doit exister. Un cadre vide signifie généralement que l’exécution s’est arrêtée trop tôt, souvent par manque de crédits.
Où ça se passe généralement mal
Le centre d’aide liste les échecs qu’il voit le plus souvent.
Les instructions vagues. « Make it pop » et « make it better » ne donnent aucune direction, et « like Stripe » gagne à être remplacé par l’URL du site et une demande de clone, ou par le nom de la qualité que vous visez réellement.
Dix changements dans un seul message. Le centre d’aide dit qu’ils interagissent entre eux et recommande deux ou trois à la fois.
Corriger le thème écran par écran, ce qui masque le symptôme et garantit une dérive plus tard.
Demander un mode sombre depuis le mode Edit sur un seul élément, un chemin qui, selon la documentation, peut coder les couleurs en dur au lieu de refaire le thème.
Régénérer tout un écran pour un manque partiel ou une faute de frappe. La régénération est décrite comme l’une des actions les plus coûteuses disponibles, et elle écarte les parties déjà correctes.
Faire des prompts écran par écran alors que les écrans étaient censés partager un thème et une navigation.
Tomber à court de crédits en cours de flux, ce qui laisse des cadres correctement nommés mais vides sur le canevas.
Ce que l’offre permet
La page de tarifs liste ces niveaux.
Free : gratuit, 20 crédits offerts chaque jour, jusqu’à 3 écrans par jour, crédits rechargés quotidiennement, sans carte bancaire. Pro : $35 par mois, 2 400 crédits mensuels, jusqu’à 400 écrans, projets illimités et aucune limite quotidienne. Facturé annuellement, c’est $17.5 par mois, soit $210 pour l’année, la moitié du prix mensuel. Enterprise : tarification sur mesure, avec crédits personnalisés, écrans générés par IA illimités, sièges d’équipe illimités, un tableau de bord d’administration d’équipe, et contrat et facturation personnalisés.
Les crédits couvrent la génération par IA, dans l’application et via le serveur MCP et le plugin Figma. Lire un écran, construire un thème et répondre à une question de clarification sont gratuits, et les offres payantes n’ont aucune limite quotidienne de crédits.
Ce que nous n’avons pas fait
Personne sur ce site n’a conçu quoi que ce soit dans UXMagic. Nous n’avons pas créé de projet, rédigé de prompt, approuvé de plan d’écran ni exporté de fichier. Tout ce qui précède provient du centre d’aide de l’entreprise, listé dans les Sources.
Nous n’avons pas testé le canevas, nous décrivons donc les contrôles uniquement avec les noms utilisés sur ces pages. Nous n’avons pas mesuré le temps nécessaire pour générer un écran, et nous n’avons pas exécuté de prompt nous-mêmes pour voir si la recette en cinq parties produit un écran utilisable. Nous rapportons les chiffres au niveau des forfaits et laissons les coûts en crédits par action hors de ce guide.
Sources
Consulté le 3 octobre 2026.
Create your first project, https://uxmagic.ai/help/getting-started/create-your-first-project, date de mise à jour par l’éditeur : 3 septembre 2026. Writing a prompt that gets what you want, https://uxmagic.ai/help/getting-started/writing-a-good-prompt, date de mise à jour par l’éditeur : 27 août 2026. Text to UI, https://uxmagic.ai/help/generate/text-to-ui, date de mise à jour par l’éditeur : 27 août 2026. Every way to generate a screen, https://uxmagic.ai/help/generate/ways-to-generate-a-screen, date de mise à jour par l’éditeur : 27 août 2026. Themes and style guides, https://uxmagic.ai/help/design-and-edit/themes-and-style-guides, date de mise à jour par l’éditeur : 27 août 2026. My style guide or theme did not apply, https://uxmagic.ai/help/troubleshooting/style-guide-did-not-apply, date de mise à jour par l’éditeur : 27 août 2026. A screen is blank or empty, https://uxmagic.ai/help/troubleshooting/blank-or-empty-screens, date de mise à jour par l’éditeur : 27 août 2026. How credits work, https://uxmagic.ai/help/account-and-billing/how-credits-work, date de mise à jour par l’éditeur : 3 septembre 2026. Plans and limits, https://uxmagic.ai/help/account-and-billing/plans-and-limits, date de mise à jour par l’éditeur : 3 septembre 2026. Pricing, https://uxmagic.ai/pricing, consulté le 3 octobre 2026.
Journal des mises à jour
3 octobre 2026 : première version, construite à partir du centre d’aide de l’entreprise listé ci-dessus. Aucun test pratique n’a été réalisé.