L'IA dans MarkupGen : de la génération à la notation

L'IA dans MarkupGen n'est pas une fonctionnalité isolée — elle traverse les trois étapes du workflow : construire le code à partir d'un design, juger la qualité de ce résultat, et suggérer comment l'améliorer quand le résultat ne correspond pas tout à fait. Cet article détaille chacune de ces couches, et explique pourquoi elles sont conçues pour appuyer le jugement d'un développeur plutôt que pour le remplacer.

Construire le code à partir de la structure du design

À la première étape, l'IA ne « redessine » pas le design à partir d'une capture d'écran — elle lit la structure réelle envoyée par le plugin Figma : Auto Layout, espacement, hiérarchie des calques, contraintes de redimensionnement. À partir de là, elle génère du HTML/CSS qui suit directement cette structure au lieu de deviner pixel par pixel :

• Les propriétés Auto Layout (direction, gap, padding, alignement) sont transposées en règles CSS Flexbox équivalentes.
• Les contraintes de redimensionnement de la mise en page se traduisent en breakpoints responsives, plutôt qu'en une page à largeur fixe unique.
• Le résultat privilégie des éléments HTML porteurs de sens plutôt que des <div> profondément imbriqués et sans étiquette.

Construire à partir de la structure plutôt que deviner à partir d'une image, c'est ce qui permet au résultat de préserver la hiérarchie et l'espacement du design d'origine, au lieu d'obtenir quelque chose qui « a l'air juste » alors que le CSS sous-jacent est complètement différent.

Choisir le bon modèle d'IA pour la tâche

MarkupGen vous permet de choisir entre plusieurs modèles d'IA partout où ce choix compte — par exemple lors de la régénération du code après une évaluation. Deux niveaux sont proposés : un modèle rapide et économique, adapté aux designs petits ou moyens, et un modèle de plus haute qualité, adapté aux designs plus grands avec des composants plus complexes. Pour les comptes qui ne sélectionnent pas manuellement de modèle, le système choisit automatiquement le plus approprié en fonction du plan en cours, en équilibrant vitesse et coût sans nécessiter de configuration.

Notation automatique de la qualité du résultat

Une fois le code généré, l'IA compare une capture d'écran de l'aperçu en direct avec le design d'origine et note leur degré de correspondance sur une échelle de 1 à 10. Ce n'est pas un chiffre abstrait — il s'accompagne d'une évaluation détaillée de ce qui correspond et de ce qui cloche, pour que vous sachiez immédiatement si un export est prêt pour la production ou s'il nécessite encore du travail. Une fois le score au-delà d'un seuil quasi parfait, le système considère qu'il ne reste rien de significatif à corriger pour l'IA, et masque les suggestions de régénération inutiles.

La boucle de rétroaction : analyser et régénérer

Si un export n'est pas à la hauteur, MarkupGen ne se contente pas de vous donner un chiffre et de s'arrêter là. La vue d'évaluation compare le design d'origine et l'aperçu en direct côte à côte, avec un zoom pour inspecter les détails, génère une suggestion d'amélioration précise, et vous permet de modifier cette suggestion avant de cliquer sur « Régénérer avec ce changement » — pour que l'IA reconstruise le code autour du retour que vous voulez vraiment, au lieu de repartir de zéro au hasard.

Pourquoi cela compte

Ces trois couches visent le même objectif : retirer la traduction mécanique entre le design et le code pour que l'effort du développeur porte sur ce qui a réellement besoin de jugement humain — les détails d'interaction, les cas particuliers, et l'intégration du résultat dans une base de code plus large. Si vous voulez voir ces trois couches à l'œuvre sur votre propre design, vous pouvez l'essayer gratuitement.