AI 邮件排版：浅色与暗色预览都保留可读按钮

展开本页目录

开始前准备什么

独立练习目录及Python 3.14；系统与Node依赖以README为准。
离线重放无需Key；新请求使用自己的apizt Key，先核对模型权限和当前价格。
原创合成材料，不需要登录第三方平台账号。

先看文件
按步骤操作
对照真实结果
离线或模型复跑

下载本例输入、代码、真实回执和产物

默认离线重放；包含完整失败尝试与本地检查，不含Key。

1. 核对本例材料与目标文件

生成并检查浏览器HTML浅色/暗色预览和WCAG对比度；没有发送邮件，也不声称所有邮件客户端暗色策略一致。

先下载合成材料在独立目录练习。原始文件、模型输入与验收答案分别保留；本地核对答案不发送给模型。

input.json（节选）

json

{
  "event": "演示资料更新",
  "date": "2026-11-07",
  "cta": "查看演示资料"
}

AI 邮件排版：浅色与暗色预览都保留可读按钮 · 实际输入、原始文件和本例操作约束的浏览器截图 — 实际输入、原始文件和本例操作约束的浏览器截图
查看高清原图

2. 按顺序完成这项具体操作

本次实际使用Python 3.14，依赖版本固定在资料包。需要LibreOffice或Node的案例请先按README安装对应运行时。python run.py读取真实旧响应完成本地处理；只有显式--live才发新请求。

1. 准备合成资料更新事实卡，固定日期和按钮文案。
2. 让模型返回subject、date与cta_label，保留原始响应。
3. 生成浅色与暗色HTML预览，分别计算正文及按钮前景/背景对比度。
4. 在preview.html实际查看两种配色及日期，再核对对比度结果；没有发送邮件，浏览器预览不代表所有邮件客户端兼容。

独立练习目录 · 默认仅离线复核

python3 -m venv .venv
source .venv/bin/activate
python -m pip install -r requirements.txt
python run.py

3. 对照真正发送的请求

输入均为原创虚构演示数据。只输出JSON，subject包含演示资料更新，date保持2026-11-07，cta_label为查看演示资料。

网页实验台只执行这一步模型字段检查。原生文件写入、坐标/公式/格式回读及负例验收由下载包负责。

request-1.json（图片Base64省略，原文件在下载包）

json

{
  "model": "gemini-2.5-flash-lite",
  "messages": [
    {
      "role": "system",
      "content": "严格只输出单个JSON对象，不要Markdown代码围栏，不要解释。输入均为原创虚构演示数据。只输出JSON，subject包含演示资料更新，date保持2026-11-07，cta_label为查看演示资料。"
    },
    {
      "role": "user",
      "content": "任务约束（只输出JSON对象，不用代码围栏）：\n输入均为原创虚构演示数据。只输出JSON，subject包含演示资料更新，date保持2026-11-07，cta_label为查看演示资料。\n待处理合成材料：\n{\"event\": \"演示资料更新\", \"date\": \"2026-11-07\", \"cta\": \"查看演示资料\"}"
    }
  ],
  "temperature": 0,
  "max_tokens": 512,
  "provider": {
    "sort": "success_rate"
  },
  "response_format": {
    "type": "json_object"
  }
}

4. 查看原生处理代码与实际文件

下面节选来自本次实际执行的workflow.py分支，需要结合完整脚本运行。模型输出不能代替文件解析器或业务验算。

具体产物：preview.html、result.json。

workflow.py · 本例分支节选

python

def lum(hex_value):
    parts = [int(hex_value[i:i + 2], 16) / 255 for i in [1, 3, 5]]
    return sum(((v / 12.92 if v <= 0.04045 else ((v + 0.055) / 1.055) ** 2.4) * w for v, w in zip(parts, [0.2126, 0.7152, 0.0722])))

def contrast(a, b):
    a, b = sorted([lum(a), lum(b)])
    return (b + 0.05) / (a + 0.05)
