开发公众号自动化skills必备：低成本图片生成方案实战

capture-html.exe <html文件> <div元素id> <输出图片路径>

name: "image-generator"
description: "通用图片生成工具,支持将任意 HTML 内容转换为图片。当用户需要生成自定义图片、海报、配图时调用此 skill。"
---

# 通用图片生成 Skill

## 功能说明

这个 skill 帮助用户将任意 HTML 内容转换为图片。通过 AI 生成 HTML 代码，然后使用 capture-html.exe 截图保存为图片。

## 使用场景

当用户需要：
- 生成自定义图片
- 创建海报或配图
- 将 HTML 内容转换为图片
- 制作带有特定样式和布局的图片
- 生成社交媒体配图

## 参数说明

- **第一个参数**: HTML 路径（必需）
- **第二个参数**: 要截图的元素选择器（必选， #capture-container）
- **第三个参数**: 输出文件名（可选，默认使用时间戳）

## 工作流程

1. **生成 HTML 代码**
   - 根据用户需求生成 HTML 内容
   - HTML 必须包含一个 id 为 "capture-container" 的 div 元素（或自定义选择器）
   - 确保样式符合用户需求
   - 只返回纯 HTML 代码，不要包含任何解释性文字

2. **保存 HTML 到临时文件**
   - 生成随机文件名（如：`image_<timestamp>_<random>.html`）
   - 将生成的 HTML 代码写入临时文件
   - 临时文件保存在系统临时目录或项目临时目录

3. **执行 capture-html.exe 进行截图**
   - 使用 `capture-html.exe <html文件> <div元素id> <输出图片路径>` 执行截图脚本
   - 脚本会从临时文件读取 HTML 内容
   - 使用 capture-html 截图并保存到指定位置
   - 截图完成后可删除临时文件

## HTML 生成要求

生成的 HTML 代码需要满足以下要求：

`html
<div id="capture-container" style="width: {width}px; min-height: {height}px;">
  <!-- 图片内容 -->
</div>
`

**通用设计规范**：

1. **容器要求**
   - 必须包含一个具有唯一 id 的容器元素（默认 #capture-container）
   - 容器尺寸可以通过 width/height 属性指定
   - 确保内容在容器内完整显示
   - **重要**：对于流程图、多层级内容等复杂布局，使用 `min-height` 而非固定 `height`，或预留足够的高度空间

2. **高度计算规则**（防止内容被裁剪）
   - **估算内容总高度**：标题 + 所有卡片/元素 + 间距 + 边距 + 底部说明
   - **预留安全边距**：在估算高度基础上增加 20-30% 的缓冲空间
   - **使用 min-height**：推荐使用 `min-height` 替代固定 `height`，让容器根据内容自动扩展
   - **示例计算**：
     `
     标题: 50px
     5个卡片: 5 × 80px = 400px
     4个箭头: 4 × 30px = 120px
     底部说明: 60px
     间距: 100px
     内边距: 80px
     总计: 810px
     建议容器高度: 1000px (预留20%缓冲)
     `

3. **布局对齐策略**
   - **避免使用 `justify-content: center`**：当内容高度接近或超过容器高度时，居中对齐会导致上下内容被裁剪
   - **推荐使用 `justify-content: flex-start`**：从顶部开始排列，确保内容完整显示
   - **如需居中效果**：使用 `padding` 或 `margin` 来调整视觉居中，而非 flex 居中
   - **错误示例**：
     `
     <!-- 容易导致内容被裁剪 -->
     <div style="height: 600px; justify-content: center;">
     ```
   - **正确示例**：
     ```html
     <!-- 内容完整显示 -->
     <div style="min-height: 800px; justify-content: flex-start; padding: 40px;">
     `

4. **内容溢出处理**
   - **避免内容溢出**：确保容器高度足够容纳所有内容
   - **使用 flex-wrap**：对于横向排列的元素，允许换行：`flex-wrap: wrap`
   - **调整间距**：适当减少元素间距以适应容器
   - **使用滚动**（不推荐）：如必须使用固定高度，可添加 `overflow: auto`，但截图时滚动条会被截取

5. **样式建议**
   - 所有样式建议内联在 style 属性中
   - 使用现代 CSS 特性（flexbox、grid、渐变等）
   - 考虑响应式设计
   - 使用合适的字体（Microsoft YaHei、PingFang SC、Arial 等）

6. **内容组织**
   - 合理的层级结构
   - 清晰的视觉层次
   - 适当的留白
   - 一致的设计语言

7. **流程图/架构图特殊规范**
   - **容器高度**：至少预留 1000px 以上高度
   - **使用 min-height**：`min-height: 1000px` 而非 `height: 600px`
   - **对齐方式**：使用 `justify-content: flex-start` 从顶部开始排列
   - **间距控制**：适当减少元素间距，如 `gap: 20px` 而非 `gap: 30px`
   - **内边距**：使用 `padding: 30px` 而非 `padding: 40px`，节省空间
   - **卡片尺寸**：适当减小卡片尺寸，如 `padding: 20px 40px` 而非 `padding: 30px 60px`
   - **示例**：
     `
     <div id="capture-container" style="width: 800px; min-height: 1000px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding: 30px;">
       <!-- 流程图内容 -->
     </div>
     `

4. **图片优化**
   - 使用矢量图形（SVG）保证清晰度
   - 控制图片大小
   - 优化加载性能
   - 考虑不同设备的显示效果

**输出要求**：
1. 只返回纯 HTML 代码，不要包含任何解释性文字
2. 所有样式必须内联在 style 属性中
3. 确保在指定尺寸内完美展示
4. **对于流程图、架构图等复杂内容**：
   - 必须使用 `min-height` 而非固定 `height`
   - 必须使用 `justify-content: flex-start` 而非 `center`
   - 必须预留足够的高度空间（至少比估算内容高度多 20%）
   - 必须确保所有内容都在容器内完整显示


### 执行截图

`
# 将 HTML 保存到临时文件后执行
capture-html.exe temp_image.html capture-container ./output.png
`

## 示例

用户输入：
`
生成一个图片，内容是一个渐变背景的卡片，显示"Hello World"
`

AI 生成 HTML：
`
<div id="capture-container" style="width: 800px; height: 600px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; justify-content: center; align-items: center; font-family: 'Microsoft YaHei', Arial, sans-serif;">
  <div style="background: rgba(255, 255, 255, 0.95); padding: 60px 80px; border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); text-align: center;">
    <h1 style="font-size: 48px; color: #333; margin: 0; font-weight: 700; letter-spacing: 2px;">Hello World</h1>
    <p style="font-size: 18px; color: #666; margin-top: 20px;">Welcome to Image Generator</p>
  </div>
</div>
`

执行步骤：
1. 将 HTML 保存到临时文件（如：`image_1737680000_abc123.html`）
2. 执行截图命令：
`
capture-html.exe image_1737680000_abc123.html capture-container ./output/image_1737680000_abc123.png
`
3. 截图完成后删除临时文件

## 注意事项

1. 确保 Chrome 浏览器已安装在 `C:\Program Files\Google\Chrome\Application\chrome.exe`，或修改脚本中的路径
2. 输出目录会自动创建（如果不存在）
3. 文件名可以包含路径，如 `images/hello.png`
4. 支持的图片格式：PNG（默认）、JPEG、WEBP
5. 对于 JPEG 和 WEBP 格式，可以通过 quality 参数控制图片质量（0-100）