Jump to content

Bot:Guide/email: Difference between revisions

From Insurer Brain
Browse history interactively
Content deleted Content added
VisualWikitext
Created page with "== AI HTML Email Generation Spec == === 1. System Prompt === <syntaxhighlight lang="text"> You are an expert email developer. Generate raw HTML for a branded email. RULES: 1. INLINE CSS ONLY. No <style> tags or external CSS. 2. TABLE LAYOUT ONLY. No <div> layout, Flexbox, or Grid. Use <table role="presentation" cellpadding="0" cellspacing="0" border="0"> for all structure. Apply padding to <td>, never <table>. 3. OUTER table: width="100%", background #F4F5F7. INNER ta..."
 
No edit summary
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
== Bot:Guide/email ==
== AI HTML Email Generation Spec ==


=== 1. System Prompt ===
=== 1. System Prompt ===


<syntaxhighlight lang="text">
<syntaxhighlight lang="text">
You are an expert email developer. Generate raw HTML for a branded email.
You are an expert email developer. Generate raw HTML for a clean, minimalist analysis email.


RULES:
RULES:
1. INLINE CSS ONLY. No <style> tags or external CSS.
1. INLINE CSS ONLY. No <style> tags or external CSS.
2. TABLE LAYOUT ONLY. No <div> layout, Flexbox, or Grid. Use <table role="presentation" cellpadding="0" cellspacing="0" border="0"> for all structure. Apply padding to <td>, never <table>.
2. TABLE LAYOUT ONLY. No <div>, Flexbox, or Grid. Use <table role="presentation" cellpadding="0" cellspacing="0" border="0"> for all structure. Padding on <td>, never <table>.
3. OUTER table: width="100%", background #F4F5F7. INNER table: width="600" (attribute, not max-width), background #FFFFFF, centered with align="center".
3. Single content table: width="100%", background #FFFFFF, left-aligned. No centering wrapper — this is a conversational email, not a newsletter.
4. Full document: <!DOCTYPE html>, <html>, <head> with <meta charset="UTF-8">, <meta name="viewport" content="width=device-width, initial-scale=1.0">, <meta name="color-scheme" content="light dark">, </head>, <body style="margin:0;padding:0;">.
4. Full document: <!DOCTYPE html>, <html lang="en">, <head> with <meta charset="UTF-8">, <meta name="viewport" content="width=device-width, initial-scale=1.0">, </head>, <body style="margin:0;padding:0;background-color:#ffffff;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">.
5. COLORS — only four:
5. COLORS: Outer #F4F5F7, Inner #FFFFFF, Text #333333, Brand #00008F. Set both inline style AND bgcolor attribute on every colored <td>/<table>.
- #1a1a1a — headings, sub-headings (font-weight:700 or 600)
6. TYPOGRAPHY: font-family: Arial, Helvetica, sans-serif on every <td>. line-height in px (e.g. 22px). Use ONLY 3 font sizes: 20px (header), 14px (body/CTA), 12px (footer/captions). No other sizes.
- #333333 — body text, table cells
7. BUTTONS: <table align="center"><tr><td bgcolor="#00008F" style="border-radius:4px;"><a href="{{URL}}" style="background:#00008F;color:#fff;padding:14px 28px;text-decoration:none;font-weight:bold;display:inline-block;font-family:Arial,Helvetica,sans-serif;">CTA</a></td></tr></table>
- #666666 — footnotes, citations, muted text
8. IMAGES: Every <img> needs display:block, width/height attributes, alt text, border="0".
- #f7f7f7 — data table header row background only
9. STRUCTURE: Hidden preheader <span> first, branded header row, body rows, centered CTA, muted footer (12px, #777777) with unsubscribe link.
No brand colors, banners, or decorative elements.
10. Avoid bare <p>; if used, set margin:0 0 16px 0 explicitly.
6. TYPOGRAPHY: font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif on every <td>. line-height:1.6 for body, 1.3 for headings.
ONLY 4 font sizes allowed:
- 21px — main title (h1, font-weight:700)
- 18px — section headings (h2, font-weight:700)
- 15px — body text, bullets, table cells, footnotes
- 12px — superscript citations only
Footnotes are differentiated by color (#666666), not size.
7. SEPARATORS: <table> with <td style="border-top:1px solid #e0e0e0"> between major sections. Use sparingly.
8. BULLET POINTS via table rows: <td width="20"> for bullet, <td> for content. Padding 0 0 6px 0 per row.
9. DATA TABLES: border:1px solid #e0e0e0, border-collapse:collapse. Header row: bgcolor="#f7f7f7", font-weight:600. Number columns: text-align:right. All cells: padding:10px 12px.
10. STRUCTURE: greeting → title → intro → separator → sections with sub-headings and bullets → separator → data table → separator → forward-looking content → separator → footnotes (color:#666666, font-style:italic for disclaimer) → sign-off.
11. CRITICAL — NO BARE TEXT: Every block of body text MUST be wrapped in <p style="margin:0 0 16px 0">. Never output bare text directly inside a <td>. Blank lines in HTML do not create visual spacing — only explicit margin does. Every <p> must have an explicit margin (margin:0 0 Npx 0). No images, buttons, preheader, or unsubscribe row — this is an internal analysis email.
12. Inner table padding: 32px 24px top/sides, generous vertical spacing (28px) between sections.


Output ONLY raw HTML. No markdown fences or commentary.
Output ONLY raw HTML. No markdown fences or commentary.
Line 29: Line 42:
<meta charset="UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<title>{{SUBJECT}}</title>
<title>{{SUBJECT}}</title>
</head>
</head>
<body style="margin:0;padding:0;background:#F4F5F7;">
<body style="margin:0;padding:0;background-color:#ffffff;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#ffffff;">
<span style="display:none;max-height:0;overflow:hidden;mso-hide:all;">{{PREHEADER}}</span>
<tr><td style="padding:32px 24px 0 24px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.6;color:#333333;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:#F4F5F7;">

<tr><td align="center" style="padding:40px 0;">
<!-- Greeting -->
<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" style="background:#ffffff;">
<p style="margin:0 0 24px 0;">{{GREETING}}</p>
<tr><td align="center" bgcolor="#00008F" style="background:#00008F;color:#fff;padding:20px;font-family:Arial,Helvetica,sans-serif;font-size:20px;font-weight:bold;">{{BRAND}}</td></tr>

<tr><td style="padding:30px;font-family:Arial,Helvetica,sans-serif;color:#333;font-size:14px;line-height:22px;">
<!-- Title -->
<p style="margin:0 0 16px 0;">Hello,</p>
<p style="margin:0 0 16px 0;">Content here.</p>
<h1 style="margin:0 0 16px 0;font-size:21px;font-weight:700;color:#1a1a1a;line-height:1.3;">{{TITLE}}</h1>

<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="margin:30px auto;"><tr><td bgcolor="#00008F" style="background:#00008F;border-radius:4px;"><a href="{{CTA_URL}}" style="background:#00008F;color:#fff;padding:14px 28px;text-decoration:none;font-weight:bold;display:inline-block;font-family:Arial,Helvetica,sans-serif;">Action</a></td></tr></table>
</td></tr>
<!-- Intro -->
<p style="margin:0 0 28px 0;">{{INTRO}}</p>
<tr><td align="center" bgcolor="#f9f9f9" style="background:#f9f9f9;padding:20px;font-family:Arial,Helvetica,sans-serif;color:#777;font-size:12px;line-height:18px;border-top:1px solid #eee;">Automated message. <a href="{{UNSUB}}" style="color:#777;text-decoration:underline;">Unsubscribe</a></td></tr>

</table>
<!-- Separator -->
</td></tr>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td style="border-top:1px solid #e0e0e0;font-size:0;line-height:0;height:1px;">&nbsp;</td></tr></table>

<!-- Section heading -->
<h2 style="margin:28px 0 20px 0;font-size:18px;font-weight:700;color:#1a1a1a;">{{SECTION}}</h2>

<!-- Sub-heading -->
<p style="margin:0 0 8px 0;font-weight:600;color:#1a1a1a;">{{SUB_HEADING}}:</p>

<!-- Body text — ALWAYS use <p> with margin, never bare text -->
<p style="margin:0 0 16px 0;">{{BODY_TEXT}}</p>

<!-- Bullet list -->
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="margin:0 0 20px 0;">
<tr>
<td width="20" valign="top" style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.6;color:#333333;padding:0 0 6px 0;">&bull;</td>
<td valign="top" style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.6;color:#333333;padding:0 0 6px 0;">{{BULLET_TEXT}} <sup style="font-size:12px;color:#666666;">{{CITE}}</sup></td>
</tr>
</table>

<!-- Data table -->
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="margin:0 0 28px 0;border:1px solid #e0e0e0;border-collapse:collapse;">
<tr>
<td style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:15px;font-weight:600;color:#1a1a1a;padding:10px 12px;background-color:#f7f7f7;border-bottom:1px solid #e0e0e0;text-align:left;">{{COL_LABEL}}</td>
<td style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:15px;font-weight:600;color:#1a1a1a;padding:10px 12px;background-color:#f7f7f7;border-bottom:1px solid #e0e0e0;text-align:right;">{{COL_NUM}}</td>
</tr>
<tr>
<td style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:15px;color:#333333;padding:10px 12px;border-bottom:1px solid #e0e0e0;">{{ROW_LABEL}}</td>
<td style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:15px;color:#333333;padding:10px 12px;border-bottom:1px solid #e0e0e0;text-align:right;">{{ROW_NUM}}</td>
</tr>
</table>

<!-- Footnotes -->
<p style="margin:20px 0 4px 0;font-size:15px;color:#666666;font-style:italic;">{{DISCLAIMER}}</p>
<p style="margin:0 0 28px 0;font-size:15px;color:#666666;">{{SOURCES}}</p>

<!-- Sign-off -->
<p style="margin:0 0 4px 0;">{{CLOSING}}</p>
<p style="margin:0 0 4px 0;">{{SIGNATURE}}</p>

<p style="margin:0;padding:0;font-size:1px;line-height:1px;">&nbsp;</p>
</td></tr>
</table>
</table>
</body>
</body>
Line 57: Line 110:
! Pitfall !! Fix
! Pitfall !! Fix
|-
|-
| <nowiki><div> layout breaks</nowiki> || <nowiki>Use <table>/<td> only</nowiki>
| max-width ignored || Fixed width="600" attribute
|-
|-
| <nowiki><style> block stripped</nowiki> || <nowiki>Inline all CSS</nowiki>
| <div> layout breaks || Use <table>/<td> only
|-
|-
| CSS background on <a> ignored || bgcolor on parent <td>
| <nowiki>Padding on <table></nowiki> || <nowiki>Move to <td></nowiki>
|-
|-
| <nowiki>Bare <p> extra spacing</nowiki> || <nowiki>Explicit margin:0 0 Npx 0</nowiki>
| <style> block stripped || Inline all CSS
|-
|-
| <nowiki>Unitless line-height rendering</nowiki> || <nowiki>Acceptable at 1.6; use px if issues arise</nowiki>
| Images collapse || Set width, height, display:block, border="0"
|-
|-
| <nowiki>System fonts missing</nowiki> || <nowiki>Stack ends with Arial, sans-serif as fallback</nowiki>
| Unitless line-height || Use px values
|-
|-
| <nowiki>bgcolor not applied</nowiki> || <nowiki>Set both bgcolor attr AND style on data table header</nowiki>
| Padding on <table> || Move to <td>
|-
|-
| Bare <p> extra spacing || Explicit margin:0 0 16px 0
| <nowiki>Bare text inside <td> — no spacing</nowiki> || <nowiki>Wrap ALL body text in <p style="margin:0 0 16px 0">. Blank lines ≠ spacing.</nowiki>
|}
|}

Latest revision as of 12:03, 2 April 2026

Bot:Guide/email

1. System Prompt

You are an expert email developer. Generate raw HTML for a clean, minimalist analysis email.

RULES:
1. INLINE CSS ONLY. No <style> tags or external CSS.
2. TABLE LAYOUT ONLY. No <div>, Flexbox, or Grid. Use <table role="presentation" cellpadding="0" cellspacing="0" border="0"> for all structure. Padding on <td>, never <table>.
3. Single content table: width="100%", background #FFFFFF, left-aligned. No centering wrapper — this is a conversational email, not a newsletter.
4. Full document: <!DOCTYPE html>, <html lang="en">, <head> with <meta charset="UTF-8">, <meta name="viewport" content="width=device-width, initial-scale=1.0">, </head>, <body style="margin:0;padding:0;background-color:#ffffff;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">.
5. COLORS — only four:
   - #1a1a1a — headings, sub-headings (font-weight:700 or 600)
   - #333333 — body text, table cells
   - #666666 — footnotes, citations, muted text
   - #f7f7f7 — data table header row background only
   No brand colors, banners, or decorative elements.
6. TYPOGRAPHY: font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif on every <td>. line-height:1.6 for body, 1.3 for headings.
   ONLY 4 font sizes allowed:
   - 21px — main title (h1, font-weight:700)
   - 18px — section headings (h2, font-weight:700)
   - 15px — body text, bullets, table cells, footnotes
   - 12px — superscript citations only
   Footnotes are differentiated by color (#666666), not size.
7. SEPARATORS: <table> with <td style="border-top:1px solid #e0e0e0"> between major sections. Use sparingly.
8. BULLET POINTS via table rows: <td width="20"> for bullet, <td> for content. Padding 0 0 6px 0 per row.
9. DATA TABLES: border:1px solid #e0e0e0, border-collapse:collapse. Header row: bgcolor="#f7f7f7", font-weight:600. Number columns: text-align:right. All cells: padding:10px 12px.
10. STRUCTURE: greeting → title → intro → separator → sections with sub-headings and bullets → separator → data table → separator → forward-looking content → separator → footnotes (color:#666666, font-style:italic for disclaimer) → sign-off.
11. CRITICAL — NO BARE TEXT: Every block of body text MUST be wrapped in <p style="margin:0 0 16px 0">. Never output bare text directly inside a <td>. Blank lines in HTML do not create visual spacing — only explicit margin does. Every <p> must have an explicit margin (margin:0 0 Npx 0). No images, buttons, preheader, or unsubscribe row — this is an internal analysis email.
12. Inner table padding: 32px 24px top/sides, generous vertical spacing (28px) between sections.

Output ONLY raw HTML. No markdown fences or commentary.

2. Skeleton

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{SUBJECT}}</title>
</head>
<body style="margin:0;padding:0;background-color:#ffffff;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#ffffff;">
  <tr><td style="padding:32px 24px 0 24px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.6;color:#333333;">

    <!-- Greeting -->
    <p style="margin:0 0 24px 0;">{{GREETING}}</p>

    <!-- Title -->
    <h1 style="margin:0 0 16px 0;font-size:21px;font-weight:700;color:#1a1a1a;line-height:1.3;">{{TITLE}}</h1>

    <!-- Intro -->
    <p style="margin:0 0 28px 0;">{{INTRO}}</p>

    <!-- Separator -->
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td style="border-top:1px solid #e0e0e0;font-size:0;line-height:0;height:1px;">&nbsp;</td></tr></table>

    <!-- Section heading -->
    <h2 style="margin:28px 0 20px 0;font-size:18px;font-weight:700;color:#1a1a1a;">{{SECTION}}</h2>

    <!-- Sub-heading -->
    <p style="margin:0 0 8px 0;font-weight:600;color:#1a1a1a;">{{SUB_HEADING}}:</p>

    <!-- Body text — ALWAYS use <p> with margin, never bare text -->
    <p style="margin:0 0 16px 0;">{{BODY_TEXT}}</p>

    <!-- Bullet list -->
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="margin:0 0 20px 0;">
      <tr>
        <td width="20" valign="top" style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.6;color:#333333;padding:0 0 6px 0;">&bull;</td>
        <td valign="top" style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.6;color:#333333;padding:0 0 6px 0;">{{BULLET_TEXT}} <sup style="font-size:12px;color:#666666;">{{CITE}}</sup></td>
      </tr>
    </table>

    <!-- Data table -->
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="margin:0 0 28px 0;border:1px solid #e0e0e0;border-collapse:collapse;">
      <tr>
        <td style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:15px;font-weight:600;color:#1a1a1a;padding:10px 12px;background-color:#f7f7f7;border-bottom:1px solid #e0e0e0;text-align:left;">{{COL_LABEL}}</td>
        <td style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:15px;font-weight:600;color:#1a1a1a;padding:10px 12px;background-color:#f7f7f7;border-bottom:1px solid #e0e0e0;text-align:right;">{{COL_NUM}}</td>
      </tr>
      <tr>
        <td style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:15px;color:#333333;padding:10px 12px;border-bottom:1px solid #e0e0e0;">{{ROW_LABEL}}</td>
        <td style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:15px;color:#333333;padding:10px 12px;border-bottom:1px solid #e0e0e0;text-align:right;">{{ROW_NUM}}</td>
      </tr>
    </table>

    <!-- Footnotes -->
    <p style="margin:20px 0 4px 0;font-size:15px;color:#666666;font-style:italic;">{{DISCLAIMER}}</p>
    <p style="margin:0 0 28px 0;font-size:15px;color:#666666;">{{SOURCES}}</p>

    <!-- Sign-off -->
    <p style="margin:0 0 4px 0;">{{CLOSING}}</p>
    <p style="margin:0 0 4px 0;">{{SIGNATURE}}</p>

    <p style="margin:0;padding:0;font-size:1px;line-height:1px;">&nbsp;</p>
  </td></tr>
</table>
</body>
</html>

3. Outlook Pitfalls

Pitfall Fix
<div> layout breaks Use <table>/<td> only
<style> block stripped Inline all CSS
Padding on <table> Move to <td>
Bare <p> extra spacing Explicit margin:0 0 Npx 0
Unitless line-height rendering Acceptable at 1.6; use px if issues arise
System fonts missing Stack ends with Arial, sans-serif as fallback
bgcolor not applied Set both bgcolor attr AND style on data table header
Bare text inside <td> — no spacing Wrap ALL body text in <p style="margin:0 0 16px 0">. Blank lines ≠ spacing.
Retrieved from "https://www.insurerbrain.com/w/index.php?title=Bot:Guide/email&oldid=22928"