peterfei/落地頁生成技能

Landing Page Skill

本 Skill 設計為 agent-agnostic——Claude Code、Codex CLI、Cursor、Trae、OpenClaw、Hermes Agent 或任何支援 markdown-based skill 的 agent 都可以使用。 所有檔案引用採用相對本 Skill 根目錄的相對路徑形式。

啟用條件

當使用者輸入包含以下任一觸發詞時啟用：landing page、落地頁、產品頁、行銷頁、主頁設計、single page website、著陸頁。

誠實邊界（適用性判斷）

適用：

1. 單頁轉換型落地頁（收集線索、引導註冊、促進購買）
2. 產品/服務展示頁面（SaaS、電商單品、諮詢服務、課程）
3. 技術棧為 Next.js 14/15 + Tailwind CSS（MVP 階段）
4. 有明確轉換目標（CTA）的頁面

不適用：

1. 多頁網站或部落格系統（超出單頁範圍）
2. 需要後端 API、資料庫、使用者認證的完整應用
3. 複雜互動（即時協作、資料視覺化儀表板、遊戲）
4. 非 Web 平台（小程式、原生 App、桌面應用）

邊界聲明： 本 Skill 生成的是高品質起點程式碼，需人工打磨文案細節和品牌資產。不承諾「一鍵完美」。

5 階段操作協議

Phase 1: 需求採集

按順序向使用者確認以下資訊（如使用者已提供則跳過）：

1. 產品/服務：是什麼？核心價值主張是什麼？
2. 目標受眾：誰會用？有什麼痛點？
3. 轉換目標：希望使用者做什麼？（註冊/購買/下載/預約）
4. 技術棧：確認使用 Next.js 14/15 + Tailwind CSS
5. 品牌風格偏好：從 references/aesthetic-styles.md 的 6 種風格中選擇
6. 競品參考：有喜歡的落地頁參考嗎？（可選）

輸出：需求摘要文件（Markdown 列表），用於 Phase 2。

Phase 2: 策略規劃

1. 載入行業模板：根據產品類型從 references/page-templates/ 選擇模板：
   • SaaS 產品 → references/page-templates/saas-product.md
   • 電商單品 → references/page-templates/ecommerce.md
   • 其他 → 通用結構（Hero → Features → Benefits → Social Proof → CTA → Footer）
2. 選擇美學方向：從 references/aesthetic-styles.md 選擇風格，確認配色傾向
3. 文案結構：使用 references/copy-formulas/ 規劃：
   • Hero 標題：references/copy-formulas/hero-headlines.md 的「結果 + 受眾 + 機制」公式
   • CTA 文案：references/copy-formulas/cta-patterns.md 的「動詞 + 利益」格式
   • 異議處理：references/copy-formulas/objection-handling.md 的 5 類異議模板
4. 轉換框架映射：將 7 段式文案映射到 DESIGNNAS 11 元素（參考 references/conversion-framework.md）

輸出：策略文件（含風格選擇、配色方向、文案大綱、元素映射表）。

Phase 3: 設計系統

基於 references/design-system.md 生成設計 Token：

1. Typography Token：Display 字體、Body 字體、heading 字號階梯
2. Color Token：Primary / Secondary / Accent / Neutral / Background / Text（hex + CSS 變數）
3. Motion Token：PageLoad 動畫、Scroll 觸發動畫、Hover 互動（類型 + 時長）
4. Layout Token：Grid 類型、Spacing 階梯、Section 寬度、非對稱佈局規則

輸出：設計 Token 文件（可直接複製到 tailwind.config.ts）。

Phase 4: 程式碼生成

按 references/tech-adapters/nextjs-tailwind.md 生成程式碼：

1. 專案結構：app/page.tsx、app/layout.tsx、components/、lib/utils.ts、tailwind.config.ts
2. 組件化：每個 DESIGNNAS 元素獨立組件（HeroSection、FeaturesSection 等）
3. Tailwind 配置：擴展設計系統 Token（colors、fonts、animations）
4. 響應式：使用 sm:/md:/lg:/xl: 斷點
5. 可訪問性：語義 HTML、alt 文字、對比度、focus-visible

輸出：完整可運行的 Next.js 專案程式碼。

Phase 5: 品質驗證（閉環保障）

5.1 轉換檢查

• 11 元素覆蓋率：檢查是否包含 Hero、Social Proof、Features、Benefits、How It Works、Testimonials、Pricing/CTA、FAQ、Scarcity、Footer（至少覆蓋 7 個）
• CTA 清晰度：CTA 文字是否使用「動詞 + 利益」格式
• Hero 標題：是否遵循「結果 + 受眾 + 機制」公式

