個人 AI 理財管家工作坊

你是我的個人理財系統設計顧問。我正在建立一個屬於自己的「個人 AI 理財管家」網站。今晚只需要建立框架，不需要填寫任何真實金額。

以下是我的財務架構，請先完整記住：

【收入．兩類（ESBI 四象限）】
．主動式收入（E＋S）：工資收入、自僱收入（兼職／接案）
　　—— 停止工作，收入即停止。
．槓桿式收入（B＋I）：生意收入、公司分紅、股息收入、租金收入
　　—— 你抽身一個月，它仍然有收入。
※ 收入全站只使用「主動式收入」與「槓桿式收入」兩個名稱，不要新增任何其他收入分類。
※ 即使我目前尚未擁有的收入項目，也必須保留欄位並顯示為 0，不可隱藏。

【支出．12 類】
個人生活、住屋、交通及汽車、保險、醫療及養生、父母供養、子女、興趣及進修、旅遊、慈善捐獻、稅務、債務還款
※ 每一筆支出都要標明付款方式：信用卡 或 銀行／現金。
※ 公司開支不列入個人表；若我為公司墊支，記入「他人欠我的款項」。

【資產與負債】
銀行戶口、信用卡、股票及投資戶口、其他資產（物業）、他人欠我的款項
※ 負債部分：尚欠的樓宇按揭、私人貸款、稅務貸款，須另行記錄結餘，
　　用於計算淨資產。
※ 另有兩項「已經儲起、暫時動不了」的資產，同樣要記錄金額：
　　(1) 強積金戶口 —— 逐個受託人記錄現時結餘（轉過工的人通常有多個戶口）
　　(2) 儲蓄保單、年金及具現金價值的人壽保單 —— 記錄現時的「現金價值」，
　　　　而不是已供保費總額。

【保險】
醫療、意外、危疾、人壽、旅遊、汽車、家居、儲蓄保單及年金
※ 保險同時屬於支出與資產：每年保費是支出，具現金價值的保單則是資產。

【目標】
五年後的每月槓桿式收入、達成財務自由所需的每月槓桿式收入、
目前每月總支出、目前每月槓桿式收入。
※ 兩個目標數字預設為 60,000，我可以在設定頁自行修改。

現在請你閱讀我在下方提供的個人資料，整理成一份清晰的財務架構清單。
請不要自行假設，也不要開始設計網站。

【回應規則】
．只回應一次，不要連續追問。
．我留空的欄位，一律當作「尚未擁有」處理，保留欄位並顯示為 0，不要追問金額。
．整理完成之後，請在最後一行明確寫出：「資料收集完畢」。
．今晚只建立框架，任何真實金額都會由我回家自己輸入 —— 不要向我索取金額。

我的個人資料如下：

姓名：
銀行戶口：　　個
信用卡：　　張
股票戶口：　　個
強積金戶口：　　個
我的收入來源：工資／自僱／生意分紅／股息／租金　（刪走沒有的）
我已有的保險：醫療／意外／危疾／人壽／旅遊／汽車／家居／儲蓄保單　（刪走沒有的）
我的支出類別：個人生活／住屋／交通及汽車／保險／醫療及養生／父母供養／子女／興趣及進修／旅遊／慈善捐獻／稅務／債務還款　（刪走沒有的。要加的，寫在最後）
財務自由目標：60000

多謝。我已經選定了網站的風格與版面。

這個網站底部只有三個分頁：① 首頁（看結果）② 記帳（輸入本月數字）
③ 設定（個人資料與備份）。請以這個結構為準，不要增加其他分頁。

請據此描述一次首頁的畫面：由上至下會看到什麼、每一區顯示什麼數據。
請控制在 300 字以內，用條列式，不要展開設計理念。

描述完之後，請在最後一行明確寫出：「首頁的畫面與數據配置已經確認完畢」，
然後停下來，不要提出任何「下一步」選項，等我下一個指示。

【選擇規則】
下面兩個區塊，我各自只保留一款，其餘一款我已經刪走。
如果你見到某一個區塊仍然留有兩款，請以排在前面那一款為準，
並在回覆的最後一行提醒我：「你的風格（或版面）留下了兩款，我用了第一款。」

我的選擇如下 —— 每個區塊只保留一款，其餘刪走：

【我的設計風格】

