這篇文章將為大家介紹 n8n 自動化工作流的作品集首發：n8n LINE 預約系統。 本系統的最大亮點在於完全不使用任何 AI 介入。雖然曾考慮過導入 AI，但考量到 Token 成本與系統單純性，最終選擇單純透過流程規劃來完成。這不僅大幅降低了運行成本，也讓預約流程更為明確可控。 系統架構簡介這套系統主要透過 n8n 接收 LINE 官方帳號的 Webhook，運用 PostgreSQL 記錄使用者的狀態（State Machine）和預約資料，並串接 Google Calendar（Google 日曆）來查詢空檔、建立預約、查詢預約、修改預約與取消預約。 核心流程拆解整個工作流的運作包含以下幾個核心步驟： Webhook 接收：接收 LINE 使用者傳送的訊息。 防重送與 Session 管理：確保 LINE 的重試事件不會重複處理，並於資料庫中查找使用者當前的對話狀態。 **意圖判斷 (Intent Resolver)**：透過簡單語法（如輸入「預約」、「查詢」或符合特定日期格式）引導進入不同的處理分支。 日曆操作：根據意圖分支，執行回覆詢問日期、查詢 Google Calendar 空檔、選擇時段，或是後續的修改與取消預約。 實際操作示範在 n8n 預約系統中，左側為使用者的 LINE 操作介面，右側則是即時同步的 Google 日曆。以下為實際操作的流程展示： 建立預約 在 LINE 官方帳號輸入預約指令後，系統會提示選擇預約的日期（例如：可直接選擇 3/12，或輸入特定格式 2026/03/10）。 系統會立刻比對 Google 日曆，列出當日可預約的時段（例如 09:00、11:00、14:00、16:00、19:00）。 若選擇的時段（如 19:00）剛好被他人預約走，系統會進行防呆檢查，並提示「該時段剛好被預約走了，請重新選擇」。 成功選定空檔後，依提示填寫姓名與電話，即可完成預約。同時，Google 日曆上也會即時新增該筆行程。 查詢與修改預約 查詢預約：點擊系統選單的「查詢預約」，系統會將你所有的預約紀錄以卡片輪播的方式列出，一目了然。 修改預約：針對單一卡片點擊「修改預約」，即可重新選擇新的日期與時段（例如從 3/10 改至 3/11 下午 4 點）。修改完成後，Google 日曆中的舊行程會自動更新為新時段。 取消預約若行程有變，只需在查詢預約的卡片中點選「取消預約」。系統會自動移除指定的預約紀錄，並同步釋放 Google 日曆上的該段時間。 實際體驗測試想要親自操作看看嗎？歡迎點擊下方連結，加入 LINE 官方帳號進行實際體驗： n8n 預約系統（測試中）：https://lin.ee/wIKrF0k 結語以上是這套初步且功能完整的 n8n LINE 預約系統展示。透過單純的邏輯判斷與資料庫串接，就能打造出高效且實用的自動化工作流。 如果你想了解更多關於 n8n 自動化工作流的實戰技巧與開發心得，歡迎持續關注，未來將會分享更多進階的自動化應用！

哈囉，大家好！我是享哥。今天又要來跟大家分享一個全新的 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 可以大幅加快開發，但不能省略驗證與安全檢查。

