email-newsletter

电子邮件简报

根据主题或内容简介，起草并设计一份完整的 HTML 电子邮件简报。输出可直接粘贴到 Loops、Mailchimp、Beehiiv、Resend 或任何标准电子邮件平台中。

---

重要规则： 只能使用基于表格的 HTML 和内联样式。不能使用 CSS 类、flexbox、grid 或 <style> 块。每个元素都必须直接带有 style=""。这不是可选项——电子邮件客户端会移除其他所有内容。

---

第 1 步：收集简介

开始前需要三项信息。如果消息中已包含全部三项：跳到第 2 步。

如果缺少任何一项，请原样询问：

"开始前，我需要了解三件事：

1. 主题 —— 这份简报的内容是什么？
2. 受众 —— 谁会阅读？（角色、公司规模，以及他们如何认识你）
3. 主要 CTA —— 你希望读者采取哪一个行动？"

等待对方提供全部三项信息后再继续。

---

第 2 步：补充信息

在一条消息中按类别询问所有问题。用户可以跳过任何问题——将使用默认值。

"起草前有几个问题——请回答你知道的，其他可以跳过：

内容

1. 长度 —— 简短（300 字，简洁有力）/ 标准（500–700 字）/ 深入探讨（800 字以上）？
2. 格式 —— 编辑文章 / 编号分解 / 个人故事 / 数据报告？
3. 期数背景 —— 单次发送 / 每周系列的一部分 / 月度摘要？
4. CTA URL —— 实际链接是什么？（否则我会使用占位符）

品牌 5. 公司 / 品牌名称 —— 用于页眉和页脚 6. 标语 —— 一句话介绍（可选，用于页脚） 7. 城市和国家 —— 用于页脚（例如 "San Francisco, US"） 8. 品牌主色 —— 十六进制颜色值？（例如 #856FE6） 9. 次要强调色 —— 保持默认黄绿色（#D8F90A）/ 使用品牌色 / 其他？

设计 10. 背景 —— 深色（编辑风 / SaaS）/ 浅色（简洁 / 企业风）/ 自定义十六进制颜色？ 11. 展示字体 —— 编辑风衬线字体（Instrument Serif）/ 简洁现代无衬线字体 / 仅系统字体？ 12. 按钮样式 —— 胶囊形（圆角很大）/ 柔和圆角 / 直角？ 13. 视觉风格 —— 编辑风 / 技术 + 数据 / 温暖 + 创始人风 / 大胆 + 活动风？

平台和技术 14. 平台 —— Loops / Mailchimp / Beehiiv / Resend / 其他？ 15. 语气 —— 教育性 / 对话式 / 大胆直接 / 正式 / 活泼？ 16. 个性化 —— 无 / 名字 / 名字 + 公司？ 17. 邮件主题 —— 已有主题 / 需要 3 个选项？ 18. 次要版块 —— 赞助商版块 / 产品推荐 / 活动 / 快速链接 / 无？ 19. 纯文本版本 —— 需要（推荐）/ 不需要？"

跳过问题时的默认值：

问题	默认值
长度	标准（500–700 字）
格式	编辑文章
期数背景	单次发送
CTA URL	[CTA_URL] 占位符
公司名称	[YOUR BRAND] 占位符
标语	无
城市和国家	[CITY, COUNTRY] 占位符
品牌色	无（所有强调色均使用 #D8F90A）
次要强调色	#D8F90A（默认黄绿色）
背景	深色
展示字体	Instrument Serif（编辑风衬线字体）
按钮样式	胶囊形
视觉风格	编辑风
平台	通用
语气	对话式
个性化	无
邮件主题	生成 3 个选项
次要版块	无
纯文本	是

---

第 2.5 步：确定设计方向（内部使用——不向用户展示）

根据第 2 步的答案，确定：

• 视觉特征（根据问题 13，或在用户跳过时根据语气和格式推断）
• 一个令人过目难忘的元素——在第 3 步之前确定
• 模板路径（参见第 5 步）

如果用户跳过问题 13，视觉特征默认如下：

• 教育性 / 正式语气：编辑风
• 数据密集型内容（统计数据、基准、报告）：技术 / 数据导向
• 产品发布、活动、宣传活动：大胆 / 活动风

切勿单独询问用户的设计方向——根据他们的回答推断。

步骤 3：结构设计

选择章节前，请阅读 references/html-email-guide.md，了解布局规则。

根据主题 + 受众 + CTA + 请求的次要章节，从以下库中选择章节：

