頁面：到達頁 (Landing Page)
引導活動到達頁的結構、轉換流程與優化。主要用途：付費廣告 (PPC/SEM) — 到達頁通常為接收付費流量而建；廣告與頁面的一致性對於轉換至關重要。請參閱 paid-ads-strategy 了解何時使用付費廣告以及廣告與頁面一致的相關原則。也適用於聯盟行銷註冊、產品發布、名單擷取、網路研討會報名及其他單一目標的轉換頁面。規模化：當建立大量到達頁（特定城市、特定產品、特定整合）時，請使用 programmatic-seo（模板 + 資料）和 template-page-generator 來設計模板。不同於首頁（多功能）和產品頁（目錄）。
調用時機：首次使用時，如有幫助，可先以 1-2 句話說明此技能涵蓋的範圍及其重要性，然後再提供主要輸出。後續使用或當使用者要求跳過時，則直接提供主要輸出。
付費廣告：到達頁要求
當到達頁接收付費流量時：頁面上需立即承諾廣告內容；以行動裝置為優先（摺頁上方放置 CTA，快速載入）；表格精簡（欄位越少越好）；在摺頁上方建立信任。請參閱 paid-ads-strategy 了解完整的廣告與頁面一致性及品質分數。
初始評估
首先檢查專案上下文： 若存在 .claude/project-context.md 或 .cursor/project-context.md，則讀取其產品、目標受眾和價值主張的資訊。
識別：
- 頁面目標：註冊、購買、名單擷取、網路研討會、下載
- 流量來源：付費廣告、電子郵件、聯盟行銷、自然流量
- 目標受眾：冷流量 vs 溫流量；若已知則進行細分
到達頁結構（5 步驟流程）
| 步驟 | 目的 | 元素 |
|---|---|---|
| 1. 停止滾動 | 在約 2.6 秒內抓住注意力 | 標題、副標題、主圖圖片或影片 |
| 2. 建立信任 | 在提出要求前提供社會證明 | 標誌、推薦、評分、顧客數量 |
| 3. 說明價值 | 好處、功能、使用案例 | 清晰的文案；適用對象、功能說明 |
| 4. 消除疑慮 | 處理異議 | 常見問題 (FAQ)、保證、比較 |
| 5. 提出要求 | 單一主要 CTA | 一個明確的行動；在邏輯位置重複出現 |
每個元素都應服務於這五項功能之一。提供多個競爭性優惠的頁面，其潛在客戶數量約減少 266%。
標題公式
[目標對象] + [具體成果] + [時間/條件限制]
- 避免：抽象的承諾（「釋放你的潛能」、「改造你的業務」）
- 偏好：具體的（「減少 70% 的發票處理時間——無需安裝新軟體」）
CTA 最佳實踐
- 一個主要 CTA：無競爭性操作；創造一條通往轉換的「單行道」
- 在行動裝置上置於摺頁上方：拇指可觸及範圍；約 65%+ 的流量來自行動裝置
- 以價值為導向的文案：「開始免費試用」而非「提交」
- 與信任信號配對：按鈕旁顯示顧客數量、標誌或統計數據
- 移除或最小化導覽：可提升 2-28% 的轉換率
程式化到達頁（規模化）
當你需要大量到達頁（例如，特定城市、特定產品、特定整合），請使用 programmatic-seo：一個模板 + 資料 = 數百或數千個 LP。將到達頁結構（5 步驟流程、CTA、信任信號）套用到模板；詳細模板設計請參閱 template-page-generator。範例：「[城市] 的 [產品]」帶有當地資料的 LP；「[應用程式 A] + [應用程式 B]」整合註冊頁面。
頁面類型
| 類型 | 用途 | CTA 目的地 |
|---|---|---|
| 點擊通過 (Click-through) | 適用於溫流量，先加溫再引導至優惠；最適合 SaaS、訂閱制 | pricing-page, products-page, signup |
| 名單擷取 (Lead capture) | 收集電子郵件以進行培育；表格欄位少於或等於 5 個（較長的表格會導致約 81% 的放棄率） | newsletter-signup, contact-page |
| 產品焦點 (Product-focused) | 深入介紹功能和好處；產品發布 | products-page, features-page |
| 比較 (Comparison) | X 對 Y；競爭對手品牌關鍵字廣告；具商業意圖 | alternatives-page, features-page, pricing-page |
| 使用案例 / 解決方案 | 針對難以拆分為個別工具的整合產品 | features-page, services-page |
| 免費工具 | 獨立工具；潛在客戶開發；同一 ICP；產品摘要 | tools-page-generator；若需限制存取，則將工具頁作為 LP |
| 橋接 / 獎勵 (Bridge/bonus) | 透過你的連結購買的額外誘因 | pricing-page, products-page |
| 網路研討會 / 活動 | 活動報名；在直播前收集報名 | resources-page (將網路研討會視為資源) |
到達頁 ↔ 頁面類型（內容與流程）
從以下來源擷取內容（步驟 2-4）：
- customer-stories-page-generator：用於社會證明的推薦、案例研究；挑戰→解決方案→結果摘要
- faq-page-generator：處理異議的常見問題區塊；重複使用與轉換相關的 Q&A
- features-page-generator：用於「說明價值」步驟的好處優先的功能文案
- resources-page-generator：用於交換電子郵件的誘餌（電子書、模板）；將網路研討會視為資源
CTA 導向：
- pricing-page-generator：點擊通過 LP → 定價；註冊、試用
- products-page-generator：產品 LP → 產品詳情或目錄
- services-page-generator：服務 LP → 聯絡方式、報價、預約
- contact-page-generator：名單擷取 LP → 聯絡表單；B2B 展示請求
- affiliate-page-generator, creator-program：合作夥伴註冊 = 到達頁類型
內部連結：
- 將 LP 連結至 首頁（品牌錨點）；關於頁面（信任）；隱私權頁面（表單合規）
- 避免孤立的 LP：確保網站地圖、導覽或活動中心中至少有一個內部連結
效能與設計
- 載入時間：低於 2.5 秒；每多一秒鐘，轉換率可能損失約 7%
- 行動優先：響應式設計；無需滾動即可看到 CTA
- 視覺元素：主圖圖片或影片最多可提升 80% 的轉換率
- 前端美學：如需獨特的排版、動態效果、空間構成、背景等，請參閱 brand-visual-generator 的前端美學部分
- 揭露事項：在適用情況下，加入符合 FTC 規範的聯盟行銷/付費揭露聲明
交付前檢查清單
在交付到達頁面前，請驗證：
| 類別 | 檢查項目 |
|---|---|
| 視覺 | 不要使用表情符號作為圖示（請使用 SVG）；使用一致的圖示集（Heroicons/Lucide）；懸停狀態不應造成版面偏移 |
| 互動 | 所有可點擊元素都需有 cursor-pointer；懸停時提供清楚的回饋；過渡效果 150-300ms |
| 無障礙 | 圖片有替代文字；表單輸入有標籤；顏色不是唯一的指示方式；尊重 prefers-reduced-motion |
| 版面 | 行動裝置上無水平滾動；內容不被固定導覽列遮擋；在 375px、768px、1024px 下皆有響應式效果 |
| 效能 | 載入時間低於 2.5 秒；LCP 已最佳化；圖片在適當時機使用 WebP/懶加載 |
| 圖片 | 關於替代文字、格式、響應式、懶加載，請參閱 image-optimization |
輸出格式
- 標題和副標題
- 結構（5 步驟流程區塊）
- 信任信號 放置位置
- CTA 文案和放置位置
- 異議處理（FAQ、保證）
- 內部連結（目標頁面）
- SEO 元資料（若頁面被索引）
相關技能
- hero-generator：英雄區塊（步驟 1）
- grid, list：英雄區塊下方的內容版面；區塊、功能、推薦
- cta-generator：CTA 按鈕的設計與放置
- image-optimization：替代文字、WebP、LCP、響應式、懶加載
- pricing-page-generator：點擊通過 LP 的目的地；註冊 CTA
- faq-page-generator：處理異議的常見問題區塊
- howto-section-generator：在 FAQ/CTA 之前的逐步說明區塊（例如設定流程）
- comparison-table-generator：競爭對手 / 傳統 vs 現代比較 表格區塊；與廣告訊息匹配
- homepage-generator：多功能首頁 vs 單一目標到達頁；結構相似
- paid-ads-strategy：廣告與頁面一致性；何時使用付費廣告
- alternatives-page-generator：競爭對手品牌關鍵字廣告 → 比較式到達頁（非部落格）
- programmatic-seo：透過模板 + 資料規模化建立到達頁
- template-page-generator：程式化到達頁的模板結構
- title-tag, meta-description, page-metadata：到達頁元資料