onfire7777/universal-ai-skills-library

SaaS Landing Skill

Erzeuge eine einseitige SaaS-Landingpage. Agent, folge exakt diesem Workflow.

1. Kontext lesen

Bevor du schreibst:

• Lies DESIGN.md im aktuellen Arbeitsverzeichnis. Wenn die Datei fehlt, stoppe und fordere eine an.
• Identifiziere die Farbpalette, Typografie-Tokens und Layout-Prinzipien.
• Beachte den Abschnitt „Agent Prompt Guide“ – dieser überschreibt alle hier widersprechenden Anweisungen.

2. Abschnitte planen

Erforderliche Abschnitte in dieser Reihenfolge:

1. Hero – Logo oder Wortmarke, Überschrift (Tagline-Eingabe), Untertitel (1–2 Sätze), primärer CTA, sekundärer CTA. Verwende den Parameter hero_density als vertikalen Abstand in px.
2. Features – 3–6 Feature-Kacheln. Jede: Icon, kurzer Titel, 1–2 Sätze Beschreibung.
3. Soziale Beweise – proof_count Logos oder Testimonials. Wenn 0, überspringe diesen Abschnitt.
4. Preise – 2–3 Stufen. Nur einfügen, wenn has_pricing wahr ist.
5. Footer-CTA – großer, akzentfarbener Banner mit einem Button als Handlungsaufforderung.
6. Footer – minimal: Links + Copyright.

3. Designsystem anwenden

• Alle Farben müssen aus DESIGN.md-Tokens stammen. Erfinde keine Hex-Werte.
• Typografie: Verwende die deklarierte Display-Schriftart für Überschriften, die Body-Schriftart für alles andere.
• Layout: Respektiere das Raster, die maximale Breite und die Abschnittsabstände.
• Komponenten: Verwende die deklarierten Button-/Karten-/Eingabemuster. Füge keine Schatten hinzu, wenn DESIGN.md bei „Tiefe & Höhe“ „minimal“ angibt.
• Akzent: Verwende die Akzentfarbe nur einmal im Hero, einmal im Footer-CTA und für alle Links. Überschwemme die Seite nicht damit.

4. Datei schreiben

Gib eine einzelne, eigenständige index.html aus mit:

• Gesamtes CSS inline in einem <style>-Block im <head>.
• Systemschriftarten als Fallback, falls DESIGN.md-Schriftarten nicht von Google Fonts o. Ä. geladen werden können.
• Kein externes JS.
• Semantisches HTML (<header>, <main>, <section>, <footer>).
• Jedes bearbeitbare Element mit data-od-id="<eindeutiger-slug>" versehen, damit der Kommentarmodus der Host-App darauf zugreifen kann.

5. Selbstprüfung

Überprüfe vor dem Abschluss:

• Alle Texte sind inhaltlich sinnvoll, kein Lorem Ipsum (verwende die Eingaben product_name und tagline; generiere plausible, spezifische Kopien für den Rest).
• Keine kaputten Farbverweise (jeder CSS-Farbwert stammt aus der Palette von DESIGN.md oder einer gültigen Alpha-/Fallback-Variante).
• Responsive Breakpoints stimmen mit dem Abschnitt „Responsives Verhalten“ von DESIGN.md überein.
• Die Seite sieht bei 1440w, 768w und 375w gut aus (mental simulieren).
• Akzent maximal zweimal insgesamt verwendet.

6. Fertig

Schreibe nur index.html. Erzeuge keine separate CSS-Datei, JS-Datei oder README.

---

Für Skill-Autoren, die dies als Referenz lesen

Dies ist ein minimaler, aber vollständiger Skill. Struktur:

saas-landing-skill/
├── SKILL.md    ← du bist hier
└── assets/
    └── base.html    (optionales Start-Template; dieser Skill verwendet keins)

Beachte:

• Der od:-Frontmatter-Block ist für die reine Claude-Code-Kompatibilität optional, aktiviert aber bei OD die typisierten Eingaben, Schieberegler, Vorschaumetadaten und die Fähigkeitssteuerung.
• Der Workflow unterhalb des Frontmatters ist reines Markdown, das der Agent als Systemprompt liest.
• DESIGN.md wird als Mitarbeiter behandelt, nicht als Überschreibung. Der Skill gibt dem Agenten die Autorität, zu überschreiben, wenn die Aufgabenbeschreibung widerspricht, aber niemals, um neue Tokens zu erfinden.
• Die data-od-id-Markierung ist die Methode, um Elemente mit dem Kommentarmodus zu verbinden. Skills, die Kommentarmodus-Kompatibilität wünschen, müssen ihre Ausgabe annotieren.

Siehe ../../skills-protocol.md für das vollständige Protokoll.