小蟲AI實戰 | 產險營業員 Vibe Coding 專班
Claude 的基本設定

上課前先把這一頁做完,課堂上就不會卡在安裝、找不到按鈕、資料夾放錯位置

重點摘要
  • 這頁回答四件事:Claude 跟 Claude Code 在手機/電腦上各長什麼樣專案資料夾要放桌面還是 C 槽開工前一定要完成哪些設定Git 與 Node.js 為什麼非裝不可
  • 最短路徑:裝桌面版 Claude App → 點上方中央的 Code 分頁 → 選一個全英文、不被雲端同步的資料夾 → 裝 Git(Mac 要多一步 Xcode 命令列工具)→ 之後要部署網站再裝 Node.js
  • 卡住不要硬撐:終端機打 claude doctor 會直接告訴你哪裡壞掉,或看本頁最後的「常見卡關」對照表。

1我到底該點哪一個?Claude 跟 Claude Code 差在哪

十個學員有八個卡在這裡:打開 App 之後不知道要點哪個分頁,然後在「聊天」那一欄叫 Claude 幫他改檔案,當然改不動。這兩個是同一個帳號、不同的工作區。

 Claude(聊天)Claude Code
它能做什麼對話、寫文案、看圖、查資料直接讀寫你電腦裡的檔案、跑指令、做網頁、部署上線
會不會動到我的檔案不會,它看不到你的硬碟會。所以一定要先指定「工作資料夾」
要不要付費免費方案就能用要 Pro / Max / Team / Enterprise。免費方案沒有這個功能
我們上課用哪個查資料、想文案時用本課程主要都在這裡

各版本的畫面:符號長這樣、位置在這裡

以下為版面示意圖(非實機截圖),重點是記住「分頁在畫面的哪個位置」。官方改版時位置可能微調,但 Code 這個字不會變。

Chat Cowork Code 要我做什麼?
電腦:Mac/Windows 桌面 App 分頁在視窗最上方正中央ChatCoworkCode。上課請一律點 Code。點下去若跳出升級提示,代表你的帳號還是免費方案。
Chats Projects >_ Code iPhone Android
手機:iPhone/Android 都一樣 裝官方 Claude App(iOS 與 Android 都有,iPad 裝 iOS 版),分頁在畫面最下面那一列,找 Code。手機不會在你手機上跑程式,它是遙控器:遙控雲端,或遙控你自己開著的電腦。
Terminal / PowerShell $ cd C:\claude\my-site $ claude ✻ Welcome to Claude Code cwd: C:\claude\my-site > 幫我把首頁的標題改掉
進階:終端機(CLI)與瀏覽器 終端機版要另外安裝,指令就一個字 claude。瀏覽器版在 claude.ai/code本課程用桌面 App 就夠,這兩個等你想跑自動化再說。
你手上的裝置Claude Code 在哪裡備註
Mac 桌機/筆電桌面 App 上方中央 → CodeApplications 打開 Claude,Intel 與 Apple 晶片同一個安裝檔
Windows 桌機/筆電桌面 App 上方中央 → Code開始功能表打開 Claude;一般是 x64 版,ARM 機型下載 ARM64 版
iPhone/iPadClaude App 下方分頁 → CodeApp Store 搜「Claude by Anthropic」;iPad 裝同一支 iOS App
AndroidClaude App 下方分頁 → CodeGoogle Play 搜「Claude」
任何瀏覽器claude.ai/code免安裝,適合臨時借別人電腦
終端機指令 claude要另外安裝,見本頁第 4 節

👉 小結:電腦看上面、手機看下面,認「Code」這個字。看不到 Code 分頁,九成是帳號還在免費方案,不是 App 壞掉。

2專案資料夾要設在哪?放桌面還是 C 槽?

先講結論,再講為什麼:不要放在會被 OneDrive 或 iCloud 同步的桌面。建一個專門的資料夾,之後所有作品都丟進去。

Windows 建議這樣放
C:\claude\
   ├─ my-site\        ← 第一個作品
   ├─ price-tool\     ← 第二個作品
   └─ client-page\    ← 第三個作品

在 C 槽根目錄按右鍵 → 新增資料夾 → 命名 claude。路徑短、沒有中文、沒有空白、不會被雲端同步。

Mac 建議這樣放
/Users/你的帳號/claude/
   ├─ my-site/
   ├─ price-tool/
   └─ client-page/

Finder 按 Shift + Command + H 回到個人資料夾,在那裡新增 claude。避開「桌面」與「文件」,那兩個預設會被 iCloud 同步。

為什麼不建議放桌面?

你會遇到的狀況實際發生什麼事
存檔後檔案被鎖住OneDrive/iCloud 正在上傳那個檔,Claude 同時要寫入,兩邊打架,出現「檔案正由另一個程式使用」
同步轉圈圈轉不完做網站會產生 node_modules 這種內含幾萬個小檔的資料夾,同步軟體會一個一個傳,電腦直接卡死
路徑有中文和空白Windows 的桌面實際路徑是 C:\Users\你\OneDrive\桌面\,中文字與空白常讓部署指令噴錯
在別台電腦不見了雲端空間滿了、或同步暫停,檔案會顯示成「僅線上可用」,Claude 讀不到內容

已經放在桌面、而且用得好好的人,不用急著搬——上面四種狀況出現任何一種再搬就好。搬的時候整個資料夾剪下貼上到 C:\claude\,再回 Claude Code 重新選一次資料夾即可。

資料夾命名三條規矩

  • 全部小寫英文,不要中文:price-tool ✓ / 價格工具
  • 用短橫線代替空白my-first-site ✓ / my first site
  • 一個作品一個資料夾,不要十個作品全塞同一層。之後 Claude 才分得清哪個檔案是哪個案子的。

👉 小結:一個 claude 母資料夾,底下一個作品一個子資料夾,全英文小寫,離開雲端同步區。這件事花你三分鐘,可以省掉之後三小時的鬼打牆。

3Claude 必做設定:開工前的八個勾

照這張表由上往下做一次,做完就可以正式上課。第 6、7 項是差別最大的兩項——很多人覺得「Claude 講話怪怪的、每次都要重講一遍」,就是漏了這兩個。

 設定項目在哪裡做怎麼確認做好了
1訂閱方案claude.ai 登入後 → 設定 → 方案。Claude Code 需要 Pro / Max / Team / Enterprise點 Code 分頁不會跳升級提示
2登入同一個帳號桌面 App 與手機 App 用同一個帳號登入手機 Code 分頁看得到電腦上的工作階段
3選工作資料夾Code 分頁 → 環境選 LocalSelect folder → 選第 2 節建的資料夾畫面上方看得到資料夾路徑
4選模型送出鍵旁邊的下拉選單上課前老師會統一說今天用哪一顆
5權限模式送出鍵旁邊的模式選單,或按 Shift + Tab 循環切換見下方說明,新手先用 Manual 或 Accept edits
6建立 CLAUDE.md在對話框輸入 /init,它會自己讀專案然後寫一份資料夾裡出現 CLAUDE.md
7鎖定繁體中文+你的身分把下方範本貼進 ~/.claude/CLAUDE.md(個人版,所有專案通用)Claude 回你繁體中文,而且知道你是誰
8健檢終端機輸入 claude doctor(只有裝了 CLI 才需要)沒有紅字警告

權限模式:這四個選項決定它會不會先問你