風格 1｜玻璃擬態　GLASSMORPHISM
採用 Glassmorphism 風格：深紫藍漸層背景，配紫、粉、藍三處彩色光暈；所有卡片為半透明白 rgba(255,255,255,0.13)，加 0.6px 半透明白邊與背景模糊 backdrop-filter: blur(12px)；文字全白，圓角 24px。

風格 2｜日式極簡　JAPANDI
採用 Japandi（日式極簡．侘寂）風格：米紙質底色 #F4F1E9，主要數字使用明朝體（serif）；不用卡片與外框，改以 0.5px 髮絲線分隔；留白大量，僅以一道朱紅 #A83A2E 豎線作為唯一重點色。

風格 3｜私人銀行　PRIVATE BANKING
採用 Private Banking 風格：純色深藏青背景 #0F1B2E，不用漸層與模糊效果；卡片以 1px 金色細邊 rgba(197,160,89,0.35) 框住，底色維持深藏青；所有數字使用等寬字體（tabular figures）並靠右對齊，如同銀行月結單；全站唯一重點色為金色 #C5A059，剋制、精準，予人專業與可信賴的觀感。

【我的版面配置】

版面 1｜主圖優先　HERO CHART
採用 Hero Chart 版面：首頁最上方為一個佔據主要視覺的圖表 —— 近六個月的堆疊柱狀圖，柱高等於當月總收入，下段深色為支出、上段為盈餘，讓人一眼看出支出縮小、盈餘擴大。圖表下方才以較小的卡片顯示本月收入與本月支出。

版面 2｜指標儀表板　KPI DASHBOARD
採用 KPI Dashboard 版面：首頁上方為財務自由度的圓環圖（donut gauge）並列出金額，下方為三條迷你走勢線（sparkline）分別呈現收入、支出、盈餘近六個月的變化，每條右側標示增減百分比。

版面 3｜數字卡陣　STAT GRID
採用 Stat Grid 版面：首頁上方為 2×2 大字型數字卡格：財務自由度、淨資產、本月收入、本月支出，每格附上與上月比較的小箭嘴；不設圓環圖或走勢圖在最頂，圖表移至卡陣下方，讓最重要的四個數字一眼看清，捲動速度最快。

非常好。現在請你根據我們上面的全部對話，撰寫一份《網站建置規格書》。

這份規格書會交給另一個 AI 閱讀，它完全沒有看過我們的對話。
因此規格書必須自我完整：凡是我上面提供過的資料，都要寫進去。

【嚴禁】
．不要複製、不要重述我這一段訊息本身。
．不要把「嚴禁」「輸出格式」「規格書分七節」這些對你講的說話寫進規格書。
．code block 以外，不要輸出任何文字、標題或說明。
．不可省略、不可摘要、不可用「（略）」「同上」「如前所述」代替內容。
．不要問我要不要繼續 —— 一次過輸出完整規格書。

【輸出格式】
整份規格書放在【一個 code block】之內。
第一行必須一字不改地寫出下面這一句：

請根據以下規格，為我建立一個個人理財管理網頁應用程式，完成後直接部署，並提供一條可以在手機瀏覽器開啟的網址。請不要向我提問，直接開始建置。

【規格書分為七節，請逐節撰寫】

〇、這個工具是什麼
　　照抄下面這一段，一字不改：
　　「這是我自用的每月理財記錄工具，用來手動記錄自己每個月的收支與資產。
　　　純本機運作：所有數字只儲存在我自己手機的瀏覽器內；不設登入、不設註冊、
　　　沒有伺服器、沒有資料庫；不連接任何銀行或外部服務，也不會傳送任何資料出去；
　　　不收集任何他人的資料；所有數字由我自己逐項手動輸入。」

一、使用者資料
　　把我在對話開始時提供的個人資料逐項寫出：姓名、銀行戶口數目、
　　信用卡數目、股票戶口數目、強積金戶口數目、我的收入來源、
　　我已有的保險、支出類別的增刪、財務自由目標。

二、財務架構
　　兩類收入、支出類別（按第一節增刪後的實際名單）、資產與負債、保險，
　　照我上面所述完整列出。

三、設計風格
　　把我提供的那一整段原文照抄，色碼一個不漏。

四、版面配置
　　把我提供的那一整段原文照抄，英文模式名保留。

