小蟲AI實戰 | 理財規劃專員 Vibe Coding 專班
這堂課要用到的東西

課程使用的所有工具，點擊前往直接使用

分析風格
Pinterest 找圖
視覺靈感與高質感參考圖庫
前往
Gemini版 YAML分析器
快速拆解圖片風格，產出提示詞框架
開啟 Gem
ChatGPT版 YAML分析器
小蟲的 YAML 大師 GPT，功能相同、平台任選
開啟 GPT
AI 桌面工具
Claude Code 桌面版（訂閱、登入 Claude 帳號）
本課主力——寫程式的首選，Windows 請先裝下面的 Git 再開專案
下載
Git（Windows 必裝）
Claude Code 在 Windows 開本機專案的前置需求——下載後一路「下一步」裝完即可
下載
Codex 桌面版（訂閱、登入 ChatGPT 帳號）
OpenAI 的 AI 工程師，用 ChatGPT 帳號直接登入
下載
Antigravity 桌面版（訂閱、登入 Gemini 帳號）
Gemini 3 加持的 AI 開發平台——Google 出品，個人免費
下載
🌐 英文頁面看不懂？Chrome 一鍵翻成中文
上面的下載頁都是英文，用 Chrome 開就能整頁翻譯：
① 單頁翻譯：在頁面空白處按右鍵 →「翻譯成中文（繁體）」，或點網址列右側的翻譯圖示。
② 一勞永逸：翻譯小視窗點右側「⋮」→ 勾「一律翻譯英文」，以後所有英文網頁自動變中文。
③ 手機版：頁面底部會跳出翻譯列，點「中文（繁體）」即可。
小提醒：翻譯只作用在「網頁」，裝好的軟體介面翻不到——不過沒關係，跟 AI 對話直接打中文，它就用中文回你。
② 風格分析YAML

用 Pinterest 找到你的視覺語言，再交給 AI 轉成可用的風格框架

為什麼要先找圖？

YAML 風格提示詞不是憑空想像的——它來自你「看到就喜歡」的視覺感受。
先去 Pinterest 找 3 張讓你心動的圖，再讓 AI 幫你拆解背後的設計語言，
才能寫出真正屬於你個人品牌的風格框架，而不是套用別人的模板。

選一種方法開始
兩種都可以，看你今天的狀態
方法一｜興趣牆
直覺選圖，讓 AI 找出共同風格
操作步驟
1打開 Pinterest，搜尋你想呈現的專業形象（例如：wealth management branding、financial advisor website、理財顧問名片）
2純靠直覺，找 3 張「看到就喜歡」的圖，不必分析原因
3截圖或存圖，帶進 YAML 分析器（Gemini 或 ChatGPT 版皆可），貼上這句話：
請個別放入 YAML 中，讓他幫你分析出視覺顏色的提示詞：跑出一段程式碼，有很多種顏色的就是了！
方法二｜色系歸納法
從顏色切入，找到你的視覺語言
操作步驟
1先選一個你想要的主色調，例如：深藍金融信任感、墨綠資產傳承感、米白暖金質感
2在 Pinterest 搜尋這個色系＋用途，例如：「navy gold wealth management」、「minimal financial planning design」
3找出 3 張色感最對的圖，截圖後貼入 YAML 分析，用這句話：
請個別放入 YAML 中，讓他幫你分析出視覺顏色的提示詞：跑出一段程式碼，有很多種顏色的就是了！
常用搜尋關鍵字參考
wealth management branding financial planning infographic navy gold wealth minimal financial advisor portfolio report layout
找完 3 張圖了？
請個別放入 YAML 中，讓他幫你分析出視覺顏色的提示詞：
跑出一段程式碼，有很多種顏色的就是了！
Gemini版 YAML分析器 ChatGPT版 YAML分析器
⓪ 理財從0開始

一個娃娃講懂家庭財務——從頭到腳，每個部位都是一個理財功能，點下去看細節

為什麼用娃娃？ 「資產配置」「風險轉移」這些詞，客戶第一次聽都是霧的。 把家庭財務畫成一個人：右手賺錢、左手花錢、心臟存錢、雙腳投資、披風擋風雨、腦袋做決定—— 順序、比例、缺了哪塊，一眼就看懂。這就是第 0 課：先看懂全身，再談任何商品。
披風｜避險 雙腳｜投資 心臟｜儲蓄 $ 右手｜收入 $ ＋ 左手｜支出 － 頭｜理財腦 💡
🗣️ 面談時怎麼用這個娃娃
1讓客戶先點——「你最想先聊哪個部位？」客戶點哪裡，就從哪裡開始，那是他現在最痛的地方。
2再帶一輪正確順序——頭（觀念）→ 心臟（先蓄水）→ 披風（先防護）→ 雙腳（再邁步）。多數人想直接談腳，你的價值就是把順序擺回來。
3收尾一句話——右手減左手＝儲蓄率，這個數字決定娃娃走多快；披風有沒有穿，決定跌倒時會不會前功盡棄。
理財娃娃 全身總表
六個部位 × 功能 × 細項——給客戶帶回家的版本，可直接列印
本頁為理財觀念教學架構，細項因家庭狀況增減；不構成投資建議，商品規劃請洽你的理財顧問
想做一個自己的理財娃娃？
這一頁本身就是課堂示範——複製 Prompt 貼給 Claude，
換成你的配色、你的話術，就是你的第 0 課教具。
① 理財顧問應揭露資訊

