实用教程
用 Claude Opus 5.5 排查产品邮件的深色模式问题
让 Claude Opus 5.5 对比同一封邮件在浅色与深色收件箱里的表现，找出失效的素材或样式，再提出局部修改。提供 HTML、标志文件和真实收件箱截图。浏览器预览能帮助看布局，却不能证明邮件客户端会怎样显示。先保证商品、优惠和按钮看得清，再调整装饰。
让 Claude Opus 5.5 对比同一封邮件在浅色与深色收件箱里的表现，找出失效的素材或样式，再提出局部修改。提供 HTML、标志文件和真实收件箱截图。浏览器预览能帮助看布局，却不能证明邮件客户端会怎样显示。先保证商品、优惠和按钮看得清，再调整装饰。
改模板之前，先定位失效的层级
深色模式问题可能发生在不同层。保留原始邮件，让每一次修改都有清楚的前后对照。
| 消失的内容 | 优先检查的位置 | 先尝试什么 |
|---|---|---|
| 标志里的深色文字 | 图片的透明像素 | 经品牌确认、在两种背景上都清楚的标志处理 |
| 按钮文字 | 收到邮件中的文字色与背景色 | 修正这个按钮的前景和背景配色 |
| 商品边缘 | 产品图及紧邻的背景 | 测试带底的图片处理，不改商品颜色 |
| 屏蔽图片后整封邮件失去信息 | 信息是否只存在于图片中 | 用真实文字保留优惠和跳转目的 |
Litmus 的深色模式指南说明了不同收件箱的颜色处理和标志应对方式。某个 CSS 修改成功，不代表所有收件箱都会一样。真正有用的交付是一份补丁，以及列明客户端的测试表。
做一组可重复的收件箱对照
以假设的瓶装商品发布为例：准备四张截图，在两款重要的收件客户端里，分别打开同一封邮件的浅色和深色模式。记录客户端、操作系统、可获取的版本、邮件修订号，以及图片是否加载。通过实际邮件平台发送后再比较，因为平台也可能改写标记。
假设商品瓶仍然清楚，深色文字标志却消失了。可以要求两种经品牌允许的候选：细浅色描边，或带底的标志。两种都按真实显示尺寸比较。320 像素宽的源图缩到 160 像素显示时，源图中 2 像素的描边大约只剩 1 个 CSS 像素。要在 160 像素下判断，不要只放大看源文件。这只是尺寸示例，不是通用标志规范。
这轮测试保持产品照片不变。标志、照片和按钮同时改，下一次出错就更难定位。把候选 A、B 分别保存，使用相同的邮件内容做对比。
让提示词要求证据，而不是万能技巧
比较[邮件修订号]、[HTML 文件]、[标志文件]和这些实际收到邮件的截图：[逐张注明客户端、版本、模式]。
产品颜色、已批准标志的比例、优惠文案和目标链接必须保持不变。
逐张指出难以辨认的元素，区分图片像素问题与 HTML/CSS 配色问题。描述可见证据，不要推测没有依据的客户端行为。
对每个问题提出最小修改。标志部分对比经品牌允许的描边方案和带底方案，不要重画品牌标志。
输出修改清单、需要的 HTML 补丁、素材版本，以及覆盖上述客户端两种模式的测试表。图片被屏蔽时，优惠和按钮仍应让人理解。
若当前有已授权的工具可渲染或发送测试，明确报告实际执行了哪些检查。否则标为未测试，并说明下一步应比较哪些真实收件截图。不能凭浏览器预览宣称兼容。下一轮只处理测试表里失败的一项。例如：“候选 B 的标志通过了，但第 4 张截图的按钮文字消失了，只改这个按钮。”这样修改围绕可见问题展开，不必每次重新设计整封邮件。
怎样才算通过？
在每一种已测试配置里，读者都应认得品牌、看清商品、找到行动入口。实际打开按钮检查链接，另外检查屏蔽图片后的状态。未测试的客户端单独记录，不要勾选通过。在黑色画板上看起来合适的标志，仍可能在平台处理邮件后出问题。
一则2026 年 5 月的社区提问询问如何在深色模式中保留红蓝双色标志。这是真实的设计约束，却不能证明建议方案已经在你的广告里测试过。本文例子均为假设，不是 Opus 评测。
下一次发送前的几个问题
是否把整封邮件做成一张图就行？
这样会在图片被屏蔽时隐藏优惠，也更难改字。完整促销图仍然有用，但邮件的核心信息应在图片之外也能获取。
Opus 能直接改标志文件吗？
文件是否真的被编辑，取决于当前环境提供的工具。要求交付实际修改文件并检查；文字建议不等于已修改的素材。
Panelly 用在哪一步？
在 Panelly Studio 制作商品促销图，通过聊天调整画面。邮件 HTML、发送与收件箱测试是另外的步骤；这套流程不表示 Panelly 已集成 Opus。图片描述可以参考产品图替代文字指南。
