技能概述
Pricing Page 技能生成一個獨立的定價頁面，包含：頁面標題 + 副標題（可選月/年切換）、套餐卡片（每層含價格、定位語、4-6 項功能、CTA 按鈕，推薦方案加 accent border 或 badge）、功能比較表（功能行 × 套餐列，✓/—/值單元格，sticky header）、FAQ（4-6 個可折疊問答項）、頁腳 CTA。
觸發關鍵字
- pricing、pricing page、plans、subscription、compare plans、定價、套餐
什麼時候用
- SaaS 產品定價頁
- 服務套餐比較
- 訂閱方案展示
- 免費/付費方案對比
使用方法
自然語言觸發
帮我做一个定价页面
做一個 compare plans 頁面
整一個 subscription pricing 頁
指定技能
用 pricing-page 技能生成我哋產品嘅定價頁
標準工作流程
- 讀 DESIGN.md — 僅使用其顏色、字型 token 同組件模式
- 判斷產品類型 — 選擇套餐結構：
- 3 層（最常見）：Free / Pro / Team 或 Starter / Growth / Enterprise
- 4 層（brief 提到 "scale" 或 "enterprise plus"）
- 2 層（brief 提到 "individual / business"）
- 頁面結構（由上到下）：
- Hero — 標題（如 "Pricing"）、一行副標題、月/年切換（可選）
- Plan cards — 每層卡片含：名稱、價格（display font + 大字號）、定位語、4-6 項功能、CTA。推薦方案加 accent border 或 badge
- Comparison table — 功能行 × 套餐列，分 2-3 個邏輯區塊（Core、Collaboration、Support…），sticky header
- FAQ — 4-6 個
<details><summary>折疊問答，無需 JS - Footer CTA — 一行文字 + 按鈕
- 價格渲染 — 數字用 display font，貨幣單位用 body font
輸出格式
單文件 HTML，inline CSS。CSS Grid 用於 plan cards 和 comparison table。每個 tier card 和 table row 都有 data-od-id。
自檢清單
- 價格對產品合理（唔係 "$X / month"）
- accent 只在推薦方案同一個 CTA 上出現
- 比較表格喺 1024px 清晰，768px 以下可讀（旋轉列標題或 scroll-x）
- 功能名真實，唔係假名
實際例子
例子 1：SaaS 定價
用戶：「幫我整一個 SaaS 工具嘅定價頁，三個方案」
生成：
- Starter ($9/mo)、Growth ($29/mo)、Enterprise（Contact Us）
- Growth 標記為 "Most Popular"
- 比較表：Features / Collaboration / Security 三大區塊
例子 2：服務套餐
用戶：「用 pricing-page 做一個 consulting service 嘅套餐比較頁」
生成：
- Basic / Pro / Premium 三層
- 每層含具體服務項目、交付物、response time
- FAQ 解答常見問題