現在大家都在煩惱流量，過去的標準答案是做好 SEO。但傳統搜尋引擎的玩法正在改變，如今更關鍵的是如何被 AI 抓取。朋友分享了第一批被 Meta AI 讀取的商家實例，揭開了 AEO 的重要性。 ▋ 解析 AEO 與 AI 爬蟲邏輯 AEO 的核心，是把網站資訊轉換成 AI 容易消化的格式。實測發現，只要透過特定平台讓爬蟲掃描，就能自動產生專屬的 llms.txt 檔案。這不僅僅是資料上架，更是讓你的網站正式拿到 AI 時代的流量入場券。 ▋ 零門檻的網站體質檢測 第一步，直接把你的網址丟進Washinmura AEO 掃描工具 進行檢測。系統會幫你精準算出 AI 分數，並揪出所有的缺失項目。我一開始測出只有四十分，像是 AI 搜尋、商家辨識與社群分享等區塊全都掛零。 ▋ 一鍵複製專屬修復碼 面對慘烈的分數，看不懂底層邏輯也完全沒關係。系統會提供專屬的 AEO 商家專頁，只要填妥一句話介紹、地址與信箱。點擊「一鍵複製程式碼」，它就會自動產生所有你需要的同步設定。 ▋ 讓 AI 成為你的專屬工程師 拿到程式碼後，反直覺的是：你根本不需要親自動手改網站。打開 VS Code 搭配 Codex 等編輯工具，把原始網站內容與修復碼通通丟給 AI。直接請它為你量身打造一份 AEO 強化計畫： 12請加強我網站的 AEO 內容，參考我提供的修復碼。先給我一份強化計畫，確認後再幫我實作 JSON-LD 等需要的資料。 ▋ 掌握微調的主動權 實作過程中，你才是掌控全域的主管。像是我不想在網站上公開電話號碼，就直接請 AI 拿掉並重新調整。不要害怕來回溝通，透過幾次反覆掃描與修正，分數自然會大幅攀升。 ▋ 搶佔未來的流量入口 經過這套「掃描、產碼、AI 實作」的流程，我的網站最終拿到了八十四分。雖然離一百分還有一小段距離，但系統顯示這已經贏過 96% 的網站。不用高深的技術，就能輕鬆省下大量的摸索成本。 ▋ 馬上開始你的 AEO 升級 這套AEO 掃描工具 目前完全免費。網站裡還有和心村等相關資訊與應用案例，非常推薦親自去試試看。想了解更多 AI 應用與自動化工具，歡迎訂閱並持續關注享哥。

