Communitygithub.com

pujan-modha/clover-design

生成一个现代、专注于转化率的SaaS着陆页。

clover-design 是什么?

该技能用于生成一个现代、专注于转化率的SaaS着陆页。它遵循结构化的单页布局,包含粘性导航、渐变背景的英雄区域(禁止使用紫色/青色渐变)、3-4个功能点(非三列等宽卡片)、社会证明区域、三栏定价表和带有新闻订阅的页脚。技能严格规定了设计规则,如强调中间定价方案、限制主色使用频率(每屏最多两次),并禁止使用Inter字体,推荐使用Geist、Satoshi或Cabinet Grotesk。生成的页面为单个HTML文件,使用内联CSS,采用移动端优先的响应式断点,并利用CSS自定义属性实现主题化。该技能适用于Claude Code、Cursor等AI编程助手,帮助快速创建符合最佳实践的SaaS营销页面。

兼容平台~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 个功能点(禁止三列等宽卡片)
  • 社会证明区域,显示真实公司 logo 或占位块
  • 三栏定价表
  • 页脚包含新闻订阅
  • 使用提供的公司名称和标语
  • 主色用于强调,每屏幕最多使用两次
  • 禁止使用 Inter 字体。请使用 Geist、Satoshi 或 Cabinet Grotesk

结构

  1. 导航(粘性,模糊背景效果)
  2. 英雄区域(左文本 + 右视觉效果/指标)
  3. 社会证明(logo 栏)
  4. 功能点(交替布局)
  5. 客户评价(1 个高亮 + 网格)
  6. 定价(3 档,中间档强调)
  7. 号召性用语横幅
  8. 页脚

技术要求

  • 单文件 HTML,内联 CSS
  • 响应式:移动端优先断点
  • CSS 自定义属性用于主题化
  • 平滑滚动行为

相关技能