Generador de Informes Visuales de Categoría
Basado en la metodología de flujo de trabajo visual Atlas, genera informes HTML estandarizados de 12 capítulos para cualquier categoría de comercio electrónico transfronterizo.
Capacidades Principales
- Metodología completa: 9 módulos de referencia que cubren desde el análisis competitivo hasta la toma de decisiones visuales.
- Plantilla lista para usar: Plantilla HTML integrada + estilos CSS + herramientas de gráficos Chart.js, listas para copiar y usar.
- Estructura estándar de 12 capítulos: Análisis de mercado → Palabras clave → Imagen principal → Imágenes secundarias → Insights de usuarios → FABE → A+ → Video → Tienda oficial → Diagnóstico de datos → Plan de acción.
- 6 tipos de gráficos: Gráficos de barras, barras horizontales, radar, anillo/tarta, visualización basada en datos.
Ubicación de la Plantilla
Los archivos de plantilla se encuentran en assets/report-template/:
assets/report-template/
├── index.html # Plantilla HTML completa de 12 capítulos (incluye JS de gráficos en línea, todo marcado con {{placeholder}})
└── assets/
└── report-base.css # Estilos base de tema naranja (tokens de diseño + conjunto completo de componentes)
Chart.js se carga mediante CDN. Las funciones de gráficos están incorporadas en el HTML, listas para usar.
Uso: Copie todo el directorio assets/report-template/ a su directorio de trabajo, luego reemplace los {{placeholder}} en index.html y los datos de gráficos al final.
Proceso de Generación del Informe
Paso 1: Recopilación de Información
Antes de generar el informe, recopile la siguiente información:
- Información de categoría: Nombre de la categoría (chino e inglés), plataforma objetivo (Amazon, sitio propio, etc.).
- Datos de mercado: Distribución de rangos de precios, lista de marcas principales (al menos 5), puntos de venta y estilo visual de cada marca.
- Datos de palabras clave: Palabras clave principales, de cola larga y de escenario con volúmenes de búsqueda y competencia.
- Datos de reseñas: Palabras de alta frecuencia positivas/negativas, lista de principales puntos débiles.
- Información del producto: Características, ventajas y posicionamiento del público objetivo.
Si el usuario no proporciona datos completos, genere análisis de marcador de posición basados en el conocimiento general de la categoría y las condiciones del mercado, y marque con "Necesita validación con datos reales".
Paso 2: Generar el Informe
- Copie
assets/report-template/al directorio de trabajo. - Reemplace los
{{placeholder}}enindex.htmlpor el contenido de cada capítulo. - Reemplace los datos de gráficos en la
<script>al final. - Asegúrese de que los 12 capítulos estén completos.
- Use la herramienta
create_htmlpara implementar la página en línea accesible.
Paso 3: Control de Calidad
Antes de entregar, verifique:
- Los 12 capítulos están completamente rellenados, sin
{{placeholder}}restantes. - Los datos de 6 gráficos se han reemplazado con los datos de la categoría correspondiente.
- Los insights centrales y las recomendaciones estratégicas son específicos y accionables.
- La matriz FABE contiene al menos 5 cadenas completas de puntos de venta.
- El plan de acción tiene prioridades claras y plazos.
- El informe está en español, profesional y conciso.
Referencia de Metodología
Los documentos detallados de metodología se encuentran en references/ y se cargan según sea necesario:
| Documento | Contenido | Cuándo cargarlo |
|---|---|---|
atlas-workflow.md | Flujo completo de 10 pasos del workflow visual Atlas | Antes de comenzar el análisis, para comprender el marco general. |
user-insight.md | Seis dimensiones de insights de usuario, análisis de reseñas, perfil de decisión de compra | Al trabajar en los capítulos de insights de usuario y análisis de reseñas. |
fabe-model.md | Modelo FABE, tres estructuras, casos entre categorías | Al trabajar en el capítulo de traducción de puntos de venta FABE. |
main-image-strategy.md | Tres elementos de la imagen principal, cinco trampas, adaptación a categoría | Al trabajar en el capítulo de estrategia de imagen principal. |
image-gallery-strategy.md | Método de disposición en cinco pasos de imágenes secundarias, 6 módulos, errores comunes | Al trabajar en el capítulo de estrategia de imágenes secundarias. |
a-plus-strategy.md | Estructura de seis secciones de A+, descubrimiento de contenido, ayuda con IA | Al trabajar en el capítulo de página A+. |
video-strategy.md | Matriz de contenido de video, guion dorado, ubicación de publicación | Al trabajar en el capítulo de estrategia de video. |
brand-store-strategy.md | 6 módulos de tienda oficial, sistema visual de marca | Al trabajar en el capítulo de tienda oficial de marca. |
data-diagnosis.md | Indicadores clave, métodos de diagnóstico, ciclo de optimización | Al trabajar en el capítulo de diagnóstico de datos. |
Uso de Herramientas de Gráficos
report-charts.js encapsula 4 tipos de gráficos comunes. Forma de llamada:
// Gráfico de barras
ReportCharts.bar({ canvasId, labels, datasets, title });
// Gráfico de barras horizontales
ReportCharts.horizontalBar({ canvasId, labels, datasets, title });
// Gráfico de radar
ReportCharts.radar({ canvasId, labels, datasets, title });
// Gráfico de anillo/tarta
ReportCharts.doughnut({ canvasId, labels, data, title });
Todos los gráficos usan el tema naranja por defecto y son totalmente responsive.
Principios de Ejecución
- Investigar antes de producir – No genere de la nada; base en el conocimiento general de la categoría y las reglas del mercado.
- Datos reemplazables – Organice todos los datos con una mentalidad de variables/marcadores de posición para que el usuario los reemplace fácilmente.
- Estrategias accionables – Cada recomendación estratégica debe incluir pasos concretos, sin generalidades.
- Ciclo completo – Desde el análisis hasta la estrategia y el plan de acción, formando un ciclo completo.
- Profesionalismo visual – Aproveche al máximo los componentes de la plantilla (tarjetas, tablas, cuadros de insights, gráficos) para garantizar la calidad visual.