模式行為什麼時候用
Manual每改一個檔案都先問你,你按同意才動第一次上課建議用這個,看清楚它到底改了什麼
Accept edits改檔案不問,跑指令才問熟了之後最順手的一檔
Plan只規劃、完全不動檔案大改造之前,先叫它講清楚要怎麼改
Auto由背景判斷,只擋危險動作Pro/Max/Team 方案的預設值,做熟的例行工作才用

個人版 CLAUDE.md 範本(複製去改成你自己的)

這份放在 ~/.claude/CLAUDE.md(Windows 是 C:\Users\你的帳號\.claude\CLAUDE.md),所有專案都會自動吃到,等於幫 Claude 建一張你的名片。在 Claude Code 裡直接說「幫我把這段寫進我的個人 CLAUDE.md」就行,不用自己找資料夾。

## 語言
- 一律使用繁體中文回答,程式碼註解也用繁體中文。

## 我是誰
- 我是(你的職稱/行業),主要服務(你的區域或客群)。
- 我的聯絡方式:(電話/官方 LINE)。

## 我的工作習慣
- 做網頁一律做成單一 HTML 檔,可以直接點兩下打開。
- 每個網頁都要先顧手機版,交付前用 375 寬檢查一次。
- 網頁頁尾一律附上我的姓名、聯絡方式與法定應揭露資訊。

## 不要做的事
- 不要用我沒講過的資料編造數字。
- 不確定的地方先問我,不要自己假設。

順手記起來的幾個指令

指令作用
/init讓 Claude 讀過整個資料夾,自動生一份專案的 CLAUDE.md
/memory打開所有記憶檔來看、來改,也可以開關「自動記憶」
/context確認這次對話到底吃到哪幾個 CLAUDE.md(設定沒生效時第一個查這個)
/config模型、自動更新頻道等偏好設定
/clear清掉這次對話重來(檔案不會被刪)
/mobile跳出 QR Code,掃了直接去下載手機 App
/help忘記指令就打這個

👉 小結:設定的重點不是「裝好」,是「讓它知道你是誰、聽得懂你的規矩」。第 6、7 項的 CLAUDE.md 寫得越具體,你之後每次開工少講十句話。

4環境安裝:Git、Mac 的額外一步、Node.js

先搞懂誰是必裝
  • 桌面版 Claude App 本身不需要你先裝任何東西,它已經內建 Claude Code。
  • Git:強烈建議裝。Windows 上沒裝 Git,Claude 少掉一整組 Bash 指令能力;另外你的作品要存檔、要回上一版、要放 GitHub,都靠它。
  • Node.js:等你要把網頁部署上線(Netlify、Cloudflare)或要裝終端機版 Claude Code 才需要。

(a) Git 怎麼裝

Windows
  1. git-scm.com/downloads/win,下載 64-bit 安裝檔。
  2. 安裝過程全部按 Next 就好,不用改任何選項。
  3. 裝完重開 PowerShell,輸入 git --version,有跳出版本號就成功。

裝 Git for Windows 會順便給 Claude Code 一個叫 Git Bash 的環境,Claude 才能用 Bash 指令;沒裝的話它會改用 PowerShell,多數教學範例的指令就得換寫法。

Mac
  1. 打開「終端機」(Terminal)。
  2. 輸入 git --version 按 Enter。
  3. 如果跳出安裝視窗,按「安裝」,等它跑完(就是下面 (b) 說的 Xcode 命令列工具)。
  4. 跑完再輸入一次 git --version 確認。

也可以到 git-scm.com/downloads/mac 下載,或裝了 Homebrew 之後用 brew install git

Git 裝完,做一次就好的設定

git config --global user.name "你的名字"
git config --global user.email "你的Email"

這兩行是在檔案的修改紀錄上簽名用的,沒設定的話之後存檔會一直跳警告。跟 GitHub 有沒有帳號無關,先設就對了。

(b) 蘋果(Mac)還要多裝什麼

項目要不要裝怎麼做/為什麼
Xcode 命令列工具
Command Line Tools
必裝 終端機輸入 xcode-select --install,跳視窗按「安裝」。Mac 的 git 就藏在這包裡面,沒裝就沒有 git,很多工具也跑不起來。約 1~2 GB,網路慢的話請提早裝好,不要留到上課當天。
Homebrew 建議 Mac 的軟體管家。裝了之後要什麼打一行就好,例如 brew install node。安裝指令去 brew.sh 首頁複製那一長串貼到終端機。
隱私權授權 視情況 第一次讓 Claude 讀「桌面/文件/下載」裡的檔案時,macOS 會跳出詢問視窗,要按允許。不小心按了拒絕,去「系統設定 → 隱私權與安全性 → 檔案與資料夾」把它打開。
系統版本 檢查 需要 macOS 13 以上。左上角蘋果 →「關於這台 Mac」看得到版本。太舊的機器請先更新系統。

Windows 這邊對應的門檻是 Windows 10(1809 版)以上,記憶體 4GB 以上。近五年的機器基本上都過。

(c) 為什麼要裝 Node.js?那些記錄檔又是幹嘛的?

Node.js 是「讓你的電腦看得懂 JavaScript」的引擎。你平常寫網頁,JavaScript 是跑在瀏覽器裡的;但有一大票工具是用 JavaScript 寫的、而且要在你的電腦上跑——沒有 Node.js,這些工具就完全叫不動。我們課堂上會用到的至少有三類:

你想做的事為什麼會用到 Node.js
把網頁部署上線Netlify、Cloudflare 的部署工具都是 npm 套件,指令長這樣:npx netlify deploynpx wrangler pages deploy
本機預覽要在電腦上開一個臨時網址看成品(而不是直接點兩下開檔案),靠的是 Node 起的小型伺服器
裝終端機版 Claude Code走 npm 安裝這條路的話需要 Node.js 22 以上npm install -g @anthropic-ai/claude-code
Node.js 怎麼裝
  1. nodejs.org,下載標示 LTS 的版本(LTS=長期支援,穩定版,不要抓最新的實驗版)。
  2. Windows 下載 .msi、Mac 下載 .pkg,一路按下一步。
  3. 重開終端機,輸入 node -vnpm -v,兩行都有版本號就成功。

Mac 有 Homebrew 的話,一行 brew install node 也可以。

裝完會多出來的東西
  • npm:跟著 Node 一起裝好的套件管理員,負責下載工具。
  • npx:不安裝、直接跑一次某個工具。我們部署網頁大多用這個,用完不留垃圾。
  • node_modules/:工具的零件倉庫,動輒上萬個檔案。可以整個刪掉,下次跑指令會自己重建——這也是為什麼它不該待在雲端同步資料夾裡。

記錄檔:Claude 會偷偷幫你留下這些,別亂刪

很多人以為關掉視窗對話就沒了,其實不是。Claude Code 在背後留了好幾種檔案,這也是它「下次還記得你」的原因:

檔案/資料夾作用能不能刪
CLAUDE.md
放在專案資料夾裡
這個案子的規矩:要用什麼風格、頁尾放什麼、哪些字不能寫。每次對話開頭都會被讀一次 不要刪。這是你最重要的資產,寫得越清楚,Claude 越像你的員工
~/.claude/CLAUDE.md
個人版,在你的使用者資料夾
跨所有專案的個人規矩:語言、身分、聯絡方式、慣用做法 不要刪。第 3 節的範本就是寫在這裡
對話記錄
~/.claude/projects/…
每一次對話的完整逐字記錄。所以你隔天可以接著昨天講(終端機用 claude -c 續接、claude -r 挑一則舊的) 可以刪,但刪了就接不回昨天的進度。它預設也會自己清掉太舊的
自動記憶
…/memory/MEMORY.md
你糾正過它的事、你的偏好,它會自己記下來,下次不用你再講一遍。想看寫了什麼就打 /memory 可以刪也可以改,它就是純文字檔。覺得它記錯了就直接改掉
node_modules/ Node 工具的零件倉庫 可以整包刪,需要時會自己長回來
.git/ Git 的版本歷史,你改壞了要回上一版靠它 不要刪,刪了所有歷史版本一起沒

👉 小結:Git 管「你的檔案改了什麼」,Node.js 管「工具跑不跑得起來」,記錄檔管「Claude 記不記得你」。三件事各司其職,缺一個就會有一種你搞不懂的卡關。

5常見卡關:學員最常問的六題

我點 Code 分頁,它叫我升級,是不是要另外買?
是。Claude Code 需要 Pro、Max、Team 或 Enterprise 方案,免費方案沒有這個功能。這不是加購項目,升級訂閱方案就會開通。
手機可以直接寫程式嗎?
不行,手機上的 Code 分頁是遙控器不是工作機。它能做兩件事:開一個跑在雲端的工作階段,或是遙控你家裡那台還開著機、還開著 Claude 的電腦。電腦關機了就遙控不到。
一定要放 C 槽嗎?我習慣放桌面。
不是規定,是少踩雷。真正的地雷是「雲端同步」跟「路徑有中文」,不是 C 槽本身。放 D 槽、放隨身碟以外的任何本機位置都可以,只要避開 OneDrive/iCloud 同步區,資料夾名稱用英文。
我明明講過的事,它下次又忘記,怎麼辦?
寫進 CLAUDE.md。對話裡講的話只在這次有效,寫進 CLAUDE.md 才會每次開場都被讀到。打 /context 可以確認這次到底有沒有吃到那個檔案。
Git 跟 GitHub 是同一個東西嗎?
不是。Git 是裝在你電腦裡的存檔工具,沒有網路也能用;GitHub 是放 Git 專案的網站。本課程只要求你裝 Git,GitHub 帳號等要團隊協作或要用雲端功能再開。
裝到一半噴一堆紅字,怎麼判斷壞在哪?
三步:① 終端機打 claude doctor,它會列出安裝與設定的問題;② 確認 git --versionnode -v 是不是都有版本號;③ 還是不行就把紅字整段截圖丟進 Claude 對話框問它——這是它最擅長的事。

👉 小結:設定卡關九成不是你笨,是少了一個前置條件。把上面三個檢查指令跑過一輪,通常自己就找得到答案。

資料更新日期:2026-09-18|整理:小蟲老師 賴明章(豫卓策略)
資料來源:Anthropic 官方文件 code.claude.com/docs(安裝需求、方案限制、指令與檔案位置以官方最新說明為準)
這堂課要用到的東西

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

分析風格
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 對話直接打中文,它就用中文回你。
02 風格分析YAML

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

為什麼要先找圖?

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

選一種方法開始
兩種都可以,看你今天的狀態
方法一|興趣牆
直覺選圖,讓 AI 找出共同風格
操作步驟
1打開 Pinterest,搜尋你想呈現的專業形象(例如:insurance broker branding、car insurance landing page、risk management brand)
2純靠直覺,找 3 張「看到就喜歡」的圖,不必分析原因
3截圖或存圖,帶進 YAML 分析器(Gemini 或 ChatGPT 版皆可),貼上這句話:
請個別放入 YAML 中,讓他幫你分析出視覺顏色的提示詞:跑出一段程式碼,有很多種顏色的就是了!
方法二|色系歸納法
從顏色切入,找到你的視覺語言
操作步驟
1先選一個你想要的主色調,例如:工程藍圖藍(精準可靠)、深灰+警示橘(風險管理感)、大地暖色(家與資產的溫度)
2在 Pinterest 搜尋這個色系+用途,例如:「blueprint style web design」、「navy insurance brand identity」
3找出 3 張色感最對的圖,截圖後貼入 YAML 分析,用這句話:
請個別放入 YAML 中,讓他幫你分析出視覺顏色的提示詞:跑出一段程式碼,有很多種顏色的就是了!
常用搜尋關鍵字參考
insurance broker branding blueprint web design car insurance landing page risk management report technical line art icon navy orange brand palette
找完 3 張圖了?
請個別放入 YAML 中,讓他幫你分析出視覺顏色的提示詞:
跑出一段程式碼,有很多種顏色的就是了!
00 產險營業員專班流程

這堂課從頭到尾就五步,先看懂全貌再開始,不會做到一半不知道自己在哪

🎯 這堂課要做出什麼?

用 AI 做出屬於你自己的產險業務員個人官網(或團隊官網),而且真的能上線給客戶看。
順序是:先讓 AI 記住你的應揭露資訊 → 先把風格 YAML 定好 → 用 PRD 填網站需求 → 跟著三個範例做一次 → 上線
每一關下面都有對應的分頁,卡住就點進去看細節。

1
先讓 AI 記住你的應揭露資訊
單位名稱、姓名、證號、聯絡方式一次交代清楚,之後 AI 產出的每一頁頁尾都會自動帶上,不會是來路不明的網頁。
⚠️ 這一關不是為了好看:產險業務員對外文宣必須揭露所屬公司與登錄字號,不得承諾理賠結果,理賠一律以保單條款為準。一開始就讓 AI 記住,後面每個頁面才不會漏掉。
對應分頁:01 業務員應揭露資訊
前往
2
網站開工前,先把 YAML 做好
風格沒先定,做出來的網站就會很像路人。到 Pinterest(或現成 preset)挑幾張圖,盡可能單純,丟給 AI 生成一份 YAML 風格提示詞,之後每個作品都套同一份。
對應分頁:02 風格分析YAML
前往
3
填寫網站的基本資訊
要做業務員個人官網、單位團隊官網,還是給客戶用的工具站?給誰看、要放什麼、想長什麼樣,用 PRD 表單一步一步填清楚。需求先想清楚,AI 才不會做出四不像。表單產出的提示詞最後一句已經幫你加好「請幫我將這個 PRD,做成一個網站。」整段複製貼給 Claude Code 就會開始做。
對應分頁:03 PRD製造機
前往
4
跟著三個範例做一次
三個手把手範例,每個都有完整提示詞可以直接複製:04 汽車事故賠償缺口試算器(給客戶用)、05 客戶保單到期與服務整理器(單位內部用)、06 客戶訊息自評系統(自己用)。做完一個,你就知道 PRD 產出的提示詞怎麼落地。
對應分頁:04 · 05 · 06 實作
前往
5
部署上線,拿到自己的網址
雛形做好要能給客戶看才算數。用 Cloudflare Pages 或 Netlify 發布,拿到專屬網址;想再進階,就自己掛一個網域。
對應分頁:07 部署
前往
👉 小結:先給揭露資料(含證號)→ 先定風格 YAML → 填網站需求 → 跟著範例做一次 → 上線
卡在哪一關就點哪一張卡,不用照順序硬走完。
課堂外隨時可以看的
08 常見用法
營業處抽屜裡的紙本表單,變成客戶點開就能用的網頁——九個示範一次看
🧩 互動元件百科
28 種元件全部可以直接操作體驗,從選擇類、輸入類到展業特殊工具,一頁看完。
📦 提示詞素材包
15 組可直接套用的產險業務 AI 提示詞,點「複製Prompt」帶走,貼到 Claude 就能用
01 業務員應揭露資訊

