周报助手
将任意工作内容提炼为一张 4:3 极简科技风汇报卡片。
核心理念
- 一张图解决问题 — 不分页，不翻页，截图即用
- 内容极度精炼 — 每条要点 ≤15 字，最多 6 条
- 视觉层次清晰 — 标题 > 要点 > 标注，三层结构
- 深色科技风 — 黑底 + 蓝/紫光斑 + 白字
生成流程
Step 1: 提炼内容
- 读取原始内容
- 提取核心要点（≤6 条）
- 生成一个冲击力标题（≤12字）
- 生成一句副标题/日期标注
Step 2: 生成 HTML 卡片
- 比例严格 4:3（宽1200px × 高900px）
- 单屏，无滚动，无翻页
- 包含动态光斑背景动画
- 使用 Tailwind CDN + Google Fonts（国内镜像）
Step 3: 截图输出
生成 HTML 后，使用以下命令截图为 PNG：
# 使用 puppeteer-screenshot 或 chromium headless
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
--headless --screenshot=output.png \
--window-size=1200,900 \
--disable-gpu \
file:///path/to/card.html
若截图命令不可用，直接告知用户打开 HTML 文件并截图。
图片处理规则（有图时必须严格遵守）
- 必须放入 — 用户发了图片，100% 要排进卡片，不能忽略
- 禁止裁切/遮挡 — 图片必须完整显示，使用
object-fit: contain+ 等比缩放，绝对不用cover或clip - 先算图再排版 — 计算图片数量和宽高比，确定图片区域大小，再安排文字布局（图片优先，文字自适应剩余空间）
- 多图时 — 纵向排列，每张图保持完整，不重叠
视觉规范
| 项目 | 规范 |
|---|---|
| 比例 | 4:3（1200×900px） |
| 背景 | #000 + 模糊光斑（蓝/紫/青） |
| 主标题 | 白色，font-black，4~5rem（宁大勿小） |
| 要点文字 | rgba(255,255,255,0.85)，font-normal，1.05~1.2rem |
| 标注文字 | rgba(255,255,255,0.35)，font-light |
| 强调色 | #60a5fa（蓝）/ #a78bfa（紫）/ #34d399（绿） |
| 字体 | Noto Sans SC + Inter |
卡片结构模板
无图版：
┌─────────────────────────────────────────────┐
│ [日期标注] [标识] │
│ │
│ 主标题（大，白，4~5rem，bold） │
│ 副标题 │
│ ───────────────────────────────────────── │
│ • 要点一（1.1rem） │
│ • 要点二 │
│ • 要点三 │
│ [底部标注] │
└─────────────────────────────────────────────┘
有图版（左文右图 或 上文下图，根据图片数量决定）：
┌──────────────────────┬──────────────────────┐
│ 主标题（3.5rem+） │ [图片1 完整显示] │
│ 副标题 │ │
│ ─────────────────── │ [图片2 完整显示] │
│ • 要点一 │ │
│ • 要点二 │ 图片说明 │
│ [底部标注] │ │
└──────────────────────┴──────────────────────┘
严禁行为
- 多页/翻页结构
- 超过 8 个要点
- 密集小字（要点字号 < 1rem）
- 图片裁切、object-fit:cover、overflow:hidden 遮挡图片
- 横向表格
- 复杂图表
输出
- 保存为
~/.openclaw/workspace/card-YYYYMMDD.html - 尝试用 Chrome headless 截图为 PNG
- 发送卡片图片给用户