小蟲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,搜尋你想呈現的專業形象(例如:law firm branding、legal website、律師事務所名片)
2純靠直覺,找 3 張「看到就喜歡」的圖,不必分析原因
3截圖或存圖,帶進 YAML 分析器(Gemini 或 ChatGPT 版皆可),貼上這句話:
請個別放入 YAML 中,讓他幫你分析出視覺顏色的提示詞:跑出一段程式碼,有很多種顏色的就是了!
方法二|色系歸納法
從顏色切入,找到你的視覺語言
操作步驟
1先選一個你想要的主色調,例如:深藍權威感、墨綠沉穩學院風、酒紅經典法庭感
2在 Pinterest 搜尋這個色系+用途,例如:「navy law firm branding」、「minimal legal website design」
3找出 3 張色感最對的圖,截圖後貼入 YAML 分析,用這句話:
請個別放入 YAML 中,讓他幫你分析出視覺顏色的提示詞:跑出一段程式碼,有很多種顏色的就是了!
常用搜尋關鍵字參考
law firm branding legal website design navy law office attorney business card classic serif law brand
找完 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—— 裁判費速記表變成可查詢的網頁、計算公式變成線上計算機、紙本委任狀變成可以直接填寫列印的表單。 這就是本課要教你的事:你手上的每一份表單,都能變成這樣。
查詢型:表格上網
📋 懶人包
裁判費懶人包
打官司要繳多少錢?兩個 Q&A 講清楚
📋 速記表
期間與時效速記表
上訴抗告期間、消滅時效、追訴權時效一頁查
📋 對照表
裁判費級距對照表
輸入請求金額,一到三審裁判費自動算
計算型:公式上網
🧮 計算機
計算小幫手
法定利息+易科罰金+擔保金三合一
🧮 教具表
應繼分特留分試算
選繼承人組合,每個人的底線一目了然
表單型:紙本狀單上網
📝 委任狀
民事委任狀
特別代理權勾選式,線上填、直接印
📝 和解書
和解書
給付條款+拋棄請求權,填空即完成
📝 報告單
出庭報告單
庭訊摘要+出庭費用結報一張搞定
📝 請款單
律師酬金請款單
含扣繳與二代健保自動試算的請款單
裁判費懶人包

打官司到底要繳多少錢?兩個問題講完

民事裁判費懶人包
正衡法律事務所(課堂示範版)
Q1. 我想告對方請求 100 萬元,第一審裁判費要繳多少?
A. 財產權訴訟起訴的裁判費,依訴訟標的金額分段累加計算:
訴訟標的金額(元)徵收標準
10 萬以下1,000 元
逾 10 萬 ~ 100 萬每萬元 110 元
逾 100 萬 ~ 1,000 萬每萬元 99 元
逾 1,000 萬 ~ 1 億每萬元 88 元
逾 1 億 ~ 10 億每萬元 77 元
逾 10 億每萬元 66 元
請求 100 萬元的算法:前 10 萬徵 1,000 元+其餘 90 萬 × 110 元/萬 = 9,900 元
第一審裁判費合計 10,900 元
Q2. 打輸了想上訴,第二審、第三審要繳多少?
A. 上訴依第一審裁判費加徵十分之五(× 1.5)。以請求 100 萬元為例:
審級裁判費備註
第一審10,900起訴時由原告先繳
第二審16,35010,900 × 1.5,由上訴人繳
第三審16,35010,900 × 1.5,由上訴人繳
三個審級打好打滿43,600還沒算律師酬金與其他費用
非財產權訴訟(如離婚、確認親子關係):起訴徵 3,000 元,上訴 4,500 元
備註
  1. 訴訟標的金額未滿萬元的畸零之數,以萬元計算。
  2. 非財產權訴訟同時主張財產權上之請求者,分別併算裁判費。
  3. 聲請支付命令只要 500 元——單純債務催討最省錢的起手式。
  4. 聲請調解依標的金額:未滿 10 萬元免徵,10 萬元以上依級距徵 1,000~5,000 元。
  5. 訴訟費用原則上由敗訴之一方負擔,但起訴時先由原告墊付。
