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 這個字不會變。

電腦：Mac／Windows 桌面 App 分頁在視窗最上方正中央：Chat｜Cowork｜Code。上課請一律點 Code。點下去若跳出升級提示，代表你的帳號還是免費方案。

手機：iPhone／Android 都一樣 裝官方 Claude App（iOS 與 Android 都有，iPad 裝 iOS 版），分頁在畫面最下面那一列，找 Code。手機不會在你手機上跑程式，它是遙控器：遙控雲端，或遙控你自己開著的電腦。

進階：終端機（CLI）與瀏覽器 終端機版要另外安裝，指令就一個字 claude。瀏覽器版在 claude.ai/code。本課程用桌面 App 就夠，這兩個等你想跑自動化再說。

你手上的裝置	Claude Code 在哪裡	備註
Mac 桌機／筆電	桌面 App 上方中央 → Code	Applications 打開 Claude，Intel 與 Apple 晶片同一個安裝檔
Windows 桌機／筆電	桌面 App 上方中央 → Code	開始功能表打開 Claude；一般是 x64 版，ARM 機型下載 ARM64 版
iPhone／iPad	Claude App 下方分頁 → Code	App Store 搜「Claude by Anthropic」；iPad 裝同一支 iOS App
Android	Claude App 下方分頁 → Code	Google 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 分頁 → 環境選 Local → Select 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

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

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

Mac

