前言¶
做内容、写文档、出原型的时候,经常已经写好了一版 HTML 排版,却还要再想办法把它变成一张图。常规路径是打开浏览器手动截图,或者把 HTML 塞进无头浏览器再写脚本保存。前者不可控,后者每次要重跑一遍。create-image-by-html 这个 Skill 把这步收敛成一句自然语言:你说“画一张图”,它把已有的 HTML 渲染成 PNG 输出。
这是什么¶
create-image-by-html 是 SkillHub 上的社区 Skill,坐标 @user_a970e076/create-image-by-html,由 user_a970e076 发布维护,版本 1.0.0,分类 design-media。定位是:当用户提出画图类需求时,把 HTML 设计稿渲染成 PNG 图片返回,省掉自己搭渲染脚本的环节。
核心能力¶
资料中核实到的能力只有一条,也足够明确:
- 输入是 HTML 设计稿,输出是 PNG 图片。
- 触发方式是自然语言,不是命令行参数。官方给出的触发词是:画图、生成图片、配图、信息图、设计图、HTML转PNG、导出图片。
也就是说,Skill 内部承担的是“HTML → 像素图”这一步,排版本身仍然由你写的 HTML 决定。
安装与启用¶
Skill 坐标:
@user_a970e076/create-image-by-html
官方地址:
https://api.skillhub.cn/user_a970e076/create-image-by-html
SkillHub 页面:
https://www.skillhub.cn/skills/user_a970e076/create-image-by-html
标签里写着 requires_api_key=false,意味着启用不需要额外配置密钥。来源标记为 community,属于社区发布而非官方维护,装之前可以在页面上确认维护状态。
需要说明的是,已抓取的资料里没有给出具体平台的安装命令,也没有 Cursor、Codex CLI、Claude Code 的分别指引。这类基于 SKILL.md 格式的 Skill,通用做法是把 Skill 目录放到对应客户端的 Skills 目录下,由客户端加载 SKILL.md 的 frontmatter 与正文;具体路径以你所用客户端的文档为准,这里不代写未核实的路径。
典型用法¶
资料里没有提供可复现的命令行示例,下面只列已核实的部分。
触发方式:
画一张图
做个信息图
导出图片
调用时把 HTML 作为输入提供给 Skill,输出为 PNG。Skill 的触发词覆盖了“配图”“设计图”这类模糊表达,所以不需要严格命令格式,但描述清楚要画什么、版式如何,结果才可控。
适用场景与注意¶
适合:
- 已经有 HTML 模板,想批量或在对话里直接拿到 PNG 的人。
- 需要信息图、配图、封面这类静态图,且愿意用 HTML 控制排版的人。
- 不想为每次出图单独写无头浏览器脚本的团队。
注意:
- 输出是 PNG 位图,不是矢量格式,放大后按分辨率受限。
- 渲染质量取决于 HTML 本身,Skill 不做设计决策。
- 页面当前显示评分
100000、下载827、安装0。安装数为 0 说明这个 Skill 的采用情况还没有数据支撑,用之前建议先小范围试一次。 - 这是社区 Skill,
SKILL.md的具体执行逻辑(用什么渲染后端、是否依赖外部服务)资料中没有披露,需要读源码确认后再上生产流程。
结尾¶
create-image-by-html 的价值在于把“HTML 转 PNG”这一步从脚本里拿出来,变成对话里的一次出图。它不解决设计问题,也不生成矢量,适合那些已经有 HTML 模板、只想快速拿到位图的场景。
官方地址:https://www.skillhub.cn/skills/user_a970e076/create-image-by-html