SaaS 登陸頁面技巧
產生一個單頁式 SaaS 登陸頁面。代理請嚴格遵循以下工作流程。
1. 讀取上下文
在開始撰寫任何內容之前：
- 讀取當前工作目錄中的
DESIGN.md。如果缺少該檔案，請停止並要求提供。 - 辨識色彩調色盤、字型標記與佈局原則。
- 注意「代理提示指南」章節 — 若該處的指示與本文件衝突，則以該處為準。
2. 規劃區段
依序必備的區段：
- 英雄區塊 — Logo 或文字標記、主標題（標語輸入）、副標題（1–2 句）、主要行動呼籲按鈕、次要行動呼籲按鈕。使用
hero_density參數作為垂直內邊距（單位 px）。 - 功能介紹 — 3–6 個功能圖塊。每個圖塊包含：圖示、簡短標題、1–2 句說明。
- 社會證明 —
proof_count個 Logo 或推薦語。若值為 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. 自我檢查
在完成前，請驗證：
- 所有文字內容具有實質意義，非 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標記是將元素連結至評論模式的方式。需要評論模式相容性的技能必須對其輸出進行註解。
請將這四條規則保留在套件合約內；請勿依賴可能未隨此技能一起傳遞的儲存庫層級協定檔案。