modes = [('浅色', '#ffffff', '#352244', '#503373', '#ffffff'), ('暗色', '#171121', '#f3edf8', '#f5c242', '#291343')]
body = '<div style="display:grid;grid-template-columns:1fr 1fr;gap:22px">'
ratios = []
for name, bg, fg, button, label in modes:
    ratio = {'mode': name, 'body': contrast(bg, fg), 'button': contrast(button, label)}
    ratios.append(ratio)
    body += '<article style="padding:30px;background:' + bg + ';color:' + fg + '"><h2>' + name + '</h2><h3>' + html.escape(output.get('subject', '')) + '</h3><p>' + html.escape(output.get('date', '')) + '</p><a href="https://demo.example/material" style="display:inline-block;padding:14px;background:' + button + ';color:' + label + '">' + html.escape(output.get('cta_label', '')) + '</a></article>'
body += '</div>'
check('两种主题正文和按钮对比度达标', all((x['body'] >= 4.5 and x['button'] >= 4.5 for x in ratios)))
check('模型保留活动日期与按钮文字', output.get('date') == '2026-11-07' and output.get('cta_label') == '查看演示资料')
(folder / 'preview.html').write_text(_shell(case['title'], body))
artifacts.append('preview.html')
result = {'copy': output, 'contrast': ratios, 'scope': 'browser preview; no mail sent'}

5. 对照真实结果和检查表

实测2026-10-25T07:45:50.710404+00:00，HTTP200；请求gemini-2.5-flash-lite，返回gemini-2.5-flash-lite。本次3/3项检查通过，指本例执行及验收机制通过，不代表所有模型字段零误差。

最后一次返回用量190tokens；1份尝试记录的已知用量合计190。失败记录保留，用量缺失不按0计，本文不推算实际金额。

实际检查	结果
真实apizt API响应HTTP200	通过
两种主题正文和按钮对比度达标	通过
模型保留活动日期与按钮文字	通过

实际检查: 真实apizt API响应HTTP200
结果: 通过

实际检查: 两种主题正文和按钮对比度达标
结果: 通过

实际检查: 模型保留活动日期与按钮文字
结果: 通过

result.json · 原生处理后实际结果

json

{
  "copy": {
    "subject": "演示资料更新",
    "date": "2026-11-07",
    "cta_label": "查看演示资料"
  },
  "contrast": [
    {
      "mode": "浅色",
      "body": 14.347606028729217,
      "button": 10.183367502974239
    },
    {
      "mode": "暗色",
      "body": 16.055260082063235,
      "button": 9.994529801670923
    }
  ],
  "scope": "browser preview; no mail sent"
}

AI 邮件排版：浅色与暗色预览都保留可读按钮 · 本例实际产物与原始响应的浏览器截图；本地检查和模型答案分开记录 — 本例实际产物与原始响应的浏览器截图；本地检查和模型答案分开记录
查看高清原图

6. 替换输入前，先确认这些边界

生成并检查浏览器HTML浅色/暗色预览和WCAG对比度；没有发送邮件，也不声称所有邮件客户端暗色策略一致。

修改材料后应重新制定事实断言和反例。识别错误率、混淆矩阵或拒答类教程允许保留模型实际错误；检查通过指计算和处理正确。没有调用视频模型。

怎样确认已经完成

真实apizt API响应HTTP200
两种主题正文和按钮对比度达标
模型保留活动日期与按钮文字

常见问题

AI 邮件 HTML 暗色模式怎么开始？

准备合成资料更新事实卡，固定日期和按钮文案。按本页顺序继续，先用下载包离线重放，再替换自己的材料。

网页试跑和下载包有什么区别？

网页只复跑模型字段，不生成全部原生文件；资料包包含实际原生处理和本地验收。

这次通过结果适用于其他材料吗？

生成并检查浏览器HTML浅色/暗色预览和WCAG对比度；没有发送邮件，也不声称所有邮件客户端暗色策略一致。

