SaaS Landing Skill

Erstelle eine einseitige SaaS-Landingpage. Agent, befolge diesen Workflow exakt.

1. Kontext lesen

Bevor du etwas 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 widersprüchliche Anweisungen hier.

Erforderliche Abschnitte, in Reihenfolge:

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 Innenabstand in Pixeln.
Features – 3–6 Feature-Kacheln. Jede: Icon, kurzer Titel, 1–2 Sätze Inhalt.
Sozialer Beweis – proof_count Logos oder Testimonials. Wenn 0, überspringe diesen Abschnitt.
Preise – 2–3 Stufen. Nur einfügen, wenn has_pricing wahr ist.
Footer CTA – großer, hervorgehobener Farbbereich mit einem Button als Handlungsaufforderung.
Footer – minimal: Links + Copyright.

Alle Farben müssen aus den DESIGN.md-Tokens stammen. Erfinde keine Hex-Werte.
Typografie: Verwende die deklarierte Display-Schriftart für Überschriften, die Körper-Schriftart für alles andere.
Layout: Respektiere die Vorgaben für Raster, maximale Breite und Abschnittsabstände.
Komponenten: Verwende die deklarierten Button-/Karten-/Eingabemuster. Füge keine Schatten hinzu, wenn DESIGN.md's Abschnitt "Tiefe & Erhebung" Minimalität vorschreibt.
Akzentfarbe: Verwende die Akzentfarbe nur einmal im Hero, einmal im Footer CTA und für alle Links. Überschwemme die Seite nicht damit.

Erstelle eine einzelne, eigenständige index.html mit:

Alle CSS inline in einem <style>-Block im <head>.
System-Schriftarten 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>" markiert, damit der Kommentarmodus der Host-Anwendung darauf zugreifen kann.

Überprüfe vor dem Abschluss:

Der gesamte Text ist inhaltlich sinnvoll, kein Lorem Ipsum (verwende die Eingaben product_name und tagline; erzeuge plausible, spezifische Texte für den Rest).
Keine kaputten Farbreferenzen (jeder CSS-Farbwert stammt aus DESIGN.md's Palette oder ist eine gültige Alpha-/Fallback-Variante).
Responsive Breakpoints entsprechen dem Abschnitt "Responsives Verhalten" in DESIGN.md.
Die Seite sieht bei 1440w, 768w und 375w gut aus (mental simulieren).
Akzentfarbe höchstens zweimal insgesamt verwendet.

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

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

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

Hinweise:

Der od:-Frontmatter-Block ist optional für die reine Claude-Code-Kompatibilität, aber durch ihn werden die typisierten Eingaben, Schieberegler, Vorschaumetadaten und die Fähigkeitsfilterung von OD aktiviert.
Der Workflow unterhalb des Frontmatters ist reines Markdown, das der Agent als System-Prompt liest.
DESIGN.md wird als Kollaborateur behandelt, nicht als Überschreibung. Der Skill gibt dem Agenten die Autorität, bei Konflikten mit der Aufgabenstellung zu überschreiben, aber niemals neue Tokens zu erfinden.
data-od-id-Markierung verbindet Elemente mit dem Kommentarmodus. Skills, die Kommentarmodus-Kompatibilität wünschen, müssen ihre Ausgabe entsprechend annotieren.

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