小蟲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，搜尋你想呈現的專業形象（例如：accounting firm branding、finance website、稅務顧問名片）
2純靠直覺，找 3 張「看到就喜歡」的圖，不必分析原因
3截圖或存圖，帶進 YAML 分析器（Gemini 或 ChatGPT 版皆可），貼上這句話：
請個別放入 YAML 中，讓他幫你分析出視覺顏色的提示詞：跑出一段程式碼，有很多種顏色的就是了！
方法二｜色系歸納法
從顏色切入，找到你的視覺語言
操作步驟
1先選一個你想要的主色調，例如：深藍金融感、莫蘭迪米白系、深綠信任感
2在 Pinterest 搜尋這個色系＋用途，例如：「navy finance branding」、「minimal accounting report design」
3找出 3 張色感最對的圖，截圖後貼入 YAML 分析，用這句話：
請個別放入 YAML 中，讓他幫你分析出視覺顏色的提示詞：跑出一段程式碼，有很多種顏色的就是了！
常用搜尋關鍵字參考
accounting firm branding finance dashboard design navy gold finance minimal tax consultant corporate 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
儲存，每次新對話自動套用
之後請它做網頁，頁尾就會自動帶揭露區塊。
③ 常見用法

事務所的紙本表單，變成客戶點開就能用的網頁——九個示範一次看

這一頁在示範什麼？ 下面九個網頁，全部改造自事務所抽屜裡的 Word、Excel 和 PDF—— 速記表變成可查詢的網頁、Excel 公式變成線上計算機、紙本單據變成可以直接填寫列印的表單。 這就是本課要教你的事：你手上的每一份表單，都能變成這樣。
查詢型：表格上網
📋 懶人包
勞健保懶人包
員工與老闆的勞健保費用，兩個 Q&A 講清楚
📋 速記表
113 稅務計算懶人包
免稅額、扣除額、級距稅率、最低稅負一頁查
📋 對照表
勞健保級距對照表
50 級完整對照＋輸入月薪自動查級距
計算型：Excel 公式上網
🧮 計算機
計算小幫手
發票稅額＋租賃扣繳雙向計算，原 Excel 公式照搬
🧮 練習表
營運資金規劃
12 個月現金流示範表，公式邏輯全展開
表單型：紙本單據上網
📝 單據
支付證明單
無法取得單據時的支出證明，線上填、直接印
📝 同意書
房屋使用同意書
公司設立登記地址用，填空即完成
📝 報告單
出差報告單
申請＋旅費結報一張搞定，可填可印
📝 勞報單
勞務報酬單
含扣繳與二代健保自動試算的勞報單
勞健保懶人包

113/1/1 適用｜員工怎麼保、老闆怎麼保，兩個問題講完

勞健保懶人包（113/1/1 適用）
沃夫會計師事務所（課堂示範版）
Q1. 假設請一個員工並且幫他投保最低薪資，要怎麼負擔這份勞健保費用呢？
A. 以投保薪資 27,470 為例：
項目員工自行負擔單位負擔合計
勞保6592,3072,966
健保4261,3291,755
勞退金（員工自行提撥）1,6481,648
合計1,0855,2846,369
Q2. 我是一個老闆，投保於公司要怎麼保才有利呢？我要負擔多少錢的勞健保費用呢？
A. 依規定，公司必須滿五人強制投保，公司員工滿 1 人以上即可成立投保單位。以負責人最低投保金額（$34,800）以及最高投保金額（$45,800）舉例如下：
以負責人最低投保金額（$34,800）計算如下：
項目自行負擔單位負擔合計
勞保7662,6803,446
健保1,79901,799
合計2,5652,6805,245
以負責人最高投保金額（$45,800）計算如下：
項目自行負擔單位負擔合計
勞保1,0083,5274,535
健保2,36802,368
合計3,3763,5276,903
備註
  1. 雇主可自願加入勞保，但可以不必提撥勞工退休金 6%。
  2. 健保計首月不計尾月，勞保按投保天數比例計算。
  3. 一定要有員工，雇主才可以開始投保健保。
  4. 健保是只要有請員工就要投保。
  5. 五人以下勞保投保單位，要額外增加投保就業保險跟職災保險。
本頁內容僅供參考，投保金額與費率以勞保局、健保署當年度公告為準
改造自事務所紙本文件｜Vibe Coding 課堂示範
113 稅務計算懶人包

免稅額、扣除額、級距稅率、最低稅負、退職所得，一頁查完

