為什麼前端工程師應該開始往 FDE 邁進？—— AI 時代下，你的價值正在改變多數人對前端工程師的理解，還停留在： 切版 寫 UI 串 API 這些當然重要，但有一件事正在發生：這些能力，正在變得越來越「不稀缺」。 前端開發，正在被重新定義這幾年最明顯的變化，就是 AI 對開發流程的影響。現在你已經可以做到： 用 AI 生成 React / Vue 元件 自動把設計稿轉成程式碼 快速補齊 CRUD 邏輯 幫忙 debug、重構 這些能力的共同特徵是：它們都集中在「寫功能」這件事上。也就是說，「寫畫面」正在變成基本能力，而不是競爭優勢。 那什麼才是下一個關鍵能力？當開發變得越來越快，有一件事情會變得更重要：如何讓這些功能「穩定上線並持續運作」。這正是 FDE（Front-End Deployment Engineer）在解決的問題。 FDE 在做的，其實是這些事如果你把視角從「寫程式」往後看，你會發現很多關鍵環節： Build 怎麼設計才快、才穩？ Deploy 出問題時怎麼回滾？ Cache 怎麼設計才不會爆掉？ Staging 跟 Production 為什麼不一致？ Release 頻率變高時，風險怎麼控制？ 這些問題不是 UI 層能解的，它們屬於「系統運作層」。而這一層，過去在前端領域是被忽略的。 台灣的現況：不是沒有需求，而是沒有被定義在台灣，很少看到「FDE」這個職稱。但實際上，這些工作一直都存在，只是被分散在不同角色： 前端工程師： 負責一部分 build / deploy。 DevOps： 負責基礎架構，但不一定熟前端。 後端： 偶爾支援部署流程。 結果會變成：沒有人完整負責「前端上線品質」。 這樣的結構，會帶來什麼問題？很多團隊其實都遇過： Deploy 時很緊張，因為不確定會不會壞。 Cache 設錯，整站行為異常。 Build 時間過長，影響開發節奏。 發現 bug 卻很難快速回滾。 不同環境行為不一致。 這些問題不一定每天發生，但一旦發生，影響都很大。而且隨著系統變大，只會越來越頻繁。 AI 反而會放大這些問題這點很關鍵。AI 讓開發變快之後，會帶來兩個結果： 功能產出速度提升。 Release 次數增加。 當 Release 變頻繁，Deploy 次數變多，出錯機率隨之上升，系統複雜度也提高。整個壓力會往「部署與穩定性」集中。也就是說：AI 不是取代這個領域，而是讓它變得更重要。 前端工程師可以怎麼準備？如果你開始意識到這個趨勢，可以從幾個方向調整： 1. 把「上線」當成工程的一部分很多人會把 deploy 當成最後一步。但實際上，deploy 本身就是系統設計的一環。當你開始這樣看，你會自然注意到很多細節。 2. 理解 build 與部署背後的原理不只是會用工具，而是理解： Build 在做什麼？為什麼會變慢？ Bundle 怎麼影響效能？ 環境變數如何影響行為？ 3. 開始接觸「前端以外的邊界」例如： CI/CD 流程 CDN 與 cache 機制 簡單的雲端部署（像 AWS 或 Vercel） 不用變成基礎架構專家，但要知道「前端是怎麼被服務的」。 4. 練習處理「出問題的時候」平常寫功能很順，但真正的能力差異，通常出現在系統出問題時，能不能快速定位與處理： 如何 rollback？ 如何確認問題在 client 還是 CDN？ 如何避免問題再次發生？ 一個正在發生的轉變未來的前端工程師，大致會分成兩種類型： 第一種： 擅長寫功能的人（這部分 AI 會越來越強）。 第二種： 能讓系統穩定運作的人。 這兩者的價值會逐漸拉開差距。而 FDE，就是往第二條路發展的其中一種方向。 結語前端工程不會消失，但它的重心正在改變。從「做出功能」，走向「讓系統可靠地運作」。當寫程式變得更容易，讓系統穩定，反而變得更難，也更有價值。這個轉變不會一夕之間完成，但已經開始發生了。 常見問答 (FAQ)什麼是 FDE (Front-End Deployment Engineer)？FDE 主要專注於前端應用的「系統運作層」，負責解決建置 (Build) 速度、部署 (Deploy) 流程、快取 (Cache) 策略以及環境一致性等問題，確保前端功能在頻繁更新的狀態下依然能穩定運作。 AI 工具普及後，前端工程師會面臨失業嗎？不會失業，但工作重心必須轉移。AI 能大幅提升「寫功能」與「切版」的效率，使這些純開發技能不再稀缺。未來的核心競爭力將在於如何確保系統穩定上線、跨環境部署的除錯能力，以及整體架構的風險控管。 從一般前端工程師轉型 FDE，該如何跨出第一步？建議從「把上線當成工程的一部分」開始。你可以先深入理解專案目前的 Build 流程、接觸 CI/CD 工具（如 GitHub Actions 等）、學習 CDN 與快取機制，並嘗試使用 Vercel 或 AWS 獨立部署專案，逐步培養宏觀的系統架構思維。

為什麼需要自動化留言回覆？在進行社群行銷時，我們經常會在貼文下方設計 CTA（呼籲行動），例如：「想學 +1」、「索取懶人包請留言」。這類互動能有效提升貼文熱度與觸及率。然而，傳統上這往往需要人工一一回覆，或依賴市面上如 BotBonnie 等第三方聊天機器人服務。 雖然第三方服務功能強大，但通常伴隨著每個月數千元不等的訂閱費用。透過 CommentFlow 等自建或輕量級自動化工具，我們不僅能省下高昂的月租費，還能針對自身需求客製化回覆邏輯，打造屬於自己的自動化客服流程。 CommentFlow 系統教學與設定步驟 立即前往 CommentFlow 系統：https://comment-flow.skypassion5000.workers.dev/ 要開始使用自動留言回覆功能，請遵循以下設定流程： 1. 系統登入與 Facebook 粉專綁定首先進入 CommentFlow 系統並完成登入。系統的核心運作需要存取您的 Facebook 粉絲專頁權限。 進入後台的「設定」選項。 點擊 [連結 Facebook] 進行授權。 依照系統提示，完成 Meta for Developers 應用程式綁定、設定 Webhooks、取得 Page Access Token 及 App Secret。 將所需的 META_APP_ID 與相關金鑰配置完成，確保系統能正常監聽粉專的留言動態。 2. 建立自動回覆規則與關鍵字綁定完成後，就可以開始設定自動回覆的規則。社群上最常見的關鍵字包含：+1、資料、懶人包、教學、PDF 等。 以設定「懶人包」為例： 在後台選擇 **[建立規則]**。 規則名稱： 輸入「懶人包」。 選擇粉專： 選擇您要套用的 Facebook 粉絲專頁。 比對方式： 選擇「包含關鍵字」或「完全符合」。 回覆方式： 選擇「公開留言回覆」（目前因 Facebook 政策限制，多數建議先使用公開回覆，而非私訊）。 關鍵字列表： 新增 懶人包。 公開留言回覆模板： 填寫您想回覆的內容，例如： 123完整內容都在這裡，歡迎來挖寶！ https://blog.es2idea.com/ 可以設定「每位用戶只回覆一次」以避免重複洗版，最後點擊 [更新規則] 或 **[啟用規則]**。 3. 測試與執行紀錄查詢設定完畢後，建議直接前往粉絲專頁進行測試。 使用個人帳號或測試帳號，在貼文下方留言「我要懶人包」。 系統若偵測到關鍵字，便會自動以粉絲專頁的身份回覆您設定的模板內容。 您可以回到 CommentFlow 後台的 [執行紀錄] 查看觸發狀況。系統會記錄每一筆 Comment ID、觸發的關鍵字及執行狀態（成功或略過）。 從概念到規模化：開發者之路 (Vibe Coding)開發這樣一套自動化工具，其背後蘊含著標準的軟體開發進程： POC (技術可行性測試): 證明技術上可行（It works!），例如寫一小段腳本成功回覆了留言。 Prototype (原型): 流程打通，可以將小工具給內部或少數人測試使用。 MVP (最小可行性產品): 市場買單，開始有人願意為了這個解決方案付費或投入使用。 SaaS (規模化營運): 規模化擴展，加上了前端網站、登入系統、權限管理與付費訂閱機制（如月費/年費），讓一般不具技術背景的用戶也能輕鬆上手。 透過 Vibe Coding 的理念，開發者能將自身驗證過的內部小工具，進一步包裝成具有商業價值的 SaaS 產品。這不僅是技術的實踐，更是將解決問題的能力「產品化」並推向市場的關鍵過程。 常見問答Q1：CommentFlow 需要我有技術背景才能使用嗎？ 不需要。CommentFlow 的 SaaS 版本已提供視覺化後台介面，一般用戶只需完成 Facebook 授權綁定、新增關鍵字與回覆模板，即可啟用自動回覆，無需撰寫任何程式碼。 Q2：為什麼系統建議使用「公開留言回覆」而不是私訊？ 這是因為 Facebook 的 Messenger 政策限制，非 24 小時內的互動窗口通常無法主動發送私訊給用戶，否則帳號可能面臨封鎖風險。公開留言回覆目前是最穩定且合規的自動回覆方式。 Q3：如果同一則留言包含多個關鍵字，系統會觸發幾次回覆？ 系統通常依照規則優先順序執行，符合第一條規則後即停止比對（視系統設定而定）。建議您在後台確認規則的優先序，避免同一留言被重複觸發不同規則。 Q4：「每位用戶只回覆一次」設定如何運作？ 開啟此設定後，系統會記錄已回覆過的用戶 ID。同一位用戶在同一規則下重複留言時，系統會略過不再回覆，防止洗版並維持貼文的版面整潔。 Q5：CommentFlow 可以同時管理多個粉絲專頁嗎？ 可以。系統支援多粉專管理，您可以在建立規則時選擇要套用的特定粉絲專頁，或為不同粉專設定獨立的自動回覆規則，非常適合代理商或多品牌經營者使用。 Q6：使用 CommentFlow 是否符合 Facebook 的使用規範？ CommentFlow 透過 Meta for Developers 官方 API 運作，屬於合規的整合方式。不過，建議避免過度頻繁的自動回覆或明顯的機器人行為，以免觸發 Facebook 的異常偵測機制。