资料来源

www.w3.org · 相关官方规范或文档

展开本页目录

开始前准备什么

独立练习目录及Python 3.14；系统与Node依赖以README为准。
离线重放无需Key；新请求使用自己的apizt Key，先核对模型权限和当前价格。
原创合成材料，不需要登录第三方平台账号。

先看文件
按步骤操作
对照真实结果
离线或模型复跑

下载本例输入、代码、真实回执和产物

默认离线重放；包含完整失败尝试与本地检查，不含Key。

1. 核对本例材料与目标文件

生成并检查浏览器HTML浅色/暗色预览和WCAG对比度；没有发送邮件，也不声称所有邮件客户端暗色策略一致。

先下载合成材料在独立目录练习。原始文件、模型输入与验收答案分别保留；本地核对答案不发送给模型。

input.json（节选）

json

{
  "event": "演示资料更新",
  "date": "2026-11-07",
  "cta": "查看演示资料"
}

2. 按顺序完成这项具体操作

1. 准备合成资料更新事实卡，固定日期和按钮文案。
2. 让模型返回subject、date与cta_label，保留原始响应。
3. 生成浅色与暗色HTML预览，分别计算正文及按钮前景/背景对比度。
4. 在preview.html实际查看两种配色及日期，再核对对比度结果；没有发送邮件，浏览器预览不代表所有邮件客户端兼容。

独立练习目录 · 默认仅离线复核

python3 -m venv .venv
source .venv/bin/activate
python -m pip install -r requirements.txt
python run.py

3. 对照真正发送的请求

输入均为原创虚构演示数据。只输出JSON，subject包含演示资料更新，date保持2026-11-07，cta_label为查看演示资料。

网页实验台只执行这一步模型字段检查。原生文件写入、坐标/公式/格式回读及负例验收由下载包负责。

request-1.json（图片Base64省略，原文件在下载包）

json

{
  "model": "gemini-2.5-flash-lite",
  "messages": [
    {
      "role": "system",
      "content": "严格只输出单个JSON对象，不要Markdown代码围栏，不要解释。输入均为原创虚构演示数据。只输出JSON，subject包含演示资料更新，date保持2026-11-07，cta_label为查看演示资料。"
    },
    {
      "role": "user",
      "content": "任务约束（只输出JSON对象，不用代码围栏）：\n输入均为原创虚构演示数据。只输出JSON，subject包含演示资料更新，date保持2026-11-07，cta_label为查看演示资料。\n待处理合成材料：\n{\"event\": \"演示资料更新\", \"date\": \"2026-11-07\", \"cta\": \"查看演示资料\"}"
    }
  ],
  "temperature": 0,
  "max_tokens": 512,
  "provider": {
    "sort": "success_rate"
  },
  "response_format": {
    "type": "json_object"
  }
}

4. 查看原生处理代码与实际文件

下面节选来自本次实际执行的workflow.py分支，需要结合完整脚本运行。模型输出不能代替文件解析器或业务验算。

具体产物：preview.html、result.json。

workflow.py · 本例分支节选

python

def lum(hex_value):
    parts = [int(hex_value[i:i + 2], 16) / 255 for i in [1, 3, 5]]
    return sum(((v / 12.92 if v <= 0.04045 else ((v + 0.055) / 1.055) ** 2.4) * w for v, w in zip(parts, [0.2126, 0.7152, 0.0722])))

def contrast(a, b):
    a, b = sorted([lum(a), lum(b)])
    return (b + 0.05) / (a + 0.05)
