技能概述
Social Media Dashboard 係一個面向創作者的社交媒體分析儀表板技能，生成單文件 HTML 原型。支持平台切換（X / LinkedIn / YouTube / Instagram / TikTok），包含 KPI 卡片行（follower 數、互動率、點讚數、轉發數）、follower 增長折線圖、本週熱門帖子預覽、趨勢話題標籤雲同熱門評論卡片。
所有數據內部一致（切換平台時 follower 數與 KPI 行聯動），圖表使用 inline SVG 繪製，無需 JS 庫。
觸發關鍵字
- social media dashboard、social analytics、creator dashboard
- creator analytics、social media analytics
- 社媒後台、創作者後台、社交媒體儀表盤
- X / Twitter / LinkedIn / YouTube / Instagram + followers、engagement、likes、reposts
什麼時候用
- 用戶需要社交媒體分析儀表板
- 創作者需要多平台數據概覽
- 需要 follower 增長趨勢圖 + 熱門帖子 + 趨勢話題
- 指定具體平台（X、LinkedIn、YouTube、Instagram、TikTok）並配合指標需求
使用方法
自然語言觸發
做個社交媒體儀表盤，要 X 同 YouTube 數據
Create a creator analytics dashboard for my social accounts
幫我整一個多平台社交媒體分析後台
指定技能
用 social media dashboard 技能
工作流程
- 讀取 DESIGN.md — 顏色、字體排版、間距、圓角、組件樣式全部來自 DESIGN.md，不憑空新增 token，不硬編碼平台品牌色。
- 確認平台 — 按用戶要求選擇平台，未指定時默認 X / LinkedIn / YouTube / Instagram，平台切換器最多一行 5 個。
- 生成連貫數據 — 選擇創作者人設（默認「AI / design indie creator」），所有數字頁面內一致 — 切換器 follower 數必須與選中平台的 KPI 行吻合。
- 自上而下佈局 — 按以下結構排列頁面：
頁面結構
| 區域 | 說明 |
|---|---|
| Header bar | 品牌標記 + 「ANALYTICS」標籤、明暗切換、時間範圍 Tabs（7D · 30D · 90D · YTD）、創作者頭像 |
| Hero strip | 一句展示型摘要（如「You shipped 14 posts on X this week.」）、兩行元數據、兩個 CTA（Export report / New post →） |
| Ask bar | 搜索樣式輸入框，帶 ghost-text 建議（top performing last week、comments from verified accounts） |
| Platform switcher | 4 個平台卡片一行，各含平台單字母標、名稱、follower 數、本週增量（+X.XK this week） |
| KPI row | 4 張卡片 — Followers · Engagement Rate · Likes (7D) · Reposts (7D)，含標籤、大數值、環比 delta、腳註 |
| Main grid (2/3 + 1/3) | 左：Follower Growth 折線圖（inline SVG + area fill + 註解點）；右：Top Post 卡片（含帖子渲染 + CTR 標籤） |
| Lower grid (1/2 + 1/2) | 左：Trending topics（5-7 個 chip 行 + 24h 閃線圖）；右：Top comments（3 張評論卡片） |
-
圖表規範 — 僅用 inline SVG：
- 折線圖：
<path>曲線 + 低透明度 area fill +<circle>註解點 - 閃線圖：
<polyline>10 個點，無座標軸，約 16px 高 - Accent 色在頁面上最多出現三次
- 折線圖：
-
Self-check — 所有顏色解析為 DESIGN.md token；數字內部一致；Header 和 Hero strip 固定，主內容可滾動。
輸出格式
單文件 HTML 儀表板，以 <artifact> 包裹：
<artifact identifier="social-media-dashboard" type="text/html" title="Social Media Dashboard">
<!doctype html>
<html>...</html>
</artifact>
artifact 前一句說明，之後無其他內容。
實際例子
例子 1：創作者分析儀表板
用戶：「Create a social media analytics dashboard for X and YouTube, show follower growth and top posts。」
生成：
- 平台切換器：X + YouTube（+ 默認 LinkedIn + Instagram）
- KPI 行：Followers 48.2K · Engagement 4.6% · Likes 2.1K · Reposts 847
- Follower Growth 折線圖帶兩個註解點（Newsletter drop +842, Viral thread +1.2K）
- Top Post 卡片含帖子渲染和 CTR 5.6% 標籤
- 趨勢話題 5-7 個 chip + 24h 閃線圖
- 熱門評論 3 張卡片
例子 2：社媒後台
用戶：「做個社媒後台，要睇到 X 同 Instagram 嘅 follower 增長同 trending。」
生成同樣結構的儀表板，平台數據替換為 X 和 Instagram。