flyanx/xiaohongshu-card

Generador de Tarjetas Xiaohongshu (xiaohongshu-card)

Convierte un artículo de divulgación → un conjunto completo de tarjetas gráficas para Xiaohongshu (JPG múltiples), siguiendo un estándar probado en la práctica. Ideal para artículos de WeChat Official Accounts, Sohu, revistas, etc., adaptados al estilo Xiaohongshu.

1. Especificaciones de Salida (Fijas)

Elemento	Estándar
Tamaño de tarjeta	1080 × 1440 (3:4, proporción recomendada por Xiaohongshu)
Formato de exportación	JPG quality 95, nombrado semánticamente (01-portada.jpg, 02-resumen-cinco-pasos.jpg…10-contraportada.jpg)
Entregable	Solo JPG; el HTML es solo un archivo de trabajo interno (se conserva en el directorio del proyecto para facilitar la reedición y reexportación)
Tamaño de fuente para móvil	Cuerpo 29-30px / Título grande 60-92px / Título de paso 40px / Valores de parámetros 46px / Notas de figuras 20px (bajo 1080 de ancho, sigue siendo legible al reducirse en el móvil)

2. Estructura de Páginas (Plantilla Fija + Adaptación al Número de Pasos)

Portada → Resumen → Páginas de PASOS (una por paso, PASO 0N/Total pasos) → Errores comunes → FAQ → Contraportada

• Portada: Composición centrada con solo texto (línea de etiqueta + subtítulo + título grande + subtítulo 2), con espacio en blanco de diseño
• Resumen: Tres cuadros de ventajas + principio en una frase + índice de cinco pasos (número de PASO + nombre + resumen en una frase)
• Páginas de pasos: Indicador rojo superior «PASO 0N / 05» + título grande del paso + bloque de contenido (puntos clave / lista de procesos / tarjeta de parámetros) + imagen original del artículo
• Página de errores comunes: Recordatorios clave en grande (cada línea con ◆)
• Página FAQ: Preguntas frecuentes en tarjetas grandes, aproximadamente 4 (si faltan, se pueden extraer de otros párrafos del artículo, no inventar)
• Contraportada: FIN → Gracias por leer / Gracias por seguir → Logotipo de la marca → ＋ Seguir → «Marca · Más contenido en camino» (el contenido se lee de la configuración de la marca)
• Si el número de pasos ≠ 5, se adapta (el total de pasos sigue el número); si hay muchas imágenes/contenido, se dividen páginas (1-2 bloques de información por página es lo más cómodo)

3. Estrategia de Imágenes (Priorizar Imágenes Originales)

1. Priorizar imágenes originales: Obtener las imágenes del artículo original y verificar la posición de cada imagen en el artículo, asegurando que correspondan una a una con el texto (si no corresponde, mover la página o explicarlo al usuario)
2. Descifrado AES de Sohu: El data-src de las imágenes de artículos de Sohu está cifrado con AES-ECB-PKCS7, con clave www.sohu.com6666. Usar scripts/decrypt-sohu.py para descifrar y obtener la URL real //qX.itc.cn/.... Al descargar, incluir Referer (URL de la página del artículo) + User-Agent de navegador para evitar anti-hotlinking
3. Si no hay imágenes en el original: Solo entonces se permite generar imágenes esquemáticas con IA — fondo blanco, un solo color principal (puede ser de uso general en diferentes estilos), y se debe marcar claramente al usuario «Esta imagen es generada por IA»
4. Imágenes en formato de captura de pantalla horizontal (por ejemplo, 1080×289): Usar contenedor .fig de altura fija + object-fit: contain; apilar múltiples imágenes verticalmente (.fig-col) / en paralelo (.fig-row)

4. Verificación de Calidad (Obligatoria, Antes de la Entrega)

Usar scripts/verify.js (Playwright) para verificación programática. Si no cumple, iterar automáticamente ajustando tamaño de fuente/espaciado/altura de imagen:

• Tasa de llenado de la página de contenido 80-100% (espacio vacío ≤ 20%, la página no debe quedar demasiado vacía)
• Sin desbordamiento (el borde inferior del elemento más profundo ≤ altura de la tarjeta)
• Todas las imágenes cargadas correctamente (naturalWidth > 0)
• La portada/contraportada tienen espacio en blanco de diseño, exentas de la verificación de tasa de llenado