AI 做的每個對外作品，頁尾都要帶上這一塊——金融從業人員的合規門面

為什麼第一堂課先講這個？

AI 產出的網頁預設不會幫你放證照資訊與所屬機構。
沒有揭露的試算工具，客戶看起來就是「來路不明的網頁」；帶了完整揭露，同一個工具立刻變成你的專業名片。
金融商品相關內容還牽涉主管機關與所屬公司的廣告規範——先把這塊做好、教給 AI，之後每個作品自動合規。

對外作品應揭露的六件事
🏢 所屬機構全名
銀行、保經代、投顧公司或個人工作室，寫完整全名
👤 姓名＋職稱
理財規劃顧問／財富管理專員／保險理財顧問，寫清楚
📜 專業證照
CFP®／AFP、理財規劃人員、投信投顧、人身保險業務員等
🏛️ 登錄字號／會員編號
保險業務員登錄字號，或所屬公會、認證機構編號
📍 地址與聯絡方式
辦公室地址、電話，讓客戶查得到人
⚠️ 免責聲明
試算類工具必附：僅供參考、不構成投資建議；投資一定有風險
⚡
揭露區塊產生器
填一次，直接產出「頁尾揭露文字」與「交給 AI 的指令」
身分別
所屬機構全名
姓名
專業證照
登錄字號／會員編號
辦公室地址
電話
Email 或官方 LINE（選填）
預覽（就是之後每個網頁頁尾長的樣子）：
（開始填寫，這裡會即時更新）
「交給 AI 的指令」＝揭露資訊＋一句規則：之後做任何對外網頁，頁尾自動加上這塊。貼進下方三個平台，設定一次終身受用。
用語紅線：金管會對金融商品的廣告與招攬有明確限制。 「保證獲利」「穩賺不賠」「保本保息」「絕對打敗定存」這類字眼一律不能出現在你的工具與文案裡—— AI 有時會自作聰明幫你加，看到就刪。實際規範以主管機關與所屬公司規定為準。
把揭露資訊教給三個 AI 平台
貼上剛剛複製的「交給 AI 的指令」，設定一次，之後 AI 幫你做的每個網頁、每份文件，頁尾自動帶上理財顧問揭露區塊。
1
登入 ChatGPT，點右上角大頭照 → 設定
在 chatgpt.com 登入後，點右上角頭像，選單展開後選「設定」。
2
設定 → 個人化 → 自訂指示
英文版路徑：Settings → Personalization → Custom instructions
3
在「你希望 ChatGPT 如何回應？」欄位貼入
你剛剛從產生器複製的「交給 AI 的指令」
4
儲存，每次新對話自動套用
之後請它做網頁，頁尾就會自動帶揭露區塊。
③ 常見用法

理財觀念、家庭財務分析、紙本問卷，變成客戶點開就能用的網頁——九個示範一次看

這一頁在示範什麼？ 下面九個網頁，全部改造自理財顧問手邊的簡報、Excel 和紙本問卷—— 講了一百遍的理財金字塔變成客戶自己會點的網頁、Excel 試算變成線上計算機、紙本健診問卷變成可以直接填寫列印的表單。 這就是本課要教你的事：你對客戶講的每一個觀念、做的每一張分析，都能變成這樣。
觀念型：理財架構上網
📐 架構圖
理財金字塔懶人包
保障、儲蓄、投資、機會，先後順序兩個 Q&A 講清楚
📋 速記表
理財觀念速記表
631、雙十、72、4%法則、緊急預備金，一頁查完
📈 對照表
複利效果對照表
定期定額 × 報酬率 × 年數完整對照＋輸入金額自動試算
分析型：Excel 試算上網
🧮 計算機
家庭財務健診計算機
儲蓄率＋緊急預備金＋雙十原則，三個健診一頁做完
🧮 示範表
家庭現金流量表
12 個月收支示範表，看懂「有收入不等於有結餘」
表單型：紙本問卷上網
📝 問卷
理財健診問卷
初次面談的家庭財務問卷，線上填、直接印
📝 報表
家庭資產負債表
填數字自動加總，淨值與負債比當場出來
📝 規劃單
理財目標規劃單
目標金額÷年限，每月該存多少當場算給客戶看
📝 盤點表
保單總整理表
全家保單一頁盤點，年繳保費自動加總對照雙十
理財金字塔懶人包

先蓋地基再蓋樓——保障、儲蓄、投資、機會的先後順序，兩個問題講完

