小蟲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，搜尋你想呈現的專業形象（例如：financial advisor branding、stock trading app UI、投資顧問名片）
2純靠直覺，找 3 張「看到就喜歡」的圖，不必分析原因
3截圖或存圖，帶進 YAML 分析器（Gemini 或 ChatGPT 版皆可），貼上這句話：
請個別放入 YAML 中，讓他幫你分析出視覺顏色的提示詞：跑出一段程式碼，有很多種顏色的就是了！
方法二｜色系歸納法
從顏色切入，找到你的視覺語言
操作步驟
1先選一個你想要的主色調，例如：深藍金融夜盤感、黑金專業系、深綠沉穩信任感
2在 Pinterest 搜尋這個色系＋用途，例如：「navy gold finance branding」、「dark fintech dashboard」
3找出 3 張色感最對的圖，截圖後貼入 YAML 分析，用這句話：
請個別放入 YAML 中，讓他幫你分析出視覺顏色的提示詞：跑出一段程式碼，有很多種顏色的就是了！
常用搜尋關鍵字參考
securities firm branding fintech dashboard design navy gold finance stock market app UI investment report layout
找完 3 張圖了？
請個別放入 YAML 中，讓他幫你分析出視覺顏色的提示詞：
跑出一段程式碼，有很多種顏色的就是了！
Gemini版 YAML分析器 ChatGPT版 YAML分析器
① 營業員應揭露資訊

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

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

AI 產出的網頁預設不會幫你放公司名稱與登錄字號。
投資詐騙滿天飛的年代，沒有揭露的試算工具，客戶看起來就是「來路不明的投資網頁」；
帶了完整揭露，同一個工具立刻變成你的專業名片。先把這塊做好、教給 AI，之後每個作品自動合規。

對外作品應揭露的六件事
🏢 所屬證券商全名
公司全名＋分公司，寫完整不要只寫簡稱
👤 姓名＋登錄身分
證券商業務員／高級業務員／投資分析人員，寫清楚
📜 業務人員登錄字號
依規定登錄之字號，讓客戶查得到你這個人
📍 分公司地址與聯絡方式
營業據點地址、電話分機，找得到人才有信任
🧭 服務範圍講清楚
開戶、受託買賣、定期定額等；不含代客操作與投資建議
⚠️ 投資警語
必附：內容僅供參考不構成投資建議，投資人應獨立判斷、自負盈虧
⚡
揭露區塊產生器
填一次，直接產出「頁尾揭露文字」與「交給 AI 的指令」
登錄身分
所屬證券商全名
分公司
姓名
業務人員登錄字號
分公司地址
電話（含分機）
Email 或官方 LINE（選填）
預覽（就是之後每個網頁頁尾長的樣子）：
（開始填寫，這裡會即時更新）
「交給 AI 的指令」＝揭露資訊＋一句規則：之後做任何對外網頁，頁尾自動加上這塊。貼進下方三個平台，設定一次終身受用。
用語紅線：證券交易法與證券商負責人與業務人員管理規則，對招攬與廣告有嚴格限制。 「保證獲利」「穩賺不賠」「明牌」「飆股」「跟單必賺」這類字眼一律不能出現在你的工具與文案裡； 也不得與客戶約定分享利益、分擔損失，或私下代客操作—— AI 有時會自作聰明幫你加，看到就刪。實際規範以主管機關與所屬公司內規為準。
把揭露資訊教給三個 AI 平台
貼上剛剛複製的「交給 AI 的指令」，設定一次，之後 AI 幫你做的每個網頁、每份文件，頁尾自動帶上營業員揭露區塊。
1
登入 ChatGPT，點右上角大頭照 → 設定
在 chatgpt.com 登入後，點右上角頭像，選單展開後選「設定」。
2
設定 → 個人化 → 自訂指示
英文版路徑：Settings → Personalization → Custom instructions
3
在「你希望 ChatGPT 如何回應？」欄位貼入
你剛剛從產生器複製的「交給 AI 的指令」
4
儲存，每次新對話自動套用
之後請它做網頁，頁尾就會自動帶揭露區塊。
③ 常見用法

