前言¶
把一篇文章、笔记或选题变成可直接发布的社交配图，常见的做法是开一个设计工具逐张手排，或者把文案丢给 AI 生图再慢慢改提示词。前者费时间，后者对中文排版、长文拆条和系列图风格统一很难控制。下面介绍的 Skill「社交平台配图生成」（@user_8170ea13/html-to-png-image-cards）走的是另一条路：用你熟悉的 HTML/CSS 写排版，再由本地 headless Chrome 直接截图输出竖版图片卡。中文字体由系统渲染，不依赖联网生图服务。
这是什么¶
这是一个 community 来源的 Skill，发布者 user_8170ea13，当前版本 2.13.1，分类 design-media。它解决的问题是：把结构化内容（文章、笔记、AI 生图结果、对比信息）快速变成小红书、公众号、视频号、B站等平台可用的图片卡，并且在改文案后能批量重渲、保持系列风格一致。
核心功能¶
按官方资料，已核实的能力包括：
- 渲染方式：HTML/CSS 排版 + 本地 headless Chrome 截图，输出竖版图片卡。纯本地运行，不需要 API Key，也不联网。
- 中文支持：由 PingFang SC 等系统字体直接渲染，零乱码，不依赖外部字体服务。
- 发布前质检：自带质检脚本，检查文字被裁、字号过小、对比度不足三类常见问题。
- 模板体系：内置 14 套模板，覆盖通用、封面、内容、横版封面变体；个别风格按定位缺少对应变体时自动回退。
- 风格预览选择器：可以预览不同风格后再定稿。
- 系列图产出：支持整篇文章自动拆条，一次出整套系列图。
- 平台预设：内置 B站、知乎、X、抖音的预设，对应不同平台的图面比例和排版习惯。
别称有社交配图生成器、长图工具、HTML 转图片、封面图制作，指向的都是同一件事。
安装与启用¶
本次抓取的官方页面（skillhub.cn 与 api.skillhub.cn 两个地址）均无法打开，资料中没有给出可核实的安装命令和配置字段，这里不照搬任何第三方写法。建议直接打开官方地址确认安装方式：
https://api.skillhub.cn/user_8170ea13/html-to-png-image-cards
资料中明确标注 requires_api_key=false，即不需要 API Key，这也和「纯本地运行、不联网」的定位一致。安装后的使用入口是 Skill 坐标 @user_8170ea13/html-to-png-image-cards。
典型用法¶
官方资料没有给出逐条命令级示例，以下用法来自其定位描述，具体参数以官方页面为准。
- 把文章或笔记内容按模板写成 HTML/CSS，指定目标平台预设（如小红书 3:4 轮播、视频号 9:16 封面）。
- 本地 headless Chrome 渲染截图，输出竖版图片卡；系列内容由整篇文章自动拆条生成。
- 发布前跑质检脚本，确认文字没有被裁、字号没有过小、对比度达标。
- 改文案后重新渲染，系列图风格保持一致。
适合把 AI 生图或绘图结果连同提示词做成实测卡、前后对比图、模型参数速度表这类需要「图 + 文 + 结构化数据」一起呈现的场景。
适用场景与注意¶
适合的场景：文章、笔记、选题转社交配图；小红书 3:4 轮播、公众号贴图、视频号 9:16 封面；信息图、对比图、长图；AI 生图结果的实测卡和前后对比图；批量重渲和统一系列风格。
不适用的场景：纯插画、艺术写真、人物摄影、复杂场景渲染。这类需求应改用 AI 生图，本 Skill 不承担画面生成职责。
另外，该 Skill 面向的是排版到截图的管线，前提是内容能表达为 HTML/CSS 结构。内容本身仍需自己撰写和校对，Skill 不负责文案质量。
结尾¶
这个 Skill 的价值在于把「排版 → 截图 → 质检 → 重渲」压成一条本地管线，省掉逐张手排和反复截图的体力活，同时用系统字体解决中文乱码。官方地址：https://api.skillhub.cn/user_8170ea13/html-to-png-image-cards。
