• CODE
  • RENDER
  • PREVIEW
  • HUMAN

Responsive E-Mail-Layouts mit Ihrer KI erstellen

Verbinden Sie MJML mit Ihrem Agenten, um Textbeschreibungen direkt in einsatzbereiten E-Mail-Code zu verwandeln. Beschreiben Sie einfach das gewünschte Layout.

Fragen Sie die KI zu dieser Seite

Kurzantwort

Wie erstelle ich responsive E-Mails mit KI?

Sie beschreiben die Struktur, Spalten oder Inhalte einfach in natürlicher Sprache. Ihr Agent nutzt das MJML-Tool, um das Markup zu schreiben und das fertige HTML zu rendern. Sie erhalten validen, responsiven Code, der sofort für Ihren E-Mail-Anbieter bereit ist.

Das erhalten Sie

Was Ihr Agent liefert

Je nach Prompt liefert Ihr Agent unterschiedliche technische Ergebnisse.

CODE

Gültiges MJML-Markup

Der Agent schreibt den MJML-Quellcode basierend auf Ihren Layout-Vorgaben. Sie können diesen direkt in Ihren Editor kopieren.

RENDER

Einsatzbereites HTML

Der Agent konvertiert das Markup in Standard-HTML. Das ist die Version, die Sie tatsächlich in Ihre E-Mail-Plattform hochladen.

PREVIEW

Visuelle Layout-Prüfung

Der Agent rendert den Code, damit Sie sehen können, wie Spalten und Bilder auf verschiedenen Bildschirmen dargestellt werden.

HUMAN

Manuelle Verfeinerung

Sie prüfen den generierten Code, um Farben, Abstände oder das Branding manuell anzupassen.

Der Ablauf

Was Ihre KI tut, sobald die Beschreibung vorliegt.

Der Agent fungiert als Brücke zwischen Ihren Ideen und der MJML-Syntax.

  1. Layout interpretieren

    Ihr Agent analysiert Ihre Beschreibung von Spalten, Sektionen und Textblöcken, um die beabsichtigte Struktur zu verstehen.

    render_mjml

  2. Markup schreiben

    Der Agent übersetzt diese strukturellen Anforderungen in sauberen, gültigen MJML-Code.

    render_mjml

  3. In HTML konvertieren

    Der Agent lässt das Markup durch einen Renderer laufen, um das finale HTML-Ergebnis zu erzeugen.

    render_mjml

  4. Responsivität prüfen

    Der Agent stellt sicher, dass der Code den responsiven Regeln folgt, damit er auf Mobilgeräten und Desktops korrekt aussieht.

    render_mjml

Probieren Sie es

Kopieren Sie diese Beispiele.

Nutzen Sie diese Prompts für Ihr erstes E-Mail-Layout.

Startpunkte

Ersetzen Sie die Platzhalter in Klammern durch Ihre spezifischen Markenfarben oder Inhalte.

MJML Connector

Alles bereit. Wählen Sie Ihren MCP-Client und folgen Sie den Einrichtungsschritten.

Connector-Linkhttps://edge.vinkius.com/vk_preview_LwlmmoPeznMVTkYs7MAzFYiK3XjrkSp7oDHD4F4u/mcp

Claude Desktop

Folgen Sie den Schritten unten, um sich in Sekunden zu verbinden.

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — MJML capabilities are ready to use.
Konfiguration · claude_desktop_config.jsonKopieren
{
  "mcpServers": {
    "mjml-email-markup-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_LwlmmoPeznMVTkYs7MAzFYiK3XjrkSp7oDHD4F4u/mcp"
    }
  }
}
In den Chat kopieren04

  • Erstelle ein MJML-Layout für einen Newsletter mit einem Hero-Bild, zwei Textspalten und einem Footer.

  • Generiere eine responsive E-Mail-Vorlage mit dunkelblauem Hintergrund und weißem Text für eine Produktankündigung.

  • Erstelle ein einspaltiges MJML-Layout für eine Willkommens-E-Mail inklusive Button und Social-Media-Icons.

  • Schreibe den MJML-Code für eine Werbe-E-Mail mit einem großen Header und einem dreispaltigen Raster für vorgestellte Produkte.

  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

Starten Sie hier

Einmal verbinden, dann fragen.

Eine einzige Verbindung ermöglicht es Ihrem Agenten, E-Mail-Code zu schreiben und zu rendern. Die vollständige Anleitung finden Sie auf der Connector-Seite.

MJML mit Ihrer KI verbinden

FAQ

So funktioniert die Aufgabe

  • 01

    Kann die KI meine bestehenden HTML-Dateien bearbeiten?

    Nein. Der Agent erstellt neue MJML- und HTML-Dateien basierend auf Ihren Anweisungen; er verändert keine Dateien auf Ihrer lokalen Festplatte.

  • 02

    Übernimmt die KI das Hosting von Bildern?

    Nein. Sie müssen die URLs für Ihre Bilder im Prompt angeben, damit der Agent sie in das Markup einbauen kann.

  • 03

    Funktioniert die E-Mail in Outlook?

    Ja, da der Agent MJML nutzt, um das HTML zu generieren, was speziell darauf ausgelegt ist, die Darstellungsfehler von Outlook zu umgehen.

  • 04

    Kann die KI die E-Mail für mich versenden?

    Nein. Der Agent erstellt nur den Code und das gerenderte HTML. Sie müssen diesen Code selbst bei Ihrem E-Mail-Anbieter hochladen, um ihn zu versenden.

  • 05

    Legt der Agent die Markenfarben fest?

    Nein. Der Agent hält sich strikt an die Farbvorgaben und Styling-Anweisungen, die Sie in Ihrem Prompt angeben.

  • Noch Fragen zu MJML? Die Connector-Seite liefert Antworten. Alle Funktionen des MJML Connectors ansehen

Verbinde MJML mit Claude, Cursor, ChatGPT & mehr