E-Mail-Newsletter-Generator

E-Mail-Newsletter

Entwerfe und gestalte einen vollständigen HTML-E-Mail-Newsletter aus einem Thema oder einer Inhaltsangabe. Das Ergebnis ist einfügebereit für Loops, Mailchimp, Beehiiv, Resend oder jede andere gängige E-Mail-Plattform.

---

Wichtige Regel: Tabellenbasiertes HTML mit ausschließlich Inline-Styles. Keine CSS-Klassen, kein Flexbox, kein Grid, keine <style>-Blöcke. Jedes Element erhält style="" direkt. Dies ist nicht optional – E-Mail-Clients entfernen alles andere.

---

Schritt 1: Kurzeingabe

Es werden drei Dinge benötigt, um zu starten. Wenn alle drei in der Nachricht enthalten sind, fahre mit Schritt 2 fort.

Falls etwas fehlt, frage genau nach:

„Um loszulegen, benötige ich drei Dinge:

1. Thema – worum geht es in diesem Newsletter?
2. Zielgruppe – wer liest? (Rolle, Unternehmensgröße, wie sie dich kennen)
3. Primärer CTA – welche eine Aktion sollen die Leser ergreifen?"

Warte auf alle drei Angaben, bevor du fortfährst.

---

Schritt 2: Vollständige Eingabe

Stelle alle Fragen in einer Nachricht, gruppiert nach Kategorie. Der Benutzer kann einzelne Punkte überspringen – es gelten dann Standardwerte.

„Ein paar Fragen vor dem Entwurf – beantworte, was du weißt, den Rest überspringe:

Inhalt

1. Länge – kurz (300 Wörter, prägnant) / Standard (500-700) / ausführlich (800+ Wörter)?
2. Format – redaktioneller Artikel / nummerierte Aufstellung / persönliche Geschichte / Datenbericht?
3. Ausgabe-Kontext – einmaliger Versand / Teil einer wöchentlichen Serie / monatlicher Digest?
4. CTA-URL – wie lautet der tatsächliche Link? (oder ich verwende einen Platzhalter)