理財金字塔
沃夫財務規劃顧問（課堂示範版）
頂層｜積極機會資金
個股、另類投資 · 約 0–10%
第三層｜長期投資增值
指數化投資、基金、定期定額 · 約 30–50%
第二層｜儲蓄與緊急預備金
活存、定存 3–6 個月生活費 · 約 20–30%
底層｜保障與風險轉移
壽險、醫療、意外、失能——守住不能倒的地基
Q1. 為什麼要從底層開始蓋，不能直接跳到投資？
A. 因為下層是在保護上層。沒有保障與預備金，一場意外或一次失業，就會被迫在最差的時間點賣掉投資：
沒蓋好地基會發生什麼後果
沒有醫療與失能保障，先重壓股票一場大病 → 認賠賣股付醫藥費，多年累積歸零
沒有 3–6 個月預備金，資金全在市場失業碰上股市下跌 → 在最低點被迫變現
先做保障與預備金，再長期投資遇到風險有底氣「不動投資」，複利才走得完
Q2. 手上有一筆閒錢，先還債、先存錢、還是先投資？
A. 依序檢查四關，過一關才進下一關：
順序檢查項目理由
1留足 3–6 個月生活費的緊急預備金這是所有規劃的安全氣囊，沒有它一切免談
2清償高利負債（卡循、信貸）年利率 10% 以上的債，還掉就是穩拿的報酬
3補足基本保障缺口用小錢把「賠不起的風險」轉移給保險公司
4剩下的錢再談長期投資走到這一步，投資才是加分題而不是賭注
備註
  1. 金字塔各層比例因年齡、家庭責任與風險承受度而異，數字是溝通起點不是鐵律。
  2. 房貸屬於低利長期負債，通常不必搶在投資之前提前清償，個案另議。
  3. 保障型保險以「保額足夠」為優先，預算有限時先用定期險把保額買足。
  4. 頂層機會資金請用「全部歸零也不影響生活」的錢，並設定上限。
  5. 每年至少檢視一次金字塔：加薪、結婚、生子、購屋都會改變各層的合理比例。
本頁內容僅供理財觀念溝通參考，不構成投資建議；商品規劃請洽你的理財顧問
改造自顧問簡報｜Vibe Coding 課堂示範
理財觀念速記表

631、雙十、72、4% 法則、緊急預備金、所得替代率，一頁查完

理財觀念速記表
沃夫財務規劃顧問（課堂示範版）
一、六大常用理財法則
法則內容用在哪
631 收支法則收入 60% 生活、30% 儲蓄投資、10% 保障第一次面談看收支結構健不健康
雙十原則保費 ≤ 年收入 10%、壽險保額 ≥ 年收入 10 倍快篩保費會不會排擠生活、保額夠不夠
72 法則72 ÷ 年報酬率 ≒ 資產翻倍所需年數跟客戶解釋報酬率差 1% 差多少年
4% 法則退休需求總額 ≒ 退休後年支出 × 25把「退休要多少錢」變成一個具體數字
緊急預備金保留 3–6 個月必要生活費在活存／定存所有投資規劃開始前的第一關
所得替代率 70%退休後月支出約為退休前月收入的 6–7 成估退休後每月要準備的生活費
二、緊急預備金速查表
每月必要支出3 個月（下限）6 個月（建議）12 個月（單薪／自營）
30,00090,000180,000360,000
40,000120,000240,000480,000
50,000150,000300,000600,000
60,000180,000360,000720,000
80,000240,000480,000960,000
100,000300,000600,0001,200,000
三、72 法則：資產翻倍要幾年
年報酬率翻倍年數
1%（活存定存）72 年
2%36 年
4%18 年
6%12 年
8%9 年
10%7.2 年
12%6 年
四、4% 法則：退休需求速查
退休後月支出年支出需求總額（×25）
30,000360,000900 萬
50,000600,0001,500 萬
70,000840,0002,100 萬
100,0001,200,0003,000 萬
五、雙十原則速查
家庭年收入年繳保費上限（10%）壽險保額參考（10 倍）
800,00080,000800 萬
1,000,000100,0001,000 萬
1,500,000150,0001,500 萬
2,000,000200,0002,000 萬
法則為通則，實際規劃依家庭責任、負債與風險承受度調整，數字僅供溝通參考
退休金額未計通膨與勞保勞退給付｜改造自顧問簡報速記頁
複利效果對照表

定期定額 × 報酬率 × 年數——輸入你的數字，終值自己跳出來

⚡ 複利快查
每月投入（元）
年報酬率（%）
投資年數
定期定額複利對照表（每月投入 10,000 元）
單位：萬元｜定期定額、月複利假設｜報酬率非保證，未計通膨與交易費用
說明
  1. 計算方式：每月月初投入固定金額，以年報酬率 ÷ 12 逐月複利滾存。
  2. 表中報酬率為「假設情境」，任何投資之實際報酬可能為正也可能為負，並非保證數字。
  3. 表格數字未計入通貨膨脹、手續費、稅負與匯率影響。
  4. 看表重點一：時間比金額更有力——同樣 6%，20 年到 30 年的差距遠大於前 10 年。
  5. 看表重點二：報酬率差 2%，30 年後差出一間房的頭期款——這就是資產配置要認真談的原因。
  6. 與其追逐短線報酬，不如拉長時間、紀律扣款——複利的本質是「待在場內的時間」。
