skill存档

报告长图渲染（PB Arena 同款版式）

把一篇已成稿的 md（复盘、尽调、更新报告、教程）渲染成一张可直接转发的长图 PNG。版式来自 PB Arena 的「简洁低疲劳 V2」视觉规范，产线是 HTML 母版 + headless Chrome 两趟截图。

边界：本 skill 只管「已有内容 → 出图」。内容本身怎么写不归它管（尽调类内容见 opportunity-due-diligence，对外帖体例见 insight-public-post）。

资产

文件	用途
`E:\knowledge-base\07_skill存档\report-longimage\母版.html`	组件画廊：每种块各一个带占位文案的示例，复制需要的块
`E:\knowledge-base\07_skill存档\report-longimage\render.sh`	两趟截图脚本，`bash render.sh in.html out.png`
`E:\knowledge-base\08_对外分发\海外短剧剪辑拉新副业能不能做_尽调笔记.html`	真实成品样例（2240×10754），当参考比母版更直观
`E:\pb-arena\docs\更新报告_2026-07-30_*.png`	版式源头，拿不准时回看这张

第 1 步：套母版

复制 母版.html 到 scratchpad，改内容。版式骨架顺序固定，不要重排：

眉标(珊瑚红字距)  →  大字标题(1-2行)  →  mono 元信息行(日期/署名/域名)
  →  细线  →  导语(交代对象 + 一句话结论,加粗收尾)
  →  四格指标栏  →  01/02/03… 编号章节  →  页脚(圆形mark + 署名 + 胶囊徽章 + 来源行)

硬规则

珊瑚红 #ff5a52 全页占比 5%–8%。它只出现在：眉标、章节编号、列表圆点、.hl 红字、callout 竖线、红线框。.hl 全页最多 5–8 处，.redline 整篇最多一次——出现两次就都不重了。
不加渐变、光晕、厚阴影、玻璃拟态。层级只靠字重、对齐、留白、细分隔线（#e6e5e1）建立。
指标栏固定四格，全页只出现一次，紧跟导语。每格 = 小标签 + 大数值 + 小注解；最多 1–2 格标红（.m-value.accent），全标等于没标。注解那行放对照值（「同类行价 $0.22」「已按乐观口径」）——一个数字配一个参照才有信息量。
署名固定「跳蛛先生」（跳蛛 = Salticidae，不是「跳猪」）。
称谓：稿子若是直接转发给当事人读的，正文一律第二人称，不要出现「学员/同学/他」把读者写成第三方。

组件选用

想表达	用
一句话结论、值得被单独记住的判断	`.quote`
补充说明，不至于上红框	`.callout`
全篇最重的一条戒律	`.redline`（限一次）
层级 / 转包 / 流程，且要指出「你在哪一格」	`.chain` + `<em>` 标红末端
两种口径对照（宣传 vs 免责、修复前 vs 修复后）	`.grid2` + `.box`
逐项核查、带判定列	`<table>` + `td.y`（绿色判定）
分项测算、要有合计	`<table class="t-narrow">` + `tr.total`
必问清单、编号步骤	`<ol class="qs">`（序号自动补零成 01/02）

第 2 步：出图

bash "E:/knowledge-base/07_skill存档/report-longimage/render.sh" <in.html> <out.png>

默认逻辑宽度 1120、缩放 2 倍 → 成图 2240 宽，与 PB Arena 既有报告图一致。

脚本做的事就是两趟：第一趟 --dump-dom 读页面自报的 scrollHeight，第二趟按精确高度 --window-size 截图。

第 3 步：验收（不许跳过）

渲染完必须裁头 / 中 / 尾三段放大回看，不能只看整图缩略图：

python -c "from PIL import Image;im=Image.open(r'out.png');print(im.size);im.crop((0,0,im.size[0],1300)).save('_c1.png');im.crop((0,im.size[1]-900,im.size[0],im.size[1])).save('_c2.png')"

缩略图看不出的东西，裁图一眼就能看见：中文字体回退成宋体、页脚漏改的旧文案、指标栏数值溢出。2026-07-31 那次，署名写错和 CJK 掉宋体两个问题都是靠裁图才发现的，整图缩略图上完全看不出来。

三个已知坑

1 · 一趟截图只截视口，长内容被直接切掉

Chrome 的 --screenshot 截的是 --window-size 那么大的区域，不会自动截全页。所以必须两趟。母版末尾那行 document.title = "H" + scrollHeight 是第一趟的读数口，删了脚本就跑不了。

比「先截一张超高图再裁」干净——猜高度要么切内容要么留一大片空白。

2 · `--mono` 以 generic `monospace` 收尾，中文全掉进宋体

monospace 是通配的 generic family，会匹配一切，排在它后面的字体永远不生效。所以 CJK 字体必须排在 monospace 之前：

--mono:"DM Mono", Consolas, "Cascadia Mono", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", monospace;

否则眉标、元信息行的署名、指标栏里的中文数值（「字节系」「0 元」）会全部渲染成宋体，跟整套无衬线体系打架。拉丁字符仍走 Consolas，不受影响。

同族见 09_平台工程/导出运行时无系统字体回退律_CJK豆腐块_v1.md——都是「把兜底固化进产物」。

3 · `set -e` 下用 `&&` 链找文件会静默退出

render.sh 里定位 Chrome 的循环，写成 [ -f "$p" ] && CHROME="$p" && break 时：第一个候选路径不存在 → 循环体最后一条命令返回非 0 → set -e 直接终止脚本，且不打印任何错误。必须写成 if [ -f "$p" ]; then …; fi。

第 4 步：归档

PNG 与 md 同目录同名（xxx.md / xxx.png），HTML 源码一并留下（xxx.html）——下次改文案重渲染比从母版重搭快得多；
按知识库 CLAUDE.md 惯例 commit 并 push。

关联

opportunity-due-diligence —— 尽调类内容的写法，写完交给本 skill 出图
insight-public-post —— 对外帖体例；那条链路的产物同样可以过本 skill
aigc-poster-layout —— 区别：那个是作品/角色宣传海报（图为主），本 skill 是文档型报告长图（字为主）
09_平台工程/美工改稿全站落地_跨稿重复才是规范_v1.md —— 视觉规范与两趟截图法的出处