活动天气专报长图生成

概述

为指定活动（高尔夫比赛、户外赛事、团建等）产出一份手机竖屏友好的天气专报长图（750px PNG + 响应式 HTML）。流程固定为六步：确认活动信息 → 查询官方数据 → 分析评估 → 填模板 → 渲染质检 → 交付。

工作流程

1. 确认活动信息

收集四项信息，缺失时向用户确认或做合理假设并注明：

• 活动名称 / 类型（决定建议清单内容：高尔夫、跑步、露营等）
• 重点日期（如比赛日）与评估窗口（通常为活动前 5-7 天到活动日）
• 地点 / 球场（写进 hero 与场地提示）
• 受众（参赛者 / 组委会 / 家属，决定建议清单口吻）

2. 查询官方气象数据

按 references/data-sources.md 执行，要点：

• 中国天气网取 7 天 + 15 天预报（15 天页覆盖 8-15 天远期）
• 台风/暴雨/高温预警用 WebSearch + 中央气象台台风网交叉验证
• 当地市级气象台的官方解读（通过本地新闻媒体稿获取）优先级最高
• 强对流、台风等必须由 ≥2 个来源印证

3. 分析评估

按 references/data-sources.md 末尾的分析框架输出：

• 全程"三段式"划分（如前晴窗口 → 影响核心期 → 收尾期）
• 重点日五维评估：天气现象、雨量量级（分级表估算）、气温、风力、可信度
• 8 天以上远期预报必须标注"可信度中等偏低，以临近递进式预警为准"
• 次生风险提示（地质灾害、雷电、高温中暑等，结合前期降雨/土壤/场地类型）

4. 生成长图 HTML

复制 assets/poster-template.html 到工作目录（以活动命名，如 xxx-weather.html），替换全部 {{占位符}}：

• 逐日卡片：以模板中两类示例行（普通行 / 重点日高亮行 day match + b-gold）为样板复制增删
• 建议清单：模板默认高尔夫内容，按活动类型整体替换四个卡片
• 场地提示条：结合场地特征（山地球场、海边、公园草坪等）写 1-2 条具体提醒
• 配色：默认高尔夫深绿主题；换主题只需改 CSS 中的 #0F3D22/#14532D/#166534 三处主色与强调色 #C9A227
• footer 必须保留数据来源与"以递进式预警为准"声明

5. 渲染与质检

使用 agent-browser（先加载该技能）。每条 agent-browser 命令单独调用，禁止 && 串联：

cd <工作目录>
agent-browser open "file:///<绝对路径>.html"
agent-browser set viewport 750 1000
agent-browser screenshot --full <活动名>.png        # 相对路径保存
agent-browser set viewport 390 844
agent-browser screenshot --full <活动名>-mobile-qa.png
agent-browser close

Read 两张图质检：无文字溢出、无截断、占位符无遗漏、窄屏无横向滚动。发现问题改 HTML 重截。

6. 交付

present_files 依次给出：750px PNG（分享版）、390px QA 图（手机效果验证）、HTML 源文件（可改字复用）。 提醒用户：远期预报时效性，关键节点（如台风进南海）后可回来更新数据重出图——改 HTML 重截即可，不用重做分析。

手机竖屏规则（不可省略）

• 750px 画布上正文 ≥22px、标题 ≥28px、主标题 40-52px（手机上缩放观看等效减半）
• 布局单列为主；指标块用 grid auto-fit,minmax(280px,1fr)；禁止 750px 内挤多列
• 必须含 @media(max-width:620px) 窄屏适配与

Windows 已知坑

• screenshot 保存路径用相对路径（先 cd），绝对路径会报 Cannot find module 'c:c...'
• 多条 agent-browser 命令用 && 串联会间歇性报 shim 路径错误（C:c... / cygpath），逐条单跑；某条失败时单独重试即可
• 输出 PNG 为 1x 分辨率；需高清可把模板整体等比放大到 1125px 宽再截

相关技能

• long-image-poster：通用中文长图生成流程（本技能的渲染部分与其一致，天气专报场景优先用本技能）
• agent-browser：浏览器渲染与截图