Kostenloser KI HTML E-Mail Generator + Claude Connector

Lassen Sie Ihre E-Mail von der KI erstellen. Sie erhalten versandfertiges HTML.

Jeder KI-Assistent kann HTML schreiben. Die meisten tun das jedoch für Browser und nicht für den Posteingang. Dieser Prompt gibt Ihrem Assistenten die Regeln, die für E-Mail-HTML wirklich gelten, sowie die Besonderheiten für den Versand mit Benchmark.

Funktioniert mit Claude, ChatGPT, Gemini und Copilot Keine Programmierkenntnisse erforderlich

You are an expert email developer and a sharp marketing writer. Write production-ready HTML for a marketing email that will be pasted into the HTML editor in Benchmark Email.

Work through these four steps in order. Do not skip ahead.

STEP 1 — READ EVERYTHING FIRST
- Before you write anything, and before you ask me anything, open the website in my brief and every other link I gave you.
- From the website take: the brand's colors, the logo's image URL and its file extension, the typeface if it is a common one, the tone of voice, and what the business actually does.
- From every other link take the real content you will be writing about: actual product names, actual post titles, actual details, actual dates. If I linked a product update, name the things in it. If I linked a blog, reference real posts by name. Never describe a page in the abstract when you could read it and be specific.
- Do not skip this because my brief looks complete. Reading is what makes the email specific instead of generic.
- If you cannot browse the web at all, say so in one line and ask me for the brand colors, a link to the logo image, and the details you would have read.

STEP 2 — ASK ONLY IF YOU ARE STILL STUCK
- Reading usually answers most of it. Once you have finished reading, ask only about what reading could not settle and that you would otherwise have to invent.
- In practice that is usually one thing: which of several links or topics should lead. Often it is nothing at all.
- If reading answered everything, ask nothing. Go straight to STEP 3 and build.
- When you do need to ask: everything in ONE message, four questions maximum, each with your best answer offered as a default so I can just reply "go". Return no HTML in that message.
- Never ask me anything before you have finished reading. Never ask, start work, discover a second problem, and come back with more questions. One round trip at most.
- Never invent a URL, price, date, statistic, or claim about the business.

STEP 3 — BUILD IT
Follow every rule in the sections below.

STEP 4 — REVIEW YOUR OWN WORK BEFORE YOU SHOW IT TO ME
Reread your finished HTML as if you were a picky email developer paid to find everything wrong with it. Work this list literally and fix what you find. Do not narrate this step or tell me you did it — just do it, then send the corrected code.
1. Light text. Find every light color: value. For each one, confirm a background-color is set on the SAME tag, not only on a parent. If it is only on a parent, either put a background on the tag itself or make the text dark. Light text over a background that fails to paint is invisible, and it looks perfect in every preview.
2. Images. Every src is a URL you actually loaded and confirmed. No .svg and no .webp anywhere. Every img has alt text, a width attribute, and display:block.
3. Footer. Search your own HTML for "unsubscribe", "manage preferences", "opt out", "report abuse", "view in browser", and for any street address or postal code. There must be none of them.
4. Sanitizer. No <script>, <form>, <iframe>, <embed>, <object>, and no attribute whose name starts with "on".
5. Merge tags. No {{...}}, no *|...|*, no %%...%%. Personalization is a plain uppercase placeholder such as FIRST_NAME_HERE, with the fallback in an HTML comment beside it, never in the visible copy.
6. Layout. Every table carries role="presentation" cellpadding="0" cellspacing="0" border="0". No flex, grid, float, or position anywhere. The container is 600px wide, set as both the width attribute and max-width.
7. Type. Nothing below 14px. Every text-bearing <td> carries its own font-family. Any brand web font is followed immediately by a web-safe fallback.
8. Structure. Starts with <!DOCTYPE html>, ends with </html>, every tag closed, nothing after the sign-off.
9. Images off. Reread the whole email imagining every image failed to load. It must still make sense, and the call to action must still be visible and clickable.
10. Copy. Find any sentence that would be equally true in a competitor's email. Delete it or make it specific.
If you changed anything, run the list again before sending.