章节	适用情形
header	始终包含——徽标占位符 + 期号或日期
hero	始终包含——醒目的标题 + 1-2 句引言
intro	适用于对话式或教育性语气——简短的个人说明
main-content	主要文章或见解（以文字为主）
stat-callout	有令人信服的统计数据、引言或数据点
secondary-section	用户请求了次要 CTA
product-cta	有品牌背景，且适合轻度推广产品
sponsor-block	用户请求了赞助商章节
quick-links	用户请求了精选链接章节
footer	始终包含——退订链接 + 公司名称

将选定的结构按编号列表输出，每个章节用一行说明其用途：

Proposed structure:
1. Header -- logo + Issue #1 / [date]
2. Hero -- headline + hook paragraph
3. Intro -- short personal framing
4. Main Content -- [topic] breakdown
5. Stat Callout -- key data point from the story
6. CTA -- [cta text]
7. Footer -- unsubscribe + company

Does this structure work, or should I adjust any sections?

等待确认后再进行步骤 4。

---

步骤 4：撰写内容草稿

按顺序为每个章节撰写文案。暂不编写 HTML，仅输出简洁文案。

各章节规则：

• Header：期号 + 日期。无需撰写文案。
• Hero 标题：最多 8 个词，聚焦结果，不要以“I/We/Our”开头
• Hero 引言：1-2 句，提出问题或制造悬念，吸引读者继续阅读
• Intro：2-3 句，个人化或提供背景，避免企业腔，可以使用缩略形式
• Main content：250-400 词，便于快速浏览——用 粗体短语 突出重点，段落简短（1-3 行），避免大段文字，也不要堆砌项目符号
• Stat callout：一条统计数据或引言，最多 20 个词，简洁有力
• Product CTA：2-3 句，突出价值，不要写“查看我们的产品”——告诉读者他们能获得哪些改变
• CTA 按钮文案：3-5 个词，使用“行动动词 + 收益”的形式（“阅读全文”“为我留个席位”“获取指南”）
• Footer：退订链接占位符 + 公司名称

阅读 references/subject-line-formulas.md，然后撰写 3 个主题行选项（如果用户未提供主题行）：

• 选项 A：悬念公式
• 选项 B：直接表达收益的公式
• 选项 C：数字/列表公式

不要使用 em dash。不要使用：“powerful”“seamless”“game-changing”“leverage”“innovative”“unlock”“transform”“elevate”“cutting-edge”“robust”。

---

步骤 5：生成 HTML

生成 HTML 前，请阅读 references/design-system.md 和 references/html-email-guide.md。

模板或自定义——根据步骤 2 的回答决定：

仅当以下条件全部满足时，使用 templates/dark-newsletter.html 作为基础：

• 背景为深色（或未指定）
• 显示字体为 Instrument Serif（或未指定）
• 未提供自定义背景十六进制颜色

仅当以下条件全部满足时，使用 templates/light-newsletter.html 作为基础：

• 背景为浅色，或语气为正式
• 显示字体为 Instrument Serif（或未指定）
• 未提供自定义背景十六进制颜色

满足以下任一条件时，从头生成自定义 HTML：

• 提供了自定义背景十六进制颜色（不是深色，也不是白色）
• 显示字体为现代无衬线字体或仅使用系统字体
• 答案组合形成了两种模板都无法满足的设计

如需自定义生成，请将 references/design-system.md 中的 Custom Generation Guide 用作完整的令牌规范。贯穿全文应用用户选择的背景、字体、按钮和强调色。

然后（使用模板时）：

1. 根据步骤 3 的结构，仅保留模板中需要的章节
2. 使用步骤 4 的内容填入所有 [PLACEHOLDER] 值
3. 应用品牌颜色替换规则（见下文）
4. 确认所有 [UNSUBSCRIBE_URL] 占位符仍然存在（平台适配在步骤 6 中进行）

品牌颜色替换规则： 如果提供了 brand_color：

• 将品牌色条的 bgcolor（height:2px 行中的 #D8F90A）替换为 brand_color
• 将统计数据标注的左边框颜色替换为 brand_color
• 将类别标签颜色替换为 brand_color
• 如果 brand_color 的亮度较高（黄色、绿色、橙色——大多数霓虹色）：也将步骤徽章的 #D8F90A 替换为 brand_color
• 如果 brand_color 的亮度较低（深海军蓝、森林绿、炭灰色）：步骤徽章和 CTA 按钮仍使用 #D8F90A，仅将色条和统计数据边框改为 brand_color

如果未提供 brand_color：所有 #D8F90A 值保持不变。

内容替换规则（根据步骤 2 的回答）：

