Comment évaluer le HTML généré par IA avant de le livrer

Réponse rapide : ne jugez pas du HTML généré par IA sur une seule correspondance de capture d'écran. Vérifiez la fidélité visuelle sur plusieurs breakpoints, le markup sémantique (pas une soupe de div), le vrai comportement responsive quand vous redimensionnez le navigateur, l'accessibilité de base (texte alternatif, contraste, focus clavier), et le poids de la page — un score visuel automatisé est un premier signal utile, pas un substitut à tout cela.

Pourquoi « ça a l'air bon » ne suffit pas

Les outils Figma vers code IA varient beaucoup dans ce qu'ils optimisent réellement. Certains privilégient avant tout une correspondance visuelle pixel-perfect — ce qui peut vouloir dire que le markup sous-jacent est un empilement de <div> positionnées en absolu qui rendent par hasard de façon identique au design à une largeur spécifique. Ça a l'air terminé. Ça ne l'est pas. Une checklist reproductible attrape ce qu'un coup d'œil à l'aperçu ne verra pas.

La checklist

1. La fidélité visuelle à plus d'une largeur. Comparez le rendu au design à la taille réelle du frame, puis redimensionnez le navigateur largement au-delà, dans les deux sens. Une mise en page qui ne correspond qu'à exactement 1440px de large n'est pas responsive — c'est une mise en page fixe qui a simplement été vérifiée une fois.

2. La correction sémantique. Ouvrez le vrai HTML. De vrais éléments <header>, <nav>, <main>, <section>, <footer> là où ils correspondent au rôle du contenu, ou une page entièrement construite à partir de <div> génériques ? Cela affecte l'accessibilité, le SEO et la maintenabilité du code pour la prochaine personne qui y touchera — voir Is Figma-to-HTML Output SEO-Ready? pour la checklist complète sur ce sujet.

3. La hiérarchie des titres. Un seul <h1>, des titres qui descendent dans un ordre logique plutôt que de sauter d'un niveau selon la taille de police. C'est l'un des détails que les outils IA ont le plus de risques de rater, parce que cela dépend de la compréhension de la structure du contenu, pas seulement de la mise en page visuelle.

4. Le vrai comportement responsive, pas seulement la présence de breakpoints. Redimensionnez le navigateur lentement sur toute la plage plutôt que de ne vérifier que les captures mobile et desktop — c'est entre ces deux extrêmes, dans le reformatage du contenu, le retour à la ligne du texte et l'espacement, que les mises en page cassent le plus souvent.

5. Les bases de l'accessibilité. Un texte alternatif sur les images porteuses de sens (ni vide ni basé sur le nom de fichier), un contraste de couleur suffisant sur le texte, et des états de focus visibles sur les éléments interactifs. Rien de tout cela n'est vérifiable par une simple comparaison de captures d'écran — cela demande d'ouvrir le markup et, idéalement, de naviguer la page au clavier avec la touche Tab.

6. Le poids et la propreté du code. Des styles inline dispersés partout, du CSS inutilisé hérité d'un framework, ou des éléments wrapper excessifs ajoutent tous du poids sans rien ajouter de visuel. Cela vaut la peine d'être vérifié même quand la page a l'air correcte.

Où se situe un score automatisé — et sa vraie limite

MarkupGen note chaque export automatiquement en comparant une capture d'écran de l'aperçu en direct au design original, sur une échelle de 1 à 10, avec le détail de ce qui correspond et de ce qui ne correspond pas. C'est un signal de première passe réellement utile pour le point 1 ci-dessus — il repère rapidement les dérives visuelles, et un score bas est un signal clair « à regarder avant de livrer ». Mais c'est explicitement un score de correspondance visuelle : il n'audite ni la sémantique, ni la hiérarchie des titres, ni l'accessibilité, ni le poids du code, parce que ce sont des choses qu'une comparaison de captures d'écran ne peut pas voir. Traitez-le comme la première étape de cette checklist, pas comme la checklist entière — les points 2 à 6 ont encore besoin d'une relecture humaine.

Si le score d'un export est correct mais que quelque chose reste visiblement décalé — un espacement, une couleur, un alignement — la vue d'évaluation de MarkupGen vous permet de comparer le design et l'aperçu en direct côte à côte, de décrire la correction précise que vous voulez, et de régénérer à partir de ce retour plutôt que de tout recommencer. Voir AI in MarkupGen pour comprendre comment fonctionne la boucle complète de notation et de régénération.

Essayez-le sur votre propre design

Faire tourner votre propre checklist sur un vrai export est la façon la plus rapide de voir combien de points un outil donné réussit déjà. Essayez MarkupGen gratuitement, ou consultez Figma to Semantic HTML pour voir concrètement à quoi ressemble un résultat sémantique par défaut.