如何用 AI 幫你排版 Landing Page，產出能直接貼 CMS 的高轉換率 HTML？(附 1 個 Prompt + 6 種專業排版版型)

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

前四篇分別講了…

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

前四篇都在解決「圖片本身」的問題，也就是：

• 一張封面
• 一套圖卡
• 一段動畫
• 一整套 Landing Page 的配圖

圖片做出來了，但這時候你會發現一個新的問題…

「圖有了，但 Landing Page 還是做不出來。」

因為你還缺最後一塊拼圖：把圖片塞進去整頁的 HTML 排版裡，然後直接貼到你的 CMS (內容管理系統，例如 Wordpress, Ghost…等) 上線。

上一篇我用 ChatGPT 把 Landing Page 的配圖規劃完之後，原本以為剩下就是「組裝起來」這種小事而已。結果坐在電腦前一個小時，我發現做 Landing page 不是想像中那麼簡單阿！

我們會遭遇的問題可能有：

• Hero (最上方的大圖)，要左圖右文還是上文下圖？
• 痛點區四張圖要怎麼排，2×2 還是 1×4？
• 每個區塊要怎麼設計，才不會給讀者感覺很單調？

這篇就是我為了解決這個問題，研究出來的 Prompt。
(下面是最終成果，你會拿到一份完整的 Landing page HTML)

多數人做 Landing Page 排版的方式，是憑感覺

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

1. 圖片和文案都準備好
2. 打開 CMS (內容管理系統)編輯器
3. 一格一格慢慢拉、慢慢試
4. 預覽、調整、再預覽、再調整
5. 卡在某個區塊的時候，乾脆去抄別人家網站的排版

問題就出在第 3 步。

當你「憑感覺」排版的時候，整頁的每一個區塊都會用差不多的版型。Hero 是左圖右文，痛點區也是左圖右文，功能區還是左圖右文…讀者滑下來會覺得：「怎麼整頁都長得一樣？」

結果 Landing page 沒辦法發揮它的功效：引導讀者下單！
 

 

 

朱騏 (Henry)

職場寫作教練，提供一對一深度客製化的網路寫作課程。

幫助你提升寫作技巧，讓你在網路上被看見並吸引潛在客戶。

若想要獲得更多寫作秘訣，歡迎在下方訂閱我的電子報 👇