Keep 运动数据信息图生成技能

概述

接收用户上传的 Keep 运动截图，通过 OCR 提取结构化运动数据，渲染 9 套独立 HTML 模板（固定 1080×1440 竖屏），用 Playwright 截图输出 9 张信息图。全部视觉元素由 CSS 实现，禁止 AI 绘图与外部图片资源。

硬性约束（全程不可违反）

画布规格：9 套模板统一 width:1080px; height:1440px; overflow:hidden; 3:4 竖屏，禁止拉伸变形。
禁止元素：Keep 官方 logo 水印、抖音封面标题文字、任何平台水印、短视频文案标题、话题标签。
用户名标识：OCR 识别截图内昵称。识别成功 → 渲染在画布右上角作为自定义标识替代品牌 logo；识别失败 → 该 DOM 节点彻底移除，不保留空白占位区域。
数据条件渲染：心率等字段缺失时，对应数据区块 DOM 彻底删除，不允许出现空白框、占位符或 {{变量}} 模板字符串。
技术要求：每套模板独立 HTML 文件，全部使用 CSS 实现图标、线条、渐变、装饰效果；禁止引入外部图片、外部字体资源；所有元素内置在 HTML 内。
强制自检：9 套 HTML 全部渲染完成、截图生成后必须执行完整自检（见步骤 5），自检不通过则重新渲染，不交付结果。
输出产物：9 张信息图截图 + 结构化原始运动数据 JSON + 每套模板的简短说明。

工作流程

步骤 1：接收输入

接收用户上传的 Keep 运动数据截图（一张或多张）。若图片模糊、被遮挡或非 Keep 截图，提示用户重新上传清晰截图或手动输入运动数据。

步骤 2：OCR 解析与数据确认

调用图像识别能力解析截图，提取以下字段并输出为 JSON：

{
  "user_name": "识别到的用户昵称，识别失败为空字符串",
  "sport_type": "运动类型，如跑步/快走/骑行",
  "distance": "距离，例：5.2km",
  "duration": "运动时长，例：32分15秒",
  "calorie": "消耗卡路里，例：345kcal",
  "pace": "配速，例：6分12秒/km",
  "date": "运动日期，例：2026-08-22",
  "heart_rate": "心率，无则为空字符串"
}

解析完成后必须执行：把提取出来的 JSON 数据以表格或卡片形式展示给用户，允许用户手动修改、校正识别错误。用户确认数据无误后才能进入下一步。禁止跳过用户确认环节直接渲染。

步骤 3：渲染 9 套独立 HTML 模板

9 套模板的详细设计规范见 references/templates.md。每套单独完整 HTML 文件，根容器固定 width:1080px; height:1440px; overflow:hidden;。

模板清单（固定 9 套，配色版式区分明显）：

| # | 模板名 | 风格关键词 | |---|---|---| | 1 | 极简数据风 | 白底浅灰、简约线条、卡片留白 | | 2 | 热血运动风 | 黑底橙红、CSS 跑道线条、力量感 | | 3 | 治愈氛围感 | 莫兰迪渐变、柔和圆角、松弛感 | | 4 | 复古胶片风 | 暖黄复古、CSS 颗粒暗角、胶片边框 | | 5 | 赛博数据卡片 | 深蓝青蓝霓虹、CSS 网格、仪表盘 UI | | 6 | 简约清单打卡风 | 打卡记录表、CSS 勾选标记、坚持感 | | 7 | 极简 ins 卡片 | 白底圆角、简易 CSS 图标、大留白 | | 8 | 深色运动日志 | 纯黑背景、CSS 月亮图标、夜跑场景 | | 9 | 励志短句版 | 数据区 + 励志短句区、运动金句 |

每份 HTML 内部必须包含的条件渲染 JS：

<script>
  const DATA = { /* 注入步骤2确认后的JSON */ };
  // 字段为空则移除对应 DOM 节点
  document.querySelectorAll('[data-field]').forEach(el => {
    const key = el.dataset.field;
    if (!DATA[key] || DATA[key] === '') el.remove();
    else el.textContent = DATA[key];
  });
  // 用户名为空时移除右上角标识
  if (!DATA.user_name) document.querySelector('.user-badge')?.remove();
</script>

步骤 4：页面截图

使用 scripts/screenshot.js（Playwright 脚本）对 9 份 HTML 分别执行截图，生成 9 张 1080×1440 PNG 图片。

执行命令示例：

node scripts/screenshot.js ./templates ./output

脚本规范见 scripts/screenshot.js 文件头部注释。如环境中无 Playwright，先用 npm i -D playwright 安装并执行 npx playwright install chromium。

步骤 5：强制自检校验

9 张截图全部生成后，必须逐条执行以下自检。任一项不通过，回到步骤 3 重新生成对应模板 HTML，直到全部通过才允许交付。完整自检规则见 references/self_check.md。

排版校验：画布尺寸 1080×1440 / 文字不溢出 / 缺失字段区块完全隐藏 / 用户名标识无空白残留 / 文字层级清晰。

显示校验：文字背景对比度足够 / CSS 装饰渲染完整 / 9 套版式配色区分明显 / 无 Keep logo 与水印。

逻辑校验：无 {{xxx}} 占位文本 / 时间配速距离格式正确 / 截图完整无截断黑边错位。

步骤 6：最终交付

向用户交付：

9 张信息图图片（PNG，1080×1440）
结构化原始运动数据 JSON（步骤 2 确认后的版本）
9 套模板的简短说明（每套一句话风格描述）

异常处理

OCR 识别失败：提示用户重新上传清晰截图，或直接手动输入运动数据 JSON。
HTML 渲染异常：重新生成对应模板 HTML，最多重试 3 次；仍失败则跳过该模板并明确告知用户。
Playwright 截图失败：检查 Chromium 是否安装，执行 npx playwright install chromium。
截图数据残缺：缺失字段自动隐藏对应区块，不报错、不留空白。

边界规则

禁止使用 AI 绘图（ImageGen 等）生成海报，全部 HTML 渲染后截图。
用户可后续指定只生成部分模板（如"只要模板 2 和模板 5"），默认全部 9 套。
不输出抖音文案、标题、话题标签，只输出纯信息图。
缺失字段自动隐藏，不报错。

资源文件

references/templates.md — 9 套模板的详细设计规范（配色、版式、装饰元素、字体层级）
references/self_check.md — 自检规则详解（排版/显示/逻辑三类校验项）
scripts/screenshot.js — Playwright 批量截图脚本