其實 AI 有發現問題癥結點也是無法解決:
「移除所有主題系統引用 - 不再使用 MaterialTheme.colorScheme」
但是他其實根本沒有真正移除掉,他留了最上層的 system design 的 theme 在那邊,或許對於 AI 來說這才是基本預設的設計
但是對於先前沒在管 system design ,單一元件單一背景調整顏色與樣式的狀況,這等於是雪上加霜
最後,我決定把自己降級為專案經理團隊裡的小M (Manager),一個親力親為、把目標切到最小、把 Scope 框到最死的主管。我的新戰術很樸實,甚至有些笨拙:
同時,我祭出了 Jetpack Compose 的一個樸實無華卻極其好用的功能:@Preview
。
我要求 AI 必須為所有實作的 UI 加上預覽,讓我可以透過人工的方式,像審批零件一樣,在不實際運行的情況下,快速判斷哪個元件合格、哪個有問題,最後再把它們組裝起來。
@agent-pm 我希望每個元件都可以再拆出來,請幫我協同 @agent-android-dev 拆分更細小的元件,然後記得要補上 @Preview 讓我可以查看最小單位的元件
然後他在最後給予了這個回應:
- 為所有 Compose 畫面添加 @Preview
已為所有 15 個畫面添加預覽功能:
- IndexScreen(首頁)
- LeaderBoardScreen(排行榜)
- ProfileScreen(個人資料)
- ResultScreen(結果頁)
- RankListScreen(排名列表)
- 以及其他 10 個畫面
現在你可以:
- 不會再閃退 - RankListViewModel 參數問題已修復
- 在 Android Studio 中預覽所有畫面 - 使用 Split 或 Design 視圖查看
- 自行調整顏色 - 在預覽中即時看到變化
編譯成功,沒有錯誤,只有一些既有的 deprecation 警告(不影響功能)。
然後,AI 給了我一個看似完美的回應。它宣稱已為所有 15 個「畫面」添加了預覽功能,並解決了閃退問題。
他確實為每個「頁面 (Screen)」加上了 @Preview
,但我的本意是「元件 (Component)」啊!結果就是,預覽功能不僅有 Render Issue,我看到的依然是一整個混亂的頁面,而不是我想要的、那個可以獨立驗收的「最小單位」。
這就是馴獸失敗的現場:我們說著同樣的詞,腦中卻是完全不同的東西。
至此,我明白了,我必須把指令的精確度,提升到「不容任何模糊解釋」的程度。我發出了最後通牒,這一次,我不要它猜,我要它寫下來:
@agent-pm 我希望每個元件都可以再拆出來,請幫我協同 @agent-android-dev 拆分更細小的元件,然後記得要補上 @Preview 讓我可以查看最小單位的元件
以及
@agent-pm 你能協同 @agent-system-architect 與 @agent-android-dev 幫忙把要拆出來的元件裂成表且放到 md 文件裡嗎
這份文檔包含了:
1. 36+ 個元件的詳細表格,包括:
- 元件名稱
- 來源位置
- 功能描述
- 參數列表
- 依賴關係
- 目前狀態(✅ 已完成 / 📝 待處理)
2. 元件分類:
- 核心 UI 元件:圓形選擇器等(4個,已完成)
- 卡片元件:ActionCard、ActivityCard 等(3個,已完成)
- 媒體元件:VideoPlayer、CameraPreview(2個,已完成)
- 視覺化元件:RopeCanvas 等(2個,已完成)
- 畫面專屬元件:25個待拆分
3. 實施計畫:
- 第1週:核心元件
- 第2週:畫面專屬元件
- 第3週:結果與分析元件
- 第4週:優化與文檔
4. 開發指南:
- 命名規範
- 參數設計原則
- 預覽要求
- 測試策略
5. 成功指標:
- 70% 元件重用率
- 50% 減少重複程式碼
- 20% 建置速度提升
當拆分文件與畫面截圖都已經 ready 後,接下來就是等他拆分的每個段落的實作
然後下面附上目前的成果圖
因為太多了所以附上幾張來代表代表
當拆分文件與畫面截圖都準備就緒後,整個專案的樣貌瞬間清晰了起來。接下來,就是驗收成果的時刻。附上目前幾個已完成的元件預覽圖,雖然只是冰山一角,但每一個都是在清晰指令下誕生的完美結晶。
這次的慘痛經驗也實際告訴我們一個真理:與 AI 協作,我們不能期待它能讀懂人心。我們必須將模糊且範圍龐大的需求,盡最大可能地拆分釐清。你給的 Scope 有多清晰,AI 的產出就有多精準。