Claude Code透過 Codex CLI 生成圖片｜免 API Key 使用 GPT-image-2
Kyle 2,638 字 · 約 9 分鐘

Claude Code 是命令列的 AI 編程助手，平常處理寫 code、改 config、跑 script 沒什麼問題，不過遇到「需要一張插畫」「生一張概念示意圖配說明」這類需求時就會卡住——它本身沒有生圖能力，只能告訴使用者去 Midjourney、Gemini 或 ChatGPT 手動處理。其實本機如果已經裝好 OpenAI 的 Codex CLI，可以直接從 Claude Code 呼叫過去生圖，圖會自動存到本機目錄，省下視窗切換與檔案上傳下載的步驟。

適合的使用情境

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 完成品的三段式角色分工

前置條件

本機需要先安裝 Codex CLI（裝法請參考 OpenAI 官方文件），裝好之後執行 codex --version 能看到版本號就算 OK。第一次使用之前要先跑一次互動模式完成 OAuth 登入——終端機直接輸入 codex 進入互動介面，按提示在瀏覽器完成 OpenAI 帳號授權，token 會被寫到 ~/.codex/ 底下；後續所有 codex 指令（包含本文用到的 codex exec）才能正常認證使用。

想隨時掌握剩餘可用額度的話，可以到 https://chatgpt.com/codex/cloud/settings/analytics 看當月用量與餘額，畫圖會吃 Codex 額度，連續生圖之前先看一眼比較有底。

測試指令

Codex CLI 有兩種使用模式：互動模式（直接輸 codex 進入 shell-like 對話介面）以及 exec 模式（codex exec "..." 一次性執行完即離）。要被 Claude Code 程式化呼叫，當然要用 exec 模式——它把整個任務當成一個 one-shot 完成，stdout 輸出結果後就退出，不需要人工介入。

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

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

執行之後 Codex 會在 stdout 印出一段執行摘要，最上方的 header 區會包含本次的 session id，類似這樣：

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

這個 session id 是該次執行的識別碼，同時也是生成圖檔目錄的名稱。Codex 把生成的 PNG 寫到 ~/.codex/generated_images/{session_id}/ 底下，檔名為 ig_<hash>.png；同一個 session 如果產出多張圖（例如 prompt 描述了多個視覺需求），所有 PNG 都會放在這個資料夾。Windows 系統的對應路徑是 %USERPROFILE%\.codex\generated_images\{session_id}\，展開後就是 C:\Users\<使用者名稱>\.codex\generated_images\<session_id>\。

跑 codex exec 與取得生成圖檔這兩件事，就是透過 stdout 印出的 session id 串接起來的——只要抓到 session id，就能用它組合出實際的圖檔路徑。後面要讓 Claude Code 自動處理的部分，本質就是「抓 session id → 用 session id 取圖 → 複製到專案指定位置」這串動作。

教 Claude Code 使用 Codex

Claude Code 不會預設知道本機有 Codex CLI 可以用，需要主動告訴它。最簡單的做法是在當下對話描述需求時，順便交代一次：「用 codex exec 跑、抓 stdout 印出的 session id、從 ~/.codex/generated_images/{sid}/ 拿 PNG 複製到專案某個資料夾」。這種方式不需要任何設定，但缺點是換到新對話又得重講一次。

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

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

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

在 Claude Code 的工作流

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

  • 呼叫 Bash 工具執行 codex exec，把輸出導到 log 檔，只 grep 出 session id（避免 Codex 過程中讀 skill 文件等冗長輸出灌爆對話 context）
  • 從 ~/.codex/generated_images/{session_id}/ 把 PNG 拷貝到目標路徑
  • 用 Read 工具開圖確認結果，必要時可以微調 prompt 重生
Claude Code 呼叫 Codex CLI 生圖的互動順序圖，四個角色（使用者紫、Claude Code 橘、Codex CLI 綠、資料夾藍）方框各有不同底色，角色名稱統一用黑字，六個步驟分三個階段色塊：派任務、生圖與抓取（Codex 儲存 PNG、stdout 回傳 session id、Claude Code 用 session id 讀檔）、回報
Claude Code 與 Codex CLI 之間透過 session id 與本機檔案系統交換圖檔

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

# 把 codex 輸出導到 log 檔，避免灌爆 context
LOG=$(mktemp -t codex.XXXXXX.log)
codex exec "賽博龐克風的開發者大會 banner，霓虹雨夜城市" > "$LOG" 2>&1

# 抓 session id
SID=$(grep -m1 '^session id:' "$LOG" | awk '{print $3}')

# 複製生成的 PNG 到目標路徑
cp "$HOME/.codex/generated_images/$SID/"ig_*.png "materials/<slug>/banner.png"

什麼時候不要用 Codex 生圖

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

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

