拆解大任務 —
計畫 → 小步 → 驗證的迴圈
這章結束你會把一個模糊大需求拆成一次可驗證的一小步,讓 AI 穩定往前做。
開場 · 大需求的危險
如果你對 AI 說:幫我做一個訂便當系統,聽起來很有效率,其實很危險。這句話像把一整間廚房丟給實習生,叫他自己決定菜單、採買、切菜、煮飯、收錢、洗碗。實習生也許很聰明,但他不知道你班上要訂幾種便當、誰能改單、午餐店怎麼確認、資料要不要留到明天。結果常見的是:AI 做出一堆看似完整的畫面,真正按下去卻壞掉。成熟的 vibe coding 不是把需求喊大聲,而是把大任務切成小到可以驗收的步驟。每一步都像一道食譜中的單一動作:先切菜,再開火,再試味道。你不是觀眾,你是導演。
一、大需求為什麼會讓 AI 和你一起迷路
一句幫我做一個訂便當系統,對人類來說像是一個願望,對 AI 這位實習生來說卻是一團雲。它可能理解成餐廳後台、班級表單、外送平台、付款系統,甚至做出會員登入和統計圖。你以為自己省下說明,其實是把所有決定權交出去。更麻煩的是,你也會跟著迷路。當 AI 一次產出十個檔案、五個功能、三種狀態,你很難知道第一個錯在哪裡。
大任務的真正問題不是大,而是沒有邊界。沒有邊界,就沒有驗收。沒有驗收,就不知道這一步算不算完成。ch12 學過驗證心態,重點是不要只看 AI 說完成,而要看行為有沒有發生。拆解就是把行為切小:不是做訂便當系統,而是使用者能選一個便當並按送出;不是做後台,而是老師能看到一筆訂單;不是做通知,而是送出後畫面顯示訂單編號。
請把 AI 想成勤快但需要清楚指令的實習生。你給他一整間餐廳,他會自己補想像;你給他今天只做菜單列表,並告訴他驗收方式是畫面上出現三個便當名稱,他就有很高機率做好。拆解不是讓速度變慢,而是避免把錯誤藏在大包裹裡。
const bigRequest = '做一個訂便當系統';
const hiddenChoices = ['誰可以訂', '便當有哪些', '資料存在哪', '送出後看到什麼', '老師怎麼查'];
console.log('大需求:' + bigRequest);
console.log('其實藏了 ' + hiddenChoices.length + ' 個還沒決定的問題');
hiddenChoices.forEach((item, index) => console.log((index + 1) + '. ' + item));
二、MVP:先做會動的最小版
MVP 是 Minimum Viable Product,意思是最小可用產品。不要被產品兩個字嚇到,它不是創業黑話,在這裡只是指能證明核心流程走得通的最小版本。訂便當系統的 MVP 不是漂亮首頁、會員中心、付款、統計報表一次到位;它可以小到只有三個便當選項、一個姓名欄位、一個送出按鈕。只要按下去能看到你訂了雞腿便當,編號是 001,核心流程就活了。
MVP 的重點是先讓主幹會動,再長枝葉。程式像食譜,第一次試做時不需要同時研究擺盤、餐具、外送袋。你先確認飯有熟、味道能吃,再調整份量和裝飾。對 AI 也是一樣:先請它做最短路徑,讓使用者完成一件最重要的事。這樣你可以很快驗證需求是否講清楚,也能在早期發現資料欄位、畫面文字、按鈕行為哪裡不對。
判斷 MVP 有一個實用問題:如果只允許今天完成一件事,哪件事完成後,這個工具就不再只是空殼?班級訂便當的答案通常是能送出一筆訂單。社區二手書交換平台的答案可能是能刊登一本書並在列表看到它。其他像搜尋、評分、私訊、收藏,都可以之後加,但不能搶在核心流程之前。
const features = [
{ name: '刊登一本二手書', core: true },
{ name: '在列表看到書', core: true },
{ name: '深色模式', core: false },
{ name: '推薦演算法', core: false }
];
const mvp = features.filter(feature => feature.core).map(feature => feature.name);
console.log('MVP 先做:');
mvp.forEach((name, index) => console.log((index + 1) + '. ' + name));
三、拆解三原則:可驗證、接得上、小到不迷路
拆解不是把一句話隨便切成很多句。好的小步驟要符合三個原則。第一,每步可驗證。完成後你要能用眼睛、按鈕、輸出結果檢查它,不是只聽 AI 說我已完成。使用者能新增書籍並在列表看到書名,就可驗證;優化平台體驗,就太空。
第二,每步建立在上一步。順序像食譜,先有菜單資料,才有選便當表單;先能送出訂單,才談老師統計。若一開始就做排行榜或通知,AI 會為不存在的資料補一套想像,後面再修會很痛。你要讓每一步都踩在已經驗證過的地板上。
第三,每步小到 AI 不會迷路。小不是指無聊,而是一次只改一個主要行為。請 AI 同時做登入、資料庫、頁面美化、錯誤處理,等於把四道菜混在一鍋。比較好的做法是:先做靜態畫面;驗證畫面文字正確;再接上送出按鈕;驗證按鈕會產生資料;再加錯誤提示。這樣就算壞了,你也知道是哪一步造成的。
這三原則會一起工作。可驗證讓你知道有沒有完成;接得上讓系統有穩定地基;小到不迷路讓 AI 的輸出比較可控。你不是在降低 AI 的能力,而是在提供一條清楚跑道,讓它把能力用在正確方向。
const steps = [
{ text: '做完整平台', verifiable: false, depends: false, small: false },
{ text: '顯示三本書的列表', verifiable: true, depends: true, small: true },
{ text: '加入搜尋和聊天和付款', verifiable: true, depends: false, small: false }
];
steps.forEach(step => {
const score = Number(step.verifiable) + Number(step.depends) + Number(step.small);
console.log(step.text + ':' + score + '/3');
});
四、里程碑要寫成動詞加驗收條件
里程碑(milestone)是你在路上插的小旗子,用來判斷目前走到哪裡。壞里程碑常寫成完成訂單功能、改善介面、處理資料。這些句子看起來像工作,實際上很難驗收。什麼叫完成?改善到什麼程度?資料怎麼處理才算對?AI 看到這種句子,會自己猜一套標準,你看到產出時也只能憑感覺。
好里程碑的寫法是動詞開頭,加上具體驗收條件。例如:建立便當清單,驗收條件是畫面顯示雞腿、排骨、素食三個選項。加入送出訂單,驗收條件是輸入姓名並選便當後,畫面顯示訂單編號。新增空白提醒,驗收條件是姓名沒填時,按送出會顯示請先輸入姓名,而且不建立訂單。
動詞讓 AI 知道要做什麼行為,驗收條件讓你知道要怎麼檢查。請注意,驗收條件不必寫得像法律文件,但一定要能操作。能點、能看、能輸入、能得到某個結果,都是好訊號。只寫漂亮一點、好用一點、完整一點,都是危險訊號。
你可以把每個里程碑當成給實習生的一張工作卡。工作卡上不只寫今天要做菜,也寫試吃標準:飯要熟、湯要熱、鹽不能漏。這樣實習生交付時,你不是吵美感,而是照標準驗收。
const milestones = [
{ action: '建立便當清單', check: '畫面顯示雞腿、排骨、素食三個選項' },
{ action: '加入送出訂單', check: '送出後顯示姓名、便當、訂單編號' },
{ action: '新增空白提醒', check: '姓名空白時顯示提醒且不建立訂單' }
];
milestones.forEach((m, index) => {
console.log('里程碑 ' + (index + 1) + ':' + m.action);
console.log('驗收:' + m.check);
});
五、完整示範:班級訂便當拆成六步
現在把幫我做一個班級訂便當系統,拆成六個可以交給 AI 的步驟。這不是唯一答案,但它示範了成熟順序:先有可看的資料,再有可操作的表單,再有可保存的訂單,最後才加管理與防呆。每一步都附 prompt 和驗證法,你可以直接照這個格式改成自己的工具。
| 步驟 | 給 AI 的 prompt 重點 | 驗證法 |
|---|---|---|
| 1 | 建立單頁畫面,顯示今天三種便當與價格,先不要做送出。 | 打開頁面能看到三個名稱與價格,沒有空白或亂碼。 |
| 2 | 加入姓名輸入框與便當選擇,按鈕先只在畫面顯示你選了什麼。 | 輸入小美選雞腿,按下後看到小美訂了雞腿。 |
| 3 | 把每次送出變成一筆訂單,顯示在下方清單並產生編號。 | 連續送出兩筆,清單有 001、002,內容正確。 |
| 4 | 加入空白檢查,姓名未填或未選便當時顯示提醒,不新增訂單。 | 不填姓名按送出,只看到提醒,清單筆數不變。 |
| 5 | 加入老師統計區,計算每種便當各幾份與總金額。 | 送出兩個雞腿一個素食,統計顯示雞腿 2、素食 1,總金額正確。 |
| 6 | 加入清除今日訂單按鈕,按下前要確認,按下後清單與統計歸零。 | 有訂單時按清除並確認,畫面回到 0 筆與 0 元。 |
這六步的重點不是功能少,而是每一步都有明確結果。你可以在每一步停下來測試,甚至把錯誤訊息貼回去請 AI 修。這和 ch13 的 debug AI 連在一起:當錯誤範圍只有一小步,錯誤訊息就比較有用,AI 也比較容易修到正確位置。
const orders = [
{ id: '001', name: '小美', lunch: '雞腿', price: 95 },
{ id: '002', name: '阿明', lunch: '素食', price: 85 },
{ id: '003', name: '小華', lunch: '雞腿', price: 95 }
];
const total = orders.reduce((sum, order) => sum + order.price, 0);
const chickenCount = orders.filter(order => order.lunch === '雞腿').length;
console.log('訂單數:' + orders.length);
console.log('雞腿數:' + chickenCount);
console.log('總金額:' + total);
六、計畫 → 做 → 驗證 → 再計畫
很多人以為計畫是開始前寫一次,之後照著跑到底。真實做工具時,計畫比較像地圖草稿。你先畫出下一段路,走過去,確認地面是真的,再決定下一段怎麼走。這就是計畫、做、驗證、再計畫的迴圈。它聽起來慢,實際上很快,因為你不會在錯路上走太遠。
當 AI 完成一步,你要做三件事。第一,照驗收條件測。不要只看畫面漂亮,要按按鈕、輸入空白、試兩筆資料。第二,記錄結果。通過就把這一步當成地板;沒通過就把失敗行為說清楚,例如第二筆訂單沒有出現在清單,不要只說壞了。第三,根據結果重寫下一個 prompt。通過時再加下一個小功能,沒通過時先修到通過。
這裡的角色分工很重要。AI 是實習生,負責照清楚工作卡產出;你是導演,負責決定下一個鏡頭、檢查鏡頭有沒有拍到、必要時喊停重拍。純 vibe coder 常見的問題是一直加需求,沒有驗收節奏。成熟做法是每次只前進一小步,讓系統一直處在可理解、可測試、可回頭的狀態。
到這章,你已經不只是在問 AI 怎麼寫 code。你開始做工程管理:切範圍、排順序、寫驗收、控制風險。這正是資深工程師帶實習生的方式。不是因為實習生不聰明,而是因為清楚的小步驟會讓聰明的人更穩定。
const loop = ['計畫下一小步', '請 AI 實作', '照驗收條件測試', '根據結果調整下一步'];
for (let round = 1; round <= 2; round++) {
console.log('第 ' + round + ' 輪');
loop.forEach(item => console.log('- ' + item));
}
console.log('原則:通過才加新功能,沒通過先修正。');
拆解工作台
把社區二手書交換平台的步驟卡排成一條可驗證的小步路線,避開太大、沒驗收、順序倒置的陷阱卡。點卡片加入路線,也可以拖曳到右側;按「檢查拆解」會即時評分。
先挑最多 6 張卡片。好的路線會先讓核心交換流程活起來,再加入保護與搜尋。
點任一卡片,這裡會顯示它是否可驗證、是否接在前一步、是否小到 AI 不會迷路。
會拆解的人,不會把 AI 產出的巨大包裹照單全收。你會先定 MVP,只讓核心流程活起來,再用里程碑一段一段驗收。遇到錯誤時,你能指出是哪一小步壞掉,而不是只說整個怪怪的。這種行為已經接近資深工程師帶實習生:給清楚工作卡、驗收、再派下一張。
檢查一下這章
下一章預告
下一章會進入資料的形狀,學會看懂清單、字典與 JSON,讓你能更精準地指揮 AI 處理資料。