# 把知识点做成图：一套可复用的信息图生产流程

副标题：技能 infographic-poster 的说明文档与示例

## 为什么不用 AI 生图

AI 生图做含中文和数字的图，问题不在审美，而在文字控制：中文会缺笔画、数字会多一横、标签会串行。反复重试只能碰运气。

正确做法是**用 HTML 写版式，用无头浏览器渲染成 PNG**。文字一字不差，位置精确到像素，改一个数字重新渲染就行，而且一张图的版式会成为下一张图的起点。

## 四步流程

1. **数据表格化。** 把要上图的每个数值写成一行：颜色、所属分组、柱子数值、X 轴标签。后面所有元素都从同一行数据生成，这是杜绝「柱子与标签串行」的根本。
2. **选版式。** 分类对比用分组柱状；阶层递进用分层；归因拆解用多列推力；认知转变用左右对照；单一结论用大数字。
3. **写 HTML 并渲染。** 以模板为起点，跑 `render.py` 得到 4K 与 1080p 两版。
4. **目检。** 看渲染图逐项确认：文字无乱码、数值与标签对应、比例与数据一致、无重叠裁切。不通过就改 HTML 重渲染。

## 视觉规范（冷眼商业风）

- 画布 1920×1080，外边距 64px；字体 Noto Sans CJK SC
- 墨色 `#15181C`，辅助 `#74797F`，分割线 1px `#E2E5E8`
- 强调色只有一个：`#C0462A`，用在主角与结论上
- 字号阶梯：主标题 48–58、副标题 22–27、正文 17–23、大数字 44–48、结论 29–30
- 禁止：背景网格线、坐标轴刻度数字、大圆角卡片、阴影、渐变

## 版式选择

| 内容形态 | 版式 | 关键点 |
|---|---|---|
| 多品类对比数值 | 分组柱状图 | 同层品类必须聚成一组，否则序列会「中间最高」 |
| 阶层/漏斗/金字塔 | 分层 + 组间留白 | 层名单独成行，不要塞进 X 轴标签 |
| 归因/机制拆解 | 多列推力 | 每列：序号 + 标题 + 2-3 行说明 + 一个大数字 |
| 认知转变 | 左右对照 + 箭头 | 旧状态用灰，新状态用黑加粗 |
| 单一结论 | 大数字 + 一句解释 | 数字 120px 以上，其余留白 |

## 站点发布

图做完之后，用 `build_site.py` 把图片和报告打包成带下载按钮的页面，再用 `publish.py` 推到 Cloudflare Pages。约定很简单：工作目录下成对的 `X-4k.png` 与 `X-1080.png` 会被自动识别为一张图。

## 已知坑

- chromium 必须加 `--disable-dev-shm-usage`，容器里常缺 `/dev/shm`
- headless 的视口高度比 `--window-size` 少约 100px，要用 1200 的高度渲染再裁到 1080
- 个位数百分比在 150% 量程里只有 10px 高，这是数据真实，不要为了好看抬高
- 区间值与下限值同轴时，柱顶要用虚线标出「这是下限」，并在注脚写明
- 结论里做除法要穷举所有配对，取真实区间，别只挑最好看的那一对

## 怎么调用

技能目录：`~/.aicode/skills/infographic-poster/`

- `assets/template.html` — 版式骨架
- `scripts/render.py` — HTML → 4K / 1080p PNG
- `scripts/build_site.py` — 图片画廊 + 报告页
- `scripts/publish.py` — 发布到 Cloudflare Pages

新会话中直接说「把这份内容做成一张信息图」即会命中该技能。