實戰演練

完整的 skill 範本

把下面這份 SKILL.md 存成 .claude/skills/codex-image/SKILL.md，就是一個可以直接呼叫的 Codex 生圖 skill。Claude Code 啟動時會把 skill 描述載入上下文，後續對話下「幫我生一張 X 的圖」這類需求時就會自動 invoke 這個 skill。

---
name: codex-image
description: 用本機 Codex CLI 生成圖片並複製到專案指定位置
argument-hint: "[圖片描述] [--dest 目標路徑]"
allowed-tools: Bash, Read
---

呼叫本機 codex exec 生圖，從 stdout 抓 session id，
把 PNG 從 ~/.codex/generated_images/{session_id}/ 複製到專案內指定位置。

## 何時用

- 插畫、寫實風、概念示意圖、人物場景
- 不適合：流程圖／架構圖（用 Mermaid）、精確對齊對照圖（用 SVG）、
  圖內大量文字（用 SVG 疊文字）

## 工作流

### 1. 寫 prompt

中文 prompt 即可。建議結構：主體與動作 + 場景／環境 + 光線／氛圍 + 風格。
風格詞彙範例：溫暖插畫風、日系動畫風、水彩風、電影感寫實風、
等角視圖（isometric）、賽博龐克風、編輯雜誌風。

### 2. 執行並抓 session id

把 codex 輸出導到 log 檔避免灌爆 conversation context，只 grep 出 session id：

```bash
LOG=$(mktemp -t codex-image.XXXXXX.log)
codex exec "<完整 prompt>" > "$LOG" 2>&1
SID=$(grep -m1 '^session id:' "$LOG" | awk '{print $3}')
[ -z "$SID" ] && { echo "找不到 session id"; exit 1; }
SRC_DIR="$HOME/.codex/generated_images/$SID"
```

### 3. 複製到目標路徑

```bash
mkdir -p "$DEST_DIR"
for src in "$SRC_DIR"/ig_*.png; do
  cp "$src" "$DEST_DIR/<檔名>.png"
done
```

### 4. 驗證

用 Read 工具開 PNG，確認構圖、文字拼字、風格符合需求。
不滿意就改 prompt 重生——每次 codex exec 都是新 session、不會覆蓋舊圖。

## 反例

- 不抓 session id 直接 ls ~/.codex/generated_images/：會抓到別任務的舊圖
- 把 ~/.codex/generated_images/{sid}/ 當資產引用：那是 codex 私有目錄，
  要先複製到專案內
- prompt 塞「圖中有 5 行文字寫 X、Y、Z」：codex 文字渲染穩定度不夠，
  需要文字疊圖用 SVG 後製

放好之後，對話中可以直接下：「幫我生一張賽博龐克風的開發者大會 banner，放到 materials/，順便壓成 92% JPEG」，skill 內部會處理 codex exec、抓 session id、複製到目標、轉檔，整段不必再交代細節。

用 plan mode 與 auto mode 做多圖網站

skill 寫好之後，可以搭配 Claude Code 的 plan mode 與 auto mode 處理「一次要好幾張圖的網站」這類需求，整段過程開發者不需要逐步介入。Claude Code 用 shift+tab 在三種權限模式間循環切換：default（每個動作都問）→ auto edits（編輯自動接受、Bash 仍會問）→ plan（純規劃不執行）。多圖網站這類任務通常組合使用 plan 與 auto。

以做個人作品集 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 下 Claude Code 不會實際執行任何動作，會先列出完整工作計畫——包含「會建立哪些檔案」「會呼叫 codex-image skill 幾次」「會用 sips 轉幾張 JPEG」等明確項目。檢查計畫無誤後 approve plan，再按一次 shift+tab 切到 auto mode（accept edits），後續所有檔案編輯就不會逐個再問。

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

  • 4 次 codex exec 生圖（hero 主視覺 + 3 個專案封面），每張各自一個 session id
  • 從 ~/.codex/generated_images/{sid}/ 把 PNG 複製到 public/images/
  • 用 sips 把每張 PNG 轉成 1200×800 的 JPEG（quality 92）
  • 建立 React component（Hero、ProjectCard、SkillList、Contact）並引用對應圖檔
  • 套用 Tailwind 樣式、配置 layout

開發者只在 plan mode 階段把需求講清楚，剩下的等執行完看結果即可。如果中途 Bash 確認還是會跳出來，可以在 .claude/settings.local.json 的 permissions 把 Bash(codex exec:*) 與 Bash(sips:*) 加進 allow list 免重複確認；或直接在 plan 階段請 Claude 自己順手加好設定。整段下來，從零到一個完整可看的多圖網站雛形，通常落在十分鐘上下完成。

Post Views: 36
Tags:
Sponsored Links