还在一帧一帧手剪视频？把 Google Gemini 当剪辑助手，一天直接出 4 条成片。下面这 6 个提示词，把剪辑从“苦力活”，变成“策略活”👇— 摆烂程序媛 (@wanerfu) March 1, 2026 靈感整理自 X 貼文：https://x.com/i/status/2027958008026972389 剪片最耗的不是「會不會剪」，而是：找重點、想節奏、對齊風格、反覆調整。把這些「腦力活」交給 Google Gemini，你就能把時間留給真正值錢的部分：審美、決策、把關。 這篇整理 6 個提示詞（Prompt），你可以照順序走一輪，把剪輯從苦力活升級成策略活，產出速度會明顯拉起來。 核心觀念：AI 做策略大腦，人做美感總監 AI 擅長：拆結構、拆敘事、列節奏、找切點、補 B-roll、建議參數 人擅長：選鏡頭、品味判斷、節奏微調、情緒拿捏、最後一哩路的「好看」 你會更像導演/製片，而不是時間軸工人。 使用方式：一支片的 6 步工作流 先用「剪輯計畫」把整支片的節奏藍圖定好 用「風格匹配」把爆款節奏模型對齊 用「敘事提升」把腳本剪得更順更有衝擊 用「技術調整」定輸出參數避免畫質翻車 用「素材審查」從原始素材抓亮點與弱點 用「剪輯回饋」當第二雙眼睛做 QA 1）剪輯計畫：先做藍圖，不要邊剪邊想用途：像專業剪輯師先做「剪輯大綱」，包含節奏、切割點、B 素材、轉場設計，目標是維持注意力。 提示詞： 12345678910你是專業影片剪輯師。請審查以下素材描述，制定「精準剪輯計畫」，包含：1) 整體節奏（快/慢、段落長度、注意力鉤子）2) 關鍵切割點（哪些句子/畫面要切、為什麼）3) B-roll 規劃（需要哪些補畫面、放在哪裡）4) 轉場與視覺節奏（硬切/轉場/推拉/節奏點）5) 字幕與重點文字（哪些字要放大、哪些要上屏）目標：保持觀眾注意力，避免分心與拖沓。素材描述：[貼上素材描述/時間軸摘要/重點段落] 2）風格匹配：拆解參考影片，複製「節奏模型」 用途：你不是在抄內容，而是在複製「剪輯語法」：切割密度、節奏、字幕、音效、色調。 提示詞： 1234567891011121314151617你是專業影片剪輯師。請分析以下參考影片的剪輯風格，並拆解成可複製的規則：- 切割密度：平均幾秒一切？什麼時候加速？- 時序：先結論後鋪陳？還是故事推進？- 調色：整體偏暖/偏冷？對比與飽和大概落點？- 音效：哪些地方加強節奏？轉場音效用法？- 文字：字幕樣式、關鍵字上屏策略、資訊密度最後，請把這套規則「套用到」我的主題，給我具體剪輯建議與段落安排。我的主題：[主題一句話 / 影片目的]參考影片連結（或描述）：[貼上連結/貼上描述]我的素材概況：[拍攝場景、人物、鏡頭類型、長度、重點] 3）敘事提升：讓資訊更清楚、情緒更有力 用途：把「講得完」變「想看完」。AI 很會抓：冗詞、順序、重點句、情緒落點。 提示詞： 123456789101112你是內容導演 + 剪輯總監。請審查以下腳本，提出「剪輯層面」的敘事優化建議：- 哪些段落應刪除（理由：重複/無推進/無價值）- 哪些段落應重排（理由：理解成本/張力/節奏）- 哪些句子要強調（可做：放大字、停頓、B-roll、音效）- 開頭 3 秒鉤子怎麼做更強- 結尾怎麼收才會讓人想收藏/留言/轉發目標觀眾：[觀眾輪廓/痛點/想解決的事]腳本：[貼上腳本全文] 4）技術調整：輸出設定不要再靠猜 用途：不同平台、不同風格，輸出參數差很多。先定好，避免畫面糊、聲音炸、被平台壓縮。 提示詞： 12345678910111213141516請根據以下「平台」與「風格」，建議最佳輸出設定，並給出你推薦的原因：- 解析度與比例（例如 9:16 / 16:9）- 幀率（FPS）- 位元率（Bitrate）- 編碼（H.264/H.265 等）- 音訊（取樣率、位元率、響度建議）- 字幕安全區與清晰度注意事項平台：[YouTube / IG Reels / TikTok / B 站 / 小紅書...]影片風格：[教學 / Vlog / 訪談 / 口播 / 產品展示...]素材規格（若知道）：[原始解析度/幀率/相機或手機型號] 5）素材審查：先找亮點與弱點，再開始剪 用途：把「挑鏡頭、找精華」交給 AI，特別適合一堆長素材、訪談、口播、活動紀錄。 提示詞： 1234567891011請以「剪輯師審素材」的角度，根據以下素材描述/時間碼筆記，給我：1) 精彩片段候選（為什麼精彩、適合放哪）2) 弱點與需要避開的段落（拖、贅、雜音、重複）3) 建議切割點與節奏（哪裡該快剪、哪裡該停）4) 建議補的 B-roll 清單（具體到畫面類型）5) 建議的成片結構（段落順序）目標：乾淨、專業、有節奏、有重點。素材描述/時間碼筆記：[貼上你的紀錄，例如 00:00-01:20 介紹、01:20-02:10 亮點...] 6）剪輯回饋：把 Gemini 當第二雙眼睛做 QA 用途：你剪完常會「看久了看不出問題」。讓 AI 針對節奏、音訊、調色、清晰度給修改清單。 提示詞： 12345678910111213請以「成片檢查」角度，評估我這支已剪影片，並提出可執行的修改建議：- 節奏：哪裡太慢/太快、什麼點應更早切- 流暢：段落銜接是否順、是否缺關鍵資訊- 音訊：人聲是否清楚、背景音是否干擾、音量是否一致- 調色：是否一致、是否過暗/過飽和- 清晰：字幕是否易讀、資訊密度是否過高最後給我「優先順序」：哪些改動最划算、效果最大。影片目標與平台：[平台/目標，例如提高完播或導流]影片時間軸摘要（或你自寫的版本紀錄）：[例如：00:00 鉤子、00:03 結論、00:10 解法...] 加速小技巧：讓 AI 回答更準的 3 個輸入你提供的「素材描述」越具體，回覆越像你的專屬剪輯師： 1. 一句話目標：這支片要讓觀眾看完做什麼？（收藏/留言/點連結/買單） 2. 受眾輪廓：新手/進階/專業？痛點是什麼？ 3. 時間碼筆記：不需要逐字稿，有「段落 + 時間」就很夠用 結語：你把時間花在哪裡，就會變成什麼樣的剪輯師 當 AI 幫你把策略、結構、節奏先打底，你就能把力氣用在「更像作品」的地方：更準的鏡頭、更漂亮的節奏、更好的品味、更一致的整體感。

