本文由來
這篇是我整理自己在 Facebook 社團「Generative AI 技術交流中心」於 2026/04/16 的一則發文，由 Claude 協助結構化成文章後審稿發布。
文章開頭的概念圖是用 Codex CLI 內建的 image_gen 工具生成。
偶爾會看到有些人想入門「Vibe Coding」，但不知道從何下手。想說來分享一下我自己這兩三年的經驗。
我比較無聊，所以 Vibe Coding 的東西幾乎都是工作上的小工具，用來當作工作節點間的黏合劑、或是轉化甚至是強化我既有工作流。
我的工作是「行銷」相關，要寫文章、編寫影片腳本、經營 YouTube 頻道、分析數據等。所以我 Vibe Coding 的小工具也是偏向此類應用。
下面挑五個比較有代表性的工具來說。
1. UTM 網址與短網址產生器
這個是 2024 年末在 Windsurf 還是 Cursor 的幫助下做出來的網頁工具。
解決的問題，團隊中有些人會忘記 UTM 參數格式而亂下，導致追蹤資料品質參差不齊。做一個工具把格式規範化、流程化，大家照著填就不會出錯。
部署，架設在 Vercel 上，所以到哪都可以用，不挑環境。
2. YouTube 內容助理
接了 YouTube API 與 Gemini API，主要是為了使用 Gemini 的「Pass YouTube URLs」功能。
影片中繼資料生成
運用 Gemini 的多模態能力，直接觀看公開影片來生成影片章節、建議標籤、標題、影片描述等中繼資料。不需要先把字幕或腳本丟過去，Gemini 自己會看。
從 URL 生成文章草稿
是 Gemini API 「Pass YouTube URLs」、「URL context」的延伸應用。
使用者提供 YouTube 影片或其他網址、檔案，連同選擇的文章模板，一起提供給 Gemini 來生成文章草稿。
數據儀表板，AI 分析能力
既然有接 YouTube API，當然有提供數據儀表板功能，並具備 AI 分析能力。
這個功能用了 LLM 的 Function Calling（tool calling） 能力。使用者只要以自然語言與 AI 對話，AI 就能直接使用設計好的 tool 來跟 YouTube API 取得資料並輸出分析內容，然後程式會在輸出時處理圖表與排版。
註，原先的 AI 分析功能是把數字都先抓出來以後再丟給 LLM。今天改版成類似 MCP 一樣，讓 LLM 透過使用者需求決定要用哪些 tool，目前還在調整中。
用 GitHub Actions + Gist 解 API 額度問題
YouTube API 有額度限制。我用 GitHub Actions 每日定期擷取「影片標題」、「Video ID」等資料存到 Gist 當快取。
需要查詢影片數據時，先根據「關鍵字」去快取找到對應的「Video ID」，再去取得數據即可，可以省下不少額度。
相關文章
這個工具後來整合進「AI Video Writer」一站式工具。完整故事可以看 用 Vibe Coding 打造 AI Video Writer。
3. 文章生成器
相關文章
完整開發故事可以看 把文章生產線塞進一個工作台，article-suite 開發記。
這個工具是從前述「YouTube 內容助理」的「文章生成」功能派生而來，獨立成可以單跑的版本。
多來源輸入
使用者提供「YouTube 影片網址」、「網站網址」等資料，就能提供給 Gemini 來編寫文章。
為了應對「URL context」有時候不穩定的問題，也加了「HTTP fetch」、「截圖」功能，把網頁資料直接以 HTML 或圖片形式丟給 Gemini 參考。
文章模板 + 自動排版
同樣能使用「文章模板」功能，將資料連同模板一起提供給 Gemini 生成文章。生成後，程式會再進行排版處理與連結檢查。
縮圖生成
文章生成後，可以透過 fal 配合 Nano Banana Pro 來生成縮圖。
公司後台 API 整合
文章寫完後還要去公司後台上傳很麻煩。所以我透過 Claude Code / Codex 爬出了公司後台的 API，直接在這個工具中上傳文章、圖片。
「閱讀更多」、「商品專區」卡片
文章上傳後，可以提供「文章網址」、「商品網址」產生帶有追蹤參數的「閱讀更多」、「商品專區」卡片。
卡片上的文字描述則是把網頁抓下來，連同使用者選擇的插入段落文章，提供給 Gemini 來提供建議，並透過程式提供 HTML 插入到指定段落。
連結監控腳本
文章中會置入商品連結，但由於公司的電商系統與文章系統是脫鉤的，商品下架後不會有通知。
所以我還在 Claude Code / Codex CLI 的幫助下編寫腳本，透過 GitHub Actions 定期掃描高流量（以 GA4 工作階段為判斷依據）文章與最新文章中的連結。如果掃描到下架（例如 HTTP 404 或網頁只有「系統維護中」等文字）的連結，則寄信通知更換。文章中沒有連結也會在信件內通知。
另外還有每日透過 GitHub Actions 執行腳本掃描公司電商網站的看板，如果我們單位的版位有什麼狀況，也能在信件中直接看到。
4. Remote MCP Server，兩個
為了應對有時候在通勤路上有了什麼新想法，我藉由 Claude Code 跟 Codex CLI 的幫助 vibe coding 出了 2 個 Remote MCP Server，並部署在 Render 上。
讓我可以直接透過 Claude 或 ChatGPT app 來使用。得益於 Claude 最近的視覺化能力，十分方便。
第一個，YouTube API MCP
可以說是前面「YouTube 內容助理」數據分析部分的 MCP Server 版。同樣也有使用 Gist 中的快取資料來節省查詢額度。
相關文章
第二個，分析與策展 MCP
接了 GA API、GSC API、Google Autocomplete、公司網站的 Front API 來查找商品與文章等工具。
可以讓我詢問 Claude 或 ChatGPT 根據這些資料來提供 SEO 文章的策展建議、可置入的商品等等。
等官方 Google Trends API 開放使用後，我也打算接上去。
相關文章
完整開發故事可以看 從 GA4 橋接器到多來源分析 MCP，ga4-remote-mcp 的演進。
5. 分鏡圖系統
相關文章
完整開發故事可以看 用 AI 做分鏡，從腳本到剪輯全自動，storyboard-system 開發紀錄。
這個工具讓使用者輸入「需求」就能生成「分鏡腳本」，接著生成每個場景的「分鏡圖（靜態畫面）」與「影片片段」，最終在嵌入的 OpenReel 編輯器進行剪輯並匯出成片。
註，目前比較少在用這個工具，直接在 fal 上試驗影片生成模型比較多。
腳本生成
- 支援多種製作模板，並可套用預設風格
- AI 會為每個場景規劃鏡頭意圖、敘事目標、構圖、鏡頭運動、轉場策略
- 支援「創意評估」，對每個場景進行 Hook 強度評分（1–5）、觀眾流失風險分析，並提供 Hook 變體供替換
圖片與影片生成
- 依分鏡逐場生成靜態畫面
- 對需要動態 Start Frame 與 End Frame 的場景，自動生成「End Frame」以確保鏡頭間的視覺延續
- 影片支援 Kling、Seedance 兩種模型，輸出比例可選 16:9、9:16、1:1
配樂與旁白
- 可生成整部影片的配樂（ElevenLabs）
- 逐場景旁白（IndexTTS2）
- 旁白腳本自動轉為字幕疊加於時間軸
角色庫（素材管理）
- 內建角色庫，可儲存角色、商品、環境、風格等可重複使用的素材
- 每個素材支援多視角圖片（正面、側面、四分之三、背面、俯視）
- 素材匯入專案時自動套用素材的描述文字，盡量防止 AI 在生成過程中偏移外觀
剪輯輸出
- AI（Gemini）自動分析生成的影片，給出每個鏡頭的進出點、轉場效果、速度建議
- 所有素材自動組裝為完整時間軸，並匯入嵌入的 OpenReel 編輯器進行最終剪輯輸出
結語
回頭看，這五個工具的共同點是，都在解決我自己工作流上的痛點。沒有從「我想學寫程式」出發，每一個都是從「這件事我做煩了，能不能讓 AI 幫忙」開始。
Vibe Coding 對行銷人來說很有價值，因為我們的工作有大量重複性、流程化、跨系統黏接的部分。這些不是設計師、不是工程師會主動幫你做的事，但又確實能省下大量時間。
所以給想入門的人的建議是，先想自己的痛點，再去想要做什麼工具，比起跟著教學從零開始學一個技術更有動力，做出來的東西也更有用。