出師 — 你的工具箱與 30 天計畫

你已經走了多遠

回頭看前 19 章，你練到的不是「會背 JavaScript 語法」，而是一組可以指揮 AI 寫程式的工作能力。白帶讓你知道程式是食譜：電腦快，但只會照明確步驟做。黃帶讓你摸過變數（variable）、判斷（condition）、迴圈（loop）和函式（function），知道資料放在哪、流程怎麼分岔、重複怎麼發生。綠帶把重點拉到 vibe coding 素養：需求要說清楚、輸出要驗證、bug 要縮小、不要把 AI 當魔法。藍帶讓你看見網頁、資料、後端、API 與部署（deploy）之間的路線圖。黑帶則把這些能力接到真專案。

你現在應該能做三件事。第一，看 AI 給你的 code 時，至少能分出「資料」、「流程」、「畫面」、「外部服務」幾塊，不再整坨貼上。第二，發現結果不對時，會用 ch12 練過的除錯（debug）姿勢，先找最小重現，不會只說「它壞了」。第三，交付前會做驗證（verification）：按一次、輸入錯誤資料、看 console、讀回結果。這三件事，比多背十個語法更接近真實工作。

const skills = ["寫清楚規格", "請 AI 產出第一版", "讀懂資料和流程", "用小測試驗證", "存檔再改下一步"];
console.log("黑帶流程：" + skills.join(" -> "));

工具箱決策樹

工具不是越多越好。完全不會寫程式的人，最容易卡在「我到底該用哪個工具」；結果一天換三套工具，真正的作品一個都沒完成。黑帶的做法是先問用途，再選路線。工具像廚房，不是先買滿所有鍋具，而是先決定你今天要煮泡麵、便當還是宴客菜。

如果你想做「網頁小工具」，例如報名表整理器、價格計算器、讀書計畫產生器，從單頁網頁開始。你需要的是 HTML 當內容架子、CSS 當外觀、JavaScript 當行為，前面 ch15 到 ch18 的全景足夠你和 AI 溝通。免費路線是：先在瀏覽器可跑的單檔完成，再用免費的靜態網站服務分享。

如果你想做「日常自動化」，例如整理檔名、把表格轉成摘要、定期產生清單，先從試算表或瀏覽器內能跑的小腳本開始，不急著碰伺服器。你要特別注意資料安全：不要貼密碼、金鑰（API key）或私人病歷給 AI；遇到刪除檔案、轉帳、寄信這類高風險動作，先改成只列出將要做什麼，確認後再執行。

如果你想做「app」，先不要被 app store、登入、付款嚇到。先把它拆成一個可點的原型（prototype）：有幾個畫面、每個畫面有哪些資料、按鈕按下去發生什麼事。等真人願意使用，再決定要不要做帳號、資料庫（database）和後端（backend）。

function chooseTool(goal) {
  if (goal === "網頁") return "先做單頁 HTML/CSS/JS 小工具";
  if (goal === "自動化") return "先做可預覽結果的小腳本，不直接刪改資料";
  if (goal === "app") return "先做可點原型，再決定資料庫和登入";
  return "先寫一頁規格，請 AI 幫你拆成最小版本";
}
console.log(chooseTool("網頁"));
console.log(chooseTool("自動化"));
console.log(chooseTool("app"));

30 天出師計畫

接下來 30 天的目標不是每天熬夜，而是讓你把 vibe coding 變成穩定肌肉。每天 20 到 45 分鐘就夠，但每次都要有產出。你要練的是「提出小題目、產出小版本、驗證小結果」的循環。題目越小，越容易完成；完成越多次，你越能分辨 AI 哪裡可靠、哪裡需要你盯緊。

第一週是熱身週。每天選一個生活小問題，寫成三段規格：我要做什麼、輸入是什麼、輸出是什麼。範例：把一串待辦清單依優先順序排序；計算三個方案的總價；把讀書章節分配到七天。請 AI 產出最小 JavaScript，貼到 console 跑，記下結果。這週不追求漂亮，只追求每次都有可驗證輸出。

第二週做第一個自己的工具。選一個你真的會用的題目，不要選給全世界用的夢幻產品。好題目像「我的課程進度表」、「門診備忘清單格式器」、「家庭旅遊預算計算器」。做完後，至少用三組資料測試：正常資料、空資料、故意怪的資料。這是 ch11 到 ch13 一直練的防線。

第三週交給真人。真人可以是同學、同事、家人，也可以是未來的你。請他完成一個具體任務，不要問「好不好用」這種空問題。你要觀察他在哪一步停住、哪個文字看不懂、哪個按鈕不敢按。第四週做第二個工具，並把第一個工具的回饋修一版。最後挑一個作品寫成短分享：問題、做法、驗證、下一步。

