Lunagraph

Qu'est-ce que Lunagraph ?

Lunagraph est une toile de design pour créer des interfaces utilisateur à l'aide de vrai code HTML, CSS et React. L'objectif principal est d'aider les équipes à concevoir et implémenter l'UI de manière à maintenir l'alignement entre le design et le code livré, en réduisant les écarts de « handoff ».

Au lieu de traiter le design comme un livrable distinct qu'un autre doit traduire en composants, Lunagraph positionne le livrable comme le code lui-même, avec l'assistance IA fournie par Claude Code.

Fonctionnalités clés

• Design direct dans du vrai code (HTML, CSS, React) : Le travail sur la toile se reflète dans du vrai markup et des composants, de sorte que la sortie corresponde à ce qui s'exécutera.
• Workflow sans handoff pour les équipes UI : La plateforme est conçue pour assurer la cohérence entre designers, product, développeurs et agents, sans étape de traduction du design vers l'implémentation.
• Assistance contextuelle alimentée par Claude Code : Le partenaire IA est capable de travailler avec l'ensemble du contexte, y compris la toile et le codebase existant.
• Boucle toile + chat + repo local : Le chat accède à la toile et au codebase local, et le workflow inclut l'implémentation directe dans un dépôt avec aperçu des résultats.
• Aperçu en direct et comparaison par captures d'écran : Le workflow prévoit un aperçu en iframe live et utilise des captures d'écran du design et de la sortie pour comparer.
• Mises à jour de composants in-repo à partir de changements de design : Les exemples incluent la génération de composants comme PricingCard et la mise à jour de fichiers comme un tableau de comparaison de fonctionnalités.

Comment utiliser Lunagraph

1. Démarrer depuis une toile de design : Commencez à concevoir des éléments UI sur la toile.
2. Utiliser le chat intégré pour l'aide à l'implémentation : Demandez des changements en faisant référence à la toile et au contexte du dépôt.
3. Laisser l'IA implémenter dans votre repo : Le workflow inclut l'écriture directe dans votre codebase local.
4. Aperçu et vérification : Utilisez l'aperçu iframe live et capturez à la fois la toile/design et la sortie UI résultante pour comparer.
5. Itérer sur les composants : Appliquez d'autres mises à jour en demandant des refactorings ou ajustements de fonctionnalités (par exemple, diviser une sidebar en composants plus petits).

Cas d'usage

• Création UI du designer à l'implémentation : Un designer crée des layouts UI sur la toile et s'assure que le code résultant utilise du vrai HTML/CSS/React plutôt qu'un fichier de design séparé.
• Workflow d'équipe sans friction de handoff : Une équipe mixte (design, product, développement et agents) travaille dans le même workflow, réduisant les étapes de traduction entre rôles.
• Refactoring de composants complexes avec assistance IA : Quand un composant devient trop complexe (ex. : une sidebar), le chat aide à le restructurer en composants plus petits et à ajouter des comportements comme un toggle de collapse.
• Mise à jour de pages existantes depuis l'intention de design : Utilisez une capture d'écran ou une référence de palette pour mettre à jour des sections UI afin que la sortie corresponde au layout et au style attendus.
• Construction d'UI pricing/fonctionnalités depuis des designs toile : Générez des composants pour cartes pricing et tableaux de fonctionnalités, intégrez-les dans des layouts de page et mettez à jour le markup de tableaux existants.

FAQ

• Quel code Lunagraph génère-t-il ou avec quel code travaille-t-il ? Lunagraph génère et travaille avec du vrai code HTML, CSS et React.

• Lunagraph repose-t-il sur un handoff de fichier de design séparé ? Le site met l'accent sur un workflow « zero handoff », où le livrable est le code lui-même plutôt qu'un fichier de design à traduire.

• Que signifie « powered by Claude Code » dans ce workflow ? Le contenu indique que Claude Code agit comme un partenaire de design créatif qui prend en compte la toile et le codebase local, soutenant les tâches d'implémentation via le chat.

• Comment les utilisateurs vérifient-ils que le design correspond à la sortie ? Le workflow inclut un aperçu en iframe live et la capture d'écran de la toile et du résultat rendu pour comparaison.

• L'IA peut-elle lire et écrire dans un dépôt local ? La page montre un exemple d'« AI File Access » avec des chemins de fichiers pour lecture/écriture hors projet, suggérant une intégration repo local, mais sans détails supplémentaires.

Alternatives

• Outils de design polyvalents (style Figma) + implémentation développeur séparée : Cela garde le design et le code dans des outils et workflows distincts, nécessitant une traduction des fichiers de design en composants.
• Constructeurs d’UI code-first (éditeurs de composants React) sans toile de design : Ceux-ci se concentrent sur la construction directe en code UI, mais ne fournissent pas toujours une toile conçue pour capturer et communiquer l’intention de design de la même manière.
• Assistants de codage IA intégrés à un IDE : Ils aident à générer ou refactoriser du code, mais n’intègrent généralement pas une toile de design, une comparaison en aperçu iframe en direct, et la boucle « toile + chat + repo » décrite ici.
• Outils de prototypage UI qui exportent des composants ou styles : Ils visent à relier design et implémentation, mais l’approche implique souvent un export ou une conversion plutôt que la production de code comme livrable principal.