Codex Vibe Coding 開發手冊 (1版)

隨著 Vibe Coding 技術越趨成熟，相關產品也進入戰國時代，Codex 是其中最特殊的存在，同時提供 Codex App 與 Codex CLI 兩種使用介面：Codex App 恪守 Vibe Coding 的本質，沒有長成像是 Cursor 那樣的程式碼編輯器，而 Codex CLI 則可以像是 Claude Code 那樣在終端機中輕盈的運作，本書涵蓋雙重介面，具有以下特色： \ Windows/macOS 跨平台開發 // 從做中學是最能烙印學習成果的方法，本書會帶著大家在開發 Codex 剩餘用量面板以及簡易截圖兩個跨平台工具的過程中，搭配功能的增長，在真實開發情境中邊做邊學 Codex 基本使用方法以及各式命令。同時因為兩者都是跨平台的專案，所以也會帶著大家在 Windows 與 macOS 操作 Codex，瞭解在不同平台上的操作方式與差異。 \ 實戰演練範例 // 做出結果絕對是學習者最大的期望，如果可以實作自己需要的工具更有成就感。由於 Codex App 本身沒有持續在使用介面上顯示剩餘用量的功能，本書就帶領大家實作可置頂顯示的剩餘用量面板小工具，在使用 Codex 的過程中，隨時都可以知道用量資訊，不再為 token 焦慮。此外，我們也會帶大家實作可快速截圖自動複製到剪貼簿的小工具，讓你在 Windows 與 macOS 上都可以用一樣的快捷鍵與操作方式截圖，你還可以跟 Codex 合作延伸設計想要的各式功能。 \ 化身流程自動化工具 // Codex 雖然是源自程式開發設計的工具，不過用途並不限於程式開發，由於能夠處理本機檔案，也能夠透過外掛操控 Chrome 瀏覽器，甚至可以 Computer Use 操控本機電腦，因此書中也會展示整合 Gmail、YouTube 等雲端服務，加上可定時重複執行的 Automation 機制與可制訂操作步驟的 Skills，建構自動化流程，解決日常繁瑣事務。 \ 用內建瀏覽器測試除錯 // Codex App 內建瀏覽器，不需要另外開啟瀏覽器就可以測試網頁應用程式，而且 Codex 還能自主操控內建的瀏覽器，只要下達正確的測試要求或步驟，就可以讓 Codex 自動測試除錯。更棒的是，內建瀏覽器還提供互動的編輯功能，你可以直接調整頁面樣式，就可以讓 Codex 幫你修改網頁，不用來回描述修改內容。對於有需要登入帳號的測試，還可以透過 Chrome 外掛連接本機上的 Chrome，用真實登入的身分操控網頁。 \ Git 與 Worktree 工作樹整合 // Codex 內建 Git 功能，因此實作範例均把 Git 納入工作流程，展示利用 Codex Git 功能，根據實作成果與差異，自動生成以往我們懶得寫、常常寫不周全的提交訊息。此外，Codex 也具備 Git 的 Worktree 工作樹功能，範例開發過程中也會展示搭配 Worktree 工作樹開發新功能，合併成果的方法。由於 Codex 很會執行常見的 CLI 工具，本書也會示範搭配 GitHub CLI 自動建立 GitHub 儲存庫、推送到遠端儲存庫的方法。 \ 手機遠端遙控 // 相信開發者都有這種經驗，突然有個想法想要實現，但是卻不在電腦旁邊，無法立即實現測試想法，有的時候回到家後卻又忘記了剛剛想到的點子。不用擔心，Codex 具備遠端遙控功能，手機就是你的遙控器，只要有想法，隨時都可以透過手機遙控家裡的 Codex 繼續工作，不論是在搭車、還是在餐廳享受美食，都可以立即把腦中的想法付諸實行。 \ 用 Subagents 專業分工 // 對於有明確分工或者是大量工作的任務，Codex 提供有 Subagent 可讓你針對專業分工，把專精的工作交給個別的 Subagent 執行，避免單一 Agent 處理多種任務時，因為上下文太大導致混淆，或者忘記中間細節，導致雖然完成任務，但卻不盡理想的問題。Codex 還可以讓你像是 Skill 那樣客製 Subagent 重複使用，之後不需要重複描述 Subagent 特質與工作方式，就可以重複使用。 本書特色: GUI/CLI 雙管齊發的 AI 開發工具 □ Codex App+Codex CLI 雙重環境實戰演練 □ Windows/macOS 跨平台應用開發 □ 用 Codex 內建瀏覽器為網頁應用自動測試除錯 □ 讓 Chrome 外掛與 Computer Use 操控電腦完成瑣碎雜事 □ 多 subagent 專業分工合作提升效率 □ 透過 Automation+Skills 設計自動化智慧流程 □ 遠端遙控不在辦公室也能辦公事 □ 以 Cloud Task 在雲端透過 GitHub 協作 □ 從 Codex 剩餘用量顯示與螢幕截圖小工具實戰演練

