怎麼用 ChatGPT Image 2.0 製作出日系專業 Landing Page 圖片？(附 3 階段互動式 Prompt)

這篇是 <怎麼用 Gemini Nano Banana 做出日系專業設計師等級的課程 Banner> 系列文的第四篇。

前三篇分別講了…

• 第一篇：教你怎麼用 Gemini 做出有日系質感的課程 Banner
• 第二篇：教你怎麼把知識型文章轉化成一套有敘事邏輯的知識圖卡
• 第三篇：教你怎麼把文字段落變成一段會動的 Motion 動畫

這三篇都在解決「單一視覺需求」，也就是：

• 一張封面
• 一套圖卡
• 一段動畫

目標明確、範圍清楚。

但這一篇要處理的問題不太一樣。

前陣子我在重做自己的 Landing Page，弄到一半就卡住了。文案我寫得出來、結構也排好了，但配圖怎麼弄都怪怪的。每個區塊隨便丟一張圖庫的圖，整頁滑下來就是七拼八湊、毫無一致性。

這是我才發現到…

Landing Page 的配圖不只是「生一張好看的圖」這麼簡單，原來整套頁面需要有一致的視覺策略。

這篇就是我研究出來的解法。

因為寫這篇文章的當下真實的 Landing page 還在製作，我先讓你看圖片的模擬成果：

多數網路課程的 Landing Page，配圖都是後補的

我在網路上看到有人開課，都會特別去觀察他的 Landing page 怎麼做。

我常看到某個產品的 Landing Page，整頁滑下來覺得：「文案蠻打中我的，但這頁面看起來怎麼有點…廉價？」

通常問題就出在配圖。

大多數人做 Landing Page 的流程是這樣：

1. 先把文案寫好
2. 每個段落排版排好
3. 最後才想到「對唷，要配圖」！！！

然後就上 Unsplash、Pexels 隨便抓幾張看起來相關的圖，丟進去填空。 (我以前就是這樣做…)

這樣做出來的 Landing Page，每一張圖看起來都不連貫：

• 色調不統一，有的暖色系有的冷色系
• 構圖風格亂跳，有的是實拍照、有的是插畫、有的是 3D 渲染
• 圖片跟旁邊的文案沒有真正的關係，純粹是「裝飾」

讀者滑過去會感覺：「怎麼圖片長的都不太一樣？」

更慘的是，連自己也說不出「開頭區應該放什麼圖、痛點區應該放什麼圖、功能說明區應該放幾張圖」這些問題的答案。

這個 Prompt 讓 AI 變成你的 Landing Page 視覺顧問

想像一下：

如果你身邊有一位日本資深的數位視覺設計師，他不只幫你生圖，還會先讀你的 Landing Page 文案，告訴你「Hero 區需要一張主視覺、痛點區可以省略、功能說明區應該拆成三張連續圖」，然後才開始畫。

你不用煩惱要配幾張圖、放哪裡、什麼比例、什麼風格，他全部幫你想好。

這個 Landing Page 配圖 Prompt 就是在做這件事。

它讓 AI 用「設計思考」的方式拆解你的 Landing Page。

先從轉換漏斗的角度判斷哪些區塊最需要視覺強化，再跟你討論每個區塊要幾張圖，最後才進入風格校準和圖片Prompt 撰寫。

整個流程是分三個階段工作的：

• 第一階段：判斷哪些區塊需要插入圖片（區塊清單）
• 第二階段：跟你討論每個區塊的圖片數量（數量確認）
• 第三階段：校準視覺風格，一次產出所有圖片的 Prompt

這跟你直接叫 AI「幫我做一套 Landing Page 的圖」差很多。

因為它會先幫你做視覺策略，再生圖。

每張圖都為了提升轉換率

Landing Page 上的每一張圖，都應該對應一個明確的「閱讀停留點」與「情緒推進任務」。

舉個例子：

• Hero 區 (Landing page 最大張的那張圖)的圖任務是「在三秒內抓住注意力」
• 痛點區的圖任務是「讓讀者覺得這說的就是我」
• 功能區的圖任務是「把抽象的功能視覺化」

每個區塊的圖都有自己的工作。

而每一張 Prompt 都會包含五個層次的設計指令：

