1077553201/image-skill

Gerador de Relatórios Visuais de Categoria

Gera relatórios HTML padronizados de 12 capítulos para estratégia visual de qualquer categoria de comércio eletrônico (cross-border), com base na metodologia Atlas.

Capacidades Principais

• Metodologia Completa: 9 módulos de referência, cobrindo toda a cadeia, desde análise de concorrentes até decisões visuais
• Modelo Pronto para Uso: Modelo HTML pronto + CSS + gráficos Chart.js, bastando copiar e usar
• Estrutura Padrão de 12 Capítulos: Análise de mercado → Palavras-chave → Imagem principal → Imagens complementares → Insights do cliente → FABE → A+ → Vídeo → Loja oficial → Diagnóstico de dados → Plano de ação
• 6 Tipos de Gráficos: Gráfico de barras, barras horizontais, radar, rosca/pizza, visualizações orientadas por dados

Localização dos Recursos do Modelo

Os arquivos do modelo estão em assets/report-template/, com a seguinte estrutura:

assets/report-template/
├── index.html              # Modelo HTML completo de 12 capítulos (com JS de gráficos inline, todos os conteúdos marcados com {{placeholders}})
└── assets/
    └── report-base.css     # Estilos base com tema laranja (design tokens + conjunto completo de componentes)

Chart.js é carregado via CDN, as funções utilitárias de gráficos já estão inline no HTML, prontas para uso.

Modo de usar: Copie todo o diretório assets/report-template/ para o diretório de trabalho, substitua os {{placeholders}} no index.html e atualize os dados dos gráficos no final do arquivo.

Fluxo de Geração do Relatório

Primeiro Passo: Coleta de Informações

Antes de gerar o relatório, colete as seguintes informações:

1. Informações da Categoria: Nome da categoria (em chinês e inglês), plataforma destino (Amazon, loja própria, etc.)
2. Dados de Mercado: Distribuição de faixa de preço, lista de marcas líderes (pelo menos 5), pontos de venda e estilo visual de cada marca
3. Dados de Palavras-chave: Palavras-chave principais, de cauda longa e de cenário, com volume de busca e concorrência
4. Dados de Avaliações: Palavras de alta frequência (positivas/negativas), lista de principais dores
5. Informações do Produto: Características, vantagens e posicionamento do público-alvo

Se o usuário não fornecer dados completos, gere análises placeholder razoáveis com base no conhecimento geral da categoria e no mercado comum, e indique "Deve ser validado com dados reais".

Segundo Passo: Gerar o Relatório

1. Copie assets/report-template/ para o diretório de trabalho
2. Substitua os conteúdos dos {{placeholders}} no index.html na ordem dos capítulos
3. Substitua os dados dos gráficos na tag <script> no final do arquivo
4. Garanta que todos os 12 capítulos estejam completamente preenchidos
5. Use a ferramenta create_html para implantar o relatório como uma página online acessível

Terceiro Passo: Verificação de Qualidade

Antes da entrega, verifique:

• Todos os 12 capítulos preenchidos, sem {{placeholders}} faltando
• Dados dos 6 gráficos substituídos pelos dados correspondentes da categoria
• Insights principais e recomendações estratégicas específicas e acionáveis
• Matriz FABE com pelo menos 5 cadeias completas de pontos de venda
• Plano de ação com prioridades claras e cronograma
• Relatório em chinês, profissional e conciso

Referência Metodológica

Documentos detalhados de metodologia estão em references/, carregue conforme necessário:

Documento	Conteúdo	Quando Carregar
atlas-workflow.md	Processo completo do fluxo de trabalho visual Atlas em 10 etapas	Antes de iniciar a análise, para entender a estrutura geral
user-insight.md	Seis dimensões de insights do cliente, método de análise de avaliações, perfil de decisão de compra	Ao fazer os capítulos de insights do cliente e análise de avaliações
fabe-model.md	Modelo FABE, três estruturas, exemplos entre categorias	Ao fazer o capítulo de tradução de pontos de venda FABE
main-image-strategy.md	Três elementos da imagem principal, cinco armadilhas, adaptação por categoria	Ao fazer o capítulo de estratégia da imagem principal
image-gallery-strategy.md	Método de disposição em 5 etapas das imagens complementares, 6 módulos, erros comuns	Ao fazer o capítulo de estratégia de imagens complementares
a-plus-strategy.md	Estrutura A+ em 6 seções, descoberta de conteúdo, auxílio de IA	Ao fazer o capítulo de página A+
video-strategy.md	Matriz de conteúdo de vídeo, script dourado, posicionamento do anúncio	Ao fazer o capítulo de estratégia de vídeo
brand-store-strategy.md	6 módulos da loja oficial, sistema visual da marca	Ao fazer o capítulo de loja oficial
data-diagnosis.md	Indicadores principais, método de diagnóstico, ciclo de otimização	Ao fazer o capítulo de diagnóstico de dados

Uso das Ferramentas de Gráficos

report-charts.js encapsula 4 tipos de gráficos comuns. Forma de chamada:

// Gráfico de barras
ReportCharts.bar({ canvasId, labels, datasets, title });

// Gráfico de barras horizontais
ReportCharts.horizontalBar({ canvasId, labels, datasets, title });

// Gráfico de radar
ReportCharts.radar({ canvasId, labels, datasets, title });

// Gráfico de rosca/pizza
ReportCharts.doughnut({ canvasId, labels, data, title });

Todos os gráficos usam o tema laranja por padrão e são responsivos automaticamente.

Princípios de Execução

1. Pesquise antes de gerar — Não crie do nada; baseie-se no conhecimento geral da categoria e nas leis do mercado
2. Dados substituíveis — Organize todos os dados com mentalidade de variáveis/placeholders para facilitar a substituição
3. Estratégias acionáveis — Cada recomendação estratégica deve ter uma abordagem concreta, sem generalidades
4. Ciclo completo — Da análise à estratégia e ao plano de ação, formando um ciclo completo
5. Profissionalismo visual — Utilize plenamente os componentes do modelo (cartões, tabelas, caixas de insight, gráficos) para garantir a qualidade visual