著陸頁建構器
公式：我們的結構 × 競爭對手的最佳實務，以參考標準為品質標竿。
每個頁面都根據其利基市場獨一無二。 從頭開始，設計來自於主題 + 競爭對手（階段 2–3），絕非來自於之前的頁面或模板。頁面之間傳承的是 品質水準，而非外觀：
- 每個區塊都有清晰的層級：副標 → 主標 → 引導文字 → 真實媒體 → 附帶微文案的行動呼籲；
- 產品真實媒體放在適當的邊框中，缺少的部分則留有標籤的空白邊框；
- 為該利基市場選擇一組字體配對和一個強調色；
- 一個對比區塊以增加節奏感；
- 逐條標註結果；
- 在價格之前提供摘要回顧；
- 根據事實建立常見問題與結尾行動呼籲；
- 螢幕截圖品質檢查。
已核准的 Vidpeak 重新設計 (references/examples.md §D) 展示了該水準。請達到其完成度，但切勿模仿其外觀。
- 我們的結構 決定 頁面必須完成哪些工作及其比例（5 個區塊、權重、基本規則）。這在所有利基市場中保持不變。
- 競爭對手 決定 在此利基市場中如何完成每個工作：英雄區塊公式、證明類型、產品展示方式、定價格式、異議處理、視覺系統。這會隨利基市場而變化。
- 差距 — 競爭對手未提及或未妥善展示的部分 — 成為我們的差異化優勢。
- 參考標準 (
references/reference-standard.md) 設定 品質門檻：業主挑選的四個優質著陸頁。其區塊模式、文案編寫與視覺編寫水準定義了何謂「做得好」。利基市場決定外觀；參考標準決定做得多好。
永遠不要只依據框架建立（泛用頁面），也不要只複製單一競爭對手（跟風頁面）。
兩種模式 — 先選擇一種
| 模式 | 使用時機 | 工作流程 |
|---|---|---|
| A. 從頭建立 | 尚無頁面，或業主想要全新頁面 | 下方（階段 1–6） |
| B. 改善設計 | 已有頁面（URL / 儲存庫檔案 / 螢幕截圖），且業主希望改善其外觀與效能 | references/redesign.md |
模式 B 的訊號：「讓它更好看/更漂亮」、「重新設計」、「改善設計」、「這是我的著陸頁」、連結到即時頁面。不確定時 → 問一個問題：「要新頁面，還是改善此頁面的設計？」兩種模式都使用相同的核心結構、基本規則與參考標準。
工作流程 — 模式 A（從頭建立）
請依序進行。階段 2–3 是此技能的核心 — 切勿為了節省時間而跳過它們。
| # | 階段 | 產出 | 參考資料 |
|---|---|---|---|
| 1 | 簡報 — 產品、目標受眾、利益、行動呼籲類型、價格、語言、素材 | 10 行簡報 | references/brief.md |
| 2 | 競爭對手研究 — 找到 3–5 個競爭對手，打開他們的 著陸頁，擷取每個區塊 | research/ 螢幕截圖 + 原始筆記 | references/competitor-research.md |
| 3 | 拆解與綜合 — 每個區塊的模式、市場基準、最佳實務、差距、視覺鎖定 | research/teardown.md | references/competitor-research.md |
| 4 | 頁面規劃 — 我們的 5 個區塊，每個填入所選實務 + 參考標準中的一個模式 + 我們的內容 | 規劃表 → 與業主進行檢查點 | references/framework.md, references/reference-standard.md |
| 5 | 建構 — 技術棧、文案、媒體、行動呼籲、專屬此利基市場的視覺系統 | 頁面本身 | references/build.md, references/visual-system.md |
| 6 | 品質檢查 — 在瀏覽器中，桌面版 + 行動版，對照規劃、競爭對手及參考標準 | 修正後的頁面 + 交接文件 | references/build.md §QA |
| 7 | SEO 與 GEO — 頁面上線前（或應要求）：一個網址、robots/sitemap/llms.txt、meta 與 og、JSON-LD、速度、AI 機器人存取、Search Console | 可被索引且可被 AI 搜尋引用的即時頁面 | references/seo-geo.md |
檢查點（階段 4 之後）。 簡短向業主展示：市場基準、你將採用的 3–5 個實務、將要攻克的差距、視覺鎖定以及規劃表。獲得「可以」後，再開始建構。如果業主要求速度，請在同一輪對話中陳述規劃並開始建構。
不要停滯不前。 如果缺少某些內容（產品 URL、螢幕截圖、價格），請標記為 TODO 並繼續進行。僅在行動呼籲類型或語言不明確時才提問。
核心結構（永遠不變）
五項工作。一項工作可以跨越數個區塊（例如：優惠 = 摘要回顧 + 定價 + 常見問題 + 最終行動呼籲）。權重為頁面長度/注意力的目標比例，並非強制規定。
| # | 工作 | 權重 | 必須達成的目標 |
|---|---|---|---|
| 1 | 第一屏 | 5% | 是什麼或其價值主張、針對誰、一個主要行動呼籲（若尚未有產品則無） |
| 2 | 痛點與情境 | 15% | 僅當競爭對手使用痛點區塊時才執行。 然後：問題，尖銳且僅基於事實。否則跳過 — 其權重分配給利益 + 產品 |
| 3 | 利益（優點） | 20% | 讀者獲得的益處，每個優勢搭配視覺或證明 |
| 4 | 產品 | 40% | 是什麼 + 如何運作，一個螢幕內即能理解 |
| 5 | 優惠與行動呼籲 | 20% | 利益摘要回顧、點擊後的下一步、價格 + 風險反轉、異議處理、行動呼籲 |
利益 + 產品 ≈ 頁面的 60%。如果已有即時著陸頁，請保留其區塊順序並將工作對應上去。
競爭對手與我們的結構如何結合
- 將每個競爭對手的區塊對應到我們的 5 項工作之一（見證 → 利益證明、常見問題 → 優惠異議處理、標誌列 → 第一屏證明、整合 → 產品…）。這提供了每項工作的市場視角。
- 市場基準 = 大多數競爭對手使用的模式。買家期望看到這些 — 納入它們（標誌列、免費試用、比較表、前後對比…此利基市場視為標準的內容）。
- 最佳實務 = 一個模式，需滿足 (a) 被類別領導者或 ≥2 個競爭對手使用，或出現在他們投放付費廣告的頁面上，且 (b) 服務於其所屬區塊的工作。採用它，但使用我們自己的文字。
- 差距 = 無人回答的異議、無人證明的利益、無人提及的細分客群、無人使用的格式（例如無人展示真實輸出）。主攻其中 1–2 項 — 這就是定位。
- 衝突。 預設情況下，核心規則優先；在檢查點標記衝突並讓業主決定。典型情況：競爭對手使用引導/測驗表單 → 我們保持一個主要行動（見基本規則）。
- 視覺系統 源自競爭對手群組（通常是領導者）：調色盤角色、字體、密度、媒體格式、行動呼籲形狀。複製 系統，絕不複製他們的文案、數字、標誌或素材。
基本規則（任何利基市場）
- 強大的第一屏：簡潔的描述 或 鉤子利益，加上目標受眾。
- 每個行動呼籲都搭配具體利益，並說明下一步會發生什麼。
- 展示產品如何運作 並使用真實介面 — 每個運作步驟搭配該步驟的真實螢幕截圖/錄影，或如果競爭對手允許，讓他們試用。沒有任何準備好的內容 → 留下一個正確大小的空白邊框，標籤說明那裡應放置什麼。絕不用文字列表、圖標或虛構的使用者介面取代真實介面。
- 一個主要行動，僅兩種行動呼籲類型：進入產品（開始 / 試用 / 下載 / 註冊）或 預約通話（理想情況下使用嵌入式排程工具）。頁面上不應有引導或測驗表單。允許：一個 產品輸入，用於開始使用產品（貼上連結、上傳檔案、輸入地址），前提是競爭對手以此方式讓使用者試用。
- 絕不虛構證明、價格、統計數據、見證或標誌。空位 → 標記可見的
TODO。 - 僅使用真實產品媒體 — 不應有虛構的使用者介面，產品媒體應有的位置不應使用圖庫素材。
- 當市場實務不明確或有風險時，請諮詢業主，不要自行猜測。
檔案
references/reference-standard.md— 四個參考著陸頁：品質門檻、每個工作的模式庫、文案編寫與視覺編寫。兩種模式皆須閱讀。references/redesign.md— 模式 B：審核現有頁面並提升其設計水準。references/brief.md— 卡片優先的簡報，卡片列 → 區塊對應、語言、行動呼籲類型。references/competitor-research.md— 尋找競爭對手、應查看哪些頁面、擷取、拆解模板、綜合規則。此技能的核心。references/framework.md— 5 項工作的詳細說明、每個區塊的規則、市場成熟度、規劃表。references/visual-system.md— 從競爭對手推導並鎖定視覺系統（任何利基市場）。references/build.md— 技術棧、文案、媒體、行動呼籲接線、優惠/定價、品質檢查、交接文件。references/seo-geo.md— 上線前：SEO 與 GEO（AI 搜尋）技術檢查清單，從網域到 Search Console。references/examples.md— 實作範例（不同利基市場）。範例，非規則。scripts/capture.mjs— 針對競爭對手 URL 進行螢幕截圖 + 結構/視覺提取。templates/teardown.md— 需填入的拆解檔案。