小蟲房仲AI實戰 進階C班-地圖式網站建置
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(安裝需求、方案限制、指令與檔案位置以官方最新說明為準)
進階C班 社區資料 商圈地圖 上線點位
⓪ 進階C班流程

先看懂整條路再出發:這堂課要帶你把主商圈變成自己的地圖式社區資料網

進階C班在做什麼?

一句話:把你的主商圈,變成一張像「小樂居」一樣的地圖式社區資料網
客戶點地圖上的社區就能看到專業的社區介紹;你手上同時有一套跟屋主談委託用的簡報。
目標很具體:一週內,建置好你周圍 100 棟社區

最重要的三步驟流程
後面每個單元,都是在把這三步拆開來教
01
社區 Skill:快速生成社區綜合資訊
一個社區名稱進去,一份完整社區資料出來
1把社區名稱丟給 Claude,透過我們的社區 Skill 用程式碼自動生成社區綜合資訊——基本資料、實價行情、學區、生活機能、競品一次到位
2資料不足的欄位由 AI 主動搜尋補全,你只負責檢查與微調在地判斷
02
地圖 Skill:塑造你自己的主商圈圖
每個人做出一張屬於自己的商圈地圖
1地圖 Skill 讀出來,以你駐守的區域為中心,生成一張地圖式商圈圖
2社區依屋齡或類型分色標點,這張圖就是你的「主場地圖」
03
一個社區、兩種輸出
同一份社區資料,同時變成談委託的武器和網站的內容
(a) PPT 檔|自己用
跟客戶討論、開發委託時拿出來的專業簡報——屋主看到的是「這個房仲有做功課」
(b) HTML 檔|掛上網頁
部署上線後,掛進你的商圈圖,成為地圖上可以點開的社區點位
做完會變成什麼樣子?
你的網站,多了專業房仲才有的東西

就像一個「小樂居」——主商圈的每個社區都有自己的資料頁,客戶在你的地圖上點哪棟、就懂哪棟。 一天 15 棟、一週 100 棟,你的主商圈就是你的主場

看示範:Buglaihouse 看示範:YZ.SAC

👉 小結:社區 Skill 生資料 → 地圖 Skill 畫主場 → PPT 談委託、HTML 上地圖,一週 100 棟。

看懂整條路了?
從 ① 前置作業開始,一步一步把主商圈變成你的主場
① 前置作業
A 班已經上過的,可以跳過

開課前先做這一件事:讓 AI 認識你是誰,後面做出來的東西才會是「你的」

🎯 這頁要做什麼?

把你的個人品牌資料填成一段提示詞,貼進 Claude Code。
之後不管請它做社區介紹、商圈地圖還是企劃書頁,它都知道你是誰、在哪個區域執業、要掛哪組法定揭露資訊,產出的內容才不會是空白模板。

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

用下面的生成器:欄位填一填 →「產生AI提示詞」→ 整段複製 → 貼進 Claude Code,跟它說「請先記住這些資料」。資料只留在你的瀏覽器,不會上傳。

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

填寫資料

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

1我是誰
2我的服務區域

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

3我的專業強項
4我的服務理念
5客戶為什麼可以信任我
6適合我的一句品牌標語

結果檔顯示 可直接複製

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

