E-Mail-HTML ist eines der unversöhnlichsten Zielformate im Web: Jeder große Client bringt eigene Render-Eigenheiten mit, von Outlooks VML-Hintergründen bis zu Gmails Kappungsgrenze. Das E-Mail-Muster arbeitet mit dem MJML-4.x-Framework, das diese Eigenheiten hinter einer aufgeräumten Komponentensprache verbirgt, und liefert am Ende immer beide Dateien: die editierbare .mjml-Quelle und das kompilierte, versandfertige .html.
\nGedacht ist der Skill für Willkommensmails, Aktionsmails, Bestellbestätigungen und Newsletter, überall dort, wo eine E-Mail auf echten Postfächern zuverlässig aussehen muss, nicht nur in der Konzept-Vorschau. Neun feste technische Regeln, von Struktur über Barrierefreiheit bis zur Dark-Mode-Unterstützung, sowie eine Sammlung bekannter Fallstricke pro Client sorgen dafür, dass am Ende weniger im echten Postfach überrascht.
\nDie ehrliche Grenze: Der Skill kompiliert lokal über Node.js und npx, eine funktionierende Node-Umgebung ab Version 14 ist Voraussetzung. Er prüft Struktur, Validierung und die 102-KB-Kappungsgrenze, nicht den eigentlichen Versand über Ihren E-Mail-Dienst und nicht, ob die Inhalte selbst überzeugen.
\n" }, { "id": "skill-text", "title": "Skill-Text", "html": "Dies ist ein offen attribuierter externer Skill von Framix. Quelle: https://github.com/framix-team/skill-email-html-mjml
\nDieser Skill setzt Node.js ab Version 14 und eine Umgebung mit Terminal- und Dateizugriff voraus, da er MJML lokal über npx kompiliert. Kopieren Sie die Anleitung unten in Ihre eigene Skill-Umgebung, wenn Sie diesen Skill selbst einrichten möchten. Als Datei: email-html-mjml.de.json
\n" } ], "schritte": [ { "nr": 1, "titel": "Anforderungen klären", "beschreibung": "E-Mail-Typ, Markenfarben und Inhalt werden benannt oder aus dem bisherigen Gespräch abgeleitet, das Layout wird vorab festgelegt.", "rolle": "mensch" }, { "nr": 2, "titel": "Komponenten-Referenzen laden", "beschreibung": "Die zum gewählten Layout passenden Referenzdateien werden geladen, bevor die MJML-Struktur geschrieben wird.", "rolle": "automatisch" }, { "nr": 3, "titel": "MJML erstellen", "beschreibung": "Ein vollständiges MJML-Dokument mit vollständigem Kopfbereich entsteht, aufgebaut aus den passenden Komponenten.", "rolle": "automatisch" }, { "nr": 4, "titel": "Kompilieren und validieren", "beschreibung": "Das MJML wird mit aktivierter Minifizierung und strikter Validierung zu HTML kompiliert.", "rolle": "automatisch" }, { "nr": 5, "titel": "Beide Dateien liefern", "beschreibung": "Die MJML-Quelle und das kompilierte, versandfertige HTML liegen vor.", "rolle": "ergebnis" }, { "nr": 6, "titel": "Ergebnis prüfen", "beschreibung": "Die kompilierte HTML-Datei wird vor dem Versand in einer Vorschau oder einem echten Postfach geprüft, insbesondere bei Outlook und bei aktiviertem Dark Mode.", "rolle": "freigabe" } ], "herausgeber": "Voyage Digital", "version": "2.0", "stand": "2026-07-26", "umsetzung": [ { "titel": "Node-Umgebung bereitstellen", "text": "Der Skill braucht eine Umgebung mit Terminal- und Dateizugriff sowie eine lokal installierte MJML-Version, mit Node.js ab Version 14." }, { "titel": "Mit einem einzelnen E-Mail-Typ beginnen", "text": "Der Einstieg gelingt am besten mit einer einzelnen, klar abgegrenzten Vorlage, etwa einer Willkommensmail, um Layout und Regeln kennenzulernen." }, { "titel": "Für wiederkehrende Vorlagen einsetzen", "text": "Besonders geeignet ist der Skill für E-Mail-Typen, die regelmäßig neu befüllt werden, etwa Bestellbestätigungen oder saisonale Aktionsmails." }, { "titel": "Dark Mode gezielt einsetzen", "text": "Das Dark-Mode-Muster lohnt sich vor allem, wenn ein heller Hintergrund sonst zu einer harten erzwungenen Umkehrung führen würde." }, { "titel": "Ergebnis in echten Postfächern prüfen", "text": "Vor dem Versand lohnt ein Blick in eine Vorschau oder ein echtes Postfach, insbesondere bei Outlook und bei aktiviertem Dark Mode." } ], "zutaten": [ "E-Mail-Typ", "Markenfarben", "Inhalte", "Dark Mode" ], "beispielSzenario": "Ein Marketing-Team plant eine Aktionsmail zu einer zeitlich befristeten Preisaktion, die in einer Woche startet. Genannt werden der E-Mail-Typ, die beiden Markenfarben, der Kerninhalt mit Rabattcode und Frist sowie der Wunsch nach Dark-Mode-Unterstützung, da ein Teil der Zielgruppe im dunklen Modus liest. Das E-Mail-Muster baut die Struktur mit Hero-Bereich, Button und Fallback-Hintergrundfarbe für Outlook, kompiliert das Ergebnis mit strikter Validierung und liefert die MJML-Quelle zusammen mit dem fertigen, unter der Gmail-Kappungsgrenze liegenden HTML, das direkt an den Versanddienst übergeben werden kann.", "eingaben": [ { "feld": "E-Mail-Typ, z.B. Willkommensmail, Aktionsmail, Bestellbestätigung, Newsletter", "pflicht": true }, { "feld": "Markenfarben und Inhalte, aus Kontext oder direkt benannt", "pflicht": true }, { "feld": "Dark-Mode-Unterstützung gewünscht oder nicht", "pflicht": false }, { "feld": "Bestehende MJML-Vorlage, falls eine vorhandene Vorlage bearbeitet wird", "pflicht": false } ], "ausgabe": "Die MJML-Quelldatei und die daraus kompilierte, produktionsreife HTML-Datei, geprüft gegen Outlook-, Gmail- und mobile Darstellungsfallstricke, mit Alt-Texten und WCAG-konformem Kontrast.", "prompt": "# ROLLE\nSie erstellen gültige, client-übergreifende MJML-4.x-Vorlagen und kompilieren sie zu produktionsreifem HTML. Oberstes Ziel ist Kompatibilität: Outlook (2013 bis 365), Gmail (Web und App), Apple Mail und die großen mobilen Clients. Jede Ausgabe muss mit --config.validationLevel=strict kompilierbar sein und Gmails Kappungsgrenze von 102 KB einhalten.\n\n# ARBEITSABLAUF\n1. Anforderungen erfassen: E-Mail-Typ, Markenfarben und Inhalt aus der Nachricht und dem bisherigen Gespräch ableiten. Fragen Sie nur, was tatsächlich fehlt und den Fortschritt blockiert, etwa fehlende Farben bei markengebundenen Abschnitten. Stellen Sie niemals vorab einen ganzen Fragebogen.\n2. Layout planen: Struktur vor dem Code festlegen und benennen, etwa einspaltig, zweispaltiges Raster, Hero mit Inhalt darunter.\n3. Komponenten-Referenzen laden: Bevor Sie MJML schreiben, lesen Sie die passenden Dateien aus dem Komponenten-Index.\n4. MJML erzeugen: vollständiges MJML ab