Varnan-Tech/opendirectory

Boletín de Correo Electrónico

Redacta y diseña un boletín de correo electrónico HTML completo a partir de un tema o un resumen de contenido. El resultado estará listo para copiar y pegar en Loops, Mailchimp, Beehiiv, Resend o cualquier plataforma de correo estándar.

---

Regla crítica: HTML basado en tablas con estilos en línea únicamente. Sin clases CSS, sin flexbox, sin grid, sin bloques <style>. Cada elemento debe tener style="" directamente. Esto no es opcional: los clientes de correo eliminan todo lo demás.

---

Paso 1: Recopilación de Información

Necesito tres cosas para empezar. Si las tres están presentes en el mensaje, pasa al Paso 2.

Si falta alguna, pregunta exactamente:

"Para empezar, necesito tres cosas:

1. Tema -- ¿De qué trata este boletín?
2. Audiencia -- ¿Quién lo leerá? (cargo, tamaño de la empresa, cómo te conocen)
3. CTA principal -- ¿Qué acción quieres que realicen los lectores?"

Espera a tener las tres antes de continuar.

---

Paso 2: Recopilación Completa

Haz todas las preguntas en un solo mensaje, agrupadas por categoría. El usuario puede omitir cualquier pregunta; se aplicarán valores predeterminados.

"Algunas preguntas antes de redactar: responde lo que sepas, omite el resto:

Contenido

1. Extensión -- breve (300 palabras, impactante) / estándar (500-700) / análisis profundo (800+ palabras)?
2. Formato -- artículo editorial / desglose numerado / historia personal / informe de datos?
3. Contexto del número -- envío único / parte de una serie semanal / resumen mensual?
4. URL de la CTA -- ¿Cuál es el enlace real? (o usaré un marcador de posición)

