讓 Claude 幫你
生圖、做教學、發連結

CHAPTER 1

讓 Claude 叫 GPT 畫圖

Claude 擅長規劃內容、寫網頁和簡報，但它不會畫圖。GPT 的圖片模型（gpt-image-2）畫插圖很強。把兩個串起來的方法，是讓 Claude 透過「Codex CLI」把畫圖工作交給 GPT。

先選方法：三種做法比較

123

1. 1

   安裝 Codex CLI

   做好了

   打開「終端機」（Mac：按 ⌘＋空白鍵，輸入「終端機」或 Terminal）。依你的電腦選一種裝法，複製貼上後按 Enter：

   Mac（官方安裝檔）已裝 Node.js已裝 HomebrewWindows

   終端機複製

   curl -fsSL https://chatgpt.com/codex/install.sh | sh

   終端機複製

   npm install -g @openai/codex

   終端機複製

   brew install --cask codex

   開一個新的 PowerShell 視窗貼上：

   PowerShell複製

   powershell -ExecutionPolicy ByPass -c "irm https://chatgpt.com/codex/install.ps1 | iex"

   裝完要開一個新的終端機視窗官方安裝檔最後會問 Start Codex now?，按 n 再按 Enter。接著把終端機整個關掉（⌘Q）、重新打開，codex 指令才找得到。用 Homebrew 裝失敗的話，改用官方安裝檔。

   在新的終端機視窗輸入下面這行，看到版本號就代表成功：

   終端機複製

   codex --version

   已經裝了 ChatGPT 桌面版，還是要裝嗎？要。ChatGPT 桌面版裡面雖然有一份 Codex（/Applications/ChatGPT.app/Contents/Resources/codex-cli/CodexCLI.app/Contents/MacOS/codex），但終端機直接打 codex 找不到它。最簡單的做法是照上面跑官方安裝檔。示範電腦的截圖是先用 alias codex=… 指到這個路徑才能直接打 codex。
2. 2

   用 ChatGPT 帳號登入

   做好了
   終端機複製

   codex login

   1. 瀏覽器會自動打開登入頁，選 Sign in with ChatGPT。
   2. 用你平常的 ChatGPT 帳號登入，看到登入成功後就可以關掉分頁。
   3. 回到終端機，確認登入狀態：

   終端機複製

   codex login status

   看到 Logged in using ChatGPT 就完成了。

   

   登入只要做一次登入資訊存在電腦裡（~/.codex/auth.json），之後 Claude 每次叫 Codex 都會用同一個帳號。這個檔案等同你的帳號鑰匙，不要傳給別人。
3. 3

   確認生圖功能是開著的

   做好了
   終端機複製

   codex features list | grep image_generation

   最後一欄是 true 就可以用。新版預設就是開的，這一步只是確認。

   實際輸出

   image_generation                         stable             true

4. 4

   自己先試生一張圖

   做好了

   在桌面建一個測試資料夾，然後叫 Codex 畫一張圖存進去：

   終端機複製

   mkdir -p ~/Desktop/gpt-test
   codex exec --skip-git-repo-check -s workspace-write -C ~/Desktop/gpt-test \
     "請用 image generation 畫一張 1536x1024 的扁平向量插畫：一位業務坐在咖啡廳用筆電和客戶視訊，配色紫色系，畫面不要有任何文字。存成 test.png"

   大約 1 分鐘後，桌面的 gpt-test 資料夾就會出現 test.png。第一次存到桌面時，Mac 可能會問「終端機想要取用桌面上的檔案」，按「好」。

   

   指令片段	意思
   exec	不開對話畫面，做完就結束。Claude 要在背景呼叫，一定要用這個。
   --skip-git-repo-check	資料夾不是程式專案也照樣執行（業務資料夾都不是）。
   -s workspace-write	允許 Codex 在指定資料夾裡寫檔案，圖才存得進去。
   -C 資料夾	工作資料夾，也就是圖片要存放的地方。
   - < prompt.txt	從檔案讀提示詞。一次要畫很多張、提示詞很長時用這個寫法（第 6 步會用到）。
   -i 參考圖.png	附一張參考圖給 GPT，要讓角色或風格跟舊圖一致時加上。要緊接在 exec 後面，例如 codex exec -i hero.png --skip-git-repo-check …。

