结构化信息图生成

要解决什么问题

文章、推文或长文分享进微信群、Telegram、Twitter 时，纯文字很难扫读；读者往往需要的是一张可滑动的竖版信息图：有标题层级、要点分块和出处，而不是把全文塞进一张海报里。

本技能面向「把已有素材做成可分享图片」这一具体场景：输入结构化或半结构化正文，输出移动端清晰的 PNG，而不是依赖在线设计工具手搓版面。

技能如何工作

整体流程是 提炼内容 → 单文件 HTML 排版 → Playwright 高倍率截图 → 按平台交付。

1. 提炼与分块：从原文抽出双语标题（如适用）、核心论点（1～2 句 callout）、3～7 个主章节（每节标题 + 1～3 条短要点）、底部 takeaway，以及作者/平台/URL 来源信息。原则是可扫读不可精读——单节超过三行短句就应拆分。
2. HTML 设计：生成无外部依赖的单页 HTML，宽度固定 750px（3x 截图约 2250px 物理宽），高度随内容伸缩；背景为 #faf6f0 或 #fff，CSS 全部内联，中文字体栈含 PingFang SC / Noto Sans SC。版式通常包含：页眉（badge + 标题）、黄色 callout、带色标圆点的编号卡片、深色 takeaway 区、页脚署名；具体色板与组件见技能包内 design-system.md。
3. 截图：用捆绑脚本以 deviceScaleFactor=3 渲染，避免 npx playwright screenshot CLI 的 1x 模糊图。
4. 交付：Telegram 走 sendPhoto 会压到最长边 2048px，需要无损原图时用 sendDocument；其它平台按是否压缩选择文件消息。

适用边界与注意点

• 依赖环境：需要 Node.js 与 Playwright Chromium；Telegram 无损投递需 OpenClaw 配置中的 bot token。
• 内容形态：更适合观点型、章节型长文；数据极密时可改用 2×2 网格或 CSS 条形图，对比型可在 takeaway 用并排深色卡片；章节超过 7 个建议拆成两张图或更紧凑卡片。
• 语言：默认中英混排布局；纯英文可调整字体栈（含 serif）；不要指望一张图承载全文细节。