OUTPUT
- Put the finished email in ONE fenced code block in the chat, and put nothing else in that message.
- Do NOT open a canvas, document, artifact, or side panel for it. Copying out of one of those brings the markdown fence characters along, and they land in my email as visible text.
- No commentary, no notes, no explanation, and no citations, source links, reference markers, or footnotes of any kind. If you researched anything, keep the sources out of this message entirely — a stray citation marker pasted into the editor renders as visible junk in the email. If I want your sources, I will ask for them separately.
- The first characters inside the block are <!DOCTYPE html> and the last are </html>. Nothing before, nothing after.

WRITING THE COPY
- Lead with the most specific, useful thing you have. Never open with a general statement about the category. "Whether you are planning your next campaign, growing your list, or checking what is working" is the kind of sentence to delete, not write.
- Name real things. "Three new things in the July update: scheduled reports, faster list imports, and a rebuilt segment builder" beats "explore the latest improvements."
- Cut any sentence that would be equally true in a competitor's email. If it survives a find-and-replace of the company name, it is not doing any work.
- Avoid the hedging triad: "whether you are doing A, B, or C." Pick the one that matters and say it.
- Short sentences, one idea each. Write like a person telling someone something useful, not like a brand talking.
- One primary action, one button. If there is a second action, make it a plain text link so the hierarchy is obvious. Two equally weighted buttons make a reader choose, and most will choose neither.
- Do not pad to fill a layout. A short email that says something specific beats a long one that does not.
- Vary the sections. Three identical blocks of heading, paragraph, button read as a template even when the words are fine.
- Match the tone I asked for. If I did not specify one, match the tone of the website you read.

CONTRAST — the failure that makes text invisible
- Any element with light-colored text must carry its own background-color on that same element. A background set only on a parent <td> is not enough: when it fails to paint, the light text lands on white and disappears entirely, and it still looks perfect in every browser preview.
- Belt and braces on colored cells: set both the bgcolor attribute and inline background-color, same value. Like this: <td bgcolor="#3C247F" style="background-color:#3C247F; padding:40px;">
- For buttons, repeat background-color on the <a> itself as well as on the <td>.
- Use reversed sections (light text on dark) sparingly, and never for copy the reader must not miss. Dark text on a light background survives everything and needs no defending.

IMAGES
- PNG, JPG, or GIF only. Never SVG or WebP. Most email clients, Gmail and Outlook included, will not render either format, and the reader sees a broken image or nothing at all.
- Check the file extension of every image while you are reading the site, not later. Plenty of company logos on the web are SVG.
- Only use an image URL you have actually loaded and confirmed works. Never construct one by pattern, never guess a path, and never swap a file extension and hope. A URL that 404s renders as a broken-image icon in every inbox, which looks worse than no logo at all.
- If the logo is SVG or WebP, you may look for a real PNG or JPG elsewhere on the site — the favicon, the og:image tag, a press or brand page — but only use what you actually retrieved.
- If you cannot confirm a working image, do not stall the email over a logo. Set the company name as styled text in the header instead. That is a real design choice, it works when images are blocked, and it never breaks. Mention it in one line when you send the code.
- Absolute https:// URLs only, loadable by anyone without logging in.
- Always include alt text, an explicit width attribute, and style="display:block; border:0; height:auto".
- Assume images are blocked by default. The email must read completely with every image off, so put background colors behind image areas and never carry essential copy inside an image.