複製完,貼到哪裡?往下看 做法 A/做法 B:一個貼進 Claude Code 的設定,一個叫它自己寫進 CLAUDE.md,建議兩個都做。
提醒:證號、特許字號與公司名稱請自行確認正確後再使用於對外文案。
會填到什麼?姓名與江湖稱號、手機、官方 LINE、營業員證號、公司/加盟店、經紀業名稱與經紀人證號、特許證號、服務區域(縣市+行政區)、主打商圈、物件類型專長。
貼到哪裡?下面兩個位置建議都設:一個是 App 的設定,一個是 Claude Code 真正會讀的檔案。
做法 A 貼進設定裡(開著的 Claude 桌面版就吃得到)
Claude Code 左下角人頭圖示 → Settings → General → Instructions for Claude,把整段貼進去存檔。設在這裡是常駐的,之後每次開新對話都不用重貼。
做法 B 叫它寫成 CLAUDE.md(跟著你的帳號走,強烈建議加做)
CLAUDE.md 是 Claude Code 真正會讀的檔案,不管你在哪個資料夾開它都吃得到。不用自己開記事本建檔,叫它自己寫。
你不用知道自己的電腦帳號叫什麼,也不用打路徑,按下面的「複製這段指令」,整段貼進 Claude Code 就好。
把上面這些資料寫進我的全域 CLAUDE.md(使用者層級,~/.claude/CLAUDE.md),讓我在任何資料夾請你做網頁或文件時,頁尾都自動帶上這些揭露資訊,不可省略。寫完告訴我檔案放在哪個完整路徑。
⬆️ 按下面的按鈕複製時,你剛剛產生的品牌提示詞會自動接在這段指令的前面,不用自己再貼一次。
寫完它會回報完整路徑,記下來,日後換公司、換證號就回到那個檔案改。建完或改完,都要關掉重開一個新對話才會載入。
設定完,一定要驗證這一步
開一個全新的對話(不要用剛剛那個),問它一句:
我的營業員證號是多少?我的法定揭露資訊請完整念一次。
念得出來=設定生效,可以往下做社區介紹。念不出來=多半是這三個原因:還在設定前就開著的舊對話裡(要重開一個)、只貼在對話框沒貼進設定、CLAUDE.md 被自己用記事本存成 CLAUDE.md.txt(Windows 預設隱藏副檔名,看不出來,所以才建議叫它自己寫)。
再加一層保險。設定生效不等於每次都不會漏——需求一長,AI 的注意力會被功能吃掉,頁尾就忘了。之後每次要網頁或企劃書,提示詞結尾固定補一句:「頁尾加上我設定裡的法定揭露資訊」
工具行 地圖社
這堂課要用到的東西

社區介紹、商圈規劃、地圖應用會用到的所有工具,點擊前往直接使用

地圖工具
Google 我的地圖
免費畫圖層、標記商圈範圍與生活機能點位
前往
Google 地圖
查距離、街景、生活圈步行時間
前往
小蟲商圈地圖範例
台中商圈與重劃區界線圖,看實際效果與程式邏輯
前往
資料查詢
實價登錄查詢
內政部不動產交易實價,商圈行情判讀基礎
前往
國土測繪圖資服務雲
地籍圖、都市計畫、地形圖等官方圖資
前往
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 對話直接打中文,它就用中文回你。
20頁架構 好文案
② 社區資料製作

把整套流程包成一個 Skill:只給社區名稱,AI 自動查資料、套品牌、產出社區銷售企劃書

🎯 這頁回答什麼?

問題:一份社區資料,怎麼從「查半天還是罐頭文」變成當天就能帶去見屋主的簡報?
答案:把整套流程包成一個 Skill(技能包)——你只給社區名稱,AI 自動查資料、套你的品牌、產出 .pptx 企劃書。小蟲用這套已經量產 141 份社區銷售企劃書(南屯 125、南區 14、西屯 2)。
本頁下方可以直接下載 10 頁版 Skill 包,裝進 Claude Code 就能用。

為什麼要做成 Skill,而不是每次重打提示詞?

每次重打提示詞,等於每次重新教 AI 一遍:你是誰、要查哪些資料、頁面怎麼排、顏色用什麼、哪些話不能寫。
做成 Skill,這些規矩只寫一次,之後只要講社區名稱就會照規矩跑完。
差別不是省時間,是產出穩定——一百份簡報長得像同一個人做的,這才叫個人品牌。

Skill 是什麼?跟提示詞差在哪
一次設定,之後都不用再交代
每次重打提示詞

每開一次新對話,要重講一次身分、資料要查什麼、簡報要幾頁、配色是什麼。忘了講就跑掉,十份簡報十種樣子,還會出現你根本沒查證過的數字。

做成 Skill

你只打「自在柳楊」四個字。搜資料、20 頁架構、綠金配色、頁尾法定揭露、不准捏造數字——全部自動照做。第 1 份跟第 141 份品質一樣。