• 主視覺內容（主體物件、場景、氛圍）
• 色彩計畫（主色、輔色、光感）
• 構圖與視角
• 風格參考
• 規格與比例

這跟前三篇的 Nano Banana 指令是同一套設計邏輯，你如果忘記了就去複習一下第一篇文章。

用結構化的模組精確定義每張圖，AI 就不需要猜照著做就對了。

而且因為三階段流程都有「跨區塊一致性」的要求，所以最後產出的所有 Prompt，色系、光感、設計語彙會自動統一。

整頁 Landing Page 滑下來不會再有七拼八湊的感覺。

順帶一提：這篇我們改用 ChatGPT 來實作

在進入實作步驟之前，我想先補充一個工具切換。

前三篇我們用的是 Gemini 的 Nano Banana。但自從 OpenAI 在 2026 年 4 月中推出 ChatGPT Image 2.0 之後，我做了一輪測試…

發現 ChatGPT Image 2.0的生圖品質和速度都比 Nano Banana 好很多。前三篇文章的所有 Prompt，用 ChatGPT 都可以直接實作，效果甚至更好。

所以這一篇開始，我會主要使用 ChatGPT 來示範。

如果你也想用 ChatGPT 來跑這個 Landing Page 配圖 Prompt，記得要把「思考模式（Thinking）」打開。

打開的方式很簡單：

1. 在 ChatGPT 的對話框旁邊點開「+」選單（或叫做工具選單）
2. 裡面會看到「Thinking」這個選項
3. 點下去就會進入思考模式

「朱騏，為什麼一定要開思考模式？」

因為這個 Landing Page 配圖 Prompt 是分三階段互動的，需要 AI 真正讀懂你的文案、判斷區塊、規劃視覺策略。

如果用一般的 Instant 模式，它很容易跳過分析直接生圖，整個流程的價值就沒了。

Thinking 模式雖然回應慢一點點，但每一階段的輸出品質會穩定非常多。

工具切換好之後，我們就可以進入實作流程了。

整個流程只有 4 步，但思考層次完全不一樣

Step 1. 把你的 Landing Page 內容準備好

可以是文字稿、區塊結構描述、或現有頁面的截圖文字，愈完整愈好。

如果你還沒有 Landing Page 文案，可以先用我之前的這篇文章來規劃：<如何寫出高轉換率的文案頁面 (Landing page)？用這 14 個區塊，讓你的文案頁面轉單率飆升>。

Step 2. 把 Prompt 貼到 ChatGPT，等它讀完內容

打開 ChatGPT，先在對話框旁邊的「+」選單裡把「Thinking」模式打開（付費用戶可以直接從模型選擇器選「GPT-5.5 Thinking」），然後把這個 Prompt 完整貼上去。

ChatGPT 會請你提供 Landing Page 內容。

把你的 Landing Page 內容全部貼給它後，它會進入第一階段，給你一份「區塊優先順序表」。

Step 3. 跟它互動完三個階段

這是這個 Prompt 跟前三篇最大的差別。

它不會一口氣把所有東西丟給你，而是分三次互動：

1. 先確認哪些區塊需要圖片
2. 再確認每個區塊要幾張圖、什麼比例
3. 最後確認視覺風格方向（如果你沒概念，它會給你三組差異化提案）

這個過程看起來多了幾步，但好處是…

每一張圖都是你親自決策過的，不會生出一堆你不想要的東西。

Step 4. 拿 Prompt 去 ChatGPT Image 2.0 生圖

當風格確認後…

它會一次給你所有圖片的完整 Prompt，每一個都用 Codeblock 包住。

這時候請在 ChatGPT 點擊「新的對話」開新聊天室（避免前面的策略討論干擾生圖結果），一樣把「Thinking」模式打開，然後把剛才產出的 Prompt 一張一張貼進去。

ChatGPT Image 2.0 在 Thinking 模式下會自動處理生圖，不需要再切換什麼工具或模型。

整套圖出來後，整頁 Landing Page 的視覺一致性會讓你嚇到。

備註：如果你覺得太抽象，這裡有我完整的對話記錄可以查看：朱騏使用 ChatGPT 生成 Landing Page 的完整記錄

完整 Prompt 公開

下面這個就是我研究出來的完整 Prompt，直接複製到 ChatGPT 就能用：