本表僅供理財觀念溝通與教學參考，不構成投資建議或報酬保證
改造自顧問 Excel 試算表｜Vibe Coding 課堂示範
家庭財務健診計算機

儲蓄率＋緊急預備金＋雙十原則——面談時當場算給客戶看

💰 儲蓄率健診｜631 法則對照
參考結構：收入 60% 生活、30% 儲蓄投資、10% 保障
家庭月收入（元）
家庭月支出（元，不含儲蓄投資）
🛟 緊急預備金健診
標準：3–6 個月必要生活費；單薪或自營建議 6–12 個月
每月必要支出（元，房貸房租＋生活基本開銷）
目前活存＋定存（元）
☂️ 雙十原則保費檢查
保費 ≤ 年收入 10%、壽險保額 ≥ 年收入 10 倍
家庭年收入（元）
全家年繳保費總額（元）
主要經濟支柱壽險保額（萬元）
📖 健診指標怎麼看
  1. 儲蓄率低於 10%，先別談投資商品——問題在收支結構，從記帳與固定支出瘦身開始。
  2. 緊急預備金沒到 3 個月之前，任何「錢閒著很可惜」的說法都先擋掉，順序不能倒。
  3. 保費超過年收入 10%，常見原因是儲蓄型商品佔比過高、保障型保額反而不足——先分清楚「保障的錢」跟「儲蓄的錢」。
  4. 壽險保額看的是家庭責任：房貸餘額＋子女到成年的生活教育費＋喪葬預備，不是隨口一個整數。
  5. 三個健診都綠燈，才進入資產配置與目標規劃——這就是「先架構、後商品」的順序。
🗂️ 這頁的原型
原本是顧問面談用的 Excel 健診表：三個工作表、一堆公式，客戶只能看你操作。 搬上網之後，客戶自己輸入、當場看到紅黃綠燈——「一堆格子＋固定公式」的表單，正是最適合做成網頁工具的類型，回到 ④ 實作單元就做得出來。
健診結果僅供參考，實際規劃依個別家庭狀況評估，不構成投資建議｜改造自顧問 Excel 健診表
家庭現金流量表

12 個月收支示範表——看懂「有收入，為什麼月底沒錢」

先看重點：這個示範家庭年收入約 123 萬、全年其實存得下 18 萬—— 但 3 月繳保費、5 月繳稅、8 月全家旅遊，這三個月照樣透支。 這張表就是拿來跟客戶講「收入 ≠ 結餘，理財要用全年現金流看」的教具。
家庭現金流量表（示範數字）
單位：元｜灰底列＝公式自動計算｜紅字＝現金流出（負數）
公式邏輯（照搬 Excel）
  • 收入合計 ＝ 薪資收入 ＋ 獎金收入
  • 支出合計 ＝ 固定支出 ＋ 變動支出 ＋ 年度性支出
  • 本月結餘 ＝ 收入合計 − 支出合計；累積結餘 ＝ 上月累積 ＋ 本月結餘
  • 解法：年度性支出月提撥——每月固定轉一筆到「年度支出帳戶」，繳稅月就不會動到投資或刷卡分期
示範數字為虛構家庭，僅供現金流觀念教學使用｜原 Excel 另附空白工作表，課堂上請學員把自己家的數字套進去
理財健診問卷

初次面談的家庭財務問卷——線上填好，直接列印歸檔

理財健診問卷
填寫日期： 年 月 日
一、基本資料
姓名 年齡 歲
婚姻 子女數 人
職業 雙薪家庭
二、收支概況
家庭月收入約 元 家庭月支出約 元
每月結餘去向
（可複選）
三、資產與負債
目前持有資產
（可複選）
目前負債
（可複選）
四、保障現況
已投保險種
（可複選）
全家年繳保費 約 元　（不確定可留白，之後用保單總整理表盤點）
五、理財目標
關心的目標
（可複選）
最重要的一項 ，希望 年內達成
六、風險屬性快篩
投資虧損 15% 時，你會？
客戶簽名：＿＿＿＿＿＿＿＿ 顧問：＿＿＿＿＿＿＿＿ 下次面談：＿＿＿年＿＿月＿＿日
本問卷僅供理財規劃討論使用，內容涉及個人財務資料，請妥善保管、不得移作他用｜改造自顧問紙本問卷
家庭資產負債表

填數字自動加總——淨值與負債比，面談當場出來

家庭資產負債表
單位：元｜填入金額自動加總｜資料日期：
資產
現金與活存
定存
股票／ETF
基金
保單現金價值
房地產（市值）
其他
資產總計0
負債
房屋貸款餘額
車貸
信用貸款
信用卡循環
其他
負債總計0
填入金額後，這裡會顯示家庭淨值與負債比率
怎麼跟客戶看這張表
  1. 淨值才是家庭真正的身價——資產很多、負債也很多的家庭，抗風險能力可能比想像中脆弱。
  2. 負債比率超過 50% 要留意：升息、失業對這種結構的衝擊會被放大。
  3. 資產集中在單一房產或單一股票，是「表上看不到」的風險，健診時要口頭點出來。
  4. 每年同一時間填一次，淨值的變化方向比絕對金額更重要——這就是年度檢視的核心圖表。