113 年稅務計算懶人包
沃夫會計師事務所（課堂示範版）
一、個人綜合所得稅 免稅額與扣除額
項目金額項目金額
免稅額（70 歲以下）97,000薪資特別扣除額218,000
免稅額（70 歲以上）145,500身障特別扣除額218,000
標準扣除額（單身）131,000教育特別扣除額25,000
標準扣除額（夫妻）262,000學前特別扣除額120,000（第二位起 225,000）
儲蓄特別扣除額270,000長照特別扣除額120,000
基本生活費202,000
二、113 年度薪資所得（免稅額＋扣除額）申報速算
五歲以下幼童請自行另外加扣除額 120,000
扶養人數單身領薪夫妻一方領薪夫妻雙方領薪
0446,000674,000892,000
1543,000771,000989,000
2640,000868,0001,086,000
3737,000965,0001,183,000
4834,0001,062,0001,280,000
三、綜合所得稅速算公式（課稅級距）
級別課稅級距（元）稅率累進差額
10 ～ 590,0005%0
2590,001 ～ 1,330,00012%41,300
31,330,001 ～ 2,660,00020%147,700
42,660,001 ～ 4,980,00030%413,700
54,980,001 以上40%911,700
四、最低稅負制
基本所得額免稅額度（個人）750 萬元
基本所得額免稅額度（營利事業）60 萬元
保險給付免稅額度3,740 萬元
五、退職所得（一次領取）
188,000 元 × 年資以下免稅
188,000 ～ 377,000 × 年資半數課稅
超過 377,000 × 年資全數列為所得額
非一次領取者減除 814,000 元後之餘額為所得額
審計簽證、稅務規劃、代客記帳、工商登記、創業諮詢
本頁金額以財政部當年度公告為準，實際申報以國稅局核定為準｜改造自事務所紙本文件
勞健保級距對照表

113/1/1 起適用（一般本國人）｜輸入月薪，級距自己跳出來

⚡ 級距快查
月薪介於兩級距間，以較高級數為適用級距
勞健保保費對照表（適用對象：一般本國人）
113 年 1 月 1 日起適用｜普通事故費率 11%＋就業保險 1%｜健保費率 5.17%｜平均眷口 0.56
級數投保級距勞保
本人負擔		勞保
單位負擔		健保
本人負擔		健保
單位負擔		本人合計單位合計勞退 6%
（單位）
說明
  1. 本表適用對象為一般本國人，公、民營事業、機構及有一定雇主之受雇者。
  2. 本表所列保費係以月為計算單位，新加保者自加保日起，按日計收勞保費；健保費則按月計收保費。
  3. 月支薪資金額介於兩投保級距間，以較高級數之投保級距為適用級距。
  4. 本表不含職災保險費與工資墊償基金提繳。職災保險費率因行業別而有不同，全額由投保單位負擔。
  5. 自 105/5/1 起，勞保投保級距上限為 45,800 元。
  6. 自 111/7/1 起，健保投保金額最高一級調整為 219,500 元。
  7. 自 113/1/1 起，健保平均眷屬人數調降為 0.56 人，合計 1.56 人。
  8. 自 113/1/1 起，基本工資調整為 27,470 元。
  9. 勞保普通事故保險費率 11%、就業保險費率 1%；雇主本人無就業保險，勞保費率少 1%，另有他表可查。
勞退 6% 為級距 × 6% 之概算，實際提繳依勞退月提繳分級表為準
改造自事務所 Excel 對照表｜Vibe Coding 課堂示範
支付證明單

無法取得單據時的支出證明——線上填好，直接列印簽核

支 付 證 明 單
填寫日期： 年 月 日
摘　　要
（註明人、事、時、地、物）
金　　額
（大寫）		 新台幣　萬　仟　佰　拾　元整
N.T.$　
不能取得單據原因
（請打 ✓）

備　　註 核准及證明人請由單位主管簽章
經手人：＿＿＿＿＿＿＿＿ 證明人：＿＿＿＿＿＿＿＿ 核　准：＿＿＿＿＿＿＿＿
改造自事務所 Word 表單｜Vibe Coding 課堂示範
房屋使用同意書

公司設立登記地址用——填空即完成，列印簽名就能交件

房屋使用同意書
茲本人 小姐／先生，
所有座落於 房屋，
同意由 先生／小姐使用，
並開設 無誤，
若有不實，願負法律責任。
房屋所有權人：
身分證字號：
住　　　址：
中華民國　　年　　月　　日
本同意書供公司／行號設立登記使用，簽署前請確認房屋權屬｜改造自事務所 Word 表單
計算小幫手

