电子邮件新闻稿
根据主题或内容简报起草并设计完整的HTML电子邮件新闻稿。输出内容可直接粘贴到Loops、Mailchimp、Beehiiv、Resend或任何标准电子邮件平台使用。
关键规则： 仅使用基于表格的HTML和内联样式。禁止CSS类、flexbox、grid、<style>块。每个元素必须直接使用style=""。这是不可协商的——电子邮件客户端会剥离其他所有内容。
步骤 1：简报输入
需要三样东西才能开始。如果信息中已包含这三样：直接跳到步骤2。
如果缺少任何一样，请准确询问：
"要开始，我需要三样东西：
- 主题——这份新闻稿是关于什么的？
- 受众——谁在读？（角色、公司规模、他们如何认识你）
- 主要CTA——你希望读者采取什么行动？"
等待所有三样信息后再继续。
步骤 2：完整输入
将问题分组后一次性询问。用户可跳过任何问题——将应用默认值。
"在起草之前有几个问题——知道就回答，不知道就跳过：
内容
- 长度——简短（300字，直接） / 标准（500-700字） / 深入（800字以上）？
- 格式——社论文章 / 编号分解 / 个人故事 / 数据报告？
- 期刊背景——单次发送 / 每周系列的一部分 / 月度摘要？
- CTA链接——实际链接是什么？（或者我会用占位符）
品牌 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链接 | [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 + 请求的次要板块，从以下库中选择板块：
| 板块 | 何时包含 |
|---|---|
| 页眉 | 始终——Logo占位符 + 期刊编号或日期 |
| 主视觉区 | 始终——大标题 + 1-2句吸引点 |
| 引言 | 对话式或教育性语气——简短的个人说明 |
| 主要内容 | 主要文章或见解（文字量大） |
| 数据重点展示 | 有引人注目的统计、引用或数据点时 |
| 次要板块 | 当请求了次要CTA时 |
| 产品CTA | 品牌背景存在且适合软性产品推广时 |
| 赞助商板块 | 当请求了赞助商板块时 |
| 快速链接 | 当请求了精选链接板块时 |
| 页脚 | 始终——退订链接 + 公司名称 |
将选定的结构输出为编号列表，并附上每个板块的一行目的：
建议结构：
1. 页眉——Logo + 第1期 / [日期]
2. 主视觉区——标题 + 吸引段
3. 引言——简短的个人框架
4. 主要内容——[主题] 分解
5. 数据重点展示——故事中的关键数据点
6. CTA——[CTA 文本]
7. 页脚——退订 + 公司
这个结构可行吗，还是我应该调整某些板块？
在进入步骤4之前等待确认。
步骤 4：内容起草
按顺序为每个板块撰写文案。此时不涉及HTML——仅限干净的散文。
每个板块的规则：
- 页眉：期刊编号 + 日期。无需文案。
- 主视觉区标题：最多8个词，以结果为导向，不以“我/我们/我们的”开头
- 主视觉区吸引点：1-2句话，问题或好奇心缺口，吸引读者
- 引言：2-3句话，个人或背景相关，不说官话，允许使用缩略词
- 主要内容：250-400词，易于扫描——关键点使用粗体短语，段落简短（1-3行），避免大段文字，避免过多项目符号
- 数据重点展示：一个统计或引用，最多20词，简洁有力
- 产品CTA：2-3句话，价值优先，不是“查看我们的产品”——告诉他们这对他们有何改变
- CTA按钮文本：3-5个词，动作动词 + 好处（“阅读完整分解”、“保留我的座位”、“获取指南”）
- 页脚：退订链接占位符 + 公司名称
阅读 references/subject-line-formulas.md，然后编写3个主题行选项（如果用户未提供主题行）：
- 选项A：好奇心缺口公式
- 选项B：直接好处公式
- 选项C：数字/列表公式
不要使用破折号。不要使用：“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 自定义生成指南作为完整的token规范。在整个过程中应用用户的背景/字体/按钮/强调色选择。
然后（对于模板路径）：
- 从模板中仅选择所需的板块（基于步骤3的结构）
- 用步骤4的内容填充所有
[PLACEHOLDER]值 - 应用品牌颜色替换（见下文）
- 验证所有
[UNSUBSCRIBE_URL]占位符仍然存在（步骤6进行平台调优）
品牌颜色替换规则：
如果提供了 brand_color：
- 将品牌条
bgcolor（height:2px行中的#D8F90A）替换为品牌颜色 - 将数据重点展示左边框颜色替换为品牌颜色
- 将分类标签颜色替换为品牌颜色
- 如果品牌颜色亮度高（黄色、绿色、橙色——大多数霓虹色）：也将步骤徽章
#D8F90A替换为品牌颜色 - 如果品牌颜色亮度低（深海军蓝、森林绿、炭灰色）：保持步骤徽章和CTA按钮为
#D8F90A，仅将品牌颜色用于条和统计边框
如果未提供 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的炭灰色）：所有强调用途跳过品牌颜色，所有元素回退到#D8F90A
强调色纪律规则： 品牌颜色最多出现在3个位置：品牌条、统计边框、分类标签。绝不能出现在正文、标题、按钮背景或板块背景中。过度品牌化会破坏高端感。
CTA按钮文本颜色：
- 在
#D8F90A按钮背景上：始终使用#0A0A0A文本（这是一种浅色） - 在
#111111按钮背景上（在黄色号召性用语卡片内）：始终使用#F2F2F2文本 - 在品牌颜色按钮上：如果品牌颜色浅则使用
#0A0A0A，如果品牌颜色深则使用#FFFFFF
每个带背景色的 <td> 上都必需：
同时包含 bgcolor= HTML属性和内联 background-color: 样式。例如：
<td bgcolor="#D8F90A" style="background-color:#D8F90A;">
属性处理Outlook。样式处理其他所有客户端。永远不要只使用一个。
设计卓越（前端设计原则，针对电子邮件调整）：
电子邮件的表格约束不会限制设计雄心。在约束内突破：
-
排版做到极致：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] 替换为 `* |
| Beehiiv | 将 [UNSUBSCRIBE_URL] 替换为 %%unsubscribe_url%%。将 [FIRST_NAME] 替换为 %%first_name%% |
| Resend | 将 [UNSUBSCRIBE_URL] 替换为 {unsubscribeUrl}。注意：可根据要求提供React Email .tsx 输出 |
| 通用/其他 | 保留 [UNSUBSCRIBE_URL] 作为占位符，并添加注释：<!-- Replace with your unsubscribe link --> |
步骤 7：自检
在输出之前检查生成的HTML。修复发现的每个问题——不要跳过。
渲染检查：
- 所有样式内联——没有
<style>块，任何地方没有class=属性 - 所有
<table>具有cellpadding="0" cellspacing="0" border="0" - 图片（如有）具有
alt=""、border="0"、样式中的display:block - 容器表格最大宽度强制为600px
- CTA按钮使用
<table>+<td>结构，包含bgcolor=属性，而不仅仅是<a>加上display:block - 没有任何内联样式中出现
flexbox、grid、position:、float:、CSS变量（--var）、min-height、max-height -
border-radius仅应用于<td>——不应用于<table>或<a>（Outlook渲染<td>圆角） - 页脚包含退订链接，使用平台正确的变量
内容检查：
- 主视觉区标题不超过8个词
- CTA按钮文本为3-5个词
- 没有破折号（
--没问题，不是—） - 没有禁用词：“powerful”、“seamless”、“game-changing”、“leverage”、“innovative”、“unlock”、“transform”、“elevate”、“cutting-edge”、“robust”
...