--- title: "Vibe Coding 經驗分享" description: "開工後做了一場內部分享，分享團隊如何用 Vibe Coding 快速打造 AI 報表系統、客製化專案管理工具、MGM 會員推廣系統，以及 AI 開發的隱憂與反思。" canonical_url: "https://blog.markkulab.net/post/ai-dev-experience-sharing" author: "Mark Ku" author_url: "https://blog.markkulab.net/author/mark-ku" site: "Mark Ku's Blog" date_published: "2026-02-28 10:00:00 +0800" category: "AI" tags: ["ai", "vibe-coding", "nextjs", "langchain", "ai-agent", "developer-experience"] language: "zh-TW" license: "CC BY 4.0" license_url: "https://creativecommons.org/licenses/by/4.0/" attribution: "轉載或引用請註明作者並附上原文連結" --- # Vibe Coding 經驗分享 > **TL;DR** — 歡迎收聽 Mark 的 Tech Insights，我是璦廷。當寫程式從「幾週」縮短到「幾小時」，軟體開發的未來會變成什麼樣子？今天帶您探討 Vibe Coding 的實戰經驗。 過去我們設計介面讓人操作，現在則是設計工作流程，讓人工智慧幫忙完成任務。讓我們來看看團隊的成果：透過 Vibe Coding，我們快速打造了自然語言報表系統，業務開口問就能即時獲得圖表；另外還有合規廣告產生器與客製化專案管理工具，大幅降低了開發門檻。 這個重點值得注意：當模型人人都能用，企業真正的護城河其實是「專有數據與業務邏輯」。為了安全，團隊也嚴格守住「只讀取，不刪改」的黃金法則，確保核心資料不被破壞。 雖然人工智慧能帶來十倍的開發速度，卻也可能累積十倍的維護債，水面下的架構設計才是成敗關鍵。總結來說，速度不等於品質。當產出變得輕而易舉，我們更該思考：如何精準定義問題，才能真正發揮科技的價值？ ## 前言 開工後，我在公司做了一場關於 AI 開發經驗的內部分享。 老實說，這兩年軟體開發真的變超快。快到有時候不是在學新技術而已，是**整個思維都在變**。我自己也還在適應這波浪潮。 過年那段時間，看了一些資料，也觀察了一下現在產業往哪走，慢慢有一些感覺。這篇就是把當天分享的內容整理出來，包含團隊實際用 Vibe Coding 做出的專案，以及我對 AI 開發的一些反思。 ## 從開發軟體工具到開發 AI 工作流程 以前我們在做什麼？做表單、做按鈕、設計操作流程，讓「人」來用系統。 但未來可能不是這樣了。 ``` ┌──────────────────────────────┬──────────────────────────────┐ │ The Old Way │ The New Way │ │ (SaaS Application) │ (AI Agent Application) │ ├──────────────────────────────┼──────────────────────────────┤ │ │ │ │ 🖥️ 依靠訂閱時長收費 │ 🤖 依靠完成成果收費 │ │ │ │ │ 📋 逐步操作表單與按鈕 │ 🎯 描述目標與限制條件 │ │ │ │ │ 🔧 開發工具給使用者 (Tool) │ 📦 交付結果給使用者 │ │ │ (Result Deliverer) │ │ │ │ └──────────────────────────────┴──────────────────────────────┘ ``` > 💡 軟體的未來不再只是操作功能，而是將結果交付使用者。 現在用 AI 寫程式、做 Prototype 真的太容易了。很多以前要討論兩週、開三次會的東西，現在一個晚上就能生出來。所以未來軟體的價值，可能不再只是「做功能」，而是設計 Agent、設計 Workflow，讓 AI 幫你把事情做完。 ## 團隊的 Vibe Coding 實戰成果 這次分享中，我展示了團隊用 Vibe Coding 快速打造的幾個系統。每個都是短時間內從想法變成可用原型的真實案例。 > 👉 我們能將商業點子在「小時級」而非「週級」的時間內轉化為原型。 ![團隊創意的極速落地 — Vibe Coding 讓每個人都能成為產品設計師](https://blog.markkulab.net/content/markku/posts/ai-dev-experience-sharing/images/vibe-coding-projects-overview.png) ### 🤖 案例一：支援自然語言的 AI 報表系統 這是讓我最有感的一個 — **Ask, don't Query**。 以前要看報表，業務或 PM 得跟工程師說：「幫我查一下上個月的數據」，工程師再寫 SQL 去撈。現在呢？直接用自然語言問就好。 **思維轉換**：原本以為需要複雜的儀表板開發，結果發現直接串接大語言模型 API 就能做到。 ![AI 報表產生器 — 用自然語言詢問資料庫，即時產生統計圖表](https://blog.markkulab.net/content/markku/posts/ai-dev-experience-sharing/images/ai-bi-report.png) 這套系統做到了： - 🗣️ 直接用自然語言詢問資料庫，即時獲得統計圖表與分析 - 📊 自動將結果轉成表格、長條圖、折線圖、圓餅圖 - 💰 使用 Gemini 2.0 Flash，一個月的 AI 費用不到 50 元台幣 > 👉 打破舊思維，讓非技術人員（業務、PM）無須等待工程師。 ### 🎨 案例二：合規圖文廣告產生器 行銷團隊常常需要產生符合法規的廣告文案和圖片。以前要行銷自己寫、法務審核、來回修改，流程很長。 現在透過 AI，輸入產品名稱和描述，就能自動產生合規的圖文廣告： ![合規圖文廣告產生器 — 輸入產品資訊即可一鍵產生合規行銷素材](https://blog.markkulab.net/content/markku/posts/ai-dev-experience-sharing/images/compliance-ad-generator.png) - 支援多種內容類型（社群媒體貼文、廣告文案等） - 可選擇產業類別、語調風格、目標受眾 - **一鍵產生合規圖文**，大幅縮短行銷流程 ### 📋 案例三：基於 Azure DevOps 客製化專案管理軟體 我們利用 Azure DevOps API 搭配 Vibe Coding，快速打造了友善的專屬看板。 ![客製化 Ticket 管理看板 — 基於 Azure DevOps API 打造的友善介面](https://blog.markkulab.net/content/markku/posts/ai-dev-experience-sharing/images/custom-jira-board.png) 為什麼不直接用 Jira？因為： | 比較項目 | 直接用 Jira | 自己做看板 | |---------|-----------|----------| | 授權費用 | 💸 每人每月都要付 | ✅ 大幅節省 | | 介面體驗 | 功能多但複雜 | ✅ 依團隊需求優化 | | 客製化程度 | 有限 | ✅ 完全自由 | | 開發時間 | 不需開發 | ⚡ Vibe Coding 短時間完成 | ### 🎁 案例四：MGM 會員推廣系統 這套系統透過統一會員與 API 整合，實現高效的 MGM（Member Get Member）返利與結算。 **挑戰**：各平台會員資料獨立，整合困難。 **解法**：導入單一登入（SSO），整合社群帳號，各產品呼叫 MGM API 進行核心功能。 ![MGM 會員推廣系統架構 — 透過統一會員與 API 整合，實現高效的 MGM 返利與結算](https://blog.markkulab.net/content/markku/posts/ai-dev-experience-sharing/images/mgm-architecture.png) 後台管理面板也是透過 Vibe Coding 快速生成，邏輯清晰且易於維護： ![MGM 系統設定 — 管理佣金比例、回饋金、點數規則等系統參數](https://blog.markkulab.net/content/markku/posts/ai-dev-experience-sharing/images/mgm-settings.png) 功能包括： - 管理佣金發放比例 - 設定消費與註冊獎勵點數 - 點數效期限控管 同時也提供了完整的產品整合指南，讓其他產品能快速串接： ![MGM 產品整合指南 — API Key 認證、冪等設計、統一回應格式](https://blog.markkulab.net/content/markku/posts/ai-dev-experience-sharing/images/mgm-integration.png) ### 非技術人員也能開發後台 上面這幾個案例有個共同點 — **降低了開發門檻**。透過 Vibe Coding + AI 輔助，非技術人員也能參與後台的開發和調整，不再什麼都要等工程師。 ## 技術選型與框架 這些專案統一採用 **Next.js** 作為全端開發框架： ![技術選型 — Next.js + Node.js + Gemini Vertex + LangChain 技術棧](https://blog.markkulab.net/content/markku/posts/ai-dev-experience-sharing/images/tech-stack.png) | 層級 | 技術 | 說明 | |------|------|------| | 前端 | Next.js（React） | 輕量化，快速開發 UI | | 後端邏輯 | Node.js | 商業邏輯處理 | | AI 引擎 | LangChain | Agent + Tools + Memory | | 模型 | Gemini Vertex / Azure OpenAI | 可彈性切換不同模型 | ### Trade-off（權衡） - ✅ **優點**：輕量全端框架，可以加速開發 - ⚠️ **限制**：Next.js 的 Per Request 生命周期 - ❌ **不適合**：繁重的 WebSockets 或長時間運行的任務 - 💡 為加速開發，還買了付費 Theme 來用 ## 我們的技術護城河在哪裡？ 當 AI 讓開發變得更容易，大家都能快速做出產品時，真正的競爭優勢在哪？ ![技術護城河 — 我們不構建模型，我們使用雲端模型 + 獨特數據來建立進入障礙](https://blog.markkulab.net/content/markku/posts/ai-dev-experience-sharing/images/tech-moat.png) 我們不構建模型。我們使用雲端模型 + 我們獨特的數據來建立進入障礙： - 🏰 **頂層：專有數據與微調** — 我們的產業數據、合規知識庫、業務規則，這是別人複製不了的 - 🌥️ **中層：Cloud LLMs** — Gemini、Azure OpenAI 等雲端模型，大家都能用，但怎麼用是關鍵 - 🏗️ **底層：業務邏輯** — 多年累積的領域知識和系統整合經驗，深厚的業務理解才是根基 > 💡 AI 模型人人都能用，但**專有數據 + 業務邏輯**才是真正的護城河。 ## 安全規範：我們如何放心地用 AI？ AI 很聰明，但我們不能完全信任它。團隊定了一條**黃金法則（Golden Rule）**： > 🔒 無資料寫入權限，「只讀取，不刪改」 ![安全規範流程 — LangChain 預處理條件檢核，讀寫權限完全分離](https://blog.markkulab.net/content/markku/posts/ai-dev-experience-sharing/images/security-flow.png) 兩道防線： 1. **AI 操作請求檢核** — 在 AI 執行動作前，利用 LangChain 設定強制性的前置條件檢核 2. **讀寫權限分離** — 從系統架構層面完全分離權限，禁止刪庫跑路，確保核心資料安全 這個原則很重要 — 不管 AI 多聰明，都不應該讓它有能力破壞你的資料。 ## Vibe Coding 下的工程專業 講完了好處，接下來聊聊我比較擔心的部分。 > ⚠️ 一直以來軟體最大的成本，不在於開發，而是在維護成本。 AI 能快速產生 10 倍的程式碼，也可能帶來 10 倍的維護債。 ![Vibe Coding 冰山模型 — AI 生成代碼是海面上看得到的部分，架構、邏輯驗證、維護債務才是水面下的巨大隱憂](https://blog.markkulab.net/content/markku/posts/ai-dev-experience-sharing/images/vibe-coding-iceberg.png) 這就像一座冰山 — AI 生成的代碼是海面上看得到的部分，但水面下藏著**架構設計**、**邏輯驗證**和**維護債務**，這些才是真正決定專案成敗的關鍵。 > 👉 垃圾進，垃圾出（Garbage In, Garbage Out）— AI 不會質疑邏輯。 ### 速度快 ≠ 品質好 | 面向 | AI 帶來的好處 | 可能的隱憂 | |------|------------|---------| | 開發速度 | ⚡ 快 10 倍 | 技術債也可能多 10 倍 | | 程式碼量 | 快速產出大量程式碼 | 沒有測試覆蓋率 | | 入門門檻 | 非技術人員也能參與 | 架構設計缺乏全局思考 | | 原型驗證 | 一天就能完成 | 從原型到產品的路還很長 | | 團隊理解 | 減少重複工作 | AI 寫的程式碼，團隊不見得看得懂 | 這一波不是單純效率提升而已，而是考驗工程師怎麼控制品質、怎麼設計架構、怎麼不被速度反噬。 說白一點，未來比的可能不是「誰寫得快」，而是「**誰能駕馭 AI，而不是被 AI 駕馭**」。 ## 總結 幾個我覺得重要的 Takeaway： 1. **從開發工具到開發 AI 工作流程** — 軟體的未來不再只是操作功能，而是將結果交付使用者 2. **Vibe Coding 真的能用** — 團隊實際用它做出了 AI 報表、專案管理、MGM 系統，將商業點子在「小時級」轉化為原型 3. **技術護城河在數據和業務邏輯** — AI 模型人人都能用，專有數據才是真正的競爭優勢 4. **安全規範不能省** — 黃金法則：只讀取，不刪改。AI 再聰明也要有防線 5. **軟體最貴的是維護，不是開發** — AI 產出 10 倍程式碼，也可能帶來 10 倍技術債 這波 AI 浪潮不會停下來，每個人都能打造屬於自己的小工具。 Anything is possible. 🚴 ## 參考資料 - [用 AI Agent + LangChain 打造自然語言 BI 報表系統](https://blog.markkulab.net/bi-agent-langchain-natural-language-sql) — AI 報表系統的詳細技術分享 - [Anthropic - Building effective agents](https://www.anthropic.com/research/building-effective-agents) — Agent 設計的參考 - [The End of Programming as We Know It](https://www.oreilly.com/radar/the-end-of-programming-as-we-know-it/) — O'Reilly 對未來程式開發的觀點 --- ## 關於本文與作者 本文出自 [Mark Ku's Blog](https://blog.markkulab.net/post/ai-dev-experience-sharing) 授權條款： [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) — 轉載或引用請註明作者並附上原文連結 ### 關於作者 **[Mark Ku](https://blog.markkulab.net/author/mark-ku)** — Software Solution Provider - 10+ 年資深軟體工程師，現為 AI 應用 Builder - 專注大型平台架構設計，從北美電商到AI SaaS訂閱收費系統 - 結合 AI Agent 與自動化，打造高效可演進的產品技術基礎 ### 作者開發的免費工具 以下工具皆可免費使用： - [免費 PDF 簽名工具](https://blog.markkulab.net/tools/pdf-sign): 線上 PDF 簽名工具，瀏覽器內完成手繪、打字、上傳簽名，可拖曳放置、縮放、下載。所有處理都在你的裝置完成，檔案不會上傳。 - [VS Code Refactory](https://blog.markkulab.net/tools/refactory): Refactory 是一款 VS Code 重構擴充套件：34 個重構動作、37 條 code smell 檢查、Code Health 儀表板、18 種語言、534 支測試。懂你的專案慣例：介面放哪、DI 註冊寫在哪、'use client' 該不該加；還會用 git 修改頻率 × 複雜度排出「該先修哪個檔案」，並一鍵把壞味道交給你自己電腦上的 Claude Code 修。免費使用，原始碼不離開你的機器。 - [DB-Kit 資料庫管理工具](https://blog.markkulab.net/tools/db-kit): DB-Kit 是一個用 Tauri + Rust + React 打造的輕量跨平台資料庫管理工具，用單一一致的介面同時管理 MySQL、MariaDB、PostgreSQL、SQL Server、Oracle、SQLite、MongoDB、Redis、Kafka、Elasticsearch 與 RabbitMQ 十一種資料來源：連線密碼以 OS keychain 加密、SSH Tunnel、完整 CRUD、視覺化查詢建構器、多結果集同時顯示、跨連線資料傳輸與比對同步、Excel / CSV 匯入匯出、執行計畫視覺化、ER 圖、排程備份、SQL 壓力測試（p50～p99 延遲百分位）、15 條規則的 SQL 審查、Kafka 訊息瀏覽與監控告警；繁中 / 英文雙語介面，內建 AI 助手（自然語言生成 SQL、AI 審查與調校建議）與命令列工具 dbk。免費開源（MIT），提供 Windows / macOS / Linux 安裝檔。 - [VS Code Super Mermaid](https://blog.markkulab.net/tools/super-mermaid): Super Mermaid 是一款 VS Code 擴充套件：開箱即用的漂亮 Mermaid 圖表，自動上色、即時預覽、滑鼠平移縮放、PNG / SVG 高解析匯出，內建 21 種範本與多種主題。免費開源（MIT）。 - [React Super Mermaid](https://blog.markkulab.net/tools/react-super-mermaid): react-super-mermaid 是一個開源 React 元件庫：一行 即可渲染漂亮的 Mermaid 圖表，內建 colorful / sketch 主題、平移縮放、圖內搜尋、SVG / PNG 高解析匯出。輕量、SSR 安全、完整 TypeScript 型別。免費開源（MIT）。 - [Jira / Confluence Super Mermaid](https://blog.markkulab.net/tools/jira-super-mermaid): Atlassian Forge app：在 Jira issue 與 Confluence 內文直接寫 Mermaid 語法，畫流程圖、時序圖、狀態機與甘特圖。11 種圖表、SVG / PNG 匯出、明暗主題、完整中日韓文字支援。取得 Runs on Atlassian 資格：圖表存在你自己的站台，app 不呼叫任何第三方服務。免費，即將上架 Atlassian Marketplace。 - [Mermaid 線上預覽](https://blog.markkulab.net/tools/mermaid-preview): 在瀏覽器裡寫 Mermaid、即時看圖，整張圖表壓進網址就能分享。免註冊、不上傳伺服器，相容 mermaid.live 的分享連結。 - [React Intl Phone Number](https://blog.markkulab.net/tools/react-intl-phone-number): react-intl-phone-number 是一個開源 React 元件：framework-agnostic、不依賴 antd，提供 E.164 進出、可搜尋國旗 / 國碼下拉、可配置驗證等級（strict / mobile-strict / loose）、可主題化 CSS 與 i18n，電話邏輯由 google-libphonenumber 驅動。輕量、完整 TypeScript 型別。免費開源（MIT）。 - [Uptime Kuma Cluster](https://blog.markkulab.net/tools/uptime-kuma-cluster): 把單機版 Uptime Kuma 改造成高可用叢集：OpenResty + Lua 智慧負載平衡、MariaDB 共享狀態、健康檢查與自動 Failover，附叢集管理 REST API，一行 Docker Compose 啟動。免費開源（MIT）。 - [特教專案](https://blog.markkulab.net/education): 為特殊教育學生製作的學習教材 ### 每日 Podcast - [科技新鮮事](https://blog.markkulab.net/category/tech-news): 每日精選 AI 與科技趨勢，透過語音摘要快速掌握最新技術動態，涵蓋 AI 應用、軟體架構、DevOps 與工程實戰。 — RSS: https://blog.markkulab.net/feed.xml - [AI股市蝦聊](https://blog.markkulab.net/category/ai-stock-chat): 每個交易日用 AI 分析台股盤勢，以雙人對話聊當天的盤中觀察與隔日預測。 — RSS: https://blog.markkulab.net/ai-stock-chat/feed.xml ### 電子報 [訂閱電子報](https://blog.markkulab.net/subscribe) — 第一時間收到新文章通知，無垃圾信、隨時可取消訂閱。