SaaS Landing

SaaS Landing Skill

Erstelle eine einseitige SaaS-Landingpage. Agent, führe diesen Workflow exakt aus.

1. Kontext lesen

Bevor du etwas schreibst:

• Lese DESIGN.md im aktuellen Arbeitsverzeichnis. Fehlt sie, stoppe und fordere eine an.
• Identifiziere die Farbpalette, Typografie-Tokens und Layout-Prinzipien.
• Beachte den Abschnitt "Agent Prompt Guide" – dieser überschreibt jede hier stehende Anweisung, falls Konflikte auftreten.

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 Satz Beschreibung.
3. Soziale Beweise – proof_count Logos oder Testimonials. Bei 0 diesen Abschnitt überspringen.
4. Preise – 2–3 Tarife. Nur einfügen, wenn has_pricing wahr ist.
5. Footer CTA – Großer, akzentfarbener Bereich mit einem Button zum Handeln.
6. Footer – Minimal: Links + Copyright.

3. Designsystem anwenden

• Alle Farben müssen aus den DESIGN.md-Tokens stammen. Keine eigenen Hex-Werte erfinden.
• Typografie: Verwende die deklarierte Display-Schrift für Überschriften, die Body-Schrift für alles andere.
• Layout: Beachte die Regeln für Raster, maximale Breite und Abschnittsabstände.
• Komponenten: Verwende die deklarierten Button-/Karten-/Eingabemuster. Füge keine Schatten hinzu, wenn DESIGN.md unter "Tiefe & Höhe" minimalistische Angaben macht.
• Akzentfarbe: Verwende die Akzentfarbe nur einmal im Hero, einmal im Footer CTA und für alle Links. Überschwemme die Seite nicht damit.

4. Datei schreiben

Erstelle eine einzelne, in sich geschlossene index.html mit:

• Sämtlichem CSS inline in einem <style>-Block im <head>.
• Systemfont-Fallbacks, falls die DESIGN.md-Schriftarten nicht über Google Fonts etc. geladen werden können.
• Keinem externen JavaScript.
• Semantischem HTML (<header>, <main>, <section>, <footer>).
• Jedes bearbeitbare Element mit data-od-id="<eindeutiger-slug>" getaggt, damit die Kommentarfunktion der Host-App darauf zugreifen kann.

5. Selbstprüfung

Beende die Arbeit erst, nachdem du Folgendes überprüft hast:

• Der gesamte Text ist inhaltlich sinnvoll, kein Lorem Ipsum (verwende die Eingaben product_name und tagline; generiere plausible, spezifische Kopien für den Rest).
• Keine defekten Farbverweise (jeder CSS-Farbwert stammt aus der Palette von DESIGN.md oder einer gültigen Alpha-/Fallback-Variante).
• Responsive Breakpoints entsprechen dem Abschnitt "Responsive Verhalten" in DESIGN.md.
• Die Seite sieht bei 1440w, 768w und 375w gut aus (mental simulieren).
• Akzentfarbe insgesamt nicht mehr als zweimal verwendet.

6. Fertig

Schreibe nur index.html. Erstelle 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)

Wissenswertes:

• Der od: Frontmatter-Block ist optional für reine Claude-Code-Kompatibilität, aber das Hinzufügen schaltet die getippten Eingaben, Slider, Vorschaumetadaten und die Fähigkeitssteuerung von OD frei.
• Der Workflow unterhalb des Frontmatters ist einfaches 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, zu überschreiben, wenn die Anweisungen widersprüchlich sind, aber niemals neue Tokens zu erfinden.
• data-od-id-Tagging ist die Methode, um Elemente mit dem Kommentarmodus zu verbinden. Skills, die Kommentarmodus-Kompatibilität wünschen, müssen ihre Ausgabe entsprechend annotieren.

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