營業台的紙本表單與 Excel，變成客戶點開就能用的網頁——九個示範一次看

這一頁在示範什麼？ 下面九個網頁，全部改造自營業台抽屜裡的 Word、Excel 和 PDF—— 費用速記表變成可查詢的網頁、Excel 公式變成線上計算機、紙本單據變成可以直接填寫列印的表單。 這就是本課要教你的事：你手上的每一份表單，都能變成這樣。
查詢型：表格上網
📋 懶人包
交易成本懶人包
買賣一趟到底付了哪些錢，兩個 Q&A 講清楚
📋 速記表
台股稅費速記表
費率、股利課稅、二代健保、信用交易一頁查
📋 對照表
股價升降單位對照表
Tick 全表＋輸入股價自動算漲跌停
計算型：Excel 公式上網
🧮 計算機
計算小幫手
買賣損益＋損益兩平＋股利實領，公式照搬 Excel
🧮 示範表
定期定額示範表
12 個月成本平均法示範，公式邏輯全展開
表單型：紙本單據上網
📝 預約單
開戶預約單
開戶需求＋應備文件清單，線上填、直接印
📝 快篩表
風險屬性快篩
五題自動計分，保守穩健積極立即分型
📝 紀錄表
電話委託紀錄表
接單紀錄一張搞定，可填可印
📝 檢視表
資產配置檢視表
各類資產金額自動加總算占比的檢視紀錄
交易成本懶人包

買賣一趟股票到底付了哪些錢｜兩個問題講完

台股交易成本懶人包
示範證券 台中分公司（課堂示範版）
Q1. 買賣一趟股票，到底要付哪些費用？
A. 以股價 50 元 × 1,000 股（成交金額 50,000 元）買進後原價賣出為例：
項目費率收取時點範例金額
手續費（買進）0.1425%買進成交時71
手續費（賣出）0.1425%賣出成交時71
證交稅0.3%只在賣出時收150
合計約 0.585%—292
Q2. 現股當沖的證交稅，到底省多少？
A. 當沖證交稅減半（0.3% → 0.15%），同樣以成交金額 50,000 元賣出為例：
項目一般現股現股當沖差額
證交稅率0.3%0.15%減半
範例稅額1507575
手續費（買＋賣）1421420
總成本29221775
備註
  1. 手續費牌告上限 0.1425%，電子下單各券商折扣不同，低消多為 20 元。
  2. 證交稅是國家收的，只在賣出時收，任何券商都不能打折。
  3. 現股當沖證交稅減半優惠，目前延長至 116 年 12 月 31 日。
  4. ETF 證交稅為 0.1%；債券 ETF 目前停徵（期限依主管機關公告）。
  5. 交割 T+2：成交後第二個營業日上午 10 點前，交割帳戶要有足額款項。
費率以主管機關及各券商公告為準，本頁僅供參考，不構成投資建議
改造自營業台紙本速記｜Vibe Coding 課堂示範
台股稅費速記表

費率、股利課稅、二代健保、信用交易、交易時間，一頁查完

台股交易稅費速記表
示範證券 台中分公司（課堂示範版）
一、手續費與證交稅費率
商品手續費（買）手續費（賣）證交稅（賣出時收）
上市上櫃股票0.1425%0.1425%0.3%
現股當沖0.1425%0.1425%0.15%（減半至 116/12/31）
ETF0.1425%0.1425%0.1%
債券 ETF0.1425%0.1425%停徵（期限依公告）
權證0.1425%0.1425%0.1%
二、股利課稅二擇一
方式規則適合誰
合併計稅股利併入綜合所得，可抵減稅額 8.5%，每戶上限 8 萬元適用稅率 5%～20% 的多數小資族
分離課稅股利以 28% 單一稅率分開計稅適用稅率 30%、40% 的高所得族群
三、二代健保補充保費
扣取門檻單筆股利給付達 20,000 元
費率2.11%
扣取方式發放公司給付時代扣
四、信用交易重點數字
融資成數6 成（自備款 4 成）
融券保證金9 成
整戶擔保維持率低於 130% 追繳
融資利率依各券商牌告
五、交易時間與零股
時段時間說明
盤前試撮8:30 ～ 9:00模擬撮合，可掛單可取消
盤中連續交易9:00 ～ 13:25逐筆交易
收盤集合競價13:25 ～ 13:30收盤價決定
盤後定價交易14:00 ～ 14:30以收盤價委託
盤中零股9:10 ～ 13:30每 1 分鐘集合競價撮合
盤後零股13:40 ～ 14:3014:30 一次撮合
開戶服務、台股交易、定期定額、複委託｜本頁數字以主管機關當年度公告為準，不構成投資建議
改造自營業台紙本速記｜Vibe Coding 課堂示範
股價升降單位對照表