哈囉大家好，我是享哥。今天想跟大家分享我近期使用 Vibe Coding 實作的「報價單系統」。 你可以直接前往 報價單測試網站 進行實際體驗！ 這個報價單系統是我很久以前就非常想做的專案，過去因為卡在一些技術問題，一直沒有動手實作。這次藉由 Vibe Coding 的協助，我成功開發出了這個具備後台編輯、公開報價頁、商務型電子簽署，以及 JSON / PDF 匯出功能的 MVP（最小可行性產品）。 系統核心定位與開發理念這套系統的核心在於提供一個流暢的線上報價流程。從後台建立報價單開始，到生成專屬的公開連結發送給客戶，客戶檢視無誤後能直接在線上完成簽名，最後系統會自動產生 PDF 留存。此外，我也加入了 JSON 的匯出與匯入功能，方便進行資料的備份與快速搬移。 後台管理與核心功能展示進入管理員登入介面後（我預設了一個 demo 測試帳號，大家可以在測試網站中登入），系統的總覽頁面會清楚劃分出幾個核心區塊，方便業務與管理人員操作： 1. 客戶與產品服務建檔 客戶名單：可以事先新增、管理客戶的聯絡資訊，在建立報價單時就能直接透過下拉選單帶入，省去重複輸入的麻煩。 產品與服務：可以預先建立好公司的各項產品或服務模組，包含計價單位、單價等。 2. 報價單範本設定在撰寫報價單時，經常會用到重複的條款或項目。系統支援建立「範本」，你可以將常用的預設條款（例如：付款條件、智慧財產權歸屬、保固範圍等）或是專案明細存成範本，未來開立新報價單時只要一鍵套用即可，大幅提升效率。 3. 權限控管設計在系統設定部分，我特別區分了「管理員」與「業務」的權限。一般業務帳號可以建立報價單、管理客戶與產品，但無法進入核心的系統設定頁面，藉此確保資料與系統的安全性。 線上報價與電子簽署流程這是整套系統最核心的運作流程： 建立報價單：選定客戶、套用範本、確認服務項目與金額無誤後進行儲存。 發送公開連結：系統會產生一個專屬的「公開報價頁連結」。雖然正式環境應該直接串接 Email 系統寄出，但為了 Demo 方便，目前採用生成公開連結的方式，讓業務可以直接複製並發給客戶。 客戶線上檢視：客戶點擊連結後，會看到一個排版專業、乾淨的報價單頁面，包含雙方資訊、報價明細、條款與匯款帳號等。 電子簽署：若客戶確認無誤，可以在頁面底部直接進行簽名。系統支援三種簽名方式： 手寫簽名：直接在畫布上滑鼠/手指簽名。 輸入姓名：由系統生成標準字體。 上傳圖檔：適合習慣使用公司大小章圖檔的企業客戶。 生成並下載 PDF：送出簽署後，系統會自動跳轉並生成一份包含簽名的完整 PDF 報價單，雙方皆可下載留存。一旦完成簽署，該份報價單在後台就會被鎖定，無法再被修改或刪除，確保合約的有效性。若需修改，只能複製一份新的報價單重新跑流程。 系統上線的挑戰：Cloudflare PDF 匯出踩坑經驗在開發這個專案時，我遇到最大的困難其實是「上線（Deployment）」。 我在本地端（Localhost）測試時，所有功能包含 PDF 匯出都運作得非常順暢。但當我將系統部署到線上，並串接資料庫與 Cloudflare 時，卻發生了許多 Bug。 這主要是因為我使用了 Cloudflare 內建的 PDF function 來生成檔案。這類雲端服務的功能在本地環境和實際線上環境的運作邏輯有時會有落差，導致我花了不少時間在解決上線後才冒出來的錯誤。 如果你未來也打算開發類似的系統，特別是會用到 PDF 套版或是需要部署到線上環境的專案，請務必有心理準備：你需要具備一定的線上環境部署與除錯能力。 AI 自動化開發心得與 Debug 建議這是我花了兩三天時間，透過 Vibe Coding 密集開發出來的成果。我最大的心得是：遇到問題、處理問題的能力依然是核心。 就算有 AI 輔助，程式還是會報錯。當你在線上環境遇到問題時，我的 Debug 建議是： 在瀏覽器按下右鍵，選擇「檢查（Inspect）」。 切換到 Console（主控台） 標籤頁。 查看裡面出現的紅字錯誤訊息。 將這些錯誤訊息完整複製下來，丟給 AI，請它幫你分析這些問題出在哪裡，然後一步一步去修正。 無論你今天是部署在 Cloudflare、AWS 還是 GCP，每一個雲端環境都會有自己獨特的毛病與設定問題（例如我遇到的上線後 PDF 無法生成）。只有自己實際走過一次流程，下次才會知道坑在哪裡。 常見問答 (FAQ)Q1: 這套線上報價單系統適合哪些使用情境？很適合接案工作者、小型工作室、數位服務公司，或是本來就有大量客製化報價需求的團隊。尤其當你常常需要反覆製作報價單、傳送給客戶確認，再追蹤簽署狀態時，這類系統能明顯減少來回溝通與人工整理文件的時間。 Q2: 電子簽署完成後，為什麼報價單不能再直接修改？因為一旦完成簽署，這份文件就已經進入具有合意證明意義的狀態。如果簽完還能直接改內容，等於破壞文件的可信度。所以系統在簽署後會鎖定該筆報價單，若真的需要調整內容，正確做法是複製一份新的版本重新送出，這樣才能保留完整的歷程。 Q3: 為什麼系統要支援手寫、輸入姓名、上傳圖檔三種簽名方式？因為不同客戶的習慣差很多。有些人偏好直接手寫簽名，有些人只想快速輸入姓名，也有些企業客戶會習慣蓋公司章或使用既有簽名圖檔。把三種方式都提供出來，可以降低客戶完成簽署的門檻，也比較符合真實商務場景。 Q4: PDF 匯出在本地正常，但部署到 Cloudflare 後出問題，常見原因是什麼？最常見的問題不是程式本身完全不能跑，而是「本地環境和正式環境的執行條件不一樣」。像是 Cloudflare 的執行限制、函式支援差異、路由設定、資源存取方式，甚至字型與 PDF 生成流程都有可能不同。所以只要牽涉到 PDF、檔案處理、第三方服務或部署平台特殊功能，就一定要預留線上除錯時間。 Q5: 如果我也想做自己的報價單系統，最應該先做好哪幾件事？我會建議先把流程想清楚，而不是一開始就追求功能很多。至少先定義好「客戶資料」、「產品/服務項目」、「報價單範本」、「公開頁面」、「簽署完成後的鎖定規則」這幾個核心模組。只要主流程先跑通，後續再慢慢補上通知、權限細分、更多匯出格式或 CRM 整合，會比一開始就做很大更實際。 希望這次的專案分享對大家有幫助！如果你對於 AI 自動化開發、AI 應用，或是如何規劃這類系統的架構有興趣，都歡迎提出來一起討論！

