CommunityProgramación y desarrollogithub.com

1077553201/image-skill

Generador de informes estratégicos de categorías visuales para comercio electrónico transfronterizo, basado en la metodología Atlas. Produce automáticamente informes HTML completos de 12 capítulos que incluyen análisis de mercado, investigación de palabras clave, estrategias de imagen principal/secundaria/A+/video/tienda oficial, insights de usuarios, traducción de puntos de venta FABE, diagnóstico de datos y plan de acción.

¿Qué es image-skill?

Esta skill está diseñada para generar informes estratégicos de categorías visuales para comercio electrónico transfronterizo (cross-border e-commerce), utilizando la metodología de flujo de trabajo visual Atlas. Con solo especificar la categoría de producto, la skill crea un informe HTML completo de 12 capítulos que abarca desde análisis de mercado y palabras clave hasta estrategias de imágenes, video, tienda oficial, insights de usuarios, traducción de puntos de venta FABE, diagnóstico de datos y un plan de acción detallado. El informe viene con una plantilla de tema naranja integrada (CSS, JS y Chart.js) que es totalmente responsive y fácil de usar. La skill se apoya en múltiples documentos de referencia en la carpeta `/references/` para garantizar que cada capítulo se complete con datos relevantes y estrategias accionables. Los usuarios pueden reemplazar los datos de marcador de posición con información real de su categoría para obtener un informe profesional listo para presentar o compartir en línea, por ejemplo, mediante la herramienta `create_html`.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/1077553201/image-skill/tree/HEAD/skills/visual-report-generator

Installed? Explore more Programación y desarrollo skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

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:

  1. Información de categoría: Nombre de la categoría (chino e inglés), plataforma objetivo (Amazon, sitio propio, etc.).
  2. 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.
  3. Datos de palabras clave: Palabras clave principales, de cola larga y de escenario con volúmenes de búsqueda y competencia.
  4. Datos de reseñas: Palabras de alta frecuencia positivas/negativas, lista de principales puntos débiles.
  5. 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

  1. Copie assets/report-template/ al directorio de trabajo.
  2. Reemplace los {{placeholder}} en index.html por el contenido de cada capítulo.
  3. Reemplace los datos de gráficos en la <script> al final.
  4. Asegúrese de que los 12 capítulos estén completos.
  5. Use la herramienta create_html para 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:

DocumentoContenidoCuándo cargarlo
atlas-workflow.mdFlujo completo de 10 pasos del workflow visual AtlasAntes de comenzar el análisis, para comprender el marco general.
user-insight.mdSeis dimensiones de insights de usuario, análisis de reseñas, perfil de decisión de compraAl trabajar en los capítulos de insights de usuario y análisis de reseñas.
fabe-model.mdModelo FABE, tres estructuras, casos entre categoríasAl trabajar en el capítulo de traducción de puntos de venta FABE.
main-image-strategy.mdTres elementos de la imagen principal, cinco trampas, adaptación a categoríaAl trabajar en el capítulo de estrategia de imagen principal.
image-gallery-strategy.mdMétodo de disposición en cinco pasos de imágenes secundarias, 6 módulos, errores comunesAl trabajar en el capítulo de estrategia de imágenes secundarias.
a-plus-strategy.mdEstructura de seis secciones de A+, descubrimiento de contenido, ayuda con IAAl trabajar en el capítulo de página A+.
video-strategy.mdMatriz de contenido de video, guion dorado, ubicación de publicaciónAl trabajar en el capítulo de estrategia de video.
brand-store-strategy.md6 módulos de tienda oficial, sistema visual de marcaAl trabajar en el capítulo de tienda oficial de marca.
data-diagnosis.mdIndicadores clave, métodos de diagnóstico, ciclo de optimizaciónAl 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

  1. Investigar antes de producir – No genere de la nada; base en el conocimiento general de la categoría y las reglas del mercado.
  2. Datos reemplazables – Organice todos los datos con una mentalidad de variables/marcadores de posición para que el usuario los reemplace fácilmente.
  3. Estrategias accionables – Cada recomendación estratégica debe incluir pasos concretos, sin generalidades.
  4. Ciclo completo – Desde el análisis hasta la estrategia y el plan de acción, formando un ciclo completo.
  5. Profesionalismo visual – Aproveche al máximo los componentes de la plantilla (tarjetas, tablas, cuadros de insights, gráficos) para garantizar la calidad visual.

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

Skills relacionados