AI 做的每個對外作品,頁尾都要帶上這一塊——專業者的合規門面

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

AI 產出的網頁預設不會幫你放業務員登錄證字號與所屬公司資訊。
沒有揭露的保費試算工具,客戶分不清你是「合格登錄的業務員」還是網路上隨便一個報價機器人;帶了完整揭露,同一個工具立刻變成你的專業名片。
先把這塊做好、教給 AI,之後每個作品自動合規。

對外作品應揭露的六件事
🏢 所屬公司全名
產物保險公司/保險經紀人/保險代理人公司完整名稱
👤 業務員姓名+職稱
用登錄的正式職稱,寫清楚
📜 業務員登錄證字號
依保險業務員管理規則向產險公會登錄之字號
🧾 登錄險種範圍
財產保險/併同傷害及健康保險,有登錄才能招攬
📍 服務據點與聯絡方式
營業處地址、電話,讓客戶查得到人
⚠️ 免責聲明
保費試算與商品介紹必附:承保範圍、除外責任與自負額以保單條款為準
揭露區塊產生器
填一次,直接產出「頁尾揭露文字」與「交給 AI 的指令」
職稱
所屬公司全名
姓名
業務員登錄證字號
登錄險種範圍
服務據點地址
電話
Email 或官方 LINE(選填)
預覽(就是之後每個網頁頁尾長的樣子):
(開始填寫,這裡會即時更新)
「交給 AI 的指令」=揭露資訊+一句規則:之後做任何對外網頁,頁尾自動加上這塊。貼進下方三個平台,設定一次終身受用。
用語紅線(產險特別容易踩):保險業務員管理規則第 19 條明定招攬不得有虛偽不實、誇大、誤導或不當比較。 產險最常見的誤導字眼就是「全險」——甲式車體險也不是什麼都賠,講「全險」等於埋下理賠糾紛。 「保證理賠」「一定賠得到」「保證最低價」「什麼都賠」「不用自負額」這類話一律不能出現在你的工具與文案裡,AI 有時會自作聰明幫你加,看到就刪。 另外三條底線:保費收了要當日繳付公司,不得挪用要保書與告知事項不得代填代簽不得協助或暗示客戶虛報損失、擴大出險(那已經是保險詐欺,不只是懲處問題)。 實際規範以保險法、保險業務員管理規則、強制汽車責任保險法與所屬公司內規為準。
把揭露資訊教給 AI:四個設定位置
貼上剛剛複製的「交給 AI 的指令」,設定一次,之後 AI 幫你做的每個網頁、每份文件,頁尾自動帶上業務員揭露區塊。你用哪個工具,就設哪一個;四個都設也可以,彼此不衝突。
1
登入 ChatGPT,點右上角大頭照 → 設定
在 chatgpt.com 登入後,點右上角頭像,選單展開後選「設定」。
2
設定 → 個人化 → 自訂指示
英文版路徑:Settings → Personalization → Custom instructions
3
在「你希望 ChatGPT 如何回應?」欄位貼入
你剛剛從產生器複製的「交給 AI 的指令」
4
儲存,每次新對話自動套用
之後請它做網頁,頁尾就會自動帶揭露區塊。
設定完,一定要做這一步:驗證
不管你設的是哪一個平台,開一個全新的對話(不要用剛剛那個),問它一句:
我的揭露資訊是什麼?請完整念一次給我聽。
念得出來=設定生效,可以往下做。念不出來=設定沒吃到,對照下面四個最常見的原因:
ChatGPT 自訂指示視窗最下面有「為新對話啟用」開關,沒打開等於沒設。另外它只對儲存後新開的對話生效,臨時對話模式一律不套用。
Gemini Gem 只在「從左側 Gems 點進去」開的對話有效。回首頁按新對話,等於沒設。
Claude 網頁版 Project 指令同理,從首頁開的新對話不在 Project 裡。把做法 A 的個人偏好也設好,就不會有這個問題。
Claude Code CLAUDE.md 要重開新對話才載入。若是自己用記事本存的,檢查檔名有沒有變成 CLAUDE.md.txt(Windows 預設隱藏副檔名,看不出來)。
再加一層保險。設定生效不等於每次都不會漏——網頁需求一長,AI 的注意力會被功能吃掉,頁尾就忘了。所以之後每次要網頁,提示詞結尾固定補一句:「頁尾加上我設定裡的揭露資訊」。設定讓 AI 知道資料是什麼,這句提醒它這次要用,兩個一起做才不會漏。
揭露資訊設好、驗證過了?
接下來到「02 風格分析YAML」先把網站風格定下來,再進「03 PRD製造機」填需求。
08 常見用法

營業處抽屜裡的紙本表單,變成客戶點開就能用的網頁——九個示範一次看

這一頁在示範什麼? 下面九個網頁,全部改造自產險業務員包包裡的 Word、Excel 和 PDF—— 出險文件清單變成可查詢的網頁、強制險與任意險的賠償分層變成線上計算機、紙本需求分析表變成可以直接填寫列印的表單。 這就是本課要教你的事:你手上的每一份表單,都能變成這樣。
查詢型:表格上網
📋 懶人包
出險理賠懶人包
車禍與住宅火災怎麼辦?現場做什麼、要備哪些文件
📋 速記表
產險商品速記表
六大險種、四種客群、關鍵期限一頁查
📋 對照表
賠償責任分層對照表
輸入事故金額,強制險賠到哪、任意險接多少
計算型:公式上網
🧮 計算機
計算小幫手
短期費率+不足額比例分攤+自負額淨賠付
🧮 教具表
住宅火險保額適足性試算
保額打幾折,理賠就打幾折——一張表講清楚
表單型:紙本文件上網
📝 分析表
產險需求分析表
車、房、責任、旅遊四大風險勾選式
📝 總覽表
家庭與商家保單總覽表
車牌、門牌、店面一頁掌握,到期日不漏接
📝 報告單
出險理賠進度報告單
出險進度+文件核對+理賠結報一張搞定
📝 健檢單
保單健檢報告單
六大保障現有 vs 建議,缺口自動算
出險理賠懶人包

車禍現場先做什麼?火災水損怎麼報?兩個情境講完

