Text to Elegant Image

¿Qué hace Text to Elegant Image?

• Versión: 1.2.1
• Licencia: MIT
• Autor: Evan Song · github.com/Songhonglei
• Repositorio: https://github.com/Songhonglei/text-to-elegant-image

Convierte contenido Markdown o texto plano en imágenes largas de alta definición con un diseño elegante. Se genera un archivo HTML y se captura una captura de pantalla usando el navegador headless Puppeteer.

Estructura de archivos de recursos

resources/
├── styles/               # 18 estilos, un archivo por estilo (incluye CSS + ejemplo HTML + mapeo de variables de componentes + decoración)
│   ├── 01_cyberpunk.md … 18_vivid.md
│   └── _BASE.md          # Esqueleto HTML genérico + normas de maquetación + referencia de librerías CSS de código abierto
└── components.css        # Librería de componentes visuales genéricos (tarjetas KPI/barras de progreso/barras de comparación/donut/flujo/líneas de tiempo, etc.)

Disciplina de lectura: leer solo los archivos necesarios. Una vez determinado el estilo, leer los dos archivos styles/NN_key.md + styles/_BASE.md. No leer otros archivos de estilo. Solo leer components.css cuando el contenido incluya datos, procesos o comparaciones.

Selección de estilo

Hay 18 estilos en total:

#	Archivo	Estilo	Palabras clave visuales	Ideal para
1	01_cyberpunk.md	Ciberpunk (por defecto)	Oscuro/neón/rejilla SVG de panal	Análisis de IA, informes tecnológicos, pósteres llamativos
2	02_minimal.md	Minimalista elegante	Fondo blanco/serifa/espacio en blanco/papel de arroz con ruido	Ensayos literarios, diarios, conocimiento humanístico
3	03_apple.md	Estilo Apple	Gris claro/vidrio esmerilado/ventanas de colores	Herramientas de productividad, resúmenes, metodologías
4	04_cowork.md	Cowork tecnológico ligero	Blanco y gris Apple/azul tecnológico/Hero de vidrio esmerilado	Compartir internamente, introducción de herramientas de IA, manuales de producto
5	05_newspaper.md	Periódico/Revista	Beige/textura de grano de plomo/impresión blanco y negro	Eventos históricos, líneas de tiempo, narrativa profunda
6	06_bloomberg.md	Terminal Bloomberg	Negro puro con textura CRT/texto naranja brillante	Informes de datos, comparación de indicadores, fintech
7	07_ink.md	Pergamino de tinta	Papel de arroz con efecto de acuarela/rojo bermellón/línea de pincelada horizontal	Historia china, cultura y arte, estética oriental
8	08_steampunk.md	Steampunk	Marrón oscuro/engranaje de cobre/remache de panal/manómetro	Historia industrial, saltos tecnológicos, estética mecánica
9	09_xhs.md	Estilo Xiaohongshu	Fondo blanco/rojo oficial/tarjetas de esquinas redondeadas	Notas de conocimiento, guías de vida, compartir consejos útiles
10	10_morandi.md	Gris avanzado Morandi	Fondo beige cálido/gris verdoso/tira de color/espacio en blanco contenido	Metodología de marca, resúmenes, ensayos humanísticos
11	11_glass.md	Vidrio esmerilado	Fondo degradado de color/bolas de luz/tarjetas esmeriladas	Sitio web SaaS, páginas de actividades, presentación de funciones
12	12_palace.md	Palacio Imperial	Fondo de madera marrón oscuro/rojo bermellón/dorado/sello de patrón	Historia china, festivales de estilo nacional, exposiciones culturales
13	13_fresh.md	Verde natural fresco	Fondo menta claro/verde bosque/elementos de hoja	Salud y medio ambiente, estilo de vida, guías educativas
14	14_earthy.md	Madera terrosa	Textura de lino/terracota naranja/tarjetas cosidas a mano	Café artesanal, estética de vida, historia de marca
15	15_dreamy.md	Púrpura elegante y soñador	Fondo lavanda/degradado púrpura/estrellas brillantes	Moda y belleza, emociones, carteles de eventos
16	16_macaron.md	Macaron pastel	Fondo rosa crema/lunares/números con textura de azúcar	Postres y maternidad, compartir vida, felicitaciones festivas
17	17_carbon.md	Oscuro minimalista	Fondo gris carbón/azul verdoso/números de línea de terminal	Documentación técnica, contenido para desarrolladores, informes de datos
18	18_vivid.md	Degradado vibrante	Degradado púrpura, rosa y naranja/bloques de color fluidos/tarjetas con borde degradado	Promociones de eventos, marcas jóvenes, música y entretenimiento