第 1 章 Codex 簡介、安裝與基本用法 1-1 Codex 簡介 1-2 安裝 Codex 安裝 Codex App 註冊/登入帳號啟用 Codex App 1-3 小試身手--讓 Codex App 幫我們安裝各式工具 安裝軟體套件管理工具 沙盒的邊界 安裝 uv 管理 Python 環境 安裝 nvm 管理 Node.js 環境 使用 AGENTS.md 建立規範 1-4 用量限制與付費使用 Codex 查看剩餘用量 付費升級 付費用戶的用量限制 第 2 章 使用 Codex 開發專案--設計剩餘用量顯示面板 2-1 Codex 開發基本技巧 建立專案 設定讓 AI 代替我們核准權限 對齊技術 使用 /init 建立 AGENTS.md 設計專案規範 用 /plan 命令規劃 MVP 用交談方式逐步修正完成 MVP 提交到儲存庫 2-2 使用工作樹開發新功能 用工作樹為專案建立新聊天室 撰寫新功能的產品需求書 將工作樹併回專案原始工作資料夾 加入遺漏的新功能 提交新功能到儲存庫 2-3 跨平台使用 Codex 將儲存庫推送到 GitHub 上 讓 Codex 使用既有的專案 測試跨平台穩定性 改成可直接安裝的工具 更新 AGENTS.md 檔 第 3 章 在終端機使用 Codex CLI 3-1 Codex CLI 基本概念與斜線命令 建立專案 離開 Codex CLI 升級 Codex CLI 基本命令 3-2 實作簡易跨平台截圖工具 使用 /init 建立專案規範 使用 /raw 進入 raw 模式檢視原始輸出 檢視豐富格式的完整輸出 使用 ! 啟動 Shell 模式執行命令 撰寫產品需求文件 使用 /plan 進入規劃模式確保需求完成 動手測試除錯 提交到儲存庫 使用 /resume 接續交談 使用 /rename 幫聊天室重新命名 加入專案架構與技術細節的文件 使用 /clear 清除上下文 3-3 在 macOS 使用 Codex CLI 完成跨平台專案 在 macOS 執行 Codex CLI 測試程式 使用 /ps 觀察在背景執行的終端機 macOS 的權限問題 持續交談修正問題 提交推送到遠端 第 4 章 幫 Codex 接上各種超能力 4-1 讓 Codex 透過內建瀏覽器看見網頁結果 設定並測試 Codex 內建瀏覽器 下載並啟動 「密碼管理助手」 專案 網頁應用程式自動化測試 用 「註解」 精確指出畫面問題 4-2 用外掛程式把 Codex 帶進 Chrome 與桌面應用程式 安裝 Chrome 外掛和 Computer Use 設定 PassNest 本機 API 憑證 讓 Codex 完成 Gmail 登入並操作 使用 Computer Use 跨應用程式完成桌面工作 延伸範例：登入 HBO Max 並統整熱門電影資訊 4-3 透過 Skill 打包作業流程 Skill 是什麼？ 自行建立並呼叫 Skill 管理 Skill 官方與社群現成的 Skill 4-4 用 MCP 直接呼叫外部工具 MCP 的架構 安裝並管理 Codex 的 MCP 工具 用 Context7 取得最新的套件說明 第 5 章 用 Subagent 分工合作 5-1. Subagent 簡介 使用 Subagent 並行處理 指定 Subagent 類型進行針對性分工 Subagent 的缺點 5-2. 客製化自己的 Subagent Codex 的 Custom Subagent 功能 Custom Subagent 的檔案位置與格式 建立專門翻譯技術文件的 Custom Subagent 5-3. 讓多個 Subagent 組成專業團隊 用專精不同工作的 Subagent 協作 結論 第 6 章 最後的防線：Hooks 6-1 什麼是 Hooks？ Hook 的執行流程 為什麼需要 Hook？ Hook 的種類 Hook 的應用範圍 6-2 在工具執行前後觸發 Hook PreToolUse Hook 完整的運行流程 建立 PreToolUse Hook 透過標準輸出為 Codex 補充指示 測試 PreToolUse Hook 改用 PostToolUse Hook 6-3 避免提交機密訊息：UserPromptSubmit Hook Hook 完整的運行流程 建立 UserPromptSubmit Hook Hook 執行的命令：檢查提示詞的程式 透過標準輸出阻擋有風險的提示詞 測試提示詞檢查功能 6-4 傳送要求核准通知到 Telegram：PermissionRequest Hook Hook 完整的運行流程 建立 PermissionRequest Hook 建立 Telegram 機器人並取得 API token 與 CHAT_ID Hook 執行的命令：發送提醒通知到 Telegram 測試 Hook 有沒有順利運作 第 7 章 自動化流程與遠端遙控 7-1 Automation 自動化任務 透過聊天建立追蹤 YouTube 新影片的 Automation 手動建立提取新影片字幕的 Automation 7-2 Remote Connections 從手機遠端排程 Automation 設定手機遠端控制本機 Codex 在手機建立排程 7-3 Remote Connections 從手機遠端進行 Vibe Coding 從手機建立翻譯影片字幕的專案 利用 Skill 建立新影片從提取到翻譯的完整 Automation 第 8 章 使用 Cloud Task 接上 GitHub 工作流程 8-1 將範例專案推送到 GitHub 下載範例專案 請 Codex 導覽專案結構 將專案推送到 GitHub 上 8-2 建立 Issue 交給 Cloud Task 處理 透過 gh 建立 GitHub Issue 建立雲端環境的事前準備 連接 GitHub 建立雲端環境 透過 Cloud task 解 Issue 建立 PR 8-3 用 Codex 審查 PR 並修正 請 Codex 幫忙審查 PR 呼叫 @codex幫忙修正 PR 問題 回到本機套用修改並檢視結果