五、技術規格
　　把下面第 1 至 33 條原文寫入規格書，不可刪減、不可摘要、不可改寫。
　　只有以下三處必須按我的實際情況改寫，不可留下範本字樣：
　　　(a) 第 5 條與第 33 條中的「〇〇〇」，直接換成我的名字或暱稱。
　　　(b) 第 9 條「12 類支出」，按我在第一節指定的增刪後，寫出實際數目
　　　　　與完整類別名單。
　　　(c) 第二節的支出清單，同樣只列出增刪後仍然保留的類別；
　　　　　已刪除的類別不要寫進去，也不要加註。

六、驗收清單
　　用一句一項，列出完成後必須做到的事，方便我逐項檢查。

以下是第五節的內容，請原文寫入規格書：

【基本】
1. 純前端網頁應用程式，手機優先設計。
2. 所有數據使用瀏覽器 localStorage 儲存，逐月累積，不需要登入、
   不需要伺服器、不連接任何外部服務。
3. 首次開啟時預載「近六個月」的合理示範數據，讓所有圖表都有內容可看；
   並在設定頁提供「清空所有示範數據」按鈕。
4. 提供「匯出備份」按鈕可將全部數據匯出為檔案，並提供「匯入備份」還原。
   另設「匯出 CSV」按鈕，把每個月的收入、支出、資產、保險數據匯出為
   一個可以用 Excel 或 Numbers 直接開啟的表格檔（UTF-8 with BOM，
   確保中文不會變成亂碼），第一行為欄位名稱，每個月一行。
5. 必須包含 web app manifest 與應用程式圖示，display 設為 standalone，
   並加入 apple-touch-icon 及 apple-mobile-web-app-capable，
   使我加到手機主畫面之後，能以獨立視窗開啟、不顯示瀏覽器網址列，
   圖示名稱為「〇〇〇的理財管家」。這一點非常重要，請務必實作。

【三個分頁．App 結構】
6. 網站底部只設三個分頁按鈕，不要更多：
   ① 首頁 —— 財務自由度圓環、近六個月走勢圖、本月收入與支出、
   　　　　　支出分類佔比、淨資產、每月文字總結。
   　　　　　全部放在同一頁，向下滑即可看完。
   ② 記帳 —— 逐項輸入本月數字
   ③ 設定 —— 必須真正可用，不可只是列表佔位：
   　　　　　．個人資料與網站標題
   　　　　　．我的目標
   　　　　　．支出類別：可新增、可刪除、可改名
   　　　　　．信用卡：可新增、可刪除，每張設發卡銀行、卡名、角色、結算日
   　　　　　．銀行戶口、投資戶口、強積金受託人、保險項目：同樣可新增可刪除
   　　　　　．匯出備份、匯出 CSV、匯入備份、清空示範數據
   　　　　　※ 以上任何增刪，必須即時反映到記帳頁的輸入欄。
   ※ 不要另設「趨勢」分頁 —— 走勢就是這個網站的主角，應該直接放在首頁。
7. 首頁最上方（標題之下）必須有一個醒目的大按鈕「＋ 輸入本月數字」，
   按下直接跳到記帳頁。底部分頁與這個大按鈕，兩條路都要通。
8. 記帳頁最頂必須有一個「月份選擇器」，例如「2026 年 7 月　◀ ▶」，
   預設為當月，可以左右切換到任何一個月份（包括補回過去的月份）。
   選定月份之後，下方所有輸入欄顯示的就是該月份的數據；
   已有紀錄的月份，欄位要自動載入舊數字讓我直接修改，不可清空重來。
   月份標題旁邊要標示該月是「未記錄」還是「已記錄」。
9. 記帳頁分為四個分段，以頂部切換：
   ① 收入 —— 主動式與槓桿式兩類的各個項目
   ② 支出 —— 最頂先設「本月信用卡還款」區，逐張卡一行，
   　　　　　顯示「發卡銀行 ＋ 卡名 ＋ 角色」，各自輸入本月還款金額，
   　　　　　自動加總為「信用卡還款總額」（此數與月結單完全對應）。
   　　　　　其下才是 12 類支出，每項可選付款方式；
   　　　　　選了「信用卡」的類別，可再選「主要付款卡片」。
   ③ 資產 —— 銀行戶口結餘、投資戶口市值、他人欠我的款項、負債，
   　　　　　另設「強積金結餘」（逐個受託人）與「保單現金價值」兩欄
   ④ 保險 —— 逐張保單記錄：類別、保障額、每年保費、是否具現金價值
   ※ 第 ③ ④ 兩段的數字通常一年才改一次，請預設收起，按一下才展開。
    ※ 所有清單（銀行戶口、信用卡、投資戶口、強積金、保險）的行數，
    　 依第一節「使用者資料」的數目自動建立，內容預設留空，
    　 並且全部可以隨時新增或刪除 —— 我會回家慢慢填。