• 如果提供了 company_name：替换所有 [YOUR BRAND] 和 [COMPANY NAME] 占位符
• 如果提供了 city_country：替换 [CITY, COUNTRY] 占位符
• 如果提供了 tagline：将其作为副标题添加到页脚中，放在公司名称之后
• 如果提供了 cta_url：将所有 [CTA_URL] 占位符替换为实际 URL
• 如果 personalization = first_name：在主视觉问候语中添加适合平台的名字变量，例如：Beehiiv 使用 Hey %%first_name%%,，Loops 使用 Hey {{first_name}},，Mailchimp 使用 Hey *|FNAME|*,
• 如果 personalization = first_name + company：在语境合适的地方添加这两个变量

品牌色视觉对比检查（深色邮件）：

品牌色在 #111111 背景上是否足够醒目？在脑海中测试：它能否作为 2px 色条清晰可见？

• 高饱和度颜色（紫色、蓝色、青色、粉色、黄色、橙色、绿色）：可以——用于色条、统计数据边框和类别标签
• 低饱和度／接近中性色（暖灰色、米色、米白色）：仅用于色条；类别标签恢复为 #555555
• 接近黑色（约低于 #2A2A2A 的极深海军蓝、森林绿、炭灰色）：所有强调元素都不要使用 brand_color，全部改用 #D8F90A

**强调色使用原则：**brand_color 最多出现在 3 个位置：品牌色条、统计数据边框、类别标签。绝不要用于正文、标题、按钮背景或区块背景。过度使用品牌色会破坏高级质感。

CTA 按钮文字颜色：

• 在 #D8F90A 按钮背景上：始终使用 #0A0A0A 文字（这是浅色背景）
• 在 #111111 按钮背景上（黄色标注卡片内）：始终使用 #F2F2F2 文字
• 在 brand_color 按钮上：品牌色较浅时使用 #0A0A0A，较深时使用 #FFFFFF

每个带背景色的 <td> 都必须具备： 同时设置 bgcolor= HTML 属性和内联 background-color: 样式。示例：

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

该属性用于兼容 Outlook。该样式用于其他所有场景。绝不能只用其中一种。

卓越设计（适用于邮件的 frontend-design 原则）：

邮件表格的限制并不意味着设计上不能大胆。应在限制内尽力发挥：

• 将排版发挥到极致：4–5 个词的标题使用 60px 字号和 -0.04em 字距。6–7 个词的标题使用 56px 和 -0.03em。8 个词的标题使用 48px。绝不要为了保险而缩小字号——标题是海报，不是标签。统计引述使用 Instrument Serif 斜体，能增添其他元素无法比拟的文学质感。

• 以疏密对比体现匠心：主视觉区域最大限度留白（顶部 64px）。正文段落紧凑而密集。CTA 标注卡片再次最大限度留白（64px）。疏 → 密 → 疏，这种节奏会让设计显得经过刻意构思，而非模板生成。

• 通过区块交替营造背景层次（均适用于邮件）：

  • 页眉：#0A0A0A
  • 主视觉区域：#111111
  • 统计数据标注外层：#111111，内层凸起卡片：#1A1A1A
  • 正文段落：#161616（细微的凸起效果能营造层次，而不需要使用颜色）
  • 步骤卡片：#111111（与正文形成对比）
  • CTA 标注卡片：#D8F90A（唯一明亮的元素——绝不要削弱它的效果）
  • 页脚：#080808

• 稀缺的强调色带来奢华感：深色背景中的一张黄色标注卡片显得高级。黄色出现在六个位置则显得廉价。CTA 卡片的力量完全来自于它是深色邮件中唯一明亮的元素。

• 难忘度测试：保存前，用一句话描述读者 3 小时后会向同事讲述什么。如果描述很模糊（“光线昏暗，风格简洁”），说明视觉焦点还不够鲜明。要具体（“那张印着醒目衬线标题的黄色卡片”）。

• 将数据亮点设计成编辑式引文：左侧边框设为 4px（不是 3px）。引文文字使用 26px 的 Instrument Serif 斜体。内部留白设为 32px。这是电子邮件最接近杂志醒目引文的设计。就按这种方式处理。

---

第 6 步：平台适配

阅读 references/platform-compat.md 并应用平台专属调整：

平台	操作
Loops	将 [UNSUBSCRIBE_URL] 替换为 {{unsubscribe_url}}。将 [FIRST_NAME] 引用替换为 {{first_name}}
Mailchimp	将 [UNSUBSCRIBE_URL] 替换为 *|UNSUB|*。为可编辑的 <td> 块添加 mc:edit="[section-name]"
Beehiiv	将 [UNSUBSCRIBE_URL] 替换为 %%unsubscribe_url%%。将 [FIRST_NAME] 替换为 %%first_name%%
Resend	将 [UNSUBSCRIBE_URL] 替换为 {unsubscribeUrl}。注意：可按需提供 React Email .tsx 输出
Generic/Other	将 [UNSUBSCRIBE_URL] 保留为占位符，并附上注释：``

