SaaS 登陸頁面技能
產出一個單頁 SaaS 登陸頁面。代理，請嚴格按照以下工作流程執行。
1. 讀取上下文
在開始撰寫任何內容之前：
- 讀取當前工作目錄中的
DESIGN.md。如果找不到，請停止並要求提供一個。 - 識別其中的色彩調色盤、字體標記和佈局原則。
- 注意「代理提示指南」章節——若與此處任何指示衝突，以前者為準。
2. 規劃區塊
必要的區塊，按順序排列：
- 主視覺 — 標誌或文字標誌、標題（標語輸入）、副標題（1-2 句）、主要行動呼籲按鈕、次要行動呼籲按鈕。使用
hero_density參數作為垂直內距（單位 px）。 - 功能介紹 — 3-6 個功能方塊。每個方塊包含：圖示、簡短標題、1-2 句說明。
- 社會證明 —
proof_count個標誌或推薦。如果數值為 0，則跳過此區塊。 - 定價 — 2-3 個方案。僅在
has_pricing為 true 時包含。 - 頁尾行動呼籲 — 使用強調色的大面積橫幅，包含一個按鈕的行動呼籲。
- 頁尾 — 最小化內容：連結 + 版權資訊。
3. 應用設計系統
- 所有顏色必須來自 DESIGN.md 的標記。不要自行發明十六進制色碼。
- 字體：標題使用宣告的顯示字體，其他所有文字使用正文字體。
- 佈局：遵循網格、最大寬度和區塊間距規則。
- 元件：使用宣告的按鈕/卡片/輸入框模式。如果 DESIGN.md 的「深度與立體感」章節標示為最小化，則不要添加陰影。
- 強調色：僅在主視覺中使用一次、頁尾行動呼籲中使用一次，以及用於所有連結。不要讓強調色充斥頁面。
4. 撰寫檔案
輸出一個自包含的 index.html 檔案：
- 所有 CSS 內聯在
<head>中的<style>區塊內。 - 如果 DESIGN.md 的字體無法從 Google Fonts 等來源載入，則提供系統字型備援。
- 不包含外部 JS。
- 使用語意化 HTML（
<header>、<main>、<section>、<footer>）。 - 每個可編輯元素加上
data-od-id="<唯一標識>"屬性，以便主應用程式的評論模式可以定位它。
5. 自我檢查
在完成前，請確認：
- 所有文字內容有意義，而不是亂數假文（使用
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。