10. 記帳頁內切換「銀行／現金」與「信用卡」等付款方式按鈕、或展開／收起
    「資產」與「保險」段落時，畫面不可跳回頂部，必須保留使用者原本的
    捲動位置，只有切換分頁、月份或段落時才需要捲回頂部。
11. 記帳頁的每一個輸入欄，下方要以灰色小字顯示「上月 X,XXX」作參考，
    並提供一個「沿用上月數字」按鈕，一按即把上一個月所有數字填入，
    我只需要修改有變動的幾項。固定支出每月不用重複輸入。
12. 所有數字輸入欄位，預設狀態下必須留空，不要顯示「0」作為預設值或
    佔位文字；只有在使用者實際輸入數字，或按下「沿用上月數字」之後，
    欄位才會出現數字。
13. 記帳頁底部有一個大按鈕「儲存這個月」，按下即寫入目前選定的月份，
    並顯示「已儲存 2026 年 7 月」的確認訊息，然後自動返回首頁。

【六個月趨勢．核心功能】
14. 每個月的數據獨立儲存，互不覆蓋。首頁頂部同樣要有月份切換，
    可以查看任何一個已記錄月份的數字；未記錄的月份顯示
    「這個月還沒有記錄 —— 按『＋ 輸入本月數字』開始」。
15. 首頁必須能夠一眼看到「近六個月」的變化，並且至少包含：
    (a) 近六個月的收入、支出、盈餘走勢圖；
    (b) 每一項的「較上月增減」與「六個月首尾增減」百分比；
    (c) 增加以綠色向上箭嘴、減少以紅色向下箭嘴標示，
        其中支出減少應視為正面，同樣以綠色顯示。
16. 另外提供六個月的平均收入、平均支出與累積盈餘。
17. 每一個圖表都必須有清楚的月份標籤與數字標籤，不可只有顏色。

【三種「看似出錯、其實正常」的狀況．必須處理】
18. 按下「清空所有示範數據」之後，首頁不可以只剩下空白圖表。
    必須顯示引導文字：「還沒有數據 —— 按下方『記帳』，輸入你的第一個月。」
    並附一個直接跳到記帳頁的按鈕。
19. 當已記錄的月份少於六個月時，走勢圖只顯示已有的月份，
    並在下方以小字提示：「再記錄 X 個月，就能看到完整走勢。」
    不可以顯示空白格或 0 值，那會讓圖表看起來像壞了。
20. 首頁支出區必須顯示一行對照，說明兩個數字為何不同：
    　「信用卡分類合計 $X ．本月還款 $Y ．差額 $Z」
    並在旁邊以小字註明：「兩者毋須相等 —— 本月還款是上月簽賬，正常會有差額。」
    絕對不可把這個差額當成錯誤、不可顯示紅色警告、不可阻止我儲存。

【計算邏輯】
21. 每筆支出必須標明付款方式（信用卡／銀行或現金）。每月總支出的計算為：
    　總支出 ＝ 銀行或現金直接支出 ＋ 信用卡還款總額
    以信用卡支付的明細只用於分類分析，絕對不可重複計入總支出。
    介面上仍須完整顯示各類支出的總數及明細。
22. 財務自由度的主指標，分母使用「近六個月平均總支出」，而不是當月支出：
    　財務自由度 ＝ 本月槓桿式收入 ÷ 近六個月平均總支出 × 100%
    原因：單月一筆大額支出（例如買家電、交稅）會令當月比率突然失真，
    而財務自由是一個長期狀態。若記錄不足六個月，就用已有月份的平均。
    圓環旁邊另以小字顯示「本月：XX%」作對照，並標示是否已達成財務自由。
23. 資產負債總結，淨資產的計算必須完整包含下列各項：
    　淨資產 ＝ 戶口現金 ＋ 投資戶口市值 ＋ 強積金結餘
    　　　　　 ＋ 保單現金價值 ＋ 他人欠我的款項 － 負債
    資產頁並須分為「可動用資產」與「暫時未可動用資產」（強積金、保單現金價值）
    兩組分別顯示小計，讓我清楚知道哪些錢現在拿得到、哪些拿不到。