實例:屋主開發手冊 Skill
小蟲實際在用的技能包,輸入社區名稱 → 產出 20 頁 .pptx
Skill 名稱:蟲哥專簽談必得|屋主開發手冊。觸發詞包含「屋主開發」「爭取委託」「社區開發」「做企劃書」,或直接丟一個社區名稱。
1
你輸入社區名稱
例如「自在柳楊」「三采市政天地」——就這樣,不用附資料。
2
AI 自動搜五類資料
社區基本資料(建商/完工年/戶數)、實價登錄行情、學區、周邊機能、同屋齡競品社區行情。
3
查不到就標記,不編
只有參考值標「*參考行情」,完全查無標「待確認」。明令禁止捏造實價登錄數字與建商資料——這條是保命條款,帶錯數字去見屋主,一次就沒了。
4
套 20 頁固定架構
封面 → 給屋主的一段話 → 基本資料 → 四大地段價值 → 實價登錄 → 競品比較 → 買方輪廓 → 銷售策略 → 為什麼選小蟲 → 行動呼籲。
5
套品牌與視覺規範
深綠漸層底+金色重點數字,每頁左上「置產軍師 賴小蟲」、右下「易凱不動產有限公司」。
6
轉圖自檢後交件
產出的 .pptx 會先轉成圖片逐頁檢查文字溢出、元素重疊、對比不足,才給你下載。
20 頁架構
照這個順序講,屋主才跟得上
段落 頁碼 在講什麼
開場1–3封面、給屋主的一段話、為什麼需要專屬手冊
社區體檢4–5基本資料總覽、社區在區域市場中的定位
四大地段價值6–9學區、商場、公園綠地、交通建設各一頁
本戶競爭力10–12社區現況與管理品質、棟別樓層座向、主力坪數格局
價格證據13–15近三年實價登錄總表、價格走勢區間、周邊競品比較
銷售策略16–17買方輪廓分析、本戶銷售定位與包裝策略
收尾18–20完整銷售流程、為什麼選擇小蟲、行動呼籲

👉 小結:這 20 頁的順序不是隨便排的——先講社區、再講價格、最後才講自己。倒過來講,屋主前三頁就關機了。
下面的 10 頁版就是照這個順序砍掉一半:四大地段價值 4 頁併成 1 頁,管理品質、棟別樓層、坪數格局合併,「為什麼選擇我」收進最後一頁。

下載:10 頁版 Skill 包
裝一次,之後講一句話就會跑
10 頁版 Skill 包
見面談當場翻得完的精簡版,約 15 分鐘講完一輪
1輸入社區名稱 → 自動搜尋五類資料(基本資料、實價登錄、學區、周邊機能、競品社區)
2查不到就標「待確認」、只有參考值標「*參考行情」,不會幫你編數字
3套 10 頁固定架構:封面 → 給屋主的一段話 → 基本資料 → 區域定位 → 四大地段價值 → 本戶競爭力 → 實價登錄 → 競品比較 → 買方輪廓與策略 → 銷售流程與行動呼籲
4自動套用你在 ① 前置作業填的品牌資料(姓名、稱號、公司、配色)
5產出後先轉圖自檢文字溢出與重疊,才給你檔案
解壓縮後放哪?放到你工作資料夾裡的 .claude\skills\ 下面,變成 .claude\skills\社區銷售企劃書-10頁版\SKILL.md,重開 Claude Code 就生效。
不會用資料夾也沒關係——把 SKILL.md 直接拖進 Claude Code,跟它說「幫我把這個裝成 Skill」,它會自己處理。包裡的安裝說明.txt 有完整步驟。
下載:20 頁完整版 Skill 包
屋主已經在比較多家時用這版
20 頁完整版 Skill 包
正式簡報用,約 30–40 分鐘講完一輪
1輸入社區名稱 → 自動搜尋五類資料,跟 10 頁版同一套搜尋與查證規則
2查不到就標「待確認」、只有參考值標「*參考行情」,不會幫你編數字
3四大地段價值學區/商場/公園綠地/交通建設各獨立一頁,競品比較與價格走勢也各自成頁
4多出封面金句頁、社區現況與管理品質、棟別樓層座向、完整銷售流程、為什麼選擇我
5第 19 頁「為什麼選擇我」直接吃你在 ① 前置作業填的從業年份、成交件數、專業證照
兩包可以同時裝。解壓縮後一起放進 .claude\skills\,開對話時說「用 10 頁版」或「用 20 頁版」就會挑對的那個。
沒特別講的話,第一次拜訪用 10 頁、屋主在比價用 20 頁
自己做一個:把規矩寫成 Skill
複製下面這段,改成你的資料
Skill 建立提示詞(覺得自己寫比小蟲老師寫更好)
貼給 Claude Code,它會幫你把技能包建起來
請幫我建立一個 Skill,名稱叫「社區銷售企劃書產生器」。

【觸發時機】當我輸入任何社區/建案名稱,或說「做企劃書」「屋主開發」「爭取委託」時觸發。

【第一步:搜資料】自動搜尋這五類,不要問我要資料:
1. 社區基本資料(建商、完工年份、總戶數、公設比)
2. 實價登錄近三年成交行情
3. 學區(國小、國中)
4. 周邊機能(商場、市場、公園、交通建設)
5. 同行政區、同屋齡的競品社區行情