前言：打造每日自動選股網站Hello，又見面啦！我是享哥。今天要跟大家分享的是我的自動選股網站專案——Daily Stock Picks。 最近發現只要是跟「錢」有關的內容，大家似乎都比較感興趣，所以我決定做一個選股網站來試試水溫。這個網站的核心概念非常明確：系統每天會定時去撈取 API 資料，並利用預設好的交易策略，自動篩選出符合條件的台股清單，方便投資人參考。 網站核心：三大選股策略這個網站主要包含了三種不同的選股策略，每天下午五點會自動執行篩選機制： 1. 均線多頭篩選出目前呈現多頭排列趨勢的股票。這可以幫助我們找到正處於上升趨勢、動能較強的投資標的。 2. 高殖利率針對喜歡穩定配息的投資者，這個策略會篩選出具有高殖利率的股票。從網站實際運作的畫面上可以看到，這個條件通常會命中滿多檔股票的。 3. 60 日突破這個策略會尋找近期突破 60 日新高的股票。不過，因為這個策略需要較長天期（60 日）的歷史交易資訊，如果資料庫還沒有累積足夠的歷史資料，畫面上可能暫時會沒有符合條件的標的呈現。 開發細節：API 串接與資料獲取在資料來源方面，我是使用公開的 臺灣證券交易所 OpenAPI 來獲取每日交易資訊。 如果要做到極度即時的交易訊號，通常需要串接銀行或券商的專屬 API；但因為我們目前的目標只是一個每日盤後更新的「公開資料選股清單」，所以每天去拉取一次盤後資料就已經非常夠用了。 不過，這裡也有一個實務上的限制：如果一次想抓太大量的歷史資料，API 端有機會直接擋下來。因此我實際上是用「分批排程」的方式，慢慢把歷史資料補齊，而不是一次把全部資料硬拉回來。這也代表像 60 日突破 這種仰賴長天期資料的策略，從系統剛上線到真正完整運作，中間本來就需要一些時間累積。 在資料累積方面，網站的設計分為兩個階段： 第一階段：剛上線時，會先抓取當天的最新交易資料。 第二階段：隨著時間推移，歷史資料會逐漸累積完成。當擁有超過 60 天的資料後，依賴歷史紀錄的策略（如 60 日突破）就能夠精準運作。 自動化關鍵：Cloudflare 每日定時排程這個網站最重要的技術亮點，在於使用了 Cloudflare 的排程設定。 我在 Cloudflare 中設定了一個 Cron Trigger 觸發活動。由於 Cloudflare 使用的是 UTC 時間，而我們需要配合台灣時間（UTC+8）每天下午五點來抓取盤後資料，所以在排程時間上，我設定為 0 11 * * 1-5（每天早上 11:00 UTC），這正好會對應到台灣時間的下午五點。透過這個自動化排程，系統就能每天準時幫我們更新最新的選股清單。 後台管理：手動觸發更新機制在開發或測試的過程中，常常會遇到一個痛點：我們不可能總是慢慢等每天下午五點的排程自動執行，才去確認程式有沒有寫錯。 為了增添系統彈性，我特地做了一個簡單的後台監看介面。在這裡，開發者只要輸入設定好的 ADMIN_TOKEN，就可以透過「手動抓取今日資料」的按鈕，隨時觸發撈取資料的動作。比起自己去打 API 更新資料，透過這個小工具能省下很多麻煩。 常見問答 (FAQ)Q1: 這個每日自動選股網站適合拿來做即時當沖或盤中交易嗎？比較不適合。這個專案的定位是「盤後更新的公開資料選股網站」，重點在於每天固定整理出一份可參考的候選清單，而不是提供秒級更新的交易訊號。如果你要做盤中策略、即時警示或自動下單，通常還是要串接更即時的券商或專業行情 API。 Q2: 為什麼網站要等累積超過 60 天資料後，60 日突破 策略才會比較準？因為這個策略本身就依賴至少 60 個交易日的歷史價格資料來判斷是否創高。如果資料庫才剛建立，歷史資料還不完整，就算程式邏輯正確，也可能因為樣本不足而抓不到符合條件的股票。再加上公開 API 大量抓取時可能會擋請求，所以我實際上是用分批排程慢慢回補歷史資料；也因此這類策略通常要讓系統先跑一段時間，效果才會穩定。 Q3: Cloudflare Cron 為什麼不是直接設定成台灣時間下午五點？因為 Cloudflare Cron Trigger 使用的是 UTC 時區，所以要自行換算成台灣時間（UTC+8）。文中設定的 0 11 * * 1-5，意思是每週一到週五的 UTC 11:00 執行，剛好對應台灣時間下午五點。這是很多人在做排程時最容易搞混的地方。 Q4: 如果我想測試資料更新流程，一定要等排程時間到了才知道有沒有成功嗎？不用，這也是後台手動觸發功能存在的原因。你可以在開發或除錯時，先透過後台輸入 ADMIN_TOKEN 手動執行一次更新，確認 API 串接、資料寫入與策略計算都正常，這樣就不用每天等到固定時間才能驗證。 Q5: 這份選股清單可以直接當成投資建議嗎？不建議直接照單全收。比較好的做法，是把它當成「初步篩選工具」，幫你先從大量股票中找出可能值得進一步研究的標的，後續還是要搭配基本面、產業趨勢、風險承受度與自己的交易策略一起判斷。系統可以幫你省時間，但不能取代投資決策本身。 結語：透過 Vibe Coding 實現創意這次的專案很高興也是透過 Vibe Coding 的方式獨立完成的。 每天實踐 Vibe Coding 其實都需要不斷去思考：到底有什麼樣的新題材、新應用是可以吸引大家目光的？如果你對 AI 自動化開發或是更多有趣的 AI 應用有任何新的想法，都非常歡迎隨時跟我討論與分享。希望今天這個「每日自動選股網站」的實戰經驗，能帶給大家一些不一樣的想法與靈感！

