前面我們已經用 GPT Image 2.0 做過社群素材、品牌視覺、角色IP、資訊圖表與知識圖譜。
接下來，可以把這些能力再往實際工作推進一步：直接用 AI規劃一個網頁畫面。
例如你準備推出一門課程、一項顧問服務、一個新產品，或舉辦一場活動，在真正開始寫網站之前，可以先讓 GPT Image 2.0 把整個頁面的視覺方向做出來。
這類圖片通常可以當成 Landing Page 視覺稿、網站首頁概念稿、活動報名頁、商品介紹頁、課程介紹頁、服務介紹頁或手機版網頁Mockup。
它最大的價值，不是直接取代網頁設計或前端開發，而是讓原本停留在腦中的想法，快速變成一張可以討論的畫面。
1.先想頁面要完成什麼任務
設計 Landing Page 時，更重要的問題是：使用者來到這個頁面之後，我希望他做什麼？
課程頁希望讀者了解課程並報名；顧問服務頁希望潛在客戶了解服務並預約諮詢；產品頁希望消費者理解產品特色並購買；活動頁希望訪客了解時間、地點與內容後完成報名。
| 頁面類型 | 課程、產品、活動、服務、品牌首頁 |
| 頁面目標 | 報名、購買、預約、了解更多 |
| 目標使用者 | 這個頁面主要給誰看 |
| 核心訊息 | 最重要的標題與價值主張 |
| CTA | 希望使用者採取什麼行動 |
| 視覺風格 | 專業、溫暖、極簡、生活感 |
| 裝置 | 桌面版、手機版 |
基本提示詞可以整理成：
【頁面類型】＋【頁面目標】＋【目標使用者】＋【核心訊息】＋【頁面結構】＋【視覺風格】＋【裝置尺寸】
實戰案例一：線上課程介紹頁
提示詞
設計一個 AI 圖像應用線上課程的 Landing Page 視覺稿。
使用桌面版網頁構圖，寬度 1440 px。
這個頁面主要給沒有設計背景，但希望學會使用 AI 製作圖片的內容創作者與一般工作者。
頁面主要目標：讓訪客快速了解課程內容，最後進一步查看課程資訊。
頁面由上到下分成五個主要區塊。
第一區 Hero：
主標題：不用設計基礎，也能開始用 AI 做圖
副標題：從需求、提示詞到修改，建立一套真正能用的 AI 圖像工作流程
右側放置簡潔的 AI 圖像創作情境插畫。
CTA 按鈕：查看課程內容
第二區：你可能遇到的問題
不知道提示詞怎麼寫
生成結果和想像差很多
圖片漂亮卻不知道怎麼實際使用
第三區：你會學到什麼
需求整理
提示詞設計
圖片修改
實際應用
第四區：課程適合誰
內容創作者
行銷工作者
自由工作者
想學 AI 圖像應用的一般使用者
第五區：
再次呈現課程重點與 CTA 按鈕。
整體採用溫暖、乾淨、具有知識感的現代網頁設計。
背景以米白色為主，搭配低飽和綠色、淺藍色與少量暖橘色。
使用大量留白與圓角卡片。
不要使用強烈促銷紅色。
不要倒數計時。
不要製造限量名額或焦慮感。
不要使用誇張收入數字。
使用繁體中文。
整體看起來像一個可信、舒服、專業的台灣知識型品牌網站。
實戰案例二：產品介紹頁
提示詞
設計一個智慧健康手環的產品 Landing Page 視覺稿。
桌面版網站，寬度 1440 px。
產品名稱：Pulse One
核心概念：讓每天的健康狀態更容易理解
第一區 Hero：畫面中央偏右放置智慧手環產品。左側放置產品名稱、核心標題、簡短產品說明。兩個 CTA 按鈕：了解功能、查看規格。
第二區：三個主要產品特色：睡眠紀錄，心率監測，日常活動追蹤
第三區：呈現使用者在工作、運動、睡眠三種生活情境中使用產品。
第四區：簡潔呈現產品規格與相容裝置。
第五區：產品主視覺與 CTA。
整體採用現代、極簡、高質感的產品網站設計。
背景以暖白色與深灰色為主，搭配少量低飽和藍色。
大量留白，資訊層級清楚。
不要過度使用科技光效。
不要霓虹燈。
不要賽博龐克。
不要讓畫面像電商促銷頁。
使用繁體中文。
實戰案例三：台灣實體活動報名頁
提示詞
設計一個台灣 AI 創作者交流活動的手機版 Landing Page 視覺稿。
手機直式構圖，頁面寬度 390 px。
活動名稱：AI 創作者交流夜
活動地點：台北
第一區：活動名稱，一句簡短活動介紹，活動日期，台北城市生活感的主視覺插畫，CTA 按鈕：我要報名
第二區：這場活動會聊什麼，AI 內容創作，個人品牌，實際工作經驗
第三區：活動資訊，日期，時間，地點，參加方式
第四區：講者介紹
第五區：活動地點與交通資訊。
第六區：再次放置報名 CTA。
整體採用溫暖、現代、有設計感的活動網站風格。
背景使用米白色，搭配深灰色、低飽和綠色與暖橘色。
具有台灣城市生活感。
不要使用大型倒數計時。
不要使用限量搶購文字。
不要使用金色奢華商務風。
不要做成大型企業峰會風格。
不要加入不存在的贊助商 Logo。
使用繁體中文。
手機版和桌面版，不只是尺寸不同
手機版不是把桌面版縮小而已。桌面版通常可以左右分欄、同時呈現較多資訊、使用大型主視覺；手機版則更適合單欄閱讀、內容由上往下排列、CTA 按鈕更明顯。
手機版提示詞補充
這是一個手機版網頁。
請使用單欄式版面。
所有內容按照閱讀順序由上往下排列。
避免桌面版的左右多欄結構。
主要 CTA 按鈕要容易點擊。
標題、內文與按鈕要有清楚的視覺層級。
不要因為資訊太多而縮小文字。
桌面版提示詞補充
這是一個桌面版網站。
寬度 1440 px。
可以使用左右分欄與多欄卡片。
Hero 區保留大型主視覺。
頁面左右保持足夠留白。
主要內容集中在中央閱讀區域。
2.先生成整體，再修改單一區塊
第一次生成 Landing Page 時，不需要期待 AI 一次把所有細節做到完美。
比較適合的方式是：頁面方向 → 頁面結構 → 區塊內容 → 視覺細節
修改時可以這樣寫：保持目前整體頁面風格與其他區塊不變。只修改 Hero 區。放大主標題。
減少右側插畫元素。讓 CTA 按鈕更明顯。增加標題周圍留白。不要修改下面其他頁面區塊。
不要每次重做整張圖，只修改有問題的地方。
AI 產生的是視覺稿，不等於真正的網站
GPT Image 2.0 產生的 Landing Page 圖片，本質上仍然是一張視覺設計稿。
它可以幫助你快速確認版面方向、配色、內容層級、Hero 區、CTA 位置、圖片風格與整體品牌感。
但圖片裡的按鈕不能真的點擊，表單不能真的送出，選單也不會自動變成網站功能。
比較實際的工作方式是：需求 → AI 視覺稿 → 確認版面 → 網頁製作 → 實際測試
當視覺方向確定後，再交給前端工程師、網站製作工具或 AI 程式開發工具，把畫面真正做成可以操作的網頁。
本章重點
Landing Page 設計的核心，是先想清楚：這個頁面希望誰來看，以及看完之後希望他做什麼。
接著再決定：頁面目標 → 核心訊息 → 內容順序 → CTA → 視覺風格 → 裝置版型
GPT Image 2.0 很適合把這些原本停留在文字與想像中的內容，快速轉成可以討論的網頁視覺稿。
對許多台灣品牌、創作者與專業服務來說，資訊說清楚、讓人看得舒服、知道下一步要做什麼，往往更加重要。