本頁依民事訴訟法第 77-13 條等規定整理,實際徵收金額以法院核定為準
改造自事務所紙本文件|Vibe Coding 課堂示範
期間與時效速記表

上訴抗告期間、消滅時效、追訴權時效,一頁查完

期間與時效速記表
正衡法律事務所(課堂示範版)
一、民事程序不變期間
程序期間起算
提起上訴20 日判決送達後
提起抗告10 日裁定送達後
提起再審之訴30 日判決確定或知悉再審事由時
支付命令異議20 日支付命令送達後(逾期未異議即得為執行名義)
二、刑事程序期間
程序期間起算
提起上訴20 日判決送達後
提起抗告10 日裁定送達後
聲請再議10 日接受不起訴/緩起訴處分書後
聲請准許提起自訴10 日再議駁回處分書送達後
告訴乃論之罪提出告訴6 個月知悉犯人之時起
三、民法消滅時效
請求權類型時效
一般請求權(借款返還、買賣價金等)15 年
定期給付(利息、租金、贍養費、退職金等)5 年
短期(住宿飲食費、運費、診療費、律師會計師報酬、商品代價等)2 年
本票——執票人對發票人3 年
支票——執票人對發票人1 年
四、侵權行為與國家賠償
侵權行為損害賠償知有損害及賠償義務人起 2 年;自侵權行為時起 10 年
國家賠償知有損害起 2 年;損害發生起 5 年
五、刑事追訴權時效
最重本刑死刑、無期或 10 年以上30 年
最重本刑 3 年以上 10 年未滿20 年
最重本刑 1 年以上 3 年未滿10 年
最重本刑 1 年未滿、拘役或罰金5 年
期間與時效依現行法條整理;個案起算點與中斷、不完成事由常有爭議,請依案件事實個別判斷
改造自事務所紙本文件|Vibe Coding 課堂示範
裁判費級距對照表

民事財產權訴訟|輸入請求金額,一到三審裁判費自己跳出來

⚡ 裁判費快查
未滿萬元的畸零之數,以萬元計算
民事裁判費對照表(財產權訴訟)
依民事訴訟法第 77-13、77-16 條|第二、三審各加徵十分之五
訴訟標的金額第一審第二審
(×1.5)
第三審
(×1.5)
三審合計
說明
  1. 計算方式為分段累加:10 萬元以下徵 1,000 元;逾 10 萬至 100 萬每萬元徵 110 元;逾 100 萬至 1,000 萬每萬元 99 元;逾 1,000 萬至 1 億每萬元 88 元;逾 1 億至 10 億每萬元 77 元;逾 10 億每萬元 66 元。
  2. 訴訟標的金額未滿萬元的畸零之數,以萬元計算。
  3. 第二審、第三審上訴,依第一審裁判費加徵十分之五。
  4. 非財產權訴訟徵 3,000 元,上訴 4,500 元;同時主張財產權請求者分別併算。
  5. 反訴、追加之訴另行核算裁判費;聲請假扣押、假處分裁定費 1,000 元,擔保金另計。
  6. 本表未含郵務送達費、執行費等其他費用。
實際徵收金額以受理法院核定為準
改造自事務所 Excel 對照表|Vibe Coding 課堂示範
計算小幫手

法定利息+易科罰金+擔保金——事務所每天在按的計算機,搬上網

⚖️ 法定遲延利息
公式:本金 × 年利率 × 日數 ÷ 365(法定利率年息 5%)
本金(元)
起算日
迄日
年利率(%)
🔨 易科罰金換算
6 個月以下有期徒刑或拘役適用|一個月以 30 日計
刑期(月)
刑期(日)
每日折算標準(依判決主文)
🧊 假扣押擔保金概算
實務通常命債權人供請求金額三分之一擔保
請求金額(元)
📖 實務備忘
  1. 法定利率為年息 5%(民法第 203 條);當事人另有約定者從其約定,但不得超過法定上限。
  2. 遲延利息的起算點依個案而定:定有給付期限者自期限屆滿時起;未定期限者常自催告翌日或起訴狀繕本送達翌日起算。
  3. 易科罰金以每日 1,000、2,000 或 3,000 元折算一日,由法院裁量定之,並非當事人自選。
  4. 假扣押擔保金額由法院裁定,通常為請求金額三分之一;債務人供全額反擔保,得免為或撤銷假扣押。
  5. 以上皆為概算工具,實際金額以法院裁判為準。