發票稅額＋租賃扣繳雙向計算——原 Excel 的公式，原封不動搬上網

🧾 三聯式發票 稅額計算
公式：銷售額 = ROUND(總計 ÷ 1.05)、營業稅 = ROUND(銷售額 × 5%)
含稅總計（元）
或輸入 未稅銷售額（元）
🏠 租金計算機｜從「租約金額」算
代扣繳 10%＋二代健保補充保費 2.11%，算出房東實拿
租金（租約簽約時填寫的租賃金額）
🔁 租金計算機｜從「房東實拿」回推
公式：租約金額 = ROUND(實拿 ÷ 0.8789)
房東實拿（每月實際給付租金）
📖 租賃扣繳實務
  1. 租賃給付一次超過兩萬元時，須代房東扣繳所得稅 10%，於次月十號前開單繳納。
  2. 納稅義務人為營業人時，承租方（公司本身）就是扣繳義務人——沒有執行代扣繳，被處罰的是公司本身。
  3. 租賃代扣繳每月執行繳納後，繳給國庫的稅金會在五月申報所得稅時，由房東計算所得稅後多退少補。
  4. 綜上所述，該筆代扣繳稅金實為房東的所得稅預付款，屬於房東的資產，未來很有機會退稅給房東喔！
  5. 租賃扣繳申報實務常有爭議，遇有不明白的地方請洽詢你的事務所。
🧾 折讓單（銷貨退回、進貨退出或折讓證明單）
原 Excel 還附了一式四聯的折讓單模板。折讓單欄位：原開立發票的年月日、聯式、字軌號碼，退回或折讓的品名、數量、單價、金額， 以及營業稅額（金額 × 5%）與買賣雙方統編簽章。金額公式與發票相同——這種「一堆格子＋固定公式」的表單，正是最適合做成網頁工具的類型，回到 ④ 實作單元就做得出來。
計算公式照搬事務所 Excel（ROUND 四捨五入到元）｜稅務申報以主管機關核定為準
出差報告單

申請＋旅費結報一張搞定——線上填好，列印簽核

出差報告單
沃夫會計師事務所（課堂示範版）
一、申請　申請日期： 年 月 日
姓名 日期 自 年月日 起　至 年月日 止　共 日
出差事由及報告
地點／目的地 國內出差搭乘飛機原因說明
核准
二、旅費結報
月日 起訖地點受查公司 交通費 住宿費膳雜費雜費
飛機汽車及捷運火車
合計：0 元 出差領款人簽章：＿＿＿＿＿＿＿＿
備註
經　理：＿＿＿＿＿＿＿ 主　管：＿＿＿＿＿＿＿ 出差人：＿＿＿＿＿＿＿
《出差旅費憑證請粘貼於背面》｜金額欄輸入數字會自動加總｜改造自事務所 Word 表單
勞務報酬單

領款人資料＋扣繳與二代健保自動試算——付外部人員報酬的標準單據

⚡ 實領金額試算
報酬金額（元）
所得類別
二代健保補充保費 2.11%
勞務報酬單
填表日期： 年 月 日
領款人基本資料
身分別
姓名 身分證／居留證字號
聯絡電話 戶籍地址
通訊地址　
勞務內容
案由 期間
領款金額
應領金額新台幣 元
代扣所得稅（　％）新台幣 元
二代健保補充保費（2.11%）新台幣 元
實領金額新台幣 元
領款方式
銀行： 銀行 分行 帳號：　戶名：
扣繳速查：薪資所得（50）固定給付 5%（起扣點 84,501）｜執行業務所得（9A/9B）10%（起扣點 20,010）｜租賃所得（51）10%（起扣點 20,010）
兼職薪資達基本工資、執行業務單次給付達 20,000 元，需另扣 2.11% 二代健保補充保費（門檻依當年度規定）。
茲收到支付本人之報酬，共計新台幣 元整。
領款人簽章：＿＿＿＿＿＿＿＿（附身分證／居留證影本） 經辦人：＿＿＿＿＿＿＿＿
身分證（居留證／護照）影本請黏貼於背面｜扣繳率與起扣點以財政部當年度規定為準｜改造自事務所 Word 表單
營運資金規劃

12 個月現金流示範表——看懂「有賺錢，為什麼沒現金」