大家好，我是享哥，今天要跟大家分享 n8n 的 MCP (Model Context Protocol)。 你有沒有想過，我們在用 n8n 拉節點、建構工作流的時候，如果可以透過 Vibe Coding 的方式，直接請 AI 幫我寫好程式，甚至透過 n8n 的 MCP，直接在 n8n 伺服器上幫我建立好 Workflow，是不是更好呢？ 以往我們的作法是：請 AI 幫我們寫好 Workflow 的 JSON 檔，然後手動 Import (匯入) 到 n8n Server 上去除錯 (Debug)。發生問題時，又要回到 AI 那邊修改，修完再匯入。這樣的過程其實滿困擾的。 網路上很多關於 n8n MCP 的教學通常都是使用 Cloud 服務，但常看我影片的朋友就知道，我很少用 Cloud，我大部分都是自建 (Self-hosted)。為了解決這個痛點，我研究了一段時間，發現透過 npx 的方式也能順利達成。今天就來帶大家實作！ 為什麼選擇 npx 方式安裝？官方 GitHub (czlonkowski/n8n-mcp) 的 Quick Setup 本來就主推 npx n8n-mcp，而且它會自動抓取最新版。這也相仿於部分 Cloud Shell 教學採用的 npx 當式執行方式。只要把依賴環境準備好，後續執行起來就會非常順暢。 前置準備：檢查 macOS 環境因為我是使用 macOS，以下以 Mac 環境做示範（如果是 Windows 用戶，可以依據概念自行轉換）。 首先，你必須確認你的 Node.js 與 npm 版本。網路上許多測試指出，至少需要 Node.js 22.17 以上的版本才不會有問題（我自己測試時使用的是 22.22，運作正常）。 打開 Terminal，執行以下指令確認版本： 1node --version && npm --version 步驟一：下載並編譯 n8n-mcp 專案確認 Node 版本沒問題後，我們要把官方 GitHub 上的專案 Clone 下來。為了配合 MCP Server 的讀取，建議將其放置在根目錄 (Root Directory)。 1. 下載專案12cd ~git clone https://github.com/czlonkowski/n8n-mcp.git 2. 安裝依賴模組 (Node Modules)下載完成後，進入資料夾並安裝依賴： 12cd ~/n8n-mcpnpm install 3. 編譯專案安裝完模組後，執行編譯： 1npm run build 這一段是為了先把依賴與快取準備好，讓後面透過 npx 或直接跑編譯後的檔案時能夠更加穩定。 步驟二：取得 n8n API Key接下來，我們需要一組 API Key 讓 MCP Server 能夠與你的 n8n 實體溝通。 進入你的 n8n 後台。 點擊左下角的 Settings。 在選單中找到 n8n API。 點擊 Create an API Key。 重要提醒： 建立後請務必立刻把這串 API Key 複製並保存起來，因為視窗關閉後就再也看不到了。 測試 n8n API 端點在我們開始設定 MCP 之前，我建議大家先測試一下 n8n API 端點是否正常運作。這樣可以避免後續設定時遇到莫名其妙的問題。以下是我整理的簡單測試方法和錯誤代碼解釋： 因為 401 代表「API 存在，但你沒有授權」，這其實正是我們測 API endpoint 時想看到的結果。 換句話說： 401 Unauthorized= 伺服器存在= API route 存在= 只是缺少 API Key 所以代表 URL 是正確的，API 有開啟。 n8n API 正常流程例如你直接打： https://你的-n8n-網址/api/v1/workflows 但沒有帶 API Key。 伺服器會回： 401 Unauthorized 意思是： 我知道 /api/v1/workflows但你沒有權限。 這代表： • n8n server 正常 • /api/v1 route 正常 • reverse proxy 沒擋 • API 功能有開 如果 API 有問題會出現什麼❌ 404 404 Not Found 代表： • URL 錯 • proxy 沒轉 /api • path 不存在 例如： https://你的-n8n-網址/workflows （少了 /api/v1） ❌ 502 / 503 代表： • n8n server 沒啟動 • reverse proxy 壞掉 • docker container 掛了 ❌ 403 403 Forbidden 代表： • 被 WAF / Cloudflare 擋 • IP 被限制 正常 API 呼叫會是什麼如果帶 API Key： 12curl -H "X-N8N-API-KEY: your-api-key" \https://你的-n8n-網址/api/v1/workflows 回： 12345{ "data": [ { "id": "1", "name": "workflow1" } ]} 為什麼很多人用 401 當健康檢查因為這個測試可以一次確認： • server 存在 • API route 存在 • proxy 沒壞 • API 功能開啟 但 不需要 API key。 所以很多 automation / agent setup 都用這招。 快速判斷表 回應 代表 401 API 正常，只是沒登入 404 API path 錯 502 server 掛 403 被防火牆擋 在實作中，我發現很多人會忽略這個測試，但它真的很重要。測試通過後，我們就可以放心進入下一步驟了。 步驟三：設定 MCP Server 配置文件 (JSON)接下來要將 n8n MCP 加入到你的 AI 助手 (如 Claude Desktop, Cursor 等) 中。我們需要編輯 MCP 的 JSON 設定檔。 請將以下的 JSON 格式複製起來，並替換成你自己的參數： 123456789101112131415{ "mcpServers": { "n8n-mcp": { "command": "npx", "args": ["-y", "n8n-mcp@latest"], "env": { "MCP_MODE": "stdio", "LOG_LEVEL": "error", "DISABLE_CONSOLE_OUTPUT": "true", "N8N_API_URL": "https://你的-n8n-網址", "N8N_API_KEY": "你的_API_KEY" } } }} 參數設定重點： N8N_API_URL: 請填入你正在使用的 n8n API 網址。如果你是本地端測試，就填 http://localhost:5678。如果是自建的伺服器，就填寫你的獨立網域。 N8N_API_KEY: 貼上剛剛在步驟二取得的 API Key。 步驟四：在 AI 工具中啟用 MCP以支援 MCP 的 AI 工具為例： 開啟工具的 MCP 設定選項 (通常在右上角或設定選單中的 MCP Servers)。 點擊 Manage MCP Servers，選擇編輯原始設定 (View raw config)。 將上述修改好的 JSON 貼上去。如果你原本就已經有其他的 MCP Server，只需將 "n8n-mcp" 這個區塊加入即可。 點擊 Refresh (重新整理)。 重新整理後，你就會看到 n8n-mcp 的服務被成功啟用 (Enabled)！ 此時展開功能列表，你會發現多了非常多控制 n8n 的方法，例如 get_node、search_nodes 等等。其中最關鍵的一個功能是：**n8n_create_workflow**。有了它，AI 就能直接幫我們在伺服器上建立工作流。 實戰測試：讓 AI 自動生成「AI 新聞摘要」工作流設定完成後，我們實際來測試一下。我給 AI 下了這樣一段 Prompt (提示詞)： 「請創建一個 n8n 工作流，主題是 AI 新聞摘要。每天都收集最新的 AI 新聞，透過 LLM 整理摘要並加入專家的切角，最後寄信到我的 Gmail 給我。」 按下送出後，AI 思考了幾秒鐘，便開始自動調用 n8n-mcp 的各項 Tools： 它先去搜尋 Schedule Trigger (每天定時執行)、RSS Read (抓取新聞)、OpenAI (整理摘要) 以及 Gmail (寄信) 相關的節點架構。 接著，AI 擬定好了一個實作計畫，包含這五個節點的連線邏輯。 驗證 JSON 語法無誤後，AI 直接調用 n8n_create_workflow 指令。 結果：AI 成功幫我部署上去了！ 它還直接回傳了建立成功後的 Workflow ID 給我。 此時我回到我的 n8n 後台查看，真的出現了一個名為「每日 AI 新聞摘要與專家分析」的工作流！打開一看，從排程、RSS 抓取、合併資料、OpenAI 處理到寄送 Gmail，所有的節點跟連線都已經拉好。 這意味著什麼？完全不需要手動 Import JSON 了！ 我們現在可以直接在 AI 聊天室下達指令，讓 AI 幫我們把 n8n 工作流建置在伺服器上，我們只需要進去微調憑證 (Credentials) 或修改部分參數，就可以立刻啟用 (Active)。 常見問答Q1：一定要先 git clone 並 npm install 嗎？不是直接用 npx n8n-mcp@latest 就可以了嗎？理論上直接用 npx 就可以執行，但如果你是第一次安裝，或遇到套件抓取、編譯相依套件、快取異常等問題，先手動下載專案並完成 npm install、npm run build，通常會比較穩定。尤其是本地自建環境，先把依賴準備好，後面除錯會省很多時間。 Q2：如果 AI 工具裡看不到 n8n-mcp，該先檢查什麼？先檢查三件事： JSON 設定格式是否正確，特別是逗號、括號與雙引號。 N8N_API_URL、N8N_API_KEY 是否真的有填對。 AI 工具是否已經重新整理 MCP Servers，或重新啟動應用程式。 很多時候不是 n8n-mcp 壞掉，而是設定檔少一個字元，或 API Key 貼錯位置。 Q3：我用的是本機自建 n8n，也能這樣設定嗎？可以。如果你的 n8n 跑在本機，通常可設定成： 1"N8N_API_URL": "http://localhost:5678" 但要注意一件事：你的 AI 工具必須能夠連到這個本機位址。如果 AI 工具本身是裝在同一台電腦上，通常沒問題；如果是遠端環境或沙盒環境，就要另外確認網路可達性。 Q4：把 N8N_API_KEY 放進 MCP 設定檔，會不會有安全風險？會，所以你要把它當成正式憑證管理。建議至少做到以下幾點： 不要把含有 API Key 的設定檔上傳到 GitHub。 不要截圖公開自己的完整設定內容。 如果懷疑金鑰外洩，立刻回到 n8n 後台重新產生新的 API Key。 只要拿到這把金鑰，理論上就可能透過 MCP 對你的 n8n 做操作，因此一定要小心保存。 搭配 n8n-skills 讓操作更順暢為了讓 n8n-mcp 的操作更加順暢，建議搭配 n8n-skills 這個專案。它提供了額外的技能和工具，可以增強 AI 助手在處理 n8n 工作流時的能力。 結語這完美解決了我們以往使用 n8n 時，手動搬運與除錯的痛點。相信以上分享的內容，會對大家在使用 n8n 時有極大的幫助。 希望大家的 n8n Vibe Coding 體驗能夠越來越好，跟我一樣輕鬆用嘴巴 (下指令) 就能完成自動化工作流！如果你有任何問題，歡迎在下方討論；如果你想了解更多 AI 自動化與相關應用的內容，請記得關注與訂閱，我會持續跟大家分享更多實用的技巧。謝謝大家！

