依照過去使用經驗整理・不用打指令

用講的,讓 Claude 幫你
做提案、教學和插圖

設定一次約 15 分鐘。之後跟 Claude 說一句話,它會查資料、叫 GPT 畫圖、做成網頁或簡報,還能發成連結給客戶。

需要:Claude 付費方案、ChatGPT Plus 以上 設定:3 步、約 15 分鐘
業務在筆電前工作,兩個 AI 小幫手分別遞上網頁版面和畫插圖
1怎麼讓 Claude 叫 GPT 生圖?
說一句,Claude 自己串好

Claude 會找到 ChatGPT 桌面版裡的 Codex(OpenAI 的命令列工具),在背景叫 GPT 畫圖、存進資料夾。不用 API key,也不用 MCP。實測 5 張插圖約 5 分鐘。

看原理和真實畫面 →
2專案資料庫怎麼建?
一個編號資料夾,Claude 幫你建

下載資料庫架構檔交給 Claude,它會建好 01–06 編號資料夾、檔案索引和整理規則。之後把資料丟進去、做錯時叫它「記住」,資料庫就會越用越懂你。

看設定步驟 →
3HTML 比簡報省多少 token?
少 4–6 成

同一份 8 頁內容實測,HTML 少用 38% token、時間少 59%;改版時少約 6 成。簡報光是轉成 Google 簡報一次,就花了 1,166 萬 token。

看實測數據 →
STEP BY STEP

開始設定:3 步,約 15 分鐘

你只要做下面 3 件事,其他都是 Claude 做:找到 Codex、帶你登入、照架構檔建好資料庫。過程中 Claude 要執行指令會先問你,按「允許」就好。

業務在筆電上下載並打開一個新的聊天 App
1

裝好 ChatGPT 桌面版並登入

到 chatgpt.com/download 下載,用 Plus 以上的帳號登入。叫 GPT 畫圖的 Codex 就在裡面。

業務把一張便條塞進筆電,螢幕裡的小機器人接住開始工作
2

在 Claude 貼上一段話

Claude 左上角點 </>,再點「+ 新增」,資料夾選「桌面」。按下面的按鈕複製,貼上送出。Codex 還沒登入的話,Claude 會給你網址和代碼,照著輸入就好。

業務把文件拖進資料夾,小機器人幫忙整理
3

把資料庫架構檔交給 Claude

下載架構檔,拖進 Claude 的輸入框,說「照這份幫我建立資料夾、README_索引.md 和 CLAUDE.md」。Claude 會建好編號資料夾、檔案索引和整理規則。

下載資料庫架構檔
看設定指令的完整內容
設定指令(第 2 步貼的就是這段)
請幫我完成「Claude × GPT 工作流」的初始設定。我不熟終端機,所有指令都請你執行。需要我動手或做決定時,先停下來用一句話告訴我要做什麼,等我回覆再繼續。

