技能概述
Social Media Matrix Tracker Template 係一個電影級（cinematic）社交媒體矩陣數據追蹤面板技能，生成單文件 HTML artifact。特點係高數據密度、生產級微交互、玻璃擬態風格。包含多平台指標卡片、多類型圖表（折線圖 / 堆疊圖 / 環形圖 / 地圖）、懸停工具提示、點擊釘住分析點、拖拽區間分析、Shift+拖拽多區間對比、實時洞察面板。
所有交互原生實現，無需任何外部框架或 CDN，單文件直接打開即可使用。
觸發關鍵字
- social media matrix tracker、social media dashboard template
- creator analytics template、live social dashboard
- social analytics、content performance
- TikTok / Instagram / YouTube analytics dashboard
- multi-platform creator dashboard
- 社媒矩陣數據追蹤面板、社媒矩陣看板模板、社交媒體數據追蹤模板
- 新媒體數據看板、新媒體矩陣分析、內容運營數據看板
- 抖音數據看板、小紅書數據看板
什麼時候用
- 需要電影級 / 高級調性的社媒分析儀表板
- 多平台指標需要放在同一面板對比
- 需要交互式圖表（懸停洞察、區間對比）
- 需要模板形式以便後續替換真實數據
- 用戶提到抖音 / 小紅書 / TikTok / Instagram / YouTube 數據看板
使用方法
自然語言觸發
做個社媒矩陣數據追蹤面板
Create a social media matrix tracker with hover insights
幫我整一個多平台 creator analytics template
指定技能
用 social media matrix tracker template 技能
工作流程
- 讀取 DESIGN.md — 將 token 映射到 CSS 變量，然後基於
assets/template.html適配。 - 保持信息架構 — Hero + 平台矩陣 + KPI 條 + 多圖表深度區域的結構不變。
- 保留交互保真度 — 參見下方「交互清單」。
- 單文件 HTML — 內聯 CSS + JS，無框架依賴。
- 數據一致性 — 所有樣本數據真實且卡片/圖表間數字連貫。
- 校驗 — 按
references/checklist.md檢查後再輸出。
交互清單
| 交互 | 說明 |
|---|---|
| 明暗主題切換 | 全頁面主題即時切換 |
| 懸停工具提示 | 圖表 hover 自動貼邊，不超出視口 |
| 點擊釘住 | 點擊圖表點可釘住分析 |
| 拖拽區間分析 | 拖拽選擇時間範圍進行對比 |
| Shift+拖拽 | 多區間同時對比 |
| 洞察面板實時更新 | 每個圖表（折線 / 堆疊 / 環形 / 地圖）hover 時洞察即時更新 |
| 觸摸 + 鍵盤 | 折線圖支持觸摸和方向鍵操作（a11y） |
替換樣本數據的安全規範
模板附帶手工調優的樣本數組。替換真實數據時需遵守：
| 圖表 | 單位 | 小數位 | 注意 |
|---|---|---|---|
| hourChart | engagements | 0 | — |
| slaChart | 分鐘 | 0 | — |
| roiChart | 倍數 x | 1 | — |
| cohortChart | % | 0 | — |
- 整體替換數組，不替換單個索引 — 折線圖要求
values[]和xLabels[]長度一致且按索引對齊 - 四條折線系列必須長度一致（默認 7 個點），不同長度會泄漏到 A/B 對比
mixChart每個bars[i].stack必須保持 3 元素數組[Video, Thread, Carousel]sentimentChart各arcs[]百分比總和應為 100- KPI 條 + 平台卡片指標需同步更新
輸出格式
單文件 HTML artifact，以 <artifact> 包裹：
<artifact identifier="social-media-matrix-tracker" type="text/html" title="Social Media Matrix Tracker">
<!doctype html>
<html>...</html>
</artifact>
artifact 前一句簡短說明（如：「Cinematic social media matrix tracker — dark theme by default, all interactions live.」）。
實際例子
例子 1：社媒矩陣追蹤面板
用戶：「做個社媒矩陣數據追蹤面板，要有 TikTok、Instagram、YouTube 三個平台嘅對比。」
生成：
- Hero 區域 + 平台矩陣卡片
- KPI 條展示跨平台核心指標
- 多個交互式圖表（折線 / 堆疊 / 環形 / 地圖）
- 懸停工具提示 + 拖拽區間對比 + Shift+拖拽多區間對比
- 洞察面板隨圖表交互實時更新
例子 2：內容運營數據看板
用戶：「Create a multi-platform creator dashboard template with glassmorphism style。」
生成同樣結構的玻璃擬態風格儀表板，包含所有交互功能。
資源結構
social-media-matrix-tracker-template/
├── SKILL.md
├── assets/
│ └── template.html
├── references/
│ └── checklist.md
└── example.html