小蟲房仲AI實戰 | 進階A班-個人網頁製作
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 出品,個人免費
下載
Typeless(語音輸入)
AI 語音聽寫,用講的取代打字,跟 AI 對話快很多;Windows/Mac/手機都有
下載
🌐 英文頁面看不懂?Chrome 一鍵翻成中文
上面的下載頁都是英文,用 Chrome 開就能整頁翻譯:
單頁翻譯:在頁面空白處按右鍵 →「翻譯成中文(繁體)」,或點網址列右側的翻譯圖示
一勞永逸:翻譯小視窗點右側「」→ 勾「一律翻譯英文」,以後所有英文網頁自動變中文。
手機版:頁面底部會跳出翻譯列,點「中文(繁體)」即可。
小提醒:翻譯只作用在「網頁」,裝好的軟體介面翻不到——不過沒關係,跟 AI 對話直接打中文,它就用中文回你。
00 進階A班流程

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

🎯 這堂課要做出什麼?

用 AI 做出一個屬於你自己的房仲個人官網(或團隊官網),而且真的能上線給客戶看。
順序是:先讓 AI 認識你 → 先把風格 YAML 定好 → 填網站需求 → 送出讓 Claude 產內容 → 補圖片 → 上線
每一關下面都有對應的分頁,卡住就點進去看細節。

1
先讓 Claude 認識我們的基本資料
姓名、手機、LINE、服務區域一次交代清楚,之後 AI 產出的每一頁都會自動帶上你的身分,不會是空白模板。
⚠️ 這一關不是為了好看:台灣不動產從業人員對客戶及民眾,必須揭露經紀人證號、營業員證號與經紀業名稱。一開始就讓 AI 記住,後面每個頁面才不會漏掉。
對應分頁:01 建立基礎資訊
前往
2
網站開工前,先把 YAML 做好
風格沒先定,做出來的網站就會很像路人。這一關要產出一份能重複套用的風格提示詞。
2-1 找到適合你風格的參考圖:到 Pinterest(或現成 preset)挑幾張圖,揣摩它的設計與配色,盡可能單純,不要一次塞太多元素。
2-2 把圖丟給 AI,讓它幫你生成 YAML 風格提示詞,之後直接套用在網站上。
對應分頁:02 風格分析YAML
前往
3
填寫網站的基本資訊
要做個人官網還是團隊官網?給誰看、要放什麼、想長什麼樣,用 PRD 表單一步一步填清楚。需求先想清楚,AI 才不會做出四不像。
對應分頁:03 PRD製造機
前往
4
送出,讓 Claude 產生內容
資料都填好就送出,Claude 會直接幫你把內容產出來。再補上圖片,一個基本的網站雛形就成形了。
💡 PRD 表單產出的提示詞,最後一句已經幫你加好「請幫我將這個 PRD,做成一個網站。」整段複製貼給 Claude Code 就會開始做。
對應分頁:03 PRD製造機
前往
5
部署上線,拿到自己的網址
雛形做好要能給客戶看才算數。用 Cloudflare Pages 或 Netlify 發布,拿到專屬網址;想再進階,就自己掛一個網域。
對應分頁:04 部署
前往
👉 小結:先給資料(含證號)→ 先定風格 YAML → 填網站需求 → 送出產內容+補圖 → 上線
卡在哪一關就點哪一張卡,不用照順序硬走完。
課堂外隨時可以看的
05 常見用法
十個課程示範的房仲工具,每個都能直接開來用,右邊「🎁 工具包」可複製提示詞做自己的版本。
🧩 互動元件百科
29 種網頁元件可以直接玩,想在自己網站放什麼功能先來這裡挑。
📦 補充教材包
四份可以直接下載的房仲 AI 提示詞文件,貼進 AI 就能用。
☁️ 掛網域
想把 netlify.app 換成自己的網域,申請與設定的完整流程與踩雷紀錄。
02 風格分析YAML

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

為什麼要先找圖?

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