Dos modos del estilo Xiaohongshu (estilo 9)

El estilo 9 tiene dos submódulos, que el usuario debe especificar; si no se especifica, se usa el modo A por defecto:

Modo	Palabra clave	Carácter
A — Formal simple	"simple"/"formal"/"limpio"/"conocimiento"	Borde fino, esquinas redondeadas pequeñas, números subrayados, mucha sensación de espacio
B — Rico y animado	"animado"/"rico"/"lindo"/"vida"/"divertido"	Rosa claro, esquinas redondeadas grandes, números de círculo sólido, línea decorativa ondulada, pie de página con texto de guía

Después de generar, informar al usuario del modo actual y sugerir que puede cambiar:

"Generado con la versión simple. Si prefieres un estilo animado, di 'haz una versión animada'."

Guía de selección de estilo

Si el usuario no especifica un estilo, recomendar automáticamente según el tipo de contenido e informar al usuario de las opciones disponibles:

El contenido se inclina hacia → Estilo recomendado
──────────────────────────────────────
Tecnología/IA/análisis de datos → Ciberpunk o Terminal Bloomberg
Historia/línea de tiempo/narrativa → Periódico/Revista o Pergamino de tinta (historia china)
Industrial/mecánico/salto tecnológico → Steampunk
Productividad/metodología/resumen → Estilo Apple o Cowork tecnológico ligero
Literatura/diario/humanidades → Minimalista elegante o Pergamino de tinta
Compartir interno en empresa → Cowork tecnológico ligero
Notas de conocimiento/guías de vida/consejos → Estilo Xiaohongshu
Metodología de marca/resumen/sentido premium → Gris avanzado Morandi
Sitio web SaaS/página de producto/página de actividad → Vidrio esmerilado o Degradado vibrante
Historia china/estilo nacional/museo → Palacio Imperial o Pergamino de tinta
Salud/medio ambiente/estilo de vida → Verde natural fresco
Artesanal/café/estética de vida → Madera terrosa
Moda/belleza/emociones/romántico → Púrpura elegante y soñador
Postres/maternidad/lindo/"种草" → Macaron pastel
Documentación técnica/desarrollador/protección ocular → Oscuro minimalista
Evento/promoción/moderno/joven → Degradado vibrante

Ejemplo de diálogo de recomendación:

"Según el contenido, recomiendo 'Estilo Xiaohongshu' (fuerte sensación de notas, ideal para difusión) o 'Estilo Apple' (más sensación de herramienta). Hay 18 estilos para elegir, o puedes decir directamente cuál quieres (por ejemplo, 'Estilo Palacio Imperial', 'Morandi', 'Vidrio esmerilado')."

Coincidencia de palabras clave cuando el usuario describe preferencias de estilo:

• "Tecnológico"/"llamativo"/"oscuro"/"neón" → Ciberpunk
• "Simple"/"blanco"/"limpio"/"artístico" → Minimalista elegante
• "Estilo Apple"/"moderno"/"sensación de producto" → Estilo Apple
• "Tecnología ligera"/"interno"/"azul"/"Apple azul"/"azul tecnológico" → Cowork tecnológico ligero
• "Periódico"/"revista"/"histórico"/"impresión vintage" → Periódico/Revista
• "Datos"/"financiero"/"terminal"/"Bloomberg" → Terminal Bloomberg
• "Tinta"/"chino"/"oriental"/"pergamino"/"estilo antiguo" → Pergamino de tinta
• "Steam"/"punk"/"mecánico"/"cobre"/"engranaje"/"industrial vintage" → Steampunk
• "Xiaohongshu"/"notas"/"种草"/"guía"/"compartir"/"rojo" → Estilo Xiaohongshu (rojo oficial #FF2442)
• "Morandi"/"gris avanzado"/"baja saturación"/"tranquilo"/"sentido premium" → Gris avanzado Morandi
• "Vidrio"/"vidrio esmerilado"/"esmerilado"/"transparente"/"translúcido"/"SaaS" → Vidrio esmerilado
• "Palacio Imperial"/"corte"/"muro rojo"/"dorado"/"bermellón"/"estilo nacional" → Palacio Imperial
• "Fresco"/"verde"/"natural"/"menta"/"ecológico"/"bosque" → Verde natural fresco
• "Tierra"/"madera"/"terracota"/"lino"/"hecho a mano"/"cálido y rústico" → Madera terrosa
• "Púrpura"/"soñador"/"lavanda"/"romántico"/"púrpura elegante" → Púrpura elegante y soñador
• "Macaron"/"rosa"/"pastel"/"dulce"/"lindo"/"femenino" → Macaron pastel
• "Oscuro"/"negro minimalista"/"protección ocular"/"sensación técnica"/"desarrollador" → Oscuro minimalista
• "Degradado"/"vibrante"/"moderno"/"joven"/"colorido"/"dinámico" → Degradado vibrante

Modos de diseño (imagen larga / póster)

Por defecto se genera una imagen larga (560px de ancho, varios bloques verticales). Cuando el usuario dice "póster"/"póster de frase célebre"/"portada"/"imagen principal", se cambia el diseño:

Diseño	Palabra clave	Especificación	Puntos clave de maquetación
Imagen larga (por defecto)	"imagen larga"/"imagen grande"/sin especificar	Ancho 560px, altura automática	Área de título + múltiples bloques de contenido, carga completa del contenido
Póster de frase célebre	"póster"/"frase célebre"/"imagen para compartir"	Ancho 600px, alto 800px fijo (3:4)	Una frase central ampliada y centrada + mucho espacio en blanco + fuente pequeña con fuente, contenido limitado a 30 caracteres
Tarjeta de portada	"portada"/"imagen principal"	Ancho 600px, alto 800px fijo (3:4)	Título grande + subtítulo + 2-3 frases cortas de valor, ritmo de portada de Xiaohongshu

Modo póster/portada: elegir cualquiera de los 18 estilos para tomar su combinación de colores y carácter. .container cambiar a width: 600px; height: 800px; display: flex; flex-direction: column; justify-content: center; altura fija con maquetación centrada; el comando de captura debe pasar --fixed-height 800 para saltar la altura automática, ancho 600, es decir:

node scripts/export_image.js <html> <output.png> 600 --fixed-height 800

Modo imagen larga (por defecto) no pasa --fixed-height, el script mide automáticamente la altura real de .container y recorta el exceso de espacio en blanco inferior. Margen de marco: El modo imagen larga agrega por defecto un marco uniforme de 32px en los cuatro lados del lienzo (izquierda y derecha generadas por lienzo ensanchado + margin:auto, arriba y abajo sobrescriben el padding del body), los cuatro lados son equidistantes, sin que el contenido toque los bordes — no es necesario pasar parámetros manualmente. Si se necesita, usar --frame <px> para personalizar el margen (p. ej., --frame 48), o --frame 0 para desactivar el marco y volver al contenido pegado al borde. En el modo de diseño fijo (--fixed-height), el contenedor ocupa todo el lienzo con su propio espaciado interno, e ignora automáticamente --frame. Fondo de tarjeta: Los 18 estilos de .container vienen por defecto con una tarjeta visual (color de fondo + borde + esquinas redondeadas/sombra, cada estilo toma su propia gama cromática y carácter, como el borde neón del ciberpunk, el borde de papel de la tinta, el bloque de color sólido del Morandi), combinado con el margen del marco para crear un efecto de "tarjeta flotando sobre el lienzo" — no es necesario pasar parámetros manualmente, está activado por defecto. Para la versión anterior de diseño plano (contenido directamente integrado en el fondo, sin bordes de tarjeta), pasar --flat para desactivar: node scripts/export_image.js <html> <output.png> 560 --flat. ⚠️ En el estilo Vidrio esmerilado (11_glass), el fondo de la tarjeta es la textura de vidrio esmerilado en sí misma; --flat hará que desaparezca su efecto visual central, por lo que no se recomienda usar este estilo. Para la tarjeta de portada, se sugiere agregar bolas decorativas de luz suave en la esquina superior derecha/inferior derecha (radial-gradient + posicionamiento absoluto) para equilibrar el espacio en blanco del texto alineado a la izquierda, evitando un gran vacío en el lado derecho.

Flujo de ejecución

Paso 1: Analizar la estructura del contenido

Leer el contenido del usuario y extraer:

• Título principal, subtítulo
• Frase célebre central (para mostrar ampliada)
• Bloques estructurados (comparación, lista, línea de tiempo, etc.)

Escaneo de oportunidades de visualización (importante): Revisar todo el contenido en busca de números clave, porcentajes, rankings, tendencias, procesos, comparaciones, líneas de tiempo — estos deben convertirse en componentes visuales (tarjetas KPI, barras de progreso, barras de comparación, donut, pasos de proceso, líneas de tiempo, ver los comentarios en resources/components.css), en lugar de mostrarse como texto plano. Si hay 2-3 números clave, ya se deben usar tarjetas KPI; si hay rankings/comparaciones, se deben usar barras de comparación. La combinación de imágenes y texto es clave para la calidad de la imagen larga.

Paso 2: Leer los recursos de estilo y generar HTML

1. Una vez determinado el estilo, leer resources/styles/<NN_key>.md (que contiene CSS del estilo, ejemplo de estructura HTML, mapeo de variables de componentes, carga de fuentes, decoración destacada) y resources/styles/_BASE.md (esqueleto genérico + normas de maquetación)
2. Si en el Paso 1 se escanearon oportunidades de visualización, leer resources/components.css, copiar los fragmentos CSS de los componentes necesarios dentro de <style>, y copiar también el bloque :root del «mapeo de variables de componentes» del archivo de estilo (los componentes utilizan las variables --t2e-* para los colores)
3. Si el archivo de estilo contiene una sección «Carga de fuentes», agregar el <link> de la fuente en <head>
4. Si el archivo de estilo contiene una sección «Decoración destacada», usar preferentemente estos elementos decorativos para aumentar la personalidad
5. Inyectar el contenido en el esqueleto, generar el HTML completo, guardarlo en /tmp/elegant_image_<timestamp>.html usando la herramienta write (el nombre de la herramienta es write, no write_to_file)

Regla de manejo del pie de página (importante):

• El usuario no especifica información del autor: en el elemento .footer del HTML, escribir el valor por defecto: <nombre del skill> @ <nombre del modelo actual>
  • Ejemplo: text-to-elegant-image @ claude-4.6-sonnet
• El usuario especifica información del autor (p. ej., "autor escribe Juan"): escribir el texto especificado por el usuario
• El usuario dice explícitamente que no quiere pie de página: no generar el elemento .footer en el HTML, agregar --no-footer al comando de captura

No escribir en el pie de página "Generado por " ni ningún identificador de IA.

Paso 3: Verificación de dependencias e inicialización (antes de cada uso)

Ejecutar el script de configuración para verificar el entorno:

bash <directorio_del_skill>/scripts/setup.sh

• Verificar tres dependencias: Node.js (>= v18), Chrome/Chromium, puppeteer-core
• Si todo está listo, pasa directamente y muestra ✔ Todas las dependencias están listas
• Node.js / Chrome faltante: el script muestra un error y sale (exit 1), indicando que se instale la dependencia faltante (Node.js >= v18 / Chrome o Chromium)
• puppeteer-core faltante: el script indica "Instalando..." y ejecuta npm install (la salida de la instalación es visible, solo instala puppeteer-core como dependencia de renderizado)

Cuando ya está listo, el script regresa muy rápido, sin costo de rendimiento. Se recomienda ejecutarlo antes de cada llamada.

Paso 4: Verificación de emojis (obligatorio antes de la captura)

Está prohibido usar emojis al generar HTML — en entornos headless falta la fuente de emojis en color, lo que hace que se rendericen como bloques negros sin sentido. Alternativas:

Uso original del emoji	Escritura alternativa
Iconos de sección (gráfico/cristal/mapa)	Título de texto plano, diferenciado con una barra de color border-left
Marcas de estado (check/cruz/advertencia)	Usar badges de color: <span class="badge-green">Completamente automático</span>
Símbolos decorativos	Eliminar, o usar elementos decorativos del estilo (hojas/estrellas/sellos, etc.)
Progreso/flechas	Usar pseudoelemento CSS ::before o texto plano ->, ·

Después de la generación, ejecutar obligatoriamente la verificación:

python3 <directorio_del_skill>/scripts/check_emoji.py <ruta_del_archivo_HTML>

Si falla (exit 1) → reemplazar según el número de línea de la salida → volver a ejecutar hasta que pase, antes de pasar a la captura.

Paso 5: Ejecutar la exportación de la captura

node <directorio_del_skill>/scripts/export_image.js \
  <ruta_absoluta_del_archivo_HTML> \
  <directorio_de_salida>/<nombre_del_archivo>.png \
  [ancho] [--author "información del autor" | --no-footer]

Configuración del directorio de salida (en el primer uso, guiar al usuario para que lo configure):

El directorio de salida se resuelve según la siguiente prioridad (de mayor a menor):

1. Ruta de salida pasada explícitamente en el comando
2. Variable de entorno T2EI_OUTPUT_DIR
3. Valor por defecto: ./output (directorio output/ en el directorio de trabajo actual)

💡 Guía para el primer uso: Antes de generar la primera imagen larga para el usuario, preguntar una vez "¿En qué directorio quieres que se guarden las imágenes?"

• El usuario no especifica → usar el valor por defecto ./output
• El usuario especifica un directorio fijo → sugerir escribir la variable de entorno para persistencia:

  echo 'export T2EI_OUTPUT_DIR="$HOME/mis-imagenes"' >> ~/.bashrc
  

Después, no preguntar de nuevo.

Explicación de los parámetros del pie de página:

Parámetro	Efecto
No pasar (por defecto)	Usar el pie de página ya escrito en el HTML (ver Paso 2)
--author "texto personalizado"	Reemplazar el pie de página por el texto especificado
--no-footer	Eliminar completamente el pie de página

El script detecta automáticamente la ruta de Chrome/Chromium (Linux/macOS/WSL), espera automáticamente la carga de webfonts (máximo 8s, no bloquea si la CDN no está disponible), mide automáticamente la altura del contenido para un recorte preciso, y crea automáticamente el directorio de salida si no existe. El ancho por defecto es 600px, con salida de alta definición de 2x deviceScaleFactor.

Paso 6: Devolver el resultado y entregar la imagen

Después de una captura exitosa, devolver al usuario la ruta local del PNG:

Imagen generada 🎉
Ruta local: <directorio_de_salida>/<nombre_del_archivo>.png

El usuario puede ver el PNG directamente en el sistema de archivos / editor, o distribuirlo por su cuenta.

📌 Sobre la distribución automática (placeholder, no incluido por ahora) Esta versión de código abierto solo se encarga de la generación de "texto → imagen larga elegante", no incluye ninguna capacidad de envío automático de imágenes a canales de mensajería. Si se necesita enviar automáticamente la imagen generada a WeChat / Telegram / Slack u otros canales, se puede integrar el Bot / API de la plataforma correspondiente después de este paso (las versiones futuras pueden incluir adaptadores opcionales). Por ahora, el usuario debe obtener manualmente el PNG local y distribuirlo.

Cambio de estilo y regeneración (ruta de bajo costo)

Cuando el usuario dice "cámbialo al estilo XX" para una imagen larga ya generada: no reescribir todo el HTML. Leer el archivo del nuevo estilo, reemplazar solo el bloque CSS del estilo en <style> y el mapeo de variables de componente (bloque :root de --t2e-*), y reemplazar en masa los prefijos de clase del estilo anterior en el HTML (p. ej., mo-*) por los del nuevo estilo (p. ej., fr-*) — los componentes del esqueleto de cada estilo son isomórficos (header/title/subtitle/section-title/card/item/num/quote/tag/divider/footer), se reemplazan uno a uno. Luego, volver a ejecutar los Pasos 4-6.

Mecanismo de respaldo

Si la captura falla (por ejemplo, si no está instalado el navegador), el script muestra la ruta del archivo HTML y guía al usuario para que lo abra en un navegador y lo imprima manualmente como PDF/imagen.

Notas clave

• El tercer parámetro de export_image.js puede especificar el ancho (por defecto 600px), con 2x deviceScaleFactor para garantizar salida de alta definición
• No se referencian imágenes externas; los iconos se crean con formas CSS puras o inline SVG data URI para evitar fallos de carga de red; el único recurso externo permitido son las fuentes CDN (fonts.googleapis.com, servicio público; con fallback de fuente del sistema, no bloquea)
• Ruta de salida: <directorio_de_salida>/<nombre_del_archivo>.png (el directorio de salida por defecto es ./output, se puede configurar con la variable de entorno T2EI_OUTPUT_DIR, ver Paso 5)

Lista de scripts

Script	Función
scripts/setup.sh	Verificación de dependencias (Node/Chrome/puppeteer-core), si falta puppeteer-core, lo indica y lo instala (la salida es visible)
scripts/check_emoji.py	Verificación de emojis antes de la captura, si falla, muestra el carácter y el número de línea
scripts/export_image.js	Exportación de captura con Puppeteer: espera de fuentes + recorte preciso de altura + margen de marco en cuatro lados + interruptor de fondo de tarjeta (--flat) + inyección/eliminación de pie de página