先看重點：這家示範公司毛利率 20%、下半年月月獲利， 但 1～7 月現金淨流出合計超過 1,000（千元）——生意越好、進貨越多、應收帳款越大，現金反而越緊。 這張表就是拿來跟老闆講「獲利 ≠ 現金」的教具。
營運資金規劃（示範數字）
單位：千元｜灰底列＝公式自動計算
公式邏輯（照搬 Excel）
  • 銷貨收入 ＝ 本期現金收入 ＋ 期末應收帳款 − 期初應收帳款
  • 進貨成本 ＝ 本期現金進貨 ＋ 期末應付帳款 − 期初應付帳款
  • 銷貨成本 ＝ 銷貨收入 × 80%（毛利率設定 20%）；期末存貨 ＝ 期初存貨 ＋ 本期進貨 − 銷貨成本
  • 管銷費用 ＝ 現金支出管銷 ＋ 期末應付費用 − 期初應付費用
  • 本期現金淨流入(流出) ＝ 現金收入 − 現金進貨 − 現金管銷——注意：跟損益表的營業淨利完全是兩回事
原 Excel 另附空白「實作練習」工作表，課堂上請學員把自己公司的數字套進去｜改造自事務所 Excel
📦 提示詞素材包

15 組可直接套用的會計師 AI 提示詞，點「複製Prompt」帶走，貼到 Claude 就能用

一、工具起手 Prompt（做網頁工具用）
💰 稅務工具
綜所稅速算器
輸入所得與扶養人數，自動套級距算稅額
🧾 發票工具
含稅未稅換算器
5% 營業稅含稅、未稅、稅額三向即時換算
📊 報表工具
財務比率健檢板
輸入資產負債與損益數字，自動算流動比、負債比、毛利率
🏦 客戶工具
勞健保級距試算
輸入月薪，查投保級距與勞健保、勞退分攤金額
📋 內部工具
客戶案件進度看板
記帳、申報、設立案件狀態一頁掌握
📅 行政工具
申報行事曆
每月／每兩月申報期限自動整理提醒
✍️ 文案工具
報價單產生器
勾選服務項目，自動組出專業報價單可列印
🔍 查核工具
憑證異常快篩
貼上流水帳文字，AI 幫你挑出可疑項目
二、文件與文案 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 · 雇主成本計算器
Payroll Cost Calculator
輸入月薪 → 估算雇主每月總成本
27 · 含稅換算器
Tax Converter
未稅 ↔ 含稅（5%）即時換算
28 · AI 需求分析欄 🚀
AI Input
輸入一句話 → AI 自動整理客戶需求
④ 實作－客戶版

跟著步驟，從零做出你的「個人綜所稅速算器」，給客戶直接用

🎯 這堂課你要做出什麼？

一個可以計算個人綜合所得稅的互動式網頁工具。
客戶輸入年所得、扶養人數、扣除方式，
系統自動套級距算出應納稅額與有效稅率。

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

功能需求：
1. 輸入欄位：年所得總額（元）、扶養親屬人數、扣除方式（標準／列舉金額）、薪資所得特別扣除是否適用
2. 自動計算：課稅所得、依現行五級累進稅率算出應納稅額、有效稅率（%）
3. 顯示方式：結果用卡片呈現，附上適用級距說明與「僅供試算、申報以國稅局核定為準」的提醒
4. 視覺風格：冷調藍灰底 #F4F6FA，深藍灰墨 #1E2A44，商務藍 #2B5CE6 為主行動色，白色卡片、扁平乾淨、無漸層
開啟 Claude
02
把 Claude 產出的程式碼存成 .html
複製程式碼 → 貼到記事本 → 存檔
1點選 Claude 回應中程式碼區塊右上角的「複製」按鈕
2開啟 Windows 記事本（或 Mac TextEdit），貼上程式碼
3「另存新檔」，檔名輸入 taxcalc.html，存檔類型選「所有檔案」
4雙擊檔案，在瀏覽器開啟，確認畫面是否正常顯示
03
調整到你滿意為止
有什麼不對，繼續跟 Claude 說
常見需要修正的點，直接複製貼給 Claude：
「級距金額是舊制，請改成今年度公告的免稅額與扣除額」
「請在結果下方加上五個級距的對照表」
「數字請加千分位逗號，比較好讀」
「手機版跑版了，請修正 RWD」
04
上傳到 Netlify，讓工具能對外分享
免費部署，30 秒上線
1前往 Netlify，點「Add new site」→「Deploy manually」
2把你的 taxcalc.html 直接拖拉進去
3Netlify 自動產生網址，複製後就可以放進 LINE 官方帳號或名片 QR 🎉
前往 Netlify
做完了嗎？舉手讓小蟲老師看看
每個人做出來的級距呈現方式都不一樣，差異就是你的學習點。
記得在明顯處放上「試算結果僅供參考」——專業者的嚴謹要帶進工具裡。
⑤ 實作－事務所版

