Claude Code 圖片生成教學｜透過 Codex CLI 呼叫 GPT Image 2
Kyle 3,185 字 · 約 12 分鐘

Claude Code 是 Anthropic 的程式開發助手，可以讀寫專案並呼叫命令列工具；Codex CLI 是 OpenAI 的程式開發工具，也提供內建圖片生成。需要文章插畫或網站主視覺時，可讓 Claude Code 呼叫 Codex，再把產出的圖檔放進專案。這個流程讓兩套工具分工完成圖片生成與檔案整合。

Claude Code 與 Codex 的角色

這裡使用的是 Claude Code 開發環境，並透過外部 Codex 工具完成點陣圖生成。Claude Code 仍可撰寫 SVG 或 Mermaid；接上 Codex 是為了取得模型生成的插畫、照片風格與其他圖片素材。

工具負責工作
Claude Code理解專案需求、組合提示詞、執行命令及引用圖檔
Codex CLI執行圖片生成任務並回報產出
GPT Image 2Codex 內建生圖使用的圖像模型

Claude 聊天產品與 Claude Code 是不同的使用介面；本文不以這個串接流程推論所有 Claude 產品的功能。Claude Code 基本用法可參考 Claude Code Skills 入門。

適合的使用情境

Codex 生圖搭配 Claude Code 工作流，最直接的價值在「不需要切換工具就能取得當下需要的圖」。下面幾個是實務上常會用到的場景：

  • 從零做一個網頁專案：Claude Code 在做 landing page、活動報名頁、產品介紹頁時，可以直接交代「順便生一張對應主題的 hero 圖、區段裝飾圖、空狀態的插畫」，網頁長出來就是完整的有圖版本，不必先把版面排好再回頭找圖補
  • Prototype 與 demo：跑 demo 之前要塞「看起來像真的」的圖片素材時，與其用 placeholder 服務的灰色方塊或 Lorem Picsum 隨機照片，請 Codex 依場景生對應主題的圖會更貼近最終樣貌，demo 給客戶或主管看的時候不會被「為什麼會出現一張陌生人的旅遊照」這種小事打斷
  • README 與技術文件：開源專案的 README、技術文件、團隊 wiki 經常需要一張封面圖或概念示意圖。Codex 擅長畫主題視覺隱喻（例如「機器人手握終端機」「資料流穿過齒輪」），這類圖過往多半要手繪或請設計師，現在可以從 prompt 直接生
  • OG image 與社群分享卡：把生圖步驟接到 CI 流程裡，每次 release 或重大 commit 自動讓 Claude Code 讀 changelog 或 PR 描述、組 prompt、丟給 Codex 生 OG image 上傳到 CDN，社群分享出去的縮圖就會自動跟著內容主題更新
  • App 開發雜項素材：App 啟動畫面、空狀態（empty state）插畫、教學 onboarding 的場景圖、設定頁的小裝飾。這類「不是主視覺、但放一張圖會比較有溫度」的位置以前常會用免費圖庫，現在可以為每個畫面客製化
  • 簡報、newsletter、內部文件：投影片封面、章節分隔頁、newsletter header banner、內部公告的視覺。生完之後 Claude Code 還能順手用 sips 或 ImageMagick 壓縮、轉格式，直接整合進交付流程

這些情境的共通點，其實就是「習慣在 Claude Code 裡寫東西，但中途需要一張圖」的狀況。過去要生圖大多得切到 ChatGPT 或 Gemini 網頁，自己貼 prompt、等生圖完成、把 PNG 下載回專案，再手動把圖放進指定路徑——或者把路徑跟需求講一遍給 Claude Code，讓它幫忙搬。這一連串切換工具、上下載、解釋上下文的動作，每次都要重來。把 Codex CLI 接上之後，從「描述需求」到「圖放在專案內正確位置」整段都在同一個對話裡完成，不需要離開終端機，也不必再跟 AI 解釋一次「這張圖是要放到哪」。

運作機制

進入 Claude Code 自動化之前，先了解 Codex 怎麼運作、輸出檔在哪、以及怎麼讓 Claude Code 知道本機有這個工具可以呼叫。本機 Codex 一旦準備好，後面剩下的事都只是「告訴 Claude Code 怎麼用」而已。

