html-to-image
HTML 转图片 skill - 将 HTML 文件或内容通过 agent-browser 渲染并截图为图片。适用于生成信息图、社交媒体配图、数据可视化截图等场景。
DeepseekModel
官方收录技能
质量 优秀 · 90
v1.0.0
获取
https://deepseekmodel.com/api/download.php?id=inclusionai-aworld-examples-skill-agent-skills-html-to-image-skill-md&format=skill
下载 .skill
标准格式，含 system_prompt 与 model_config，导入任意 Agent 框架即可使用
.skill 文件中 system_prompt 字段的实际内容。
name html-to-image description HTML 转图片 skill - 将 HTML 文件或内容通过 agent-browser 渲染并截图为图片。适用于生成信息图、社交媒体配图、数据可视化截图等场景。 HTML 转图片 (html-to-image) 概述 将 HTML 文件或内容通过 agent-browser 渲染为图片。典型用法：Claude 生成精美 HTML → 本 skill 截图 → 得到可直接发布的图片。 工具路径 脚本： .claude/skills/html-to-image/html_to_image.sh 依赖： agent-browser （CDP 已连接）、 python3 用法 ./html_to_image.sh -o <output> [-f <html_file> | -c <html_content>] [-w <width>] [-p <cdp_port>] [--full] 参数 参数 说明 必填 默认 -o 输出图片路径（.png） 是 - -f HTML 文件路径（与 -c 二选一） 二选一 - -c HTML 内容字符串（与 -f 二选一） 二选一 - -w 视口宽度 否 1080 -e 视口高度（不指定则全页截图） 否 - -p CDP 端口 否 9222 --full 全页截图（忽略视口高度限制） 否 默认开启 示例 # 从 HTML 文件截图 ./html_to_image.sh \ -f card.html -o card.png # 直接传入 HTML 内容 ./html_to_image.sh \ -c '<html><body><h1>Hello</h1></body></html>' \ -o hello.png # 指定宽度（适配手机尺寸） ./html_to_image.sh \ -f infographic.html -o output.png -w 750 # 固定视口截图（非全页） ./html_to_image.sh \ -f page.html -o output.png -w 1080 -e 1920 --no-full 典型工作流 Claude 根据内容生成精美 HTML（信息图、卡片等） 使用本 skill 截图为 PNG 将截图传给 xhs-publisher 发布到小红书 # 生成图片 ./html_to_image.sh -f card.html -o card.png # 发布到小红书 ./.claude/skills/xhs-publisher/publish_xhs.sh -t "标题" -c "正文" -i card.png
Agent 识别该技能的关键词，点击任意一个即可复制。
该技能未提供触发词。
下载的 .skill 包内含以下字段。
| 字段 | 说明 |
|---|---|
| format | 格式标识（skill/v1） |
| skill_id | 技能唯一 ID |
| name | 技能名称 |
| version | 版本号 |
| description | 技能描述 |
| category | 所属分类（数组） |
| trigger_words | 触发词列表 |
| tags | 标签列表 |
| source | 来源标识 |
| source_url | 来源链接（本页地址） |
| exported_at | 导出时间（每次下载生成） |
| system_prompt | 系统提示词正文 |
| model_config | 模型参数：provider / model / temperature / max_tokens / top_p |
| examples | 示例 |
| install_guide | 各平台导入说明（Coze / Dify / Claude / 自定义框架） |