5.2 反模式檢測（逐項檢查，詳見 references/anti-patterns.md）

#	規則	檢測邏輯	嚴重度
1	氾濫字體	Inter/Roboto/Arial 作為 Display 字體	阻塞
2	模板化配色	紫色漸變 + 純白背景的模板組合	阻塞
3	CTA 模糊	CTA 為 Submit/Learn More/Click Here	阻塞
4	缺少社會證明	Hero 下方無 Social Proof 元素	阻塞
5	Hero 標題無力	Welcome/品牌名開頭，純描述性	阻塞
6	行動端適配缺失	無 sm:/md:/lg: 響應式斷點	警告
7	可訪問性基線	缺少 alt/aria/語義 HTML	警告
8	SEO 基礎缺失	無 meta/title/OG 標籤	警告
9	效能隱患	大圖未最佳化、缺 lazy load	警告
10	Token 一致性	硬編碼顏色/非標準間距	警告

5.3 自動修復循環（阻塞級規則）

阻塞級規則（1-5）未通過時，自動執行修復循環：

1. 針對每個未通過的阻塞規則，生成具體修復程式碼
2. 僅替換觸發規則的 Section 程式碼（不修改無關 Section）
3. 重新執行該規則的檢測
4. 重複上述步驟，最多 3 輪
5. 3 輪後仍未通過 → 報告失敗原因，交由使用者決定

5.4 正面模式驗證（建議性，詳見 references/positive-patterns.md）

#	模式	檢測邏輯
P1	CTA 動詞+利益	CTA 文字匹配「動詞 + 具體利益」格式
P2	Hero 結果+受眾	標題包含可量化結果 + 目標受眾
P3	社會證明元素	頁面包含 ≥1 個社會證明類型
P4	急迫感/稀缺性	存在名額/時間/價格急迫感元素

正面模式不觸發自動修復，僅在報告中提供最佳化建議。

輸出：檢測報告（反模式 + 正面模式 Markdown 表格）+ 自動修復摘要（如有修復）。

Phase 5.5: 疊代最佳化（可選）

Phase 5 完成後，向使用者提供 3 個選項：

A) 接受 — 輸出最終完整專案程式碼 B) 修改指定 Section — 使用者說明要修改的 Section 和修改要求 C) 重新生成指定 Section — 使用者指定 Section 從頭重新生成

疊代規則：

• 修改/重新生成僅影響使用者指定的 Section（Section 粒度）
• 每次修改後，重新檢測該 Section 相關的反模式規則
• 最多 3 輪疊代，超限後輸出當前版本
• 每輪輸出變更日誌：「Round N: Modified [Sections], Re-checked [Rules]」

索引

技術棧適配器

• Next.js 14/15 + Tailwind CSS → references/tech-adapters/nextjs-tailwind.md

行業模板

• SaaS 產品頁 → references/page-templates/saas-product.md
• 電商產品頁 → references/page-templates/ecommerce.md

文案公式庫

• Hero 標題 → references/copy-formulas/hero-headlines.md
• CTA 模式 → references/copy-formulas/cta-patterns.md
• 異議處理 → references/copy-formulas/objection-handling.md

設計參考

• 轉換框架 → references/conversion-framework.md
• 設計系統 → references/design-system.md
• 美學風格 → references/aesthetic-styles.md
• 反模式檢測 → references/anti-patterns.md
• 正面模式檢測 → references/positive-patterns.md

跨 Agent 環境適配說明

本 Skill 設計為 agent-agnostic，兼容以下執行時：

執行時	支援方式	備註
Claude Code	原生支援	推薦，/agent 或觸發詞啟用
Codex CLI	兼容	直接載入 SKILL.md
Cursor	兼容	複製到 .cursorrules 或使用 Composer
Trae	兼容	直接載入 SKILL.md
OpenClaw	兼容	遵循 skills.sh 協議
Hermes Agent	兼容	直接載入 SKILL.md
其他 markdown-based skill 執行時	兼容	任何支援 YAML frontmatter + Markdown 的執行時

路徑規範

所有檔案引用均採用相對本 Skill 根目錄的相對路徑：

• references/xxx.md
• assets/xxx.svg
• scripts/xxx.py

Agent 或使用者按自身安裝位置解析，不依賴任何絕對路徑。

自包含原則

SKILL.md 包含所有必要資訊，可直接複製使用。references/ 中的檔案為深度知識補充，按需載入即可。

本 Skill 遵循 Agent Skills 開放協議。