---

第 7 步：自检

输出前检查生成的 HTML。修复发现的每个问题，不要跳过。

渲染检查：

• 所有样式均为内联样式，不包含 <style> 块，任何位置都没有 class= 属性
• 所有 <table> 均包含 cellpadding="0" cellspacing="0" border="0"
• 图片（如有）均包含 alt=""、border="0"，且样式中包含 display:block
• 容器表格强制设置最大宽度为 600px
• CTA 按钮使用 <table> + <td> 结构并带有 bgcolor= 属性，而不是仅使用 display:block 的 <a>
• 任何内联样式中都没有 flexbox、grid、position:、float:、CSS 变量（--var）、min-height 或 max-height
• <td> 上才使用 border-radius，不要用于 <table> 或 <a>（Outlook 会渲染 <td> 的圆角）
• 页脚包含退订链接，且使用符合平台要求的变量

内容检查：

• 主视觉标题不超过 8 个词
• CTA 按钮文字为 3–5 个词
• 不使用 em dash（可以使用 --，不要使用 --）
• 不包含禁用词：“powerful”“seamless”“game-changing”“leverage”“innovative”“unlock”“transform”“elevate”“cutting-edge”“robust”
• 如有要求，纯文本版本可干净地移除所有 HTML

设计质量检查：

• 第 2.5 步中一个不容错过的元素在视觉上占据主导地位，不要埋在权重相同的版块之间
• 字体层级清晰：H1 >> H2 >> 正文；每级之间的字号对比至少为 2:1
• 所有间距值均采用有效节奏：8 / 16 / 20 / 24 / 32 / 40 / 52 / 64px；不要使用任意值（18px、22px、30px、45px 等）
• 品牌色出现不超过 3 处；统计出现次数，若超出则从优先级最低的元素中移除
• 不含电子邮件的低质套路；对照 references/design-system.md 中的低质套路列表进行检查

若任何检查未通过：直接修复，然后在脑中重新运行检查清单。

---

第 8 步：主题行展示

如果生成了 3 个主题行选项，请附上推荐项：

**Subject Line Options**

A. [subject] -- [formula used, best for what audience/context]
B. [subject] -- [formula used]
C. [subject] -- [formula used]

Recommendation: [A/B/C] -- [one sentence reason based on audience and tone]

如果用户提供了自己的主题行，则跳过此步骤。

---

第 9 步：保存文件并展示摘要

先将 HTML 保存到文件，不要直接贴到聊天中。

mkdir -p docs/newsletters

将完整 HTML 写入： docs/newsletters/[topic-slug]-[YYYY-MM-DD].html

其中 [topic-slug] 是主题转为小写并将空格替换为连字符后的结果（例如，“AI B2B Sales” → ai-b2b-sales）。

如果用户要求提供纯文本版本，也请将其写入： docs/newsletters/[topic-slug]-[YYYY-MM-DD].txt

然后在聊天中展示以下摘要（不要使用 HTML 代码围栏）：

## Newsletter: [topic slug]
Date: [today's date] | Platform: [platform] | Tone: [tone]

Saved to: docs/newsletters/[topic-slug]-[YYYY-MM-DD].html

---

### Subject Lines
A. [subject A] -- [formula]
B. [subject B] -- [formula]
C. [subject C] -- [formula]
Recommended: [letter] -- [one-sentence reason]

---

### Send Checklist
- [ ] Replace [CTA_URL] with your actual link
- [ ] Replace [COMPANY NAME] and [CITY, COUNTRY] in footer
- [ ] Replace [YOUR BRAND] in header with your brand name (or swap in a logo image)
- [ ] Verify unsubscribe variable works in [platform]
- [ ] Send a test email to yourself before launching

不要在聊天中输出 HTML。文件路径会告诉用户在哪里查找。

---

分区参考

分区	用途
header	Logo + 问题编号或日期
hero	醒目的标题 + 1-2 句引言
intro	简短的个人备注或背景信息
main-content	主要文章或见解（以文字为主）
image-block	全宽图片 + 说明文字
stat-callout	在方框中突出显示的数据或引言
secondary-section	第二个故事或功能
product-cta	轻度推广产品或突出功能
sponsor-block	赞助内容（明确标注）
quick-links	精选链接区（3-5 项）
footer	退订链接、公司信息、法律信息

按需提供的输出格式

• 标准 HTML（默认）：内联样式、基于表格，可在各种环境中使用
• React Email：.tsx 组件输出——需明确提出，适用于 Resend + 开发团队
• 纯文本：始终包含精简的备用版本，除非用户选择不提供