.webp?table=block&id=32d0e6d7-5649-8099-8f65-d0f911797ff2&cache=v2)
過去，存在 Vibe coding 這個說法，意思是簡單給 AI 一個方向描述，由它來搞定所有工作。這個作法可能很省工，但是拿到的成果就很不確定。
所以我參考了網路上高手的工作流程，先給自己一份筆記。
把開發拆成 4 個階段，前面想清楚，後面讓 AI 執行。
四個階段一眼看懂
階段 | 在做什麼 | 我要做的事 | 產出 | 用什麼工具 |
1. Thinking | 定目標、定規則 | 業務邏輯、資料建模、邊界定義 | requirements / architecture / schema | Claude / Gemini(推理型) |
2. Planning | 排施工順序 | 把大任務切成可驗證的小步驟 | implementation_plan(checklist) | Claude / Gemini(推理型) |
3. Coding | 產出程式碼 | 監控、反饋、設定環境 | 原始碼、agent rules | Antigravity |
4. Review | 品質與安全 | 跑測試、看 log、壓邊界 | 測試報告、穩定版 | Antigravity(Agent 模式) |
前端設計另外走 Stitch → 匯出到 Antigravity，不在這 4 個階段裡，屬於 Thinking 之後、Coding 之前的前置步驟。
各階段細節
Thinking(架構設計)
這個階段會把大部分方向定義下來，用文件約束 AI，讓結果不跑偏。不寫程式，只輸出文件。
- 定邊界：寫清楚要做什麼、不做什麼
- 邏輯建模：用 Mermaid 畫流程圖，確認資料流向
- 資料結構定義：預先定欄位名稱跟型態，避免 AI 自己亂命名
產出：
requirements.md / architecture.md / schema.md前端設計(Stitch)
在 Stitch 用自然語言描述畫面，產出高保真 UI 設計，直接匯出到 Antigravity 或下載 HTML/CSS。這步驟處理完，Coding 階段的 AI 就有視覺參考，不用自己猜 UI 長什麼樣。
Planning(實作計畫)
把架構拆成可以逐步驗收的清單，防止 AI 執行時跑偏。
- 拆成多個 Phase，每個 Phase 下有多個 Step
- 每個 Step 要有明確的驗證方式(例如跑通某個 API)
產出：
implementation_plan.mdCoding(程式實作)
讓 Antigravity 的 Agent 照著
implementation_plan.md 的順序執行，我負責監控跟環境處理。- 每次給 Agent 足夠的架構上下文，避免產出跟規格不符的程式碼
- 在 Antigravity 設定 agent rules 統一風格跟技術棧(對應 Cursor 的
.cursorrules)
- 可以同時派多個 Agent 處理不同模組，用 Manager View 監控進度
產出：完整原始碼
Review & Debug(審核優化)
確認程式碼品質，不只是能跑就好。
- 單元測試：讓 Agent 針對核心邏輯寫測試
- 邊界測試：模擬斷網、非法輸入等極端情況
- 重構：清掉冗餘程式碼
產出：測試報告、穩定版
三個原則
- 文檔先行：沒有
requirements.md不開始寫程式
- 小步快跑：一次只讓 Agent 執行計畫裡的一個步驟，驗證完才繼續
- 拒絕黑盒：關鍵邏輯要自己看得懂，用流程圖跟 Agent 對齊認知