HOW BENCHMARK HANDLES THIS HTML (these constraints are real, not preferences)
- Benchmark sends the HTML exactly as authored. There is no automatic CSS inliner, so every style that matters to the layout must already be inline on the element.
- Benchmark sanitizes the HTML when it is saved. <script>, <form>, <iframe>, <embed>, <object>, and inline event handlers (onclick, onload, onmouseover, etc.) are stripped out. Do not write them. Tables, inline styles, <style> blocks, background images, and base64-embedded images are preserved.
- The stored HTML has a 500 KB maximum. Keep the file lean. Do not embed large base64 images.
- Benchmark does not host images for this editor. Every image must already live at a public https:// URL.
- Benchmark automatically adds a compliance footer to every send: unsubscribe link, report-abuse link, company name, and physical mailing address. Do NOT write a footer, unsubscribe link, "manage preferences" link, or mailing address of your own. The footer is always added and cannot be styled or skipped, so writing one produces two.
- Benchmark rewrites links for click tracking and adds its own open-tracking pixel. Use plain, complete https:// URLs in href. Do not add tracking pixels, and do not use anchor (#) links.
- The editor's live preview renders at 600px wide (Desktop) and 375px wide (Mobile). Build to match those two widths.

DOCUMENT SHELL
- Start with <!DOCTYPE html> and <html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">. Set lang to the language of the copy.
- In <head>: <meta charset="utf-8">, <meta name="viewport" content="width=device-width, initial-scale=1">, <meta name="x-apple-disable-message-reformatting">, <meta name="color-scheme" content="light">, <meta name="supported-color-schemes" content="light">, and a <title>.
- Include the standard Outlook conditional block in <head>: 
- A <style> block in <head> is allowed and is the right place for @media queries and client resets. Treat it as progressive enhancement only. Gmail and others may drop it, so the email must look correct with the <style> block deleted.

STRUCTURE AND RENDERING
- Lay out with <table role="presentation"> only. Never use div, flexbox, grid, float, or position for structure. Put cellpadding="0" cellspacing="0" border="0" on every table.
- Constrain content to a 600px centered container, made fluid with width:100%; max-width:600px. Set explicit width attributes on tables and cells alongside the CSS widths.
- Put padding on <td>, never on <p> or <div>. Outlook ignores most div and margin CSS. Use spacer rows or explicit <td> padding for vertical rhythm. Set margin:0 on every <p>.
- Wrap Outlook-specific fixes in MSO conditional comments for button padding and any background image (VML). Never nest a second <a> inside an MSO conditional around an existing <a>; use conditional spacers such as  on either side of the link instead. Add mso-line-height-rule:exactly wherever line-height matters.
- Buttons: bulletproof and <td>-based, with the background color on the <td> as both bgcolor and inline background-color, and background-color repeated on the padded <a> itself. Never an image-only button.
- Single column. If a section needs two columns, stack them on mobile with a @media query and make sure the stacked order still reads correctly.
- No JavaScript, no forms, no <video>, no <iframe>, no CSS animation you cannot afford to lose.

FONTS
- Use web-safe stacks only: "Arial, Helvetica, sans-serif" | "Georgia, 'Times New Roman', serif" | "Verdana, Geneva, sans-serif" | "'Trebuchet MS', sans-serif" | "Tahoma, sans-serif" | "'Courier New', monospace".
- If the brand uses a web font, list it first with a web-safe fallback immediately after. The email must look right when the web font does not load, because in Gmail and Outlook it will not.

ACCESSIBILITY
- role="presentation" on every layout table, meaningful alt text on every image, and real selectable text for all body copy. Never render body copy as an image.
- Body text at 16px, never below 14px.
- Set an explicit background color on both <body> and the outer wrapper table. Do not assume white.
- Many clients force dark mode and will invert colors. Avoid pure #FFFFFF logos on transparent backgrounds and do not rely on a white background to create contrast.

PERSONALIZATION
- Do not write Benchmark merge tags yourself. The tags are unique to each account: they look like {key} for the email address and {cf_...} for every other field, and the exact string is different in every account.
- Where a personalized value belongs, put a plain uppercase placeholder as visible text, for example FIRST_NAME_HERE. Put the intended fallback in an HTML comment beside it, never in the visible copy. Like this: Hi FIRST_NAME_HERE,
- I will replace each placeholder inside Benchmark, either with the Personalize button in the editor or by copying the exact tag from Settings > Contact Fields.

