FlowAI 儀表板技能
產生一個單螢幕、多分頁的團隊管理儀表板，靈感來自 FlowAI 美學。輸出為一個自包含的 HTML 檔案（無需外部執行時期依賴），內建以下互動功能：分頁切換、動畫長條圖、圖表懸浮工具提示、點擊放大面板、深色模式切換，以及視覺團隊表格的 CSV 匯出。
資源地圖
flowai-live-dashboard-template/
├── SKILL.md
├── assets/
│ └── template.html # 作為起始結構的參考種子
├── references/
│ └── checklist.md # P0/P1/P2 品質檢查點
└── example.html # 完整手動建置的範例（預覽畫廊）
工作流程
- 讀取已注入的 DESIGN.md（於上方注入）。將色彩、排版、間距及元件樣式標記對應至
assets/template.html所使用的 CSS 變數。請勿發明新的標記。 - 從
assets/template.html開始；切勿從頭產生外殼。 - 保持三個分頁：
Team Members、Team Details、Activity Log。分頁必須能實際切換，且一次僅顯示一個檢視畫面。 - 產生合理且具體的範例數據（擬真姓名、ID、角色、部門、日期、百分比）。避免使用
Member A / Metric B這類佔位符。 - 必要的互動功能：
- 分頁切換並同步雜湊網址（
#members | #details | #activity） - 角色長條圖在「詳細資訊」分頁首次顯示時，以緩動效果進行動畫
- 圖表懸浮工具提示，顯示精確的標籤與數值
- 點擊任何面板/卡片可放大；再次點擊或按下 Esc 鍵恢復原狀
- 深色模式切換，能從 CSS 變數重新推導圖表顏色
- 「Export CSV」按鈕，匯出團隊表格中目前所有列，包括
Workflow欄位
- 分頁切換並同步雜湊網址（
- 在輸出最終結果前，執行
references/checklist.md中的檢查。
輸出合約
先輸出一個簡短的引導句，接著是成品：
<artifact identifier="flowai-team-dashboard" type="text/html" title="FlowAI Team Dashboard">
<!doctype html>
<html>...</html>
</artifact>
成品必須在直接從磁碟開啟、無需任何建置步驟且無網路存取的情況下正確呈現。