Claude Bootcamp

Claude 實戰訓練營
12 週上課紀錄

課程一句話：不寫程式的人，用 12 週把一個解決自己真實困擾的網頁工具從想法做到上線，並在 Demo Day 發表。方法論是 VIBE Coding，用意圖引導 AI，不是背語法。我是這堂課的講師，這頁是我以講師身份逐週記錄的上課內容，從 W1 一路記到 W12 Demo Day。

2026.07.18 開課·XLab AI 實驗室·每週 3 小時·實體＋線上混成班·12 / 12 週已記錄

實體教室：投影幕上是「差一句角色設定，回答天差地遠」的對照示範

線上同步：Google Meet 直播上半場簡報，線上學員即時跟課

12 週在做什麼

W1Chat

Chat 基礎與專案啟動

W2Chat

用 AI 產出產品規劃（PRD）

W3Cowork＋Design

建專屬知識庫與產品視覺框架

W4Claude Code

Vibe Coding 與第一個檔案

W5Claude Code

工程師術語與電腦小工具

W6Claude Code

值不值得做下去 × 四層設定

W7Chrome＋Skills

作業檢討 × 讓它自己開瀏覽器

W8Supabase＋綠界

接後端、登入與金流

W9Code＋Chrome

第二版要加什麼 × 只先做一個

W10API＋OpenRouter

接外面的資料 × 加一顆 AI 按鈕

W11Hook＋Plugin

demo 網址 × 先問清楚再動手

W12Demo Day

成果發表 × 五個 AI 作品點評

逐週紀錄

選一週看，或一次看全部

W122026.10.03

成果發表日

學員上台展示 12 週做出來的作品。

上半場：學員上台展示

展示分四段講

解決什麼問題、示範功能、卡最久的地方、下一步。

看作品看五件事

第一眼、主要功能、沒資料時、像不像 AI 做的、小細節。

網路上的成果發表會

國外工程師論壇的作品專區，留言很直接。

下半場：看五個網友用 AI 做的作品

小遊戲：手感要自己玩

畫面 AI 做得出來，好不好玩要人玩過才知道。

棒球轉播：沒比賽也有東西看

沒比賽時放一場重播，首頁才不會空空的。

謎題網站：外觀要改過

作者說前兩版太像 AI 做的，改到第三版。

數學題網站：一句話講清楚

使用者看不懂要點哪裡，加一行說明就好。

電車音樂網站：先畫好再做

作者先自己畫好畫面，再交給 AI 寫程式。

五個作品的共同點

缺的那一塊，都要人自己補。

看本週完整紀錄+

W122026.10.03

Demo Day：十二週做出來的東西上台

最後一堂分兩段：第一段每組上台現場操作自己的作品，用同一個四段架構講完；第二段我拿 Show HN 上五個用 AI 做的公開作品，一個一個點開評，用同一套四步看：第一眼、核心功能、留言區別人卡在哪、換我會怎麼改。五個作品各自對應一件 AI 做不到、要人自己補的事。

DEMO

每組 Demo 分四段講

四段架構

每組上台時間有限，所以四段講完就下台：一句話講它幫誰解決什麼問題；把最重要的功能點給大家看、完整走一輪；講卡最久的地方，怎麼跟 Claude 一起解掉；最後講下一步還想加什麼。W11 用 hook 自動記下的 prompts.md，就是第三段的素材。

一組 Demo 的四段

1 一句話它幫誰解決什麼問題

2 點給大家看最重要的功能完整走一輪

3 卡最久的地方怎麼跟 Claude 一起解掉

4 下一步還想加什麼

看作品的五件事

看別人的作品，也看自己的：第一眼三秒內知不知道要做什麼；最重要的那件事好不好用；沒資料的時候有沒有東西看；是不是 AI 預設的長相；按鈕、音量這些小地方。下半場五個作品剛好各示範一件。

五個角度，各對一個作品

第一眼Lathoa 首頁看不懂要點哪

核心功能Super Dario 的手感

範例資料Ribbie 沒比賽也能看 demo

AI 味Puzzle Lair 的報紙風

細節Yamanote 的換站按鈕

Show HN 是線上的 Demo Day

Hacker News 是 Y Combinator 經營的英文工程師論壇，Show 專區的標題固定用「Show HN:」開頭，只能發自己做的、別人點得到的東西，讚多的排前面，留言常常很直接。好的貼文會讓作者自己寫怎麼做的：Ribbie 那篇 260 分、140 則留言，作者還先講了自己的弱點「沒比賽時網站很空」。今天這五個都是作者自己說用了 Claude、Codex 或 Opus 做的，免登入就能點。

SHOW HN

Show HN 上五個 AI 作品點評

Super Dario：手感要自己玩過

嘲諷 AI 公司的橫向捲軸小遊戲，主角是 AI 公司老闆，吃金幣估值往上跳，敵人是其他 AI 公司的老闆，路邊立牌寫「本週」最強模型這類 AI 圈的梗。作者說主要是 Opus 做的。打開就能玩，跑、跳、吃金幣都正常；留言區罵的是碰撞判定差、物理怪。畫面 AI 做得出來，好不好玩要人自己玩過才知道；我的改法是自己玩十次，把卡手的地方一條一條丟給 Claude 改。

Ribbie：沒資料的時候也有東西看

把 MLB 即時比賽資料畫成 8-bit 像素動畫的棒球轉播，作者說大量用 Claude 和 Codex。今天沒比賽，首頁寫 NO BALL TODAY，放一場真實比賽的重播當 demo，右邊老實寫現在沒有直播。留言說美術一看就是 AI 像素圖、手機上字太小；手機直拿只叫你轉橫，完全不能看。我會讓手機直拿至少給比分加文字轉播。

Puzzle Lair：AI 給的第一版長相要改

沒廣告的邏輯謎題站，數獨等 16 種謎題每天一題，作者是工程師，一半的像素圖用 Fable 5 畫。報紙風首頁一顆「Play today's puzzle」，免登入就能玩，計時、鉛筆、檢查都有。留言有人說 Claude 會做的網站就二三十種，這種報紙風是其中一種；作者自己說首頁改到第 3 版，前兩版太像 AI 做的。另一個問題是斜線也要填滿 1 到 9 的規則藏在 Rules 按鈕裡，有人漏看以為題目出錯，我會把規則放在題目上方。

Lathoa：一句話講清楚要做什麼

機器人解數學題時故意算錯，讓小孩找出錯的那一步，作者說靠 Claude 幫了很多忙。我點第 1 步，它回「Not that one. Look closer.」；點第 2 步才對，錯在把 90 分鐘當成 0.90 小時。留言有人抱怨第 1 步明明是對的卻被判錯，其實程式沒算錯，是使用者以為要選對的那一步。題目卡上方加一行「找出錯的那一步」就解決了。

Yamanote：先想好畫面，再叫 AI 做

東京山手線 30 站的發車音樂跟廣播，站名、站號、播放鍵很乾淨，播音樂、換站、內外環切換都順。按鈕左右擺、箭頭卻是上下，留言說很容易搞混，還有人嫌音樂太大聲；手機版只剩分享、播放、選單，沒有換站按鈕。作者先叫 Claude Design 做，效果不好，才改成自己用 Figma 畫好再給 Claude Code。

五個作品的重點

五個作品各自缺的那一塊，都要人自己補，AI 不會主動做。結業那天每一組的作品，也可以拿這五條自己再檢查一次。

看到什麼 → 重點

Super Dario能玩，但手感被留言罵 → 手感要自己玩過

Ribbie沒比賽也有 demo 可看 → 沒資料的時候也有東西看

Puzzle Lair首頁被說像 AI 做的 → AI 給的第一版長相要改

Lathoa使用者以為要選對的那步 → 一句話講清楚要做什麼

Yamanote先用 Figma 設計再做 → 先想好畫面，再叫 AI 做

W112026.09.26

把作品變成點了就能看的網址

再教兩個讓 AI 照規矩做事的方法。

上半場：交出點了就能看的網址

交一個點了就能看的網址

網址打開就要看到作品畫面，放程式碼的 GitHub 頁面不算。

兩句話做出展示版

需要後台的地方先用假資料，密碼一個都不能放。

技能和自動規則差在哪

技能要 AI 想到才用，自動規則時間到一定會跑。

自動規則在固定時間觸發

開新對話、你送出、它動手前後、它做完。

一句話加一條自動規則

例如每次開工，先告訴它今天日期和上次做到哪。

外掛是打包好的一整組

技能、規則、外部連線包在一起，一行指令裝好。

裝外掛前看三件事

誰做的、裡面有什麼、會不會佔太多空間。

Cowork 搬進對話視窗

在 Claude 對話裡切換，就能讓它做文件和簡報。

下半場：讓 AI 先問清楚再動手

一句需求背後有幾百個決定

你沒講的，AI 都會自己猜。

五個步驟管住 AI 的壞習慣

先問清楚、寫規格、拆任務、先寫測試、再檢查。

兩套工具挑一套

功能大多重疊，一起裝會打架。

AI 先查現況再問你

我想加歷史紀錄，它先發現資料表早就建好了。

它給選項，你做決定

每題附建議答案，最後由你拍板。

用便宜的 AI 先篩新聞

41 則新聞先擋掉 31 則，貴的 AI 只看剩下的 10 則。

判斷標準要寫具體

只改說明文字，判斷準確率從 62% 升到 86%。

看本週完整紀錄+

W112026.09.26

Hook 與 Plugin 怎麼用，以及讓 AI 先問清楚再動手

Demo Day 前最後一堂課，作業是一個打得開的 demo 網址，不是 GitHub 的 repo 網址。上半場講兩種把規則固定下來的方法：Hook 是時間到一定會跑的指令，Plugin 是把 skill、hook、MCP 打包好一行裝完；下半場拆兩支我自己在用的：mattpocock-skills 的 /grill-me 叫 AI 動手前先反過來問你，Jev 不寫字只回機率，我拿它篩電子報的新聞。

HOOK

交 demo 網址與設定 Hook 自動規則

GitHub repo 和 GitHub Pages 網址的差別

同一個專案有兩個網址。github.com 開頭的是 repo，點進去是一堆程式檔，評審要自己下載才看得到作品；github.io 開頭的是 GitHub Pages，點下去就是作品。我拿自己的夜影傭兵團網頁版示範：左邊是 index.html、index.wasm 一排檔案，右邊打開就是遊戲載入畫面。大家都有左邊，右邊要另外開。

用兩句話做出 demo 版

GitHub Pages 只放得了前端：server.mjs 跑不起來，金鑰也不能放。所以第一句叫它做一份純前端的展示版，需要後端的地方先用假資料，放在 docs/ 資料夾，原本的檔案不動，先列計畫我同意再做；第二句掃一遍確認沒有金鑰跟後端網址，再推上去。需要後端真的跑起來的，就上 Zeabur。

依序貼進 Claude Code

我要交 demo 網址。幫我把這個專案做成可以放上 GitHub Pages 的展示版：
只要前端，需要後端的地方先用假資料，金鑰一個都不能出現。
做在 docs/ 資料夾，原本的檔案不要動。先列出你打算怎麼改，我同意再做。

掃一遍 docs/，確認沒有任何金鑰或後端網址，
.env 有在 .gitignore 裡，然後 commit 並 push。

Skill 和 Hook 的差別在誰來執行

Skill 是一份說明書，Claude 讀完照著做，它判斷用得到或你打 /名字才會用，所以會漏，但能看情況調整，讀進去也吃 context。Hook 是一行指令，由 Claude Code 程式在固定時間點直接跑，時間到一定跑、每次做一樣的事，幾乎不吃 context。要判斷的放 Skill，例如提案格式、配標題的五種切法；不能漏的放 Hook，例如通知、記錄、自動打開。

五個最常用的時間點

SessionStart 是開新對話，可以先塞進最近的 git 紀錄；UserPromptSubmit 是你按下 Enter，可以檢查貼的東西有沒有金鑰；PreToolUse 是它動手之前，能擋掉危險指令；PostToolUse 是它動手之後，改完自動排版、自動檢查；Stop 是它說做完了，發通知或再審一次。腳本結束時回 exit 2 就是擋下，寫在錯誤輸出的那句話會傳給 Claude。

用一句話加好四個自動化 Hook

每句前面加「幫我加一個 hook：」，它寫 .claude/settings.json 時會跳權限詢問，按同意，重開 claude 才生效。現場實測，開新對話我只打「嗨」，它就回今天日期和上次的 commit「首頁初版」，這兩件事我都沒講，是開工時 hook 塞給它的。prompts.md 每送一句就多一行，做到 W12 這份就是你的開發紀錄，Demo Day 講心得直接用。

我加的四個 hook

SessionStart每次開新對話，先告訴你今天日期和最近 5 筆 git 紀錄

UserPromptSubmit我每送出一句話，就連同時間記到 prompts.md

PostToolUse你每次改完 .html，就自動用瀏覽器打開它

Stop每次你回覆完，就用語音說「做完了」

Plugin 是打包好的資料夾，一行指令就能裝

一支 plugin 裡可以放 Skill（W6、W7 教過）、Subagent（W6）、MCP（W6 到 W8）、Hook（今天）跟 /指令，不一定全裝。我現場裝官方的 security-guidance，加 --scope project 只裝在這個專案，寫進 .claude/settings.json；不加就是裝給你所有專案。拆開看裡面就是 hook：寫檔時比對約 25 種危險寫法，像寫死的金鑰、直接塞 innerHTML；它說做完時另一個模型看這輪改了什麼；git commit 時派 agent 追資料流。

裝一支官方 plugin

claude plugin install security-guidance@claude-plugins-official --scope project

# 在對話裡打 /plugin 也能裝，還能看已經裝了哪些

裝之前看三件事

誰出的：hook 會在你的電腦上跑指令，挑官方 marketplace 或知名作者。裡面裝了什麼：只要 skill 的，別裝一包帶 hook 的，看 README 跟 hooks.json。吃多少 context：每支都會佔掉對話的空間，用 /context 看。跟裝手機 App 一樣，一次開 2 到 3 支就好，先裝一支用一週，留下真的有在用的。

Cowork 併進 Claude 對話視窗了

9/16 起 Cowork 併進 claude.ai 的對話裡，輸入框可以切 Chat 或 Cowork，選要用哪個專案的資料（W3 建的都還在）、動手前要不要先問你、產出 Docs、Slides、Design 還是 Artifact。我現場叫它寫 W11 的課前公告，左邊做事、右邊長出文件，大約 40 秒。這是 Claude 對話 App 的功能，不是 Claude Code。

SKILLS

用 grill-me 先問清楚，用 Jev 做便宜的判斷

一句需求背後有幾百個小決定

