Communitygithub.com

pujan-modha/clover-design

Generiere eine moderne, konversionsoptimierte SaaS-Landingpage.

Was ist clover-design?

Dieser Skill generiert eine moderne, auf Konversion ausgerichtete SaaS-Landingpage als einzelne HTML-Datei mit Inline-CSS. Das Ergebnis ist eine vollständig responsive Seite nach dem Mobile-First-Prinzip, die aus acht wesentlichen Abschnitten besteht: sticky Navigation, Hero-Bereich mit dezentem Farbverlauf (kein Lila/Cyan), Social-Proof mit Platzhalterlogos, ein Feature-Grid (keine 3-spaltigen Karten), Tabs mit Kundenmeinungen, eine Preistabelle mit drei gestaffelten Tarifen, einem CTA-Banner und Footer mit Newsletter-Anmeldung. Der Skill eignet sich besonders für Agenturen oder Entwickler, die schnell eine Landingpage brauchen, die sich durch ein sauberes, seriöses Design auszeichnet – die erzwungene Verwendung von Schriften wie Geist, Satoshi oder Cabinet Grotesk (statt Inter) sorgt für einen modernen Look. Einschränkungen wie max. zwei Akzentfarben pro Bildschirm und keine lila-cyan-Verläufe verhindern übertriebene Effekte und fördern eine klare, professionelle Optik. Unterstützt wird die Arbeit direkt über das Ausführen des Skills in Claude Code, Cursor oder Codex – der Anwender gibt lediglich Firmenname, Tagline und primäre Farbe vor.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/pujan-modha/clover-design/tree/HEAD/skills/saas-landing
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

SaaS-Landingpage-Skill

Generiere eine moderne, konversionsoptimierte SaaS-Landingpage.

Regeln

  • Single-Page-Layout mit sticky Navigation
  • Hero-Bereich mit Farbverlauf im Hintergrund (KEINE lila/cyan-Verläufe)
  • Feature-Grid mit 3–4 Features (KEINE 3-spaltigen gleich breiten Karten)
  • Social-Proof-Abschnitt mit echten Firmenlogos oder Platzhalterblöcken
  • Preistabelle mit 3 Stufen
  • Footer mit Newsletter-Anmeldung
  • Verwende den angegebenen Firmennamen und Tagline
  • Respektiere die Primärfarbe für Akzente (max. 2 Verwendungen pro Bildschirm)
  • Die Schriftart Inter ist VERBOTEN. Verwende Geist, Satoshi oder Cabinet Grotesk

Struktur

  1. Navigation (sticky, Blur-Hintergrund)
  2. Hero (links Text + rechts Visual/Metrik)
  3. Social Proof (Logo-Leiste)
  4. Features (wechselndes Layout)
  5. Testimonials (1 hervorgehoben + Raster)
  6. Preise (3 Stufen, mittlere hervorgehoben)
  7. CTA-Banner
  8. Footer

Technisch

  • Einzelne HTML-Datei mit Inline-CSS
  • Responsive: Mobile-First-Breakpoints
  • CSS Custom Properties für Theming
  • Sanftes Scrollverhalten

Verwandte Skills

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