【我的目標】
24. 設定頁必須有「我的目標」一區，可輸入並儲存：
    　(a) 五年後的每月槓桿式收入目標
    　(b) 達成財務自由所需的每月槓桿式收入
    首頁的財務自由度圓環下方，另以一行小字顯示目標線：
    　「目標：每月 $X 槓桿式收入．目前 $Y．還差 $Z」
    尚未填寫時顯示「尚未設定目標 —— 到設定頁填寫」，不可留空白。

【收入與信用卡】
25. 收入分為兩類並以不同顏色標示：主動式（E＋S）、槓桿式（B＋I）。
    即使金額為 0 的項目亦必須顯示，不可隱藏。
26. 信用卡以「發卡銀行 ＋ 卡名 ＋ 角色」顯示，每張可設定每月結算日，
    首頁顯示距離結算日的倒數提醒。不設卡號欄位。
    設定頁的信用卡清單，請預先示範以下五種寫法，讓我照樣填：
    　．恒生銀行 · enJoy 卡 · 日常超市與網購
    　．DBS 銀行 · Live Fresh 卡 · 每月水費、電費、煤氣、寬頻自動轉賬
    　．中國銀行 · 銀聯雙幣卡 · 旅遊與外幣簽賬
    　．渣打銀行 · Simply Cash 卡 · 保險與稅款
    　．滙豐銀行 · Red 卡 · 子女學費與興趣班
    ※ 自動繳費用的那一張，角色欄要標明，方便我一眼看出哪一張不能停。

【每月文字總結．讓它像一個管家】
27. 首頁底部要有一段自動生成的文字總結（純前端計算，不需連接任何 AI 服務）。
    內容規則：比較本月與上月，指出最重要的三項變化，並以正面、具體的語氣
    寫成兩三句話。例如：
    「七月：你的總支出比上月減少 5.6%，槓桿式收入增加 600，
    　財務自由度由 32% 上升至 36%。
    　按這個速度，再過約 28 個月，你的槓桿式收入就能覆蓋全部支出。」
28. 若本月槓桿式收入已大於總支出，改為顯示：
    「本月你已達成財務自由 —— 你的槓桿式收入足以覆蓋全部支出。」
29. 不要說教、不要指責。支出增加時寫「本月支出較高，主要來自（該類別名稱）」，
    而不是「你花太多了」。

【底部安全區域．必須預留空間】
30. 底部分頁列必須加上足夠的底部內距（padding-bottom，另加
    env(safe-area-inset-bottom)），確保在有 Home Indicator 的手機
    （例如 iPhone）上，三個分頁按鈕的圖示、文字與可點擊範圍不會被
    系統手勢列遮擋或誤觸。頁面內容的底部亦須預留同等空白，確保向下
    捲到底時最後一張卡片不會被分頁列蓋住。若部署平台會在畫面底部
    自動疊加任何浮動標記，也請用同樣方式預留空間，避免遮擋分頁列。

【其他】
31. 全站使用繁體中文，字體偏大、清晰易讀，按鈕大而明確，
    適合在手機上單手操作。
32. 不要要求我註冊、不設任何登入、不要收集任何個人資料。
    信用卡只以「發卡銀行 ＋ 卡名 ＋ 角色」識別，不設卡號或任何號碼輸入欄位。
33. 網站標題使用我的名字或暱稱，例如「〇〇〇的 AI 理財管家」。

請完全按照我剛才上傳的檔案內的規格書，建立並直接部署這個網頁應用程式，完成後給我一條可以在手機瀏覽器開啟的網址。不要向我提問，直接開始建置。

請一次過為我修改下列各項，改完之後直接輸出完整版本並重新部署。
除下列各項以外，其餘部分請完全保持不變，亦不要向我提問。

我要修改的地方：

你剛才輸出的是我給你的指示，並不是規格書。請重新輸出一次。

要求：
．只輸出一個 code block，code block 以外一個字都不要。
．第一行必須是：請根據以下規格，為我建立一個個人理財管理網頁應用程式，完成後直接部署，並提供一條可以在手機瀏覽器開啟的網址。請不要向我提問，直接開始建置。
．接著依照〇至六節撰寫。
．第一節要填入我先前提供的個人資料，不要留空、不要寫「〇〇〇」。
．第三、四節要照抄我選定的設計風格與版面配置原文，連色碼與英文名。
．第五節要包含完整 33 條技術規格。
．不要重述我的指示，不要出現「嚴禁」「輸出格式」這些字眼。