大家好，我是享哥。現在用 AI 已經可以快速生成令人驚豔的短影片！今天這篇教學，我將詳細分享如何透過「九宮格圖片生成法」，一次產出連貫且人物一致的分鏡，並結合 Grok 等 AI 工具，快速製作出高畫質的短影音。 核心概念：為什麼要用「九宮格」生成分鏡？製作 AI 短影片要流暢，最怕遇到人物特徵或風格中途跑掉。我們核心的做法是一次生成一個九宮格的完整圖片。 給 AI 一個完整故事後，透過分鏡圖片一次生成九張，不僅能確保內容結構的完整性，人物也比較不會發生改變。這個技巧能幫我們省去大量反覆微調人物一致性的時間。 AI 影片生成 4 步實戰工作流第一步：請 AI 構思短影音與分鏡腳本萬事起頭難，首先我們要給 AI 一個方向。你可以請 AI（例如 Gemini）幫忙想一個一分鐘的短影音故事腳本。 以「金融槓桿小惡魔講解川普關稅政策」為例，先讓 AI 生成基礎故事，你可以與它反覆討論、修改並調整出想要的內容。確認內容後，再根據腳本，請 AI 規劃九張分鏡圖片的腳本，必須明確指出每個畫面的： 畫面內容 鏡頭語言與視覺效果 腳本關鍵對白 第二步：生成 3x3 九宮格圖片與 Grok 提示詞有了分鏡腳本，接下來就需要將文字具象化為畫面。請根據腳本內容，讓 AI 生成一張完整的九宮格圖片。建議的設定參數如下： 1234- 圖片佈局：九宮格 3x3 格式- 圖片比例：16:9 (若要做直式短影音可改為 9:16)- 圖片限制：畫面中絕對不要包含任何文字- 畫面解析度：4K (為了盡量提升生成圖片的細節) 目前這類生成的完整圖片尺寸大約是 2752 x 1536，做為後續短影片分割的素材已經相當夠用。同時，記得請 AI 將剛才的分鏡腳本，轉換為 Grok 格式的影片生成提示詞（包含中英文提示詞、運鏡動作與對白），為下一步做準備。 第三步：利用工具進行圖片分割拿到九宮格圖片後，我們需要將其裁切成九張獨立的圖。 在開始做第一張影片之前，你可以直接使用我製作的小工具——九宮格圖片分割工具。只要將生成的九宮格圖片丟進工具中，它就能幫你快速分割，讓你一鍵將九張獨立的分鏡圖全部下載下來。 九宮格圖片分割工具 第四步：使用 Grok 進行動態影片生成因為我們是採取「單張圖片轉影片」的模式，不一定要使用即夢或是可靈等具備高階首尾幀技術的影片生成工具，Grok 就是一個非常合適且強大的選擇。 進入 Grok 後，依照順序將分割好的單張圖片上傳，並把第二步準備好的「中文提示詞與對白」丟上去，Grok 就可以直接開始生成影片。 畫質提升關鍵：Grok 影片升級與下載技巧影片生成後，旁邊會有一個下載按鈕，但下載前請特別注意這個細節！ 在還沒有點擊任何設定前，直接下載的影片大概都只有 480p 的一般畫質。請務必點擊畫面上的「升級影片」選項，將影片升級為 HD 畫質。 12- 一般畫質：480p- HD 畫質：解析度將提升至 1504 x 832 升級為 HD 後再下載，能夠大幅彌補原本單張圖片裁切後解析度的不足，讓最終成品的視覺體驗更好。 後期剪輯與應用場景將九段高畫質 (HD) 的影片片段都下載下來後，就可以丟入剪輯軟體中進行最後處理。你可以篩選最好的片段、加上字幕、添加音效特效，或是利用變速的方式去做節奏管理。剪輯完成後，就會是一支極具質感的 AI 短影片。 AI 影片的時代已經來臨！我們如何透過這些 AI 應用工具，以前所未有的速度完成從「文字變圖片、圖片變影片」的工作流，並將內容成功渲染出去，不管是對自媒體經營還是電商行銷，都是一個非常強大的槓桿。 常見問答 (FAQ)Q1：為什麼做 AI 短影音時，要先生成九宮格分鏡圖，而不是一張一張單獨生成？因為一次生成同一組九個畫面，角色外型、服裝、風格與場景調性通常會更一致。若分開逐張生成，很容易出現人物臉型改變、色調跑掉或鏡頭風格不連續的問題，後面剪輯時會更難處理。 Q2：九宮格圖片一定要做成 16:9 嗎？直式短影音怎麼辦？不一定。如果你的內容主要發布在 YouTube Shorts、Instagram Reels 或 TikTok，建議一開始就改成 9:16 構圖；如果想同時兼顧橫式與直式版本，可以先明確告訴 AI 你的輸出平台，再決定九宮格整體比例，避免後續裁切時把主體切掉。 Q3：用 Grok 做圖片轉影片時，提示詞要寫得多細？越具體越好。至少要包含畫面主體、人物動作、鏡頭運動、情緒氛圍與台詞內容。若只給一句很簡短的描述，生成結果通常會偏隨機；把每格分鏡的鏡頭語言與對白先寫清楚，影片的可控性會高很多。 Q4：九宮格分割後的單張圖片解析度會不會不夠？有可能，所以文章裡才會特別建議先用 4K 九宮格圖片，並在 Grok 生成完成後記得升級成 HD 再下載。這兩個步驟能有效減少分割後單張圖片細節不足的問題，讓最後串接起來的影片看起來更穩定。 Q5：這套工作流適合哪些人使用？很適合自媒體創作者、短影音操盤手、課程講師、品牌行銷人員與電商團隊。只要你常常需要把一個觀點快速變成有角色、有節奏的短影片，這種「先分鏡、再分割、再逐格生影片」的方法，會比從零硬做整支影片更省時間。 希望以上的實戰分享對大家有幫助，想了解更多 AI 應用，歡迎關注我、訂閱我，謝謝大家！

