Communitygithub.com

pujan-modha/clover-design

Générez une page d'atterrissage SaaS moderne et axée sur la conversion.

Qu'est-ce que clover-design ?

Ce skill permet de générer une page d'atterrissage SaaS complète, moderne et optimisée pour la conversion, en un seul fichier HTML avec CSS intégré. Il est conçu pour les développeurs et les concepteurs qui souhaitent créer rapidement une page de présentation professionnelle pour une application SaaS, en suivant les meilleures pratiques de conception (navigation collante, dégradés, grille de fonctionnalités, preuve sociale, grille tarifaire, pied de page avec inscription à la newsletter). Le skill applique des règles strictes pour éviter les gradients violet/cyan, les polices Inter ou les cartes à 3 colonnes égales, garantissant ainsi un design cohérent et moderne. Il est idéal pour les agents comme Claude Code, Cursor ou Codex, qui peuvent exécuter ce skill dans l'environnement de l'utilisateur en générant le fichier HTML complet avec des propriétés CSS personnalisées pour le thème, une mise en page responsive mobile-first et un défilement fluide.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/pujan-modha/clover-design/tree/HEAD/skills/saas-landing
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Skill Page d'Atterrissage SaaS

Générez une page d'atterrissage SaaS moderne et axée sur la conversion.

Règles

  • Mise en page sur une seule page avec navigation collante
  • Section héros avec fond dégradé (PAS de dégradés violet/cyan)
  • Grille de fonctionnalités avec 3-4 fonctionnalités (PAS de cartes égales sur 3 colonnes)
  • Section de preuve sociale avec des logos d'entreprises réels ou des blocs fictifs
  • Tableau de prix avec 3 niveaux
  • Pied de page avec inscription à la newsletter
  • Utilisez le nom et le slogan de l'entreprise fournis
  • Respectez la couleur principale pour les accents (max 2 utilisations par écran)
  • La police Inter est INTERDITE. Utilisez Geist, Satoshi ou Cabinet Grotesk

Structure

  1. Navigation (collante, fond flou)
  2. Héros (texte à gauche + visuel/métrique à droite)
  3. Preuve sociale (barre de logos)
  4. Fonctionnalités (disposition alternée)
  5. Témoignages (1 en évidence + grille)
  6. Prix (3 niveaux, celui du milieu mis en avant)
  7. Bannière d'appel à l'action
  8. Pied de page

Technique

  • Fichier HTML unique avec CSS en ligne
  • Responsive : points de rupture mobiles d'abord
  • Propriétés personnalisées CSS pour le thème
  • Comportement de défilement fluide

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community