1. 找到 Codex(叫 GPT 畫圖的工具):依序找 codex 指令、~/.local/bin/codex、/opt/homebrew/bin/codex、ChatGPT 桌面版內建的 /Applications/ChatGPT.app/Contents/Resources/codex-cli/bin/codex。找到就確認 --version,並確認 codex features list 裡 image_generation 是 true(不是就執行 codex features enable image_generation,失敗就告訴我)。都找不到,就請我先安裝並登入 ChatGPT 桌面版(https://chatgpt.com/download/ ),裝好後再找一次。
2. 執行 codex login status。已登入就跳過;沒登入就在背景執行 codex login --device-auth,把網址和代碼給我(15 分鐘內有效),並告訴我畫面上「別人給你代碼就取消」的提醒是正常的。這個登入程序要一直在背景跑到我說好;中斷或代碼過期就重跑。(就算我在 ChatGPT 桌面版登入過,也以 codex login status 的結果為準。)
3. 用表格回報結果,最後提醒我下一步:到教學頁下載「資料庫架構檔」,拖進對話框交給你。
完成後按 ⌘Q 把 Claude 完全關掉再打開,點「+ 新增」,資料夾選桌面上的「我的業務資料庫」。之後每天都從這裡開始。先試一句:
貼給 Claude
用 GPT 畫一張 1536x1024 的扁平插畫:一位業務在咖啡廳用筆電和客戶視訊,紫色系,畫面不要有任何文字。存到 06_提案簡報_客戶專案/練習/_素材/gpt/。
設定好了嗎?三個檢查
  • Claude 最後的回報表格,每一項都是成功。
  • 新對話右側「環境」顯示「我的業務資料庫」。
  • 試畫的圖,大約 1 分鐘後出現在 練習/_素材/gpt/。
卡住的話先看常見問題,或把畫面截圖丟給 Claude 問「這是什麼意思」。
Claude 左上角:程式碼模式切換與新增對話12
實際畫面① 程式碼模式 ② 新增對話
Claude 對話右側的環境區塊,顯示目前開啟的資料夾 Omnichat_功能資料庫
實際畫面開好之後,對話右側的「環境」會顯示目前用的資料夾。
EVERY DAY

每天怎麼用:建議這樣跟 Claude 說

做出來的東西好不好,差在怎麼下指令、怎麼要求改版。下面依照過去使用者的經驗,整理出實際用過、效果好的說法(客戶名稱已拿掉),改掉括號裡的內容就能用。

業務跟小機器人說話,機器人面前有簡報、網頁和插畫

下指令的公式

① 客戶網址Claude 會自己去看官網、商品和社群
+
② 背景窗口是誰、剛聊了什麼、產業和客單價、在意什麼
+
③ 要什麼成品提案簡報、Demo 簡報、教學網頁、一頁走期、LINE 訊息、email
+
④ 範圍方案上下限、預算、這次不做什麼
+
⑤ 圖片找 GPT有這句,Claude 才會用第 1 章的方法配圖
少哪一塊,Claude 就會用猜的把背景講得像在跟同事交接一樣,成品就會越準。檔案(PDF、對話紀錄)直接拖進輸入框,或在輸入框打 @ 選檔案。

常見情境示範

通話後做提案簡報

剛跟品牌窗口聊完,要一份讓對方願意往上報的簡報
貼給 Claude
針對品牌(客戶官網網址)
與品牌顧問(姓名)的通話紀錄:
1. 目前用(競品)的應用偏少
2. 已加 LINE,先整理較新的功能和情境
3. 正在籌備新門市,OMO 會是方向
請針對這樣的情境與需求,整理一份能讓顧問願意了解、品牌願意買單的專案簡報。有生圖需求可以透過 GPT 處理。
接著常說:「整體文字量減少,多一點畫面或圖示說明」

Demo 前規劃簡報

已經約好 Demo,要依客戶產業設計重點
貼給 Claude
(客戶官網網址)
幫我規劃這個客戶的 Demo 簡報。他們是高客單價的產品,重視顧客完整的會員旅程與體驗,目前以廣告導流為主,更在意線上和線下怎麼互相導流、分眾、再行銷。
方案以旗艦為基礎,上限是加入會員卡和自訂屬性。
為什麼要寫範圍:Claude 才不會把客戶買不到的加購功能當主打。

給客戶的教學網頁

客戶簽約後要自己設定,需要看得懂的教學
貼給 Claude
針對(客戶名稱),幫我生成 html 協助我在他們會遇到的情境進行 omnichat 機器人腳本的教學與說明
情境上需要每個都有可以點的手機示範、流程圖、後台截圖和注意事項。
盡可能淺顯易懂,圖片生成找 gpt
完成後透過 cloudflare 給我可分享的連結
做出來的樣子:看下面的實際範例:希望綠豆湯。

改版時這樣說

你想要建議這樣說
縮小範圍「全部盤點,主要對應 FB,所有跟 LINE 相關的都先不用」
字太多「整體文字量減少,增加多一點畫面或圖示說明」
要真實畫面「請確保所有畫面都是 Omnichat 後台真實畫面」
插圖太假「人物改用示意插畫,寫實人像 AI 感太重」
文字像 AI 寫的「盤查所有文字,不能有 AI 感,要有真人感」
太複雜「看起來很複雜混亂,能否更簡單?呈現不限簡報,能完整呈現就好」
先別動作「先不用上傳,我自己看過再說」「只留下最新版的」
改版一次講完,最後叫它記住用 1. 2. 3. 條列,每點寫「哪一頁、改成什麼」。改到滿意後補一句「把這個做法記住」,下次開新對話就不用再講一次。

要發成連結給客戶

貼給 Claude
把這份 HTML 發成可以分享的連結,專案名稱用(英文名稱)-guide,加上 noindex。
你要做的
  • 第一次發連結時,Claude 會請你註冊 Cloudflare(免費)並在瀏覽器按 Allow 授權,之後一句話就好。
  • 連結任何人拿到都打得開,不要放報價、合約、個資。
Claude 對話實際畫面:執行 wrangler pages deploy 並回報網址
實際畫面這份教學頁就是這樣更新的:一句話交代,Claude 部署完回報網址。
REAL CASE

實際範例:希望綠豆湯 LINE 機器人教學

這是給已簽約客戶的教學網頁。整份是用下面這段話跟 Claude 說出來的:插圖由 GPT 畫,後台畫面用官方文件的真實截圖,做完直接拿到 Cloudflare 連結傳給客戶。

對應的 prompt(換掉客戶名稱就能用)
針對希望綠豆湯,幫我生成html協助我在他們會遇到的情境進行omnichat機器人腳本的教學與說明
情境上需要每個都有可以點的手機示範、流程圖、後台截圖和注意事項。
盡可能淺顯易懂,圖片生成找gpt
完成後透過cloudflare給我可分享的連結
  • 可以點的手機示範每個情境一支手機,按下去對話會一步步跑出來
  • 流程圖「腳本怎麼排」把觸發、模組、下一步畫成圖
  • 後台截圖「後台這樣設定」用官方文件的真實畫面,附編號步驟
  • 注意事項每個情境最後一段「設定時要注意」
  • 圖片生成找 gpt情境插畫、商品圖都是 GPT 畫的
  • cloudflare 連結hemung-line-bot-guide.pages.dev,客戶用手機直接打開
打開希望綠豆湯成品 →
希望綠豆湯 LINE 機器人教學首頁:標題、情境插畫,以及 7 個常遇到狀況的入口
實際成果成品首頁:客人最常遇到的 7 個狀況,點了直接跳到對應情境
WHY HTML

製作一份簡報 vs 網頁:消耗減少 4–6 成

做了兩種比較:同一份內容讓兩個 Claude 各做一次,以及翻出過去 10 天的實際工作紀錄。結論是一樣的:教學、會後補充這類內容做成網頁,比做簡報省很多。

天平左邊是厚厚一疊投影片,右邊是一個輕盈的網頁
−38%
同一份 8 頁內容,從零做到檢查完,HTML 少用的 token
−59%
改版一次少用的 token(過去 10 天實際紀錄的中位數,跟比較一的「時間少 59%」是不同的數字)
95.8%
所有 token 裡,花在「重讀前面對話」的比例
不管做哪一種,這 5 個習慣都能省 token
  • 需求一次講完整:改版次數是最大的成本,先講清楚對象、重點、頁數和不要的東西。
  • 換主題就開新對話:同一個對話越長,每一步要重讀的就越多。
  • 從範本和舊腳本改:叫 Claude 拿 _scripts 裡做過的檔案改,不要從零開始。
  • 只檢查改到的地方:跟 Claude 說「只看第 5 頁」,不用每次全部重看。
  • 大檔先轉成速查 md:價格表、官方文件整理一次,之後都查 md。
看完整實測數據

比較一:同一份內容,各做一次

內容是 8 頁的「留言自動私訊」說明,兩邊的文字、圖片、配色和字級規定完全一樣。兩個 Claude 同時從零開始做,做完都要轉成圖片逐頁檢查,最多修兩輪。下面是兩邊實際做出來的成品:

簡報組做出的 8 頁投影片縮圖
簡報組python-pptx 產生 16:9 投影片,用 PowerPoint 匯出 PDF 再轉圖檢查
HTML 組做出的 8 個區塊截圖
HTML 組單一 HTML 檔,用瀏覽器截圖檢查(另外多看一張手機版)
簡報HTML差多少
呼叫模型次數22 次17 次少 5 次
檢查時看的圖22 張19 張(含手機版)少 3 張
累計讀取的 token257 萬159 萬少 38%
換算 API 費用 *約 US$1.24約 US$0.87少 30%
花費時間8 分 50 秒3 分 39 秒少 59%
寫出的程式碼19.2 KB17.9 KB差不多

* 以 Claude Opus 5.5 的 API 價格換算:輸入每百萬 token US$4、寫入快取 US$5、讀取快取 US$0.2。用 Max 這類月費方案不會另外收費,但 token 用得越多,越快碰到用量上限。兩邊寫出的程式碼量差不多,所以差距幾乎都在「讀」。

比較二:過去 10 天的實際工作紀錄

改版一次(中位數)

多頁簡報
1,435 萬
HTML 教學頁
584 萬

交付一次

轉 Google 簡報
1,166 萬
發 Cloudflare
515 萬

簡報取 4 個客戶提案共 14 次改版,HTML 取 1 份客戶教學頁的 5 次改版。Cloudflare 那次是第一次部署,包含處理建專案的錯誤;之後每次更新只要一個指令。這些內容和對話長度都不一樣,不算嚴格對照,但結果跟比較一是同一個方向。

DETAILS

進階說明

想知道背後怎麼運作,或要自己調整時再看。日常使用不用讀。

GPT 生圖是怎麼串起來的
依照過去使用者經驗:一句話就設定好,一個指令都不用打
  1. 10/12
    使用者在做提案時順口說:有生成圖片需求時,可以透過 gpt 生成
  2. Claude
    自己找電腦裡有沒有 codex 指令,接著在 ChatGPT 桌面版裡找到內建的 Codex,確認版本和參數後,在背景生了 2 張提案用的圖,約 2 分鐘。
  3. 10/20
    使用者說:所有需要圖片的時候都由 GPT 處理,請 Claude 記住。之後不用再提醒,Claude 每次都會自己叫 GPT。

Codex 能直接用,是因為使用者已經在 ChatGPT 桌面版登入,命令列的 Codex 共用同一個登入。內建的 Codex 放在 ChatGPT 桌面版裡面(…/codex-cli/bin/codex),交給 Claude 去找就好,不用記路徑。

Claude 對話實際畫面:執行 codex 版本、登入狀態、生圖功能檢查並回報三項正常
實際畫面示範電腦上 Claude 自己跑檢查、再用一句話回報結果。指令是 Claude 打的,你只要看最後那句。

本頁插圖實際怎麼做出來的

Claude 對話畫面:寫入提示詞檔,接著在背景執行 codex exec12
Claude 右側面板:輸出內容與背景任務3
實際畫面這份教學製作時,Claude 叫 GPT 畫「常見問題」插圖的過程(左邊的對話清單有客戶名稱,已裁掉)。
  • 1Claude 先寫好提示詞檔 prompt_faq.txt,綠色是剛寫入的內容:配色、角色、檔名和尺寸。
  • 2接著在背景執行 codex exec … - < prompt_faq.txt,Codex 讀檔案裡的需求去畫圖。
  • 3右側「背景任務」顯示 GPT 正在畫圖。這段時間 Claude 可以繼續做別的事,畫好會自動通知它。
  1. Claude 先寫提示詞檔:把 5 張圖的用途、風格、色碼、角色造型、檔名尺寸寫進 prompt.txt。
  2. 在背景叫 Codex:Claude 不用等,同時去做別的事(這次它一邊等圖,一邊跑 token 實驗)。
  3. 完成後 Claude 逐張檢查:看有沒有冒出文字、角色是否一致,不合格的只重畫那一張。
  4. 壓縮後放進成品:轉成 1200px 寬的 WebP,每張約 50KB,網頁開起來才快。
Finder 圖庫模式顯示 GPT 生成的插圖,右側顯示尺寸 1536×1024
實際畫面生好的圖會存在指定的資料夾。用 Finder 的圖庫模式就能直接預覽,右邊會顯示尺寸 1536×1024。prompt.txt 也留在同一個資料夾,下次要改圖直接改這個檔。
本頁的 5 張插圖就是這樣做的5 張 1536×1024 插圖,從送出到全部完成共 4 分 52 秒,平均每張不到 1 分鐘。後來補的「常見問題」插圖,提示詞裡寫了「以 hero.png 當角色參考」,所以同一個業務角色和小幫手能貫穿全部插圖。
專案資料庫的結構,和讓它越用越好用的方法
完整架構在資料庫架構檔裡資料夾、客戶資料夾內部、索引、命名規則、整理規則都寫在檔案裡。下載資料庫架構檔,拖給 Claude 說「照這份幫我建立資料夾、README_索引.md 和 CLAUDE.md」,就能建出一樣的架構。

資料庫由 6 個部分組成

📘
CLAUDE.md:工作規則放在資料夾最上層,Claude 每次開對話都會先讀。寫查找順序、語言、字級、檔案放哪。
🗺️
README_索引.md:檔案地圖每個資料夾放什麼、什麼情況要查哪個檔。Claude 先看地圖再找檔案,不用每次全部翻一遍。
🗂️
編號資料夾:原始資料01 價格、02 模組簡報、03 API、04 案例、05 範本、06 客戶專案。編號讓順序固定、好溝通。
⚡
速查 md:給 Claude 讀的版本把 PDF、簡報整理成 markdown 速查表。Claude 讀 md 比讀 PDF 準、也省 token。
🧩
_scripts:做過的模具產生簡報、網頁的腳本留下來。下次同類型的案子,Claude 改舊腳本,不用從頭寫。
🧠
記憶與技能記憶存你的偏好(例如「簡報少字多圖」);技能存固定流程(例如報價、GPT 生圖)。這兩個放在資料夾外,Claude 自動管理。

實際的資料夾長這樣

Finder 列表顯示資料夾最上層:_scripts、_to_delete、01 到 08 資料夾、CLAUDE.md、README_索引.md
實際畫面示範電腦的資料夾最上層。檔名前面的編號讓順序固定,跟 Claude 溝通時說「06 那個資料夾」它就知道。
Omnichat_功能資料庫/ ├─ CLAUDE.md ← 工作規則(每次對話自動讀) ├─ README_索引.md ← 檔案地圖,新增檔案要同步更新 ├─ 01_價格方案/ ← 價格表 PDF+結構化速查 md ├─ 02_產品模組簡報/ ← 官方各模組簡報 ├─ 03_API開發文件/ ← API 速查(業務版)、文件存檔 ├─ 04_合作客戶案例/ ← 客戶名單、案例頁、logo 素材 ├─ 05_提案簡報_範本參考/ ← 完整提案,當版型與截圖素材 ├─ 06_提案簡報_客戶專案/ │ └─ <客戶名>/ ← 一個客戶一個資料夾 │ ├─ _素材/gpt/ ← GPT 生的圖+prompt.txt │ ├─ 提案簡報.pptx │ └─ 教學.html ├─ 07_AI客服知識庫/ ├─ 08_工作流程教學/ ← 這份教學 ├─ _scripts/ ← 產生簡報/網頁的腳本 └─ _to_delete/ ← 暫存,確認後再刪 資料夾外(Claude 自動管理): ~/.claude/projects/<資料夾>/memory/ ← 記憶:你的偏好、各客戶進度 ~/.claude/skills/ ← 技能:gpt-image、報價、開發信…

讓資料庫越用越好用

資料夾建好後,把手邊的價格表、模組簡報、客戶名單、做過的提案全部拖進去,再依序跟 Claude 說:

貼給 Claude
這個資料夾是我的業務資料庫。請先看過所有檔案,提出分類,列出每個檔案要搬去哪個編號資料夾。先給我看清單,我確認後再搬。
貼給 Claude
把 01_價格方案 裡的價格表 PDF 整理成「價格表結構化.md」:每個方案的價格、內含功能、加購項目,做成表格。之後報價先查這份。
貼給 Claude
讀 https://docs.omnichat.ai/llms.txt 拿到全站頁面清單(每一頁都附 .md 網址),把常用的功能頁和最新的 release note 下載到資料庫裡的「官方文件」資料夾,並更新 README 索引。
貼給 Claude
記住:簡報的字太多了,以後少字多圖,細節放備註。

依情境產出:跟 Claude 這樣說

你要的跟 Claude 說Claude 會用到交付形式
情境示意圖「做 3 張客人在 LINE 領優惠券的情境插畫,用 GPT 生成,配色照客戶官網」gpt-image 技能、客戶官網色碼PNG/WebP
操作教學「幫這個客戶做 LINE 機器人設定教學 HTML,後台畫面用 docs 真實截圖,要淺顯易懂」docs .md、真實截圖、HTMLCloudflare 連結
提案簡報「用 05 的範本做這個客戶的提案,順序是價值、為什麼現在、下一步」範本、價格速查、案例名單pptx → Google 簡報
會後補充/FAQ「把今天會議客戶問的 8 題整理成可分享網頁,附官方文件連結」會議紀錄、docsCloudflare 連結
維護習慣:每週請 Claude 整理一次「檢查資料夾最上層有沒有散落的檔案、README 有沒有漏列、_to_delete 裡哪些可以刪,列給我確認。」刪檔前一定要你確認,Claude 不會自己刪。
發連結(Cloudflare Pages)的細節
  • 帳號免費:dash.cloudflare.com/sign-up,不用綁網域、不用信用卡。
  • 在 Chrome 登入 Cloudflare,不等於這台電腦已經連上。第一次發連結時,Claude 會在背景跑授權,你在瀏覽器按 Allow。授權頁列出的一長串權限是 Cloudflare 工具的標準授權。
  • 網址是 https://專案名稱.pages.dev/。部署後另外會有一個帶亂碼的網址,剛建好時可能打不開,傳主網址就好。
  • 改版時說「改好了,幫我重新部署」,連結不變,客戶重新整理就看到新版。
  • 給客戶的頁面請 Claude 加上 noindex,Google 就不會收錄。
整套流程怎麼串起來
你說一句需求「幫健身房客戶做一份 LINE 機器人教學網頁,圖片找 GPT」
Claude讀規則、查資料、寫成品先看 CLAUDE.md 和索引,再到對應資料夾找價格、案例、官方文件
Codex+GPT畫插圖Claude 寫好提示詞,在背景叫 Codex 用 GPT 生圖
專案資料夾存圖、存成品圖片和 HTML 都放進這個客戶的資料夾,下次直接改
Cloudflare發成連結一行指令上傳,客戶用手機點開就能看
FAQ

常見問題

設定或使用時卡住,先看這裡。

業務頭上有三個問號,小幫手舉起打勾的卡片
Claude 說找不到 codex 指令
跟 Claude 說「codex 找不到,幫我重新安裝,或改用安裝位置的完整路徑」。剛裝好時,有時要把 Claude 按 ⌘Q 重開才找得到。
Claude 叫 Codex 時出現 Not logged in
Codex 的登入過期了。跟 Claude 說「幫我重新登入 Codex」,它會給你網址和代碼。登入頁上「如果是別人給你代碼就取消」的提醒是正常的,因為是你自己要登入。
Claude 一直問我要不要允許
這是保護機制,Claude 執行指令、存檔、上網下載前都會先問。看一下它要做的事是不是你交代的,是就按允許;不確定就按拒絕,再問它「這一步在做什麼」。
要用 MCP 把 Codex 接到 Claude 嗎?
不用。Claude 是直接執行 codex exec 指令叫 Codex,OpenAI 也已經移除了「把 Codex 當 MCP 伺服器」的功能(官方說明)。Codex 自己可以接 Notion 等 MCP 工具,那是 Codex 用的,跟 Claude 叫 Codex 是兩件事。
生圖會花多少錢?
用 ChatGPT 帳號登入時,不會另外收費,但會用掉方案裡的 Codex 額度,需要 Plus 以上。OpenAI 官方說明,生圖用掉額度的速度約是一般對話的 3–5 倍。一般提案一次 5–10 張不太會碰到上限;一次要生上百張,再考慮改用 API 計費。
圖片存到哪裡去了?
Codex 先存在 ~/.codex/generated_images/,再複製到你指定的資料夾。找不到時直接問 Claude「剛剛那張圖存在哪」。
GPT 畫出來的圖有文字或錯字
跟 Claude 說「重畫第 2 張,畫面不要有任何文字,螢幕和招牌用色塊表示」。需要文字的地方,請 Claude 用 HTML 或簡報文字框疊上去。
Windows 也能用嗎?
可以。設定指令一樣能用,Claude 會自動改用 Windows 的路徑和安裝方式。
放在 pages.dev 的網頁安全嗎?
網址不公開列出、加了 noindex 也不會被 Google 收錄,但只要拿到連結的人都能看。報價、合約、客戶個資不要放在網頁上,改用 email 附件或雲端硬碟權限分享。