很多人用 AI 寫程式還停留在「請它產生一段程式碼」，但把 Codex 放進 VS Code 後，流程會更接近真正的開發協作：看檔案、改檔案、跑測試、再根據錯誤修正。這支影片就是用實作方式測試它能不能真的協助做出 App。 影片連結：https://www.youtube.com/watch?v=tO2Qv9rtUck 和一般聊天機器人不同的地方 它可以理解專案檔案脈絡。 它能把需求拆成多個修改步驟。 它可以配合終端機輸出修正錯誤。 適合拿來做什麼 快速做原型。 重構既有小工具。 補 UI、文案、樣式與測試。 把教學影片內容整理成可下載資產。 使用建議 需求越具體，結果越穩。 每次改動後都要實際跑起來看。 不要一次要求它改太大範圍，分段比較容易控制。 小結 這篇先把影片內容整理成可搜尋、可回來查的文字筆記。後續如果我有補充更多實測資料、指令或範例，也會再把文章更新得更完整。
很多人看到終端機會覺得它很工程師、很難懂，但終端機其實是人類和電腦溝通最直接的一種方式。從早期 Teletype 到今天的 AI Terminal，改變的是介面，留下來的是「用文字控制電腦」這個核心。 影片連結：https://www.youtube.com/watch?v=8rwWowtxqaQ 終端機為什麼重要 它讓你可以用指令精準控制系統。 很多開發、部署、AI 工具仍然以終端機為入口。 錯誤訊息通常會在終端機裡出現，所以學會看它很重要。 AI Terminal 帶來的改變 把自然語言轉成指令。 協助解釋錯誤訊息。 把安裝、測試、部署流程串成更完整的操作。 新手可以怎麼開始 先熟悉 cd、ls、pwd、mkdir 這些基本指令。 遇到錯誤先複製完整錯誤訊息。 把常用指令整理成自己的筆記。 小結 這篇先把影片內容整理成可搜尋、可回來查的文字筆記。後續如果我有補充更多實測資料、指令或範例，也會再把文章更新得更完整。
很多人想到動畫就會想到 After Effects，但如果你要做的是可重複產生的文字動畫、教學片段或社群影片模板，Remotion 這種用程式產生影片的方式會很適合。搭配 Antigravity，就可以用 AI 協助建立動畫元件。 影片連結：https://www.youtube.com/watch?v=8xQ3C0ZGskE 這種做法的優點 動畫可以變成程式碼，方便重複修改。 文字、顏色、時間軸可以參數化。 適合做系列影片的固定模板。 影片中提到的工具 Remotion：https://www.remotion.dev Antigravity：https://antigravity.google 適合用在哪裡 YouTube 開場動畫。 教學影片重點提示。 短影音字幕與打字效果。 產品功能展示。 小結 這篇先把影片內容整理成可搜尋、可回來查的文字筆記。後續如果我有補充更多實測資料、指令或範例，也會再把文章更新得更完整。
隨機找餐廳吃 找什麼吃 透過 vibe codeing 寫了一個找附近 500 公尺的餐廳 煩惱不知道要吃什麼？就骰骰子吧！ 懷舊電子雞養成遊戲 電子雞 我透過 vibe coding 生成的網頁電子雞養成遊戲，有興趣可以到我的 github 看如何自行部署。 Google 開源的圖片壓縮網頁工具 Squoosh 是一個由 Google Chrome Labs 團隊開發的圖片壓縮與最佳化工具。 obtainer 開源的數位光柵卡 光柵圖 一個數位重現那些懷舊的立體貼紙，當你傾斜它們時會改變，由 @obtainer 製作。 我將他改成繁體中文跟自己的圖片。 類似 Apple AI 的照片消除物件功能 IOPaint 這款影像修復工具採用最先進的AI模型，可以移除圖片中任何不需要的物體、瑕疵或人物，或擦除並替換（基於穩定擴散技術）圖片中的任何內容。 我用 Vibe Code 製作一個類似的工具 magic-eraser
各位觀眾朋友大家好，這裡是程式猿 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 帳號（免費版就足夠） ...
最近 AI 界非常流行一個詞叫 「Vibe Coding」（氛圍編碼），簡單來說，就是你不需要懂艱澀的程式語法，只要憑著「感覺」告訴 AI 你想要什麼，它就能幫你把程式碼寫好！ 今天這篇文章就要來實測 Google 最近推出的強大工具 Google Antigravity，它長得像 VS Code，但內建了強大的 AI Agent。我們要用它來「詠唱」出一個網頁，並且教大家如何用 GitHub Pages 這個免費空間，把你的網站發布到網路上分享給朋友看！ 為什麼你需要這招？ 很多朋友用 AI 生成了漂亮的網頁（HTML/CSS 檔），但通常只能在自己的電腦上打開（Local 端），沒辦法傳個網址就讓朋友用手機或電腦看到。 這時候你就需要 GitHub Pages！它是一個完全免費的靜態網頁託管服務，只要你有 GitHub 帳號，就能輕鬆把寫好的網頁變成一個公開的網址。 Step 1：用 Google Antigravity 生成網頁 首先，我們使用 Google Antigravity（或任何支援 Vibe Coding 的 AI 編輯器，如 Cursor、Bolt.new）來生成網站。 輸入提示詞 (Prompt)： 在編輯器中告訴 AI 你的需求。例如我的範例是： 「做一個精美的靜態網頁，介紹 AI 人工智慧跟 Python 的歷史。」 (小撇步：如果 AI 回英文，可以要求它用繁體中文回答) 生成檔案： AI 會自動幫你寫好 index.html（網頁架構）、style.css（樣式）和 script.js（功能）。 本地預覽： 點擊 index.html 在瀏覽器打開，你會發現一個精美的一頁式網站已經完成了！但現在只有你看得到，下一步我們要讓它上線。 Step 2：註冊並設定 GitHub 要使用 GitHub Pages，你必須先有一個 GitHub 帳號。 ...
還記得我之前分享過如何在 Windows 和 Mac 上安裝 ebook2audiobook，把電子書變成有聲書嗎？那兩支影片推出後，很多網友在底下留言詢問：「阿發，可不可以出一個 Docker 的部署教學？」 你們的聲音我都聽到了！今天這篇文章就是要來回應大家的需求，手把手教你在 Mac 跟 Windows 上使用 Docker 來安裝 ebook2audiobook。 ⚠️ 安裝前重要須知 (必看！) 在使用 Docker 版本之前，有兩點關於硬體加速（GPU）的限制必須先跟各位說明，請評估後再決定要用 Docker 版還是原生版： Mac 用戶：Docker 部署是運行在 Linux 容器內，目前無法支援 Apple Silicon (M1/M2/M3) 的 MPS 加速。這意味著用 Docker 版只能靠 CPU 運算，速度會比原生安裝慢。如果你追求速度，建議參考我之前的[Mac 原生安裝教學]。 Windows 用戶：最近 Docker 對於 NVIDIA 顯卡的支援有些問題（偵測不到 GPU），作者目前還在修復調整中。所以現階段在 Windows 用 Docker 部署，也暫時只能使用 CPU 模式。 簡單來說：想省事、怕環境弄亂電腦的人選 Docker；想追求極致轉檔速度的人，請選原生安裝！ 準備工作：安裝 Docker 無論你是 Mac 還是 Windows，第一步都是要先安裝 Docker Desktop。 Mac：你可以去官網下載，或是像我一樣習慣用終端機，透過 brew 安裝。 Windows：直接去 Docker 官網下載安裝檔。 Mac 安裝教學 🍎 Step 1：下載專案 首先，前往 ebook2audiobook 的 GitHub 頁面（或點擊影片下方連結）下載程式碼壓縮檔，並解壓縮。我習慣把它放在「下載項目 (Downloads)」資料夾。 ...
輕鬆安裝 Mac 應用程式的秘密武器：Homebrew 教學 對於很多 Mac 用戶來說，下載應用程式的過程可能有些繁瑣，尤其是當你在 App Store 找不到想要的程式時。別擔心！今天我將介紹一個方便又強大的工具——Homebrew，讓你輕鬆安裝所需應用程式，省去繁瑣的下載步驟！ 什麼是 Homebrew？ Homebrew 是一個開源的程式管理工具，旨在讓 Mac 用戶像在 Linux 中一樣，透過終端機簡單安裝和管理各種應用程式。只需輸入幾行指令，就能快速安裝你想要的程式！ 安裝 Homebrew 的步驟 跟著以下簡單步驟，讓我們開始吧！ Step 1：安裝 Xcode Command Line Tools 在終端機中輸入以下指令，安裝 Xcode Command Line Tools（如果尚未安裝）： xcode-select --install Step 2：安裝 Homebrew 接著，前往 Homebrew 的官方網站複製安裝指令，然後在終端機中執行： /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 輸入密碼後，等待安裝完成。完成後，輸入以下指令確認安裝成功： brew doctor Step 3：使用 Homebrew 安裝應用程式 現在你可以輕鬆安裝應用程式了！例如，安裝 VS Code，只需在終端機中輸入： brew install --cask visual-studio-code Step 4：更新和管理應用程式 每次使用前，建議先更新 Homebrew 和已安裝的應用程式： brew update brew upgrade 如何移除應用程式？ 如果你想要移除已安裝的應用程式，只需使用以下指令： ...