出險理賠懶人包
永安保險經紀人(課堂示範版)
Q1. 發生車禍,現場要做什麼?要準備哪些文件?
A. 現場五步驟先做完,文件之後才補得回來:
步驟要做的事
① 人先安全確認有無人員受傷、擺放故障標誌,必要時叫救護車
② 報警有人受傷或責任有爭議一律報警,事後才申請得到事故資料
③ 拍照存證車輛四角、雙方車損特寫、路口號誌與煞車痕、對方車牌與駕照行照
④ 通知保險公司當下就打,別等修車廠幫你報——通知晚了,理賠會卡住
⑤ 送修估價先確認保險公司是否指定或認可的維修廠,估價單要留存
應備文件去哪裡拿
理賠申請書保險公司官網下載或找服務人員索取
行照、駕照、身分證影本被保險人與駕駛人各一份
道路交通事故當事人登記聯單現場員警提供;事故資料另可向警察機關申請
估價單/維修發票維修廠開立,車體險理賠核算依據
事故現場照片自己拍的最即時,越完整越少爭議
被保險人存摺封面影本理賠金匯款帳戶
小提醒:對方體傷的部分走強制汽車責任保險(限額、無過失也賠);
對方的車損與其他財物損失強制險不賠,要靠任意第三人責任險的財損保額;
自己的車要賠,看有沒有保車體損失險,且要扣自負額與零件折舊。
※ 酒駕、無照、故意行為等情形,任意險通常列為除外;強制險雖仍給付受害人,但保險人於給付後得向加害人代位求償
Q2. 住宅火災、地震或颱風水損,流程怎麼走?
A. 財產險的關鍵是「現場」與「清單」,別急著清掉:
步驟要做的事
① 通報火災報消防、確保人身安全;同時通知保險公司出險
② 保留現場殘餘物、受損物品先別丟;能拍就拍,逐項拍
③ 列財損清單受損物品名稱、數量、購買時間與金額,有發票或購買紀錄最好
④ 勘查理算保險公司指派理賠人員或公證人到場勘查、認定損失
⑤ 估價修復取得修復估價;重置成本與實際現金價值的認定會影響金額
⑥ 核定給付文件收齊後核定,依約定期限給付
Q3. 通知與給付,有哪些期限要記?
事項期限依據與備註
出險通知保險公司5 日知悉事故後(保險法第 58 條,契約另有約定者從其約定)
保單有約定給付期限依約定自收齊證明文件後起算
保單無約定期限15 日內自收齊證明文件後起算(保險法第 34 條)
逾期未給付加計年利一分應給付遲延利息(年息 10%)
理賠請求權時效2 年自得為請求之日起(保險法第 65 條)
備註
  1. 財產保險採損害填補原則:賠的是實際損失,不會因為多保幾家就多領——這點跟人身保險完全不同,客戶最容易誤解。
  2. 保額低於保險價額(不足額保險)時,理賠會按比例分攤,等於保額打幾折、理賠就打幾折。
  3. 車體險理賠要扣自負額與零件折舊;小額損失出險,可能省下的錢比次年保費加成還少,出險前先算。
  4. 保險公司若需補件,時程會從文件補齊後重新起算,一次備齊最省時間。
  5. 理賠有疑義時,可先向保險公司申訴,或向金融消費評議中心申請評議。
本頁依保險法第 34、58、65 條與一般產險實務整理,實際理賠以保單條款與保險公司核定為準
改造自營業處紙本文件|Vibe Coding 課堂示範
產險商品速記表

六大險種、四種客群、關鍵期限,一頁查完

產險商品速記表
永安保險經紀人(課堂示範版)
一、六大險種速覽
險種保什麼最常被誤解的地方
強制汽車責任保險對方(受害人)的體傷醫療、失能與死亡給付,限額、無過失責任不賠財損、不賠自己的車;不是「保了就全部搞定」
任意第三人責任險
/超額責任險
超過強制險的體傷賠償,以及對方車輛與財物損失體傷與財損是兩個獨立保額;超額責任才是真正的天花板
車體損失險
(甲/乙/丙/限額車對車)
自己車輛的碰撞、擦撞等毀損要扣自負額與零件折舊;乙丙式的承保事故範圍比甲式窄
竊盜損失險整車失竊、零件被竊(部分需附加)有自負額比例;車內私人物品通常不在承保範圍
住宅火災及地震基本保險建築物與屋內動產的火災等損失+地震基本保障地震基本險以全損為條件、保額有上限;保額不足會比例分攤
責任保險
(公共意外/產品/雇主)
營業場所、產品或員工事故造成第三人或員工的損害賠償責任是「賠別人」的保險;很多店家把它跟火險混為一談
二、四種客群檢視重點
客群優先順序檢視重點
新車車主強制+三責+超額+車體新車前三年車體險價值高;三責體傷保額別只保基本額度
有房貸的屋主住宅火險+地震+擴大地震銀行要求的保額多半只夠貸款餘額,未必等於重置成本
開店的自營商商業火險+公共意外責任+雇主責任裝潢與生財器具是否納保、營業中斷要不要保
常出國的家庭旅平險+旅遊不便險信用卡附贈的額度與範圍通常有限,出發前確認
三、投保與理賠關鍵期限
事項期限起算與備註
出險通知保險公司5 日知悉事故後(保險法第 58 條;契約另有約定從其約定)
理賠給付15 日收齊文件後(無約定期限時,保險法第 34 條)
理賠請求權時效2 年得為請求之日起(保險法第 65 條)
告知義務違反之解除權2 年契約訂立起逾 2 年不得解除;知悉後 1 個月不行使亦消滅(保險法第 64 條)
保單到期續保1 年一約產險多為一年期,到期沒續=當天起零保障,續保提醒是服務核心
四、車體損失險型式比較
型式承保範圍(概念)適合
甲式範圍最廣,含不明車損(找不到肇事者的刮傷凹損)新車、愛車、停放環境複雜
乙式碰撞、傾覆、火災、閃電雷擊、爆炸、拋擲物墜落物等,不含不明車損中古車、預算取捨
丙式(車對車)只賠車與車碰撞常見路況風險、保費敏感
限額車對車車對車碰撞且有理賠上限車齡較高、只想保底
五、告知義務與複保險
據實告知要保書詢問事項應據實填寫(保險法第 64 條),隱匿或不實足以變更危險估計者,保險公司得解除契約
複保險財產保險為損害填補,重複投保並不會重複獲賠;同一標的向多家投保應通知(保險法第 36、38 條)
提醒「先簽名,其他我幫你填」是紅線——要保書與告知事項一定讓客戶自己確認
六、三個常被追問的原則
保險利益對保險標的須有保險利益,契約才有效(保險法第 14~20 條)
代位求償保險公司賠付後,得代位向有責任的第三人求償(保險法第 53 條)
不足額保險保額低於保險價額時按比例分攤(保險法第 77 條),保額打折理賠就打折
各商品承保範圍、除外責任、自負額與給付條件以保單條款為準;法條與給付標準依主管機關公告,修法時請更新
改造自營業處紙本文件|Vibe Coding 課堂示範
賠償責任分層對照表

強制險・任意三責・超額責任|輸入金額,看誰接到哪一層

⚡ 賠償分層快查
事故型態
預估體傷賠償總額(元)
對方財物損失(元,車損等)
任意三責・體傷保額(元/每人)
任意三責・財損保額(元/每一事故)
超額責任險保額(元,無則填 0)
汽車事故賠償責任分層
強制險給付標準依主管機關公告;任意險以保單條款與保額為準
層級誰來賠賠什麼上限
第 1 層強制汽車責任保險對方體傷醫療費用20 萬/每人
第 1 層強制汽車責任保險對方失能(依失能等級給付)最高 200 萬
第 1 層強制汽車責任保險對方死亡(定額)200 萬
第 2 層任意第三人責任險(體傷)超過強制險的體傷賠償依投保保額
第 2 層任意第三人責任險(財損)對方車輛與財物損失(強制險不賠)依投保保額
第 3 層超額責任險第 2 層用完後的體傷與財損賠償依投保保額
第 4 層自己的口袋上面全部接不住的部分無上限
情境(對方體傷賠償)強制險任意三責(體傷 300 萬)仍需自付
強制險的三個特性(客戶最常誤會)
  1. 限額、無過失:不論肇責,受害人都能在限額內請求給付;但「限額」意味著超過的部分要靠任意險。
  2. 只賠對方的人,不賠財物:對方的車、路邊的護欄與店家招牌,強制險一毛都不賠。
  3. 不賠自己:駕駛人自己的傷害要靠駕駛人傷害險或個人傷害險;自己的車要靠車體損失險。
  4. 酒駕、無照、故意等情形,強制險仍先給付受害人,但保險人於給付後得向加害人代位求償;任意險則多列為除外不賠。
  5. 肇事逃逸、對方無保險等情形,受害人可向財團法人汽車交通事故特別補償基金請求補償。
