ABOOAI/codex-skills

Texte Image vers Visuel HTML

Objectif

Transformer une image de référence chargée en texte en un visuel HTML plus clair et plus utile. Conserver les faits source, améliorer la rédaction, restructurer l'information et exporter une capture d'écran haute résolution uniquement après que l'utilisateur a validé la direction HTML.

Flux de travail

1. Comprendre la source

   • Inspecter visuellement l'image soumise.
   • Extraire les entités, étiquettes, nombres, catégories, comparaisons, conclusions, mises en garde et texte de marque source.
   • Séparer les faits essentiels du texte décoratif, des filigranes, de la marque de la plateforme, des étiquettes redondantes et des artefacts de mise en page.
   • Si la reconnaissance optique de caractères (OCR) n'est pas fiable, transcrire manuellement les informations visibles et signaler les champs incertains.

2. Définir l'intention de sortie

   • Déduire le public cible et le contexte de lecture : image pour les réseaux sociaux, graphique d'article, comparaison commerciale, rapport interne, fiche produit, checklist, tableau de bord, etc.
   • Décider si la meilleure sortie est une page de décision, un tableau comparatif, une infographie, une carte récapitulative, une page de rapport ou une longue page de type carrousel.
   • Ne pas reproduire simplement la mise en page de référence, sauf si l'utilisateur le demande explicitement.

3. Réécrire le texte

   • Conserver les faits matériels, les nombres, les noms de produits, les limites, les notes de risque et les mises en garde.
   • Réécrire les formulations denses en phrases courtes destinées à l'utilisateur.
   • Privilégier la formulation « conclusion + condition + mise en garde ».
   • Utiliser des étiquettes explicites telles que « Meilleur pour », « Attention », « Avantage clé », « Limite », « Exemple de prix » et « Point de décision » lorsqu'elles facilitent le balayage visuel de la page.
   • Rester conservateur pour les réclamations légales, médicales, d'assurance, financières et liées à la conformité ; éviter d'inventer des recommandations non étayées par la source.

4. Redessiner l'architecture de l'information

   • Placer la conclusion la plus importante en premier.
   • Ajouter un résumé en haut ou une section « Comment choisir » pour les comparaisons denses.
   • Utiliser des fiches produit/entité pour le positionnement de chaque élément.
   • Placer une section « Différences clés » avant le tableau de détails complet.
   • Mettre les matrices détaillées après le résumé, pas avant.
   • Minimiser les lignes où toutes les options sont identiques, sauf si l'utilisateur souhaite une archive exhaustive.

5. Construire le HTML

   • Créer un fichier HTML autonome, sauf si l'utilisateur a demandé un framework.
   • Utiliser un CSS adapté aux captures d'écran : largeur d'exportation fixe, dimensions de grille stables, contraste élevé, tailles de police lisibles et espacement des lignes suffisant.
   • Éviter les éléments décoratifs qui réduisent la lisibilité.
   • Supprimer la marque de la plateforme source, les filigranes et les étiquettes de référence non pertinentes, sauf si l'utilisateur demande à les conserver.
   • Maintenir le HTML généré modifiable et autonome.

6. Confirmer avant la capture d'écran finale

   • Partager le chemin du HTML ou l'état de l'aperçu.
   • Résumer la structure et les principaux choix de copie/conception.
   • Demander confirmation avant de produire la capture d'écran haute résolution finale lorsque l'utilisateur n'a pas déjà approuvé la direction HTML.
   • Si l'utilisateur demande explicitement « capture d'écran directe » ou « va directement au final », la confirmation peut être ignorée.

7. Exporter la capture d'écran haute résolution

   • Utiliser scripts/export_highres_screenshot.py lorsque Chrome est disponible.
   • Privilégier des dimensions d'exportation larges pour le texte dense :
     • Standard : largeur 2200-2600, échelle 2
     • Très dense : largeur 2800-3200, échelle 2
   • Exporter en PNG, puis rogner les espaces blancs du bas.
   • Vérifier les dimensions et inspecter visuellement le résultat.

Règles de conception

• Concevoir pour une compréhension en un coup d'œil, pas pour une similitude pixel par pixel.
• Utiliser une hiérarchie : titre, fiches de conclusion, fiches d'élément, différences clés, tableau de détails.
• Rendre les nombres et les limites visuellement identifiables.
• Utiliser les couleurs de manière sémantique :
  • Vert pour un avantage relatif.
  • Orange ou couleur de marque pour les différences clés.
  • Rouge pour les limites, exclusions ou risques.
• Utiliser moins de mots par cellule ; si une cellule nécessite beaucoup de mots, déplacer l'explication dans une fiche de différence clé.
• Éviter de faire d'un énorme tableau dense l'artefact principal.
• Pour le travail de capture d'écran, augmenter la largeur du canevas HTML et la taille de la police avant d'exporter, plutôt que de se fier à la mise à l'échelle de l'image.

Règles de rédaction

Exemples de réécriture :

• Dense : "10年保证续保：医保内医疗费/质子重离子；非保证续保：医保外医疗费/癌症外购药/重疾特需"

• Clair : "Les frais médicaux dans le cadre de l'assurance maladie et la protonthérapie/radiothérapie aux ions lourds peuvent être renouvelés sur 10 ans ; les frais hors assurance, les médicaments achetés à l'extérieur et les besoins spéciaux pour maladies graves ne sont pas renouvelables."

• Dense : "30天，意外伤害无等待期"

• Clair : "Période d'attente de 30 jours ; pas de période d'attente pour les blessures accidentelles."

• Dense : "医保内：5000元；医保外：1万"

• Clair : "Franchise pour soins médicaux généraux dans le cadre de l'assurance maladie : 5 000 ¥ ; franchise hors assurance : 10 000 ¥."

Validation requise

Avant la remise :

• Confirmer qu'aucun fait source important n'a été omis.
• Confirmer que le texte de marque/plateforme source a été supprimé sur demande.
• Vérifier que les mots longs et les lignes chinoises denses ne se chevauchent pas.
• Vérifier que le HTML fonctionne à la largeur de capture d'écran prévue.
• Vérifier les dimensions du PNG final et que le fichier existe.
• Si une capture d'écran est produite, inclure le chemin de la capture et la rendre en ligne si possible.

Pour une liste de vérification compacte, lire references/visual-html-checklist.md.