你說「幫我做會員登入」，背後有忘記密碼怎麼辦、同一個 email 註冊兩次、送到一半斷線、名字填了 200 個字、登入維持幾天、密碼錯幾次要鎖，還有一百多個。你沒講的，AI 都會自己猜一個答案，猜的通常是最好寫的，不是最好維護的。Matt Pocock 開源的 skills 就是在處理這件事，三十幾個 skill 全是 Markdown 指令檔，一個只做一件事。

五個 skill 各管住 AI 一個壞習慣

grill-me 反過來問你，談出共識才動手，管住它什麼都自己猜；to-spec 把共識寫成規格書；to-tickets 按使用者功能拆任務，不按資料庫、邏輯、畫面拆，每做完一個就能打開測；implement 先寫測試再寫程式，先定死「滿 1000 只能扣 100」，免得它寫錯成扣 200 再配一個「扣 200 才對」的測試；code-review 開新對話照清單審，不被自己寫的東西帶偏。

跟 Superpowers 選一支

Superpowers 是固定 9 步從頭走到尾，適合模型容易偏題的時候；Matt 這套一個 skill 一件事，手上有規格就能直接從拆任務開始，產出的文件別人、別的 AI 也接得走。兩支大部分重疊，一起裝會有兩套 TDD、兩套審查，我挑 Matt 這套，用外掛裝，每個專案都能用、會自動更新，裝完重開 Claude Code 才看得到指令。

grill-me 會先查專案現況再發問

我拿校稿王實測，想加「歷史紀錄」。它沒有馬上問，先回報現況：資料表 rewrites 已經在了、權限也設好，方案頁月付寫著「歷史紀錄，改過的都存著」，前端預留了位置，只是還沒有任何程式寫入、也沒有歷史紀錄頁。所以這次是把規劃好的東西補完，不是從零開始。接著第一輪問 7 題：誰可以用、什麼算一筆、Word 跟 PDF 存什麼、入口放哪、一筆能做哪些事、留多久、標題從哪來，每題都附建議答案。

我打的那句

/grill-me 我想幫校稿王加一個「歷史紀錄」功能：
每次改過的文章都留下來，之後可以回頭看、再複製出去

AI 給選項，最後由我決定

其中一題問付費到期之後舊紀錄怎麼辦：還能看但不再新增、整個藏起來、還是過一段時間自動刪除。它建議永久保存不設上限，到期後還能看、還能刪、只是不再新增，最不會讓人覺得付過的錢被沒收。只打一句「我想加歷史紀錄」，這題 AI 會直接幫你決定。第一輪問要做什麼，第二輪問怎麼做，沒有新問題才准動手。

Jev 是只回機率的判斷模型

Jev 是 TypeSafe 9 月推出的決策模型，你先列好選項，回來的是每個選項的機率：是不是新聞回 0.93、放哪個分類回「模型與工具 0.99」、相關度 0 到 3 回 1.98。一次約 0.4 秒，我走 OpenRouter 打，W10 那把金鑰直接能用。我把它放在電子報的 LLM 前面：SerpApi 抓 41 則候選，Jev 先判斷是不是新聞、放哪類、相關度多少，擋掉 31 則，LLM 只看剩下 10 則寫點評。

41 則實測，對照 gemini-2.5-pro

每則成本Jev $0.00004；gemini-2.5-pro $0.0166

每則時間Jev 0.4 秒；gemini-2.5-pro 16 秒

是不是新聞跟 pro 一致 97%

要不要放跟 pro 一致 86%

判斷依據要寫得很直觀

第一版判斷依據寫「新功能現在就能用」，「考慮發布」「疑似偷跑」照字面都不算，全給 1 分；第二版改寫具體例子：模型、功能、價格的發布、更新、洩漏或測試結果。繁中 29 則只改這段文字、Jev 本身沒換，要不要放進週報的一致率從 62% 升到 86%。三件事還是交給 LLM：分類中文只有 72% 一致，只當參考；信心 0.5 到 0.95 之間一致率約五成，只讓 0.95 以上自動過；它只回數字不給理由，摘要跟點評交給 LLM。完整數字寫在部落格的 Jev 實測文。

W102026.09.19

讓網頁自動抓別人的資料

用抓新聞當例子。抓不到的時候，畫面也要告訴使用者發生什麼事。

上半場：做一頁會自己抓新聞的網頁

看網頁背後在抓什麼

按鍵盤 F12，可以看到一個網頁打開時跟多少地方要了東西。

看懂錯誤代碼

常見的 404 是網址打錯。4 開頭是自己這邊的問題，5 開頭是對方網站壞了。

用對方提供的管道拿資料

不要從別人網頁上複製字，對方一改版就壞。

被擋了就換個方式抓

網頁直接抓 Google 新聞會被擋，請 AI 多寫一支小程式幫忙抓。

抓不到時怎麼叫 AI 修

把錯誤訊息或抓回來的內容貼給 AI，它就知道哪裡錯。

別人的服務會漲價或關掉

Google 地圖曾經大漲價，很多店家網站上的地圖一夕變灰。

抓不到時要顯示提示

告訴使用者現在抓不到，放一顆重試按鈕，不要整頁空白。

看大公司斷網時怎麼做

我拔掉網路去開 YouTube、Google 地圖，比較它們怎麼處理。

下半場：幫自己的作品加一個 AI 功能

加一顆讓 AI 想標題的按鈕

示範作品是我做的「校稿王」，一個幫人修改文章的小工具。貼上文章，按一下就給五個標題。

AI 的密碼要藏好

用 AI 要一組付費帳號的密碼，放在網頁上會被別人拿去用。

叫 AI 只回結果

AI 回答前常多講一句客套話，網頁會讀不懂，要先講好。

改完寄一份到信箱

使用者不用一直開著網頁，改好的文章會寄給他。

不要亂寄信

只有等很久的事做完才寄，不然會被當垃圾信。

叫 AI 幫忙測試

AI 自己開瀏覽器，把每顆按鈕按一遍，回報哪裡壞掉。

展示前先放假資料

畫面空空的看不出功能，先放幾十筆像真的資料。

補上小細節

分頁小圖示、分享連結時的預覽圖、按下去會轉圈，看起來才像完成品。

看本週完整紀錄+

W102026.09.19

接外部資料，再幫校稿王加一顆 AI 按鈕

前九週畫面上的東西都是自己放的：自己打的字、自己存的資料。這一週開始接外面進來的資料，新聞、天氣、匯率、別人算出來的結果，而外面的東西隨時會不見。上半場用 Google 新聞從零做一頁會抓新聞的網頁，再故意把它弄壞；下半場回到校稿王，接上模型加一顆「配標題」，再讓 Claude in Chrome 去按每一顆按鈕。

API

接公開資料，以及對方掛掉時頁面怎麼處理

一次請求送出網址、收回狀態碼

你的網頁發一個請求到別人的電腦，對方回一個狀態碼加資料，裡面怎麼算的看不到。方法是請求的第一個字：GET 是給我（開網頁、抓新聞），POST 是拿去（送表單、登入，W8 的 webhook 收的就是這個），PATCH 是改這筆，DELETE 是刪這筆。GET 的參數掛在網址上誰都看得到，所以金鑰永遠不走 GET。

狀態碼 4 開頭和 5 開頭的差別

用餐廳記：200 是上菜了；401 是要看證件，沒帶金鑰或登入過期；403 是有證件也不給進，權限不夠或被當成爬蟲；404 是沒這間店，網址打錯；429 是你來太多次，額度用完或按太快，要鎖按鈕。5 開頭是對方的事：500 廚房炸了、502 外場找不到廚房、503 今天公休、504 等太久先走了。不管是哪一種，畫面都是你的責任。

實戰 ①：F12 → Network 找一個 200 跟一個 404

1開任何一個網站，F12 切到 Network，重新整理

2一行是一次請求，開一頁通常是幾十次

3指一行綠的 200、一行紅的 404，講它在要什麼

沒有紅的網址後面亂加幾個字再整理一次

有 API 就不要用爬蟲

爬蟲是抄黑板，從畫面裡挑字，對方版面一改就壞，抓太勤被擋 403，條款也常寫不准。API 是對方給的講義，固定網址、固定格式，改了會先講，一天能拿幾次寫在文件裡。今天的例子是 Google 新聞的 RSS 網址，q= 後面換關鍵字，回來每一則只要認得四格：標題、連結、時間、來源。

直接抓 Google 新聞會被 CORS 擋下

第一句叫它做一頁輸入關鍵字、列出 Google 新聞標題的單檔 HTML，打開是空白，F12 一排紅字 blocked by CORS policy。Google 不讓別人的網頁直接抓這個網址，瀏覽器會擋，但不擋你自己的後端。跟它說「那就後端去抓」，它多寫一支 server.mjs 去抓 RSS、把 XML 轉成 JSON，前端改打自己的 /api/news。之後要金鑰的服務也走這條，金鑰留在後端。

第一句照抄，撞牆之後再講第二句

做一頁 輸入關鍵字 列出google新聞的標題和連結
資料從這個網址抓
https://news.google.com/rss/search?q=關鍵字&hl=zh-TW&gl=TW&ceid=TW:zh-Hant
純html一個檔案

# 打開空白、F12 紅字 CORS 之後：
那就後端去抓

接不通的三種樣子

紅字 CORS：對方不讓網頁直接抓，叫它改後端去抓。Network 是 404：網址打錯或對方搬家，把網址單獨貼進瀏覽器開一次，再跟它說「網址是這個，你打開看一次」。資料有回來但畫面沒東西：它猜錯欄位名，去 Network → Response 複製前 20 行貼給它，說「真的資料長這樣，照這個改」。

外部服務隨時可能漲價或關掉

Tweetbot 靠 Twitter API 活了十年，2023 年 1 月 API 無預警斷線，一週後才改條款不准第三方，2 月免費 API 取消，基本方案月付 100 美元起，Tweetbot 關門。2018 年 Google Maps 把每月免費額度從 75 萬次砍到 2.8 萬次、一律綁卡，部分用法漲超過 1,400%，很多店家網站的地圖直接變灰，寫著 For development purposes only，老闆是客人問了才知道。

失敗畫面要做到三件事

多數人的頁面在資料回不來時是一片白，使用者關掉就不會再開。失敗畫面要講人話（資料來源暫時沒回應）、給一顆再試一次、有舊的先給舊的並標上次更新時間。實戰 ③ 是故意弄壞自己那頁：把 server.mjs 裡的網址改錯一個字，看畫面有沒有出那句話跟舊清單，改回來按重試，再把 server.mjs 整個關掉試一次。

實戰 ③ 跟它講的那句

網址抓不到 或回來的不是資料的時候 不要白屏
畫面上寫「資料來源暫時沒回應」 給一顆再試一次
如果之前有抓成功過就先顯示上一次的

大公司的網站斷網時怎麼處理

我事先斷網截了幾張圖對照。YouTube 斷網搜尋會寫你已離線、給重試、側欄跟搜尋列都還在，三件全做到。Google Maps 拖到沒載過的區域是一片空，沒講話也沒重試，但載過的區域還在。蝦皮、台鐵、PChome、Notion 重新整理之後是 Chrome 的恐龍，那是瀏覽器代打，網站自己什麼都沒做。實戰做的那頁，三格都要打勾。

AI BUTTON

校稿王接上 AI 模型，再讓 AI 自己測試按鈕

幫校稿王加一顆 AI 配標題按鈕

校稿王到 W9 為止會標紅、會改好給你，處理的都是內文，標題那行空著。這一週多一顆「配標題」：貼一篇文章，回 5 個標題、5 種切法，每個後面寫吃到哪個關鍵字，30 字內、沒冒號、不聳動。金鑰照 W5 的做法放環境變數：本機 .env 寫進 .gitignore 不上 GitHub，Zeabur 後台放同一個名字的正式值，程式碼只寫 process.env 的名字。

第一句話就講清楚要做什麼和不能動什麼

它讀完 index.html、_server.mjs、CLAUDE.md 之後先回計畫：後端加一支 /api/titles 讀 .env 的金鑰去打 OpenRouter，前端多一顆按鈕，結果列在輸入框上方，點一個就填進標題欄。我做的順序：openrouter.ai 申請金鑰貼進 .env、那句貼進 Claude Code、跑 node _server.mjs、貼文章按「配標題」，最後 F12 打開 /api/titles 那一行，確認 Payload 裡沒有金鑰。

我打的第一句，原文照貼

加一顆「配標題」 按下去把整篇文字送去openrouter
回我5個標題 每個標題後面寫它吃到哪個關鍵字
30字內 不要冒號不要聳動
金鑰放.env的OPENROUTER_API_KEY 走_server.mjs
前端不能看到金鑰 正則那層一行不動

AI 回傳的格式由我規定

