01 · 一句話做一個落地頁

速覽

產出	單檔案 HTML 落地頁
用時	15 到 30 分鐘
型別	「Prototype」
難點	不在生成，在於你能不能說清楚賣什麼給誰

場景

要給一個產品、一個功能、一次活動做一個能看的頁面。可能是拿去驗證想法，可能是給客戶看方案，也可能就是內部要一個說明頁。

提示詞

做一個落地頁。

產品：[一句話說清楚它是什麼]
受眾：[誰會用它，他們現在怎麼解決這個問題]
這一頁要讓他們相信：[一句話]
主行動：[你要他們點什麼]

頁面結構：
1. 首屏 —— 價值主張 + 單一主行動
2. [第二段的內容]
3. [第三段的內容]
4. [……]
5. 頁尾行動區

語氣：[用一個參照物，比如「像一份內部備忘錄」]

約束：
- 所有數字如果沒有真實來源，寫佔位符並標註，不要編
- 不要漸變背景，用設計系統裡的實色
- 圖示必須對應具體功能，沒有對應的就用文字
- 按鈕要有 hover、focus、disabled 三個狀態
- 手機寬度下不能有橫向滾動

為什麼這麼寫

「他們現在怎麼解決這個問題」比「他們是誰」重要。 這句話決定了首屏該怎麼寫——如果他們現在有一個湊合的辦法，你要說的是「有更好的」；如果他們現在完全沒辦法，你要說的是「這件事可以做了」。兩種寫法完全不同。

「這一頁要讓他們相信」只能有一句。 寫三句的話，頁面會變成三個並列的板塊，觀眾記不住任何一個。

下面那五條約束是通用的。 它們對應的是 AI 生成頁面最常見的五個毛病。寫一次就行，後面每次都能複用。

驗收清單

• [ ] 首屏那句話，一個不瞭解產品的人能不能看懂
• [ ] 主行動是不是唯一的、顯眼的
• [ ] 每一段是不是在推進說服，還是在羅列功能
• [ ] 所有數字有來源，或者標了示意
• [ ] 按鈕三個狀態都在
• [ ] 手機寬度下沒有橫向滾動
• [ ] 對比度過 WCAG AA
• [ ] 沒有紫藍漸變、通用圖示、編出來的使用者數

變體

做多語言版

在當前頁面基礎上做一個英文版，不要直譯。

英文版要按英文讀者的習慣重寫：句子更短，行動號召更直接，
不要保留中文那種鋪墊式的開頭。

兩個版本共用同一套設計系統和佈局。

做 A/B 兩個方向

用同樣的內容做第二個版本，首屏換一個角度：
現在這版是從「省時間」切入，第二版從「不會出錯」切入。

其餘結構不變，方便對比。

從已有頁面改

這是我們現在的落地頁 HTML。請診斷它有哪些問題，按嚴重程度排序，
然後按你的診斷改一版。

診斷要給出具體證據，不要泛泛說「視覺層次不清」。

常見問題

生成出來太長，滾不到底。

在提示詞裡限定屏數：「整頁控制在 5 屏以內，桌面 1440 寬度下」。不限定的話它傾向於把每個段落都做得很飽滿。

三個功能被排成三張卡片，但其中一個明顯更重要。

明確說出來：「第二個能力是核心差異點，給它比另外兩個更大的視覺分量，不要三欄等分」。

文案很空。

這通常不是生成的問題，是你給的輸入裡就沒有具體的東西。補上真實的細節——一個具體的使用場景、一個真實的數字、一句使用者原話——文案會立刻變實。

要接到我們現有的設計系統上。

先做 案例 04，抽出 DESIGN.md，之後所有頁面自動繼承。

相關

• 快速上手 · 第一個產物 — 更詳細的分步版本
• 案例 04 · 抽品牌系統
• 進階 · 反 AI 味