選一種方法開始
兩種都可以,看你今天的狀態
方法一|興趣牆
直覺選圖,讓 AI 找出共同風格
操作步驟
1 打開 Pinterest,搜尋你做的產品類型(例如:real estate branding、房仲簡報、property presentation)
2 純靠直覺,找 3 張「看到就喜歡」的圖,不必分析原因
3 截圖或存圖,帶進 YAML 分析器(Gemini 或 ChatGPT 版皆可),貼上這句話:
請個別放入 YAML 中,讓他幫你分析出視覺顏色的提示詞:跑出一段程式碼,有很多種顏色的就是了!
方法二|色系歸納法
從顏色切入,找到你的視覺語言
操作步驟
1 先選一個你想要的主色調,例如:深藍金色系、莫蘭迪米白系、暗黑科技感
2 在 Pinterest 搜尋這個色系+用途,例如:「navy gold presentation」、「dark luxury real estate brochure」
3 找出 3 張色感最對的圖,截圖後貼入 YAML 分析,用這句話:
請個別放入 YAML 中,讓他幫你分析出視覺顏色的提示詞:跑出一段程式碼,有很多種顏色的就是了!
常用搜尋關鍵字參考
navy gold branding dark luxury presentation minimal real estate earth tone design moody editorial layout
找完 3 張圖了?
請個別放入 YAML 中,讓他幫你分析出視覺顏色的提示詞:
跑出一段程式碼,有很多種顏色的就是了!
Gemini版 YAML分析器 ChatGPT版 YAML分析器
01 建立基礎資訊

第一步:先讓 Claude Code 認識你,之後做什麼都會是「你的」

AI個人品牌提示詞生成器 直接在這裡填,資料只留在你的瀏覽器、不會上傳;填完往下看怎麼貼進 Claude Code

填寫資料

照真實狀況填。AI 不是幫你膨風,是幫你把專業講清楚。

1我是誰
2我的服務區域

請選三個主力行政區。不要貪多,客戶要的是你有戰場,不是全台都會。

3我的專業強項
4我的服務理念
5客戶為什麼可以信任我
6適合我的一句品牌標語
7網頁頁尾要不要標註作品出處?

結果檔顯示 可直接複製

一組提示詞,Claude/ChatGPT/Gemini 通用。

複製完,貼到哪裡?往下看 做法 A/做法 B:一個貼進 Claude Code 的設定,一個叫它自己寫進 CLAUDE.md,建議兩個都做。
提醒:證號、特許字號與公司名稱請自行確認正確後再使用於對外文案。
🎯 這堂課你要做出什麼?

一個完全屬於你的房仲個人品牌網站
不是套模板,是你把資料交給 AI,AI 幫你從零蓋出來。

01
填入自己的資訊到 Claude Code
先讓 AI 認識你,做出來的東西才會是「你的」

打開 Claude Code,先把自己的基本資料告訴它——姓名、手機、LINE、服務區域、主打商圈、營業員證號等等。之後不管要它做什麼,AI 都會記得你是誰,產出的內容才會是專屬於你的,不是空白模板。

不用自己想怎麼寫,直接用本頁最上方的生成器:欄位填一填 →「產生AI提示詞」→ 整段複製 → 貼進 Claude Code。資料只留在你的瀏覽器,不會上傳。

