splatstudio

Fähigkeit: E-Mail-Marketing

Erstellen Sie eine einzelne HTML-E-Mail – zentriert, einzelne Spalte, ohne Chrom um den E-Mail-Body. Behandeln Sie sie wie ein Marketing-Artefakt: eine große Idee, ein CTA.

Arbeitsablauf

1. Lesen Sie die aktuelle DESIGN.md (oben eingefügt). E-Mails verlassen sich mehr als jede andere Oberfläche auf die Display-Schrift – wählen Sie das lauteste Schrift-Token im Designsystem für die Headline-Lockup.
2. Wählen Sie Marke + Produkt aus dem Brief. Generieren Sie eine echte Wortmarke, einen echten Produktnamen und einen echten Nutzensatz – keine Platzhalter.
3. Layout, in dieser Reihenfolge, alles zentriert innerhalb einer 600–680px breiten Spalte auf einem getönten Seitenhintergrund (damit der E-Mail-Body wie eine E-Mail aussieht, nicht wie die Seite):
   • Masthead – Wortmarke links + 3 kurze Nav-Links (SHOP, JOURNAL, MEMBERS) rechts. Dünne Unterstreichung.
   • Hero-Block – ein 16:9-Produktbildplatzhalter. Verwenden Sie einen im Designsystem getönten Farbverlauf oder eine stilisierte SVG-Silhouette des Produkts (Schuh, Flasche, Kopfhörer, was auch immer der Brief impliziert). Fügen Sie oben links einen kleinen Markenstempel und unten links ein Farbvariante-Tag hinzu.
   • Eyebrow – Kapitälchen, Akzentfarbe, getrennt durch ·-Zeichen (z. B. „NEU · MAX-CUSHION-TRAINER · EMBER FLARE“).
   • Headline-Lockup – 2–3-zeilige Headline in Display-Schrift, durchgehend großgeschrieben, extremer Buchstabenabstand. Wenden Sie eine leichte Neigung (transform: skew(-6deg)) auf ein Akzentwort an, um ein sportliches Parallelogramm-Gefühl zu erzeugen.
   • Fließtext – 2–3 Sätze Absatz, linksbündig, in der Text-Schrift.
   • Primärer CTA – solider Pill- oder Block-Button. Nur einer.
   • Spezifikationen-Raster – 2×2-Raster mit (große Zahl + Einheit + Bezeichnung) Hervorhebungen, wobei die Zahlen in der Display-Schrift gesetzt werden.
   • Fußzeile – Wortmarke, Adresszeile, Abmelde- und Im-Browser-anschauen-Links.
4. Schreiben Sie ein einzelnes HTML-Dokument:
   • <!doctype html> bis </html>, CSS inline.
   • Zentrieren Sie die Spalte mit margin: 0 auto. Setzen Sie body { background: <Tönung> }, damit die E-Mail-auf-Seite-Metapher lesbar ist.
   • Keine externen Bilder – verwenden Sie Inline-SVG oder im Designsystem getönte Farbverlauf-Blöcke für das Produktfoto.
   • data-od-id auf Masthead, Hero, Headline, CTA, Spezifikationen.
5. Selbstprüfung:
   • E-Mail ist von oben nach unten in 8–10 Sekunden lesbar.
   • Ein CTA. Die Akzentfarbe erscheint höchstens zweimal (Eyebrow + CTA oder Headline-Wort).
   • Sieht auf einem 480px-Fenster lesbar aus (Spalte bricht um, Schriftgröße fällt eine Stufe).

Ausgabe-Vertrag

Geben Sie zwischen <artifact>-Tags aus:

<artifact identifier="email-slug" type="text/html" title="E-Mail — Betreffzeile">
<!doctype html>
<html>...</html>
</artifact>

Ein Satz vor dem Artefakt, nichts danach.