Tick 規則全表｜輸入股價，漲跌停自己跳出來

⚡ 漲跌停快查
漲跌幅 10%｜漲停向下取至升降單位、跌停向上取至升降單位
股價升降單位（Tick）對照表
依台灣證券交易所規則整理｜課堂示範版
股票
價位區間升降單位範例（下一檔）
未滿 10 元0.019.87 → 9.88
10 元 ～ 未滿 50 元0.0523.45 → 23.50
50 元 ～ 未滿 100 元0.1087.6 → 87.7
100 元 ～ 未滿 500 元0.50156.5 → 157.0
500 元 ～ 未滿 1,000 元1.00678 → 679
1,000 元以上5.001,085 → 1,090
ETF
價位區間升降單位範例（下一檔）
未滿 50 元0.0136.12 → 36.13
50 元以上0.05182.35 → 182.40
說明
  1. 一般股票與 ETF 漲跌幅上限為 10%；興櫃股票無漲跌幅限制，處置股票另有規定。
  2. 漲停價＝前一日收盤價 × 1.1 後，向下取至升降單位；跌停價＝前一日收盤價 × 0.9 後，向上取至升降單位。
  3. 價格跨越區間時，升降單位以「所在價位區間」為準。
  4. 單筆委託數量上限為 499 張。
  5. 快查結果為概算，實際漲跌停價以交易所每日公告為準。
升降單位與漲跌幅規則以台灣證券交易所、櫃買中心公告為準
改造自營業台紙本速記｜Vibe Coding 課堂示範
計算小幫手

買賣損益＋損益兩平＋股利實領——原 Excel 的公式，原封不動搬上網

📈 買賣損益計算器
手續費牌告 0.1425%（低消 20 元）＋證交稅 0.3%
買進價（元）
賣出價（元）
股數
手續費折扣
⚖️ 損益兩平計算器
要漲到多少錢才回本？公式：買進價 ×（1＋手續費率）÷（1－手續費率－0.3%）
買進價（元）
手續費折扣
💰 股利實領計算器
單筆股利 2 萬以上代扣二代健保 2.11%，另扣匯費
現金股利金額（元）
📖 交易成本實務
  1. 手續費買賣各收一次；證交稅只在賣出時收，是國家收的，不打折。
  2. 低消 20 元：小額交易的實際費率會高於牌告 0.1425%，零股尤其明顯。
  3. 損益兩平不是買進價：一趟成本約 0.585%（未含折扣），漲不過這個幅度都是紙上富貴。
  4. 當沖證交稅減半，但當沖屬高風險操作，不適合對每一位客戶推薦。
  5. 股利單筆 2 萬以上會被代扣 2.11% 補充保費——客戶問「怎麼少了一筆」，通常就是這個。
📄 對帳與損益追蹤表
原 Excel 還附了一張「客戶損益追蹤」模板。欄位：成交日期、代號名稱、買賣別、成交價、股數， 以及手續費、證交稅、損益（公式同本頁計算器）。 這種「一堆格子＋固定公式」的表單，正是最適合做成網頁工具的類型——回到 ④ 實作單元就做得出來。
計算公式照搬營業台 Excel（四捨五入到元）｜試算僅供參考，不構成投資建議
開戶預約單

