Communitygithub.com

pujan-modha/clover-design

生成一個現代化、專注於轉換率的 SaaS 登陸頁面。

clover-design 是什麼?

這是一個 AI Agent 技能,用於生成現代化、專注於轉換率的 SaaS 登陸頁面。它特別適合開發者、產品經理或行銷人員,能快速產出結構完整的單頁 HTML,內嵌所有樣式,無需外部依賴。該技能支援所有可執行 markdown 指令的 AI Agent 平台(如 Claude Code、Coder 等),遵循嚴格但靈活的設計規則,例如禁止使用紫色/青色漸層、禁止三欄等寬卡片、禁止 Inter 字體,並強制使用 Geist、Satoshi 或 Cabinet Grotesk 字體。頁面結構包含黏性導航、英雄區、社會證明、交替排版功能區、推薦、三層定價表、CTA 橫幅和頁尾。它採用行動優先的響應式斷點、CSS 自訂屬性主題化和平滑滾動行為,確保視覺一致性與高效開發。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/pujan-modha/clover-design/tree/HEAD/skills/saas-landing

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

SaaS 登陸頁面技能

生成一個現代化、專注於轉換率的 SaaS 登陸頁面。

規則

  • 單頁佈局,配備黏性導航
  • 英雄區使用漸層背景(禁止使用紫色/青色漸層)
  • 功能網格顯示 3-4 個功能(禁止使用三欄等寬卡片)
  • 社會證明區,使用真實公司標誌或佔位區塊
  • 定價表顯示 3 個方案
  • 頁尾包含電子報訂閱功能
  • 使用提供的公司名稱和標語
  • 尊重主色用於重點強調(每個畫面最多使用 2 次)
  • 禁止使用 Inter 字體。請使用 Geist、Satoshi 或 Cabinet Grotesk

結構

  1. 導航(黏性,帶模糊背景效果)
  2. 英雄區(左側文字 + 右側視覺/數據)
  3. 社會證明(標誌橫條)
  4. 功能區(交替排版)
  5. 推薦區(1 個重點推薦 + 網格)
  6. 定價區(3 個方案,中間方案強調)
  7. CTA 橫幅
  8. 頁尾

技術

  • 單一 HTML 檔案,內嵌 CSS
  • 響應式:行動優先斷點
  • CSS 自訂屬性實現主題化
  • 平滑滾動行為

相關技能