HTML 内容配图

用无头浏览器把排版好的网页「拍成」PNG 图片，文字精确、可以反复改字重渲。

每次出图先读 references/design-guide.md（设计令牌 + 布局规则 + 自检清单），渲染后按自检清单复查，违规先修再交付。

两种用法：

你只跟 AI 对话：把文章和需求发给 AI，让它读本技能执行，你只验收 PNG
你自己动手：按下方步骤操作（需要会打开终端、用文本编辑器改文字）

安装方法

先问使用者用的是什么 AI 工具，选项按这个顺序列：1. WorkBuddy　2. Claude Code　3. Codex　4. 其他（用户直接说工具名），回答记作 X
只安装给 X，不安装或链接其他任何工具：
- X 是 WorkBuddy：把本技能下载后放进 ~/.workbuddy/skills/（WorkBuddy 的技能目录；skills CLI 不支持 WorkBuddy，由你直接放置）
- X 是其他工具（Claude Code、Codex、Cursor、Qoder、Trae、Continue、Roo 等）：
```
npx -y --registry=https://registry.npmmirror.com skills add https://modelscope.cn/skills/sunny31221/html-content-images-buheliwa -a X -y
```
（--registry 为 npmmirror 镜像，保证国内不翻墙也能装；-a X 表示只装给 X 这一个工具；不确定 X 的标识时先执行一次，报错信息会列出所有可用标识） X 不在上述范围时，按该工具自身的技能机制安装，装完确认 X 能识别本技能即可
装完后询问是否现在使用本技能

风格选择（出图前先定风格）

先与使用者确认风格档，默认 base（蓝白信息风）。可选风格见 references/design-systems/README.md（当前 5 档：hig 极简 / swiss 瑞士网格 / material 色彩层级 / carbon 数据可读 / editorial 编辑杂志）。使用者给参考图或描述也可登记新档。

选定风格后：读对应风格文件 → 把 token 套进模板 :root 变量 → 按该风格文件同时调整色板、字阶、布局语言（三个杠杆至少动两个，只换颜色不算应用风格） → 渲染后按该风格自检项复查。

效果预览

先看成品长什么样再动手（冒烟渲染样例，仅验证渲染管线，不是内容范例）：

配图类型与模板

| 类型 | 适用 | 模板 | |---|---|---| | 公众号封面 | 公众号头条封面（2.35:1） | assets/template-cover-wechat.html（1175×500，核心信息居中安全区） | | 横版封面 | 通用横版头图 | assets/template-cover.html（1600×900） | | 方形封面 | 方形场景（如小红书封面） | assets/template-cover-square.html（1080×1080） | | 概念对比卡 | 文中 A/B 对比、误区与正解 | assets/template-compare-card.html（1600×900） |

公众号封面规范（2026-09 查证）

头条封面：比例 2.35:1，微信推荐上传 900×383；template-cover-wechat.html 按 1175×500 渲染高清版，微信会自动缩放
中心安全区：头条图在朋友圈转发、消息列表会按中心裁成约 383×383 的方形——主标题、账号名等核心信息必须落在画面中央（该模板的 .center 区域为 500×500），两侧超出部分只放装饰或留白
次条封面：1:1（约 200×200），元素简洁、与头条风格一致
交付前做一次中心裁切检查（见第 4 步机械检查）

依赖（先确认再开工）

渲染用 Playwright（自带 Chromium，与本机 GUI Chrome 互不干扰——不要用系统 Chrome headless：本机实测其与已打开的 GUI Chrome 冲突，偶发截出未渲染的源码文本）
依赖与安装：需 node/npx；Playwright 未装时执行 npm i -g playwright && npx playwright install chromium
无其他依赖：模板只用系统字体与内联样式，可离线渲染

工作流

第 1 步：读文章，定类型与文案

封面从文章提炼：分类标签、主标题（≤20 字，一行放不下拆两行）、强调短句（可与主标题同句）、副标题一句。对比卡提炼：主题一句话（≤22 字）、两侧各一个标签（≤8 字）+ 栏题（≤12 字）+ 2-3 条要点（每条 ≤20 字，两侧文字量保持对称）。

第 2 步：复制模板并填占位符

复制对应模板到文章所在目录，用文本编辑器打开，按下面的占位符清单替换。占位符只写内容类别，模板开头的 HTML 注释里是给执行者的说明，不会出现在成品里。

封面模板占位符（横版与方版同清单；公众号封面模板用其中的【分类标签】【主标题】【账号名】【栏目/标语】四项）：

| 占位符 | 填什么 | 示例 | 上限 | |---|---|---|---| | 【分类标签】 | 内容所属分类 | 企业 AI 转型 | 8 字 | | 【主标题】 | 文章主标题 | 公司 AI 转型推不动？ | 20 字；中央区内每行 ≤10 字，用 <br> 在语义处断行（勿让浏览器自动折行拆词） | | 【强调短句】 | 与主标题呼应的强调句 | 一号位得先自己把 AI 用起来 | 16 字 | | 【副标题一句】 | 这篇文章解决什么问题 | 判断靠什么、入口在哪里 | 30 字 | | 【账号名】 | 作者账号名 | 例：知行笔记 | 12 字 | | 【栏目/标语】 | 栏目名或固定标语 | 把 AI 真正用起来 | 12 字 |