開戶需求＋應備文件一張搞定——線上填好，列印或截圖傳給客戶

開 戶 預 約 單
填寫日期： 年 月 日
客戶姓名
聯絡電話
Email
預約時間 年 月 日 　時段：
開戶需求
（請打 ✓，可複選）
應備文件
（來之前先勾一遍）


備　　註
營業員資訊 姓名：　登錄字號：
電話：
開戶仍須依公司規定完成開戶程序、風險屬性評估（KYC）與相關文件簽署
改造自營業台紙本表單｜Vibe Coding 課堂示範
風險屬性快篩

五題自動計分——先聊得起來，正式評估開戶時再做

投資風險屬性快篩
示範證券 台中分公司（課堂示範版）｜勾完五題，結果自動出現
1. 你的投資經驗？
2. 持股一個月內下跌 20%，你會？
3. 這筆資金的用途？
4. 你期望的報酬？
5. 你的收入狀況？
提醒：本快篩僅供課堂示範與初步了解，正式風險屬性評估以開戶時公司 KYC 問卷與規定為準；不同商品另有各自的適合度規範。
本頁不構成投資建議｜改造自營業台紙本問卷｜Vibe Coding 課堂示範
電話委託紀錄表

接單紀錄一張搞定——線上填好，列印歸檔

電話委託紀錄表
日期： 年 月 日
時間 客戶姓名 帳號末四碼 代號／名稱 買賣 種類 委託價 股數 成交價 成交股數
營業員：＿＿＿＿＿＿＿ 複　核：＿＿＿＿＿＿＿
《依規定電話委託應同步錄音，本表為輔助紀錄》｜買賣：買／賣　種類：現股／融資／融券／當沖
改造自營業台紙本表單｜Vibe Coding 課堂示範
資產配置檢視表

各類資產金額自動加總、占比自己算——跟客戶檢視資產的談話工具

客戶資產配置檢視表
示範證券 台中分公司（課堂示範版）
客戶稱呼（代號）： 檢視日期： 年 月 日
資產類別目前金額（元）占比
觀察與提醒
本表僅供資產檢視紀錄，不構成投資建議｜請以代號記錄，勿留存完整個資
改造自營業台 Excel｜Vibe Coding 課堂示範
定期定額示範表

12 個月成本平均法示範——看懂「股價回到原點，你卻已經賺錢」

先看重點：這組示範數字，股價從 50 元一路跌到 36 再回到 55—— 中間跌最深的時候，同樣一萬元買到的股數最多、平均成本被拉得最低。 第 10 個月股價「只是回到起點」，帳上卻已經獲利。 這張表就是拿來跟客戶講「別怕下跌、紀律扣款」的教具。
定期定額成本平均示範表（示範數字）
每月投入 10,000 元｜灰底列＝公式自動計算｜股價為假設值
公式邏輯（照搬 Excel）
  • 買進股數 ＝ 每月投入 10,000 ÷ 當月股價（無條件捨去至整股）
  • 平均成本 ＝ 累積投入 ÷ 累積股數；當月市值 ＝ 累積股數 × 當月股價
  • 未實現損益 ＝ 當月市值 − 累積投入
  • 股價下跌 → 同樣的錢買到更多股數 → 平均成本下降
  • 第 10 個月股價回到 50 元，平均成本只剩 43.7 元——帳上已經獲利，這就是成本平均法
示範數字僅供教學，非任何報酬保證；定期定額之交易規則與費用依各公司規定
改造自營業台 Excel｜Vibe Coding 課堂示範
📦 提示詞素材包

15 組可直接套用的證券營業員 AI 提示詞，點「複製Prompt」帶走，貼到 Claude 就能用