5. Sistema de Estilos (3 Integrados, Por Defecto Manual de Experimentos Racional)

Estilo	Visual	Uso
A Manual de Experimentos Racional (predeterminado)	Fondo blanco, texto negro + énfasis rojo #E63946, cuadrícula suiza, bloques numerados, indicador PASO	Contenido profesional, tutoriales de laboratorio
B Espacio en Blanco Premium	Fondo beige claro + dorado cálido #D4A574, peso de fuente ultraligero, mucho espacio en blanco	Escenas de alta gama y minimalistas
C Divulgación Suave	Fondo beige #f6f2ea + verde natural #7a8a72, tarjetas con bordes redondeados	Cuentas de divulgación amigables

Para agregar un nuevo estilo: añadir una clase de estilo en el CSS de la plantilla (por ejemplo, .X) y registrarla en la configuración STYLES.

6. Configuración de Marca

assets/brand-config.example.json define: nombre de la marca, ruta del logotipo, texto de la contraportada, estilo predeterminado. Por defecto incluye la configuración de IGE Biotech (logotipo: assets/logo-ige.png). Otras marcas pueden copiar ese archivo y modificar los campos.

7. Líneas Rojas (Incumplir = Rehacer)

• Eliminar información redundante o restringida por la plataforma: Fuente del contenido, CTA de me gusta/guardar, indicaciones de «deslizar a la izquierda», etc., no deben aparecer
• No inventar contenido: Toda la información proviene del artículo original; la información complementaria (como FAQ) debe extraerse de otros párrafos del artículo original
• Las imágenes deben corresponder una a una con el texto: Verificar la posición en el artículo original; si no hay imagen en el original, no poner imagen (rellenar con formato de texto) o marcar como generada por IA
• Anti AI slop: No usar decoraciones emoji, ni degradados morados, ni bordes redondeados con borde izquierdo de color, ni dibujar imágenes SVG falsas, ni usar fuentes predeterminadas del sistema como fuentes de presentación

8. Flujo de Trabajo (9 Pasos)

1. Obtener el artículo: WebFetch/curl para obtener el texto completo (título, cuenta de WeChat, fecha, cuerpo, imágenes), guardar el HTML original
2. Extraer lo esencial: Organizar según la estructura de la página — concepto/principio, pasos (con parámetros), notas, FAQ
3. Obtener imágenes: Analizar las imágenes del artículo original (Sohu usa scripts/decrypt-sohu.py), descargar y registrar la posición de cada imagen en el artículo original
4. Determinar la estructura de la página: Portada/Resumen/Página de PASO N/Errores comunes/FAQ/Contraportada, determinar el número de pasos
5. Generar HTML: Copiar assets/card-template.html, rellenar el contenido en el array de datos PAGES del JS (ver comentarios de la plantilla), colocar las imágenes en el directorio imgs/ del proyecto
6. Iterar verificación: Abrir con Playwright → ejecutar scripts/verify.js → ajustar tamaño de fuente/espaciado/altura de imagen según los resultados hasta que 10/10 PASEN
7. Exportar JPG: Modificar el array NAMES en scripts/export-jpg.js → ejecutar la exportación (1080×1440 quality 95)
8. Confirmación del usuario: Mostrar todas las tarjetas → ajustar según comentarios (texto/colores/logotipo/contraportada) → reexportar
9. Entrega: Listar el inventario de JPG + sugerencias de publicación (título/etiquetas de tema de referencia)

9. Instrucciones de Uso de la Plantilla (card-template.html)

• Archivo HTML único + vanilla JS basado en datos: cada elemento del array PAGES es una página, cada elemento del array blocks es un bloque de contenido
• Tipos de bloque: {t, p} bloque de texto / {t, lines:[['a)','texto'],...]} lista de procesos / {params:[[valor,etiqueta],...]} tarjeta de parámetros / {step:{t,d}} explicación del paso / {img} {imgs, col} imagen / {faq} / {notes} / {dir} índice de cinco pasos / {why} cuadro de ventajas / {tip} barra de consejos / {recape} barra de resumen rápido
• Tres tipos de página: type:'cover' (portada), type:'step' (página de paso, step: N), type:'content' (resumen/errores comunes/FAQ), type:'end' (contraportada)

10. Dependencias del Entorno

• Node.js + Playwright (dentro del proyecto: npm i playwright)
• Python3 + pycryptodome (solo para descifrado de Sohu)