做法 A 貼進設定裡(開著的 Claude 桌面版就吃得到)
點左下角人頭圖示 → Settings → General → Instructions for Claude,把整段貼上存檔。
設在這裡是「永久記住」,之後每次開新對話都不用再講一次;只貼在對話框的話,只有那一次有效。
做法 B 叫它寫成 CLAUDE.md(跟著你的帳號走,強烈建議加做)
CLAUDE.md 是 Claude Code 真正會讀的檔案,不管你在哪個資料夾開它都吃得到。不用自己開記事本建檔,叫它自己寫。
你不用知道自己的電腦帳號叫什麼,也不用打路徑,按下面的「複製這段指令」,整段貼進 Claude Code 就好。
把上面這些資料寫進我的全域 CLAUDE.md(使用者層級,~/.claude/CLAUDE.md),讓我在任何資料夾請你做網頁或文件時,頁尾都自動帶上這些揭露資訊,不可省略。寫完告訴我檔案放在哪個完整路徑。
⬆️ 按下面的按鈕複製時,你剛剛產生的品牌提示詞會自動接在這段指令的前面,不用自己再貼一次。
寫完它會回報完整路徑,記下來,日後換公司、換證號就回到那個檔案改。建完或改完,都要關掉重開一個新對話才會載入。
設定完,一定要驗證這一步
開一個全新的對話(不要用剛剛那個),問它一句:
我的營業員證號是多少?我的法定揭露資訊請完整念一次。
念得出來=設定生效,可以往下做 PRD。念不出來=多半是這三個原因:還在設定前就開著的舊對話裡(要重開一個)、只貼在對話框沒貼進設定、CLAUDE.md 被自己用記事本存成 CLAUDE.md.txt(Windows 預設隱藏副檔名,看不出來,所以才建議叫它自己寫)。
再加一層保險。設定生效不等於每次都不會漏——網頁需求一長,AI 的注意力會被功能吃掉,頁尾就忘了。之後每次要網頁,提示詞結尾固定補一句:「頁尾加上我設定裡的法定揭露資訊」
資料填好了?
接下來到「03 PRD製造機」,把你想要的網站需求變成一段提示詞。
03 PRD製造機

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

🎯 這一關要做什麼?

直接跟 AI 說「幫我做個網站」,做出來的一定是四不像。
先用 PRD 表單把需求問清楚,產出一段完整提示詞,再貼給 Claude Code——這樣做出來才會像你要的。

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

把你想要的網站——給誰看、要放什麼內容、想要什麼風格——一步一步填一填,表單會自動整理成一份完整、AI 看得懂的提示詞。直接用下面的表單,填的內容只存在你這台裝置,關掉再回來還在。

PRD網站提示詞製造機

做工具/網頁前,先一步一步把「做什麼、怎麼運作、怎樣算完成」想清楚

填寫內容會自動存在這台裝置 · 尚未儲存

02
把提示詞貼到 Claude Code,做出網站
指示它做出一個房仲個人網站

把 PRD 表單產出的整段提示詞貼進 Claude Code 對話框,請它依照需求做出一個完整的房仲個人品牌網站(單一 HTML 檔案)。做出來不滿意的地方,直接繼續跟它對話調整就好。

開啟 Claude Code
網站做出來了?
接下來到「04 部署」,把它放上網路,拿到專屬網址。
05 常見用法

把常用功能加到你已經做好的網站上 — 每個工具都能直接開來看,也能複製提示詞做自己的版本

🧰 這頁在做什麼?

做好網頁的基本架構之後,除了個人介紹和照片之外,接下來就是把常用的功能提供給消費者和民眾

方法如下
  1. 點擊下面這些按鈕,先看一下有什麼功能
  2. 下載或複製提示詞(每張卡片右邊的「🎁 工具包」)。
  3. 回到你已經做好的網站,在下方繼續輸入你要加什麼,例如:
    我要加入房地合一試算表 我要加入買方貸款試算表
  4. 把提示詞貼上去,並加上你想放的位置。例如本來已經有個人介紹,就可以說:
    在個人介紹的右邊,加上房地合一試算的按鈕
👉 小結:這樣就可以把功能一個一個加到你的網頁上了。位置講得越具體,AI 擺得越準;沒講位置它就自己挑,通常會放在最後面。
課程示範工具
每張卡片右邊的「🎁 工具包」會複製一段 AI 提示詞,貼給 Claude/Gemini/ChatGPT 就能做出一份屬於你自己的版本。
💰 賣方工具
售屋損益試算
房地合一稅 2.0,含自住優惠與重購退稅
開啟工具
🏦 買方工具
貸款財力試算
月收入、自備款、負債比全方位評估
開啟工具
🅿️ 計算工具
地籍面積換算
坪 ↔ 平方公尺,地籍常用單位即時互換
開啟工具
🅿️ 計算工具
車位拆算
快速計算車位含不含在總價內,釐清坪單價差異
開啟工具
📋 業務工具
值班神器
值班接待流程輔助,快速掌握客戶資訊
開啟工具
📋 業務工具
值班神器(開放版)
無需登入,學員可直接體驗的值班輔助工具
開啟工具
📢 社群工具
每日發文系統
房仲每日社群發文自動化,快速產出貼文內容
開啟工具
✍️ 文案工具
千萬文案產生器
輸入物件資訊,AI 自動產出高轉換率的房仲銷售文案
開啟工具
🏘️ 物件工具
物件自評系統
貼入物件說明,AI 自動查掛牌行情、實價登錄並給出議價建議
開啟工具
📅 預約工具
客戶預約諮詢
數位名片+線上預約一頁到底,串 Google 日曆自動把已有行程的時段變暗,客戶自己挑時間,約完雙方各收一封確認信
開啟工具
實作-公開版 售屋損益試算
🎯 這堂課你要做出什麼?