5. 5

   教 Claude 用這個方法

   做好了

   有兩種教法，建議用 B：做成 Skill（技能）之後，整個團隊都能裝同一份。

   A. 直接請 Claude 記住

   在 Claude 對話裡貼這段，它會寫進記憶，之後的對話都會照做：

   貼給 Claude複製

   請記住：以後需要圖片一律用 GPT 生成。做法是在輸出資料夾寫 prompt.txt，然後在背景執行
   codex exec --skip-git-repo-check -s workspace-write -C 輸出資料夾 - < prompt.txt
   提示詞要寫清楚檔名、尺寸、風格、色碼，並註明畫面不要有任何文字和 logo。

   B. 安裝 gpt-image 技能推薦

   在終端機貼上這兩行，就會把技能檔裝到 Claude 的技能資料夾：

   終端機複製

   mkdir -p ~/.claude/skills/gpt-image
   curl -fsSL https://claude-workflow-guide.pages.dev/downloads/gpt-image-SKILL.md -o ~/.claude/skills/gpt-image/SKILL.md

   不想碰終端機的話，也可以在 Claude 程式碼模式直接貼：

   貼給 Claude複製

   請幫我安裝技能：下載 https://claude-workflow-guide.pages.dev/downloads/gpt-image-SKILL.md ，存到 ~/.claude/skills/gpt-image/SKILL.md

   裝好後按 ⌘Q 把 Claude 完全關掉再打開。之後在程式碼模式說「圖片找 GPT」「幫我配圖」，Claude 就會照技能裡的步驟做。技能內容可以先打開來看。

6. 6

   日常怎麼用：說一句話就好

   做好了

   之後做任何東西需要圖，直接在需求後面加一句「圖片找 GPT 生成」。下面是這份教學頁實際的做法：

   12

   3

   • 1Claude 先寫好提示詞檔 prompt_faq.txt，綠色是剛寫入的內容：配色、角色、檔名和尺寸。
   • 2接著在背景執行 codex exec … - < prompt_faq.txt，Codex 讀檔案裡的需求去畫圖。
   • 3右側「背景任務」顯示 GPT 正在畫圖。這段時間 Claude 可以繼續做別的事，畫好會自動通知它。

   1. Claude 先寫提示詞檔：把 5 張圖的用途、風格、色碼、角色造型、檔名尺寸寫進 prompt.txt。
   2. 在背景叫 Codex：Claude 不用等，同時去做別的事（這次它一邊等圖，一邊跑第 4 章的實驗）。
   3. 完成後 Claude 逐張檢查：看有沒有冒出文字、角色是否一致，不合格的只重畫那一張。
   4. 壓縮後放進成品：轉成 1200px 寬的 WebP，每張約 50KB，網頁開起來才快。

   

   本頁的 5 張插圖就是這樣做的5 張 1536×1024 插圖，從送出到全部完成共 4 分 52 秒，平均每張不到 1 分鐘。後來補的「常見問題」插圖，提示詞裡寫了「以 hero.png 當角色參考」，所以同一個業務角色和小幫手能貫穿全部插圖。

   提示詞範本（直接改括號內容）

   prompt.txt複製

   請使用你的圖片生成工具（image generation）產生以下 3 張「插畫示意圖」，存成目前資料夾下的 PNG（檔名如下），完成後回報每張的路徑與尺寸。
   
   用途：〔例：給門市品牌老闆看的提案簡報〕
   - 風格：扁平向量編輯插畫（flat vector editorial illustration），乾淨線條＋平塗色塊，少量紙紋質感。
   - 人物：簡化的示意人物，臉部極簡（只有髮型輪廓，五官省略），不要像 AI 生成的真人。
   - 同一位角色貫穿有人物的畫面：〔例：短黑髮、戴細框眼鏡、穿淺紫色襯衫〕，造型每張一致。
   - 配色只用：〔主色色碼〕、〔輔助色色碼〕、〔點綴色色碼〕；背景乾淨的〔背景色碼〕。
   - 所有畫面都不要出現任何可讀文字、字母、數字、logo（螢幕或招牌用色塊表示）。
   - 構圖主體置中，四周留一點空白，方便放進卡片或裁切。
   
   1) 〔檔名〕.png：1536x1024。〔誰、在哪裡、正在做什麼、旁邊有什麼〕
   2) 〔檔名〕.png：1536x1024。〔畫面內容〕
   3) 〔檔名〕.png：1024x1024。〔畫面內容〕

   這幾件事不要交給 GPT

   • 中文字：GPT 畫中文常寫錯字。文字用 HTML 或簡報文字框疊上去，請 GPT 只畫底圖。
   • 品牌 logo、認證徽章：一律用官方原圖，不能生成假 logo。
   • Omnichat 後台畫面：用 docs.omnichat.ai 的真實截圖，客戶才看得出系統實際長什麼樣子。
   • 寫實人像：AI 感太重，客戶看了會出戲。改用扁平插畫人物。

下指令的公式

六種常見情境，照抄改括號

針對品牌（客戶官網網址）
與品牌顧問（姓名）的通話紀錄：
1. 目前用（競品）的應用偏少
2. 已加 LINE，先整理較新的功能和情境
3. 正在籌備新門市，OMO 會是方向
請針對這樣的情境與需求，整理一份能讓顧問願意了解、品牌願意買單的專案簡報。有生圖需求可以透過 GPT 處理。

（客戶官網網址）
幫我規劃這個客戶的 Demo 簡報。他們是高客單價的產品，重視顧客完整的會員旅程與體驗，目前以廣告導流為主，更在意線上和線下怎麼互相導流、分眾、再行銷。
方案以旗艦為基礎，上限是加入會員卡和自訂屬性。

