品類視覺報告產生器
基於 Atlas 視覺工作流方法論，為任意跨境電商品類產生標準化的 12 章視覺策略 HTML 報告。
核心能力
- 完整方法論：9大參考模組，涵蓋從競品分析到視覺決策的全鏈路
- 開箱即用模板：內建 HTML 模板 + CSS 樣式 + Chart.js 圖表工具，直接複製使用
- 12章標準結構：市場分析→關鍵字→主圖→附圖→用戶洞察→FABE→A+→影片→品牌店→數據診斷→行動計劃
- 6種圖表類型：長條圖、水平長條圖、雷達圖、圓環圖/圓餅圖，數據驅動視覺化
模板資源位置
模板檔案位於 assets/report-template/，包含：
assets/report-template/
├── index.html # 12章完整HTML模板（含內聯圖表JS，所有內容用{{佔位符}}標記）
└── assets/
└── report-base.css # 橙色主題基礎樣式（設計令牌+全套組件）
Chart.js 透過 CDN 載入，圖表工具函數已內聯在 HTML 中，開箱即用。
使用方式：將 assets/report-template/ 整個目錄複製到工作目錄，替換 index.html 中的 {{佔位符}} 和底部圖表數據即可。
報告產生流程
第一步：資訊收集
在開始產生報告前，收集以下資訊：
- 品類資訊：品類名稱（中英文）、目標平台（Amazon/獨立站等）
- 市場數據：價格帶分布、頭部品牌列表（至少5個）、各品牌賣點和視覺風格
- 關鍵字數據：核心詞/長尾詞/場景詞及搜索量、競爭度
- 評論數據：正面/負面高頻詞、TOP痛點列表
- 產品資訊：本產品的特性、優勢、目標用戶定位
如果用戶未提供完整數據，基於品類常識和市場通用情況產生合理的佔位分析，並標註「需根據實際數據驗證」。
第二步：產生報告
- 複製
assets/report-template/到工作目錄 - 按章節順序替換
index.html中的{{佔位符}}內容 - 替換底部
<script>中的圖表數據 - 確保所有 12 個章節內容完整填充
- 使用
create_html工具部署為可訪問的線上頁面
第三步：品質檢查
交付前確認：
- 12個章節全部填充，無遺漏
{{佔位符}} - 6張圖表數據已替換為對應品類數據
- 核心洞察和策略建議具體、可落地
- FABE矩陣至少包含5個完整賣點鏈
- 行動計劃有明確優先順序和時間線
- 報告語言為中文，專業、簡潔
方法論參考
詳細方法論文檔位於 references/，按需載入：
| 文檔 | 內容 | 何時載入 |
|---|---|---|
atlas-workflow.md | Atlas 10步視覺工作流完整流程 | 開始分析前，了解整體框架 |
user-insight.md | 用戶洞察六維度、評論分析法、購買決策畫像 | 做用戶洞察和評論分析章節時 |
fabe-model.md | FABE模型、三種結構、跨類目案例 | 做FABE賣點轉譯章節時 |
main-image-strategy.md | 主圖三要素、五坑、類目適配 | 做主圖策略章節時 |
image-gallery-strategy.md | 附圖五步排布法、6大模組、常見錯誤 | 做附圖策略章節時 |
a-plus-strategy.md | A+六段結構、內容挖掘、AI輔助 | 做A+頁面章節時 |
video-strategy.md | 影片內容矩陣、黃金腳本、投放位置 | 做影片策略章節時 |
brand-store-strategy.md | 旗艦店6大模組、品牌視覺系統 | 做品牌旗艦店章節時 |
data-diagnosis.md | 核心指標、診斷方法、優化閉環 | 做數據診斷章節時 |
圖表工具使用
report-charts.js 封裝了4種常用圖表，調用方式：
// 長條圖
ReportCharts.bar({ canvasId, labels, datasets, title });
// 水平長條圖
ReportCharts.horizontalBar({ canvasId, labels, datasets, title });
// 雷達圖
ReportCharts.radar({ canvasId, labels, datasets, title });
// 圓環圖/圓餅圖
ReportCharts.doughnut({ canvasId, labels, data, title });
所有圖表預設使用橙色主題，自動響應式。
執行原則
- 先研究再輸出——不要憑空產生，盡量基於品類常識和市場規律
- 數據可替換——所有數據用變數/佔位符思維組織，方便用戶替換
- 策略可落地——每個策略建議都要有具體做法，不要空泛
- 完整閉環——從分析到策略到行動計劃，形成完整閉環
- 視覺專業——充分利用模板的卡片、表格、洞察框、圖表等組件，保證視覺品質