modes = [('浅色', '#ffffff', '#352244', '#503373', '#ffffff'), ('暗色', '#171121', '#f3edf8', '#f5c242', '#291343')]
body = '<div style="display:grid;grid-template-columns:1fr 1fr;gap:22px">'
ratios = []
for name, bg, fg, button, label in modes:
    ratio = {'mode': name, 'body': contrast(bg, fg), 'button': contrast(button, label)}
    ratios.append(ratio)
    body += '<article style="padding:30px;background:' + bg + ';color:' + fg + '"><h2>' + name + '</h2><h3>' + html.escape(output.get('subject', '')) + '</h3><p>' + html.escape(output.get('date', '')) + '</p><a href="https://demo.example/material" style="display:inline-block;padding:14px;background:' + button + ';color:' + label + '">' + html.escape(output.get('cta_label', '')) + '</a></article>'
body += '</div>'
check('两种主题正文和按钮对比度达标', all((x['body'] >= 4.5 and x['button'] >= 4.5 for x in ratios)))
check('模型保留活动日期与按钮文字', output.get('date') == '2026-11-07' and output.get('cta_label') == '查看演示资料')
(folder / 'preview.html').write_text(_shell(case['title'], body))
artifacts.append('preview.html')
result = {'copy': output, 'contrast': ratios, 'scope': 'browser preview; no mail sent'}

5. 对照真实结果和检查表

最后一次返回用量190tokens；1份尝试记录的已知用量合计190。失败记录保留，用量缺失不按0计，本文不推算实际金额。

实际检查	结果
真实apizt API响应HTTP200	通过
两种主题正文和按钮对比度达标	通过
模型保留活动日期与按钮文字	通过

实际检查: 真实apizt API响应HTTP200
结果: 通过

实际检查: 两种主题正文和按钮对比度达标
结果: 通过

实际检查: 模型保留活动日期与按钮文字
结果: 通过

result.json · 原生处理后实际结果

json

{
  "copy": {
    "subject": "演示资料更新",
    "date": "2026-11-07",
    "cta_label": "查看演示资料"
  },
  "contrast": [
    {
      "mode": "浅色",
      "body": 14.347606028729217,
      "button": 10.183367502974239
    },
    {
      "mode": "暗色",
      "body": 16.055260082063235,
      "button": 9.994529801670923
    }
  ],
  "scope": "browser preview; no mail sent"
}

6. 替换输入前，先确认这些边界

生成并检查浏览器HTML浅色/暗色预览和WCAG对比度；没有发送邮件，也不声称所有邮件客户端暗色策略一致。

怎样确认已经完成

真实apizt API响应HTTP200
两种主题正文和按钮对比度达标
模型保留活动日期与按钮文字

常见问题

AI 邮件 HTML 暗色模式怎么开始？

准备合成资料更新事实卡，固定日期和按钮文案。按本页顺序继续，先用下载包离线重放，再替换自己的材料。

网页试跑和下载包有什么区别？

网页只复跑模型字段，不生成全部原生文件；资料包包含实际原生处理和本地验收。

这次通过结果适用于其他材料吗？

生成并检查浏览器HTML浅色/暗色预览和WCAG对比度；没有发送邮件，也不声称所有邮件客户端暗色策略一致。

资料来源

www.w3.org · 相关官方规范或文档

AI 邮件排版：浅色与暗色预览都保留可读按钮

先看结论

开始前准备什么

1. 核对本例材料与目标文件

2. 按顺序完成这项具体操作

3. 对照真正发送的请求

4. 查看原生处理代码与实际文件

5. 对照真实结果和检查表

6. 替换输入前，先确认这些边界

怎样确认已经完成

常见问题

资料来源

先复核这份结果，再处理自己的材料

1. 下载完整样例

2. 离线检查业务结果

3. 需要新结果时，再调用 API

AI 邮件排版：浅色与暗色预览都保留可读按钮

先看结论

开始前准备什么

1. 核对本例材料与目标文件

2. 按顺序完成这项具体操作

3. 对照真正发送的请求

4. 查看原生处理代码与实际文件

5. 对照真实结果和检查表

6. 替换输入前，先确认这些边界

怎样确认已经完成

常见问题

资料来源

先复核这份结果，再处理自己的材料

1. 下载完整样例

2. 离线检查业务结果

3. 需要新结果时，再调用 API