說明
  1. 強制險傷害醫療給付另有分項限額(如病房費、看護費、義肢器材等),實際依「強制汽車責任保險給付標準」核算。
  2. 失能給付依失能等級表核定,本表僅列最高額度,實際金額依等級。
  3. 本表為概念性分層教具,個案賠償金額仍取決於肇責比例、和解結果與法院認定。
給付標準依強制汽車責任保險法及主管機關公告,修正時請更新;實際理賠以保險公司核定為準
改造自營業處 Excel 對照表|Vibe Coding 課堂示範
計算小幫手

短期費率+不足額比例分攤+自負額淨賠付——產險每天在按的計算機,搬上網

📅 短期費率換算
不足一年的保單,按短期費率表計收,不是按天數平分
年繳保費(元)
保險期間(月)
🏠 不足額保險比例分攤
保額 ÷ 保險價額 = 理賠打的折數(保險法第 77 條)
保險金額(元)
保險價額・重置成本(元)
本次損失金額(元)
🚗 車體險理賠淨得
修車估價不等於可領金額——扣完自負額與折舊才是
估價修復費用(元)
自負額(元)
零件折舊自付(元)
📖 實務備忘
  1. 短期費率:常見短期費率表(1 個月 15%、3 個月 35%、6 個月 65%…),實際係數依各公司費率規章與條款;客戶問「我只保三個月為什麼不是四分之一?」這張表就是答案。
  2. 不足額保險:保額只投保重置成本的六成,理賠就只賠六成——住宅火險最常見的糾紛來源,簽單前先把重置成本算清楚。
  3. 自負額與折舊:車體險甲、乙式通常有基本自負額(常見為第一次 3,000、第二次 5,000、第三次以上 7,000 元,依條款),加上零件折舊,實際能領的比想像少。
  4. 出險成本:小額出險會影響次年賠款紀錄係數,保費往上加——出險前先幫客戶算一次划不划算,這是產險業務員最值錢的服務。
  5. 以上皆為概算工具,實際保費與理賠以保險公司費率、核保與核定結果為準。
📄 下一步:把計算結果帶進需求分析與健檢報告
算好的保額與自負額,就是「產險需求分析表」與「保單健檢報告單」裡的那幾行—— 跟客戶講清楚哪些接得住、哪些接不住,信任就是這樣累積的。 這種「一堆欄位+固定公式」的計算,正是最適合做成網頁工具的類型,回到 04 實作單元就做得出來。
計算公式照搬營業處 Excel(元以下四捨五入)|實際金額以保險公司費率與核定為準
住宅火險保額適足性試算

保額打幾折,理賠就打幾折——屋主最該看懂的一張表

先看重點:很多屋主的住宅火險保額,是當年辦房貸時銀行要求的數字——只夠貸款餘額,不等於「把房子蓋回來要多少錢」。 真正該對齊的是建築物重置成本(不含土地)。保額不足時理賠按比例分攤,出事才發現只賠六成,那時候解釋都來不及。
⚡ 輸入條件
建物坪數(不含土地)
每坪重置單價(元)
目前建築物保險金額(元)
住宅火險保額適足性試算表
重置成本為概估教具|實際承保金額以保險公司核保與保單條款為準
損失金額足額投保可領目前保額可領差距
輸入條件後自動計算
地震基本保險:保障有,但別誤會它的規模
項目內容
保險金額上限每一住宅最高 150 萬元(建築物)
臨時住宿費用每一事故 20 萬元
給付條件以建築物「全損」為條件(不堪居住須拆除重建,或修復費用達重置成本一定比例以上)
怎麼補要更高的地震保障,須另加保擴大地震保險等附加條款
怎麼買隨住宅火險附加,費率由主管機關核定;投保時以當年公告費率為準
規則邏輯(講給客戶聽的版本)
  • 建議保險金額(重置成本)= 建物坪數 × 每坪重建單價,不含土地價值——火燒掉的是房子,不是地。
  • 投保成數=目前保額 ÷ 重置成本;理賠金額=損失 × 投保成數(以保險金額為上限)。
  • 每坪重建單價會隨工料行情變動,逐年檢視;裝潢與生財器具是否納保另外確認。
  • 屋內動產(家具衣李)通常按建築物保險金額的一定比例自動承保,額度與範圍依條款。
  • 地震基本保險只保「全損」,且有上限;把它當成最後一道防線,不是完整保障。
本表為簡化教具,未計通膨與工料波動;地震基本保險內容依主管機關公告與保單條款
個案請依實地查勘與核保結果核算|改造自營業處 Excel
產險需求分析表

車、房、責任、旅遊四大風險勾選式——線上填好,列印簽名就能歸檔

產 險 需 求 分 析 表
為提供適切之保障規劃建議,請就下列項目勾選與填寫:
基本資料:
稱呼  聯絡方式
目前狀況:
目前最在意的風險(勾選,可複選)
現有保障(勾選並填保額與到期日)
險種保額到期日
法定給付標準
年度保費預算 新台幣 元 偏好方式:
其他想說的
服務人員 產險業務員
登錄證字號:
所屬公司:
客戶簽名:________ 業務員簽名:________
中華民國  年  月  日
本表為需求瞭解輔助工具,不構成要保文件;正式投保以要保書與保單條款為準|改造自營業處 Word 表單
家庭與商家保單總覽表

車牌、門牌、店面一頁掌握——保費自動加總,到期日一眼看完

家庭與商家保單總覽表
永安保險經紀人(課堂示範版)|整理日期:
保險標的保險公司險種保險金額保費期間起期間迄
年度保費合計:0 保費欄輸入數字會自動加總
提醒
  1. 產險多為一年一約:到期沒續保,隔天起就是零保障,續保提醒是產險服務的核心價值。
  2. 強制汽車責任保險未投保上路可處罰鍰(汽車 3,000~15,000 元、機車 750~1,500 元,並得依規定加重與扣車牌,詳見強制汽車責任保險法)。
  3. 車輛過戶、房屋轉手、營業項目變更,都要辦理批改或退費,別讓保單保錯了人、保錯了標的。
  4. 保險金額每年隨重置成本與車輛現值檢視一次,尤其住宅火險與車體險。
客戶確認:_______ 服務人員:_______
本表為保單整理輔助工具,實際承保內容以各保單條款為準|改造自營業處 Excel 表單
出險理賠進度報告單

出險進度+文件核對+理賠結報——線上填好,列印歸檔

