SaaS-Landing Skill

Erzeuge eine einseitige SaaS-Landing-Page. Agent, befolge diesen Workflow exakt.

1. Kontext lesen

Bevor du irgendetwas schreibst:

Lies die DESIGN.md im aktuellen Arbeitsverzeichnis. Wenn sie fehlt, stoppe und fordere eine an.
Identifiziere die Farbpalette, Typografie-Tokens und Layout-Prinzipien.
Beachte den Abschnitt "Agent Prompt Guide" – er überschreibt alle Anweisungen hier, falls es Konflikte gibt.

Erforderliche Abschnitte (in dieser Reihenfolge):

Hero – Logo oder Wortmarke, Überschrift (Tagline-Eingabe), Unterüberschrift (1–2 Sätze), primärer CTA, sekundärer CTA. Verwende den Parameter hero_density als vertikalen Abstand in px.
Features – 3–6 Feature-Kacheln. Jede: Icon, kurzer Titel, 1–2 Sätze Text.
Sozialer Beweis – proof_count Logos oder Testimonials. Wenn 0, überspringe diesen Abschnitt.
Preise – 2–3 Tarife. Nur einfügen, wenn has_pricing true ist.
Footer-CTA – Großer Akzent-farbener Bereich mit einem Button und Call-to-Action.
Footer – Minimal: Links + Copyright.

Alle Farben müssen aus den DESIGN.md-Tokens stammen. Erfinde keine Hex-Werte.
Typografie: Verwende die deklarierte Display-Schrift für Überschriften, die Body-Schrift für alles andere.
Layout: Beachte die Regeln für Grid, maximale Breite und 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.

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

Alle CSS in einem <style>-Block im <head> inline.
System-Schriftarten als Fallback, falls DESIGN.md-Schriften nicht von Google Fonts etc. geladen werden können.
Kein externes JS.
Semantisches HTML (<header>, <main>, <section>, <footer>).
Jedes bearbeitbare Element mit data-od-id="<einzigartiger-slug>" versehen, damit der Kommentarmodus der Host-App es ansprechen kann.

Bevor du fertig bist, überprüfe:

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

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

Dies ist ein minimales, aber vollständiges Skill. Struktur:

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

Dinge, die auffallen:

Der Front-Matter-Block (od:) enthält Kompatibilitäts-Metadaten. Clean Design liest seine typisierten Eingaben, Slider, Vorschaumetadaten und Fähigkeitshinweise.
Der Workflow unter dem Front-Matter ist einfaches Markdown, das der Agent als sein System-Prompt liest.
DESIGN.md wird als Kollaborateur behandelt, nicht als Überschreibung. Das Skill gibt dem Agenten die Befugnis zu überschreiben, wenn das Briefing widerspricht, aber niemals, um neue Tokens zu erfinden.
data-od-id-Tags verbinden Elemente mit dem lokalen Kommentarmodus. Skills, die Kompatibilität mit dem Kommentarmodus wünschen, müssen ihre Ausgabe so annotieren.

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