哈囉，大家好！我是享哥。今天又要來跟大家分享一個全新的 Vibe Coding 課程實作影片。 這次的課程核心，是要帶你透過 AI，在短短 3 小時內，從零開始做出你的第一個「自動化銷售頁（Landing Page）」。你不僅能產出一個可以實際運作的 MVP（最小可行性產品），還能將後端的報名與追蹤流程完全自動化。 Demo 網站展示 3 小時實作：用 AI 寫出你的第一個銷售頁這個課程設計為 6 個核心步驟，將銷售頁的建置、成效追蹤、網站部署，以及 LINE 自動銷售流程完整串接起來。透過 Vibe Coding 的核心概念，你將學會如何利用 AI 輔助開發，實作出高質感的網頁。 課程中使用的前端技術棧包含了現代主流化工具，幫助你快速入門： Next.js Tailwind CSS 除此之外，我們還會教你如何設置追蹤像素（Pixel），精準掌握使用者的網頁動線與行為。 零成本部署與自動化 CRM 串接為了讓大家能以極低的成本啟動商業測試，課程會採用幾乎零成本的架構來完成部署與資料串接。 GitHub Pages 輕鬆部署網站我們會將完成的網頁專案，直接部署到 GitHub Pages 上。這不僅免除了昂貴的伺服器主機費用，對於初步測試市場水溫的銷售頁來說，是非常實用且高效的作法。 建立 LINE 自動銷售 CRM當銷售頁準備就緒後，訪客若想報名或購買，我們會引導他們掃描 QR Code，加入 LINE 官方帳號。透過 LINE 機器人，我們能打造一套自動化的客服與銷售系統（CRM）。 實際 Demo：自動化報名與查帳流程以下為你展示當顧客進入 LINE 官方帳號後的實際報名體驗： 觸發報名流程： 顧客輸入關鍵字「報名」或點擊選單，系統會自動跳出報名資訊（包含課程日期、地點、費用等）。 查看價格與匯款： 顧客可以選擇查看「早鳥優惠」、「單人票」或「雙人團報」等方案，並取得匯款帳號。 確認匯款完成： 顧客匯款後，點擊「我已完成匯款」，系統會要求顧客輸入帳號後五碼以利對帳。 Google Apps Script (GAS) 串接 Google Sheets顧客在 LINE 上提交的報名與匯款資訊，會怎麼處理呢？這裡就是自動化最核心的環節。 我們會透過 Google Apps Script (GAS) 撰寫簡單的腳本，將 LINE 收集到的資料自動同步至 Google Sheets 中。你的 Google 試算表就會變成一個強大的後台管理系統。 我們在試算表中設定了多種報名狀態，方便管理者進行後續追蹤： 狀態 (Status) 說明 (Description) Pending 等待確認中（剛提交匯款資訊） Confirmed 已核帳，確認收款完成 Notified 已發送報名成功通知給顧客 Refunded 已完成退款 Cancelled 顧客或管理者取消報名 課程的 4 大階段與課前準備為了讓學習更有系統，整個實作過程被拆解為 4 個階段，按部就班幫助你把架構建構起來： 階段 A：先把網站跑起來 目標：先看到畫面，知道你改動程式碼時會發生什麼事。 階段 B：把文案、價格、日期、按鈕換成你的內容 目標：快速做出一個「看起來像你的產品」的專屬頁面。 階段 C：串接 LINE 官方帳號 目標：讓網站的按鈕能真實將顧客引導至你的 LINE 進行互動。 階段 D：串接 GAS 與 Google Sheet 目標：將 LINE 傳來的資料，自動記錄下來並進行狀態管理。 你需要準備的工具帳號要完成這套零成本自動化銷售系統，你只需要事先準備好以下免費帳號： GitHub 帳號 Google 帳號 LINE 個人帳號 LINE 官方帳號 (Official Account) 常見問答完全不會寫程式，也適合上這堂課嗎？可以。這堂課的設計重點不是要求你先具備完整工程背景，而是帶你透過 AI 輔助，一步一步完成實作。你只需要能跟著操作、願意動手練習，就能做出自己的第一個自動化銷售頁 MVP。 課程中會實際做到哪些成果？你會完成一個可對外展示的銷售頁，並把報名流程串接到 LINE 官方帳號，再透過 Google Apps Script 與 Google Sheets 建立後台資料管理流程。也就是說，從前端頁面、名單收集到匯款回報與狀態追蹤，都會有一套可實際運作的雛型。 這套系統一定要花很多工具費用嗎？不一定。這次課程刻意選擇低成本甚至近乎零成本的工具組合，像是 GitHub Pages、Google Sheets、Google Apps Script 與 LINE 官方帳號，目的就是讓你先快速驗證市場，再決定是否要擴充更進階的商業化流程。 如果我已經有自己的課程或服務，也能套用這套方法嗎？可以，而且很適合。無論你要賣的是線上課程、顧問服務、講座活動、工作坊，甚至是需要先蒐集名單再成交的產品，都可以把這個流程當成基礎骨架，再替換成你的品牌文案、價格方案與報名資訊。 上完課之後，我可以自己修改內容與流程嗎？可以。課程會把整個架構拆成幾個清楚的階段，讓你知道網站內容、按鈕連結、LINE 關鍵字回覆、Google Sheets 欄位與 GAS 腳本之間是怎麼配合的。後續你要換圖片、改價格、調整表單欄位或新增追蹤流程，都會更有方向。 這堂課比較適合哪些人？如果你是想快速驗證產品想法的創業者、想把報名與客服流程自動化的講師或顧問、想練習 AI 協作開發流程的行銷人員，這堂課都很適合。它特別適合想先做出成果，而不是先花很多時間學完整套程式理論的人。 這些看似複雜的流程，在 Vibe Coding 的輔助下，實際上難度並不高。大約只要花費 3 個小時，你就能打造出專屬於你、從網頁前端到資料後台完全串接的自動化系統！ 如果你對這個課程、或是對 AI 自動化工作流有興趣，歡迎留言告訴我你的想法，也請務必訂閱關注我，後續我會持續分享更多 Vibe Coding 相關的實作作品與應用技巧！