【鐵則】查得到但只是參考值 → 標「*參考行情」;完全查不到 → 標「待確認」。
絕對不可以捏造實價登錄數字、建商名稱或戶數。

【第二步:產出 20 頁 .pptx】架構固定為:
1–3 封面/給屋主的一段話/為什麼需要專屬手冊
4–5 基本資料總覽/區域市場定位
6–9 四大地段價值(學區、商場、公園、交通各一頁)
10–12 社區現況與管理/棟別樓層座向/主力坪數格局
13–15 近三年實價登錄總表/價格走勢區間/競品比較
16–17 買方輪廓/本戶銷售定位與包裝策略
18–20 完整銷售流程/為什麼選擇我/行動呼籲

【第三步:套我的品牌】每頁左上放我的名字與稱號,右下放公司名。配色與字體用我指定的規範。
我的資料:(貼上你在 ① 前置作業產生的那段品牌提示詞)

【第四步:自檢】產出後轉成圖片逐頁檢查文字有沒有溢出、元素有沒有重疊、對比夠不夠,修好再給我。
複製完先改成你自己的設定(區域、頁數、配色、要搜哪些資料),改完再往下看怎麼存。
改好之後怎麼變成 Skill?整段提示詞全部貼給 Claude Code,然後在最後面加一句:
幫我存成「XXX 的社區資料 Skill」
XXX 換成你自己的名字或商圈(例如「小明的南屯社區資料 Skill」)。取名字很重要——之後你可能會有好幾個 Skill,名字沒區別就會叫錯。
Claude Code 會自動幫你存進專案的 .claude/skills/ 資料夾。之後只要在這個資料夾開對話,打社區名稱就會自動觸發,不用再貼提示詞。
存完可以叫它「列出目前有哪些 Skill」確認一下,有出現才算成功。
成果:141 份社區銷售企劃書
一份簡報+一份網頁,同時產出
南屯區 125 份
五期、七期、八期、單元二三四五的主力社區,幾乎做滿
南區 14 份
學府路一帶與周邊生活圈社區
西屯區 2 份
跨區支援案件,同一套 Skill 直接沿用
檔案怎麼放

依行政區開資料夾,檔名統一 銷售企劃書_社區名稱.pptx.html
兩份都要:.pptx 拿去見屋主用投影或平板翻頁;.html 傳 LINE 給屋主自己滑,也能直接部署成網頁讓 Google 跟 AI 搜尋抓得到。

👉 小結:同一份資料要有兩種出口。只有簡報,離開見面現場就沒了;多一份網頁,屋主晚上還會再看一次。

回到基本功:文字怎麼寫才不像罐頭
Skill 幫你排版,判斷還是你的
罐頭文

本案地段絕佳,生活機能完善,交通便利四通八達,未來增值可期,是自住投資的最佳選擇,歡迎預約賞屋。

小蟲風格文

走路3分鐘到黎明市場,7分鐘到向上國小,開車8分鐘上五權西路交流道。這一區這兩年新案供給量少,同單元中古屋成交價半年漲了一成,是南屯區裡少數還能用四字頭卡位的三房產品。

差別在哪?右邊每一句話,屋主跟買方都能自己去查證——幾分鐘、哪一間市場、哪一所國小、漲幾成。
這就是 Skill 裡「不准捏造數字」那條規矩的意義:可驗證的內容才有說服力,講不出具體數字的漂亮話,客戶一句「真的嗎」就破功。
步行10分鐘生活圈 菜市仔 國小
③ 區域地圖製作

把你守的那一區的社區全標上地圖,依屋齡分色,點下去就連到該社區的企劃書