本表資料由客戶自行填寫，僅供理財規劃討論使用；市值以填寫當日概估為準｜改造自顧問 Excel 報表
理財目標規劃單

目標金額 ÷ 年限——每月該存多少，當場算給客戶看

理財目標規劃單
客戶：｜填寫日期：
#目標名稱目標金額（元）幾年後要用每月至少要存
所有目標每月合計：0 元
目前每月實際可投入： 元
說明
  1. 「每月至少要存」＝目標金額 ÷（年數 × 12），是未計投資報酬率的保守估算——顧問會再帶入合理報酬率精算，數字只會更友善。
  2. 缺口大不代表目標錯，代表要調整三個旋鈕之一：金額、年限、或每月投入。
  3. 目標之間會搶資源——排出優先順序，比每個都做一點更有效。
  4. 短年期目標（3 年內）建議以儲蓄工具為主，不適合承擔市場波動。
試算僅供參考，不構成投資建議；實際規劃請與理財顧問討論後執行｜改造自顧問紙本規劃單
保單總整理表

全家保單一頁盤點——年繳保費自動加總，對照雙十原則

⚡ 雙十快查
下方保費填好後，這裡自動算保費占收入比
保單總整理表
家庭：｜盤點日期：
保險公司商品名稱險種被保險人保額（萬）年繳保費（元）繳費至（年）
全家年繳保費合計：0 元
保單檢視提醒
  1. 受益人是不是還停在多年前的寫法？結婚、生子、離異後都要重新檢視。
  2. 一年期附約有沒有快到續保年齡上限？醫療險的手術與住院額度跟得上現在的醫療費嗎？
  3. 「儲蓄的錢」與「保障的錢」分開看：保費很高不代表保障足夠。
  4. 保價金、可借款額度可向各保險公司查詢；整理好這張表，理賠時家人才找得到保單。
  5. 各家保單也可到「保險存摺」平台一次調閱，盤點更快。
保單內容以保險公司正式保單條款與最新對帳單為準，本表僅供盤點討論使用｜改造自顧問 Excel 盤點表
📦 提示詞素材包

15 組可直接套用的理財顧問 AI 提示詞，點「複製Prompt」帶走，貼到 Claude 就能用

一、工具起手 Prompt（做網頁工具用）
🌴 退休工具
退休金缺口試算器
輸入年齡與退休目標，缺口與每月定期定額自動算
📈 複利工具
定期定額複利計算器
每月投入 × 報酬率 × 年數，終值與增值即時算
📊 配置工具
資產配置檢視板
輸入各類資產金額，比例與集中度提醒自動出來
🛟 健診工具
家庭財務健診儀表板
儲蓄率、負債比、預備金、保費占比，四燈號一頁看
📋 內部工具
客戶追蹤看板
名單、約訪、規劃中、定期檢視，一頁掌握
📅 行政工具
理財年曆
報稅、保單續期、年終獎金規劃，全年時點自動整理
✍️ 文案工具
方案比較表產生器
兩三個規劃方案，自動排成客戶看得懂的比較表
🔍 分析工具
收支流水快篩
貼上記帳流水，拿鐵因子與重複訂閱自動標出來
二、文件與文案 Prompt（產文件用）
理財建議書摘要器
Claude 直接套用 · 客戶資料整理成五段式建議書
金融名詞白話翻譯機
Claude 直接套用 · 商品說明書翻成客戶聽得懂的話
市場快訊摘要器
Claude 直接套用 · 市場新聞變成給客戶的安心三點
資料收集通知信
Claude 直接套用 · 催保單催對帳單，禮貌但有效
理財健檢清單產生器
Claude 直接套用 · 依客戶輪廓產出年度檢核清單
年度檢視報告器
Claude 直接套用 · 三分鐘跟客戶講完這一年
會議紀錄整理器
Claude 直接套用 · 諮詢逐字稿變成待辦與紀要
用法：點「複製Prompt」→ 開啟 Claude → 貼上 → 再補上你的資料就能跑。工具類挑一個你每週都在重複做的事開始——重複越多次的工作，做成工具的回報越大。 覺得輸出格式不合胃口？直接跟 AI 說「第二段改成表格」「語氣再沉穩一點」，改到順手為止——這就是 Vibe Coding 的日常。
🧩 互動元件百科

28 種元件全部可以直接操作體驗，從選擇類、輸入類到理財顧問特殊工具，一頁看完。