大家好，我是享哥。今天要來分享一個非常實用的 Vibe Coding 擴充工具 (Skill) —— 專門用來串接台灣第三方金流的開源專案。這個工具涵蓋了台灣常見的藍新金流、綠界科技與統一金流，讓你在使用 AI 進行程式碼開發時，能更輕鬆地完成付款流程的整合。 Demo 網站展示 為什麼需要台灣金流 Skill 工具？在開發電商或銷售網站時，串接在地化金流往往是一大痛點。這個發布在 GitHub 上的開源專案 paid-tw/skills 整理了台灣主流的第三方支付模組，讓開發者可以直接透過指令將金流能力導入專案中。 無論你是使用 Claude Code、Codex 還是其他 AI Coding Agents，都可以透過安裝這個 Skill 來大幅節省查閱 API 文件與手動刻寫串接邏輯的時間。 如何快速安裝金流 Skill？你可以直接使用 npx 指令來安裝需要的金流模組。如果你不知道如何操作，也可以把 GitHub 網址直接丟給 ChatGPT，請它教你如何使用。 以下是幾種常見的安裝指令： 12345678910# 查看可用的 skillsnpx skills add paid-tw/skills --list# 選擇特定金流安裝npx skills add paid-tw/skills --skill newebpay # 只安裝藍新金流npx skills add paid-tw/skills --skill ecpay # 只安裝綠界科技npx skills add paid-tw/skills --skill payuni # 只安裝統一金流# 安裝全部npx skills add paid-tw/skills --all 實戰示範：用 Cursor 快速建立一頁式銷售網站為了驗證這個 Skill 的效果，我使用 Cursor 進行了實際測試。我請 AI 幫我建立一個一頁式的服飾銷售網站，並指定使用高品質網路圖庫。最重要的是，我要求 AI 使用剛安裝的 Skill 來建置「綠界科技」的金流功能，並預設使用綠界的測試帳號進行開發。 AI 接收到指令後，會先產出一份完整的開發計畫（包含建立 Next.js 專案、設計頁面、串接金流 API 等），接著便開始自動建置。建置完成後，我們就有了一個具備購物車結帳功能、且畫面美觀的一頁式網站。 綠界金流測試卡號與結帳流程驗證進入結帳畫面後，填寫基本資料並選擇信用卡付款，系統便會自動跳轉至綠界科技的付款測試環境。 請注意，在測試環境中，務必使用官方提供的測試信用卡號，切勿輸入真實的信用卡資訊。 綠界常用測試信用卡資料：123卡號：4311-9522-2222-2222有效年月：填寫大於今天的未來日期即可 (例如：12 / 28)安全碼：222 輸入測試卡號與姓名後，系統會要求輸入手機號碼以接收測試用的 OTP 驗證簡訊。輸入收到的驗證碼並送出，即可看到付款流程完成的結果頁面，並取得測試的訂單編號與交易編號。這些交易紀錄也都能在綠界測試金流的後台查詢到。 (小提醒：由於目前是在本地端測試，若沒有設定公開的 Webhook 回呼網址如 Cloudflare Tunnel 或 ngrok，訂單狀態可能會停留在 pending，這是正常的測試現象。) 內網穿透與後續應用因為我們是在本機測試環境，並沒有設定公開的 API 回呼網址。如果大家要在開發環境中實際接收金流狀態，推薦使用內網穿透工具。例如 Cloudflare Tunnel 就是個絕佳的選擇，能輕鬆解決回呼問題。 進階技巧：如何提升 Codex 開發的成功率？在這次測試中，我也發現了一個實用的小技巧。當我們使用 Codex 處理如串接金流這類較複雜的任務時，建議大家在介面上進行以下兩個設定優化： 提高推理程度 (Reasoning Effort)： 將模型的推理程度設定為「最高」或「超高」(Extra high reasoning depth for complex problems)。雖然 AI 思考和產出程式碼的時間會變長，但犯錯的機率會大幅降低。 開啟規劃模式 (Planner Mode)： 讓 AI 在動手寫程式碼之前，先擬定好清楚的實作步驟，確認無誤後再執行。 這兩個設定能顯著提升 AI 自動化開發的成功率。透過 Vibe Coding 結合開源的台灣金流 Skill，我們能以極高的效率完成以往繁瑣的支付串接工作。大家有興趣的話趕快去測試看看，有任何心得也歡迎一起討論！ 常見問答完全不會寫程式，也能用 AI 串接綠界科技金流嗎？可以，但前提是你願意照著步驟操作，並理解每一段流程在做什麼。這篇分享的重點不是手刻所有程式，而是善用 AI 與現成 Skill，幫你快速建立一個可運作的付款流程雛型。即使你不是工程師，也能先做出測試版，再逐步優化。 這篇教學適合哪些類型的網站？很適合一頁式銷售頁、課程報名頁、小型電商網站、活動售票頁，或任何需要信用卡付款與訂單流程驗證的專案。只要你的網站需要台灣在地金流，這種做法就很有參考價值。 為什麼要搭配台灣金流 Skill，而不是自己從頭研究 API？因為自己從零研究第三方支付文件，通常要花很多時間理解欄位、簽章、測試流程與回呼設定。透過已整理好的 Skill，能先把常見整合邏輯快速建立起來，再把時間放在畫面設計、商業流程與例外處理上，效率會高很多。 綠界科技測試環境可以直接用真實信用卡付款嗎？不行。測試環境只能使用官方提供的測試卡號與測試流程，不能輸入真實信用卡資訊。你應該先在測試環境完成流程驗證，確認訂單建立、付款頁跳轉與回傳資料都正常後，再進一步處理正式環境設定。 如果金流付款成功，但網站沒有收到訂單狀態更新，通常是什麼原因？最常見的原因是本機開發環境沒有公開可被綠界回呼的網址，因此金流平台雖然完成付款頁流程，網站後端卻收不到伺服器通知。這時可以透過 Cloudflare Tunnel、ngrok 等內網穿透工具，先建立測試用公開網址來驗證回呼機制。 用 AI 做金流串接，還需要自己檢查哪些重點？需要。像是訂單金額是否正確、測試與正式環境參數是否分開、回呼網址是否可連通、付款成功與失敗頁是否正常導回、敏感金鑰是否妥善保管，這些都還是要人工確認。AI 可以大幅加快開發，但不能省略驗證與安全檢查。