三段式插畫流程示意：左圓橘色機器人（Claude Code）坐在筆電前派 prompt，中圓戴貝雷帽的綠色機器人（Codex CLI）拿畫筆與調色盤作畫，右圓裱框的 PNG 完成品掛在牆上，三個圓之間用虛線弧線與飛行的紙條、相框串接
Claude Code → Codex CLI → PNG 完成品的三段式角色分工

用的是哪個模型

依 2026 年 9 月核對的 OpenAI 文件，Codex 內建生圖使用 gpt-image-2，消耗一般 Codex 使用額度。若改走需要 OPENAI_API_KEY 的圖片 API 工作流，則依 API 另外計費。透明背景、輸出大小或其他特殊需求應核對當前工具支援，不把舊版 skill 的模型切換方式當成所有版本的固定規則。詳見 Codex 圖片生成文件。

前置條件

本機需要先安裝 Codex CLI（裝法請參考 OpenAI 官方文件），裝好之後執行 codex --version 能看到版本號就算 OK。安裝完接著要用 codex login 登入：

codex login

codex login 可透過瀏覽器完成 ChatGPT 帳戶授權。憑證的儲存方式依 Codex 設定與作業系統而定；登入後執行任務仍受帳戶可用功能、用量及本機權限限制。

原文於 2026 年 5 月以 ChatGPT Plus 帳戶測試成功，也遇過免費帳戶無法生圖；這是當時測試結果，不能當成所有帳戶的現行資格表。執行前應查帳戶是否具備圖片生成權限及剩餘額度；「免 API Key」只指使用 ChatGPT 登入的內建生圖流程，不代表不受用量限制。

Codex 額度與圖片 API 的費用是不同項目。CLI 可用 /usage 查詢用量，額度窗口、重置與額外用量的差別可參考 Codex 用量查詢與額度重置。

測試指令

codex 進入互動模式，codex exec 則執行非互動任務並回傳結果，適合由 Claude Code 呼叫。非互動不代表自動繞過 sandbox 或權限設定；指令被拒絕時須依錯誤訊息處理。

先單獨跑一次測試指令確認 Codex 生圖正常：

codex exec "畫一隻在月球喝咖啡的貓，溫暖插畫風"

注意：Codex CLI 預設只允許在 git repository 內執行，是出於對檔案操作的保護設計。如果在非 git 目錄（例如 ~/Downloads、家目錄）跑 codex exec 會直接被拒絕，提示需要加上 --skip-git-repo-check 才能繼續。這個 flag 加在指令最前面即可：

codex exec --skip-git-repo-check "畫一隻在月球喝咖啡的貓，溫暖插畫風"

--skip-git-repo-check 只略過 Git 儲存庫檢查，不會把工作目錄變成唯讀，也不會取消權限限制。應在本次任務的專案目錄執行，並明確指定需要產出或複製的圖檔。

以下是原文以 Codex CLI v0.130.0 測試時的終端輸出範例，保留作為歷史格式參考；版本、模型與輸出欄位會隨環境變動：

OpenAI Codex v0.130.0
--------
workdir: /Users/kyle/codex
model: gpt-5.5
session id: 019e1a1c-98e1-75a0-925c-48303057823f
--------

原文測試時，PNG 位於 ~/.codex/generated_images/{session_id}/，檔名形如 ig_<hash>.png，Windows 則使用使用者目錄下的對應路徑。這不是穩定的檔案命名介面；目前應先讀取任務實際回傳的完整圖檔路徑，再確認檔案存在。

可靠的串接順序是「完成本次任務 → 讀取回報的圖檔路徑 → 確認檔案 → 複製到專案」。Session ID 可以協助追查執行紀錄，但不宜只由 ID 猜檔名，更不能取生成目錄中時間最新的一張圖，因為可能屬於另一個任務。

教 Claude Code 使用 Codex

在 Claude Code 對話中可交代：「使用本機 codex exec 生成圖片，依本次回報的完整路徑確認檔案，再複製到指定位置。」這不需要建立 skill；若要跨對話重複使用，可將步驟寫入專案規範或自訂 skill。

