[{"data":1,"prerenderedAt":20},["ShallowReactive",2],{"post-vibe-coding-hidden-costs":3},{"post":4},{"slug":5,"title":6,"date":7,"description":8,"tags":9,"author":14,"cover":15,"draft":16,"readingTime":17,"body":18,"html":19},"vibe-coding-hidden-costs","AI 做得出來，不代表養得起來：Vibe Coding 的四個隱形成本","2026-06-30T09:00:00.000Z","AI 讓做產品變得很快，但「能跑」不等於「能撐」。拆解 Vibe Coding 在維護、穩定、擴充、資安上的四個隱形成本，並附上你現在就能動手的解法。",[10,11,12,13],"Vibe Coding","AI 開發","系統維護","資安","HiHi Digital",null,false,5,"\n這兩年「Vibe Coding」紅了起來——你不太需要懂程式，把想法丟給 AI，一個週末就能生出一個能動的網站或工具。這是好事，門檻被打掉了，更多人能把點子變成現實。\n\n但我這十年在做系統開發，看過太多故事的下半場：**一開始驚艷，三個月後災難**。能跑的東西，不一定養得起來。\n\n問題不在 AI 本身，而在於「做出來」其實只是產品生命週期的第一哩路。真正吃掉時間與金錢的，是後面那 90%：維護、穩定運作、擴充、資安。這篇就拆解這四個隱形成本，每一個都附上你現在就能做的解法——不用先找任何人。\n\n## 一、可維護性：三個月後，連你自己都看不懂\n\nAI 很會「把功能生出來」，但它不在乎整體結構。你今天加一個功能、明天改一個樣式，每次都讓 AI「再幫我加一下」，程式碼就像滾雪球——能動，但越來越亂。等到要改一個小地方，卻發現動一髮牽全身。\n\n**你可以先做的：**\n\n- **把 AI 的產出當「草稿」，不是「成品」**：生出來先讀過、理解它在做什麼，不懂就追問，別直接貼上去就跑。\n- **建立一致的結構與命名**：相同類型的東西放同一個地方、用一致的命名。一開始多花十分鐘，之後省好幾小時。\n- **裝上 linter 與 formatter**（例如 ESLint + Prettier）：讓格式自動統一，把低級錯誤擋在進門前。\n- **用 Git，而且小步提交**：每完成一件小事就 commit、訊息寫清楚。出事時能快速回退，也能看懂當初為什麼這樣改。\n- **替「關鍵決策」寫一兩行註解或 README**：不是每行都註解，而是把「為什麼這樣做」記下來——半年後的你會感謝現在的你。\n\n## 二、持續穩定運作：Demo 會動，不代表上線撐得住\n\nDemo 的世界很美好——網路順、輸入正常、沒人亂點。但真實世界會有人輸入奇怪的東西、網路會斷、第三方服務會掛、流量會突然湧進來。AI 生成的程式常常只處理了「快樂路徑」，邊界情況一碰就倒。\n\n**你可以先做的：**\n\n- **加上錯誤處理**：每個「對外」的動作（呼叫 API、讀寫資料、處理使用者輸入）都要想「失敗了會怎樣」，並優雅處理，而不是整個崩潰。\n- **驗證所有輸入**：永遠假設使用者和外部 API 會給你預期外的東西。\n- **鎖定相依套件版本**（用 lockfile）：別讓某個套件半夜自己升級就把網站搞掛。\n- **加上日誌與監控**：至少在出事時看得到「哪裡、什麼時候、為什麼」。再進一步是設告警，讓你比客戶更早知道出事。\n- **替關鍵流程寫測試**：不用追求 100% 覆蓋率，但「結帳」「登入」「送出表單」這種不能壞的路徑，值得用自動化測試守住。\n\n> 一個務實的判準：如果這個東西壞掉會讓你半夜爬起來修，那它就值得你現在多花一點時間做防護。\n\n## 三、可擴充性：為了快，把架構寫死了\n\n趕著上線時，最容易做的事就是「先寫死再說」——把設定寫進程式、把邏輯全擠在一個檔案、把不同的關注點混在一起。短期很爽，但等到要加第二個功能、接第二個客戶、上第二個語言，就會發現「動一個地方，整個垮」。\n\n**你可以先做的：**\n\n- **關注點分離**：把「畫面」「商業邏輯」「資料存取」分開。即使是小專案，這個習慣也讓你之後好改十倍。\n- **設定外部化**：網址、金鑰、開關這類會變的東西，放到環境變數或設定檔，不要硬編進程式。\n- **模組化，但別過度設計**：把重複的邏輯抽成可重用的函式或元件；但也別為了「未來可能」而過度抽象——在「好擴充」和「別想太多」之間抓平衡。\n- **資料結構先想清楚**：資料模型是地基。一開始多想十分鐘「未來會長成什麼樣」，比之後大改省非常多。\n\n## 四、資安：AI 最容易忽略，代價也最高\n\n這是我最擔心的一塊。AI 生成的程式為了「能動」，常常把資安整個跳過：把金鑰硬編在程式裡、完全不驗證輸入、用著有已知漏洞的舊套件、權限大開。這些平常看不出來，一旦被打，代價可能是資料外洩、被當跳板、甚至法律責任。\n\n**你可以先做的：**\n\n- **金鑰絕不進程式碼**：API key、密碼、token 一律走環境變數或機密管理服務，而且別 commit 進 Git。\n- **驗證輸入、編碼輸出**：擋掉 SQL injection、XSS 這類最常見的攻擊。框架通常有內建防護，別自己繞過它。\n- **最小權限原則**：資料庫帳號、雲端服務帳號，只給「剛好夠用」的權限，不要圖方便就給 admin。\n- **定期更新相依套件**：跑一下 `npm audit`（或對應工具），把已知漏洞補掉。AI 常用的是它訓練時的舊版本。\n- **基本防護要有**：全站 HTTPS、表單防濫用（rate limiting、honeypot）、錯誤訊息別把內部細節吐給使用者。\n\n## 一個心法：把 AI 當「很會寫的資深實習生」\n\n它很快、很有用，但它不了解你的業務全貌、不為長期負責、也不會主動想到上面這些。**它的產出是起點，不是終點。** 你（或一個有經驗的人）要做的，是 review、補上它沒想到的、把「能跑」打磨成「能撐」。\n\n這些你都可以自己先做起來——光是「把金鑰搬出程式碼」「加上錯誤處理」「鎖定套件版本」這三件，就能擋掉一大半的麻煩。\n\n## 如果你已經卡在這裡了\n\n如果你手上正好有一個 vibe coding 出來的東西，開始覺得難維護、不放心它的穩定度或資安，又或者想擴充卻不知道從哪下手——這正是我們在做的事：**系統健檢、重構、資安強化、雲端部署與維運**，帶著你把「先求有」的成果，變成真正能長久運作的系統。\n\n但就算不找我們，也希望這篇能幫你少踩幾個坑。先把上面的 checklist 跑一遍，你的專案就會穩健很多。\n","\u003Cp>這兩年「Vibe Coding」紅了起來——你不太需要懂程式，把想法丟給 AI，一個週末就能生出一個能動的網站或工具。這是好事，門檻被打掉了，更多人能把點子變成現實。\u003C\u002Fp>\n\u003Cp>但我這十年在做系統開發，看過太多故事的下半場：\u003Cstrong>一開始驚艷，三個月後災難\u003C\u002Fstrong>。能跑的東西，不一定養得起來。\u003C\u002Fp>\n\u003Cp>問題不在 AI 本身，而在於「做出來」其實只是產品生命週期的第一哩路。真正吃掉時間與金錢的，是後面那 90%：維護、穩定運作、擴充、資安。這篇就拆解這四個隱形成本，每一個都附上你現在就能做的解法——不用先找任何人。\u003C\u002Fp>\n\u003Ch2 id=\"%E4%B8%80%E3%80%81%E5%8F%AF%E7%B6%AD%E8%AD%B7%E6%80%A7%EF%BC%9A%E4%B8%89%E5%80%8B%E6%9C%88%E5%BE%8C%EF%BC%8C%E9%80%A3%E4%BD%A0%E8%87%AA%E5%B7%B1%E9%83%BD%E7%9C%8B%E4%B8%8D%E6%87%82\" tabindex=\"-1\">\u003Ca class=\"header-anchor\" href=\"#%E4%B8%80%E3%80%81%E5%8F%AF%E7%B6%AD%E8%AD%B7%E6%80%A7%EF%BC%9A%E4%B8%89%E5%80%8B%E6%9C%88%E5%BE%8C%EF%BC%8C%E9%80%A3%E4%BD%A0%E8%87%AA%E5%B7%B1%E9%83%BD%E7%9C%8B%E4%B8%8D%E6%87%82\">一、可維護性：三個月後，連你自己都看不懂\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>AI 很會「把功能生出來」，但它不在乎整體結構。你今天加一個功能、明天改一個樣式，每次都讓 AI「再幫我加一下」，程式碼就像滾雪球——能動，但越來越亂。等到要改一個小地方，卻發現動一髮牽全身。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>你可以先做的：\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>把 AI 的產出當「草稿」，不是「成品」\u003C\u002Fstrong>：生出來先讀過、理解它在做什麼，不懂就追問，別直接貼上去就跑。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>建立一致的結構與命名\u003C\u002Fstrong>：相同類型的東西放同一個地方、用一致的命名。一開始多花十分鐘，之後省好幾小時。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>裝上 linter 與 formatter\u003C\u002Fstrong>（例如 ESLint + Prettier）：讓格式自動統一，把低級錯誤擋在進門前。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>用 Git，而且小步提交\u003C\u002Fstrong>：每完成一件小事就 commit、訊息寫清楚。出事時能快速回退，也能看懂當初為什麼這樣改。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>替「關鍵決策」寫一兩行註解或 README\u003C\u002Fstrong>：不是每行都註解，而是把「為什麼這樣做」記下來——半年後的你會感謝現在的你。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"%E4%BA%8C%E3%80%81%E6%8C%81%E7%BA%8C%E7%A9%A9%E5%AE%9A%E9%81%8B%E4%BD%9C%EF%BC%9Ademo-%E6%9C%83%E5%8B%95%EF%BC%8C%E4%B8%8D%E4%BB%A3%E8%A1%A8%E4%B8%8A%E7%B7%9A%E6%92%90%E5%BE%97%E4%BD%8F\" tabindex=\"-1\">\u003Ca class=\"header-anchor\" href=\"#%E4%BA%8C%E3%80%81%E6%8C%81%E7%BA%8C%E7%A9%A9%E5%AE%9A%E9%81%8B%E4%BD%9C%EF%BC%9Ademo-%E6%9C%83%E5%8B%95%EF%BC%8C%E4%B8%8D%E4%BB%A3%E8%A1%A8%E4%B8%8A%E7%B7%9A%E6%92%90%E5%BE%97%E4%BD%8F\">二、持續穩定運作：Demo 會動，不代表上線撐得住\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>Demo 的世界很美好——網路順、輸入正常、沒人亂點。但真實世界會有人輸入奇怪的東西、網路會斷、第三方服務會掛、流量會突然湧進來。AI 生成的程式常常只處理了「快樂路徑」，邊界情況一碰就倒。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>你可以先做的：\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>加上錯誤處理\u003C\u002Fstrong>：每個「對外」的動作（呼叫 API、讀寫資料、處理使用者輸入）都要想「失敗了會怎樣」，並優雅處理，而不是整個崩潰。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>驗證所有輸入\u003C\u002Fstrong>：永遠假設使用者和外部 API 會給你預期外的東西。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>鎖定相依套件版本\u003C\u002Fstrong>（用 lockfile）：別讓某個套件半夜自己升級就把網站搞掛。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>加上日誌與監控\u003C\u002Fstrong>：至少在出事時看得到「哪裡、什麼時候、為什麼」。再進一步是設告警，讓你比客戶更早知道出事。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>替關鍵流程寫測試\u003C\u002Fstrong>：不用追求 100% 覆蓋率，但「結帳」「登入」「送出表單」這種不能壞的路徑，值得用自動化測試守住。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cblockquote>\n\u003Cp>一個務實的判準：如果這個東西壞掉會讓你半夜爬起來修，那它就值得你現在多花一點時間做防護。\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Ch2 id=\"%E4%B8%89%E3%80%81%E5%8F%AF%E6%93%B4%E5%85%85%E6%80%A7%EF%BC%9A%E7%82%BA%E4%BA%86%E5%BF%AB%EF%BC%8C%E6%8A%8A%E6%9E%B6%E6%A7%8B%E5%AF%AB%E6%AD%BB%E4%BA%86\" tabindex=\"-1\">\u003Ca class=\"header-anchor\" href=\"#%E4%B8%89%E3%80%81%E5%8F%AF%E6%93%B4%E5%85%85%E6%80%A7%EF%BC%9A%E7%82%BA%E4%BA%86%E5%BF%AB%EF%BC%8C%E6%8A%8A%E6%9E%B6%E6%A7%8B%E5%AF%AB%E6%AD%BB%E4%BA%86\">三、可擴充性：為了快，把架構寫死了\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>趕著上線時，最容易做的事就是「先寫死再說」——把設定寫進程式、把邏輯全擠在一個檔案、把不同的關注點混在一起。短期很爽，但等到要加第二個功能、接第二個客戶、上第二個語言，就會發現「動一個地方，整個垮」。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>你可以先做的：\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>關注點分離\u003C\u002Fstrong>：把「畫面」「商業邏輯」「資料存取」分開。即使是小專案，這個習慣也讓你之後好改十倍。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>設定外部化\u003C\u002Fstrong>：網址、金鑰、開關這類會變的東西，放到環境變數或設定檔，不要硬編進程式。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>模組化，但別過度設計\u003C\u002Fstrong>：把重複的邏輯抽成可重用的函式或元件；但也別為了「未來可能」而過度抽象——在「好擴充」和「別想太多」之間抓平衡。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>資料結構先想清楚\u003C\u002Fstrong>：資料模型是地基。一開始多想十分鐘「未來會長成什麼樣」，比之後大改省非常多。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"%E5%9B%9B%E3%80%81%E8%B3%87%E5%AE%89%EF%BC%9Aai-%E6%9C%80%E5%AE%B9%E6%98%93%E5%BF%BD%E7%95%A5%EF%BC%8C%E4%BB%A3%E5%83%B9%E4%B9%9F%E6%9C%80%E9%AB%98\" tabindex=\"-1\">\u003Ca class=\"header-anchor\" href=\"#%E5%9B%9B%E3%80%81%E8%B3%87%E5%AE%89%EF%BC%9Aai-%E6%9C%80%E5%AE%B9%E6%98%93%E5%BF%BD%E7%95%A5%EF%BC%8C%E4%BB%A3%E5%83%B9%E4%B9%9F%E6%9C%80%E9%AB%98\">四、資安：AI 最容易忽略，代價也最高\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>這是我最擔心的一塊。AI 生成的程式為了「能動」，常常把資安整個跳過：把金鑰硬編在程式裡、完全不驗證輸入、用著有已知漏洞的舊套件、權限大開。這些平常看不出來，一旦被打，代價可能是資料外洩、被當跳板、甚至法律責任。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>你可以先做的：\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>金鑰絕不進程式碼\u003C\u002Fstrong>：API key、密碼、token 一律走環境變數或機密管理服務，而且別 commit 進 Git。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>驗證輸入、編碼輸出\u003C\u002Fstrong>：擋掉 SQL injection、XSS 這類最常見的攻擊。框架通常有內建防護，別自己繞過它。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>最小權限原則\u003C\u002Fstrong>：資料庫帳號、雲端服務帳號，只給「剛好夠用」的權限，不要圖方便就給 admin。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>定期更新相依套件\u003C\u002Fstrong>：跑一下 \u003Ccode>npm audit\u003C\u002Fcode>（或對應工具），把已知漏洞補掉。AI 常用的是它訓練時的舊版本。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>基本防護要有\u003C\u002Fstrong>：全站 HTTPS、表單防濫用（rate limiting、honeypot）、錯誤訊息別把內部細節吐給使用者。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"%E4%B8%80%E5%80%8B%E5%BF%83%E6%B3%95%EF%BC%9A%E6%8A%8A-ai-%E7%95%B6%E3%80%8C%E5%BE%88%E6%9C%83%E5%AF%AB%E7%9A%84%E8%B3%87%E6%B7%B1%E5%AF%A6%E7%BF%92%E7%94%9F%E3%80%8D\" tabindex=\"-1\">\u003Ca class=\"header-anchor\" href=\"#%E4%B8%80%E5%80%8B%E5%BF%83%E6%B3%95%EF%BC%9A%E6%8A%8A-ai-%E7%95%B6%E3%80%8C%E5%BE%88%E6%9C%83%E5%AF%AB%E7%9A%84%E8%B3%87%E6%B7%B1%E5%AF%A6%E7%BF%92%E7%94%9F%E3%80%8D\">一個心法：把 AI 當「很會寫的資深實習生」\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>它很快、很有用，但它不了解你的業務全貌、不為長期負責、也不會主動想到上面這些。\u003Cstrong>它的產出是起點，不是終點。\u003C\u002Fstrong> 你（或一個有經驗的人）要做的，是 review、補上它沒想到的、把「能跑」打磨成「能撐」。\u003C\u002Fp>\n\u003Cp>這些你都可以自己先做起來——光是「把金鑰搬出程式碼」「加上錯誤處理」「鎖定套件版本」這三件，就能擋掉一大半的麻煩。\u003C\u002Fp>\n\u003Ch2 id=\"%E5%A6%82%E6%9E%9C%E4%BD%A0%E5%B7%B2%E7%B6%93%E5%8D%A1%E5%9C%A8%E9%80%99%E8%A3%A1%E4%BA%86\" tabindex=\"-1\">\u003Ca class=\"header-anchor\" href=\"#%E5%A6%82%E6%9E%9C%E4%BD%A0%E5%B7%B2%E7%B6%93%E5%8D%A1%E5%9C%A8%E9%80%99%E8%A3%A1%E4%BA%86\">如果你已經卡在這裡了\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>如果你手上正好有一個 vibe coding 出來的東西，開始覺得難維護、不放心它的穩定度或資安，又或者想擴充卻不知道從哪下手——這正是我們在做的事：\u003Cstrong>系統健檢、重構、資安強化、雲端部署與維運\u003C\u002Fstrong>，帶著你把「先求有」的成果，變成真正能長久運作的系統。\u003C\u002Fp>\n\u003Cp>但就算不找我們，也希望這篇能幫你少踩幾個坑。先把上面的 checklist 跑一遍，你的專案就會穩健很多。\u003C\u002Fp>\n",1782813557712]