Hello 我是享哥！今天跟大家分享是我 Vibe Coding 的一個作品，會跟你講我的思路，跟我如何去做到這樣子一個作品。好，話不多說，我們開始吧！ 為什麼想打造這個接案網站？大家看到的這個畫面，是我 Vibe Coding 的一個網站，它是一個形象網站。為什麼會有這樣子的想法跟起源？最近在接案時，我發現這常常是接案遇到的痛點：不管跟業主怎麼溝通，他都不知道要給什麼資料。 所以，不如先做一個 Demo 給他看。他知道至少會有首頁、文章、產品、關於我們、常見問題，跟聯絡我們這些項目，他也就會知道要給我類似的相關問題跟內容。這就是開發這個網站的出發點。 Demo 網站展示 網站核心功能：滿足業主的基本需求產品型錄與聯絡表單對方希望有一個產品分類，最核心的功能會是產品這塊。你點進來，它可以去洽詢產品，比如說連到公司的聯絡表單，或是說直接聯絡他、打電話給他。這裡是他的產品型錄，這是最基本他可能會需要用到的一個功能。 文章與最新消息展示再來是文章這塊，比如說公司有很多最新消息，或是有一些內容希望用文章的方式來做呈現。這些我都會先做假資料，讓他大概能看到它實際的樣子。 內建 CMS 後台管理系統這些內容我們可以透過類似 WordPress 這種 CMS 的後台來做管理。我們也做了一個專屬的後台，也就是說如果增加了什麼內容（例如文章有什麼更新），它會同步在前台顯示，這是一個最大的優勢。當然，不論你要新增內容、產品文章，包括輪播圖或媒體要上架，這些東西都是可以輕鬆完成的。 實用亮點：一鍵切換產業主題模板第二個亮點就是我設計的主題模板。也就是說今天我接到了比較偏「工業設備」這塊的案子，我可以先套用該主題，它會先備份並套用起來。 這些全部都是假資料，當我重整一下，你看它就變成了「打造穩定智慧工廠的產線」。圖片都是先用網路上高品質的圖庫去做應用。主要是讓他看到 Demo 網站，讓他知道這些區塊應該要提供什麼樣的素材（比如說他需要給照片套進去，以及相關的資訊內容），大幅方便我們在接案的時候使用。 因應不同組織屬性的彈性調整當然有的時候除了產品型錄，我們要的可能是比較像「社團組織官網」這種類型。套完版之後，它的一些網址跟內容會比較不太一樣，所以需要重新重整。 像剛剛的「文章」就變成了「最新消息」，因為對社團來說，他們比較需要的是最新消息的發佈；社團沒有產品，所以該區塊可能就會變成「活動」，這部分可能要再微調修改一下。不過這主要是先給業主看一下，原來整個網站的概念會是什麼樣的呈現，後續大家可以再去做一些調整跟處理，這就是套版設計的魅力。 技術架構：AI Coding 與 Cloudflare 部署要完成這些功能，除了 AI 的 coding 以外，我們還需要進行部署。我是使用 Cloudflare 去做部署的，大家可以稍微再去查一下，包括它的 D1 資料庫，或是相關可以放產品、圖片等內容的儲存方案，它都可以做很好的支援。這是目前最流暢、最簡單的設計 vibe coding 做法。 以上跟大家分享我的 vibe coding 的作品！至於實際怎麼做，之後會再錄相關一系列的影片跟大家分享。 常見問答 (FAQ)Q1: 什麼是內建 CMS 的接案網站？內建 CMS 的接案網站，指的是前台網站與後台內容管理系統整合在同一個專案裡，業主可以自己新增文章、產品、圖片與首頁素材，不需要每次改內容都回頭找工程師處理。 Q2: 為什麼做接案提案時，先準備一個 Demo 網站很重要？因為很多業主其實不知道網站需要準備哪些資料，先做出可操作的 Demo，能讓對方快速理解首頁、產品、文章、聯絡表單與常見問題等區塊長什麼樣子，也比較容易收集正確素材。這篇提到的展示站也可以直接參考： Demo 網站展示 Q3: 這種 Vibe Coding 接案網站適合哪些產業使用？很適合需要品牌形象頁、產品型錄、最新消息或活動頁面的產業，例如工業設備、服務型公司、教育品牌、協會組織與中小企業官網，都可以用同一套架構再做細部調整。 Q4: Cloudflare 在這個 AI 接案網站架構中主要負責什麼？Cloudflare 主要負責網站部署與雲端基礎設施，像是 Pages、Workers、D1 資料庫與媒體儲存相關服務，能讓網站前台、後台與資料管理放在同一個生態系裡，部署流程也相對單純。 Q5: 用 AI 打造可切版的 CMS 網站，對接案流程有什麼幫助？最大的幫助是把提案、製作 Demo、內容上架與後續維護整合成更快的工作流。你可以先用 AI 快速完成初版，再依不同產業切換主題模板，讓業主更快看到成果，也更容易推進合作與簽約。 如果你想要了解更多 AI 自動化，或是 AI 相關應用的話，請訂閱我、關注我！

各位同學大家新年快樂，我是享哥！ 今天要跟大家分享近期在 Threads 上面非常火紅的一款 WordPress 全新開源外掛——Novamira。這款在二月份剛開源的外掛，看過介紹後讓我非常好奇，因為它號稱能夠徹底顛覆現有的 AI 協作模式。經過實際測試後，接下來我將完整分享我的使用心得與操作教學。 Novamira 是什麼？為什麼能顛覆 AI 協作模式？Novamira 的核心價值在於徹底打通了 WordPress 與 AI 開發工具（如 Cursor、VS Code、Claude Desktop 等）之間的隔閡。 過去我們在開發或修改 WordPress 主題與外掛時，必須先看懂 PHP 程式碼，遇到問題還要將整段程式碼複製丟給 AI，等 AI 產出解答後再手動貼回伺服器。而 Novamira 透過 MCP (Model Context Protocol) 協定，賦予 AI 直接讀取、寫入、編輯現有檔案，甚至刪除伺服器上 PHP 程式碼的能力。 如何安裝與設定 Novamira？完整圖文步驟要讓 AI 與你的 WordPress 網站順利連線，請跟著以下步驟進行設定： 步驟一：下載與安裝外掛 前往 Novamira 官網，直接點擊 Download for free 下載外掛壓縮檔。 開啟你的 WordPress 後台（建議先準備一個全空的測試環境）。 進入外掛選單，點擊「上傳檔案」，將剛剛下載的壓縮檔上傳並啟用。 步驟二：產生並配置 MCP 伺服器金鑰安裝完成後，我們需要建立一組讓 AI 工具存取網站的授權密碼： 在外掛設定頁面，點擊 Create New Application Password。 系統會自動產生一組專屬密碼（請注意：此密碼只會出現一次，務必妥善複製並保存）。 頁面下方非常貼心地準備好了對應的設定檔語法。無論你是使用 Claude Code、Claude Desktop、Cursor 或 VS Code，只需複製畫面上提供的 JSON 內容。 將複製的內容，貼到你常用的 AI 工具的 mcp.json 設定檔中。 12345678910// 示意範例：請將外掛產生的設定完整貼入你的 MCP Servers 區塊中"mcpServers": { "novamira": { "command": "...", "args": ["..."], "env": { "WP_APP_PASSWORD": "你的專屬密碼" } }} (設定完成後，記得使用 Ctrl + S 或 Command + S 儲存設定檔，並在 AI 工具的 MCP 介面點擊 Refresh 重新整理。) 步驟三：開啟 WordPress 端的 AI 權限為了確保連線成功，最後一個關鍵步驟是回到 WordPress 進行授權： 進入 WordPress 的 Setting (設定) 頁面。 找到並勾選 Enable AI Ability 選項。 點擊 Save 儲存設定。 完成以上三步後，你可以在 AI 聊天視窗中輸入：「我已經連上了，你可以幫我確認一下目前 WordPress 網站的基本資訊嗎？」如果 AI 能順利回報你的網站目錄與結構，就代表連線大功告成了！ Novamira 的資安防護：核心檔案無法竄改開放 AI 直接存取伺服器聽起來有些危險？不用擔心，Novamira 在安全機制上做了嚴格的限制。 它不允許 AI 修改 WordPress 的核心底層檔案，例如： wp-admin wp-includes AI 能夠讀取與修改的範圍，僅限於我們日常開發最常接觸的 wp-content 目錄（包含主題與外掛）。這種沙盒式 (Sandbox) 的限制，大幅降低了網站因 AI 誤改而崩潰的資安風險。 實測應用：讓 AI 直接在伺服器寫出一個聯絡表單外掛為了測試它的極限，我準備了一份由 ChatGPT 簡單生成的「Mini Contact Form (迷你聯絡表單)」PRD (產品需求文件)，並直接丟給透過 MCP 連接的 AI 助理（我使用的是 Google 的 Antigravity 搭配免費額度）。 Mini Contact Form.md 神奇的事情發生了： AI 首先讀取了我提供的需求文件。 它自動擬定了一份實作計畫 (Plan) 與任務清單 (Task)。 接著，AI 直接在我的 WordPress 伺服器內部開始撰寫程式碼。 我打開 WordPress 的外掛目錄檢查，發現 AI 真的已經在伺服器端建好了這個外掛的檔案夾與程式碼，而不是在我的本機檔案總管裡產生文件！這意味著我們可以一邊讓 AI 開發，一邊直接在 WordPress 後台重整看結果，開發效率呈現倍數成長。 結語：WordPress 接案開發的未來趨勢Novamira 打通了 WordPress 與 AI 之間的最後一哩路。對於以 WordPress 接案為主的開發者來說，未來遇到需要客製化功能、增強現有外掛時，不再需要繁瑣地查閱原始碼或在編輯器間來回複製貼上。透過 MCP 協定，AI 將成為你最得力的伺服器端駐點工程師。 如果你想了解更多關於 AI 自動化以及相關的開發應用，歡迎持續關注並訂閱享哥，我們下次見！

