AI Vibe Coding 實作常見問題：為什麼別人「改 B 就壞 A」，而我不會？
揭開「氛圍編程（Vibe Coding）」從概念走向真實生產力的關鍵差異。無論使用 Claude 還是 Antigravity (Gemini)，只要掌握環境解耦、單一真實來源、樣式範本對齊與防禦性開發 SOP，一人 IT 也能穩健駕馭十幾個複雜專案。
💡 開發心法提煉
「頁面簡單，資料清楚，不要複雜化，程式就是為了方便使用者；但也不能過度方便，若未規劃好架構邊界，後續維護會是災難。」
Vibe Coding 不是丟一句話讓 AI 瞎猜碰運氣，而是開發者先花時間和 AI 建立共識、確立架構與邊界，再讓 AI 當高效幫手快速產出代碼。
01. 痛點剖析：為什麼大多數人會「改 B 壞 A」？
在 AI 輔助開發時，最常見的困擾就是：「明明 A 功能跑得很順，叫 AI 加個 B 功能，回過頭來 A 就壞了；修了 A 又壞了 C，最後整份代碼直接報廢！」
這不是 AI 模型笨，而是缺乏工程規範時容易踩入的陷阱：
- 無邊界全文重寫：把整個檔案丟給 AI，AI 順手重構，不小心把 A 功能的特例判斷給刪了。
- 上下文過長與失憶：對話太長導致 AI 遺忘先前的業務規則，產生前後衝突的代碼。
- 高度耦合：A 與 B 共享全域變數或擠在同一個函式裡，改動時互相干擾。
- 缺乏測試備份：直接在正式檔修改，改壞了沒有歷史備份可快速還原。
- 獨立端點分流：新功能拉出獨立 AJAX 端點（如
?ajax=export_csv），不影響既有渲染。 - 單一真實來源（SSOT）：透過
dev.md與log.md記錄規則，AI 開工必讀。 - 主動管理 Session 長度：對話過長時主動開啟新 Session，減少上下文干擾。
- Test-then-Replace 備份：先複製測試檔驗證 ➔ 備份原檔 ➔ 替換上線。
02. 磨合大腦：花時間與 AI 建立開發共識
要讓 AI 成為得力助手，最重要的一步是花時間跟 AI 深度討論自己的開發習慣、偏好的架構與常用樣式，並將這些共識沉澱為設定檔（無論使用 Claude 或 Antigravity 都適用）：
跨環境與大腦知識庫架構 ├── 🏠 Home (Mac) : NAS 掛載為 /Volumes/ai/ (Skill: /Volumes/ai/_skill/) ├── 🏢 Company (Win) : NAS 掛載為 Z:\ (Skill: Z:\_skill\) ├── CLAUDE.md / PROTOCOL: 開場問候觸發協議（本機專屬，防 NAS 斷線失效） ├── cowork-context.md : 開工核心協議（工程師背景、自動維護 tasks.md、快照方針） ├── dev-standards.md : 全域開發規範（MariaDB port 3307/3306 區隔、樣式範本標準） ├── style-guide-web.md : 統一對齊的樣式標準（以 Work Manager 為範本，Bootstrap5 + DataTables） ├── lessons.md : 跨專案除錯心法庫（踩過的坑記錄下來，遇問題先 grep 查） ├── level_status.md : 等級/EXP 狀態碼（精準檢查 AI 記憶是否載入） └── 專案內 dev.md / log.md: 個別專案的規格百科與決策歷程
每次開啟新 Session，我習慣用「早安 / 晚安 / 哈囉」作為開場問候。AI 接收到問候後，必須自動依序讀取環境設定、任務清單與等級狀態，並回報「設定版本 ＋ 等級 EXP ＋ 未完成任務」。這讓我一眼就能確認 AI 是否已精準同步大腦記憶，避免在失憶狀態下動工。
我不希望每次開新功能都要重新跟 AI 討論 CSS 與排版細節。我以成熟的 Work Manager 為基礎建立
style-guide-web.md（Bootstrap 5.3.3、DataTables
主題、品牌頂部導航、自訂按鈕與色系），所有新頁面或新專案一律以此範本對齊，大幅節省溝通成本並維持視覺一致性。
03. 確保系統穩定的 4 個實戰法則
1. 獨立端點分流（各司其職，不揉在一起）
當要在一個複雜頁面新增功能時，絕不重構既有的核心渲染邏輯。例如在近 5 萬筆以上歷史紀錄的管理頁面中：
- 新增「下載 Excel 範例檔」➔ 獨立
?ajax=import_template，使用ZipArchive在記憶體動態生成，不落地、不留後門。 - 新增「CSV 匯出」➔ 獨立
?ajax=export_csv，沿用現有篩選參數輸出 UTF-8 BOM 串流，完全不碰前端渲染。
2. 滾動式快照與 Session 重開：控制 Context 長度
對話如果太長，AI 就會開始產生幻覺或遺忘。我的應對原則是：
- Session 過長主動重開：完成一個階段任務後，開新 Session 重新出發，保持 AI 大腦清爽。
- 日誌滾動式快照：
log.md的現況快照只保留最近 2-3 週；舊歷程移至log_archive.md封存。在派工系統中，此機制成功將開工讀取量縮減 60% 以上！
3. 嚴格的環境適配（No Local CLI Execution）
由於程式碼直接掛載於 NAS 網路磁碟，本機並無 PHP / MySQL / IIS 執行環境。
全域規範明定：「切勿在本機 Terminal 執行 php -l 或本機 CLI」，一律透過瀏覽器與線上網址進行真實路徑驗證，防止 AI
因本機環境缺失而胡亂安裝套件或誤判報錯。
4. Test-then-Replace 備份防護 SOP
[1] 複製出測試檔 ➔ index.php ==> test_index.php [2] 於測試檔修改 ➔ 進行功能調整與邏輯擴充 [3] 瀏覽器驗證 ➔ 透過真實 URL 測試確認無誤 [4] 備份原正式檔 ➔ 存入 _bak/index_old01.php (保留副檔名防原始碼外洩) [5] 替換覆蓋上線 ➔ 將 test_index.php 更名為正式 index.php
04. 實戰案例：從微縮動態到企業級系統
我不去手算複雜的貝茲曲線，而是精準提出體驗要求：「貓咪轉向太僵硬，請加 18px 轉向滯後緩衝與 Pitch 傾斜角」、「翻肚熟睡機率調降為布偶貓 15%、日夜切換改用 body::before 平滑透明度過渡」。AI 秒速轉化為精確 CSS/JS，達成極致細膩的動態效果。
面對多年被動式資料庫舊資料與人資即時同步表，AI 協作下我採用「狀態用 SQL CASE 動態算，結合 LAST_DAY() 月底規則，不存死狀態」。配合前端 SheetJS 預覽防呆與
Server-side DataTables，即使資料量高達近 5 萬筆以上，系統仍能秒級響應。
【常見痛點】：很多開發者在彈窗改完資料後，習慣用 location.reload()
重新載入，但這會讓網頁白閃一下、使用者滾輪和篩選全部重置，體驗極差；而若在彈窗裡寫死「重刷表格」，放到沒有表格的「甘特圖首頁」就會報錯當機。
【實踐解法】：彈窗存檔後只負責發出通知（「客氣問一聲」）——在甘特圖頁面只重繪甘特條與統計數字，在表格清單頁則只原地替換那一列文字。不重新整理頁面、不閃爍、跨頁面共用不當機！
當需要「在手機行事曆即時看到 NAS 派工到期日」時，我不讓 AI 去接肥大複雜的 OAuth 流程，而是拍板最輕量安全的架構：「每位使用者專屬隨機 Token ＋ 輸出標準 RFC 5545
.ics 串流」。我下達架構方向，AI 負責手刻嚴謹的 iCalendar 日期格式與時區跳脫，5 分鐘搞定跨平台訂閱。
05. 給想嘗試 Vibe Coding 者的 3 個實用建議
- 開工前先花時間磨合規則：把常用樣式、資料庫規則、不能動的禁區寫進設定檔。每次開工確認 AI 讀取成功，能省下大量無效 Debug 時間。
- 注意對話長度，適時重開 Session：Session 過長時不要硬聊，開新對話重新聚焦，AI 的產出品質會好很多。
- 堅持體驗與克制維護的平衡：追求簡單清楚、不用 F5 暴力重刷的好體驗，但同時也要守住架構邊界，避免過度客製化造成未來的維護災難。
06. 💬 讀者留言
大概是⋯你有什麼心得或疑問，歡迎留言跟我分享。留言會先經過審核才會顯示在下方，請放心留下你的想法。
載入留言中...