📄 下一步:把計算結果帶進書狀
算好的遲延利息就是起訴狀「訴之聲明」裡的那一行—— 「被告應給付原告新台幣○○元,及自○年○月○日起至清償日止,按年息百分之五計算之利息」。 這種「一堆欄位+固定公式」的計算,正是最適合做成網頁工具的類型,回到 ④ 實作單元就做得出來。
計算公式照搬事務所 Excel(元以下四捨五入)|實際金額以法院裁判為準
應繼分特留分試算

選繼承人組合——每個人的應繼分與特留分,一張表講清楚

先看重點:遺囑再怎麼寫,特留分拿不掉。 這張表就是拿來跟當事人講「遺囑自由的邊界」的教具——先看清楚每個繼承人的底線,再談財產怎麼安排。
⚡ 輸入條件
遺產總額(元)
繼承人組合
子女人數
應繼分與特留分試算表
依民法第 1138、1144、1223 條
繼承人應繼分比例應繼分金額特留分比例特留分金額
輸入遺產總額後自動計算
規則邏輯(照搬法條)
  • 繼承順序(民法 §1138):一、直系血親卑親屬;二、父母;三、兄弟姊妹;四、祖父母。配偶為當然繼承人。
  • 配偶應繼分(§1144):與子女同為繼承時均分;與父母或兄弟姊妹同為繼承時為 1/2;與祖父母同為繼承時為 2/3;無其他繼承人時為全部
  • 特留分(§1223):直系血親卑親屬、父母、配偶為應繼分之 1/2;兄弟姊妹、祖父母為應繼分之 1/3
  • 注意:代位繼承、拋棄繼承、喪失繼承權都會改變計算結果,個案請重新核算。
本表為簡化教具,未計入夫妻剩餘財產分配、遺贈與生前特種贈與之歸扣
個案請依全部事實核算|改造自事務所 Excel
民事委任狀

特別代理權勾選式——線上填好,列印簽章就能遞

