技能概述
Dashboard 技能生成單文件 HTML 嘅管理 / 分析儀表板。包含固定左側欄（220-260px）、top bar（頁面標題 + 搜索 + 用戶狀態）、主區域（KPI cards + inline SVG charts）。所有顏色來自 DESIGN.md tokens，accent 最多用兩次。
觸發關鍵字
- dashboard、admin panel、analytics、control panel、后台、管理後台
什麼時候用
- 管理後台界面
- 數據分析儀表板
- 運營控制面板
- KPI 監控面板
- 業務數據看板
使用方法
自然語言觸發
帮我做一个数据 dashboard
整一個 admin panel
做一個 analytics dashboard
做一個管理後台
標準工作流程
- 讀 DESIGN.md — 映射 colors、typography、spacing、components
- 分類監控類型（sales / traffic / usage / incidents / ops）
- 佈局：
- 左側欄：brand mark + 6-8 nav links + icons
- Top bar：page title + search + user avatar
- KPI cards（3-4 個）：label + big number + delta
- Primary chart（SVG line / bar / area）
- Secondary chart / table
- 自檢 — accent ≤ 2 次、sidebar + top bar sticky
輸出格式
單文件 HTML，CSS Grid 佈局，Flexbox cards，Semantic HTML（<aside>, <header>, <main>, <section>），所有區域帶 data-od-id。
圖表用 inline SVG（~10 行 <polyline> 線圖，N 個 <rect> 柱圖），無外部 JS 庫。
實際例子
例子 1：SaaS 運營儀表板
用戶：「做一個 SaaS 運營 dashboard，要睇 MRR、churn、active users」
生成：
- KPI：MRR $125K (+12%) / Churn 2.3% / Active Users 4,200 / NPS 52
- Revenue trend（SVG line chart，6 個月）
- Cost breakdown（SVG bar chart）
例子 2：電商管理面板
用戶：「整一個電商 admin panel」
生成：
- 左側欄：Dashboard / Orders / Products / Customers / Analytics / Settings
- KPI：今日訂單 / 轉換率 / 平均客單價 / 退貨率
- 銷售趨勢圖 + 熱銷產品表