技能概述
SaaS Landing 專門用於生成單頁 SaaS 產品落地頁。包含 5 個必選 section（按順序）：Hero、Features、Social Proof、Pricing、Footer CTA。嚴格遵循活躍 DESIGN.md 嘅色彩/排版/佈局規範，accent 顏色全頁最多出現兩次。
觸發關鍵字
- saas landing、marketing page、product landing
什麼時候用
- SaaS 產品落地頁
- Marketing 頁面
- 產品展示頁
- 訂閱制服務介紹頁
使用方法
自然語言觸發
帮我做一个 SaaS landing page
做一個 marketing page 展示我哋嘅產品
做一個 product landing
標準工作流程
- 讀 DESIGN.md — 確認色彩、字體、佈局、組件規範
- 規劃 Section（按順序）：
- Hero（logo/wordmark + 標題 + 副標題 + 主 CTA + 副 CTA）
- Features（3-6 個 feature tile，每個：icon + 短標題 + 描述）
- Social proof（logos / testimonials）
- Pricing（2-3 個 tier，可選）
- Footer CTA（accent band + 單一按鈕）
- Footer（links + copyright）
- 套用設計系統 — 所有顏色來自 DESIGN.md tokens
- 自檢 — accent 最多兩次、所有文案有意義、responsive 正常
輸出格式
單文件 index.html，CSS inline，語義化 HTML（<header>, <main>, <section>, <footer>），每個可編輯元素帶 data-od-id。
設計風格
完全由活躍 DESIGN.md 驅動：
- 色彩：只用 DESIGN.md 定義嘅 token
- 排版：headline 用 display font，body 用 body font
- 佈局：遵守 grid、max-width、section 間距
- Accent 預算：hero 一次 + footer CTA 一次
實際例子
例子 1：AI 工具 SaaS
用戶：「幫我做一個 AI 寫作助手嘅 landing page，產品叫 TextFlow」
生成：
- Hero：「Write Smarter, Not Harder」+ CTA「Start Free Trial」
- Features：AI Grammar / Tone Analysis / Smart Templates
- Social Proof：3 個公司 logo + 2 條 testimonial
- Pricing：Free / Pro($12/mo) / Team($29/mo)
- Footer CTA + Footer
例子 2：無 Pricing 展示頁
用戶：「做一個產品落地頁，唔使 pricing section」
生成不含 Pricing 嘅 5 section 版本。