jpoindexter/theft-kit

Einzeilige SaaS-Landingpage mit Hero, Features, Social Proof, Preisen und CTA. Respektiert die Farb-, Typografie- und Layout-Tokens der aktiven DESIGN.md.

Was ist theft-kit?

Dieses Skill generiert eine vollständige, einseitige SaaS-Landingpage, die sich strikt an die in einer `DESIGN.md` definierten Design-Tokens hält. Es ist besonders nützlich für Entwickler und Produktteams, die schnell konsistente Marketingseiten für ihre SaaS-Produkte erstellen möchten, ohne sich um manuelle Designentscheidungen kümmern zu müssen. Das Skill unterstützt die Claude Code CLI und ähnliche agentenbasierte Entwicklungsumgebungen, indem es einen präzisen Workflow vorgibt. Der Agent liest zunächst die `DESIGN.md`, plant dann die sechs erforderlichen Abschnitte (Hero, Features, Social Proof, Preise, Footer CTA und Footer), wendet das Farbschema und die Typografie an und schreibt schließlich eine einzige, eigenständige `index.html` mit Inline-CSS und semantischem HTML. Jedes bearbeitbare Element erhält ein `data-od-id`-Attribut, um Bearbeitungsmodi im Host-Programm zu ermöglichen. Das Skill vermeidet Platzhaltertexte, überprüft auf referenzielle Konsistenz mit der Design-Datei und stellt die visuelle Korrektheit auf verschiedenen Bildschirmgrößen sicher.

Funktioniert mit✓Claude Code~Codex CLI~Cursor

npx skills add https://github.com/jpoindexter/theft-kit/tree/HEAD/saas-landing

Dokumentation

SaaS-Landing-Skill

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

1. Kontext lesen

Bevor du etwas schreibst:

Lies DESIGN.md im aktuellen Arbeitsverzeichnis. Fehlt sie, stoppe und fordere eine an.
Identifiziere die Farbpalette, die Typografie-Token und die Layout-Prinzipien.
Beachte den Abschnitt "Agent Prompt Guide" – er überschreibt jede Anweisung hier, falls sie widersprüchlich sind.

2. Abschnitte planen

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 Innenabstand in Pixeln.
Features – 3–6 Feature-Kacheln. Jede: Icon, kurzer Titel, 1–2 Sätze Text.
Social Proof – proof_count Logos oder Testimonials. Falls 0, diesen Abschnitt überspringen.
Preise – 2–3 Tarife. Nur einfügen, wenn has_pricing wahr ist.
Footer CTA – großer akzentfarbener Streifen mit einem Button als Call-to-Action.
Footer – minimalistisch: Links + Copyright.

3. Design-System anwenden

Alle Farben müssen aus den DESIGN.md-Token stammen. Erfinde keine Hex-Werte.
Typografie: Verwende die deklarierte Anzeigeschrift für Überschriften, die Körperschrift für alles andere.
Layout: Respektiere die Regeln für Raster, maximale Breite und Abschnittsabstände.
Komponenten: Verwende die deklarierten Button-/Card-/Input-Muster. Füge keine Schatten hinzu, wenn DESIGN.md bei "Tiefe & Höhe" minimal ist.
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 einzige eigenständige index.html mit:

Gesamtes CSS inline in einem <style>-Block im <head>.
System-Schriftarten als Fallback, falls die DESIGN.md-Schriftarten nicht von Google Fonts usw. 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-App darauf zugreifen kann.

5. Selbstprüfung

Überprüfe vor dem Abschließen:

Der gesamte Text ist inhaltlich sinnvoll, kein Lorem Ipsum (verwende die Eingaben product_name und tagline; generiere für den Rest plausible spezifische Kopien).
Keine kaputten Farbverweise (jeder CSS-Farbwert stammt aus der DESIGN.md-Palette oder einer gültigen Alpha-/Fallback-Variante).
Responsive Breakpoints entsprechen dem Abschnitt "Responsive Behavior" der DESIGN.md.
Die Seite sieht gut aus bei 1440w, 768w und 375w (mental simulieren).
Akzentfarbe insgesamt höchstens zweimal 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 minimales, aber vollständiges Skill. Struktur:

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

Wichtige Punkte:

Der od:-Frontmatter-Block ist optional für reine Claude-Code-Kompatibilität, aber wenn er hinzugefügt wird, aktiviert er ODs typisierte Eingaben, Schieberegler, Vorschaumetadaten und Capability-Gating.
Der Workflow unter dem Frontmatter ist reines Markdown, das der Agent als System-Prompt liest.
DESIGN.md wird als Mitarbeiter behandelt, nicht als Überschreibung. Das Skill gibt dem Agenten die Autorität, zu überschreiben, wenn der Brief widersprüchlich ist, aber niemals neue Tokens zu erfinden.
Die data-od-id-Markierung ist die Methode, Elemente mit dem Kommentarmodus zu verdrahten. Skills, die Kommentarmodus-Kompatibilität wünschen, müssen ihre Ausgabe entsprechend annotieren.

Behalte diese vier Regeln im Paketvertrag; verlasse dich nicht auf eine Protocol-Datei auf Repository-Ebene, die möglicherweise nicht mit diesem Skill mitgeliefert wird.