生成高轉換率的登陸頁面
產出一個實際的頁面：可運作的 TSX 元件、真實的文案結構，以及可衡量的效能。
符合 repo 現有的框架、樣式和元件慣例，且僅使用它已有的依賴項：交付時絕不額外安裝（安全鉤子會阻止）。
若是一個未選擇技術棧的新專案，則預設使用 Next.js + Tailwind；在其他情況下，
如果頁面確實需要缺少的依賴項，請呼叫 mark_ticket_blocked 並指名該依賴項。
目標（Core Web Vitals「良好」，第 75 百分位）：LCP ≤ 2.5 秒，INP ≤ 200 毫秒，CLS ≤ 0.1。 同時符合 WCAG 2.2 AA 標準：文字對比度 ≥ 4.5:1、可見的焦點環、有標籤的輸入欄位，以及 可鍵盤操作的頁面。
文案框架（每個頁面選擇一個）
| 框架 | 結構 | 最佳使用時機 |
|---|---|---|
| PAS | 問題 → 激化 → 解決方案 | 意識到問題的流量 |
| AIDA | 注意力 → 興趣 → 渴望 → 行動 | 冷流量、新類別 |
| BAB | 之前 → 之後 → 橋樑 | 結果/轉變型的提案 |
模板與五個反對意見的常見問題位於 references/copy-frameworks.md。
copywriting 技能涵蓋了標題與行動呼籲的撰寫技巧。
區塊藍圖
- 英雄區：一個關於成果的標題（≤ 約 10 個字）、一句關於「如何達成」的副標題、一個 主要行動呼籲，以及一個信任信號（數字、標誌或評分）。無輪播。
- 問題區：維持現狀的代價，用客戶的語言表達。
- 解決方案 / 效益：3–6 個效益，每個效益附有一行說明和一個 可選的視覺元素。
- 社會證明：附有姓名、角色、公司和結果的推薦；標誌。
- 定價（如適用）：2–4 個方案，其中推薦的方案需突出顯示。
- 常見問題：五個反對意見。使用原生的
<details>/<summary>或一個可存取的 手風琴元件。FAQPage標記為可選，因為 Google 不再顯示常見問題的豐富結果。 - 頁尾行動呼籲：重複主要行動，且需最小化摩擦（例如僅需電子郵件）。
步驟
-
收集輸入。 產品名稱、目標受眾、主要痛點、主要成果、主要行動呼籲 及其目標連結、可用的證明，以及風格方向。先閱讀票證、
BRAND.md/代號 和現有頁面。若無人工指示，不要停下來提問：使用現有資訊，並在文案中將 缺口標記為[TODO: …]。 絕不虛構推薦、標誌、客戶數量或評分。 -
選擇框架，根據流量來源和認知層級。先撰寫文案再規劃版面。擬出五個 標題草稿，並保留最清晰的一個。
-
建立各區塊，作為 repo 元件目錄中的獨立元件。 將文案放在 props 或一個內容物件中，不要散落在 JSX 各處。保持頁面 主要為伺服器端渲染，僅在需要互動之處使用用戶端元件。
-
SEO 中繼資料。 設定獨特的
<title>、一個中繼描述、一個 canonical 網址、Open Graph 和 Twitter 標籤，以及一個<h1>。在 Next.js App Router 中，使用metadata匯出。 -
效能。
- 急切載入英雄區/LCP 圖片，使用
fetchpriority="high"。在 Next.js 16+ 中使用<Image preload>（或loading="eager"+fetchPriority="high"）；priority是 Next.js ≤ 15 的寫法，在 16 中已棄用。絕不懶加載它。 - 對摺疊線以下的圖片使用懶加載。
- 每張圖片都需有明確的
width/height並使用 AVIF/WebP 格式。 - 字體使用
font-display: swap（或next/font），且僅載入需要的字重。 - 摺疊線以上無第三方腳本。
- 急切載入英雄區/LCP 圖片，使用
-
表單（潛在客戶擷取）。使用有標籤的輸入欄位，搭配正確的
type和autocomplete、內聯驗證，以及一個保留使用者輸入內容的錯誤摘要。顯示成功 狀態、停用重複提交，並提交至票證中指定的真實端點。 -
驗證。 執行並記錄每個檢查：
- 型別檢查（
npx --no -- tsc --noEmit，此指令只會失敗而不會下載） 以及 repo 的 lint； - repo 的建置腳本（例如
npm run build）； - 一個元件測試，用於渲染頁面並斷言 h1、主要行動呼籲的 href 以及表單的成功與錯誤狀態；
- Lighthouse（行動版）作為實驗室檢查，記錄 LCP、CLS、TBT 和無障礙
分數，僅在已安裝的情況下執行（
npx --no -- lighthouse）； - 在 375 px、768 px 和 1440 px 視口下的溢出檢查，以及摺疊線以上的行動呼籲 檢查，透過 repo 的瀏覽器測試執行器（如果有的話）。
絕不安裝或擷取工具來執行檢查。對於無法執行的檢查，請在您的證據中指名， 而不是宣稱已執行。
- 型別檢查（
完成條件
- 頁面可建置、通過型別檢查及其元件測試。
- 英雄區陳述了一個成果，且主要行動呼籲在 375 px 和 1440 px 時位於摺疊線以上 （由視口測試檢查，或指名為未檢查）。
- 在可取得 Lighthouse 或 axe 的情況下，實驗室測試顯示行動版 LCP ≤ 2.5 秒且 CLS ≤ 0.1，且無自動化無障礙違規；否則證據應說明這些項目未經測量。
- 無虛構的證明。每個缺口都標記為
[TODO]並列在報告中。
反模式
- 英雄圖片使用懶加載，或因為未設定尺寸的媒體或延遲的字體導致版面位移。
- 多個同等權重的行動呼籲，或付費活動頁面上有完整的網站導覽。
- 建置結果中遺留 Lorem ipsum 或通用的填充文案。唯一允許的佔位符是明確的
[TODO: …]缺口，且需列在報告中。 - 英雄區中使用輪播和自動播放影片。