個人財務儀表板專案分享與設計筆記

現在網路上有非常多人在做記帳軟體，甚至希望能做成服務來賺錢。但我的思路是：為什麼大家都想做這個？本質原因是因為大家都有記帳的需求，而且每個人的需求都完全不一樣。

其實不需要想拿著來賺錢，而是從自己需求出發，做出一個符合自己的小工具。

在過去，要自己做出一套工具可能要深入研究前後端、資料庫與各種設定，肯定會花費大量時間；但現在有了 AI，可加速完成專案。這不僅是一個很好的練習專案，也是真正能解決自己生活痛點的實用工具。

先說結論：核心大綱速覽

🔗 相關連結與體驗

立即線上試用 (Live Demo)（免安裝，直接在瀏覽器試玩示範情境）
下載本機離線版 (GitHub Releases)（適合想存個人真實資產、重視 100% 隱私的人，單檔下載即可直接使用與魔改）
GitHub 開源專案倉庫（採 MIT 開源授權，歡迎給星星 Star 或提交建議）

這份大綱是我本次分享的核心脈絡：

思維降維：停止在瑣碎流水帳上耗損精力，改以定期資產淨值快照做宏觀盤點。
從自己的需求出發：不為商業化賺錢，純粹為了解決自身痛點，用 AI 快速做出專屬工具。
初始架構發散與收斂：手動輸入快照、帳戶增刪、股票連動考量，到最後決定純前端與本機儲存的取捨過程。
真實造輪歷程：不寫繁瑣規格書，直接請 AI 產出原型；在手動測試炸裂後，才建立測試防護網。
程式流程與 AI 的角色：程式碼由 AI 產出，但懂基本流程（高中 ZeroJudge 底子）會讓 AI 成為放大器。
工具選型（Google 生態與 Antigravity）：日常用 Gemini、Spark、Health Coach 減少瑣事；寫程式時善用 Antigravity 的工作區視野與測試閉環。
動手改裝的實用思路：直接看前端樣式符不符合需求、操作有沒有 bug，用 AI 提示詞快速擴充功能。
評估自動化的真實效益：參考 xkcd 1205 圖表，判斷什麼事情才值得自動化，避免為省 5 分鐘反而耗費過多時間。