跟著步驟，做出你專屬的「客戶案件明細整理器」

🎯 這堂課你要做出什麼？

一個供事務所內部使用的客戶案件整理工具。
輸入客戶基本資料與委任內容，系統自動整理成結構化的案件卡，
方便同事快速掌握、交接與追蹤申報進度。

01
想清楚「內部工具」需要哪些欄位
客戶版 vs 事務所版，需求不一樣
內部案件整理器通常需要這些資訊：
🏢 客戶基本
公司名、統編、負責人
💰 收費資訊
月費、年度結算費、收款方式
📋 服務範圍
記帳、401、薪資、營所稅
📅 申報時程
申報頻率、下次期限
📝 案件備註
交件習慣、特殊狀況、注意事項
02
貼給 Claude，說明你要的工具
帶入你需要的欄位與輸出格式
請幫我做一個「客戶案件明細整理器」的互動式網頁工具（單一 HTML 檔案）。

功能需求：
1. 輸入欄位：公司名稱、統一編號、負責人、聯絡電話、委任服務（記帳／營業稅／薪資勞健保／營所稅，可複選）、月費（元）、申報頻率（每月／雙月）、下次申報期限、案件備註
2. 點擊「產出明細」後，自動整理成一張結構清晰的客戶案件卡
3. 案件卡可以一鍵複製成純文字，方便貼到 LINE 群組或 Excel
4. 視覺風格：冷調藍灰底 #F4F6FA，深藍灰墨 #1E2A44，商務藍 #2B5CE6，白底卡片，內部工具感、扁平乾淨
開啟 Claude
03
輸入真實客戶測試，看輸出是否夠用
用你手上一個真實案件來跑一遍（記得先去識別化）
1把程式碼存成 casecard.html，瀏覽器開啟
2選一個你手上正在服務的客戶，把資料填入測試（示範時用假名假統編）
3試試「複製純文字」功能，貼到 LINE 看格式對不對
4覺得哪個欄位多餘或缺少？告訴 Claude 調整
保密提醒：這種純 HTML 工具資料只留在你的瀏覽器裡，不會上傳。但若要部署上網給同事共用，切勿把真實客戶資料寫死在程式碼中。
做完了？跟隔壁同學交換看看
看看彼此設計的欄位有哪裡不同，
差異反映的是每間事務所不同的作業習慣，沒有標準答案。
⑥ 實作－個人版

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

🎯 這堂課你要做出什麼？

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

01
先想好你的評分標準
工具好不好用，關鍵在評分維度設計得夠不夠準
一封好的客戶信件，建議至少涵蓋這幾個維度：
✅ 專業正確
數字、法規引用有沒有錯
💬 白話易懂
非本科客戶能不能一次看懂
⚠️ 風險提醒
該講的但書與界線有沒有講
👉 行動指引
客戶知不知道下一步要做什麼
🤝 語氣溫度
專業之外，有沒有讓人安心
02
貼給 Claude，說明你要的工具
把評分標準帶進 Prompt
請幫我做一個「客戶信件自評系統」的互動式網頁工具（單一 HTML 檔案）。

功能需求：
1. 使用者貼入一封要寄給客戶的信件或訊息（Textarea 輸入）
2. 點擊「開始評分」後，從以下五個維度評分（各 20 分，滿分 100）：
　　・專業正確（數字與法規引用是否精準）
　　・白話易懂（非本科客戶能否一次看懂）
　　・風險提醒（該講的但書與界線有沒有講）
　　・行動指引（客戶是否知道下一步）
　　・語氣溫度（專業之外是否讓人安心）
3. 每個維度顯示分數＋一句具體改善建議
4. 最後顯示總分與整體評語
5. 視覺風格：冷調藍灰底 #F4F6FA，深藍灰墨 #1E2A44，商務藍 #2B5CE6，暖橘 #E8A13B 做數據高亮，白底卡片
開啟 Claude
03
存檔 → 測試 → 調整
貼入你自己寫過的信件來測試看看
1把程式碼存成 mailcheck.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