按了沒反應，F12 看 /api/titles 有回東西，但前面多一句「好的，以下是」，前端解析不到。它在提示詞加了「只回 JSON 陣列，前後不准有任何字」，後端再把第一個 [ 之前的字全部丟掉。第二個問題是 5 個標題長得都一樣，我指定五種切法：問句、數字、痛點、怎麼做、比較，回來的欄位多一個 type 標是哪一種。

改完自動寄一份到使用者信箱

到現在都是使用者來找你，他開網站、貼、看、關掉，關掉就結束了。這一段讓「幫我改」做完之後，用 Resend 把改好的全文寄到他登入的 email，信裡放一個回網站的連結。Resend 一把金鑰，免費每月 3,000 封，做法跟 OpenRouter 那把一樣放 .env。寄失敗不能讓整件事失敗，畫面上加一行「改好了，信晚點補寄」就好。

什麼時候該寄信給使用者

該寄的：做完一件慢的事、他不在網站上也想知道的、每天或每週一封摘要。不該寄的：每按一次就寄、畫面上已經看得到的、沒問過他就寄。每一封都要有退訂連結，Resend 會幫你加。

用 Claude in Chrome 測試每一顆按鈕

W7 教過 Claude in Chrome，這週拿來測自己的產品：打開本機網址，每顆按鈕在三種情況下各按一次：什麼都不貼就按、貼一萬字、視窗縮到 375 寬。壞掉就截圖，最後列一張表，並且明講不准改任何東西。拿到表之後挑最丟臉的一個，回 Claude Code 修，修完再叫 Chrome 按一輪。按的跟修的是兩個視窗。

給 Claude in Chrome 的那句

打開 localhost:8731 把每顆按鈕都按一輪
試三種：什麼都不貼就按、貼一萬字、視窗縮到375寬
每次壞掉截圖
最後列一張表：按了什麼 看到什麼 應該是什麼
不要改任何東西

Demo 前先放 30 筆測試資料

我的 AICommand 有 38 款 AI 工具的基本資料，每 24 小時從 Reddit、GitHub、PTT 等來源進來四千多則訊號，訊號要掛在工具上，工具沒先建好，排行榜就是空的。校稿王這邊請它用 Supabase MCP 生 30 筆像真的歷史紀錄，掛在一個 demo 帳號底下，Demo Day 用這個帳號登入，打開就有東西。它判斷是正式專案，寫入前先列欄位跟前 3 筆給我看。

上線前補好四個小細節

favicon：沒有的話分頁上是一個灰地球，叫它用 logo 做各尺寸。OG 圖：沒有的話貼連結到 LINE、Threads 沒預覽，加 og:title 跟 1200×630 的 og:image。404 頁：打錯網址看到英文錯誤，做一頁一句話加回首頁。載入中：按了沒反應會以為壞了，每個要等的按鈕按下去要轉圈。一件事一句話。

這週要交的三條驗收

驗收 1接了一個外面的 API，按了真的回東西

驗收 2推到 GitHub，金鑰在 .env，後端一起推

驗收 3對方掛了還打得開：那句話＋重試鈕

加分一顆 AI 按鈕：摘要、分類或幫他寫一段

W92026.09.12

第二版要加什麼功能

先刪掉沒人用的，再挑一個最多人需要的先做。

上半場：決定下一個功能

做出來之後要先確認有人要用

做一個功能，放出去，有人用再做下一個。

先刪掉沒人用的功能

Evernote 功能越加越多，使用者反而跑光。

新功能從使用者身上找

看他們怎麼繞路、開口要什麼、上網問什麼。

叫 AI 去搜尋大家在問什麼

整理成表，找出還沒人解決的問題。

AI 列點子，你來挑

它給 15 個，你刪到剩 6 個。

免費和付費怎麼分

第一次用就需要的放免費，天天用才需要的放付費。

先做一個就放出去

10 個人用、3 個人說還想用，再做下一個。

下半場：用我的校稿王示範做一個功能

校稿王是什麼

我做的改文章小工具，第一版 10 個問題只抓到 3 個。

先讓 AI 看現有的程式

丟網址給它，它自己讀完再提建議。

說方向，讓它列選項

我只講要做什麼樣的工具，它列出六個功能。

動手前先做三件事

改方案頁、寫好規則、存一個可以退回的版本。

AI 的密碼藏在後台

放在網頁上，誰都看得到。

改壞了就退回去

它順手改掉不該動的地方，就退回存好的版本。

三個常見問題

按了沒反應、後半篇不見、說做好了其實沒有。

有人想付錢才接收款

功能先做，收款等真的有人說要買。

看本週完整紀錄+

W92026.09.12

第二版要加什麼，用校稿王示範只做一個功能

第一版做出來了，問題從「做不做得出來」換成「該加什麼」，而加錯比第一版貴：舊的會壞，而且只剩三週。上半場先減再加，從使用者硬撐的地方、開口要的、上網問的三個地方找靈感，讓 Claude 發散 15 個候選、自己收斂到 6 個再分成免費、付費、不做三疊；下半場拿我自己的校稿王示範，從三句對話挑出第一個要補的功能，做到能給人用。

做出來之後要先確認有人要用

做一個功能，放出去，有人用才加下一個，沒人用就換題目。「放出去」這一步前八週還沒做過，今天每一步都在往那裡走。

加東西之前，先看舊的哪些沒人用

Evernote 的核心是筆記和同步，後來陸續加了實體商品市集、簡報模式、提醒、名片掃描，每加一層核心就裂一點，CEO 自己說該往內看不是往上看，後來使用者被 Notion 和 Obsidian 接走。實戰 ① 五分鐘寫在紙上：把現有功能一行一個列出來，這兩週自己按過的打勾，沒按過的圈起來。圈起來的，第二版不碰。

新功能的靈感從三個地方找

使用者硬撐的地方：Twitter 的 # 是 2007 年使用者自己提議的，官方覺得太宅，大家自己用起來之後，2009 年才做成功能。使用者開口要的：Slack 加了 emoji 反應之後，「讚」「恭喜」「辛苦了」四則訊息變成一個 👍，好的擴充常常是讓人少做一件事。大家上網問的：還沒有使用者的人靠這一個。

叫 Claude 去 Google 查大家在問什麼

我在 Claude in Chrome 示範：搜「去 AI 味」跟「AI 文章改寫」兩組，每一組讀三樣東西：其他人也問了、前十名的頁面、Threads 跟 Dcard 的抱怨，整理成一張表：他用的字、他卡在哪、現有解法、我的工具有沒有。最後一欄寫「沒有」的就是功能候選，它讀回來的東西我會自己再核一遍。

AI 列出 15 個點子，自己刪到 6 個

實戰 ② 叫它從三個角度各給 5 個擴充功能，拿到 15 個先不要刪，全部貼進一份文件。收斂自己來：一年才用一次的刪掉，沒人為它花時間花錢的刪掉，使用者已經有順手做法的刪掉，刪到剩 6 個。它列得快，但分不出哪個重要，那是你做這件事的經驗，它沒有。

前兩格填自己的，其他照抄

我的產品是「＿＿」，給＿＿用的。
現在有這些功能：（貼上實戰 ① 那張，圈掉的標出來）
三個角度各給我 5 個擴充功能：
使用者會拿它硬撐什麼、會開口要什麼、天天用的人缺什麼。
每個功能一句話，寫使用者拿到什麼，不寫技術。
圈掉的功能不要碰。

免費版和付費版怎麼切

Grammarly 免費版把錯的標出來，使用者每天看到紅線，就相信它抓得準；付費版直接改好，賣的是省掉自己改那一段。Notion 個人全部免費、團隊收錢，個人用得順就會帶進公司。Spotify 免費版功能全給，但每一個都有摩擦：廣告、隨機播、不能離線，煩但忍得住。切法是一次用的人也要的放免費，只有天天用的人要的放付費。

實戰 ③：6 個分成三疊

免費一次用的人也要，第一次用就拿得到結果，通常 2 個

付費省時間、留東西、一次一批，只有天天用的人要，通常 3 個

不做你最想做的那個，至少 1 個

免費功能先只做一個就放出去

這一頁是整堂最重要的：免費那疊只做一個，給 10 個人用，3 個人說還想用才做付費，沒有人這樣說就停下來換題目。付費那疊做得再好，沒人用免費的就沒人會付。

DEMO

校稿王只先做「改好給你」

第一版 43 條規則只抓到三成的 AI 味

校稿王的第一版在 W7 做出來，用 43 條規則標紅 AI 腔，W8 加了七個頁面、Google 登入和方案頁。規則是一條抓一種寫法，文章裡有那個字就標紅，沒有就放過；AI 味的寫法有幾百種，一篇文章有 10 處它只抓到 3 處，使用者改完還是覺得像 AI 寫的。要抓得全，得請模型看整篇，這是做第二版的原因。

先丟 repo 網址讓它自己讀程式

第一句只丟 GitHub 網址，它自己讀了檔案清單、最近 4 個 commit、CLAUDE.md、.mcp.json，提案加一層「語意判讀」，用第三種顏色標出規則抓不到的句子。技術上沒錯，但那是工程師想要的「標得更準」，付錢的人要的是改好的文章。

我只講產品定位，功能清單讓它列

第二句我只講「真正可以用」跟「拿到改完的」，錯字沒改它照樣看懂，回了六個選項：改好給你（左右對照）、上傳 PDF 跟 Word、照你的口吻改、長文不限字數、歷史紀錄、批次一次 20 篇，並建議先做改好給你跟上傳檔案，放付費。第三句我回「1 4免費版 256付費版」，推翻它的建議，它沒有爭；接著回「先做 1，其他等有人用了再說」。選項由它出，決定由我下。

三句對話，原文照貼（含錯字）

https://github.com/akangdesigner/aisloptool 你稍微看一下就好

我要做的功能是真正可以用的工具。另外可以上傳pdf或文件
然後會幫你產出城改完的 那進階功能可以用啥

1 4免費版 256付費版

動手之前先做三件事

改方案頁：把「2000 字上限」改成「不限字數」、「不留紀錄」改成「改好給你」，方案頁寫什麼就是對使用者的承諾。改 CLAUDE.md：寫進「正則區塊禁止修改」「一次只改一件事」，界線寫在它每次開工都會讀的檔案裡，不用每次講。打 git tag v1，改壞才有地方退。

金鑰不能放在網頁裡

打模型要金鑰，網頁誰都打得開，金鑰放進去等於送人，這是 W5 講過的。所以前端 index.html 只多一顆「幫我改」，規則那層不動；新加一支後端 _server.mjs 放金鑰，負責切段、打模型、合併。一次講一件事，做一點看一點：先做貼文字按幫我改、右邊出結果，再改成逐句對照，每句右邊一個接受、一個退回，退回的保留原文。

它改到不該改的地方，就退回 v1

做到一半，它順手把規則那層「整理」掉了。它加功能時常會順手整理舊程式碼，git checkout v1 退回去之後，CLAUDE.md 從「禁止修改」改成「禁止修改、禁止移除」，界線寫得更死。

三個常見狀況，看到就這樣講

按了沒反應：右邊一片空白，因為模型回話前面多一句「好的，以下是結果：」，網頁讀不懂，跟它說只准回結果、前後不准多字。後半篇不見：貼四千字只改好前半，一次能吐的字有限，跟它說一千五百字切一段再接起來。它說做好了：那不算，自己貼一篇按一次有出來才算，這是 W4 講的幻覺在這裡的樣子。

功能先做，收款等有人要付錢再接

付費那疊在免費的有人用之後接著做：歷史紀錄是 Supabase 一張表，W8 教過；上傳檔案要先上 Zeabur 才收得到檔；批次一次丟 20 篇。綠界金流等有人開口說要付錢才接，接了沒人付等於白做。這週作業：從免費那疊挑一個，照 CLAUDE.md 寫界線、git tag v1、一次講一件事、改壞就退的順序做，交一個能打開的 HTML，找 3 個人用，把他們說的話記下來。

W82026.09.05

讓網站能登入、存資料、收錢

接上資料庫、Google 登入和刷卡付款，頁面也跟著變多。

上半場：接上登入、資料庫和付款

後台做四件事

存資料、放檔案、認人、算錢。

接外部服務有兩種方式

裝連接工具讓 AI 直接操作，或照說明文件寫程式。

用 Supabase 當後台

資料庫、登入、檔案、後台程式，一個服務全包。

用講的建資料表

講清楚每一欄要存什麼，它會先給你確認。

每個人只看得到自己的資料

規則寫在資料庫裡，忘了開等於全部公開。

給 AI 資料庫權限之前

練習和正式分開、能只讀就只讀、刪東西前先看。

用 Google 帳號登入

密碼打在 Google 的頁面上，你的網站拿不到。

有一步要你自己做

去 Google 後台申請登入設定，AI 沒有你的帳號。

刷卡會經過六個關卡

卡號不經過你的網站，手續費約 2% 到 3%。

付款成功以金流通知為準

使用者看到成功頁面不算，系統收到通知才算。

下半場：重新列出需要哪些頁面

接了登入，頁面變多了

註冊、登入、忘記密碼、結帳、付款結果都要一頁。

每一頁先回答六個問題

叫什麼、做什麼、誰來、從哪進、去哪裡、要不要登入。

三種常被忘記的畫面

沒資料時、做完之後、出錯時。

一頁有四種狀態

有資料、載入中、沒資料、出錯，都要設計。

把頁面連起來

畫出按了會去哪，找出進不去、出不來的頁。

一次做一頁

第一頁定好顏色和字體，後面照著做。

用五行描述一頁

內容要放真的字，不然接上真資料就跑版。

設計工具會先反問你

答不出來的地方，就是你還沒想清楚的。

看本週完整紀錄+

W82026.09.05

接後端、登入與金流

前七週做出來的東西，資料沒有離開過那台電腦：重新整理就不見、換一台電腦打開是空白、分不出哪一筆是誰的。這一週補上後端這一塊，上半場講 Supabase、OAuth 登入、綠界金流各自在做什麼、哪一半交給 Claude Code、哪一半永遠是人做；下半場回頭重列頁面清單，因為接了登入跟資料庫之後，頁面自己多出來了。

BACKEND

用 Claude Code 接後端與金流

後端負責的四件事

存資料（訂單、貼文、清單寫進資料庫，下次打開還在）、放檔案（使用者上傳的照片與 PDF）、認人（誰是誰、哪筆資料屬於誰、誰有權限改）、跑不能公開的邏輯（算錢、發信、串金流）。W5 講過前端的程式碼任何人都打得開，只要牽涉到密鑰或金額計算，就得搬到後端。

AI 接外部服務的兩種方式

裝 MCP，等於給它一組可以直接叫的工具，它自己去操作你的帳號，代價是要把鑰匙交出去；或者照 API 文件接，什麼都不用裝，它寫程式、執行的是你的程式，它碰不到那個服務本身。絕大多數服務都只有 API、沒有 MCP，台灣的服務幾乎都走第二條。今天 Supabase 走第一條，綠界走第二條。

Supabase 裡面的四個東西

Database 是一套標準 Postgres，業界用了三十年，不是簡化版，哪天不想用了整包倒出來換一家還是能跑；Auth 把信箱密碼、Google、GitHub 登入都包好了；Storage 放使用者上傳的圖片影片，分公開與私人；Edge Functions 是跑後端程式的地方，有自己的公開網址。後台兩把金鑰不要拿錯：anon 那把給前端用、受 RLS 規則管；service_role 那把跳過所有規則，貼進前端等於整個資料庫送人。

用講的請 AI 建資料表

裝上 Supabase MCP 之後，建資料表、改欄位、下 SQL、讀結構、部署 Edge Function 它都做得到。你不用會 SQL，但要講清楚每一欄存什麼。它會先回一份欄位型別的提案等你確認，確認之後自己下 CREATE TABLE、再下 RLS 規則、最後把整張表的結構讀回來給你看。型別之後很難改，它提的方案看不懂就問它為什麼選這個，別直接按過去。

實際用法，RLS 要自己講出來

在 Supabase 建一張 notes 資料表。
欄位要有編號、屬於誰、內容、是否完成、建立時間。
開啟 RLS，規則設成每個人只讀得到自己的那幾筆。
建好之後把結構印出來給我看。

用 RLS 規則讓每個人只讀得到自己的資料

傳統做法是前端不能碰資料庫，中間自己寫一層 API，每支都判斷一次這個人可不可以看這筆，寫得多也容易有一支忘記判斷。Supabase 的做法是前端直接連，每張表掛一條規則：只讀得到 user_id 等於自己的那幾筆，這叫 Row Level Security，規則寫在資料庫本身繞不過去。最常見的事故是建完表忘記開 RLS，等於整張表對全世界公開。

給它資料庫之前，授權的三個原則

W5 講過 Replit 那件事，創業者說了程式碼凍結，AI 還是刪掉正式資料庫，1,206 筆資料整批消失。三個原則：練習的跟正式的分開，開兩個 Supabase 專案，MCP 網址加 project_ref 鎖定一個；能唯讀就唯讀，網址後面加 read_only=true 它就只查不改；會刪東西的先看過再按，它沒有「這件事很嚴重」的感覺。那次事故之後 Replit 加上的三樣東西正好也是這三條。

用 Google 登入的時候，你的網站拿不到密碼

自己做登入要處理密碼加鹽雜湊、登入狀態、狀態過期、忘記密碼流程、擋自動化猜密碼，每一項都有人做錯上過新聞，所以多數產品的第一個登入方式是接別人的。OAuth 的做法是密碼只打在 Google 自己的頁面上，Google 驗完回頭給你的網站一張隨時可以撤銷的通行證。你裝 Supabase MCP 那一步走的就是 OAuth：瀏覽器跳出來、在 Supabase 的網域上按同意、跳回終端機，你從頭到尾沒貼過任何金鑰。

接 Google 登入有一步要自己做

程式碼那半它寫得很快：登入成功導回首頁、右上角顯示名稱跟登出、沒登入的人不能進某一頁。設定那半要你自己點：去 Google Cloud Console 開一組 OAuth 用戶端，把 Client ID 跟 Secret 貼進 Supabase 後台的 Google 供應商設定。那是你的 Google 帳號，它沒有，這一步永遠是人做。分不清楚哪半是哪半，就會卡在那裡等它。

一筆信用卡付款會經過六個角色

持卡人、你的網站、綠界、收單機構、卡組織、發卡銀行。你只跟綠界打交道，只送訂單編號與金額，卡號從頭到尾不經過你的網站。只要卡號經過你的伺服器，就要通過 PCI DSS 稽核每年重驗，成本高到個人開發者做不了，所以網購時網址會跳到別的網域再跳回來，那是規定不是設計沒做好。中間每一層都抽成，線上刷卡手續費落在百分之二到三，賣單價低的東西要先算進去。

付款結果以綠界打給後端的通知為準

使用者按結帳、你的後端把訂單編號跟金額送去綠界、畫面跳到綠界的付款頁刷卡、綠界跟銀行確認、綠界打你事先登記的網址通知結果、你的後端把訂單改成已付款。使用者的瀏覽器也會被導回你的頁面，那條只是給人看的。綠界官方把整份 API 文件包成一個 skill，git clone 到 ~/.claude/skills/ecpay，打 /ecpay 有反應就是好了；不裝也接得起來，只是它自己查文件比較慢、也比較容易查到舊版本。

裝完之後這樣叫它接，測試環境的參數是公開的

用 ecpay skill 幫我接綠界的信用卡付款，用測試環境。
付款結果通知寫成一個 Supabase Edge Function，
收到之後把訂單狀態改成已付款。

# 它做：結帳按鈕、送單參數、收通知的函式
# 你做：特店編號跟金鑰放環境變數，拿測試卡號刷一次

PAGES

重列頁面清單，以及怎麼跟 Claude Design 描述一頁

接了後端之後要多做哪些頁面

接了登入，多出註冊頁、登入頁、忘記密碼頁，還有登入完要導去哪；接了資料庫，多出我的資料那頁、點一筆進去的細節頁、刪除的確認；接了金流，多出結帳頁、付款結果頁，成功跟失敗是兩種畫面。W2 列過一次清單，那時候還沒有這幾頁，今天重列。

一頁回答六個問題

頁面名稱、這頁要幹嘛、誰會來、從哪進來、出去到哪、要不要登入。沒填會怎樣：名稱沒定，跟 Design 講的時候雙方講的不是同一頁；要幹嘛沒寫，版面沒有主角什麼都放一點；誰會來沒寫，寫出來的字會對錯人；從哪進來沒寫，做了一頁沒有地方點得到；出去到哪沒寫，進去出不來只能按瀏覽器上一頁；要不要登入沒寫，上半場那條 RLS 規則沒有地方對應。

示範網站六頁，只有首頁跟訂閱方案要動腦

首頁讓第一次來的人三秒內知道這是什麼，免登入，按方案去訂閱頁

方案三個方案並排讓他選一個，按下去進結帳

結帳收款只做這件事，要登入，成功去感謝頁、失敗留原地

感謝告訴他接下來會收到什麼、什麼時候

聯絡給沒有要買、但想問一句的人一個聯絡管道

FAQ擋掉重複的來信，沒問到的導去聯絡我們

三種常被忘記的頁面

資料是零的時候：第一次進來清單什麼都沒有，這頁沒做他看到一片空白就關掉。做完之後：送出成功要講下一步去哪，停在原地使用者會以為沒送出去再按一次。出錯的時候：存不進去、找不到、逾時，錯誤要寫人話，不是把系統英文原封不動印出來。Demo 看起來像半成品，多半是這三種頁沒做，不是功能不夠。

同一頁會有四種樣子

有資料是你會想到的那種，清單裡五筆十筆最好看；載入中先放骨架；空的放一句話加一顆按鈕講他先做什麼；出錯講發生什麼事、給一個再試一次。跟 Design 講的時候一次講完四種，只講有資料，另外三種它會自己編或不畫。

把頁跟頁連起來

每一頁寫一個框，紙、白板、便利貼都可以；畫線出去，按了什麼會去哪，順便寫按鈕名字，寫不出來代表那頁還沒想清楚；圈出沒有出口的頁，進去只能按上一頁，Demo 時最容易卡住；圈出沒有入口的頁，做了但整個產品沒地方黏得到。懶得畫就打一句「把這幾頁的動線用文字畫成流程圖」。

一次一頁，第一頁不要挑首頁

整包丟「幫我做一個記帳網站，有這六頁」，回你六頁草稿每頁都淺淺的，改其中一頁要連別頁一起重講。一頁一頁做，第一頁講到滿意，之後每頁加一句「沿用上一頁的設計系統」。第一頁在定整個產品的色票跟字級，花的時間最多，挑主線中間那頁、元件最多的那一頁。

實際填一次 W3 教的五行描述

目標、版面、內容、受眾、風格。前三行從清單抄，第四行從 PRD 抄，要動腦的只有第五行。內容那行放真的字：寫「標題一」「這裡是說明文字」，每格長度剛好、版面看起來都很美，接上真資料當天爆版。第五行「不要」那半句最有用，頂端徽章、漸層大標、三欄一樣寬的卡片、藥丸按鈕，W3 那六個產業的圖六張裡都找得到，點名擋掉它才會去找第二位的做法。

清單上的一列，展開成五行

目標｜登入後的主畫面，給已經存過資料的人回來看
版面｜最上面一條列放搜尋跟新增，中間是清單，右上角帳號選單
內容｜每列顯示標題、日期、狀態；一筆都沒有時，
　　　中間放「還沒有任何一筆」加一顆新增按鈕
受眾｜每天打開兩三次的人，要一眼看到最新那筆
風格｜深色底、青綠重點色、等寬字當標籤；
　　　不要三張一樣寬的卡、不要漸層大標

Claude Design 會先反問，交回 Claude Code 前還缺三件事

它不會馬上生圖，先問方向，回答它的問題比重下一次 prompt 有效；它問到你答不出來的，代表清單那一格是空的，回去補。一次只改一件事，三件事寫成一長串一起丟，壞了你不知道是哪一句造成的，也最燒額度。Share 送去 Claude Code 之後還缺三件：真的資料（設計稿那五筆是它編的，接上上半場那張表字長度不一樣）、手機寬度（拉到 390 看一次）、另外三種狀態（空的、載入中、出錯，設計稿通常只畫了有資料那種）。

W72026.08.29

作業檢討，然後讓 AI 自己開瀏覽器

前四次作業一次講完，再教 AI 幫你點網頁、填表單。

上半場：前四次作業總檢討

一句話講完你的產品

誰、想做什麼、拿到什麼。要換氣就是還沒想清楚。

做對的七件事

有人寫了不做清單，有人把目標寫成能檢查的數字。

做完了要交出來

檔案沒上傳，別人就看不到。

按鈕點下去不能是空的

挑三個最重要的內頁先做出來。

計畫書不能拿來展示

成果發表要有畫面可以點。

提案不是產品

提案用一次就丟，產品會被一直重複使用。

沒寫不做清單，功能越長越多

IG 第一版也是砍到只剩拍照才紅。

把做作業的時間排進行事曆

每週固定留 90 分鐘，不要等有空。

檔名加上日期

「專案_類型_版本_日期」，一看就知道哪份最新。

這禮拜只補一件事

交一個能打開的網頁，做到哪交到哪。

下半場：讓 AI 自己操作瀏覽器

這份簡報是 AI 看完作業做的

它自己去雲端讀了 14 個檔案，做成 25 頁簡報。

AI 上網有三種方式

只有開你的 Chrome，才看得到你登入後的畫面。

安裝 Chrome 擴充功能

認明發布者是 Anthropic，付費帳號才能用。

叫它檢查手機版

用電腦和手機寬度各截一張圖，看哪裡跑版。

幫你填表單，但不按送出

送出就收不回來，要你自己看過再按。

網頁上的字可能騙 AI

它分不出哪句是你講的、哪句是網頁寫的。

看需求選工具

規則、技能、分身、外部連線，各解決一種麻煩。

每人寫一份規則檔

三段就夠：這是什麼、每次都要遵守、不准做的事。

每人做一個技能

把平常重複貼的那段做法存起來。

示範：自動補圖的技能

想畫面、生圖、裁切、存檔，一個指令做完。

每人接一個外部服務

一行指令裝好，讓 AI 直接拿那邊的資料。

看本週完整紀錄+

W72026.08.29

作業總檢討，以及讓 AI 自己開瀏覽器

前四次作業我全部讀過了，上半場講做對的七件跟要改的七個地方，每一條直接講怎麼改，聽到哪一條心裡有數那條就是你的。下半場 Claude 從對話框裡走出來：裝 Claude in Chrome 讓它開你的分頁、截圖、填表單，再各做一個 CLAUDE.md、一個 Skill、一個 MCP。作業也換一份：不用交畫面，交一句話定位加一張不做清單。

REVIEW

前四次作業，一次講完

你的產品能不能用一句話講完

誰、想幹嘛、拿到什麼，一句話講完。「你只要說想去哪、預算多少，剩下的功課我幫你做完」是收完的樣子；要換氣、要補一句「就是那個……」就是還沒收完。一句話收不完的產品，第一版就還沒收乾淨。寫不出來，那就是今天最大的收穫。

作業裡做對的七件事

有一份寫了六項第一版不做；有一份的成功指標可以驗收，「10 分鐘內產出一份可追溯來源的研究資料包，加 5 支可以直接拍的腳本」；有一份改了方向，往自己親自走過的地方收，不是往聽起來比較大的市場跑；有一份把訂位與購票的時間軸整理出來，抓的是交通銜接跟開賣時間，AI 最不可靠的兩件事；有一份 PRD 開始寫怎麼複製；有一份自己寫了風險，會提前講出哪一步會爆的人多半真的做過事；有一份劣勢欄寫了四條，決定 AI 家教先不做，理由是燒不起運算成本。

做完之後要上傳才算交出來

首頁、研究報告、腳本工作台都做完了、畫面也能點，但檔案沒上傳，資料夾裡放的是兩張對話截圖，同學打不開、我也點不了。2007 年 Dropbox 同步功能還沒做出來，Drew Houston 先錄了三分鐘示範影片丟上 Hacker News，等候名單一天從五千變七萬五千。重點是讓別人看得到、看得懂。東西留在自己電腦裡等做完，就沒人看得到。

內頁不能都是空連結

按鈕點下去沒有東西，Demo Day 是點給人看的，點到空頁就停在那裡。挑三個真的做成頁面：完整範例、方案比較、服務條款；諮詢表單那十個欄位也做成畫面，那是你收單的入口。

有些作業還停在文件、沒有畫面

有的資料夾停在 W2，打開只有一行外部工具的連結；有的只交過企劃書。企劃書寫得再好，Demo Day 放不出來。紐約時報記者 Kevin Roose 沒有工程背景，做了一個只有他一個人在用的 LunchBox Buddy，把冰箱裡有什麼講給 AI 聽、它決定午餐帶什麼，他叫這種東西 Software for One。你的第一版不用服務所有人，先做一頁、服務一個人，那一頁能點就贏過寫得再完整的文件。

提案和產品的差別

提案是給一個客戶看的東西，這次用完下次重做；產品是會重複被用的東西，第二個客戶來的時候你只改參數。你們交的提案頁、服務說明頁本質都是提案，提案產生器、行程規劃工作台才是十二週要 demo 的東西。我自己以前每接一個案子重寫一份提案，後來把那套寫法寫成 905 個字存起來，打一行 /proposal 就生一份：會生提案的那個東西才是產品，提案是它的輸出。

沒寫不做清單的專案，功能會一直變多

題庫＋論壇＋學習工具＋未來 AI 家教；四個角色、四張表、通知與提醒自動化；網站＋表單＋金流＋第 13 週的 App。Instagram 第一版叫 Burbn，打卡、行程規劃、積分獎勵、拍照上傳塞滿沒什麼人用，去看數字發現只有拍照有人在用，其餘全砍，八週重做，上線第一天兩萬五千人註冊。你的不做清單做的是同一件事，只是不用等到有數字才砍。

這禮拜每個人補一句：我的第一版不做什麼

幾項三到六項，寫進 PRD

沒靈感從這裡挑：登入、會員、金流、通知、後台、多人協作、App

先寫你最捨不得砍的那一項

意思寫的是「第一版不做」，不是「以後都不做」

作業沒有排進行事曆

W3 的作業 8/1 出，有人 8/14、8/15 才傳，剛好是 W5 上課前一晚，兩週的作業擠在一個晚上做，只能改檔名交差。問題出在那一週沒有留任何時段給作業。每週固定挖一個 90 分鐘的時段寫進行事曆，不要等有空。

檔名看不出哪一份是最新的

專案企畫書.docx、專案企畫書-1.docx、專案企畫書.docx（第三份），Claude 開你的資料夾也一樣分不出哪一份是最新的。改成「專案_文件類型_版本_日期」，同一份改版就把日期往前推，舊的留著不要蓋掉，出事的時候退得回去。

這禮拜只補一件事

W1 到 W6 的作業全部補完要花一整個週末，那不會發生。交你的產品現在的樣子：一個能打開、能點的 HTML，做到哪就交到哪，檔名帶專案名跟日期。還沒有畫面的人交一頁就好，挑你的產品最核心的那一頁，前面的文件不用回頭補。矽谷那批人幾乎都是先做給自己用，你的產品如果你自己不會打開，Demo Day 那幾分鐘就只剩形容詞。

CHROME

讓 AI 自己開瀏覽器，再接上你的工具

上半場 25 頁簡報怎麼用 AI 做出來

我在終端機打一句「把 W1 到 W4 的作業點評一輪」，它自己去雲端硬碟翻資料夾找到 14 個檔案，Word、PDF、HTML、截圖一個一個讀完，比對出有兩份交上來的是同一個檔案，寫成 25 頁簡報再轉成 pptx。沒有人手動下載你們的作業。它能碰到雲端硬碟，是因為那台電腦上接了一個 MCP。

AI 三種上網方式的差別

WebSearch 丟關鍵字拿回一串連結跟摘要；WebFetch 給它網址把整頁文字讀回來，這兩種都是從外面連過去的陌生訪客，看不到你的後台；Claude in Chrome 在你這台電腦的 Chrome 開分頁、截圖、打字、點擊，你登入過的東西它都看得到。它直接在你的電腦上、用你的登入狀態操作，能做的事比較多，出錯時影響也比較大。

Claude in Chrome 五步驟裝好

只有 Chrome 能裝，Edge、Arc、Safari、手機都沒有。線上應用程式商店搜 Claude，發布者要寫 Anthropic，同名的別家不要裝；登入上課用的那個帳號，Pro、Max、Team 有、免費版沒有；釘到工具列，不釘等一下會找不到；點圖示右邊開出側邊欄，最下面那個輸入框打得了字就是裝好了。

拿你自己的頁面來試

「開這個檔案，先用電腦寬度截一張，再用 390 寬度截一張」、「手機版有沒有哪裡爆版或看不到」、「把所有點下去沒反應的連結列出來」。前六週它答不出手機版會不會爆版，因為它沒開過手機寬度；現在同一組指令換成 768、1024 再跑一次，平板寬度的問題也一起看得到。它讀回來的東西要自己核一遍，頁面寫錯它就跟著錯。

讓它填表單，但送出前停下來

「把這份諮詢表單用一個假的例子填完，先不要送出」，它填完停下來問你要不要送出，你看過內容自己按。送出是不能回頭的動作，表單一送、訊息一發、東西一買，收不回來。「填完先不要送出」這句話寫進 CLAUDE.md，每次都生效。

網頁上的文字可能被 AI 當成指令

你的指令跟網頁上的文字，進到它眼裡都是一串字，它分不出哪句是你講的。W5 講的 EchoLeak 是一封信裡藏指令，Amazon Q 的擴充套件被塞進刪除指令，差別只在那次是信箱跟編輯器、這次是你的瀏覽器。四條規則：不給它金錢相關的網站，網銀、金流後台、付款頁一律不授權；送出的動作自己來，寄信、發文、下單、刪除它填好你按；網頁叫它做事就停，發現它照做了關掉分頁重來；一次只開要用的分頁，做完就關。

哪些放心交給它，哪些你自己來

放心截圖、讀內容、整理成表、檢查自己的網頁、比對競品、抓公開資料做清單、填表單填完停住

自己來輸入密碼信用卡身分證、按送出發布購買刪除、同意條款、給第三方授權、改帳號設定與權限

依需求決定要用哪一層工具

「每次都要重講一遍我的規矩」是 CLAUDE.md；「每次都要貼同一段做法給它」是 Skill；「查完一堆東西才有結論，中間過程我不想看」是 Subagent；「我的資料在某個服務裡，它拿不到」是 MCP；「那個網站沒有 API，只能用點的」是 Chrome。分不出來也沒關係，把那件事講出來，要具體到動作，不要打「幫我做行銷」。

每個人做一個 CLAUDE.md

在專案資料夾最外層開一個檔案，大小寫要一樣；懶得從零寫就打 /init，它讀你的檔案先生一份草稿；三段就夠：這是什麼、每次都要遵守、不要做的事；存檔重開一個對話，它是開場才讀的，改完不重開不會生效；打 /context 看 Memory files 那一欄有沒有出現。200 行以內，寫太長它照做的機率反而會掉。「格式弄好」它照不了，「改完給我完整檔案」它照得了。

每個人做一個 Skill

開一個資料夾 ~/.claude/skills/檢查網頁，資料夾名字就是之後打的指令；裡面開 SKILL.md，最上面用 --- 包一行 description 寫「什麼時候該用它」，它靠這句決定要不要自己叫出來；下面寫做事的步驟，把你平常重複貼的那一段直接搬進來。CLAUDE.md 每次開對話都整份載入所以要短，Skill 用到才載入寫長也不佔位子。我的 dev-diary 那個 skill 六步：照寫作規則寫成 HTML、生封面圖、內文圖上傳圖床、去 AI 味自檢、逐句重寫、打包發布，blog-drafts 現在 38 個資料夾全部照這條跑出來的。

現場寫一個補插圖的 Skill

一個專案版面有五個圖框，assets 裡只有四張，每次補圖都在做同一串動作：想畫面、寫成英文 prompt、生圖、裁成那一格的比例、轉成 png 丟進 assets。畫風那一段有十幾個詞要每張一致，用嘴巴重講一次就會歪，寫進 skill 之後下一張只要說「補 strip」。腳本吐出來的是 jpg、檔名要 png，中間多一步轉檔，這種小步驟寫進 skill，之後就不用每次重講。最後一步寫驗收：生完去看 assets 裡有沒有出現那個檔。

每個人接一個 MCP

有網址的服務一行 claude mcp add --transport http 加上網址；在你電腦上跑的用 npx；要金鑰的金鑰寫在指令的 --env 裡，不要貼進對話框；裝好打 claude mcp list 或對話裡打 /mcp。什麼都不加只有現在這個專案有，--scope user 每個專案都有，--scope project 寫進 .mcp.json 跟著專案給別人。裝不起來通常三種：那個服務沒有 MCP，改用 Chrome 用點的或 W8 用 n8n 繞；要金鑰但你沒有，去後台申請；裝了但它不用，多半是沒講清楚什麼時候該用，在 CLAUDE.md 寫一句就好了。

W62026.08.22

這個點子值不值得做

先問對問題，再把常用的做法存起來，讓 AI 每次照做。

上半場：這個點子值不值得做

別問「你會不會用」

問他上禮拜做了幾次、花多久、現在怎麼解決。

真的痛很久，才有人買單

一套字幕軟體上線三天就爆紅，因為作者自己痛了十年。

熱門話題只紅幾天

反應夠快就接得住，晚了就沒了。

用熱門話題做小遊戲

示範怎麼把一則新聞寫成遊戲規則。

先查有沒有人做過

用使用者會講的話搜，再看社群上的抱怨。

畫面很容易被抄

抄不走的是你為什麼知道要做這個功能。

AI 會放大你的判斷

判斷對了做得更快，判斷錯了也錯得更快。

現在失敗很便宜

以前做一版要幾十萬，現在一個下午。

下半場：讓 AI 記住你的做事方法

規則檔：每次開工都會讀

寫這個專案是什麼、哪些東西不准動。

常用做法存成技能

同一段指示貼到第三次，就該存起來。

只要檢查一行說明

AI 靠這行判斷什麼時候該用這個技能。

存再多也不會變慢

平常只讀每個技能的一行說明，用到才讀全文。

存給自己，或存給專案

存給自己每個專案都能用，存給專案別人接手也有。

派分身去查資料

查的過程不佔對話空間，只把結論帶回來。

雜事才派分身

要來回討論的、改一行的小事，自己做就好。

讓 AI 連上其他服務

GA、Gmail、n8n 裡的資料，它可以直接拿。

連上服務等於交出鑰匙

只裝信得過的，先想清楚它能動到什麼。

四層一起看

規則檔、技能、分身、外部連線，各管一件事。

看本週完整紀錄+

W62026.08.22

判斷值不值得做，再把做法存下來

五週前你打不出一行程式，現在畫面會動了，接下來沒有人會問你程式怎麼寫，會問你這給誰用。上半場換三個問題：有沒有需求、有沒有人做過、別人抄不抄得走，全部用兩個台灣這禮拜正在發生的例子講完。下半場講第三題怎麼蓋：CLAUDE.md、Skills、Subagents、MCP，四層疊起來就是別人拿不走的那部分。

VALIDATE

用三個問題判斷值不值得做

怎麼問才問得出真話

「你覺得這個工具好不好」「如果有這種功能你會用嗎」「你會不會想要更方便一點」，每個人都會說好，說好的人一個都不會付錢。換成「這件事你上禮拜做了幾次」「做一次花你多久」「現在你怎麼解決」「那個方法哪裡不爽」。「我覺得這個很需要」是假設，不是答案，答案不在你腦袋裡。

案例 A：痛了十年的需求

頻道壹加壹的 Lean 做了一套繁中字幕桌面軟體 What'Sub，8/19 上線，一個人的專案、投入 20 萬、開發半年，三天內影片 27 萬次觀看、新訂閱一度停開。他沒做過問卷，是每支片都要痛一次：他知道痛多久（十年）、痛在哪一步（斷句跟對時間軸）、誰跟他一起痛（所有做繁中影片的人）。你的題目不用去外面找，就在你已經做了很久的那件事裡：本業、興趣、大家都來問你的事。挑對的訊號很好認，你已經自己弄了一套 Excel 或範本在撐那件事，那份 Excel 就是第一版產品。

案例 B：只有三天的需求

這禮拜全台灣都在講 Joeman 凌晨兩點三十九分那碗牛肉麵，彰化員林一家店名念起來像九妹的牛肉麵店什麼都沒做就爆單，老闆煮到暈眩，自己跑去 Threads 標 Joeman 一邊酸一邊宣傳。他沒有企劃、沒有預算，只是反應夠快。十年的坡跟三天的峰兩種需求都能做，做法完全不一樣。

兩種需求，兩種做法

做多久熱點三天內要上線，第四天沒人看；長期的痛半年可以慢慢磨

功能熱點只要一個機制會動就好；長期的痛要完整，少一個功能就不能用

代價熱點一個下午丟掉不心疼；長期的痛投入半年白費

得到熱點換作品集、流量、一次完整的上線經驗；長期的痛可能有收入

用熱門話題做遊戲時怎麼寫規格

《凌晨兩點三十九分》，玩家是那個被一通訊息挖起來、開車過去煮那碗麵的人。核心機制是煮麵四個動作，越接近四點他要得越急；壓力來源是連續狂點會恍神強制停三秒，把凌晨三點被挖起來直接變成難度；結束畫面顯示端出幾碗、撐到幾點，給一張可以截圖的成績卡。骨架就這三塊。不做：登入、會員、排行榜（要後端，W8 之後才有）、當事人姓名肖像對話截圖、真實店家的招牌商標。砍功能是熱點題唯一的做法，蹭熱度一樣要遵守著作權跟人格權。

十分鐘查完有沒有人做過

直接搜功能，用使用者會講的話搜，不要用你的產品名；搜社群抱怨，Threads、Dcard、PTT 搜同一個痛點；問 Claude，叫它列現有工具跟各自的弱點再自己點開驗證；看價格，沒人收錢的領域多半是沒人願意付；看更新日期，三年沒更新等於沒有人在做；看國外有沒有，國外有台灣沒有通常就是你的縫。有人做但難用、貴、沒中文，這就是你的位置；完全沒人做過，要先想想是不是沒人要。字幕工具很多，What'Sub 只挑「繁中創作者的斷句」這一段：按 Enter 照唸的節奏切、按減號合併回去，還有一組專屬詞庫。

別人能抄走你的哪些東西

程式碼擋不住人。別人看到你的畫面，叫 AI 也生得出一份長得很像的，你花兩週刻的介面他兩個下午就有一版。抄不走的是你為什麼知道要做這個功能：照閱讀節奏斷句是知道觀眾眼睛跟得上的字數、邊界磁吸到剪接點是知道字幕壓在剪接點上會閃、字幕安全框是知道 IG、FB、YouTube 各自會蓋掉畫面哪一塊。以前懂剪片的人不會寫程式，工程師聽不懂「字幕壓在剪接點上會閃」，來回三個月做出來還是不對；現在中間那層翻譯不見了，領域知識可以直接變成產品規格。你們每個人身上都有一個 Lean 的十年，只是換一個領域。

AI 會放大你的判斷，對錯都一樣

AI 降低了把東西做出來的門檻，沒有降低知道該做什麼的門檻：選得出值得解決的題目、知道哪個功能先做、知道使用者卡在哪一步、看得出做出來夠不夠好。最常見的失敗是介面很漂亮、功能很多、跑得也順，就是沒有人用，因為第一題從頭到尾沒問過人。做得快、錯得也快，所以前面那兩題要在動手之前查完。下半場動手之前先在紙上答三題：三個來源挑一個、這件事裡最煩的一步、圈外人會怎麼做錯。第三題答得出來的人，這學期的專案就有護城河了。

現在失敗一次的成本很低

找人外包一個網站幾十萬起，What'Sub 那種等級 20 萬半年，你們現在的梗遊戲 Artifacts 開一個對話一個下午。W1 的構想書 W2 寫 PRD 時整個改掉、W3 的視覺框架第一版幾乎都退掉、W4 的首頁 W5 加了多頁面之後又拆過，每一次都是丟掉一個版本再重來，只是那時候沒把它叫做失敗。做十個東西丟掉九個，跟改十版留最後一版，動作是一樣的，差別只在你有沒有把前面九個放出去給人看。What'Sub 上線三天同時有支持跟質疑，被罵先分兩堆：講得出情境、好幾個人講同一件事的先改；只講立場、講的是你沒有在服務的族群、要你加一個會拖垮主線的功能的先放著。

LAYERS

幫 Claude Code 加上四層設定

第一層 CLAUDE.md：每次開工都會讀

它是這個資料夾的規矩，Claude Code 一啟動就整份讀進去，你不用再講一次。好處是它不會忘，代價是每次開工都要整份讀一遍，你寫愈多每次佔的位置就愈多。適合放這裡的：這個專案是什麼、給誰用、哪個資料夾不准動、檔案放在哪、命名怎麼取，共同點是短而且每一次都要知道。不適合的：一整套十二個步驟的做法、寫作規則、輸出格式範本，共同點是長而且十次裡有九次用不到。做法要另外存，用到才讀，那個東西叫 skill。

第二層 Skills：同一段話貼到第三次就存起來

每次叫它寫文章都要再貼一次「口氣像我、不要 AI 味、圖三張」，每次叫它報價都要再貼抬頭、計價方式、付款條件。官方文件寫的判斷時機：當你一直把同一段指示貼進對話。一個 skill 就是一個資料夾，裡面有一份 SKILL.md，資料夾叫什麼你就打斜線加什麼，附件放旁邊。上半場第三題講的護城河就是你的做法，做法變成檔案，它才有辦法每次都照著做。

這個檔案你不用自己打，在 Claude Code 裡直接講

幫我做一個 skill，叫 competitor。
用途：我講一個產品點子的時候，幫我查有沒有人做過。
每次要做的事：用一般人會講的話搜功能、去 Threads 跟 Dcard
搜同一個痛點、列出現有工具跟各自的弱點、看國外有沒有、
看它們收不收錢、看最後更新日期。
產出一張表，一個競品一行，最後給我一句結論：換題目還是換族群。
description 幫我寫清楚什麼時候該用它。

寫好 skill 後只要檢查 description

name 是你要打的指令名字，description 是「什麼時候要用這份」，tools 是只准它動哪些工具。Claude 之後就是拿 description 那行決定要不要把整份讀進來：寫「寫提案」三個字它不知道你什麼時候算在寫提案，你不打 /proposal 它就當沒這回事；要做什麼、做出來長怎樣、你會怎麼開口三件都給進去，它才知道什麼時候該自己跳出來。嫌它寫得太籠統，補一句「description 把使用時機寫進去」再讓它改一次。

skill 存再多也不會拖慢速度

我這台電腦上 9 個 skill 硬碟上的說明書全文 63,072 字，開機時真的讀進去的只有每份的那一行 description，1,247 字，差 50 倍。真的叫到才把整份讀進來，這是 skill 跟 CLAUDE.md 最大的差別。最小的 /proposal 905 字，最大的 /dev-diary 21,310 字：先讀寫作規則檔把去 AI 味黑名單當成約束、去 n8n 撈工作流實際長什麼樣、照固定結構寫成 HTML、叫本機 ComfyUI 生示意圖插回文章，以前開四個視窗自己接一篇耗掉一個下午。那份去 AI 味黑名單 4,692 字只有一份，四個 skill 共用同一個路徑，以前複製了四份，改一次要改四個地方然後一定漏一個。

skill 要放個人資料夾還是專案資料夾

~/.claude/skills 放個人，你這台電腦的每個專案都叫得到，你的口氣、你的寫法、你的習慣放這裡；專案資料夾/.claude/skills 只有這個專案有，推上 GitHub 之後接手的人 clone 下來就有同一套規矩。兩邊同名個人優先，接案的人多半兩邊都放：自己的手法放個人、客戶的規定放專案。你自己打斜線它照做，或你講的話對上 description 它自己把整份讀進來；只讀不寫的讓它自己判斷比較省事，會寫檔案、會發布、會花錢的我都留給自己叫，檔案最上面加一行 disable-model-invocation: true 它就只認你打的斜線指令。

第三層 Subagents：查資料不佔主對話的空間

叫它把 blog-drafts 裡二十篇文章看過找出哪幾篇沒配圖，它照做了也答對了，但那二十篇的全文全部留在對話裡，接著要寫新文章的時候位置已經被吃掉一大半。W3 講過視窗有限，查資料最花的不是腦力是位置。分身有自己的一整個視窗，做完就丟，只拿結論回來，你的視窗只多了那一行。一個分身也是一個檔案，放 .claude/agents，格式跟 skill 幾乎一樣多兩個欄位：tools 那行是真的限制不是建議，沒寫 Write 它就改不了你的檔案；model 可以指定 haiku，這種活用便宜的就夠。

什麼情況適合派 Subagent

值得派：過程一大堆你只要結論、同一種檢查要跑很多遍、要把它綁成只能讀不能改、用便宜的模型就做得完。別派：要來回討論才講得清楚的、要接著用剛剛聊的東西、改一行就好的小事、你就坐在旁邊等結果。派出去要多等一段時間而且它問不到你，分身看不到你們剛剛的對話，要交代的事得在派它的時候一次講完。

第四層 MCP：讓 AI 連上外部服務

你的 GA 流量在 Google 那邊、關鍵字排名在 Search Console、n8n 工作流在 n8n、客戶需求在 Gmail，前面三層只動得到硬碟，目前的做法是開網頁、圈起來複製、貼回對話。W5 講過那些畫面底下都是在打 API，既然是 API 就有辦法讓它自己去打。以前三個 AI 工具想接四個服務要寫十二份接法，中間訂好規格之後各接一次就好，USB 之前每台印表機一種插頭，現在都插同一個孔。Anthropic 2024 年 11 月把它開源，現在不只 Claude 在用。

我這台現在接著的

ga直接問這個月哪一篇流量最高（user）

gsc問哪些關鍵字有排名、哪幾頁沒被收錄（user）

n8n撈工作流、改節點、看執行紀錄（user）

comfyui叫本機的 ComfyUI 生插圖（user）

gmail客戶信件內容直接進來（官網專案）

n8n-cloud那個客戶的雲端 n8n，跟我自己的分開（官網專案）

裝 MCP server 前要想清楚它能動什麼

一行 claude mcp add 裝完，claude mcp list 顯示 Connected 就接上了；什麼都不加只有你、只有這個專案；--scope user 你這台電腦的所有專案；--scope project 寫進 .mcp.json 推上去同事一起有。官方文件在這件事上寫了警告：連接之前先確認你信任這個 server，會去抓外部內容的 server 可能讓你暴露在 prompt injection 風險下。裝之前先問這個 server 動得到什麼，只能讀 GA 數字，跟能寄信、能改資料庫，是兩件不同等級的事。

四層放一起看

CLAUDE.md 存這個專案的事實與規矩，每次開工整份讀，跟著這個資料夾走；Skills 存你的做法、規則、範本，叫到才讀，個人或專案；Subagents 存要外包出去的雜活，只有結論回來；MCP 存外面服務的接法，需要的時候才呼叫。四層都是純文字檔，都放在 .claude 那個資料夾裡，都可以推上 GitHub。模型大家都有，同一個版本、同一個價錢；你這五週退過的稿、改過的規矩、客戶的脾氣、行業的忌諱，沒有一條在模型裡，全部在你手上，寫下來它才會照著做。上半場那個技術護城河，蓋得起來的地方在這裡。

W52026.08.15

搞懂網站的前台和後台

再叫 AI 做幾個只有自己會用的電腦小工具。

上半場：網站的前台和後台

網站分前台和後台

前台是畫面，後台存資料、算錢，使用者進不去。

後台壞掉比較嚴重

前台壞是畫面跑掉，後台壞是資料錯亂或外洩。

前台的程式誰都看得到

密碼和算錢的方式不能放在前台。

使用者送來的資料不能全信

價格要在後台重算一次，不然 3,000 元可能被改成 1 元。

網站壞了先按 F12

把紅字錯誤訊息貼給 AI，它才知道哪裡壞。

密碼另外存一張小抄

不寫進程式裡，上傳時才不會被別人掃到。

自己電腦、測試網址、正式網址

把程式從自己電腦搬上網路，就叫部署。

網站掛了先退回上一版

先讓網站恢復，再慢慢查哪裡壞。

下半場：叫 AI 做電腦小工具

滑鼠點的每一下都是指令

改兩百個檔名，一行指令就做完。

三個條件都有才交給 AI

講得清楚、檔案在電腦裡、做完你看得出對不對。

六種好用的小工具

清硬碟、找舊檔、整理下載、批次改圖、合併 Excel、轉影片。

刪檔案前先列清單

你看過清單、點名之後，它才刪。

好用的做法存起來

做成桌面上點兩下就能跑的檔案。

需求一次講完

一句一句加，它每次重做，前面改好的可能被蓋掉。

每做好一段就存一版

存到雲端，改壞了可以退回去。

第一版一定有問題

這門課的簡報工具，也是跟 AI 一起修了好幾輪才能用。

看本週完整紀錄+

W52026.08.15

看懂 AI 改的是網站前台還是後台

前四週都是你在叫它做事，這一週的重點在它回你的那幾行字。看不懂它在講什麼的時候，你只剩下一個選擇：按同意。上半場是十個它天天在用的詞，下半場離開專案，叫它做電腦上的雜事，再把做出來的東西推上 GitHub。

TERMS

網站的前台、後台，以及程式怎麼上線

前端和後端的差別

前端是使用者瀏覽器裡的畫面、按鈕、互動，全世界都看得到；後端是伺服器上的資料、邏輯與權限，客人進不去。API 是兩邊講好的點餐窗口，你照格式送請求，對方照格式回資料。叫它把按鈕改成圓角是外場的事，叫它做一個會員登入就進廚房了。

前端和後端改壞的後果差很多

前端改壞是跑版、按鈕沒反應；後端改壞是資料錯亂、登入失效、資料外洩。上週做出來的那個資料夾現在全是外場的東西：html 是骨架、css 是裝潢、js 是動作，三種都跑在瀏覽器裡，還沒有廚房，資料也還沒有地方存。

資料夾裡那些副檔名，各裝什麼

.html網頁本體，畫面上有哪些東西

.css樣式，顏色、大小、位置

.js程式邏輯，按下去會發生什麼

.json設定與資料，寫給程式讀的

.md純文字文件，人看的，CLAUDE.md 就是這種

.env密碼與設定的小抄，只放在你電腦裡

前端的程式碼，任何人都打得開

它跑在使用者自己的電腦上，按 F12 就攤在眼前。金鑰寫在前端等於貼在店門口，價格怎麼算寫在前端客人可以自己改數字，「這個按鈕只有管理員看得到」也不等於別人做不到那個動作。看不出來是哪一半的時候，直接問它這段跑在瀏覽器還是伺服器。

從瀏覽器送來的資料，都當成被改過

這叫前端零信任，是後端最基本的一條規矩。最貴的一種是價格：前端顯示 3,000 元，送到後端的那筆數字被改成 1 元，後端沒有再算一次就照單全收。後端至少要自己驗身分、權限、資料、次數這四件。AI 預設常常只做前端檢查，畫面上擋住了看起來很正常，實際上後端什麼都沒驗。前端的檢查是使用者體驗，後端的檢查才是安全。

網站出問題先看 F12 的三個分頁

Elements 是外場的骨架，滑到哪一行畫面上那一塊就亮起來；Console 印程式出錯的紅字；Network 記錄頁面每一次對外要資料，點開看送了什麼、回了什麼。跟它說「網站壞了」它只能猜，把 Console 的紅字或 Network 那筆失敗的請求貼給它，它一次就找得到位置。

密碼和金鑰放在環境變數裡

程式跑起來的時候偷看一眼拿到密碼跟設定，小抄本身不裝訂進程式碼裡。金鑰寫死在檔案上，換一台機器就要改程式，而且這份檔案會跟著上傳，爬蟲每天都在自動掃公開倉庫裡的金鑰。實務上的固定姿勢是三步：本機放 .env、平台後台填正式值、.env 寫進 .gitignore。第三步漏掉，前面兩步就白做。

.env 長這樣，放在你自己的電腦裡

# 不上傳，也不進版本紀錄
OPENAI_API_KEY=sk-••••••••••••
DATABASE_URL=postgres://••••••
SITE_URL=http://localhost:3000

開發、測試、正式三個環境和部署

開發環境是你電腦上的排練室，網址通常是 localhost，只有你看得到；測試環境是部署平台給的預覽網址；正式環境是你對外公布的那個。部署就是搬程式碼、裝套件、套環境變數、啟動、綁網址這五段，失敗最常見的原因是正式那張小抄沒填齊，不是程式寫錯。

網站掛掉時先退回上一版再查原因

Rollback 就是讀上一個存檔，多數部署平台點一下重新部署上一個正常版本就好。順序不要顛倒：先 rollback 讓網站活過來，再慢慢查哪裡壞，本機修好、測試過，才部署新版。一邊查錯誤訊息一邊讓網站躺著，是最常付的學費。

TOOLBOX

叫它做只有你會用的小工具

滑鼠點的每一下都對應一條指令

滑鼠是給人用的介面，電腦本來就聽文字。開資料夾、排序、選取、右鍵重新命名兩百次，跟一行指令兩百個檔案同時改完，是同一台電腦、同一批檔案、同一個結果，差別只在誰負責把指令想出來。剛裝好還沒摸熟它脾氣的時候，拿雜事練比拿專案練划算，一件事講清楚就好，五分鐘跑完，對不對當場看得出來。

三個條件都成立才交給它

你能用中文把做完長什麼樣說清楚、檔案就在這台電腦上、做完你一眼驗收得了。第三題最重要，驗收不了的任務做完你也不敢用。

六種用得到的電腦小工具

掃 C 槽列出最佔空間的前 20 名、用檔名內容日期一起找舊檔、下載資料夾依副檔名分類改名、幾百張圖批次改尺寸轉檔壓縮、合併三十份格式一樣的 Excel、影片轉檔剪片抽音軌。共同點是步驟固定、重複很多次、做錯了你看得出來。改圖那類要注意界線，它處理已經存在的圖片，不憑空生一張。

講師本機掃一次的結果，2026-08，全程只讀不刪

C 槽總 238 GB，已用 189 GB，剩 49 GB

暫存Windows 暫存資料夾 1,043 MB

快取WinGet 套件快取 771 MB

更新Windows Update 暫存 183 MB

刪檔案一律分兩步

先列清單、你看過、再執行，中間那一步不能省。「幫我把沒用的檔案清一清」裡的「沒用」是它自己猜的；改成「列出候選清單給我看，我點名之後你再刪」，決定權就留在你手上。Windows 資料夾、登錄檔、Program Files、雲端同步資料夾這四個地方不要讓它自己判斷，同步資料夾裡的刪除還會傳染到你其他台電腦。

好用的做法要存下來

同一件事講到第三次會覺得煩，那時候就叫它把做法存成一支檔案。可以留成腳本、寫進規則檔，或包成一個雙擊就跑的 .bat 放桌面。做 bat 有三件事要先講：路徑寫死不要靠目前所在位置、第一版先只印出會做什麼不要真的動檔案、不要內建刪除，會刪的動作改成搬到待刪資料夾。

一個階段的需求要一次講完

它像一個手很快的工讀生，差別在工讀生講到一半會抬頭問你，它收到就動。一句一句加，每一輪它都重新產一版，上一輪改好的地方這一輪可能被蓋掉。一個階段講完要有五件：對象與用途、內容、規則、界線、節奏。界線最常漏，節奏最少人講，講了整個過程會順很多。例外是 plan mode，連按兩下 Shift+Tab 切過去，它只讀、只問、只提計畫，不動任何檔案，這時候才可以邊聊邊想。

一次講完，以做一張海報為例

幫我做一張講座海報，直式 A4，要印出來也要放 IG 限動。
主題「Claude 實戰訓練營說明會」，時間地點照我給你的那一行，
右下角留一塊白給 QR code。
深色底、螢光青綠當重點色，字要大，站遠一點也看得到。
標題最大，時間地點第二層，其他都小。
不要漸層字，不要放沒有意義的裝飾圖示。
先做一版給我看，我確認方向再調細節。

把做好的版本推上 GitHub

Git 記錄這個資料夾每一次改了什麼，GitHub 把記錄放到雲端，名字很像但是兩件事。存一版只有三個動作：開一本記事本、挑出這次要存的、蓋章存檔附一句說明，你只要講「這個功能寫完了，幫我存一個版本，訊息寫某某某」。推之前先把金鑰、含個資的測試檔、會變動的個人設定排除進 .gitignore；推上去之後才發現的話，把檔案刪掉沒有用，歷史紀錄裡還留著，只能到那個服務後台重新產一組新的。

第一版有問題就跟 AI 一起修

這門課的每一份簡報都是先做成網頁再轉成 PPTX，一句「把這份 HTML 簡報每一頁截圖，組成 16:9 的 PPTX」換到一支 120 行的腳本，之後每一份改一個檔名就好。第一版截出來內容全部擠在上面、下面一大塊空白、字也比瀏覽器裡小，把這幾個現象講回去，它自己查出是無視窗模式的瀏覽器外框吃掉高度、導致版面算錯。

W42026.08.08

第一次讓 AI 直接動手寫網頁

從一個資料夾開始，做出第一個打得開的檔案。

上半場：什麼是 Vibe Coding

用講的寫程式

說需求、看結果、再說哪裡要改，一直重複。

不是隨便講講就好

門檻從會不會寫程式，變成講不講得清楚。

做得快，檢查要花時間

AI 寫得很快，但要花時間確認它做對了。

AI 取代的是打字

做出來好不好，還是要人自己判斷。

AI 自己動手做

它能自己開檔案、改檔案、看錯誤訊息，不用你複製貼上。

跟錢有關的要請懂的人看

自己用的小工具可以放手做，收錢和個人資料不行。

AI 寫的程式常有漏洞

沒有特別要求，它就不會注意安全。

從自己寫，變成管 AI 寫

發明這個詞的人，一年後說重點是指揮和檢查。

下半場：第一次讓 AI 開工

一個資料夾就是一個專案

它只看得到這個資料夾裡的東西。

檔名要取清楚

它靠檔名找檔案，「最終版2」它看不懂。

規則要寫得能檢查

「程式要乾淨」沒辦法檢查，「不准改這個資料夾」可以。

開工前先講清楚案子

先說明要做什麼，它會整理成一份規則檔。

一次只做一頁

叫它做整個網站，每一頁都只做到七成。

它問你的時候要看清楚

改檔案、刪檔案之前，它會停下來等你同意。

它說做好了，要自己打開看

跟設計稿並排比，一頁一頁點過才算數。

要改就講清楚三件事

哪一塊、現在怎樣、要改成怎樣。

看本週完整紀錄+

W42026.08.08

把文件變成第一個打得開的檔案

Vibe Coding 這個詞 2025 年 2 月才出現，同年被 Collins 選為年度詞彙，提出的人隔年自己說它過時了。它做得到，是因為模型可以自己開檔案、跑指令、看結果再改，一直重複到做完。前三週交出來的四樣東西全是文件，這天開始變成打得開的檔案。

VIBE CODING

Vibe Coding 這個詞怎麼來的

Vibe Coding 原本的定義

Andrej Karpathy 在 2025 年 2 月的貼文裡描述自己寫程式的狀態：不再一行一行讀，只是看、講、跑、把錯誤訊息複製貼上，然後它大部分時候就修好了。這個詞從那則貼文開始被大量轉傳，同年年底 Collins 英語詞典選它當年度詞彙。後來一整年的爭論，起點就在「大部分時候」這四個字。

「氛圍編程」這個翻譯容易讓人誤會

中文常翻成氛圍編程或憑感覺寫程式，字面沒錯，但它讓人以為重點是放鬆、隨便講講。實際上是用自然語言描述需求、AI 產生程式碼、你負責判斷。門檻沒有消失，只是從「會不會寫」換成「講不講得清楚」，再多一個新的：看不看得出來它做錯了。

用 AI 寫程式會變快，也可能變慢

三個數字不衝突：產出變快、驗收變慢，總時間是快是慢，看你花多少力氣在檢查。METR 那組人慢下來，就是因為驗收的時間被低估了。

三份公開研究，同一件事的兩面

+55.8%GitHub 自己的 Copilot 研究，開發者完成指定任務更快

−19%METR 隨機對照實驗，資深開發者事前預期快 24%，實測反而慢了，自己還沒察覺

66%Stack Overflow 四萬九千人調查，最大困擾是答案「幾乎對，但不完全對」

AI 取代的是打字，判斷還是要人做

METR 那組資深開發者變慢，是因為他們原本就會寫，AI 幫他們省的時間比不上檢查的時間。不會寫程式的人處境不同，他們省下的是「先學三年程式」這段時間。代價是得把另外一半練起來：講清楚，然後驗得出來。

Agent 和聊天機器人的差別

前三週用 Chat 跟 Design，形狀都一樣：它產出一段東西，複製貼上落地是你在做。Agent 跟聊天機器人的差別只有三件事，它自己讀得到資料夾的現況、自己建檔改檔執行指令、自己看得到跑出來報什麼錯。三件湊齊它就能自己轉圈：讀取現況、決定下一步、動手、驗證，錯了繞回第一步，不用你講第二次。模型本身沒換，還是在猜下一個字，多的是一組工具跟外面那個迴圈。

壞掉時誰要負責，決定能不能交給 AI

個人工具、內部小流程、還沒上線的原型、自己的網站門面，做爛了刪掉重來，成本是你自己的一個下午。牽涉金流、身分驗證、別人的資料這三類不一樣，做錯的代價是賠錢跟別人的損失，即使用 AI 寫也要有人真的看懂每一行。這條線看的是出事誰要負責。

AI 預設不會注意資安

Veracode 的檢測裡，45% 的 AI 生成程式碼含有 OWASP Top 10 等級的資安漏洞；CodeRabbit 分析 470 個 pull request，AI 協作的程式碼重大問題是 1.7 倍、資安漏洞 2.74 倍。沒有人要求，它就不會特別注意安全。

Karpathy 一年後改用 agentic engineering

Karpathy 在 2026 年初說 vibe coding 已經過時，他改用 agentic engineering：99% 的時間不直接寫程式碼，你在指揮一群寫程式的 agent 並且做監督，而這件事有它的技藝跟專業。他還補一句，懂架構的人指揮 agent 能放大十倍百倍，不懂的人只是更快產出壞東西。

CLAUDE CODE

第一次開工要先定好順序和範圍

一個資料夾就是一個專案

你在哪個資料夾把它叫起來，那個資料夾就是它的整個世界。這句話有兩面：沒放進去的東西它讀不到，所以材料要先搬進來；資料夾外的東西它碰不到，所以你其他的檔案是安全的。開一個乾淨的新資料夾，不要直接在桌面或下載資料夾裡開工。

檔名要取到 AI 看得懂

資料夾裡放五份文件，它不會每次都全部讀完，挑的依據就是檔名。叫「最終版2」「真的最終版」，它只能一份一份打開來看，視窗很快就滿；叫「需求包」「色票與字級」「首頁設計稿」，你說要改顏色它直接開色票那份，其他不碰。

CLAUDE.md 的規則要寫到能檢查

CLAUDE.md 是這個專案的 System Prompt，每一輪都在最前面被讀一次。「程式碼要乾淨」「不要過度設計」這種它每次都會說好，然後照自己的理解做，你也沒辦法指出它哪裡沒照做。判準跟 User Story 卡一樣：不能驗收的規矩，跟沒寫一樣。

同樣是規矩，換成檢查得了的寫法

一次只改一個檔，改完停下來讓我看。
顏色只用色票那五個，不要自己加。
不確定就問，不要自己猜。
格子從手機的單欄開始排，不要一上來就兩欄。

開工的四個步驟

切到資料夾把它叫起來、用平常講話的方式講一遍這個案子，這兩步硬碟上還沒有任何東西被動到。接著打 /init，它拿你這段話加上資料夾裡的檔案寫成 CLAUDE.md 草稿，第一次建檔會跳出來問你准不准；最後你看過草稿再改。四步大概五分鐘，做完它才知道你在弄什麼，後面就不用每一輪重講一次。

第二步打進去的第一段話

這個資料夾是我接的案子，要幫一家自家烘豆的咖啡店做官網。

需求包那份寫他們要什麼，色票與字級是配色，首頁設計稿是版面。

你先把這三份讀過，不要先動手做東西。

沒講範圍，它會一次把整個網站做完

說「幫我把這個網站做出來」，它真的會把六頁全部生出來，跑十幾分鐘，每一頁七成。看起來很有進度，實際上你不知道從哪裡開始改，任何小修改都要跨六個檔。改成「先做首頁，其他頁先不要碰，做完告訴我你建了哪些檔」，每一輪都短、看得完、驗得了。改得小，壞了也退得回來：還在跑就按 Esc 中斷，剛改完可以叫它把上一次改動撤回，滿意的版本把整個資料夾複製一份留著。

它停下來問你時要看清楚再同意

建立一個還不存在的檔可以快點放行，修改已經存在的檔要先看一眼是不是你要它改的那個，執行指令跟刪除檔案要停下來看清楚。按 Shift+Tab 可以在 Manual、Accept Edits、Plan Mode 之間切換，第一次用全程停在 Manual。選「以後都不用問」很方便，代價是那一類動作以後全部自動放行。

它說做好了，還是要自己打開檢查

幻覺在這裡的樣子，是它很肯定地說已經照設計稿做完，你打開一看差很多。它沒有真的打開成品看過。雙擊那個網頁檔打開、跟設計稿並排比、對著頁面清單一行一行點名，驗過才有東西可以講；沒打開看就說不好看，它只能亂猜著改。

不滿意要講三件事：哪一塊、現在怎樣、要變成怎樣

「整體感覺怪怪的」「再修一下」，它只能挑一個統計上最常見的方向去改，改完你更不滿意，兩邊一起繞圈。「報價表單那一區，欄位排成一直排太長，改成兩欄並排」三件齊了，它一次就改得對。檢查方式是看你講的這句話能不能拿去驗收。形容不出來的時候截圖直接貼，「這裡跟這張圖不一樣」比十個形容詞好用。

W32026.08.01

讓 AI 記得你的專案

把專案資料整理成檔案交給它，再決定網站要長什麼樣子。

上半場：AI 為什麼會忘記

AI 其實沒有記憶

每次回答，它都把整段對話從頭重讀一次。

一次能讀的量有上限

對話太長，前面的內容會被擠掉。

放中間的最容易被忽略

重要的規則放最前面，或最後再講一次。

幫它補上專案資料

把需求、頁面清單整理成檔案，上傳給它。

資料存成純文字檔

Word 和 PDF 裡的表格常被讀壞，純文字最不會出錯。

資料太多時，只挑相關的給它

先找出意思最接近的幾段，再交給 AI 回答。

資料不多就不用這麼麻煩

一份檔案裝得下的時候，直接上傳就夠用。

下半場：為什麼 AI 做的網站都長一樣

六種行業，做出一樣的網站

顏色換了，骨架都是同一套。

沒講清楚，它就做最常見的

它最常看到的那種設計，就是它的預設。

計畫書沒寫要長什麼樣

內容寫清楚了，風格、顏色、參考網站還沒寫。

用五行描述一個頁面

目標、版面、內容、給誰看、風格。寫上「不要什麼」最有用。

先設計，再寫程式

順序反了，寫好的畫面要整個重做。

顏色和字體定成固定數字

每一頁照同一組數字做，看起來才會一致。

排版可以，插畫不行

插畫和照片要自己另外準備。

看本週完整紀錄+

W32026.08.01

幫 AI 建一個記得住專案的知識庫

AI 每次開新對話都不認得你的專案。它本來就沒有記憶，要補回來得分兩層：短期靠上下文視窗，長期把知識寫成檔案放在外面。至於用 AI 做出來的網站為什麼長得都一樣，問題不在模型強不強，在於沒有人替它決定風格。

MEMORY

AI 為什麼會忘記，以及記憶怎麼補回來

它沒有記憶，每一輪都把對話重讀一次

模型本身不累積任何東西。你每送出一句話，它是把目前看得到的整段對話從第一句重讀一遍，再猜下一個字。所以「它記得我」是假象，記得的是那份被重讀的紀錄，不是模型；紀錄沒帶進來，它就什麼都不知道。對話越長，每一輪要重讀的量越大，變慢變貴跟模型退步無關。

上下文視窗一次能放的量有上限

文字進模型前會先切成 token，一次能塞進去的 token 有上限，這個上限就是上下文視窗。Claude 主力的幾顆模型目前是 100 萬 token，中文一個字大約吃掉 1 到 2 個。它的角色跟記憶體一樣：裝得下現在正在處理的東西，塞爆之後最舊的先被擠出去，對話一關就清空。要長期留住的東西，得寫在外面的檔案裡。

放在對話中間的內容最容易被忽略

Lost in the Middle 這篇研究把同一個答案藏在一疊文件的不同位置，再問模型同一題，答對率呈 U 型：放最前面或最後面高，要它去中間拿明顯掉下來，連專為長文本設計的模型也一樣。所以最重要的規則要寫進 System Prompt，它固定排在最前面、每一輪都被重新讀一次，不要埋進你貼上去的一堆文件中間。

長期記憶有三種，知識庫補的是事實和規格

情節記憶記的是發生過的對話與事件，語意記憶記的是事實、規格、專屬知識，程序記憶記的是事情該照什麼步驟做。上傳 PRD、頁面清單這類文件補的是語意記憶；程序記憶靠協作規則寫進 System Prompt，情節記憶靠自己留紀錄。

知識庫檔案用 .md 最不容易讀壞

.docx 的內容混在排版指令裡，抽成文字時表格最常被抽壞；.pdf 記的是「這個字印在第幾公分」而不是結構，兩欄排版容易被抽成左右交錯的亂序。Markdown 本身就是純文字，結構寫在 #、-、** 這些符號裡，你打開看到的就是模型讀到的。它又是 GitHub 與技術文件的通用寫法，模型看過的量遠比其他格式多，也不用花視窗位子去放樣式碼。

需求包.md：記事本就打得開，六個符號夠用九成

# 排課小幫手

## 第一版不做的事
- 金流串接
- 多人共用行事曆

## 核心使用者
**獨立接案的才藝老師**，手上 20 個學生以內，
現在用 LINE 訊息加紙本記出席。

RAG 是檢索、增強、生成三個動作

文件先照標題切成一段一段，每段算成一組座標存進向量資料庫；提問時只把意思最接近的幾段撈進視窗，整份文件不進去。比對的是意思不是字面，所以你問「首頁該放幾個按鈕」，線框裡寫的是「主要操作有三個」也撈得到，關鍵字搜尋在這裡會直接漏掉。

出現這三種情況才需要 RAG

一份文件就裝不下、答案散在很多份檔案、常常抓錯段落，這三個訊號都還沒出現之前，Markdown 知識庫就夠用。兩者差在知識量上限、更新成本，以及出錯時好不好查：改 Markdown 是直接改檔案，RAG 出錯還要先分辨是切段切壞還是比對抓錯。Cowork 的知識庫把檔案直接附進對話，站的就是 Markdown 這一端。

DESIGN

沒做設計決定，六個產業做出一樣的網站

六個產業的網站用的是同一組版面零件

六個不相干的行業各自描述自己的需求，跑出來的風格標籤沒有一個重複，但每一張都找得到同樣四樣東西：頂端徽章、漸層大標、三欄卡片、藥丸按鈕。換掉的是外皮，骨架沒動。技術上它沒做錯什麼，排版整齊、配色也沒衝突，問題在於沒有人替它決定骨架。

沒給設計方向，它就做最常見的版面

叫模型做網頁跟叫它接話是同一件事，只是這次猜的是下一個版面。Tailwind、Shadcn UI 這些在訓練資料裡出現過幾百萬次，你的品牌配色它一次都沒看過，機率會往哪邊倒是可以預測的。反過來說，只要是你刻意做過的決定，它就不再是 AI 味。決定得好不好是另一回事，先有決定才有差別。

需求文件沒寫視覺方向

PRD、User Story、頁面清單、文字線框回答的是內容與結構：給誰用、要能做什麼、有幾頁、每一塊放什麼。視覺方向那一半一個字都沒寫到：想要什麼調性、有沒有現成色票與 logo、參考哪個網站、誰在什麼裝置上打開。只給前半，它就只能挑統計上最安全的那組零件。

用五行描述頁面，AI 就不用猜

目標、版面、內容、受眾、風格，一行一句。前三行需求文件裡都有，抄過去就好；第五行的「不要」通常比「要」有用，因為它擋掉的正是模型看過最多次的那組零件。像是「不要三張一樣寬的卡」「不要寫訂閱人數」，講明了它就不會端出來。

給設計工具的五行範本（填好的樣子）

目標一頁服務頁，給我的 n8n 自動化接案用

版面hero、服務模式列、案例、聯絡，由上到下

內容hero 放一句主張加一張工作流示意圖；模式列分自動化與 AI 應用兩種，各列服務項目

受眾中小企業的老闆或窗口，來看這個人能幫我做什麼

風格深色底、青綠重點色、等寬字當標籤；不要置中三張一樣寬的卡

設計決定要放在寫程式之前

設計工具決定長什麼樣，Claude Code 負責讓它動，兩邊的弱項剛好互補。差別只在順序：設計放前面，Code 照著做；設計放後面，前面寫好的畫面全部要重來。交給 Claude Code 的是一包結構化的規格：元件規格、design tokens、版面層級、素材，Code 讀到的是數字，不用猜像素。

Design tokens 是把設計決定寫成數字

哪幾個顏色、字級跳幾階、間距用哪幾個數、圓角多少，全部定成明確的值。定下來之後每一頁都照這組長，不用每做一頁就重開設計工具描述一次品牌長什麼樣，團隊也才有辦法維護同一套。

Claude Design 能排版，插畫要另外準備

版面配置、排版、配色和 SVG 線條圖、簡單幾何形狀是守備範圍；複雜插畫、真實照片、高質感主視覺不是，這類素材得另外找圖庫或自己準備，在裡面硬拗只會燒額度。新圖示、重點插畫、產品與按鈕的命名這三樣自己來比較快，交給它會拿到很安全也很無聊的詞。

W22026.07.25

讓 AI 幫你把想法寫成計畫書

動手做之前，先寫清楚要做給誰、做到哪裡。

上半場：AI 為什麼老是說你好棒

AI 是被教成會聽話的

先學會說話，再看示範、被打分數，慢慢練出來。

讓 AI 變專家的三種方法

重新訓練、指定角色、給它資料。後兩種現在就能用。

AI 習慣說你好棒

要它挑毛病，就先指定它當一個嚴格的主管。

下半場：把要做的東西寫到能檢查

先寫完成品長什麼樣

寫不出賣點，代表還沒想清楚。

用一句話寫一個需求

誰、想做什麼、做完得到什麼好處。

功能分成四疊

一定要、應該要、可以有、這次不做。第一版只做第一疊。

先用文字畫出每一頁

每頁放什麼、按了去哪，先寫下來。改字比改畫面便宜。

看本週完整紀錄+

W22026.07.25

讓 Claude 成為你的產品經理

模型會聽話是被訓練出來的，會附和你也是。搞懂這個反射從哪裡來，才知道為什麼要替它掛上一個會挑戰你的人格；再往下就是把腦中的構想寫成別人看得懂、自己驗收得了的需求文件。

TRAINING

模型怎麼被訓練成聽話，又為什麼老是附和你

模型後訓練的三個階段

預訓練讀完資料只是把話學會，後面還有三關：SFT 看師傅示範標準答案、獎勵模型學會分辨回答的好壞、RLHF 讓模型自己練到出師。Claude 多一層憲法（Constitutional AI），把行為準則寫成明文再讓它照著自我修正。

讓通用模型變專家的三種方法

微調是動模型本身，成本最高；角色設定是用一段 System Prompt 指定它的身分與立場；餵資料是把專屬知識放進知識庫或 RAG。後兩條不用碰模型，現在就做得到，大多數情況這樣就夠用。

AI 會附和你，是訓練造成的

獎勵模型偏好讓人滿意的回答，所以直接問「你覺得如何」，得到的多半是稱讚。要它挑毛病，得在提示詞裡指定一個會挑戰假設的角色，明講要它找出沒寫到的地方。把構想書丟給一個毒舌產品經理，戳中的正是自己不想面對的那幾格。

把它換成會挑戰你的人格

你是一位看過 20 個專案倒在半路的產品經理，說話直接。
我貼一份構想書給你，請挑出三個最可能讓它失敗的假設，
每一個都反問我一個問題，答不出來就代表我還沒想清楚。

不要稱讚，不要幫我補完我沒寫的部分，
也不要提出解法，這一輪只負責問。

SPEC

動工前把需求寫到能驗收

開工前先寫完成品的樣子

Amazon 的做法是新產品動工前先寫一份對外新聞稿：講不清楚賣點就代表還沒想清楚。六格 PRD 是同一個邏輯的縮小版，把要做給誰、解決什麼問題、第一版做到哪裡先寫死，後面每一個功能爭議都回這張表判定。

用 User Story 三格句型寫需求

身為（具體的誰）、我想要（做一件具體的事）、這樣就能（得到一個好處）。第一格防的是做給想像中的人用，第二格防的是功能寫得太籠統沒辦法驗收，第三格防的是做完才發現對使用者沒有意義。

一張卡片填起來長這樣

身為手上 20 個學生以內、用 LINE 收排課訊息的才藝老師

我想要把一整串 LINE 訊息一次貼進輸入框

這樣就能不用一則一則手抄進紙本課表

MoSCoW 把功能分四疊

Must、Should、Could、Won’t，第一版只做第一疊。最難的是承認哪些功能這次不做。沒有這一疊，範圍會一路長大到做不完。

先用文字線框排好每一頁

迪士尼 1933 年就在用分鏡牆，先把每一格畫面釘在牆上排順序，錯了撕掉重畫。文字線框是同一件事的低成本版：每一頁由上到下哪裡放什麼、寫什麼字、按了會去哪，全部先用文字講清楚。這時候改一行字，比畫面做出來再改便宜太多。

W12026.07.18

第一堂：學會怎麼跟 AI 說話

AI 其實是在猜下一個字。話講得越清楚，它猜得越準。

上半場：AI 到底在做什麼

AI 是在猜下一個字

它讀過大量文字，但不會查證，講得順不代表講得對。

問問題要講四件事

你要它扮演誰、背景是什麼、要它做什麼、要什麼格式。

AI 會一本正經地亂講

把資料貼給它再問，並允許它回答「不知道」。

下半場：Claude 各個工具怎麼分工

你負責想清楚，AI 負責寫程式

不會寫程式的人，卡住的通常是沒想清楚要什麼。

Claude 有六個工具

聊天、知識庫、設計、成品預覽、寫程式、自動執行，各管一段。

看本週完整紀錄+

W12026.07.18

Chat 基本應用與專案啟動

大模型只做一件事：根據前文猜下一個字。理解這句話之後，提示詞為什麼要寫角色、背景、任務、格式，它為什麼會一本正經地講錯，全部都有了解釋。

BASICS

模型在做什麼，以及怎麼跟它把話講清楚

AI 模型其實是在猜下一個字

模型讀了十幾兆字、帶著幾千億個參數，能做的仍然只有一件事：看前文，挑機率最高的下一個字接下去。它沒有查證管道，也沒有真的理解你的處境。講得流利跟講得正確是兩回事。

提示詞要寫清楚四件事

角色決定它站在什麼立場回答、背景給它判斷用的前提、任務講明要它做什麼、格式規定產出長什麼樣。四件事缺一件，它就自己補一個機率最高的版本，落差多半就從這裡來。再往上有三招：給範例、要求它先追問再動筆、要求它先想再答。

四件套填起來長這樣

角色你是一位帶過十年新人的行銷主管，說話直接。

背景我是行銷企劃，明天要報告這季廣告成效，主管最在意花掉的預算換到什麼。

任務把我貼的數據整理成三個重點，每個重點後面附一句主管可能追問的問題。

格式條列三點，每點兩句以內，不要開場白也不要總結。

幻覺是猜下一個字的副作用

猜下一個字的機制不會因為「不知道」就停下來，遇到資料裡沒有的東西一樣接得很順。四個防法：把資料貼給它再問、明講只能根據給的內容回答、明確允許它說不知道、重要的資訊自己交叉驗證。

把它關進你給的資料裡

只根據我貼在下面的資料回答。
資料裡沒有寫到的，直接回「資料裡沒有」，
不要用一般常識補，也不要猜。

每個結論後面標出你是從第幾段推出來的。

WORKFLOW

VIBE Coding 與 Claude 各個工具的分工

會講清楚需求比會寫語法重要

VIBE Coding 的分工是：你負責想清楚要什麼、把話講明白、判斷做出來的東西好不好，程式讓 AI 寫。不寫程式的人通常卡在需求沒想清楚，這一段 AI 幫不了你。

Claude 六個工具各自負責什麼

Chat 用來想清楚與討論，Projects 放專屬知識庫，Design 決定產品長什麼樣，Artifacts 產出馬上點得動的成品，Claude Code 負責實作與部署，Cowork 讓代理自己跑完多步驟的任務。知道手上這件事該切到哪一個工具，比六個都學會有用。

第一梯已經結業，12 週的內容都在上面。想了解報名資訊可以到 XLab 活動官網看下一梯的時間。

←回活動分享 XLab 活動官網→逛 AI × n8n 知識庫→

12 週在做什麼

逐週紀錄

成果發表日

上半場：學員上台展示

下半場：看五個網友用 AI 做的作品

Demo Day：十二週做出來的東西上台

每組 Demo 分四段講

四段架構

看作品的五件事

Show HN 是線上的 Demo Day

Show HN 上五個 AI 作品點評

Super Dario：手感要自己玩過

Ribbie：沒資料的時候也有東西看

Puzzle Lair：AI 給的第一版長相要改

Lathoa：一句話講清楚要做什麼

Yamanote：先想好畫面，再叫 AI 做

五個作品的重點

把作品變成點了就能看的網址

上半場：交出點了就能看的網址

下半場：讓 AI 先問清楚再動手

Hook 與 Plugin 怎麼用，以及讓 AI 先問清楚再動手

交 demo 網址與設定 Hook 自動規則

GitHub repo 和 GitHub Pages 網址的差別

用兩句話做出 demo 版

Skill 和 Hook 的差別在誰來執行

五個最常用的時間點

用一句話加好四個自動化 Hook

Plugin 是打包好的資料夾，一行指令就能裝

裝之前看三件事

Cowork 併進 Claude 對話視窗了

用 grill-me 先問清楚，用 Jev 做便宜的判斷

一句需求背後有幾百個小決定

五個 skill 各管住 AI 一個壞習慣

跟 Superpowers 選一支

grill-me 會先查專案現況再發問

AI 給選項，最後由我決定

Jev 是只回機率的判斷模型

判斷依據要寫得很直觀

讓網頁自動抓別人的資料

上半場：做一頁會自己抓新聞的網頁

下半場：幫自己的作品加一個 AI 功能

接外部資料，再幫校稿王加一顆 AI 按鈕

接公開資料，以及對方掛掉時頁面怎麼處理

一次請求送出網址、收回狀態碼

狀態碼 4 開頭和 5 開頭的差別

有 API 就不要用爬蟲

直接抓 Google 新聞會被 CORS 擋下

接不通的三種樣子

外部服務隨時可能漲價或關掉

失敗畫面要做到三件事

大公司的網站斷網時怎麼處理

校稿王接上 AI 模型，再讓 AI 自己測試按鈕

幫校稿王加一顆 AI 配標題按鈕

第一句話就講清楚要做什麼和不能動什麼

AI 回傳的格式由我規定

改完自動寄一份到使用者信箱

什麼時候該寄信給使用者

用 Claude in Chrome 測試每一顆按鈕

Demo 前先放 30 筆測試資料

上線前補好四個小細節

第二版要加什麼功能

上半場：決定下一個功能

下半場：用我的校稿王示範做一個功能

第二版要加什麼，用校稿王示範只做一個功能

先刪掉沒人用的功能，再挑第一個要做的

做出來之後要先確認有人要用

加東西之前，先看舊的哪些沒人用

新功能的靈感從三個地方找

叫 Claude 去 Google 查大家在問什麼

AI 列出 15 個點子，自己刪到 6 個

免費版和付費版怎麼切

免費功能先只做一個就放出去

校稿王只先做「改好給你」

第一版 43 條規則只抓到三成的 AI 味

先丟 repo 網址讓它自己讀程式

我只講產品定位，功能清單讓它列

動手之前先做三件事

金鑰不能放在網頁裡

它改到不該改的地方，就退回 v1

三個常見狀況，看到就這樣講