SaaS 登陸頁技能
產生一個單頁 SaaS 登陸頁面。代理，請嚴格遵循以下工作流程。
1. 閱讀上下文
開始撰寫前：
- 讀取目前工作目錄中的
DESIGN.md。如果缺失，請停止並要求提供一份。 - 識別色彩調色盤、字體代碼與佈局原則。
- 注意「代理提示指南」區塊——若與此處指示衝突，以該指南為準。
2. 規劃區塊
必需區塊，依序：
- 英雄區 — Logo 或品牌字、標題（標語輸入）、副標題（1–2 句）、主要 CTA、次要 CTA。使用
hero_density參數作為垂直內距（單位 px）。 - 功能區 — 3–6 個功能卡片。每個包含：圖示、簡短標題、1–2 句說明。
- 社交證明 —
proof_count個 Logo 或推薦。若為 0，則跳過此區塊。 - 定價區 — 2–3 個方案。僅在
has_pricing為 true 時包含。 - 頁尾 CTA — 大型強調色橫幅，包含一個按鈕的行動呼籲。
- 頁尾 — 極簡：連結 + 版權宣告。
3. 套用設計系統
- 所有顏色必須來自 DESIGN.md 的代碼。不要自行發明十六進制值。
- 排版：使用宣告的顯示字體用於標題，正文字體用於其他所有文字。
- 佈局：遵循網格、最大寬度與區塊間距規則。
- 元件：使用宣告的按鈕/卡片/輸入模式。若 DESIGN.md 的「深度與層次」提到極簡，則不要加入陰影。
- 強調色：僅在英雄區使用一次、頁尾 CTA 使用一次，以及所有連結使用。不要過度氾濫於頁面。
4. 撰寫檔案
輸出一個完全自含的 index.html，包含：
- 所有 CSS 內嵌於
<head>中的<style>區塊。 - 若 DESIGN.md 的字體無法從 Google Fonts 等載入，則提供系統字體備援。
- 沒有外部 JS。
- 語義化 HTML（
<header>、<main>、<section>、<footer>）。 - 每個可編輯元素標記
data-od-id="<唯一標識>"，以便主機應用程式的註解模式可以定位它。
5. 自我檢查
完成前驗證：
- 所有文字具有內容意義，非 lorem ipsum（使用
product_name和tagline輸入；其餘內容生成合理且具體的副本）。 - 沒有中斷的顏色引用（每個 CSS 顏色值都在 DESIGN.md 的調色盤中，或是有效的 Alpha/備援變體）。
- 響應式斷點與 DESIGN.md 的「響應式行為」區塊一致。
- 頁面在 1440w、768w 和 375w 看起來良好（心理模擬）。
- 強調色總共使用不超過兩次。
6. 完成
僅輸出 index.html。不要產生獨立的 CSS 檔案、JS 檔案或 README。
給將此作為參考的技能作者
這是一個最小但完整的技能。結構：
saas-landing-skill/
├── SKILL.md ← 您在此處
└── assets/
└── base.html （可選起始模板；此技能未使用）
注意事項：
od:前導區塊是選擇性的，僅為了與 Claude-Code 相容；但加入後可啟動 OD 的類型化輸入、滑桿、預覽元數據與功能門控。- 前導區塊下方的工作流程是純 Markdown，代理將其讀取為系統提示。
- DESIGN.md 被視為合作者，而非覆蓋。該技能賦予代理在簡報衝突時覆蓋的權限，但從不發明新的代碼。
data-od-id標記是我們將元素連接到註解模式的方式。想支援註解模式的技能必須在其輸出中進行標註。
參見 ../../skills-protocol.md 以了解完整協定。