一個可以計算售屋損益的互動式網頁工具。
學員輸入買入價、賣出價、持有年限,
系統自動算出房地合一稅與實際獲利。

先看完成品
01
打開 Claude,貼上這段 Prompt
告訴 AI 你要做什麼
請幫我做一個「售屋損益試算」的互動式網頁工具(單一 HTML 檔案)。

功能需求:
1. 輸入欄位:買入總價(萬)、賣出總價(萬)、持有年限(年)、是否自住
2. 自動計算:房地合一稅(依持有年限套用稅率)、實際獲利(萬)、報酬率(%)
3. 顯示方式:結果用彩色卡片呈現,清楚標示稅前/稅後獲利
4. 視覺風格:深海軍藍主色 #1A365D,強調色橘 #E65100,白色卡片,現代乾淨
開啟 Claude
02
把 Claude 產出的程式碼存成 .html
複製程式碼 → 貼到記事本 → 存檔
1 點選 Claude 回應中程式碼區塊右上角的「複製」按鈕
2 開啟 Windows 記事本(或 Mac TextEdit),貼上程式碼
3 「另存新檔」,檔名輸入 sellcalc.html,存檔類型選「所有檔案」
4 雙擊檔案,在瀏覽器開啟,確認畫面是否正常顯示
03
調整到你滿意為止
有什麼不對,繼續跟 Claude 說
常見需要修正的點,直接複製貼給 Claude:
「請把按鈕顏色改成橘色 #E65100」
「稅率計算不對,持有2年內應該是45%,請修正」
「幫我加上自住優惠的說明文字」
「手機版跑版了,請修正 RWD」
04
上傳到 Netlify,讓工具能對外分享
免費部署,30 秒上線
1 前往 Netlify,點「Add new site」→「Deploy manually」
2 把你的 sellcalc.html 直接拖拉進去
3 Netlify 自動產生網址,複製後就可以傳給客戶使用 🎉
前往 Netlify
做完了嗎?對照一下蟲哥的版本
看看你的和我的差在哪裡,差異就是你的學習點。
看完成品對照
實作-內部版 物件明細整理器
🎯 這堂課你要做出什麼?

一個供內部使用的物件明細整理工具。
輸入物件基本資料,系統自動整理成結構化的物件明細,
方便業務快速掌握、分享與追蹤案件資訊。

先看完成品
01
想清楚「內部工具」需要哪些欄位
公開版 vs 內部版,需求不一樣
內部物件整理器通常需要這些資訊:
🏠 物件基本
地址、坪數、格局、樓層
💰 價格資訊
開價、底價、車位含否
👤 屋主資訊
姓名、聯絡方式、委託期限
📝 案件備註
屋況、特殊條件、注意事項
📅 追蹤狀態
帶看次數、議價進度
02
貼給 Claude,說明你要的工具
帶入你需要的欄位與輸出格式
請幫我做一個「物件明細整理器」的互動式網頁工具(單一 HTML 檔案)。