出險理賠進度報告單
永安保險經紀人(課堂示範版)
一、案件資訊 填表日期:
服務人員 事故類型
被保險人 保險標的
涉及保單
出險進度
辦理摘要
下步應辦・預定完成日
二、應備文件核對
文件取得方式已收
理賠申請書保險公司官網下載或服務人員提供
行照・駕照・身分證影本被保險人與駕駛人
道路交通事故當事人登記聯單現場員警提供/向警察機關申請
估價單/維修發票維修廠或工程行開立
事故現場照片被保險人拍攝(越完整越少爭議)
財損清單受損物品名稱、數量、購買資訊
被保險人存摺影本理賠金匯款帳戶
其他:
三、理賠金額結報
保險公司・險種核定金額自負額實際入帳
實際入帳合計:0 服務人員簽章:________
備註
主 管:_______ 客戶簽收:_______
出險應於知悉後 5 日內通知(保險法第 58 條);理賠請求權時效 2 年(保險法第 65 條)|金額欄輸入數字會自動加總|改造自營業處 Word 表單
保單健檢報告單

六大保障現有 vs 建議——缺口自動跳出來,健檢的標準單據

怎麼用:在下方表格輸入「現有保障」與「建議保障」,缺口自動計算—— 缺口為正會標紅棕色,已足夠會顯示綠色。產險健檢的重點不是「賣東西」,是讓客戶第一次把自己的風險曝險看清楚: 撞到人賠不完的那一段、房子燒了只賠六成的那一段,數字攤開來比任何話術都有力。
產險保單健檢報告單
健檢日期:
客戶資料
稱呼 聯絡方式
保險標的 使用性質
保障健檢(輸入數字,缺口自動計算)
保障項目現有保障建議保障缺口
到期日檢視
保單到期日備註(是否已提醒續保)
強制汽車責任保險
任意車險(三責・車體)
住宅火險+地震
整體評語與優先建議
健檢速查:第三人責任體傷保額看的是「最壞情況」而不是平均值,超額責任是 CP 值最高的補強; 車體險看車齡與修車成本;住宅火險看重置成本而不是貸款餘額; 開店的客戶別漏掉公共意外責任與雇主責任。建議值為概估,實際規劃以完整需求分析與核保結果為準。
服務人員(登錄證字號):________ 客戶簽名:________
本健檢為概估輔助工具,不構成招攬文件;實際承保範圍與費率以要保書、保單條款及核保結果為準|改造自營業處 Word 表單
📦 提示詞素材包

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

一、工具起手 Prompt(做網頁工具用)
🚗 車險工具
車險賠償缺口試算器
強制險、任意三責、超額責任分層算,缺口一目了然
🏠 火險工具
住宅火險保額適足性試算器
重置成本 vs 現有保額,理賠打幾折算給屋主看
⏰ 期限工具
續保到期提醒行事曆
產險一年一約,到期日漏接就是零保障
📄 理賠工具
出險文件檢查器
選事故類型,應備文件清單自動列出
📋 內部工具
客戶保單與服務看板
報價到續保,每個客戶走到哪一步一頁掌握
💰 預算工具
家庭風險預算配置器
年度保費預算進來,四大風險配置出去
✍️ 服務工具
保單健檢預約表單
客戶自己選時段,健檢邀約不再已讀不回
🔍 輔助工具
報價比較表產生器
三家報價輸入,差異自動標色排好
二、文件與文案 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 · 賠償缺口快算
Liability Gap Calculator
輸入預估體傷賠償 → 強制險接多少、缺多少
27 · 短期費率快算
Short-rate Converter
年保費 × 短期費率 → 不足一年怎麼收
28 · AI 需求分析欄 🚀
AI Input
輸入一句話 → AI 自動整理產險需求
03 PRD製造機

把「我想要一個網站」變成 AI 看得懂的完整需求,再交給 Claude Code 蓋出來

🎯 這一關要做什麼?

直接跟 AI 說「幫我做個網站」,做出來的一定是四不像。
先用 PRD 表單把需求問清楚——要做業務員個人官網、單位團隊官網,還是給客戶用的工具站——產出一段完整提示詞,再貼給 Claude Code,做出來才會像你要的。
這份表單是產險營業員版:三種類型的範例、預設功能、對象選項都已經換成產險營業員的情境,按「載入完整範本」可以先看一份填好的成品。

01
用 PRD 表單,做出提示詞
需求先想清楚,才不會做出四不像

把你想要的網站——給誰看、要放什麼內容、想要什麼風格——一步一步填一填,表單會自動整理成一份完整、AI 看得懂的提示詞,最後一句已經幫你加好「請幫我將這個 PRD,做成一個網站。」直接用下面的表單,填的內容只存在你這台裝置,關掉再回來還在。

PRD 引導表單(產險營業員版) 另開新視窗
02
把提示詞貼到 Claude Code,做出網站
指示它做出一個產險營業員的網站

按表單 ③ 的「📋 複製完整版」,整段貼進 Claude Code 對話框,它會依照需求做出一個完整的網站(單一 HTML 檔案)。做出來不滿意的地方,直接繼續跟它對話調整就好。

🛡️ 提示詞結尾記得多補一句:「頁尾加上我設定裡的應揭露資訊」——網頁需求一長,AI 的注意力會被功能吃掉,頁尾就忘了。設定讓它知道資料是什麼,這句提醒它這次要用。
開啟 Claude Code
網站做出來了?
先到「04 實作」跟著三個範例做一次,再到「07 部署」把它放上網路、拿到專屬網址。
04 實作-客戶版

跟著步驟,從零做出你的「汽車事故賠償缺口試算器」,給客戶直接用

🎯 這堂課你要做出什麼?

一個可以計算汽車事故賠償缺口的互動式網頁工具。
客戶輸入預估賠償金額與現有保額,
工具自動分層算出強制險接多少、任意險接多少、自己還要出多少

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

功能需求:
1. 輸入欄位:事故型態(對方受傷/失能/死亡)、預估體傷賠償總額(元)、對方財物損失金額(元)、我的任意第三人責任險體傷保額(元)、財損保額(元)、超額責任險保額(元)
2. 自動分層計算:①強制汽車責任保險(死亡定額 200 萬、失能依等級最高 200 萬、傷害醫療每人最高 20 萬,且不承保財物損失)②任意第三人責任險 ③超額責任險 ④仍需自行負擔的金額
3. 顯示方式:四層用卡片或階梯圖呈現,第四層「自己要出的錢」用醒目色與最大字級;下方附三行說明:強制險是限額無過失、不賠財損也不賠自己、酒駕等情形保險人給付後得代位求償
4. 附「本試算為概估,給付標準依主管機關公告,實際理賠以保單條款與保險公司核定為準」的提醒
5. 視覺風格:藍圖工程藍——淡藍圖紙底 #EEF2F9 加 20px 方格線,深墨藍 #14243F 文字,工程藍 #1E4B8F 為主行動色、紅棕 #C2410C 做重點標註,白底卡片、1.5px 細框、6–8px 小圓角,數字用等寬字
開啟 Claude
02
把 Claude 產出的程式碼存成 .html
複製程式碼 → 貼到記事本 → 存檔
1點選 Claude 回應中程式碼區塊右上角的「複製」按鈕
2開啟 Windows 記事本(或 Mac TextEdit),貼上程式碼
3「另存新檔」,檔名輸入 gap.html,存檔類型選「所有檔案」
4雙擊檔案,在瀏覽器開啟,確認畫面是否正常顯示
03
調整到你滿意為止
有什麼不對,繼續跟 Claude 說
常見需要修正的點,直接複製貼給 Claude:
「請把『自己要出的錢』做成整頁最大的數字,其他層縮小」
「財損那一層要標明強制險不賠,避免客戶誤會」
「數字請加千分位逗號,比較好讀」
「手機版跑版了,請修正 RWD」
04
上傳到 Netlify,讓工具能對外分享
免費部署,30 秒上線
1前往 Netlify,點「Add new site」→「Deploy manually」
2把你的 gap.html 直接拖拉進去
3Netlify 自動產生網址,複製後就可以放進 LINE 官方帳號或名片 QR 🎉
前往 Netlify
做完了嗎?舉手讓小蟲老師看看
每個人做出來的呈現方式都不一樣,差異就是你的學習點。
記得在明顯處放上「試算僅供參考,實際理賠以保單條款與保險公司核定為準」——專業者的嚴謹要帶進工具裡。
05 實作-單位版

