Lunagraph
Lunagraph · Image · Programmation
Lunagraph est un canvas de design IA conçu pour les ingénieurs design. Vous dessinez des écrans sur un canvas, ajoutez des états et des interactions, puis copiez le code React qui correspond à ce que vous avez dessiné, ou l'envoyez directement à votre agent de code. Voyez-le comme un outil de design d'interface et un générateur de code React au même endroit. Il vise ceux qui veulent concevoir et livrer ensemble plutôt que de faire passer des fichiers par-dessus un mur.
À propos de Lunagraph
Qu'est-ce que Lunagraph
Lunagraph est un canvas qui écrit du code pendant que vous concevez. La promesse est simple : au lieu de dessiner un écran dans un outil et de le reconstruire dans un autre, vous dessinez l'écran et obtenez le code React au même endroit. L'entreprise le présente comme fait pour les ingénieurs design, des gens que préoccupent autant l'apparence que la construction.
Le problème qu'il attaque, c'est la transmission, qui reste aujourd'hui l'étape la plus lente de presque tout flux produit. La plupart des équipes font encore une boucle lente où le designer termine une maquette, l'ingénieur la lit, pose des questions et la reconstruit en code. Lunagraph évite cela en gardant design et code liés. Chaque état, chaque interaction, puis le code. Voilà toute l'idée.
Il y a un point important, et mieux vaut le savoir d'emblée. Lunagraph ne vous fournit pas une IA intégrée avec son propre abonnement, donc aucun modèle n'est inclus sur lequel vous appuyer sans configuration. Vous apportez votre agent et votre abonnement. Cela veut dire que la qualité du code dépend de l'agent que vous connectez. Cela veut aussi dire que Lunagraph accompagne des outils que vous payez sans doute déjà plutôt que de les remplacer dans une boîte fermée.
Pour commencer
- Ouvrez Lunagraph dans votre navigateur sur lunagraph.com et connectez-vous pour créer un nouveau canvas. Cela prend une minute.
- Dessinez vos premiers écrans sur le canvas et ajustez les styles jusqu'à ce que la mise en page vous convienne.
- Ajoutez des états, des transitions et des props pour que chaque élément se comporte comme un vrai composant, pas comme une image figée. C'est l'étape qui compte.
- Connectez votre propre agent de code, soit dans le panneau de chat de Lunagraph, soit via MCP, pour qu'il travaille avec vous sur le canvas.
- Copiez le code React, ou renvoyez le design terminé à votre agent pour l'intégrer à votre base de code.
Informations sur le produit
Aperçu des tarifs, des plateformes compatibles et des performances de Lunagraph.
Idéal pour
Les utilisateurs, tâches et cas d'usage où cet outil convient le mieux.
Utilisateurs
- Ingénieurs design
- Développeurs front-end
- Petites équipes produit
Tâches
- Transformer une maquette en composant fonctionnel
- Prototyper un flux interactif
- Réutiliser de vrais composants dans un design
Cas d'usage
- Un créateur solo qui livre un projet perso et ne veut pas d'un fichier de design à part
- Un ingénieur design qui explore une idée un vendredi et se transmet le code le lundi
- Itérer sur des retours
Fonctionnalités clés
Canvas de design vers code
Le cœur de Lunagraph est un canvas complet où vous dessinez des écrans puis tirez du code qui correspond. L'entreprise présente tout le flux en trois étapes dans l'ordre : concevez l'écran, reliez-le en composant, puis livrez-le en code. Vous dessinez la mise en page, ajoutez états et interaction, et copiez le React ou l'envoyez à votre agent quand le résultat vous convient. Le code reflète ce que vous avez vraiment conçu, donc l'étape de reconstruction disparaît d'elle-même.
Apportez votre propre agent
Le panneau de chat de Lunagraph place votre propre agent directement sur le canvas. Sélectionnez un bouton, une ligne ou un cadre, et l'agent comprend ce que vous visez. Les modifications précises tombent là où vous avez pointé, pas dans un endroit vague. Vous gardez votre abonnement d'agent actuel. Cela maintient les coûts proches de ce que vous payez déjà, mais cela veut aussi dire que Lunagraph ne fait pas le gros du travail tout seul.
Connexions MCP
Via MCP, vous pouvez brancher Lunagraph sur des outils que vous utilisez déjà. Amenez une idée dont vous discutez, tirez un composant de votre dépôt ou renvoyez un design terminé en code. Si votre flux passe déjà par des agents et des serveurs MCP, cela s'intègre sans grande configuration.
Composants interactifs avec états
Un composant sur le canvas peut réellement fonctionner. Vous ajoutez des transitions et des props, ce qui transforme un cadre figé en quelque chose qui a un comportement. Avez-vous déjà essayé d'expliquer un état hover à un ingénieur par Slack ? Avoir l'état intégré à l'artefact est le vrai gain ici, car l'interaction fait partie du fichier et non d'une note dans une conversation.
Prototypage et partage de flux
Vous pouvez dessiner un flux, demander au chat de le prototyper et envoyer un lien à votre équipe, afin que les relecteurs cliquent dans tout le parcours sans rien installer. Les gens cliquent, laissent des retours et vous itérez, tout sur le même canvas. Comme outil de prototypage, cela vaut mieux qu'exporter des images et écrire un paragraphe sur la façon dont les écrans se relient.
Extension Chrome pour capturer une interface en direct
La documentation mentionne une extension Chrome qui capture l'interface en direct, utile quand ce que vous voulez redessiner existe déjà dans le navigateur. Prendre ce qui est là vaut mieux que le redessiner de zéro. Si vous avez déjà reconstruit une page pixel par pixel juste pour la retoucher, vous apprécierez le raccourci.
Avantages et inconvénients
Avantages
- Code et design vivent ensemble, donc il n'y a pas de document de transmission séparé à maintenir. Rien ne se perd.
- Fonctionne avec votre agent et votre abonnement actuels au lieu de vous enfermer dans un nouveau.
- Le support MCP fait qu'il parle aux dépôts et aux outils que vous utilisez déjà.
- Le canvas gère états et interaction, ce qui rend les prototypes cliquables plutôt que statiques.
Inconvénients
- Il vous faut votre propre agent et abonnement pour en tirer une vraie valeur. Sans cela, le côté code est limité, et aucune IA incluse ne prend le relais.
- La sortie est du code React. Si votre stack est Vue, Svelte ou autre chose, le code livré ne s'intégrera pas aussi proprement.
- Nous n'avons pas pu confirmer le tarif actuel sur le site, alors vérifiez la page officielle avant de bâtir un plan sur un chiffre.
Questions fréquentes
C'est un canvas de design qui produit du code React pendant que vous travaillez. Vous dessinez des écrans, ajoutez des états et des interactions, puis copiez le code ou l'envoyez à votre agent de code. L'idée est de supprimer l'écart entre concevoir un écran et le construire.
Contenus associés
Découvrez des outils, des compétences et des articles liés à Lunagraph.
Alternatives à Lunagraph
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.