Hello 我是享哥。今天要跟大家分享一套強大的自動化影音工具——Remotion。 如果你還不會安裝 Remotion，非常推薦直接將它的官方網站網址丟給 AI 助手，請 AI 提供安裝指令，就能輕鬆完成基礎環境的建置。 什麼是喵喵經濟學人？解析自動化短影音工作流在環境安裝完畢後，今天要為大家測試網路上討論度極高的專案：「喵喵經濟學人」。 這是一個專門用於自動化製作 9:16 火柴人風格短影片的工具，特別適合用來做心理學與經濟學的科普。它提供了一套非常完整的標準化工作流，涵蓋了以下核心環節： 腳本撰寫 配音生成 畫面繪製 Remotion 影片最終合成 也就是說，只要餵給它故事腳本，系統就能自動生成對應的圖片、文字內容與配音，並一鍵合成完整的短影音。你還能在核心參數中，彈性設定喜歡的音色與圖片風格。 實戰教學：如何用 AI 生成一分鐘經濟學短片？接下來，我將實際演示如何請 AI 產出一支一分鐘的短影音。這支影片的內容，是透過「喵喵經濟學人」來解析美國與以色列對抗伊朗的事件，會如何影響世界經濟。 步驟一：設定故事核心與隱喻腳本首先，我們來到 Antigravity 介面，輸入指令：「Create video 一分鐘短影片，內容是喵喵經濟學人講解美國和以色列攻打伊朗，對於世界經濟的影響」。 系統會開始引用對應的 Skill（記得事前需要先建立好一個 Skill 來引用）。接著，它會根據設定好的核心主題進行創作。為了讓科普內容更生動，系統大量使用了隱喻的方式來呈現國際衝突： 沙漠悍貓國：代表以色列 波斯貓國：代表伊朗 黑色的魚油：代表石油 罐罐通膨與貓薄荷：代表經濟與物價影響 步驟二：API 替代方案與自動生成在語音生成的部分，系統預設使用的是 Minimax 的 API。但因為我目前沒有提供該 API，所以我改用 Edge TTS 來作為語音替代方案，並完成相關的基礎設定。 當 Plan 與 Task 都設定完畢後，系統就會進入生成與處理階段。處理完成後，程式會在 Out 資料夾中將圖片與影片進行完整合成，最終輸出一支完整的短片。 常見問題與解決方案：遇到「全紫畫面」怎麼辦？在自動化生成的過程中，難免會遇到一些突發狀況。 舉例來說，我第一次生成時，合成出的影片竟然是「全紫色」且完全沒有圖片。遇到這種情況我們應該怎麼辦呢？ 因為我是使用 Gemini 模型，我的解法是請模型利用 nano banana 去生成影片所需的相關圖片。雖然這個方法沒有辦法一次並行生成所有圖片，系統必須一張一張慢慢排程製作，過程中偶爾也會遇到失敗的情況；但只要耐心等待，它最終會慢慢把腳本裡所有的圖片素材逐一產出。將素材補齊後，就可以順利合併成最終的影片了。 結語以上就是透過 Remotion 程式，串接 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 自動化以及相關的開發應用，歡迎持續關注並訂閱享哥，我們下次見！