民 事 委 任 狀
案號: 年度 字第 號(股別:
(案件已繫屬者填寫)
茲因委任人與 事件, 現繫屬(或擬繫屬)於 , 委任受任人為訴訟代理人,有為一切訴訟行為之權,並有下列勾選之特別代理權:
委任人 姓名(名稱):
身分證字號(統編):
地址:
受任人 律師
事務所:
電話:
委任人簽章:________ 受任人簽章:________
中華民國  年  月  日
特別代理權範圍依民事訴訟法第 70 條;實際遞狀格式請依各法院要求|改造自事務所 Word 表單
和解書

給付條款+拋棄請求權——填空即完成,列印簽名就生效力

和 解 書
立和解書人:
甲方 (下稱甲方)
乙方 (下稱乙方)
緣雙方因下列事故(事由)發生爭議:
雙方本於誠信,達成和解條款如下:
一、乙方願給付甲方新台幣 元整, 於民國 日前, 以 方式一次給付完畢。
二、甲方於受領前項款項後,就本件事故拋棄其餘民事上一切請求權,不得再向乙方為任何請求。
三、雙方同意就本件事故不再有其他爭執,亦不得再事追究。
四、本和解書一式兩份,甲乙雙方各執一份為憑。
甲方: 身分證字號:
地址:
乙方: 身分證字號:
地址:
見證人:
中華民國  年  月  日
和解書簽署後即生民法上和解之效力,簽署前請確認條款內容
涉及刑事告訴乃論罪之撤回告訴,應另以書狀向檢察官或法院為之|改造自事務所 Word 表單
出庭報告單

庭訊摘要+出庭費用結報——線上填好,列印歸檔

出庭報告單
正衡法律事務所(課堂示範版)
一、開庭資訊 填表日期:
出庭律師 開庭日期 日 
法院・庭別 案號・股別
案由 當事人
庭訊摘要及結果
下次庭期・應辦事項
二、費用結報
起訖地點案件 交通費 住宿費膳雜費影印郵資
高鐵汽車及捷運火車
合計:0 出庭律師簽章:________
備註
主持律師:_______ 會 計:_______ 出庭人:_______
《出庭費用憑證請粘貼於背面》|金額欄輸入數字會自動加總|改造自事務所 Word 表單
律師酬金請款單

酬金+代墊費用+扣繳與二代健保自動試算——請款的標準單據

⚡ 實收金額試算
律師酬金(元)
委任人身分
二代健保補充保費 2.11%
律師酬金請款單
填表日期:
委任人資料
名稱(姓名) 統一編號(身分證字號)
聯絡電話 地址
案件內容
案由
委任範圍
期間
請款明細
律師酬金新台幣
代墊裁判費新台幣
代墊郵資、影印及雜費新台幣
其他新台幣
合計新台幣 0
收款方式
銀行: 銀行 分行 帳號: 戶名:
扣繳速查:律師報酬屬執行業務所得(9A)。由公司、行號或機關給付且單次超過 20,010 元者,給付方應辦理 10% 扣繳; 單次給付達 20,000 元者,另扣 2.11% 二代健保補充保費。個人委任毋須扣繳。門檻與費率以財政部、衛福部當年度規定為準。
茲收訖上列款項,共計新台幣 元整。
事務所(律師)簽章:________ 委任人簽章:________
代墊費用請附單據影本|扣繳率與起扣點以財政部當年度規定為準|改造自事務所 Word 表單
📦 提示詞素材包

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

一、工具起手 Prompt(做網頁工具用)
⚖️ 訴訟工具
裁判費試算器
輸入請求金額,一到三審裁判費自動算
🧮 計算工具
遲延利息計算機
本金+起訖日,法定利息一鍵算好帶進聲明
⏰ 時效工具
時效檢查器
選請求權類型+事件日,時效屆至日自動算
🏛️ 當事人工具
應繼分特留分試算器
選繼承人組合,應繼分特留分自動列表
📋 內部工具
案件進度看板
訴訟、非訟、顧問案件狀態一頁掌握
📅 行政工具
庭期行事曆
開庭日與書狀期限自動整理提醒
✍️ 文案工具
委任報價單產生器
勾選服務項目,自動組出專業報價單可列印
🔍 審閱工具
契約風險快篩
貼上契約條款,可疑點自動標出來
二、文件與文案 Prompt(產文件用)
存證信函產生器
Claude 直接套用 · 催告通知函稿,堅定不過激
訴訟流程白話說明
Claude 直接套用 · 給當事人的流程說明不嚇人
法條白話翻譯機
Claude 直接套用 · 法條判決翻成當事人聽得懂的話
補件催辦通知
Claude 直接套用 · 催當事人交資料,禮貌但有效
企業法律健檢清單
Claude 直接套用 · 產出客戶年度法律風險檢核表
判決重點摘要器
Claude 直接套用 · 三分鐘跟當事人講完判決
會談紀錄整理器
Claude 直接套用 · 當事人會談逐字稿變成待辦與紀要
用法:點「複製Prompt」→ 開啟 Claude → 貼上 → 再補上你的資料就能跑。工具類挑一個你每週都在重複做的事開始——重複越多次的工作,做成工具的回報越大。 覺得輸出格式不合胃口?直接跟 AI 說「第二段改成表格」「語氣再正式一點」,改到順手為止——這就是 Vibe Coding 的日常。 提醒:貼給 AI 的案件資料一律先去識別化,這是律師的保密義務。
🧩 互動元件百科

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 · 裁判費概算器
Court Fee Calculator
輸入請求金額 → 第一審裁判費即時算
27 · 法定利息快算
Interest Converter
本金 ↔ 年息 5% 利息即時換算
28 · AI 需求分析欄 🚀
AI Input
輸入一句話 → AI 自動整理案件需求
④ 實作-當事人版

跟著步驟,從零做出你的「民事裁判費試算器」,給當事人直接用

🎯 這堂課你要做出什麼?

一個可以計算民事裁判費的互動式網頁工具。
當事人輸入請求金額,
系統自動算出一到三審的裁判費與合計。

做好的成品就是你的
免費名片型獲客工具
01
打開 Claude,貼上這段 Prompt
告訴 AI 你要做什麼
請幫我做一個「民事裁判費試算器」的互動式網頁工具(單一 HTML 檔案)。

功能需求:
1. 輸入欄位:訴訟標的金額(元)、案件類型(財產權訴訟/非財產權訴訟)
2. 自動計算:第一審裁判費(依民事訴訟法費率分段累加:10 萬元以下 1,000 元;逾 10 萬至 100 萬每萬元 110 元;逾 100 萬至 1,000 萬每萬元 99 元;逾 1,000 萬至 1 億每萬元 88 元;未滿萬元以萬元計)、第二審與第三審(各加徵十分之五)、三個審級合計
3. 顯示方式:結果用卡片呈現,附上計算式說明與「僅供試算、實際徵收以法院核定為準」的提醒
4. 視覺風格:米白底 #F7F8F6,深海軍藍 #173A63,公民藍 #6F9BC5 為輔助色,重點用暖橘 #F28A3B 點綴,白色圓角卡片、扁平乾淨、無漸層
開啟 Claude
02
把 Claude 產出的程式碼存成 .html
複製程式碼 → 貼到記事本 → 存檔
1點選 Claude 回應中程式碼區塊右上角的「複製」按鈕
2開啟 Windows 記事本(或 Mac TextEdit),貼上程式碼
3「另存新檔」,檔名輸入 feecalc.html,存檔類型選「所有檔案」
4雙擊檔案,在瀏覽器開啟,確認畫面是否正常顯示
03
調整到你滿意為止
有什麼不對,繼續跟 Claude 說
常見需要修正的點,直接複製貼給 Claude:
「未滿萬元的畸零之數要以萬元計算,請修正進位邏輯」
「請在結果下方加上費率級距的對照表」
「數字請加千分位逗號,比較好讀」
「手機版跑版了,請修正 RWD」
04
上傳到 Netlify,讓工具能對外分享
免費部署,30 秒上線
1前往 Netlify,點「Add new site」→「Deploy manually」
2把你的 feecalc.html 直接拖拉進去
3Netlify 自動產生網址,複製後就可以放進 LINE 官方帳號或名片 QR 🎉
前往 Netlify
做完了嗎?舉手讓小蟲老師看看
每個人做出來的呈現方式都不一樣,差異就是你的學習點。
記得在明顯處放上「試算結果僅供參考」——專業者的嚴謹要帶進工具裡。
⑤ 實作-事務所版

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

🎯 這堂課你要做出什麼?

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

01
想清楚「內部工具」需要哪些欄位
當事人版 vs 事務所版,需求不一樣
內部案件整理器通常需要這些資訊:
👤 當事人基本
當事人、相對人、聯絡方式
⚖️ 案件資訊
案號、法院股別、案由、審級
💰 酬金資訊
酬金、收款進度、代墊費用
📅 期日管理
下次庭期、書狀期限
📝 案件備註
證據狀況、當事人特性、注意事項
02
貼給 Claude,說明你要的工具
帶入你需要的欄位與輸出格式
請幫我做一個「案件明細整理器」的互動式網頁工具(單一 HTML 檔案)。

功能需求:
1. 輸入欄位:當事人姓名、相對人姓名、案號、法院與股別、案由、委任範圍(一審/二審/三審/非訟,可複選)、律師酬金(元)、下次庭期、案件備註
2. 點擊「產出明細」後,自動整理成一張結構清晰的案件卡
3. 案件卡可以一鍵複製成純文字,方便貼到 LINE 群組或 Excel
4. 視覺風格:米白底 #F7F8F6,深海軍藍 #173A63,公民藍 #6F9BC5,白底圓角卡片,內部工具感、扁平乾淨
開啟 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. 視覺風格:米白底 #F7F8F6,深海軍藍 #173A63,公民藍 #6F9BC5,暖橘 #F28A3B 做重點標註,白底圓角卡片
開啟 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 initfirebase 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