Marke 5. Unternehmens-/Markenname – für Kopf- und Fußzeile 6. Slogan – einzeilige Beschreibung (optional, für Fußzeile) 7. Stadt & Land – für Fußzeile (z. B. „Berlin, Deutschland") 8. Primäre Markenfarbe – Hex? (z. B. #856FE6) 9. Sekundäre Akzentfarbe – Standard gelb-grün (#D8F90A) beibehalten / Markenfarbe verwenden / etwas anderes?

Design 10. Hintergrund – dunkel (redaktionell/SaaS) / hell (sauber/unternehmerisch) / benutzerdefinierter Hex? 11. Schriftart – redaktionelle Serife (Instrument Serif) / saubere moderne Sans / nur Systemschriftarten? 12. Button-Stil – Pille (sehr abgerundet) / sanft abgerundet / scharfe Ecken? 13. Visueller Stil – redaktionell / technisch+datenorientiert / warm+gründerpersönlichkeit / kühn+kampagnenartig?

Plattform & Technisch 14. Plattform – Loops / Mailchimp / Beehiiv / Resend / andere? 15. Ton – lehrreich / gesprächig / kühn+ direkt / formell / verspielt? 16. Personalisierung – keine / Vorname / Vorname + Unternehmen? 17. Betreffzeile – hast du eine / möchtest du 3 Optionen? 18. Sekundäre Abschnitte – Sponsor-Block / Produkt-Hinweis / Event / Quicklinks / keine? 19. Klartext-Version – ja (empfohlen) / nein?"

Standardwerte, falls übersprungen:

Frage	Standard
Länge	Standard (500-700 Wörter)
Format	Redaktioneller Artikel
Ausgabe-Kontext	Einmaliger Versand
CTA-URL	[CTA_URL] Platzhalter
Firmenname	[YOUR BRAND] Platzhalter
Slogan	keine
Stadt & Land	[CITY, COUNTRY] Platzhalter
Markenfarbe	keine (verwende #D8F90A für alle Akzente)
Sekundäre Akzentfarbe	#D8F90A (gelb-grün Standard)
Hintergrund	dunkel
Schriftart	Instrument Serif (redaktionelle Serife)
Button-Stil	Pille
Visueller Stil	Redaktionell
Plattform	generisch
Ton	gesprächig
Personalisierung	keine
Betreffzeile	generiere 3 Optionen
Sekundäre Abschnitte	keine
Klartext	ja

---

Schritt 2.5: Designrichtung (intern – wird dem Benutzer nicht angezeigt)

Aus den Antworten von Schritt 2 ermitteln:

• Visuellen Charakter (aus Frage 13, oder aus Ton + Format abgeleitet, falls übersprungen)
• EIN unübersehbares Element – identifiziere es vor Schritt 3
• Vorlagenpfad (siehe Schritt 5)

Standard-Charaktere, falls Frage 13 übersprungen:

• Lehrreicher / formeller Ton: Redaktionell
• Metrik-lastiger Inhalt (Statistiken, Benchmarks, Berichte): Technisch/datenorientiert
• Produkteinführungen, Events, Kampagnen: Kühn/kampagnenartig

Frage den Benutzer niemals separat nach der Designrichtung – leite sie aus seinen Antworten ab.

---

Schritt 3: Strukturdesign

Lies references/html-email-guide.md für Layout-Regeln, bevor du Abschnitte auswählst.

Wähle basierend auf Thema + Zielgruppe + CTA + angeforderten sekundären Abschnitten aus dieser Bibliothek:

Abschnitt	Einfügen, wenn...
header	Immer – Logo-Platzhalter + Ausgabenummer oder Datum
hero	Immer – große Überschrift + 1-2 Satz Haken
intro	Gesprächiger oder lehrreicher Ton – kurze persönliche Notiz
main-content	Primärer Artikel oder Einsicht (textlastig)
stat-callout	Es gibt eine überzeugende Statistik, ein Zitat oder einen Datenpunkt
secondary-section	Sekundärer CTA wurde angefordert
product-cta	Markenkontext vorhanden und sanfter Produkt-Hinweis passt
sponsor-block	Sponsor-Abschnitt wurde angefordert
quick-links	Kuratierter Links-Abschnitt wurde angefordert
footer	Immer – Abmelde-Link + Firmenname

Gib die gewählte Struktur als nummerierte Liste mit einzeiliger Zweckbeschreibung pro Abschnitt aus:

Vorgeschlagene Struktur:
1. Header – Logo + Ausgabe #1 / [Datum]
2. Hero – Überschrift + Haken-Absatz
3. Intro – kurze persönliche Einordnung
4. Hauptinhalt – [Thema] Aufschlüsselung
5. Statistik-Hervorhebung – wichtiger Datenpunkt aus der Geschichte
6. CTA – [CTA-Text]
7. Footer – Abmelden + Unternehmen

Funktioniert diese Struktur, oder soll ich etwas anpassen?

Warte auf Bestätigung, bevor du mit Schritt 4 fortfährst.

---

Schritt 4: Inhaltsentwurf

Schreibe den Text für jeden Abschnitt nacheinander. Noch kein HTML – nur saubere Prosa.

Regeln pro Abschnitt:

• Header: Ausgabenummer + Datum. Kein Text nötig.
• Hero-Überschrift: Maximal 8 Wörter, ergebnisorientiert, beginnt nicht mit „Ich/Wir/Unser"
• Hero-Haken: 1-2 Sätze, Problem oder Neugierde-Lücke, zieht den Leser hinein
• Intro: 2-3 Sätze, persönlich oder kontextuell, keine Unternehmenssprache, Zusammenziehungen sind in Ordnung
• Hauptinhalt: 250-400 Wörter, scanbar – verwende fette Phrasen für Schlüsselpunkte, kurze Absätze (1-3 Zeilen), keine Textblöcke, keine Aufzählungsüberladung
• Statistik-Hervorhebung: Eine Statistik oder ein Zitat, max. 20 Wörter, prägnant
• Produkt-CTA: 2-3 Sätze, wertorientiert, nicht „Schau dir unser Produkt an" – sag ihnen, was sich für sie ändert
• CTA-Button-Text: 3-5 Wörter, Aktionsverb + Nutzen („Lies die vollständige Analyse", „Platz sichern", „Leitfaden herunterladen")
• Footer: Abmelde-Link-Platzhalter + Firmenname

Lies references/subject-line-formulas.md und schreibe dann 3 Betreffzeilen-Optionen (falls Betreffzeile nicht vom Benutzer angegeben):

• Option A: Neugierde-Lücke-Formel
• Option B: Direkter Nutzen-Formel
• Option C: Zahlen/Listen-Formel

Verwende keine Gedankenstriche (em dash). Vermeide: „leistungsstark", „nahtlos", „game-changing", „hebelwirkung", „innovativ", „entsperren", „transformieren", „aufwerten", „hochmodern", „robust".

---

Schritt 5: HTML-Generierung

Lies references/design-system.md und references/html-email-guide.md, bevor du HTML generierst.

Vorlage oder benutzerdefiniert – Entscheidung basierend auf Schritt-2-Antworten:

Verwende templates/dark-newsletter.html als Basis, wenn ALLE der folgenden Bedingungen zutreffen:

• Hintergrund = dunkel (oder nicht angegeben)
• Schriftart = Instrument Serif (oder nicht angegeben)
• Kein benutzerdefinierter Hintergrund-Hex angegeben

Verwende templates/light-newsletter.html als Basis, wenn ALLE der folgenden Bedingungen zutreffen:

• Hintergrund = hell ODER Ton = formell
• Schriftart = Instrument Serif (oder nicht angegeben)
• Kein benutzerdefinierter Hintergrund-Hex angegeben

Generiere benutzerdefiniertes HTML von Grund auf, wenn IRGENDEINE der folgenden Bedingungen zutrifft:

• Benutzerdefinierter Hintergrund-Hex angegeben (nicht dunkel, nicht weiß)
• Schriftart = moderne Sans oder nur Systemschriftarten
• Kombination der Antworten ergibt ein Design, das keine Vorlage bedient

Für benutzerdefinierte Generierung: Verwende den Abschnitt „Custom Generation Guide" aus references/design-system.md als vollständige Token-Spezifikation. Wende die Hintergrund-/Schriftart-/Button-/Akzent-Auswahl des Benutzers durchgehend an.

Dann (für Vorlagenpfad):

1. Wähle nur die benötigten Abschnitte aus der Vorlage (basierend auf Schritt-3-Struktur)
2. Fülle alle [PLATZHALTER]-Werte mit dem Inhalt aus Schritt 4
3. Wende die Markenfarben-Substitution an (siehe unten)
4. Überprüfe, ob alle [UNSUBSCRIBE_URL]-Platzhalter noch vorhanden sind (Plattform-Tuning erfolgt in Schritt 6)

Regeln zur Markenfarben-Substitution:

Wenn brand_color angegeben ist:

• Ersetze bgcolor des Markenstreifens (#D8F90A in der height:2px-Zeile) mit brand_color
• Ersetze die Farbe des linken Rands der Statistik-Hervorhebung mit brand_color
• Ersetze die Farbe der Kategoriebezeichnung mit brand_color
• Wenn die Leuchtkraft (Luminanz) von brand_color hoch ist (Gelb-, Grün-, Orangetöne – die meisten Neons): Ersetze auch das Schritt-Abzeichen #D8F90A mit brand_color
• Wenn die Leuchtkraft von brand_color niedrig ist (dunkles Marineblau, Waldgrün, Anthrazit): Behalte Schritt-Abzeichen und CTA-Button als #D8F90A, verwende brand_color nur für Streifen + Stat-Rand

Wenn brand_color NICHT angegeben ist: Behalte alle #D8F90A-Werte bei.

Inhalts-Substitutionsregeln (aus Schritt-2-Antworten):

• Wenn company_name angegeben: Ersetze alle [YOUR BRAND]- und [COMPANY NAME]-Platzhalter
• Wenn city_country angegeben: Ersetze [CITY, COUNTRY]-Platzhalter
• Wenn tagline angegeben: Füge als Untertitel-Zeile in der Fußzeile nach dem Firmennamen hinzu
• Wenn cta_url angegeben: Ersetze alle [CTA_URL]-Platzhalter mit der tatsächlichen URL
• Wenn personalization = first_name: Füge in der Hero-Begrüßung eine plattformgerechte Vorname-Variable hinzu – z. B. Hallo %%first_name%%, auf Beehiiv, Hallo {{first_name}}, auf Loops, Hallo *|FNAME|*, auf Mailchimp
• Wenn personalization = first_name + company: Füge beide Variablen hinzu, wo kontextuell angemessen

Visueller Kontrollcheck der Markenfarbe (bei dunkler E-Mail):

Popt die Markenfarbe visuell auf #111111? Teste gedanklich: Wäre sie als 2px-Streifen sichtbar?

• Hochgesättigte Farben (Lila, Blau, Türkis, Pink, Gelb, Orange, Grün): JA – verwende für Streifen + Stat-Rand + Kategoriebezeichnung
• Niedrig gesättigte / nahezu neutrale Töne (Warmgrau, Beige, Off-White): Nur für Streifen; Kategoriebezeichnung fällt auf #555555 zurück
• Fast schwarz (sehr dunkles Marineblau, Waldgrün, Anthrazit unter ~#2A2A2A): Überspringe brand_color für ALLE Akzentverwendungen, falle für jedes Element auf #D8F90A zurück

Akzent-Disziplin-Regel: brand_color erscheint an HÖCHSTENS 3 Stellen: Markenstreifen, Stat-Rand, Kategoriebezeichnung. Niemals im Fließtext, in Überschriften, Button-Hintergründen oder Abschnittshintergründen. Übermäßige Markierung tötet das Premium-Gefühl.

CTA-Button-Textfarbe:

• Auf #D8F90A-Button-Hintergrund: Verwende immer #0A0A0A-Text (es ist eine helle Farbe)
• Auf #111111-Button-Hintergrund (innerhalb gelber Callout-Karte): Verwende immer #F2F2F2-Text
• Auf brand_color-Button: Verwende #0A0A0A, wenn die Marke hell ist, #FFFFFF, wenn die Marke dunkel ist

Erforderlich für jedes <td> mit einer Hintergrundfarbe: Sowohl das bgcolor=-HTML-Attribut als auch der Inline-background-color:-Style. Beispiel:

<td bgcolor="#D8F90A" style="background-color:#D8F90A;">

Das Attribut kümmert sich um Outlook. Der Style kümmert sich um alles andere. Verwende niemals nur eines.

Design-Exzellenz (Frontend-Design-Prinzipien, E-Mail-adaptiert):

Die Tabellen-Beschränkungen von E-Mails schränken den Design-Anspruch nicht ein. Arbeite innerhalb ihrer Grenzen:

• Typografie bis zum Äußersten: 4-5 Worte-Überschriften = 60px, -0.04em Tracking. 6-7 Worte-Überschriften = 56px, -0.03em. 8 Worte = 48px. Niemals aus Sicherheitsgründen verkleinern – die Überschrift ist ein Poster, kein Etikett. Instrument Serif kursiv bei Stat-Zitaten verleiht literarisches Gewicht, das kein anderes Element erreicht.

• Dichtekontrast als Handwerkssignal: Hero = maximaler Freiraum (64px oben). Fließtexte = eng und dicht. CTA-Callout-Karte = wieder maximaler Freiraum (64px oben). Offen → eng → offen ist der Rhythmus, der als durchdachtes Design und nicht als Vorlagenausgabe gelesen wird.

• Hintergrundtiefe durch Abschnittswechsel (alle E-Mail-sicher):

  • Header: #0A0A0A
  • Hero: #111111
  • Statistik-Hervorhebung außen: #111111, innere erhöhte Karte: #1A1A1A
  • Fließtextabsätze: #161616 (subtile Erhöhung erzeugt Tiefe ohne Farbe)
  • Schrittkarten: #111111 (Kontrast zum Fließtext)
  • CTA-Callout-Karte: #D8F90A (das EINZIGe helle Element – niemals verwässern)
  • Footer: #080808

• Akzentknappheit = Luxus: Eine gelbe Callout-Karte in einem Meer aus Dunkelheit wirkt erstklassig. Gelb, das an sechs Stellen erscheint, wirkt billig. Die Kraft der CTA-Karte kommt vollständig daher, dass sie das einzige helle Element in einer dunklen E-Mail ist.

• Unvergesslicher Test: Bevor du speicherst, formuliere in einem Satz, was ein Leser drei Stunden später einem Kollegen beschreiben würde. Wenn es vage ist („es war dunkel und sauber") – ist der visuelle Anker nicht stark genug. Mache es konkret („die gelbe Karte mit der großen Serifen-Überschrift").

• Statistik-Hervorhebung als redaktionelles Pull-Zitat: 4px linker Rand (nicht 3px). 26px kursiv Instrument Serif für den Zitattext. 32px innerer Abstand. Dies ist das Nächste, was eine E-Mail an ein Magazin-Pull-Zitat herankommt. Behandle es wie eines.

---

Schritt 6: Plattform-Tuning

Lies references/platform-compat.md und wende plattformspezifische Anpassungen an:

Plattform	Aktion
Loops	Ersetze [UNSUBSCRIBE_URL] mit {{unsubscribe_url}}. Ersetze [FIRST_NAME]-Referenzen mit {{first_name}}
Mailchimp	Ersetze [UNSUBSCRIBE_URL] mit `*
Beehiiv	Ersetze [UNSUBSCRIBE_URL] mit %%unsubscribe_url%%. Ersetze [FIRST_NAME] mit %%first_name%%
Resend	Ersetze [UNSUBSCRIBE_URL] mit {unsubscribeUrl}. Hinweis: React Email .tsx-Ausgabe auf Anfrage verfügbar
Generisch/Andere	Behalte [UNSUBSCRIBE_URL] als Platzhalter mit Kommentar: <!-- Ersetze mit deinem Abmelde-Link -->

---

Schritt 7: Selbst-QA

Überprüfe das generierte HTML vor der Ausgabe. Behebe jedes gefundene Problem – überspringe nichts.

Rendering-Prüfungen:

• Alle Styles inline – keine <style>-Blöcke, keine class=-Attribute irgendwo
• Alle <table> haben cellpadding="0" cellspacing="0" border="0"
• Bilder (falls vorhanden) haben alt="", border="0", display:block im Style
• Maximale Breite von 600px für Container-Tabelle erzwungen
• CTA-Button verwendet <table> + <td>-Struktur mit bgcolor=-Attribut, nicht nur <a> mit display:block
• Kein flexbox, grid, position:, float:, CSS-Variablen (--var), min-height, max-height in irgendeinem Inline-Style
• border-radius nur auf <td> – nicht auf <table> oder <a> (Outlook rendert <td>-Radius)
• Footer hat Abmelde-Link mit plattformkorrekter Variable

Inhaltsprüfungen:

• Hero-Überschrift hat 8 oder weniger Wörter
• CTA-Button-Text ist 3-5 Wörter
• Keine Gedankenstriche (em dash) (-- ist in Ordnung, – nicht)
• Keine verbotenen Wörter: „leistungsstark", „nahtlos", „game-changing", „hebelwirkung", „innovativ", „entsperren", „transformieren", „aufwerten", „hochmodern", „robust"