一、工具起手 Prompt（做網頁工具用）
💰 成本工具
交易成本試算器
輸入買賣價與股數，手續費證交稅損益全算好
🧾 稅務工具
股利課稅比較器
合併計稅 vs 分離課稅 28%，哪個划算一鍵比
📊 試算工具
定期定額試算器
每月扣款＋假設報酬率，複利終值畫成曲線
🥧 檢視工具
資產配置檢視板
輸入各類資產金額，占比圓餅圖自動畫
📋 內部工具
客戶追蹤看板
待聯繫、已聯繫、待回覆，三欄看板一頁掌握
📅 行政工具
除權息行事曆
除權息、法說會、申購截止日自動整理提醒
✅ 流程工具
開戶文件檢查清單
互動勾選，備齊直接一鍵複製傳客戶
⚠️ 風控工具
融資維持率計算器
輸入買進價與現價，130% 追繳線自動示警
二、文件與文案 Prompt（產文件用）
盤後關懷訊息產生器
Claude 直接套用 · 盤後 LINE 訊息，合規又有溫度
新開戶歡迎訊息
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 · 手續費快算
Fee Calculator
輸入成交金額 → 手續費立刻出來
27 · 漲跌停快算
Limit Calculator
輸入股價 → 漲停跌停立刻出來
28 · AI 需求分析欄 🚀
AI Input
輸入一句話 → AI 自動整理客戶需求
④ 實作－客戶版

跟著步驟，從零做出你的「股票交易成本試算器」，給客戶直接用

🎯 這堂課你要做出什麼？

一個可以計算股票交易成本與損益的互動式網頁工具。
客戶輸入買賣價格與股數，
系統自動算出手續費、證交稅、損益兩平價與淨損益。

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

功能需求：
1. 輸入欄位：買進價（元）、賣出價（元）、股數、手續費折扣（無折扣／6折／5折／28折）
2. 自動計算：買進與賣出手續費（牌告 0.1425%、低消 20 元）、證交稅（0.3%）、損益兩平價、淨損益與報酬率
3. 顯示方式：結果用卡片呈現，附上費用明細與「試算僅供參考，不構成投資建議」的提醒
4. 視覺風格：深夜看盤室感，深海夜藍底 #0A1628、卡片深藍 #122139、淺色文字 #EAF2FF、發光藍 #3B9EFF 為主行動色、青綠 #5EEAD4 只做點綴，細發光邊框、扁平乾淨
開啟 Claude
02
把 Claude 產出的程式碼存成 .html
複製程式碼 → 貼到記事本 → 存檔
1點選 Claude 回應中程式碼區塊右上角的「複製」按鈕
2開啟 Windows 記事本（或 Mac TextEdit），貼上程式碼
3「另存新檔」，檔名輸入 tradecost.html，存檔類型選「所有檔案」
4雙擊檔案，在瀏覽器開啟，確認畫面是否正常顯示
03
調整到你滿意為止
有什麼不對，繼續跟 Claude 說
常見需要修正的點，直接複製貼給 Claude：
「低消 20 元沒算到，手續費不足 20 元請以 20 元計」
「請在結果下方加上手續費與證交稅的明細表」
「數字請加千分位逗號，比較好讀」
「手機版跑版了，請修正 RWD」
04
上傳到 Netlify，讓工具能對外分享
免費部署，30 秒上線
1前往 Netlify，點「Add new site」→「Deploy manually」
2把你的 tradecost.html 直接拖拉進去
3Netlify 自動產生網址，複製後就可以放進名片 QR 或傳給客戶 🎉
前往 Netlify
做完了嗎？舉手讓小蟲老師看看
每個人做出來的結果呈現方式都不一樣，差異就是你的學習點。
記得在明顯處放上「試算僅供參考，不構成投資建議」——合規的嚴謹要帶進工具裡。
⑤ 實作－內部版

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

🎯 這堂課你要做出什麼？

一個供營業員自己使用的客戶檔案整理工具。
輸入客戶輪廓與互動紀錄，系統自動整理成結構化的檔案卡，
方便你在打電話前 30 秒內回想起這位客戶的全貌。

01
想清楚「內部工具」需要哪些欄位
客戶版 vs 內部版，需求不一樣
營業員的客戶檔案卡通常需要這些資訊：
👤 客戶基本
稱呼代號、帳號末四碼、聯絡方式
🎯 風險屬性
保守／穩健／積極、KYC 到期日
📦 偏好商品
台股、ETF、複委託、定期定額
📅 互動紀錄
上次聯繫日、下次追蹤日
📝 檔案備註
在意的點、家庭狀況、禁忌話題
02
貼給 Claude，說明你要的工具
帶入你需要的欄位與輸出格式
請幫我做一個「客戶檔案卡整理器」的互動式網頁工具（單一 HTML 檔案）。