功能需求:
1. 輸入欄位:物件地址、總坪數、格局(幾房幾廳)、樓層/總樓、開價(萬)、底價(萬)、車位(有/無/含於總價)、屋主姓名、聯絡電話、委託到期日、屋況備註
2. 點擊「產出明細」後,自動整理成一張結構清晰的物件資訊卡
3. 資訊卡可以一鍵複製成純文字,方便貼到 LINE 群或 Excel
4. 視覺風格:深海軍藍 #1A365D,強調色玫紅 #E91E63,白底卡片,內部工具感
開啟 Claude
03
輸入真實案件測試,看輸出是否夠用
用你手上一個真實物件來跑一遍
1 把程式碼存成 casecard.html,瀏覽器開啟
2 選一個你手上正在跑的物件,把資料填入測試
3 試試「複製純文字」功能,貼到 LINE 看格式對不對
4 覺得哪個欄位多餘或缺少?告訴 Claude 調整
做完了?對照蟲哥的版本
看看你設計的欄位和我有哪裡不同,
差異反映的是每個業務不同的工作習慣。
看完成品對照
實作-個人版 房仲文案自評系統
🎯 這堂課你要做出什麼?

一個能幫你自評文案好壞的互動式工具。
貼入你寫的房仲文案,AI 用評分標準逐項拆解,
告訴你哪裡寫得好、哪裡還能更強。

先看完成品
01
先想好你的評分標準
工具好不好用,關鍵在評分維度設計得夠不夠準
一份好的房仲文案自評,建議至少涵蓋這幾個維度:
📍 地段描述
有沒有精準點出生活圈優勢
🏠 物件特色
格局、採光、裝潢有沒有具體說
💰 價格說服力
讓人覺得值不值、CP 感
❤️ 情感連結
有沒有觸動讀者的場景想像
📣 行動呼籲
有沒有清楚的下一步指引
02
貼給 Claude,說明你要的工具
把評分標準帶進 Prompt
請幫我做一個「房仲文案自評系統」的互動式網頁工具(單一 HTML 檔案)。

功能需求:
1. 使用者貼入一段房仲銷售文案(Textarea 輸入)
2. 點擊「開始評分」後,AI 從以下五個維度評分(各 20 分,滿分 100):
  ・地段描述(有沒有點出生活圈優勢)
  ・物件特色(格局採光裝潢是否具體)
  ・價格說服力(CP感與市場定位)
  ・情感連結(場景想像與生活畫面)
  ・行動呼籲(是否引導下一步)
3. 每個維度顯示分數+一句具體改善建議
4. 最後顯示總分與整體評語
5. 視覺風格:深海軍藍 #1A365D,強調色金黃 #B8860B,白底卡片
開啟 Claude
03
存檔 → 測試 → 調整
貼入你自己寫過的文案來測試看看
1 把程式碼存成 copycheck.html,瀏覽器開啟
2 貼入你過去寫過的一篇房仲文案,點擊評分
3 看看哪個維度最低分,那就是你最需要加強的地方
4 根據建議修改文案,再評一次,對比前後分數
做完了?對照蟲哥的版本
看看你設計的評分維度和我有什麼不同,
每個人的側重點都不一樣,沒有對錯。
看完成品對照
🧩 互動元件百科

29 種元件全部可以直接操作體驗,從選擇類、輸入類到房仲特殊工具,一頁看完。

一、選擇類
01 · 單選按鈕
Radio Button
只能選一個 · 性別、是否委託
02 · 核取方塊
Checkbox
可複選 · 房屋條件、需求勾選
03 · 下拉式選單
Select
節省空間 · 縣市、年齡、職業
04 · 多層下拉 🔥
Cascading Select
會連動 · 選縣市 → 出現行政區
05 · 切換按鈕
Toggle Switch
像手機開關 · 是否通知、是否公開
06 · 按鈕式選項
Button Group
比下拉更直覺 · 手機操作友善
二、文字輸入類
07 · 單行文字
Text Input
最基本 · 姓名、電話、LINE ID
08 · 多行文字
Textarea
長內容 · 意見回饋、客戶需求
09 · 密碼欄位
Password Input
遮蔽文字 · 適合工具後台登入
10 · 自動完成
Autocomplete
輸入時自動建議 · 打「南」→ 跳選項
三、數字與範圍類
11 · 數字欄位
Number Input
只能輸入數字 · 預算、坪數、年齡
12 · 滑桿
Slider
拖拉選數值 · 預算、滿意度
13 · 區間滑桿 💰
Range Slider
雙滑桿設定區間 · 房仲超適合
四、日期時間類
14 · 日期選擇器
Date Picker
選日期 · 簽約日、預計交屋日
15 · 時間選擇器
Time Picker
選時間 · 帶看預約時段
16 · 日期區間
Date Range
看屋期間 5/1 ~ 5/30
五、檔案與媒體類
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
直接點圖片 · 喜歡哪種裝潢風格?
八、房仲超實用特殊欄位
27 · 預算計算器
Affordability Calculator
頭期款+收入 → 自動算可購總價
28 · 坪數換算器
Area Converter
坪 ↔ 平方公尺 即時換算
29 · AI 需求分析欄 🚀
AI Input
輸入一句話 → AI 自動整理需求
📦 補充教材包