const thirtyDayPlan = [
  { week: 1, focus: "每天 20 分鐘小練習" },
  { week: 2, focus: "做第一個自己會用的工具" },
  { week: 3, focus: "給真人用並收回饋" },
  { week: 4, focus: "做第二個工具並公開分享" }
];
thirtyDayPlan.forEach(item => console.log(`第 ${item.week} 週：${item.focus}`));

卡住時怎麼辦

卡住不是失敗，而是你需要把問題變小。純 vibe coder 卡住時常做兩件事：一直重送同一句 prompt，或把整個錯誤丟給 AI 說「修好」。黑帶做法比較像帶實習生：先交代目前目標，再貼最小相關 code，再說預期結果與實際結果，最後要求它只改必要部分。這樣 AI 比較不會順手重寫整個作品。

一個好求救訊息可以照四格寫。第一格：我想達成什麼。第二格：我目前的 code 或操作。第三格：我以為會看到什麼。第四格：實際看到什麼錯誤或輸出。若有錯誤訊息，貼原文；若畫面怪，描述「按哪個按鈕後，哪裡沒有改變」。不要只說「不能用」。這不是禮貌問題，而是資訊密度問題。

免費資源也要會用。官方文件適合查規則，社群討論適合查踩雷經驗，AI 適合幫你整理可能原因。你不需要把每個答案都看懂到工程師等級，但要保留判斷權：凡是會刪資料、暴露密碼、改付款、寄大量信件、繞過網站限制的建議，都先停下來。你學過的驗證習慣，就是為了在這些時候保護自己。

const helpRequest = {
  goal: "按下計算後顯示總價",
  expected: "輸入 100 和 3，畫面顯示 300",
  actual: "畫面顯示 NaN",
  ask: "請只檢查數字轉換和計算流程，不要重寫整個頁面"
};
console.log(JSON.stringify(helpRequest, null, 2));

持續成長的三個習慣

第一個習慣是讀 diff。diff 是「這次改了哪些地方」的對照，不是工程師專用的神祕文字。你可以把它想成存檔前的收據：新增了什麼、刪掉了什麼、改了哪一行。就算你只看得懂一半，也比完全不看安全。看到 AI 一次改很多檔、刪大片內容、動到你沒要求的功能，就先停下來問原因。

第二個習慣是先驗證。每次改完，不要急著說完成。至少做三種檢查：正常使用能不能跑、錯誤輸入會不會爆、重新整理後資料還在不在。前面 ch09 的五力雷達其實都會回到這裡：不是信任感覺，而是信任證據。你不必寫完整測試系統，但要養成「我怎麼知道它真的可以」的追問。

第三個習慣是寫規格。規格（specification）不是厚重文件，而是你和 AI 的工作契約。最小規格只要五句：使用者是誰、他要完成什麼、輸入有哪些、輸出長什麼樣、不能做哪些危險事。規格越清楚，AI 這位實習生越不容易自己發明方向；你也越容易在作品跑偏時把它拉回來。

const spec = {
  user: "想整理讀書進度的人",
  task: "輸入章節數和天數，產生每日清單",
  input: ["總章節", "可用天數"],
  output: "每天要讀的章節範圍",
  forbidden: ["不要要求登入", "不要上傳私人資料"]
};
console.log("最小規格：", spec);

你是會指揮工程的人

這門課沒有把你訓練成全職工程師，也不需要假裝有。你的新角色更精準：你是會指揮工程的人。你知道程式是食譜，所以會檢查步驟；你知道資料像放進抽屜，所以會問資料存在哪；你知道 AI 像實習生，所以會給規格、拆任務、驗收成果；你知道 git 像存檔，所以會在大改前留下可回去的版本。

這個角色在 AI 時代很稀有，因為它站在兩種人中間。一邊是完全不碰 code、只能接受現成工具的人；另一邊是能寫底層系統的工程師。你不必取代工程師，但你可以把一個模糊需求整理到工程師或 AI 都能執行的程度，也能把產出驗到不會一碰就壞。很多小工具、小流程、小原型，本來卡在「沒人有空做」，現在你可以自己推動第一版。

出師不是離開道場，而是開始把道場搬進生活。從今天起，看到重複三次以上的事情，就問：這能不能變成食譜？看到 AI 給你的答案，就問：資料在哪、流程怎麼走、我要怎麼驗證？看到作品能跑，就問：誰可以試用、他會在哪裡卡住？這些問題會把你從只會貼 prompt 的人，推到能把想法做成工具的人。

function blackBeltCheck(project) {
  const passed = project.hasSpec && project.hasSmallTest && project.hasBackup && project.hasUserFeedback;
  console.log(passed ? "可以進入下一版" : "先補規格、測試、存檔或真人回饋");
}
blackBeltCheck({ hasSpec: true, hasSmallTest: true, hasBackup: true, hasUserFeedback: false });