Marca 5. Nombre de la empresa / marca -- para el encabezado y el pie de página 6. Eslogan -- descripción de una línea (opcional, para el pie de página) 7. Ciudad y país -- para el pie de página (ej. "Madrid, España") 8. Color principal de la marca -- ¿código hexadecimal? (ej. #856FE6) 9. Acento secundario -- mantener el amarillo-verde predeterminado (#D8F90A) / usar el color de la marca / ¿otro?

Diseño 10. Fondo -- oscuro (editorial/SaaS) / claro (limpio/corporativo) / ¿hexadecimal personalizado? 11. Fuente de visualización -- serifa editorial (Instrument Serif) / sans moderna y limpia / ¿solo fuentes del sistema? 12. Estilo del botón -- píldora (muy redondeado) / ligeramente redondeado / ¿esquinas rectas? 13. Estilo visual -- editorial / técnico+datos / cálido+emprendedor / audaz+campaña?

Plataforma y Técnico 14. Plataforma -- Loops / Mailchimp / Beehiiv / Resend / ¿otra? 15. Tono -- educativo / conversacional / audaz+directo / formal / ¿divertido? 16. Personalización -- ninguna / nombre / nombre + empresa? 17. Asunto -- ¿ya tienes uno / quieres 3 opciones? 18. Secciones secundarias -- bloque de patrocinio / llamada de producto / evento / enlaces rápidos / ¿ninguna? 19. Versión en texto plano -- sí (recomendado) / ¿no?"

Valores predeterminados si se omite:

Pregunta	Predeterminado
Extensión	estándar (500-700 palabras)
Formato	artículo editorial
Contexto del número	envío único
URL de la CTA	marcador de posición [CTA_URL]
Nombre de la empresa	marcador de posición [TU_MARCA]
Eslogan	ninguno
Ciudad y país	marcador de posición [CIUDAD, PAÍS]
Color de marca	ninguno (usar #D8F90A para todos los acentos)
Acento secundario	#D8F90A (amarillo-verde predeterminado)
Fondo	oscuro
Fuente de visualización	Instrument Serif (serifa editorial)
Estilo del botón	píldora
Estilo visual	editorial
Plataforma	genérica
Tono	conversacional
Personalización	ninguna
Asunto	generar 3 opciones
Secciones secundarias	ninguna
Texto plano	sí

---

Paso 2.5: Dirección de Diseño (interno -- no se muestra al usuario)

A partir de las respuestas del Paso 2, determina:

• Carácter visual (de la pregunta 13, o inferido del tono + formato si se omitió)
• UN elemento inolvidable -- identifícalo antes del Paso 3
• Ruta de la plantilla (consulta el Paso 5)

Valores predeterminados del carácter si se omite la pregunta 13:

• Tono educativo / formal: Editorial
• Contenido con muchas métricas (estadísticas, puntos de referencia, informes): Técnico/centrado en datos
• Lanzamientos de productos, eventos, campañas: Audaz/campaña

Nunca preguntes al usuario por la dirección de diseño por separado; dedúcela de sus respuestas.

---

Paso 3: Diseño de la Estructura

Lee references/html-email-guide.md para conocer las reglas de diseño antes de elegir las secciones.

Basándote en el tema + la audiencia + la CTA + las secciones secundarias solicitadas, selecciona las secciones de esta biblioteca:

Sección	Incluir cuando
encabezado	Siempre -- marcador de posición del logotipo + número de edición o fecha
hero	Siempre -- gran titular + frase de enganche de 1-2 oraciones
introducción	Tono conversacional o educativo -- nota personal breve
contenido-principal	Artículo o idea principal (con mucho texto)
llamada-estadística	Hay una estadística, cita o dato convincente
seccion-secundaria	Se solicitó una CTA secundaria
cta-producto	El contexto de la marca está presente y encaja un complemento de producto sutil
bloque-patrocinio	Se solicitó una sección de patrocinio
enlaces-rapidos	Se solicitó una sección de enlaces seleccionados
pie-de-pagina	Siempre -- enlace de cancelación de suscripción + nombre de la empresa

Muestra la estructura elegida como una lista numerada con el propósito de cada sección en una línea:

Estructura propuesta:
1. Encabezado -- logotipo + Número 1 / [fecha]
2. Hero -- titular + párrafo de enganche
3. Introducción -- breve encuadre personal
4. Contenido Principal -- desglose de [tema]
5. Llamada Estadística -- punto de datos clave de la historia
6. CTA -- [texto de la cta]
7. Pie de página -- cancelar suscripción + empresa

¿Funciona esta estructura o debería ajustar alguna sección?

Espera la confirmación antes del Paso 4.

---

Paso 4: Borrador de Contenido

Redacta el texto de cada sección en orden. Aún sin HTML, solo prosa limpia.

Reglas por sección:

• Encabezado: Número de edición + fecha. No se necesita texto.
• Titular hero: Máximo 8 palabras, centrado en el resultado, sin empezar con "Yo/Nosotros/Nuestro"
• Frase de enganche hero: 1-2 oraciones, problema o brecha de curiosidad, atrae al lector
• Introducción: 2-3 oraciones, personal o contextual, sin lenguaje corporativo, se permiten contracciones
• Contenido principal: 250-400 palabras, fácil de escanear -- usa frases en negrita para puntos clave, párrafos cortos (1-3 líneas), sin muros de texto, sin sobrecarga de viñetas
• Llamada estadística: Una estadística o cita, máximo 20 palabras, impactante
• CTA de producto: 2-3 oraciones, centrado en el valor, no "Mira nuestro producto" -- diles qué cambia para ellos
• Texto del botón CTA: 3-5 palabras, verbo de acción + beneficio ("Lee el desglose completo", "Reserva mi asiento", "Consigue la guía")
• Pie de página: Marcador de posición del enlace de cancelación de suscripción + nombre de la empresa

Lee references/subject-line-formulas.md y luego escribe 3 opciones de asunto (si el usuario no proporcionó el asunto):

• Opción A: Fórmula de brecha de curiosidad
• Opción B: Fórmula de beneficio directo
• Opción C: Fórmula de número/lista

No uses guiones largos (—). No uses: "poderoso", "sin fisuras", "innovador", "aprovechar", "revolucionario", "desbloquear", "transformar", "elevar", "de vanguardia", "robusto".

---

Paso 5: Generación de HTML

Lee references/design-system.md y references/html-email-guide.md antes de generar el HTML.

Plantilla o personalizado -- decide según las respuestas del Paso 2:

Usa templates/dark-newsletter.html como base cuando TODAS las siguientes condiciones se cumplan:

• fondo = oscuro (o no especificado)
• fuente de visualización = Instrument Serif (o no especificado)
• no se proporcionó un hexadecimal de fondo personalizado

Usa templates/light-newsletter.html como base cuando TODAS las siguientes condiciones se cumplan:

• fondo = claro O tono = formal
• fuente de visualización = Instrument Serif (o no especificado)
• no se proporcionó un hexadecimal de fondo personalizado

Genera HTML personalizado desde cero cuando se cumpla ALGUNA de las siguientes condiciones:

• se proporcionó un hexadecimal de fondo personalizado (ni oscuro, ni blanco)
• fuente de visualización = sans moderna o solo fuentes del sistema
• la combinación de respuestas produce un diseño que ninguna plantilla cubre

Para la generación personalizada: usa references/design-system.md Guía de Generación Personalizada como la especificación completa del token. Aplica las elecciones de fondo/fuente/botón/acento del usuario en todo momento.

Luego (para la ruta de la plantilla):

1. Selecciona solo las secciones necesarias de la plantilla (según la estructura del Paso 3)
2. Rellena todos los valores [MARCADOR] con el contenido del Paso 4
3. Aplica la sustitución del color de la marca (ver más abajo)
4. Verifica que todos los marcadores de posición [URL_CANCELAR_SUSCRIPCION] sigan presentes (el ajuste de la plataforma se realiza en el Paso 6)

Reglas de sustitución del color de la marca:

Si se proporciona color_marca:

• Reemplaza el bgcolor de la franja de la marca (#D8F90A en la fila height:2px) con color_marca
• Reemplaza el color del borde izquierdo de la llamada estadística con color_marca
• Reemplaza el color de la etiqueta de categoría con color_marca
• Si la luminancia de color_marca es alta (amarillos, verdes, naranjas -- la mayoría de los neones): reemplaza también #D8F90A de la insignia de paso con color_marca
• Si la luminancia de color_marca es baja (azul marino oscuro, verde bosque, carbón): mantén las insignias de paso y el botón CTA como #D8F90A, usa color_marca solo para la franja y el borde de la estadística

Si NO se proporciona color_marca: mantén todos los valores #D8F90A como están.

Reglas de sustitución de contenido (de las respuestas del Paso 2):

• Si se proporciona nombre_empresa: reemplaza todos los marcadores de posición [TU_MARCA] y [NOMBRE_EMPRESA]
• Si se proporciona ciudad_pais: reemplaza el marcador de posición [CIUDAD, PAÍS]
• Si se proporciona eslogan: agrégalo como línea de subtítulo en el pie de página después del nombre de la empresa
• Si se proporciona url_cta: reemplaza todos los marcadores de posición [URL_CTA] con la URL real
• Si personalizacion = nombre: añade la variable de nombre específica de la plataforma al saludo hero -- ej. Hola %%first_name%%, en Beehiiv, Hola {{first_name}}, en Loops, Hola *|FNAME|*, en Mailchimp
• Si personalizacion = nombre + empresa: añade ambas variables donde sea contextualmente apropiado

Comprobación de tensión visual del color de la marca (en correo oscuro):

¿El color de la marca resalta visualmente sobre #111111? Pruébalo mentalmente: ¿sería visible como una franja de 2px?

• Colores de alta saturación (púrpuras, azules, turquesas, rosas, amarillos, naranjas, verdes): SÍ -- úsalos para la franja + borde de estadística + etiqueta de categoría
• Colores de baja saturación / casi neutros (grises cálidos, beige, blanco roto): solo franja; la etiqueta de categoría vuelve a #555555
• Colores casi negros (azul marino muy oscuro, verde bosque, carbón por debajo de ~#2A2A2A): omite color_marca para TODOS los usos de acento, recurre a #D8F90A para cada elemento

Regla de disciplina de acento: color_marca aparece en un MÁXIMO de 3 lugares: franja de la marca, borde de estadística, etiqueta de categoría. Nunca en el cuerpo del texto, titulares, fondos de botones o fondos de sección. La sobrecarga de marca mata la sensación premium.

Color del texto del botón CTA:

• Sobre fondo de botón #D8F90A: usa siempre texto #0A0A0A (es un color claro)
• Sobre fondo de botón #111111 (dentro de la tarjeta de llamada amarilla): usa siempre texto #F2F2F2
• Sobre botón con color_marca: usa #0A0A0A si la marca es clara, #FFFFFF si la marca es oscura

Requerido en cada <td> con color de fondo: Tanto el atributo HTML bgcolor= como el estilo en línea background-color:. Ejemplo:

<td bgcolor="#D8F90A" style="background-color:#D8F90A;">

El atributo maneja Outlook. El estilo maneja todo lo demás. Nunca uses solo uno.

Excelencia en el diseño (principios de diseño frontend, adaptados al correo electrónico):

Las restricciones de las tablas en el correo no limitan la ambición del diseño. Avanza dentro de ellas:

• Tipografía al extremo: titulares de 4-5 palabras = 60px, tracking -0.04em. Titulares de 6-7 palabras = 56px, tracking -0.03em. 8 palabras = 48px. Nunca reduzcas el tamaño por seguridad: el titular es un cartel, no una etiqueta. La cursiva de Instrument Serif en las citas estadísticas añade un peso literario que ningún otro elemento puede igualar.

• Contraste de densidad como señal de oficio: Hero = máximo espacio abierto (64px arriba). Párrafos del cuerpo = apretados y densos. Tarjeta de llamada CTA = máximo espacio abierto otra vez (64px). Abierto → apretado → abierto es el ritmo que se lee como diseño intencional, no como resultado de una plantilla.

• Profundidad de fondo mediante alternancia de secciones (todo seguro para correo):

  • Encabezado: #0A0A0A
  • Hero: #111111
  • Llamada estadística exterior: #111111, tarjeta elevada interior: #1A1A1A
  • Párrafos del cuerpo: #161616 (la elevación sutil crea profundidad sin color)
  • Tarjetas de paso: #111111 (contraste con el cuerpo)
  • Tarjeta de llamada CTA: #D8F90A (el ÚNICO elemento brillante -- nunca lo diluyas)
  • Pie de página: #080808

• Escasez de acento = lujo: Una tarjeta de llamada amarilla en un mar oscuro se lee como premium. El amarillo apareciendo en seis lugares se lee como barato. El poder de la tarjeta CTA proviene enteramente de ser el único elemento brillante en un correo oscuro.

• Prueba inolvidable: Antes de guardar, indica en una oración lo que un lector le describiría a un colega 3 horas después. Si es vago ("era oscuro y limpio") -- el ancla visual no es lo suficientemente fuerte. Hazlo específico ("la tarjeta amarilla con el gran titular serif").

• Llamada estadística como cita destacada editorial: Borde izquierdo de 4px (no 3px). 26px cursiva Instrument Serif en el texto de la cita. Relleno interior de 32px. Esto es lo más cerca que un correo electrónico llega a una cita destacada de revista. Trátala como tal.

---

Paso 6: Ajuste de Plataforma

Lee references/platform-compat.md y aplica los ajustes específicos de la plataforma:

Plataforma	Acción
Loops	Reemplaza [URL_CANCELAR_SUSCRIPCION] con {{unsubscribe_url}}. Reemplaza las referencias [NOMBRE] con {{first_name}}
Mailchimp	Reemplaza [URL_CANCELAR_SUSCRIPCION] con `*
Beehiiv	Reemplaza [URL_CANCELAR_SUSCRIPCION] con %%unsubscribe_url%%. Reemplaza [NOMBRE] con %%first_name%%
Resend	Reemplaza [URL_CANCELAR_SUSCRIPCION] con {unsubscribeUrl}. Nota: Salida React Email .tsx disponible bajo petición
Genérica/Otra	Mantén [URL_CANCELAR_SUSCRIPCION] como marcador de posición con el comentario: <!-- Reemplaza con tu enlace de cancelación de suscripción -->

---

Paso 7: Autoverificación

Revisa el HTML generado antes de la salida. Corrige todos los problemas encontrados -- no los omitas.

Verificaciones de renderizado:

• Todos los estilos en línea -- sin bloques <style>, sin atributos class= en ninguna parte
• Todas las <table> tienen cellpadding="0" cellspacing="0" border="0"
• Las imágenes (si las hay) tienen alt="", border="0", display:block en el estilo
• Ancho máximo de 600px aplicado en la tabla contenedora
• El botón CTA usa la estructura <table> + <td> con el atributo bgcolor=, no solo <a> con display:block
• Sin flexbox, grid, position:, float:, variables CSS (--var), min-height, max-height en ningún estilo en línea
• border-radius solo en <td> -- no en <table> o <a> (Outlook renderiza el radio de <td>)
• El pie de página tiene un enlace de cancelación de suscripción con la variable correcta para la plataforma

Verificaciones de contenido:

• El titular hero tiene 8 palabras o menos
• El texto del botón CTA tiene 3-5 palabras
• Sin guiones largos (—) (-- está bien, — no)
• Sin palabras prohibidas: "poderoso", "sin fisuras", "innovador", "aprovechar", "revolucionario", "desbloquear", "transformar", "elevar", "de vanguardia", "robusto"
• Sin viñetas en el contenido principal
• Sin enlaces rotos o marcadores de posición sin reemplazar (excepto [URL_CANCELAR_SUSCRIPCION] si es genérico)
• El texto de la llamada estadística tiene 20 palabras o menos
• La introducción tiene 2-3 oraciones

---

Paso 8: Salida Final

Proporciona al usuario:

1. Asunto (si se solicitaron 3 opciones): enumera las 3 opciones con viñetas
2. Vista previa del texto: las primeras líneas del boletín como aparecerían en la bandeja de entrada (opcional)
3. Bloque de código HTML completo, listo para copiar
4. Texto plano (si se solicitó): versión en texto plano con enlaces entre paréntesis
5. Notas de implementación: una línea sobre qué reemplazar antes de enviar (ej. "Reemplaza [URL_CTA] con tu enlace antes de enviar")

Formato de salida:

## Opciones de Asunto

- Opción A: [asunto]
- Opción B: [asunto]
- Opción C: [asunto]

---

## HTML del Boletín

```html
[código HTML completo]

---

Versión en Texto Plano

[líneas de texto plano]

---

Notas de Implementación

• [nota uno]
• [nota dos]