如果這個流程會經常用到，有兩種比較穩當的長期做法：

  • 寫進 CLAUDE.md：在專案根目錄的 CLAUDE.md 寫一段簡單描述（codex exec 指令、輸出檔案確認與目標位置），Claude Code 每次啟動會自動把 CLAUDE.md 載入為專案指示，之後不必再重複講
  • 封裝成 skill：在 .claude/skills/ 底下建一個 skill 檔，把整個流程包成可呼叫的命令，對話裡只要下類似 /codex-image "描述" 就觸發。codex exec、確認輸出路徑及複製到指定資料夾的步驟都收進 skill，呼叫端只看得到結果

偶發需求用 CLAUDE.md 就夠用；常用功能值得花十分鐘寫成 skill，後續呼叫的對話會乾淨很多。下一節會示範實際的工作流，假設上述前置教學任一種已經做過，重點放在「圖怎麼產出、怎麼進到專案」這部分。

在 Claude Code 的工作流

實際讓 Claude Code 幫忙生圖時，可以直接在對話裡描述需求，例如「請生一張賽博龐克風的開發者大會 banner，放到 materials/{slug}/ 底下」。Claude Code 內部會做這幾件事：

  • 呼叫 Bash 工具執行 codex exec，把輸出導到 log 檔，讀取退出狀態與產出檔案路徑，避免將整份日誌載入對話
  • 確認本次回報的 PNG 存在，再複製到目標路徑
  • 用 Read 工具開圖確認結果，必要時可以微調 prompt 重生
Claude Code 呼叫 Codex CLI 生圖的互動順序圖，四個角色（使用者紫、Claude Code 橘、Codex CLI 綠、資料夾藍）方框各有不同底色，角色名稱統一用黑字，六個步驟分三個階段色塊：派任務、生圖與抓取（Codex 儲存 PNG、stdout 回傳 session id、Claude Code 用 session id 讀檔）、回報
原文測試版以 session id 找圖；實際操作應優先採用任務回傳的完整路徑

對應的 shell 流程大致長這樣：

# 執行一次圖片生成；依任務回報確認圖檔完整路徑
codex exec '生成一張賽博龐克風的開發者大會 Banner，霓虹雨夜城市。
完成後回報實際圖檔的完整路徑。'

# 下列來源必須替換成本次回報的圖檔，不可直接猜檔名
image_source="/本次回報的完整路徑/image.png"
image_target="materials/專案名稱/banner.png"

if [ ! -f "$image_source" ] || [ -e "$image_target" ]; then
  echo "來源不存在或目標已存在，請先確認路徑" >&2
  exit 1
fi
mkdir -p "$(dirname "$image_target")"
cp "$image_source" "$image_target"

什麼時候不要用 Codex 生圖

Codex 生圖適合畫「需要溫度的視覺元素」——插畫、場景、人物、概念示意。但下列情境換工具會更順手：

  • 流程圖、架構圖、序列圖：用 Mermaid 比較準，方便修改，或是先用 Mermaid 做完再給 Codex 生成更好看的版本
  • 需要精確對齊的對照圖（before／after、表格化視覺、雙欄並列）：直接寫 SVG 控制座標，也可以讓 AI 寫
  • 圖內要塞大量文字：例如要圖中包含 5 行說明文字，要修改文字必須重新生一整張圖，這種需求改用 SVG 把文字疊上去，或是讓 AI 另外把文字加上去比較方便調整

實戰演練

下面將單張圖片流程整理成可重用的 skill。先確認一次任務能取得實際圖檔，再擴充為使用者指定的多圖需求。

提示詞與等待時間

提示詞應交代用途、主體、構圖、風格與必要文字。OpenAI 建議先以一至三句清楚的描述開始；這不是 350 字元的硬性上限。原文測試曾遇到較長提示詞等待較久，但單次觀察不能證明字數是原因，也不能把三分鐘直接當成卡住的判準。

自動化程式可設定符合任務需求的等待上限，逾時後應保留日誌、檢查退出狀態與產物，再決定是否重試；不要一逾時就連續提交相同任務。本文範本不預設固定完成秒數。

