技能概述
Live Dashboard 產生一個 Live Artifact —— 一個 HTML 頁面，表現為一個工作嘅儀表盤，而唔係 mockup。輸出「ship, not only renders」。
Notion 風格團隊儀表盤，KPI、7 天火花線、實時活動源、鏈接數據庫任務表 —— 通過 Notion connector 連接。按需刷新同打開時刷新，無 connector 綁定時回退到種子 mock 數據。
觸發關鍵字
- team dashboard、notion dashboard、live dashboard、ops dashboard
- team workspace dashboard、團隊儀表盤、Notion 儀表盤
- Live Artifact dashboard
什麼時候用
- 需要 Notion 風格嘅團隊工作空間儀表盤
- 運營儀表盤，需要實時數據刷新
- 用戶要求「team dashboard」、「Notion 看板」
使用方法
自然語言觸發
做一個 Notion-style team dashboard
team workspace live dashboard
Live Artifact 儀表盤
預檢（必做）
- 讀取
assets/template.html—— 從這個骨架開始，唔好從頭重建。 - 讀取
references/layouts.md—— 選擇一個布局（A 經典儀表盤 / B Kanban / C KPI-only hero）。 - 讀取
references/components.md—— 複製 KPI-card、sparkline、activity row、database row 標記。 - 讀取
references/connectors.md—— 當 connector ≠ mock 時。 - 讀取
references/checklist.md—— 每個 P0 行必須為 true。
構建順序
| 組件 | 說明 |
|---|---|
| Topbar | 左側 breadcrumb，右側 <live-pill>（Live synced / Syncing / Stale） |
| Page Header | Notion page-emoji + page-title 40px + 元數據行 |
| Callout | 解釋 Live Artifact 合約，一行，無營銷語言 |
| KPI 網格 | 1px 髮線網格，無陰影，tabular-nums，小灰色 delta 行 |
| 雙列塊 | 火花線（SVG，無庫）+ 活動源卡片 |
| 鏈接數據庫 | Notion 風格表格，狀態藥丸用 Notion 五色集 |
| Footer | 來源歸因 + connector 標記 |
Live 行為
init()在掛載 600ms 後運行refresh({silent: true})- 刷新按鈕：數字 KPI 補間動畫、表更改行閃光 1.4s、新活動行左填充高亮 2s、底部 toast 描述差異
setInterval(refresh, refresh_seconds * 1000)當 Auto 開啟stale_after_seconds無成功刷新後切換到琥珀色 Stale 狀態- 錯誤時回退到 mock 數據，儀表盤永不顯示崩潰
反 AI 陳詞濫調
- 無紫→粉梯度標題
- 無頁面頂部 emoji 圖標條
- 無 4px 左邊框強調嘅圓角卡片
- 無「10× faster」/「infinite」/「join 50,000+」文案
- 無 KPI 卡片毛玻璃 / backdrop-blur
- 無 KPI 數字下嘅彩色進度條
- Inter 僅用於正文
實際例子
用戶：「Build me a Notion-style team dashboard for Acme Studio. KPIs: total tasks, done this week, active members, docs in review. Wire it to the Notion connector and let it refresh on demand.」
生成結果：
- Topbar：「Acme Studio / Workspace / Team Dashboard」+ Live 狀態 pill
- Header：📋 圖標 + 40px 標題 + 最後刷新時間
- KPI 網格：total tasks / done this week / active members / docs in review
- 火花線：7 天趨勢 + 活動源
- 任務表：Notion 風格，狀態藥丸 + 人員芯片