做影片很累，傳統剪輯軟體又貴又花時間。你可能以為想做出好影片，非得精通 Premiere 或 Final Cut 不可。其實不用，現在的趨勢是「用程式碼做影片」。 Remotion 這個工具，讓你可以用寫 React 的方式「編譯」出 MP4。加上最新的 AI Agent 技術，甚至連程式碼都不用自己寫。只要一句話，系統自動幫你把影片「算」出來。 用程式寫影片的底層邏輯Remotion 的核心理念叫做「Make videos programmatically」。這聽起來很硬核，但邏輯其實很性感。它把影片的每一幀，都變成了可控的程式碼參數。 以前你需要用滑鼠在時間軸上拉來拉去，還要對齊到崩潰。現在透過 API，你可以精準控制像素的運動。這不僅是工具的轉換，更是生產力的槓桿。 關鍵在於它最近推出的 Agent Skills 功能。這讓 Claude 或 GPT-4 這樣的 AI 模型，能夠讀懂 Remotion 的操作手冊。AI 不再只是瞎猜，而是拿著說明書在幫你蓋房子。 環境建置的關鍵細節開始之前，先在桌面建個資料夾，打開終端機。輸入以下指令初始化專案： 12npx create-video@latest 這一步很簡單，但接下來的選項決定成敗。系統會問你一連串設定： Template: 選 Blank TailwindCSS: 建議選 Yes Add Agent Skills: **請務必、絕對要選 Yes** 這不是選配，這是讓 AI 能夠自動寫作的靈魂。選了它，專案裡才會下載給 AI 看的文檔與技能樹。沒選這個，AI 寫出來的程式碼大概率跑不動。 讓 AI 接手繁瑣工作安裝完依賴套件並啟動開發伺服器後，你會看到瀏覽器跳出預覽畫面。這時，請打開支援 AI 的編輯器（如 Antigravity 或 Cursor）。我們準備開始下指令。 直接在對話框輸入你的需求，模型建議選擇邏輯較強的 Claude 4.5 Sonnet： 「幫我做一支 10 秒介紹 n8n 的短影片，內容要酷炫。」 AI 會先讀取專案裡的 SKILL.md，理解它能做什麼。接著它會規劃場景、設計動畫，然後直接修改 Root.tsx。它會自己寫 Component，自己加 Fade in/out 效果，甚至自己除錯。 反直覺的效率優勢你可能覺得寫程式做影片很反直覺。但當你想要微調字體大小，或是想統一所有轉場的速度時，改一行程式碼，比在傳統軟體軌道上一個個點開調整快太多了。 這就是「可程式化」的降維打擊。範例中，AI 自動生成了包含 Logo 動畫與卡片介紹的 9 秒影片。如果不滿意，只要動動嘴（Prompt）或動動手指（Code）微調即可。 確認無誤後，輸入渲染指令： 12npx remotion render AI 通常連這行指令都會幫你準備好。按下 Enter，一個真實的 MP4 檔案就會出現在輸出資料夾。 60/40 的人機協作法則別指望 AI 一次給你 100% 的完美成品，那是不切實際的幻想。聰明的做法是讓 AI 搞定 60% 的苦工。讓它完成架構搭建、基礎動畫邏輯與素材佔位。 剩下的 **40%**，靠你的人類美感去微調程式碼。這種工作流比從零開始剪輯快，又比全靠 AI 抽卡精準。這才是 Remotion 結合 Agent 的真正威力。