背景
人資每天都在做同一件事：將散在各系統的數字撈出來、拼成一張表、給老闆看。高頻、耗時，又全靠人工判讀。在禾樂映像股份有限公司擔任執行長特助的那段時間，我想證明一件事：這類工作可以被重構成可分析、可追蹤、能支撐決策的工具，而且人資自己就做得出來。
我做了什麼
- 以 Vibe Coding 獨立開發「全模組人資戰情室」，打通人資、財會、營運三個部門原本各自為政的數據。
- 將每週要人工彙整的報表，變成經營層與 HR 團隊都能即時查詢的儀表板。
- 每週為經營層與 HR 團隊省下共 11 小時的報表工時，讓時間回到判斷與決策。
系統分成八個模組，各自對應不同的人資職能，畫面依序如下（皆為示範資料，人名、門市名稱與財務數字均為虛構）：
00・戰情中心：全域數據篩選與八項核心指標，涵蓋組織擴張與人事成本趨勢、高離職風險部門預警，以及 HR 戰略風險雷達。
01・人事資料儀表板：在職、離職、新進人數與流動率總覽，另有性別、居住地、年資分佈。
02・招募數據儀表板：招募漏斗轉換率與人才年齡結構，並可依門市比較招募週期。
03・薪酬獎金儀表板：薪資與獎金總額、人均薪資成本，以及部門與職稱薪資排行。
04・績效評核儀表板：績效等級常態分配、各職能平均得分，以及需啟動 PIP 計畫的名單。
05・教育訓練儀錶板：訓練時數與成本、L1–L4 訓練成效追蹤，並整合 AI CHRO 自動生成的洞察與行動方案。
06・部門工作盤點儀表板：近 1.9 萬筆工作紀錄的每日工時趨勢，以及 22 項工作分類的佔比組成。
07・P&L 戰略報表：整合全公司營收、成本與獲利指標，換算每月人均產值與人均成本。
系統架構
整套戰情室是一個零後端、零建置的單檔 HTML：不需要 Node、不需要 npm、沒有伺服器，開啟瀏覽器就能跑，也能整包用信箱或隨身碟交接給下一個接手的人資。
外殼（導覽、主題、設定）用純 JavaScript 寫成，靠 data-target 屬性配合 classList 切換分頁，跟任何前端框架都脫鉤；深色模式只用一行 CSS filter: invert(1) 全域套用，省下維護第二套色票的功夫。八個模組則各自是一棵獨立的 React 18 元件樹：用 Babel Standalone 在瀏覽器裡即時將 JSX 編譯成可執行的程式，各自呼叫一次 ReactDOM.createRoot()，掛進自己的容器。等於八個模組真的各自獨立開發、獨立除錯，一個模組出錯，其他七個照常運作。
架構
資料進來的路徑有兩條：上傳 CSV，或貼一段 Google 試算表連結（程式自動組成匯出網址，透過公開的 CORS 代理讀取）。兩條路都先經過一個自己寫的 CSV 解析器（處理 BOM、逗號／Tab 分隔、欄位錯位自動校正），再寫進全域的資料倉庫與 IndexedDB，重新整理、關機重開都留得住。每個模組也都能直接問 AI：將篩選後的資料包成一段角色扮演的 prompt（像是「請以 CHRO 的角度，對比台灣零售服務業與攝影服務業，提出 10 點關鍵洞察與 10 點行動計畫」），呼叫 Gemini API，將回傳的內容渲染成報告卡片。
八個模組是分開、一輪一輪跟 AI 對話生出來的，逐版存檔留下日期流水號當版本紀錄；每次要將新模組打包進主殼層，都會刻意下嚴格指令，只改這一個分頁、不動主框架與其他模組，避免 AI 在單一大檔案裡改東壞西。後期還寫了一個專門檢查資料夾正規化程度的客製化 Copilot agent，讓 AI 反過來稽核自己產出的資料結構。
這套系統，是後來在全曜財經資訊股份有限公司那套 HR Data Lake、MCP Server、OAuth 分權治理的前身。同一套判斷力，換了一套更嚴謹的技術棧。
心得
這個專案讓我從「用工具的人」，變成「做工具的人」。人資最稀缺的從來不是資料，是一個能將資料翻成決策的介面。而現在，一個懂組織的人資，自己就能將它蓋起來。
延伸：後來在全曜財經資訊股份有限公司，我將這套思路做成更完整的一整套系統：資料湖、招募 Agent、行政自動化，整理成一份HR × AI 作品集。