下載:區域地圖製作 Skill 包
含產生器,改設定檔重跑就出一張新地圖
區域地圖製作 Skill 包(community-map)
把你守的那一區的社區全標上地圖,依屋齡分色,點下去連到該社區企劃書
1先填 my-info-template.json:姓名、手機、營業員證號、經紀業名稱。這步不能跳過——地圖是不動產廣告,法規要求載明經紀業,沒填產生器會直接擋住不給產
2把社區清單寫進 config.json:社區名、屋齡分組、緯經度;沒有精準座標就標 v:0,圖釘會自動淡一階並註明「≈ 街道概略」
3node scripts/build_map.js config.json 輸出.html 就產出單檔地圖,用 OpenStreetMap 圖磚、免金鑰免月費
4產生器會擋掉會出事的資料:證號沒填、座標 0,0、經緯度寫反(最陰險,圖釘會安靜掉到中國內陸)、分組打錯、社區名重複
5座標不準就按右上角「✏️ 編輯」直接拖圖釘校正,完成後匯出 JSON 貼回 config.json 再重跑一次,校正才算數
6地圖下方自動輸出文字版社區清單、FAQ 與結構化資料——AI 搜尋讀不到圖釘,這份文字版才是被引用的本體
解壓縮後放哪?放到你工作資料夾裡的 .claude\skills\ 下面,變成 .claude\skills\community-map\SKILL.md,重開 Claude Code 就生效。
包裡除了 SKILL.md,還有產生器、欄位表、空白填寫表、範例設定,以及一份預先產好的成品assets/sample-output.html,想先看效果直接開它)。
不會用資料夾也沒關係——把 SKILL.md 直接拖進 Claude Code,跟它說「幫我把這個裝成 Skill」,它會自己處理。包裡的安裝說明.txt 有完整步驟。
做好之後:掛上個人網頁的「我的主商圈」按鈕
社區資料+商圈圖完成後的最後一哩路
三步接上你的個人網頁
客戶在你的網站點一顆按鈕,就開出你的主商圈地圖
1社區資料頁與商圈圖都部署上線(做法見「部署」單元),拿到各自的正式網址
2在你的個人網頁上加一顆「我的主商圈」按鈕,連結貼上商圈圖的網址——客戶點進去,看到的是整區的地圖,再從地圖點進各社區資料頁
3連結設定「在新分頁開啟」——客戶看完地圖回頭,你的個人網頁還開著,不會被蓋掉
做法:在你做好的個人網頁裡貼下面這段程式碼(或直接叫 Claude Code 幫你加一顆按鈕),target="_blank" 就是「開新分頁」的意思。
<a href="https://你的商圈圖網址" target="_blank" style="display:inline-block;background:#4D9865;color:#fff;padding:12px 28px;border-radius:10px;font-weight:700;text-decoration:none">🗺️ 我的主商圈</a>

👉 小結:社區資料+商圈圖上線 → 個人網頁掛「我的主商圈」按鈕 → 新分頁開啟,你的網站就是客戶認識這一區的入口。

做地圖會用到的資料來源
實價登錄查詢
真實成交行情,判斷商圈價格帶與漲跌趨勢
前往
Google 地圖街景
遠端先看店面招牌、路況與周邊環境
前往
國土測繪圖資服務雲
都市計畫圖、地籍圖,判斷發展性與變更可能
前往
商圈與重劃區 看懂面
④ 形成商圈

區域地圖畫的是「點」,商圈圖畫的是「面」——客戶問「這裡算幾期」,靠這張圖回答

🎯 這頁回答什麼?

問題:客戶問「這裡到底算幾期、算單元幾、算不算七期」,你怎麼一秒答出來?
答案:把重劃區與商圈生活圈的界線畫成一張圖,開圖指給他看。嘴巴講三分鐘,不如手指點一下。

形成商圈的方法
接著 ③ 做好的地圖往下做
三步驟:把點位喬對,商圈圖就成形
機器抓的座標一定不準,準的那一步只有你做得到
1
打開前面做好的地圖
把 ③ 區域地圖製作產出的那支 HTML 打開,上面已經有你在第 2 步(寫進 config.json)建立的那些社區位置。
2
手動把社區拖到正確的點上
按右上角「✏️ 編輯」,把每個圖釘拖到它真正該在的位置——這一步就是你的區域專業,機器查地址只能抓到路段,哪一棟、哪個出入口、面哪一條路,只有你知道。
拖完按「✓ 完成」,系統就會回傳一組正確的座標。
3
把座標貼回 Claude Code
把那組座標整段貼給 Claude Code,它會寫回 config.json 並重跑一次產生器。
下次再打開網頁,每個社區就都定在該有的位置上——完整的商圈圖就出來了
第 3 步不能跳過。拖曳的結果只存在你這台電腦的這個瀏覽器裡,換一台電腦或傳給別人就沒了。一定要貼回去重跑一次,校正才算真的存起來。
商圈圖完成後,掛到你的主網頁上
圖做好沒人看到等於沒做

如果你的主網頁已經有「我的介紹」「我的理念」這些區塊,就跟 Claude Code 說:

在「我的介紹」右邊增加一個按鈕,按鈕名稱叫「我的商圈」,
把做好的商圈圖與社區資料掛上去。

這樣社區商圈圖的建置就完成了。客戶點進你的網頁看完你是誰,下一步就會點「我的商圈」——先認識人,再認識你守的地盤,這個順序才對。

商圈圖跟 ③ 的區域地圖差在哪?

