SaaS 登陸頁面技能
產生一個單頁 SaaS 登陸頁面。代理請嚴格按照以下工作流程執行。
1. 讀取上下文
在開始撰寫任何內容之前：
- 讀取當前工作目錄中的
DESIGN.md。如果檔案遺失，請停止並要求提供。 - 辨識色板、字體標記與佈局原則。
- 注意「代理提示指南」區塊 — 若與本文件衝突，該指南將覆蓋本文件中的任何指示。
2. 規劃區塊
必要的區塊，依序為：
- 英雄區 — 標誌或品牌文字、標題（輸入標語）、副標題（1–2 句）、主要行動呼籲按鈕、次要行動呼籲按鈕。使用 hero_density 參數作為垂直內距的像素值。
- 功能區 — 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 等來源載入，則提供系統字體備用。
- 無外部 JavaScript。
- 語意化 HTML（
<header>、<main>、<section>、<footer>）。 - 每個可編輯元素標記上
data-od-id="<唯一的 slug>"，以便主機應用程式的註解模式能夠定位。
5. 自我檢查
在完成前，請驗證：
- 所有文字內容有意義，非 lorem ipsum（使用 product_name 與 tagline 輸入；其餘部分產生合理且具體的內容）。
- 無中斷的顏色引用（每個 CSS 顏色值都位於 DESIGN.md 的色板中，或是有效的 alpha/備用變體）。
- 響應式中斷點符合 DESIGN.md 的「響應式行為」區塊。
- 頁面在 1440w、768w 與 375w 寬度下看起來良好（在腦中模擬）。
- 強調色總共使用不超過兩次。
6. 完成
僅輸出 index.html。請勿產生獨立的 CSS 檔案、JavaScript 檔案或 README。
供技能作者參考
這是一個精簡但完整的技能。結構如下：
saas-landing-skill/
├── SKILL.md ← 你目前所在的位置
└── assets/
└── base.html （可選的起始模板；本技能不使用）
注意事項：
od:前置資料區塊對於僅與 Claude Code 相容的場景為非必要，但加上它可啟用 OD 的類型化輸入、滑桿、預覽元資料與功能閘控。- 前置資料下方的工作流程是純 Markdown，代理將其視為系統提示。
- DESIGN.md 被視為協作者，而非覆蓋者。技能授權代理在簡報衝突時可覆蓋設定，但不可發明新的標記。
data-od-id標記是將元素連結至註解模式的方式。需要註解模式相容性的技能必須在其輸出中加上此標記。
完整協議請參閱 ../../docs/skills-protocol.md。