可直接帶走的教材:4 份房仲 AI 提示詞文件,點擊下載到自己的電腦

提示詞文件(貼進 AI 直接用)
銷售企劃書
Claude 直接套用 · 社區銷售企劃書生成
下載
強銷推案書
Claude 直接套用 · 快速產出強銷賣點文案
下載
議價回報書
Claude 直接套用 · 屋主議價過程回報整理
下載
物件一鍵整理器
GPT 直接套用 · 物件資料快速整理格式化
下載
04 部署

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

01
完成後部署到網站平台
拿到專屬網址,就能傳給客戶看

網站做好、另存成 HTML 檔案後,用 Cloudflare Pages 或 Netlify 一鍵發布,就能拿到專屬網址分享給客戶。詳細步驟看「部署」單元。

⚡ 快速提示詞
網站做好之後,這幾句話直接貼給 AI 就能用
網站做得差不多了,就打
幫我把網頁部署到 XX 平台(如 Netlify),檔名:bugcost
厲害一點的
🔒 設定密碼
幫我設定密碼:9487
🛠️ 設定後台(有後台功能的網站才需要)
設定一個後台讓我自己管理。
Cloudflare Pages
免費、快,台灣連線速度優
https://XXX.pages.dev
1登入 Cloudflare → 左側「Workers 和 Pages」→ 建立 → Pages → 「直接上傳」
2先把 HTML 檔改名 index.html 放進一個資料夾,整個資料夾拖進去
3取專案名 → 部署完成,拿到 XXX.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 檔案直接拖拉進虛線框
4 Netlify 自動產生網址,複製後傳給客戶 🎉
適合獨立工具頁面,網址乾淨、免費、不需技術背景,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 確認 → 給你 XXX.surge.sh 網址,改版再打一次 surge 就更新
全程打字不用開網站,熟了之後 10 秒上線。Mac 終端機體驗最好;Windows 也能用,裝好 Node.js 即可。
前往 Surge
Vercel
開發者最愛,但注意授權限制
https://XXX.vercel.app
1用 GitHub 帳號註冊登入 Vercel
2Add New → Project → 匯入 GitHub repository(或用 CLI 拖放部署)
3自動部署,拿到 XXX.vercel.app 網址
不可商用:免費 Hobby 方案限非商業用途。給客戶用的房仲工具屬商業使用,正式上線請改用 Netlify/Cloudflare,或升級付費方案。課堂練習沒問題。
前往 Vercel
部署前自問三件事: ① 工具或頁面會不會出現真實客戶資料?會的話不要公開部署。 ② 行情試算類內容有沒有加「僅供參考、以實價登錄為準」? ③ 網址取名有沒有帶到你的個人品牌,讓客戶記得住?
上線之後,要不要標註作品出處?(選用)
這個網站是你自己做的,頁尾可以加一行小字說明它在哪裡完成,像是「這個網站是我用 AI 自己做的,完成於小蟲老師的房仲 AI 實戰課」。 用意是讓看到的同業知道這是課堂上做得出來的東西——對你是作品履歷,對課程是口碑,兩邊都不吃虧。
不想加就不用加,網站是你的。連結請加 rel="nofollow",這樣不會影響你自己網站的搜尋排名。 提示詞生成器(01 頁)第 7 項勾起來,AI 產生網頁時就會自動帶上這行。
☁️ 掛網域:Cloudflare