③ 的區域地圖畫的是——一根圖釘一個社區,回答「這附近有哪些社區」。
商圈圖畫的是——一塊色塊一個區域,回答「這裡屬於哪一區、跟隔壁那區差在哪」。
兩張圖是互補的:先用面定位,再用點看物件。疊在一起,客戶第一次就聽懂你在講什麼。

實際長什麼樣?
小蟲做的台中版,點開就能滑
台中商圈與重劃區界線圖
重劃區與商圈生活圈的邊界全部畫出來,疊上行政區輪廓與社區點位,道路層與社區層可各自開關。
開啟地圖
這張圖裡有多少東西
52
界線區塊
26
行政區
113
社區點位

52 個界線區塊=重劃區 24 個+商圈生活圈 28 個

商圈圖上要畫哪四層?
少一層,客戶就少一個判斷依據
圖層 畫什麼 回答客戶什麼問題
重劃區地政局公告的重劃區範圍「這裡算幾期?單元幾?」
商圈生活圈實際生活動線圍出來的範圍「這裡生活買東西方便嗎?」
行政區輪廓區界,當底圖用「這是南屯還是西屯?」(牽涉學區與稅)
社區點位代表社區的位置點「這區有哪些社區可以看?」

👉 小結:重劃區跟商圈生活圈的界線常常不一樣,這正是這張圖的價值——同一個重劃區裡,走路能到市場的那半邊跟走不到的那半邊,價差是真的。

下載:商圈圖製作 Skill 包
換成你的縣市與行政區就能用
商圈圖製作 Skill 包
把界線畫成 SVG,不用地圖 API 金鑰、不用月費
1給它三樣東西:要畫哪個範圍、區塊清單(重劃區/商圈生活圈)、代表社區清單
2邊界只能用官方圖資轉出,不可以大概畫一畫——客戶拿這張圖判斷「我買的是哪一區」,畫錯就是給錯資訊
3產出單檔 HTML:SVG 底圖、雙色系圖例、區塊點擊資訊卡、圖層開關存 localStorage
4拉近才顯示街道名與社區標籤,拉遠只留大區塊,避免文字打架
5地圖下方自動附文字表格——AI 搜尋讀不到 SVG,沒有這張表這頁在 AI 眼中等於空白
跟 ③ 的區域地圖包一起裝。兩包解壓縮後都放進 .claude\skills\, 要畫「面」就說做商圈圖,要標「點」就說做區域地圖。
包裡的安裝說明.txt 有完整步驟。
兩張圖都會做了?
下一單元看還有哪些現成的地圖工具可以直接用,不用每張都自己做
商圈手繪圖 地圖舖
⑤ 地圖工具操作

把商圈判讀的結果,變成客戶一眼看懂的地圖

方法一|Google 我的地圖
免費、不用寫程式,最快能上手
1前往 Google 我的地圖,建立一張新地圖,命名為社區/商圈名稱
2依機能分類新增圖層:交通、生活機能、文教、嫌惡設施,各用不同顏色圖示
3逐一標記地標點位,備註欄寫下步行時間與判讀重點
4右上角「分享」→ 產生連結,即可傳給客戶或嵌入網頁
方法二|自製地圖網頁
資料驅動,適合長期經營多個社區
1整理社區座標資料(經緯度、社區名、屋齡、區域分類)
2打開下方「台中商圈與重劃區界線圖」,觀察資料如何驅動地圖標記
3把新社區座標加進資料檔,存檔重新整理即可看到新標記
4部署到 Netlify,取得專屬網址分享出去
地圖嵌入範例(免金鑰)
以下這種 iframe,直接放進網頁就能用
<iframe src="https://maps.google.com/maps?q=地址或社區名&z=15&output=embed" style="width:100%;height:340px;border:0"></iframe>
自製地圖到底能做到什麼程度?
四張小蟲實際上線的地理資訊網頁

下面四個都是單一 HTML 檔、沒有後端、沒有地圖 API 金鑰的靜態網頁,資料全部來自政府開放資料,部署完就有自己的網址,可以直接傳 LINE 給客戶,也能被 Google 與 AI 搜尋抓到。
看完你會知道:「地圖」不只是插一張 Google Map,而是把你的專業判斷變成一張別人看得懂的圖。