針對（客戶名稱），幫我生成 HTML，協助我在他們會遇到的情境進行 Omnichat 機器人腳本的教學與說明。盡可能淺顯易懂，圖片生成找 GPT。

@（客戶提案 PDF）
幫我規劃：如果他們要在 11/11 前開始用，而且 11/11 要累積到分眾名單，排一份導入走期表，給我一頁。

@（跟客戶的 LINE 對話紀錄.txt）
針對這個客戶，目前應該怎麼跟進？

幫我查一下，（功能名稱）是否需要另外向 Omnichat 購買 API？

改版時這樣說

Rex 已經教會 Claude 的規則

這些規則是 Rex 在每個提案裡一條一條糾正出來的。下載規則包放進你的 CLAUDE.md，你的 Claude 第一天就會照做。

下載 Rex 規則包（CLAUDE.md）

Rex 的技能：跟 Rex 拿

技能是把固定流程打包好的指令，說出關鍵字 Claude 就會照流程做。下面這些在 Rex 的 Claude 帳號裡，你的帳號預設沒有。

另外還有報價（omnichat-quote-rex）、活動邀請（seminar-invite-rex）、Demo 前深度情報（deep-brand-collect）等，用法直接問 Rex。

1. 跟 Rex 拿技能的 ZIP 檔。
2. 在 Claude 點左側「自訂」（第 1 章開頭截圖的 ③）→「技能」→「＋」→ 上傳技能（Upload a skill），選 ZIP 檔。
3. 會寫進 Notion 或 HubSpot 的技能，要先在 Claude 連上你自己的帳號，再請 Rex 把技能裡的資料庫換成你的。

第一週練習：做完這 5 題就上手

1. 1

   問一個產品功能問題

   做好了

   合格標準：回答有附 docs.omnichat.ai 的連結；文件裡沒有的，Claude 會直說查不到。沒附連結，就是 CLAUDE.md 沒放好。

2. 2

   叫 GPT 畫一張情境插畫

   做好了

   合格標準：圖存在客戶資料夾的 _素材/gpt/，畫面沒有文字，人物是插畫風不是寫實照片。

3. 3

   用公式幫一個真實客戶做 Demo 簡報大綱

   做好了

   合格標準：順序是價值 → 為什麼現在 → 下一步；沒有放客戶方案以外的功能；成效數字有出處。

4. 4

   做一頁走期表，發成 Cloudflare 連結

   做好了

   合格標準：手機打得開，有三個大節點和「客戶要做的事」欄。

5. 5

   糾正 Claude 一次，叫它記住

   做好了

   合格標準：開一個新對話再做同一件事，它會照你剛教的做。

BONUS

用 Cloudflare 把 HTML 發成連結

HTML 做好後，用 Cloudflare Pages（免費）放上網路，就會得到一個 https://名稱.pages.dev 的網址。客戶用手機點開就能看，不用下載任何東西。

1. 1

   註冊 Cloudflare 帳號

   做好了

   到 dash.cloudflare.com 註冊免費帳號。不用綁網域、不用信用卡。

2. 2

   讓電腦登入 Cloudflare（只要一次）

   做好了

   這一步要你自己在終端機執行，因為瀏覽器會跳授權頁要你按同意：

   終端機複製

   npx --yes wrangler@4 login

   瀏覽器打開後按 Allow，看到授權成功就可以關掉。需要電腦已經裝 Node.js（沒有的話到 nodejs.org 下載安裝）。

   在瀏覽器登入 Cloudflare ≠ 終端機已授權就算你在 Chrome 已經登入 Cloudflare，終端機還是要跑一次這個指令。授權過期時，Claude 部署會失敗並提醒你重跑這個指令。
3. 3

   請 Claude 部署

   做好了
   貼給 Claude複製

   我已經用 npx --yes wrangler@4 login 登入 Cloudflare 了。請把這份 HTML 發到 Cloudflare Pages，專案名稱用 xxx-guide，加上 noindex 不要被搜尋引擎收錄。

   Claude 實際會執行下面兩個指令，你不用自己打。第一次要先建立專案（只有這次要加 --force）：

   第一次：建立專案複製

   npx --yes wrangler@4 pages project create xxx-guide --production-branch main --force

   之後每次更新，都是上傳整個網頁資料夾：

   每次更新：上傳資料夾複製

   npx --yes wrangler@4 pages deploy 網頁資料夾 --project-name xxx-guide --branch main --commit-dirty=true

   

4. 4

   打開連結檢查，再傳給客戶

   做好了

   網址是 https://專案名稱.pages.dev/。部署後每次也會產生一個帶亂碼的網址，那個剛建好時可能打不開，傳主網址就好。改版時請 Claude 再部署一次，連結不變，客戶重新整理就會看到新版。

   拿到連結的人都看得到不要放報價、合約、個資這類內容。給客戶的頁面加上 noindex 標記，Google 就不會收錄。