LUNAGRAPH : dessinez vos interfaces, elles sont déjà en code React
⏱️ Temps de lecture estimé : 3 minutes
📌 LUNAGRAPH est un canevas de design qui produit du vrai HTML, CSS et React. On y dessine à la souris, on y assemble des composants avec leurs états, et rien ne se perd entre la maquette et le dépôt : ce que vous voyez à l’écran est exactement ce que le développeur récupère.
Sur un projet web, la perte se joue au passage de relais. Le designer livre une image, l’intégrateur reconstruit chaque bloc, et deux versions commencent à diverger le jour même. Lunagraph prend le problème par l’autre bout : dès le premier trait, ce que vous manipulez est du code.
Concrètement, vous dessinez vos écrans sur un canevas, vous posez les styles et vous alignez les états d’un même parcours côte à côte. Le panneau latéral expose les propriétés, et une vue Code affiche le React correspondant au composant sélectionné. Un composant se décline en variantes — ready, confirm, burning, complete — que vous testez directement sur place.
L’application est propulsée par Claude Code. Le panneau de chat exécute Claude Code depuis votre terminal, avec votre propre abonnement, et retrouve vos skills comme vos connexions MCP. Vous pouvez aussi brancher un autre agent — Codex, Cursor, ou n’importe lequel via le serveur MCP — qui travaille sur le canevas pendant que l’app est ouverte.
- 🤖 Un canevas qui écrit du vrai HTML, CSS et React
- 🧩 Composants avec props, états et interactions, réglés sur place
- 🔌 Claude Code, Codex ou Cursor branchés au canevas, ou n’importe quel agent via MCP
- 🗂️ Import du codebase GitHub ou local, composants et styles compris
- 📸 Extension Chrome qui capture une page et conserve ses composants
- 🚀 Prototype cliquable, partagé par un lien qui se met à jour sans changer
Le geste que je trouve le plus juste, c’est de partir du code existant. Lunagraph se branche à un dépôt GitHub ou à des fichiers locaux, selon deux portées : tout le codebase, synchronisé, à condition qu’il tienne sur Tailwind v4 et React ; ou l’import du seul design system, pensé pour les monorepos et les applications de production, qui pousse vers un dépôt de design séparé. Une extension Chrome capture une page en ligne et la dépose sur le canevas ; l’option « Capture components » conserve les composants reconnus avec leurs props au lieu de tout aplatir en éléments neutres.
Sur le canevas, on relie ensuite les écrans en un prototype cliquable et on partage un lien que l’on met à jour sans le changer. On peut aussi insérer un aperçu vivant de son localhost, comparer plusieurs tailles de fenêtre et interagir avec la page pendant l’implémentation. La limite est honnête : tout ce qui demande un back-end — comptes réels, stockage côté serveur, envoi d’e-mails — sort du cadre.
Mon avis : concevoir avec les composants réels plutôt qu’avec leur approximation, c’est le bon pari, et le chat branché à votre abonnement évite d’ajouter une énième dépendance à la pile. Deux réserves, pourtant. L’import de codebase n’est pas actif par défaut sur un nouveau projet : il faut en demander l’accès. Et l’ensemble reste en alpha, avec une version 0.0.160 pour macOS, sur Apple Silicon comme sur Intel, et une 0.0.151 sur Windows.
Pour un designer qui veut arrêter de traduire, ou un développeur à qui l’on renvoie sans cesse des maquettes à refaire, l’idée est nette : un seul objet, du croquis au code.
