Communitygithub.com

pujan-modha/clover-design

Gere uma landing page SaaS moderna e focada em conversão.

O que é clover-design?

O Skill **pujan-modha/clover-design** permite gerar landing pages SaaS modernas e otimizadas para conversão, diretamente de um único prompt. Ele é ideal para desenvolvedores que usam agentes de IA como Claude Code, Cursor ou Codex e precisam criar rapidamente páginas de alta qualidade para seus produtos. O skill suporta a geração de uma única página HTML com CSS inline, seguindo uma estrutura completa: navegação fixa com fundo desfocado, seção hero com gradiente (sem roxo/ciano), grid de funcionalidades com layout alternado, prova social com logotipos reais ou placeholders, tabela de preços com 3 níveis (com destaque para o intermediário), depoimentos, banner de CTA e rodapé com inscrição por e-mail. As regras de design garantem consistência visual: uso controlado da cor primária (máximo 2 vezes por tela), proibição do uso da fonte Inter (deve-se usar Geist, Satoshi ou Cabinet Grotesk) e layout responsivo com foco em dispositivos móveis. O resultado é um código funcional e customizável, sem dependências externas.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/pujan-modha/clover-design/tree/HEAD/skills/saas-landing
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

Habilidade de Landing Page SaaS

Gere uma landing page SaaS moderna e focada em conversão.

Regras

  • Layout de página única com navegação fixa
  • Seção hero com fundo gradiente (SEM gradientes roxo/ciano)
  • Grid de funcionalidades com 3 a 4 itens (SEM cards iguais de 3 colunas)
  • Seção de prova social com logotipos reais de empresas ou blocos placeholders
  • Tabela de preços com 3 níveis
  • Rodapé com inscrição por e-mail
  • Use o nome e slogan da empresa fornecidos
  • Respeite a cor primária para realces (máximo 2 usos por tela)
  • A fonte Inter é PROIBIDA. Use Geist, Satoshi ou Cabinet Grotesk

Estrutura

  1. Navegação (fixa, com fundo desfocado)
  2. Hero (texto à esquerda + visual/métrica à direita)
  3. Prova social (barra de logotipos)
  4. Funcionalidades (layout alternado)
  5. Depoimentos (1 destacado + grade)
  6. Preços (3 níveis, com ênfase no intermediário)
  7. Banner de CTA
  8. Rodapé

Técnico

  • Arquivo HTML único com CSS inline
  • Responsivo: breakpoints mobile-first
  • Propriedades personalizadas CSS para tema
  • Comportamento de rolagem suave

Habilidades Relacionadas

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