1077553201/image-skill

Category Visual Report Generator

Generates a standardized 12-chapter visual strategy HTML report for any cross-border e-commerce product category, based on the Atlas Visual Workflow methodology.

Core Capabilities

• Complete Methodology: 9 reference modules, covering the full chain from competitive analysis to visual decision-making
• Out-of-the-Box Template: Built-in HTML template + CSS styles + Chart.js charting tool, ready to copy and use
• 12-Chapter Standard Structure: Market Analysis → Keywords → Main Image → Gallery → User Insights → FABE → A+ → Video → Brand Store → Data Diagnosis → Action Plan
• 6 Chart Types: Bar chart, horizontal bar chart, radar chart, doughnut/pie chart, data-driven visualization

Template Resource Location

The template file is located in assets/report-template/, containing:

assets/report-template/
├── index.html              # Complete 12-chapter HTML template (with inline chart JS, all content marked with {{placeholder}})
└── assets/
    └── report-base.css     # Orange theme base styles (design tokens + full component set)

Chart.js is loaded via CDN, and chart utility functions are inline in the HTML for immediate use.

How to Use: Copy the entire assets/report-template/ directory to your working directory, then replace the {{placeholder}} entries in index.html and the chart data at the bottom.

Report Generation Process

Step 1: Information Collection

Before generating the report, collect the following information:

1. Category Information: Category name (in both English and the target language), target platform (Amazon/independent store, etc.)
2. Market Data: Price band distribution, list of top brands (at least 5), each brand's selling points and visual style
3. Keyword Data: Core/long-tail/scenario keywords with search volume and competition level
4. Review Data: Top positive/negative high-frequency words, list of main pain points
5. Product Information: Product features, advantages, target user positioning

If the user does not provide complete data, generate reasonable placeholder analysis based on category common sense and general market conditions, and mark it with "Needs verification with actual data."

Step 2: Generate Report

1. Copy assets/report-template/ to the working directory
2. Replace the {{placeholder}} content in index.html chapter by chapter
3. Replace chart data in the bottom <script> section
4. Ensure all 12 chapters are fully populated
5. Use the create_html tool to deploy as an accessible online page

Step 3: Quality Check

Before delivery, confirm:

• All 12 chapters are filled, no missing {{placeholder}}
• Data for all 6 charts has been replaced with the corresponding category data
• Core insights and strategic recommendations are specific and actionable
• The FABE matrix includes at least 5 complete selling point chains
• The action plan has clear priorities and a timeline
• The report language is professional and concise

Methodology Reference

Detailed methodology documents are located in references/, loaded as needed:

Document	Content	When to Load
atlas-workflow.md	Complete Atlas 10-step visual workflow	Before starting analysis, to understand the overall framework
user-insight.md	Six dimensions of user insights, review analysis method, purchase decision persona	When working on the user insights and review analysis chapter
fabe-model.md	FABE model, three structures, cross-category examples	When working on the FABE selling point translation chapter
main-image-strategy.md	Three elements of main image, five pitfalls, category adaptation	When working on the main image strategy chapter
image-gallery-strategy.md	Five-step gallery layout method, 6 modules, common mistakes	When working on the gallery strategy chapter
a-plus-strategy.md	A+ six-section structure, content mining, AI assistance	When working on the A+ page chapter
video-strategy.md	Video content matrix, golden script, placement positions	When working on the video strategy chapter
brand-store-strategy.md	Brand store 6 modules, brand visual system	When working on the brand store chapter
data-diagnosis.md	Core metrics, diagnosis method, optimization loop	When working on the data diagnosis chapter

Chart Tool Usage

report-charts.js encapsulates 4 commonly used chart types. Calling method:

// Bar chart
ReportCharts.bar({ canvasId, labels, datasets, title });

// Horizontal bar chart
ReportCharts.horizontalBar({ canvasId, labels, datasets, title });

// Radar chart
ReportCharts.radar({ canvasId, labels, datasets, title });

// Doughnut/Pie chart
ReportCharts.doughnut({ canvasId, labels, data, title });

All charts use the orange theme by default and are automatically responsive.

Execution Principles

1. Research before output — Do not generate blindly; base on category common sense and market laws as much as possible
2. Data replaceable — Organize all data with a variable/placeholder mindset, making it easy for users to replace
3. Actionable strategies — Every strategy recommendation should include specific actions; avoid being vague
4. Complete loop — From analysis to strategy to action plan, forming a complete closed loop
5. Professional visuals — Fully utilize template components such as cards, tables, insight boxes, and charts to ensure visual quality