台中商圈與重劃區界線圖
把台中的重劃區 24 區+商圈生活圈 28 區=52 個界線區塊畫出來,疊上 26 個行政區輪廓與 113 個社區點位,道路層與社區層可自由開關。
用途:客戶問「這裡算幾期」「單元幾」,直接開圖指給他看。
開啟地圖
區域地段強調性地圖
範例是同一套技術做的全台房仲公司密集地圖:9,301 家經紀業分佈到 368 個鄉鎮市區的分級著色圖。提示詞已升級成「地段版」——指定一個縣市,把下轄所有鄉鎮市區的學區、公園、商場、交通建設、醫療五類密集度一次剖析。
用途:選主商圈、跟客戶講清楚「為什麼是這一區」。
開啟地圖
台中市學區查詢
依教育局學區公告做成的查詢頁,輸入地址或社區就能查對應的國小、國中學區。
用途:帶看現場客戶最常問的一題,不用回去查再回覆——當場拿手機點開就有答案。
開啟查詢
成交實績地圖
示範是同一套模式的授課足跡圖:88 組團隊、16 個縣市,勾選就標記。提示詞已改成「成交版」——列出你成交的區域+社區案名清單,就拉出一張標滿你成交社區的實績地圖。
用途:跟屋主約談時攤開「我在這一區成交過哪些社區」,比一句「我很熟這區」有力一百倍。
開啟地圖

每張圖右邊的「複製提示詞」按下去,就把該張圖的完整建置提示詞複製到剪貼簿,貼進 Claude Code 換成你的資料就能做出自己的版本。
👉 小結:這四張圖的差別只在「資料是什麼」——技術是同一套。學會做一張,剩下三張只是換資料。

整理成一頁了:四張圖的資料規模、做法步驟、與 Google 我的地圖的比較,還有每張圖的完整建置提示詞(可一鍵複製),都收在作品集頁。想自己做一張,從那頁開始最快。
那我該用 Google 我的地圖,還是自己做?
先看你要解決哪個問題
比較項目 Google 我的地圖 自製地圖網頁
上手速度當天就能做完一張第一張要花時間,第二張之後很快
資料量幾十個點還行,上百個就難管理資料檔改一行就多一個點,幾百筆一樣順
畫範圍界線可以畫,但難精準對齊地籍與重劃區邊界可用官方圖資轉成精準邊界
網址Google 的網址,掛在 Google 名下你自己的網址,可被 Google 與 AI 搜尋引用
適合誰單一社區、單一帶看行程要長期經營整個區域的人

👉 小結:不用二選一。單一物件帶看用「我的地圖」最快;要把整個南屯做成你的地盤,才需要自製地圖網頁。

這四張圖是怎麼做出來的?
同一條資料管線,四步驟
地理資訊網頁的資料管線
找資料 → 洗成 JSON → 畫成圖 → 部署成網址
1
找官方開放資料,不要自己抄
內政部不動產經紀業備查(同業家數)、國土測繪圖資服務雲(地籍、都市計畫、行政區界)、教育局學區公告、內政部實價登錄。官方來源才敢寫在圖上,客戶問「哪來的」你答得出來。
2
洗成一份 JSON
每一筆至少要有四個欄位:名稱行政區座標或邊界分類。這步最花時間,但做完之後圖就是資料的鏡子——改資料,圖自己會變。
3
邊界用 SVG、點位用經緯度
範圍界線畫成 SVG 路徑,社區點位用經緯度定位,全部寫進同一個 HTML 檔。不用地圖 API 金鑰、不用後端、不用月費,離線也打得開。
4
部署成靜態網頁
丟上 Netlify 或 Cloudflare Pages,拿到專屬網址。這一步在最後的「部署」單元有完整教學。
為什麼堅持不用地圖 API?金鑰要綁信用卡、流量爆了要付錢、被別人盜用你要吃帳單。做成純 SVG 靜態圖,零成本、零風險、永遠打得開,客戶三年後點你傳的舊連結也還在。
動手做:把你的區域畫成一張圖
貼給 Claude Code,換成你的行政區與資料
請幫我做一個單檔 HTML 的區域地圖網頁,主題是「OO市OO區 商圈與社區分佈圖」。

【資料】我會給你一份社區清單(社區名、地址、行政區、屋齡、分類)。
請幫我把地址轉成座標,缺的欄位標「待確認」,不要自己編造座標或屋齡

【功能需求】
1. 底圖用 SVG 畫行政區輪廓,不要用需要金鑰的地圖 API
2. 社區點位依分類用不同顏色,點擊跳出資訊卡(社區名、屋齡、戶數)
3. 右上角圖層開關:可以單獨開關「社區點位」「範圍界線」「道路」
4. 手機版要能用手指縮放拖曳,375px 寬不可以左右跑版
5. 地圖上呈現的資料,下方要有一份對應的文字表格(AI 搜尋讀不到 SVG)

