儀表板靠描述產生，不靠拖放搭建
告訴 agent 要呈現什麼、要什麼感覺。Open Design 提供圖表範式、版面系統和視覺語言，你拿到的是連貫、拿得出手的儀表板，而不是一堆預設樣式的元件。
一句話
Open Design 把你對指標的白話描述變成有樣式的儀表板，由 agent 算繪成 HTML——在你的儲存庫裡做版本控管、隨處可代管、無需按席位訂閱 BI。
用 Open Design 做儀表板的流程
- 01
描述指標
列出你關心的——「週活躍、按方案分的營收、流失率、近 30 天趨勢」。agent 載入儀表板 skill，知道要排佈 KPI 卡片、圖表和表格，而不是一段文字。
- 02
選擇圖表範式
Open Design 自帶圖表和版面範本，趨勢變折線、佔比變長條、比例用對的圖——全程字體和間距統一，而不是一堆不搭的預設樣式。
- 03
接入資料
把儀表板指向 CSV、JSON 端點，或貼上範例列。它算繪成自包含 HTML，資料變它就變——任何瀏覽器能開啟，任何靜態代管能放。
- 04
打磨並交付
靠跟 agent 對話來調——「營收按地區分組、把 KPI 列挪到頂部」。產物在你的專案裡，儀表板像任何程式碼一樣可審查、可版本控管。
你能做出哪些儀表板
原型 閱讀完整提示 → 儀表板
單檔 HTML 管理/分析儀表板。固定左側邊欄，頂部使用者/搜尋列，主區域顯示 KPI 卡片網格和圖表。適用於需要『儀表板』、『管理後台』、『數據分析』或『控制面板』畫面的場景。
原型 閱讀完整提示 → GitHub 儀表板
GitHub 儲存庫分析儀表板 — 星標、分支、貢獻者、議題、拉取請求、近期活動和主要貢獻者。適用於 GitHub 儲存庫儀表板、開源成長報告、儲存庫健康頁面或 GitHub 分析檢視。
原型 閱讀完整提示 → 資料視覺化報告
將 CSV、Excel 或 JSON 資料轉換為精美的視覺化報告頁面。
原型 閱讀完整提示 → 財務報告
季度/月度財務報告——包含關鍵指標的報頭、收入與消耗圖表、損益彙總表、重點摘要和展望段落。當需求提到『財務報告』、『Q3報告』、『MRR審查』、『P&L』或『財報』時使用。
原型 閱讀完整提示 → 最近30天
最近30天的社群和社交趨勢研究。適用於了解當前輿論、近期情緒、社群反應、社交證明、發布反饋、趨勢掃描或最近30天的背景資訊。
原型 閱讀完整提示 → Flowai 即時儀表板範本
FlowAI 風格的團隊管理儀表板，包含三個分頁（團隊成員、團隊詳情、活動記錄）、KPI 統計列、成員表格、角色分佈長條圖、線上狀態和活動趨勢圖、頂級貢獻者面板，支援亮暗主題切換、圖表懸停提示、面板點擊縮放和 CSV 匯出功能。
用 Open Design 做儀表板 vs. 老方法
| 你需要什麼 | 用 Open Design | BI 工具 / 純手寫 |
|---|---|---|
| 從指標清單到版面 | ●一句話，agent 排佈卡片、圖表、表格 | 一個個拖元件，或從零寫圖表程式碼 |
| 一致的視覺系統 | ●圖表範式和間距來自可重複使用設計系統 | 預設元件樣式，或每張圖手動調 |
| 接入資料 | ●CSV / JSON / 貼上列，算繪成即時 HTML | 廠商連接器或客製資料管線 |
| 代管與分享 | ●自包含 HTML 放任何靜態代管，不要帳號 | 檢視者要 BI 廠商的席位 |
| 審查與版本控管 | ●在儲存庫裡，像程式碼一樣可 diff | 鎖在廠商裡，無法真正 diff |
| 成本與綁定 | ●開源、自帶金鑰、本機執行 | 按席位訂閱、廠商代管 |
下面是從 prompt + 資料來源算繪出的真實儀表板。挑一個接近你的，描述你要盯的指標。
儀表板常見問題
-
01 需要 Tableau、Looker 這類 BI 工具嗎？
不需要。Open Design 在你的編碼 agent 裡把儀表板算繪成 HTML。你描述指標、指向資料，沒有額外的 BI 平台要授權或學習。
-
02 資料從哪來？
CSV、JSON 端點，或你貼上的列。儀表板是純 HTML + JavaScript，你完全掌控它從哪讀——不經任何代管服務中轉。
-
03 非技術同事能看嗎？
能。產出是自包含網頁，任何人拿到連結或檔案就能在瀏覽器開啟——不要帳號、不要席位。
-
04 可以用哪些 agent？
Claude Code、Codex、Cursor Agent、Gemini CLI 等十多個第一方轉接器，自帶 provider 金鑰。
今晚就把儀表板做出來
給儲存庫點個 star、裝上 Open Design，把你的指標變成一個隨處可代管的儀表板——在你本來就用的 agent 裡。