co-infographic-generator 信息图生成

定位

把一段结构化内容（表格、要点、流程、成果数字）变成一张风格统一、中文准确、高大上的 PNG 图片。适用于 KPI 成果看板、并列要点卡片、横向步骤流程、纵向流程大纲、A/B 对比图。

对话里说「把这块做成图」「生成一张图」「配图」「做成图表」「高大上一点」「信息图」「流程图」「看板」「把表格画出来」「去掉 AI 味」等都会触发。

为什么是 HTML/CSS，不是 Mermaid 或文生图

• 文生图模型（如各类扩散模型）渲染中文会糊字、错字，且不可编辑——做信息图不可靠。
• Mermaid 做不出渐变、玻璃拟态、精确网格、序号徽标这类质感。
• HTML/CSS 给你像素级控制 + 100% 准确的中文 + 随时改文字重渲——这是本 skill 的核心选择。

分工提示：精确版式、渐变、中文准确性优先用本 skill；纯数据统计图（柱 / 折 / 饼）才用 ECharts 类工具。

依赖自给自足

渲染靠 puppeteer 截图。首次运行若本机没有 puppeteer，脚本会自动装到 ~/.cache/vft-kit/render（只装 JS 包，秒级）；浏览器则复用机器上已有的 chromium 或系统 Chrome/Edge，不会下载约 110MB 的浏览器。装一次，之后所有项目复用。

工作流

0. 先对齐「配色 + 版式」

信息图的观感八成由配色风格和版式决定，而这两件事很主观。除非你已给明确信号（「暖色调」「做成对比图」「暗黑科技风」），否则 skill 会先用一两句话轻量确认：

• 配色 / 气质：科技青（默认）· 暖金高端 · 靛紫品红 · 翠绿青柠 · 暗黑酷感，或自定义主色。
• 版式倾向：并列卡片 · 指标看板 · 横向流程 · 纵向时间线 · A/B 对比，或组合 / 自定义。

信息够了就直接做，不为走流程而追问。

1. 定版式：模板是「起点」不是「菜单」

assets/templates/ 有 5 个开箱即用布局（改文字就能用）：

真正让多张图「成系列、显专业」的是 references/design-system.md 里那套共享 CSS token 和组件（卡片、序号徽标、标签芯片、对比胶囊、进度条、渐变大数字、线性图标），不是某个具体模板。内容不能干净落进某个模板时，优先用这些组件自由组合新版式。

2. 写 HTML

把版式落到工作目录（建议项目下 charts-output/），替换占位文字。要点：

• 整张图必须包在 id="shot" 容器里（渲染脚本截这个元素）；
• body 字体保留 "Microsoft YaHei","PingFang SC"，否则中文缺字；
• 换主题色改 --accent / --accent2，并把 #shot 背景光晕颜色同步成新主色；
• 图标从 assets/icons.md 取线性 SVG，不要用 emoji；关键词用 <b> 加粗。

3. 渲染成 PNG

node <skill>/scripts/render.mjs <input.html> <output.png> [--scale 3] [--no-install]

• 默认截 #shot 元素、3 倍分辨率高清；
• 图宽由 HTML 里 #shot { width } 决定，没有命令行宽度参数——改宽度就改 HTML 重渲；
• 截图前会自动扫描横向溢出，溢出会打印超出多少 px 及是哪个元素。

4. 自检并交付

用 Read 看一眼生成的 PNG：中文无缺字 / 方块、无错字，风格与同文档其它图一致。把 PNG 路径交给用户，保留 .html 源文件方便改字重渲。

一致性原则

同一份文档 / 汇报里的多张图，沿用同一套配色 + 组件语言（同一个 --accent/--accent2、同样的卡片 / 徽标 / 图标风格）。这样即便每张图版式各不相同，也天然成系列、显专业——统一靠配色 + 组件，不是强行套同一个模板。

相关

• 把页面体检结论做成图 → fe-auto-test