完整的 skill 範本

將下列內容存為 .claude/skills/codex-image/SKILL.md。範本使用手動呼叫，輸入 /codex-image 圖片需求 啟動；它描述工作流程，由 Claude Code 執行必要工具，不是獨立的 shell 程式。

---
name: codex-image
description: 用本機 Codex CLI 生成圖片並複製到指定專案位置
disable-model-invocation: true
argument-hint: "[圖片描述與目標位置]"
---

使用 codex exec 生成使用者要求的圖片。
以本次執行實際回傳的圖檔路徑為準，不猜 session 目錄或檔名。

## 工作流

1. 確认使用者指定的用途、張數與目標位置。
   提示詞交代主體、構圖、風格與必要文字。
2. 執行 codex exec，要求回報生成圖檔的完整路徑。
   命令列提示詞須正確引用，避免 shell 展開其中的特殊字元。
3. 檢查退出狀態與本次輸出。
   失敗或逾時時先讀日誌，不自動重複提交。
4. 以本次回報路徑確認圖檔存在，再複製到專案位置。
   多張圖逐一命名；目標已存在時先確認覆寫需求。
5. 開圖檢查構圖、文字、尺寸與用途是否符合需求。
   需要修改時依使用者授權調整，不自行增加張數。
6. 回報專案內最終檔案路徑。
   若使用者要求格式或尺寸轉換，再用可用工具轉檔並重新驗收。

## 檔案判斷

- 不從 generated_images 目錄猜最新圖片，避免取到其他任務產物。
- 不把 Codex 私有生成目錄當成網站長期引用位置。
- 不用萬用字元把多張圖片複製到同一個目的檔名。
- 無法確認產出路徑時，先回報目前狀態，不宣稱已生成成功。

例如輸入 /codex-image 開發者大會 Banner，賽博龐克風，放到 materials/conference/banner.png。若另外指定 JPEG 品質或尺寸，需在 PNG 驗收後轉換，不能只改副檔名。

規劃多圖網站與執行權限

多圖網站可以先在 plan mode 整理頁面與圖片清單，再依確認的範圍執行。acceptEdits 會自動接受檔案編輯，auto 則有工具呼叫的自動審查機制，兩者不是同一模式；可用模式依版本及帳戶而異。詳見 Claude Code 權限文件。

以做個人作品集 landing page 為例，先按 shift+tab 切到 plan mode，下這個需求：

請建立一個個人作品集 landing page，使用 React + Tailwind CSS。包含：

- Hero section，含主視覺一張（科技抽象風、未來感）
- 三個專案展示卡片，每個專案要一張對應主題的封面圖：
  1. 即時聊天 App
  2. AI 語音助手
  3. 個人理財追蹤工具
- 技能列表 + 聯絡方式區塊

所有圖片請用 codex 生成，存到 public/images/，
輸出 1200x800、JPEG 92% 品質。

Plan mode 可讀取檔案與執行允許的唯讀探索，不會直接修改專案來源檔。確認圖片張數、用途、目的路徑及轉檔需求後，再切換適合的執行模式；Bash 是否需要確認仍依實際權限規則，不能只憑接受檔案編輯就推論所有命令都已獲准。

Claude Code 接著開始自動跑這幾件事：

  • 4 次 codex exec 生圖（hero 主視覺 + 3 個專案封面），逐張記錄本次產出路徑
  • 依實際產出路徑把各張 PNG 複製到 public/images/，使用不同檔名
  • 用 sips 把每張 PNG 轉成 1200×800 的 JPEG（quality 92）
  • 建立 React component（Hero、ProjectCard、SkillList、Contact）並引用對應圖檔
  • 套用 Tailwind 樣式、配置 layout

執行時間取決於生圖、修改與轉檔次數，不能保證整個網站在固定分鐘數內完成。若命令被要求確認，可透過 /permissions 查看相關規則，再依需要授權；skill 本身的文字不會直接變更 Claude Code 的權限設定。

參考來源

Post Views: 6,930
Tags:
Sponsored Links