一、選擇類
01 · 單選按鈕
Radio Button
只能選一個 · 目前的投資習慣
02 · 核取方塊
Checkbox
可複選 · 想了解的主題
03 · 下拉式選單
Select
節省空間 · 投資經驗、可投資金額
04 · 多層下拉 🔥
Cascading Select
會連動 · 選目標大類 → 出現細項
05 · 切換按鈕
Toggle Switch
像手機開關 · 服務偏好設定
06 · 按鈕式選項
Button Group
比下拉更直覺 · 手機操作友善
二、文字輸入類
07 · 單行文字
Text Input
最基本 · 姓名、職業、聯絡方式
08 · 多行文字
Textarea
長內容 · 需求描述、面談備註
09 · 密碼欄位
Password Input
遮蔽文字 · 適合工具後台登入
10 · 自動完成
Autocomplete
輸入時自動建議 · 打「基」→ 跳商品類別
三、數字與範圍類
11 · 數字欄位
Number Input
只能輸入數字 · 月收入、月支出
12 · 滑桿
Slider
拖拉選數值 · 每月定期定額金額
13 · 區間滑桿 💰
Range Slider
雙滑桿設定區間 · 每月投資預算
四、日期時間類
14 · 日期選擇器
Date Picker
選日期 · 預約諮詢日期、出生年月日
15 · 時間選擇器
Time Picker
選時間 · 預約諮詢時段
16 · 日期區間
Date Range
投資檢視期間、保單繳費期間
五、檔案與媒體類
17 · 檔案上傳
File Upload
保單、對帳單、收支紀錄上傳
18 · 拍照上傳
Camera Upload
手機直接拍 · 保單首頁隨手傳
19 · 簽名板 ✍️
Signature Pad
直接手寫簽名 · 面談紀錄、聲明書
六、評分互動類
20 · 星級評分
Star Rating
★★★★★ · 服務滿意度調查
21 · NPS 推薦分數
NPS Score
0–10分 · 你願意推薦我給親友嗎？
22 · 表情評分
Emoji Rating
互動感強 · 諮詢後快速回饋
七、進階互動類
23 · 拖曳排序 🔥
Drag & Drop Ranking
把在意的目標排序 · 需求分析神器
24 · 卡片選擇
Card Selection
像選牌卡 · 諮詢主題類型
25 · 圖片選擇
Image Choice
直接點選 · 喜歡哪種報告風格？
八、理財顧問超實用特殊欄位
26 · 複利終值速算
Compound Preview
輸入每月定期定額 → 20 年後概估
27 · 目標回推器
Goal Converter
目標金額 ↔ 每月投入（20 年 · 6% 假設）雙向換算
28 · AI 需求分析欄 🚀
AI Input
輸入一句話 → AI 自動整理客戶需求
④ 實作－客戶版

跟著步驟，從零做出你的「退休金缺口試算器」，給客戶直接用

🎯 這堂課你要做出什麼？

一個可以計算退休金缺口的互動式網頁工具。
客戶輸入年齡、退休目標與已準備金額，
系統自動算出需求總額、缺口，以及每月該定期定額多少。

做好的成品就是你的
免費名片型獲客工具
01
打開 Claude，貼上這段 Prompt
告訴 AI 你要做什麼
請幫我做一個「退休金缺口試算器」的互動式網頁工具（單一 HTML 檔案）。

功能需求：
1. 輸入欄位：目前年齡、預計退休年齡、退休後每月想要的生活費（元）、已準備的退休資產（元）、退休前假設年報酬率（%，預設 5）
2. 自動計算：退休需求總額（以 4% 法則＝退休後年支出 × 25 估算）、已準備資產到退休時的預估價值、退休金缺口、補足缺口每月需定期定額的金額
3. 顯示方式：結果用卡片呈現，附一條「需求 vs 已準備」的對比長條，以及「試算僅供參考，不構成投資建議；報酬率為假設並非保證」的提醒
4. 視覺風格：冷調綠灰底 #F3F7F5，深綠墨 #1B3A2F，資產綠 #0E8A5F 為主行動色，白色卡片、扁平乾淨、無漸層
開啟 Claude
02
把 Claude 產出的程式碼存成 .html
複製程式碼 → 貼到記事本 → 存檔
1點選 Claude 回應中程式碼區塊右上角的「複製」按鈕
2開啟 Windows 記事本（或 Mac TextEdit），貼上程式碼
3「另存新檔」，檔名輸入 retire.html，存檔類型選「所有檔案」
4雙擊檔案，在瀏覽器開啟，確認畫面是否正常顯示
03
調整到你滿意為止
有什麼不對，繼續跟 Claude 說
常見需要修正的點，直接複製貼給 Claude：
「請加上通膨 2% 版本的對照，兩個數字並排」
「報酬率請做成 3%／5%／7% 三檔切換按鈕」
「數字請加千分位逗號，比較好讀」
「手機版跑版了，請修正 RWD」
04
上傳到 Netlify，讓工具能對外分享
免費部署，30 秒上線
1前往 Netlify，點「Add new site」→「Deploy manually」
2把你的 retire.html 直接拖拉進去
3Netlify 自動產生網址，複製後就可以放進 LINE 官方帳號或名片 QR 🎉
前往 Netlify
做完了嗎？舉手讓小蟲老師看看
每個人做出來的結果呈現方式都不一樣，差異就是你的學習點。
記得在明顯處放上「試算僅供參考、不構成投資建議」——金融從業人員的嚴謹要帶進工具裡。
⑤ 實作－團隊版

