很多人想到動畫就會想到 After Effects，但如果你要做的是可重複產生的文字動畫、教學片段或社群影片模板，Remotion 這種用程式產生影片的方式會很適合。搭配 Antigravity，就可以用 AI 協助建立動畫元件。 影片連結：https://www.youtube.com/watch?v=8xQ3C0ZGskE 這種做法的優點 動畫可以變成程式碼，方便重複修改。 文字、顏色、時間軸可以參數化。 適合做系列影片的固定模板。 影片中提到的工具 Remotion：https://www.remotion.dev Antigravity：https://antigravity.google 適合用在哪裡 YouTube 開場動畫。 教學影片重點提示。 短影音字幕與打字效果。 產品功能展示。 小結 這篇先把影片內容整理成可搜尋、可回來查的文字筆記。後續如果我有補充更多實測資料、指令或範例，也會再把文章更新得更完整。
各位觀眾朋友大家好，這裡是程式猿 AFA。 這篇文章整理我在影片裡的完整流程：用 Vibe Coding（氛圍編碼） 生成一個 Hugo 靜態個人網站，部署到 GitHub Pages，並且在你已經購買網域的前提下，把 Cloudflare 網域 掛到 GitHub Pages，讓網站可以用「自己的網域」直接開啟。之後我也會把影片裡可能遺漏、或需要補強的部分，持續整理放在網站上。 你會用到什麼 Google Antigravity AI 編輯器（目前以 macOS 為主） Hugo（本機端預覽用） GitHub Repo（用來放網站原始碼與 GitHub Pages） Cloudflare（你若要使用自訂網域） 1) Antigravity 先設定成繁體中文（介面 + 生成內容） 為了讓操作與產出更順手，我會先做兩個設定： A. 介面繁體中文 到 Extensions（延伸模組） 搜尋並安裝 Chinese Language（或相近名稱的中文語言套件） 安裝後介面會切成繁體中文/中文介面（依套件而定） B. Agent 回答與檔案內容使用繁體中文 在 Agent 右側「三個點」 點 客製化（Customize） 新增一個條件（例如：「請一律用繁體中文回覆並生成檔案」） 之後它的回答、以及生成的檔案內容就會以繁體中文為主 2) 用 Vibe Coding 生成 Hugo 網站專案 在下載位置建立一個資料夾（例如：Blog） 在 Antigravity 裡 Open Folder 打開 Blog 模型你可以選： Gemini 最新模型 Claude 最新模型 提示詞重點包含： 部落格名稱（例如：appfromape's blog） 使用 Hugo 靜態網站 目標部署到 GitHub Pages 風格要接近 Apple 備忘錄（簡潔、留白、閱讀感） 需要 .gitignore（避免把不該上傳的檔案推到 GitHub） 3) 本機端預覽網站（macOS / Windows） 生成完成後，我會先在本機看一下網站目前長相是否滿意。 ...