跟著步驟,做出你專屬的「客戶保單到期與服務整理器」

🎯 這堂課你要做出什麼?

一個供自己與單位內部使用的客戶整理工具。
輸入客戶資料、保險標的與到期日,系統自動整理成結構化的服務卡,
方便追蹤續保進度,也方便跟主管與內勤交接。

01
想清楚「內部工具」需要哪些欄位
客戶版 vs 單位版,需求不一樣
產險的內部整理器通常需要這些資訊:
👤 客戶基本
稱呼、聯絡方式、來源
🚗 保險標的
車牌、車種車齡、房屋地址、店名
📅 到期日管理
強制險、任意險、火險各自到期日
📋 服務進度
報價、決定中、成交、出險處理中
💰 保額與保費
現有保額組合、年度保費、去年出險
📝 客戶備註
在意的點、聯繫習慣、禁忌話題
02
貼給 Claude,說明你要的工具
帶入你需要的欄位與輸出格式
請幫我做一個「客戶保單到期與服務整理器」的互動式網頁工具(單一 HTML 檔案)。

功能需求:
1. 輸入欄位:客戶稱呼、來源(緣故/轉介紹/車行合作/陌生開發)、保險標的(車牌或地址)、現有險種組合摘要、年度保費(元)、各保單到期日(強制險/任意車險/住宅火險)、服務階段(報價中/等待決定/已成交/保單送達/出險處理中/續保提醒,可複選)、下次聯繫日、客戶備註
2. 點擊「產出明細」後,自動整理成一張結構清晰的服務卡,並顯示「距離最近一張保單到期還有幾天」,30 天內用醒目色提示
3. 服務卡可以一鍵複製成純文字,方便貼到 LINE 群組或 Excel
4. 視覺風格:藍圖工程藍——淡藍圖紙底 #EEF2F9 加 20px 方格線,深墨藍 #14243F 文字,工程藍 #1E4B8F 為主色、紅棕 #C2410C 做到期提醒色,白底卡片、1.5px 細框、內部工具感、數字用等寬字
開啟 Claude
03
輸入測試客戶,看輸出是否夠用
用你手上一個真實客戶的「架構」來跑(資料一律先去識別化)
1把程式碼存成 clientcard.html,瀏覽器開啟
2選一個你手上正在服務的客戶,把「去識別化後」的資料填入測試(示範時用假名與假車牌)
3試試「複製純文字」功能,貼到 LINE 看格式對不對
4覺得哪個欄位多餘或缺少?告訴 Claude 調整
保密提醒:這種純 HTML 工具資料只留在你的瀏覽器裡,不會上傳。但客戶個資的保護標準更高(個資法+保險業務員的保密義務): 課堂與測試一律用假資料;若要部署上網共用,切勿把真實客戶姓名、車牌、地址、保單號碼寫死在程式碼中。
做完了?跟隔壁同學交換看看
看看彼此設計的欄位有哪裡不同,
差異反映的是每個人不同的展業習慣,沒有標準答案。
06 實作-個人版

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

🎯 這堂課你要做出什麼?

一個能幫你自評對客戶溝通品質的互動式工具。
貼入你要傳給客戶的報價說明或出險通知,AI 用評分標準逐項拆解,
告訴你哪裡寫得好、哪裡客戶可能看不懂或會誤解。

01
先想好你的評分標準
工具好不好用,關鍵在評分維度設計得夠不夠準
一則好的產險客戶訊息,建議至少涵蓋這幾個維度:
✅ 承保範圍正確
保額、賠不賠、期間有沒有講錯
⚠️ 除外與自負額
不賠的部分、自負額、折舊有沒有講
💬 白話易懂
第一次買產險的人能不能一次看懂
👉 行動指引
客戶知不知道下一步、要準備什麼
🚫 用語紅線
有沒有出現「全險」「保證理賠」
02
貼給 Claude,說明你要的工具
把評分標準帶進 Prompt
請幫我做一個「客戶訊息自評系統」的互動式網頁工具(單一 HTML 檔案)。

功能需求:
1. 使用者貼入一則要傳給客戶的訊息(報價說明、續保提醒或出險通知,Textarea 輸入)
2. 點擊「開始評分」後,從以下五個維度評分(各 20 分,滿分 100):
  ・承保範圍正確(保額、賠與不賠、保險期間是否精準)
  ・除外責任與自負額(不賠的情況、自負額、零件折舊有沒有講清楚)
  ・白話易懂(第一次買產險的人能否一次看懂)
  ・行動指引(客戶是否知道下一步要做什麼、準備什麼)
  ・用語紅線檢查(有沒有出現「全險」「什麼都賠」「保證理賠」「保證最低價」,出現就大幅扣分並標紅)
3. 每個維度顯示分數+一句具體改善建議
4. 最後顯示總分與整體評語
5. 視覺風格:藍圖工程藍——淡藍圖紙底 #EEF2F9 加 20px 方格線,深墨藍 #14243F 文字,工程藍 #1E4B8F 為主色、紅棕 #C2410C 做警示標註,白底卡片、1.5px 細框、分數用等寬字
開啟 Claude
03
存檔 → 測試 → 調整
貼入你自己寫過的訊息來測試看看
1把程式碼存成 mailcheck.html,瀏覽器開啟
2貼入你最近傳給客戶的一則報價或續保訊息(先拿掉姓名、車牌、保單號碼),點擊評分
3看看哪個維度最低分,那就是你最需要加強的地方
4根據建議修改訊息,再評一次,對比前後分數
做完了?比比看誰的評分維度最犀利
每個人的側重點都不一樣:有人重條款精準、有人重溝通安撫,
沒有對錯——重點是把你的專業判斷變成可重複使用的標準。
07 部署

把你做好的 HTML 網頁放上網路,讓客戶與夥伴直接使用

Cloudflare Pages
免費、快,台灣連線速度優
https://XXX.pages.dev
1登入 Cloudflare → 左側「Workers 和 Pages」→ 建立 → Pages → 「直接上傳」
2先把 HTML 檔改名 index.html 放進一個資料夾,整個資料夾拖進去
3取專案名 → 部署完成,拿到 ○○.pages.dev 網址
跟 Netlify 並列的兩個主力,額度大、速度快,小蟲老師的新站都放這裡;差別是要用「資料夾」上傳、檔名必須是 index.html。
前往 Cloudflare Pages
Netlify
獨立網址,30 秒免費上線
https://XXX.netlify.app
1前往 netlify.com 登入(可用 Google 帳號)
2點「Add new site」→「Deploy manually」
3把你的 HTML 檔案直接拖拉進虛線框
4Netlify 自動產生網址,複製後傳給客戶 🎉
適合獨立工具頁面,網址乾淨、免費、不需技術背景,30 秒完成。
前往 Netlify
更多部署平台(進階選配)
新手用上面兩個就夠,這五個是你的第二把刀
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 lin.ee/YaVpO5VS