SaaS 登陸頁面技能
產出一個單頁 SaaS 登陸頁面。代理，請嚴格依照此工作流程執行。
1. 讀取上下文
在開始撰寫任何程式碼之前：
- 讀取當前工作目錄中的
DESIGN.md。如果檔案缺失，請停止並要求提供該檔案。 - 識別其中的色板、排版標記與佈局原則。
- 注意「代理提示指南」區段——若與本檔案中的任何指示衝突，該區段的內容優先。
2. 規劃區塊
必需的區塊，依序排列：
- 英雄區塊 — 標誌或文字商標、標題（接收 tagline 輸入）、副標題（1–2 句）、主要行動呼籲按鈕、次要行動呼籲按鈕。使用 hero_density 參數作為垂直內距的 px 值。
- 特色 — 3–6 個特色方塊。每個包含：圖示、簡短標題、1–2 句說明。
- 社會證明 —
proof_count個標誌或推薦。若為 0，則跳過此區塊。 - 價格方案 — 2–3 個方案等級。僅當
has_pricing為真時才包含。 - 頁尾行動呼籲 — 大面積強調色橫幅，帶有一個按鈕的行動呼籲。
- 頁尾 — 簡潔：連結 + 版權資訊。
3. 套用設計系統
- 所有顏色必須來自 DESIGN.md 的標記。請勿自行發明十六進位數值。
- 排版：標題使用指定的顯示字體，其他所有內容使用正文字體。
- 佈局：遵守網格、最大寬度與區塊間距規則。
- 元件：使用指定的按鈕/卡片/輸入模式。若 DESIGN.md 的「深度與立體感」區段說明應使用極簡陰影，則不要添加陰影。
- 強調色：在英雄區塊使用一次，在頁尾行動呼籲區塊使用一次，並用於所有連結。不要在全頁氾濫使用。
4. 撰寫檔案
輸出單一的獨立 index.html，包含：
- 所有 CSS 內嵌在
<head>中的<style>區塊內。 - 若 DESIGN.md 的字體無法從 Google Fonts 等來源載入，則使用系統字體備用方案。
- 無外部 JavaScript。
- 語義 HTML（
<header>、<main>、<section>、<footer>）。 - 每個可編輯元素標記
data-od-id="<unique-slug>"，以便宿主應用程式的評論模式能夠定位到該元素。
5. 自我檢查
完成前，請驗證：
- 所有文字內容是有意義的，而非 lorem ipsum（使用 product_name 和 tagline 輸入；其餘部分生成具體且合理的文案）。
- 沒有中斷的顏色參考（每個 CSS 顏色值都出現在 DESIGN.md 的色板中，或是有效的透明度/備用變體）。
- 響應式斷點符合 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。