【技術限制】全部寫在同一個 .html 檔裡,不要外部相依、不要後端、可以離線打開。

【資料來源】頁尾要標明資料來源與更新日期。
資料來源:內政部不動產交易實價查詢服務網、內政部不動產經紀業備查資料、國土測繪中心國土測繪圖資服務雲、台中市政府教育局學區公告。
製作:小蟲老師(賴明章)|資料更新日期:2026-08-29
地圖做好了?
接下來進到「部署」單元,把它發布成自己的網址,就能傳 LINE 給客戶
新店開張
🚀 部署

把做好的社區介紹與地圖網頁放上網路,讓客戶直接使用

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把整個網頁資料夾拖進上傳區塊
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 確認 → 給你 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
部署前自問三件事: ① 頁面會不會出現屋主或客戶的個資(完整門牌、姓名、成交細節)?會的話不要公開部署。 ② 行情與增值判斷有沒有註明資料來源(實價登錄)與查詢日期? ③ 網址取名有沒有帶到社區名或你的個人品牌,讓客戶記得住?
掛上門牌 buglaihouse.com
🌐 網域申請實錄

小蟲把 buglaihouse.com 從申請到掛上網站的完整過程,照著做就有自己的門牌

為什麼要花錢買自己的網域?

免費的 XXX.netlify.app 就像借平台的騎樓做生意——能用,但招牌上永遠掛著別人的名字。
自己的 .com 是自己的門牌:名片印得出手、客戶記得住,以後換平台搬家,網址也跟著你走。
一年三百多塊台幣,大概是整個個人品牌裡最便宜的一筆投資。

這次的實際案例
置產軍師客戶面網站,從平台網址換成自己的門牌
bugnotes.netlify.app
buglaihouse.com
開啟成品
四步驟:從申請到掛上網站
全程不用寫程式,一杯咖啡的時間
01
註冊 Cloudflare 帳號
跟前面 Cloudflare Pages 用同一個帳號就行
1前往 dash.cloudflare.com,用 Email 註冊並完成驗證
02
搜尋、買下網域
小蟲搜的是 buglaihouse,一年約 US$11
1左側選單「網域註冊」→「註冊網域」,輸入你想要的名字搜尋
2.com,年費約 US$11——Cloudflare 賣成本價,續約同價,不搞第一年便宜之後翻倍那套
3填聯絡資料、信用卡結帳,網域立刻進到你的帳號
取名先想好:短、好唸、帶品牌。想要的名字被註冊走就換一個,出手前多搜幾個備案。
03
設定 DNS,把網域指向網站
告訴全世界:這個門牌,通到我的店
1在 Cloudflare 點進剛買的網域 → 左側「DNS」→「新增記錄」
2類型選 CNAME、名稱填 @、目標填你的網站網址(小蟲填 bugnotes.netlify.app
3⚠ 關鍵一步:把右邊的雲朵點成灰色(僅 DNS)。橘色代理會擋住 Netlify 驗證,憑證發不下來
04
回 Netlify 綁定網域
綁定+自動發 HTTPS 憑證,看到鎖頭就完工
1Netlify 後台 → Domain management →「Add a custom domain」→ 輸入 buglaihouse.com
2Netlify 驗證 DNS 通過後,自動核發免費 HTTPS 憑證(Let's Encrypt)
3等幾分鐘到半小時,網址列出現 🔒 鎖頭,自己的門牌正式啟用
小蟲的踩雷提醒

雲朵記得點灰色——這是最多人卡關的地方,橘色代理開著,Netlify 就是驗不過。
HTTPS 不是秒生效——DNS 要時間擴散,掛上去先去倒杯水,回來再重新整理。
www 也會通——Netlify 會自動把 www.buglaihouse.com 轉到主網址,不用另外設。
記得開自動續約——網域是年費制,過期沒續,門牌就被別人撿走了。

這樣總共花多少錢?
實際帳單攤開給你看
buglaihouse.com 網域(Cloudflare,一年)約 US$11(約台幣 350)
Netlify 網站託管免費
HTTPS 安全憑證免費(自動核發)
合計一年約台幣 350 元

👉 小結:門牌是自己的,店搬到哪,客戶都找得到你。

掛好門牌長什麼樣子?
buglaihouse.com 就是照上面四步掛上去的成品,點開看看
前往 buglaihouse.com
今日收工 辛苦了
單元建置中

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

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