功能需求：
1. 輸入欄位：客戶稱呼（代號即可）、帳號末四碼、聯絡方式、風險屬性（保守／穩健／積極）、偏好商品（台股／ETF／複委託／定期定額，可複選）、交易頻率（當沖／短線／波段／長期）、上次聯繫日、下次追蹤日、備註
2. 點擊「產出檔案卡」後，自動整理成一張結構清晰的客戶檔案卡
3. 檔案卡可以一鍵複製成純文字，方便貼到自己的筆記或行事曆
4. 視覺風格：深夜看盤室感，深海夜藍底 #0A1628、卡片深藍 #122139、淺色文字 #EAF2FF、發光藍 #3B9EFF，內部工具感、扁平乾淨
開啟 Claude
03
輸入測試資料，看輸出是否夠用
用你手上一位客戶的輪廓來跑一遍（記得先去識別化）
1把程式碼存成 clientcard.html，瀏覽器開啟
2選一位你正在服務的客戶，用代號填入測試（王大明 → W 先生）
3試試「複製純文字」功能，貼到記事本看格式對不對
4覺得哪個欄位多餘或缺少？告訴 Claude 調整
保密提醒：個資法與公司內規對客戶資料有嚴格要求。這種純 HTML 工具資料只留在你的瀏覽器裡，不會上傳；但切勿把真實姓名、完整帳號寫進程式碼或公開部署——習慣用代號與末四碼。
做完了？跟隔壁同學交換看看
看看彼此設計的欄位有哪裡不同，
差異反映的是每個人不同的經營方式，沒有標準答案。
⑥ 實作－個人版

跟著步驟，做出你專屬的「客戶訊息自評系統」

🎯 這堂課你要做出什麼？

一個能幫你自評對客溝通品質的互動式工具。
貼入你要傳給客戶的訊息或信件，AI 用評分標準逐項拆解，
告訴你哪裡寫得好、哪裡踩到紅線、哪裡客戶可能看不懂。

01
先想好你的評分標準
工具好不好用，關鍵在評分維度設計得夠不夠準
一則好的客戶訊息，建議至少涵蓋這幾個維度：
🚧 合規安全
有沒有踩到保證獲利、明牌等紅線
✅ 專業正確
數字、商品資訊有沒有錯
💬 白話易懂
非金融背景的客戶能不能一次看懂
⚠️ 風險揭露
該講的風險與警語有沒有講
👉 行動指引
客戶知不知道下一步要做什麼
02
貼給 Claude，說明你要的工具
把評分標準帶進 Prompt
請幫我做一個「客戶訊息自評系統」的互動式網頁工具（單一 HTML 檔案）。

功能需求：
1. 使用者貼入一則要傳給客戶的訊息或信件（Textarea 輸入）
2. 點擊「開始評分」後，從以下五個維度評分（各 20 分，滿分 100）：
　　・合規安全（是否出現保證獲利、明牌、飆股等禁語，或個股買賣建議）
　　・專業正確（數字與商品資訊是否精準）
　　・白話易懂（非金融背景客戶能否一次看懂）
　　・風險揭露（該講的風險與警語有沒有講）
　　・行動指引（客戶是否知道下一步）
3. 每個維度顯示分數＋一句具體改善建議；合規安全不滿分時要標紅並列出踩線字句
4. 最後顯示總分與整體評語
5. 視覺風格：深夜看盤室感，深海夜藍底 #0A1628、卡片深藍 #122139、淺色文字 #EAF2FF、發光藍 #3B9EFF，青綠 #5EEAD4 做數據高亮
開啟 Claude
03
存檔 → 測試 → 調整
貼入你自己傳過的訊息來測試看看
1把程式碼存成 msgcheck.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