skeletorflet/opencode-supreme-setup

SaaS Landing 技能

生成一個單頁 SaaS 登陸頁面。代理請嚴格依循以下工作流程。

1. 讀取上下文

在開始撰寫前：

• 讀取目前工作目錄下的 DESIGN.md。若缺少該檔案，請停止並要求提供。
• 標記色彩調色盤、字體標記與佈局原則。
• 注意「Agent Prompt Guide」區塊 — 若與此處指示衝突，則以此為準。

2. 規劃區塊

所需區塊（依序）：

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

3. 套用設計系統

• 所有色彩必須來自 DESIGN.md 的標記。不要自創十六進位色碼。
• 字體：標題使用宣告的顯示字體，其他內容使用正文字體。
• 佈局：遵循網格、最大寬度與區塊間距規則。
• 元件：使用宣告的按鈕/卡片/輸入模式。若 DESIGN.md 的「深度與立體感」標示為極簡，則不要加入陰影。
• 強調色：僅在英雄區使用一次，頁尾行動呼籲使用一次，以及所有連結。不要過度使用。

4. 撰寫檔案

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

• 所有 CSS 內嵌於 <head> 中的 <style> 區塊。
• 若 DESIGN.md 的字體無法從 Google Fonts 等載入，則使用系統字體備援。
• 無外部 JavaScript。
• 語義化 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 檔案、JavaScript 檔案或 README。

---

技能作者參考

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

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

注意事項：

• od: 前置區塊為選用（僅相容 Claude-Code 時），但加入後可啟用 OD 的型別輸入、滑桿、預覽元資料與能力閘控。
• 前置區塊下方的工作流程為純 Markdown，代理將其視為系統提示。
• DESIGN.md 被視為協作者而非覆寫層。當簡報與之衝突時，技能授予代理覆寫權限，但不得自創新標記。
• data-od-id 標籤是將元素連接至注釋模式的方式。需要注釋模式相容性的技能必須為其輸出加上標記。

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