email-design

Überblick

Was das Skill email-design macht

Das email-design Skill ist ein praxisnaher Leitfaden für die Gestaltung conversionstarker Marketing-E-Mails und Templates. Es kombiniert erprobte Layout-Patterns, Ansätze für Betreffzeilen und zustellbarkeitsbewusste Regeln mit einem HTML-to-image Workflow für markenkonforme Header-Banner.

Dieses Skill konzentriert sich auf:

• Marketing-Newsletter und Promotion-Kampagnen
• Willkommensstrecken und Onboarding-E-Mails
• Transaktionale Templates (Belege, Alerts, Bestätigungen)
• Mobile-optimierte Layouts, die zuverlässig in Gmail, Outlook und gängigen Clients dargestellt werden
• Visuelle E-Mail-Header, die aus HTML mit der inference.sh CLI generiert werden

Wenn du E-Mail-Kampagnen betreust, UI für E-Mail entwirfst oder Marketing-Teams unterstützt, liefert dir email-design direkt anwendbare Constraints und Beispiele, damit du nicht länger auf Bauchgefühl angewiesen bist.

Für wen email-design gedacht ist

Verwende das email-design Skill, wenn du:

• E-Mail-Marketer oder Growth-Teams bist, die Newsletter, Promotions oder Drip-Kampagnen planen
• Designer oder Frontend-Developer bist, die für HTML-E-Mail-Templates verantwortlich sind
• Produkt- und Lifecycle-Marketer bist, die Willkommensflows und transaktionale Kommunikation aufsetzen
• Agenturen oder Freelancer bist, die einen wiederholbaren Ansatz für E-Mail-Layout, Betreffzeilen und Banner brauchen

Besonders hilfreich ist es, wenn du möchtest:

• Eine klare, in Clients getestete Layout-Spezifikation (Breiten, Spalten, Responsive-Regeln)
• Orientierung bei Betreffzeilen und Aufbau, die Conversions unterstützen
• Eine Möglichkeit, E-Mail-Headerbilder direkt aus HTML-Snippets zu generieren

Wann email-design passend ist – und wann nicht

Gute Passung, wenn:

• Du regelmäßig Kampagnen versendest und dir CTR und Conversions wichtig sind
• Du Leitplanken für Junior-Marketer oder neue Teammitglieder brauchst
• Du Layout und visuellen Stil von E-Mails über Marken hinweg standardisieren willst
• Du bereits die infsh CLI für HTML-to-image Banner nutzt oder bereit bist, sie zu installieren

Weniger geeignet, wenn:

• Du ausschließlich Plain-Text-E-Mails verschickst und keine Templates oder Visuals nutzt
• Du einen vollständigen Email Service Provider (ESP) oder Versand-Infrastruktur brauchst (dieses Skill behandelt Design, nicht Versand oder Listenverwaltung)
• Du nach einem Drag-and-drop-Editor suchst; hier geht es um Patterns und Workflows, nicht um ein Web-UI

Nutzung

1. Installation und Setup

Um das email-design Skill in einer Agent Skills–kompatiblen Umgebung zu installieren, führe aus:

npx skills add https://github.com/inferen-sh/skills --skill email-design

Damit wird der email-design Guide aus dem inferen-sh/skills Repository geladen und deinem Agent oder Tooling zur Verfügung gestellt.

Für den HTML-to-image Workflow erwartet das Skill, dass die inference.sh CLI (infsh) verfügbar ist:

# Install instructions (see official guide):
# https://raw.githubusercontent.com/inference-sh/skills/refs/heads/main/cli-install.md

Sobald infsh installiert und konfiguriert ist, kannst du dich einloggen und direkt aus HTML-Snippets Banner generieren.

2. Wichtige Dateien und Einstiegspunkt

Nach der Installation solltest du dir zuerst diese Ressourcen ansehen:

• SKILL.md – Zentrale Beschreibung des email-design Skills, Nutzungshinweise und Constraints
• guides/design/email-design (Verzeichnis) – Detaillierte Design-Guidance für Layouts, Betreffzeilen und E-Mail-Patterns (der Pfad kann je nach Checkout zusätzliche Referenzen enthalten)

Empfohlene Reihenfolge zur Durchsicht:

1. SKILL.md – Verstehe den Umfang: Layout, Betreffzeilen, Regeln zur Zustellbarkeit.
2. Design-Guides unter guides/design/email-design – Wende die Patterns auf deine eigenen Kampagnen an (z. B. Willkommensstrecken, Promotions, transaktionale E-Mails).

3. Den HTML-to-image Banner-Workflow nutzen

Das email-design Skill enthält ein Beispiel für die Generierung von E-Mail-Headervisuals aus HTML mit der App infsh/html-to-image.

Schritt-für-Schritt-Beispiel

1. Bei inference.sh einloggen:

infsh login

2. Die HTML-to-image App mit Inline-HTML ausführen:

infsh 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\">Spring Sale — 30% Off</h1><p style=\"font-size:18px;opacity:0.9\">This weekend only</p></div></div>"
}'

3. Das generierte Bild verwenden, z. B. als Hero-Banner oder Header in deinem Promotion-E-Mail-Template.

Du kannst den HTML-Block für unterschiedliche Kampagnen anpassen (z. B. Feature-Releases, Webinare, saisonale Aktionen) und gleichzeitig die empfohlene E-Mail-Breite im Blick behalten.

4. Layout-Regeln in deinen Templates anwenden

Das email-design Skill dokumentiert praxisnahe Layout-Constraints, die dem Verhalten realer E-Mail-Clients entsprechen. Du kannst sie direkt in deine HTML/CSS-Struktur übernehmen.

Zentrale Constraints im Guide

