Communitygithub.com

pujan-modha/clover-design

Generate a modern, conversion-focused SaaS landing page.

What is clover-design?

clover-design is a Claude Code agent skill that generate a modern, conversion-focused SaaS landing page.

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

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

Documentation

SaaS Landing Page Skill

Generate a modern, conversion-focused SaaS landing page.

Rules

  • Single-page layout with sticky navigation
  • Hero section with gradient background (NO purple/cyan gradients)
  • Feature grid with 3-4 features (NO 3-column equal cards)
  • Social proof section with real company logos or placeholder blocks
  • Pricing table with 3 tiers
  • Footer with newsletter signup
  • Use the provided company name and tagline
  • Respect the primary color for accents (max 2 uses per screen)
  • Inter font is FORBIDDEN. Use Geist, Satoshi, or Cabinet Grotesk

Structure

  1. Navigation (sticky, blur backdrop)
  2. Hero (left text + right visual/metric)
  3. Social proof (logo bar)
  4. Features (alternating layout)
  5. Testimonials (1 highlighted + grid)
  6. Pricing (3 tiers, middle emphasized)
  7. CTA banner
  8. Footer

Technical

  • Single-file HTML with inline CSS
  • Responsive: mobile-first breakpoints
  • CSS custom properties for theming
  • Smooth scroll behavior

Related Skills