Communitygithub.com

webiscorp/designskill-open

Durch Injektion dieser Datei in die KI wird eine einzelne Landingpage innerhalb eines Strukturvertrags erstellt.

Was ist designskill-open?

Diese Fähigkeit befähigt KI-Assistenten (wie Claude Code, Cursor oder Codex), eine einzelne Landingpage zu generieren, die streng einem vorgegebenen Strukturvertrag folgt. Sie legt fest, dass nur reine Tailwind CDN-Klassen verwendet werden dürfen, keinerlei benutzerdefiniertes CSS oder JavaScript. Der Entwickler oder Agent kann über einen Eingabevertrag die Marke, Branche, Farbpalette, den Abschnittsablauf und Einschränkungen definieren. Die Fähigkeit automatisiert dann die Erstellung des Seiten-Scaffolds, befüllt echte branchenspezifische Texte (kein Lorem Ipsum) und prüft die Einhaltung von WCAG AA-Kontrast und konsistenten Abschnittsabständen (80–120 px). Sie ist nützlich für schnelle, konsistente und barrierefreie Landingpage-Prototypen und vermeidet Konflikte mit Redesign-Fähigkeiten oder das Einfügen falscher Statistiken.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/webiscorp/designskill-open/tree/HEAD/skills/landing-generate
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Landing-Erstellungs-Skill

Durch Injektion dieser Datei in die KI wird eine einzelne Landingpage innerhalb eines Strukturvertrags erstellt.

Rolle und Anwendungsbereich

  • Einzelseiten-Landingpage-Erstellung (keine Mehrseiten)
  • Nur reine Tailwind CDN-Klassen verwenden – benutzerdefiniertes CSS/JS verboten
  • Wenn ein Projektstrukturvertrag (Klassennamen, Dateianordnung) existiert, hat dieser immer Vorrang

Eingabevertrag

  • brand: Markenname · einzeilige Beschreibung
  • industry: Branche (bestimmt den Ton)
  • palette: Primärfarbe + Sekundärfarbe (hex)
  • sections: Array der Abschnittsreihenfolge
  • constraints: Verbotene Elemente (Standard: custom-css, js)

Ausführungsschritte

  1. Strukturvertrag prüfen – falls vorhanden, den Benennungen und der Anordnung des Vertrags folgen
  2. Abschnittsscaffold erstellen – inklusive Kommentaren zu Reihenfolge und Rolle
  3. Texte einfügen – echte Sätze passend zum Branchenton (Lorem ipsum verboten)
  4. Kontrast und Abstände prüfen – WCAG AA, Abschnittsrhythmus 80–120 px

Verbotene Handlungen

  • Gleichzeitige Injektion mit einem Redesign-Skill verboten (Rollenkonflikt)
  • Generierung von unbegründeten Auszeichnungen, Statistiken oder anderem falschem Text verboten

Fertigstellungskriterien

  • Rendering bei 360/768/1440 normal, Kontrast AA, 0 Konsolenfehler

Generiert & bereitgestellt von DesignSkill

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