# Coolkid AI Lab — llms-full.txt
> Coolkid AI Lab — 教非工程師用 Claude Code 與 AI Agent 建立自己的工具、網站與 AI 工作流。公開 SEO + GEO build-in-public 實驗紀錄。教育研究用途, 不構成投資建議。
> 收錄新手教學連載 + Workflows 圖書館的完整文章內容(markdown),供 AI agent 一次抓取。
> 索引(短)版見 https://www.coolkidlab.com/llms.txt(完整全站連結清單)。SEO Journey 連載與其他頁的完整內容請依索引 URL 抓 HTML。
> 最後更新:2026-05-30
## 新手教學(成長史)— 完整內容
## Claude Code Windows 安裝踩雷實錄（2026）
> Source: https://www.coolkidlab.com/newbie-pitfalls/claude-code-windows-setup.html
> Windows 10/11 安裝 Claude Code 完整 step-by-step：4 步指令、3 個 Windows 專屬雷的解法、跟 Mac 教學的差異對照、第一個專案怎麼開。一個用 Windows 11 跑半年的非工程師寫給非工程師看，30 分鐘可全跑完。
短答給趕時間的人：Windows 10 / 11 都能跑 Claude Code，30 分鐘 setup 完。需要 Node.js 18 以上、Windows 內建 PowerShell、Anthropic Pro 訂閱（US$20/月）。流程跟 Mac 一樣的部分有 90%，差別在 Windows 會多撞 3 個雷：PowerShell 執行原則（Execution Policy）被擋、中文資料夾路徑亂碼、npm 全域安裝後 PATH 沒抓到。下面全部給完整指令、卡住怎麼辦、跟 Mac 對照。
我這台是 Windows 11 主力機，用 Claude Code 半年了。第一次想跟著 YouTube 學裝那天，找了 4、5 部影片，點開全是 MacBook 畫面 — 字體、終端機 UI、安裝步驟通通對不到我的 Windows。
跟著做，第一步 brew install 就卡住。Windows 沒這東西，谷歌一下才知道這是 Mac 的鍋。繞過去之後，第二雷紅字、第三雷亂碼，一個下午就過去了（是有屁用看 Mac 教學。
後來是丟給 agent 排查一輪，才發現這些雷都跟 Claude Code 本身沒關係，是 Windows 環境的問題。這篇把那一個下午的痛重整成 step-by-step 教學，照著做 30 分鐘可以裝完。讀完你會做出：一台 Windows 跑得起來的 Claude Code 環境，可以開始用 AI 寫程式、做網站、跑自動化。
### Windows 10 / 11 可以用 Claude Code 嗎？需要哪些前置條件？
答案是可以。Windows 10、Windows 11 都能跑 Claude Code，跟 Mac 用同一個 npm 套件。下面是開始前要備齊的東西，少一樣後面就會卡住。
- 作業系統：Windows 10 或 Windows 11（64-bit）
- Node.js 18 以上：從 Node.js 官網 下載 LTS 版（綠色那顆按鈕，不要選 Current）
- PowerShell 5.1 或以上：Windows 內建。鍵盤版：按 Win 鍵 + X 選 Windows PowerShell。滑鼠版：左下角開始鍵（Windows 圖示）按右鍵 → 選 Windows PowerShell
- Anthropic 帳號 + Pro 訂閱：去 claude.ai 註冊，Pro 方案 US$20/月。免費版只能用網頁版，沒辦法跟自己電腦的檔案對接
- 硬碟空間至少 2 GB：Node 加上 npm 套件加起來不小
跟 Mac 教學最大的差別：Mac 預設用 Homebrew 安裝 Node，Windows 不需要。直接從 nodejs.org 下載 .msi 安裝程式雙擊一路 Next 就好。新手不要被 brew install 的指令嚇到。
### Claude Code 在 Windows 怎麼裝？（PowerShell 4 步驟完整指令）
下面 4 步是我自己 Windows 11 從零裝起來的順序，30 分鐘可全跑完。每一步都附完整指令、預期看到什麼、卡住怎麼辦。直接複製貼進 PowerShell 不會錯。
1. Step 1：確認 Node.js 裝好了。打開 PowerShell（鍵盤版：Win + X 選 Windows PowerShell；滑鼠版：左下角開始鍵右鍵 → 選 Windows PowerShell），輸入 node --version 按 Enter。要看到 v18 或更高的數字。看到「無法辨識的詞彙」代表 Node.js 沒裝好或 PATH（環境變數）沒抓到，先回 nodejs.org 下載 LTS 版重裝。
2. Step 2：用 npm 全域安裝 Claude Code。輸入 npm install -g @anthropic-ai/claude-code 按 Enter。會跑 30 秒到 2 分鐘看你網路。跑完看到「added X packages」就成功。如果跳紅字 EACCES、ExecutionPolicy 之類的，跳到第 3 節雷 1 看解法。
3. Step 3：進到你要工作的資料夾。先在桌面新建一個英文命名的資料夾例如 my-project，回到 PowerShell 輸入 cd C:\Users\你的名字\Desktop\my-project。注意路徑用反斜線，Windows 跟 Mac 不一樣（Mac 是正斜線）。資料夾名稱絕對不要用中文，會在後面卡關。
4. Step 4：啟動 Claude Code。在資料夾裡輸入 claude 按 Enter。第一次會跳出登入流程，把 PowerShell 顯示的網址貼到瀏覽器登入 Anthropic 帳號，把回傳的驗證碼貼回 PowerShell 就完成。
怎麼確認 setup 真的成功：PowerShell 視窗應該變成一個對話介面，左下角顯示「>」等你輸入。輸入「你好」按 Enter，Claude 用中文回你一段話 = 完成。如果輸入 claude 跳「無法辨識的詞彙」，跳到第 3 節雷 3，99% 是 PATH 環境變數沒設好。
### PowerShell 跳紅字、找不到 claude 指令怎麼辦？（Windows 三個專屬雷）
下面 3 個雷，99% 的 Windows 用戶會撞到，跟 Claude Code 本身沒關係，是 Windows 環境的問題。Mac 教學完全不會提，因為 Mac 沒有這些限制。每個雷給現象、原因、解法，照著做就過。
雷 1：PowerShell 執行原則（Execution Policy）被擋下來
現象：輸入 claude 跳一片紅字，內含「指令碼執行已停用」「about_Execution_Policies」「PSSecurityException」等字。
原因：Windows 預設禁止跑 npm 全域安裝的執行檔，是系統安全限制，不是 Claude Code 的問題。
解法：在開始選單對 PowerShell 按右鍵選「以系統管理員身分執行」，輸入 Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser 按 Enter，跳出確認時打 Y 按 Enter。設一次就終身有效，不是每次都要。設完關掉 PowerShell 重開再試 claude 就過了。
雷 2：中文資料夾路徑讓 Claude 讀檔變亂碼
現象：資料夾命名用「桌面」「我的文件」「專案」這種中文，Claude Code 讀進去整個檔名變問號或方框，工作流卡住。
原因：Windows 中文路徑用 Big5 / GBK 編碼，Node.js 跟很多 npm 套件預設假設是 UTF-8，編碼對不上就解碼錯誤。
解法：所有跟 AI 對接的資料夾，全部改成英文 + 數字 + 連字號的命名。例如「我的網站專案」改成 my-web-project。改習慣比每次修錯誤快。Mac 用戶不會遇到這個雷因為 Mac 預設是 UTF-8。
雷 3：輸入 claude 跳「無法辨識的詞彙」（PATH 沒抓到）
現象：第 2 步 npm install 跑成功看到「added X packages」，但第 4 步輸入 claude 跳「無法將 'claude' 識別為 Cmdlet」。
原因：npm 全域安裝的執行檔會放在 C:\Users\你的名字\AppData\Roaming\npm 這條路徑，Windows PATH 沒抓到這條，輸入 claude 系統就找不到。Mac 完全不會遇到，因為 Mac 預設都會抓 npm 全域路徑。
解法：手動把 npm 路徑加進系統 PATH。Windows 設定 → 系統 → 進階系統設定 → 環境變數 → 在「使用者變數」找到 Path 點編輯 → 新增 → 貼上 C:\Users\你的名字\AppData\Roaming\npm → 確定 → 全部關掉。重開 PowerShell 再試 claude 就過了。
### 為什麼 KOL 教學都用 Mac？Windows 用戶該怎麼補？
工程師圈子 Mac 比例高，Anthropic 官方文件原本就假設 Mac 或 Linux 環境。但 Windows 在台灣個人電腦市佔率超過 80%，所以「跟著 Mac 教學做不出來的人」其實比 Mac 用戶還多。下面 3 個結構性原因講為什麼會這樣。
- 工程師圈早期 Mac 比例高，AI 工具教學頻道也自然用 Mac 示範。中文圈現有的 Claude Code 教學影片幾乎清一色 MacBook 畫面，Windows 用戶完全找不到對應版本可以照抄。
- Mac 的 Terminal + Homebrew + zsh 環境跟 Linux 接近，Anthropic 官方文件原本就是這個假設，Windows 用戶要自己補環境差異。
- Mac 沒有 PowerShell Execution Policy 這種「保護用戶不誤開檔」的限制，所以 Mac 教學步驟少很多。看起來「Mac 裝起來超快」是這個原因，不是 Mac 真的優越。
Windows 用戶補的方法：跟著 Mac 教學跑，遇到 brew install 改用直接下載 .msi 安裝程式、遇到 sudo 改用「以系統管理員身分執行」、遇到正斜線改反斜線、遇到中文路徑改英文。看 Mac 教學 + 這 4 個翻譯，90% 的內容可以照搬。剩下 10% 就是上面三個專屬雷。
### Claude Code 裝完之後第一個專案怎麼開？（從 setup 到上線的下一步）
第一個專案不要挑「我要做一個 SaaS」，挑「我老婆會用、我每天會用、我家人會用」的小工具。技術門檻低、需求清楚、做完馬上能用，新手建立信心的速度最快。
我自己第一個專案是給老婆做的童裝庫存管理頁。從零到上線在 Vercel 花了一個下午，但中間部署卡了 3 小時——「我自己電腦看得到、網路上完全沒變化」這個玄學問題，Windows 用戶 100% 會撞到。
詳細紀錄寫在這篇：我以為再補一段就好，結果改了 3 小時——「重寫比修補快」的啟示（連結在下方相關文章區）。建議裝完 Claude Code 之後直接接著看那篇，把第一次部署的雷一起避開。
### 不想自己 setup 怎麼辦？Windows 非工程師的 3 個選擇
有 3 條路，看你時間跟意願。下面從免費自學到付費代做，從輕到重排序。
1. 路線 1 — 跟著這篇文章自己跑一次。Pro：只付 Claude Code US$20/月，能力長在自己身上。Con：Windows 三個雷至少花 1-2 小時 debug。適合：有時間、想搞懂底層、看文章不痛苦的人。
2. 路線 2 — 看這篇加上 Lab 未來推出的 Windows 系列影片。Pro：跟著畫面做卡住率比看文字版低。Con：影片還在製作中，目前先以這篇文字版為主。適合：看影片比看長文快的人。
3. 路線 3 — 不想自己研究我教你（規劃中）。1-on-1 帶你從 Windows 安裝、Claude Code setup、第一個專案上線、build-in-public 開戶整套跑完。Pro：不用自己 debug、不用看長文、有人帶。Con：要付費。適合：沒時間自己研究、不想看文章、想直接從 0 到 1 的人。
Windows 用戶在 AI 時代不是劣勢，只是 KOL 沒人寫教學給你而已。三條路任選一條開始跑，就贏 80% 還在猶豫的人。
### Summary
Claude Code 在 Windows 11 / 10 完全可用，30 分鐘 setup 完。流程跟 Mac 一樣的部分：Node.js 安裝、npm install -g @anthropic-ai/claude-code、cd 進專案資料夾、claude 啟動。Windows 多撞的 3 個雷：PowerShell Execution Policy（用系統管理員跑 Set-ExecutionPolicy RemoteSigned）、中文路徑亂碼（資料夾全改英文）、PATH 沒抓到（手動加 AppData\Roaming\npm 進環境變數）。三個雷解完，後面 Vercel 部署、build-in-public、SEO 內容工廠整套流程，Windows 用戶跟 Mac 用戶站在同一條起跑線。沒時間自己 setup → 看上面路線 3 的陪跑。
### 名詞解釋
- **Node.js**：讓電腦能執行 JavaScript 程式的基礎環境，Claude Code 要靠它運作。免費，從官網 nodejs.org 下載安裝。
- **LTS（Long Term Support）**：軟體的「長期支援版」，最穩定、官方維護最久的版本。下載 Node.js 時選綠色的 LTS 按鈕就對了。
- **npm**：裝 Node.js 時附帶的套件管理工具，像程式界的 App Store — 一行指令就能安裝各種工具，Claude Code 也是用它裝的。
- **PowerShell**：Windows 內建的指令視窗：用打字下指令的方式操作電腦，Claude Code 就在這裡面跑。按 Win + X 可以叫出來。
- **終端機（terminal）**：「用文字指令操作電腦的視窗」的統稱。Mac 叫 Terminal，Windows 上就是 PowerShell，兩者角色相同。
- **執行原則（Execution Policy）**：Windows 的安全限制，預設擋下外來的指令檔。第 3 節雷 1 的紅字就是它造成的，用系統管理員身分設定一次就終身解除。
- **PATH（環境變數）**：系統的「去哪裡找程式」清單。輸入 claude 卻顯示找不到，九成是 npm 的資料夾沒被加進這份清單，手動加一次就好。
- **編碼（encoding）**：電腦儲存文字的方式。Windows 中文路徑用 Big5，多數程式假設 UTF-8，兩邊對不上就變亂碼 — 所以資料夾一律用英文命名。
- **Vercel**：把網站免費發佈到網路上的服務：做好的網站丟上去就有正式網址。第一次部署會撞的雷，見下方相關文章。
- **Homebrew（brew）**：Mac 專用的軟體安裝工具，Windows 沒有也不需要。Mac 教學看到 brew install 開頭的指令，Windows 用戶直接跳過。
### FAQ
**Q: Windows 可以用 Claude Code 嗎？**
可以。Windows 10 和 Windows 11 都能跑 Claude Code，需要先裝 Node.js 18 以上版本以及 Windows 內建的 PowerShell。我自己用 Windows 11 跑了半年，跟 Mac 比起來主要會多撞 3 個雷：PowerShell 執行原則（Execution Policy）、中文資料夾路徑亂碼、npm 全域安裝後的 PATH 環境變數。詳細解法看本文第 3 節「PowerShell 跳紅字、找不到 claude 指令怎麼辦」。
**Q: Claude Code 怎麼裝？（Windows 版完整 4 步驟）**
Windows 安裝 Claude Code 4 個步驟：1）從 nodejs.org 下載 Node.js LTS 版安裝；2）打開 PowerShell 輸入 npm install -g @anthropic-ai/claude-code；3）cd 進到你的工作資料夾（一定用英文命名）；4）輸入 claude 啟動，跟著瀏覽器登入 Anthropic 帳號完成驗證。30 分鐘可全跑完。如果輸入 claude 跳「無法辨識的詞彙」代表 PATH 沒設好，看本文第 3 節雷 3。
**Q: Claude Code 免費版收費嗎？**
Anthropic 帳號免費註冊，但 Claude Code 這個工具需要 Pro 方案（US$20/月）或 Max 方案（US$100/月起）才能完整使用。免費版只能用網頁版 claude.ai 對話，無法用終端機介面跟自己電腦的檔案對接。新手建議先用 Pro 試一個月，確定真的會用再決定要不要升 Max 或停訂。
**Q: Claude Code 跟 Claude 一樣嗎？**
不一樣。Claude 是 Anthropic 的 AI 模型，在 claude.ai 網頁可以對話。Claude Code 是命令列工具（CLI），裝在自己電腦上，讓 Claude 模型直接讀寫你的檔案、跑指令、裝套件。簡單講：Claude 是大腦，Claude Code 是讓大腦長手腳的介面。非工程師如果要用 AI 蓋網站、做工具、跑自動化，需要的是 Claude Code，不是只有網頁版的 Claude。
**Q: Claude Code Windows 跟 Mac 哪個比較好用？**
一旦 setup 完成，Windows 跟 Mac 用 Claude Code 的體驗 95% 一樣。差別只在 setup 階段：Mac 平均 5 分鐘搞定，Windows 平均 30 分鐘（含 3 個專屬雷）。setup 完之後寫 code、跑專案、Vercel 部署的速度跟功能完全一致。我自己用 Windows 11 跑半年，沒遇到任何「Mac 才有 Windows 沒有」的功能差異。
**Q: Windows 沒有 Homebrew 怎麼辦？**
Homebrew（brew）是 Mac 跟 Linux 的套件管理工具，Windows 沒有也不需要。Windows 安裝 Node.js 直接從 nodejs.org 下載 .msi 安裝程式雙擊就好。Mac 教學裡的 brew install xxx 指令，Windows 用戶可以直接忽略，改用對應的 Windows 安裝方式（大部分是雙擊 .exe 安裝程式或在 PowerShell 跑 npm install）。
---
## 第一次用 AI 做網站：一個非工程師的真實心路歷程
> Source: https://www.coolkidlab.com/newbie-pitfalls/claude-code-beginner-make-website.html
> 第一次用 Claude Code 做網站的完整 step-by-step：30-60 分鐘做出一個能上線的條件式問答工具（投資個性測驗 / MBTI / 客戶 onboarding 都能套）。含資料夾命名、電腦安全設定、AI 規劃模式切換、GitHub + Vercel 部署完整指令。
我朋友開的投資理財教育公司想要一個給用戶測自己投資個性的小工具，丟給我做。我不會寫程式，以前看到 HTML 都會頭痛。但用 Claude Code 一陣子之後還是硬著頭皮接了，做了 4-5 個雷之後總算上線。
這篇把當初撞過的牆全部重整成 step-by-step 教學，讀完你會做出一個能公開上線的「條件式問答工具」——投資個性測驗、MBTI、新手 onboarding 篩選器、產品推薦器，任何「根據用戶條件挑題目」的需求都套得上。
30-60 分鐘可全跑完。前置條件：Claude Code 已裝好（沒裝看 Windows setup 那篇）、英文命名的資料夾、Vercel 帳號（免費）、GitHub 帳號（免費）。Pro 訂閱 US$20/月。
### 第一次用 AI 做網站要從哪裡開始？（資料夾命名 + 開檔習慣）
從「正確命名一個英文資料夾」開始。聽起來很笨，但這是新手 100% 卡的第一關。我自己第一次用中文資料夾名稱，Claude Code 讀進去整個變問號，卡了 1 小時才發現問題出在這裡。
正確開檔流程 3 步：
1. 在桌面新建一個英文 + 連字號的資料夾，例如 my-quiz-site。不要用中文、不要用空格、不要用特殊符號。
2. 打開 PowerShell（Windows）或 Terminal（Mac），用 cd C:\Users\你的名字\Desktop\my-quiz-site 進到資料夾。
3. 輸入 claude 啟動 Claude Code，這個資料夾就變成 AI 的工作目錄，後面所有檔案都會建在這裡。
資料夾這關過了之後，下一關是電腦本身的安全設定，特別是 Windows 用戶會撞。
### 為什麼 AI 寫程式會跳一片紅字？（電腦安全設定怎麼處理）
AI 那麼強，但連我電腦上的安全設定、權限這些雜事都不會自己搞定。資料夾改好之後第一次叫 Claude Code 跑指令，畫面跳一片紅字，AI 解釋了一堆聽不懂的東西。後來才發現問題不在 AI 寫的 code，是電腦本身的安全設定不讓我這樣執行。
Windows 解法：用系統管理員身分開 PowerShell，輸入 Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser 按 Enter，跳出確認時打 Y。設一次就終身有效。詳細看「Claude Code Windows 安裝踩雷實錄」那篇第 3 節。
Mac 解法：幾乎不會遇到。如果跳 sudo 提示，輸入電腦密碼按 Enter 就過。Mac 預設的安全設定比 Windows 寬鬆。
整理一下分工：AI 是寫東西的助手，不是電腦本身的維護員。電腦的環境、設定、權限這些東西，最後還是要自己懂一點點基本概念，AI 沒辦法越過電腦自己長腳。
### 卡住時怎麼判斷是「哪一層」的問題？（新手 debug 順序）
新手最容易把所有問題都丟給 AI 修，但其實要先分清楚問題在哪一層，AI 才能幫對忙。下面是我自己 debug 的順序，從最常見排到最少見：
- 畫面有亂碼或問號 → 通常是檔案命名或編碼問題。先檢查資料夾名稱有沒有中文、有沒有特殊符號。
- PowerShell 或 Terminal 跳紅字 → 通常是電腦安全設定或環境變數，跟 AI 寫的 code 沒關係。先看第 2 節解法。
- 自己電腦看得到、網路上看不到 → 還沒部署到雲端，要 push 到 GitHub + Vercel。看第 6 節。
- AI 一直在規劃但沒真的改檔 → 要明確下指令「不要規劃，直接動手改 [檔名]」。看第 4 節。
- 改完看不到效果 → 瀏覽器快取或 Vercel 部署延遲，用無痕視窗打開避免被舊版騙。
先判斷哪一層再請 AI 修，可以省掉 90% 的卡關時間。我自己現在 debug 一定先做這一步。
### 怎麼讓 AI 從「規劃模式」切到「動手模式」？（關鍵指令範本）
用明確的指令告訴 AI「不要規劃，直接動手」就好。AI 預設會先給規劃文件，看起來很專業但不會真的改檔。新手第一次用很容易被「漂亮的規劃」騙，以為 AI 已經做完了。
我自己卡過一次：請 AI 根據用戶條件給不同題目，AI 給了一份「執行策略」「優先順序」，規劃完它跟我說「我不記得有什麼計畫，你想要我改什麼？」那一刻真的謝囉。
之後我每次要 AI 真的動工，開頭都會講這句指令範本：
「不要規劃，直接動手改 [檔名] 的 [功能]。需要的時候才回報進度。」
這個範本可以省掉 1-2 次無效規劃。寫 code 的時候我會把 [檔名] 換成 index.html、把 [功能] 換成「年齡篩選邏輯」這種具體的東西。具體 > 抽象，AI 才不會多想。
### 第一個能跑的網站怎麼從 0 做到 100？（條件式問答工具完整 5 步驟）
下面用「條件式問答工具」當範例做完整 step-by-step。讀完你能做出一個根據用戶條件挑題目的小網站，例如投資個性測驗、MBTI、新手 onboarding 篩選器，任何「根據用戶條件挑題目」的需求都套得上。
1. Step 1 — 跟 AI 講清楚需求。在 Claude Code 輸入：「我想做一個 [主題] 測驗網站。每題有屬性標籤，用戶輸入年齡跟身份，系統根據條件挑出 10 題隨機抽。請建一個 index.html + 一個 quiz.js，題目用 JSON 結構放在 data.js。不要規劃，直接建檔。」
2. Step 2 — 給 AI 樣本題目。準備 5-10 題範例題目給 AI 看格式，例如：{ q: '20 歲剛出社會應該優先做什麼?', tag: ['young', 'low-asset'], options: [...] }。AI 會照這個結構生剩下的題目。題目越具體，AI 生出來的越貼。
3. Step 3 — 在自己電腦看效果。資料夾裡有 index.html，直接雙擊用瀏覽器打開。看用戶輸入年齡跟身份按下去，有沒有跳出對應題目。沒對的就把錯誤截圖丟回 Claude Code，說「這裡卡住了，看怎麼修」。
4. Step 4 — 邏輯對上之後加美化。叫 AI 用 Tailwind CSS、NES.css 或任何你喜歡的 CSS 框架包介面。一句指令：「幫我用 [風格] 重做介面，保留現有功能不要改邏輯。」
5. Step 5 — 寫 README.md。叫 AI 寫一個 README 描述這個專案是什麼、怎麼跑、怎麼部署。為下一步 GitHub 上架做準備。
跑完 5 步，你已經有一個能在自己電腦跑的網站。看到「20 歲、剛出社會」跳出珍奶的題目、「60 歲、資產 1000 萬以上」跳出信託退休理財的題目，那種「邏輯對上了」的瞬間，新手會有一種「乾，我居然真的做出來了」的感覺。下一步把它公開上線。
（補充：本範例工具示範用，不構成投資建議，也不推薦任何金融商品。）
### 做完之後怎麼把網站從「自己電腦」公開到「全世界」？（GitHub + Vercel 5 步部署）
用 GitHub 做版本控管 + Vercel 做部署。兩個都免費、5 分鐘 setup 完、之後改 code 自動重新部署。下面完整 step-by-step：
1. Step 1 — 註冊 GitHub 帳號（github.com），建一個新的 repository 取名跟資料夾一樣（例如 my-quiz-site）。設成 Public（之後 Vercel 免費方案需要）。
2. Step 2 — 在 Claude Code 跟 AI 說：「把現有資料夾 push 到 GitHub repo [your-username]/my-quiz-site，需要的話幫我 init git。」AI 會跑 git init / git add / git commit / git remote add / git push 整套指令。第一次 push 會問 GitHub 帳號密碼，照填。
3. Step 3 — 註冊 Vercel 帳號（vercel.com），用 GitHub 帳號登入最快。點 Add New → Project → 找剛剛 push 上去的 repo → Deploy。Vercel 自動偵測檔案結構，1-2 分鐘部署完。
4. Step 4 — 部署完 Vercel 給你一個網址（例如 my-quiz-site.vercel.app）。用手機打開那個網址實測功能。能跑就過關。
5. Step 5 — 之後每次改 code 在 Claude Code 講「push 到 GitHub」，Vercel 偵測到變動會自動重新部署，1-2 分鐘新版上線。不需要手動上傳任何東西。
用手機打開那個公開網址、看到自己做的東西在外面真的能用的瞬間，新手第一次的成就感真的很重。這個信心比技術本身值錢。
### 不想自己做、想直接被帶怎麼辦？
上面這套 step-by-step 自己跑大概 30-60 分鐘，前提是有耐心讀文章 + 願意 debug。如果符合下面任一條，可能不適合自己跑：
- 沒時間自己研究、看長文會頭痛
- 想要一個專屬於你領域的工具（例如客戶 onboarding 篩選、產品推薦器、品牌 quiz），不是公版範例
- 卡住的時候不想去 Stack Overflow 翻問題
這時候可以直接找 不想自己研究我教你（規劃中）。1-on-1 帶你從需求釐清、Claude Code 安裝、第一個專案上線、build-in-public 開戶整套跑完。Pro：不用自己 debug、不用看長文、有人帶。Con：要付費。適合：沒時間自己研究、不想看長文、想直接從 0 到 1 的人。
### Summary
第一次用 AI 做網站完整 step-by-step：1) 用英文資料夾開檔；2) Windows 跑 Set-ExecutionPolicy 處理安全設定；3) 卡住先判斷哪一層（檔名 / 環境 / 部署 / 規劃模式）；4) 用「不要規劃，直接動手改 [檔名]」指令範本切換 AI 模式；5) 5 步建出條件式問答工具（投資測驗 / MBTI / onboarding 篩選都能套）；6) GitHub + Vercel 5 步部署上線，之後改 code 自動重新部署。30-60 分鐘可全跑完。沒時間自己跑 → 看上面 不想自己研究我教你。
### 名詞解釋
- **Claude Code**：Anthropic 推出的 AI 寫程式工具，裝在自己電腦的終端機裡，能直接讀寫你的檔案、跑指令，把你用中文描述的需求做成真的網站或工具。
- **GitHub**：放 Git 程式碼的雲端平台，也是全世界開源專案的集散地。程式碼推上去之後可以接自動部署。
- **Vercel**：把網站免費發佈到網路上的服務：接上 GitHub 後，每次推程式碼就自動更新網站，個人專案免費方案就夠用。
- **部署（deploy）**：把做好的網站或程式「推上線」讓所有人用得到的動作。
- **終端機（terminal）**：「用文字指令操作電腦的視窗」的統稱。Mac 叫 Terminal，Windows 上就是 PowerShell，兩者角色相同。
- **PowerShell**：Windows 內建的指令視窗：用打字下指令的方式操作電腦，Claude Code 在 Windows 上就在這裡面跑。按 Win + X 可以叫出來。
- **編碼（encoding）**：電腦儲存文字的方式。Windows 中文環境常用 Big5，多數程式假設 UTF-8，兩邊對不上就變亂碼 — 所以資料夾、檔案建議用英文命名。
- **提交（commit）**：Git 的一個存檔點：把這次改動連同一句說明記錄下來，之後隨時可以回到這個版本。
- **無程式碼（no-code）**：不寫程式、用拖拉跟設定做出應用的工具或方法。AI 代理出現後，「會描述需求」比「會不會寫程式」更關鍵。
### FAQ
**Q: 第一次用 AI 做網站要會寫程式嗎？**
不需要。用 Claude Code 這種 AI coding 工具的時候，你的角色是「需求講清楚」+「驗證對不對」，不是自己寫每一行 code。我自己是全職交易者，完全沒有寫程式背景，跟著本文 step-by-step 30-60 分鐘可以做出第一個能上線的網站。比較重要的是知道怎麼跟 AI 講需求、卡住時怎麼判斷哪一層出問題（看本文第 3 節）。
**Q: AI 寫網站需要付費工具嗎？**
需要 Anthropic Pro 訂閱（US$20/月）才能用 Claude Code。GitHub 跟 Vercel 都免費。一個月成本 US$20，相當於 NT$650 左右，跟 Netflix 差不多。如果只想試試看再決定要不要付，Pro 月繳可以隨時停。完全免費的替代方案有 Cursor 免費版或 GitHub Copilot 免費版，但對非工程師來說 Claude Code 的中文對話跟「直接改檔」體驗最順。
**Q: AI 做的網站怎麼免費部署上線？**
Vercel 免費方案最適合非工程師。流程：把專案 push 到 GitHub（免費）→ Vercel 用 GitHub 帳號登入 → Add New Project 選 repo → Deploy → 1-2 分鐘給你一個 .vercel.app 網址。之後每次改 code push 到 GitHub，Vercel 偵測到自動重新部署，不用手動上傳。完整 step-by-step 看本文第 6 節。
**Q: AI 卡在「規劃模式」一直不動手怎麼辦？**
用明確指令範本：「不要規劃，直接動手改 [檔名] 的 [功能]。需要的時候才回報進度。」AI 預設會先給規劃文件，看起來很專業但不會真的改檔。指令裡明講「不要規劃」+ 指定具體檔名跟功能，AI 才不會空轉。我自己每次要 AI 真的動工都會用這個範本，可以省掉 1-2 次無效規劃。詳細看本文第 4 節。
**Q: AI 第一次寫的 code 跑不起來怎麼辦？**
先判斷錯誤在哪一層，再決定怎麼修。從最常見排序：1）資料夾命名有中文 → 改英文；2）電腦安全設定擋住（PowerShell 紅字）→ 跑 Set-ExecutionPolicy；3）瀏覽器快取 → 用無痕視窗打開；4）AI 沒真的改檔 → 用「不要規劃，直接動手」指令；5）部署延遲 → 等 1-2 分鐘 Vercel 重新部署。debug 順序看本文第 3 節，這個順序可以省 90% 的卡關時間。
**Q: 第一個 AI 網站專案做什麼題材最好上手？**
做「自己每天會用、家人會用、朋友需要」的小工具最好上手。技術門檻低、需求清楚、做完馬上能用，新手建立信心最快。範例：條件式問答工具（投資測驗、MBTI）、待辦清單、家庭行事曆、童裝庫存管理頁、家族 LINE Bot。不要挑「我要做一個 SaaS 賺錢」這種題目當第一個，需求太大會中途放棄。我自己第一個專案是幫朋友的投資理財教育公司做的條件式問答工具，第二個是給老婆童裝店的庫存管理頁，都是身邊真實需求。
---
## 我以為再補一段就好，結果改了 3 小時：「重寫比修補快」的啟示
> Source: https://www.coolkidlab.com/newbie-pitfalls/claude-code-vercel-deploy-not-working.html
> Vercel 部署不更新完整 troubleshoot SOP：3 層同步診斷（本機 / GitHub / Vercel）、部署前 5 步 checklist、什麼時候該重寫不該修補的決策框架，以及一個手機可用的童裝庫存管理頁完整 step-by-step。新手避開卡 3 小時。
稍微熟悉 AI 寫程式之後，我又靈機一動，想幫賣童裝的老婆做一個用手機就能管庫存和營收的小網頁。原本以為功能不複雜，加幾個欄位、幾個查詢按鈕應該就好。一開始真的很順，做完之後在自己電腦上跑得很 OK。
結果當我想加一個「搜尋庫存」功能時，撞到我做網站以來最玄的卡點：自己電腦看得到、網路上的正式網站卻完全沒變化。卡了 3 小時才解掉，一半時間在補消失的東西、一半時間在懷疑人生。
這篇把那 3 小時的痛重整成 step-by-step 教學。讀完你會做出：1) 一個手機可用的庫存管理小頁；2) 一份部署前 5 步 checklist，避免下次卡 3 小時；3) 一個「什麼時候該重寫、什麼時候該修補」的決策框架。30-60 分鐘可全跑完。
### 為什麼自己電腦看得到、Vercel 上完全沒變化？（3 層同步診斷）
因為「自己電腦」「GitHub」「Vercel」是三個獨立的地方，不是同一個檔案。新手最容易把這 3 層混成一個，但它們各跑各的：自己電腦有不代表 GitHub 有、GitHub 有也不代表 Vercel 已經跟上。任何一層斷掉，正式網站就停在舊版。
我自己卡 3 小時就是這個原因。搜尋庫存功能在自己電腦點下去會跳出結果，但 Vercel 的網址打開像沒事人一樣完全沒變化。一直在補消失的東西、一直在重傳，但問題不在 code 本身，問題在「3 層中有一層沒接好」。
卡住的時候第一件事不是叫 AI 修，是退一步問：是哪一層沒同步？下面 5 個檢查問題照順序問，定位 90% 的部署問題：
- 我自己電腦上的版本是最新的嗎？（編輯器右上角有沒有「未存檔」小圓點）
- 檔案有沒有真的存好？（按 Ctrl+S 確定一次）
- 有沒有 push 到 GitHub？（github.com 打開 repo 看最新 commit 時間是不是剛剛）
- Vercel 有沒有重新部署？（vercel.com 打開專案看 Deployments 頁籤最新一筆狀態）
- 我打開的網址是真的正式網站嗎？（不是 localhost、不是 preview，是 .vercel.app 或自訂網域）
5 個問題照順序問，找到第一個「不確定」或「沒有」的層，就是問題所在。
### Vercel 部署不更新最常見的 3 個原因？（從最常見排到最少）
下面 3 個原因覆蓋我自己跟身邊新手 95% 的部署不更新案例。從最常見開始排：
原因 1：Code 沒 push 到 GitHub。改完檔案以為 Vercel 會魔法偵測，但 Vercel 只看 GitHub repo，沒 push 等於沒事。檢查：在 Claude Code 跟 AI 確認「剛剛改的東西有 push 到 GitHub 嗎」，沒有就叫它 push。或自己上 github.com 打開 repo 看 commit 時間是不是剛剛。
原因 2：瀏覽器快取騙人。Code 跟 Vercel 都對了，但你打開的瀏覽器拿舊版顯示。檢查：用無痕視窗（Chrome 是 Ctrl+Shift+N，Safari 是 Cmd+Shift+N）打開正式網址，這個不會吃舊快取。看到新版就是被快取騙。
原因 3：Vercel 部署失敗，但你不知道。Vercel 偵測到新 commit 會自動跑 build，build 失敗的時候不會發信通知（除非設定）。檢查：vercel.com 打開專案 → Deployments 頁籤 → 看最新一筆是 Ready（綠燈）還是 Failed（紅燈）。Failed 的話點進去看 Build Log 哪一行紅字。
### 怎麼建立部署前 5 步 checklist？（避免下次卡 3 小時的 SOP）
我自己卡完那 3 小時之後，整理出下面 5 步 checklist。每次想 push 上線前先跑一遍，每層確認過再 push，不會再有「咦 怎麼沒更新」的時刻：
1. Step 1 — 自己電腦能不能跑？在自己電腦打開測試畫面點按鈕，看新功能會不會出現。沒出現就先在自己電腦修好，不要急著 push。
2. Step 2 — 檔案有沒有存好？看編輯器右上角有沒有「未存檔」的小圓點。有就按 Ctrl+S 存一次。Claude Code 改檔案會自動存，但你手動加註解可能漏存。
3. Step 3 — 有沒有送上 GitHub？打開 github.com 你的 repo 看 Commits 那欄最新一筆時間是不是剛剛。不是就回 Claude Code 跟 AI 講「push 到 GitHub」。
4. Step 4 — Vercel 有沒有重新部署成功？打開 vercel.com 專案 → Deployments → 最新一筆要是 Ready 綠燈。看到紅燈 Failed 就點進去看 Build Log。
5. Step 5 — 用無痕視窗打開正式網址確認。避免被瀏覽器舊快取騙。看到新版才算真的部署成功。
5 步跑下來大概 1 分鐘。比起卡 3 小時，這 1 分鐘超划算。
### 什麼時候該重寫、什麼時候該修補？（重寫比修補快的判斷框架）
卡到後面我發現一件反直覺的事：「重寫一份乾淨的版本」比「繼續修補」還快。但這件事有適用條件，不是每次卡住都該重寫。下面是我自己用的判斷框架：
該重寫的訊號：
- 同一個 bug 修 3 次以上還會跑出來
- 改 A 功能會壞 B 功能、改 B 功能會壞 C 功能（牽一髮動全身）
- AI 自己也說「這個狀況有點詭異」「我也找不到原因」
- 前面被反覆修改超過 5 次，整個專案結構已經看不懂
- 你自己看 code 都不知道哪段在做什麼了
該修補的訊號：
- 錯誤訊息明確指到某一行、某個檔案
- 這是新加的功能第一次跑壞，沒影響其他部分
- Claude Code 一句話就能定位問題
- 整體結構還清楚，只是某個小功能沒接好
重寫指令範本：「請把目前這個專案的所有功能整理成清單，然後乾淨地重寫一份。功能清單包含：[列出你要的功能]。重寫的時候不要參考舊版有 bug 的部分，從零開始。」這樣 AI 不會把舊版的雷複製到新版。
### 手機可用的庫存管理頁怎麼從 0 做到 100？（5 步 step-by-step）
下面用「童裝庫存管理頁」當範例做完整 step-by-step。讀完你能做出一個手機可用的小管理頁，能新增商品、看庫存、搜尋、整理營收。範例是童裝，但任何「小型品項管理」需求都套得上：餐廳菜單、咖啡店耗材、媽媽手作物料、二手交易帳本。
1. Step 1 — 跟 AI 講清楚需求。在 Claude Code 輸入：「我想做一個手機可用的庫存管理小頁。功能：1) 新增商品（名稱、進貨價、售價、庫存數量）；2) 列出所有商品；3) 搜尋商品名稱；4) 看當月營收（自動加總）。資料用 LocalStorage 存就好，不需要資料庫。請建 index.html + app.js + style.css，用 Tailwind CSS。不要規劃，直接建檔。」
2. Step 2 — 在自己電腦看效果。資料夾裡的 index.html 直接雙擊用瀏覽器打開，新增 2-3 個商品測功能。手機 RWD 用瀏覽器開發者工具切手機尺寸（Chrome 是 F12 → Toggle device toolbar）。看不順叫 AI 修「在 768px 以下要 ___」這種具體指令。
3. Step 3 — 加搜尋功能。一句指令：「在現有 index.html 加一個搜尋框，輸入關鍵字即時過濾商品列表（不用按 Enter）。不要動其他功能。」這個 step 是我自己第一次撞到 Vercel 不更新雷的點，記得跑完之後用第 3 節 5 步 checklist 確認。
4. Step 4 — 部署到 Vercel。把資料夾 push 到 GitHub → Vercel 連 repo → Deploy。詳細看「第一次用 AI 做網站」那篇第 6 節。1-2 分鐘給你一個 .vercel.app 網址。
5. Step 5 — 加到手機桌面。用手機 Safari 或 Chrome 打開 .vercel.app 網址 → 分享 → 加到主畫面。圖示出現在桌面，點下去全螢幕打開像 App。老婆從此用手機看庫存不用打網址。
跑完 5 步，你做出一個給家人或自己每天用的小管理頁。30-60 分鐘可全跑完。重點不是技術多難，是知道哪一步該怎麼下指令。
### 不想自己 debug 卡關怎麼辦？
上面的部署 SOP + 重寫框架自己跑得起來，但前提是有耐心 debug + 看完整篇文章。如果符合下面任一條，可能不適合自己跑：
- 卡 30 分鐘以上會放棄、不想繼續查
- 想要一個專屬於你領域的小工具（不是公版庫存管理）
- 需要連真實資料庫（Supabase / Firebase）而不是 LocalStorage
可以直接找 不想自己研究我教你（規劃中）。1-on-1 帶你從需求釐清、Claude Code 安裝、第一個專案上線、Vercel 部署 SOP 整套跑完。Pro：不用自己 debug、不用看長文、有人帶卡關 5 分鐘解決。Con：要付費。適合：沒時間自己研究、卡關會放棄、想要一次到位的人。
### Summary
Vercel 部署不更新完整 troubleshoot SOP：1) 自己電腦/GitHub/Vercel 是 3 個獨立的層，任一層斷掉就停在舊版；2) 部署不更新最常見 3 原因：code 沒 push、瀏覽器快取騙人、Vercel build 失敗你不知道；3) 部署前 5 步 checklist（自己電腦 → 存檔 → push GitHub → Vercel Ready → 無痕視窗驗證）；4) 該重寫的訊號：同 bug 修 3 次、AI 也說詭異、結構看不懂；5) 手機可用的庫存管理頁完整 5 步驟 step-by-step。30-60 分鐘可全跑完。卡關放棄型 → 看上面 不想自己研究我教你。
### 名詞解釋
- **Vercel**：把網站免費發佈到網路上的服務：接上 GitHub 後，每次推程式碼就自動更新網站，個人專案免費方案就夠用。
- **部署（deploy）**：把做好的網站或程式「推上線」讓所有人用得到的動作。
- **GitHub**：放 Git 程式碼的雲端平台，也是全世界開源專案的集散地。程式碼推上去之後可以接自動部署。
- **提交（commit）**：Git 的一個存檔點：把這次改動連同一句說明記錄下來，之後隨時可以回到這個版本。
- **快取（cache）**：把載過的資源暫存起來，下次直接用、不重新下載。網站變快的最便宜手段之一。
- **Claude Code**：Anthropic 推出的 AI 寫程式工具，裝在自己電腦的終端機裡，能直接讀寫你的檔案、跑指令，把你用中文描述的需求做成真的網站或工具。
### FAQ
**Q: Vercel 部署完不更新怎麼辦？**
從最常見排序檢查 3 件事：1) Code 有沒有 push 到 GitHub？打開 github.com 你的 repo 看 commit 時間；2) 瀏覽器快取騙你？用無痕視窗（Ctrl+Shift+N）打開正式網址；3) Vercel build 失敗你不知道？打開 vercel.com 專案 Deployments 頁籤看最新一筆是 Ready 還是 Failed。詳細部署前 5 步 checklist 看本文第 3 節。
**Q: 自己電腦看得到、Vercel 上沒變化是為什麼？**
因為「自己電腦」「GitHub」「Vercel」是 3 個獨立的地方，不是同一個檔案。新手最容易把這 3 層混成一個。任何一層斷掉，正式網站就停在舊版。99% 的「自己電腦看得到、Vercel 沒變化」都是因為 code 沒 push 到 GitHub，或者 push 了但 Vercel build 失敗。檢查順序看本文第 1 節 5 個診斷問題。
**Q: AI 寫的 code 一直修不好要重寫嗎？**
看訊號決定。該重寫的訊號：同一個 bug 修 3 次以上、改 A 壞 B、AI 自己也說「狀況詭異」、整個專案結構看不懂。該修補的訊號：錯誤訊息明確指到某一行、新加功能第一次跑壞、Claude Code 一句話能定位問題。判斷框架詳細看本文第 4 節。重寫指令範本：「請把所有功能整理成清單，乾淨重寫一份，不要參考舊版有 bug 的部分。」
**Q: Vercel 免費方案有什麼限制？**
Vercel 免費方案（Hobby）對非工程師個人專案完全夠用：100 GB 流量/月、無限部署次數、自動 HTTPS、自訂網域。限制：每個 deployment build 時間 45 分鐘上限、商業用途要升級 Pro（US$20/月）、Serverless Function 執行時間 10 秒上限。蓋庫存管理頁、心理測驗、個人網站、小工具這種規模都在免費方案範圍內。我自己跑半年沒撞到任何限制。
**Q: 瀏覽器一直顯示舊版怎麼辦？**
用無痕視窗（Chrome / Edge 是 Ctrl+Shift+N、Safari 是 Cmd+Shift+N）打開正式網址。無痕視窗不吃瀏覽器快取，看到的就是 server 真實版本。如果無痕看到新版、一般視窗看到舊版，表示 code 跟部署都對了，純粹是瀏覽器快取問題。Hard reload（Ctrl+Shift+R）可以強制重抓，或清掉該網域的 cookies 跟快取。
**Q: Claude Code 改完檔案要怎麼 push 到 GitHub？**
在 Claude Code 直接跟 AI 說「把剛剛的改動 push 到 GitHub」，AI 會自己跑 git add . / git commit -m 'xxx' / git push 整套指令。第一次 push 會問 GitHub 帳號密碼或 personal access token。之後只要在 Claude Code 講「push」AI 就會幫你 push。如果跳出 authentication 錯誤，需要在 GitHub Settings → Developer settings → Personal access tokens 產生一個新 token 貼進來。
---
## AI Agent 實戰｜我用 Claude Code 做了一個交易日誌 PWA(全職交易者每天打開的工具)
> Source: https://www.coolkidlab.com/newbie-pitfalls/ai-built-my-trading-journal.html
> AI Agent 實戰紀錄 — 用 Claude Code 做交易日誌 PWA 完整 step-by-step:使用情境設計法、5 個必備功能、PWA 加到手機桌面教學、給自己用 vs 給市場用的決策框架。一個非工程師背景的全職交易者親寫,從 0 到上線的完整 AI Agent workflow,30-60 分鐘做出每天會打開的工具。
我是一個全職交易者，不會寫程式。每天需要記交易、看勝率、檢討情緒、回顧策略。試過 Excel、Notion、Google Sheets，每一個都卡卡的就是不對。後來用 Claude Code 自己做了一個 PWA 交易日誌，做到每天真的會打開的程度。
這篇把整個流程重整成 step-by-step。讀完你會做出：1) 一個用「使用情境」設計的工具需求清單；2) 一個能在手機桌面像 App 一樣打開的 PWA；3) 一個只屬於你、別人偷不走的個人工具。範例是交易日誌，但任何「現成工具總差一點」的個人需求都套得上：閱讀記錄、健身追蹤、運勢日記、創作素材庫。
30-60 分鐘可全跑完。前置條件：Claude Code 已裝好、英文資料夾、Vercel 帳號（免費）、GitHub 帳號（免費）。本範例工具僅供個人使用，不構成投資建議，也不推薦任何金融商品。
### 什麼時候該自己做工具、什麼時候用現成的？（決策框架）
如果你符合下面任 2 條以上，自己做比現成工具好用：
- 現成工具用了一陣子覺得「就是差那麼一點」、講不出哪裡卡但就是不順
- 你的工作流有一些別人覺得「沒道理」、但你自己很需要的小細節
- 資料想留在自己手上、不想被綁在 SaaS 訂閱
- 市面上做這個領域的工具普遍很雜、欄位太多
- 想要的功能組合很特定，沒有一個現成工具完全符合
我自己 5 條都中。Excel 手機難打、Notion 統計要自己手刻、Google Sheets 沒辦法記情緒這種半結構化資料。市面上「給 1000 個人用的工具」一定有妥協，自己做「只給你 1 個人用的工具」可以剛好對位。這個落差就是用 Claude Code 做工具的甜蜜點。
### 怎麼用「使用情境」設計工具？（不要直接叫 AI 寫程式）
新手最容易犯的錯：直接叫 AI「幫我做一個交易日誌」。AI 會做出一個，但介面太雜、欄位太多、打開一次就不想打開了。原因不是 AI 寫不好，是你給的需求太抽象。
正解：先寫「使用情境」再叫 AI 寫。每天會怎麼用、什麼時候打開、那一刻最需要看到什麼，把這些寫成具體場景再餵給 AI。下面是我自己用的 4 個情境模板：
1. 情境 1 — 開盤前：要看什麼資訊讓我準備好今天的交易？例如：昨天的勝率、上週的累計盈虧、最近 3 筆交易的情緒紀錄
2. 情境 2 — 進場時：要記什麼讓我之後能檢討？例如：標的、進場價、停損、為什麼進場（一句話）、進場時的情緒
3. 情境 3 — 平倉後：要記什麼讓統計有意義？例如：盈虧、有沒有按原計畫走、出場時的情緒
4. 情境 4 — 週末檢討：要看什麼讓我下週改善？例如：勝率走勢、情緒對盈虧的影響、最賺錢/最賠錢的策略
把這 4 個情境寫清楚再給 AI，做出來的東西會是「給每天用的人」設計的，不是「給資料完整」設計的。一個工具能不能被打開的關鍵，從來不是有多齊全，是有沒有貼近每天的動線。其他領域的需求（健身、閱讀、運勢）也用這 4 個情境模板套，把「交易」換成你的主題就好。
### 交易日誌 PWA 怎麼從 0 做到 100？（5 步 step-by-step）
下面用「交易日誌」當範例做完整 step-by-step。範例是交易，但任何「個人記錄類工具」都套得上：閱讀記錄、健身追蹤、運勢日記、創作素材庫，把功能名稱換掉就好。
1. Step 1 — 把第 2 節 4 個情境寫成需求文件給 AI。在 Claude Code 輸入：「我想做一個 PWA 個人日誌。使用情境 4 個：[貼上你寫的 4 個情境]。資料用 LocalStorage 存就好不需要資料庫。請建 index.html + app.js + style.css，用 Tailwind CSS。手機優先設計，桌面也要能用。不要規劃，直接建檔。」
2. Step 2 — 在自己電腦看效果。資料夾的 index.html 雙擊用瀏覽器打開，跑一次完整使用流程：開盤前查、進場記、平倉記、週末看統計。任何一步覺得卡，截圖丟回 Claude Code 說「這裡卡住了 應該改成 ___」。改 3-5 輪你會跑出真的順手的版本。
3. Step 3 — 加圖表。叫 AI 用 Chart.js 加 3 個圖：累積盈虧曲線、勝率走勢、情緒對盈虧的散點圖。一句指令：「加 Chart.js 圖表，3 個圖：1) 累積盈虧；2) 勝率走勢；3) 情緒 vs 盈虧。資料來源是 LocalStorage 已存的交易紀錄。」
4. Step 4 — 加風險控制警示。叫 AI 加「日損超標跳警告」「週損超標鎖介面」這種 hard rule。對交易者來說這個比統計圖還重要，可以強迫自己停損停手。一句指令：「加日損 -X% 跳全螢幕紅色警告、週損 -X% 鎖定新增交易功能 7 天，X 自己定義。」
5. Step 5 — 部署到 Vercel + 加到手機桌面。push 到 GitHub → Vercel 連 repo → Deploy（詳細看「第一次用 AI 做網站」第 6 節）。手機 Safari 或 Chrome 打開 .vercel.app 網址 → 分享 → 加到主畫面。下一節教怎麼做成真的像 App。
跑完 5 步，你有一個能在手機桌面像 App 一樣打開的個人日誌。30-60 分鐘可全跑完。資料存在 LocalStorage 等於只在你手機裡，沒有 server、沒有訂閱、別人偷不走。
### 怎麼把網頁做成像 App 加到手機桌面？（PWA manifest 教學）
PWA（Progressive Web App）= 讓網頁假裝自己是 App。加到手機桌面有自己的 icon、點下去全螢幕打開、不會看到瀏覽器網址列。對個人工具來說，PWA 就夠用了，不需要真的開發 iOS/Android App。
做 PWA 需要 3 個檔案。叫 AI 一句話搞定：「請把這個專案改成 PWA，加 manifest.json 跟 sw.js（service worker），icon 用一個漸層方塊先頂著之後再換。manifest 設成 standalone 模式，theme color 自己挑。」AI 會自動建檔。
完成 PWA 必備 3 件事：
1. manifest.json：定義 App 名稱、icon、開啟方式（standalone = 全螢幕無瀏覽器列）、主題色
2. sw.js（service worker）：讓 App 即使離線也能打開（PWA 必備）
3. 在 index.html 的 加 跟 tags
怎麼驗證 PWA 真的在跑？手機 Safari 打開 .vercel.app 網址 → 分享 → 看到「加入主畫面」選項 = PWA 配置正確。加完之後從桌面點 icon，打開來像 App、沒有網址列、沒有 Safari 工具列，就成功了。
### 做給自己用 vs 做給市場用 有什麼差別？
用 Claude Code 做工具最大的優勢是「可以做別人覺得沒道理的功能」。因為這個工具是給你自己用的，不是給市場用的。下面是兩者的差別：
- 給市場用：要服務 1000 個人，所以欄位要齊全、UI 要中性、避免冒犯任何族群。妥協很多。
- 給自己用：只服務你 1 個人，所以可以做「拜財神功能」「抽籤頁」「個人偏好的特殊統計」這種別人覺得沒道理的東西。剛好對位。
- 給市場用：要考慮 onboarding、要寫教學、要客服、要顧 conversion rate。整套商業模式。
- 給自己用：你就是用戶，不需要 onboarding，做出來就用。0 摩擦。
- 給市場用：UI 要適合 1000 種人，所以要拉很多設定選項。
- 給自己用：UI 對你順就好，可以 hardcode 你的偏好不留設定。簡單暴力。
我自己的交易日誌有一頁拜財神 + 抽籤的地方，做交易的人會懂這個是儀式感跟定錨。給市場做的工具不會放，但給自己做的就可以。這個差別決定了「會不會每天打開」。
### 不想自己做、想直接被帶怎麼辦？
上面這套自己跑大概 30-60 分鐘，但前提是有耐心 + 願意改 3-5 輪。如果符合下面任一條，可能不適合自己跑：
- 不想花時間寫「使用情境」這種需求釐清
- 想要連雲端資料庫（Supabase / Firebase）多裝置同步
- 需要更複雜的功能例如多帳戶、API 接券商、自動匯入交易紀錄
可以找 不想自己研究我教你（規劃中）。1-on-1 帶你從需求釐清、4 情境設計、Claude Code 操作、PWA 部署整套跑完。Pro：不用自己 debug、不用看長文、有人帶卡關 5 分鐘解決。Con：要付費。適合：沒時間自己研究、想直接拿到專屬工具、卡關會放棄的人。
### Summary
用 Claude Code 做個人 PWA 交易日誌完整 step-by-step：1) 決策框架（5 條中 2 條就值得自己做）；2) 用 4 個使用情境（開盤前/進場時/平倉後/週末檢討）寫需求，不要直接叫 AI 寫程式；3) 5 步建出 PWA：需求 → 在自己電腦調 → 加圖表 → 加風險警示 → 部署+加桌面；4) PWA 必備 3 檔（manifest.json / sw.js / head meta tags）；5) 給自己用 vs 給市場用差別：剛好對位 vs 1000 人妥協。30-60 分鐘可全跑完。範例是交易日誌，閱讀記錄/健身追蹤/運勢日記都套得上。本工具僅供個人使用，不構成投資建議。
### 名詞解釋
- **PWA（漸進式網頁應用）**：讓網頁能「安裝」到手機桌面、像 App 一樣全螢幕開啟的技術，不用上架 App Store。
- **Claude Code**：Anthropic 推出的 AI 寫程式工具，裝在自己電腦的終端機裡，能直接讀寫你的檔案、跑指令，把你用中文描述的需求做成真的網站或工具。
- **AI 代理（AI agent）**：會「動手做事」的 AI：自己讀檔案、寫程式、跑指令、修錯誤，你只負責描述需求跟監督方向。跟只會「回答問題」的聊天機器人是兩種東西。
- **Vercel**：把網站免費發佈到網路上的服務：接上 GitHub 後，每次推程式碼就自動更新網站，個人專案免費方案就夠用。
- **部署（deploy）**：把做好的網站或程式「推上線」讓所有人用得到的動作。
- **資料庫（database）**：專門儲存、查詢大量資料的系統。網站的會員、留言、紀錄都放這裡。
- **Supabase**：免費起步的雲端資料庫服務，提供資料庫＋登入驗證＋API，個人專案很夠用。
- **GitHub**：放 Git 程式碼的雲端平台，也是全世界開源專案的集散地。程式碼推上去之後可以接自動部署。
### FAQ
**Q: 用 AI 做個人工具要會寫程式嗎？**
不需要。Claude Code 這類 AI coding 工具的時候，你的角色是「把使用情境寫清楚」+「驗證做出來順不順」，不是寫每一行 code。我自己是全職交易者完全沒有寫程式背景，30-60 分鐘可以做出能在手機桌面像 App 用的個人日誌。重要的是學會「使用情境設計法」（看本文第 2 節），不是學程式語言。
**Q: PWA 是什麼？跟 App 有什麼差別？**
PWA（Progressive Web App）是用網頁技術做的 App。可以加到手機桌面、有自己的 icon、點下去全螢幕打開、看起來跟用起來都像 App。差別：iOS/Android 真 App 要寫 Swift / Kotlin、要過 App Store 審核、要繳開發者費用；PWA 用 HTML/JS/CSS 做、直接從網址加到桌面、零審核零費用。對個人工具來說 PWA 就夠用了。詳細怎麼做看本文第 4 節。
**Q: 交易日誌資料存在哪裡安全？**
個人用建議用 LocalStorage 存在自己手機/電腦裡，零雲端零訂閱別人偷不走，缺點是換裝置要重新匯入。多裝置同步可以接 Supabase（免費 500 MB）或 Firebase。最不建議：放別人的 SaaS 工具，停服或漲價你資料會被綁。我自己用 LocalStorage + 每月手動匯出 JSON 備份，3 年沒掉過資料。
**Q: AI 做的工具可以加到手機桌面嗎？**
可以，做成 PWA 就行。需要 3 個檔案：manifest.json（定義 App 名稱跟 icon）、sw.js（service worker，讓離線也能打開）、index.html 的 head 加 link rel='manifest'。叫 Claude Code 一句話搞定：「請把這個專案改成 PWA，加 manifest.json 跟 sw.js，icon 自動生成。」做完手機 Safari/Chrome 打開網址 → 分享 → 加入主畫面。詳細看本文第 4 節。
**Q: 為什麼直接叫 AI「做一個交易日誌」效果很差？**
因為需求太抽象，AI 會做出一個「資料完整但介面太雜」的東西，打開一次就不想打開。正解：先寫「使用情境」再叫 AI 寫。每天什麼時候會用、那一刻最需要看到什麼，把這些寫成具體場景餵給 AI。我自己用 4 個情境（開盤前/進場時/平倉後/週末檢討）模板，套到任何主題都通用。詳細看本文第 2 節。
**Q: 做給自己用的工具沒辦法賺錢嗎？**
個人工具有 3 條變現路：1) Build-in-public 把製作過程公開，吸引同需求的人付費請你帶他做；2) 把工具開源在 GitHub 累積技術 reputation，後面接案/求職用；3) 工具夠成熟之後抽掉個人化部分公開，做成 SaaS（這條最難不建議當第一目標）。我自己走第 1 條：把交易日誌的製作過程拆成 build-in-public 內容，吸引同樣是交易者 + 想用 AI 做工具的人來看。商業是副作用，主軸還是工具自己用。
---
## AI Agent 實戰｜我用 Claude Code 做了每天自動發 Threads 的 AI 機器人(非工程師可抄)
> Source: https://www.coolkidlab.com/newbie-pitfalls/ai-daily-thread-auto-poster.html
> AI Agent 實戰紀錄 — 用 Claude Code 做 Threads 自動發文 bot step-by-step:voice profile 萃取、GitHub trending 抓取、Windows 中文編碼解法、定時觸發。一個非工程師從 0 到上線的完整 AI Agent workflow,30-60 分鐘上線。
我每天都想分享一點東西到 Threads 做 build-in-public。但「想分享」跟「真的有東西可以分享」是兩件事。很多日子我打開 App 想了 10 分鐘然後關掉，因為腦袋空空不知道講什麼。
後來用 Claude Code 做了一個小機器人，每天晚上 8 點自動挑 GitHub 當天熱門的專案、用我的口吻寫一段介紹、發到 Threads。已經跑半年沒掉鏈子，發出去的貼文也很少有人看出是機器人寫的。
這篇是 step-by-step 教學，讀完你會做出：1) 一份自己的 voice profile 文件（讓 AI 寫得像你）；2) 一個自動抓素材+生文+發文的小機器人；3) 一個每天 8 點觸發的排程。範例是 Threads + GitHub，但任何「自動發文 bot」都套得上：X、LinkedIn、IG caption、Bluesky。30-60 分鐘可全跑完。
### 為什麼自動發文 bot 對 build-in-public 重要？（解決動作門檻）
build-in-public 持續輸出最難的不是「沒料寫」，是每天晚上累了之後不想花腦力選題、寫稿、貼出去。動作門檻 > 內容門檻。自動發文 bot 解決動作門檻，把「每天要分享什麼」這件事從你的待辦清單拿掉。
選素材來源 3 個原則：
- 每天有新內容（不會重複）：例如 GitHub trending、Hacker News、各家 changelog、PaperSwithCode
- 跟你的 brand 軸線對齊：我做 AI workflow 所以選 GitHub trending；交易者可以選 finviz / Tradingview；設計師選 Awwwards
- 有公開 API 或 RSS（不需要爬蟲對抗反爬）
我選 GitHub trending 三條都中。每天有新熱門 repo、跟我的 AI workflow brand 對齊、有公開 API 抓得到。其他軸線的可以用 RSS 或寫個簡單爬蟲，下面 step-by-step 都能套。
### 怎麼讓 AI 寫出像你寫的、不會被當機器人？（voice profile 萃取法）
做自動發文 bot 最重要的不是技術，是「寫出來像不像你」。如果文章長得像 ChatGPT 的工商風格，大家一看就知道是機器人，發了還不如不發。AI 要寫得像你，需要一份「voice profile」當教材。
voice profile 萃取 4 步驟：
1. Step 1 — 收集樣本：把過去 8-15 篇自己寫的真實貼文整理成一個檔案（Threads / X / LinkedIn 都行）。8 篇是最低門檻 15 篇最理想，少於 8 篇 AI 抓不出規律。
2. Step 2 — 把樣本丟給 Claude 請它分析。指令範本：「請從下面 N 篇我寫的貼文，萃取出我的 voice profile，包含：開頭習慣、句法特徵、用詞偏好、情緒詞彙、結尾習慣、絕對不會寫的東西（反指紋）。輸出格式：條列 + 每條 1-2 個範例。」
3. Step 3 — 校對 + 補強。Claude 萃出來的版本第一輪通常 70 分，要自己看一遍補：哪些招牌詞它沒抓到、哪些是它瞎掰的。改 2-3 輪會出 90 分版本。
4. Step 4 — 存成 voice_yourname.md，之後每次叫 AI 寫東西就把這份文件先丟給它讀。AI 會照你的招牌寫，不再是 ChatGPT 工商口吻。
我自己的 voice profile 包含：場景直入開頭、段內空格停頓、招牌「(是有屁用」、招牌「鍋」字、零 emoji 進度更新型、自我貼標籤「免費仔」「普通聰明人」。完整版本放在 Lab 的記憶層。AI 拿到這份文件之後寫的東西，95% 場合家人朋友看不出是 AI 寫的。
### Threads 自動發文 bot 怎麼從 0 做到 100？（5 步 step-by-step）
下面用「GitHub trending → Threads」當範例。可以替換：把 GitHub trending 換成你的素材源、把 Threads 換成 X 或 LinkedIn，整套架構不變。
1. Step 1 — 跟 Claude Code 講需求。輸入：「我想做一個每天晚上 8 點自動發 Threads 的小機器人。流程：1) 抓 GitHub trending 當天前 5 個 repo；2) 隨機挑 1 個；3) 讀我的 voice_coolkid.md 用我口吻寫一段 200 字內介紹；4) 發到我的 Threads 帳號。請建一個 Python 專案，requirements.txt 寫清楚要裝什麼。不要規劃，直接建檔。」
2. Step 2 — 設定 Threads API 帳號。Threads 用 Meta Graph API，去 developers.facebook.com 建 App → 加 Threads 產品 → 拿 access token。詳細看官方文件，AI 也能一邊帶你做。第一次設定大概 15 分鐘。
3. Step 3 — 在自己電腦試跑。資料夾打開 PowerShell 跑 python bot.py，看會不會抓到 GitHub repo + 寫出貼文 + 發到 Threads。先用測試帳號發 1-2 則確認流程通，再切到正式帳號。
4. Step 4 — 解 Windows 中文編碼雷（看下一節）。中文發出去變問號，是 Windows 預設的 cp950 編碼問題。先把這雷處理掉，自動發文才會真的發成中文。
5. Step 5 — 設定每天 8 點自動跑。用 Windows 工作排程器（Task Scheduler）或 Vercel + cron-job.org（看下下節）。設完不用每天手動跑，bot 自己會起床發文。
跑完 5 步 bot 開始每天自動發文。發出去 1-2 週你會發現一件事：壓力變小很多。「每天要分享什麼」這件事不再壓在頭上，剩下你只要把握有靈感的時候自己出手就好。
### 中文在 Windows PowerShell 變亂碼怎麼解？（cp950 vs UTF-8）
我自己卡 2 小時的雷:Python 在 Windows PowerShell 跑的時候，print 中文或 API 送中文會變成「???」加奇怪符號。原因是 Windows PowerShell 預設用 cp950（Big5），Python 預設用 UTF-8，編碼對不上就變亂碼。
解法 3 個（從輕到重）：
1. 解法 1（推薦）：在 Python 檔案最上面加 import sys; sys.stdout.reconfigure(encoding='utf-8')。這條讓 Python 強制用 UTF-8 輸出，不管 PowerShell 預設什麼編碼。
2. 解法 2：把貼文先寫進一個 .txt 檔案（指定 encoding='utf-8'），程式去讀那個檔案發送，不要把中文字直接在 print 或 subprocess 裡傳。
3. 解法 3（一勞永逸）：在 PowerShell 跑 chcp 65001 把終端機改成 UTF-8。但這條只對當下視窗有效，重開 PowerShell 又會變回 cp950。
我自己用解法 1 + 解法 2 雙保險。中文 API 送出後 Threads 那邊正常顯示，不會變問號。Mac 用戶完全不會遇到，因為 Mac 預設就是 UTF-8。這個雷其他自動化工具（IG bot、X bot、LINE Bot）也會遇到，學會之後 reuse。
### 怎麼讓 bot 每天 8 點自己跑？（3 種排程方式比較）
讓 bot 每天定時跑有 3 種方式，從免費到付費排序：
1. 方式 1（最簡單）— Windows 工作排程器（Task Scheduler）：Windows 內建。開始選單搜「工作排程器」→ 建立工作 → 設定每天 20:00 觸發 → 動作執行 python C:\path\to\bot.py。免費。缺點：電腦關機 bot 不會跑。
2. 方式 2（推薦）— cron-job.org 免費 cron + Vercel Function：把 bot 包成一個 API endpoint 部署到 Vercel（免費），cron-job.org 每天 8 點 GET 一次那個 URL 觸發。永久免費、電腦關機照跑。
3. 方式 3（進階）— GitHub Actions cron：在 .github/workflows/ 寫一個 cron schedule，每天 8 點觸發 GitHub Action 跑 bot。完全免費、跟 code 放一起好管理。缺點：要懂 GitHub Actions 設定。
新手第一個 bot 建議用方式 1（Task Scheduler）。15 分鐘 setup 完、零學習成本、單機就跑得起來。後面要 24/7 不間斷再升級到方式 2 或 3。我自己現在用方式 2，cron-job.org + Vercel Function 永久免費，電腦關機 bot 照跑。
### 不想自己 setup 怎麼辦？
上面這套自己跑大概 30-60 分鐘（不含 Threads API 帳號 setup 時間）。如果符合下面任一條，可能不適合自己跑：
- Threads API 帳號 setup 看到 developers.facebook.com 介面就頭痛
- 不想自己萃取 voice profile（這步驟需要對自己寫作風格有意識）
- 想要更複雜的觸發條件（例如 trending 達到某熱度才發、上次發完間隔 8 小時才再發）
可以找 不想自己研究我教你（規劃中）。1-on-1 帶你從帳號 setup、voice profile 萃取、bot 開發、定時排程整套跑完，順便 review 第一週發出去的內容調口吻。Pro：不用自己看英文官方文件、有人帶卡關 5 分鐘解決。Con：要付費。適合：build-in-public 想加速、不想自己 debug 的人。
### Summary
Threads 自動發文 bot 完整 step-by-step：1) 解決動作門檻 > 內容門檻；2) voice profile 萃取 4 步（收集樣本 → Claude 分析 → 校對補強 → 存檔 reuse）；3) bot 開發 5 步（需求 → API 設定 → 自己電腦試跑 → 解編碼雷 → 排程）；4) Windows cp950 中文亂碼解法（Python 加 sys.stdout.reconfigure utf-8）；5) 排程 3 種方式（Task Scheduler / cron-job.org+Vercel / GitHub Actions cron）。30-60 分鐘可全跑完。範例 Threads + GitHub，X / LinkedIn / IG / Bluesky 都套得上。沒時間 setup → 看上面 不想自己研究我教你。
### 名詞解釋
- **機器人（bot）**：自動執行特定任務的程式，例如 LINE bot 自動回訊息、發文 bot 每天定時發貼文。
- **Threads**：Meta 旗下的文字社群平台。本站的社群引流主戰場之一，相關自動發文流程有整篇教學。
- **排程（cron）**：讓程式「每天 8 點」「每小時」自動執行的定時器。自動發文、定期抓資料都靠它。
- **API（應用程式介面）**：程式跟程式之間溝通的窗口。例如你的程式透過 LINE 的 API 自動發訊息、透過 Google 的 API 讀試算表。
- **編碼（encoding）**：電腦儲存文字的方式。Windows 中文環境常用 Big5，多數程式假設 UTF-8，兩邊對不上就變亂碼 — 所以資料夾、檔案建議用英文命名。
- **Python**：入門門檻最低的主流程式語言之一，資料處理、自動化、AI 領域的首選。
- **GitHub**：放 Git 程式碼的雲端平台，也是全世界開源專案的集散地。程式碼推上去之後可以接自動部署。
- **API 金鑰（API key）**：服務發給你的一串密碼，程式用它證明「我有權限使用這個服務」。絕對不能公開、不能寫死在程式碼裡。
- **爬蟲（crawler）**：自動瀏覽網頁、把內容抓回去的程式。Google 靠爬蟲收錄網頁，AI 公司靠爬蟲收集資料。
- **自動化（automation）**：把重複性工作交給程式定時自動執行，例如每天早上自動抓新聞、整理成貼文、發到社群。
- **Vercel**：把網站免費發佈到網路上的服務：接上 GitHub 後，每次推程式碼就自動更新網站，個人專案免費方案就夠用。
### FAQ
**Q: AI 寫的貼文怎麼讓人看不出是機器人寫的？**
用 voice profile 萃取法。先收集自己過去 8-15 篇真實貼文，丟給 Claude 分析萃出 voice profile（包含開頭習慣、句法、用詞、招牌、反指紋），存成 voice_yourname.md。之後每次叫 AI 寫東西先讀這份文件，AI 會照你的招牌寫，95% 場合家人朋友看不出是 AI。詳細看本文第 2 節。重點是要有「反指紋」清單（你絕對不會用的詞），AI 才不會偷塞。
**Q: Threads 有開放 API 給個人開發者嗎？**
有。Threads 用 Meta Graph API，個人開發者可以免費申請。流程：去 developers.facebook.com 建 App → 加 Threads 產品 → Generate Access Token。第一次設定大概 15 分鐘，因為 Meta 介面有點繞。設完之後可以用 Python 或 Node.js 程式自動發文。免費方案有 rate limit（每天幾百則），個人 build-in-public 用完全夠。
**Q: Windows PowerShell 跑 Python 中文變亂碼怎麼解？**
Windows 預設用 cp950（Big5），Python 預設 UTF-8，編碼對不上就亂碼。最簡單解法：Python 檔案最上面加 import sys; sys.stdout.reconfigure(encoding='utf-8') 強制用 UTF-8 輸出。或者把要發的中文先寫進 .txt（指定 encoding='utf-8'）讓程式讀檔案發送。Mac 不會遇到這個雷因為 Mac 預設 UTF-8。詳細看本文第 4 節。
**Q: Python 自動發文 bot 怎麼定時觸發？**
3 種方式：1) Windows Task Scheduler（內建免費，電腦關機不跑）；2) cron-job.org + Vercel Function（永久免費、24/7 跑）；3) GitHub Actions cron（免費、跟 code 放一起）。新手建議方式 1 因為 15 分鐘 setup 完，後面要 24/7 不間斷再升級方式 2 或 3。詳細看本文第 5 節。我自己用方式 2 跑半年，cron-job.org 從沒掉過。
**Q: Build-in-public 自動化會不會變得不真誠？**
看你怎麼用。如果整篇都是 AI 寫的、你完全不看就發出去，會被讀者察覺，反效果。我自己的工作流：bot 自動抓素材+生第一版稿，但我會在發出去前看一眼，不滿意就改 1-2 行或重抓素材。AI 解決「動作門檻」（每天要找東西分享），但「靈魂內容」還是自己出手。bot 釋放出來的時間反而讓我有餘裕寫真正想寫的東西。
**Q: 用 AI bot 發文會被 Threads 或 X 封號嗎？**
用官方 API 發文不會。Threads / X / LinkedIn 都允許開發者用官方 API 自動發文。會被封號的是：用第三方爬蟲假冒人類點擊、發垃圾廣告、買假帳號互按、用機器人衝粉絲。個人 build-in-public 用官方 API 發自己寫的內容（哪怕是 AI 協助寫），完全在規則內。我自己跑半年沒被警告過。
---
## AI Agent 實戰｜我用 Claude Code 做了自動讀新聞、生圖、發 IG 的 AI Agent
> Source: https://www.coolkidlab.com/newbie-pitfalls/ai-ig-news-auto-poster.html
> AI Agent 實戰紀錄 — 用 Claude Code 做 IG 自動發文 bot 完整 step-by-step:4 頁設計法、多模型分工(便宜小模型過濾 + 貴模型寫稿,成本降到 1/10)、Python 自動生 PNG 圖、AI 警語為什麼必加。30-60 分鐘做出每半小時自動發 IG 的新聞 AI Agent。
Threads 自動發文 bot 跑順之後我想做 IG 版本。但 IG 跟 Threads 不一樣，IG 是圖片優先滑為主、文字只是配角。直接 copy Threads bot 的輸出 IG 看起來像廢文。
後來做了一個小機器人，每半小時讀 AI / 台股 / 美股新聞，挑值得寫的自動產 4 頁 IG 圖（封面 + 重點 + 白話解析 + 警語）發出去。跑了 3 個月成本約 NT$200/月，比想像中便宜很多，因為用了「多模型分工」的技巧。
這篇是 step-by-step 教學，讀完你會做出：1) 一個 IG 4 頁設計版型；2) 一個多模型分工的 bot 架構（成本降到 1/10）；3) Python 自動生 PNG 圖的程式。30-60 分鐘可全跑完。範例 IG + 新聞，但任何「圖文 + 多頁」自動發文場景都套得上。
### 為什麼 IG bot 不能直接 copy Threads bot？（平台差異）
Threads 是純文字 500 字、讀者在「閱讀」；IG 是視覺優先、讀者在「滑」。同一段文字放兩邊，IG 那邊看起來像沒做圖的廢文，沒人會停下來看。Threads bot 解決的是「選題 + 寫稿」；IG bot 要解決「選題 + 寫稿 + 設計成可滑的圖 + 寫適合 IG 的文字」。每多一層就要多拆一層。
我自己第一次直接把 Threads 文字丟 IG 完全沒人看。發了 3 篇之後重新設計成圖片優先的版本，互動率立刻 5 倍。教訓:平台的「閱讀模式」決定 bot 架構，不能跨平台直接 copy。
下面 3 個平台對應的 bot 設計差別：
- Threads / X：純文字，bot 解決選題 + 寫稿。看 #5 那篇。
- IG / Threads 圖文：圖片優先，bot 多解決「設計成可滑的多頁圖」這層。本篇主軸。
- LinkedIn：長文 + 商務語境，bot 解決選題 + 寫稿 + 改成 LinkedIn 口吻。架構同 Threads bot 但 voice profile 換正式版。
### IG 4 頁設計法是什麼？（封面 / 重點 / 解析 / 警語）
一篇 IG 貼文不是一段文字，是 4 個獨立任務。每頁功能完全不同，AI 寫的方式也不同。下面是我自己用的 4 頁版型：
1. Page 1 — 封面：一句話讓人想滑進去。20-25 字、大字、高對比。例如「Anthropic 推出 Claude 4.7」搭配紅色警示底色。寫法：用 Claude 4.5 / GPT-5 寫，要 punch line 級別。
2. Page 2 — 重點：5-6 個短標籤把新聞拆給人快速看。每條 10 字內、bullets 排版。寫法：用 Claude 3.5 Haiku 這種便宜小模型即可，重點是結構不是文采。
3. Page 3 — 白話解析：把專有名詞用人話解釋給小白聽。150-200 字、密度高。寫法：用 Claude 4.5 / GPT-5 寫，要能把行話翻成國中生都懂的程度，這是 IG bot 最大的價值點。
4. Page 4 — 警語：明說這是 AI 自動產出的內容。固定文案、視覺低調。寫法：硬編碼字串，不需要 call AI。
把每頁功能拆清楚之後，每頁可以用不同層級的 AI（看下一節），這樣成本可以省 10 倍。新手最常見的錯：4 頁都丟同一個籠統指令給最強模型，每篇成本是分工版的 10 倍但品質沒比較好。
### 怎麼把 AI 成本降到 1/10？（多模型分工法）
核心觀念:不是所有事都需要最強 AI。把 bot 內部的工作拆成「過濾員」「寫稿人」「結構工」3 種角色，每種用對應層級的模型：
1. 過濾員（小模型）— Claude 3.5 Haiku 或 GPT-5 nano。負責每半小時讀 30 則新聞清單，快速判斷哪則值得發、哪則跳過。要做的次數多但每次很簡單，要的是「快 + 便宜」。每則大概 1 美分以下。
2. 結構工（小模型）— 同樣便宜模型。負責 Page 2 的 5-6 個短標籤，這種純結構化任務小模型就夠。
3. 寫稿人（大模型）— Claude 4.5 / GPT-5。只在過濾員選出一則新聞後啟動，負責 Page 1 封面 + Page 3 白話解析這兩個品質要求高的部分。一篇大概 5-10 美分。
成本對比:全用大模型版本一篇約 50-80 美分；分工版一篇約 5-10 美分，10 倍價差。我自己 IG bot 每天發 4-6 篇，月成本約 NT$200，比 Netflix 還便宜。換算每篇成本 NT$1.5。
這個觀念其他自動化工具也通用:Threads bot、LinkedIn bot、新聞摘要 bot、客服 bot，全都可以用「過濾員 + 寫稿人」分工降成本。先想「這件事重不重要」再決定用什麼模型，不要每件事都丟最強的。
### IG 自動發文 bot 怎麼從 0 做到 100？（5 步 step-by-step）
下面用「新聞 → IG 4 頁」當範例。可以替換：把新聞換成你的素材源（PaperWithCode 論文 / 股票異動 / 競品 changelog），把 4 頁版型換成你的設計，整套架構不變。
1. Step 1 — 跟 Claude Code 講需求。輸入：「我想做一個 IG 自動發文 bot。流程：1) 每半小時讀 [新聞源 RSS] 30 則最新；2) 用 Claude 3.5 Haiku 過濾哪則值得發；3) 選中的用 Claude 4.5 寫成 4 頁內容（封面 25 字 / 重點 6 條 / 解析 200 字 / 警語固定）；4) 用 Pillow 生 4 張 PNG；5) 發到我的 IG 帳號。請建 Python 專案，requirements.txt 寫清楚。不要規劃，直接建檔。」
2. Step 2 — 申請 IG Graph API。跟 Threads 一樣去 developers.facebook.com，建立 App → 加 Instagram Graph API 產品 → 拿 access token。需要把 IG 帳號切成 Business Account 才能用 API（個人帳號不行）。設定大概 20 分鐘。
3. Step 3 — 設計 4 頁版型。在 Photoshop / Figma / Canva 設計一個 1080x1080 的版型，4 頁固定佈局（封面框、標題位置、字體、顏色、底色）。導出空白版型 PNG，bot 用 Pillow 把文字塞進固定位置。視覺一致性 = IG 帳號辨識度。
4. Step 4 — 解中文字型問題（Windows 雷）。Pillow 畫中文字會找不到字型。解法：下載思源黑體或 Google Noto Sans TC 放在專案資料夾，code 裡指定字型檔案路徑（例如 ImageFont.truetype('./fonts/NotoSansTC.ttf', 48)）。Mac 預設字型路徑就有中文字型，不用這步。
5. Step 5 — 部署 + 排程。同 Threads bot 第 5 節 3 種方式（Task Scheduler / cron-job.org+Vercel / GitHub Actions cron）。IG 適合每半小時跑一次（不是每天 8 點），cron 設 */30 * * * *。
跑完 5 步 bot 開始每半小時自動發文。30-60 分鐘可全跑完。每月成本 NT$200 上下（OpenAI / Anthropic API + Vercel 免費 + cron-job.org 免費）。
### 怎麼用 Python 自動生 IG 圖？（Pillow 5 行核心 code）
Pillow（PIL）是 Python 內建的圖片處理庫，不用學設計就能畫圖。核心邏輯只有 5 行：
1. 1) 開底圖：img = Image.open('./templates/page1.png')
2. 2) 設字型：font = ImageFont.truetype('./fonts/NotoSansTC.ttf', 48)
3. 3) 開畫筆：draw = ImageDraw.Draw(img)
4. 4) 寫字進固定位置：draw.text((100, 200), '今日重點', font=font, fill='white')
5. 5) 存檔：img.save('./output/post_001_page1.png')
4 頁就把 5 行重複跑 4 次。bot 自動把 AI 寫的 4 頁文字塞進去，5 秒生完 4 張 1080x1080 PNG。視覺風格固定不會變、字體固定不會變。對 IG 帳號是好事，觀眾一滑就認得出是同一個帳號。
進階做法:用 fal.ai / Stable Diffusion 自動生封面圖背景，每篇都有獨特插畫但版型固定。成本 +US$0.05 / 篇，視覺豐富度 +50%。我自己沒做這層因為固定底色已經夠用，但你想做加 1 行 API call 就好。
### 為什麼一定要加 AI 警語？（負責 ≠ 免責）
每篇貼文一定要自動加一行：「此貼文由 AI 自動產出，作為個人資訊蒐集與觀點記錄」。一開始我擔心警語太老實會降低觸及，跑了 3 個月反而很慶幸有加。3 個原因：
- 觀眾知道是 AI 寫的，期待會降低，反而不會挑剔語氣或細節錯誤
- 如果 AI 寫出有錯的東西，警語讓觀眾知道這是「資訊蒐集記錄」不是親手觀點，後續可以下架修正不會被 cancel
- IG 對 AI 內容越來越敏感（2025 開始 Meta 會自動標記未揭露的 AI 內容），主動誠實標明能避開平台懲罰
重要觀念:自動化 ≠ 不負責任。AI 寫的東西還是會出現在你的帳號上，你還是要為內容負責。警語不是免責，是讓觀眾知道內容怎麼來的，這本身就是負責的一部分。財經 / 投資 / 醫療類 bot 警語要更明確，加上「不構成投資建議 / 醫療建議」。
### 不想自己 setup 怎麼辦？
上面這套自己跑大概 30-60 分鐘（不含 IG Business Account 切換 + 4 頁版型設計）。如果符合下面任一條，可能不適合自己跑：
- IG 還是個人帳號，不想切 Business Account（影響粉絲體驗）
- 不會用 Photoshop / Figma 設計版型
- 想要更複雜的 bot 例如多帳號管理、自動回應留言、跨平台同步
可以找 不想自己研究我教你（規劃中）。1-on-1 帶你從 IG API 申請、4 頁版型設計、bot 開發、定時排程整套跑完，順便調 voice profile 跟視覺風格。Pro：不用自己摸索 Meta API 介面、有人幫設計版型、卡關 5 分鐘解決。Con：要付費。適合：想加速 IG 經營、不想自己 debug 的人。
### Summary
IG 自動發文 bot 完整 step-by-step：1) IG 是「滑」不是「讀」，不能 copy Threads bot；2) 4 頁設計法（封面 / 重點 / 解析 / 警語）；3) 多模型分工降成本 10 倍（過濾員用 Haiku / 寫稿人用 4.5+）；4) bot 開發 5 步（需求 → IG API → 4 頁版型 → 解中文字型雷 → 排程）；5) Pillow 5 行核心 code 自動生 PNG；6) 為什麼一定要加 AI 警語（負責 ≠ 免責，平台 2025 開始查 AI 內容）。月成本 NT$200。30-60 分鐘可全跑完。沒時間 setup → 看上面 不想自己研究我教你。
### 名詞解釋
- **機器人（bot）**：自動執行特定任務的程式，例如 LINE bot 自動回訊息、發文 bot 每天定時發貼文。
- **API（應用程式介面）**：程式跟程式之間溝通的窗口。例如你的程式透過 LINE 的 API 自動發訊息、透過 Google 的 API 讀試算表。
- **排程（cron）**：讓程式「每天 8 點」「每小時」自動執行的定時器。自動發文、定期抓資料都靠它。
- **Python**：入門門檻最低的主流程式語言之一，資料處理、自動化、AI 領域的首選。
- **AI 代理（AI agent）**：會「動手做事」的 AI：自己讀檔案、寫程式、跑指令、修錯誤，你只負責描述需求跟監督方向。跟只會「回答問題」的聊天機器人是兩種東西。
- **API 金鑰（API key）**：服務發給你的一串密碼，程式用它證明「我有權限使用這個服務」。絕對不能公開、不能寫死在程式碼裡。
- **自動化（automation）**：把重複性工作交給程式定時自動執行，例如每天早上自動抓新聞、整理成貼文、發到社群。
- **Threads**：Meta 旗下的文字社群平台。本站的社群引流主戰場之一，相關自動發文流程有整篇教學。
### FAQ
**Q: IG 自動發文 bot 怎麼做？**
5 步驟：1) 把 IG 帳號切成 Business Account；2) 去 developers.facebook.com 申請 IG Graph API access token；3) 設計 4 頁固定版型（封面/重點/解析/警語）；4) 用 Python + Pillow 自動把 AI 寫的內容塞進版型生 PNG；5) 用 cron-job.org + Vercel 設定每半小時自動跑。30-60 分鐘可全跑完，月成本約 NT$200（OpenAI/Anthropic API 費）。完整 step-by-step 看本文第 4 節。
**Q: IG bot 一個月 API 成本多少？**
用「多模型分工」每月約 NT$200。技巧：把 bot 內部任務拆成「過濾員」（Claude 3.5 Haiku 這種便宜小模型，每天讀 30 則新聞挑哪則值得發）跟「寫稿人」（Claude 4.5 這種貴模型，只寫選中那一則的封面 + 解析）。比全用大模型省 10 倍。每天發 4-6 篇大概 NT$6-10/天。詳細看本文第 3 節。
**Q: Pillow 畫中文字找不到字型怎麼辦？**
Windows / Mac Pillow 預設字型不含中文字型，要手動指定。解法：下載思源黑體或 Google Noto Sans TC（免費商用），放在專案 fonts 資料夾，code 裡寫 ImageFont.truetype('./fonts/NotoSansTC.ttf', 48)。然後 draw.text((x, y), '中文字', font=font, fill='white') 就會正常顯示中文。Mac 系統字型路徑也有中文字型可用，但跨平台建議專案內帶字型檔案。
**Q: IG 自動發文需要切 Business Account 嗎？**
需要。IG Graph API 只支援 Business Account 跟 Creator Account，個人帳號（Personal）不能用 API 自動發文。切換步驟：IG App → Settings → Account → Switch to Professional Account → 選 Business 或 Creator。免費、隨時可切回個人。切之後可以看數據分析、可以放聯絡按鈕，缺點是不能設定 Story 給好友的限制功能。
**Q: AI 自動發文一定要加警語嗎？**
強烈建議加。3 個原因：1) 讀者期待降低不會挑剔細節；2) AI 寫錯時警語保護你不會被 cancel；3) IG / Meta 2025 開始查 AI 未揭露內容，自己誠實標能避開平台懲罰。財經 / 投資 / 醫療類 bot 警語要更明確，加「不構成投資建議」「不構成醫療建議」。我自己 IG bot 每篇都加，沒有降低觸及，反而更安全。詳細看本文第 6 節。
**Q: IG bot 跟 Threads bot 可以共用 code 嗎？**
可以共用「素材選題 + AI 寫稿」這層，不能共用「輸出格式 + 平台發送」這層。我自己的架構：core 模組負責讀 RSS + 過濾 + 寫稿（Threads / IG 共用）；platform 模組分 Threads（純文字 500 字版）跟 IG（4 頁版型 + Pillow 生圖）。共用 core 可以省 70% 開發時間。第三個平台例如 LinkedIn 也只要加一個 platform/linkedin.py 接 API 就好。
---
## 我用 AI 做了一個有 14 頁的產品網站：分階段比一次做完更重要
> Source: https://www.coolkidlab.com/newbie-pitfalls/ai-built-a-real-product-website.html
> 用 Claude Code 做多頁產品網站完整 step-by-step：先 mock 全貌再分階段填內容、給 AI「世界觀」比給指令有效、4 階段上線法。一個非工程師做出 14 頁付費產品的方法論，2-3 週可全跑完。
前面做的工具都是「給自己用」的——交易日誌、自動發文 bot、簡單個人網站。「給自己用」跟「給別人用」是兩個完全不同的層級。當我想做一個會有付費方案、會員區、研究文章的真正產品時，14 頁要設計、認證系統要做、還要長得像專業品牌，複雜度跳好幾級。
後來用 Claude Code 做了一個 14 頁的產品網站，4 個付費方案、會員儀表板、文章系統、完整視覺風格，2-3 週分階段上線完。重點不是技術，是「分階段方法論」——產品不是一次做完的，是慢慢長出來的。
這篇是 step-by-step 教學，讀完你會做出：1) 一份 14+ 頁的網站全貌 mock；2) 一個「世界觀導向」的設計系統；3) 4 階段分批上線計畫，每階段都能跑。範例是教育平台，但 SaaS / 課程平台 / 媒體網站 / 投資組合都套得上。2-3 週可全跑完。
### 「給自己用」vs「給別人用」差在哪？（複雜度跳級的原因）
給自己用的工具只要「我會用」就好；給別人用的產品要「讓陌生人從不認識到願意付費」。中間這條路長很多，每一頁都有自己的責任。下面是 14 頁的角色分工：
1. 說服層（3 頁）：首頁 / 產品介紹 / 方案比較。負責讓陌生人想了解 → 想付費。
2. 信任層（3 頁）：關於 / 客戶見證 / 研究文章。負責建立 credibility。
3. 轉換層（2 頁）：申請入會 / 結帳。負責把「想付費」變成「付了費」。
4. 服務層（4 頁）：會員儀表板 / 課程 / 直播 / 作業。負責付費後的體驗。
5. 支援層（2 頁）：商品 / 消費紀錄 / 個人設定。負責長期黏著。
每層的功能完全不同，設計的目標也不同。新手最容易犯的錯：14 頁全部當「同等重要」來做，結果每頁都做不深。下一節教怎麼快速生出全貌再分階段做深。
### 為什麼要先做「mock 全貌」再回頭填內容？（先動再對）
本能是「一頁一頁做到完美」，但 14 頁產品這樣做會卡住。原因：首頁要連到課程頁但課程頁還沒做；方案頁要寫「會員可以看的研究」但研究頁還沒做；會員儀表板要顯示「你正在上的課程」但什麼都還沒接起來。每一頁都依賴別的頁，沒有一頁是真的能跑的。
正解：先把 14 頁全部用「mock 版」生出來——所有頁面都有但內容是 placeholder、圖也是預設、會員系統用最簡單的本地端模擬。這樣可以看到整個網站全貌、導覽連得起來、頁面切換很順、每一頁都「在那邊」。內容假但結構真。
mock 階段指令範本：「請用 Claude Code 建一個 14 頁的網站架構，所有頁面都用 placeholder 內容（範例文字 或範例文字），所有圖用灰色方塊代替，會員系統用 LocalStorage 模擬。重點是頁面切換要順、導覽要對、結構要完整。不要花時間在內容跟設計細節，先讓全部會動。」
mock 完成的好處：1) 突然看到全貌，會發現哪些頁其實不重要；2) 利害關係人（合夥人 / 客戶 / 老婆）可以實際點點看給回饋，而不是看你描述；3) 後面填內容的時候有目標，不會迷路。
### 怎麼給 AI「世界觀」讓設計自動對齊？（設計系統 step-by-step）
設計不是「做漂亮」，是「定一個明確的世界觀，然後讓所有東西都長成同一個樣子」。AI 在這件事上比想像中強，但你要給它「世界觀」不是「需求」。世界觀 4 步驟：
1. Step 1 — 用一句話定義產品的「視覺隱喻」。例如「建築師工作室的藍圖」「日本傳統茶室」「Y2K 賽博龐克」「Apple Newton 復古科技」。越具體越好，越抽象 AI 越亂猜。
2. Step 2 — 翻譯成 5 個視覺要素。把隱喻翻成可執行的設定:配色（3-4 色）、字體（中文 + 英文各 1 套）、形狀語言（圓角 / 直角 / 手繪）、留白密度（緊密 / 寬鬆）、特殊紋理（網格 / 噪點 / 漸層）。寫成一份 design_system.md。
3. Step 3 — 跟 AI 講世界觀不講需求。指令範本：「這個專案的世界觀是 [一句話隱喻]，視覺要素看 design_system.md。請用這個世界觀重做 [頁面名]，所有元件要符合世界觀。」AI 會自動把線條粗細、留白比例、字級對比、配色節奏對齊。
4. Step 4 — 第一頁做完之後 lock 住，後面所有頁都拿這頁當「視覺基準」。指令範本：「請參考 [基準頁].html 的視覺風格做下一頁，所有元件用同一套設計系統。」
我自己的「方舟藍圖」用「建築師工作室藍圖」當世界觀，深宇宙紫 + 米色紙張 + 螢光青點綴 + 工程粗體英文 + 藍圖網格紋理。14 頁設計風格高度一致，新加任何元件都不用再想風格，速度快 3 倍。
### 怎麼把 14 頁產品分 4 階段上線？（每階段都能跑）
mock 全貌完成之後是「分階段把假的換成真的」。我自己的拆法 4 階段，每階段做完都能上線都能跑，只是功能逐步打開：
1. 階段 0（第 1 週）— 純前端 + LocalStorage 假會員系統。14 頁全部 mock + 設計風格 lock。網站上線到 Vercel，會員系統假的但能登入登出。利害關係人可以點點看給意見。
2. 階段 1（第 2 週）— 接真的會員系統。把 LocalStorage 換成 Supabase Auth，可以真的註冊、登入、忘記密碼。會員資料存在雲端。階段 0 的 mock 內容大部分還在但已經有真會員。
3. 階段 2（第 3 週）— 把會員資料跟付費系統對接。Stripe / TapPay 接金流，付完款之後會員等級自動升級。會員儀表板顯示真的訂閱狀態。
4. 階段 3（第 4 週起）— 上真的內容。把 mock 文字逐步換成真的研究文章、課程影片、教材。後台編輯系統做完。網站正式對外開放。
分階段 3 個好處：1) 隨時能看到產品的當前樣子，不會做到一半看不到希望；2) 每階段都有里程碑，士氣維持得住；3) 中途決定砍某個功能，前面做的不會白費（mock 都先做了）。
新手最容易犯的錯：想一次做到階段 3 才上線。結果做 2 個月還沒上線、士氣崩盤、半途而廢。正解：階段 0 第 1 週就上線，哪怕內容全是假的。「能看到的東西」比「完美的計畫」重要 10 倍。
### 14 頁產品網站怎麼從 0 做到 100？（5 步 step-by-step）
把上面方法論濃縮成可執行的 5 步驟：
1. Step 1 — 列 14 頁清單 + 角色分工。用第 1 節 5 層分類法（說服 / 信任 / 轉換 / 服務 / 支援），把所有頁分類，確認哪些頁是核心哪些是支援。
2. Step 2 — 寫 design_system.md（用第 3 節 4 步驟）。一句話世界觀 + 5 個視覺要素 + 範例引用。這份文件之後每次叫 AI 寫頁面都會用到。
3. Step 3 — Claude Code 一次性 mock 14 頁。指令：「請建一個 14 頁的網站架構，頁面清單：[列出 14 頁]。所有頁用 placeholder 內容，視覺風格參考 design_system.md。技術選 Next.js + Tailwind 或純 HTML+CSS+JS。會員系統用 LocalStorage 模擬。導覽連起來、可以點點看。不要規劃，直接建檔。」
4. Step 4 — push 到 GitHub + Vercel 部署。階段 0 上線，分享給合夥人 / 老婆 / 早期客戶點點看給回饋。這時候你會發現「啊原來這頁不需要」「啊那邊應該加個 X 功能」。
5. Step 5 — 按第 4 節 4 階段時間表逐步上線。每階段做完都 push + 通知利害關係人。2-3 週後階段 3 完成，產品正式對外。
跑完 5 步你有一個 14 頁的真實產品網站。2-3 週可全跑完（每天 2-3 小時）。重點不是寫得多快，是節奏正確 — 先看到再做深、先全貌再細節、先上線再完美。
### 不想自己 setup 怎麼辦？
上面這套自己跑大概 2-3 週（每天 2-3 小時）。如果符合下面任一條，可能不適合自己跑：
- 想做的是真正的 SaaS（要接金流 + 會員 + 後台），複雜度不只 14 頁
- 沒有設計背景，寫 design_system.md 不知道怎麼下手
- 想要全套品牌設計（logo / 配色 / VI），不只是網站
可以找 不想自己研究我教你（規劃中）。1-on-1 帶你從產品 wireframe、design system、14 頁 mock、4 階段上線整套跑完。Pro：有人幫你做設計選擇、卡關 5 分鐘解決、2-3 週一次到位。Con：要付費。適合：想做真正產品但沒設計背景、想加速產品上市的人。
### Summary
用 AI 做多頁產品網站完整 step-by-step：1) 14 頁角色分工（說服 / 信任 / 轉換 / 服務 / 支援 5 層）；2) 先 mock 全貌再回頭填內容（先動再對）；3) 給 AI「世界觀」不是給「需求」（一句話隱喻 + 5 視覺要素 + design_system.md）；4) 4 階段分批上線（純前端 → 真會員 → 接金流 → 上真內容），每階段都能跑；5) 5 步驟 step-by-step（列頁面 → 寫 design system → mock 14 頁 → 部署 → 分階段上線）。2-3 週可全跑完。範例教育平台，SaaS / 課程平台 / 媒體網站 / 投資組合都套得上。沒設計背景 → 看上面 不想自己研究我教你。
### 名詞解釋
- **Claude Code**：Anthropic 推出的 AI 寫程式工具，裝在自己電腦的終端機裡，能直接讀寫你的檔案、跑指令，把你用中文描述的需求做成真的網站或工具。
- **Supabase**：免費起步的雲端資料庫服務，提供資料庫＋登入驗證＋API，個人專案很夠用。
- **SaaS（軟體即服務）**：訂閱制的雲端軟體服務。新手第一個專案不建議直接挑戰這個，範圍太大。
- **部署（deploy）**：把做好的網站或程式「推上線」讓所有人用得到的動作。
- **Vercel**：把網站免費發佈到網路上的服務：接上 GitHub 後，每次推程式碼就自動更新網站，個人專案免費方案就夠用。
- **HTML**：網頁的骨架語言，定義「這是標題、這是段落、這是圖片」。
- **CSS**：網頁的造型語言，管顏色、字體、排版跟動畫。
### FAQ
**Q: 用 AI 做多頁產品網站要從哪裡開始？**
從「列 14 頁清單 + 角色分工」開始，不是從「做第一頁」開始。用 5 層分類法把頁面分類：說服層（首頁/產品介紹/方案）、信任層（關於/見證/研究）、轉換層（申請/結帳）、服務層（會員/課程/直播/作業）、支援層（商品/紀錄/設定）。先看清楚 14 頁的角色再做 mock，避免做到一半發現結構錯。詳細看本文第 1 節。
**Q: 怎麼讓 AI 設計出來的網站不像 template？**
給 AI「世界觀」不是給「需求」。具體做法：1) 用一句話定義視覺隱喻（例如「建築師藍圖」「Y2K 賽博龐克」），越具體越好；2) 翻譯成 5 個視覺要素寫進 design_system.md（配色 / 字體 / 形狀 / 留白 / 紋理）；3) 跟 AI 講世界觀不講需求；4) 第一頁做完 lock 住當基準，後面所有頁參考它。詳細看本文第 3 節。
**Q: 14 頁產品網站要做多久？**
用「先 mock 全貌 + 4 階段上線」法，2-3 週可全跑完（每天 2-3 小時）。階段拆解：第 1 週純前端 + 假會員 mock 全部上線；第 2 週接 Supabase Auth；第 3 週接 Stripe 金流；第 4 週起逐步替換真內容。新手最容易犯的錯：想一次做到完美才上線，結果 2 個月還沒上線就放棄。正解：第 1 週就上線，哪怕內容全是 placeholder。詳細看本文第 4 節。
**Q: 為什麼一頁一頁做產品會卡住？**
因為 14 頁互相依賴。首頁要連課程頁但課程頁還沒做；方案頁要寫「會員可以看的研究」但研究頁還沒做；會員儀表板要顯示「你正在上的課程」但什麼都還沒接起來。每頁都依賴別的頁，沒有一頁是真的能跑的。正解：先 mock 全部讓結構先對，再回頭填內容。詳細看本文第 2 節。
**Q: Mock 階段該用什麼技術？**
新手建議純 HTML + CSS + JS + Tailwind 或 Next.js + Tailwind。會員系統用 LocalStorage 模擬就好（後面階段 1 才換 Supabase Auth）。圖片用灰色方塊或 placeholder.com 的服務生成。文字用 範例文字 或範例文字。重點是「結構真、內容假」。技術不要選太複雜的，避免 mock 階段就卡在框架學習。
**Q: 分階段上線跟一次做完有什麼差別？**
差很多。分階段：1) 隨時能看到產品當前樣子，不會做到一半看不到希望；2) 每階段都有里程碑，士氣維持得住；3) 利害關係人能早期給回饋，不用等 2 個月；4) 中途砍功能前面不會白做。一次做完：1) 做 2-3 個月看不到上線，士氣容易崩盤；2) 利害關係人只能看你描述；3) 中途砍功能前面工夫白費。新手 90% 死在「想一次做完美」這個陷阱。詳細看本文第 4 節。
---
## 我用 AI 從 0 開始學 SEO：把自己的網站當練習場，從上線開始的實測紀錄
> Source: https://www.coolkidlab.com/newbie-pitfalls/learning-seo-with-ai-as-a-trader.html
> 用 AI 從 0 學 SEO 完整 step-by-step：把 AI 當研究員（不是當老師）、4 個學 SEO 必做動作（sitemap / 速度 / 內鏈 / E-E-A-T）、邊學邊做的練習場架構、3 個數據驗證模型。一個全職交易者用自己的 Lab 當實測場，build-in-public 公開全過程。
我是一個全職交易者不是行銷人，更不是 SEO 出身。前陣子開始想：自己做的東西要被陌生人看到不能只靠社群擴散。SEO 是那個能長期帶人來的東西。問題是：我對 SEO 一無所知，完全是 0。
用 AI 邊上線邊學、到現在大約一個月，這個 Lab 從 0 文章長到 30+ 篇、Google 開始有真實點擊、PageSpeed 從 67 衝到 93、GEO 章節跑完前兩動。重點不是學速很快，是用對方法 — 把 AI 當研究員不是當老師、找個練習場邊學邊做、用數據驗證每個動作有沒有效。
這篇是 step-by-step 教學，讀完你會做出：1) 一份「具體問題清單」當 AI 提問模板；2) 一個 SEO 自學的 4 個必做動作（sitemap / 速度 / 內鏈 / E-E-A-T）；3) 一份 6 個月的「數據驗證路線圖」。範例是 SEO，但任何「你完全沒底的新技能」都套得上。
### 為什麼直接問 AI「SEO 怎麼做」沒用？（AI 當老師 vs 當研究員）
把 AI 當「老師」會給你「平均答案」，對任何人都通用對你都不夠具體。我問過 AI「SEO 怎麼做」，得到一份完整看起來很專業的答案，讀完還是不知道要從哪裡開始。
把 AI 當「研究員」會給你「對你的具體答案」。差別在問的方式。下面是同一個問題的 2 種問法：
1. 錯的問法（當老師）：「SEO 怎麼做？」 / 「網站怎麼優化？」 / 「我該寫什麼文章？」 — AI 會給通用 checklist，沒辦法用。
2. 對的問法（當研究員）：「我這個 Lab 網站全站只有 30 篇文章，我有交易背景沒行銷背景，目標讀者是想用 AI 做網站的非工程師，應該先做哪 3 件事？」 — AI 會給對你具體的優先順序。
問得越具體，回答越有用。具體 = 包含「網站現況 + 你的背景 + 目標讀者 + 你想知道什麼決策」這 4 個元素。把這 4 個元素塞進每次問題，AI 從產通用答案的工具變成幫你思考的研究員。
### SEO 自學要先做哪 4 件事？（必做動作清單）
新手 SEO 不要先研究關鍵字、不要先寫一堆內容。先把下面 4 個結構性動作做掉，後面寫的內容才有 leverage。每個動作我都用本 Lab 當練習場驗證過：
1. 動作 1 — sitemap.xml 提交給 Google。在網站根目錄建 sitemap.xml 列出所有頁面 → 去 Google Search Console（GSC）提交 → 等 2-3 天看「已索引」數字會不會增加。我自己 30 篇 mockup 階段就提交，3 天後 27 篇被索引。
2. 動作 2 — PageSpeed 跑到 90+。去 pagespeed.web.dev 跑網址，看 Performance / Accessibility / Best Practices / SEO 4 個分數。低於 80 的優先修。我自己 PageSpeed 從 67 修到 93，主要是壓圖 + 拆 CSS + lazy load 圖片。
3. 動作 3 — 內鏈把所有文章互相連起來。每篇文章寫到相關概念時，加上連到其他文章的連結。這個叫 internal linking，是 Google 判斷文章重要性的關鍵訊號。我自己 30 篇文章互相連 100+ 條內鏈，曝光 +30%。
4. 動作 4 — E-E-A-T（Experience / Expertise / Authoritativeness / Trustworthiness）。每篇文章加上「我是誰、為什麼可以寫這個、有什麼經驗」。對 Google 來說這是「真人寫的」訊號。我自己每篇加 author bio + 真實截圖（GA4 數字、PowerShell 錯誤），AI 內容檢測通過率 99%。
4 個動作做完才開始寫內容，效率 5 倍。我自己一開始順序錯，先寫內容沒做結構，曝光跑不起來。後來把 4 個動作做完，曝光 + 點擊才起來。新手不要重複這個錯。
### 怎麼把自己的網站當「練習場」邊學邊做？
看書、看影片學 SEO 學不下去，因為沒下單。交易教我一件事:沒下單前學的東西都是假的，下單後才是真的學習。SEO 也一樣 — 沒在自己網站上跑過的觀念，都只是知識不是體感。
練習場 4 個原則：
1. 原則 1 — 練習場要是真的網站，不是測試站。用真的網域（哪怕是 .vercel.app 也行）、真的提交給 Google、真的在乎數據。沒有 stake 的練習不會用力。
2. 原則 2 — 學一個觀念立刻在練習場套用，不超過 24 小時。「sitemap 要提交」→ 24 小時內提交。「內鏈很重要」→ 24 小時內加 10 條內鏈。延後就會忘記就會放棄。
3. 原則 3 — 每次套用之後寫一篇文章記錄結果。把「我學到 X、我做了 Y、結果發生 Z」寫成 build-in-public 文章。這些文章本身又會幫你帶來新流量，等於 SEO 練習場兼內容工廠。
4. 原則 4 — 數據是唯一的成績單。GSC 的曝光 + 點擊 + GA4 的活躍用戶這 3 個數字每週看一次，知道哪個動作真的有效哪個只是做爽的。我自己每週看一次，累積下來就能講出哪些觀念真的影響我數據。
邊學邊做最大的好處：你不只記得這個觀念是什麼，你還記得「在我自己的網站上做這件事是什麼感覺」。這個體感比任何教科書都實在。別人問你的時候你能講具體經驗 + 數據，不是理論。Lab 本身就是你的成績單。
### 怎麼用數據驗證每個 SEO 動作有沒有效？（實測 vs 假學的差別）
學了一陣子之後最大的陷阱：看似都懂、實際做不到。SEO 知識在 ChatGPT 一秒就查得到，但「在自己網站上做出效果」是另一個世界。差別在數據。
3 個數據驗證模型，看哪個動作對你網站真的有效：
1. GSC 印象數驗證 — sitemap / 內鏈 / E-E-A-T 改完，看一週後印象數有沒有起來。我自己 sitemap 提交 3 天後從 0 印象變 200+ 印象。動作對應數據變化越快，代表這個動作對你網站越有效。
2. PageSpeed 分數驗證 — 速度 / 圖片 / CSS / 字體 改完跑 PageSpeed 看分數差。我自己改了 3 輪從 67 衝到 93，每一刀都看得到分數變化（壓圖 +8 / 拆 CSS +6 / lazy load +12）。
3. 對照組驗證 — 同類型文章一篇做 SEO 一篇不做，看 4 週後曝光差距。這是最硬的測法但需要 2 篇以上的對照組才有意義。新手前期可以跳過，等網站有 20+ 篇再做。
我自己用前兩種驗證模型，邊上線邊學這一個月跑了 8 篇 SEO Journey 連載，每一篇都有具體數據：「改了 X 之後 Y 數字變 Z」。這些數據累積下來就是你的學習軌跡 + 信任資產。沒做數據驗證的話 學了等於沒學 — 看起來懂但下次遇到一樣的問題還是答不出具體該怎麼做。
### 從 0 學 SEO 到網站有真實流量的 6 個月路線圖（5 步驟）
把上面方法論濃縮成 5 步驟，6 個月可看到第一波真實流量：
1. Step 1（第 1 個月）— 建練習場。用 Vercel + Next.js 或純 HTML 蓋一個自己的 Lab 網站，主題可以是「我用 AI 學 X 的紀錄」（X 是你想精通的東西）。10-15 篇 mock 文章 + 提交 sitemap。看 GSC 第一筆曝光。
2. Step 2（第 2-3 個月）— 把 4 個 SEO 必做動作做完（sitemap / PageSpeed 90+ / 內鏈 / E-E-A-T）。每做完一個寫一篇 build-in-public 文章記錄結果。這時候你已經有 20+ 篇文章 + 真實數據可講。
3. Step 3（第 4 個月）— 開始用 AI 當研究員（不當老師）寫內容。每篇文章用「具體問題模板」問 AI，產出 3-5 篇/月有 SEO 結構的內容。Threads / X 同步發 build-in-public，吸引同需求的人。
4. Step 4（第 5 個月）— 寫一篇「我用 AI 學 X 的整合文章」。把學的方法 + 經驗 + 數據全寫進去，讓陌生人能順著走一遍。Threads / IG / X 同步發 build-in-public 引第一波站外流量。
5. Step 5（第 6 個月）— 看數據成績單。GSC 印象數 + 點擊數 + GA4 活躍用戶 應該都有實際數字可看。回頭看哪些動作真的有效、哪些只是做爽的。整合成下一輪迭代計畫。
跑完 5 步你從 SEO 0 基礎變成有 30+ 篇實作記錄 + 真實數據 + 一份可驗證的學習方法論。學費是時間付的、知識是 build-in-public 累積的、品牌是過程長出來的。
### 為什麼 build-in-public 是非工程師最強的學法？（公開過程的複利效應）
聽起來反直覺：學一半就公開不是更丟臉嗎？但實務上 build-in-public 有 4 個悶頭學沒有的優勢：
1. 公開過程逼自己想清楚 — 要把學到的東西寫成文章給陌生人看，會逼你把每個觀念想透。比悶頭學快 5 倍。我自己每篇 SEO Journey 都是學完當天寫，寫的過程才發現自己很多細節沒搞懂。
2. 踩坑紀錄變內容資產 — 你卡住的地方 99% 都是別人也會卡的地方。把過程寫下來別人就會搜到你。我自己 PageSpeed / GSC 文章帶來最多曝光的就是踩坑類。
3. AI 讓 build-in-public 變可能 — 以前要花一週才能整理出一篇，現在 AI 幫你查資料 + 列大綱 + 校稿，2-3 小時就能產出。學速跟得上才能 build-in-public。
4. 文章是最好的學習載體 — 每學一個觀念寫一篇，學習過程公開化，這些文章會幫你帶來新讀者、新機會。複利效應。
如果你也想學一個完全沒底的新技能，現在是用 AI 學的最好時機。把 AI 當研究員不當老師、找一個練習場邊學邊做、build-in-public 公開過程。三件事一起做，學習速度會超出想像。
想跟著我的 SEO 學習軌跡看怎麼一步一步把網站做給 Google 看懂，可以從 SEO 歷程 開始。從 #0 到最新 #9 連載，全公開可被驗證的真實數據。
### Summary
用 AI 從 0 學 SEO 完整 step-by-step：1) 把 AI 當研究員不當老師（具體問題模板：網站現況 + 背景 + 目標讀者 + 想決策什麼）；2) 4 個必做動作（sitemap 提交 / PageSpeed 90+ / 內鏈 / E-E-A-T）；3) 練習場 4 原則（真網站 / 24 小時內套用 / 寫文章記錄 / 數據看週報）；4) 3 個數據驗證模型（GSC 印象數 / PageSpeed 分數 / 對照組）；5) 6 個月 5 步驟（建練習場 → 做 4 動作 → AI 寫內容 → 整合文章 → 看數據成績單）。範例 SEO，任何「你完全沒底的新技能」都套得上。想跟學習軌跡 → /seo-journey/。
### 名詞解釋
- **SEO（搜尋引擎優化）**：讓網站在 Google 搜尋結果排得更前面的一整套方法，涵蓋技術體質、內容品質、連結結構三層。
- **GSC（Google Search Console）**：Google 給網站主的免費後台：看自己網站在搜尋的曝光、點擊、排名跟索引狀態。做 SEO 的人天天開的儀表板。
- **網站地圖（sitemap）**：列出網站所有頁面跟最後更新日的清單檔（sitemap.xml），交給搜尋引擎加速發現與重抓你的頁面。
- **PageSpeed Insights**：Google 提供的免費網站速度體檢工具，輸入網址就給 0-100 分跟逐項改善建議。
- **內部連結（internal link）**：站內文章互相連的連結，幫讀者跟搜尋引擎理解「哪些內容相關、哪一頁重要」，是成本最低的 SEO 訊號。
- **曝光（impression）**：你的頁面出現在搜尋結果裡被看到的次數，不管有沒有被點擊。
- **E-E-A-T**：Google 評估內容可信度的四個面向：經驗（Experience）、專業（Expertise）、權威（Authoritativeness）、可信（Trustworthiness）。
- **GA4（Google Analytics 4）**：Google 的流量分析工具：訪客從哪來、看了什麼、停多久。GSC 管「搜尋結果上的表現」，GA4 管「進站後的行為」。
- **GEO（生成式引擎優化）**：讓 ChatGPT、Perplexity 這類 AI 在回答問題時引用你網站內容的優化方法，是 SEO 在 AI 時代的延伸戰場。
- **索引（index）**：搜尋引擎把你的頁面收進資料庫、開始能被搜到的狀態。「先被索引」是「有排名」的前提。
### FAQ
**Q: 非工程師可以用 AI 學會 SEO 嗎？**
可以。SEO 不是程式技術，是內容 + 結構的方法論，非工程師完全做得到。重點是用對方法：1) 把 AI 當研究員（問具體問題）不當老師（問通用問題）；2) 找一個自己的網站當練習場邊學邊做；3) 4 個必做動作先做完（sitemap / PageSpeed / 內鏈 / E-E-A-T）。我自己是全職交易者完全沒行銷背景，邊上線邊學大約一個月，Lab 就從 0 文章到 30+ 篇 + 真實點擊 + PageSpeed 67→93。詳細路線看本文第 5 節。
**Q: 學 SEO 要從哪裡開始？**
從「建一個自己的網站當練習場」開始，不是從讀 SEO 教學書開始。沒練習場學的觀念都是假的。建議：用 Vercel + 純 HTML 或 Next.js 蓋一個自己的 Lab 網站，主題可以是「我用 AI 學 X 的紀錄」。10-15 篇 mock 文章上線提交 sitemap，看 GSC 第一筆曝光。然後再開始學 SEO 觀念，每個觀念立刻套用到練習場。詳細看本文第 3 節。
**Q: AI 寫的 SEO 內容會被 Google 懲罰嗎？**
不會 — 重點不是「誰寫的」而是「夠不夠有用」。Google 的說法是：不論內容怎麼產製，要的是 original、高品質、以人為本（people-first）、能展現 E-E-A-T 的內容。但有條紅線：用 AI 大量生成、目的是操弄排名（scaled content abuse）會違反 spam policy。所以真正會出事的是：純 AI 量產的廢文（每天 50 篇沒人看的）、塞滿關鍵字的 SEO 文、沒有真實經驗的內容。我這個 Lab 全部用 AI 協助寫，但每篇都加真實截圖 + 個人經驗 + 數據驗證。
**Q: 為什麼直接問 ChatGPT「SEO 怎麼做」沒用？**
因為 AI 給的是「平均答案」，對任何人都通用對你都不夠具體。問 ChatGPT「SEO 怎麼做」會得到一份完整 checklist，但你不知道哪一條對你最重要。正解是把 AI 當「研究員」問具體問題：「我的網站全站 30 篇文章 / 我有 X 背景沒 Y 背景 / 目標讀者是 Z / 我應該先做哪 3 件事？」具體問題會得到具體答案。詳細看本文第 1 節。
**Q: 學 SEO 多久看得到效果？**
結構性動作（sitemap 提交 / PageSpeed / 內鏈）做完 1-2 週可看到 GSC 曝光增加。內容效果（流量 / 真實點擊）通常要 2-3 個月後才會穩定。我自己邊上線邊學大約一個月，Lab 累積 30+ 篇、開始有真實點擊進來。如果寫的文章是「長尾關鍵字 + AI 友善的問答結構」（GEO 優化），效果會更快出現因為 ChatGPT / Perplexity 會引用。
**Q: 怎麼知道學的 SEO 動作真的有效？**
用數據驗證，不要用感覺。3 個驗證模型：1) GSC 印象數 — sitemap / 內鏈 / E-E-A-T 改完一週後看印象數差；2) PageSpeed 分數 — 速度 / 圖片 / CSS 改完跑分數看差；3) 對照組 — 同類型文章一篇做 SEO 一篇不做，4 週後看曝光差。我自己用前兩種跑了 8 篇 SEO Journey 連載，每篇都有「改了 X 之後 Y 數字變 Z」具體數據。沒做驗證的學等於沒學 — 看起來懂但下次還是答不出。詳細看本文第 4 節。
---
## 你正在看的這個 Lab：我把所有東西串起來的個人品牌宇宙
> Source: https://www.coolkidlab.com/newbie-pitfalls/building-this-lab-itself.html
> 建個人品牌 Lab 容器完整 step-by-step：為什麼模板不夠、視覺世界觀 4 步驟、前台直接編輯架構、SEO/視覺/內容三軸協同。一個非工程師把 8 個專案串成個人品牌宇宙的方法論，4-6 週可全跑完。
你正在看的這個網站就是我做的第 8 個專案。前面做了交易日誌、Threads bot、IG bot、產品網站、SEO 陪跑、LINE Bot 之後，最後做了一個容器把以上全部裝進來，這個容器就是這個 Lab。
做容器之前我做了一年散裝專案，每個都跑得不錯但沒有一個「家」。交易筆記在 Notion、貼文在 Threads、工具在 GitHub、Lab 文章想寫但不知道丟哪。每次有人問「你的東西都在哪？」我都答不出來。
這篇是 step-by-step 教學，讀完你會做出：1) 一份「個人品牌容器」需求清單；2) 一個跟你靈魂對上的視覺世界觀；3) 一個能在前台直接編輯的「活網站」架構；4) SEO/視覺/內容三軸協同的長期經營節奏。範例是 AI workflow + 交易，但任何「想把散裝作品串成個人品牌」的人都套得上。4-6 週可上線 v1。
### 為什麼需要個人品牌容器？（散裝專案的致命問題）
散裝專案最大的問題不是「不夠多」，是「找不到自己」。你做了 5 個專案散在 5 個平台，自己都很難跟別人講「想多認識我，去哪裡看？」。這個問題對個人品牌是致命的。如果連入口都給不出來，演算法給你的觸及就是消耗品，今天發明天就沒了。
個人品牌容器解決 4 個問題：
1. 問題 1（入口）：陌生人想了解你，有一個固定網址可以去，不用在 5 個平台找。
2. 問題 2（樞紐）：所有外部觸及（Threads / IG / GitHub / 講座）最後導到這裡，把流量留下來變 email / 訂閱 / 付費。
3. 問題 3（證明）：客戶問「你有什麼能證明會做」，給網址不用講半天，整個容器就是長期可驗證的證明。
4. 問題 4（下一階段）：要做電子報、課程、社群、付費內容，都有地方可以接。沒有容器這些都會變成散落碎片。
做容器之前你會覺得它沒必要（反正散裝也能用），做之後你會發現以前所有東西都是它的拼圖。容器本身比裡面的東西更能定義一個人。
### 為什麼模板和 Notion 公開頁不夠？（個人品牌的差異化）
想偷懶用模板的話通常會撞到 3 個牆。下面 3 個常見方案的問題：
1. 方案 1 — Wix / Squarespace 模板：模板長得像「設計師作品集」「軟體工程師履歷」「行銷顧問頁面」3 種類型，但你可能都不是。沒有對應你身份的模板。
2. 方案 2 — Notion 公開頁：乾淨好寫，但每個用 Notion 的網站都長得一樣。觀眾打開沒有「這個人不一樣」的感覺。長得跟別人一樣就等於不存在。
3. 方案 3 — Substack / Medium：寫作體驗好，但你只租了平台一個帳號，平台收掉或改演算法你就完了。沒有自己的網域跟資料控制權。
個人品牌容器的關鍵需求是「跟靈魂對上的視覺世界觀」+「自己網域 + 資料控制權」+「能持續長大不被框死」。3 個都要，模板做不到全部。
正解：用 Claude Code + Vercel + GitHub 自己蓋一個。技術門檻沒想像中高（前面文章都教過），自由度 100%，視覺風格跟你的審美對齊，下一階段要長什麼都加得上。
### 怎麼定義跟靈魂對上的視覺世界觀？（4 步驟）
視覺風格不是裝飾，是個人品牌的「過濾器」。對的觀眾看一眼就會留下，不對的觀眾看一眼就會走。比 SEO 標題還直接。下面是定義視覺世界觀的 4 步驟：
1. Step 1 — 列你長期被吸引的 3-5 樣東西。不是「我覺得好看」的，是「我會反覆看」的。例如我自己：8-bit 像素遊戲、復古 RPG、藍圖手稿、占卜牌組、深宇宙星圖。這些是你審美的 DNA。
2. Step 2 — 找出共同特徵。我的清單共同特徵：有時間感、深色為主、有神祕學符號、收藏感、不是流行的東西。寫成一句話：「深宇宙感 + 像素遊戲風 + 神祕學收藏感」。這就是世界觀。
3. Step 3 — 翻譯成 5 個視覺要素：配色（3-4 色）、字體（中英各 1 套）、形狀語言、留白密度、特殊紋理。我的 Lab：深紫 + 米色 + 螢光綠 / 像素字 + 工程體 / 銳利直角 / 寬鬆留白 / 8-bit 像素紋理。寫成 design_system.md。
4. Step 4 — 第一頁鎖定當基準頁，後面所有頁參考它。視覺風格 lock 之後每加新元件都不用再想（hover 怎麼動、按鈕怎麼長、卡片怎麼排都有預設答案）。網站像有 DNA 的東西在自己長。
視覺世界觀做對之後，這個 Lab 一打開就不像「另一個 portfolio」。對的觀眾（喜歡深宇宙 / 像素 / 神祕學的人）會留下，不對的會走。對個人品牌是好事不是壞事。
### 什麼是「活網站」？怎麼做前台直接編輯架構？
靜態網站的代價：每改一個字都要回去動原始檔案、重新發佈、等 1 分鐘才看得到。對寫文章常常邊寫邊改的人來說，這個流程慢到懶得改，最後變成「網站文案爛但懶得動」。
解法是把網站做成「活的」 = 前台直接編輯。登入之後網站上每段文字、按鈕、連結都會浮出一個編輯框，按下去就能改、存了就生效，不用回去動原始檔案。改網站速度從「每次 5 分鐘」變成「每次 5 秒」。
前台直接編輯架構 4 個元件：
1. 元件 1 — 預設內容寫在 build script 裡（hardcoded fallback），任何狀況下都有東西顯示。
2. 元件 2 — Supabase 存「override」表，admin 改的字存進這張表。每次 page render 時 merge defaults + overrides。
3. 元件 3 — 前端 edit overlay：admin 登入後每段文字旁邊出現一個鉛筆 icon，按下去打開 inline editor，存進 Supabase。
4. 元件 4 — Auth 保護：用 Supabase Auth 鎖 admin。一般訪客看不到 edit icon，只看到合併後的最終文字。
技術上有點複雜（要處理權限、儲存、安全性），但做完一勞永逸。網站從「蓋出來放著的作品」變成「每天還在裡面活著的地方」。可以一邊跟人聊天一邊調文案、看到不順眼的字當場改、寫文章直接在前台寫。詳細實作看 inline-edit-overlay 那篇 skill。
### 怎麼讓 SEO / 視覺 / 內容三條線不打架？（協同節奏）
做容器最麻煩的不是技術，是 SEO / 視覺 / 內容三條線同時要前進，每條都會撞到別條。下面是 3 條線常見的衝突：
1. SEO vs 視覺：SEO 想加結構化資料、想加更多文字密度。視覺想留白、想視覺優先。沒節制的話文字密度太高網頁變成 SEO 文工廠醜炸。
2. 視覺 vs 內容速度：複雜視覺效果（動畫 / 漸層 / 字型）會降 PageSpeed，影響使用者體驗、page experience 這塊也會扣分。沒節制的話 LCP 從 1.2 秒變 8 秒，體驗很差。
3. 內容 vs 品質：想衝量一週寫 5 篇，但寫太快品質掉，這些 thin content 通常排不上去、也幫不到整站，不如慢一點把每篇寫扎實。
解法不是追求三條同時最佳，是追求三條互相不打架。先把架構鎖好（design system / 內容範本 / SEO checklist），再每週各推進一點點。下面是我的協同節奏：
1. 週節奏：寫 2 篇文章 + 修 1 個視覺細節 + 改 1 個 SEO 設定。比一次想做完美健康很多。
2. 月節奏：每月底跑一次 audit（PageSpeed / GSC / GA4 / 視覺一致性），看哪條線拖後腿就那個月補。
3. 季節奏：每季重新看 design system 跟內容主題清單，需要的話 refactor。容器在長，方向也會調。
### 個人品牌 Lab 怎麼從 0 做到 100？（5 步 step-by-step）
把上面方法論濃縮成 5 步驟，4-6 週可上線 v1：
1. Step 1（第 1 週）— 寫需求 + 視覺世界觀。列容器的 4 個問題（入口 / 樞紐 / 證明 / 下一階段）需求，定義視覺世界觀（看本文第 3 節 4 步驟），產出 design_system.md 跟 14 頁清單。
2. Step 2（第 2 週）— Claude Code 一次性 mock 14 頁。指令範本：「請建一個個人品牌 Lab 網站，14 頁清單 [列出]，視覺風格參考 design_system.md，技術 Next.js + Tailwind 或純 HTML。所有頁面 mock 內容，導覽連起來，部署到 Vercel。」
3. Step 3（第 3 週）— 加前台直接編輯架構。看本文第 4 節 4 個元件，接 Supabase Auth + overrides 表 + 前端 edit overlay。這步技術門檻最高，但做完之後寫文章門檻趨近於 0。
4. Step 4（第 4 週）— 上 SEO 結構（看「我用 AI 從 0 開始學 SEO」那篇 4 個必做動作:sitemap / PageSpeed / 內鏈 / E-E-A-T）。完成 v1 上線。
5. Step 5（第 5-6 週起）— 開始長期經營（每週 2 篇文章 + 1 個視覺細節 + 1 個 SEO 設定）。3 個月後容器有 30+ 篇內容、100+ 內鏈、SEO 數據開始長。
跑完 5 步你的個人品牌容器 v1 上線。容器這東西沒有「完成」的一天，只有今天的它。下次你再回來看，它應該會不一樣 — 這就是個人品牌宇宙的好處。
### 不想自己 setup 怎麼辦？
上面這套自己跑大概 4-6 週（每天 2-3 小時）。如果符合下面任一條，可能不適合自己跑：
- 想要全套品牌設計（logo / 配色 / VI / 名片）不只是網站
- 前台直接編輯架構技術門檻太高（要處理 Auth + Supabase + edit overlay）
- 想 1-on-1 帶你定義視覺世界觀（這步驟需要對自己審美有意識）
可以找 不想自己研究我教你（規劃中）。1-on-1 帶你從需求釐清、視覺世界觀、14 頁 mock、前台編輯、SEO 上線整套跑完。Pro：有人幫設計世界觀、卡關 5 分鐘解決、4-6 週一次到位。Con：要付費。適合：想做真正個人品牌容器、不想自己 debug 的人。
### Summary
個人品牌容器完整 step-by-step：1) 散裝專案 4 個致命問題（入口 / 樞紐 / 證明 / 下一階段）；2) 為什麼模板 / Notion 不夠（差異化死亡）；3) 視覺世界觀 4 步驟（列被吸引的東西 → 找共同特徵 → 翻 5 視覺要素 → 第一頁 lock）；4) 活網站前台編輯架構 4 元件（hardcoded fallback / Supabase overrides / edit overlay / Auth）；5) SEO/視覺/內容三軸協同節奏（週/月/季）；6) 5 步驟 step-by-step 4-6 週上線 v1。容器本身比裡面的東西更能定義一個人。沒設計背景 → 看上面 不想自己研究我教你。
### 名詞解釋
- **SEO（搜尋引擎優化）**：讓網站在 Google 搜尋結果排得更前面的一整套方法，涵蓋技術體質、內容品質、連結結構三層。
- **Supabase**：免費起步的雲端資料庫服務，提供資料庫＋登入驗證＋API，個人專案很夠用。
- **Claude Code**：Anthropic 推出的 AI 寫程式工具，裝在自己電腦的終端機裡，能直接讀寫你的檔案、跑指令，把你用中文描述的需求做成真的網站或工具。
- **PageSpeed Insights**：Google 提供的免費網站速度體檢工具，輸入網址就給 0-100 分跟逐項改善建議。
- **Threads**：Meta 旗下的文字社群平台。本站的社群引流主戰場之一，相關自動發文流程有整篇教學。
- **電子報（newsletter）**：定期寄到訂閱者信箱的內容。社群觸及看演算法臉色，訂閱名單是自己帶得走的資產。
- **Substack**：電子報平台：免費起步，內建訂閱管理跟付費功能，寫了直接寄給訂閱者。
- **內部連結（internal link）**：站內文章互相連的連結，幫讀者跟搜尋引擎理解「哪些內容相關、哪一頁重要」，是成本最低的 SEO 訊號。
- **GitHub**：放 Git 程式碼的雲端平台，也是全世界開源專案的集散地。程式碼推上去之後可以接自動部署。
- **Vercel**：把網站免費發佈到網路上的服務：接上 GitHub 後，每次推程式碼就自動更新網站，個人專案免費方案就夠用。
### FAQ
**Q: 為什麼要做個人品牌容器？散裝在不同平台不行嗎？**
散裝有 4 個致命問題：1) 入口不存在（陌生人問你的東西在哪你答不出來）；2) 樞紐不存在（外部流量留不下來，演算法給的觸及是消耗品）；3) 證明不可信（客戶問你會做什麼你只能講不能給網址）；4) 下一階段沒地方接（電子報 / 課程 / 付費內容沒有歸屬）。容器解決這 4 個問題。詳細看本文第 1 節。
**Q: 個人網站用 Wordpress / Wix 模板就好為什麼要自己蓋？**
模板長得像「設計師作品集」「軟體工程師履歷」「行銷顧問頁面」3 種類型，但你可能都不是。Notion 公開頁每個都長得一樣，沒有差異化。Substack 你只租了帳號，沒有網域控制權。個人品牌容器的關鍵是「跟靈魂對上的視覺世界觀」+「自己網域」+「能持續長大」，模板做不到全部。詳細看本文第 2 節。
**Q: 怎麼定義「跟靈魂對上」的視覺世界觀？**
4 步驟：1) 列你長期被吸引的 3-5 樣東西（不是覺得好看的，是會反覆看的）；2) 找共同特徵寫成一句話世界觀；3) 翻譯成 5 個視覺要素（配色 / 字體 / 形狀 / 留白 / 紋理）寫成 design_system.md；4) 第一頁鎖定當基準頁，後面所有頁參考它。詳細看本文第 3 節。我自己的世界觀：「深宇宙感 + 像素遊戲風 + 神祕學收藏感」，所有視覺決策都從這句話衍生。
**Q: 什麼是「活網站」？跟一般靜態網站差在哪？**
活網站 = 前台直接編輯。Admin 登入後每段文字旁邊出現鉛筆 icon，按下去打開 inline editor 改字存進資料庫，不用回去動原始檔案。改網站速度從「每次 5 分鐘」變成「每次 5 秒」。架構 4 個元件：hardcoded fallback + Supabase overrides 表 + 前端 edit overlay + Auth 保護。對寫文章常常邊寫邊改的人是 game changer。詳細看本文第 4 節。
**Q: 做個人品牌 Lab 要多久？**
用本文 5 步驟 4-6 週可上線 v1（每天 2-3 小時）。第 1 週寫需求 + 視覺世界觀；第 2 週 Claude Code mock 14 頁；第 3 週加前台編輯架構；第 4 週上 SEO 結構正式上線；第 5 週起進入長期經營週節奏。3 個月後有 30+ 篇內容 / SEO 數據開始長 / 第一個陪跑案件可能成交。詳細看本文第 6 節。
**Q: SEO / 視覺 / 內容怎麼同時做不打架？**
不要追求三條同時最佳，要追求三條互相不打架。先把架構鎖好（design system / 內容範本 / SEO checklist），再用週/月/季節奏推進：週節奏 = 2 篇文章 + 1 個視覺細節 + 1 個 SEO 設定；月節奏 = audit 4 個指標看哪條線拖後腿；季節奏 = 重看 design system 跟內容主題需要時 refactor。詳細看本文第 5 節。
---
## AI Agent 實戰｜我用 Claude Code 做了 LINE Bot 幫全家管行程(自然語言記事 + 永久免費)
> Source: https://www.coolkidlab.com/newbie-pitfalls/ai-built-family-line-bot.html
> AI Agent 實戰紀錄 — 永久免費 LINE Bot step-by-step:FastAPI + Supabase + Render + cron-job.org 三件套、LINE Auto-reply 必關設定、Render 2025 砍 cron 替代、regex parser 省 API 費。一個非工程師用 Claude Code 做的家族行程管家 AI Agent。
家裡常常出狀況。長輩看醫生的日期忘了、繳費單過期才發現、接小孩時間沒對齊。我們家 LINE 群裡長期有人在喊「明天誰要去 X」，但訊息一直被洗下去，到當天就沒人記得。
我想做的東西很簡單：一個 LINE Bot，家人可以直接在私聊跟它說「明天下午3點 媽媽 醫院回診 提前1小時提醒」，它記下來，時間到自動 push 給對的人。
需求簡單，但實作照樣撞了三個雷。這篇把整個流程重整成 step-by-step：讀完你會做出一個永久免費的家族行事曆 LINE Bot（FastAPI + Supabase + Render + cron-job.org 三件套）。範例是家族行程，但任何「LINE 私聊指令型 bot」都套得上：個人提醒、健身打卡、讀書心得記錄、客戶 FAQ。4-6 小時可全跑完。
### LINE Bot 該用群組還是 1-on-1 私聊？（資料邊界決定）
直覺想法：我們家本來就有 LINE 群，bot 加進群就好。但寫了幾行 code 之後我發現群組有兩個問題。
一：群組訊息會被洗。每個家人都在傳貼圖、轉新聞、討論晚餐，行程指令很容易被埋掉，bot 也分不清誰要新增、誰只是聊天。
二：通知精準度差。如果 push 通知傳到群組，全家都會收到「媽媽明天看醫生」的提醒——不對的人會煩，對的人在訊息海裡也容易漏。
後來決定改 1-on-1 私聊 + 邀請碼綁定家族：每個家人各自跟 bot 對話，新增行程時指定通知對象，到時間 bot 私訊那個人。家人需要先用一組邀請碼把彼此綁進同一個家族，這樣 mom 新增的「醫院回診」才能找得到 dad 來通知。
做完之後回頭看，群組跟私聊的差別不是技術選型，是「資料邊界」。群組是公共空間，1-on-1 才有清楚的「誰要做什麼給誰」這層關係。
### LINE Bot 資料庫怎麼選？（Supabase 免費 vs Render PostgreSQL）
FastAPI 寫好之後要找地方存資料。Render 自己有 PostgreSQL，但不在 free tier；Supabase 給 500 MB 免費。家裡一年新增 3,650 筆行程也佔不到 1 MB，Supabase 綽綽有餘。
但 Supabase 給我的連線字串是 postgresql://...，貼進 .env 跑起來直接報錯。我以為是密碼錯，重設了一次還是不行。後來才發現是我用的 SQLAlchemy 異步驅動要 postgresql+asyncpg://... 開頭，差一個字母套件就找不到。
這種 driver 前綴的雷，AI 看 stack trace 一眼就知道，但你不知道要問的時候很卡。後來我習慣是先把錯誤訊息整段丟給 agent，請它先告訴我這是什麼層的問題（driver / 設定 / 帳密 / 防火牆），再決定要不要改 code。
### 為什麼 LINE Bot 收到「感謝您加為好友」？（Auto-reply 雷必關）
Render 部署完，webhook 設好，我傳第一句「你好」測試。結果 bot 回我：「感謝您加為好友！我們會盡快回覆您。」
我整個傻住。回去翻 Render log——我自己寫的 handler 完全沒被呼叫過。是我 code 寫壞了？webhook 沒接到？網路問題？翻了 30 分鐘 log 沒線索。
最後丟給 agent 看，AI 一句話點醒我：「你 LINE Developers Console 的 Auto-reply messages 有沒有關？」
完全沒關。LINE 預設會用一段制式訊息回新好友，這段訊息會「先」於 webhook 觸發，等於蓋掉我自己的 bot 邏輯。回 console 把 Auto-reply 跟 Greeting messages 都關掉，再傳一次「你好」，bot 正常回應了。
這個雷沒有任何錯誤訊息、沒有 log、沒有 stack trace。新手 100% 會撞到，因為這是 LINE 平台的「貼心預設」，不是 code bug。要寫 LINE bot 之前先把 Auto-reply 跟 Greeting 都關掉，省 30 分鐘。
### Render 2025 砍掉免費 cron 怎麼辦？（cron-job.org 免費替代）
Bot 跑起來之後要做「時間到自動推播」這件事。我以為 Render 會幫我跑 cron job——畢竟我在 render.yaml 裡寫了一個 cron service。
結果部署的時候 Render 跳訊息：「Cron Jobs are not available on the free tier.」2025 中改的規定，免費方案不能跑 cron 了。我那一刻心想完了，難道要付 $7/月。
後來 AI 就建議我用 cron-job.org——一個獨立的免費 cron 服務，每分鐘可以戳一個 URL。我在 Render 的 web service 裡寫一個 /api/cron/dispatch 端點，cron-job.org 每分鐘 GET 一次，端點檢查資料庫有沒有要發的通知、發完。
這個方案意外比 Render 內建 cron 還好：cron-job.org 每分鐘戳一次同時達成兩件事——派發到期通知 + 喚醒 Render 免費方案的 web service（避免閒置 15 分鐘 sleep）。一石二鳥。
教訓是：當平台砍免費功能，通常已經有獨立的免費替代品在外面。先不要急著付費。
### LINE Bot 自然語言 parser 要接 AI 嗎？（regex vs LLM 決策）
Bot 的招牌功能是讓家人能直接傳「明天下午3點 媽媽 醫院回診 提前1小時提醒」，bot 自動 parse 出時間 + 對象 + 事項 + 提醒前置時間。
我第一個想法是接 Claude API：丟整句訊息給 Claude，請它回傳結構化 JSON。準確度應該很高，畢竟 LLM 對自然語言這種東西超強。
但寫到一半我停下來算成本。如果每個家人每天傳 5 則訊息，每則都 call 一次 API——一個月幾百上千次 API call。我這個專案的核心是「永久免費」，每月固定花錢 call AI 不對。
改用 regex + 中文時間詞典：明天/後天/下下週這種詞 mapping 成日期偏移，「下午3點」這種用 regex 抓，「媽媽/爸爸」這種家人稱謂從家族成員清單去比對。寫起來笨笨的，但 0 元、0 延遲、0 API key。
AI 時代學到的反直覺事情：不是所有東西都要接 AI。能用 regex 解的不要花 API call。AI 是好工具，但不是萬能解，特別是當你的專案 constraint 是「永久免費」的時候。
### Bot 上線後家人 adoption 怎麼推？（最難的不是 build 是 adoption）
老實說，bot 已經上線了，但目前只有我一個人在用。家人還沒加。
我自己每天傳 2-3 則：「明天下午4點 接小孩」「後天早上 繳水費」「下週三 媽媽 健檢 提前1天提醒」。一週下來確實沒有忘記過。
但「我自己在用」跟「全家都在用」是兩個世界。家人不會主動加 bot——他們要看到實際好處才會。下一步是先在 LINE 群組轉發我自己被準時提醒的截圖，讓他們覺得「這個東西好像有用」，再請他們掃 QR code 加好友。
做工具最難的不是技術，是讓使用者真的開始用。這條 build-in-public 還沒走完，下一篇再回報家人 adoption 進度。
### 永久免費 LINE Bot 怎麼從 0 做到 100？（5 步 step-by-step）
把上面 5 個雷整合進實作流程，下面 5 步可以做出一個能跑的 LINE Bot：
1. Step 1 — 申請 LINE 帳號 + 關 Auto-reply。去 developers.line.biz/console 建 Provider → 建 Messaging API channel → 拿 Channel secret 跟 Channel access token。Messaging API 分頁裡 Auto-reply messages 跟 Greeting messages 一定先關（看第 3 節）。
2. Step 2 — Supabase 建資料庫。supabase.com 註冊 → New project → 拿連線字串。注意 SQLAlchemy async driver 要把 postgresql:// 改成 postgresql+asyncpg://（看第 2 節）。
3. Step 3 — Claude Code 寫 FastAPI bot。指令範本：「請建一個 FastAPI 專案，功能：1) /api/line/webhook 接 LINE 訊息；2) 用 regex parser 解析中文時間（明天下午3點/後天/下週三）+ 對象（家人姓名）+ 事項；3) 存到 Supabase；4) /api/cron/dispatch 端點檢查到期通知 push 出去。資料庫 schema 自己設計。requirements.txt 寫清楚。」
4. Step 4 — 部署到 Render。push GitHub → render.com 連 repo → 設環境變數（LINE_CHANNEL_SECRET / LINE_CHANNEL_ACCESS_TOKEN / DATABASE_URL）→ Deploy。拿到 .onrender.com 網址，貼回 LINE Developers Console webhook URL 設定。
5. Step 5 — 設定 cron-job.org 觸發 dispatch。console.cron-job.org 註冊 → CREATE CRONJOB → URL 填 https://你的-app.onrender.com/api/cron/dispatch → Schedule 每分鐘 → 加 X-Cron-Secret header → CREATE。每分鐘戳一次同時做兩件事：派發到期通知 + 喚醒 Render 免費方案 web service（看第 4 節）。
跑完 5 步 bot 上線。4-6 小時可全跑完（含 LINE 帳號申請 + Supabase 設定 + 部署 debug）。月成本 NT$0（Render Free + Supabase Free + cron-job.org Free 三件套永久免費）。
### 不想自己 setup 怎麼辦？
上面這套自己跑大概 4-6 小時。如果符合下面任一條，可能不適合自己跑：
- LINE Developers Console + Render + Supabase 3 個平台介面看到就頭痛
- 想要更複雜的 bot 例如多家族管理、跟 Google Calendar 同步、語音輸入
- 希望 LINE Bot 接金流（電商型 bot）
可以找 不想自己研究我教你（規劃中）。1-on-1 帶你從 LINE 帳號申請、Supabase / Render 設定、bot 開發、部署整套跑完。Pro：不用自己摸索 3 個平台介面、有人帶卡關 5 分鐘解決、4-6 小時一次到位。Con：要付費。適合：想做 LINE Bot 但不想自己 debug、想要客製化功能的人。
### Summary
永久免費 LINE Bot 完整 step-by-step：1) 群組 vs 1-on-1 私聊（資料邊界決定）；2) Supabase 免費資料庫 + asyncpg driver 雷；3) LINE Auto-reply / Greeting 必關（不關 bot 訊息會被預設回覆蓋掉）；4) Render 2025 砍免費 cron → 用 cron-job.org 替代（每分鐘戳同時派發通知 + 喚醒 web service）；5) 自然語言 parser regex 而不是 LLM（永久免費就不要付 API 費）；6) 5 步 step-by-step（LINE 申請 → Supabase 建庫 → Claude Code 寫 FastAPI → Render 部署 → cron-job.org 觸發）。月成本 NT$0。4-6 小時可全跑完。範例家族行事曆，個人提醒/健身打卡/客戶 FAQ 都套得上。
### 名詞解釋
- **排程（cron）**：讓程式「每天 8 點」「每小時」自動執行的定時器。自動發文、定期抓資料都靠它。
- **Render**：雲端程式代管服務，免費方案能跑小型後端程式（例如 LINE bot）。免費版 15 分鐘沒流量會休眠，喚醒要 15-50 秒。
- **LINE Bot**：在 LINE 裡自動回覆、主動推播訊息的機器人。台灣家庭幾乎人人用 LINE，是自動化通知的最佳入口。
- **機器人（bot）**：自動執行特定任務的程式，例如 LINE bot 自動回訊息、發文 bot 每天定時發貼文。
- **Supabase**：免費起步的雲端資料庫服務，提供資料庫＋登入驗證＋API，個人專案很夠用。
- **API（應用程式介面）**：程式跟程式之間溝通的窗口。例如你的程式透過 LINE 的 API 自動發訊息、透過 Google 的 API 讀試算表。
- **Webhook**：「事件發生時，A 服務自動通知 B 服務」的機制。例如有人傳訊息給你的 LINE bot，LINE 就透過 webhook 把訊息轉給你的程式處理。
- **資料庫（database）**：專門儲存、查詢大量資料的系統。網站的會員、留言、紀錄都放這裡。
- **部署（deploy）**：把做好的網站或程式「推上線」讓所有人用得到的動作。
- **環境變數（environment variable）**：放在系統層、不寫進程式碼的設定值，最常用來放 API 金鑰等機密，避免跟著程式碼被公開。
- **API 金鑰（API key）**：服務發給你的一串密碼，程式用它證明「我有權限使用這個服務」。絕對不能公開、不能寫死在程式碼裡。
### FAQ
**Q: LINE Bot 怎麼做？永久免費可能嗎？**
可以。技術三件套：FastAPI（後端）+ Supabase（資料庫，500 MB 免費）+ Render Web Service（部署，免費方案）+ cron-job.org（定時觸發，免費）。月成本 NT$0。完整 5 步驟 step-by-step：1) LINE Developers 申請帳號 + 關 Auto-reply；2) Supabase 建資料庫；3) Claude Code 寫 FastAPI；4) Render 部署；5) cron-job.org 設定每分鐘觸發。4-6 小時可全跑完。詳細看本文第 7 節。
**Q: 為什麼 LINE Bot 收到「感謝您加為好友」？**
因為 LINE Developers Console 預設開啟 Auto-reply messages，新好友會收到一段制式回覆，這段訊息會「先」於你的 webhook 觸發等於蓋掉自己的 bot 邏輯。解法：去 Messaging API 分頁把 Auto-reply messages 跟 Greeting messages 都關掉。這個雷沒有錯誤訊息、沒有 log，新手 100% 會撞，浪費 30 分鐘以上。詳細看本文第 3 節。
**Q: Render 2025 砍掉免費 cron 怎麼辦？**
用 cron-job.org 免費替代。在 Render web service 寫一個 /api/cron/dispatch 端點，cron-job.org 每分鐘 GET 一次。一石二鳥：派發到期通知 + 喚醒 Render 免費方案 web service（避免閒置 15 分鐘 sleep）。設定 5 分鐘搞定，永久免費。教訓：當平台砍免費功能，通常已有獨立的免費替代品，先不要急著付費。詳細看本文第 4 節。
**Q: LINE Bot 自然語言 parser 一定要接 AI 嗎？**
不一定，看 use case。簡單的「明天下午3點 媽媽 醫院」這種固定格式用 regex + 中文時間詞典就夠（明天/後天/下下週 mapping 成日期、下午3點 regex 抓、家人姓名查 list）。0 元 / 0 延遲 / 0 API key。AI 留給真的需要理解上下文的場景（例如「老媽下次回診那天」要從歷史紀錄推算）。每月固定 call API 對「永久免費」專案不對。詳細看本文第 5 節。
**Q: LINE Bot 該用群組還是 1-on-1 私聊？**
看資料邊界。群組適合公共功能（投票、答題、群組查詢），訊息會被洗 + 通知精準度差。1-on-1 適合個人提醒這種有清楚對象的功能，每個用戶各自跟 bot 對話、通知精準。家族行事曆我選 1-on-1 + 邀請碼綁定家族，每個家人各自對話 + 新增行程時指定通知對象，到時間 bot 私訊那個人。詳細看本文第 1 節。
**Q: Supabase 連線字串貼進 .env 跑不起來怎麼辦？**
99% 是 driver 前綴問題。Supabase 給的字串開頭是 postgresql://，但 SQLAlchemy async driver 要 postgresql+asyncpg:// 才能跑。差一個字母套件就找不到 + 完全不報你看得懂的錯。解法：把 postgresql:// 改成 postgresql+asyncpg:// 就好。這種錯誤訊息整段丟給 Claude Code，AI 一眼就能定位到 driver 層。詳細看本文第 2 節。
---
## 我用 AI 做了 link-in-bio 個人入口：6 個踩坑與 1 天上線方法論
> Source: https://www.coolkidlab.com/newbie-pitfalls/ai-built-link-in-bio-site.html
> 用 Claude Code 一天做完 link-in-bio 個人入口完整 step-by-step：viewport 雙重 scale / Vercel Hobby plan author email Block / 圖檔副檔名雙後綴 / 主站 vs 獨立小站 6 個踩坑全紀錄。為什麼不能掛主站子網域、跨品牌如何切割流量歸因。一個非工程師 1 天上線方法論，2-7 小時可全跑完。
一開始我以為 link-in-bio 用 Linktree / Bento 就好——30 分鐘上線、月費 NT$ 270 也不貴。但我有 Coolkid AI Lab 跟方舟藍圖兩個獨立品牌、加一個個人社群帳號，需要的是「中性的個人總入口」可以同時連多個品牌。Linktree 一個 template 所有人用同一張臉，做不出我要的 GameBoy 復古視覺，也綁死視覺風格。決定自己做。
用 Claude Code 一天做出來上線到 link.coolkidlab.com，但中間踩了 6 個從「看起來沒事」到「上線後才發現」的坑：選錯目錄、把 bio 接到主站、Hero 2.7MB 沒壓縮、Vercel Hobby plan author email 不對被 Block、圖檔副檔名雙後綴、viewport meta 雙重 scale 害 IG 內建瀏覽器偏右。每個坑 debug 都花 30 分鐘到 2 小時。
這篇是 step-by-step 教學，讀完你會：1) 知道何時該自己做 / 何時直接用 Linktree（90% 人應該用 Linktree）；2) 避開我親身踩過的 6 個坑；3) 用 1 天時間表把自己的 bio 站從零做完上線。範例網域 link.coolkidlab.com，但 Vercel free subdomain、Cloudflare Pages、自有短網域都套得上。
### 自己做 link-in-bio 還是用 Linktree？（決策框架）
90% 的人應該直接用 Linktree / Bento — 30 分鐘上線、不用維護、流量分析內建、月費 NT$ 270 比一天工程成本便宜。自己做只有 3 種情況真的值得：
1. 你有多個品牌想做一個中性入口（例如 Lab + 投資學院 + 個人 portfolio），需要切割流量歸因但又要一個共同對外介面。
2. 視覺風格是品牌核心識別（你需要 GameBoy 復古 / Y2K 賽博龐克 / 像素 RPG 之類獨特風格），Linktree generic template 完全做不出來。
3. 你把這當 build-in-public 案例練技術 — 順便學 Vercel 部署、Cloudflare DNS、cache 控制、viewport scaling。產出文章 / 影片回饋流量。
我屬於第 1 + 第 2 — 兩個品牌要切流量但有共同個人入口，且視覺要 GameBoy 機殼風 Linktree 完全做不到。自己做的成本：1 天工程 + 永久維護責任（DNS / SSL / 改連結都要動手）。Linktree Pro NT$ 270/月，省 1 天但失去視覺自由度與 SEO / GA4 控制權。如果你不在意這兩件事，直接用 Linktree。
### 為什麼 bio 站不能掛主站子頁？（品牌切割原則）
我第一個直覺是把 bio 做成 coolkidlab.com/links — 10 分鐘就架好。但這違反我自己 2026-05-10 寫進 memory 的原則：「Coolkid AI Lab 跟方舟藍圖完全獨立、不共用品牌 / 流量 / 工具」。把方舟連結放在 coolkidlab.com 路徑下等於 Lab 域名導流到方舟，Google Analytics 看 referrer 整個混淆，根本分不出「來看 Lab 內容」跟「來找 Coolkid 這個人」的人。
解法：拆獨立小站。新 repo `coolkid-bio`、獨立 Vercel project、獨立網域。第一版我給它 vercel free subdomain `coolkid-bio.vercel.app` 試跑兩天確認沒問題，後來綁 `link.coolkidlab.com` 子網域。雖然子網域在技術 SEO 上仍歸 coolkidlab.com root domain，但開**獨立 GA4 property** 把流量歸因隔開。
三個替代方案排序：
1. 獨立新網域（最乾淨）：買 coolkid.bio / coolkid.dev / 個人姓名 .me。SEO / GA4 / GSC 完全跟其他品牌切開。缺點：要管多一個域名 + SSL + 續費。
2. 主站子網域 + 獨立 analytics（折衷，我選這個）：link.coolkidlab.com，DNS 走 Cloudflare CNAME 指 Vercel，GA4 開新 property。SEO 上仍算 Lab 但流量 cohort 切得開。
3. 主站子頁（最方便但流量混淆）：coolkidlab.com/links。Vercel 直接 deploy 不用設 DNS。但跨品牌連結全混進主站 GA4，新手要避開。
### 6 個踩坑全紀錄（從「看起來沒事」到「上線才發現」）
按造成 debug 時間長度排序（短到長）：
1. **選錯目錄（debug 30 分鐘）**：SEO repo 下有 v0.1 / v0.2 / v3 三個版本，現役只有 v3，v0.1/0.2 已歸檔到 _archive/。我前面 30 分鐘做在 v0.1 才發現預覽 server 跑的是 v3 — 動工前先 grep `launch.json` 或 README 確認現役目錄，避免做白工。
2. **圖檔副檔名雙後綴（debug 15 分鐘）**：從圖片編輯器匯出時不小心存成 `portrait-real.webp.png`（兩個副檔名），HTML 引用 `portrait-real.webp` 直接 404 觸發 onerror fallback。修法：rename 統一單一副檔名（`portrait-real.png` 或 `.webp` 任一），HTML src 跟著對齊。Windows Explorer 預設隱藏副檔名，看不到雙後綴，要從 PowerShell `ls` 才會看到。
3. **Hero 圖 2.7MB 沒壓縮（debug 5 分鐘 + 壓縮 1 分鐘）**：原始 PNG 1823×863 直接放，部署上線首屏 LCP 預估 5-8 秒（4G 環境），PageSpeed 直接扣分。用 Python PIL 一行壓 webp quality 82：`img.resize((1200, h)).save('hero.webp', 'WEBP', quality=82, method=6)` — 從 2645KB 壓到 143KB，省 95%。LCP 估降到 < 1 秒。
4. **GitHub commit author 不對 Vercel Hobby plan Block deploy（debug 1 小時）**：Vercel Hobby plan **private repo 只允許 project owner 的 commit 觸發 build**。我用 GitHub noreply email `weiyin11@users.noreply.github.com`，但 Vercel 帳號註冊用 `try19901125@gmail.com` — 兩者不同 → Vercel 把我當「外人 collaborator」一律 Block，dashboard 顯示 `Deployment was blocked because the commit author did not have contributing access`。修法：`git config user.email ""`（local 限本 repo）→ `git commit --amend --reset-author` → `git push --force`（private repo 安全）。
5. **viewport meta `width=460` + JS transform 雙重 scale（debug 2 小時）**：我寫 viewport=460 想讓 mobile browser 自動 fit 460 設計到 device width，同時 JS `fitShellToViewport` 又 transform scale — 兩個 scale 機制疊在一起。**IG / Threads in-app browser** 對 viewport meta 的行為跟系統 Safari 不同，最後畫面偏右、右側被切。修法三個一起做：viewport 改回 `width=device-width, initial-scale=1` + body 加 `display: flex; justify-content: center` + JS 算寬度用 `Math.floor` 而非 `Math.ceil`（下一條）。
6. **`Math.ceil` 多算 1px 害 flex 退化成左對齊（debug 30 分鐘）**：`Math.ceil(1120 * 0.397) = 445`，比 body content（`460 - padding 16 = 444`）多 1px → flex 沒空間置中 → 退化成左對齊（看起來偏右一點）。這個 bug 跟 `margin: 0 auto` 失效同根本原因 — 1px overflow 就會打破所有 centering 機制。改 `Math.floor` 後完美置中（centerDiff 0.00px）。
教訓總結 3 條：1) 動 multi-version repo 前先確認現役目錄；2) Vercel 部署 + custom domain 永遠在實機 in-app browser 驗證，preview tool 跟 desktop simulator 不可靠；3) CSS 居中機制（margin auto / flex）對 1px overflow 極度敏感，計算寬度永遠用 floor 不用 ceil。
### 1 天 step-by-step（6-7 小時可全跑完）
用上面 6 個坑避開後，1 天可全跑完。我的時間表（每段已扣除 debug 時間）：
1. Step 1（上午 30 分鐘）— 決定要不要做。看 Section 1 三個條件，符合 ≥ 1 個再動。沒符合就用 Linktree 省一天。
2. Step 2（上午 1 小時）— 新建獨立 repo。`mkdir coolkid-bio && cd coolkid-bio && git init -b main`。**重點：不要建在主站 repo 子目錄下**，新建獨立目錄與主站平級。建 `vercel.json` 設 cache header（HTML must-revalidate / assets immutable）+ `.gitignore` 排除 `.vercel`。
3. Step 3（上午 2 小時）— 用 Claude Code 寫 index.html。指令範本：「請建一個 link-in-bio 單頁網站，視覺風格 [一句話世界觀，例如『GameBoy DMG 復古機殼』]，包含 4 個區塊：hero 大圖 / 彩色 social icons（IG/Threads 用 inline SVG）/ 4 個大連結卡片 / footer 含 © 跟版本號。純靜態 HTML+CSS，no JS framework。」一次到位再 iterate 視覺。
4. Step 4（中午 30 分鐘）— Hero 圖壓縮。用 Python PIL：`from PIL import Image; img = Image.open('hero.png'); img.resize((1200, int(img.height * 1200/img.width)), Image.LANCZOS).save('hero.webp', 'WEBP', quality=82, method=6)`。2.7MB → 143KB。Alternative：用 squoosh.app 網頁工具壓。
5. Step 5（下午 1 小時）— Vercel 部署 + custom domain。`npm i -g vercel` → `cd coolkid-bio && vercel`（第一次 setup prompts）→ Vercel Dashboard → Settings → Domains → Add `link..com`。Vercel 給你 CNAME target（通常 `cname.vercel-dns.com`）。
6. Step 6（下午 30 分鐘）— DNS 設定。Cloudflare → 對應 zone → DNS → Add CNAME：Name: `link`, Target: `cname.vercel-dns.com`，**Proxy status 必須關掉變灰雲（DNS only）**，否則 Vercel SSL 跟 Cloudflare proxy 會打架 502/521。5-30 分鐘 DNS propagate，Vercel 自動發 Let's Encrypt SSL。
7. Step 7（下午 1 小時）— 實機驗證 + viewport / centering 微調。**永遠用真實手機開 IG / Threads / Safari** 點連結驗證，不要靠 desktop preview tool（in-app browser 行為跟桌面差太多）。我在這步發現 viewport 雙重 scale，又花 2 小時 debug。
總計約 6-7 小時。第一次做的人加 buffer 2 小時（不熟悉 Vercel CLI / DNS 設定）。實際工程量取決於視覺風格複雜度 — GameBoy 機殼風的 hero / pseudo elements / bezel 細節我花了額外 3 小時 polish。
### GA4 / 流量歸因設計（避免跨品牌混淆）
bio 站若是「個人入口」性質、要連多個品牌 → **開新 GA4 property** 跟其他品牌完全分開，不要共用主站 GA4 ID。原因：主站 GA4 看到的訪客全是「來看主站內容」的 cohort，bio 站訪客是「來找我所有東西」的 cohort，動機完全不同，混在一起算出來的 bounce rate / session duration / conversion 都是失真的平均值。
但 `link.coolkidlab.com` 子網域**在 Google Search Console 仍歸 coolkidlab.com property**（同 root domain），這層切不開。如果你要 SEO / GSC 也完全切，就用獨立網域（coolkid.bio / coolkid.dev）。我目前接受這個 trade-off — 子網域 SEO 上仍算 Lab，但 GA4 cohort 是分開的，比起完全混到一起好多了。
Cache 策略也要單獨設：bio 站 HTML 用 `Cache-Control: max-age=0, must-revalidate`（你改連結後訪客下次進來立刻看到新版），assets（圖 / CSS）用 `max-age=31536000, immutable`（永遠 cache 直到改檔名）。改 asset 內容後要 force refresh 就在 HTML 內 src 加 `?v=YYYYMMDD` cache buster。
### 不想自己 setup 怎麼辦？
上面這套自己跑 1 天（6-7 小時）。如果符合下面任一條，可能不適合自己跑：
- 不熟悉 git / Vercel CLI / Cloudflare DNS 任一個 — 學習曲線比想像長
- 只有一個品牌、Linktree Pro NT$ 270/月就夠用
- 沒有「視覺風格是核心識別」的需求 — 你不在意網站長 generic 樣
符合任一條 → 直接用 Linktree Pro 或 Bento.me（基本免費 + Pro 升級）。多花 270 元換省 1 天時間 + 不用維護 DNS / SSL / cache 設定。如果你要的是「我要自己做但卡住」可以找 不想自己研究我教你（規劃中），一對一帶你從 repo init → Vercel deploy → DNS 設定 → 實機驗證整套跑完，主要解的是 Vercel Hobby plan author email / viewport 雙重 scale 這種「Google 不到的具體坑」。
### Summary
用 AI 一天做 link-in-bio 個人入口完整 step-by-step：(1) 何時自己做：多品牌中性入口 / 視覺品牌核心 / build-in-public 案例三個情況符合 ≥ 1 個再動，否則用 Linktree 省一天；(2) 為什麼不能掛主站子頁：流量歸因混淆無法分析，解法獨立 repo + 獨立 Vercel project + 子網域 + 獨立 GA4 property；(3) 6 個踩坑：選錯目錄 30 分鐘 / 圖檔副檔名雙後綴 15 分鐘 / Hero 2.7MB 沒壓 5 分鐘 / Vercel Hobby plan author email 1 小時 / viewport 雙重 scale 2 小時 / Math.ceil 多 1px 30 分鐘；(4) 1 天 step-by-step：決定 → 新 repo → 寫 HTML → 壓縮圖 → Vercel deploy → DNS → 實機驗證 6-7 小時可全跑完；(5) GA4 流量歸因設計：開新 property 跟其他品牌切割，子網域仍在同 GSC property 但 GA4 cohort 切得開。範例 link.coolkidlab.com，獨立網域 / vercel.app / cloudflare pages 都套得上。
### 名詞解釋
- **Vercel**：把網站免費發佈到網路上的服務：接上 GitHub 後，每次推程式碼就自動更新網站，個人專案免費方案就夠用。
- **GA4（Google Analytics 4）**：Google 的流量分析工具：訪客從哪來、看了什麼、停多久。GSC 管「搜尋結果上的表現」，GA4 管「進站後的行為」。
- **部署（deploy）**：把做好的網站或程式「推上線」讓所有人用得到的動作。
- **SEO（搜尋引擎優化）**：讓網站在 Google 搜尋結果排得更前面的一整套方法，涵蓋技術體質、內容品質、連結結構三層。
- **WebP**：Google 推的圖片格式，同樣畫質下檔案比 PNG / JPG 小很多，常見能省 90% 以上。
- **壓縮（minify）**：把程式碼裡的空白、註解拿掉讓檔案變小，功能完全不變。
- **快取（cache）**：把載過的資源暫存起來，下次直接用、不重新下載。網站變快的最便宜手段之一。
- **提交（commit）**：Git 的一個存檔點：把這次改動連同一句說明記錄下來，之後隨時可以回到這個版本。
- **GSC（Google Search Console）**：Google 給網站主的免費後台：看自己網站在搜尋的曝光、點擊、排名跟索引狀態。做 SEO 的人天天開的儀表板。
- **最大內容繪製（LCP, Largest Contentful Paint）**：頁面上「最大那塊內容」（通常是首圖或大標題）出現所需的秒數。Google 標準 ≤ 2.5 秒。
- **HTML**：網頁的骨架語言，定義「這是標題、這是段落、這是圖片」。
### FAQ
**Q: 自己做 link-in-bio 站值得嗎？什麼時候用 Linktree？**
90% 的人應該用 Linktree / Bento — 30 分鐘上線、流量分析內建、Pro NT$ 270/月。自己做只有 3 種情況真的值得：1) 有多個品牌想做中性入口集中流量；2) 視覺風格是品牌核心識別 generic template 做不出；3) 把這當 build-in-public 案例練 Vercel / DNS / cache 技術。符合 ≥ 1 條再動，沒符合就用 Linktree 省一天。詳細看本文第 1 節。
**Q: bio 站該掛主站子網域還是獨立網域？**
看你的流量歸因需求。完全切割 SEO + GA4 → 買獨立短域名（coolkid.bio / coolkid.dev / 個人名 .me），最乾淨但要管多一個域名。折衷方案 → 主站子網域（link..com）+ 獨立 GA4 property，子網域 SEO 仍歸主站 root domain 但 GA4 cohort 切得開，我自己選這個。最方便但流量混淆 → 主站子頁（.com/links），新手要避開因為跨品牌連結全混進主站 GA4。詳細看本文第 2 節。
**Q: Vercel Hobby plan 為什麼會 Block 我的 deploy？**
Vercel Hobby plan 規定 **private repo 只允許 project owner 的 commit 觸發 build**。如果你 git config 用 GitHub noreply email（例如 `weiyin11@users.noreply.github.com`）跟 Vercel 帳號註冊 email（例如 `try19901125@gmail.com`）不同 → Vercel 把你當「外人 collaborator」一律 Block。Dashboard 會顯示「Deployment was blocked because the commit author did not have contributing access」。修法：`git config user.email ""` → `git commit --amend --reset-author --no-edit` → `git push --force`（private repo 沒 collaborator 安全）。詳細看本文第 3 節第 4 條。
**Q: viewport meta 怎麼設才能在 IG / Threads in-app browser 置中？**
三件事一起做：1) viewport meta 用 `width=device-width, initial-scale=1, viewport-fit=cover`，**不要用 `width=460` 強制 layout width** 因為會跟 JS transform scale 變雙重縮放；2) body 加 `display: flex; justify-content: center` 居中，不要靠 `margin: 0 auto` + 寬度計算（對 1px overflow 極度敏感）；3) JS 算 stage 寬度用 `Math.floor` 不用 `Math.ceil`，避免多 1px 害 flex 退化成左對齊。三個一起才完全解。詳細看本文第 3 節第 5-6 條。
**Q: Hero 大圖怎麼壓縮？**
用 Python PIL 一行壓 webp：`from PIL import Image; img = Image.open('hero.png'); img.resize((1200, int(img.height * 1200/img.width)), Image.LANCZOS).save('hero.webp', 'WEBP', quality=82, method=6)`。我自己 2.7MB PNG 壓到 143KB，省 95%。Quality 82 是甜蜜點 — 80 以上肉眼看不出差異，70 以下可能有壓縮痕跡。Alternative 工具：squoosh.app（網頁版，免裝 Python）。LCP 從預估 5-8 秒（4G）降到 < 1 秒。詳細看本文第 3 節第 3 條。
**Q: 一天真的能做完嗎？**
用本文 step-by-step 跟避開 6 個坑後 6-7 小時可全跑完。時間分配：決定要不要做 30 分鐘 / 新 repo + vercel.json 1 小時 / Claude Code 寫 HTML 2 小時 / 壓縮 hero 圖 30 分鐘 / Vercel deploy 1 小時 / Cloudflare DNS 30 分鐘 / 實機驗證 1 小時。第一次做的人加 buffer 2 小時（不熟悉 Vercel CLI / DNS 操作）。實際工程量取決於視覺風格複雜度 — 越獨特的 hero / bezel / pseudo elements 越花時間 polish。
---
## Claude Code vs Cursor：一個非工程師為什麼選了 Claude Code（2026）
> Source: https://www.coolkidlab.com/newbie-pitfalls/claude-code-vs-cursor.html
> claude code 跟 cursor 該選哪個?一個完全不會寫程式的全職交易者的真實選擇 + 公正對照表(Cursor 贏的地方照列)+ 什麼人該選 Cursor。網路上的比較都是工程師視角,這篇補上非工程師視角。
短答給趕時間的人:完全不想看程式碼、想用「講話」把東西做出來 → Claude Code;想要一個有畫面、看著程式碼一行行改、未來想學寫程式 → Cursor。兩個都是 Pro US$20/月。我自己(非工程師)選了 Claude Code,理由跟「效能跑分」無關,是「我根本不想看到程式碼」。
先誠實講:我主力用 Claude Code 半年,Cursor 只實際開來試過、加上查官方文件與公開評測。所以下面對照表 Cursor 的部分我盡量引客觀資料、不裝深度體驗。我能給你的獨家是「一個真・非工程師為什麼這樣選」——這正好是網路上一堆比較文缺的(它們幾乎都工程師寫的,結論常是『新手選 Cursor』)。
為什麼這篇值得看:你 Google「claude code vs cursor」跑出來前 10 名,清一色談「重構能力、context window、日常編碼速度」——那是給會寫程式的人看的。如果你跟我一樣不會寫程式,你要問的問題根本不一樣。
### Claude Code 和 Cursor 一句話差在哪？
Claude Code 是「終端機裡用自然語言下指令,它直接動手」——讀檔、改檔、裝套件、跑指令、部署,你用講的,它執行。Cursor 是「一個像 VS Code 的編輯器,AI 在你打 code 時旁邊幫你補完、改區塊」——你還是在編輯器裡工作,AI 是助手。
對非工程師最關鍵的差別:Claude Code 你可以完全不看程式碼,用講的就好;Cursor 預設你會一直看到程式碼(雖然 AI 幫你寫)。前者你「指揮」,後者你「駕駛」。
### Claude Code vs Cursor 對照表（非工程師視角）
先說在前面:下面這張表我刻意把 Cursor 贏的地方也標出來(打 ✅),因為一張全部都說自己選的工具好的對照表沒有參考價值。
verdict:純看「強不強」,大型任務 Claude Code 佔優、日常編碼 Cursor 順手;但對非工程師,真正的分水嶺不是強弱,是「我想不想看到程式碼」。
### 我(非工程師)為什麼選 Claude Code？3 個理由
- 我不想看到程式碼:Claude Code 我用講的、它動手,我只看結果(網站長怎樣、bot 有沒有發)。Cursor 我還是會一直看到一堆看不懂的 code,反而焦慮。
- 它能一條龍跑完整套:裝套件、改多個檔、跑指令、部署 Vercel——全在終端機裡,我不用在編輯器裡點來點去找檔案。
- 「看不懂 code」反而逼我放手:因為看不懂,乾脆完全信任它的 plan mode,專注在「我要什麼」而不是「它怎麼寫」。這對非工程師其實是優勢不是劣勢。
### 那什麼人該選 Cursor？（誠實說 Cursor 贏的地方）
「新手選 Cursor」這個網路共識沒有錯,它是對「想學寫程式的新手」講的。下面這幾種人,Cursor 確實比較適合:
- 你已經會用 VS Code → Cursor 幾乎零學習成本
- 你想「順便學寫程式」→ 看著 code 改學得到,Claude Code 你會學很少
- 你喜歡看著紅綠 diff 確認每個改動 → Cursor 的 GUI 比終端機安心
- 你常做小範圍、即時的 code 微調 → Cursor 的 inline 補完更快
所以這不是「Claude Code 比較好」,是「你是哪種新手」。想學 code → Cursor;不想碰 code、只想把東西做出來 → Claude Code。
### 不知道怎麼選？30 秒決策
- 完全不想看 code、用講的就好 → Claude Code
- 想看著 code 學、未來想會寫程式 → Cursor
- 已經熟 VS Code → Cursor
- 想要的是「裝 / 改 / 部署一條龍自動跑」→ Claude Code
- 還是不確定 → 兩個都 US$20,各用一週,選你比較不焦慮的那個
### Summary
Claude Code vs Cursor 對非工程師的真正分水嶺,不是「誰比較強」,是「你想不想看到程式碼」。Claude Code = 終端機用講的、它動手、可以完全不看 code,適合「不想碰 code 只想把東西做出來」的人;Cursor = VS Code 式編輯器、視覺化 diff、看著 code 改,適合「想順便學寫程式 / 已熟 VS Code」的人。網路共識「新手選 Cursor」是對想學 code 的新手說的。我一個完全不會寫程式的交易者選了 Claude Code,用它做了整個網站 + 幾個自動化 bot。兩個都 US$20/月,不確定就各試一週。
### 名詞解釋
- **Cursor**：內建 AI 的程式編輯器，跟 Claude Code 同類，但走「圖形介面編輯器」路線而非終端機路線。
- **Claude Code**：Anthropic 推出的 AI 寫程式工具，裝在自己電腦的終端機裡，能直接讀寫你的檔案、跑指令，把你用中文描述的需求做成真的網站或工具。
- **終端機（terminal）**：「用文字指令操作電腦的視窗」的統稱。Mac 叫 Terminal，Windows 上就是 PowerShell，兩者角色相同。
- **無程式碼（no-code）**：不寫程式、用拖拉跟設定做出應用的工具或方法。AI 代理出現後，「會描述需求」比「會不會寫程式」更關鍵。
- **命令列（CLI, Command Line Interface）**：用打字指令操作電腦的方式，沒有按鈕跟視窗。Claude Code 就是命令列工具。
- **AI 代理（AI agent）**：會「動手做事」的 AI：自己讀檔案、寫程式、跑指令、修錯誤，你只負責描述需求跟監督方向。跟只會「回答問題」的聊天機器人是兩種東西。
### FAQ
**Q: Claude Code 和 Cursor 哪個適合新手？**
看你是哪種新手。想學寫程式、已經熟 VS Code → Cursor(這也是網路上工程師的共識);完全不想碰程式碼、只想用講的把東西做出來 → Claude Code。兩個 Pro 方案都是 US$20/月,不確定就各試一週,選你比較不焦慮的那個。
**Q: Claude Code 和 Cursor 可以同時用嗎？**
可以,很多資深開發者這樣:Claude Code 跑重活(整庫重構、多檔修改、部署),Cursor 做日常小修。但對非工程師,建議先專心用一個,不用一開始就兩個一起學。
**Q: 非工程師完全不會寫程式,能用 Claude Code 嗎？**
能。Claude Code 就是設計成讓你用自然語言下指令、它動手執行。我自己完全不會寫程式,用 Claude Code 做了這整個網站 + 幾個自動化 bot。安裝步驟看「Claude Code Windows 安裝踩雷實錄」那篇。
**Q: Cursor 比較便宜還是 Claude Code 便宜？**
一樣。兩個的 Pro 方案都是 US$20/月。差別不在價格,在互動方式——Claude Code 是終端機對話、Cursor 是編輯器。選工具不用看價格,看你想不想看到程式碼。
**Q: Claude Code vs Cursor 哪個比較強？**
看用途。大型重構、整庫分析、自主多步任務 → Claude Code(1M context window 佔優);日常編碼速度、inline 補完、視覺化 diff → Cursor 順手。但對非工程師,「強不強」不是重點,「我能不能不看 code 把事做完」才是。
---
## 每天被重複工作吃掉 2 小時？我把它自動化的起點
> Source: https://www.coolkidlab.com/newbie-pitfalls/repetitive-work-automation-start.html
> 每天花在重複工作的時間，比你以為的多。這篇用一個非工程師的真實經驗，講清楚自動化的起點不是學程式，而是先挑出「每天做、步驟固定、做錯也不會怎樣」的那件事。
短答給趕時間的人：重複工作之所以難擺脫，不是因為它難，是因為它每件都不夠大到讓你停下來處理。把零散的 10 分鐘加起來，常常超過 2 小時。自動化的起點不是學程式，是先抓出「每天都做、步驟都一樣、做錯了也不會怎樣」的那件事。
我不是工程師。我會的程式大概就是國中資訊課的程度，而且還忘光了。但過去半年，我把好幾件每天重複做的事丟給了 AI 去跑：交易日誌的整理、社群貼文的排程、家裡長輩群組的雜事。
我沒有變成程式設計師，我只是學會了一件更前面的事——怎麼看出哪件事根本不該由我手動做。這篇不教你寫程式，講的是更前面那一步：你每天到底有多少時間，是被「不該你做的事」吃掉的。
### 重複工作偷走的時間，比你感覺到的多很多
你不會記得今天花了多少時間在重複工作上，因為它從來不是一大塊。它是早上把昨天的數字抄進表格的 8 分鐘，是同樣一段話貼到三個群組的 5 分鐘，是每篇貼文手動排版的 15 分鐘。每件都小到不值得停下來，於是你每天做、每天忘、隔天再做一次。
我自己第一次真的去算，是在做交易記錄的時候。我每天收盤後手動把當天的單整理成日誌，一次大概 20 幾分鐘，乘上一個月，光這一件事就吃掉我超過 10 個小時。
重點不是哪一件事很花時間，是這些「不夠大到讓你處理」的小事，加起來大到會偷走你整個下午。
### 自動化的起點，不是工具，是「挑對第一件事」
大部分人卡在「我又不會寫程式」，所以連想都不敢想。但真正的起點其實更簡單，跟程式無關——你要先挑對第一件值得自動化的事。我自己用三個條件篩，挑出來的成功率最高：
1. Step 1：每天（或每週）都會做——一次性的事不值得，重複才有複利。
2. Step 2：步驟每次都一樣——流程固定 AI 才接得住；每次都要臨場判斷的，先別碰。
3. Step 3：做錯了也不會出大事——從低風險的開始，壞了重來就好，不要拿報稅或匯款當練習。
我的第一件，就是那個交易日誌。每天做、格式固定、整理錯了頂多重貼一次，完全符合。我把流程講給 AI 聽，讓它幫我把零散的紀錄整理成固定格式——我從每天 20 分鐘，變成貼上去、看一眼、收工。那不是什麼厲害的工程，但它是第一個讓我發現「原來這種事真的可以不用我做」的轉捩點。
### 你不需要先變強，你需要先開始
我知道你現在在想什麼，因為那也是我半年前想的：「這些聽起來都要會寫程式吧。」我後來做的東西——每天定時自動發的社群貼文、幫家裡長輩處理雜事的小機器人——沒有一個是我「學會程式」之後才做的。
是反過來：我先挑了一件夠小的事硬著頭皮開始，過程中卡住就問 AI，邊做邊補。能力是做出來的，不是準備好的。
我以為要先準備好才能動手。後來發現，是動手的過程本身在準備我。
### Summary
重複工作偷走的時間比你感覺到的多，因為它每件都小到不值得處理、加起來卻是整個下午。自動化的起點不是學程式，是挑對第一件事：每天都做、步驟固定、做錯也不會出大事——三個條件都符合的，成功率最高。別等到變強才開始，能力是在動手過程中長出來的。想看挑對之後實際長怎樣，往下接交易日誌與自動發文那兩篇。
### 名詞解釋
- **自動化（automation）**：把重複性工作交給程式定時自動執行，例如每天早上自動抓新聞、整理成貼文、發到社群。
- **無程式碼（no-code）**：不寫程式、用拖拉跟設定做出應用的工具或方法。AI 代理出現後，「會描述需求」比「會不會寫程式」更關鍵。
- **機器人（bot）**：自動執行特定任務的程式，例如 LINE bot 自動回訊息、發文 bot 每天定時發貼文。
- **排程（cron）**：讓程式「每天 8 點」「每小時」自動執行的定時器。自動發文、定期抓資料都靠它。
### FAQ
**Q: 完全不會寫程式，真的能做自動化嗎？**
能。這篇講的起點跟寫程式無關——是先挑出一件每天做、步驟固定、低風險的事。動手過程卡住的地方再問 AI，邊做邊學，不需要先學完程式。
**Q: 第一件該自動化的事怎麼挑？**
用三個條件篩：每天或每週都會做、步驟每次都一樣、做錯了也不會出大事。三個都符合的成功率最高。從笨到不行的小事開始，不要拿金流、報稅這種高風險的事練手。
**Q: 自動化要花多少時間才看得到效果？**
因事而異，但建議先花 30-60 分鐘試一件小的。重點不是一次到位，是先做出第一個「原來這真的可以不用我做」的成功經驗，後面才接得下去。
**Q: 自動化會不會出錯反而更麻煩？**
所以第一件要挑「做錯了也不會怎樣」的事。低風險的事就算跑錯，重來一次就好，這也是為什麼不建議新手從金流或法律相關的事開始。
---
## 不會寫程式，還有可能自己做出工具跟網站嗎？
> Source: https://www.coolkidlab.com/newbie-pitfalls/no-code-can-i-build.html
> 以前「不會寫程式」幾乎等於「做不出來」。現在這條線移動了。這篇用一個非工程師的真實經驗，講清楚你現在做得到什麼、又會卡在哪——以及為什麼會不會講清楚，比會不會寫更關鍵。
短答給趕時間的人：可以，而且門檻比你想的低很多。過去「不會寫程式」幾乎等於「只能花錢請人或放棄」，但 AI 把這條線往下移了一大截——現在你做的不是「從頭寫程式」，是「把想法講清楚給 AI、它寫、你來測試跟修」。
我會的程式趨近於零。但我現在用的網站、每天在跑的幾個小工具，都是我自己做出來的。我沒有去報程式班，也沒有把哪本教科書讀完，我只是換了一種做事方式。
這篇不是要跟你說「很簡單，人人都會」——那是騙人的，它有它的難處，我等下會老實講。這篇是要把「到底還做不做得到」這個問題，給你一個誠實的答案。
### 「我不會寫程式」現在卡住的東西，比以前少很多
三年前，一個不會寫程式的人想做一個網站或小工具，路大概只有兩條：花錢請人，或者放棄。現在多了第三條：你可以把想做的東西描述給 AI 聽，它幫你把程式寫出來，你負責跑跑看、告訴它哪裡不對、讓它改。整個過程你打的字是中文，不是程式碼。
寫程式那雙手，從你變成了 AI。你的工作從「會不會寫」變成「講不講得清楚、出錯時放不放棄」。
### 你做的不是「寫程式」，是兩件更基本的事
把這半年拆開來看，我真正在做的其實只有兩件事，兩件都跟程式無關：
1. 把想法講清楚：你想做的東西能不能拆成一句一句具體的話？「我要一個頁面，上面有標題、三個區塊、最下面一個按鈕」——能講到這種程度，AI 就接得住。講不清楚，再強的工具也幫不了你。
2. 出問題時不放棄：一定會出錯。新手跟做得出來的人，差別常常不在能力，在於前者看到紅字就關掉，後者把紅字複製給 AI 問「這什麼意思、怎麼修」。
做得出東西的人，不是比較聰明，是比較不怕卡住。卡住的時候多問一句，就過去了。
### 老實說：能做，不代表無痛
我不想賣你一個太美的故事。我自己最常踩的，是一開始想做太大——第一個專案就想做功能很多的東西，結果改到第三天還在原地打轉。後來學乖了：先做一個小到不行、但能跑得起來的版本，再慢慢長大。能跑的醜東西，遠勝過想像中完美但永遠做不完的東西。
另一個坑是以為哪裡寫錯就修哪裡。有時候一個東西要改三次以上都改不好，問題往往不是哪一行寫錯，是一開始的結構就歪了——這種時候重寫比修補快。這件事我繞了很久才懂。
### Summary
不會寫程式，現在仍然做得出個人網站與自用工具——因為你做的不是從頭寫程式，是把想法描述給 AI、由它寫、你測試跟修。難的不是程式，是把需求講清楚、跟出錯時願意繼續問。但它不是無痛：第一個專案別做太大、看到紅字別放棄、爛結構別硬補。能跑的陽春版，遠勝做不完的完美版。
### 名詞解釋
- **無程式碼（no-code）**：不寫程式、用拖拉跟設定做出應用的工具或方法。AI 代理出現後，「會描述需求」比「會不會寫程式」更關鍵。
- **Claude Code**：Anthropic 推出的 AI 寫程式工具，裝在自己電腦的終端機裡，能直接讀寫你的檔案、跑指令，把你用中文描述的需求做成真的網站或工具。
- **AI 代理（AI agent）**：會「動手做事」的 AI：自己讀檔案、寫程式、跑指令、修錯誤，你只負責描述需求跟監督方向。跟只會「回答問題」的聊天機器人是兩種東西。
### FAQ
**Q: 完全零基礎，真的能自己做出網站嗎？**
能。你做的不是從頭寫程式，是把想做的東西描述給 AI、由它寫、你來測試跟修正。整個過程主要打的是中文。難的不是程式，是把需求講清楚、跟出錯時願意繼續問。
**Q: 那我還需要學程式嗎？**
不需要先學完才開始。能力是在做的過程中長出來的——卡住時問 AI 那一段是什麼、怎麼改，比先讀完一本教科書有效得多。想更進一步再回頭補基礎也不遲。
**Q: 做出來的東西能用嗎，還是只是玩具？**
個人用途、小型網站、自用工具完全可用。但如果是要扛大量用戶、牽涉金流或安全的商業系統，那仍然建議找專業工程師，不該由新手練習品扛。
**Q: 第一個專案該做什麼？**
做一個小到不行、但能完整跑起來的東西。別一開始就挑功能很多的大專案——那是新手最常見的卡死原因。能跑的陽春版，遠勝做不完的完美版。
---
## AI 工具這麼多，非工程師到底該從哪個開始？
> Source: https://www.coolkidlab.com/newbie-pitfalls/which-ai-tool-to-start.html
> 面對一堆 AI 工具不知道選哪個，是正常的——但「先選工具」本身就是錯的順序。這篇教你用「你想做什麼」反推該用什麼，而不是被工具名單淹死。
短答給趕時間的人：不要問「哪個 AI 工具最強」，要問「我想做出什麼」。工具多到讓人癱瘓，是因為你想先選對工具再開始；但正確順序相反——先確定你要做的事，再用這件事反推工具，選擇瞬間從幾十個縮到兩三個。
每隔幾天就有人跟你說「這個 AI 神器你一定要用」。清單越列越長，你越看越焦慮，最後一個都沒開始。我懂，因為我剛開始那陣子，時間有一半花在看別人推薦工具、把它們一個個打開來玩，然後又關掉。
真正做出東西，是我停止「找最強工具」之後才開始的。這篇不列工具清單——清單你已經有太多了。這篇給你一個選的方法，讓你自己就能判斷該從哪開始。
### 工具太多不是你的問題，但「先選工具」是錯的順序
你會癱瘓，不是因為你不夠懂，是因為你站在錯的起點。「我該用哪個 AI 工具」這個問題本身沒有答案——因為它少了前提。就像問「我該買哪台車」，不先講你要載貨還是市區代步，怎麼選？
工具是拿來做事的。先確定你想做的事，那件事會自己把工具範圍縮到剩兩三個。你不是要選最強的，是要選最適合這件事的。
### 用「你想做什麼」反推工具
把你想做的事，大致分成三類，方向就清楚了：
- 你想寫東西 / 想事情（寫文章、整理想法、做研究）→ 從一個你用得順的對話式 AI 開始就好，先把「跟 AI 一起想事情」練熟。
- 你想做出網站或工具 → 你需要的是能實際幫你動手寫、還能跑起來的環境，而不只是聊天框。
- 你想自動化重複雜事（定時發文、整理資料）→ 你要找的是能「按流程做事」的工具，重點在它能不能照你給的步驟跑。
一旦你說得出「我想做 X」，剩下的選擇就只有兩三個，而且哪個都能開始——因為第一個工具的任務不是陪你一輩子，是讓你跨出第一步。
### 新手最容易卡的，不是選錯，是換太快
剛開始我每看到一個新工具就想換，總覺得「下一個會更好」。結果是每個都只摸到皮毛，每次都從零開始適應，半年下來什麼都沒做成。
後來我才懂：前期所有工具的差距，都小於「你還不熟」造成的差距。與其一直換，不如挑一個能做你想做的事的，用到熟、用到做出第一個成品。等你真的撞到它的天花板，那時候你自然知道下一個該換什麼——而且那是你用經驗換來的判斷，不是別人推薦清單上的名字。
工具會一直更新，但「把一個工具用到做出東西」的經驗不會過期。先求做完一件，再求換更好的。
### Summary
面對一堆 AI 工具不知從何選，問題不在你不夠懂，在順序錯了。別問哪個最強，先確定你想做什麼：想寫東西用對話式 AI、想做網站用能動手寫的環境、想自動化用能按流程做事的工具——事一定下來，選擇就剩兩三個。最後一個提醒：別一直換工具，前期差距小於不熟的差距，先用一個做出第一個成品再說。
### FAQ
**Q: 新手第一個 AI 工具該選哪個？**
沒有通用答案，要看你想做什麼。想寫東西 / 想事情，從一個順手的對話式 AI 開始；想做網站或工具，需要能實際動手寫並跑起來的環境；想自動化雜事，找能照流程做事的工具。先定事，工具範圍自然縮小。
**Q: 免費的工具夠用嗎，還是一定要付費？**
新手起步階段，免費或低價方案通常足以做出第一個成品、確認這條路適不適合你。等你撞到免費版的天花板、很清楚自己缺什麼功能時，再升級也不遲——別在還沒開始前就為付費糾結。
**Q: 工具一直更新，現在學會不會很快就過時？**
工具會過時，但「把一個工具用到做出東西」的經驗不會。具體按鈕會變，但「怎麼把需求講清楚、怎麼除錯、怎麼判斷該不該換工具」這些底層能力，換到下一個工具一樣管用。
**Q: 可以同時學很多個工具嗎？**
不建議。新手同時學多個，最常見的結果是每個都只摸到皮毛、什麼都沒做成。先用一個做出第一個成品，建立完整經驗，再橫向擴展。
---
## 我只會用 ChatGPT 問問題——怎麼讓它真的幫我做事？
> Source: https://www.coolkidlab.com/newbie-pitfalls/chatgpt-from-asking-to-doing.html
> 很多人用 AI 只停在「問它問題」。但同一個 AI，其實可以從「回答你」升級成「幫你把事做完」。這篇講清楚中間那道你還沒跨過的門檻，以及怎麼從半自動開始。
短答給趕時間的人：「問 AI 問題」和「叫 AI 做事」之間，差的不是工具，是你給它的東西。問問題時你給的是一個疑問，它回你一段文字；叫它做事時你要給的是一個明確的任務、加上一個它能實際動手的環境。大多數人卡在只會前者——把 AI 當成更聰明的搜尋引擎。
你大概也是這樣用 AI 的：有問題就問它，它回你一大段，你看一看、複製需要的部分，結束。這沒有錯，但你只用到了它一小部分的能力。
同一個 AI，可以不只是「回答你」，而是「幫你把一件事從頭做到尾」。我也是卡在「只會問問題」很久，才慢慢跨過去的。這篇講的就是中間那道門檻：它長什麼樣，以及怎麼跨。
### 「問問題」和「叫它做事」中間，差了一個門檻
差別其實很簡單，但很多人沒意識到。問問題：你給它一個疑問（「這個怎麼用？」），它給你一段說明，主導權在你，它只負責回答。叫它做事：你給它一個任務（「幫我把這 50 筆資料整理成這個格式」），它直接產出成品，你來檢查。
別再只丟「問題」，開始丟「任務」。問題求的是知道，任務求的是做完。光是這個轉念，你會發現一堆原本你手動在做的事，其實可以直接交出去。
### 從對話到做事，關鍵是給它兩樣東西
要讓 AI 真的幫你做事，你要餵給它的不是更聰明的問法，是這兩樣：
1. 一個明確的任務：把「我想要的成品長怎樣」講具體。不是「幫我寫一下」，而是「幫我寫一封給客戶的道歉信，語氣誠懇、三段、不要太正式」。你講得越具體，它做得越準。
2. 一個它能動手的環境：只是產出文字，對話框就夠；但如果你要它幫你「操作」東西（整理檔案、定時發文、跑一個流程），你就需要把它放進一個能真正動手的工具裡。這一步是大多數人沒跨過去的地方。
### 不用一步到位——從「半自動」開始
我知道「讓 AI 自動幫你做事」聽起來很遠。但你不用一次跳到全自動。我自己是從半自動開始的：先讓 AI 幫我把一件事做掉八成，剩下兩成我手動收尾。等我信任它做得夠穩了，再慢慢把收尾那段也交出去。
我現在每天定時自動發出去的社群貼文、幫家裡處理雜事的小幫手，都是這樣一點一點從「半自動」長成「全自動」的，沒有哪一個是一開始就放手不管的。
不要等到「完全信任」才開始自動化。先讓它做八成、你看著兩成，信任是在這個過程裡慢慢長出來的。
### Summary
用 AI 只停在「問問題」，等於只用了它一半的能力。從「回答你」升級到「幫你把事做完」，差的不是工具，是你給它的兩樣東西：一個明確的任務（講具體成品，不是「幫我用一下」）、一個它能動手的環境（要操作東西就得把它接到能執行的工具裡）。別想一步到全自動，從半自動起步——它做八成、你收尾兩成，信任在過程裡長出來。
### 名詞解釋
- **ChatGPT**：OpenAI 的對話式 AI。本站常拿它跟 AI 代理對比：ChatGPT 給你答案、你自己動手；AI 代理直接幫你把事做完。
- **自動化（automation）**：把重複性工作交給程式定時自動執行，例如每天早上自動抓新聞、整理成貼文、發到社群。
- **無程式碼（no-code）**：不寫程式、用拖拉跟設定做出應用的工具或方法。AI 代理出現後，「會描述需求」比「會不會寫程式」更關鍵。
- **排程（cron）**：讓程式「每天 8 點」「每小時」自動執行的定時器。自動發文、定期抓資料都靠它。
### FAQ
**Q: ChatGPT 除了問問題還能做什麼？**
它可以從「回答你」升級成「幫你把事做完」——寫好一份完整文件、整理一批資料、甚至接到合適的工具裡每天定時幫你做某件事。關鍵是你給它的東西：從丟「問題」換成丟「明確的任務」。
**Q: 怎麼讓 AI 幫我做事而不只是聊天？**
給它兩樣東西。一是明確的任務（把你要的成品講具體，而不是「幫我用一下」）；二是能動手的環境（純文字產出對話框就夠，要它操作東西則需把它接到能實際執行的工具裡）。
**Q: 讓 AI 自動做事，安全嗎？**
看你交給它什麼事。低風險、做錯能重來的事（整理資料、排程發文）很適合；金流、法律、健康這類高風險的事，不該從新手階段交給自動化。建議從半自動開始——它做八成、你收尾兩成，信任夠了再放手。
**Q: 我不會寫程式，也能讓 AI 幫我做事嗎？**
可以。讓 AI 做事的關鍵是「把任務講清楚」，不是會不會寫程式。把它接到能動手的工具這一步，過程卡住就問 AI 本身，邊做邊學即可。
---
## SEO 是什麼？沒預算的個人網站需要做嗎？
> Source: https://www.coolkidlab.com/newbie-pitfalls/what-is-seo-personal-site.html
> SEO 不是行銷公司才需要的東西。這篇用一句話講懂 SEO，再老實回答：一個沒預算的個人網站，到底要不要做、要做到什麼程度，以及 2026 年多了哪件事值得知道。
短答給趕時間的人：SEO（搜尋引擎最佳化）就是「讓搜尋引擎看得懂你的內容，並在對的人搜尋時把你推出來」。沒預算的個人網站不但需要，而且最划算——因為 SEO 的基礎部分幾乎不用錢，只要花時間。它跟付費廣告最大的差別是：廣告一停流量就停，SEO 做好的內容會持續幫你帶人進來，是會累積的資產。
我半年前完全不懂 SEO。我以為那是行銷公司在搞的東西，跟我一個自己架站的人沒關係。結果我大錯特錯。
我從零開始邊做邊學，才發現：對一個沒有廣告預算的個人網站來說，SEO 幾乎是唯一能讓陌生人持續找到你的方法——而且它的入門部分，不用花錢。這篇先讓你搞懂 SEO 到底是什麼，再誠實回答你心裡那個問題：「我這種小站，真的需要嗎？」
### 一句話講懂 SEO（不用任何術語）
想像你開了一家店，但它不在街上，而是在一個叫 Google 的巨大商場裡。SEO 就是在做兩件事：第一，讓商場的引導員（搜尋引擎）看得懂你這家店在賣什麼；第二，當有客人問起相關的東西時，引導員會願意把你推薦出去。
你不用討好客人，你要先讓「引導員」看懂你、信任你。它看懂了、覺得你的內容對搜尋的人有用，就會把你排在前面。SEO 的所有工作，拆到底都是在服務這兩件事。其他你聽過的那些名詞，都只是這兩件事底下的細節。
### 沒預算的個人站，需要做到什麼程度？
好消息是：SEO 真正花錢的部分（買廣告、買連結）你都可以先跳過。沒預算反而逼你專注在最有效、又免費的基礎上。對一個剛起步的個人站，我會把力氣放在這幾件免費的事：
- 讓搜尋引擎找得到你：確認網站沒有不小心「擋住」搜尋引擎，並把你的頁面清單主動告訴它。
- 每個頁面講清楚自己是誰：標題、簡介要讓人（和搜尋引擎）一眼看懂這頁在講什麼。
- 內容真的對人有用：與其塞一堆關鍵字，不如老實把一件事講透——這在現在反而更重要。
- 裝一個免費的監測工具：才知道有沒有人搜到你、搜什麼進來，這樣才有得調整。
這些全部不用錢，需要的只是時間和願意搞懂。等基礎打穩、網站開始有人來，再考慮要不要投錢加速也不遲。
### 2026 年的新變化：不只 Google，還有 AI 會引用你
這幾年多了一件事值得你知道：現在搜尋的人，越來越多直接問 AI（用 AI 來查資料、找答案），而 AI 在回答時，會去引用它信任的網頁內容。所以「被看見」這件事，從「在 Google 排前面」擴大成「也能被 AI 引用」。
你不用為了 AI 重學一套。把內容老實講清楚、把事實寫具體，人、搜尋引擎、AI 三邊都會更喜歡你。
### 想動手？照這個順序看我從零學 SEO 的紀錄
如果你決定動手，我把從零學 SEO 的過程都寫成了實測紀錄，照順序看就能跟著做。第一步：先讓自己看得到數據，從 免費監測工具 GSC 的入門 開始。接著最常見的第一個技術疑問：網站地圖出現紅字是壞掉了嗎。想看完整的 6 個月歷程，往下接相關文章區的「我用 AI 從 0 開始學 SEO」。
重點不是一次做完所有事，是先把「讓搜尋引擎找得到你 + 裝上免費監測」這兩件最基礎的接上，剩下的邊做邊長。
### Summary
SEO 就是讓搜尋引擎看懂你的內容、並在對的人搜尋時把你推出來——核心只有「讓機器看懂你」跟「讓它信任你有用」兩件事。沒預算的個人站不但需要、還最划算，因為基礎部分（讓引擎找到你、頁面講清楚、內容有用、裝免費監測）幾乎不用錢，差別在它會累積，廣告一停就停。2026 年還多了一件事：把內容講清楚、事實寫具體，連 AI 也會引用你。別狂塞關鍵字、別不裝監測就埋頭做。
### 名詞解釋
- **SEO（搜尋引擎優化）**：讓網站在 Google 搜尋結果排得更前面的一整套方法，涵蓋技術體質、內容品質、連結結構三層。
- **GSC（Google Search Console）**：Google 給網站主的免費後台：看自己網站在搜尋的曝光、點擊、排名跟索引狀態。做 SEO 的人天天開的儀表板。
- **網站地圖（sitemap）**：列出網站所有頁面跟最後更新日的清單檔（sitemap.xml），交給搜尋引擎加速發現與重抓你的頁面。
### FAQ
**Q: SEO 到底是什麼？**
SEO（搜尋引擎最佳化）是讓搜尋引擎看得懂你的網站內容、並在有人搜尋相關主題時把你推薦出來的一系列做法。核心就兩件事：讓機器看懂你在講什麼、讓它信任你的內容對搜尋者有用。
**Q: 沒有預算的個人網站需要做 SEO 嗎？**
需要，而且很划算。SEO 的基礎部分（讓搜尋引擎找到你、頁面講清楚、內容有用、裝監測工具）幾乎不用花錢，只需要時間。它跟廣告最大的差別是會累積——做好的內容會持續帶人進來，廣告一停流量就停。
**Q: SEO 要多久才看得到效果？**
通常是以「月」為單位的長期累積，不是幾天見效。所以如果你需要的是明天就要的流量，那是廣告的範疇；SEO 適合的是願意慢慢累積、把內容當資產經營的人。
**Q: 聽說現在有 AI 搜尋，SEO 是不是沒用了？**
相反，變得更重要也更廣。現在除了 Google 排名，AI 在回答問題時也會引用它信任的網頁。兩者的底層要求很像——內容清楚、事實具體、機器好讀。把 SEO 基礎做好，等於同時為「被 AI 引用」鋪路。
---
## AI 會取代我的工作嗎？一個非工程師的誠實想法
> Source: https://www.coolkidlab.com/newbie-pitfalls/will-ai-replace-my-job.html
> 「AI 會不會取代我」是這兩年最多人焦慮的問題。這篇不給罐頭安慰，用一個非工程師的真實視角，把這個問題換成一個你真的能行動的版本：與其問會不會被取代，不如問你能不能變成那個用 AI 的人。
短答給趕時間的人：與其問「AI 會不會取代我」，不如問「我能不能變成那個用 AI 的人」。過去兩年真正被影響的，很少是整個職業消失，多半是「會用 AI 的人」接走了「不會用的人」原本在做的事。差別不在聰不聰明，在有沒有開始。
我是一個全職交易者，不是工程師。「AI 取代工作」這種新聞我也看，看的時候心裡一樣會涼一下。所以這篇我不打算給你「放心啦不會啦」這種罐頭安慰——那對你沒幫助。
我想做的是把這個問題拆開。因為我自己後來發現，「會不會被取代」是一個讓你越想越無力的問題，而它其實可以被換成另一個你真的有得選的問題。
### 「會不會被取代」是一個會把你卡住的問題
這個問題的麻煩，在於答案永遠不在你手上。它取決於技術怎麼走、公司怎麼決定、整個產業怎麼變——全部都是你控制不了的東西。所以你越想，只會越焦慮、越無力，最後通常什麼都沒做，繼續每天上工、繼續擔心。
我在市場待久了學到一件事：把注意力放在你控制不了的事情上，是最快把自己拖垮的方法。市場不會照我的意思走，但我要不要出手、錯了認不認，這些是我能決定的。AI 這件事也一樣。
「會不會被取代」答案不在你手上，問再多次都一樣。換成「我要不要開始用」，答案立刻回到你身上。
### 真正在發生的事，沒有新聞講的那麼戲劇化
把鏡頭拉近看真實的日常，你會發現「整個職業一夕消失」很少，更常見的是另一種安靜的位移：同樣一份工作，本來要花一整個下午做的，有人用 AI 半小時做完，而且做得還不差。久了，那些花一整個下午的人，就慢慢被花半小時的人比下去了。
所以這不是「人 vs AI」，是「用 AI 的人 vs 不用 AI 的人」。我自己就是活生生的例子：過去半年我把交易日誌的整理、社群貼文的排程、家裡長輩群組的雜事，一件一件丟給 AI 去跑。我沒有變成更厲害的人，我只是讓本來會吃掉我時間的事，不再吃掉我的時間。
真正會被取代的，不是「不會 AI 的人」，是「不會 AI、又不肯開始學的人」。這兩件事差很遠——後者是一個選擇，不是一個命運。
### 該不該現在學？以及怎麼開始才不會半途而廢
該。但「學 AI」不是叫你去考證照、讀完一本厚書——那是最容易半途而廢的方式。真正有用的開始，小到有點好笑：挑一件你每天都在做、步驟固定、做錯也不會出大事的小事，把它交給 AI 試試看。
1. Step 1：先停止問「會不會被取代」——這題沒有對你有用的答案，再想下去只是耗你的能量。
2. Step 2：挑一件每天都做、又很煩的小事（整理紀錄、回固定訊息、排版貼文都行），當你的第一個練習。
3. Step 3：今天就花 30 分鐘，把那件事描述給一個 AI 工具聽，讓它幫你做做看。做得爛沒關係，重點是你從「擔心的人」變成「動手的人」。
你會發現，焦慮在你開始動手的那一刻就少了一大半。不是因為問題消失了，是因為你不再只是站在原地看它逼近，你開始往它走過去。能力是這樣長出來的——先開始，再變強。
### Summary
「AI 會不會取代我」這個問題的答案不在你手上，越想越無力。把它換成「我要不要變成那個用 AI 的人」，答案立刻回到你身上。真正在發生的不是職業消失，是「用 AI 的人」接走「不用的人」的事。該不該現在學？該——但別去考證照、讀厚書，挑一件每天做、低風險的小事，今天花 30 分鐘交給 AI 試試。焦慮在你動手那一刻就少一半。想看實際從哪件小事開始，往下接自動化起點那篇。
### FAQ
**Q: AI 真的會取代我的工作嗎？**
與其問會不會，不如看真正在發生的事：整個職業一夕消失很少，更常見的是「會用 AI 的人」用更短的時間做完同樣的事，慢慢比下「不用的人」。所以關鍵不是人對抗 AI，是你要不要成為那個用 AI 的人——這件事的決定權在你手上。
**Q: 我該現在開始學 AI 嗎？**
該，而且越早把焦慮換成行動越好。但「學」不是去考證照或讀完一本書，那最容易半途而廢。真正的起點是挑一件每天都做、步驟固定、做錯也不會出大事的小事，今天花 30 分鐘交給 AI 試做。先開始，能力會在過程中長出來。
**Q: 我不是工程師，學 AI 來得及嗎？**
來得及。我自己就是非工程師、全職交易者，程式只有國中資訊課的程度。過去半年靠著「挑小事、邊做邊問」做出了好幾個自己每天在用的工具。背景決定你的起點，不決定你的終點——重點是有沒有開始。
**Q: 一直很焦慮 AI，但不知道做什麼，怎麼辦？**
焦慮多半來自「一直在想、卻從沒動手」。最快的解法不是想通，是行動：今天就打開一個 AI 工具，挑一件你每天在做的煩雜小事讓它幫你做。你會發現焦慮在動手那一刻就少一半——因為你不再站著看它逼近，而是開始往前走。
---
## 非工程背景、年紀也不小，還學得會用 AI 嗎？
> Source: https://www.coolkidlab.com/newbie-pitfalls/non-engineer-can-i-learn-ai.html
> 「我不是理工的，學得會嗎？」「年紀大了還來得及嗎？」這是非工程師最常見的兩個自我懷疑。這篇用一個全職交易者、程式只有國中程度的真實經驗，告訴你背景跟年紀到底影響多少——以及它們沒你想的那麼關鍵。
短答給趕時間的人：學得會。我自己是全職交易者，不是工程師，程式只有國中資訊課的程度，而且早忘光了，照樣在過去半年做出好幾個每天在用的工具。背景決定你的起點，不決定你的終點——真正卡住人的不是背景，是「我不是這塊料」這個念頭。
「我不是理工的，學得會嗎？」「都這個年紀了還來得及嗎？」這兩個問題我太熟了，因為它們也是我半年前躺在心裡的兩塊石頭。
所以這篇不是來跟你喊「相信自己一定可以」的——那種話誰都會講。我想用我自己的底，老實跟你算一下：背景跟年紀，到底會影響多少。
### 先亮我的底，你才知道這話有沒有資格講
我不是工程師，沒讀過資訊相關科系，全職在做的事是交易。我會的程式，大概就是國中那堂資訊課教過的程度，而且早就忘得差不多了。我第一次打開 AI 工具想做點東西的時候，連檔案要放哪個資料夾都會卡住。
我講這些不是要賣慘，是要讓你知道：接下來那句「非工程師也學得會」，是從一個真的非工程師嘴裡講出來的，不是某個本來就會寫程式的人，回頭跟你說「很簡單啦」。
如果一個連資料夾都會放錯的交易者都做得出來，那這件事的門檻，大概沒有你想的那麼高。
### 為什麼「不是工程師」沒你想的那麼要命
關鍵在於：你現在做事的方式，已經跟三年前不一樣了。以前要做出一個工具，你得自己會寫程式。現在你做的不是寫程式，是把想做的東西用中文講清楚給 AI 聽，它寫，你來測試跟修。整個過程你打的字是中文，不是程式碼。
所以真正在考你的能力，從「會不會寫程式」變成了「會不會把一件事講清楚」「卡住的時候肯不肯多問一句」。這兩件事，剛好都不是工程師的專利。一個會把客訴講清楚的客服、一個會把需求說明白的老闆，反而常常比悶頭寫程式的人更吃得開。
把事情講清楚、出錯不放棄——這兩個是你本來就在用的能力，只是以前沒人告訴你，它們現在比會寫程式還值錢。
### 那年紀跟時間呢？老實說
年紀的真實影響，比你想的小，但不是零。它影響的不是「學不學得會」，是「願不願意忍受一開始的笨拙」。年輕人比較不怕看起來笨，所以敢亂試；年紀上去之後，我們更怕「做不好被笑」，於是還沒開始就先勸退自己。這才是年紀真正的障礙——不是腦袋，是面子。
1. Step 1：把「我不是這塊料」當成要檢查的假設，不是已經成立的結論。你只是還沒試，不是試過不行。
2. Step 2：允許自己當一天的笨蛋。第一次做什麼都會卡、都會醜，這跟年紀無關，是每個人的第一天都長這樣。
3. Step 3：挑一件小事今天就動手，不要等「準備好」。準備好這件事不會自己來，是你做著做著才慢慢有的。
我不是先變強才做得出東西，是先硬著頭皮開始、邊做邊卡邊問，能力才一點一點長出來。你拿自己的第一天，去比別人的第一百天，當然會覺得自己不行。但那不公平——你該比的是今天的你，和還沒開始的你。
### Summary
非工程背景、年紀不小，照樣學得會用 AI。我自己是全職交易者、程式只有國中程度，半年做出好幾個每天在用的工具。因為你現在做的不是寫程式，是把想法用中文講清楚給 AI、它寫你修——考的是表達跟不放棄，不是工程背景。年紀影響的不是腦袋，是「怕做不好被笑」的面子。把「我不是這塊料」當假設去檢查，允許自己當一天笨蛋，挑件小事今天就開始。想看一個非工程師實際做了什麼，往下接那幾篇實作紀錄。
### FAQ
**Q: 不是理工 / 資訊背景，學得會用 AI 嗎？**
學得會。現在做東西不是靠自己寫程式，是把想做的事用中文講清楚給 AI、由它寫、你來測試跟修。真正考的是「會不會把事講清楚」「卡住肯不肯多問」，這些不是工程師的專利。我自己是全職交易者、非本科，照樣做得出每天在用的工具。
**Q: 年紀大了還學得來嗎？**
來得及。年紀影響的其實不是腦袋，是「怕做不好被笑」的心理——年輕人比較敢亂試，年紀上去後我們容易還沒開始就勸退自己。把這層面子放下、允許自己一開始笨拙，年紀就不再是障礙。學不學得會，跟幾歲關係不大。
**Q: 完全沒有基礎，第一步該做什麼？**
挑一件你每天都在做、步驟固定、做錯也不會出大事的小事，今天就花點時間描述給 AI、讓它幫你做做看。別等「準備好」才開始——準備好不會自己來，是你動手之後才慢慢有的。第一次醜、卡關都正常，那是每個人的第一天。
**Q: 我會的程式趨近於零，這樣也行嗎？**
行。我會的程式也大概只有國中資訊課的程度，還忘光了。重點是把寫程式那雙手交給 AI，你負責講清楚要什麼、跑跑看、告訴它哪裡不對。能力是在一次次動手裡長出來的，不是先學完才開始。
---
## AI workflow 是什麼？和「偶爾用一下 AI」差在哪
> Source: https://www.coolkidlab.com/newbie-pitfalls/what-is-ai-workflow.html
> 「AI workflow」這個詞到處都看得到，但很少有人講清楚它跟「偶爾用一下 AI」差在哪。這篇用一個非工程師的大白話，把這個概念講到國中生也懂：差別在你還在不在那個迴圈裡。
短答給趕時間的人：「用 AI」是你每次都要自己開口問、自己把結果貼來貼去。「AI workflow」是你把一連串步驟設定好一次，之後它自己跑，你只負責看結果。差別不在工具多厲害，在「你還在不在那個迴圈裡親手做每一步」。
「AI workflow」這個詞現在到處都是，但我剛開始的時候，根本搞不懂它跟「我打開 ChatGPT 問問題」差在哪。聽起來很高級，但沒人用人話講清楚。
後來我自己做了幾個之後才懂，這個詞其實很單純。這篇就用我繞了一圈才搞懂的大白話，把它講清楚——順便講為什麼它是「用 AI」之後很自然的下一步。
### 先講「用 AI」：你還在迴圈裡的每一步
大部分人現在的用法是這樣：想到一件事，打開 AI，打字問，等它回答，把答案複製出來，貼到該去的地方。下次再有需要，重來一遍。這就是「用 AI」——它很有用，但每一步都還是你的手在動，AI 只是中間幫你想的那一段。
舉個我自己的例子：我以前每天收盤後要把當天的交易紀錄整理成日誌，一次大概 20 幾分鐘。就算我用 AI 幫我整理，我還是得每天打開、貼資料、下指令、把結果存好。AI 幫了忙，但我還是天天得親自走完整套。
「用 AI」省的是你「想」的時間，但「動手」那部分，還是你每天得自己重來一次。
### 再講「AI workflow」：你走出迴圈，讓它自己跑
AI workflow 就是把上面那一整套——什麼時候做、拿什麼資料、丟給 AI 做什麼、結果送去哪——一次設定好，之後它自己照著跑，不用你每天到場。你從「每天都要走一遍的人」，變成「設定好之後只負責看結果的人」。
我那個每天早上 8 點自動發 Threads 的小機器人就是這樣：我設好一次，之後它每天自己整理、自己發，我早上起來看一眼就好。同一件事，從「我每天親手做」變成「它自己做、我偶爾抽查」。這就是 workflow 跟用 AI 最大的差別。
「用 AI」是你每次都要開口；「AI workflow」是你設定好一次，之後你閉嘴它也會跑。差的就是你還在不在那個迴圈裡。
### 你不用一步到位，從半自動開始就好
聽到「自己會跑」不要被嚇到，以為要很懂技術。實際上你可以從很陽春的半自動開始，慢慢把手動的步驟一個一個交出去：
1. Step 1：先純手動用 AI 做一件事，做到熟，清楚每一步在幹嘛——還搞不清流程就想自動化，一定卡。
2. Step 2：把固定不變的步驟先交出去（例如「每天這個時間、拿這份資料、做這件事」），變數大的步驟先留著自己顧。
3. Step 3：跑順了再慢慢把更多步驟接上去。一次接一段，壞了好抓問題；一次想接全部，壞了你會不知道是哪段爆的。
我做的那些東西——自動發文、幫家裡管行程的小幫手——沒有一個是一開始就全自動的。都是先手動跑熟，再一段一段交出去。AI workflow 不是一個你要先學會的高深技術，是「用 AI」用著用著、自然會想走到的下一步。
### Summary
「用 AI」是你每次都要親手開口問、把結果貼來貼去，每一步都還在你手上。「AI workflow」是你把整套步驟設定好一次，之後它自己跑，你只負責看結果——差別在你還在不在那個迴圈裡。它不是高深技術，是用 AI 用熟之後很自然的下一步。從半自動開始：先手動跑熟、把固定步驟先交出去、跑順了再一段段接上去。想看真實的 workflow 長怎樣，往下接自動發文跟 LINE Bot 那兩篇。
### 名詞解釋
- **AI 工作流（AI workflow）**：把一件事的多個步驟串成「AI 自動跑完」的流程，例如「抓新聞 → 寫摘要 → 排版 → 發文」全自動，人只看結果跟把關。
- **自動化（automation）**：把重複性工作交給程式定時自動執行，例如每天早上自動抓新聞、整理成貼文、發到社群。
- **機器人（bot）**：自動執行特定任務的程式，例如 LINE bot 自動回訊息、發文 bot 每天定時發貼文。
- **ChatGPT**：OpenAI 的對話式 AI。本站常拿它跟 AI 代理對比：ChatGPT 給你答案、你自己動手；AI 代理直接幫你把事做完。
- **LINE Bot**：在 LINE 裡自動回覆、主動推播訊息的機器人。台灣家庭幾乎人人用 LINE，是自動化通知的最佳入口。
### FAQ
**Q: AI workflow 到底是什麼意思？**
白話講：把一連串本來你手動用 AI 做的步驟——什麼時候做、拿什麼資料、做什麼、結果送哪——一次設定好，讓它之後自己跑。你從「每天親手走一遍」變成「設好之後只看結果」。關鍵差別是你還在不在那個親手操作的迴圈裡。
**Q: AI workflow 跟直接用 ChatGPT 差在哪？**
差在「迴圈」。用 ChatGPT 是你每次都要自己打開、打字問、把答案複製貼上，下次再重來。AI workflow 是設定好一次之後它自己跑，你不用每次到場。前者省你「想」的時間，後者連「每天動手」那段也省下來。
**Q: 做 AI workflow 是不是要很懂程式？**
不用。可以從很陽春的半自動開始，把固定不變的步驟先交給 AI、變數大的先自己顧，跑順了再慢慢接更多。我自己是非工程師，做的自動發文、家庭行程小幫手都是這樣一段一段長出來的，不是一開始就全自動。
**Q: 什麼樣的事適合做成 AI workflow？**
每天或每週都會做、步驟固定、做錯也不會出大事的事，最適合。一次性的事不值得設定，每次都要臨場判斷的事先別碰。先挑一件這種小事練手，做出第一個「原來它可以自己跑」的成功經驗，後面才接得下去。
---
## 怎麼問 AI 才會給出好答案？(prompt 是什麼)
> Source: https://www.coolkidlab.com/newbie-pitfalls/how-to-prompt-ai.html
> 同一個 AI，為什麼別人問得到好答案，你問就只拿到一堆空話？問題常常不在 AI，在你給的資訊太少。這篇用大白話講清楚 prompt 是什麼、一個好問題有哪 3 個要素，附一個爛問題改成好問題的真實對照。
短答給趕時間的人：prompt 就是你丟給 AI 的那段話。AI 給的答案很空泛，9 成不是它笨，是你給的資訊太少。它不會讀心，是個放大器——你給的背景越具體，它放大出來的答案越準。把一個好問題拆開，其實只有 3 個要素：背景、目標、限制。
「prompt」這個詞聽起來很專業，其實就是你打給 AI 的那段話、那個問題。如此而已。
但同樣一個 AI，有人用得像神，有人用得像在跟罐頭客服對話。差別不在工具，在那段話怎麼寫。這篇講的就是：怎麼把那段話寫好，讓 AI 真的給你有用的東西。
### 為什麼你問得到空話，別人問得到乾貨
最常見的狀況是這樣：你問「怎麼做 SEO」，AI 給你一份洋洋灑灑的通用清單，看起來很完整，但你不知道哪一條對你最重要，等於沒答。問題不在 AI 不會，在你問的問題太空——它只好給你一個「對所有人都對、對你都不夠」的平均答案。
我自己剛開始也是這樣，問什麼都嫌答案空。後來才懂：AI 不會讀心，它只能根據你給的資訊回答。你給它一句空泛的話，它當然只能還你一段空泛的答案。它是個放大器，不是算命的。
AI 給的答案爛，多半不是它笨，是你給的太少。它不是讀心術，是放大器——你給多少，它放大多少。
### 一個好問題，拆開來只有 3 個東西
把我用得順的問題拆開來看，其實都包含三個東西。不用記名詞，記這三個問自己的問題就好：
1. Step 1 — 背景：我是誰、現在的狀況是什麼？（例：我是非工程師、有一個剛上線的個人網站、全站約 30 篇文章）AI 越知道你的處境，答案越貼你。
2. Step 2 — 目標：我到底想要什麼結果？（例：我想讓陌生人能在 Google 搜到我）講清楚終點，它才不會帶你去別的地方。
3. Step 3 — 限制：有什麼條件或地雷？（例：我沒有預算、不想碰太技術的東西、最多每天花 30 分鐘）給它框框，答案才落地、才是你做得到的。
背景、目標、限制——三個給齊，AI 就從「給平均答案的罐頭客服」變成「針對你情況回答的研究員」。這也是為什麼我常說，把 AI 當研究員問具體問題，比當老師問通用問題有用得多。
### 一個真實對照：爛問題 → 好問題
講概念太虛，直接看一個對照。同一件事，兩種問法：
爛問法：「SEO 怎麼做？」——你會拿到一份通用 checklist，十條都對，但你不知道先做哪條，做完還是不知道下一步。
好問法：「我是非工程師，有一個剛上線一個月、約 30 篇文章的個人網站，想讓陌生人能從 Google 搜到我。我沒有預算、每天最多花 30 分鐘。以我現在的狀況，接下來最該做的 3 件事是什麼，照優先順序排？」——同一個 AI，這次給你的是針對你的、能立刻動手的具體步驟。
別問「怎麼做 X」，問「以我這個狀況，接下來最該做的 3 件事是什麼」。把你的處境塞進去，答案就從通用變成專屬。
### Summary
prompt 就是你丟給 AI 的那段話。它給的答案很空泛，9 成不是它笨，是你給的資訊太少——它是放大器不是讀心術，你給多少它放大多少。一個好問題拆開只有 3 個要素：背景（我是誰、什麼狀況）、目標（想要什麼結果）、限制（有什麼條件地雷）。三個給齊，AI 就從給平均答案的罐頭客服，變成針對你回答的研究員。別問「怎麼做 X」，改問「以我這個狀況最該做的 3 件事是什麼」。想看怎麼讓 AI 從回答你升級成幫你做事，往下接那篇。
### 名詞解釋
- **提示詞（prompt）**：你打給 AI 的那段指令或描述。寫得越具體（要什麼、給誰用、長怎樣），AI 做出來的東西越接近你要的。
- **SEO（搜尋引擎優化）**：讓網站在 Google 搜尋結果排得更前面的一整套方法，涵蓋技術體質、內容品質、連結結構三層。
### FAQ
**Q: prompt 是什麼意思？**
prompt 就是你丟給 AI 的那段話、那個問題或指令，沒有那麼玄。重點不是這個名詞，是那段話寫得好不好——同一個 AI，問得具體就給你乾貨，問得空泛就還你空話。
**Q: 為什麼 AI 給我的答案都很空泛？**
9 成是因為你給的資訊太少。AI 不會讀心，它只能根據你給的東西回答；你問一句空泛的話，它只能給你一個對所有人都對、對你都不夠的平均答案。補上你的背景、目標、限制，答案立刻變具體。
**Q: 一個好問題該包含什麼？**
三個東西：背景（我是誰、現在什麼狀況）、目標（我想要什麼結果）、限制（有什麼條件或地雷，例如沒預算、時間有限）。三個給齊，AI 就能針對你的情況回答，而不是丟一份通用答案。不用背名詞，記得問自己這三件事就好。
**Q: 怎麼讓 AI 給我「針對我」的答案，而不是通用答案？**
把你的處境塞進問題裡。別問「SEO 怎麼做」，改問「我是非工程師、有一個剛上線的網站、沒預算、每天只能花 30 分鐘，接下來最該做的 3 件事是什麼？」。同一個 AI，加了你的背景跟限制，答案就從通用清單變成你做得到的具體步驟。
---
## Claude Code 是什麼？跟 Claude / Cursor / ChatGPT 差在哪 (非工程師看版)
> Source: https://www.coolkidlab.com/newbie-pitfalls/claude-code-what-is.html
> Claude Code 是什麼?用一句話講:它是 Anthropic 出的 AI 命令列工具,會自己讀寫你電腦的檔案、執行指令、串 API,幫你把整套任務做完。跟你打開 Claude.ai 對話、跟用 Cursor 編輯器、跟問 ChatGPT 的差別在「它會自己動手」。這篇用非工程師大白話講 Claude Code 是什麼、跟其他 AI 工具怎麼分、能幫你做什麼。
短答給趕時間的人:Claude Code 是 Anthropic 出的 AI 命令列工具,跟你打開 Claude.ai 對話最大的差別是 — 它會自己讀寫你電腦的檔案、執行指令、串 API,把一整套任務做完不是只給建議。需要 Anthropic Pro 訂閱（US$20/月）。屬於「AI Agent」這類工具,跟 Cursor 編輯器是同類但定位不同,跟 ChatGPT 是不同層級的東西。
「Claude Code」這個詞我第一次聽到的時候,以為就是「Claude 加上能寫程式」,搞不清楚跟我已經在用的 Claude.ai 對話有什麼差。後來自己裝起來跑半年才懂,它跟對話介面其實是兩種完全不同的使用體驗。
這篇用我繞了一圈才搞懂的大白話講清楚:Claude Code 是什麼東西、跟 Claude 對話 / Cursor / ChatGPT 怎麼分、它能幫一個非工程師做什麼。
### Claude Code 是什麼?一句話講完
Claude Code 是 Anthropic（出 Claude 的那家公司）2025 年正式推出的 AI 命令列工具。你裝在自己電腦上,在終端機（Windows 是 PowerShell、Mac 是 Terminal）打 claude 就會進入一個對話介面,你跟它說想做什麼,它會自己讀你電腦的檔案、寫程式、執行指令、串 API,完成整套任務。
重點在那句「它會自己動手」。你跟 ChatGPT 對話,它只會回字給你,你要自己複製貼上、自己改、自己存檔。Claude Code 不一樣 — 你說「幫我把這個資料夾下所有 .txt 檔合併成一個」,它真的會去動手做,完成之後跟你說「好了,我合併成 merged.txt 放在桌面」。
對話 AI 是「給建議」,Claude Code 是「動手做」。差別不是它比較聰明,是它有權限碰你的檔案。
### Claude Code 跟 Claude 對話 / Cursor / ChatGPT 怎麼分?
這 4 個東西最容易搞混,因為名字接近但定位差很多。下面用我自己用過的角度做對照表 — 不是哪個最強,是「哪個適合什麼場景」:
簡單記:對話 AI（Claude.ai / ChatGPT）= 你跟它聊,結果還是你自己動手。AI Agent 工具（Claude Code / Cursor）= 你跟它說想做什麼,它會去動。Claude Code 偏命令列,Cursor 偏編輯器,定位差別大於品牌差別。
選工具不是比品牌,是看「你要它幫你做什麼」。聊天用對話 AI,要動手做事用 AI Agent。
### 非工程師用 Claude Code 能做什麼?(3 個我真實做過的)
我是非工程師,完全不會寫程式。但這半年用 Claude Code 做出 10 個自動化 workflow 跟這整個網站。三個真實案例給你看「非工程師用它能做到什麼」的範圍:
1. 案例 1 — 給自己用的工具:交易日誌 PWA。我每天收盤要記交易,以前用 Excel 20 分鐘,後來叫 Claude Code「幫我做一個能在手機上開、有情緒和盈虧分析的交易日誌」,從零到上線半天搞定。不會程式但能講清楚「我要什麼」,它會做出來。
2. 案例 2 — 自動化:每天 8 點自動發 Threads 的 bot。我設好一次後它每天自己整理、自己發,我只看結果。從寫 Python script 到部署 GitHub Actions 我完全不懂,但跟 Claude Code 講「我要每天 8 點抓 GitHub trending 用我口吻寫繁中介紹發 Threads」,它把整套架起來。
3. 案例 3 — 整個網站:你正在看的這個 Lab。從第一行 HTML 到部署 Vercel 到 SEO 全部優化,都是我跟 Claude Code 一句一句講出來的。我會的是「想清楚我要什麼網站」加上「看到結果不滿意說哪裡要改」,程式碼全部它寫。
範圍大概是:你能講清楚的事,它都能動手做給你。難的不是它的能力,是你能不能想清楚「我到底要什麼」。所以這個工具對非工程師反而有優勢 — 我們不被既有寫法綁住,可以用「使用情境」描述需求。
### Summary
Claude Code 是 Anthropic 出的 AI 命令列工具,你裝在電腦上,在終端機跟它說想做什麼,它會自己讀寫檔案、執行指令、把整套任務做完。跟 Claude.ai 對話最大的差別是「它會動手」不是只給建議,屬於 AI Agent 這類工具,跟 Cursor 編輯器是同類但定位不同(命令列 vs 編輯器框架),跟 ChatGPT 是不同層級的東西(動手 vs 聊天)。非工程師也能用 — 我自己半年做了 10 個自動化 workflow 加上這整個網站。難的不是它的能力,是你想不想得清楚「我要什麼」。想實際裝起來跑,接下來 Windows 安裝那篇有完整指令。
### 名詞解釋
- **Claude Code**：Anthropic 推出的 AI 寫程式工具，裝在自己電腦的終端機裡，能直接讀寫你的檔案、跑指令，把你用中文描述的需求做成真的網站或工具。
- **Cursor**：內建 AI 的程式編輯器，跟 Claude Code 同類，但走「圖形介面編輯器」路線而非終端機路線。
- **ChatGPT**：OpenAI 的對話式 AI。本站常拿它跟 AI 代理對比：ChatGPT 給你答案、你自己動手；AI 代理直接幫你把事做完。
- **命令列（CLI, Command Line Interface）**：用打字指令操作電腦的方式，沒有按鈕跟視窗。Claude Code 就是命令列工具。
- **終端機（terminal）**：「用文字指令操作電腦的視窗」的統稱。Mac 叫 Terminal，Windows 上就是 PowerShell，兩者角色相同。
- **AI 代理（AI agent）**：會「動手做事」的 AI：自己讀檔案、寫程式、跑指令、修錯誤，你只負責描述需求跟監督方向。跟只會「回答問題」的聊天機器人是兩種東西。
- **自動化（automation）**：把重複性工作交給程式定時自動執行，例如每天早上自動抓新聞、整理成貼文、發到社群。
- **API（應用程式介面）**：程式跟程式之間溝通的窗口。例如你的程式透過 LINE 的 API 自動發訊息、透過 Google 的 API 讀試算表。
### FAQ
**Q: Claude Code 是什麼?**
Claude Code 是 Anthropic（出 Claude 的那家公司）2025 年推出的 AI 命令列工具,你裝在自己電腦上,在終端機（Windows 是 PowerShell、Mac 是 Terminal）打 claude 進入對話介面,你跟它說想做什麼,它會自己讀寫檔案、執行指令、串 API,完成整套任務。跟 Claude.ai 對話最大的差別是「它會自己動手」。
**Q: Claude Code 跟 Claude.ai 對話差在哪?**
Claude.ai 對話是你打字、它回字,結果還是你自己複製貼上動手。Claude Code 是命令列工具,它會直接讀寫你電腦的檔案、執行指令、把任務做完。差別不在誰比較聰明,在「它有沒有權限碰你的檔案」。對話用前者,要做事用後者。
**Q: Claude Code 跟 Cursor 差在哪?**
兩個都是 AI Agent 類工具（會自己動手做事的 AI）,但定位不同。Cursor 是「AI 內建在編輯器裡」,主打打字時即時補完加上編輯器內對話,適合已經會寫程式的人。Claude Code 是「AI 直接住在終端機」,沒有編輯器框架,主打跑整套任務（做網站 / 寫 bot / 跑自動化）,非工程師反而比 Cursor 容易上手。
**Q: Claude Code 多少錢?**
需要 Anthropic Pro 訂閱,US$20/月。沒有完全免費版可以用。對比起來,如果你拿它做一個 bot、做一個網站,等於每月省下幾十小時手動操作的時間,對「想用 AI 做事」的非工程師回本很快。
**Q: 非工程師可以用 Claude Code 嗎?**
可以,反而比工程師更有優勢。工程師會被「我習慣這樣寫」綁住,非工程師沒這包袱,直接用「我想要這樣的工具」描述需求,Claude Code 反而做得更好。我自己半年做了 10 個自動化 workflow 加上這整個 Lab 網站,完全不會程式。
---
## AI Agent 是什麼？跟 ChatGPT、workflow 差在哪 (非工程師看版)
> Source: https://www.coolkidlab.com/newbie-pitfalls/what-is-ai-agent.html
> AI Agent 是什麼?一句話講:會自己動手做事的 AI — 例如 Claude Code、Cursor 這類能讀寫檔案、執行指令、串 API 的 AI。跟 ChatGPT 只能對話不同,AI Agent 可以實際幫你寫程式、跑 script、發 API 請求,完成完整任務鏈而不是只給建議。這篇用非工程師大白話講 AI Agent 是什麼、跟 ChatGPT 跟 workflow 怎麼分、能幫你做什麼。
短答給趕時間的人:AI Agent 是「會自己動手做事的 AI」— 例如 Claude Code、Cursor 這類能讀寫你電腦檔案、執行指令、串 API 的 AI。跟 ChatGPT 只能對話不同,AI Agent 可以實際幫你寫程式、跑 script、把整套任務做完。Agent 是執行者,workflow 是你給 Agent 的 SOP — 兩個合起來等於「不用你動手的自動化分身」。
「AI Agent」這個詞從 2024 年底開始紅,2025 年變主流關鍵字。但我去看大部分文章,要嘛太技術（講 LangChain、ReAct framework 那些）、要嘛太雞湯（「AI Agent 將顛覆一切」）。中間「它到底是什麼東西」沒人講清楚。
這篇用我自己用 AI Agent 做出 10 個 workflow 的非工程師視角講:AI Agent 是什麼、跟 ChatGPT 怎麼分、跟 workflow 是什麼關係、它能幫一個不會寫程式的人做什麼。
### AI Agent 是什麼?一句話講完
AI Agent 就是「會自己動手做事的 AI」。ChatGPT、Claude.ai 這類對話 AI 只能回字給你,你要自己把字複製出來、自己改、自己存檔。AI Agent 不一樣 — 它有權限碰你的電腦或某個系統,可以直接讀寫檔案、執行指令、發 API 請求、把整套任務做完。
最直白的比喻:對話 AI 像個只能說話的顧問,跟你討論完還是你自己回家動手。AI Agent 像個會做事的助理,你跟他說「幫我把這份報表整理一下、發給張經理」,他真的去做。
目前非工程師最容易接觸的 AI Agent 是 Claude Code 跟 Cursor。兩個都是 AI Agent 工具,差別在使用介面（Claude Code 是命令列、Cursor 是編輯器）。背後做的事是一樣的 — 讓 AI 真的動手做事而不是只回字。
對話 AI =「給建議」,AI Agent =「動手做」。差別不是聰明程度,是有沒有權限執行真實動作。
### AI Agent 跟 ChatGPT、跟 workflow 怎麼分?
這 3 個詞最容易混。下面用一張對照表把它們講清楚:
順序是這樣:對話 AI 是基礎能力（大腦會想）→ AI Agent 是把這個大腦接上手腳（能動作）→ workflow 是你寫好的 SOP（要動什麼）。一個 AI Agent 可以跑很多不同 workflow,一個 workflow 也可以拆給多個 AI Agent 接力。
AI Agent 是執行者,workflow 是劇本,對話 AI 是大腦。3 個合起來才是完整自動化。
### 非工程師用 AI Agent 能做什麼?(3 個實際範例)
「會自己動手」這件事對非工程師有什麼用?最直接的差別是 — 以前你想自動化一件事,要嘛找付費 SaaS（每月燒錢）、要嘛雇人寫程式（一次幾萬）。AI Agent 出現後,你跟它講需求,它就把整套自動化做好,成本只剩 Claude Pro US$20/月。
1. 案例 1 — 內容自動化:我用 Claude Code 這個 AI Agent 做了「每天 8 點自動發 Threads 的 bot」。整套包含抓 GitHub trending、用我的口吻寫繁中介紹、串 Threads API 發文、處理 token 失效自動續期。我設好一次,跑了半年沒碰過。
2. 案例 2 — 家庭工具:LINE Bot 幫全家管行程。家人在 LINE 一句話「明天 3 點 媽媽 醫院回診」,Claude Code 寫的 parser 自動解析、存資料庫、到點自動推提醒。我家現在每天用,完全不用碰程式。
3. 案例 3 — 內容創作:我用 Claude Code 蓋了你正在看的這個 Lab(網站 + 70 篇文章渲染系統 + SEO 自動化)。從第一行 HTML 到部署 Vercel 到 GEO audit 81/100,完全沒寫一行程式碼,都是跟 AI Agent 一句一句講出來的。
範圍是:你能講清楚的事,AI Agent 都能動手做。難的不是技術,是「想清楚要它做什麼」。所以這波 AI Agent 趨勢對非工程師反而是好消息 — 我們的優勢就是會想需求,不被既有寫法綁。
### Summary
AI Agent 是「會自己動手做事的 AI」— 例如 Claude Code、Cursor 這類能讀寫檔案、執行指令、串 API 的 AI。跟 ChatGPT 對話 AI 最大的差別是「它能執行動作」不只是給建議。3 個概念釐清:對話 AI(會想) → AI Agent(能動) → workflow(SOP)。順序是大腦 → 手腳 → 劇本,3 個合起來才是完整自動化。非工程師也能用 — 我自己用 Claude Code 這個 AI Agent 做了 10 個 workflow + 整個網站,完全沒寫程式。難的不是技術,是想清楚要它做什麼。想看 AI Agent 實際做出來的東西,接下來 Threads 自動發文那篇有整套公開。
### 名詞解釋
- **AI 代理（AI agent）**：會「動手做事」的 AI：自己讀檔案、寫程式、跑指令、修錯誤，你只負責描述需求跟監督方向。跟只會「回答問題」的聊天機器人是兩種東西。
- **Claude Code**：Anthropic 推出的 AI 寫程式工具，裝在自己電腦的終端機裡，能直接讀寫你的檔案、跑指令，把你用中文描述的需求做成真的網站或工具。
- **ChatGPT**：OpenAI 的對話式 AI。本站常拿它跟 AI 代理對比：ChatGPT 給你答案、你自己動手；AI 代理直接幫你把事做完。
- **Cursor**：內建 AI 的程式編輯器，跟 Claude Code 同類，但走「圖形介面編輯器」路線而非終端機路線。
- **API（應用程式介面）**：程式跟程式之間溝通的窗口。例如你的程式透過 LINE 的 API 自動發訊息、透過 Google 的 API 讀試算表。
- **自動化（automation）**：把重複性工作交給程式定時自動執行，例如每天早上自動抓新聞、整理成貼文、發到社群。
- **命令列（CLI, Command Line Interface）**：用打字指令操作電腦的方式，沒有按鈕跟視窗。Claude Code 就是命令列工具。
### FAQ
**Q: AI Agent 是什麼?**
AI Agent 是「會自己動手做事的 AI」— 例如 Claude Code、Cursor 這類能讀寫檔案、執行指令、串 API 的 AI 助手。跟 ChatGPT 只能對話不同,AI Agent 可以實際幫你寫程式、跑 script、發 API 請求,完成完整任務鏈而不是只給建議。對非工程師等於請了一個 24 小時待命的工程師。
**Q: AI Agent 跟 ChatGPT 差在哪?**
差別在「動手」。ChatGPT 是對話 AI,只能回字給你,你要自己複製貼上、自己改、自己存檔,結果動手的還是你。AI Agent 有權限碰你的電腦或某個系統,可以直接讀寫檔案、執行指令、把任務做完。一句話:ChatGPT 是會說話的顧問,AI Agent 是會做事的助理。
**Q: AI Agent 跟 AI workflow 差在哪?**
AI Agent 是執行者(會動手的 AI),workflow 是劇本(你寫好的步驟組合)。AI Agent 是 Claude Code 或 Cursor 這類工具,workflow 是「每天 8 點抓資料、用 AI 寫稿、發 IG」這種 SOP。一個 AI Agent 可以跑很多不同 workflow,一個 workflow 也可以拆給多個 AI Agent 接力。
**Q: 非工程師可以用 AI Agent 嗎?**
可以,而且對非工程師反而有優勢。工程師會被「我習慣這樣寫」綁住,非工程師沒這包袱,直接用「我想要這樣的東西」描述需求。我自己是非工程師,半年用 Claude Code 這個 AI Agent 做了 10 個 workflow 加整個 Lab 網站,完全沒寫程式。難的不是技術,是想清楚要它做什麼。
**Q: 有哪些 AI Agent 適合新手?**
目前對非工程師最友善的兩個是 Claude Code 跟 Cursor,兩個都是 AI Agent 工具。Claude Code 是命令列介面,適合做整套任務(網站、bot、自動化);Cursor 是編輯器內 AI,適合已經會寫程式的人。新手我推薦 Claude Code,因為它不需要懂編輯器 UI,直接用對話描述需求即可。Anthropic Pro US$20/月。
---
## AI Agent vs ChatGPT：差在哪、什麼時候用哪個 (非工程師決策表)
> Source: https://www.coolkidlab.com/newbie-pitfalls/ai-agent-vs-chatgpt.html
> AI Agent 跟 ChatGPT 都是 AI 但定位完全不同。ChatGPT 是「會說話的顧問」幫你想、幫你寫;AI Agent (Claude Code / Cursor) 是「會動手的助理」直接幫你做事、跑自動化。這篇用對照表 + 3 個真實情境告訴你什麼時候用哪個、兩個都用會怎樣、非工程師該從哪個開始。
短答給趕時間的人:ChatGPT 是「對話 AI」幫你想、幫你寫,結果還是你自己動手。AI Agent (Claude Code、Cursor) 是「會自己動手的 AI」幫你做事、跑自動化。兩個不是替代關係,是分工關係 — 動腦用 ChatGPT、動手用 AI Agent、兩個都用才是滿配。非工程師建議先把 ChatGPT 用熟,再學 Claude Code 補上「動手」這塊。
我自己這條路走過:2023 年只用 ChatGPT,用了一年多,覺得「AI 真好用但每次都要自己貼來貼去」。2024 年開始用 Claude Code,才發現原來 AI 可以不用我手動,自己跑整套。
現在兩個都用,沒有取代誰。這篇用我這一年雙工具實戰的視角,把 AI Agent 跟 ChatGPT 的差別講清楚 — 不是哪個強,是「哪個時候該用哪個」。
### AI Agent vs ChatGPT 一張對照表
下面這張表是我自己用了一年才整理出來的。不是規格比拼,是「實際使用情境」對照:
簡單記:ChatGPT 像會說話的顧問 — 你帶問題去,它給你建議,但回家還是你自己動手。AI Agent 像會做事的助理 — 你給它目標跟權限,它直接做完跟你說「好了」。
對照表唯一不是 AI Agent 全贏的地方是「上手難度」跟「純聊天流暢度」。其他都是不同層級的工具。
### 什麼時候用 ChatGPT、什麼時候用 AI Agent?(3 個真實情境)
下面 3 個情境是我這一年雙工具實戰整理出來的決策框架。看哪個情境像你,就用對應工具:
1. 情境 1 — 想資料 / 學新東西 / 寫初稿 → 用 ChatGPT。例如「幫我整理 GEO 跟 SEO 差別」「我這篇文章開頭怎麼寫好」「Python 的 list comprehension 怎麼用」。這種要「對話來回」的任務,ChatGPT 更好用,介面親民、回答快。
2. 情境 2 — 要產出真實檔案 / 跑自動化 / 改整套程式 → 用 AI Agent。例如「幫我做一個交易日誌 PWA 能在手機開」「每天 8 點抓資料發 Threads」「把這個資料夾 100 個 .txt 檔合併成 markdown」。這種要「實際動手做」的任務,Claude Code 把你從手動操作解放。
3. 情境 3 — 兩個都用 (我自己 80% 時間是這個):用 ChatGPT 想策略 / 寫文案初稿 → 把策略和初稿丟給 Claude Code → 讓 Claude Code 把它變成實際的網站、bot 或自動化。Brain (ChatGPT) + Hands (Claude Code) 分工最強。
重點:這兩個不是 OR 是 AND。ChatGPT 用熟就一直用,別棄;Claude Code 補上「動手」這塊,讓 AI 真的幫你做事不是只給建議。
### 非工程師該從哪個開始?
我的建議分情況:
- 還沒用過 AI 的人:先用 ChatGPT(免費版就夠),用 1-2 個月把「怎麼問 AI 才會給好答案」搞熟。基礎沒打好直接學 AI Agent 會卡。
- ChatGPT 用熟、想自動化的人:可以開始學 Claude Code。每月 US$20 訂閱,跟著 Claude Code Windows 安裝那篇走 30 分鐘上手。
- 想做網站 / 做 bot / 跑自動化的人:直接學 Claude Code,別繞 ChatGPT。雖然你會卡在「我不熟 prompt 怎麼問」,但這跟做事直接學會更快。
我自己的歷程:ChatGPT 一年 → Claude Code 半年。回頭看如果重來一次,我會把 ChatGPT 時間縮到 3 個月(基礎夠用就接 Claude Code),不會浪費那麼久在「光問不做」階段。但前提是基礎要打好 — 直接跳 Claude Code 而不會用 ChatGPT 描述需求,會比繞遠路更慢。
### Summary
AI Agent 跟 ChatGPT 都是 AI 但定位完全不同 — ChatGPT 是「會說話的顧問」幫你想 / 寫,結果還是你自己動手;AI Agent (Claude Code / Cursor) 是「會動手的助理」直接幫你做事、跑自動化。兩個不是替代是分工 — 動腦用 ChatGPT、動手用 AI Agent、兩個都用才是滿配。非工程師建議:還沒用過 AI 先用 ChatGPT 把基礎打好,ChatGPT 用熟想自動化再學 Claude Code,想直接做網站/bot 也可以跳過 ChatGPT 直接學 Claude Code(但卡點會多)。我自己 ChatGPT 一年 → Claude Code 半年,現在兩個都用 80% 時間是 brain + hands 分工。
### 名詞解釋
- **ChatGPT**：OpenAI 的對話式 AI。本站常拿它跟 AI 代理對比：ChatGPT 給你答案、你自己動手；AI 代理直接幫你把事做完。
- **AI 代理（AI agent）**：會「動手做事」的 AI：自己讀檔案、寫程式、跑指令、修錯誤，你只負責描述需求跟監督方向。跟只會「回答問題」的聊天機器人是兩種東西。
- **Claude Code**：Anthropic 推出的 AI 寫程式工具，裝在自己電腦的終端機裡，能直接讀寫你的檔案、跑指令，把你用中文描述的需求做成真的網站或工具。
- **自動化（automation）**：把重複性工作交給程式定時自動執行，例如每天早上自動抓新聞、整理成貼文、發到社群。
- **Cursor**：內建 AI 的程式編輯器，跟 Claude Code 同類，但走「圖形介面編輯器」路線而非終端機路線。
- **提示詞（prompt）**：你打給 AI 的那段指令或描述。寫得越具體（要什麼、給誰用、長怎樣），AI 做出來的東西越接近你要的。
- **機器人（bot）**：自動執行特定任務的程式，例如 LINE bot 自動回訊息、發文 bot 每天定時發貼文。
### FAQ
**Q: AI Agent 跟 ChatGPT 差在哪?**
差別在「動手」。ChatGPT 是對話 AI,只能回字給你,你要自己複製貼上、自己改、自己存檔,結果動手的還是你。AI Agent (Claude Code、Cursor) 有權限碰你的電腦,可以直接讀寫檔案、執行指令、把任務做完。一句話:ChatGPT 是會說話的顧問,AI Agent 是會做事的助理。
**Q: 我已經會用 ChatGPT,還需要學 AI Agent 嗎?**
看你想不想自動化。如果你只要「想點子、寫初稿、查資料」,ChatGPT 完全夠用。但如果你想做網站、寫 bot、跑自動化,就需要 AI Agent — 因為這些事 ChatGPT 只能給你建議,你還要自己動手實作。AI Agent (Claude Code) 把「自己動手」這塊也交出去。
**Q: AI Agent 是不是會取代 ChatGPT?**
不會。兩個是不同層級的工具,定位不重疊。ChatGPT 用對話介面強在「跟人聊天 / 問答」,AI Agent 用命令列強在「直接動手做事」。我自己兩個都用,80% 時間是「ChatGPT 想策略 → 丟給 Claude Code 實作」分工。長期看兩個會一直並存,因為使用場景不同。
**Q: 非工程師該先學哪個?**
看你的目標。還沒用過 AI 的人:先用 ChatGPT(免費版),1-2 個月打基礎 → 再學 Claude Code。已經 ChatGPT 熟、想自動化的人:直接學 Claude Code。想做網站 / bot / 自動化的人:可以跳過 ChatGPT 直接學 Claude Code,但會卡在不會問 prompt。我自己經驗:ChatGPT 一年 → Claude Code 半年,如果重來會把 ChatGPT 時間縮到 3 個月。
**Q: Claude Code 跟 Cursor 哪個比較像 ChatGPT 的進階版?**
兩個都不是「ChatGPT 進階版」— 它們是另一種類別的工具(AI Agent)。如果一定要比,Claude Code 介面跟 ChatGPT 對話比較像(都是文字往返),只是它能動手做事。Cursor 是編輯器內 AI,比較像「VSCode + 內建 ChatGPT」,差別是 Cursor 的 AI 可以直接改你的程式碼,適合已經會寫程式的人。非工程師我推薦 Claude Code。
---
## AI Agent 可以做什麼?10 個非工程師真實案例(我用 Claude Code 做的)
> Source: https://www.coolkidlab.com/newbie-pitfalls/ai-agent-can-do-what.html
> AI Agent 可以做什麼?最短答案:你能講清楚的事,它都能動手做。具體看 — 我這個非工程師用 Claude Code 半年做了 10 個,從每天自動發 Threads 的 bot、家族 LINE 行程管家、交易日誌 PWA、4 市場掃描排名、到把網站做給 ChatGPT 看懂的 GEO 系統。整套 stack 加上踩坑全部公開,可照抄。
短答給趕時間的人:AI Agent (例如 Claude Code) 可以做的事範圍是「你能講清楚的事它都能動手做」。具體 5 大類:(1) 內容自動化 (Threads / IG 自動發文 bot) (2) 個人工具 (交易日誌 PWA、行程管家 LINE bot) (3) 跨市場 / 資料掃描 (4) 元-workflow (品牌 / 語氣指紋萃取) (5) 系統整合 (Claude Code 跨對話 checkpoint)。我這個非工程師半年做了 10 個,整套 stack 加上踩坑全公開,可照抄。
「AI Agent 可以做什麼?」這個問題我看過太多文章答得很玄 — 要嘛只給「概念上能做 X / Y / Z」,要嘛只有 1-2 個 demo 案例。沒有人系統性把「一個非工程師用 6 個月可以做出來的東西」一次列清楚。
這篇就是補這個洞。我用 Claude Code 做的 10 個 AI Agent 案例,按使用情境分 5 大類列出來。每個案例都連結到完整 workflow 詳文,有興趣可以直接照抄。
### AI Agent 能做什麼?5 大類分類框架
把我做的 10 個案例歸類後,實際上是 5 種模式 — 不是 10 種完全不同的東西。掌握這 5 類,你就能套到自己的情境:
5 類覆蓋大概 80% 非工程師會做的 AI Agent workflow。你的情境不一定全配,挑 1 類最痛的開始。
5 類不是用來「集滿」,是用來「找到你最該做的那一類」。
### 10 個真實案例(每個都可照抄 整套 stack 與踩坑公開)
下面每個案例我都有完整 workflow 詳文,含 stack 選擇、整套 prompt 模板、撞過的雷。點進去可以直接照抄。
1. 內容自動化 1 — Threads 每天 20:00 自動發文 bot:抓 GitHub trending 用我口吻寫繁中介紹發 Threads,半年穩定。看完整 workflow
2. 內容自動化 2 — IG 新聞自動發文 bot:監測 RSS、兩階 LLM (Haiku 過濾 + Opus 寫稿) 省成本到 1/10、Pillow 自動生圖。看完整 workflow
3. 個人工具 1 — 交易日誌 PWA:單一 HTML 加上 Firebase 同步加上情緒×盈虧分析加上拜財神抽籤。已天天用 4 個月。看完整 workflow
4. 個人工具 2 — 家族行程管家 LINE bot:家人在 LINE 一句話「明天 3 點 媽媽 醫院」bot 自動 parse 加上 cron 提醒。永久免費三件套 FastAPI + Supabase + Render。看完整 workflow
5. 資料掃描 1 — Market Scanner:掃 4 市場 (美股 / 台股 / 加密 / 期貨) 最強標的,三指標加權評分。每天 1 小時手刷盤縮成「打開看排名」。看完整 workflow
6. 資料掃描 2 — GA4 倒推 ChatGPT referral 來源:4 個方法倒推「ChatGPT 從哪個 prompt 引用我」,全免費版。看完整 workflow
7. 元-workflow 1 — Brand profile lockdown:把過去經歷餵 AI 當顧問,3-5 天反覆訪談挖出「哪些個性能變品牌」。看完整 workflow
8. 元-workflow 2 — Voice profile 萃取:從 9 篇舊文用 Claude Code 萃出「語氣指紋」markdown,AI 寫稿立刻像你。看完整 workflow
9. 系統整合 — Claude Code 跨對話 checkpoint 系統:用 .project/ 加上 SessionStart hook 修「每開新對話就忘」,跨 100 加上對話沒再浪費 token 重述。看完整 workflow
10. BONUS — Coolkid AI Lab 整個網站:你正在看的這個 Lab,從第一行 HTML 到部署 Vercel 到 GEO audit 81/100,全部我跟 Claude Code 一句一句講出來的。看完整心路歷程
10 個案例都不是「教學示範」,是我自己每天 / 每週真的在用的東西。每個都公開原理、stack、踩過的雷,非工程師照著抄就能跑。
### 你該從哪個開始?(3 種人推薦)
選擇困難症的話按下面 3 類人的建議:
- 內容創作者:從 Threads bot 開始。設一次跑半年,每天自動曝光,你只出方向。投資報酬率最快看到。
- 有家人 / 朋友想用的痛點:從 family LINE bot 開始。家人實際用了會給你 feedback,迭代動力強。
- 想做自己的工具:從交易日誌 / 個人工具開始。為自己做最容易堅持,因為你每天會打開、不會 abandon。
通用原則:選一個「每天痛」的事 — 不要選「最炫的」。每天痛代表每天有動力用,動力決定你會不會迭代到能用為止。我做的 10 個都是先解自己每天的痛點才動手,沒有一個是「先學技術再想做什麼」。
### Summary
AI Agent 可以做什麼?範圍是「你能講清楚的事它都能動手做」。具體 5 大類:內容自動化 / 個人工具 / 資料掃描 / 元-workflow / 系統整合。我用 Claude Code 半年做了 10 個案例,從每天自動發 Threads 的 bot、家族 LINE 行程管家、交易日誌 PWA、4 市場掃描排名、到把網站做給 ChatGPT 看懂的 GEO 系統,每個都連結到 workflow 詳文可照抄。選擇困難就從「每天痛的事」開始 — 內容創作者選 Threads bot、有家人痛點選 LINE bot、想做自己工具選交易日誌。別選最炫的、選最痛的。想看完整 workflow 圖書館往下接。
### 名詞解釋
- **AI 代理（AI agent）**：會「動手做事」的 AI：自己讀檔案、寫程式、跑指令、修錯誤，你只負責描述需求跟監督方向。跟只會「回答問題」的聊天機器人是兩種東西。
- **機器人（bot）**：自動執行特定任務的程式，例如 LINE bot 自動回訊息、發文 bot 每天定時發貼文。
- **Threads**：Meta 旗下的文字社群平台。本站的社群引流主戰場之一，相關自動發文流程有整篇教學。
- **LINE Bot**：在 LINE 裡自動回覆、主動推播訊息的機器人。台灣家庭幾乎人人用 LINE，是自動化通知的最佳入口。
- **自動化（automation）**：把重複性工作交給程式定時自動執行，例如每天早上自動抓新聞、整理成貼文、發到社群。
- **PWA（漸進式網頁應用）**：讓網頁能「安裝」到手機桌面、像 App 一樣全螢幕開啟的技術，不用上架 App Store。
- **Claude Code**：Anthropic 推出的 AI 寫程式工具，裝在自己電腦的終端機裡，能直接讀寫你的檔案、跑指令，把你用中文描述的需求做成真的網站或工具。
- **排程（cron）**：讓程式「每天 8 點」「每小時」自動執行的定時器。自動發文、定期抓資料都靠它。
- **Render**：雲端程式代管服務，免費方案能跑小型後端程式（例如 LINE bot）。免費版 15 分鐘沒流量會休眠，喚醒要 15-50 秒。
- **Supabase**：免費起步的雲端資料庫服務，提供資料庫＋登入驗證＋API，個人專案很夠用。
- **引薦流量（referral）**：從其他網站的連結點進來的流量。ChatGPT 引用你的內容帶來的點擊就屬於這一類。
### FAQ
**Q: AI Agent 可以做什麼?最短答案?**
AI Agent (例如 Claude Code) 可以做的事範圍是「你能講清楚的事它都能動手做」。具體 5 大類:內容自動化 (Threads / IG bot) / 個人工具 (交易日誌、行程管家) / 資料掃描 (跨市場 / 跨來源) / 元-workflow (品牌 / 語氣指紋萃取) / 系統整合 (補既有工具缺口)。我半年做了 10 個案例,非工程師全可照抄。
**Q: AI Agent 一定要會程式才能做嗎?**
不用。我是非工程師,完全不會寫程式。難的不是「寫 code」是「想清楚要做什麼」 — Claude Code 這類 AI Agent 你用自然語言描述需求它寫程式。10 個案例中沒一個我自己寫過半行 code,但每個我都清楚「我要它做什麼、卡住怎麼debug」。
**Q: 做一個 AI Agent workflow 要多久?**
看複雜度。最簡單的 (Threads bot 從零到上線) 30 分鐘 — 整段 prompt 複製給 Claude Code 它幫你建好骨架。中等的 (交易日誌 PWA) 半天到一天。複雜的 (家族 LINE bot 含 FastAPI + Supabase + Render 部署) 1-2 天。重點不是技術難度,是「想清楚要它做什麼」這段。
**Q: 這 10 個案例都要付月費嗎?**
Claude Code 訂閱必要 (US$20/月)。其他大部分用免費 service:GitHub Actions (Threads bot 排程)、Firebase 免費 tier (交易日誌同步)、Supabase + Render + cron-job.org 三件套永久免費 (LINE bot)、GA4 + GSC + Bing 三件套免費 (referral 倒推)。10 個 workflow 總成本只 Claude Code 月 $20。
**Q: 我做的 case 跟你的不同怎麼辦?**
更好。我列 10 個是要當啟發,不是讓你照抄。看 5 大類分類,套到你自己情境 — 你有什麼每天痛的事?每週重複勞動?家人有什麼需求?選一個改成你的案例。Claude Code 一樣能幫你做,過程一樣可以照本文 stack 選擇 / 踩坑 / 心法。
---
## Claude Code vs ChatGPT：差在哪、什麼時候用哪個 (非工程師看版)
> Source: https://www.coolkidlab.com/newbie-pitfalls/claude-code-vs-chatgpt.html
> Claude Code 跟 ChatGPT 都是 AI 但定位完全不同。ChatGPT 是「對話 AI」聊天問答用瀏覽器;Claude Code 是「AI Agent」會自己讀寫檔案、執行指令、把任務做完,用終端機。這篇用對照表 + 3 個真實情境告訴你什麼時候用哪個、非工程師該從哪個開始。
短答給趕時間的人:Claude Code 跟 ChatGPT 不是同類工具不能直接比強弱。ChatGPT 是「對話 AI」用瀏覽器聊天問答結果你自己動手。Claude Code 是「AI Agent」(會自己動手的 AI),用終端機,它會讀寫你的檔案、執行指令、把整套任務做完。對話用 ChatGPT、做事用 Claude Code。非工程師建議先把 ChatGPT 用熟,再學 Claude Code 補上「動手」。
「Claude Code vs ChatGPT」這個問題我看過很多人問,但答案常常用工程師視角講(「Claude Code 寫程式比較強」「ChatGPT 對話比較自然」)。對非工程師不夠用 — 我們在意的是「我現在用 ChatGPT 用得好好的,要不要學新的?」
這篇用我自己 2023 年 ChatGPT 一年 → 2024 年加上 Claude Code 半年的真實視角講:兩個差在哪、什麼時候該用哪個、兩個都用怎麼配,以及非工程師該從哪個開始。
### Claude Code vs ChatGPT 一張對照表
下面這張表是我自己用了一年多才整理出來。重點不是「哪個強」,是「哪個適合做什麼」:
重點:這兩個不是 OR 是 AND。ChatGPT 不會被 Claude Code 取代,反之亦然 — 兩個解的問題層次不同。我自己 80% 時間是「ChatGPT 想策略 → 丟給 Claude Code 實作」這種分工。
ChatGPT 是會說話的顧問,Claude Code 是會做事的助理。兩個合起來最強。
### 什麼時候用 ChatGPT、什麼時候用 Claude Code?(3 個真實情境)
下面 3 個情境是我這一年多雙工具實戰整理出來的決策框架:
1. 情境 1 — 想資料 / 學新東西 / 寫初稿 / 對話來回 → 用 ChatGPT。例如「幫我整理 GEO 跟 SEO 差別」「我這篇文章開頭怎麼寫好」「Python list comprehension 怎麼用」。這種「要對話來回」的任務 ChatGPT 介面親民、回答快。
2. 情境 2 — 要做實際的檔案 / 跑自動化 / 改整套程式 → 用 Claude Code。例如「幫我做一個交易日誌 PWA 能在手機開」「每天 8 點抓資料發 Threads」「把這 100 個 .txt 合併成 markdown」。這種「實際動手做」的任務 Claude Code 把你從手動操作解放。
3. 情境 3 — 兩個都用 (我自己 80% 時間是這個):用 ChatGPT 想策略 / 寫文案初稿 → 把策略和初稿丟給 Claude Code → 讓 Claude Code 把它變成實際的網站、bot 或自動化。Brain (ChatGPT) + Hands (Claude Code) 分工最強。
重點:這兩個不是 OR 是 AND。ChatGPT 用熟就一直用、別棄;Claude Code 補上「動手」這塊,讓 AI 真的幫你做事不是只給建議。
### 非工程師該從哪個開始?
我的建議分情況:
- 還沒用過 AI 的人:先用 ChatGPT (免費版就夠),用 1-2 個月把「怎麼問 AI 才會給好答案」搞熟。基礎沒打好直接學 Claude Code 會卡。
- ChatGPT 用熟、想自動化的人:可以開始學 Claude Code。每月 US$20 訂閱,跟著 Claude Code Windows 安裝那篇走 30 分鐘上手。
- 想做網站 / bot / 跑自動化的人:直接學 Claude Code 別繞 ChatGPT。雖然你會卡在「不熟 prompt 怎麼問」,但跟做事直接學會更快。
我自己歷程:2023 年 ChatGPT 一年 → 2024 年加 Claude Code 半年。回頭看如果重來會把 ChatGPT 時間縮到 3 個月(基礎夠用就接 Claude Code),不會浪費那麼久在「光問不做」階段。但前提是基礎要打好 — 直接跳 Claude Code 而不會用 ChatGPT 描述需求會比繞遠路更慢。
順序:ChatGPT 基礎 (3 個月) → Claude Code 動手 (持續) → 兩個並用 (長期)。
### Summary
Claude Code 跟 ChatGPT 不是同類工具不能直接比強弱。ChatGPT 是「對話 AI」用瀏覽器聊天問答結果你自己動手;Claude Code 是「AI Agent」用終端機,會自己讀寫檔案、執行指令、把整套任務做完。兩個不是替代是分工 — 動腦用 ChatGPT、動手用 Claude Code、兩個並用最強。非工程師建議:還沒用過 AI 先用 ChatGPT 1-2 個月打基礎 → 想自動化再學 Claude Code → 想直接做網站/bot 可跳過 ChatGPT 直接學 Claude Code (但卡點會多)。想看 Claude Code 安裝實際步驟,接 Windows setup 那篇。
### 名詞解釋
- **Claude Code**：Anthropic 推出的 AI 寫程式工具，裝在自己電腦的終端機裡，能直接讀寫你的檔案、跑指令，把你用中文描述的需求做成真的網站或工具。
- **ChatGPT**：OpenAI 的對話式 AI。本站常拿它跟 AI 代理對比：ChatGPT 給你答案、你自己動手；AI 代理直接幫你把事做完。
- **自動化（automation）**：把重複性工作交給程式定時自動執行，例如每天早上自動抓新聞、整理成貼文、發到社群。
- **終端機（terminal）**：「用文字指令操作電腦的視窗」的統稱。Mac 叫 Terminal，Windows 上就是 PowerShell，兩者角色相同。
- **AI 代理（AI agent）**：會「動手做事」的 AI：自己讀檔案、寫程式、跑指令、修錯誤，你只負責描述需求跟監督方向。跟只會「回答問題」的聊天機器人是兩種東西。
- **Cursor**：內建 AI 的程式編輯器，跟 Claude Code 同類，但走「圖形介面編輯器」路線而非終端機路線。
- **提示詞（prompt）**：你打給 AI 的那段指令或描述。寫得越具體（要什麼、給誰用、長怎樣），AI 做出來的東西越接近你要的。
- **命令列（CLI, Command Line Interface）**：用打字指令操作電腦的方式，沒有按鈕跟視窗。Claude Code 就是命令列工具。
- **機器人（bot）**：自動執行特定任務的程式，例如 LINE bot 自動回訊息、發文 bot 每天定時發貼文。
### FAQ
**Q: Claude Code 跟 ChatGPT 差在哪?**
差在「動手」。ChatGPT 是對話 AI 用瀏覽器聊天,你問它答,結果動手的還是你自己複製貼上。Claude Code 是 AI Agent 用終端機,有權限直接讀寫你電腦的檔案、執行指令、把任務做完。一句話:ChatGPT 是會說話的顧問,Claude Code 是會做事的助理。
**Q: 我已經會用 ChatGPT,還需要學 Claude Code 嗎?**
看你想不想自動化。如果你只要「想點子、寫初稿、查資料」,ChatGPT 夠用。但如果你想做網站、寫 bot、跑自動化,就需要 Claude Code — 這些事 ChatGPT 只能給建議,你還要自己動手實作。Claude Code 把「自己動手」這塊也交出去。
**Q: Claude Code 會取代 ChatGPT 嗎?**
不會。兩個是不同層級工具,定位不重疊。ChatGPT 用對話介面強在「跟人聊天 / 問答」,Claude Code 用命令列強在「直接動手做事」。我自己兩個都用,80% 時間是「ChatGPT 想策略 → 丟給 Claude Code 實作」分工。長期看兩個會一直並存。
**Q: 非工程師該先學哪個?**
看你目標。還沒用過 AI:先用 ChatGPT (免費版) 1-2 個月打基礎 → 再學 Claude Code。已熟 ChatGPT 想自動化:直接學 Claude Code。想做網站 / bot / 自動化:可跳過 ChatGPT 直接學 Claude Code,但會卡在不會問 prompt。我經驗:ChatGPT 一年 → Claude Code 半年,如果重來會把 ChatGPT 時間縮到 3 個月。
**Q: Claude Code 跟 Cursor 比哪個更接近 ChatGPT?**
Claude Code 介面跟 ChatGPT 對話比較像 (都是文字往返),只是它能動手做事。Cursor 是編輯器內 AI,比較像「VSCode + 內建 ChatGPT」,Cursor 的 AI 可以直接改你的程式碼,適合已經會寫程式的人。非工程師我推薦 Claude Code,因為不需要懂編輯器 UI。
---
## Claude Code 新手村:從 0 到第一個網站的完整閱讀路徑 (非工程師看版)
> Source: https://www.coolkidlab.com/newbie-pitfalls/claude-code-guide.html
> Claude Code 新手村聚合頁:8 篇 Claude Code 中文教學依入門順序整理,從「Claude Code 是什麼」「跟 ChatGPT / Cursor 差在哪」到「Windows 安裝實錄」「做第一個網站 step-by-step」「Vercel 部署排錯」。一個非工程師全職交易者用 6 個月走完的路徑,適合誰 / 不適合誰 / 最常踩坑全公開。
短答給趕時間的人:Claude Code 新手村 8 篇按入門順序:(1) Claude Code 是什麼 (2) vs Cursor / vs ChatGPT 對照 (3) Windows 安裝 (4) 第一個網站 step-by-step (5) Vercel 部署排錯 (6) checkpoint 系統。一個非工程師全職交易者用 6 個月走完的路徑,30-60 分鐘可看完 hub,完整跑完約 30 天。
「Claude Code 新手村」這個詞我搜了一下發現中文圈幾乎沒有完整的入門路徑 — 文章散落、看了一篇接著該看哪篇沒人指引。
這篇就是補這個洞。把我寫的 8 篇 Claude Code 文章按「非工程師 0 到 1」的閱讀順序整理成一個 hub,適合誰 / 不適合誰 / 預計要花多久全列清楚。
### Phase 1 — 認知層 (先搞懂這東西是什麼,30 分鐘讀完)
Phase 1 不是要你動手,是先搞懂「Claude Code 是什麼東西、跟你已經在用的工具差在哪」。沒這層直接跳 Phase 2 會卡。
- 📖 Claude Code 是什麼?跟 Claude / Cursor / ChatGPT 差在哪 — 用一句話 + 對照表講清楚這 4 個工具怎麼分。讀完你會知道「為什麼需要 Claude Code」。預計 8 分鐘。
- 📖 Claude Code vs Cursor:一個非工程師為什麼選了 Claude Code — 兩個 AI Agent 工具的選擇對比。網路上比較都是工程師視角(都說新手選 Cursor),這篇補上非工程師視角。預計 10 分鐘。
- 📖 Claude Code vs ChatGPT:差在哪、什麼時候用哪個 — 已經會 ChatGPT 的人讀,知道為什麼要學 Claude Code、兩個怎麼分工。預計 8 分鐘。
### Phase 2 — 安裝與第一個專案 (30-60 分鐘動手)
Phase 2 開始動手。需要 Anthropic Pro 訂閱 (US$20/月),沒裝 Node.js / 不會用 PowerShell 也別擔心,文章都有 step-by-step。
- 📖 Claude Code Windows 安裝踩雷實錄 (2026) — Windows 11 跑半年的非工程師完整 step-by-step。4 步指令 + 3 個 Windows 專屬雷的解法。預計 30 分鐘 (含 debug)。
- 📖 第一次用 AI 做網站:一個非工程師的真實心路歷程 — 第一次跟 Claude Code 合作做一個能上線的工具。30-60 分鐘做出能上線的條件式問答工具 (測驗 / MBTI / 客戶 onboarding 都能套)。
- 📖 Vercel 部署不更新?重寫比修補快的啟示 — 第一次部署到 Vercel 必撞的雷。本地看得到網路看不到怎麼 debug、什麼時候該重寫不該補。預計 20 分鐘讀完,但實戰可能花 1-2 小時 debug。
### Phase 3 — 進階 (用 Claude Code 做 bot / 自動化 / checkpoint 系統)
Phase 3 不是必看,看你想做什麼選讀。3 個方向:做 bot / 做工具 / 解決跨對話失憶。
- 📖 AI Agent 實戰:我用 Claude Code 做了每天自動發 Threads 的 AI 機器人 — Claude Code scheduled-tasks 第一個實戰專案。如果你想做內容自動化從這篇開始。
- 📖 Claude Code 跨對話不失憶:斷點系統 + 兩個 hook + 全專案儀表板 — Claude Code 重度用戶解「每次開新對話就忘」的系統。一次設好跨 100 加上對話不浪費 token 重述。
- 📖 AI Agent 可以做什麼?10 個非工程師真實案例 — 看 10 個我用 Claude Code 做的案例 (Threads bot / IG bot / LINE bot / 交易日誌 / market scanner...),選一個你最想做的當下一步。
### 整套要花多久?(30 天 build-in-public 時程)
如果你跟我一樣是非工程師,以下是合理的 30 天時程估計:
1. Week 1:讀 Phase 1 三篇認知 (3-5 hr 含思考) + 訂閱 Claude Code Pro
2. Week 2:跑 Phase 2 Windows 安裝 + 做第一個網站 (10-15 hr 含 debug)
3. Week 3:部署 Vercel + 解第一波踩坑 + 開始想第二個專案 (10 hr)
4. Week 4:選 Phase 3 一篇實作 (Threads bot / 交易工具 / 任選) (15-25 hr)
30 天結束你應該有:1 個能上線的網站、1 個自動化 workflow、跨對話 checkpoint 系統。這就是「Claude Code 從 0 到能用」的階段成果。之後就是不斷做新專案累積。
### Summary
Claude Code 新手村 8 篇按入門順序分 3 Phase:Phase 1 認知層 3 篇 (是什麼 / vs Cursor / vs ChatGPT) → Phase 2 安裝與第一個專案 3 篇 (Windows 安裝 / 做網站 / Vercel 部署排錯) → Phase 3 進階 3 個方向 (bot / checkpoint / 案例總覽)。一個非工程師全職交易者用 6 個月走完的路徑,合理 30 天時程估計:Week 1 認知 → Week 2 安裝動手 → Week 3 部署解坑 → Week 4 選一個 Phase 3 實作。30 天後你會有 1 個能上線網站加 1 個自動化 workflow加跨對話 checkpoint 系統。
### 名詞解釋
- **Claude Code**：Anthropic 推出的 AI 寫程式工具，裝在自己電腦的終端機裡，能直接讀寫你的檔案、跑指令，把你用中文描述的需求做成真的網站或工具。
- **機器人（bot）**：自動執行特定任務的程式，例如 LINE bot 自動回訊息、發文 bot 每天定時發貼文。
- **部署（deploy）**：把做好的網站或程式「推上線」讓所有人用得到的動作。
- **Vercel**：把網站免費發佈到網路上的服務：接上 GitHub 後，每次推程式碼就自動更新網站，個人專案免費方案就夠用。
- **ChatGPT**：OpenAI 的對話式 AI。本站常拿它跟 AI 代理對比：ChatGPT 給你答案、你自己動手；AI 代理直接幫你把事做完。
- **Cursor**：內建 AI 的程式編輯器，跟 Claude Code 同類，但走「圖形介面編輯器」路線而非終端機路線。
- **自動化（automation）**：把重複性工作交給程式定時自動執行，例如每天早上自動抓新聞、整理成貼文、發到社群。
- **Threads**：Meta 旗下的文字社群平台。本站的社群引流主戰場之一，相關自動發文流程有整篇教學。
- **AI 代理（AI agent）**：會「動手做事」的 AI：自己讀檔案、寫程式、跑指令、修錯誤，你只負責描述需求跟監督方向。跟只會「回答問題」的聊天機器人是兩種東西。
### FAQ
**Q: Claude Code 新手村是什麼?**
Coolkid AI Lab 把 Claude Code 入門 8 篇文章按非工程師閱讀順序整理成的 hub。從「Claude Code 是什麼」到「做第一個網站」到「跑第一個自動化 bot」,分 3 Phase。一個非工程師全職交易者用 6 個月走完的路徑,新手可直接照抄順序讀。
**Q: 我可以跳順序讀嗎?**
可以但不建議。Phase 1 認知層只要 30 分鐘讀完,跳過直接看實作會卡在「不知道為什麼這樣做」。Phase 2 安裝是必跑(沒裝就動不了)。Phase 3 可以選自己想做的方向,不用全部讀。
**Q: Claude Code 一定要付費嗎?**
要。Anthropic Pro US$20/月。沒有完全免費版可以用。對比起來,如果你拿它做一個 bot、做一個網站,等於每月省下幾十小時手動操作的時間,對「想用 AI 做事」的非工程師回本很快。
**Q: 我是 Mac 用戶,這個路徑適合嗎?**
Phase 1 認知 + Phase 2 第一個網站 + Phase 3 全部適用。但 Phase 2 安裝那篇是 Windows 版,Mac 用戶可以略過(Mac 安裝較簡單,brew install 5 分鐘搞定)。其他文章都是 OS 中立。
**Q: 讀完這個 hub 我能做什麼?**
如果 30 天時程跟完,你會有:(1) 1 個能上線的網站 (做給自己 / 家人用) (2) 1 個自動化 workflow (Threads bot / 交易工具任選) (3) Claude Code 跨對話 checkpoint 系統(不再每次重述)。後續就是不斷做新專案累積經驗。
---
## 不會寫程式怎麼用 AI 做網站?2026 非工程師 5 phase 從 0 到上線 (Claude Code 實作)
> Source: https://www.coolkidlab.com/newbie-pitfalls/ai-make-website-guide.html
> 不會寫程式能用 AI 做網站嗎?可以,我是非工程師全職交易者,半年用 Claude Code 從 0 蓋了 1 個 70 篇文章的 SEO 網站加上個人品牌入口加上 10 個自動化 workflow。這篇 5000 字 5 phase 實作路徑:認知層 → 工具選 → 30-60 分鐘上線 → 部署 → 個人品牌應用 → 常見錯誤,走完就有自己的網站。
短答給趕時間的人:完全不會寫程式可以用 AI 做網站。我是非工程師全職交易者,半年用 Claude Code 做了這個 70 篇文章的網站加上個人品牌入口加上 10 個自動化 workflow,沒寫過半行 code。最快路徑:選 Claude Code (US$20/月) → 認知層搞懂 30 分鐘 → 安裝 30 分鐘 → 第一個能上線的網站 30-60 分鐘 → Vercel 部署 10 分鐘。總計第一站約 2-3 小時上線。後續迭代每週 5-10 小時持續長。
「不會寫程式可以做網站嗎?」這個問題我自己問過,但 2024 年之前答案是「可以,但要靠 Wix / Squarespace 鎖在模板裡」。2025 年之後答案變了 — 因為 AI Agent (Claude Code、Cursor 這類) 出現,「會講需求」就能做網站。
這篇是 Route A pillar — 把「非工程師用 AI 做網站」整套路徑一次講清楚。5 個 phase:認知 → 工具選擇 → 30-60 分鐘上線 → 部署 → 個人品牌應用。每個 phase 都連結到完整實作文,可以照抄。
適合誰:完全不會寫程式但想要一個「真的屬於自己、能自由改」的網站。不適合:只想要 link-in-bio 一頁就好 (有專門 1 天搞定那篇)、或想做高流量 SaaS / 電商 (這篇是個人品牌等級)。
### Phase 1 — 認知層:不會寫程式真的能做網站嗎? (5 分鐘讀)
短答:可以。但要先換掉一個錯誤前提:「做網站 = 寫 HTML / CSS / JavaScript」。這個前提在 2024 年之前對,2025 年之後 AI Agent 出現後不成立。
新前提:「做網站 = 想清楚要什麼網站 + 跟 AI Agent 講需求 + 看結果不滿意說哪裡要改」。寫 code 那段完全是 AI Agent 做的,你不用碰。
「會講需求」聽起來模糊,具體是:能講出「我要一個讓家人記行程的網站」、「我要一個能在手機上開的交易日誌」、「我要一個放我所有連結的個人入口頁」這種「使用情境」描述。不是「我要用 React + TypeScript + Tailwind 做網站」那種技術需求。
非工程師反而在這件事上有優勢 — 我們不被既有寫法綁住,可以直接用「我要什麼」描述需求,AI Agent 反而做得更好。工程師很多時候會被「我習慣這樣寫」綁住,跟 AI Agent 溝通反而卡。
做網站的瓶頸從「會不會寫程式」改成「會不會講清楚要什麼」。後者是非工程師可以從第一天就開始練的。
### Phase 2 — 工具選擇:Claude Code / ChatGPT / Cursor / no-code 怎麼選? (10 分鐘讀)
現在(2026)可選的「用 AI 做網站」工具大致 4 類。下面對照表,基於我自己用過的視角:
我推非工程師選 Claude Code 的理由:(1) 不需要懂編輯器 UI,直接對話描述需求 (2) 可以做任意網站不被模板綁 (3) 學會了可以接著做 bot、自動化、其他工具,長期投資回報高。
什麼時候不該選 Claude Code:(a) 你只要一頁 link-in-bio 沒打算迭代 — 用 link.coolkidlab.com / linktree 那種 1 天搞定 (b) 你完全不想碰任何命令列 — Wix 適合你 (c) 你要做高流量電商 — 找 Shopify 或專業團隊。
選工具不是比誰最強,是看你的「用 1-3 年的長期意願」。長期就學 Claude Code,短期一頁就用 no-code。
### Phase 3 — 30-60 分鐘上線第一個網站 (step-by-step)
假設你選了 Claude Code。下面是「從零到網站上線」的完整 step-by-step。預計 2-3 小時 (含 debug)。
1. Step 1 — 訂閱 + 安裝 (30 分鐘)。去 claude.ai 訂閱 Pro (US$20/月) → 安裝 Node.js 18+ (Windows 從 nodejs.org 下載 LTS) → 開 PowerShell 跑 npm install -g @anthropic-ai/claude-code → 打 claude 進入對話介面。詳細 step-by-step 看 Claude Code Windows 安裝踩雷實錄。
2. Step 2 — 想清楚要什麼網站 (10 分鐘)。寫 3 句話描述:(a) 給誰用 (我家人 / 我自己 / 陌生客戶) (b) 解什麼痛點 (記行程 / 看交易日誌 / 接受詢問) (c) 必備功能 3-5 個。例:「我要做給家人填寫的童裝庫存管理頁,手機可開,可新增 / 刪除 / 看清單,不用登入」。
3. Step 3 — 跟 Claude Code 描述 (5 分鐘)。在 PowerShell 把 Step 2 的 3 句話貼給 Claude Code,加一句「請幫我做出來,用單一 HTML 檔,部署到 Vercel」。Claude Code 會問你細節 (顏色 / 版面 / 資料存哪),你照感覺回答即可。
4. Step 4 — 看結果迭代 (30-60 分鐘)。Claude Code 寫出第一版 HTML,你 double-click 用瀏覽器開看效果。哪裡不滿意就跟它說「按鈕太大」「顏色換成藍色」「我要加一個搜尋框」,它會改。改 5-10 輪通常就到能用。
5. Step 5 — 部署到 Vercel (10 分鐘)。詳細看 Phase 4,簡述:去 vercel.com 註冊 → 連 GitHub (或直接 drag 整個資料夾) → 5 分鐘後給你一個 .vercel.app 網址,任何人可開。
第一個網站建議選「給自己用」或「給家人用」的小工具,不要選「給市場用的產品」。理由:給自己用的工具迭代動力強 (每天打開會看到痛點),給市場用的等別人 feedback 才知道哪裡要改,迭代速度慢 10 倍。
我自己第一個網站是給老婆做的童裝庫存管理頁。從零到上線在 Vercel 花了一個下午,但部署那段卡了 3 小時 — 「我自己電腦看得到、網路上完全沒變化」這個玄學問題,新手 100% 會撞到。詳細看 Vercel 部署不更新踩雷實錄。
### Phase 4 — 部署:Vercel / Netlify / GitHub Pages 怎麼選?
做完 HTML 在自己電腦看得到,要怎麼讓陌生人也能開?這就是「部署」。三個免費選項:
我推 Vercel:(1) 設定最簡單 (連 GitHub repo 自動跑) (2) 免費額度大方 (Hobby 無流量上限給個人專案) (3) 自動 HTTPS + CDN 速度快 (4) 自動 preview deployment (你 push 一個 branch 自動給你預覽網址測)。
我自己這個 Lab + link-in-bio 個人入口 + 10 個 workflow 全部部署在 Vercel,完全免費。月流量幾千訪客遠低於 Hobby plan 上限。
部署最常踩的雷 — 「本地看得到、Vercel 看不到」。99% 是 (a) 檔名大小寫不一致 (Vercel Linux 嚴格、Windows 不分) (b) 路徑用反斜線 (Windows) 沒改正斜線 (c) git push 沒成功。詳細解法看 Vercel 部署排錯。
### Phase 5 — 個人品牌應用:從 link-in-bio 到完整網站
做出第一個工具 / 網站後,個人品牌應用有 3 種常見模式 (按複雜度):
1. Level 1 — Link-in-Bio 個人入口(1 天上線):一頁放你所有社群連結 + 簡介。適合 IG / Threads 的「網站」連結。我做的 link.coolkidlab.com 就是這個。詳細看 link-in-bio 個人入口 6 踩坑與 1 天上線方法論。
2. Level 2 — 個人品牌入口站(1-2 週):About 頁 + 作品集 + 聯絡。比 link-in-bio 多敘事跟 SEO 入口。適合自由工作者、創作者。
3. Level 3 — 內容 + 服務型網站(1-3 個月):像這個 Coolkid AI Lab — 多篇文章 + 自動化 SEO + 服務頁 + 訂閱機制。適合想做 build-in-public 或內容創業的人。我做這個 Lab 用 Claude Code 從 0 蓋,目前 70+ 篇文章 + GEO audit 81/100。
選哪個 Level?看你的「3 年內想做什麼」 — 想單純有個網路名片 → Level 1;想做自由工作者展示作品 → Level 2;想做內容 / 教學 / 服務 → Level 3。Level 1 → 3 可以漸進升級,不用一開始就決定。
### 新手最常撞的 5 個坑 (與解法)
- 坑 1 — 想一次到位做完美。第一版永遠不該完美,1.0 上線後讀者 feedback 改 2.0 才有用。解法:每次只追求「比現在好一點」,設 deadline 強制 launch 不完美版。
- 坑 2 — 用 Wix / Squarespace 模板覺得「夠了」。模板鎖死你日後想改的彈性,半年後你會後悔。解法:有預算學 Claude Code 就學,no-code 留給「真的只要 1 頁」的場景。
- 坑 3 — 中文資料夾名稱。Windows 中文路徑被 Big5 / GBK 編碼搞,Claude Code 讀進去檔名變問號。解法:所有跟 AI 對接的資料夾,英文 + 數字 + 連字號命名 (例如 my-website 不要 我的網站)。
- 坑 4 — 部署後本地能開網路看不到。99% 是檔名大小寫 / 路徑符號 / git push 失敗。解法:檢查 git status 確認 push 成功 → 看 Vercel deployment log 找 error → 對檔名大小寫。
- 坑 5 — 光讀文章不動手。看 10 篇教學不如做 1 個能上線的網站。解法:讀完 Phase 1 認知層後別讀第二輪,直接訂 Claude Code 開始 Phase 2。
### Summary
不會寫程式可以用 AI 做網站。我是非工程師全職交易者,半年用 Claude Code 做了 70 篇文章 SEO 網站加 link-in-bio 個人入口加 10 個自動化 workflow,沒寫過半行 code。5 個 phase 完整路徑:Phase 1 認知 (做網站瓶頸從會不會寫程式變成會不會講需求) → Phase 2 工具選擇 (推 Claude Code 因為彈性 + 長期回報) → Phase 3 30-60 分鐘上線第一個網站 (訂閱 + 安裝 + 描述 + 迭代 + 部署 5 step) → Phase 4 部署選 Vercel (Hobby 永久免費) → Phase 5 個人品牌 3 個 Level (link-in-bio / 入口站 / 內容服務站)。最常撞 5 坑:想完美 / 模板鎖死 / 中文路徑 / 部署細節 / 光讀不動手。30 天可從 0 到第一個網站上線。
### 名詞解釋
- **Claude Code**：Anthropic 推出的 AI 寫程式工具，裝在自己電腦的終端機裡，能直接讀寫你的檔案、跑指令，把你用中文描述的需求做成真的網站或工具。
- **部署（deploy）**：把做好的網站或程式「推上線」讓所有人用得到的動作。
- **Vercel**：把網站免費發佈到網路上的服務：接上 GitHub 後，每次推程式碼就自動更新網站，個人專案免費方案就夠用。
- **無程式碼（no-code）**：不寫程式、用拖拉跟設定做出應用的工具或方法。AI 代理出現後，「會描述需求」比「會不會寫程式」更關鍵。
- **GitHub**：放 Git 程式碼的雲端平台，也是全世界開源專案的集散地。程式碼推上去之後可以接自動部署。
- **SEO（搜尋引擎優化）**：讓網站在 Google 搜尋結果排得更前面的一整套方法，涵蓋技術體質、內容品質、連結結構三層。
- **AI 代理（AI agent）**：會「動手做事」的 AI：自己讀檔案、寫程式、跑指令、修錯誤，你只負責描述需求跟監督方向。跟只會「回答問題」的聊天機器人是兩種東西。
- **HTML**：網頁的骨架語言，定義「這是標題、這是段落、這是圖片」。
- **ChatGPT**：OpenAI 的對話式 AI。本站常拿它跟 AI 代理對比：ChatGPT 給你答案、你自己動手；AI 代理直接幫你把事做完。
- **Cursor**：內建 AI 的程式編輯器，跟 Claude Code 同類，但走「圖形介面編輯器」路線而非終端機路線。
### FAQ
**Q: 不會寫程式真的能用 AI 做網站嗎?**
可以。我是非工程師全職交易者,半年用 Claude Code 做了 70 篇文章 SEO 網站加上 10 個 workflow,完全沒寫過程式。瓶頸從「會不會寫 code」變成「會不會講清楚要什麼」 — 後者非工程師反而有優勢,因為不被既有寫法綁住。
**Q: Claude / ChatGPT / Cursor 哪個做網站最好?**
看你目標。Claude Code:做自己網站、長期迭代最強,我推這個 (US$20/月)。Cursor:已會寫程式想加速。ChatGPT:做網頁原型、學概念。如果你只要 1 頁 link-in-bio 沒打算迭代,直接用 linktree 那種 no-code 1 天搞定,別折騰學 Claude Code。
**Q: 用 AI 做網站要多少錢?**
Claude Code Pro US$20/月 = NT$650/月。部署 Vercel Hobby 永久免費 (個人專案無流量上限)。網域名稱年費 US$10-15 (約 NT$300-450) 但可選不買用 .vercel.app 也行。總成本第一年:US$20 × 12 = US$240 (NT$7800)。對比工程師接案 NT$50000+ 起跳,自學 AI Agent 是非工程師最划算的投資。
**Q: 我做的網站只給家人 / 自己用,需要學這套嗎?**
看你願意花多少時間維護。給自己用的工具 (像我做的交易日誌) 反而最適合 — 你每天打開會發現痛點、有動力迭代。給家人用的 LINE bot / 提醒系統也很適合 — 家人實際用了會給你 feedback。如果你只是想體驗一下,先用 ChatGPT 免費版聊聊看 AI 怎麼幫你做網站。
**Q: 我做完網站要怎麼讓人看到?**
兩條路:(1) SEO + GEO — 寫文章被 Google / ChatGPT 引用 (像這個 Lab 的策略),長期但複利。我有完整 SEO Journey 系列 22 篇連載。(2) 社群推 — 在 Threads / IG / X 分享 build-in-public 過程,短期看到反應。我自己兩條都做,SEO 累積長期、社群觸發短期反饋。
**Q: 我做了模板覺得醜,可以叫 AI 改視覺嗎?**
可以。把現在的網站截圖丟給 Claude Code (或 ChatGPT 也行),說「我要改成像 Stripe / Apple / Vercel 那種感覺」。AI 會分析該網站視覺風格 (色彩 / 字體 / 留白 / 動畫) 然後改你的網站。我自己整個 Lab 視覺都是用「丟 Vision 模型參考圖 → Claude Code 實作」這套做的。詳細看 用 AI 兩天大改網站視覺。
---
## Workflows 圖書館 — 完整內容(含可整段複製給 AI agent 的即用 prompt)
## Threads 每天 20:00 自動發文 bot:Claude Code 排程 + GitHub trending 選題 + Graph API 兩段式發文
> Source: https://www.coolkidlab.com/workflows/threads-auto-poster.html
> 用 Claude Code scheduled-tasks 每天 20:00 觸發、先問我今天想看哪個方向、抓 GitHub trending 挑一個用我的口吻寫繁中介紹、Threads Graph API 自動發。完整公開真實流程 + 我撞爛的 Windows CP950 編碼坑 + token 60 天靜默失效修法。
### 卡點:固定策展 GitHub 好物 但每天手挑手寫很耗
### 解法:Claude Code 排程 + 人只出一個「方向」
### AI 在哪幾段做事
### 我 debug 最久的一段:Graph API 兩段式發文 + Windows 編碼坑
### 三條紅線:不塞 slogan、不放聯盟連結、不超過 500 字
### 整段複製給 AI agent — 即用 prompt
把下面整段複製貼給你的 AI agent（Claude Code 或其他 coding agent），它就能照著幫你把這個「每天定時自動發 Threads、但你只出方向」的 bot 建起來，你不用自己從零摸。
```
我要你幫我做一個「半自動的 Threads 發文 bot」，核心是人在迴路：每天定時自動觸發，但發什麼方向由我決定，其餘抓素材、寫文、發文交給你包。我用 Claude Code，作業系統是 Windows，請依這個規格做：
1. 用 Claude Code 的 scheduled-tasks 設一個每天 20:00（時區 Asia/Taipei）觸發的排程。
2. 觸發後第一步不是發文，是用 AskUserQuestion 跳一題問我今天想看哪個方向（例如 AI 代理、CLI 工具、全端後台，或隨意挑 trending 第一名，也要能讓我直接回「今天跳過」）。
3. 我選方向後：「隨意挑」就用 WebFetch 抓 GitHub trending；指定方向就走 GitHub search 按 star 排序抓前 15 個。然後比對我過去 30 天的發文紀錄做去重，不要重複介紹同一個專案，並避開 awesome-list 類清單與明顯刷 star 的專案，挑一個高 star 且最近仍有在維護的。
4. 用我的語氣寫一段繁體中文介紹：第一人稱、整篇最多一個 emoji、句尾不加句號直接換行、控制在 480 字以內。請把這份語氣規則寫死在流程指引檔裡，不要每次重講。
5. 發文用 Threads Graph API，請注意這是兩段式：先建一個 media_type 為 TEXT 的 container，中間 sleep 約兩秒再 publish，不要一步發，否則 container 還沒就緒會發失敗。
6. 請避開我已知的三個雷：第一，Windows 上 Git Bash 的 curl 是原生 build，中文直接塞進命令列會被 CP950 編碼轉成亂碼，所以貼文要先用 Write 寫成 UTF-8 檔，再用 curl 的 --data-urlencode 搭配 @檔案 去讀，並用 cygpath -m 把路徑轉成 curl 讀得懂的格式；第二，長效 token 大約 60 天會靜默失效，請順便排一個每週自動 refresh token 的機制，避免某天 bot 沒報錯卻也沒發；第三，這種「沒報錯但也沒發」最難抓，請在每步加 log 方便我事後對照。
7. 內容守三條紅線：結尾不要加「追蹤我」這類 CTA 或 slogan、文中不放任何聯盟連結或 UTM、整篇不超過 500 字。
請先確認我目前的環境（Claude Code 版本、是否已有 Threads Graph API 權限與 token、發文用哪個帳號）再一步步建，每完成一步就先跟我確認再往下做。
```
把上面整段複製貼給 agent 就好，它會問你細節（像 token、帳號、環境）再實作，你只要回答，卡住時補一下你的環境資訊就行。
### 名詞解釋
- **API（應用程式介面）**：程式跟程式之間溝通的窗口。例如你的程式透過 LINE 的 API 自動發訊息、透過 Google 的 API 讀試算表。
- **Threads**：Meta 旗下的文字社群平台。本站的社群引流主戰場之一，相關自動發文流程有整篇教學。
- **機器人（bot）**：自動執行特定任務的程式，例如 LINE bot 自動回訊息、發文 bot 每天定時發貼文。
- **Claude Code**：Anthropic 推出的 AI 寫程式工具，裝在自己電腦的終端機裡，能直接讀寫你的檔案、跑指令，把你用中文描述的需求做成真的網站或工具。
- **排程（cron）**：讓程式「每天 8 點」「每小時」自動執行的定時器。自動發文、定期抓資料都靠它。
- **API 金鑰（API key）**：服務發給你的一串密碼，程式用它證明「我有權限使用這個服務」。絕對不能公開、不能寫死在程式碼裡。
- **編碼（encoding）**：電腦儲存文字的方式。Windows 中文環境常用 Big5，多數程式假設 UTF-8，兩邊對不上就變亂碼 — 所以資料夾、檔案建議用英文命名。
- **Python**：入門門檻最低的主流程式語言之一，資料處理、自動化、AI 領域的首選。
- **GitHub**：放 Git 程式碼的雲端平台，也是全世界開源專案的集散地。程式碼推上去之後可以接自動部署。
### FAQ
**Q: 這個 bot 真的能取代我每天手動發 Threads 嗎?**
可以,但前提是「你只出方向、AI 包執行」這個架構。完全交給 AI 亂發會崩帳號可信度。我這個是每天跳問題讓你 5 秒選方向,剩下 20 分鐘抓 / 寫 / 發全自動,半年穩定。
**Q: 非工程師可以做嗎?要會什麼?**
可以,但要會「跟 Claude Code 講需求」加上有耐心 debug 一兩天。文章內 prompt 整段可以複製給 AI agent 直接幫你建,不用自己從零摸 Python 跟 Threads API。
**Q: 發 Threads 會被 IG / Meta 鎖帳號嗎?**
Threads Graph API 是官方 API,正常使用不會。但有 rate limit (每天約 250 篇 publish),日發 1 篇遠低於上限。注意「不放聯盟連結 / 不堆 hashtag / 不重複發同一個 repo」這三條紅線守住就 OK。
**Q: 如果想換平台 (X / Bluesky / Threads) 程式碼要重寫嗎?**
選 repo 加上寫文那段都通用,只有發文 API 那段要換。換 X 改 Twitter API、Bluesky 改 AT Protocol,大概 30 分鐘工程。文章內把流程模組化好,API call 是最後一段獨立 function。
---
## AI / 股市新聞 IG 自動發文 bot:事件驅動 + 兩階 LLM(Haiku 評分 → Opus 寫稿)+ Pillow 生圖
> Source: https://www.coolkidlab.com/workflows/ig-news-bot.html
> 監測 AI / 台股 / 美股 RSS,用 Claude Haiku 評重要性、Opus 用我的口吻寫稿、Pillow 生圖、自動發 IG。Windows 工作排程每 30 分鐘事件驅動。完整公開兩階 LLM 省 token 設計 + IG 發圖要圖床公開 URL 的坑 + dry-run 先看再發。
### 卡點:IG 要圖 + 「定時硬發」會發出一堆垃圾
### 解法:六段 pipeline + 兩階 LLM 分工
### 怎麼決定發哪幾則(配額 + 防洗版)
### IG 發圖的真實坑:它只收「公開 URL」不收本機檔
### dry-run + 誠實揭露
### 整段複製給 AI agent — 即用 prompt
把下面整段複製貼給你的 AI agent(Claude Code 或同類),它就能照著幫你把這個「AI / 股市新聞自動發 IG 的事件驅動 bot」一步步建起來,你不用自己從零摸。
```
我要你幫我做一個「AI / 股市新聞自動發 IG」的 bot,設計成事件驅動(每 30 分鐘掃一次,只有夠重要的新聞才發,沒大事就安靜),而不是定時硬發。請用 Python,做成六段 pipeline:collectors(抓 RSS,來源分 AI、台股、美股三類)、importance_scorer(評每則新聞的重要性分數)、dedup(去掉發過的)、writer(寫貼文文案)、image_gen(用 Pillow 生 1080x1080 的圖,放標題、分數、logo)、publisher(發到 IG)。
評分跟寫稿請用兩階 LLM 分工省 token:第一階用便宜的 Claude Haiku 一次掃最多 30 則、幫每則評重要性分數;只有超過閾值的,才交給較貴的 Claude Opus 用我的口吻寫成貼文。便宜模型做篩選、貴模型做精工,不要每則都用最貴的模型硬幹。
選發哪幾則請用程式寫死規則,不要每次臨場判斷:AI 類達閾值的同一次最多發 2 則防洗版,台股、美股各取分數最高的幾則,同類當天已發過就跳過。
請特別避開這幾個我知道的雷:第一,IG Graph API 不吃本機圖檔,它只收一個可公開存取的圖片網址,所以流程一定是 Pillow 本機生圖、先上傳到 imgbb 之類的圖床拿到公開網址、再把那個網址丟給 IG 發,千萬別直接傳本機路徑;第二,Meta 的 token 會過期而且過期後會靜默不發,請幫我排好 token refresh 並在失敗時記錄,不要無聲無息;第三,去重要可靠(例如把發過的 key 記在 jsonl),避免重複發同一則。
請務必做一個 dry-run 模式:照跑抓新聞、評分、寫稿、生圖,但不真的發,圖存到 logs/preview、文案存成草稿檔讓我先看過再開真發。另外每篇貼文結尾自動帶一句說明這是由 AI 自動產出、作為我自己的資訊蒐集與觀點記錄的揭露語,不要假裝是純人工。發文部分只做工具本身,不要在文案裡寫任何買賣結論或操作建議。
排程我預計用 Windows 工作排程每 30 分鐘跑一次。請先確認我目前的環境(作業系統、Python 版本、有沒有 IG 商業帳號跟 Graph API 權限、有沒有 Claude API key、要不要 imgbb key),再一步步建,每完成一步先停下來跟我確認再繼續。
```
把上面整段複製貼給 agent 就好,它會問你環境跟金鑰細節再動手實作,你只要回答、卡住時補上你的設定資訊就行。
### 名詞解釋
- **大型語言模型（LLM, Large Language Model）**：ChatGPT、Claude 這類 AI 背後的技術：讀過海量文字後，學會理解與生成人類語言的模型。
- **排程（cron）**：讓程式「每天 8 點」「每小時」自動執行的定時器。自動發文、定期抓資料都靠它。
- **API（應用程式介面）**：程式跟程式之間溝通的窗口。例如你的程式透過 LINE 的 API 自動發訊息、透過 Google 的 API 讀試算表。
- **API 金鑰（API key）**：服務發給你的一串密碼，程式用它證明「我有權限使用這個服務」。絕對不能公開、不能寫死在程式碼裡。
- **機器人（bot）**：自動執行特定任務的程式，例如 LINE bot 自動回訊息、發文 bot 每天定時發貼文。
### FAQ
**Q: 兩階 LLM 拆分為什麼省錢?**
Claude Haiku 一次 input 約 $0.0008、Opus 約 $0.015 (差 20 倍)。一天 100 則新聞先丟 Haiku 評分過濾掉 90 則,只剩 10 則丟 Opus 寫稿,總成本是「100×Haiku + 10×Opus」遠低於「100×Opus」。月省約 $50-80。
**Q: 一定要用 Pillow 生圖嗎?用 Canva 不行?**
Pillow 是程式自動 render,跑 cron 沒人介入。Canva 要人手動拖,沒法接 workflow。如果你只發少量、可以接受手動,Canva 也行;但這個 workflow 重點是「自動」就用 Pillow。
**Q: dry-run 機制是什麼?**
把整套流程跑完但最後一步「發 IG」改成「寫進 log 加上預覽圖」。我每天 1 次 dry-run 看 AI 寫了什麼、生了什麼圖,確認沒翻車再讓它跑正式版。新手前 2 週建議全 dry-run。
**Q: 發 IG 要 IG 商業帳號嗎?**
要。IG Graph API 只能用商業帳號或創作者帳號 (個人帳號不支援)。免費轉換,但需要綁 Facebook page。如果你 IG 是個人帳號要先去設定切換成商業帳號,5 分鐘搞定。
---
## 家族共享行程提醒 LINE bot:邀請碼加入 + 一句話建行程 + cron 自動提醒(刻意不接 LLM)
> Source: https://www.coolkidlab.com/workflows/family-line-bot.html
> 給家人用的 LINE bot — 邀請碼加入家族、一句話「明天3點 媽媽 醫院回診 提前1小時」就建行程、到點自動 push 提醒相關的人。FastAPI + LINE Messaging API + Supabase。完整講為什麼這種 bot 刻意不接 LLM + cron 提醒怎麼不重複發 + 本機 SQLite 線上 Postgres 同一套 code。
### 卡點:家人的行程各記各的 到點才發現忘了
### 關鍵決策:這種 bot 刻意不接 LLM
### 建行程兩種方式:一句話 或 引導式問答
### 提醒的雷:cron 每分鐘跑 怎麼不重複發
### 本機 SQLite、線上 Postgres,同一套 code
### 整段複製給 AI agent — 即用 prompt
把下面整段複製貼給你的 AI agent,它就能照著幫你把這個「家族共享行程提醒 LINE bot」從零建起來 — 邀請碼加入家族、一句話建行程、到點自動提醒,你不用自己摸。
```
我要你幫我做一個「家族共享行程提醒 LINE bot」,活在家人本來就在用的 LINE 裡,不另外開 app。技術棧請用 Python FastAPI 接 LINE Messaging API 收訊息與 push,資料庫用 Supabase Postgres,但開發階段我要能在本機跑 SQLite、上線跑 Postgres 用同一套程式碼,所以資料層請用 SQLAlchemy 加自訂 TypeDecorator 把 UUID 與 JSONB 在兩邊抹平,migration 用 Alembic 管。
功能我要這些:第一,邀請碼加入家族 — 第一個人建家族當 admin,其他家人輸入邀請碼加入當 member。第二,建行程要兩種方式並存:懶人版用一句話(像是「明天下午三點 媽媽 醫院回診 提前一小時提醒」),請用規則解析出時間、對象、事由、提前量,不要接任何 LLM;新手版用引導式問答,做一個對話狀態機一步步問標題、開始時間、結束、參加的人、提前多久,過程中的草稿存進 conversation_states 表的 JSONB 欄位,中途打「取消」可隨時跳出。第三,提醒用一個 cron job 每分鐘呼叫一次派送端點,撈出提醒時間已過且尚未通知的行程,push 給所有參加的人。
請務必避開這些我已知的雷:cron 派送端點一定要驗 secret header,防外部亂打;每筆行程要有一個 notified 旗標,push 完立刻標成已通知,不然下一分鐘會重複撈到同一筆狂發;就算 push 給其中一個人失敗也不要重試整筆,只記 log,否則已經收到的家人會被重複轟炸;訊息路由請走 keyword 比對加狀態機加一句話解析加 fallback 的順序,刻意不接 LLM,因為指令集很固定、要回應即時又行為可預測,長輩才不會被搞糊塗。
開工前請先確認我的環境:我有沒有 LINE 官方帳號與 channel token、Supabase 專案、Python 版本、本機要不要先用 SQLite 跑通。然後一步一步建,每完成一步就停下來跟我確認再繼續,不要一次全寫完。
```
把上面整段複製貼給 agent 就好,它會先問你 LINE token、Supabase 這些環境細節再動工,你只要回答、卡住時補充環境資訊就行。
### 名詞解釋
- **機器人（bot）**：自動執行特定任務的程式，例如 LINE bot 自動回訊息、發文 bot 每天定時發貼文。
- **大型語言模型（LLM, Large Language Model）**：ChatGPT、Claude 這類 AI 背後的技術：讀過海量文字後，學會理解與生成人類語言的模型。
- **排程（cron）**：讓程式「每天 8 點」「每小時」自動執行的定時器。自動發文、定期抓資料都靠它。
- **API（應用程式介面）**：程式跟程式之間溝通的窗口。例如你的程式透過 LINE 的 API 自動發訊息、透過 Google 的 API 讀試算表。
- **Supabase**：免費起步的雲端資料庫服務，提供資料庫＋登入驗證＋API，個人專案很夠用。
- **LINE Bot**：在 LINE 裡自動回覆、主動推播訊息的機器人。台灣家庭幾乎人人用 LINE，是自動化通知的最佳入口。
- **Render**：雲端程式代管服務，免費方案能跑小型後端程式（例如 LINE bot）。免費版 15 分鐘沒流量會休眠，喚醒要 15-50 秒。
- **Webhook**：「事件發生時，A 服務自動通知 B 服務」的機制。例如有人傳訊息給你的 LINE bot，LINE 就透過 webhook 把訊息轉給你的程式處理。
- **資料庫（database）**：專門儲存、查詢大量資料的系統。網站的會員、留言、紀錄都放這裡。
### FAQ
**Q: 這個 bot 用 LLM 嗎?為什麼說「刻意不接」?**
主流程不接 LLM。家人句子格式很固定 (「明天 3 點 媽媽 醫院」),regex 抓「日期 + 時間 + 人 + 事」就夠,跑 100 次成功率 95%+。LLM 只當 fallback (regex 抓不到才丟給 Claude Haiku)。理由:省 API 費加上避開家人隱私上傳第三方。
**Q: Supabase / Render 免費額度夠嗎?**
夠。Supabase free tier 500MB DB 加上 50K monthly active users,家族 5-10 人遠低於上限。Render free tier 750 hr/month 加上自動 sleep 後 cold start 30 秒,有 cron-job.org 每 14 分鐘 ping 一次保持活著。
**Q: 一定要用 LINE 嗎?Telegram / Discord 不行?**
可以換。FastAPI handler 那段抽掉,換 Telegram Bot API / Discord webhook 即可,parser 加上資料庫加上 cron 三段通用。台灣家人最常用 LINE 所以我做 LINE,換平台約 30 分鐘工程。
**Q: 家人不會用 LINE bot 怎麼辦?**
我家用法是「不解釋,直接示範」 — 我自己在群組打「明天 3 點 媽媽 醫院回診」bot 跳出提醒,家人看 1 次就會用。bot 不要寫指令說明書,要寫個範例觸發後跳第一個成功案例。
---
## 個人交易日誌 PWA:單一 HTML + Firebase 雲端同步 + 把「拜財神」做進工具
> Source: https://www.coolkidlab.com/workflows/trading-journal-pwa.html
> 用 Claude Code 做一個自己每天會打開的交易日誌 — 單一 HTML 檔 + Firebase 登入雲端同步 + Chart.js 統計 + 情緒×盈虧分析 + PWA 裝手機桌面 連盤前拜財神抽籤都做進去。已上線天天用。完整公開為什麼 PWA 不上架 + 我撞過的時區 / Safari 登入坑。
### 卡點:沒有一個交易日誌我每天會打開
### 設計決策 1:PWA 不是 native app(單一 HTML + Firebase)
### 設計決策 2:記「情緒」不只記盈虧
### 為什麼把「祈福」做成打開的第一頁
### 踩過的雷:時區 + Safari 登入
### 整段複製給 AI agent — 即用 prompt
把下面整段複製貼給你的 AI agent(像 Claude Code),它就能照著幫你把這個「每天會打開的交易日誌 PWA」從零建起來,你不用自己摸技術細節。
```
我要你幫我做一個自己每天會打開的個人交易日誌,做成 PWA(網頁加到手機桌面像 app 開,我不要上架 App Store、不想等審核、也不想維護兩套原生程式碼)。請用這套組合:整個 app 就是一個單一 HTML 檔,搭配 Firebase 的 Google 登入、Firestore 雲端同步、Hosting,統計圖表用 Chart.js。資料同步路徑請用 users 底下接 uid 再接 trades 的結構,讓我手機填、電腦看都是同一份,並請用 Firebase 免費方案的設定。每筆交易除了標的跟盈虧,我還要記三件事:當下情緒、有沒有照策略、進場理由(理由要能上傳圖表截圖,但圖片不要存進 Firestore,請改用 Storage 或外部連結存檔)。統計頁用 Chart.js 畫勝率、盈虧比,還有最重要的情緒乘以盈虧的分析圖,讓我看出自己在哪種情緒下的單虧最多;再加一個風控設定,可以設每日跟每週虧損上限,超過就跳警告。app 打開的第一頁不是記帳,是一個祈福頁:財神爺跟土地公照片可切換、三炷香煙霧動畫、點下去參拜、還能抽籤(請做 6 種籤、均等機率,各附一句心態提醒,內容只談心態跟紀律,不要寫任何買賣方向或獲利結論)。PWA 的部分請把 manifest(display 設成 standalone 全螢幕)、service worker、加到主畫面三件套都做齊,iOS Safari 跟 Android Chrome 都要能裝。請務必避開我已知的三個坑:第一,日期不要用 toISOString(),它會把台灣半夜跨日的單記成前一天,請自己寫一個取本地時區日期的函式;第二,Safari 因為 ITP 會擋第三方 cookie,Google 彈窗登入會失效,這個沒辦法繞,請在登入頁加提示引導我改用 Chrome;第三,交易 ID 要考慮新舊格式比對相容,別讓舊資料讀不到。開始前請先確認我的環境(我是不是已有 Firebase 專案、Node 版本、要部署到哪),然後一步步建,每完成一塊就停下來跟我確認再繼續。
```
把上面整段複製貼給你的 agent 就好,它會先問你 Firebase 跟環境的細節再動手做,你只要回答、卡住時把畫面或錯誤訊息補給它就行。
### 名詞解釋
- **PWA（漸進式網頁應用）**：讓網頁能「安裝」到手機桌面、像 App 一樣全螢幕開啟的技術，不用上架 App Store。
- **HTML**：網頁的骨架語言，定義「這是標題、這是段落、這是圖片」。
- **Claude Code**：Anthropic 推出的 AI 寫程式工具，裝在自己電腦的終端機裡，能直接讀寫你的檔案、跑指令，把你用中文描述的需求做成真的網站或工具。
- **部署（deploy）**：把做好的網站或程式「推上線」讓所有人用得到的動作。
- **Vercel**：把網站免費發佈到網路上的服務：接上 GitHub 後，每次推程式碼就自動更新網站，個人專案免費方案就夠用。
### FAQ
**Q: 為什麼用單一 HTML 而不是 React / Next.js?**
三個理由:(1) 單一 HTML 部署最簡單,丟 Vercel 一個 file 就好 (2) 自己用不需要 component reuse 跟 build pipeline (3) 改 UI 直接打開檔案改,不用 dev server。給自己用的工具,簡單勝過漂亮架構。
**Q: Firebase 同步免費額度夠嗎?**
夠。Firestore free tier 50K reads 加上 20K writes 每天,我一天約寫 20 筆讀 100 筆遠低於上限。不過要設好 security rules 限制只能讀寫自己的 data,不然帳號被人爬。
**Q: 為什麼加「盤前拜財神抽籤」?**
這是我刻意做的「情緒錨」。盤前儀式讓我從「打開市場前的焦慮」切換到「執行紀律模式」。功能不大,但每天用、自己會笑、就符合「我每天會打開」的測試。給自己用的工具就該有這種沒人懂只有你懂的東西。
**Q: PWA 跟 app 差在哪?要不要上架 App Store?**
PWA 是把網頁加到手機桌面,跟 app 看起來幾乎一樣但不用上架審核。給自己用完全夠。上架 App Store 要付 $99/年開發者帳號加上過審查,而且我這種「給自己用」的工具完全不需要。
---
## Market Scanner:每天掃美 / 台 / 加密 / 期貨最強標的 — 三指標加權評分自動排名
> Source: https://www.coolkidlab.com/workflows/market-scanner.html
> Python 掃 4 個市場最強標的,評分 = 今日漲幅×0.4 + 突破 60 日新高×0.3 + 量增×0.3,每項先壓到 0~100。config.yaml 可調權重,Windows 排程對應收盤跑,水餃股自動過濾。完整公開評分公式 + 跨市場代碼坑 + 怎麼加自己的市場。
### 卡點:每天手動掃 4 個市場太累 + 判斷會被情緒污染
### 三指標 + 加權公式(為什麼是這三個)
### stack:模組化 sources + csv 輸出
### 排程對應收盤 + 水餃股過濾
### 撞過的雷:yfinance 跨市場代碼
### 整段複製給 AI agent — 即用 prompt
把下面整段貼給你的 AI coding agent(像 Claude Code),它就能照著幫你把這個盤後自動掃市場、三指標加權評分排名的 scanner 從零建起來 — 你不用自己摸架構。
```
我要你幫我用 Python 做一個盤後自動掃市場、幫最強標的打分排名的工具,規格如下,請照著建。
用途:每天收盤後自動掃 4 個市場(美股、台股、加密、期貨),用同一套公式幫各市場標的打分後排名,印出 Top N 並存成 csv,讓我不用每天手動翻清單、也不會被當天情緒影響選股標準。這是個人研究與紀錄工具,只做客觀評分排名,不要產生任何買賣建議或結論。
評分公式(請寫成可讀的函式):三個指標各自先 normalize 壓到 0 到 100 再加權 — 今日漲幅(動能)權重 0.4、收盤對 60 日新高的接近程度(突破)權重 0.3、今日量對 20 日均量的量增權重 0.3。三項相加就是該標的分數。
架構請模組化,不要寫成一支大檔:sources 資料夾各市場一個檔(us、tw、crypto、commodities)管各自的標的池;core 資料夾放 score(評分)、rank(排名)、fetch(抓價)。資料源用免費的 yfinance。一個 config.yaml 集中放三項權重、突破窗天數、均量窗天數、top_n、各市場開關,讓我調策略不用改程式。
輸出:終端印出 Top N 表格,同時存 output 資料夾的 csv,csv 請帶 BOM 讓我用 Excel 直接開不會中文亂碼。
請幫我避開這幾個我知道會踩的雷:一,yfinance 各市場代碼規矩不同 — 台股要加 .TW、加密要加 -USD、期貨要用主力連續合約(例如那斯達克用 NQ=F 這種,不要用 NQH26 這種帶月份的,否則週末抓不到),代碼規則請寫進各自的 sources 檔。二,請過濾掉收盤低於 1 美元的水餃股,否則 0.01 漲到 0.015 就是漲五成會洗榜。三,yfinance 免費源偶爾單一標的抓不到,遇到抓取失敗請跳過那一檔、不要中斷整批掃描。
開始前請先確認我的環境(作業系統、Python 版本、想先做哪幾個市場),然後一步步建、每完成一個檔或一個設定就停下來跟我確認再繼續。
```
把上面整段複製貼給 agent 就好,它會先問你環境跟想掃哪些市場再動工,你只要回答、卡住時補上錯誤訊息或環境資訊就行。
### 名詞解釋
- **API（應用程式介面）**：程式跟程式之間溝通的窗口。例如你的程式透過 LINE 的 API 自動發訊息、透過 Google 的 API 讀試算表。
- **排程（cron）**：讓程式「每天 8 點」「每小時」自動執行的定時器。自動發文、定期抓資料都靠它。
- **Python**：入門門檻最低的主流程式語言之一，資料處理、自動化、AI 領域的首選。
### FAQ
**Q: 為什麼用三指標加權而不是用 AI?**
三指標 (漲幅 / 突破 / 量) 是「可解釋」的訊號,知道為什麼某檔上榜。AI 黑盒子會告訴你「排名 1」但你不知道為什麼,沒法配合自己策略。我用 AI 是寫 code 不是給訊號,訊號邏輯保持透明可調。
**Q: config.yaml 權重怎麼調?**
預設是 0.4 / 0.3 / 0.3,但每個交易者策略不同。動能玩家可調 0.6 漲幅 / 0.2 突破 / 0.2 量;趨勢玩家可調 0.2 / 0.5 / 0.3。先用預設跑 2 週看排名是否貼自己想交易的,再調。
**Q: 加新市場 (例如東京 / 港股) 要怎麼加?**
加 markets 區塊 加上寫 fetch_X.py(用對應市場資料 API 例如 yfinance) 加上對應到 config.yaml weights。核心 scoring engine 不用動,新增市場約 1-2 小時。文章內有 fetch 模組架構可參考。
**Q: 這個會自動下單嗎?**
不會,只給排名 加上評分。我不做自動下單 — (1) 自動下單踩法規線 (台灣不行代客下單) (2) 我自己策略每天看排名後人工判斷進場時機。這個 workflow 是「替你刷盤」不是「替你下單」。
---
## GA4 跳出第一筆 ChatGPT referral!倒推 AI 引用來源的 4 招完整 SOP
> Source: https://www.coolkidlab.com/workflows/ga4-chatgpt-referral.html
> Lab GEO 第一筆 AI 引用實錄。GA4 chatgpt.com referral 倒推來源完整 SOP — GA4 探索報表 / GSC 反向 / Bing Webmaster / 反向 ChatGPT 搜尋 4 招,含 GA4 報表怎麼設 + 免費仔單筆 referral 閾值繞道 + 反向驗證要無痕的雷。全部免費。
### 卡點:GA4 referrer 只顯示 host 沒 prompt
### 4 招總覽
### GA4 探索報表怎麼設 + 免費仔閾值繞道
### 反向用 ChatGPT 驗證:一定要開無痕
### 整段複製給 AI agent — 即用 prompt
把下面整段貼給你的 AI agent,它就能照著幫你把這套「用 GA4 倒推 ChatGPT 引用來源」的追蹤設定建起來,你不用自己從零摸這四招。
```
我要你當我的助手,幫我建立一套「用 GA4 倒推 ChatGPT 引用來源」的追蹤 SOP。我是非工程師,全部用免費工具,請用我聽得懂的白話帶我操作。
背景:我的網站已經接了 GA4,最近在報表看到來自 chatgpt.com 的 referral,但 GA4 只告訴我「來源是 chatgpt.com」,看不到對方在 ChatGPT 問了什麼。我想側面推導出是哪些內容被 AI 引用。
請幫我依序建立這四招:
招一,GA4 探索報表:教我去 GA4 的探索建一張空白報表,維度放「工作階段來源/媒介、到達網頁、事件名稱」,指標放「工作階段、平均參與時間」,篩選設成「工作階段來源/媒介」完全比對 chatgpt.com / referral,讓我看到每一筆 AI 來的訪客落在哪一頁、停多久。
招二,Google Search Console 反向:教我用 site: 加我的網域,搭配曾出現 AI Overviews 的查詢,反推哪些主題容易被引用。
招三,Bing Webmaster Tools:帶我註冊,並用 Import from GSC 把資料匯進去,因為 ChatGPT 搜尋的資料源大半來自 Bing。
招四,反向驗證:幫我設計幾組「不帶我品牌名、像路人會問」的 query,讓我自己用 ChatGPT 的搜尋模式跑,看回答的引用來源有沒有我的網域。
請特別避開這幾個我已知的雷:一,別想辦法去抓使用者的 prompt 或完整網址,那是瀏覽器 Referrer-Policy 的限制,拿不到也繞不過,我們只做側面推導。二,單筆 referral 在 GA4「探索報表」會被隱私閾值擋成「無資料」,遇到這情況請改帶我走「報表 → 客戶開發 → 流量開發」搜 chatgpt 來繞過。三,招四一定要提醒我開無痕視窗,而且不要用帶品牌名的字,否則 ChatGPT 的 memory 會記得我、偏向我的站,結果會失真;也要提醒我連續測幾週看趨勢,單次命中或沒中都不準。
開始前請先問我目前的環境:GA4 是否已正常收資料、有沒有接 Search Console、Bing Webmaster Tools 註冊了沒,確認完再一步步建,每做完一招就停下來跟我確認結果再進下一步。
```
把上面整段複製貼給你的 agent 就好,它會先問你的環境再一招一招帶,你只要回答、卡住時補上看到的畫面或數字就行。
### 名詞解釋
- **GA4（Google Analytics 4）**：Google 的流量分析工具：訪客從哪來、看了什麼、停多久。GSC 管「搜尋結果上的表現」，GA4 管「進站後的行為」。
- **ChatGPT**：OpenAI 的對話式 AI。本站常拿它跟 AI 代理對比：ChatGPT 給你答案、你自己動手；AI 代理直接幫你把事做完。
- **引薦流量（referral）**：從其他網站的連結點進來的流量。ChatGPT 引用你的內容帶來的點擊就屬於這一類。
- **GSC（Google Search Console）**：Google 給網站主的免費後台：看自己網站在搜尋的曝光、點擊、排名跟索引狀態。做 SEO 的人天天開的儀表板。
- **提示詞（prompt）**：你打給 AI 的那段指令或描述。寫得越具體（要什麼、給誰用、長怎樣），AI 做出來的東西越接近你要的。
- **GEO（生成式引擎優化）**：讓 ChatGPT、Perplexity 這類 AI 在回答問題時引用你網站內容的優化方法，是 SEO 在 AI 時代的延伸戰場。
- **爬蟲（crawler）**：自動瀏覽網頁、把內容抓回去的程式。Google 靠爬蟲收錄網頁，AI 公司靠爬蟲收集資料。
- **結構化資料（Schema / JSON-LD）**：用機器看得懂的格式跟搜尋引擎說明「這頁是文章、作者是誰、何時更新」，有機會換到更豐富的搜尋結果外觀。
### FAQ
**Q: GA4 chatgpt.com referral 跟一般 referral 差在哪?**
技術上一樣 (都是 HTTP Referer header)。差在「來源是 AI 對話」這件事改變 GEO 策略 — 你不能像優化 Google search 那樣盯 keyword,要倒推「ChatGPT 為什麼引用我」,通常是 quotable block / FAQPage schema / 數字精確加上來源標註。
**Q: 反向 ChatGPT 用什麼 prompt?**
用「<你的主題> latest research 2026」「<關鍵字> case study with sources」這類會觸發 retrieval 的 prompt。ChatGPT 用 web search 時才會引用,純對話模式不會。文章內有 8 個觸發 prompt 模板。
**Q: Bing Webmaster 為什麼能看到 ClaudeBot / PerplexityBot?**
因為 ClaudeBot (Anthropic 爬蟲) 跟 PerplexityBot 都會被 Bing search index pipeline 看到 — Bing Webmaster crawl stats 可以看到「哪個 bot 抓了哪頁」。Google Search Console 看不到這資料,Bing 反而有。
**Q: 為什麼不用 Plausible / Fathom 之類付費版?**
個人 Lab 流量小、預算為 0,免費 GA4 加上 GSC 加上 Bing 三件套已經能做到 80% attribution 精度。Plausible 月費 $9 適合中大型站,我這流量等級不划算。但隱私第一的 EU 站可考慮 Plausible。
---
## Brand profile 鎖定 workflow:讓 AI 當顧問 從你的背景探討出個人品牌定位
> Source: https://www.coolkidlab.com/workflows/brand-profile-lockdown.html
> 不是叫 AI「給我一個品牌定位」(那只會拿到通用答案)。是把自己的成長經歷餵給 AI、讓它當顧問反問你一串問題、一起探討出哪些個性能變成品牌。完整公開這套「顧問式」方法 + prompt 模板。定位是你自己的 方法可以共用。
### 卡點:發了一堆貼文 還是不知道自己 brand 是什麼
### 為什麼不能直接叫 AI「給我一個品牌定位」
### 解法:先餵背景,讓 AI 當顧問「探討」不是「給答案」
### 探討的目標:個性 pattern → 能變品牌的資產 → 願意長期做的方向
### 心法:定位是私人的,方法可以分享
### 整段複製給 AI agent — 即用 prompt
把下面整段貼給你的 AI agent,它就能照著當你的品牌顧問、陪你一輪一輪把「我是誰、哪些能變品牌」探討清楚,最後幫你鎖出一份 brand profile,你不用自己從零摸。
```
我要你當我的個人品牌顧問,陪我把「我是誰、哪些個性能變成品牌」想清楚,最後一起鎖出一份 brand profile 文件。你不是幫我寫文案的寫手,是逼我講清楚的顧問。
請避開這幾個雷,我踩過:
一、不要直接丟給我一句「你的品牌是真誠專業有溫度」這種通用定位,那種誰都能套等於沒用。我要的是從我的背景長出來、別人記得住也學不走的東西。
二、不要讀完背景就急著給答案。你要先當顧問多問少寫,一輪只問我三到五題,等我答完再追下一輪,把我自己沒意識到的個性、矛盾、反覆出現的行為模式挖出來。
三、我講的個人事實,像經歷、失敗、做過的事、數字,是唯一事實來源,你不要擅自改寫或美化。
四、brand profile 管「我寫什麼、立場是什麼」,跟管「怎麼寫、什麼語氣」的 voice profile 是兩件事,這次只做 brand profile,不要混在一起。
幾輪問答之後,我們再一起整理出三層:第一層是我反覆出現的特質,不是挑優點,是「就是會這樣」的模式,連我的毛病都算;第二層是這些特質裡哪些能變成品牌資產,標準是別人記得住、學不走、跟我這個人綁在一起;第三層是哪些方向是我碰得到又願意長期做的,不是看起來厲害但我會撐不住的。
開始前,請先問我兩件事再動工:一,我想先用哪一個 AI 工具來跑這套對話;二,我準備好要餵給你的背景大概涵蓋哪些,像成長經歷、做過的事、失敗過的事、我在意的東西。確認完再帶我一步步做,每進一輪都先跟我確認方向對不對,別自己一路衝到底。
```
把上面整段複製貼給你的 agent 就好,它會先問你要用哪個 AI、背景準備了哪些,再帶你一輪一輪探討;你只要照著回答、卡住時補一下自己的脈絡就行。
### 名詞解釋
- **Claude Code**：Anthropic 推出的 AI 寫程式工具，裝在自己電腦的終端機裡，能直接讀寫你的檔案、跑指令，把你用中文描述的需求做成真的網站或工具。
- **ChatGPT**：OpenAI 的對話式 AI。本站常拿它跟 AI 代理對比：ChatGPT 給你答案、你自己動手；AI 代理直接幫你把事做完。
- **提示詞（prompt）**：你打給 AI 的那段指令或描述。寫得越具體（要什麼、給誰用、長怎樣），AI 做出來的東西越接近你要的。
- **公開打造（build-in-public）**：一邊做產品一邊公開過程、數據跟踩坑的創作方式。本站的 SEO 連載整個系列就是這個玩法。
### FAQ
**Q: 這個 workflow 跟「叫 ChatGPT 給我品牌定位」差在哪?**
差在「方向」。直接問 ChatGPT 是「AI 告訴你你是誰」,結果是通用答案。這個 workflow 是「你告訴 AI 你做過什麼,AI 反問挖出規律」,結果是你自己生出來的、AI 只是助產士。我自己跑完才懂為什麼直接問沒用。
**Q: 用 Claude Code 而不是 Claude.ai 對話差在哪?**
Claude Code 可以讀我之前丟給它的所有檔案 (過去的貼文、筆記、訪談稿),持續 context 跨越多輪對話。Claude.ai 對話到後面會忘前面的細節。3-5 天訪談需要連貫 context,Claude Code 用 file-based 記憶就贏了。
**Q: 我沒什麼特別經歷可以挖,還能用嗎?**
可以。「特別」是相對的。我訪談前覺得「我就一個賠錢交易者沒什麼好說」,挖出來才發現「賠錢但持續 build-in-public 公開」這個組合就是品牌 — 沒人這樣做。重點不是經歷夠不夠精彩,是「組合」夠不夠少見。
**Q: 最後拿到的 brand profile 怎麼用?**
我把它存成 brand-profile.md,以後寫文章 / 拍影片 / 接受訪談前先讀一遍,確認沒偏離。寫東西 AI 卡住時把這份丟給它當 context — voice 立刻對齊。3-5 天投入換接下來 1-2 年內容方向不偏,划算。
---
## Voice profile 萃取 workflow:從 9 篇樣本抽出自己的語氣指紋給 AI 用
> Source: https://www.coolkidlab.com/workflows/voice-profile-extraction.html
> 用 AI 從 9 篇自己過去發的貼文 萃取出可重複使用的「語氣指紋」(voice profile.md)。免費版講 framework 跟為什麼這比「給 AI 更多 examples」更有用。完整版給我自己抽完當天 ~600 字 voice profile.md 完整檔 + 8 個元素工具箱拆解。
### 卡點:給 AI 5-10 個 examples 還是寫不像我
### 解法:把 voice 變成可被 AI 直接讀的 profile.md
### Voice profile 比 examples 強在哪
### 8 個語氣元素工具箱(不是 checklist)
### 完整萃取 prompt(複製去換成你自己的貼文)
### 抽完怎麼 review + 反指紋怎麼推
### voice profile 怎麼用 + 不讓它飄掉
### 整段複製給 AI agent — 即用 prompt
把下面整段貼給你的 AI agent(Claude Code 或其他),它就能照著幫你把這個「voice profile 語氣指紋萃取」流程建起來,你不用自己從零摸。
```
我要你幫我做一份「語氣指紋(voice profile)」的萃取流程,目標是產出一份大約 600 字的 markdown「規則手冊」,之後我每次寫作都會丟給 AI 當參考,讓它寫出來像我本人,而不是像通用 AI。
請照下面的方式進行:
1. 先要我準備 9 到 15 篇我自己過去寫過的貼文當樣本,並提醒我刻意涵蓋不同情境(吐槽、教學、進度更新、求推薦、情緒),不要只挑同一種。
2. 拿到樣本後,請你逐篇看過、不要急著總結,然後抽出我的「寫作規則」,而不是複述我寫了什麼。抽這 9 個維度:句法、開頭鉤子、結尾收法、用詞、轉折、標點格式、Emoji 習慣、節奏招牌,最後第 9 項是「反指紋」(從樣本反推我永遠不會寫的東西,條列成黑名單)。
3. 每個維度用我貼文裡的真實句子當範例,輸出成一份 markdown,每維度一小節,控制在 600 字內。我要的是規則手冊,不是分析報告。
請幫我避開這幾個我已知會踩的雷:一、最核心是抽「規則」不是抽「主題」,因為主題會變、規則不會;二、樣本只挑同一種情境會抽歪,所以一定要混情境;三、反指紋這項最常被漏掉但最有用,務必認真推導;四、這 8 個正面元素是工具箱不是 checklist,提醒我一篇只挑 2 到 3 個搭配就好,8 個全塞會很油、反而不像本人;五、你抽完後別預設我照單全收,請帶我逐條確認「這是我的習慣,還是那篇剛好這樣寫」,只留下真正的習慣。
最後請你也告訴我:voice profile 管「怎麼寫」、另一份 brand profile 管「寫什麼跟立場」,兩份要分開維護、寫作時一起引用;並建議我每 2 到 3 個月拿最近的貼文回頭 review 一次,讓新招牌能補進來。
開始前先確認我手邊有沒有現成的貼文樣本、平常用哪個 AI 工具,然後一步步帶我走,每完成一步都先跟我確認再進下一步。
```
把上面整段複製貼給 agent 就好,它會先問你拿貼文樣本、再一步步抽,你只要回答它的問題、抽完時逐條確認哪些是你真的習慣就行。
### FAQ
**Q: 為什麼從舊文萃取比直接「我形容自己的 voice」準?**
你形容自己會用「希望我有的特質」(理想的我),AI 抓不到實際句法節奏。從 9 篇真實樣本萃取 AI 看到的是「實際的你」 — 包括你不自覺的句尾用詞、段落節奏、避諱字。準度差很多。
**Q: voice profile 過幾個月會不會過期?**
會。我每 3-6 個月重新跑一次,因為我自己 voice 在變。每次重跑收最近 9 篇樣本 (不用全部歷史),版本控用 voice-profile-v2.md / v3.md,新舊版本對照看 voice 怎麼演化也是有趣資料。
**Q: 一定要 9 篇樣本?可以更少嗎?**
9 是我跑過幾次的甜蜜點。5 篇以下 AI 會 overfit,12 篇以上邊際效益遞減。如果你樣本主題很集中可以 9 篇,跨主題 (例如有商業加上有生活感) 建議 12-15 篇拉開讓 AI 抓共通骨架。
**Q: 可以拿別人的 voice profile 用嗎?**
技術上可以,但意義不大 — voice profile 是「你的」指紋,拿別人的等於變成那個人寫稿。除非你刻意要 mimic (例如練習寫作),不然不該用。我自己 voice profile 沒公開原檔,只公開「萃取 framework」讓你跑自己的。
---
## 讓 Claude Code 跨對話不失憶:斷點系統 + 兩個 hook + 全專案儀表板的完整自建紀錄
> Source: https://www.coolkidlab.com/workflows/claude-code-checkpoint-system.html
> 每開一個新對話 Claude 就忘光上次做到哪。我用 .project/ 斷點檔 + SessionStart hook 強制載入 + UserPromptSubmit 注入即時時間 + 一個掃描全專案的儀表板,把「跨對話失憶」修掉。附一段可整段複製給 AI agent、直接幫你建好整套的 prompt。
### 想解決的痛點:跨對話失憶 + 多專案狀態散落
### 這個 workflow 在做什麼:四層疊起來,核心是「讀強制、寫柔性」
### 狀態層怎麼切 + 半成品保護 + 我撞最久的三個坑
### 整段複製給 AI agent — 即用 prompt
這篇不只是紀錄。把下面整段複製貼給你的 AI agent(Claude Code 最直接),它就能照著幫你把同一套斷點系統建在你的專案上,你不用自己重走一晚。
```
我要你幫我在這個專案建一套「跨對話斷點系統」,讓你(Claude Code)每次開新對話都能接續上次進度,不要每次失憶。請依這個規格,先看過我的專案結構再一層一層建:
1. 狀態層:在專案根目錄建一個 .project/ 資料夾,放三個檔。current.yaml 是精簡斷點、控制在 30 行內,欄位包含 phase、last_updated、safe_to_continue、needs_human、next_task、next_input、open_issues。current.full.md 放長脈絡(架構、踩過的雷、外部依賴),按需才讀。decisions.yaml 是只增不改的決策日誌,每條有 id、date、decision、rationale、status,決策演變時用新條目標 supersedes 舊的、永遠不要覆寫舊條目。
2. 載入層:設一個 SessionStart hook,每次開對話自動把 current.yaml 印出來注入 context;如果 safe_to_continue 是 false,就先警告我上次有未完成的工作、問我要繼續還是回滾,不要悶頭往下做;沒有 .project/ 的專案要安靜跳過、不要報錯。
3. 時間層:設一個 UserPromptSubmit hook,每則訊息前注入一行當下精確時間(年月日時分秒加星期)。請用純 ASCII 輸出、只留 UTC 偏移(像 UTC+08:00),不要印本地化的時區名稱,否則在 Windows 上會被 cp950 編碼轉成亂碼。
4. 設計原則請守住「讀強制、寫柔性」:載入斷點走 hook 強制執行(零成本又不能漏),寫回斷點只用柔性提醒(不要用 hook 強制擋我、會很煩)。
請避開我已知的坑:不要依賴 jq 之類我可能沒裝的工具,能用內建或 Python 就好;解析多行 YAML 折疊語法要讀到下一個 key 為止。請先確認我的作業系統跟專案結構,再一步步建,每建一層就停下來跟我確認再繼續。
```
把上面整段複製貼給 agent 就好。它會先看你的專案結構、問你用什麼作業系統,再一層一層幫你建,每層跟你確認。你要做的只是回答 + 在它卡住時補環境資訊。
### 名詞解釋
- **Claude Code**：Anthropic 推出的 AI 寫程式工具，裝在自己電腦的終端機裡，能直接讀寫你的檔案、跑指令，把你用中文描述的需求做成真的網站或工具。
- **提示詞（prompt）**：你打給 AI 的那段指令或描述。寫得越具體（要什麼、給誰用、長怎樣），AI 做出來的東西越接近你要的。
- **AI 代理（AI agent）**：會「動手做事」的 AI：自己讀檔案、寫程式、跑指令、修錯誤，你只負責描述需求跟監督方向。跟只會「回答問題」的聊天機器人是兩種東西。
### FAQ
**Q: Claude Code hooks 是什麼?**
Hooks 是 Claude Code 在特定事件觸發時自動執行的 shell command。SessionStart hook 在每次開新對話時跑,可以注入「上次做到哪」的 context;UserPromptSubmit hook 在每次 user 送訊息前跑,可以注入即時資訊 (時間 / git status)。設定在 ~/.claude/settings.json。
**Q: .project/ 斷點檔該寫什麼?**
我寫:current.yaml (現在做什麼 phase / 上次做到哪 / 下一步)、decisions.md (重大決策記錄,append-only)、roadmap.md (整體路線圖)。原則是「下一個 session 的我看了能 1 分鐘進入狀態」,不是「完整日誌」。
**Q: 為什麼不用 Claude Projects 內建記憶?**
Claude Projects 有 context window 上限,大專案 (例如這個 Lab) 跨幾百個 chat 一定塞爆。.project/ 用 file-based,只在需要時讀進來,沒上限。但 Claude Projects 自動同步比較方便,小專案用它即可。
**Q: 整套要花多久建?**
用本文整段 prompt 複製給 Claude Code,它幫你建好骨架約 30 分鐘。但「養成寫斷點檔的習慣」要 1-2 週 — 一開始會忘記寫,過幾次「下次開新對話想不起來」就學乖了。
---