進行中

Audio-Account

對手機講一句話,AI 把裡面的幾筆消費拆成品項、金額與分類的草稿,我確認後才記進帳本。我自己每天在用的語音記帳 App。

  • TypeScript
  • React
  • PWA
  • Fastify
  • Zod
  • Gemini API
  • Firestore
  • Cloud Run
  • GitHub Actions
Audio-Account 的三個手機畫面:首頁的本月花費與各主分類預算進度、錄音中的錄音頁、一段語音拆出的多筆消費草稿

Audio-Account 是我做給自己用的語音記帳 App。拿起手機把消費說出來,LLM 就會把其中的幾筆帳拆成品項、金額、分類與日期的草稿,我檢查、確認之後才記進帳本。它已經上線,取代了我以前用的記帳 App,現在每天都用它記帳。

在自己動手做之前,我一直在用「簡單記帳」這款 App。我對記帳功能沒有太複雜的要求,它簡單的介面與流程已經足夠。但即便操作已經很精簡,我還是常常遇到一個痛點:每次想起來要記帳時,往往已經累積了一整天的消費,甚至還得補記昨天的帳。這時就得在介面上反覆點選、切換日期、挑分類——對我來說,每次記帳的「摩擦力」還是太大了。

這讓我開始想自己做一款記帳工具。另一方面,工作兩年來,我實際走過了從使用者需求、與 PM 討論功能,到前端設計稿與後端實作的完整流程,也開始想體驗一個人同時兼任 PM、開發者、使用者,甚至 UI 設計師,從頭規劃一款產品的感覺。在 AI Agent 與各種設計工具的輔助下,這個專案就這樣誕生了。

講一句話,一次完成多筆記帳

這個專案的核心目標是降低記帳的摩擦力,App 的功能都圍繞著這件事展開。我從自己的使用習慣出發,設計每個功能時也會想:一般使用者會不會也覺得它「好用」?

至於最重要的問題:怎麼讓記帳的流程變簡單,省去在傳統 App 上反覆點擊?我的解法是多模態 LLM。

從手機桌面的 PWA 捷徑點進來,或直接在 App 按下主畫面的按鈕,就能馬上開口向 AI 描述消費內容。一段話裡可以同時講好幾筆帳,跨日的消費或個人的慣用語也能順口帶過。這正好符合我的習慣:不會在消費當下記帳,而是想起來才一口氣補記。

錄音頁:錄音中的計時、最長 45 秒的進度條與聲音波形 草稿頁:一段語音拆出三筆帳目,補記的那一筆日期是前一天

以上面的截圖為例,我講了今天的午餐、跑步前買的能量果凍,再順便補記昨天的午餐便當,AI 就拆成了三筆草稿;「昨天」那一筆的日期也自動記在前一天。

AI 給的是草稿,經過確認後才記進帳本

雖然 LLM 已經很聰明,能從口述中抓出金額、日期、分類與品項,但在記帳這件事或者說這類需求上,正確性還是凌駕於方便性之上。所以還是需要一道由人複核的關卡,必要時可以直接在畫面上修改;同時 App 也提供 AI 寫下的逐字稿,讓我對帳目有疑問時可以重聽原始錄音、對照逐字稿,分辨是自己沒講清楚,還是 AI 聽錯了。

「模型聽到的內容」對話框:原始錄音的播放器與 AI 寫下的逐字稿

會加上逐字稿,其實是為了解決早期 AI 偶爾會在帳目裡多出我沒講過的品項與金額的問題。如果直接要 AI 交出一串帳目,就沒有任何東西能拿來對照它是不是在亂補。因此我改成讓 LLM 先產出逐字稿,再根據這份逐字稿整理出帳目(透過 Gemini Structured Output 明確定義欄位的生成順序)。

另外,解析失敗時可以用同一段錄音重試,或改成手動輸入。確認按鈕透過冪等鍵避免手滑連按或網路不穩重送:同一筆確認無論送出幾次,都只會寫入一次。

讓 AI 參考我平常怎麼記帳

能用口說快速記帳之後,下一個問題是那些「只有自己才懂」的慣用語或固定消費。為了讓 AI 聽懂這些說法、讓記帳流程更順暢(更少手動介入),我加入了「歷史上下文理解」的設計。

舉個實際的例子:我每週至少會有一次午餐吃公司附近的すき家(Sukiya),每次點的都是固定的套餐,接著再去超商買茶葉蛋。如果記帳時只要說一句「中午吃 Sukiya 和茶葉蛋」,就能讓 LLM 自動帶入對應的品項與金額,那該有多好?

打開「歷史上下文理解」之後,LLM 就能參考最近一段時間的帳目,照我平常的習慣歸類,也聽得懂「跟昨天一樣」這種說法。同時它只拿歷史紀錄當參考,不會因此替我多加這次沒講到的項目。

至於負責解析的 AI 模型,目前以 Gemini 系列為主,可以在設定頁切換,主要是在「速度」與「理解力」之間做取捨;不過隨著 Gemini 新模型釋出,以我自己的使用體驗,Flash-Lite 已經能在維持足夠理解力的情況下,給出很快的反應速度了。

歷史上下文理解的設定頁:開關、參考範圍選近 30 天,以及運作機制與隱私的說明 語音解析模型的選擇頁:四個 Gemini 模型各自標示速度與智能的星等

首頁的花費統計與預算

作為一款記帳 App,基本的花費統計還是不可少。延續前面提到「自己兼任使用者與 PM」的角度,我把預算上限的視覺化做得更醒目,在首頁就能直觀看到每個主分類目前用掉的預算比例,提醒自己適時調整接下來的花費節奏。

首頁:今天與本月的花費,以及各主分類的預算長條,購物已超標 預算管理頁:替飲食、購物、交通、運動設定每月預算,其他分類未啟用

和大多數記帳 App 一樣,點進主分類後可以看到各子分類的占比與明細;除此之外,我自己很喜歡的一個設計是「消費熱力圖日曆」,用顏色深淺來表示每天的消費金額,在回顧整月開銷或查找特定日期的消費時特別好用。熱力圖日曆所在的歷史紀錄頁,也保留了傳統的手動記帳方式。

飲食分類明細:子分類占比的環圈圖與本月明細 歷史頁月曆:依每日花費深淺上色,下方列出選取日期的帳目

在設計分類系統時,我特別觀察了「簡單記帳」與「天天記帳」這類 App 在刪除自訂分類後,如何處理歷史紀錄裡的舊帳目。為了避免刪除自訂子分類後,過去的帳目變成「未分類」的孤兒,我採用了主、子分類兩層設計:當自訂的子分類被刪除時,舊帳目仍會歸屬在原本的主分類底下,確保主分類的統計數據依然正確。


回頭看這個專案,AI Agent 與各種設計工具,讓我更容易把設計上的靈感做成實際的介面。但對我來說最新鮮也最有價值的體驗,反而是同時以 PM、使用者與開發者的身分規劃產品:想清楚哪些功能真的需要、怎麼排優先順序,再一路實作出來的整個過程。

雖然目前這個 App 只有我自己在用,但在做功能取捨時,我還是會盡量站在一般使用者的角度去想:某個功能加進去之後,對實際的記帳體驗真的有幫助嗎?正因為現在有 AI 輔助,要把新功能做出來非常快,反而需要克制自己不要盲目堆疊功能,只留下真正能讓流程變順暢的設計。現在這個 App 已經穩定運作,成為我每天使用的記帳工具。