Tutoriales
Claude Opus 5.5: diagnostica correos de producto que fallan en modo oscuro
Usa Claude Opus 5.5 para comparar el mismo correo en bandejas claras y oscuras, localizar el recurso o estilo que falla y proponer una reparación pequeña.
Usa Claude Opus 5.5 para comparar el mismo correo en bandejas claras y oscuras, localizar el recurso o estilo que falla y proponer una reparación pequeña. Aporta HTML, archivos del logotipo y capturas reales del correo recibido. El navegador ayuda a revisar la composición, pero no certifica el comportamiento del cliente de correo. Primero haz legibles producto, oferta y botón; después ajusta la decoración.
Clasifica el fallo antes de editar la plantilla
Los problemas del modo oscuro pueden proceder de capas distintas. Conserva el correo original para comparar cada cambio.
| Qué desaparece | Dónde mirar primero | Primera opción |
|---|---|---|
| Letras oscuras del logotipo | Píxeles transparentes de la imagen | Tratamiento aprobado legible en ambos fondos |
| Texto del botón | Colores recibidos de texto y fondo | Reparar esa combinación |
| Borde del producto | Imagen y fondo contiguo | Probar una imagen con fondo sin recolorear el producto |
| Todo el mensaje al bloquear imágenes | Información incluida solo en imágenes | Mantener oferta y destino comprensibles en texto real |
La guía de Litmus documenta diferentes transformaciones y tratamientos de logotipos. Un ajuste CSS exitoso no garantiza el mismo resultado en todas las bandejas. La entrega útil es un parche y una matriz con los clientes identificados.
Prepara una comparación pequeña y repetible
Para un lanzamiento hipotético de una botella, prepara cuatro capturas: el mismo mensaje en dos clientes importantes, en modo claro y oscuro. Registra cliente, sistema operativo, versión si la conoces, revisión del mensaje y estado de carga de imágenes. Compara el correo enviado mediante tu plataforma real, ya que esta puede transformar el marcado.
Si la botella sigue visible pero desaparece el nombre oscuro de la marca, pide dos alternativas aprobadas: un borde claro sutil o un fondo propio para el logotipo. Compáralas al tamaño real. Una imagen de 320 píxeles mostrada a 160 reduce un borde de 2 píxeles a aproximadamente 1 píxel CSS. Evalúa a 160, no ampliando el archivo. Son dimensiones ilustrativas, no una especificación universal.
No cambies la foto de producto durante esta prueba. Modificar logotipo, foto y botón a la vez dificulta localizar un segundo fallo. Guarda A y B por separado y usa el mismo contenido del mensaje.
Una instrucción que pide pruebas, no un truco universal
Compara [revisión del correo], [HTML], [archivos del logotipo] y estas capturas recibidas: [cliente, versión y modo de cada una].
No cambies los colores del producto, las proporciones aprobadas del logotipo, el texto de la oferta ni la URL de destino.
Identifica los elementos ilegibles de cada captura y distingue problemas de píxeles de imagen de problemas de color HTML/CSS. Describe evidencia visible; no supongas comportamientos del cliente sin respaldo.
Propón la reparación mínima de cada defecto. Para el logotipo, compara un borde aprobado por la marca con un fondo propio. No redibujes la marca.
Entrega cambios, parche HTML cuando corresponda, variantes de recursos y matriz de prueba para ambos modos en los clientes indicados. La oferta y el botón deben seguir siendo comprensibles con imágenes bloqueadas.
Si puedes renderizar o enviar una prueba con herramientas autorizadas, indica exactamente qué comprobaste. Si no, marca el resultado como no probado e indica qué capturas recibidas comparar después. No afirmes compatibilidad basándote en el navegador.Dedica la siguiente respuesta a una fila fallida: «B supera la prueba del logotipo, pero el botón desaparece en la captura 4; cambia solo ese botón». Así la revisión permanece ligada a un defecto visible y no reinicia todo el diseño.
¿Qué significa aprobar?
El lector debe reconocer la marca, identificar el producto y encontrar la acción en cada configuración probada. Abre el botón para comprobar el destino y revisa aparte las imágenes bloqueadas. Registra los clientes no probados en vez de marcarlos como aprobados. Un logotipo correcto sobre una mesa de trabajo negra aún puede fallar tras la transformación de la plataforma.
Una pregunta de mayo de 2026 plantea conservar un logotipo rojo y azul. Es una restricción real de diseño, no evidencia de que la solución se probó en tu campaña. Los ejemplos de aquí son hipotéticos, no una evaluación de Opus.
Preguntas antes del siguiente envío
¿Pongo todo el correo en una sola imagen?
Eso oculta la oferta cuando se bloquean las imágenes y dificulta cambiar el texto. Una imagen promocional completa puede servir, pero conserva la información esencial también fuera de ella.
¿Opus puede editar directamente el archivo del logotipo?
Depende de las herramientas de tu entorno. Pide el archivo modificado e inspecciónalo; una recomendación verbal no es un recurso editado.
¿Dónde encaja Panelly?
Usa Panelly Studio para la imagen promocional y las revisiones visuales por chat. HTML, envío y pruebas de bandeja son pasos separados; no se afirma una integración con Opus. Para descripciones, consulta la guía de texto alternativo.
