KPI 成果儀表板

輸入各項 KPI 指標的名稱、目標值、實際值、單位，工具自動生成視覺化儀表板卡片，顯示完成率、進度條，並依達成狀況顯示顏色警示。

PRACTICE GOALS

理解「數據儀表板」的視覺設計邏輯與狀態色彩系統

練習「輸入多組資料輸出多張卡片」的動態渲染模式

為你的部門或個人 KPI 做一個可以週會展示的儀表板

填入 KPI 資料，生成視覺化儀表板

輸入每個 KPI 的名稱、目標值、實際完成值、單位，點「生成儀表板」後，工具自動計算完成率並以顏色區分：達標（綠）、接近（黃）、落後（橘）。

指標名稱

目標值

實際值

單位

DASHBOARD

儀表板的設計核心是「狀態語言」：不同的顏色傳達不同的緊急程度。綠色代表好消息，橘色代表需要關注，這是一套不需要解釋的視覺語言。在製作工具時，把「條件判斷顏色輸出」的邏輯描述清楚，Gemini 就能自動處理。

讓 Gemini 幫你做一個 KPI 儀表板

列出你工作中需要追蹤的 KPI

這個工具最大的價值是可以替換成你實際的業績指標。先把你的月度 KPI 列出來，包含名稱、單位和目標值。

複製以下指令貼入 Gemini Canvas

注意指令中「依達成率判斷顏色」的描述方式——這讓 Gemini 理解工具需要條件邏輯，而不只是靜態顯示。

填入本月實際數據，存為月報工具

每月更新一次實際值，這個工具就是你的月度成果彙報頁面，可以直接在週會上展示。

你是一位擅長製作數據儀表板的前端工程師。請製作一個「KPI 成果儀表板」的單頁 HTML 工具，功能如下：【功能需求】 - 使用者可輸入多組 KPI 資料（支援動態新增和刪除），每組包含： · 指標名稱（文字輸入） · 目標值（數字輸入） · 實際完成值（數字輸入） · 單位（文字輸入，例如：萬元、人、件、%） - 「生成儀表板」按鈕，按下後動態渲染 KPI 卡片網格 - 每張 KPI 卡片顯示： · 指標名稱 · 實際值（大字顯示）+ 單位 · 目標值標示（例如：目標 100 萬元） · 達成率進度條（filled = 實際/目標 × 100%，最高顯示 100%） · 達成率百分比 + 狀態標籤（依以下邏輯）： - 達成率 ≥ 100%：綠色，顯示「已達標」 - 達成率 80–99%：黃色，顯示「接近目標」 - 達成率 60–79%：橘色，顯示「需加油」 - 達成率 < 60%：紅橘色，顯示「落後較多」【設計要求】 - 整體頁面無印良品風格：背景 #f5f3ee，卡片 #ffffff，邊框 #d8d4cb - 達標色 #5a7a5a，接近目標色 #c9963a，需加油色 #b5703a - KPI 卡片排成 3 欄格狀 - 字體：Shippori Mincho + Noto Sans TC（Google Fonts） - 圓角 6px，無陰影，無漸層請生成完整的單一 HTML 檔案。

讓這個儀表板成為你的月報神器

PRACTICE VARIATIONS

加入「上月數據」欄位，在卡片上顯示「本月 vs 上月」的環比變化（↑ 成長 or ↓ 下降），讓老闆一眼看到趨勢。

加入「儀表板標題」和「更新日期」輸入，讓這個工具可以直接做成一份正式的月度成果報告，在週會投影幕上展示。

把你部門目前的實際 KPI 填入，用這個儀表板在下次週會上呈現成果，並觀察主管和同事的反應。