著陸頁

著陸頁 是做什麼的？

產出一個自包含的 HTML 檔案，外觀需經過藝術指導，而非隨意生成。 examples/ 目錄中的範例（pulse-landing.html）是品質標竿。請比照其具體程度：真實感的文案、精心安排的間距、以及單一強調色。

開始之前

收集或自行構思（並清楚保持一致）以下五項輸入：

1. 一句話產品說明：它是什麼、做什麼用的。
2. 目標受眾：一個特定的人，而非「所有人」。
3. 單一主要行動：註冊、購買、下載、加入等待清單。
4. 一個證據點：一個數字、一段引言或一個具體成果。如果使用者沒有提供，請改用一個機制（例如「離線可用」、「無需帳號」）— 切勿捏造見證或統計資料。
5. 語氣：選擇一個 — 安靜/高級、大膽/響亮、溫暖/人性化、技術/精確。

如果使用者已提供產品和目標受眾，請勿再提問。自行做出合理的選擇，並在最後一行備註說明。

設計記號（預設系統 — 「墨與柑橘」）

除非使用者提供品牌色，否則請使用這些顏色。所有值僅需在 :root 區塊中修改一處。

:root{
  --bg:#0F1013;        /* 頁面背景 */
  --panel:#17181D;     /* 凸起的表面 */
  --line:#26272E;      /* 極細線、邊框 */
  --ink:#F4F2EA;       /* 主要文字 */
  --muted:#9BA0A6;     /* 次要文字 */
  --accent:#D9F24F;    /* 一種強調色 — 按鈕、強調 */
  --radius:14px;
  --font:"Inter","Helvetica Neue",Arial,sans-serif;
}

讓它看起來經過設計的規則：

• 一種強調色。 所有可點擊或重要的元素都使用它；其他顏色不得與之競爭。沒有彩虹漸層，沒有紫藍色的「AI 漸層」。
• 字體主導視覺。 標題 56–72px、粗細 800、字距微調為負值（-0.02em）。內文 17–18px、行高 1.6。標題上方使用小型大寫標籤（12px、字距 0.12em、大寫、次要色）。
• 間距以 8 為倍數。 區塊在桌機版上下的內距為 96px。如果間距看起來很隨意，就會顯得很像隨機生成的。
• 極細線勝過陰影。 使用 1px 的 --line 邊框來分隔區塊，避免使用陰影或在彩色背景上使用浮動卡片。
• 數字作為設計元素。 大型統計數字（48px+）使用強調色或主要色，搭配小型次要色標籤。最多一排三個統計數字。

頁面組成（按此順序）

1. 頂部導覽列 — 左側為文字商標，兩到三個純文字連結，一個強調色按鈕（主要行動）。底部有細邊框。
2. 英雄區 — 小型大寫標籤（類別）、標題、一句支援性敘述（最多 22 字）、主要按鈕 + 一個次要連結。右側或下方：一個由 CSS 構成的產品視覺元素（模擬視窗、統計卡片群、字體編排設計）。絕對不要留空的灰色佔位區塊。
3. 標誌/證明條 — 一行文字，例如「由……使用」加上文字商標，或是一行證明統計資料。如果沒有可誠實提供的證明，則完全跳過此區。
4. 問題 → 轉變 — 兩欄：舊方法（次要色、帶刪除線的感覺）對比產品的新方法。每行簡短，段落不超過三行。
5. 功能 — 確切三個或四個。每個包含：小型大寫數字（01–04）、標題、兩行說明。使用極細邊框分隔的格線，而非六張相同的圖示卡片。
6. 運作方式 — 三個編號步驟，每個步驟一行。
7. 定價或優惠 — 如果使用者提供價格：一個重點方案、包含項目的核對清單、主要行動按鈕。如果未提供價格：則改為等待清單/CTA 橫幅。
8. 常見問題 — 最多四個問題，針對真實的顧慮（價格、心力、轉換成本、「這適合我嗎」）來撰寫。
9. 最終行動呼籲（CTA）橫幅 — 強調色背景區塊、主要色文字、標題用不同詞語重申主要承諾、一個按鈕。
10. 頁尾 — 文字商標、一行定位說明、極小的連結。不得出現網站地圖農場。

文案規則

• 標題公式：[針對特定對象的具體成果]，或一個產品能夠支持的具體主張。「為跑者奪回你的夜晚」— 而非「歡迎來到生產力的未來」。
• 每個區塊必須至少包含一個具體名詞和一個數字或名稱。禁止使用模糊的形容詞（「無縫接軌」、「功能強大」、「革命性」、「尖端」、「次世代」）。
• 按鈕應說明將發生什麼動作：「免費開始」、「取得範本」、「加入等待清單」。主要行動按鈕永遠不要用「了解更多」。
• 以產品創造者的口吻撰寫，謹慎使用第一人稱複數（「我們建立這個是因為……」），絕不使用企業式的「解決方案」用語。

反模式（「AI 外觀」— 絕對不要這樣做）

• 紫/藍色漸層英雄區背景或漸層文字。
• 三個相同的卡片，帶有表情符號或圓圈中的通用 SVG 圖示。
• 「🚀 超充你的工作流程」風格的文案，標題中使用驚嘆號。
• Lorem ipsum、「功能一 / 功能二」、圖庫照片佔位符。
• 所有內容均置中。混合使用左對齊文字區塊與偏移的視覺元素。
• 使用超過兩種字型粗細或系列，或超過一種強調色。
• 假的見證、假的標誌、捏造的統計資料。絕對不能。

技術規則

• 單一 HTML 檔案，CSS 置於 <style> 中，無外部資源，除了 Google Fonts 連結（Inter 或使用者的品牌字型）。不需要 JavaScript，除了選用的常見問題切換功能。
• 使用語意化標籤：header、main、section、footer。僅能有一個真正的 <h1>。
• 響應式設計：在 760px 以下改為單欄，英雄區視覺元素在文案下方，觸控目標至少 44px。
• 保持檔案在約 700 行以內。如果需要更多行，表示頁面內容過多 — 應刪減一個區塊。

品質檢查清單（交付前執行）

• 使用一種強調色，並保持一致；沒有漸層，除了微妙的同色調背景淡出。
• 標題包含一個具體成果和特定的目標受眾或機制。
• 頁面上的每個數字都來自使用者或產品的真實機制。
• 無禁用詞彙：無縫接軌、超充、革新、尖端、次世代、釋放你的潛力。
• 在 390px 寬度下能正確閱讀，且無水平捲動。
• 主要行動至少出現三次（頂部導覽列、英雄區、最終橫幅）。