• Maximalbreite: 600px – Standard-Rendering-Breite für wichtige Clients wie Gmail und Outlook
• Mobile Breite: 320–414px – Responsive-Fallback-Bereich für Smartphones
• Single-Column Layout bevorzugt – Zuverlässiger in mobilen Clients und älteren Desktop-Apps

In der Umsetzung bedeutet das:

• Richte deinen Hauptinhalt in einer 600px breiten Container-Tabelle zentriert aus
• Vermeide komplexe Multi-Column-Grids; falls du mehrere Spalten brauchst, setze auf gestapelte Layouts auf Mobilgeräten
• Platziere kritische Inhalte (Angebot, CTA, Kernbotschaft) weit oben und in der Hauptspalte

5. Integration in deinen E-Mail-Marketing-Workflow

Du kannst email-design auf mehrere Arten einsetzen:

• In der Planung:

  • Nutze die dokumentierten Layout- und Betreffzeilen-Regeln, um Designer und Copywriter zu briefen.
  • Definiere Standard-Templates für Newsletter, Promotions und transaktionale E-Mails.

• In Design und Implementierung:

  • Setze die Breiten- und Layout-Constraints beim Coding deiner HTML-E-Mails um.
  • Nutze die HTML-to-image Pipeline, um schnell passende visuelle Header zu erstellen.

• In der Optimierung:

  • Teste Betreffzeilen-Varianten anhand der in SKILL.md referenzierten Formeln.
  • Verfeinere die visuelle Hierarchie (z. B. "Inverted Pyramid" Layout), um mehr Klicks auf deinen primären CTA zu lenken.

6. Das Skill an deinen Stack anpassen

Die Hinweise im Repository sind bewusst tool-agnostisch in Bezug auf Versand und ESP-Auswahl gehalten. So passt du email-design an deine Umgebung an:

• ESP-unabhängige Templates:

  • Exportiere HTML und Bilder, die auf email-design Patterns basieren, und lade sie in Systeme wie Mailchimp, SendGrid, Braze, Customer.io oder deine eigene E-Mail-Plattform.

• Team-Onboarding:

  • Übernimm die wichtigsten Constraints und Patterns aus SKILL.md in dein internes Designsystem oder deine Playbooks.

• Automation:

  • Wenn du die Kampagnenerstellung per Skripten oder Agents automatisierst, rufe infsh app run infsh/html-to-image mit dynamischem HTML auf, um individuelle Banner pro Kampagne zu generieren.

FAQ

Ist email-design ein E-Mail-Sender oder nur ein Design-Skill?

email-design ist ein Design- und Pattern-Skill, keine Versandplattform. Es hilft dir, Layouts, Betreffzeilen, Banner und Templates zu gestalten, die in gängigen Clients gut funktionieren. Zum eigentlichen Versand brauchst du weiterhin einen ESP oder eine Versand-Infrastruktur (z. B. Mailchimp, SendGrid oder deinen eigenen SMTP-Server).

Muss ich die inference.sh CLI nutzen, um von email-design zu profitieren?

Nein. Der Kernnutzen von email-design – Layout-Patterns, Betreffzeilen-Ansätze und Regeln zur Zustellbarkeit – ist auch ohne infsh hilfreich. Die inference.sh CLI benötigst du nur, wenn du den HTML-to-image Workflow für E-Mail-Header und Banner einsetzen willst.

Was sind die wichtigsten Layout-Empfehlungen in email-design?

Das Skill hebt hervor:

• Eine maximale E-Mail-Breite von 600px für konsistentes Rendering in Gmail und Outlook
• Eine mobile Breite von 320–414px für responsives Verhalten auf Smartphones
• Eine Präferenz für Single-Column Layouts für eine besser vorhersagbare Darstellung und einfachere Mobile-Optimierung
  Diese Constraints reduzieren Layout-Probleme und machen deine Kampagnen geräteübergreifend stabiler.

Kann ich email-design sowohl für transaktionale E-Mails als auch für Marketing-Kampagnen nutzen?

Ja. Das Skill deckt ausdrücklich transaktionale Templates (z. B. Belege, Passwort-Resets und Alerts) neben Marketing-E-Mails ab. Du kannst dieselben Prinzipien für Breite, Hierarchie und Betreffzeilen anwenden und gleichzeitig die transaktionalen Inhalte klar und compliant halten.

Wie unterstützt mich email-design bei Betreffzeilen?

email-design enthält Guidance und Formeln für Betreffzeilen, damit du klarere, überzeugendere Subjects schreiben kannst, die zum Inhalt und zur Intention des jeweiligen E-Mail-Typs passen (Welcome, Promo, Newsletter, Transaktional). Es versendet zwar keine E-Mails und führt keine Experimente für dich durch, liefert dir aber einen strukturierten Ausgangspunkt für A/B-Tests.

Können Designer und Developer email-design gemeinsam nutzen?

Ja. Das Skill ist dafür gedacht, Marketing-, Design- und Frontend-Rollen zusammenzubringen:

• Marketer nutzen die Patterns für Kampagnenplanung und Betreffzeilen.
• Designer setzen die Layout-Regeln ein, um die visuelle Hierarchie zu strukturieren.
• Developer implementieren HTML-Templates innerhalb der technischen Constraints, die im Guide dokumentiert sind.

Wo finde ich die vollständigen technischen Details zu email-design?

Nachdem du das Skill installiert hast, öffne die Files Ansicht und sieh dir an:

• SKILL.md – für die Skill-Definition, den Umfang und kompakte Regeln
• Das Verzeichnis guides/design/email-design – für die vollständige Design-Guidance
  Damit erhältst du die vollständige Referenz hinter der redaktionellen Zusammenfassung auf dieser Seite.