iT邦幫忙

2026 iThome 鐵人賽

DAY 4
0
Vibe Coding

一個 Vibe Coding 專案從原型到有人在用系列 第 4

叫 AI 做完自己檢查,為什麼你一按就壞?

  • 分享至 

  • xImage
  •  

叫 AI 做事的工作單有三格:改哪裡、哪裡不准動、做完怎麼算對(Day 2 介紹過)。前兩天各講了一格,今天講最後一格。

這一格你大概會寫:測試要過、畫面不能跑版。這些項目 AI 做完都能自己檢查,寫起來很順手。

可是東西到了你手上,你做的第一件事不是跑測試,是按下去。

三項全過的新面板

usage 是 Mac 選單列上的小工具,點圖示會跳出一個面板,顯示幾家 AI 工具用了多少。選單裡有「更換面板」,可以把面板換成別的畫面。

7 月 5 日早上,我想加一個「AI 人才市場」面板。面板上列出一包一包預先寫好的 AI 角色,給 Claude Code 用,挑一個就能按「安裝」、按「啟動」。每個角色旁邊還有一顆「選擇資料夾」按鈕,用來指定它要裝進哪個專案。

這次有兩個 AI 分工:一個跟我討論、寫工作單,下面叫它「寫工作單的 AI」;另一個照工作單寫程式,叫它「動手的 AI」。

工作單的第三格,整理成白話是這樣:

做完怎麼算對:
- 程式檢查和自動測試全部通過
- 打包成 App 成功
- 面板高度夠,內容不會被切掉

不到半小時,動手的 AI 回報三項全過:719 個測試通過、打包成功、面板高度沒被切掉。

寫工作單的 AI 看完程式碼,說品質不錯,最後請我自己從選單點「更換面板」→「AI 人才市場」,看清單有沒有正常顯示。

面板打得開。接下來不到一個小時,我按出三個問題:

  • 按「選擇資料夾」,沒反應。
  • 清單旁邊的捲軸是淺灰色的粗條,放在深色面板上很突兀。
  • 從選單點「AI 人才市場」可以打開,再點一次關不掉,只能繞去「更換面板」換別的。

按到選資料夾那一下,我跟寫工作單的 AI 說:

你沒有完整做好啊 我選擇資料夾的時候 無法進行選擇

三項檢查,沒有一項會按按鈕

https://ithelp.ithome.com.tw/upload/images/20260918/20183178ZwzdYvaHbb.png

左邊三項,AI 不用打開 App 就跑得完:跑測試、跑打包、用程式量面板高度。右邊三個問題,都要真的打開 App、用滑鼠去按才看得到。

查下去,三個原因都不難:

  • 選資料夾的視窗其實有跳出來,只是開在面板後面,被蓋住了,看起來就像沒反應。
  • 捲軸沒另外配色,用的是預設的樣子。量高度的那項檢查只管高度,不看長相。
  • 選單上「AI 人才市場」那一項,只寫了「點了切過去」,沒寫「再點一次切回原本的面板」。

所以左邊三個勾都是真的,AI 沒有騙我。只是那三項都不用按按鈕,按鈕壞了,它們照樣會過。

AI 自己知道它按不到

回頭看寫工作單的 AI 最後那句:請我自己去點。這其實已經說明了:AI 自己點不到。只是它請我看清單有沒有出來,沒請我按按鈕。

後來修資料夾問題時,它在新的工作單裡直接跟動手的 AI 講明:你沒辦法用滑鼠點選單列上的圖示,所以很難完整驗證「跳出來的視窗能不能真的點選資料夾」。

可是第一張工作單沒寫這件事。那張其實有一條「卡住的地方要回報」,動手的 AI 也報了一個問題,但那是它自己那邊碰得到的。三個按鈕問題它根本碰不到,當然報不出來。

修資料夾那張工作單就補上了一條:如果驗不到「真的能點選」,寫清楚卡在哪一步、有幾成把握。它驗不到的地方,要它自己講出來。

三個問題當天上午一起修好,跟著這個面板第一次進了專案,下午發布。(這個面板後來在 9 月下架了。)

第三格分兩半:AI 驗的,你按的

所以寫第三格時,分成兩半:

  • AI 自己驗:測試、打包這類它跑得完的,照樣寫。
  • 我自己按:想像把東西交給別人,他第一分鐘會按哪幾個按鈕。每個按鈕寫一行:按下去應該看到什麼。

「我自己按」那半,有兩種最容易漏:

  • 有開就有關的東西,像開關、面板、選單,要寫「再按一次,應該回到原本的樣子」。那天關不掉的面板,就是只驗了打開。
  • 按了會跳出另一個視窗的按鈕,要寫「跳出來的視窗看得到、點得到」。那天選資料夾的視窗,就是跳在面板後面。

兩半寫完,最後再加一行「驗不到的」:叫 AI 先說哪一類它驗不到(例如要用滑鼠點、要看真實畫面),再列出這次落在裡面的項目。光寫「卡住要回報」不夠,它只會報它碰得到的問題。它列出來的,就是你要親手去按的地方。

https://ithelp.ithome.com.tw/upload/images/20260918/20183178zdRm6IRY9b.png

拿 7 月 5 日那張工作單來改寫,「我自己按」列出的三行,剛好對到那天我按出來的三個問題。

今天可以帶走的

下次寫第三格,照這樣分兩半,最後加一行驗不到的:

做完怎麼算對:
AI 自己驗:
- ___(測試、打包這類)
我自己按:
- 打開___,按___,應該看到___
- 再按一次___,應該回到___
驗不到的:
- 先說哪一類你驗不到(例如要用滑鼠點、要看真實畫面),再列出這次落在裡面的項目

收到「全部通過」的回報,先別急著數過了幾項。照「我自己按」那半按一輪,再把它列的「驗不到的」也按過一遍。

三格到這裡講完了。接下來,看這三格放進真的派工以後,還會在哪裡出事。

參考資料

  • Anthropic,〈Claude Code: Best practices for agentic coding〉(「Give Claude a way to verify its work」一節,講讓 AI 拿出證據,以及它的檢查過了以後,自己再對著跑起來的 App 確認一次):https://www.anthropic.com/engineering/claude-code-best-practices
  • usage 專案:https://github.com/aqua5230/usage
  • AI 人才市場面板連同三個修正進專案的那次改動(commit 25a40fd):https://github.com/aqua5230/usage/commit/25a40fd
  • 下架這個面板的改動(commit aa07018):https://github.com/aqua5230/usage/commit/aa07018

上一篇
叫 AI「其他都不准動」,為什麼反而做不出來?
下一篇
叫 AI「做不到就停」,為什麼它每次都說完成?
系列文
一個 Vibe Coding 專案從原型到有人在用6
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言