nxxxsooo/clean-design

SaaS 著陸頁技能

產生一個單頁 SaaS 著陸頁。代理，請嚴格遵循以下工作流程。

1. 讀取上下文

開始撰寫前：

• 讀取當前工作目錄中的 DESIGN.md。如果不存在，請停止並要求提供。
• 識別色板、字體權杖與佈局原則。
• 注意「Agent Prompt Guide」章節 — 若與此處任何指示衝突，則以該章節為準。

2. 規劃區塊

必要區塊，依序：

1. 英雄區 — 標誌或文字商標、標題（標語輸入）、副標題（1–2 句）、主要行動呼籲、次要行動呼籲。使用 hero_density 參數作為垂直內距（px）。
2. 功能 — 3–6 個功能方塊。每個：圖示、短標題、1–2 句說明。
3. 社會證明 — proof_count 個標誌或見證。如果為 0，則跳過此區塊。
4. 定價 — 2–3 個方案。僅在 has_pricing 為 true 時包含。
5. 頁尾行動呼籲 — 大型強調色條，包含一個按鈕的行動呼籲。
6. 頁尾 — 極簡：連結 + 版權。

3. 套用設計系統

• 所有顏色必須來自 DESIGN.md 的權杖。不要自行發明十六進位值。
• 字體：使用宣告的 display 字體標題，其餘部分使用 body 字體。
• 佈局：遵循網格、最大寬度與區塊間距規則。
• 元件：使用宣告的按鈕/卡片/輸入模式。如果 DESIGN.md 的 Depth & Elevation 標示為極簡，則不要添加陰影。
• 重點色：僅在英雄區使用一次、頁尾行動呼籲使用一次，以及所有連結使用。不要氾濫使用於頁面。

4. 寫入檔案

輸出單一自包含的 index.html，包含：

• 所有 CSS 內嵌在 <head> 的 <style> 區塊中。
• 如果 DESIGN.md 的字體無法從 Google Fonts 等處載入，則使用系統字體備援。
• 無外部 JS。
• 語意化 HTML（<header>、<main>、<section>、<footer>）。
• 每個可編輯元素標記 data-od-id="<unique-slug>"，以便主機應用程式的註解模式能鎖定該元素。

5. 自我檢查

完成前，驗證：

• 所有文字皆有內容意義，非假文（使用 product_name 與 tagline 輸入；其餘部分生成合理且具體的文案）。
• 無損壞的色彩參照（每個 CSS 顏色值都在 DESIGN.md 的色板或有效的 Alpha/備援變體中）。
• 響應式中斷點符合 DESIGN.md 的 Responsive Behavior 章節。
• 頁面在 1440w、768w 與 375w 下看起來良好（心智模擬）。
• 重點色總計使用不超過兩次。

6. 完成

只寫 index.html。不要產生獨立的 CSS 檔、JS 檔或 README。

---

供技能作者作為參考閱讀

這是一個最小但完整的技能。結構：

saas-landing-skill/
├── SKILL.md    ← 您在此處
└── assets/
    └── base.html    （可選的起始模板；此技能不使用）

值得注意的事項：

• od: 前端資料區塊保留了相容性中繼資料。Clean Design 會讀取其型別輸入、滑桿、預覽中繼資料與能力提示。
• 前端資料下方的工作流程是純 Markdown，代理將其視為系統提示。
• DESIGN.md 被視為協作者，而非覆寫。技能賦予代理在簡報衝突時進行覆寫的權限，但絕不能發明新權杖。
• data-od-id 標籤將元素連接到本地註解模式。需要註解模式相容性的技能必須為其輸出添加註釋。

請參閱 ../../skills-protocol.md 以了解完整協議。