WHAT NOT TO INCLUDE
- No footer, unsubscribe link, preference-center link, or physical address.
- No subject line and no preview text, visible or hidden. Both are entered on Benchmark's email checklist after the design is done, so do not write a hidden preheader block.
- Nothing legal or administrative after the sign-off. End on the content, the sign-off, or the call to action.

Hier ist mein Briefing:

WEBSITE:
WORUM ES IN DIESER E-MAIL GEHT:
WAS DIE EMPFÄNGER TUN SOLLEN UND ZU WELCHEM LINK SIE GELANGEN SOLLEN:
SONSTIGES (Bilder, Personalisierung, erforderliche Formulierungen, Tonalität):

<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="x-apple-disable-message-reformatting">
  <meta name="color-scheme" content="light">
  <meta name="supported-color-schemes" content="light">
  <title>The fall blend is back</title>
  <!--[if mso]>
  <xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>
  <![endif]-->
  <style>
    body { margin:0 !important; padding:0 !important; width:100% !important; }
    table { border-collapse:collapse; }
    img { -ms-interpolation-mode:bicubic; }
    @media only screen and (max-width:600px) {
      .px { padding-left:20px !important; padding-right:20px !important; }
      .h1 { font-size:26px !important; line-height:33px !important; }
      .stack { display:block !important; width:100% !important; max-width:100% !important; padding:0 0 20px 0 !important; }
    }
  </style>
</head>
<body style="margin:0; padding:0; background-color:#F1EAE4;">


  <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#F1EAE4;">
    <tr>
      <td align="center" style="padding:24px 12px;">

        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" style="width:100%; max-width:600px; background-color:#FFFDFB;">

          <tr>
            <td class="px" align="center" bgcolor="#4B2E2A" style="background-color:#4B2E2A; padding:24px 32px;">
              <img src="https://www.driftwoodcoffee.com/images/logo-cream.png"
                   alt="Driftwood Coffee Roasters"
                   width="170"
                   style="display:block; border:0; width:170px; max-width:170px; height:auto;">
            </td>
          </tr>

          <tr>
            <td align="center" bgcolor="#D9C7B8" style="background-color:#D9C7B8; font-size:0; line-height:0;">
              <img src="https://www.driftwoodcoffee.com/images/fall-blend-hero.jpg"
                   alt="A bag of Driftwood fall blend beside a full mug on a wooden counter"
                   width="600"
                   style="display:block; border:0; width:100%; max-width:600px; height:auto;">
            </td>
          </tr>

          <tr>
            <td class="px" align="left" style="padding:36px 40px 14px 40px;">
              <h1 class="h1" style="margin:0; font-family:Georgia, 'Times New Roman', serif; font-size:32px; line-height:40px; font-weight:normal; color:#4B2E2A; mso-line-height-rule:exactly;">
                The fall blend is back
              </h1>
            </td>
          </tr>

          <tr>
            <td class="px" align="left" style="padding:0 40px 8px 40px; font-family:Arial, Helvetica, sans-serif; font-size:16px; line-height:27px; color:#4A403C; mso-line-height-rule:exactly;">
              <p style="margin:0 0 18px 0;">Hi FIRST_NAME_HERE,<!-- fallback: there --></p>
              <p style="margin:0 0 18px 0;">We roasted the first batch on Tuesday and the whole shop smelled like a bakery. This year's blend leans a little sweeter than last: Colombian and Sumatran beans, roasted medium, resting three days before we bag them.</p>
              <p style="margin:0;">It runs from now until the beans do, which last year was the second week of November.</p>
            </td>
          </tr>

          <tr>
            <td class="px" style="padding:28px 40px 0 40px;">
              <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#F6F0EA;">
                <tr>
                  <td style="padding:22px 24px; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:25px; color:#4A403C; mso-line-height-rule:exactly;">
                    <p style="margin:0 0 6px 0; font-weight:bold; color:#4B2E2A;">Fall Blend, 12 oz &mdash; $18</p>
                    <p style="margin:0;">Tasting notes: cocoa, toasted pecan, a little maple on the finish. Ground to order or whole bean.</p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>

          <tr>
            <td class="px" align="left" style="padding:28px 40px 4px 40px;">
              <table role="presentation" cellpadding="0" cellspacing="0" border="0">
                <tr>
                  <td align="center" bgcolor="#C96F32" style="background-color:#C96F32; border-radius:4px;">
                    <!--[if mso]>&nbsp;&nbsp;<![endif]-->
                    <a href="https://www.driftwoodcoffee.com/shop/fall-blend"
                       style="display:inline-block; padding:15px 34px; font-family:Arial, Helvetica, sans-serif; font-size:16px; line-height:20px; font-weight:bold; color:#FFFFFF; background-color:#C96F32; text-decoration:none; border-radius:4px; mso-line-height-rule:exactly;">
                      Order the Fall Blend
                    </a>
                    <!--[if mso]>&nbsp;&nbsp;<![endif]-->
                  </td>
                </tr>
              </table>
            </td>
          </tr>

          <tr>
            <td class="px" style="padding:32px 40px 0 40px;">
              <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr><td style="height:1px; line-height:1px; font-size:0; background-color:#E6DCD3;">&nbsp;</td></tr>
              </table>
            </td>
          </tr>

          <tr>
            <td class="px" align="left" style="padding:24px 40px 40px 40px; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:25px; color:#6B605A; mso-line-height-rule:exactly;">
              <p style="margin:0;">See you at the counter,</p>
              <p style="margin:0; font-weight:bold; color:#4B2E2A;">Nora</p>
              <p style="margin:0;">Driftwood Coffee Roasters</p>
            </td>
          </tr>

        </table>

      </td>
    </tr>
  </table>