打開「終端機」（Terminal）。
輸入 git --version 按 Enter。
如果跳出安裝視窗，按「安裝」，等它跑完（就是下面 (b) 說的 Xcode 命令列工具）。
跑完再輸入一次 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 deploy`、`npx wrangler pages deploy`
本機預覽	要在電腦上開一個臨時網址看成品（而不是直接點兩下開檔案），靠的是 Node 起的小型伺服器
裝終端機版 Claude Code	走 npm 安裝這條路的話需要 Node.js 22 以上：`npm install -g @anthropic-ai/claude-code`

Node.js 怎麼裝

開 nodejs.org，下載標示 LTS 的版本（LTS＝長期支援，穩定版，不要抓最新的實驗版）。
Windows 下載 .msi、Mac 下載 .pkg，一路按下一步。
重開終端機，輸入 node -v 與 npm -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 --version、node -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 出品，個人免費

下載

Typeless（語音輸入）

AI 語音聽寫，用講的取代打字，跟 AI 對話快很多；Windows／Mac／手機都有

下載

🌐 英文頁面看不懂？Chrome 一鍵翻成中文

上面的下載頁都是英文，用 Chrome 開就能整頁翻譯：
① 單頁翻譯：在頁面空白處按右鍵 →「翻譯成中文（繁體）」，或點網址列右側的翻譯圖示。
② 一勞永逸：翻譯小視窗點右側「⋮」→ 勾「一律翻譯英文」，以後所有英文網頁自動變中文。
③ 手機版：頁面底部會跳出翻譯列，點「中文（繁體）」即可。
小提醒：翻譯只作用在「網頁」，裝好的軟體介面翻不到——不過沒關係，跟 AI 對話直接打中文，它就用中文回你。

02 風格分析YAML

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

為什麼要先找圖？

YAML 風格提示詞不是憑空想像的——它來自你「看到就覺得這像我們診所」的視覺感受。
先去 Pinterest 找 3 張讓你安心的圖（乾淨、清楚、不冰冷），再讓 AI 幫你拆解背後的設計語言，
才能寫出真正屬於你們機構的風格框架，而不是套用別人的模板；病人一點開就覺得「這是正規診所」。

選一種方法開始

兩種都可以，看你今天的狀態

方法一｜興趣牆

直覺選圖，讓 AI 找出共同風格

操作步驟

1打開 Pinterest，搜尋你想呈現的機構形象（例如：clinic website design、medical reception interior、診所掛號看板）

2純靠直覺，找 3 張「看到就安心」的圖，不必分析原因

3截圖或存圖，帶進 YAML 分析器（Gemini 或 ChatGPT 版皆可），貼上這句話：

請個別放入 YAML 中，讓他幫你分析出視覺顏色的提示詞：跑出一段程式碼，有很多種顏色的就是了！

去 Pinterest 找圖 Gemini版 YAML分析器 ChatGPT版 YAML分析器

方法二｜色系歸納法

從顏色切入，找到你的視覺語言

操作步驟

1先選一個你想要的主色調，例如：青藍乾淨醫療感、薄荷白親切感、米色木質溫暖感（牙醫、小兒科常用）

2在 Pinterest 搜尋這個色系＋用途，例如：「teal clinic branding」、「warm pediatric clinic interior」

3找出 3 張色感最對的圖，截圖後貼入 YAML 分析，用這句話：

請個別放入 YAML 中，讓他幫你分析出視覺顏色的提示詞：跑出一段程式碼，有很多種顏色的就是了！

常用搜尋關鍵字參考

clinic website design medical reception interior healthcare app UI hospital wayfinding signage patient information leaflet

去 Pinterest 找圖 Gemini版 YAML分析器 ChatGPT版 YAML分析器

找完 3 張圖了？

請個別放入 YAML 中，讓他幫你分析出視覺顏色的提示詞：
跑出一段程式碼，有很多種顏色的就是了！

Gemini版 YAML分析器 ChatGPT版 YAML分析器

00 醫療行政專班流程

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

🎯 重點摘要：這堂課要做出什麼？

用 AI 做出屬於你們機構的病人服務網頁（或診所官網、櫃檯內部工具），而且真的能上線給病人用。
順序是：先讓 AI 記住機構應揭露資訊 → 先把風格 YAML 定好 → 用 PRD 填網站需求 → 跟著三個範例做一次 → 上線。
每一關下面都有對應的分頁，卡住就點進去看細節。

1

先讓 AI 記住機構應揭露資訊

機構全名、開業執照字號、負責醫師、地址電話、門診時間一次交代清楚，之後 AI 產出的每一頁頁尾都會自動帶上，病人一看就知道是正規診所，不是來路不明的網頁。

⚠️ 這一關不是為了好看：醫療機構對外資訊受醫療法規範——醫療廣告不得誇大療效、不得用病人見證或贈品招攬；病歷與病人個資依醫療法第 72 條與個資法保密。你做的網頁多半代表機構出去，一開始就讓 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 發布，拿到專屬網址，印成 QR 貼在櫃檯或放進 LINE 官方帳號；想再進階，就自己掛一個網域。

對應分頁：07 部署

前往

👉 小結：先給機構揭露資料（含開業執照字號）→ 先定風格 YAML → 填網站需求 → 跟著範例做一次 → 上線。
卡在哪一關就點哪一張卡，不用照順序硬走完。

課堂外隨時可以看的

08 常見用法

櫃檯抽屜裡的紙本表單與 Excel，變成病人點開就能用的網頁——九個示範一次看

🧩 互動元件百科

28 種元件全部可以直接操作體驗，從選擇類、輸入類到櫃檯專用的特殊欄位，一頁看完。

📦 提示詞素材包

15 組可直接套用的醫療行政 AI 提示詞，點「複製Prompt」帶走，貼到 Claude 就能用

01 機構應揭露資訊

AI 做的每個對外作品，頁尾都要帶上這一塊——正規醫療機構的門面

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

AI 產出的網頁預設不會幫你放機構名稱與開業執照字號。
假診所、假衛教、假掛號網頁滿天飛的年代，沒有揭露的就醫資訊頁，病人看起來就是「來路不明的網頁」；
帶了完整揭露，同一個工具立刻變成機構的正式門面。醫療行政人員做的網頁多半是代表機構出去，不是個人名片——先把這塊做好、教給 AI，之後每個作品自動合規。

對外作品應揭露的六件事

🏥 醫療機構全名
依開業執照登記的名稱寫完整，不要只寫「○○診所」簡稱或招牌暱稱

📜 開業執照字號＋醫事機構代碼
衛生局核發的開業執照字號；健保特約機構另有 10 碼醫事機構代碼，病人查得到才有信任

👨‍⚕️ 負責醫師
負責醫師姓名與科別；行政人員自己不是揭露主體，但要標「經辦窗口」讓病人知道找誰

📍 地址、電話、門診時間
病人最常問的三件事；門診時間一改，網頁就要同步改，這是行政人員的日常

🧾 健保特約身分與收費公告
是否健保特約；掛號費與自費項目依向衛生局報備的收費標準寫，不能自己喊價

⚠️ 醫療資訊警語
必附：本頁為衛教與行政資訊，不能取代醫師診斷；就醫請依醫師專業判斷

⚡

揭露區塊產生器

填一次，直接產出「頁尾揭露文字」與「交給 AI 的指令」

你的身分（經辦窗口）

姓名

醫療機構全名

機構類型

開業執照字號

醫事機構代碼（健保特約，10 碼）

負責醫師

地址

電話

門診時間

官方 LINE 或 Email（選填）

預覽（就是之後每個網頁頁尾長的樣子）：

（開始填寫，這裡會即時更新）

「交給 AI 的指令」＝揭露資訊＋一句規則：之後做任何對外網頁，頁尾自動加上這塊。貼進下方四個平台，設定一次終身受用。

用語紅線：醫療法第 85、86 條對醫療廣告有嚴格限制—— 「保證治癒」「根治」「無痛保證」「最有效」「全台第一」「限時優惠」「療程送贈品」這類字眼一律不能出現在你的網頁與文案裡；也不得刊登病人見證、治療前後對照來招攬。另外，醫療法第 72 條與個資法要求病歷與病人個資保密—— 任何頁面都不能出現病人姓名、病歷號、身分證字號、檢查結果。 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 常見用法

櫃檯抽屜裡的紙本表單與 Excel，變成病人點開就能用的網頁——九個示範一次看

這一頁在示範什麼？ 下面九個網頁，全部改造自櫃檯抽屜裡的 Word、Excel 和貼在牆上的 A4—— 掛號須知變成可查詢的網頁、部分負擔級距變成線上計算機、紙本單據變成可以直接填寫列印的表單。這就是本課要教你的事：你手上的每一份表單，都能變成這樣。

查詢型：表格上網

📋 懶人包

掛號須知懶人包

初診要帶什麼、看一次診要付哪些錢，兩個 Q&A 講清楚

📋 速記表

部分負擔速記表

門診、急診、藥品級距、慢箋規則一頁查

📋 對照表

門診時間與科別對照表

一週門診表＋症狀找科別＋輸入藥費自動算部分負擔

計算型：Excel 公式上網

🧮 計算機

計算小幫手

看診費用＋慢箋領藥日＋候診時間，公式照搬櫃檯 Excel

🧮 示範表

排班工時示範表

一週三班排班表，工時自動加總、超時自動標紅

表單型：紙本單據上網

📝 預約單

初診預約單

基本資料＋應備文件清單，線上填、直接印

📝 快篩表

病人滿意度快篩

五題自動計分，哪一關最需要改善立即看到

📝 紀錄表

電話預約紀錄表

接電話的紀錄一張搞定，可填可印

📝 盤點表

耗材盤點表

現有量低於安全庫存自動標「需補貨」的盤點紀錄

掛號須知懶人包

初診要帶什麼、看一次診付哪些錢｜兩個問題講完

掛號須知懶人包

安心家庭醫學科診所（課堂示範版）

Q1. 第一次來看診，要帶什麼？

A. 初診要建病歷，櫃檯需要核對身分，請帶齊下面這些：

項目	誰要帶	備註
健保卡	每一位	忘記帶可先自費，10 日內持卡回櫃檯辦退費
身分證或含照片證件	初診成人	建立病歷核對身分用
兒童健康手冊	7 歲以下	預防接種與生長紀錄要登錄
目前用藥清單／藥袋	有長期用藥者	醫師開藥要避免重複與交互作用
轉診單	由其他院所轉來	到醫院就醫時，有轉診單部分負擔較低

Q2. 看一次診，到底要付哪些錢？

A. 以健保身分在診所看一般門診、拿 3 天藥（藥費 180 元）為例：

項目	金額	誰決定	備註
掛號費	100	各機構自訂，向衛生局報備	不是健保給付項目，各家不同
門診基本部分負擔	50	健保署	診所固定 50 元，不分轉診
藥品部分負擔	20	健保署	藥費 101～200 元收 20 元；100 元以下免收
合計	170	—	慢箋領藥免藥品部分負擔

備註

掛號費各機構自訂（常見 50～150 元），以櫃檯公告的收費標準為準。
部分負擔是健保署訂的，全台一致；到醫院看診「有無轉診」金額差很多。
慢性病連續處方箋在診所領藥免藥品部分負擔；可在藥品用完前 10 日內回來領。
忘帶健保卡先自費，就醫日起 10 日內（不含例假日）持卡回櫃檯辦理退費。
自費項目（疫苗、健檢、證明書）另計，價格依衛生局核備之收費標準公告。

部分負擔金額依健保署 2023 年 7 月新制整理，實際以健保署公告為準；本頁為就醫行政資訊，不能取代醫師診斷
改造自櫃檯 A4 公告｜Vibe Coding 課堂示範

部分負擔速記表

門診、急診、藥品級距、慢箋規則、免收對象，一頁查完

健保部分負擔速記表

安心家庭醫學科診所（課堂示範版）｜依健保署 2023-07-01 新制整理

一、門診基本部分負擔

就醫層級	經轉診	未經轉診	備註
診所	50	50	不分轉診
地區醫院	50	80
區域醫院	100	240	未轉診差 140 元
醫學中心	170	420	未轉診差 250 元

二、急診部分負擔

就醫層級	金額	備註
診所	150
地區醫院	150
區域醫院	400
醫學中心	400／750	檢傷 1、2 級 400 元；3、4、5 級 750 元

三、門診藥品部分負擔（一般處方）

藥費	部分負擔	藥費	部分負擔
100 元以下	0	601～700	120
101～200	20	701～800	140
201～300	40	801～900	160
301～400	60	901～1,000	180
401～500	80	1,001 以上	200（診所、地區醫院上限）
501～600	100	1,001 以上（區域醫院、醫學中心）	每 100 元加 20，上限 300

四、慢性病連續處方箋

診所、地區醫院領藥	免藥品部分負擔
區域醫院、醫學中心領藥	第 1 次調劑收（依級距、上限 300），第 2、3 次免
可領藥時間	藥品用完前 10 日內

五、免部分負擔對象（常見）

重大傷病	持證就醫該疾病相關項目
分娩	免收
山地離島地區就醫	免收
低收入戶、榮民	由政府代付，櫃檯不收

本表為課堂示範整理，各項金額與減免資格以衛生福利部中央健康保險署最新公告為準；掛號費另依各機構公告
改造自櫃檯速記表｜Vibe Coding 課堂示範

門診時間與科別對照表

一週門診表＋症狀找科別｜選層級輸入藥費，部分負擔自己跳出來

⚡ 部分負擔快查

慢箋領藥掛號費另計，依各機構公告

一週門診時間表

安心家庭醫學科診所（課堂示範版）｜格內為看診醫師

時段	週一	週二	週三	週四	週五	週六	週日
早診 08:30–12:00	王醫師	王醫師	李醫師	王醫師	李醫師	王醫師	休診
午診 14:30–17:30	李醫師	休診	王醫師	李醫師	王醫師	休診	休診
晚診 18:30–21:00	王醫師	李醫師	王醫師	李醫師	王醫師	休診	休診

症狀找科別（常見）

常見狀況	建議科別	白話說明
感冒、發燒、喉嚨痛	家醫科／內科／耳鼻喉科	先到家醫科，需要再轉專科
小孩發燒、疫苗	小兒科	7 歲以下請帶兒童健康手冊
血壓、血糖、膽固醇追蹤	家醫科／新陳代謝科	穩定後可開慢性病連續處方箋
皮膚癢、疹子	皮膚科	拍下最嚴重時的照片給醫師看
腰痠背痛、扭傷	骨科／復健科	復健治療另有部分負擔規定
牙痛、洗牙	牙科	健保洗牙每半年一次

說明

門診時間如有異動，以現場公告與官方 LINE 通知為準；國定假日休診。
掛號截止時間為各診結束前 30 分鐘；晚到請先來電。
症狀對照僅供掛號參考，最終由醫師判斷是否轉介專科。
快查結果為概算，部分負擔以健保署公告為準；掛號費依機構公告另計。

門診時間以現場公告為準｜本頁為就醫行政資訊，不能取代醫師診斷
改造自櫃檯門診表｜Vibe Coding 課堂示範

計算小幫手

看診費用＋慢箋領藥日＋候診時間——櫃檯 Excel 的公式，原封不動搬上網

🧾 看診費用試算

掛號費＋門診基本部分負擔＋藥品部分負擔＋自費項目

就醫層級

轉診

掛號費（元）

藥費（元）

自費項目（元）

處方種類

📅 慢箋領藥日計算

病人最常問：「我下次什麼時候可以來拿藥？」藥品用完前 10 日內可領

處方開立日

每次給藥天數

⏱️ 候診時間估算

目前叫到幾號、你的號碼、平均每人幾分鐘

目前叫號

你的號碼

分鐘／人

📖 櫃檯實務提醒

掛號費是機構自訂、部分負擔是健保署訂的——病人問「為什麼別家比較便宜」，通常差在掛號費。
藥品部分負擔看的是「藥費」不是「藥的顆數」；同樣三天藥，藥費不同金額就不同。
慢箋提前領藥的 10 日是「用完前 10 日內」，太早來系統會擋，櫃檯要先講清楚。
候診估算只是安撫工具，遇到急症插診會拉長；估算時多抓一成比較不會被抱怨。
自費項目一律依向衛生局報備的收費標準，櫃檯不能臨時報價。

📄 批價日結表

原 Excel 還附了一張「批價日結」模板。欄位：日期、班別、健保人次、自費人次、掛號費現金、自費收現、刷卡、找零準備金，以及合計與交班簽名（公式同本頁計算器）。這種「一堆格子＋固定公式」的表單，正是最適合做成網頁工具的類型——回到 05 實作單元就做得出來。

計算公式照搬櫃檯 Excel（四捨五入到元）｜試算僅供參考，實際以健保署公告與櫃檯批價為準

排班工時示範表

一週三班排班表——工時自動加總，超過 40 小時的人自己跳紅

先看重點：這組示範排班，四位櫃檯人員排一週早／午／晚三班—— 表格會自動算每個人的週工時，超過 40 小時的人整列標紅、每天上班人數也自動算出來。紙本排班最常出事的就是「排完才發現某人連上七天」，公式先算好，主管一眼看到。

櫃檯一週排班表（示範資料）

早診 3.5 小時｜午診 3 小時｜晚診 3.5 小時｜格內為人員代號

排班原則（照搬主管的 Excel 備註）

週工時＝早診班數 × 3.5 ＋午診班數 × 3 ＋晚診班數 × 3.5
單週超過 40 小時整列標紅；連續上班不得超過六天
晚診隔天不排早診（休息間隔要足）
每一班至少一位資深人員（代號 A、B）
示範資料裡 A 排了 41.5 小時——這就是主管要看到的那條紅線

示範資料僅供教學；實際排班依勞動基準法與機構規定
改造自櫃檯 Excel｜Vibe Coding 課堂示範

初診預約單

基本資料＋應備文件一張搞定——線上填好，列印或截圖傳給病人

初診預約單

填寫日期：年月日

病人稱呼
出生年次	民國年　 7 歲以下（請帶兒童健康手冊）
聯絡電話
預約科別／醫師
預約時間	年月日　時段：早診午診晚診
主訴（想看什麼問題）
應備文件（來之前先勾一遍）	健保卡身分證或含照片證件（初診建病歷）兒童健康手冊（7 歲以下）目前用藥清單或藥袋過敏史（藥物、食物）
備　　註
經辦窗口	姓名：　電話：

本單僅供預約使用，不收集身分證字號與病歷資料；預約後仍請依現場報到順序看診
改造自櫃檯紙本表單｜Vibe Coding 課堂示範

病人滿意度快篩

五題自動計分——哪一關最需要改善，看完就知道

電話預約紀錄表

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

電話預約紀錄表

日期：年月日

時間	病人稱呼	病歷號末四碼	初／複診	預約醫師	預約日期時段	需求	需回電	接聽人員

接聽人員：＿＿＿＿＿＿＿主　　管：＿＿＿＿＿＿＿

需求：一般門診／慢箋領藥／疫苗／健檢／改期｜病歷號只記末四碼，不記身分證字號
改造自櫃檯紙本表單｜Vibe Coding 課堂示範

耗材盤點表

現有量低於安全庫存自動標「需補貨」——盤點完直接變採購清單

診所耗材盤點表

安心家庭醫學科診所（課堂示範版）

盤點人：盤點日期：年月日

品項	單位	安全庫存	現有數量	狀態／建議補貨

備註與待採購

安全庫存依機構規定設定，本表為示範數字
改造自櫃檯 Excel｜Vibe Coding 課堂示範

📦 提示詞素材包

15 組可直接套用的醫療行政 AI 提示詞，點「複製Prompt」帶走，貼到 Claude 就能用

一、工具起手 Prompt（做網頁工具用）

🧾 費用工具

看診費用試算器

選層級、輸入藥費，掛號費與部分負擔全算好

📅 慢箋工具

慢箋領藥日計算器

開立日＋給藥天數，第二三次可領日一鍵算

⏱️ 候診工具

候診時間估算器

目前叫號、你的號碼、平均看診時間，算出建議回來時間

📦 庫存工具

耗材庫存看板

現有量低於安全庫存自動變紅，一鍵產出採購清單

🗓️ 排班工具

排班表產生器

拖曳人員進班別，週工時與超時自動算

🔔 提醒工具

回診提醒行事曆

回診日、疫苗到期、慢箋領藥日自動整理提醒

✅ 流程工具

初診文件檢查清單

互動勾選，備齊直接一鍵複製傳病人

💉 時程工具

疫苗與健檢時程查詢

輸入出生年月，該打的疫苗與該做的健檢一鍵列出

二、文件與文案 Prompt（產文件用）

回診提醒訊息產生器

Claude 直接套用 · 回診前一天的 LINE 訊息，清楚又有溫度

初診歡迎訊息

Claude 直接套用 · 加入官方 LINE 後的第一印象

衛教白話翻譯機

Claude 直接套用 · 把衛教單張翻成病人聽得懂的話

欠費／補件通知訊息

Claude 直接套用 · 忘帶健保卡、欠費未結，禮貌提醒

滿意度問卷產生器

Claude 直接套用 · 依機構狀況生成匿名問卷題目

晨會紀錄整理器

Claude 直接套用 · 三分鐘把晨會雜記變成待辦

客訴回覆草稿

Claude 直接套用 · Google 評論與電話客訴的回覆稿

用法：點「複製Prompt」→ 開啟 Claude → 貼上 → 再補上你的資料就能跑。工具類挑一個你每天都在重複做的事開始——重複越多次的工作，做成工具的回報越大。覺得輸出格式不合胃口？直接跟 AI 說「第二段改成表格」「語氣再親切一點」，改到順手為止——這就是 Vibe Coding 的日常。

🧩 互動元件百科

28 種元件全部可以直接操作體驗，從選擇類、輸入類到櫃檯專用的特殊欄位，一頁看完。

二、文字輸入類

07 · 單行文字

Text Input

最基本 · 稱呼、聯絡方式

08 · 多行文字

Textarea

長內容 · 主訴、需求說明

09 · 密碼欄位

Password Input

遮蔽文字 · 內部工具後台登入

10 · 自動完成

Autocomplete

輸入時自動建議 · 打「家」→ 跳科別

三、數字與範圍類

11 · 數字欄位

Number Input

只能輸入數字 · 藥費、自費金額

12 · 滑桿

Slider

拖拉選數值 · 預估候診人數

目前候診人數

12 人

13 · 區間滑桿 🕘

Range Slider

雙滑桿設定區間 · 可回電的時間

方便回電的時段

最早9:00

最晚17:00

四、日期時間類

14 · 日期選擇器

Date Picker

選日期 · 預約看診日期

15 · 時間選擇器

Time Picker

選時間 · 疫苗預約時間

16 · 日期區間

Date Range

慢箋有效期間、請假證明期間

～

五、檔案與媒體類

17 · 檔案上傳

File Upload

轉診單、外院檢查報告上傳

📎

點擊選擇檔案或拖拉至此

18 · 拍照上傳

Camera Upload

手機直接拍 · 藥袋、疫苗卡隨手傳

📷

點擊拍照上傳藥袋

19 · 簽名板 ✍️

Signature Pad

直接手寫簽名 · 自費同意書、個資同意

六、評分互動類

20 · 星級評分

Star Rating

★★★★★ · 櫃檯服務滿意度

★★★★★

4 / 5 分

21 · NPS 推薦分數

NPS Score

0–10分 · 你願意把診所推薦給親友嗎？

完全不推薦非常推薦

22 · 表情評分

Emoji Rating

互動感強 · 批價結束快速回饋

😡😕😐😊😍

七、進階互動類

23 · 拖曳排序 🔥

Drag & Drop Ranking

把在意的點排序 · 病人選診所看什麼

拖曳重新排列重要順序

⏱️ 等候時間短

🩺 醫師說明清楚

😊 櫃檯態度

🧼 環境乾淨

🅿️ 好停車

24 · 卡片選擇

Card Selection

像選牌卡 · 掛哪一科

🩺

家醫科

👶

小兒科

🦷

牙科

🌿

中醫

25 · 圖片選擇

Image Choice

直接點選 · 候診看板要哪種風格？

🔢

大字叫號

📋

表格版

🗓️

門診表

🖥️

儀表板

八、櫃檯超實用特殊欄位

26 · 藥品部分負擔快算

Copay Calculator

輸入藥費 → 藥品部分負擔立刻出來

診所級距：100 元以下免收、每 100 元加 20、上限 200

27 · 慢箋領藥日快算

Refill Date

開立日＋天數 → 第二次可領日

以 30 天處方計，用完前 10 日內可領

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. 自動計算：門診基本部分負擔（診所 50；地區醫院 50／80；區域醫院 100／240；醫學中心 170／420，前者為經轉診）、藥品部分負擔（藥費 100 元以下免收，之後每 100 元加 20 元；診所與地區醫院上限 200、區域醫院與醫學中心上限 300；慢箋在診所與地區醫院免收）、應付合計
3. 顯示方式：結果用卡片呈現，附上費用明細與「試算僅供參考，實際以健保署公告與櫃檯批價為準」的提醒
4. 視覺風格：電光青藍診所感，天光白藍底 #F2FBFC、白色卡片、深青墨字 #07323B、青藍 #0891B2 為主行動色、螢光青 #22D3EE 只做點綴與細發光，細網格背景、圓角 18px、扁平乾淨

開啟 Claude

02

把 Claude 產出的程式碼存成 .html

複製程式碼 → 貼到記事本 → 存檔

1點選 Claude 回應中程式碼區塊右上角的「複製」按鈕

2開啟 Windows 記事本（或 Mac TextEdit），貼上程式碼

3「另存新檔」，檔名輸入 visitcost.html，存檔類型選「所有檔案」

4雙擊檔案，在瀏覽器開啟，確認畫面是否正常顯示

03

調整到你滿意為止

有什麼不對，繼續跟 Claude 說

常見需要修正的點，直接複製貼給 Claude：

「藥品部分負擔級距算錯了，藥費 100 元以下要免收，101 到 200 元收 20 元」

「選慢箋時，診所的藥品部分負擔要變成 0」

「請在結果下方加上費用明細表，掛號費和部分負擔分開列」

「手機版跑版了，請修正 RWD；長輩要用，字再放大一級」

04

上傳到 Netlify，讓工具能對外分享

免費部署，30 秒上線

1前往 Netlify，點「Add new site」→「Deploy manually」

2把你的 visitcost.html 直接拖拉進去

3Netlify 自動產生網址，做成 QR 貼在櫃檯，或放進官方 LINE 的圖文選單 🎉

前往 Netlify

做完了嗎？舉手讓小蟲老師看看

每個人做出來的結果呈現方式都不一樣，差異就是你的學習點。
記得在明顯處放上「試算僅供參考，以健保署公告與櫃檯批價為準」——櫃檯的嚴謹要帶進工具裡。

05 實作－診所版

跟著步驟，做出你們櫃檯專屬的「交班紀錄整理器」

🎯 這堂課你要做出什麼？

一個供櫃檯同仁自己使用的交班紀錄工具。
輸入當班的待辦、特殊狀況與現金結帳，系統自動整理成一張結構化的交班單，
下一班的人 30 秒內就能接手，不用再翻本子問「早上那個是怎樣」。

01

想清楚「內部工具」需要哪些欄位

病人版 vs 診所版，需求不一樣

櫃檯交班單通常需要這些資訊：

🕘 班別基本
日期、早／午／晚診、當班人員

📋 未完成待辦
要回電的病人（代號）、待補的證明書

⚠️ 特殊狀況
客訴、設備故障、缺藥、健保卡讀卡機異常

💵 現金結帳
掛號費現金、自費收現、刷卡、找零準備金

📦 耗材與下一班提醒
要補的耗材、明天特別門診或醫師調診

02

貼給 Claude，說明你要的工具

帶入你需要的欄位與輸出格式

請幫我做一個「櫃檯交班紀錄整理器」的互動式網頁工具（單一 HTML 檔案）。

功能需求：
1. 輸入欄位：日期、班別（早診／午診／晚診）、當班人員、未完成待辦（可新增多筆：事項＋病人代號或病歷號末四碼＋期限）、特殊狀況（客訴／設備故障／缺藥／其他，可複選＋說明）、現金結帳（掛號費現金、自費收現、刷卡金額、找零準備金，自動加總）、耗材待補、給下一班的提醒
2. 點擊「產出交班單」後，自動整理成一張結構清晰的交班單，未完成待辦與特殊狀況排在最上面
3. 交班單可以一鍵複製成純文字，方便貼到櫃檯 LINE 群或列印；資料存在瀏覽器 localStorage，可查看最近七天的交班紀錄
4. 視覺風格：電光青藍診所感，天光白藍底 #F2FBFC、白色卡片、深青墨字 #07323B、青藍 #0891B2，內部工具感、扁平乾淨

開啟 Claude

03

輸入測試資料，看輸出是否夠用

用你昨天那一班的狀況來跑一遍（記得先去識別化）

1把程式碼存成 handover.html，瀏覽器開啟

2用昨天真實發生的狀況填入測試，病人一律用代號（王大明 → W 先生／末四碼）

3試試「複製純文字」功能，貼到櫃檯群組看格式對不對

4覺得哪個欄位多餘或缺少？告訴 Claude 調整

保密提醒：醫療法第 72 條與個資法對病人資料有嚴格要求。這種純 HTML 工具資料只留在你的瀏覽器裡，不會上傳；但切勿把病人全名、完整病歷號、病名寫進工具或公開部署——習慣用代號與末四碼，交班單裡不寫診斷內容。

做完了？跟隔壁同學交換看看

看看彼此設計的欄位有哪裡不同，
差異反映的是每家診所不同的運作方式，沒有標準答案。

06 實作－個人版

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

🎯 這堂課你要做出什麼？

一個能幫你自評對病人溝通品質的互動式工具。
貼入你要傳給病人的 LINE 訊息、公告或回覆，AI 用評分標準逐項拆解，
告訴你哪裡寫得好、哪裡踩到個資或醫療廣告紅線、哪裡長輩可能看不懂。

01

先想好你的評分標準

工具好不好用，關鍵在評分維度設計得夠不夠準

一則好的病人訊息，建議至少涵蓋這幾個維度：

🔒 個資安全
有沒有出現病人全名、病歷號、病名、檢查結果

🚧 醫療廣告紅線
有沒有療效保證、病人見證、優惠贈品字眼

✅ 正確清楚
日期時段、費用、應帶文件有沒有錯或漏

💬 白話易懂
長輩與非醫療背景的人能不能一次看懂

👉 行動指引
病人知不知道下一步要做什麼、找誰

02

貼給 Claude，說明你要的工具

把評分標準帶進 Prompt

請幫我做一個「病人訊息自評系統」的互動式網頁工具（單一 HTML 檔案）。

功能需求：
1. 使用者貼入一則要傳給病人的訊息、公告或回覆（Textarea 輸入）
2. 點擊「開始評分」後，從以下五個維度評分（各 20 分，滿分 100）：
　　・個資安全（是否出現病人全名、病歷號、病名、檢查結果等不該外流的資訊）
　　・醫療廣告紅線（是否出現保證治癒、根治、最有效、病人見證、優惠贈品等字眼）
　　・正確清楚（日期時段、費用、應帶文件是否完整正確）
　　・白話易懂（長輩與非醫療背景的人能否一次看懂）
　　・行動指引（病人是否知道下一步與聯絡方式）
3. 每個維度顯示分數＋一句具體改善建議；個資安全與醫療廣告紅線不滿分時要標紅並列出踩線字句
4. 最後顯示總分與整體評語，並附一版「建議改寫」
5. 視覺風格：電光青藍診所感，天光白藍底 #F2FBFC、白色卡片、深青墨字 #07323B、青藍 #0891B2，螢光青 #22D3EE 做數據高亮

開啟 Claude

03

存檔 → 測試 → 調整

貼入你自己傳過的訊息來測試看看

1把程式碼存成 msgcheck.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 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

部署前自問三件事： ① 這個工具會不會出現病人姓名、生日、身分證字號或病歷號？會的話不要公開部署——醫療法第 72 條與個資法的保密義務優先於一切。 ② 費用試算與衛教類工具有沒有加「僅供參考，以健保署公告與櫃檯批價為準」「不能取代醫師診斷」？有沒有出現「保證治癒」「最有效」這類醫療廣告紅線字眼？ ③ 網址取名有沒有帶到機構名稱，讓病人記得住、也讓主管知道這是正式的？

收工！

今天的 Vibe Coding 到這裡，帶著你的作品回診所吧

🎉 今天辛苦了！

上傳今天作品與心得
到我的 FB 打卡標記我

就可以得到囉！
🎁 課後加碼提示詞包
上傳作品截圖，寫點心得

前往打卡標記小蟲老師加入小蟲百業AI學習站 LINE

小蟲百業AI學習站｜LINE lin.ee/YaVpO5VS

資料更新日期：2026-09-14｜小蟲老師賴明章（豫卓策略）｜小蟲百業AI學習站 LINE lin.ee/YaVpO5VS
本講義為醫療行政人員 Vibe Coding 專班學員專屬教材