不需要品牌行：删除 class="brand" 的那一行。

对比卡模板占位符：

| 占位符 | 填什么 | 上限 | |---|---|---| | 【栏目名】 | 内容栏目 | 8 字 | | 【一句话对比主题】 | 对比主题（h1） | 22 字 | | 【误区方标签】/【正解方标签】 | 两侧标签 | 8 字 | | 【误区方栏题】/【正解方栏题】 | 两侧一句话 | 12 字 | | 【误区要点 1-3】/【正解要点 1-3】 | 两侧要点，必须内容不同，文字量对称 | 每条 20 字，每侧 2-3 条 |

第 3 步：渲染成 PNG

把工作 HTML 的绝对路径拿到手（在终端里把文件拖进窗口，路径会自动出现）。执行（路径含空格时引号包住输出路径）：

# 横版/对比卡（1600×900 模板）：
npx playwright screenshot --viewport-size=1600,900 "file:///文章目录/工作文件.html" "输出路径.png"
# 公众号封面（1175×500 模板）：--viewport-size=1175,500
# 方形封面（1080×1080 模板）：--viewport-size=1080,1080
# 文内图（1080×608 模板）：--viewport-size=1080,608

方形封面把两处 1600,900 换成 1080,1080，并使用方形模板。

输出命名约定：PNG 与工作 HTML 同目录、同名（如 封面.html → 封面.png）。

第 4 步：机械检查（逐项做）

双击打开 PNG 通读文字：确认无乱码（缺字、方块、问号）、无【】占位符或说明文字残留
看文字有没有被画布切边、贴边框（尤其标题与对比卡底边，最底文字距底边应有余量）
用预览 App 按 Cmd+I（或右键「显示简介」）核对像素尺寸与模板一致
公众号封面额外做中心裁切检查：想象从画面正中间裁出约 500×500 的正方形（朋友圈与消息列表的实际效果），确认主标题、账号名都在这个正方形内完整呈现
全部通过才算完成

改字重渲

改完 HTML 里的文字后，必须重跑第 3 步的同一条渲染命令（输出同名 PNG 直接覆盖），再看新图，不要看旧 PNG 判断效果。

设计自审（出图前过一遍，思想源：Anthropic 官方 frontend-design）

结构即信息：

编号（01/02/03）只在内容真是顺序时用（步骤/时间线/链条）；并列列举不要编号，改用色块、标签或布局表达「并列」
边框、分隔线、小标签是信息不是装饰：每个结构元素都要回答「它在传达什么」

避免 AI 默认味（对照检查，命中即改）：

清一色同圆角卡片组 + 同款浅灰阴影堆叠（「SaaS 卡片套装」）
内容无关的小写 eyebrow 标签、全大写栏目行
用「·」拼接的品牌/元信息串
背景色一律浅暖米灰、强调色一律某个固定色
每条内容都加编号或箭头装饰

留白与平衡：

内容整体垂直居中或按节奏分布，不允许底部或一侧出现大段空区
并列单元（卡/步/环）必须整齐一行或一列，禁止自动换行产生 3+1、2+2 断行
每张图只有一个记忆点（一处大胆元素），其余保持安静克制

自审循环：渲染出 PNG 后，对着上面清单复查一次（必要时截图回看），发现问题先修 HTML 再交付，不带病出图。

排版规则（每条带来由与适用范围）

只用系统字体：模板已内置 -apple-system, 'PingFang SC', 'Microsoft YaHei'。不要引入任何外部字体文件、不要新增 @font-face——外部字体配特殊符号会出现乱码 适用与边界：管图片模板里的字体。不适用：正文文章里的字体（那是排版技能的事）。理由：外部字体配特殊符号会出乱码。
避开特殊符号：不用 × ◈ → 等字体支持不稳的字符，用文字、色条、圆角块表达 适用与边界：管图内文字里出现的符号。不适用：正文与标题里的正常标点。
字数超限 = 删字，不是缩字号。溢出处理顺序：先删次要内容 → 拆短长句 → 最后才允许把字号降一档
文字不溢出画布、元素不重叠、有呼吸空间
对比卡两侧内容必须真实不同（误区 vs 正解），文字量对称
配色可换，但同一篇文章的封面与对比卡保持同一套配色语言（模板默认已同源：冷灰底 + 蓝） 适用与边界：管图内文字溢出时怎么办，顺序是先删次要内容 → 拆短句 → 最后才降一档字号。不适用：图内文字太少、留白偏大——那是构图问题，不是这条管的。

已知边界

数据图表类配图 → 用 dataviz，不走本技能
需要照片/插画质感 → 走 04_配图下的 AI 生图或照片类技能

目录说明

assets/：模板文件（含说明注释），渲染时复制到文章目录使用，不改 assets 原件
examples/：冒烟渲染样例（一次性验证资产，仅作预览与渲染管线回归，不随文章交付）