Texto de Imagen a HTML Visual

¿Qué hace Texto de Imagen a HTML Visual?

Propósito

Transformar una imagen de referencia con mucho texto en un HTML visual más claro y útil. Preservar los hechos de la fuente, mejorar la redacción, rediseñar la estructura de la información y exportar una captura de pantalla de alta resolución solo después de que el usuario confirme la dirección del HTML.

Flujo de trabajo

1. Comprender la fuente

   • Inspeccionar visualmente la imagen enviada.
   • Extraer entidades, etiquetas, números, categorías, comparaciones, conclusiones, advertencias y texto de marca de la fuente.
   • Separar los hechos centrales del texto decorativo, marcas de agua, marcas de plataforma, etiquetas redundantes y artefactos de diseño.
   • Si el OCR no es fiable, transcribir manualmente la información visible y marcar los campos dudosos.

2. Definir la intención del resultado

   • Deducir la audiencia objetivo y el contexto de lectura: imagen social, gráfico de artículo, comparativa de ventas, informe interno, ficha de producto, lista de verificación, panel de control, etc.
   • Decidir si el mejor resultado es una página de decisión, tabla comparativa, infografía, tarjeta resumen, página de informe o una página tipo carrusel.
   • No limitarse a replicar el diseño de referencia a menos que el usuario lo solicite explícitamente.

3. Reescribir el texto

   • Preservar hechos materiales, números, nombres de productos, límites, notas de riesgo y advertencias.
   • Reescribir texto denso en afirmaciones cortas y dirigidas al usuario.
   • Preferir la redacción de "conclusión + condición + advertencia".
   • Usar etiquetas explícitas como "Mejor para", "Cuidado", "Ventaja clave", "Límite", "Ejemplo de precio" y "Punto de decisión" cuando faciliten el escaneo visual.
   • Mantener las afirmaciones sensibles a cumplimiento legal, médico, de seguros, financiero; evitar inventar recomendaciones no respaldadas por la fuente.

4. Rediseñar la arquitectura de la información

   • Poner la conclusión más importante primero.
   • Añadir un resumen superior o una sección de "cómo elegir" para comparaciones densas.
   • Usar tarjetas de producto/entidad para posicionamiento por elemento.
   • Incluir una sección de diferencias clave antes de la tabla de detalles completa.
   • Colocar matrices detalladas después del resumen, no antes.
   • Minimizar filas donde todas las opciones son idénticas a menos que el usuario necesite un archivo exhaustivo.

5. Construir HTML

   • Crear un archivo HTML autónomo a menos que el usuario solicite un framework.
   • Usar CSS apto para capturas de pantalla: ancho de exportación fijo, dimensiones de cuadrícula estables, alto contraste, tamaños de fuente legibles y suficiente espaciado entre filas.
   • Evitar elementos decorativos que reduzcan la legibilidad.
   • Eliminar marcas de la plataforma de origen, marcas de agua y etiquetas de referencia no relacionadas a menos que el usuario solicite conservarlas.
   • Mantener el HTML generado editable y autónomo.

6. Confirmar antes de la captura final

   • Compartir la ruta del HTML o el estado de vista previa.
   • Resumir la estructura y las principales decisiones de copia/diseño.
   • Solicitar confirmación antes de producir la captura de pantalla final de alta resolución cuando el usuario no haya aprobado ya la dirección del HTML.
   • Si el usuario solicita explícitamente "captura directa" o "ve directo a lo final", se puede omitir la confirmación.

7. Exportar captura de pantalla de alta resolución

   • Usar scripts/export_highres_screenshot.py cuando Chrome esté disponible.
   • Preferir dimensiones de exportación anchas para texto denso:
     • Estándar: ancho 2200-2600, escala 2
     • Muy denso: ancho 2800-3200, escala 2
   • Exportar PNG, luego recortar el espacio en blanco inferior.
   • Verificar dimensiones e inspeccionar visualmente el resultado.

Reglas de diseño

• Diseñar para la comprensión a primera vista, no para la similitud de píxeles.
• Usar jerarquía: titular, tarjetas de conclusión, tarjetas de elemento, diferencias clave, tabla de detalles.
• Hacer que los números y límites sean visualmente localizables.
• Usar color semánticamente:
  • Verde para ventaja relativa.
  • Naranja o color de marca para diferencias clave.
  • Rojo para límites, exclusiones o riesgos.
• Usar menos palabras por celda; si una celda necesita muchas palabras, mover la explicación a una tarjeta de diferencia clave.
• Evitar que un solo artefacto sea una tabla densa enorme.
• Para trabajo de captura de pantalla, aumentar el ancho del lienzo HTML y los tamaños de fuente antes de exportar en lugar de depender de la ampliación de imagen.

Reglas de copia

Ejemplos de reescritura:

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

• Claro: "Los gastos médicos dentro del seguro y la terapia de protones/iones pesados tienen renovación garantizada por 10 años; los gastos fuera del seguro, medicamentos externos contra el cáncer y necesidades especiales por enfermedades graves no tienen renovación garantizada."

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

• Claro: "Período de espera de 30 días; las lesiones accidentales no tienen período de espera."

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

• Claro: "Deducible general para gastos médicos dentro del seguro: 5000 yuanes; deducible para gastos fuera del seguro: 10,000 yuanes."

Validación requerida

Antes de entregar:

• Confirmar que no se hayan omitido hechos importantes de la fuente.
• Confirmar que se haya eliminado el texto de la marca/plataforma de origen cuando se solicitó.
• Verificar que las líneas largas y las líneas chinas densas no se superpongan.
• Verificar que el HTML funcione en el ancho de captura de pantalla previsto.
• Verificar las dimensiones finales del PNG y que el archivo exista.
• Si se produce una captura de pantalla, incluir la ruta de la captura y renderizarla en línea cuando sea posible.

Para una lista de verificación compacta, consultar references/visual-html-checklist.md.