儀表板技能
產生一個單一畫面的管理後台 / 分析儀表板。
工作流程
- 讀取活躍的 DESIGN.md（已注入於上方）。顏色、字體、間距、元件樣式皆來自於此。請勿發明新的代幣。
- 分類根據需求判斷儀表板監控的範圍（銷售、流量、使用量、事件、維運等）。生成具體、合理的指標名稱與數值——不要使用「指標 A / 指標 B」這類佔位符。
- 佈局必需的區域：
- 左側邊欄（220–260px）：頂端放置品牌標誌，6–8 個附圖示的導航鏈結，啟用狀態使用設計系統的主色。
- 頂部列：左側為頁面標題，右側為搜尋輸入框 + 使用者頭像/狀態。
- 主要內容：
- 第 1 行：3–4 張 KPI 卡片（標籤 + 大數字 + 與前期相比的變動）。
- 第 2 行：一個主要圖表（全寬或 2/3 寬）——以行內 SVG 繪製，使用看起來真實的數值（折線圖 / 長條圖 / 區域圖）。
- 第 3 行：一個次要圖表或表格（近期事件、熱門項目等）。
- 撰寫一份自包含的 HTML 文件：
- 從
<!doctype html>到</html>，CSS 置於一個行內<style>區塊中。 - 使用 CSS Grid 處理整體佈局；卡片內使用 Flexbox。
- 使用語意化 HTML：
<aside>、<header>、<main>、<section>。 - 為每個邏輯區域標記
data-od-id="slug"屬性以支援註解模式。
- 從
- 圖表：僅使用行內 SVG，不引用任何 JS 函式庫。折線圖約由 10 條
<polyline>組成，並加上淡淡的區域填色。長條圖則由 N 個<rect>構成，填色使用設計系統的主色。軸標籤使用淺色文字與較小字級。 - 自我檢查：
- 每個顏色皆來自 DESIGN.md 的代幣。
- 主色最多使用兩次（側邊欄啟用狀態 + 一個圖表高亮）。
- 側邊欄與頂部列固定；主要內容可獨立滾動。
- 密度與設計系統的調性一致——寬鬆的設計系統給予較多的內距，密集的設計系統（如交易、加密貨幣）則收緊行距。
輸出合約
在 <artifact> 標籤之間輸出：
<artifact identifier="dashboard-slug" type="text/html" title="Dashboard Title">
<!doctype html>
<html>...</html>
</artifact>
在 artifact 之前寫一句話，之後不附加任何內容。