[xkcd 1205: Is It Worth the Time?](https://xkcd.com/1205/)

一、為什麼想做這個小工具：商業 App 與試算表的痛點

回顧我自己管理財務的經歷，主要經歷了兩種方案的情形：

1. 商業記帳 App 的限制與隱私疑慮

市售商業軟體為了賺錢與迎合大眾，通常會把大家框在固定模式裡：

流水帳繁瑣：每一筆咖啡、便當都要掏手機分類，消耗專注力，但對整體資產配置與抗風險能力幫助有限。
功能缺乏彈性與隱私問題：數據放在別人的雲端伺服器上，還會看到不相干的資訊；偏偏它很難靈活支援你特定的海外券商、雙幣匯率換算或冷錢包資產。

2. 試算表（Excel / Google Sheets）維護麻煩

後來我自己改用試算表，雖然彈性變大，但當資產橫跨台幣活存、美金定存、台股與美股時，公式越疊越複雜，跨表引用很容易跑版；如果不小心改錯一個儲存格，整張報表靜默出錯，沒有直覺的防呆。

3. 我的設計目標：為什麼系統長成這樣？

基於這些痛點，我訂出了幾項很明確的原則：

要有自主彈性：我可以隨時自由增刪帳戶（多個券商、多個銀行帳戶、活存定存、保險…等等），完全貼合個人現狀。
堅持資料自主性（不與 AI 直接串接隱私）：我很在意個人隱私，財務數字不應該隨便傳給外部雲端。因此這套工具刻意不將看板資料直接與 AI 雲端串接，數據完整保存瀏覽器本機的 LocalStorage。
手動定期輸入，養成對帳的好習慣：我不追求全自動爬蟲抓帳，而是選擇每個月或每季手動輸入一次快照。親自登入各家銀行與券商核對數字，能強迫自己正視真實資產現狀，養成清楚掌握帳目的習慣。（附註：如果有需要，自己接 MCP 或是 API 也是可行的擴充方向）
零後端單頁執行：只有一個 dashboard.html，雙擊點開就能用，不需架設伺服器與資料庫。

二、初始架設想法與結構圖：先發散再收斂

在動手做這個專案時，我的思考方式是：先發散思考所有可能的需求，接著評估複雜度做取捨，最後收斂出真正需要的規格。

【第一步：需求發散思考】
  ├─ 資產快照輸入：每次手動記錄各帳戶結餘，而且帳戶要能隨時自由增刪
  ├─ 股票投資紀錄：要不要記錄個股買賣？買賣時要不要自動跟現金帳戶餘額做連動？
  ├─ 資料儲存方式：直接存在前端瀏覽器 LocalStorage？還是存成本地 CSV / JSON 檔？還是架資料庫？
  └─ 隱私與展示考量：如果想分享給朋友或螢幕展示，如何不把真實銀行存款與淨值攤給別人看？
          │
          ▼
【第二步：收斂需求與做取捨】
  ├─ 捨棄複雜連動：股票先只做基本部位與損益計算，不跟現金做複雜雙向扣款，避免系統過於臃腫
  ├─ 捨棄後端資料庫：採用純前端單頁 (Zero-Backend SPA) + LocalStorage 本機儲存，極致輕量且安全
  ├─ 加入備份機制：支援相容 Excel 的 CSV 與 JSON 匯出匯入，資料完全掌握在自己電腦裡
  └─ 設計脫敏防護：加入 🎲 隨機情境骰子，展示時一鍵載入虛構數據，公開分享完全不尷尬
          │
          ▼
【第三步：最終系統結構】
  [ dashboard.html ] ──> 單一檔案，雙擊即開
    ├─ 帳戶管理 (增刪活存、美金、台股券商、美股券商)
    ├─ 快照輸入 (手動填入結餘、USD/TWD 即時匯率折算)
    ├─ 圖表呈現 (資產分佈圓餅圖、歷史淨值走勢圖)
    └─ 🎲 隨機情境骰子 (一鍵混淆數據，安全分享展示)

先發散再收斂，看清自己真正要的是什麼再下規格，能避免一開始就做出過度複雜、最後自己也不想維護的怪獸。

三、從零開始造輪子的實際過程

有了收斂後的需求，實際做出來的過程大致是這樣的：

1. 直球對決快速產出原型

很多教科書會說要先寫好嚴謹的規格書或資料結構，但我其實只有粗淺的草稿，並直接把痛點與需求告訴 AI——說明我有哪幾間銀行與券商、需要支援台幣與美元換算、希望能在單一 HTML 檔案中呈現走勢圖。AI 很快就幫我產出了一個可運作的原型。

2. 在實際操作中看樣式與修整

拿到原型後，我直接看前端呈現的樣式符不符合我的需求。一邊實際輸入幾筆數據測試操作，一邊看介面順手程度、有沒有 bug、是否滿足自己使用習慣。

3. 手動測試炸裂後的反脆弱測試

專案裡的測試，是在早期手動測試時炸裂後修正出來的。每次請 AI 改一個小功能或調整圖表，手動一測才發現另一個帳戶的金額或匯率折算莫名其妙壞掉，反而花費精力修正。這讓我意識到，沒有自動化防護是不行的，於是我額外請 AI 建立一套純原生 Node.js 的功能性測試與壓力測試，每次改完代碼必須全數跑通，才解決了改壞東西的問題。

4. 擴充實用模組與系統化延伸

骨幹穩定後，我陸續加入了 隨機情境骰子以及 Gemini 策略診斷模組。

這種自己做小工具的思路也延伸到了我的其他生活系統。例如我近期也用類似的方式做了每日新聞電子報，每天自動摘要資訊並排程發信。不管是財務看板還是電子報，核心想法都是一樣的：把重複且消耗精力的瑣事交給自己做的小系統，把專注力留給真正重要的事。

四、程式流程與 AI 的角色：AI 是一款放大器

在 AI 時代，程式碼由 AI 代工產出，但使用者最好還是要對程式的基本流程與邏輯有一點概念。

回想起來，我從高中時期就開始碰 ZeroJudge（台灣早期給高中生的 LeetCode），解過一些基礎演算法題目。這段經歷給了我一些程式底子與流程直覺，在今天與 AI 協作時幫了我很大的忙。

AI 其實是一款放大器。 如果對系統流程、輸入與輸出有基本概念，AI 就能幫忙放大生產力；反之，若完全沒有流程思維，就很容易被 AI 牽著鼻子走。點子與流程，永遠是整個系統最核心的東西。

五、工具箱：為什麼我選擇 Google Antigravity？

這個財務看板專案，只是我平常大量使用 Google Antigravity (AGY) 的其中一項任務。

在日常生活中，我也大量使用 Google 的其他 AI 產品（例如 Gemini Advanced / Workspace、Spark、Health Coach 等等）來幫忙減少雜務時間、定期提醒該做的事情與整合資訊。

而在寫程式這塊，為什麼我會選 Antigravity？平鋪直敘來說，它的好處很實在：

具備整個專案工作區的視野：它能直接看整個專案資料夾的所有檔案，跨檔案修改與排查依賴很方便，不需要自己手動複製貼上。
規劃模式（Planning Mode）：面對重大改動時，它會先列出實施計畫，把改動理由與步驟想清楚再動手，比較不會隨便改壞其他代碼。
自動跑測試與排錯閉環：寫完代碼後它會主動在終端機執行測試，測不過會自己看錯誤訊息回頭修復，直到綠燈通過。
上下文容量大：能穩定處理單頁幾千行的前端代碼，不會改到後面忘了前面的定義。

當然它也有缺點：

如果自己腦中沒有想清楚流程與架構，代理人探索時容易迷航。
如果只是隨手改一兩行 CSS 或錯字，開完整的代理人流程會偏重。
每輪思考與工具調用比較耗時，Token 消耗也較大。

六、動手改裝的實用建議與 Prompt 範本

如果你想以這個開源專案為基底幫自己改裝，做法其實很簡單：不需要去硬讀複雜的規格，直接看前端給的樣式符不符合自己的需求，然後在操作時看看有沒有 bug、是否完善了自己的需求就好。

這裡提供 3 組實用的 Prompt 範本，你可以直接附上 dashboard.html 丟給 AI 進行改造：

🛠️ 範本 1：新增專屬資產類別（例如加密貨幣或房產）

Prompt 範本：
我正在修改這份 dashboard.html 個人財務儀表板。我想在帳戶分類 category 中新增兩種類別：

crypto：加密貨幣，以 USD 或 USDT 計價。

real_estate：房地產估值，以 TWD 計價，並獨立顯示扣除房貸後的淨殘值。
請幫我修改前端程式碼，在帳戶管理介面補上選項與圖示，並讓首頁圓餅圖與淨值走勢圖能正確納入計算。

🛠️ 範本 2：客製專屬風格的 AI 財務顧問

Prompt 範本：
在這份 dashboard.html 中有整合 Gemini API 做財務總結。請幫我調整發送給模型的 System Prompt：
將角色改為務實的 FIRE（財務獨立、提早退休）顧問，根據我的最新淨值與歷史快照，試算距離 4% 提領率退休目標（以每年必要支出 60 萬新台幣為基準）還差多少資金與預估達標年限，並給出精簡的條列建議。

🛠️ 範本 3：多幣別與匯率換算拓展（例如加入日圓與歐元）

Prompt 範本：
目前此儀表板僅支援新台幣與美元。由於我有日本海外帳戶與歐元配置，請幫我擴充支援：

在快照中新增 jpy_rate（日圓兌台幣）與 eur_rate（歐元兌台幣）欄位。

當帳戶幣別為 JPY 或 EUR 時，自動依快照匯率折算為基準總淨值（TWD）。

在快照輸入表單補上匯率輸入框，並在圖表中支援切換不同基準幣別。

結語

總結來說，這個小專案就是純粹從我自己的需求出發，用 AI 當放大器快速做出來的工具。

🔗 相關連結與體驗

立即線上試用 (Live Demo)（免安裝，直接在瀏覽器試玩示範情境）
下載本機離線版 (GitHub Releases)（適合想存個人真實資產、重視 100% 隱私的人，單檔下載即可直接使用與魔改）
GitHub 開源專案倉庫（採 MIT 開源授權，歡迎給星星 Star 或提交建議）

大家有興趣可以自由參考。如果你的財務習慣跟我不一樣，其實也可以照著類似的思路——先發散思考、再收斂需求，用 AI 幫自己做出真正適合自己的專屬小工具。如果大家有任何反饋與願意協作，也很歡迎一起來玩！