技能概述
FlowAI Dashboard Template 係一個團隊管理後台儀表板技能，生成單文件 HTML 原型。頁面包含三個可切換 Tab（Team Members、Team Details、Activity Log），內置 KPI 卡片列、成員表格（含狀態徽章）、角色分佈柱狀圖、在線狀態閃線圖、頂部貢獻者面板，以及明暗主題切換同 CSV 導出功能。
設計靈感來自 FlowAI 美學風格，所有交互（Tab 切換、柱狀圖動畫、懸停工具提示、點擊放大面板、主題切換）全部原生實現，無需任何外部框架。
觸發關鍵字
- flowai dashboard、team dashboard、team management dashboard
- interactive admin dashboard、workspace admin dashboard
- 團隊管理後台、可交互後台
什麼時候用
- 用戶需要團隊 / 工作空間管理儀表板
- 需要帶圖表的交互式後台原型
- 明確提到 FlowAI 風格
- 需要成員列表 + 活動日誌 + 數據可視化的綜合後台
使用方法
自然語言觸發
用 FlowAI 風格做個團隊管理後台
Create a FlowAI-style team dashboard
做個可交互的團隊管理儀表板
指定技能
用 flowai dashboard template 技能
工作流程
- 讀取 DESIGN.md — 將色彩、字體排版、間距和組件樣式 token 映射到
assets/template.html使用的 CSS 變量，不憑空新增 token。 - 從模板開始 — 基於
assets/template.html起步，不從空白生成外殼。 - 保持三個 Tab — Team Members、Team Details、Activity Log，必須能實際切換，同一時間只顯示一個視圖。
- 生成真實樣本數據 — 使用真實感的姓名、ID、角色、部門、日期、百分比，禁止
Member A / Metric B佔位符。 - 確保交互完整 — 參見下方「交互清單」。
- 校驗 — 按
references/checklist.md逐項檢查後再輸出。
交互清單
| 交互 | 說明 |
|---|---|
| Tab 切換 | 帶有 hash 同步（#members / #details / #activity） |
| 柱狀圖動畫 | 首次顯示 Details Tab 時帶 easing 動畫 |
| 懸停工具提示 | 圖表 hover 顯示精確標籤 + 數值 |
| 點擊放大 | 點擊任意面板/卡片放大，再次點擊或 Esc 恢復 |
| 明暗主題切換 | 主題切換時圖表顏色從 CSS 變量重新派生 |
| CSV 導出 | 導出當前成員表格所有行（含 Workflow 列） |
輸出格式
單文件 HTML 儀表板，以 <artifact> 包裹：
<artifact identifier="flowai-team-dashboard" type="text/html" title="FlowAI Team Dashboard">
<!doctype html>
<html>...</html>
</artifact>
輸出前一句簡短導向說明，artifact 直接打開即可使用，無需構建步驟或網絡訪問。
實際例子
例子 1：團隊管理後台
用戶：「用 FlowAI 風格做個團隊管理後台，要三個 tab。」
生成：
- Tab 1（Team Members）：成員表格，含姓名、ID、角色、部門、狀態徽章、Workflow 列
- Tab 2（Team Details）：角色分佈柱狀圖（帶動畫）+ 在線狀態閃線圖
- Tab 3（Activity Log）：活動日誌時間線
- 頂部 KPI 統計列 + 頂部貢獻者面板
- 右上角明暗主題切換 + Export CSV 按鈕
例子 2：工作空間後台
用戶：「Create an interactive workspace admin dashboard with team details and activity tracking。」
生成完整的 FlowAI 風格三 Tab 儀表板，包含所有交互功能。
資源結構
flowai-live-dashboard-template/
├── SKILL.md
├── assets/
│ └── template.html # 模板起點
├── references/
│ └── checklist.md # P0/P1/P2 質量檢查清單
└── example.html # 完整手工樣本（展示用）