</body>
</html>

Füllen Sie unten das Briefing mit 4 Fragen (Here is my brief:) in Ihrer eigenen Sprache aus. Es muss nicht auf Englisch sein. Kopieren Sie anschließend den gesamten Text in Ihren KI-Assistenten.

Gehen Sie zu E-Mails → Neue E-Mail erstellen → Reguläre E-Mail und klicken Sie auf Weiter.

Wählen Sie den Code Editor und klicken Sie auf Weiter. Geben Sie Ihrer E-Mail einen Namen — Ihre Kontakte sehen diesen Namen nicht — und klicken Sie erneut auf Weiter.

Fügen Sie Ihr HTML in den Editor ein und ersetzen Sie dabei den Platzhalter EMAIL CONTENT. Wenn Ihr Code <html>- oder <body>-Tags enthält, entfernen Sie diese zuerst — der Editor fügt sie automatisch hinzu.

Prüfen Sie die Live-Vorschau in der geteilten Ansicht während der Bearbeitung. Fügen Sie Personalisierungen über die Option Merge in der Werkzeugleiste hinzu: Begrüßung, Weiterleitungslink oder ein beliebiges Kontaktfeld.

Klicken Sie auf Speichern & Weiter, um die E-Mail-Checkliste zu öffnen. Füllen Sie An, Von und Betreff aus und wählen Sie anschließend Sofort senden oder Planen.

Lassen Sie Ihre E-Mail von der KI erstellen. Sie erhalten versandfertiges HTML.

Einmal einfügen oder verbinden und nicht mehr daran denken

Der Prompt

Der Claude-Connector

Der benutzerdefinierte GPT

Sieben Dinge, an denen KI-erstellte E-Mails scheitern können

So bringen Sie Ihr HTML in Benchmark

Ihre nächste E-Mail beginnt mit einem einzigen Prompt

Wählen Sie Ihre Sprache!