從註冊一個自己的網域,到成功掛上 Netlify 網站,實測一輪的完整紀錄

🎯 為什麼特地寫這篇?

bughouse-tw.netlify.app 這種免費網址能用,但終究是別人平台的網域,不夠像「自己的品牌」。
買一個自己的網域(例如 賴小蟲.com)掛上去,網址好記、也更專業。
我實際申請了一個網域、接上其中一個 Netlify 網站,把整個過程跟踩到的雷都記下來,給你們照著做。

01
為什麼選 Cloudflare 買網域
不是唯一選擇,但對新手最省事
1價格透明,續約價跟第一年幾乎一樣,不會被隔年續約價嚇到(很多平台第一年便宜、續約狂漲)
2註冊網域跟管理 DNS 在同一個帳號、同一個介面,不用在兩個平台之間切來切去
3介面是英文,但操作步驟固定,跟著流程點不太會迷路
02
到 Cloudflare 註冊網域
大概 5–10 分鐘,需要信用卡付款
1登入 dash.cloudflare.com,左側選單找「Domain Registration」→「Register Domains」
2搜尋想要的網域名稱,系統會列出可用的字尾(.com/.tw/.com.tw 價格差很多,.com.tw 通常最貴)
3選好後結帳,填寫網域持有人資料(Whois 資訊,可另外加購隱私保護)
4付款完成,網域會直接掛在這個 Cloudflare 帳號底下,DNS 也自動由 Cloudflare 管理
03
把網域接到 Netlify 網站上
這步最容易卡關,照順序做
1進 Netlify 該網站的 Site configuration → Domain management,點「Add a domain」,輸入剛買的網域
2Netlify 會顯示一組要設定的 DNS 紀錄,通常是指向 Netlify Load Balancer 的 A 記錄,或是 www 子網域用的 CNAME(照 Netlify 當下顯示的為準,兩種都可能出現)
3回到 Cloudflare 該網域的「DNS → Records」,把 Netlify 給的那組紀錄一模一樣新增進去
4關鍵:新增的紀錄先把右邊「Proxy status」切成灰色雲朵(DNS only),不要橘色雲朵。等 Netlify 那邊確認網域生效、SSL 憑證簽發成功後,才考慮要不要再切回橘色雲朵(開 Cloudflare 代理)
⚠️ 踩到的雷:一開始沒注意雲朵顏色,設定成橘色(Proxied),結果 Netlify 那邊的網域驗證跟 SSL 憑證簽發一直卡著過不了。改成灰色雲朵(DNS only)之後幾分鐘內就過了。
新手第一次接網域,建議全程保持灰色雲朵,先求「掛得上去」,之後真的需要 Cloudflare 的防護/加速功能,再回來研究要不要開代理。
04
等 DNS 生效,確認上線成功
通常幾分鐘到半小時內,最久看過要等幾個小時
1Netlify 的 Domain management 頁面,網域狀態從「Awaiting External DNS」變成有綠色勾勾,代表 DNS 已經指過來
2Netlify 會自動幫網域申請免費 SSL 憑證(Let's Encrypt),狀態顯示「Netlify DNS」或憑證生效即可
3用瀏覽器打開 https://你的網域.com,網址列出現鎖頭圖示、網站正常顯示,就算成功
4記得同時設定「www 導向不加 www」(或反過來),統一一個網址版本,避免同一個網站有兩個網址各自被搜尋引擎收錄
👉 小結
整個流程其實就是「買網域」+「告訴 Netlify 這個網域是你的」+「在 Cloudflare 設定 DNS 指過去」三件事。
唯一容易卡住的地方就是 Proxy 雲朵顏色——新手第一次接,先保持灰色雲朵(DNS only),成功率最高。
單元建置中

此教學單元尚在準備中,敬請期待後續更新

🎉 今天辛苦了!
上傳今天作品與心得
到我的 FB 打卡標記我
就可以得到囉!
🎁 LINE 貼圖切割神器
上傳作品截圖,寫點心得
前往打卡標記小蟲老師 前往 IG 標記小蟲老師