跟著步驟，做出你專屬的「客戶理財檔案整理器」

🎯 這堂課你要做出什麼？

一個供自己與團隊內部使用的客戶理財檔案工具。
輸入客戶基本資料與財務概況，系統自動整理成結構化的檔案卡，
方便面談前快速回顧、團隊交接與定期檢視追蹤。

01
想清楚「內部工具」需要哪些欄位
客戶版 vs 團隊版，需求不一樣
內部理財檔案卡通常需要這些資訊：
👤 客戶基本
稱呼、年齡、家庭結構
💰 收支概況
月收入、月結餘、儲蓄率
📊 資產負債
總資產、總負債、淨值
🛡️ 保障現況
已投保險種、年繳保費
🎯 目標與風險
主要目標、年限、風險屬性
📝 追蹤備註
互動紀錄、下次檢視日期
02
貼給 Claude，說明你要的工具
帶入你需要的欄位與輸出格式
請幫我做一個「客戶理財檔案整理器」的互動式網頁工具（單一 HTML 檔案）。

功能需求：
1. 輸入欄位：客戶稱呼（代號即可）、年齡、家庭結構、月收入（元）、月結餘（元）、總資產（元）、總負債（元）、已投保險種（壽險／醫療／意外／失能，可複選）、年繳保費（元）、主要理財目標、目標年限、風險屬性（保守／穩健／積極）、追蹤備註、下次檢視日期
2. 點擊「產出檔案卡」後，自動整理成一張結構清晰的客戶理財檔案卡，並自動算出儲蓄率與淨值兩個指標
3. 檔案卡可以一鍵複製成純文字，方便貼到筆記軟體或團隊群組
4. 視覺風格：冷調綠灰底 #F3F7F5，深綠墨 #1B3A2F，資產綠 #0E8A5F，白底卡片，內部工具感、扁平乾淨
開啟 Claude
03
輸入真實案例測試，看輸出是否夠用
用你手上一個真實客戶來跑一遍（記得先去識別化）
1把程式碼存成 clientcard.html，瀏覽器開啟
2選一個你正在服務的客戶，把資料填入測試（示範時用代號與概數）
3試試「複製純文字」功能，貼到筆記軟體看格式對不對
4覺得哪個欄位多餘或缺少？告訴 Claude 調整
保密提醒：客戶財務資料是高度敏感個資。這種純 HTML 工具資料只留在你的瀏覽器裡，不會上傳；但若要部署上網給團隊共用，切勿把真實客戶資料寫死在程式碼中，卡片一律用代號稱呼。
做完了？跟隔壁同學交換看看
看看彼此設計的欄位有哪裡不同，
差異反映的是每個顧問不同的服務流程，沒有標準答案。
⑥ 實作－個人版

跟著步驟，做出你專屬的「理財建議書自評系統」

🎯 這堂課你要做出什麼？

一個能幫你自評建議書與對客訊息品質的互動式工具。
貼入你要給客戶的建議書或 LINE 訊息，AI 用評分標準逐項拆解，
告訴你哪裡架構清楚、哪裡客戶可能看不懂或被誤導。

01
先想好你的評分標準
工具好不好用，關鍵在評分維度設計得夠不夠準
一份好的理財建議，建議至少涵蓋這幾個維度：
✅ 數據合理
試算假設有沒有誇大報酬
🧭 架構清晰
現況→目標→缺口→方案跟得上
💬 白話易懂
非金融背景能不能一次看懂
⚠️ 風險揭露
該講的假設與但書有沒有講
👉 行動指引
客戶知不知道下一步要決定什麼
02
貼給 Claude，說明你要的工具
把評分標準帶進 Prompt
請幫我做一個「理財建議書自評系統」的互動式網頁工具（單一 HTML 檔案）。

功能需求：
1. 使用者貼入一份要給客戶的建議書或訊息（Textarea 輸入）
2. 點擊「開始評分」後，從以下五個維度評分（各 20 分，滿分 100）：
　　・數據合理（試算假設與報酬率是否合理、有無誇大）
　　・架構清晰（現況→目標→缺口→方案的邏輯是否完整）
　　・白話易懂（非金融背景客戶能否一次看懂）
　　・風險揭露（假設條件與該講的但書有沒有講）
　　・行動指引（客戶是否知道下一步要準備或決定什麼）
3. 每個維度顯示分數＋一句具體改善建議
4. 最後顯示總分與整體評語，並檢查是否出現「保證獲利」「穩賺不賠」等禁用字眼，出現就標紅提醒
5. 視覺風格：冷調綠灰底 #F3F7F5，深綠墨 #1B3A2F，資產綠 #0E8A5F，暖橘 #E8A13B 做數據高亮，白底卡片
開啟 Claude
03
存檔 → 測試 → 調整
貼入你自己寫過的建議內容來測試看看
1把程式碼存成 plancheck.html，瀏覽器開啟
2貼入你最近給客戶的一段建議（先拿掉客戶姓名與可識別資訊），點擊評分
3看看哪個維度最低分，那就是你最需要加強的地方
4根據建議修改內容，再評一次，對比前後分數
做完了？比比看誰的評分維度最犀利
每個人的側重點都不一樣：有人重合規、有人重溝通，
沒有對錯——重點是把你的專業判斷變成可重複使用的標準。
🚀 部署