一個燒掉萬元的真實故事有一個故事在社群裡傳得很兇。一位老師，用 Google AI Studio Build 做了一個有趣的小應用。他很用心，甚至做了「輸入 Gemini API Key」的介面，讓粉絲覺得自己在操作自己的額度。 結果，悲劇發生了。用戶的金鑰其實沒生效，程式最後還是默默使用了老師自己放在 Cloud Run 裡的金鑰。短短幾天，帳單就燒掉超過一萬元。這就是典型的 「我做 App、別人玩、錢我付」。 1. 喧囂與反思事件引爆的討論故事一出，群眾立刻分成幾派。有人說是 AI 工具害的，太不可靠。有人則批評老師不專業，不該犯這麼低級的錯誤。 還有人提出另一個角度：vibe coding 的課程，本來就不是訓練工程師去做部署與維運。大多數時候，它只是帶人做 demo、做功能展示、快速做 MVP。在這樣的情境裡，要求老師同時具備深厚的 SRE 或資安能力，會不會太嚴苛？ 我的觀點：這不是誰對誰錯，而是角色定位問題我自己覺得，這不是 AI 的錯，也不是老師單方面的問題。真正的關鍵在於 角色定位與風險邊界。 vibe coder 的價值是「快」。可以快速讓想法跑起來，看到成果，測試概念。這個角色本來就不是要一手扛起部署與維運的責任。 但一旦你決定要「發佈給別人用」，你就自動進入另一個遊戲規則。那時候，你必須要為成本與安全負責。而這件事，不管你想不想當工程師，都是逃不掉的。 為什麼會燒到作者？剖析「所有權錯覺」其實技術原因一點都不複雜。介面雖然收了用戶的 Key，但在呼叫模型的程式裡，最後使用的仍然是作者的金鑰。 可能是因為程式碼裡設了 fallback，可能是因為環境變數優先，甚至有可能是根本沒有把用戶輸入的金鑰傳進去。 不管原因是什麼，結果只有一個：表面上你輸入了自己的卡號，實際上後台刷的卻是別人的卡。這就是典型的 「所有權錯覺」。 2. 建立不死的基本功承認吧，部署不是 vibe coder 的強項。我們的長處是快速開發、驗證與展示。所以，與其強迫自己成為部署專家，不如先建立一套最小可行的「安全習慣」。 習慣一：費用感知 (Cost Awareness)AI 的費用公式常常是「乘法」：輸出長度 × 批次大小 × 併發數 × 重試次數。任何一項放大，帳單就可能直接爆。所以，在發佈之前，請務必把這些參數寫死，設一個合理上限。在發佈之後，每天花兩分鐘檢查用量，並且開好告警與費用上限。 習慣二：金鑰衛生 (Key Hygiene)金鑰一定要放在 .env，不要寫死在程式碼裡。AI 也不能直接讀 .env，因為它有可能把內容印出來。最聰明的做法，是再做一個 .env.sample，內容是假的，但能讓 AI 知道有哪些變數存在。 為什麼要這樣？因為 AI 很好奇，如果你完全不給，它就可能幫你寫程式去偷看環境變數，這樣反而更危險。記住：一旦金鑰被看到了，就要馬上重置。 習慣三：最小可行的發佈流程在你按下「部署」之前，請一定要對 AI 說一句： 123請幫我做 code review 這不是形式。不同的 LLM 互相檢查，真的能抓到你看不到的錯誤。要它檢查三件事： API Key 流向是否正確 有沒有炸帳單的風險 有沒有無限重試或缺少超時設定 我就親身遇過：自動生成的管理後台程式碼，直接把帳號密碼硬寫進去，最後是靠另一個 AI 的 code review 才被揪出來。 3. 從避坑到卓越的進階技巧當你掌握了基本功，不再擔心生存問題後，就可以開始追求卓越，讓你的作品更穩健、更專業。 技巧一：選擇對的遊樂場 (Serverless 優先)一個更聰明的選擇是 「Serverless 優先」。它就像一個美食街攤位，只有客人點餐時（觸發事件），你的攤位才需要開火（執行程式），並只為這一次的烹飪付費。 平台建議： Vercel、Netlify 非常適合前端應用；Google Cloud Functions 或 AWS Lambda 則適合處理獨立的後端邏輯。 核心優勢： Serverless 強迫你將功能模組化，大幅降低了因單一 Bug 導致整個服務崩潰與帳單失控的風險。 技巧二：用一句咒語升級你的 AI Code Review「幫我 code review」太模糊了。下次試試這句咒語： 123請你扮演一位資深、paranoid (偏執多疑) 的 SRE (網站可靠性工程師)，並且用最嚴格的標準來審查以下程式碼。你的首要目標是找出所有可能導致「帳單爆炸」、「金鑰外洩」或「服務中斷」的風險。請條列出你發現的問題、風險等級，以及具體的修復建議。 這句咒語透過賦予 AI 一個專家角色和明確目標，能讓審查結果的品質提升數個檔次。 技巧三：養成「防禦性寫作」的思維防禦性寫作的核心思想是：「永遠不要相信任何外來的東西，並假設程式隨時可能在最糟的地方失敗。」 加上「超時」與「重試限制」： 在呼叫任何外部 API 時，務必設定超時時間與最大重試次數。 驗證使用者輸入： 任何來自使用者的資料，在使用前都要進行嚴格的驗證與清理。 學習 IAM 角色 (進階)： 當你更熟悉雲端平台後，嘗試用 IAM 角色來取代靜態的 API Key，安全性遠高於寫死的金鑰。 4. 將原則化為日常「我不是工程師」與「我得負責」並不衝突有人會說：課程是小白教小小白，真的要要求這麼多嗎？我覺得這不是苛求，而是尊重。當你把作品發佈出去，別人的體驗裡，應該包含「不會意外花到你的錢」。安全、費用上限、告警，這些不是進階工程技巧，而是產品設計的一部分。 一個你可以建立的「安全開關」習慣我想像一個最小的日常習慣： 先把 Usage 和 Billing 頁面加到書籤。 打開用量告警、費用上限、超額停用。 回到專案，對 AI 說出那句 code review 的咒語。 部署後，每天早餐時間花兩分鐘檢查用量。 有異常？馬上降參數、降併發，或停掉自動重試。這樣就夠了。 最終心法：發佈前的三個靈魂拷問在發佈之前，先問自己： 這個請求，現在刷的是誰的卡？ 它最多能花多少？ 出問題時，會自動停嗎？ 能答出來，你就準備好了。答不出來，就先別急著上線。 結語vibe coding 讓我們快，但發佈，讓我們必須負責。 負責，不是要你立刻變成專業工程師，而是學會關掉風險。 把平台當護城河，把 code review 當儀式，把金鑰當保險箱，把每日兩分鐘檢查當刷牙。 這樣，你做的東西才能真的被放心使用，而不是下一個 「我做 App、別人玩、錢我付」 的故事。