Vibe-Coding

前幾天我有分享過 Apple Intelligence 最新的「相片物件移除」功能，效果真的非常驚人。但是！要用這個功能門檻可不低，首先你的設備要支援 Apple Intelligence（通常要最新的 iPhone 15 Pro 或 M 系列電腦），而且必須在蘋果的相簿生態系裡操作。 這時候我就在想，難道沒有免費、跨平台，而且舊電腦也能用的替代方案嗎？🤔 當然有！今天這篇文章要帶大家重溫一個強大的開源專案 IOPaint（前身是 Lama Cleaner），更酷的是，我還挑戰了最近很紅的 Vibe Coding，直接叫 AI 幫我寫出一個精簡版的修圖工具 MagicErase。不管你是想用現成工具，還是想體驗 AI 寫程式的威力，這篇教學都不能錯過！ 方案一：功能強大的老牌王者 IOPaint 其實早在三年前，我就介紹過一個叫 Lama Cleaner 的專案，現在它改名叫 IOPaint。雖然作者在今年 8 月停止更新了，但這整個專案非常完整，功能包含移除物件、替換背景等等，效果完全不輸付費軟體。 安裝步驟 (MacOS/Windows 通用) IOPaint 是一個 Python 專案，我們可以透過終端機來安裝。 準備環境：確認你的電腦已安裝 Python（建議使用 Conda 建立虛擬環境）。 下載專案： 前往 GitHub 複製 IOPaint 的網址，在終端機輸入： git clone [IOPaint的GitHub網址] 進入資料夾並安裝依賴： cd IOPaint pip install -r requirements.txt 啟動程式： 輸入啟動指令（這會自動下載需要的 AI 模型）： iopaint start --model=lama --device=cpu --port=8080 開始修圖： 開啟瀏覽器，進入顯示的 Localhost 網址，你就會看到操作介面啦！ 只要把照片丟進去，用筆刷塗抹你想消除的路人或雜物，AI 就會自動幫你補好背景，超級神奇！✨ ...

各位觀眾朋友大家好，這裡是程式猿 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） 生成完成後，我會先在本機看一下網站目前長相是否滿意。 ...

今天這篇文章非常興奮，因為我們要來玩現在最流行的 「Vibe Coding」（氛圍編碼）！簡單來說，就是即便你不懂艱澀的程式碼，只要透過 AI 工具，用自然語言告訴它「你想要的感覺」，就能把網站做出來。 我們要使用的工具是 Google 推出的 AI 程式碼編輯器 —— Google Antigravity。我會教大家如何用它生成一個高質感的個人部落格，並且利用 GitHub Pages 免費架站，最後甚至掛上自己的專屬網域！ 為什麼選擇 Google Antigravity？ Google Antigravity 是一款強大的 AI 編輯器（介面與 VS Code 相似），它最厲害的地方在於可以直接理解我們的自然語言指令，幫我們寫 Code、生成檔案。 對於想要嘗試 Vibe Coding 的新手來說，你不需要從頭學 HTML 或 CSS，只需要負責「下指令」，剩下的交給 AI 搞定。這篇教學會示範如何用它搭配 Hugo（靜態網站產生器），做一個類似 Apple Notes 風格的簡約網站。 準備工作 在開始之前，請確保你準備好以下工具： Google Antigravity：請至 Google 官網下載安裝（目前主要支援 MacOS）。 GitHub 帳號：用來存放網站原始碼與免費代管。 基本環境：電腦需安裝 Git 與 Hugo（稍後會教大家怎麼裝）。 Step 1：下載與設定 Antigravity 下載安裝：前往 Google 官網下載 Antigravity 並安裝。 中文化設定： 打開 Antigravity，點選左側的「Extensions」（擴充套件）。 搜尋 “Chinese”，安裝繁體中文語言包，重啟後介面就會變成親切的中文了。 AI 繁中優化： 點選介面右上角的三個點（或 AI 設定），選擇 「Customize」（客製化）。 新增一個條件：「請使用繁體中文回答」。這樣之後 AI 幫你寫 Code 或解釋時，就不會滿口英文，溝通更順暢。 Step 2：Vibe Coding！一句話生成 Hugo 網站 這是最神奇的一步！我們不需要自己建立檔案，全靠 AI。 ...

對做開發的人來說，技術文章最好是放在自己掌控的地方，而不是完全寄託在 Medium 或社群平台。這篇文章會帶你一步步把 Hugo + PaperMod 部落格，部署到 GitHub Pages 上，達到： 架站成本 = 0（GitHub Pages 免費） 內容掌握度高（Markdown 寫作 + Git 版控） 版型清爽、有暗色模式、支援程式碼區塊（PaperMod 主題） 只要你已經有 GitHub 帳號、願意開一下終端機，大概 30–60 分鐘就能把自己的技術部落格跑起來。 一、為什麼是 Hugo + PaperMod + GitHub Pages？ Hugo：Go 寫的靜態網站產生器，生成速度快、部署簡單，只要丟一堆 HTML/CSS 到 GitHub Pages 就能跑。 PaperMod 主題：設計簡潔，預設就支援： 深 / 淺色模式切換 程式碼語法高亮 文章目錄、Tag、分類等技術 blog 需要的元素 GitHub Pages：不用自己維護伺服器，不用管 Nginx / Apache，只要 push 到指定 branch，就會自動幫你上線。 這組合非常適合： 想建立作品集 / 技術筆記 不想維運伺服器 本來就用 GitHub 管理專案 二、前置準備 你需要先準備好： GitHub 帳號（免費版就足夠） ...

這是我的第一篇文章，用 Hugo + GitHub Pages 架起來的個人網站。 之後會在這裡整理我的 YouTube 頻道、AI 工具筆記和 vibe coding 教學。