把你做好的 HTML 網頁放上網路，讓客戶與團隊直接使用

Google 協作平台
嵌入 HTML 到個人官網
https://sites.google.com/view/XXX
1前往 sites.google.com，新增網站或開啟現有網站
2右側工具欄找到「嵌入」→ 點「嵌入程式碼」
3把 HTML 程式碼全部貼入對話框，點「下一步」
4調整嵌入區塊大小，點右上角「發布」即完成
適合放在個人形象官網上，讓客戶直接使用試算工具，網址好記又好分享。
前往 Google Sites
Netlify
獨立網址，30 秒免費上線
https://XXX.netlify.app
1前往 netlify.com 登入（可用 Google 帳號）
2點「Add new site」→「Deploy manually」
3把你的 HTML 檔案直接拖拉進虛線框
4Netlify 自動產生網址，複製後傳給客戶 🎉
適合獨立工具頁面，網址乾淨、免費、不需技術背景，30 秒完成。
前往 Netlify
更多部署平台（進階選配）
新手用上面兩個就夠，這六個是你的第二把刀
Cloudflare Pages
免費、快，台灣連線速度優
https://XXX.pages.dev
1登入 Cloudflare → 左側「Workers 和 Pages」→ 建立 → Pages → 「直接上傳」
2先把 HTML 檔改名 index.html 放進一個資料夾，整個資料夾拖進去
3取專案名 → 部署完成，拿到 ○○.pages.dev 網址
跟 Netlify 同級的主力替代方案，額度大、速度快；差別是要用「資料夾」上傳、檔名必須是 index.html。
前往 Cloudflare Pages
GitHub Pages
工程師世界的標準答案，免費又穩
https://帳號.github.io
1註冊 GitHub → 建立新 repository，名稱取 帳號.github.io
2網頁版直接「Add file → Upload files」，把 index.html 拖上去
3Settings → Pages 確認啟用 → 網址就是 https://帳號.github.io
附贈版本紀錄——每次改版都有留底，做合規留存最有感。要多學一點 GitHub 概念，值得。
前往 GitHub Pages
Render
要接後端程式時的雲端平台
https://XXX.onrender.com
1用 GitHub 帳號註冊登入 Render
2New → Static Site → 連結你的 GitHub repository
3之後改版只要更新 GitHub，Render 自動重新部署
純靜態頁用不到它；等你的工具需要排程、後端 API（例如自動抓資料）再回來找它。
前往 Render
Firebase Hosting
工具要「存資料」的時候用
https://XXX.web.app
1用 Google 帳號登入 Firebase → 建立專案
2左側「Hosting」→ 照指示裝 Firebase CLI（需要 Node.js）
3終端機 firebase init → firebase deploy 上線
殺手鐧是同家的 Firestore 資料庫——當你的工具要「記住客戶輸入的資料」（如追蹤看板多人共用）時，就是它出場的時候。純展示頁不用。
前往 Firebase
Surge
指令派極簡部署，Mac 用起來最順
https://XXX.surge.sh
1先裝 Node.js，打開終端機執行 npm install -g surge
2cd 進你網頁的資料夾，輸入 surge，第一次會請你設帳號
3按 Enter 確認 → 給你 ○○.surge.sh 網址，改版再打一次 surge 就更新
全程打字不用開網站，熟了之後 10 秒上線。Mac 終端機體驗最好；Windows 也能用，裝好 Node.js 即可。
前往 Surge
Vercel
開發者最愛，但注意授權限制
https://XXX.vercel.app
1用 GitHub 帳號註冊登入 Vercel
2Add New → Project → 匯入 GitHub repository（或用 CLI 拖放部署）
3自動部署，拿到 ○○.vercel.app 網址
不可商用：免費 Hobby 方案限非商業用途。給客戶用的理財工具屬商業使用，正式上線請改用 Netlify／Cloudflare，或升級 Vercel 付費方案。課堂練習沒問題。
前往 Vercel
部署前自問三件事： ① 這個工具會不會出現真實客戶的財務資料？會的話不要公開部署。 ② 試算類工具有沒有加「僅供參考、不構成投資建議」？ ③ 網址取名有沒有帶到你的個人品牌，讓客戶記得住？
收工！

今天的 Vibe Coding 到這裡，帶著你的作品回去服務客戶吧

🎉 今天辛苦了！
上傳今天作品與心得
到我的 FB 打卡標記我
就可以得到囉！
🎁 課後加碼提示詞包
上傳作品截圖，寫點心得
前往打卡標記小蟲老師 加入 AI 老師小蟲官方 LINE
AI 老師小蟲｜官方 LINE @548ynfkt