Installiere den belt CLI Skill: npx skills add belt-sh/cli
E-Mail-Design
Gestalte hochkonvertierende Marketing-E-Mails mit KI-generierten Bildern über die inference.sh CLI.
Schnellstart
Benötigt inference.sh CLI (belt). Installationsanleitung
belt login
belt app run infsh/html-to-image --input '{
"html": "<div style=\"width:600px;height:250px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;font-family:system-ui;color:white;text-align:center\"><div><h1 style=\"font-size:36px;margin:0\">Frühlingsaktion – 30 % Rabatt</h1><p style=\"font-size:18px;opacity:0.9\">Nur dieses Wochenende</p></div></div>"
}'
E-Mail-Breite und Layout
| Einschränkung | Wert | Warum |
|---|
| Maximale Breite | 600px | Gmail, Outlook Rendering-Standard |
| Mobile Breite | 320–414px | Responsive Fallback |
| Einspaltig | Bevorzugt | Bessere Darstellung auf Mobilgeräten |
| Zweispaltig | Sparsam einsetzen | Bricht auf vielen Clients |
| Bildbreite | max. 600px, 300px bei 2 Spalten | Retina: 2x bereitstellen (1200px) |
| Schriftgröße (Fließtext) | 14–16px | Unter 14px schwer lesbar auf Mobilgeräten |
| Schriftgröße (Überschrift) | 22–28px | Muss schnell erfassbar sein |
| Zeilenhöhe | 1,5 | Lesbarkeit auf allen Geräten |
Das umgekehrte Pyramiden-Layout
Das effektivste E-Mail-Layout bündelt die Aufmerksamkeit auf einen einzigen CTA:
┌──────────────────────────────────┐
│ HEADER-BILD │ ← Marken-/visueller Hook
│ (600 x 200-300) │
├──────────────────────────────────┤
│ │
│ Überschrift (eine Zeile) │ ← Worum geht es?
│ │
│ 2-3 Sätze Fließtext │ ← Warum sollte ich mich
│ erklären den Mehrwert. │ dafür interessieren?
│ │
│ ┌──────────────┐ │
│ │ CTA-BUTTON │ │ ← Eine klare Handlungsaufforderung
│ └──────────────┘ │
│ │
├──────────────────────────────────┤
│ Footer: Abmelde-Link │
└──────────────────────────────────┘
Betreffzeilen
Erfolgreiche Formeln
| Formel | Beispiel | Auswirkung auf Öffnungsrate |
|---|
| Zahl + Nutzen | „5 Möglichkeiten, Ihre Build-Zeit zu halbieren“ | Hoch |
| Frage | „Stellen Sie immer noch freitags aus?“ | Hoch |
| Anleitung | „So automatisieren Sie Ihre Berichte in 3 Schritten“ | Mittel-Hoch |
| Dringlichkeit (echt) | „Letzter Tag: 30 % Rabatt auf Jahrespläne“ | Hoch (wenn echt) |
| Personalisiert | „[Name], Ihr Wochenbericht ist fertig“ | Sehr Hoch |
| Neugierde-Lücke | „Die Funktion, über die unsere Nutzer nicht aufhören zu reden“ | Mittel-Hoch |
Regeln
| Regel | Wert |
|---|
| Länge | 30–50 Zeichen (mobil wird bei ~35 abgeschnitten) |
| Vorschautext | Erste 40–100 Zeichen nach Betreff – diesen gezielt gestalten |
| Emoji | Max. 1, am Anfang oder Ende, mit Zielgruppe testen |
| GROSSBUCHSTABEN | Niemals – löst Spam-Filter aus |
| Spam-Trigger-Wörter | Vermeiden: „kostenlos“, „jetzt handeln“, „nur für kurze Zeit“, „hier klicken“ in Betreff |
| Personalisierung | [Vorname] in der Betreffzeile steigert Öffnungsrate um 20 %+ |
Vorschautext
Der Vorschautext erscheint im Posteingang nach der Betreffzeile. Verschwenden Sie ihn nicht.
❌ „Diese E-Mail im Browser anzeigen“ (Standard, Platzverschwendung)
❌ „Probleme mit der Darstellung?“ (interessiert niemanden)
✅ Betreff: „5 Möglichkeiten, Build-Zeit zu verkürzen“
Vorschau: „Nr. 3 sparte uns 6 Stunden pro Woche“
✅ Betreff: „Ihr Monatsbericht ist fertig“
Vorschau: „Umsatz um 23 % gestiegen – hier ist die Ursache“
E-Mail-Typen
Willkommens-E-Mail (automatisiert, Tag 0)
| Element | Inhalt |
|---|
| Betreff | „Willkommen bei [Produkt] – so geht es weiter“ |
| Header | Markenbild oder Produkt-Screenshot |
| Textkörper | 3–4 Sätze: wofür sie sich angemeldet haben, was sie erwartet, ein schneller Erfolg |
| CTA | „Einrichtung abschließen“ oder „Erste [Aktion] ausprobieren“ |
| Zeitpunkt | Sofort nach der Anmeldung |
Werbe- / Kampagnen-E-Mail
| Element | Inhalt |
|---|
| Betreff | Nutzenorientiert, Dringlichkeit wenn echt |
| Header | Hero-Bild mit Angebot/Ergebnis |
| Textkörper | Problem → Lösung → Angebot → Frist |
| CTA | „30 % Rabatt sichern“ oder „Kostenlose Testversion starten“ |
| Dringlichkeit | Echte Frist, keine künstliche Knappheit |
Produkt-Update / Changelog
| Element | Inhalt |
|---|
| Betreff | „Neu: [Funktionsname] ist da“ |
| Header | Screenshot oder visuelle Darstellung der Funktion |
| Textkörper | Was ist neu, warum wichtig, wie verwenden |
| CTA | „[Funktion] ausprobieren“ |
Transaktions-E-Mails (Belege, Bestätigungen)
| Regel | Warum |
|---|
| Klarer Zweck in der Betreffzeile | „Ihre Bestellung #1234 ist bestätigt“ |
| Minimales Design | Nicht mit Marketing verwechseln |
| Schlüsselinformationen sichtbar | Bestellnummer, Betrag, Datum |
| Keine Werbeinhalte (meistens) | CAN-SPAM erlaubt etwas, aber minimal halten |
Header-Bild-Design
belt app run infsh/html-to-image --input '{
"html": "<div style=\"width:600px;height:250px;background:linear-gradient(135deg,#2d3436,#636e72);display:flex;align-items:center;padding:40px;font-family:system-ui;color:white\"><div><p style=\"font-size:14px;text-transform:uppercase;letter-spacing:2px;opacity:0.7;margin:0\">Willkommen bei</p><h1 style=\"font-size:42px;margin:8px 0 0;font-weight:800\">DataFlow</h1><p style=\"font-size:18px;opacity:0.8;margin-top:4px\">Ihre Daten, automatisiert</p></div></div>"
}'
belt app run infsh/html-to-image --input '{
"html": "<div style=\"width:600px;height:300px;background:linear-gradient(135deg,#e74c3c,#c0392b);display:flex;align-items:center;justify-content:center;font-family:system-ui;color:white;text-align:center\"><div><p style=\"font-size:20px;opacity:0.9;margin:0\">Nur dieses Wochenende</p><h1 style=\"font-size:72px;margin:8px 0;font-weight:900\">30 % RABATT</h1><p style=\"font-size:18px;opacity:0.8\">Alle Jahrespläne. Endet Sonntag.</p></div></div>"
}'
belt app run falai/flux-dev-lora --input '{
"prompt": "clean modern email header banner, abstract flowing data visualization, dark blue gradient background, subtle glowing nodes and connections, tech aesthetic, minimal, no text, 600x250 equivalent",
"width": 1200,
"height": 500
}'
CTA-Buttons
| Regel | Wert |
|---|
| Breite | 200–300px, nicht volle Breite |
| Höhe | Mindestens 44–50px (Touch-Ziel) |
| Farbe | Hoher Kontrast zum Hintergrund |
| Text | Aktionsverb + Ergebnis: „Kostenlose Testversion starten“ |
| Form | Abgerundete Ecken (4–8px border-radius) |
| Platzierung | Sichtbar ohne Scrollen, bei langen E-Mails unten wiederholen |
| Anzahl | EIN primärer CTA pro E-Mail |
Bulletproof-Buttons
HTML-Buttons werden in verschiedenen E-Mail-Clients unterschiedlich dargestellt. Verwenden Sie die „Bulletproof-Button“-Technik (VML für Outlook, HTML/CSS für alle anderen):
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" bgcolor="#22c55e" style="border-radius:6px;">
<a href="https://ihreseite.de/aktion" target="_blank"
style="font-size:16px;font-family:sans-serif;color:#ffffff;
text-decoration:none;padding:12px 24px;display:inline-block;
font-weight:bold;">
Kostenlose Testversion starten
</a>
</td>
</tr>
</table>
Mobile Optimierung
| Regel | Warum |
|---|
| Einspaltiges Layout | Mehrere Spalten brechen auf mobilen Geräten |
| Schrift mindestens 14px | Kleinere Schrift ist unleserlich |
| CTA-Button mindestens 44px hoch | Touch-Ziel für Apple/Android |
| Bilder skalieren auf 100 % Breite | Horizontalen Scrollen verhindern |
| Elemente vertikal stapeln | Nebeneinander-Anordnung bricht auf schmalen Bildschirmen |
| Test auf Gmail App, Apple Mail, Outlook | Die 3 wichtigsten E-Mail-Clients |
60 %+ der E-Mails werden auf Mobilgeräten geöffnet. Gestalten Sie mobil zuerst.
Checkliste für Zustellbarkeit
| Faktor | Regel |
|---|
| Bild-zu-Text-Verhältnis | Maximal 40 % Bilder, 60 % Text (Spam-Filter markieren bildlastige E-Mails) |
| Alt-Text auf Bildern | Immer – Bilder werden standardmäßig in vielen Clients blockiert |
| Abmelde-Link | Gesetzlich vorgeschrieben (CAN-SPAM, DSGVO) – leicht auffindbar machen |
| Absendername | Wiedererkennbarer Personen- oder Markenname |
| Reply-To | Echte Adresse, nicht no-reply@ (schadet der Zustellbarkeit) |
| Listenhygiene | Bounces entfernen, inaktive Abonnenten vierteljährlich bereinigen |
| SPF/DKIM/DMARC | Technische Authentifizierung – einmal einrichten, entscheidend für Posteingang |
Häufige Fehler
| Fehler | Problem | Lösung |
|---|
| Kein Vorschautext | Zeigt „Im Browser anzeigen“ oder zufälligen Code | Vorschautext gezielt setzen |
| Nur-Bild-E-Mails | Blockierte Bilder = leere E-Mail + Spamrisiko | 60 %+ Text, Alt-Text auf Bildern |
| Mehrere CTAs | Entscheidungslähmung, niedrigere Klickrate | Ein primärer CTA pro E-Mail |
| Winziger Text | Auf Mobilgeräten unlesbar | Mindestens 14px Fließtext, 22px Überschriften |
| no-reply@ Absender | Schadet Zustellbarkeit, wirkt unpersönlich | Echte Reply-Adresse verwenden |
| Kein mobiler Test | Kaputtes Layout für 60 %+ der Leser | Test auf Gmail App + Apple Mail |
| Fehlender Abmelde-Link | Illegal (CAN-SPAM) + Spam-Beschwerden | Klarer Abmelde-Link im Footer |
| Übermäßiges Design | E-Mail-Clients rendern CSS inkonsistent | Einfache Layouts, Inline-Styles |
| Künstliche Dringlichkeit | Untergräbt Vertrauen, trainiert Nutzer zu ignorieren | Nur echte Fristen verwenden |
Verwandte Skills
npx skills add inference-sh/skills@landing-page-design
npx skills add inference-sh/skills@ai-image-generation
npx skills add inference-sh/skills@prompt-engineering
Alle Apps durchsuchen: belt app list